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


:root{

--alumni-green:#006633;
--alumni-dark-green:#004d26;
--alumni-gold:#D4AF37;
--alumni-light:#f8faf8;
--alumni-white:#ffffff;
--alumni-shadow:0 10px 30px rgba(0,0,0,.10);

}



/*
====================================================
GLOBAL ALUMNI STYLING
====================================================
*/


.section-padding{

padding:80px 0;

}



.section-title{

font-size:2.4rem;

font-weight:800;

color:var(--alumni-green);

position:relative;

margin-bottom:25px;

}



.section-title::after{

content:"";

display:block;

width:80px;

height:4px;

background:var(--alumni-gold);

margin-top:15px;

}



.section-text{

font-size:1.05rem;

line-height:1.9;

color:#555;

}





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


.alumni-hero{


min-height:85vh;


display:flex;

align-items:center;


background:

linear-gradient(

rgba(0,102,51,.85),

rgba(0,102,51,.85)

),

url("../images/alumni/alumni-bg.jpg");



background-size:cover;

background-position:center;


color:white;


}



.hero-badge{


display:inline-block;


background:

rgba(212,175,55,.15);


border:

1px solid var(--alumni-gold);


padding:

10px 25px;


border-radius:50px;


font-size:.9rem;


margin-bottom:25px;


}




.alumni-hero h1{


font-size:3.5rem;


font-weight:800;


line-height:1.2;


}



.alumni-hero p{


font-size:1.15rem;


line-height:1.8;


margin:25px 0;


}



.hero-buttons a{


margin-right:15px;


}




.hero-image{


max-height:480px;


filter:

drop-shadow(

0 20px 25px rgba(0,0,0,.3)

);


}





/*
====================================================
STATISTICS
====================================================
*/


.statistics-section{


background:

linear-gradient(

135deg,

#006633,

#009966

);


padding:80px 0;


}



.stat-card{


background:white;


border-radius:25px;


padding:35px 20px;


text-align:center;


height:100%;


box-shadow:var(--alumni-shadow);


transition:.4s;


}



.stat-card:hover{


transform:

translateY(-10px);


}




.counter{


font-size:3rem;


font-weight:800;


color:var(--alumni-green);


}



.stat-card h5{


font-weight:700;


margin-top:15px;


}



.stat-card p{


color:#777;


}





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


.feature-card{


background:white;


padding:35px;


border-radius:25px;


height:100%;


box-shadow:var(--alumni-shadow);


text-align:center;


transition:.4s;


}



.feature-card:hover{


transform:

translateY(-10px);


}



.feature-card i{


font-size:45px;


color:var(--alumni-gold);


margin-bottom:20px;


}



.feature-card h4{


font-weight:700;


color:var(--alumni-green);


}





/*
====================================================
SUCCESS STORY
====================================================
*/


.featured-image{


border-radius:30px;


}



.section-tag{


display:inline-block;


background:

var(--alumni-gold);


color:white;


padding:8px 20px;


border-radius:30px;


font-size:.85rem;


font-weight:600;


margin-bottom:20px;


}



.mini-stat{


background:white;


padding:20px;


border-radius:20px;


box-shadow:var(--alumni-shadow);


text-align:center;


}



.mini-stat h3{


color:var(--alumni-green);


font-weight:800;


}




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


.glass-card{


background:

rgba(255,255,255,.75);


backdrop-filter:

blur(15px);


border-radius:30px;


padding:40px;


box-shadow:

var(--alumni-shadow);


}





.alumni-avatar{


width:160px;


height:160px;


object-fit:cover;


border:

6px solid white;


box-shadow:

var(--alumni-shadow);


}





/*
====================================================
LEADERSHIP
====================================================
*/


.leader-card{


background:white;


border-radius:25px;


overflow:hidden;


box-shadow:

var(--alumni-shadow);


transition:.4s;


}



.leader-card:hover{


transform:

translateY(-12px);


}



.leader-card img{


width:100%;


height:300px;


object-fit:cover;


}



.leader-info{


padding:25px;


text-align:center;


}



.leader-info h5{


font-weight:800;


color:var(--alumni-green);


}



.leader-info p{


color:#777;


}






/*
====================================================
ACHIEVEMENTS
====================================================
*/


.achievement-card{


background:white;


padding:40px 30px;


border-radius:25px;


text-align:center;


height:100%;


box-shadow:

var(--alumni-shadow);


}



.achievement-card i{


font-size:45px;


color:var(--alumni-gold);


margin-bottom:20px;


}



.achievement-card h4{


color:var(--alumni-green);


font-weight:700;


}

/*
====================================================
ALUMNI GALLERY
====================================================
*/


.gallery-filter{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

}



.filter-btn{


border-radius:50px;


padding:10px 28px;


font-weight:600;


transition:.3s;


}



.filter-btn.active{


background:

var(--alumni-green);


color:white;


border-color:

var(--alumni-green);


}




.gallery-card{


position:relative;


overflow:hidden;


border-radius:25px;


height:320px;


box-shadow:

var(--alumni-shadow);


}



.gallery-card img{


width:100%;


height:100%;


object-fit:cover;


transition:.5s;


}




.gallery-card:hover img{


transform:

scale(1.1);


}




.gallery-overlay{


position:absolute;


bottom:0;


left:0;


right:0;


padding:25px;


background:

linear-gradient(

transparent,

rgba(0,0,0,.75)

);


color:white;


opacity:0;


transition:.4s;


}



.gallery-card:hover .gallery-overlay{


opacity:1;


}



.gallery-overlay h5{


margin:0;


font-weight:700;


}





/*
====================================================
JOIN ALUMNI SECTION
====================================================
*/


.join-section{


padding:90px 0;


background:


linear-gradient(

135deg,

#006633,

#008844

);


}



.join-card{


background:white;


padding:60px 40px;


border-radius:35px;


box-shadow:

0 20px 50px rgba(0,0,0,.15);


}



.join-card h2{


font-size:2.3rem;


font-weight:800;


color:

var(--alumni-green);


}



.join-card p{


max-width:800px;


margin:20px auto 35px;


line-height:1.8;


color:#555;


}




.join-card .btn-warning{


background:

var(--alumni-gold);


border:none;


color:white;


font-weight:700;


padding:

14px 35px;


border-radius:50px;


}





/*
====================================================
NEWSLETTER
====================================================
*/


.newsletter-card{


background:


linear-gradient(

135deg,

#ffffff,

#f1f7f2

);


padding:45px;


border-radius:30px;


box-shadow:

var(--alumni-shadow);


}



.newsletter-card h3{


font-weight:800;


color:

var(--alumni-green);


}



.newsletter-form input{


height:55px;


border-radius:

30px 0 0 30px;


padding-left:25px;


}



.newsletter-form button{


border-radius:

0 30px 30px 0;


padding:

0 30px;


font-weight:700;


}







/*
====================================================
PARTNERS
====================================================
*/


.partner-logo{


max-height:100px;


max-width:180px;


object-fit:contain;


filter:

grayscale(100%);


opacity:.7;


transition:.4s;


}



.partner-logo:hover{


filter:

grayscale(0);


opacity:1;


transform:

scale(1.08);


}






/*
====================================================
BUTTON CUSTOMIZATION
====================================================
*/


.btn-success{


background:

var(--alumni-green);


border-color:

var(--alumni-green);


}



.btn-success:hover{


background:

var(--alumni-dark-green);


border-color:

var(--alumni-dark-green);


}




.btn-outline-success{


color:

var(--alumni-green);


border-color:

var(--alumni-green);


}



.btn-outline-success:hover{


background:

var(--alumni-green);


color:white;


}






/*
====================================================
GLIGHTBOX COMPATIBILITY
====================================================
*/


.glightbox-clean .gslide-description{


font-family:

'Montserrat',sans-serif;


}




/*
====================================================
LAZY IMAGE LOADING EFFECT
====================================================
*/


img[loading="lazy"]{


transition:

opacity .5s ease;


}



img[loading="lazy"]:not([src]){


opacity:0;


}





/*
====================================================
ANIMATION HELPERS
====================================================
*/


.gallery-item{


transition:

all .5s ease;


}



.gallery-item.hide{


opacity:0;


transform:

scale(.8);


}




.gallery-item.show{


opacity:1;


transform:

scale(1);


}






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


@media(max-width:992px){


.alumni-hero{


text-align:center;


padding:

100px 0;


}



.alumni-hero h1{


font-size:2.5rem;


}



.hero-buttons a{


display:block;


margin:

10px auto;


width:

220px;


}



.hero-image{


margin-top:40px;


max-height:350px;


}




.section-title{


font-size:2rem;


}




.leader-card img{


height:260px;


}



}




@media(max-width:768px){


.section-padding{


padding:

55px 0;


}



.counter{


font-size:

2.3rem;


}



.gallery-card{


height:

250px;


}



.join-card{


padding:

40px 20px;


}



.join-card h2{


font-size:

1.8rem;


}



.newsletter-card{


padding:

30px 20px;


}



.newsletter-form .input-group{


display:block;


}



.newsletter-form input,


.newsletter-form button{


width:100%;


border-radius:

30px;


height:

55px;


margin-bottom:10px;


}




.alumni-hero h1{


font-size:

2rem;


}



.hero-badge{


font-size:

.75rem;


}



}





@media(max-width:480px){


.alumni-hero p{


font-size:

1rem;


}



.section-title{


font-size:

1.7rem;


}



.stat-card{


padding:

25px 15px;


}



.feature-card{


padding:

25px;


}



.gallery-card{


height:

220px;


}



}

/*
====================================================
FINAL ACCESSIBILITY & PERFORMANCE
====================================================
*/


a{

text-decoration:none;

}



img{

max-width:100%;

}



button:focus,

a:focus{

outline:

3px solid var(--alumni-gold);

outline-offset:

3px;

}



/*
====================================================
IMAGE LOADING FADE EFFECT
====================================================
*/


.lazy-image{

opacity:0;

transition:

opacity .6s ease;


}



.lazy-image.loaded{

opacity:1;


}





/*
====================================================
EMPTY STATES
====================================================
*/


.no-results{

text-align:center;

padding:50px;

color:#777;

font-size:1.1rem;

}



/*
====================================================
PRINT VERSION
====================================================
*/


@media print{


.navbar,

footer,

.join-section,

.newsletter-card{

display:none!important;

}



.alumni-hero{


background:white!important;

color:black!important;


}



.section-title{


color:black;


}


}

.footer {
    background: #0b1f3a;
    color: #ccc;
    padding: 40px 20px 20px;
    font-family: Arial, sans-serif;
}

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

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

.logo {
    color: #22c55e;
    margin-bottom: 10px;
}

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

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

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

.footer-col ul li {
    margin-bottom: 8px;
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid #1f3a5f;
    margin-top: 30px;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-bottom a {
    color: #ccc;
    text-decoration: none;
}

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

/* =====================================
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;
    }
}


/* MOBILE */
@media(max-width:992px){

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

    .alumni-hero h1{
        font-size:42px;
    }
}

@media(max-width:600px){

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

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