/* Banner Styling */
.detail-banner {
    height: 560px;
    background-size: cover;
    background-position: center right;
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
    /* align-items: flex-end;
    padding-bottom: 60px;  */
    border-bottom: 5px solid #F4B000;
}
.detail-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.00));
}
.banner-content {
    position: relative;
    z-index: 2;
    margin-left: 140px;   
    max-width: 650px;
}
/* Orange Line */
.orange-line {
    width: 70px;
    height: 4px;
    background-color: #F4B000;
    /* margin-bottom: 15px; */
}
/* Title */
.banner-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
}
/* Breadcrumb */
.breadcrumb-custom {
    display: flex;
    gap: 10px;
    font-size: 20px;
    font-weight: 400;
    align-items: center;
    margin-top: 10px;
}
.breadcrumb-custom a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}
.breadcrumb-custom a:hover {
    color: #F4B000;
}
.breadcrumb-custom span {
    opacity: 0.7;
    font-size: 20px;
}
/* SECTION BACKGROUND */
.service-detail-wrapper {
    background-image: url('assets/bg/service-detail-bg.webp');
    background-size: cover;
    background-position: center;
    padding: 10px 0;
}
/* MAIN WHITE BOX (LEFT) */
.detail-box {
    background: #ffffff;
    padding: 45px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.10);
    border: 1px solid #e9e9e9;
    transition: 0.3s ease;
}
.detail-box:hover {
    box-shadow: 0 14px 32px rgba(0,0,0,0.15);
}
.detail-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #012241;
}
/* Typography improvements */
.detail-content p,
.detail-content ul li {
    font-size: 17px;
    color: #444;
    line-height: 1.8;
}
.detail-content ul {
    margin-top: 15px;
    padding-left: 20px;
}
/* SIDEBAR BOX */
.sidebar-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    border: 1px solid #e6e6e6;
    transition: 0.3s ease;
}
.sidebar-box:hover {
    box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}
.sidebar-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #012241;
    border-left: 4px solid #F4B000; 
    padding-left: 10px;
}
/* SIDEBAR LINKS */
.sidebar-list {
    padding: 0;
    list-style: none;
}
.sidebar-list li {
    margin-bottom: 12px;
}
.sidebar-list li a {
    display: block;
    padding: 12px 14px;
    background: #f7f7f7;
    border-radius: 6px;
    color: #012241;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #e1e1e1;
    transition: 0.3s ease;
}
/* ORANGE active link for current page */
.sidebar-list li a.active-service {
    background: #F4B000;
    color: #fff;
    border-color: #F4B000;
}
/* GREEN Hover effect */
.sidebar-list li a:hover {
    background: #1ebd45;     
    color: #fff;
    border-color: #1ebd45;
    transform: translateX(6px);
}
/* MOBILE */
@media(max-width: 768px){
    .detail-box, .sidebar-box {
        padding: 25px;
    }
    .detail-title {
        font-size: 26px;
    }
     .detail-banner {
        height: 260px;
        padding-bottom: 30px;
        align-items: flex-end;
    }
    .banner-content {
        margin-left: 25px;
        text-align: left;
    }
    .banner-content h1 {
        font-size: 30px;
    }
    .breadcrumb-custom {
        font-size: 14px;
    }
}
.service-detail-inner h5{
    margin-top: 25px;
    font-weight: 700;
    color: #012241;
}
.service-detail-inner p{
    line-height: 1.8;
}
/* PRODUCT CARD */
.product-card{
    display:flex;
    align-items:stretch;
    border: 2px solid #F4B000;
    background:#fff;
    text-decoration:none;
    color:#000;
    min-height:130px;
    transition:0.3s ease;
}
/* LEFT NUMBER */
.product-number{
    font-size:42px;
    font-weight:700;
    color:#f2f2f2;
    min-width:90px;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* PRODUCT NAME */
.product-name{
    flex:1;
    display:flex;
    align-items:center;
    font-size:20px;
    font-weight:600;
    line-height:1.4;
    padding-right:20px;
    display:-webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;                
    -webkit-box-orient:vertical;
    overflow:hidden;
    padding-top: 40px;
    padding-bottom: 30px;
}
/* VIEW DETAIL – NORMAL (WHITE) */
.product-link{
    background:#fff;              
    color:#000;
    min-width:130px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:600;
    border-left:1px solid #F4B000; 
    transition:0.3s ease;
}
/* Arrow icon */
.product-link::before{
    content:"»";
    font-size:26px;
    margin-bottom:6px;
}
/* CARD HOVER */
.product-card:hover{
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
    transform:translateY(-3px);
}
.product-card:hover .product-link{
    background:#F4B000;
    color:#fff;
}
/* =========================
   PRODUCT CARD – MOBILE FIX */
@media (max-width: 768px){
    .product-card{
        min-height: 110px;
    }
    /* Light number */
    .product-number{
        font-size: 34px;
        min-width: 60px;
    }
    /* Product name */
    .product-name{
        font-size: 16px;          
        font-weight: 600;
        line-height: 1.3;
        padding: 0 10px;
        padding-top: 40px; 
        display: -webkit-box;
        -webkit-line-clamp: 2;    
        line-clamp: 2;                 
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
    }
    /* View Detail box */
    .product-link{
        min-width: 95px;
        font-size: 13px;
    }
    .product-link::before{
        font-size: 20px;
        margin-bottom: 3px;
    }
}
/* EXTRA SMALL DEVICES */
@media (max-width: 480px){
    .product-name{
        font-size: 15px;
    }
    .product-number{
        font-size: 28px;
    }
    .product-link{
        min-width: 85px;
        font-size: 12px;
    }
}
/* SERVICE SECTION */
.service-content-wrap{
    margin-bottom: 60px;
}
/* TEXT CARD */
.service-text-card{
    background:#ffffff;
    padding:45px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
/* TITLE */
.service-title{
    font-size:36px;
    font-weight:700;
    color:#012241;
    margin-bottom:16px;
}
/* INTRO */
.service-intro{
    font-size:18px;
    line-height:1.7;
    color:#555;
    margin-bottom:30px;
}
/* SUBTITLE */
.service-subtitle{
    font-size:20px;
    font-weight:700;
    margin-bottom:15px;
    color:#012241;
}
/* BULLET LIST */
.service-points{
    padding-left:18px;
}
.service-points li{
    font-size:16px;
    margin-bottom:10px;
    color:#444;
}
/* IMAGE */
.service-image-wrap img{
    width:100%;
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}
/* MOBILE */
@media(max-width:768px){
    .service-text-card{
        padding:30px;
    }
    .service-title{
        font-size:26px;
    }
    .service-intro{
        font-size:16px;
    }
}
/* SERVICE IMAGE BOX */
.service-image-box{
    width: 100%;
    max-width: 520px;        
    margin-left: auto;      
}
/* IMAGE SIZE CONTROL */
.service-image-box img{
    width: 100%;
    height: 360px;          
    object-fit: cover;      
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
/* TABLET */
@media (max-width: 992px){
    .service-image-box{
        max-width: 100%;
    }
    .service-image-box img{
        height: 300px;
    }
}
/* MOBILE */
@media (max-width: 768px){
    .service-image-box{
        margin-left: 0;
        margin-top: 20px;
    }
    .service-image-box img{
        height: 240px;
    }
}
/* LINE + HEADING INLINE */
.banner-heading{
    display: flex;
    align-items: center;
    gap: 15px;
}
.banner-heading h1{
    margin: 0;
    font-size: 48px;
    font-weight: 700;
}
/* ORANGE LINE */
.orange-line{
    width: 60px;
    height: 4px;
    background-color: #F4B000;
    /* margin-top: 16px; */
}
/* MOBILE */
@media(max-width:768px){
    .banner-heading h1{
        font-size: 28px;
    }
    .orange-line{
        width: 40px;
    }
}
/* SERVICE TITLE INLINE */
.service-title-wrap{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
/* GREEN LINE */
.service-line{
    width: 70px;
    height: 3px;
    background-color: #1E8E3E; 
}
/* TITLE TEXT */
.service-title{
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    color: #1E8E3E; 
}
/* MOBILE */
@media(max-width:768px){
    .service-line{
        width: 45px;
    }
    .service-title{
        font-size: 24px;
    }
}

/* ================================
   IMPURITIES SECTION STYLES
================================ */
.impurity-section {
    max-width: 1000px;
    margin: 0 auto;
}
.impurity-section h3 {
    font-size: 30px;
    font-weight: 600;
    text-align: left;
}

/* Search box wrapper */
.impurity-search-wrap {
    max-width: 1000px;      
    margin: 0 auto 20px auto;
}

/* Table wrapper (controls WIDTH) */
.impurity-table-wrap {
    max-width: 1100px;   /* reduce table width */
    margin: 0 auto 30px auto;
}

/* Table base */
.impurity-ref-table {
    width: 100%;
    border-collapse: collapse;
}

/* Table header */
.impurity-ref-table th {
    background: #f2f2f2;
    font-weight: 600;
    text-align: center;
    font-size: 18px;
    padding: 12px;
    vertical-align: middle;
}

/* Table cells */
.impurity-ref-table td {
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    padding: 12px;
}

/* Left align impurity name */
.impurity-ref-table td:nth-child(2) {
    text-align: left;
}

/* API name row */
.api-row td {
    background: #f8f9fa;
    font-weight: 700;
    font-size: 17px;
    text-align: center !important;
    color: #012241;
    letter-spacing: 0.5px;
}

/* S.No */
.impurity-ref-table th:nth-child(1),
.impurity-ref-table td:nth-child(1) {
    width: 80px;
}

/* API / Impurity name */
.impurity-ref-table th:nth-child(2),
.impurity-ref-table td:nth-child(2) {
    width: auto;
}

/* CAS No – wider */
.impurity-ref-table th:nth-child(3),
.impurity-ref-table td:nth-child(3) {
    width: 220px;          }


/* ================================
   MOBILE RESPONSIVE
================================ */
@media (max-width: 992px) {
    .impurity-section,
    .impurity-search-wrap,
    .impurity-table-wrap {
        max-width: 100%;
        padding: 0 10px;
    }

    .impurity-ref-table th,
    .impurity-ref-table td {
        font-size: 15px;
        /* padding: 10px; */
    }
}