@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* --- style.css --- */
/* TABLE OF CONTENTS */
/*----------------------
1. General
2. Navbar
3. Banner
4. About Us(Who We Are or about company)
5. What we do
6.Our Features and Services
7. Why Choose Us
8. Testimonial
9. Trusted by( or Our clients)
10. Footer
----------------------*/

/* --- Global Reset and Box Sizing --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Changed from 0 to border-box. Ensures padding and border don't increase element's total width/height. */
}

/* --- Root Variables --- */
:root {
    /* Background Colors */
    --bg-white: #fff; /* White background */
    --bg-black: #000000; /* Black background */
    --bg-theme: #4852d3; /* Generic theme color, overridden by MMTTC theme in specific classes */
    
    /* Text Colors */
    --text-white: #fff; /* White text */
    --text-gray: #474747; /* Gray text, potentially overridden by p tag styles */
    --text-theme: #A51C30; /* Generic theme text color, overridden by MMTTC theme in specific classes */
    --p-light: #e0e0e0; /* Light paragraph text, often used in footers or dark backgrounds */
    
    /* Font Families */
    --font-p: 'Poppins', sans-serif; /* Default paragraph font - SET TO POPPINS */
    --font-h: 'Outfit', sans-serif;   /* Default heading font - SET TO OUTFIT */
    
    /* Font Sizes */
    --card-p: 13px; /* Paragraph font size for cards */
    --normal-p: 15px; /* Normal paragraph font size */

    /* RGB value for theme color (useful for rgba) */
    --text-theme-rgb: 165, 28, 48; /* Corresponds to #A51C30 (MMTTC Theme) */


    --checkout-primary-brand-color: #a51c30; /* MMTTC Red */
    --checkout-primary-brand-light: #a51c30; /* Lighter MMTTC Red for hover */
    --checkout-primary-brand-rgb: 165, 28, 48; /* MMTTC Red RGB */
    --checkout-accent-color: #a51c30;  /* MMTTC Red */
    --checkout-text-color-primary: #2c3e50;
    --checkout-text-color-secondary: #7f8c8d;
    --checkout-background-color-page: #f4f6f8;
    --checkout-background-color-panel: #ffffff;
    --checkout-border-color-soft: #e0e6ed;
    --checkout-border-color-strong: #ced4da;
    --checkout-success-color: #27ae60;
    --checkout-warning-color: #f39c12;
    --checkout-danger-color: #a51c30;
    --checkout-disabled-bg-color: #ecf0f1;
    --checkout-disabled-text-color: #bdc3c7;
    --checkout-white: #fff;

    --checkout-stepper-active-bg: var(--checkout-primary-brand-color);
    --checkout-stepper-completed-bg: var(--checkout-success-color);
    --checkout-stepper-default-bg: #bdc3c7;

    --checkout-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --checkout-font-headings: 'Outfit', var(--checkout-font-sans);

    --checkout-border-radius-sm: 4px;
    --checkout-border-radius-md: 6px;
    --checkout-box-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --checkout-box-shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.1);

    --footer-bg-dark: #1A181E;
    --footer-bg-black: #000000;
    --footer-text-primary: #FFFFFF;     /* For bold titles and main headings */
    --footer-text-secondary: #a9a9a9;  /* For ALL paragraphs and links - a softer grey */
    --footer-accent-pink: #E91E63;     /* The EXACT pink from the image */
    --footer-social-bg: #F44336;       /* The EXACT reddish-orange from the image */
    --footer-border-color: #3a3a3a;

}

/* --- Basic HTML Element Styling --- */
a {
    text-decoration: none; /* Default link styling, overridden by a later rule from custom.css */
}

body {
    font-family: var(--font-p); /* Default body font (Now Poppins) */
    font-size: 14px; /* Base font size (from custom.css) */
    background: white; /* Default body background (from homepage inline style) */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-h); /* Default heading font (Now Outfit) */
}

p {
    font-size: var(--normal-p); /* Adjusted from var(normal-p), uses custom variable */
    color: #000b22ea !important; /* Default paragraph color (from custom.css), overrides --text-gray. Important flag used. */
    font-weight: 400; /* Default paragraph font weight (from custom.css) */
    line-height: 30px !important; /* Default paragraph line height (from homepage inline style). Important flag used. */
}

.card-p { /* Specific class for paragraphs in cards */
    font-size: var(--card-p);
    text-align: justify; /* Justified text for card paragraphs */
}

/* --- Utility Classes --- */
.bg-theme {
    /* background-color: var(--bg-theme); */ /* Original generic theme background */
    background-color: #A51C30 !important; /* Overriding with MMTTC theme color (from homepage). Important flag used. */
}

.bg-Btn {
    background-color: var(--bg-Btn); /* Background color for buttons. --bg-Btn needs to be defined if used. */
}

.bg-pink {
    background-color: var(--bg-pink); /* Pink background color. --bg-pink needs to be defined if used. */
}

.text-gray {
    color: var(--text-gray); /* Uses gray text color variable. */
}

.text-white {
    color: var(--text-white); /* Uses white text color variable. */
}

.text-theme {
    /* color: var(--text-theme) !important; */ /* Original generic theme text color */
    color: #A51C30 !important; /* Overriding with MMTTC theme text color. Important flag used. */
}

.text-pink {
    color: var(--text-pink); /* Pink text color. --text-pink needs to be defined if used. */
}

.p-light {
    color: var(--p-light); /* Uses light paragraph text color variable. */
}

/* --- Heading Specific Sizes --- */
h1 {
    font-size: 33px; /* Default H1 size, might be overridden by media queries or more specific rules */
    font-weight: bold;
}

h2 {
    font-size: 25px; /* Default H2 size, might be overridden */
    font-weight: bold;
}

/* --- Homepage Specific Styles (Integrated from inline CSS) --- */
td { /* Table cell alignment */
   text-align:start !important; /* Important flag used. */
}

.btn-success { /* Style for success buttons, likely Bootstrap or similar framework */
   color:#fff !important; /* Important flag used to ensure white text. */
}

h2.titles { /* Specific styling for H2 elements with class 'titles' (from homepage) */
   font-size: 28px !important;
   margin-bottom: 30px !important;
   color: black !important; /* MMTTC theme color. Important flags used. */
}

.sec-pad { /* Section padding utility class (from homepage) */
   background: #fff;
   padding: 0px;
   border-radius: 7px;
}

.container { /* Container max-width, Bootstrap-like */
    max-width: 1600px !important; /* Important flag used. */
}

@media (max-width: 1300px) { /* Responsive adjustment for container */
    .container {
        max-width: 1200px !important; /* Important flag used. */
    }
}


/*************** Founder Section Styles ***************/
.founder p { /* Paragraphs within founder section */
    text-align: justify;
}

.founder-img { /* Founder image styling */
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Circular image */
}

.collage-tour { /* Image/element for collage tour */
    width: 100%;
    height: 100%;
}

.f-card { /* Founder card styling */
    width: 90%; /* Default width, may be overridden */
    height: auto;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px; /* Subtle shadow */
    border-radius: 10px;
    border: none;
}

.four-cards h5,
.four-cards p { /* Text alignment within 'four-cards' container */
    text-align: center !important; /* Important flag used. */
}

.four-cards h5 { /* Heading style in 'four-cards' */
    font-size: 17px;
    font-weight: 700;
    margin: 5px;
}

.four-cards p { /* Paragraph style in 'four-cards' */
    font-size: 13px;
    font-weight: 500;
}

.f-card-img { /* Image within founder card */
    width: 100%;
    height: 200px; /* Default height, may be overridden by custom.css styles */
    border-radius: 0px; /* No border radius by default */
}

/********************* Quick-Links Section Styles ***************/
.quick-link {
    margin-bottom: 40px;
}

h1.deco-line { /* Heading with a decorative line */
    position: relative;
}

h1.deco-line::after { /* Decorative line style */
    content: "";
    position: absolute;
    width: 85%;
    height: 4px;
    background-color: #840607; /* Dark red color for the line */
    top: 19px;
    left: 183px; /* Adjust for alignment */
}

.quick_links a { /* Links within quick_links container */
    text-decoration: none;
}

.link { /* Styling for individual quick links */
    background-color: #4852d3; /* Original theme color, potentially overridden by .bg-theme for MMTTC */
    padding: 7px;
    width: 280px;
    border-radius: 50px; /* Pill shape */
    transition: 0.3s; /* Smooth hover transition */
}

.link:hover {
    background-color: #065659; /* Hover background color */
    cursor: pointer;
}

.u-l-icon { /* Icon within the quick link */
    width: 50px;
    height: 42px;
    margin-right: 8px;
    padding: 7px;
    background-color: #fff; /* White background for icon container */
    border-radius: 50px; /* Circular icon container */
}

.link h5 { /* Heading text within quick link */
    margin-bottom: 0;
    color: #fff; /* White text */
}

.link p { /* Paragraph text within quick link, unusual placement for p inside link, might be description */
    text-align: left !important; /* Important flag used. */
}
















/************ Media Queries (style.css part) ***********/
@media (min-width:380px) and (max-width:880px) { /* Adjustments for medium-small screens */
    h1.deco-line::after { /* Shorten decorative line */
        width: 50%;
    }
}

@media (min-width:380px) and (max-width:575px) { /* Adjustments for very small screens (mobile) */
    .f-card { /* Founder card adjustments */
        width: 20rem; /* Fixed width */
        margin-bottom: 20px;
    }

    .collage-tour { /* Spacing for collage tour element */
        margin-bottom: 20px;
    }

    .link { /* Quick link adjustments */
        margin-bottom: 20px;
    }

    .footer-cont { /* Footer content centering on small screens */
        display: flex;
        justify-content: center;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important; /* Important flags used. */
    }
}

@media (min-width:767px) and (max-width:991px) { /* Adjustments for tablets and small desktops */
    .link { /* Quick link width adjustment */
        width: auto;
    }

    .u-l-icon { /* Icon size adjustment in quick links */
        height: 32px;
    }
}

@media (min-width:380px) and (max-width:767px) { /* Adjustments for small to medium screens */
    .link { /* Quick link font size and margin */
        font-size: 14px;
        margin-bottom: 20px;
    }
}


/* --- custom.css Content Starts --- */
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); /* ADDED OUTFIT & POPPINS */

/*----- Scrolling Row Animation -----*/
.row-scroll { /* Container for horizontally scrolling content */
    width: fit-content; /* Shrink-wrap width */
    white-space: nowrap; /* Prevent line breaks */
    overflow: hidden; /* Hide overflowing content */
    animation: scrollLeft 20s linear infinite; /* Apply scrolling animation */
}

.row-scroll:hover { /* Pause animation on hover */
    animation-play-state: paused;
}

@keyframes scrollLeft { /* Horizontal scrolling animation */
    0% {
        transform: translateX(90%); /* Start off-screen to the right */
    }
    100% {
        transform: translateX(-100%); /* End off-screen to the left */
    }
}

/*--------- Tab Component Styles ---------*/
.tab-bg { /* Background/container for tabs */
    box-shadow: 0px 0px 10px 0.1px #00000012; /* Subtle shadow */
    background-color: #00000000; /* Transparent background by default */
    margin-bottom: 20px;
}

.tab-img { /* Image within a tab */
    height: 40px;
    width: auto;
    margin-right: 20px;
}

.tab-cont-main { /* Main content area for a tab */
    padding: 20px;
    border-radius: 0px; /* No border radius */
    background-color: #fff !important; /* White background. Important flag used. */
    min-height: 463px; /* Minimum height */
    width: auto;
    color: #000 !important; /* Black text. Important flag used. */
}

.tab-cont-main p { /* Paragraphs within tab content */
    color: #000 !important; /* Black text. Important flag used. */
}

/* h5, h6 are already styled globally or via specific component rules */

.nav-tabs { /* Styling for tab navigation (Bootstrap-like) */
    border: none; /* Remove default border */
    border-bottom: 0.0625rem solid #D8D8D8; /* Light gray bottom border */
}
.nav-tabs .nav-link { /* Individual tab links */
    font-size: 16px;
    font-weight: 500;
    color: #000b22 !important; /* Dark blue text. Important flag used. */
    border-top: none ;
    border-right: 1px solid #c4c8d1 !important; /* Light gray right border. Important flag used. */
    border-left: none;
    border-bottom: none;
    border-radius: 0 0 5px 5px; /* Rounded bottom corners for inactive tabs */
}
.nav-tabs .nav-link.active { /* Active tab link */
   background-color: #fff; /* White background */
   border-bottom: none; /* Remove bottom border to merge with content area */
}

.banner { /* Banner container */
    overflow: hidden; /* Prevent content overflow */
}

/* --- Media Queries for Tabs (custom.css) --- */
@media (min-width:370px) and (max-width:767px) {
    .tab-bg { /* Tab container adjustments for small screens */
        display: flex;
        width: auto;
    }
    .tab-cont-main { /* Tab content width adjustment */
        width: auto;
    }
}

@media (min-width:370px) and (max-width:575px) { /* Mobile specific styles for top menu logo */
    .top_menu .logo-img {
        display: flex !important;
        justify-content: center !important; /* Center logo image. Important flags used. */
    }
}

/* --- Custom Font Face (Kruti Dev for Hindi text) --- */
@font-face {
     font-family: kruti dev; /* Hindi font */
    src: url('./fonts/k010.ttf') format("truetype"); /* Ensure this path is correct relative to the CSS file or build output */
}

.hinditext { /* Class to apply Hindi font */
    font-family: kruti dev;
}

/* --- Global Link Styling Override (custom.css) --- */
a {
    text-decoration: none !important; /* Remove text decoration from all links. Stronger override from custom.css. Important flag used. */
}

/* --- Spacing Utility Classes (custom.css) --- */
.py_50 { padding: 50px 0; } /* Padding top/bottom 50px */
.py_70 { padding: 70px 0; } /* Padding top/bottom 70px */
.my_50 { margin: 50px 0; }  /* Margin top/bottom 50px */
.my_70 { margin: 70px 0; }  /* Margin top/bottom 70px */
.mt_50 { margin-top: 50px; } /* Margin top 50px */
.mt_70 { margin-top: 70px; } /* Margin top 70px */


/* --- Header Styling (custom.css) --- */
header { /* Main header element */
    background-color: #fff; /* White background */
    border-top: 1px solid #e9e9e9; /* Dark teal top border */
    border-bottom: 0px solid #000000; /* Dark teal top border */
	box-shadow: 0 8px 14px -8px rgb(0 0 0 / .5);
}

/* Extra Small Devices (max-width: 480px) */
@media (max-width: 480px) {
    header {
        padding: 5px 10px;
padding:0px !important;

        border-top: none;
        border-bottom: 0px solid #ccc;
        background-color: #fff;
    }
}

/* Small Devices (max-width: 767px) */
@media (max-width: 767px) {
    header {
       /* padding: 5px 0px 5px 10px;*/
padding:0px !important;

        border-top: none;
        border-bottom: 0px solid #000000;
        background-color: #fff;
    }
}

/* Tablet Devices (min-width: 768px) and (max-width: 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    header {
        padding: 5px 10px;
        border-top: 1px solid #ddd;
padding:0px !important;

        border-bottom: 0px solid #000000;
        background-color: #fff;
    }
}

.top_menu .h4 { /* H4 styling within top menu */
    font-style: normal;
    font-size: 36px;
    line-height: 36px;
    color: #A51C30; /* MMTTC Red */
	font-family: 'Poppins', sans-serif; /* Explicitly Poppins, will remain */
    margin-bottom: 10px;
    font-weight: 800; /* Bold */
    margin-top: 10px;
}

.top_menu p { /* Paragraph styling within top menu */
    font-size: 16px !important; /* Important flag used. */
    color: #6e6f6f !important; /* Gray text. Important flag used. */
    font-weight: 500;
	margin-top: 10px;
	font-family: 'Poppins', sans-serif; /* Explicitly Poppins, will remain */
}

.btn_head { /* Button styling in header */
    background-color: rgb(1 69 80); /* Dark teal background */
    color: #fff; /* White text */
    margin-right: 10px;
}

.btn_head:hover { /* Hover state for header button */
    background-color: rgb(1 69 80); /* Maintain background color */
    color: #fff; /* Maintain text color */
}

.top_menu .logo { /* Main logo in top menu */
    height: 120px;
}

.top_menu .logo-2 { /* Secondary logo/variant in top menu */
    width: 100px;
    height: 140px;
}

.title { /* Decorative title underline/bar */
    width: 100%;
    height: 4px;
    background-color: #A51C30; /* MMTTC Red */
    position: relative;
}

.title_content { /* Content/text associated with the title bar */
    position: absolute;
    top: -35px; /* Position above the bar */
    padding: 10px 50px 10px 40px;
    background-color: #fff; /* White background to sit on top of the bar */
}

.text-thm { /* Another theme text color class, different from .text-theme */
    color: #4852d3; /* Uses the original generic theme color */
}

/* --- Menu Specific CSS Variables (from custom.css, consider integrating into main :root or keeping separate if plugin-specific) --- */
/* :root { /* Re-declaration of :root here will override or add to previous :root variables if not careful. Best practice is one :root block. */
    /* These variables seem specific to a particular menu implementation. */
    /* --color-white-100: hsl(206, 5%, 100%); */ /* Already have --bg-white */
    /* --color-pink-500: hsl(333, 71%, 50%); */ /* Example pink, adjust as needed for menu */
    /* ... other specific menu colors ... */
    /* --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06); */ /* Medium shadow for menu elements */
/* } */
/* Commented out re-declaration of :root as it's generally bad practice to have multiple. 
   If these variables are truly needed and distinct, they should be prefixed or uniquely named. 
   For now, assuming main :root variables are sufficient or these are for a very isolated component.
*/

.brand { /* Brand/logo text style, likely for the menu */
    font-family: inherit; /* Inherits font from parent */
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
    text-transform: uppercase;
    /* color: var(--color-pink-500); */ /* Uses the menu-specific pink, ensure --color-pink-500 is defined in main :root if used */
    color: hsl(333, 71%, 50%); /* Using direct value if var isn't in main root */
}

.header { /* Specific class '.header', likely for the navigation menu bar itself, distinct from the 'header' tag */
    position: relative;
    width: 100%;
    height: fit-content;
    z-index: 100; /* High z-index to stay on top */
    margin: 0 auto;
    background: white; /* MMTTC Theme Red background */
}

.wrapper { /* Wrapper for menu content alignment */
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    row-gap: 2rem;
    height: auto;
}

.dynamicsearchcard{
  max-height: 400px; /* Adjust this based on your card height × 2 rows */
  overflow-y: auto;

}



@media screen and (max-width: 992px) { /* Responsive adjustments for H1 and mobile navbar */
    h1 { font-size: 25px; } /* custom.css H1 size for smaller screens, overrides 33px from style.css */

    .navbar { /* Styling for a mobile off-canvas menu */
        position: fixed !important; /* Important flag used. */
        top: 0;
        left: -100%; /* Initially hidden off-screen */
        width: 75%;
        height: 100%;
        z-index: 10;
        opacity: 0;
        overflow-y: auto;
        visibility: hidden;
        /* box-shadow: var(--shadow-medium); */ /* Uses menu-specific shadow, ensure var is defined */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Direct value */
        /* background-color: var(--color-white-100); */ /* Uses menu-specific white */
        background-color: var(--bg-white, #fff); /* Using main root variable */
        transition: all 0.5s ease; /* Smooth transition for appearing/disappearing */
    }
    .navbar.active { left: 0rem; opacity: 1; visibility: visible; } /* Active state for mobile menu */
    .wrapper { justify-content: space-around; height: 3rem; } /* Adjust wrapper for mobile menu trigger */
}

.menu-item { position: relative; display: inline-block; margin-left: 1.5rem; } /* Desktop menu item */
.menu-item2 { width: 100%; } /* Full-width menu item, likely for mobile or dropdowns */
.menu-item2 .menu-link2 { width: 100%; display: flex; justify-content: space-between; }
/* .menu-item2 .menu-link2:hover>p { color: var(--color-pink-500); } */ /* Hover state for text within menu-link2, ensure var defined */
.menu-item2 .menu-link2:hover>p { color: hsl(333, 71%, 50%); } /* Direct value */


.menu-link { /* Styling for main menu links */
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-style: normal;
    font-family: "poppins";
    cursor: pointer;
    text-transform: capitalize;
    color: #000; /* Slightly transparent white text */
    transition: all 0.3s ease-in-out;
}
.menu-link>i.bx { font-size: 1.35rem; line-height: 1.5; color: inherit; } /* Icon styling within menu link */
.menu-link:hover { color: #000b22; font-weight: 500; } /* Hover state for menu link */
.menu-link2 { color: #000b22; margin-top: 5px; } /* Alternative menu link style */

.mini_menu { height: 100px; margin-bottom: 20px; margin-top:20px; border-bottom: 1px solid #ccc; } /* A smaller menu bar style */
.banner-card { position: relative; top: -50px; min-height: 120px; } /* Card style for banners, positioned partially outside */
.banner-c-card > img { width: 60px; height: 60px; } /* Image styling within banner card */

.about-home { text-align: justify !important; } /* Text alignment for home about section. Important flag used. */
.about-home img { border-radius: 10px; width: 200px; height: 200px; margin: 0 20px 10px 10px; float: left; } /* Image in home about section */
.about-home .span { color: #010713a4; font-size: 16px !important; font-weight: 500; line-height: 20px !important; } /* Span text style. Important flags used. */
.about-home h2 { color: #010713; font-size: 25px !important; font-weight: 700; text-transform: capitalize; } /* H2 style. Important flag used. */

/* --- Custom Scrollbar Styles --- */
* { scrollbar-width: auto; scrollbar-color: #000b22 #ffffff; } /* For Firefox */
*::-webkit-scrollbar { width: 10px; height: 9px; } /* For Webkit browsers (Chrome, Safari) */
*::-webkit-scrollbar-track { background: #ffffff; } /* Scrollbar track color */
*::-webkit-scrollbar-thumb { background-color: #000b22; border-radius: 10px; border: 2px solid #ffffff; } /* Scrollbar thumb color and style */

.mini_menu img { height: 80px; } /* Image height in mini_menu */

@media only screen and (min-width: 993px) { /* Desktop view for dropdown menu */
    .menu-dropdown:hover>.submenu { display: block; opacity: 1; visibility: visible; transform: translateY(0); } /* Show submenu on hover */
}

@media only screen and (max-width: 992px) { /* Mobile view for menu */
    .menu { width: 100%; height: 100%; padding: 1rem 0; } /* Full width/height menu */
    .menu-item { display: block; margin: 0 auto; } /* Stack menu items */
    .menu-link { justify-content: space-between; padding: 0.5rem 0; color: #000b22; } /* Adjust mobile menu links */
}



.submenu {
    position: absolute;
    top: 2rem;
    min-width: 15rem; /* Default fallback */
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
    text-align: left;
}

/* Extra small devices: up to 320px */
@media (max-width: 320px) {
    .submenu {
        min-width: 11rem;
    }
}

/* Small mobile: 321px to 767px */
@media (min-width: 321px) and (max-width: 767px) {
    .submenu {
        min-width: 14rem;
    }
}

/* Tablet: 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .submenu {
        min-width: 36rem;
    }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
    .submenu {
        min-width: 20rem;
    }
}




/*ul.submenu2 { left: 90% !important; top: 30px; max-height: 250px; overflow-y: auto; }*/ /* Styling for a secondary level submenu. Important flag used. */
ul.submenu2 {
    left: 100% !important;
    top: 0px;
    overflow-y: auto;
	position:fixed;
}
.submenu-item { display: block; margin-top: 0.75rem;padding:10px; } /* Individual item in submenu */
.submenu-link { font-size: 0.823rem; font-weight: 500; cursor: pointer; color: #000b22; text-transform: capitalize; transition:0.3s ease-in-out; }
.submenu-link:hover { margin-left: 4px; color: #000b22; font-weight: 600; } /* Hover state for submenu link */

@media only screen and (max-width: 992px) { /* Submenu adjustments for mobile */
    .submenu { position: relative; top: -0.5rem;  width: 100%; max-height: 0; padding: 0px; border: none; outline: none; opacity: 1; overflow: hidden; visibility: visible; transform: translateY(0px); box-shadow: none; background: transparent; } /* Submenu behaves like an accordion on mobile */
}

.burger { /* Hamburger menu icon for mobile */
    position: relative;
    display: none; /* Hidden on desktop */
    cursor: pointer;
    user-select: none;
    width: 1.6rem;
    height: 1.15rem;
    opacity: 0; /* Initially hidden, shown via media query */
    visibility: hidden;
    background: transparent;
}
.burger-line { /* Lines of the hamburger icon */
    position: absolute;
    display: block;
    right: 0;
    width: 100%;
    height: 2.1px;
    opacity: 1;
    border: none;
    outline: none;
    border-radius: 1rem;
    background: #a51c30; /* White lines, assuming dark header background */
}
.burger-line:nth-child(1) { top: 0px; }
.burger-line:nth-child(2) { top: 0.5rem; left:0px; width: 70%; } /* Shorter middle line */
.burger-line:nth-child(3) { top: 1rem; }

@media only screen and (max-width: 992px) { /* Show burger icon on mobile */
    .burger { display: block; opacity: 1; visibility: visible; }
}

.overlay { /* Overlay for mobile menu background */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9; /* Below mobile menu, above page content */
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease-in-out;
    background-color: rgba(0, 0, 0, 0.65); /* Semi-transparent black */
}
@media only screen and (max-width: 992px) { /* Show overlay when mobile menu is active */
    .overlay.active { display: block; opacity: 1; visibility: visible; }
}
/* End of Menu Styles */

.link_card { /* Card-like link style */
    display: flex;
    gap: 10px;
    align-items: center;
    color: #000;
    padding: 10px 10px;
    background-color: #ececec; /* Light gray background */
    text-transform: uppercase;
    font-weight: 500;
    transition-duration: .3s;
    margin-top: 10px;
}
.link_card i { margin-left: auto; } /* Push icon to the right */
.link_card h6 { margin: 0; font-size: 14px; }

.carousel-item img { display: flex; height: 370px; } /* Assuming Bootstrap carousel item image styling */

.profile_card { /* Profile card styling */
    background-color: #fff;
    padding: 10px;
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #ddd; /* Light gray border */
    margin-bottom: 3px;
}
.profile_card img { /* Profile image */
    border-radius: 50%; /* Circular image */
    max-height: 82px;
    margin: 0px auto;
    display: block;
    border: 2px solid #ccc; /* Gray border around image */
}
.profile_card h4 { /* Name/Title in profile card */
    color: #003c72; /* Dark blue color */
    font-size: 1em;
    margin-top: 10px;
    margin-bottom: 3px;
    text-align: center;
    font-weight: bold;
}
.profile_card p { /* Description in profile card */
    color: #000;
    margin-bottom: 5px;
    font-size: 0.8em;
    text-align: center;
}
.profile_card ul { padding: 0; list-style: none; }
.profile_card ul li { background-color: #fff; height: auto; box-sizing: border-box; overflow: hidden; }
.msg-link { margin: 10px -10px -10px -10px !important; height: auto; overflow: hidden; } /* Links at bottom of profile card. Important flag used. */
.msg-link li a { display: block; padding: 5px 3px; text-align: center; background-color: #e0ab1b; text-transform: uppercase; font-size: 0.8em; } /* Yellow background for links */
.msg-link li { padding: 0px !important; float: left; width: 50%; margin-bottom: 0px !important; border: 0px !important; } /* Two links side-by-side. Important flags used. */
.msg-link li:first-child a { border-right: 1px solid #fff; } /* Separator line */
.msg-link li a { color: #000b22; } /* Dark blue text for links */

/* --- Slick Slider Styles --- */
.important { overflow-x: hidden; } /* Container for important content, possibly a slider parent */
.slick-slider .element { /* General element style within a slick slider */
    height: 100px;
    width: 100px;
    color: #fff;
    margin: 0px 10px;
    display: flex;
    border: 1px solid #ddd;
    padding: 3px 5px;
    border-radius: 3px;
}
.slick-slider .slick-disabled { opacity: 0; pointer-events: none; } /* Style for disabled navigation arrows */
.slick-slider2 .element, .slick-slider3 .element, .slick-slider4 .element { /* Variations for different sliders */
    border: none;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    margin: 0 auto;
}
.slick-slider2 .element .strip { /* A strip/overlay on slider2 elements */
    position: absolute;
    bottom: -30px; /* Positioned slightly below the element */
    background-color: #6c1804; /* Dark red background */
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
}
.slick-slider2 .element .strip p { color: #fff; } /* Text color in strip */
.slick-slider2 img { width: 100%; height: 445px; } /* Image size in slider2 */
.slick-slider2 .slick-list { height: 490px; } /* List container height for slider2 */

.vision { /* Vision section background and padding */
    background: url('../images/univercity.png') no-repeat center center / cover; /* Background image. Check path. */
    width: 100%;
    height: 100%;
    padding: 70px 50px;
    position: relative;
    z-index: 1;
}
.card-head{ font-size: 2.125rem; font-weight: 800; color: #000b22; } /* Heading style for cards. Mismatch 00 vs 800 with custom.css, chose 800 (bold) */
.vision::before { /* Overlay for vision section background image */
    content: "";
    background-color: #052d49c2; /* Dark blue semi-transparent overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind content */
}
.slick-slider3 .element { height: auto; } /* Auto height for slider3 elements */
.slick-slider3 .slick-list { height: auto; } /* Auto height for slider3 list */
.slick-slider3 .card { padding: 20px; } /* Padding for cards in slider3 */
.slick-slider3 h2 { color: #A51C30; margin-bottom: 20px; } /* MMTTC Red for H2 in slider3 */
.slick-slider4 { padding-left: 60px; } /* Padding for slider4 (From homepage inline, was 15px in style.css) */
.slick-slider4 .card { text-align: center; border: none; background-color: #fff; border-radius: 10px; }
.slick-slider4 .card img { height: 200px; margin-bottom: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.slick-slider4 .card p { color: blue; text-align: center; } /* 'blue' is generic, consider MMTTC theme color or a specific variable */

.faculty { background-color: rgb(243 244 246); padding: 70px 0; } /* Faculty section background and padding */
.faculty .title_content { background-color: rgb(243 244 246); padding-left: 20px; } /* Title content background matches section */
.important .title_content { padding-left: 40px; } /* Specific padding for title_content in .important section */

@media (max-width: 767px) { /* Responsive adjustments for sliders and titles on smaller screens */
    .slick-slider2 img { width: 100%; height: 200px; } /* Smaller image height */
    .slick-slider2 .element .strip { display: none; } /* Hide strip on small screens */
    .slick-slider2 .slick-list { height: 200px; } /* Adjust list height */
    .slick-slider .element { height: auto; } /* Auto height for general slider elements */
    .title_content { padding: 10px; top: -27px; } /* Adjust title content padding and position */
    .slick-slider3 { padding: 20px; }
    .slick-slider4 { padding: 20px; } /* custom.css padding for slider4 on small screens */
    /* .slick-slider4 { padding-left: 15px !important; } */ /* style.css alternative, custom.css one is simpler */
    marquee { height: 200px; } /* Marquee height */
    .btn_head { font-size: 12px; } /* Smaller header button font */
    .top_menu .h4 { font-size: 20px; line-height: 25px; } /* Smaller top menu heading */
    .top_menu p { font-size: 12px; } /* Smaller top menu paragraph */
    .top_menu .logo { height: 100px; width: 100px; } /* Smaller logo */
}

/* --- News and Event Section Styles --- */
.news-event { background-color: #ffffff; margin-top: 5px; border-radius: 2px !important; overflow: hidden; } /* Important flag used. */
.color{ color: #A51C30 !important; font-weight: 600; } /* MMTTC Red text, bold. Important flag used. */
div.arrnotice{ /* Arrow/notice indicator style */
    width: 1.3rem;
    height: 1.3rem !important; /* Important flag used. */
    display: grid;
    place-content: center;
    background-color: #A51C30; /* MMTTC Red background */
    border-radius: 50%; /* Circular */
    margin-left: 3px;
    color: #fff !important; /* White icon/text. Important flag used. */
}
div.arrnotice i{ font-size: 12px !important; } /* Icon size. Important flag used. */
.news-event p.card-p { color: #000b22; margin-top: 0px; text-align: left; } /* Paragraphs in news-event */
.news-event h5 { /* Heading/Title bar for news-event */
    background-color: #A51C30; /* MMTTC Red background */
    margin: 0;
    color: #fff; /* White text */
    padding: 16px 12px !important; /* Important flag used. */
    font-weight: 700;
    font-style: normal;
    font-size: 0.875rem;
    letter-spacing: 0;
    line-height: 1.1875rem;
    font-family: "Open Sans",sans-serif;
}
marquee .mr_first_div { border-bottom: 0.0625rem solid #D8D8D8; padding: 10px 0; margin: 0; } /* Item separator in marquee */

/* --- Team/Member Section Styles --- */
.member-div { position: relative; margin: 30px 0 15px; }
.section-adc-team { position: relative; padding: 90px 0; background-color: #fff; } /* Main team section container */
.member-div-img { position: relative; margin: 15px 0; z-index: 1; }
.member-div-img img{ width:268px; height:268px; } /* Specific image size from homepage inline */
.adc-team .member-div-img::before { /* Gradient overlay for team member image */
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(37, 37, 37, 1) 0%, rgba(12, 12, 12, 0) 45%, rgba(0, 0, 0, 0) 100%); /* Dark to transparent gradient */
}
.adc-team .img-overlay { /* Text overlay on team member image */
    position: absolute;
    bottom: 20px;
    z-index: 10; /* Above gradient */
    padding-left: 20px;
    color: #fff;
    border-radius: 10px;
}
.adc-team .h55 { /* Custom heading style for team member name */
    font-size: 18px;
    font-weight: 600;
    color: #222;
    text-align: center;
    margin-top: 15px;
}
.adc-team h6 { /* Team member designation/role */
    color: #A51C30; /* MMTTC Red */
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 5px;
}
/* .member-div-img img from custom.css was 100% width, 310px height. Homepage has specific sizes. Let's keep the general one but be aware of homepage overrides */
/* .member-div-img img { display: block; width: 100%; height: 310px; border-radius: 10px; } */ /* General rule, overridden by more specific one above */
img { max-width: 100%; height: auto; } /* Responsive images by default */
.ptop{ color: #A51C30 !important; margin-bottom: 4px; font-size: 14px; font-weight: 400; } /* MMTTC Red text. Important flag used. */
.pbot { font-size: 16px; color: #010713; margin-bottom: 4px; font-weight: 500; } /* Dark blue text */
.cardimlink{ position: relative; transition: .5s ease; } /* Card with image link */
.imlink{ color: #000b22; font-weight: 900; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; font-size: 14px; }
.cardimlink::before{ /* Hover overlay for image link card */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Initially no width */
    height: 100%;
    background-color: #003a63c1; /* Dark blue semi-transparent */
    z-index: 1;
    transition: .5s ease;
}
.heading-section{ color: #002A47; font-size: 2.0625rem; line-height: 2.8125rem; font-weight: 800; font-style: normal; font-family: "Open Sans", sans-serif; } /* Section heading style */
.cardimlink:hover::before{ width: 100%; transition: .5s ease; } /* Expand overlay on hover */
.cardimlink i.fas { display: none; } /* Hide icon initially */
.cardimlink:hover i.fas { /* Show icon on hover */
    z-index: 100; /* Above overlay */
    display: grid;
    place-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    background-color: #000b22; /* Dark background for icon */
    border-radius: 50%;
    color: #fff; /* White icon */
}
.imimg{ /* Image container, possibly for an icon or small image */
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    margin-right: 10px;
    display: grid;
    place-content: center;
}

/* --- Faculty Section Specific Styles --- */
.faculty-div{ margin: 10px; } /* Container for faculty member */
.faculty-div .faculty-div-img{ padding: 10px; }
.faculty-div .faculty-div-img img{ border-radius: 10px; }
.faculty-div-img { position: relative; margin: 15px 0; z-index: 1; } /* Similar to member-div-img */
.faculty-div-img::before { /* Gradient overlay for faculty image */
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(37, 37, 37, 0.6) 0%, rgba(12, 12, 12, 0) 45%, rgba(0, 0, 0, 0) 100%);
}
.faculty-div-img .img-overlay { /* Text overlay on faculty image */
    position: absolute;
    bottom: 20px;
    z-index: 10;
    padding-left: 20px;
    color: #fff;
    border-radius: 10px;
}
.faculty-div-img .h55 { /* Name style for faculty */
    font-size: 18px;
    font-weight: 600;
    color: #222;
    text-align: center;
}
.faculty-div .faculty-div-img h6 { /* Designation for faculty */
    color: #A51C30; /* MMTTC Red */
    font-weight: 500;
}

/* --- Gallery / Portfolio Styles --- */
.portfolio-menu { text-align: center; } /* Menu for filtering portfolio items */
.portfolio-menu ul li { /* Filter buttons/links */
    display: inline-block;
    margin: 0;
    list-style: none;
    padding: 10px 15px;
    cursor: pointer;
    transition: all .5s ease;
}
.portfolio-item { width: 100%; } /* Container for portfolio items */
.portfolio-item .item { /* Individual portfolio item */
    width: 303px; /* Fixed width, consider responsive alternatives like flexbox or grid for better layout */
    float: left; /* Using float for layout, modern CSS offers better alternatives */
    margin-bottom: 10px;
}
.portfolio-item img { height: 200px; } /* Fixed height for portfolio images */

/* --- Swiper Styles (from homepage inline & custom.css) --- */
.swiper { width: 100%; /* height: 80%; */ /* Homepage inline, potentially for a specific instance */ height: 100%; /* custom.css, more general */ }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Ensure image covers slide */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: #a51c30 !important; /* MMTTC Red for Swiper pagination bullets. Important flag used. */
}

/* --- Social Media Section Styles --- */
.section7 h4 { font-size: 19px; transition: .3s linear; } /* Heading in social media section */
.twitterBox h4 i, .facebookBox h4 i, .youtubeBox h4 i { /* Icon styling for social media boxes */
    color: #fff;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 50px; /* Adjust to vertically center icon if it's font-based */
    border-radius: 100px; /* Circular icon background */
    margin-bottom: -62px; /* Pull icon up to overlap box top */
    font-size: 26px;
    position: relative;
    z-index: 0; /* z-index was '0000', corrected to '0' or other valid value if needed higher */
}
.twitterBox h4 i { background: rgb(29, 161, 242); } /* Twitter blue */
.facebookBox h4 i { background: #4267b2; } /* Facebook blue */
.youtubeBox h4 i { background: #A51C30; } /* YouTube red (MMTTC Red used here) */
.twitterBox>div, .facebookBox>div, .youtubeBox>div { /* Container for social media feed/content */
    height: 450px;
    box-shadow: 0 10px 15px -2px rgb(82 0 57 / 8%); /* Subtle shadow */
    background: #fff;
    position: relative;
    width: 100%;
}
.twitterBox>div, .facebookBox>div { overflow-y: scroll; } /* Allow scrolling for feeds */
.box_shadow { box-shadow: 0 10px 15px -2px rgb(82 0 57 / 8%);} /* Reusable shadow class */

/* --- Responsive Adjustments (custom.css) --- */
@media(max-width: 768px) { /* Tablet and smaller screens */
    .menu-item2 .menu-link2 { width: 86%; } /* Adjust width of secondary menu link */
    ul.submenu2 { top: 0; left: 40px !important; } /* Reposition secondary submenu. Important flag used. */
    /* .nav-tab .link-mrb { flex-direction: row !important; } */ /* This class .nav-tab needs definition if used broadly, commented out if unused */
}

.ow { display: flex !important; } /* Utility class to force display flex. Use with caution due to !important. */
ul.slick-dots { /* Slick slider dots styling */
    display: flex !important; /* Important flag used. */
    align-items: center;
    justify-content: space-between; /* Distribute dots, or center if preferred */
    margin: 10px;
    font-size: 20px; /* Affects dot size if they are character-based */
    list-style: none;
}

@media only screen and (min-width: 1000px){
    /* .container_fluid_2{ width: 80% !important; } */ /* .container_fluid_2 needs definition, commented out if unused. Important flag. */
}

@media only screen and (min-width: 520px) {
    /* .nav-tab .link-mrb { display: flex !important; align-items: center !important; width: 170px !important; flex-direction: row !important; } */
    /* This rule seems very specific and uses many !important flags. Ensure .nav-tab and .link-mrb are well-defined components. Commented if unused broadly. */
}

@media only screen and (max-width: 500px) { /* Small mobile screens */
    .mb-flex, .tab-bg { display: flex; flex-direction: column; } /* Stack elements vertically */
    .top_menu .logo, .top_menu .logo-2 { height: 106px; width: 106px; } /* Adjust logo size */
    .nav-pills { display: flex; width: 100%; justify-content: space-evenly; } /* Assuming Bootstrap nav-pills, distribute items */
    /* .nav-tab .link-mrb { margin-bottom: 20px; margin-right: 0px; display: flex; align-items: center; width: 90px; justify-content: center; flex-direction: column !important; } */ /* Further adjustments for .nav-tab .link-mrb. Important flag. */
    /* .nav-pills .link-mrb.active, .nav-pills .show>.link-mrb { background-color: #4852d3 !important; /* This is --text-theme, MMTTC theme is #A51C30. Important flag. */ /* margin-bottom: 0px; border-radius: 0px; } */
    .tab-img { margin-right: 5px; } /* Reduce margin for tab image */
    .top_menu .logo, .top_menu .logo-2 { height: 86px; width: 84px; } /* Further logo size reduction */
}

.adc-banner{ width: 100%; height: 470px; } /* Banner for ADC page/section */
@media screen and (min-width: 0px) and (max-width: 469px) { /* Very small screens */
    .adc-banner { height: 300px; } /* Reduce banner height */
    .top_menu .h4 { font-size: 16px !important; line-height: 16px !important; } /* Drastically reduce top menu heading. Important flags. */
    .top_menu p { margin-top: 4px; font-size: 12px !important; } /* Reduce top menu paragraph. Important flag. */
    .top_menu .logo-2, .top_menu .logo { height: 80px !important; } /* Reduce logo size. Important flag. */
}

/* .f-card from custom.css - style.css has a more detailed one. Merging/choosing */
.f-card { /* This redefines .f-card from earlier. Ensure this is intended or consolidate. */
    /* box-shadow: none !important; */ /* custom.css part - removes shadow, conflicts with earlier .f-card */
    display: flex;
    align-items: center;
    /* width: 80%; */ /* custom.css part - style.css has 90%. The earlier definition is likely more specific. */
}
/* .f-card-img from custom.css has a nested .f-card-img rule, simplifying */
.f-card-img { /* This redefines .f-card-img height. Earlier was 200px, now 250px. */
    width: 100% !important; /* Important flag used. */
    height: 250px; /* Increased height compared to style.css definition */
}

.img_card_L{ position: absolute !important; bottom: 0 !important; background: #fff !important; right: -14.5px !important; width: 90% !important; } /* Highly specific positioning and styling for an image card label/overlay. Many !important flags. */
.u-l-icon { margin-left: -12px; } /* from custom.css, specific adjustment for quick link icon. Potentially conflicts with earlier margin-right. */

/* --- Theme Color Overrides (custom.css specific) --- */
/* These .text-theme and .bg-theme overrides use #119ee6, which is different from MMTTC's #A51C30 and the original generic #4852d3. */
/* This creates a third theme color variant if these classes are used. */
/* It's important to note that your main .text-theme and .bg-theme are set to #A51C30 (MMTTC) at the top. */
/* If you want THESE specific classes to use #119ee6, they must be named differently or this override is intentional. */
/* For clarity, I'll assume these are intentional for specific elements using these classes from custom.css */
/* .text-theme { color: #119ee6 !important; } */ /* custom.css overrides :root and MMTTC theme for this specific class application. Important flag. */
/* .bg-theme { background: #119ee6 !important; } */ /* custom.css overrides :root and MMTTC theme for this specific class application. Important flag. */
/* To avoid confusion, if #119ee6 is a distinct theme, better to use new class names like .text-custom-blue-theme and .bg-custom-blue-theme */
/* For now, I'll leave them as they are, assuming it's a deliberate override in specific contexts. */




















/* --- Styles from Homepage Inline CSS (Integrated) --- */
/* These styles were originally inline on the homepage and have been moved here. */
/* They are highly specific. */

.patrons-card { display: flex; flex-direction: column; justify-content: center; }
.patrons-card h4 { font-size: 11px !important; font-weight: 500 !important; margin-bottom: 0 !important; text-align:center !important; } /* Extremely specific. Many !important flags. */
.patrons-card-cont{ width: 180px; margin: 0 auto; background-color:#a51c30 !important; } /* MMTTC Red background. Important flag. */
.patrons-card p { font-size: 12px !important; margin: 0 auto; } /* Important flag. */
.patrons-card img { width: 150px !important; margin: 0 auto; } /* Important flag. */
@media (min-width:992px) and (max-width:1214px) { /* Responsive adjustments for patrons card */
   .patrons-card p { font-size: 11px !important; }
   .patrons-card-cont{ width: 120px !important; }
}
@media (min-width:768px) and (max-width:992px) {
   .patrons-card p { font-size: 11px !important; }
   .patrons-card-cont{ width: 100px !important; }
}
.about-center-img img { height: 270px !important; } /* Important flag. */
.justify { text-align: justify !important; } /* Utility class for justified text. Important flag. */
.regis-swiper-wrapper { padding-bottom: 50px; } /* Swiper wrapper specific padding */
.patron-s-slide{ height:80% !important; margin-top:50px !important; } /* Patron swiper slide style. Important flags. */
.nep-card{ border-radius:15px; width:100%; min-height: 240px; transition: 0.5s; } /* Card style for NEP section */
.nep-card h6{ font-weight:600 !important; } /* Important flag. */
@media (min-width:767px) and (max-width:992px){ /* Responsive NEP card */
   .nep-card h6{ font-size:14px !important; }
   .nep-card{ width:150px; }
   .nep-card .read-more-btn{ font-size:13px !important; }
}
.nep-card:hover{ transition: all .5s; transform: translateY(-10px); } /* Hover effect for NEP card */
.read-more-btn:hover{ transition: all .5s; transform: translateX(10px); } /* Hover effect for read more button */
.nep-card1{ background-color:#ffdecf; } /* Specific background color for NEP card variant */
.nep-card .read-more-btn{ font-size:15px !important; font-weight:500 !important; color:#f3601c !important; margin-top:20px; transition:0.5s; } /* "Read more" button style. Important flags. */
.nep-card .read-more-btn:focus{ box-shadow:none !important; outline:none !important; border:none !important; } /* Focus state. Important flags. */
.nep-card .read-more-btn:hover{ color:#535353 !important; } /* Hover color. Important flag. */
.nep-icon img{ width:40px; height:40px; } /* Icon image in NEP section */
.nep-icon:hover{ transition: all .5s; transform: translateY(-7px); } /* Hover effect for icon */
.nep-icon1:hover{ background:#e9ad91; } /* Specific hover backgrounds for NEP icons */
.nep-icon2:hover{ background:#fbe6c0; }
.nep-icon3:hover{ background:#add745; }
.nep-icon4:hover{ background:#5bd5ac; }
.nep-icon5:hover{ background:#b06ce7; }
.nep-icon6:hover{ background:#dd956c; }
.nep-icon7:hover{ background:#3feba9; }
.nep-icon8:hover{ background:#e97d7d; }
.nep-icon{ width:75px; height:75px; display:flex; align-items:center; justify-content: center; margin-bottom:15px; background:#fff; border-radius:50%; } /* NEP icon container */
.nep-card2{ background-color:#e9bf75 !important; } /* More NEP card background variants. Important flags. */
.nep-card3{ background-color:#c8e975 !important; }
.nep-card4{ background-color:#75e9c2 !important; }
.nep-card5{ background-color:#cc92fb !important; }
.nep-card6{ background-color:#fbb892 !important; }
.nep-card7{ background-color:#92fbd3 !important; }
.nep-card8{ background-color:#ffa0a0 !important; }
.profile-card h6{ font-size:14px !important; } /* from homepage, specific profile card heading. Important flag. */
.profile-card h5{ font-size:18px !important; font-weight:600 !important; } /* from homepage, specific profile card heading. Important flag. */
.logos { overflow: hidden; background-color: white; padding:30px 0px; white-space: nowrap; } /* Container for scrolling logos */
.logos-slide img { width: 140px; height: 80px; border: 1px solid #e7e7e7; box-shadow: -1px 3px 10px 1px rgba(232, 232, 232, 0.75); margin-right: 30px; border-radius:7px; }
.logos-slide img:hover{ transition:0.5s; transform: scale(1.7); padding:10px; border: none !important; box-shadow:none !important; } /* Logo hover effect. Scale was 'scale', corrected to transform: scale(). Important flags. */
.logos-slide{ animation:13s about-slide linear infinite; } /* Scrolling animation for logos */
.logos-slide:hover{ animation-play-state:paused; } /* Pause on hover */
@keyframes about-slide{ 0%{ transform:translateX(0%); } 100%{ transform:translateX(-100%); } } /* Logo scrolling keyframes */
h2.title { font-size: 28px; margin-bottom: 30px; color: #A51C30; } /* from homepage, slightly different selector than .titles, MMTTC Red */
.nav-tab-item { padding: 0 !important; } /* Nav tab item padding. Important flag. */
.tab-content { background: #f5eced !important; border-radius: 10px; padding: 20px 30px !important; position: relative; } /* Tab content area. Important flags. */
.tab-content h4 { margin-bottom: 13px; }
.nav-tab-btn { background: #f6dade !important; color: #a51c30 !important; width: 98%; padding: 14px !important; font-weight:600; } /* Nav tab button. Many important flags. */
@media (max-width:767px) { /* Responsive nav tab button */
   .nav-tab-btn { padding: 10px 0px !important; font-size: 13px !important; } /* Corrected 10x to 10px. Important flags. */
   .madan-mohan-img { width: 270px !important; height: 320px !important; } /* Specific image size. Important flags. */
}
.nav-tab-btn:hover { transition: 0.5s; background: linear-gradient(to left, #f6dade, #a51c30) !important; color: #fff !important; transform: translateY(-5px); } /* Hover effect. Important flags. */
.nav-tab-btn:focus { background: #a51c30 !important; color: #fff !important; } /* Focus state. Important flags. */
.tab-content::after { /* Decorative element for tab content */
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    bottom: -77px; /* Position partially outside */
    right:0px;
    transform:rotate(270deg);
    background: url("./assets/img/navtab-right-img.png") no-repeat center center / cover; /* Background image. Check path. */
    z-index: -5; /* Behind content */
}
.madan-mohan-img { width: 350px; height: 350px; } /* Image style */
.object-ul { list-style: none !important; } /* Unordered list with custom styling. Important flag. */
.object-ul li { margin-bottom: 10px; display: flex; justify-content: start; align-items: center; }
.object-ul li .ol-decor { /* Decorative element for list items */
    color: #ffffff !important; /* Important flag. */
    background: #a51c30 !important; /* MMTTC Red. Important flag. */
    padding: 7px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px !important; /* Important flag. */
    height: 30px !important; /* Important flag. */
    border-radius: 5px;
    margin-right: 15px;
}
.li-color { background: #f6dade; padding: 3px 7px; border-radius: 3px; } /* List item highlight color */
.bread-c-i{ margin-top:4.8px; font-size:13px; color:#ededed !important } /* Breadcrumb item icon style. Important flag. */
.bread-c-cont{ display:flex; flex-direction:row; justify-content:center !important; } /* Breadcrumb container. Important flag. */
.bread-c-cont a{ color:#ededed !important; text-decoration:none !important; } /* Breadcrumb link. Important flags. */
.bread-c-cont a:hover{ color:#a51c30 !important;; } /* Breadcrumb link hover, MMTTC Red. Important flag. */
a.disabled { pointer-events: none !important; cursor: default !important; } /* Style for disabled links. Important flags. */





/*********************************************************************
 * ===================================================================
 *                      MENU PAGE
 * ===================================================================
 *********************************************************************/

  /* Styles for your existing menu - YOUR LARGE STYLE BLOCK STARTS HERE */
  .top_menu .logo {
    height: 100!important;
  }

  #sticky-header-wrapper {
    position: sticky;
    left:0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: top 0.3s ease-in-out; 
}

  .regis-btn{
    background:#ffc107 !important;
  }
  .regis-btn:hover{
    background:#ffc415 !important;
  }
  .regis-btn:focus{
    box-shadow:none !important;
    outline:none !important;
    border:none !important;
  }
  .custo-menu{
    width:100%;
  }
  @media screen and (max-width: 992px){
    .custo-menu{
      width:70% !important;
      height:92vh !important;
      margin-left: 0px !important;
      padding-bottom: 50px;
    }
    .regis-btn{
      margin-top:-50px !important;
    }
  }

  /* Top Announcement Bar */
  .printstop-top-announcement-bar {
      background-color: #a51c30;
      color: #ffffff;
      padding: 10px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-family: var(--font-p);
      text-align: center;
      line-height: 1.5;
      z-index: 1002;
      transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }
   .printstop-top-announcement-bar.hidden-by-js {
      display: none !important;
  }
  .printstop-top-announcement-bar .announcement-content {
      flex-grow: 1;
  }
  .printstop-top-announcement-bar a {
      color: #ffffff; text-decoration: underline; font-weight: 500;
  }
  .printstop-top-announcement-bar a:hover { text-decoration: none; }
  .printstop-close-announcement {
      background: none; border: none; color: #ffffff; font-size: 24px;
      font-weight: bold; line-height: 1; cursor: pointer; padding: 0 5px;
  }
  .printstop-close-announcement:hover { opacity: 0.8; }

  /* --- Sticky Header Wrapper --- */
  #sticky-header-wrapper {
      position: sticky;
      top: 0; 
      left:0;
      width: 100%;
      z-index: 1000;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  /* Pre-Header Section */
  .printstop-pre-header-section {
      background-color: #ffffff; padding: 10px 20px;
      border-bottom: 1px solid #e9e9e9; font-family: var(--font-p);
  }
  .printstop-pre-header-container {
       /* max-width: 1600px;*/ margin: 0 auto; padding: 0px;
      display: flex; justify-content: space-between; align-items: center;
  }
  .printstop-logo-area a {
      text-decoration: none; display: flex; align-items: center;
  }
  .printstop-logo-area .printstop-logo-img {
      width: auto; object-fit: contain;
  }

  /* Desktop Search Area (in pre-header) */
  .printstop-pre-header-section .printstop-search-area {
      flex-grow: 1; margin: 0 35px; max-width: 1000px; display: block;
  }
  .printstop-search-form {
      display: flex; align-items: center; border: 1.5px solid #d1d1d1;
      border-radius: 24px; background-color: #f9f9f9; height: 46px;
      padding-left: 20px; overflow: hidden;
      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  .printstop-search-form:focus-within {
      border-color: #0056b3; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
  }
  .printstop-search-input {
      flex-grow: 1; border: none; outline: none; padding: 10px 15px 10px 10px;
      font-size: 15px; font-family: var(--font-p); background-color: transparent;
      width: 100%; color: #333;
  }
  .printstop-search-input::placeholder { color: #777; font-weight: 400; }
  .printstop-search-form .printstop-search-button {
      background: none; border: none; padding: 0; margin-right: 15px;
      display: flex; align-items: center; color: #555; cursor: default;
  }
  .printstop-search-form .printstop-search-button svg {
      width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2;
  }

  /* Desktop Actions Area (in pre-header) */
  .printstop-pre-header-section .printstop-actions-area {
      display: flex; align-items: center;
  }
  .printstop-action-item {
      display: flex; flex-direction: column; align-items: center;
      font-family: var(--font-p); font-weight: 500; color: #333333;
      cursor: pointer; text-align: center; position: relative;
      text-decoration: none; transition: color 0.2s ease-in-out;
  }
  .printstop-action-item:hover { color: #A51C30; }
  .printstop-action-item svg {
      stroke: #444; stroke-width: 1.8; fill: none;
      transition: stroke 0.2s ease-in-out;
  }
  .printstop-action-item:hover svg { stroke: #A51C30; }

  .printstop-pre-header-section .printstop-action-item {
      margin-left: 25px; font-size: 13px;
  }
  .printstop-pre-header-section .printstop-action-item svg {
      width: 22px; height: 22px; margin-bottom: 4px;
  }
  .printstop-pre-header-section .printstop-action-item:first-child { margin-left: 0; }

  .printstop-cart-badge {
      position: absolute; top: -7px; right: -5px; background-color: #D90429;
      color: #ffffff; border-radius: 50%; padding: 1px 5px;
      font-size: 10px; font-weight: 600; line-height: 1.2; border: 1.5px solid #fff;
  }

  #printstop-preheader-mobile-search-icon-trigger {
      display: none; padding: 5px; margin-left: auto;
  }
  #printstop-preheader-mobile-search-icon-trigger svg {
      width: 24px; height: 24px;
  }

  .navbar{ padding: .6rem 1rem; }

  .printstop-mobile-top-icons { display: none; }
  .printstop-mobile-top-icons .printstop-action-item {
      margin-left: 15px; padding: 5px;
  }
  .printstop-mobile-top-icons .printstop-action-item svg {
      width: 24px; height: 24px; margin-bottom: 0;
  }
  .printstop-mobile-top-icons .printstop-action-item span { display: none; } 
  .printstop-mobile-top-icons .printstop-cart-badge { top: -3px; right: -5px; }

  .printstop-search-modal {
      display: none; position: fixed; top: 0; left: 0; width: 100%;
      height: auto; background-color: #ffffff; z-index: 1050;
      padding: 15px 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      transform: translateY(-100%); transition: transform 0.3s ease-out;
  }
  .printstop-search-modal.active { display: block; transform: translateY(0); }
  .printstop-search-modal-content {
      max-width: 700px; margin: 0 auto; display: flex; align-items: center;
  }
  .printstop-search-modal .printstop-search-form {
      flex-grow: 1; margin-right: 10px; background-color: #f0f0f0;
  }
  .printstop-search-modal .printstop-search-form:focus-within {
      border-color: #A51C30; box-shadow: 0 0 0 3px rgba(165, 28, 48, 0.15);
  }
  .printstop-search-modal-close {
      background: none; border: none; font-size: 28px; font-weight: bold;
      color: #555; cursor: pointer; padding: 0 5px; line-height: 1;
  }
  .printstop-search-modal-close:hover { color: #000; }

  .login-signup-dropdown-container {
    padding-bottom: 8px; 
    margin-bottom: -8px; 
  }

  .login-signup-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; 
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    list-style: none;
    padding: 8px 0; 
    margin: 0; 
    min-width: 160px;
    z-index: 1010;
    border-radius: 4px;
    text-align: left; 
  }

  .login-signup-dropdown-container:hover .login-signup-dropdown-menu {
    display: block;
  }

  .login-signup-dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .login-signup-dropdown-menu li a:hover {
    background-color: #f5f5f5;
    color: #A51C30;
  }

  .login-signup-dropdown-container .login-main-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit; 
  }


  @media (max-width: 992px) {
      .printstop-pre-header-section .printstop-search-area { display: none; }
      .printstop-pre-header-section .printstop-actions-area { display: none; }
      .printstop-logo-area { flex-grow: 0; }
      #printstop-preheader-mobile-search-icon-trigger { display: flex; }
      #sticky-header-wrapper .header .wrapper {
          display: flex; justify-content: space-between; align-items: center; position: relative;
      }
      .printstop-mobile-top-icons { display: flex; }
  }

  @media (max-width: 767px) {
      #printstop-preheader-mobile-search-icon-trigger svg { width: 22px; height: 22px; }
      .printstop-mobile-top-icons .printstop-action-item { margin-left: 10px; }
      .printstop-mobile-top-icons .printstop-action-item svg { width: 22px; height: 22px; }
  }

  @media (max-width: 480px) {
      #printstop-preheader-mobile-search-icon-trigger svg { width: 20px; height: 20px; }
      .printstop-mobile-top-icons .printstop-action-item { margin-left: 8px; }
      .printstop-mobile-top-icons .printstop-action-item svg { width: 20px; height: 20px; }
  }


/*********************************************************************
 * ===================================================================
 *                      MENU.PHP
 * ===================================================================
 *********************************************************************/

   body.js-loading {
   opacity: 0;
   visibility: hidden;
   padding-top: 0px !important;
   }
   .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   z-index: 1000;
   display: none;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease-out;
   }
   .modal-overlay.active {
   display: flex;
   opacity: 1;
   }
   .modal-content {
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   width: 100%;
   max-width: 700px;
   position: relative;
   padding: 10px;
   transform: scale(0.95);
   opacity: 0;
   transition: transform 0.3s ease-out, opacity 0.3s ease-out;
   }
   .modal-overlay.active .modal-content {
   transform: scale(1);
   opacity: 1;
   }
   .modal-header {
   display: flex;
   justify-content: flex-end; /* Use flex-end for better browser support */
   align-items: center;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
   }
   .close-modal-btn {
   background: none;
   border: none;
   font-size: 2rem;
   line-height: 1;
   cursor: pointer;
   color: #888;
   padding: 0 5px;
   }
   .close-modal-btn:hover { color: #333; }
   .printstop-search-area .printstop-search-form {
   display: flex;
   gap: 10px;
   }
   button:focus {
   outline: 1px dotted !important;
   }
   .topheader-bar {
   background-color: #ffffff; /* Light lavender-gray from image */
   border-bottom: 1px solid #e9e9f2;
   padding: 6px 0;
   font-size: 13px;
   font-weight:500;
   font-family: "poppins";
   }
   .topheader-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin: 0 auto;
   padding: 0 20px;
   }
   .topheader-left, .topheader-right {
   display: flex;
   align-items: center;
   gap: 12px;
   }
   .topheader-link {
   text-decoration: none;
   color: #000000; /* Darker blue from image */
   font-weight: 600;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: color 0.2s ease;
   }
   .topheader-link:hover {
   color: #d32f2f; /* Red hover color */
   }
   .topheader-email {
   color: #d32f2f; /* Red color from image */
   }
   .topheader-email:hover {
   color: #000000; /* Blue hover for email link */
   }
   .topheader-divider {
   width: 1px;
   height: 15px;
   background-color: #dcdcf0;
   }
   .topheader-link svg {
   width: 16px;
   height: 16px;
   fill: currentColor;
   }
   /* Responsive: Hide the entire top bar on smaller screens */
   @media (max-width: 1100px) { /* Adjusted breakpoint for better fit */
   .topheader-bar {
   display: none;
   }
   }

/* ========================================================== */
/* == STYLES  SCRIPT FOR THE "ALL PRODUCTS" HYBRID MENU (FIXED) */
/* ==========================================================  */

                  /* --- DESKTOP STYLES (Screen > 991px) --- */
                  .mobile-accordion-menu {
                  display: none !important;
                  }
                  .custom-mega-menu {
                  display: none; position: absolute; top: 100%; left: 0; width: 700px;
                  background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                  border: 1px solid #e9e9e9; z-index: 1050;
                  }
                  #all-products-menu-container:hover > .custom-mega-menu { display: block; }
                  .custom-mega-menu-content { display: flex; width: 100%; }
                  .custom-mega-menu-categories {
                  flex: 0 0 40%; list-style: none; padding: 10px 0; margin: 0;
                  background-color: #f7f7f7; border-right: 1px solid #eee;
                  }
                  .custom-mega-menu-categories .custom-mega-menu-category-item a {
                  display: block; padding: 10px 20px; color: #333; text-decoration: none;
                  font-size: 14px; font-weight: 500; transition: background-color 0.2s;
                  }
                  .custom-mega-menu-categories .custom-mega-menu-category-item.active a {
                  background-color: #fff; font-weight: 700; color: #000;
                  }
                  .custom-mega-menu-subcategories { flex: 1; padding: 20px; }
                  .custom-mega-menu-subcategories .custom-mega-menu-subcategory-list { display: none; }
                  .custom-mega-menu-subcategories .custom-mega-menu-subcategory-list.active { display: block; }
                  .custom-mega-menu-subcategories strong { display: block; font-size: 16px; margin-bottom: 15px; color: #000; }
                  .custom-mega-menu-subcategories ul { list-style: none; padding: 0; margin: 0; }
                  .custom-mega-menu-subcategories ul a { display: block; padding: 8px 0; color: #555; text-decoration: none; }
                  /* --- MOBILE & TABLET STYLES (Screen <= 991px) --- */
                  @media (max-width: 991px) {
                  #all-products-menu-container > .custom-mega-menu {
                  display: none !important;
                  }
                  /* ▼▼▼ FIX 1: USE MAX-HEIGHT FOR THE MAIN ACCORDION ▼▼▼ */
                  .mobile-accordion-menu {
                  display: block !important; /* Force it to be a block element so max-height works */
                  position: static;
                  border-top: 1px solid #eee;
                  max-height: 0; /* Initially collapsed */
                  overflow: hidden;
                  transition: max-height 0.4s ease-out;
                  }
                  /* When the parent has .is-open, expand the accordion */
                  #all-products-menu-container.is-open > .mobile-accordion-menu {
                  max-height: 3000px !important;
                  }
                  #all-products-menu-container .menu-link .bx-chevron-down {
                  transition: transform 0.3s ease;
                  }
                  #all-products-menu-container.is-open > .menu-link .bx-chevron-down {
                  transform: rotate(180deg);
                  }
                  /* Style the category list item */
                  .mobile-accordion-menu .submenu-item {
                  position: relative;
                  border-bottom: 1px solid #eee;
                  }
                  .mobile-accordion-menu .submenu-link {
                  display: block; padding: 14px 50px 14px 15px; text-decoration: none;
                  color: #212529; font-weight: 500;
                  }
                  /* Style the clickable icon */
                  .submenu-toggle-icon {
                  position: absolute; width: 50px;
                  display: flex; align-items: center; justify-content: center;
                  cursor: pointer; font-size: 22px; z-index: 5; top: 22px !important; right: 5px !important;
                  }
                  .submenu-toggle-icon i { transition: transform 0.3s ease; }
                  /* Style the nested sub-menu */
                  .submenu-level-2 {
                  list-style: none; padding: 0; margin: 0; background-color: #f8f9fa;
                  max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out;
                  }
                  .submenu-level-2 .submenu-link { padding-left: 30px; font-size: 14px; font-weight: 400; }
                  /* --- OPEN STATES for Mobile Accordion --- */
                  .mobile-accordion-menu .submenu-item.is-open > .submenu-level-2 {
                  max-height: 1500px; /* A large value */
                  }
                  .mobile-accordion-menu .submenu-item.is-open .submenu-toggle-icon i {
                  transform: rotate(90deg);
                  }
                  }

/* ========================================================== */
/*  					ADD TO CART							  */
/* ========================================================== */

                  .cart-dropdown-container {
                  position: relative;
                  display: inline-block;
                  font-family: 'Segoe UI', sans-serif;
                  margin-left: 25px;
                  }
                  .cart-dropdown-menu {
                  display: none;
                  position: absolute;
                  right: 0;
                  top: 100%;
                  background: #fff;
                  border: 1px solid #ddd;
                  padding: 12px;
                  width: 300px;
                  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
                  border-radius: 8px;
                  z-index: 1000;
                  }
                  .cart-dropdown-container:hover .cart-dropdown-menu {
                  display: block;
                  }
                  .cart-dropdown-menu ul {
                  list-style: none;
                  margin: 0;
                  padding: 0;
                  max-height: 220px;
                  overflow-y: auto;
                  }
                  .cart-dropdown-menu li {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  gap: 8px;
                  padding: 8px 0;
                  border-bottom: 1px solid #f0f0f0;
                  font-size: 14px;
                  color: #333;
                  }
                  .cart-dropdown-menu li:last-child {
                  border-bottom: none;
                  }
                  .cart-file-info {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  flex: 1;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  }
                  .cart-dropdown-menu li svg.file-icon {
                  width: 16px;
                  height: 16px;
                  stroke: #d32f2f;
                  flex-shrink: 0;
                  }
                  /* --- NEW & MODIFIED STYLES --- */
                  /* Header section for "My Cart" and "View Cart" button */
                  .cart-dropdown-header {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  font-size: 15px;
                  padding-bottom: 8px;
                  }
                  .cart-dropdown-header .cart-title {
                  font-weight: 600;
                  color: #333;
                  }
                  /* --- NEW BUTTON STYLES --- */
                  /* This replaces the old .view-cart-link style */
                  .view-cart-btn {
                  /* Button appearance */
                  background-color: #dc3545; /* Red color, like Bootstrap's 'btn-danger' */
                  color: white !important; /* Use !important to override any generic 'a' tag color */
                  border-radius: 4px; /* Rounded corners */
                  text-decoration: none; /* Remove underline from the link */
                  border: none;
                  display: inline-block; /* Needed for padding to work correctly */
                  transition: background-color 0.2s ease;
                  /* "Small" button sizing */
                  padding: 5px 10px; /* Vertical and horizontal padding */
                  font-size: 13px; /* Smaller font size */
                  font-weight: 500;
                  line-height: 1.5; /* Adjust line height for vertical centering */
                  }
                  .view-cart-btn:hover {
                  background-color: #c82333; /* A darker red on hover */
                  text-decoration: none;
                  }
                  /* Style for the horizontal separators */
                  .cart-dropdown-menu hr {
                  border: 0;
                  border-top: 1px solid #e9e9e9;
                  margin: 8px 0;
                  }
                  /* Footer section for the total price */
                  .cart-dropdown-footer {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding-top: 8px;
                  font-size: 16px;
                  font-weight: bold;
                  color: #333;
                  }
                  @media (max-width: 991px) {
                  .cart-dropdown-container {
                  margin-left: 14px !important;
                  }
                  }
                  @media (max-width: 480px) {
                  .cart-dropdown-container {
                  margin-left: 8px !important;
                  }
                  .cart-dropdown-container:hover .cart-dropdown-menu {
                  right: -85px;
                  width: 260px;
                  }
                  }

/*********************************************************************
 * ===================================================================
 *                      LOGIN & SIGNUP PAGE STYLES
 * ===================================================================
 *********************************************************************/

/* The main white container box */
.login-prompt-container {
    display: flex; /* Aligns items in a row */
    align-items: center; /* Vertically centers the text and button */
    justify-content: center; /* Horizontally centers the items */
    gap: 15px; /* Creates space between the text and the button */

    background-color: #ffffff;
    padding: 18px 25px;
    
    /* Adds the subtle shadow and rounded corners */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Optional: Add some margin to position it on the page */
    margin: 30px auto; 
    max-width: 450px; /* Adjust width as needed */
}

/* The text "Already a member with us?" */
.login-prompt-text {
    margin: 0; /* Removes default paragraph margin */
    color: #4a4a4a; /* A soft, dark grey for the text */
    font-size: 16px;
}

/* The black "LOGIN" button */
.login-prompt-button {
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    
    padding: 10px 22px;
    border-radius: 5px;

    font-size: 14px;
    font-weight: bold;
    text-decoration: none; /* Removes underline from the link */
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Adds a little space between letters */
    
    /* Adds a subtle effect when hovering over the button */
    transition: opacity 0.2s ease;
}

.login-prompt-button:hover {
    opacity: 0.85;
	color:white;
}



/* Make sure the parent container has overflow: hidden */
.auth-page-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden; /* This is crucial for hiding the oversized edges */
}

.auth-page-container::before {
    content: ''; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
        url("https://shamiya.westonik.com/printco/assets/img/login.jpg");
        
    background-size: cover;
    background-position: center;
    
    filter: blur(5px);
    
    /* 
     *  THE FIX: Scale the element up by 10%.
     *  This pushes the blurry "white shadow" outside the container's view.
    */
    transform: scale(1.1); 
    
    z-index: -1;
}

.auth-card-wrapper {
    display: flex;
    background-color: #fff; /* Card background */
    border-radius: 10px; /* Rounded corners for the card */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    overflow: hidden; /* Ensures content respects border radius */
    width: 100%;
    max-width: 980px; /* Max width of the card, image shows a wide card */
}

/* --- SIGNUP PAGE SPECIFIC STYLES --- */
.signup-form-column {
    flex: 1; /* Takes up available space */
    padding: 40px 50px; /* Ample padding inside the form area */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Vertically center form content if card has fixed height or enough content */
}

.signup-image-column {
    flex: 1; /* Takes up equal space if present */
    background-color: #fff; /* Or a very light subtle color if image has transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Padding around the image */
}

.signup-image-column img {
    max-width: 100%;
    height: auto;
    max-height: 500px; /* Limit image height to prevent it from becoming too large */
    object-fit: contain; /* Ensures image is scaled correctly */
}

.signup-title {
    font-size: 32px; /* Large title */
    font-weight: 600; /* Semi-bold */
    color: #333; /* Dark grey for text */
	font-family: var(--font-h, 'Outfit', sans-serif); /* Poppins as specified in image - CHANGED TO OUTFIT AS PER --font-h */
    margin-bottom: 30px; /* Space below the title */
    text-align: left; /* As per image */
}

.signup-input-group {
    position: relative;
    margin-bottom: 15px; /* Space between input fields */
    display: flex; /* To align icon and input */
    align-items: center; /* Vertically align icon and input */
    border: 1px solid #e0e0e0; /* Underline style for input group */
    transition: border-bottom-color 0.3s ease; /* Smooth transition for focus */
}

.signup-input-group .icon {
    color: #adb5bd; /* Light grey for icon */
    margin: 0px 10px 0px 10px; /* Space between icon and input field */
    font-size: 16px; /* Icon size */
    line-height: 1; /* Ensure icon aligns well */
    transition: color 0.3s ease; /* Smooth transition for icon color */
}

.signup-input-field {
    width: 100%;
    border: none; /* Remove default border */
    padding: 10px 5px 10px 0; /* Padding for text visibility, no left padding as icon handles it */
    font-size: 15px;
    color: #495057; /* Input text color */
    background-color: transparent; /* Transparent background */
    font-family: var(--font-p, 'Poppins', sans-serif); /* Ensure input fields use Poppins */
}

.signup-input-field::placeholder {
    color: #adb5bd; /* Placeholder text color */
}

.signup-input-field:focus {
    outline: none; /* Remove default focus outline */
    /* Border color change handled by .signup-input-group:focus-within */
}
.signup-input-group:focus-within { /* To change border and icon color of whole group on input focus */
    border-bottom-color: #5D9CEC; /* Highlight color on focus (blue from image) */
}
.signup-input-group:focus-within .icon {
    color: #5D9CEC; /* Change icon color on focus */
}


.signup-checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 25px; /* Space below checkbox */
    font-size: 14px;
    color: #495057; /* Text color */
    font-family: var(--font-p, 'Poppins', sans-serif);
}

.signup-checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    accent-color: #5D9CEC; /* Color for the checkbox tick (modern browsers) */
    /* For older browsers, you might need custom checkbox styling */
    cursor: pointer;
}

.signup-checkbox-group label {
    cursor: pointer; /* Make label clickable */
}

.signup-checkbox-group a {
    color: #5D9CEC; /* Terms of service link color (blue from image) */
    text-decoration: none !important; /* No underline by default */
    font-weight: 500;
}
.signup-checkbox-group a:hover {
    text-decoration: underline !important; /* Underline on hover */
}

.signup-submit-btn {
    background-color: #5D9CEC; /* Light blue from image */
    color: #fff; /* White text */
    padding: 12px 25px; /* Padding for button size */
    border: none;
    border-radius: 5px; /* Rounded corners */
    font-size: 16px;
    font-weight: 600; /* Semi-bold text */
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto; /* Not full width, as per image */
    display: inline-block; /* To allow auto width */
    font-family: var(--font-p, 'Poppins', sans-serif); /* Button text Poppins */
}

.signup-submit-btn:hover {
    background-color: #4a8cdb; /* Darker shade of light blue for hover */
}

.signup-secondary-link {
    margin-top: 25px; /* Space above the "already a member" link */
    text-align: left; /* Align to the left as in image */
    font-size: 14px;
    font-family: var(--font-p, 'Poppins', sans-serif);
}

.signup-secondary-link a {
    color: #333; /* Darker link color for secondary action */
    font-weight: 500;
    text-decoration: none !important; /* No underline by default */
    border-bottom: 1px solid #333; /* Underline style matching the image */
    padding-bottom: 2px; /* Space for the underline */
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.signup-secondary-link a:hover {
    color: #5D9CEC; /* Blue color on hover */
    border-bottom-color: #5D9CEC; /* Blue underline on hover */
}


/* --- LOGIN PAGE SPECIFIC STYLES (adapting from signup) --- */
.login-form-column {
    flex: 1;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-image-column { /* Can use a different image or style for login page */
    flex: 1;
    background-color: white; /* Or a subtle pattern/color */
    display: none; /* Hidden by default, enable if an image is used for login page */
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* If login page has an image column, make it visible */
.login-image-column.has-image {
    display: flex;
}


.login-image-column img {
    max-width: 100%;
    height: auto;
    max-height: 500px; /* Consistent max height */
    object-fit: contain;
}

.login-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    font-family: var(--font-h, 'Outfit', sans-serif); /* Consistent font - OUTFIT */
    text-align: left; /* Or center, depending on design */
}

.login-input-group {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    transition: border-bottom-color 0.3s ease;
}

.login-input-group .icon {
    color: #adb5bd;
    margin: 0px 10px 0px 10px;
    font-size: 16px;
    line-height: 1;
    transition: color 0.3s ease;
}

.login-input-field {
    width: 100%;
    border: none;
    padding: 10px 5px 10px 0;
    font-size: 15px;
    color: #495057;
    background-color: transparent;
    font-family: var(--font-p, 'Poppins', sans-serif); /* Input field Poppins */
}

.login-input-field::placeholder {
    color: #adb5bd;
}

.login-input-field:focus {
    outline: none;
}
.login-input-group:focus-within {
    border-bottom-color: #5D9CEC;
}
.login-input-group:focus-within .icon {
    color: #5D9CEC;
}

.login-options {
    display: flex;
    justify-content: space-between; /* "Remember me" on left, "Forgot password" on right */
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
    font-family: var(--font-p, 'Poppins', sans-serif);
}

.login-checkbox-group {
    display: flex;
    align-items: center;
    color: #495057;
}

.login-checkbox-group input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: #5D9CEC;
    cursor: pointer;
}
.login-checkbox-group label {
    cursor: pointer;
}

.login-forgot-password a {
    color: #5D9CEC; /* Blue link color */
    text-decoration: none !important;
    font-weight: 500;
}
.login-forgot-password a:hover {
    text-decoration: underline !important;
}


.login-submit-btn {
    background-color: #5D9CEC; /* Consistent button color */
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: var(--font-p, 'Poppins', sans-serif); /* Button text Poppins */
}

.login-submit-btn:hover {
    background-color: #4a8cdb;
}

.login-secondary-link {
    margin-top: 25px;
    text-align: center; /* Centered for "Create an account" link */
    font-size: 14px;
    font-family: var(--font-p, 'Poppins', sans-serif);
}

.login-secondary-link a {
    color: #5D9CEC; /* Blue link for secondary action */
    font-weight: 500;
    text-decoration: none !important;
}
.login-secondary-link a:hover {
    text-decoration: underline !important;
}

/* Responsive adjustments for Auth Pages */
@media (max-width: 992px) { /* Adjust for when image column might be too small */
    .auth-page-container {
        padding: 30px 25px; /* Reduce padding on smallest screens */
    }
    .auth-card-wrapper {
        max-width: 900px; /* Slightly reduce max width */
    }
     .signup-form-column, .login-form-column {
        padding: 30px 40px;
    }
}

@media (max-width: 768px) { /* Tablet and smaller: stack image and form */
    .auth-card-wrapper {
        flex-direction: column; /* Stack image above form */
        max-width: 500px; /* Max width for smaller screens, more form-like */
    }
    .auth-page-container {
        padding: 30px 25px; /* Reduce padding on smallest screens */
    }
    .signup-image-column, .login-image-column.has-image {
        /* display: none; Or order it differently */
        order: -1; /* Image on top if visible */
        padding: 30px 20px; /* Reduced padding for image column */
        min-height: 250px; /* Give some height if image is present, or remove if no image */
        max-height: 300px; /* Control image height on mobile */
    }
     .login-image-column { /* If login has no image, it remains display:none */
        min-height: 0;
        padding: 0;
    }
    .signup-form-column, .login-form-column {
        padding: 30px; /* Consistent padding for form on mobile */
    }
    .signup-title, .login-title {
        font-size: 26px; /* Slightly smaller title */
        text-align: center; /* Center title on mobile */
    }
    .signup-secondary-link {
        text-align: center; /* Center secondary link on mobile */
    }
     .signup-submit-btn {
        width: 100%; /* Full width button on mobile for signup too */
    }
}

@media (max-width: 480px) { /* Small mobile screens */
    .auth-page-container {
        padding: 40px 25px; /* Reduce padding on smallest screens */
    }
    .signup-form-column, .login-form-column {
        padding: 25px; /* Further reduce padding */
    }
    .signup-title, .login-title {
        font-size: 24px; /* Even smaller title */
    }
    .login-options {
        flex-direction: column; /* Stack "Remember me" and "Forgot password" */
        align-items: flex-start; /* Align items to the start */
    }
    .login-forgot-password {
        margin-top: 10px; /* Add space when stacked */
    }
     .signup-input-group, .login-input-group {
    }
}


/*********************************************************************
 * ===================================================================
 *          MODERNIZED BANNER / CAROUSEL STYLES
 * ===================================================================
 *********************************************************************/

/* --- Main Modern Carousel Container --- */
.modern-carousel {
    position: relative;
}

/* --- Hand Cursor for Carousel Items --- */
.modern-carousel .carousel-inner {
    cursor: grab; /* "Hand" cursor indicating draggable */
}
.modern-carousel .carousel-inner:active {
    cursor: grabbing; /* "Grabbing hand" cursor while dragging (if JS enabled drag) */
}


/* --- Modern Carousel Indicators (Dots) - Repositioned to Top-Left --- */
.modern-carousel-indicators-top-left { /* New class for top-left positioning */
    position: absolute;
    top: 20px; /* Distance from the top */
    left: 20px; /* Distance from the left */
    bottom: auto; /* Override Bootstrap's bottom positioning */
    right: auto; /* Override Bootstrap's right positioning */
    z-index: 2;
    display: flex;
    flex-direction: column; /* Stack dots vertically */
    padding: 0;
    margin: 0; /* Remove default margins */
    list-style: none;
    /* Remove justify-content and margins related to bottom centering */
}

.modern-carousel-indicators-top-left button {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 12px; /* Slightly larger dots */
    height: 12px;
    padding: 0;
    margin-bottom: 8px; /* Spacing between vertical dots */
    margin-right: 0; /* Reset horizontal margin */
    margin-left: 0; /* Reset horizontal margin */
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.4); /* Lighter inactive dots for better visibility on various backgrounds */
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2); /* Subtle border for definition */
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.6s ease, background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.modern-carousel-indicators-top-left button:last-child {
    margin-bottom: 0; /* No margin on the last dot */
}

.modern-carousel-indicators-top-left button.active {
    opacity: 1;
    background-color: #ffffff; /* Solid white for active dot */
    border-color: rgba(0,0,0,0.4);
    transform: scale(1.15); /* Slightly larger active dot */
}
.modern-carousel-indicators-top-left button:hover {
    background-color: rgba(255, 255, 255, 0.7);
}


/* --- Modern Carousel Navigation Controls (Arrows) --- */
.modern-carousel-control {
    position: absolute;
    top: 0; /* Align to top */
    bottom: 0; /* Stretch to bottom */
    z-index: 3;
    display: flex;
    align-items: center; /* Vertically center the icon */
    justify-content: center;
    width: auto;
    padding: 0 15px; /* Slightly reduced padding for arrows closer to edge */
    color: #fff;
    text-align: center;
    background: none;
    border: 0;
    opacity: 0.6; /* Start a bit more transparent */
    transition: opacity 0.2s ease;
}

.modern-carousel-control:hover,
.modern-carousel-control:focus {
    opacity: 0.9;
    color: #fff;
    text-decoration: none;
    outline: 0;
}

.modern-carousel-control-prev {
    left: 5px; /* Closer to the edge */
}

.modern-carousel-control-next {
    right: 5px; /* Closer to the edge */
}

.modern-carousel-control-icon {
    display: inline-block;
    width: 38px;  /* Slightly larger icon container */
    height: 38px;
    background-color: rgba(0, 0, 0, 0.25); /* Slightly more subtle background */
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55% 55%; /* Adjust arrow size within circle */
    transition: background-color 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); /* Subtle shadow for depth */
}
.modern-carousel-control:hover .modern-carousel-control-icon {
    background-color: rgba(0, 0, 0, 0.45);
}


/* --- Enhanced Carousel Caption Text --- */
.modern-carousel-caption { /* Target the new class added to carousel-caption */
    /* Position it more centrally or adjust as needed */
    bottom: 15%; /* Move caption up from the default bottom */
    left: 10%;
    right: 10%;
    padding-top: 20px;
    padding-bottom: 25px;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4); /* Optional: Semi-transparent background for better readability */
    border-radius: 5px; /* Optional: Rounded corners for the background */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Text shadow for better contrast */
}

.modern-carousel-caption h5 {
    font-size: 2.2rem; /* Larger title */
    font-weight: 600; /* Bolder */
    margin-bottom: 0.75rem;
    line-height: 1.2;
    font-family: var(--font-h, 'Outfit', sans-serif); /* UPDATED TO OUTFIT */
}

.modern-carousel-caption p {
    font-size: 1.1rem; /* Larger paragraph text */
    line-height: 1.6;
    color: #f8f9fa !important; /* Lighter paragraph color, ensure !important if needed to override other p styles */
    font-family: var(--font-p, 'Poppins', sans-serif); /* UPDATED TO POPPINS */
}

/* Responsive adjustments for captions */
@media (max-width: 991.98px) {
    .modern-carousel-caption h5 {
        font-size: 1.8rem;
    }
    .modern-carousel-caption p {
        font-size: 1rem;
    }
    .modern-carousel-caption {
        bottom: 12%;
    }
}

@media (max-width: 767.98px) {
    .modern-carousel-caption {
        bottom: 10%;
        padding: 15px;
        background-color: rgba(0, 0, 0, 0.5); /* Slightly darker bg on small screens if shown */
    }
    .modern-carousel-caption h5 {
        font-size: 1.5rem;
    }
    .modern-carousel-caption p {
        font-size: 0.9rem;
    }
}


/* Ensure your banner height CSS is also present */
.carousel-item-banner-height img {
    height: 550px; /* Default height for larger screens */
    object-fit: cover;
    width: 100%;
}
@media (max-width: 991.98px) { .carousel-item-banner-height img { height: 450px; } }
@media (max-width: 767.98px) { .carousel-item-banner-height img { height: 350px; } }
@media (max-width: 575.98px) { .carousel-item-banner-height img { height: 250px; } }

/*********************************************************************
 * ===================================================================
 *          MODERNIZED BANNER / CAROUSEL STYLES
 * ===================================================================
 *********************************************************************/



/***************************Lastest home page banner *************************************/


/* Main Container: full width and a draggable cursor */
.home-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
}

.home-slider.grabbing {
    cursor: grabbing;
}

/* Slider Track */
.home-slider__track {
    display: flex;
    /* transition will be managed by JS */
}

/* Individual Slides */
.home-slider__slide {
    min-width: 100%;
    height: 56vh; /* Adjust height as needed */
    position: relative;
    background-color: #222; /* Fallback color */
}

/* Image inside the slide */
.home-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
    pointer-events: none; /* Prevents browser's default image drag behavior */
}

/* Dot Navigation */
.home-slider__dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 10;
}

.home-slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 6px;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s;
}

.home-slider__dot--active {
    background-color: #ff6f61;
}

@media only screen and (max-width: 767px) {
.home-slider__slide {
    min-width: 100%;
    height: 25vh;
    position: relative;
    background-color: #222;
}}
/ ********************************************* /




               /* --- Main Banner Container --- */
        .banner {
            width: 100%;
        }

        /* --- Static Hero Banner --- */
        .hero-section-banner-static {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            background-image: url('https://images.unsplash.com/photo-1612190656723-c409e75ea4bb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
            background-size: cover;
            background-position: center center;
            height: 400px;
        }

        /* Dark Overlay for text readability */
        .hero-section-banner-static::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.45);
            z-index: 1;
        }

        /* --- Content Block --- */
        .hero-section-content {
            position: relative;
            z-index: 2;
            padding: 20px;
        }

        .hero-section-content h1 {
            font-size: 2.8rem;
            font-weight: 700;
            margin: 0 0 10px 0;
            text-transform: uppercase;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }

        .hero-section-content p {
            font-size: 1.2rem;
            font-weight: 300;
            margin: 0 0 30px 0;
            opacity: 0.9;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
			color: white !important;
        }

        /* --- Styled Button --- */
        .hero-section-btn {
            display: inline-block;
            padding: 12px 40px;
            border: 2px solid #ffffff;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.2);
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
            font-size: 0.9rem;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .hero-section-btn:hover {
            background-color: #ffffff;
            color: #212529;
        }
        
        /* --- CSS FOR TEXT ANIMATION --- */
        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
            }
        }
        
        /* Class added by JavaScript to trigger the animation */
        .animate-bounce {
            display: inline-block; /* Essential for transform to work */
            animation: bounceIn 0.6s ease;
        }


        /* --- Responsive Adjustments --- */
        @media (max-width: 767.98px) {
            .hero-section-banner-static {
                height: 300px;
            }
            .hero-section-content h1 {
                font-size: 2rem;
            }
            .hero-section-content p {
                font-size: 1rem;
            }
        }

        @media (max-width: 575.98px) {
            .hero-section-banner-static {
                height: 250px;
            }
            .hero-section-content h1 {
                font-size: 1.6rem;
            }
            .hero-section-content p {
                font-size: 0.9rem;
                margin-bottom: 20px;
            }
            .hero-section-btn {
                padding: 10px 30px;
                font-size: 0.8rem;
            }
        }


/*********************************************************************
 * ===================================================================
 *          HOME SECTION 2 - PROMISE ITEMS STYLES
 * ===================================================================
 *********************************************************************/

.home-section2-promise {
    background-color: #fff; /* Or your desired background, image has a very light off-white, #fdfdfc or similar */
    /* If you want a super light off-white as in image: background-color: #fbfbfa; */
}

.promise-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
padding: 10px;

}


.promise-icon-wrapper {
    margin-bottom: 20px; /* Space between icon and title */
    position: relative; /* For positioning badges on icons */
    display: inline-block; /* To keep wrapper only as wide as icon */
    color: #333; /* Default icon color, can be overridden per icon */
}

/* Placeholder Font Awesome Icon Styling */
.promise-icon-wrapper .fas,
.promise-icon-wrapper .far { /* far for outlined icons */
    font-size: 48px; /* Adjust size to match your actual icons */
    line-height: 1;
    margin-bottom: 5px; /* Small space if badge is below */
    color: #555D66; /* A common neutral icon color from such designs */
}


/* Badges on Icons - Style these to match your specific icon badges */
.icon-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-p, 'Poppins', sans-serif); /* Use Poppins for consistency */
    font-weight: bold;
    color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    /* Default positioning - adjust per icon if needed */
    /* Example for bottom-right: */
    bottom: -2px; 
    right: -5px; 
    width: 24px; 
    height: 24px;
    font-size: 13px; 
    line-height: 1;
    border: 2px solid white; /* Creates the white outline around the badge */
}

.icon-badge-blue { background-color: #3B82F6; /* Example blue, match your 'P' */ }
.icon-badge-red { background-color: #EF4444; /* Example red, match your star */ }
.icon-badge-orange { background-color: #F97316; /* Example orange, match your infinity */ }
.icon-badge-green { background-color: #10B981; /* Example green, match your check */ }
.icon-badge-yellow { background-color: #F59E0B; /* Example yellow, match your '1' */ }

/* Adjust badge specific content (like icon inside badge) */
.icon-badge .fas, .icon-badge .far {
    font-size: 10px; /* Smaller icon inside badge */
    color: white;
    margin-bottom: 0;
}


.promise-title {
    font-family: var(--font-h, 'Outfit', sans-serif); /* Use Outfit for headings */
    font-size: 17px; /* Based on image proportion */
    font-weight: 600; /* Semi-bold, appears slightly bolder than regular */
    color: #2c3e50; /* Dark, slightly desaturated blue/grey */
    margin-bottom: 10px;
    line-height: 1.3;
}

.promise-description {
    font-family: var(--font-p, 'Poppins', sans-serif); /* Use Poppins for paragraphs */
    font-size: 14px; /* Based on image proportion */
    color: #555D66 !important; /* Lighter grey, using !important to override general p if needed */
    line-height: 1.6;
    max-width: 220px; /* To control line length and wrapping similar to image */
    margin-left: auto;
    margin-right: auto;
}

/* Responsive Adjustments for Promise Items */
@media (min-width: 992px) { /* lg and up - For 5 columns */
    .home-section2-promise .col-lg { /* Custom Bootstrap column behavior for 5 items */
        flex: 0 0 auto;
        width: 20%;
    }
}
/* On md, sm, xs screens, it will use col-md-4 (3 items), col-sm-6 (2 items), col-12 (1 item) respectively */

@media (max-width: 767.98px) {
    .promise-title {
        font-size: 16px;
    }
    .promise-description {
        font-size: 13px;
        max-width: 90%; /* Allow more width on smaller screens */
    }
    .promise-icon-wrapper {
        margin-bottom: 15px;
    }
}





   /* ========================================================
   Modern & Responsive Inner Page Banner (Updated Version)
   ======================================================== */ 
/* --- The Banner Container --- */
.inner-page-banner-subcategory1 {
    position: relative; 
    min-height: 30vh;  
    max-height: 450px; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;  
    background-repeat: repeat; 
    background-position: center;
    background-color: #2c3e50; 
}

/* --- The Dark Overlay --- */
.inner-page-banner-subcategory1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
    z-index: 2; 
}

/* --- The Text Content --- */
.overlay-text-subcategory {
    position: relative; 
    z-index: 3;       
    width: 90%;
    max-width: 800px;
    color: white;
    text-align: center;
    padding: 2rem 1rem;
}

.overlay-text-subcategory h2,
.overlay-text-subcategory p {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
}

.overlay-text-subcategory h2 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); 
}

.overlay-text-subcategory p {
    font-size: clamp(1rem, 2vw, 1rem);
    font-weight: 400;
    margin: 0;
    animation-delay: 0.2s;
    line-height: 25px !important;
    color: white !important;
	margin-bottom:14px;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================================
   Modern & Responsive Inner Page Banner (Updated Version)
   ======================================================== */
/* --- The Banner Container --- */
.inner-page-banner-category {
    position: relative;
    min-height: 30vh;   
    max-height: 450px; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;  
    background-repeat: repeat; 
    background-position: center;
    background-color: #2c3e50;  
}


/* --- The Dark Overlay --- */
.inner-page-banner-category::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
    z-index: 2; 
}

/* --- The Text Content --- */
.overlay-text-category {
    position: relative; 
    z-index: 3;         
    width: 90%;
    max-width: 800px;
    color: white;
    text-align: center;
    padding: 2rem 1rem;
}

.overlay-text-category h2, 
.overlay-text-category p {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
}

.overlay-text-category h2 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); 
}

.overlay-text-category p {
    font-size: clamp(1rem, 2vw, 1rem);
    font-weight: 400;
    margin: 0;
    animation-delay: 0.2s;
    line-height: 25px !important;
    color: white !important;
}

/* --- Keyframes for the Animation --- */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/*********************************************************************
 * ===================================================================
 *          HOME SECTION 3 - LOVED PRODUCTS GRID STYLES
 * ===================================================================
 * This section contains all CSS required for the "Loved Products"
 * grid, including the yellow title card, product cards with
 * category labels, image display, and the on-image "Explore"
 * ball hover effect.
 *********************************************************************/

/* --- Main Section Wrapper (Leveraging existing .sec-pad if used elsewhere) --- */
/* .home-section3-loved-products might be on the same div as .sec-pad */
.home-section3-loved-products {
    background-color: #fff; /* Or your site's default off-white page background if preferred */
    /* Example: background-color: #fbfbfa; */
}

/* --- Grid Container --- */
.loved-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default 3 columns */
    /* gap: 0; is default, so no explicit gap needed for touching cells */
    border: 1px solid #e0e0e0; /* A very light border around the whole grid */
}

/* --- General Card Styling (Common for Title and Product Cards) --- */
.loved-product-card {
    position: relative; 
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
    overflow: hidden; /* Important for containing positioned children if they animate */
    display: flex; 
    flex-direction: column;
    text-decoration: none; /* If cards are links (which they are in the HTML) */
    color: inherit; 
}

/* Remove right border from last item in each row (for 3 columns) */
.loved-product-card:nth-child(3n) {
    border-right: none;
}

/* Remove bottom border from items in the last row (for a 3x3 grid of 9 items) */
.loved-product-card:nth-child(n+7) { /* Targets items from 7th, 8th, 9th */
    border-bottom: none;
}


/* --- Title Card Specific Styling --- */
.loved-product-card.title-card {
    background-color: #ffeb3b; /* Bright yellow from image */
    padding: 30px;
    align-items: center; 
    justify-content: center;
    grid-row: span 1; 
    grid-column: span 1;
    cursor: default; /* Title card isn't typically interactive like product cards */
}

.title-card-content h2 {
    font-family: var(--font-h, 'Outfit', sans-serif); /* Assuming --font-h is Outfit */
    font-size: 2.5rem; 
    font-weight: 700; 
    color: #1e293b; /* Dark grey/blue text from image */
    line-height: 1.2;
    margin: 0;
    text-align: left; /* As per image */
}

/* --- Product Card Specific Styling --- */
.loved-product-card.product-card {
    background-color: #fff; 
    min-height: 280px; /* Base minimum height, adjust as needed */
    cursor: pointer; /* Standard hand cursor for clickable items */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* For subtle card hover effect */
}

.loved-product-card.product-card:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.12); /* Subtle shadow on hover */
}

/* --- Category Label on Product Cards --- */
.product-category-label {
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: var(--font-p, 'Poppins', sans-serif); /* Assuming --font-p is Poppins */
    font-size: 11px;
    font-weight: 500;
    color: #555D66; /* Greyish text from image */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2; /* Above image, below hover explore if it covered all */
}

/* --- Image Wrapper within Product Cards --- */
.product-image-wrapper {
    position: relative; /* CRUCIAL for positioning the hover "Explore" ball */
    flex-grow: 1; /* Allows image wrapper to take available vertical space */
    display: flex;
    align-items: end;
    justify-content: center;
    overflow: hidden; /* Contains image transformations */
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 180px; /* Adjust based on your image aspect ratios and desired size */
    object-fit: contain; /* Ensures entire image is visible without cropping */
    transition: transform 0.35s ease; /* For image zoom effect on hover */
}

/* --- HTML/CSS Visual "Explore" Ball on Image Hover --- */
.product-visual-hover-explore {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5); /* Start centered and scaled down */
    
    width: 70px;  /* Size of the red ball */
    height: 70px;
    background-color: #A51C30; /* Your MMTTC Red or desired red */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: #fff; /* White text */
    font-family: var(--font-h, 'Outfit', sans-serif); /* OUTFIT */
    font-size: 11px; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    /* Bouncy transition for transform, smoother for opacity/visibility */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    z-index: 10; /* Ensure it's above the image */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for the ball */
}

.product-visual-hover-explore span {
    line-height: 1.2; /* Adjust if text needs better centering or wraps */
}

/* --- Hover Effects for Product Card --- */
.loved-product-card.product-card:hover .product-image-wrapper .product-visual-hover-explore {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1); /* Ball scales to full size */
}

.loved-product-card.product-card:hover .product-image-wrapper img {
    transform: scale(0.92); /* Image scales down slightly to make space/focus for the ball */
}


/* --- Responsive Adjustments for Loved Products Grid --- */
@media (max-width: 991.98px) { /* md screens (tablets) */
    .loved-products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
    /* Reset 3-column border logic and apply 2-column logic */
    .loved-product-card:nth-child(3n) { 
        border-right: 1px solid #e0e0e0; /* Add back right border if it was 3rd item */
    } 
    .loved-product-card:nth-child(2n) { 
        border-right: none; /* Remove right border on 2nd, 4th, 6th... item */
    }

    /* Bottom border adjustment for 2 columns (assuming 9 items) */
    .loved-product-card:nth-child(n+7) { 
        border-bottom: 1px solid #e0e0e0; /* Reset rule for 3x3 grid */
    }
    /* For 9 items (1 title + 8 products) in a 2-column layout:
       Title card spans 2 cols. Products fill remaining rows.
       Rows would be: [Title], [P1, P2], [P3, P4], [P5, P6], [P7, P8]
       Only the last row of products (P7, P8) should have no bottom border.
    */
    .loved-product-card.product-card:nth-last-child(-n+2) { /* Targets last two product cards */
        border-bottom: none;
    }
    .loved-product-card.title-card { /* Title card spans full width on 2-col layout */
        grid-column: span 2; 
        border-bottom: 1px solid #e0e0e0; /* Ensure it has a bottom border if it's not the absolute last row */
    }
    /* If title card is the only thing in its row and there are product cards below it, it needs a bottom border. */
    /* This gets complex if item count varies. The above should work for 8 products + 1 title. */


    .title-card-content h2 {
        font-size: 2rem;
    }
    .loved-product-card.product-card {
        min-height: 250px;
    }
    .product-visual-hover-explore { 
        width: 60px; 
        height: 60px; 
        font-size: 10px;
    }
}

@media (max-width: 767.98px) { /* sm screens (landscape phones) */
    .title-card-content h2 {
        font-size: 1.8rem;
    }
    .product-image-wrapper img {
        max-height: 150px;
    }
    .product-visual-hover-explore { 
        width: 55px; 
        height: 55px; 
        font-size: 9px;
    }
}

@media (max-width: 575.98px) { /* xs screens (portrait phones) */
    .loved-products-grid {
        grid-template-columns: 1fr; /* 1 column */
    }
    /* In 1-column layout, no item needs a right border */
    .loved-product-card:nth-child(2n), 
    .loved-product-card:nth-child(3n) { 
        border-right: 1px solid #e0e0e0; /* Reset */
    }
     .loved-product-card { 
        border-right: none; 
    }
    .loved-product-card.title-card { /* Title card is also 1 column */
        grid-column: span 1; 
    }

    /* In 1-column layout, all items except the very last one need a bottom border */
    .loved-product-card:not(:last-child) {
        border-bottom: 1px solid #e0e0e0;
    }
     .loved-product-card:last-child { 
        border-bottom: none; 
    }

    .loved-product-card.product-card {
        min-height: 220px;
    }
}


/*********************************************************************
 * ===================================================================
 *          HOME SECTION 4 - SUB-CATEGORY SECTION STYLES
 * ===================================================================
 * This section contains styles for the two-part sub-category
 * display: a hero-like panel at the top and a grid of
 * sub-category items below.
 *********************************************************************/

.home-section4-subcategories {
    /* No specific background for the container, inherits from body or parent */
    /* Using Bootstrap .my-5 for vertical margin */
    padding-top: 30px; /* Optional: add some internal top padding to the section */
    padding-bottom: 30px; /* Optional: add some internal bottom padding */
}

/* --- Top Hero-like Panel --- */
.subcategory-hero-panel {
    background-color: white; /* Very light grey background, or keep it white if preferred */
    /* padding: 40px 0; /* Padding inside the hero panel row */
    overflow: hidden; /* To contain image if it's larger */
}

.subcategory-hero-text {
    padding: 30px 40px; /* Padding for the text content */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subcategory-hero-text h1 {
    font-family: var(--font-h, 'Outfit', sans-serif); /* OUTFIT */
    font-size: 2.8rem; /* Large heading */
    font-weight: 700; /* Bold */
    color: #1e293b; /* Dark, slightly desaturated blue/grey */
    line-height: 1.25;
    margin-bottom: 20px;
}

.subcategory-hero-text p {
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    font-size: 1rem; /* Standard paragraph size */
    color: #4b5563 !important; /* Slightly lighter grey for description, !important if needed */
    line-height: 1.7;
    margin-bottom: 25px;
}

.view-range-link {
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    font-size: 1rem;
    font-weight: 600; /* Semi-bold */
    color: #1e293b; /* Match heading color or use a theme accent */
    text-decoration: none;
    display: inline-flex; /* To align icon with text */
    align-items: center;
    transition: color 0.3s ease;
}

.view-range-link:hover {
    color: var(--text-theme, #A51C30); /* MMTTC Red on hover or your theme color */
}

.view-range-link .icon-arrow-animate {
    margin-left: 8px;
    font-size: 0.9em; /* Slightly smaller than text */
    transition: transform 0.3s ease;
}

.view-range-link:hover .icon-arrow-animate {
    transform: translateX(5px); /* Arrow moves slightly to the right on hover */
}

.subcategory-hero-image {
    display: flex; /* To ensure image fills height if desired, or centers */
    align-items: center; /* Center image vertically if col is taller */
}

.subcategory-hero-image img {
    width: 100%;
    height: 500px; /* Maintain aspect ratio */
    max-height: 300px;
    object-fit: cover; /* Ensures image covers its container, might crop */
}


/* --- Bottom Grid Part - Sub-categories --- */
.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 1px; /* Very thin gap to show faint lines, or 0 for no gap */
    background-color: #e0e0e0; /* This color will show through the gaps as lines */
    border: 1px solid #e0e0e0; /* Border around the entire grid */
    margin-top: 1px; /* To separate from the hero border if both are present */
}

.subcategory-item {
    background-color: #fff; /* White background for each item */
    padding: 20px 15px 0px 15px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Pushes title up and image wrapper down (if flex-grow used) */
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.subcategory-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 1; /* Bring hovered item slightly forward */
}

.subcategory-title {
    font-family: var(--font-p, 'Poppins', sans-serif); /* Using Poppins for category titles for a softer look */
    font-size: 0.8rem; /* Small, uppercase-like */
    font-weight: 500; /* Medium */
    color: #374151; /* Dark grey */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    line-height: 1.3;
}

.subcategory-image-wrapper {
    width: 100%;
    /* flex-grow: 1; /* Allow image wrapper to take available space if item height varies */
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 200px; /* Max height for the image area */
}

.subcategory-image-wrapper img {
    max-width: 100%;
    max-height: 100%; /* Image will not exceed the wrapper's max-height */
    object-fit: contain; /* Ensure entire image is visible */
}


/* --- Responsive Adjustments for Sub-Category Section --- */
@media (max-width: 991.98px) { /* md screens (tablets) */
    .subcategory-hero-text h1 {
        font-size: 2.2rem;
    }
    .subcategory-hero-text p {
        font-size: 0.95rem;
    }
    .subcategory-hero-panel {
        /* Consider stacking text and image on tablets if space is tight */
        /* 
        .row.subcategory-hero-panel {
            flex-direction: column;
        }
        .subcategory-hero-image img {
            border-radius: 0 0 8px 8px; // Adjust rounding if stacked
            max-height: 300px;
        }
        .subcategory-hero-text {
            padding: 30px;
        }
        */
    }

    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for subcategories */
    }
    .subcategory-title {
        font-size: 0.75rem;
    }
}

@media (max-width: 767.98px) { /* sm screens (landscape phones) */
    .subcategory-hero-text {
        text-align: center; /* Center text when stacked */
        padding: 30px 20px;
    }
     .subcategory-hero-text h1 {
        font-size: 1.9rem;
    }
    .subcategory-hero-text p {
        font-size: 0.9rem;
        max-width: 100%;
    }
    .view-range-link {
        justify-content: center; /* Center link when text is centered */
    }
    .subcategory-hero-image img {
       border-radius: 0; /* No rounding if image is full width in stack */
       /* max-height: 280px; */
    }
    /* If stacking hero panel items */
    .row.subcategory-hero-panel {
        flex-direction: column; /* Stack text above image */
    }
     .subcategory-hero-image img {
        border-radius: 0 0 8px 8px; /* Round bottom corners if panel is rounded */
    }


    .subcategory-grid {
        /* Still 2 columns, or could go to 1 if preferred */
        /* grid-template-columns: 1fr; */ 
    }
    .subcategory-image-wrapper {
        max-height: 180px;
    }
}

@media (max-width: 575.98px) { /* xs screens (portrait phones) */
    .subcategory-hero-text h1 {
        font-size: 1.7rem;
    }
    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep 2 columns or change to 1 */
        /* If 1 column:
        grid-template-columns: 1fr;
        */
    }
    .subcategory-item {
        padding: 15px 10px;
    }
    .subcategory-image-wrapper {
        max-height: 160px;
    }
}



/*********************************************************************
 * ===================================================================
 *                       CTA SECTION STYLES (Option 1: Gradient)
 * ===================================================================
 *********************************************************************/

.cta-section-wrapper.cta-option-1 {
    padding: 50px 0;
    /* Subtle gradient - adjust colors to fit your theme */
    background-image: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%);
    color: #333; /* Default text color for this section */
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.cta-option-1 .cta-title {
    font-family: var(--font-h, 'Outfit', sans-serif); /* OUTFIT */
    font-size: 1.9rem; /* Slightly larger than image */
    font-weight: 600; /* Semi-bold */
    color: #2c3e50; /* Darker, sophisticated text color */
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.cta-option-1 .cta-subtitle {
    font-family: var(--font-h, 'Outfit', sans-serif); /* Using heading font (Outfit) for subtitle too for impact */
    font-size: 1.5rem;
    font-weight: 500; /* Medium weight */
    color: #4a5568; /* Slightly lighter than title */
    margin-bottom: 0;
    line-height: 1.3;
}

.cta-option-1 .cta-button {
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    background-color: #A51C30; /* Using MMTTC Red or your theme color */
    color: #fff !important; /* Ensure white text, !important if needed */
    padding: 12px 25px;
    border-radius: 25px; /* Pill shape */
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent; /* For hover effect */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.cta-option-1 .cta-button:hover {
    background-color: #fff;
    color: #A51C30 !important;
    border-color: #A51C30;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.cta-option-1 .cta-button i {
    font-size: 0.9em; /* Icon size relative to button text */
    transition: transform 0.3s ease;
}
.cta-option-1 .cta-button:hover i {
    transform: translateX(3px);
}


/* Responsive for Option 1 CTA */
@media (max-width: 767.98px) {
    .cta-section-wrapper.cta-option-1 {
        padding: 35px 0;
    }
    .cta-option-1 .cta-title {
        font-size: 1.6rem;
    }
    .cta-option-1 .cta-subtitle {
        font-size: 1.3rem;
        margin-bottom: 20px; /* Space before button when stacked */
    }
    .cta-option-1 .cta-button {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: auto; /* Allow button to size naturally or set to 100% if preferred */
        display: inline-block;
    }
}



/*********************************************************************
 * ===================================================================
 *      SUB-CATEGORY GRID - STYLE 1 (As per Provided Image)
 * ===================================================================
 * This CSS is specifically for the `.subcategory-grid` and 
 * its `.subcategory-item` children as shown in your image,
 * intended to be used within a .sec-pad or similar wrapper.
 *********************************************************************/

/* Optional: Styles for the section wrapper if needed beyond .sec-pad */
.home-section-subcategories-style1 {
    /* background-color: #f8f9fa; /* Example: if this section needs a different bg */
}

/* Section Title (using your existing .titles class) */
/* .home-section-subcategories-style1 .titles { */
    /* color: #another-color; /* Example: if this title needs a different color */
/* } */


.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns as per image */
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

.subcategory-item {
    background-color: #fff; 
    padding: 20px 15px 0px 15px; 
    text-align: center; 
    text-decoration: none;
    color: #333; 
    display: flex;
    flex-direction: column; 
    border-right: 1px solid #e0e0e0; 
    border-bottom: 1px solid #e0e0e0; 
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.subcategory-item:hover {
    background-color: #f8f9fa; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow */
    z-index: 1; /* Bring to front on hover */
}

.subcategory-title {
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    font-size: 0.8rem; 
    font-weight: 500; 
    color: #374151; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px; 
    line-height: 1.3;
}

.subcategory-image-wrapper {
    width: 100%;
    height: 180px; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    background-color: #fff; 
}

.subcategory-image-wrapper img {
    max-width: 100%;
    max-height: 100%; 
    object-fit: contain; 
    transition: transform 0.3s ease;
}

.subcategory-item:hover .subcategory-image-wrapper img {
    transform: scale(1.03); /* Slight zoom on image when hovering card */
}

/* --- Responsive Adjustments for Sub-Category Grid Style 1 --- */
@media (max-width: 991.98px) { /* md screens (tablets) */
    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
    .subcategory-title {
        font-size: 0.75rem;
    }
    .subcategory-image-wrapper {
        height: 160px; 
    }
}

@media (max-width: 767.98px) { /* sm screens (landscape phones) */
    .subcategory-image-wrapper {
        height: 180px; 
    }
}

@media (max-width: 575.98px) { /* xs screens (portrait phones) */
    .subcategory-grid {
        grid-template-columns: repeat(2, 1fr); /* Or 1 column if preferred */
        /* If 1 column: 
        grid-template-columns: 1fr; 
        .subcategory-item { border-right: none; } // Remove right border for single column
        */
    }
    .subcategory-item {
        padding: 15px 10px;
    }
    .subcategory-image-wrapper {
        height: 150px; 
    }
    .subcategory-title {
        font-size: 0.7rem;
    }
}







/*********************************************************************
 * ===================================================================
 *          PRODUCT CAROUSEL SECTION STYLES 
 * ===================================================================
 *********************************************************************/
.home-section-product-carousel {
    position: relative; /* Needed for absolute positioning of nav buttons if they are children */
}

/* --- Swiper Container --- */
.trending-products-swiper,
.branded-products-swiper { 
    width: 100%;
    padding-top: 10px; 
    padding-bottom: 10px; /* Reduced if no pagination */
    /* If nav buttons are positioned outside the swiper-wrapper using negative margins, 
       the swiper container itself might need `overflow: visible;` 
       OR the parent (.home-section-product-carousel) takes care of it.
       For buttons positioned with left/right: 10px, this is fine. */
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    /* CRITICAL: NO fixed width here. Swiper calculates it based on slidesPerView. */
    height: auto; /* Let content dictate height, then use align-items: stretch */
    display: flex; 
    justify-content: center;
    align-items: stretch; /* Makes all cards in a row equal height */
}

/* --- Product Card Styling within Carousel --- */
.product-carousel-card {
    display: flex; 
    flex-direction: column; /* Stack image above info */
    background-color: #fff;
    border-radius: 12px; 
    overflow: hidden; 
    text-decoration: none;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); 
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    width: 100%; /* Card takes full width of its swiper-slide parent */
    height: 100%; /* Card takes full height of its swiper-slide parent */
}

.product-carousel-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09); 
}

.product-carousel-image-wrapper {
    position: relative; 
    width: 100%;
    height: 200px; /* Or use aspect-ratio css property if supported and desired */
    /* aspect-ratio: 4 / 3; */
    background-color: #f0f0f0; /* Placeholder if image is transparent */
}

.product-carousel-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #d9534f; 
    color: #fff;
    padding: 5px 12px; 
    border-radius: 20px; 
    font-size: 0.65rem; 
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    line-height: 1; /* Ensure text is vertically centered if padding is adjusted */
    font-family: var(--font-p, 'Poppins', sans-serif); /* Badge text Poppins */
}

.product-badge.new-item-badge {
    background-color: #e74c3c; /* Example red for "NEW ITEM" */
}


.product-carousel-info {
    padding: 13px;
    text-align: center; 
    margin-top: auto; /* Pushes info to bottom if card content varies */
    flex-grow: 1; /* Allow info to take remaining space */
    display: flex; /* To center title if it's short */
    flex-direction: column;
    justify-content: center;
}

.product-carousel-title {
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    font-size: 0.9rem;
    font-weight: 500;
    color: #343a40; 
    margin: 0;
    line-height: 1.4;
    min-height: 1.4em; /* approx 1 line to maintain alignment, adjust if allowing more lines */
    display: -webkit-box; /* For multi-line ellipsis */
    -webkit-line-clamp: 1; /* Show max 1 line before ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Swiper Navigation Buttons Styling --- */
/* Common styles for all product carousel navigation buttons */
.home-section-product-carousel .swiper-button-prev,
.home-section-product-carousel .swiper-button-next {
    color: var(--text-theme, #A51C30); 
    width: 38px; /* Slightly larger for better touch targets */
    height: 38px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0,0,0,0.2); /* Softer shadow */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    top: 50%; 
    /* Adjust margin-top to vertically center arrows against the image area primarily */
    /* (Image height is 200px, half is 100px. Buttons are 38px, half is 19px. So target center of image area) */
    /* This calculation depends on where you want them anchored. */
    /* For anchoring to carousel center (including text): transform: translateY(-50%); */
    /* For anchoring more to image area: */
    margin-top: -50px; /* Pulls it up. Adjust this value based on your card layout. (approx (image_height/2) - (button_height/2) from card center) */
    z-index: 10; 
}
.home-section-product-carousel .swiper-button-prev:hover,
.home-section-product-carousel .swiper-button-next:hover {
    background-color: var(--text-theme, #A51C30);
    color: #fff;
    transform: scale(1.05) translateY(-50%); /* Keep Y transform for centering */
}
/* If margin-top is used for centering, the Y transform needs to be removed from hover or hover needs to also use margin-top.
   Let's simplify: use top: 50% and transform: translateY(-50%) and adjust margin-top for fine-tuning relative to image.
*/
.home-section-product-carousel .swiper-button-prev,
.home-section-product-carousel .swiper-button-next {
    transform: translateY(-50%); /* This is for perfect vertical centering relative to swiper container height */
    margin-top: -25px; /* Further adjustment: (-(height of text area)/2) to align with image. Trial and error often needed. */
}
.home-section-product-carousel .swiper-button-prev:hover,
.home-section-product-carousel .swiper-button-next:hover {
    background-color: var(--text-theme, #A51C30);
    color: #fff;
    transform: translateY(-50%) scale(1.05); /* Keep vertical centering with scale */
}


.home-section-product-carousel .swiper-button-prev::after,
.home-section-product-carousel .swiper-button-next::after {
    font-size: 16px; 
    font-weight: bold;
}

/* Specific positioning for Trending Products Swiper Nav */
.trending-products-swiper .swiper-button-prev,
.trending-swiper-button-prev { 
    left: 5px; /* Position inside, close to edge */
}
.trending-products-swiper .swiper-button-next,
.trending-swiper-button-next {
    right: 5px; /* Position inside, close to edge */
}

/* Specific positioning for Branded Products Swiper Nav */
.branded-products-swiper .swiper-button-prev,
.branded-swiper-button-prev {
    left: 5px;
}
.branded-products-swiper .swiper-button-next,
.branded-swiper-button-next {
    right: 5px;
}


@media (max-width: 767.98px) { /* sm screens and below */
    .home-section-product-carousel .swiper-button-prev,
    .home-section-product-carousel .swiper-button-next {
        width: 30px;
        height: 30px;
        margin-top: -30px; /* Re-adjust fine-tuning for smaller buttons */
    }
    .home-section-product-carousel .swiper-button-prev::after,
    .home-section-product-carousel .swiper-button-next::after {
        font-size: 12px;
    }
    .titles { /* General .titles class, if used for section headings */
        font-size: 1.8rem; /* Example adjustment */
    }
}

@media (max-width: 575.98px) { /* xs screens */
    .home-section-product-carousel .swiper-button-prev,
    .home-section-product-carousel .swiper-button-next {
        display: none; /* Hide on extra small screens */
    }
}

.swiper-horizontal {
    padding: 10px !important; /* Consider if this much padding is needed on all sides or just top/bottom */
}
























/*********************************************************************
 * ===================================================================
 *          FEATURES/BENEFITS SECTION STYLES (Refined)
 * ===================================================================
 *********************************************************************/
.home-section-features-refined-about-us {
    background: white;
}

.home-section-features-refined {
    background: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%) !important;
}

.feature-benefit-card-r { /* -r for refined */
    background-color: #fff;
    border-radius: 10px; 
    padding: 35px 30px; /* Increased padding */
    text-align: center;
    height: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:0 5px 20px rgba(0, 0, 0, 0.07); /* Slightly more defined shadow */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-top: 4px solid transparent; /* For hover effect */
}

.feature-benefit-card-r:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-top-color: #A51C30; /* Accent color on hover */
}

.fb-icon-wrapper-r {
    margin-bottom: 25px;
    color: #A51C30; 
    font-size: 2.5rem; /* Larger icon */
    line-height: 1;
}

.fb-title-r {
    font-family: var(--font-h, 'Outfit', sans-serif); /* OUTFIT */
    font-size: 1.15rem; 
    font-weight: 600;
    color: #343a40; /* Darker title */
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 2.8em; /* To align titles with 2 lines of text */
}

.fb-description-r {
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    font-size: 0.9rem; /* Slightly larger description */
    color: #555D66 !important; 
    line-height: 1.65;
    margin-bottom: 25px;
    flex-grow: 1; 
}

.fb-underline-r {
    width: 40px; /* Slightly wider underline */
    height: 3px;
    background-color: #A51C30; 
    border-radius: 1.5px; /* Rounded ends */
    transition: width 0.3s ease;
}
.feature-benefit-card-r:hover .fb-underline-r {
    width: 60px; /* Underline expands on hover */
}

/* Responsive for Refined Features/Benefits */
@media (max-width: 1199.98px) { /* Before XL, so LG screens */
    .col-xl-3.col-lg-6 { /* Target the specific combination */
         /* Ensures that on LG screens, if it's 2 per row, they don't get overly wide */
    }
}
@media (max-width: 991.98px) { /* Tablets */
    .feature-benefit-card-r {
        padding: 30px 25px;
    }
    .fb-title-r {
        font-size: 1.05rem;
    }
}
@media (max-width: 767.98px) { /* Small tablets and mobiles */
     .home-section-features-refined .gy-4 { /* Bootstrap class for vertical gutter */
        --bs-gutter-y: 1.5rem; /* Default, adjust if needed */
    }
}


/*********************************************************************
 * ===================================================================
 *          STATIC CATEGORY CARDS SECTION STYLES
 * ===================================================================
 * Displays category cards in a static grid (e.g., 6x2).
 * Reuses .product-carousel-card styling for consistency.
 *********************************************************************/

.home-section-static-categories {
    /* background-color: #fdfdfd; /* Optional: very light bg for the section */
}

/* If the section title needs specific adjustments for this section */
/* .home-section-static-categories .titles {
    margin-bottom: 40px !important; 
} */

.static-category-grid {
    display: grid;
    /* --- Desktop: 6 columns --- */
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px; /* Adjust gap between cards as desired */
}

/* Re-using .product-carousel-card for the individual category cards */
/* The .product-carousel-card class and its children (.product-carousel-image-wrapper, etc.)
   are already styled from the Swiper section. We ensure they fit the grid. */
.static-category-grid .product-carousel-card {
    /* No specific width needed here as grid-template-columns handles it */
    /* Height will be determined by content, or you can set a min-height */
    min-height: 240px; /* Example: ensure a minimum height for consistency */
}


/* --- Responsive Adjustments for Static Category Grid --- */

/* Laptop (e.g., 5 columns) - Adjust breakpoint as needed */
@media (max-width: 1399.98px) { /* Slightly before Bootstrap's xxl, or use 1199.98px for lg */
    .static-category-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Tablet (e.g., 4 columns for larger tablets, 3 for smaller) */
@media (max-width: 1199.98px) { /* Bootstrap lg breakpoint and below */
    .static-category-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

@media (max-width: 991.98px) { /* Bootstrap md breakpoint and below */
    .static-category-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller tablets */
        gap: 15px;
    }
  /*  .static-category-grid .product-carousel-card {
        min-height: 260px;
    } */
     .product-carousel-image-wrapper { /* From previous carousel styles, may need adjustment */
        height: 160px; 
    }
    .product-carousel-title { /* From previous carousel styles */
        font-size: 0.85rem;
        min-height: 2.6em; /* Adjust if needed for 3 lines */
    }
}


/* Mobile (e.g., 2 columns) */
@media (max-width: 767.98px) { /* Bootstrap sm breakpoint and below */
    .static-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
     .static-category-grid .product-carousel-card {
        min-height: 225px;
    }
    .product-carousel-image-wrapper { /* From previous carousel styles */
        height: 150px; 
    }
     .product-carousel-title { /* From previous carousel styles */
        font-size: 0.8rem;
        min-height: 2.4em; /* Adjust if needed */
    }
}

/* Optional: Single column on very small screens if 2 is too cramped */
/*
@media (max-width: 480px) {
    .static-category-grid {
        grid-template-columns: 1fr;
    }
}
*/


/*********************************************************************
 * ===================================================================
 *          "HOW IT WORKS" SECTION STYLES (Refined)
 * ===================================================================
 *********************************************************************/
.home-section-how-it-works-refined {
    background-color: #fff; /* White background for this section area */
}

.how-it-works-title-wrapper-r {
    /* mb-5 from HTML should provide enough space */
}

.how-it-works-subtitle-r {
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    font-size: 0.95rem; /* Slightly larger */
    font-weight: 600; /* Bolder */
    color: #A51C30; 
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Wider spacing */
    margin-bottom: 8px; /* More space to main title */
}

/* Assuming .titles class is styled globally, if you need specific overrides for this instance: */
/* .home-section-how-it-works-refined .titles {
    font-size: 2.8rem; 
    color: #1A202C; 
} */

.how-it-works-step-card-r { /* -r for refined */
    background-color: #fff;
    border-radius: 10px;
    padding: 25px 20px; /* Adjusted padding */
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); /* Softer, more diffused shadow */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 170px; /* Slightly taller */
    border: 1px solid #f0f0f0; /* Very subtle border */
}

.how-it-works-step-card-r:hover {
    transform: translateY(-6px) scale(1.03); /* More lift and slight scale */
    box-shadow: 0 8px 25px rgba(var(--text-theme-rgb, 165, 28, 48), 0.1); /* Shadow with theme color hint */
}

.hiw-icon-circle-r {
    width: 75px; 
    height: 75px;
    border-radius: 50%;
    background-color: #fff; 
    border: 2.5px solid #A51C30; 
    color: #A51C30; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px; /* More space */
    font-size: 2rem; /* Larger icon */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.how-it-works-step-card-r:hover .hiw-icon-circle-r {
    background-color: #A51C30;
    color: #fff;
    transform: rotate(10deg) scale(1.05); /* Slight rotation and scale on icon hover */
}

.hiw-step-text-r {
    font-family: var(--font-h, 'Outfit', sans-serif); /* Using heading font (Outfit) for steps */
    font-size: 0.95rem; /* Slightly larger step text */
    font-weight: 500;
    color: #343a40 !important; 
    line-height: 1.5;
    margin-bottom: 0;
}

.how-it-works-notice-r {
    /* text-center from HTML will center the inner div */
}
.notice-content-r {
    background-color: rgba(var(--text-theme-rgb, 165, 28, 48), 0.05); /* Very light theme color tint */
    color: #A51C30; 
    padding: 15px 25px; /* More padding */
    border-radius: 8px;
    font-family: var(--font-p, 'Poppins', sans-serif); /* POPPINS */
    font-size: 0.9rem; /* Slightly larger notice text */
    font-weight: 500;
    display: inline-flex; 
    align-items: center;
    border-left: 5px solid #A51C30; 
    max-width: 600px; 
    margin-left: auto; 
    margin-right: auto; 
}

.notice-content-r i {
    margin-right: 12px;
    font-size: 1.2rem; /* Larger shield icon */
}

/* Responsive for Refined How It Works */
@media (max-width: 991.98px) {
    .hiw-icon-circle-r {
        width: 65px;
        height: 65px;
        font-size: 1.8rem;
        margin-bottom: 18px;
    }
    .hiw-step-text-r {
        font-size: 0.9rem;
    }
    .how-it-works-step-card-r {
        padding: 20px 15px;
        min-height: 150px;
    }
}

@media (max-width: 767.98px) {
    .notice-content-r {
        font-size: 0.85rem;
        padding: 12px 20px;
    }
    .notice-content-r i {
        font-size: 1.1rem;
    }
}

/*********************************************************************
 * ===================================================================
 *                         CTA
 * ===================================================================
 *********************************************************************/

/* Above Footer CTA Banner Styles */
.above-footer-cta-banner {
    position: relative; /* For overlay positioning */
    height: 150px; /* Target height for larger screens */
    background-image: url('https://plus.unsplash.com/premium_photo-1683734677818-74b42347f4ca?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-size: cover;
    background-position: center;
    display: flex; /* For vertical alignment of content */
    align-items: center;
    color: #fff; /* Default text color, assuming dark background or overlay */
    overflow: hidden; /* Ensure nothing spills out of the 150px height */
}

.above-footer-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for text readability */
    z-index: 1; /* Behind content */
}

.above-footer-cta-content-container {
    position: relative; /* To sit on top of the overlay */
    z-index: 2;
    width: 100%;
    max-width: 1600px; /* Adjust to your site's max content width */
    margin: 0 auto; /* Center the content */
    padding: 20px 30px; /* Padding inside the CTA */
    display: flex;
    justify-content: space-between; /* Pushes text left, button right */
    align-items: center;
    box-sizing: border-box; /* Include padding in width/height calculations */
}

.above-footer-cta-text {
    flex-grow: 1; /* Allows text to take available space */
  	text-align:left !important;
    padding-right: 20px; /* Space between text and button */
}

.above-footer-cta-text h2 {
    font-size: 1.8rem; /* Adjust as needed */
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 600;
}

.above-footer-cta-text p {
    font-size: 1rem; /* Adjust as needed */
    margin-bottom: 0;
    opacity: 0.9;
  	color:white !important;
}

.above-footer-cta-button-wrapper {
    flex-shrink: 0; /* Prevents button from shrinking */
}

.above-footer-cta-btn {
    display: inline-block;
    background-color: #a51c30; /* Example vibrant color */
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap; /* Prevents button text from wrapping */
}

a.above-footer-cta-btn:hover{
	color: white !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .above-footer-cta-banner {
        height: auto; /* Allow height to adjust to content */
        min-height: 150px; /* Still try to be substantial */
        padding-top: 25px; /* Add some top padding when stacked */
        padding-bottom: 25px; /* Add some bottom padding when stacked */
    }

    .above-footer-cta-content-container {
        flex-direction: column; /* Stack text and button vertically */
        text-align: center; /* Center content when stacked */
        padding: 20px;
    }

    .above-footer-cta-text {
        padding-right: 0;
        margin-bottom: 20px; /* Space between text and button */
    }

    .above-footer-cta-text h2 {
        font-size: 1.6rem; /* Slightly smaller for mobile */
    }

    .above-footer-cta-text p {
        font-size: 0.9rem; /* Slightly smaller for mobile */
    }

    .above-footer-cta-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .above-footer-cta-text h2 {
        font-size: 1.4rem;
    }
    .above-footer-cta-text p {
        font-size: 0.85rem;
    }
}



/*********************************************************************
 * ===================================================================
 *                         User Dashboard
 * ===================================================================
 *********************************************************************/

.dashboard-container {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* --- Sidebar --- */
.dashboard-sidebar-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    /* Removed height: 100%; to allow natural height */
}

.dashboard-avatar-wrapper {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.dashboard-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e9ecef;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.dashboard-username {
    font-weight: 600;
    font-size: 1.15rem;
    color: #343a40;
}
.dashboard-user-email {
    font-size: 0.85rem;
    color: #6c757d;
}

.dashboard-sidebar .list-group-item {
    background-color: transparent;
    border: none;
    padding: 12px 20px;
    margin-bottom: 5px;
    border-radius: 8px;
    color: #495057;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.dashboard-sidebar .list-group-item i {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: #6c757d;
    transition: color 0.2s ease-in-out;
}

.dashboard-sidebar .list-group-item:hover,
.dashboard-sidebar .list-group-item:focus {
    background-color: #e9f5ff;
    color: #007bff;
}
.dashboard-sidebar .list-group-item:hover i,
.dashboard-sidebar .list-group-item:focus i {
    color: #007bff;
}

.dashboard-sidebar .list-group-item.active {
    background-color: #007bff;
    color: white !important; /* Ensure text color is white on active */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}
.dashboard-sidebar .list-group-item.active i {
    color: white !important; /* Ensure icon color is white on active */
}

.dashboard-sidebar .list-group-item.text-danger:hover,
.dashboard-sidebar .list-group-item.text-danger:focus {
    background-color: #f8d7da;
    color: #721c24 !important;
}
.dashboard-sidebar .list-group-item.text-danger:hover i,
.dashboard-sidebar .list-group-item.text-danger:focus i {
     color: #721c24 !important;
}

/* --- Content Pane (applied to <main> tag) --- */
.dashboard-content-pane {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px; /* Consistent padding */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    min-height: 500px; /* Keep a minimum height if desired */
}

.dashboard-content-pane-header {
    font-size: 1.8rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
}
.dashboard-content-pane-header i {
    margin-right: 15px;
    color: #007bff;
    font-size: 1.6rem;
}

/* General styles for elements within dashboard-content-pane, if needed */
.dashboard-content-pane .form-label { font-weight: 500; color: #495057; margin-bottom: 0.3rem; }
.dashboard-content-pane .form-control { border-radius: 6px; border-color: #ced4da; }
.dashboard-content-pane .form-control:focus { border-color: #86b7fe;  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);}
.dashboard-content-pane .btn { border-radius: 6px; padding: 0.5rem 1.25rem; font-weight: 500; }


/* Responsive adjustments for smaller screens */
@media (max-width: 991.98px) { /* Adjust for stacking content below LG */
    .dashboard-content-pane-header {
        font-size: 1.6rem;
    }
}
@media (max-width: 767.98px) { /* MD breakpoint, sidebar stacks */
    .dashboard-sidebar-wrapper {
        margin-bottom: 25px; /* Space when stacked above content */
        padding: 20px;
    }
    .dashboard-content-pane {
        padding: 20px; /* Reduced padding for smaller screens */
    }
    .dashboard-content-pane-header {
        font-size: 1.5rem;
    }
    .dashboard-content-pane-header i {
        font-size: 1.3rem;
    }
}

/* === Profile Page Specific Styles === */
.profile-content .profile-info-group {
    margin-bottom: 1.5rem;
}
.profile-content .profile-info-label {
    font-weight: 600;
    color: #343a40;
    display: block;
    margin-bottom: 0.25rem;
}
.profile-content .profile-info-value {
    color: #495057;
    background-color: #f8f9fa;
    padding: 0.65rem 0.85rem; /* Slightly adjusted padding */
    border-radius: 6px;
    display: block;
    border: 1px solid #e9ecef;
}

/* === Order Product Card Styles (v3) === */
.card.order-product-card-v2 {
    border: 1px solid #e9ecef;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    /* h-100 is applied via Bootstrap class in HTML */
}

.card.order-product-card-v2:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.card.order-product-card-v2 .card-header {
    background-color: #f8f9fa;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #e9ecef;
}
.card.order-product-card-v2 .card-header h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #343a40;
}
.card.order-product-card-v2 .badge.fs-sm { /* Bootstrap class, we style it more */
    font-size: 0.72em; /* Made badges a bit smaller */
    padding: 0.3em 0.7em;
    vertical-align: middle;
    font-weight: 500;
}

.card.order-product-card-v2 .card-body {
    padding: 0.9rem 1rem;
    display: flex; /* For main content layout: image + details */
    flex-grow: 1;  /* Allows card-body to expand for h-100 card */
}

.card.order-product-card-v2 .card-body > .d-flex { /* The main flex container for image and text */
    width: 100%; /* Ensure it takes full width of card body */
}

.order-product-card-v2 .product-image-wrapper {
    padding-right: 12px;
    display: flex;
    align-items: flex-start; /* Or center */
}
.order-product-card-v2 .product-image-wrapper img {
    width: 65px; /* Adjusted image size */
    height: 65px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

.order-product-card-v2 .product-details-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.order-product-card-v2 .product-name-v2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.35;
    margin-bottom: 0.25rem;
    /* Uncomment for ellipsis on product name
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.35em * 2);
    */
}

.order-product-card-v2 .product-details-meta {
    font-size: 0.78rem;
    color: #5a6268; /* Slightly darker meta */
    line-height: 1.4;
    margin-bottom: 0.4rem;
}
.order-product-card-v2 .product-details-meta span + span::before {
    content: "\2022";
    margin: 0 0.5em;
    color: #adb5bd;
}

.order-product-card-v2 .product-price-v2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0069d9; /* Slightly darker blue */
    margin-bottom: 0.3rem;
}

.order-product-card-v2 .tracking-info {
    font-size: 0.78rem;
    color: #495057;
    margin-top: auto; /* Pushes tracking info to the bottom if card body flexes */
}
.order-product-card-v2 .tracking-info a {
    font-weight: 500;
    text-decoration: none;
    color: #0069d9;
}
.order-product-card-v2 .tracking-info a:hover {
    text-decoration: underline;
}

/* Specific Status Badge Colors (applied to .badge + .status-key) */
.orders-content .badge.status-shipped { background-color: #17a2b8 !important; color: white !important; }
.orders-content .badge.status-delivered { background-color: #28a745 !important; color: white !important; }
.orders-content .badge.status-processing { background-color: #ffc107 !important; color: #212529 !important; }
.orders-content .badge.status-cancelled { background-color: #dc3545 !important; color: white !important; }

/* Ensure custom !important doesn't get overridden by a generic .badge { color: white !important } */
.badge {
    /* Remove or adjust if the global .badge override causes issues */
}

/* === Addresses Page Specific Styles === */
.addresses-content .address-card {
    border: 1px solid #e9ecef;
    border-radius: 8px; /* Consistent radius */
    background-color: #fff; /* Ensure white background if not default */
    display: flex; /* To make h-100 work with footer */
    flex-direction: column; /* Stack header, body, footer */
}

.addresses-content .address-card .card-header {
    background-color: #f8f9fa;
    padding: 0.75rem 1rem; /* Slightly more padding in header */
    font-weight: 600; /* Make header text bolder */
    font-size: 0.95rem; /* Adjust header font size */
    border-bottom: 1px solid #e9ecef;
}
.addresses-content .address-card .address-card-type i {
    color: #007bff; /* Match other header icons */
}

.addresses-content .address-card .card-body {
    padding: 1rem 1.25rem; /* More padding in body */
    flex-grow: 1; /* Allow body to expand if card has h-100 */
}

.addresses-content .address-card .card-title { /* Target user name */
    font-size: 1rem; /* Slightly smaller name for prominence */
    font-weight: 500; /* Less bold than header type */
    color: #343a40;
    margin-bottom: 0.35rem !important; /* Bootstrap's .card-title has mb-2 */
}

.addresses-content .address-card .card-text.address-lines {
    font-size: 0.88rem; /* Main address text size */
    color: #495057; /* Slightly darker for better readability */
    line-height: 1.5;
    margin-bottom: 0.25rem; /* Reduced space between address lines */
}

.addresses-content .address-card .card-text.address-country {
    font-size: 0.82rem; /* Smaller font for country */
    color: #6c757d;
    margin-bottom: 0;
}

.addresses-content .address-card .card-footer {
    background-color: #f8f9fa; /* Light footer background */
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e9ecef;
}

.addresses-content .address-card .card-footer .btn-sm { /* Ensure buttons are small and distinct */
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
}


/*********************************************************************
 * ===================================================================
 *                 My-account-change-password
 * ===================================================================
 *********************************************************************/

    .password-toggle-icon {
        cursor: pointer;
    }

    .change-password-content form label {
        font-weight: 600 !important;
        color: #343a40;
        display: block;
        margin-bottom: 0.25rem;
      	font-size: 14px;
    }

/*********************************************************************
 * ===================================================================
 *                 My-account-orders
 * ===================================================================
 *********************************************************************/

    /* Optional: Custom styles for finer control if Bootstrap utilities aren't enough */
    .order-table tbody td {
        vertical-align: middle !important; /* Ensure vertical alignment */
        line-height: 1.6; /* Increase line height for better readability */
    }
    .order-table .product-name {
        font-weight: 600; /* Slightly bolder */
        color: #333;
        display: block; /* Ensure it takes its own line */
        margin-bottom: 0.25rem; /* Small space below product name */
    }
    .order-table .product-meta {
        font-size: 0.85em;
        color: #6c757d; /* Bootstrap's text-muted color */
    }
    .order-table .order-id {
        font-weight: 600;
    }
    .order-table .price {
        font-weight: 600;
    }
    .order-table .tracking-link {
        /* display: inline-block; */ /* If you want it on its own line with other text */
    }
    .product-image-orders {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 0.25rem; /* Slightly rounded corners for the image */
        margin-right: 0.75rem; /* More space between image and text */
    }


/*********************************************************************
 * ===================================================================
 *                 My-account-addresses
 * ===================================================================
 *********************************************************************/

.dashboard-sidebar-wrapper .list-group-item.active { 
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .dashboard-sidebar-wrapper .list-group-item.active i {
        color: white;
    }
    .address-card .card-header h5 {
        font-size: 1rem; 
        font-weight: 500; 
    }
    .address-card .card-body {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .address-card .card-body .card-title { 
        font-weight: 600;
        font-size: 1.05rem;
        color: #333;     
        margin-bottom: 0.5rem; 
    }
    .address-card .card-body .card-text.address-detail {
        font-size: 0.875rem;
        color: #6c757d;      
        line-height: 1.5;   
        margin-bottom: 0.3rem;
    }
    .address-card .card-body .card-text.address-mobile {
        font-size: 0.875rem;
        color: #6c757d;
        line-height: 1.5;
        margin-top: 0.5rem;
    }
     .address-card .card-body .card-text.address-mobile small {
         font-size: 0.9em; 
    }
    .btn-delete-custom { 
        background-color: #dc3545; 
        color: white;
    }
    .btn-delete-custom:hover {
        background-color: #c82333;
        color: white;
    }
    .modal-footer .btn-save-continue { 
        background-color: #a51c30; 
        color: white;
        font-weight: bold;
    }
    .modal-footer .btn-save-continue:hover {
        background-color: #000000;
        color: white;
    }
    .form-control::placeholder {
      color: #6c757d;
      opacity: 1; 
    }
    .form-control:-ms-input-placeholder {
     color: #6c757d;
    }
    .form-control::-ms-input-placeholder {
     color: #6c757d;
    }

    /* --- MODAL POPUP FONT STYLES --- */
    #addressFormModalBs4 .modal-title {
        font-size: 1.25rem; 
        font-weight: 500;  
    }

    #addressFormModalBs4 .modal-body label.small {
        font-weight: 600 !important;
        color: #343a40;
        display: block;
        margin-bottom: 0.25rem;
      	font-size: 14px;
    }


/*********************************************************************
 * ===================================================================
 *                         Footer
 * ===================================================================
 *********************************************************************/
.footer-main-wrapper {
    font-family: 'Poppins', sans-serif;
    background-color: var(--footer-bg-dark);
    color: var(--footer-text-secondary);
    font-size: 14px; /* Base font size for paragraphs/links */
    font-weight: 400; /* Base font weight */
}

.footer-section {
    padding: 30px 0;
}

.footer-section.footer-links-area p, .footer-section .footer-bottom-area {
    color: white !important;
}

.footer-section .footer-bottom-area{
	color: white !important;
}

p.footer-copyright-text.mb-md-0 {
    color: white !important;
}

ul.footer-links-list.list-unstyled {
    font-size: 16px !important;
}

/* --- Section 1: Features Area --- */
.footer-features-area {
    border-bottom: 1px solid var(--footer-border-color);
    padding-top: 45px;
    padding-bottom: 35px;
}
.footer-feature-item {
    text-align: center;
}
.footer-feature-icon {
    font-size: 30px;
    color: var(--footer-accent-pink);
    margin-bottom: 15px;
}
.footer-feature-title {
    color: var(--footer-text-primary);
	font-weight: 500;
    font-size: 18px;
    margin-bottom: 0px;
}
.footer-feature-text {
    font-size: 14px;
    margin: 0;
    color: #a9a9a9 !important;
}

/* --- Section 2: Main Links Area --- */
.footer-links-area {
    padding: 60px 0px 0px 0px;
}
.footer-widget-title {
    color: var(--footer-text-primary);
    font-size: 18px;
    font-weight: 700; /* Bold */
    margin-bottom: 30px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.5px;
}
.footer-widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 2px;
    background-color: var(--footer-accent-pink);
}
.footer-address-block {
    margin-bottom: 10px;
}
.footer-address-block p {
    margin-bottom: 5px;
    line-height: 1.7;
    color: var(--footer-text-secondary);
}
.footer-address-block p:last-child {
    margin-bottom: 0;
}
.footer-address-block p strong {
    color: var(--footer-text-primary);
    font-weight: 700; /* Bold */
}
.footer-address-block p strong i {
    color: var(--footer-text-secondary); /* Icon matches secondary text */
    margin-right: 10px;
    font-size: 15px;
}

/* Link List Styling */
.footer-links-list li {
    margin-bottom: 12px;
}
.footer-links-list li:last-child {
    margin-bottom: 0;
}
.footer-links-list li a {
    color: var(--footer-text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links-list li a:hover {
    color: var(--footer-text-primary);
}

/* Stay Connected Widget */
.footer-social-icons {
    gap: 12px;
}
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--footer-social-bg);
    color: var(--footer-text-primary);
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.2s ease-out;
}
.footer-social-link:hover {
    transform: translateY(-2px);
    color: var(--footer-text-primary);
}
.footer-warning-block {
    margin-top: 30px;
}
.footer-warning-title {
    color: var(--footer-text-primary);
    font-weight: 700; /* Bold */
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.footer-warning-title-beware{
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 300;
}
.footer-warning-block p {
    line-height: 1.8;
    margin: 0;
    color: var(--footer-text-secondary);
}


/* --- Section 3: Made With Area --- */
.footer-made-with-area {
    text-align: center;
    padding: 25px 0;
    border-top: 1px solid var(--footer-border-color);
    border-bottom: 1px solid var(--footer-border-color);
}
.footer-made-with-area p {
    margin: 0;
    font-size: 15px;
    color: white !important;
}
.heart-icon {
    color: var(--footer-accent-pink);
    font-size: 16px;
}

/* --- Section 4: Bottom Area --- */
.footer-bottom-area {
    background-color: var(--footer-bg-black);
    padding: 14px 0;
}
.footer-copyright-text {
    font-size: 14px;
    color: var(--footer-text-secondary);
    margin: 0;
}
.footer-payment-icon-group {
    max-width: 100%;
    height: auto;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
    .footer-links-area {
        padding: 40px 0 10px 0;
    }
    .footer-widget {
        margin-bottom: 40px;
    }
}

@media (max-width: 767.98px) {
    .footer-features-area {
        padding-bottom: 10px;
    }
    .footer-feature-item {
        margin-bottom: 30px !important;
    }
    .footer-copyright-wrapper,
    .footer-payment-wrapper {
        text-align: center !important;
    }
    .footer-copyright-text {
        margin-bottom: 15px;
    }
}

/*********************************************************************
 * ===================================================================
 *                         Boostrap Overrides
 * ===================================================================
 *********************************************************************/
.form-control:focus {
    color: #495057 !important;
    background-color: #fff !important;
    border-color: #a51c30 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem rgb(165 28 48 / 20%) !important;
}



/*********************************************************************
 * ===================================================================
 *                         Checkout
 * ===================================================================
 *********************************************************************/

.bread-c-cont a{
  color:#000000 !important;
}  
  
.bread-c-i {
    color: #000000 !important;
}
  
/* --- Checkout Base Scoping --- */
.checkout-page-wrapper {
    font-family: var(--checkout-font-sans);
    background-color: var(--checkout-background-color-page);
    color: var(--checkout-text-color-primary);
    line-height: 1.65;
    font-size: 16px;
}
.checkout-page-wrapper * { box-sizing: border-box; }

.checkout-page-wrapper h1,
.checkout-page-wrapper h2,
.checkout-page-wrapper h3,
.checkout-page-wrapper h4,
.checkout-page-wrapper h5,
.checkout-page-wrapper h6 {
    font-family: var(--checkout-font-headings);
    color: var(--checkout-text-color-primary);
}
.checkout-page-wrapper p {
    color: var(--checkout-text-color-secondary);
    margin-bottom: 1rem;
}
.checkout-page-wrapper a {
    color: var(--checkout-primary-brand-color);
    text-decoration: none;
}
.checkout-page-wrapper a:hover {
    color: var(--checkout-primary-brand-light);
    text-decoration: underline;
}

/* --- Checkout Wizard Main Container --- */
.checkout-wizard-main-container-custom-styles {
width:100%;
display:flex;
justify-content:space-between;
align-items:start;
    background-color: #F9FAFB !important;
    border-radius: var(--checkout-border-radius-md);
    box-shadow: var(--checkout-box-shadow-medium);
    overflow: hidden;
}
/* --- Checkout Stepper Navigation --- */
.checkout-stepper-wrapper {
    display: flex;
flex-direction:column;
    justify-content: space-between;
    align-items: center;
    padding-top: 50px; /* Removed side padding to allow full width for items */
    background-color: #f9fafb;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
	height:70vh;
}
.checkout-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--checkout-text-color-secondary);
    flex-grow: 0.5; 
    flex-basis: 0; 
    /* min-width: 70px; /* Can be removed if full distribution is always okay */
    position: relative;
    cursor: default;
    padding: 0 3px; 
}
.checkout-stepper-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px; 
   /* left: calc(50% + 18px); */
  /*  width: calc(100% - 36px); */
    height: 2.5px;
    background-color: var(--checkout-stepper-default-bg);
    z-index: 1;
    border-radius: 2px;
}
.checkout-step-counter {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--checkout-stepper-default-bg);
    color: var(--checkout-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 8px;
    z-index: 2;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.checkout-step-name {
    font-family: var(--checkout-font-headings);
    font-size: 0.8em; 
    font-weight: 500;
    white-space: normal; 
    line-height: 1.2;
    max-width: 90px; 
}
.checkout-stepper-item.active .checkout-step-counter { background-color: var(--checkout-stepper-active-bg); transform: scale(1.1); }
.checkout-stepper-item.active .checkout-step-name { color: var(--checkout-primary-brand-color); font-weight: 600; }
.checkout-stepper-item.active:not(:last-child)::after { background-color: var(--checkout-stepper-active-bg); }
.checkout-stepper-item.completed { cursor: pointer; }
.checkout-stepper-item.completed .checkout-step-counter { background-color: var(--checkout-stepper-completed-bg); }
.checkout-stepper-item.completed .checkout-step-name { color: var(--checkout-stepper-completed-bg); }
.checkout-stepper-item.completed:hover .checkout-step-counter { transform: scale(1.05); box-shadow: 0 3px 6px rgba(0,0,0,0.15); }
.checkout-stepper-item.completed:not(:last-child)::after { background-color: var(--checkout-stepper-completed-bg); }

/* --- Checkout Wizard Content --- */
.checkout-wizard-step-panel { display: none; animation: checkout-fadeInPanel 0.5s ease-out; }
.checkout-wizard-step-panel.active { display: block; }
@keyframes checkout-fadeInPanel { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.checkout-panel-main-header {
    margin-bottom: 25px; padding-bottom: 15px;
    border-bottom: 1px solid var(--checkout-border-color-soft);
}
.checkout-panel-main-header h2 {
    font-family: var(--checkout-font-headings);
    font-size: 1.5em; color: var(--checkout-text-color-primary); font-weight: 600;
    margin-bottom: 0;
}
.checkout-panel-main-header .checkout-header-actions button { margin-left: 8px; font-size: 0.85em; }
.checkout-panel-main-header .checkout-header-actions button:first-child { margin-left: 0; }
.checkout-panel-main-header .checkout-header-note-success { font-size: 0.85em; color: var(--checkout-success-color); font-weight: 500; }


.checkout-panel-body { margin-bottom: 25px; min-height: 250px; }
.checkout-panel-footer {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap:10px;
    padding: 20px; border-top: 1px solid var(--checkout-border-color-soft); ;
}
.checkout-panel-footer.checkout-center-button { justify-content: center; }
.checkout-panel-footer .checkout-btn-next:only-child, .checkout-panel-footer .checkout-btn-submit:only-child { margin-left: auto; }

.checkout-card {
    background-color: var(--checkout-background-color-panel);  /** border: 1px solid var(--checkout-border-color-soft);
    border-radius: var(--checkout-border-radius-md);
    margin-bottom: 20px; box-shadow: var(--checkout-box-shadow-soft); **/
}
.checkout-card-header {
    padding: 0.75rem 1rem;
    padding-top: 0.75rem; 
    border-bottom: 1px solid var(--checkout-border-color-soft);
    background-color: transparent;
}
.checkout-card-header h3, .checkout-card-header h4 {
    font-family: var(--checkout-font-headings);
    font-size: 1.1em; color: var(--checkout-text-color-primary); font-weight: 600;
    margin-bottom: 0;
}
.checkout-card-title {
    font-family: var(--checkout-font-headings);
    font-size: 1.1em; color: var(--checkout-text-color-primary); font-weight: 600;
}
.checkout-card-body { padding: 1rem 1.25rem; }


.checkout-btn {
    padding: 8px 18px;
    border-radius: var(--checkout-border-radius-sm);
    font-size: 0.9em; font-weight: 500;
    transition: all 0.2s ease;
    line-height: 1.5;
}
.checkout-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--checkout-primary-brand-rgb), 0.2); }

.checkout-btn-primary { background-color: var(--checkout-primary-brand-color); color: var(--checkout-white); border-color: var(--checkout-primary-brand-color); }
.checkout-btn-primary:hover { background-color: var(--checkout-primary-brand-light); border-color: var(--checkout-primary-brand-light); color: var(--checkout-white); }
.checkout-btn-secondary { background-color: var(--checkout-text-color-secondary); color: var(--checkout-white); border-color: var(--checkout-text-color-secondary); }
.checkout-btn-secondary:hover { filter: brightness(90%); color: var(--checkout-white); }



.checkout-btn-success { background-color: var(--checkout-success-color); color: var(--checkout-white); border-color: var(--checkout-success-color); }
.checkout-btn-success:hover { filter: brightness(90%); color: var(--checkout-white); }

.checkout-btn-outline { background-color: transparent; color: var(--checkout-primary-brand-color); border: 1px solid var(--checkout-primary-brand-color); }
.checkout-btn-outline:hover { background-color: var(--checkout-primary-brand-color); color: var(--checkout-white); }
.checkout-btn-outline-dark { background-color: transparent; color: var(--checkout-text-color-primary); border: 1px solid var(--checkout-border-color-strong); }
.checkout-btn-outline-dark:hover { background-color: var(--checkout-text-color-primary); color: var(--checkout-white); }
.checkout-btn-danger { background-color: var(--checkout-danger-color); color: var(--checkout-white); border-color: var(--checkout-danger-color); }
.checkout-btn-danger:hover { filter: brightness(90%); color: var(--checkout-white); }

.checkout-btn-accent{font-size:12px !important;}
.checkout-btn:disabled, .checkout-btn.disabled {
    background-color: var(--checkout-disabled-bg-color) !important;
    color: var(--checkout-disabled-text-color) !important;
    border-color: var(--checkout-disabled-bg-color) !important;
    cursor: not-allowed; filter: none; opacity: 0.7;
}

.checkout-btn-action-dark { background-color: #34495e; color: var(--checkout-white); border-color: #34495e; font-size: 0.75em; padding: 5px 8px; }
.checkout-btn-action-pink { background-color: var(--checkout-accent-color); color: var(--checkout-white); border-color: var(--checkout-accent-color); font-size: 0.8em; padding: 5px 8px; }


.checkout-form-group label, .checkout-form-label {
    display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.85em; color: var(--checkout-text-color-primary);
}
.checkout-page-wrapper .form-control,
.checkout-page-wrapper .form-select {
    padding: 8px 12px; font-size: 0.9em;
    background-color: var(--checkout-white); border: 1px solid var(--checkout-border-color-strong);
    border-radius: var(--checkout-border-radius-sm); color: var(--checkout-text-color-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-page-wrapper .form-control::placeholder { color: #aab8c2; }
.checkout-page-wrapper .form-control:focus,
.checkout-page-wrapper .form-select:focus {
    outline: none; border-color: var(--checkout-primary-brand-color);
    box-shadow: 0 0 0 3px rgba(var(--checkout-primary-brand-rgb), 0.2);
}
.checkout-page-wrapper textarea.form-control { min-height: 70px; }
.checkout-page-wrapper .form-check-input { margin-right: 8px; width: 12px; height: 12px; accent-color: var(--checkout-primary-brand-color); }
.checkout-page-wrapper .form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--checkout-primary-brand-rgb), 0.2); }
.form-check-input
 {
    position: absolute;
    margin-left: -1.2rem !important;
}


.checkout-coupon-options{
    max-height: 70px !important;
    overflow-y: auto !important;
}



.checkout-info-box {
   
    padding: 12px 18px; margin-bottom: 20px; border-radius: var(--checkout-border-radius-sm);
    font-size: 0.85em; 
	 max-height: 750px; /* Adjust this based on your card height × 2 rows */
  overflow-y: auto;
}
.checkout-info-box p { margin-bottom: 5px; font-size: 13px !important; font-weight:400; line-height:21px !important; color: #ffffff !important; }
.checkout-info-box p:last-child { margin-bottom: 0; }

/* CHECKOUT STEP 1: UPLOAD */
.checkout-upload-drop-area {
    text-align: center; padding: 30px 15px; border: 2px dashed var(--checkout-border-color-strong);
    border-radius: var(--checkout-border-radius-md); background-color: #fcfdff;
    transition: border-color 0.2s ease, background-color 0.2s ease; cursor:pointer;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:70vh !important;

}
.checkout-upload-drop-area:hover { border-color: var(--checkout-primary-brand-color); background-color: var(--checkout-white); }
.checkout-upload-drop-area .checkout-upload-icon svg { width: 40px; height: 40px; color: var(--checkout-primary-brand-light); margin-bottom: 12px; }
.checkout-upload-drop-area h3 { font-size: 1.15em; margin-bottom: 8px; color: var(--checkout-text-color-primary); }
.checkout-upload-drop-area .checkout-drag-drop-text { font-size: 0.85em; color: var(--checkout-text-color-secondary); margin-top: 12px; }
.checkout-file-chip-list { margin-top: 12px; text-align: left;}
.checkout-file-chip {
    display: inline-block; background-color: var(--checkout-disabled-bg-color);
    padding: 5px 10px; margin: 4px 4px 0 0; border-radius: 15px;
    font-size: 0.8em; color: var(--checkout-text-color-secondary);
}

/* CHECKOUT STEP 2: EDIT SETTINGS */
.checkout-file-filter-container { margin-bottom: 15px; max-width: 100%;} /* Allow full width on small screens */
@media (min-width: 576px) {
    .checkout-file-filter-container { max-width: 350px; } /* Restore max-width on sm and up */
}

.checkout-file-settings-card { margin-bottom: 20px; }
.checkout-file-header .checkout-file-name { font-weight: 600; font-size: 1em; color: var(--checkout-text-color-primary); }
.checkout-page-wrapper .badge.text-bg-primary-custom { background-color: var(--checkout-primary-brand-light) !important; color: white !important; font-size: 0.7em; }


.checkout-file-header .checkout-file-price { font-weight: bold; font-size: 1em; color: var(--checkout-text-color-primary); }
.checkout-file-info-bar {
    font-size: 0.75em; color: var(--checkout-text-color-secondary); margin: 8px 0 15px 0;
    background-color: var(--checkout-background-color-page); padding: 6px 10px; border-radius: var(--checkout-border-radius-sm);
    word-break: break-word; /* Allow long text to wrap */
}
.checkout-settings-grid {
   /* display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 15px; */
	  display: grid;
    grid-template-columns: repeat(2, 1fr); /* exactly two columns */
    gap: 15px;
	font-size:14px !important;
}
.checkout-settings-card-footer {
    margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--checkout-border-color-soft);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.checkout-apply-all-check-group { margin-bottom:8px; flex-basis: 100%; display: flex; flex-direction: column;}
.checkout-apply-all-check-group .form-check { margin-bottom: 4px;}
.checkout-apply-all-check-group .form-check-label { font-size: 0.85em; }
.checkout-apply-all-check-group .checkout-note { font-size: 0.75em; color: var(--checkout-text-color-secondary); margin-left: 24px; }
.checkout-special-instructions-group { flex-grow: 1; margin-right: 12px; margin-bottom: 8px; }
.checkout-content-action-footer { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--checkout-border-color-soft); }
.checkout-content-action-footer .checkout-btn-accent { padding: 10px 25px; font-size: 0.95em; }

/* CHECKOUT STEP 3: DELIVERY DETAILS */
.checkout-delivery-address-section {
     padding: 20px;
     background-color: #2c3e50;
     color: var(--checkout-white);
	 max-height: 650px !important;
    overflow-y: auto !important;
}
.checkout-delivery-address-section .checkout-btn { border-color: #4e5563; }
.checkout-delivery-address-section .checkout-btn-full-width { display:block; width: 100%; margin-bottom: 12px; background-color: #455160; color:var(--checkout-white); }
.checkout-delivery-address-section .form-control { background-color: #3b4654; color: var(--checkout-white); border-color: #5a6676; }
.checkout-delivery-address-section .form-control::placeholder { color: #9ab; }
.checkout-delivery-address-section .form-control:focus { border-color: var(--checkout-accent-color); box-shadow: 0 0 0 3px rgba(var(--checkout-primary-brand-rgb), 0.25); }

.checkout-address-list{
   max-height: 700px !important;
    overflow-y: auto !important;
}
.checkout-address-list .checkout-address-item {
    padding: 12px; background-color: #3b4654;
    border: 1px solid #5a6676;
    border-radius: var(--checkout-border-radius-sm); margin-bottom: 8px; cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.checkout-address-list .checkout-address-item:hover { background-color: #455160; }
.checkout-address-item h4 { font-size: 1em; margin-bottom: 4px; color: var(--checkout-white)}
.checkout-address-item p
 {
    font-size: 14px !important;
    color: #bdc3c7 !important;
    margin-bottom: 0px;
    line-height: 22px !important;
    font-weight: 400 !important;
}
.checkout-address-actions { margin-top: 10px; }
.checkout-address-actions .checkout-btn { margin-right: 6px; font-size:0.75em; padding: 4px 8px; text-transform: uppercase;}
.checkout-btn-outline-light-alt { background-color:transparent; color: #bdc3c7; border-color: #787f8c; }
.checkout-btn-outline-light-alt:hover { background-color:#5a6676; color:var(--checkout-white); }

.checkout-delivery-selection-section { /* Light card for selection */ }
.checkout-option-buttons-group { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.checkout-option-buttons-group .checkout-btn { flex-grow: 1; background-color: var(--checkout-white); color: var(--checkout-text-color-primary); border-color: var(--checkout-border-color-strong); }
.checkout-option-buttons-group .checkout-btn.active { background-color: var(--checkout-primary-brand-light); color: var(--checkout-white); border-color: var(--checkout-primary-brand-light); font-weight: 600; }
.checkout-option-buttons-group .checkout-btn-action-dark { flex-grow:0; }

/* Fix for input group alignment on all screen sizes */
.checkout-page-wrapper #form-add-new-address .input-group {
    display: flex; /* Ensures children are in a row */
    width: 100%; /* Take full width of parent col */
}
.checkout-page-wrapper #form-add-new-address .input-group .input-group-text {
    /* Bootstrap handles most of this, ensure no custom style is overriding its flex behavior */
    /* flex-shrink: 0; /* Prevent span from shrinking too much */
    height: 100%; /* Match height of input */
}
.checkout-page-wrapper #form-add-new-address .input-group .form-control {
    flex-grow: 1; /* Allow input to take remaining space */
    min-width: 0; /* Important for flex items to shrink properly */
    height: 100%;
}


/* CHECKOUT STEP 4: REVIEW ORDER */
.checkout-review-sidebar { border-radius:4px !important; }
.checkout-review-main-content { }
.checkout-discount-coupons-card { background-color: #edf2fb; border-color: #d6e0f5; }
.checkout-coupon-options .form-check { margin-bottom: 6px; }

.checkout-summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9em; border-bottom: 1px dashed var(--checkout-border-color-soft); }
.checkout-summary-row:last-child { border-bottom: none; }
.checkout-summary-row.total { font-weight: 600; font-size: 1.05em; padding-top: 12px; margin-top:4px; color: var(--checkout-text-color-primary); border-top: 1px solid var(--checkout-border-color-strong); }
.checkout-summary-row.total span:last-child { color: var(--checkout-accent-color); font-size: 1.1em; }
.checkout-info-note {
    font-size: 0.8em; color: var(--checkout-text-color-secondary); margin-bottom: 10px;
    background-color: #fff9e7; padding: 10px 12px; border-radius: var(--checkout-border-radius-sm); border: 1px solid #fcecc5;
}
.checkout-info-note p { font-size: 1em !important; color: var(--checkout-text-color-secondary) !important; }

.checkout-printing-order-header { }
.checkout-printing-item { padding-top: 12px; border-bottom: 1px dashed var(--checkout-border-color-soft); margin-bottom:12px;}
.checkout-printing-item:last-child { border-bottom:none; margin-bottom:0;}
.checkout-printing-file-name { font-weight: 600; font-size: 1em; margin-bottom: 8px; }
.checkout-item-tags-container { margin-bottom: 4px;}
.checkout-item-tags span
 {
    display: inline-block;
    background-color: var(--checkout-disabled-bg-color);
    color: #3d4242;
    padding: 8px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    margin: 4px;
    border: 1px solid #34495e;
}

.checkout-btn svg, .checkout-page-wrapper .btn svg {
    vertical-align: middle;
}

/* Responsive Adjustments for Stepper and Panel Headers */

@media (max-width: 1023px) {
       .checkout-stepper-wrapper {
        padding: 15px 5px;
        justify-content: flex-start;
        display: flex;
        flex-direction: row;
        height: 16vh;
    }
.checkout-wizard-main-container-custom-styles{
display:flex;
flex-direction:column;
}
.checkout-panel-body{
padding-left:0px !important;
padding-right:0px !important;
}
.checkout-info-box{
 max-height: 500px; /* Adjust this based on your card height × 2 rows */
  overflow-y: auto;
}
}



@media (max-width: 767.98px) {
       .checkout-stepper-wrapper {
        padding: 15px 5px;
        justify-content: flex-start;
        display: flex;
        flex-direction: row;
        height: 16vh;
    }

    .checkout-stepper-item { min-width: 75px; }
    
    .checkout-step-counter { width: 30px; height: 30px; font-size: 0.9em; margin-bottom: 6px; }
    .checkout-step-name { font-size: 0.7em; max-width: 65px; }

    .checkout-panel-main-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .checkout-panel-main-header h2 { font-size: 1.3em; }
    .checkout-panel-main-header .checkout-header-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }
    .checkout-panel-main-header .checkout-header-actions button { margin-left: 0; flex-grow: 0; min-width: auto; padding: 5px 8px; font-size: 0.8em;}


    .checkout-wizard-content { padding: 15px 15px; }
    .checkout-panel-footer { justify-content: center; }
    .checkout-panel-footer .checkout-btn-prev { margin-bottom: 10px; width: 100%; }
    .checkout-panel-footer .checkout-btn-next, .checkout-panel-footer .checkout-btn-submit { width: 100%; margin-left:0 !important;}


    .checkout-delivery-address-section { padding: 15px; }
    .checkout-address-list .checkout-address-item { padding: 10px; }
    .checkout-address-item h4 { font-size: 0.95em; }
    .checkout-address-item p { font-size: 0.8em; }
    .checkout-address-actions .checkout-btn { font-size:0.7em; padding: 3px 6px; }


    .checkout-option-buttons-group { flex-direction: column; }
    .checkout-summary-row, .checkout-summary-row.total { font-size: 0.85em; }
    .checkout-summary-row.total span:last-child { font-size: 1em; }
    .checkout-printing-file-name { font-size: 0.95em; }
    .checkout-item-tags span { font-size: 0.7em; padding: 2px 6px; }

    .checkout-page-wrapper #form-add-new-address .row .col-md-6.mb-3 { /* Stack address form columns */
        flex: 0 0 100%;
        max-width: 100%;
    }

}

@media (max-width: 575.98px) {
     .checkout-panel-main-header h2 { font-size: 1.2em; }
     .checkout-settings-grid { grid-template-columns: 1fr; }
     .checkout-file-filter-container { max-width: 100%; }

     .checkout-wizard-content { padding: 15px 10px; }
     .checkout-upload-drop-area { padding: 20px 10px; }
     .checkout-upload-drop-area h3 { font-size: 1.1em;}

    .checkout-panel-main-header .checkout-header-actions button {
        min-width: calc(50% - 5px); 
        font-size: 0.75em; 
    }
     .checkout-panel-main-header .checkout-header-actions button:nth-child(3){ 
        min-width:100%;
    }
    .checkout-stepper-item {
        min-width: 60px; /* Even smaller min-width for very small screens */
    }
    .checkout-step-name {
        font-size: 0.65em; /* Smaller text for step names */
        max-width: 55px;
    }

}




/* ======================================================== */
/* == Styles for the NEW Customer Review Swiper (v3) == */
/* ======================================================== */

/* Main swiper container. Padding is adjusted for arrows */
.customer-review-swiper {
    position: relative;
    padding: 10px 40px; /* Add horizontal padding so arrows don't overlap cards */
}

.customer-review-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.testimonial-card-new {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-image {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
}

.author-details {
    line-height: 1.2;
}

.author-name {
    font-weight: 600;
    color: #222;
    line-height: 16px !important;
    text-align: left;
    font-size: 16px;
    margin: 0;
}

.author-title {
    font-size: 13px;
  	line-height: 24px !important;
  	text-align: left;
    color: #777;
    margin: 0;
}

.testimonial-body {
    flex-grow: 1;
    margin: 20px 0;
}

.testimonial-quote {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.testimonial-rating .fa-star {
    color: #fdd835;
    font-size: 14px;
}

.review-date {
    font-size: 12px;
    color: #888;
}
/* --- NEW: Swiper Navigation Arrow Styling --- */
.customer-review-swiper .swiper-button-prev,
.customer-review-swiper .swiper-button-next {
    color: #A51C30; /* White arrow icon */
    background-color: #fff; /* Your brand red */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.customer-review-swiper .swiper-button-prev:hover,
.customer-review-swiper .swiper-button-next:hover {
    background-color: #A51C30; /* A darker shade on hover */
    color: #fff; /* White arrow icon */
}

/* Adjust arrow icon size */
.customer-review-swiper .swiper-button-prev::after,
.customer-review-swiper .swiper-button-next::after {
    font-size: 18px;
    font-weight: bold;
}

/* Position arrows outside the cards */
.customer-review-swiper .swiper-button-prev {
    left: 0;
}
.customer-review-swiper .swiper-button-next {
    right: 0;
}

.home-section-review{
    background-image: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%) !important;
}
.home-section-review .customer-review-swiper .swiper-slide, .customer-review-swiper {
    background-image: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%) !important;
}
.customer-review-swiper {
    background-color: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%) !important;
}


 /* ======================================================== */
/* ==         Styles for the Print & Buy Section         == */
/* ======================================================== */

/* A responsive grid for the columns */
.print-buy-grid {
    display: grid;
    /* On desktops, create three equal columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Space between the columns */
}

/* Styling for the first two boxes */
.print-buy-card {
    background-color: #f8f9fa; /* Light grey background */
    border: 1px solid #e9ecef; /* Subtle border */
    border-radius: 8px;
    padding: 30px;
}

/* The third column which has no card background */
.print-buy-info {
    padding: 30px;
}

/* Common styling for all three column titles */
.print-buy-title {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #A51C30; /* Dark navy blue from the image */
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 20px;
    margin-top: 0;
}

/* The blue underline effect */
.print-buy-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #A51C30; /* Same dark navy blue */
}

/* Styling for the descriptive text */
.print-buy-description {
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

/* Styling for the checkmark lists */
.print-buy-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

.print-buy-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px; /* Space between checkmark and text */
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* The checkmark icon itself */
.print-buy-list .fa-check-circle {
    color: #A51C30; /* Dark navy blue */
    margin-top: 4px; /* Aligns icon nicely with text */
}

/* Link styling */
.print-buy-grid a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 500;
}

.print-buy-grid a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    /* On tablets and below, stack the columns */
    .print-buy-grid {
        grid-template-columns: 1fr;
    }
}




/* ============================================================
       Unique CSS for the "Printing Order" Review Section
============================================================*/

/* 1. Main Scrollable Container
-------------------------------------------------- */
.printing-items-scroll-container {
  /* This creates the scrollable area */
  max-height: 400px; /* Adjust this value to fit your layout */
  overflow-y: auto;
  
  /* Adds a bit of space on the right so the scrollbar doesn't overlap content */
  padding-right: 10px; 
}

/* 2. Individual Printing Item Card
-------------------------------------------------- */
.printing-items-scroll-container .checkout-printing-item {
  background-color: #ffffff;
  border: 1px solid #e9ecef; /* A light, soft border */
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px; /* Space between cards */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
  transition: box-shadow 0.3s ease;
}

/* Adds a hover effect to the cards */
.printing-items-scroll-container .checkout-printing-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Removes the bottom margin from the very last card in the list */
.printing-items-scroll-container .checkout-printing-item:last-child {
  margin-bottom: 5px; /* A little padding at the very end */
}

/* 3. Filename Title inside the Card
-------------------------------------------------- */
.printing-items-scroll-container .review-order-filename {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem; /* 17-18px */
  font-weight: 600;
  color: #34495e; /* Dark blue-gray for titles */
  margin-top: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
}

/* 4. Container for all the specification tags
-------------------------------------------------- */
.printing-items-scroll-container .review-order-tags-container {
  display: flex;
  flex-wrap: wrap; /* Allows tags to wrap onto the next line */
  gap: 10px; /* The space between each tag, both horizontally and vertically */
}

/* 5. Individual Specification Tag
-------------------------------------------------- */
.printing-items-scroll-container .review-order-tag {
  background-color: #f8f9fa; /* Very light gray background */
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.8rem; /* 12-13px */
  font-weight: 500;
  color: #495057; /* Dark gray text */
  line-height: 1.5;
  white-space: nowrap; /* Prevents tags from breaking into two lines */
}

/* The highlighted value part inside a tag */
.printing-items-scroll-container .review-order-tag .value {
  font-weight: 700;
  color: #f39c12; /* Orange color for emphasis, matching the source image */
}

/* The special "Thesis Print" or "Document Print" tag */
.printing-items-scroll-container .review-order-tag.special {
  background-color: #27ae60; /* A pleasant green color */
  border-color: #27ae60;
  color: #ffffff; /* White text for contrast */
  font-weight: 700;
}

/* 6. Custom Scrollbar Styling (Optional but recommended)
-------------------------------------------------- */

/* For Webkit browsers like Chrome, Safari, Edge */
.printing-items-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.printing-items-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.printing-items-scroll-container::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 10px;
}

.printing-items-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}














.home-slider__slide { height: 70vh !important; } /* 1450px - 1250px */ @media (max-width: 1450px) and (min-width: 1251px) { .home-slider__slide { height: 65vh !important; } } /* 1250px - 1121px */ @media (max-width: 1250px) and (min-width: 1121px) { .home-slider__slide { height: 35vh !important; } } /* 1120px - 901px */ @media (max-width: 1120px) and (min-width: 901px) { .home-slider__slide { height: 30vh !important; } } /* 900px - 769px */ @media (max-width: 900px) and (min-width: 769px) { .home-slider__slide { height: 28vh !important; } } /* 768px - 501px */ @media (max-width: 768px) and (min-width: 501px) { .home-slider__slide { height: 23vh !important; } } /* 500px - 401px */ @media (max-width: 500px) and (min-width: 401px) { .home-slider__slide { height: 18vh !important; } } /* 400px - 301px */ @media (max-width: 400px) and (min-width: 301px) { .home-slider__slide { height: 20vh !important; } }