#about{
    position: relative;
    background-color: white;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.bottom-smoke{
    position: absolute;
    top: -25rem;
    left: 0;
    width: 100%;
}

.two-column{
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.two-column h2{
    width: 50vw;
}

.why-us-video{
    width: 100%;
}

.arrow-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    margin-top: 7rem;
}

.arrow-gallery{
    display: flex;
    /* gap: 30px; */
}

.arrow-img{
    width:220px;
    height:350px;
    overflow:hidden;

    clip-path: polygon(
        0% 0%,
        65% 0%,
        100% 50%,
        65% 100%,
        0% 100%,
        35% 50%
    );
}

.arrow-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.arrow-section h3{
    width: 50%;
    text-align: center;
}

.steps-container{
    display: flex;
    justify-content: space-between;
    margin-top: 7rem;
}

.left-side{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.right-side{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 60%;
}

.step{
    display: flex;
    align-items: center;
    gap: 2rem;
}

.step p{
    color: #b3b3b3;
}

@media (max-width: 1200px){
    .bottom-smoke{
        top: -15rem;
    }
    .two-column{
        margin-top: 5rem;
    }
}

@media (max-width: 900px){
    .arrow-img{
        width:170px;
        height:350px;
    }
}

@media (max-width: 600px){
    .bottom-smoke{
        top: -5rem;
    }
    #about{
        padding: 3rem 2rem;
    }
    .arrow-img{
        width: 100px;
        height: 200px;
    }
    .arrow-section{
        gap: 3rem;
    }
    .steps-container{
        flex-direction: column;
        gap: 5rem;
        margin-bottom: 5rem;
        /* align-items: center; */
    }
    .arrow-section h3{
        width: 90%;
    }
    .right-side, .left-side{
        width: 100%;
    }
}

@media (max-width: 500px){
    .bottom-smoke{
        height: 10rem;
        top: -10rem;
    }
    .two-column{
        flex-direction: column;
        gap: 2rem;
    }
    .two-column h2{
        width: 100%;
    }
}

@media (max-width: 450px){
    .arrow-img{
        width: 80px;
        height: 150px;
    }
}