:root {
    --slide-width: 600px;
    --preview-scale: 1;
}

h1 {
  font-family: proxima-nova, sans-serif;
  font-weight: 200;
  font-size: 4.5rem;
}

h2 {
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}

h3 {
  font-family: proxima-nova, sans-serif;
  font-weight: 200;
  text-transform: uppercase;
}

p {
  font-family: neue-haas-grotesk-display, sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* RESET & BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: proxima-nova, sans-serif;
  background-color: white;

}

/* PRELOADER */
#preloader {
  position: fixed;
  inset: 0;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 1s ease;
}


/* Preloader logo fade in/out */
#preloader-logo {
    opacity: 0;
    transition: opacity 1.5s ease;
    max-width: 300px;
    width: 100%;
    height: auto;
}
  
#preloader-logo.visible {
    opacity: 1;
}
  
#preloader-logo.hidden {
    opacity: 0;
}


  
#navbar .logo img {
    width: 120px;
    height: auto;
    display: block;
}

/* MAIN CONTENT */
#main-content {
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
    transition: opacity 0.5s ease, clip-path 0.8s ease;
    height: 100%;
    background-color: #111;
}
  
#main-content.reveal {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}



/* MENU OVERLAY */
#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 999;
}

#menu-overlay.show {
  transform: translateX(0%);
}

#menu-overlay .menu-main {
  list-style: none;
  text-align: center;
  position: relative;
}

#menu-overlay .menu-main > li {
  margin: 1.5rem 0;
  position: relative;
}

#menu-overlay .menu-main > li > a {
  text-decoration: none;
  font-size: 2rem;
  color: white;
  font-weight: 300;
  transition: opacity 0.3s ease;
}

#menu-overlay .menu-main > li > a:hover {
  opacity: 0.8;
}

/* Submenu styles */
.submenu {
  position: absolute;
  left: calc(100% + 2rem);
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  min-width: 200px;
  padding-left: 2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Add submenu divider animation */
.submenu::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: height 0.8s ease-in-out;
  transform-origin: top;
}

.has-submenu:hover .submenu::before,
.has-submenu:focus-within .submenu::before {
  height: 100%;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
}

/* Remove the static border since we're using the animated one */
.submenu {
  border-left: none;
}

.submenu li {
  margin: 1rem 0;
}

.submenu a {
  text-decoration: none;
  color: white;
  font-size: 1.25rem;
  font-weight: 300;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.submenu a:hover {
  opacity: 1;
}

/* Close button inside menu overlay */
#menu-overlay .close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #333; /* dark X on light backdrop */
    cursor: pointer;
    z-index: 1000;
}

#menu-overlay .close-btn:hover {
    color: #000;
}

#menu-overlay ul {
  list-style: none;
  text-align: center;
}

#menu-overlay ul li {
  margin: 1.5rem 0;
}

#menu-overlay ul li a {
  text-decoration: none;
  font-size: 1.5rem;
  color: white;
  font-weight: 300;
}

/* Toggle icon to black when .dark-icon is applied */
#menu-btn.dark-icon {
    color: black;
}

  


/* NAVBAR */
#navbar {
    position: absolute;
    top: 2rem;
    left: 2rem;
    right: 2rem;
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
  
#navbar .logo {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 1px;
}
  
.nav-buttons {
    display: flex;
    gap: 1rem;
  }  
  
.nav-buttons button {
    background: none;   /* replace default buttonface */
    border: none;       /* remove any border */
    padding: 0;         /* collapse intrinsic padding */
    color: white;       /* keep your icon/text white */
    font-size: 1.5rem;          /* increase icon size */
    padding: 0.25rem 0.5rem;    /* optional: makes the hit‑area a bit bigger */
    cursor: pointer;
    transition: none;   /* you can remove the hover transition too */
}

  
.nav-buttons button:hover {
    background: none;   /* ensure no hover fill */
}
  

/* NAV ZONES */
.nav-zone {
    position: absolute;
    top: 0;
    height: 100%;
    width: 15vw;
    pointer-events: none;
    z-index: 10;
}

.nav-zone .nav-hit {
    position: absolute;
    top: 0;
    height: 100%;
    width: 15vw;
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-zone .nav-hit::after {
    font-family: "bootstrap-icons";
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.left-zone .nav-hit::after {
    content: "\F284";  /* Bootstrap Icons chevron-left */
    transform: translateX(-20px);
}

.right-zone .nav-hit::after {
    content: "\F285";  /* Bootstrap Icons chevron-right */
    transform: translateX(20px);
}

.nav-zone .nav-hit:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.left-zone .nav-hit {
    left: 0;
}

.right-zone .nav-hit {
    right: 0;
}

.left-zone {
    left: 0;
}

.right-zone {
    right: 0;
}

/* Add gradient overlays for hover effects */
.nav-zone .nav-hit::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.left-zone .nav-hit::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
}

.right-zone .nav-hit::before {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
}

.nav-zone .nav-hit:hover::before {
    opacity: 1;
}

/* hide nav-zones when zoomed-out */
#carousel-view.zoomed-out .nav-zone {
    display: none;
}
  

/* New Carousel Layout */
#carousel-view {
    position: relative;
}

#carousel-view .carousel-track {
    transition: opacity 0.6s ease;
}

#carousel-view.fullscreen .carousel-track {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    opacity: 0;
}

#carousel-view.fullscreen.fade-in .carousel-track {
    opacity: 1;
}

#carousel-view.fade-out .carousel-track {
    opacity: 0;
}

.carousel-slide {
    flex: 0 0 100%;
    height: 100vh;
    position: relative;
    opacity: 1; /* Change this to 1 for initial slide */
    pointer-events: none;
    background-size: cover;
    background-position: center;
    transition: opacity 0.6s ease, transform 0.8s ease;
}

/* 2) Draw the dark overlay */
.carousel-slide::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);  /* adjust opacity as needed */
    pointer-events: none;
    z-index: 0;
}


  
.carousel-slide.active {
    opacity: 1;
    pointer-events: all;
}
  
.carousel-slide .slide-content {
    position: absolute;      /* back to absolute so bottom/left work */
    bottom: 10%;
    left: 10%;
    z-index: 20 !important;              /* on top of the overlay */
    /* keep your transitions */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    color: white;
}
  
.carousel-slide.active .slide-content {
    opacity: 1;
    transform: translateY(0);
}
  
/* Zoomed-out Preview Mode */
#carousel-view.zoomed-out .carousel-track {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 2rem;
    padding: 
      4rem 
      calc((100vw - var(--slide-width)) / 2)
      6rem 
      calc((100vw - var(--slide-width)) / 2);
    -ms-overflow-style: none;
    scrollbar-width: none;
    opacity: 0;
}

#carousel-view.zoomed-out.fade-in .carousel-track {
    opacity: 1;
}

#carousel-view.zoomed-out .carousel-slide {
    flex: 0 0 var(--slide-width);
    width: var(--slide-width);
    height: 300px;
    border-radius: 0;
    pointer-events: auto;
    scroll-snap-align: center;
    display: flex;
    align-items: center;        /* center content inside */
    justify-content: center;
    padding: 1rem;
    color: white;
    opacity: 1 !important;
    background-size: cover;
    background-position: center;
}
  
/* Scrollbar */
#carousel-scrollbar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255,255,255,0.1);
    z-index: 20;
    padding: 0 2rem;
}
  
#carousel-view.zoomed-out #carousel-scrollbar {
    position: absolute;
    bottom: 2rem;               /* lifts it off the bottom edge */
    left: 50%;
    transform: translateX(-50%);
    width: 60vw;
    max-width: 600px;
    display: flex;
    justify-content: flex-start;
    padding: 0;
}
  
#carousel-thumb {
    width: 25%;
    height: 100%;
    background: white;
    border-radius: 3px;
    transition: transform 0.3s ease;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

#carousel-thumb:active {
    cursor: grabbing;
}

#carousel-view.zoomed-out #carousel-thumb {
    width: calc(60vw / 5);
    margin: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#carousel-thumb:hover {
    background: rgba(255,255,255,0.9);
}

#carousel-view.zoomed-out .carousel-track::-webkit-scrollbar {
    width: 0;
    height: 0;
}
  
  
/* Base wrapper – always carries the transition */
.carousel-center-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;         /* vertical centering */
    justify-content: flex-start; /* slides laid out horizontally */
    transform-origin: center center;
    transition: transform 0.8s ease-in-out;
}
  
/* Fullscreen → no scale */
  #carousel-view.fullscreen .carousel-center-wrapper {
    transform: scale(1);
}
  

/* 3) Scale down to card width in preview mode */
#carousel-view.zoomed-out .carousel-center-wrapper {
    /* JS will set --preview-scale */
    transform: scale(var(--preview-scale));
}

/* 1) Hide the in‑card text once zoomed‑out */
#carousel-view.zoomed-out .slide-content {
    display: none;
}

#carousel-info {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 20;
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#carousel-view.zoomed-out #carousel-info {
    display: block;
}

#carousel-view.zoomed-out.fade-in #carousel-info {
    opacity: 1;
}

#info-title {
    font-size: 2rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: opacity;
    transform: translateZ(0);
}

#info-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    margin-top: 0.5rem;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: opacity;
    transform: translateZ(0);
}

#carousel-info.transitioning #info-title,
#carousel-info.transitioning #info-desc {
    opacity: 0;
    pointer-events: none;
}

.learn-more-btn {
  margin-top: 2rem;             /* space below the text */
  padding: 0.75rem 1.5rem;
  border: 1px solid white;      /* outlined square */
  background: transparent;
  color: white;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;             /* no rounding */
  transition: background 0.3s ease, color 0.3s ease;
}
  
.learn-more-btn:hover {
  background: white;
  color: #111;
}


/* PRODUCTS PAGE HERO */
.products-page {
  background: #000;           /* match your dark theme */
  color: white;
}

#hero-pages {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-wrapper {
  display: flex;
  align-items: center;
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
  gap: 4rem; /* Add consistent gap between all elements */
}

.hero-left,
.hero-right {
  flex: 1;
  padding: 0; /* Remove any existing padding */
}

.hero-logo {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hero-logo.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2rem;
  flex-shrink: 0;
}

.hero-right h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-right p {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 500px;
}

.hero-title,
.hero-description {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.hero-title.visible,
.hero-description.visible {
  opacity: 1;
  transform: translateY(0);
}


/* Read More button on hero */
.hero-read-more {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  opacity: 1;
  transition: opacity 0.3s ease;
  font-family: neue-haas-grotesk-display, sans-serif;
  z-index: 10;
}

.hero-read-more i {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.hero-read-more:hover i {
  transform: translateY(5px);
}

/* Cassiopeia Product Section */
#cassiopeia-section {
  background: white;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
}

.cassiopeia-wrapper {
  display: flex;
  align-items: center;
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

.cassiopeia-image,
.cassiopeia-content {
  flex: 1;
}

.cassiopeia-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.cassiopeia-content {
  padding-left: 2rem;
}

.cassiopeia-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cassiopeia-desc {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.cassiopeia-features {
  list-style-type: disc;
  padding-left: 1.5rem;
}

body.products-page {
  overflow-y: auto;  
}

html.products-page {
  overflow-y: auto;
}

#cassiopeia-section {
  position: relative;
}



/* CONTACT PAGE STYLES */
body.contact-page {
  background: white;
  color: #111;
  font-family: proxima-nova, sans-serif;
}

#hero-contact {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-wrapper {
  display: flex;
  align-items: center;
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-left,
.contact-right {
  flex: 1;
}

.contact-logo {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.contact-divider {
  width: 1px;
  height: 70vh;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 2rem;
}

.contact-right address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.contact-right h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  background: transparent;
  color: #111;
  outline: none;
}

.contact-form textarea {
  resize: vertical;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.submit-btn {
  background: white;
  border: 1px solid #111;
  color: #111;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  cursor: pointer;
  width: fit-content;
  transition: background 0.3s ease, color 0.3s ease;
}

.submit-btn:hover {
  background: #111;
  color: white;
}

/* SCROLL BEHAVIOR FOR PAGES */
#scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroll-section {
  height: 100vh;
  scroll-snap-align: start;
}

/*About page*/
#about-content {
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  height: 100vh;
}

.about-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  padding: 0 2rem;
}

.about-content-left {
  flex: 1;
  align-items: flex-start;
  text-align: left;
  padding-right: 2rem;
}

.about-content-right {
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-left: 2rem;
}

.about-content-left h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.about-content-left p {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 500px;
}

.about-content-image {
  width: 100%;
  max-width: 500px;
  height: 600px;
  object-fit: contain;
  display: block;
}

#core-values-section {
  background-image: url('/assets/images/Paneru-About2.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Creates a parallax effect */
  position: relative;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 2rem;
}

/* Add dark overlay */
#core-values-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75); /* Adjust opacity as needed */
  z-index: 1;
}

.core-values-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  gap: 4rem;
  position: relative;
  z-index: 2; /* Place content above the overlay */
}

.core-values-left,
.core-values-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.core-values-left {
  align-items: flex-end;
  text-align: right;
}

.core-values-left h2 {
  font-size: 3rem; /* or even bigger if you want */
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}

.core-values-divider {
  width: 1px;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
}

.core-values-divider.active {
  height: 70vh; /* grows to full height */
}

.core-values-right {
  align-items: flex-start;
}

.core-values-right h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}

.core-values-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.core-values-list li {
  font-size: 1.125rem;
  font-family: neue-haas-grotesk-display, sans-serif;
}

.divider-animate {
  width: 1px;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: height 2.5s ease-in-out;
  transform-origin: top;
}

.divider-animate.active {
  height: 70vh;
}

#call-to-products-section {
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 2rem;
}

.call-to-products-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  gap: 4rem;
}

.call-to-products-left,
.call-to-products-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.call-to-products-left {
  align-items: flex-start;
  text-align: left;
}

.call-to-products-left h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.call-to-products-left p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 500px;
}

.view-products-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid white;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-family: neue-haas-grotesk-display, sans-serif;
  transition: background 0.3s ease, color 0.3s ease;
}

.view-products-btn:hover {
  background: white;
  color: #111;
}

.call-to-products-right {
  align-items: center;
  justify-content: center;
}

.call-to-products-image {
  width: 100%;
  max-width: 700px; /* increased from 500px to 700px */
  height: auto;
  display: block;
  object-fit: contain;
}

/* Contact Info Section on About Page */
#contact-info-section {
  background-color: #111;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 2rem;
}

.contact-info-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  height: 70vh;
}

.contact-info-left {
  flex: 0 0 66.666%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 4rem;
}

.contact-info-left h2 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}

.contact-intro {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 3rem;
  max-width: 600px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.contact-icon {
  font-size: 1.5rem;
  color: white;
  opacity: 0.8;
}

.contact-text h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}

.contact-text p {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.contact-info-divider {
  width: 1px;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  align-self: stretch;
  margin: 0 4rem;
  transition: height 2.5s ease-in-out;
  transform-origin: top;
}

.contact-info-divider.active {
  height: 70vh;
}

/* Right side (form) styling */
.contact-info-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 4rem;
}

.contact-info-right h3 {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}

.contact-info-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.contact-info-form input,
.contact-info-form textarea {
  width: 100%;
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1rem;
  font-family: neue-haas-grotesk-display, sans-serif;
  transition: border-color 0.3s ease;
}

.contact-info-form input::placeholder,
.contact-info-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-family: neue-haas-grotesk-display, sans-serif;
}

.contact-info-form input:focus,
.contact-info-form textarea:focus {
  outline: none;
  border-bottom-color: white;
}

.contact-info-form textarea {
  resize: vertical;
  min-height: 100px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-info-form .submit-btn {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 1px solid white;
  color: white;
  font-size: 0.9rem;
  font-family: neue-haas-grotesk-display, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.contact-info-form .submit-btn:hover {
  background: white;
  color: #111;
}

/* Footer Styles */
.site-footer {
  background-color: black;
  color: white;
  position: relative;
  z-index: 10;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

.footer-content {
  max-width: 1200px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem; /* Increased spacing between sections */
}

.footer-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.footer-logo {
  width: 200px; /* Increased logo size */
  height: auto;
  opacity: 0.9;
}

.footer-nav {
  display: flex;
  gap: 4rem; /* Increased spacing between nav items */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 0;
  width: 100%;
  justify-content: center;
}

.footer-nav a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-family: neue-haas-grotesk-display, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: opacity 0.3s ease;
}

.footer-nav a:hover {
  opacity: 0.7;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.social-links {
  display: flex;
  gap: 3rem; /* Increased spacing between social icons */
}

.social-links a {
  color: white;
  font-size: 1.5rem; /* Slightly larger social icons */
  transition: opacity 0.3s ease;
}

.social-links a:hover {
  opacity: 0.7;
}

.footer-bottom {
  display: flex;
  gap: 4rem;
  margin-top: 2rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-size: 0.8rem;
  font-family: neue-haas-grotesk-display, sans-serif;
  transition: color 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-bottom a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Products Accordion Styles */
.products-accordion {
  margin-top: 2rem;
  width: 100%;
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.accordion-item.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.accordion-header {
  width: 100%;
  padding: 1.5rem 0;
  background: transparent;
  border: none;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.accordion-header span {
  font-size: 1.5rem;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
  text-align: left;
}

.accordion-header i {
  font-size: 1.5rem;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-header:hover {
  opacity: 0.8;
}

.accordion-item.active .accordion-header i {
  transform: rotate(45deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 3rem;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.accordion-item.active .accordion-content {
  max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 2rem;
}

.accordion-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  margin-bottom: 1.5rem;
}

.accordion-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: white;
  text-decoration: none;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-weight: 400;
}

.accordion-learn-more i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.accordion-learn-more:hover {
  opacity: 0.8;
}

.accordion-learn-more:hover i {
  transform: translateX(5px);
}

/* Accordion Navigation Button Styles */
.accordion-nav-btn {
    background-color: black;
    color: white;
    border: none;
    font-size: 0.9rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0;
    text-decoration: none;
}

.accordion-nav-btn:hover {
    color: white;
    transform: translateX(5px);
}

.accordion-nav-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.accordion-nav-btn:hover i {
    transform: translateX(3px);
}

/* Update hero title styles for products page */
.products-page .hero-title {
  margin-bottom: 1rem;
  font-size: 3rem;
    opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.products-page .hero-title.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Products Intro Section */
#products-intro {
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  height: 100vh;
}

#products-intro .about-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  gap: 4rem;
}

#products-intro .about-content-left {
  flex: 1;
  align-items: flex-start;
  text-align: left;
}

#products-intro .about-content-right {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

#products-intro h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
}

#products-intro p {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 500px;
  font-family: neue-haas-grotesk-display, sans-serif;
}

#products-intro .about-content-image {
  width: 100%;
  max-width: 500px;
  height: 600px;
  object-fit: contain;
  display: block;
}

#cassiopeia-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/cassiopeia/cassiopeia-Products1.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#cassiopeia-intro .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#cassiopeia-intro h2 {
    font-family: proxima-nova, sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#cassiopeia-intro h2.visible {
    opacity: 1;
    transform: translateY(0);
}

#cassiopeia-info {
    background-color: black;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
}

.product-info-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: center;
    justify-content: center;
}

.product-info-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 2rem;
}

.product-info-left h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
}

.product-description {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    font-family: neue-haas-grotesk-display, sans-serif;
}

.key-features h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
}

.key-features ul {
    list-style: none;
    padding: 0;
}

.key-features li {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.key-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #666;
}

/* Right side styles */
.product-info-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.room-image-container {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f5f5f5;
}

.room-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.texture-preview {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.texture-sample {
    width: calc(25% - 1.125rem); /* Adjusted for 4 items with 1.5rem gap */
    aspect-ratio: 1;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 4px; /* Optional: adds slight rounding to the corners */
}

.texture-sample img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-product-btn {
    display: inline-block;
    margin-top: 3rem;
    padding: 0.75rem 2rem;
    border: 1px solid black;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.view-product-btn:hover {
    background-color: black;
    color: white;
}

/* Andromeda Intro Section */
#andromeda-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/andromeda/andromeda-Products1.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#andromeda-intro .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#andromeda-intro h2 {
    font-family: proxima-nova, sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#andromeda-intro h2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Andromeda Info Section */
#andromeda-info {
    background-color: black;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
}

/* Section Scroll Button */
.section-scroll-btn {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    font-family: neue-haas-grotesk-display, sans-serif;
    z-index: 10;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.section-scroll-btn:hover {
    opacity: 0.8;
}

.section-scroll-btn i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.section-scroll-btn:hover i {
    transform: translateY(5px);
}

/* Dark theme support */
.dark-theme .section-scroll-btn {
    color: white;
}

/* Products page specific styles */
.products-page .section-scroll-btn {
    color: white;
}

/* Ensure the product info section has relative positioning for absolute button placement */
#product-info {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 2rem;
    background: var(--dark-bg);
    color: white;
    overflow: hidden;
}


/* Pegasus Intro Section */
#pegasus-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/Paneru-About1.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#pegasus-intro .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#pegasus-intro h2 {
    font-family: proxima-nova, sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#pegasus-intro h2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pegasus Info Section */
#pegasus-info {
    background-color: black;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    position: relative;
}

/* Ursa Intro Section */
#ursa-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/ursa/ursa-Products1.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#ursa-intro .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#ursa-intro h2 {
    font-family: proxima-nova, sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#ursa-intro h2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ursa Info Section */
#ursa-info {
    background-color: black;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    position: relative;
}

/* Ursa-specific image layout */
.ursa-layout {
    flex: 1;
}

.ursa-image-grid {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    height: 600px;
}

.ursa-main-image {
    flex: 0 0 60%;
    height: 100%;
    overflow: hidden;
}

.ursa-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ursa-side-images {
    flex: 0 0 calc(40% - 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ursa-side-image {
    flex: 1;
    overflow: hidden;
}

.ursa-side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Orion Intro Section */
#orion-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/orion/orion-Products1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#orion-intro .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#orion-intro h2 {
    font-family: proxima-nova, sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#orion-intro h2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Orion Info Section */
#orion-info {
    background-color: black;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    position: relative;
}

/* Auriga Intro Section */
#auriga-intro {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/auriga/auriga-Products1.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#auriga-intro .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#auriga-intro h2 {
    font-family: proxima-nova, sans-serif;
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#auriga-intro h2.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Auriga Info Section */
#auriga-info {
    background-color: black;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    position: relative;
}

/* Back to Top Button */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  pointer-events: all;
  transform: translateZ(0);
  mix-blend-mode: difference;
}

#back-to-top:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-3px) translateZ(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

#back-to-top i {
  color: #000;
  font-size: 1.2rem;
}

/* Contact Page Specific Styles */
.contact-page #scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  background-color: white;
}

.contact-page .scroll-section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.contact-page #hero-pages {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  position: relative;
}

.contact-page .hero-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  gap: 2rem;
}

.contact-page .hero-left {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-page .hero-logo {
  width: 300px;
  height: auto;
  opacity: 0;
  transform: translateX(-50px);
  animation: fadeInLeft 1s ease forwards;
}

.contact-page .hero-divider {
  width: 1px;
  height: 400px;
  background-color: black;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s ease;
}

.contact-page .hero-divider.divider-animate {
  transform: scaleY(1);
}

.contact-page .hero-right {
  flex: 1;
  text-align: left;
}

.contact-page .hero-title {
  font-size: 4rem;
  color: black;
  opacity: 0;
  transform: translateX(50px);
  animation: fadeInRight 1s ease forwards 0.5s;
}

@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.contact-page .hero-read-more {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: black;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease forwards 1s;
  z-index: 10;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.contact-page .hero-read-more i {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.contact-page .hero-read-more:hover i {
  transform: translateY(5px);
}

/* Dark Theme for Hero Section */
.dark-theme {
  background-color: black !important;
  color: white !important;
}

.dark-theme .hero-divider {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.dark-theme .hero-title {
  color: white !important;
}

.dark-theme .hero-read-more {
  color: white !important;
}

.dark-theme .hero-read-more:hover {
  opacity: 0.8;
}

/* Form Status Styles */
.form-status {
    margin: 10px 0;
    padding: 10px;
    border-radius: 4px;
    display: none;
}

.form-status.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-status.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Disable form during submission */
.contact-info-form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

.logo a {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.logo a:hover {
    opacity: 0.8;
}

.footer-left a {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-left a:hover {
    opacity: 0.8;
}

/* Metal Textures Section Styles */
#metal-textures {
    padding-top: 6rem;
}

.texture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    max-width: 400px;
}

.texture-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.texture-image-container {
    position: relative;
    width: 100%;
    max-width: 160px;
}

.texture-image-container img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.texture-item:hover .texture-image-container img {
    transform: scale(1.05);
}

.texture-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: black;
    color: white;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.texture-item:hover .texture-tag {
    background-color: rgba(35, 35, 35, 1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}


#metal-textures h2 {
    margin-bottom: 1.5rem;
}

#wood-textures {
    padding-top: 6rem;
}

#wood-textures .texture-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
    max-width: 600px;
}

#wood-textures .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 110px;
}

#wood-textures .product-info-wrapper {
    gap: 4rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}


#wood-textures h2 {
    margin-bottom: 1.5rem;
}

/* Textile Textures Section Styles */
#textile-textures {
    padding-top: 6rem;
}

#textile-textures .texture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    max-width: 400px;
}

#textile-textures .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 160px;
}

#textile-textures .product-info-wrapper {
    gap: 4rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}



#textile-textures h2 {
    margin-bottom: 1.5rem;
}

/* Leather Textures Section Styles */
#leather-textures {
    padding-top: 6rem;
}

#leather-textures .texture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    max-width: 400px;
}

#leather-textures .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 160px;
}

#leather-textures .product-info-wrapper {
    gap: 4rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}


#leather-textures h2 {
    margin-bottom: 1.5rem;
}

/* Textured Leather Section Styles */
#textured-leather {
    padding-top: 8rem; /* Increased from 6rem to move content down */
    padding-bottom: 4rem;
}

#textured-leather .texture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem; /* Reduced gap */
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 300px; /* Reduced from 400px */
}

#textured-leather .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 120px; /* Reduced from default size */
}

#textured-leather .texture-image-container img {
    width: 100%;
    height: 120px; /* Fixed height for consistency */
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}



#textured-leather h2 {
    margin-bottom: 1.5rem;
}

/* Lacquer Textures Section Styles */
#lacquer-textures {
    padding-top: 4rem; /* Reduced from 6rem to move content higher */
    padding-bottom: 0;
}

#lacquer-textures .texture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 400px;
}

#lacquer-textures .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 160px;
}

#lacquer-textures .product-info-wrapper {
    gap: 4rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}



#lacquer-textures h2 {
    margin-bottom: 1.5rem;
}

/* Satin Textures Section Styles */
#satin-textures {
    padding-top: 4rem; /* Reduced from 6rem to move content higher */
    padding-bottom: 0;
}

#satin-textures .texture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 500px;
}

#satin-textures .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 160px;
}

#satin-textures .product-info-wrapper {
    gap: 4rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}


#satin-textures h2 {
    margin-bottom: 1.5rem;
}

/* Panels Section Styles */
#panels {
    padding-top: 4rem; /* Reduced from 6rem to move content higher */
    padding-bottom: 0;
}

#panels .texture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 400px;
}

#panels .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 160px;
}

#panels .product-info-wrapper {
    gap: 4rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}

#panels h2 {
    margin-bottom: 1.5rem;
}

/* Wall Fabric Section Styles */
#wall-fabric {
    padding-top: 6rem;
    padding-bottom: 0;
}

#wall-fabric .texture-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 400px;
}

#wall-fabric .texture-image-container {
    position: relative;
    width: 100%;
    max-width: 160px;
}

#wall-fabric .product-info-wrapper {
    gap: 4rem;
    padding: 2rem;
    align-items: center;
    justify-content: center;
}

#wall-fabric h2 {
    margin-bottom: 1.5rem;
}

/* Stone Textures Section Styles */
#stone-textures {
    padding-top: 6rem;
}

#stone-textures .texture-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 800px;  /* Reduced to better align with text */
}

#stone-textures .texture-item {
    width: 100%;
    min-width: 120px;  /* Reduced minimum size */
}

#stone-textures .texture-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 4px;
}

#stone-textures .texture-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#stone-textures .texture-image-container:hover img {
    transform: scale(1.05);
}


#stone-textures .product-description {
    margin-bottom: 3rem;
    max-width: 800px;  /* Match with texture grid width */
}

#stone-textures h2 {
    margin-bottom: 1.5rem;
}

/* Pegasus-specific texture grid styles */
#pegasus-intro + #stone-textures .texture-grid {
    display: block;
    margin-top: 2rem;
}

#pegasus-intro + #stone-textures .texture-item {
    width: 200px;
    height: 200px;
}

#pegasus-intro + #stone-textures .texture-image-container {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
}

#pegasus-intro + #stone-textures .texture-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#pegasus-intro + #stone-textures .texture-image-container:hover img {
    transform: scale(1.05);
}

#pegasus-intro + #stone-textures .texture-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: black;
    color: white;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

#product-info {
    background-color: black;
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    position: relative; /* Add this to position the button */
}

#product-info .product-info-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: center;
    justify-content: center;
}


#product-info .single-texture {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

#product-info .single-texture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#product-info .single-texture:hover img {
    transform: scale(1.05);
}

#product-info .texture-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: black;
    color: white;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Remove the inverted colors style */
/* #product-info.scroll-section .texture-tag {
    background-color: white;
    color: black;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
} */

.product-info-left .texture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    margin-top: 2rem;
}

.product-info-left .texture-grid .texture-item {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    overflow: hidden;
}

.product-info-left .texture-grid .texture-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-info-left .texture-grid .texture-item:hover img {
    transform: scale(1.05);
}

.product-info-left .texture-grid .texture-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: black;
    color: white;
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    z-index: 2;
}

#auriga-intro + #product-info .texture-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.25rem;
    width: 100%;
    max-width: 800px;
    margin-top: 2rem;
}


#auriga-intro + #product-info .texture-item {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    overflow: hidden;
}

#auriga-intro + #product-info .texture-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#auriga-intro + #product-info .texture-item:hover img {
    transform: scale(1.05);
}

#auriga-intro + #product-info .texture-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: black;
    color: white;
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    z-index: 2;
}

/* Specifications Section Styles */
#specifications {
    min-height: 100vh;
    background-color: black;
    color: white;
    position: relative;
}

.specs-wrapper {
    display: flex;
    height: 100vh;
}

.specs-left {
    flex: 0 0 25%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

.specs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
}

.specs-left h2 {
    font-size: 3rem;
    font-weight: 300;
    position: relative;
    z-index: 3;
    margin-bottom: 2rem;
}

.specs-divider {
    width: 1px;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 3;
    transition: height 2.5s ease-in-out;
    transform-origin: top;
}

.specs-divider.active {
    height: 40vh;
}

.specs-right {
    flex: 0 0 75%;
    padding: 4rem;
    display: flex;
    align-items: center;
}

/* Update accordion styles for specifications section */
#specifications .products-accordion {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

#specifications .accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
    opacity: 1;
    transform: none;
}

#specifications .accordion-header {
    width: 100%;
    padding: 1.5rem 0;
    background: transparent;
    border: none;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}



#specifications .accordion-header i {
    font-size: 1.5rem;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    padding-right: 3rem;
    padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}


.accordion-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  margin-bottom: 1.5rem;
}

.accordion-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: white;
  text-decoration: none;
  font-family: neue-haas-grotesk-display, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-weight: 400;
}

.accordion-learn-more i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.accordion-learn-more:hover {
  opacity: 0.8;
}

.accordion-learn-more:hover i {
  transform: translateX(5px);
}

#specifications .accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#specifications .accordion-content ul li {
    opacity: 0;
    transform: translateY(10px);
    transition: 
        opacity 0.4s ease,
        transform 0.4s ease;
    transition-delay: calc(var(--item-index, 0) * 0.1s);
}

.scroll-section {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Section Navigation Button Styles */
.section-nav-btn {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    opacity: 1;
    transition: opacity 0.3s ease;
    font-family: neue-haas-grotesk-display, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.section-nav-btn:hover {
    opacity: 0.8;
}

.section-nav-btn i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.section-nav-btn:hover i {
    transform: translateX(5px);
}

/* Dark theme for scroll buttons */
.dark-theme .section-nav-btn {
    color: white;
}

/* Light theme for scroll buttons */
.products-page .section-nav-btn,
.about-page .section-nav-btn {
    color: white;
}

/* Hero read more button styles */
.hero-read-more {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
    color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease forwards 1s;
  z-index: 10;
}

.hero-read-more i {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.hero-read-more:hover i {
  transform: translateY(5px);
}

/* Mobile Contact Form */
#mobile-contact-form {
    display: flex;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: white;
}

.mobile-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.mobile-form-wrapper h3 {
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
}

/* Form Status Styles */
.form-status {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

.form-status.success {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid #28a745;
    color: #28a745;
}

.form-status.error {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    color: #dc3545;
}

.contact-info-form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

@media (max-width: 768px) {
  /* Hide desktop contact section on mobile */
  #contact-info-section {
      display: none;
  }
  
}

@media (min-width: 769px) {
  /* Show desktop contact section on desktop */
  #contact-info-section {
      display: flex;
  }
  
  /* Hide mobile contact section on desktop */
  #mobile-contact-form {
      display: none;
  }
}

/* Responsive Carousel/Slideshow */
@media (max-width: 768px) {

    /* Adjust slide content positioning and sizing */
    .carousel-slide .slide-content {
        bottom: 15%;
        left: 5%;
        right: 5%;
        text-align: center;
}

    .carousel-slide .slide-content h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
}

    .carousel-slide .slide-content h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
}

    .carousel-slide .slide-content p {
        font-size: 0.9rem;
        line-height: 1.4;
        margin-bottom: 1rem;
}

    .learn-more-btn {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
        display: block;
}

    /* Adjust info panel for mobile */
    #carousel-info {
        bottom: 10%;
        left: 5%;
        right: 5%;
        width: auto;
    }
    
    #info-title {
        font-size: 1.5rem;
    }
    
    #info-desc {
        font-size: 0.9rem;
    }
    
    /* Adjust navigation zones for mobile */
    .nav-zone {
        width: 15%;
}

    /* Make scrollbar more touch-friendly */
    #carousel-scrollbar {
        height: 8px;
        bottom: 1rem;
}

    #carousel-thumb {
        min-width: 60px;
    }
}

@media (max-width: 480px) {

  #preloader-logo {
    max-width: 150px;
}

    /* Further reduce text sizes for very small screens */
    .carousel-slide .slide-content h1 {
        font-size: 2rem;
}

    .carousel-slide .slide-content h3 {
        font-size: 0.9rem;
}

    .carousel-slide .slide-content p {
        font-size: 0.8rem;
    }
    
    .learn-more-btn {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
}

    #info-title {
        font-size: 1.2rem;
    }
    
    #info-desc {
        font-size: 0.8rem;
}

    /* Adjust slide content positioning for very small screens */
    .carousel-slide .slide-content {
        bottom: 20%;
        left: 3%;
        right: 3%;
}

    #carousel-info {
        bottom: 15%;
        left: 3%;
        right: 3%;
}

    /* Make navigation zones smaller but still accessible */
    .nav-zone {
        width: 20%;
}
}

/* Touch-friendly improvements for mobile */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .nav-zone .nav-hit {
        min-height: 60px;
        min-width: 60px;
}

    .learn-more-btn {
        min-height: 44px;
        min-width: 44px;
        display: flex;
    align-items: center;
    justify-content: center;
}

    /* Improve scrollbar touch interaction */
    #carousel-scrollbar {
        min-height: 12px;
}

    #carousel-thumb {
        min-width: 80px;
}
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 768px) and (orientation: landscape) {

    .carousel-slide .slide-content {
        bottom: 10%;
        left: 5%;
        right: 5%;
}

    .carousel-slide .slide-content h1 {
        font-size: 2rem;
    }
    
    .carousel-slide .slide-content h3 {
        font-size: 0.9rem;
}

    .carousel-slide .slide-content p {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }
    
    .learn-more-btn {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
        margin-top: 0.5rem;
}

    #carousel-info {
        bottom: 5%;
}

    #info-title {
        font-size: 1.3rem;
}

    #info-desc {
        font-size: 0.8rem;
    }
}

/* Mobile carousel info panel visibility */
@media (max-width: 768px) {


    #carousel-info {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none;
    }
    
    /* Ensure slides are properly positioned for mobile */
    .carousel-slide {
    position: relative;
    width: 100%;
        height: 100vh;
        flex: 0 0 100%;
        min-width: 100%;
    }
    
    /* Fix carousel track to prevent horizontal scroll */
    #carousel-view.fullscreen .carousel-track {
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
    display: flex;
        flex-wrap: nowrap;
    }
    
    /* Ensure carousel center wrapper doesn't overflow */
    .carousel-center-wrapper {
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
}

    /* Make sure slide content is visible on mobile */
    .carousel-slide.active .slide-content {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Hide non-active slides on mobile */
    .carousel-slide:not(.active) {
        display: none;
    }
    
    /* Prevent body overflow on mobile */
    body {
        overflow-x: hidden;
}

    /* Ensure main content doesn't overflow */
    #main-content {
        overflow-x: hidden;
}

    /* Mobile Zoomed Out Mode Styling */
    #carousel-view.zoomed-out {
        height: 100vh;
        overflow: hidden;
}

    #carousel-view.zoomed-out .carousel-track {
    display: flex;
    align-items: center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 2rem;
        padding: 2rem 1rem 4rem 1rem;
        width: 100vw;
        max-width: 100vw;
        -ms-overflow-style: none;
        scrollbar-width: none;
        opacity: 0;
}

    #carousel-view.zoomed-out.fade-in .carousel-track {
        opacity: 1;
}

    #carousel-view.zoomed-out .carousel-slide {
        flex: 0 0 85vw;
        width: 85vw;
        height: 40vh;
        border-radius: 0;
        pointer-events: auto;
        scroll-snap-align: center;
        display: flex;
    align-items: center;
    justify-content: center;
        padding: 1rem;
        color: white;
        opacity: 1 !important;
        background-size: cover;
        background-position: center;
        margin: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

    /* Mobile Zoomed Out Info Panel */
    #carousel-view.zoomed-out #carousel-info {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto;
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        text-align: center;
        z-index: 20;
}

    #carousel-view.zoomed-out.fade-in #carousel-info {
        opacity: 1 !important;
    }
    
    #carousel-view.zoomed-out #info-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
}

    #carousel-view.zoomed-out #info-desc {
        font-size: 0.9rem;
        margin-top: 0.25rem;
}

    /* Mobile Zoomed Out Scrollbar */
    #carousel-view.zoomed-out #carousel-scrollbar {
        position: absolute;
        bottom: 3rem;
        left: 50%;
        transform: translateX(-50%);
        width: 80vw;
        max-width: 300px;
        height: 6px;
    display: flex;
        justify-content: flex-start;
        padding: 0;
        background: rgba(255,255,255,0.2);
        border-radius: 3px;
        z-index: 25;
}

    #carousel-view.zoomed-out #carousel-thumb {
        width: calc(80vw / 8);
        max-width: calc(300px / 8);
    height: 100%;
        background: white;
        border-radius: 3px;
    transition: transform 0.3s ease;
        cursor: grab;
        user-select: none;
        touch-action: none;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    #carousel-view.zoomed-out #carousel-thumb:active {
        cursor: grabbing;
}

    /* Mobile Zoomed Out Navigation */
    #carousel-view.zoomed-out .nav-zone {
    display: block;
    position: absolute;
    top: 0;
        width: 15%;
    height: 100%;
        z-index: 10;
        cursor: pointer;
}

    #carousel-view.zoomed-out .left-zone {
        left: 0;
}

    #carousel-view.zoomed-out .right-zone {
        right: 0;
    }
    
    /* Mobile Zoomed Out Center Wrapper */
    #carousel-view.zoomed-out .carousel-center-wrapper {
        width: 100vw;
        height: 100vh;
    display: flex;
    align-items: center;
        justify-content: flex-start;
        transform: scale(1);
        overflow: hidden;
    }
    
    /* Hide slide content in zoomed out mode on mobile */
    #carousel-view.zoomed-out .slide-content {
        display: none;
    }
    
    /* Ensure no vertical scroll on mobile zoomed out */
    #carousel-view.zoomed-out {
        overflow-y: hidden;
}

    body.zoomed-out-mobile {
        overflow-y: hidden;
}
}

/* Mobile responsive styles for products page */
@media (max-width: 768px) {

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

  .texture-grid {
    display: none !important;
  }

  #preloader-logo {
        max-width: 200px;
  }

  /* Products page hero section mobile styles */
  .products-page #hero-pages {
    height: 100vh;
    padding: 2rem 1rem;
  }

  .products-page .hero-wrapper {
    flex-direction: column;
    gap: 4rem;
    width: 100%;
    max-width: none;
    padding: 0;
  }

    .products-page .hero-left {
        order: 1;
        flex: none;
    width: 100%;
        text-align: center;
}

    .products-page .hero-logo {
        max-width: 60%;
        height: auto;
    }
    
    .products-page .hero-divider {
        display: none; /* Hide divider on mobile */
    }
    
    .products-page .hero-right {
        order: 2;
        flex: none;
    width: 100%;
        text-align: center;
}

    .products-page .hero-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
}

    .products-page .products-accordion {
        margin-top: 1.5rem;
}

    .products-page .accordion-header {
        padding: 1rem 0;
}

    .products-page .accordion-header span {
        font-size: 1.25rem;
    }
    
    .products-page .accordion-header i {
        font-size: 1.25rem;
    }
    
    .products-page .accordion-content {
        padding-right: 1rem;
}

    .products-page .accordion-content p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
}

    .products-page .accordion-nav-btn {
        font-size: 0.85rem;
        padding: 0.5rem 0;
}

    /* Mobile accordion specific styles */
    .products-page .accordion-content ul {
        padding-left: 0.5rem;
    }
    
    .products-page .accordion-content ul li {
        font-size: 0.85rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        padding-left: 1rem;
    }

    /* Products intro section mobile styles */
    .products-page #products-intro {
      padding: 2rem 1rem;
      height: auto;
      min-height: 100vh;
    }
    
    .products-page #products-intro .about-content-wrapper {
      flex-direction: column;
        gap: 2rem;
        text-align: center;
}

    .products-page #products-intro .about-content-left {
        order: 2;
        padding: 0;
        text-align: center;
}

    .products-page #products-intro .about-content-right {
        order: 1;
        padding: 0;
}

    .products-page #products-intro h2 {
        font-size: 2rem;
    }
    
    .products-page #products-intro p {
        font-size: 1rem;
        max-width: none;
}

    .products-page #products-intro .about-content-image {
        max-width: 100%;
        height: 300px;
}

    /* Product info sections mobile styles */
    .products-page .product-info-wrapper {
        flex-direction: column;
        gap: 2rem !important;
        padding: 2rem;
}

    .products-page .product-info-left {
      padding: 0;
        order: 2;
    }
    
    .products-page .product-info-right {
      padding: 0;
        order: 1;
    }
    
    .products-page .product-info-left h2 {
        font-size: 2rem;
        text-align: center;
}

    .products-page .product-description {
        font-size: 1rem;
        text-align: center;
}

    /* Hide key features on mobile for cassiopeia-info section */
    .products-page .key-features {
        display: none;
    }

    .products-page .key-features h3 {
        font-size: 1.25rem;
        text-align: center;
}

    .products-page .key-features ul {
        padding-left: 1rem;
}

    .products-page .key-features li {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
}

    .products-page .room-image-container img {
        max-width: 100%;
        height: 250px;
    }
    

    .room-image-container {

      width: 250px;
      height: 200px;

        
    }
    
    /* Hide texture preview on mobile for cassiopeia-info section */
    .products-page .texture-preview {
        display: none;
    }
    
    .products-page .texture-preview {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
}

    .products-page .texture-sample img {
        height: 80px;
}

    .products-page .view-product-btn {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
        margin: 1rem auto;
        display: block;
        width: fit-content;
}

    /* Section scroll buttons mobile styles */
    .products-page .section-scroll-btn {
        font-size: 0.9rem;
        bottom: 1rem;
    }
    
    /* Intro sections mobile styles */
    .products-page #cassiopeia-intro h2,
    .products-page #andromeda-intro h2,
    .products-page #pegasus-intro h2,
    .products-page #ursa-intro h2,
    .products-page #orion-intro h2,
    .products-page #auriga-intro h2 {
        font-size: 2.5rem;
    }

    /* Make Ursa section images smaller on mobile */
    .products-page .ursa-image-grid {
        height: 250px;
        gap: 0.5rem;
    }
    
}

@media (max-width: 480px) {
    .products-page .hero-logo {
        max-width: 70%;
}

    .products-page .hero-title {
        font-size: 1.75rem;
    }
    
    .products-page .accordion-header span {
        font-size: 1.1rem;
    }
    
    .products-page .accordion-content p {
        font-size: 0.85rem;
}

    /* Even smaller accordion styles for very small screens */
    .products-page .accordion-header {
        padding: 0.75rem 0;
    }
    
    .products-page .accordion-header span {
        font-size: 1rem;
    }
    
    .products-page .accordion-header i {
        font-size: 1rem;
    }
    
    .products-page .accordion-content ul li {
        font-size: 0.8rem;
        line-height: 1.3;
        margin-bottom: 0.4rem;
        padding-left: 0.75rem;
    }

    .products-page #products-intro h2 {
        font-size: 1.75rem;
}

    .products-page .product-info-left h2 {
        font-size: 1.75rem;
    }
    
    .products-page .texture-preview {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .products-page .texture-sample img {
        height: 60px;
}

    .products-page .room-image-container img {
        height: 250px;
}

    .products-page #products-intro .about-content-image {
        height: 250px;
    }
}

@media (max-width: 768px) {


  .single-texture{
    display: none;
  }

  .product-info-left {
    align-items: center;
  }

  .site-footer {
    padding: 2rem 0.5rem;
  }
  .footer-logo {
    width: 90px;
  }
  .footer-nav {
    gap: 0.5rem;
  }
  .footer-nav a {
    font-size: 0.8rem;
    padding: 0 0.3rem;
    letter-spacing: 0.2px;
  }
  .footer-bottom a {
    font-size: 0.6rem;
  }
  .social-links a {
    font-size: 1rem;
  }
  
  /* Mobile menu adjustments */
  #menu-overlay .menu-main > li > a {
    font-size: 1.5rem;
  }
  
  #menu-overlay ul li a {
    font-size: 1.2rem;
  }
  
  .submenu {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: auto;
    padding-left: 0;
    border-left: none;
    margin-top: 1rem;
    text-align: center;
  }
  
  .submenu::before {
    display: none;
  }
  
  .submenu a {
    font-size: 1rem;
  }
  
  /* Hide specs-left div on mobile */
  .specs-left {
    display: none;
  }
  
  /* Make specs-right take full width on mobile */
  .specs-right {
    flex: 1;
    width: 100%;
  }
}