Viewing File: /home/ubuntu/codegama-ui-revamp/assets/css/responsive.css

/*================================
Template Name: CodeGama
Author: Beno darry
Author website: http://codegama.com/
Version: 1.0
================================== */

@media (max-width: 575.98px) {}

@media (min-width: 576px) and (max-width: 767.98px) {}

@media (min-width: 768px) and (max-width: 991.98px) {}

@media (min-width: 992px) and (max-width: 1199.98px) {}

@media (min-width: 992px) {}

@media (min-width: 1440px) {}

@media (max-width: 1199.98px) {
    .banner-content h1 {
        font-size: 1.8em;
    }

    .banner-content p {
        font-size: 1em;
    }

    .badge-slider-card img {
        width: 100px !important;
    }

    .open-header-btn {
        font-size: 0.9em !important;
    }

    .header-nav-center .navbar .nav-item .nav-link {
        font-size: 0.85em;
    }

    .our-services-tab-link-sec .nav-pills {
        justify-content: center;
        gap: 3em;
        column-gap: 0;
    }

    .our-service-content-box {
        padding: 2em;
    }

    .our-service-content-img {
        width: 55%;
    }

    .cta-info h3 {
        font-size: 1.2em;
    }

    .logo {
        margin-right: 0;
    }

    .technology-tab-link-sec .nav-pills {
        grid-template-columns: repeat(3, 1fr);
    }
    .technology-img{
        width: 50%;
    }
    .technology-tab-content-sec .tab-content>.tab-pane{
        text-align: center;
    }

    .case-study-btn-sec {
        white-space: nowrap;
    }

    .contact-us-social-link {
        gap: 1em;
    }

    .footer-logo {
        max-width: 13em;
    }

    .footer-about-social-link {
        grid-template-columns: repeat(3, 1fr);
        place-items: center;
    }

    .contact-us-banner-content-box {
        width: 40%;
    }
    .our-teams-list-sec {
        margin-top: -2em;
    }
    .banner-caption-1{
        display: block;
        height: auto;
        margin-top: 7em;
    }
    .our-experience-about-box {
        grid-template-columns: repeat(2, 1fr);
    }
    .container {
        width: 960px;
        max-width: 100%;
      }
      .faq-img{
        width: 85%;
      }
      .footer-location-box {
        grid-template-columns: repeat(2, 1fr);
      }
      .resp-mrg-btm-xl{
        margin-bottom: 2em;
      }
      .disp-none{
        display: none;
      }
      .wise-industry-icon{
        display: none;
      }
      .our-service-content-img-sec{
        text-align: center;
      }
}

@media (max-width: 991.98px) {
    .featured-block-two{
        border: 0!important;
    }
    .featured-block-two .inner-box{
        border: 0!important;
    }
    .featured-block-two{
        padding: 1em!important;
    }
    .industry-card{
        background-color: #f9f9f9;
        padding: 1em;
        border-radius: 16px;
        min-height: 18em;
        justify-content: center;
    }
    .featured-section-two{
        padding: 2em 0!important;
    }
    .featured-block-two .inner-box{
        padding: 0!important;
    }
    .featured-section-two .inner-container{
        padding: 0!important;
        background-color: unset!important;
    }
    .logo-box {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .resp-mrg-btm-md {
        margin-bottom: 2em;
    }

    .our-expertise-logo-box {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .case-study-img {
        width: 100%;
    }

    .banner-video-sec {
        display: none;
    }

    .banner-caption {
        height: 55vh;
    }

    .home-banner-sec {
        min-height: 50vh;
    }

    .header-nav-center {
        background-color: var(--secondary-color);
        padding: 0;
    }

    .our-service-content-img {
        margin-top: 1em;
    }

    .our-service-content-img-sec {
        text-align: center;
    }

    .cta-card {
        flex-direction: column;
        text-align: center;
    }

    .technology-box {
        margin-top: 3em;
    }

    .technology-tab-link-sec .nav-link {
        height: 100%;
    }

    .resp-order-change {
        order: 2;
    }

    .cta-info.cta-right-align {
        text-align: center;
    }

    .success-story-box {
        margin-top: 2em;
    }

    .success-story-content {
        text-align: center;
    }

    .sm-padding {
        padding: 2em 0;
    }

    .case-study-box {
        margin-top: 3em;
    }

    .footer-location-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .find-us-card-img {
        margin-bottom: 0;
    }

    .badge-slider-card img {
        width: 100px !important;
    }

    .footer-about-badge-sec {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1em;
    }

    .case-study-box {
        overflow: hidden;
    }

    .our-expertise-box {
        margin-top: 3em;
    }

    .service-we-offer-you-box {
        grid-template-columns: repeat(2, 1fr);
    }
    .our-teams-list-sec {
        margin-top: -2em;
    }
    .home-banner-sec.our-teams-sec{
        min-height: 50vh;
    }
    .banner-caption-2{
        height: 50vh;
    }
    .about-us-img-sec{
        text-align: center;
    }
    .faq-img {
        width: 100%;
    }
    .container {
        width: 720px;
        max-width: 100%;
      }
      .technology-img{
        width: 100%;
      }
}


@media (max-width: 767.98px) {
    .banner-content h1 {
        font-size: 1.5em;
    }

    .banner-badge-box {
        flex-wrap: wrap;
        gap: 0.5em;
        justify-content: center;
    }

    .banner-btn-sec {
        flex-wrap: wrap;
    }

    .our-experience-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .badge-slider-card img {
        width: 100% !important;
    }

    .our-services-tab-link-sec {
        margin-top: 3em;
    }

    .our-services-tab-link-sec .nav-pills {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .our-service-link-icon-sec {
        right: 0;
    }

    .cta-img {
        width: 100%;
    }

    .cta-info h3 {
        max-width: 100%;
    }

    .technology-list-sec {
        display: none;
    }

    .technology-tab-link-sec .nav-pills {
        grid-template-columns: repeat(2, 1fr);
    }

    .success-story-item {
        grid-template-columns: repeat(1, 1fr);
    }

    .our-expertise-box {
        margin-top: 2em;
    }

    .case-study-btn-sec {
        flex-direction: column;
    }

    .contact-us-social-link {
        flex-wrap: wrap;
    }

    .footer-about-badge-img-sec {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-copyright-card {
        gap: 1em;
        flex-direction: column;
    }

    .hire-developer-img {
        width: 100%;
    }

    .banner-content {
        padding-top: 2em;
    }

    .navbar-toggler {
        padding-right: 0;
    }

    .our-service-content-box {
        padding: 1.5em;
    }

    .our-service-list-sec li {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .our-expertise-card {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .service-we-offer-you-box {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-we-offer-you-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-us-banner-content-box {
        width: 80%;
        left: 40px;
        min-height: 40vh;
    }

    /* .banner-caption{
    padding-top:3em;
} */
    .banner-content {
        text-align: center;
    }

    .banner-btn-sec {
        justify-content: center;
    }
    .banner-hire-developer-img-sec{
        text-align: center;
    }
    .hire-developer-page .banner-content{
        padding-top: 5em;
    }
    .hire-developer-about-sec{
        margin-top: 2em;
    }
    .our-hiring-header-sec{
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .resp-mrg-btm-xl{
        margin-bottom: 5em;
    }
    .margin-right-sm{
        margin-right: auto;
    }
    .our-hiring-item{
        margin-left: 0;
    }
    .our-hiring-box {
        margin-top: 5em;
    }
    .our-hiring-card-1{
        padding: 0;
    }
    .our-hiring-card-2{
        padding: 0;
    }
    .our-hiring-card{
        padding: 0;
    }
    .our-hiring-item{
        margin-top: 1.2em;
    }
    .our-hiring-item{
        top: -9px;
    /* padding: 2em 1.5em;
    width: 100%;
    margin-top: 1.2em;
    margin-left: -2.5em; */
    left: 5px;
    }
    .our-hiring-header-sec h2 {
        font-size: 1.8em;
    }
    .our-hiring-header-sec p {
        font-size: 1.2em;
    }
    /* .our-services-tab-link-sec{
        overflow-x: hidden;
    } */
    .footer-widget h3{
        margin-bottom: 1em;
    }
    .design-expertise-box{
        display: flex;
        margin-right: 0;
        margin-top: 2em;
        flex-direction: column;
    }
    .design-expertise-right-sec{
        padding-left: 15px;
        padding-right: 15px;
    }
    /* .style-card-two-box{
        overflow-x: hidden;
    } */
    .style-two-card{
        width: 90%;
        margin: auto;
    }
    .section-title h2{
        text-align: center;
    }
    .thank-you-header-sec h2 {
        font-size: 4em;
    }
    .mobile-video-thumbnail-sec{
        display: block;
    }
    .banner-caption{
        display: block;
        height: auto;
        padding-bottom: 2em;
    }
    .mobile-banner-img{
        width: 100%;
        margin-top: 1em;
    }
    .our-experience-info h2 {
        font-size: 2em;
    }
    .our-experience-info p {
        font-size: 1em;
    }
    .our-experience-info{
        text-align: center;
    }
    .our-teams-list-sec {
        margin-top: -2em;
    }
    .banner-caption-1{
        margin-top: 5em;
    }
    .top-post-img{
        height: 15em;
    }
    .blog-post-top-list-card{
        flex-direction: column;
    }
    .blog-post-top-list-card{
        display: block;
    }
    .blog-post-top-list-img{
        height: 10em;
        width: 100%;
    }
    .blog-post-top-list-info{
        padding-top: 1em;
    }
    .blog-post-top-list-box{
        row-gap: 1em;
    }
    .mobile-d-none{
        display: none;
    }
    .show-on-mobile{
        display: block!important;
    }
    .menu > ul > li > ul{
        min-width: 100%;
    }
    .mega-menu-grid-sec {
        grid-template-columns: repeat(1, 1fr);
        overflow: auto;
        height: 55vh;
    }
    .menu > ul > li > ul{
        left: 0;
    }
    .mega-menu-grid-1{
        padding: 1em!important;
    }
    .mega-menu-link{
        margin-bottom: 0em;
        margin-top: 1em;
    }
    .mega-menu-grid-2{
        padding: 1em!important;
    }
    .mega-menu-grid-3{
        padding: 1em!important;
        gap:1em;
    }
    .contact-us-calendly-sec h2 {
        font-size: 2em;
    }
    .faq-img {
        width: 100%;
    }
    .about-how-we-do-box {
        margin-top: 2em;
    }
    .about-what-we-do-box{
        margin-top: 2em;
    }
    .padding-right-sm {
        padding-right: 0;
    }
    .banner-caption-2 {
        height: 75vh;
    }
    .home-banner-sec.our-teams-sec {
        min-height: 60vh;
    }
    .our-experience-about-box {
        grid-template-columns: repeat(1, 1fr);
    }
    .technology-tab-link-sec .nav-link{
        padding: 1em;
    }
    .technology-info h4{
        padding-bottom: 0;
    }

    .wise-industry-icon-sec-2{
        top: 85px;
        right: 0px;
        left: unset;
    }
    .wise-industry-icon-sec{
        display: none;
    }
    .wise-industry-icon-sec-1{
        display: none;
    }
    .our-expertise-img{
        width: 80%;
    }
    .wise-industry-icon-sec-3{
        display: none;
    }
    .our-service-content-img{
        max-width: 100%;
    }
    .resp-order-change-mobile {
        order: 2;
    }
    .resp-mrg-btm-xs{
        margin-bottom: 2em;
    }
    .footer-about-badge-sec{
        align-items: center!important;
    }

    .footer-about-badge-img-sec{
        display: flex;
        align-items: center;
        gap: 1em
    }
    .footer-about-box{
        align-items: center;
    }
    .footer-about-content{
        text-align: center;
    }
    .faq-question-icon {
        width: 4em;
    }
    .faq-question-icon-sec{
        right: unset;
        left: 50px;
    }
    .banner-content .banner-badge-box{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
    .badge-slider-nav img{
        height: 8em;
    }
    .home-banner-sec.error-banner{
        min-height: 50vh;
    }
    .error-card{
        height: 50vh;
    }
    .thank-you-card{
        height: 70vh;
    }
    .banner-caption-3 .banner-content{
        padding-top: 0;
    }
    .technology-img{
        width: 100%;
    }
    .our-service-content-img{
        margin-top: 1em;
    }
    .section-title h2{
        font-size: 1.8em;
    }
    .job-card-descripition-sec {
        grid-template-columns: auto!important;
        gap: 1em!important;
        justify-items: center;
    }
    .job-card-info .job-card-info-wrap h3{
        text-align: center;
    }
    .job-card-info-skills {
        flex-direction: column;
    align-items: flex-start!important;
    gap: 1em!important;
    }
    .job-card-info-skills .job-card-skills {
        flex-direction: column;
    align-items: flex-start!important;
    }
    .job-word-mode-wrap{
    align-items: flex-start!important;
        flex-direction: column;
        gap: 1em!important;
    }
    .job-card-info{
        flex-direction: column;
        align-items: flex-start!important;
    }
    .job-full-card-wrap{
        padding: 1em;
    }
    .job-card-apply-sec{
        padding-top: 1em;
        width: 100%;
    }
    .job-card-skills{
        flex-direction: column;
        align-items: stretch!important;
    }
    .job-card-skills span{
        text-align: center;
    }
    .job-card-info-wrap{
        width: 100%;
    }
}

@media (max-width: 575.98px) {}



/* Large Device CSS */

@media screen and (min-width: 1400px) {
    .container {
      width: 1320px;
      max-width: 100%;
    }
  }
  @media screen and (min-width: 1600px) {
    .container {
      width: 1520px;
      max-width: 100%;
    }
    .badge-slider-card img{
        width: 11em;
    }
  }
  @media screen and (min-width: 1900px) {
    .container {
      width: 1820px;
      max-width: 100%;
    }
    .faq-img {
        width: 80%;
    }
    .badge-slider-card img{
        width: 13em;
    }
  }