/* CSS Reset Code */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family: "Fira Sans", sans-serif;
}

/* Shared Style */
.container{
    width:90%;
    max-width:1260px;
    margin:auto;
}
.btn{
    padding:0.75rem 1.5rem;
    color:rgba(0, 106, 80, 1);
    border:0.0625rem solid rgba(0, 106, 80, 1);
    background:transparent;
    border-radius:0.3125rem;
    font-size:1rem;
    font-weight:500;
    line-height:1.1rem;
    letter-spacing:0.0625rem;
    transition:0.3s;
    cursor:pointer;
}

section{
    margin:4rem 0rem;
}
.headline{
    color: rgba(14, 14, 14, 1);
    font-size:1.975rem;
    font-weight: 700;
    line-height:2.37rem;
    letter-spacing:0.0625rem;
}



/* Header Section Design */
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:1.5rem 0rem;
}
nav .logo{
    color: rgba(14, 14, 14, 1);
    font-size:1.5rem;
    font-weight: 700;
    line-height:1.8rem;
    letter-spacing:0.0625rem;
    cursor:pointer;
}
nav .nav-link{
    display:flex;
    align-items: center;
    gap:2rem;
}
.nav-item{
    list-style-type:none;
}
.nav-links{
    text-decoration:none;
    color:rgba(0, 106, 80, 1);
    font-size:1rem;
    font-weight:400;
    line-height:1.1rem;
    letter-spacing:0.0625rem;
}
.nav-links:hover{
    color:rgb(1, 70, 52);
}
.nav-btn:hover{
    background-color:rgba(0, 106, 80, 1);
    color:#ffffff;
}



/* Hero Section Design */
.hero-section{
    border-radius: 1.18rem;
    background: rgba(198, 228, 214, 1);
}
.hero-content{
    padding: 4rem 5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.hero-text h4{
    color: rgba(14, 14, 14, 0.5);
    font-size:1.185rem;
    font-weight: 500;
    line-height:1.43rem;
}
.hero-text .hero-title{
    color: rgba(14, 14, 14, 1);
    font-size:2.765rem;
    font-weight: 700;
    line-height:3.30rem;
    margin:1rem 0rem 1.5rem 0rem;
}
.btn-hero{
    background-color:rgba(0, 106, 80, 1);
    color: rgba(255, 255, 255, 1);
    font-size:1rem;
    font-weight: 600;
    line-height:1.5rem;
    letter-spacing:0.0625rem;
    transition:0.3s;
    border:0.125rem solid rgba(0, 106, 80, 1);
}
.btn-hero:hover{
    background:transparent;
    color:rgba(0, 106, 80, 1);
}




/* Pillars Section Design */

.pillars-content{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.185rem;
    margin-top:1.58rem;
}
.pillars-box{
    box-sizing: border-box;
    border: 0.0625rem solid rgba(14, 14, 14, 0.15);
    border-radius:1rem;
    background: rgba(255, 255, 255, 1);
    padding:1.185rem;
}
.box-subtitle{
    color: rgba(14, 14, 14, 0.8);
    font-size:1rem;
    font-weight: 700;
    line-height:1.185rem;
    margin:0.75rem 0rem;
}
.box-description{
    color: rgba(14, 14, 14, 0.7);
    font-size:0.875rem;
    font-weight: 400;
    line-height:1.185rem;
}




/* Vision Section Design */
.vision-content{
    margin-top:1.58rem;
    display: flex;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
}
.vision-box{
    padding:1.2rem;
    width:100%;

}
.vision-description{
    margin-top:1rem;
    line-height:1.5rem;
}
.vision-box:nth-child(1){
    border-radius: 16px;
    background: rgba(84, 144, 245, 0.2);
}
.vision-btn-1{
    margin-top:1.5rem;
    background-color: rgba(84, 144, 245, 1);
    border:0.125rem solid rgba(84, 144, 245, 1);
    color:#ffffff;
    transition:0.3s;
}
.vision-btn-1:hover{
    background:transparent;
    color:rgba(84, 144, 245, 1);
}

.vision-box:nth-child(2){
    border-radius: 16px;
    background: rgba(198, 228, 214, 1);
}
.vision-btn-2{
    margin-top:1.5rem;
    background-color: rgba(9, 161, 92, 1);
    border:0.125rem solid rgba(9, 161, 92, 1);
    color:#ffffff;
    transition:0.3s;
}
.vision-btn-2:hover{
    background:transparent;
    color:rgba(9, 161, 92, 1);
}
.vision-box:nth-child(3){
    border-radius: 16px;
    background: rgba(247, 235, 207, 1);
}
.vision-btn-3{
    margin-top:1.5rem;
    background-color: rgba(255, 194, 57, 1);
    border:0.125rem solid rgba(255, 194, 57, 1);
    color:#ffffff;
    transition:0.3s;
}
.vision-btn-3:hover{
    background:transparent;
    color:rgba(255, 194, 57, 1);
}




/* Quote Section Design */

.quote-content {
    border:0.0625rem solid rgba(14, 14, 14, 0.15);
    border-radius:1rem;
    background: rgba(255, 255, 255, 1);
    padding:1.8rem;
}
.quote-text-item{
    background-image:url(../image/quote-bg.png);
    background-position:left top;
    background-repeat: no-repeat;
    padding:0.7rem;
}
.quotation-para{
    color: rgba(14, 14, 14, 0.8);
    font-size:0.9rem;
    font-weight: 400;
    line-height:1.5rem;
    margin-bottom:0.75rem;
    text-align: justify;
}
.quote-text-item h5{
   color: rgba(14, 14, 14, 0.8);
    font-size:1rem;
    font-weight: 600;
    line-height:1.5rem;
}
.quote-text-item h6{
    color: rgba(14, 14, 14, 0.6);
    font-size:0.9rem;
    font-weight: 400;
    line-height:1.5rem;
}



/* Opinion Section Design */

.opinion-content{
    border-radius:1rem;
    background: rgba(255, 255, 255, 0.945);
    margin-top:1.5rem;
}
.opinion-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.0625rem solid rgba(14, 14, 14, 0.15);
    background: rgba(198, 228, 214, 1);
}
.opinion-header h5{
    color: rgba(14, 14, 14, 1);
    font-size:1rem;
    font-weight: 600;
    line-height:1.5rem;
    padding:1rem;
}
.opinion-data{
    display: flex;
    justify-content: space-between;
    align-items:center;
    border: 0.0625rem solid rgba(14, 14, 14, 0.15);
}
.opinion-description{
    width:80%;
    padding:1.5rem;
    border-right:0.0625rem solid rgba(14, 14, 14, 0.568);
}
.opinion-description p{
    color: rgba(14, 14, 14, 1);
    font-size:1rem;
    font-weight: 500;
    line-height:1.2rem;
}
.opinion-button{
    margin: auto;
}
.opinion-button select{
    box-sizing: border-box;
    border: 1px solid rgba(14, 14, 14, 1);
    border-radius: 4px;
    background: rgba(198, 228, 214, 1);
    padding:12px;

    color: rgba(14, 14, 14, 1);
    font-size:0.9rem;
    font-weight: 500;
    line-height:1.2rem;
}




/* News Section Design */
.news-content{
    margin-top:2rem;
}
.news-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:1.5rem;
}
.news-item img{
    border-radius:0.625rem;
}
.news-title{
    color: #252525;
    font-size:1.58rem;
    margin-bottom:0.625rem;
}
.news-logo{
    width:auto;
    margin-bottom:0.625rem;
}
.news-subtitle{
    color:#0e0e0ec5;
    margin-bottom:0.625rem;
    font-weight: 400;
    font-size:0.9rem;
}
.news-description{
    line-height:1.5rem;
    margin-bottom:1.5rem;
    font-size:0.9rem;
}
.news-item-2{
    flex-direction:row-reverse;
    margin:3rem 0rem;
}
.news-btn{
    background-color:rgba(0, 106, 80, 1);
    color:#ffffff;
}
.news-btn:hover{
    background-color: transparent;
    color:rgba(0, 106, 80, 1);
}




/* Donate Section Design */
.donate-title{
    text-align: center;
}
.donate-description{
    text-align: center;
}
.donate-box-item{
    margin-top:2rem;
    display: grid;
    grid-template-columns:repeat(4, 10rem);
    justify-content: center;
    gap:2rem;
}
.donate-box{
    height:6rem;
    border:0.0625rem solid #d1d0d0;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:0.3125rem;
}
.donate-box:hover{
    background-color:#C6E4D6;
}
.donate-box p{
    color:#0E0E0E;
    font-size:1.5rem;
}
.donate-full-btn{
    width:65%;
    margin:1.5rem auto;
    text-align: center;
    padding:1rem;
    border:0.0625rem solid #e2e1e1;
}
.donate-full-btn small{
    color:#0e0e0e70;
}
.donate-btn{
    margin:2rem auto;
    text-align: center;
}




/* Newsletter section design */
.newsletter-content{
    background-color: #C6E4D6;
    padding:5rem 6rem;
    border-radius:0.625rem;
    display: flex;
    justify-content: center;
    align-items:center;
}
.newsletter-text-item{
    text-align: center;
}
.newsletter-description{
    margin:1rem 0rem;
}
.btn-group{
    display:flex;
    justify-content: center;
}
input{
    padding:0.8rem;
    border:0.0625rem solid #c5c4c4;
}
.news-small-para{
    margin-top:1.5rem;
    text-align: center;
    color: #0e0e0e9c;
}



/* Footer Section  */
footer{
    margin-bottom:2rem;
}
.footer-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
.social-icon{
    margin-top: 1.5rem;
}
.social-icon i{
    font-size:1.5rem;
    margin-right:1rem;
}
.social-icon i:last-child{
    margin-right:0rem;
}
.social-icon i:nth-child(1){
    color:royalblue;
}
.social-icon i:nth-child(2){
    color:red;
}
.social-icon i:nth-child(4){
    color:dodgerblue;
}
.social-icon i:nth-child(5){
    color:rgb(223, 0, 0);
}







/*=======================
     Media Query Style 
=========================*/

/* Smaller Device */

@media screen and (max-width:768px){
    nav{
        flex-direction:column;
        gap:1rem;
    }
    .hero-content{
        flex-direction:column-reverse;
        padding:2rem;
        gap:2.5rem;
        text-align:center;
    }
    .hero-text .hero-title{
        font-size:2rem;
    }
    .hero-content img{
        width:100%;
    }


    .headline{
    font-size:1.5rem;
    }
    .pillars-content{
    grid-template-columns:repeat(1, 1fr);
    }


    .vision-content{
    flex-direction: column;
    }

    .opinion-description{
        width: 68%;
        padding:1rem;
    }
    .opinion-description p{
        font-size: 0.9rem;
    }

    .news-item{
        flex-direction:column;
        text-align: left;
    }
    .donate-box-item{
        grid-template-columns:repeat(1, 300px);
    }
}






/* Medium Device */
@media screen and (min-width:769px) and (max-width:992px){
    .hero-content{
        flex-direction:column-reverse;
        padding:2rem;
        gap:2.5rem;
        text-align:center;
    }
    .hero-text .hero-title{
        font-size:2rem;
    }
    .hero-content img{
        width:100%;
    }

    .pillars-content{
    grid-template-columns:repeat(2, 1fr);
    }
    .headline{
    font-size:1.7rem;
    }
}