/* ===== RESET / BASE ===== */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

/* ===== CONTAINER ===== */
.container{width:100%;margin-inline:auto;padding-inline:12px}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}
@media(min-width:1400px){.container{max-width:1320px}}

/* ===== FLEX ===== */
.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.d-block{display:block}
.d-inline-block{display:inline-block}
.d-none{display:none}
.d-grid{display:grid}
.flex-row{flex-direction:row}
.flex-column{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.flex-grow-1{flex-grow:1}
.flex-shrink-0{flex-shrink:0}
.justify-content-start{justify-content:flex-start}
.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.justify-content-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.align-items-start{align-items:flex-start}
.align-items-center{align-items:center}
.align-items-end{align-items:flex-end}
.align-items-stretch{align-items:stretch}
.align-self-center{align-self:center}
.gap-0{gap:0}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:1rem}
.gap-4{gap:1.5rem}
.gap-5{gap:3rem}

/* ===== SPACING (0–5) ===== */
.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:1rem}.m-4{margin:1.5rem}.m-5{margin:3rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.ms-0{margin-left:0}.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-3{margin-left:1rem}.ms-4{margin-left:1.5rem}.ms-5{margin-left:3rem}
.me-0{margin-right:0}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}.me-4{margin-right:1.5rem}.me-5{margin-right:3rem}
.mx-0{margin-inline:0}.mx-1{margin-inline:.25rem}.mx-2{margin-inline:.5rem}.mx-3{margin-inline:1rem}.mx-4{margin-inline:1.5rem}.mx-5{margin-inline:3rem}
.my-0{margin-block:0}.my-1{margin-block:.25rem}.my-2{margin-block:.5rem}.my-3{margin-block:1rem}.my-4{margin-block:1.5rem}.my-5{margin-block:3rem}
.mx-auto{margin-inline:auto}

.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:3rem}
.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:1rem}.pt-4{padding-top:1.5rem}.pt-5{padding-top:3rem}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:1rem}.pb-4{padding-bottom:1.5rem}.pb-5{padding-bottom:3rem}
.ps-0{padding-left:0}.ps-1{padding-left:.25rem}.ps-2{padding-left:.5rem}.ps-3{padding-left:1rem}.ps-4{padding-left:1.5rem}.ps-5{padding-left:3rem}
.pe-0{padding-right:0}.pe-1{padding-right:.25rem}.pe-2{padding-right:.5rem}.pe-3{padding-right:1rem}.pe-4{padding-right:1.5rem}.pe-5{padding-right:3rem}
.px-0{padding-inline:0}.px-1{padding-inline:.25rem}.px-2{padding-inline:.5rem}.px-3{padding-inline:1rem}.px-4{padding-inline:1.5rem}.px-5{padding-inline:3rem}
.py-0{padding-block:0}.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}.py-3{padding-block:1rem}.py-4{padding-block:1.5rem}.py-5{padding-block:3rem}

/* ===== TEXT ===== */
.text-start{text-align:left}
.text-center{text-align:center}
.text-end{text-align:right}
.text-uppercase{text-transform:uppercase}
.text-lowercase{text-transform:lowercase}
.text-capitalize{text-transform:capitalize}
.text-nowrap{white-space:nowrap}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-light{font-weight:300}
.fw-normal{font-weight:400}
.fw-medium{font-weight:500}
.fw-semibold{font-weight:600}
.fw-bold{font-weight:700}
.fs-1{font-size:2.5rem}
.fs-2{font-size:2rem}
.fs-3{font-size:1.75rem}
.fs-4{font-size:1.5rem}
.fs-5{font-size:1.25rem}
.fs-6{font-size:1rem}
.text-primary{color:#0d6efd}
.text-secondary{color:#6c757d}
.text-success{color:#198754}
.text-danger{color:#dc3545}
.text-warning{color:#ffc107}
.text-info{color:#0dcaf0}
.text-light{color:#f8f9fa}
.text-dark{color:#212529}
.text-muted{color:#6c757d}
.text-white{color:#fff}

/* ===== BACKGROUND ===== */
.bg-primary{background-color:#0d6efd}
.bg-secondary{background-color:#6c757d}
.bg-success{background-color:#198754}
.bg-danger{background-color:#dc3545}
.bg-warning{background-color:#ffc107}
.bg-info{background-color:#0dcaf0}
.bg-light{background-color:#f8f9fa}
.bg-dark{background-color:#212529}
.bg-white{background-color:#fff}
.bg-transparent{background-color:transparent}

/* ===== BORDER ===== */
.border{border:1px solid #dee2e6}
.border-0{border:0}
.border-top{border-top:1px solid #dee2e6}
.border-bottom{border-bottom:1px solid #dee2e6}
.border-start{border-left:1px solid #dee2e6}
.border-end{border-right:1px solid #dee2e6}
.rounded{border-radius:.375rem}
.rounded-0{border-radius:0}
.rounded-1{border-radius:.25rem}
.rounded-2{border-radius:.375rem}
.rounded-3{border-radius:.5rem}
.rounded-4{border-radius:.75rem}
.rounded-5{border-radius:1rem}
.rounded-circle{border-radius:50%}
.rounded-pill{border-radius:50rem}

/* ===== SIZE ===== */
.w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}.w-auto{width:auto}
.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.h-auto{height:auto}
.mw-100{max-width:100%}
.mh-100{max-height:100%}
.vw-100{width:100vw}
.vh-100{height:100vh}

/* ===== POSITION ===== */
.position-relative{position:relative}
.position-absolute{position:absolute}
.position-fixed{position:fixed}
.position-sticky{position:sticky}
.top-0{top:0}
.bottom-0{bottom:0}
.start-0{left:0}
.end-0{right:0}
.translate-middle{transform:translate(-50%,-50%)}

/* ===== OVERFLOW / VISIBILITY ===== */
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-scroll{overflow:scroll}
.visible{visibility:visible}
.invisible{visibility:hidden}
.opacity-0{opacity:0}
.opacity-25{opacity:.25}
.opacity-50{opacity:.5}
.opacity-75{opacity:.75}
.opacity-100{opacity:1}

/* ===== SHADOW ===== */
.shadow-none{box-shadow:none}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.075)}
.shadow{box-shadow:0 2px 6px rgba(0,0,0,.15)}
.shadow-lg{box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* ===== GRID (12 col) ===== */
.row{display:flex;flex-wrap:wrap;margin-inline:-12px}
.row>*{padding-inline:12px;width:100%}
.col{flex:1 0 0%}
.col-1{flex:0 0 auto;width:8.3333%}
.col-2{flex:0 0 auto;width:16.6667%}
.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.3333%}
.col-5{flex:0 0 auto;width:41.6667%}
.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.3333%}
.col-8{flex:0 0 auto;width:66.6667%}
.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.3333%}
.col-11{flex:0 0 auto;width:91.6667%}
.col-12{flex:0 0 auto;width:100%}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* sm ≥576 */
@media(min-width:576px){
  .d-sm-none{display:none}.d-sm-block{display:block}.d-sm-flex{display:flex}.d-sm-inline-block{display:inline-block}
  .flex-sm-row{flex-direction:row}.flex-sm-column{flex-direction:column}
  .justify-content-sm-center{justify-content:center}.justify-content-sm-between{justify-content:space-between}
  .align-items-sm-center{align-items:center}
  .text-sm-start{text-align:left}.text-sm-center{text-align:center}.text-sm-end{text-align:right}
  .col-sm-1{flex:0 0 auto;width:8.3333%}.col-sm-2{flex:0 0 auto;width:16.6667%}
  .col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333%}
  .col-sm-5{flex:0 0 auto;width:41.6667%}.col-sm-6{flex:0 0 auto;width:50%}
  .col-sm-7{flex:0 0 auto;width:58.3333%}.col-sm-8{flex:0 0 auto;width:66.6667%}
  .col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333%}
  .col-sm-11{flex:0 0 auto;width:91.6667%}.col-sm-12{flex:0 0 auto;width:100%}
}

/* md ≥768 */
@media(min-width:768px){
  .d-md-none{display:none}.d-md-block{display:block}.d-md-flex{display:flex}.d-md-inline-block{display:inline-block}
  .flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}
  .justify-content-md-center{justify-content:center}.justify-content-md-between{justify-content:space-between}
  .align-items-md-center{align-items:center}
  .text-md-start{text-align:left}.text-md-center{text-align:center}.text-md-end{text-align:right}
  .col-md-1{flex:0 0 auto;width:8.3333%}.col-md-2{flex:0 0 auto;width:16.6667%}
  .col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333%}
  .col-md-5{flex:0 0 auto;width:41.6667%}.col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.3333%}.col-md-8{flex:0 0 auto;width:66.6667%}
  .col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333%}
  .col-md-11{flex:0 0 auto;width:91.6667%}.col-md-12{flex:0 0 auto;width:100%}
}

/* lg ≥992 */
@media(min-width:992px){
  .d-lg-none{display:none}.d-lg-block{display:block}.d-lg-flex{display:flex}.d-lg-inline-block{display:inline-block}
  .flex-lg-row{flex-direction:row}.flex-lg-column{flex-direction:column}
  .justify-content-lg-center{justify-content:center}.justify-content-lg-between{justify-content:space-between}
  .align-items-lg-center{align-items:center}
  .text-lg-start{text-align:left}.text-lg-center{text-align:center}.text-lg-end{text-align:right}
  .col-lg-1{flex:0 0 auto;width:8.3333%}.col-lg-2{flex:0 0 auto;width:16.6667%}
  .col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333%}
  .col-lg-5{flex:0 0 auto;width:41.6667%}.col-lg-6{flex:0 0 auto;width:50%}
  .col-lg-7{flex:0 0 auto;width:58.3333%}.col-lg-8{flex:0 0 auto;width:66.6667%}
  .col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333%}
  .col-lg-11{flex:0 0 auto;width:91.6667%}.col-lg-12{flex:0 0 auto;width:100%}
}

/* xl ≥1200 */
@media(min-width:1200px){
  .d-xl-none{display:none}.d-xl-block{display:block}.d-xl-flex{display:flex}
  .text-xl-start{text-align:left}.text-xl-center{text-align:center}.text-xl-end{text-align:right}
  .col-xl-1{flex:0 0 auto;width:8.3333%}.col-xl-2{flex:0 0 auto;width:16.6667%}
  .col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333%}
  .col-xl-5{flex:0 0 auto;width:41.6667%}.col-xl-6{flex:0 0 auto;width:50%}
  .col-xl-7{flex:0 0 auto;width:58.3333%}.col-xl-8{flex:0 0 auto;width:66.6667%}
  .col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333%}
  .col-xl-11{flex:0 0 auto;width:91.6667%}.col-xl-12{flex:0 0 auto;width:100%}
}


/* =========================================================
   GLOBAL
========================================================= */
/* =========================================================
   FONTS
========================================================= */

body {
    margin: 0;
    padding: 0;
    font-size: 18px;

    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.title,
.site-logo {
    font-family: "Inria Serif", Georgia, "Times New Roman", serif;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;

    width: 100%;

    background: #000;
    color: #fff;

    /* border-top: 2px solid #d8d8d8; */
}


/* =========================================================
   HEADER BAR (top row)
========================================================= */

.header-bar {
    width: 100%;
    min-height: 82px;

    display: flex;
    align-items: center;
}

.header-bar .container {
    width: 100%;
}


/* =========================================================
   LOGO
========================================================= */

.site-logo {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    color: #fff;
    text-decoration: none;

    line-height: .85;

    padding: 4px 0;
}

.logo-top {
    display: block;

    font-size: 19px;
    font-weight: 400;

    letter-spacing: -0.8px;
}

.logo-bottom {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-top: 3px;

    font-size: 21px;
    font-weight: 600;

    letter-spacing: -1px;
}

.logo-bottom i {
    font-size: 18px;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.main-navigation {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    gap: 34px;
}

.main-navigation a {
    display: inline-block;

    color: #fff;
    text-decoration: none;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.2;

    white-space: nowrap;

    transition:
        opacity .2s ease,
        color .2s ease;
}

.main-navigation a:hover {
    opacity: .7;
}


/* =========================================================
   DESKTOP PHONE BUTTON
========================================================= */

.phone-button {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 5px 9px;

    color: #fff;
    text-decoration: none;

    border: 1px solid #fff;
    border-radius: 6px;

    white-space: nowrap;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.phone-button:hover {
    background: #fff;
    color: #000;
}

.phone-number {
    font-size: 18px;
    font-weight: 600;

    letter-spacing: .1px;
}


/* =========================================================
   PHONE ICON
========================================================= */

.phone-icon {
    width: 27px;
    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #fff;
    color: #b8792f;

    border-radius: 50%;
}

.phone-icon i {
    font-size: 18px;
}


/* =========================================================
   MOBILE ACTIONS
========================================================= */

.mobile-actions {
    display: flex;
    align-items: center;

    gap: 9px;
}


/* =========================================================
   MOBILE CALL BUTTON
========================================================= */

.mobile-action {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000;
    background: #fff;

    text-decoration: none;

    border-radius: 5px;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.mobile-action i {
    font-size: 18px;
}

.mobile-action:hover {
    background: #e7e7e7;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    background: transparent;

    border: 1px solid #fff;
    border-radius: 5px;

    cursor: pointer;
}


/* Hamburger lines */

.mobile-menu-button span {
    display: block;

    width: 20px;
    height: 2px;

    background: #fff;

    transition:
        transform .25s ease,
        opacity .2s ease;
}


/* =========================================================
   HAMBURGER → X
========================================================= */

.mobile-menu-button.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-navigation {
    display: none;

    width: 100%;

    background: #000;

    border-top: 1px solid #292929;

    overflow: hidden;
}


/* Open state */

.mobile-navigation.is-open {
    display: block;
}


/* =========================================================
   MOBILE NAV INNER
========================================================= */

.mobile-nav-inner {
    width: 100%;

    padding: 8px 18px 20px;
}


/* =========================================================
   MOBILE NAV LINKS
========================================================= */

.mobile-nav-inner a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 54px;

    padding: 0 4px;

    color: #fff;
    text-decoration: none;

    font-size: 18px;

    border-bottom: 1px solid #292929;
}

.mobile-nav-inner a:last-child {
    border-bottom: none;
}

.mobile-nav-inner a i {
    font-size: 18px;

    opacity: .7;

    transition: transform .2s ease;
}

.mobile-nav-inner a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .header-bar {
        min-height: 78px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .header-bar {
        min-height: 72px;
    }

    .header-bar .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .site-logo {
        padding: 3px 0;
    }

    .logo-top {
        font-size: 19px;
    }

    .logo-bottom {
        font-size: 21px;
    }

    .logo-bottom i {
        font-size: 18px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .header-bar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .logo-top {
        font-size: 19px;
    }

    .logo-bottom {
        font-size: 21px;
    }

    .mobile-actions {
        gap: 6px;
    }

    .mobile-action,
    .mobile-menu-button {
        width: 40px;
        height: 40px;
    }

}
/* =========================================
   HERO SECTION
========================================= */

.section-padding {
    padding: 40px 0;
}

.hero-section {
    position: relative;
    min-height: 465px;

    padding-top: 80px;
    padding-bottom: 80px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.86) 0%,
            rgba(0, 0, 0, 0.72) 34%,
            rgba(0, 0, 0, 0.22) 70%,
            rgba(0, 0, 0, 0.05) 100%
        ),
        url("../img/home-hero.webp");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    color: #fff;
}


/* =========================================
   HERO CONTENT
========================================= */

.hero-content {
    max-width: 500px;
}


/* =========================================
   TAGS
========================================= */

.hero-tags {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 16px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 51px;
    height: 25px;

    padding: 13px;

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50px;

    color: #fff;

    font-size: 18px;
    line-height: 1;
}


/* =========================================
   EYEBROW
========================================= */

.hero-eyebrow {
    margin-bottom: 2px;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
}


/* =========================================
   LOCATION
========================================= */

.hero-location {
    margin: 0 0 14px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 18px;
}


/* =========================================
   HERO TITLE
========================================= */

.hero-title {
    margin: 0 0 8px;

    color: #f7f0e6;

    font-size: 54px;
    line-height: 1.18;
    font-weight: 500;

    letter-spacing: -0.5px;
}


/* =========================================
   DESCRIPTION
========================================= */

.hero-description {
    max-width: 455px;

    margin: 0 0 24px;

    color: rgba(255, 255, 255, 0.92);

    font-size: 18px;
    line-height: 1.45;
}


/* =========================================
   BUTTONS
========================================= */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 8px;
}

.hero-button {
    min-width: 185px;
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 18px;

    border-radius: 5px;

    text-decoration: none;

    font-size: 18px;
    font-weight: 600;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hero-button:hover {
    transform: translateY(-2px);
}


/* Primary Button */

.hero-button-primary {
    background: #b96870;
    color: #fff;
}

.hero-button-primary:hover {
    background: #a95b63;
    color: #fff;
}


/* Secondary Button */

.hero-button-secondary {
    background: #fff;
    color: #263843;
}

.hero-button-secondary:hover {
    background: #eeeeee;
    color: #263843;
}


/* =========================================
   NOTE
========================================= */

.hero-note {
    margin: 0;
    padding-left: 2px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 18px;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .hero-section {
        min-height: 500px;

        padding-top: 40px;
        padding-bottom: 40px;

        background-position: 58% center;
    }

    .hero-content {
        /* max-width: 480px; */
    }

    .hero-title {
        font-size: 36px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .hero-section {
        min-height: auto;

        padding-top: 40px;
        padding-bottom: 40px;

        background-position: 68% center;

        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.78) 0%,
                rgba(0, 0, 0, 0.74) 55%,
                rgba(0, 0, 0, 0.82) 100%
            ),
            url("hero-pets.jpg");
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-tags {
        margin-bottom: 14px;
    }

    .hero-eyebrow {
        font-size: 18px;
    }

    .hero-location {
        margin-bottom: 15px;
    }

    .hero-title {
        margin-bottom: 14px;

        font-size: 34px;
        line-height: 1.15;
    }

    .hero-description {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 18px;
        line-height: 1.5;
    }

    .hero-actions {
                flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: auto;
    }

    .hero-button {
        /* width: 100%; */
        min-height: 44px;
    }

    .hero-note {
        font-size: 18px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .hero-title {
        font-size: 30px;
    }

    .hero-description {
        font-size: 18px;
    }

}

/* =========================================
   STATS SECTION
========================================= */

.stats-section {
    background: #f7f5f1;
    padding: 40px 0;
}


/* =========================================
   STAT CARD
========================================= */

.stat-card {
    min-height: 138px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 22px 25px;

    background: #fff;

    border-radius: 24px;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.12);
}


/* =========================================
   ICON
========================================= */

.stat-icon {
    width: 62px;
    min-width: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #c66d73;

    font-size: 42px;
}

.stat-icon i {
    line-height: 1;
}


/* =========================================
   CONTENT
========================================= */

.stat-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 10px
}
@media (max-width: 767px) {
    .stat-content {
        text-align: left;
    }
}

/* =========================================
   NUMBER / TITLE
========================================= */

.stat-number {
    color: #304b5d;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;
    line-height: 1;

    white-space: nowrap;
}

.stat-number sup {
    position: relative;
    top: -0.35em;

    font-size: 18px;
}


/* Star */

.stat-number .fa-star {
    margin-left: 2px;

    font-family: inherit;
    font-size: 22px;
}


/* =========================================
   LABEL
========================================= */

.stat-label {
    margin-top: 8px;

    color: #304b5d;

    font-size: 18px;
    line-height: 1.2;

    white-space: nowrap;
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 992px) {

    .stats-section .row {
        margin-inline: -10px;
    }

    .stats-section .row > * {
        padding-inline: 10px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .stat-card {
        min-height: 160px;

        padding: 18px;

        gap: 10px;

        border-radius: 20px;
        flex-direction: column;
    }

    .stat-icon {
        width: 48px;
        min-width: 48px;

        font-size: 32px;
        min-height: 45px;
    }

    .stat-number {
        font-size: 27px;
    }

    .stat-label {
        font-size: 18px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .stats-section {
        padding: 30px 0 45px;
    }

    .stats-section .row {
        gap: 15px;
    }

    .stat-card {
        min-height: 110px;

        padding: 20px;

        border-radius: 18px;
    }

    .stat-icon {
        width: 55px;
        min-width: 55px;

        font-size: 34px;
    }

    .stat-number {
        font-size: 28px;
    }

    .stat-label {
        font-size: 18px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .stat-card {
        padding: 17px;
    }

    .stat-icon {
        width: 48px;
        min-width: 48px;

        font-size: 30px;
    }

    .stat-number {
        font-size: 25px;
    }

    .stat-label {
        font-size: 18px;
    }

}

/* =========================================
   CONTACT INFO SECTION
========================================= */

.contact-info-section {
    padding: 38px 0;
    background: #f7f5f1;
}

.contact-info-wrapper {
    display: flex;
    align-items: center;

    /* max-width: 1000px; */
    margin: 0 auto;
}


/* =========================================
   LOCATION
========================================= */

.contact-location {
    width: 30%;

    display: flex;
    align-items: flex-start;

    gap: 18px;
}

.contact-icon {
    width: 28px;
    min-width: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #c66d73;

    font-size: 28px;
}

.contact-content {
    display: flex;
    flex-direction: column;

    color: #294457;

    font-size: 18px;
    line-height: 1.5;
}

.contact-content strong {
       font-weight: 700;
    font-size: 20px;
}

.contact-content a {
    margin-top: 8px;

    color: #294457;
    text-decoration: none;
}

.contact-content a:hover {
    color: #c66d73;
}


/* =========================================
   MAIN DIVIDER
========================================= */

.contact-divider {
    width: 1px;
    height: 102px;

    margin: 0 52px;

    background: #c66d73;
    opacity: .65;
}


/* =========================================
   SCHEDULE
========================================= */

.contact-schedule {
    flex: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 50px;
    row-gap: 10px;
}

.schedule-item {
    display: flex;
    align-items: flex-start;

    gap: 12px;
}

.schedule-item .contact-icon {
    width: 30px;
    min-width: 60px;

    font-size: 27px;
}

.schedule-item .contact-content {
    padding-top: 1px;
}

.schedule-item .contact-content strong {
    display: block;
}

.schedule-item .contact-content span {
    display: block;
}


/* =========================================
   SCHEDULE DIVIDER
========================================= */

.schedule-divider {
    grid-column: 1 / -1;

    width: 100%;
    height: 1px;

    margin-top: 2px;

    background: #c66d73;
    opacity: .7;
}


/* =========================================
   SCHEDULE NOTE
========================================= */

.schedule-note {
    grid-column: 1 / -1;

    color: #294457;

    font-size: 18px;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .contact-location {
        width: 35%;
    }

    .contact-divider {
        margin: 0 30px;
    }

    .contact-schedule {
        column-gap: 25px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .contact-info-section {
        padding: 35px 0;
    }

    .contact-info-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .contact-location {
        width: 100%;
    }

    .contact-divider {
        width: 100%;
        height: 1px;

        margin: 25px 0;
    }

    .contact-schedule {
        display: flex;
        flex-direction: column;

        gap: 20px;
    }

    .schedule-divider {
        width: 100%;
    }

    .schedule-note {
        width: 100%;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .contact-location,
    .schedule-item {
        gap: 12px;
    }

    .contact-content {
        font-size: 18px;
    }

}
/* =========================================
   ELIGIBILITY SECTION
========================================= */

.eligibility-section {
    padding: 40px 0;
    background: linear-gradient(
        90deg,
        #bb7077 0%,
        #8d4e55 100%
    );

    color: #fff;
}
.eligibility-section.dark {
    background: linear-gradient(
        90deg,
        #bb7077 0%,
        #8d4e55 100%
    );
}

/* =========================================
   CONTENT
========================================= */

.eligibility-content {
    text-align: center;

}


/* =========================================
   TITLE
========================================= */

.eligibility-title {
        margin: 0 0 15px;
    color: #fff;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 500;
}


/* =========================================
   DESCRIPTION
========================================= */

.eligibility-description {
    margin: 0 0 15px;

    color: #fff;

    font-size: 18px;
    line-height: 1.5;
}


/* =========================================
   LINK
========================================= */

.eligibility-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #fff;
    text-decoration: none;

    font-size: 18px;
    line-height: 1.4;
}

.eligibility-link span {
    font-size: 18px;
    transition: transform .2s ease;
}

.eligibility-link:hover {
    color: #fff;
}

.eligibility-link:hover span {
    transform: translateX(4px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .eligibility-section {
        /* padding: 20px 0; */
    }

    .eligibility-title {
        font-size: 22px;
    }

    .eligibility-description {
        font-size: 18px;
        line-height: 1.45;
    }

    .eligibility-link {
        font-size: 18px;
    }

}
/* =========================================
   PROCEDURES SECTION
========================================= */

.procedures-section {
    padding: 60px 0;
    background: #fff;
    color: #294457;
}


/* =========================================
   HEADER
========================================= */

.procedures-header {
    text-align: center;

    padding-bottom: 18px;

    border-bottom: 1px solid #ead9d9;
}

.procedures-header .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 112px;
    height: 25px;

    padding: 3px 16px;

    background: #294b5d;
    color: #fff;

    border-radius: 50px;

    font-size: 16px;
    line-height: 1;
}

  .section-title h2, h2 {
    margin: 20px 0 10px; 
    color: #294457; 
    font-size: 48px;
    line-height: 1.2;
    font-weight: 400;
}
 .section-sub-title h3, h3 {
    margin: 0 0 15px 0;
    color: #294457;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
}

/* =========================================
   INCLUDED INFORMATION
========================================= */

.included-info {
    min-height: 135px;
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #ead9d9;
}


/* =========================================
   INCLUDED CONTENT
========================================= */

.included-content {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.included-title {
    color: #bd6a70;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 600;
}

.included-list {
    display: grid;
    grid-template-columns: repeat(3, auto);

    column-gap: 20px;
    row-gap: 10px;
}

.included-list span {
    display: flex;
    align-items: center;

    color: #294457;

    font-size: 18px;
    white-space: nowrap;
}

.included-list i {
    width: 7px;
    height: 7px;

    margin-right: 7px;

    background: #bd6a70;

    border-radius: 50%;
}


/* =========================================
   LINKS
========================================= */

.procedures-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #bd6a70;
    text-decoration: none;

    font-size: 18px;
    font-weight: 500;

    white-space: nowrap;
}

.procedures-link span {
    font-size: 21px;
    line-height: 1;

    transition: transform .2s ease;
}

.procedures-link:hover {
    color: #a4575e;
}

.procedures-link:hover span {
    transform: translateX(4px);
}


/* =========================================
   PROCEDURE CARDS
========================================= */

.procedure-cards {
    margin-top: 40px;
}

.procedure-cards > * {
    margin-bottom: 0;
}

.procedure-card {
    min-height: 267px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 23px;

    border: 1px solid #d8898d;
    border-radius: 18px;

    background: #fff;

    transition:
        box-shadow .2s ease,
        transform .2s ease;
}

.procedure-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(41, 68, 87, .08);
}


/* Active card */

.procedure-card-active {
    /* border-color: #3278e8; */
}


/* =========================================
   PROCEDURE ICON
========================================= */

.procedure-icon {
    height: 65px;

    display: flex;
    align-items: center;

    color: #294b5d;

    font-size: 48px;
}

.procedure-icon i {
    line-height: 1;
}


/* =========================================
   GENDER
========================================= */

.procedure-gender {
    margin-top: 25px;

    color: #294457;

    font-size: 18px;
}
.procedure-gender .section-sub-title {
    margin: 0 0 15px 0;
}

/* =========================================
   PROCEDURE NAME
========================================= */

.procedure-name {
    margin: 2px 0 0; 
    color: #294457; 
    font-size: 34px;
    line-height: 1.2;
    font-weight: 500;
}


/* =========================================
   PRICE
========================================= */

.procedure-price {
    margin-top: 15px;
    color: #bd6a70;
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
}

.procedure-price-label {
    margin-top: 5px;

    color: #294457;

    font-size: 18px;
}


/* =========================================
   PROCEDURE BUTTON
========================================= */

.procedure-button {
    min-height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 13px;

    padding: 5px 9px;

    background: #bd6a70;
    color: #fff;

    border-radius: 5px;

    text-decoration: none;

    font-size: 18px;
}

.procedure-button span {
    font-size: 18px;
    line-height: 1;
}

.procedure-button:hover {
    background: #a9575f;
    color: #fff;
}


/* =========================================
   ADDITIONAL PROCEDURES
========================================= */

.additional-procedures {
    min-height: 103px;

    display: flex;
    /* align-items: center; */

    margin-top: 17px;

    padding: 15px 22px;

    border: 1px solid #d8898d;
    border-radius: 12px;
}


/* =========================================
   ADDITIONAL ICON
========================================= */

.additional-icon {
    width: 60px;
    height: 60px;
    min-width: 48px;

    display: flex;
    /* align-items: center; */
    justify-content: center;

    margin-right: 13px;

    background: #f5f1ec;

    border-radius: 50%;

    color: #bd6a70;

    font-size: 23px;
}
.additional-icon img {
    width: 40px;
}

/* =========================================
   ADDITIONAL CONTENT
========================================= */

.additional-content {
    display: flex;
    flex-direction: column;
}

.additional-title {
    color: #bd6a70;

    font-size: 18px;
    line-height: 1.2;
}

.additional-list {
    display: flex;
    flex-direction: column;

    margin-top: 3px;
}

.additional-list span {
    display: flex;
    align-items: center;

    color: #4c5053;

    font-size: 18px;
    line-height: 1.5;
}

.additional-list i {
    width: 7px;
    height: 7px;

    margin-right: 7px;

    background: #bd6a70;

    border-radius: 50%;
}

.additional-procedures > .procedures-link {
    margin-left: auto;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

      .section-title h2, h2 {
        font-size: 34px;
    }
    .section-sub-title h3, h3 
    {
      font-size: 24px;
    }
    .included-list {
        column-gap: 12px;
    }

    .included-list span {
        font-size: 18px;
    }

    .procedure-card {
        padding: 18px;
    }

    .procedure-name {
        font-size: 28px;
    }

    .procedure-price {
        margin-top: 14px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .procedures-section {
        padding: 50px 0;
    }


    .procedures-header {
        padding-bottom: 20px;
    }


     .section-title h2, h2 {
        font-size: 48px;
    }
.section-sub-title h3, h3
{
  font-size: 38px;
}

    /* Included */

    .included-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 15px;

        padding: 18px 0;
    }

    .included-list {
        grid-template-columns: 1fr 1fr;
        column-gap: 15px;
    }

    .included-list span {
        white-space: normal;
    }


    /* Link */

    .included-info > .procedures-link {
        align-self: flex-start;
    }


    /* Cards */

    .procedure-cards {
        margin-top: 20px;
        row-gap: 20px;
    }

    .procedure-cards > * {
        margin-bottom: 15px;
    }

    .procedure-card {
        min-height: 250px;

        padding: 22px;
    }


    /* Additional */

    .additional-procedures {
        flex-wrap: wrap;

        gap: 12px;

        padding: 18px;
    }

    .additional-procedures > .procedures-link {
        width: 100%;

        margin-left: 0;

        padding-top: 8px;

        border-top: 1px solid #ead9d9;
    }

}
@media (max-width: 768px) {
     .procedure-cards {
        row-gap: 20px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

     .section-title h2, h2 {
        font-size: 30px;
    }
.section-sub-title h3, h3
{
  font-size: 22px;
}
    .included-list {
        grid-template-columns: 1fr;
    }

    .procedure-card {
        padding: 20px;
    }

    .additional-procedures {
        padding: 15px;
    }

}
/* =========================================
   WHY CLIENTS SECTION
========================================= */

 

.why-clients-wrapper {
    /* max-width: 980px; */
    margin: 0 auto;
    padding: 60px 40px;
    background: #f5f1ec;
    border-radius: 24px;
    text-align: center;
}


/* =========================================
   SECTION LABEL  (badge → 16px)
========================================= */

.why-clients-wrapper .section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 18px;

    background: #294b5d;
    color: #fff;

    border-radius: 50px;

    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}


/* =========================================
   SECTION TITLE  (h2 → 38px)
========================================= */

.why-clients-wrapper .section-title {
    margin: 20px 0 18px;

    color: #294457;

    font-family: "Inria Serif", Georgia, "Times New Roman", serif;

    font-size: 38px;
    line-height: 1.2;
    font-weight: 400;

    letter-spacing: -0.5px;
}


/* =========================================
   SECTION DESCRIPTION
   – inherits base body font-size (18px)
========================================= */

.why-clients-wrapper .section-description {
    max-width: 680px;
    margin: 0 auto 40px;

    color: #294457;

    line-height: 1.5;
}


/* =========================================
   FEATURE CARDS GRID
========================================= */

.feature-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;

    text-align: left;
}


/* =========================================
   FEATURE CARD
========================================= */

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 20px 22px;

    background: transparent;

    border: 1px solid #294457;
    border-radius: 10px;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.feature-card:hover {
    background: #ffffff;
    transform: translateY(-2px);
}


/* =========================================
   FEATURE ICON  (circle)
========================================= */

.feature-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #294b5d;
    color: #fff;

    border-radius: 50%;

    font-size: 22px;
}

.feature-icon i {
    line-height: 1;
}


/* =========================================
   FEATURE TEXT
========================================= */

.feature-text {
    display: flex;
    flex-direction: column;
}


/* =========================================
   FEATURE TITLE  (h3 → 24px)
========================================= */

.feature-title {
    margin: 0 0 4px;

    color: #294457;

    font-family: "Inria Serif", Georgia, "Times New Roman", serif;

    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}


/* =========================================
   FEATURE DESCRIPTION
   – inherits base body font-size (18px)
========================================= */

.feature-desc {
    margin: 0;

    color: #294457;

    line-height: 1.45;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .why-clients-wrapper {
        padding: 50px 30px;
    }

    .why-clients-wrapper .section-title {
        font-size: 34px;
    }

    .feature-cards {
        gap: 16px;
    }

    .feature-title {
        font-size: 22px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .why-clients-section {
        padding: 40px 0;
    }

    .why-clients-wrapper {
        padding: 40px 22px;
        border-radius: 18px;
    }

    .why-clients-wrapper .section-title {
        margin: 16px 0 16px;

        font-size: 32px;
        line-height: 1.2;
    }

    .why-clients-wrapper .section-description {
        margin-bottom: 30px;
    }

    /* Stack cards */
    .feature-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .feature-card {
        padding: 18px;
    }

    .feature-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;

        font-size: 20px;
    }

    .feature-title {
        font-size: 20px;
    }
    .feature-icon img {
        width: 20px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .why-clients-wrapper {
        padding: 30px 18px;
    }

    .why-clients-wrapper .section-title {
        font-size: 28px;
    }

    .feature-card {
        padding: 16px;
        gap: 12px;
    }

    .feature-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;

        font-size: 18px;
    }

    .feature-title {
        font-size: 18px;
    }

}
/* =========================================
   DOCTOR SECTION
========================================= */

.doctor-section {
    background: #fff;
}

.doctor-header {
    text-align: center;
    margin-bottom: 16px;
}


/* =========================================
   PROFILE
========================================= */

.doctor-profile {
    position: relative;

    display: flex;
    align-items: stretch;

    /* max-width: 900px; */
    min-height: 310px;

    margin: 0 auto;

    overflow: visible;

    border-radius: 18px;
}


/* =========================================
   IMAGE
========================================= */

.doctor-image {
    width: 43%;

    overflow: hidden;

    border-radius: 18px 0 0 18px;
}

.doctor-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


/* =========================================
   CONTENT
========================================= */

.doctor-content {
    width: 57%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 38px 75px 38px 80px;

    background: linear-gradient(
        135deg,
        #b96e76 0%,
        #683d42 100%
    );

    border-radius: 0 18px 18px 0;
}

.doctor-content .section-title {
    color: #fff;
    margin-bottom: 10px;
}

.doctor-content .description {
    color: #fff;
    font-size: 18px;
    line-height: 1.38;
}


/* =========================================
   EXPERIENCE BADGE
========================================= */

.doctor-experience {
    position: absolute;
    left: 43%;
    top: 66%;
    width: 123px;
    height: 123px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #b96e76;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    z-index: 2;
}

.experience-number {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;
    line-height: 1;
}

.experience-number sup {
    font-size: 16px;
}

.experience-text {
    margin-top: 4px;

    font-size: 16px;
    line-height: 1.05;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .doctor-content {
        padding: 30px 50px 30px 75px;
    }

    .doctor-content .section-title {
        font-size: 42px;
    }

    .doctor-content .description {
        font-size: 18px;
        font-weight: 400;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .doctor-header {
        margin-bottom: 18px;
    }

    .doctor-profile {
        flex-direction: column;

        min-height: auto;

        border-radius: 18px;
    }

    .doctor-image {
        width: 100%;
        height: 280px;

        border-radius: 18px 18px 0 0;
    }

    .doctor-content {
        width: 100%;

        padding: 55px 25px 30px;

        border-radius: 0 0 18px 18px;
    }

    .doctor-content .section-title {
        margin-bottom: 12px;

        text-align: center;
    }

    .doctor-content .description {
        font-size: 16px;
        line-height: 1.5;

        text-align: left;
    }

    .doctor-experience {
        left: 50%;
        top: 280px;

        width: 110px;
        height: 110px;
    }

    .experience-number {
        font-size: 29px;
    }

    .experience-text {
        font-size: 16px;
    }

}
/* =========================================
   PROCESS SECTION
========================================= */

.process-section {
    background: #fff;
}

.process-header {
    margin-bottom: 40px;
}

.process-header .description {
    margin: 4px auto 0;
}


/* =========================================
   PROCESS GRID
========================================= */

.process-grid {
    row-gap: 16px;
}


/* =========================================
   PROCESS CARD
========================================= */

.process-card {
    min-height: 379px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 25px 25px 22px;

    border: 1px solid #718796;
    border-radius: 18px;

    text-align: center;
}
/* 
.process-card-active {
    border-color: #3278e8;
} */


/* =========================================
   TOP
========================================= */

.process-top {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.process-number {
    color: #294457;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 28px;
    line-height: 1;
}

.process-arrow {
    color: #294457;

    font-size: 34px;
    line-height: 1;
}


/* =========================================
   ICON
========================================= */

.process-icon {
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 12px 0 30px;

    color: #bd6a70;

    font-size: 55px;
}

.process-icon i {
    line-height: 1;
}


/* =========================================
   CARD HEADING
========================================= */

.process-card .section-sub-title {
    margin-top: 0;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.process-card .description {
    margin-top: 5px;

    font-size: 18px;
    line-height: 1.35;

    text-align: center;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .process-card {
        min-height: 330px;
        padding: 22px 18px;
    }

    .process-card .section-sub-title {
        font-size: 24px;
    }

    .process-card .description {
        font-size: 18px;
        margin-top: 0;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .process-header {
        margin-bottom: 25px;
    }

    .process-card {
        min-height: auto;

        padding: 22px 20px 25px;
    }

    .process-icon {
        height: 75px;
        margin: 0 0 15px 0;
    }

    .process-card .description {
        max-width: 320px;
        margin-top: 0px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .process-card {
        padding: 20px 16px;
    }

    .process-number {
        font-size: 25px;
    }

    .process-arrow {
        font-size: 30px;
    }

}
/* =========================================
   TEAM BANNER
========================================= */

.team-banner {
    min-height: 600px;

    display: flex;
    align-items: flex-end;

    padding: 60px 0 45px;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 35%,
            rgba(0, 0, 0, 0.88) 100%
        ),
        url("../img/ace-of-spays-team.webp");

    background-size: cover;
    background-repeat: no-repeat;
}

.team-banner-content {
    text-align: center;
}

.text-white {
    color: #fff;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .team-banner {
        min-height: 360px;

        padding: 45px 0 35px;

        background-position: center;
    }

    .team-banner .section-title {
        font-size: 38px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .team-banner {
        min-height: 320px;
    }

    .team-banner .section-title {
        font-size: 32px;
    }

}
/* =========================================
   TESTIMONIAL SECTION
========================================= */

.testimonials-section {
    background: #f7f5f1;
}

.testimonials-header {
    margin-bottom: 25px;
}

.testimonials-header .description {
    margin-top: 8px;
}


/* =========================================
   SLIDER
========================================= */

.testimonial-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    margin: 0 -8px;

    transition: transform 0.45s ease;
}

.testimonial-slide {
    flex: 0 0 33.333333%;
    padding: 0 8px;
}


/* =========================================
   TESTIMONIAL CARD
========================================= */

.testimonial-card {
    min-height: 252px;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 18px 25px 22px;

    border: 1px solid #d8898d;
    border-radius: 17px;

    text-align: center;
}

.testimonial-avatar {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;

    background: #bd6a70;
    color: #fff;

    border-radius: 50%;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.testimonial-card .section-sub-title {
    margin: 0;
}

.testimonial-stars {
    margin-top: 3px;

    color: #294457;

    font-size: 20px;
    line-height: 1;
    letter-spacing: -2px;
}

.testimonial-card .description {
    max-width: 280px;
    margin-bottom: 0;
    margin-top: 12px;

    font-size: 18px;
    line-height: 1.3;
}


/* =========================================
   PREVIOUS / NEXT ARROWS
========================================= */

.testimonial-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #fff;
    color: #294457;

    border: 1px solid #bd6a70;
    border-radius: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}

.testimonial-arrow:hover {
    background: #bd6a70;
    color: #fff;
}

.testimonial-arrow i {
    font-size: 13px;
}

.testimonial-prev {
    left: 4px;
}

.testimonial-next {
    right: 4px;
}


/* Disabled */

.testimonial-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.testimonial-arrow:disabled:hover {
    background: #fff;
    color: #294457;
}


/* =========================================
   DOTS
========================================= */

.testimonial-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 16px;
}

.testimonial-dot {
    width: 13px;
    height: 13px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #bd6a70;

    opacity: 0.35;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.testimonial-dot.active {
    opacity: 1;
    transform: scale(1.05);
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .testimonial-slide {
        flex: 0 0 50%;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .testimonials-header {
        margin-bottom: 22px;
    }

    .testimonial-slide {
        flex: 0 0 100%;
    }

    .testimonial-card {
        min-height: 230px;

        padding: 20px;
    }

    .testimonial-card .description {
        font-size: 16px;
        line-height: 1.4;
    }

    .testimonial-prev {
        left: 6px;
    }

    .testimonial-next {
        right: 6px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .testimonial-card {
        padding: 18px;
    }

    .testimonial-arrow {
        width: 34px;
        height: 34px;
    }

}
/* =========================================
   RESOURCES SECTION
========================================= */

.resources-section {
    background: #fff;
}

.resources-header {
    margin-bottom: 40px;
}

.resources-grid {
    row-gap: 16px;
}


/* =========================================
   RESOURCE CARD
========================================= */

.resource-card {
    min-height: 174px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 25px;

    border: 1px solid #d8898d;
    border-radius: 17px;

    background: #fff;

    color: #294457;
    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.resource-card:hover {
    color: #294457;

    transform: translateY(-2px);

    box-shadow:
        0 6px 16px rgba(41, 68, 87, .08);
}


/* =========================================
   ICON
========================================= */

.resource-icon {
    height: 65px;
margin-bottom: 20px;
    display: flex;
    align-items: center;

    color: #bd6a70;

    font-size: 48px;
}

.resource-icon i {
    line-height: 1;
}


/* =========================================
   TITLE
========================================= */

.resource-card .section-sub-title {
    margin-top: 8px;
}


/* =========================================
   DESCRIPTION
========================================= */

.resource-card .description {
    margin-top: 0px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.35;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .resource-card {
        min-height: 224px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .resources-header {
        margin-bottom: 25px;
    }

    .resources-header .section-title {
        /* font-size: 38px; */
    }

    .resource-card {
        min-height: 160px;
        align-items: center;
    }
    .resource-card .description {
        text-align: center;
    }

}
/* =========================================
   LOCATION SECTION
========================================= */

.location-section {
    background: #fff;
}

.location-header {
    margin-bottom: 35px;
}

.location-grid {
    /* max-width: 760px; */
    margin: 0 auto;

    row-gap: 15px;
}


/* =========================================
   LOCATION CARD
========================================= */

.location-card {
    /* min-height: 188px; */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px 20px;

    background: #f7f5f1;

    border-radius: 18px;
    min-height: 225px;
    text-align: center;
}

.location-card-highlight {
    background: linear-gradient(
        135deg,
        #bd7077 0%,
        #754449 100%
    );

    color: #fff;
}


/* =========================================
   ICON
========================================= */

.location-icon {
    height: 58px;
    width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    color: #bd6a70;

    font-size: 45px;
}

.location-card-highlight .location-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 15px;

    background: #fff;
    color: #bd6a70;

    border-radius: 50%;

    font-size: 20px;
}
@media (max-width: 767px) {
    .location-icon {
         margin-bottom: 15px;

    }
}

/* =========================================
   CONTENT
========================================= */

.location-card .section-sub-title {
    margin: 0;
        font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}

.location-card .description {
    margin-top: 6px;

    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 0;
    text-align: center;
}

.location-card-highlight .section-sub-title,
.location-card-highlight .description {
    color: #fff;
    margin-bottom: 0;
}
.location-card-highlight .section-sub-title, .location-card .section-sub-title {
    font-size: 22px;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .location-header {
        margin-bottom: 25px;
    }

    .location-header .section-title {
        /* font-size: 38px; */
    }

    .location-grid {
        max-width: 400px;
    }

    .location-card {
        min-height: 175px;

    }

}
@media (max-width: 768px) {

    .location-card {
        min-height: 260px;
        justify-content: flex-start;
    }

}
/* =========================================
   COMMUNITY SECTION
========================================= */

.community-section {
    background: #fff;
}

.community-header {
    margin-bottom: 20px;
}


/* Pink label variation */

.section-label-pink {
    background: #bd6a70;
}


/* Regional heading */

.community-regions {
        margin-top: 8px;
    color: #bd6a70;
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 26px;
}


/* Description */

.community-header .description {
    margin-top: 8px;
}


/* =========================================
   LOCATION NAVIGATION
========================================= */

.community-locations {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin: 30px auto 20px;
}

.community-location {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding: 7px 20px;

    background: #f7f5f1;

    border-radius: 20px;

    color: #294457;

    font-size: 18px;
    white-space: nowrap;
}

.community-location i {
    color: #bd6a70;
    font-size: 16px;
}


/* =========================================
   ARROWS
========================================= */

.community-arrow {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #fff;

    border: 1px solid #bd6a70;
    border-radius: 50%;

    color: #bd6a70;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.community-arrow:hover {
    background: #bd6a70;
    color: #fff;
}

.community-arrow i {
    font-size: 14px;
}


/* =========================================
   MAP
========================================= */

.community-map {
    max-width: 500px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 8px;
}

.community-map img {
    width: 100%;
    height: auto;

    display: block;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .community-map {
        max-width: 550px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .community-header .section-title {
        font-size: 38px;
    }

    .community-regions {
        font-size: 22px;
        line-height: 1.3;
    }

    .community-locations {
        flex-wrap: wrap;

        gap: 6px;

        margin-bottom: 18px;
    }

    .community-location {
        /* font-size: 12px; */
        padding: 6px 8px;
    }

    .community-arrow {
        width: 32px;
        height: 32px;
    }

    .community-map {
        width: 100%;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .community-header .section-title {
        font-size: 32px;
    }

    .community-regions {
        font-size: 20px;
    }

}
/* =========================================
   CTA SECTION
========================================= */

.cta-section {
    background: #294b5d;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    max-width: 1000px;
    margin: 0 auto;
}

.cta-text .section-title {
    margin: 0;
}

.cta-text .description {
    margin-top: 8px;
    font-size: 20px;
}


/* =========================================
   CTA BUTTON
========================================= */

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 9px 13px;

    background: #bd6a70;
    color: #fff;

    border-radius: 5px;

    text-decoration: none;
 
    white-space: nowrap;

    transition: background-color .2s ease;
}

.cta-button:hover {
    background: #a9575f;
    color: #fff;
}

.cta-button span {
    font-size: 17px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .cta-content {
        flex-direction: column;
        align-items: center;

        gap: 0px;
    }
    .cta-text {
        text-align: center;
    }

    .cta-text .section-title {
        font-size: 38px;
    }

    .cta-text .description br {
        display: none;
    }

    .cta-button {
        /* width: 100%; */
    }

}
/* =========================================
   FOOTER
========================================= */

.site-footer {
    background: #2d3638;
    color: #fff;
}

.footer-main {
    padding: 38px 0 45px;
    justify-content: space-between;
}


/* =========================================
   LOGO
========================================= */

.footer-logo {
    display: inline-block;
}

.footer-logo img {
    width: 108px;
    height: auto;
    display: block;
}


/* =========================================
   CONTACT
========================================= */

.footer-contact {
    margin-top: 22px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 15px;

    color: #d5d5d5; 
    line-height: 1.5;
}

.footer-contact-item i {
    width: 20px;
    min-width: 20px;

    margin-top: 2px;

    color: #bd6a70;

    font-size: 18px;
    text-align: center;
}

.footer-contact-item a {
    color: #d5d5d5;
    text-decoration: none;
}


/* =========================================
   FOOTER COLUMNS
========================================= */

.footer-column {
    padding-top: 2px;
}

.footer-heading {
    margin: 0 0 12px;

    color: #bd6a70;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
}

.footer-links {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.footer-links a {
    color: #d5d5d5;
    text-decoration: none;
 
    line-height: 1.35;

    transition: color .2s ease;
}

.footer-links a:hover,
.footer-contact-item a:hover {
    color: #fff;
}


/* =========================================
   SOCIAL
========================================= */

.footer-social-title {
    margin-top: 28px;
}

.footer-social {
    display: flex;
    align-items: center;

    gap: 7px;
}

.footer-social a {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #bd6a70;
    color: #fff;

    border-radius: 50%;

    text-decoration: none;

    font-size: 17px;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.footer-social a:hover {
    background: #a9575f;

    transform: translateY(-2px);
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding: 10px 0;
}

.footer-bottom-content {
    min-height: 36px;

    display: flex;
    align-items: center; 
gap: 15px;
    color: #d5d5d5;
    justify-content: space-between;
    font-size: 16px;
}

.footer-bottom-content a {
    color: #d5d5d5;
    text-decoration: none;
}

.footer-bottom-content a:hover {
    color: #fff;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .footer-main {
        padding: 35px 0;
    }

    .footer-column {
        margin-top: 30px;
    }

    .footer-brand {
        text-align: left;
    }

    .footer-bottom-content {
        min-height: 50px;

        flex-direction: column;
        justify-content: center;

        gap: 5px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .footer-main {
        padding: 30px 0;
    }

    .footer-logo img {
        width: 100px;
    }

}
.section-sub-heading
{
  margin: 0 0 10px 0;
    color: #294457;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 112px;
    height: 25px;

    padding: 3px 16px;

    background: #294b5d;
    color: #fff;

    border-radius: 50px;

    font-size: 16px;
    line-height: 1;
}
.cat-neuter-section {
    background: #fff;
}

.cat-neuter-content {
    padding-right: 35px;
}

.cat-neuter-content .section-title {
    margin: 0;
}

.cat-neuter-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 12px;
}

.cat-neuter-price span {
    color: #294457;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    line-height: 1;
}

.cat-neuter-price small {
    color: #294457;
    font-size: 18px;
}

.cat-neuter-content .cta-button {
    margin-top: 2px;
}

.cat-neuter-content > .description {
    margin-top: 20px;
    margin-bottom: 40px;
}

.cat-neuter-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.cat-neuter-stat {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #294457;

    font-size: 18px;
    line-height: 1.2;
}

.cat-neuter-stat + .cat-neuter-stat {
    border-left: 1px solid #d9d9d9;
    padding-left: 12px;
}

.cat-neuter-stat i {
    color: #bd6a70;
    font-size: 22px;
}

.cat-neuter-stat strong {
    display: block;
    font-size: 18px;
}

.cat-neuter-image {
    overflow: hidden;
    border-radius: 16px;
}

.cat-neuter-image img {
    width: 100%;
    aspect-ratio: 1.75 / 1;
    display: block;
    object-fit: cover;
}

@media (max-width: 991px) {

    .cat-neuter-content {
        padding-right: 0;
        margin-bottom: 30px;
    }

}

@media (max-width: 767px) {

    .cat-neuter-price span {
        font-size: 48px;
    }

    .cat-neuter-stats {
        flex-wrap: wrap;
        gap: 30px;
    }

    .cat-neuter-stat {
        font-size: 18px;
    }

    .cat-neuter-stat i {
        font-size: 20px;
    }

    .cat-neuter-image img {
        aspect-ratio: 1.5 / 1;
    }

}
.pricing-eligibility-section {
    background: #294b5d;
    color: #fff;
}

.pricing-eligibility-section .section-sub-title,
.pricing-eligibility-section .description {
    color: #fff;
}

.pricing-included {
    padding-right: 40px;
    border-right: 1px solid rgba(189, 106, 112, .7);
}

.pricing-included-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 5px 35px;

    margin-top: 8px;

    color: #fff;
    font-size: 18px;
    line-height: 1.4;
}

.pricing-link {
    display: inline-block;

    margin-top: 20px;

    color: #fff;
    text-decoration: none;

    font-size: 18px;
}

.pricing-link:hover {
    color: #fff;
}

.eligibility-content {
    padding-left: 40px;
    color: #000;
}

.eligibility-content .description {
    margin-top: 5px;
}

.eligibility-content .cta-button {
    margin-top: 8px;
    display: inline-flex;
}

@media (max-width: 767px) {

    .pricing-included {
        padding-right: 0;
        padding-bottom: 25px;
        border-right: 0;
        border-bottom: 1px solid rgba(189, 106, 112, .7);
    }

    .eligibility-content {
        padding-left: 0;
        /* padding-top: 25px; */
        margin-top: 25px;
    }

    .pricing-included-list {
        grid-template-columns: 1fr;
        gap: 5px;
    }

}
.why-neuter {
    display: flex;

    overflow: hidden;

    border-radius: 16px;

    background: #bd6a70;
}

.why-neuter-image {
    width: 43%;
}

.why-neuter-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.why-neuter-content {
    width: 57%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 35px 40px;

    background: linear-gradient(
        135deg,
        #bd7077 0%,
        #683d42 100%
    );
}

.why-neuter-content .section-title {
    margin: 0 0 10px;
}

.why-neuter-content .description {
    max-width: 480px;
}

@media (max-width: 767px) {

    .why-neuter {
        flex-direction: column;
    }

    .why-neuter-image,
    .why-neuter-content {
        width: 100%;
    }

    .why-neuter-image {
        height: 280px;
    }

    .why-neuter-content {
        padding: 30px 25px;
    }

}
.why-choose-section {
    min-height: 360px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .95) 0%,
            rgba(0, 0, 0, .82) 35%,
            rgba(0, 0, 0, .15) 70%,
            rgba(0, 0, 0, 0) 100%
        ),
        url("../img/why-choose-ace-of-spays.webp") center / cover no-repeat;
}

.why-choose-content {
    max-width: 390px;
}

.why-choose-content .section-title {
    margin: 0 0 20px;
}

.why-choose-content .section-sub-title {
    margin: 0 0 6px;
}

.why-choose-content .description {
    margin-bottom: 30px;
}

@media (max-width: 767px) {

    .why-choose-section {
        min-height: 520px;

        align-items: flex-end;

        background-position: 65% center;
    }

    .why-choose-content {
        max-width: 100%;
        padding-bottom: 10px;
    }

}
.faq-section {
    background: #dfe8eb;
}

.faq-header {
    margin-bottom: 30px;
}

.faq-list {
    max-width: 850px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 10px;

    background: #fff;

    border: 1px solid #718796;
    border-radius: 8px;

    overflow: hidden;
}

.faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 16px;

    background: transparent;
    color: #294457;

    border: 0;

    text-align: left;

    font-size: 18px;
    line-height: 1.4;

    cursor: pointer;
}

.faq-question i {
    width: 18px;
    height: 18px;
    min-width: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #294457;
    border-radius: 50%;

    font-size: 9px;

    transition: transform .25s ease;
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows .3s ease;
}

.faq-answer > .description {
    overflow: hidden;

    margin: 0;
    padding: 0 16px;

    font-size: 18px;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.active .faq-answer > .description {
    padding-bottom: 16px;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

@media (max-width: 767px) {

    .faq-question {
        padding: 13px 14px;
    }

    .faq-question span {
        line-height: 1.35;
    }

    .faq-answer > .description {
        padding-left: 14px;
        padding-right: 14px;
    }

}
.resource-carousel-section {
    background: #fff;
}

.resource-carousel-header {
    margin-bottom: 30px;
}

.resource-carousel-header .description {
    margin-top: 2px;
}


/* Carousel */

.resource-carousel {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
    padding: 0 28px;
    overflow: hidden;
}

.resource-carousel-track {
    display: flex;
    margin: 0 -7px;
    transition: transform .4s ease;
}

.resource-carousel-slide {
    flex: 0 0 33.333333%;
    padding: 0 7px;
}


/* Card */

.resource-carousel-card {
    min-height: 130px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 10px;

    border: 1px solid #d8898d;
    border-radius: 15px;

    color: #294457;
    text-decoration: none;

    text-align: center;
    gap: 15px;
}

.resource-carousel-card:hover {
    color: #294457;
}

.resource-carousel-icon {
    /* height: 45px; */

    display: flex;
    align-items: center;
    justify-content: center;

    color: #bd6a70;

    font-size: 34px;
}

.resource-carousel-card .section-sub-title {
    margin: 4px 0 0;
    line-height: 1;
}


/* Arrows */

.resource-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #fff;
    color: #294457;

    border: 1px solid #e0e0e0;
    border-radius: 50%;

    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);

    transform: translateY(-50%);

    cursor: pointer;
}

.resource-carousel-arrow:hover {
    background: #bd6a70;
    color: #fff;
    border-color: #bd6a70;
}

.resource-carousel-arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.resource-carousel-prev {
    left: 0;
}

.resource-carousel-next {
    right: 0;
}

.resource-carousel-arrow i {
    font-size: 12px;
}


/* Bottom Link */

.resource-carousel-link {
    margin-top: 30px;
}

.resource-carousel-link a {
    color: #bd6a70;
    text-decoration: none;
}


/* Tablet */

@media (min-width: 768px) and (max-width: 991px) {

    .resource-carousel-slide {
        flex: 0 0 50%;
    }

}


/* Mobile */

@media (max-width: 767px) {

    .resource-carousel-header {
        margin-bottom: 20px;
    }

    .resource-carousel {
        padding: 0 30px;
    }

    .resource-carousel-slide {
        flex: 0 0 100%;
    }

    .resource-carousel-card {
        min-height: 120px;
    }

}
.services-hero {
    min-height: 520px;

    position: relative;

    display: flex;
    align-items: center;

    padding: 60px 0 95px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .58) 40%,
            rgba(0, 0, 0, .05) 75%
        ),
        url("images/services-cat-hero.jpg") center / cover no-repeat;
}

.services-hero-content {
    max-width: 390px;
}

.services-hero-label {
    display: block;

    margin-bottom: 10px;

    color: #fff;

    font-size: 18px;
    line-height: 1.3;
}

.services-hero-content .section-title {
    margin: 0 0 14px;
}

.services-hero-stats {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 72px;

    background: rgba(0, 0, 0, .72);
}

.services-hero-stat {
    min-width: 170px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 25px;

    color: #fff;
}

.services-hero-stat + .services-hero-stat {
    border-left: 1px solid rgba(255, 255, 255, .5);
}

.services-hero-stat i {
    color: #fff;
    font-size: 25px;
}

.services-hero-stat strong {
    font-size: 16px;
    font-weight: 600;
}

.services-hero-stat span {
    font-size: 18px;
}

@media (max-width: 767px) {

    .services-hero {
        min-height: 600px;

        align-items: flex-start;

        padding-top: 45px;

        background-position: 65% center;
    }

    .services-hero-content {
        max-width: 100%;
    }

    .services-hero-stats {
        flex-wrap: wrap;

        min-height: auto;

        padding: 12px 0;
    }

    .services-hero-stat {
        width: 100%;
        /* justify-content: center; */

        padding: 8px 15px;
    }

    .services-hero-stat + .services-hero-stat {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .25);
    }

}
.cat-services-section {
    background: #fff;
}

.cat-services-header {
    margin-bottom: 25px;
}

.cat-services-header .description {
    margin-top: 3px;
}

.cat-services-grid {
    max-width: 620px;
    margin: 0 auto;
    row-gap: 18px;
}

.cat-service-card {
    position: relative;

    min-height: 270px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: hidden;

    border-radius: 16px;

    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, .85) 100%
        ),
        var(--service-image);

    background-position: center;
    background-size: cover;

    color: #fff;
    text-decoration: none;
}

.cat-service-card:hover {
    color: #fff;
}

.cat-service-content {
    position: relative;
    z-index: 1;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 55px 20px 18px;

    text-align: center;
}

.cat-service-gender {
    font-size: 18px;
    line-height: 1.2;
}

.cat-service-card .section-sub-title {
    margin: 2px 0 8px;
    color: #fff;
}

.cat-service-price {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}

.cat-service-label {
    margin-top: 2px;

    font-size: 18px;
    line-height: 1.3;
}

.cat-service-card .cta-button {
    margin-top: 8px;
}

.cat-services-link {
    margin-top: 30px;
}

.cat-services-link a {
    color: #bd6a70;
    text-decoration: none;
    font-size: 18px;
}

@media (max-width: 767px) {

    .cat-services-grid {
        max-width: 420px;
    }

    .cat-service-card {
        min-height: 300px;
    }

}
.eligibility-section {
    background: #dfe8eb;
}

.eligibility-content .description {
    margin-top: 4px;
}

.eligibility-content .cta-button {
    margin-top: 8px;
}
.local-care-section {
    background: #f7f5f1;
}

.local-care-content {
    max-width: 800px;
    margin: 0 auto;
}

.local-care-content .description {
    margin-top: 4px;
}
.local-testimonial-section {
    background: linear-gradient(
        135deg,
        #bd7077 0%,
        #683d42 100%
    );

    color: #fff;
}

.local-testimonial {
    position: relative;

    max-width: 650px;
    margin: 0 auto;
}

.local-testimonial-quote {
    position: absolute;
    top: -10px;
    left: 0;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 64px;
    line-height: 1;
}

.local-testimonial .description {
    margin: 0;

    color: #fff;
}

.local-testimonial-author {
    display: block;

    margin-top: 6px;

    color: #fff;
    font-size: 18px;
}

@media (max-width: 767px) {

    .local-testimonial {
        padding: 0 20px;
    }

    .local-testimonial-quote {
        left: -5px;
    }

}
.directions-section {
    background: #fff;
}

.directions-card {
    max-width: 950px;
    margin: 0 auto;

    padding: 25px 35px 30px;

    background: #f7f5f1;

    border-radius: 16px;
}

.directions-card > .section-title {
    margin: 0 0 18px;
}

.directions-content {
    padding-right: 25px;
}

.directions-step {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 20px;

    color: #294457;
}
.directions-step img {
    width: 35px;
}
.directions-step i {
    width: 22px;
    min-width: 22px;

    margin-top: 3px;

    color: #bd6a70;

    font-size: 18px;
    text-align: center;
}

.directions-step span {
    font-size: 18px;
    line-height: 1.35;
}

.directions-content .cta-button {
    margin-left: 32px;
    margin-top: 2px;
}

.directions-map {
    overflow: hidden;

    border: 1px solid #4a90e2;
}

.directions-map img {
    width: 100%;
    height: auto;

    display: block;
}

@media (max-width: 991px) {

    .directions-content {
        padding-right: 0;
        margin-bottom: 25px;
    }

}

@media (max-width: 767px) {

    .directions-card {
        padding: 25px 20px;
    }

    .directions-card > .section-title {
        margin-bottom: 25px;
    }

    .directions-content .cta-button {
        margin-left: 0;
    }

}
.communities-section {
    background: #fff;
}

.communities-content {
    max-width: 750px;
    margin: 0 auto;
}

.communities-content .description {
    margin-top: 5px;
}

.communities-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 8px;

    margin-top: 20px;
    padding: 18px 20px;

    border-top: 1px solid #8da0aa;
    border-bottom: 1px solid #8da0aa;
}

.communities-list a {
    padding: 4px 12px;

    border: 1px solid #8da0aa;
    border-radius: 20px;

    color: #294457;
    text-decoration: none;

    font-size: 18px;
    line-height: 1.2;
}

.communities-list a:hover {
    background: #294457;
    border-color: #294457;
    color: #fff;
}

@media (max-width: 767px) {

    .communities-content .section-title {
        font-size: 38px;
    }

    .communities-list {
        padding: 15px 10px;
    }

}


/* shubham */

.cherry-hill-bg-img{
    position: relative;
    min-height: 465px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.05) 100%), url(../img/cherry-hill-location-hero.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    align-items: center;
    justify-content: center;
    display: flex;

}

.services-hub-bg-img{
     position: relative;
    min-height: 465px;
    padding-top: 40px;
    padding-bottom: 40px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.05) 100%), url(../img/service_hub-hero.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}


@media (max-width: 480px) {
.services-hub-bg-img{
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.05) 100%), url(../img/service-detail-page-hero-responsive.webp);
         background-position: center;
         min-height: 275px;
}

.why-choose-section{
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.05) 100%), url(../img/service-detail-page-hero-responsive.webp);
         background-position: center;
}

.cherry-hill-bg-img{
       background: linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.05) 100%), url(../img/cherry-hill-location-hero-res.webp);
         background-position: center;
}

}

@media (max-width: 768px) {
    .services-hub-bg-img, .cherry-hill-bg-img{
       
         min-height: 275px;
}

}