:root {
   --card: #121215;
   --muted: #a9a9b3;
   --accent: #00e083;
   --accent-2: #00ac78ee;
   --ring: 0 0 0 2px rgba(100, 200, 255, .3);
   --shadow: 0 4px 10px rgba(0, 0, 0, .4);
   --radius: 18px;

 }


 body {
   height: 100%;
   overflow: hidden;
   overscroll-behavior: none;
 }

 * {
   box-sizing: border-box;
 }

 html,
 body {
   overscroll-behavior: contain;
   /* or 'none' to fully disable */
   overflow-x: hidden;
   /* prevents horizontal scroll jumps */
   height: auto;
   overflow-x: hidden;
   overflow-y: auto;
   touch-action: pan-y !important;
   overscroll-behavior: auto;


   overscroll-behavior: contain;
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 }

 /* Parallax hero */
 .hero {
   position: relative;
   height: 74vh;
   min-height: 520px;
   overflow: hidden;
   display: grid;
   place-items: center;
   text-align: center;
   --overlay: linear-gradient(180deg, rgba(11, 11, 12, .20), rgba(11, 11, 12, .85));
 }

 .hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center 25%;
   will-change: transform;
   transform: translateZ(0);
   filter: saturate(1.05) contrast(1.05) brightness(.9);
 }

 .hero-inner {
   position: relative;
   z-index: 1;
   padding: 2rem;
   max-width: 1100px;
 }

 h1 {
   font-size: clamp(2rem, 4vw + 1rem, 4rem);
   margin: 0 0 .5rem;
   letter-spacing: .5px;
 }

 .sub {
   font-size: clamp(1rem, .9vw + .9rem, 1.25rem);
   color: var(--muted);
 }

 .badge {
   display: inline-block;
   padding: .5rem .85rem;
   background: linear-gradient(90deg, var(--accent), var(--accent-2));
   color: #001217;
   border-radius: 999px;
   font-weight: 700;
   letter-spacing: .4px;
   margin-bottom: 1rem;
   box-shadow: var(--shadow);
 }

 .floating {
   animation: float 8s ease-in-out infinite;
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(-10px)
   }
 }

 /* Sections */
 section {
   padding: 56px 20px;
 }

 .container {
   max-width: 1180px;
   margin: 0 auto;
 }

 .grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
 }

 .card {
   background: linear-gradient(180deg, #121215, #0e0e11);
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: var(--radius);
   overflow: hidden;
 }

 .card h3 {
   margin: 0;
   padding: 16px 18px;
   font-weight: 500;
   font-size: 1.2rem;
   color: #ffffff;
   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
 }

 .card .body {
   padding: 14px;
 }

 .ratio {
   position: relative;
   width: 100%;
   aspect-ratio: 16/18;
   background: #0a0a0d;
   overflow: hidden;
   border-radius: 12px;
 }

 .ratio iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
 }

 .pill {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   padding: .4rem .7rem;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 999px;
   color: var(--muted);
   font-size: .9rem;
 }

 .stack {
   display: grid;
   gap: 16px;
 }

 /* Feature list */
 .features li {
   padding: 5px 14px;
   margin: 0 0 10px;
   border: 0px dashed rgba(255, 255, 255, .08);
   line-height: 1.45;
 }

 .specs {
   background: rgba(255, 255, 255, 0.08);
   /* semi-transparent background */
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   padding: 18px;
 }


 .specs dt {
   color: var(--muted);
   font-weight: 400;
 }

 .specs dd {
   margin: 0 0 14px;
   font-weight: 400;
 }

 /* Prominent section titles */
 .title {
   font-size: 1.6rem;
   margin: 0 0 14px;
   display: flex;
   align-items: center;
   gap: 10px;

 }

 .title .bar {
   display: inline-block;
   width: 8px;
   height: 22px;
   background: linear-gradient(180deg, var(--accent), var(--accent-2));
   border-radius: 2px;
 }

 /* Special iFrames */
 .wide-iframe-wrapper {
   max-width: 1680px;
   margin: 0 auto;
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .08);
   box-shadow: var(--shadow);
 }

 .wide-iframe-view {
   position: relative;
   height: 609px;
   overflow: hidden;
   background: #0a0a0d;
 }

 /* Peek more of the page bottom by lifting iframe up; adjust --lift if needed */
 .wide-iframe-view iframe {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
   height: 1200px;
   top: calc(-1 * var(--lift, px));
   border: 0;
 }

 /* Responsive iframe wrapper */
 .iframe-wrapper1 {
   position: relative;
   width: 100%;
   height: 500;
   padding-top: 56.25%;
   /* 16:9 ratio */
   overflow: hidden;
   border-radius: 12px;
   border: 1px solid rgba(255, 0, 0, 0.08);
   background: #0a0a0d;
 }

 .iframe-wrapper1 iframe {
   position: absolute;
   top: -60px;
   /* Shift content up so view starts 80px lower */
   left: 0;
   width: 102%;
   height: calc(100% + 80px);
   /* extend height to compensate */
   border: 0;
   /*transform: scale(0.99);*/
 }

 /* On small screens (mobile), iframe will be full width */
 @media (max-width: 768px) {
   .iframe-wrapper1 {
     padding-top: 75%;
     /* taller ratio for readability */
   }
 }

 /* Benzene video block */
 .benzene {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
 }

 .benzene .video {
   aspect-ratio: 16/9;
   background: #0a0a0d;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .08);
 }

 .muted {
   color: var(--muted);
 }

 /* Footer */
 footer {
   padding: 40px 20px 60px;
   color: var(--muted);
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, .08);
 }

 /* Responsive */
 @media (max-width: 1100px) {
   .grid-3 {
     grid-template-columns: 1fr;
   }

   .features {
     grid-template-columns: 1fr;
   }

   .benzene {
     grid-template-columns: 1fr;
   }

   .hero {
     height: 62vh;
   }
 }

 /* Banner */
 .banner {
   width: 100%;
   height: 500px;
   background: linear-gradient(0deg, #000000, #2e2e2e);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .banner-inner {
   max-width: 1140px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 30px;
   flex-wrap: wrap;
 }

 .banner-content {
   flex: 1 1 50%;
   min-width: 300px;
   animation: slideInLeft 1.2s ease-out;
 }

 .banner-content h2 {
   font-size: 16px;
   font-weight: 500;
   background: #00ac78ee;
   color: #ffffff;
   padding: 6px 12px;
   border-radius: 20px;
   display: inline-block;
   margin-bottom: 18px;
 }

 .banner-content h1 {
   font-size: 36px;
   font-weight: 500;
   margin: 0 0 15px;
   color: #00ac78ee;
 }

 .banner-content p {
   font-size: 16px;
   color: #ccc;
   margin: 0 0 20px;
   line-height: 1.6;
 }

 .banner-tags span {
   display: inline-block;
   margin: 6px 8px 0 0;
   padding: 6px 14px;
   border-radius: 20px;
   font-size: 13px;
   background: rgba(255, 255, 255, 0.8);
   border: 2px solid rgba(255, 255, 255, 0.15);
 }

 .cta-btn {
   display: inline-block;
   margin-top: 25px;
   background: #00ac78ee;
   color: #ffffff;
   font-size: 16px;
   font-weight: 500;
   padding: 12px 24px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   transition: 0.3s;
 }

 .cta-btn:hover {
   background: #00ac78ee;
   transform: scale(1.05);
 }

 .banner-image {
   flex: 1 1 40%;
   min-width: 280px;
   text-align: right;
   animation: slideInRight 1.2s ease-out;
 }

 .banner-image img {
   max-height: 400px;
   width: 100%;
   max-width: 420px;
 }

 /* Popup Form */
 .popup {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(4px);
   justify-content: center;
   align-items: center;
   z-index: 1000;
 }

 .popup-content {
   background: #1e1f29;
   padding: 25px;
   border-radius: 12px;
   width: 90%;
   max-width: 420px;
   animation: fadeIn 0.4s ease-in-out;
 }

 .popup-content h3 {
   margin-top: 0;
   margin-bottom: 15px;
   font-size: 22px;
   color: #00c4b4;
 }

 .popup-content input {
   width: 100%;
   padding: 10px;
   margin: 8px 0;
   border-radius: 6px;
   border: 1px solid #444;
   background: #2b2e3a;
   color: #fff;
 }

 .popup-content button {
   margin-top: 15px;
   padding: 12px;
   width: 100%;
   border: none;
   background: #00ac78ee;
   color: #000;
   font-weight: bold;
   border-radius: 8px;
   cursor: pointer;
 }

 .popup-content button:hover {
   background: #00c78bee;
 }

 .close-btn {
   float: right;
   font-size: 20px;
   cursor: pointer;
   color: #aaa;
 }

 .close-btn:hover {
   color: #fff;
 }

 /* Animations */
 @keyframes slideInLeft {
   from {
     transform: translateX(-60px);
     opacity: 0;
   }

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

 @keyframes slideInRight {
   from {
     transform: translateX(60px);
     opacity: 0;
   }

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

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: scale(0.95);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }


 @media (max-width: 768px) {
   .banner {
     height: auto;
     padding: 40px 0;
   }

   .banner-inner {
     flex-direction: column;
     text-align: center;
   }

   .banner-content {
     margin-bottom: 20px;
   }

   .banner-image {
     text-align: center;
   }

   .banner-image img {
     margin: auto;
     max-width: 80%;
   }

   .banner-content h1 {
     font-size: 28px;
   }
 }

 .responsive-iframe {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%;
   /* 16:9 aspect ratio (adjust as needed) */
   height: 0;
   overflow: hidden;
   max-width: 1200px;
   margin: auto;
   /* Center align on larger screens */
 }

 .responsive-iframe iframe {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
 }



 .iframe-perfect-box {
   position: relative;
   width: 100%;
   max-width: 1200px;
   /* << Your Box Size */
   /* Tweak this value for desktop size: 320-600px is typical */
   margin: 32px auto;
   /* Centers the box */
   aspect-ratio: 16 / 9;
   /* Keeps the box shaped for all screens */
   overflow: hidden;
   border-radius: 12px;
   border: 1px solid #ddd;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   background: #fff;
 }

 /* Shrink contents for best fit */
 .iframe-perfect-box iframe {
   width: 100%;
   height: 100%;
   border: none;
   display: block;
   transform: scale(0.95);
   /* Shrinks to 95%, tweak as needed */
   transform-origin: top left;
   background: transparent;
   pointer-events: auto;
 }

 /* Responsive container for 16:9 aspect ratio and max 1200px width */
 .iframe-responsive-box {
   position: relative;
   width: 100%;
   max-width: 1200px;
   margin: 32px auto;
   /* Centered on page */
   padding-top: 56.25%;
   /* 16:9 aspect ratio (9/16 = 0.5625) */
   border-radius: 12px;
   border: 1px solid #ddd;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   background: #fff;
   overflow: hidden;
 }

 /* Make the iframe fill the wrapper and scale with screen */
 .iframe-responsive-box iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
   background: transparent;
   display: block;

 }

 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .responsive-iframe-container {
     max-width: 98vw;
     /* Nearly full screen width */
     margin: 24px auto 40px;
     padding: 0 6px;
     border-radius: 8px;
   }
 }

 /* #MunsellCoordinate iframe {
   overflow: hidden !important;
   pointer-events: none;
 } */

 /* Responsive container keeps 16:9 ratio */
 .video-container {
   position: relative;
   width: 100%;
   max-width: 1200px;
   /* optional: keep video from getting too huge */
   margin: 0 auto;
   /* center on page */
   padding-bottom: 56.25%;
   /* 16:9 ratio → (9/16 = 0.5625) */
   height: 0;
   overflow: hidden;
   border-radius: 12px;
   /* rounded corners */
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   /* subtle shadow */
 }

 /* Make iframe fill container */
 .video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
 }

 .iframe-container1 {
   position: relative;
   width: 1370px;
   /* visible width */
   height: 540px;
   /* visible height */
   overflow: hidden;
   /* hide outside */
   margin: 0px auto;
   margin-top: 0;
 }

 .iframe-container1 iframe {
   width: 100%;
   height: 2000px;
   /* larger than needed */
   border: none;
   transform: translateY(-1383px);
   /* shift up 600px from bottom */
 }


 /* Special iFrames */
 .wide-iframe-wrapper {
   max-width: 1680px;
   margin: 0 auto;
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .08);
   box-shadow: var(--shadow);
 }

 .wide-iframe-view {
   position: relative;
   height: 609px;
   overflow: hidden;
   background: #0a0a0d;
 }

 /* Peek more of the page bottom by lifting iframe up; adjust --lift if needed */
 .wide-iframe-view iframe {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
   height: 1200px;
   top: calc(-1 * var(--lift, px));
   border: 0;
 }

 .iframe-wrapper5 {
   position: relative;
   width: 100%;
   height: 650px;
   padding-top: 56.25%;
   /* 16:9 ratio */
   overflow: hidden;
   border-radius: 12px;
   border: 1px solid rgba(255, 0, 0, 0.08);
   background: #0a0a0d;
 }

 .iframe-wrapper5 iframe {
   position: absolute;
   top: -60px;
   /* Shift the iframe up by a percentage to hide the bottom */

   /* Shift content up so view starts 80px lower */
   left: 0;
   width: 102%;
   height: calc(100% + 80px);
   /* extend height to compensate */

   border: 0;
 }

 /*---color grading hide form bottom part---*/
 .iframe-wrapper5 {
   position: relative;
   width: 100%;
   padding-top: 56.25%;
   overflow: hidden;
   border-radius: 12px;
   border: 1px solid rgba(255, 0, 0, 0.08);
   background: #0a0a0d;
 }

 .iframe-wrapper5 iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 120%;
   /* Shift the iframe up to hide the bottom part. Adjust this value. */
   transform: translateY(-7%);
   border: 0;
 }



 /* Special iFrames */
 .wide-iframe-wrapper {
   max-width: 1680px;
   margin: 0 auto;
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .08);
   box-shadow: var(--shadow);
 }

 .wide-iframe-view {
   position: relative;
   height: 609px;
   overflow: hidden;
   background: #0a0a0d;
 }

 /* Peek more of the page bottom by lifting iframe up; adjust --lift if needed */
 .wide-iframe-view iframe {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
   height: 1200px;
   top: calc(-1 * var(--lift, px));
   border: 0;
 }






 .iframe-wrapper2 {
   position: relative;
   width: 100%;
   height: 540px;
   padding-top: 56.25%;
   overflow: hidden;
   border-radius: 12px;
   border: 1px solid rgba(255, 0, 0, 0.08);
   background: #0a0a0d;
 }

 .iframe-wrapper2 iframe {
   position: absolute;
   top: -60px;
   /* Shift content up so view starts 80px lower */
   left: 0;
   width: 102%;
   height: calc(100% + 80px);
   /* extend height to compensate */
   border: 0;
 }


 @media (max-width: 768px) {
   .iframe-wrapper2 iframe {
     width: 200% !important;
     height: 200% !important;
     transform: scale(0.5) !important;
     transform-origin: top center !important;
     position: absolute !important;
     top: 0px !important;
     left: 50% !important;
     transform: scale(0.5) translateX(-100%) !important;
   }

 }


 @media (max-width: 768px) {
   .iframe-wrapper5 iframe {
     width: 200% !important;
     height: 200% !important;
     transform: scale(0.5) !important;
     transform-origin: top center !important;
     position: absolute !important;
     top: 0px !important;
     left: 50% !important;
     transform: scale(0.5) translateX(-100%) !important;
   }

 }



 .table-container {
   width: 100%;
   max-width: 800px;
   padding: 20px;
   box-sizing: border-box;
 }

 h2,
 h3 {
   font-weight: normal;
   color: #333;
   margin-bottom: 10px;
   font-size: 1.5em;
 }

 h3 {
   margin-top: 25px;
 }

 table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 20px;
 }

 td {
   padding: 10px 0;
   font-size: 0.9em;
   color: #555;
   border-bottom: 1px solid #ddd;
 }

 /* Styles for the table headers */
 thead td {
   font-weight: bold;
   color: #333;
   padding-bottom: 5px;
 }

 /* Align the "Price" heading to the right */
 thead td:last-child {
   text-align: right;
 }

 /* Align the last cell in each row (the prices) to the right */
 tr td:last-child {
   text-align: right;
 }

 sup {
   font-size: 0.6em;
   vertical-align: super;
 }

 .note-section {
   font-size: 0.8em;
   color: #777;
   line-height: 1.5;
   margin-top: 20px;
 }


 #page-name-sec {
   position: relative;
   width: 100%;
   overflow: hidden;
 }

 .parallax-style.page-name-sec {
   position: relative;
   z-index: 2;
 }


 /* Default: hidden for phones & tablets */
 .side-black {
   position: absolute;
   top: 0;
   width: 12vw;
   /* fixed width on desktops */
   height: 100%;
   background: #000;
   z-index: 3;
   display: block;
   display: none;
   pointer-events: none;
   /* click-through */
 }






 @media (min-width: 1921px) {
   .side-black {
     width: 7vw;
     height: 500px;
     background: linear-gradient(0deg, #000000, #0a0000);
     /* 🔹 THIS LINE */
     display: flex;
     align-items: center;

     overflow: hidden;
   }

   .side-black.left {
     left: 0;
   }

   .side-black.right {
     right: 0;
   }
 }

 @media (min-width: 1921px) {
   .side-black {
     background: linear-gradient(0deg, #000000, #0a0000);
     width: 28vw;
   }
 }




 .hover-effect {
   transition: transform 0.3s ease, border-color 0.3s ease;
   border: 3px solid transparent;
   cursor: pointer;
 }

 .hover-effect:hover {
   border-color: black;
   /* black border on hover */
   transform: scale(1.05);
   /* slight zoom */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   /* subtle shadow */
 }


 .container.stack .card .body a img {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   display: block;
   /* remove inline spacing */
   border-radius: 6px;
   /* optional rounded corners */
   cursor: pointer;
 }

 .container.stack .card .body a:hover img {
   transform: scale(1.04);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }

.card {
  position: relative; /* This is crucial for positioning the buttons */
  overflow: hidden; /* Hides images outside the view */
}

.body {
  display: flex;
  gap: 20px;
  transition: transform 0.8s ease-in-out;
  padding: 10px;
  box-sizing: border-box;
}

/* Optional styling for the navigation buttons */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.prev, .next {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}