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

.about-page{

    padding:60px 0;

}

.about-hero{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.about-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#2563eb;

    color:#fff;

    padding:10px 22px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

}

.about-badge i{

    font-size:18px;

}

.about-hero h1{

    font-size:52px;

    font-weight:800;

    color:#111827;

    margin-bottom:20px;

}

.about-hero p{

    font-size:19px;

    color:#6b7280;

    line-height:1.9;

}


/* ==========================================
   FEATURES
========================================== */

.about-features{

    display:grid;

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

    gap:25px;

    margin-bottom:70px;

}

.feature-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(37,99,235,.18);

}

.feature-icon{

    width:80px;

    height:80px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#2563eb;

    display:flex;

    justify-content:center;

    align-items:center;

}

.feature-icon i{

    color:#fff;

    font-size:34px;

}

.feature-card h3{

    font-size:24px;

    margin-bottom:18px;

    color:#111827;

}

.feature-card p{

    color:#6b7280;

    line-height:1.8;

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

.about-section{

    margin-bottom:70px;

}

.section-title{

    text-align:center;

    margin-bottom:40px;

}

.section-title h2{

    font-size:38px;

    color:#111827;

    margin-bottom:15px;

    font-weight:800;

}

.section-title h2 i{

    color:#2563eb;

    margin-right:12px;

}

.section-title p{

    color:#6b7280;

    font-size:17px;

}


/* ==========================================
   BRANDS
========================================== */

.brands-grid{

    display:grid;

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

    gap:20px;

}

.brand-box{

    background:#fff;

    border-radius:18px;

    padding:22px;

    text-align:center;

    font-size:20px;

    font-weight:700;

    color:#111827;

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

    transition:.3s;

    cursor:default;

}

.brand-box:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-6px);

}


/* ==========================================
   CATALOG ITEMS
========================================== */

.catalog-items{

    display:grid;

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

    gap:20px;

}

.catalog-item{

    background:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

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

    transition:.3s;

}

.catalog-item:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(37,99,235,.18);

}

.catalog-item i{

    font-size:40px;

    color:#2563eb;

    margin-bottom:18px;

}

.catalog-item span{

    display:block;

    font-size:18px;

    font-weight:600;

    color:#111827;

}
/* ==========================================
   ABOUT BOTTOM
========================================== */

.about-bottom{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:35px;

    margin-top:80px;

}

.about-bottom-left{

    background:#ffffff;

    border-radius:24px;

    padding:45px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.about-bottom-left h2{

    font-size:34px;

    color:#111827;

    margin-bottom:20px;

    font-weight:800;

}

.about-bottom-left h2 i{

    color:#2563eb;

    margin-right:10px;

}

.about-bottom-left p{

    color:#6b7280;

    line-height:1.9;

    margin-bottom:30px;

}

.about-bottom-left ul{

    list-style:none;

    padding:0;

    margin:0;

}

.about-bottom-left li{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 0;

    font-size:17px;

    color:#374151;

    border-bottom:1px solid #eef2f7;

}

.about-bottom-left li:last-child{

    border-bottom:none;

}

.about-bottom-left li i{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

}


/* ==========================================
   MESSAGE
========================================== */

.about-message{

    height:100%;

    border-radius:24px;

    padding:50px 40px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;

    box-shadow:0 20px 50px rgba(37,99,235,.35);

}

.about-message i{

    font-size:60px;

    margin-bottom:25px;

}

.about-message h3{

    font-size:30px;

    margin-bottom:20px;

    font-weight:800;

}

.about-message p{

    line-height:1.9;

    margin-bottom:35px;

    opacity:.95;

}

.about-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    border-radius:14px;

    background:#fff;

    color:#2563eb;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.about-btn:hover{

    transform:translateY(-4px);

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

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

@media (max-width:1100px){

.about-features{

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

}

.brands-grid{

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

}

.catalog-items{

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

}

.about-bottom{

    grid-template-columns:1fr;

}

}


@media (max-width:768px){

.about-page{

    padding:35px 0;

}


/* ---------- Hero ---------- */

.about-hero{

    margin-bottom:40px;

}

.about-badge{

    font-size:14px;

    padding:8px 18px;

}

.about-hero h1{

    font-size:34px;

}

.about-hero p{

    font-size:16px;

}


/* ---------- Features ---------- */

.about-features{

    grid-template-columns:1fr;

    gap:18px;

}

.feature-card{

    padding:25px;

}

.feature-icon{

    width:65px;

    height:65px;

}

.feature-icon i{

    font-size:28px;

}

.feature-card h3{

    font-size:21px;

}


/* ---------- Section ---------- */

.section-title{

    margin-bottom:25px;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:15px;

}


/* ---------- Brands ---------- */

.brands-grid{

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

    gap:15px;

}

.brand-box{

    padding:18px;

    font-size:17px;

}


/* ---------- Catalog ---------- */

.catalog-items{

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

    gap:15px;

}

.catalog-item{

    padding:22px;

}

.catalog-item i{

    font-size:30px;

}

.catalog-item span{

    font-size:15px;

}


/* ---------- Bottom ---------- */

.about-bottom{

    gap:20px;

    margin-top:45px;

}

.about-bottom-left{

    padding:25px;

}

.about-bottom-left h2{

    font-size:28px;

}

.about-bottom-left li{

    font-size:15px;

}

.about-message{

    padding:35px 25px;

}

.about-message i{

    font-size:46px;

}

.about-message h3{

    font-size:24px;

}

.about-message p{

    font-size:15px;

}

.about-btn{

    width:100%;

}

}


@media (max-width:480px){

.brands-grid{

    grid-template-columns:1fr;

}

.catalog-items{

    grid-template-columns:1fr;

}

.about-hero h1{

    font-size:30px;

}

.section-title h2{

    font-size:24px;

}

}