@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,700&display=swap');
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css);

img{ max-width: 100%;}

body{ background-color: #ECEBF0; font-family: 'Open Sans', sans-serif; color: #505050;}
a{ color: #505050; text-decoration: none;}
a:hover{ text-decoration: none; color: #000;}

p, ul , ol{ font-size: 16px;}
b, strong {font-weight: 700;}

.top-bar{ background-color: #267DFF; font-size: 14px;}
.top-bar a{ color: #ECEBF0;}
.top-bar a:hover{ color:#FAC58F}

.lng-sec{padding:5px 5px 5px 13px;  background-color:#505050; border-radius:20px; color: #fff; font-size: 13px; position: relative; max-width: 220px; margin-left: auto; white-space: nowrap;}
.lng-sec label{ margin: 0;}
.lng-sec select{ border: 0; background-color: transparent; color: #fff; -webkit-appearance: none;  -moz-appearance: none; appearance: none; padding: 2px 18px 2px 2px;}
.lng-sec select:focus-visible{ outline: 0;}
.lng-sec select option{ color: #000;}
.lng-sec:after{content: ""; position:absolute; top: 11px; right: 18px; width: 8px; height: 8px; border-right: #fff solid 2px; border-bottom: #fff solid 2px; transform: rotate(45deg); }

.top-menu li a{ margin-left: 10px;}

.nav_wrap{margin-right: -15px;}
.main_nav{display: flex; flex-wrap:wrap; justify-content: flex-end; font-size: 18px;}
.main_nav li{ position: relative; z-index:99999 !important;}
.main_nav li a{ color: #000; display:block; padding: 8px 15px;  font-weight: 500;}
.main_nav li:hover a, .main_nav li a.active{ color: #267DFF;}
.main_nav ul{ display: block; margin: 0; list-style-type: none; padding:12px; background-color: #fff; text-align: left; font-size: 15px;}
.main_nav > li:last-child:hover ul{ left: auto; right: 0;}
.main_nav > li:hover ul a{ color: #505050;}
.main_nav > li:hover ul a:hover{ color: royalblue; background-color: rgb(252, 252, 252);}

.login-wrap{  max-width:1100px; margin: auto;  min-height:68vh; display: flex; align-items: center;}
.login-wrap > .row{border-radius: 40px; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.02);}
.login_in{ padding: 10vh 4vw;}
.login_in.bg-color{background-color: #267DFF; box-shadow: inset 0 6px 10px rgba(0,0,0,0.1);}

.login-wrap h4{ font-size: 18px; font-weight: 400; margin:0 0 2px;}
.login-wrap h2{ font-size: 30px; font-weight: 500; padding-bottom: 5px;}
/*.login-wrap h2:after{ content:""; display: block; width: 70px; height: 3px; background-color: #505050; margin:  15px 0;}*/
/*.login-wrap .bg-color h2:after{ background-color: #fff;}*/
.login-wrap p, .login-wrap ul{ font-size: 16px; line-height: 1.6em; font-weight: 300;}
.login-wrap a.read_more{ font-size: 16px; font-weight: 600; color: #fff; padding: 10px 16px; border: 2px solid #fff; border-radius: 50px; margin-top: 15px; display: inline-block;}
.login-wrap a.read_more:hover{ color:#267DFF; background-color: #fff;}

.login-row{ margin-bottom: 15px; padding-top:12px;}
.login-row input, 
.login-row input:focus,
.login-row input:focus-visible,
.login-row input:active{ width: 100%; font-size: 16px; font-weight: 400; color: #505050; padding:12px 0; border:0; border-bottom: rgb(179, 179, 179) solid 2px; outline: 0;}
.login_form input[type="submit"]{font-size: 16px; font-weight: 600; color: #fff; padding: 10px 3vw; background-color: #267DFF; border: 2px solid #267DFF; border-radius: 50px; margin-top: 40px; display: inline-block; width: 100%;}
.login_form input[type="submit"]:hover{ color:#267DFF; background-color: #fff;}

.lng-sec.lng_custom{ display: flex; align-items: center;}

footer{ font-size: 14px; color: #505050;}

@media screen and (min-width:992px){
.main_nav > li:hover ul{display: block; position: absolute; top:100%; left: 0; min-width:220px;  border-top: #267DFF solid 3px; border-radius:0; box-shadow: 0 3px 6px rgba(0,0,0,0.1);} 
.main_nav ul{ display:none;}
}

@media screen and (max-width:991px){
    .top-contact{ font-size: 0;}
    .top-contact i{ font-size: 18px; margin-right: 10px;}

    .nav_wrap {margin-right:-10px;}

    .menu_wrap, .menu-toggle span {-webkit-transition: all 0.3s linear 0s;-moz-transition: all 0.3s linear 0s;-ms-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;    transition: all 0.3s linear 0s;}
    .menu-toggle {padding: 5px 10px;cursor: pointer; display: inline-block;}
    .menu-toggle span { display: block; background: #505050; height: 3px; border-radius: 5px; margin:5px auto;  width: 30px; opacity: 1;transform: rotate(0);}
    .mm_active .menu-toggle span:nth-child(1) {transform: rotate(45deg);transform-origin: 6px 6px 0;}
    .mm_active .menu-toggle span:nth-child(2) {opacity: 0;width: 0;}
    .mm_active .menu-toggle span:nth-child(3) {transform: rotate(-45deg);transform-origin:5px -3px 0;}

    .menu_wrap { display:block; position: fixed; top: 0; bottom: 0; left: -100%; padding: 15px; background-color: #fff; width: 290px; z-index: 9995; overflow: hidden; overflow-y: auto; transition: 0.3s; box-shadow: none;}
    .main_nav {display:block;font-size: 16px; text-align: left;}
    .main_nav > li{ border-bottom: rgb(230, 230, 230) solid 1px; background-color: rgb(252, 252, 252);}
    .main_nav ul{ padding: 0 20px 20px; font-size: 14px;}
    .main_nav ul a{padding:4px 12px;}
    
    .mm_active { overflow: hidden;}
    .mm_active .menu_wrap{ left: 0; box-shadow: 0 0 200px rgba(0,0,0,0.8);}

    .login-wrap h2 {font-size: 26px;}
}

@media screen and (max-width:767px){
    .login-wrap{ max-width: 480px;}
    .login-wrap h2 {font-size: 22px;}
    .login-wrap h4 {font-size: 16px;}
    .login-row {margin-bottom: 10px;padding-top: 6px;}
    .login_form input[type="submit"]{margin-top: 25px;}

    footer *{ text-align: center !important;}
}

@media screen and (max-width:480px){
    .top-contact i{margin-right: 5px;}
    .top-menu li a {margin-left: 0;}
}