@media only screen and (min-width : 600px) and (max-width : 1050px){
    html{
        font-size: 16px;
    }

    .safe-area{
        width: 90%;
    }

    .tablet{
        display: initial !important;
    }

    .slide-content { padding: 0 24px; align-items: center; text-align: center; }
    .heroSwiper .swiper-button-prev,
    .heroSwiper .swiper-button-next { display: none; }

    .header nav{
        display: none !important;
    }

    .header{
        width: 95%;
    }

    .header a.btn.cwsr.iconic{
        border-radius: 50%;
        font-size: 0px;
        padding: 2px;
    }

    .header a:hover.btn.cwsr.iconic{
        background-color: var(--color-pallet-accent);
    }

    .header a:hover.btn.cwsr.iconic > span > i{
        background-color: var(--color-pallet-accent);
    }

    .header a.btn.cwsr.iconic > span{
        margin-right: 0px;
    }

    .header .navicons{
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    a.logo{
        font-size: 1.2rem;
    }

    a.logo > i{
        width: 42px;
        height: 42px;
    }

    .slide-content{
        width: 100%;
    }
    
    section.home-highlights > div{
        flex-direction: row;
        flex-wrap: wrap;
    }

    section.home-highlights > div > ul{
        width: 48%;
        margin-bottom: 30px !important;
    }

    section.hasSpacer{
        padding-top: 35px;
        padding-bottom: 35px;
    }

    section.home-aboutus > div{
        flex-direction: row;
        justify-content: space-between;
    }

    section.home-aboutus > div > ul{
        width: 48%;
    }

    ul.home-aboutus-options{
        margin-right: 0px;
    }

    ul.home-tour-content{
        padding-left: 10px;
        padding-right: 10px;
    }

    .section-title{
        line-height: 1.5;
    }

    ul.home-spaces-content > li:nth-child(3) > div{
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 0px;
        gap: 30px;
    }

    div.home-space{
        width: 45%;
        margin-bottom: -30px;
    }

    .home-faq-content > li:nth-child(3){
        margin-top: 0px;
    }

    .home-faq-content > li:nth-child(3) > ul > li > h3 > span{
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
    }

    ul.home-contact-form{
        width: 45%;
    }

    ul.home-contact-form > li:last-child{
        gap: 10px;
    }

    ul.home-contact-form > li:last-child > span{
        display: flex;
        align-items: center;
        line-height: 1.5;
    }

    ul.home-contact-form > li:last-child > span > i{
        flex-shrink: 0;
        margin-left: 10px;        
    }

    section.footer::before{
        width: 90%;
    }

    .footer-container > ul{
        flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-container > ul > li:not(:last-child){
        margin-bottom: 30px;
    }

    li.footer-logo{
        width: 100%;
    }

    li.footer-contacts{
        width: 62%;
    }

    li.footer-extra{
        width: 35%;
    }
}

@media only screen and (max-width : 600px){
    html{
        font-size: 15px;
    }

    .safe-area{
        width: 90%;
    }

    .mobile{
        display: initial !important;
    }

    .slide-content { padding: 0 24px; align-items: center; text-align: center; }
    .heroSwiper .swiper-button-prev,
    .heroSwiper .swiper-button-next { display: none; }

    .header nav{
        display: none !important;
    }

    .header{
        width: 95%;
    }

    .header a.btn.cwsr{
        border-radius: 50%;
        font-size: 0px;
        padding: 2px;
        margin-right: auto;
    }

    .header a.btn.cwsr > span{
        margin-right: 0px;
    }

    .header a:hover.btn.cwsr{
        background-color: var(--color-pallet-accent);
    }

    .header a:hover.btn.cwsr > span > i{
        background-color: var(--color-pallet-accent);
    }

    .header a.btn.cwsr.menu{
        margin-right: 3px;
    }

    a.logo{
        font-size: 1.2rem;
    }

    a.logo > i{
        width: 42px;
        height: 42px;
    }

    .slide-content{
        width: 100%;
    }

    section.home-highlights > div{
        flex-direction: column;
    }

    section.home-highlights > div > ul{
        width: 100%;
    }

    section.home-highlights > div > ul:not(:last-child){
        margin-bottom: 30px;
    }

    section.hasSpacer{
        padding-top: 35px;
        padding-bottom: 35px;
    }

    section.home-aboutus > div{
        flex-direction: column;
    }

    section.home-aboutus > div > ul{
        width: 100%;
    }

    ul.home-aboutus-options{
        margin-right: 0px;
        margin-top: 60px;
    }

    ul.home-tour-content{
        padding-left: 10px;
        padding-right: 10px;
    }

    ul.home-tour-content > li:nth-child(4){
        gap: 20px;
    }

    .section-title{
        line-height: 1.5;
    }

    ul.home-spaces-content > li:nth-child(3) > div{
        flex-direction: column;
        margin-top: 0px;
        gap: 30px;
    }

    div.home-space{
        width: 100%;
        margin-bottom: -30px;
    }

    .home-stats-content{
        flex-wrap: wrap;
    }

    .home-stats-content > ul{
        width: 50%;
        padding: 7%;
    }

    .home-faq-content > li:nth-child(3){
        margin-top: 0px;
        flex-direction: column;
        gap: 15px;
    }

    .home-faq-content > li:nth-child(3) > ul{
        width: 100%;
    }

    .home-faq-content > li:nth-child(3) > ul > li > h3 > span{
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
    }

    ul.home-contact-form{
        width: 70%;
        margin-right: auto;
    }

    ul.home-contact-form > li:last-child{
        gap: 10px;
    }

    ul.home-contact-form > li:last-child > span{
        display: flex;
        align-items: center;
        line-height: 1.5;
    }

    ul.home-contact-form > li:last-child > span > i{
        flex-shrink: 0;
        margin-left: 10px;        
    }

    section.footer::before{
        width: 90%;
    }

    .footer-container > ul{
        flex-direction: column;
    }

    .footer-container > ul > li{
        width: 100% !important;
    }

    .footer-container > ul > li:not(:last-child){
        margin-bottom: 30px;
    }

    .footer-logo-links a{
        font-size: 0.8rem;
    }

    li.footer-extra{
        flex-direction: row-reverse;
        margin-top: 0px;
        justify-content: space-between;
    }

    li.footer-extra > *:not(:last-child){
        margin-bottom: 0px;
    }

    .footer-bar-container{
        flex-direction: column;
        line-height: 1.5;
        align-items: center;
        gap: 10px;
        text-align: center;        
    }
}