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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    color:#ffffff;

    background:
        radial-gradient(circle at 50% 15%, rgba(20,125,135,.25), transparent 35%),
        linear-gradient(135deg,#031b21,#062f38 50%,#02171d);
}

/* MAIN PAGE */

.insurance-page{
    width:100%;
    height:100vh;

    padding:18px 30px;

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

 /* =========================================
    INSURANCE PAGE - PHOTO BACKGROUND
    ========================================= */

.insurance-page {
    position: relative;

    min-height: 100vh;

    background:
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.12)
        ),
        url("images/insurance-bg.jpg") center center / cover no-repeat;

    background-attachment: fixed;
}


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

@media (max-width: 768px) {

    .insurance-page {
        min-height: 100vh !important;

        height: auto !important;

        background:
            linear-gradient(
                135deg,
                rgba(0, 0, 0, 0.28),
                rgba(0, 0, 0, 0.10)
            ),
            url("images/insurance-bg.jpg") center center / cover no-repeat;

        background-attachment: scroll;
    }

}
/* ================= BRAND ================= */

.brand{
    text-align:center;
    margin-bottom:5px;
}

.brand-icon{
    display:none;
}

.brand h3{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(28px,3vw,42px);
    letter-spacing:3px;
    font-weight:600;
}

.brand p{
    margin-top:2px;
    color:#e9b83f;
    font-size:9px;
    letter-spacing:4px;
    text-transform:uppercase;
}


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

.hero-text{
    text-align:center;
    margin-bottom:15px;
}

.hero-text h1{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(36px,4vw,58px);
    font-weight:600;
    line-height:1;
}

.hero-text h1 span{
    color:#e9b83f;
}

.title-line{
    width:130px;
    height:1px;
    margin:8px auto 10px;

    background:linear-gradient(
        90deg,
        transparent,
        #e9b83f,
        transparent
    );
}

.consultant{
    color:#e9b83f;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(22px,2.2vw,30px);
}

.designation{
    font-size:12px;
    color:rgba(255,255,255,.72);
}

.sub-text{
    display:none;
}


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

.insurance-options{
    width:min(100%,950px);

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

    gap:30px;

    flex:1;

    align-items:center;

    margin-bottom:12px;
}

 .insurance-card{
    position:relative;

    height:min(48vh,410px);

    border:1px solid rgba(233,184,63,.75);
    border-radius:24px;

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

    text-align:center;

    padding:20px 28px;

    overflow:hidden;

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);

    transition:.3s ease;
}

/* Life Insurance photo */
.life-card{
    background-image:
        linear-gradient(
            180deg,
            rgba(3,35,40,.42),
            rgba(2,24,30,.82)
        ),
        url("images/life.jpg");
}

/* General Insurance photo */
.general-card{
    background-image:
        linear-gradient(
            180deg,
            rgba(3,35,40,.42),
            rgba(2,24,30,.82)
        ),
        url("images/general.jpg");
}

.insurance-card:hover{
    transform:translateY(-6px);
    border-color:#f7cf67;
}

.card-icon{
    color:#f1c451;
    font-size:clamp(42px,4vw,60px);
    margin-bottom:12px;
}

.card-title{
    font-size:clamp(22px,2vw,30px);
    font-weight:700;
    letter-spacing:1px;
}

.card-subtitle{
    color:#e9b83f;
    font-size:10px;
    letter-spacing:2px;
    margin-top:4px;
    text-transform:uppercase;
}

.card-divider{
    width:70px;
    height:1px;
    margin:12px auto;

    background:linear-gradient(
        90deg,
        transparent,
        #e9b83f,
        transparent
    );
}

.card-description{
    max-width:330px;
    color:rgba(255,255,255,.75);
    line-height:1.5;
    font-size:12px;
}

.enter-btn{
    margin-top:18px;

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

    min-width:170px;
    padding:11px 20px;

    background:linear-gradient(135deg,#f6d477,#d99f2b);

    color:#12343b;
    text-decoration:none;

    font-size:12px;
    font-weight:700;
    letter-spacing:1px;

    border-radius:8px;
}


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

.features{
    width:min(100%,950px);

    display:grid;
    grid-template-columns:repeat(3,1fr);

    border-top:1px solid rgba(233,184,63,.25);

    padding-top:10px;
}

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

    gap:10px;
    padding:5px 10px;
}

.feature:not(:last-child){
    border-right:1px solid rgba(233,184,63,.18);
}

.feature i{
    color:#e9b83f;
    font-size:22px;
}

.feature h4{
    font-size:10px;
    letter-spacing:.5px;
}

.feature p{
    font-size:9px;
    color:rgba(255,255,255,.55);
}


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

@media(max-width:768px){

    html,
    body{
        height:auto !important;
        min-height:100% !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    .insurance-page{
        height:auto !important;
        min-height:100vh !important;
        padding:18px 15px;
        overflow:visible !important;
    }

    .brand h3{
        font-size:30px;
    }

    .hero-text h1{
        font-size:38px;
    }

    /* Life → General: one landscape card below the other */
    .insurance-options{
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;

        width:100% !important;
        height:auto !important;

        gap:16px !important;

        align-items:stretch !important;

        overflow:visible !important;
    }

    .insurance-card{
        width:100% !important;
        min-width:0 !important;

        height:auto !important;
        min-height:190px !important;

        padding:18px 14px !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;

        text-align:left !important;

        overflow:hidden !important;
        box-sizing:border-box;
    }

    .life-card{
        background-image:
            linear-gradient(
                90deg,
                rgba(3,35,40,.93) 0%,
                rgba(3,35,40,.80) 48%,
                rgba(3,35,40,.38) 100%
            ),
            url("images/life.jpg") !important;
    }

    .general-card{
        background-image:
            linear-gradient(
                90deg,
                rgba(3,35,40,.93) 0%,
                rgba(3,35,40,.80) 48%,
                rgba(3,35,40,.38) 100%
            ),
            url("images/general.jpg") !important;
    }

    .insurance-card .card-icon{
        flex:0 0 65px !important;
        width:65px !important;
        height:65px !important;

        margin:0 15px 0 4px !important;

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

        font-size:34px !important;

        box-sizing:border-box;
    }

    .insurance-card .card-content{
        flex:1 !important;
        min-width:0 !important;
        width:auto !important;
        text-align:left !important;
    }

    .card-title{
        font-size:18px !important;
        line-height:1.2 !important;
    }

    .card-subtitle{
        font-size:8px !important;
        letter-spacing:1px !important;
    }

    .card-divider{
        margin:9px 0 !important;
    }

    .card-description{
        max-width:none !important;
        font-size:10px !important;
        line-height:1.5 !important;
    }

    .enter-btn{
        min-width:125px !important;
        padding:10px 12px !important;
        font-size:9px !important;
    }

    /* Keep the feature section below the cards */
    .features{
        display:grid !important;
        width:100% !important;
        height:auto !important;
        margin-top:8px;
        overflow:visible !important;
    }
}/* =========================================
   GENERAL INSURANCE - RED THEME
========================================= */

.general-card{
    border-color:rgba(220, 38, 38, .8);
}

.general-card:hover{
    border-color:#ff4d4d;
}

/* Icon */
.general-card .card-icon{
    color:#e53935;
}

/* Subtitle */
.general-card .card-subtitle{
    color:#e53935;
}

/* Divider */
.general-card .card-divider{
    background:linear-gradient(
        90deg,
        transparent,
        #e53935,
        transparent
    );
}

/* Button */
.general-card .enter-btn{
    background:linear-gradient(
        135deg,
        #ef5350,
        #b71c1c
    );

    color:#ffffff;
}
@media(max-width:768px){

    /* Final mobile scroll safety */
    html,
    body{
        height:auto !important;
        min-height:100% !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    .insurance-page{
        height:auto !important;
        min-height:100vh !important;
        overflow:visible !important;
    }

    .insurance-options{
        display:flex !important;
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        height:auto !important;
        overflow:visible !important;
    }

    .insurance-card{
        flex:none !important;
        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:190px !important;
        overflow:hidden !important;
    }

    .insurance-card .card-content{
        min-width:0 !important;
        flex:1 !important;
    }

    .features{
        height:auto !important;
        overflow:visible !important;
    }
}