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

.page-hero{

    padding:180px 8% 130px;

    background:

    radial-gradient(circle at top right,#2563eb30,transparent 30%),

    radial-gradient(circle at bottom left,#06b6d420,transparent 30%),

    linear-gradient(135deg,#08131f,#122132);

}
.page-hero h1{

    font-size:52px;

    margin-bottom:20px;

}

.page-hero p{

    max-width:700px;

    margin:auto;

    color:#cbd5e1;

    line-height:1.8;

}


/*==============================
ABOUT SECTION
==============================*/

.about-page{

    padding:120px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.about-image img{

    width:100%;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

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

}

.about-image img:hover{

    transform:scale(1.02);

}

.about-text p{

    color:#cbd5e1;

    line-height:1.9;

    margin-bottom:25px;

}

/*==============================
MISSION
==============================*/

.mission-grid{

    padding:0 8% 100px;

    display:grid;

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

    gap:30px;

}

.mission-box{

    background:#122132;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:45px;

    transition:.35s;

}

.mission-box:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

    box-shadow:0 20px 40px rgba(0,0,0,.3);

}

.mission-box h3{

    color:#fff;

}

.mission-box p{

    color:#cbd5e1;

}

.mission-box i{

    width:75px;

    height:75px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:#2563eb20;

    font-size:34px;

    margin:auto auto 25px;

}

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

.cta{

    margin:100px 8%;

    padding:80px 50px;

    border-radius:30px;

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

    position:relative;

    overflow:hidden;

}

.cta::before{

    content:'';

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-170px;

    right:-120px;

}

.cta h2{

    font-size:42px;

}

.cta p{

    max-width:700px;

    margin:20px auto 35px;

}


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

@media(max-width:992px){

.about-page{

    grid-template-columns:1fr;

}

.about-text{

    text-align:center;

}

.mission-grid{

    grid-template-columns:1fr;

}

.page-hero h1{

    font-size:40px;

}

.cta h2{

    font-size:30px;

}

}

@media(max-width:576px){

.page-hero{

    padding:140px 20px 80px;

}

.about-page{

    padding:80px 20px;

}

.mission-grid{

    padding:0 20px 80px;

}

.cta{

    margin:0 20px 80px;

    padding:50px 25px;

}

}

.products-overview{

    padding:40px 8% 100px;

}

.category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

.category-card{

    background:#122132;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:40px 25px;

    transition:.35s;

}

.category-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

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

}

.category-card p{

    color:#94a3b8;

    margin-top:10px;

    line-height:1.7;

}

.about-page,
.mission-grid,
.products-overview{

    position:relative;

}

.about-page::after,
.mission-grid::after{

    content:"";

    position:absolute;

    bottom:-60px;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:3px;

    background:#2563eb;

    border-radius:50px;

}