@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
 
body {
  font-family: 'Poppins', sans-serif, 'oxygen';
  font-weight: 400;
  /* background-color: #E5E5E5; */
  margin: 0px;
}



 [data-tab-content]{
    display: none;
 }

 .active[data-tab-content]{
    display:flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

  padding: 100px;
 }
 nav {
   display: flex;
   position: fixed;
   top: 0;
   justify-content: space-around;
   background-color: #FFECCC;
   width: 100%;
   align-items: center;
   z-index: 1;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color:#006E60 ;
}
 

.second_nav li:hover{
  cursor: pointer;
  transition: 0.5s ease;
  background-color: #FFCC00;
  border-radius: 5px;
}
 
 .second_nav {
   display: flex;
   justify-content: space-around;
   list-style: none;
   
 }
 .second_nav li{
color: #006E60;
   padding: 10px;
   font-weight: 800;
 }




 .tab-content img{
   width: 25%;
   height: 200px;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 5px 7px 8px 5px #eee;
   border: 2px solid rgb(235, 235, 235);
   margin: 30px;
   cursor: pointer;
    transition: 0.3s ease-in-out;
   
 }

 .modal {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.733);
   margin-top: -1px;
   animation: zoom 0.3s ease-in-out;
 }

 @keyframes zoom {
   from {
     transform: scale(0);
   }

   to {
     transform: scale(1);
   }
 }

 .modal img {
   width: 50%;
   object-fit: cover;
 }

 .closeBtn {
   color: rgba(255, 255, 255, 0.87);
   font-size: 25px;
   position: absolute;
   top: 0;
   right: 0;
   margin: 20px;
   cursor: pointer;
   transition: 0.2s ease-in-out;
 }

 .closeBtn:hover {
   color: rgb(255, 255, 255);
 }

 .tab-content img:hover{
  transform: scale(1.1);
 }

 .boxes h3 {
   color: #005249;
 }

 footer {
   padding: 30px;
   background-color: #FFECCC;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }

 .boxes {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  margin: 20px 50px 50px 50px;
  font-size: 13px;
  line-height: 18px;
  gap: 50px;


 }

 .box1 .box2 .box3 {
   padding: 20px;
   margin: 20px;

 }

 .brochure_btn {
   /* text-align: center; */
   /* padding: 20px; */
   /* padding:1px 20px 10px 20px; */
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 20px;
   padding-right: 20px;
   margin-top: 10px;
   border-radius: 10px;
   color: white;
   font-size: large;
   background-color: #006E60;
   border: none;
   /* max-width: 200px; */


 }

 .brochure_btn:hover {
   background-color: #FFCC00;
   transition: 0.5s ease;
   color: black;
   cursor: pointer;
 }

 .map {
   text-align: center;
   /* width: 200px; */
   /* width:1200px;
    height: 400px; */
 }

 iframe {
   width: 1200px;
   height: 400px;
   border: none;
   margin-bottom: 20px;

 }

 .footer_para {
   text-align: center;
   margin-bottom: 0;
 }

 @media (max-width:1250px) {

  nav{
    font-size: 13px;
  }
    .map iframe {
      width: 700px;
      height: 300px;
    }

        .tab-content img {
          width: 275px;
          height: 20w0px;
          border-radius: 10px;
          padding: 10px;
          box-shadow: 5px 7px 8px 5px #eee;
          border: 2px solid rgb(235, 235, 235);
          margin: 30px
        }
  
 }
 



 @media (max-width:849px) {

   
   .hamburger {
     display: block;
   }

   .hamburger.active .bar:nth-child(2) {
     opacity: 0;
   }

   .hamburger.active .bar:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
   }

   .hamburger.active .bar:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
   }

   .second_nav {
     position: fixed;
     left: -150%;
     top: 50px;
     gap: 0;
     
     flex-direction: column;
     background-color:
       #006E60;
     width: 100%;
     justify-content: center;
     align-items: center;
     text-align: center;
     transition: 0.3s;
     color: white;
   }

   .second_nav .tab{
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .second_nav li:hover{
    color: black;
   }

   .second_nav li {
     margin: 16px 0;

color: white;
   }

   .second_nav.active {
     left: 0;
   }

        .tab-content img {
          width: 55%;
          height: 250px;
          border-radius: 10px;
          padding: 10px;
          box-shadow: 5px 7px 8px 5px #eee;
          border: 2px solid rgb(235, 235, 235);
          margin: 30px
        }

    footer {
      padding: 10px;
      background-color: #FFECCC;
      /* font-size: small; */
    }
  
    .boxes {
      font-size: small;
  
    }
  
  
    .boxes .brochure_btn {
      font-size: small;
  
    }
  }

  @media (max-width:450px){

    .second_nav .tab{
      display: flex;
      justify-content: flex-end;
    }

.tab-content img {
    width: 250px;
    height: 250px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 5px 7px 8px 5px #eee;
    border: 2px solid rgb(235, 235, 235);
    margin: 30px
  }

    .map iframe {
      width: 300px;
      height: 200px;
    }

            footer .boxes {
              display: grid;
              grid-template-columns: repeat(1, 1fr);
              /* text-align: center; */
              /* padding: 200px; */
              align-items: center;
      
      
            }
      
            footer {
              /* margin: 200px; */
              display: flex;
              flex-direction: column;
              align-items: center;
            }
  }