/*Fonts//*/
@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Regular.ttf) format("truetype");
}
  
@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Bold.ttf) format("truetype");
    font-weight: bold;
}
  
/*///end fonts//*/


/*Landing Page */
html {
    height: 100%;
}

body { 
    margin:0px; 
    height: 100%;
}

.background-section {
    position: relative;
    background-color: #0D1939;
    height: 100%;
}

/* Desktop responsive */

img.logoIcon {
    content: url("../images/logo/i8LogoDesktop.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7; 
    mix-blend-mode: overlay; 
    content: url("../images/background/desktop/noise_bg.png");
}

.background-wrapper {
    height: 100%;
    position: relative;
    z-index: 1;
}


.landing-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65vh; 
    display: flex;
    flex-direction: column;
}

.landing-image-container img {
    max-width: 100%;
    max-height: 100%;
}

.landing-text {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;   
    font-size: 16px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    opacity: 0.6;
    color: #FFFFFF;
}

.flex-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.country-container {
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 40px;
    text-decoration: none !important;
    cursor: pointer;
}

.country-logo {
    margin-bottom: 11px;
    border: 5px solid transparent;
}

.background-image-gradient {
    content: url("../images/background/desktop/gradient_bg.png");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.my-src-logo{
    content: url("../images/country/desktop/Malaysia.png");
}

.th-src-logo{
    content: url("../images/country/desktop/Thailand.png");
}

.id-src-logo{
    content: url("../images/country/desktop/Indonesia1.png");
}

.au-src-logo{
    content: url("../images/country/desktop/Australia.png");
}

.country-container:active:not(.coming-soon) .country-logo {
    border: 5px solid transparent;
    outline: 1.2px solid #3369FF;
    border-radius: 50px;
    box-shadow: 0 0 5px #3369FF;
}

.country-container:active:not(.coming-soon) .landing-text {
    color: #3369FF;
}

.country-text{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;   
    font-size: 11px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
}

.version-text {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;   
    font-size: 11px;
    line-height: 18px;
    align-items: center;
    text-align: center;
    opacity: 0.6;
    margin-bottom: 21px;
}

.bottom-container {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    top: 50%;
    position: relative;
}

.welcome {
    margin-top:28px;
}

.welcome:before,
.welcome:after {
    background-color: white;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    opacity: 0.6;
}

.welcome:before {
    right: 0;
    margin-right: 18px !important;
    width: 220px;
}

.welcome:after {
    left: 0;
    margin-left: 18px !important;
    width: 220px;
}

.coming-soon {
    opacity: 0.5;
}

.coming-soon-text {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;   
    font-size: 16px;
    line-height: 18px;
    align-items: center;
    text-align: center;
    opacity: 0.6;
    color: #FFFFFF;
    position:absolute;
    top: 250px;
}

@media (min-width: 768px) and (max-width: 1024px){
    .landing-image-container {
        height: 60vh; 
    }

    .bottom-container {
        top: 50%;
    }
}
  
/* Mobile responsive */
@media (max-width: 767px) {
    img.logoIcon {
        content: url("../images/logo/i8LogoApp.png");
    }

    .background-image {
        content: url("../images/background/app/noise_bg.png");
    }

    .background-wrapper {
        padding: 0 20px;
    }

    .landing-image-container {
        height: 50vh; 
    }
    
    .landing-text {
        font-size: 11px;
    }

    .country-container {
        margin: 12px;
    }

    .background-image-gradient {
        content: url("../images/background/app/gradient_bg.png");
    }

    .my-src-logo{
        content: url("../images/country/app/Malaysia.png");
    }

    .th-src-logo{
        content: url("../images/country/app/Thailand.png");
    }

    .id-src-logo{
        content: url("../images/country/app/Indonesia.png");
    }

    .au-src-logo{
        content: url("../images/country/app/Australia.png");
    }

    .bottom-container {
        top: 80%;
    }

    .welcome {
        margin-top: 15px;
    }

    .welcome:before,
    .welcome:after {
        background-color: white;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 100%;
        opacity: 0.6;
    }

    .welcome:before {
        margin-left: -100%;
    }

    .welcome:after {
        margin-right: -100%; 
    }

    .coming-soon-text {
        font-size: 11px;
        top: 170px;
    }
}
/*End Landing Page */