/* ============================= */
/* PRODUCT HERO */
/* ============================= */

.product-hero{
  position:relative;

  padding:180px 0 110px;

  background:
  url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1600&auto=format&fit=crop')
  center/cover no-repeat;
}

.product-overlay{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,0.72);
}

.product-hero-content{
  position:relative;
  z-index:2;

  max-width:850px;
}

.product-hero-content h1{
  font-size:72px;
  line-height:1.05;

  margin:25px 0;
}

.product-hero-content p{
  color:#cccccc;

  line-height:1.8;

  font-size:18px;

  max-width:700px;
}

/* ============================= */
/* OVERVIEW */
/* ============================= */

.product-overview{
  padding:40px 0;
}

.overview-wrapper{
  display:grid;

  grid-template-columns:1.1fr 1fr;

  gap:40px;

  align-items:start;
}

.overview-image{
  overflow:hidden;
  border-radius:28px;
}

.overview-image img{
  width:100%;
  height:550px;
  object-fit:contain;
  display:block;
  border-radius: 28px;
}

.overview-content h2{
  font-size:52px;
  line-height:1.15;
  margin:18px 0 24px;
}

.overview-content p{
  color:#bbbbbb;
  line-height:1.9;
  margin-bottom:30px;
}

.overview-content li{
  color:#bbbbbb;
  line-height:1.3;
  margin-bottom:30px;
}

/* INFO CARD */

.info-card{
  background:#111827;
  border-radius:24px;
  padding:30px;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,0.05);
}

.info-card h3{
  font-size:28px;
  margin-bottom:22px;
}

.info-card ul{
  list-style:none;
}

.info-card li{
  color:#dddddd;
  margin-bottom:16px;
  line-height:1.9;
}

.warning-card{
  border-color:#ffd00040;
  
}

.warning-card p{
  border-color:#ffd00040;
  line-height: 2.5;
}

/* ============================= */
/* SPECIFICATION */
/* ============================= */

.specification-section{
  padding:0 0 40px;
}

.spec-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:25px;

  margin-top:0px;
}

.spec-card{
  background:#1b2431;

  border-radius:24px;

  padding:10px;

  border:1px solid rgba(255,255,255,0.05);

  transition:0.3s;
}

.spec-card:hover{
  transform:translateY(-8px);

  border-color:#ffd000;
}

.spec-card span{
  color:#aaaaaa;

  display:block;

  margin-bottom:14px;
}

.spec-card h3{
  font-size:28px;
}

/* ============================= */
/* USE CASE */
/* ============================= */

.usecase-section{
  padding:30px;
}

.usecase-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:30px;

  margin-top:60px;
}

.usecase-card{
  background:#1b2431;

  padding:40px;

  border-radius:24px;

  border:1px solid rgba(255,255,255,0.05);

  transition:0.3s;
}

.usecase-card:hover{
  transform:translateY(-8px);

  border-color:#ffd000;
}

.usecase-card h3{
  font-size:30px;

  margin-bottom:18px;
}

.usecase-card p{
  color:#cccccc;

  line-height:1.8;
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media(max-width:992px){

  .overview-wrapper{
    grid-template-columns:1fr;
  }

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

}

@media(max-width:768px){

  .product-hero{
    padding:130px 0 70px;
  }

  .product-hero-content h1{
    font-size:44px;

    line-height:1.15;
  }

  .overview-image img{
    height:340px;
  }

  .overview-content h2{
    font-size:38px;
  }

  .spec-grid,
  .usecase-grid{
    grid-template-columns:1fr;
  }

  .info-card,
  .usecase-card,
  .spec-card{
    padding:24px;
  }

}


/* ============================= */
/* TYPE HOIST */
/* ============================= */

.type-overview{
    padding:0px 0 40px;
}

.type-card{
    background:#1b2431;

    border-radius:24px;

    padding:35px;

    display:grid;

    grid-template-columns:240px 1fr;

    gap:40px;

    align-items:center;

    border:1px solid rgba(255,255,255,0.05);

    transition:0.3s;
}

.type-card:hover{
    transform:translateY(-6px);

    border-color:#ffd000;
}

/* IMAGE */

.type-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.type-image img{
    width:100%;
    max-width:220px;
    object-fit:contain;
    border-radius:24px;

}

/* CONTENT */

.type-content p{
    color:#cccccc;

    line-height:1.9;

    margin-bottom:20px;
}

.type-content ul{
    padding-left:20px;
}

.type-content li{
    color:#dddddd;

    margin-bottom:12px;

    line-height:1.8;
}


/* MOBILE */

@media(max-width:768px){

  .type-card{
      grid-template-columns:1fr;

      text-align:left;

      padding:28px;
  }

  .type-content ul{
      text-align:left;
  }

  .type-image img{
      max-width:150px;
      border-radius: 24px;

  }

}

/* ============================= */
/* DESCRIPTION CARD */
/* ============================= */

.description-section{
    padding:40px 0 80px;
}

.description-card{
    background:#1b2431;

    border-radius:32px;

    padding:50px;

    border:1px solid rgba(255,255,255,0.05);

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    transition:0.3s;
}

.description-card:hover{
    border-color:#ffd00040;
}

.description-card h2{
    font-size:42px;

    line-height:1.2;

    margin:20px 0 28px;
}

.description-card p{
    color:#cccccc;
    line-height:2;
    margin-bottom:22px;
    max-width:950px;
}

.description-card li{
    color:#cccccc;
    line-height:1.5;
    margin-bottom:22px;
    max-width:950px;
}



/* MOBILE */

@media(max-width:768px){

  .description-card{
      padding:30px 24px;

      border-radius:24px;
  }

  .description-card h2{
      font-size:32px;

      line-height:1.3;
  }

  .description-card p{
      font-size:15px;

      line-height:1.9;
  }

}

/* ============================= */
/* INSTALLATION GALLERY */
/* ============================= */

.installation-gallery{
    padding:40px 0 90px;
}

.gallery-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,320px));

    justify-content:center;

    gap:24px;

    margin-top:50px;
}


.gallery-item{
    background:#1b2431;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,0.05);

    transition:0.3s;
}

.gallery-item:hover{
    transform:translateY(-6px);

    border-color:#ffd000;
}

.gallery-item img{
    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

    transition:0.4s;
}

.gallery-item:hover img{
    transform:scale(1.05);
}

.gallery-item p{
    padding:18px;

    color:#dddddd;

    font-size:15px;

    line-height:1.6;

    text-align:center;
}


/* TABLET */

@media(max-width:992px){

  .gallery-grid{
      grid-template-columns:repeat(2,1fr);
  }

  }


  /* MOBILE */

  /* MOBILE GALLERY FIX */

@media(max-width:768px){

.gallery-grid{
    grid-template-columns:1fr;

    gap:30px;

    justify-items:center;
}

.gallery-item{
    width:100%;

    max-width:260px;

    background:transparent;

    border:none;

    box-shadow:none;

    text-align:center;
}

.gallery-item:hover{
    transform:none;
    border:none;
}

.gallery-item img{
    width:100%;

    height:180px;

    border-radius:20px;

    object-fit:cover;

    display:block;
}

.gallery-item p{
    padding:14px 8px 0;

    font-size:14px;

    line-height:1.6;

    color:#cccccc;
}

}


/* ============================= */
/* IMAGE POPUP */
/* ============================= */

.image-popup{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:30px;
}

.image-popup img{
    max-width:90%;

    max-height:90vh;

    border-radius:24px;

    object-fit:contain;

    box-shadow:0 10px 40px rgba(0,0,0,.4);

    animation:popupZoom .3s ease;
}

.close-popup{
    position:absolute;

    top:30px;

    right:40px;

    color:#fff;

    font-size:52px;

    cursor:pointer;

    line-height:1;
}

/* ANIMATION */

@keyframes popupZoom{

  from{
      transform:scale(.8);
      opacity:0;
  }

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

}


/* MOBILE */

  @media(max-width:768px){

  .close-popup{
      top:20px;
      right:24px;
      font-size:42px;
  }

  .image-popup img{
      max-width:95%;
  }

}