/* MAIN CSS STARTS HERE */


   /* Upper header */
   .small-one {
       width: 100%;
       position: relative;
       box-shadow: 0px 1px 0px #e5e5e5;
       background-color: var(--color-white);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 12px 300px;
       box-sizing: border-box;
       text-align: left;
       font-size: 12px;
       color: var(--color-darkslategray);
       font-family: var(--font-poppins);
   }

   .get-free-shipping {
       position: relative;
       line-height: 130%;
       font-weight: 500;
   }




   /* --- Base Container --- */
   .midle {
       width: 100%;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--padding-16) 0px;
       box-sizing: border-box;
       text-align: left;
       font-size: 15px;
       /* Base color set to black/dark gray for text within .midle */
       color: var(--color-gray-100);
       font-family: var(--font-poppins);
	       margin-left: 89px;

   }

   .image-1-parent {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 50px;
   }

   .image-1-icon {
       width: 83px;
       position: relative;
       max-height: 100%;
       object-fit: cover;
       transform: translateX(-160px);
   }

   /* --- Search Bar Styling --- */
   .search {
       border-radius: var(--br-6);
       border: 1px solid var(--color-gainsboro-100);
       display: flex;
       align-items: center;
   }

   .searech {
       width: 400px;
       display: flex;
       align-items: center;
       padding: var(--padding-12) 18px var(--padding-12) var(--padding-16);
       box-sizing: border-box;
       gap: 8px;
   }

   .search-icon {
       height: 20px;
       width: 20px;
       position: relative;
       /* Optional: Ensure search icon is dark if it's a light SVG */
       /* filter: invert(0); */
   }

   /* --- केवल यह CSS रखें, बाकी #search-results-container से जुड़े CSS हटा दें --- */
   .midle-search-input-temp {
       border: none;
       outline: none;
       background: transparent;

       width: 100%;
       height: 100%;
       font-size: inherit;
       line-height: inherit;
       color: #333;
       padding: 0 5px;
       margin: 0;
       box-sizing: border-box;
   }

   .midle-search {
       width: 348px;
       position: relative;
       line-height: 21px;
       display: inline-block;
       flex-shrink: 0;
       /* Ensure Search text is dark/black */
       color: var(--color-gray-100);
   }

   .button {
       border-radius: 0px var(--br-6) var(--br-6) 0px;
       background-color: rgba(0, 178, 7, 1);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--padding-12) 24px;
       font-size: var(--fs-14);
       /* color: Gray Scale/White !important; */
   }

   .search2 {
       position: relative;
       line-height: 20px;
       font-weight: 500;
   }

   /* for hide on desktop */
   @media (min-width: 769px) {
       .mobile-search-icon-link {
           display: none !important;
       }
   }

   /* --- Icons Section Styling --- */
   .icons {
       display: flex;
       align-items: center;
       gap: 16px;
       font-size: 11px;
       /* Base color for cart text */
       color: var(--color-dimgray);
   }

   .person-icon {
       width: var(--width-32);
       position: relative;
       max-height: 100%;
       margin-left: 290px;
   }

   .devider {
       height: 25px;
       width: 1px;
       position: relative;
       border-right: 1px solid var(--color-gainsboro-200);
       box-sizing: border-box;
   }

   .shopping-card {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .shopping-cart-wrapper {
       height: 32px;
       width: var(--width-32);
       position: relative;
   }

   /* Note: There is no .shopping-cart-icon in the provided HTML, only .cart-icon */
   .shopping-cart-icon {
       position: absolute;
       top: -6px;
       left: 0px;
       width: 38px;
       height: 38px;
   }

   .info {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 7px;
   }

   .shopping-cart {
       position: relative;
       line-height: 120%;
   }

   /* --- 🛑 LINK RESET FIX (Purple Color/Underline Hatao) --- */
   /* Target all links inside the midle section (Logo, Search Link, User Link, Cart Link) */
   .midle a,
   .midle a:visited,
   .midle a:hover {
       /* Text color ko forcefully dark/black karo (midle se inherit hoga) */
       color: inherit !important;
       /* Underline poori tarah se hatao */
       text-decoration: none !important;
   }

   /* Ensure the cart currency (₹600.00) is also not purple */
   .shopping-cart-wrapper-link .div {
       color: var(--color-dimgray) !important;
   }

   .div {
       position: relative;
       font-size: var(--fs-14);
       line-height: 100%;
       font-weight: 500;
       color: var(--color-gray-200);
   }

   /* --- Global Nav Container Styles --- */
   /* Placeholder for Cool Grey (Assuming standard Cool-Grey/300) */
   :root {
       --color-cool-grey-300: #B0B7C3;
       --color-white: #FFFFFF;
       /* Ensure var(--color-gray) and other variables are defined */
   }

   /* --- Global Nav Container Styles --- */
   .nav-links {
       width: 100%;
       position: relative;
       background-color: var(--color-gray);
       display: flex;
       align-items: center;
       justify-content: flex-start;
       padding: 16px 0;
       box-sizing: border-box;
       font-size: var(--fs-14);
       font-family: var(--font-poppins);
       /* Set color to the intended default for all child elements */
       color: var(--color-cool-grey-300) !important;
   }

   .nav-links-parent {
       width: 1228px;
       display: flex;
       align-items: center;
       gap: 24px;
       margin-left: 62px;
   }

   .nav-links-nav-links {
       flex: 1;
       display: flex;
       align-items: center;
       gap: 16px;
       justify-content: flex-start;
       padding-left: 42px;
   }

   /* --- Main Nav Item Containers (Home, Blogs, etc.) --- */
   .nav-links2,
   .nav-links3,
   .nav-links4 {
       height: var(--height-40);
       display: flex;
       align-items: center;
       padding: var(--padding-0) var(--padding-12);
       box-sizing: border-box;
       transition: color 0.2s;
   }

   /* --- Nav Link (<a>) Styling: Default is Grey, No Underline --- */
   .nav-links2 a,
   .nav-links3 a,
   .nav-links4 a {
       /* Base color is Cool-Grey (Inherited from .nav-links is fine, but set explicitly for safety) */
       color: var(--color-cool-grey-300) !important;
       text-decoration: none !important;
       position: relative;
       line-height: var(--lh-20);
       font-weight: 500;
       /* Ensure visited links are also not purple/blue */
       transition: color 0.2s;
   }

   /* --- 💡 ACTIVE STATE: White Color --- */
   /* nav links */
   .nav-links2.is-active a,
   .nav-links4.is-active a,
   .dropdown-parent.is-active a {
       color: var(--color-white) !important;
   }

   /* --- Hover State: White Color --- */

   .nav-links2 a:hover,
   .nav-links4 a:hover,
   .nav-links3 a:hover {
       color: var(--color-white) !important;
       text-decoration: none !important;
       /* Important safety check */
   }

   /* --- Dropdown Parent & Trigger Styling --- */
   .dropdown-parent {
       position: relative;
       display: inline-block;
       font-family: Poppins;
   }

   .nav-links3 {
       cursor: pointer;
       padding: 15px 20px;
   }

   .nav-links3:hover {
       background-color: transparent;
   }

   /* --- Icon Styling and Rotation --- */
   /* --- Dropdown Menu (The Big White Box) Styling --- */
   .dropdown-menu {
       display: none !important;
       position: absolute;
       top: 140%;
       left: 0;

       background-color: white;
       box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
       z-index: 100;

       /* Overall Spacing: Right padding kam kiya (e.g., 24px) */
       padding: 24px 20px 24px 24px;
       /* Top/Bottom 24px, Left 24px, Right 20px (Reduced) */
       border-radius: 7px;
       min-width: 572px;

       /* Column Gap */
       display: flex;
       gap: 40px;
   }

   .dropdown-parent.is-open .dropdown-menu {
       display: flex !important;
   }

   /* --- Dropdown Content and Divider --- */
   .column {
       display: flex;
       flex-direction: column;
   }

   /* Column 1 (Ayurvedic Churn) */
   .column:nth-child(1) {
       margin-right: 10px;
   }

   /* Column 2 (Immunity Boosters) */
   .column:nth-child(2) {
       padding-left: 0;
       margin-right: 10px;
   }

   /* 🛑 FINAL FIX: Divider applied ONLY to the Third Column (New arrivals) */
   .column:nth-child(3) {
       /* Grey line on the left */
       border-left: 1px solid #e0e0e0;

       /* Space between the line and the 'New arrivals' text */
       padding-left: 30px;

       /* Reset other margins/paddings */
       margin-left: 0;
   }

   /* Vertical spacing for links */
   .dropdown-menu a {
       color: #555;
       padding: 8px 0;
       font-size: 15px;
       text-decoration: none;
       white-space: nowrap;
       transition: color 0.2s;
   }

   .dropdown-menu a:hover {
       color: green;
       cursor: pointer;
   }

   .call-now-parent {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
       gap: var(--gap-4);
       font-size: var(--fs-12);
       /* color: var(--color-white); */
       color: var(--color-white) !important;
       margin-left: -130px;
   }

   .call-now {
       display: flex;
       align-items: center;
       gap: var(--gap-8);

   }

   .phone-icon {
       width: var(--width-16);
       position: relative;
       max-height: 100%;

   }

   .div {
       position: relative;
       line-height: 150%;



   }

   /* header close desktop*/
   /* --- HIDE MOBILE ELEMENTS ON DESKTOP --- */
   .mobile-menu-trigger,
   .mobile-nav-sidebar,
   .hamburger-icon,
   .close-icon,
   .mobile-arrow-down {
       display: none !important;
   }

   /* 🛑 FIX: ENSURE DESKTOP CONTACT LINKS ARE WHITE 🛑 */
   /* This rule applies to the call-now-parent section (the dark bar below the header) */
   .call-now-parent a {
       color: var(--color-white) !important;
       text-decoration: none !important;
       /* Removes the underline from links */
   }

   /* Ensure desktop eleme nts are visible by default */
   .search,
   .devider,
   .info,
   .nav-links,
   .call-now-parent {
       /* Assuming these should all be visible on desktop */
       display: flex;
   }


   /* ========================================================= */
   /* --- MOBILE RESPONSIVENESS (Max-width: 768px) --- */
   /* ========================================================= */
   @media (max-width: 768px) {

       /* --- 1. HIDE DESKTOP ELEMENTS ON MOBILE --- */

       .small-one,
       .search,
       .icons .devider,
       .icons .info,
       /* 🛑 HIDE DESKTOP CONTACT INFO ON MOBILE 🛑 */
       .call-now-parent.desktop-contact,
       .nav-links {
           display: none !important;
       }

       /* Reposition the logo for a centered look */
       .image-1-icon {
           transform: none;
           margin: 0;
           left: -43px;
       }

       /* Reset icon margin and make icons wrapper centered */
       .midle .person-icon {
           margin-left: 0;
       }


       /* --- 2. MOBILE HEADER LAYOUT (.midle) --- */

       .midle {
           /* This ensures flex behavior for ordering */
           display: flex;
           /* Added display:flex for clarity */
           justify-content: space-between;
           align-items: center;
           /* Vertically align items */
           padding: 10px 15px;
           border-bottom: 1px solid #eee;
       }

       .image-1-parent {
           /* Logo remains centered */
           flex-grow: 1;
           justify-content: center;
           text-align: center;
           /* LOGO: Now positioned second, after the Hamburger */
           order: 2;
           /* UPDATED: Changed from 3 to 2 */
       }

       .icons {
           /* Basket/Profile icons go to the far right */
           gap: 12px;
           order: 4;
           /* Icons group moves to the far right (last) */
       }

       /* Show the actual Hamburger Icon container and place it far left (Order: 1) */
       .mobile-menu-trigger {
           display: block !important;
           /* HAMBURGER: Remains in the first position (far left) */
           order: 1;
           padding: 0;
       }

       /* Show the actual Hamburger Icon image */
       .hamburger-icon {
           display: block !important;
           width: 24px;
           height: 24px;
       }

       /* Placeholder for the other mobile icon */
       .hamburger-menu {
           /* This rule seems to be a placeholder/duplicate, consider using .mobile-menu-trigger only */
           display: none !important;
       }

       /* Show the Search Icon container and place it after the Logo (Order: 3) */
       .mobile-search-icon {
           display: block !important;
           /* SEARCH ICON: Now positioned third, after the Logo */
           order: 3;
           /* UPDATED: Changed from 2 to 3 */
           margin-left: 10px;
           /* Add some space next to the logo/center */
           width: 68px;
           height: 24px;
       }


       /* --- 3. MOBILE OFFCANVAS SIDEBAR STYLING --- */

       .mobile-nav-sidebar {
           display: block !important;
           position: fixed;
           top: 0;
           left: 0;
           /* Width according to the image */
           width: 80vw;
           max-width: 300px;
           height: 100%;
           background-color: white;
           z-index: 999;
           overflow-y: auto;
           /* Sidebar starts hidden (off-screen) */
           transform: translateX(-100%);
           transition: transform 0.3s ease-in-out;
           box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
           padding: 0;
           /* Remove padding from main container */
           font-family: var(--font-poppins);
           box-sizing: border-box;
       }

       /* State for showing the sidebar (requires JavaScript) */
       .mobile-nav-sidebar.is-open {
           transform: translateX(0);
       }

       /* Sidebar Header (Login/Signup & Close Button) */
       .sidebar-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px 20px;
           border-bottom: 1px solid #eee;
       }

       .login-signup-link {
           font-size: 16px;
           font-weight: 600;
           color: rgba(0, 178, 7, 1);
           /* Blue or any highlight color */
           text-decoration: none;
       }

       .close-icon {
           display: block !important;
           width: 24px;
           height: 24px;
           cursor: pointer;
       }


       /* Main Navigation Links */
       .mobile-main-nav {
           padding: 10px 0;
       }

       .mobile-nav-item {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 12px 20px;
           font-size: 16px;
           color: #333;
           text-decoration: none;
           font-weight: 500;
           transition: background-color 0.2s;
           font-family: var(--font-poppins);
       }

       .mobile-nav-item:hover {
           background-color: #f7f7f7;
       }

       /* Dropdown Trigger */
       .mobile-dropdown-trigger {
           cursor: pointer;
       }

       .mobile-arrow-down {
           display: block !important;
           width: 20px;
           height: 20px;
           transition: transform 0.3s;
       }

       /* Rotate arrow when dropdown is open */
       .mobile-dropdown-parent.is-open .mobile-arrow-down {
           transform: rotate(180deg);
       }

       /* Submenu Links */
       .mobile-submenu-links {
           display: none;
           padding: 0 0 10px 0;
           background-color: #fcfcfc;
       }

       /* Show submenu when 'is-open' class is present (requires JavaScript to toggle) */
       .mobile-dropdown-parent.is-open .mobile-submenu-links {
           display: block;
       }

       .mobile-sub-item {
           display: flex;
           /* ✅ side-by-side layout */
           align-items: center;
           /* ✅ vertically centered */
           gap: 8px;
           /* ✅ space between icon & text */
           padding: 8px 20px 8px 30px;
           font-size: 14px;
           color: #555;
           text-decoration: none;
           transition: color 0.2s;
       }

       .mobile-sub-item img,
       .mobile-sub-item svg {
           width: 18px;
           /* optional: icon size */
           height: 18px;
           flex-shrink: 0;
           /* keep icon size fixed */
       }

       .mobile-sub-item span,
       .mobile-sub-item p,
       .mobile-sub-item div {
           line-height: 1.4;
       }

       .mobile-sub-item:hover {
           color: rgba(0, 178, 7, 1);
       }

       /* Divider */
       .mobile-divider {
           border-top: 1px solid #eee;
           margin: 10px 0;
       }

       /* My Profile Section */
       .mobile-profile-section {
           padding: 10px 0;
       }

       /* Mobile Contact Info */
       .call-now-parent.mobile-contact {
           display: flex !important;
           flex-direction: column;
           align-items: flex-start;
           padding: 20px;
           gap: 10px;
           margin-left: -1px;
       }

       .call-now-parent.mobile-contact .call-now {
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .call-now-parent.mobile-contact .phone-icon {
           width: 20px;
           height: 20px;
       }

       .call-now-parent.mobile-contact a {
           color: #555 !important;
           font-size: 14px;
           text-decoration: none;
       }
   }

   /* ======================================================= */
   /* DESKTOP DROPDOWN STYLING (> 768px)                      */
   /* ======================================================= */
   /* ======================================================= */
   /* ======================================================= */
   /* DESKTOP DROPDOWN STYLING (> 768px)                      */
   /* ======================================================= */
   @media (min-width: 769px) {

       .user-dropdown-wrapper {
           position: relative;
           display: inline-block;
           cursor: pointer;
           /* FIX: Hover area ko badhaya taki dropdown tak touch ho sake */
           padding-bottom: 10px;
           margin-bottom: -10px;
           /* FIX: Ensure wrapper is above other elements to catch hover */
           z-index: 1001;
       }

       .user-dropdown-wrapper .icon-link {
           display: block;
           padding: 5px;
       }


       .desktop-login-dropdown {
           display: none;
           position: absolute;

           top: 80%;
           /* Adjusted to align with extended hover area */
           right: -30px;

           margin-top: 0;

           background-color: white;
           border: 1px solid #eee;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
           border-radius: 8px;
           padding: 8px 0;
           z-index: 1000;
           /* Wrapper (1001) se neeche, but still high */
           min-width: 170px;
       }

       .desktop-login-dropdown .dropdown-item {
           display: flex;
           align-items: center;
           gap: 12px;
           width: 100%;
           font-size: 14px;
           line-height: 20px;
           font-family: var(--font-poppins);

           color: #333;
           /* Default text color (Black/Dark Gray) */

           text-decoration: none;
           text-align: left;
           padding: 10px 15px;
           transition: color 0.2s, background-color 0.2s;
           box-sizing: border-box;
       }

       /* ✅ FINAL HOVER: Only Green Text/Icon, No Background */
       .desktop-login-dropdown .dropdown-item:hover {
           background-color: transparent;
           /* No background color */
           color: var(--color-limegreen, #38c172);
           /* Text turns Green */
       }

       .desktop-login-dropdown .dropdown-item img,
       .desktop-login-dropdown .dropdown-item svg {
           width: 18px;
           height: 18px;
           flex-shrink: 0;
           color: #666;
           /* Default Icon color */
           transition: color 0.2s;
       }

       /* ✅ FINAL HOVER: Icon turns Green */
       .desktop-login-dropdown .dropdown-item:hover img,
       .desktop-login-dropdown .dropdown-item:hover svg {
           color: var(--color-limegreen, #38c172);
       }


       /* DROPDOWN VISIBILITY LOGIC */
       .user-dropdown-wrapper:hover .desktop-login-dropdown,
       .user-dropdown-wrapper:focus-within .desktop-login-dropdown {
           display: block;
       }
   }


   /* ======================================================= */
   /* MOBILE SAFETY STYLING (< 769px) - NOTHING CHANGES HERE  */
   /* ======================================================= */
   @media (max-width: 768px) {

       .desktop-login-dropdown {
           display: none !important;
       }


       .user-dropdown-wrapper {
           position: static !important;
           display: block !important;
       }

       .user-dropdown-wrapper .icon-link {
           display: block !important;
       }
   }

   /* HERO css */
   @media (max-width: 767px) {

       /* Hero Section Height/Layout (unchanged) */
       .slide {
           height: 45vh !important;
           flex-direction: row !important;
           align-items: flex-end !important;

       }

       /* Overlay (unchanged) */
       .slide>div:first-child {
           background-color: rgba(0, 0, 0, 0.6) !important;
       }


       .slide>div:nth-child(2) {
           width: 45% !important;
           align-items: flex-start !important;

           justify-content: flex-start !important;

           padding-left: 1rem !important;
           padding-right: 0.5rem !important;
           padding-bottom: 0px !important;


           padding-top: 1.5rem !important;
       }

       /* Image container Width (unchanged) */
       .slide>div:nth-child(3) {
           width: 55% !important;
           align-items: flex-end !important;
           justify-content: flex-end !important;
           padding-right: 1rem !important;
           padding-left: 0.5rem !important;
       }

       /* Bottle container size (unchanged) */
       .slide>div:nth-child(3)>div {
           width: 150px !important;
           height: 200px !important;
       }

       /* Mobile Bottles Rotation and Position (unchanged) */
       .mobile-bottle-1 {
           left: 5% !important;
           top: -30% !important;
       }

       .mobile-bottle-2 {
           opacity: 1 !important;
           top: -30% !important;
       }

       /* Text size adjustments (h1 size unchanged) */
       .slide h1 {
           font-size: 1.5rem;
           line-height: 1.2;
       }

       .slide p {
           font-size: 0.7rem;
           line-height: 1.3;
       }

       /* Order Now button height (unchanged) */
       .mobile-button-height {
           padding-top: 0.3rem !important;
           padding-bottom: 0.3rem !important;
           font-size: 0.8rem;
           line-height: 2;
           width: auto;
       }

       /* Dots position (unchanged) */
       .dots-container {
           bottom: 375px !important;
       }
   }

   /* HEADER CLOSE  */

   /* TERMS AND CONDITION SEC */
   .account-page-wrapper {
       width: 100%;
       height: 160px;
       position: relative;
       background-color: #006100;
       overflow: hidden;
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: left;
       font-size: 14px;
       color: #e1e4e8;
       font-family: Poppins;
   }

   .account-header-group {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
       max-width: 1228px;
       width: 90%;
   }

   .breadcrumb-links-container {
       display: flex;
       align-items: flex-start;
       gap: 8px;
   }

   .breadcrumb-item,
   .breadcrumb-separator {
       position: relative;
       line-height: 20px;
   }

   .main-page-title {
       width: 100%;
       position: relative;
       font-size: 32px;
       line-height: 44px;
       font-weight: 500;
       color: #fff;
   }

   /* TERMS SEC */

   .terms-wrapper-uniq {
       width: 100%;
       position: relative;
       background-color: #fff;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: 76px 0px;
       box-sizing: border-box;
       text-align: left;
       font-size: 16px;
       color: #566470;
       font-family: Poppins;
   }

   .terms-updated-box-uniq {
       width: 1020px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 24px;
   }

   .terms-updated-text-uniq {
       align-self: stretch;
       position: relative;
       line-height: 24px;
   }

   .terms-content-uniq {
       align-self: stretch;
       position: relative;
       line-height: 24px;
       color: #1d252d;
   }

   .terms-heading-uniq {
       font-weight: 600;
   }

   /* MOBILE CSS */
   @media (max-width: 600px) {

       .terms-wrapper-uniq {
           padding: 32px 16px;
           text-align: left;
       }

       .terms-updated-box-uniq {
           width: 100%;
           gap: 16px;
           align-items: flex-start;
       }

       .terms-updated-text-uniq {
           font-size: 14px;
           line-height: 20px;
           color: #566470;
           margin-bottom: 4px;
       }

       .terms-content-uniq {
           width: 100%;
           font-size: 14px;
           line-height: 22px;
           color: #1d252d;
       }

       .terms-content-uniq span {
           display: block;
           margin-bottom: 10px;
       }

       .terms-heading-uniq {
           font-size: 15px;
           font-weight: 700;
           color: #1d252d;
           margin: 16px 0 6px 0;
           display: block;
       }
   }

   /* FOOTER CSS */
   /* ====== FOOTER BASE STYLE ====== */
   .dh-footer {
       width: 100%;
       position: relative;
       background-color: #033121;
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: 80px 0px 60px;
       box-sizing: border-box;
       gap: 24px;
       text-align: left;
       font-size: 16px;
       color: #fff;
       font-family: "Poppins", sans-serif;
   }

   .dh-footer-container {
       width: 1120px;
       overflow: hidden;
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       flex-wrap: wrap;
       align-content: flex-start;
       gap: 0px 20px;
       max-width: 1120px;
   }

   /* Columns */
   .dh-col {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 24px;
       font-size: 14px;
       color: #e1e4e8;
   }

   /* Logo + About */
   .dh-logo-about {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
   }

   .dh-logo {
       width: 80px;
       object-fit: cover;
   }

   /* .dh-desc {
  
 
  	width: 100%;
  	position: relative;
  	font-size: 14px;
  	line-height: 20px;
  	font-family: Poppins;
  	color: #e1e4e8;
  	text-align: left;
  	display: inline-block;
} */
   /* .dh-desc {
  width: 100%;
  position: relative;
  font-size: 15px;
  line-height: 20px;
  font-family: Poppins;
  color: #e1e4e8;
  text-align: left;
  display: -webkit-box;

  -webkit-box-orient: vertical;
  overflow: hidden;
} */
   .dh-desc {
       max-width: 240px;
       /* maintain 3-line balance across devices */
       font-size: 15px;
       line-height: 22px;
       font-family: "Poppins", sans-serif;
       color: #e1e4e8;
       text-align: left;
       white-space: normal;
       word-break: break-word;
       overflow-wrap: break-word;
       margin-top: 8px;
   }



   /* Social Icons */
   .dh-socials {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .dh-social-icon {
       height: 32px;
       width: 32px;
       border-radius: 50%;
       background-color: #fff;
       padding: 6px;
       box-sizing: border-box;
       cursor: pointer;
       transition: 0.3s ease;
   }

   .dh-social-icon:hover {
       opacity: 0.8;
   }

   /* Titles & Links */
   .dh-title {
       line-height: 24px;
       font-weight: 600;
   }

   .dh-links {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
       font-size: 14px;
       color: #e1e4e8;
   }

   .dh-links a {
       color: #e1e4e8;
       text-decoration: none;
       transition: 0.3s ease;
   }

   .dh-links a:hover {
       color: #fff;
   }

   /* Contact items */
   .dh-contact {
       display: flex;
       align-items: center;
       gap: 4px;
       color: #e1e4e8;
       text-decoration: none;
       line-height: 20px;
   }

   .dh-icon {
       width: 16px;
       height: 16px;
       object-fit: contain;
   }

   /* Divider + Copyright */
   .dh-footer-line {
       width: 1229px;
       height: 1px;
       border-top: 1px solid #36434e;
       box-sizing: border-box;
   }

   .dh-footer-copy {
       font-size: 14px;
       line-height: 20px;
       color: #c3ccd2;
       text-align: center;
   }

   /* ====== 📱 MOBILE RESPONSIVE ====== */
   @media (max-width: 768px) {
       .dh-footer {
           padding: 40px 24px 40px;
           text-align: left;
           align-items: flex-start;
           gap: 24px;
       }

       .dh-footer-container {
           flex-direction: column;
           align-items: flex-start;
           justify-content: flex-start;
           width: 100%;
           gap: 24px;
       }

       .dh-col {
           width: 100%;
           align-items: flex-start;
           text-align: left;
       }

       .dh-logo-about {
           align-items: flex-start;
       }

       .dh-logo {
           width: 80px;
           margin-bottom: -5px;
       }

       .dh-socials {
           justify-content: flex-start;
       }

       .dh-title {
           font-size: 16px;
           font-weight: 600;
       }

       .dh-links {
           align-items: flex-start;
           text-align: left;
           gap: 8px;
       }

       .dh-contact {
           justify-content: flex-start;
           text-align: left;
       }

       .dh-footer-line {
           width: 100%;
           margin-top: 24px;
       }

       /* ✅ Center only the copyright text on mobile */
       .dh-footer-copy {
           font-size: 12px;
           margin-top: 16px;
           text-align: center;
           width: 100%;
           align-self: center;
       }
   }

/* ===============================
   FOOTER GRADIENT – DESKTOP + MOBILE
   =============================== */
.dh-footer {
  background: linear-gradient(180deg, #005204 0%, #002902 100%) !important;
}