:root {
    --c2c-primary: #14532d;   /* deep green */
    --c2c-primary-dark: #0f3d21;
    --c2c-accent: #eaa942;    /* amber accent */
    --c2c-navy: #0f172a;
    --c2c-bg-alt: #f4f7f5;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1f2937;
}
h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'Poppins', sans-serif;
}

/* ===========================
        MODERN NAVBAR
=========================== */

.custom-navbar{

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(12px);

    box-shadow:0 5px 18px rgba(0,0,0,.15);

    padding:14px 0;

    transition:.3s;
}


/* logo */

.logo{
    width: 100px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
    transform: scale(1.4);
    transform-origin: left center;
}


/* brand */

.brand-text{

    display:flex;

    align-items:center;

    gap:10px;

    font-family:'Poppins',sans-serif;

    font-weight:700;

    color:#000000;

    font-size:1.2rem;
}

.brand-accent{

    color:var(--c2c-accent);
}

.brand-bd{

    color:#9be31c;

    font-size:1.05rem;
}


/* menu */

.navbar-nav{

    gap:8px;
}

.nav-link{

    color:#000000 !important;

    font-weight:500;

    padding:.65rem 1rem !important;

    border-radius:50px;

    transition:.25s;
}

.nav-link:hover{

    color:rgb(1, 27, 111) !important;

    background:rgba(255,255,255,.10);
}

.nav-link.active{

    background:var(--c2c-accent);

    color:white !important;
}


/* dropdown */

.dropdown-menu{

    border:none;

    border-radius:12px;

    padding:10px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.dropdown-item{

    border-radius:8px;

    padding:10px 16px;

    transition:.2s;
}

.dropdown-item:hover{

    background:var(--c2c-primary);

    color:white;
}


/* CTA */

.btn-warning{

    background:var(--c2c-accent);

    border:none;

    font-weight:600;

    transition:.3s;
}

.btn-warning:hover{

    transform:translateY(-2px);

    background:#b45309;
}


/* Mobile */

@media(max-width:991px){

.navbar-nav{

    margin-top:15px;

    gap:6px;
}

.nav-link{

    border-radius:10px;
}

.btn-warning{

    width:100%;

    margin-top:10px;
}

}

/*=================================
HERO SECTION
==================================*/

.hero{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    background-image: url("../images/hero-banner.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
    rgba(5,20,35,.65),
    rgba(5,20,35,.65)
);

}

.hero-content{

    position:relative;

    z-index:5;

    color:white;

    padding:90px 0;

}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:30px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    margin-bottom:25px;

    font-size:.95rem;

    letter-spacing:.5px;

}

.hero h1{

    font-family:'Poppins',sans-serif;

    font-size:4rem;

    font-weight:700;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-text{

    font-size:1.2rem;

    line-height:1.8;

    color:#f3f4f6;

    max-width:650px;

}

.hero-buttons{

    margin-top:35px;

}

.hero-buttons .btn{

    padding:14px 34px;

    border-radius:40px;

    font-weight:600;

    margin-right:12px;

    transition:.3s;

}

.hero-buttons .btn:hover{

    transform:translateY(-4px);

}

.hero-card{

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.2);

    border-radius:20px;

    padding:35px;

    color:white;

}

.hero-card h4{

    margin-bottom:20px;

}

.hero-card ul{

    list-style:none;

    padding:0;

}

.hero-card li{

    margin-bottom:15px;

    font-size:1.05rem;

}

@media(max-width:991px){

.hero{

min-height:75vh;

text-align:center;

}

.hero h1{

font-size:2.8rem;

}

.hero-buttons .btn{

margin-bottom:15px;

}

}

/* Page header (used on inner pages) */
.page-header {
    background-color: var(--c2c-bg-alt);
    border-bottom: 1px solid #e5e7eb;
    padding: 2.5rem 0;
    margin-bottom: 0;
}
.page-header h1 { color: var(--c2c-primary-dark); }

.section-alt { background-color: var(--c2c-bg-alt); }

/* Cards */
.card {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
}
.service-card { display: flex; }
.service-card .btn { margin-top: auto; }

/* Fiber thumbnails (swap for real photos: static/images/*.jpg) */
.fiber-thumb {
    height: 160px;
    border-radius: 0.75rem 0.75rem 0 0;
}
.fiber-jute { background: linear-gradient(135deg, #a16207, #ca8a04); }
.fiber-pineapple { background: linear-gradient(135deg, #ca8a04, #eab308); }
.fiber-banana { background: linear-gradient(135deg, #4d7c0f, #84cc16); }

/* Footer */
.footer {
    background-color: var(--c2c-navy);
    color: #cbd5e1;
}
.footer h5 { color: #fff; }
.footer-link { color: #cbd5e1; text-decoration: none; }
.footer-link:hover { color: var(--c2c-accent); }

/* Form inputs */
.form-control {
    border-radius: 0.5rem;
}

/* ===========================
   FEATURE CARDS
=========================== */

.feature-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

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

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

.feature-content{
    padding:25px;
}

.feature-content h3{
    font-weight:700;
    margin-bottom:15px;
    color:var(--c2c-navy);
}

.feature-content p{
    color:#6b7280;
    line-height:1.7;
    margin-bottom:20px;
}

/* ===========================================
            ABOUT PAGE
=========================================== */

/* Hero Section */

.about-hero{
    background:
    linear-gradient(rgba(10,28,43,.75),rgba(10,28,43,.75)),
    url("../images/banner.jpeg") center center/cover no-repeat;

    color:#fff;
    padding:140px 0;
}

.hero-small{
    display:inline-block;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    padding:10px 22px;
    border-radius:30px;
    margin-bottom:25px;
    font-weight:600;
    letter-spacing:.5px;
}

.about-hero h1{
    font-family:'Poppins',sans-serif;
    font-size:3.4rem;
    font-weight:700;
    line-height:1.2;
}

.about-hero p{
    font-size:1.15rem;
    max-width:650px;
    color:#f3f4f6;
    line-height:1.8;
}


/* Section Titles */

.section-tag{

    color:var(--c2c-accent);

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:10px;

    display:block;

}

.section-title{

    font-size:2.4rem;

    font-weight:700;

    color:var(--c2c-primary-dark);

    margin-bottom:20px;

}


/* Company Image */

.company-image{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.company-image img{

    width:100%;

    transition:.5s;

}

.company-image:hover img{

    transform:scale(1.05);

}


/* Info Cards */

.info-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

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

    transition:.35s;

    height:100%;

}

.info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.info-card h4{

    margin:20px 0;

    font-weight:700;

    color:var(--c2c-primary-dark);

}

.info-card p{

    color:#6b7280;

    line-height:1.8;

}

.info-card ul{

    padding-left:18px;

    margin:0;

}

.info-card li{

    margin-bottom:10px;

}


/* Circle Icon */

.icon-circle{

    width:75px;

    height:75px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--c2c-primary),var(--c2c-primary-dark));

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

}


/* Service Boxes */

.service-box{

    background:#fff;

    padding:35px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.service-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.service-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:var(--c2c-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin:auto;

    margin-bottom:25px;

}

.service-box h5{

    font-weight:700;

    margin-bottom:15px;

}

.service-box p{

    color:#6b7280;

}


/* Statistics */

.stats-section{

    background:linear-gradient(135deg,var(--c2c-primary),var(--c2c-primary-dark));

    color:white;

    padding:80px 0;

}

.stats-section h2{

    font-size:3rem;

    font-weight:700;

}

.stats-section p{

    font-size:1.1rem;

    opacity:.9;

}


/* CTA */

.cta-section{

    background:#f8fafc;

    padding:90px 0;

    text-align:center;

}

.cta-section h2{

    font-size:2.6rem;

    font-weight:700;

    margin-bottom:20px;

}

.cta-section p{

    max-width:700px;

    margin:auto;

    margin-bottom:35px;

    color:#6b7280;

    font-size:1.1rem;

}


/* Responsive */

@media(max-width:991px){

.about-hero{

padding:100px 0;

text-align:center;

}

.about-hero h1{

font-size:2.5rem;

}

.section-title{

font-size:2rem;

}

.stats-section h2{

font-size:2.3rem;

margin-top:25px;

}

}


.service-hero{

    position:relative;

    background:url("../images/hero-bg.jpeg") center/cover;

    padding:120px 0;

    color:white;

}

.service-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(8,33,52,.70);

}

.service-hero .container{

    position:relative;

    z-index:2;

}

.service-hero h1{

    font-size:3.2rem;

    font-weight:700;

    margin:20px 0;

}

.service-hero p{

    font-size:1.15rem;

    line-height:1.8;

}


.contact-banner{

background:url("../images/contactus.jpg") center/cover;

padding:120px 0;

position:relative;

color:white;

}

.contact-banner .overlay{

position:absolute;

inset:0;

background:rgba(0,40,60,.65);

}

.contact-banner .container{

position:relative;

z-index:2;

}

.contact-card{

background:white;

padding:40px;

border-radius:20px;

box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.contact-info{

padding:30px;

background:#14532d;

color:white;

border-radius:20px;

height:100%;

}

.info-box{

margin-bottom:25px;

padding-bottom:20px;

border-bottom:1px solid rgba(255,255,255,.2);

}

.contact-card input,

.contact-card textarea{

border-radius:10px;

padding:14px;

}

.training-hero{
padding:90px 0;
background:#f5f8f7;
}

.hero-badge{
background:#0d6b53;
color:#fff;
padding:8px 18px;
border-radius:30px;
display:inline-block;
margin-bottom:20px;
}

.feature-box{
background:white;
padding:35px;
text-align:center;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
height:100%;
}

.feature-box:hover{
transform:translateY(-8px);
}

.training-section{
padding:80px 0;
background:#eef6f3;
}

.program-card{
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
height:100%;
transition:.3s;
border-top:5px solid #0d6b53;
}

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

.timeline{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    margin-top:50px;
    flex-wrap:wrap;
}

.timeline::before{
    content:'';
    position:absolute;
    top:35px;
    left:8%;
    width:84%;
    height:4px;
    background:#d6e6df;
    z-index:0;
}

.timeline-step{
    position:relative;
    text-align:center;
    width:18%;
    z-index:2;
}

.circle{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#0d6b53;
    color:white;
    font-size:28px;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.timeline-step h6{
    margin-top:15px;
    font-weight:600;
    color:#17324d;
}

@media(max-width:768px){

.timeline{
    flex-direction:column;
}

.timeline::before{
    display:none;
}

.timeline-step{
    width:100%;
    margin-bottom:35px;
}

}

.step-box h5{
font-size:15px;
margin-top:8px;
color:white;
}

.training-cta{
padding:80px 0;
background:linear-gradient(135deg,#0d6b53,#0b4e3f);
color:white;
}


.fiber-hero{
    padding:90px 0;
    background:#f7faf7;
}

.fiber-section{
    padding:80px 0;
    background:#eef7f1;
}

.fiber-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
    height:100%;
}

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

.fiber-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.fiber-content{
    padding:25px;
}

.application-card{
    background:white;
    padding:40px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    font-size:50px;
    transition:.3s;
}

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

.application-card h5{
    margin-top:20px;
}

.fiber-cta{
    padding:80px 0;
    color:white;
    background:linear-gradient(135deg,#0d6b53,#2f7d32);
}


.hero-fiber{
padding:70px 0;
}

.hero-badge{
display:inline-block;
background:#0b6b53;
color:#fff;
padding:8px 18px;
border-radius:50px;
font-weight:600;
}

.feature-card{
background:#fff;
padding:35px 25px;
border-radius:18px;
text-align:center;
height:100%;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
}

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

.feature-icon{
width:75px;
height:75px;
background:#0b6b53;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
margin:auto auto 20px;
color:white;
}

.fiber-image{
height:260px;
object-fit:cover;
}

.card{
border-radius:20px;
overflow:hidden;
transition:.3s;
}

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

.application-card{
background:white;
padding:35px;
border-radius:18px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}

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

.cta-box{
background:linear-gradient(135deg,#0b6b53,#1d8b6b);
color:white;
padding:70px;
border-radius:25px;
text-align:center;
box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.cta-box .btn{
padding:12px 35px;
font-weight:600;
}

/* =========================================
   TRAINING PAGE
========================================= */

.training-hero {
    padding: 80px 0;
    background: linear-gradient(
        135deg,
        #f3f8f6 0%,
        #ffffff 55%,
        #eef7f2 100%
    );
}

.training-hero h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #073b35;
    margin: 20px 0;
}

.training-hero p {
    font-size: 18px;
    line-height: 1.7;
    color: #52605d;
    max-width: 650px;
}

.training-hero img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}


/* Badge */

.hero-badge,
.section-badge {
    display: inline-block;
    background: #087f68;
    color: white;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}


/* =========================================
   FEATURE BOXES
========================================= */

.feature-box {
    height: 100%;
    text-align: center;
    padding: 30px 20px;
    background: white;
    border-radius: 18px;
    border: 1px solid #e7ecea;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);
}

.feature-icon {
    font-size: 42px;
    margin-bottom: 15px;
}

.feature-box h5 {
    color: #073b35;
    font-weight: 600;
}

.feature-box p {
    color: #66736f;
    margin-bottom: 0;
}


/* =========================================
   TRAINING PROGRAMS
========================================= */

.training-section {
    padding: 80px 0;
    background: #f5f8f7;
}

.training-section h2,
.documentation-section h2 {
    color: #073b35;
    font-weight: 700;
    margin-top: 15px;
}

.program-card {
    height: 100%;
    padding: 30px;
    background: white;
    border-radius: 18px;
    border: 1px solid #e5ebe8;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.program-card:hover {
    transform: translateY(-6px);
    border-color: #0b8068;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.09);
}

.program-icon {
    font-size: 36px;
    margin-bottom: 15px;
}

.program-card h4 {
    color: #073b35;
    font-weight: 600;
}

.program-card p {
    color: #66736f;
    line-height: 1.7;
    margin-bottom: 0;
}


/* =========================================
   LIST OF TRAINING
========================================= */

.training-list-card {
    height: 100%;
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e2e9e6;
    border-radius: 18px;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.training-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-color: #0b8068;
}

.training-list-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.training-list-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7f5ef;
    border-radius: 14px;
    font-size: 25px;
}

.training-list-header h4 {
    margin: 0;
    color: #073b35;
    font-weight: 600;
}

.training-list-card ul {
    margin: 0;
    padding-left: 20px;
}

.training-list-card li {
    margin-bottom: 11px;
    color: #4f5d59;
    line-height: 1.5;
}

.training-list-card li::marker {
    color: #087f68;
}


/* =========================================
   CUSTOM TRAINING NOTE
========================================= */

.training-custom-note {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px 30px;
    background: #fff8e8;
    border-left: 5px solid #f2a51a;
    border-radius: 12px;
}

.note-icon {
    font-size: 30px;
}

.training-custom-note h5 {
    color: #073b35;
    margin-bottom: 6px;
}

.training-custom-note p {
    margin: 0;
    color: #5d625f;
    line-height: 1.6;
}


/* =========================================
   DOCUMENTATION SECTION
========================================= */

.documentation-section {
    padding: 80px 0;
    background: #f5f8f7;
}

.documentation-section > .container > .text-center p {
    max-width: 750px;
    margin: 15px auto 0;
    color: #65716d;
}

.document-card {
    height: 100%;
    padding: 28px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e3e9e6;
    transition: all 0.3s ease;
}

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

.document-icon {
    font-size: 35px;
    margin-bottom: 15px;
}

.document-card h5 {
    color: #073b35;
    font-weight: 600;
}

.document-card p {
    color: #66736f;
    line-height: 1.6;
    margin-bottom: 0;
}


/* Employee Survey */

.survey-box {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 30px;
    background: white;
    border-radius: 18px;
    border: 1px solid #dfe8e4;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.survey-icon {
    width: 65px;
    height: 65px;
    min-width: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7f5ef;
    border-radius: 16px;
    font-size: 32px;
}

.survey-box h4 {
    color: #073b35;
    margin-bottom: 8px;
}

.survey-box p {
    margin: 0;
    color: #66736f;
    line-height: 1.6;
}


/* =========================================
   TIMELINE
========================================= */

.timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 1000px;
    margin: auto;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #087f68;
    z-index: 0;
}

.timeline-step {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 18%;
}

.circle {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #087f68;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 700;
    border: 5px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.timeline-step h6 {
    color: #073b35;
    font-weight: 600;
}

.timeline-step p {
    font-size: 13px;
    color: #71807b;
}


/* =========================================
   CTA
========================================= */

.training-cta {
    padding: 80px 20px;
    background: linear-gradient(
        135deg,
        #07543f,
        #087f68
    );
    color: white;
}

.training-cta h2 {
    font-size: 38px;
    font-weight: 700;
    margin: 20px 0 15px;
}

.training-cta p {
    font-size: 17px;
    opacity: 0.9;
    margin-bottom: 25px;
}

.section-badge.light {
    background: rgba(255, 255, 255, 0.15);
}


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

@media (max-width: 768px) {

    .training-hero {
        padding: 55px 0;
    }

    .training-hero h1 {
        font-size: 36px;
    }

    .training-hero img {
        margin-top: 35px;
    }

    .timeline {
        display: block;
    }

    .timeline::before {
        display: none;
    }

    .timeline-step {
        width: 100%;
        margin-bottom: 30px;
    }

    .survey-box {
        align-items: flex-start;
    }

    .training-cta h2 {
        font-size: 30px;
    }

}

/* Natural Products */

.natural-products-section {
    background: #ffffff;
}

.natural-product-card {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.natural-product-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.natural-product-card:hover img {
    transform: scale(1.05);
}