/* General Resets */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  font-family: Arial, sans-serif;
  color: #333;
}

body {
  text-align: center;
  animation: waveAnimation 5s infinite linear;
  line-height: 1;
}

@keyframes waveAnimation {
  0% { background-size: 100% 100%; }
  50% { background-size: 110% 110%; }
  100% { background-size: 100% 100%; }
}

/* Typography */
p, h1, h2, h3, h4, li, a, ul {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 9px;
}

li {
  font-weight: bold;
}

img {
  filter: brightness(1.3);
  max-width: 100%;
  height: auto;
  display: block;
}

  /* second Navigation Bar */
  .bottom-header {
    
    margin-right: 30px;
    caret-color: white;
    width: 100%;
    height:82px;
      
      
}
.bottom-header{
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(225, 225, 255, 0.3);
}
  .bottom-header{
  display: flex;
    align-items: center;
    justify-content: space-between; /* Ensures spacing */
    padding: 5px 10px;
  }
    

 
    .bottom-header nav a{
    margin-left: 5px;
      
    }

   
    .menu-toggle {
      font-size: 40px;
      cursor: pointer;
      display: none; /* Hidden on large screens */
      color:white;
      margin-left: auto;
      margin-right: 3%;
      margin-top: 5%;
      background-color: #2f4545cc;
      border-radius: 10%;
      gap: 10px;
      width: 50px;
      
    }


    /* Mobile view: max width 768px */
@media (max-width: 768px) {
  .menu-toggle {
    display: block; /* Show hamburger icon */
  }

  nav {
    display: none; /* Hide menu by default */
    flex-direction: column;
    width: 100%;
    text-align: left;
    margin-left: 10%;
    right: 0;
    top: 93px;
    height: 100vh;
    position: absolute;
    background-color:rgb(197, 205, 197);
    margin-bottom: auto;
    position: fixed;
    gap: 30px;
    justify-content: center;
    align-items: center;
    z-index: 2;
    font-size: 50px;
  }
 
  
  nav.show {
    display: flex; /* Show menu when "show" class is added */
  }
  
}
     
.bottom-header nav a{
    color: rgb(31, 28, 28);
    text-decoration: none;
    margin: 0 15px;
    font-size: 16px;

}
.separator {
  display: inline-block;
  height: 80px; /* Adjust height */
  background-color: black;
  margin: 0 10px; /* Space between links */
  vertical-align: middle;
  width: 0.5px;
}

header nav a:hover {
    text-decoration: underline;
  }
  .navbar-logo {
    width: 150px;
    display: flex;
    min-height: 80px;
    height: 50px;
    margin-left: 30px;
    margin-right: auto; /* Pushes links away */
    text-align: left;

  }
  

  .nav-links{
    display: flex;
    gap: 20px; /* Space between links */
    
    
  }
  
  
  /* first Navigation Bar with WhatsApp */
  .navbar {
    display: flex; /* Enables Flexbox */
    align-items: center; /* Centers items vertically */
    justify-content: space-between; /* Spaces items evenly */
    background-color: rgb(12, 13, 44);
    margin-top: 0;
    padding: 10px 20px;
    
  }

  
  .whatsapp-link {
    margin-right: 15px; /* Adds spacing between WhatsApp and heading */
  }
  
  .whatsapp-icon {
    width: 30px; /* Adjust size of WhatsApp icon */
    height: auto;
  }
  .whatsapp-number {
    text-decoration: none;
    color: rgb(176, 155, 64);
    font-weight: bold;
    font-size: 16px;
  }

.whatsapp-contact {
  display: flex; /* Aligns icon and number horizontally */
  align-items: center; /* Ensures vertical alignment */
  margin-left: 50px;
}
  
  .navbar-heading {
    flex-grow: 1; /* Pushes the heading to the center */
    text-align: center; /* Ensures heading stays centered */
  }
  
  .navlinks {
    display: flex; /* Keeps links in a row */
    gap: 15px; /* Adds spacing between links */
  }
  
  .navlinks a {
    text-decoration: none;
    color: rgb(176, 155, 64);
    font-weight: bold;
  }

  /*..slider..*/


.slider-container {
    position: relative;
    width: 100%; /* Bigger images */
    height: 500px;
    
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.slider {
    display: flex;
    width: 100%;
    height: 100%;
}

.slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* Hide all images */
}

.slide.active {
    display: block; /* Show active image */
}


.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
    background: rgba(0, 0, 0, 0.8);
}
  
  /* Safari Description */
  .safari-info {
    margin: 30px auto;
    max-width: 600px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
  }
  
  .safari-info h2 {
    color: #2c3e50;
  }
  
  .safari-info p {
    font-size: 16px;
    color: #333;
  }
  
 
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}


#first sub{
    color: #1da388;
}
.P2 h1 {
    color: #265047;
    font-size: 32px;
    
    
}
.P2 p{
    margin-left: 12%;
    text-align: left;
    margin-right: 10%;
    font-weight: 400;
}
.about-us{
  color: black;
  margin-right: 10%;
  
  
}

.nav-links{
    display: flex;
    align-items: center;
    color: black;
    font-weight: bold;
}
.btn {
    display: inline-block; /* Makes it behave like a button */
    padding: 10px 20px; /* Adds spacing inside */
    background-color: rgb(231, 158, 14); /* Button color */
    color: rgb(19, 16, 16); /* Text color */
    text-decoration: none; /* Removes underline */
    font-weight: bold;
    transition: background 0.3s ease; /* Smooth hover effect */
  }
  
  .btn:hover {
    background-color: rgb(164, 172, 54); /* Darker shade on hover */
  }

  
  .image-container {
    position: relative;
    display: inline-block;
  }
  @media (max-width: 773px) {
    .image-container {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      width: 100vw;
      height: 100vw;
      gap: 30px;
    }
    
    .image-container img{
      flex: 0 0 100vw;
      height: 100%;
      object-fit: cover;
      scroll-snap-align: start;
      width: 100vw;
      
    }
    .image-container::-webkit-scrollbar{
display: none;
    }
    .image-container{
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    
  }
  

  
  .image-text {
    position: absolute;
    bottom: 10px; /* Move text to bottom */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 8px 12px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    width: 80%; /* Makes text box wider */
    text-align: center;
  }
  
  .image-text a {
    color: white;
    text-decoration: underline; /* Underlines the link */
  }
  
  .image-text a:hover {
    color: #f0f0f0; /* Optional: changes color on hover */
  }
  
  .image-row {
    display: flex; /* Arrange images in a row */
    justify-content: space-between; /* Space evenly */
    gap: 15px; /* Space between images */
  }
  
  .image-container {
    position: relative;
    display: inline-block;
    gap: 5px;
  }
  
  .image-container img {
    width: 250px; /* Bigger images */
    height: 300px; /* Adjust height */
    object-fit: cover; /* Ensures image fits */
    display: block;
    border-radius: 2%;
    margin-left: 10px;
    margin-right: 10px;
  }
#Home{
    background-color: rgb(140, 134, 127);
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}
/* Make sure the container takes the full width and sets the images in a row */

.image-container {
  display: flex; /* Arrange images in a row */
  gap: 15px; /* Space between images */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  grid-template-columns: repeat(3, 1fr); /* 3 images per row */
margin-left: 100px;
}

.image2-item {
  position: relative;
  width: 22%; /* Width of each image */
  height: 300px; /* Fixed height for each image */

}


.image2-text {
  position: absolute;
  bottom: 10px; /* Position the text at the bottom */
  left: 50%;
  transform: translateX(-50%); /* Center the text horizontally */
  width: 100%; /* Full width of the image */
  text-align: center;
  color: white;
}

.image2-heading {
  font-size: 18px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 5px;
  color: whitesmoke;
  text-align: center;
  margin-left: 0;
}

.image2-paragraph {
  font-size: 14px; /* Font size for the paragraph */
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
  footer {
    
    width: 100%;
    padding: 20px 0;
    text-align: center;
  
  }
  
  .footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Spread content evenly */
    align-items: center;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
  }

/* Logo Styling */
.footer-logo img {
  max-width: 180px;
  margin-bottom: 20px;
  
}

/* Social Media Section (Now on its own line) */
.social-media {
  width: 100%;
  text-align: center;
  margin-top: 3px;
  background-color: #102030;
  margin-right: 1px;

}

.social-icons {
  display: flex;
  float: right;
  gap: 40px;
  margin-top: 40px;
  margin-right:80px ;
  margin-bottom: 25px;
  
  

}

.social-icons a img {
  width: 50px;
  transition: transform 0.3s ease-in-out;
  border-radius: 100%;
}

.social-icons a img:hover {
  transform: scale(1.2);
}
.social-media h3{
  font-size: 35px;
  color: whitesmoke;
  text-align: left;
  margin-left: 50px;
  margin-bottom: 25px;
  float: left;
}
.social-media img{
  height: 40px;
}
.social-media h3{
    margin-top: 30px;
}

/* Footer Sections */
.footer-section {
  flex: 1;
  min-width: 200px;
  margin-top: 10px;
}

.footer-section h3 {
  font-size: 15px;
  margin-bottom: 10px;
  color: #272117;
  text-align: left;
  margin-left: 25px;
}
 .contact h3{
  margin-left: 90px;
  margin-top: 50px;
}

.footer-section p, a {
  font-size: 14px;
  color: #332e2e;
  text-decoration: none;
}

.footer-section a:hover {
  color: #8e6b36;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  
}

.footer-section ul li {
  margin: 5px 0;
  font-weight: 380;
}

/* Bottom Footer */
.footer-bottom {
  width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #444;
  font-size: 14px;
}


.contact-information li{
  list-style-type: none;
  padding-left: 0; /* optional: remove indent */
  font-weight: 400;
  text-align: left;
  margin-left: 12%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 9;
  margin-top: 5px;
      

}
.useful-inks{
  margin-top:15% ;
}
.contact-information h3 {
  margin-left: 15%;
}
.contact-information{
margin-top: 20%;
}
.contact-information p{
  margin-left: 12%;
  }
  .half-colored-heading {
    font-size: 36px;
    font-weight: bold;
}
.half-colored-heading span {
    display: inline-block;
}
.first-color {
    color: rgb(42, 125, 126);
}
.second-color {
    color:rgb(71, 107, 118);
}


.text-overlay {
  position: absolute;
  top: 85%;
  left: 30%;
  transform: translate(-50%, -50%);
  color: white; /* Text color */
  font-size: 35px; /* Text size */
  font-weight: bold; /* Text weight */
  margin-left: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 9;
  
}

 .condition-image p {
  z-index: 2; /* Prevents text from being hidden */
  clear: both; /* Forces the text to stay below the image */
  font-size: 16px;
  line-height: 1.6;
  
}
.condition-image  img{
  height: 550px;
}

p{
  z-index: 2; /* Prevents text from being hidden */
  margin-left: 10%;
  margin-right: 10%;
  clear: both;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  text-align: justify;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

.content{
  background-color: #c3c4be;
}
  
        
.image-container{
  display: flex;
}


/* Style the dropdown button */
.dropbtn {
  
  color: rgb(5, 4, 4);
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  font-style: bold;
}

/* Arrow styling */
.arrow {
  margin-left: 8px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown content */
.dropdown-content {
  display: none; /* Make the dropdown visible by default */
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: black;
  border-radius: 5px;
  overflow: hidden;
  z-index: 1000;
  font-style: bolder;
}

/* Dropdown links */
.dropdown-content a {
  color: black;
  padding: 10px 15px;
  text-decoration: none;
  transition: background 0.2s;
  display: block;
}

/* Hover effect */
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
  display: block; /* Show the dropdown when hovered */
}


 

.card-wraper{
  max-width: 1100px;
  margin: 0 60px 35px;
  padding: 20px 10px;
  overflow: hidden;
gap: 10px;
}
 
.card-list .card-item{
  list-style: none;
}

 
.card-list .card-item .card-link{
 user-select: none;
  display: block;
  padding: 18px;
  border-radius: 20px;
  text-decoration: none;
  background: rgb(216, 216, 210);
  border: 2px solid transparent;
  box-shadow: 0 10px rgba(red, green, blue, alpha);
transition: 0.2s ease;
}

.card-list .card-link .card-image{
  width: 100%;
  aspect-ratio: 6/9;
  object-fit: cover;
  border-radius: 10px;
}

.card-list .card-link .badge{
  color: #060606;
  background-color: rgb(170, 218, 236);
  font-size: 0.95rem;
  font-weight: 500;
   margin: 16px 0 18px;
   width: fit-content;
   border-radius: 50px;


}

.card-list .card-link .card-title{
  font-size: 1.19rem;
  color: black;
  font-weight: 600;


}
.card-wraper .swiper-pagination-bullet {
  height: 13px;
  width: 13px;
  background: #020b15;
}
.card-wraper .swiper-pagination-bullet-active{
  opacity: 1;
}

.post-sen{
  background-color: #0a2e25;
  padding: 20px;
  width: 98%;
  gap: 50px; /* Adds space between the notes and image */
  color: rgb(171, 161, 144);
  position: relative;
  align-content: center;
 

}

.post-sen img{
  width: 47%;
  float: right;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  margin-left: 2%;
  
 }
 .post-sen h2 h3 li {
  float: left;
  align-items: center;
  margin-bottom: 10px;
 }

 .post-sen li{
  margin-bottom: 30px;
  text-align: left;

 }
 .post-sen h2{
  margin-bottom: 30px;
 }
 
  
 
 .about-us li {
  margin-left: 5%;
  list-style-type: none; /* Removes the dots */
  display: block;
  font-style: normal;
  line-height: 1.6;
 }
 .about-us li{
        
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 9;
  font-weight: 375;

}
 .about-us img{
  margin-left: 10%;
  width: 500px;
  margin-right: 5%;
  margin-top: 2%;
 }


ul{
  text-align: left;
  margin-left: 30px;
}
.postin{
  display: flex;
  gap: 8px; /* Adds spacing between elements */
  flex-direction: row-reverse; /* Reverses the order, putting the table on the right */
}
.paragraph{
  margin-top: 4%;
}
 
  
  .benefits {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: auto;
}

.list {
    width: 45%;
}

 .list h3 {
    text-align: center;
}

.list ul {
    list-style-type: none;
    padding: 0;
    text-align: left; /* Align text to the left */
    list-style: none;
}

    .list ul li::before {
      content: "✅ "; /* Change this to "→ ", "⭐ ", or any other symbol */
      font-weight: bold;
      color: green;
  }
.rates table{
  width: auto; /* Make it smaller and leave space for the picture */
  border-collapse: collapse;
  margin-left: 15%; /* Align to the left */
  font-size: small;
  margin-right: 15%;

}
.rates td{
border: none;
padding: 15px;
text-align: left;
}
.rates tr:nth-child(even){
   
    background-color: rgb(148, 146, 143);
}

.lit{
  margin-left: 30%;
  font-style: oblique;
}
.ug li{
   margin-top: 5%;
   font-size: medium;
   color: darkgreens;
}

.map img{
  height: 30%;
}
.intro{
  padding: 20px;
  width: 98%;
  gap: 50px; /* Adds space between the notes and image */
  position: relative;
  align-content: center;

}
.intro img{
  float: left;
  width: 350px;
  border-radius: 10px;
  margin-left: 10%;
}
.intro li{
  font-size:medium;
  margin-bottom: 20px; /* Adjust space between list items */
  line-height: 1.5; /* Adjust line spacing */
  margin-top: 30px;
  margin-left: 20%;
  margin-right: 10%;
  text-align: left;
}
.chimp{
  background-color: #c3c4be;
}
.chimp img{
  float: right;
  width: 400px;
  border-radius: 10px;
  margin-right: 10%;
  margin-left: 3%;
}
.chimp li{
  font-size:medium;
  margin-bottom: 20px; /* Adjust space between list items */
  line-height: 1.5; /* Adjust line spacing */
  margin-top: 30px;
  margin-left: 10%;
  margin-right: 10%;
  text-align: left;
}
h3{
  color: rgb(49, 84, 59);
  font-size: x-large;
  text-align: left;
  margin-left: 15%;
}


.h3{
  color: black;
}
.paragraph{
  margin-left: 0;
}
main {
  width: 80%;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact-info, .contact-form, .map {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin: 10px 0 5px;
}

.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
}

button {
  background: #2c3e50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 4px;
}

button:hover {
  background: #1a252f;
}