/* ===== RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --bg:#f8fafc;
    --text:#0f172a;
    --subtext:#64748b;
    --glass:rgba(255,255,255,0.6);
}

/* ===== BODY ===== */
body{
    background:linear-gradient(135deg,#eef2ff,#f8fafc);
    color:var(--text);
}

/* ===== CONTAINER ===== */
.container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* ===== NAVBAR ===== */
.navbar{
    position:sticky;
    top:0;
    backdrop-filter:blur(12px);
    background:rgba(255,255,255,0.7);
    border-bottom:1px solid rgba(255,255,255,0.2);
    z-index:1000;
}

.nav-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.logo a{
    font-weight:700;
    font-size:22px;
    color:var(--text);
    text-decoration:none;
}

.nav-links{
    display:flex;
    gap:25px;
    list-style:none;
}

.nav-links a{
    text-decoration:none;
    color:var(--subtext);
    font-weight:500;
    position:relative;
}

.nav-links a::after{
    content:"";
    position:absolute;
    bottom:-5px;
    left:0;
    width:0%;
    height:2px;
    background:var(--primary);
    transition:0.3s;
}

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

/* BUTTON */
.btn-primary{
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
    padding:10px 22px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 10px 20px rgba(37,99,235,0.25);
    transition:0.3s;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 25px rgba(37,99,235,0.35);
}

/* ===== HERO ===== */
.hero{
    padding:120px 0;
    position:relative;
    overflow:hidden;
}

.hero{
    display:flex;
    align-items:center;     /* vertical center */
    justify-content:center; /* horizontal center */
}

.hero-overlay{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-overlay h1{
    font-size:58px;
    font-weight:700;
    line-height:1.1;
}

.hero-overlay span{
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-overlay p{
    margin:20px 0;
    color:#fff;
    font-size:18px;
}

/* HERO BG */
.hero-bg img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0.25;
    filter:blur(2px);
}

/* ===== BUTTONS ===== */
.btn{
    padding:12px 25px;
    border-radius:12px;
    font-weight:600;
    text-decoration:none;
}

.btn-secondary{
    background:#0dcaf0;
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.3);
}

/* ===== SEARCH ===== */
.search-section{
    margin-top:-50px;
}

.search-box{
    background:var(--glass);
    backdrop-filter:blur(12px);
    padding:20px;
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
    display:flex;
    gap:10px;
    justify-content:center;
}

/* ===== FEATURES ===== */
.features{
    padding:90px 20px;
    text-align:center;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
    margin-top:40px;
}

.feature-card{
    background:var(--glass);
    backdrop-filter:blur(12px);
    padding:30px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.2);
    transition:0.3s;
}

.feature-card:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

/* ===== SUBJECT ===== */
.subject-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
    margin-top:30px;
}

.subject{
    background:var(--glass);
    backdrop-filter:blur(10px);
    padding:15px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.2);
    font-weight:600;
    transition:0.3s;
}

.subject:hover{
    background:var(--primary);
    color:#fff;
}

/* ===== TUTORS ===== */
.tutor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:40px;
}

.tutor-card{
    background:var(--glass);
    backdrop-filter:blur(15px);
    padding:25px;
    border-radius:18px;
    text-align:center;
    border:1px solid rgba(255,255,255,0.2);
    transition:0.3s;
    position:relative;
}

.tutor-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,0.1);
}

/* RANK BADGE */
.rank-badge{
    position:absolute;
    top:12px;
    left:12px;
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
    color:#fff;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}
.tutor-card img{
    animation:floatImage 3s ease-in-out infinite;
}

/* ANIMATION */
@keyframes floatImage{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0px);
    }
}

.tutor-card img{
    width:85px;
    height:85px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:10px;
    border:3px solid white;
}

.rating{
    color:#fbbf24;
    margin:10px 0;
}

/* ===== CTA ===== */
.cta{
    margin:70px 20px;
    padding:60px;
    text-align:center;
    background:linear-gradient(135deg, #212529, #4f46e5);
    color:#fff;
    border-radius:20px;
    box-shadow:0 25px 50px rgba(37,99,235,0.3);
}

/* ===== FOOTER ===== */
footer{
    background:#0f172a;
    color:#cbd5f5;
    padding:40px 0;
    margin-top:50px;
}

footer p{
    color:#94a3b8;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){

.nav-links{
    flex-direction:column;
    gap:10px;
}

.hero-overlay h1{
    font-size:34px;
    text-align:center;
}

.hero-overlay{
    text-align:center;
}

.search-box{
    flex-direction:column;
}

}
/* ===== PRO MAX VARIABLES ===== */
:root{
    --primary:#2563eb;
    --secondary:#4f46e5;
    --accent:#22c55e;

    --bg-soft:#f8fafc;
    --glass:rgba(255,255,255,0.6);

    --shadow-soft:0 10px 30px rgba(0,0,0,0.08);
    --shadow-hover:0 25px 60px rgba(0,0,0,0.15);

    --radius:18px;
}

/* ===== GLOBAL SMOOTH ===== */
*{
    transition:all 0.25s ease;
}

html{
    scroll-behavior:smooth;
}

/* ===== FLOATING BACKGROUND EFFECT ===== */
body::before{
    content:"";
    position:fixed;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#2563eb33,transparent);
    top:-100px;
    left:-100px;
    z-index:-1;
    filter:blur(80px);
}

body::after{
    content:"";
    position:fixed;
    width:400px;
    height:400px;
    background:radial-gradient(circle,#4f46e533,transparent);
    bottom:-100px;
    right:-100px;
    z-index:-1;
    filter:blur(80px);
}

/* ===== NAVBAR ENHANCED ===== */
.navbar{
    backdrop-filter:blur(15px);
    background:rgba(255,255,255,0.65);
    box-shadow:var(--shadow-soft);
}

/* ===== BUTTON PRO EFFECT ===== */
.btn-primary{
    position:relative;
    overflow:hidden;
}

.btn-primary::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
    top:0;
    left:-100%;
    transition:0.5s;
}

.btn-primary:hover::after{
    left:100%;
}

/* ===== HERO ANIMATION ===== */
.hero-overlay{
    animation:fadeUp 1s ease;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===== SEARCH PRO ===== */
.search-box{
    border:1px solid rgba(255,255,255,0.3);
}

.search-box:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover);
}

/* ===== FEATURE CARDS PRO ===== */
.feature-card{
    position:relative;
    overflow:hidden;
}

.feature-card::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(120deg,transparent,#2563eb22,transparent);
    top:0;
    left:-100%;
}

.feature-card:hover::before{
    left:100%;
    transition:0.6s;
}

.feature-card:hover{
    box-shadow:var(--shadow-hover);
}

/* ===== SUBJECT HOVER GLOW ===== */
.subject:hover{
    box-shadow:0 10px 25px rgba(37,99,235,0.3);
}

/* ===== TUTOR CARD PRO ===== */
/* ========================= */
/* 🔥 FIX BIG TUTOR CARD */
/* ========================= */

.tutor-grid{
    display:flex;
    justify-content:center; /* center yung card */
}

.tutor-card{
    max-width:320px;   /* 🔥 liit ng box */
    width:100%;
    padding:20px;      /* bawas padding */
    border-radius:16px;
}

/* IMAGE */
.tutor-card img{
    width:70px;
    height:70px;
}

/* TEXT SPACING */
.tutor-card h3{
    font-size:18px;
    margin-top:8px;
}

.tutor-card p{
    font-size:14px;
    margin:4px 0;
}

/* BUTTON */
.tutor-card .btn-primary{
    padding:8px 16px;
    font-size:14px;
}

/* VERIFIED BADGE FIX */
.tutor-card div[style*="Verified"]{
    font-size:10px;
    padding:3px 8px;
}

/* ===== IMAGE HOVER ZOOM ===== */
.tutor-card img{
    transition:0.4s;
}

.tutor-card:hover img{
    transform:scale(1.1);
}

/* ===== CTA GLOW ===== */
.cta{
    position:relative;
    overflow:hidden;
}

.cta::before{
    content:"";
    position:absolute;
    width:200%;
    height:200%;
    background:radial-gradient(circle,rgba(255,255,255,0.2),transparent);
    top:-50%;
    left:-50%;
    animation:rotateGlow 6s linear infinite;
}

@keyframes rotateGlow{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* ===== SCROLL ANIMATION ===== */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:0.6s;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ===== INPUT PRO ===== */
input, select{
    padding:12px 15px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    outline:none;
}

input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,0.2);
}

/* ===== SCROLLBAR CUSTOM ===== */
::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(#2563eb,#4f46e5);
    border-radius:10px;
}
/* ========================= */
/* 🔥 REGISTER MODAL PRO UI */
/* ========================= */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.6);
    backdrop-filter:blur(8px);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.auth-container{
    width:100%;
    max-width:420px;
    padding:40px;
    border-radius:20px;

    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(20px);

    box-shadow:0 25px 60px rgba(0,0,0,0.2);

    text-align:center;
    position:relative;

    animation:modalPop 0.4s ease;
}

@keyframes modalPop{
    from{
        opacity:0;
        transform:scale(0.9) translateY(30px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.auth-container h2{
    font-size:26px;
    font-weight:700;
}

.subtitle{
    color:#64748b;
    margin-bottom:25px;
}

/* CLOSE BUTTON */
.close{
    position:absolute;
    top:12px;
    right:12px;
    border:none;
    background:#f1f5f9;
    width:35px;
    height:35px;
    border-radius:50%;
    cursor:pointer;
    font-size:16px;
}

.close:hover{
    background:#e2e8f0;
}

/* BUTTON */
.btn-main{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;

    background:linear-gradient(135deg,#2563eb,#4f46e5);
    color:#fff;
    font-weight:600;

    box-shadow:0 15px 30px rgba(37,99,235,0.3);
    cursor:pointer;
}

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

/* BLUR BACKGROUND */
.blur{
    filter:blur(6px);
    pointer-events:none;
}
/* VERIFIED BADGE ANIMATION */
.tutor-card div[style*="Verified"]{
    animation:pop 0.5s ease;
}

@keyframes pop{
    from{transform:scale(0);}
    to{transform:scale(1);}
}

/* CARD HOVER GLOW */
.tutor-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.1);
}
/* ================= SUBJECT PROFILE STYLE (FIXED) ================= */

.subject{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:25px;
    text-align:center;
}

/* 🔥 IMAGE BIG + CENTER */
.subject img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #fff;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    margin-bottom:12px;
    transition:0.3s;
}

/* 🔥 HOVER EFFECT */
.subject:hover img{
    transform:scale(1.1);
}

/* 🔥 TEXT */
.subject div{
    font-weight:600;
    font-size:15px;
}
.about-wrapper{
    max-width:1200px;
}

/* CARD */
.tutor-card{
    padding:35px;
    border-radius:20px;
    font-size:16px;
}

/* HEADINGS */
.tutor-card h3{
    font-size:24px;
    font-weight:700;
}

/* LIST */
.tutor-card li{
    margin-bottom:6px;
}
/* HERO */
.about-hero{
    background:#1e293b;
    color:#fff;
    padding:80px 20px;
}

.about-hero h1{
    font-size:40px;
    font-weight:700;
}

.about-hero p{
    color:#cbd5e1;
}

/* SECTION */
.about-section{
    padding:60px 0;
    background:#f8fafc;
}

/* CARD */
.about-card{
    background:#fff;
    padding:30px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    height:100%;
}

.about-card h3{
    font-weight:600;
    margin-bottom:15px;
}

/* TEAM */
.team-section{
    padding:60px 0;
}

.team-main{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #2563eb;
}

.team-member{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:10px;
}
/* ===== HERO VIDEO BACKGROUND FIX ===== */
.hero{
    position:relative;
    overflow:hidden;
}

/* VIDEO LAYER */
.video-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

.video-bg video{
    width:100%;
    height:100%;
    object-fit:cover;

    opacity:0.4;
    filter:blur(2px) brightness(0.7);

    animation:zoomVideo 20s ease-in-out infinite;
}

/* DARK OVERLAY */
.hero-overlay{
    position:relative;
    z-index:2;
}

/* OPTIONAL: IMAGE SA LIKOD (LOW PRIORITY) */
.hero-bg{
    position:absolute;
    inset:0;
    z-index:-1;
}

/* CINEMATIC ZOOM */
@keyframes zoomVideo{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.1); }
    100%{ transform:scale(1); }
}
/* ===== ABOUT HERO VIDEO ===== */
.about-hero{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    color:#fff;
}

/* VIDEO LAYER */
.about-hero .video-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

.about-hero .video-bg video{
    width:100%;
    height:100%;
    object-fit:cover;

    opacity:0.4;
    filter:blur(2px) brightness(0.6);

    animation:zoomVideo 20s ease-in-out infinite;
}

/* TEXT ABOVE VIDEO */
.about-hero .container{
    position:relative;
    z-index:2;
}

/* DARK OVERLAY */
.about-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0);
    z-index:1;
}

/* ZOOM EFFECT */
@keyframes zoomVideo{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.1); }
    100%{ transform:scale(1); }
}