body, ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    
}

html, body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

@media (max-width: 768px) {
    .container {
      width: 100%; /* Adjust layout for smaller screens */
    }
    }
    header {
      position: fixed;
      display: flex;
      width: 100%;
      height: auto;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
      padding: 2px 20px;
      background-color: white;
      border-bottom: 1px solid #e0e0e0;
      transition: top 0.3s ease;
    }
    
    /* Logo image styles */
    .logo img {
      width: 177px;
      height: 66px;
    }
    
    /* Desktop navigation - default for larger screens */
    #desktopNav {
      display: flex;
    }
    
    #desktopNav ul {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
      gap: 60px;
    }
    
    #desktopNav ul li a {
      font-family: 'Montserrat', sans-serif;
      font-size: 16px;
      font-weight: 400;
      color: rgba(23, 26, 32, 0.8);
      text-decoration: none;
      transition: color 0.3s ease;
    }
    
    #desktopNav ul li a:hover {
      color: rgb(0, 0, 0);
    }
    
    /* Profile icon styles */
    .profile-icon {
      cursor: pointer;
      padding: 0px 35px;
    }
    
    .menu-icon {
      display: none; /* Hidden by default on desktop */
      flex-direction: column;
      justify-content: space-between;
      width: 70px;
      height: 35px;
      cursor: pointer;
      margin-top: -10px;
    }
    
    
    .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 999;
    }
    
    
    /* Mobile sliding menu (hidden by default) */
    #mobileMenu {
      position: fixed;
        top: 1px;
        right: -450px; /* Initially off-screen */
        width: 320px;
        height: 100vh;
        background-color: #fff;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out;
        padding-top: 10px; /* Offset to align with header */
        display: none; /* Hidden by default */
        z-index: 1000;
    }
    /* Active states */
    .menu-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    #mobileMenu.active {
      right: 0;
    }
    #mobileMenu ul {
      list-style: none;
      padding: 20px 0 60px 20px;
      gap: 20px;
      margin: 0;
      display: flex;
      flex-direction: column;
      text-align: left;
    }
    
    #mobileMenu ul li {
      padding: 5px 20px;
    }
    
    #mobileMenu ul li a {
      font-family: 'Montserrat';
      font-size: 16px;
      font-weight: 500;
      color: #000;
      text-decoration: none;
      display: block;
      transition: color 0.3s ease;
    }
    
    #mobileMenu ul li a:hover {
      color: rgb(0, 0, 0);
    }
    
    #mobileMenu .close-btn {
      display: flex; /* Aligns children horizontally */
      align-items: center; /* Vertically centers items */
      padding: 15px 20px; /* Add some padding */
      font-size: 24px; /* Increase size of the close icon */
    }
    
    #mobileMenu .close-btn .menu-logo {
      width: 24px; /* Set the width of the image */
      height: 24px; /* Set the height of the image */
      margin-right: 10px; /* Add space between the image and the close icon */
    }
    
    #mobileMenu .close-btn span {
      cursor: pointer;
      font-size: 22px; /* Size of the close icon */
      color: #000; /* Close icon color */
    }
    /* Media query for mobile view (max-width: 768px) */
    @media screen and (max-width: 768px) {
      /* Hide the desktop navigation on mobile */
      #desktopNav {
          display: none;
      }
    
      /* Show the hamburger menu icon only on mobile */
      .menu-icon {
          display: flex;
          margin-right: 40px;
    
      }
    
      /* Mobile sliding menu styles when toggled */
      #mobileMenu {
          display: block;
      }
    
      .profile-icon {
          display: none;
          margin-right: -30px;
          padding: 0;
    
      }
    }
.gallery-section{
    padding: 20px;
    margin: auto;
    justify-content: center;
    align-items: center;
}

h1{
    text-align: center;
    padding-top: 80px;
    font-family: 'Montserrat';
    font-size: 32px; 
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);

}

.image-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 40px; /* Add spacing between images */
    padding: 30px;
}

/* Individual image styling */
.image{
    width: 100%; /* Full width */
    height: 400px; /* Fixed height */
    object-fit: fill;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff; /* Light background for contrast */
    box-shadow: 0 4px 8px rgba(117, 115, 115, 0.2); /* Shadow effect */
    border: 1px solid #ddd; /* Light border around images */
    border-radius: 8px;
}

img{
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    padding: 5px;
    object-fit: contain;
    text-align: center;

}
.image:hover {
    transform: scale(1.1); /* Zoom in by 10% */
}

.videos {
    text-align: center;
    padding: 50px;
    background-color: #fff;
    
}

/* Video Grid */
.videos .video-container {
    display: inline-block;
    margin: 10px;
    width: 550px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
}

.videos .video-container:hover {
    transform: scale(1.0); /* Zoom effect */
}

/* Video Thumbnail */
.video-thumbnail {
    position: relative;
    overflow: hidden;
}

.video-thumbnail img {
    width: 400px;
    height: 300px;
    margin-top: 20px;
    padding-top: 20px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* Smooth zoom for image */
}

.video-container:hover .video-thumbnail img {
    transform: scale(1.1); /* Slight zoom on image hover */
}

/* Play Button */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.video-thumbnail:hover .play-button {
    opacity: 1; /* Show play button on hover */
}

/* Video Description */
.videos p {
    margin: 10px 0;
    font-family: 'Montserrat';
    font-size: 20px;
    font-weight: 400;
    color: #000;
}

/* Links Styling */
.video-container a {
    text-decoration: none;
    color: inherit;
}


.footer {
  background-color: #ffffff;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  padding-top: 10px;
}

address {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 500;
  line-height: 19.5px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  font-style: normal;
  color: #000;
  
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #000000;
}

.nav-links, .terms-links, .social-icons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section {
  text-align: center;
  
}

.footer-section h4 {
  margin-bottom: 30px;
  color: #000000;
  font-family: 'Roboto';
  font-size: 20px;
  font-weight: 400;
  line-height: 23.44px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.nav-links  {
  list-style: none;
  margin-bottom: 30px;
  padding-top: 30px;
  display: flex;
  gap: 45px; /* Adjust spacing between items */
  font-family: 'Montserrat';
  font-size: 16px;
  color: rgba(23, 26, 32, 1)  ;
  font-weight: 600;
  line-height: 19.5px;
  text-align: left;
  font-style:solid;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.terms-links {
  margin-bottom: 30px;
  display: flex;
  gap: 45px; /* Adjust spacing between items */
  font-family: "Montserrat";
  font-weight: 600;
  font-size: 16px;
  font-style:solid;
  line-height: 23.44px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: rgba(23, 26, 32, 1)  ;

}

.nav-links li, .terms-links li {
  display: inline;
}

.nav-links a, .terms-links a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.nav-links a:hover, .terms-links a:hover {
  text-decoration: underline;
}

.social-media{
  margin-bottom: 30px;
  display: flex;
  gap: 10px; /* Adjust spacing between items */
  line-height: 23.44px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  font-size:20px;
  width: 300px;
  padding-left: 25px;
}
.logo1 img{
  margin-left:0px;
  margin-bottom: -20px;
}
.media{
  background-color: rgb(190, 190, 190);
  width: 52px;
  height: 52px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}
.media:hover {
  transform: scale(0.9); /* Scales the element to 90% of its size */
}

.social-icon {
  display: flex;
  flex-direction: column;
}

.social-icon .circle {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
}

.bottom {
  background-color: #ffffff; /* Footer background color */
  color: rgb(0, 0, 0); /* Text color */
  text-align: center; /* Center align the text */
  padding-top: 30px;
}

.bottom p {
  margin: 0; /* Remove extra spacing */
  white-space: nowrap; /* Prevent text wrapping */
  font-family: 'Roboto';
  font-size: 14px;
  font-weight: 400;
  line-height: 16.41px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.bottom hr {
  border: none;
  border-top: 1px solid #ccc; /* Line color */
  margin: 0 20px 10px; /* Line spacing and padding */
  width: auto;
}

.social-media {
  text-align: center;
  font-family: 'Montserrat';
  font-size: 14px;
  margin-left: -30px;

}

.social-icon {
  display: block;
  margin: 10px auto; /* Space between icons */
  font-size: 30px; /* Adjust size of icons */
  color: #000; /* Default icon color */
  transition: transform 0.3s ease, color 0.3s ease; /* Hover effects */
}

.social-icon:hover {
  transform: scale(1.2); /* Scale up on hover */
  color: #007bff; /* Change to your hover color */
}

/*                                          Mobile Responsive View                             */


  
  
/**/
/**/
.gallery-section {
    padding: 20px;
    margin: auto;
    justify-content: center;
    align-items: center;
}

h1 {
    text-align: center;
    padding-top: 80px;
    font-family: 'Montserrat';
    font-size: 32px; 
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
}

.image-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default 3 columns */
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 30px;
}

/* Individual image styling */
.image {
    width: 100%;
    height: 400px;
    object-fit: fill;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(117, 115, 115, 0.2);
    border: 1px solid #ddd;
    border-radius: 8px;
}

img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    padding: 5px;
    object-fit: contain;
    text-align: center;
}

.image:hover {
    transform: scale(1.1);
}

.videos {
    text-align: center;
    padding: 50px;
    background-color: #fff;
}

.videos .video-container {
    display: inline-block;
    margin: 10px;
    width: 550px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
}

.videos .video-container:hover {
    transform: scale(1.0);
}

.video-thumbnail {
    position: relative;
    overflow: hidden;
}

.video-thumbnail img {
    width: 400px;
    height: 300px;
    margin-top: 20px;
    padding-top: 20px;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.video-container:hover .video-thumbnail img {
    transform: scale(1.1);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.video-thumbnail:hover .play-button {
    opacity: 1;
}

.videos p {
    margin: 10px 0;
    font-family: 'Montserrat';
    font-size: 20px;
    font-weight: 400;
    color: #000;
}

.video-container a {
    text-decoration: none;
    color: inherit;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 24px; /* Smaller font for mobile */
        padding-top: 50px;
    }

    .image-container {
        grid-template-columns: 1fr; /* Stack images vertically on smaller screens */
        gap: 20px; /* Reduce gap between images */
        padding: 20px;
    }

    .image {
        height: 250px; /* Reduced image height on mobile */
    }

    .videos .video-container {
        width: 100%; /* Make videos take full width on mobile */
        height: 250px; /* Reduce video container height */
    }

    .video-thumbnail img {
        width: 100%; /* Ensure video images are full-width */
        height: auto;
    }

    .video-container:hover {
        transform: scale(1); /* Prevent zoom effect on hover for small screens */
    }
}


@media (max-width: 768px) {
    .footer-container {
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px;

}
.footer-section2{
max-width:85%;
}
.logo1 img{
margin-left: -10px;
}

address {
  font-size: 12px; /* Smaller font size for better readability */
  line-height: 1.5; /* Adjust line height for better spacing */
  padding: 0 10px; /* Add padding for a consistent layout */
}

a {
  font-size: 16px; /* Adjust font size for mobile screens */
}

.nav-links,
.terms-links {
flex-direction: column;
gap: 10px;
align-items: center;
}
.social-media {
  justify-content: space-evenly; /* Space items evenly for smaller screens */
  gap: 10px; /* Adjust spacing for mobile */
  margin: 0 auto;
  padding-right: 20px;
}

.media {
  width: 50px; /* Reduce size on smaller screens 40*/
  height: 50px;
}

.footer-section h4 {
font-size: 18px;
text-align: center;
}

.nav-links a,
.terms-links a {
font-size: 16px;
}

.social-icon {
font-size: 30px;/*22*/
margin-bottom: 5px;
}

.bottom {
  text-align: center; /* Center align text */
  padding: 5px 20px;
}

.bottom p {
      margin: 0; /* Remove extra spacing */
      font-family: 'Roboto';
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5; /* Add spacing between lines */
      word-wrap: break-word; /* Allow text wrapping */
      white-space: normal; /* Enable wrapping */
}
}