/* 
Theme Name: Hewz Creative
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* General Body Styling */
body {margin: 0px !important;}

/* General WooCommerce message styling */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    background-color: #fff;
    padding: 1.3rem;
    margin-bottom: 20px;
    border-radius: 0px 0px 5px 5px;
    border-top: solid var(--e-global-color-accent) 0.2rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Specific styling for "Add to Cart" message */
.woocommerce-notices-wrapper .woocommerce-message {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
}

/* Adjusting the "Browse products" and "Return to shop" buttons */
.woocommerce .woocommerce-info .button,
.woocommerce a.button.wc-backward {
    background-color: var(--e-global-color-accent);
    color: #fff !important;
    border: none;
    padding: 1rem 1.2rem;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    margin-left: auto; /* Align to the right */
}

.woocommerce .woocommerce-info .button:hover,
.woocommerce a.button.wc-backward:hover {
    background-color: var(--e-global-color-74cef46) !important;
}

/* Fix for the overlapping icon in the WooCommerce messages */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
    margin-right: 1rem !important; /* Add some margin to separate the icon from the text */
    color: var(--e-global-color-accent);
    display: none;
}

/* Change Sale Badge */
span.onsale {
    background-color:var(--e-global-color-accent) !important;
}

/* WooCommerce Product Image Aspect Ratio 1:1 */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Custom text selection highlight color */
::selection {
    background-color: var(--e-global-color-accent); /* Background color of the highlight */
    color: #ffffff; /* Text color of the highlight */
}

::-moz-selection {
    background-color: var(--e-global-color-74cef46); /* Background color of the highlight for Firefox */
    color: #ffffff; /* Text color of the highlight for Firefox */
}

section {
    padding-left: 3% !important;
    padding-right: 3% !important;
    margin: 0 auto;
}

/* Desktop Default */
.pt-0 { padding-top: 0; }
.pt-0.25 { padding-top: 0.25rem; }
.pt-0.5 { padding-top: 0.5rem; }
.pt-0.75 { padding-top: 0.75rem; }
.pt-1 { padding-top: 1rem; }
.pt-1.5 { padding-top: 1.5rem; }
.pt-2 { padding-top: 2rem; }
.pt-2.5 { padding-top: 2.5rem; }
.pt-3 { padding-top: 3rem; }
.pt-4 { padding-top: 4rem; }
.pt-5 { padding-top: 5rem; }
.pt-6 { padding-top: 6rem; }

/* Tablet (max-width: 840px) */
@media (max-width: 840px) {
  .pt-6 { padding-top: 4rem; }
  .pt-5 { padding-top: 3rem; }
  .pt-4 { padding-top: 2.5rem; }
  .pt-3 { padding-top: 2rem; }
  .pt-2 { padding-top: 1.5rem; }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
  .pt-6 { padding-top: 2rem; }
  .pt-5 { padding-top: 1.5rem; }
  .pt-4 { padding-top: 1rem; }
  .pt-3 { padding-top: 0.75rem; }
  .pt-2 { padding-top: 0.5rem; }
}

/* Desktop Default */
.pb-0 { padding-bottom: 0; }
.pb-0.25 { padding-bottom: 0.25rem; }
.pb-0.5 { padding-bottom: 0.5rem; }
.pb-0.75 { padding-bottom: 0.75rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-1.5 { padding-bottom: 1.5rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-2.5 { padding-bottom: 2.5rem; }
.pb-3 { padding-bottom: 3rem; }
.pb-4 { padding-bottom: 4rem; }
.pb-5 { padding-bottom: 5rem; }
.pb-6 { padding-bottom: 6rem; }

/* Tablet (max-width: 840px) */
@media (max-width: 840px) {
  .pb-6 { padding-bottom: 4rem; }
  .pb-5 { padding-bottom: 3rem; }
  .pb-4 { padding-bottom: 2.5rem; }
  .pb-3 { padding-bottom: 2rem; }
  .pb-2 { padding-bottom: 1.5rem; }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
  .pb-6 { padding-bottom: 2rem; }
  .pb-5 { padding-bottom: 1.5rem; }
  .pb-4 { padding-bottom: 1rem; }
  .pb-3 { padding-bottom: 0.75rem; }
  .pb-2 { padding-bottom: 0.5rem; }
}

/* Desktop Default */
.pl-0 { padding-left: 0; }
.pl-0.25 { padding-left: 0.25rem; }
.pl-0.5 { padding-left: 0.5rem; }
.pl-0.75 { padding-left: 0.75rem; }
.pl-1 { padding-left: 1rem; }
.pl-1.5 { padding-left: 1.5rem; }
.pl-2 { padding-left: 2rem; }
.pl-2.5 { padding-left: 2.5rem; }
.pl-3 { padding-left: 3rem; }
.pl-4 { padding-left: 4rem; }
.pl-5 { padding-left: 5rem; }
.pl-6 { padding-left: 6rem; }

/* Tablet (max-width: 840px) */
@media (max-width: 840px) {
  .pl-6 { padding-left: 4rem; }
  .pl-5 { padding-left: 3rem; }
  .pl-4 { padding-left: 2.5rem; }
  .pl-3 { padding-left: 2rem; }
  .pl-2 { padding-left: 1.5rem; }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
  .pl-6 { padding-left: 2rem; }
  .pl-5 { padding-left: 1.5rem; }
  .pl-4 { padding-left: 1rem; }
  .pl-3 { padding-left: 0.75rem; }
  .pl-2 { padding-left: 0.5rem; }
}

/* Desktop Default */
.pr-0 { padding-right: 0; }
.pr-0.25 { padding-right: 0.25rem; }
.pr-0.5 { padding-right: 0.5rem; }
.pr-0.75 { padding-right: 0.75rem; }
.pr-1 { padding-right: 1rem; }
.pr-1.5 { padding-right: 1.5rem; }
.pr-2 { padding-right: 2rem; }
.pr-2.5 { padding-right: 2.5rem; }
.pr-3 { padding-right: 3rem; }
.pr-4 { padding-right: 4rem; }
.pr-5 { padding-right: 5rem; }
.pr-6 { padding-right: 6rem; }

/* Tablet (max-width: 840px) */
@media (max-width: 840px) {
  .pr-6 { padding-right: 4rem; }
  .pr-5 { padding-right: 3rem; }
  .pr-4 { padding-right: 2.5rem; }
  .pr-3 { padding-right: 2rem; }
  .pr-2 { padding-right: 1.5rem; }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
  .pr-6 { padding-right: 2rem; }
  .pr-5 { padding-right: 1.5rem; }
  .pr-4 { padding-right: 1rem; }
  .pr-3 { padding-right: 0.75rem; }
  .pr-2 { padding-right: 0.5rem; }
}

/* Desktop Default */
.px-0 { padding-left: 0; padding-right: 0; }
.px-0.25 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-0.5 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-0.75 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-1 { padding-left: 1rem; padding-right: 1rem; }
.px-1.5 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }
.px-2.5 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-3 { padding-left: 3rem; padding-right: 3rem; }
.px-4 { padding-left: 4rem; padding-right: 4rem; }
.px-5 { padding-left: 5rem; padding-right: 5rem; }
.px-6 { padding-left: 6rem; padding-right: 6rem; }

/* Tablet (max-width: 840px) */
@media (max-width: 840px) {
  .px-6 { padding-left: 4rem; padding-right: 4rem; }
  .px-5 { padding-left: 3rem; padding-right: 3rem; }
  .px-4 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .px-3 { padding-left: 2rem; padding-right: 2rem; }
  .px-2 { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
  .px-6 { padding-left: 2rem; padding-right: 2rem; }
  .px-5 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Desktop Default */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-0.25 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-0.5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-0.75 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-1.5 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-2.5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.py-5 { padding-top: 5rem; padding-bottom: 5rem; }
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }

/* Tablet (max-width: 840px) */
@media (max-width: 840px) {
  .py-6 { padding-top: 4rem; padding-bottom: 4rem; }
  .py-5 { padding-top: 3rem; padding-bottom: 3rem; }
  .py-4 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .py-3 { padding-top: 2rem; padding-bottom: 2rem; }
  .py-2 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
  .py-6 { padding-top: 2rem; padding-bottom: 2rem; }
  .py-5 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* Base Padding (Desktop Default) */
.p-0 { padding: 0; }
.p-0.25 { padding: 0.25rem; }    /* 4px */
.p-0.5 { padding: 0.5rem; }      /* 8px */
.p-0.75 { padding: 0.75rem; }    /* 12px */
.p-1 { padding: 1rem; }          /* 16px */
.p-1.5 { padding: 1.5rem; }      /* 24px */
.p-2 { padding: 2rem; }          /* 32px */
.p-2.5 { padding: 2.5rem; }      /* 40px */
.p-3 { padding: 3rem; }          /* 48px */
.p-4 { padding: 4rem; }          /* 64px */
.p-5 { padding: 5rem; }          /* 80px */
.p-6 { padding: 6rem; }          /* 96px */

/* Tablet (max-width: 840px) */
@media (max-width: 840px) {
  .p-6 { padding: 4rem; }
  .p-5 { padding: 3rem; }
  .p-4 { padding: 2.5rem; }
  .p-3 { padding: 2rem; }
  .p-2 { padding: 1.5rem; }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
  .p-6 { padding: 2rem; }
  .p-5 { padding: 1.5rem; }
  .p-4 { padding: 1rem; }
  .p-3 { padding: 0.75rem; }
  .p-2 { padding: 0.5rem; }
}

.text-bold {
    font-weight: 900;
}



p {
    margin: 0;
}

.primary-500 {
    color: var(--e-global-color-accent);
}

/* Large gap (default desktop size: 5rem) */
.gap-large {
  gap: 5rem;
}

/* Medium gap (default tablet size: 3rem) */
.gap-medium {
  gap: 3rem;
}

/* Small gap (default mobile size: 1rem) */
.gap-small {
  gap: 1rem;
}

/* Responsive variations */
@media (max-width: 1024px) {
  .gap-large {
    gap: 3rem; /* Reduce gap on tablets */
  }
  .gap-medium {
    gap: 2rem; /* Adjust for tablets */
  }
  .gap-small {
    gap: 1rem; /* Remains same for tablets */
  }
}

@media (max-width: 768px) {
  .gap-large {
    gap: 1.5rem; /* Further reduce gap for mobile */
  }
  .gap-medium {
    gap: 1rem; /* Mobile size */
  }
  .gap-small {
    gap: 0.5rem; /* Optional: smaller gap for compact layouts */
  }
}

/* Info Buttons - Base Styles */
.elementor-element.elementor-button-info .elementor-button {
    background-color: var(--e-global-color-a91c97b);
    border-color: var(--e-global-color-a91c97b);
    color: var(--e-global-color-accent);
}

/* Info Buttons - Hover Effect */
.elementor-element.elementor-button-info .elementor-button:hover {
    background-color: var(--e-global-color-592291d) !important; /* Keep background color */
    border-color: var(--e-global-color-0409300); /* Change border on hover */
    color: var(--e-global-color-accent); /* Change text color on hover */
}

/* Info Buttons - Icon Styles */
.elementor-element.elementor-button-info .elementor-button-icon svg {
    fill: var(--e-global-color-accent); /* Icon color */
}

/* Info Buttons - Icon Hover Effect */
.elementor-element.elementor-button-info .elementor-button:hover .elementor-button-icon svg {
    fill: var(--e-global-color-accent); /* Change icon color on hover */
}

/* Align Icon and Text */
.elementor-button .elementor-button-content-wrapper {
    align-items: center; /* Align icon and text vertically */
}

/* Success Buttons - Base Styles */
.elementor-element.elementor-button-success .elementor-button {
    border: solid 2px;
    background-color: transparent; /* Transparent background */
    border-color: var(--e-global-color-accent) !important; /* Border color */
    color: var(--e-global-color-accent); /* Text color */
}

/* Success Buttons - Icon Styles */
.elementor-element.elementor-button-success .elementor-button-icon svg {
    fill: var(--e-global-color-accent) !important; /* Icon color */
    transition: fill 0.3s ease; /* Smooth transition for icon color */
}

/* Success Buttons - Hover Effect */
.elementor-element.elementor-button-success .elementor-button:hover {
    background-color: var(--e-global-color-accent) !important; /* Change background on hover */
    border-color: var(--e-global-color-accent); /* Change border color on hover */
    color: var(--e-global-color-10f8357); /* Change text color on hover */
}

/* Success Buttons - Icon Hover Effect */
.elementor-element.elementor-button-success .elementor-button:hover .elementor-button-icon svg {
    fill: var(--e-global-color-a396b19) !important; /* Change icon color on hover */
}

/* Warning Buttons - Base Styles */
.elementor-element.elementor-button-warning .elementor-button {
    background-color: var(--e-global-color-9a4ea44) !important; /* Transparent background */
        border: solid 2px;
    border-color: transparent !important; /* Transparent border */
    color: var(--e-global-color-c02a09e); /* Text color */
}

/* Warning Buttons - Hover Effect */
.elementor-element.elementor-button-warning .elementor-button:hover {
    background-color: var(--e-global-color-9a4ea44) !important;
    border-color: var(--e-global-color-c02a09e) !important; /* Change border color on hover */
    color: var(--e-global-color-c02a09e); /* Keep text color */
}

/* Warning Buttons - Icon Styles */
.elementor-element.elementor-button-warning .elementor-button-icon svg {
    fill: var(--e-global-color-c02a09e); /* Icon color */
}

/* General sticky header styles */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: transform 0.3s ease-in-out;
    will-change: transform; /* Improves performance for transform animations */
}

/* Add padding to the body dynamically (set via JS) */
body {
    padding-top: var(--header-height, 0); /* Use dynamic height or default to 0 */
}

/* Admin bar adjustment for desktop */
body.admin-bar .sticky-header {
    top: 32px; /* Height of the admin bar on desktop */
}

/* Admin bar adjustment for mobile */
@media (max-width: 782px) {
    body.admin-bar .sticky-header {
        top: 46px; /* Height of the admin bar on mobile */
    }
}

/* Fallback styles for mobile */
@media (max-width: 600px) {
    .sticky-header {
        top: 0; /* Default position for mobile */
        transform: translateY(0); /* Ensure visible */
    }

    body.admin-bar .sticky-header {
        top: 46px; /* Admin bar height on smaller screens */
    }
}

/* Apply styles to the section and cascade to child elements */
.swap {
    background-color: var(--e-global-color-accent) !important; /* Set dark background */
    color: var(--e-global-color-10f8357) !important; /* Default text color for all child elements */
}

/* Specific styles for headings inside .swap */
.swap h1,
.swap h2,
.swap h3,
.swap h4,
.swap h5,
.swap h6 {
    color: var(--e-global-color-10f8357) !important; /* Lighter title color */
}
/* Specific styles for paragraphs, spans, list items, divs, and form labels */
.swap p,
.swap span,
.swap li,
.swap div,
.swap label,
.swap .elementor-widget,
.swap .elementor-icon-list-item,
.swap .elementor-social-icon,
.swap .elementor-text-editor,
.swap .elementor-icon,
.swap .elementor-counter-number,
.swap .elementor-image-box-title,
.swap .elementor-image-box-description,
.swap .elementor-tab-title,
.swap .elementor-tab-content,
.swap .elementor-form__label {
    color: var(--e-global-color-d0769d8) !important; /* Lighter text color for body content */
}

/* Styling for SVGs in list items and form elements */
.swap li svg,
.swap .elementor-icon-list-item svg,
.swap .elementor-social-icon svg,
.swap .elementor-form__label svg {
    fill: var(--e-global-color-10f8357) !important; /* Apply color to SVG icons */
}

/* Additional hover effect (optional) */
.swap .elementor-widget:hover,
.swap li:hover,
.swap .elementor-icon-list-item:hover,
.swap .elementor-form__label:hover {
    color: var(--e-global-color-10f8357) !important; /* Secondary color for hover effect */
}

/* Styling for input placeholders and text fields */
.swap input,
.swap textarea,
.swap select {
    border-color: var(--e-global-color-d0769d8) !important;
}

/* Styling for input and form field focus states */
.swap input:focus,
.swap textarea:focus,
.swap select:focus {
    border-color: var(--e-global-color-9a4a244) !important;
    outline-color: var(--e-global-color-9a4a244) !important;
}

/* Add hover effect (optional) */
.swap .elementor-widget:hover {
    color: var(--e-global-color-9a4a244) !important; /* Secondary color for hover effect */
}

/* Link styles inside the swap section */
.swap a {
    color: var(--e-global-color-10f8357) !important; /* Light link color */
    text-decoration: none !important;
}

.swap a:hover {
    color: var(--e-global-color-592291d) !important; /* Hover color for links */
}

/* Target Elementor buttons inside the .swap section */
.swap .elementor-button {
    background-color: var(--e-global-color-c02a09e) !important;
    color: var(--e-global-color-10f8357) !important; /* Corrected undefined variable */
    border: none !important;
    transition: background-color 0.3s ease !important, color 0.3s ease !important; /* Smooth transitions */
    text-decoration: none !important;
}

.swap .elementor-button:hover {
    background-color: var(--e-global-color-53b681d) !important;
    color: var(--e-global-color-d0769d8) !important; /* Corrected hover text color */
}