html, body {
    height: 100%;
    background-color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*-----------------------------------------------------------------------------------*/

header {
    width: 83.334%;
    height: 97.68%;
    position: fixed;
    z-index: 999;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0;
}
@media (max-width:1366px) {
    header {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
}
@media (max-width:1024px) {
    header {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(10, 1fr);

    }
}
@media (max-width: 600px) {
    header {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(10, 1fr);;
    }
}
/*-----------------------------------------------------------------------------------*/

/* LOGO */

#logo {
    display: block;
    width: 100%;
    height: 100%;
    grid-column: 4 / 6;
    grid-row:  1 / 3;
    background-color: transparent;
    background-image: url(images/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
@media (max-width: 1024px) {
    #logo {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
}
@media (max-width: 600px) {
    #logo {
        grid-column: 1;
        grid-row: 1 / 3;
    }
}
/*-----------------------------------------------------------------------------------*/

/* MAIN MENU */

#main-menu {
    grid-column: 1/3;
    grid-row: 5/6;
    position: relative;
    background-color: transparent;
}
@media (max-width: 1366px) {
    #main-menu {
        grid-column: 1;
        grid-row: 6/7;
    }
    #trms p, #trms a {
        font-size: 10px;
    }
    #trms-txt-1 {
        margin: 0;
    }
    #trms-txt-2 {
        margin: 0;
    }
}
@media (max-width: 1024px) {
    #main-menu {
        grid-column: 1;
        grid-row: 10;
    }
    #trms p, #trms a {
        font-size: 8px;
    }
    #trms-txt-1 {
        margin: 0;
    }
    #trms-txt-2 {
        margin: 0 0 10% 0;
    }
}
@media (max-width: 600px) {
    #main-menu {
        grid-column: 1;
        grid-row: 9/10;
        width: 80%;
        position: relative;
        top: 75%;
        z-index: 2;
    }
    #trms p, #trms a {
        font-size: 4px;
        margin-top: 2%;
    }
}

#mm-icn {
    width: 25%;
    height: 55.556%;
    transform: skewX(-19.573deg);
    position: absolute;
    top: 11.111%;
    left: 3%;
    background-color: transparent;
    background-image: url(images/main-menu/icon-01trial.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
}

#mm-act-btn {
    display: block;
    width: 16.75%;
    height: 55.556%;
    position: absolute;
    bottom: 2%;
    left: 15%;
    transform: skewX(-19.573deg);
    background-color: transparent;
    background-image: url(images/main-menu/account-button-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0;
    margin: 0;
    border: 0;
    z-index: 4;
}
#mm-act-btn:hover {
    background-image: url(images/main-menu/account-button-hover.png);
}

#mm-stn-btn {
    width: 15.625%;
    height: 44.445%;
    position: absolute;
    top: 22.222%;
    left: 26.5%;
    transform: skewX(-19.573deg);
    background-color: transparent;
    background-image: url(images/main-menu/settings-button-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: 0;
    z-index: 3;
}
#mm-stn-btn:hover {
    background-image: url(images/main-menu/settings-button-hover.png);
}
#mm-stn-btn-bg {
    width: 15.625%;
    height: 44.445%;
    position: absolute;
    top: 22.222%;
    left: 27.5%;
    transform: skewX(-19.573deg);
    background-color: transparent;
    background-image: url(images/main-menu/shadow-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
}

#mm-bg-img {
    width: 68.75%;
    height: 33.334%;
    position: absolute;
    bottom: 11.112%;
    left: 2.5%;
    background-color: transparent;
    background-image: url(images/main-menu/background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
#trms {
    width: 68.75%;
    height: 22.223%;
    position: absolute;
    bottom: 0%;
    right: 1.3%;
    transform: skewX(-19.573deg);
    background-color: transparent;
}
#trms-txt-1 {
    display: block;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-transform: capitalize;
    transform: skewX(19.573deg);
    line-height: 0;
    margin: 1% 0 0 1%;
}
#trms-txt-2 {
    display: block;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    transform: skewX(19.573deg);
    line-height: 0;
    margin: 2.5% 0 3% 1%;
}
#trms-mail {
    display: block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: #800066;
    transform: skewX(19.573deg);
    line-height: 0;
    margin-left: 1%;
}
#trms-mail:hover {
    color: #FF86F3;
}

#mm-dv {
    width: 63.415%;
    height: 245%;
    position: absolute;
    bottom: 35.5%; 
    left: 24%;
    background-color: transparent;
}
#mm-skw {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-rows: repeat(8, 1fr);
    transform: skewX(-19.573deg);
    background-color: transparent;
}

#mm-hd {
    grid-column: 1/3;
    grid-row: 1;
    width: 100%;
    width: 100%;
    position: relative;
    background-color: transparent;
    background-image: url(images/main-menu/menu/head-background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#mm-hd-btn1 {
    width: 100%;
    height: 66.667%;
    position: absolute;
    top: 31%;
    background-color: transparent;
    background-image: url(images/main-menu/menu/head-button-01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin: 0;
    border: 0;
    padding: 0;
    z-index: 1;
}
#mm-hd-btn2 {
    width: 9.856%;
    height: 66.667%;
    position: absolute;
    top: 31%;
    right: 3.2%;
    background-color: transparent;
    background-image: url(images/main-menu/menu/head-button-02-down.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin: 0;
    border: 0;
    padding: 0;
    z-index: 2;
}

#mm-bdy-rt {
    grid-column: 2/3;
    grid-row: 2/9;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
#mm-bdy-rt a {
    display: block;
    width: 78.85%;
    height: 9.524%;
    margin-top: 10%;
}
#mm-bdy-btn1 {
    background-image: url(images/main-menu/right-body-butons/01-brand-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
#mm-bdy-btn1:hover {
    background-image: url(images/main-menu/right-body-butons/01-brand-hover.png);
}
#mm-bdy-btn1:active {
    background-image: url(images/main-menu/right-body-butons/01-brand-active.png);
}
#mm-bdy-btn2 {
    background-image: url(images/main-menu/right-body-butons/02-services-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
#mm-bdy-btn2:hover {
    background-image: url(images/main-menu/right-body-butons/02-services-hover.png);
}
#mm-bdy-btn2:active {
    background-image: url(images/main-menu/right-body-butons/02-services-active.png);
}
#mm-bdy-btn3 {
    background-image: url(images/main-menu/right-body-butons/03-academy-off.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: not-allowed;
}
#mm-bdy-btn4 {
    background-image: url(images/main-menu/right-body-butons/04-gallery-off.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: not-allowed;
}

#mm-bdy-lft {
    grid-column: 1/2;
    grid-row: 2/9;
    position: relative;
    background-color: transparent;
}
#mm-bdy-lft p {
    color: #CCFFFF;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 100;
    line-height: 1.4;
    width: 70%;
    height: 70%;
    margin-left: 10%;
    opacity: 1;
    position: absolute;
}

#mm-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.8;
    z-index: 0;
}

/*-----------------------------------------------------------------------------------*/

/* SUB MENU */

#sub-menu {
    width: 100%;
    height: 100%;
    position: relative;
    grid-column: 4/6;
    grid-row: 5;
    background-color: transparent;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 0;
}
@media (max-width: 1366px) {
    #sub-menu {
        grid-column: 2;
        grid-row: 6;
    }
}
@media (max-width: 1024px) {
    #sub-menu {
        grid-column: 2;
        grid-row: 10;
    }
}
@media (max-width: 600px) {
    #sub-menu {
        grid-column: 1;
        grid-row: 10/11;
        width: 70%;
        height: 90%;
        margin-left: 30%;
    }
}

#sb-scroller {
    position: relative;
    width: 100%;
    grid-column: 15/17;
    grid-row: 3/7;
    background-color: transparent;
    z-index: 2;
}
#sb-arw-up {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    background-image: url(images/sub-menu/scroll-buttons/Up/up-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
#sb-arw-up:hover {
    background-image: url(images/sub-menu/scroll-buttons/Up/up-hover.png);
}
#sb-arw-up:active {
    background-image: url(images/sub-menu/scroll-buttons/Up/up-clicked.png);
}
#sb-arw-down {
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 30%;
    background-color: transparent;
    background-image: url(images/sub-menu/scroll-buttons/Down/down-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
#sb-arw-down:hover {
    background-image: url(images/sub-menu/scroll-buttons/Down/down-hover.png);
}
#sb-arw-down:active {
    background-image: url(images/sub-menu/scroll-buttons/Down/down-clicked.png);
}

#sb-contact-us {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: 3%;
    grid-column: 8/12;
    grid-row: 5/7;
    background-color: transparent;
    background-image: url(images/sub-menu/contact-us-button/contact-us-submenu.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    z-index: 2;
}

#sb-social-media {
    width: 100%;
    height: 100%;
    grid-column: 1/12;
    grid-row: 8/10;
    background-color: transparent;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    box-sizing: border-box;
    z-index: 2;
}
.sm-link {
    display: block;
    width: 13%;
    aspect-ratio: 1/0.75;
    flex-shrink: 0;
    overflow: hidden;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    transition: width 0.2s ease;
    right: 0;
    left: auto;
}

.sm-default {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
    opacity: 1;
}
.sm-hover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}
.sm-link:hover {
    width: 35%;
}
.sm-link:hover .sm-default {
    opacity: 0;
}
.sm-link:hover .sm-hover {
    opacity: 1;
}

#sm-bg {
    width: 100%;
    height: 100%;
    grid-column: 1/17;
    grid-row: 1/10;
}
/*-----------------------------------------------------------------------------------*/

/* FIRST section */

#fst-sct {
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#fst-sct-bg {
    width: 100%;
    height: 100%;
}

/*-----------------------------------------------------------------------------------*/

/* FOOTER */

#ftr {
    background-color: transparent;
    width: 83.334%;
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-gap: 1.25%;
}

#ftr-logo {
    grid-column: 4/6;
    grid-row: 1/3;
    width: 100%;
    height: 100%;
}

#ftr-fst-dv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #808080;
    grid-column: 1/2;
    grid-row: 4/5;
    display: flex;
    flex-flow: column wrap;
}
#ftr-fst-dv-hdr {
    font-size: 1.5rem;
    font-weight: bolder;
}
#ftr-fst-dv a {
    width: fit-content;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    color: #808080;
    text-decoration: none;
    font-weight: thin;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
}
#ftr-fst-dv a:hover {
    color: #C0C0C0;
}

#ftr-snd-dv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #808080;
    grid-column: 2/3;
    grid-row: 4/5;
    display: flex;
    flex-flow: column wrap;
}
#ftr-snd-dv-hdr {
    font-size: 1.5rem;
    font-weight: bolder;
}
#ftr-snd-dv a {
    width: fit-content;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    color: #808080;
    text-decoration: none;
    font-weight: thin;
    padding: 0;
    margin: 0;
    border-right: 0;
    cursor: pointer;
}
#ftr-snd-dv a:hover {
    color: #C0C0C0;
}

#ftr-thrd-dv {
    grid-column: 4/6;
    grid-row: 3/6;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: start;
}
#ftr-thrd-dv strong {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #808080;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bolder;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2%;
}
.ftr-thrd-dv-lnk {
    width: fit-content;
    height: 10%;
    margin: 3% 0 0 0;
    border: 0;
    padding: 0;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
    font-style: italic;
    color: #808080;
    cursor: pointer;
}
.ftr-thrd-dv-lnk:hover {
    color: #C0C0C0;
}
.ftr-thrd-dv-lnk b {
    font-size: 1.25rem;
    color: #C0C0C0;
}

#ftr-cntct {
    display: block;
    width: 40.23%;
    height: 6%;
    padding: 1% 0 0 0;
    margin: 5% 0 5% 0;
    border: 1px solid white;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}
#ftr-cntct:hover {
    color: #0d4040;
    background-color: #99cccc;
    border: 1px solid #99cccc;
}

#ftr-sm {
    width: 60%;
    height: 7.4%;
    display: flex;
    flex-flow: row-reverse wrap;
    align-items: flex-start;
    justify-content: space-around;
}
.ftr-sm-btns {
    width: 15%;
    height: 100%;
}
#ftr-sm-btn1 {
    background-color: transparent;
    background-image: url(images/footer/socialmedia-buttons/facebook-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#ftr-sm-btn1:hover {
    background-image: url(images/footer/socialmedia-buttons/facebook-hover.png);
}
#ftr-sm-btn2 {
    background-color: transparent;
    background-image: url(images/footer/socialmedia-buttons/instegram-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#ftr-sm-btn2:hover {
    background-image: url(images/footer/socialmedia-buttons/instegram-hover.png);
}
#ftr-sm-btn3 {
    background-color: transparent;
    background-image: url(images/footer/socialmedia-buttons/behance-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#ftr-sm-btn3:hover {
    background-image: url(images/footer/socialmedia-buttons/behance-hover.png);
}
#ftr-sm-btn4 {
    background-color: transparent;
    background-image: url(images/footer/socialmedia-buttons/linkedIn-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#ftr-sm-btn4:hover {
    background-image: url(images/footer/socialmedia-buttons/linkedIn-hover.png);
}
#ftr-sm-btn5 {
    background-color: transparent;
    background-image: url(images/footer/socialmedia-buttons/tiktok-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#ftr-sm-btn5:hover {
    background-image: url(images/footer/socialmedia-buttons/tiktok-hover.png);
}
#ftr-sm-btn6 {
    background-color: transparent;
    background-image: url(images/footer/socialmedia-buttons/youtube-normal.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#ftr-sm-btn6:hover {
    background-image: url(images/footer/socialmedia-buttons/youtube-hover.png);
}

#ftr-frth-dv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-right: 0;
    grid-column: 1/3;
    grid-row: 5/6;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: end;
}
#ftr-frth-dv a {
    width: fit-content;
    height: fit-content;
    font-size: 1.25rem;
    color: white;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 5%;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: 0;
}
#ftr-frth-dv a:hover {
    color: #99cccc;
}
#ftr-frth-dv p {
    width: fit-content;
    height: fit-content;
    font-size: 1rem;
    color: #808080;
    padding: 0;
    margin: 0 0 5% 0;
    border: 0;
}

@media (max-width: 1366px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 600px) {
    #ftr {
        width: 83.334%;
        height: 100vh;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(10, 1fr);
        gap: 1.25%;
    }

    #ftr-logo {
        grid-column: 1;
        grid-row: 1/3;
        height: 100%;
    }

    #ftr-fst-dv {
        width: 50%;
        margin: auto;
        grid-column: 1;
        grid-row: 3/4;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: start;
        padding: 2%;
        border-bottom: 1px solid #808080;
    }
    #ftr-fst-dv-hdr {
        font-size: 0.75rem;
        font-weight: bold;
    }
    #ftr-fst-dv a {
        font-size: 0.5rem;
        margin: 0.5% 0 0.5% 0;
    }

    #ftr-snd-dv {
        width: 50%;
        margin: auto;
        grid-column: 1;
        grid-row: 4/5;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: start;
        padding: 2%;
        border-bottom: 1px solid #808080;
    }
    #ftr-snd-dv-hdr {
        font-size: 0.75rem;
        font-weight: bold;
    }
    #ftr-snd-dv a {
        font-size: 0.5rem;
        margin: 0.5% 0 0.5% 0;
    }

    #ftr-thrd-dv {
        grid-column: 1;
        grid-row: 5/10;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: start;
    }
    .ftr-thrd-dv-lnk {
        font-size: 0.5rem;
    }
    .ftr-thrd-dv-lnk b {
        font-size: 0.65rem;
    }
    #ftr-cntct {
        font-size: 0.75rem;
        margin: 10% 0 2% 0;
    }
    #ftr-thrd-dv strong {
        font-size: 0.75rem;
        margin-top: 5%;
    }

    #ftr-frth-dv {
        grid-column: 1;
        grid-row: 10/11;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #ftr-frth-dv a {
        font-size: 0.65rem;
    }
    #ftr-frth-dv p {
        font-size: 0.5rem;
    }
}