/* GOOGLE FONT */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{
    background:#07111f;
    color:white;
    overflow-x:hidden;
}

/* =========================
   LOADER
========================= */

#loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#07111f;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.loader-content{
    text-align:center;
}

.loader-content h1{
    color:#d4af37;
    margin-bottom:20px;
    letter-spacing:2px;
}

.spinner{
    width:70px;
    height:70px;
    border:4px solid rgba(255,255,255,.1);
    border-top:4px solid #d4af37;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    100%{
        transform:rotate(360deg);
    }
}

/* =========================
   HERO
========================= */

.hero{
    height:100vh;

    background:url("../images/teacher.jpg");

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

    position:relative;
}

.overlay{
    width:100%;
    height:100%;

    background:rgba(0,0,0,.60);

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

    text-align:center;
    padding:20px;
}

.profile-pic{

    width:220px;
    height:220px;

    border-radius:50%;
    object-fit:cover;

    border:5px solid #d4af37;

    margin-bottom:25px;

    box-shadow:0 0 40px rgba(212,175,55,.4);
}

#typing{

    color:#d4af37;

    font-size:4.5rem;

    font-weight:700;

    border-right:4px solid #d4af37;

    padding-right:10px;

    margin-bottom:15px;
}

.hero h3{

    font-size:1.5rem;

    margin-bottom:15px;
}

.hero p{

    max-width:700px;

    line-height:1.8;

    font-size:1.1rem;
}

/* =========================
   BUTTONS
========================= */

.buttons{
    margin-top:30px;
}

.btn{

    display:inline-block;

    padding:12px 28px;

    margin:10px;

    background:#d4af37;

    color:#07111f;

    text-decoration:none;

    border:none;

    border-radius:50px;

    font-weight:600;

    cursor:pointer;

    transition:.4s;
}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(212,175,55,.3);
}

/* =========================
   SOCIAL
========================= */

.social{
    margin-top:30px;
}

.social a{

    color:white;

    font-size:28px;

    margin:0 15px;

    transition:.4s;
}

.social a:hover{

    color:#d4af37;

    transform:translateY(-5px);
}

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

.section{

    padding:100px 10%;

    text-align:center;
}

.section h2{

    font-size:3rem;

    color:#d4af37;

    margin-bottom:40px;
}

/* =========================
   GLASS EFFECT
========================= */

.glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:25px;

    padding:30px;

    box-shadow:0 8px 32px rgba(0,0,0,.3);

    transition:.4s;
}

.glass:hover{

    transform:translateY(-8px);
}

.card{

    max-width:900px;

    margin:auto;

    line-height:1.8;
}

/* =========================
   COUNTERS
========================= */

.counter-container{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;
}

.counter-card{

    width:230px;
}

.counter{

    font-size:3rem;

    color:#d4af37;
}

/* =========================
   TIMELINE
========================= */

.timeline{

    max-width:800px;

    margin:20px auto;
}

.timeline h3{

    color:#d4af37;

    margin-bottom:10px;
}

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

.education-grid{

    display:grid;

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

    gap:25px;
}

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

.paper-grid{

    display:grid;

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

    gap:30px;
}

.paper-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:15px;

    margin-bottom:15px;
}

.paper-card h3{

    color:#d4af37;

    margin-bottom:10px;
}

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

.qr-container{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:40px;
}

.qr-container img{

    width:150px;
    height:150px;

    background:white;

    padding:10px;

    border-radius:15px;
}

.qr-container p{

    margin-top:10px;
}

/* =========================
   MODAL
========================= */

.modal{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.85);

    z-index:99999;
}

.modal-content{

    width:80%;

    max-width:800px;

    background:#0f1d33;

    margin:5% auto;

    padding:40px;

    border-radius:25px;

    text-align:center;
}

.modal-content h2{

    color:#d4af37;

    margin-bottom:20px;
}

.modal-content p{

    line-height:1.8;

    margin-bottom:20px;
}

.close{

    float:right;

    font-size:40px;

    cursor:pointer;
}

/* =========================
   FADE ANIMATION
========================= */

.fade-section{

    opacity:0;

    transform:translateY(100px);

    transition:1.2s ease;
}

.fade-section.active{

    opacity:1;

    transform:translateY(0);
}

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

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#07111f;
}

::-webkit-scrollbar-thumb{

    background:#d4af37;

    border-radius:10px;
}

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

@media(max-width:768px){

    #typing{

        font-size:2.5rem;
    }

    .hero h3{

        font-size:1rem;
    }

    .section h2{

        font-size:2rem;
    }

    .profile-pic{

        width:160px;
        height:160px;
    }

    .modal-content{

        width:95%;
    }
}
video{

    border-radius:15px;

    margin-bottom:15px;

    width:100%;

    box-shadow:
    0 10px 30px rgba(0,0,0,.4);
}
.modal-teacher{

    width:120px;

    height:120px;

    border-radius:50%;

    border:4px solid #d4af37;

    object-fit:cover;

    margin:20px auto;
}