/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html {
    min-width: fit-content;
    padding: 30px 5px;
 }
 
 body {
     background-color: #fff;
     background-image: url(../img/live-bg-full.png);
     width: 100%;
     height: 100vh;
     color: #333333;
     font-family: 'Noto Sans SC';
     text-align: center;
     padding: 0px;
     margin: 0px;
     background-size: cover;
     background-position: top;
     background-repeat: no-repeat;
 }
 
 a {
   color: #46DEE6;
   text-decoration: none;
   transition: 0.5s;
   cursor: pointer;
 }
 
 a:hover,
 a:active,
 a:focus {
   color: #f5bb44;
   outline: none;
   text-decoration: none;
 }
 
 p {
   padding: 0;
   margin: 0px;
   font-weight: 300;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-weight: 500;
   margin: 0px;
   padding: 0;
   padding-bottom: 10px;
 }
 
 .container {
     margin-left: auto;
     margin-right: auto;
     max-width: 1320px;
     position: relative;
 }
 
 .logo-container img {
     width: 50px;
 }
 
 .section {
     width: 100%;
     padding: 0px;
     margin: 0px;
     text-align: left;
     padding: 1% 0;
     font-weight: 800;
     position: relative;
 }
 
 .section p {
   margin-bottom: 10px;
 }
 
 .desc {
     text-align: left;
     /* display: flex;
     flex-direction: row; */
     align-items: center;
     background-color: white;
     border-radius: 20px;
     padding: 0 10%;
     line-height: 24px;
     display: table;
     min-width: -webkit-fill-available;
 }
 
 .img-cow {
     z-index: 0;
 }
 
 
 #lang-switch img {
   width: 24px;
   height: 24px;
   transition: all .5s;
   margin: auto 3px;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   border: 1px solid #a5001f;
   border-radius: 50px;
 }
 
 #lang-switch img:hover {
   cursor: pointer;
   opacity: 1;
 }
 
 .cn_lang,
 .en_lang,
 .hk_lang,
 .ar_lang {
   display: none;
   transition: display .5s;
 }
 
 /* Language */
 .active-lang {
   display: block;
   transition: display .5s;
 }
 
 .active-flag {
   transition: all .5s;
   opacity: 1;
 }
 
 /* Giving a background-color to the nav container. */
 nav { 
     margin:0;
     padding: 0;
     position: relative;
 }
 
 #logo {
     padding: 28px 0 0 0;
 }
 
 
 /* Since we'll have the "ul li" "float:left"
  * we need to add a clear after the container. */
 nav:after {
     content:"";
     display:table;
     clear:both;
 }
 
 nav ul li ul li  { background: #f9c20a; color: #454545; cursor: pointer; }
 nav ul li ul li:hover { background: #454545; color: #fafafa; cursor: pointer; }
 
 nav #logo a { padding: 0px; }
 nav #logo a:hover { background: transparent; color: black;}
 
 .currency-switcher {
     position: absolute;
     right: -60px;
     width: 138px;
 }
 
 div.dropdown {
     position: relative;
     width: 138px;
     margin-top: 28px;
     right: 40px;
 
 }
 
 div.dropdown:after {
     content: "";
     position: absolute;
     margin: 0;
     width: 16px;
     height: 17px;
     top: 15px;
     right: 10px;
     -webkit-transition: .3s;
     transition: .3s;
 }
 
 div.dropdown>div.caption {
     cursor: pointer;
     padding: 7px 0px 0px 40px;
     font-size: 14px;
     line-height: 150%;
     letter-spacing: 0.3px;
     color: #333;
 }
 
 div.dropdown>div.caption:after { 
     content:  '  \25BC '; 
 } 
 
 div.dropdown.open>div.caption:after {
     content:  '  \25B2 ';
 }
 
 div.dropdown>div.list {
     position: relative;
     background-color: #fff;
     width: 100%;
     border-radius: 12px;
     -webkit-box-shadow: 0px 12px 24px rgba(21, 18, 51, 0.13);
     box-shadow: 0px 12px 24px rgba(21, 18, 51, 0.13);
     opacity: 0;
     overflow: hidden;
     -webkit-transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear;
     transition: all 0.15s cubic-bezier(0.25, 0, 0.25, 1.75), opacity 0.1s linear;
     -webkit-transform: scale(0.85);
     transform: scale(0.85);
     -webkit-transform-origin: 50% 0;
     transform-origin: 50% 0;
     z-index: -1;
     top: 10px;
     visibility: hidden;
     padding: 10px 0;
 }
 
 div.dropdown.open>div.list {
     -webkit-transform: scale(1);
     transform: scale(1);
     opacity: 1;
     z-index: 1;
     visibility: visible;
 }
 
 div.dropdown>div.list>div.item {
     padding: 5px;
     cursor: pointer;
     -webkit-transition: .3s;
     transition: .3s;
     font-size: 14px;
     line-height: 150%;
     letter-spacing: 0.3px;
     position: relative;
 }
 
 div.dropdown>div.list>div.item.selected {
     background: rgba(36, 60, 187, 0.2);
     pointer-events: none;
 }
 
 div.dropdown>div.list>div.item:hover {
     background: #F8F9FB;
 }
 
 div.dropdown>div.caption img,
 div.dropdown>div.list>div.item img,
 div.dropdown>div.caption svg,
 div.dropdown>div.list>div.item svg {
     position: absolute;
     top: 5px;
     left: 15px;
 }
 
 div.dropdown>div.list>div.item span,
 div.dropdown>div.caption span {
     font-weight: 600;
     font-size: 14px;
     letter-spacing: 0.3px;
     color: #243CBB;
     position: absolute;
     right: 36px;
 }
 
 div.dropdown>div.list>div.item span {
     right: 20px;
 }
 
 .header-title{
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .why{
     background-color: #3E71DC;
     border-radius: 20px;
     padding: 20px;
     color: white;
 }
 
 h6{
     text-align: center;
     font-size: 1em;
 }
 
 
 /* Responsive */
 @media screen and (max-width: 3000px) {
     .title img {
         width: 100%;
     }
 
     .img-cow {
         width: 22%;
         left: -44px;
         bottom: -50px;
     }
 
     .container {
         max-width: 880px;
     }
 }
 
 
 @media screen and (max-width: 1920px) {
 
     .container {
         max-width: 880px;
     }
 }
 
 
 @media screen and (max-width: 1400px) {
     .container {
         max-width: 680px;
     }
 }
 
 @media screen and (max-width: 992px) { 
     
     .container {
         max-width: 560px;
     }
     
 }
 
 @media screen and (max-width: 680px) {
     .currency-switcher {
         right: 0;
     }
 }
 
 
 @media screen and (max-width: 580px) {
     #logo{
         display: block;
         float: left;
     }
     .container {
         max-width: 340px;
     }
 
     div.dropdown {
         right: 0px;
     }
 
     .logo-container img {
         width: 38px;
     }
     
     nav a {
         padding: 19px;
     }
     
     #logo img {
         width: 40px;
         height: auto;
     }
 
     .why {
         border-radius: 10px;
         padding: 10px;
     }
 
     .section p{
         font-size: 13px;
     }
 
     h2{
         font-size: 1rem;
     }
     h6{
         font-size: 0.67em;
     }
 }