:root{
    --primary-orange:#ff5a1f;
    --dark-black:#111111;
    --light-bg:#f8f8f8;
}

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

body{
    background:var(--light-bg);
    color:#333;
}


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

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 8%;
    background:linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.65)),
    url('1.jpg');

    background-size:cover;
    background-position:center;
    color:#fff;
}

.hero-content{
    max-width:700px;
}

.hero-badge{
    display:inline-block;
    background:var(--primary-orange);
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
    animation:fadeIn 1s ease;
}

.hero h1{
    font-size:52px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;
}

.hero span{
    color:var(--primary-orange);
}

.hero p{
    font-size:18px;
    margin-bottom:35px;
    color:#ddd;
}

/* Buttons */

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.btn-primary{
    padding:15px 35px;
    background:var(--primary-orange);
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;
    transition:0.3s;
}

.btn-primary:hover{
    background:#e14a14;
    transform:translateY(-3px);
}

.btn-secondary{
    padding:15px 35px;
    border:2px solid #fff;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    font-weight:600;
    transition:0.3s;
}

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

/* Stats */

.hero-stats{
    display:flex;
    gap:40px;
    flex-wrap:wrap;
}

.hero-stats h3{
    font-size:28px;
    color:var(--primary-orange);
}

.hero-stats span{
    font-size:14px;
    color:#ccc;
}

/* Animation */

@keyframes fadeIn{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

/* Responsive */

@media(max-width:768px){

.hero{
    text-align:center;
}

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

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

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

}

/* ================= PROGRAM SECTION ================= */

.programs{
    background:#f8f8f8;
    
}

.section{
    padding:100px 8%;
    text-align:center;
}

.section h2{
    font-size:36px;
    margin-bottom:15px;
}

.section p{
    color:#666;
    margin-bottom:50px;
}

/* ================= CARDS ================= */

/* ================= CARDS ================= */

.courses{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:35px;
}

.card{
    width:100%;  /* Remove fixed width */
    padding:40px 25px;
    border-radius:20px;
    text-decoration:none;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,0.08);
    transition:0.4s ease;
    position:relative;
    display:block;
}
.card:hover{
    transform:translateY(-15px);
    box-shadow:0 18px 45px rgba(0,0,0,0.15);
}

/* ================= ICON BADGE ================= */

.icon-badge{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 25px;
    font-size:28px;
    color:#fff;
    transition:0.4s;
}

/* Different Colors Per Course */

/* MEDICAL – Orange/Red (Energy & Urgency) */
.medical{
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

/* ENGINEERING – Blue/Cyan (Technology Feel) */
.engineering{
    background: linear-gradient(135deg, #0052d4, #4364f7);
}

/* CIVIL / PCS-J – Deep Navy (Authority & Judiciary) */
.civil{
    background: linear-gradient(135deg, #141e30, #243b55);
}

/* FOUNDATION – Green/Teal (Growth & Basics) */
.foundation{
    background: linear-gradient(135deg, #11998e, #38ef7d);
}
.pcsj{
    background: linear-gradient(135deg, #2c3e50, #4ca1af);
}
/* CLAT – Royal Purple (Law Entrance Premium Look) */
.clat{
    background: linear-gradient(135deg, #5f2c82, #49a09d);
}
.cat{
    background: linear-gradient(135deg, #ff6a00, #ee0979);
}
.ipmat{
    background: linear-gradient(135deg, #f7971e, #ffd200);
}
.ailet{
    background: linear-gradient(135deg, #1e3c72, #2a5298);
}
.card:hover .icon-badge{
    transform:scale(1.1);
}

/* ================= CARD CONTENT ================= */

.card-content{
    text-align:center;
}

.card-content h3{
    margin-bottom:12px;
    font-size:20px;
    color:#222;
}

.card-content p{
    color:#555;
    font-size:14px;
    margin-bottom:20px;
}

.card-link{
    font-weight:600;
    color:#333;
    transition:0.3s;
}

.card:hover .card-link{
    color:#ff5a1f;
    letter-spacing:1px;
}

/* Responsive */

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

/* Tablet */
@media(max-width:992px){
    .courses{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media(max-width:768px){
    .courses{
        grid-template-columns: repeat(2, 1fr);  /* ALWAYS 2 cards */
        gap:15px;
    }

    .card{
        padding:20px 12px;
    }
}

/* ================= STATS ================= */

.stats{
    background:var(--dark-black);
    color:#fff;
    padding:70px 8%;
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    text-align:center;
}

.stats div{
    margin:20px;
}

.stats h3{
    font-size:36px;
    color:var(--primary-orange);
}



/* ================= ENQUIRY FORM ================= */

.enquiry{
    background:#f8f8f8;
    padding:80px 8%;
    text-align:center;
}

.enquiry h2{
    font-size:32px;
    color:#111;
    margin-bottom:10px;
}

.enquiry p{
    color:#666;
    margin-bottom:40px;
}

.enquiry-container{
    max-width:600px;
    margin:auto;
    background:#fff;
    padding:40px;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.form-group{
    margin-bottom:20px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:12px 15px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:15px;
    outline:none;
    transition:0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#ff5a1f;
}

.submit-btn{
    width:100%;
    padding:14px;
    background:#ff5a1f;
    color:#fff;
    border:none;
    font-size:16px;
    font-weight:600;
    border-radius:30px;
    cursor:pointer;
    transition:0.3s;
}

.submit-btn:hover{
    background:#e14a14;
}


/* WHY JOIN SECTION */

.why{
    background:linear-gradient(135deg,#f9fafc,#eef2f7);
    padding:100px 8%;
    text-align:center;
}

.why-header h2{
    font-size:36px;
    margin-bottom:10px;
    color:#222;
}

.why-header p{
    color:#666;
    margin-bottom:60px;
    font-size:16px;
}

.features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:40px;
}

/* Feature Card */

.feature-box{
    width:260px;
    padding:35px 25px;
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    transition:0.4s ease;
    position:relative;
    overflow:hidden;
}

.feature-box:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

/* Icon Circle */

.feature-icon{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    background:linear-gradient(135deg,#ff5a1f,#ff8c42);
    transition:0.4s;
}

.feature-box:hover .feature-icon{
    transform:scale(1.1) rotate(5deg);
}

/* Text */

.feature-box h3{
    margin-bottom:12px;
    font-size:18px;
    color:#222;
}

.feature-box p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* Responsive */

@media(max-width:768px){
    .features{
        flex-direction:column;
        align-items:center;
    }
}



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

@media(max-width:768px){

.hero{
    text-align:center;
}

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

nav{
    display:none;
}

}