/*
====================================================
ADRAA AGRICULTURE COLLEGE
ADMISSIONS PAGE STYLES
====================================================
*/


:root{

--adraa-green:#006b35;

--adraa-light-green:#0b8f4d;

--adraa-gold:#f4b400;

--adraa-white:#ffffff;

--adraa-dark:#1d1d1d;

--adraa-grey:#f5f7f5;

}




body{

font-family:
"Segoe UI",
Arial,
sans-serif;

color:var(--adraa-dark);

}





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


.admission-hero{

height:90vh;

background:

linear-gradient(
rgba(0,80,40,.75),
rgba(0,0,0,.55)
),

url("../img/admission-campus.jpg");


background-size:cover;

background-position:center;

display:flex;

align-items:center;

position:relative;

}



.hero-content{

color:white;

max-width:750px;

}



.hero-content h1{

font-size:55px;

font-weight:800;

}



.hero-content p{

font-size:22px;

line-height:1.7;

}




.btn-warning{

background:var(--adraa-gold);

border:none;

font-weight:700;

padding:12px 30px;

}





/*
==============================
SECTION TITLES
==============================
*/


.section-title{

color:var(--adraa-green);

font-weight:800;

position:relative;

margin-bottom:20px;

}



.section-title:after{

content:"";

width:70px;

height:4px;

background:var(--adraa-gold);

display:block;

margin:15px auto;

}





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


.admission-card,
.program-card,
.contact-card,
.step-card,
.fee-card,
.short-card{

background:white;

border-radius:20px;

padding:30px;

height:100%;

box-shadow:

0 10px 30px rgba(0,0,0,.1);

transition:.4s;

text-align:center;

}





.admission-card:hover,
.program-card:hover,
.contact-card:hover,
.step-card:hover,
.fee-card:hover,
.short-card:hover{

transform:translateY(-10px);

}





.icon,
.program-icon{

font-size:45px;

margin-bottom:20px;

}





.admission-card h4,
.program-card h4{

color:var(--adraa-green);

font-weight:700;

}





/*
==============================
DEADLINES
==============================
*/


.deadline-section{

background:var(--adraa-grey);

}



.deadline-card{

background:white;

padding:30px;

border-left:6px solid var(--adraa-green);

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

}



.deadline-card li{

margin-bottom:15px;

}





.calendar-box{

background:

var(--adraa-green);

color:white;

padding:30px;

border-radius:20px;

}





.calendar-item{

display:flex;

gap:20px;

align-items:center;

padding:15px;

border-bottom:1px solid rgba(255,255,255,.3);

}



.calendar-item span{

background:var(--adraa-gold);

color:black;

padding:10px;

border-radius:50%;

font-weight:bold;

}





/*
==============================
APPLICATION STEPS
==============================
*/


.step-number{

width:50px;

height:50px;

border-radius:50%;

background:var(--adraa-green);

color:white;

font-size:25px;

font-weight:bold;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

}




/*
==============================
FEES
==============================
*/


.fee-card{

border-top:5px solid var(--adraa-gold);

}



.fee-card h2{

color:var(--adraa-green);

font-weight:800;

}





/*
==============================
PROGRAMMES
==============================
*/


.programmes-section,
.short-course-section{

background:white;

}





.certificate-section{

background:#f8faf8;

}





.short-card a{

color:var(--adraa-green);

font-weight:bold;

text-decoration:none;

}


/* Short Courses CTA Button */

.certificate-section + .text-center .btn {

    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;

}


.certificate-section + .text-center .btn:hover {

    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}


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


.contact-section{

background:#f5f7f5;

}



.contact-icon{

font-size:45px;

margin-bottom:15px;

}





/*
==============================
FAQ
==============================
*/


.accordion-button{

font-weight:700;

color:var(--adraa-green);

}



.accordion-button:not(.collapsed){

background:var(--adraa-green);

color:white;

}





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


.final-cta{

background:

linear-gradient(
90deg,
#006b35,
#0b8f4d
);

color:white;

padding:70px 20px;

}



.final-cta h2{

font-size:40px;

font-weight:800;

}





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


@media(max-width:768px){


.admission-hero{

height:75vh;

}



.hero-content h1{

font-size:35px;

}



.hero-content p{

font-size:17px;

}



.final-cta h2{

font-size:30px;

}



}

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

.hamburger{
    display:none;
    font-size:28px;
    cursor:pointer;
}

@media screen and (max-width:768px){

    .hamburger{
        display:block;
        color:#fff;
        z-index:1001;
    }

    .nav-menu{
        display:none !important;
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#0b1f3a;
        flex-direction:column;
        padding:15px 0;
        box-shadow:0 5px 15px rgba(0,0,0,.2);
        z-index:1000;
    }

    .nav-menu.active{
        display:flex !important;
    }

    .nav-menu li{
        width:100%;
        text-align:center;
        margin:10px 0;
    }

    .nav-menu li a{
        display:block;
        padding:12px;
        color:#fff;
    }
}

/* =========================
   FOOTER
========================= */
.footer{
    background:#0b1f3a;
    color:#ccc;
    padding:40px 20px;
}

.footer-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.footer-col h3{
    color:#fff;
    margin-bottom:15px;
}

.logo{
    color:#22c55e;
}

.footer-col p,
.footer-col a{
    color:#ccc;
    text-decoration:none;
    display:block;
    margin-bottom:8px;
}

.footer-col a:hover{
    color:#22c55e;
}

.footer-col ul{
    list-style:none;
}

.footer-bottom{
    border-top:1px solid #24405f;
    margin-top:20px;
    padding-top:15px;
    text-align:center;
}

/* =====================================
FOOTER MOBILE FIX
===================================== */

@media screen and (max-width:992px){

    .footer-container{
        grid-template-columns:repeat(2,1fr);
    }

}

@media screen and (max-width:600px){

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-bottom{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .footer-col{
        margin-bottom:20px;
    }
}