/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
OWNER: MEMONIM PRIVATE LIMITED
UEN: 20e038038403
LAST UPDATED: 25 DEC 2023
* * * * * * * * * * * * * * * * * * * * * * * * * * */

/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- IMPORT FONTS --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Comfortaa */
@font-face {
    font-family: Comfortaa;
    src: url(fonts/Comfortaa/Comfortaa-Bold.woff2) format(woff2);
    font-weight: bold;
    font-style: normal;
    font-display: block;
}
/* Montserrat */
@font-face {
    font-family: Montserrat;
    src: url(fonts/Montserrat/Montserrat-Bold.woff2) format(woff2);
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
/* PublicSans */
@font-face {
    font-family: PublicSans;
    src: url(fonts/Public_Sans/PublicSans-Bold.woff2) format(woff2);
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-cyan:#00FFFF;
    --primary-orange: #FCB716;
    --primary-pink:#FF8E8E;
    --gray: #434343;
    --black: #000000;
    --white: #ffffff;
    --brand-font: 'Comfortaa';
    --heading-font: 'Montserrat';
    --paragraph-font: 'PublicSans';
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- RESET STYLE --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    letter-spacing: 2px;
    font-family: var(--paragraph-font);
    color: var(--white);
    cursor: url('assets/icons/navigation.png'), url('assets/icons/navigation.png'), move !important;
}

*, *:before, *:after {
    box-sizing: border-box;
}

a, button {
    all: unset;
}

a {
    position: relative;
    text-decoration: none;
  }

a:hover {
    text-shadow: 1px 1px 10px var(--primary-cyan);
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: var(--primary-cyan);
    bottom: -5px;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }
  
  a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
  }


/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- PRESET STYLE --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    scroll-snap-stop: always;
}

body {
	position: relative;
    background: var(--black);
}

h1 {
    font-size: 4rem;
    font-family: var(--heading-font);
    text-transform: capitalize;

    > #sub-heading {
        font-size: 1.5rem;
    }

    > #cyan-glow {
        color: var(--primary-cyan);
    }
}

h2 {
    font-family: var(--heading-font);
    font-size: 5rem;
}

h3 {
    font-family: var(--heading-font);
    font-size: 2.5rem;
}

p {
    font-family: var(--brand-font);
    font-size: 0.75rem;
}

ul {
    width: 20vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    > li {
        display: inline;
        font-family: var(--brand-font);
        font-size: 0.75rem;

        > a {
            text-transform: uppercase;
            cursor: pointer;
        }
    }
}

button {
    text-transform: uppercase;
    background: rgba( 255, 255, 255, 0.15 );
    box-shadow: 0 8px 32px 0 var(--white);
    backdrop-filter: blur( 2px );
    -webkit-backdrop-filter: blur( 2px );
    border-radius: 50px;
    padding: 20px 30px;
}

button:hover {
    all: unset;
}

/* * * * * * * * *
     BRANDING
* * * * * * * * */
#brand > * {
    display: inline;
    vertical-align: middle;
}

#brand-name {
    font-family: var(--brand-font);
    font-size: 1rem;
    color: var(--white);
    letter-spacing: 0.75rem;
    padding-left: 10px;
    text-transform: uppercase;
    text-shadow: 1px 1px 20px var(--white);
}

#brand-logo {
    width: 50px;
    height: auto;
}

::selection {
    background-color: var(--primary-orange);
    color: var(--white);
}

/* * * * * * * * *
     ICONS
* * * * * * * * */
.arrow {
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* * * * * * * * *
     SCROLLBAR
* * * * * * * * */
/* width */
::-webkit-scrollbar {
    width: 15px;
  }
  
/* Track */
::-webkit-scrollbar-track {
    background-color: var(--black);
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--primary-cyan), var(--primary-orange), var(--primary-pink)); 
    box-shadow: 0 20px 32px 0 var(--primary-cyan);
    border-radius: 10px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--white);
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- SECTIONS --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
section {
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    scroll-snap-align: start;
}

.wrapper {
    width: 80%;
    height: 100vh;
    margin: 0 10%;
    padding: 2vh 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    > nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }
    > h1 {
        text-align: center;
    }
}

.next-section {
    padding-bottom: 5vh;
    height: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    > p {
        font-family: var(--brand-font);
        text-transform: uppercase;
        font-size: 0.75rem;
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- HERO SECTION --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#hero {
    background-image: url(assets/hero-cover-dark.webp);

    & .header {
        height: 30vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        > h1 {
            font-family: var(--heading-font);
            text-align: center;
            text-transform: uppercase;
            text-shadow: 1px 1px 20px var(--white);
        }
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- ABOUT SECTION --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#about {
    background-image: url(assets/planet-earth-dark.webp);
    background-attachment: fixed;

    & h1 {
        font-family: var(--brand-font);
        font-size: 1rem;
        text-transform: uppercase;
    }

    & .header {
        height: 15vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        & h2 {
            font-family: var(--brand-font);
            text-transform: uppercase;
            letter-spacing: 1.5rem;
            text-shadow: 1px 1px 20px var(--white);
        }

        & p {
            font-family: var(--brand-font);
            line-height: 1.6;
        }
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- SERVICES SECTION --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#services {
    background-image: url(assets/laser-neon-lights-dark.webp);
    background-attachment: fixed;

    & h1 {
        font-family: var(--brand-font);
        font-size: 1rem;
        text-transform: uppercase;
    }
}

.service-info {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
    overflow-x: scroll;

    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    > .header {
        scroll-snap-align: center;
        padding: 15vh 10vh;

        & h2 {
            text-shadow: 1px 1px 20px var(--white);
        }

        & p {
            padding: 10px 0;
        }
    }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- PARTNERS SECTION --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#partners {
    background-image: url(assets/planet-earth-dark-flipped.webp);
    background-attachment: fixed;

    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    > .wrapper {
        width: 80%;
        height: 100%;
        margin: 0 10%;
        padding: 2vh 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    & h1 {
        font-family: var(--brand-font);
        font-size: 1rem;
        text-transform: uppercase;
    }
}

.container {
    display: flex;
    display: -webkit-flex; /* old versions of Chrome/Safari/Opera */
    display: -ms-flexbox; /* IE10 */
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

.partner-image {
    padding: 2%;
    width: 50%;

    > img {
        width: 100%;
        height: auto;
    }
}

.partner-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    > h2 {
        padding-bottom: 3%;
    }
    
    > p {
        padding-bottom: 3%;
        letter-spacing: 3px;
        line-height: 20px;
    }

}

/* * * * * * * * * * * * * * * * * * * * * * * * * * *  
 -------------------- FOOTER SECTION --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
footer {
    background-color: var(--black);
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    & h2 {
        font-size: 0.8rem;
        font-weight: bolder;
        text-decoration: underline;
        padding-bottom: 10px;
    }

    & p {
        line-height: 1.5rem;
    }
}

.top-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
}

.UEN {
    background-color: var(--gray);
    text-align: center;
    align-items: center;
    padding: 20px 0;
    height: 2vh;
    width: 100%;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  
 --------------------  FULL HD TV DISPLAY(1920x1080) --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
@media (min-width: 2560px)  {

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- PRESET STYLE --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    h1 {
        font-size: 7rem; /*m*/
        > #sub-heading {
            font-size: 2.5rem; /*m*/
            color:#FF8E8E;
        }
    }

    h2 {
        font-size: 6rem; /*m*/
    }

    h3 {
        font-size: 3rem; /*m*/
    }

    p {
        font-size: 2rem; /*m*/
    }

    ul {
        justify-content: space-evenly;
        width: 30vw;/*m*/

        > li {
            font-size: 1rem; /*m*/
        }
    }

    button {
        margin: 50px 0; /*m*/
        font-size: 1.5rem; /*m*/
        padding: 20px 50px; /*m*/
    }


    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- SECTIONS --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .wrapper {
        width: 90%;/*m*/
        margin: 0 5%;/*m*/
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- SERVICES SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .service-info {

        > .header {

            & p {
                font-size: 1rem; /*m*/
            }
        }
    }

    .header > img {
        width: 30%;
        height: auto;
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- PARTNERS SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .partner-image {
        width: 70%; /*m*/
    }

    .partner-info {
        > h2 {
            font-size: 4rem;/*m*/
        }
        
        > p {
            font-size: 2rem; /*m*/
            letter-spacing: 3px; /*m*/
            line-height: 50px; /*m*/
        }

    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- FOOTER SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    footer {

        & p {
            font-size: 1rem;
        }
    }

    .UEN {
        height: 4vh;
        & p {
            font-size: 1rem;
        } 
    }
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  
 --------------------  LAPTOP DISPLAY (1600x900)--------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (max-width: 1600px){

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- PRESET STYLE --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    h1 {
        font-size: 5rem; /*m*/
        > #sub-heading {
            font-size: 2.5rem; /*m*/
            color: var(--primary-orange);
        }
    }

    h2 {
        font-size: 6rem; /*m*/
    }

    h3 {
        font-size: 2rem; /*m*/
    }

    p {
        font-size: 1.5rem; /*m*/
    }

    ul {
        width: 30vw;/*m*/

        > li {
            font-size: 1rem; /*m*/
        }
    }

    button {
        margin: 50px 0; /*m*/
        font-size: 1.5rem; /*m*/
        padding: 20px 50px; /*m*/
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- SECTIONS --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .wrapper {
        width: 90%;/*m*/
        margin: 0 5%;/*m*/
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- SERVICES SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .service-info {

        > .header {

            & p {
                font-size: 1rem; /*m*/
            }
        }
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- PARTNERS SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .partner-image {
        width: 70%; /*m*/
    }

    .partner-info {
        > h2 {
            font-size: 2rem;/*m*/
        }
        
        > p {
            font-size: 1rem; /*m*/
            letter-spacing: 5px; /*m*/
        }

    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- FOOTER SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    footer {

        & p {
            font-size: 1rem;
        }
    }

    .UEN {
        height: 8vh;
        & p {
            font-size: 1rem;
        }
        
    }

}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  
 --------------------  TABLET VERSION (1280x720)--------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (max-width: 1280px){

        /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- PRESET STYLE --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    h1 {
        font-size: 3rem; /*m*/
        > #sub-heading {
            font-size: 1rem; /*m*/
            color: var(--primary-cyan);
        }
    }

    h2 {
        font-size: 3rem; /*m*/
    }

    h3 {
        font-size: 1.2rem; /*m*/
    }

    p {
        font-size: 1rem; /*m*/
    }

    ul {
        width: 30vw;/*m*/

        > li {
            font-size: 1rem; /*m*/
        }
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- SECTIONS --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .wrapper {
        width: 90%;/*m*/
        margin: 0 5%;/*m*/
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- SERVICES SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .service-info {

        > .header {

            & p {
                font-size: 1rem; /*m*/
            }
        }
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- PARTNERS SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    .partner-image {
        width: 70%; /*m*/
    }

    .partner-info {
        > h2 {
            font-size: 2rem;/*m*/
        }
        
        > p {
            font-size: 1rem; /*m*/
            letter-spacing: 2px; /*m*/
            line-height: 20px;
        }

    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
    -------------------- FOOTER SECTION --------------------
    * * * * * * * * * * * * * * * * * * * * * * * * * * */
    footer {

        & p {
            font-size: 0.8rem;
        }
    }

    .UEN {
        height: 8vh;
        & p {
            font-size: 1rem;
        }
        
    }

}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  
 --------------------  PHONE VERSION (360x640)--------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
@media screen and (max-width: 640px){

    /* * * * * * * * * * * * * * * * * * * * * * * * * * *  
-------------------- PRESET STYLE --------------------
* * * * * * * * * * * * * * * * * * * * * * * * * * */
section {
    width: 100vw;
}

.wrapper {
    text-align: center;
    > nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

ul {
    width: 80vw;
}

a {
    font-size: 0.75rem;
}

h1 {
    font-size: 2rem;
    > #sub-heading {
        font-size: 0.65rem;
    }
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 0.85rem;
}

#about {
    & .header {

        & h2 {

            letter-spacing: 0.5rem;
        }
    }
}

.service-info {

    > .header {

        padding: 14vh 0vh;
        > img {
            width: 50%;
        }
    }
}

.partner-info {
    width: 100vw;
}

.partner-image {
    width: 100vw;
    padding-top: 10vh;
}


footer {
    height: 100vh;
}

.top-footer {
    height: 90vh;
    flex-direction: column;
}

.UEN {
    
    & p {
        font-size: 0.60rem;
    }
    
}

}