/* GENERAL */
body{
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    font-family:'ubuntu',sans-serif;
    background-color: #f2f2f2;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab',serif;
}

html {
    scroll-behavior: smooth;
}


/* HERO */

/* .hero{
/* background:#1e88e5; *
color:midnightblue;
text-align:center;
padding:60px 20px;
}

.hero h1{
margin:0;
font-size:38px;
} */

/* SEARCH BAR */

/* .search-container{

max-width:600px;
margin:30px auto;
position:relative;

}

.search-container input{

width:100%;
padding:14px 45px 14px 15px;

border-radius:30px;

border:1px solid #ddd;

font-size:16px;

box-shadow:0 4px 10px rgba(0,0,0,0.08);

}

.search-container i{

position:absolute;

right:15px;

top:50%;

transform:translateY(-50%);

color:#1e88e5;

font-size:18px;

} */

/* Search bar 2 */

/* ===== SEARCH CONTAINER ===== */


/* .search-container{
    position:absolute;
    top:20px;
    right:40px;

    width:260px;              /* smaller, compact *
}

/* input field *
.search-container input{
    width:100%;
    padding:10px 38px 10px 12px;

    border-radius:25px;
    border:1px solid #ddd;

    font-size:13px;
    outline:none;

    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);

    transition:0.3s ease;
}

/* focus effect *
.search-container input:focus{
    border-color:#1e88e5;
    box-shadow:0 6px 18px rgba(30,136,229,0.25);
}

/* icon *
.search-container i{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:15px;
    color:#1e88e5;
    cursor:pointer;
    transition:0.3s ease;
}

.search-container:hover i{
    color:#0d47a1;
    transform:translateY(-50%) scale(1.1);
} */

/* =========================================
   SEARCH BAR (DESKTOP - CENTERED)
========================================= *

/* .search-container{
    width:260px;

    /* center it *
    margin:20px auto;
    position:relative;
}

/* input field *
.search-container input{
    width:100%;
    padding:10px 38px 10px 12px;

    border-radius:25px;
    border:1px solid #ddd;

    font-size:13px;
    outline:none;

    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);

    transition:0.3s ease;
}

/* focus effect *
.search-container input:focus{
    border-color:#1e88e5;
    box-shadow:0 6px 18px rgba(30,136,229,0.25);
}

/* icon *
.search-container i{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:15px;
    color:#1e88e5;
    cursor:pointer;
    transition:0.3s ease;
}

/* icon hover *
.search-container:hover i{
    color:#0d47a1;
    transform:translateY(-50%) scale(1.1);
}

/* =========================================
   TABLETS
========================================= *

@media (max-width: 991px){
    .search-container{
        width:220px;
        top:15px;
        right:20px;
    }

    .search-container input{
        font-size:13px;
        padding:9px 36px 9px 12px;
    }
}


/* =========================================
   SMALL DEVICES (CENTERED)
========================================= *

@media (max-width: 768px){
    .search-container{
        position:relative;
        top:auto;
        right:auto;

        width:80%;
        max-width:320px;
        margin:20px auto;
    }

    .search-container input{
        font-size:14px;
        padding:11px 40px 11px 12px;
    }
}


/* =========================================
   VERY SMALL PHONES
========================================= *

@media (max-width: 480px){
    .search-container{
        width:90%;
    }

    .search-container input{
        font-size:13px;
        padding:10px 38px 10px 10px;
    }

    .search-container i{
        font-size:14px;
    }
} */


/* =========================================
   GLOBAL SECTION
========================================= */

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

.health-education{
    padding:70px 18px;

    background:
        radial-gradient(circle at top left,
        rgba(30,136,229,0.07),
        transparent 30%),

        radial-gradient(circle at bottom right,
        rgba(0,191,165,0.07),
        transparent 30%),

        #f4f7fb;
}

/* =========================================
   INTRO
========================================= */

.education-intro{
    text-align:center;
    margin-bottom:45px;
}

.section-badge{
    display:inline-block;

    padding:8px 16px;

    background:#e3f2fd;
    color:#1565c0;

    border-radius:30px;

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

    margin-bottom:15px;
}

.education-intro h2{
    font-size:clamp(1.9rem,4vw,2.7rem);

    color:#0f172a;
    margin-bottom:14px;
}

.education-intro p{
    color:#64748b;
    font-size:15px;
}

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

/* REplaced */

/* .health-grid{
    max-width:1300px;
    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:18px;
} */

.health-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(210px,1fr));

    gap:18px;
}

/* =========================================
   CARD
========================================= */
.flip-card{
    perspective:1200px;
    height:290px;

    transition:transform .3s ease;
}

.flip-card:hover{
    transform:translateY(-6px);
}

.flip-inner{
    position:relative;

    width:100%;
    height:100%;

    transition:transform .75s cubic-bezier(.4,.2,.2,1);

    transform-style:preserve-3d;

    will-change:transform;
}

.flip-card.active .flip-inner{
    transform:rotateY(180deg);
}

/* FRONT + BACK */

.flip-front,
.flip-back{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border-radius:22px;

    padding:20px;

    display:flex;
    flex-direction:column;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    transform-style:preserve-3d;

    overflow:hidden;
}

/* FRONT */

.flip-front{
    background:rgba(255,255,255,0.82);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.5);

    text-align:center;
    justify-content:center;

    z-index:2;
}

/* BACK */

.flip-back{
    transform:rotateY(180deg);

    background:
        linear-gradient(
            135deg,
            #071b2a,
            #0a6c5e
        );

    color:white;

    overflow-y:auto;
}

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

.icon-box{
    width:52px;
    height:52px;

    margin:0 auto 16px;

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

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #1e88e5,
            #00bfa5
        );

    color:white;
    font-size:18px;

    box-shadow:
        0 6px 18px rgba(30,136,229,0.25);
}

/* =========================================
   FRONT TEXT
========================================= */

.flip-front h3{
    margin-bottom:10px;

    color:#0f172a;
    font-size:1.1rem;
}

.flip-front p{
    color:#64748b;

    font-size:13px;
    line-height:1.7;

    margin-bottom:20px;
}

/* =========================================
   BACK TEXT
========================================= */

.flip-back h4{
    margin-bottom:8px;
    margin-top:5px;

    font-size:15px;
}

.flip-back ul{
    padding-left:18px;
    margin-bottom:14px;
}

.flip-back li{
    margin-bottom:6px;

    font-size:13px;
    color:rgba(255,255,255,0.88);
}

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

.flip-btn{
    margin-top:auto;

    border:none;

    background:#1e88e5;
    color:white;

    padding:11px 14px;

    border-radius:14px;

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

    cursor:pointer;

    transition:.3s ease;
}

.flip-btn:hover{
    background:#1565c0;
}

.close-btn{
    background:white;
    color:#0a6c5e;
}

.close-btn:hover{
    background:#f1f5f9;
}

/* =========================================
   SCROLLBAR
========================================= */

.flip-back::-webkit-scrollbar{
    width:4px;
}

.flip-back::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.3);
    border-radius:10px;
}

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

@media(max-width:600px){

    .health-grid{
        grid-template-columns:
        repeat(auto-fit,minmax(170px,1fr));

        gap:14px;
    }

    .flip-card{
        height:280px;
    }

    .flip-front,
    .flip-back{
        padding:18px;
    }

    .education-intro h2{
        font-size:1.8rem;
    }
}

/* =========================================
   LAYOUT
========================================= */

.education-layout{
    max-width:1350px;
    margin:auto;

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

    gap:24px;
    align-items:start;
}

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

.health-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    gap:8px;

    margin-bottom:18px;
}

.health-tags span{
    padding:6px 10px;

    border-radius:30px;

    background:#eef6ff;

    color:#1565c0;

    font-size:11px;
    font-weight:600;
}

/* =========================================
   SIDEBAR
========================================= */

.education-sidebar{
    position:sticky;
    top:20px;

    display:flex;
    flex-direction:column;

    gap:18px;
}

/* SIDEBAR CARD */

.sidebar-card{
    background:rgba(255,255,255,0.82);

    backdrop-filter:blur(10px);

    border-radius:22px;

    padding:22px;

    box-shadow:
        0 8px 22px rgba(15,23,42,0.06);
}

.sidebar-card h3,
.sidebar-card h4{
    margin-top:0;

    color:#0f172a;
}

.sidebar-card p{
    color:#64748b;

    font-size:14px;
    line-height:1.7;
}

/* BUTTON */

.sidebar-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-top:18px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #1e88e5,
            #00bfa5
        );

    color:white;

    padding:12px;

    border-radius:14px;

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

    transition:.3s ease;
}

.sidebar-btn:hover{
    transform:translateY(-3px);
}

/* REMINDER */

.reminder-card{
    background:
        linear-gradient(
            135deg,
            #071b2a,
            #0a6c5e
        );

    color:white;
}

.reminder-card p{
    color:rgba(255,255,255,0.82);
}

/* QUICK TOPICS */

.topic-tags{
    display:flex;
    flex-wrap:wrap;

    gap:10px;
}

.topic-tags a{
    text-decoration:none;

    background:#f1f5f9;

    padding:8px 12px;

    border-radius:30px;

    font-size:12px;
    color:#334155;

    transition:.3s ease;
}

.topic-tags a:hover{
    background:#1e88e5;
    color:white;

    transform:translateY(-2px);
}

/* =========================================
   TARGET GLOW EFFECT
========================================= */

.flip-card:target{
    animation:cardGlow 1.4s ease;
}

@keyframes cardGlow{

    0%{
        transform:translateY(0);
        filter:drop-shadow(0 0 0 rgba(30,136,229,0));
    }

    30%{
        transform:translateY(-6px);
        filter:drop-shadow(0 0 18px rgba(30,136,229,0.45));
    }

    60%{
        transform:translateY(-3px);
        filter:drop-shadow(0 0 28px rgba(0,191,165,0.35));
    }

    100%{
        transform:translateY(0);
        filter:drop-shadow(0 0 0 rgba(30,136,229,0));
    }
}
/* .flip-card:target .flip-front{
    animation:highlightCard 1.2s ease;
}

@keyframes highlightCard{

    0%{
        box-shadow:
        0 0 0 rgba(30,136,229,0);
    }

    50%{
        box-shadow:
        0 0 30px rgba(30,136,229,0.35);
    }

    100%{
        box-shadow:
        0 8px 22px rgba(15,23,42,0.08);
    }
} */

@media(max-width:1000px){

    .education-layout{
        grid-template-columns:1fr;
    }

    .education-sidebar{
        position:relative;
        top:0;
    }
}

@media(max-width:600px){

    .health-grid{
        grid-template-columns:
        repeat(auto-fit,minmax(170px,1fr));
    }

    .flip-card{
        height:280px;
    }

    .education-intro h2{
        font-size:1.8rem;
    }
}

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

@media(max-width:1000px){

    .education-layout{
        grid-template-columns:1fr;
    }

    .education-sidebar{
        position:relative;
        top:0;
    }
}

@media(max-width:700px){

    .education-main{
        grid-template-columns:1fr;
    }

    .health-card{
        padding:24px;
    }

    .education-intro{
        margin-bottom:45px;
    }

    .quick-help,
    .health-notice{
        border-radius:24px;
    }
}