@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Poppins", serif;
   
} 

html {
   scroll-behavior: smooth;

}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

img {
    width: 100%;
}





header {
   position: fixed;
   width: 100%;
   z-index: 5;
    background-color: #000000;
}

header .navbar {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .nav-logo img {
   width: 120px; /* Adjust size as needed */
   height: auto;
}


.navbar .nav-menu {
    display: flex;
    gap: 20px;
}

.navbar .nav-item {
    position: relative; 
    font-size: 18px;/* Added to position ::after correctly */
}

.navbar .nav-item::after {
    content: '';
    width: 0;
    height: 3px;
    background: #b78e44;
    position: absolute;
    left: 0;
    bottom: -5px;
    transition: width 0.3s ease-in-out;
}

.navbar .nav-item:hover::after {
    width: 100%;
}

.navbar .nav-menu .nav-link {
    color: #d4af64;
    padding: 10px 18px;
    
}
.hero-section{
   background: black;
   min-height: 100vh;
}

.hero-section .section-content{
   display: flex;
   align-items: center;
   min-height: 100vh;
   color: white;
   justify-content: space-between;
}

.hero-section .hero-details .title{
   padding-left: 125px;
   font-size: 38px;
   color: #0b4811;
   font-family: "Poppins" , sans-serif;
}
.hero-section .hero-details .sub-title{
   padding-left: 120px;
 font-size: 78px;
   margin-top: 8px;
   max-width: 100%;
   font-weight:bolder;
   }
   .hero-section .hero-details .buttons{
      padding-left: 200px;
      padding-top: 25px;
      display: flex;
      gap: 23px;
   }
   .hero-section .hero-details .button{
    border:  2px solid transparent;  
   padding:  10px 26px;
   background: #b78e44;
   color: black;
   border-radius: 30px;
   font-weight: 600;
   transition: 0.3s ease;

   }

   .hero-section .hero-details .button:hover{
      color: white;
      border-color: #b78e44;
      background-color: transparent;
   }
 .hero-section .hero-image-wrapper{
   max-width: 500px;
   margin-right: 80px;
 }


 .about-section{
   padding: 120px 0;
   background: rgb(255, 255, 255) ;
 }
 
 .about-section .section-content{
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   gap: 80px;
 }

 .about-section .about-image-wrapper .about-image{
   width: 400px;
   height: 400px;
   object-fit: cover;
 }
 .about-section .about-details{
   max-width: 95%;
 }
 .about-section .about-details .text{
   line-height: 30px;
   margin :50px 0 30px;
   text-align: center;
   font-size: 17px;
 }

.about-section .social-link-list {
   display: flex;
   gap: 55px;
   justify-content: center;
}
.about-section .social-link-list  .social-link{
   color: black;
   font-size: 30px;
   transition: 0.2s ease;
}
.about-section .social-link-list  .social-link:hover{
 color: #b78e44;
}

.event-section{
   background: black;
   color: white;
   padding:  50px 0 100px;
}

.event-section .section-title {
   font-size: 50px;
   text-align: center;
   padding-top: 30px;
   

}

.event-section .event-list {
   padding-top: 50px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 110px;
   justify-content: space-between;
}

.event-section .event-list .event-item{
   display: flex;
   align-items:  center;
   flex-direction: column;
   width: calc(100% / 3 - 110px);
   justify-content: space-between;
   text-align: center;
   color: white;
   padding-left: 20px;
   padding-right: 20px;
}

.event-section .event-list .event-item .event-image {
   max-width: 83%;
   aspect-ratio: 1;
   margin-bottom: 10px;
   object-fit: contain;
}

.event-section .event-list .event-item .event-name {
   font-size: 18px;
   margin: 12px 0;
   font-weight: bold;
}

.event-section .event-list .event-item .event-date{
   font-size: x-large;
}
.event-section .event-list .event-item .event-money{
   font-size:xx-large;
}


.core-team-section{
   padding: 50px 0 100px;
   background-color: #e9d9bb;

}
.core-team-section .section-title{
   font-size: 30px;
   text-align: center;
}

.core-team-section .slider-wrapper{
   overflow: hidden;
   margin: 0 60px 50px;
}

.core-team-section .core-team{
   user-select: none;
   display: flex;
   padding: 35px;
   text-align: center;
   flex-direction: column;
   align-items: center;
   
}
.core-team-section .core-team .user-image{
   width: 150px;
   margin-top: 20px;
   height: 150px;
   object-fit: cover;
   border-radius: 50%;
}
.core-team-section .core-team .name{
   font-size: 18px;
   margin-bottom: 16px;
}
.core-team-section .core-team .role{
   font-size: 16px;
   
}

.core-team-section .swiper-pagination-bullet{
   width: 10px;
   height: 10px;
   opacity: 1;
   background: #000000;
}
.core-team-section .swiper-slide-button {
   margin-top: -50px;
   color: #b78e44;
   transition: 0.3s ease;
}


.core-team-section .swiper-slide-button:hover{
    color: black;
}


.gallery-section {
   padding: 50px 150px 80px;
}
 .gallery-section .section-title{
   font-size: 24px;
   text-align: center;
   font-size: 50px;
 }

 .gallery-section .gallery-list{
   display: flex;
   flex-wrap: wrap;
   gap: 32px;
 }


.gallery-section .gallery-list .gallery-item{
   width: calc(100% / 3 - 32px);
   padding-top: 30px;
   
   
}

.gallery-section  .gallery-item .gallery-image{
   width: 100%;
   height: auto;
   cursor: zoom-in;
   border-radius: 2%;
   transition: 0.3s ease;
}

.gallery-section  .gallery-item:hover .gallery-image{
   transform: scale(1.3);
}

.contact-section {
   padding: 0 0 100px;
   background: #e9d9bb;
}
.contact-section .contact-form {
   max-width: 50%;
}
.contact-section .section-title{
   font-size: 24px;
   text-align: center;
   padding-top: 20px;
   padding-bottom: 50px;
}
  .contact-section .section-content {
   display: flex;
   gap: 48px;

   align-items: flex-start;
   justify-content: space-evenly;
  }

  .contact-section .contact-info-list .contact-info{
   display: flex;
   gap: 20px;
   margin: 20px 0;
   align-items: center;
  }


  .contact-section .contact-info-list .contact-info i {
   font-size: 18px;
  }
 .contact-section .contact-form .form-input{
   width: 100%;
   height: 50px;
   padding: 0 12px;
   outline: none;
   margin-bottom: 16px;
   background: white;
   border-radius: 2px;
   border: 1px solid rgb(211, 186, 21);
 }

 .contact-section .contact-form textarea.form-input{
   height: 100px;
   padding :12px;
   resize: vertical;
 }  
 .contact-section .contact-form .form-input:focus {
   border-color: black;
   border-width: 2px;
 }

 .contact-section .contact-form .submit-button {
   padding: 10px 26px;
   color: #ffffff;
   font-size: 15px;
   font-weight: bold;
   background: #000000;
   border-radius: 30px;
 }

 .footer-section{
   padding: 20px 0;
   background: black;
 }
 
 .footer-section .section-content {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
 }

 .footer-section .social-link-list{
   gap: 25px;
   display: flex;
 }
 .footer-section .social-link-list .social-link {
   font-size: 20px;
 }

 .footer-section .social-link-list .social-link:hover{
   color: white;
 }

 .footer-section :where(.copyright-text, .social-link, .policy-link, .separator){
   color: #b78e44;
 }

@media screen and (max-width: 1024px) {
   .event-section .event-list{
      gap: 80px;
   }
   .event-section .event-list .event-item{
      width: calc(100% / 2 - 60px);
   }
   
}

@media screen and (max-width: 900px) {
  
   body.show-mobile-menu header::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      backdrop-filter: blur(5px);
      background-color: rgba(0, 0, 0, 0.5);
   }



 .navbar  :where(#menu-close-button,#menu-open-button){
   display: block;
   font-size: 1.3rem;
 }

.navbar #menu-close-button {
   position: absolute;
   right: 30px;
   top: 30px;
   color: white;
}
.navbar #menu-open-button {
   /* position: absolute;
   right: 30px;
   top: 30px; */
   color: white;
}


   .navbar .nav-menu{
      display: block;
      position: fixed;
      left: -300px;
      top: 0;
      width: 300px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 100px;
      background: rgb(0, 0, 0);
      transition: left 0.2s ease;
   }


   body.show-mobile-menu .navbar .nav-menu{
      left : 0;

   }
   .navbar .nav-menu .nav-link {
      color: #ffffff;
      font-size: 18px;
      display: block;
      margin-top: 17px;
   }

   .hero-section .section-content{
      /* padding-top: 80px;
      padding-left: 50px; */
      padding: 80px 20px 20px;
      text-align: center;
      gap: 50px;
      flex-direction: column-reverse;
      justify-content: center;
   }
   .hero-section .hero-details .title{
     padding-right: 15px;
     font-size:31px;
     padding-left: 15px;
   }
   .hero-section .hero-details .sub-title{
      max-width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      font-size: 50px;
      line-height: 60px;
   }
   .hero-section .hero-details .buttons{
      justify-content: center;
      padding-left: 0px;
   }
   

   .hero-section .hero-image-wrapper{
      max-width: 270px;
      margin-right:  0;
   }

   .about-section .section-content{
      flex-direction: column;
    }
    .about-section .about-image-wrapper .about-image{
      width: 100%;
      height: 100%;
      max-width: 400px;
      aspect-ratio: 1;
      
    }
    .about-section .about-details .text{
      line-height: 30px;
      margin :50px 0 30px;
      text-align: center;
      font-size: 17px;


    }
    .about-section{
      padding: 10px;
    }

    .event-section .event-list{
      gap: 30px;
   }
   .event-section .event-list .event-item{
      width: calc(100% / 2 - 60px);
      
   }


   .event-section .event-list .event-item .event-image{
      max-width: 200px;
      /* padding-left: 20px;
      padding-right: 20px; */
    }

    .event-section .section-title {
      font-size: 40px;
      text-align: center;
      padding-top: 10px;
      
   
   }
       
   .gallery-section .gallery-list .gallery-item{
      width: calc(100% / 2 - 30px);
   }
   .contact-section .contact-info-list .contact-info i {
      font-size: 20px;
     }

     .contact-section .section-content{
      flex-direction: column;
      align-items: center;
     }
     .contact-section .contact-form {
      max-width: 100%;
      padding-left: 20px;
      padding-right: 20px;
     }

     .contact-section .section-title {
      font-size: 24px;
      text-align: center;
      padding-top: 20px;
      
  }
  .footer-section .section-content {
   display: flex;

   flex-direction: column;
   text-align: center;
}

     .footer-section .copyright-text{
      color: #b78e44;
      padding-left: 20px;
      padding-right: 20px;
    }

    .footer-section .social-link{
      padding-left: 20px;
    }

    .footer-section .policy-link{
      padding: 40px;
    }
    .footer-section .separator{
      color: black;
    }
    .footer-section  .social-link-list{
      gap: 15px;
      justify-content: center;
    }

   }

@media screen and (max-width: 600px) {
      .event-section .event-list .event-item{
         width:100%
      }

      .event-section .event-list{
         gap: 60px ;
      }

      .core-team-section .slider-wrapper{
         margin: 0 0 30px;
      }

      .core-team-section .swiper-slide-button{
         display: none;
      }
      .gallery-section .gallery-list .gallery-item{
         width: calc(100% / 2 - 30px);
      }
      .gallery-section {
         padding: 50px 30px 100px;
         
      }
      .contact-section .section-content{
         flex-direction: column;
      }
      .contact-section {
         padding: 0 15px;
     }
     .contact-section .contact-form {
      max-width: 100%;
      padding-left: 20px;
    padding-right: 20px;
     }
     
     .footer-section .copyright-text{
      color: #b78e44;
      padding-left: 20px;
      padding-right: 20px;
    }

    .footer-section .social-link{
      padding-left: 20px;
    }

    .footer-section .policy-link{
      padding: 20px;
    }
    .footer-section .separator{
      color: rgb(215, 205, 9);
    }
    .footer-section  .social-link-list{
      gap: 15px;
    }
    .about-section .about-details {
      max-width:95%;
  }
   }

  

   @media screen and (max-width: 480px) {
      .event-section .event-list .event-item{
         width: 100%;
         }
         .event-section .event-list{
            gap: 30px ;
            }

            
     .footer-section .copyright-text{
      color: #b78e44;
      padding-left: 20px;
      padding-right: 20px;
    }

    .footer-section .social-link{
      padding-left: 20px;
    }

    .footer-section .policy-link {
      padding: 0px  5px;
    }
    
    
    .footer-section .separator{
      color: black;
    }
    .footer-section  .social-link-list{
      gap: 15px;
    }
            
            .core-team-section .slider-wrapper{
               margin: 0 0 20px;
               }
               .core-team-section .swiper-slide-button{
                  display: none;
                  }
                  .gallery-section .gallery-list .gallery-item{
                     width: calc(100% / 1 - 30px);
                     }
                     .gallery-section {
                        padding: 30px 15px 50px;
                        }
                        .contact-section .section-content{
                           flex-direction: column;
                           }
                           .contact-section .contact-form {
                              max-width: 100%;
                              padding-left: 20px;
                            padding-right: 20px;
                             }
                             .about-section .about-details {
                              max-width:95%;
                          }

      
   }