@import url("../css/kogta-root.css");

.import-export-img-dotted-line,
.import-export-img-dotted-line-1,
.import-export-img-dotted-line-3,
.import-export-img-dotted-line-4 {
    width: 100px;
}

.animated-emport-export {
    position: relative;
    margin-bottom: 5rem;
}

.name-des-animated {
    /* position: absolute;
    top: 0%;
    width: 27%;
    transform: rotate(15deg);
    left: 65%; */
    position: absolute;
    top: 0%;
    width: 40%;
    transform: rotate(15deg);
    left: 60%;
}

.background-img-animated {
    position: relative;
    width: 80%;
    margin: 0 auto;
    left: 5%;
}

.name-des-animated .import-export-img-dotted-line {
    z-index: -1;
    position: relative;
    right: 5%;
}

.name-des-animated p {
    font-size: 1rem;
    line-height: 1.25rem;
}

.animated-emport-export-2 {
    position: relative;
    margin-bottom: 5rem;
}

.name-des-animated-2 {
    position: absolute;
    top: 0%;
    width: 27%;
    transform: rotate(353deg);
    left: 10%;
}

.background-img-animated-2 {
    position: relative;
    width: 60%;
    margin: 0 auto;
    left: 10%;
}

.name-des-animated-2 .import-export-img-dotted-line-1 {
    position: relative;
    left: -20px;
    z-index: -1;
    top: 0%;
    transform: translateY(-15px);
}

.name-des-animated-2 p {
    font-size: 1rem;
    line-height: 1.25rem;
}

.animated-emport-export-3 {
    position: relative;
}

.name-des-animated-3 {
    position: absolute;
    top: 0%;
    width: 27%;
    transform: rotate(4deg);
    left: 60%;
}

.name-des-animated-3 .import-export-img-dotted-line-3 {
    position: relative;
    left: -14%;
    top: -90px;
    z-index: -1;
}

.background-img-animated-3 {
    position: relative;
    width: 60%;
    left: -10%;
    margin: 0 auto;
    transform: translateY(-50px);
}

.name-des-animated-3 p {
    font-size: 1rem;
    line-height: 1.25rem;
}

.animated-emport-export-4 {
    position: relative;
}

.name-des-animated-4 {
    position: absolute;
    top: 10%;
    width: 27%;
    transform: rotate(353deg);
    left: 14%;
}

.name-des-animated-4 .import-export-img-dotted-line-4 {
    position: relative;
    left: 95%;
    top: -100px;
    width: 120px;
    z-index: -1;
}

.background-img-animated-4 {
    position: relative;
    width: 70%;
    margin: 0 auto;
    transform: translateY(-50px);
    left: 5%;
}

.name-des-animated-4 p {
    font-size: 1rem;
    line-height: 1.25rem;
}

.img-name-animated,
.img-name-animated-2,
.img-name-animated-3,
.img-name-animated-4 {
    width: 90%;
    padding-bottom: 2%;
}

.name-des-animated p,
.name-des-animated-2 p,
.name-des-animated-3 p,
.name-des-animated-4 p {
    font-size: 18px;
    line-height: 22px;
    font-family: var(--bs-Archivo_SemiCondensed-Light);
}

@media (min-width: 1200px) and (max-width: 1600px) {
    /* .name-des-animated-3 .import-export-img-dotted-line-3 {
        left: 90%;
        top: -94px;
    } */


    .name-des-animated-4 {
        position: absolute;
        top: 0%;
        left: 14%;

    }

    .name-des-animated-4 .import-export-img-dotted-line-4 {
        left: 95%;
        top: -40px;
    }
}

@media (min-width: 999px) and (max-width: 1200px) {

    .img-name-animated,
    .img-name-animated-2,
    .img-name-animated-3,
    .img-name-animated-4 {
        width: 100%;
    }

    .name-des-animated-4 {
        top: -10%;
    }
}

@media (min-width: 768px) and (max-width: 999px) {




    .img-name-animated,
    .img-name-animated-2,
    .img-name-animated-3,
    .img-name-animated-4 {
        width: 100%;
    }

    .import-export-img-dotted-line,
    .import-export-img-dotted-line-1,
    .import-export-img-dotted-line-3,
    .import-export-img-dotted-line-4 {
        width: 80px;
    }

    .name-des-animated-2 .import-export-img-dotted-line-1 {
        left: 37%;
    }

    .name-des-animated-3 {
        top: -13%;
    }

    .name-des-animated p,
    .name-des-animated-2 p,
    .name-des-animated-3 p,
    .name-des-animated-4 p {
        font-size: 15px;
        line-height: 20px;
    }
}

@media (min-width: 768px) and (max-width: 999px) {

    .name-des-animated-4 {
        top: 5%;
    }

    .name-des-animated-2 {
        width: 35%;
    }

    .img-name-animated,
    .img-name-animated-2,
    .img-name-animated-3,
    .img-name-animated-4 {
        width: 70%;
    }

    .import-export-img-dotted-line,
    .import-export-img-dotted-line-1,
    .import-export-img-dotted-line-3,
    .import-export-img-dotted-line-4 {
        width: 80px;
    }

    .name-des-animated-2 .import-export-img-dotted-line-1 {
        left: 37%;
    }

    .name-des-animated,
    .name-des-animated-2,
    .name-des-animated-3,
    .name-des-animated-4 {
        width: 40%;
    }
}

@media (min-width: 575px) and (max-width: 768px) {

    .img-name-animated,
    .img-name-animated-2,
    .img-name-animated-3,
    .img-name-animated-4 {
        width: 75%;
    }

    .background-img-animated-2 {
        top: -40px;
    }

    .import-export-img-dotted-line,
    .import-export-img-dotted-line-1,
    .import-export-img-dotted-line-3,
    .import-export-img-dotted-line-4 {
        width: 70px;
    }

    .name-des-animated-2 .import-export-img-dotted-line-1 {
        left: 20%;
    }

    .name-des-animated {
        top: -6%;
        width: 44%;
        left: 45%;
    }

    .name-des-animated-3 {
        top: -25%;
        width: 44%;
    }

    .name-des-animated-2 {
        top: -13%;
        width: 44%;
        left: 3%;
    }

    .name-des-animated-4 {
        top: -14%;
        width: 44%;
        left: 6%;
    }

    .name-des-animated-4 .import-export-img-dotted-line-4 {
        top: -55px;
    }
}

@media (max-width: 575px) {


    /* .name-des-animated .import-export-img-dotted-line {
        left: 98%;
        top: -64px;
    } */

    .name-des-animated .import-export-img-dotted-line {
        left: -10%;
        top: 0;
    }

    .import-export-img-dotted-line,
    .import-export-img-dotted-line-1,
    .import-export-img-dotted-line-3,
    .import-export-img-dotted-line-4 {
        width: 58px;
    }

    .img-name-animated {
        width: 70%;
    }

    .name-des-animated p {
        font-size: 12px;
        line-height: 18px;
    }

    .name-des-animated {
        /* top: -25%;
        width: 72%;
        left: 12%; */

        top: -30%;
        width: 72%;
        left: 30%;
    }

    .name-des-animated-2 {
        top: -25%;
        width: 70%;
        left: 2%;
    }

    .img-name-animated-2 {
        width: 70%;
    }

    .name-des-animated-2 .import-export-img-dotted-line-1 {
        left: -9%;
    }

    .name-des-animated-2 p {
        font-size: 12px;
        line-height: 18px;
    }

    .img-name-animated-3 {
        width: 70%;
    }

    .name-des-animated-3 {
        top: -40%;
        width: 70%;
        left: 30%;
    }

    .name-des-animated-3 p {
        font-size: 12px;
        line-height: 18px;
    }

    .background-img-animated-3 {
        top: 40px;
        padding-bottom: 16%;
    }

    .name-des-animated-3 .import-export-img-dotted-line-3 {
        /* left: 78%; */
        /* top: 0px; */
        left: -8%;
        top: -80px;
    }

    .img-name-animated-4 {
        width: 70%;
    }

    .name-des-animated-4 {
        top: -20%;
        width: 70%;
        left: 2%;
    }

    .name-des-animated-4 p {
        font-size: 12px;
        line-height: 18px;
    }

    .background-img-animated-4 {
        top: 50px;
        width: 90%;
    }

    .name-des-animated-4 .import-export-img-dotted-line-4 {
        left: 82%;
        top: -18px;
        width: 90px;
    }

    .background-img-animated {
        top: 0%
    }

    .background-img-animated-2 {
        width: 80%;
    }

    .background-img-animated {
        width: 85%;
    }
}