/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #071d55;
    background: #fff;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
}

.container {
    width: min(1200px, 92%);
    margin: auto;
}


/* =========================================================
   COLORS
========================================================= */

:root {
    --navy: #06245e;
    --navy-dark: #03183f;
    --blue: #073a82;
    --teal: #008b95;
    --teal-light: #16bdc2;
    --white: #ffffff;
    --light: #f4fbfd;
    --text: #172033;
}


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

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(6,36,94,.08);
    transition: .3s ease;
}

.header.scrolled {
    box-shadow: 0 5px 25px rgba(0,30,70,.10);
}

.header-inner {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


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

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.logo-mark {
    width: 52px;
    height: 52px;
    position: relative;
}

.logo-heart-left,
.logo-heart-right {
    position: absolute;
    width: 29px;
    height: 39px;
    top: 7px;
    border-radius: 50% 50% 45% 45%;
}

.logo-heart-left {
    left: 5px;
    background: var(--navy);
    transform: rotate(-45deg);
}

.logo-heart-right {
    right: 5px;
    background: var(--teal);
    transform: rotate(45deg);
}

.logo-cross {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -42%);
    background: #fff;
    width: 20px;
    height: 20px;
    color: var(--teal);
    font-size: 22px;
    line-height: 19px;
    font-weight: 800;
    text-align: center;
}

.logo-text strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--navy);
    font-size: 31px;
    line-height: 25px;
    letter-spacing: 1px;
}

.logo-text small {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    color: #333;
    letter-spacing: 1.7px;
    font-weight: 600;
}


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

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav a {
    position: relative;
    color: #17254a;
    font-size: 15px;
    font-weight: 600;
    transition: .25s ease;
}

.nav a:hover {
    color: var(--teal);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--teal);
    transition: .25s ease;
}

.nav a:hover::after {
    width: 100%;
}


/* =========================================================
   BOOK APPOINTMENT BUTTON
========================================================= */

.appointment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 23px;
    border-radius: 30px;
    background: linear-gradient(135deg, var(--navy), var(--teal));
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(0,100,120,.20);
    transition: .3s ease;
    white-space: nowrap;
}

.appointment-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,80,110,.30);
}


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

.menu-toggle {
    display: none;
    width: 43px;
    height: 43px;
    border: 0;
    border-radius: 10px;
    background: #eef8fa;
    cursor: pointer;
    position: relative;
}

.menu-toggle span {
    display: block;
    width: 23px;
    height: 2px;
    background: var(--navy);
    margin: 5px auto;
    transition: .3s ease;
}


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

.hero {
    position: relative;
    min-height: 720px;
    padding-top: 82px;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 15%, #e4f7fa 0, transparent 30%),
        linear-gradient(110deg, #fff 40%, #edf9fb 100%);
}

.hero-inner {
    min-height: 638px;
    display: grid;
    grid-template-columns: 47% 53%;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero::after {
    content: "";
    position: absolute;
    left: -5%;
    bottom: -85px;
    width: 110%;
    height: 180px;
    background: var(--navy);
    border-radius: 50% 50% 0 0;
}


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

.hero-content {
    padding: 50px 0 100px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--teal);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}

.hero-tag::before {
    content: "";
    width: 35px;
    height: 2px;
    background: var(--teal);
}

.hero-title {
    font-size: clamp(42px, 5vw, 60px);
    line-height: 1.04;
    color: var(--navy);
    font-weight: 800;
}

.hero-title span {
    color: var(--teal);
    display: block;
}

.hero-priority {
    font-size: 22px;
    margin-top: 24px;
    color: var(--navy);
}

.hero-line {
    width: 65px;
    height: 3px;
    background: var(--teal);
    margin: 20px 0;
}

.hero-description {
    max-width: 540px;
    color: #242a35;
    font-size: 17px;
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    gap: 13px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.hero-secondary {
    padding: 13px 23px;
    border: 1.5px solid var(--teal);
    color: var(--teal);
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    transition: .3s;
}

.hero-secondary:hover {
    background: var(--teal);
    color: white;
}


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

.hero-image {
    height: 590px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50% 50% 0 0;
}


/*
   Placeholder until you add your actual doctor image.
*/

.doctor-placeholder {
    width: 90%;
    height: 540px;
    border-radius: 50% 50% 0 0;
    /*background:
        radial-gradient(circle at 50% 20%, #fff 0, transparent 18%),
        linear-gradient(135deg, #dff8fa, #bce9ed);*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--teal);
    font-size: 17px;
}


/* =========================================================
   FEATURES
========================================================= */

.features {
    position: relative;
    z-index: 10;
    margin-top: -45px;
    padding: 55px 0 65px;
    color: white;
    background:
        radial-gradient(circle at 10% 20%, rgba(0,190,200,.16), transparent 20%),
        radial-gradient(circle at 95% 70%, rgba(0,190,200,.12), transparent 20%),
        linear-gradient(150deg, #062b6d, #031943);
    border-radius: 50% 50% 0 0 / 8% 8% 0 0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}

.feature {
    padding: 15px 28px;
    text-align: center;
    position: relative;
}

.feature:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20px;
    height: 190px;
    width: 1px;
    background: rgba(255,255,255,.65);
}

.feature-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: white;
    color: var(--teal);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #d7f7f7;
}

.feature-icon svg {
    width: 45px;
    height: 45px;
}

.feature h3 {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.feature p {
    font-size: 15px;
    line-height: 1.6;
    color: #eef7ff;
}


/* =========================================================
   JOURNEY
========================================================= */

.journey {
    padding: 110px 0;
    position: relative;
    background:
        linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.95)),
        radial-gradient(#cfe8ed 1px,transparent 1px);
    background-size: auto,22px 22px;
}

.journey-grid {
    display: grid;
    grid-template-columns: 46% 54%;
    gap: 55px;
    align-items: center;
}

.journey-heading {
    font-size: clamp(32px,4vw,45px);
    line-height: 1.15;
    color: var(--navy);
}

.journey-heading span {
    display: block;
    color: var(--teal);
}

.journey-line {
    width: 60px;
    height: 3px;
    background: var(--teal);
    margin: 20px 0;
}

.journey-description {
    color: #252c37;
    font-size: 17px;
    line-height: 1.7;
}

.hospital-visual {
    height: 330px;
    margin-top: 35px;
    border-radius: 25px;
    background:
        linear-gradient(135deg, #e8fafd, #d9f1f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.hospital-visual::before {
    content: "HOSPITAL CARE";
    position: absolute;
    bottom: 22px;
    left: 0;
    width: 100%;
    text-align: center;
    font-weight: 800;
    color: rgba(6,36,94,.15);
    font-size: 28px;
}

.shield {
    width: 175px;
    height: 210px;
    background: linear-gradient(145deg,#1472bd,#052b67);
    clip-path: polygon(
        50% 0,
        92% 15%,
        86% 65%,
        50% 100%,
        14% 65%,
        8% 15%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.shield::after {
    content: "+";
    color: white;
    font-size: 90px;
    font-weight: 300;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    position: relative;
    padding-left: 65px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 25px;
    bottom: 25px;
    border-left: 3px dashed var(--teal);
}

.timeline-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    padding-bottom: 28px;
    position: relative;
}

.timeline-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(145deg,var(--teal),#076e79);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.timeline-icon svg {
    width: 27px;
    height: 27px;
}

.timeline-content {
    padding-bottom: 17px;
    border-bottom: 1px dotted #168b95;
}

.timeline-content h3 {
    font-size: 18px;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 7px;
}

.timeline-content p {
    color: #19233c;
    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   APPOINTMENT SECTION
========================================================= */

.appointment-section {
    padding: 80px 0;
    background:
        radial-gradient(circle at 10% 10%,rgba(255,255,255,.15),transparent 20%),
        linear-gradient(135deg,#06245e,#007d88);
    color: white;
}

.appointment-wrapper {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.appointment-wrapper h2 {
    font-size: clamp(30px,4vw,45px);
    margin-bottom: 12px;
}

.appointment-wrapper p {
    font-size: 17px;
    line-height: 1.7;
    opacity: .95;
}

.appointment-form {
    background: white;
    margin-top: 35px;
    padding: 30px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
    text-align: left;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid #d5e3e8;
    border-radius: 8px;
    padding: 13px;
    font-size: 14px;
    outline: none;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--teal);
}

.submit-btn {
    grid-column: 1 / -1;
    border: 0;
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(135deg,var(--navy),var(--teal));
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}


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

.cta {
    padding: 70px 0;
    text-align: center;
    background: #f3fafb;
}

.cta h2 {
    font-size: clamp(30px,4vw,43px);
    color: var(--navy);
}

.cta p {
    max-width: 650px;
    margin: 15px auto 25px;
    line-height: 1.7;
    color: #303846;
}

.cta .appointment-btn {
    display: inline-flex;
}


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

footer {
    background: #021638;
    color: white;
    padding: 50px 0 25px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 35px;
}

.footer-logo {
    font-family: Georgia,serif;
    font-size: 34px;
    margin-bottom: 12px;
}

.footer-about {
    color: #c9d8eb;
    line-height: 1.7;
    max-width: 400px;
}

.footer h3 {
    margin-bottom: 15px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #c9d8eb;
    font-size: 14px;
}

.footer-links a:hover {
    color: #22bec2;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 20px;
    text-align: center;
    color: #b7c7dc;
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px) {

    .nav {
        gap: 18px;
    }

    .nav a {
        font-size: 14px;
    }

    .header-inner {
        gap: 15px;
    }

    .hero-inner {
        grid-template-columns: 1fr 1fr;
    }

    .feature {
        padding: 15px;
    }

}


@media(max-width:850px) {

    .menu-toggle {
        display: block;
    }

    .header-inner {
        height: 72px;
    }

    .nav {
        position: absolute;
        top: 72px;
        left: 0;
        width: 100%;
        padding: 20px;
        background: white;
        box-shadow: 0 15px 25px rgba(0,0,0,.10);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav.active {
        display: flex;
    }

    .nav a {
        padding: 14px 5%;
        border-bottom: 1px solid #edf1f4;
    }

    .nav a::after {
        display: none;
    }

    .nav .appointment-btn {
        margin-top: 15px;
        text-align: center;
    }

    .hero {
        padding-top: 72px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-image {
        order: -1;
        height: 390px;
    }

    .hero-content {
        padding: 25px 0 90px;
    }

    .feature-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .feature:nth-child(2)::after {
        display: none;
    }

    .journey-grid {
        grid-template-columns: 1fr;
    }

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


@media(max-width:600px) {

    .container {
        width: 90%;
    }

    .logo-mark {
        width: 45px;
        height: 45px;
    }

    .logo-text strong {
        font-size: 26px;
    }

    .logo-text small {
        font-size: 6px;
    }

    .header .appointment-btn {
        display: none;
    }

    .hero-image {
        height: 290px;
    }

    .doctor-placeholder {
        height: 280px;
    }

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

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

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons a {
        text-align: center;
    }

    .features {
        border-radius: 18% 18% 0 0 / 5% 5% 0 0;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature {
        padding: 25px 15px 35px;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    .feature:not(:last-child)::after {
        display: none;
    }

    .journey {
        padding: 70px 0;
    }

    .journey-heading {
        font-size: 31px;
    }

    .hospital-visual {
        height: 240px;
    }

    .shield {
        width: 125px;
        height: 155px;
    }

    .shield::after {
        font-size: 65px;
    }

    .timeline {
        padding-left: 0;
    }

    .timeline::before {
        left: 25px;
    }

    .timeline-item {
        grid-template-columns: 50px 1fr;
        gap: 17px;
    }

    .timeline-icon {
        width: 50px;
        height: 50px;
    }

    .appointment-form {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .form-group.full {
        grid-column: auto;
    }

    .submit-btn {
        grid-column: auto;
    }

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


@media(max-width:400px) {

    .logo-text strong {
        font-size: 23px;
    }

    .logo-text small {
        display: none;
    }

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

}


/* =========================================================
   SURGERY SPECIALTIES
========================================================= */

.specialties {
    position: relative;
    padding: 70px 0 0;
    background: #ffffff;
    overflow: hidden;
}

.specialties-title {
    text-align: center;
    color: var(--navy);
    font-size: clamp(27px, 3vw, 36px);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.specialties-title::before,
.specialties-title::after {
    content: "";
    width: 70px;
    height: 2px;
    background: var(--teal-light);
}


/* Cards */

.specialties-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.specialty-card {
    min-height: 245px;
    padding: 13px 10px 18px;
    text-align: center;
    border: 1px solid #dcebee;
    border-radius: 17px;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fcfd 100%
    );
    box-shadow: 0 5px 18px rgba(0, 45, 80, .05);
    transition: .3s ease;
}

.specialty-card:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: 0 12px 28px rgba(0, 100, 115, .14);
}


/* Icon */

.specialty-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        #087e87,
        #005c65
    );
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #edfafa;
    box-shadow: 0 4px 10px rgba(0, 80, 90, .12);
}

.specialty-icon svg {
    width: 38px;
    height: 38px;
}


/* Card text */

.specialty-card h3 {
    color: var(--navy);
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    line-height: 1.2;
}

.specialty-card p {
    color: #17254a;
    font-size: 12px;
    line-height: 1.65;
}


/* Bottom message */

.specialties-banner {
    position: relative;
    margin-top: 18px;
    padding: 28px 20px 35px;
    min-height: 120px;
    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(0, 190, 200, .14),
            transparent 20%
        ),
        linear-gradient(
            120deg,
            #062b68,
            #031b4b
        );
    color: white;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}


/* Curved teal decoration */

.specialties-banner::after {
    content: "";
    position: absolute;
    right: -5%;
    bottom: -75px;
    width: 45%;
    height: 150px;
    border-radius: 50%;
    border-top: 7px solid var(--teal);
    border-right: 7px solid var(--teal-light);
    transform: rotate(-13deg);
}

.specialties-banner-icon {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    color: #38cdd0;
}

.specialties-banner-icon svg {
    width: 100%;
    height: 100%;
}

.specialties-banner-text {
    text-align: center;
    position: relative;
    z-index: 2;
}

.specialties-banner-text strong {
    display: block;
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: 400;
    margin-bottom: 6px;
}

.specialties-banner-text span {
    display: block;
    color: #13c0c3;
    font-size: clamp(20px, 2.4vw, 27px);
    font-weight: 600;
}


/* =========================================================
   SPECIALTIES RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .specialties-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .specialty-card {
        min-height: 220px;
    }

}


@media (max-width: 600px) {

    .specialties {
        padding-top: 55px;
    }

    .specialties-title {
        font-size: 25px;
        gap: 9px;
    }

    .specialties-title::before,
    .specialties-title::after {
        width: 30px;
    }

    .specialties-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .specialty-card {
        min-height: 225px;
        padding: 13px 9px;
    }

    .specialty-icon {
        width: 60px;
        height: 60px;
    }

    .specialty-card h3 {
        font-size: 13px;
    }

    .specialty-card p {
        font-size: 11.5px;
        line-height: 1.55;
    }

    .specialties-banner {
        min-height: 160px;
        flex-direction: column;
        gap: 10px;
        padding: 25px 15px;
    }

    .specialties-banner-icon {
        width: 50px;
        height: 50px;
    }

    .specialties-banner-text strong,
    .specialties-banner-text span {
        font-size: 18px;
    }

    .specialties-banner::after {
        width: 80%;
    }

}


@media (max-width: 370px) {

    .specialties-grid {
        grid-template-columns: 1fr;
    }

    .specialty-card {
        min-height: auto;
    }

}


/* =========================================================
   WHY CHOOSE HESTIA
========================================================= */

.why-hestia {
    background: #fff;
    padding: 65px 0 0;
    overflow: hidden;
}

.why-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    color: var(--navy);
    font-size: clamp(25px, 3vw, 35px);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.why-title::before,
.why-title::after {
    content: "";
    width: 100px;
    height: 2px;
    background: var(--teal-light);
}


/* =========================================================
   WHY FEATURES
========================================================= */

.why-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 20px;
}

.why-feature {
    min-height: 125px;
    padding: 5px 20px 20px;
    text-align: center;
    border-right: 2px solid #b9e1e5;
}

.why-feature:last-child {
    border-right: none;
}

.why-feature-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 12px;
    color: var(--teal);
}

.why-feature-icon svg {
    width: 100%;
    height: 100%;
}

.why-feature h3 {
    color: var(--navy);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}


/* =========================================================
   CARE JOURNEY PANEL
========================================================= */

.care-panel {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(0, 190, 200, .12),
            transparent 20%
        ),
        linear-gradient(
            110deg,
            #062b68 0%,
            #031c4b 60%,
            #062a62 100%
        );
    color: white;
}


/* Curved image section */

.care-panel-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 48%;
    height: 100%;
    overflow: hidden;

    clip-path: ellipse(
        75% 90% at 75% 50%
    );
}


/*
    Replace this with your actual patient / nurse image.
*/

.care-image-placeholder {
    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            #d8f2f4,
            #a8dfe3
        );

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

    color: var(--teal);
    text-align: center;
    font-size: 15px;
}


/* If using real image */

.care-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


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

.care-content {
    position: relative;
    z-index: 3;
    width: 55%;
    min-height: 310px;
    padding: 35px 0 30px;
}

.care-small-title {
    font-size: 14px;
    text-transform: uppercase;
    color: white;
    margin-bottom: 10px;
    font-weight: 500;
}

.care-main-title {
    color: var(--teal-light);
    font-size: clamp(26px, 3vw, 37px);
    line-height: 1.12;
    font-weight: 700;
    max-width: 500px;
    text-transform: uppercase;
}

.care-arrow {
    color: var(--teal-light);
    font-size: 26px;
    margin: 5px 0 10px;
}

.care-description {
    font-size: 16px;
    line-height: 1.55;
    color: #f2f7ff;
    max-width: 250px;
}


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

.care-contact {
    position: absolute;
    left: 300px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.care-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #f1f6ff;
}

.care-contact-icon {
    width: 24px;
    height: 24px;
    color: var(--teal-light);
    flex-shrink: 0;
}

.care-contact-icon svg {
    width: 100%;
    height: 100%;
}


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

.care-heart {
    position: absolute;
    left: 20px;
    top: 28px;
    width: 82px;
    height: 82px;
    border: 1.5px solid rgba(255,255,255,.75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.care-heart svg {
    width: 48px;
    height: 48px;
    color: white;
}

.care-text-wrap {
    padding-left: 115px;
}


/* =========================================================
   BOTTOM TAGLINE
========================================================= */

.care-footer {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: white;
    color: var(--teal);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    position: relative;
}

.care-footer::after {
    content: "";
    width: 130px;
    height: 2px;
    background: var(--teal-light);
}

.care-footer-icon {
    width: 28px;
    height: 28px;
    color: var(--teal);
}

.care-footer-icon svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   WHY CHOOSE RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .why-features {
        grid-template-columns: repeat(5, 1fr);
    }

    .why-feature {
        padding-left: 10px;
        padding-right: 10px;
    }

    .why-feature h3 {
        font-size: 12px;
    }

    .care-contact {
        left: 115px;
    }

}


@media (max-width: 700px) {

    .why-hestia {
        padding-top: 50px;
    }

    .why-title {
        font-size: 24px;
        gap: 8px;
    }

    .why-title::before,
    .why-title::after {
        width: 30px;
    }


    /* 5 cards in horizontal scroll */

    .why-features {
        display: flex;
        overflow-x: auto;
        padding-bottom: 15px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .why-feature {
        min-width: 150px;
        flex: 0 0 150px;
        border-right: 1px solid #b9e1e5;
        scroll-snap-align: start;
    }


    /* Care panel */

    .care-panel {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .care-panel-image {
        position: relative;
        order: 2;
        width: 100%;
        height: 280px;
        clip-path: none;
    }

    .care-content {
        width: 100%;
        min-height: 330px;
        padding: 30px 20px;
    }

    .care-text-wrap {
        padding-left: 95px;
    }

    .care-heart {
        left: 18px;
        top: 30px;
        width: 65px;
        height: 65px;
    }

    .care-heart svg {
        width: 40px;
        height: 40px;
    }

    .care-main-title {
        font-size: 27px;
    }

    .care-description {
        max-width: 220px;
        font-size: 14px;
    }

    .care-contact {
        position: relative;
        left: auto;
        bottom: auto;
        margin: 25px 0 0 95px;
    }

    .care-footer {
        padding: 15px;
        font-size: 13px;
        flex-wrap: wrap;
    }

    .care-footer::after {
        display: none;
    }

}


@media (max-width: 420px) {

    .why-title {
        font-size: 21px;
    }

    .why-feature {
        min-width: 135px;
        flex-basis: 135px;
    }

    .care-text-wrap {
        padding-left: 80px;
    }

    .care-main-title {
        font-size: 24px;
    }

    .care-contact {
        margin-left: 80px;
    }

}

/* =========================================================
   ABOUT HESTIA
========================================================= */

.about-hestia {
    position: relative;
    padding: 90px 0 0;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbfc 100%
        );
    overflow: hidden;
}


/* Main wrapper */

.about-wrapper {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 75px;
}


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

.about-content {
    position: relative;
    z-index: 2;
}

.about-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--teal);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    margin-bottom: 15px;
}

.about-label::before {
    content: "";
    width: 42px;
    height: 3px;
    background: var(--teal);
}


.about-content h2 {
    margin: 0 0 22px;

    color: var(--navy);
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.08;
    font-weight: 800;
}

.about-content h2 span {
    display: block;
    color: var(--teal);
}


.about-content > p {
    max-width: 620px;

    color: #263552;
    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 17px;
}

.about-content .about-intro {
    color: #17254a;
    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   ABOUT POINTS
========================================================= */

.about-points {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.about-point {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}


.about-point-icon {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 50%;

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

    background: var(--teal);
    color: white;

    font-size: 16px;
    font-weight: 800;

    box-shadow:
        0 5px 15px rgba(0, 110, 120, .18);
}


.about-point h3 {
    margin: 0 0 3px;

    color: var(--navy);
    font-size: 16px;
    font-weight: 800;
}


.about-point p {
    margin: 0;

    color: #53627d;
    font-size: 13px;
    line-height: 1.55;
}


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

.about-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    margin-top: 30px;
    padding: 14px 23px;

    background: var(--navy);
    color: white;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}


.about-button span {
    font-size: 20px;
    line-height: 1;
    transition: .3s ease;
}


.about-button:hover {
    background: var(--teal);
    transform: translateY(-2px);
}


.about-button:hover span {
    transform: translateX(5px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.about-visual {
    position: relative;
    min-height: 530px;
}


/* Main image */

.about-image {
    position: absolute;

    right: 0;
    top: 10px;

    width: 88%;
   
    overflow: hidden;

    border-radius:
        140px
        20px
        140px
        20px;

    border: 8px solid white;

    box-shadow:
        0 25px 60px rgba(0, 38, 75, .15);
}


.about-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(3, 27, 75, .25)
        );
}


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

    object-fit: cover;

    display: block;
}


/* =========================================================
   FLOATING CARE CARD
========================================================= */

.about-stat {
    position: absolute;

    left: 0;
    bottom: 55px;

    display: flex;
    align-items: center;
    gap: 12px;

    width: 250px;

    padding: 18px;

    background: white;

    border-radius: 12px;

    box-shadow:
        0 15px 40px rgba(0, 40, 80, .16);

    z-index: 3;
}


.about-stat-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 50%;

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

    background: var(--teal);

    color: white;

    font-size: 32px;
    font-weight: 300;
}


.about-stat strong {
    display: block;

    color: var(--navy);

    font-size: 15px;
}


.about-stat span {
    display: block;

    margin-top: 3px;

    color: #63708a;

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


/* =========================================================
   CARE BADGE
========================================================= */

.about-badge {
    position: absolute;

    right: -12px;
    top: 35px;

    width: 115px;
    height: 115px;

    border-radius: 50%;

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

    text-align: center;

    background: var(--teal);

    color: white;

    border: 7px solid white;

    box-shadow:
        0 10px 30px rgba(0, 80, 90, .18);

    z-index: 4;
}


.about-badge strong {
    font-size: 16px;
    letter-spacing: 1px;
}


.about-badge span {
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.about-bottom {
    margin-top: 55px;

    background:
        linear-gradient(
            100deg,
            #062b68,
            #031b4b
        );

    padding: 22px 0;
}


.about-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


.about-bottom p {
    margin: 0;

    color: white;

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

    text-align: center;
}


.about-bottom-line {
    width: 65px;
    height: 2px;

    background: var(--teal-light);
}


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

@media (max-width: 950px) {

    .about-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-content {
        max-width: 750px;
        margin: auto;
        text-align: center;
    }

    .about-label {
        justify-content: center;
    }

    .about-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .about-points {
        text-align: left;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .about-visual {
        width: 90%;
        max-width: 600px;
        margin: auto;
    }

}


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

@media (max-width: 600px) {

    .about-hestia {
        padding-top: 60px;
    }

    .about-wrapper {
        gap: 20px;
    }

    .about-content h2 {
        font-size: 35px;
    }

    .about-content .about-intro {
        font-size: 16px;
    }

    .about-content > p {
        font-size: 14px;
        line-height: 1.7;
    }


    .about-points {
        gap: 15px;
    }

    .about-point h3 {
        font-size: 14px;
    }

    .about-point p {
        font-size: 12px;
    }


    /* Visual */

    .about-visual {
        min-height: 430px;
        width: 100%;
    }

    .about-image {
        width: 88%;
        height: 370px;

        border-radius:
            100px
            15px
            100px
            15px;
    }

    .about-badge {
        width: 90px;
        height: 90px;

        right: -2px;
        top: 20px;

        border-width: 5px;
    }

    .about-badge strong {
        font-size: 13px;
    }

    .about-badge span {
        font-size: 9px;
    }


    .about-stat {
        left: 5px;
        bottom: 25px;
        width: 220px;
        padding: 13px;
    }

    .about-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 25px;
    }


    .about-button {
        width: 100%;
        justify-content: center;
    }


    .about-bottom {
        margin-top: 30px;
    }

    .about-bottom-inner {
        gap: 10px;
    }

    .about-bottom-line {
        width: 25px;
    }

    .about-bottom p {
        font-size: 13px;
    }

}


/* =========================================
   SINGLE YOUTUBE VIDEO
========================================= */

.single-video-section {

    padding: 80px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f1fafc 100%
        );

    position: relative;

    overflow: hidden;
}


/* Decorative circle */

.single-video-section::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: rgba(7, 135, 147, 0.06);

    top: -180px;

    left: -120px;
}


.single-video-section::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(6, 43, 104, 0.05);

    right: -120px;

    bottom: -150px;
}


/* Heading */

.single-video-heading {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 40px;

    position: relative;

    z-index: 2;
}


.single-video-heading span {

    display: inline-block;

    color: #078793;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 10px;
}


.single-video-heading h2 {

    color: #062b68;

    font-size:
        clamp(30px, 4vw, 42px);

    line-height: 1.2;

    margin-bottom: 12px;
}


.single-video-heading h2 strong {

    color: #078793;

    font-weight: 700;
}


.single-video-heading p {

    color: #68798a;

    font-size: 15px;

    line-height: 1.7;

    margin: 0 auto;

    max-width: 600px;
}


/* Video Outer Box */

.single-video-box {

    max-width: 900px;

    margin: auto;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #dcecef;

    box-shadow:
        0 15px 45px
        rgba(0, 40, 70, 0.12);

    position: relative;

    z-index: 2;
}


/* Video */

.single-video {

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #031b4b;
}


.single-video iframe {

    width: 100%;

    height: 100%;

    border: 0;

    display: block;
}


/* Bottom Content */

.single-video-content {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 23px 28px;
}


.video-play-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e6f7f8;

    color: #078793;

    font-size: 16px;

    font-weight: bold;
}


.single-video-content h3 {

    color: #062b68;

    font-size: 19px;

    margin: 0 0 4px;
}


.single-video-content p {

    color: #6d7d8e;

    font-size: 13px;

    line-height: 1.6;

    margin: 0;
}


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

@media (max-width: 600px) {

    .single-video-section {

        padding: 55px 0;

    }


    .single-video-heading {

        margin-bottom: 28px;

    }


    .single-video-heading h2 {

        font-size: 29px;

    }


    .single-video-heading p {

        font-size: 13px;

    }


    .single-video-box {

        border-radius: 12px;

    }


    .single-video-content {

        padding: 18px;

        align-items: flex-start;

    }


    .video-play-icon {

        width: 40px;

        height: 40px;

        min-width: 40px;

        font-size: 13px;

    }


    .single-video-content h3 {

        font-size: 16px;

    }


    .single-video-content p {

        font-size: 12px;

    }

}


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

.testimonial-section {

    padding: 85px 0;

    background:
        linear-gradient(
            180deg,
            #f4fbfc 0%,
            #ffffff 100%
        );

    overflow: hidden;
}


/* Heading */

.testimonial-heading {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 45px;
}


.testimonial-label {

    color: #078793;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    display: inline-block;

    margin-bottom: 10px;
}


.testimonial-heading h2 {

    color: #062b68;

    font-size:
        clamp(30px, 4vw, 42px);

    line-height: 1.2;

    margin-bottom: 12px;
}


.testimonial-heading h2 strong {

    color: #078793;

    font-weight: 700;
}


.testimonial-heading p {

    color: #68798a;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


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

.testimonial-slider-wrapper {

    position: relative;

    max-width: 1150px;

    margin: auto;

    padding: 0 55px;
}


.testimonial-slider {

    display: flex;

    overflow: hidden;

    scroll-behavior: smooth;

    gap: 22px;
}


.testimonial-slide {

    flex: 0 0 calc(
        (100% - 44px) / 3
    );

    min-width: 0;
}


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

.testimonial-card {

    height: 100%;

    background: #ffffff;

    border: 1px solid #dcecef;

    border-radius: 15px;

    padding: 30px 25px;

    position: relative;

    box-shadow:
        0 10px 30px
        rgba(0,40,70,.07);

    transition: .3s;
}


.testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px
        rgba(0,40,70,.12);
}


.quote-icon {

    position: absolute;

    top: 13px;

    right: 20px;

    color:
        rgba(7,135,147,.12);

    font-family: Georgia, serif;

    font-size: 70px;

    line-height: 1;
}


.stars {

    color: #f3b51b;

    font-size: 14px;

    letter-spacing: 2px;

    margin-bottom: 17px;
}


.testimonial-text {

    color: #596c7f;

    font-size: 13px;

    line-height: 1.8;

    min-height: 120px;

    margin-bottom: 23px;
}


/* =========================================
   PERSON
========================================= */

.testimonial-person {

    display: flex;

    align-items: center;

    gap: 12px;

    border-top:
        1px solid #edf2f4;

    padding-top: 17px;
}


.person-avatar {

    width: 45px;

    height: 45px;

    min-width: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #062b68,
            #078793
        );

    color: #fff;

    font-size: 12px;

    font-weight: 800;
}


.testimonial-person h4 {

    color: #062b68;

    font-size: 14px;

    margin: 0 0 2px;
}


.testimonial-person span {

    color: #82909d;

    font-size: 11px;
}


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

.testimonial-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 1px solid #d6e8eb;

    background: #ffffff;

    color: #062b68;

    font-size: 18px;

    cursor: pointer;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 5px 18px
        rgba(0,40,70,.10);

    transition: .25s;
}


.testimonial-arrow:hover {

    background: #078793;

    color: #ffffff;

    border-color: #078793;
}


.testimonial-prev {

    left: 0;
}


.testimonial-next {

    right: 0;
}


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

.testimonial-dots {

    display: flex;

    justify-content: center;

    gap: 7px;

    margin-top: 30px;
}


.testimonial-dots button {

    width: 8px;

    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #cbdde1;

    cursor: pointer;

    transition: .3s;
}


.testimonial-dots button.active {

    width: 25px;

    border-radius: 10px;

    background: #078793;
}


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

@media (max-width: 900px) {

    .testimonial-slide {

        flex: 0 0 calc(
            (100% - 22px) / 2
        );

    }

}


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

@media (max-width: 600px) {

    .testimonial-section {

        padding: 60px 0;

    }


    .testimonial-heading {

        margin-bottom: 30px;

    }


    .testimonial-heading h2 {

        font-size: 29px;

    }


    .testimonial-heading p {

        font-size: 13px;

    }


    .testimonial-slider-wrapper {

        padding: 0 42px;

    }


    .testimonial-slide {

        flex: 0 0 100%;

    }


    .testimonial-card {

        padding: 25px 20px;

    }


    .testimonial-text {

        min-height: auto;

        font-size: 13px;

    }


    .testimonial-arrow {

        width: 36px;

        height: 36px;

        font-size: 15px;

    }

}

/* =========================================
   FOOTER CONTACT ICONS
========================================= */

.footer-links li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 12px;

}


.footer-links li > i {

    color: #20bcc1;

    width: 18px;

    margin-top: 4px;

    font-size: 14px;

}


.footer-links li a {

    display: flex;

    align-items: center;

    gap: 10px;

}


.footer-links li a i {

    color: #20bcc1;

    width: 18px;

    font-size: 14px;

}


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

.footer-social {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 20px;

}


.footer-social a {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,0.10);

    color: #ffffff;

    font-size: 14px;

    transition:
        all .3s ease;
}


.footer-social a:hover {

    background: #078793;

    color: #ffffff;

    transform:
        translateY(-4px);

}


/* Individual hover colors */

.footer-social a:nth-child(1):hover {
    background: #1877f2;
}

.footer-social a:nth-child(2):hover {
    background: #e4405f;
}

.footer-social a:nth-child(3):hover {
    background: #0a66c2;
}

.footer-social a:nth-child(4):hover {
    background: #ff0000;
}

.footer-social a:nth-child(5):hover {
    background: #25d366;
}



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

        .site-header {
            width: 100%;
            height: 80px;

            background: #ffffff;

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

            padding: 0 7%;

            border-bottom: 1px solid #e8eef1;
        }

        .logo {
            font-size: 23px;
            font-weight: 800;
            color: #062b68;
        }

        .logo span {
            color: #078793;
        }

        .book-btn {
            border: 0;
            outline: 0;

            background: linear-gradient(
                100deg,
                #078793,
                #062b68
            );

            color: #ffffff;

            padding: 12px 20px;

            border-radius: 6px;

            font-size: 12px;
            font-weight: 700;

            cursor: pointer;

            display: inline-flex;
            align-items: center;
            gap: 8px;

            transition: .3s;
        }

        .book-btn:hover {
            transform: translateY(-2px);

            box-shadow:
                0 8px 20px rgba(6, 43, 104, .18);
        }


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

        .main-content {
            min-height: 600px;

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

            text-align: center;

            padding: 30px;
        }

        .main-content h1 {
            font-size: 42px;
            margin-bottom: 12px;
        }

        .main-content p {
            color: #74838f;
            font-size: 14px;
        }


        /* ==========================================
           POPUP OVERLAY
        ========================================== */

        .enquiry-overlay {

            position: fixed;

            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            width: 100%;
            height: 100%;

            background: rgba(3, 22, 48, .78);

            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);

            display: none;

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

            padding: 20px;

            z-index: 99999;

            overflow-y: auto;
        }

        .enquiry-overlay.active {
            display: flex;
        }


        /* ==========================================
           POPUP BOX
        ========================================== */

        .enquiry-popup {

            position: relative;

            width: 100%;
            max-width: 900px;

            max-height: calc(100vh - 40px);

            background: #ffffff;

            border-radius: 18px;

            display: grid;

            grid-template-columns: 40% 60%;

            overflow: hidden;

            box-shadow:
                0 25px 80px rgba(0, 0, 0, .30);

            animation: popupShow .35s ease;
        }


        @keyframes popupShow {

            0% {
                opacity: 0;
                transform: translateY(30px) scale(.97);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }


        /* ==========================================
           CLOSE BUTTON
        ========================================== */

        .enquiry-close {

            position: absolute;

            top: 14px;
            right: 14px;

            width: 38px;
            height: 38px;

            border: 0;
            outline: 0;

            border-radius: 50%;

            background: #ffffff;

            color: #062b68;

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

            font-size: 16px;

            cursor: pointer;

            z-index: 999;

            box-shadow:
                0 4px 15px rgba(0, 0, 0, .18);

            transition: all .25s ease;
        }

        .enquiry-close:hover {

            background: #078793;

            color: #ffffff;

            transform: rotate(90deg);
        }


        /* ==========================================
           LEFT SIDE
        ========================================== */

        .enquiry-left {

            position: relative;

            padding: 48px 35px;

            background:
                linear-gradient(
                    145deg,
                    #062b68 0%,
                    #075d79 100%
                );

            color: #ffffff;

            overflow: hidden;
        }


        /* Decorative circles */

        .enquiry-left::before {

            content: "";

            position: absolute;

            width: 260px;
            height: 260px;

            border-radius: 50%;

            background:
                rgba(255, 255, 255, .05);

            top: -130px;
            left: -130px;
        }

        .enquiry-left::after {

            content: "";

            position: absolute;

            width: 220px;
            height: 220px;

            border-radius: 50%;

            background:
                rgba(255, 255, 255, .05);

            right: -110px;
            bottom: -110px;
        }


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

        .enquiry-label {

            position: relative;
            z-index: 2;

            color: #53d1d0;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 2px;
        }

        .enquiry-left h2 {

            position: relative;
            z-index: 2;

            font-size: 30px;

            line-height: 1.25;

            margin-top: 13px;
            margin-bottom: 14px;
        }

        .enquiry-left h2 span {
            color: #53d1d0;
        }

        .enquiry-description {

            position: relative;
            z-index: 2;

            color: #d4e4ea;

            font-size: 12px;

            line-height: 1.75;

            margin-bottom: 28px;
        }


        /* ==========================================
           INFO ITEM
        ========================================== */

        .info-item {

            position: relative;
            z-index: 2;

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 17px;
        }

        .info-icon {

            width: 40px;
            height: 40px;

            min-width: 40px;

            border-radius: 50%;

            background:
                rgba(255,255,255,.12);

            display: flex;

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

            color: #53d1d0;

            font-size: 13px;
        }

        .info-content strong {

            display: block;

            font-size: 11px;

            color: #ffffff;

            margin-bottom: 3px;
        }

        .info-content a,
        .info-content span {

            color: #d3e4eb;

            font-size: 10px;

            text-decoration: none;
        }

        .info-content a:hover {
            color: #53d1d0;
        }


        /* ==========================================
           TRUST BOX
        ========================================== */

        .trust-box {

            position: relative;
            z-index: 2;

            margin-top: 25px;

            padding: 12px 13px;

            border-radius: 7px;

            background:
                rgba(255,255,255,.08);

            border:
                1px solid rgba(255,255,255,.10);
        }

        .trust-box i {
            color: #53d1d0;
            margin-right: 5px;
        }

        .trust-box span {

            color: #d3e4eb;

            font-size: 9px;

            line-height: 1.6;
        }


        /* ==========================================
           RIGHT FORM
        ========================================== */

        .enquiry-right {

            padding: 38px;

            background: #ffffff;

            overflow-y: auto;

            max-height: calc(100vh - 40px);
        }


        /* Scrollbar */

        .enquiry-right::-webkit-scrollbar {
            width: 5px;
        }

        .enquiry-right::-webkit-scrollbar-track {
            background: #f5f7f8;
        }

        .enquiry-right::-webkit-scrollbar-thumb {
            background: #bdd6da;
            border-radius: 10px;
        }


        .enquiry-right h3 {

            color: #062b68;

            font-size: 23px;

            margin-bottom: 5px;
        }

        .form-intro {

            color: #7c8b95;

            font-size: 11px;

            margin-bottom: 21px;
        }


        /* ==========================================
           FORM GROUP
        ========================================== */

        .form-group {
            margin-bottom: 13px;
        }

        .form-group label {

            display: block;

            color: #30485c;

            font-size: 11px;

            font-weight: 700;

            margin-bottom: 5px;
        }

        .required {
            color: #e53935;
        }


        /* ==========================================
           INPUT
        ========================================== */

        .input-wrapper {

            width: 100%;

            min-height: 43px;

            display: flex;
            align-items: center;

            background: #fbfdfe;

            border:
                1px solid #dbe6ea;

            border-radius: 6px;

            transition: .25s;
        }

        .input-wrapper:focus-within {

            border-color: #078793;

            background: #ffffff;

            box-shadow:
                0 0 0 3px
                rgba(7,135,147,.08);
        }

        .input-icon {

            width: 40px;
            min-width: 40px;

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

            color: #078793;

            font-size: 12px;
        }

        .input-wrapper input,
        .input-wrapper select,
        .input-wrapper textarea {

            width: 100%;

            border: 0;
            outline: 0;

            background: transparent;

            color: #30485c;

            font-family: inherit;

            font-size: 11px;
        }

        .input-wrapper input,
        .input-wrapper select {

            height: 41px;

            padding-right: 10px;
        }

        .input-wrapper textarea {

            min-height: 70px;

            padding:
                9px 10px 9px 0;

            resize: vertical;
        }


        /* ==========================================
           TWO COLUMNS
        ========================================== */

        .form-row {

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 12px;
        }


        /* ==========================================
           SUBMIT BUTTON
        ========================================== */

        .enquiry-submit {

            width: 100%;

            height: 45px;

            margin-top: 4px;

            border: 0;
            outline: 0;

            border-radius: 6px;

            background:
                linear-gradient(
                    100deg,
                    #078793,
                    #062b68
                );

            color: #ffffff;

            font-size: 12px;

            font-weight: 700;

            cursor: pointer;

            display: flex;

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

            gap: 8px;

            transition: .3s;
        }

        .enquiry-submit:hover {

            transform: translateY(-2px);

            box-shadow:
                0 8px 20px
                rgba(6,43,104,.18);
        }


        /* ==========================================
           PRIVACY TEXT
        ========================================== */

        .form-security {

            text-align: center;

            color: #8a969f;

            font-size: 9px;

            margin-top: 10px;
        }

        .form-security i {

            color: #078793;

            margin-right: 3px;
        }


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

        @media (max-width: 800px) {

            .enquiry-popup {

                max-width: 700px;

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

            .enquiry-left {
                padding: 40px 25px;
            }

            .enquiry-right {
                padding: 32px 25px;
            }

            .enquiry-left h2 {
                font-size: 26px;
            }
        }


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

        @media (max-width: 650px) {

            .enquiry-overlay {

                padding: 10px;

                align-items: center;

                overflow-y: auto;
            }

            .enquiry-popup {

                width: 100%;

                max-width: 480px;

                max-height:
                    calc(100vh - 20px);

                display: flex;

                flex-direction: column;

                border-radius: 14px;

                overflow: hidden;
            }


            /* LEFT */

            .enquiry-left {

                flex: 0 0 auto;

                padding:
                    32px 22px 20px;
            }

            .enquiry-left h2 {

                font-size: 24px;

                margin-top: 10px;
            }

            .enquiry-description {

                font-size: 11px;

                line-height: 1.6;

                margin-bottom: 18px;
            }

            .info-item {

                margin-bottom: 11px;
            }

            .info-icon {

                width: 35px;
                height: 35px;
                min-width: 35px;
            }

            .trust-box {

                margin-top: 16px;
            }


            /* RIGHT */

            .enquiry-right {

                flex: 1;

                min-height: 0;

                max-height: 55vh;

                overflow-y: auto;

                padding:
                    24px 20px;
            }

            .enquiry-right h3 {

                font-size: 20px;
            }

            .form-row {

                grid-template-columns: 1fr;

                gap: 0;
            }


            /* CLOSE */

            .enquiry-close {

                width: 35px;
                height: 35px;

                top: 9px;
                right: 9px;

                font-size: 14px;
            }
        }


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

        @media (max-width: 400px) {

            .enquiry-overlay {
                padding: 7px;
            }

            .enquiry-popup {

                max-height:
                    calc(100vh - 14px);
            }

            .enquiry-left {

                padding:
                    30px 17px 17px;
            }

            .enquiry-right {

                max-height: 57vh;

                padding:
                    22px 16px;
            }

            .enquiry-left h2 {

                font-size: 22px;
            }

            .enquiry-close {

                width: 33px;
                height: 33px;

                top: 7px;
                right: 7px;
            }
        }



/* ==========================================
           INFORMATION ITEMS
        ========================================== */

        .enquiry-info {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 20px;

            position: relative;

            z-index: 2;

        }


        .enquiry-info-icon {

            width: 42px;

            height: 42px;

            min-width: 42px;

            border-radius: 50%;

            background:
                rgba(255,255,255,.12);

            display: flex;

            align-items: center;

            justify-content: center;

            color: #53d1d0;

        }


        .enquiry-info strong {

            display: block;

            color: #ffffff;

            font-size: 12px;

            margin-bottom: 3px;

        }


        .enquiry-info a,
        .enquiry-info span {

            color: #d3e4eb;

            font-size: 11px;

            text-decoration: none;

        }


        .enquiry-info a:hover {

            color: #53d1d0;

        }


        /********************* icon on footer call for *******************/

.whatsapp-fixed,
.call-fixed {
  position: fixed;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  text-decoration: none;
}

/* WhatsApp */
.whatsapp-fixed {
  bottom: 20px;
  background: #25D366;
}

/* Call */
.call-fixed {
  bottom: 80px; /* space above WhatsApp */
  background: #25D366;
}