:root {
  --main-color: #1778f2;
  --second-color: #f2f2f2;
  --bg1: #1d2731;
  --bg2: #18212b;
  --blue-color: #1778f2;
  --color-grey: #f5f5f5;
  --color-ligh-grey: #fafafa;
  --font-grey: #858585;
  --color-block: #181818;
  --color-white: #fff;
}


@media only screen and (max-width: 1400px) {
    .header {
        max-width: 1200px;
        width: 90%;
        margin: auto;
    }

    .container {
        max-width: 1200px;
        width: 90%;
    }
    
 

}

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

    html {
        font-size: 60%;
    }
    
    .office-img{
        height:auto;
        background:none;
    }


    /* career page */
    .modal-form-container form .form-box input[type="file"] {
        width: 100%;
    }


    /* social-media page */

    .media-flex-inner {
        height: 400px;
        padding: 3rem;
    }
    
 
}





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



    html {
        font-size: 60%;
    }


    h2.heading {
        font-size: 6rem;
    }

    /* header start */

    .header {
        width: 90%;
        margin: auto;
    }

    .nav {
        display: none;
    }

    .menu-icon {
        display: block;
        z-index: 99999999999999999999999;
    }


    /* mobile menu */


    .menu-mobile-size {
        display: block;
        width: 100%;
        height: 100vh;
        background-color: var(--color-grey);
        position: fixed;
        top: -1000%;
        left: 0;
        z-index: 99999999999999999999999;
        transition: all 0.5s ease-in;
        /*background:red;*/
    }


    .logo-mobile-container {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5%;
    }

    .logo-mobile-container img {
        width: 200px;
    }

    .logo-mobile-container>i {
        color: var(--blue-color);
        cursor: pointer;
        font-size: 3rem;
    }

    .logo-mobile-menu {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .logo-mobile-menu ul {
        width: 100%;
    }

    .logo-mobile-menu ul li {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
        font-weight: 500;
    }

    .logo-mobile-menu ul li a {
        color: var(--font-grey);
    }

    .logo-mobile-menu ul li ul {
        width: 100%;
        margin-top: 1rem;
        padding: 1rem 0;
        background-color: var(--color-ligh-grey);
        display: none;
    }

    .logo-mobile-menu ul li ul li {
        font-size: 1.2rem !important;
        font-weight: 300;
    }

    .logo-mobile-menu ul li:hover ul {
        display: block;
    }

    .logo-mobile-menu ul li:hover .fa-chevron-down {
        transform: rotate(180deg);
        transition: all 0.2s ease;
    }



    /* banner */
    
     .banner-text, .banner-img{
        width: 100%;}

    .banner-inner-text h1{
        font-size: 3rem;
    }

    .banner-item {
        height: auto;
    }


    /* tab-bar */

    .tab-list {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
        margin: 2rem 0;
        padding: 2rem 0;
    }

    .tab-list>.tab {
        border-radius: 0.5rem 0.5rem;
        padding: 2rem 10rem;
        margin: 0 1rem;
        display: grid;
        place-items: center;
    }

    .tab-list>.tab:first-child {
        border-radius: 2rem 0 0 2rem;
    }

    .tab-list>.tab:last-child {
        border-radius: 0 2rem 2rem 0;
    }

    .tab-content {
        width: 100%;
    }

    .tab-content>.div .tab-text-content {
        width: 100%;
        order: 2;
        margin-top: 2rem;
    }

    .tab-content>.div .tab-img {
        width: 100%;

    }

    /* client card */

    .client-card {
        width: 48%;
    }



    /* service option section */


    .service-box-inner {
        width: 48%;
    }


    /* step section */

    .step-img-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .step-img-box {
        width: 60%;
    }


    .step-text-box {
        width: 40%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: row-reverse;
    }

    .another-box {
        order: 2;
    }


    .step-text-box>i {
        width: 50%;
    }

    .step-text-container {
        width: 100%;
        margin-top: 3rem;
    }

    /* form-input-home */


    .form-input {
        width: 100%;
        margin-bottom: 2rem;
    }

    #submitfrome {
        width: 100%;
    }




    /* about us page */
    
    .flex-box{
      margin: 2rem 0;
    }


    /* career page */

    .vacancy-heading {
        font-size: 2.5rem;
    }


    .modal-form-container form .form-box input {
        width: 100%;
    }

    .modal-form-container form .form-box input[type="submit"] {
        width: 100% !important;
    }
    
    /*gallery*/
    
    .gallery-flex-container{
    width: 100%;
    height: auto;
 height: 300px;
}

.gallery-box{
    width: 30%;}

}

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



    h2.heading {
        font-size: 5rem;
    }



    /* header-mobile */
    .logo-mobile-container img {
        width: 180px;
    }

    .footer-box img {
        width: 110px;
    }

    /* tab */
    .tab-content>.div .tab-text-content h2 {
        font-size: 5rem;
    }

    .tab-list>.tab {
        padding: 2rem 6rem;
    }


    /* step */

    .step-img-box {
        width: 50%;
    }

    .step-text-box {
        width: 50%;
    }



    /* home- form */



    .home-form-box-container {
        width: 100%;
    }

    .office-img {
        width: 100%;
        height:auto;
        margin-top: 3rem;
    }


    .client-profile-text h3 {
        padding: 2rem 0 1rem 0;
    }

    /* testimonaial */

    .client-profile-inner-container {
        margin: 1rem auto;
    }



    .client-testimonial {
        height: auto;
        flex-wrap: wrap;
    }


    .client-testimonial-text-area {
        width: 100% !important;
        order: 2;
    }

    .client-testimonial-img-area {
        width: 100% !important;
        height:auto;
    }





    /* form start */

    .heading-contact-form h2 {
        font-size: 6rem;
    }

    .heading-contact-form p br {
        display: none;
    }

    /* about us */

    .heading-flex h2 br {
        display: none;
    }

    .heading-flex h2 {
        margin-bottom: 2rem;
    }

    .heading-flex h2,
    .heading-flex p {
        width: 100%;
    }

    .flex-box-text,
    .flex-box-img {
        width: 100%;
    }



    .flex-box-img {
        width: 100%;
        margin-top: 2rem;
        order: 2;
    }



    /* contact us */

    .contact-map,
    .contactform-contactpage {
        width: 100%;
    }

    .contact-map {
        margin-bottom: 3rem;
        order: 2;
    }

    .contactform-container {
        padding: 0 0;
    }

    .contactform-container {
        margin-bottom: 3rem;
    }

    .contactform-container input,
    select,
    textarea,
    button {
        padding: 2rem;
    }

    .contactform-container textarea {
        height: 10rem;
    }


    /* career page */

    .vacancy-flex {
        padding: 3rem 0;
    }

    .job-card-container {
        width: 100%;
    }

    .expperience-box p.paragraph {
        font-size: 1.3rem;
    }

    .vacancy-description a {
        margin-right: auto;
        margin-left: 0px;
    }

    .modal-popup>.modal-inner {
        width: 80vw;
    }

    .modal-form-container form .form-box h3 {
        font-size: 1.5rem;
    }

    .modal-form-container {
        width: 90%;
    }


    /* social media marketing */

    .media-text-box h3 br {
        display: none;
    }

    .media-text-box h3 {
        flex-wrap: wrap;
        width: 100%;
    }



    .media-text-box span {
        width: 100%;
        padding-left: 0rem;
        padding-top: 0rem;
    }

    .media-text-box,
    .media-img-box {
        width: 100%;
    }

    .media-img-box {
        margin-top: 2rem;
    }

    .media-flex-inner {
        width: 48%;
        margin-bottom: 2rem;
    }
    
    
    /*gallery*/
    
      .gallery-flex-container{
       height: 250px;
      }
    
    .loadmore {
        width:150px;
    }
    
      .newbannercontainer{
        height: auto;
    }

    .banner-text, .banner-img{
        width: 100%;

}

.banner-text{
    padding: 10% 5%;
}

    
}


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

    .aos-init {
        transform: unset !important;
        opacity: 1 !important;
        transition: unset !important;
    }


    h2.heading,
    h2.heading-another {
        font-size: 5rem;
        line-height: 1;
    }

    .logo-container-item {
        width: 25%;
    }
    
    .d-none{
        display:block !important;
    }

.d-block{
        display:none !important;
    }


    .tab-content>.div .tab-text-content h2 {
        font-size: 5rem;
    }

    .heading-contact-form h2 {
        font-size: 4rem;
        line-height: normal;
    }

    .heading-contact-form p {
        font-size: 1.2rem;
    }

    .heading-contact-form p br {
        display: none;
    }


    /* service */

    .service-box-inner {
        width: 100%;
        height: auto;
    }

    /* client card */

    .client-card {
        width: 100%;
        height: auto;
        padding-bottom: 5%;
        margin-bottom: 2rem;
    }


    /* step */

    .step-img-box {
        width: 100%;
    }

    .step-text-box {
        width: 100%;
    }


    /* faq */

    .faq-contentheading h3 {
        font-size: 2rem;
    }

    /* footer */

    .footer-box img {
        width: 200px;
    }


    .footer-container {
        padding: 3rem 0;
    }

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


    .footer-social {
        width: 100%;
    }

    .footer-social>p {
        text-align: center;
    }

    .footer-social ul {
        justify-content: center;
    }

    .digital-partner {
        width: 50%;
        margin: 1rem auto;
    }

    .about-compnay h3 {
        margin: 1rem auto;
        width: 100% !important;
        text-align: center;
    }

    .about-compnay h3::after {
        left: 50%;
        width: 25%;
        transform: translateX(-50%);
    }



    /* about us page */

    .heading-flex br {
        display: none;
    }

    .heading-flex h2,
    .flex-box-text h2 {
        font-size: 5rem;
    }


    /* career page */

    .vacancy-heading {
        font-size: 2.3rem;
    }


    /* social media marketing page */

    .social-media-container {
        padding: 3rem 0;
    }

    .media-flex-inner {
        width: 100%;
        height: auto;
    }
    
    /*gallery*/
    
    .gallery-box{
        width:48%;
    }
    
    .gallery-flex-container{
        height:380px;
    }
}


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


    h2.heading,
    h2.heading-another {
        font-size: 3.7rem;
        line-height: 1;
    }
    
 

    .usp-box p {
        font-size: 4rem;
    }

    .tab-content>.div .tab-text-content h2 {
        font-size: 4rem;
        line-height: 1;
    }

    .heading-contact-form h2 {
        font-size: 3rem;
    }


    /* logo-img */

    .logo-container-item {
        width: 48%;
    }





    /* contact us */

    .contact-map iframe {
        width: 100%;
        height: 40rem;
    }

}