/* Default styles for larger screens */
.logo-display, .logo-scrolled {
    margin-top: -20px !important;
    height: 100px !important;
    width: 100px !important;
}

.navbar-nav {
    margin-top: 11px !important;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .logo-display, .logo-scrolled  {
        margin-top: -38px !important;
        height: 147px !important;
        width: 147px !important;
    }

    .navbar-nav {
        margin-top: 6px !important; /* Reduce navbar margin on mobile */
    }
}



/* Default styles for larger screens */
.imagechange {
    height: 300px !important;
    /* Optionally, you can specify width as well for large screens */
    /* width: 100%; */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .imagechange , .productimages1{
        height: 200px !important;   /* Allow the height to adjust automatically */
        /* width: 100%;     */
     }
}


.productimages1{
    height: 300px !important;
    /* Optionally, you can specify width as well for large screens */
    width: 100%;
}
/* Mobile-specific styles */
@media (max-width: 768px) {
     .productimages1{
        height: 300px !important;   /* Allow the height to adjust automatically */
        width: 100%;    
     }
}
/* Mobile-specific styles for 390px to 844px */
@media (min-width: 390px) and (max-width: 844px) {
    .productimages1 {
        height: 400px !important; /* Adjust the height as needed */
        width: 100%; /* Keep it responsive */
    }
}

/* Smaller screens below 390px */
@media (max-width: 390px) {
    .productimages1 {
        height: 400px !important; /* Adjust the height for smaller devices */
        width: 100%; /* Full width */
    }
}

/* Larger screens up to 1024px (e.g., tablets) */
@media (min-width: 845px) and (max-width: 1024px) {
    .productimages1 {
        height: 300px !important; /* Adjust height for tablets */
        width: 100%; /* Full width */
    }
}


/* index blog image customize */


.blogimage img{
    height: 420px !important;
    /* Optionally, you can specify width as well for large screens */
    width: 100%;
}
/* Mobile-specific styles */
@media (max-width: 768px) {
     .blogimage img{
        height: 350px !important;   /* Allow the height to adjust automatically */
        width: 100%;    
     }
}











/* social icons */

/* WhatsApp Buttons */

/* Container for the fixed buttons */
.fixed-contact-buttons {
    position: fixed;
    right: 20px;
    top: 65%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

/* Common styling for each button */
.contact-button {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.contact-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hover effect with shadow */
.contact-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* Specific button colors */
.whatsapp-button {
    background-color: #25D366;
}

.phone-button {
    background-color: #f1b834;
}

/* Media Query for Mobile Screens */
@media (max-width: 768px) {
    .fixed-contact-buttons {
        right: 10px;
        gap: 10px;
    }
    .contact-button {
        width: 40px;
        height: 40px;
    }
}

/* Media Query for Extra Small Screens */


/* Pop-up Box Styles */
.popup {
    position: fixed;
    right: 93px;
    top: 45%;
    background-color: white;
    border: 2px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 250px;
    z-index: 100;
    opacity: 0;
    transform-origin: top left;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: none;
}

/* Show popup with animations */
.popup.show {
    display: block;
    opacity: 1;
    transform: scale(1);
    animation: slideFromButton 0.4s ease-out forwards;
}

/* Slide and grow effect */
@keyframes slideFromButton {
    from {
        opacity: 0;
        transform: translate(-20px, -20px) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

/* Close Button Styling */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-color: #f44336;
    color: white;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.close-button:hover {
    background-color: #d32f2f;
}

/* Pop-up content styling */
.popup h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.popup-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.popup-item img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}



/* soical icons  */

 /* Background and layout for the entire section */
 .backgrou {
    position: fixed;
    top: 50%;
    left: 0;
    /* transform: translateY(-50%); */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 10px 7px;
    background: linear-gradient(135deg, #4285f4, #34a853);
    border-radius: 0px 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease;
}
  
    /* Base styles for each icon link */
    .icon {
      width: 40px;  /* Reduced size of the icons */
      height: 40px; /* Make the icons smaller */
      display: block;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
  
    /* Container div around each image */
    .icon-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;  /* Default white background */
      border: 2px solid #fff;  /* Light border around icons */
      border-radius: 10px;      /* Rounded corners for the containers */
      overflow: hidden;
      transition: background-color 0.3s ease;
    }
  
    
  
    /* Image styling inside the container */
    .icon-container img {
      /* width: 100%;   */
      height: 120%; /* Ensures aspect ratio is maintained */
      object-fit: contain; /* Keeps the image's aspect ratio intact */
    }
  
    /* Hover effect to enlarge icons and add interactive effect */
    .icon:hover .icon-container {
      transform: scale(1.2); /* Slightly larger icon on hover */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
      background-color: #fff; /* Optional: change the background color on hover */
    }
  
    /* Additional media queries for responsiveness */
    @media (max-width: 768px) {
      .icon {
        width: 35px;
        height: 35px;
      }
      .backgrou {
        gap: 8px;
      }
    }
  
    @media (max-width: 480px) {
      .icon {
        width: 30px;
        height: 30px;
      }
      .backgrou {
        gap: 6px;
      }
    }
/* social icons end */