/* ==========================
   Noor-e-Ilm Institute
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8f9fa;
    color:#222;
    line-height:1.7;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

.container{
    width:90%;
    max-width:1320px;
    margin:auto;
}

/* ==========================
   Navbar
========================== */

.navbar{

padding:15px 0;

}

.navbar-brand img{

object-fit:contain;

}

.navbar-nav .nav-link{

font-weight:500;

margin-left:10px;

color:#222 !important;

transition:.3s;

}

.navbar-nav .nav-link:hover{

color:#0d6efd !important;

}

.dropdown-menu{

border:none;

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

}

.btn{

border-radius:50px;

padding:10px 20px;

font-weight:600;

}
/*=========================
        About
==========================*/

.about-section{

padding:90px 0;

background:#fff;

}

.about-badge{

display:inline-block;

padding:10px 20px;

background:#eaf3ff;

color:#0d6efd;

border-radius:30px;

font-weight:600;

}

.about-title{

font-size:42px;

font-weight:700;

line-height:1.3;

margin-bottom:20px;

}

.about-text{

font-size:17px;

color:#666;

line-height:1.9;

}

.about-section img{

border-radius:25px;

transition:.4s;

}

.about-section img:hover{

transform:scale(1.03);

}
/*=========================
    Courses Section
==========================*/

.courses-section{

padding:100px 0;

background:#f8fbff;

}

.section-badge{

display:inline-block;

padding:8px 20px;

border-radius:50px;

background:#eaf4ff;

color:#0d6efd;

font-weight:600;

}

.section-title{

font-size:42px;

font-weight:700;

}

.section-description{

max-width:700px;

margin:auto;

color:#666;

font-size:17px;

line-height:1.8;

}

#courseTabs .nav-link{

border-radius:50px;

padding:12px 28px;

font-weight:600;

margin:5px;

}

#courseTabs .nav-link.active{

background:#0d6efd;

color:#fff;

}
/*=========================
      Course Cards
==========================*/

.course-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.course-card:hover{

transform:translateY(-8px);

}

.course-image{

width:100%;

max-width:100%;

height:auto;

max-height:none;

object-position:center;

display:block;

}

.course-body{

padding:25px;

}

.course-badge{

display:inline-block;

padding:6px 16px;

border-radius:30px;

background:#e8f4ff;

color:#0d6efd;

font-size:14px;

font-weight:600;

margin-bottom:15px;

}

.course-body h4{

font-size:22px;

font-weight:700;

margin-bottom:20px;

}

.course-info{

list-style:none;

padding:0;

margin:0;

}

.course-info li{

padding:8px 0;

color:#555;

border-bottom:1px solid #eee;

}
/*=========================
      Why Choose Us
==========================*/

.why-section{

padding:100px 0;

background:#ffffff;

}

.feature-card{

background:#fff;

border-radius:20px;

padding:35px;

text-align:center;

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

transition:.35s;

height:100%;

}

.feature-card:hover{

transform:translateY(-8px);

}

.feature-icon{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

background:#eef5ff;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

margin-bottom:20px;

}

.feature-card h4{

font-size:24px;

font-weight:700;

margin-bottom:15px;

}

.feature-card p{

color:#666;

line-height:1.8;

}


/* ==========================
    Admin Login
   (scoped to body.login-body
    used only by admin/login.php)
========================== */

.login-body{
    min-height:100vh;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 16px;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(65,105,225,.30), transparent 60%),
        linear-gradient(150deg, #0B1F3A 0%, #122A52 55%, #0B1F3A 100%);
}

.login-body .login-card{
    width:100%;
    max-width:440px;
    margin:auto;
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(5,15,40,.45);
}

.login-body .card-header{
    background:linear-gradient(135deg, #0B1F3A 0%, #4169E1 100%);
    color:#fff;
    text-align:center;
    border-bottom:none;
    padding:32px 24px 26px;
    border-radius:18px 18px 0 0;
}

.login-body .login-logo{
    display:block;
    width:auto;
    max-width:160px;
    max-height:160px;
    height:auto;
    margin:0 auto 16px;
    object-fit:contain;
}

.login-body .card-header h3{
    margin:0 0 4px;
    font-size:1.5rem;
    font-weight:600;
    color:#fff;
}

.login-body .card-header small{
    font-size:.82rem;
    color:#d7e0f3;
}

.login-body .card-body{
    padding:28px 26px 30px;
    background:#fff;
}

.login-body .card-body .alert{
    border-radius:10px;
    font-size:.85rem;
}

.login-body .form-label{
    font-weight:600;
    font-size:.85rem;
    color:#334155;
    margin-bottom:6px;
}

.login-body .login-field{
    position:relative;
}

.login-body .login-field .login-icon{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#94a3b8;
    font-size:14px;
    pointer-events:none;
}

.login-body .login-field .form-control{
    height:46px;
    padding:6px 44px 6px 40px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    font-size:.9rem;
    color:#1e293b;
    background:#f8fafc;
    transition:border-color .2s, box-shadow .2s, background .2s;
}

.login-body .login-field .form-control::placeholder{
    color:#94a3b8;
}

.login-body .login-field .form-control:focus{
    border-color:#4169E1;
    background:#fff;
    box-shadow:0 0 0 3px rgba(65,105,225,.15);
}

.login-body .login-toggle{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    color:#94a3b8;
    font-size:14px;
    cursor:pointer;
    border-radius:8px;
    transition:color .2s;
}

.login-body .login-toggle:hover,
.login-body .login-toggle:focus{
    color:#4169E1;
}

.login-body .btn-login{
    width:100%;
    height:48px;
    background:#4169E1;
    border:none;
    border-radius:10px;
    font-weight:600;
    font-size:.95rem;
    color:#fff;
    transition:background .2s, transform .15s, box-shadow .2s;
    box-shadow:0 8px 18px rgba(65,105,225,.30);
}

.login-body .btn-login:hover{
    background:#3354c7;
    box-shadow:0 10px 22px rgba(65,105,225,.38);
}

.login-body .btn-login:active{
    transform:translateY(1px);
}

.login-body .card-footer{
    background:#fff;
    border-top:1px solid #eef2f7;
    padding:14px 20px;
    color:#94a3b8;
}

@media (max-width: 480px){

    .login-body{
        padding:16px 12px;
    }

    .login-body .login-card{
        border-radius:14px;
    }

    .login-body .card-header{
        padding:24px 16px 20px;
        border-radius:14px 14px 0 0;
    }

    .login-body .login-logo{
        max-width:120px;
        margin-bottom:12px;
    }

    .login-body .card-header h3{
        font-size:1.3rem;
    }

    .login-body .card-body{
        padding:22px 18px 24px;
    }

    .login-body .login-field .form-control{
        height:44px;
    }
}