/* ================= ABOUT SECTION POLISH ================= */
.about {
    background:#f8fafc;
    padding:60px 0 50px;
}

.about-grid {
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
    align-items:center;
}

/* LEFT CONTENT */
.about-content {
    max-width:520px;
}

.section-label {
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    color:#E60012;
    text-transform:uppercase;
    margin-bottom:18px;
}

.about-content h2 {
    font-size:34px;
    line-height:1.25;
    font-weight:700;
    color:#1f2937;
    margin-bottom:24px;
}

.about-content p {
    font-size:17px;
    line-height:1.8;
    color:#475569;
    margin-bottom:20px;
}

/* BUTTON */
.btn-about {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#E60012;
    font-weight:600;
    margin-top:15px;
    transition:.3s ease;
    position:relative;
}

.btn-about i {
    transition:.3s ease;
}

.btn-about:hover {
    color:#c00000;
    border-color:#E60012;
    gap:14px;
}

.btn-about:hover i {
    transform:translateX(8px);
}

.btn-about,
.btn-about:hover,
.btn-about:focus,
.btn-about:active,
.btn-about:visited {

    text-decoration:none !important;

}

/* VIDEO */

.about-video {
    width:100%;
    max-width:620px;
}

.about-video iframe {
    width:100%;
    aspect-ratio:16/9;
    border-radius:20px;
    border:none;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.profile-video-wrapper{
    position:relative;
    overflow:hidden;
    background:#000;
    aspect-ratio:16/9;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
    border-radius:22px;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.profile-video-wrapper:hover{
    transform:translateY(-4px);
    box-shadow:0 28px 60px rgba(0,0,0,.18);
}

.profile-video-wrapper::after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.15);
    opacity:0;
    transition:.3s ease;
}

.profile-video-wrapper:hover::after {
    opacity:1;
}

.profile-video-wrapper iframe{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    border:0;
}



/* ================= RESPONSIVE ================= */
@media(max-width:991px){
    .about-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-content{
        max-width:none;
    }

    .about-content h2{
        font-size:30px;
    }


}