/*
 * Page Layout Utilities - Futuristic Clean White Edition
 */

 .page-template { overflow-x: hidden; background: var(--bg-white); }

 /* Minimalist Hero Page Custom */
  .page-hero {
      position: relative;
      padding: clamp(100px, 20vw, 180px) 0 clamp(80px, 15vw, 120px) 0;
      background-size: cover; background-position: center; background-repeat: no-repeat;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
  }
  
  .hero-overlay-dark {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
      z-index: 1;
  }

  .hero-glass-card {
      background: rgba(10, 15, 30, 0.55);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: clamp(30px, 5vw, 60px);
      border-radius: var(--radius);
      display: inline-block;
      max-width: 900px;
  }

  .page-hero-title {
      font-size: clamp(2.5rem, 6vw, 4.5rem); color: #ffffff !important;
      margin-bottom: 20px; letter-spacing: -0.02em; font-weight: 300;
      text-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .page-hero-title strong { 
      font-weight: 800; 
      color: var(--neon-blue); 
      text-shadow: var(--neon-glow);
  }

  .page-hero p {
      font-size: clamp(1.05rem, 1.8vw, 1.25rem); 
      color: #ffffff !important;
      max-width: 750px; 
      margin: 0 auto; 
      font-weight: 400;
      opacity: 0.9 !important;
      line-height: 1.8;
      text-shadow: 0 2px 10px rgba(0,0,0,0.4);
      letter-spacing: 0.5px;
  }
 
 .page-section { padding: clamp(60px, 8vw, 100px) 0; }
 
 /* Grid Engine for Futuristic Minimal Items */
 .layout-grid { display: grid; gap: clamp(20px, 4vw, 40px); }
 .grid-4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
 .grid-3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
 .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
 
 /* Flex & Positioning */
 .items-center { align-items: center; }
 .items-start { align-items: flex-start; }
 .relative { position: relative; }
 .flex { display: flex; }
 .justify-center { justify-content: center; }
 .flex-wrap { flex-wrap: wrap; }
 .gap-2 { gap: 0.5rem; }
 .gap-4 { gap: 1.25rem; }
 .gap-5 { gap: 2rem; }
 .gap-6 { gap: 2.5rem; }
 .justify-center { justify-content: center; }
 .flex-wrap { flex-wrap: wrap; }
 
 /* Sizing & Spacing */
 .w-full { width: 100%; }
 .h-full { height: 100%; }
 .p-5 { padding: 1.5rem; }
 .p-6 { padding: 2rem; }
 .p-8 { padding: max(2rem, 3vw); }
 .mb-2 { margin-bottom: 0.5rem; }
 .mx-auto { margin-left: auto; margin-right: auto; }
 .max-w-3xl { max-width: 48rem; }
 
 /* Typography overrides */
 .text-2xl { font-size: clamp(1.5rem, 2.5vw, 1.8rem); line-height: 1.3;}
 .text-xl { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 400; line-height: 1.4;}
 .text-sm { font-size: 0.9rem; line-height: 1.5;}
 .font-light { font-weight: 300; }
 .uppercase { text-transform: uppercase; letter-spacing: 2px; }
 
 /* Borders & Shadows */
 .rounded-lg { border-radius: var(--radius); }
 .border-light { border: 1px solid var(--border-light); }
 .shadow-scifi { box-shadow: var(--shadow-scifi); }
 
 /* Futuristic List 16 items */
 .service-card {
    background: #fff; border: 1px solid var(--border-light); padding: 25px; border-radius: var(--radius);
    transition: var(--transition); display: flex; flex-direction: column; align-items: flex-start;
    box-shadow: 0 2px 10px rgba(0,0,0,0.01); text-decoration: none !important; color: inherit;
 }
 .service-card:hover {
     transform: scale(1.02); box-shadow: var(--shadow-scifi-hover); border-color: var(--primary);
 }
 .s-icon { width: 45px; height: 45px; margin-bottom: 15px; color: var(--primary); display: flex; align-items: center; justify-content: center; background: var(--primary-light); border-radius: 6px; font-size: 1.4rem;}
 .s-title { font-weight: 500; font-size: 1.1rem; color: var(--secondary); margin-bottom: 8px;}
 
 /* Image specific service items */
 .service-card-img { padding: 8px; }
 .service-card-img img { border-radius: 4px; border: 1px solid var(--border-light); height: 180px; width: 100%; object-fit: cover; margin-bottom: 20px;}
 
 /* Badges */
 .glass-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px;}
 .badge { border: 1px solid var(--primary); color: var(--primary-dark); padding: 5px 15px; border-radius: 30px; font-size: 0.85rem; font-weight: 500;}
 
 /* Forms / Contact */
 .form-control {
     transition: all 0.3s ease; font-family: inherit; font-size: 0.95rem; color: var(--text-dark);
     border: 1px solid var(--border-light); border-radius: 4px; background: #fff;
 }
 .form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(99, 197, 214, 0.15); }
 .contact-icon { width: 50px; height: 50px; background: var(--bg-light); border: 1px solid var(--border-light); color: var(--primary); font-size: 1.3rem; border-radius: 8px;}
 
 /* Accordion Polish */
 .accordion-item { transition: var(--transition); cursor: default; border: 1px solid var(--border-light); margin-bottom: 15px; padding: 20px; border-radius: var(--radius); }
 .accordion-item:hover { background: var(--bg-light); border-color: var(--primary-light); }
 
 /* Check list logic */
 .check-list li { margin-bottom: 12px; font-weight: 400; font-size: 1rem; display: flex; align-items: flex-start; gap: 10px; color: var(--text-body);}
 .check-list i { color: var(--primary); font-size: 1.2rem; margin-top: 2px;}
 
 /* Mobile */
  @media (max-width: 768px) {
      .page-hero { text-align: center; }
      .service-card { padding: 20px; }
  }

  /* New Clean Product Grid */
  .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 60px;
  }
  .product-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
  }
  .product-card:hover { 
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
  .product-card img {
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
      display: block;
  }
  .product-title {
      background: #62c7d7;
      color: #fff;
      text-align: center;
      padding: 15px 10px;
      font-weight: 700;
      font-size: 0.95rem;
      min-height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: none;
      box-shadow: 0 -5px 15px rgba(98, 199, 215, 0.2);
  }

  @media (max-width: 991px) {
      .product-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  }
  @media (max-width: 576px) {
      .product-grid { grid-template-columns: 1fr; }
      .container-fluid { padding: 0 20px !important; }
  }

   /* Responsive Video Highlight */
   .video-featured-wrapper {
       max-width: 1000px;
       margin: 0 auto;
       width: 100%;
       padding: 0 20px;
   }
   .video-responsive-container {
       position: relative;
       width: 100%;
       aspect-ratio: 16 / 9;
       background: #000;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 20px 50px rgba(0,0,0,0.15);
       border: 1px solid rgba(255,255,255,0.1);
   }
   .video-responsive-container video,
   .video-responsive-container iframe {
       position: absolute;
       top: 0; left: 0;
       width: 100%; height: 100%;
       object-fit: cover;
       border: none;
   }
   
   @media (max-width: 768px) {
       .video-responsive-container { border-radius: 12px; }
       .video-featured-wrapper { padding: 0 15px; }
   }