/* --- Animated Banner Styles --- */
        .animated-banner-bg{
            background: linear-gradient(to right, #fb923c, #60a5fa, #fb923c); /* from-orange-500 via-blue-400 to-orange-500 */
            border-bottom-left-radius: 1rem; /* rounded-b-2xl */
            border-bottom-right-radius: 1rem; /* rounded-b-2xl */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
            overflow: hidden; /* Crucial for marquee */
            padding-top: 0.25rem; /* py-1 */
            padding-bottom: 0.25rem; /* py-1 */
            position: relative;
            z-index: 1000; /* Ensure it stays on top */
        }

        .banner-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo-title-group {
            display: flex;
            align-items: center;
        }

        .logo-img {
            height: 60px; /* Adjust as needed */
            width: auto;
            margin-right: 1rem;
            border-radius: 50%; /* Make it round */
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            border: 2px solid white;
        }

        .title-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .banner-title {
            color: #fff;
            margin: 0;
            font-size: 1.8rem;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
        }

        .marquee-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
        }

        .marquee-text {
            display: inline-block;
            padding-left: 100%; /* Start off-screen */
            animation: marquee 15s linear infinite; /* Adjust duration as needed */
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
        }

        @keyframes marquee {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
        }

        /* Desktop Navigation */
        .nav-desktop {
            display: flex;
            align-items: center;
        }

        .nav-desktop a, .nav-desktop select {
            color: #fff !important;
            margin-left: 1.2rem;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .nav-desktop a:hover {
            color: #e0e0e0 !important;
        }
        .nav-desktop select {
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: #fff;
            padding: 0.25rem 0.5rem;
            border-radius: 0.3rem;
        }
        .nav-desktop select option {
            background-color: #60a5fa; /* Blue background for options */
            color: #fff;
        }

        /* Mobile Navigation Toggle */
        .nav-mobile-toggle {
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            display: none; /* Hidden on desktop */
        }

        /* --- Mobile Drawer Styles --- */
        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1050;
            display: none; /* Hidden by default */
        }

        .drawer {
            position: fixed;
            top: 0;
            right: -300px; /* Hidden off-screen */
            width: 300px;
            height: 100%;
            background-color: #fff;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
            z-index: 1100;
            transition: right 0.3s ease-in-out;
            padding: 1.5rem;
            overflow-y: auto; /* Enable scrolling for long content */
        }

        .drawer.open {
            right: 0;
        }

        .drawer-section {
            border-bottom: 1px solid #eee;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }
        .drawer-section:last-child {
            border-bottom: none;
        }




/* Ensure mobile toggle is visible on mobile */
.nav-mobile-toggle {
    display: block !important;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 8px 12px;
    z-index: 1000;
}
.fab.fa-linkedin-in {
  font-size: 1.2rem; /* Icon size */
  transition: color 0.2s ease-in-out; /* Smooth color transition */
}
/* Make sure it's properly positioned */
@media (max-width: 767px) {
    .nav-mobile-toggle {
        position: relative;
        margin-right: 10px;
    }
    
    /* Ensure logo-title-group doesn't push toggle off screen */
    .logo-title-group {
        flex: 1;
        justify-content: center;
    }
}

/* Base Footer Styling */
footer-old{
    background: linear-gradient(135deg, #1f2937, #111827); /* Dark blue-gray gradient */
    color: #e8ebef; /* Light gray text */
    padding: 3rem 1.5rem; /* More vertical padding */
    margin-top: 4rem; /* More space above the footer */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
}

footer .max-w-7xl {
    max-width: 1200px; /* Ensure content doesn't stretch too wide */
    margin-left: auto;
    margin-right: auto;
}

ul.list-unstyled li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: hsl(70, 100%, 50%);
  margin-right: 8px;
}

/* Headings */
footer h3 {
    font-size: 1.8rem; /* Slightly larger main headings */
    font-weight: 700; /* Bold */
    margin-bottom: 1.5rem;
    color: #f9fafb; /* Lighter color for main headings */
    line-height: 1.2; /* Better line spacing for multi-line headings */
}

footer h3 .text-base {
    font-size: 1.1rem; /* Bengali sub-heading size */
    font-weight: 400; /* Normal weight for Bengali */
    color: #9ca3af; /* Slightly darker for Bengali */
    margin-top: 0.25rem; /* Space between English and Bengali heading */
    display: block; /* Ensure Bengali is on a new line */
}

footer h5 {
    font-size: 1.4rem; /* Products sub-heading size */
    font-weight: 600; /* Semi-bold */
    margin-bottom: 1rem;
    color: #f9fafb;
    line-height: 1.2;
}

footer h5 .text-base {
    font-size: 1rem; /* Bengali sub-heading size for Products */
    font-weight: 400;
    color: #9ca3af;
    margin-top: 0.25rem;
    display: block;
}

/* Paragraphs */
footer p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #d1d5db; /* Lighter gray for general text */
}

footer p .text-sm { /* For Bengali text in paragraphs */
    font-size: 0.9rem;
    color: #9ca3af;
    display: block; /* Ensure Bengali is on a new line */
}

/* Unordered Lists (Links) */
footer ul.list-unstyled {
   
    padding: 0;
    margin: 0;
}

footer ul.list-unstyled li {
    margin-bottom: 0.75rem; /* More space between list items */
}

footer ul.list-unstyled li a {
    color: #bfdbfe; /* Light blue for links */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Allows transform */
}

footer ul.list-unstyled li a:hover {
    color: #7ffa60; /* Brighter blue on hover */
    transform: translateX(5px); /* Slight movement on hover */
    text-decoration: underline;
}

/* Link pairs (English / Bengali) inside lists */
footer ul.list-unstyled li a .block {
    font-size: 1rem;
    font-weight: 500; /* Medium weight for English */
    color: #e5e7eb;
}

footer ul.list-unstyled li a .text-sm {
    font-size: 1rem;
    font-weight: 400;
    color: #9ca3af;
    margin-top: 0.1rem; /* Small space between English and Bengali */
}

/* Copyright Section */
footer .border-t {
    border-color: #374151; /* Darker border */
}

footer .text-center {
    font-size: 1rem;
    color: #e0e4ec;
    margin-top: 3rem; /* More space above copyright */
}

footer .text-center .text-sm {
    font-size: 1rem;
    color: #6b7280;
    margin-top: 0.25rem;
    display: block;
}

/* Responsive Grid for Footer Columns */


/* Contact Button (FAB) */
.fixed.bottom-4.right-4 {
    background-color: #3B82F6 !important; /* Ensure consistent background color */
    color: white;
    border-radius: 9999px; /* Fully rounded */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 10px 15px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.fixed.bottom-4.right-4:hover {
    background-color: #2563eb !important; /* Darker blue on hover */
    transform: translateY(-3px); /* Lift effect */
}

.fixed.bottom-4.right-4 svg {
    width: 1.5rem;
    height: 1.5rem;
}

.fixed.bottom-4.right-4 .sr-only {
    position: absolute; /* Hide visually but keep for screen readers */
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* General Link Styling (if not already defined) */
a {
    color: inherit; /* Inherit color from parent by default */
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* This is a general reset for the specific class, adjust if it affects other elements */
.list-unstyled {
    list-style: none;
    padding: 0;
}

/* footer_style.css */



/* Use Flexbox or Grid for the container */
.footer-container {
    display: flex;
    flex-direction: column; /* Stacks items vertically on mobile */
    gap: 2rem; /* Spacing between sections */
}

.footer-column {
    /* Basic styling for each column on mobile */
    margin-bottom: 1.5rem;
}

.footer-column h5 {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #f9fafb;
}

.footer-column ul {
    list-style-type: none; /* Remove bullet points */
    padding-left: 0;
}

.footer-column ul li a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #bfdbfe;
    text-decoration: underline;
}

/* Example: Custom brand color */
.custom-footer-color {
    background-color: #18b34b !important;
    /* Deep Navy/Black */
}

/* Example: Gradient background (like your banner) */
.custom-footer-gradient {
    /* Orange to Blue Gradient */
    background: linear-gradient(to right, #ff8c00, #4682b4) !important;
}





/* FAB */
.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: #60a5fa;
    color: white;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.fab-menu {
    display: none;
    position: fixed;
    bottom: 4.5rem;
    right: 1.5rem;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 999;
}
.fab-menu.show {
    display: flex; /* Show when the 'show' class is added */
}

.fab-menu a {
    background-color: #fb923c;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


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

.fab-menu a {
    background-color: #fb923c;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fab-menu a:hover {
    background-color: #28a745; /* Color on hover (green) */
}




.share-btn {
    background-color: #fb923c;
    /* orange color */
    color: #FFFFFF;
    /* white text color */
    border: none;
    padding: 10px 20px;
    border-radius: 50%;
}
.share-btn:hover {
    background-color: #28a745; /* green color on hover */
    cursor: pointer; /* Optional: adds a pointer cursor on hover */
}

#fab-menu> :last-child {
    background-color: #fb923c;
    /* orange color */
    color: #060606;
    /* white text color */
    padding: 10px 20px;
    border-radius: 50%;
}

.list-unstyled li {
    margin-bottom: 10px;
    /* adjust the value as needed */

}
.fab-menu-item {
    color: #fb923c;
    /* replace with the desired color */
}

/* --- Footer Styles --- */
footer {
	background-color: #343a40;
	color: #fff;
	padding: 2rem 0;
	text-align: center;
}
footer a {
	color: #60a5fa;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}


/* Disable Right-Side FAB Menu and its sub-menu */