/* ===== Breadcrumb Section ===== */
 .ngbrc-breadcrumb-section {
     width: 100%;
     background: #fde6dc;
     padding: 20px 0 15px;
     position: relative;
     margin-top: 0px;
 }

 /* Container */
 .ngbrc-container {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Breadcrumb */
 .ngbrc-breadcrumb {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     font-size: 14px;
     color: #8a8f94;
     letter-spacing: 0.5px;
 }

 /* Links */
 .ngbrc-breadcrumb a {
     text-decoration: none;
     color: #000000;
     transition: 0.3s;
 }

 .ngbrc-breadcrumb a:hover {
     color: #00683b;
 }

 /* Separator */
 .ngbrc-sep {
     margin: 0 6px;
     color: #b5b5b5;
 }

 /* Current */
 .ngbrc-current {
     color: #00683b;
     font-weight: 600;
 }

 /* ===== MOBILE ===== */
 @media (max-width: 768px) {
     .ngbrc-breadcrumb-section {
         padding: 20px 0 10px;
     }
 }

 .ng-fibers-section {
     padding: 60px 0;
     background: #fff;
     font-family: 'Quicksand', sans-serif;
 }

 .ng-container {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* Title */
 .ng-title {
     text-align: center;
     font-size: 48px;
     font-weight: 600;
     margin-bottom: 30px;
 }

 /* Divider */
 .ng-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 30px;
     color: #00683b;
     font-weight: 600;
     font-size: 16px;
 }

 .ng-divider::before,
 .ng-divider::after {
     content: "";
     flex: 1;
     height: 1px;
     background: #ddd;
     margin: 0 10px;
 }

 /* Logos Desktop */
 .ng-logos {
     margin-bottom: 40px;
 }

 .ng-logos .swiper-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 50px;
 }

 .ng-logos img {
     max-height: 40px;
     opacity: 0.9;
 }

 /* Content */
 .ng-content {
     display: flex;
     align-items: flex-start;
     gap: 40px;
     padding: 30px 0;
 }

 .ng-text {
     flex: 1;
 }

 .ng-heading {
     font-size: 30px;
     font-weight: 700;
     margin-bottom: 20px;
 }

 .ng-sub-heading {
     font-size: 20px;
     font-weight: 700;
     color: #fa7516;
     margin-bottom: 20px;
 }

 .ng-text p {
     font-size: 17px;
     line-height: 1.7;
     color: #4a4a4a;
     font-weight: 500;
     margin-bottom: 15px;
 }

 .ng-image {
     flex: 1;
 }

 .ng-image img {
     width: 100%;
     border-radius: 4px;
 }

 /* ===== Custom List ===== */
 .ng-list {
     list-style: none;
     padding: 0;
     margin: 10px 0 20px;
 }

 /* List Items */
 .ng-list li {
     position: relative;
     padding-left: 22px;
     margin-bottom: 10px;
     font-size: 16px;
     color: #444;
     font-weight: 700px;
     line-height: 1.6;
 }

 /* Custom Bullet */
 .ng-list li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 8px;
     width: 8px;
     height: 8px;
     background: #ea5e20;
     border-radius: 50%;
 }

 /* Optional Hover Effect (premium feel) */
 .ng-list li:hover {
     color: #000;
 }

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

     .ng-title {
         font-size: 32px;
     }

     .ng-content {
         flex-direction: column;
     }

     /* Enable slider */
     .ng-logos .swiper-wrapper {
         gap: 0;
         justify-content: flex-start;
     }

     .ng-logos .swiper-slide {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .ng-logos img {
         max-height: 35px;
     }

 }


.na-product-section {
    padding: 60px 0;
    background: #ffffff;
    font-family: 'Quicksand', sans-serif;
}

.na-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Layout Wrapper - Sidebar on Right */
.na-layout-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Main Content Styling (Left) */
.na-main-content {
    flex: 1;
}

.na-image-box {
    width: 100%;
    margin-bottom: 25px;
}

.na-image-box img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.na-text-box {
    padding-top: 10px;     
}

.na-title {
    font-size: 34px;
    font-weight: 700;
    color: #004a2c; /* Nutra Agri Green */
    margin-bottom: 8px;
}

.na-tagline {
    font-size: 22px;
    font-weight: 700;
    color: #fa7516; /* Nutra Agri Orange */
    margin-bottom: 20px;
}

.na-description p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

/* Sidebar Container */
.na-sidebar {
    flex: 0 0 320px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden; /* Taaki header ke corners cut jayein agar radius ho */
}

/* Sidebar Heading Style */
.na-sidebar-header {
    background: #fa7516; /* Nutra Agri Dark Green */
    color: #fff;
    padding: 20px 25px;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* Sidebar Menu */
.na-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.na-menu li{
    margin-bottom: 5px;
}

/* Individual Items */
.na-menu-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 18px 25px;
    font-size: 18px;
    font-weight: 500;
    color: #555;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.3s ease;
}

.na-menu li:last-child .na-menu-item {
    border-bottom: none;
}

/* Sidebar Logo inside active item */
.na-sidebar-logo {
    max-height: 22px;
    margin-right: 10px;
    vertical-align: middle;
}

.na-item-text {
    vertical-align: middle;
}

/* Active State (Nutra Agri Orange) */
.na-menu-item.active {
    background: #fa7516 !important; /* Nutra Agri Orange */
    color: #ffffff !important;
    font-weight: 600;
    border-bottom: none;
}

/* Hover Effect */
.na-menu-item:hover:not(.active) {
    background: #fafafa;
    color: #fa7516;
    padding-left: 30px; /* Halka sa slide effect */
}

/* Responsive for Mobile */
@media (max-width: 991px) {
    .na-layout-wrapper {
        flex-direction: column;
    }

    .na-sidebar {
        flex: none;
        width: 100%;
    }

    .na-main-content {
        width: 100%;
    }
}


 /* ===== RESET ===== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* ===== BANNER ===== */
 .cs-banner {
     width: 100%;
     min-height: 400px;

     background-position: left center;
     background-size: cover;
     background-repeat: no-repeat;

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

     padding: 150px 8% 80px 8%;
     position: relative;
 }

 /* ===== RIGHT SIDE WHITE FADE ===== */
 .cs-banner::after {
     content: "";
     position: absolute;
     inset: 0;

     /* LEFT IMAGE visible, RIGHT TEXT readable */
     background: linear-gradient(to right, transparent 35%, rgba(255, 255, 255, 0.95));
 }

 /* ===== CONTENT ===== */
 .cs-content {
     position: relative;
     max-width: 550px;
     z-index: 2;
 }

 /* LOGO */
 .cs-logo {
     width: 160px;
     margin-bottom: 12px;
 }

 /* TITLE */
 .cs-content h1 {
     font-size: 34px;
     color: #1e2a38;
     margin-bottom: 12px;
     font-weight: 600;
 }

 /* COMPANY */
 .cs-company {
     font-size: 16px;
     font-weight: 600;
     color: #333;
     margin-bottom: 10px;
 }

 /* DESCRIPTION */
 .cs-desc {
     font-size: 16px;
     color: #555;
     line-height: 1.6;
     margin-bottom: 14px;
 }

 /* META */
 .cs-meta {
     font-size: 14px;
     color: #666;
     margin-bottom: 5px;
 }


 @media (max-width: 1024px) {

     .cs-banner {
         padding: 100px 6% 50px;
         min-height: 360px;
     }

     .cs-content {
         max-width: 480px;
     }

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

     .cs-logo {
         width: 140px;
     }
 }


 @media (max-width: 768px) {

     .cs-banner {
         justify-content: center;
         text-align: center;
         padding: 100px 20px 40px;
     }

     .cs-banner::after {
         background: rgba(255, 255, 255, 0.95);
     }

     .cs-content {
         max-width: 100%;
     }

     .cs-content h1 {
         font-size: 24px;
     }

     .cs-logo {
         width: 130px;
     }
 }

 @media (max-width: 480px) {

     .cs-content h1 {
         font-size: 20px;
     }

     .cs-desc {
         font-size: 12px;
     }

     .cs-meta {
         font-size: 10px;
     }
 }


 /* ===== SECTION BASE ===== */
 .study-section {
     background: #ffffff;
     padding: 60px 0;
 }

 /* CONTAINER */
 .container {
     width: 100%;
     max-width: 1200px;
     margin: auto;
 }

 /* TITLE */
 .section-title {
     font-size: 36px;
     color: #1e2a38;
     margin-bottom: 40px;
     font-weight: 600;
 }

 /* ===== OVERVIEW GRID ===== */
 .overview-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 25px;
 }

 /* CARDS */
 .card {
     background: #eaf3fb;
     padding: 25px;
     border-radius: 15px;
 }

 /* FULL WIDTH CARD */
 .card.full {
     grid-column: span 2;
 }

 /* CARD TITLE */
 .card h3 {
     font-size: 18px;
     margin-bottom: 10px;
     color: #1e2a38;
 }

 /* CARD TEXT */
 .card p {
     font-size: 16px;
     color: #555;
     line-height: 1.6;
 }

 /* ===== OBJECTIVES GRID ===== */
 .objectives-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
 }

 /* OBJECTIVE TITLES */
 .objectives-grid h3 {
     font-size: 18px;
     margin-bottom: 15px;
     color: #1e2a38;
 }

 /* ===== OBJECTIVES LIST (CUSTOM DOT) ===== */
 .objectives-grid ul {
     list-style: none;
     /* remove default bullets */
     padding-left: 0;
 }

 .objectives-grid li {
     position: relative;
     padding-left: 18px;
     /* space for dot */
     margin-bottom: 10px;
     font-size: 16px;
     color: #555;
 }

 /* 🔥 CIRCLE DOT */
 .objectives-grid li::before {
     content: "";
     width: 6px;
     height: 6px;
     background: #ea5e20;
     /* dark blue like your theme */
     border-radius: 50%;
     position: absolute;
     left: 0;
     top: 7px;
 }


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

     .section-title {
         font-size: 30px;
     }

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

     .card.full {
         grid-column: span 1;
     }

     .objectives-grid {
         grid-template-columns: 1fr;
         gap: 40px;
     }
 }

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

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

     .section-title {
         font-size: 24px;
         text-align: center;
     }

     .card {
         padding: 20px;
     }

     .card p,
     .objectives-grid li {
         font-size: 13px;
     }
 }




 /* ===== DEMOGRAPHICS SECTION ===== */
 .demographics-section {
     padding: 80px 0;

     /* Banner style blue gradient */
     background: linear-gradient(135deg,
             #eaf3fb 0%,
             #d8e9f8 40%,
             #c6e0f5 100%);
 }

 /* TITLE */
 .section-title {
     text-align: center;
     font-size: 36px;
     color: #1e2a38;
     margin-bottom: 50px;
 }

 /* GRID */
 .demo-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 /* BOX */
 .demo-box {
     text-align: center;
     padding: 20px;
 }

 /* BIG NUMBER */
 .demo-box h3 {
     font-size: 48px;
     color: #1e2a38;
     margin-bottom: 10px;
 }

 /* TITLE */
 .demo-box .title {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 8px;
 }

 /* DESCRIPTION */
 .demo-box span {
     font-size: 16px;
     color: #555;
 }

 /* FOOTER TEXT */
 .demo-footer {
     text-align: center;
     margin-top: 40px;
     font-size: 14px;
     color: #444;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
 }

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

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

     .demo-box h3 {
         font-size: 40px;
     }
 }

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

     .demographics-section {
         padding: 50px 20px;
     }

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

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

     .demo-box h3 {
         font-size: 32px;
     }

     .demo-box span {
         font-size: 12px;
     }
 }


 /* ===== SECTION ===== */
 .gsrs-section {
     background: #ffffff;
     padding: 80px 0;
 }

 /* CONTAINER */
 .gsrs-container {
     width: 90%;
     max-width: 1200px;
     margin: auto;

     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }

 /* ===== LEFT ===== */
 .gsrs-left {
     width: 55%;
 }

 /* TITLE */
 .gsrs-left h2 {
     font-size: 34px;
     color: #1e2a38;
     margin-bottom: 30px;
 }

 /* ITEM */
 .gsrs-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
 }

 /* NUMBER BOX */
 .number {
     width: 50px;
     height: 60px;
     background: #d8e9f8;

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

     font-size: 20px;
     font-weight: 600;
     color: #1e2a38;

     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     margin-right: 15px;
 }

 /* TEXT */
 .gsrs-item h3 {
     font-size: 16px;
     margin-bottom: 5px;
     color: #1e2a38;
 }

 .gsrs-item p {
     font-size: 15px;
     color: #555;
 }

 /* FOOTER */
 .gsrs-footer {
     margin-top: 20px;
     font-size: 16px;
     color: #555;
 }

 /* ===== RIGHT ===== */
 .gsrs-right {
     width: 45%;
     position: relative;
 }

 /* CURVED SHAPE LIKE PPT */
 .gsrs-right img {
     width: 100%;
     height: auto;
 }

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

     .gsrs-container {
         flex-direction: column;
         gap: 40px;
     }

     .gsrs-left,
     .gsrs-right {
         width: 100%;
     }

     .gsrs-left h2 {
         font-size: 28px;
         text-align: center;
     }
 }

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

     .gsrs-section {
         padding: 50px 20px;
     }

     .gsrs-left h2 {
         font-size: 22px;
     }

     .gsrs-item {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .number {
         margin-bottom: 10px;
     }

     .gsrs-right img {
         border-radius: 20px;
     }
 }




 .stool-section {
     background: linear-gradient(135deg,
             #eaf3fb 0%,
             #d8e9f8 40%,
             #c6e0f5 100%);
     padding: 80px 20px;
     font-family: 'Quicksand', sans-serif;
 }

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

 .section-title {
     text-align: center;
     font-size: 38px;
     font-weight: 600;
     color: #1c2b4a;
     margin-bottom: 60px;
 }

 /* GRID */
 .content-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }

 /* BOX DESIGN */
 .content-box {
     background: #ffffff;
     padding: 30px;
     border-radius: 12px;
     border: 1px solid #f0f0f0;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
     transition: 0.3s ease;
 }

 .content-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
 }

 /* HEADINGS */
 .content-box h3 {
     font-size: 22px;
     color: #1c2b4a;
     margin-bottom: 15px;
 }

 /* TEXT */
 .desc {
     font-size: 15px;
     color: #555;
     margin-bottom: 20px;
     line-height: 1.6;
 }

 /* LIST */
 .list {
     padding-left: 18px;
 }

 .list li {
     font-size: 15px;
     margin-bottom: 10px;
     color: #333;
 }

 /* HIGHLIGHT */
 .highlight {
     margin-top: 20px;
     padding: 15px;
     background: #f7f9fc;
     border-left: 4px solid #6fa8dc;
     border-radius: 6px;
     font-size: 14px;
     color: #333;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
     .section-title {
         font-size: 28px;
     }

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

     .content-box {
         padding: 20px;
     }
 }



 .gut-section {
     background: #ffffff;
     padding: 80px 20px;
     font-family: 'Quicksand', sans-serif;
 }

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

 /* LAYOUT */
 .gut-wrapper {
     display: flex;
     align-items: center;
     gap: 50px;
 }

 /* LEFT SIDE */
 .gut-content {
     flex: 1;
 }

 .gut-content h2 {
     font-size: 36px;
     color: #1c2b4a;
     margin-bottom: 30px;
 }

 /* BOX DESIGN */
 .info-box {
     background: #f6f8fb;
     border: 1px solid #d6e2f0;
     border-left: 5px solid #6fa8dc;
     border-radius: 10px;
     padding: 18px 20px;
     margin-bottom: 18px;
     transition: 0.3s ease;
 }

 .info-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
 }

 .info-box h4 {
     font-size: 16px;
     color: #1c2b4a;
     margin-bottom: 6px;
 }

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

 /* RIGHT IMAGE */
 .gut-image {
     flex: 1;
     position: relative;
 }

 .gut-image img {
     width: 100%;
     height: auto;
 }


 /* RESPONSIVE */
 @media (max-width: 992px) {
     .gut-wrapper {
         flex-direction: column;
     }

     .gut-image::before {
         display: none;
     }

     .gut-content h2 {
         font-size: 28px;
     }
 }



 .scfa-section {
     background: #ffffff;
     padding: 40px 20px 80px;
     font-family: 'Quicksand', sans-serif;
     text-align: center;
 }

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

 .section-title {
     font-size: 34px;
     color: #1c2b4a;
     margin-bottom: 50px;
 }

 /* GRID */
 .scfa-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* ONE ROW */
     gap: 40px;
 }

 /* ITEM */
 .scfa-item {
     text-align: center;
 }

 /* CIRCLE */
 .circle {
     width: 160px;
     height: 160px;
     margin: auto;
     border-radius: 50%;
     background: conic-gradient(#6fa8dc calc(var(--value) * 1%), #e6edf5 0%);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 /* INNER WHITE */
 .circle::before {
     content: "";
     position: absolute;
     width: 120px;
     height: 120px;
     background: #fff;
     border-radius: 50%;
 }

 /* TEXT */
 .circle span {
     position: relative;
     font-size: 22px;
     font-weight: 600;
     color: #1c2b4a;
 }

 /* LABELS */
 .label {
     margin-top: 15px;
     font-weight: 600;
     color: #1c2b4a;
 }

 .sub {
     font-size: 13px;
     color: #666;
     margin-top: 5px;
 }

 /* FOOTER TEXT */
 .footer-text {
     margin-top: 40px;
     font-size: 15px;
     color: #555;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
     .scfa-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .scfa-grid {
         grid-template-columns: 1fr;
     }
 }






 /* ================================
   SAFETY & TOLERABILITY
================================ */

 .safety-section {
     padding: 80px 0;
     background: linear-gradient(135deg,
             #eaf3fb 0%,
             #d8e9f8 40%,
             #c6e0f5 100%);
 }

 /* GRID */
 .safety-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }

 /* BOX */
 .safety-box h3 {
     font-size: 20px;
     margin-bottom: 10px;
     color: #1c2b4a;
 }

 .safety-box p {
     font-size: 16px;
     color: #555;
     margin-bottom: 10px;
 }

 /* 🔥 BULLETS FIX (CIRCLE DOTS) */
 .safety-box ul {
     list-style: none;
     padding-left: 0;
     margin-top: 10px;
 }

 .safety-box ul li {
     position: relative;
     padding-left: 18px;
     margin-bottom: 8px;
     font-size: 15px;
     color: #333;
 }

 .safety-box ul li::before {
     content: "";
     width: 6px;
     height: 6px;
     background: #ea5e20;
     border-radius: 50%;
     position: absolute;
     left: 0;
     top: 7px;
 }

 /* NOTE TEXT */
 .note {
     margin-top: 15px;
     font-size: 13px;
     color: #666;
 }

 /* BOTTOM BOXES */
 .bottom-grid {
     margin-top: 40px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .highlight-box {
     background: #e6edf5;
     padding: 18px 20px;
     border-radius: 12px;
 }

 .highlight-box h4 {
     margin-bottom: 5px;
     color: #1c2b4a;
 }

 .highlight-box p {
     font-size: 14px;
     color: #333;
 }

 /* ================================
   KEY CONCLUSIONS
================================ */

 .conclusion-section {
     padding: 80px 0;
     background: #fff;
 }

 /* GRID */
 .conclusion-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 25px;
     align-items: stretch;
     /* FIX ALIGNMENT */
 }

 /* CARD */
 .conclusion-card {
     border: 1px solid #d6e2f0;
     border-radius: 12px;
     padding: 25px 20px;
     position: relative;
     height: 100%;
     transition: 0.3s ease;

     display: flex;
     flex-direction: column;
     justify-content: flex-start;
 }

 .conclusion-card:hover {
     border-color: #6fa8dc;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
     transform: translateY(-4px);
 }

 /* 🔥 NUMBER FIX (VISIBLE + ALIGNED) */
 .scs-number {
     position: absolute;
     top: 12px;
     left: 18px;
     font-size: 13px;
     font-weight: 600;
     color: #6fa8dc;
     border-bottom: 2px solid #6fa8dc;
     padding-bottom: 20px;
 }

 /* TITLE */
 .conclusion-card h3 {
     font-size: 18px;
     color: #1c2b4a;
     margin-top: 20px;
     margin-bottom: 8px;
 }

 /* TEXT */
 .conclusion-card p {
     font-size: 15px;
     color: #555;
     line-height: 1.6;
 }

 /* STUDY BOX */
 .study-box {
     margin-top: 30px;
     background: #dbe8f6;
     padding: 15px 20px;
     border-radius: 10px;
     font-size: 14px;
     text-align: center;
     color: #1c2b4a;
 }

 /* ================================
   RESPONSIVE
================================ */

 @media (max-width: 992px) {
     .conclusion-grid {
         grid-template-columns: repeat(2, 1fr);
     }

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

 @media (max-width: 576px) {
     .conclusion-grid {
         grid-template-columns: 1fr;
     }

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






 /* ===============================
   BASE
=============================== */
 .nutra-about-wrapper {
     width: 100%;
     height: 500px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     margin-top: 90px;
 }

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

 .nutra-center {
     text-align: center;
 }

 /* ===============================
   HERO SECTION
=============================== */
 /* CONTENT */
 .nutra-about-hero {
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     align-items: center;
 }


 /* TEXT */
 .nutra-hero-title {
     color: #00683b;
     font-size: 42px;
     font-weight: 700;
     line-height: 1.3;
     max-width: 600px;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 }

 .nutra-hero-desc {
     color: #1c2b4a;
     margin-top: 18px;
     font-size: 16px;
     line-height: 1.6;
     max-width: 450px;
     text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
 }

 /* SCROLL ICON */
 .nutra-scroll-down {
     margin-top: 30px;
     font-size: 30px;
     opacity: 0.8;
 }

 /* ===============================
   STORY SECTION
=============================== */

 .nutra-section-title {
     font-size: 34px;
     color: #1c2b4a;
     margin-bottom: 20px;
 }

 .nutra-about-story p {
     font-size: 16px;
     color: #555;
     line-height: 1.8;
     margin-bottom: 15px;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
 }

 /* ===============================
   PRODUCT LIST (WITH DOT)
=============================== */
 .nutra-product-list {
     list-style: none;
     margin-top: 25px;
     padding: 0;
     display: inline-block;
     text-align: left;
 }

 .nutra-product-list li {
     position: relative;
     padding-left: 18px;
     margin-bottom: 10px;
     font-size: 14px;
     color: #333;
 }

 /* DOT */
 .nutra-product-list li::before {
     content: "";
     width: 6px;
     height: 6px;
     background: #0e6b9e;
     border-radius: 50%;
     position: absolute;
     left: 0;
     top: 8px;
 }

 /* ===============================
   CTA
=============================== */
 .nutra-cta-title {
     margin-top: 30px;
     font-size: 20px;
     font-weight: 600;
 }

 .nutra-cta-buttons {
     margin-top: 20px;
 }

 .nutra-btn {
     display: inline-block;
     padding: 10px 20px;
     background-color: #ea5e20;
     border: 2px solid #ea5e20;
     color: #fff;
     margin: 10px;
     border-radius: 5px;
     text-decoration: none;
     font-size: 14px;
     transition: 0.3s;
 }

 .nutra-btn:hover {
     background: #00683b;
     color: #fff;
     border: 2px solid #00683b;
 }

 /* OUTLINE BUTTON */
 .nutra-btn.outline {
     background: #00683b;
     border: 2px solid #00683b;
 }

 .nutra-btn.outline:hover {
     background: #ea5e20;
     border: 2px solid #ea5e20;
 }

 /* LINK */
 .nutra-link {
     display: block;
     margin-top: 15px;
     color: #0e6b9e;
     font-size: 14px;
     text-decoration: none;
 }

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

     .nutra-hero-title {
         font-size: 28px;
     }

     .nutra-hero-desc {
         font-size: 14px;
     }

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


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

 /* MAIN BACKGROUND */
 .ai-page-wrap {
     padding: 60px 20px;
     background: #ffffff;
     /* PURE WHITE */
     font-family: 'Quicksand', sans-serif;
 }

 /* HEADING */
 .ai-main-heading {
     text-align: center;
     font-size: 32px;
     margin-bottom: 40px;
     color: #1c2b4a;
 }

 /* LAYOUT */
 .ai-layout {
     display: grid;
     grid-template-columns: 280px 1fr;
     gap: 40px;
 }

 /* HEADING WRAPPER (RIGHT SIDE) */
 .ai-heading-wrap {
     margin-bottom: 25px;
 }

 /* HEADING */
 .ai-main-heading {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 28px;
     color: #1c2b4a;
     margin-bottom: 20px;
 }

 /* ICON */
 .ai-heading-icon {
     width: 30px;
     height: 30px;
 }

 /* BORDER LINE */
 .ai-heading-line {
     width: 100%;
     height: 2px;
     background: #e5e7eb;
 }

 /* =========================
   ACCORDION (LIGHT ORANGE)
========================= */
 .ai-accordion {
     margin-bottom: 20px;
     background: #fff7f2;
     /* very light orange */
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid #ffe3d6;
 }

 /* BUTTON */
 .ai-acc-btn {
     width: 100%;
     padding: 14px;
     text-align: left;
     background: #ffece3;
     /* soft orange */
     border: none;
     font-weight: 600;
     cursor: pointer;
     color: #d35400;
     transition: 0.3s;
 }

 .ai-acc-btn:hover {
     background: #ffd8c7;
 }

 .ai-acc-btn.active {
     background: #ffb899;
     color: #fff;
 }

 /* CONTENT */
 .ai-acc-content {
     display: none;
     padding: 10px 15px;
     background: #fffaf7;
 }

 .ai-acc-content.show {
     display: block;
 }

 /* LIST */
 .ai-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 0;
     font-size: 16px;
     color: #5a3e2b;
     cursor: pointer;
     transition: 0.3s;
 }

 .ai-list li:hover {
     color: #ff6a00;
     transform: translateX(4px);
 }

 /* =========================
   GRID CARDS
========================= */
 .ai-card {
     background: #ffffff;
     padding: 20px;
     border-radius: 10px;
     text-align: center;
     transition: 0.3s;
 }

 .ai-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(255, 140, 0, 0.1);
 }

 .ai-card img {
     width: 100%;
 }

 /* GRID */
 .ai-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
 }

 /* REMOVE DEFAULT LINK STYLE */
 .ai-list li a {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: #374151;
     padding: 0px 5px;
     border-radius: 6px;
     transition: 0.3s;
 }

 /* ICON */
 .ai-list li a img {
     width: 18px;
     height: 18px;
 }

 /* HOVER EFFECT */
 .ai-list li a:hover {
     background: #fff3eb;
     color: #ff6a00;
     transform: translateX(4px);
 }

 /* ACTIVE (OPTIONAL) */
 .ai-list li a.active {
     background: #ffe0cc;
     color: #ff6a00;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
     .ai-layout {
         grid-template-columns: 1fr;
     }

     /* RIGHT CONTENT FIRST */
     .ai-layout>div:nth-child(2) {
         order: 1;
     }

     /* ACCORDION SECOND */
     .ai-layout>div:nth-child(1) {
         order: 2;
     }

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


 /* ACCORDION BUTTON */
 .ai-acc-btn {
     position: relative;
     padding: 14px 40px 14px 14px;
     /* space for icon */
 }

 /* PLUS ICON */
 .ai-acc-btn::after {
     content: "+";
     position: absolute;
     right: 15px;
     font-size: 18px;
     font-weight: bold;
     color: #ff6a00;
     transition: 0.3s;
 }

 /* MINUS ICON */
 .ai-acc-btn.active::after {
     content: "−";
     color: #ffffff;
     font-size: 16px;
 }


 .fa-hero {
     /* background: linear-gradient(135deg, #e66a2c 0%, #2f7d4a 100%); */
     background: url(../images/molecular-inner-banner.webp) center center / cover no-repeat;
     padding: 80px 20px;
     text-align: left;
     margin-top: 90px;
 }

 .fa-hero-container {
     max-width: 1100px;
     margin: auto;
 }

 /* MAIN TITLE */
 .fa-hero-title {
     font-size: 64px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 20px;
     font-family: 'Quicksand', sans-serif;
 }

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

     /* MAIN TITLE */
     .fa-hero-title {
         font-size: 36px;
     }
 }

 /* SUBTITLE */
 .fa-hero-subtitle {
     font-size: 18px;
     color: #e6eef5;
     line-height: 1.6;
     max-width: 1050px;
     /* margin: auto; */
     font-family: 'Quicksand', sans-serif;
 }





 /* OVERLAY */
 .unw-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     display: none;
     /* important */
     align-items: center;
     justify-content: center;
     z-index: 999999;
     animation: unwFadeIn 0.3s ease;
 }

 /* MODAL */
 .unw-modal {
     background: #ffffff;
     padding: 30px 25px;
     border-radius: 12px;
     width: 420px;
     max-width: 90%;
     text-align: center;
     position: relative;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     animation: unwScale 0.3s ease;
 }

 /* CLOSE BUTTON */
 .unw-close {
     position: absolute;
     top: 10px;
     right: 12px;
     border: none;
     background: none;
     font-size: 32px;
     cursor: pointer;
     color: #f26522;
 }

 /* IMAGE */
 .unw-logo img {
     max-width: 220px;
     margin-bottom: 15px;
 }

 /* TEXT */
 .unw-text {
     font-size: 16px;
     color: #374151;
     margin-bottom: 20px;
     line-height: 1.5;
 }

 /* BUTTON */
 .unw-btn {
     display: inline-block;
     background: #f26522;
     color: #fff;
     padding: 10px 22px;
     border-radius: 6px;
     text-decoration: none;
     font-size: 14px;
     transition: 0.3s;
 }

 .unw-btn:hover {
     background: #094435;
     color: #fff;
 }

 /* ANIMATION */
 @keyframes unwFadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes unwScale {
     from {
         transform: scale(0.85);
         opacity: 0;
     }

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











 /* ========================
   FIBERPRIME UI (fpuni)
======================== */

 .fpuni-page {
     font-family: 'Quicksand', sans-serif;
     color: #1f2937;
 }

 /* container */
 .fpuni-container {
     width: 90%;
     max-width: 1200px;
     margin: auto;
 }

 /* HERO */
 .fpuni-hero {
     position: relative;
     padding: 100px 0;
     background: url('YOUR-HERO-IMAGE.jpg') center/cover no-repeat;
 }

 .fpuni-hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #0a7a3a, #0c5f2e);
     opacity: 0.9;
 }

 .fpuni-hero-wrap {
     position: relative;
     z-index: 2;
 }

 .fpuni-hero-content {
     max-width: 650px;
     color: #fff;
 }

 .fpuni-badge {
     background: rgba(255, 255, 255, 0.2);
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 12px;
 }

 .fpuni-hero h1 {
     font-size: 52px;
     margin: 20px 0;
 }

 .fpuni-hero h3 {
     font-size: 22px;
     margin-bottom: 15px;
 }

 .fpuni-hero p {
     font-size: 16px;
     line-height: 1.7;
 }

 .fpuni-hero-btns {
     margin-top: 25px;
 }

 .fpuni-btn-primary {
     background: #fff;
     color: #0a7a3a;
     padding: 12px 22px;
     border-radius: 8px;
     text-decoration: none;
     margin-right: 10px;
 }

 .fpuni-btn-outline {
     border: 1px solid #fff;
     color: #fff;
     padding: 12px 22px;
     border-radius: 8px;
     text-decoration: none;
 }

 /* ABOUT */
 .fpuni-about {
     padding: 60px 0;
 }

 .fpuni-about-grid {
     display: grid;
     grid-template-columns: 300px 1fr;
     gap: 30px;
 }

 /* BENEFITS */
 .fpuni-benefits {
     padding: 80px 0;
     background: #f7faf8;
 }

 .fpuni-head {
     text-align: center;
     margin-bottom: 40px;
 }

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

 .fpuni-card {
     background: #fff;
     padding: 25px;
     border-radius: 15px;
 }

 /* ADV */
 .fpuni-adv {
     padding: 70px 0;
 }

 .fpuni-adv-box {
     display: grid;
     grid-template-columns: 300px 1fr;
     gap: 30px;
     background: #f0f9f3;
     padding: 30px;
     border-radius: 15px;
 }

 /* APPLICATION */
 .fpuni-app {
     padding: 80px 0;
 }

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

 .fpuni-grid-app div {
     background: #fff;
     padding: 20px;
     text-align: center;
     border-radius: 12px;
 }

 /* CTA */
 .fpuni-cta {
     padding: 70px 0;
     background: #0a7a3a;
     color: #fff;
 }

 .fpuni-cta-wrap {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

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

     .fpuni-hero h1 {
         font-size: 32px;
     }

     .fpuni-about-grid,
     .fpuni-grid,
     .fpuni-grid-app,
     .fpuni-adv-box {
         grid-template-columns: 1fr;
     }

     .fpuni-cta-wrap {
         flex-direction: column;
         gap: 20px;
     }
 }



 @media (max-width: 768px) {
  .ng-title {
    display: none;
  }
  .ng-divider{
    display: none;
  }
  .ng-fibers-section {
    padding: 20px 0px;
  }
}