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

body{
background:#f5f7fa;
}

header{
position: sticky;
top: 0;
left: 0;
width: 100%;
background: #0F172A;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 8%;
z-index:1000;
}

.logo{
display: flex;
align-items: center;
gap: 10px;
color: white;
font-size: 28px;
font-weight: bold;
}

.logo img{
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 50%;
}

nav{
display:flex;
gap:30px;
}

nav a{
color:white;
text-decoration:none;
font-size:17px;
transition:.3s;
}

nav a:hover{
color:#38bdf8;
}

#menu{
display:none;
}

.hamburger{
display:none;
font-size:30px;
color:white;
cursor:pointer;
}

.hero{
height:100vh;
background:
linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1600");
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}

.overlay{
max-width:800px;
color:white;
}

.hero h1{
font-size:55px;
margin-bottom:20px;
}

.hero p{
font-size:22px;
line-height:1.8;
margin-bottom:35px;
}

.buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn,.btn2{
padding:15px 35px;
border-radius:30px;
text-decoration:none;
font-size:18px;
transition:.3s;
}

.btn{
background:#2563EB;
color:white;
}

.btn2{
background:#F59E0B;
color:white;
}

.btn:hover,.btn2:hover{
transform:scale(1.05);
}


.search-box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 30px auto;
    width: 90%;
    max-width: 600px;
}

.search-box input{
    flex: 1;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #2563EB;
    border-radius: 8px;
    outline: none;
}

.search-box input:focus{
    border-color: #1d4ed8;
}

.search-box button{
    padding: 12px 20px;
    background: #2563EB;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.search-box button:hover{
    background: #1d4ed8;
}


.courses{
padding:80px 8%;
text-align:center;
}

.courses h2{
font-size:40px;
margin-bottom:40px;
color:#0F172A;
}

.course-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.card{
background:white;
padding:35px;
border-radius:15px;
box-shadow:0 10px 20px rgba(0,0,0,.1);
transition:.4s;

}

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

.card i{
font-size:45px;
color:#2563EB;
margin-bottom:20px;
}

.card h3{
margin-bottom:15px;
}

.why{
background:#0F172A;
padding:70px 8%;
text-align:center;
color:white;
}

.why h2{
margin-bottom:35px;
font-size:38px;
}

.why-box{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.why-box div{
background:#1E293B;
padding:20px;
border-radius:10px;
}


/* Auto Scroll */

@keyframes scrollTestimonials{

0%{
transform:translateX(0);
}

100%{
transform:translateX(calc(-375px * 4));
}

}


.testimonial-card{
min-width:280px;
padding:20px;
}

.arrow{
width:42px;
height:42px;
font-size:18px;
}

.testimonials h2{
font-size:1.8rem;
}

.quote{
    position:absolute;
    top:20px;
    left:20px;
    font-size:30px;
    color:#2563eb;
    opacity:.2;
}

.view-btn {
    margin-top: 20px;
    text-align: right;
}

.view-btn  a {
    display: inline-block;
    padding: 1opx 20px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 14px;
    transition: all .3s ease;
}

.view-btn a:hover {
    background: #1d4ed8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px 
    rgba(37, 99, 235, .3);
}


.testimonials{
    padding:80px 20px;
    background:#f7f9fc;
    overflow:hidden;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:2.3rem;
    margin-bottom:15px;
    color:#1b1b1b;
}

.section-title p{
    color:#666;
    max-width:700px;
    margin:auto;
    line-height:1.6;
}


/* =========================
   SLIDER WRAPPER
========================= */

.testimonial-wrapper{
    position:relative;
    max-width:1200px;
    margin:auto;
    overflow:hidden;
    padding:20px 60px;
}


/* =========================
   SLIDER
========================= */

.testimonial-slider{
    width:100%;
    overflow:hidden;
}

.testimonial-track{
    display:flex;
    gap:25px;
    transition:transform 0.6s ease;
    will-change:transform;
}


/* =========================
   TESTIMONIAL CARD
========================= */

.testimonial-card{
    flex:0 0 350px;
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    text-align:center;
    box-sizing:border-box;
}

.testimonial-card img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
}

.testimonial-card h3{
    font-size:20px;
    margin:5px 0;
    color:#222;
}

.testimonial-card span{
    display:block;
    color:#777;
    font-size:14px;
    margin-bottom:15px;
}

.testimonial-card p{
    color:#555;
    line-height:1.7;
    font-size:15px;
}

.stars{
    color:#FFD700;
    font-size:18px;
    margin:10px 0 15px;
}


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

.arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#0066ff;
    color:white;
    font-size:22px;
    cursor:pointer;
    z-index:20;
}

.arrow:hover{
    background:#004ecc;
}

.prev{
    left:5px;
}

.next{
    right:5px;
}






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

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}



/* Previous Button */
.previous-btn {
    display: inline-block;
    background: #111;
    color: white;
    text-decoration: none;
    padding: 14px 25px;
    border-radius: 7px;
    transition: 0.3s;
}

.previous-btn:hover {
    background: #333;
}

.previous-section {
    text-align: left;
}
/*NEXT LESSON */
.next-btn {
    display: inline-block;
    background: #111;
    color: white;
    text-decoration: none;
    padding: 14px 25px;
    border-radius: 7px;
}

.next-btn:hover {
    background: #333;
}

.next-section {
    text-align: right;
}






footer{
    background:#111;
    color:#fff;
    padding:50px 20px 15px;
}

.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    max-width:1200px;
    margin:auto;
}

.footer-box h2,
.footer-box h3{
    color:#00bfff;
    margin-bottom:15px;
}

.footer-box p{
    color:#ccc;
    line-height:1.7;
}

.footer-box ul{
    list-style:none;
    padding:0;
}

.footer-box ul li{
    margin:10px 0;
}

.footer-box ul li a{
    color:#ccc;
    text-decoration:none;
    transition:.3s;
}

.footer-box ul li a:hover{
    color:#00bfff;
    padding-left:5px;
}

.social-icons a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    background:#222;
    color:#fff;
    border-radius:50%;
    margin-right:10px;
    text-decoration:none;
    transition:.3s;
}

.social-icons a:hover{
    background:#00bfff;
    transform:translateY(-5px);
}

.footer-bottom{
    border-top:1px solid #333;
    text-align:center;
    margin-top:30px;
    padding-top:15px;
    color:#aaa;
}



@media(max-width:768px){

.hamburger{
display:block;
}

nav{
position:absolute;
top:75px;
right:-100%;
width:230px;
background:#0F172A;
display:flex;
flex-direction:column;
padding:20px;
transition:.4s;
}

#menu:checked~nav{
right:0;
}

.hero h1{
font-size:36px;
}

.hero p{
font-size:18px;
}
  
   .testimonials{
        padding:60px 10px;
    }

    .section-title h2{
        font-size:1.8rem;
    }

    .testimonial-wrapper{
        padding:20px 45px;
    }

    .testimonial-card{
        flex:0 0 100%;
    }

    .arrow{
        width:40px;
        height:40px;
        font-size:18px;
    }

    .prev{
        left:2px;
    }

    .next{
        right:2px;
    }

    

    .next-section {
        text-align: center;
        margin-bottom: 30px;
    }


}



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

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
 

}
    
}