@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap'); */

:root {
  --paragraph-color: #656c7a;
  --btn-color: #ffffff;
  --blue-color: #000c90;
  --orange-color: #f25c2a;
  --heading-color: #000000;
  --bg-color: #11164f;
  --footer-bg: #f1f3f6;
  --btn-font: 0.1rem;
  --footer-text: #7d7d7d;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

/*================================== header section==================================== */
.header-mobile {
  color: #272d4e;
}

.navbar-brand img {
  max-height: 60px;
}

.navbar-light .navbar-nav .nav-link {
  color: #000;
  text-transform: capitalize;
}



li {
  list-style-type: none;
}

.custom-hamburger-btn {
  border: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding-right: 2.5%;
  cursor: pointer;
}

.line-1,
.line-2,
.line-3 {
  width: 30px;
  height: 4px;
  background-color: rgb(22, 21, 21);
  margin: 2.5px 0;
  transition: 0.4s;
}

/* Toggle class to  change the state of hambuger icon cross*/
.toggle .line-1 {
  transform: translateY(12px) rotate(135deg);
}

.toggle .line-2 {
  opacity: 0;
}

.toggle .line-3 {
  transform: translateY(-6.89px) rotate(-135deg);
}
.btn {
  background-color: var(--orange-color);
  outline-color: transparent;
  color: var(--btn-color);
  border-radius: 4px;
}
.btn:hover {
  color: var(--btn-color);
}
nav .btn{
  padding: 10px;
  min-width: 197px;
}
/* =================================Main section============================= */

/* ==================================INDEX PAGE STYLE============================ */ 
/* hero-section */
 .hero-section {
   margin-bottom: 40px;
 }
 .hero-content {
   text-align: center;
 }
 .hero-section .hero-content h3 {
  font-family: Gotham;
  font-size: 24px;
  font-style: normal;
  font-weight: 350;
  line-height: 30px;
  letter-spacing: 0em;
  /* text-align: left; */
  margin-top: 30px;  
  color: var(--heading-color);
 }
 .hero-section .hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: 75px;
  letter-spacing: 0em;
  /* text-align: left;   */
  color: var(--heading-color);
 }
.hero-section .hero-content p {
  font-family: Gotham;
  font-size: 20px;
  font-style: normal;
  font-weight: 325;
  line-height: 40px;
  letter-spacing: 0em;
  /* text-align: left;  */
  color: var(--heading-color); 
}
.hero-section .hero-content .button-group .btn {
  background-color: var(--bg-color);
  outline-color: transparent;
  border: 1px solid var(--bg-color);
  width: 100%;
  height: 64px;
  color: var(--btn-color);
  border-radius: 4px;
  font-family: Gotham;
  font-style: normal;
  font-weight: 350;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  margin-top: 5px;
}
.hero-section .hero-content .button-group .btn-1:hover {
  background-color: var(--bg-color);
  outline-color: transparent;
  color: var(--btn-color);
}
.hero-section .hero-content .button-group .btn-2{
  background-color: var(--btn-color);
  color: var(--orange-color);
  border: 2px solid var(--orange-color);
}
.hero-section .hero-content .button-group .btn-2:hover{
  background-color: var(--orange-color);
  outline-color: transparent;
  color: var(--btn-color);
}
.hero-section .hero-content .fa-angle-right{
  top: 55px;
}
.hero-section img {
  margin-top: 20px;
}
 /* .hero-section-end */

 /* mission-section */
 .mission-section {
   background-color: var(--bg-color);
   color: var(--btn-color);
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin: 20px auto;
   width: 100%;
 }
 .mission-section .mission-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 54px;
  font-style: normal;
  font-weight: 700;
  line-height: 71px;
  letter-spacing: 0em;
  margin-top: 40px;
 }
 .mission-section .mission-content p {
  font-family: Gotham;
  font-size: 24px;
  font-style: normal;
  font-weight: 325;
  line-height: 40px;
  letter-spacing: 0em;
  max-width: 823px;
  margin: 0 auto;
  margin-top: 30px;
 }
 .mission-section .mission-content .btn{
  background-color: var(--orange-color);
  color: var(--btn-color);
  border: 2px solid var(--orange-color);
  font-family: Gotham;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: 0px;
  text-align: center;
  width: 197px;
  height: 64px;
  margin: 30px auto;
}
 /* mission-section-end */

 /* Outreach-section */
 .outreach-section {
   margin: 40px auto 30px;
 }
 .outreach-section h1, .event-section h1, .impact-section h1 {
  font-family: 'Playfair Display', serif;
  font-size: 54px;
  font-style: normal;
  font-weight: 700;
  line-height: 71px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--heading-color);
 }
 .outreach-section .card {
   height: 100%;
   border-radius: none;
   border: none;
 }
 .outreach-section img{
   height: 341px;
   margin-bottom: 10px;
 }
 .outreach-section .text-div {
   background-color: var(--bg-color);
   height: 100%;
   color: var(--btn-color);
   display: flex;
   justify-content: center;
   align-items: center;
 }
.outreach-section .text-div h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 164px;
  letter-spacing: 0.20000000298023224px;
  text-align: center;
}
 /* Outreach-section-end */

 /* Event-Section */
 .event-section {
   margin: 10px auto 40px;
 }
 .event-section .card {
   margin-top: 30px;
   border-radius: 4px;
  /* box-shadow: 5px 10px 18px #b6b4b4; */
  box-shadow: 0px 4px 4px rgba(0.5, 0.5, 0.5, 0.15);
 }
.event-section .card img{
  width: 90%;
  margin: 30px auto 20px;
  border: 10px;
}
.event-section .card-body h5 {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 0em;
  max-width: 430px;
  text-align: left;
}
.event-section .card-body h6 {
  font-family: Gotham;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0em;
  text-align: left;
  margin-top: 20px;
  color: #2E2E2E;
}
.event-section .card-body a {
  font-family: Gotham;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  color: #11164F;
}
.event-section p  {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
  color: #11164F;
  text-align: center;
}

.event-section p a {
  color: #11164F;
}
 /* Event-section-end */

 /* Impact-Section */
 .impact-section{
   margin: 40px auto;
 }
 .impact-section h1 {
   margin-bottom: 40px;
 }
 .impact-section .parent-div {
   display: flex;
   flex-direction: column;
   margin-top: 5px;
 }
 .impact-section .parent-div h4 {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 71px;
  background-color: var(--bg-color);  
  color: #ffffff;
  width: 81px;
  height: 69px;
  padding: 10px
 }
 .impact-section .parent-div .box-2 h4 {
  background-color: var(--orange-color);  
  color: #ffffff;
 }
 .impact-section .parent-div h3{
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
  color: var(--heading-color);
 }
 .impact-section .parent-div p {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 29.5px;
  color: #1A1818;
  min-width: 211px;
 }
 /* Impact-section-end */

 /* Banner-section */
 .banner{
   margin: 30px auto 80px;
 }
 .banner .card{
   height: 100%;
   background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url("../image/about-images/banner-image\ \(1\).png");
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   padding: 30px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 .banner .card h1 {
  font-family: 'Playfair Display', serif;
  font-size: 54px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 0em;
  margin-top: 40px ;
  color: #ffffff;
 }
 .banner .card .button-group {
   margin-top: 40px;
 }

.banner .card .button-group .btn {
  background-color: var(--blue-color);
  outline-color: transparent;
  border: 1px solid var(--blue-color);
  width: 100%;
  height: 64px;
  color: var(--btn-color);
  border-radius: 4px;
  font-family: Gotham;
  font-style: normal;
  font-weight: 350;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  margin-top: 10px;
}
.banner .card .button-group .btn-2{
  background-color: var(--orange-color);
  color: var(--btn-color);
  border: 2px solid var(--orange-color);
}
.banner .card .button-group .btn-2:hover{
  background-color: var(--orange-color);
  outline-color: transparent;
  color: var(--btn-color);
}
 /* Banner-section end */

/* suscribe-section */
.suscribe___section .card{

  background: linear-gradient(90.06deg, #11164f 0.05%, #f25c2a 99.94%);
  border-radius: 8px;
  color: var(--btn-color);
  
}
#event-card {

  background: linear-gradient(90.06deg, #11164f 0.05%, #f25c2a 99.94%);
  border-radius: 8px;
  color: var(--btn-color);
}
.form-group{
  display: flex;
}
.form-control {
  outline-color: none !important;
  border-radius: 0px;
  background-color: transparent;
  color: var(--btn-color);
  border: 1px solid var(--bg-color);
  padding-right: 50px;
}
.suscribe-btn{
  background-color: var(--bg-color);
  color: var(--btn-color);
  border: 1px solid var(--bg-color);
  width: 50px;
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--btn-color);
  opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}
/* suscribe-end */

.section___banner{
  background-image: url(../images/banner-img.png);
  background-size: cover;
  height: 100vh;  
 background: linear-gradient(95.48deg, rgba(17, 22, 79, 0.25) 7.96%, #11164F 60.32%);
}
.section___text{
 background: linear-gradient(95.48deg, rgba(17, 22, 79, 0.25) 7.96%, #11164F 60.32%);
}

#donate___section{
  height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url(../images/banner-img-one.png);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: 30px;  
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);  
}
#outreach___img___section{
  height: 90vh;
  background-image:  url(../images/banner-img-two.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.section___team h1, .section___value h1,.heading-vision,.section___africa h1{
  font-family: 'Playfair Display', serif;
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: 75px;
  letter-spacing: 0em;
  /* text-align: left;   */
  color: var(--heading-color);
 }

 .section___africa p, .section___vision p{
  line-height: 45px;
 }
/* ==================================END OF INDEX PAGE STYLE============================ */

/* ==================================VOLUNTEER PAGE STYLE============================ */
/* .volunteer-hero-section */
.volunteer-hero-section {
  text-align: center;
  margin: 0 auto 40px;
}
.volunteer-hero-section h1 {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 71px;
  text-align: center;
  color: #2E2E2E;
}
.volunteer-about-section .volunteer-about-content h1 {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 71px;
  color: #2E2E2E;
}
.volunteer-about-section .volunteer-about-content p {
  max-width: 512px;
  font-family: Gotham;
  font-style: normal;
  font-weight: 325;
  font-size: 16px;
  line-height: 32px;
  color: #000000;
}
.volunteer-about-section .volunteer-about-content .btn {
  width: 142px;
  height: 52px;
  background-color: var(--btn-color);
  color: var(--blue-color);
  border: 2px solid var(--bg-color);
  margin-top: 20px;
       
font-family: Gotham;
font-style: normal;
font-weight: 350;
font-size: 16px;
line-height: 34px;
}
.volunteer-about-section .volunteer-about-image img{
  margin-top: 40px;
}
/* .volunteer-hero-section-end */

/* volunteer-testimony-section */
.volunteer-testimony-section{
  margin: 30px auto;
  text-align: center;
}
.volunteer-testimony-section h1{
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 40px;
  color: #000000;
  margin: 20px auto;
}
.volunteer-testimony-section p{
  font-family: Gotham;
  font-style: normal;
  font-weight: 325;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  color: #000000;
  max-width: 727px;
  margin: 0 auto 20px;
}
.volunteer-testimony-section img {
  margin: 5px auto;
}
.volunteer-testimony-section blockquote {
  padding: 6px 16px;
  border: none;
  quotes: "\201C" "\201D";
  display: inline-block;
  position: relative;
  color: #2E2E2E;
  font-family: 'Playfair Display', serif;
  max-width: 400px;
}

.volunteer-testimony-section blockquote:before { 
  content: open-quote;
  font-weight: bold;
  font-size: 52px;
  position:absolute;
  top:0;
  left: 0;
} 
.volunteer-testimony-section blockquote:after { 
  content: close-quote;
  font-weight: bold;
  font-size: 52px;
  position:absolute;
  bottom:0; right: 0;
}
/* volunteer-testimony-section-end */

/* volunteer-donate-section */
.volunteer-donate-section{
  margin: 40px auto 20px;
}
.volunteer-donate-section h1{
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 43px;
  text-align: center;
  color: #2E2E2E;
  margin: 5px auto 30px;
}
.volunteer-donate-section .btn {
  width: 170px;
  height: 52px;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
  letter-spacing: 0.2px;
  margin: 20px auto;
}
/* volunteer-donate-section-end */
/* ==================================END OF VOLUNTEER PAGE STYLE============================ */


/* =================================Footer section============================= */
.footer___section {
  background-color: var(--footer-bg);
  padding: 50px 20px 70px;
  color: var(--footer-text) !important;
}
.footer___section,
.nav-link {
  color: var(--footer-text) !important;
  text-align: left;
}
span .fa {
  font-size: 30px;
  padding-top: 9px;
  padding-right: 9px;
}

/* ===================================Media Query================================== */
@media (min-width: 1024px) {
   .hero-content{
    text-align: left;
  }
  .hero-section .hero-content h3 {
    margin-top: 100px;  
   }
  .hero-section .hero-content h1 {
    font-size: 85px;
    line-height: 110px;
   }
   .hero-section .hero-content .button-group .btn {
     width: 197px;
     height: 64px;
   }
   /* mission-section */
   
 .mission-section .mission-content h1 {  
  font-style: normal;
  font-weight: bold;
  font-size: 64px;
  line-height: 71px;
 }
 .mission-section .mission-content p {
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 40px;
 }
 /* .impact-section */
   .impact-section .parent-div {
    display: flex;
    flex-direction: row;
   }
   
 .impact-section .parent-div h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 71px;
 }
 .impact-section .parent-div .box-2 h4 {
  background-color: var(--orange-color);  
  color: #ffffff;
 }
 .impact-section .parent-div h3{
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
 }
 .impact-section .parent-div p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 29.5px;
 }
  /* .outreach-section */
 .outreach-section h1, .event-section h1, .impact-section h1 {
  font-style: normal;
  font-weight: bold;
  font-size: 64px;
  line-height: 71px;
  text-align: left;
 }
 .outreach-section .text-div h4 {
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 44px;
}
/* .event-section */
.event-section .card-body h5 {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
}
.event-section .card-body h6 {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
}
.event-section .card-body a {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
}
.event-section p {
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
}
   .banner .card h1 {
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 34px;
   }
   .banner{
    margin: 70px auto 100px;
  }
  .banner .card .button-group .btn{
    width: 197px;
    height: 64px;
    margin-right: 10px;
    
  }

  /* Volunteer page */
  .volunteer-hero-section h1 {    
  font-size: 64px;
  line-height: 70px;
  color: #000000;
  }
  .volunteer-about-section .volunteer-about-content h1 {
    font-size: 48px;
    line-height: 60px;
    text-align: left;
    color: #000000;
  }
  .volunteer-about-section .volunteer-about-content .btn {
    width: 220px;
    height: 64px;
    line-height: 50px;
    background-color: var(--bg-color);
    color: var(--btn-color);
}
/* .volunteer-testimony-section */
.volunteer-testimony-section {
  margin: 70px auto 10px;
}
.volunteer-testimony-section h1{
  margin: 40px auto;
  font-size: 64px;
  line-height: 40px;
  color: #000000;
}
.volunteer-testimony-section p{    
  font-weight: normal;
  font-size: 24px;
  line-height: 40px;
}
/* .volunteer-donate-section */
.volunteer-donate-section h1{
font-size: 64px;
line-height: 70px;
text-align: center;
color: #000000;
  margin: 5px auto 30px;
}
}