/* ====================== */
/* 01. Tablet Responsive */
/* ====================== */
@media screen and (max-width: 991.98px) {
    body{
        font-size: 15px;
    }
    h1,
    .heading-xl{
        font-size: 48px;
    }
    h2,
    .heading-lg{
        font-size: 36px;
    }
    h3,
    .heading-md{
        font-size: 28px;
    }
    h4,
    .heading-sm{
        font-size: 22px;
    }
    h5,
    .heading-xs{
        font-size: 18px;
    }
    h6,
    .heading-xxs{
        font-size: 16px;
    }
    p{
        font-size: 15px;
    }
    .section{
        padding: 70px 20px;
    }
    .btn{
        padding: 15px 30px;
    }
    .header-info__wrapper{
        padding: 12px 20px;
    }
    .header-info__container{
        grid-template-columns: 65fr 35fr;
    }
    .header-info__item{
        font-size: 13px;
    }
    .navbar-container{
        padding: 20px;
    }
    .navbar-logo-container{
        width: 50%;
    }
    .navbar-logo-container img{
        width: 50%;
    }
    .nav-link-container{
        display: none;
    }
    .navbar-cta-container{
        display: none;
    }
    .nav-btn{
        display: flex;
    }
    .sidebar-overlay,
    .sidebar{
        display: block;
    }
    .footer-container{
        padding: 70px 20px 20px;
    }
    .footer__page-header{
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
        justify-content: center;
    }
    .footer-logo{
        justify-content: center;
    }
    .footer-logo img{
        width: 35%;
    }
    .footer-social{
        font-size: 14px;
        width: 30px;
        height: 30px;
        line-height: 20px;
    }
    .footer__links-container{
        flex-wrap: wrap;
    }
    .footer__quick-links{
        width: 31%;
    }
    .footer__quick-links.contact-link{
        width: 31%;
    }
    .footer-list li{
        font-size:  15px;
    }
    .footer__newsletter-container{
        width: 100%;
        text-align: center;
    }
    .sub-heading{
        font-size: 11px;
    }
    .form input, 
    .form textarea{
        font-size: 15px;
        padding: 15px 30px;
    }
    .banner-home{
        padding: 120px 20px 0px;
    }
    .home__page-layout{
        flex-direction: column;
        align-items: center;
    }
    .home__intro{
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .home__intro p{
        width: 86%;
    }
    .home__image-col{
        width: 65%;
        align-self: center;
    }
    .banner-inner__breadcrumb li{
        font-size: 15px;
    }
    .banner-notfound__description{
        width: 50%;
    }
    .banner-notfound__image img{
        width: 55%;
    }
    .about__content{
        flex-direction: column;
    }
    .about__intro{
        width: 100%;
    }
    .about__image-col{
        width: 100%;
        padding: 0px;
    }
    .about__highlight-image{
        background-position: -16px 0px;
    }
    .about__tags{
        flex-wrap: wrap;
    }
    .about__tag{
        font-size: 11px;
    }
    .story-video__banner{
        min-height: 0vh;
    }
    .story-video__page-layout{
        gap: 80px;
    }
    .benchmark__content{
        flex-direction: column;
    }
    .benchmark__image{
        width: 100%;
        min-height: 562px;
    }
    .benchmark__award-list{
        width: 100%;
        padding: 0;
    }
    .benchmark__award{
        padding: 25px;
        align-items: start;
    }
    .card-service{
        padding: 25px;
    }
    .service__heading .service__heading-title{
        width: 100%;
    }
    .why-choose__page-layout{
        grid-template-columns: repeat(1, 1fr);
    }
    .how-it-works__page-layout{
        flex-direction: column;
        gap: 35px;
    }
    .how-it-works__intro{
        width: 100%;
        padding-right: 0px;
        position: relative;
    }
    .how-it-works__step-list{
        width: 100%;
    }
    .how-it-works__step{
        padding: 20px;
        position: relative;
    }
    .how-it-works__step:nth-child(1),
    .how-it-works__step:nth-child(2),
    .how-it-works__step:nth-child(3),
    .how-it-works__step:nth-child(4){
        top: 0px
    }
    .how-it-works__heading-step{
        font-size: 11px;
    }
    .how-it-works__step-body{
        justify-content: center;
    }
    .testimonial__content{
        grid-template-columns: repeat(1, 1fr);
        gap: 35px;
    }
    .testimonial__review-card{
        padding: 20px;
    }
    .testimonial__review-quote-icon{
        right: 20px;
        bottom: 20px;
    }
    .testimonial__stats{
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
        column-gap: 30px;
    }
    .testimonial__stat-number{
        font-size: 40px;
    }
    .pricing__price{
        font-size: 40px;
    }
    .pricing-list li{
        font-size: 15px;
    }
    .pricing__footer-item{
        font-size: 15px;
    }
    .faq__page-layout{
        flex-direction: column;
    }
    .faq__content{
        width: 100%;
    }
    .faq__accordion-col{
        width: 100%;
        padding-right: 0px;
    }
    .faq__accordion .accordion-button{
        padding: 18px 22px;
    }
    .faq__accordion .accordion-body{
        padding: 18px 22px;
    }
    .contact-cta__page-layout{
        width: 75%;
    }
    .job__grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .job__card-meta{
        font-size: 13px;
    }
    .job-detail__page-layout{
        flex-direction: column;
    }
    .job-detail__content{
        width: 100%;
        padding-right: 0;
    }
    .job-detail__benefit-list{
        padding: 25px;
    }
    .job-detail__sidebar{
        width: 100%;
        position: relative;
        top: 0;
    }
    .job-detail__info-card{
        padding: 25px;
    }
    .job-detail__apply-card{
        padding: 25px;
    }
    .job-detail__apply-logo img{
        width: 10%;
    }
    .blog__heading{
        width: 100%;
    }
    .blog__grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .single-post__featured-image{
        min-height: 450px;
    }
    .single-post__quote{
        padding: 25px;
    }
    .single-post__quote-text{
        font-size: 18px;
    }
    .single-post__content{
        padding: 0px;
    }
    .contact__page-layout{
        flex-direction: column;
    }
    .contact__info-col{
        width: 100%;
    }
    .contact__info-icon{
        font-size: 28px;
    }
    .contact__form-col{
        width: 100%;
        padding: 30px;
    }
}

/* ====================== */
/* 02. Mobile Responsive */
/* ====================== */
@media screen and (max-width: 767.98px) {
    body{
        font-size: 14px;
    }
    h1,
    .heading-xl{
        font-size: 36px;
    }
    h2,
    .heading-lg{
        font-size: 28px;
    }
    h3,
    .heading-md{
        font-size: 22px;
    }
    h4,
    .heading-sm{
        font-size: 20px;
    }
    h5,
    .heading-xs{
        font-size: 17px;
    }
    h6,
    .heading-xxs{
        font-size: 15px;
    }
    p{
        font-size: 14px;
    }
    button, a,
    .btn, .nav-link,
    .dropdown-item{
        font-size: 14px;
    }
    .header-info__wrapper{
        padding: 12px 10px;
    }
    .header-info__container{
        gap: 10px;
    }
    .header-info__container{
        grid-template-columns: 1fr;
        align-items: center;
    }
    .header-info__item{
        font-size: 12px;
    }
    .form input, 
    .form textarea{
        font-size: 14px;
        padding: 13px 26px;
    }
    .navbar-container{
        padding: 20px 10px;
    }
    .navbar-logo-container{
        width: 70%;
    }
    .navbar-logo-container img{
        width: 60%;
    }
    .sidebar-menu a {
        font-size: 14px;
    }
    .footer-container{
        padding: 70px 10px 20px;
    }
    .footer-logo img{
        width: 60%;
    }
    .footer__quick-links,
    .footer__quick-links.contact-link{
        width: 100%;
    }
    .footer-list li{
        font-size: 14px;
    }
    .section{
        padding: 70px 10px;
    }
    .section{
        padding: 70px 10px;
    }
    .btn{
        padding: 13px 26px;
    }
    .banner-inner__breadcrumb li{
        font-size: 14px;
    }
    .banner-notfound__description{
        width: 100%;
    }
    .banner-notfound__image img{
        width: 65%;
    }
    .home__image-col{
        width: 100%;
    }
    .about__intro-higlight{
        flex-direction: column;
    }
    .about__image-col{
        grid-template-columns: repeat(1, 1fr);
    }
    .about__highlight-image{
        background-position: 0px 0px;
        min-height: 50vh;
    }
    .story-video__header h2{
        width: 100%;
    }
    .story-video__play-btn{
        width: 85px;
        height: 85px;
        font-size: 21px;
    }
    .story-video__image-decoration {
        width: 115px;
        margin-left: -100px;
    }
    .benchmark__award{
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    .card-service{
        padding: 20px;
    }
    .why-choose__checklist{
        grid-template-columns: repeat(1, 1fr);
    }
    .why-choose__image-col{
        flex-direction: column;
    }
    .why-choose__card-group{
        width: 100%;
    }
    .why-choose-card-stats{
        width: 100%;
    }
    .why-choose-card-stats-avatars img {
        width: 60px;
        height: 60px;
    }
    .how-it-works__step{
        grid-template-columns: repeat(1, 1fr);
    }
    .testimonial__stats{
        grid-template-columns: repeat(1, 1fr);
    }
    .testimonial__stat-number{
        font-size: 32px;
    }
    .pricing__price{
        font-size: 32px;
    }
    .pricing-list li{
        font-size: 14px;
    }
    .pricing__footer-item{
        font-size: 14px;
    }
    .faq__help-header{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .faq__accordion .accordion-button{
        padding: 18px;
    }
    .faq__accordion .accordion-body{
        padding: 18px;
    }
    .contact-cta__page-layout{
        width: 100%;
    }
    .contact-cta__highlight-list{
        grid-template-columns: repeat(1, 1fr);
    }
    .contact-cta__highlight{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .job__content.content-desktop{
        display: none;
    }
    .job__content.content-mobile{
        display: flex;
    }
    .job__tab-nav{
        flex-direction: column;
    }
    .job__grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .job-detail__benefit-item{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .nav-pills .nav-link.job__tab-link, 
    .job__accordion .accordion-button.job__tab-link{
        font-size: 14px;
    }
    .job-detail__info-item{
        grid-template-columns: repeat(1, 1fr);
    }
    .blog__grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .single-post__featured-image{
        min-height: 220px;
    }
    .single-post__quote{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .single-post__quote-text{
        font-size: 17px;
    }
    .contact__form-col{
        padding: 25px;
    }
    #contact-form{
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ====================== */
/* 03. Mobile Spacing Responsive */
/* ====================== */
@media screen and (min-width: 767.98px){

    /* Flex spacing (gap) */

    .flex-gap-md-0 { 
        gap: 0px; 
    }
    .flex-gap-md-1 { 
        gap: 10px; 
    }
    .flex-gap-md-2 { 
        gap: 20px; 
    }
    .flex-gap-md-3 { 
        gap: 30px; 
    }
    .flex-gap-md-4 { 
        gap: 40px; 
    }
    .flex-gap-md-5 { 
        gap: 50px; 
    }
    .flex-gap-md-100 { 
        gap: 100px; 
    }

    /* Grid spacing (column-gap) */

    .flex-gap-x-md-0 { 
        column-gap: 0px; 
    }
    .flex-gap-x-md-0 { 
        column-gap: 0px; 
    }
    .flex-gap-x-md-1 { 
        column-gap: 10px; 
    }
    .flex-gap-x-md-2 { 
        column-gap: 20px; 
    }
    .flex-gap-x-md-3 { 
        column-gap: 30px; 
    }
    .flex-gap-x-md-4 { 
        column-gap: 40px; 
    }
    .flex-gap-x-md-5 { 
        column-gap: 50px; 
    }
    .flex-gap-x-md-100 { 
        column-gap: 100px; 
    }

    /* Grid spacing (row-gap) */

    .flex-gap-y-md-0 { 
        row-gap: 0px; 
    }
    .flex-gap-y-md-1 { 
        row-gap: 10px; 
    }
    .flex-gap-y-md-2 { 
        row-gap: 20px; 
    }
    .flex-gap-y-md-3 { 
        row-gap: 30px; 
    }
    .flex-gap-y-md-4 { 
        row-gap: 40px; 
    }
    .flex-gap-y-md-5 { 
        row-gap: 50px; 
    }
    .flex-gap-y-md-100 { 
        row-gap: 100px; 
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-gap-md-0 { 
        --bs-gutter-x: 0px; 
        --bs-gutter-y: 0px; 
    }
    .grid-gap-md-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-gap-md-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-gap-md-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-gap-md-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-gap-md-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }
    .grid-gap-md-100 { 
        --bs-gutter-x: 100px; 
        --bs-gutter-y: 100px; 
    }

    /* Grid spacing (column-gap) */

    .grid-gap-x-md-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-gap-x-md-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-gap-x-md-2 { 
        --bs-gutter-x: 20px; 
    }
    .grid-gap-x-md-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-gap-x-md-4 { 
        --bs-gutter-x: 40px; 
    }
    .grid-gap-x-md-5 { 
        --bs-gutter-x: 50px; 
    }
    .grid-gap-x-md-100 { 
        --bs-gutter-x: 100px; 
    }

    /* Grid spacing (row-gap) */

    .grid-gap-y-md-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-gap-y-md-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-gap-y-md-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-gap-y-md-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-gap-y-md-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-gap-y-md-5 { 
        --bs-gutter-y: 50px; 
    }
    .grid-gap-y-md-100 { 
        --bs-gutter-y: 100px; 
    }
}

/* ====================== */
/* 04. Tablet Spacing Responsive */
/* ====================== */
@media screen and (min-width: 991.98px){
    /* Flex spacing (gap) */
    .flex-gap-lg-0 { 
        gap: 0px; 
    }
    .flex-gap-lg-1 { 
        gap: 10px; 
    }
    .flex-gap-lg-2 { 
        gap: 20px; 
    }
    .flex-gap-lg-3 { 
        gap: 30px; 
    }
    .flex-gap-lg-4 { 
        gap: 40px; 
    }
    .flex-gap-lg-5 { 
        gap: 50px; 
    }
    .flex-gap-lg-100{
        gap: 100px;
    }

    /* Grid spacing (column-gap) */

    .flex-gap-x-lg-0 { 
        column-gap: 0px;
    }
    .flex-gap-x-lg-1 { 
        column-gap: 10px; 
    }
    .flex-gap-x-lg-2 {
         column-gap: 20px; 
    }
    .flex-gap-x-lg-3 { 
        column-gap: 30px; 
    }
    .flex-gap-x-lg-4 { 
        column-gap: 40px; 
    }
    .flex-gap-x-lg-5 { 
        column-gap: 50px; 
    }
    .flex-gap-x-lg-100{
        column-gap: 100px;
    }

    /* Grid spacing (row-gap) */

    .flex-gap-y-lg-0 { 
        row-gap: 0px; 
    }
    .flex-gap-y-lg-1 { 
        row-gap: 10px; 
    }
    .flex-gap-y-lg-2 { 
        row-gap: 20px; 
    }
    .flex-gap-y-lg-3 { 
        row-gap: 30px; 
    }
    .flex-gap-y-lg-4 { 
        row-gap: 40px; 
    }
    .flex-gap-y-lg-5 { 
        row-gap: 50px; 
    }
    .flex-gap-y-lg-100 {
        row-gap: 100px;
    }

    /* Grid spacing (row-gap & column-gap) */

    .grid-gap-lg-0 { 
        --bs-gutter-x: 0px; 
        --bs-gutter-y: 0px; 
    }
    .grid-gap-lg-1 { 
        --bs-gutter-x: 10px; 
        --bs-gutter-y: 10px; 
    }
    .grid-gap-lg-2 { 
        --bs-gutter-x: 20px; 
        --bs-gutter-y: 20px; 
    }
    .grid-gap-lg-3 { 
        --bs-gutter-x: 30px; 
        --bs-gutter-y: 30px; 
    }
    .grid-gap-lg-4 { 
        --bs-gutter-x: 40px; 
        --bs-gutter-y: 40px; 
    }
    .grid-gap-lg-5 { 
        --bs-gutter-x: 50px; 
        --bs-gutter-y: 50px; 
    }
    .grid-gap-lg-100 { 
        --bs-gutter-x: 100px; 
        --bs-gutter-y: 100px; 
    }

    /* Grid spacing (column-gap) */

    .grid-gap-x-lg-0 { 
        --bs-gutter-x: 0px; 
    }
    .grid-gap-x-lg-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-gap-x-lg-1 { 
        --bs-gutter-x: 10px; 
    }
    .grid-gap-x-lg-2 { 
        --bs-gutter-x: 20px;
    }
    .grid-gap-x-lg-3 { 
        --bs-gutter-x: 30px; 
    }
    .grid-gap-x-lg-4 { 
        --bs-gutter-x: 40px; 
    }
    .grid-gap-x-lg-5 { 
        --bs-gutter-x: 50px; 
    }
    .grid-gap-x-lg-100 { 
        --bs-gutter-x: 100px; 
    }

    /* Grid spacing (row-gap) */

    .grid-gap-y-lg-0 { 
        --bs-gutter-y: 0px; 
    }
    .grid-gap-y-lg-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-gap-y-lg-1 { 
        --bs-gutter-y: 10px; 
    }
    .grid-gap-y-lg-2 { 
        --bs-gutter-y: 20px; 
    }
    .grid-gap-y-lg-3 { 
        --bs-gutter-y: 30px; 
    }
    .grid-gap-y-lg-4 { 
        --bs-gutter-y: 40px; 
    }
    .grid-gap-y-lg-5 { 
        --bs-gutter-y: 50px; 
    }
    .grid-gap-y-lg-100 { 
        --bs-gutter-y: 100px; 
    }
}