/* =========================
 OPPORTUNITY DETAILS PAGE
========================= */


/* HERO */


.opportunity-hero{


    background:var(--light);

    padding:120px 10%;

    text-align:center;


}



.opportunity-hero span{


    display:inline-block;

    padding:8px 20px;

    background:var(--accent);

    color:var(--white);

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;


}



.opportunity-hero h1{


    font-family:var(--font-heading);

    font-size:var(--heading-xl);

    color:var(--primary);

    margin-bottom:25px;


}



.opportunity-hero p{


    max-width:750px;

    margin:0 auto 35px;

    font-size:var(--text-lg);

}




.opportunity-hero .btn{


    display:inline-block;

    padding:15px 35px;

    background:var(--accent);

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;


}



.opportunity-hero .btn:hover{


    background:var(--primary);


}






/* OVERVIEW */


.opportunity-overview{


    padding:var(--section-padding);

    display:flex;

    align-items:center;

    gap:60px;


}



.overview-image{


    flex:1;


}



.overview-image img{


    width:100%;

    border-radius:30px;

    box-shadow:0 15px 35px rgba(0,7,68,.15);


}




.overview-text{


    flex:1;


}




.overview-text h2{


    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    color:var(--primary);

    margin-bottom:25px;


}



.overview-text p{


    line-height:1.8;


}





.details{


    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;


}



.details div{


    background:var(--light);

    padding:20px;

    border-radius:20px;

    width:180px;


}



.details h3{


    color:var(--accent);

    font-size:18px;


}






/* BENEFITS */


.benefits{


    padding:90px 10%;

    background:var(--light);


}



.benefits h2,
.eligibility h2,
.activities h2,
.rules h2{


    text-align:center;

    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    color:var(--primary);

    margin-bottom:45px;


}





.cards{


    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;


}



.card{


    width:300px;

    background:white;

    padding:35px;
    border: 1px solid var(--accent);
    border-radius:25px;

    box-shadow:0 12px 35px rgba(0,7,68,.12);

    transition:.3s;


}



.card:hover{


    transform:translateY(-10px);


}



.card h3{


    color:var(--primary);

    font-family:var(--font-heading);

    margin-bottom:15px;


}







/* ELIGIBILITY */


.eligibility{


    padding:90px 10%;

    text-align:center;


}



.eligibility ul{


    max-width:700px;

    margin:auto;

    text-align:left;


}



.eligibility li{


    padding:15px;

    font-size:18px;


}



/* Rules */


.rules{


    padding:90px 10%;

    text-align:center;


}



.rules ul{


    max-width:700px;

    margin:auto;

    text-align:left;


}



.rules li{


    padding:15px;

    font-size:18px;


}







/* ACTIVITIES */


.activities{


    padding:90px 10%;

    background:var(--light);


}



.activity-list{


    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;


}



.activity-list div{


    background:white;

    padding:25px 40px;

    border: 1px solid var(--accent);
    border-radius:25px;

    color:var(--primary);

    font-weight:600;

    box-shadow:0 10px 25px rgba(0,7,68,.12);


}


/* program-partners */


.program-partners{

    background:var(--white);

    padding:80px 10%;

    text-align:center;

}



.program-partners h2{

    font-family:var(--font-heading);

    color:var(--primary);

    font-size:var(--heading-lg);

    margin-bottom:40px;

}



.program-partners-cards{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

}


.partner-card{

width:200px;
flex:0 0 200px;
padding:15px;

text-align:center;

background:white;

border-radius:22px;
transition:.3s;
        background: 
        linear-gradient(#fff, #fff) padding-box, 
        linear-gradient(to top, var(--accent), transparent) border-box,
        linear-gradient(to bottom, var(--orange), transparent) border-box;
        
    border: 1px solid transparent;

}


.partner-card:hover{
    transform:translateY(-12px);
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

.partner-card img{
width:80px;
height:80px;
border-radius: 50%;
object-fit:cover;
margin-bottom:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.4);
}



.partner-card h3{
font-family:var(--font-heading);
color:var(--primary);
}

.partner-card span{
font-family:var(--font-body);
color:var(--text);
font-weight: bold;
font-size: 14px;
}









/* CTA */


.opportunity-cta{


    padding:90px 10%;

    text-align:center;

    background:var(--light);

    color: var(--text);


}



.opportunity-cta h2{


    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    margin-bottom:30px;


}



.opportunity-cta a{


    display:inline-block;

    padding:15px 35px;

    background:var(--orange);

    color:white;

    text-decoration:none;

    border-radius:30px;

    font-weight:600;

    transition: 0.3s;


}



.opportunity-cta a:hover{
    background: var(--primary);
}







/* MOBILE */


@media(max-width:900px){


.opportunity-overview{


    flex-direction:column;


}



.details div{


    width:100%;


}



.card{


    width:100%;


}


.opportunity-hero h1{


    font-size:38px;


}


}