.quick-links li a:hover,
.text_white,
body {
    color: var(--color-white)
}

footer .quick-links li a,
.arrow-hover{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.arrow-hover:hover{
    color: var(--color-white);
}

footer .quick-links li a::after,
.arrow-hover::after{
    content: "";
    background-image: url('../images/svgs/arrow-up-right.svg');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    opacity: 0;
}
footer .quick-links li a::before,
.arrow-hover::before{
    position: absolute;
    content: "";
    height: 1px;
    background-color: var(--color-white);
    top: 100%;
    width: calc(100% - 20px);
    opacity: 0;
}
footer .quick-links li a:hover::after,
.arrow-hover:hover::after,
footer .quick-links li a:hover::before,
.arrow-hover:hover::before{
    opacity: 1;
}
footer .quick-links li a:hover::before,
.arrow-hover:hover::before{  
    opacity: 1;
}

.nav-link.active,
.relative {
    position: relative
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

body {
    font-family: Inter Tight, sans-serif;
    background: var(--color-black-300);
    font-weight: 400
}

h1,
h2,
h3,
h4,
h5,
h6,
ul {
    font-weight: 400;
    margin: 0;
    padding: 0
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 80px
}

a {
    text-decoration: none
}

button {
    cursor: pointer
}

.mt-32 {
    margin-top: 32px
}

.mt-48 {
    margin-top: 48px
}

.mt-64,
.mt_64 {
    margin-top: 64px
}

.capitalize {
    text-transform: capitalize
}

.uppercase {
    text-transform: uppercase
}

.block {
    display: block
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-center {
    align-items: center
}

.items-end {
    align-items: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap_12 {
    gap: 12px;
}

.ff_inter {
    font-family: Inter, sans-serif !important
}

.ff_inter_tight {
    font-family: "Inter Tight", sans-serif !important
}

.ff_geologica {
    font-family: Geologica, sans-serif !important
}

.fs_12,
.intl-tel-input .country-list .country {
    font-size: 12px
}

.fs_14 {
    font-size: 14px
}

.fs_15 {
    font-size: 15px
}

.fs_16 {
    font-size: 16px
}

.fs_18 {
    font-size: 18px
}

.fs_24 {
    font-size: 24px
}

.fs_26 {
    font-size: 26px
}

.fs_28 {
    font-size: 28px
}

.fs_30 {
    font-size: 30px
}

.fs_36 {
    font-size: 36px
}

.fs_38 {
    font-size: 38px
}
.fs_40 {
    font-size: 40px
}

.fs_48 {
    font-size: 48px
}

.fs_70 {
    font-size: 70px
}

.lh_16 {
    line-height: 16px
}

.lh_20 {
    line-height: 20px
}

.lh_21 {
    line-height: 21px
}

.lh_22 {
    line-height: 22px
}

.lh_20 {
    line-height: 20px
}

.lh_24 {
    line-height: 24px
}

.lh_25 {
    line-height: 25px
}

.lh_28 {
    line-height: 28px;
}

.lh_27 {
    line-height: 27px
}

.lh_32 {
    line-height: 32px
}

.lh_30 {
    line-height: 30px
}

.lh_40 {
    line-height: 40px
}

.lh_44 {
    line-height: 44px
}

.lh_60 {
    line-height: 60px
}

.lh_64 {
    line-height: 64px
}

.lh_85 {
    line-height: 85px
}

.lh_96 {
    line-height: 96px
}

.lh_normal {
    line-height: normal
}

.fw_300 {
    font-weight: 300
}

.fw_400 {
    font-weight: 400
}

.fw_500 {
    font-weight: 500
}

.fw_600 {
    font-weight: 600
}

.fw_700 {
    font-weight: 700
}

.fw_800 {
    font-weight: 800
}

.text_black {
    color: var(--color-black);
}
.text_gray_02 {
    color: var(--color-dark-gray-02);
}
.text_gray_03 {
    color: var(--color-dark-gray-03);
}

.text_white_70 {
    color: var(--color-white-70)
}

.text_D4D4D8 {
    color: var(--color-gray-165)
}


.text_gray_495 {
    color: var(--color-gray-495)
}

.text_gray_light {
    color: var(--color-gray-light);
}

.text_gray_165 {
    color: var(--color-gray-165);
}

.text_gray_170 {
    color: var(--color-gray-170)
}

.text_black_200 {
    color: var(--color-black-200)
}

.text_gray_230 {
    color: var(--color-gray-230);
}

.text_gray_50 {
    color: var(--color-gray-50)
}

.text_gray_100 {
    color: var(--color-gray-100)
}

.text_gray_140 {
    color: var(--color-gray-140)
}

.text_gray_200 {
    color: var(--color-gray-200)
}

.text_gray_250 {
    color: var(--color-gray-250);
}

.text_gray_300 {
    color: var(--color-gray-300)
}

.text_gray_350 {
    color: var(--color-gray-350)
}

.text_gray_380 {
    color: var(--color-gray-380)
}

.text_gray_400 {
    color: var(--color-gray-400)
}

.text_gray_450 {
    color: var(--color-gray-450)
}

.text_gray_650 {
    color: var(--color-gray-650)
}

.text_gray_700 {
    color: var(--color-gray-700)
}

.text_gray_800 {
    color: var(--color-gray-800)
}

.text_gray_900 {
    color: var(--color-gray-900)
}

.nav-link:hover,
.text_primary {
    color: var(--color-primary)
}
.text_gray_muted_dark {
    color: var(--color-gray-muted-dark)
}
.text_gray_muted_light {
    color: var(--color-gray-muted-light)
}

.text_black_300 {
    color: var(--color-black-300)
}

.text_gray_150 {
    color: var(--color-gray-150)
}

.lh_full {
    line-height: 100%
}

.max-w-full {
    max-width: 100%
}

.intl-tel-input.allow-dropdown,
.w-full {
    width: 100%
}

.w-fit {
    width: fit-content
}

.h-full {
    height: 100% !important
}

.h-auto {
    height: auto !important
}

.h-fit {
    height: fit-content !important
}

.h-screen {
    height: 100vh
}

.text-center {
    text-align: center
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.bg-transparent {
    background-color: transparent
}

.border-0 {
    border: none
}

.text-start {
    text-align: start
}

.absolute {
    position: absolute
}

.z_99 {
    z-index: 99
}

.z_999 {
    z-index: 999
}

.object-cover {
    object-fit: cover
}

.object-contain {
    object-fit: contain
}

.object-fill {
    object-fit: fill
}

.list-unstyled {
    list-style: none
}

.overflow-hidden {
    overflow: hidden
}

.btn-component {
    font-family: 'Inter Tight';
    padding: 12px 24px;
    border-radius: 99999px;
    gap: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-black-200);
    white-space: nowrap
}
.btn-component.header-btn {
    padding: 8px 16px;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    background: transparent;
    isolation: isolate;
    animation: headerBtnStyleCycle 12s ease-in-out infinite
}

.btn-component.header-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(243, 254, 0, 0.1);
    opacity: 0;
    animation: headerBtnShimmerBase 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0
}

.btn-component.header-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(243, 254, 0, 0.06) 35%,
        rgba(243, 254, 0, 0.24) 50%,
        rgba(243, 254, 0, 0.06) 65%,
        transparent 100%);
    background-size: 220% 100%;
    background-position: 200% 0;
    animation: headerBtnShimmer 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 1
}

.btn-component.header-btn .work-us {
    position: relative;
    z-index: 2
}

.btn-component.header-btn svg path {
    animation: headerBtnIconCycle 12s ease-in-out infinite
}

.btn-component.header-btn:hover,
.btn-component.header-btn:focus-visible {
    animation: none;
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
    transition: border-color .3s ease, color .3s ease
}

.btn-component.header-btn:hover svg path,
.btn-component.header-btn:focus-visible svg path {
    animation: none;
    fill: var(--color-primary);
    transition: fill .3s ease
}

.btn-component.header-btn:hover::before,
.btn-component.header-btn:hover::after,
.btn-component.header-btn:focus-visible::before,
.btn-component.header-btn:focus-visible::after {
    animation: none;
    opacity: 0
}

@media (prefers-reduced-motion: reduce) {
    .btn-component.header-btn,
    .btn-component.header-btn::before,
    .btn-component.header-btn::after,
    .btn-component.header-btn svg path {
        animation: none
    }
}

.btn-component.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-black-200);
    border: 1px solid var(--color-primary)
}

.btn-component.btn-light {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-white)
}

.btn-component.btn-black {
    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-white)
}

.btn-component.btn-black svg path {
    stroke: var(--color-white);
}

.btn-component.btn-black:hover {
    background-color: var(--color-white);
    border-color: var(--color-black);
    color: var(--color-black);
}

.btn-component.btn-outlined {
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white)
}

.btn-bordered {
    border: 1px solid var(--color-primary-3) !important;
}
.btn-bordered:hover{
    color: var(--color-black) !important;
}

.btn-component.btn-outlined-primary {
    background-color: var(--color-black-750);
    color: var(--color-white);
    border: 1px solid transparent;
    background-image: url("../images/btn-gradient-bg.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%
}
.category-pill {
    display: block;
    max-width: fit-content;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: white;
    border: 1px solid #F4F4F5;
    font-size: 12px;
    color: #3F3F46;
}
.category-pill.mb-20{
    margin-bottom: 20px;
}

.header {
    position: sticky;
    top: 0;
    padding: 22px 0;
    background-color: var(--color-black-200)
}

.nav-link {
    padding: 8px 16px
}

.pt_80,
.py_80 {
    padding-top: 80px
}

.pb_80,
.py_80 {
    padding-bottom: 80px
}

.py_60 {
    padding: 60px 0;
}

.nav-link.active {
    color: var(--color-primary)
}

.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    border-radius: 99999px;
    background-color: var(--color-primary)
}

.shrink-0 {
    flex-shrink: 0
}

.grow {
    flex-grow: 1
}

.pb_60 {
    padding-bottom: 60px
}

.section-heading {
    margin-top: 16px;
    margin-bottom: 16px
}

.hidden {
    display: none
}

.toggle-header {
    border: none;
    background-color: transparent
}

.directors-devider {
    width: 1px;
    height: 15px;
    background-color: var(--color-black-950)
}

.form-wraper {
    padding: 60px;
    background-color: var(--color-black);
}

.contact-heading {
    line-height: normal;
    letter-spacing: -0.72px;
    margin-top: 24px;
    margin-bottom: 12px;
    max-width: 510px;
}

.footer-top {
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: var(--color-black-800);
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.address-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 16px;
    row-gap: 28px;
}

.address-card {
    min-width: 0;
    padding: 20px;
    gap: 12px;
}

.address-card .address-text {
    margin-top: 6px;
    margin-bottom: 6px;
}

.address-content-wraper {
    gap: 6px;
}

.footer {
    padding-top: 64px;
    padding-bottom: 32px;
    border-top: 1px solid var(--color-black-850);
    background: var(--color-black-300)
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr minmax(110px, 216px) minmax(110px, 216px) minmax(110px, 216px);
    gap: 48px;
    margin-top: 72px;
    margin-bottom: 72px;
}

.footer-text p {
    max-width: 393px
}

.addresses-container {
    margin-top: 34px;
    padding: 24px;
    background-color: var(--color-black-800);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.address-box {
    padding: 20px
}

.social-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-black-750)
}

.input {
    border-radius: 8px;
    border: 1px solid var(--color-gray-500);
    background: var(--color-gray-600);
    padding: 11.5px 0;
    outline: 0;
    transition: border-color .3s ease-in-out
}

.input:focus {
    border-color: var(--color-primary)
}

.input.error {
    border-color: var(--color-danger)
}

.textarea {
    resize: none;
    height: 117px
}

.floating_btn {
    position: fixed;
    bottom: 65px;
    right: 5px;
    width: 100px;
    height: 100px;
    z-index: 1000
}

.contact_icon {
    background-color: var(--color-black-100);
    width: 60px;
    height: 60px;
    border-radius: 50px;
    box-shadow: 2px 2px 3px var(--color-black-100);
    transform: translatey(0);
    animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite pulsing;
    box-shadow: 0 0 0 0 var(--color-black-100);
    -webkit-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite pulsing;
    -moz-animation: 1.25s cubic-bezier(.66, 0, 0, 1) infinite pulsing;
    -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    transition: .3s ease-in-out
}

.bubble,
.cursor-circle {
    position: fixed;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    filter: blur(25px);
    pointer-events: none
}



@keyframes pulsing {
    to {
        box-shadow: 0 0 0 30px rgba(232, 76, 61, 0)
    }
}

.cursor-circle {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: radial-gradient(circle at center, var(--color-primary) 0, color-mix(in srgb, var(--color-primary) 60%, transparent) 40%, color-mix(in srgb, var(--color-primary) 30%, transparent) 70%, transparent 100%);
    transition: transform .1s linear;
    will-change: transform;
    mix-blend-mode: lighten;
    opacity: .6
}

.behind-cursor {
    z-index: 2;
    isolation: isolate
}

.bubble {
    background: radial-gradient(circle at center, var(--color-primary) 0, color-mix(in srgb, var(--color-primary) 50%, transparent) 50%, transparent 100%);
    opacity: .5;
    transform: translate(-50%, -50%) scale(1);
    z-index: 1;
    animation: .8s ease-out forwards bubbleFade
}

.services-dropdown .nav-link {
    gap: 8px
}

@keyframes bubbleFade {
    0% {
        opacity: .5;
        transform: translate(-50%, -50%) scale(.6)
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes headerBtnShimmerBase {
    0%,
    41.67%,
    55%,
    100% {
        opacity: 0
    }

    43%,
    51% {
        opacity: 1
    }
}

@keyframes headerBtnShimmer {
    0%,
    41.67%,
    55%,
    100% {
        opacity: 0;
        background-position: 200% 0
    }

    42% {
        opacity: 1;
        background-position: 200% 0
    }

    50% {
        opacity: 1;
        background-position: -100% 0
    }

    54% {
        opacity: 0;
        background-position: -100% 0
    }
}

@keyframes headerBtnStyleCycle {
    0%,
    41.67%,
    52%,
    58.33%,
    100% {
        border-color: var(--color-white);
        color: var(--color-white)
    }

    43%,
    49% {
        border-color: var(--color-primary);
        color: var(--color-primary)
    }
}

@keyframes headerBtnIconCycle {
    0%,
    41.67%,
    52%,
    58.33%,
    100% {
        fill: var(--color-white)
    }

    43%,
    49% {
        fill: var(--color-primary)
    }
}

.theme-toggler {
    border-radius: 15.909px;
    border: 1px solid var(--color-gray-370);
    width: 52px;
    height: 32px;
    background-color: var(--color-gray-360);
    padding: 3px
}

.theme-toggler .theme-icon {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, .24));
    background-color: var(--color-black-960)
}

.dark-theme .theme-icon {
    right: 3px;
    left: auto
}

.error-message {
    color: var(--color-danger);
    font-size: 14px;
    margin-top: 4px
}

.text-eclipsis-1,
.text-eclipsis-2,
.text-eclipsis-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}
.text-eclipsis-2{
    -webkit-line-clamp: 2;
}
.text-eclipsis-1{
    -webkit-line-clamp: 1;
}

.text-eclipsis-3 {
    -webkit-line-clamp: 3
}

#contactForm {
    margin-top: 60px;
}

.animated-light:hover .insight-content {
    background-color: var(--color-gray-550);
}
.insight-content h3{
    letter-spacing: -0.32px;
}

.iti {
    width: 100%;
    position: relative
}

.intl-tel-input .country-list {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    height: 200px;
    top: 100%;
    width: 100%;
    z-index: 999;
    background: var(--color-gray-600)
}
/* Width of the scrollbar */
.intl-tel-input .country-list::-webkit-scrollbar {
    width: 10px;
    height: 0;
  }
  
  /* Track */
  .intl-tel-input .country-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  
  /* Thumb */
  .intl-tel-input .country-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }
  
  /* Thumb on hover */
  .intl-tel-input .country-list::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

.iti-mobile .intl-tel-input.iti-container {
    position: absolute;
    height: 300px;
    left: 0;
    top: 100%
}

.iti-mobile .intl-tel-input.iti-container .country-list {
    position: unset
}

.intl-tel-input .country-list {
    background: var(--color-black-300) !important;
    z-index: 10 !important;
    border-color: var(--color-black-400) !important;
    border-radius: 4px;
}

.intl-tel-input .selected-flag {
    height: 42px !important
}

.iti.iti--disabled {
    opacity: .6;
    pointer-events: none
}

.iti--allow-dropdown .country-list:hover .iti__selected-flag {
    background-color: var(--color-white-05)
}

.iti__preferred {
    border-bottom: 1px solid var(--color-gray-500);
    padding-bottom: 4px;
    margin-bottom: 4px
}

.contact-section {
    background-color: var(--color-cream-white);
}

/* Contact Form Dark Card Styles */
.cf-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.cf-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cf-input#phone {
    padding-left: 43px !important;
}

.cf-input:focus {
    border-bottom-color: #8BFF4D !important;
    outline: none !important;
    box-shadow: none !important;
}

.cf-input::placeholder {
    color: #8F8F8F;
}

.form-wraper textarea.cf-input {
    resize: none;
    min-height: fit-content;
    height: fit-content;
}

/* Testimonial Slider - Contact Form Left Side */
.cf-slides-viewport {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 60px;
    flex-grow: 1;
}

.contact-slider {
    grid-area: 1 / 1;
}

.cf-testimonial-side {
    display: flex;
    flex-direction: column;
}

.submit-query {
    margin-top: 43px;
}

.cf-testimonial-slider {
    flex: 1;
    background-color: var(--color-white);
    padding: 60px 40px;
}

.cf-slide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 0;
}

.cf-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

.cf-testimonial-text {
    margin-top: 12px;
}

.cf-testimonial-footer {}

.cf-avatar {
    border-radius: 50%;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: 1px solid #454545;
}

.cf-reviewer-name {
    color: var(--color-black);
    margin-bottom: 4px;
}

.cf-reviewer-role {
    color: var(--color-black);
}

.cf-testimonial-controls {
    margin-top: 36px;
}

.cf-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #D0D0D0;
    background: transparent;
    cursor: pointer;
    color: #555;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.cf-nav-btn:hover {
    border-color: var(--color-black);
    color: var(--color-black);
}

.cf-dot-wrapper{
    background-color: #F4F4F4;
    border-radius: 100px;
    padding: 4px;
    flex-shrink: 0;
    gap: 5px;
    min-width: 112px;
}

.cf-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D4D4D8;
    cursor: pointer;
    transition: width 0.2s, height 0.2s, border-radius 0.2s;
    flex-shrink: 0;
}

.cf-dot.active {
    width: 60px;
    height: 10px;
    border-radius: 5px;
    position: relative;
    background: #D4D4D8;
    overflow: hidden;
    cursor: default;
}

.cf-dot-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: #0B0B0B;
    transform: scaleX(0);
    transform-origin: left center;
    animation: cfDotProgress 3s linear forwards;
}

@keyframes cfDotProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.insight-title {
    margin-top: 32px;
}


.gif-wrapper {
    max-width: 294px;
    height: 294px;
    width: 100%;
    position: relative;
}

.little-gif-icon {
    top: 0;
    right: 0;
}


.faqs-wrapper {
    border-radius: 14px;
    border: 1px solid var(--color-gray-250);
    overflow: hidden;
}

.faq-item {
    border-bottom: 1px solid #E4E4E7;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-btn {
    padding: 24px;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    transition: padding 0.3s ease;
}

.faq-item.active .faq-btn {
    padding: 24px 24px 7px;
}

.faq-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.faq-item .minus-icon {
    display: none;
}

.faq-item.active .plus-icon {
    display: none;
}

.faq-item.active .minus-icon {
    display: block;
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 24px;
    max-width: 665px;
    width: 100%;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-body {
    max-height: 500px;
    opacity: 1;
    padding: 0 24px 24px;
}

.hover-black:hover {
    background-color: #000 !important;
    color: #fff;
    border-color:#000;
}
.hover-black:hover svg path{
    fill: #FFF;
}
@media (max-width:1204px) {
    .container {
        padding: 0 60px
    }
}

@media (max-width:991px) {
    .container {
        padding: 0 40px
    }

    .lg_hidden {
        display: none
    }

    .lg_block {
        display: block !important
    }

    .addresses-container {
        margin-top: 71px;
        grid-template-columns: repeat(2, 1fr)
    }

    .mobile-menu {
        position: fixed;
        bottom: 0;
        left: 100%;
        width: 100%;
        height: calc(100dvh - 79.8px);
        background-color: var(--color-black-300);
        z-index: 1000;
        padding: 48px 24px;
        transition: left .3s ease-in-out;
        flex-direction: column;
        gap: 16px;
        overflow-y: auto
    }

    .mobile-menu.shown {
        left: 0
    }

    .mobile-menu .nav-link {
        padding: 8px 16px
    }

    .address-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:768px) {
    .md_hidden {
        display: none
    }

    .md_flex {
        display: flex
    }

    .md_block {
        display: block !important
    }

    .sm_ff_geologica {
        font-family: Geologica, sans-serif
    }

    .md-flex-wrap {
        flex-wrap: wrap
    }

    .md-justify-center {
        justify-content: center
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px
    }

    .footer-grid .footer-text {
        grid-column: 2;
        grid-column-start: 1;
        grid-column-end: 3;
        margin-bottom: 8px
    }

    .footer-grid .quick-links:nth-child(4) {
        grid-column: span 2;
        gap: 32px
    }

    .footer-grid .quick-links:nth-child(4) ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px
    }

    .footer-grid .footer-text p {
        max-width: 100%
    }

    .column-reverse {
        flex-direction: column-reverse;
    }

    .form-wraper {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
    .cf-testimonial-side{
        max-width: 100% !important;
    }
}

@media (max-width:640px) {
    .iti__selected-flag {
        padding: 0 8px
    }

    .iti__tel-input {
        padding-left: 52px !important
    }
}

@media (max-width:575px) {
    .theme-toggler {
        border-radius: 12px;
        width: 38px;
        height: 24px
    }

    .theme-toggler .theme-icon {
        width: 19.5px;
        height: 19.5px;
        top: 2px
    }

    .theme-toggler .theme-icon svg {
        width: 12px !important
    }

    .sm_items_start {
        align-items: start;
    }

    .sm_gap_12 {
        gap: 12px;
    }

    .sm_mt_none {
        margin-top: 0;
    }

    .sm_mt_32 {
        margin-top: 32px !important
    }

    .sm_fs_14 {
        font-size: 14px
    }

    .sm_fs_16 {
        font-size: 16px
    }

    .sm_fs_18 {
        font-size: 16px
    }

    .sm_fs_20 {
        font-size: 20px
    }

    .sm_fs_24 {
        font-size: 24px
    }

    .sm_fs_22 {
        font-size: 22px
    }

    .sm_fs_28 {
        font-size: 28px
    }

    .sm_lh_21 {
        line-height: 21px
    }

    .sm_lh_20 {
        line-height: 20px
    }

    .sm_lh_24 {
        line-height: 24px
    }

    .sm_lh_25 {
        line-height: 25px
    }

    .sm_lh_28 {
        line-height: 28px
    }

    .sm_lh_30 {
        line-height: 30px
    }

    .sm_lh_32 {
        line-height: 32px
    }

    .sm_lh_42 {
        line-height: 42px
    }

    .sm_fw_500 {
        font-weight: 500;
    }

    .sm_fw_600 {
        font-weight: 600;

    }

    .sm_fw_700 {
        font-weight: 700
    }

    .header {
        padding: 20px 0
    }

    .container {
        /* padding: 0 24px */
        padding: 0 16px;
    }

    .sm-hidden {
        display: none
    }

    .sm-flex-wrap {
        flex-wrap: wrap
    }

    .sm_w_full {
        width: 100%;
    }

    .btn-component {
        padding: 10px 16px
    }

    .sm_py_32 {
        padding-top: 32px;
        padding-bottom: 32px
    }

    .sm_py_24 {
        padding-top: 24px;
        padding-bottom: 24px
    }

    .sm_pt_0 {
        padding-top: 0
    }

    .sm_pb_0 {
        padding-bottom: 0
    }

    .sm-text-center {
        text-align: center
    }

    .sm-justify-center {
        justify-content: center
    }

    .section-heading {
        margin-top: 6px;
        margin-bottom: 6px
    }

    .form-wraper {
        padding: 16px
    }

    .btn-component.btn-outlined-primary {
        background-size: 99% 94%
    }


    .footer {
        padding: 32px 0 57px
    }

    .address-container,
    .addresses-container {
        grid-template-columns: 1fr
    }

    .footer-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .address-card {
        padding: 0;
    }

    .contact-heading {
        margin-top: 17px;
        margin-bottom: 12px;
    }

    #contactForm {
        margin-top: 24px;
        gap: 48px !important;
    }

    .submit-query {
        margin-top: -8px !important;
    }

    .cf-testimonial-slider {
        padding: 24px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .cf-slides-viewport {
        margin-top: 24px;
    }

    .contact-slider {
        margin-top: 0;
    }

    .cf-testimonial-text {
        margin-top: 16px;
    }

    .cf-testimonial-footer {
        margin-top: 83px;
    }

    .cf-grid-2 {
        grid-template-columns: 1fr;
    }

    .form-wraper {
        padding: 24px 16px !important;
    }

    .cf-testimonial-controls {
        margin-top: 30px;
    }

    .insight-title {
        margin-top: 8px;
    }

    .sm-w-full {
        width: 100%
    }

    .blogs-section .insights-wraper {
        margin-top: 24px;
        gap: 24px;
    }

    .sub_title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -0.72px;
    }

    .cf-reviewer-name{
        font-weight: 600 !important;
    }

    .cf-reviewer-role{
        font-size: 12px !important;
        line-height: 18px;
    }

    .cf-testimonial-text{
        font-size: 14px !important;
    }
}