body {
    overflow-x: hidden;
}

.banner_section {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    gap: 50px;
    margin: 0px auto;
    overflow: hidden;
}

.banner_content_box {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.banner_content_box_fa_animation {
    animation: banner_content_box_fa_animation 1.4s linear forwards;
}

.banner_content_box_en_animation {
    animation: banner_content_box_en_animation 1.4s linear forwards;
}

.image_box_fa_animation {
    animation: image_box_fa_animation 1.4s linear forwards;
}

.image_box_en_animation {
    animation: image_box_en_animation 1.4s linear forwards;
}

.image_box {
    width: 250px;
    height: 230px;
}

.about_us_section_content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 90px;
    width: 75%;
}

.banner_p {
    text-align: center;
}

.about_us_section {
    margin: 100px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
}

#carousel-root {
    direction: ltr;
    margin: 0px auto;
}

.about_us_section_servises {
    width: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.about_us_section_texts {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}


/* projects */
.projects_section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 25px;
    direction: ltr;
}

.projects_section_part1 {
    width: 80%;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.projects_content {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}

.projects_image_div {
    width: 180px;
    height: 240px;
    position: relative;
}

.projects_link {
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 43px;
    left: 50%;
    transform: translateX(-50%);
}

.projects_link:hover {
    transform: translateX(-50%) scale(1.1);

}

.projects_section_part2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 80%;
    margin: 30px auto;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
}

.projects_section_part2_content_box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 25px;
    backdrop-filter: blur(2px);
    background: #ffffff00;
}


/* contact us */
.contact_us_section {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 50px 0px;
    gap: 30px;
    overflow: hidden;
}

.contact_us_content {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    margin-left: 50px;
}

.contact_us_image {
    width: 25%;
}


/* animations */

/* baner animations */

@keyframes banner_content_box_fa_animation {
    0% {
        transform: translateX(120%);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes banner_content_box_en_animation {
    0% {
        transform: translateX(-120%);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }

}

@keyframes image_box_fa_animation {
    0% {
        transform: translateX(-120%);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }

}

@keyframes image_box_en_animation {
    0% {
        transform: translateX(120%);
        opacity: 0;
        visibility: hidden;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }

}


/* titles animations */
.title_shine {
    animation: title_shine 1.4s linear forwards;
}

@keyframes title_shine {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(50px)
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px)
    }

}

/* p animation */

.p_shine {
    animation: p_shine 1.4s linear forwards;

}

@keyframes p_shine {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(60px)
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px)
    }

}

/* services animation */
.box_shine {
    animation: box_shine 1.5s linear forwards;
}

@keyframes box_shine {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: scale(0)
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(1)
    }

}

/* flip shop */
.flip_shine {
    animation: flip_shine 1.3s linear forwards;
}

@keyframes flip_shine {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: rotateY(0deg)
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: rotateY(180deg)
    }

}

/* box_shine left */
.left_side {
    position: relative;
}

.box_shine_left {
    animation: box_shine_left 1.5s  linear forwards;

}

@keyframes box_shine_left {
    0% {
        opacity: 0;
        visibility: hidden;
        /* transform: translateX(-100%); */
        left: -60%;
    }

    100% {
        opacity: 1;
        visibility: visible;
        /* transform: translateX(0%); */
        left: 0%;
    }

}

/* box_shine right */
.right_side {
    position: relative;
}

.box_shine_right {
    animation: box_shine_right 1.5s linear forwards;
}

@keyframes box_shine_right {
    0% {
        opacity: 0;
        visibility: hidden;
        /* transform: translateX(100%); */
        right: -60%;
    }

    100% {
        opacity: 1;
        visibility: visible;
        /* transform: translateX(0%); */
        right: 0%;
    }

}

/* box_shine right */
.bounce_image {
    animation: bounce_image 2.5s linear infinite alternate;
}

@keyframes bounce_image {
    0% {
        transform: translateY(30px) scale(1)
    }

    100% {
        transform: translateY(0px) scale(1.1)
    }

}


/* medias */

@media(max-width:800px) {

    /* about us */
    .about_us_section_texts {
        width: 100%;
    }
}

@media(max-width:670px) {

    /* banner */
    .banner_section {
        gap: 20px;
    }

    /* projects */
    .projects_content {
        width: 80%;
    }
}


@media(max-width:600px) {

    /* banner */
    .banner_section {
        gap: 40px;
        flex-direction: column;
    }

    /* projects */

    .projects_section_part2 {
        width: 90%;
        gap: 25px;
    }
}

@media(max-width:550px) {
    .contact_us_section {
        gap: 5px;
    }

    .contact_us_content {
        margin-left: 15px;
    }

    .contact_us_image {
        width: 40%;
    }

}

@media(max-width:480px) {
    .banner_content_box {
        width: 90%;
    }

    .projects_section_part2 {
        flex-direction: column;
        gap: 80px;
        width: 75%;
    }

}