/* 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: #fff !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; color: #458e63 !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; width: auto !important; text-transform: uppercase !important; } /* The Hover "Slide" Effect */ #shop-sidebar ul.product-categories li.cat-item > a:hover { color: #5c2873 !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 { 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 { color: #555555 !important; } #shop-sidebar ul.product-categories li.cat-item { display: block !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 { display: inline-block !important; width: auto !important; vertical-align: middle !important; 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 { float: none !important; position: static !important; display: inline-block !important; margin-left: 6px !important; right: auto !important; top: 12px !important; /* Locks badge to the parent word, ignores dropdown height */ transform: none !important; /* Removes the 50% vertical shifting math */ color: #888888 !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: 20px !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 { display: block !important; position: relative !important; padding-top: 5px !important; padding-bottom: 5px !important; } /* 4. Sub-Category Badge Alignment (Accounts for tighter spacing in sub-menus) */ #shop-sidebar ul.product-categories ul.children li.cat-item > .count { float: none !important; position: static !important; display: inline-block !important; margin-left: 6px !important; right: auto !important; top: auto !important; vertical-align: middle !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; } } /* ========================================= FORCE ABOUT US ROW TO CUSTOM FULL WIDTH ========================================= */ /* 1. Giant Monitors & Large Desktops (1400px and up) */ @media screen and (min-width: 1400px) { div.row.aboutus-fullwidth { max-width: 100% !important; width: 100% !important; padding-left: 180px !important; padding-right: 180px !important; margin-left: auto !important; margin-right: auto !important; } } /* 2. Laptops & MacBooks (1025px to 1399px) - Fluid Spacing */ @media screen and (min-width: 1025px) and (max-width: 1399px) { div.row.aboutus-fullwidth { max-width: 100% !important; width: 100% !important; padding-left: 12% !important; padding-right: 12% !important; margin-left: auto !important; margin-right: auto !important; } } /* 3. Tablets & iPads (768px to 1024px) - Balanced for Smaller Screens */ @media screen and (min-width: 768px) and (max-width: 1024px) { div.row.aboutus-fullwidth { max-width: 100% !important; width: 100% !important; padding-left: 40px !important; padding-right: 20px !important; margin-left: auto !important; margin-right: auto !important; } } /* 4. Mobile Phones (767px and below) - Full Width Grid Reset */ @media screen and (max-width: 767px) { div.row.aboutus-fullwidth { max-width: 100% !important; width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; margin-left: auto !important; margin-right: auto !important; } } /*******************************************************************/ /* 1. Giant Monitors & Large Desktops (1400px and up) */ @media screen and (min-width: 1400px) { div.row.aboutus-fullwidthtwo { max-width: 100% !important; width: 100% !important; padding-left: 180px !important; padding-right: 180px !important; margin-left: auto !important; margin-right: auto !important; } } /* 2. Laptops & MacBooks (1025px to 1399px) - Fluid Spacing */ @media screen and (min-width: 1025px) and (max-width: 1399px) { div.row.aboutus-fullwidthtwo { max-width: 100% !important; width: 100% !important; padding-left: 12% !important; padding-right: 12% !important; margin-left: auto !important; margin-right: auto !important; } } /* 3. Tablets & iPads (768px to 1024px) - Balanced for Smaller Screens */ @media screen and (min-width: 768px) and (max-width: 1024px) { div.row.aboutus-fullwidthtwo { max-width: 100% !important; width: 100% !important; padding-left: 40px !important; padding-right: 20px !important; margin-left: auto !important; margin-right: auto !important; } } /* 4. Mobile Phones (767px and below) - Full Width Grid Reset */ @media screen and (max-width: 767px) { div.row.aboutus-fullwidthtwo { max-width: 100% !important; width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; margin-left: auto !important; margin-right: auto !important; } } .aboutus-fullwidth p{ text-align: justify; } .aboutus-fullwidthtwo p{ text-align: justify; } /* 1. Main Banner Container - Adds space and depth */ .toptextalign { background: linear-gradient(135deg, #458e63 0%, #2f6a47 100%) !important; /* Richer, premium green gradient */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* Subtle shadow for depth */ } .toptextalign h2 { font-size: 2rem !important; /* Significantly larger text */ letter-spacing: 2.5px !important; /* Professional spacing between letters */ word-spacing: 5px !important; /* Adds professional spacing between words */ font-weight: 700 !important; /* Keeps it bold */ text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15) !important; /* Makes the white text pop */ margin-bottom: 0 !important; } @media screen and (max-width: 767px) { .toptextalign h2 { font-size: 1.6rem !important; /* Scales down safely for small screens */ letter-spacing: 1.5px !important; } } @media screen and (min-width: 1400px) { body.tax-product_cat div.products.row { margin-left: 20px !important; } } /*@media screen and (max-width: 1024px) { .products .product-small .box-text p.category.no-text-overflow { display: inline-block !important; white-space: normal !important; overflow: visible !important; max-width: 100% !important; line-height: 1.4 !important; height: auto !important; padding: 6px 9px !important; font-size: 9px !important; letter-spacing: 0px !important; text-align: center !important; } }*/ .back-to-top.icon { margin-bottom: 4rem !important; } /* ========================================= AUTO-FIT & PAD PRODUCT IMAGES ========================================= */ /* Target the images in your product grid */ .products .product-small .box-image img { width: 100% !important; /* Keeps the width uniform */ object-fit: contain !important; /* Prevents stretching and cropping */ padding: 5px !important; /* Creates 25px of "Photoshop" white space around the product */ background-color: #ffffff !important; /* Fills that padding with white */ } /* Apply the same logic to the single product page main image */ .woocommerce-product-gallery__image img { object-fit: contain !important; padding: 30px !important; background-color: #ffffff !important; } @media screen and (min-width: 1025px) and (max-width: 1399px) { .products .product-small .box-text .category, .products .product-small .box-text p.category.no-text-overflow { display: inline-block !important; white-space: normal !important; overflow: visible !important; max-width: 100% !important; line-height: 1.4 !important; height: auto !important; /* Forces padding inside the width & breaks long words */ box-sizing: border-box !important; word-wrap: break-word !important; /* Your custom small laptop styles */ padding: 6px 9px !important; font-size: 9px !important; letter-spacing: 0px !important; text-align: center !important; } } /*************************************/ /* ======================================================== ACCESSIBILITY CONTRAST FIX FOR YOUR TRUST HEADING ======================================================== */ /* Ensure the main title text handles the new spacing perfectly */ .your_trust_heading .section-title-main { display: inline-block !important; line-height: 1.4 !important; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important; /* Subtle text depth for better readability */ } .top-bar-nav ul li a{ text-transform: lowercase !important; font-weight: 600 !important; padding: 0px 2px !important; } .top-bar-nav li a i { font-size: 14px !important; } @media screen and (min-width: 1400px) { .Breadcrumb-bgcolors .container{ max-width: 100% !important; padding-left: 200px !important; padding-right: 200px !important; } .category-page-title .page-title-inner{ max-width: 100% !important; padding-left: 200px !important; padding-right: 200px !important; } } @media screen and (min-width: 1025px) and (max-width: 1399px) { .Breadcrumb-bgcolors .container{ max-width: 100% !important; width: 100% !important; padding-left: 15% !important; padding-right: 15% !important; } .category-page-title .page-title-inner{ max-width: 100% !important; padding-left: 200px !important; padding-right: 200px !important; } } /* --- Move Shop Breadcrumbs to Right Side ONLY on Product Archive Pages --- */ .woocommerce-shop .page-title-inner, .tax-product_cat .page-title-inner { position: relative !important; } .woocommerce-shop .page-title-inner .breadcrumbs, .tax-product_cat .page-title-inner .breadcrumbs { position: absolute !important; right: 202px !important; /* Align to the far right edge */ left: auto !important; top: 50% !important; /* Drop down to the middle axis */ transform: translateY(-50%) !important; /* Perfect vertical centering alignment */ margin: 0 !important; } .breadcrumbs .divider, .breadcrumbs .separator{ color: #ffffff !important; } @media screen and (min-width: 1400px) { .product-page-title .page-title-inner { max-width: 100% !important; padding-left: 200px !important; padding-right: 200px !important; padding-top: 0px !important; } } @media screen and (min-width: 1025px) and (max-width: 1399px) { .product-page-title .page-title-inner { max-width: 100% !important; padding-left: 200px !important; padding-right: 200px !important; } } /* Hide unused navigation boxes from the main My Account central screen dashboard view */ .woocommerce-MyAccount-content a[href*="orders"], .woocommerce-MyAccount-content a[href*="edit-address"] { display: none !important; } /* ======================================================== MODERN & VISIBLE B2B LOGOUT NOTICE BANNER ======================================================== */ /* 1. Style the main notice box container */ .woocommerce-message.message-wrapper { background-color: #fbf9fe !important; /* Soft brand-purple tint */ border: 1px solid #eadef7 !important; /* Clean outer border */ border-left: 5px solid #5c2d91 !important; /* Thick brand purple accent bar */ border-radius: 8px !important; padding: 18px 24px !important; box-shadow: 0 4px 12px rgba(92, 45, 145, 0.05) !important; /* Premium subtle drop shadow */ margin-top: 15px !important; margin-bottom: 25px !important; } /* 2. Format the message container text */ .woocommerce-message .message-container { color: #2b2b2b !important; font-size: 15px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; } /* 3. Style the checkmark icon */ .woocommerce-message .icon-checkmark { color: #5c2d91 !important; font-size: 18px !important; margin-right: 4px !important; } /* 4. Turn the plain link into a prominent call-to-action button */ .woocommerce-message .message-container a { background-color: #5c2d91 !important; /* Brand Purple */ color: #ffffff !important; padding: 8px 18px !important; border-radius: 5px !important; text-decoration: none !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: inline-block !important; box-shadow: 0 2px 6px rgba(92, 45, 145, 0.2) !important; transition: all 0.2s ease-in-out !important; } /* 5. Add a smooth hover effect to the logout button */ .woocommerce-message .message-container a:hover { background-color: #472070 !important; /* Deep luxury purple on hover */ color: #ffffff !important; box-shadow: 0 4px 10px rgba(92, 45, 145, 0.35) !important; transform: translateY(-1px) !important; } /* ======================================================== FIXED B2B LOGIN PORTAL (PERFECT BUTTON ALIGNMENT) ======================================================== */ /* 1. White Login Card Frame */ .account-login-inner { background: #ffffff !important; border: 1px solid #e9e9e9 !important; border-radius: 10px !important; padding: 40px 35px !important; max-width: 460px !important; margin: 40px auto !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important; } /* 2. Form Title */ .account-login-inner h2.uppercase.h3 { color: #2b3d51 !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; margin-bottom: 28px !important; text-align: center !important; } /* 3. Inputs & Labels Layout */ .woocommerce-form-login .form-row-wide { margin-bottom: 22px !important; } .woocommerce-form-login label { display: block !important; color: #444444 !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 8px !important; } .woocommerce-form-login .input-text { width: 100% !important; padding: 12px 16px !important; font-size: 15px !important; background-color: #fafafa !important; border: 1px solid #dddddd !important; border-radius: 6px !important; color: #222222 !important; transition: all 0.2s ease !important; } .woocommerce-form-login .input-text:focus { background-color: #ffffff !important; border-color: #5c2d91 !important; box-shadow: 0 0 0 3px rgba(92, 45, 145, 0.1) !important; outline: none !important; } /* Password Eye Icon Alignment */ .woocommerce-form-login .password-input { display: block !important; position: relative !important; width: 100% !important; } /* 4. Fix the flex wrapper row holding the checkbox and buttons */ .woocommerce-form-login p.form-row { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; margin-top: 15px !important; padding: 0 !important; } /* FORCE "Remember me" to its own clean full row above the buttons */ .woocommerce-form-login__rememberme { flex: 0 0 100% !important; width: 100% !important; display: flex !important; align-items: center !important; margin-bottom: 12px !important; margin-top: 5px !important; cursor: pointer !important; font-weight: 500 !important; color: #555555 !important; } .woocommerce-form-login__rememberme input { margin: 0 10px 0 0 !important; width: 16px !important; height: 16px !important; accent-color: #5c2d91 !important; } /* 5. PERFECT 50/50 SIDE-BY-SIDE BUTTONS BLOCK */ .woocommerce-form-login__submit, #b2b-register-btn { flex: 1 1 calc(50% - 7px) !important; /* Splitting the row exactly down the middle */ width: calc(50% - 7px) !important; min-width: 140px !important; /* Auto-stacks on small mobile phones naturally */ height: 48px !important; /* Guarantees matching heights */ margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; border-radius: 6px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; transition: all 0.2s ease-in-out !important; } /* Purple Solid Login Button */ .woocommerce-form-login__submit { background-color: #5c2873 !important; color: #ffffff !important; border: 1px solid #5c2d91 !important; } .woocommerce-form-login__submit:hover { background-color: #472070 !important; border-color: #472070 !important; } /* Purple Outline Register Button */ #b2b-register-btn { background-color: transparent !important; color: #5c2d91 !important; border: 2px solid #5c2d91 !important; } #b2b-register-btn:hover { background-color: #5c2873 !important; color: #ffffff !important; border-color: #5c2873 !important; } /* 6. Lost Password Center Alignment */ .woocommerce-LostPassword.lost_password { text-align: center !important; margin-top: 25px !important; display: block !important; width: 100% !important; } .woocommerce-LostPassword.lost_password a { color: #888888 !important; font-size: 13px !important; text-decoration: none !important; } .woocommerce-LostPassword.lost_password a:hover { color: #5c2d91 !important; text-decoration: underline !important; } /* ========================== MY ACCOUNT PAGE ONLY ========================== */ .page-wrapper.my-account { background: #f5f7fa; padding: 30px 0; } /* Sidebar */ .page-wrapper.my-account .col-border { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border: none; } /* User section */ .page-wrapper.my-account .account-user { text-align: center; margin-bottom: 25px; } .page-wrapper.my-account .user-name { display: block; font-size: 20px; font-weight: 600; color: #222; } .page-wrapper.my-account .user-id { display: block; margin-top: 5px; color: #888; } /* Navigation */ .page-wrapper.my-account .account-nav li { margin-bottom: 8px; } .page-wrapper.my-account .account-nav li a { display: block; padding: 12px 15px; border-radius: 8px; color: #444; text-decoration: none; transition: all 0.3s ease; } .page-wrapper.my-account .account-nav li a:hover { background: #5c2873; color: #fff; } .page-wrapper.my-account .account-nav li.active a, .page-wrapper.my-account .account-nav li.is-active a { background: #5c2873; color: #fff; } /* Content Area */ .page-wrapper.my-account .woocommerce-MyAccount-content { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } /* Welcome text */ .page-wrapper.my-account .woocommerce-MyAccount-content p { font-size: 15px; line-height: 1.7; color: #555; } /* Dashboard cards */ .page-wrapper.my-account .dashboard-links { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 25px; padding: 0; } .page-wrapper.my-account .dashboard-links li { list-style: none; flex: 1; min-width: 180px; } .page-wrapper.my-account .dashboard-links li a { display: block; text-align: center; background: #f8f9fa; padding: 18px; border-radius: 10px; font-weight: 600; color: #333; text-decoration: none; transition: all 0.3s ease; } .page-wrapper.my-account .dashboard-links li a:hover { background: #5c2873; color: #fff; transform: translateY(-3px); } /* Responsive */ @media (max-width: 768px) { .page-wrapper.my-account .dashboard-links { flex-direction: column; } .page-wrapper.my-account .woocommerce-MyAccount-content { padding: 20px; } .page-wrapper.my-account .col-border { margin-bottom: 20px; } } .header-button .button.icon.is-small{ background: linear-gradient(135deg, #458e63 0%, #2f6a47 100%) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; color: #fff !important; padding: 2px 5px; } /* 1. Fix spacing and prevent overlapping on login forms */ .g-recaptcha { clear: both !important; /* Forces buttons/text to move below the captcha */ display: block !important; /* Makes it act as its own block element */ margin-top: 15px !important; /* Space above the captcha box */ margin-bottom: 20px !important; /* Space below the captcha box */ max-width: 100% !important; } /* 2. Optional: Mobile Responsive Fix */ /* If the box is too wide for tiny phone screens, this shrinks it to fit perfectly */ @media screen and (max-width: 360px) { .g-recaptcha { transform: scale(0.85); -webkit-transform: scale(0.85); transform-origin: 0 0; -webkit-transform-origin: 0 0; } } /* 1. Target ONLY the image wrapper inside product grids to kill the zoom/speed */ .products .type-product.has-hover .box-image, .products .type-product.has-hover .box-image * { transform: none !important; transition: none !important; transition-duration: 0s !important; animation: none !important; } /* 2. Lock the image scale ONLY when hovering over a catalog product card */ .products .type-product.has-hover:hover .box-image img, .products .type-product .box-image:hover img, .products .type-product .image-none:hover img { transform: none !important; transition: none !important; scale: 1 !important; } /* Center, uppercase, and beautify the product grid titles */ .products .product-small .title-wrapper .product-title { text-align: center !important; text-transform: uppercase !important; font-weight: 600 !important; /* Makes the text look sharp and clean */ letter-spacing: 0.8px !important; /* Adds subtle spacing for a premium look */ font-size: 14px !important; /* Perfectly balanced size for a neat grid layout */ line-height: 1.4 !important; /* Prevents overlapping if the title text wraps to 2 lines */ margin-top: 10px !important; /* Gives breathing room between image and text */ margin-bottom: 5px !important; } /* Ensure the link inside acts as a block and looks clean */ .products .product-small .title-wrapper .product-title a { display: inline-block !important; /* Ensures text centering applies perfectly to the link */ text-decoration: none !important; /* Removes unwanted underlines */ transition: color 0.2s ease !important; } /* 1. MAIN CATEGORY: Make it UPPERCASE */ .widget_product_categories > ul > li.cat-item > a { text-transform: uppercase !important; } /* 2. SUBCATEGORY: Normal text ONLY (No forced capital letters) */ .widget_product_categories ul.children li.cat-item a { text-transform: none !important; } .home-banner-one { border-radius: 8px !important; overflow: hidden !important; } .home-banner-two { border-radius: 8px !important; overflow: hidden !important; } .home-banner-three { border-radius: 8px !important; overflow: hidden !important; } .shop-button-one{ font-size: 15px !important; } .shop-button-two{ font-size: 14px !important; } .shop-button-three{ font-size: 14px !important; }