/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Version: 4.12.3
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 9.6
Tested up to: 6.9
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true
<style>@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap");
/* GLOBAL STYLES */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scrollbar-gutter: stable;
}

body {
  background: #13120E;
  color: #fff;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

/* --- MOBILE MENU STYLING --- */
 /* HEADER */

      .mobile-header {
    background: black;
    display: flex;
    justify-content: space-between;
		  display: none;
		      position: fixed;
    width: 100%;
    top: 0px;
    z-index: 999999;
}

      
      .main-header-mob {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
      }

      .logo {
        font-size: 20px;
        font-weight: bold;
      }

      .icons i {
        margin-left: 12px;
        cursor: pointer;
        font-size: 18px;
        color: white;
		font-style: normal;
      }

      /* MOBILE MENU */

      .mobile-menu {
    position: fixed;
    top: 117px;
    left: 0;
    width: 100%;
/*     height: calc(100vh - 70px); */
    background: #0e0e0e;
    z-index: 999;
    overflow: auto;
    transform: translateX(100%);
    /* box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2); */
}

      /* MENU HEADER */

      .menu-header {
    display: flex;
    align-items: center;
    padding: 10px;
		  display: none;
    background: black;
    position: fixed;
    top: 58px;
    z-index: 99999;
    width: 100%;
}

      .menu-header input {
        flex: 1;
        padding: 8px;
        border-radius: 4px;
      }

      .close {
        margin-left: 10px;
        font-size: 20px;
        cursor: pointer;
      }

      /* MENU LIST */

      .menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }


      .menu-title {
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    background: #0e0e0e;
    color: white;
}

      .submenu{
display:none;
padding-left:15px;
background:#0e0e0e;
}

.submenu li {
    padding: 10px;
    /* border-bottom: 1px solid #eee; */
    color: white;
    list-style: none;
}

.submenu li a {
    color: white;
}

      .submenu .submenu {
        background: #f0f0f0;
      }




/* --- SHOW ON MOBILE ONLY --- */
@media (max-width: 768px) {
    .mobile-header { display: flex; }
    .main-header { display: none; } /* Hide desktop header */
	
	.nav-header {
    display: block;
}

.nav-body {
    display: block;
}
	
.search-container-mobile {
    margin-top: 30px;
    padding: 0px 15px;
	
}
	
	  .menu-header {
   
		  display: block;
    
}
}

/* --- SEARCH FIELD NOIR STYLING --- */

/* --- EXPANDABLE SIDE SEARCH --- */
.search-wrapper {
    display: flex;
    align-items: center;
    background: #000;
    padding: 15px 5px 0px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}

/* The Input Field */
.search-expandable {
    width: 0; /* Initially hidden */
    opacity: 0;
    border: none;
    background: #fff; /* White field from mockup */
    color: #000;
    font-size: 13px;
    height: 35px;
    padding: 0;
    outline: none;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 4px 0 0 4px;
}

/* The Trigger Icon */
.search-trigger {
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    z-index: 2;
}

/* ACTIVE STATE: When clicked */
.search-wrapper.is-active .search-expandable {
    width: 250px; /* Expands to side */
    opacity: 1;
    padding: 0 15px;
    margin-right: -5px; /* Pulls icon to attach seamlessly */
}

/* .search-wrapper.is-active {
    background: #222; /* Subtle highlight when open */
} */
.search-container-mobile {
    display: none;
}

.search-container-mobile {
    display: none;
	
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .search-container {
        display: none; /* Hide in main header on mobile to save space */
    }
    
    /* Optional: Show search inside your scrollable mobile menu instead */
    .menu-content .search-container {
        display: block;
        margin: 20px 0;
        flex: none;
    }
	
	.search-container-mobile {
		display: block;
	}
	
	.mobile-header {
		  display: block;
}
}
/* HEADER BASE */
.main-header {
    background: #000;
    color: #fff;
    padding: 10px 5%;
    border-bottom: 1px solid #FFFFFF40;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

.nav-container { display: flex; justify-content: space-between; align-items: center; }

/* MEGA MENU STYLING */
.mega-menu {
    position: fixed;
    top: 90px; /* Adjust based on header height */
    left: 0;
    width: 100%;
    background: #0e0e0e; /* Contrast white */
    color: #333;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    padding: 60px 5%;
}

.logo {
    font-size: 24px;
    font-weight: 900;
}

.logo a {
	color: white !important;
}

nav.main-nav ul {
    display: flex;
}

nav.main-nav ul li {
	padding: 20px 20px 0px;
	list-style: none; 

}
nav.main-nav ul li a {
		color: white;
}

/* Show Menu on Trigger */
.has-mega.is-active .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.menu-columns { display: flex; gap: 80px; flex: 2; }

.col { display: flex; flex-direction: column; gap: 15px; }

.col a {
    text-decoration: none;
    color: #555;
    font-size: 14px;
    transition: 0.3s;
}

.col a:before { content: "> "; font-size: 10px; color: #ccc; margin-right: 5px; }
.col a:hover { color: #c68663; padding-left: 5px; } /* Reetech Copper */

/* IMAGE AREA */
.menu-image { flex: 1; text-align: right; }
.menu-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.close-mega {
    position: absolute;
    top: 20px;
    right: 5%;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
 /* 2. HERO SECTION */

.hero {
  position: relative;
  width: 100%;
  height: 90vh;
  margin-top: 40px;
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
	top: 0;
    left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero-content h1 {
  font-size: 5vw;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 5px;
}

.btn {
  padding: 15px 40px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.4s;
}

.btn:hover {
  background: #fff;
  color: #000;
}



/* 3. CENTERED 5-PRODUCT CAROUSEL (Black Background) */

.carousel-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    background: #000;
    overflow: hidden;
    position: relative;
}

/* Track holds all product cards in a row */
.carousel-track {
    display: flex;
    align-items: center;
    padding-left: 5vw;
    will-change: transform;
}

/* Individual Product Card styling */
.product-card {
    flex: 0 0 85vw; /* Fixed width for GSAP logic */
    height: 80vh;
    margin-right: 5vw;
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 5%;
    color: #fff;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25vw;
  font-weight: 900;
  opacity: 0.15;
  letter-spacing: -1vw;
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}

.product-img {
  height: 360px;
  z-index: 3;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.3));
  transition: 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-info {
  flex: 1;
  padding-left: 5%;
  z-index: 4;
  text-align: left;
}

.product-info h2 {
  font-size: 4vw;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: white;
}

.product-info ul {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 20px;
  margin-top: 20px;
}

.product-info li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.card-revive {
  background-color: cadetblue;
}

.card-energy {
  background-color: #4a6741;
}

.card-pure {
  background-color: #3b5998;
}

.card-kitchen {
  background: darkgrey;
}

.card-urinal {
  background: lightslategray;
}

.grid-header h2 {
    color: white;
}

.feature-text h2, h3 {
    color: white;
}

/* 4. TEAL ASSURANCE BAR (Deepened) */

.assurance-bar {
    background: #0d2a33; /* Deepened Teal */
    color: #fff;
    padding: 40px 5%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}

.assurance-text h4 {
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: #fff;
}

.assurance-text p {
  font-size: 12px;
  opacity: 0.6;
}


/* 5. BENTO GRID (Noir Style) */

.grid-wrapper {
  padding: 100px 5%;
  background: #000;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
  gap: 20px;
}

.grid-item {
  position: relative;
  background: #111;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #222;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.8s;
  opacity: 0.7;
}

.grid-item:hover img {
  opacity: 1;
  transform: scale(1.05);
}

.item-lg {
  grid-column: span 2;
  grid-row: span 2;
}

.item-md {
  grid-column: span 2;
}

.label {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: #fff;
  z-index: 2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}



/* 6. BLACK FEATURE SECTION (Full Noir) */

.black-feature {
  background: #000;
  color: #fff;
  padding: 120px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #222;
}

.black-feature img.feature-img {
  filter: grayscale(1);
  transition: all linear .3s;
}


.black-feature img.feature-img {
  width: 65%;
}


.black-feature img.feature-img:hover {
  filter: grayscale(0);
  transition: all linear .3s;
}


.feature-text h2 {
  font-size: 4vw;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 5px;
}

.watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  z-index: 1;
}



/* 7. INTERACTIVE HOTSPOTS */

/* HOTSPOT CONTAINER */

.discovery-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  /* Adjust based on your layout */
  margin: 50px auto;
  overflow: hidden;
  background: #000;
}

/* THE BACKGROUND IMAGE */

.discovery-bg {
  width: 100%;
  display: block;
  filter: brightness(0.8);
  /* Matches the dark noir aesthetic */

}



/* INDIVIDUAL ANCHOR POINTS */

.hotspot-anchor {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  /* Removes underline from anchor */
  transition: transform 0.3s ease;
}



.hotspot-anchor::after {
  content: "";
  color: #1a4a5a;
  /* Teal accent from assurance bar */
  font-weight: bold;
  font-size: 18px;
}



/* PULSE ANIMATION */

.pulse-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: hotspot-pulse 2s infinite;
}



@keyframes hotspot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}


/* TOOLTIP ON HOVER */

.hotspot-label {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  display: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}



.hotspot-anchor:hover {
  transform: scale(1.2);
}

.hotspot-anchor:hover .hotspot-label {
  display: block;
}

/* 8. FOOTER */

footer {
        background-color: #000;
        color: #fff;
        padding: 80px 5%;
        border-top: 1px solid #222;
        /* Use Flexbox to divide content into columns */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; /* Allows stacking on mobile devices */
    }

    /* INDIVIDUAL COLUMN STYLING */
    .footer-column {
        flex: 1;
        min-width: 200px; /* Ensures columns don't get too thin */
        margin-bottom: 40px;
    }

    .footer-column h4 {
        font-size: 14px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 25px;
        color: #fff;
    }

    .footer-column p a {
        font-size: 13px;
        color: #666 ;;
        margin-bottom: 12px;
        cursor: pointer;
        transition: 0.3s;
    }

    .footer-column p a:hover {
        color: #fff;
    }

/* Tablet & Smaller Desktop (1024px and below) */
@media (max-width: 1024px) {
  .product-card {
    flex: 0 0 90vw;
    /* Make cards wider on tablets */
    margin-right: 5vw;
  }

  .product-img {
    height: 280px;
    /* Scale down images */
  }

  .product-info h2 {
    font-size: 6vw;
  }

  .assurance-bar {
    grid-template-columns: repeat(2, 1fr);
    /* 2x2 grid for tablets */
    gap: 30px;
  }
}

/* Mobile Devices (768px and below) */
@media (max-width: 768px) {
  header { height: 65px; }
  .logo { font-size: 18px; }
  .product-card { flex: 0 0 100vw; flex-direction: column; text-align: center; }
  .product-img { height: 250px; }
  .menu-overlay { flex-direction: column; }
  .menu-sidebar, .menu-content { width: 100%; }
  .menu-content { grid-template-columns: 1fr; }
   
  .logo {
    font-size: 18px;
    letter-spacing: 2px;
  }
	
	.hero {
  margin-top: 40px;
  margin-bottom: 10px;
    height: 50vh;
}
.hero-video {
	object-fit: cover; 
/* 	padding: 0px 10px; */
}


  /* Carousel Mobile Fix */
  .carousel-wrapper {
    -webkit-mask-image: none;
    /* Remove mask on mobile for better visibility */
    mask-image: none;
  }

  .product-card {
    flex: 0 0 100vw;
    /* Full width cards */
    height: 70vh;
    flex-direction: column;
    /* Stack image and text */
    justify-content: center;
    padding: 10% 5%;
  }

  .product-img {
    height: 220px;
    margin-bottom: 20px;
  }

  .product-info {
    padding-left: 0;
    text-align: center;
  }

  .product-info h2 {
    font-size: 32px;
  }

  .bg-text {
    font-size: 40vw;
    /* Larger background text for impact */
    top: 30%;
  }

  /* Bento Grid Mobile Fix */
  .bento-grid {
    grid-template-columns: 1fr;
    /* Stack categories vertically */
    grid-auto-rows: 250px;
  }

  .item-lg,
  .item-md {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Assurance Bar Mobile Fix */
  .assurance-bar {
    grid-template-columns: 1fr;
    /* Single column */
    text-align: center;
    padding: 40px 10%;
  }
	
	.assurance-bar {
        display: flex; /* Switch grid to flex for horizontal scrolling */
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* Native slider feel */
        gap: 0;
        padding: 40px 0;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
    }

    .assurance-bar::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome/Safari */
    }

    .assurance-item {
        flex: 0 0 100%; /* Each item takes full width of the screen */
        scroll-snap-align: center;
        padding: 0 10%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .assurance-text h4 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .assurance-text p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.8;
    }

  /* Black Feature Section Mobile Fix */
  .black-feature {
    flex-direction: column-reverse;
    /* Text below image */
    padding: 60px 5%;
    text-align: center;
  }

  .black-feature img.feature-img {
    width: 90%;
    margin-bottom: 30px;
  }

  .feature-text h2 {
    font-size: 36px;
  }

  /* Hotspots Mobile Fix */
  .discovery-section {
    height: 30vh !important;
  }
	

  .hotspot-label {
    display: block !important;
    /* Always show labels on mobile since there is no 'hover' */
    font-size: 10px;
    padding: 5px 10px;
  }

  /* Footer Mobile Fix */
  footer {
    grid-template-columns: 1fr;
    /* Stack footer columns */
    text-align: center;
/*     gap: 30px; */
	  padding: 50px 1% !important;
  }
	
   .footer-column {
	   min-width: 150px;
/*       flex: 0 0 50%; /* Shows two columns side-by-side on tablets */ */
   }
	
	.carousel-wrapper {
        overflow-x: auto; /* Enable native horizontal scroll */
        scroll-snap-type: x mandatory; /* Native touch slider feel */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        height: auto; /* Allow content to dictate height on mobile */
        padding: 0px 0 40px; /* Space for fixed header */
    }

    .carousel-wrapper::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome/Safari */
    }

    .carousel-track {
        padding-left: 0; /* Remove desktop offset */
        transform: none !important; /* Disable GSAP transform on mobile */
    }

    .product-card {
        flex: 0 0 100vw; /* Card takes full screen width like Assurance Bar */
        height: 70vh;
        margin-right: 20px;
        scroll-snap-align: center; /* Snaps card to center of phone */
        flex-direction: column; /* Stack image and text vertically */
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
    }

    .product-img {
        height: 250px !important; /* Scale image for mobile screens */
        width: auto;
        margin-bottom: 30px;
    }

    .product-info {
        padding-left: 0; /* Center text on mobile */
    }

    .product-info h2 {
        font-size: 32px; /* Large readable title */
        margin-bottom: 15px;
    }

    /* Massive background text adjustment for mobile */
    .bg-text {
        font-size: 40vw;
        top: 20%;
        opacity: 0.1;
    }
	
	.mega-overlay {
        flex-direction: column; /* Stack sidebar and content */
    }

    .menu-sidebar {
        width: 100%;
        height: auto; /* Allow sidebar to fit content */
        border-right: none;
        border-bottom: 1px solid #222;
        padding: 20px 0;
    }

    .menu-content {
        width: 100%;
        grid-template-columns: 1fr; /* Single column for mobile */
        padding: 30px 20px;
        /* Ensure the content area takes up the remaining screen space */
        flex-grow: 1; 
        overflow-y: scroll; 
        -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling for iOS */
    }
	
	/* Update your WhatsApp CSS */
	.whatsapp-fixed, .whatsapp-float, .joinchat {
    	z-index: 1500 !important; /* Lower than the menu's 9999 */
	}

/* Ensure the Menu is definitely on top */
	.menu-overlay, .mega-menu {
    	z-index: 9999 !important; /* */
	}
}

    @media (max-width: 480px) {
        .footer-column {
			min-width: 150px;
/*             flex: 0 0 100%; /* Stacks into one column on very small phones */ */
        }
    }


      .discover-more-btn {
    background: transparent;
    border: 1px solid white;
    border-radius: 80px;
    padding: 13px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 5px;
    color: white;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: all 0.5s;
}

.discover-more-btn:hover {
   
    background: #13120E;
    color: #fff;
    border: 1px solid #ffffff6a;
}

      .collection-section {
        width: 100%;
        position: relative;
      }

      .collection-section .container {
        overflow-x: visible;
        position: relative;
        z-index: 2;
      }

      .collection-section-wrapper {
        width: 100%;
      }

      .parallex-collection-box {
        position: sticky;
        width: 100%;
        top: 0;
        height: 100vh;
        z-index: 1;
        overflow: hidden;
      }

      .parallax-bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: -1;
      }

      .collection-parallex-content {
        width: 100%;
        height: 100%;
        position: relative;
        padding-bottom: 100px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
        gap: 25px;
      }

      .parallex-tab-box {
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 25px;
      }

      .parallex-tab {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: white;
        cursor: pointer;
      }

      .parallex-tab.active {
        outline: 1px solid white;
        outline-offset: 6px;
      }

      .parallex-para {
        color: white;
        font-weight: 400;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 5px;
        margin-bottom: 0px;
      }

      .parallex-heading {
        font-weight: 400;
        color: white;
        font-size: 55px;
        text-transform: uppercase;
        letter-spacing: 10px;
        margin-bottom: 0px;
		padding-top: 25%;
      }

      .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

 @media (max-width: 749px) {
   .parallex-heading {
    font-size: 20px;
	}   
	 
	 .parallex-heading {
    padding-top: 100%;
	}
	.about-content-box {
     width: 100% !important; 
	}
	.common-heading-h2 {
    font-size: 18px !important;
}
}

/* section commond heading  */
.section-common-heading {
    width: 100%;
}

.section-common-heading .container {
    border-color: #D6A461;
}

.section-common-heading .common-heading-h2{
    
}

.common-heading-wrapper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.line-heading-wrapper {
    width: 100%;
    display: flex;
    flex: row;
    align-items: center;
    justify-content: center;
    position: relative;
}

.heading-line {
    width: 100%;
    height: 1px;
/*     background-color: #D6A461; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.common-heading-h2 {
    padding: 0 50px;
    display: inline-block;
    color: white;
    font-weight: 300;
    letter-spacing: 5px;
    font-size: 30px;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
}

.common-heading-h2::before,
.common-heading-h2::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #D6A461;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none !important;
}

.common-heading-h2::before {
    left: 0;
}

.common-heading-h2::after {
    right: 0;
}


/* about us */


.about-us-section {
       width: 100%;
    position: relative !important;
    background-color: var(--artize-beige-bg);
    z-index: 1;
}
.about-us-section .container{position: static !important;}
.about_btn_div{padding-left: 18%;}

.about-us-section .container {
    border-color: #D6A461;
}

.about-us-section .common-heading-h2{
    background-color: var(--artize-beige-bg);
}

.about-box-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    background: url(../../../../../image/2025/about/about-us.jpg);
    background-size: cover;
    background-position: center center;
    padding: 120px 40px;
}

.about-box-wrapper::after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: black;
    z-index: 1;
}



.about-content-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    width: 65%;
    margin: 0 auto;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.about-content-box .about_btn_div{
    padding-left: 0;
    margin-top: 15px;
}

.about-content-box .discover-more-btn{
    padding: 10px 30px;
} 

.about-content-box .para{
    text-align: center;
}


.about-us-section.theme-change{
/*     padding-top: 70px; */
}

.about-us-section.about_page{
    padding-top: 0;
    margin-bottom: 70px;
}

.about-content-box h3{
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.about-content-box p{
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    text-transform: capitalize;
}


.about-wrapper {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 50px;
    flex: 1;
    height: 100%;
    width: 100%;
    position: relative;
}

.about-over-mask{
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.about-over-mask img{
    width: 280px;
}

.about-us-section .about-wrapper{
    justify-content: space-between;
    gap: 60px;
}

.about-wrapper.home{
    padding-top: 70px;
    padding-bottom: 0px;
    align-items: center;
}

.about-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    width: 60%;
}

.about-content-wrap.extend-width {
    width: 40%;
}


.content-image-box img {
  width: 480px;
}

.about-info-bx{
    border: 1px solid #D6A461;
    padding: 50px 120px;
}

.about-info-bx h3{
    color: #ffff;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: 6px;
    margin-bottom: 20px;
}

.about-info-bx p{
    color: #D6D6D6;
    font-weight: 400;
    font-size: 18px;
    text-transform: capitalize;
    line-height: 1.5;
}

.about-content-wrap .about-text {
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: capitalize;
    color: #747474;
    margin-bottom: 0 !important;
}

.about-content-wrap .discover-more-btn {
    margin: 0 auto;
}

.about-know-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.about-know-line {
    width: 10%;
    height: 1.5px;
    background-color: #ffffff;
    margin-top: 10px;
}

.about-know-info p {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.7;
    width: 87%;
    text-transform: capitalize;
    color: #D6D6D6;
}

.theme-change .secondary-btn{
    border-color: #ffffff;
    color: #ffffff;
	border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

/* top section css  */

.artize-top-section {
    position: relative;
    width: 100%;
}

.top-explore-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.explore-slides {
    width: 100%;
    height: 100%;
    position: relative;
}

.explore-layer-box {
    width: 100%;
    height: 620px;
    position: relative;
    z-index: 2;
    display: block;
}

.explore-layer-box.active {
    display: block;
}

.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: fill;
    z-index: -1;
}

.bg-opacity-layer {
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    position: relative;
}

.top-explore-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.explore-info-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.explore-info-paragraph {
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: 16px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.explore-info-heading {
    font-weight: 400;
    font-style: normal;
    font-size: 40px;
    color: white;
    text-transform: capitalize;
    margin-bottom: 10px;
}


.explore-tab-btn-box {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    z-index: 20;
}

.explore-tab-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
}

.explore-tab-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background:  #fff;
    transform: translateY(-50%);
    z-index: 1;
}

.explore-tab {
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    padding-bottom: 50px;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 5px;
    z-index: 2;
    background-color: transparent;
}

.explore-tab a{
    color:  #fff;
}

.explore-tab a::after {
    content: "";
    width: 9px;
    height: 9px;
    background: white;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.explore-tab a:hover::after {
    outline: 1px solid white;
    outline-offset: 4px;
}

.explore-tab a:active:after {
    outline-offset: 6px;
}

.artboard-season-tab-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: white;
    transform: translateY(-50%);
    z-index: 1;
}

.season-tab {
    position: relative;
    text-align: center;
    color: white;
    font-size: 12px;
    cursor: pointer;
    padding-bottom: 50px;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 5px;
}

.season-tab::after {
    content: "";
    width: 9px;
    height: 9px;
    background: white;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.season-tab.active::after {
    outline: 1px solid white;
    outline-offset: 4px;
}

.discover-more-btn:hover {
    background: #13120E;
    color: #fff;
    border: 1px solid #ffffff6a;
}

      /* SECTION */
      .slider-section {
        display: flex;
        align-items: center;
        gap: 80px;
        max-width: 1400px;
        margin: auto;
		padding: 80px;
      }

      /* LEFT */
      .slider-left {
        width: 300px;
      }

      .slider-left h2 {
        font-size: 32px;
        margin-bottom: 10px;
		color: white;
      }

      .slider-left p {
        color: #777;
        font-size: 14px;
      }

      /* DOTS */
      .slider-dots {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 20px;
      } /* NORMAL DOT */
      .dot {
        width: 6px;
        height: 6px;
        background: white;
        border-radius: 50%;
        transition: 0.3s ease;
        transform: scale(1);
      } /* ACTIVE DOT (BIG RING STYLE) */
      .dot.active {
        width: 18px;
        height: 18px;
        background: transparent;
        border: 2px solid white;
        border-radius: 50%;
        position: relative;
        animation: pop 0.3s ease;
      } /* INNER SMALL DOT */
      .dot.active::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        background: white;
        border-radius: 50%;
      }
      @keyframes pop {
        0% {
          transform: scale(0.7);
        }
        100% {
          transform: scale(1);
        }
      }

      /* SLIDER */
      .slider-wrapper {
        flex: 1;
        overflow: hidden;
      }

      .slider-track {
        display: flex;
        gap: 60px;
        padding-left: 60px;
      }

      /* CARD */
      .card {
        min-width: 290px;
        min-height: 400px;
        background: linear-gradient(135deg, #000000, #2e2e2e);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        transform: scale(0.9);
        opacity: 0.6;
      }

      /* ACTIVE */
      .card.active {
		min-height: 400px;
        transform: scale(1);
        opacity: 1;
      }

      /* IMAGE */
      .card img {
        width: 160px;
        margin-bottom: 20px;
        transition: 0.5s;
      }

     .card.active img{
       width:210px;
      }

      /* ========================= */
      /* TABLET */
      /* ========================= */
      @media (max-width: 1024px) {
      

        .slider-section {
          flex-direction: column;
          align-items: flex-start;
          gap: 40px;
			
        }

        .slider-left {
          width: 100%;
        }

        .slider-track {
          gap: 40px;
          padding-left: 20px;
        }

        .card {
          min-width: 240px;
          min-height: 360px;
        }

        .card img {
          width: 130px;
        }
      }

      /* ========================= */
      /* MOBILE (FIXED PROPERLY) */
      /* ========================= */
      @media (max-width: 600px) {
		  
		  
        /* STACK */
        .slider-section {
          flex-direction: column;
          align-items: center;
          gap: 20px;
          text-align: center;
			padding: 60px 30px;
        }

        /* TEXT CENTER */
        .slider-left {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        /* TEXT SIZE */
        .slider-left h2 {
          font-size: 18px;
        }

        .slider-left p {
          font-size: 13px;
          max-width: 300px;
        }

        /* DOTS CENTER */
        .slider-dots {
          justify-content: center;
          margin-top: 15px;
        }

        /* SLIDER FULL */
        .slider-wrapper {
          width: 100%;
        }

        /* TRACK FIX */
        .slider-track {
          gap: 16px;
          padding-left: 0;
        }

        /* CARDS */
        .card {
          min-width: 200px;
          min-height: 280px;
        }

        .card img {
          width: 100px;
        }

        /* ACTIVE SMALL SCALE */
        .card.active {
          transform: scale(0.95);
        }
      }

.footer-column a.menu-anchor {
    color: #666;
}
.footer-column a.menu-anchor:hover {
    color: white;
}