:root{
     --body-font: 'Kumbh Sans';
    --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);
}
@font-face {
    font-family: 'Kumbh Sans';
    src: url('fonts/KumbhSans-Regular.eot');
    src: url('fonts/KumbhSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/KumbhSans-Regular.woff2') format('woff2'),
        url('fonts/KumbhSans-Regular.woff') format('woff'),
        url('fonts/KumbhSans-Regular.ttf') format('truetype'),
        url('fonts/KumbhSans-Regular.svg#KumbhSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.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% 0%;    background-color: rgb(51, 49, 48);}
.main-wrapper {
    display: flex;
    width: 100%;}
main{      
    flex-direction: column;    flex: 1;
      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: #eb4644; color: #fff;   padding:10px 15px;    border-radius: 10px;}
.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: 2rem 0rem;  font-size: 14px;  position: static;         width: 100%;    text-align: center;bottom: 40px;}
.login-footer p{ margin: 0;  border-radius: 10px;    padding: 0px;    color: #000;    font-size: 16px;}
.login-footer p a{color: #000;}
.login-footer p a:hover{color: #943439;}
.reg-wrap-r{background-color: #fff;border-radius: 20px;border: 2px solid #eaeaea;padding: 3rem;min-height: 600px}
.reg-pic {
    text-align: right;
}
.reg-pic img{
 border-radius: 30px 0 0 30px;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 14px;
  font-size: 24px;
  color: #a3a3a3;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.input-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 2px solid #afb69b;
}

.input-card.active {
  border-color: #ff6b6b;
}

.icon {
  width: 44px;
  height: 44px;
  background: #fbf0f1;    line-height: 1;
  border-radius: 50%;
  display: flex;
  align-items: center; color: #943439;
  justify-content: center;
  font-size: 18px;
  margin-right: 14px;
}

.input-content {
  flex: 1;position: relative;
}

.input-card .label {
  display: block;
  font-size: 13px;
  color: #888;background: none;
  margin: 0px;padding: 0;
}

.input-content input {
  height: 30px;
  border: none;
  outline: none;padding: 0;
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  background: transparent;
}
.wrapper{overflow: auto;  background-color: #fff;   display: flex;    flex-direction: column;   padding: 0rem   width: 100%; /*   height: 100vh;*/}
.wrapper-2{background: none;}
.main-inner{position: relative;        height: calc(100vh - 0px);    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;}
.overflow2{    background-position: center; background-size: cover;background-repeat: no-repeat;background-image: url(../images/login-bg.jpg);}    
.overflow3{       min-height: 100vh;overflow: hidden; padding-top: 7rem;background-position: center; background-size: cover;background-repeat: no-repeat;background-image: url(../images/reg-bg.jpg);}    
.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: 22px;    color: #000; font-family: 'Kumbh Sans';   text-transform: capitalize;   font-weight: 600;  display: block;    }
.main-heading{ font-family:'Span'; font-size: 62px;    color: #5d6841;    text-transform: capitalize;    font-weight: 400;    line-height: 1;}
.main-heading span{display: block;}
.side-text p{      line-height: 1.2;  font-size: 28px;font-style: italic;  font-family:'Cormorant Garamond';  color: #343732;}
.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: 0px solid #fff; border-radius: 30px;    background-color:rgba(255,255,255,0.5);    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-family:'Span';text-align: center; font-size: 34px;  color: #5d6841;  font-weight: 500;  margin-bottom: 0px;}
.form-title span{display: block;   font-family: 'Kumbh Sans';  font-size: 18px;color: #343732;    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: 10px;    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: #943439;}
.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(105, 123, 98);    width: 22px;    height: 22px;    position: relative;    cursor: pointer;      }
.rememberme input[type=checkbox]::before{    content: "X";    font-family: 'Kumbh Sans';    font-weight: 900;    font-size: 15px;    color: var(--heading-color);    width: 100%;    transition: 0.4s;    height: 100%;   position: absolute;    text-align: center;    line-height: 25px;}
.rememberme input[type=checkbox]:checked::before{    content: '\f00c';    font-family: "Font Awesome 5 free";    font-size: 16px;}
.forget{    font-size: 15px;    color: #943439;    font-weight: 500;    text-decoration: none;    margin-bottom: 30px;}
.forget:hover{    color: var(--secondary-color);}
.login-btn2 button{    border-radius: 6px;    background-color: #c56767;    width: auto;      padding: 0 40px;  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-btn2 .signup{    background-color: #943439;}
.login-btn2 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-btn2 button:hover::before{    left: 0;}
.login-btn2 button:hover{    padding-left: 75px;}
.divide-heading{    position: relative;    z-index: 1;       border-radius: 50px;    padding: 5px;   margin-bottom: 0px;  }
.divide-heading a{color: #943439;text-decoration: underline;}
.divide-heading span{    font-size: 15px;    color: #000;    font-weight: 500;    text-align: center;       padding: 0 0px;    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){

.form{width: 100%}
}

/*L-laptops*/
@media screen and (max-width:1600px){
    
    .login-footer{bottom: 20px;}
}


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


    




    .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;}
    

    
}
.stepper-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}
.reg-steps{height: 70px;}
.stepd {
  text-align: center;
  min-width: 120px;
}
.stepd p {
  margin: 0;
  font-size: 14px;
  color: #000;
}
.overflow3 .main-inner{height: inherit;}
@media screen and (max-width:1680px){
.main-heading{    font-size: 56px;}
}
@media(max-width: 1440px){
  .reg-steps {    height: 50px;}
  .main-inner{    justify-content: flex-end;}
    .overflow3 .main-inner{    justify-content: flex-start;}
    .login-footer{bottom: 20px;}
    .reg-wrap-r{    min-height: 565px;}
    .forget,.rememberme{margin-bottom: 10px;}
    .input-card {    padding: 12px 18px;    margin-bottom: 12px;}

    .form{padding: 25px;}
    .banner-planes{    padding: 7rem 0 0;}
    .input-field input,.input-field {      min-height: 45px;  height: 45px;    font-size: 15px;}
    .login-btn2 button{    height: 48px;}
    
    .main-heading{font-size: 44px;}
    .side-text p{font-size: 22px;}
    .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%;  */ }

    .side-text    {        width: 85%;    }
    
        
    
}
@media only screen and (min-width:1024px) and (max-width:1199px){
  .reg-steps {        height: 0;    }
  .privacy-check label, .rememberme label {    font-size: 13px;}
.main-inner {        justify-content: center;    }
    .input-content input{font-size: 15px;}
    .reg-wrap-r{    padding: 2rem;        min-height: 470px;}
    .tab-btn{    font-size: 20px;}

    .login-footer p{             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){
  .overflow3{    padding-top: 6rem;}
    .main-inner {        justify-content: center;    }
  .reg-wrap-r {        min-height: inherit;    }
    .d-d-none{display: none;}
    .pad-4 {    padding: 1.0rem;}  
    .step .step-desc {        font-size: 10px;    }
    .step-num {        width: 40px;        height: 40px;        min-width: 40px;    }
   
    .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:767px){
   .main-inner {        padding:0 20px;    }
}
@media screen and (max-width:480px){
  .circle {    width: 38px;    height: 38px;}
  .form {        padding: 20px;    }
  .reg-steps {        height: 0px;    }
    body{font-size: 14px;}
    .main-inner {        padding:0 15px;    }
    .input-content input{font-size: 15px;}
    .stepd p{    font-size: 12px;}
    .stepd{    min-width: 100px;}
    .reg-wrap-r{    padding: 1rem;margin-bottom: 20px;}
    .tab-btn{font-size: 16px;}
    .stepper-container{    margin-bottom: 20px;}
    .toggle-password{right: 0!important}
    .login-btn2 button {        height: 40px;      font-size: 16px;  }
    .error-div{font-size: 16px;}
    .forget,.privacy-check label, .rememberme label {    font-size: 13px;}
    .login-btn2 button::before{    line-height: 40px;    font-size: 16px;}


.pad-4 {        padding: 0.5rem;    }
.auth-tabs{margin-bottom: 10px;}.form-title span{font-size: 15px;}
.otp-sec-section .input-field label{      top: -40px;  width: auto;}
.login-btn2 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;}
}