@media (max-width: 568px) {
    .slider {
        height: fit-content;
        padding: 0%;
    } 
    .slide {
        background: url(../images/pexels-fauxels-3183197.jpg);
        background-size: cover;
        background-position: center;
        animation: bagChange 25s ease infinite;
        animation-direction: alternate;
        transition: all .6s ease;
    }
    @keyframes bagChange {
        0% {
            background-position: 0% 50%;
            scale: 1;
            transition: all 2s;
        }
        15% {
            background-position: 30% 50%;
            scale: 1;
            transition: all 2s; 
        }
        25% {
            background-position: top 50%;
            scale: 1;
            transition: all 5s;
        }
        50% {
            background-position: 80% 60%;
            scale: 1;
            transition: all 10s;
        }
        75% {
            background-position: bottom 20%;
            scale: 1;
            transition: all 2s;
        }
        100% {
            background-position: center;
            scale: 1;
            transition: all 2s;
        }
    }
    .slide > img {
        display: none;
    }
    .slide:hover {
        transform: scale(1.055);
    }
    .slide:hover .overlay {
        background: #1b1b1b; 
    }
    .overlay {
        position: relative;
        transform: translate(0);
        top: 0;
        left: 0;
        transition: 1s ease;
    }
    .overlay h2 {
        width: 100%;
        font-size: 1.5rem;
    }
    .overlay p {
        width: 100%;
        font-size: 18px;
        margin-left: 0rem;
    }
    .button_container {
        margin-left: 0rem;
    }
    .button_container > button {
        padding: 10px;
        font-size: 16px;
        text-wrap: nowrap;
    }
    .button_container > button:nth-child(2) {
        display: none;
    }
    .container > .row {
        grid-template-columns: 1fr;
    }
    .column > h2 {
        font-size: 20px;
    }
    .column > p {
        width: 100%;
        font-size: 18px;
    }
    .column > button {
        padding: 10px;
        font-size: 16px;
    }
    .column#bord {
        display: grid;
        gap: 2rem;
    }
    .box {
        padding: 0%;
    }
    .box > span {
        font-size: 20px;
    }
    .box h3 {
        font-size: 20px;
        width: 95%;
    }
    .box p {
        width: 100%;
        font-size: 18px;
    }
    .company {
        padding: 2rem 0;
    }
    .company_container_box {
        height: 100%;
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
        backdrop-filter: brightness(40%);
    }
    .company_box {
        height: 100%;
    }
    .company_box > h4 {
        font-size: 15px;
    }
    .company_box > h2 {
        font-size: 1.5rem;
        width: 100%;
    }
    .company_box > p {
        width: 100%;
        font-size: 18px;
    }
    .about-row > h4 {
        font-size: 15px;
    }
    .about-row > h2 {
        width: 80%;
        font-size: 1.5rem;
    }
    .about-row > p {
        width: 100%;
        font-size: 18px;
        padding: 0 2rem;
    }
    .about-row:nth-child(2) {
        grid-template-columns: 1fr;
    }
    .about-row > img {
        height: 60vh;
        position: relative;
    }
    .about_box {
        gap: 2rem;
        min-height: fit-content;
    }
    .about_box > span {
        font-size: 1.5rem;
    }
    .about_box_body > h2 {
        font-size: 1.5rem;
        width: 100%;
    }
    .about_box_body > p {
        font-size: 18px;
        width: 100%;
        margin-top: 1rem;
    }
    .work-row h2  {
        font-size: 1.5rem;
    }
    .work-row h3 {
        font-size: 20px;
    }
}