css
/* ==========================================
        RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#1b1236;
    color:#fff;
    overflow-x:hidden;
}


/* ==========================================
        HEADER
========================================== */

header{
    width:100%;
    background:#5b2d90;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}


nav{
    width:92%;
    min-height:105px;
    margin:auto;

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

    position:relative;
}


/* ================= HEADER LOGO ================= */

.logo-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-box img{
    width:60px;
    height:60px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    border-radius:50%;
    padding:0;
}

/* ================= ACADEMY NAME ================= */

.academy-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.academy-name h1 {
    margin: 0;
}

.academy-name p {
    margin: 2px 0 0;
}


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



   @media (max-width: 768px) {

    .logo-box {
        gap: 8px;
    }

}
/* ==========================================
        HAMBURGER MENU
        LAPTOP + TABLET + MOBILE
========================================== */

.menu-toggle{

    width:55px;
    height:55px;

    border:none;

    border-radius:10px;

    background:#ff5da8;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    padding:0;

    flex-shrink:0;

    z-index:1100;

}


.menu-toggle span{

    width:30px;

    height:3px;

    background:#fff;

    border-radius:5px;

    transition:.3s;

}


/* Hamburger → X */

.menu-toggle.open span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}


.menu-toggle.open span:nth-child(2){

    opacity:0;

}


.menu-toggle.open span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}


/* ==========================================
        DROPDOWN MENU
========================================== */

#nav-menu{

    position:absolute;

    top:calc(100% + 8px);

    right:0;

    width:240px;

    display:none;

    flex-direction:column;

    list-style:none;

    gap:0;

    padding:10px;

    background:#5b2d90;

    border-radius:14px;

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

}


#nav-menu.active{

    display:flex;

}


#nav-menu li{

    width:100%;

}


#nav-menu li a{

    display:block;

    width:100%;

    padding:14px 18px;

    color:#fff;

    text-decoration:none;

    font-weight:500;

    border-radius:9px;

    transition:.25s;

}


#nav-menu li a:hover,
#nav-menu li a.active{

    background:#ff5da8;

    color:#fff;

}


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

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    background-image:url("teacher.jpeg");

    background-size:cover;

    background-repeat:no-repeat;

    background-position:center center;

    display:flex;

    align-items:center;

    overflow:hidden;

}


.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.55) 0%,

        rgba(0,0,0,.25) 50%,

        rgba(0,0,0,0) 100%

    );

}


.hero-content{

    position:relative;

    z-index:2;

    width:80%;

    padding:50px 6%;

    display:flex;

    align-items:center;

}


.left-content{

    max-width:650px;

}


.welcome{

    font-size:30px;

    color:#FFD54F;

    margin-bottom:18px;

    font-weight:600;

}


.left-content h1{

    font-size:88px;

    line-height:90px;

    color:#fff;

    font-weight:800;

    margin-bottom:18px;

}


.left-content h1 span{

    display:block;

    color:#ff69b4;

}


.left-content h3{

    color:#FFE082;

    font-size:28px;

    margin-bottom:22px;

}


.left-content p{

    color:#eee;

    font-size:18px;

    line-height:32px;

    max-width:600px;

}


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

.buttons{

    display:flex;

    gap:20px;

    margin-top:35px;

}


.btn1{

    display:inline-block;

    text-decoration:none;

    padding:15px 35px;

    border-radius:40px;

    font-size:17px;

    font-weight:600;

    background:#ff5da8;

    color:#fff;

    box-shadow:0 10px 25px rgba(255,93,168,.35);

    transition:.35s;

}


.btn1:hover{

    background:#ff2e8d;

    transform:translateY(-5px);

}


/* ==========================================
        MUSIC ICONS
========================================== */

.music-icons i{

    position:absolute;

    font-size:42px;

    color:rgba(255,255,255,.18);

    animation:float 6s ease-in-out infinite;

}


.note1{

    top:120px;

    right:140px;

}


.note2{

    top:300px;

    right:70px;

    animation-delay:2s;

}


.note3{

    bottom:90px;

    right:220px;

    animation-delay:4s;

}


@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0);
    }

}


/* ==========================================
        WHY CHOOSE US
========================================== */

.why{

    padding:90px 8%;

    background:#faf7ff;

}


.title{

    text-align:center;

    margin-bottom:60px;

}


.title h2{

    font-size:42px;

    color:#55338d;

    margin-bottom:15px;

}


.title p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:32px;

    color:#666;

}


.why-container{

    display:grid;

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

    gap:30px;

}


.card{

    background:#fff;

    padding:35px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}


.card:hover{

    transform:translateY(-10px);

}


.card i{

    font-size:48px;

    color:#ff5da8;

    margin-bottom:20px;

}


.card h3{

    font-size:24px;

    color:#55338d;

    margin-bottom:15px;

}


.card p{

    font-size:16px;

    line-height:28px;

    color:#666;

}


/* ==========================================
        FOOTER
========================================== */

footer{

    background:#55338d;

    padding:60px 20px;

    text-align:center;

}


.footer-content h2{

    font-size:34px;

    margin-bottom:12px;

}


.footer-content p{

    font-size:17px;

    margin-bottom:20px;

}


.social-icons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin:25px 0;

}


.social-icons a{

    width:50px;

    height:50px;

    background:#fff;

    color:#55338d;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    text-decoration:none;

    transition:.3s;

}


.social-icons a:hover{

    background:#ff5da8;

    color:#fff;

    transform:translateY(-5px);

}


.copyright{

    margin-top:25px;

    font-size:14px;

    opacity:.8;

}


/* ==========================================
        TABLET
========================================== */

@media(max-width:992px){

    nav{

        width:94%;

    }


    .left-content h1{

        font-size:64px;

        line-height:70px;

    }


    .left-content h3{

        font-size:22px;

    }

}


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

@media(max-width:768px){

    nav{

        width:94%;

        min-height:95px;

    }


    .logo-box{

        gap:10px;

        max-width:calc(100% - 70px);

    }


    .logo-box img{
        width:55px;
        height:55px;
    }


    .academy-name h2{

        font-size:19px;

    }


    .academy-name p{

        font-size:10px;

    }


    .menu-toggle{

        width:48px;

        height:48px;

    }


    #nav-menu{

        width:230px;

        max-width:75vw;

    }


    /* Teacher image */

    .hero{

        min-height:100vh;

        background-position:68% center;

    }


    /* Text face ke upar nahi */

    .hero-content{

        align-items:flex-end;

        padding:360px 22px 45px;

    }


    .left-content{

        width:100%;

        max-width:100%;

        text-align:left;

    }


    .welcome{

        font-size:20px;

        margin-bottom:10px;

    }


    .left-content h1{

        font-size:43px;

        line-height:48px;

        margin-bottom:12px;

    }


    .left-content h3{

        font-size:18px;

        margin-bottom:14px;

    }


    .left-content p{

        font-size:15px;

        line-height:26px;

    }


    .buttons{

        margin-top:22px;

    }


    .music-icons{

        display:none;

    }


    .why{

        padding:60px 20px;

    }


    .title{

        margin-bottom:35px;

    }


    .title h2{

        font-size:30px;

    }


    .title p{

        font-size:16px;

        line-height:27px;

    }


    .card{

        padding:25px;

    }


    .footer-content h2{

        font-size:26px;

    }


    .footer-content p{

        font-size:15px;

    }

}


/* ==========================================
        SMALL PHONE
========================================== */

@media(max-width:480px){

    nav{

        min-height:90px;

    }


    .logo-box img{
        width:52px;
        height:52px;
    }


    .academy-name h2{

        font-size:17px;

    }


    .academy-name p{

        font-size:9px;

    }


    .hero{

        background-position:70% center;

    }


    .hero-content{

        padding:350px 18px 35px;

    }


    .left-content h1{

        font-size:36px;

        line-height:41px;

    }


    .left-content h3{

        font-size:17px;

    }


    .left-content p{

        font-size:14px;

        line-height:24px;

    }


    .btn1{

        width:210px;

        text-align:center;

    }

}