/*
Theme Name: Azaleaco Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.nav>li>a {
    font-size: 15px !important;
}
.banner-textgreen h2{
	line-height: 64px;
	letter-spacing: 0px;
    word-spacing: 3px !important;
}

/* =========================================
   FULL WIDTH HEADER SPACING (BALANCED)
========================================= */

.header-full-width .container {
    max-width: 100% !important;
    padding-left: 200px !important;  /* Adjust this number if you want more/less space */
    padding-right: 200px !important; /* Make sure this matches the left side! */
}

/* Mobile & Tablet Fix: Prevents the menu from getting squished on small screens */
@media screen and (max-width: 849px) {
    .header-full-width .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================
   HOME BANNER / GRID ALIGNMENT (BALANCED)
========================================= */

/* 1. Add matching side spacing to your custom row class */
.home-slider-align {
    max-width: 100% !important;
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Give the background banner sections clean, slightly rounded corners */
.home-slider-align .section {
    border-radius: 8px !important; /* Gives it a premium, modern layout finish */
    overflow: hidden !important;
}

/* 3. Mobile & Tablet Responsiveness: Matches header/footer behavior */
@media screen and (max-width: 849px) {
    .home-slider-align {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================
   FINAL CATEGORY SLIDER & ARROW CLEANUP
========================================= */

/* 1. Keep the main container aligned with your header menu */
.home-category-slider {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 163px !important;  /* Matches your header/banners perfectly */
    padding-right: 163px !important; /* Matches your header/banners perfectly */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. KILL THE BARS: Completely wipe out Flatsome's vertical block panels */
.home-category-slider .flickity-prev-next-button {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    height: 50px !important; /* Forces the box to be small, NOT a full-height bar */
    width: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 3. Extra safeguard to make sure no hidden backgrounds show up */
.home-category-slider .flickity-prev-next-button::before,
.home-category-slider .flickity-prev-next-button::after {
    display: none !important;
    background: transparent !important;
}

/* 4. POSITION ARROWS: Place them neatly right next to the category cards */
.home-category-slider .flickity-prev-next-button.previous {
    left: 100px !important; /* Tucks the arrow cleanly into the left gap near the card */
}

.home-category-slider .flickity-prev-next-button.next {
    right: 100px !important; /* Tucks the arrow cleanly into the right gap near the card */
}

/* 5. ARROW ICON STYLE: Make the raw arrow icons crisp and dark */
.home-category-slider .flickity-prev-next-button svg {
    width: 50px !important;
    height: 50px !important;
    fill: #333333 !important; /* Sharp, professional grey/black arrow */
    transition: transform 0.2s ease !important;
}

/* Subtle arrow nudge on hover */
.home-category-slider .flickity-prev-next-button.previous:hover svg {
    transform: scale(1.2) translateX(-2px);
}
.home-category-slider .flickity-prev-next-button.next:hover svg {
    transform: scale(1.2) translateX(2px);
}

/* 6. Mobile Spacing Fix */
@media screen and (max-width: 849px) {
    .home-category-slider {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .home-category-slider .flickity-prev-next-button.previous { left: 5px !important; }
    .home-category-slider .flickity-prev-next-button.next { right: 5px !important; }
}

/* The hover state for your specific SVG setup */
.home-category-slider .flickity-prev-next-button:hover svg {
    /* Keeps or slightly adjusts your positioning on hover */
    left: 0% !important;
    top: 5% !important;
    
    /* CHOOSE YOUR HOVER EFFECT BELOW: */
    fill: #000000 !important;        /* Changes the arrow color (e.g., to black or your primary brand color) */
    transform: scale(1.15) !important; /* Makes the arrow icon grow slightly bigger for a premium feel */
    opacity: 1 !important;            /* Ensures it is fully bright when hovered */
}

/* SMOOTH TRANSITION: Add this to make the hover effect look soft instead of snapping instantly */
.home-category-slider .flickity-prev-next-button svg {
    transition: all 0.2s ease-in-out !important;
}
.title-white-heading h5{
	color: #ffffff !important;
}
.title-white-heading .has-icon-bg .icon img{
	    transform: translate(-8px, -50%) !important;
	    width: 80% !important;
}
/* =========================================
   FEATURED HOME PAGE GRID RECOVERY & IMAGE FIX
========================================= */

/* 1. Target ONLY the outer row container (ignores the individual product boxes) */
div.row.home-full-featured {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 186px !important;
    padding-right: 186px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Absolute safety shield: resets the product boxes so they stay wide open */
.product-small.box.home-full-featured {
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Mobile Responsiveness: Scales down side-spacing on phone screens */
@media screen and (max-width: 849px) {
    div.row.home-full-featured {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================
   Home WHOLESALE CALL-TO-ACTION ALIGNMENT
========================================= */

/* 1. Pull the content inward to match the header, slider, and grid layout */
.home-request-btn {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 180px !important;  /* Matches your design layout perfectly */
    padding-right: 180px !important; /* Keep left and right numbers identical */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Responsive adjustment for mobile screens */
@media screen and (max-width: 849px) {
    .home-request-btn {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

#section_1064862239,
.bottom-quote-space-remove {
    padding-bottom: 0px !important;
}



/* =========================================
   FULL WIDTH FOOTER ALIGNMENT (180px Layout)
========================================= */

.footer-widgets.footer-2 {
    padding-left: 180px !important;  /* Forced with !important to override defaults */
    padding-right: 180px !important; /* Keeps your exact 180px spacing on desktop */
}

/* Tablet Responsive Screen Sizes */
@media screen and (max-width: 1199px) {
    .footer-widgets.footer-2 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Mobile Phone Responsive Screen Sizes */
@media screen and (max-width: 767px) {
    .footer-widgets.footer-2 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =========================================
   HOME COMPLETE HEADER MENU & SEARCH FIX
========================================= */

/* 1. Force the main navigation bar onto a single vertical centerline */
ul.header-nav.header-nav-main {
    display: flex !important;
    align-items: center !important;       /* Centers everything perfectly down the middle */
    flex-direction: row !important;
    flex-wrap: nowrap !important;         /* Prevents any elements from wrapping downward */
}

/* 2. ANTI-SQUISH: Protect text blocks from collapsing into 2 lines */
ul.header-nav.header-nav-main > li {
    flex-shrink: 0 !important;           /* Stops the search bar from shrinking the text */
    white-space: nowrap !important;       /* Forces "ABOUT US" and "CONTACT US" to stay on 1 line */
}

/* 3. Lock Text and Dropdown Arrows side-by-side */
ul.header-nav.header-nav-main > li > a.nav-top-link {
    display: flex !important;
    align-items: center !important;       /* Centers the text and arrow vertically */
    flex-direction: row !important;       /* Forces arrow to stay to the right of text */
    white-space: nowrap !important;
}

/* 4. Fix the dropdown arrow position next to "PRODUCTS" */
ul.header-nav.header-nav-main .icon-angle-down {
    margin-left: 6px !important;          /* Elegant gap after the word */
    margin-top: 0 !important;
    top: 0 !important;
    position: relative !important;
    display: inline-block !important;
}

/* 5. Clean up search box spacing and anchor it cleanly */
ul.header-nav.header-nav-main li.header-search-form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 30px !important;         /* Creates a modern spacer gap after 'CONTACT US' */
}

/* =========================================
   PUSH SEARCH BOX TO THE FAR RIGHT SIDE
========================================= */

/* 1. Tell the main menu container to distribute items across the full header width */
ul.header-nav.header-nav-main {
    width: 100% !important;
    justify-content: flex-end !important; /* Keeps links nicely grouped together on the right side */
}

/* 2. PUSH EFFECT: Forces the search box item to slide to the absolute right edge */
ul.header-nav.header-nav-main li.header-search-form {
    margin-left: auto !important;          /* Automatically absorbs empty space to push it right */
    display: inline-flex !important;
    justify-content: flex-end !important;  /* Aligns inner elements to the right edge */
    padding-left: 40px !important;         /* Main padding separator from 'CONTACT US' */
}

/* 3. Make sure the inner search form wrapper aligns flush right */
li.header-search-form .header-search-form-wrapper {
    margin-left: auto !important;          /* Eliminates any leftover trailing right-side space */
    width: 100% !important;
}

/* =========================================
   1. VERTICAL CENTERING & NAVIGATION ROW
========================================= */
ul.header-nav.header-nav-main {
    display: flex !important;
    align-items: center !important;       /* Aligns links and search cleanly down the middle */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    width: auto !important;
}

ul.header-nav.header-nav-main > li {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Keep link text and dropdown arrows unified */
ul.header-nav.header-nav-main > li > a.nav-top-link {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Lock dropdown arrow positions cleanly */
ul.header-nav.header-nav-main .icon-angle-down {
    margin-left: 4px !important;
    top: 0 !important;
    position: relative !important;
}

/* =========================================
   2. REPAIR SEARCH BAR SPLITTING (SOLID UNIT)
========================================= */
ul.header-nav.header-nav-main li.header-search-form {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 0 0 25px !important;        /* Fixed elegant gap after 'CONTACT US' */
    padding: 0 !important;
    width: 290px !important;               /* Locks total structural width so it NEVER splits */
}

/* Force inner form wrappers to stay packed together tightly */
li.header-search-form .header-search-form-wrapper,
li.header-search-form .searchform-wrapper,
li.header-search-form .searchform,
li.header-search-form .flex-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Allow the search field to expand fully within its locked container */
li.header-search-form .search-field {
    width: 100% !important;
    max-width: 100% !important;            /* Eliminates the empty gap and split arrow */
}

/* =========================================
   3. LAPTOP OVERLAP SHIELD (Screens under 1400px)
========================================= */
@media screen and (max-width: 1400px) {
    
    /* 1. Pull the menu links closer together */
    ul.header-nav.header-nav-main {
        gap: 8px !important;               /* Shrinks whitespace gaps between options */
    }
    
    ul.header-nav.header-nav-main > li > a.nav-top-link {
        font-size: 15px !important;        /* Scales text size down to fit laptop screens */
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* 2. Scale down the entire search unit to save valuable real estate */
    ul.header-nav.header-nav-main li.header-search-form {
        width: 190px !important;           /* Gives 100px back to the menu so it clears the logo */
        margin-left: 12px !important;
    }
    
    li.header-search-form .search-field,
    li.header-search-form .search_categories {
        font-size: 12px !important;
    }
}
/* =========================================
   FEATURED ICON BOX HOVER COLOR FIX
========================================= */

/* 1. Override the full-box hover state so it turns Blue instead of White */
.icon-box.featured-box.title-white-heading:hover .icon-inner,
.icon-box.featured-box.title-white-heading:hover .icon,
.title-white-heading .has-icon-bg:hover .icon-inner {
   
    border-color: #0056b3 !important;     /* Keeps the border ring matching your blue background */
}

/* 2. Protect the icon image itself so it stays fully visible on hover */
.icon-box.featured-box.title-white-heading:hover .icon-inner img {
    opacity: 1 !important;
    background-color: transparent !important; /* Prevents the image frame from box-flashing */
}

/* 3. Add a smooth transition so the color shift feels high-end and luxurious */
.title-white-heading .icon-inner,
.title-white-heading .icon-inner img {
    transition: all 0.3s ease-in-out !important;
}

.title-white-heading .has-icon-bg .icon .icon-inner {
    border-color: #ffffff !important;
}

/* =========================================
   FIX PRODUCTS DROPDOWN VERTICAL POSITION
========================================= */

/* 1. Push the dropdown panel down below the white header line */
ul.header-nav.header-nav-main .nav-dropdown {
    top: 100% !important;              /* Anchors it safely to the bottom of the link */
    margin-top: 18px !important;       /* Adjust this pixel value to push it up or down perfectly */
}

/* 2. Safety shield: Ensure the dropdown sits on top of any background elements */
ul.header-nav.header-nav-main .nav-dropdown-bold {
    z-index: 9999 !important;          /* Prevents it from clipping underneath sections */
}

/* =========================================
   MOVE SUB-HEADING UPWARD CLOSER TO TOP
========================================= */

.homesub-heading {
    margin-top: -14px !important;  /* Increasing this negative number pulls it higher */
    position: relative !important;
    z-index: 9 !important;         /* Ensures it stays visible if it moves over a background edge */
}

/* =========================================
   DYNAMIC RESPONSIVE CATEGORY GRID
========================================= */

/* 1. Giant Monitors & Large Desktops (1400px and up) */
@media screen and (min-width: 1400px) {
    div.row.category-page-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 180px !important;
        padding-right: 5px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 2. Laptops & MacBooks (1025px to 1399px)
   Uses Fluid Percentages to dynamically adapt to any laptop size */
@media screen and (min-width: 1025px) and (max-width: 1399px) {
    div.row.category-page-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 13% !important;   /* Adjusts automatically based on laptop width */
        padding-right: 13% !important;  
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 3. Tablets & iPads (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    div.row.category-page-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 4. Mobile Phones (767px and below) */
@media screen and (max-width: 767px) {
    div.row.category-page-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================
   FORCE SINGLE PRODUCT ROW TO FULL WIDTH
========================================= */

/* 1. Giant Monitors & Large Desktops (1400px and up) */
@media screen and (min-width: 1400px) {
    body.single-product div.row.content-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 177px !important;
        padding-right: 177px !important;
    }
}

/* 2. Laptops & MacBooks (1025px to 1399px) - Fluid Spacing */
@media screen and (min-width: 1025px) and (max-width: 1399px) {
    body.single-product div.row.content-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 14% !important;   
        padding-right: 14% !important;  
    }
}

/* 3. Tablets & iPads (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body.single-product div.row.content-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* 4. Mobile Phones (767px and below) */
@media screen and (max-width: 767px) {
    body.single-product div.row.content-row {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


/* =========================================
   SINGLE PRODUCT FOOTER & TABS ALIGNMENT
========================================= */

/* 1. Giant Monitors & Large Desktops (1400px and up) */
@media screen and (min-width: 1400px) {
    body.single-product .product-footer .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 180px !important;
        padding-right: 180px !important;
    }
}

/* 2. Laptops & MacBooks (1025px to 1399px) - Fluid Spacing */
@media screen and (min-width: 1025px) and (max-width: 1399px) {
    body.single-product .product-footer .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 14% !important;   
        padding-right: 14% !important;  
    }
}

/* 3. Tablets & iPads (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body.single-product .product-footer .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* 4. Mobile Phones (767px and below) */
@media screen and (max-width: 767px) {
    body.single-product .product-footer .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* =========================================
   PREMIUM WOOCOMMERCE CATEGORY SIDEBAR
   (Safely locked to #shop-sidebar only)
========================================= */

/* 1. Main Category Items: Spacing & Clean Dividers */
#shop-sidebar ul.product-categories > li.cat-item {
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f1f1 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* Remove border from the very last item so it looks clean */
#shop-sidebar ul.product-categories > li.cat-item:last-child {
    border-bottom: none !important;
}

/* 2. Main Category Links: Bold & Hover Animations */
#shop-sidebar ul.product-categories li.cat-item > a {
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease-in-out !important;
    display: inline-block !important;
}

/* The Hover "Slide" Effect */
#shop-sidebar ul.product-categories li.cat-item > a:hover {
    color: #0056b3 !important;            /* CHANGE THIS to your brand blue/purple */
    transform: translateX(6px) !important; /* Slides the text slightly to the right */
}

/* 3. Product Count Numbers: Styled as Modern Badges */
#shop-sidebar ul.product-categories li.cat-item .count {
    background-color: #f5f5f5 !important;
    color: #888888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;       /* Creates the pill/badge shape */
    margin-left: 8px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

/* Make the badge light up when the category is hovered */
#shop-sidebar ul.product-categories li.cat-item:hover > .count {
    background-color: #0056b3 !important; /* CHANGE THIS to your brand color */
    color: #ffffff !important;
}

/* =========================================
   SUB-CATEGORIES (Children Layout)
========================================= */

/* 4. Indent and style the sub-menu items */
#shop-sidebar ul.product-categories ul.children {
    margin-top: 10px !important;
    padding-left: 15px !important;
    border-left: 2px solid #eaeaea !important; /* Subtle line to show it's a sub-menu */
    margin-bottom: 0 !important;
}

#shop-sidebar ul.product-categories ul.children li.cat-item {
    padding: 8px 0 !important;
    border-bottom: none !important;       /* Removes heavy lines from sub-items */
}

/* Make sub-category text slightly smaller and lighter */
#shop-sidebar ul.product-categories ul.children li.cat-item > a {
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #555555 !important;
}

/* =========================================
   DROPDOWN TOGGLE BUTTON ARROWS
========================================= */
#shop-sidebar ul.product-categories li.cat-parent .toggle {
    position: absolute !important;
    right: 0 !important;
    top: 10px !important;
    background: transparent !important;
    border: none !important;
    color: #999999 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

#shop-sidebar ul.product-categories li.cat-parent .toggle:hover {
    color: #0056b3 !important;            /* CHANGE THIS to your brand color */
}

/* =========================================
   FIX OVERLAPPING & JUMPING BADGES/ARROWS
========================================= */

/* 1. Master Badge Position (Pinned to the top text line) */
#shop-sidebar ul.product-categories li.cat-item > .count {
    position: absolute !important;
    right: 0 !important;                  
    top: 12px !important;                 /* Locks badge to the parent word, ignores dropdown height */
    transform: none !important;           /* Removes the 50% vertical shifting math */
    
    /* Pill Styles */
    background-color: #f5f5f5 !important;
    color: #888888 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

/* 2. Toggle Arrow Position (Pinned to the top text line) */
#shop-sidebar ul.product-categories li.cat-parent > .toggle {
    position: absolute !important;
    right: 0 !important;
    top: 6px !important;                  /* Locks arrow to the parent word */
    transform: none !important;           /* Removes the 50% vertical shifting math */
    
    background: transparent !important;
    border: none !important;
    color: #999999 !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding: 5px !important;
    transition: all 0.3s ease !important;
}

/* 3. THE SHIELD: Move the badge out of the way ONLY if an arrow exists */
#shop-sidebar ul.product-categories li.cat-parent > .count {
    right: 32px !important;               /* Keeps badge left of the arrow */
}

#shop-sidebar ul.product-categories ul.children li.cat-item {
    position: relative !important;
}

/* 4. Sub-Category Badge Alignment (Accounts for tighter spacing in sub-menus) */
#shop-sidebar ul.product-categories ul.children li.cat-item > .count {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 0 !important;
}

/* =========================================
   HIDE SUB-CATEGORIES IN THE FOOTER WIDGET
========================================= */

/* 1. Force all sub-category dropdowns in the footer to stay hidden */
.footer-widgets .widget_product_categories ul.children {
    display: none !important;
}

/* 2. Hide the dropdown toggle arrows in the footer so people don't try to click them */
.footer-widgets .widget_product_categories .toggle {
    display: none !important;
}

/* 3. Ensure the main links still look normal even when active */
.footer-widgets .widget_product_categories li.cat-item.active > a {
    font-weight: normal !important;
}


/* =========================================
   HOME SLIDER ALIGNMENT (Mobile Devices)
========================================= */

@media screen and (max-width: 767px) {
    .home-slider-align {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}