/* ************************ corem-website-main ************************ */

/* Mobile */
@media (max-width: 450px) {
    :root {
        --crm-padding: 0 20px;
        --crm-width: calc(100% - (20px)*2);
        --crm-hero-width: 100%;
        --crm-hero-size: 45px;
        --crm-title: 26px;
        --crm-desc: 13px;
    }
    .crm-mode-desk {
        display: none;
    }

    .crm-hero {
        height: 500px;
    }
    .crm-hero-b {
        flex-direction: column;
        align-items: center;
    }
    .crm-hero-s {
        font-size: 11px;
    }

    .crm-whyus, .crm-wsection {
        flex-wrap: wrap;
    }
    .crm-mix {
        flex-direction: column-reverse;
    }

    .crm-ftop, .crm-ftebex-links {
        flex-direction: column;
    }
    .crm-ftebex {
        flex-direction: column;
        align-items: flex-start;
    }
    .crm-fomain {
        width: 100%;
    }

    .crm-tcontainer {
        animation: crm-scrolling-r 10s linear infinite;
    }

    .crm-qitem-ques {
        font-size: 14px;
    }
    .crm-qitem-c {
        width: 6px;
        height: 6px;
    }

    .crm-page-heading {
        font-size: 18px;
    }
    .crm-page-sub {
        font-size: 14px;
    }
    .crm-page-content {
        font-size: 14px;
    }

    .crm-stext, .crm-slogin {
        font-size: 14px;
    }

    .crm-sdsection {
        flex-direction: column;
    }

    .crm-basket {
        grid-template-columns: none;
    }
    .crm-bpackage {
        flex-direction: column;
    }
    .crm-bpackage-img {
        width: 100%;
    }
    .crm-packages {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .crm-item-body {
        flex-direction: column;
    }
    .crm-isection {
        max-width: 100%;
    }
    .crm-isection:first-child {
        position: unset;
    }
    .crm-ifull {
        display: none;
    }

    .crm-idetails {
        gap: 15px;
        flex-direction: column;
    }
    .crm-ibuttons {
        flex-direction: column;
    }
    .crm-ifeatures-b {
        grid-template-columns: repeat(1, 1fr);
    }
    .crm-iguide-b {
        font-size: 14px;
    }
    .crm-icomp-i, .crm-iescrow {
        font-size: 11px;
    }
}

/* Tablets */
@media (min-width:451px) and (max-width: 950px) {
    :root {
        --crm-padding: 0 20px;
        --crm-width: calc(100% - (20px)*2);
        --crm-hero-width: 90%;
        --crm-hero-size: 45px;
    }
    .crm-mode-desk {
        display: none;
    }

    .crm-hero {
        height: 500px;
    }
    .crm-hero-s {
        font-size: 13px;
    }
    .crm-whyus, .crm-wsection {
        flex-wrap: wrap;
    }
    .crm-mix {
        flex-direction: column-reverse;
    }
    
        
    .crm-ftop {
        flex-direction: column;
    }
    .crm-ftebex {
        flex-direction: column;
        align-items: flex-start;
    }
    .crm-fomain {
        width: 100%;
    }

    .crm-tcontainer {
        animation: crm-scrolling-r 10s linear infinite;
    }

    .crm-stext {
        font-size: 14px;
    }

    .crm-basket {
        grid-template-columns: none;
    }
    .crm-bpackage {
        flex-direction: column;
    }
    .crm-bpackage-img {
        width: 100%;
    }

    .crm-item-body {
        flex-direction: column;
    }
    .crm-isection {
        max-width: 100%;
    }
    .crm-isection:first-child {
        position: unset;
    }
}

/* Small Desktops */
@media (min-width:950px) and (max-width: 1366px) { 
    :root {
        --crm-padding: 0 20px;
        --crm-width: calc(100% - (20px)*2);
        --crm-hero-width: 90%;
    }
    .crm-mode-mobile {
        display: none;
    }

    .crm-hero {
        height: 500px;
    }
    .crm-mix {
        flex-direction: column-reverse;
    }

    .crm-ftebex {
        flex-direction: column;
        align-items: flex-start;
    }
    .crm-ihead {
        max-width: 50%;
    }
}

/* Desktops */
@media (min-width:1367px) { 
    .crm-mode-mobile {
        display: none;
    }
    body {
        background-size: cover;
    }
    :root {
        --crm-padding: 0 calc((100% - 1367px)/2 + 20px);
        --crm-width: calc(100% - calc(100% - 1327px));
    }
    .crm-pdetails {
        flex-direction: row-reverse;
    }

    .crm-ihead {
        max-width: 50%;
    }
}