body {
    background-color: var(--color-background-sub);
    color: black;
    margin: 0;
    padding: 0;
    height: 100%;
}

.wrapper {
    min-height: 100vh;          /* full viewport height */
    display: flex;
    flex-direction: column;      /* stack main + footer vertically */
}

.typetext {
    font-family: AquireLight !important;
}

.selected {
    cursor: pointer;
}

.selected:hover {
    color: var(--color-secondary) !important;

}

.country-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.country-item:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-background-sub) !important;
}

.g-recaptcha {
    display: flex !important;
    justify-content: center !important;
}

.card {
    background: transparent !important;
}

.card-body {
    background: var(--color-background) !important;
    color: var(--color-text) !important;
    box-shadow: -5px -5px 15px 10px var(--color-secondary), 5px 5px 15px 7px var(--color-primary);
    border-radius: 30px;
}

.card-body button {
    color: var(--color-text);
}

/*For 1280px Resolution start */
@media only screen and (min-width: 1280px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(3, 25px);
        grid-template-columns: repeat(49, 25px);
    }

    .nav-design {
        grid-row: 2 / 5;
        grid-column: 1 / 48;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
    }

    .nav-text {
        grid-row: 3;
        grid-column: 4 / all;
        font-size: xx-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: repeat(23, 50px);
    }

.header-text {
    grid-row: 2;
    grid-column: 3;
    font-size: xxx-large;
    font-family: AquireLight;
}

.auth-tab {
    font-family: 'AquireLight', 'Manrope', sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
    display: inline-block;
}

.auth-tab.active {
    color: var(--color-text);
}

.captcha-label {
    font-family: 'AquireLight', 'Manrope', sans-serif;
    font-weight: 400;
    letter-spacing: 0.12em;
}

    .body-main {
        display: grid;
        grid-template-rows: repeat(10, 50px);
        grid-template-columns: repeat(25, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 3 / 6;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 6;
        grid-column: 3 / 7;
    }

    .body-schools-content-view-1 {
        grid-row: 1;
        grid-column: 8 / 11;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 6;
        grid-column: 8 / 12;
    }

    .body-schools-content-view-2 {
        grid-row: 1;
        grid-column: 13 / 16;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 6;
        grid-column: 13 / 17;
    }

    .body-schools-content-view-3 {
        grid-row: 1;
        grid-column: 18 / 21;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 6;
        grid-column: 18 / 22;
    }

    .body-content-link {
        grid-row: 10;
        grid-column: 11 / all;
    }

    .full-page-background {
        position: absolute;      /* scrolls with page */
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        min-height: 400px;        /* fallback minimum height */
        max-height: 100vh;          /* never taller than viewport */
        background-image: url('../images/settings/background.png');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: contain;   /* keeps full image visible on all screens */
        z-index: -1;               /* behind content */
        opacity: 0.3;
        pointer-events: none;      /* clicks go through */
    }
    .team-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border-radius: 1px 30px 30px 1px;
        color: var(--color-text);
        max-width: 60%;
        margin: 3rem 0 1rem 0; /* top margin for blank row */
        padding: 0.5rem 1rem;
        flex-wrap: nowrap; /* prevent wrapping */
    }



    .courses-section {
        display: flex;
        justify-content: center;
        margin-top: 60px;
    }

    .courses-table {
        border-collapse: separate;
        border-spacing: 0 10px;
        width: 80%;
        text-align: center;
        font-family: AquireLight, sans-serif;
    }

    .courses-table th {
        background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
        color: var(--color-background-sub);
        padding: 10px;
        border-radius: 15px 15px 0 0;
    }

    .courses-table td {
        background-color: var(--color-background-sub);
        border: 1px solid var(--color-secondary);
        padding: 10px;
        border-radius: 15px;
    }

    /* School end */

}

/*For 1280px Resolution end */

/*For 1024px and 1279px Resolution start */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(3, 25px);
        grid-template-columns: repeat(40, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 36;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
    }

    .nav-text {
        grid-row: 2;
        grid-column: 4 / all;
        font-size: xx-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: repeat(15, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 3;
        font-size: xxx-large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(19, 50px);
        grid-template-columns: repeat(22, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 5 / 9;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 7;
        grid-column: 6 / 10;
    }

    .body-schools-content-view-1 {
        grid-row: 1;
        grid-column: 12 / 16;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 7;
        grid-column: 13 / 17;
    }

    .body-schools-content-view-2 {
        grid-row: 10;
        grid-column: 5 / 9;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 16;
        grid-column: 6 / 10;
    }

    .body-schools-content-view-3 {
        grid-row: 10;
        grid-column: 12 / 16;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 16;
        grid-column: 13 / 17;
    }

    /* School end */

}

/*For 1024px and 1279px Resolution end */

/*For 884px and 1023px Resolution start */
@media only screen and (min-width: 884px) and (max-width: 1023px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(3, 25px);
        grid-template-columns: repeat(35, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 32;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
    }

    .nav-text {
        grid-row: 2;
        grid-column: 4 / all;
        font-size: xx-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: repeat(15, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 3;
        font-size: xx-large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(20, 50px);
        grid-template-columns: repeat(19, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 3 / 7;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 7;
        grid-column: 4 / 8;
    }

    .body-schools-content-view-1 {
        grid-row: 1;
        grid-column: 10 / 14;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 7;
        grid-column: 11 / 15;
    }

    .body-schools-content-view-2 {
        grid-row: 10;
        grid-column: 3 / 7;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 16;
        grid-column: 4 / 8;
    }

    .body-schools-content-view-3 {
        grid-row: 10;
        grid-column: 10 / 14;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 16;
        grid-column: 11 / 15;
    }

    .body-content-link {
        grid-row: 20;
        grid-column: 8 / all;
    }

    /* School end */

}

/*For 884px and 1023px Resolution end */

/*For 810px and 883px Resolution start */
@media only screen and (min-width: 810px) and (max-width: 883px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(3, 25px);
        grid-template-columns: repeat(33, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 30;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
    }

    .nav-text {
        grid-row: 2;
        grid-column: 4 / all;
        font-size: xx-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: repeat(10, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 3;
        font-size: xx-large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(20, 50px);
        grid-template-columns: repeat(17, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 3 / 6;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 6;
        grid-column: 3 / 7;
    }

    .body-schools-content-view-1 {
        grid-row: 1;
        grid-column: 9 / 12;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 6;
        grid-column: 9 / 13;
    }

    .body-schools-content-view-2 {
        grid-row: 10;
        grid-column: 3 / 6;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 15;
        grid-column: 3 / 7;
    }

    .body-schools-content-view-3 {
        grid-row: 10;
        grid-column: 9 / 12;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 15;
        grid-column: 9 / 13;
    }

    .body-content-link {
        grid-row: 20;
        grid-column: 7 / all;
    }

    /* School end */

}

/*For 810px and 883px Resolution end */

/*For 768px and 809px Resolution start */
@media only screen and (min-width: 768px) and (max-width: 809px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(3, 25px);
        grid-template-columns: repeat(30, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 28;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
    }

    .nav-text {
        grid-row: 2;
        grid-column: 4 / all;
        font-size: xx-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(3, 50px);
        grid-template-columns: repeat(10, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 3;
        font-size: xx-large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(20, 50px);
        grid-template-columns: repeat(16, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 3 / 6;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 6;
        grid-column: 3 / 7;
    }

    .body-schools-content-view-1 {
        grid-row: 1;
        grid-column: 9 / 12;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 6;
        grid-column: 9 / 13;
    }

    .body-schools-content-view-2 {
        grid-row: 10;
        grid-column: 3 / 6;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 15;
        grid-column: 3 / 7;
    }

    .body-schools-content-view-3 {
        grid-row: 10;
        grid-column: 9 / 12;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 15;
        grid-column: 9 / 13;
    }

    .body-content-link {
        grid-row: 20;
        grid-column: 6 / all;
    }

    /* School end */

}

/*For 768px and 809px Resolution end */

/*For 600px and 767px Resolution start */
@media only screen and (min-width: 600px) and (max-width: 767px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(3, 25px);
        grid-template-columns: repeat(23, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 21;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
    }

    .nav-text {
        grid-row: 2;
        grid-column: 4 / all;
        font-size: xx-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(2, 50px);
        grid-template-columns: repeat(10, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 3;
        font-size: x-large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(27, 50px);
        grid-template-columns: repeat(16, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 2 / 6;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 2;
        grid-column: 9 / 12;
    }

    .body-schools-content-view-1 {
        grid-row: 7;
        grid-column: 2 / 6;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 8;
        grid-column: 9 / 12;
    }

    .body-schools-content-view-2 {
        grid-row: 13;
        grid-column: 2 / 6;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 15;
        grid-column: 9 / 12;
    }

    .body-schools-content-view-3 {
        grid-row: 19;
        grid-column: 2 / 6;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 20;
        grid-column: 9 / 12;
    }

    .body-content-link {
        grid-row: 27;
        grid-column: 4 / all;
    }

    /* School end */

}

/*For 600px and 767px Resolution end */

/*For 504px and 599px Resolution start */
@media only screen and (min-width: 504px) and (max-width: 599px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(3, 25px);
        grid-template-columns: repeat(21, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 19;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
    }

    .nav-text {
        grid-row: 2;
        grid-column: 4 / all;
        font-size: xx-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(2, 50px);
        grid-template-columns: repeat(7, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 3;
        font-size: x-large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(22, 50px);
        grid-template-columns: repeat(16, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 2 / 5;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 2;
        grid-column: 7 / 11;
    }

    .body-schools-content-view-1 {
        grid-row: 6;
        grid-column: 2 / 5;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 7;
        grid-column: 7 / 11;
    }

    .body-schools-content-view-2 {
        grid-row: 11;
        grid-column: 2 / 5;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 12;
        grid-column: 7 / 11;
    }

    .body-schools-content-view-3 {
        grid-row: 16;
        grid-column: 2 / 5;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 17;
        grid-column: 7 / 11;
    }

    .body-content-link {
        grid-row: 22;
        grid-column: 3 / all;
    }

    /* School end */

}

/*For 504px and 599px Resolution end */

/*For 400px and 503px Resolution start */
@media only screen and (min-width: 400px) and (max-width: 503px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(6, 15px);
        grid-template-columns: repeat(17, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 15;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 4px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
        width: 40px;
    }

    .nav-text {
        grid-row: 2;
        grid-column: 3 / all;
        line-height: 10px;
        font-size: x-large;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(2, 50px);
        grid-template-columns: repeat(7, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 3;
        font-size: x-large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(22, 50px);
        grid-template-columns: repeat(16, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    .mfooter {
        height: 5vh !important;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 1 / 4;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 2;
        grid-column: 6 / 9;
    }

    .body-schools-content-view-1 {
        grid-row: 6;
        grid-column: 1 / 4;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 7;
        grid-column: 6 / 9;
    }

    .body-schools-content-view-2 {
        grid-row: 11;
        grid-column: 1 / 4;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 12;
        grid-column: 6 / 9;
    }

    .body-schools-content-view-3 {
        grid-row: 16;
        grid-column: 1 / 4;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 17;
        grid-column: 6 / 9;
    }

    .body-content-link {
        grid-row: 22;
        grid-column: 2 / all;
    }

    /* School end */

}

/*For 400px and 503px Resolution end */

/*For 360px and 399px Resolution start */
@media only screen and (min-width: 360px) and (max-width: 399px) {


    .nav-main {
        display: grid;
        grid-template-rows: repeat(7, 10px);
        grid-template-columns: repeat(14, 25px);
    }

    .nav-design {
        grid-row: 3 / 5;
        grid-column: 1 / 13;
        background: linear-gradient(to right, var(--color-secondary) 10%, var(--color-primary) 60%);
        border: solid 0px var(--color-button-border);
        color: var(--color-text);
        border-radius: 1px 30px 30px 1px;
    }

    .nav-btn {
        display: inline-block;
        padding-left: 20px;
        padding-top: 2px;
        cursor: pointer;
        overflow: hidden;
        color: var(--color-text);
        width: 30px;
    }

    .nav-text {
        grid-row: 2;
        grid-column: 3 / all;
        line-height: 10px;
        font-size: medium;
        font-family: AquireLight;
        color: whitesmoke;
    }

    .header-main {
        display: grid;
        grid-template-rows: repeat(2, 50px);
        grid-template-columns: repeat(5, 50px);
    }

    .header-text {
        grid-row: 1;
        grid-column: 2;
        font-size: large;
        font-family: AquireLight;
    }

    .body-main {
        display: grid;
        grid-template-rows: repeat(35, 50px);
        grid-template-columns: repeat(8, 50px);

    }

    .designbox {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick {
        display: inline-block;
        vertical-align: middle;
        box-shadow: -1px -1px 1px 1px var(--color-secondary), 1px 1px 1px 1px var(--color-primary);
        border-radius: 10px;
        border: solid 0px;
        position: relative;
        overflow: hidden;
    }

    .designclick:hover {
        background-color: var(--color-secondary) !important;
        border-color: var(--color-primary) !important;
        color:var(--color-background-sub) !important;
        cursor: pointer;
    }

    .mfooter {
        height: 5vh !important;
    }

    /* School start */

    .body-schools-content-view-0 {
        grid-row: 1;
        grid-column: 2 / 5;
    }

    .body-schools-content-view-0-text-header {
        grid-row: 6;
        grid-column: 2 / 7;
    }

    .body-schools-content-view-1 {
        grid-row: 9;
        grid-column: 2 / 5;
    }


    .body-schools-content-view-1-text-header {
        grid-row: 14;
        grid-column: 2 / 7;
    }

    .body-schools-content-view-2 {
        grid-row: 17;
        grid-column: 2 / 5;
    }

    .body-schools-content-view-2-text-header {
        grid-row: 22;
        grid-column: 2 / 7;
    }

    .body-schools-content-view-3 {
        grid-row: 25;
        grid-column: 2 / 5;
    }

    .body-schools-content-view-3-text-header {
        grid-row: 30;
        grid-column: 2 / 7;
    }

    .body-content-link {
        grid-row: 34;
        grid-column: 3 / all;
    }

    /* School end */

}

/*For 360px and 399px Resolution end */