@media (min-width:1200px) {

    .slide.hero-section .row:hover .hero-img img,
    .slide .row:hover .hero-img img {
        transform: translateX(-285px) !important;
    }
}

@media (min-width:1600px) {

    .slide.hero-section .row:hover .hero-img img,
    .slide .row:hover .hero-img img {
        transform: translateX(-311px) !important;
    }
}

@media (min-width:2000px) {

    .slide.hero-section .row:hover .hero-img img,
    .slide .row:hover .hero-img img {
        transform: translateX(-408px) !important;
    }
}

@media (max-width: 1550px) {
    .hero-right {
        margin-right: -35.5%;
    }


    .hero-title h6 {
        font-size: 42px;
    }

    .blog-cnt .blog-main-title {
        font-size: 42px;
    }

    .single-blog-title {
        font-size: 50px !important;
    }

    .blog-img {
        height: 200px;
    }

    .blog {
        height: 270px;
    }

    .blog-img {
        height: 200px;
    }

    .container2 {
        padding-left: 150px !important;
        padding-right: 150px !important;
    }

    .container12 {
        padding-left: 162px;
        padding-right: 162px;
    }

    .pr-0 {
        padding-left: 0 !important;
    }

    .awards-slider .slick-dots,
    .gallery-slider .slick-dots {
        padding-right: 150px;
    }

    .awards-slider .slick-next,
    .gallery-slider .slick-next {
        transform: translate(calc(-50% + -55px), 2px);
    }

    .awards-slider .slick-prev,
    .gallery-slider .slick-prev {
        transform: translate(calc(-50% + 206px), 2px);
    }
}

@media (min-width:1550px) {
    .container2 {
        padding-left: 290px !important;
        padding-right: 290px !important;
    }

    .container12 {
        padding-left: 302px;
        padding-right: 302px;
    }

    .container2 {
        padding-left: 290px !important;
        padding-right: 290px !important;
    }

    .pr-0 {
        padding-left: 0 !important;
    }
}

@media(max-width:1400px) {
    .single-blog-image {
        height: 408px;
    }

    .single-blog-date-line {
        width: 63%;
    }

    .single-blog-time {
        padding-bottom: 0px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1550px) {
    .col-xxl-8 {
        width: 60%;
    }

    .col-xxl-4 {
        width: 40%;
    }
}

@media (max-width: 1199px) {

    /* .container-x {
        padding-right: 80px;
        padding-left: 80px;
    } */
    .brd {
        height: 200px;
    }

    .blog {
        height: 240px;
    }

    .blog-img {
        height: 170px;
    }

    .container2 {
        padding-left: 100px !important;
        padding-right: 100px !important;
    }

    .container12 {
        padding-left: 112px !important;
        padding-right: 112px !important;
    }


    .recently-blog .blog-content .blog-pragragh span {
        -webkit-line-clamp: 2;
    }

    .slide {
        padding-right: 80px;
    }

    .hero-right {
        margin-right: -87%;
    }

    .hero-col-1 {
        position: relative;
    }

    /* .hero-vertical-line {
        position: absolute;
        right: 50%;
        transform: translate(-50%, -50%);
    } */

    .hero-title h6 {
        font-size: 36px
    }

    .awards-slide-img {
        height: 200px;
    }

    .blog-cnt .blog-main-title {
        font-size: 32px;
    }

    .awards-slide {
        font-size: 14px;
    }

    .awards-slider .slick-dots,
    .gallery-slider .slick-dots {
        padding-right: unset;
        padding-left: 100px;
    }

    .mostafa-img {
        width: 280px;
        height: 280px;
    }

    .gallery-slide {
        width: 95% !important;
        height: 240px;
    }

    .awards-slider .slick-next,
    .gallery-slider .slick-next {
        transform: translate(calc(-50% + -72px), 2px);
    }

    .awards-slider .slick-prev,
    .gallery-slider .slick-prev {
        transform: translate(calc(-50% + 183px), 2px);
    }

    .collapse-content {
        padding-right: 100px;
    }

    .left-section-contact-address {
        font-size: 20px;
        padding-right: 2rem;
    }

    .hero-left .hero-description,
    .hero-left span.btn span {
        font-size: 15px;
    }

    .project-images .project-image-cover,
    .single-project-discription p {
        width: 824px;
    }

    .blog-title span,
    .blog-date span {
        font-size: 20px;
    }

    .blog-pragragh span {
        font-size: 18px;
    }

    .singleProject .blog-img {
        height: 200px;
    }

    .single-project-discription p {
        font-size: 18px;
        line-height: 35px;
    }

    .project-creator h5 {
        font-size: 28px
    }

    .project-creator span {
        font-size: 20px;
    }

    header .text-logo {
        font-size: 32px;
        line-height: 32px;
    }

    .singleProject .blog-title span,
    .blog-date span {
        font-size: 17px;
    }

    .animated-arrow>.main>.text {
        font-size: 26px !important;
    }

    .allBlog .blog-img {
        height: 170px;
    }

    .single-blog-title {
        font-size: 40px !important;
    }

    .blog-img {
        height: 200px;
    }

    .blog-cnt {
        padding-right: 50px;
        padding-left: 50px;
    }

    .container-x {
        padding-right: 50px;
        padding-left: 50px;
    }

    .blog-img {
        height: 170px;
    }

    .left-section-contact-discription span {
        font-size: 18px;
    }

    .contactUs h6.title {
        font-size: 36px;
    }

    .recently-blog .blog {
        height: 218px;
    }

    .allBlog .testCat .custom-btn .custom-btn-text {
        font-size: 20px;
    }

    .pr-0 {
        padding-left: 0 !important;
    }

    .hero-section-single-project {
        padding-right: 50px;
    }
}

@media (min-width:992px) {
    .collapse-content {
        padding-right: 100px;
    }

    .slide.hero-section .row:hover .hero-img img,
    .slide .row:hover .hero-img img {
        transform: translateX(-317px);
    }

    .container-x2 {
        padding-right: 90px;
        padding-left: 90px;
    }



    .first-sec h1 {
        font-size: 30px;
    }
}

@media (max-width:991px) {

    .awards-slider .slick-dots,
    .gallery-slider .slick-dots {
        padding-right: unset;
        padding-left: 50px;
    }

    .first-sec p {
        font-size: 15px;
    }

    .all-project.custom-btn .custom-btn-text {
        font-size: 26px
    }

    .blog {
        height: 234px;
    }

    .awards-slider .slick-next,
    .gallery-slider .slick-next {
        transform: translate(calc(-50% + -94px), 2px);
    }

    .awards-slider .slick-prev,
    .gallery-slider .slick-prev {
        transform: translate(calc(-50% + 160px), 2px);
    }

    .container-x,
    .blog-cnt {
        padding-right: 50px;
        padding-left: 50px;
    }

    .slide {
        padding-left: 0px;
        padding-right: 50px;
    }

    .hero-title span {
        font-size: 16px;
    }

    .hero-title h6 {
        font-size: 28px;
    }

    .blog-cnt .blog-main-title {
        font-size: 28px;
    }

    .hero-vertical-line {
        position: unset;
        transform: unset;
    }

    /* .hero-right {
        margin-left: -88.5%;
    } */

    .hero-left .hero-description {
        height: 195px;
    }

    .hero-img {
        height: 221px;
    }


    /* .slide.hero-section .row:hover .hero-right,
    .slide .row:hover .hero-right {
        transform: translateX(245px);
    } */

    .collapse-content {
        padding-right: 50px;
        padding-left: 50px;
    }

    .singleBlog {
        /* padding-top: 50px; */
        padding-bottom: 50px;
    }

    .single-blog-title {
        font-size: 32px !important;
    }

    .single-blog-date-line {
        width: 55%;
    }

    .single-blog-subject span,
    .single-blog-time span {
        font-size: 21px;
    }

    .single-blog-image {
        height: 314px;
    }

    .contactUs {
        /* padding-top: 50px; */
        padding-bottom: 50px;
    }

    .single-blog-time {
        margin-top: -7px;
    }

    .hero-left .hero-description,
    .hero-left span.btn span {
        font-size: 15px;
    }

    .lang {
        font-size: 24px;
        margin-top: 3px;
    }

    .mobile-menu-item a .mobile-menu-item-title {
        font-size: 34px !important;
    }

    .hero-section-single-project {
        padding-right: 50px;
    }

    .project-images .project-image-cover,
    .single-project-discription p {
        width: 668px;
    }

    /* .allBlog {
        padding-top: 70px;
    } */

    /* .blog-card {
        padding: 10px;
    } */

    .blog-title span {
        font-size: 20px;
    }

    .blog-date span {
        font-size: 16px;
    }

    .blog-pragragh span {
        font-size: 16px;
    }

    .contactUs {
        /* padding-top: 70px; */
        padding-bottom: 70px;
    }

    .contactUs h6.title {
        font-size: 30px;
    }

    .left-section-contact-discription {
        font-size: 18px;
    }

    .left-section-contact-address {
        font-size: 18px;
        padding-right: 0;
    }

    form .btn {
        font-size: 14px;
    }

    .mostafa-img {
        width: 230px;
        height: 230px;
    }

    .footer-pragragh,
    .footer-address,
    .footer-number a,
    .footer-menu li>a,
    .copy-right {
        font-size: 16px;
    }

    .container2.pr-0 {
        padding-left: 0 !important;
    }

    .awards-slide-img {
        height: 176px;
    }

    .first-sec h1 {
        font-size: 30px;
    }

    .about-content {
        gap: 90px;
    }

    .first-sec p {
        font-size: 14px;
    }

    .animated-arrow>.main>.text {
        font-size: 24px !important;
    }

    header .text-logo {
        font-size: 30px;
        line-height: 32px;
    }

    .project-name {
        font-size: 40px !important;
    }

    .project-creator h5 {
        font-size: 26px;
    }

    .container2 {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }

    .container12 {
        padding-left: 62px !important;
        padding-right: 62px !important;
    }

    .brd {
        margin-top: 95px;
    }
    .single-blog-title.page{
        margin-bottom: 0;
    }

}

@media only screen and (min-width:768px) and (max-width:992px) {
    header .left-header {
        padding-bottom: 0;
    }

    /* main {
        margin-top: 110px;
    } */

    header .right-header.collapsible .collapse-content {
        top: 110px;
        /* height: calc(100vh - 110px); */
    }

    .slide.hero-section .row .hero-right.translated,
    .slide .row .hero-right.translated {
        transform: translateX(-72px);
        transition: transform 0.3s ease;
        /* Optional: Add transition for smooth animation */
    }

    .hero-right {
        margin-right: -88.5%;
    }


    .slide.hero-section .row .hero-right.translated,
    .slide .row .hero-right.translated {
        transform: translateX(-245px);
        transition: all .3s;
    }

}

@media only screen and (min-width:800px) and (max-width:830px) {

    .project-images .project-image-cover,
    .single-project-discription p {
        width: 705px;
    }
}

@media (min-width: 768px) {
    .hero-left {
        display: block;
        /* Show the content by default on larger screens */
    }

    .recently-blog .blog-img {
        height: 100%;
    }

    .allBlog .recently-blog .blog {
        transition: all .3s !important;
    }

    .allBlog .recently-blog .blog:hover .blog-card {
        transform: translateX(56px) !important;
        transition: all .3s !important;
    }
}

@media (max-width:767px) {
    .first-sec h1 {
        font-size: 26px;
    }

    .awards-slider .slick-prev,
    .gallery-slider .slick-prev {
        transform: translate(calc(-50% + 149px), 2px);
    }

    .awards-slider .slick-next,
    .gallery-slider .slick-next {
        transform: translate(calc(-50% + -109px), 2px);
    }

    .awards-slider .slick-dots,
    .gallery-slider .slick-dots {
        padding-left: 25px;
    }
    .hero-description-text{
        border-right: unset;
        padding-right: 0;
    }
    .hero-description,.mobile-more-tag{
        opacity: 1 !important;
    }
    #preloader .content {
        scale: .8;
    }
    .mf-cursor{
        opacity: 0;
    }
    .about-content {
        gap: 50px;
    }
.slide .blog-cnt{
    padding-right: 25px;
}
    .gallery-slide {
        height: 210px;
    }

    .blog-pragragh span,
    .blog-date span {
        font-size: 14px;
    }

    .custom-btn .custom-btn-text {
        font-size: 14px;
    }

    .awards-slider .slick-next {
        transform: translate(calc(-50% + -100px), 2px);
    }

    .blog-title span {
        font-size: 18px;
    }

    .allBlog .recently-blog .blog {
        transition: all .3s !important;
    }

    .allBlog .recently-blog .blog:hover .blog-card {
        transform: translateY(-56px) !important;
        transition: all .3s !important;
    }

    .recently-blog .blog {
        height: 236px;
    }

    .blog-cnt .blog-main-title {
        font-size: 24px;
    }

    .container2 {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .container12 {
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    .container2 {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    .allBlog .testCat .custom-btn .custom-btn-text {
        font-size: 18px;
    }

    .recently-blog .blog-content {
        padding-right: 0px;
    }

    .recently-blog .blog-img {
        padding-left: 0;
    }

    .brd {
        margin-top: 90px;
    }

    .men-test.categories a .d-flex.justify-content-center {
        font-size: 16px;
    }

    .container-x,
    .blog-cnt {
        padding-right: 30px;
        padding-left: 30px;
    }

    header .logo {
        width: 80px;
        height: 90px;
    }

    header .text-logo {
        font-size: 18px;
        line-height: 24px;
    }

    .header-vertical-line {
        height: 54px;
    }

    .lang {
        font-size: 18px;
        font-weight: 600;
    }

    /* main {
        margin-top: 106px;
    } */

    header .right-header.collapsible .collapse-content {
        top: 106px;
        /* height: calc(100vh - 106px); */
    }

    .footer-pragragh,
    .footer-address,
    .footer-number a,
    .footer-menu li>a,
    .copy-right {
        font-size: 14px;
    }

    .all-project .read-more-project {
        padding-top: 70px;
        /* padding-bottom: 70px; */
    }

    .slide {
        padding-left: 0;
        padding-right: 0;
    }

    .container-x {
        padding-right: 25px;
        padding-left: 25px;
    }

    .blog-cnt {
        padding-right: 12px;
        padding-left: 12px;
    }

    .brd {
        height: 114px;
    }

    .slide.hero-section .row:hover .hero-img img,
    .slide .row:hover .hero-img img {
        transform: translateX(0);
    }

    .hero-left .d-flex {
        flex-direction: column;
    }

    .hero-left .custom-btn .d-flex {
        flex-direction: row;
    }

    .hero-left {
        padding: 20px 18px;
    }

    .hero-img img.color {
        filter: grayscale(0) brightness(1);
    }


    .hero-content .hero-discroption-section {
        transition: all .5s;
        height: fit-content;
        max-height: 0px;
        overflow: hidden;
    }

    .all-project.custom-btn .custom-btn-text {
        font-size: 22px;
    }

    .hero-content.open .hero-discroption-section {
        transition: all .5s;
        max-height: 500px;
    }

    .hero-content:not(.open) .hero-discroption-section {
        transition: all .5s;

    }

    .single-blog-time {
        margin-top: -2px;
    }

    .hero-description-text {
        border-left: 0;
    }

    /* .hero-content:not(.open) .hero-img{
        filter: grayscale(0) ;
    } */
    /* .menu-btn-2 span::after {
        margin-top: 10px;
    }

    .menu-btn-2 span::before {
        margin-top: -10px;
    } */

    .menu-btn-2 span,
    .menu-btn-2 span::before,
    .menu-btn-2 span::after {
        width: 26px;
    }

    .pr-sm-0 {
        padding-right: 0;
    }

    .pl-sm-0 {
        padding-left: 0;
    }

    .all-project .the-arrow.-left {
        /* top: 95px; */
        left: 16px;
    }

    .animated-arrow>.main>.text {
        font-size: 24px !important;
    }

    .the-arrow.-right>.shaft,
    .animated-arrow:hover>.the-arrow.-left>.shaft {
        width: 50px;
    }

    .mobile-menu-item a .mobile-menu-item-title {
        font-size: 36px !important;
    }

    .collapse-content {
        padding-right: 18px;
        padding-left: 18px;
    }

    .hero-img img {
        object-position: -19rem center;
    }

    .page-link {
        font-size: 15px;
        width: 30px;
        height: 30px;
    }

    .single-blog-title {
        font-size:26px !important;
        line-height: 29px;
    }

    .single-blog-image {
        height: 186px;
    }

    .single-blog-subject span,
    .single-blog-time span {
        font-size: 17px;
    }

    .single-blog-date-line {
        width: 35%;
    }

    .hero-section-single-project {
        padding-right: 20px;
    }

    .project-name {
        font-size: 32px;
    }

    .project-creator h5 {
        font-size: 21px;
    }

    .project-creator span {
        font-size: 17px;
    }

    .project-images .project-image-cover,
    .single-project-discription,
    .project-gif-cover {
        width: 385px;
    }

    .single-project-discription p {
        font-size: 16px;
        line-height: 30px;
    }

    .hero-section-single-project {
        height: 478px;
    }

    .project-name {
        line-height: 17px;
    }

    /* .allBlog {
        padding-top: 50px;
    } */

    .flex-mobile-column {
        flex-direction: column;
    }

    .contactUs {
        /* padding-top: 50px; */
        padding-bottom: 50px;
    }

    .contactUs h6.title {
        font-size: 28px;
    }

    .left-section-contact-discription span {
        font-size: 16px;
    }

    .left-section-contact-discription,
    .left-section-contact-address {
        font-size: 16px;
    }

    .single-blog-image-content {
        font-size: 16px;
    }

    .email,
    .phone-number {
        font-size: 18px;
    }


}

@media (max-width:430px) {
    .hero-section-single-project {
        padding-right: 16px;
    }

    .single-project-discription {
        width: 415px;
    }

    .project-images .project-image-cover,
    .project-gif-cover {
        width: 398px;
    }

    .hero-left .hero-description {
        height: fit-content;
    }

    .hero-left .hero-description-text {
        margin-bottom: 0;
    }


}

@media (max-width:420px) {

    .project-images .project-image-cover,
    .single-project-discription p,
    .project-gif-cover {
        width: 374px;
    }

    .single-project-discription {
        width: 398px;
    }
}

@media (max-width:395px) {
    .single-project-discription {
        width: 375px;
    }

    .project-images .project-image-cover,
    .single-project-discription p,
    .project-gif-cover {
        width: 350px;
    }
}

@media (max-width:380px) {

    .animated-arrow>.main>.text {
        font-size: 26px !important;
    }

    .mobile-menu-item a .mobile-menu-item-title {
        font-size: 40px !important;
    }

    .single-blog-image {
        height: 168px;
    }

    .hero-section-single-project {
        padding-right: 16px;
    }

    .single-project-discription {
        width: 365px;
    }

    .project-images .project-image-cover,
    .project-gif-cover {
        width: 343px;
    }
}

@media (max-width:360px) {
    header .text-logo {
        font-size: 18px;
    }

    header .logo {
        width: 65px;
        height: 75px;
    }

    /* main {
        margin-top: 91px;
    } */

    header .right-header.collapsible .collapse-content {
        top: 91px;
        /* height: calc(100vh - 91px); */
    }

    .hero-title h6 {
        font-size: 26px;
    }

    .blog-cnt .blog-main-title {
        font-size: 26px;
    }

    .hero-description,
    .hero-left span.btn {
        font-size: 14px;
    }

    .hero-left {
        padding: 18px;
    }

    .single-blog-image {
        height: 146px;
    }

    .single-project-discription {
        width: 309px;
    }

    .project-images .project-image-cover,
    .project-gif-cover {
        width: 288px;
    }

    .single-blog-subject span,
    .single-blog-time span {
        font-size: 14px;
    }
}

@media (max-height:670px) {
    .collapse-content.pt-4 {
        padding-top: .5rem !important;
    }
}

@media (orientation:landscape) and (max-width:1000px) {
    header .right-header.collapsible .collapse-content {
        overflow: scroll;
    }

    .mobile-menu-information.pt-5 {
        padding-top: 0 !important;
    }

    /* 
        .collapse-content {
            padding-bottom: 1.5rem;
        } */

    .mobile-menu-information.mt-5 {
        margin-top: 1.5rem !important;
    }

    header .left-header {
        padding-bottom: 0;
    }

    /* 
    main {
        margin-top: 90px;
    } */

    header .right-header.collapsible .collapse-content {
        top: 90px;
        /* height: calc(100vh - 90px); */
        padding-top: 20px !important;
    }

    header .logo {
        width: 83px;
        height: 93px;
    }

    .header-vertical-line {
        height: 50px
    }
}

@media (orientation:landscape) and (max-width:950px) {

    .slide.hero-section .row .hero-right.translated,
    .slide .row .hero-right.translated {
        transform: translateX(-306px);
    }

    .project-images .project-image-cover,
    .single-project-discription p {
        width: 823px;
    }
}

@media (orientation:landscape) and (max-width:900px) {

    /* .slide.hero-section .row .hero-right.translated,
    .slide .row .hero-right.translated {
        transform: translateX(-245px);
    } */

    .project-images .project-image-cover,
    .single-project-discription p {
        width: 775px;
    }
}

@media (orientation: landscape) and (max-width: 830px) {

    .slide.hero-section .row:hover .hero-img img,
    .slide .row:hover .hero-img img {
        transform: translateX(-255px);
    }

}

@media (orientation: landscape) and (max-width: 800px) {

    .slide.hero-section .row .hero-right.translated,
    .slide .row .hero-right.translated {
        transform: translateX(0);
    }
}

@media (orientation:landscape) and (max-width:700px) {

    .slide.hero-section .row .hero-right.translated,
    .slide .row .hero-right.translated {
        transform: unset;
    }

    .project-images .project-image-cover,
    .single-project-discription {
        width: 623px;
    }
}