/* --- Phia Custom Scrollbar --- */
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #c4a661 #fcfcfc; /* Gold Thumb, Light Track */
    scroll-behavior: smooth;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #fcfcfc; /* Matches site background */
}

::-webkit-scrollbar-thumb {
    background-color: #c4a661; /* Phia Gold */
    border-radius: 10px;
    border: 2px solid #fcfcfc; /* Creates the "floating" effect */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a3894e; /* Darker Gold on hover */
}

/* Change text selection color */
::selection {
  background-color: #9e8844; 
  color: #ffffff;
}

/* Firefox support */
::-moz-selection {
  background-color: #9e8844;
  color: #ffffff;
}

/*search bar and log out*/
/* 1. Control the overall width of the search container */
.top-bar form {
    max-width: 300px; /* Reduces the horizontal width */
    margin-bottom: 0;
}

/* 2. Reduce the height and internal padding (the "bulk") */
.top-bar .form-control {
    height: 35px;            /* Makes the bar shorter */
    font-size: 0.85rem;      /* Smaller text font-weight */
    padding: 8px 10px;       /* Thinner vertical space inside */
    border-radius: 4px 0 0 4px; /* Optional: rounds the left corners */
    border: 1px solid #ddd;  /* Lighter border color */
     padding-right: 30px; /* Adds space at the very end of the top bar */
}

/* 3. Match the search button to the new height */
#header-search-button {
    height: 32px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-left: none; /* Merges it with the input box */
    border-radius: 0 4px 4px 0;
    font-size: 0.8rem; /* Makes the magnifying glass icon smaller */
    background-color: #f8f9fa; /* Lighter background */
}

/* 4. Ensure the User text isn't "heavier" than the bar */
.header-user {
    font-size: 17px;
    font-weight: 400; /* Regular weight instead of bold */
    margin-right: 20px; /* Increase this number to shift it more to the left */
    white-space: nowrap; /* Prevents the name from wrapping to two lines */
}
    

/* Hide the Search Bar on Mobile Screen */
@media (max-width: 1024px) {
    .top-bar form {
        display: none !important;
    }

    /* Since the search bar is gone, this ensures the User name 
       stays on the far right of the top bar */
    .top-bar {
        justify-content: flex-end !important;
        padding-right: 15px !important;
    }
}
/* --- Fix for Top Bar on Mobile when Logged In --- */
@media (max-width: 991.98px) {
    /* 1. Allow the top bar to expand vertically so text doesn't get cut off */
    .top-bar {
        max-height: none !important; 
        height: auto !important;
        padding: 8px 0 !important;
        overflow: visible !important;
    }

    /* 2. Stack the elements or allow them to wrap instead of forcing one long line */
    .top-bar .container-fluid {
        flex-direction: column !important; /* Stacks Guarantee above the Username */
        align-items: center !important;
        justify-content: center !important;
        gap: 5px; /* Adds a small space between the two lines */
    }

    /* 3. Adjust font sizes so they fit better on small screens */
    .top-bar, 
    .header-user {
        font-size: 12px !important; /* Slightly smaller to prevent crowding */
        margin-right: 0 !important; /* Remove the right margin that's pushing it off-screen */
        text-align: center;
        white-space: normal !important; /* Allow the text to wrap if the name is very long */
    }

    /* 4. Remove horizontal scrollbar cause */
    html, body {
        overflow-x: hidden !important;
        position: relative;
    }
}

/* --- Specific fix for WordPress Admin Bar overlap --- */
/* If the top bar hides behind the black WordPress admin bar on mobile */
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
    .admin-bar .sticky-header {
        top: 32px !important; /* Adjusts header position when admin bar is present */
    }
}

/* --- REDUCE HEADER GAP ON MOBILE (SCROLLED STATE) --- */
@media (max-width: 991.98px) {
    /* 1. Force the top-bar to completely collapse and take 0 space when scrolled */
    .sticky-header.sticky-active .top-bar {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
        display: none !important; /* This ensures it takes zero height */
    }

    /* 2. Shrink the white navbar area significantly */
    .sticky-header.sticky-active .navbar {
        padding-top: 5px !important;  /* Minimal top/bottom padding */
        padding-bottom: 5px !important;
        min-height: auto !important;
    }

    /* 3. Reduce the logo size further to save vertical space */
    .sticky-header.sticky-active .logo img {
        max-height: 45px !important; /* Smaller logo on scroll */
        width: auto;
    }

    /* 4. Remove extra padding from the toggle menu and cart icons */
    .sticky-header.sticky-active .navbar-toggler,
    .sticky-header.sticky-active .cart-icon {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 5. Ensure the overall header container has no bottom margin */
    .sticky-header.sticky-active {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        height: auto !important;
    }
}

/*Search bar and logout end*/

/*Login button and icon*/

@media (max-width: 991px) {
    /* Ensures the icon has enough tapping space */
    .top-bar a i.fa-arrow-right-to-bracket {
        padding: 10px;
        display: block;
    }
    
    /* Prevents the middle announcement text from overlapping icons */
    .top-bar .text-center {
        font-size: 10px;
        padding: 0 15px;
    }
}
@media (max-width: 991px) {
    /* Adjust top bar spacing for mobile */
    .top-bar .text-center {
        font-size: 10px;
        line-height: 1.2;
        padding: 0 10px;
    }
    
    /* Make the mobile icon easy to tap */
    .fa-arrow-right-to-bracket {
        padding: 5px;
    }
}

/* Adjust the desktop login button appearance */
.top-bar .btn-sm {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.6px;
    border-color: #9c844c;
    color: #9c844c;
}

.top-bar .btn-sm:hover {
    background-color: #9c844c;
    color: #fff;
}
/*Login button and icon end*/

/*header start*/
.html {
    margin-top: 0 !important;
}

/* --- 1. GENERAL HEADER SETUP (BEFORE SCROLL) --- */
.sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1020 !important;
}

.logo img {
    max-height: 130px;
    transition: all 0.15s ease-in-out;
}

.top-bar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid #9e8844;
    font-size: 15px;
    color: #9e8844;
    font-weight: 500;
    padding: 10px 0;
    overflow: hidden;
    max-height: 50px; /* Starting height for smooth animation */
    transition: max-height 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s;
}

.sticky-header .navbar {
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.15s ease-in-out;
}


/* --- 2. SCROLLED STATE (.sticky-active) --- */

/* HIDE the top bar smoothly on scroll */
.sticky-header.sticky-active .top-bar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    opacity: 0;
    visibility: hidden;
}

/* SHRINK the navbar on scroll */
.sticky-header.sticky-active .navbar {
    padding: 5px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* SHRINK the logo on scroll */
.sticky-header.sticky-active .logo img {
    max-height: 60px !important;
}


/* --- 3. NAVBAR LINKS STYLING --- */
.navbar-nav .nav-link {
    position: relative;
    color: #9e8844 !important;
    font-weight: 500;
    font-size: 15px;
    margin: 0 10px;
    transition: color 0.3s;
    text-decoration: none !important;
}

.navbar-nav .nav-link:hover {
    color: #d2b55b !important;
}

.navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #d2b55b;
    transition: width 0.3s;
}

/* ===== Sticky Header Logic ===== */
.sticky-header {
 position: fixed !important;
    top: 0 !important; /* Default position */
    left: 0 !important;
    width: 100% !important;
    z-index: 1020 !important; /* A very high z-index to stay on top */
    transition: top 0.3s ease-in-out !important;
}

/* Default navbar style (before scroll) */
.sticky-header .navbar {
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.3s ease-in-out;
}

/* --- Styles for when header is ACTIVE (scrolled) --- */

/* HIDE the top bar on scroll on ALL screen sizes */
.sticky-header.sticky-active .top-bar {
   max-height: 0; /* Animate height to zero */
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  opacity: 0; /* Fade out the content */
  visibility: hidden; /* Completely hide it after fading */
}

/* SHRINK the navbar on scroll */
.sticky-header.sticky-active .navbar {
  padding: 10px 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* SHRINK the logo on scroll */
.sticky-header.sticky-active .logo img {
  max-height: 80px;
}

/* --- 3. THE MOST SPECIFIC WORDPRESS ADMIN BAR FIX --- */
/* This rule is designed to be almost impossible to override */

/*html body.admin-bar .sticky-header {*/
/*    top: -5px !important;*/
/*}*/

/*@media screen and (max-width: 782px) {*/
/*    html body.admin-bar .sticky-header {*/
/*        top: 42px !important;*/
/*    }*/
/*}*/


/* ===== Mobile Adjustments ===== */
@media (max-width: 991.98px) {
.top-bar {
font-size: 16px;
text-align: center;
}
.top-bar .search-box {
display: none;
}
.logo img {
max-height: 100px;
}
.navbar-toggler {
border: none;
font-size: 1.5rem;
color: #9e8844;
}
.cart-icon {
font-size: 1.1rem;
color: #9e8844;
}

/* THIS IS THE CRITICAL FIX: Make the navbar the positioning anchor */
.navbar {
position: relative;
}

/* This is your code, slightly improved for perfect display */
.mobile-menu {
background-color: #ffffff; /* Use a solid background */
position: absolute;
top: 100%; /* Position below the navbar */
left: 0;
width: 100%;
z-index: 1050;
border-top: 1px solid #e5d7b3; /* Clean separator line */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds depth */
}

.mobile-menu .nav-link {
color: #9e8844 !important;
font-weight: 600;
padding: 12px 20px; /* Added horizontal padding for alignment */
border-bottom: 1px solid #e5d7b3;
text-align: left; /* Ensure text is aligned left */
}

.mobile-menu .nav-link:hover {
color: #d2b55b !important;
}
}

/* ===== Dropdown Menu ===== */
.navbar .dropdown-menu {
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
  background: transparent;
  min-width: 180px;
  text-decoration: none !important;
 
}
.navbar .dropdown-menu .dropdown-item {
  font-size: 15px;
  font-weight: 400;
  color: #9e8844;
  padding: 6px 0;
  background: transparent;
  white-space: nowrap;
  border-bottom: 1px solid #e5d7b3;
  text-decoration: none !important;
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: transparent;
  color: #d2b55b !important;
   text-decoration: none !important;
}

/* ================================================= */
/* === START: New Dropdown on Hover for Desktop === */
/* ================================================= */
@media (min-width: 1400px) {
  
  /* Make sure the parent item is a positioning container */
  .navbar-nav .nav-item.dropdown {
    position: relative;
  }

  .navbar-nav .dropdown-menu {
    /* Use opacity and visibility for a smooth transition */
    display: block; /* This keeps the element in the HTML flow */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
    top: 100%; /* Position it right below the parent */
    
    /* VERY IMPORTANT: Ensure it appears on top of other page content */
    z-index: 9999;
  }

  /* Show the dropdown menu when the parent list item is hovered */
  .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
  
}
/* =============================================== */
/* === END: New Dropdown on Hover for Desktop === */
/* =============================================== */

/* Mobile Dropdown CSS */
/* ========================================================== */
/* === FIX FOR CLICKABLE MOBILE DROPDOWN (TRIANGLE ICON) === */
/* ========================================================== */

@media (max-width:  1399.98px) {

  /* 1. Hide the submenu by default */
  .mobile-menu .sub-menu.dropdown-menu {
    display: none;
    position: static;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding-left: 30px; /* Indents the sub-items */
    margin-top: 0;
  }

  /* 2. Style the individual submenu links */
  .mobile-menu .sub-menu .dropdown-item {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #e5d7b3;
  }
  
  /*
   * 3. Create the triangle icon using a CSS pseudo-element.
   * This is the "closed" state (pointing down).
  */
  .mobile-menu .menu-item-has-children > a.dropdown-toggle::after {
    content: ''; /* The icon is a shape, not text */
    float: right; /* Position it to the far right */
    
    /* These properties create the triangle shape */
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #9e8844; /* This creates the down-pointing triangle */
    
    /* Vertical alignment and animation */
    margin-top: 8px; /* Adjust this value to perfectly center the icon */
    transition: transform 0.3s ease-in-out; /* This makes the rotation smooth */
  }
  
  /*
   * 4. Rotate the triangle when the menu is open.
   * The JavaScript adds the 'active' class, which triggers this style.
  */
  .mobile-menu .menu-item-has-children.active > a.dropdown-toggle::after {
    transform: rotate(-180deg); /* Flips the triangle to point up */
  }
}

/* Mobile Dropdown CSS END */

/* ===== Sticky Header start ===== */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  transition: all 0.3s ease-in-out;
}

/* Default navbar height */
.sticky-header .navbar {
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.3s ease-in-out;
}

/* ===== Navbar (Desktop Default Smaller) ===== */
@media (min-width: 992px) {
  .sticky-header .navbar {
    padding: 8px 0; /* smaller navbar height on desktop */
  }
  .logo img {
    max-height: 100px; /* smaller logo on desktop */
  }
}

/* ===== Navbar Shrinks More on Scroll ===== */
.sticky-header.sticky-active .navbar {
  padding: 4px 0; /* shrink further when scrolling */
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sticky-header.sticky-active .logo img {
  max-height: 55px; /* shrink logo further */
}
@media (max-width: 768px) {
  .overlay-content {
    flex-direction: column;
    text-align: center;
    padding-top: 120px; /* push content downward */
  }

  .product-img {
    max-width: 200px;
    margin-bottom: 20px;
  }

  .content h2 {
    font-size: 1.8rem;
  }
  .content p {
    font-size: 1rem;
  }
}
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    background: rgba(227, 223, 223, 0.95); /* white background for desktop */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* subtle shadow */
    border-radius: 6px; /* optional: rounded corners */
     text-decoration: none !important;
      display: block;
  }

  .navbar .dropdown-menu .dropdown-item {
    border-bottom: none !important;
    padding: 8px 15px;
     text-decoration: none !important;
  }

  .navbar .dropdown-menu .dropdown-item:hover {
    background: #f8f8f8; /* light gray hover effect */
    color: #9e8844 !important;
     text-decoration: none !important;
  }
}
@media (max-width: 991.98px) {
  .navbar .dropdown .dropdown-menu.show {
    margin-left: 30px; /* Adjust this value as needed */
    
    /* Also, reset desktop styles for a cleaner mobile look */
    background: transparent;
    box-shadow: none;
    border: none;
  }
}

/* ================================== */
/* === Custom Header Search Box CSS === */
/* ================================== */

/* This styles the text input field */
#header-search-input {
  /* --- ADJUST SIZE HERE --- */
  width: 200px;    /* Change this value to make the search box wider or narrower */
  height: 35px;    /* Change this value to adjust the height */

  /* --- Styling Rules --- */
  border-radius: 5px 0 0 5px; /* Creates a rounded corner on the left side */
  border: 1px solid #ccc;     /* A slightly more visible border */
  border-right: none;         /* Removes the border where it meets the button */
}

/* This styles the search button */
#header-search-button {
  /* --- ADJUST SIZE HERE --- */
  height: 35px;   /* This MUST match the height of the input above */
  margin-right: 60px;
  /* --- Styling Rules --- */
  background-color: #9e8844;
  color: #fff;
  border: 1px solid #9e8844;
  border-radius: 0 5px 5px 0; /* Creates a rounded corner on the right side */
  
  /* Vertically centers the search icon */
  display: inline-flex;
  align-items: center;
}

/* Style for when the search box is focused (clicked on) */
#header-search-input:focus {
  outline: none;
  box-shadow: none;
  border-color: #9e8844; /* Highlights the border on focus */
}

/* Hover effect for the search button */
#header-search-button:hover {
  background-color: #d6bc6b; /* A lighter color on hover */
  border-color: #d6bc6b;
  color: #fff;
}

/* header end */

/*quantity and add to cart button in varation product*/

/* Ensure the variation container uses flexbox to allow reordering */
.single_variation_wrap {
    display: flex !important;
    flex-direction: column !important;
}

/* Move the Add to Cart button and Quantity box to the TOP (Order 1) */
.woocommerce-variation-add-to-cart {
    order: 1 !important;
    margin-bottom: 20px; /* Adds some space below the button */
}

/* Move the Variation Price and Description below the button (Order 2) */
.woocommerce-variation {
    order: 2 !important;
}

/* Align quantity buttons and add to cart button vertically */

/* Remove any individual margins that might be pushing the button up */
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    margin-top: 0 !important;
    height: auto; /* Ensures button height doesn't force it out of line */
}

/* Ensure the quantity wrapper doesn't have extra bottom/top space */
.qib-button-wrapper {
    display: flex !important;
    align-items: center !important;
}

/* 1. Remove top margin and padding from the button container */
.woocommerce-variation-add-to-cart {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Reduce space from the element above (the variation table/dropdowns) */
.variations {
    margin-bottom: 5px !important; /* Adjust this number as needed */
}

/* 3. Pull the buttons up specifically using a small negative margin if 0 isn't enough */
.single_variation_wrap {
    margin-top: -10px !important; /* Adjust this to pull the buttons closer to the dropdowns */
}

/* 4. Remove extra space from the "Clear" link container */
.woocommerce-product-details__short-description + .variations_form .reset_variations {
    margin-bottom: 5px !important;
}

/* Change variation label font color to light grey */
.variations label {
    color: #9e8844 !important; /* This is a standard light grey */
}
/*quantity and add to cart button in varation product END*/

/* --- Mobile Menu Dropdown Scrollbar Fix --- */
/* 1. Target ONLY .mobile-menu */
.mobile-menu .dropdown-menu {
    max-height: 300px;       /* Limits height on mobile screens */
    overflow-y: auto;        /* Shows scrollbar when list is too long */
    overflow-x: hidden;      /* Prevents horizontal scrolling */
    overscroll-behavior: contain; /* Prevents background page scrolling */
}
/* 2. Style the Scrollbar (Gold) */
.mobile-menu .dropdown-menu::-webkit-scrollbar {
    width: 6px; /* Thin scrollbar */
}
.mobile-menu .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
.mobile-menu .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #c4a661; /* Phia Gold */
    border-radius: 10px;
}
.mobile-menu .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: #a3894e; /* Darker Gold on hover */
}
/* Firefox Support */
.mobile-menu .dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: #c4a661 transparent;
}


/*Home page or front page start*/

/* home page background video and content section start here */

.video-container {
  position: relative;
  width: 100%;
  height: 100vh; /* vh (viewport height) is great for this */
  overflow: hidden;
  background-color: #333; /* Add a fallback background color */
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Ensure it's behind the overlay */
}

/* --- THIS IS THE KEY FIX --- */
/* Target the <video> element directly */
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is the magic property! */
  /* object-fit: cover; makes the video cover the entire container
     without losing its aspect ratio, cropping it if necessary. */
}

/* ===== Overlay Content ===== */
.video-container .video-overlay {
  position: absolute;
  left: 0;
  z-index: 2; 
  width: 100%;
  height: 100%;
  display: flex !important; /* This forces the overlay to show */
  justify-content: center; 
  align-items: center;
  background: rgba(0, 0, 0, 0.35); 
  padding: 20px;
  box-sizing: border-box;
}

.video-overlay .container.overlay-content {
  margin-top:100px;
  width: 100%;
}

.video-overlay .product-img {
  max-width: 300px;
  height: auto;
  margin-bottom: 20px;
}

.video-overlay .content {
  text-align: center;
  color: #fff;
}

.video-overlay .content h2 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  margin-top: -10px;
}

.video-overlay .content p {
  font-size: 2.5em;
  font-family: 'Raleway', sans-serif;
  font-weight: 100; /* Thin */
  margin-bottom: 20px;
  line-height: 1.4; /* Use relative line-height */
}

.video-overlay .btn {
  margin: 5px;
  border: 2px solid white;
  color: white;
  background: transparent;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 15px;
  text-transform: uppercase;
}

.video-overlay .btn:hover {
  background: white;
  color: #9e8844;
}

/* ===== Base (Desktop & large tablets) ===== */
/*.video-overlay .product-img {*/
/*  max-width: clamp(260px, 28vw, 320px);*/
/*  margin-top: 50px;*/
/*  margin-bottom: 20px;*/
/*}*/

/*.video-overlay .content h2 {*/
/*  font-size: clamp(2rem, 2.5vw, 2.7rem);*/
/*  line-height: 1.4;*/
/*}*/

/*.video-overlay .content p {*/
/*  font-size: clamp(1.1rem, 1.2vw, 1.3rem);*/
/*  line-height: 1.6;*/
/*}*/

/* ===== Tablet & small desktops (up to ~ 1024px) ===== */
@media (max-width: 1024px) {
  .video-overlay .product-img {
    max-width: clamp(220px, 26vw, 260px);
    margin-top: 40px;
    margin-bottom: 15px;
  }

  .video-overlay .content h2 {
    font-size: clamp(1.9rem, 2.2vw, 2.3rem);
  }

  .video-overlay .content p {
    font-size: clamp(1rem, 1.1vw, 1.15rem);
  }

  .overlay-content .row > div {
    width: 100%;
  }
}

/* ===== Large phones & Pro/Max devices (up to ~ 480px) ===== */
@media (max-width: 480px) {
  .video-overlay .product-img {
    max-width: clamp(170px, 45vw, 190px);
    margin-top: 30px;
    margin-bottom: 10px;
  }

  .video-overlay .content h2 {
    font-size: clamp(1.6rem, 4.5vw, 1.8rem);
    line-height: 1.35;
  }

  .video-overlay .content p {
    font-size: clamp(1rem, 3.8vw, 1.1rem);
    line-height: 1.45;
    padding: 0 15px;
  }

  .overlay-content {
    padding: 14px;
    text-align: center;
  }

  .overlay-content .row {
    flex-direction: column;
    align-items: center;
  }
}

/* ===== Medium phones (up to ~ 414px width) ===== */
@media (max-width: 414px) {
  .video-overlay .product-img {
    max-width: 160px;
    margin-top: 28px;
    margin-bottom: 9px;
  }

  .video-overlay .content h2 {
    font-size: 1.55rem;
    line-height: 1.3;
  }

  .video-overlay .content p {
    font-size: 0.98rem;
    line-height: 1.4;
    padding: 0 12px;
  }

  .overlay-content {
    padding: 12px;
  }
}

/* ===== Compact phones (up to ~ 375px width) ===== */
@media (max-width: 375px) {
  .video-overlay .product-img {
    max-width: 140px;
    margin-top: 25px;
    margin-bottom: 8px;
  }

  .video-overlay .content h2 {
    font-size: 1.4rem;
    line-height: 1.25;
  }

  .video-overlay .content p {
    font-size: 0.93rem;
    line-height: 1.35;
    padding: 0 10px;
  }

  .overlay-content {
    padding: 10px;
  }
}

/* ===== Extra-small phones (up to ~ 320px width) ===== */
@media (max-width: 320px) {
  .video-overlay .product-img {
    max-width: 120px;
    margin-top: 20px;
    margin-bottom: 6px;
  }

  .video-overlay .content h2 {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .video-overlay .content p {
    font-size: 0.88rem;
    line-height: 1.3;
    padding: 0 8px;
  }

  .overlay-content {
    padding: 8px;
  }
}


/* ===== iPhone SE (320px width) ===== */
@media (max-width: 360px) {
  .video-overlay .product-img {
    max-width: 130px;
    margin-top: 25px;
    margin-bottom: 8px;
  }

  .video-overlay .content h2 {
    font-size: 1.3rem;
    line-height: 1.2;
  }

  .video-overlay .content p {
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 0 8px;
  }

  .overlay-content {
    text-align: center;
    padding: 8px;
  }
}

/* home page background video and content section end here */

     /* Headings wellness product start */
         
        .flowerw-img {
          width: 17%; /* or use max-width: 300px; */
          height: auto; /* maintains aspect ratio */
          
        }
        
         
        /* wellness product heading */
         
        .wellnessheading {
         
           font-weight: bold;
          /* font-weight: bolder; */
          font-size: 2.5rem;
          font-family: 'Raleway', sans-serif;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #9e8844; /* Gold */
        }
         
        .ENGINEERED{
            font-size: 2.2rem;
            letter-spacing: 1px;
            font-family: 'Raleway', sans-serif;
             font-weight: lighter; 
            color: #9e8844; /* Golden Brown */
            line-height: 1.2;
            text-align: center;
        }
         
        /* Buttons */
        .wprbtn-custom {
          border: 2px solid #a2873b;
          color: #a2873b;
          border-radius: 10px;
          padding: 10px 20px;
          margin: 5px;
          font-weight: 500;
          transition: all 0.3s ease-in-out;
        }
        .wprbtn-custom:hover {
          background-color: #9e8844;
          color: #fff;
        }
        
        /* ===== Default (Desktop / Large screens) ===== */
.flowerw-img {
  width: 17%;
  height: auto;
  display: block;
  margin: 0 auto; /* centers the image horizontally */
  max-width: 300px; /* prevents it from getting too large */
}

/* ===== Tablets and medium screens ===== */
@media (max-width: 992px) {
  .flowerw-img {
    width: 25%;
    max-width: 250px;
  }
}

/* ===== iPhone 11 (414px width) ===== */
@media (max-width: 414px) {
  .flowerw-img {
    width: 35%;
    max-width: 200px;
    margin-top: 30px;
  }
}

/* ===== iPhone 12/13 Mini (375px width) ===== */
@media (max-width: 375px) {
  .flowerw-img {
    width: 40%;
    max-width: 180px;
    margin-top: 25px;
  }
}

/* ===== iPhone SE (320px width) ===== */
@media (max-width: 360px) {
  .flowerw-img {
    width: 45%;
    max-width: 160px;
    margin-top: 20px;
  }
}

      /* Headings wellness product end */
 
    /* Decorative Big Product Image elements */
    .flower-img {
      max-width: 120px;
      margin-bottom: 20px;
    }
     
    /* Highlight text NATURAL ENERGIES start*/
    .highlight-text {
      font-size: 2.5rem;
      font-family: 'Raleway', sans-serif;
      font-weight: 200;
      letter-spacing: 2px;
      line-height: 1.4;
      text-transform: uppercase;
      color: #a2873b;
    }
    .highlight-text strong {
      font-weight: 700;
      color: #a2873b;
    }
     
    @media (max-width: 768px) {
      .highlight-text {
        font-size: 1.2rem;
        letter-spacing: 1.2px;
      }
    }
    /* Highlight text NATURAL ENERGIES end*/
     
     
    /* Paragraph styles michelle and quantum*/
        .section-text {
            font-size: 1rem;
            font-family: 'Raleway', sans-serif;
            font-weight: 400;
            color: #333333; /* Golden Brown */
            line-height: 1.9;
            text-align: justify;
          }
         #meetbtn{
             margin-top:50px;
         }
        /* Images */
        .profile-img {
          width: 200px;
          height: 200px;
          object-fit: cover;
          border-radius: 50%;
          margin-bottom: 20px;
        }
        .product-img {
          max-width: 250px;
          margin-bottom: 20px;
        }
        .oea{
                        font-weight:bold;
              /* font-weight: bolder; */
              font-size: 1.5em;
              font-family: 'Raleway', sans-serif;
              text-transform: uppercase;
              letter-spacing: 3px;
              color: #9e8844; /* Gold */
        }
        
        
        
     /* End Paragraph styles michelle and quantum*/

    /* card how to use phia products  */
        .how-to-use {
          border: 2px solid #d4b253;
          border-radius: 40px;
          /* padding: 50px 60px; */
          padding-left: 60px;
          padding-right: 60px;
         
         
        }
         
        .section-title {
          font-size: 35px;
          font-weight: lighter;
          font-style: normal;
          letter-spacing: 1px;
          font-family: 'Raleway', sans-serif;
          color: #9e8844;
        }
         
        .step-title {
          font-weight: bold;
          font-size: 25px;
          font-family: 'Raleway', sans-serif;
          color: #d2b55b;
          line-height: 1.2;
          letter-spacing: 1px;
        }
         
        .step-text {
          font-size: 20px;
          color: #9e8844;
          font-family: 'Raleway', sans-serif;
          margin-top: 20px;
        }
         
        .icon {
          position: relative;
          display: inline-block;
        }
         
        .icon img {
          max-width: 160px;
          /* opacity: 0.4; */
        }
         
        .icon .number {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 40px;
          color: #a8893d;
          font-weight: 500;
        }
     /* End card how to use phia products  */

     /*start Wave for you */
            .section {
              font-family: 'Raleway', sans-serif;
              text-align: center;
              padding: 80px 20px;
              max-width: 900px;
              margin: 0 auto;
            }
             
            .section img {
              max-width: 200px;
              margin-bottom: 10px;
              opacity: 1; /* faded look */
            }
             
            .section h2 {
              font-size: 2.5rem;
              color: #a8903b; /* golden color */
            
              letter-spacing: 2px;
              margin-bottom: 20px;
              /* margin-top: -80px; */
              font-family: 'Raleway', sans-serif;
            }
             
            .section p {
              font-size: 1.05rem;
              line-height: 1.8;
              color: #444;
              margin-bottom: 40px;
            }
             
            .btn-outline {
              padding: 14px 34px;
              font-size: 0.95rem;
              font-weight: 500;
              text-transform: uppercase;
              color: #a8903b;
              border: 2px solid #a8903b;
              border-radius: 12px;
              background: transparent;
              cursor: pointer;
              transition: all 0.3s ease;
            }
             
            .btn-outline:hover {
              background: #9e8844;
              color: #fff;
            }
             
            @media (max-width: 768px) {
              .section h2 {
                font-size: 1.6rem;
              }
              .section p {
                font-size: 1rem;
              }
            }
 
       /*End  Wave for you*/
    
        /* Start Energy spectrum */
              .energy-spectrum-section {
              padding: 40px 0;
              display: flex;
              align-items: center;
              justify-content: center;
              min-height: 500px;
              overflow: hidden;
              /* Prevent horizontal scroll on small devices */
            }
            .energy-spectrum-container {
              position: relative;
              margin: auto;
            }
             
            .spectrum-image-wrapper {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
             
            .spectrum-image-wrapper img {
              display: block;
              max-width: 100%;
              height: auto;
            }
             
            /* Base style for all energy items */
            .energy-item {
              position: absolute;
              font-family: "Montserrat", sans-serif;
              z-index: 5;
            }
             
            /* Color-specific styles */
            .focus-color {
              color: #8cc63f;
            }
             
            .balance-color {
              color: #3d7d6d;
            }
             
            .adventure-color {
              color: #f15a29;
            }
             
            .imagination-color {
              color: #7d5ba6;
            }
             
            .grounding-color {
              color: #a0522d;
            }
             
            .charisma-color {
              color: #d63384;
            }
             
            /* --- MOBILE FIRST STYLES (< 768px) --- */
            /* This is the default state */
            .energy-spectrum-container {
              width: 100%;
              height: 400px;
              position: relative;
              margin-top: -60px;
            }
             
            .spectrum-image-wrapper img {
              width: 200px;
            }
             
            /* Gold line for all screen sizes - horizontal line style */
            .desktop-content .gold-line {
              height: 2px;
              background: #c8a870;
              margin: 0 0 15px 0;
              width: 100%;
              display: block;
              border-radius: 1px;
            }
             
            .energy-item .desktop-content {
              display: none;
              /* Hide detailed text on small mobile */
            }
             
            .energy-item .mobile-content {
              display: block;
              font-size: 1.3rem;
              font-weight: 700;
            }
             
            /* Mobile positioning - improved to avoid negative positions */
            .focus-item {
              top: 70px;
              left: 32%;
              transform: translateX(-80%);
            }
             
            .balance-item {
              top: 70px;
              right: 101px;
            }
             
            .adventure-item {
              top: 53%;
              left: 35px;
              transform: translateY(-100%);
            }
             
            .imagination-item {
              top: 54%;
              right: 32px;
              transform: translateY(-100%);
            }
             
            .grounding-item {
              bottom: 70px;
              left: 113px;
            }
             
            .charisma-item {
              bottom: 70px;
              right: 110px;
            }
             
            /* Small tablets (441px - 707px) - Numbers Only View */
            @media (min-width: 441px) and (max-width: 707px) {
              .energy-spectrum-container {
                height: 480px;
              }
             
              .spectrum-image-wrapper img {
                width: 270px;
              }
             
              /* Hide desktop content and show mobile content (numbers only) */
              .energy-item .desktop-content {
                display: none;
              }
             
              .energy-item .mobile-content {
                display: block;
                font-size: 1.5rem;
                font-weight: 700;
              }
             
              /* Better positioning for the numbers */
              .focus-item {
                top: 66px;
                left: 34%;
                transform: translateX(-50%);
              }
             
              .balance-item {
                top: 70px;
                right: 29%;
              }
             
              .adventure-item {
                top: 53%;
                left: 11%;
              }
             
              .imagination-item {
                top: 53%;
                right: 11%;
              }
             
              .grounding-item {
                bottom: 70px;
                left: 30%;
              }
             
              .charisma-item {
                bottom: 70px;
                right: 28%;
                left: auto;
                transform: none;
              }
            }
             
            /* Small tablets (>= 768px) */
            @media (min-width: 708px) and (max-width: 991px) {
              .energy-spectrum-container {
                height: 450px;
                margin-top: 1px;
              }
             
              .spectrum-image-wrapper img {
                width: 280px;
              }
             
              .energy-item .desktop-content {
                display: block;
                width: 200px;
              }
             
              .energy-item .mobile-content {
                display: none;
              }
             
              .desktop-content h2 {
                font-size: 0.9rem;
                font-weight: 500;
                margin: 0 0 5px 0;
                font-family: 'Raleway', sans-serif;
              }
             
              .desktop-content .unit {
                font-size: 0.7rem;
                color: #9e8844;
                text-transform: uppercase;
                margin-left: 5px;
                font-weight: 100;
                font-family: 'Raleway', sans-serif;
              }
             
              .desktop-content p {
                font-size: 0.8rem;
                font-weight: 400;
                margin: 0 0 10px 0;
                line-height: 1.2;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                font-family: 'Raleway', sans-serif;
              }
             
              .desktop-content .btn-energy {
                padding: 5px 7px;
                font-size: 0.7rem;
                font-weight: 500;
                border-radius: 4px;
                background: transparent;
                border: 1px solid;
                text-transform: uppercase;
                text-decoration: none;
              }
             
              /* Positioning for small tablets */
              .focus-item {
                top: 0;
                left: 27%;
                transform: translateX(-50%);
                text-align: right;
              }
             
              .balance-item {
                top: 2px;
                right: 15%;
                text-align: left;
              }
             
              .adventure-item {
                top: 285px;
                left: 10px;
                text-align: right;
              }
             
              .imagination-item {
                top: 268px;
                right: 10px;
                text-align: left;
              }
             
              .grounding-item {
                bottom: -10px;
                left: 18%;
                text-align: right;
              }
             
              .charisma-item {
                bottom: 0px;
                right: 18%;
                left: auto;
                transform: none;
                text-align: left;
              }
            }
             
            /* --- DESKTOP & LARGE TABLET STYLES (>= 992px) --- */
            @media (min-width: 992px) {
              /* Common styles for all desktop sizes */
              .energy-spectrum-section {
                min-height: 600px;
              }
             
              .energy-item .desktop-content {
                display: block;
              }
             
              .energy-item .mobile-content {
                display: none;
              }
             
              /* Button hover effects for all desktop sizes */
              .desktop-content .btn-energy:hover {
                color: white !important;
              }
             
              /* Color-specific hover backgrounds */
              .desktop-content .btn-energy.focus-color:hover {
                background-color: #8cc63f;
              }
             
              .desktop-content .btn-energy.balance-color:hover {
                background-color: #3d7d6d;
              }
             
              .desktop-content .btn-energy.adventure-color:hover {
                background-color: #f15a29;
              }
             
              .desktop-content .btn-energy.imagination-color:hover {
                background-color: #7d5ba6;
              }
             
              .desktop-content .btn-energy.grounding-color:hover {
                background-color: #a0522d;
              }
             
              .desktop-content .btn-energy.charisma-color:hover {
                background-color: #d63384;
              }
            }
             
            /* --- LARGE DESKTOP STYLES (>= 1364px) --- */
            @media (min-width: 1364px) {
              .energy-spectrum-section {
                min-height: 750px;
              }
             
              .energy-spectrum-container {
                width: 100%;
                max-width: 1400px;
                height: 850px;
                margin-top: 1px;
              }
             
              .spectrum-image-wrapper img {
                width: 520px;
              }
             
              .desktop-content h2 {
                font-size: 2rem;
                font-weight: 600;
                margin: 0 0 5px 0;
              }
             
              .desktop-content .unit {
                font-size: 1rem;
                color: #9e8844;
                /*text-transform: uppercase;*/
                margin-left: 8px;
              }
             
              .desktop-content p {
                font-size: 1.4rem;
                font-weight: 400;
                margin: 0 0 18px 0;
                line-height: 1.4;
                text-transform: uppercase;
                letter-spacing: 0.5px;
              }
             
              .desktop-content .btn-energy {
                padding: 8px 9px;
                font-size: 0.9rem;
                font-weight: 500;
                border-radius: 5px;
                background: transparent;
                border: 2px solid;
                text-transform: uppercase;
                transition: all 0.3s ease;
                text-decoration: none;
                letter-spacing: 1px;
              }
             
              /* Large Desktop positioning */
              .focus-item {
                top: 12px;
                left: 30%;
                transform: translateX(-50%);
                width: 320px;
                text-align: right;
              }
             
              .focus-item .desktop-content {
                width: 280px;
                margin: 0 auto;
              }
             
              .balance-item {
                top: 12px;
                right: 16%;
                width: 320px;
                text-align: left;
              }
             
              .balance-item .desktop-content {
                width: 280px;
              }
             
              .adventure-item {
                top: 515px;
                left: 90px;
                width: 320px;
                text-align: right;
              }
             
              .adventure-item .desktop-content {
                width: 280px;
                margin-left: auto;
              }
             
              .imagination-item {
                top: 512px;
                right: 90px;
                width: 320px;
                text-align: left;
              }
             
              .imagination-item .desktop-content {
                width: 280px;
              }
             
              .grounding-item {
                bottom: 25px;
                left: 17%;
                width: 320px;
                text-align: right;
              }
             
              .grounding-item .desktop-content {
                width: 280px;
                margin-left: auto;
              }
             
              .charisma-item {
                bottom: 25px;
                right: 16%;
                left: auto;
                width: 320px;
                text-align: left;
                transform: none;
              }
             
              .charisma-item .desktop-content {
                width: 280px;
              }
            }
             
            /* --- MEDIUM DESKTOP/TABLET STYLES (992px - 1364px) --- */
            @media (min-width: 992px) and (max-width: 1363px) {
              .energy-spectrum-section {
                min-height: 600px;
              }
             
              .energy-spectrum-container {
                width: 100%;
                max-width: 1250px;
                height: 600px;
                margin-top: 1px;
              }
             
              .spectrum-image-wrapper img {
                width: 450px;
              }
             
              .energy-item .desktop-content {
                width: 230px;
              }
             
              .desktop-content h2 {
                font-size: 1.2rem;
                font-weight: 500;
                margin: 0 0 5px 0;
                display: inline-block;
              }
             
              .desktop-content .unit {
                font-size: 0.8rem;
                color: #9e8844;
                text-transform: uppercase;
                margin-left: 8px;
              }
             
              .desktop-content p {
                font-size: 1rem;
                font-weight: 400;
                margin: 0 0 15px 0;
                line-height: 1.3;
                text-transform: uppercase;
                letter-spacing: 0.5px;
              }
             
              .desktop-content .btn-energy {
                padding: 6px 8px;
                font-size: 0.8rem;
                font-weight: 500;
                border-radius: 5px;
                background: transparent;
                border: 2px solid;
                text-transform: uppercase;
                transition: all 0.3s ease;
                text-decoration: none;
                letter-spacing: 0.5px;
              }
             
              /* Medium Desktop positioning */
              .focus-item {
                top: 9px;
                left: 28%;
                transform: translateX(-50%);
                width: 240px;
                text-align: right;
              }
             
              .focus-item .desktop-content {
                width: 220px;
                margin: 0 auto;
              }
             
              .balance-item {
                top: 6px;
                right: 12%;
                width: 240px;
                text-align: left;
              }
             
              .balance-item .desktop-content {
                width: 220px;
              }
             
              .adventure-item {
                top: 370px;
                left: 30px;
                width: 240px;
                text-align: right;
              }
             
              .adventure-item .desktop-content {
                width: 220px;
                margin-left: auto;
              }
             
              .imagination-item {
                top: 350px;
                right: 20px;
                width: 240px;
                text-align: left;
              }
             
              .imagination-item .desktop-content {
                width: 220px;
              }
             
              .grounding-item {
                bottom: 0px;
                left: 15%;
                width: 240px;
                text-align: right;
              }
             
              .grounding-item .desktop-content {
                width: 220px;
                margin-left: auto;
              }
             
              .charisma-item {
                bottom: 16px;
                right: 15%;
                left: auto;
                transform: none;
                width: 240px;
                text-align: left;
              }
             
              .charisma-item .desktop-content {
                width: 220px;
              }
            }
            
             .spectrum-container {
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
              padding: 50px;
            }
            
            .center-image {
              width: 300px;
              z-index: 1;
            }
            
            .energy-box {
              position: absolute;
              width: 220px;
              text-align: center;
              font-size: 16px;
            }
            
            .energy-box h2 {
              font-size: 28px;
              margin: 0;
              font-weight: 700;
            }
            
            .energy-box span {
              font-size: 14px;
              color: #bfa252;
            }
            
            .energy-box p {
              font-size: 18px;
              font-weight: 400;
              margin: 10px 0;
            }
            
            /* Connecting Lines */
            .energy-box::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              width: 2px;
              height: 120px; /* length of the line */
              background: currentColor;
              transform-origin: top center;
              z-index: -1; /* keeps line behind the text */
            }
            
            /* Adjust angles + distance */
            .top-left::before {
              transform: rotate(220deg) translateY(-150px);
            }
            .top-right::before {
              transform: rotate(320deg) translateY(-150px);
            }
            .bottom-left::before {
              transform: rotate(140deg) translateY(-150px);
            }
            .bottom-right::before {
              transform: rotate(40deg) translateY(-150px);
            }
            .mid-left::before {
              transform: rotate(180deg) translateY(-150px);
            }
            .mid-right::before {
              transform: rotate(0deg) translateY(-150px);
            }
            
            /* Button colors */
            .top-left button {
              border-color: #8cc63f;
              color: #8cc63f;
            }
            .top-right button {
              border-color: #3d7d6d;
              color: #3d7d6d;
            }
            .bottom-left button {
              border-color: #f15a29;
              color: #f15a29;
            }
            .bottom-right button {
              border-color: #7d5ba6;
              color: #7d5ba6;
            }
            .mid-left button {
              border-color: #a0522d;
              color: #a0522d;
            }
            .mid-right button {
              border-color: #d63384;
              color: #d63384;
            }
            /* =============================================== */
            /* === NEW ENERGY SPECTRUM SECTION STYLES END ==== */
            /* =============================================== */
 
            /* Phia philosophy start */
 
                .image-banner {
                  position: relative;
                  width: 100%;
                  overflow: hidden;
                  opacity: 0.95; /* Slightly faded look */
                  margin-top: -150px;
                  border-radius: 0 !important;
                  box-shadow: none !important;
                }
                 
                .image-banner img {
                  width: 100%;
                  height: auto;
                  display: block;
                  opacity: 0.9; /* Slightly faded look */
                  object-fit: cover;
                  border-radius: 0 !important;
                  box-shadow: none !important;
                }
                 
                /* Center text */
                .banner-text {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: #fff;
                  font-size: 3.5rem;
                  font-weight: 700;
                  text-align: center;
                  z-index: 2;
                }
                 
            /* Phia philosophy end */
            
            /* Supercharger section start */
                
                .supercharged-section {
                  margin-top: -60px;
                   font-size: 9rem; 
                }
                 
               .supercharged-section h2 {
                  color: #A8903B;
                  font-size: 40px;
                  margin: -60px 0px 20px;
                  font-family: "Raleway", sans-serif;
                  font-optical-sizing: auto;
                  font-weight: 200;
                  font-style: normal;
                }
                   /* Supercharger section end */
                   
             /* Botanical world cards  stat section*/
             
                .stats-section {
                  text-align: center;
                  padding: 20px 10px;
                  margin-top: -50px;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .stats-section h2 {
                  font-size: 20px;
                  font-weight: bold;
                  color: #9e8844; /* golden text */
                  margin-bottom: 40px;
                  text-transform: uppercase;
                  letter-spacing: 1px;
                   font-family: 'Raleway', sans-serif;
                }
                 
                .stats-container {
                  display: grid;
                  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                  gap: 30px;
                  justify-items: center;
                   font-family: 'Raleway', sans-serif;
                }
                 
                .stat-box {
                  max-width: 160px;
                }
                 
                .stat-box img {
                  width: 130px;
                  height: 130px;
                  border-radius: 50%;
                  object-fit: cover;
                  margin-bottom: 15px;
                  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition */
                }
                 
                .stat-box img:hover {
                  transform: scale(1.1); /* Slight zoom-in effect */
                  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Optional shadow on hover */
                }
                 
                 
                .stat-box h3 {
                  font-size: 35px;
                  color: #d2b55b; /* golden number */
                  margin: 5px 0;
                  font-weight: bold;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .stat-box p {
                  font-size: 14px;
                  color: #9e8844;
                  margin: 0;
                  line-height: 1.4;
                  font-family: 'Raleway', sans-serif;
                }
                 
                /* Responsive tweaks */
                @media (max-width: 600px) {
                  .stat-box h3 {
                    font-size: 22px;
                  }
                  .stat-box p {
                    font-size: 13px;
                  }
                }
         /*End Botanical world cards  stat section*/
         
          /* Info Section */
                .info-section {
                  padding: 60px 20px;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .info-section h2 {
                  font-size: 8px;
                  font-weight: medium;
                  color: #ab8844; /* Golden Brown */
                  letter-spacing: 1px;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .button-group {
                  margin-top: 40px;
                }
                 
                .custom-btn {
                  display: inline-block;
                  padding: 14px 40px;
                  margin: 0 10px;
                  font-size: 16px;
                  font-weight: 500;
                  text-transform: uppercase;
                  letter-spacing: 1px;
                  color: #9e8844;
                  background: transparent;
                  border: 2px solid #9e8844;
                  border-radius: 12px;
                  cursor: pointer;
                  transition: all 0.3s ease;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .custom-btn:hover {
                  background: #9e8844;
                  color: #fff;
                }
        /*End Info Section */


           /*start image gallery */
              
             
            .gallery {
              display: grid;
              grid-template-columns: repeat(3, 1fr); /* 3 columns */
              gap: 20px;
              max-width: 700px;
              margin: 40px auto;
              margin-top: -40px;
            }
            
            .gallery img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              border-radius: 12px;
              transition: transform 0.5s ease, box-shadow 0.5s ease; /* smooth animation */
              cursor: pointer;
            }
            
            /* Hover zoom effect */
            .gallery img:hover {
              transform: scale(1.08); /* zoom in slightly */
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* optional shadow */
            }

                 
                .story-section {
                  display: flex;
                  justify-content: center; /* center horizontally */
                  align-items: center; /* align vertically */
                  gap: 20px; /* space between text and button */
                  margin: 40px 0;
                  margin-top: -10px;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .story-section h2 {
                  font-size: 18px;
                  font-weight: medium;
                  color: #9f8852;
                  letter-spacing: 1px;
                  margin: 0;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .btn {
                  padding: 12px 30px;
                  border: 2px solid #9f8852;
                  background: transparent;
                  color: #9f8852;
                  font-size: 14px;
                  font-weight: 400;
                  letter-spacing: 1px;
                  cursor: pointer;
                  border-radius: 8px;
                  transition: all 0.3s ease;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .btn:hover {
                  background: #9f8852;
                  color: #fff;
                }
            /*End image gallery    */
            
       /* client review section start////////////////////// */
           .testimonial-section {
            width: 100%;
            padding: 60px 0;
            text-align: center;
        }
    
        .testimonial-section h2 {
            font-size: 30px;
            color: #b9a253; /* Gold color */
            margin-bottom: 50px;
            letter-spacing: 2px;
            font-weight: 500;
            text-transform: uppercase;
            font-family: 'Raleway', sans-serif;
        }
       
        /* Swiper container needs to allow space for arrows */
        .swiper-container {
            width: 100%;
            max-width: 1200px;
            padding: 20px 60px; /* Padding on sides for arrows */
            box-sizing: border-box;
        }
 
        .swiper-slide {
            /* This ensures that the cards inside will have equal height */
            height: auto;
            display: flex;
        }
 
        .testimonial-card {
            background: #fff;
            width: 100%;
            padding: 40px;
            border-radius: 25px; /* Softer corners */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
        }
 
        .testimonial-image {
            height: 100px; /* Set a fixed height */
            margin-bottom: 10px;
        }
 
        .testimonial-image img {
            height: 100%;
            width: 150px; /* Fixed width for consistency */
            object-fit: cover; /* Ensure the image fits well */
            border-radius: 15px; /* Rounded corners for images */
        }
 
        .testimonial-card h3 {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 12px;
            color: #0b0f29;
        }
 
        /* This is the key to equal card heights */
        .testimonial-card p {
            font-size: 15px;
            line-height: 1.6;
            color: #555;
            flex-grow: 1; /* Pushes author to the bottom */
            /*margin-bottom: 10px;*/
            /*justify-content: space-between;*/
            text-align: justify;
            margin-top: -15px;
            
        }
 
        .testimonial-card .author {
            font-size: 14px;
            color: #777;
            font-weight: 500;
        }
       
        .read-more {
            color: #b9a253;
            font-weight: 500;
            text-decoration: none;
        }
 
        /* --- Custom Navigation & Pagination --- */
        .swiper-button-next,
        .swiper-button-prev {
            color: #b9a253 !important; /* Gold color for arrows */
            --swiper-navigation-size: 30px; /* Make arrows smaller */
        }
 
        .swiper-pagination {
            position: static; /* Let it sit naturally below the swiper */
            margin-top: 40px; /* This creates the space you wanted */
        }
       
        .swiper-pagination .swiper-pagination-bullet {
            background: #d1d1d1;
            opacity: 1;
        }
 
        .swiper-pagination .swiper-pagination-bullet-active {
            background: #b9a253; /* Gold color for active dot */
        }
       
        /* Adjustments for smaller screens */
        @media (max-width: 767px) {
            .swiper-container {
                padding: 20px 15px; /* Less padding on mobile */
            }
            .swiper-button-next,
            .swiper-button-prev {
                display: none; /* Hide arrows on mobile */
            }
        }
 
    /*1 Client review end */
 
                /* ===================
              Client Review Section 2- Read more section
               =================== */
            a {
              color: #b9975b;
              text-decoration: none;
            }
            a:hover {
              color: #a3854f;
            }
             
            .main-content-area {
              padding-right: 30px;
            }
             
            .sidebar {
              padding-left: 30px;
            }
             
            /* Card style for main content */
            .content-box {
              background: #ffffff;
              border: none;
              padding: 40px;
              margin-bottom: 30px;
            }
             
            .post-title {
              font-family: "Lato", sans-serif;
              font-size: 44px;
              font-weight: 400;
              margin-bottom: 10px;
              color: #3a3a3a;
              line-height: 1.2;
            }
             
            .meta {
              font-family: "Lato", sans-serif;
              font-size: 14px;
              color: #b9975b;
              margin-bottom: 28px;
            }
             
            .meta a {
              color: inherit;
            }
             
            /* Nav links between posts */
            .nav-links {
              display: flex;
              justify-content: space-between;
              margin: 20px 0;
              font-size: 14px;
              padding: 0 5px;
            }
             
            /* Comment Section Title */
            .comment-reply-title {
              font-family: "Lato", sans-serif;
              font-size: 28px;
              font-weight: 400;
              color: #3a3a3a;
              margin-bottom: 10px;
            }
             
            .logged-in-text {
              font-size: 15px;
            }
             
            /* Sidebar widgets */
            .widget {
              margin-bottom: 45px;
            }
            .widget-title {
              font-family: "Lato", sans-serif;
              font-size: 20px;
              margin-bottom: 20px;
              font-weight: 400;
              color: #3a3a3a;
            }
             
            .widget-title.lowercase {
              text-transform: lowercase;
            }
             
            .widget ul {
              list-style: none;
              padding-left: 0;
              margin-bottom: 0;
            }
            .widget ul li {
              margin-bottom: 12px;
              line-height: 1.5;
              font-size: 15px;
            }
             
            .widget p {
              font-size: 15px;
              line-height: 1.7;
            }
             
            /* Search box with icon */
            .search-box {
              position: relative;
            }
            .search-box input.search-field {
              border-radius: 0;
              font-size: 14px;
              padding: 8px 15px;
              border: 1px solid #e0e0e0;
              height: 46px;
              box-shadow: none;
            }
            .search-box input.search-field:focus {
              border-color: #b9975b;
            }
            .search-box button.search-submit {
              position: absolute;
              right: 0;
              top: 0;
              height: 46px;
              width: 46px;
              border: none;
              background: transparent;
              color: #777;
              font-size: 14px;
              cursor: pointer;
            }
             
            /* === NEW MEDIA QUERY FOR MOBILE RESPONSIVENESS ADDED HERE === */
            @media (max-width: 991.98px) {
              .container {
                /* Adds space on the left and right of the screen */
                padding-left: 15px;
                padding-right: 15px;
              }
              .main-content-area,
              .sidebar {
                /* Removes horizontal padding that was for the desktop gutter */
                padding-left: 0;
                padding-right: 0;
              }
              .sidebar {
                /* Adds space between main content and sidebar when stacked */
                margin-top: 40px;
              }
              .content-box {
                /* Reduces padding inside the white boxes on mobile */
                padding: 25px;
              }
              .post-title {
                /* Adjusts title size for mobile */
                font-size: 32px;
              }
              .comment-reply-title {
                /* Adjusts subtitle size for mobile */
                font-size: 24px;
              }
            }
             
            /* Client Review page-2 end */
            
            /* =============================
  Instagram- AMBASSADOR SECTION start
   ============================= */
   .btn-load {
  border-radius: 6px;
  border: 1px solid #ccc;
  color: #666;
  background-color: #f5f5f5;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 22px;
  letter-spacing: 1.2px;
}

.btn-follow {
  background: #8f7532;
  /* Darker gold */
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  border: none;
  font-size: 0.85rem;
  padding: 10px 22px;
  letter-spacing: 1.2px;
}

.btn-follow i {
  font-size: 0.9rem;
  margin-right: 6px;
}

/*Ambassador section*/

.ambassador-column .divider {
  max-width: 280px;
  margin-bottom: 30px;
}
#hambassador{
    font-size: 1.3rem;
            letter-spacing: 1px;
            font-family: 'Raleway', sans-serif;
             font-weight: bold; 
            color: #9e8844; /* Golden Brown */
            line-height: 1.2;
            text-align: center;
            margin-top: -180px;
            
}

#instaparagraph{
    font-size: 1.1rem;
  color: #3a3a3a;
  margin-bottom: 30px;
  text-align: center;
  /* Center aligned */
  line-height: 1.9;
   font-family: 'Raleway', sans-serif;
}

/*.ambassador-column p {*/
/*  font-size: 1.1rem;*/
/*  color: #3a3a3a;*/
/*  margin-bottom: 30px;*/
/*  text-align: center;*/
  /* Center aligned */
/*  line-height: 1.8;*/
/*   font-family: 'Raleway', sans-serif;*/
/*}*/

.btn-ambassador {
  border-radius: 12px;
  /* More rounded */
  border: 2px solid #a2873b;
  color: #a2873b;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 42px;
  /* Larger */
  letter-spacing: 2px;
   font-family: 'Raleway', sans-serif;
   font-weight: 400;
}



/* ========================= */
/* RESPONSIVE DESIGN START   */
/* ========================= */

/* Large tablets & iPad Pro (992px - 1200px) */
@media (max-width: 1200px) {
  #hambassador {
    font-size: 1.4rem;
    margin-top: -150px; /* slightly reduced to avoid overflow */
    line-height: 1.3;
  }

  #instaparagraph {
    font-size: 1rem;
    line-height: 1.8;
    padding: 0 60px;
  }

  .divider {
    max-width: 240px;
  }

  .ambassador-section {
    padding: 4rem 2rem;
  }

  .btn-ambassador,
  .ambassador-section .btn {
    font-size: 1rem;
    padding: 12px 38px;
  }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
  #hambassador {
    font-size: 1.25rem;
    margin-top: -80px;
  }

  #instaparagraph {
    font-size: 1rem;
    line-height: 1.8;
    padding: 0 30px;
  }

  .divider {
    max-width: 220px;
  }

  .ambassador-section {
    padding: 3rem 1rem;
  }

  .btn-ambassador,
  .ambassador-section .btn {
    padding: 10px 36px;
    font-size: 0.95rem;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  #hambassador {
    font-size: 1.1rem;
    margin-top: -40px;
    line-height: 1.4;
  }

  #instaparagraph {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
    padding: 0 15px;
  }

  .divider {
    max-width: 180px;
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .ambassador-section {
    padding: 2rem 0.5rem;
  }

  .btn-ambassador,
  .ambassador-section .btn {
    display: inline-block;
    padding: 10px 30px;
    font-size: 0.9rem;
    letter-spacing: 1px;
  }
}
/*   Instagram- AMBASSADOR SECTION  end */

 
            /* ===== Start Salons & Spas Section ===== */
                .salons-section h3 {
                  font-size: 1.8rem;
                  color: #a2873b;
                  font-weight: 400;
                  letter-spacing: 2px;
                  margin-bottom: 20px;
                  font-family: 'Raleway', sans-serif;
                }
                
                #salonheading{
                     margin-top: -80px;
                }
                 
                .salons-section p {
                  font-size: 1.2rem;
                  color: #444;
                  margin-bottom: 40px;
                  font-family: 'Raleway', sans-serif;
                }
                 
                .salons-section .btn-salon {
                  border-radius: 12px;
                  border: 2px solid #a2873b;
                  /* color: #a2873b; */
                  /*font-size: 1rem;*/
                  padding: 10px 20px;
                  font-weight: 400;
                  letter-spacing: 1px;
                  text-align: white;
                  font-family: 'Raleway', sans-serif;
                }
        /* ===== End Salons & Spas Section ===== */
      
    /* Footer start*/

.phia-footer {
  padding-top: 30px;
  padding-bottom: 20px;
}
 
/*
   --- Newsletter & Divider Section ---
*/
.newsletter-section {
  text-align: center;
}
 
.newsletter-input::placeholder {
  color: #a9a9a9;
  opacity: 1;
}
.wpcf7-form-control.newsletter-input {
   height: 50px;
  font-size: 15px;
  margin-bottom: px;
  color: #545660;
  background-color: #ffffff;
  border: 2px solid #999999;
  border-radius: 5px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  
}
 
.newsletter-input:focus {
  border-color: #9e8844;
  box-shadow: 0 0 0 0.2rem rgba(158, 136, 68, 0.18);
  /* .newsletter-section and .newsletter-form-row layout styles removed for Bootstrap grid */
  min-width: 150px;
  
}
 
.newsletter-btn:hover {
  background: #9e8844;
  color: #fff;
}
 
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0 10px 0;
}
 
.section-divider::before,
.section-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #d2b55b; /* Using a neutral light gray for dividers */
  margin: 0 40px;
}
 
.divider-icon {
  max-width: 100px;
}
 
.newsletter-title {
  /* COLOR: Set heading color to Gloden (#9e8844) */
  color: #9e8844;
  /* font-weight: 100;  */
  font-size: 29px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  text-transform: uppercase;
   font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
 
.newsletter-form .form-control {
  height: 50px;
  font-size: 15px;
  /*margin-bottom: px;*/
  color: #545660;
  background-color: #ffffff;
  border: 2px solid #999999;
  border-radius: 5px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
 
.newsletter-form .form-control::placeholder {
  color: #a9a9a9; /* A lighter grey for the placeholder */
  opacity: 1;
}
 
.newsletter-form .form-control:focus {
  border-color: #9e8844;
  box-shadow: 0 0 0 0.2rem rgba(158, 136, 68, 0.25);
  outline: 0;
}
 
.btn-join {
  /* COLOR: Set button styles to use Accent color */
  background-color: transparent;
  border: 2px solid #9e8844;
  color: #9e8844;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 6px;
 
  width: 100%;
  height: 50px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
 
.btn-join:hover {
  background-color: #9e8844;
  color: #ffffff;
}
 
/*
   --- Main Footer Links Section ---
*/
.main-footer-section {
  /*padding-top: 10px;*/
}
 
.footer-logo {
  max-width: 140px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


 
.widget-title {
  color: #9e8844;
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 25px;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
}
 
 .footer-links ul {
  list-style-type: none;
  padding-left: 0;
  
}

.footer-links,
.footer-contact {
  list-style: none;
  padding-left: 0;
}
 
.footer-links li,
.footer-contact li {
  margin-bottom: 7px;
 
  font-size: 14px;
  font-weight: 400;
}
 
.footer-links li a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
}
 
.footer-links li a:hover {
  color: #d2b55b;
}
 
.footer-contact i {
  color: #9e8844;
  margin-right: 12px;
  font-size: 16px;
}
 
.footer-phone-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
    font-weight: 500;
  font-size: 16px;
  color: #333333;
}
.footer-phone-link:hover {
  color: #d2b55b;
}
.footer-email-link,
.footer-address-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
    font-weight: 500;
  font-size: 16px;
  color: #333333;
}
.footer-email-link:hover,
.footer-address-link:hover {
  color: #d2b55b;
}
 
.social-icons {
  margin-top: 25px;
}
 
.social-icons a {
  color: #9e8844;
  font-size: 18px;
  margin-right: 18px;
  text-decoration: none;
}
 
.social-icons a:hover {
  color: #d6bc6b;
  opacity: 1;
}
 
/*
   --- Copyright Section ---
*/
.copyright-section {
  text-align: center;
  padding-top: 20px;
  margin-top: 0px;
  border-top: 1px solid #e5e5e5; /* Neutral border color */
}
 
.copyright-section p {
  margin: 0;
  font-size: 14px;
  color: #9e8844;
}
 
/*Footer End*/
 
/*Home page or front page end*/

/*Energy Wave page start*/

/*Margin top for product pagination*/
/* This targets only Page 2, 3, etc. */
body.paged .shop-wraper {
    padding-top: 190px; /* Adjust this number to match your header height */
}


/*Product*/




@media (max-width: 767px) {
    /* 1. Target the link wrapping the image */
    .product-wrap > a {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* 2. Target the specific div highlighted in your inspector */
    div.product-img {
        display: flex !important;
        justify-content: center !important; /* This moves the image into that purple space */
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 3. Ensure the image itself doesn't have a left float */
    .product-img img {
        display: block !important;
        margin: 0 auto !important;
        float: none !important;
    }
    
    .woocommerce-product-gallery {
    margin-top: 30px !important; 
}

}



.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce-page .woocommerce-error .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-message .button {
	float: right
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
	width: 100%
}

.woocommerce .col2-set::after,
.woocommerce .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce-page .col2-set::before {
	content: " ";
	display: table
}

.woocommerce .col2-set::after,
.woocommerce-page .col2-set::after {
	clear: both
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
	float: left;
	max-width: 48% !important;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
	float: right;
	max-width: 48% !important;
}

.woocommerce img,
.woocommerce-page img {
	height: auto;
	max-width: 100%;
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
	float: left;
	width: 48%
}

.woocommerce #content div.product div.thumbnails::after,
.woocommerce #content div.product div.thumbnails::before,
.woocommerce div.product div.thumbnails::after,
.woocommerce div.product div.thumbnails::before,
.woocommerce-page #content div.product div.thumbnails::after,
.woocommerce-page #content div.product div.thumbnails::before,
.woocommerce-page div.product div.thumbnails::after,
.woocommerce-page div.product div.thumbnails::before {
	content: " ";
	display: table
}

.woocommerce #content div.product div.thumbnails::after,
.woocommerce div.product div.thumbnails::after,
.woocommerce-page #content div.product div.thumbnails::after,
.woocommerce-page div.product div.thumbnails::after {
	clear: both
}

.woocommerce #content div.product div.thumbnails a,
.woocommerce div.product div.thumbnails a,
.woocommerce-page #content div.product div.thumbnails a,
.woocommerce-page div.product div.thumbnails a {
	float: left;
	width: 30.75%;
	margin-right: 3.8%;
	margin-bottom: 1em
}

.woocommerce #content div.product div.thumbnails a.last,
.woocommerce div.product div.thumbnails a.last,
.woocommerce-page #content div.product div.thumbnails a.last,
.woocommerce-page div.product div.thumbnails a.last {
	margin-right: 0
}

.woocommerce #content div.product div.thumbnails a.first,
.woocommerce div.product div.thumbnails a.first,
.woocommerce-page #content div.product div.thumbnails a.first,
.woocommerce-page div.product div.thumbnails a.first {
	clear: both
}

.woocommerce #content div.product div.thumbnails.columns-1 a,
.woocommerce div.product div.thumbnails.columns-1 a,
.woocommerce-page #content div.product div.thumbnails.columns-1 a,
.woocommerce-page div.product div.thumbnails.columns-1 a {
	width: 100%;
	margin-right: 0;
	float: none
}

.woocommerce #content div.product div.thumbnails.columns-2 a,
.woocommerce div.product div.thumbnails.columns-2 a,
.woocommerce-page #content div.product div.thumbnails.columns-2 a,
.woocommerce-page div.product div.thumbnails.columns-2 a {
	width: 48%
}

.woocommerce #content div.product div.thumbnails.columns-4 a,
.woocommerce div.product div.thumbnails.columns-4 a,
.woocommerce-page #content div.product div.thumbnails.columns-4 a,
.woocommerce-page div.product div.thumbnails.columns-4 a {
	width: 22.05%
}

.woocommerce #content div.product div.thumbnails.columns-5 a,
.woocommerce div.product div.thumbnails.columns-5 a,
.woocommerce-page #content div.product div.thumbnails.columns-5 a,
.woocommerce-page div.product div.thumbnails.columns-5 a {
	width: 16.9%
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
	float: right;
	width: 48%;
	clear: none
}

.woocommerce #content div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page #content div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
	clear: both
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs::after,
.woocommerce #content div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::before,
.woocommerce-page div.product .woocommerce-tabs ul.tabs::after,
.woocommerce-page div.product .woocommerce-tabs ul.tabs::before {
	content: " ";
	display: table
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after,
.woocommerce-page div.product .woocommerce-tabs ul.tabs::after {
	clear: both
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
	display: inline-block
}

.woocommerce #content div.product #reviews .comment::after,
.woocommerce #content div.product #reviews .comment::before,
.woocommerce div.product #reviews .comment::after,
.woocommerce div.product #reviews .comment::before,
.woocommerce-page #content div.product #reviews .comment::after,
.woocommerce-page #content div.product #reviews .comment::before,
.woocommerce-page div.product #reviews .comment::after,
.woocommerce-page div.product #reviews .comment::before {
	content: " ";
	display: table
}

.woocommerce #content div.product #reviews .comment::after,
.woocommerce div.product #reviews .comment::after,
.woocommerce-page #content div.product #reviews .comment::after,
.woocommerce-page div.product #reviews .comment::after {
	clear: both
}

.woocommerce #content div.product #reviews .comment img,
.woocommerce div.product #reviews .comment img,
.woocommerce-page #content div.product #reviews .comment img,
.woocommerce-page div.product #reviews .comment img {
	float: right;
	height: auto
}

.woocommerce ul.products,
.woocommerce-page ul.products {
	clear: both
}

.woocommerce ul.products::after,
.woocommerce ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce-page ul.products::before {
	content: " ";
	display: table
}

.woocommerce ul.products::after,
.woocommerce-page ul.products::after {
	clear: both
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: left;
	margin: 0 3.8% 2.992em 0;
	padding: 0;
	position: relative;
	width: 22.05%;
	margin-left: 0
}

.woocommerce ul.products li.first,
.woocommerce-page ul.products li.first {
	clear: both
}

.woocommerce ul.products li.last,
.woocommerce-page ul.products li.last {
	margin-right: 0
}

.woocommerce ul.products.columns-1 li.product,
.woocommerce-page ul.products.columns-1 li.product {
	width: 100%;
	margin-right: 0
}

.woocommerce ul.products.columns-2 li.product,
.woocommerce-page ul.products.columns-2 li.product {
	width: 48%
}

.woocommerce ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-3 li.product {
	width: 30.75%
}

.woocommerce ul.products.columns-5 li.product,
.woocommerce-page ul.products.columns-5 li.product {
	width: 16.95%
}

.woocommerce ul.products.columns-6 li.product,
.woocommerce-page ul.products.columns-6 li.product {
	width: 13.5%
}

.woocommerce-page.columns-1 ul.products li.product,
.woocommerce.columns-1 ul.products li.product {
	width: 100%;
	margin-right: 0
}

.woocommerce-page.columns-2 ul.products li.product,
.woocommerce.columns-2 ul.products li.product {
	width: 48%
}

.woocommerce-page.columns-3 ul.products li.product,
.woocommerce.columns-3 ul.products li.product {
	width: 30.75%
}

.woocommerce-page.columns-5 ul.products li.product,
.woocommerce.columns-5 ul.products li.product {
	width: 16.95%
}

.woocommerce-page.columns-6 ul.products li.product,
.woocommerce.columns-6 ul.products li.product {
	width: 13.5%
}

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	float: left
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	float: right
}

.woocommerce .woocommerce-pagination ul.page-numbers::after,
.woocommerce .woocommerce-pagination ul.page-numbers::before,
.woocommerce-page .woocommerce-pagination ul.page-numbers::after,
.woocommerce-page .woocommerce-pagination ul.page-numbers::before {
	content: " ";
	display: table
}

.woocommerce .woocommerce-pagination ul.page-numbers::after,
.woocommerce-page .woocommerce-pagination ul.page-numbers::after {
	clear: both
}

.woocommerce .woocommerce-pagination ul.page-numbers li,
.woocommerce-page .woocommerce-pagination ul.page-numbers li {
	display: inline-block
}

.woocommerce #content table.cart img,
.woocommerce table.cart img,
.woocommerce-page #content table.cart img,
.woocommerce-page table.cart img {
	height: auto
}

.woocommerce #content table.cart td.actions,
.woocommerce table.cart td.actions,
.woocommerce-page #content table.cart td.actions,
.woocommerce-page table.cart td.actions {
	text-align: right
}

.woocommerce #content table.cart td.actions .input-text,
.woocommerce table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions .input-text {
	width: 80px
}

.woocommerce #content table.cart td.actions .coupon,
.woocommerce table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
	float: left
}

.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
	width: 100%
}

.woocommerce .cart-collaterals::after,
.woocommerce .cart-collaterals::before,
.woocommerce-page .cart-collaterals::after,
.woocommerce-page .cart-collaterals::before {
	content: " ";
	display: table
}

.woocommerce .cart-collaterals::after,
.woocommerce-page .cart-collaterals::after {
	clear: both
}

.woocommerce .cart-collaterals .related,
.woocommerce-page .cart-collaterals .related {
	width: 30.75%;
	float: left
}

.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
	width: 48%;
	float: left
}

.woocommerce .cart-collaterals .cross-sells ul.products,
.woocommerce-page .cart-collaterals .cross-sells ul.products {
	float: none
}

.woocommerce .cart-collaterals .cross-sells ul.products li,
.woocommerce-page .cart-collaterals .cross-sells ul.products li {
	width: 48%
}

.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .shipping_calculator {
	width: 48%;
	clear: right;
	float: right
}

.woocommerce .cart-collaterals .shipping_calculator::after,
.woocommerce .cart-collaterals .shipping_calculator::before,
.woocommerce-page .cart-collaterals .shipping_calculator::after,
.woocommerce-page .cart-collaterals .shipping_calculator::before {
	content: " ";
	display: table
}

.woocommerce .cart-collaterals .shipping_calculator::after,
.woocommerce-page .cart-collaterals .shipping_calculator::after {
	clear: both
}

.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-1,
.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-2,
.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-1,
.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-2 {
	width: 47%
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	float: right;
	width: 48%
}

.woocommerce ul.cart_list li::after,
.woocommerce ul.cart_list li::before,
.woocommerce ul.product_list_widget li::after,
.woocommerce ul.product_list_widget li::before,
.woocommerce-page ul.cart_list li::after,
.woocommerce-page ul.cart_list li::before,
.woocommerce-page ul.product_list_widget li::after,
.woocommerce-page ul.product_list_widget li::before {
	content: " ";
	display: table
}

.woocommerce ul.cart_list li::after,
.woocommerce ul.product_list_widget li::after,
.woocommerce-page ul.cart_list li::after,
.woocommerce-page ul.product_list_widget li::after {
	clear: both
}

.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img,
.woocommerce-page ul.cart_list li img,
.woocommerce-page ul.product_list_widget li img {
	float: right;
	height: auto
}

.woocommerce form .form-row::after,
.woocommerce form .form-row::before,
.woocommerce-page form .form-row::after,
.woocommerce-page form .form-row::before {
	content: " ";
	display: table
}

.woocommerce form .form-row::after,
.woocommerce-page form .form-row::after {
	clear: both
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	display: block
}

.woocommerce form .form-row label.checkbox,
.woocommerce-page form .form-row label.checkbox {
	display: inline;
	border-radius: 8px!important;
}

.woocommerce form .form-row select,
.woocommerce-page form .form-row select {
	width: 100%
}

.woocommerce form .form-row .input-text,
.woocommerce-page form .form-row .input-text {
	box-sizing: border-box;
	width: 100%
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
	width: 47%;
	overflow: visible
}

.woocommerce form .form-row-first,
.woocommerce-page form .form-row-first {
	float: left
}

.woocommerce form .form-row-last,
.woocommerce-page form .form-row-last {
	float: right
}

.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
	clear: both
}

.woocommerce form .password-input,
.woocommerce-page form .password-input {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	width:100% !important;
}

.woocommerce form .password-input input[type=password],
.woocommerce-page form .password-input input[type=password] {
	padding-right: 2.5rem
}

.woocommerce form .password-input input::-ms-reveal,
.woocommerce-page form .password-input input::-ms-reveal {
	display: none
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	right: .7em;
	top: .7em;
	cursor: pointer
}

/*password eye*/
/*.woocommerce form .show-password-input::after,*/
/*.woocommerce-page form .show-password-input::after {*/
/*	font-family: WooCommerce;*/
/*	speak: never;*/
/*	font-weight: 400;*/
/*	font-variant: normal;*/
/*	text-transform: none;*/
/*	line-height: 1;*/
/*	-webkit-font-smoothing: antialiased;*/
/*	margin-left: .618em;*/
/*	content: "\e010";*/
/*	text-decoration: none*/
/*}*/

/*.woocommerce form .show-password-input.display-password::after,*/
/*.woocommerce-page form .show-password-input.display-password::after {*/
/*	color: #585858*/
/*}*/

.woocommerce #payment .form-row select,
.woocommerce-page #payment .form-row select {
	width: auto
}

.woocommerce #payment .terms,
.woocommerce #payment .wc-terms-and-conditions,
.woocommerce-page #payment .terms,
.woocommerce-page #payment .wc-terms-and-conditions {
	text-align: left;
	padding: 0 1em 0 0;
	float: left
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	float: right;
}
/* --- Place Order Button --- */

/* Main button style */
.wc-block-components-checkout-place-order-button {
    background-color: #ffffff !important;
    color: #9e8844 !important;
    
    /* --- CHANGES HERE --- */
    border: 1px solid #9e8844 !important; /* Correctly sets a 2px solid border */
    border-radius: 8px !important;       /* Adds rounded corners */
    padding: 8px 12px !important;       /* Makes the button smaller */
    font-size: 17px !important;          /* Optional: adjust font size if needed */
}

/* Hover style (when the mouse is over the button) */
.wc-block-components-checkout-place-order-button:hover {
    background-color: #9e8844 !important;
    color: #ffffff !important;
    border-color: #9e8844 !important; /* Ensures the border color stays the same on hover */
}

/*place order button end*/

.woocommerce .woocommerce-billing-fields::after,
.woocommerce .woocommerce-billing-fields::before,
.woocommerce .woocommerce-shipping-fields::after,
.woocommerce .woocommerce-shipping-fields::before,
.woocommerce-page .woocommerce-billing-fields::after,
.woocommerce-page .woocommerce-billing-fields::before,
.woocommerce-page .woocommerce-shipping-fields::after,
.woocommerce-page .woocommerce-shipping-fields::before {
	content: " ";
	display: table
}

.woocommerce .woocommerce-billing-fields::after,
.woocommerce .woocommerce-shipping-fields::after,
.woocommerce-page .woocommerce-billing-fields::after,
.woocommerce-page .woocommerce-shipping-fields::after {
	clear: both
}

.woocommerce .woocommerce-terms-and-conditions,
.woocommerce-page .woocommerce-terms-and-conditions {
	margin-bottom: 1.618em;
	padding: 1.618em
}

.woocommerce .woocommerce-oembed,
.woocommerce-page .woocommerce-oembed {
	position: relative
}
/*MY ACCOUNT PAGE*/

/*Account margin top*/
body.woocommerce-account .woocommerce {
  margin-top: 150px !important;
}

.woocommerce h1.text-center {
  color: #9e8844; /* Or your desired color */
  font-weight: 200;
}

/* 1. The main container for the navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    border: 1px solid #e0e0e0; /* Light grey border for the whole container */
    border-radius: 0;           /* Sharp corners, no rounding */
    max-width: 300px;           /* THIS IS THE CHANGE: Sets the maximum width */
}

/* 2. The list itself (removes bullets and default spacing) */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
}

/* 3. Each navigation item (creates the separator lines) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    border-bottom: 1px solid #e0e0e0; /* Separator line */
}

/* 4. Remove the border from the very last item */
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

/* 5. The actual links inside the navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 20px;       /* Spacing inside each item */
    color: #9e8844;            /* Your gold text color */
    text-decoration: none;
    transition: all 0.2s ease;
}

/* 6. A subtle effect for the active page and when hovering */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #fafafa;  /* A very light grey highlight */
    color: #8a7539;            /* A slightly darker gold for emphasis */
}
.woocommerce-account .woocommerce-MyAccount-content {
	float: right;
	width: 68%
}

.woocommerce-account .woocommerce-MyAccount-content mark {
	background-color: transparent;
	color: inherit;
	font-weight: 700
}

.woocommerce-page.left-sidebar #content.twentyeleven {
	width: 58.4%;
	margin: 0 7.6%;
	float: right
}

.woocommerce-page.right-sidebar #content.twentyeleven {
	margin: 0 7.6%;
	width: 58.4%;
	float: left
}

.twentyfourteen .tfwc {
	padding: 12px 10px 0;
	max-width: 474px;
	margin: 0 auto
}

.twentyfourteen .tfwc .product .entry-summary {
	padding: 0 !important;
	margin: 0 0 1.618em !important
}

.twentyfourteen .tfwc div.product.hentry.has-post-thumbnail {
	margin-top: 0
}

/*
================================================================
FINAL - Strong Override Responsive CSS for My Account Page
================================================================
*/

/* --- AGGRESSIVE FIX for My Account Page Input Blocking --- */

/* Rule 1: Force the entire WooCommerce form container to the highest visual layer. */
.woocommerce-account .woocommerce {
    position: relative; /* This is required for z-index to work correctly. */
    z-index: 99 !important; /* A high value ensures it sits on top of other page elements. */
}

/* Rule 2 (Optional but Recommended): Explicitly disable mouse interactions on the hero overlay. */
/* This makes the overlay "unclickable," allowing clicks to pass through to the form below it. */
.hero-section .overlay {
    pointer-events: none !important;
}

/* --- This code activates on screens 768px wide or smaller --- */
@media (max-width: 768px) {

  /* 1. Force the main container to be full-width */
  /* We use the body class to make this rule very specific */
  body.woocommerce-account .container.py-5 {
    width: 100% !important;
    padding-left: 15px !important;  /* Adds a small buffer from the screen edge */
    padding-right: 15px !important; /* Adds a small buffer from the screen edge */
    box-sizing: border-box !important; /* Crucial for correct width calculation */
  }

  /* 2. Force the columns to stack */
  body.woocommerce-account .woocommerce .col2-set .u-column1,
  body.woocommerce-account .woocommerce .col2-set .u-column2 {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* 3. Force space between stacked forms */
  body.woocommerce-account .woocommerce .col2-set .u-column1 {
    margin-bottom: 50px !important;
  }
}
#customer_login h2 {
  color: #9e8844 !important; /* Replace with your desired color */
   font-weight: 200;
   margin-top:50px;
  /*text-align: center !important;*/
}

/*
================================================================
ULTIMATE OVERRIDE: Responsive CSS for WooCommerce Forms
This is an aggressive ruleset designed to override stubborn themes.
================================================================
*/

/* --- This code activates on screens 768px wide or smaller --- */
@media (max-width: 768px) {

  /* Step 1: Force the PARENT container of the columns to stop using Flexbox. */
  /* This is the most common reason columns stay side-by-side. */
  .woocommerce #customer_login.u-columns.col2-set {
    display: block !important; /* This disables flexbox and forces child elements to stack */
  }

  /* Step 2: Force EACH column to be full-width. */
  /* This targets both the "Login" (.u-column1) and "Register" (.u-column2) divs. */
  .woocommerce #customer_login .u-column1,
  .woocommerce #customer_login .u-column2 {
    width: 100% !important;     /* Takes the full screen width */
    max-width: 100% !important; /* Overrides any max-width limits */
    float: none !important;     /* Removes any older float properties */
    margin-left: 0 !important;  /* Resets all horizontal spacing */
    margin-right: 0 !important;
  }

  /* Step 3: Add a clean space below the first column (Login). */
  .woocommerce #customer_login .u-column1 {
    margin-bottom: 40px !important;
  }
}



/* Account page end */


/* Submit btn*/

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background-color: #121212 !important;
    color: #9e8844 !important;
	/*float: left;*/
    margin-right: 15px;
	border-radius: 8px!important;
	border: 1px solid #9e8844!important;
   /* --- EDITS FOR SMALLER HEIGHT --- */
    font-size: 13px !important;       /* REDUCED font size to shrink the button's core height */
    padding: 8px 12px !important;      /* ADJUSTED padding for a balanced, small look */
    line-height: 1.2 !important;       /* Helps control vertical spacing */
    font-weight: 600 !important;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button:hover{
     background-color: #9e8844 !important;
    color: #ffffff !important;
}

/*Return to cart btn*/
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-totals-coupon-link, a.components-button.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained, a.wc-block-components-checkout-return-to-cart-button {
    background-color: #ffffff !important;
    color: #9e8844 !important;
    text-decoration:none;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    padding: 5px !important;    padding: 10px !important;padding: 10px !important;
    border: 1px solid #121212 !important;
    border-radius: 0 !important;}
    
.woocommerce-checkout a.wc-block-components-checkout-return-to-cart-button,
.woocommerce-checkout a.wc-block-components-checkout-return-to-cart-button:hover {
    text-decoration: none;
}

/*Proceed to checkout btn*/
.wc-block-cart__submit-button {
    box-sizing: border-box !important;
    margin: 0;
    width: 100% !important;
    border: 1px solid !important;
    background-color: #ffffff !important;
    border: 1px solid #9e8844 !important;
    color: #9e8844 !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
     text-decoration:none;
    
}
.wc-block-cart__submit-button:hover{
	background-color: #9e8844 !important;
    border: 1px solid #9e8844!important;
    color: #fff !important;
     text-decoration:none;
}
.wc-block-cart-item__remove-link{
	color: #e2a192 !important;
	text-decoration:none;
}
/*Responsive of Energy wave page*/
@media (max-width: 991px) {
  .shop-wraper {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden; /* Prevents accidental horizontal scrolling */
    margin-top:30px;
  }
}

/*quantity*/
/* 1. Style the Quantity Input Box (the highlighted element) */
.woocommerce .quantity .qty {
    width: 50px !important;
    height: 35px !important; /* Adjust to match your button height */
    border: 2px solid #9E8844 !important; /* Gold border to match your design */
    border-radius: 5px !important;        /* Same roundness as your button */
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    color: #9e8844 !important;
    text-align: center;
    background-color: #ffffff !important;
     padding: 0 !important;         /* Removes internal spacing */
}

/* 2. Style the Label text (if it exists in your code) */
.woocommerce .quantity label {
    display: block !important; /* Ensures it stays on its own line */
    margin-bottom: 8px !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #444444 !important;
}

/* 3. If your theme uses 'screen-reader-text' to hide the label, 
   un-hide it so your styling actually shows up: */
.woocommerce .quantity label.screen-reader-text {
    position: static !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Force the increase/decrease arrows to be visible on page load */
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
    opacity: 1 !important;
    display: block !important;
    cursor: pointer;
}

/* For Firefox Browsers */
.woocommerce .quantity .qty {
    -moz-appearance: number-input !important;
}

/* Optional: Ensure the arrows have enough space to show clearly */
.woocommerce .quantity .qty {
    padding-right: 4px !important;
    appearance: auto !important;
}

/* Keep the border color the same on hover and when clicking (focus) */
.woocommerce .quantity .qty:hover,
.woocommerce .quantity .qty:focus {
    border-color: #9E8844 !important; /* Matches the gold color */
    outline: none !important;        /* Removes the default browser blue outline */
    box-shadow: none !important;     /* Removes any glow effect your theme might add */
}

/*ADD TO CART BUTTON IN PRODUCT PAGE*/

/*Select option button*/
/* 1. Make the product wrapper a flex container that fills the height */
.products.row .product-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 2. Make the text/button container expand to fill available space */
.products.row .products-txt {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 3. Push the button to the absolute bottom of its container */
.products.row .products-txt .add_to_cart_button {
    margin-top: auto !important;
    display: inline-block;
    align-self: center; /* Keeps button centered horizontally */
}



/* 1. MAIN CARD LAYOUT */

/* This controls the card's appearance and internal alignment */
    .shop-wraper .product-wrap {
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease-in-out;
}

.shop-wraper .product-wrap:hover {
    transform: translateY(-5px); /* Lifts the card up by 5 pixels */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* Makes the shadow bigger and darker */
}

/*Tags added margin top*/

.term-alternative-medicine .shop-wraper,
.term-anti-aging .shop-wraper,
.term-anti-depression .shop-wraper,
.term-aromatherapy .shop-wraper,
.term-ayurvedic .shop-wraper,
.term-bioenergetics .shop-wraper,
.term-body-wash .shop-wraper,
.term-energy-bouquet .shop-wraper,
.term-energy-medicine .shop-wraper,
.term-flower-essence .shop-wraper,
.term-help-with-sleep .shop-wraper,
.term-herbal-healing .shop-wraper,
.term-holistic-wellness .shop-wraper,
.term-mist .shop-wraper,
.term-multivitamin .shop-wraper,
.term-organic-skin-care .shop-wraper,
.term-quantum-energy .shop-wraper,
.term-quantum-nutrition .shop-wraper,
.term-vitality .shop-wraper,
.term-weight-loss .shop-wraper {
    margin-top: 200px !important;
}


/* 2. PRODUCT NAME STYLING */

/* Small and clean product title */
    .shop-wraper .product-wrap h2.woocommerce-loop-product__title {
    font-weight: 500;
    color: #444;
    min-height: 45px;
    margin: 10px 0;
    font-size: 0.2em !important ; /* Makes it slightly smaller than its current size */
}


/* 4. PRICE STYLING */
    .shop-wraper .product-wrap .price {
    font-size: 16px;
    font-weight: 600;
    color: #9e8844;
    margin: 0 0 15px 0; /* Adds space below the price */
    display: block;     /* THIS IS THE FIX: Forces the button onto the next line. */
}

/* 5. "ADD TO CART" BUTTON STYLING */
/* The button will now appear directly below the price */
    .shop-wraper .product-wrap a.button {
    /* --- Color and Border --- */
    background-color: transparent !important;
    color: #9e8844 !important;
    border: 2px solid #9e8844 !important;

    /* --- Shape and Size --- */
    border-radius: 8px !important;
    padding: 10px 18px !important;  /* VERY SMALL padding for a compact button */
    

    /* --- Text Styling --- */
    font-size: 11px !important;   /* VERY SMALL font size */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    transition: all 0.3s ease;
    line-height: 1.2 !important;       /* Helps control vertical spacing */
}

/* Button hover effect */
    .shop-wraper .product-wrap a.button:hover {
    background-color: #9e8844 !important;
    color: #ffffff !important;
}
/*
 * Changes the color of the main title on single product pages.
 */
.single-product .product_title.entry-title {
    color: #9e8844 !important; /* Sets the text color to your brand's gold */
}
/* Add to Cart button on Single Product Page */
    button.single_add_to_cart_button.button.alt {
     background-color: transparent !important;
    color: #9e8844 !important;
    border: 2px solid #9e8844 !important;
    /* --- Shape and Size --- */
    border-radius: 8px !important;
    padding: 10px 15px !important;  /* VERY SMALL padding for a compact button */
    /* --- Text Styling --- */
    font-size: 10px !important;   /* VERY SMALL font size */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    transition: all 0.3s ease;
    margin-left: 10px !important;
}
/* single product page related products alignment*/
.products-txt.product-content {
  display: flex;
  flex-direction: column; /* Stacks the items vertically */
  align-items: center;   /* Centers items horizontally */
  text-align: center;
  text-decoration: none;
}
.products-txt a {
  text-decoration: none!important;
}

/* Hover Effect */
    button.single_add_to_cart_button.button.alt:hover {
    background-color: #9e8844 !important;
    color: #ffffff !important;
}
/*
 * Adds a border to the "Add to cart" buttons, 
 * typically in Related Products and upsells.
 */

/* Style for the button */
.woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
     background-color: transparent !important;
    color: #9e8844 !important;
    border: 2px solid #9e8844 !important;

    /* --- Shape and Size --- */
    border-radius: 8px !important;
    padding: 10px 15px !important;  /* VERY SMALL padding for a compact button */
    

    /* --- Text Styling --- */
    font-size: 10px !important;   /* VERY SMALL font size */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    
    transition: all 0.3s ease;
}

/* Hover effect for the button */
.woocommerce a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {
    background-color: #9e8844 !important; /* Fills the button with gold on hover */
    color: #ffffff !important;            /* Makes the text white on hover */
}

/*EMPTY CART BUTTONS*/
.wc-block-grid__product .wp-block-button__link.add_to_cart_button {
    /* --- Colors & Border --- */
    background-color: transparent !important;
    color: #9e8844 !important;
    border: 2px solid #9e8844 !important;

    /* --- Shape & Sizing --- */
    padding: 8px 20px !important;
    border-radius: 8px !important;
    line-height: 1.5 !important;
    text-decoration:none;
    transition: all 0.3s ease;
}

/* Hover effect for the button */
.wc-block-grid__product .wp-block-button__link.add_to_cart_button:hover {
    background-color: #9e8844 !important;
    color: #ffffff !important;
    text-decoration:none;
}
    /*View cart text*/
    a.added_to_cart {
    display: block !important;    /* Forces the link onto a new line */
    margin-top: 5px !important;  /* Adds some space above the "View cart" link */
    text-align: center;         /* Ensures the text is centered */
    width: 100%;                /* Helps with consistent centering */
    }
    
/* Changes the color of the sad face icon on the empty cart page.*/
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    background-color: #9e8844 !important; /* Sets the icon color to your brand's gold */
}

/* Changes the color of the "Your cart is currently empty!" message.*/
.wc-block-cart__empty-cart__title {
    color: #9e8844 !important; /* Sets the text color to your brand's gold */
}

/* Changes the color of the "New in store" text on the empty cart page.*/
.wp-block-woocommerce-empty-cart-block .wp-block-separator + h2 {
    color: #9e8844 !important; /* Sets the text color to your brand's gold */
}

/*Headings of Energy Wave*/
/* Changes the color of the main title on product category pages.*/
.woocommerce-products-header__title.page-title {
    color: #9e8844 !important; /* Sets the text color to your brand's gold */
    display:none!important;
}
.woocommerce-breadcrumb {
  display: none !important;
}

/*Single product page title*/
/*h1.product_title.entry-title {*/
/*  margin-top: 10px !important;*/
/*}*/

/*#product-49733 {*/
/*  margin-top: 70px !important;*/
/*}*/

/*.single-product-wrapper {*/
/*  margin-top: 300px !important; */
/*}*/

/*whole container margin top for single product page*/
/* Energy wave pages margin top */

body.single-product #container {
  margin-top: 150px !important;
}

/*Cart margin top*/

body.woocommerce-cart .wc-block-components-sidebar-layout {
  margin-top: 80px !important;
   color: #9e8844 !important;
}
body.woocommerce-cart .wc-block-cart__empty-cart__title {
  margin-top: 150px !important;
}

/*Checkout margin top*/
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  margin-top: 100px !important;
}
/*Cart and Checkout text*/
.display-3.fw-bold {
/*margin-top:80px;*/
  color: #000000; 
}

/*Coupon button*/
button.wc-block-components-totals-coupon__button {
    background-color: #ffffff; /* The background color from the image */
    border: 1px solid #9e8844; /* A light grey border to complement the background */
    color: #9e8844; /* A dark color for the text */
    border-radius:8px;
}

/* Style for the button on hover */
button.wc-block-components-totals-coupon__button:hover {
    background-color: #9e8844;
    border-color: #9e8844;
    color: #ffffff;
}
/*remove item text*/
button.wc-block-cart-item__remove-link:hover {
    text-decoration: none !important;
}
button.wc-block-cart-item__remove-link{
    text-decoration: none !important;
}



/* Custom styles for the WooCommerce "Default sorting" dropdown.*/
.woocommerce-ordering .orderby {
    /* --- Reset Browser Default Styles --- */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*margin-left:200px;*/
    

    /* --- Border & Shape --- */
    border: 1px solid #9e8844 !important;
    border-radius: 8px !important;
    background-color: #ffffff;

    /* --- Spacing & Sizing --- */
    padding: 5px 25px 5px 12px !important; /* Extra right padding for the custom arrow */
    height: auto;
    min-width: 220px; /* Give it a more comfortable width */

    /* --- Font & Text --- */
    color: #9e8844!important;
    font-size: 14px;
    font-weight: 400;

    /* --- Custom Arrow --- */
    /* This is an SVG arrow icon colored with your brand's gold */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239e8844%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.5%2017.5%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l128%20127.9c3.6%203.6%207.8%205.4%2013%205.4s9.4-1.8%2013-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-13%200-5-1.9-9.4-5.4-13z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}

/* --- Optional: Remove the label if you don't need it --- */
.woocommerce-ordering .orderby-label {
    display: none;
}
/* === NEW CODE FOR THE OPEN DROPDOWN OPTIONS === */

/* Style for the options when the dropdown is open */
.woocommerce-ordering .orderby option {
    /* A very light grey that looks clean and modern */
    background-color: #ffffff !important; 
    color: #9e8844 !important;
    padding: 8px !important; /* Adds some spacing to the options */
}

.woocommerce-ordering select.orderby:focus {
    outline: none;
     border-color: #9e8844; 
}
/*pagination*/
/* Add border to each pagination button */
.woocommerce-pagination ul.page-numbers li a, 
.woocommerce-pagination ul.page-numbers li span {
    border: 1px solid #9e8844 !important; /* Matches your text color */
    padding: 8px 12px !important;
    margin: 0 2px;
    text-decoration: none;
    border-radius: 4px; /* Optional: adds slightly rounded corners */
}

/* Change color when hovering over numbers */
.woocommerce-pagination ul.page-numbers li a:hover {
    background-color: #f4f4f4;
}

/* Highlight the active/current page */
.woocommerce-pagination ul.page-numbers li span.current {
    background-color: #212529;
    color: #fff;
}


/*Select product dropdown*/
select#productNameDropdown {
    background-color: #ffffff; /* Replace with your desired background color */
    border: 1px solid #9e8844; /* Replace with your desired border thickness and color */
    color: #9e8844; /* Optional: changes the text color */
    border-radius: 8px !important;
    padding: 5px 25px 5px 12px !important;
     /* This is an SVG arrow icon colored with your brand's gold */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%239e8844%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-13%205.4A17.5%2017.5%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013l128%20127.9c3.6%203.6%207.8%205.4%2013%205.4s9.4-1.8%2013-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-13%200-5-1.9-9.4-5.4-13z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
    width: 300px !important; /* Added to reduce width */
}
.product-dropdown select {
    -webkit-appearance: none; /* For Chrome, Safari, and newer versions of Opera */
    -moz-appearance: none;    /* For Firefox */
    appearance: none;         /* Standard property */
}
/*Responsiveness of select energy wave*/
@media (max-width: 767px) {
  /* Allow the container to take more space if needed */
  .product-dropdown {
    max-width: 100%;
  }

  select#productNameDropdown {
    padding: 8px 1px 8px 12px !important; /* Slightly reduce padding */
    font-size: 14px; /* Make font smaller for mobile readability */
  }
}


#productNameDropdown:focus {
    outline: none;
}

/*Energy Wave page end*/

/*Research page start*/

#Researchh{
   background-color: #fff;
  color: #333;
  font-family: 'Raleway', sans-serif;
  line-height: 1.9; /* better readability */ 
}

/* Science */
/* Science Title */
#science-title {
  font-size: 3rem;
  font-weight: 500;
  color: #9e8844;
  text-transform: uppercase;
  text-align: left;        /* Change from center to left */
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
  margin-top: 210px;
  margin-left: 0;          /* Ensure no left margin */
  font-family: 'Raleway', sans-serif;
}

/* Science Subtitle */
#science-subtitle {
  font-size: 1.7rem;
  font-weight: 700;
  color: #9e8844;
  text-align: left;        /* Change to left */
  margin-left: 0;          /* REMOVE the 10px margin to align with title above */
  margin-top: 0;
  letter-spacing: 1.2px;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
}

/* ===== Science Image ===== */
#science-img {
  width: 90%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem auto;
  border-radius: 10px; /* optional visual touch */
  transition: all 0.3s ease;
}

/* ===== Science Text ===== */
#science-text {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #4d4d4d;
  font-weight: 400;
  text-align: justify;
  margin-bottom: 1.5rem;
  margin-top: -10px;
  font-family: 'Raleway', sans-serif;
  max-width: 900px;
}

/* ===== Large Screens (≥1440px) ===== */
@media (min-width: 1440px) {
  #science-img {
    width: 70%;
  }
  #science-text {
    font-size: 1.25rem;
    line-height: 2;
  }
}

/* ===== iPad Pro (992px – 1080px) ===== */
@media (max-width: 1080px) and (min-width: 992px) {
  #science-section {
    padding: 0 2rem;
  }
  #science-img {
    width: 90%; /* increased size specifically for iPad Pro */
    max-width: 1000px; /* allows it to expand more */
  }
  #science-text {
    font-size: 1.05rem;
    line-height: 1.85;
    margin-top: 0;
  }
}

/* ===== Tablets (769px – 991px) ===== */
@media (max-width: 991px) and (min-width: 769px) {
  #science-img {
    width: 85%;
  }
  #science-text {
    font-size: 1rem;
    line-height: 1.8;
  }
}

/* ===== Mobile Devices (≤768px) ===== */
@media (max-width: 768px) {
  #science-img {
    width: 90%;
  }
  #science-text {
    font-size: 0.95rem;
    line-height: 1.75;
  }
}

/* ===== Small Mobiles (≤480px) ===== */
@media (max-width: 480px) {
  #science-img {
    width: 95%;
  }
  #science-text {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}


/* Discoveries */
#discoveries-title {
  font-size: 2rem; /* slightly bigger */
  font-weight: 600;
  color: #9e8844;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  margin-top: -60px;
   font-family: 'Raleway', sans-serif;
}
#discoveries-list {
  list-style-type: disc;
  padding-left: 2rem;
  font-size: 1.1rem; /* bigger */
  line-height: 2;
  font-weight: 400;
  color: #4d4d4d;
  margin-bottom: 2rem;
   font-family: 'Raleway', sans-serif;
}
#discoveries-section {
  padding: 3.5rem 0;
}
#colorscents-img,
#interference-img {
  max-width: 60%;
  height: auto;
  margin:  0; /* spacing above and below images */
  margin-top: -50px;
}

/* Traditional */
#traditional-title {
  font-size: 2rem;
  font-weight: 600;
  color: #9e8844;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 2rem;
   font-family: 'Raleway', sans-serif;
}
#traditional-text {
  font-size: 1.1rem;
  line-height: 2;
  font-weight: 400;
  color: #4d4d4d;
  text-align: justify;
  margin-bottom: 2rem;
   font-family: 'Raleway', sans-serif;
}

/* Supercharged */
#supercharged-title {
  font-size: 2rem;
  font-weight: 600;
  color: #9e8844;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 2rem;
   font-family: 'Raleway', sans-serif;
}
#supercharged-text {
  font-size: 1.1rem;
  line-height: 2;
  font-weight: 400;
  color: #4d4d4d;
  text-align: justify;
  margin-bottom: 2rem;
   font-family: 'Raleway', sans-serif;
}

/* Book */
#book-title {
  font-size: 2rem; /* bigger */
  font-weight: 700;
  color: #9e8844;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
   font-family: 'Raleway', sans-serif;
}
#book-subtitle {
  font-size: 1.6rem;
  font-weight: 600;
  color: #9e8844;
  /* margin-bottom: 10px; */
   font-family: 'Raleway', sans-serif;
}
.book-text {
  font-size: 1.1rem;
  line-height: 2;
  color: #4d4d4d;
  text-align: justify;
   font-family: 'Raleway', sans-serif;
  /* margin-bottom: 1.5rem; */
  
}
#book-img {
  max-width: 100%;
  height: auto;
  margin-top: 1.5rem;
}

/* Signature */
#signature-img {
  max-width: 260px;
  margin-bottom: 1rem;
}
#buy-btn {
  border: 2px solid #9e8844;
  color: #9e8844;
  padding: 12px 30px; /* bigger button */
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 1rem;
  transition: all 0.3s ease;
  text-decoration: none;
}
#buy-btn:hover {
  background-color: #9e8844;
  color: #fff;
}

/*Reasearch page end*/

/*Alchemy page start*/


#alchemy-page{
  margin-top:100px;
}
#company-page-wrapper {  
    padding-left: 100px;   
    padding-right: 100px; 
    
}

#services-description {
  text-align: justify;
  font-family: 'Raleway', sans-serif;
  font-size:15px;
  color:#4d4d4d;
}

/* Buttons */
#btn-book,
#btn-gift {
  border: 2px solid #9a883e;
  padding: 10px 20px;
  font-weight: 600;
  color: #9a883e;
  background-color: transparent;
  transition: 0.3s ease;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  border-radius:8px;
  font-family: 'Raleway', sans-serif;
}

#btn-book:hover,
#btn-gift:hover {
  background: #9a883e;
  color: #fff;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
}

/* Headings */
#section-heading {
  font-family: 'Raleway', sans-serif;
   font-size: 2.5rem; /* bigger */
  /*font-weight: 400;*/
  color: #9e8844;
   font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

#sub-heading-services,
#sub-heading-reviews,
#sub-heading-gallery {
  color: #9a883e;
  text-transform: uppercase;
  margin-bottom: 30px;
  font-weight: 400;
  font-family: 'Raleway', sans-serif;
}

/* Responsive */
@media (max-width: 576px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 767.98px) {   
      #company-page-wrapper {    
          padding-left: 40px;     
          padding-right: 40px;   
          
      }
      }
      /* Zoom hover animation */
.row.g-3 img {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
}

.row.g-3 img:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


/*Alchemy page end*/


/*Philosophy page start*/

#philosophy-page {
  font-family: 'Raleway', sans-serif;
  background-color: #ffffff;
  color: #333333;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
  margin-top: 80px;
}

/* Shared heading style */
#philosophy-page h2.section-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: #9e8844;
  font-size: 45px;
   font-family: 'Raleway', sans-serif;
}

/* PHILOSOPHY heading */
#philosophy-page h2.section-title.philosophy-title {
  font-size: 2rem;
  /*font-weight: 100;*/
  margin-bottom: 2.5rem;
   font-family: 'Raleway', sans-serif;
   font-size: 45px;
}

/* INGREDIENTS + PHI headings */
#philosophy-page h2.section-title.sub-title {
  font-size: 1.8rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 1.5rem;
   font-family: 'Raleway', sans-serif;
   /*font-size: 50px;*/
}

/* Body text */
#philosophy-page p {
  font-size: 17px;
  font-weight: 400;
  color: #4d4d4d;
  text-align: left;
  margin-bottom: 1rem;
   font-family: 'Raleway', sans-serif;
}

#philosophy-page .text-justify {
  text-align: justify;
   font-family: 'Raleway', sans-serif;
}

/* Ingredient List */
#philosophy-page .ingredient-inline {
  line-height: 1.8;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
   font-family: 'Raleway', sans-serif;
}

/* Images */
#philosophy-page .phi-img {
  max-width: 400px;
  height: auto;
}

/* Section spacing */
#philosophy-page section.sub-section {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important; /* fixed missing value */
   font-family: 'Raleway', sans-serif;
}

/* Responsive scaling */
@media (max-width: 992px) {
  #philosophy-page h2.section-title.philosophy-title {
    font-size: 2.2rem;
     font-family: 'Raleway', sans-serif;
  }
  #philosophy-page h2.section-title.sub-title {
    font-size: 1.8rem;
     font-family: 'Raleway', sans-serif;
  }
}

@media (max-width: 576px) {
  #philosophy-page h2.section-title.philosophy-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
     font-family: 'Raleway', sans-serif;
  }
  #philosophy-page h2.section-title.sub-title {
    font-size: 1.3rem;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
     font-family: 'Raleway', sans-serif;
  }

  /* Text */
  #philosophy-page p,
  #philosophy-page .ingredient-inline {
    font-size: 14px;
    line-height: 1.7;
    text-align: justify;
     font-family: 'Raleway', sans-serif;
  }

  /* Images */
  #philosophy-page img.img-fluid {
    max-width: 95%;
    margin: 0 auto;
    display: block;
    border-radius: 6px;
  }
}

/*Philosophy page end*/

/*Company page start*/

/* General Body Styles */
#companyy {
  font-family: 'Raleway', sans-serif;
  color: #333;
  line-height: 1.8;
}
.company-page-wrapper {  
    padding-left: 100px;   
    padding-right: 100px; 
    
}
/* Headings */
#main-heading {
  text-align: center;
  letter-spacing: 4px;
  font-size: 50px;
  color: #9a883e;
  text-transform: uppercase;
  /*font-weight: 300;*/
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

#sub-heading-company,
#sub-heading-science,
#sub-heading-sparkle,
#sub-heading-giving {
  text-align: center;
  letter-spacing: 2px;
  color: #9a883e;
  text-transform: uppercase;
  margin-bottom: 30px;
  font-weight: 600;
}

/* Paragraphs */
#p-company-1,
#p-company-2,
#p-science-1,
#p-science-2,
#p-sparkle-1,
#p-sparkle-2,
#p-sparkle-3,
#p-giving-quote,
#p-giving-1,
#p-bio-1,
#p-bio-2,
#p-bio-3,
#p-bio-4 {
  text-align: justify;
  font-size: 16px;
  margin-bottom: 20px;
  font-family: 'Raleway', sans-serif;
  color:#4d4d4d;
}

/* Images */
#img-company {
  width: 100%; /* Make the image take the full width of its container */
  height: 200px; /* SET YOUR DESIRED CROP HEIGHT HERE */
  object-fit: cover; /* This is the magic property that crops the image */
  object-position: bottom; /* You can change this to 'top', 'bottom', etc., to control the crop focus */
  
}

.image-crop-container {
  /* --- CROP SETTINGS --- */
  height: 500px; /* <-- SET YOUR DESIRED HEIGHT HERE */
  width: 100%;   /*  Or set a specific width like 800px */
  
  /* --- DO NOT CHANGE THESE --- */
  overflow: hidden;
  position: relative;
}

.image-crop-container img {
  /* --- DO NOT CHANGE THESE --- */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* You can change this to 'top', 'bottom', 'left', etc. */
}

#img-science {
  height: 1200px !important; /* Forces the height */
  width: 100%; /* Keeps it constrained to the column width */
  object-fit: cover; /* An attempt to prevent distortion, might not be perfect */
}

#img-giving,
#img-bio {
  border-radius: 0px;
  margin-bottom: 20px;
  width: 100%;
  height: auto;
}
#heightimg{
    height: 100px;
}
#img-science,
#img-bio {
  max-height: 600px;
  object-fit: cover;
}

/* Donate Button */
#btn-donate {
  border: 2px solid #9a883e;
  color: #9a883e;
  background: transparent;
  padding: 10px 25px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  transition: all 0.3s ease-in-out;
  border-radius:8px;
}

#btn-donate:hover {
  background: #9a883e;
  color: #fff;
}

/* Responsive */
@media (max-width: 576px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
}
@media (max-width: 767.98px) {   
      .company-page-wrapper {    
          padding-left: 40px;     
          padding-right: 40px;   
          
      }
      }


/*Company page end*/

/*Education page start*/

 .head {
            text-align: center;
            margin: 40px 0;
            font-family: 'Raleway', sans-serif;
            font-size: 40px;
            font-weight: 400;
            /* matches screenshot */
            letter-spacing: 4px;
            /* adds elegant spacing */
            text-transform: uppercase;
            color: #9E8844;
            margin-top: 190px;
            /* exact color from screenshot */
        }


        .video-container-yt {
            margin-bottom: 40px;
        }

        iframe {
            border-radius: 10px;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
        }

/*Education page end*/

/* Shipping & returns page  CSS start ///////////////////// */
#shippingbody {
    font-family: 'Raleway', sans-serif;
    background-color: #fff;
    color: #333;
    line-height: 1.8;
    margin: 40px;
    margin-top: 200px;
}

#shipping-section {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

#shipping-title {
    font-size: 2.8rem;
    color: #9e8844; /* golden color */
    margin-bottom: 30px;
    margin-top: 157px;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

#shipping-subtitle {
    font-size: 1.6rem;
    color: #9e8844;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
}

#shipping-text {
    font-size: 1rem;
    margin-bottom: 20px;
    text-align: justify;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    line-height: 1.8;
    
}
/* ==========================
   Responsive Design
========================== */

/* Tablets (≤981px) */
@media (max-width: 981px) {
  #shippingbody {
    margin: 25px;
    margin-top: 240px;
  }

  #shipping-title {
    font-size: 2.2rem;
    margin-top: 240px;
  }

  #shipping-subtitle {
    font-size: 1.4rem;
  }

  #shipping-text {
    font-size: 0.95rem;
  }
}

/* Mobile (≤600px) */
@media (max-width: 600px) {
  #shippingbody {
    margin: 20px;
    margin-top: 200px;
  }

  #shipping-title {
    font-size: 1.8rem;
    margin-top: 200px;
    margin-bottom: 20px;
  }

  #shipping-subtitle {
    font-size: 1.2rem;
    margin-top: 20px;
  }

  #shipping-text {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}

/* Extra Small Screens (≤480px) */
@media (max-width: 480px) {
  #shippingbody {
    margin: 15px;
    margin-top: 200px;
  }

  #shipping-title {
    font-size: 1.5rem;
    margin-top: 250px;
    letter-spacing: 1px;
  }

  #shipping-subtitle {
    font-size: 1rem;
    margin-top: 15px;
  }

  #shipping-text {
    font-size: 0.85rem;
    line-height: 1.6;
  }
}

/* ==========================
   Shipping & Returns Page CSS End
========================== */


/* FAQ page CSS start ///////////////////// */ 

#faq-section {
  padding: 40px 40px;
  margin-top: 150px;
}

#faq-title {
  text-align: center;
  margin-bottom: 30px;
  font-size:2.8rem;
  font-weight: lighter;
  color: #a38e4d; /* golden color */
  font-family: 'Raleway', sans-serif;
}

/* Accordion Buttons */
#accordion-button-one,
#accordion-button-two,
#accordion-button-three,
#accordion-button-four,
#accordion-button-five,
#accordion-button-six {
  font-weight: 400;
  color: #000000;
  background: #fff;
  padding: 30px;
  font-family: 'Raleway', sans-serif;
}

#accordion-button-one:focus,
#accordion-button-two:focus,
#accordion-button-three:focus,
#accordion-button-four:focus,
#accordion-button-five:focus,
#accordion-button-six:focus {
  box-shadow: none;
}

#accordion-button-one::after,
#accordion-button-two::after,
#accordion-button-three::after,
#accordion-button-four::after,
#accordion-button-five::after,
#accordion-button-six::after {
  background-image: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  content: "+";
  font-size: 35px;
  color: #000000;
}

#accordion-button-one:not(.collapsed)::after,
#accordion-button-two:not(.collapsed)::after,
#accordion-button-three:not(.collapsed)::after,
#accordion-button-four:not(.collapsed)::after,
#accordion-button-five:not(.collapsed)::after,
#accordion-button-six:not(.collapsed)::after {
  content: "−"; /* minus sign */
}

/* Accordion Bodies */
#accordion-body-one,
#accordion-body-two,
#accordion-body-three,
#accordion-body-four,
#accordion-body-five,
#accordion-body-six {
  color: #d2b55b;
  background: #fff;
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
  margin-left: 12px;
}

/* Responsive */
/*@media (max-width: 768px) {*/
/*  #faq-title {*/
/*    font-size: 2rem;*/
/*    margin-top: 30px;*/
/*  }*/
/*  #accordion-button-one,*/
/*  #accordion-button-two,*/
/*  #accordion-button-three,*/
/*  #accordion-button-four,*/
/*  #accordion-button-five,*/
/*  #accordion-button-six {*/
/*    font-size: 0.7rem;*/
/*    padding: 15px;*/
/*  }*/
/*}*/

/* Responsive */
@media (max-width: 768px) {
  #faq-title {
    font-size: 2rem;
    margin-top: 30px;
  }

  #accordion-button-one,
  #accordion-button-two,
  #accordion-button-three,
  #accordion-button-four,
  #accordion-button-five,
  #accordion-button-six {
    font-size: 0.7rem;
    padding: 15px;
    width: 100%; /* make buttons full width */
  }

  /* Also make dropdown bodies full width */
  #accordion-body-one,
  #accordion-body-two,
  #accordion-body-three,
  #accordion-body-four,
  #accordion-body-five,
  #accordion-body-six {
    width: 100%; /* match button width */
    font-size: 0.70rem;
    margin-left: -5px;
  }
  

  /* Optional: remove side margins from the container if any */
  #faq-section {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* FAQ page CSS end ///////////////////// */

/* ===================
    privacypolicy page CSS start ///////////////////// */
    /* General Body Styling */

/* Container */
#container {
  padding: 40px 15px;
  max-width: 1140px;
  margin: auto;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

/* Main Heading */
#mainHeading {
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 15px;
  letter-spacing: 3px;
  margin-top: 170px;
  font-size: 3rem;
  color: #9a883e; /* golden brown */
}

/* Sub Heading */
#subHeading {
  text-align: center;
  /* text-transform: uppercase; */
  font-weight: 350;
  margin-bottom: 30px;
  letter-spacing: 2.2px;
  font-size: 2rem;
  color: #9a883e;
}

/* Section Headings - SAME STYLE */
#section1, #section2, #section3, #section4,
#section5, #section6, #section7, #section8, #section9 {
  text-align: center;
  /* text-transform: uppercase; */
  font-weight: 300;
  font-size: 1.80rem;
  letter-spacing: 2px;
  margin: 30px 0 20px;
  color: #9a883e;
}

/* Paragraphs */
#paragraph1, #paragraph2, #paragraph3, #paragraph4,
#paragraph5, #paragraph6, #paragraph7, #paragraph8,
#paragraph9, #paragraph10, #paragraph11, #paragraph12,
#paragraph13, #paragraph14, #paragraph15, #paragraph16,
#paragraph17, #paragraph18 {
  text-align: justify;
  margin-bottom: 15px;
  font-size: 1rem;
}

/* Lists */
#list1, #list2, #list3 {
  margin: 20px 0;
  padding-left: 20px;
  text-align: justify;
}

/* Links inside paragraphs */
a {
  color: #9a883e;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ===================
   Responsive Design
=================== */

/* Tablets and small laptops */
@media (max-width: 981px) {
  #container {
    padding: 30px 15px;
  }

  #mainHeading {
    font-size: 2.2rem;
    margin-top: 200px;
  }

  #subHeading {
    font-size: 1.5rem;
  }

  #section1, #section2, #section3, #section4,
  #section5, #section6, #section7, #section8, #section9 {
    font-size: 1.3rem;
  }

  #paragraph1, #paragraph2, #paragraph3, #paragraph4,
  #paragraph5, #paragraph6, #paragraph7, #paragraph8,
  #paragraph9, #paragraph10, #paragraph11, #paragraph12,
  #paragraph13, #paragraph14, #paragraph15, #paragraph16,
  #paragraph17, #paragraph18 {
    font-size: 0.95rem;
  }
}

/* Mobile screens */
@media (max-width: 600px) {
  #container {
    padding: 25px 10px;
  }

  #mainHeading {
    font-size: 1.8rem;
    margin-top: 220px;
    letter-spacing: 2px;
  }

  #subHeading {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }

  #section1, #section2, #section3, #section4,
  #section5, #section6, #section7, #section8, #section9 {
    font-size: 1.15rem;
    margin: 20px 0 10px;
  }

  #paragraph1, #paragraph2, #paragraph3, #paragraph4,
  #paragraph5, #paragraph6, #paragraph7, #paragraph8,
  #paragraph9, #paragraph10, #paragraph11, #paragraph12,
  #paragraph13, #paragraph14, #paragraph15, #paragraph16,
  #paragraph17, #paragraph18 {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  #list1, #list2, #list3 {
    padding-left: 15px;
  }
}

/* Extra small screens (phones ≤480px) */
@media (max-width: 480px) {
  #container {
    padding: 20px 10px;
  }

  #mainHeading {
    font-size: 1.5rem;
    margin-top: 200px;
    margin-bottom: 10px;
  }

  #subHeading {
    font-size: 1.1rem;
    letter-spacing: 1px;
  }

  #section1, #section2, #section3, #section4,
  #section5, #section6, #section7, #section8, #section9 {
    font-size: 1rem;
    letter-spacing: 1px;
  }

  #paragraph1, #paragraph2, #paragraph3, #paragraph4,
  #paragraph5, #paragraph6, #paragraph7, #paragraph8,
  #paragraph9, #paragraph10, #paragraph11, #paragraph12,
  #paragraph13, #paragraph14, #paragraph15, #paragraph16,
  #paragraph17, #paragraph18 {
    font-size: 0.85rem;
  }

  #list1, #list2, #list3 {
    padding-left: 12px;
    font-size: 0.85rem;
  }
}

/* ===================
   Privacy Policy Page CSS End
=================== */

    
    
    /* Terms Of Use page CSS start /////////////////////  */

/* Import Raleway from Google Fonts */
/*@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600&display=swap');*/

/* General css */
.service {
  font-family: 'Raleway', sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
  
  
}
#t{
     font-family: 'Raleway', sans-serif;
      text-align: justify;
}
#terms {
  font-weight: 200;          /* thin style */
  font-size: 2.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #9a8844;
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 230px;
  font-family: 'Raleway', sans-serif;
}

/* Main Page Title (TERMS OF SERVICE) */
.service h1 {
  font-weight: 200;          /* thin style */
  font-size: 2.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #9a8844;
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 200px;
  font-family: 'Raleway', sans-serif;
}

/* Sub Headings */
.service h4 {
  font-weight: 600;
  text-transform: uppercase;
  color: #9a8844;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
   font-family: 'Raleway', sans-serif;
}

.service h6 {
  font-weight: 700;
  text-transform: uppercase;
  color: #9a8844;
  text-align: center;
  margin-top: 1rem;
   font-family: 'Raleway', sans-serif;
}

/* Section Headings */
.service h5 {
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  color: #9a8844;
  margin: 1.5rem 0;
  letter-spacing: 2px;
   font-family: 'Raleway', sans-serif;
}

/* Paragraphs */
/* Paragraphs - no extra gap */
.service p {
  font-size: 1rem;
  margin-bottom: 0.2rem;   /* reduced gap, or set to 0 if you want none */
  color: #333;
  line-height: 1.6;        /* keeps it readable without big spacing */
 font-family: 'Raleway', sans-serif;
    
}



/* Links */
.service a {
  color: #9a8844;
  text-decoration: none;
}
.service a:hover {
  text-decoration: underline;
}

/* Special styling for Section 12 (Prohibited Uses) */
#section-12 p {
  text-align: center;
  margin-top: 1.5rem;
   font-family: 'Raleway', sans-serif;
}

 
/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
  .service {
    padding-left: 1rem;  /* left padding for mobile */
    padding-right: 1rem; /* right padding for mobile */
  }
  
 

  .service h1 {
    font-size: 2rem;
    letter-spacing: 2px;
    /*margin-top: 100px;*/
  }
  
   /* Added style for the terms of service heading on mobile */
  #terms {
    margin-top: 300px;
  }

  .service h4 {
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .service h6 {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  .service h5 {
    font-size: 1.1rem;
    margin: 1rem 0;
    letter-spacing: 1px;
  }

  .service p {
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
    line-height: 1.5;
  }

  #section-12 p {
    font-size: 0.95rem;
    margin-top: 1rem;
    text-align: start;
  }
}

/* Terms Of Use page CSS end /////////////////////  */


/* ============================================
   RETAILERS SECTION start
   Scoped with #retailers-section
   ============================================ */

#retailers-section {
  font-family: 'Raleway', sans-serif;
  background-color: #fff;
  color: #333;
  padding: 60px 40px;
}

#retailers-section  h1.section-title {
    font-weight:lighter;
    font-size: 2.8rem;
    letter-spacing: 4px;
    text-align: center;
    color: #9e8844;
    text-transform: uppercase;
    margin-top: 180px;
    /*margin-bottom: 60px;*/

}
/* Section Titles */
#retailers-section h2.section-title {
  text-transform: uppercase;
  text-align: center;
  color: #9e8844;
  margin: 2rem 0 1rem;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Retailer Cards */
#retailers-section .retailer-card {
  text-align: center;
  margin-bottom: 2rem;
}
#retailers-section .name{
  color: #9e8844;
    font-weight:50;
}

#retailers-section .retailer-card img {
  max-height: 180px;
  max-width: 200px;
  margin-bottom: 0.75rem;
  object-fit: contain;
}

#retailers-section .retailer-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

#retailers-section .retailer-card .name {
  font-weight: 700;
}

#retailers-section .name a:hover {
  text-decoration: none; /* keep it removed on hover */
  color: #d2b55b; /* optional: keep same color or change if needed */
}

/* Responsive */
/*@media (max-width: 576px) {*/
/*  #retailers-section .retailer-card img {*/
/*    max-height: 200px;*/
/*    max-width: 200px;*/
/*  }*/
/*}*/

/* ========================
   Responsive Design
   ======================== */

/* Large Tablets and Small Laptops */
@media (max-width: 992px) {
  #retailers-section {
    padding: 50px 30px;
  }

  #retailers-section h1.section-title {
    font-size: 2.4rem;
    margin-top: 140px;
  }

  #retailers-section .retailer-card img {
    max-height: 160px;
    max-width: 180px;
  }

  #retailers-section .retailer-card p {
    font-size: 0.9rem;
    
  }
}

/* Tablets */
@media (max-width: 768px) {
  #retailers-section {
    padding: 40px 25px;
  }

  #retailers-section h1.section-title {
    font-size: 2rem;
    margin-top: 120px;
    margin-bottom: 40px;
  }

  #retailers-section h2.section-title {
    font-size: 1.3rem;
  }

  #retailers-section .retailer-card img {
    max-height: 150px;
    max-width: 160px;
  }

  #retailers-section .retailer-card p {
    font-size: 0.85rem;
  }

  #retailers-section .name {
    font-size: 0.95rem;
    text-decoration:none;
  }
   #retailers-section .name:hover {
    font-size: 0.9rem;
     text-decoration:none;
  }
}

/* Mobile Devices */
@media (max-width: 576px) {
  #retailers-section {
    padding: 30px 15px;
  }

  #retailers-section h1.section-title {
    font-size: 1.8rem;
    margin-top: 190px;
    letter-spacing: 2px;
  }

  #retailers-section h2.section-title {
    font-size: 1.1rem;
  }

  #retailers-section .retailer-card img {
    max-height: 130px;
    max-width: 140px;
  }

  #retailers-section .retailer-card p {
    font-size: 0.8rem;
  }

  #retailers-section .name {
    font-size: 0.9rem;
  }
}

/* Small Mobile (below 400px) */
@media (max-width: 400px) {
  #retailers-section {
    padding: 20px 10px;
  }

  #retailers-section h1.section-title {
    font-size: 1.5rem;
    margin-top: 80px;
  }

  #retailers-section .retailer-card img {
    max-height: 120px;
    max-width: 120px;
  }

  #retailers-section .retailer-card p {
    font-size: 0.75rem;
  }
}


/* ============================================
   RETAILERS SECTION end
   Scoped with #retailers-section
   ============================================ */

/* Event Page CSS start /////////////////////  */
 
/* =============================================== */
/*              Base & Font Styles                 */
/* =============================================== */
#Events {
    font-family: 'Raleway', sans-serif;
    background: #ffffff;
    padding: 40px 0;
    margin-top: 190px;
}
 
/* =============================================== */
/*           Desktop Search Bar Styling            */
/* =============================================== */
#Events .search-bar-wrapper {
    width: 100%;
}
 
#Events .search-bar-container {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 8px;
    width: 100%;
}
 
#Events .search-segment {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 150px;
    padding: 0 12px;
    border-right: 1px solid #e5e7eb;
}
 
#Events .search-segment:last-of-type {
    border-right: none;
}
 
#Events .search-segment-large {
    flex: 1.5;
}
 
#Events .search-segment i {
    color: #9ca3af;
    font-size: 1rem;
    margin-right: 10px;
}
 
#Events .search-segment input {
    border: none;
    outline: none;
    width: 100%;
    padding: 10px 0;
    font-size: 0.95rem;
    color: #374151;
    background-color: transparent;
}
 
#Events .search-segment input::placeholder {
    color: #9ca3af;
}
 
#Events .button-segment {
    display: flex;
    align-items: center;
    padding-left: 12px;
}
 
#Events .button-segment .filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: 8px;
    color: #6b7280;
    font-size: 1rem;
}
 
#Events .button-segment .search-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
 
#Events .button-segment .search-btn:hover {
    background-color: #2563eb;
}
 
/* =============================================== */
/*                Event Card Styling               */
/* =============================================== */
#Events .event-card {
    border: 1px solid #E4E4E4;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    height: 100%;
    overflow: hidden;
}
 
#Events .event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
 
#Events .event-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
 
#Events .card-img-container {
    position: relative;
    height: 200px;
}
 
#Events .card-img-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #C4D769;
}
 
#Events .event-card .card-body {
    padding: 1.25rem;
}
 
#Events .event-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}
 
#Events .event-details {
    margin: 0;
    padding: 0;
}
 
#Events .event-details li {
    font-size: 0.875rem;
    color: #777;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
}
 
#Events .event-details i {
    margin-right: 12px;
    margin-top: 3px;
    width: 16px;
    text-align: center;
    color: #bbb;
}
 
#Events .event-details a {
    color: #777;
    text-decoration: none;
    border-bottom: 1px dotted #aaa;
}
 
#Events .event-details a:hover {
    color: #2f80ed;
    border-bottom-color: #2f80ed;
}
 
#Events .powered-by {
    color: #999;
    font-size: 0.875rem;
}
 
/* =============================================== */
/*          Flatpickr & Modal Styles...            */
/* =============================================== */
.flatpickr-calendar {
    font-family: 'Raleway', sans-serif;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 300px;
}
 
.flatpickr-months {
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}
 
.flatpickr-current-month .flatpickr-monthDropdown-months,
.numInputWrapper .numInput {
    font-weight: 600;
    color: #333;
}
 
.flatpickr-prev-month,
.flatpickr-next-month {
    color: #6b7280;
}
 
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    color: #3b82f6;
}
 
.flatpickr-weekday {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}
 
.flatpickr-day {
    color: #374151;
    font-weight: 400;
    border: none;
}
 
.flatpickr-day:hover {
    background: #f3f4f6;
    border-radius: 50%;
}
 
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d1d5db;
}
 
.flatpickr-day.selected {
    background: #e5e7eb;
    color: #1f2737;
    border-radius: 50%;
    font-weight: 600;
}
 
.flatpickr-day.today {
    color: #3b82f6;
    background: none;
    border-radius: 50%;
}
 
.flatpickr-day.today:hover {
    background: #f3f4f6;
}
 
.flatpickr-day.selected.today {
    background: #e5e7eb;
    color: #1f2737;
}
 
.flatpickr-day:focus {
    box-shadow: none;
}
 
#advancedSearchModal .modal-dialog {
    max-width: 480px;
}
 
#advancedSearchModal .modal-content {
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
 
#advancedSearchModal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eaeaea;
}
 
#advancedSearchModal .modal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2d2d2d;
}
 
#advancedSearchModal .btn-close {
    opacity: 0.6;
    transition: 0.2s;
}
 
#advancedSearchModal .btn-close:hover {
    opacity: 1;
}
 
#advancedSearchModal .modal-body {
    padding: 1.5rem;
}
 
#advancedSearchModal .modal-input-group {
    position: relative;
}
 
#advancedSearchModal .modal-input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.95rem;
}
 
#advancedSearchModal .form-control,
#advancedSearchModal .form-select {
    height: 45px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #333;
    padding-left: 40px;
    transition: border-color 0.2s;
}
 
#advancedSearchModal .form-control:focus,
#advancedSearchModal .form-select:focus {
    border-color: #3b82f6;
    box-shadow: none;
}
 
#advancedSearchModal .accordion {
    border-top: 1px solid #f0f0f0;
    margin-top: 0.5rem;
}
 
#advancedSearchModal .accordion-item {
    border-bottom: 1px solid #f0f0f0;
}
 
#advancedSearchModal .accordion-button {
    background-color: transparent;
    box-shadow: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: #444;
    padding: 1rem 0;
}
 
#advancedSearchModal .accordion-button i {
    margin-right: 10px;
    color: #888;
}
 
#advancedSearchModal .accordion-button:focus {
    box-shadow: none;
}
 
#advancedSearchModal .accordion-button::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85rem;
    color: #9ca3af;
    background-image: none;
    margin-left: auto;
    transition: transform 0.2s ease-in-out;
}
 
#advancedSearchModal .accordion-button.collapsed::after {
    content: "\2b";
}
 
#advancedSearchModal .accordion-button:not(.collapsed):after {
    content: "\2212";
}
 
#advancedSearchModal .accordion-body {
    padding: 0.75rem 0 1rem 0;
}
 
#advancedSearchModal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
}
 
#advancedSearchModal .btn-clear-all {
    background-color: transparent;
    border: 1px solid #d1d1d1;
    color: #555;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
}
 
#advancedSearchModal .btn-clear-all:hover {
    background-color: #f1f1f1;
}
 
#advancedSearchModal .btn-primary {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
}
 
#advancedSearchModal input::placeholder {
    color: #b0b0b0;
}
 
#advancedSearchModal .modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
 
/* ================================================================= */
/*          START: Responsive Media Queries (CORRECTED)              */
/* ================================================================= */
 
/* For screens smaller than 992px (tablets and mobiles) */
@media (max-width: 991.98px) {
 
    #Events {
        margin-top: 100px;
    }
 
    /* Keep the search bar on a single row: hide non-primary segments and allow the main input to shrink to leave room for buttons */
    #Events .search-bar-container {
        flex-wrap: nowrap;
        padding: 8px 10px;
        gap: 8px;
        align-items: center;
    }
 
    /* Hide the 'Near...' and 'Dates' inputs (they're not the large primary segment) */
    #Events .search-segment:not(.search-segment-large) {
        display: none;
    }
 
    /* --- SEARCH INPUT STYLING --- */
    #Events .search-segment-large {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        border-right: none;
        position: relative;
    }
 
    #Events .search-segment-large input {
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        padding: 8px 12px 8px 38px;
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
    }
 
    /* Ensure the search icon sits inside the input */
    #Events .search-segment-large i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0;
        color: #9ca3af;
    }
 
    /* --- BUTTONS STYLING --- */
    #Events .button-segment {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto; /* don't grow; keep natural size */
        padding: 0;
    }
 
    /* Slightly smaller button on narrow screens */
    #Events .button-segment .search-btn {
        padding: 8px 14px;
    }
}
 
/* For screens smaller than 768px (most mobile phones) */
@media (max-width: 767.98px) {
    #Events {
        padding: 20px 0;
        margin-top: 180px;
    }
 
    #Events .button-segment .search-btn {
        padding: 8px 18px;
    }
}
 
/* /////////// event page CSS end ///////////   */
 




/*Energy wave Grounding start*/

/* ====================== GROUNDING SECTION ====================== */
    body.tax-product_cat{     
        overflow-x: hidden; }
 #grounding-section .hero-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 140px;
    min-height: 550px;
    overflow: hidden;
}
        #grounding-section .hero-video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        #grounding-section .hero-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.25);
            z-index: 1;
        }
        #grounding-section .container {
            z-index: 2;
        }
        #grounding-section .hero-logo {
            width: 120px;
            margin-bottom: 20px;
        }
        #grounding-section .hero-title {
            font-family: 'IBM Plex Sans', sans-serif;
            font-size: 110px;
            font-weight: 700;
            color: #ffffff;
            line-height: 0.9;
        }
        #grounding-section .hero-subtitle {
            font-family: 'Muli', sans-serif;
            font-size: 18px;
            color: #ffffff;
            margin-top: 1rem;
        }
        #grounding-section .hero-divider {
            width: 80px;
            margin: 2rem auto;
            border-top: 2px solid rgba(255, 255, 255, 0.75);
            opacity: 1;
        }
        #grounding-section .hero-tagline {
            font-family: 'Raleway', sans-serif;
            font-size: 30px;
            font-weight: 400;
            color: #ffffff;
            letter-spacing: 0.2em;
            margin-bottom: 21px;
        }
        
/* Content Section */
#grounding-section .content-container {
    text-align: center;
}

#grounding-section .content-title {
    font-family: 'Raleway', sans-serif;
    font-size: 38px;
    font-weight: 100;
    margin-bottom: 1rem;
}
#grounding-section .Grounding-title{
    color:#9E4B24;
}

#grounding-section .Adventure-title{
    color:#EE7722;
}

#grounding-section .Focus-title{
    color:#A4C539;
}

#grounding-section .Balance-title{
    color:#418370;
}

#grounding-section .Imagination-title{
    color:#B72978;
}

#grounding-section .Charisma-title{
    color:#B72978;
}
#grounding-section .shop-title{
    color:#9e8844;
}


#grounding-section .content-text {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin: 0  Ex;
}

#grounding-section .content-text-secondary {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #9E8B44;
    line-height: 1.8;
    margin: 0 0 28px;
}

#grounding-section .btn-custom {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    border-color: #9e8844;
    color: #9E8844;
    border-width: 2px;
    padding: 15px 30px;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

#grounding-section .btn-custom:hover {
    background-color: #9E8844;
    color: #fff;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 576px) {
    #grounding-section .hero-title {
        font-size: 75px;
    }

    #grounding-section .hero-tagline {
        font-size: 22px;
    }

    #grounding-section .content-title {
        font-size: 30px;
    }
}
/*Energy wave Grounding End*/

.woocommerce-loop-product__title a:hover {
  text-decoration: none;
}


/* ======================================================== */
/* === BLOG CARD STYLES (APPLYING TO BLOG PAGE ONLY) === */
/* ======================================================== */

/* ======================================= */
/* === ADD TOP MARGIN TO BLOG PAGE === */
/* ======================================= */

/*
  This selector targets the main hero section ONLY on the blog page.
  You can change the 180px value to whatever you need.
  The !important tag is required to override the inline style in the HTML.
*/
body.page-template-template-blog-php .hero-section {
  margin-top: 180px !important;
}

/* --- Hero Section Heading and Subheading Styles --- */

/* Main Heading Style (h1) */
.hero-section .content h1 {
 font-family: 'Raleway', sans-serif;
  font-size: 3rem; /* Larger font size for impact */
  font-weight: 700; /* Bolder than the default */
  text-transform: uppercase; /* Makes the heading all caps */
  color: #ffffff; /* Explicitly set color to white */
  letter-spacing: 1.5px; /* Adds a little space between letters */
  margin-bottom: 0.5rem; /* Space between the heading and subheading */
}

/* Subheading Style (h5) */
.hero-section .content h5 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.25rem; /* A clear, readable size */
  font-weight: 500; /* Normal font weight for contrast with the bold title */
  color: #ffffff; /* Slightly off-white for a subtle difference */
  letter-spacing: 0.5px;
}

/* --- Responsive Adjustments for Smaller Screens --- */
@media (max-width: 768px) {
  .hero-section .content h1 {
    font-size: 3rem; /* Reduce font size for tablets */
  }

  .hero-section .content h5 {
    font-size: 1.1rem; /* Adjust subheading size */
  }
}

@media (max-width: 576px) {
  .hero-section .content h1 {
    font-size: 2.2rem; /* Further reduce for mobile phones */
    letter-spacing: 1px;
  }

  .hero-section .content h5 {
    font-size: 1rem;
    /* Optional: Add some padding on the sides for very small screens */
    padding: 0 15px; 
  }
}

/* --- Main Card Container --- */
/* We target the .event-card class ONLY when it's on the blog page */

body.page-template-template-blog-php .event-card {
  background-color: #ffffff; /* A slightly different background color */
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-align: left; /* Left-align text for better readability */
  display: flex; /* Add this */
  flex-direction: column; /* Add this */
}
/* Add a new selector for the card body to enable flexbox */
body.page-template-template-blog-php .event-card .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Add this to make the body take up available space */
  padding: 1.5rem; /* Example padding, adjust as needed */
}

body.page-template-template-blog-php .event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* --- Blog Post Title --- */
body.page-template-template-blog-php .event-card .card-title {
  font-size: 1.2rem; /* Make the title a bit larger */
  font-weight: 600;
  color: #222; /* Darker color for better contrast */
}

/* --- Subtitle ("The Phia Energy") --- */
body.page-template-template-blog-php .event-card .card-subtitle {
  color: #9e8844; /* Use brand color */
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Post Excerpt/Paragraph --- */
body.page-template-template-blog-php .event-card .event-meta {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444; /* Slightly darker text for readability */
    flex-grow: 1; /* This is the key to pushing the button down */
}

/* --- "Read More" Button --- */
body.page-template-template-blog-php .event-card .read-more-btn {
  background-color: #ffffff; /* Solid background color */
  color: #9e8844;             /* White text */
  border: 2px solid #9e8844;
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  align-self: flex-start; /* Aligns button to the left */
  margin-top: auto; /* Pushes the button to the bottom of the card */
  text-decoration:none;

}

body.page-template-template-blog-php .event-card .read-more-btn:hover {
  background-color: #9e8844; /* Darker gold on hover */
  border-color: #9e8844;
  color: #ffffff;
}

/* --- Hide the original "event-divider" --- */
body.page-template-template-blog-php .event-card .event-divider {
  display: none;
}


/* ===================================================== */
/* === WORKAROUND for Broken Images (CSS ONLY) === */
/* ===================================================== */

/*
  IMPORTANT: This code does NOT fix the broken images.
  It HIDES the ugly "broken image" icon that the browser shows.
  The only real fix is to correct the HTML src="" attribute.
*/
body.page-template-template-blog-php .event-card .event-img {
 width: 100%;            /* Forces the image to fill the full width of the card. */
  height: 200px;          /* Sets a fixed height for uniformity. Adjust this value as needed. */
  object-fit: cover;      /* Scales the image to cover the entire container without stretching or squishing it. The excess parts are cropped. */
  object-position: center;/* Ensures the image is centered within its frame after being cropped. */
   border-radius: 10px 10px 10px 10px; /* Rounds top-left and top-right corners by 15px. */
}

/* ========================================================== */
/* === FINAL CORRECTED CSS FOR DESKTOP & MOBILE CART ICONS === */
/* ========================================================== */

/* Style for the DESKTOP cart container link */
.cart-icon-container {
    display: flex;
    align-items: center;
    color: #9e8844;
    font-weight: 600;
    text-decoration: none;
}
 
.cart-icon-container:hover {
    text-decoration: none;
    color: #d2b55b;
}
 
/* Styles the total price text on desktop */
.cart-icon-container .cart-total {
    margin-right: 8px;
    font-size: 18px;
}
 
/*
 * THIS IS THE FIRST FIX:
 * We create a positioning anchor for BOTH the desktop and mobile icons.
 */
.cart-icon-container .shopping-bag-wrapper,
.cart-icon .bi-bag {
    position: relative; /* This is the positioning anchor */
    display: inline-block; /* Ensures proper sizing */
}
 
/* Styles the desktop shopping bag icon */
.cart-icon-container .bi-bag{
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
}
 
/*
 * THIS IS THE SECOND FIX:
 * This single rule now styles the circular badge for BOTH versions.
 */
.cart-icon-container .cart-item-count,
.cart-icon .cart-item-count {
    position: absolute;
    top: -5px;
    right: -8px;
 
    /* Badge appearance */
    background-color: #b72978;
    color: white;
    border-radius: 50%;

    /* Sizing and alignment */
    width: 18px;
    height: 18px;
    line-height: 18px; /* Vertically centers the number */
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}
/* --- END OF FINAL CART CSS --- */

/*blog 1 page*/
/*
* Styles for the Single Blog Post Content
*/
 
/* Apply Raleway to all text within the content area */
.content, .blog-title, .blog-subtitle, .blog-heading {
  font-family: 'Raleway', sans-serif;
}
 
/* 1. Main Title: "A Journey into Energetic Wellness" */
.blog-title {
  color: #9e8844;      /* Sets a deep, modern blue-gray color */
  font-size: 2.5rem;   /* Makes the title large and impactful */
  font-weight: 500;    /* Makes the font bold */
  margin-top: -50px;    /* Adds a little space below the nav bar */
  margin-bottom: 20px; /* Adds space between the title and subtitle */
}
 
/* 2. Subtitle: "There’s wellness. And then there’s quantum wellness..." */
.blog-subtitle {
  color: #7f8c8d;      /* A softer gray for secondary text */
  font-size: 1.2rem;   /* Slightly larger than body text */
  font-style: italic;
  margin-bottom: 30px; /* Adds significant space before the main content */
  line-height: 1.6;
}
 
/* 3. Section Headings (e.g., "First Contact: Phia Hair & Body Serum") */
.blog-heading {
  color: #9e8844;      /* A strong, dark blue color */
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 45px;    /* Adds ample space above to separate sections */
  margin-bottom: 15px; /* Adds space below before the paragraph starts */
}
@media screen and (max-width: 768px) {
  #paragraph-1,
  #paragraph-2,
  #paragraph-3 {
    font-size: 18px; /* Adjust this value as needed for readability */
    text-align: justify;   /* Justifies the text content */
  }
}

/*Blog 1 page end*/

/*
 * ===================================================================
 * STYLES FOR THE "RIFFING BETWEEN THE LINES" POST (ID Scoped)
 * ===================================================================
 */

/*
 * 1. Import Raleway Font from Google Fonts
 * This should be at the very top of your CSS file.
 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/*
 * 2. General Content & Font Setup
 */
#riffing-post-content {
    font-family: 'Raleway', sans-serif;
}

/*
 * 3. Element Styling
 */

/* Hide the empty H2 tags which are WordPress editor artifacts */
#riffing-post-content h2 {
    display: none;
}

/* Default paragraph style */
#riffing-post-content p {
    color: #333333;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
    font-weight: 400; /* Raleway regular weight */
    text-align: justify;   /* Justifies the text content */
}

/* Style for MAIN HEADINGS like "Be a Force" and "Chapter 8" */
#riffing-post-content p > strong:only-child {
    /* Targets <p> tags containing ONLY a <strong> tag */
    display: block;
    font-weight: 700;
    color: #9e8844; /* A strong, dark blue color for headings */
    font-size: 1.25rem;
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Style for SUBHEADINGS like "Double-click #1" */
#riffing-post-content p strong {
    color: #9e8844; /* A vibrant pink/magenta accent color for subheadings */
    font-weight: 700;
}

/* Style for italicized paragraphs */
#riffing-post-content p > em:only-child {
    /* Styles the italic text to look like a normal paragraph */
    color: #555555;      /* A slightly softer color for differentiation */
    font-style: italic;
    font-size: 17px;      /* Matches the regular paragraph font size */
    line-height: 1.8;     /* Matches the regular paragraph line height */
}

/* Styles for the Image Block */
#riffing-post-content .wp-block-image {
    margin: 40px 0; /* Adds vertical space around the image */
    text-align: center; /* Ensures the image is centered */
}

#riffing-post-content .wp-block-image img {
    max-width: 100%; /* Ensures the image is responsive */
    height: auto;
    border-radius: 8px; /* Adds soft, rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}
/*
 * ===================================================================
 * STYLES FOR THE SINGLE POST HERO IMAGE
 * ===================================================================
 */

/* 
 * This selector targets the main image on single blog posts.
 * The .single-post class ensures it only applies to these pages.
 */
.single-post .container > img.img-fluid {
    width: 100%;      /* Makes the image span the full width of the content area */
    height: 450px;    /* SET YOUR DESIRED HEIGHT HERE. Adjust this value as needed. */
    
    object-fit: cover; /* IMPORTANT: This prevents the image from stretching or squishing.
                          It crops the image to fit the dimensions, preserving its aspect ratio. */
    
    border-radius: 12px; /* Optional: A slightly larger border-radius for a modern look */
    margin-bottom: 40px; /* Adds more space between the image and the text below */
}

/* ================================================= */
/* === STYLES FOR REFORESTATION ARTICLE PAGE === */
/* All styles are scoped to #reforestation-article to prevent conflicts */
/* ================================================= */

/* --- General Page & Font Styles --- */
/* ======================================= */
/* === GLOBAL & CONTAINER STYLES === */
/* ======================================= */
#reforestation-article {
  font-family: 'Raleway', sans-serif;
  background-color: #ffffff;
  color: #444;
  line-height: 1.8;
  padding: 40px 0;
}

#reforestation-article .container {
  /*max-width: 960px;*/
  margin: 0 auto;
  padding: 0 20px;
}

/* ======================================= */
/* === TYPOGRAPHY & HEADER === */
/* ======================================= */
#reforestation-article #article-header {
  text-align: center;
  margin-bottom: 40px;
}

#reforestation-article #article-title {
  font-size: 2.5rem; /* Slightly larger for more impact on desktop */
  font-weight: 400;
  color: #3d7d6d;
  letter-spacing: 1px;
}

#reforestation-article h3,
#reforestation-article h4 {
  font-weight: 700; /* Bolder for better hierarchy */
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Specific override for the first question if you want it different */
#reforestation-article #que1 {
    font-weight: 700; /* This ensures it's bold */
}

#reforestation-article #paragraph-1 {
    /*margin-bottom: -20px;*/
}
#reforestation-article .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Reduce the large space between each image/text section */
#reforestation-article .content-block {
  margin-bottom: 0px; /* Drastically reduced from 60px. Change to 0 if you want no space. */
}

/* Remove the bottom margin from the last item in any text column */
#reforestation-article .text-col > *:last-child {
  margin-bottom: 0;
}

#reforestation-article ul {
  list-style-type: disc;
  padding-left: 25px;
  margin-bottom: 20px;
}

#reforestation-article li {
  margin-bottom: 8px;
}

/* ======================================= */
/* === QUOTE & LAYOUT BLOCKS === */
/* ======================================= */
#reforestation-article #intro-quote {
  font-size: 1.2rem;
  font-style: italic;
  color: #555;
  border-left: 4px solid #9e8844;
  padding-left: 25px;
  /*margin: 0 auto 60px auto;*/
  max-width: 80%;
  text-align: center;
}

#reforestation-article #intro-quote cite {
  display: block;
  margin-top: 15px;
  font-style: normal;
  font-weight: 600;
  color: #333;
}

#reforestation-article .content-block {
  /*margin-bottom: 60px; */
}

#reforestation-article .row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* More space between columns */
  align-items: center;
}

#reforestation-article .col {
  flex: 1;
  min-width: 300px;
}

#reforestation-article .row-reverse {
  flex-direction: row-reverse;
}

/* ======================================= */
/* === IMAGES === */
/* ======================================= */
#reforestation-article .image-col img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: block;
}

#reforestation-article .image-col em {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: #777;
  margin-top: 10px;
}

/* ======================================= */
/* === LISTS & CTA === */
/* ======================================= */
#reforestation-article #involved-organizations ul {
  list-style: none;
  padding-left: 0;
}

#reforestation-article #involved-organizations li {
  margin-bottom: 12px;
}

#reforestation-article .summary-text {
  margin-top: 30px;
  font-weight: 400;
  text-align: center;
  font-style: italic;
  color: #3d7d6d;
}

#reforestation-article #support-cause-cta {
  background-color: #f7f5f2;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
}

#reforestation-article .cta-buttons {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

#reforestation-article .cta-button {
  display: inline-block;
  background-color: #9e8844;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  border: 2px solid #9e8844;
}

#reforestation-article .cta-button:hover {
  background-color: #8a7539;
  border-color: #8a7539;
}

#reforestation-article .cta-button.secondary {
  background-color: transparent;
  color: #9e8844;
}

#reforestation-article .cta-button.secondary:hover {
  background-color: #9e8844;
  color: #ffffff;
}

/* ======================================= */
/* === RESPONSIVE STYLES FOR MOBILE === */
/* ======================================= */
@media (max-width: 768px) {
  #reforestation-article .row, 
  #reforestation-article .row-reverse {
    flex-direction: column; /* Stack columns vertically */
  }

  #reforestation-article #article-title {
    font-size: 1.8rem; /* Correctly reduce title size */
    letter-spacing: 0.5px;
  }

  #reforestation-article #intro-quote {
    max-width: 100%; /* Use full width on mobile */
    font-size: 1rem;
  }

  #reforestation-article .image-col img {
    height: 350px; /* Reduce image height */
  }

  #reforestation-article #support-cause-cta {
    padding: 30px 20px; /* Reduce padding on mobile */
  }
}
/*Blog 4*/
.entry-content {
    text-align:justify;
  }
@media screen and (max-width: 768px) {
  .entry-content {
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box; /* Ensures padding is included in the element's width */
  }
}

/*Blog 5 */
.elementor-heading-title {
    color: #9e8844;
    margin-bottom:10px;
}
.elementor-text-editor {
    color:#333333;
}
@media screen and (max-width: 768px) {
  /* Targets all h2 and h3 elements inside the article */
  #article-container h2,
  #article-container h3 {
    font-size: 15px; /* Adjust this value as needed */
    line-height: 1.4;  /* Improves readability for multi-line headings */
  }
  
  /* You can also target a specific question if needed */
  .que1 {
      font-size: 1.2rem;
  }
}

/*Blog 6*/

/* General Styles */
#article-container {
   font-family: 'Raleway', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 20px auto;
    padding: 20px;
    border-radius: 0;
}

/* Header */
#article-container #article-header h1 {
    font-size: 2.2em;
    color: #9e8844;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 400;
}

/* Sections */
#article-container section {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eaeaea;
}

/* Blockquote */
#article-container #introduction-quote blockquote {
    font-size: 1.1em;
    font-style: italic;
    color: #555;
    border-left: 4px solid #9e8844;
    padding-left: 25px;
    margin: 25px 0;
}

#article-container #introduction-quote footer {
    text-align: right;
    font-style: normal;
    font-weight: 500;
    margin-top: 15px;
    color: #666;
}

/* Column Layout */
#article-container .column-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    align-items: flex-start;
}

#article-container .column-text,
#article-container .column-media {
    flex: 1;
    min-width: 280px;
}

/* Reverse column order */
#article-container .reverse-columns {
    flex-direction: row-reverse;
}

/* Images and Figures */
#article-container figure {
    margin: 0;
}

#article-container .column-media img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

#article-container figcaption {
    margin-top: 12px;
    font-size: 0.95em;
    color: #555;
    font-style: italic;
}

/* Lists */
#article-container ul {
    padding-left: 22px;
}

#article-container li {
    margin-bottom: 12px;
}

/* Headings within sections */
#article-container h2,
#article-container h3 {
    color: #111;
}

#article-container h2 {
    font-size: 1.7em;
    font-weight: 300;
}

#article-container h3 {
    font-size: 1.7em;
    font-weight: 400;
}

/* Footer and Links */
#article-container #call-to-action {
    text-align: center;
    padding: 25px;
    background-color: #fafafa;
    border-radius: 4px;
    border-bottom: none;
}

#article-container a {
    color: #007aff;
    text-decoration: none;
}

#article-container a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    #article-container .column-layout,
    #article-container .reverse-columns {
        flex-direction: column;
    }

    #article-container #article-header h1 {
        font-size: 1.8em;
    }
}
/*blog 7*/
/* Scoped styles for the Michelle Roark feature to prevent conflicts */

/* Main container for the feature */
#michelle-roark-feature {
    font-family: 'Raleway', sans-serif;
    line-height: 1.7;
    background-color: #ffffff;
    color: #333;
    max-width: 1100px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 8px;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);*/
}

/* Article Header */
#michelle-roark-feature .article-header h1 {
    font-size: 2em;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 400;
    margin-top:-20px;
}

/* Introduction Section */
#michelle-roark-feature .intro-section {
    text-align: center;
    margin-bottom: 30px;
}

#michelle-roark-feature .intro-text {
    font-size: 1.2em;
    font-style: italic;
    color: #555;
}

/* Content Section */
#michelle-roark-feature .content-section {
    margin-top: 20px;
}

/* Column Layout */
#michelle-roark-feature .column-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

#michelle-roark-feature .column-media {
    flex: 1;
    min-width: 300px;
}

#michelle-roark-feature .column-text {
    flex: 1;
    min-width: 300px;
    font-size: 1.1em;
}

/* Image styling */
#michelle-roark-feature .column-media img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Link styling */
#michelle-roark-feature .column-text a {
    color: #007aff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

#michelle-roark-feature .column-text a:hover {
    border-color: #007aff;
}

/* Responsive Design */
@media (max-width: 768px) {
    #michelle-roark-feature {
        padding: 20px;
    }

    #michelle-roark-feature .article-header h1 {
        font-size: 2.2em;
    }

    #michelle-roark-feature .column-layout {
        flex-direction: column;
    }
}

/*blog 9*/

/* Main container for full screen */
 
#phia-lab-newsletter-content {
    padding: 20px;
    font-family: 'Raleway', sans-serif;
    color: #333;
    /* FIX: Prevents the container itself from overflowing */
    max-width: 100%;
    box-sizing: border-box;
    /* FIX: Hides any accidental overflow from its children */
    overflow-x: hidden;
  }
  
  /* FIX: Applies better box model to all child elements */
  #phia-lab-newsletter-content *, #phia-lab-newsletter-content *::before, #phia-lab-newsletter-content *::after {
    box-sizing: border-box;
  }

  #phia-lab-newsletter-content .header-link {
    text-align: left;
    margin-bottom: 20px;
  }

  #phia-lab-newsletter-content .header-link a {
    color: #888;
    font-size: 12px;
  }

  #phia-lab-newsletter-content .intro-text {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
    /* FIX: Ensures long text or links will wrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  #phia-lab-newsletter-content .section {
    margin-bottom: 30px;
    overflow: hidden; /* This contains the floated image */
  }

  /* --- DESKTOP STYLE for the image --- */
  #phia-lab-newsletter-content .section-image {
    font-family: 'Raleway', sans-serif;
    float: right;
    width: 35%;
    max-width: 320px;
    margin-left: 25px;
    margin-bottom: 10px;
    border-radius: 8px;
    /* FIX: Ensures image is always responsive */
    height: auto;
  }

  #phia-lab-newsletter-content .section-content {
    /* This will now naturally flow to the left of the floated image */
  }

  #phia-lab-newsletter-content .section-title {
   font-family: 'Raleway', sans-serif;
    color: #b59410;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: 500;
  }

  #phia-lab-newsletter-content .section-text {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    /* FIX: Ensures long text or links will wrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  #phia-lab-newsletter-content .testimonial-list {
    list-style: none;
    padding-left: 0;
  }

  #phia-lab-newsletter-content .testimonial-list li {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    /* FIX: Ensures long text or links will wrap */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  #phia-lab-newsletter-content .testimonial-list li::before {
    content: '■';
    position: absolute;
    left: 0;
    color: #b59410;
  }

  #phia-lab-newsletter-content .footer-text {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
  }

  #phia-lab-newsletter-content .footer-link a {
    color: #b59410;
    text-decoration: none;
  }

  #phia-lab-newsletter-content .signature {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
    margin-top: 20px;
  }

  /* --- RESPONSIVE STYLES for mobile screens --- */
  @media (max-width: 768px) {
    #phia-lab-newsletter-content {
      padding: 15px;
    }

    #phia-lab-newsletter-content .section-image {
      float: none;
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-bottom: 20px;
    }
      h1.blog-title {
    /* Adjust the 20px value if you need more or less space */
    margin-top: 8px !important; 
  }
  }
  
  
  #infuser-image {
  /* You can change this percentage to make it smaller or larger */
  width: 30%; 
  
  /* It's good practice to set a max-width as well */
  max-width: 350px; 

  /* This keeps the image from stretching or squishing */
  height: 100px; 
}

/*Blog 9 end*/

/* Energy Fit start */

#energy-app .survey-main-title{
  font-family: 'Raleway', sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: #9e8844;
  text-align: center;
  margin-bottom: 40px;
}

/* Energy Fit End */


/* Old Plugin Energy Fit CSS start */
/*
=================================================================
== Corrected and Scoped CSS for the Energy Fit Plugin
== This preserves the original style while fixing conflicts.
=================================================================
*/
/* 1. CONTAIN all plugin styles within the #energy-app wrapper */
/*#fit{*/
/*  margin-top: 150px;*/
/*  font-family: 'Raleway', sans-serif;*/
/*}*/
/*#energy-app .survey-main-title{*/
/*  font-family: 'Raleway', sans-serif;*/
/*  font-size: 48px;*/
/*  font-weight: 200;*/
/*  color: #9e8844;*/
/*  text-align: center;*/
/*  margin-bottom: 30px;*/
/*}*/
/*#energy-app .main-content.survey .block-content {*/
/*  display: none;*/
/*}*/
/*#energy-app #survey {*/
/*  background: #fff;*/
/*  padding: 0 50px;*/
/*}*/
/*#energy-app #survey input[type="text"],*/
/*#energy-app #survey input[type="email"] {*/
/*  width: 50%;*/
/*}*/
/*#energy-app #survey-result{*/
/*  display: none;*/
/*}*/
/*#energy-app .form {*/
/*  color: black;*/
/*  font-size: 20px;*/
/*}*/

/* 2. Preserve the unique, animated radio button styles */
/*#energy-app [type="radio"] {*/
/*  z-index: -1;*/
/*  position: absolute;*/
/*  opacity: 0;*/
/*}*/
/*#energy-app [type="radio"]:checked ~ label {*/
/*  border-color: #4062f6;*/
/*  background-color: rgba(97, 154, 234, 0.16);*/
/*  color: rgb(0, 0, 0);*/
/*}*/
/*#energy-app [type="radio"]:checked ~ label:before {*/
/*  will-change: transform, border-width, border-color;*/
/*  animation: bubble 1s ease-in;*/
/*}*/
/*#energy-app [type="radio"]:checked ~ label:after {*/
/*  will-change: opacity, box-shadow;*/
/*  animation: sparkles 700ms ease-in-out;*/
/*}*/
/*#energy-app [type="radio"]:checked ~ label > span.radio-button {*/
/*  will-change: transform;*/
/*  border: 0;*/
/*  background-image: linear-gradient(to top right, #6e89ff, #4363ee);*/
/*  animation: radio 400ms cubic-bezier(0.17, 0.89, 0.32, 1.49);*/
/*}*/
/*#energy-app [type="radio"]:checked ~ label > span.radio-button:after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 50%;*/
/*  transform: translate(-50%, -50%);*/
/*  width: 6px;*/
/*  height: 6px;*/
/*  border-radius: 10px;*/
/*  background-color: #fff;*/
/*}*/
/*#energy-app label {*/
/*  position: relative;*/
/*  display: grid;*/
/*  align-items: center;*/
/*  grid-template-columns: 20px auto;*/
/*  grid-gap: 20px;*/
/*  width: 100%;*/
/*  min-height: 62px;*/
/*  padding: 8px 20px;*/
/*  border-radius: 6px;*/
/*  border: 2px solid transparent;*/
/*  background-color: transparent;*/
/*  transition: all 300ms ease-in;*/
/*  line-height: 1.2;*/
/*}*/
/*#energy-app label.has-image {*/
/*  grid-template-columns: 20px 42px auto;*/
/*}*/
/*#energy-app label.has-image img {*/
/*  width: 42px;*/
/*  height: 42px;*/
/*}*/
/*#energy-app label:hover {*/
/*  border-color: #4062f6;*/
/*  background-color: rgba(97, 154, 234, 0.16);*/
/*}*/
/*#energy-app label:before,*/
/*#energy-app label:after {*/
/*  position: absolute;*/
/*  left: 29px;*/
/*  border-radius: 50%;*/
/*  content: "";*/
/*}*/
/*#energy-app label:before {*/
/*  margin: -2rem;*/
/*  border: solid 2rem #545461;*/
/*  width: 4rem;*/
/*  height: 4rem;*/
/*  transform: scale(0);*/
/*}*/
/*#energy-app label:after {*/
/*  margin: -0.1875rem;*/
/*  width: 0.375rem;*/
/*  height: 0.375rem;*/
/*  box-shadow: 0.32476rem -2.6875rem 0 -0.1875rem #ff8080, -0.32476rem -2.3125rem 0 -0.1875rem #ffed80, 2.30366rem -1.42172rem 0 -0.1875rem #ffed80, 1.6055rem -1.69573rem 0 -0.1875rem #a4ff80, 2.54785rem 0.91464rem 0 -0.1875rem #a4ff80, 2.32679rem 0.19796rem 0 -0.1875rem #80ffc8, 0.87346rem 2.56226rem 0 -0.1875rem #80ffc8, 1.29595rem 1.94258rem 0 -0.1875rem #80c8ff, -1.45866rem 2.28045rem 0 -0.1875rem #80c8ff, -0.71076rem 2.2244rem 0 -0.1875rem #a480ff, -2.69238rem 0.28141rem 0 -0.1875rem #a480ff, -2.18226rem 0.8312rem 0 -0.1875rem #ff80ed, -1.89869rem -1.92954rem 0 -0.1875rem #ff80ed, -2.01047rem -1.18791rem 0 -0.1875rem #ff8080;*/
/*}*/
/*#energy-app label > span.radio-button {*/
/*  position: relative;*/
/*  width: 20px;*/
/*  height: 20px;*/
/*  border-radius: 20px;*/
/*  border: 2px solid #454861;*/
/*}  */
/*#energy-app .option:not(:last-child) {*/
/*  margin-bottom: 4px;*/
/*}*/

/* 3. Preserve the progress bar styles */
/*#energy-app .progress {*/
/*  width: 100%;*/
/*  max-width: 400px;*/
/*  height: 6px;*/
/*  background: #e1e4e8;*/
/*  border-radius: 3px;*/
/*  overflow: hidden;*/
/*  margin: 20px auto;*/
/*}*/
/*#energy-app .progress .progress-bar {*/
/*  display: block;*/
/*  height: 100%;*/
/*  background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);*/
/*  background-size: 300% 100%;*/
/*  animation: progress-animation 3s linear infinite;*/
/*}*/

/* 4. Preserve the result text styles */
/*#energy-app h2.fit-recommendation-header {*/
/*  margin-top: 15px;*/
/*}*/
/*#energy-app p.fit-recommendation {*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  line-height: 1.4;*/
/*}*/
/*#energy-app p.fit-recommendation-and {*/
/*  margin: 15px 0;*/
/*}*/
/*#energy-app .fit-recommendation {*/
/*  font-weight: bold;*/
/*}*/
/*#energy-app .fit-recommendation.quantity {*/
/*  margin-top: 12px;*/
/*}*/
/*#energy-app .fit-recommendation.category {*/
/*  font-size: 18px;*/
/*}*/
/*#energy-app .fit-recommendation.large {*/
/*  font-size: 24px;*/
/*}*/
/*#energy-app .fit-recommendation.grounding { color: #9e4b24; }*/
/*#energy-app .fit-recommendation.adventure { color: #ee7722; }*/
/*#energy-app .fit-recommendation.focus { color: #a4c539; }*/
/*#energy-app .fit-recommendation.balance { color: #418370; }*/
/*#energy-app .fit-recommendation.imagination { color: #6e6196; }*/
/*#energy-app .fit-recommendation.charisma { color: #b72978; }*/

/* 5. Styling for the 'Start Profile' and 'Continue' Buttons */
/*#energy-app button {*/
/*  background-color: #9E8844;*/
/*  color: #ffffff !important;*/
/*  border: none;*/
/*  padding: 12px 25px;*/
/*  font-size: 16px;*/
/*  font-weight: bold;*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  margin-top: 0px;*/
/*  transition: background-color 0.3s ease;*/
/*}*/
/*#energy-app button:hover {*/
/*  background-color: #d2b55b;*/
/*}*/

/* 6. Styling for Validation Error Messages */
/*#energy-app .error-message.red {*/
/*  padding: 15px;*/
/*  margin-top: 20px;*/
/*  border: 1px solid #d9534f;*/
/*  background-color: #f2dede;*/
/*  color: #a94442;*/
/*  border-radius: 5px;*/
/*  text-align: center;*/
/*  font-weight: bold;*/
/*}*/
/* Old Plugin Energy Fit CSS End */


/* Contact US start */
#phia-contact {
 font-family: 'Raleway', sans-serif;
 color: #4d4d4d;
 max-width: 1000px;
 margin: 60px auto;
 padding: 20px;
 margin-top: 200px;
}

#phia-contact h2 {
 font-size: 2.5rem;
 text-align: center;
 font-weight: 100;
 letter-spacing: 2px;
 color: #9E8844;
 margin-bottom: 40px;
  /*margin-top: 200px;*/
}

#phia-contact input[type="text"],
#phia-contact input[type="email"],
#phia-contact textarea {
 border: 1px solid #ccc;
 border-radius: 4px;
 width: 100%;
 padding: 10px 12px;
 font-size: 15px;
 margin-bottom: 20px;
 transition: border-color 0.3s ease;
}

#phia-contact ::placeholder {
 color: #858585;
 opacity: 0.8; 
}

#phia-contact input:focus,
#phia-contact textarea:focus {
 border-color: #9e8844;
 box-shadow: 0 0 4px rgba(184, 160, 87, 0.4);
 outline: none;
}

#phia-contact label {
 font-weight: 500;
 margin-bottom: 5px;
}

#phia-contact input[type="checkbox"] {
 margin-right: 8px;
}

#phia-contact .checkbox-group {
 margin-top: 10px;
 margin-bottom: 30px;
}

#phia-contact .btn-send {
 width: 14rem;
 background-color: transparent;
 border: 2px solid #9e8844;
 color: #9e8844;
 border-radius: 8px;
 padding: 10px 40px;
 text-transform: uppercase;
 letter-spacing: 1px;
 transition: all 0.3s ease;
}

#phia-contact .btn-send:hover {
 background-color: #9e8844;
 color: white;
}
/* Contact US end */

/* Testimonial Form Start */
#phia-testimonial-contact {
  font-family: 'Raleway', sans-serif;
   font-weight: 400;
 color: #4d4d4d;
 max-width: 1000px;
 margin: 60px auto;
 padding: 20px;
 margin-top: 200px;
}

#phia-testimonial-contact label {
 display: block;
 font-weight: 500;
 margin-bottom: 6px;
}

#phia-testimonial-contact input[type="text"],
#phia-testimonial-contact input[type="email"],
#phia-testimonial-contact textarea {
 border: 1px solid #e5e5e5;
 border-radius: 2px;
 width: 100%;
 padding: 9px 10px;
 font-size: 15px;
 margin-bottom: 6px;
 background-color: #fafafa;
}

#phia-testimonial-contact input[type="file"] {
 font-size: 15px;
 margin-top: 5px;
 margin-bottom: 6px;
}

#phia-testimonial-contact textarea {
 background-color: #fafafa;
}

#phia-testimonial-contact ::placeholder {
 color: #858585;
 opacity: 1;
}

/* Help text */
#phia-testimonial-contact small.form-text {
 display: block;
 color: #4d4d4d;
 font-size: 13px;
 margin-top: 2px;
}

/* Star Rating */
#phia-testimonial-contact .star-rating {
 font-size: 1.6rem;
 color: #ffb900;
 cursor: pointer;
 margin-top: 4px;
}

#phia-testimonial-contact .star-rating i {
 margin-right: 4px;
 transition: transform 0.2s ease, color 0.2s ease;
}

#phia-testimonial-contact .star-rating i:hover {
 transform: scale(1.15);
}

#phia-testimonial-contact .star-rating i.active {
 color: #ffb900;
}

/* Submit Button */
#phia-testimonial-contact .btn-submit {
 background-color: #9e8844;
 color: white;
 border: none;
 border-radius: 6px;
 padding: 10px 28px;
 font-size: 15px;
 transition: all 0.3s ease;
}

#phia-testimonial-contact .btn-submit:hover {
 background-color: #d2b55b;
}
/* Testimonial Form End */

/*Be A Force modal*/

/* This is the overlay that covers the page */
#custom-modal-overlay {
  position: fixed; /* Sit on top of the page content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* Use flexbox to center the modal */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Make sure it's on top */
}

/* This is the modal box itself */
#custom-modal-content {
  /*padding: 40px;*/
  /*width: 80%;*/
  max-width: 600px; /* Adjust as needed */
  text-align: center;
  position: relative;
}

/* Styling for the main title */
#custom-modal-title {
  font-family: 'Raleway', sans-serif;
  font-size: 2.5em; /* Adjust size as needed */
  color: #9e8844; /* An olive/gold color */
  margin-bottom: 20px;
}

/* Styling for the book image */
#custom-modal-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Styling for the subtitle */
#custom-modal-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: 1.3em;
  color: #333;
  margin-bottom: 30px;
}

/* Styling for the "Buy Now" button */
#custom-modal-button {
  background-color: #fff;
  color: #9e8844;
  border: 2px solid #9e8844;
  border-radius:8px;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
}

#custom-modal-button:hover {
  background-color: #9f8852;
  color: #fff;
}

/* Media Query for Mobile Responsive */
@media screen and (max-width: 356px) {

  /* Adjust the modal content width and padding for smaller screens */
  #custom-modal-content {
    width: 90%; /* Use a larger percentage of the screen width */
    padding: 20px; /* Reduce padding to save space */
  }

  /* Make the title smaller on mobile */
  #custom-modal-title {
    font-size: 1.8em; /* Decrease font size for better fit */
  }

  /* Make the subtitle smaller on mobile */
  #custom-modal-subtitle {
    font-size: 1em; /* Decrease font size for readability */
    line-height: 1.4; /* Improve line spacing for smaller text */
  }

  /* Adjust the button for easier tapping */
  #custom-modal-button {
    padding: 12px 24px; /* Slightly smaller padding */
    font-size: 14px; /* Slightly smaller font */
  }

  /* The close button in the top right */
  #custom-modal-close {
    top: 5px;
    right: 10px;
    font-size: 24px;
  }
}

/* --- Energy Waves page start --- */

#phia-energy-products {
  font-family: 'Raleway', sans-serif;
  background-color: #ffffff;
  overflow-x: hidden; /* Prevents horizontal scroll */
  margin-top:150px;
}
 
#phia-energy-products .container.text-center {
  padding: 10px;
}
 
#phia-energy-products #phia-energy-title {
  font-size: 40px;
  font-weight: 500;
  color: #9E8844;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
 
#phia-energy-products #phia-energy-subtitle {
  color: #333;
  max-width: 800px;
  margin: 1rem auto 2rem;
  font-size: 16px;
}
 
#phia-energy-products #phia-findfit-btn {
  border: 3px solid #9E8844;
  color: #9E8844;
  border-radius: 10px;
  padding: 15px 30px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  background-color: transparent;
  letter-spacing: 1.5px;
   text-decoration:none;
  
}
 
#phia-energy-products #phia-findfit-btn:hover {
  background-color: #9E8844;
  color: #fff;
  text-decoration:none;
}
 
/* --- PRODUCT ROW LAYOUT --- */
#phia-energy-products .product-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  padding: 2.5rem 0;
}
#phia-energy-products .product-row:last-child {
    border-bottom: none;
}
 
 
#phia-energy-products .product-image-col {
  flex: 0 0 40%;
  text-align: center;
}
 
#phia-energy-products .product-image-col img {
  max-width: 360px;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 1rem;
}
 
#phia-energy-products .product-image-col .shop-btn {
  border-radius: 10px;
  padding: 15px 30px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.5px;
  background-color: transparent;
  display: inline-block;
  margin-top: 0.8rem;
  border-width: 3px;
  border-style: solid;
  text-decoration:none;
}
 
/* --- PRODUCT DETAILS --- */
#phia-energy-products .product-details-col {
  flex: 1 1 60%;
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between ;
}
 
#phia-energy-products .detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 3.2rem;
}
 
#phia-energy-products .detail-item .label {
  display: inline-block;
  width: 35%;
  flex-shrink: 0;
  color: #d2b55b;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
 
/* The energy value is positioned absolutely on desktop */
#phia-energy-products .energy-value {
  position: absolute;
  right: 30px;
  top: 30px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}
#phia-energy-products .energy-value a {
  color: inherit;
  text-decoration: none;
}
#phia-energy-products .energy-value .unit {
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  margin-left: 0.4rem;
  color: #D2B55B;
}
 
/* --- ESSENCES & TAGLINE --- */
 
#phia-energy-products .essences  {
  margin: 0;
  font-size: 16px;
  color: #D2B55B;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0.5px;
  flex: 1;
  padding: 2rem 0;
  border-top: 3px solid #d2b55b;
  border-bottom: 3px solid #d2b55b;
  justify-content: space-between;
}
#phia-energy-products .essences p{
  text-align: right;
  margin:0;
  padding-left: 1rem; /* Add padding to prevent text from touching label */
}
#phia-energy-products .tagline {
  margin-left: 0;
  text-align: center;
  padding-top: 1rem;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2em;
  letter-spacing: 1.5px;
  flex: 1;
}
 
/* --- COLOR THEMES --- */
#phia-energy-products .grounding { color: #9e4b24; border-color: #9e4b24; }
#phia-energy-products .adventure { color: #ee7722; border-color: #ee7722; }
#phia-energy-products .focus { color: #a4c539; border-color: #a4c539; }
#phia-energy-products .balance { color: #418370; border-color: #418370; }
#phia-energy-products .imagination { color: #6e6196; border-color: #6e6196; }
#phia-energy-products .charisma { color: #b72978; border-color: #b72978; }
 
#phia-energy-products .grounding a{ color: #9e4b24;}
#phia-energy-products .adventure a{ color: #ee7722;}
#phia-energy-products .focus a{ color: #a4c539;}
#phia-energy-products .balance a{ color: #418370;}
#phia-energy-products .imagination a{ color: #6e6196;}
#phia-energy-products .charisma a{ color: #b72978;}
 
#phia-energy-products .shop-btn:hover {
  color: #fff;
   text-decoration:none;
}
 
#phia-energy-products .shop-btn.grounding:hover { background-color: #9e4b24; }
#phia-energy-products .shop-btn.adventure:hover { background-color: #ee7722; }
#phia-energy-products .shop-btn.focus:hover { background-color: #a4c539; }
#phia-energy-products .shop-btn.balance:hover { background-color: #418370; }
#phia-energy-products .shop-btn.imagination:hover { background-color: #6e6196; }
#phia-energy-products .shop-btn.charisma:hover { background-color: #b72978; }
 
 
/* ===================================
    RESPONSIVE STYLES (TABLET)
    Applies from 991px down to 768px
====================================== */
@media (max-width: 991px) {
  #phia-energy-products #phia-energy-title {
    font-size: 32px;
  }
  #phia-energy-products .product-row {
    gap: 1rem; /* Reduce gap between columns */
    padding-left: 15px;
    padding-right: 15px;
  }
  #phia-energy-products .product-image-col img {
    max-width: 280px; /* Adjust image size */
  }
  #phia-energy-products .product-details-col {
    padding: 15px; /* Adjust padding */
  }
  #phia-energy-products .energy-value {
    font-size: 40px;
    top: 15px;
    right: 15px;
  }
  #phia-energy-products .tagline {
    font-size: 22px; /* Adjust font size */
  }
  #phia-energy-products .detail-item {
    margin-bottom: 2.5rem;
  }
    #phia-energy-products .essences  {
    margin-bottom: 0;
  }
}
 
 
/* ===================================
    RESPONSIVE STYLES (MOBILE)
    Applies from 767px and below
====================================== */
@media (max-width: 767px) {
  #phia-energy-products .product-row {
    flex-direction: column; /* Stack image and details vertically */
    align-items: center;
    padding: 2rem 1rem;
  }
  #phia-energy-products .product-details-col {
    width: 100%;
    padding: 2rem 0 0 0;
  }
  #phia-energy-products .energy-value {
    position: static; /* Remove absolute positioning */
    font-size: 44px;
    text-align: right;
  }
  #phia-energy-products .detail-item {
    justify-content: space-between; /* Pushes label left and value right */
    align-items: flex-start; /* Aligns items to the top */
    margin-bottom: 1.5rem;
  }
  #phia-energy-products .detail-item .label {
    width: auto; /* Allow label width to be flexible */
  }
  #phia-energy-products .essences,
  #phia-energy-products .essences p {
    text-align: right;
    width: 100%;
  }
  /* This targets the tagline h3 and its container */
  #phia-energy-products .detail-item:last-child {
    align-items: center;
  }
  #phia-energy-products .tagline {
    text-align: right;
    padding-top: 0;
    font-size: 22px;
    line-height: 1.3em;
    padding-left: 1rem;
  }
}
/* --- Energy Products page end --- */

/* 
=====================================================
--- CSS for Resource Page stat ---
=====================================================
*/
/*-----Banner CSS----- */

#custom-hero-banner {
    margin-top: 180px;
    position: relative; /* This is crucial for positioning child elements inside */
    height: 70vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    overflow: hidden; /* Prevents the image from spilling out */
}

/* New rule for the background image tag */
#custom-hero-banner .hero-background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Acts like background-size: cover */
    z-index: 0; /* Places the image at the very back */
}

#custom-hero-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Sits on top of the image */
}

#custom-hero-banner .container {
    position: relative;
    z-index: 2; /* Sits on top of the overlay and image */
}

#custom-hero-banner .hero-title {
    font-size: 3.5rem;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 2px;
    font-size: 45px;
}

#custom-hero-banner .hero-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 1rem;
    font-family: 'Raleway', sans-serif;
}

/* Responsive adjustments for the hero banner */
@media (max-width: 768px) {
    #custom-hero-banner .hero-title {
        font-size: 2.5rem;
    }
    #custom-hero-banner .hero-subtitle {
        font-size: 1rem;
    }
}


/*-----Card CSS----- */
#custom-resource-section {
    padding: 60px 0;
    font-family: 'Raleway', sans-serif;
    background-color: #ffffff;
}

#custom-resource-section .card {
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
}

#custom-resource-section .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

#custom-resource-section .card-img-top {
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

#custom-resource-section .card-body {
    padding: 1.75rem;
}

#custom-resource-section .card-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #9e8844;
    margin-bottom: 0.5rem;
}

#custom-resource-section .card-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    font-weight: 400;
}

#custom-resource-section .btn-read-more {
    background-color: transparent;
    border: 2px solid #9E8844;
    color: #9E8844;
    padding: 10px 24px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-top: 1rem;
    text-decoration: none;
    display: inline-block;
}

#custom-resource-section .btn-read-more:hover {
    background-color: #9E8844;
    color: #ffffff;
}
/* 
=====================================================
--- CSS for Resource Page END ---
=====================================================
*/

/* .hero-section .woocommerce-order-received {
  margin-top:120px ; Adjust this value as needed 
}*/

.container .row .woocommerce {
  margin-top: 130px; /* You can adjust this value as needed */
}
/* --- WHOLESALE & RETAIL IDENTICAL STYLE FIX (NO UNDERLINES) --- */

/* 1. RETAIL PRICE (The top price) */
.price del.original-computed-price {
    text-decoration: none !important; /* Remove cut line */
    opacity: 1 !important;            /* Make fully visible */
    color: #9e8844 !important;        /* GOLD COLOR */
    font-weight: bold !important;     /* BOLD FONT */
    font-size: 16px !important;       /* Same size as wholesale */
    display: block !important;        /* Own line */
    margin-bottom: 5px;
}

/* Add "Retail Price:" text */
.price del.original-computed-price::before {
    content: "Retail Price: ";
    color: #9e8844 !important;
    font-weight: bold !important;
}

/* 2. WHOLESALE PRICE (The bottom price) */
.wholesale_price_container {
    display: block !important;
    color: #9e8844 !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* This is the part that removes the underline */
.wholesale_price_container ins {
    text-decoration: none !important; /* Kills the standard underline */
    background: transparent !important;
    border: none !important;
}

/* Double check to remove lines from the number itself */
.wholesale_price_container .amount,
.wholesale_price_container bdi {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* 3. GLOBAL CLEANUP (Safety Net) */
.product .price, 
.product .price span, 
.product .price del, 
.product .price ins, 
.product .price bdi {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* --- CUSTOM OVERRIDES SCOPED TO #phia-search (Search page css) --- */

/* Replaces 'body' styles by applying them to the wrapper ID */
#phia-search {
    font-family: 'Raleway', sans-serif;
    color: #3a3a3a;
    background-color: #f9f9f9;
    /* Keeps header visible */
    margin-top: 180px; 
}

/* Serif Font for Headings to match your design */
#phia-search h2.entry-title, 
#phia-search .widget-title,
#phia-search .page-title {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

/* Page Title Styling */
#phia-search .page-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: #9e8844;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

/* Links */
#phia-search a {
    text-decoration: none;
    color: #9E8844;
    transition: 0.2s;
}

#phia-search a:hover {
    color: #333;
}

/* Product Card Images */
#phia-search .product-image {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Meta Data (Date/Author) */
#phia-search .entry-meta {
    font-size: 0.85rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Read More Button */
#phia-search .btn-read-more {
    display: inline-block;
    color: #9e8844;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

#phia-search .btn-read-more:hover {
    border-bottom: 2px solid #9e8844;
    color: #d2b55b;
}

/* Sidebar Widget Styling */
#phia-search .widget {
    margin-bottom: 2.5rem;
}

#phia-search .widget-title {
    font-size: 1.25rem;
    font-weight: 600;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: inline-block;
    color: #9e8844;
}

#phia-search .widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* Search Form Input Styling */
#phia-search .widget_search .form-control {
    border-radius: 5px 0 0 5px;
    border: 1px solid #ccc;
    height: 45px;
    padding: 10px;
    width: 100%;
}

/* Search Button Custom Styling */
#phia-search .btn-search {
    background-color: #9E8844;
    color: white;
    border-radius: 0 5px 5px 0;
    border: 1px solid #9E8844;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    height: 45px;
    padding: 0 20px;
}

#phia-search .btn-search:hover {
    background-color: #555;
    border-color: #555;
    color: white;
}

/* --- FIXED PAGINATION STYLING FOR WORDPRESS --- */
/* WordPress outputs .page-numbers, not .page-link */

#phia-search .navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 5px;
}

#phia-search .page-numbers {
    display: inline-block;
    color: #3a3a3a;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: 500;
    padding: 8px 12px;
    text-decoration: none;
    transition: all 0.2s;
}

#phia-search .page-numbers:hover {
    background-color: #f0f0f0;
    color: #9E8844;
}

#phia-search .page-numbers.current {
    background-color: #9E8844;
    color: white;
    border-color: #9E8844;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    #phia-search .site-content {
        margin-top: 120px;
    }
    #phia-search .product-image {
        margin-bottom: 20px;
    }
    #phia-search .page-title {
        font-size: 1.8rem;
        text-align: center;
    }
}

/* --- (Search page css end) --- */


/*dropdown for varition products energy and size*/
/* 1. Base style for Energy Waves & Size Dropdowns (Arabic IDs) */
select[id*="%d9"], /* Targets Energy Waves (موجات الطاقة) */
select[id*="%d8"]  /* Targets Size (الحجم) */ {
    background-color: #ffffff;      /* White background */
    border: 1px solid #d1d1d1;      /* Light grey border */
    border-radius: 4px;             /* Rounded corners */
    padding: 5px 8px;               /* Spacing inside the box */
    font-size: 15px;                /* Easy to read text size */
    color: #555555;                 /* Dark grey text */
    width: 100%;                    /* Fill the width of the column */
    cursor: pointer;                /* Shows a hand cursor on hover */
    outline: none;                  /* Removes default ugly browser glow */
    transition: border-color 0.3s ease; /* Smooth transition for hover effects */
    appearance: none;               /* Removes default browser 3D bevels */
    
    /* Adds the custom arrow indicator */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23bfa760%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left 12px top 50%; /* Switched to 'left' for RTL Arabic layout */
    background-size: 12px auto;
}

/* 2. Style when you Hover over the dropdown */
select[id*="%d9"]:hover,
select[id*="%d8"]:hover {
    border-color: #9e8844; /* Phia Brand Gold */
}

/* 3. Style when the dropdown is clicked/active */
select[id*="%d9"]:focus,
select[id*="%d8"]:focus {
    border-color: #9e8844; /* Phia Brand Gold */
    box-shadow: 0 0 0 1px #bfa760; /* Adds a subtle gold glow ring */
}

/* 4. Spacing between the dropdown rows */
table.variations tr {
    display: table-row;
}
table.variations td {
    padding-bottom: 15px; /* Adds space below each dropdown */
}


/*Event css start*/

/* --- 1. Fix Header Overlap (Use Padding instead of Margin) --- */
/* changing to padding helps the popup menu calculate position correctly */
#em-view-6 {
    padding-top: 180px !important; 
    padding-bottom: 100px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 0 !important; /* Reset margin */
}

/* --- 2. Create the Main White Card --- */
#em-view-6 .em-item-single {
    background-color: #ffffff;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 1px solid #e1e1e1;
    overflow: visible !important; /* Essential for dropdown to show */
    position: relative;
    z-index: 10;
}

/* --- 3. Fix the Image Display --- */
#em-view-6 .em-item-image {
    width: 100%;
    height: 220px;
    background-color: #fff;
    display: flex;
    align-items: center; 
    justify-content: center;
    border-bottom: 5px solid #aebf5e; 
    margin: 0;
    
    /* Keep corners rounded manually */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#em-view-6 .em-item-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    width: auto;
}

/* --- 4. Content Styling --- */
#em-view-6 .em-item-meta {
    padding: 30px;
    text-align: left;
    background: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

#em-view-6 .em-item-meta h3 {
    margin-top: 0;
    font-size: 1.4rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 15px;
}

#em-view-6 .em-item-meta-line {
    color: #777;
    font-size: 0.95rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- 5. FIX THE DROPDOWN MENU (The Blue/Float Issue) --- */
/* Target the specific popup library classes seen in your screenshot */

/* The main box container */
.tippy-box, 
.tippy-box[data-theme~='light-border'] {
    background-color: #ffffff !important; /* Solid White */
    color: #333333 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
}

/* The arrow pointing to the button */
.tippy-arrow {
    color: #ffffff !important; /* Make the arrow white to match */
}

/* The links inside */
.tippy-content a,
.em-event-add-to-calendar-content a {
    display: block !important;
    padding: 10px 15px !important;
    color: #555555 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f5f5f5;
    background-color: transparent !important;
    font-size: 14px;
    text-align: left;
}

/* Hover effect */
.tippy-content a:hover,
.em-event-add-to-calendar-content a:hover {
    background-color: #f0f7ff !important; /* Light blue hover */
    color: #03396c !important; /* Blue text */
}
/*Event css end*/

/* Change WooCommerce Star Rating Color */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
    color: #9E8844 !important;
}

/* Center Star Rating on Shop/Product Grid */
.woocommerce .products .star-rating {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}