/*==================================================
  1.0 Tablet Responsive
==================================================*/

@media screen and (max-width: 991.98px) {
    h1,
    .heading-xl{
        font-size: 3.5rem;
    }
    h2,
    .heading-lg{
        font-size: 2rem;
    }
    h3,
    .heading-md{
        font-size: 1.5rem;
    }
    h4,
    .heading-sm{
        font-size: 1.25rem;
    }
    .nav-btn{
        display: flex;
    }    
    .nav-link-container{
        display: none;
    }
    .sidebar-overlay,
    .sidebar{
        display: block;
    }
    .footer__logo img{
        width: 38%;
    }
    .footer__main{
        flex-direction: column;
    }
    .footer__nav{
        width: 100%;
        padding-bottom: 2em;
    }
    .footer__contact{
        width: 100%;
    }
    .footer__contact-columns{
        flex-direction: row-reverse;
    }
    .footer__cta{
        width: 53%;
    }
    .footer__cta-content{
        flex-direction: column;
    }
    .footer__contact-items{
        width: 47%;
    }
    .footer__contact-item{
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-logo-container{
        width: 65%;
    }
    .navbar-logo-container img{
        width: 45%;
    }
    .banner-home__page-layout{
        flex-direction: column;
    }
    .banner-home__title-container{
        width: 100%;
        padding: 29em 1em;
    }
    .banner-home__heading{
        width: 100%;
    }
    .banner-home__features-container{
        width: 100%;
        flex-direction: row;
    }
    .banner-home__desc-image{
        width: 50%;
    }
    .banner-home__desc-image img{
        height: 45vh;
        border-radius: 0px 0px 12px;
    }
    .banner-home__features{
        width: 50%;
    }
    .banner-inner{
        background-position: center left;
        padding: 7em 2em 25em;
    }
    .banner-inner__excerpt{
        width: 53%;
    }
    .collection__header{
        width: 100%;
    }
    .collection__list{
        grid-template-columns: repeat(2, 1fr);
    }
    .about__page-layout{
        flex-direction: column;
    }
    .about__media{
        width: 100%;
    }
    .about__content{
        width: 100%;
    }
    .about__media-stat-value{
        font-size: 3.5em;
    }
    .about__counter-value{
        font-size: 3.5rem;
    }
    .about__content-description .divider{
        margin: 16px 0px;
    }
    .how-it-works__page-layout{
        padding: 2em;
    }
    .how-it-works__steps{
        flex-wrap: wrap;
        gap: 12px;
    }
    .how-it-works__step{
        width: 48%;
    }
    .how-it-works__step-divider{
        width: 30%;
    }
    .how-it-works__cta{
        width: 47%;
        justify-content: flex-start;
    }
    .why-choose-us{
        padding: 4em 1em;
    }
    .why-choose-us__header{
        flex-direction: column;
        gap: 20px;
    }
    .why-choose-us__content{
        flex-direction: column;
        padding: 0;
    }
    .why-choose-us__content::before{
        opacity: 0;
        width: 100%;
        left: 0;
    }
    .why-choose-us__sidebar{
        width: 100%;
        gap: 55px;
    }
    .why-choose-us__media-image{
        width: 100%;
    }
    .why-choose-us__media-image img{
        height: 43vh;
        border-radius: 12px;
    }
    .why-choose-us__media-panel{
        width: 100%;
        border-radius: 12px;
    }
    .why-choose-us__media-panel::before{
        opacity: 1;
    }
    .why-choose-us__media-panel .spacer{
        height: 28px;
    }
    .pricing{
        padding: 4em 1em;
    }
    .pricing__page-layout{
        flex-direction: column;
        gap: 55px;
    }
    .pricing__intro{
        width: 100%;
    }
    .pricing__card-container{
        width: 100%;
    }
    .pricing__feature{
        width: 100%;
    }
    .pricing__card-price{
        font-size: 1.5rem;
    }
    .testimonial__page-layout::before{
        opacity: 0;
    }
    .testimonial__page-wrapper{
        flex-direction: column;
    }
    .testimonial__media{
        width: 100%;
    }
    .testimonial__media img{
        border-radius: 12px;
    }
    .testimonial__content{
        width: 100%;
        padding: 2em;
        border-radius: 12px;
    }
    .testimonial__content::before{
        opacity: 1;
    }
    .testimonial__slide-text{
        font-size: 1.25em;
    }
    .contact{
        padding: 4em 1em;
    }
    .contact__tab-content{
        flex-direction: column-reverse;
    }
    .contact__tab-content.contact__content--reverse{
        flex-direction: column;
    }
    .contact__media{
        width: 100%;
    }
    .contact__form-wrapper{
        width: 100%;
        padding: 1.5em;
    }
    .blog{
        padding: 4em 1em;
    }
    .blog__header{
        flex-direction: column;
        align-items: flex-start;
    }
    .blog__header-text{
        width: 100%;
    }
    .blog__item{
        flex-direction: column;
    }
    .blog__item-image{
        width: 100%;
    }
    .blog__item-content{
        width: 100%;
        padding: 30px;
    }
    .single-post{
        padding: 4em 1em;
    }
    .single-post__page-layout{
        flex-direction: column;
    }
    .single-post__content{
        width: 100%;
    }
    .single-post__media-block{
        flex-direction: column;
    }
    .single-post__media{
        width: 100%;
    }
    .single-post__block{
        width: 100%;
    }
    .single-post__sidebar{
        width: 100%;
    }
    .single-post__sidebar-item-content{
        width: 80%;
    }
    .single-post__sidebar-item-title{
        font-size: 1rem;
    }
    .banner-notfound{
        padding: 15em 1em;
        background-position: center left;
    }
    .banner-notfound__excerpt{
        width: 67%;
    }
}

/*==================================================
  2.0 Mobile Responsive
==================================================*/

@media screen and (max-width: 767.98px) {
    h1,
    .heading-xl{
        font-size: 2.5rem;
    }
    h2,
    .heading-lg{
        font-size: 1.75rem;
    }
    button, a,
    .btn, .nav-link{
        font-size: 0.875rem;
    }
    p{
        font-size: 0.875rem;
    }
    .navbar-container{
        padding: 1.3em 1em;
    }
    .navbar-logo-container{
        width: 48%;
    }
    .navbar-logo-container img{
        width: 100%;
    }
    .footer__logo img{
        width: 53%;
    }
    .footer__nav{
        flex-wrap: wrap;
    }
    .footer__nav-column.nav-other{
        width: 42%;
    }
    .footer__nav-column.nav-page{
        width: 45%;
    }
    .footer__nav-column.nav-social{
        width: 100%;
    }
    .footer__contact-columns{
        flex-direction: column;
    }
    .footer__contact-items{
        width: 100%;
    }
    .footer__cta{
        width: 100%;
    }
    .banner-home__title-container{
        padding: 30em 1em 2em;
        background-position: -69px 0px;
    }
    .banner-home__features-container{
        flex-direction: column-reverse;
    }
    .banner-home__desc-image{
        width: 100%;
    }
    .banner-home__features{
        width: 100%;
        padding: 2em;
    }
    .banner-inner{
        background-position: -260px 0px;
        padding: 5em 1em 28em;
    }
    .banner-inner__excerpt{
        width: 100%;
    }
    .collection__list{
        grid-template-columns: repeat(1, 1fr);
    }
    .collection__item-stat{
        width: 27%;
    }
    .collection__item-stats .collection__item-stat:nth-child(even){
        width: 30%;
    }
    .collection__footer-text{
        font-size: 0.875rem;
    }
    .about__page-layout{
        width: 100%;
    }
    .about__media{
        background-position: -124px 0px;
        padding: 2em;
    }
    .about__media-stats{
        width: 100%;
    }
    .about__media-stat-value{
        font-size: 2.5em;
    }
    .about__counter-value{
        font-size: 2.5rem;
    }
    .how-it-works__page-layout{
        gap: 30px;
        padding: 2.5em;
    }
    .how-it-works__step{
        width: 100%;
        flex-direction: column;
        gap: 33px;
        padding-bottom: 2.8em;
    }
    .how-it-works__step-icon{
        width: 58%;
        padding: 1em;
    }
    .how-it-works__step-divider{
        transform: rotate(90deg);
    }
    .how-it-works__cta{
        width: 100%;
        justify-content: center;
    }
    .why-choose-us__media-image img{
        height: 60vh;
    }
    .why-choose-us__media-panel .spacer{
        height: 4px;
    }
    .why-choose-us__media-panel-item{
        flex-direction: column;
        align-items: start;
    }
    .pricing__card-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .pricing__feature{
        flex-direction: column;
    }
    .pricing__card-list li{
        font-size: 0.875rem;
    }
    .contact__tabs{
        grid-template-columns: repeat(1, 1fr);
    }
    .contact__media .spacer{
        height: 380px;
    }
    .contact__form-wrapper{
        padding: 1em;
    }
    .blog__item-content{
        padding: 20px;
    }
    .blog__item-meta{
        font-size: 0.875rem;
    }
    .single-post__sidebar-item-content{
        width: 100%;
    }
    .single-post__sidebar-item-title{
        font-size: 0.875rem;
    }
    .banner-notfound{
        background-position: -260px 0px;
    }
    .banner-notfound__excerpt{
        width: 100%;
    }
}

/* ====================== */
/* 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; 
    }
}