body{
    font-family: 'Noto Sans SC', sans-serif !important;
}

body.cmallbg{
    background: transparent linear-gradient(0deg, #003897 0%, #0E89B0 38%, #1DE3CB 100%) 0% 0% no-repeat padding-box;
}

.headerlogo{
    
}

.headerlogo img{
    width: 50%;  
}

button.joinusbutton{
    background: #1DE3CB 0% 0% no-repeat padding-box;
    border-radius: 20px;
    transition: all 0.3s;
    opacity: 1;
    padding-bottom: 8px;
    width: 164px;
    height: 40px;
}

button.joinusbutton span{
    text-align: center;
    font: normal normal bold 17px/12px Noto Sans;
    letter-spacing: 0px;
    color: #FFFFFF;
    font-family: 'Noto Sans SC', sans-serif !important;
    
}

button.joinusbutton:hover{
  opacity: 0.8;  
  transition: all 0.3s;
}

.shadownav{
    box-shadow: 0px 3px 6px #00000029;
}

.shadowbox{
  box-shadow: 0px 6px 18px #00000033;   
}

.firstsection h1.firsttitle{
    color: #003897;
    text-align: center;
    font: normal normal 600 68px Noto Sans;
    font-family: 'Noto Sans SC', sans-serif !important;
    letter-spacing: 1px;
    line-height: 60px;
}

.firstsection h1.firsttitle span{
    font-size: 30px;
    font-weight: 400;
}


.firstsection h2.secondtitle{
    text-align: center;
    font: normal normal normal 20px Noto Sans;
    color: #003897;  
    font-weight: 400;
    font-family: 'Noto Sans SC', sans-serif !important;
    letter-spacing: 1px;
}

.firstsection h2.secondtitle span{
        font-size: 45px;
}

.firstsection a.joinusbutton{
    background: #1DE3CB 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000004D;
    border-radius: 36px;
    opacity: 1;
    text-decoration: none;
    transition: all 0.3s;
    width: 260px;
    height: 65px;
    display: inline-block;
    text-align: center;
}


.firstsection a.joinusbutton:hover{
  opacity: 0.8;  
  transition: all 0.3s;
}

.firstsection a.joinusbutton span{
    line-height: 60px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    margin-right: -15px;
}

.arrowdown{
    position: absolute;
    bottom: -145px;
    width: 100%;
    font-size: 35px;
    color: #9C9C9C
}

.arrowdown .fas{
    color: #9C9C9C
}


.contenleft-rightimage{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;  
}

.contenleft-rightimage{
    max-height: 450px;
    min-height: 450px;
}

.contenleft-rightimage .content{
    
}

.contenleft-rightimage .content .number{
 text-align: left;
font: normal normal 700 135px/160px Noto Sans;
letter-spacing: 0px;
color: #FFFFFF;
text-shadow: 0px 3px 6px #00000029;   
font-family: 'Open Sans', sans-serif !important;
}


.contenleft-rightimage .content h1{
      text-align: justify;
font: normal normal bold 55px/49px Noto Sans;
color: #FFFFFF;  
    font-family: 'Noto Sans SC', sans-serif !important;
    letter-spacing: 1px;
    text-shadow: 0px 3px 6px #00000080;
}

.contenleft-rightimage .content h1 span{
    text-align: left;
    font: normal normal normal 30px/normal Noto Sans;
    color: #FFFFFF;
    font-family: 'Noto Sans SC', sans-serif !important;
    letter-spacing: 1px;
    display: block;
    line-height: 60px;
}

.contenleft-rightimage .content a.joinusbutton{
    background: #1DE3CB 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000004D;
    border-radius: 36px;
    opacity: 1;
    text-decoration: none;
    transition: all 0.3s;
    width: 220px;
    height: 55px;
    display: inline-block;
    text-align: center;
}


.contenleft-rightimage .content a.joinusbutton:hover{
  opacity: 0.8;  
  transition: all 0.3s;
}


.contenleft-rightimage .content a.joinusbutton span{
    line-height: 55px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    margin-right: -15px;
}



.contenright-leftimage{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;  
    max-height: 450px;
    min-height: 450px;
}

.contenright-leftimage .content{
    
}

.contenright-leftimage .content .number{
font: normal normal 700 135px/160px Noto Sans;
letter-spacing: 0px;
color: #FFFFFF;
text-shadow: 0px 3px 6px #00000029;   
font-family: 'Open Sans', sans-serif !important;
}


.contenright-leftimage .content h1{
font: normal normal bold 55px/49px Noto Sans;
color: #FFFFFF;  
    font-family: 'Noto Sans SC', sans-serif !important;
    letter-spacing: 1px;
    text-shadow: 0px 3px 6px #00000080;
}

.contenright-leftimage .content h1 span{
    font: normal normal normal 30px/normal Noto Sans;
    color: #FFFFFF;
    font-family: 'Noto Sans SC', sans-serif !important;
    letter-spacing: 1px;
    display: block;
    line-height: 60px;
}

.contenright-leftimage .content a.joinusbutton{
    background: #1DE3CB 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000004D;
    border-radius: 36px;
    opacity: 1;
    text-decoration: none;
    transition: all 0.3s;
    width: 220px;
    height: 55px;
    display: inline-block;
    text-align: center;
}


.contenright-leftimage .content a.joinusbutton:hover{
  opacity: 0.8;  
  transition: all 0.3s;
}


.contenright-leftimage .content a.joinusbutton span{
    line-height: 55px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    margin-right: -15px;
}

.contentlastpart{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;  
    max-height: 420px;
    min-height: 420px;
}

.contentlastpart{
    color:#003897;
}

.contentlastpart h1{
    font: normal normal bold 65px/85px Noto Sans;
    color: #003897;
    text-shadow: 0px 0px 12px #FFFFFF;
    font-family: 'Noto Sans SC', sans-serif;
    letter-spacing: 1px;
}

.contentlastpart h3{
    font: normal normal 600 30px/50px Noto Sans;
    color: #003897;
    text-shadow: 0px 0px 25px #FFFFFF;
    font-family: 'Noto Sans SC', sans-serif;
    letter-spacing: 1px;
}

.lastbuttonpart{
    
}

.lastbuttonpart a.joinusbutton{
    background: #1DE3CB 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #0000004D;
    border-radius: 36px;
    opacity: 1;
    text-decoration: none;
    transition: all 0.3s;
    width: 420px;
    height: 75px;
    display: inline-block;
    text-align: center;
}


.lastbuttonpart a.joinusbutton:hover{
  opacity: 0.8;  
  transition: all 0.3s;
}


.lastbuttonpart a.joinusbutton span{
    line-height: 75px;
    color: #fff;
    font-size: 28px;
    text-align: center;
    margin-right: -15px;
}

footer{
    background-color: #003897;
}


footer .copyright{
    font: normal 400 normal 12px/18px Noto Sans;
    color: #FFFFFF;
    font-family: 'Noto Sans SC', sans-serif;
    letter-spacing: 0.3px;
}

footer .copyright span{
}

footer .cotnent{ 
   color: #fff;
    font-size: 14px;
    font-weight: 300;
}

footer .cotnent a {
    color: #fff;
    text-decoration: none;
}

footer .cotnent a:hover{
    color: #fff;
    text-decoration: none;
}


footer .cotnent span{ 
    color: #fff;
    display: block;
}


footer .cotnent i{ 
    color: #fff;
    display: inline-block;
    font-size: 20px;
}

footer .address{
   color: #fff;
    font-size: 14px;
    font-weight: 300;
    
}

.registermodal .close{
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
}

.registermodal .cmallmodal-logo{
    position: absolute;
    top: -120px;
    text-align: center;
    width: 100%;
}

.registermodal .cmallmodal-logo img{
    width: 200px;
}

.registermodal .modal-content{
   border-radius: 15px; 
}

.registermodal .modal-content .nav-tabs .nav-item{
    width: 50%;
    text-align: center;
    line-height: 45px;
    margin-bottom: -3px;
}

.registermodal .nav-tabs .nav-link{
    font-size: 23px;
    border-radius: 0;
    color: #1DE3CB;
    font-weight: 600;
}

.registermodal .nav-tabs .nav-link.active{
        background-color: #1DE3CB;
    color: #fff;
    font-size: 23px;
    border: 0;
    font-weight: 600;
}

.registermodal .nav-tabs{
        border: 2px solid #1DE3CB;
    border-radius: 15px;
    overflow: hidden;
}

.registermodal form label{
    color: #003897;
    font-weight: 600;
    font-size: 18px;
}

.registermodal form input{
    height: 45px;
    background: #0038971A;
    border: 0;
    border-radius: 10px;
    font-weight: 500;
    color: #003897;
}

.registermodal form input::placeholder{
    color: #003897;
    opacity: 0.2;
    font-size: 14px;
}

.registermodal button.btn-joinsubbmit{
    background: #1DE3CB 0% 0% no-repeat padding-box;
    border-radius: 36px;
    opacity: 1;
    text-decoration: none;
    transition: all 0.3s;
    width: 50%;
    height: 65px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    box-shadow: 0px 3px 6px #0000004D;
}


.registermodal button.btn-joinsubbmit:hover{
    opacity: 0.8;  
    transition: all 0.3s;
}

.registermodal .successfulmessage{
    
}

.registermodal .successfulmessage .fa-check-circle{
   background: transparent linear-gradient(180deg, #5BC4BA 0%, #1DE3CB 100%) 0% 0% no-repeat padding-box; 
   background: -webkit-linear-gradient(#5BC4BA, #1DE3CB);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}


.registermodal .successfulmessage h1{
    color: #003897;
    font-size: 50px;
    font-weight: 600;
 
}

.registermodal .successfulmessage h1 span{
    font-size: 27px;
    font-weight: 400;
    margin-top: 60px;
    display: block;
}

.registermodal .successfulmessage .downloadappdetail{
    border: 2px solid #003897;
    border-radius: 20px;
}

.registermodal .successfulmessage .downloadappdetail h2{
    color: #003897;
    margin-bottom: 30px;  
}

.registermodal .successfulmessage .downloadappdetail a{
    color: #1DE3CB;
    text-decoration: none;
    word-break: break-all;
    font-weight: 300;
    margin-bottom: 30px;
    display: inline-block;
}

.registermodal .successfulmessage .downloadappdetail a:last-child{
    margin-bottom: 0;
}

a.ytplaybutton{
   position: absolute;
    top: 23%;
    color: #fff;
    opacity: 0.8;
    text-align: center;
    width: 100%;
    font-size: 14rem;
} 


@media (max-width: 768px) {
    .headerlogo{
        width: 40%;
    }

    .headerlogo img{
        width: 100%;
    }
    
    .firstsection h2.secondtitle{
        font-size: 15px;
        margin-right: -15px;
    }
    .arrowdown {
        bottom: inherit;
        position: relative;
        margin-bottom: 25px;
    }
    .lastbuttonpart a.joinusbutton{
        width: 100%;
    }
    
    .lastbuttonpart a.joinusbutton span{
        font-size: 1.3rem;
    }
    
    .contenleft-rightimage .content h1, .contenright-leftimage .content h1{
           font-size: 45px; 
    }
    
    .contenleft-rightimage .content h1 span, .contenright-leftimage .content h1 span{
        font-size: 24px;
    line-height: normal;
    padding-top: 10px;
    }
    
    .contentlastpart h1{
          font-size: 40px;
    line-height: normal;  
    }
    
    .contentlastpart h3{
            font-size: 24px;
    line-height: normal;
    }
    footer .cotnent, footer .address{
        text-align: center;
        margin-top: 15px;
    }
    .registermodal .nav-tabs .nav-link.active, .registermodal .nav-tabs .nav-link{
        font-size: 20px;
    }
    
    .registermodal button.btn-joinsubbmit{
        width: 100%;
    }
    
    .registermodal .successfulmessage h1 span {
        font-size: 27px;
        font-weight: 400;
        line-height: normal;
        display: inline-block;
        padding-top: 20px;
    }
}