/* =========================================================
   ULIP INSURANCE PAGE
   CLEAN CSS
   ========================================================= */

/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --navy: #102c4e;
    --navy-dark: #0b2340;

    --blue: #2474ee;
    --blue-light: #edf5ff;
    --blue-border: #d9e8ff;

    --orange: #ff7a00;
    --orange-light: #ff9138;

    --text: #183b60;
    --muted: #58708d;

    --white: #ffffff;
    --soft: #f5f9ff;

    --border: #e1e9f3;

    /*
       IMPORTANT:
       Same side gap for hero + all sections
    */
    --page-gap: 95px;

    --section-y: 85px;

    --shadow: 0 10px 30px rgba(20, 55, 90, 0.08);
}


/* =========================================================
   2. RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: "Poppins", "Segoe UI", Arial, sans-serif;

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

    line-height: 1.7;

    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}





/* =========================================================
   4. COMMON CONTAINER
   ========================================================= */

/*
   IMPORTANT:
   No max-width restriction here.

   This makes the left/right gap the SAME
   as the hero section.
*/

.container {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    padding-left: var(--page-gap);
    padding-right: var(--page-gap);
}


/* =========================================================
   5. COMMON SECTIONS
   ========================================================= */

.content-section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}


.soft-section {
    background: var(--soft);
}


/* =========================================================
   6. SECTION HEADINGS
   ========================================================= */

.section-heading {
    margin-bottom: 45px;
}


.section-heading.centered {
    text-align: center;
}


.section-heading h2 {
    margin: 12px 0 0;

    color: #101d2d;

    font-size:
        clamp(31px, 3vw, 48px);

    line-height: 1.18;

    letter-spacing: -1.1px;

    font-weight: 750;
}


.section-heading p {
    margin: 18px 0 0;

    font-size: 17px;

    color: var(--muted);
}


/* TAG */

.section-tag,
.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    border-radius: 999px;

    background: var(--blue-light);

    border: 1px solid var(--blue-border);

    color: var(--blue);

    font-size: 13px;

    line-height: 1;

    font-weight: 700;

    padding: 11px 16px;
}


/* =========================================================
   7. NORMAL TEXT
   ========================================================= */

.text-content {
    width: 100%;
}


.text-content p {
    margin: 0 0 25px;

    font-size: 17px;

    color: var(--text);

    line-height: 1.75;
}


.text-content p:last-child {
    margin-bottom: 0;
}


.centered-text {
    text-align: center;

    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;
}


.closing-line {
    margin: 30px 0 0;

    font-size: 17px;

    color: var(--text);
}


/* =========================================================
   8. ULIP HERO
   ========================================================= */

.ulip-hero {
    position: relative;

    min-height: 700px;

    background:
        linear-gradient(
            110deg,
            #f4f9ff 0%,
            #eef6ff 52%,
            #f9fbff 100%
        );

    overflow: hidden;
}


/*
   SAME SIDE GAP AS ALL OTHER SECTIONS
*/

.hero-inner {
    width: 100%;
    max-width: none;

    min-height: 700px;

    margin: 0;

    padding-left: var(--page-gap);
    padding-right: var(--page-gap);

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, 0.95fr);

    align-items: center;

    gap: 45px;
}


/* HERO TEXT */

.hero-copy {
    position: relative;

    z-index: 2;

    padding: 40px 0;
}


.hero-copy h1 {
    max-width: 800px;

    margin:
        27px 0 25px;

    color: var(--navy);

    font-size:
        clamp(39px, 4.25vw, 67px);

    line-height: 1.13;

    letter-spacing: -2px;

    font-weight: 800;
}


.hero-copy h1 span {
    color: var(--blue);
}


.hero-usp {
    max-width: 760px;

    margin: 0 0 34px;

    color: #294b6e;

    font-size:
        clamp(16px, 1.35vw, 20px);

    line-height: 1.7;
}


/* HERO BUTTON */

.primary-btn {
    display: inline-flex;

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

    min-height: 56px;

    padding: 0 30px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--orange-light)
        );

    color: #ffffff !important;

    font-weight: 700;

    box-shadow:
        0 12px 25px rgba(255, 122, 0, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


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

    box-shadow:
        0 15px 30px rgba(255, 122, 0, 0.25);
}


/* =========================================================
   9. HERO IMAGE
   ========================================================= */

.hero-visual {
    position: relative;

    min-height: 600px;

    display: flex;

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


/*
   PERFECT ROUND BLUE HALO

   Same width + height because of aspect-ratio.
*/

.hero-image-halo {
    position: absolute;

    width: min(540px, 88%);

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    background: #e2efff;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}


/*
   PERFECT ROUND WHITE FRAME
*/

.hero-image-frame {
    position: relative;

    z-index: 2;

    width: min(500px, 82%);

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    padding: 10px;

    background: #ffffff;

    box-shadow:
        0 25px 55px
        rgba(33, 76, 120, 0.14);

    overflow: hidden;
}


.hero-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


/* =========================================================
   10. WHY ULIP / REASON CARDS
   ========================================================= */

.reason-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


.reason-card {
    position: relative;

    padding:
        30px 31px 30px 62px;

    background: #ffffff;

    border: 1px solid var(--blue-border);

    border-left:
        4px solid #3c83f7;

    border-radius: 20px;

    box-shadow: var(--shadow);
}


.card-number {
    position: absolute;

    left: 25px;
    top: 31px;

    font-size: 12px;

    font-weight: 800;

    color: var(--blue);
}


.reason-card h3,
.step-row h3,
.feature-card h3,
.person-card h3,
.safe-list h3 {
    margin: 0 0 9px;

    color: #10253f;

    font-size: 19px;

    line-height: 1.3;
}


.reason-card p,
.step-row p,
.feature-card p,
.person-card p,
.safe-list p {
    margin: 0;

    color: var(--muted);

    font-size: 15.5px;

    line-height: 1.7;
}


/* =========================================================
   11. STEPS
   ========================================================= */

.steps-list {
    display: grid;

    gap: 16px;
}


.step-row {
    display: grid;

    grid-template-columns:
        60px 1fr;

    gap: 25px;

    padding:
        28px 30px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 7px 24px
        rgba(20, 55, 90, 0.045);
}


.step-number,
.benefit-number {
    color: var(--blue);

    font-size: 13px;

    font-weight: 800;
}


/* =========================================================
   12. BENEFITS
   ========================================================= */

.benefit-list {
    display: grid;

    gap: 12px;
}


.benefit-row {
    display: grid;

    grid-template-columns:
        55px
        minmax(250px, 0.55fr)
        1fr;

    align-items: center;

    gap: 25px;

    padding:
        22px 27px;

    min-height: 92px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 9px 28px
        rgba(20, 55, 90, 0.07);
}


.benefit-row h3 {
    margin: 0;

    color: #173b62;

    font-size: 21px;

    line-height: 1.25;
}


.benefit-row p {
    margin: 0;

    color: var(--text);

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================================
   13. KEY FEATURES
   ========================================================= */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.feature-card {
    padding:
        28px 30px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 7px 25px
        rgba(20, 55, 90, 0.045);
}


.feature-card > span {
    display: block;

    margin-bottom: 12px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 800;
}


/* =========================================================
   14. WHO SHOULD BUY
   ========================================================= */

.people-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


.person-card {
    padding:
        27px 27px 28px;

    background: #ffffff;

    border:
        1px solid var(--blue-border);

    border-left:
        4px solid #3c83f7;

    border-radius: 18px;

    box-shadow: var(--shadow);
}


/*
   LAST BOX FULL WIDTH
*/

.person-card.full-width {
    grid-column: 1 / -1;
}


/* =========================================================
   15. CTA
   ========================================================= */

.cta-section {
    padding:
        90px var(--page-gap);

    background:
        linear-gradient(
            135deg,
            #0d2d50,
            #153f6b
        );

    color: #ffffff;

    text-align: center;
}


.cta-inner {
    display: flex;

    flex-direction: column;

    align-items: center;
}


.cta-section .section-tag {
    background:
        rgba(255, 255, 255, 0.1);

    border-color:
        rgba(255, 255, 255, 0.18);

    color: #ffffff;
}


.cta-section h2 {
    max-width: 900px;

    margin:
        18px auto;

    font-size:
        clamp(34px, 4vw, 57px);

    line-height: 1.12;

    letter-spacing: -1.3px;
}


.cta-section p {
    max-width: 850px;

    margin:
        0 auto 30px;

    color: #dcecff;

    font-size: 17px;
}


/* =========================================================
   16. FREE ILLUSTRATION
   ========================================================= */

.safe-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin-top: 40px;
}


.safe-list article {
    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 15px;

    padding: 23px;

    border:
        1px solid var(--border);

    border-radius: 16px;

    background: #ffffff;
}


.safe-list article > span {
    color: var(--blue);

    font-weight: 800;

    font-size: 12px;
}


.illustration-cta {
    text-align: center;

    margin-top: 40px;
}


.illustration-cta p {
    max-width: 800px;

    margin:
        20px auto 0;

    color: var(--muted);
}


.risk-note {
    margin:
        30px auto 0;

    text-align: center;

    color: #6a7d91;

    font-size: 13px;
}


/* =========================================================
   17. FAQ
   ========================================================= */

.faq-list {
    display: grid;

    gap: 10px;
}


.faq-list details {
    background: #ffffff;

    border:
        1px solid var(--border);

    border-radius: 13px;

    padding:
        0 20px;
}


.faq-list summary {
    cursor: pointer;

    padding:
        18px 3px;

    color: #132e4d;

    font-weight: 600;

    font-size: 15.5px;
}


.faq-list p {
    margin: 0;

    padding:
        0 3px 19px;

    color: var(--muted);

    font-size: 15px;
}


/* =========================================================
   18. DISCLAIMER
   ========================================================= */

.disclaimer {
    margin-top: 40px;

    padding-top: 25px;

    border-top:
        1px solid var(--border);
}


.disclaimer p {
    margin: 7px 0;

    color: #718298;

    font-size: 12px;

    line-height: 1.65;
}


/* =========================================================
   19. FOOTER
   ========================================================= */

.site-footer {
    background: #0b2340;

    color: #dcecff;
}


.footer-inner {
    padding:
        25px var(--page-gap);

    text-align: center;
}


.footer-inner p {
    margin: 0;

    font-size: 13px;
}


/* =========================================================
   20. LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    :root {
        --page-gap: 55px;
    }


    .main-nav {
        gap: 27px;
    }


    .hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.85fr);

        gap: 30px;
    }


    .hero-copy h1 {
        font-size:
            clamp(39px, 4.4vw, 57px);
    }


    .benefit-row {
        grid-template-columns:
            45px
            minmax(210px, 0.65fr)
            1fr;
    }
}


/* =========================================================
   21. TABLET
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --page-gap: 35px;
        --section-y: 70px;
    }


    /* NAVBAR */

    .site-header {
        height: 78px;
    }


    .header-inner {
        padding-left: var(--page-gap);
        padding-right: var(--page-gap);
    }


    .brand img {
        width: 64px;
    }


    .mobile-menu-btn {
        display: block;
    }


    .main-nav {
        display: none;

        position: absolute;

        top: 78px;

        left: 0;
        right: 0;

        padding:
            18px var(--page-gap) 25px;

        background: #ffffff;

        box-shadow:
            0 15px 25px
            rgba(15, 40, 70, 0.08);

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }


    .main-nav.mobile-open {
        display: flex;
    }


    .main-nav > a,
    .nav-dropdown > a {
        display: block;

        padding:
            13px 0;
    }


    .nav-dropdown {
        width: 100%;
    }


    .dropdown-menu {
        position: static;

        transform: none !important;

        display: none;

        opacity: 1;
        visibility: visible;

        box-shadow: none;

        border: 0;

        padding:
            0 0 7px 15px;
    }


    .nav-dropdown:hover .dropdown-menu {
        display: block;

        transform: none;
    }


    .header-cta {
        text-align: center;

        margin-top: 8px;
    }


    /* HERO */

    .hero-inner {
        min-height: auto;

        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 55px;
        padding-bottom: 65px;
    }


    .hero-copy {
        padding: 0;
    }


    .hero-copy h1,
    .hero-usp {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-visual {
        min-height: 470px;
    }


    .hero-image-frame {
        width:
            min(410px, 70vw);
    }


    .hero-image-halo {
        width:
            min(470px, 78vw);
    }


    /* GRIDS */

    .reason-grid,
    .feature-grid,
    .people-grid,
    .safe-list {
        grid-template-columns: 1fr;
    }


    .person-card.full-width {
        grid-column: auto;
    }


    /* BENEFITS */

    .benefit-row {
        grid-template-columns:
            45px 1fr;
    }


    .benefit-row p {
        grid-column: 2;
    }
}


/* =========================================================
   22. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --page-gap: 20px;
        --section-y: 60px;
    }


    /* NAVBAR */

    .site-header {
        height: 72px;
    }


    .header-inner {
        padding-left: 20px;
        padding-right: 20px;
    }


    .brand img {
        width: 58px;
    }


    .main-nav {
        top: 72px;

        padding-left: 20px;
        padding-right: 20px;
    }


    /* HERO */

    .ulip-hero {
        min-height: auto;
    }


    .hero-inner {
        padding-left: 20px;
        padding-right: 20px;

        padding-top: 38px;
        padding-bottom: 45px;
    }


    .hero-copy h1 {
        margin-top: 20px;

        font-size:
            clamp(34px, 9vw, 44px);

        line-height: 1.14;

        letter-spacing: -1.2px;
    }


    .hero-usp {
        font-size: 15px;

        line-height: 1.65;
    }


    .primary-btn {
        width: 100%;

        max-width: 340px;

        padding-left: 18px;
        padding-right: 18px;

        font-size: 14px;
    }


    .hero-visual {
        min-height: 350px;
    }


    .hero-image-frame {
        width:
            min(330px, 82vw);
    }


    .hero-image-halo {
        width:
            min(370px, 92vw);
    }


    /* HEADINGS */

    .section-heading {
        margin-bottom: 35px;
    }


    .section-heading h2 {
        font-size: 31px;

        letter-spacing: -0.7px;
    }


    .section-heading p {
        font-size: 15px;
    }


    /* TEXT */

    .text-content p {
        font-size: 15px;

        line-height: 1.7;

        margin-bottom: 21px;
    }


    /* REASON CARDS */

    .reason-card {
        padding:
            24px 20px 24px 50px;
    }


    .card-number {
        left: 18px;
        top: 26px;
    }


    .reason-card h3,
    .step-row h3,
    .feature-card h3,
    .person-card h3,
    .safe-list h3 {
        font-size: 18px;
    }


    .reason-card p,
    .step-row p,
    .feature-card p,
    .person-card p,
    .safe-list p {
        font-size: 14px;
    }


    /* STEPS */

    .step-row {
        grid-template-columns:
            40px 1fr;

        gap: 13px;

        padding:
            21px 18px;
    }


    /* BENEFITS */

    .benefit-row {
        grid-template-columns:
            35px 1fr;

        gap: 13px;

        padding:
            20px 18px;

        border-radius: 17px;
    }


    .benefit-row p {
        grid-column: 2;
    }


    .benefit-row h3 {
        font-size: 18px;
    }


    /* FEATURE / PEOPLE */

    .feature-card,
    .person-card {
        padding:
            22px 19px;
    }


    /* SAFE LIST */

    .safe-list article {
        padding: 19px;
    }


    /* CTA */

    .cta-section {
        padding-left: 20px;
        padding-right: 20px;
    }


    .cta-section h2 {
        font-size: 34px;
    }


    .cta-section p {
        font-size: 15px;
    }


    /* FAQ */

    .faq-list summary {
        font-size: 14px;

        line-height: 1.55;
    }


    .faq-list p {
        font-size: 14px;
    }
}


/* =========================================================
   23. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .hero-copy h1 {
        font-size: 32px;
    }


    .section-heading h2 {
        font-size: 28px;
    }


    .hero-image-frame {
        width: 285px;
    }


    .hero-image-halo {
        width: 320px;
    }


    .hero-visual {
        min-height: 315px;
    }
}

/* FIX INSURANCE PLANS DROPDOWN */
.custom-navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    display: block;
}