*, *::before, *::after {
    box-sizing: border-box;
}

/* Set max-width to 100% for images, videos, and other media */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Ensure body and html don't overflow */

/* General Styles */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    overflow-x: hidden; /* Remove horizontal scroll */
    width: 100%;
    height: 100%;
    padding: 0;
    letter-spacing: 2px;
    /* line-height: 15px; */
}

#navlogo {
    margin-left: 30px;
    height: auto;
    width: 130px; /* Adjust logo size */
    transition: width 0.8s ease; /* Smooth transition for logo size */
}

nav.scrolled #navlogo {
    width: 100px; /* Smaller logo size when scrolled */
}
/* Navbar styles */
nav {
    position: fixed; /* Fix the navbar at the top */
    top: 0; /* Stick to the top */
    width: 100%;
    z-index: 1000; /* Ensure the navbar is above other content */
    transition: background-color 1.0s ease, padding 0.6s ease, top 0.5s ease; /* Smooth transition with longer duration */
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav.scrolled {
    background-color: rgba(0, 0, 0, 0.507); /* Background color when scrolled */
    padding: 5px 20px; /* Reduce padding when scrolled */
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: none; /* Hide the menu by default */
    flex-direction: column;
    align-items: center;
}

nav ul.show {
    display: flex; /* Show the menu when the class 'show' is added */
}

nav ul li {
    margin: 10px 0; /* Space between links */
}

nav ul li a {
    font-size: 20px;
    color: white;
    text-decoration: none;
}



/* Toggle button styles */
.toggle-button {
    margin-top: -40px;
    margin-right: 30px;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    transition: font-size 0.3s ease;
    
}
nav.scrolled .toggle-button {
    margin-top: -10px;
    font-size: 24px; /* Smaller toggle button size when scrolled */
}
/* Sidebar styles */
.menu-sidebar {
    position: fixed;
    top: 0;
    right: -130%; /* Hide sidebar initially */
    width: 360px; /* Sidebar width */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.822); /* Sidebar background color */
    display: flex;
    text-align: left;
    flex-direction: column;
    color: #e4e4e4;
    z-index: 999; /* Ensure the sidebar is above other content */
    transition: right 0.3s ease; /* Smooth transition */
}

.menu-sidebar.show {
    right: 0; /* Show sidebar when the class 'show' is added */
}

.menu {
    font-family: "poppins";
    font-weight: 200;
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    margin-top: 70px;
    margin-left: 50px;
    z-index: 3000;
}

.menu li {
    margin-top: 10px;
    padding-bottom: 10px;
}

.menu li a {
    
    font-size: 21px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-align: left;
}
.menu li a:hover {
    color: #adadad;
}
.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
}
.menu-sidebar.show .toggle-button {
    display: none; /* Hide toggle button when sidebar is shown */
}
@media (max-width: 768px) {
    .toggle-button {
        font-size: 25px;
        margin: 0px;
        display: block; /* Show toggle button on mobile */
        position: absolute;
        right: 20px; /* Align to the right side */
        top: 26px; /* Align to the top */
        z-index: 1000; /* Ensure it's above the mobile menu */
    }
    nav.scrolled .toggle-button {
        margin-top: 0px;
    }
 
    #contactus{
        margin-right: 0px;
    }
    #products{
        margin-left:0px ;
       
    }
    .close-button {
      
        top: 20px;
        left: -260px;
    
    }
    #contanunique{
        /* margin-left: -10px; */
        font-size: 12px;
    }
    #conp{
        margin-left: 0px;
    }
    
}
@media (max-width: 768px) {
    #navlogo {
        width: 27%;
        margin-left: -10px;
    }
    
}

/* Footer Styles */
footer {
    background-color: #000000;
    color: white;
    padding: 40px 20px;
    width: 100%;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

#logofooter {
    margin-top: 60px;
    height: auto;
    width: 60%;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-column h3 {
    padding-top: 50px;
    margin-bottom: 15px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}
.quick-links-column{
    margin-top: 10px;
    margin-left: 80px;
}
.footer-column ul li {
    margin-bottom: 10px;
    
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
}

.footer-column ul li a:hover {
    color: #aaa9a9bb;
}

.social-links a {
    display: inline-block;
    margin-right: 10px;
    color: white; /* Icon color */
}

.social-links img {
    width: 24px;
    height: 24px;
}

.social-links {
    color: aliceblue;
}
.footer-copyright {
    text-align: center;
    margin-top: 20px;
}

.footer-copyright p {
    padding-top: 20px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        font-size: 12px;
    }

    .footer-column {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: center;
    }
    .contact-column{
        margin-right: 20px;
        font-size: 10px;
        text-align: center;
    }
    #contfooter{
        text-align: center;
        margin: 0px;
        font-size: 12px;
        padding-bottom: 10px;
        /* font-weight: 100; */
    }
    .footerlines{
        font-size: 4px;
        padding: 0px;
        margin: 0px;
    }
    .contact-column{
        font-size: 10px;
    }
   
    .quick-links-column{
        margin-top: 10px;
        margin-left: 0px;
    }

    .footer-copyright p {
        font-size: 10px;
    }

    #logofooter {
        margin-left: 0px;
    }
}

/* Meta Hue Styles */
.metahue {
    margin-top: 0;
    color: #777;
    font-family: 'Poppins', sans-serif;
}

.metahue a {
    color: #777;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

.metahue a:hover {
    color: red;
}

.footerclass {
    text-decoration: none;
    color: rgba(119, 119, 119, 0.884);
}

.footerclass:hover {
    color: #ffffffd0;
}




.whatsapp-icon {
    position: fixed;
    bottom: 20px; /* Adjust as needed */
    right: 20px; /* Adjust as needed */
    z-index: 1000; /* Ensures it's on top of other elements */
}

#whatsappimage {
    width: 60px; /* Adjust the size as needed */
    height: 60px;
    cursor: pointer;
    transition: transform 0.3s ease; /* Smooth transition */
}

#whatsappimage:hover {
    transform: scale(1.08); /* Smoothly scales the image */
}
.badge {
    position: absolute;
    top: -3px;
    right: -4px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2.5px 8px;
    font-size: 12px;
    font-weight: bold;
}





/* Scrolled State - Large Screens */
@media (min-width: 1200px) {
    nav.scrolled ul li a img {
        width: 50%; /* Further reduce size for large screens */
    }
}

@media (min-width: 1792px) and (max-width: 1792px) and (min-height: 1120px) and (max-height: 1120px) {
    nav ul li a img{
        width: 50%;
    }
    nav.scrolled ul li a img {
        width: 35%; /* Adjust logo size specifically for 16-inch MacBook Pro */
    }
}
/* 21-inch iMac Specific Adjustment */
@media (min-width: 1920px) and (max-width: 1920px) and (min-height: 1080px) and (max-height: 1080px) {
    nav ul li a img{
        width: 50%;
    }
    nav.scrolled ul li a img {
        width: 30%; /* Adjust logo size specifically for 21-inch iMac */
    }
}
/* 27-inch iMac Specific Adjustment */
@media (min-width: 2560px) and (max-width: 2560px) and (min-height: 1440px) and (max-height: 1440px) {
    nav ul li a img{
        width: 27%;
    }
    nav.scrolled ul li a img {
        width: 15%; /* Adjust logo size specifically for 27-inch iMac */
    }
}


/* Specific Adjustments for 1024 x 768 Resolution */
@media (max-width: 1024px) {
    nav ul li a {
        font-size: 16px; /* Smaller font size for this screen width */
    }
    
    
    nav ul li a img {
        width: 80%; /* Adjust logo size */
    }
    
    nav.scrolled ul li a img {
        width: 60%; /* Smaller logo size when scrolled */
    }
    
    nav.scrolled ul li a {
        padding-top: 25px; /* Adjust padding top for nav links */
    }
    
    nav.scrolled ul li a img {
        margin-top: -10px;
    }
}




.contact-info h2 {
    text-align: left;
    color: #333;
    margin-bottom: 20px;
  }
  
  .info-item {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.3; /* Ensure proper spacing between lines */
  }
  
  .info-item strong {
    display: inline-block;
    color: #ffffff;
    font-size: 14px;
  }
  #dotone{
    padding-left: 12px;
  }
  .dot {
    padding-left: 15px;
  }
  #dottwo{
    padding-left: 18px;
  }
  #addone{
    padding-left: 87px;
  }
  #addtwo{
    padding-left: 87px;
  }
  .info-item span {
    color: #ffffff;
    margin-left: 10px; /* Space between label and content */
  }
  
  .info-item a {
    color: #ffffff; /* Link color */
    text-decoration: none;
  }
#contfooter{
    margin-top: 70px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}
.footerlines{
    font-weight: 400;
    font-size: 4px;
}
#contanunique{
    font-size: 14px;
}
#conp{
    margin-left: -30px;
}
    /* Initial state of the overlay - opacity 0 */
    #loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 1); /* Start with full opacity */
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 34px;
        z-index: 9999;
        opacity: 1; /* Start with opacity 1 for the overlay */
        animation: fadeOutBackground 15s forwards; /* Animation to fade out background over 15 seconds */
    }
    .cookie { font-family: 'Cookie', cursive;
    margin-left: 20px;
    margin-top: 20px;}


    /* Animation for the fade-out effect of background */
    @keyframes fadeOutBackground {
        0% {
            opacity: 1;
            background-color: rgba(0, 0, 0, 1); /* Full opacity */
        }
        33% {
            opacity: 1;
            background-color: rgba(0, 0, 0, 0.986); /* Hold at full opacity for 5 seconds */
        }
        100% {
            opacity: .5;
            background-color: rgba(0, 0, 0, 0.959); /* Background becomes transparent */
        }
    }

    .fish-animation {
        width: 15%; /* Adjust size as needed */
        animation:  zoomIn 6s ease forwards;
    }
    
    @keyframes swim {
        0% { transform: translateX(0); }
        100% { transform: translateX(100%); }
    }
    
    @keyframes zoomIn {
        0% { transform: scale(1); } /* Start at normal size */
        100% { transform: scale(1.3); } /* End with zoomed-in size */
    }
    

    /* Responsive styles */
    @media (max-width: 600px) {
        #loadingOverlay {
            display: flex;
            font-size: 16px; /* Smaller text for mobile */
        }

        .fish-animation {
            width: 80px; /* Smaller fish size for mobile */
        }
        #dotone{
            padding-left: 0px;
          }
          .dot {
            padding-left: 0px;
          }
          #dottwo{
            padding-left: 0px;
          }
          #dotthree{
            padding-left: 0px;
          }
          #addone{
            padding-left: 0px;
          }
          #addtwo{
            padding-left: 0px;
          }
    }

    @media (max-width: 400px) {
        #loadingOverlay {
            font-size: 13px; /* Even smaller text for very small screens */
        }

        .fish-animation {
            width: 70px; /* Smaller fish size for very small screens */
        }
        .cookie { font-family: 'Cookie', cursive;
            margin-left: 0px; }
    }