/*header start*/
html {
    margin-top: 0 !important;
}
  /* Custom style to ensure mobile menu appears correctly */
    .mobileMenuJAPAN {
      position: absolute;
      top: 100%; /* Position below the navbar */
      left: 0;
      right: 0;
      background-color: white;
      z-index: 1020;
      padding: 1rem;
      border-top: 1px solid #eee;
    }
    
    /* --- 1. CORE STICKY HEADER POSITIONING --- */
    
    .sticky-header {
    position: sticky;
    top: 0; /* Default position for logged-out users */
    z-index: 1020;
    background-color: white; /* Prevents content from showing underneath during animation */
    }

    /* --- 2. WORDPRESS ADMIN BAR FIX (CRUCIAL) --- */
    /* When logged in, this pushes the header down to sit below the admin bar, preventing the gap. */
    
    body.admin-bar .sticky-header {
    top: 32px;
    }
    
    /* Adjusts for the different admin bar height on smaller screens */
    
    @media screen and (max-width: 782px) {
    body.admin-bar .sticky-header {
        top: 46px;
    }
}

/* --- 3. LOGO AND NAVBAR STYLING --- */
    .logo img {
    max-height: 75px;
    transition: max-height 0.3s ease-in-out;
}

.sticky-header .navbar {
    padding-top: 15px;
    padding-bottom: 15px;
    transition: padding 0.3s ease-in-out;
}

/* --- 4. TOP BAR INITIAL STATE & TRANSITION --- */
.top-bar {
    background: #ffffff;
    border-bottom: 2px solid #9e8844;
    overflow: hidden;
    max-height: 50px; /* Animate from this height */
    opacity: 1;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.2s ease-out, border 0s linear 0.1s;
}

/* --- 5. SCROLLED STATE (TRIGGERED BY JS) --- */

/* HIDE the top bar smoothly */
.sticky-header.sticky-active .top-bar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
    opacity: 0;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.2s ease-out, border 0s;
}

/* SHRINK the navbar */
.sticky-header.sticky-active .navbar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

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

/* ===== Mobile Adjustments ===== */
@media (max-width: 1024px) {
.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;
}
}



/* ============================================= */
/* --- 4. NAVBAR LINKS STYLING (UPDATED)     --- */
/* ============================================= */

/* --- Default State of the Menu Links --- */
.navbar-nav .nav-link {
    position: relative; /* Needed for the underline effect */
    color: #9e8844 !important;   /* <<< CHANGE THIS to your desired default link color (e.g., dark grey) */
    font-weight: 500;
    font-size: 17px;
    margin: 0 10px;
    padding-bottom: 5px; /* Adds a little space for the underline */
    transition: color 0.3s;
    text-decoration: none !important;
}

/* --- Hover State (when the mouse is over a link) --- */
.navbar-nav .nav-link:hover {
    color: #d2b55b !important;   /* <<< CHANGE THIS to your desired hover color (e.g., your brand's gold) */
}

/* --- Underline effect on Hover --- */
.navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%; /* Start the line from the middle */
    transform: translateX(-50%); /* Center the line */
    width: 0; /* Initially, the line has no width */
    height: 2px;
    background: #d2b55b; /* <<< CHANGE THIS to match your hover color */
    transition: width 0.3s ease-in-out; /* Smooth animation for the line growing */
}

/* --- This makes the underline grow when you hover --- */
.navbar-nav .nav-link:hover::before {
    width: 100%; /* Make the line full-width on hover */
}

/* ===== 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;
}


/* =================================================================== */
/* ===  DESKTOP DROPDOWN STYLES (JS-CONTROLLED)                    === */
/* =================================================================== */

@media (min-width: 1400px) {
  .navbar-nav .nav-item.dropdown {
    position: relative;
  }

  .navbar-nav .dropdown-menu {
    display: block; /* Keep it in the layout, but hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Optional: slight upward slide effect */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
  }

  /*
   * CRITICAL CHANGE: The menu is now ONLY displayed when the parent
   * <li> has the ".menu-is-open" class, which our JS controls.
   */
  .navbar-nav .nav-item.dropdown.menu-is-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .navbar-nav .dropdown-menu .dropdown-item {
     padding: 8px 20px;
     border-bottom: none;
  }

  .navbar-nav .dropdown-menu .dropdown-item:hover {
      background-color: #f5f5f5;
  }
}
/* =============================================== */
/* === 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 */

/* ======================================================= */
/* --- FINAL CSS (To be controlled by JavaScript) --- */
/* ======================================================= */

/* --- 1. MOBILE & TABLET VIEW (Screens up to 1399.98px) --- */
@media (max-width: 1399.98px) {
    
    /* This class will be ADDED BY JAVASCRIPT to make the header fixed */
    .header-is-fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1030 !important;
        background-color: white !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }

    /* Force the top bar to be hidden on mobile for a clean look */
    .sticky-header .top-bar {
        display: none !important;
    }

    /* Ensure the navbar and logo have a consistent size */
    .sticky-header .navbar {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .sticky-header .logo img {
        max-height: 75px !important;
    }

    /* WordPress Admin Bar Compatibility */
    body.admin-bar .header-is-fixed {
        top: 46px !important;
    }
}


/* --- 2. DESKTOP VIEW (Screens 1400px and wider) --- */
/* This section remains the same to allow the normal sticky/shrink effect on desktop */
@media (min-width: 1400px) {
    .sticky-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
    }

    body.admin-bar .sticky-header {
        top: 32px !important;
    }

    /* JS-controlled shrink styles for desktop */
    .sticky-header.sticky-active .top-bar {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }
    .sticky-header.sticky-active .navbar {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .sticky-header.sticky-active .logo img {
        max-height: 60px !important;
    }
}

/*Scroll end*/

@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;ct
  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 */

/*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-overlay {
  position: absolute;
  left: 0;
  z-index: 2; /* Make sure overlay is on top of the video */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* Center content vertically for mobile */
  align-items: center;
  background: rgba(0, 0, 0, 0.35); /* dark overlay */
  padding: 20px;
  box-sizing: border-box;
}

.video-overlay .container.overlay-content {
  margin-top:-80px;
  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: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  margin-top: -10px;
}

.video-overlay .content p {
  font-size: 2em;
  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;
  }
}

/*Free Instagram Feed widget hide content*/
.eapps-link, 
                a[href*="elfsight.com"] {
                    display: none !important;
                    visibility: hidden !important;
                    opacity: 0 !important;
                    pointer-events: none !important;
                }
/*   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*/

 
/*Footer End*/
 
/*Home page or front page end*/

/*Energy Wave page start*/

/*Product*/
.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;
  }
}

/*ADD TO CART BUTTON IN PRODUCT PAGE*/

/* 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 */
}

/* 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: 1px 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: 13px !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; 
}

/*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;
}
.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*/




/* ====================== 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: 130px;
    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 {
  display: block;
  min-height: 200px; /* Allocate space for the image */
  background-color: #f0f0f0; /* Placeholder background color */

  /* The following lines hide the broken image icon itself */
  text-indent: -10000px; /* Pushes the alt text and icon out of view */
  font-size: 0;
  color: transparent;
}

/* ========================================================== */
/* === 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;
    }
}
/* Energy Fit start */
#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 Fit End */


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

#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;
}

/* --- Increase Contact Form 7 field width on desktops --- */
@media (min-width: 992px) {
  .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
    width: 1000px !important; /* Adjust this value to your desired width */
    max-width: 100%; /* Ensures the field is not wider than its container */
  }
}

/* --- Stack Contact Form 7 Checkboxes/Radio Buttons Vertically on Desktop --- */
@media (min-width: 992px) {
  .wpcf7-form-control .wpcf7-list-item {
    display: block; /* Forces each item onto its own line */
    margin-bottom: 10px; /* Adds some vertical spacing between options */
  }

  /* Optional: Removes the margin from the very last item */
  .wpcf7-form-control .wpcf7-list-item:last-child {
    margin-bottom: 0;
  }
}


/* 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:20px;*/
}
 
#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 --- */