/* =========================
   SECTION
========================= */
.cert-section {
  padding: 60px 0;
  background: #fff;
}

/* TITLE */
.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.section-title p {
  color: #666;
}

/* =========================
   GRID (2 COLUMN DESKTOP)
========================= */
.cert-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  justify-items: center;
}

/* =========================
   CARD
========================= */
.cert-card {
  text-align: center;
}

/* =========================
   IMAGE FIXED SIZE (YOUR DIMENSION)
========================= */
.cert-card img {
  width: 400px;
  height: 600px;
  object-fit: contain; /* supaya cert tak stretch */
  display: block;
}

/* TEXT */
.cert-card h4 {
  margin-top: 10px;
  font-size: 18px;
}

/* =========================
   MOBILE VERSION
========================= */
@media (max-width: 768px) {

  .cert-wrapper {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .cert-card img {
    width: 90%;        /* responsive width */
    height: auto;      /* maintain ratio */
    max-width: 400px;  /* maintain original size feel */
  }

  .section-title h2 {
    font-size: 26px;
  }
}



/* =========================
   SECTION BASE
========================= */
.about-section {
  padding: 70px 0;
  background: #fff;
}

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

/* =========================
   TITLE
========================= */
.about-title {
  text-align: center;
  margin-bottom: 40px;
}

.about-title h2 {
  font-size: 32px;
  font-weight: 600;
}

/* =========================
   IMAGE LAYOUT (CIRCLE COLLAGE)
========================= */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  align-items: center;
  margin-bottom: 40px;
}

/* circle images */
.circle-img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

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

/* main image (center focus) */
.main-img {
  grid-column: span 2;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1.5/1;
}

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

/* =========================
   TEXT CONTENT
========================= */
.about-content {
  max-width: 900px;
  margin: auto;
  text-align: justify;
}

.about-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 15px;
}

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

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

  .main-img {
    grid-column: span 3;
  }
}

/* =========================
   MOBILE VERSION
========================= */
@media (max-width: 768px) {

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

  .main-img {
    grid-column: span 2;
  }

  .circle-img {
    aspect-ratio: 1/1;
  }

  .about-title h2 {
    font-size: 24px;
  }

  .about-content {
    padding: 0 10px;
  }

  .about-content p {
    font-size: 14px;
  }
}



/* =========================
   SECTION WRAPPER
   ========================= */
.section-petak {
  padding: 90px 0;
  text-align: center;
}

/* TITLE */
.section-petak-title h2 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* TEXT */
.section-petak-text {
  max-width: 800px;
  margin: 0 auto 50px auto;
  color: #555;
  line-height: 1.8;
  font-size: 16px;
}

/* =========================
   WRAPPER ORBIT
   ========================= */
.square-wrapper {
  position: relative;
  width: 650px;
  height: 650px;
  margin: 0 auto;
}

/* =========================
   GAMBAR TENGAH (BULAT BESAR)
   ========================= */
.square-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  z-index: 2;
}

.square-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   GAMBAR KOTAK KELILING
   ========================= */
.square-item {
  position: absolute;

  /* 🔴 NOTE: INI BAHAGIAN PALING PENTING
     UBAH SAIZ DI SINI UNTUK BESARKAN / KECILKAN GAMBAR KOTAK */
  width: 150px;   /* 🔴 BESARKAN contoh: 130px / 150px / 170px */
  height: 150px;  /* 🔴 BESARKAN contoh: 130px / 150px / 170px */

  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #ddd;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: 0.3s ease;
}

/* IMAGE FIT */
.square-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HOVER EFFECT */
.square-item:hover {
  transform: scale(1.1);
  z-index: 3;
}

/* =========================
   POSISI 8 ITEM
   (JANGAN UBAH KECUALI DESIGN)
   ========================= */
.square-item:nth-child(2) { top: 0; left: 50%; transform: translate(-50%, 0); }
.square-item:nth-child(3) { top: 15%; right: 15%; }
.square-item:nth-child(4) { top: 50%; right: 0; transform: translate(0, -50%); }
.square-item:nth-child(5) { bottom: 15%; right: 15%; }
.square-item:nth-child(6) { bottom: 0; left: 50%; transform: translate(-50%, 0); }
.square-item:nth-child(7) { bottom: 15%; left: 15%; }
.square-item:nth-child(8) { top: 50%; left: 0; transform: translate(0, -50%); }
.square-item:nth-child(9) { top: 15%; left: 15%; }

/* =========================
   RESPONSIVE MOBILE
   ========================= */
@media (max-width: 768px) {

  .square-wrapper {
    width: 320px;
    height: 320px;
  }

  .square-center {
    width: 150px;
    height: 150px;
  }

  .square-item {
    /* 🔴 NOTE: BESARKAN / KECILKAN GAMBAR KOTAK MOBILE */
    width: 70px;
    height: 70px;
  }
}




/* =========================
   SECTION WRAPPER
   ========================= */
.timeline-section {
  padding: 60px 20px;
  background: #fff;
}

/* TITLE */
.timeline-title {
  text-align: center;
  margin-bottom: 40px;
}

.timeline-title h2 {
  font-size: 26px;
  font-weight: 700;
}

/* =========================
   TIMELINE CONTAINER
   ========================= */
.timeline {
  position: relative;
  max-width: 600px;
  margin: auto;
}

/* LINE (VERTICAL) */
.timeline::before {
  content: '';
  position: absolute;
  left: 60px;
  top: 0;
  width: 3px;
  height: 100%;
  background: #d4e9d4;
}

/* =========================
   ITEM
   ========================= */
.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}

/* YEAR BULAT */
.timeline-year {
  width: 70px;
  height: 70px;
  background: #d9f2d9;
  color: #1a7f37;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 3px solid #bde5bd;
  flex-shrink: 0;
}

/* CONTENT */
.timeline-content {
  margin-left: 25px;
  padding-top: 10px;
}

.timeline-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

/* =========================
   MOBILE OPTIMIZATION
   ========================= */
@media (max-width: 768px) {

  .timeline::before {
    left: 35px;
  }

  .timeline-year {
    width: 60px;
    height: 60px;
    font-size: 14px;
  }

  .timeline-content {
    margin-left: 20px;
  }
}





/* HEADER BACKGROUND */
.page-header {
  position: relative;

  /* 🔴 NOTE: INI BAHAGIAN UNTUK TINGGI BANNER
     BESARKAN NILAI INI UNTUK BUAT BANNER LEBIH TINGGI */
  height: 450px;   /* 🔴 contoh: 350px / 400px / 500px */

  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center; /* center content vertical */
}

/* OVERLAY */
.page-header-overlay {
  position: absolute;
  inset: 0;
  background:rgba(0, 0, 0, 0);
}

/* INNER CONTAINER */
.page-header-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* CONTENT */
.page-header-content {
  color: #fff;
}

/* TITLE */
.page-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* BREADCRUMB */
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 14px;
  color: #ddd;
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.breadcrumb .active {
  color: #f4c542;
}

/* =========================
   OPTIONAL RESPONSIVE HEIGHT
   ========================= */
@media (max-width: 768px) {

  .page-header {
    /* 🔴 NOTE: KECILKAN HEIGHT UNTUK MOBILE */
    height: 220px;
  }

  .page-title {
    font-size: 28px;
  }
}










/* =========================
   GENERAL
========================= */

.project-section {
    max-width: 1100px;
    margin: auto;
}

h2 {
    text-align: center;
    color: #2c3e50;
}

/* =========================
   TABLE STYLE (DESKTOP)
========================= */
.table-container {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: #2c3e50;
    color: #fff;
}

th, td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 14px;
}

tbody tr:hover {
    background: #f1f5f9;
}

/* =========================
   SECTION TITLE
========================= */
.section-title td {
    background: #34495e;
    color: white;
    text-align: center;
    font-weight: bold;
}

.section-title.new td {
    background: #1abc9c;
}

/* =========================
   PAGINATION
========================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
}

.btn {
    padding: 10px 16px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.btn:hover {
    background: #1abc9c;
}

/* =========================
   MOBILE VERSION (CARD UI)
========================= */
@media (max-width: 768px) {

    thead {
        display: none;
    }

    table, tbody, tr, td {
        display: block;
        width: 100%;
    }

    tr {
        background: #fff;
        margin-bottom: 15px;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    td {
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 13px;
    }

    td:last-child {
        border-bottom: none;
    }

    td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #2c3e50;
    }

    .pagination {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}



/* ====================================
   Certification Section
==================================== */

.cert-popup-section{
    padding:80px 0;
}

.cert-popup-wrapper{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.cert-popup-card{
    text-align:center;
}

.cert-popup-card img{
    width:100%;
    height:auto;
    border-radius:10px;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.cert-popup-card img:hover{
    transform:translateY(-5px);
}

.cert-popup-card h4{
    margin-top:15px;
    font-size:18px;
    font-weight:600;
}

/* ====================================
   Popup
==================================== */

.cert-popup-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    z-index:99999;

    justify-content:center;
    align-items:center;

    padding:30px;
}

.cert-popup-content{
    text-align:center;
    max-width:95%;
}

.cert-popup-image{
    max-width:95vw;
    max-height:85vh;
    object-fit:contain;
    border-radius:8px;
    background:#fff;
}

.cert-popup-close{
    position:absolute;
    top:20px;
    right:30px;

    font-size:50px;
    color:#fff;

    cursor:pointer;
    line-height:1;
}

.cert-original-btn{
    display:inline-block;
    margin-top:20px;

    padding:12px 25px;

    background:#fff;
    color:#000;

    text-decoration:none;
    font-weight:600;

    border-radius:5px;
    transition:.3s;
}

.cert-original-btn:hover{
    background:#f3f3f3;
}

/* ====================================
   Tablet
==================================== */

@media (max-width:991px){

    .cert-popup-wrapper{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

}

/* ====================================
   Mobile
==================================== */

@media (max-width:576px){

    .cert-popup-section{
        padding:60px 0;
    }

    .cert-popup-wrapper{
        grid-template-columns:1fr;
        gap:20px;
    }

    .cert-popup-card h4{
        font-size:16px;
    }

    .cert-popup-image{
        max-width:100%;
        max-height:75vh;
    }

    .cert-popup-close{
        font-size:40px;
        right:20px;
        top:15px;
    }

    .cert-original-btn{
        width:100%;
        text-align:center;
    }

}





/* ====================================
   Project Showcase Section
==================================== */
/* ====================================
   Project Showcase Section
==================================== */

.project-showcase-section{
    padding:80px 0;
    background:#f8f9fb;
}

.project-showcase-wrapper{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.project-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:all .3s ease;
}

.project-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.project-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}

.project-card-content{
    padding:20px;
    text-align:center;
}

.project-card-content h4{
    margin-bottom:15px;
    font-size:18px;
    font-weight:600;
    color:#222;
}

.project-pdf-btn{
    display:inline-block;
    padding:10px 24px;
    background:#003366;
    color:#fff;
    text-decoration:none;
    border-radius:5px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.project-pdf-btn:hover{
    background:#0055aa;
    color:#fff;
}


/* ====================================
   Tablet
==================================== */

@media (max-width:991px){

    .project-showcase-wrapper{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .project-card img{
        height:220px;
    }

}


/* ====================================
   Mobile
==================================== */

@media (max-width:767px){

    .project-showcase-section{
        padding:60px 0;
    }

    .project-showcase-wrapper{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .project-card{
        border-radius:10px;
    }

    .project-card img{
        height:150px;
    }

    .project-card-content{
        padding:12px;
    }

    .project-card-content h4{
        font-size:15px;
        line-height:1.4;
        margin-bottom:10px;
    }

    .project-pdf-btn{
        width:100%;
        padding:9px;
        font-size:13px;
    }

}


/* ====================================
   Small Mobile
==================================== */

@media (max-width:480px){

    .project-showcase-wrapper{
        grid-template-columns:1fr;
        gap:20px;
    }

    .project-card img{
        height:260px;
    }

    .project-card-content h4{
        font-size:17px;
    }

}







/* =========================
   FOOTER
========================= */

.footer {
    background: #181818;
    color: #fff;
    padding-top: 80px;
    /* margin-top: 100px; */
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px 60px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
    gap: 60px;
}

.footer-logo {
    width: 140px;
    margin-bottom: 25px;
}

.company-info p {
    color: rgba(255,255,255,0.75);
    line-height: 1.9;
    font-size: 15px;
}

/* Heading */

.footer h3 {
    font-size: 20px;
    margin-bottom: 25px;
    position: relative;
    font-weight: 600;
}

.footer h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 45px;
    height: 3px;
    background: #f3c623;
}

/* Links */

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

.footer ul li {
    margin-bottom: 16px;
}

.footer a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: 0.3s;
}

.footer a:hover {
    color: #f3c623;
    padding-left: 5px;
}

/* Contact */

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    line-height: 1.8;
}

.contact-list i {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #f3c623;
    color: #111;
    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 15px;
}

/* Footer Bottom */

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    padding: 25px;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }

}

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

@media (max-width: 768px) {

    .footer {
        padding-top: 60px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 25px 50px;
    }

    .company-info {
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto 20px;
        display: block;
    }

    .footer h3 {
        margin-bottom: 20px;
    }

    .footer h3::after {
        width: 40px;
    }

    .contact-list li {
        gap: 12px;
    }

    .footer-bottom {
        padding: 20px;
    }

    .footer-bottom p {
        font-size: 13px;
        line-height: 1.7;
    }

}



/*==================================
 Core Products & Services
===================================*/

.core-products{
    padding:100px 0;
    background:#f8f9fa;
}

.core-products .section-title{
    margin-bottom:60px;
}

.product-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:0.3s;
    height:100%;
    display:flex;
    flex-direction:column;
}

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

.product-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.product-info{
    padding:25px;
    flex:1;
}

.product-info h4{
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;
}

.product-info p{
    font-size:16px;
    line-height:1.8;
    color:#666;
    margin:0;
}

/*==================================
 Tablet
===================================*/

@media (max-width:991px){

    .core-products{
        padding:80px 0;
    }

    .core-products .section-title{
        margin-bottom:45px;
    }

    .product-card{
        margin-bottom:30px;
    }

    .product-card img{
        height:220px;
    }

    .product-info{
        padding:22px;
    }

    .product-info h4{
        font-size:20px;
    }

    .product-info p{
        font-size:15px;
    }

}

/*==================================
 Mobile
===================================*/

@media (max-width:767px){

    .core-products{
        padding:60px 0;
    }

    .core-products .section-title{
        margin-bottom:35px;
        text-align:center;
    }

    .core-products .section-title h2{
        font-size:32px;
        line-height:1.3;
    }

    .core-products .section-title h3{
        font-size:16px;
    }

    .core-products .section-title p{
        font-size:15px;
        line-height:1.7;
        padding:0 10px;
    }

    .product-card{
        margin-bottom:25px;
    }

    .product-card img{
        height:220px;
    }

    .product-info{
        padding:20px;
        text-align:center;
    }

    .product-info h4{
        font-size:20px;
        margin-bottom:10px;
    }

    .product-info p{
        font-size:15px;
        line-height:1.7;
    }

}

/*==================================
 Small Mobile
===================================*/

@media (max-width:480px){

    .core-products{
        padding:50px 0;
    }

    .core-products .section-title h2{
        font-size:28px;
    }

    .product-card img{
        height:190px;
    }

    .product-info{
        padding:18px;
    }

    .product-info h4{
        font-size:18px;
    }

    .product-info p{
        font-size:14px;
        line-height:1.6;
    }

}




/*==================================
 Industries We Serve
===================================*/

/* =====================================================
   ICON SIZE SETTINGS
   Tukar saiz icon di sini sahaja.

   Desktop : 90px
   Tablet   : 75px
   Mobile   : 65px
   Small Mobile : 55px
===================================================== */

:root{
    --industry-icon-size: 180px;
}

.industries-section{
    padding:100px 0;
    background:#ffffff;
}

.industries-section .section-title{
    margin-bottom:60px;
}

.industry-box{
    background:#fff;
    border:1px solid #ececec;
    border-radius:12px;
    padding:35px 20px;
    text-align:center;
    transition:0.35s ease;
    height:100%;
    box-shadow:0 5px 18px rgba(0,0,0,.05);
}

.industry-box:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.industry-box img{
    width:var(--industry-icon-size);
    height:var(--industry-icon-size);
    object-fit:contain;
    margin-bottom:20px;
}

.industry-box h5{
    font-size:20px;
    font-weight:600;
    margin:0;
    line-height:1.5;
    color:#222;
}

/*=========================
 Tablet
==========================*/

@media (max-width:991px){

    /* Tukar saiz icon Tablet di sini */
    :root{
        --industry-icon-size:75px;
    }

    .industries-section{
        padding:80px 0;
    }

    .industries-section .section-title{
        margin-bottom:45px;
    }

    .industry-box{
        padding:30px 20px;
    }

    .industry-box h5{
        font-size:18px;
    }

}

/*=========================
 Mobile
==========================*/

@media (max-width:767px){

    /* Tukar saiz icon Mobile di sini */
    :root{
        --industry-icon-size:65px;
    }

    .industries-section{
        padding:60px 0;
    }

    .industries-section .section-title{
        margin-bottom:35px;
    }

    .industries-section .section-title h2{
        font-size:32px;
        line-height:1.3;
    }

    .industries-section .section-title h3{
        font-size:16px;
    }

    .industries-section .section-title p{
        font-size:15px;
        padding:0 10px;
        line-height:1.7;
    }

    .industry-box{
        padding:25px 15px;
        border-radius:10px;
    }

    .industry-box h5{
        font-size:16px;
        line-height:1.4;
    }

}

/*=========================
 Small Mobile
==========================*/

@media (max-width:480px){

    /* Tukar saiz icon Small Mobile di sini */
    :root{
        --industry-icon-size:55px;
    }

    .industries-section{
        padding:50px 0;
    }

    .industries-section .section-title h2{
        font-size:28px;
    }

    .industry-box{
        padding:20px 10px;
    }

    .industry-box h5{
        font-size:15px;
    }

}




/*==================================================
 WHY CHOOSE INSaFOAM
==================================================*/

.why-choose-section{
    padding:100px 0;
    background:#fff;
}

.why-choose-section .section-title{
    margin-bottom:70px;
}

.why-counter{
    position:relative;
    min-height:500px;
}

/*=================================
 Counter Box
==================================*/

.counter-item{
    position:absolute;
}

.counter-item h2{
    font-size:72px;
    font-weight:700;
    margin-bottom:8px;
    color:#111;
}

.counter-item h3{
    font-size:48px;
    font-weight:700;
    margin-bottom:8px;
    color:#111;
}

.counter-item p{
    font-size:22px;
    line-height:1.6;
    color:#333;
}

/* Position */

.counter-large{
    left:20px;
    top:0;
}

.counter-middle{
    left:120px;
    top:180px;
}

.counter-bottom{
    left:250px;
    top:350px;
}

/*=================================
 Right Content
==================================*/

.why-content h3{
    font-size:38px;
    font-weight:700;
    margin-bottom:30px;
    line-height:1.4;
}

.why-content p{
    font-size:20px;
    line-height:1.9;
    color:#555;
    margin-bottom:22px;
}

/*=================================
 Tablet
==================================*/

@media(max-width:991px){

    .why-choose-section{
        padding:80px 0;
    }

    .why-counter{

        position:static;
        min-height:auto;

        display:flex;
        justify-content:space-between;
        gap:20px;
        margin-bottom:50px;
    }

    .counter-item{

        position:static;
        flex:1;
        text-align:center;
    }

    .counter-item h2{
        font-size:55px;
    }

    .counter-item h3{
        font-size:38px;
    }

    .counter-item p{
        font-size:18px;
    }

    .why-content{
        text-align:center;
    }

    .why-content h3{
        font-size:32px;
    }

    .why-content p{
        font-size:18px;
    }

}

/*=================================
 Mobile
==================================*/

@media(max-width:767px){

    .why-choose-section{

        padding:60px 0;
    }

    .why-choose-section .section-title{

        margin-bottom:40px;
        text-align:center;
    }

    .why-choose-section .section-title h2{

        font-size:34px;
    }

    .why-counter{

        display:flex;
        flex-direction:column;
        gap:30px;

        margin-bottom:40px;
    }

    .counter-item{

        text-align:center;
    }

    .counter-item h2{

        font-size:48px;
    }

    .counter-item h3{

        font-size:38px;
    }

    .counter-item p{

        font-size:17px;
        line-height:1.6;
    }

    .why-content{

        text-align:center;
    }

    .why-content h3{

        font-size:28px;
        line-height:1.4;
    }

    .why-content p{

        font-size:16px;
        line-height:1.8;
    }

}

/*=================================
 Small Mobile
==================================*/

@media(max-width:480px){

    .why-choose-section .section-title h2{

        font-size:30px;
    }

    .counter-item h2{

        font-size:42px;
    }

    .counter-item h3{

        font-size:34px;
    }

    .counter-item p{

        font-size:15px;
    }

    .why-content h3{

        font-size:24px;
    }

    .why-content p{

        font-size:15px;
    }

}





/*====================================================
    INSAPIPE FEATURED PROJECTS
====================================================*/

.insa-project-section{
    padding:100px 0;
    background:#fff;
}

.insa-project-section .section-title{
    margin-bottom:60px;
}

/* Card */

.insa-project-card{

    display:flex;
    align-items:center;
    gap:40px;

    background:#fff;

    border:1px solid #ebebeb;

    border-radius:18px;

    padding:25px;

    overflow:hidden;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

    transition:.35s ease;
}

.insa-project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

/* Image */

.insa-project-image{

    width:748px;
    height:498px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:15px;

}

.insa-project-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.insa-project-card:hover .insa-project-image img{

    transform:scale(1.05);

}

/* Content */

.insa-project-content{

    flex:1;

}

.insa-project-logo{

    width:338px;

    margin-bottom:25px;

}

.insa-project-content h4{

    font-size:30px;

    font-weight:600;

    line-height:1.5;

    margin-bottom:25px;

}

.insa-project-content h5{

    font-size:22px;

    font-weight:700;

    margin-bottom:10px;

}

.insa-project-content p{

    font-size:18px;

    line-height:1.8;

    margin:0;

}

/* Tablet */

@media (max-width:991px){

    .insa-project-section{

        padding:80px 0;

    }

    .insa-project-card{

        flex-direction:column;

        gap:25px;

    }

    .insa-project-image{

        width:100%;
        height:420px;

    }

    .insa-project-content{

        width:100%;

        text-align:center;

    }

    .insa-project-logo{

        width:130px;

        display:block;

        margin:0 auto 20px;

    }

}

/* Mobile */

@media (max-width:767px){

    .insa-project-section{

        padding:60px 0;

    }

    .insa-project-section .section-title h2{

        font-size:34px;

    }

    .insa-project-card{

        padding:18px;

    }

    .insa-project-image{

        width:100%;
        height:280px;

    }

    .insa-project-content h4{

        font-size:24px;

    }

    .insa-project-content h5{

        font-size:20px;

    }

    .insa-project-content p{

        font-size:16px;

    }

}

/* Small Mobile */

@media (max-width:480px){

    .insa-project-image{

        height:220px;

    }

    .insa-project-logo{

        width:100px;

    }

    .insa-project-content h4{

        font-size:21px;

    }

    .insa-project-content h5{

        font-size:18px;

    }

    .insa-project-content p{

        font-size:15px;

    }

}





/*====================================================
        COMPANY HISTORY SECTION
====================================================*/

.history-section{

    background:#f7f8fc;
    padding:120px 0;
    overflow:hidden;

}

.history-container{

    width:90%;
    max-width:1450px;
    margin:auto;

}

.history-header{

    text-align:center;
    margin-bottom:90px;

}

.history-subtitle{

    display:inline-block;
    padding:8px 22px;
    border-radius:50px;
    background:#0B5ED7;
    color:#fff;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;

}

.history-header h2{

    font-size:52px;
    font-weight:700;
    color:#1b1b1b;
    margin-bottom:20px;

}

.history-header p{

    width:720px;
    max-width:100%;
    margin:auto;
    color:#666;
    line-height:1.8;

}

/*=====================================
ROAD
======================================*/

.history-road{

    position:relative;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

}

.history-road::before{

    content:'';
    position:absolute;

    left:0;
    right:0;

    top:38px;

    height:6px;

    background:linear-gradient(
    90deg,
    #0B5ED7,
    #35b6ff,
    #00c896);

    border-radius:20px;

}

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

.history-card{

    width:170px;
    position:relative;
    z-index:2;

}

.history-dot{

    width:28px;
    height:28px;

    border-radius:50%;

    background:#fff;
    border:7px solid #0B5ED7;

    margin:24px auto 45px;

    transition:.35s;

}

.history-box{

    background:#fff;
    padding:28px;

    border-radius:20px;

    text-align:center;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    transition:.4s;

}

.history-box h3{

    color:#0B5ED7;
    font-size:32px;
    margin-bottom:15px;

}

.history-box p{

    color:#666;
    line-height:1.8;
    font-size:15px;

}

.history-card:hover .history-box{

    transform:translateY(-12px);

    box-shadow:
    0 35px 70px rgba(0,0,0,.18);

}

.history-card:hover .history-dot{

    transform:scale(1.3);

    background:#0B5ED7;

}

/*=====================================
TABLET
======================================*/

@media(max-width:1200px){

.history-road{

overflow-x:auto;
gap:40px;
padding-bottom:20px;

}

.history-card{

min-width:250px;

}

}

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

@media(max-width:768px){

.history-section{

padding:80px 0;

}

.history-header h2{

font-size:34px;

}

.history-header p{

font-size:15px;

}

.history-road{

display:block;
padding-left:35px;

}

.history-road::before{

left:13px;
top:0;
width:5px;
height:100%;

background:linear-gradient(
180deg,
#0B5ED7,
#35b6ff,
#00c896);

}

.history-card{

width:100%;
margin-bottom:45px;
padding-left:30px;

}

.history-dot{

position:absolute;

left:-1px;
top:15px;

margin:0;

}

.history-box{

text-align:left;

}

.history-box h3{

font-size:28px;

}

}




/*=========================================
    BARE PRODUCT V2
=========================================*/

.bare-product-v2-section{
    padding:100px 0;
    background:#f8fafc;
}

.bare-product-v2-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    height:100%;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s ease;
    border:1px solid #edf1f5;
}

.bare-product-v2-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.bare-product-v2-image{
    overflow:hidden;
}

.bare-product-v2-image img{
    width:100%;
    height:360px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.bare-product-v2-card:hover img{
    transform:scale(1.06);
}

.bare-product-v2-content{
    padding:35px;
}

.bare-product-v2-content h3{
    font-size:30px;
    font-weight:700;
    margin-bottom:18px;
    color:#222;
}

.bare-product-v2-content p{
    color:#666;
    line-height:1.9;
    margin-bottom:30px;
}

/* Specification */

.bare-product-v2-spec{
    border-top:1px solid #ececec;
    padding-top:20px;
}

.spec-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid #f3f3f3;
}

.spec-row:last-child{
    border-bottom:none;
}

.spec-row span{
    color:#777;
    font-weight:500;
}

.spec-row strong{
    color:#222;
    font-weight:700;
    text-align:right;
}

/*==========================
Tablet
==========================*/

@media (max-width:991px){

    .bare-product-v2-section{
        padding:80px 0;
    }

    .bare-product-v2-image img{
        height:300px;
    }

    .bare-product-v2-content{
        padding:28px;
    }

    .bare-product-v2-content h3{
        font-size:26px;
    }

}

/*==========================
Mobile
==========================*/

@media (max-width:767px){

    .bare-product-v2-section{
        padding:60px 0;
    }

    .bare-product-v2-card{
        margin-bottom:10px;
    }

    .bare-product-v2-image img{
        height:240px;
    }

    .bare-product-v2-content{
        padding:22px;
    }

    .bare-product-v2-content h3{
        font-size:22px;
    }

    .bare-product-v2-content p{
        font-size:15px;
        line-height:1.8;
    }

    .spec-row{
        flex-direction:column;
        gap:5px;
        padding:12px 0;
    }

    .spec-row strong{
        text-align:left;
    }

}








/*==================================================
        BARE PIPE SECTION
==================================================*/

.bare-pipe-section{
    padding:70px 0;
    background:#f8f9fc;
}

.bare-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    height:100%;
    transition:.4s;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
}

.bare-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.bare-image{
    overflow:hidden;
}

.bare-image img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.bare-card:hover img{
    transform:scale(1.08);
}

.bare-content{
    padding:22px;
    text-align:center;
}

.bare-content h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:12px;
    color:#222;
}

.bare-content p{
    font-size:15px;
    line-height:1.8;
    color:#666;
    margin:0;
}

/*==========================
Tablet
==========================*/

@media (min-width:768px){

.bare-pipe-section{
    padding:90px 0;
}

.bare-content{
    padding:28px;
}

.bare-content h3{
    font-size:24px;
}

.bare-content p{
    font-size:16px;
}

}

/*==========================
Desktop
==========================*/

@media (min-width:1200px){

.bare-pipe-section{
    padding:110px 0;
}

.bare-content{
    padding:32px;
}

.bare-content h3{
    font-size:26px;
}

}

/*==========================
Small Mobile
==========================*/

@media (max-width:575px){

.bare-pipe-section .section-title{
    margin-bottom:35px;
}

.bare-content{
    padding:20px;
}

.bare-content h3{
    font-size:20px;
}

.bare-content p{
    font-size:14px;
    line-height:1.7;
}

}




/*==================================================
        GROOVED FITTINGS SECTION
==================================================*/

.grooved-fitting-section{
    padding:100px 0;
    background:#f8fafc;
    position:relative;
}

.grooved-fitting-section .section-title{
    margin-bottom:60px;
}

/*==============================
Product Card
==============================*/

.grooved-card{
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:all .35s ease;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    border:1px solid #edf2f7;
}

.grooved-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/*==============================
Image
==============================*/

.grooved-image{
    overflow:hidden;
    background:#fff;
}

.grooved-image img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.grooved-card:hover .grooved-image img{
    transform:scale(1.08);
}

/*==============================
Content
==============================*/

.grooved-content{
    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1;
    text-align:center;
}

.grooved-content h4{
    font-size:20px;
    font-weight:700;
    color:#1f2937;
    margin-bottom:12px;
    line-height:1.4;
    min-height:56px;
}

.grooved-content p{
    color:#6b7280;
    font-size:15px;
    line-height:1.8;
    margin:0;
    flex:1;
}

/*==================================================
Tablet
==================================================*/

@media (max-width:991px){

    .grooved-fitting-section{
        padding:80px 0;
    }

    .grooved-fitting-section .section-title{
        margin-bottom:45px;
    }

    .grooved-content{
        padding:20px;
    }

    .grooved-content h4{
        font-size:18px;
        min-height:50px;
    }

    .grooved-content p{
        font-size:14px;
    }

}

/*==================================================
Mobile
==================================================*/

@media (max-width:767px){

    .grooved-fitting-section{
        padding:60px 0;
    }

    .grooved-fitting-section .section-title{
        margin-bottom:35px;
    }

    .grooved-card{
        border-radius:14px;
    }

    .grooved-content{
        padding:18px;
    }

    .grooved-content h4{
        font-size:17px;
        min-height:auto;
        margin-bottom:10px;
    }

    .grooved-content p{
        font-size:13px;
        line-height:1.7;
    }

}

/*==================================================
Small Mobile
==================================================*/

@media (max-width:575px){

    .grooved-fitting-section{
        padding:50px 0;
    }

    .grooved-fitting-section .row{
        --bs-gutter-x:14px;
        --bs-gutter-y:18px;
    }

    .grooved-content{
        padding:15px;
    }

    .grooved-content h4{
        font-size:16px;
    }

    .grooved-content p{
        font-size:12.5px;
        line-height:1.6;
    }

}



/*==================================================
    HDPE CATEGORY
==================================================*/

.hdpe-category{
    padding:20px 0;
}

/* Make section more centered */
.hdpe-fitting-section .container{
    max-width:1320px;
    padding-left:20px;
    padding-right:20px;
}

/* Better spacing */
.hdpe-category .row{
    --bs-gutter-x:30px;
    --bs-gutter-y:30px;
    justify-content:center;
}

/*==================================================
Product Card
==================================================*/

.hdpe-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    border:1px solid #edf2f7;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:all .35s ease;
    position:relative;
}

.hdpe-card::before{
    content:"";
    width:100%;
    height:4px;
    background:#0056b3;
    display:block;
}

.hdpe-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    border-color:#0056b3;
}

/*==================================================
Image
==================================================*/

.hdpe-image{
    overflow:hidden;
    background:#fff;
}

.hdpe-image img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.hdpe-card:hover .hdpe-image img{
    transform:scale(1.06);
}

/*==================================================
Content
==================================================*/

.hdpe-content{
    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1;
    text-align:center;
}

.hdpe-content h4{
    font-size:20px;
    font-weight:700;
    color:#222;
    line-height:1.4;
    margin-bottom:12px;
    min-height:56px;
}

.hdpe-content p{
    font-size:15px;
    color:#666;
    line-height:1.8;
    margin:0;
    flex:1;
}

/*==================================================
Desktop
==================================================*/

@media (min-width:1200px){

    .hdpe-content{
        padding:24px;
    }

    .hdpe-content h4{
        font-size:21px;
    }

}

/*==================================================
Tablet
==================================================*/

@media (max-width:991px){

    .hdpe-category{
        padding:15px 0;
    }

    .hdpe-fitting-section .container{
        padding-left:18px;
        padding-right:18px;
    }

    .hdpe-category .row{
        --bs-gutter-x:22px;
        --bs-gutter-y:22px;
    }

    .hdpe-content{
        padding:20px;
    }

    .hdpe-content h4{
        font-size:18px;
        min-height:48px;
    }

    .hdpe-content p{
        font-size:14px;
    }

}

/*==================================================
Mobile
==================================================*/

@media (max-width:767px){

    .hdpe-fitting-section{
        padding:60px 0;
    }

    .hdpe-fitting-section .container{
        padding-left:18px;
        padding-right:18px;
    }

    .hdpe-category .row{
        --bs-gutter-x:18px;
        --bs-gutter-y:20px;
    }

    .hdpe-card{
        border-radius:16px;
    }

    .hdpe-content{
        padding:18px;
    }

    .hdpe-content h4{
        font-size:17px;
        min-height:auto;
        margin-bottom:10px;
    }

    .hdpe-content p{
        font-size:13px;
        line-height:1.7;
    }

}

/*==================================================
Small Mobile
==================================================*/

@media (max-width:575px){

    .hdpe-fitting-section .container{
        padding-left:16px;
        padding-right:16px;
    }

    .hdpe-category .row{
        --bs-gutter-x:0;
        --bs-gutter-y:18px;
    }

    .hdpe-content{
        padding:18px;
    }

    .hdpe-content h4{
        font-size:18px;
    }

    .hdpe-content p{
        font-size:13px;
    }

}





/* ==========================================
   SEJARAH BARU
   Semua class menggunakan prefix
   "new-history-" supaya tidak bertembung
   dengan CSS section lain.
=========================================== */

.new-history-section {
    width: 100%;
    padding: 100px 20px;
    background: #f5f7fa;
    box-sizing: border-box;
}

.new-history-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}


/* ==========================================
   HEADER
=========================================== */

.new-history-header {
    text-align: center;
    margin-bottom: 60px;
}

.new-history-subtitle {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0B5ED7;
}

.new-history-header h2 {
    margin: 0 0 15px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #111827;
}

.new-history-header p {
    max-width: 650px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #6b7280;
}


/* ==========================================
   HISTORY LIST
=========================================== */

.new-history-list {
    width: 100%;
    border-top: 1px solid #dfe3e8;
}


/* ==========================================
   HISTORY ITEM
=========================================== */

.new-history-item {
    border-bottom: 1px solid #dfe3e8;
}


/* ==========================================
   YEAR BUTTON
=========================================== */

.new-history-year {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 25px 10px;

    border: none;
    background: transparent;

    cursor: pointer;

    font-family: inherit;
    text-align: left;

    transition: all 0.3s ease;
}

.new-history-year span:first-child {
    font-size: 32px;
    font-weight: 700;
    color: #111827;

    transition: color 0.3s ease;
}


/* ==========================================
   PLUS ICON
=========================================== */

.new-history-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d1d5db;
    border-radius: 50%;

    font-size: 25px;
    font-weight: 300;
    line-height: 1;

    color: #111827;

    transition: all 0.3s ease;
}


/* Hover */

.new-history-year:hover span:first-child {
    color: #0B5ED7;
}

.new-history-year:hover .new-history-icon {
    border-color: #0B5ED7;
    color: #0B5ED7;
}


/* ==========================================
   CONTENT
=========================================== */

.new-history-content {
    max-height: 0;
    overflow: hidden;

    padding: 0 10px;

    opacity: 0;

    transition:
        max-height 0.45s ease,
        opacity 0.3s ease,
        padding 0.45s ease;
}

.new-history-content p {
    max-width: 750px;

    margin: 0;

    font-size: 16px;
    line-height: 1.8;

    color: #5f6673;
}


/* ==========================================
   ACTIVE STATE
=========================================== */

.new-history-item.active .new-history-year span:first-child {
    color: #0B5ED73;
}

.new-history-item.active .new-history-icon {
    background: #0B5ED7;
    border-color: #0B5ED7;
    color: #ffffff;

    transform: rotate(45deg);
}

.new-history-item.active .new-history-content {
    max-height: 300px;

    padding: 0 10px 30px;

    opacity: 1;
}


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

@media (max-width: 768px) {

    .new-history-section {
        padding: 70px 20px;
    }

    .new-history-header {
        margin-bottom: 40px;
    }

    .new-history-header h2 {
        font-size: 32px;
    }

    .new-history-header p {
        font-size: 15px;
    }

    .new-history-year {
        padding: 20px 5px;
    }

    .new-history-year span:first-child {
        font-size: 26px;
    }

    .new-history-icon {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .new-history-content {
        padding-left: 5px;
        padding-right: 5px;
    }

    .new-history-item.active .new-history-content {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 25px;
    }

    .new-history-content p {
        font-size: 15px;
        line-height: 1.7;
    }
}




/* ==========================================
   CERTIFICATE DOWNLOAD BUTTON
   Tambahan baru - tidak ganggu CSS lain
========================================== */

.cert-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 15px;
    padding: 10px 20px;

    background-color: #e30613;
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    border-radius: 5px;

    transition: all 0.3s ease;
}

.cert-download-button:hover {
    background-color: #b9040f;
    color: #ffffff;
    transform: translateY(-2px);
}

.cert-download-button:active {
    transform: translateY(0);
}






/* ==========================================
   NEW COMPANY PROFILE
   Isolated CSS - Prefix: new-cp-
========================================== */

.new-cp-section,
.new-cp-section * {
    box-sizing: border-box;
}

.new-cp-section {
    position: relative;
    width: 100%;
    padding: 100px 24px;
    overflow: hidden;
    background: #f4f7fa;
    font-family: Arial, Helvetica, sans-serif;
}

.new-cp-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 75px;
}

/* LEFT CONTENT */

.new-cp-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.new-cp-label {
    display: inline-block;
    margin-bottom: 20px;
    color: #087f8c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.new-cp-title {
    margin: 0;
    color: #17283e;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.new-cp-title span {
    display: block;
    color: #087f8c;
}

.new-cp-divider {
    width: 58px;
    height: 4px;
    margin: 25px 0;
    border-radius: 10px;
    background: #087f8c;
}

.new-cp-description {
    max-width: 470px;
    margin: 0 0 30px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.9;
}

/* DETAIL ITEMS */

.new-cp-details {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 32px;
}

.new-cp-detail-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-cp-detail-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid #cce4e7;
    border-radius: 8px;
    background: #e6f3f4;
    color: #087f8c;
    font-size: 13px;
    font-weight: 800;
}

.new-cp-detail-text h4 {
    margin: 0 0 6px;
    color: #17283e;
    font-size: 15px;
    font-weight: 700;
}

.new-cp-detail-text p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}

/* BUTTONS */

.new-cp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.new-cp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.new-cp-button-view {
    background: #087f8c;
    color: #ffffff;
}

.new-cp-button-view:hover {
    background: #075f69;
    color: #ffffff;
    transform: translateY(-2px);
}

.new-cp-button-download {
    background: #ffffff;
    border-color: #d9e1e9;
    color: #17283e;
}

.new-cp-button-download:hover {
    background: #eaf5f6;
    border-color: #087f8c;
    color: #087f8c;
    transform: translateY(-2px);
}

.new-cp-arrow {
    font-size: 18px;
    line-height: 1;
}

.new-cp-download-icon {
    font-size: 20px;
    line-height: 1;
}

/* FILE STATUS */

.new-cp-file-info {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8794a5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.new-cp-file-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #087f8c;
}

/* RIGHT PREVIEW */

.new-cp-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 490px;
    isolation: isolate;
}

.new-cp-bg-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.new-cp-bg-shape-one {
    top: 10px;
    right: 0;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: #dcebed;
}

.new-cp-bg-shape-two {
    bottom: 10px;
    left: 0;
    width: 175px;
    height: 175px;
    border: 28px solid #e3e9ef;
    border-radius: 50%;
}

/* DOCUMENT MOCKUP */

.new-cp-document {
    position: relative;
    z-index: 1;
    width: 310px;
    max-width: 78%;
    padding: 19px;
    border: 1px solid #e7ebef;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(20, 40, 60, 0.15);
    transform: rotate(-3deg);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.new-cp-document:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 32px 75px rgba(20, 40, 60, 0.2);
}

.new-cp-document-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
    color: #7b8796;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.new-cp-document-logo {
    color: #087f8c;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -1px;
}

.new-cp-cover {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e8edf2;
}

.new-cp-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.new-cp-document-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 17px;
}

.new-cp-document-caption {
    display: block;
    margin-bottom: 6px;
    color: #8794a5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.new-cp-document-footer h3 {
    margin: 0;
    color: #17283e;
    font-size: 13px;
    font-weight: 800;
}

.new-cp-pdf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 39px;
    height: 29px;
    padding: 0 7px;
    border-radius: 4px;
    background: #e5f3f4;
    color: #087f8c;
    font-size: 10px;
    font-weight: 800;
}

/* FLOATING LABEL */

.new-cp-floating-card {
    position: absolute;
    right: -8px;
    bottom: 38px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 10px);
    padding: 14px 16px;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(20, 40, 60, 0.12);
}

.new-cp-pdf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 44px;
    border-radius: 5px;
    background: #087f8c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.new-cp-floating-text {
    min-width: 0;
}

.new-cp-floating-text strong {
    display: block;
    margin-bottom: 5px;
    color: #17283e;
    font-size: 12px;
}

.new-cp-floating-text span {
    display: block;
    color: #8794a5;
    font-size: 10px;
    line-height: 1.5;
}

/* TABLET */

@media (max-width: 950px) {
    .new-cp-section {
        padding: 75px 24px;
    }

    .new-cp-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: 35px;
    }

    .new-cp-preview {
        min-height: 420px;
    }

    .new-cp-document {
        width: 285px;
    }

    .new-cp-floating-card {
        right: -3px;
        bottom: 22px;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .new-cp-section {
        padding: 60px 20px;
    }

    .new-cp-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .new-cp-title {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .new-cp-description {
        font-size: 14px;
    }

    .new-cp-preview {
        min-height: 420px;
        margin-top: 0;
    }

    .new-cp-document {
        width: 280px;
        max-width: 76%;
    }

    .new-cp-bg-shape-one {
        width: 235px;
        height: 235px;
    }

    .new-cp-bg-shape-two {
        width: 145px;
        height: 145px;
        border-width: 22px;
    }

    .new-cp-floating-card {
        right: 0;
        bottom: 15px;
        padding: 12px;
    }

    .new-cp-buttons {
        gap: 10px;
    }

    .new-cp-button {
        flex: 1 1 auto;
        padding: 0 14px;
        font-size: 11px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .new-cp-title {
        font-size: 34px;
    }

    .new-cp-buttons {
        flex-direction: column;
    }

    .new-cp-button {
        width: 100%;
        min-height: 48px;
    }

    .new-cp-preview {
        min-height: 370px;
    }

    .new-cp-document {
        width: 250px;
    }

    .new-cp-floating-card {
        right: -3px;
    }
}







/* ==========================================
   NEW PRODUCT CATALOGUE SECTION
   Isolated CSS - Prefix: new-pc-
========================================== */

.new-pc-section,
.new-pc-section * {
    box-sizing: border-box;
}

.new-pc-section {
    position: relative;
    width: 100%;
    padding: 100px 24px;
    overflow: hidden;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

.new-pc-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 75px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* LEFT CONTENT */

.new-pc-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.new-pc-label {
    display: inline-block;
    margin-bottom: 20px;
    color: #087f8c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.new-pc-title {
    margin: 0;
    color: #17283e;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.new-pc-title span {
    display: block;
    color: #087f8c;
}

.new-pc-divider {
    width: 58px;
    height: 4px;
    margin: 25px 0;
    border-radius: 10px;
    background: #087f8c;
}

.new-pc-description {
    max-width: 470px;
    margin: 0 0 30px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.9;
}

/* CATALOGUE HIGHLIGHTS */

.new-pc-details {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 32px;
}

.new-pc-detail-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-pc-detail-number {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #cce4e7;
    border-radius: 8px;
    background: #e6f3f4;
    color: #087f8c;
    font-size: 13px;
    font-weight: 800;
}

.new-pc-detail-text h4 {
    margin: 0 0 6px;
    color: #17283e;
    font-size: 15px;
    font-weight: 700;
}

.new-pc-detail-text p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.7;
}

/* ACTION BUTTONS */

.new-pc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.new-pc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.new-pc-button-view {
    background: #087f8c;
    color: #ffffff;
}

.new-pc-button-view:hover {
    background: #075f69;
    color: #ffffff;
    transform: translateY(-2px);
}

.new-pc-button-download {
    background: #ffffff;
    border-color: #d9e1e9;
    color: #17283e;
}

.new-pc-button-download:hover {
    background: #eaf5f6;
    border-color: #087f8c;
    color: #087f8c;
    transform: translateY(-2px);
}

.new-pc-arrow {
    font-size: 18px;
    line-height: 1;
}

.new-pc-download-icon {
    font-size: 20px;
    line-height: 1;
}

/* FILE INFORMATION */

.new-pc-file-info {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8794a5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.new-pc-file-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #087f8c;
}

/* RIGHT PREVIEW */

.new-pc-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 490px;
    isolation: isolate;
}

.new-pc-bg-shape {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.new-pc-bg-shape-one {
    top: 10px;
    right: 0;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: #dcebed;
}

.new-pc-bg-shape-two {
    bottom: 10px;
    left: 0;
    width: 175px;
    height: 175px;
    border: 28px solid #e3e9ef;
    border-radius: 50%;
}

/* CATALOGUE MOCKUP */

.new-pc-document {
    position: relative;
    z-index: 1;
    width: 310px;
    max-width: 78%;
    padding: 19px;
    border: 1px solid #e7ebef;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(20, 40, 60, 0.15);
    transform: rotate(3deg);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.new-pc-document:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 32px 75px rgba(20, 40, 60, 0.2);
}

.new-pc-document-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
    color: #7b8796;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.new-pc-document-logo {
    color: #087f8c;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -1px;
}

.new-pc-cover {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #e8edf2;
}

.new-pc-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.new-pc-document-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 17px;
}

.new-pc-document-caption {
    display: block;
    margin-bottom: 6px;
    color: #8794a5;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.new-pc-document-footer h3 {
    margin: 0;
    color: #17283e;
    font-size: 13px;
    font-weight: 800;
}

.new-pc-pdf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 39px;
    height: 29px;
    padding: 0 7px;
    border-radius: 4px;
    background: #e5f3f4;
    color: #087f8c;
    font-size: 10px;
    font-weight: 800;
}

/* FLOATING LABEL */

.new-pc-floating-card {
    position: absolute;
    right: -8px;
    bottom: 38px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 10px);
    padding: 14px 16px;
    border: 1px solid #edf0f4;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(20, 40, 60, 0.12);
}

.new-pc-pdf-icon {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 44px;
    border-radius: 5px;
    background: #087f8c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.new-pc-floating-text {
    min-width: 0;
}

.new-pc-floating-text strong {
    display: block;
    margin-bottom: 5px;
    color: #17283e;
    font-size: 12px;
}

.new-pc-floating-text span {
    display: block;
    color: #8794a5;
    font-size: 10px;
    line-height: 1.5;
}

/* TABLET */

@media (max-width: 950px) {
    .new-pc-section {
        padding: 75px 24px;
    }

    .new-pc-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: 35px;
    }

    .new-pc-preview {
        min-height: 420px;
    }

    .new-pc-document {
        width: 285px;
    }

    .new-pc-floating-card {
        right: -3px;
        bottom: 22px;
    }
}

/* MOBILE */

@media (max-width: 700px) {
    .new-pc-section {
        padding: 60px 20px;
    }

    .new-pc-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .new-pc-title {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .new-pc-description {
        font-size: 14px;
    }

    .new-pc-preview {
        min-height: 420px;
    }

    .new-pc-document {
        width: 280px;
        max-width: 76%;
    }

    .new-pc-bg-shape-one {
        width: 235px;
        height: 235px;
    }

    .new-pc-bg-shape-two {
        width: 145px;
        height: 145px;
        border-width: 22px;
    }

    .new-pc-floating-card {
        right: 0;
        bottom: 15px;
        padding: 12px;
    }

    .new-pc-button {
        flex: 1 1 auto;
        padding: 0 14px;
        font-size: 11px;
    }
}

/* SMALL MOBILE */

@media (max-width: 380px) {
    .new-pc-title {
        font-size: 34px;
    }

    .new-pc-buttons {
        flex-direction: column;
    }

    .new-pc-button {
        width: 100%;
        min-height: 48px;
    }

    .new-pc-preview {
        min-height: 370px;
    }

    .new-pc-document {
        width: 250px;
    }

    .new-pc-floating-card {
        right: -3px;
    }
}