/*==================================
        CONTACT PAGE
==================================*/

.contact-page{

    padding:100px 0;

    background:#f8fbff;

}

.contact-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    background:#ffffff;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

/*==============================
        LEFT
==============================*/

.contact-info{

    padding:60px;

}

.contact-info h2{

    font-size:clamp(2rem,4vw,3rem);

    color:#1f2937;

    margin:20px 0;

}

.contact-info p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:40px;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.contact-item .icon{

    width:55px;

    height:55px;

    background:#2563eb;

    color:#ffffff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    flex-shrink:0;

}

.contact-item h4{

    color:#1f2937;

    margin-bottom:5px;

}

.contact-item span{

    color:#64748b;

    line-height:1.8;

}

/*==============================
        RIGHT
==============================*/

.contact-form{

    background:#2563eb;

    padding:60px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:16px 18px;

    border:none;

    outline:none;

    border-radius:12px;

    font-size:15px;

    font-family:inherit;

}

.form-group textarea{

    resize:vertical;

}

.contact-form button{

    background:#ffffff;

    color:#2563eb;

    border:none;

    padding:16px;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.contact-form button:hover{

    transform:translateY(-2px);

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

}
/*==================================
        ABOUT CTA
==================================*/

.about-cta{

    padding:100px 0;

    background:#f8fbff;

}

.cta-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#ffffff;

    padding:70px 60px;

    border-radius:30px;

    box-shadow:0 25px 60px rgba(37,99,235,.25);

}

.cta-box .section-tag{

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

    color:#ffffff;

}

.cta-box h2{

    font-size:clamp(2rem,4vw,3.2rem);

    margin:25px 0;

    line-height:1.2;

}

.cta-box p{

    max-width:650px;

    margin:0 auto 40px;

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

    line-height:1.9;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-buttons a{

    min-width:180px;

    text-align:center;

}

.cta-box .btn-primary{

    background:#ffffff;

    color:#2563eb;

}

.cta-box .btn-primary:hover{

    background:#f1f5f9;

}

.cta-box .btn-secondary{

    border:2px solid #ffffff;

    color:#ffffff;

    background:transparent;

}

.cta-box .btn-secondary:hover{

    background:#ffffff;

    color:#2563eb;

}

.hero {
padding: 90px 0;
background: linear-gradient(135deg, #f8fbff 0%, #eef7ff 100%);
overflow: hidden;
}

.hero .container {
width: min(1200px, 92%);
margin: auto;
}

.hero-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 70px;
}

.hero-text {
flex: 1;
max-width: 600px;
}

.hero-tag {
display: inline-block;
padding: 8px 18px;
border-radius: 50px;
background: rgba(0, 102, 255, .08);
color: #0066ff;
font-size: .9rem;
font-weight: 600;
margin-bottom: 20px;
}

.hero h1 {
font-size: clamp(2.3rem, 5vw, 4rem);
line-height: 1.15;
color: #1f2937;
margin-bottom: 25px;
font-weight: 700;
}

.hero p {
font-size: 1.08rem;
color: #5f6b7a;
line-height: 1.8;
margin-bottom: 35px;
}

.hero-buttons {
display: flex;
gap: 18px;
flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: .3s ease;
}

.btn-primary {
background: #0066ff;
color: #fff;
}

.btn-primary:hover {
background: #0052cc;
transform: translateY(-2px);
}

.btn-secondary {
border: 2px solid #0066ff;
color: #0066ff;
background: #fff;
}

.btn-secondary:hover {
background: #0066ff;
color: #fff;
}

.hero-image {
flex: 1;
text-align: center;
}

.hero-image img {
width: 100%;
max-width: 560px;
height: auto;
display: block;
margin: auto;
}
.about-section {
padding: 90px 0;
background: #f7f9fc;
}

.about-card {

background: #ffffff;
border-radius: 24px;

display: flex;
align-items: center;
gap: 60px;

padding: 60px;

box-shadow:
0 20px 60px rgba(0,0,0,.08);

}

.about-image {
flex: 1;
}

.about-image img {

width: 100%;
display: block;

border-radius: 18px;

}

.about-content {

flex: 1;

}

.section-tag {

display: inline-block;

padding: 8px 18px;

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

color: #0066ff;

border-radius: 30px;

font-size: .9rem;

font-weight: 600;

margin-bottom: 20px;

}

.about-content h2 {

font-size: clamp(2rem,4vw,3rem);

color: #1f2937;

margin-bottom: 25px;

line-height: 1.2;

}

.about-content p {

color: #5f6b7a;

line-height: 1.9;

margin-bottom: 20px;

}

.about-features {

display: grid;

grid-template-columns: repeat(2,1fr);

gap: 18px;

margin-top: 35px;

}

.feature {

background: #f5f8ff;

border-radius: 12px;

padding: 15px 18px;

font-weight: 600;

color: #1f2937;

}

.contact-section{

padding-left: 3em;
padding-right: 3em;

background:#0f172a;

}

.contact-wrapper{

display:flex;

gap:60px;

align-items:center;

}

.contact-info{

flex:1;

color:#ffffff;

}

.contact-info h2{

font-size:clamp(2rem,4vw,3rem);

margin:20px 0;

}

.contact-info p{

color:#cbd5e1;

line-height:1.9;

margin-bottom:35px;

}

.contact-item{

display:flex;

align-items:flex-start;

gap:18px;

margin-bottom:28px;

}

.contact-item i{

width:55px;

height:55px;

border-radius:50%;

background:#2563eb;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:20px;

flex-shrink:0;

}

.contact-item h4{

margin-bottom:6px;

color:#fff;

}

.contact-item a{

color:#cbd5e1;

text-decoration:none;

}

.contact-item p{

margin:0;

}

.contact-form{

flex:1;

background:#ffffff;

border-radius:20px;

padding:40px;

}

.contact-form form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-form input,
.contact-form textarea{

width:100%;

border:1px solid #dbe3ee;

border-radius:10px;

padding:16px;

font-size:15px;

outline:none;

transition:.3s;

font-family:inherit;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:#2563eb;

}

.contact-form textarea{

resize:vertical;

}

.contact-form button{

border:none;

background:#2563eb;

color:#fff;

padding:16px;

border-radius:10px;

cursor:pointer;

font-size:16px;

font-weight:600;

transition:.3s;

}

.contact-form button:hover{

background:#1d4ed8;

}

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

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

    backdrop-filter:blur(12px);

    border-bottom:1px solid #edf2f7;

}

.header .container{

    width:min(1200px,92%);

    margin:auto;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.logo img{

    width:55px;

    height:55px;

}

.logo span{

    font-size:1.05rem;

    font-weight:700;

    line-height:1.2;

    color:#1f2937;

}

/*==========================
        NAVIGATION
==========================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:40px;

    list-style:none;

}

.nav-links a{

    text-decoration:none;

    color:#374151;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#2563eb;

    transition:.3s;

}

.nav-links a:hover,

.nav-links a.active{

    color:#2563eb;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

/*==========================
      LOGIN BUTTON
==========================*/

.login-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 28px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.login-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

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

.menu-btn{

    display:none;

    font-size:24px;

    cursor:pointer;

    color:#1f2937;

}

.page-hero{

    padding:170px 0 110px;

    background:linear-gradient(135deg,#f8fbff 0%,#eef7ff 100%);

    text-align:center;

    position:relative;

    overflow:hidden;

}

.page-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(37,99,235,.05);

    top:-250px;

    right:-150px;

}

/*==================================
        COURSES
==================================*/

.courses-section{

    padding:100px 0;

    background:#f8fbff;

}

.section-heading{

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}

.section-heading h2{

    font-size:clamp(2rem,4vw,3rem);

    color:#1f2937;

    margin:20px 0;

}

.section-heading p{

    color:#64748b;

    line-height:1.9;

}

.courses-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.course-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.course-card:hover{

    transform:translateY(-8px);

}

.course-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}

.course-content{

    padding:30px;

}

.course-content h3{

    color:#1f2937;

    margin-bottom:18px;

    font-size:1.6rem;

}

.course-content p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:25px;

}

.course-content a{

    display:inline-block;

    padding:12px 24px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.course-content a:hover{

    background:#1d4ed8;

}


.page-hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(37,99,235,.06);

    bottom:-180px;

    left:-120px;

}

.page-hero .container{

    width:min(900px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}

.page-tag{

    display:inline-block;

    padding:8px 18px;

    background:rgba(37,99,235,.08);

    color:#2563eb;

    border-radius:30px;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:20px;

}

.page-hero h1{

    font-size:clamp(2.6rem,5vw,4.5rem);

    color:#1f2937;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:700;

}

.page-hero p{

    font-size:1.1rem;

    color:#64748b;

    line-height:1.9;

    max-width:760px;

    margin:auto;

}

.about-story{

    padding:100px 0;

    background:#ffffff;

}

.story-wrapper{

    display:flex;

    align-items:center;

    gap:70px;

}

.story-image{

    flex:1;

}

.story-image img{

    width:100%;

    display:block;

    border-radius:24px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.story-content{

    flex:1;

}

.story-content h2{

    font-size:clamp(2rem,4vw,3.2rem);

    color:#1f2937;

    line-height:1.2;

    margin:20px 0 25px;

}

.story-content p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:20px;

    font-size:1.05rem;

}

.story-stats{

    display:flex;

    gap:20px;

    margin-top:40px;

}

.stat-box{

    flex:1;

    background:#f8fbff;

    border-radius:18px;

    padding:25px;

    text-align:center;

    border:1px solid #e2e8f0;

    transition:.3s;

}

.stat-box:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(37,99,235,.10);

}

.stat-box h3{

    font-size:2rem;

    color:#2563eb;

    margin-bottom:8px;

}

.stat-box span{

    color:#64748b;

    font-weight:500;

}

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

@media (max-width: 992px) {

    .contact-card{

    grid-template-columns:1fr;

}

.contact-info,
.contact-form{

    padding:40px;

}

  .story-wrapper{

    flex-direction:column;

}

.story-stats{

    flex-direction:column;

}

.hero {
padding: 70px 0;
}

.hero-content {
flex-direction: column-reverse;
text-align: center;
gap: 50px;
}

.hero-text {
max-width: 100%;
}

.hero-buttons {
justify-content: center;
}

.hero-image img {
max-width: 420px;
}
.about-card{

flex-direction: column;

padding:40px;

gap:40px;

}

.about-features{

grid-template-columns:1fr;

}

.contact-wrapper{

flex-direction:column;

}

.contact-form{

width:100%;

}

}

@media (max-width: 576px) {

  .courses-section{

    padding:70px 0;

}

.course-content{

    padding:22px;

}

.course-content h3{

    font-size:1.35rem;

}

.course-card img{

    height:220px;

}

  .about-story{

    padding:70px 0;

}

.story-content h2{

    font-size:2rem;

}

.story-content p{

    font-size:1rem;

}

.stat-box{

    padding:20px;

}

.hero {
padding: 60px 0;
}

.hero h1 {
font-size: 2rem;
}

.hero p {
font-size: 1rem;
}

.btn-primary,
.btn-secondary {
width: 100%;
}
.about-section{

padding:60px 0;

}

.about-card{

padding:25px;

}

.about-content h2{

font-size:2rem;

}
.contact-section{

padding:60px 0;

}

.contact-form{

padding:25px;

}

.contact-item{

align-items:flex-start;

}

.contact-page{

    padding:70px 0;

}

.contact-info,
.contact-form{

    padding:25px;

}

.contact-info h2{

    font-size:2rem;

}

}

@media(max-width:768px){

  .cta-box{

    padding:50px 30px;

}

.cta-box h2{

    font-size:2rem;

}

.nav-links,

.login-btn{

    display:none;

}

.menu-btn{

    display:block;

}

.logo span{

    font-size:.95rem;

}

.nav-links{

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    background:#ffffff;

    flex-direction:column;

    gap:25px;

    padding:30px 0;

    display:none;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.nav-links.show{

    display:flex;

}

.page-hero{

    padding:140px 0 80px;

}

.page-hero h1{

    font-size:2.5rem;

}

.page-hero p{

    font-size:1rem;

}

}