@import "./variables.css";

.logo-img img{
 width: 60px;
}
.logo-img span{
color: var(--light);
}
.nav-item{

font-weight: 600;
font-size: 17px;
}
.nav-item a{
color:var(--light) !important;
}
.banner-section{
 background: url(../../images/banner.jpg);
 background-repeat: no-repeat;
 width: 100%;
 background-size: cover;
 height:40.5rem;
 position: relative;
}
.banner-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.main-title{
 position: relative;
 z-index: 1;
}
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: transparent; /* Initial background */
  padding: 10px 65px;
  transition: background-color 0.3s ease-in-out; /* Smooth transition */
  z-index: 10; /* Ensure it stays on top */
}
.header.scrolled {
  background-color:#6589e2; /* Background color after scrolling */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
}
.banner-text{
 padding-top: 20%;
}
.button-group button{
 background: var(--primary);
 padding: 10px 15px;
 color: var(--light);
 border: none;
 border-radius: 30px;
}
.main-title{
 padding: 0  14rem;
}
.main-title p{
 font-size: 18px;
 color: var(--light);
}
.service-icon{ 
 width: fit-content;
 padding: 15px 20px;
 background:var(--primary);
 border-radius: 15px;
}
.service-icon i{
    color: var(--light);
    font-size: 30px;
}
.service-card{
  border-radius: 15px !important;
  border: unset !important;  
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  margin: auto;
}

.card-body h5{
 font-size: 22px;
 font-weight: 600;
}
.service-card .card-body{
 padding: 20px 30px;  
 height: 18rem; 
}
/* why-choose section */
.why-choose-img img{
 width: 100%;
 height: 555px;
 object-fit: cover;
}
.why-choose-item{
 display: flex;
 padding:50px; 
 box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; 
 gap: 30px;
align-items: center;
 
}
.why-choose-icon i{
font-size: 25px;
 color:var(--primary);
}
 /* Empowering Global section  */
.empowering-text p{
 font-size: 18px;   
}
.empowering-item{
 gap: 30px;   
}
.empowering-icon i{
font-size: 40px; 
 color:var(--primary);   
}
.empowering-text p{
 font-size: 16px;
 font-weight: 500;   
}
.empowering-img img{
 width: 100%;
 border-radius: 10px;   
}

/* faq section */
.accordion{
 padding: 0 115px;
}
.accordion-header button{
 font-size: 22px;    
 background: unset !important;
font-weight: lighter;
box-shadow: unset !important;
font-weight: normal;
}
.accordion-header button:focus{
  box-shadow: unset;
  color: var(--primary);
}
.accordion-header button span{
 margin-right: 30px;
 color:#b7b7b7 ;
 font-size: 20px;
}
.accordion-body{
color:#757778; 
}
.accordion-item{
 padding: 30px 0;
 border: unset !important;
 border-bottom: 1px solid #e8e7e7 !important;
}
.content2{
    margin-top: 50px;
}
/* jion section */
.join-main{
 padding: 80px;
 background: #d9f0ff;
 border-radius: 20px;
}
.jion-img img{
 height: 22rem;
 border-radius: 15px;   
}
.join-text h2{
 font-weight: 600;
}

.footer{
 background:#14161a;
 padding: 40px;
}
.footer-text h4{ 
color: var(--light);
font-size: 20px;
opacity: 0.6;
}
/* donate content */
.donate-btn button{
padding: 6px 40px;
letter-spacing: 0.5px;
font-weight:500; 
}
.donate-content {
 background: #b4c7e7;
 width: 26rem;
 padding: 5px 8px;
 border-radius: 30px;
 border: 1px solid #344b78;
}
.donate-content ul{
  padding-left: 1rem;
 
}
.donate-content p, .donate-content ul{
 font-size: 13px;
  color: black ;
}
.donate-content p span, .donate-content ul li span{
  color: #042dcf;
  font-weight: 600;
}