/*header start*/
/* ===== Logo ===== */
.logo img {
  max-height: 130px;
  width: auto;
  display: block;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
}
.sticky-header.sticky-active .logo img {
  max-height: 100px;
}

/* ===== Top Bar ===== */
.top-bar {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid #9e8844;
  font-size: 13px; /* smaller default on desktop */
  color: #9e8844;
  font-weight: 500;
  padding: 0px 0; /* reduced height */
  transition: all 0.3s ease-in-out;
}
.top-bar a {
  color: #9e8844;
  margin-right: 15px;
  text-decoration: none;
  transition: color 0.5s;
}
.top-bar a:hover {
  color: #d6bc6b;
}

/* Shrink top-bar on scroll */
.sticky-header.sticky-active .top-bar {
  padding: 4px 0;
  font-size: 13px;
  
}
@media (max-width: 1399.98px) {
  /* Hide top-bar completely only on desktop */
  .sticky-header.sticky-active .top-bar {
    display: none !important;
  }
}


/* ===== Navbar Links ===== */
.navbar-nav .nav-link {
  position: relative;
  color: #9e8844 !important;
  font-weight: 500;
  font-size: 15px;
  margin: 0 10px;
  transition: color 0.3s;
   text-decoration: none !important;
}
.nav-link.active {
  border-bottom: 2px solid #d2b55b;
   text-decoration: none !important;
}
.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #d2b55b;
  transition: width 0.3s;
   text-decoration: none !important;
}
.navbar-nav .nav-link:hover::before {
  width: 100%;
}
.navbar-nav .nav-link:hover {
  color: #d2b55b !important;
   text-decoration: none !important;
}

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

  .mobile-menu {
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1050;
  }
  .mobile-menu .nav-link {
    color: #9e8844 !important;
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid #e5d7b3;
  }
  .mobile-menu .nav-link:hover {
    color: #d2b55b !important;
  }
}

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


/* 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: 20px; /* Indents the sub-items */
    margin-top: 0;
  }

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

/* Mobile Dropdown CSS END */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* header end */

/*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;
  margin-top:100px;
  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 {
  width: 100%;
}

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

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

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

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

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

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

/* Mobile adjustments */
@media (max-width: 768px) {
  .video-overlay .product-img {
    max-width: 200px;
    margin-top: 40px; /* Add some space at the top */
    margin-bottom: 15px;
  }

  .video-overlay .content h2 {
    font-size: 2rem;
  }
  
  .video-overlay .content p {
    font-size: 1.2rem; /* Adjusted for better readability */
    line-height: 1.5;
  }

  /* Ensure the content columns stack properly */
  .overlay-content .row > div {
    width: 100%;
  }
}

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

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

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


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

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

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

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

/*Ambassador section*/

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

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

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

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



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

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

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

  .divider {
    max-width: 240px;
  }

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

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

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

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

  .divider {
    max-width: 220px;
  }

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

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

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

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

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

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

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

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

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


 
.widget-title {
  color: #9e8844;
 
  font-weight: 400;
  font-size: 16px;
  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;
}
 
.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;
}
.footer-phone-link:hover {
  color: #d2b55b;
}
.footer-email-link,
.footer-address-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-email-link:hover,
.footer-address-link:hover {
  color: #d2b55b;
}
 
.social-icons {
  margin-top: 25px;
}
 
.social-icons a {
  color: #9e8844;
  font-size: 18px;
  margin-right: 18px;
  text-decoration: none;
}
 
.social-icons a:hover {
  color: #d6bc6b;
  opacity: 1;
}
 
/*
   --- Copyright Section ---
*/
.copyright-section {
  text-align: center;
  padding-top: 20px;
  margin-top: 0px;
  border-top: 1px solid #e5e5e5; /* Neutral border color */
}
 
.copyright-section p {
  margin: 0;
  font-size: 14px;
  color: #9e8844;
}
 
/*Footer End*/
 
/*Home page or front page end*/

/*Energy Wave page start*/

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

/*Research page start*/

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

/* Science */
#science-title {
  font-size: 3rem; /* bigger */
  font-weight: 500;
  color: #9e8844;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
  margin-top: 210px;
  font-family: 'Raleway', sans-serif;
  
}
#science-subtitle {
  font-size: 1.7rem; /* slightly bigger */
  font-weight: 700;
  color: #9e8844;
  text-align: center;
  margin-bottom: -10px;
  letter-spacing: 1.2px;
  /*margin-top: 60px;*/
  font-family: 'Raleway', sans-serif;
}
#science-text {
  font-size: 1.1rem; /* increased */
  line-height: 1.9;
  color: #4d4d4d;
  font-weight: 400;
  text-align: justify;
  margin-bottom: 1.5rem;
  /*margin-top: -50px;*/
   font-family: 'Raleway', sans-serif;
}
#science-img {
  max-width: 80%;
  display: block;
  margin: 0 auto 1.5rem auto; /* spacing below image */
}

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

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

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

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

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

/*Reasearch page end*/

/*Alchemy page start*/


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

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

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

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

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

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

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

@media (max-width: 767.98px) {   
      #company-page-wrapper {    
          padding-left: 40px;     
          padding-right: 40px;   
          
      }
      }

/*Alchemy page end*/


/*Philosophy page start*/

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

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

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

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

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

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

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

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

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

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

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

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

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

/*Philosophy page end*/

/*Company page start*/

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

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

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

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

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

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

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

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

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

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

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


/*Company page end*/

/*Education page start*/

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


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

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

/*Education page end*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

  #subHeading {
    font-size: 1.5rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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




/*Energy wave Grounding start*/

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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


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

/*
  IMPORTANT: This code does NOT fix the broken images.
  It HIDES the ugly "broken image" icon that the browser shows.
  The only real fix is to correct the HTML src="" attribute.
*/
body.page-template-template-blog-php .event-card .event-img {
  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;
}

/*Cart Icon*/
@media (max-width: 767px) {
  a.cart-icon.d-lg-none.me-3.text-decoration-none {
    display: none;
  }
}
@media (max-width: 991px) {
  a.cart-icon.d-lg-none.me-3.text-decoration-none {
    display: none;
  }
}


/* Style for the main cart container link */
.cart-icon-container {
    display: flex;
    align-items: center;
    color: #9e8844; /* Gold-like color from your image */
    font-weight: 600;
    text-decoration: none; /* Ensure no underline on the link */
}
 
 
/* Removes underline on hover */
.cart-icon-container:hover {
    text-decoration: none;
    color: #d2b55b; /* Gold-like color from your image */
}
 
 
/* Styles the total price text */
.cart-icon-container .cart-total {
    margin-right: 8px;
    font-size: 18px; /* Adjust size as needed */
}
 
/* This wrapper is the key for positioning the notification badge */
.cart-icon-container .shopping-bag-wrapper {
    position: relative; /* This is the positioning anchor */
    display: inline-block;
}
 
/* Styles the shopping bag icon */
.cart-icon-container .bi-bag{
    font-size: 20px; /* Adjust icon size as needed */
    line-height: 1; /* Helps with vertical alignment */
    font-weight:600;
}
 
/* This is the circular notification badge for the item count */
.cart-icon-container .cart-item-count {
    position: absolute;
    top: -5px;     /* Moves the badge up */
    right: -8px;   /* Moves the badge to the right */
 
    /* Badge appearance */
    background-color: #b72978; /* Magenta color from your image */
    color: white;
    border-radius: 50%; /* Makes it a circle */
    /* Sizing and alignment */
    width: 18px;
    height: 18px;
    line-height: 20px; /* Vertically centers the number */
    text-align: center;
    font-size: 10px;
    font-weight: bold;
}
/*Cart icon end*/

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

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

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

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

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

/* 6. Styling for Validation Error Messages */
#energy-app .error-message.red {
  padding: 15px;
  margin-top: 20px;
  border: 1px solid #d9534f;
  background-color: #f2dede;
  color: #a94442;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}
/* 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: 200px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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