@media only screen and (min-width: 1401px)
{
    .hero-banner
    {
        background-image: url('/assets/img/services/website-design/banner-bg-2k.png')
    }
}


@media only screen and (max-width: 1399px)
{
    .fs-60
    {
        font-size: 40px;;
    }

    .container-bg-animation
    {
        left: -40% !important;
    }

    section.hero.branding
    {
        .fact
        {
            font-size: 120px;
        }
        &:before, &:after
        {
            display: none;
        }
    }
    

    section.CTA
    {
        .container
        {
            padding: 30px 50px

           
        }
    }


}


@media only screen and (max-width: 1199px)
{
    .fs-90
    {
        font-size: 60px;;
    }
    .fs-60
    {
        font-size: 40px;
    }
    .tab-space
    {
        margin-top:15px;
    }
    .tab-space-x2
    {
        margin-top:30px;
    }
    .tab-space-x3
    {
        margin-top:60px;
    }
    
    .d-none-mobile
    {
        display: none !important;
    }
    .container-bg-animation
    {
        left: -50% !important;
    }


    section.testimonials
    {
        .testimonials-wrapper
        {
            
            flex-wrap: wrap;
            
            .column
            {
                flex: none;
                width:100%;

            }

        }
    }

    section.CTA
    {
        .container
        {
            padding: 30px;
           
            font-size: 40px;;

            
        }
    }



    section.hero.branding
    {
        .fact
        {
            font-size: 90px;
        }
        &:before, &:after
        {
            display: none;
        }
    }

    .main-footer {
        & .footer-title {
            &:after {
                content: none !important;
            }
        }
    }
    
}


@media only screen and (max-width: 991px)
{

    .fs-60
    {
        font-size: 30px;;
    }
    .container-bg-animation
    {
        display: none;
    }
    .mobile-space
    {
        margin-top:15px;
    }
    .mobile-space-x2
    {
        margin-top:30px;
    }
    .mobile-space-x3
    {
        margin-top:60px;
    }

    section.hero.branding
    {
        .fact
        {
            font-size: 120px;
        }
        &:before, &:after
        {
            display: none;
        }
    }
    
    section.message-from-ceo
    {
        .message
        {
            width:120px !important ;
            &.active
            {
                width:calc(100% - 160px) !important;
            }
        }
    }




    .tab-flex-wrap
    {
        flex-wrap: wrap;
    }

    .shape-one, .shape-rotate, .shape-two, .shape-three {
        display: none;
    }

    .mobile-margin{
        margin-bottom: 40px;
    }

    section.who-we-are {
        .laptop {
            position: relative;
        }
        .docs {
            top: 0;
        }
    }

    section.what-we-do {
        & .service-shape {
            &::before {
                content: none;
            }
        }
    }

    .reverse {
        flex-wrap: wrap-reverse;
    }

    section.recent-work {
        & .work-shape {
            &::before {
                content: none;
            }
        }
    }

    /* section.we-rock {
        .t-shirt {
            position: relative;
        }
    } */

    .pl-60 {
        padding-left: 0px;
    }

    section.recent-work {
        .web-portfolio {
            width: fit-content;
            height: fit-content;
        }
    }

    .cta {
        .t-shirt {
            position: relative;
        }
    }

    .recommended {
        margin-top: 40px;
    }

    .web-services {
        padding-top: 100px;
    }

    .main-contact-form {
        & .contact-info-shape {
            padding-left: 0px;
            position: relative;
        }
    }

    .portfolio {
        .web-portfolio img {
            width: 100%;
        }
    }
}

@media only screen and (max-width: 767px)
/* @media only screen and (max-width: 576px) */
{
    .hh2 {
        font-size: 60px;
    }

    .hh5 {
        font-size: 60px;
    }

    header
    {
        padding: 20px 10px;
    }

    header .logo img
    {
        /* width:170px; */
        /* transform: translateY(10px); */

    }

    /* .nav-sticky {
        padding: 15px 20px;
    } */
    
    section
    {
        padding-inline: 10px !important;
        /* padding-block: 100px !important; */
    }
    
    h1, .fs-90
    {
        font-size: 40px;
        line-height: 50px;
    }

    .flex-wrap-mobile {
        flex-wrap: wrap;
    }


    .fs-24
    {
        font-size: 20px !important;
        line-height:26px !important;
    }

    p, section.footer p 
    {
        font-size: 18px;
        line-height:22.5px;
    }

    section.portfolio
    {
        height: max-content;
        min-height: unset;
        

        h1
        {
            font-size: 36px;
            line-height:43px;
        }
        p
        {
            font-size: 20px !important;
            line-height: 26px !important;

        }
    }

 
    section.client-review
    {
        padding-inline:0px !important;

        .container 
        {
            padding-inline: 30px;
        }
        &::before, &::after
        {
            display:none;
        }

        .fs-fact
        {
            font-size:152px !important;
        }
        .marque-wrapper
        {
            padding:0px;

            &::before
            {
                display: none;
            }
        }


    }
        

    section.news-publication
    {
        h1, p
        {
            text-align: center;
        }
        .swiper-pagination
        {
            text-align: center;
        }
        .news-publication-swiper p
        {
            text-align: left;
        }
    }

    section.testimonials .testimonials-wrapper
    {
        padding:0px;
    }


    section.message-from-ceo
    {
        .message
        {
            width:50px !important ;
            &.active
            {
                width:calc(100% - 140px) !important;
            }
        }
    }

   


    section.footer
    {
        .form-component
        {
            padding: 10px 15px;
        }
        label
        {
            font-size: 14px !important
        }
        
        input, textarea
        {   font-size: 16px !important; }
            
        button
        {
            text-align: center;
        }

        .submit-wrapper button
        {
            width:100%;;
        }

        .contact-info {
            gap: 20px;
        }
    }

    /**** BRANDING PAGE ****/
    section.hero.branding
    {
        .mb-70
        {
            margin-bottom: 50px !important;
        }
        .fact-wrapper
        {
            flex-wrap: wrap;

            
            div
            {
               
                

                &.fact
                {
                    padding-right: 100px;
                    font-size: 100px;
                    line-height: 1em;
                   
                    transition-delay: 0s;

                    &::before
                    {
                        right:50px;
                    }
                }

            }

            .separator:before
            {
                display: none;
            }

            .pl-50
            {
                padding-left: unset;
            }
        }

    }

    /* section.hero.branding
    {
        .fact
        {
            font-size: 70px;
        }
        &:before, &:after
        {
            display: none;
        }

    } */
    
    section.branding-process
    {

        .comein
        {
            .col-md-6:nth-child(2)
            {
               
                padding-top:20px;
            }
        }
    }


    section.CTA
    {
        .container
        {
            padding: 30px;
            text-align: center;

            img
            {
                display: none;
            }

            div
            {
                max-width: 100%;
            }
        }
    }

    /**** WEBSITE PAGE ****/
    section.services-categories
    {
        
        .element3D img
        {
            height: 300px;;
        }

        .min-height
        {
            min-height: 150px !important;
        }
    }

    section.packages
    {
        .package-item
        {
            margin: 0px;
            width: 100%;
            padding: 30px;
        }

        ul li
        {
            font-size: 18px !important
        }
    }
   

    /**** CONTACT PAGE ****/
    section.faqs
    {
        & .accordion {

            & .accordion-item {

              


                & .accordion-body {

                    & p {
                        line-height: 36px;
                        padding: 0;
                    }
                }
            }
        }
    }

    .footer-bottom-bar {
        & .copy-right {
            text-align: center;
        }

        & .social-media {
            justify-content: center !important;
            margin-top: 10px;
        }
    }

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

    .mobile-align-items-start
    {
        align-items: start !important;
    }

    .mobile-visibility-hidden
    {
        visibility: hidden;;
    }
}

@media only screen and (max-width: 575px)
{

    .fs-60
    {
        font-size:30px;
    }
    .fs-30
    {
        font-size:24px !important;

    }
    .fs-24
    {
        font-size: 18px;;
        line-height: 1.4em;
    }
    .fs-20
    {
        font-size: 16px;;
        line-height: 1.4em;
    }

    .mobile-flex-wrap
    {
        flex-wrap: wrap;
    }

    section.contact
    {
        a.email
        {
            font-size: 22px;
        }
    }

    section.faq {
        .accordion {
            .accordion-button {
                padding: 20px 20px;
            }

            .accordion-body {
                margin-inline: 20px;
            }
        }
    }

    

    .main-footer {
        & .footer-left-box {
            border: none !important;
        }

        & .footer-title {
            &:after {
                content: none !important;
            }
            & .typewriter-wrapper {
                position: unset !important;
            }
        }
    }

    

    .start-project {
        & .input-group {
            & .form-control {
                margin-bottom: 15px;
            }
        }
    }

    .hh1 {
        font-size: 80px;
    }

    .hh2 {
        font-size: 48px;
        line-height: 0.9em;
    }

    .hh3 {
        font-size: 48px;
    }

    .hh4 {
        font-size: 48px;
    }

    .hh5 {
        font-size: 48px;
        line-height: 0.9em;
    }
    
    .title {
        font-size: 48px;
    }

    .mobile-margin{
        margin-bottom: 40px;
    }    

    section.cta-1 {
        & .cursor {
            &::before {
                top: 74px;
            }
        }
    }

    section.recent-work {
        .nav {
            justify-content: center;
        }
    }

    section.hero-home {
        &::after {
            height: 80px;
        }

        .content {
            margin-top: 150px;
            margin-bottom: 100px;
        }

        .social-icons {
            display: none;
        }
    }

    .scroll-icon {
        display: none;
    }

    section.hero-home {
        padding: 0 20px !important;
    }

    .reverse {
        flex-wrap: wrap-reverse;
    }

    .main-footer, .footer-bottom-bar {
        padding-inline: 10px !important;
    }

    .hero-banner, .contact-hero-banner {
        .social-icons {
            display: none;
        }
    }

    .portfolio, .packages {
        .nav {
            justify-content: center;
        }

        /* .web-portfolio img {
            margin-bottom: 0px;
        } */
    }

    .main-contact-form {
        & .contact-info-shape {
            &::before {
                content: none;
            }
        }
    }

    .client-reviews {
        & .review-box {
            padding: 30px;
        }

        & .testimonial-box {
            & .desc {
                font-size: 24px;
            }
        }
    }

    .who-we-are, .we-rock, .cta {
        .mt-50{
            margin-top: 20px;
        }
    }

}


@media only screen and (max-width: 430px)
{

}


@media only screen and (max-width: 360px)
{

}



@media only screen and (max-width: 1799px)
{
    .tech-logo-sec .marque-wrapper {
        transform: translateY(0px) !important;
    }
}