@import "/public/css/global.css";
@import "/public/components/home/FrequentlyAskedQuestions/FrequentlyAskedQuestions.css";
@import "/public/components/home/HealthInsuranceLookup/HealthInsuranceLookup.css";
@import "/public/components/home/TestPreparationGuide/TestPreparationGuide.css";
@import "/public/components/home/WhatsappChatModal/WhatsAppChatModal.css";
@import "/public/components/home/CustomerReviews/CustomerReviews.css";
@import "/public/components/home/ContactUsForm/ContactUsForm.css";
@import "/public/components/home/SiteHeader/SiteHeader.css";
@import "/public/components/home/SiteFooter/SiteFooter.css";
@import "/public/components/home/MobileNav/MobileNav.css";

:root {
    --surface-0: #f5faf9;
    --surface-1: #ffffff;
    --surface-2: #ebf5f1;
    --ink-1: #1e2c2c;
    --ink-2: #3e5856;
    --brand-a: #267f7f;
    --brand-b: #2f9e80;
    --brand-c: #8f5fa7;
    --brand-d: #cf82b3;
    --radius-lg: 1.2rem;
    --radius-md: 0.85rem;
    --shadow-soft: 0 16px 36px rgba(25, 63, 58, 0.12);
    --shadow-card: 0 12px 22px rgba(24, 42, 43, 0.14);
}

body {
    background:
        radial-gradient(circle at 12% -2%, #cfe9e1 0, transparent 30%),
        radial-gradient(circle at 88% 4%, #f3d8e7 0, transparent 24%),
        var(--surface-0);
    color: var(--ink-1);
}

.anchor {
    visibility: hidden;
    position: absolute;
    top: -95px;
}

.center {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 1rem;
}

.text-justify {
    text-align: justify;
}

.purple-dark {
    color: var(--color-1);
}

.purple-light {
    color: var(--color-2);
}

.pink-light {
    color: var(--color-3);
}

.green {
    color: var(--color-4);
}

.green-dark {
    color: var(--color-5);
}

#main section h2 {
    letter-spacing: 0.01em;
}

#banner {
    min-height: calc(100vh - 95px);
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.55)),
        url("/public/multimedia/images/banner.png") no-repeat center center;
    background-size: cover;
}

#banner .center {
    display: grid;
    grid-template-rows: auto min-content;
    min-height: inherit;
    gap: 1.5rem;
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
}

#banner .center h1 {
    color: #15544f;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);
}

#banner .center .banner-logo {
    width: 100%;
    max-width: 210px;
    filter: drop-shadow(0 12px 14px rgba(27, 76, 68, 0.25));
}

#banner .contact-box {
    border-radius: var(--radius-md);
    padding: 1.3rem;
    height: 100%;
    color: white;
    fill: white;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(1px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#banner .contact-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 26px rgba(19, 48, 44, 0.25);
}

#banner .contact-box.box-1 {
    background: linear-gradient(145deg, #2f9e80, #2b856f);
}

#banner .contact-box.box-2 {
    background: linear-gradient(145deg, #296f73, #225d5f);
}

#banner .contact-box.box-2 a {
    color: white;
}

#banner .contact-box.box-3 {
    background: linear-gradient(145deg, #23988c, #1f8279);
}

#banner .contact-box .go-to-map-link {
    padding: 0.72rem 1.1rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    cursor: pointer;
    display: block;
    width: max-content;
    margin: auto;
    border-radius: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#banner .contact-box .go-to-map-link:hover,
#banner .contact-box .go-to-map-link:focus {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

#my-results {
    background: linear-gradient(120deg, #cc77af 0%, #9a6cbc 45%, #5f8ad3 100%);
}

#my-results > .center {
    padding: 3.2rem 1rem;
}

#my-results .text {
    font-size: 2rem;
    color: white;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(54, 22, 58, 0.18);
}

#my-results .button {
    padding: 1rem 1.4rem;
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    color: white;
    font-weight: 700;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

#my-results .button:hover,
#my-results .button:focus {
    background: rgba(255, 255, 255, 0.27);
    transform: translateY(-2px);
    outline: none;
}

#services {
    position: relative;
}

#services > .center {
    padding: 4.5rem 1rem;
}

#services h2 {
    color: var(--brand-a);
    font-size: 2rem;
    margin-bottom: 2rem;
}

#services .service-banner img {
    width: 100%;
    border-radius: var(--radius-lg);
    height: auto;
    box-shadow: var(--shadow-soft);
}

#services .service-boxes {
    padding: 0 2rem;
    position: relative;
    top: -72px;
    z-index: 2;
}

#services .service-box {
    padding: 3.8rem 1.7rem 2rem;
    position: relative;
    background: var(--surface-1);
    border-radius: var(--radius-md);
    border: 1px solid #d6ece6;
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#services .service-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(29, 56, 55, 0.2);
}

#services .service-box .service-icon {
    text-align: center;
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
    transition: transform 0.2s ease;
}

#services .service-box:hover .service-icon {
    transform: translateY(-5px);
}

#services .service-box .service-icon img {
    width: 100%;
    border-radius: 0.5rem;
    box-sizing: content-box;
    max-width: 44px;
    background: linear-gradient(140deg, #2fa495, #307dcf);
    padding: 0.6rem;
}

#services .service-box h3 {
    color: var(--brand-c);
    margin-bottom: 1.2rem;
    font-size: 1.12rem;
    text-align: center;
}

#services .service-box p {
    color: var(--ink-2);
}

#about-us {
    position: relative;
    background: linear-gradient(180deg, #f5f9f8, #eef5f4);
}

#about-us > .center {
    padding: 4.5rem 1rem 1.5rem;
}

#about-us h2 {
    color: var(--brand-c);
    margin-bottom: 1.6rem;
    font-size: 2rem;
}

#about-us h3 {
    font-family: "Avenir LT Std", serif;
    font-weight: 700;
}

#about-us img {
    width: 100%;
    border-radius: var(--radius-md);
}

#about-us .text {
    font-size: 1.08rem;
    font-family: "DIN Alternate", serif;
    color: #375757;
}

#about-us .about-box {
    padding: 2.3rem;
    font-family: "Avenir LT Std", serif;
    font-size: 1rem;
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

#about-us .about-box.box-1 {
    background: linear-gradient(135deg, #2f9e80, #5cb497);
}

#about-us .about-box.box-2 {
    background: linear-gradient(135deg, #cf82b3, #b06fb2);
}

#about-us .about-box.box-3 {
    background: linear-gradient(135deg, #9d65b8, #7a5cb5);
}

#about-us .about-box svg {
    margin: auto auto 1rem auto;
    display: block;
}

#team {
    position: relative;
    background: #f4f9f8;
}

#team > .center {
    padding: 4.5rem 1rem;
}

#team h2 {
    font-size: 2rem;
    color: var(--brand-c);
    margin-bottom: 2rem;
}

#team .team-member {
    max-width: 280px;
    margin: auto;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid #d9ece8;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease;
}

#team .team-member:hover {
    transform: translateY(-5px);
}

#team .team-member img {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    width: 100%;
    object-fit: cover;
}

#team .team-member .profile {
    padding: 1rem;
    min-height: 50px;
}

#team .team-member .member-name {
    font-family: "DIN Alternate", serif;
    font-weight: 700;
    margin-bottom: 0.3rem;
    font-size: 1.3rem;
    color: var(--color-2);
}

#team .team-member .member-role {
    font-family: "Avenir LT Std", serif;
    font-weight: 400;
    min-height: 50px;
    color: var(--ink-2);
}

#customer-reviews {
    position: relative;
    background: linear-gradient(180deg, #eef8f6 0%, #f2effa 100%);
}

#customer-reviews h2 {
    font-size: 2rem;
    color: var(--brand-d);
    margin-bottom: 2rem;
}

#customer-reviews > .center {
    padding: 4.5rem 1rem;
}

#test-preparation {
    position: relative;
    min-height: 100px;
    background-color: #fcfffe;
}

#test-preparation > .center {
    padding: 4.5rem 1rem;
}

#test-preparation h2 {
    font-size: 2rem;
    color: var(--brand-c);
    margin-bottom: 2rem;
}

#health-insurance {
    position: relative;
    background: linear-gradient(120deg, #b579ac, #8a6ac8);
}

#health-insurance > .center {
    padding: 4.5rem 1rem;
}

#health-insurance h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 2rem;
}

#faq {
    position: relative;
    background: #f8fbfb;
}

#faq h2 {
    color: var(--brand-c);
    font-size: 2rem;
    margin-bottom: 2rem;
}

#faq > .center {
    padding: 4.5rem 1rem;
}

#faq img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

#contact {
    position: relative;
    background: linear-gradient(130deg, #d185b5 0%, #af6eb2 48%, #6b7ec7 100%);
    color: white;
}

#contact h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 2rem;
}

#contact > .center {
    padding: 4.5rem 1rem;
}

#contact .google-map {
    overflow: hidden;
    background: #ffffffbb url("/public/multimedia/images/map.png") no-repeat center center;
    background-size: cover;
    border-radius: var(--radius-md);
    width: 100%;
    height: 400px;
    box-shadow: var(--shadow-soft);
}

#contact .google-map iframe {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    z-index: 3;
}

@media (max-width: 992px) {
    #banner .center {
        gap: 1.25rem;
    }

    #services .service-boxes {
        padding: 0 0.4rem;
        top: -56px;
    }
}

@media (max-width: 768px) {
    #banner .center .banner-logo {
        max-width: 130px;
    }

    #my-results .text {
        font-size: 1.55rem;
    }

    #services > .center,
    #about-us > .center,
    #team > .center,
    #customer-reviews > .center,
    #test-preparation > .center,
    #health-insurance > .center,
    #faq > .center,
    #contact > .center {
        padding-top: 3.6rem;
        padding-bottom: 3.6rem;
    }
}

@media (max-width: 576px) {
    #services .service-banner {
        margin-bottom: 1.6rem;
    }

    #services .service-banner img {
        height: 260px;
        object-fit: cover;
    }

    #services .service-boxes {
        padding: 0;
        top: 0;
    }

    #services .service-box {
        padding-top: 3.5rem;
    }

    #about-us .about-box,
    #banner .contact-box {
        padding: 1.2rem;
    }
}