@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css');
@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');
@import url('animate.css');
@import url('https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css');


/**************************************
                General
**************************************/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 
}
body{
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    background-color: #ffffff;
}
a,a:hover,a:focus{
    color: #38B6FF;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
main{
    overflow: hidden;
}
b, strong {
    font-weight: bold;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins', sans-serif;
}

/**************************************
        PreLoader
**************************************/
.preloader-area {
    position: fixed;
    z-index: 999999;
    background-color: #0ABEFF;
    width: 100%;
    height: 100%;
    text-align: center;
    left: 0;
    right: 0;
    top: 0;
}
.preloader-area .spinner {
    width: 4em;
    height: 4em;
    -webkit-transform: perspective(20em) rotateX(-24deg) rotateY(20deg) rotateZ(30deg);
    transform: perspective(20em) rotateX(-24deg) rotateY(20deg) rotateZ(30deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    -webkit-transform: translateY(-45%);
    transform: translateY(-45%);
    margin-left: auto;
    margin-right: auto;
}
.preloader-area .spinner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    right: 0;
    bottom: 0;
    border: 2px dotted #ffffff;
    margin: -15px;
}
.preloader-area .spinner .inner {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: sphereSpin 6s linear infinite;
    animation: sphereSpin 6s linear infinite;
}
.preloader-area .spinner .disc {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 0.3em dotted #ffffff;
}   
.preloader-area .spinner .disc:nth-child(1) {
    -webkit-animation: rotate 12s linear infinite;
    animation: rotate 12s linear infinite;
}
.preloader-area .spinner .disc:nth-child(2) {
    -webkit-animation: rotateDisc2 12s linear infinite;
    animation: rotateDisc2 12s linear infinite;
}
.preloader-area .spinner .disc:nth-child(3) {
    -webkit-animation: rotateDisc3 12s linear infinite;
    animation: rotateDisc3 12s linear infinite;
}      
  

@keyframes sphereSpin {
    0% {
        transform: rotateX(360deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(0deg) rotateY(360deg);
    }
}
@keyframes rotate {
    from {
              transform: rotate(0deg);
    }
    to {
              transform: rotate(360deg);
    }
}
@keyframes rotateDisc2 {
    from {
        transform: rotateX(90deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(90deg) rotateZ(360deg);
    }
} 
@keyframes rotateDisc3 {
    from {
        transform: rotateY(90deg) rotateZ(0deg);
    }
    to {
        transform: rotateY(90deg) rotateZ(360deg);
    }
}
/**************************************
                Helper Class
**************************************/

p{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 150%;
    color: #000000;
}

.primary-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #070A0C;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 51px;
    padding: 10px 20px;
    outline: none;
    transition: all .3s;
    height: 44px;
    width: 200px;
    font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #070A0C;
display: inline-block;
}

.primary-btn:hover{
    background: #FBAD18;
    background:#C1FF72;
    color: #fff;
    color: rgba(7, 10, 12, 1);
    border-color:#C1FF72;
    
}
.secondary-btn{
    padding: 0px 20px;
    height: 60px;
    width: 180px;
    background: #081125;
    border-radius: 5px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 60px;
    text-align: center;
    color: #FFFFFF;
    transition: all .3s;
    display: inline-block;
}

.secondary-btn .circle{
    border-color: #fff;
}
.secondary-btn:hover{
    background: #FF6520;
color: #fff;
}
.nice-select.form-control{
float: unset;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #2E313A;
padding: 11px 15px;
border: 1px solid #D0D3DA;
border-radius: 4px;
padding-right: 20px;
}
.nice-select:after {
    border-bottom: 4px solid #001124;
    border-right: 4px solid #001124;
    content: '';
    /* background-image: url(../img/select-arrow.png); */
    display: block;
    background-repeat: no-repeat;
    height: 10px;
    margin-top: -6px;
    pointer-events: none;
    position: absolute;
    right: 22px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(45deg);
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    width: 10px;
}
.nice-select.open:after {
    -webkit-transform: rotate(-136deg);
    -ms-transform: rotate(-136deg);
    transform: rotate(-136deg);
    margin-top: -8px;
    -moz-transform: rotate(-136deg);
    -o-transform: rotate(-136deg);
}

.form-control{
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #081125;
    height: 55px;
    border: 0;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    padding: 16px 20px;
}
.form-control::placeholder{
    color: rgba(0, 0, 0, 0.3);
}

.nice-select.form-select:focus,.form-control:focus{
    box-shadow: none;
    border: 0px solid #125197;
    background: rgba(0, 0, 0, 0.05);
}
.mawar .nice-select .option {
    line-height: 24px;
    min-height: 24px;
}
.mawar .nice-select .option.focus, .mawar .nice-select .option.selected.focus, .mawar .nice-select .option:hover {
    background-color: #20212408;
    color: #38B6FF;
}
.mawar .nice-select.form-control {
    line-height: 25px;
   
}
.form-icon{
    position: relative;
}
.form-icon .form-control{
    padding-right: 55px;
}
textarea.form-control{
    border-radius: 10px;
}
.form-icon span{
    position: absolute;
    right: 0;
    top: 0;
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nice-select .list{
    width: 100%;
    min-height: auto;
    max-height: 300px;
    overflow: auto;
}
.form-group {
    position: relative;
    margin-bottom: 25px;
}


/**************************************
        Home
**************************************/
.hero-area{
    background: radial-gradient(79.48% 79.48% at 49.31% 43.44%, #37B6FF 0%, #C9E4F3 100%);
    padding-top: 233px;
    padding-bottom: 0px;
}
.hero-down-wave{
    margin-top: 78px;
}
.hero-title{
    font-style: normal;
font-weight: 700;
font-size: 80px;
line-height: 70px;
text-align: center;
color: #FFFFFF;
text-shadow: 0px 4px 0px #0C5C75;
transform: rotate(-2.93deg);
margin-bottom: 50px;
}
.hero-title span{
font-style: normal;
mix-blend-mode: normal;
text-shadow: 0px 4px 0px #FBAD18;
transform: rotate(-2.93deg);
line-height: 90px;
}
.hero-dec{
    font-style: normal;
font-weight: 600;
font-size: 25px;
line-height: 35px;
text-align: center;
color: #0C5C75;
margin-bottom: 44px;
}
/************* Catch **********/
.catch {
    margin-top: -80px;
    padding-bottom: 0px;
    position: relative;
}
.heading-style1{
    transform: rotate(-3.49deg);
    margin-bottom: 40px;
}
.heading-style1 h2{
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 60px;
text-align: center;
color: #FBAD18;
margin-bottom: 0;
}
.heading-style1 h5{
 color: rgba(154, 165, 191, 1);
 font-size: 26px;
}
.dec{
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 30px;
color: #0E101A;
}

.dec-sub{
font-style: normal;
margin-bottom: 40px;
font-weight: 400;
font-size: 20px;
line-height: 30px;
color: #0C5C75;
}

/*************** How It Work ***********/
.how-it-work{
    background-image: url(../img/how-it-work-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 100px;
    /* background: linear-gradient(180deg, #37B6FF 3.61%, rgba(0, 161, 255, 0.06) 103.56%); */
}
.heading-style2{
    margin-bottom: 50px;
}
.heading-style2 h5{
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 45px;
    text-align: center;
    color: #FFFFFF;
    transform: rotate(2.17deg);
    margin-bottom: 25px;
}
.heading-style2 h2{
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 71px;
    text-align: center;
    color: #0C5C75;
    transform: rotate(4.68deg);
}
.step{ 
    width: 65px;
    height: 65px;
    background: #FBAD18;
    font-style: normal;
    font-weight: 800;
    font-size: 50px;
    line-height: 71px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 50%;
    margin-bottom: 15px;
}
.bg-thm{
    background: #38B6FF;
}
.title{
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 35px;
color: #023744;
transform: rotate(3.01deg);
margin-bottom: 25px;
margin-top: 32px;
}
.dec2{
    font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0E101A;
margin-bottom: 30px;
}
.step-content {
    padding: 88px;
    padding-right: 0;
    padding-top: 55px;
}
.step-img{
    position: relative;
}
.left-circle-arrow{
    position: absolute;
    left: -112px;
    top: 114px;
}
.right-circle-arrow{
    position: absolute;
    right: -112px;
    top: 114px;
}
.small-arrow{
    position: absolute;
    right: 260px;
    top: -70px;
}
.step-content.step2 h4{
color: #0C5C75;
transform: rotate(-2.69deg);
margin-bottom: 20px;
margin-top: 0;
}
.arrow-big{
    position: absolute;
    right: -47px;
    top: 170px;
}
/********* month-box *********/
.month-box {
    padding-top: 50px;
    padding-bottom: 80px;
}
.heading-style3 h5{
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 45px;
    text-align: center;
    color: #0C5C75;
    margin-bottom: 20px;
}
.heading-style3 h2{
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 50px;
text-align: center;
color: rgba(56, 182, 255, 1);
transform: rotate(3.6deg);
}
.month-item,.month-item .item-img{
position: relative;
border-radius: 50px;
height: 310px;
object-fit: cover;
transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
.item-name{
    position: relative;
    margin-left: 24px;
    opacity: 0;
}
.item-arrow{
    position: absolute;
    right: 6px;
    top: 14px;
    z-index: 1;
}
.item-name h4{
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 30px;
color: #515151;
transform: rotate(-7.7deg);
margin-bottom: 80px;
}
.month-item .item-img{
    width: 100%;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    object-fit: contain;
}
.month-box-item:hover .item-name{
    opacity: 1;
}
.month-box-item:hover .month-item img{
    border: 6px solid #FBAD18;
    background-color: #fff;
}
.month-box-item:hover .month-item{
    transform: rotate(5.46deg);
}
.month-box-item:hover .month-item .item-overlay{
    opacity: 0;
}
.item-overlay{
    background: #37B6FF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}
.brand{
    background-image: url(../img/brand-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 150px;
    padding-bottom: 100px;
}
.heading-style4{
    margin-bottom: 70px;
}
.heading-style4 h2{
    font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 50px;
text-align: center;
color: #38B6FF;
transform: rotate(-2.54deg);
}
.heading-style4 h5{
    font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 40px;
text-align: center;
color: rgba(251, 173, 24, 1);
transform: rotate(-2.54deg);
}
.brand-item{
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    margin: 13px;
    padding: 50px;
}
.brand-slider{
    margin-bottom: 100px;
}
.small-title{
    font-style: normal;
font-weight: 600;
font-size: 30px;
line-height: 45px;
text-align: center;
color: #0C5C75;
margin-bottom: 50px;
}
.counter-box {
    text-align: center;
}
.number{
font-style: normal;
font-weight: 700;
font-size: 100px;
line-height: 70px;
text-align: center;
color: #38B6FF;
}
.counter-box p{
    color: rgba(12, 92, 117, 1);
    text-transform: uppercase;
    font-size: 16px;
    
    font-weight: 600;
}
.plus::after{
    content: '+';
    font-size: 50px;
}
.percent::after{
    content: '%';
    font-size: 50px;
}
.k::after{
    content: 'K';
    font-size: 50px;
}
.user-speak{
    background: #EBF7FF;
    padding-bottom: 100px;
    padding-top: 20px;
}
.heading-style5 h2{
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 55px;
text-align: center;
color: #FBAD18;
transform: rotate(4.28deg);
margin-bottom: 60px;
}
.testi-box{
    background: #FFFFFF;
border: 1px solid #D8D8D8;
border-radius: 5px;
padding: 25px;
margin: 12.5px;
}
.testi-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.star i{
    background: #2AC468;
    padding: 3.4px;
    color: #fff;
}
.date{
    font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 22px;
color: #6A6A6A;
}
.testi-box h4{
    font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 22px;
color: #515151;
margin-bottom: 8px;
}
.testi-box p{
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 22px;
color: #515151;
margin-bottom: 8px;
}
.testi-box h6{
    font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 22px;
color: #515151;
margin-bottom: 0;
}

.faq{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 5%, #76CCFF 100%);
    padding-top: 80px;
    padding-bottom: 0px;
}
.section-title{
    font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 120%;
color: #38B6FF;
border-bottom: 1px solid #fff;
padding-bottom: 40px;
}
.accordion li{
    border-bottom: 1px solid #fff;
}
.faq-title{
    font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 120%;
color: #0C5C75;
padding: 16px 0;
margin-bottom: 0;
display: block;
cursor: pointer;
}
.faq-title:after{
    content: "\2b";
    font-size: 16px;
    color: #fff;
    font-family: var(--fa-style-family,"Font Awesome 6 Free");
    font-weight: var(--fa-style,900);
    float: right;
}
.faq-title.active:after{
    content: "\f00d";
}
.faq-panel{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 140%;
color: rgba(60, 60, 67, 0.85);
padding-bottom: 25px;
display: none;
margin-bottom: 0;
}

.get-in-touch{
    background-image: url(../img/get-in-touch-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 150px;
    margin-top: 60px;
    padding-bottom: 150px;
}
.get-in-touch-title{
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 71px;
color: #0C5C75;
transform: rotate(-1.64deg);
margin-bottom: 20px;
}
.get-in-touch p{
    font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0C5C75;
margin-bottom: 30px;
}
.get-in-touch .form-group{
    margin-bottom: 10px;
}
.get-in-touch .form-control{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0C5C75;
border-bottom: 1px solid #0C5C75;
padding: 10px 0;
border-radius: 0;
background-color: transparent;
}
.get-in-touch .form-control::placeholder{
    color: #0C5C75;
}
.get-in-touch .primary-btn{
    border-color: #fff;
    box-shadow: none;
    font-size: 20px;
}
/**************************************
                Footer
**************************************/
footer{
   background-image: url(../img/footer-bg.svg);
   background-size: cover;
   background-repeat: no-repeat;
   margin-top: -90px;
   padding-top: 130px; 
}
.footer-logo{
    font-style: normal;
    font-weight: 700;
    font-size: 35px;
    line-height: 32px;
    letter-spacing: 0.002em;
    color: #FFFFFF;
    padding-top: 60px;
}
.footer-title{
    font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 32px;
letter-spacing: 0.002em;
color: #FFFFFF;
margin-bottom: 14px;
}
footer p{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #FFFFFF;
margin-bottom: 14px;
}
footer ul li a{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #FFFFFF;
display: block;
margin-bottom: 16px;
}
.footer-menu a:hover{

}

.footer-social {
    display: block;
    text-align: center;
    display: flex;
    align-items: center;
    position: relative;
}
.footer-social a{
    width: 48px;
    height: 48px;
    background: rgba(233, 248, 243, 0.1);
    border-radius: 8px;
    margin-right: 10px;
    color: #38B6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}
.footer-social a:hover{
    background: #E9F8F3;
}
footer form .form-control{
height: 56px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50px;
padding: 16px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #FFFFFF;
}
footer form .form-control:focus{
    color: #fff;
}
footer form .form-control::placeholder{
    color: #fff;
}
footer form .form-group,.sub-dec{
    position: relative;
    margin-bottom: 30px;
}
.form-icon{
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #BBBBBB;
    font-size: 20px;
}
footer form .primary-btn{
    background: #38B6FF;
    color: #fff;
    width: 100%;
    border-color: #38B6FF;
    box-shadow: none;
}
.copyright{
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
padding: 27px 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: 27px;
}

/***************************************
    About 
****************************************/
.inner-hero{
    background-image: url(../img/inner-hero-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 73px;
    padding-top: 180px;
    padding-bottom: 220px;
}
.inner-hero-text{
    width: 650px;
    margin: auto;
}
.inner-hero-title{
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 64px;
text-align: center;
color: #0C5C75;
text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);
margin-bottom: 30px;
padding: 0 30px;
color:#C1FF72;
}
.inner-hero-title span{
    color: rgba(255, 255, 255, 1);
}
.inner-hero-dec{
    font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #0C5C75;
}

.mask{
    background-image: url(../img/bg2.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 70px;
}
.mask-heading h4{
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 50px;
align-items: center;
text-align: center;
color: #FBAD18;
transform: rotate(-2.04deg);
width: 780px;
margin: auto;
margin-bottom: 70px;
}
.mask-heading h4 span{
    font-weight: 700;
}
.mask-img-box{
    position: relative;
}
.mask .dec{
    color: #515151;
    font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.mask-bg {
    margin-left: 38px;
    margin-top: 68px;
}
.mask-img-big {
    position: absolute;
    left: 0;
}
.mask-img-small {
    position: absolute;
    right: 37px;
    bottom: 47px;
    transform: rotate(10deg);
}
.user-speak-style2{
    padding-top: 100px;
    padding-bottom: 108px;
}
.user-speak-style2 .heading-style4 h2{
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 55px;
text-align: center;
color: #38B6FF;
transform: rotate(-5.24deg);
width: 360px;
margin: auto;
}
.faq-style2{
/* background: linear-gradient(180deg, rgba(207, 227, 239, 0.1) 5%, #76CCFF 100%);
border-top: 12px solid #38B6FF; */
background-image: url(../img/faq-style2-bg.svg);
background-size: cover;
background-repeat: no-repeat;
padding-top: 150px;
padding-bottom: 190px;
}

.accordion2{
    position: relative;
    width: 100%;
    height: auto;
    border-bottom: 3px solid #fff;
  }
  .accordion2 > h3{
    display: block;
  }
  .accordion2 > h3 i{
    float: right;
    margin-top: 2px;
    font-size: 16px;
    color: #fff;
  }
  .faq-panel2 {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: rgba(60, 60, 67, 0.85);
    padding-bottom: 25px;
    display: none;
    margin-bottom: 0;
}
.faq-title2 {
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 120%;
    color: #0C5C75;
    padding: 16px 0;
    margin-bottom: 0;
    display: block;
    cursor: pointer;
}

/********************************
    Become Partner
********************************/
.become-partner-hero{
    background-image: url(../img/inner-hero-bg2.svg);
}
.become-partner-hero .inner-hero-title {
    padding: 0 20px;
}
.how-it-work-for-brand {
    background-image: url(../img/how-it-work-bg2.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 88px;
    padding-top: 88px;
}
.how-it-work-for-brand .heading-style4 {
    margin-bottom: 84px;
}
.how-it-work-for-brand .heading-style4 h2{
    font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 71px;
text-align: center;
color: rgba(56, 182, 255, 1);
transform: rotate(-2.7deg);
}
.how-it-work-for-brand .heading-style4 h2 span{
color: #0C5C75;

}
.how-it-work-for-brand .title {
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 45px;
    color: #0C5C75;
    transform: rotate(0deg);
    margin-bottom: 15px;
    margin-top: 10px;
}
.how-it-work-for-brand .step-img {
    position: relative;
    text-align: center;
}
.how-it-work-for-brand .step-content {
    padding: 0px;
    padding-right: 0;
    padding-top: 41px;
    height: 388px;
    width: 325px;
    margin-left: 40px;
}
.how-it-work-for-brand .right-circle-arrow {
    position: absolute;
    right: -81px;
    top: 100px;
}
.how-it-work-for-brand .left-circle-arrow {
    position: absolute;
    left: -90px;
    top: 100px;
}
.brand-style2 {
    background-image: url(../img/barnd-style2-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 60px;
    padding-top: 100px;
}
.brand-style2 .brand-item {
    border-radius: 5px;
    margin: 0px;
    padding: 20px 20px;
    background: rgba(255, 255, 255, 0.91);
    border: 1px solid #D8D8D8;
    /*height: 153px; */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
}
.brand-style2 .brand-item:hover{
    box-shadow: 0px 0px 10px 0px #ddd;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    border-color: #fff;
}
.brand-style2 .heading-style3 h5 {
    margin-bottom: 20px;
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 45px;
    text-align: center;
    color: #0E101A;
}
.brand-style2 .heading-style3 h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    color: rgba(56, 182, 255, 1);
    transform: rotate(1.14deg);
    width: 610px;
    margin: auto;
    margin-bottom: 80px;
}
.get-in-touch-style2 {
    background-image: url(../img/touch-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 120px;
    padding-bottom: 150px;
}
.get-in-touch-style2 .get-in-touch-title,
.get-in-touch-style2 h5{
    transform: rotate(-3.18deg);
    text-align: center;
}
.get-in-touch-style2 .get-in-touch-title {
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 36px;
    color: #38B6FF;
    margin-bottom: 10px;
}
.get-in-touch-style2 h5{
    color: rgba(38, 50, 56, 1);
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    padding: 0 20px;
    margin-bottom: 50px;
}
.get-in-touch-style2 label{
    font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: #0C5C75;
margin-bottom: 5px;
text-transform: capitalize;
}
.get-in-touch-style2 .form-group{
    margin-bottom: 25px;
}
.get-in-touch-style2 .form-control{
    height: 50px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    background: transparent;
    font-weight: 500;
    font-size: 16px;
    color: rgba(38, 50, 56, 1);
}
.get-in-touch-style2 .form-control:focus{
    border: 1px solid #38B6FF;
}
.get-in-touch-style2 .primary-btn {
    background: #FFFFFF;
    box-shadow: 0px 2px 2px 2px rgba(204, 204, 204, 0.1);
    border-radius: 50px;
    border-color: #fff;
    width: 100%;
    color: #0C5C75;
    font-weight: 700;
    height: 50px;
}
.get-in-touch-style2 .primary-btn:hover{
    background-color: #38B6FF;
    color: #fff;
}
/**************************************
    Contact
***************************************/
.contact-hero{
    background-image: url(../img/contact-hero-bg.svg);
    padding-bottom: 405px;
}
.contact-form {
    margin-top: -200px;
    padding-bottom: 150px;
}
.contact-form-box{
background: #FFFFFF;
/*box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.12);*/
border-radius: 10px;
}
.left{ 
    background-color: #fff;
    padding: 38px;
    border-radius: 10px 0 0 10px;
}
.right{ 
    background: #38B6FF;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.12);
    padding: 32px;
    position: relative;
    border-radius: 0 10px 10px 0;
}
.form-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.form-header h4{
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 36px;
color: #38B6FF;
margin-bottom: 0;
}
.contact-form-box .primary-btn{
background: #38B6FF;
box-shadow: 0px 2px 2px 2px rgba(204, 204, 204, 0.1);
border-color: #37B6FF;
width: 100%;
height: 50px;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.contact-form-box .form-control{
height: 50px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 12px;
background-color: #fff;
color: #0E101A;
}
.contact-form-box label{
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: #0E101A;
margin-bottom: 5px;
}
.right .map-icon{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
}
.contact-info h4{
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 45px;
color: #FFFFFF;
margin-bottom: 25px;
}
.contact-info p{
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #FFFFFF;
position: relative;
padding-left: 32px;
margin-bottom: 20px;
}
.contact-info p img{
    position: absolute;
    left: 0;
}
.social-contact {
    margin-top: 50px;
}
.social-contact .footer-social a {
    color: #fff;
    background: transparent;
}
.social-contact .footer-social a:hover{
    background-color: #fff;
    color: #38B6FF;
}
.contact-form-box .primary-btn:hover{
    background-color: #0C5C75;
}
.contact-form-box .form-control:focus{
    border: 1px solid #38B6FF;
}

/****************************************
    Dashboard
****************************************/
.dashboard-hero{
    background-image: url(../img/dashboard-hero-bg.svg);
    position: relative;
    padding-top: 160px;
    padding-bottom: 246px;
}
.dashboard-hero .inner-hero-text {
    width: 542px;
    margin: auto;
}
.dashboard-hero .primary-btn{
background: #38B6FF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: 50px;
color: #fff;
border-color: #37B6FF;
width: 100%;
margin-top: 20px;
display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard-hero .primary-btn:hover{
    background: #fff;
    color: #37B6FF;
}
.add-banner {
    position: absolute;
    right: 12px;
    top: 0px;
}
.add-banner img{
    border-radius: 0 0 63px 63px;
    -webkit-border-radius: 0 0 63px 63px;
    -moz-border-radius: 0 0 63px 63px;
    -ms-border-radius: 0 0 63px 63px;
    -o-border-radius: 0 0 63px 63px;
}

.month-box-style2 {
    padding-top: 80px;
    padding-bottom: 130px;
}
.month-box-style2 .item-overlay {
    background: #FBAD18;
}
.month-box-style2 .month-box-item:hover .month-item img {
    border: 6px solid #37B6FF;
    background-color: #37B6FF;
}

/**************************************
    Sign UP
**************************************/
.sign-up{
    background-image: url(../img/signup-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 187px;
    height: 100vh;
    background-position: bottom;
    overflow-y: auto;
}
.logo-text{
font-style: normal;
font-weight: 500;
font-size: 34px;
line-height: 51px;
color: #FFFFFF;
margin-bottom: 75px;
text-align: center;
}
.signup-title{
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 71px;
    color: #FFFFFF;
    margin-bottom: 65px;
    text-align: center;
    opacity: 0;
    transform: translateY(50%);
    transition: opacity 0.4s ease-in, transform 0.5s ease-in;
    -webkit-transition: opacity 0.4s ease-in, transform 0.5s ease-in;
    -moz-transition: opacity 0.4s ease-in, transform 0.5s ease-in;
    -ms-transition: opacity 0.4s ease-in, transform 0.5s ease-in;
    -o-transition: opacity 0.4s ease-in, transform 0.5s ease-in;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
}
.signup-title span{
    color: rgba(12, 92, 117, 1);
}
.sign-up .label{
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 45px;
    text-transform: uppercase;
    color: #0C5C75;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.7s ease-in-out, transform 0.8s ease-in-out;
    -webkit-transition: opacity 0.7s ease-in-out, transform 0.8s ease-in-out;
    -moz-transition: opacity 0.7s ease-in-out, transform 0.8s ease-in-out;
    -ms-transition: opacity 0.7s ease-in-out, transform 0.8s ease-in-out;
    -o-transition: opacity 0.7s ease-in-out, transform 0.8s ease-in-out;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}
.sign-up .form-group{
    margin-bottom: 60px;
    z-index: 2;
}
.sign-up .form-control{
  border-bottom: 1px solid #000000;
  font-style: normal;
  font-weight: 400;
  font-size: 50px;
  line-height: 71px;
  color: #fff;
  background-color: transparent;
  padding: 20px 0;
  height: auto;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .7s ease-in-out, transform .8s ease-in-out;
  -webkit-transition: opacity .7s ease-in-out, transform .8s ease-in-out;
  -moz-transition: opacity .7s ease-in-out, transform .8s ease-in-out;
  -ms-transition: opacity .7s ease-in-out, transform .8s ease-in-out;
  -o-transition: opacity .7s ease-in-out, transform .8s ease-in-out;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
}

  
  .current-step .form-control {
  opacity: 1;
  transform: translateY(0);
  
}
  

  .current-step .label {
  opacity: 1;
  transform: translateY(0);

}
  .current-step .signup-title {
    opacity: 1;
    transform: translateY(0);
  }
  
.sign-up .form-control::placeholder{
    color: #AAE0FF;  
}

#step-form{
    position: relative;
}
.dot-labels {
    background: #0000;
    display: block;
    position: absolute;
    bottom: -156px;
    z-index: 100;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
span.dot-label {
    width: 11px;
    height: 11px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    margin: 5px;
}
.dot-label.active{
background: #fff;
margin: 18px;
position: relative;
}
.dot-label.active:after{
    content: '';
    width: 29px;
    height: 29px;
    border: 1px solid #fff;
    position: absolute;
    border-radius: 50%;
    left: -83%;
    top: -78%;
}
.sign-up .primary-btn{
    background: #FFFFFF;
    color: #38B6FF;
    height: 90px;
    width: 100%;
    border-color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 71px;
    color: #38B6FF;
    transform: translateY(-100%);
    transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}
.current-step .primary-btn {
    opacity: 1;
    transform: translateY(0);
  }
.sign-up .nice-select.form-control{
    border: 0;
    border-bottom: 1px solid #000000;
}
.sign-up .nice-select.form-select:focus, .sign-up .form-control:focus {
    box-shadow: none;
    border: 0px solid #125197;
    border-bottom: 1px solid #000000;
    background: rgb(0 0 0 / 0%);
}
.sign-up .nice-select .option.selected {
    font-weight: normal;
}
.nice-select .option.focus, .nice-select .option.selected.focus, .nice-select .option:hover {
    background-color: #20212400;
    color: #38B6FF;
}
.nice-select .option{
    color: #0C5C75;
    padding-top: 10px;
    padding-bottom: 10px;
}

/************************
    Login
*************************/
.login-body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.login-area {
    width: 100%;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}

.logo-area, .form-area {
    width: 50%;
}
.big-logo {
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 45px;
    color: #38B6FF;
}
.login-area .primary-btn{
    height:55px;
    background: #FBAD18;
    color: #fff;
    border-color:#FBAD18;
}
.login-area .primary-btn:hover{
    background: #FFFFFF;
    border: 1px solid #FBAD18;
        color: #FBAD18;
}
@media (max-width: 991.98px) {
    .logo-area, .form-area {
        width: 100%;
    }
}

.logo-area {
    background: #0ABEFF;
    color: #fff;
}

.logo-area .text h2 {
    font-weight: 900;
    color: #fff;
}

.form-area {
    position: relative;
    background: #fff;
}

.form-area h3 {
    font-weight: 300;
}

.form-group {
    position: relative;
    
}

.form-area .form-group .label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    color: #00171F;
    margin-bottom: 5px;
}
.form-area .form-control::placeholder{
    color: #9AA5BF;
}
.form-area .form-group a {
    color: #9AA5BF;
}

.checkbox {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.5s ease-in-out;
    background: transparent;
    border-radius: 4px;
}

.checkbox .checkmark:after {
    content: "\f0c8";
    font-family: "FontAwesome";
    position: absolute;
    color: rgba(0, 0, 0, 0.1);
    font-size: 20px;
    margin-top: -4px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .checkbox .checkmark:after {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }
}

.checkbox input:checked ~ .checkmark:after {
    display: block;
    content: "\f14a";
    font-family: "FontAwesome";
    color: rgba(0, 0, 0, 0.2);
}

.checkbox-primary {
    color: #9AA5BF;
}

.checkbox-primary input:checked ~ .checkmark:after {
    color: #57CD87;
}
.star-gray {
    background: #d2d2d2 !important;
}

.success-area {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-area .contact-form-box {
    background: #FFFFFF;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 100px;
}
.success-area p{
  font-size: 20px;
line-height: 36px;
font-weight: 500;
}
/*dashboard slider*/
.slideshow-container {
  position: relative;
  max-width: 100%;
  margin: auto;
}

.slideshow-container .slide {
  display: none;
}

.slideshow-container .prev,
.slideshow-container .next {
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slideshow-container .prev:hover,
.slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.slideshow-container img {
  width: 100%;
  height: auto;
}

.slideshow-container .active {
  display: block;
}
.footer_logo img {
    /*background-color: #fff;*/
    padding: 12px 15px;
    border-radius: 6px;
    border: 5px solid #00000000;
    /*box-shadow: inset 0px 0px 7px 0px #00000036;*/
}

.step-buttons{
    padding-top:30px;
}
.step-buttons button {
    background: #FFFFFF;
    color: #38B6FF;
    height: auto;
    width: 120px;
    margin-right: 15px;
    border: 1px solid #fff;
    padding: 10px 18px;
    font-style: normal;
    border-radius: 50rem;
    font-weight: 400;
    font-size: 16px;
    color: #38B6FF;
    transform: translateY(-100%);
    transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out, transform 0.6s ease-in-out;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}
.step-buttons button:hover {
    background: #C1FF72;
    color: rgba(7, 10, 12, 1);
    border-color: #C1FF72;
        transition: all .4s;
}
  .prev-step {
    display: none;
  }
  .disc li{
          list-style: disc;
  }
  .disc ::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
    color: #38B6FF;
    font-size: 22px;
}
.disc a{
    font-weight: 500;
}

.step-form-item .pretty .state label {
    position: initial;
    display: inline-block;
    font-weight: 400;
    margin: 0;
    text-indent: 2em;
    min-width: calc(1em + 2px);
}
.step-form-item .pretty .state label:before {
    border-color: #ffffff;
}
.step-form-item .pretty .state label:after, .step-form-item .pretty .state label:before {
    content: '';
    width: calc(1.5em + 2px);
    height: calc(1.5em + 2px);
    display: block;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    z-index: 0;
    position: absolute;
    left: 0;
    top: calc((0% - (100% - 1.56em)) - 8%);
    background-color: transparent;
    
}
.pretty input:checked~.state.p-success label:after, .pretty.p-toggle .state.p-success label:after {
    background-color: #C1FF72!important;
}
.step-form-item .pretty .state label.dec{
    line-height: 23px;
}
.step-form-item .pretty.p-svg .state .svg {
    position: absolute;
    font-size: 1em;
    width: calc(2em + 5px);
    height: calc(2em + 7px);
    left: 0;
    z-index: 1;
    text-align: center;
    line-height: normal;
    top: calc((0% - (100% - 2em)) - 8%);
    border: 1px solid transparent;
    opacity: 0;
}