/* =========================================
   BODY
========================================= */

body{

    margin:0;

    font-family:Arial, sans-serif;

    background:#f5f7ff;

    color:#111827;

}

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

.about-hero{

    text-align:center;

    padding-top:30px;

    padding-bottom:25px;

}



.about-hero h1{

    font-size:46px;

    margin-bottom:10px;

}



.about-hero p{

    font-size:16px;

    color:#64748b;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}



/* =========================================
   COURSE CONTENT
========================================= */

.course-content{

    width:92%;

    max-width:1000px;

    margin:auto;

}



.content-card{

    background:white;

    padding:30px;

    border-radius:18px;

    box-shadow:0 6px 18px rgba(0,0,0,0.05);

    margin-bottom:20px;

}



.content-card h2{

    font-size:30px;

    margin-bottom:15px;

    color:#111827;

}



.content-card h3{

    font-size:22px;

    margin-top:20px;

    margin-bottom:10px;

    color:#2563eb;

}



.content-card p{

    font-size:16px;

    line-height:1.9;

    color:#374151;

    margin-bottom:15px;

}



.content-card ul{

    padding-left:25px;

}



.content-card li{

    margin-bottom:10px;

    line-height:1.8;

    color:#374151;

}



.content-card pre{

    background:#eef2ff;

    padding:15px;

    border-radius:12px;

    overflow-x:auto;

    color:#2563eb;

    font-weight:bold;

}



/* =========================================
   CTA
========================================= */

.course-cta{

    text-align:center;

    margin:60px auto;

    width:92%;

    max-width:900px;

}



.course-cta h2{

    font-size:38px;

    margin-bottom:10px;

}



.course-cta p{

    color:#64748b;

    margin-bottom:25px;

    font-size:16px;

}



.course-btn{

    display:inline-block;

    text-decoration:none;

    background:#2563eb;

    color:white;

    padding:14px 28px;

    border-radius:12px;

    font-weight:bold;

    transition:0.3s;

}



.course-btn:hover{

    background:#4f46e5;

}


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

@media(max-width:768px){

    .navbar{

        padding:0 20px;

        flex-direction:column;

        height:auto;

        padding-top:15px;

        padding-bottom:15px;

    }

    .menu{

        gap:15px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .about-hero{

        padding-top:140px;

    }

    .about-hero h1{

        font-size:34px;

    }

    .content-card{

        padding:22px;

    }

    .content-card h2{

        font-size:26px;

    }

    .content-card h3{

        font-size:20px;

    }

    .footer{

        padding:40px 25px;

        flex-direction:column;

        gap:25px;

    }

}