/* =====================================================
   NZOTA CARGO & TRADERS
   ABOUT.CSS - LIGHT CORPORATE
======================================================*/

.page-header{
    padding:44px 0 34px;
    background:var(--navy);
}

.page-header .eyebrow{
    color:var(--gold);
}

.page-header h1{
    color:#fff;
    font-size:clamp(1.9rem,3.4vw,2.6rem);
    margin-bottom:14px;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a{
    color:#B9C4DA;
}

.page-header .breadcrumb-item.active{
    color:#fff;
}

.page-header .breadcrumb-item+.breadcrumb-item::before{
    color:#5A6C8C;
}

/* Real Company Profile photography: a large primary shot with a smaller
   inset photo layered over its corner, echoing the profile's own
   "About Us" layout (one large image + supporting smaller ones). */
.about-photo-collage{
    position:relative;
    margin-bottom:40px;
}

.about-photo-main{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}

.about-photo-mini{
    position:absolute;
    right:-6%;
    bottom:-32px;
    width:52%;
    height:190px;
    object-fit:cover;
    border:4px solid #fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

/* Why Choose banner: the Company Profile's own "innovation" photo with a
   navy overlay so the heading stays legible and on-brand. */
.why-choose-banner{
    position:relative;
    padding:64px 0;
    background:url("../images/company-profile/why-choose-innovation.f1e3d2acdfa9.jpg") center/cover no-repeat;
    overflow:hidden;
}

.why-choose-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(160deg,rgba(8,26,51,.9),rgba(11,36,71,.78));
}

.why-choose-banner .container{
    position:relative;
}

.why-choose-banner .eyebrow{
    color:var(--gold);
}

.why-choose-banner h2{
    color:#fff;
    margin-bottom:0;
}

.mv-card{
    height:100%;
    padding:38px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.mv-card i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:18px;
    border-radius:14px;
    background:var(--navy);
    color:var(--gold);
    font-size:1.4rem;
}

.mv-card h3{
    margin-bottom:12px;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.value-item{
    text-align:center;
    padding:28px 20px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);
    transition:var(--transition);
}

.value-item:hover{
    box-shadow:var(--shadow-sm);
    transform:translateY(-3px);
}

.value-item i{
    font-size:1.6rem;
    color:var(--gold-dark);
    margin-bottom:12px;
    display:inline-block;
}

.value-item h4{
    margin-bottom:6px;
    font-size:1.05rem;
    color:var(--navy);
}

.value-item p{
    font-size:.9rem;
    margin-bottom:0;
}

.service-card .display-6{
    color:var(--gold-dark);
}

.lead{
    color:var(--text-body);
}

.section h1,
.section h2{
    margin-bottom:16px;
}

@media(max-width:992px){
    .values-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .about-photo-main{height:360px;}
}

@media(max-width:768px){
    .values-grid{grid-template-columns:1fr;}
    .service-card{padding:28px;}
    .about-photo-main{height:280px;}
    .about-photo-mini{width:48%;height:140px;right:0;bottom:-24px;}
    .about-photo-collage{margin-bottom:56px;}
    .why-choose-banner{padding:48px 0;}
}

.page-header{background:linear-gradient(110deg,var(--navy),#0B4D97);}
.mv-card i{background:var(--blue);}
.value-item i{color:var(--blue);}
.why-choose-banner{background-position:center;}