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

.about-banner{

margin-top:90px;

height:420px;

background:url("../images/about-banner.jpg");

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

}

.about-banner .overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.banner-content{

position:relative;

z-index:2;

color:#fff;

max-width:650px;

}

.banner-content h1{

font-size:62px;

font-weight:800;

margin-bottom:20px;

}

.banner-content p{

font-size:20px;

margin-bottom:30px;

color:#f5f5f5;

}

.breadcrumb{

display:flex;

align-items:center;

gap:12px;

font-size:16px;

}

.breadcrumb a{

color:#7CF89B;

font-weight:600;

}

.breadcrumb span{

color:#fff;

}
/*==================================================
        COMMON SECTION
==================================================*/

.about-company,
.business-section,
.objectives,
.why-choose{
    padding:100px 0;
}

.section-heading{
    text-align:center;
    margin-bottom:60px;
}

.section-heading span{
    display:inline-block;
    color:#178D3C;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.section-heading h2{
    font-size:46px;
    margin:15px 0;
    font-weight:800;
    color:#111;
}

.section-heading p{
    max-width:700px;
    margin:auto;
    color:#666;
    font-size:17px;
}

/*==================================================
        ABOUT COMPANY
==================================================*/

.about-company{
    background:#fff;
}

.company-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.company-image img{
    width:100%;
    border-radius:25px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.company-content span{
    color:#178D3C;
    font-weight:700;
    letter-spacing:2px;
}

.company-content h2{
    font-size:48px;
    margin:20px 0;
    line-height:1.2;
    font-weight:800;
}

.company-content p{
    color:#666;
    margin-bottom:20px;
    line-height:1.9;
}

/*==================================================
        BUSINESS ACTIVITIES
==================================================*/

.business-section{
    background:#F7FAF8;
}

.business-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.business-card{
    background:#fff;
    padding:35px 25px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.business-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.business-card i{
    font-size:50px;
    color:#178D3C;
    margin-bottom:20px;
}

.business-card h3{
    font-size:22px;
    margin-bottom:15px;
}

.business-card p{
    color:#666;
    font-size:15px;
}

/*==================================================
        OBJECTIVES
==================================================*/

.objectives{
    background:#fff;
}

.objective-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.objective-item{
    background:#F8F8F8;
    border-left:5px solid #178D3C;
    border-radius:12px;
    padding:22px;
    display:flex;
    align-items:flex-start;
    gap:15px;
    transition:.3s;
}

.objective-item:hover{
    background:#178D3C;
    color:#fff;
}

.objective-item:hover i{
    color:#fff;
}

.objective-item i{
    color:#178D3C;
    font-size:22px;
    margin-top:3px;
}

/*==================================================
        WHY CHOOSE
==================================================*/

.why-choose{
    background:#F7FAF8;
}

.why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.why-grid img{
    width:100%;
    border-radius:25px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.why-grid span{
    color:#178D3C;
    font-weight:700;
    letter-spacing:2px;
}

.why-grid h2{
    font-size:46px;
    margin:20px 0;
    line-height:1.2;
    font-weight:800;
}

.why-grid p{
    color:#666;
    margin-bottom:30px;
    line-height:1.9;
}

.why-grid ul{
    list-style:none;
    padding:0;
    margin-bottom:35px;
}

.why-grid li{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    font-size:17px;
}

.why-grid li i{
    color:#178D3C;
    font-size:22px;
}

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

/* Laptop */

@media(max-width:1200px){

.company-grid,
.why-grid{
    gap:40px;
}

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

}

/* Tablet */

@media(max-width:992px){

.company-grid,
.why-grid{
    grid-template-columns:1fr;
}

.company-image,
.why-grid img{
    order:1;
}

.company-content,
.why-grid div:last-child{
    order:2;
}

.section-heading h2,
.company-content h2,
.why-grid h2{
    font-size:38px;
}

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

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

}

/* Mobile */

@media(max-width:768px){

.about-company,
.business-section,
.objectives,
.why-choose{
    padding:70px 0;
}

.section-heading{
    margin-bottom:40px;
}

.section-heading h2{
    font-size:32px;
}

.company-content h2,
.why-grid h2{
    font-size:32px;
}

.company-content p,
.why-grid p{
    font-size:15px;
}

.business-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.business-card{
    padding:30px 20px;
}

.business-card i{
    font-size:42px;
}

.business-card h3{
    font-size:20px;
}

.objective-item{
    padding:18px;
}

.why-grid ul li{
    font-size:15px;
}

}

/* Small Mobile */

@media(max-width:480px){

.section-heading h2{
    font-size:28px;
}

.company-content h2,
.why-grid h2{
    font-size:28px;
}

.company-image img,
.why-grid img{
    border-radius:18px;
}

.business-card{
    padding:25px 18px;
}

.business-card h3{
    font-size:18px;
}

.business-card p{
    font-size:14px;
}

.objective-item{
    font-size:14px;
}

.why-grid li{
    font-size:14px;
}

}