/* Nunito sans serif font*/

  @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); 
  /* Smooth scrolling*/

html{
    scroll-behavior: smooth;
}
  /* CSS variables*/

:root{
    --light-green: #4caf50;
    --green: #005603;

    --dark-green: #137752;
    --white-: #fff;
    --black-: #121212;
    --box-background: rgba( 255, 255, 255, 0.6 );
    --box-shadow: 0 8px 32px 0 rgba(31, 135, 93, 0.37);
    --box-blur: blur( 7.5px );
    --box-blur-2: blur( 7.5px );
    --box-border:  1px solid rgba( 255, 255, 255, 0.18 );
    --most-common-position: center;
    --most-common-em: 1em;
    --very-light-green: rgba(231, 240, 231, 0.6);
    --reviews-background: rgba(2, 52, 2, 0.6);

}

  /* Global styles*/

  
p {
  margin-top: var(--most-common-em);
  
}

a{
  text-decoration: none;
}

button {
  margin-top: var(--most-common-em);
}


body{
    font-family: 'Nunito', sans-serif;
    line-height: 2em;
}
  /* Styles for all buttons*/

.btn {
    padding: 10px 20px;
    margin: 0 10px;
    background-color: var(--dark-green);
    color: var(--white-);
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .btn:hover{
    background-color: var(--dark-green);
  }

    /* Navbar style*/
.navbar{
  position: sticky;
  top: 0;
  z-index: 2;
}

.contact-top{
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  display: inline-block;
  padding: 10px;
  border-radius: 50%;
}

.icon a {
  color: var(--white-);
  text-decoration: none;
}

.icon i {
  font-size: 24px;
}



.contact-top a{
  text-align: center;
}

    /* Styles for all textboxes (usually headings)*/


  .textbox{
    background: var(--box-background);
    box-shadow: var(--box-shadow);
    backdrop-filter: var(--box-blur);
    -webkit-backdrop-filter: var(--box-blur-2);
    border-radius: 10px;
    border: var(--box-border);
    width: 50%;
    margin: auto;
    margin-top: 0.5em;
    padding: var(--most-common-em);
      }
    


      .textbox h1{
        text-align: var(--most-common-position);
      }

      .textbox h3{
        text-align: var(--most-common-position);
      }

      .textbox p{
        text-align: var(--most-common-position);
      }

      .about-us p{
        text-align: var(--most-common-position);
     }
  /* Styles hero section*/
  

.hero {
    position: relative;
    text-align: var(--most-common-position);
    background: url('https://upload.wikimedia.org/wikipedia/commons/0/0e/Lake_Kivu_%2820875703429%29.jpg');
    background-size: cover;
    background-position: var(--most-common-position);
    padding: 100px 0;
    
  }

  .hero img{
    width: 10%;
  }

.hero-content {
    position: relative;
    z-index: 1;
  }
  
.hero-title {
    font-size: 32px;
    margin-top: 0;
    color: var(--black-);
}

.hero p{
color: var(--white-);}
  
  .hero-subtitle {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--black-);
  }
  
      /* Not a style for hero button, it's the style for 
      the CONTAINER that has the 2 buttons*/

  .hero-buttons {
    display: flex;
    justify-content: var(--most-common-position);
    padding: var(--most-common-em);
  }

  /* styles for the reviews in the hero section */
.testimonial-container{
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.testimonial{
  width: 100%;
    max-width: 300px;
    margin: 10px;
    padding: 10px;
    text-align: var(--most-common-position);

    background-color: var(--reviews-background);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    color: var(--white-);
    height: 50%;
}

.testimonial-title{
  font-size: 15px;
    margin-top: 10px;
}

.testimonial-subtitle{
  font-size: 12px;
    color: var(--white-);
    margin-top: 5px;
}

.stars{
  color: yellow;
}

  .reviews-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .reviews-card {
    width: 100%;
    max-width: 300px;
    margin: 10px;
    padding: 10px;
    text-align: var(--most-common-position);

    background-color: var(--reviews-background);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    color: var(--white-);
    height: 50%;
    
  }
  
  .reviews-card-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto;
  }

  
  
  .reviews-card-title {
    font-size: 15px;
    margin-top: 10px;
  }
  
  .reviews-card-subtitle {
    font-size: 12px;
    color: var(--white-);
    margin-top: 5px;
  }

  .reviews-btn{padding: 10px 20px;
    margin: 0 10px;
    background-color: var(--light-green);
    color: var(--white-);
    border: none;
    border-radius: 5px;
    cursor: pointer;

  }

  /* styles for 5 stars of reviews in hero section */
.star-container {
  font-size: 24px; 
}

.star {
  color: yellow;
}

  

          /* Styles for the video*/

.video-container {
  display: flex;
  align-items: center;
  justify-content: center;
width: 100%;}


.video-container .wistia_embed {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  
  /* Styles for slider showing the different activities*/
  .big-container-activities{
    background-color: var(--dark-green);
  }

  .activities-slider-container {
    position: relative;
    width: 60%;
    max-width: 100vw;
    margin: 0 auto;
    background: var(--box-background);
    box-shadow: var(--box-shadow);
    backdrop-filter: var(--box-blur);
    -webkit-backdrop-filter: var(--box-blur-2);
    border-radius: 10px;
    border: var(--box-border);
    background-color: var(--white-);
    margin-top: var(--most-common-em);
  }
  
  .activities-slider {
    display: flex;
    overflow-x: auto;
    position: relative;
  }
  
  .slide {
    flex: 0 0 100%;
    width: 100%;
  }
  
  .slider-card {
    text-align: var(--most-common-position);
    padding: var(--most-common-em);
    height: 29em; /* Adjust the height as needed */
  }

  .slider-card p{
    font-size: 0.8em;
  }
  
  .activities-slider img {
    width: 40%;
    height: 40%;
    object-fit: cover;
  }
  
  .arrows {
    position: relative;
    display: flex;
    align-items: var(--most-common-position);
    justify-content: var(--most-common-position);
  }
  
  .arrow {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
    font-size: 2em;
    text-align: var(--most-common-position);
  }
  
  .arrow-left:before {
    content: "<";
    color: var(--black-);
    padding: 0.5em;
  }
  
  .arrow-right:before {
    content: ">";
    color: var(--black-);
    padding: 0.5em;
  }
  
  
      /* Styles for the Image gallery*/

      .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px;
        margin-top: var(--most-common-em);
        padding: var(--most-common-em);
        background-color: var(--dark-green);
      }
      
      .gallery__image {
        cursor: pointer;
        box-shadow: var(--box-shadow);
        backdrop-filter: var(--box-blur);
        -webkit-backdrop-filter: var(--box-blur-2);
        border-radius: 10px;
        border: var(--box-border);
        width: 100%; /* Added */
        height: 100%; /* Added */
        object-fit: cover; /* Added */
      }
      


      /* Modal that opens when image 
      is clicked*/

  
  .modal {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
    justify-content: var(--most-common-position);
    align-items: var(--most-common-position);
    
  }

   /* X symbol to close the modal*/
  
  .modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
    color: var(--white-);
    cursor: pointer;
  }
  
  .modal__image {
    max-width: 50%;
    max-height: 100%;
  }

/* Styles for the video player */

  .video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--dark-green);
    padding: var(--most-common-em);
  }
  
  .video-container video {
    max-width: 100%;
    max-height: 100%;
  }
 
/* Styles for the Accommodation section tabs */

#accommodation h3{
  text-align: center;
}

.accommodation-feature-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.accommodation-card {
  width: 100%;
  max-width: 300px;
  margin: 10px;
  padding: 10px;
  text-align: var(--most-common-position);
}

.accommodation-card-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto;
}

.accommodation-card-title {
  font-size: 24px;
  margin-top: 10px;
}

.accommodation-card-subtitle {
  font-size: 18px;
  color: gray;
  margin-top: 5px;
}





  /* Styles for the accommodation tabs */

  .wrapper{
    background: var(--white-);
    background: var(--box-background);
    box-shadow: var(--box-shadow);
    backdrop-filter: var(--box-blur);
    -webkit-backdrop-filter: var(--box-blur-2);
    padding: var(--most-common-em);
  }
  ul.tabs {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul.tabs li {
    
    border-bottom: none;
    float: left;
    margin: 0 .25em 0 0;
    padding: .25em .5em;
    background-color: var(--light-green);
  }
  ul.tabs li a {
    color: var(--white-);
    font-weight: bold;
    text-decoration: none;
  }
  ul.tabs li.active {
    background: var(--green);
  }
 
  .clr {
    clear: both;
  }
  article {
    border-top: var(--dark-green) solid 1px;
    padding: 0 1em;
  }

        /* Styles for the iframe that contains 
        the prices of accommodation + meals*/

 
  .iframe-container {
    position: relative;
    width: 100%;
    height: 18em;
    overflow: hidden;
    background: var(--light-green);
    box-shadow: var(--box-shadow);
    backdrop-filter: var(--box-blur);
    -webkit-backdrop-filter: var(--box-blur-2);
    border-radius: 10px;
    border: var(--box-border);

    


  }


  
  
  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    

    
    
  }

      /* Styles for the wave that separates image gallery from contact form*/

  .wave{
    background-color: var(--light-green);
  }
      /* Styles for contact section*/

  .contact-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: var(--most-common-em);
  }

  .contact-section p{
    text-align: var(--most-common-position);
  }
  
  .contact-form {
    background-color: var(--white-);
    padding: 20px;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    
  }
  
  .contact-form h1 {
    
    text-align: var(--most-common-position);
  }
  form img{
    width: 50%;
    margin-top: 0.5em;
  }
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  textarea {
    height: 120px;
    resize: vertical;
  }
  

  
  .google-map {
    height: 300px;
    background-color: var(--white-);
    border-radius: 5px;
    display: flex;
    align-items: var(--most-common-position);
    justify-content: var(--most-common-position);
  }
  
  .social-icons {
    display: flex;
    justify-content: var(--most-common-position);
    margin-top: 20px;
  }
  
  .social-icon {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: var(--most-common-position);
  }
  
  .social-icon.facebook-icon {
    background-image: url("media/twitter.webp");
  }


  
  .social-icon.twitter-icon {
    background-image: url("media/facebook.webp");
  }

  .social-icon.youtube-icon {
    background-image: url("media/youtube.webp");
  }

  .social-icon.instagram-icon {
    background-image: url("media/instagram.webp");
  }
  
        /* Email phone and what's app at the bottom*/

 
.contact-bottom{
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-bottom {
  display: inline-block;
  padding: 2em;
  border-radius: 50%;
}

.phone-number{
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-number a{
  text-decoration: none;
  color: var(--green);
}

.icon-bottom a {
  color: var(--dark-green);
  text-decoration: none;
}

.icon-bottom i {
  font-size: 28px;
}

.footer{
  text-align: center;
}

        /* Media query for contact section*/

  
  @media (max-width: 767px) {
    .contact-section {
      grid-template-columns: 1fr;
    }
    
    .contact-details {
      text-align: var(--most-common-position);
    }
  }
        /* Media query for tab wrapper to be centered on desktop*/

  @media (min-width: 766px){
    .wrapper {
      margin: auto;
      padding: 1em;
      width: 50%;
    }
  }
  
  

/* Media query for textbox on mobile*/

@media (max-width: 480px) {
    .textbox {
      width: 90%;
      padding: 0.5em;
      
    }

    /* Media query for activities slider container on mobile*/

.activities-slider-container{
  width: 90%;
}

/* Media query for activities slider image on mobile*/

.slide img{
width: 80%;
}
/* Media query to have a greater height on mobile 
for the card of the activities slider*/

.slider-card {
  
  height: 42em; /* Adjust the height as needed */
}

/* Media query when the modal image opens on mobile*/

.modal__image{
    max-width: 100%;
    }
  
    /* Shorter video container for phone */
.video-container{
  height: 50vh;
}

  }

/* Display two images per row on ipad air and ipad mini */

  @media (min-width: 768px) and (max-width: 1024px) {
    .gallery {
      grid-template-columns: repeat(2, 1fr); 
    }
  }