/*==============================

ABOUT SECTION

===============================*/

.about-company{

padding:90px 8%;
background:#f7f9fc;

}

.about-wrapper{

display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:70px;

}

.about-badge{

display:inline-block;
padding:10px 18px;
background:#E8F2FF;
color:#0D6EFD;
font-weight:600;
border-radius:40px;
font-size:14px;
margin-bottom:18px;

}

.about-left h2{

font-size:48px;
line-height:1.2;
font-weight:700;
color:#0F172A;
margin-bottom:22px;

}

.about-left h2 span{

color:#0D6EFD;

}

.about-desc{

font-size:17px;
line-height:1.9;
color:#5B6472;
margin-bottom:35px;

}

/* Cards */

.about-info{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;

}

.info-box{

background:#fff;
padding:22px;
border-radius:18px;
border:1px solid #e5e7eb;
transition:.35s;
box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.info-box:hover{

transform:translateY(-8px);
box-shadow:0 20px 45px rgba(13,110,253,.15);

}

.info-box h4{

font-size:15px;
color:#0F172A;
margin-bottom:8px;

}

.info-box p{

font-size:15px;
color:#64748B;
line-height:1.6;

}

/*=========================

VIDEO

==========================*/

.video-box{

aspect-ratio:1/1;
width:100%;
max-width:520px;
margin:auto;
border-radius:28px;
overflow:hidden;
position:relative;
background:#000;
box-shadow:0 30px 60px rgba(13,110,253,.18);

}

.video-box video{

width:100%;
height:100%;
object-fit:cover;
display:block;

}

/* Floating Border */

.video-box::after{

content:"";
position:absolute;
inset:12px;
border:1px solid rgba(255,255,255,.18);
border-radius:22px;
pointer-events:none;

}

/*=====================

Responsive

======================*/

@media(max-width:1100px){

.about-wrapper{

grid-template-columns:1fr;
gap:50px;

}

.video-box{

max-width:500px;

}

}

@media(max-width:768px){

.about-company{

padding:70px 20px;

}

.about-left h2{

font-size:34px;

}

.about-info{

grid-template-columns:1fr;

}

.video-box{

max-width:100%;
border-radius:22px;

}

}

@media(max-width:480px){

.about-left h2{

font-size:28px;

}

.about-desc{

font-size:15px;

}

}