:root {
   --nigeria-green: #0f9366;
   --bg-green-200: #f7fff7;
   --background-green: #f5fff5;

}

html,
body {
   min-width: 320px;
}

* {
   font-family: "Poppins", Arial, Helvetica, sans-serif;
   transition: 0.3s;
}


.hero-wrapper,
.image-gallery-wrapper,
#carouselExampleIndicators,
#About_Us,
#How-it-works,
#Latest-news,
#Video,
#Info-section,
.footer-sections-wrapper {
   /* Padding for all sections */
   padding-left: 5%;
   padding-right: 5%;
}

.rounded {
   border-radius: 15px;
}

.green-btn {
   background-color: green;
   color: whitesmoke;
   transition: 0.3s;
}

.green-btn:hover {
   background-color: green;
   color: whitesmoke;
   transition: 0.3s;
}

.green-text {
   color: green;
}



/* NAVBAR  */

#Nav {
   background-color: var(--bg-green-200);
}

.nav-link:hover {
   box-shadow: 0 2px var(--nigeria-green);
   color: var(--nigeria-green) !important;
   transition: 0.5s;
}

.nav-item {
   margin-right: 5px;
}

.nav-link {
   font-size: 15px;
}

@media (max-width: 769px) {
   .navbar-nav {
      padding-left: 20px;
      padding-right: 20px;
   }
}


/* HERO */
.hero-wrapper {
   display: flex !important;
   flex-direction: column;
   align-items: center;
   background-color: var(--bg-green-200);
   padding-top: 80px;
   padding-bottom: 40px;
}

.hero-wrapper>h2,
h6 {
   text-align: center;
   color: #333;
}

.hero-wrapper h2 {
   font-weight: bold;
   font-size: 2rem;
}

.hero-wrapper>h6 {
   color: gray;
}


/* TOP IMAGE GALLERY */

.image-gallery-wrapper {
   background-color: var(--bg-green-200);
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(4, 20%);
   grid-template-rows: 200px;
   gap: 16px;
   justify-content: center;
   padding-bottom: 80px;
}

.image-gallery-item {
   width: 100%;
   height: 100%;
}

.top-margin {
   margin-top: 22px;
}



/* For tablets */
@media (max-width: 769px) {
   .image-gallery-wrapper {
      display: grid;
      grid-template-columns: repeat(2, 180px);
      grid-template-rows: repeat(2, 180px);
      padding: 10px;

   }
}

/* Mobile device */
@media (max-width: 481px) {

   .image-gallery-wrapper {
      grid-template-columns: auto;
      grid-template-rows: repeat(4, 180px);
      display: none;
   }

   .cta-btn {
      padding: 12px;
   }

   .image-gallery-item {
      margin: 10px 0 !important;
      width: 240px;
   }

}

/********** TOP IMAGE GALLERY ENDS **********/


#carouselExampleIndicators {
   margin-top: 20px;
   margin-bottom: 20px;
}

.carousel-item>img {
   height: 220px;
   border-radius: 15px;
}

@media (min-width: 481px) {
   #carouselExampleIndicators {
      display: none;
   }

}


/********** ABOUT **********/

.about-us-wrapper {
   display: grid;
   grid-template-columns: auto 45%;
   gap: 30px;
}

.about-left {
   display: flex;
   justify-content: end;
   padding-right: 20px;
   margin-bottom: 20px;
   /* justify-content: center; */
   padding-right: 0;

}

.about-right>p {
   text-align: justify;
}



#about-image {
   width: 100%;
   max-width: 500px;
   height: auto;
}

#About_Us {
   padding-bottom: 40px;
   padding-top: 20px;
}

@media (min-width: 769px) {
   .about-right {
      max-width: 400px;
   }
}

@media (max-width: 769px) {
   .about-right {
      max-width: 500px;
   }

   .about-us-wrapper {
      grid-template-columns: auto;
      justify-content: center;
   }
}




/********** ABOUT ENDS *********/


section>h2 {
   text-align: center;
   margin-bottom: 25px;
   margin-top: 40px;
}

/* ********* HOW IT WORKS ********* */

#How-it-works {
   background-color: var(--background-green);
   padding-top: 20px;
}

.hiw-wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding-bottom: 40px;
}

.hiw-item {
   max-height: 280px;
   max-width: 210px;
   text-align: center;
   border: none;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   margin: 10px;
}

.hiw-item > .card-body> {
   display: flex !important;
   flex-direction: row !important;
   align-items: center;
   align-content: center;
   justify-content: center;
   justify-items: center;
}

.hiw-item>.card-body>.card-text {
   font-size: 13px;
}

.hiw-item>.card-body>.card-title {
   font-size: 16px;
}


.card-body>.fa {
   font-size: 50px;
   color: rgba(0, 128, 0, 0.6);
   padding-bottom: 10px;
}

/* For tablets */
@media (max-width: 769px) {

   .hiw-wrapper {
      grid-template-columns: auto auto;
   }

   .hiw-item {
      max-width: 270px;
   }

   .hiw-item>.card-body>.card-title {
      font-size: 18px;
   }

   .hiw-item>.card-body>.card-text {
      font-size: 14px;
   }


}

/* For mobile phones */
@media (max-width: 480px) {
   body {
      font-size: 14px;
   }

   .hiw-wrapper {
      grid-template-columns: auto;
   }
}

/* ********* LATEST NEWS ********* */

#Latest-news {
   padding-bottom: 80px;
   padding-bottom: 80px;
}

.news-item-wrapper {
   display: grid;
   grid-template-columns: 350px 350px;
   gap: 15px;
   justify-content: center;
}

.news-item {
   display: grid;
   grid-template-columns: 120px auto;
   gap: 10px;
   border-radius: 20px;
   border-color: #b3dfb5;
   height: 130px;
   width: 100%;
   max-width: 400px;
   padding: 5px;
   box-sizing: border-box;
   overflow: hidden;
}

.news-image {
   width: 100%;
   height: 100%;
   border-radius: 15px;
}

.news-item-title {
   color: green;
   font-weight: 400;
   font-size: 14px;
   text-decoration: none;
   margin: auto 0;
}

.news-item-title:hover {
   text-decoration: underline;
}

/* For tablets*/
@media (max-width: 769px) {
   .news-item-wrapper {
      grid-template-columns: auto;
   }

}

/* ********* VIDEO ********* */


#Video {
   background-color: var(--background-green);
   padding-top: 40px;
   padding-bottom: 100px;
}

.videos-wrapper {
   display: grid;
   grid-template-columns: repeat(3, 32.5%);
   border: 20px;
   gap: 15px;
   justify-content: center;
}

@media (max-width: 768px) {
   .videos-wrapper {
      grid-template-columns: 100%;
   }

   iframe {
      max-width: 350px;
   }

   .video-item {
      display: flex;
      justify-content: center;
   }
}

iframe {
   width: 100%;
   height: 230px;
   border-radius: 20px;
}

#Info-section {
   padding-top: 40px;
   padding-bottom: 40px;
   display: grid;
   grid-template-columns: repeat(3, 32.5%);
   gap: 15px;
   justify-content: center;
}

.info-heading {
   background-color: green;
   color: white;
   border-radius: 8px;
   padding: 8px;
   width: 100%;
   font-weight: 500;
   text-align: center;
   font-size: 17px;
}

.info {
   padding: 10px 8px;
   border-bottom: 1px solid gray;
   font-size: 15px;
}

.info-item {
   display: flex;
   flex-direction: column;
   /* padding: 12px; */
}

.info-item:last-child {
   border-bottom: none;
}

.info-item>a {
   text-decoration: none;
   color: black;
}

.info-item>a:hover {
   color: green;
}

#Footer {
   position: relative;
   background: url('https://abcreative1.github.io/NYSC/assets/images/nysc-2.jpg');
   background-size: cover;
   background-position: center;
   color: white;
   padding-top: 45px;
   padding-bottom: 65px;
}

#Footer::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 128, 0, 0.8);
   /* Green overlay */
   z-index: 1;
   /* Make sure it stays above */
}

#Footer * {
   position: relative;
   z-index: 2;
   /* Ensure text stays above the overlay */
}

.footer-item>a {
   color: white;
   text-decoration: none;
   margin-top: 14px;
   font-size: 15px;
}

.footer-item {
   display: flex;
   flex-direction: column;
   padding: 15px;
   padding-top: 25px;
}

.footer-item h5 {
   font-size: 20px;
   font-weight: 600;
}

.footer-sections-wrapper {
   display: grid;
   grid-template-columns: 15% 25% 30% 30%;
}

.fa-facebook-square,
.fa-twitter-square,
.fa-instagram {
   display: inline;
   padding: 7px;
   font-size: 25px;
   transition: 0.3s;
}

.fa-facebook-square:hover,
.fa-twitter-square:hover,
.fa-instagram:hover {
   color: lightgray;
}

@media (max-width: 769px) {
   .footer-sections-wrapper {
      grid-template-columns: 100%;
   }

   #Info-section {
      padding-top: 40px;
      display: grid;
      grid-template-columns: 100%;
      gap: 15px;
      row-gap: 40px;
      justify-content: center;
   }

   .info-item {
      /* margin-bottom: 30px; */
   }

   .call-to-action {
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .call-to-action * {
      width: 100%;
      margin-bottom: 15px;
   }
}

.attribution {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   color: white;
   background-color: darkgreen;
   justify-content: space-between;
   align-items: center;
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 20px;
   padding-bottom: 20px;
}

.attribution>p {
   margin-bottom: 0;
   margin: 10px;
}

.attribution>p a {
   text-decoration: none;
   color: whitesmoke;
}

@media (max-width: 481px) {
   .attribution{
         justify-content: center;
   }
   .attribution>p {
      margin-bottom: 15px;
   }
}