@media (min-width: 1500px) {
    .our__vesion__values .image__value{
        width: 500px;
    }

    .our__vesion__values{
        gap: 300px;
    }
}

@media (max-width: 1200px) {
    nav .element ul {
        font-size: 16px;
    }
    .blogs .blog__card .blog__tex{
        height: 220px;
    }
}

@media (min-width: 1025px ) and (max-width: 1330px) {
    .blogs .blog__card .blog__tex {
        height: auto;
    }
}

@media (max-width:1024px) {

    nav .element,
    nav .language {
        display: none;
    }

    .menu-div {
        display: block !important;
    }

    .element ul li a {
        color: #fff;
        transition: 0.4s;
        text-align: center;
    }

    .element ul li a.active{
        color: gray !important;
    }

    .element ul li a:hover {
        color: gray !important;
    }

    .language{
        display: flex;
        justify-content: center;
    }

    .menu_responsive .dropbtn {
        margin-right: -30px;
    }

    .dropdown-content{
        right: -30px;
        background-color: gray;
    }

    .menu_responsive ul {
        margin-top: 90px;
    }

    .landing {
        height: calc(100vh - 100px);
        padding: 30px 0;

    }

    .about__company__text__header {
        margin-bottom: 20px;
    }

    .about__company__btn {
        margin-top: 10px;
    }

    .about__company__text p {
        line-height: 40px;
    }

    .blogs .blogs__content .blog__card {
        width: calc(100% / 3 - 30px);
    }
    .blogs .blog__card .blog__tex{
        height: 200px;
    }

    .team__work__content .team__card{
        width: calc(100% / 3 - 40px);
    }

    .our__vession p{
        font-size: 18px;
    }

    .our__vesion__header{
        padding-left: 50px;
    }

    .our__value__section ul li{
        font-size: 18px;
    }

    .about__project .about__project__content .img{
        width: 50%;
        height: 500px;
    }

    .about__project .about__project__content .about__project__text p {
        font-size: 18px;
        line-height: 48px;
        font-weight: 500;
        color: #A9A2A2;
    }

    .about__project .about__project__content .about__project__text p {
        font-size: 18px;
        line-height: 48px;
        font-weight: 500;
        color: #A9A2A2;
    }

    .about_blog_section .about_blog_content .img {
        width: 50%;
        height: 450px;
    }

    .about_blog_section .about_blog_content .blog__text p {
        font-size: 20px;
        font-weight: 400;
        line-height: 35px;
        color: #A9A2A2;
    }

    .about_blog_section .about_blog_content .blog__text ul li {
        font-size: 20px;
        font-weight: 400;
        line-height: 35px;
        color: #A9A2A2;
    }

    .contact__us__form .line {
        font-size: 14px;
        font-weight: 500;
    }

    .contact__us__form .line::before, .contact__us__form .line::after{
        left: 20px;
    }

    .contact__us__form .line::after{
        right: 20px;
    }

    .owl-carousell .item {
        width: calc(100% / 2 - 30px);
    }

    .blog__card .blog__tex h3 {
        font-size: 14px;
        font-weight: 700;
        text-align: right;
        color: #000;
    }

    .blog__card .blog__tex p {
        font-size: 14px;
        font-weight: 400;
        text-align: right;
        color: #a9a2a2;
        margin-top: 2px;
        line-height: 19px;
    }

    .partner__container .item{
        width: calc(100% / 5 - 30px);
    }
}

@media (max-width: 992px) {
    .projects__slider__container .item {
        width: calc(100% / 2 - 15px);
    }

    .about__project .about__project__content{
        flex-direction: column;
    }

    .about__project .about__project__content .img{
        width: 100%;
    }

    .about_blog_section .about_blog_content{
        flex-direction: column;
    }

    .about_blog_section .about_blog_content .img{
        width: 100%;
    }

    .partner__container .item{
        width: calc(100% / 4 - 30px);
      }

      .blogs .blog__card .blog__tex {
        height: 219px;
    }
}

@media (max-width:768px) {

    .landing{
        height: auto;
    }

    .landing-header-section .row {
        flex-direction: column-reverse;

    }

    .landing .row .col-sm-12 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .landing .landing-text {
        align-items: center;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .landing .landing-text h2 {
        font-size: 22px;
        text-align: center;
    }

    .landing .landing-text h4 {
        font-size: 20px;
        text-align: center;
    }



    .mask1 {
        position: relative;
        width: 300px;
        height: 280px;
        -webkit-mask-image: url(../images/image.png);
        mask-image: url(../images/image.png);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        /* The color inside the masked area */
        mask-size: 300px 280px;
        margin-left: auto;
    }

    .copy__write {
        flex-direction: column;
    }

    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    footer .top-footer .social {
        justify-content: center;
        margin-bottom: 30px;
        padding-right: 25px;
    }

    footer .top-footer p {
        text-align: center;
        width: 100%;
    }

    .copy__write {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about__company__text p {
        font-weight: 500;
        line-height: 30px;
    }

    .about__company_img {
        height: 300px;
    }

    .about__company .about__company__content {
        gap: 20px;
    }

    .about__company__btn {
        width: 200px;
        height: 50px;
    }

    .partners .partners__slider .img {
        height: 150px;
    }

    .blogs .blogs__content .blog__card {
        width: calc(100% / 2 - 30px);
    }

    .blogs__slider {
        display: block;
    }

    .blogs__slider .blog__card .blog__tex h3 {
        font-size: 14px;
    }

    .blogs__slider .blog__card .blog__tex p {
        font-size: 13px;
        text-align: right;
        margin-top: 20px;
    }

    .blogs__slider .owl-dots {
        margin-top: 20px;
    }

    .presedent__word .about__company_img{
        width: 300px;
    }

    .team__work__content .team__card{
        width: calc(100% / 2 - 40px);
    }

    .our__vesion__header{
        width: 100%;
        padding: 10px;
    }

    .our__vesion__title .img{
        width: 25px;
        height: 25px;
    }

    .our__vesion__title h3{
        font-size: 20px;
    }

    .our__vesion__message .message__img {
        width: 250px;
        height: 260px;
    }

    .message_section {
        padding: 10px;
    }

    .our__vesion__values{
        gap: 20px;
    }

    .our__vesion__values .image__value {
        width: 300px;
        height: 350px;
        margin-top: 100px;
    }

    .our__value__section {
        border: 1px dashed #000;
        height: auto;
        padding: 10px;
    }

    .custom__landing .main-container{
        padding-top: 0px;
    }

    .landing__text{
        margin-top: 30px;
    }

    .landing__text .landing__header {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .landing__text .landing__links {
        font-size: 18px;
        font-weight: 700;
    }

    .services__img__container .img{
        height: 150px;
    }

    .about__services .about__services__text p{
        font-size: 18px;
    }

    .contact__us__form .line::before, .contact__us__form .line::after{
        width: 30%;
    }

    .contact__us__form form {
        background-color: #E5EEF4;
        width: 500px;
        margin: 50px auto;
        padding: 50px;
        border-radius: 10px;
    }

    .custom__landing {
        height: 570px !important;
    }

    .header .owl-carousel .owl-dots {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        position: absolute;
        left: 50%;
        bottom: 30px;
    }

    .about__company__text p {
        font-weight: 500;
        line-height: 29px;
        font-size: 15px;
    }

    .about__company__btn .text {
        font-size: 12px;
        font-weight: 700;
    }

    .about__company__btn {
        width: 151px;
        height: 50px;
    }

    .owl-carousell {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 30px;
        flex-wrap: wrap;
    }

    .services .services__item .services__card {
        margin: 15px 0;
    }

    .our__vession p {
        font-size: 12px;
        line-height: 25px;
    }

    .our__value__section ol li h3, .our__value__section ol li h3 {
        font-size: 12px;

    }

    .our__value__section ol{
        padding-right: 20px !important;
    }

    .custom__landing .row {
        padding-top: 100px;
        align-items: center;
    }

    .mask-img-intro .mask1   {
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .about__company .about__company__content {
        flex-direction: column;
        gap: 50px;
    }
    .contact__us__form form{
        padding: 50px 10px;
    }

    .about_blog_section .about_blog_content .img {
        height: 331px;
    }

    .about_blog_section .about_blog_content .blog__text p {
        font-size: 15px;

    }

    .blog__text ol li {
        font-size: 17px;
        text-align: right;
    }


    .about__services .about__services__text p {
        font-size: 14px;
        line-height: 2;
    }

    .about__services__text .btn__text {
        gap: 9px;
        width: 150px;

    }

    .form__order form h3 {
        font-size: 17px;
    }

    .form__order .input input {
        font-size: 11px;
    }

    .form__order .input textarea {
        font-size: 11px;
    }

    .about__company__text__header {
        justify-content: center;
    }

    .about__company__btn {
        margin-left: auto;
        margin-right: auto;
    }

    .about__company__text {
        width: 100%;
        text-align: center;
    }

    .about__company_img {
        width: 100%;
    }

    .contact-us-content {
        flex-direction: column;
    }

    .contact-us .contact-us-content .contact-us-info,
    .contact-us .contact-us-content .contact-us-map {
        width: 100%;
        text-align: center;
    }

    .contact-us .contact-us-content .contact-us-map .map iframe {
        width: 100%;
        height: 100%;
        margin-right: 10px;
        margin-top: -10px;
        border-radius: 5px;
    }

    .contact-us .contact-us-content .contact-us-info h3 {
        justify-content: center;
    }

    .contact-us p.description {
        width: 100%;
    }

    .contact-us-info .mail,
    .contact-us-info .call {
        justify-content: center;
    }

    .contact-us-info .direction-btn {
        margin-left: auto;
        margin-right: auto;
    }

    .presedent__word .about__company__text{
        width: 100%;
    }

    .presedent__word .about__company_img{
        width: 100%;
    }

    .our__vesion__message{
        flex-direction: column-reverse;
    }

    .our__vesion__values{
        flex-direction: column;
    }

    .our__vesion__values .image__value {
        width: 300px;
        height: 350px;
        margin: auto;
    }

    .services__img__container .img{
        width: calc(100% / 2 - 20px);
    }

    .form__order .input-container{
        flex-direction: column;
    }

    .form__order form{
        padding: 20px 10px;
    }

    .form__order input[type="submit"]{
        width: 200px;
    }

    .projects__slider__container .item {
        width: 100%;
    }

    .projects__slider__container .item .img{
        height: 200px;
    }

    .about_blog_section .about_blog_content .blog__text {
        flex: 1;
        text-align: center;
    }

    .about_blog_section .about_blog_content .blog__text h3 {
        font-size: 22px;
        font-weight: 700;
    }

    .contact__us__form form {
        width: 95%;
    }

    .contact__us__form form .input-container{
        flex-direction: column;
        margin-bottom: 20px;
    }

    .contact__us__form .line::before, .contact__us__form .line::after{
        width: 50px;
    }

    .blogs .blogs__content .blog__card {
        width: 100%;
    }

    .owl-carousell .item {
        width: 100%;
    }

    .contact-us-info{
        height: auto !important;
    }

    .mask1 {
        position: relative;
        width: 177px;
        height: 165px;
        -webkit-mask-image: url(../images/image.png);
        mask-image: url(../images/image.png);
        mask-size: 100% 100%;
    }


}

@media (max-width: 475px) {

    .project_details_slider .img {
        width: 100%;
        height: 270px;
    }

    .about__project .about__project__content .img {
        height: 300px;
    }

    .about__project .about__project__content .about__project__text p {
        text-align: center;
        line-height: 2;
    }


    .landing .landing-text h2 {
        font-size: 15px;
    }

    .landing .landing-text h4 {
        font-size: 12px;
        text-align: center;
    }

    .footer-logo {
        width: 200px;
        height: 70px;
    }

    .copy__write p {
        font-size: 12px;
    }

    .team__work__content .team__card{
        width: 100%;
    }

    .services__img__container .img{
        width: 100%;
        height: 200px;
    }

    .custom__landing {
        height: 500px !important;
    }


    .pdf__view .text p{
        font-size: 18px;
    }

    .pdf__view .text .img {
        width: 30px;
        height: 40px;
    }

    .pdf__view .icon {
        cursor: pointer;
        color: var(--main-color);
        font-size: 15px;
        border: 1px solid var(--main-color);
        padding: 5px 10px;
        border-radius: 5px;
    }

    .accordion-button {
        font-size: 16px !important;
        font-weight: 700;
        color: #000 !important;
    }


}

@media (max-width: 450px){
    .projects .projects__slider .project__card h3{
        text-align: center;
        font-size: 14px;
    }

    .projects .projects__slider .project__card p{
        text-align: center;
        font-size: 14px;
    }

    .partners .partners__slider .img{
        height: 110px;
    }

    .blogs  .blog__card{
        width: 100%;
    }

    .blogs  .blog__card .blog__tex h3{
        font-size: 14px;
    }

    .blogs  .blog__card .blog__tex p{
        font-size: 12px;
    }

    .blogs  .blog__card .blog__tex{
        height: 180px;
    }

    footer .top-footer p{
        line-height: 2;
        font-size: 14px;
    }

    footer .top-footer .footer-links ul li a{
        font-size: 12px;
    }

    footer .top-footer h4 {
        font-weight: bold;
        padding-bottom: 15px;
        font-size: 18px;
    }

    footer .top-footer .footer-links ul{
        gap: 5px;
    }

    .about__project .about__project__content .about__project__text h4{
        text-align: center;
        font-size: 20px;
    }

    .about__project .about__project__content .about__project__text p {
        font-size: 15px;
        line-height: 35px;
        font-weight: 500;
        color: #A9A2A2;
    }

    .project_details_slider .img {
        width: 100%;
        height: 334px;
    }

    .partner__container .item{
        width: calc(100% / 3 - 30px);
      }

      .contracts__section .change__user__img {
        width: 100px;
        height: 100px;
        position: relative;
        cursor: pointer;
        margin-bottom: 20px;
    }

    .contracts__section .pen-img {
        position: absolute;
        bottom: 0;
        width: 25px;
        height: 25px;
    }

    .contracts__section .input input {
        width: 300px;
        height: 50px;
        background-color: #E5EEF4;
        font-size: 16px;
        color: #797575;
        border: none;
        outline: none;
        padding: 10px;
        border-radius: 10px;
    }
    .blogs .blog__card .blog__tex {
        height: auto;
    }

    .landing__text .landing__header {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .landing__text .landing__links {
        font-size: 12px;
        font-weight: 700;
    }

    .projects__slider__container .item {
        height: 360px;
    }

}


@media (max-width: 375px) {
    .projects .projects__slider .project__card .img{
        height: 300px;
    }

    .partner__container .item{
        width: calc(100% / 2 - 30px);
      }

      .our__value__section{
        padding-left: 0;
      }

      .mask1 {
        position: relative;
        width: 162px;
        height: 152px;
        -webkit-mask-image: url(../images/image.png);
        mask-image: url(../images/image.png);
        mask-size: 100% 100%;
    }

    .about__service__slider__header h3 {

        font-size: 16px;

    }


    .about__service__slider .owl-carousel .owl-nav .owl-next, .about__service__slider .owl-carousel .owl-nav .owl-prev {
        width: 39px;
        height: 37px;
    }
}