:root{
    --body-font: 'Noto Sans', sans-serif;
    --heading-font: 'Outfit', sans-serif;
     --primary-color: rgb(0, 143, 156);
    --secondary-color: rgb(247, 144, 49);
    --field-text-color:rgb(62, 63, 94);
    --bg-color: rgb(255,255,255);
    --heading-color: rgb(255,255,255);
    --text-color: rgb(48, 47, 69);
    --label-color: rgb(175, 176, 192);
    --line-thickness:4px;
    --border-color: rgb(222, 222, 234);
}
.login-ses .form{box-shadow:none;}
.pad-4{    padding: 1.5rem;}
/* Stepper */
  .steps{
    list-style:none;
    margin: 0;
        margin-bottom: -45px;
    padding:0;
    display:flex;
    gap:22px;
    align-items:flex-start;
    justify-content:space-between;
    counter-reset: step;
  }

  .step{
    flex:1 1 0;
    position:relative;
    padding:12px;
    box-sizing:border-box;
    display:flex;
    gap:12px;    text-align: left;
    align-items:flex-start;
    background:linear-gradient(180deg, rgba(245,250,247,1), rgba(250,252,251,1));
    border-radius:12px;
    border:1px solid rgba(22,39,33,0.04);
    transition:transform .18s ease, box-shadow .18s ease;
  }

  /* connector line between steps */
  .step:not(:last-child)::after{
    content:"";
    position:absolute;
    height:4px;
    background:linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
    width:calc(100% + 22px);
    top:calc(50% - var(--line-thickness)/2);
    left:100%;
    transform-origin:left center;
    z-index:0;
  }

  .step:hover{ transform:translateY(-4px); box-shadow: 0 10px 30px rgba(15,40,30,0.06); }

  .step-inner{
    z-index:1; /* above connector */
    display:flex;
    gap:12px;
    align-items:flex-start;
    width:100%;
  }

  .step-num{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#828f89;
    background: linear-gradient(180deg, rgba(47,143,109,0.08), rgba(47,143,109,0.03));
    border:2px solid rgba(47,143,109,0.08);
    position:relative;
    font-size:18px;
  }

  .step .step-title{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#828f8c;
  }
  .step .step-desc{
    margin:6px 0 0 0;
    font-size:13px;
    color:#7a8b89;
    line-height:1.4;
  }

  /* active styling */
  .step.active{
    background: #ffe7e8;
    border: 1px solid rgb(143 104 47 / 12%);
    box-shadow: 0 8px 28px rgba(47, 143, 109, 0.06);
  }
   .step.active .step-title{color: #8b3135}
   .step.completed .step-title{color: #27845b}
  .step.active .step-num{
     background: linear-gradient(180deg, #97393e, #721f23);
    color: #fff;
    border: none;
  }

  /* completed styling */
  .step.completed{
    background: linear-gradient(180deg,#fff,#fbfffc);
    border:1px solid rgba(47,143,109,0.06);
  }
  .step.completed .step-num{
    background:linear-gradient(180deg,#2b8d62,#196443);
    color:white;
    border:none;
  }
  /* show check instead of number when completed */
  .step.completed .step-num::before{
    content:"✔";
    font-size:18px;
    display:block;
    line-height:1;
  }

  /* small responsive */
  @media (max-width:700px){
    .steps{
      flex-direction:column;
      gap:14px;
    }
    .step:not(:last-child)::after{ display:none; }
    .step{ align-items:center; padding:14px; }
    .step-inner{ flex-direction:row; align-items:center; }
    .step-num{ width:48px; height:48px; border-radius:10px; min-width:48px; }
  }
body{ font-size:18px; line-height:24px; position:relative; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family: var(--heading-font); }    

input:-webkit-autofill{background:#000;}
input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
  }
  
body
{
    font-family: var(--body-font);  width: 100%;   position: relative;    min-height: 100vh;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: #4c4c4c;
}
input[type=checkbox]{    width: 20px;    height: 20px;}
.delay-300ms{     margin-bottom: 15px;   display: flex;    align-items: flex-start;    gap: 0px;}
.delay-300ms label{font-weight: 500!important;    line-height: 1;}
.delay-300ms label a{color:#4c4c4c;}
.delay-300ms label a:hover{color:#cf4c55;}
.ls-bg{position: absolute;  z-index: 0;   width: 100%;   height: 100%;    top: 0;    overflow: hidden;    left: 0;}
.ls-bg-inner{    object-fit: cover;    width: 100%;    height: 100%;    object-position: 100% 100%;    background-color: rgb(51, 49, 48);}
.main-wrapper {
    display: flex;
    width: 100%;}
main{       display: flex;
    flex-direction: column;    flex: 1;
    
    justify-content: center;   padding-top: 70px;  position: relative;    z-index: 999;   }
main::after{ display: none;   content: "";    position: absolute;    height: 100%;    top: 0;    right: -15%;    width: 50%;    z-index: 0;    clip-path: circle(70% at 80% 50%);    background-color: #c18b78; background-image: url(../images/line-bg.webp);  }
.error-div{    background-color: #fff;    padding: 10px;    border-radius: 5px;}
.error-div.success{ background-color: #e1fde1;   color: #046c08;    text-align: center;}
.error-div.cancel{ background-color: #ffe6e5;color: #f00;       text-align: center;}
.login-footer{padding: 0rem 0 0 10rem;  font-size: 14px;  position: absolute;  bottom: 20px;}
.login-footer p{background-color: #34725d;    border-radius: 10px;    padding: 15px 30px;    color: #fff;    font-size: 16px;background: rgba(80,127,111,1);
background: -moz-linear-gradient(left, rgba(80,127,111,1) 0%, rgba(255,255,255,0.01) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(80,127,111,1)), color-stop(100%, rgba(255,255,255,0.01)));
background: -webkit-linear-gradient(left, rgba(80,127,111,1) 0%, rgba(255,255,255,0.01) 100%);
background: -o-linear-gradient(left, rgba(80,127,111,1) 0%, rgba(255,255,255,0.01) 100%);
background: -ms-linear-gradient(left, rgba(80,127,111,1) 0%, rgba(255,255,255,0.01) 100%);
background: linear-gradient(to right, rgba(80,127,111,1) 0%, rgba(255,255,255,0.01) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#507f6f', endColorstr='#ffffff', GradientType=1 );}
.wrapper{overflow: auto;  background-color: #fff;   display: flex;    flex-direction: column;   padding: 0rem 10rem 0rem 10rem;    width: 100%; /*   height: 100vh;*/}
.wrapper-2{background: none;}
.main-inner{position: relative;    height: 100%;    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;}
.overflow2{    min-height: 100vh;}    
.logo{    display: flex;    align-items: center;    height: auto;    position: relative;    z-index: 10;}
.logo-icon{    width: auto;}
.logo-icon img{    max-width: 100%;}
.logo-text{    font-size: 37px;    color: var(--heading-color);    font-weight: bold;    margin-left: 8px;}
.p-relate{    position: relative;    height: 100%;}
.side-text{ /*   position: absolute;    bottom: 0;    left: 0; */   width: 70%;    } 
.side-text *{    margin: 0;}
.side-text h4{    font-size: 24px;    color: #fff;    text-transform: uppercase;     display: block;    }
.main-heading{ font-family: "Courgette", cursive;   font-size: 54px;    color: #fff;    text-transform: capitalize;    font-weight: 500;    line-height: 1;}
.main-heading span{display: block;}
.side-text p{    font-size: 18px;    color: #fff;}
.logSign{    display: flex;    width: 80%;    height: auto;    border: solid 1px var(--bg-color);    border-radius: 12px;    overflow: hidden;    margin-top: 50px;}
.logSign button{    background-color: transparent;    min-width: 50%;    height: 54px;    border: 0;    transition: 0.4s;    font-size: 20px;    color: var(--heading-color);    font-weight: bold;    position: relative;    z-index: 1;}
.logSign button.active{    color: var(--field-text-color);}
.logSign button.active:before{    content: "";    width: 100%;    height: 100%;    background-color: var(--bg-color);    color: var(--field-text-color);    position: absolute;    top: 0;    left: 0;    z-index: -1;}
.form{            display: flex;        flex-direction: column;        gap: 20px;    height: 100%;   border: 5px solid #fff; border-radius: 30px;    background-color: rgb(236 229 224);    box-shadow: 0px 0px 40px 0px rgb(243 238 235);    margin-left: auto;    min-height: 300px;    padding: 45px 45px 45px;    width: 100%;    position: relative;    z-index: 100000;}
.form-title{  font-size: 26px;  color: #000;  font-weight: bold;  margin-bottom: 20px;}
.form-title span{display: block;    font-size: 18px;    font-weight: 400;}
.input-field{ margin-bottom: 30px;border-radius: 5px;    transition: 0.4s;    position: relative;    display: grid;    align-items: center;    width: 100%;    }
.input-field input{ height: 52px;   border: solid 1px #aaae80;         background-color:#fff;  border-radius: 5px;    width: 100%;    transition: 0.4s; color: #4c4c4c;      padding-left: 20px;    font-size: 18px;     font-weight: 500;}
.input-field input:focus{ color: #4c4c4c;    outline: 0;    border-color: var(--secondary-color);}
.input-field label{  font-size:15px;  font-weight: 500!important;  top: -23px;color: #4c4c4c;    line-height: 1;  position: absolute;  left: 0px;  transition: 0.4s;  pointer-events: none;  width: max-content;  padding: 0 3px;  }
.input-field:focus-within label{   /* transform: translatey(-24px); */     font-size: 15px !important;}
.otp-sec-section .input-field label{       width: auto;}
/*.input-field input:valid+label{       font-weight: 500; transform: translatey(-24px);    font-size: 15px;}*/
/*.input-field input:invalid+label{font-weight: 500; margin-bottom: 0;   font-size: 16px;}*/
.input-field .text-danger{font-size: 13px;     background-color: #f5dcdc;    padding: 10px;    border-radius: 5px;    display: inline-block;    margin: 5px 0;}
.rememberme {    display: flex;    align-content: center;    height: auto;    margin-bottom: 20px;}
.privacy-check label,.rememberme label{    font-size: 15px;    color: #4c4c4c;    font-weight: 500!important;    margin-left: 10px;}
.rememberme input[type=checkbox]{    -webkit-appearance: none;    border-radius: 6px;    background-color: rgb(35, 210, 226);    width: 22px;    height: 22px;    position: relative;    cursor: pointer;      }
.rememberme input[type=checkbox]::before{    content: "X";    font-family: 'Titillium Web';    font-weight: 900;    font-size: 18px;    color: var(--heading-color);    width: 100%;    transition: 0.4s;    height: 100%;   position: absolute;    text-align: center;    line-height: 22px;}
.rememberme input[type=checkbox]:checked::before{    content: '\f00c';    font-family: "Font Awesome 5 free";    font-size: 16px;}
.forget{    font-size: 15px;    color: #4c4c4c;    font-weight: 500;    text-decoration: none;    margin-bottom: 30px;}
.forget:hover{    color: var(--secondary-color);}
.login-btn button{    border-radius: 6px;    background-color: #cf4c55;    width: 100%;    transition: 0.4s;    height: 54px;    font-size: 20px;    margin-bottom: 0px;
    border: 0;    position: relative;    color: var(--heading-color);    font-weight: bold;        overflow: hidden;}
    .login-btn .signup{    background-color: #cf4c55;}
.login-btn button::before{    content: "GO!";    font-size: 20px;    font-weight: bold;    background-color: #444;    color: var(--heading-color);    line-height: 54px;    display: block;    transition: 0.4s;    height: 100%;    position: absolute;    top: 0;    left: -65px;    width: 65px;}
.login-btn button:hover::before{    left: 0;}
.login-btn button:hover{    padding-left: 65px;}
.divide-heading{    position: relative;    z-index: 1;       border-radius: 50px;    padding: 5px;   margin-bottom: 0px;  }
.divide-heading a{color: #cf4c55;text-decoration: underline;}
.divide-heading span{    font-size: 15px;    color: #000;    font-weight: 500;    text-align: center;       padding: 0 20px;    width: auto;    margin: 0 auto;   display: block;}
.divide-heading::after{ display: none;   content: "";    position: absolute;    width: 100%;    background-color: rgb(234, 234, 245);    height: 1px;    left: 0;    right: 0;    margin-left: auto;    margin-right: auto;    top: 10px;   z-index: -1;}
.register-text{    font-size: 14px;    color: var(--field-text-color);  }.register-text a
{    color: rgb(35, 210, 226);    text-decoration: none;}


.thankyou-page .logo{    justify-content: center;    margin-top: 60px;}
.thankyou-page .logo-icon{    width: 55px;    margin-right: 10px;}
.thankyou-page .logo .logo-icon img{    width: 100%;}
.thankyou-page .logo-text{    font-size: 65px;}
.thankyou-page .main-inner{    background-image: url(../images/thankyou-bg.png) !important;    background-color: var(--text-color-hover);}
.thankyou-page article{    text-align: center;    margin-top: 80px;}
.thankyou-page article h1{        font-size: 75px;        font-weight: bold;        text-transform: uppercase; }
.thankyou-page article h1 span{    display: block;    font-size: 80px;    font-weight: 900;   color: var(--primary-color);}
.thankyou-page article span{    font-size: 20px;    color: var(--primary-color);    font-weight: 500;}
.thankyou-page article p{    font-size: 18px;    font-family: "Myriad Pro";    color: var(--secondary--text-color);    margin: 0 auto;    margin-top: 45px;    width: 39%;}
.back-home{    width: 188px;    height: 63px;    margin: 0 auto;}
.back-home a{    background-color: var(--primary-color);    border-radius: 50px;    color: var(--text-color-hover);    width: 100%;    height: 100%;    display: block;    text-decoration: none;    text-align: center;   line-height: 63px;    font-size: 17px;    color: rgb(255, 255, 255);    font-weight: bold;    border: 0;}
#sub img{    width: 60px;}
.highlight{    border-top: solid 3px var(--primary-color) !important;    border-bottom: solid 3px var(--primary-color) !important;}
#error{    position: fixed;    top: 10px;    left: 10px;    z-index: 20;}
.invalid{  border: solid 2px #ff4444 !important;  position: relative;}


/* responsive */
/*L-desktop*/

@media (min-device-width:  1600px){
.main-heading {        font-size: 48px;    }
.form{width: 100%}
}

/*L-laptops*/
@media(max-width: 1440px){
    main{    padding-top: 70px;}
    .form{padding: 25px;}
    .banner-planes{    padding: 7rem 0 0;}
    .input-field input,.input-field {      min-height: 45px;  height: 45px;    font-size: 15px;}
    .login-btn button{    height: 48px;}
    
    .main-heading{font-size: 44px;}
    .side-text p{font-size: 16px;}
    .login-footer p{font-size: 14px;}
    .side-text h4{font-size: 20px;}
    .navbar-brand{max-width: 220px;}
    .wrapper    {          padding: 0rem 5rem 0rem 5rem; /* height:100%;  */ }
    .login-footer {    padding: 1rem 0 0 5rem;}
    
    .side-text    {        width: 85%;    }
        
}

/*laptops/tablets*/
@media(max-width: 1024px)
{
.ls-bg-inner{    object-position: inherit;}
    .wrapper {        padding: 0rem 3rem 0rem 3rem; }
    .login-footer {        padding: 1rem 0 0 3rem;    }
    .form
    {
        width: 100%;
    }
    .side-text
    {
        width: 80%;
    }
    .form
    {
        padding: 25px;
    }
    .form-title
    {
      
    }
    .input-field
    {
        
    }
    .login-btn button
    {
        margin-bottom: 0px;
    }
    
    .main-heading
    {
        font-size: 28px;
        
    }
    .side-text p
    {
        font-size: 14px;line-height: 1.3;
    }
    


    




    .thankyou-page article p
    {
        width: 80%;
    }
    .social-media
    {
        width: 65%;
    }
    .thankyou-page article h1
    {
        font-size: 60px;
    }
    .thankyou-page article h1 span
    {
        font-size: 65px;
    }
    .thankyou-page article span
    {
        font-size: 18px;
    }
    .step-bar-inner
    {
        width: 50%;
    }
}


/*tablets*/
@media(max-width: 768px)
{

    .tab-50
    {
        width: 50%;
    }
    .tab-100
    {
        width: 100%;
    }
    .form
    {
        margin: 0 auto;
        
    }
    .side-text
    {
        position: relative;
        width: 80%;
        margin: 0 auto;
        margin-top: 30px;
    }
    .order_2
    {
        order: 2;
    }
    
    main::after
    {
        display: none;
    }
    .main-inner
    {
        
    }
    .logSign
    {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000000;
        margin-top: 0;
        border-radius: 0;
    }


 .wrapper{width: 100%;}


.logo-icon img {
  width: 100%;
  max-width: 240px;
}





    .social-media
    {
        width: 85%;
    }
}


/*Smart phone*/
@media(max-width: 576px)
{


    .logo
    {
        
    }
    .form
    {
       
        padding: 20px;
       
    }
    .side-text
    {
        position: relative;
        width: 100%;
        padding: 0px;
        margin: 30px auto;
        
    }
    .divide-heading span{padding: 0;    font-size: 13px;}
    .order_2
    {
        order: 2;
    }
    .wrapper
    {
        width: 100%;height: inherit;
        padding: 1rem;
    }
    .login-footer p {
        font-size: 13px;
    }
    main::after
    {
        display: none;
    }
    .main-inner
    {
        margin-top: 0px;
    }
    .logSign
    {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000000;
        margin-top: 0;
        border-radius: 0;
    }
    .side-text h4 {
        font-size: 18px;
    }
    .ls-bg-inner {
        object-position: 100% 100%;
    }
    .side-text.mobile h4,.side-text.mobile .main-heading{color: #647955;}
    .side-text p
    {
        font-size: 14px;
    }





    

    




    
    .thankyou-page article h1
    {
        font-size: 30px;
    }
    .thankyou-page article h1 span
    {
        font-size: 35px;
    }
    .thankyou-page article span
    {
        font-size: 15px;
    }
    .thankyou-page article p
    {
        font-size: 15px;
        width: 90%;
    }
    .thankyou-page .logo-text
    {
        font-size: 60px;
    }
   
.login-footer {padding: 20px 20px 20px 20px; position:static;text-align: center;}
    

    
}

@media only screen and (min-width:1024px) and (max-width:1199px){
    main{    padding-top: 70px;}
    .login-footer p{           width: 70%;    padding: 10px 20px;     margin-bottom: 0;}
    .form-title span{    font-size: 16px;}
    .step .step-desc{    font-size: 12px;}
    .step-num{    width: 40px;    height: 40px;    min-width: 40px;}  
    .pad-4 {    padding: 1.0rem;}  
    .steps{gap: 12px;}
}
@media screen and (max-width:991px){
    .pad-4 {    padding: 1.0rem;}  
    .step .step-desc {        font-size: 10px;    }
    .step-num {        width: 40px;        height: 40px;        min-width: 40px;    }
    main{    padding-top: 70px;}
    .divide-heading span{padding: 0}
    
}

@media only screen and (min-width:577px) and (max-width:767px){
    .login-footer {padding: 40px 20px 20px 30px; position:static}
    .side-text .main-heading { font-size: 24px;  }
     .logo {margin: 20px 10PX 30px 10px;}


}
@media screen and (max-width:480px){
.pad-4 {        padding: 0.5rem;    }
.otp-sec-section .input-field label{      top: -40px;  width: auto;}
.login-btn button {        margin-bottom: 0;    }
#resendOtp.btn-link{font-size: 14px;}
.delay-300ms label {    font-size: 13px;}
}
@media screen and (max-width:360px){
.g-recaptcha{    margin-left: -11px;}
}