@charset "utf-8";


/**=========================================================
 * Theme Name   :  Ecommerce
 * Author       :  Rabbani ,
 * Description  :  December 2023
 * File Name    :  style.css
=========================================================**/



    /* Loader styles */
    #loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

    .centered-banner {
        max-width: 100%; /* Make sure the image width doesn't overflow */
        height: auto; /* Maintain the aspect ratio */
        object-fit: cover; /* Ensure the image covers the container */
        max-height: 80vh; /* Optional: Limit the height to 80% of the viewport height */
        margin-top: 10vh; /* Moves the image down by 10% of the viewport height */
    }



    .logo {
        width: 180px;
        height: 40px;
        object-fit: contain; /* Ensure the aspect ratio is maintained */
    }
    
    /* Responsive styling for smaller devices */
    @media (max-width: 768px) {
        .logo {
            width: 150px; /* Reduce width on smaller screens */
            height: 30px; /* Reduce height on smaller screens */
        }
    }
    
    @media (max-width: 576px) {
        .logo {
            width: 120px; /* Further reduce width on very small screens */
            height: 25px; /* Further reduce height on very small screens */
        }
    }


    /* Customize the email link */
        .address-link {
            color: #ff9800; /* Accent color for email links */
            text-decoration: none;
        }
        
        .address-link:hover {
            color: #ffc107; /* Hover effect for email links */
        }
        
        /* Adjustments for responsiveness */
        @media (max-width: 768px) {
            .text-body {
            font-size: 0.9rem; /* Adjust font size for small screens */
            }
        
            .text-sm-end {
            text-align: center; /* Center the address on smaller screens */
            }
        }
        
        @media (min-width: 768px) {
            .text-md-start {
            text-align: left; /* Align the address to the left on medium to large screens */
            }
        }
        
   

        .custom-dropdown-menu {
            max-height: 500px;  /* Limit height of the dropdown */
            overflow-y: auto;  
            padding-right: 5px; /* Optional: Adds space for the scrollbar */
            position: relative; /* Ensures proper stacking of dropdown content */
        }
        
        /* Scrollbar styles for WebKit browsers */
        .custom-dropdown-menu::-webkit-scrollbar {
            width: 8px; /* Scrollbar width */
            background-color: transparent; /* Make the scrollbar background transparent */
        }
        
        /* Scrollbar thumb style */
        .custom-dropdown-menu::-webkit-scrollbar-thumb {
            background-color: #006B85; /* Gray color for the handle */
            border-radius: 10px; /* Rounded corners for the handle */
            border: 2px solid transparent; /* Optional: Adds some space around the thumb */
            background-clip: content-box; /* Makes the thumb look neat */
        }
        
        /* Hover state for scrollbar thumb */
        .custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* Darker gray when hovering */
        }
        
        /* Scrollbar track (area where thumb slides) */
        .custom-dropdown-menu::-webkit-scrollbar-track {
            background-color: #f1f1f1; /* Light gray background for the track */
            border-radius: 10px; /* Rounded corners for the track */
        }
        
        /* Firefox scrollbar customization */
        .custom-dropdown-menu {
            scrollbar-width: thin; /* Thin scrollbar for Firefox */
            scrollbar-color: #006B85 #f1f1f1; /* Custom thumb and track colors */
        }
        
        /* Optional: Style the scrollbar when it's active */
        .custom-dropdown-menu::-webkit-scrollbar:active {
            background-color: #ddd; /* Slightly darker background when active */
        }
        
        /* Ensure proper behavior on smaller screens */
        @media (max-width: 992px) {
            .navbar-nav .dropdown-menu {
                position: static; /* Adjust for better mobile dropdown behavior */
            }
        }




/* Scoped Swiper Styles */



#large-image-section {
    border: 1px solid #ECECEC; /* Adjust the border thickness as needed */
    padding: 10px; /* Optional: adds padding inside the border */
    background-color: #fff; /* Optional: Set a background color if needed */
    margin-bottom: 5px;;
}


.custom-swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  
}

.custom-swiper-btn-prev,
.custom-swiper-btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(243, 239, 239, 0.908);
    color: white;
    border: none;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-swiper-btn-prev {
    left: 10px;
}

.custom-swiper-btn-next {
    right: 10px;
}

.custom-swiper-btn-prev:hover,
.custom-swiper-btn-next:hover {
    background-color: #0E7673;
}

.custom-swiper-thumb-img.active {
    border: 2px solid #0E7673;
    border-radius: 5px;
    transition: border-color 0.3s ease;
    padding:10px;
}


/* Gradient Background for Modal */


/* Search Design */

.searching-result {
    max-height: 500px; /* or whatever fits best */
    overflow-y: auto;
    list-style: none;
    padding-left: 0;
    text-decoration: none;
    scrollbar-width: thin; /* Firefox */
  }
  
  .searching-result .list-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .searching-result .list-item:last-child {
    border-bottom: none;
  }
  
  .searching-result .list-item-link {
    text-decoration: none;
    color: #000;
    display: block;
  }
  
  .searching-result .item-list-subtext {
    display: block;
    font-size: 12px;
    color: #555;
  }
  
  
   
  .list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .list-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
  }
  
  .list-item-link {
    text-decoration: none !important;
    color: #333;
    display: block;
  }
  
  .list-item-link:hover {
    background-color: #f5f5f5;
  }