@font-face {
    font-family: 'proxima_novaregular';
    src: url('../fonts/proximanova-regular-webfont.woff2') format('woff2'),
         url('../fonts/proximanova-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_novasemibold';
    src: url('../fonts/proxima_nova_semibold-webfont.woff2') format('woff2'),
         url('../fonts/proxima_nova_semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{margin: 0; font-family: 'proxima_novaregular'; font-size: 14px;}
h1,h2,h3,h4,h5,h6{font-family: 'proxima_novasemibold'; font-weight: bold;}
.header{background: url(../images/banner.jpg) no-repeat top center; max-width: 1440px; min-height: 762px; margin: 0 auto; display: flex; vertical-align: middle; align-items: center; flex-direction: row-reverse;}
.login-form{width:400px;}
img{max-width: 100%; width:100%;}
.logo-container{text-align: center;}
.logo-container img{width:200px;}
.formContainer h2{color: #4a3954; text-align: center;}
.login-form input[type=text], .login-form input[type=password]{border: 1px solid #eee; border-radius:5px ; margin-bottom: 20px; padding: 15px 4%; width: 92%; font-size: 14px;} 
.login-form input[type=submit]{background: #666cff; color: #fff; border-radius: 5px; font-size: 14px; width: 100%; padding: 15px 4%; border: 0 none; cursor: pointer;}
.forgotPass {padding: 15px 0;}
.forgotPass a{color: #666cff; text-decoration: none; font-size: 14px; }
.forgotPass a:hover{text-decoration: underline;}
.createAccount a{background: #e6e6e6; color: #000; border-radius: 5px; font-size: 14px; width: 92%; padding: 15px 4%; border: 0 none; display: block; text-decoration: none; text-align: center;}
.whyContainer{background: #ffffff; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(230, 230, 230, 1) 100%); max-width: 1380px; margin: 0 auto; padding: 50px 30px;}
.whyContainer h2{font-size: 32px; text-align: center; margin: 0 0 30px;font-family: 'proxima_novasemibold';}
.whyBoxContainer{display: flex; column-gap: 20px; align-items: center; justify-content: center; }
.boxContainer{background: #fff; border-radius: 10px; padding: 20px; text-align: center; width: 28%; min-height: 350px; border:1px solid #fff;}
.boxContainer:hover{border:1px solid #293e72;}
.boxContainer img{width:auto;}
.boxContainer h3{font-size: 24px;}
.boxContainer p{font-size: 18px;}
.ctaContainer{text-align: center; padding: 30px 0 0;}
.ctaContainer a{background: #ff0000; color: #fff; border-radius: 100px; display: inline-block; padding: 15px 30px; text-decoration: none; font-size: 18px; font-weight: bold;}
.ctaContainer a:hover{background: #293e72;}
.whyChoose{padding: 30px 0; margin: 0 auto; max-width: 1440px;}
.howWork{background: #eef4ff; max-width: 1350px; margin: 0 auto; padding: 50px 50px;}
.howWork h2{font-size: 32px; text-align: center; margin: 0 0 50px;font-family: 'proxima_novasemibold'; color: #293e72; font-weight: bold;}
.howWrkcContainer{display: flex; column-gap: 30px; align-items: center; justify-content: center;}
.howWrkcContainer img{max-width: 100%;}
.faqContainer{padding: 50px 50px; max-width: 1440px; }
.faqContainer h2{font-size: 32px; text-align: center; margin: 0 0 50px; font-family: 'proxima_novasemibold'; color: #293e72; font-weight: bold;}
.hideme {display: none; font-size: 14px; color:#000;}
.container .faqcontent:first-child .hideme{display: block;} 
.showBtn{display: block; position: relative; font-weight: bold; cursor: pointer;}
.faqcontent{border: 1px solid #ccc; margin-bottom: 15px; padding: 20px 20px; border-radius: 30px; font-size: 18px; color: #293e72;}
a.faqcta{background: #ff0000; color: #fff; border-radius: 100px; display: inline-block; padding: 10px 15px; text-decoration: none; font-size: 14px; font-weight: bold;}
a.faqcta a:hover{background: #293e72;}
ul#tabs{display: flex; align-items: center; justify-content: center;}
.footerContent{text-align: center; margin: 0 0 30px;}
.footerContent a{color: #000; text-decoration:  none;}
.footerContent a:hover{text-decoration: underline;}
.showBtn::before{content: ''; position: absolute; right: 0; top: 0; background: url(../images/right-arrow.jpg) no-repeat; width: 19px; height: 28px; background-size: 70%;}
.showBtn.active::before, .container .faqcontent:first-child .showBtn::before{content: ''; position: absolute; right: 0; top: 0; background: url(../images/down-arrow.jpg) no-repeat; width: 28px; height: 19px; background-size: 70%;}
#tabs {
   width: 100%; 
   margin-top: 30px;
   margin: 0; padding: 0;
}
a {cursor:pointer;}
#tabs li {
    list-style:none; 
    margin:0 10px; 
    outline:none;
}
#tabs li a {

    font-family:Arial, Helvetica, sans-serif; 
    font-size: 18px;
    font-weight: bold; 
    color: #fff;
    padding: 20px 30px;
    display:block; 
    background: #283c6f;
    background: linear-gradient(90deg,rgba(40, 60, 111, 1) 0%, rgba(0, 0, 0, 1) 100%);
    border-radius:50px; 
    text-decoration:none;
    outline:none;
    border: 1px solid #283c6f;
    text-align: center;
}
#tabs li a.inactive{
    padding: 20px 30px;
    color:#000;
    background: #fff;
   outline:none;
   border: 1px solid #ccc;

}
.container {
    clear:both;           
    width:100%; 
    text-align:left;
  padding-top: 20px;

}
.container h2 { margin-left: 0;  margin-right: 0;  margin-bottom: 10px; color: #5685bc; }
.container p { margin-left: 0; margin-right: 0;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }
.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }
.container li { padding-bottom: 5px; margin-left: 5px;}
.header-m{display: none;}
@media only screen and (max-width: 1400px) {
    .header{background-size: 100%;}
    .login-form{margin-right: 40px;}
    .header-m{display: none;}

}
@media only screen and (max-width: 1280px) {
    .header{background-size: 100%;}
    .login-form{width: 300px; margin-right: 30px;}
    .header-m{display: none;}
    
}
@media only screen and (max-width: 1024px) {
    .header{background-size: 100%; min-height: 550px;}
    .login-form{width: 300px; margin-right: 30px;}
    .whyBoxContainer{flex-wrap: wrap; row-gap: 30px;}
    .boxContainer{width: 26%; min-height: 320px;} 
    .header-m{display: none;}
}
@media only screen and (max-width: 768px) {
    .boxContainer{width: 40%; min-height: 320px;} 
    #tabs li a {font-size: 14px; }
    .howWrkcContainer{flex-wrap: wrap;}
    .imageContainer{width: 70%;}
    ul#tabs{display: block;}
    #tabs li{padding: 10px 0;}
    .header{max-width: 1440px; min-height: auto; margin: 0 auto; display: block; background: none;}
    .header-m{color: #fff; text-align: center; display: block; padding: 30px 0;background: #283c6f; background: linear-gradient(180deg,rgba(40, 60, 111, 1) 0%, rgba(0, 0, 0, 1) 100%);}
    .login-form{width: 90%; margin: 0 auto; padding-top: 50px;}
    .header-m h2{font-size: 36px; padding-left: 20px; padding-right: 20px;}
    .header-m h3{font-size: 26px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; background: #ff0000; }
    .header-m p{font-size: 18px; padding-left: 20px; padding-right: 20px;}
    .faqContainer, .howWork{padding: 40px 20px;}
    .faqcontent{padding: 20px 30px 20px 20px;}
    .showBtn::before, .showBtn.active::before, .container .faqcontent:first-child .showBtn::before{right: -25px;}
}
@media only screen and (max-width: 640px) {
    .boxContainer{width: 80%; min-height: auto;} 
    .imageContainer{width: 100%;}
    
}