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

.about-hero{
    height:400px;
    background:
    linear-gradient(rgba(11,61,109,.75),rgba(11,61,109,.75)),
    url("../assets/images/hero.jpg");
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    padding:0 7%;
}

.about-hero h1{
    font-size:60px;
    margin-bottom:20px;
}

.about-hero p{
    max-width:800px;
    font-size:22px;
    line-height:1.8;
}
/* ==========================
   ABOUT COMPANY
========================== */

.about-company{
    padding:100px 7%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-image img{
    width:100%;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.about-text h2{
    font-size:42px;
    color:#0B3D6D;
    margin-bottom:25px;
}

.about-text p{
    color:#555;
    font-size:18px;
    line-height:1.9;
    margin-bottom:20px;
}
/* ==========================
   WHY EVOLE
========================== */

.why-evole{

    padding:100px 7%;

    background:#F7F9FC;

}

.why-evole h2{

    text-align:center;

    font-size:42px;

    color:#0B3D6D;

    margin-bottom:60px;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.why-card{

    background:#fff;

    padding:35px;

    border-radius:16px;

    border:1px solid #EAEAEA;

    transition:.3s;

}

.why-card:hover{

    transform:translateY(-8px);

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

}

.why-card h3{

    color:#0B3D6D;

    font-size:24px;

    margin-bottom:18px;

}

.why-card p{

    color:#666;

    line-height:1.8;

    font-size:17px;

}
/* ==========================
   ABOUT CTA
========================== */

.about-cta{

    padding:100px 7%;

    background:#0B3D6D;

    text-align:center;

    color:white;

}

.about-cta h2{

    font-size:46px;

    margin-bottom:20px;

}

.about-cta p{

    max-width:800px;

    margin:0 auto 40px;

    font-size:20px;

    line-height:1.8;
    overflow:hidden;

}

.about-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}
.supported-brands{
    padding:100px 7%;
    text-align:center;
}

.supported-brands h2{
    font-size:42px;
    color:#0B3D6D;
    margin-bottom:20px;
}

.supported-brands p{
    max-width:800px;
    margin:0 auto 50px;
    color:#666;
    line-height:1.8;
    
}
.brand-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:35px;

    align-items:center;

    justify-items:center;

    margin-top:40px;

}

.brand-grid img{

    width:100%;

    max-width:120px;

    height:70px;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.75;

    transition:.3s;

}

.brand-grid img:hover{

    filter:grayscale(0);

    opacity:1;

    transform:scale(1.08);

}
.about-image img{
    border-radius:20px;
}
.about-cta{
    border-bottom:1px solid rgba(255,255,255,.15);
}
.about-cta{
    padding:80px 7%;
}
.section-tag{
    display:inline-block;
    color:#C7A33B;
    font-size:14px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:15px;
}