/* ====================================
   About Page Base Styles
==================================== */

:root{
    --about-primary:#214f99;
    --about-primary-dark:#183c75;
    --about-accent:#5e832a;
    --about-text:#1f2933;
    --about-muted:#5f6b7a;
    --about-light:#f5f7fa;
    --about-border:#dfe5ec;
    --about-white:#ffffff;
    --about-shadow:0 12px 30px rgba(15,23,42,.08);
    --about-shadow-hover:0 18px 42px rgba(15,23,42,.12);
}

.section-title{
    font-size:48px;
    font-weight:800;
    line-height:1.18;
    margin:0 0 20px;
    text-align:center;
    color:var(--about-text);
}

.section-subtitle{
    max-width:800px;
    margin:0 auto 56px;
    text-align:center;
    color:var(--about-muted);
    line-height:1.8;
}

.section-tag{
    display:inline-block;
    margin-bottom:18px;
    padding:8px 16px;
    background:#eef3f9;
    color:var(--about-primary);
    border:1px solid #d8e3f1;
    border-radius:6px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

/* ====================================
   About Hero Section
==================================== */

.about-hero{
    position:relative;
    padding:150px 0;
    background:
        linear-gradient(rgba(10,18,30,.74),rgba(10,18,30,.74)),
        url('../images/about-hero.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:var(--about-white);
    text-align:center;
}

.about-hero h1{
    margin:18px 0;
    font-size:62px;
    font-weight:800;
    line-height:1.14;
    color:var(--about-white);
    animation:fadeUp .7s ease both;
}

.about-hero p{
    max-width:850px;
    margin:0 auto;
    font-size:20px;
    line-height:1.8;
    color:rgba(255,255,255,.92);
    animation:fadeUp .8s ease both;
}

/* ====================================
   Overview Section
==================================== */

.company-overview{
    padding:110px 0;
    background:var(--about-white);
}

.about-layout{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:56px;
    align-items:start;
}

.about-content h2{
    margin:0 0 24px;
    font-size:46px;
    font-weight:800;
    line-height:1.2;
    color:var(--about-text);
}

.about-content p{
    margin:0 0 20px;
    color:var(--about-muted);
    line-height:1.9;
}

.overview-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    margin-top:48px;
}

.stat-box{
    padding:34px 26px;
    background:var(--about-light);
    border:1px solid var(--about-border);
    border-radius:8px;
    text-align:center;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.stat-box:hover{
    transform:translateY(-5px);
    border-color:#c9d6e6;
    box-shadow:var(--about-shadow);
}

.stat-box h3{
    margin:0 0 10px;
    font-size:40px;
    font-weight:800;
    line-height:1;
    color:var(--about-primary);
}

.stat-box p{
    margin:0;
    color:var(--about-muted);
}

/* ====================================
   About Sidebar Section
==================================== */

.left-sidebar{
    position:sticky;
    top:120px;
    align-self:start;
}

.company-sidebar{
    width:100%;
}

.sidebar-widget{
    margin-bottom:24px;
    padding:28px;
    background:var(--about-white);
    border:1px solid var(--about-border);
    border-radius:8px;
    box-shadow:var(--about-shadow);
}

.sidebar-widget h3{
    margin:0 0 18px;
    font-size:22px;
    font-weight:700;
    color:var(--about-primary);
}

.sidebar-widget p{
    margin:0 0 20px;
    color:var(--about-muted);
    line-height:1.7;
}

.sidebar-widget ul,
.sidebar-navigation ul{
    margin:0;
    padding:0;
    list-style:none;
}

.sidebar-widget li,
.sidebar-navigation li{
    margin-bottom:10px;
}

.sidebar-widget a{
    color:var(--about-text);
    font-weight:500;
    text-decoration:none;
    transition:color .25s ease, background-color .25s ease, transform .25s ease;
}

.sidebar-navigation a{
    display:block;
    padding:12px 14px;
    border-radius:6px;
}

.sidebar-widget a:hover{
    color:var(--about-primary);
}

.sidebar-navigation a:hover{
    background:var(--about-primary);
    color:var(--about-white);
    transform:translateX(3px);
}

.sidebar-btn{
    display:inline-block;
    width:100%;
    padding:14px 20px;
    background:var(--about-primary);
    color:var(--about-white) !important;
    border-radius:6px;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    transition:background-color .25s ease, transform .25s ease;
}

.sidebar-btn:hover{
    background:var(--about-primary-dark);
    transform:translateY(-2px);
}

/* ====================================
   Business Divisions Section
==================================== */

.verticals-section{
    padding:110px 0;
    background:var(--about-light);
}

.verticals-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    margin-top:56px;
}

.vertical-card{
    padding:38px;
    background:var(--about-white);
    border:1px solid var(--about-border);
    border-top:4px solid var(--about-primary);
    border-radius:8px;
    box-shadow:var(--about-shadow);
    transition:transform .25s ease, box-shadow .25s ease;
}

.vertical-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--about-shadow-hover);
}

.vertical-card i{
    margin-bottom:20px;
    font-size:40px;
    color:var(--about-primary);
}

.vertical-card h3{
    margin:0 0 14px;
    font-size:24px;
    font-weight:700;
    color:var(--about-text);
}

.vertical-card p{
    margin:0;
    color:var(--about-muted);
    line-height:1.8;
}

/* ====================================
   Timeline Section
==================================== */

.history-section{
    padding:110px 0;
    background:var(--about-white);
}

.timeline{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
    margin-top:56px;
}

.timeline-item{
    padding:30px;
    background:var(--about-white);
    border:1px solid var(--about-border);
    border-top:4px solid var(--about-accent);
    border-radius:8px;
    box-shadow:var(--about-shadow);
    transition:transform .25s ease, box-shadow .25s ease;
}

.timeline-item:hover{
    transform:translateY(-6px);
    box-shadow:var(--about-shadow-hover);
}

.timeline-year{
    display:inline-block;
    margin-bottom:18px;
    padding:9px 16px;
    background:var(--about-primary);
    color:var(--about-white);
    border-radius:6px;
    font-weight:700;
}

.timeline-item h3{
    margin:0 0 14px;
    color:var(--about-text);
}

.timeline-item p{
    margin:0;
    color:var(--about-muted);
    line-height:1.8;
}

/* ====================================
   Vision Mission Section
==================================== */

.vision-mission{
    padding:110px 0;
    background:var(--about-light);
}

.vm-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}

.vm-card{
    padding:48px;
    background:var(--about-white);
    border:1px solid var(--about-border);
    border-radius:8px;
    box-shadow:var(--about-shadow);
    text-align:center;
}

.vm-card i{
    margin-bottom:20px;
    font-size:48px;
    color:var(--about-primary);
}

.vm-card h3{
    margin:0 0 18px;
    font-size:30px;
    font-weight:700;
    color:var(--about-text);
}

.vm-card p{
    margin:0;
    color:var(--about-muted);
    line-height:1.8;
}

/* ====================================
   Values Section
==================================== */

.values-section{
    padding:110px 0;
    background:var(--about-white);
}

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

.value-card{
    padding:38px 28px;
    background:var(--about-white);
    border:1px solid var(--about-border);
    border-radius:8px;
    box-shadow:var(--about-shadow);
    text-align:center;
    transition:transform .25s ease, box-shadow .25s ease;
}

.value-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--about-shadow-hover);
}

.value-card i{
    margin-bottom:20px;
    font-size:42px;
    color:var(--about-accent);
}

.value-card h3{
    margin:0;
    font-size:23px;
    font-weight:700;
    color:var(--about-text);
}

/* ====================================
   Team Section
==================================== */

.team-section{
    padding:110px 0;
    background:var(--about-light);
    text-align:center;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:28px;
    margin-top:56px;
}

.team-card{
    overflow:hidden;
    background:var(--about-white);
    border:1px solid var(--about-border);
    border-radius:8px;
    box-shadow:var(--about-shadow);
    transition:transform .25s ease, box-shadow .25s ease;
}

.team-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--about-shadow-hover);
}

.team-card.featured,
.featured{
    border:2px solid var(--about-primary);
}

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

.team-card h3{
    margin:20px 15px 8px;
    font-size:22px;
    font-weight:700;
    color:var(--about-text);
}

.team-card span{
    display:block;
    padding:0 15px 24px;
    color:var(--about-primary);
    font-weight:700;
}

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

.about-cta{
    padding:110px 0;
    background:var(--about-primary);
    color:var(--about-white);
    text-align:center;
}

.about-cta h2{
    margin:0 0 18px;
    font-size:50px;
    font-weight:800;
    line-height:1.18;
    color:var(--about-white);
}

.about-cta p{
    margin:0 0 34px;
    font-size:20px;
    line-height:1.7;
    color:rgba(255,255,255,.9);
}

.cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:14px 32px;
    border-radius:6px;
    font-weight:700;
    text-decoration:none;
    transition:background-color .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}

.primary-btn{
    background:var(--about-white);
    color:var(--about-primary);
    border:2px solid var(--about-white);
}

.secondary-btn{
    background:transparent;
    color:var(--about-white);
    border:2px solid var(--about-white);
}

.primary-btn:hover,
.secondary-btn:hover{
    transform:translateY(-2px);
}

.primary-btn:hover{
    background:#eef3f9;
    border-color:#eef3f9;
}

.secondary-btn:hover{
    background:var(--about-white);
    color:var(--about-primary);
}

/* ====================================
   Animation Section
==================================== */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ====================================
   Responsive Section - 1200px
==================================== */

@media(max-width:1200px){

    .about-hero{
        padding:135px 0;
    }

    .about-hero h1{
        font-size:54px;
    }

    .section-title,
    .about-content h2{
        font-size:42px;
    }

    .about-layout{
        grid-template-columns:280px minmax(0,1fr);
        gap:40px;
    }

    .overview-stats,
    .timeline,
    .values-grid,
    .team-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .team-card img{
        height:300px;
    }
}

/* ====================================
   Responsive Section - 991px
==================================== */

@media(max-width:991px){

    .company-overview,
    .verticals-section,
    .history-section,
    .vision-mission,
    .values-section,
    .team-section,
    .about-cta{
        padding:90px 0;
    }

    .about-layout{
        grid-template-columns:1fr;
        gap:0;
    }

    .left-sidebar,
    .company-sidebar{
        display:none;
    }

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

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

    .section-subtitle{
        margin-bottom:44px;
    }
}

/* ====================================
   Responsive Section - 768px
==================================== */

@media(max-width:768px){

    .about-hero{
        padding:100px 0;
    }

    .about-hero h1{
        font-size:40px;
    }

    .about-hero p{
        font-size:17px;
    }

    .section-title,
    .about-content h2{
        font-size:34px;
    }

    .section-subtitle{
        font-size:15px;
    }

    .overview-stats,
    .timeline,
    .values-grid,
    .team-grid{
        grid-template-columns:1fr;
    }

    .vertical-card,
    .vm-card,
    .value-card{
        padding:32px 24px;
    }

    .timeline-item{
        padding:28px 24px;
    }

    .about-cta h2{
        font-size:36px;
    }

    .about-cta p{
        font-size:18px;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
    }
}

/* ====================================
   Responsive Section - 480px
==================================== */

@media(max-width:480px){

    .about-hero{
        padding:82px 0;
    }

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

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

    .company-overview,
    .verticals-section,
    .history-section,
    .vision-mission,
    .values-section,
    .team-section,
    .about-cta{
        padding:70px 0;
    }

    .section-title,
    .about-content h2{
        font-size:28px;
    }

    .section-tag{
        font-size:12px;
        letter-spacing:.5px;
    }

    .stat-box{
        padding:28px 20px;
    }

    .stat-box h3{
        font-size:34px;
    }

    .vertical-card,
    .vm-card,
    .value-card,
    .timeline-item{
        padding:26px 20px;
    }

    .vertical-card h3,
    .value-card h3{
        font-size:21px;
    }

    .vm-card h3{
        font-size:25px;
    }

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

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