@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
/* --------------------------------------opensans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body {
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #091B32;
}

.font-1 {
  font-family: 'Open Sans', sans-serif;
}

button {
  cursor: pointer;
}

button:focus {
  outline: none;
}

/* -----------------------------------accordian */
:root {
  /* spacing */
  --acc-padding: 24px;
  --acc-panel-gap: 24px;

  /* icon */
  --icon-size: 18px;
  --icon-thickness: 3px;

  /* colors */
  --icon-color: #091B32;
  --icon-active-color: #4AAB3D;

  /* animation */
  --icon-transition: 0.35s ease;
}

/* ===============================
   Accordion Item
================================ */
.accordion-item {
  padding: var(--acc-padding);
  cursor: pointer;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===============================
   Panel
================================ */
.accordion-panel {
  padding-top: var(--acc-panel-gap);
  display: none;
}

/* ===============================
   Plus / Minus Icon
================================ */
.plusminus {
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
}

.plusminus::before,
.plusminus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--icon-thickness);
  background-color: var(--icon-color);
  transition: all var(--icon-transition);
}

/* horizontal line */
.plusminus::before {
  transform: translateY(-50%);
}

/* vertical line */
.plusminus::after {
  transform: translateY(-50%) rotate(90deg);
}

/* ===============================
   Active State
================================ */
.accordion-item.active .plusminus::before {
  background-color: var(--icon-active-color);
}

.accordion-item.active .plusminus::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0deg);
}


/* ----------------------------------------------------- Gradients  */
:root {
  --grad-1: linear-gradient(270.06deg, #005B82 -3.25%, #006E75 41.42%, #008F5D 73.06%, #009956 99.95%);
  --grad-2: linear-gradient(271.46deg, rgba(217, 217, 217, 0) 0.94%, rgba(188, 192, 194, 0) 18.29%, rgba(85, 101, 112, 0.570011) 43.06%, rgba(56, 75, 89, 0.731684) 54.01%, rgba(39, 60, 75, 0.825453) 61.71%, rgba(26, 48, 65, 0.897442) 73.45%, rgba(20, 44, 61, 0.926957) 84.42%, #091B32 98.71%),
    linear-gradient(0deg, rgba(1, 28, 42, 0.2), rgba(1, 28, 42, 0.2));
  --grad-3: linear-gradient(286.8deg, #005B82 26.94%, #006E75 67.68%, #008F5D 96.52%, #009956 121.05%);
  --grad-4: linear-gradient(270.56deg, #005B82 23.05%, #006E75 56.15%, #008F5D 79.6%, #009956 99.53%);
  --grad-5: linear-gradient(279.68deg, #005B82 0.65%, #006E75 50.02%, #008F5D 84.99%, #009956 114.72%);
}

.gradient-1,
.hover-gradient-1:hover {
  background: var(--grad-1);
}

.gradient-2,
.hover-gradient-2:hover {
  background: var(--grad-2);
}

.gradient-3,
.hover-gradient-3:hover {
  background: var(--grad-3);
}

.gradient-4,
.hover-gradient-4:hover {
  background: var(--grad-4);
}
.gradient-5,
.hover-gradient-5:hover {
  background: var(--grad-5);
}


/* ----------------------------------------------- CF7 form styling */
.wpcf7 {
    --border: 1px solid #ccc;

    /* Use Global Theme Colors Directly */
    --focus-border-color: var(--color-2);
    --input-bg: #fff;
    --input-color: var(--color-4);

    --submit-color: #fff;
    --submit-bg: var(--color-2);
    --submit-hover-bg: var(--color-3);
    --submit-disabled-bg: #8f8f8f;

    --message-color: #ef5f5f;
    --message-border: var(--color-5);

    --spinner-bg: #fff;
    --spinner-color: var(--color-2);

    /* Sizes */
    --input-height: 48px;
    --input-padding: 12px 18px;
    --textarea-height: 120px;
    --border-radius: 8px;
    --input-font-size: 16px;
}

.wpcf7 label,
.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7 label {
    font-size: var(--label-font-size);
    margin-bottom: 6px;
}

.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: var(--input-padding);
    border: var(--border);
    border-radius: var(--border-radius);
    transition: all 0.3s;
    height: var(--input-height);
    font-size: var(--input-font-size);
    background-color: var(--input-bg);
    color: var(--input-color);
}

select,
.wpcf7 select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff !important;
    background: url("data:image/svg+xml,%3Csvg width=\'20\' height=\'20\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M5 6l5 5 5-5 2 1-7 7-7-7 2-1z\' fill=\'%23264467\'/%3E%3C/svg%3E") no-repeat right 10px top 50%;
    padding-right: 36px !important;
}
.custom-date {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23264467' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zm-7-9h5v5h-5z'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 20px 20px;
    padding-right: 35px;
}

.wpcf7 textarea {
    height: var(--textarea-height);
    resize: vertical;
    font-size: var(--input-font-size);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    border-color: var(--focus-border-color);
    outline: none;
}

.submit-wrap,
.input-wrap {
    position: relative;
}

.wpcf7 .wpcf7-submit {
    background: var(--submit-bg);
    color: var(--submit-color);
    border: none;
    padding: var(--input-padding);
    height: var(--input-height);
    border-radius: var(--border-radius);
    font-size: var(--input-font-size);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

/* Hover button */
.wpcf7 .wpcf7-submit:hover {
    background: var(--submit-hover-bg);
}

/* Submitting state */
.wpcf7 form.submitting .wpcf7-submit {
    background: var(--submit-disabled-bg);
}

/* Spinner */
.wpcf7-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    background-color: var(--spinner-bg);
    opacity: 1;
}

.wpcf7-spinner:before {
    background-color: var(--spinner-color);
}

/* Error / Messages */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--message-color);
    color: var(--message-color);
    text-align: center;
}

.wpcf7-response-output {
    text-align: center;
}

.wpcf7-not-valid-tip {
    color: var(--message-color);
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-top: 2px;
}

.wpcf7 form .wpcf7-response-output {
    margin: 14px 0 4px 0;
    padding: 10px 20px;
    border: 2px solid var(--message-border);
    border-radius: var(--border-radius);
    line-height: 1.3;
}

/* ------------------------------------------------about-cards */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 314 / 414;
  transition: transform 0.9s ease-in-out;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ----------------------------------------------- Insight */
.insight-filter > .category-btn.active{
  background: var(--grad-1);
}