/* =========================================================
Media Responsive
============================================================ *?


/* 01. Tablet Responsive */

@media screen and (max-width: 1024px){
    h1{
        font-size: 4.25rem;
        line-height: 1.25em;
    }
    h2{
        font-size: 3rem;
        line-height: 1.25em;
    }
    h3{
        font-size: 1.35;
        line-height: 1.175em;
    }
    h4{
        font-size: 0.75rem;
    }
    h5{
        font-size: 1.05rem;
    }
    h6{
        font-size: 1.05rem;
    }

    p {
        font-size: 0.875rem;
    }

    button, a{
        font-size: 0.875rem;
    }

    .navbar{
        background-color: transparent;
        position: relative;
        z-index: 2;
    }
    .navbar-collapse{
        display: none;
    }

    .nav-btn{
        display: block;
    }
    .nav-link-wrapper{
        margin-right: 0;
        margin-left: auto;
        padding-right: 4.5em;
        max-width: 350px;
        border: none;
        height: 0%;
        justify-content: end;
    }
    .about-dashboard{
        width: 35%;
    }
    .about-img{
        width: 65%;
    }

    .about-title{
        width: 100%;
    }
    .about-quote{
        width: 60%;
    }

    .whychooseus-title-wrapper,
    .whychooseus-card-container{
        width: 100%;
    }
    .joinus-content{
        max-width: 60%;
    }
    .spot-banner .spacer{
        height: 200px;
    }
    .spot-banner .spot-content{
        transform: translateY(130px);
    }

    .text-center-container{
        width: 90%;
    }
    .logo-container{
        max-width: 30%;
    }
    .tab-content{
        padding: 0.5em;
    }
    .pricing-currency{
        font-size: 1.55rem;
    }

    .price{
        font-size: 4rem;
    }

    .price-detail{
        font-size: 1.05rem;
    }

    .blog-link{
        font-size: 1.05rem;
    }

    .card-copyright{
        padding: 1.5em 1.5em 1.5em 1.5em;
    }
}

/* 02. Mobile Responsive */

@media screen and (max-width: 767px){
    h1{
        font-size: 4.25rem;
    }
    h2{
        font-size: 3rem;
        line-height: 1.25em;
    }
    h3{
        font-size: 1.35;
        line-height: 1.25em;
    }
    h4{
        line-height: 1.125em;
    }
    h5{
        line-height: 1.25em;
    }
    h6{
        font-size: 1.05rem;
    }
    .about-dashboard,
    .about-img{
        width: 100%;
    }
    .about-quote{
        width: 100%;
    }
    .logo-container{
        max-width: 50%;
    }
    .nav-link-wrapper{
        padding: 0;
        flex: 0;
    }
    .about-quote-container .spacer{
        height: 250px;
    }
    .text-center-container{
        width: 100%;
    }
    .heading-split{
        text-align: center;
        justify-content: center;
        padding-right: 0;
    }
    .whychooseus-title{
        width: 100%;
        text-align: center;
    }
    .whychooseus-image{
        width: 100%;
    }
    .whychooseus-image .spacer{
        height: 400px;
    }
    .joinus-banner::before{
        background-color: var(--accent-color-transparent);
        background-image: linear-gradient(45deg, var(--accent-color-transparent) 0%, var(--primary) 0%);
    }
    .joinus-content{
        max-width: 100%;
        text-align: center;
        align-items: center;
    }
    .spot-banner .spacer{
        height: 100px;
    }
    .pricing-currency{
        font-size: 1.55rem;
    }
    .price{
        font-size: 4rem;
    }
    .sub-heading{
        align-self: center;
    }
    .card-copyright{
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

/* 03. Mobile Spacing Responsive */

@media screen and (min-width: 767px){

    /* Flex spacing (gap) */

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

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

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

/* 04. Tablet Style Responsive */

@media screen and (min-width: 1024px){
    /* Flex spacing (gap) */
    .gspace-xl-0 { 
        gap: 0px 0px; 
    }
    .gspace-xl-1 { 
        gap: 10px 10px; 
    }
    .gspace-xl-2 { 
        gap: 20px 20px; 
    }
    .gspace-xl-3 { 
        gap: 30px 30px; 
    }
    .gspace-xl-4 { 
        gap: 40px 40px; 
    }
    .gspace-xl-5 { 
        gap: 50px 50px; 
    }

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

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

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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