/* =====================================================
   ADRAA AGRICULTURE COLLEGE
   STUDENTS' GUILD PAGE STYLES
===================================================== */


/* =========================
   ROOT VARIABLES
========================= */

:root{

--primary-green:#116530;
--dark-green:#064420;
--light-green:#eaf7ee;
--gold:#d4af37;
--white:#ffffff;
--dark:#1d1d1d;
--gray:#6c757d;

}


/* =========================
   GENERAL
========================= */


body{

font-family:'Segoe UI', Arial, Helvetica, sans-serif;
background:#ffffff;
color:#333;
line-height:1.7;

}


section{

overflow:hidden;

}


.section-title{

font-weight:800;
font-size:2.2rem;
color:var(--dark-green);
margin-bottom:15px;

}


.section-tag{

display:inline-block;
background:var(--light-green);
color:var(--primary-green);
font-weight:700;
padding:6px 18px;
border-radius:30px;
text-transform:uppercase;
font-size:.85rem;
letter-spacing:1px;

}




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


.guild-hero{

background:

linear-gradient(
rgba(0,50,20,.75),
rgba(0,50,20,.75)
),

url("../images/student-campus.jpg");

background-size:cover;
background-position:center;

color:white;

}


.hero-overlay{

padding:80px 0;

}


.min-vh-75{

min-height:75vh;

}



.hero-badge{

display:inline-block;

background:var(--gold);

color:#111;

padding:8px 20px;

border-radius:30px;

font-weight:700;

}



.hero-image{

max-height:450px;

border-radius:30px;

border:8px solid rgba(255,255,255,.2);

object-fit:cover;

}



.btn-warning{

background:var(--gold);

border:none;

color:#000;

font-weight:700;

}


.btn-warning:hover{

background:#b89620;

color:white;

}





/* =========================
 DEAN SECTION
========================= */


.dean-photo{

border:8px solid white;

}


.feature-list{

list-style:none;

padding:0;

}


.feature-list li{

margin-bottom:12px;

font-weight:600;

}



.feature-list i{

color:var(--primary-green);

margin-right:8px;

}




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


.responsibility-card,
.committee-card,
.objective-card,
.service-card,
.leader-card,
.purpose-card,
.welfare-box{

background:white;

border-radius:20px;

padding:30px;

box-shadow:

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

transition:.4s ease;

height:100%;

}



.responsibility-card:hover,
.committee-card:hover,
.objective-card:hover,
.service-card:hover,
.leader-card:hover{


transform:translateY(-10px);

box-shadow:

0 15px 40px rgba(0,0,0,.15);

}





.icon-box{

height:70px;

width:70px;

background:var(--light-green);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

}



.icon-box i{

font-size:2rem;

color:var(--primary-green);

}




/* =========================
 GUILD SECTION
========================= */


.guild-section{

background:#fff;

}


.purpose-card{

border-left:6px solid var(--gold);

}



.purpose-icon{

font-size:4rem;

color:var(--primary-green);

}





/* =========================
 OBJECTIVES
========================= */


.objective-card{

position:relative;

padding-top:50px;

}



.objective-number{

position:absolute;

top:15px;

right:20px;

font-size:2.5rem;

font-weight:900;

color:#e5e5e5;

}


.objective-card h4{

color:var(--primary-green);

font-weight:700;

}




/* =========================
 MEMBERSHIP
========================= */


.membership-card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:

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

}



.membership-number{

height:45px;

width:45px;

background:var(--primary-green);

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

font-size:1.3rem;

margin-right:20px;

flex-shrink:0;

}





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


.leader-card{

padding:0;

overflow:hidden;

}



.leader-image img{

width:100%;

height:270px;

object-fit:cover;

}



.leader-content{

padding:25px;

text-align:center;

}



.leader-content h5{

color:var(--dark-green);

font-weight:800;

}




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


.committee-card{

text-align:center;

}



.committee-card i{

font-size:3rem;

color:var(--primary-green);

margin-bottom:20px;

}




/* =========================
 ASSOCIATIONS
========================= */


.association-card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:

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

transition:.4s;

}



.association-card:hover{

transform:translateY(-8px);

}



.association-card img{

height:300px;

width:100%;

object-fit:cover;

}



.association-body{

padding:30px;

}




/* =========================
 RESIDENCE
========================= */


.residence-card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:

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

}



.residence-card img{

height:350px;

width:100%;

object-fit:cover;

}



.residence-content{

padding:30px;

}



.residence-content h3{

color:var(--primary-green);

font-weight:800;

}



.residence-content ul{

padding-left:20px;

}





/* =========================
 DINING
========================= */


.service-list div{

background:var(--light-green);

padding:15px;

margin-bottom:12px;

border-radius:10px;

font-weight:600;

}



.service-list i{

color:var(--primary-green);

font-size:1.3rem;

margin-right:12px;

}




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


.gallery img{

height:280px;

width:100%;

object-fit:cover;

transition:.4s;

}



.gallery img:hover{

transform:scale(1.05);

}





/* =========================
 TIMELINE
========================= */


.timeline{

position:relative;

max-width:900px;

margin:auto;

}



.timeline:before{

content:"";

position:absolute;

left:50%;

top:0;

bottom:0;

width:4px;

background:var(--gold);

transform:translateX(-50%);

}



.timeline-item{

background:white;

padding:25px;

border-radius:15px;

box-shadow:

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

width:45%;

margin-bottom:40px;

position:relative;

}



.timeline-item:nth-child(even){

margin-left:55%;

}



.timeline-item h4{

color:var(--primary-green);

font-weight:800;

}





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


.guild-cta{

background:

linear-gradient(
rgba(0,70,30,.9),
rgba(0,70,30,.9)
),

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

background-size:cover;

background-position:center;

padding:80px 0;

color:white;

}



.guild-cta h2{

font-size:2.5rem;

font-weight:800;

}





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


@media(max-width:992px){


.section-title{

font-size:1.8rem;

}



.timeline:before{

left:20px;

}


.timeline-item,
.timeline-item:nth-child(even){

width:90%;

margin-left:50px;

}



.hero-overlay{

padding:50px 0;

}


}




@media(max-width:768px){


.hero-image{

margin-top:30px;

}


.leader-image img{

height:230px;

}


.residence-card img{

height:250px;

}



.guild-cta h2{

font-size:1.8rem;

}



}



@media(max-width:576px){


.section-title{

font-size:1.5rem;

}



.responsibility-card,
.committee-card,
.objective-card{

padding:20px;

}



.timeline-item{

margin-left:35px!important;

width:90%;

}



}

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

.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 */
@media(max-width:768px){

    .nav-menu{
        display:none;
        flex-direction:column;
    }

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

    .hamburger{
        display:block;
        cursor:pointer;
    }

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