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

.about{

    padding:100px 0;
    background:#0b0b0b;

}

.about-container{

    width:min(1200px,90%);
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;

}

/* ===========================
   CONTENT
=========================== */

.section-tag{

    display:block;

    margin-bottom:14px;

    color:#d6b16a;

    font-size:.9rem;

    letter-spacing:3px;

}

.about h2{

    position:relative;

    display:inline-block;

    font-size:3rem;

    line-height:1.15;

    margin-bottom:28px;

    color:#fff;

}

.about h2::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-10px;

    width:70px;
    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--primary-color),
        var(--secondary-color)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.8s cubic-bezier(.22,1,.36,1) .45s;

}

.about.active h2::after{

    transform:scaleX(1);

}

.about p{

    max-width:580px;

    color:#bcbcbc;

    line-height:1.9;

    margin-bottom:28px;

    font-size:1rem;

}

.about-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.about-image{

    position:relative;

    overflow:hidden;

    border-radius:24px;

}


/* ===========================
   LIST
=========================== */

.about-list{

    margin-bottom:40px;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    color:#fff;

}

.about-list i{

    color:#d6b16a;

}

/* ===========================
   BUTTON
=========================== */

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    background:var(--primary-color);

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.35s ease;

}

.btn-primary i{

    transition:.35s ease;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(123,44,245,.35);

}

.btn-primary:hover i{

    transform:translateX(6px);

}


.about-image video{



    transition:.8s ease;

     transform:scale(1.3);

}

.about-image:hover video{

    transform:scale(1.3);

    filter:brightness(1.08);

}





/* ===========================
   ANIMATION
=========================== */

.about-content > *{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);

}

.about.active .about-content > *{

    opacity:1;

    transform:translateY(0);

}

.about-content > *:nth-child(1){transition-delay:.10s;}
.about-content > *:nth-child(2){transition-delay:.25s;}
.about-content > *:nth-child(3){transition-delay:.40s;}
.about-content > *:nth-child(4){transition-delay:.55s;}
.about-content > *:nth-child(5){transition-delay:.70s;}

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

@media (max-width:992px){

    .about{

        padding:80px 0;

    }

    .about-container{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-content{

        order:2;

        align-items:center;

        text-align:center;

    }

    .about-image{

        order:1;

        width:100%;

        max-width:700px;

        margin:auto;

    }

    .about h2{

        font-size:2.3rem;

    }

    .about p{

        max-width:100%;

    }

    .about-list{

        width:100%;

        max-width:500px;

    }

    .btn-primary{

        margin:auto;

    }

}

@media (max-width:768px){

    .about{

        padding:70px 0;

    }

    .about-container{

        gap:40px;

    }

    .about h2{

        font-size:2rem;

    }

    .about p{

        font-size:.95rem;

        line-height:1.8;

    }

    .about-list li{

        font-size:.95rem;

    }

    .btn-primary{

        width:100%;

        justify-content:center;

    }

}