@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
/* general */
.font-light{font-weight: 500}
.font-medium{font-weight: 400}
.font-semi-bold{font-weight: 600}
.font-bold{font-weight: 700}

:root{
    
    --red:#d71c58;
    --blue-light:#8aa3ce;
    --black:#000000;
    --blue:#946ecb;
    --blue-dark:#282177;
 --indigo:#6610f2;
 --purple:#6f42c1;
 --pink:#e83e8c;
 --red:#ee1751;
 --orange:#fd7e14;
 --yellow:#ffc107;
 --green:#28a745;
 --teal:#20c997;
 --cyan:#17a2b8;
 --white:#fff;
 --gray:#3a3939;
 --gray-dark:#343a40;
 --primary:#007bff;
 --secondary:#6c757d;
 --success:#28a745;
 --info:#17a2b8;
 --warning:#ffc107;
 --danger:#dc3545;
 --light:#f8f9fa;
 --dark:#343a40;
 --amaranth:#D71C58;
   
}
body {
    background: #fff;
    color: #282177;
    font-size: 22px;
    font-weight: 400;
    font-family: font-family: 'Open Sans', sans-serif;;
}


a{ transition:all ease .4s ;
  -moz-transition:all ease .4s ;
  -webkit-transition:all ease .4s ;
 -o-transition:all ease .4ms ;}
a:hover {
    text-decoration: none;

}

ul {
    padding: 0;
    margin: 0;
}

ul li {
    list-style-type: none;
}
.img-responsive{max-width: 100%;height: auto}
.btn-blue{background: var(--blue);border-radius:50px;padding:13px 75px;color: #ffffff;border: 1px solid  var(--blue);font-size: 17px; }
.btn-blue:hover{background: var(--blue-dark);color: #ffffff }

.btn-blue-borderd{border-radius:50px;padding:13px 75px;color:var(--blue);border: 1px solid  var(--blue);font-size: 17px; }
.btn-blue-borderd:hover{background: var(--blue-dark);color: #ffffff }

.btn-blue:focus,
.btn-blue-borderd:focus
{
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 1s infinite;}
@keyframes pulse {
	0% {
		
		box-shadow: 0 0 0 0 rgba(40, 33, 119, 0.7);
	}

	70% {
		
		box-shadow: 0 0 0 10px rgba(40, 33, 119, 0);
	}

	100% {
		
		box-shadow: 0 0 0 0 rgba(40, 33, 119, 0);
	}
}
/**/
header{padding: 15px 0}
header .navbrand{}
/* button */
.cust-button {
    background: #946ecb;
    padding: 6px 26px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 20px;
    color: #fff;
    border: 2px solid transparent;
    transition: .5s ease-out;
    display: inline-block;
}
.cust-button:hover {
    color: #fff;
    opacity: 0.5;
}
.btn-login{
    background: #946ecb;
    padding: 8px 50px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 20px;
    color: #fff;
    border: 2px solid transparent;
    transition: .5s ease-out;
    display: inline-block; 
}
.btn-login:hover {
    color: #fff;
    opacity: 0.5;
}
.btn-register{
    background: #fff;
    padding: 8px 50px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 20px;
    color: #946ecb;
    border: 2px solid #946ecb;
    transition: .5s ease-out;
    display: inline-block; 
}
.btn-register:hover {
    color: #946ecb;
    opacity: 0.5;
}
.button:focus {
    outline: none !important;
}
.section {
    padding:11rem 0;
}

.section-bottom-only {
    padding-bottom: 90px;
}

.section-title {
    margin-bottom: 50px;
    text-align: center;
}

.section-title .title-top {
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #415678;
    letter-spacing: 4px;
    font-size: 18px;
}

.section-title h3 {
    font-size: 36px;
    font-weight: 800;
}

.section-title.section-title-left {
    text-align: left;
}

.section-title .title-desc {
    margin-top: 15px;
}

/* navbar */
.navbar {
    background: transparent;
    transition: .5s ease-out;
    padding: 15px 0;
}

.navbar .navbar-brand h1 {
    font-size: 26px;
    color: #020312;
}


.navbar .navbar-nav li {
    padding: 0 19px;
}

.navbar .navbar-nav li .nav-link {
    font-size: 20px;
    font-weight: 500;
    color: #020312;padding:8px 35px;
    transition: all .5s ease;
    transition:All .5s ease;
    -webkit-transition:All .5s ease;
    -moz-transition:All .5s ease;
    -o-transition:All .5s ease;
    border-radius: 25px;
}
.navbar .navbar-nav li .nav-link:hover {background: #946ecb;color: #ffffff;}


.navbar .navbar-toggler {
    border-radius: 0;
    border: 0;
}

.navbar .navbar-toggler i {
    font-size: 28px;
}

.navbar .navbar-toggler:focus {
    outline: 0;
}

/* home intro */

.home-intro { padding: 50px 0;background: url(../images/banner.png) no-repeat right center / contain;height: calc(215px + (700 - 215) * ((100vw - 320px) / (1920 - 320)));}
.home-intro h3{ font-weight: 400;font-size: calc(20px + (44 - 22) * ((100vw - 320px) / (1920 - 320)));line-height: 38px;margin: 0; }
.home-intro h2{ font-weight: 700;font-size: calc(25px + (48 - 25) * ((100vw - 320px) / (1920 - 320)));line-height: 38px}

.home-intro .content h2 {
    font-size: 64px;
    font-weight: 800;
}

.home-intro .content h2 .color-highlight {
    color: #415678;
}

.home-intro .content h2:nth-child(2) {
    margin-bottom: 30px;
}

.home-intro .content-image img {
    width: 100%;
}

.home-intro ul li {
    display: inline-block;
}

.home-intro ul li:last-child {
    margin-left: 15px;
}

/* Hightlights */



.about{padding: 100px 0;overflow: hidden;position: relative;}
.about h2{font-weight: 700;font-size: calc(22px + (48 - 22) * ((100vw - 320px) / (1920 - 320)));line-height: 38px}
.about ul{padding: 0 0 50px;}
.about ul li{padding: 0 0 27px 68px;position: relative;color: #322e5e;font-size: 26px}
.about ul li::before{border:1px solid #dcdcdc;width: 50px; height: 50px;display: block;content: "";border-radius: 25px;left: 0; top: 0;position: absolute;}
.about ul li::after{background: var(--blue); width: 27px; height: 27px;display: block;content: "";border-radius: 25px;left: 12px; top:12px;position: absolute;}
.about .rotation{position: absolute;right: -200px;top: 10%;
   -webkit-animation:spin 54s linear infinite;
    -moz-animation:spin 54s linear infinite;
    animation:spin 54s linear infinite;}

    

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.circle-border-highlights{
    border: 1px solid #ddd;
    border-radius: 20px;
    vertical-align: top;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height:2;
}
.text-width{
    width: 80%;
    display: inline-block;
}
.hg-text-width{
    width: 80%;
    display: inline-block;
}
.survey-text-width{
    width: 30%;
    display: inline-block;
}

/* why us */
.process-work{background:url(../images/desktop.png) #220e3f no-repeat;padding: 160px 0  180px;color: #e1deff;}
.process-work h3{font-size: calc(25px + (49 - 25) * ((100vw - 320px) / (1920 - 320)));color: var(--blue);font-weight: 300}
.process-work h2{font-size: calc(30px + (70 - 30) * ((100vw - 320px) / (1920 - 320)));font-weight: 700;color: #ffffff}

.adventages {padding: 150px 0}
.adventages h2{ font-size:calc(25px + (72 - 25) * ((100vw - 320px) / (1920 - 320)));font-weight: 700;color: var(--black)}
.adventages ul{padding:29px 0 38px 25px}
.adventages ul li{font-size: 27px;padding:5px 0 6px 39px;position: relative;font-weight: 600;}
.adventages ul li span{font-size: 22px;position: absolute;left: 0; top:14px;width: 20px;height: 20px;display: block;border-radius: 50px}
.adventages ul li span.violet{background: #8f5396}
.adventages ul li span.blue{background: #64a7dd}
.adventages ul li span.pink{background: #d761a2}

.circle-border-whyus{
    border: 1px solid #4b2f4f;font-size: calc(25px + (44 - 25) * ((100vw - 320px) / (1920 - 320)));font-weight: 700;color: var(--blue);
    border-radius: 50%;
    padding: 22px;
    vertical-align: top;
    width: 80px;
    height: 80px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
}

/* advantages */
.border-purple{
    border-color:#946ecb !important;
}
.flex-container{
    width: 100%;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    flow-direction: row;
    flex-wrap: wrap;
}
.columns{
    width: 33%;
    border: 1px solid #ddd;
    background: #fff;margin-left: -1px;padding: 31px 0;   
}

/* footer bottom */
.footer-bottom {
    background: #29134a;
    padding: 35px 150px;
    color:#ffffff;
    font-size:17px;
}


.mbr-parallax-background,
.mbr-background {
  background-attachment: fixed !important;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover !important;
}
.mbr-hidden-scrollbar .mbr-parallax-background {
  background-size: auto 130%;
}   

.counter{padding: 50px 0 0}
.counter h4{font-size: 18px; color: #000000;font-weight: 600}
.counter h3{font-size: 35px; color: #946ecb;font-weight: 600;}
.counter .column{font-size: 35px; color: #000000;padding: 25px 0  }
/* responsive */
@media (max-width:1400px){
    .home-intro{background-size: 56%;padding: 36px 0;}
    body{font-size: 19px;}
    .about{padding:40px 0 70px;}
    .about ul li{font-size: 21px;}
    #highlights img{max-width: 100%;height: auto}
    .about ul li::before{height: 37px;width: 37px;}
    .about ul li::after{height:20px;width:20px;left: 9px; top: 9px;}
    .about ul li{padding: 0 0 20px 47px;}
    .process-work{padding: 87px 0 123px;}
    .circle-border-whyus{width: 66px;height: 66px;}
    .circle-border-whyus{padding: 19px;}
    .adventages{padding: 71px 0;}
    .adventages img{max-width:calc(400px + (630 - 400) * ((100vw - 320px) / (1920 - 320)))}
    .adventages ul{padding: 0 0 9px 25px;}
    .adventages ul li{padding: 5px 0 6px 39px;font-size: 23px;}
    .survey-text-width{width: 45%;}
}
@media (max-width:1200px){
    .navbar-brand img{ max-width: 202px}
    img,.adventages img{max-width: 100%;}
}
@media (max-width:1200px){
    .col-width{
        width:1025px;
    }
   
}

@media (max-width:991px){
    .home-intro{height: auto;padding-top:calc(275px + (630 - 275) * ((100vw - 320px) / (1920 - 320)));background: url(../images/banner.png) no-repeat center top / 85%}
    .process-work .cover{background: rgba(34, 14, 63, 0.5);padding: 20px 20px 35px 20px;border-radius: 15px;}
    .process-work{padding: 87px 0}
    .counter{padding: 0;}
}


@media (max-width:767px) {
    .navbar .navbar-nav {
        background: #fff;
        box-shadow: 0 12px 30px -15px rgba(0, 0, 0, 0.2);
        border-radius: 0 0 15px 15px;
        border-top: 0;
        outline: none;
        padding: 14px 10px;
    }


    
    .about{padding: 6px 0 22px;}
    .process-work{padding: 23px 0;}
    .adventages{padding: 28px 0;}
    .navbar .navbar-toggler i{border-radius: 4px;padding: 2px 12px;color: #fff;background: #282177;}
    .btn-blue-borderd,.btn-blue{padding: 13px 50px;}
    .home-intro{padding-bottom: 0;}
    .about ul li{font-size: 19px;font-weight:600}
    .about ul li::before{height: 31px;width: 31px;}
    .about ul li::after{left: 6px;top: 6px;}
    .about ul{padding: 0 0 12px;}
}

/* mobile portrait */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .navbar .navbar-brand {
        margin-left: 15px;
    }
    .col-width{
        width:auto;
    }
 
   
    .navbar .navbar-brand img {
        margin-left: -12px;
    }
    .text-width {
        width: 70%;
        display: inline-block;
    }
    .sm-v-align-top{
        vertical-align:top;
    }
    .sm-pad-4{
        padding:2rem 0;
    }
    .btn-login{
        padding:8px 40px;
    }
    .btn-register{
        padding:8px 40px;
    }
    .columns {
        width: 100%;
        border: 1px solid #ddd;
        background: #fff;
        margin-bottom: 10px;
    }
    .pad-5{
        padding:1rem;
    }
    .sm-mr-t-2{
        margin-top: 2rem;
    }
    .sm-items-center{
        justify-content:center;
    }
    .footer-bottom{
        padding:10px;
        font-size:8px;
    }
}

/* mobile landscape */
@media (min-width: 481px) and (max-width: 767px) {
    .img-height{
        height:40px;
    }
    .sm-pad-4{
        padding:2rem 0;
    }
  
    .text-width {
        width: 80%;
    }
    .sm-mr-t-2{
        margin-top: 2rem;
    }
    .columns {
        width: 100%;
        border: 1px solid #ddd;
        background: #fff;
        margin-bottom: 10px;
    }
    .pad-5{
        padding:1rem;
    }
    .footer-bottom{
        padding:20px;
    }
    .navbar .navbar-brand {
        margin-left: 6px;
    }
}

/* ipad Potrait */
@media only screen and (max-width: 991px) and (min-width: 768px) {
    .navbar .navbar-brand {
        margin-left: 6px;
    }
    .img-height{
        height:50px;
    }
    .sm-pad-4{
        padding:3rem 0;
    }
    .text-width {
        width: 68%;
    }
    .sm-v-align-top{
        vertical-align:top;
    }
    .pad-5{
        padding:1rem;
    }
    .footer-bottom{
        padding:20px;
    }
}


/* ipad landscape */
@media only screen and (min-width: 992px) and (max-width: 1024px){
    .text-width {
        width: 68%;
    }
    .footer-bottom{
        padding:20px;
    }
    .logo-ml{
        margin-left:-37px;
    }
}