@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family:'Poppins',snas-serif;
}

body{

    display: flex;
    flex-direction: column;
    background: #081b29;
    /* min-height: 100vh; */
 
}

a{
     text-decoration: none;
     /* font-size: 20px; */
    }

#circularListId p{
    font-size: 20px;
}

.hero h2 {
    font-size: 32px;  /*font-size: 42px; */
    /*margin-left: 27px;*/
    }

    .h5, h5 {
        font-size: 1.0rem !important;
    }

.footer .footer-about a
{
    font-size: 25px !important;
}
.wrapper
{
    position: relative;
    width: 680px;
    height:465px; 

    /* background: #305b47; */
    /* border: 2px solid #aba15b; */
    /* box-shadow: 0 0 25px #542a0d; */
    overflow: hidden;
    margin: auto;
    border-radius: 16px;
}

.wrapper .form-box
{
    position: relative;
    top:0;
    width: 50%;
    height: 100%;   
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wrapper .form-box.login
{
    left: 0;
    padding: 0 60px 0 40px;
    height: 100%;
}

.wrapper .form-box.login .animation
{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition: .7s ease; 
    transition-delay: calc(.1s * var(--j));
    
}

.wrapper.active .form-box.login .animation
{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition-delay: calc(.1s * var(--i));
}
.wrapper.activeforgot .form-box.login .animation
{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition-delay: calc(.1s * var(--i));
}

.wrapper .form-box.register
{
    position: absolute;
    right: 0;
    /* padding: 0 40px 0 60px; */
    padding: 0 25px 0 75px;
    top:0;
    height: 100%;
    pointer-events: none;
}

.wrapper .form-box.forgotPwd
{
    position: absolute;
    right: 0;
    padding: 0 35px 0 65px;
    top:0;
    height: 100%;
    pointer-events: none;
}

.wrapper.active .form-box.register
{
 pointer-events: auto;
}

.wrapper.activeforgot .form-box.forgotPwd
{
 pointer-events: auto;
}

.wrapper .form-box.register .animation
{
    transform: translateX(120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s ease;
    transition-delay: calc(.1s * var(--j));
}
.wrapper.activeforgot .form-box.register .animation
{
    transform: translateX(120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s ease;
    transition-delay: calc(.1s * var(--j));
}

.wrapper .form-box.forgotPwd .animation
{
    transform: translateX(120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s ease;
    transition-delay: calc(.1s * var(--j));
}
.wrapper.active .form-box.forgotPwd .animation
{
    transform: translateX(120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s ease;
    transition-delay: calc(.1s * var(--j));
}

.wrapper.active .form-box.register .animation
{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(.1s * var(--i));
}

.wrapper.activeforgot .form-box.forgotPwd .animation
{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(.1s * var(--i));
}

.form-box h2{
    font-size: 27px;  /* font-size: 31px; */
    color: #fff;
    text-align: center;
}

.form-box .input-box
{
    position: relative;
    width: 100%;
    height: 25%;
    margin: 25px 0;
}

.form-box.login .input-box {

    height: 19%;
    margin: 13px 0;
}


.form-box.register .input-box {
    height: 15%;
}

.form-box.forgotPwd .input-box {
    height: 15%;
}


.input-box input
{
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 2px solid #fff;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    padding-right: 23px;
    transition: .5s;
}

.input-box input:focus,
.input-box input:valid
{
    border-bottom-color: #fff;
}


.input-box label
{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}


.input-box input:focus + label,
.input-box input:not(:placeholder-shown) + label
{
    top:-5px;
    color: #fdd9ab;
    
}

.input-box i{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 18px;
    color: #fff;
    transition: .5s;
}

.input-box input:focus,
.input-box input:valid
{
    color: #fff;
}

.btn
{
    position: relative;
    width: 100%;
    height: 45px;
    background: transparent;
    /* border: 2px solid #D8BCAB; */
    border: 2px solid #b08b61;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    z-index: 1;
    overflow: hidden;
}

.btn::before
{
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    /* background: linear-gradient(#081b29,#8A6948,#081b29,#393835); */
    background: linear-gradient(#362f23, #bb9c7d, #dec0a0, #3f3323);
    z-index: -1;
    transition: .5s;
}

.btn:hover::before
{
    top: 0;
}
.btn:hover
{
    /* border: 2px solid #D8BCAB; */
     border: 2px solid #a07545;
}

.form-box .logreg-link
{
    font-size: 14.5px;
    color: #fff;
    text-align: center;
    margin: 20px 0 10px;
}

.logreg-link p a{
    color: #fdd9ab;
    text-decoration: none;
    font-weight: 600;
}

.logreg-link p a :hover
{
    text-decoration: underline;
}

.wrapper .info-text
{
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.wrapper .info-text.login .animation
{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition: .7s ease; 
    transition-delay: calc(.1s * var(--j));
}

.wrapper.active .info-text.login .animation
{
    transform: translateX(120%);
    opacity: 0;
    filter: blur(10px);
    transition-delay: calc(.1s * var(--i));
}

.wrapper.activeforgot .info-text.login .animation
{
    transform: translateX(120%);
    opacity: 0;
    filter: blur(10px);
    transition-delay: calc(.1s * var(--i));
}

.wrapper .info-text.login {
    right: 0;
    text-align: right;
    padding: 0 40px 60px 150px;
}


.wrapper .info-text.register {
    left: 0;
    text-align: left;
    padding: 0 150px 60px 40px;
    pointer-events: none;
    
}

.wrapper .info-text.forgotPwd {
    left: 0;
    text-align: left;
    padding: 0 150px 60px 40px;
    pointer-events: none;
    
}

.wrapper.active .info-text.register {
    pointer-events: auto;
}

.wrapper.activeforgot .info-text.forgotPwd {
    pointer-events: auto;
}

.wrapper .info-text.register .animation
{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s;
    transition-delay: calc(.1s * var(--j));
}
.wrapper.activeforgot .info-text.register .animation
{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s;
    transition-delay: calc(.1s * var(--j));
}

.wrapper .info-text.forgotPwd .animation
{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s;
    transition-delay: calc(.1s * var(--j));
}
.wrapper.active .info-text.forgotPwd .animation
{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s;
    transition-delay: calc(.1s * var(--j));
}


.wrapper.active .info-text.register .animation
{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(.1s * var(--i));
}

.wrapper.activeforgot .info-text.forgotPwd .animation
{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(.1s * var(--i));
}

.info-text h2{
    font-size: 30px; /*font-size: 35px; */
    color: #fff;
    line-height: 1.3;
    text-transform: uppercase;
}

.info-text p{
    font-size: 16px;
    color: #fff;
}

.wrapper .bg-animate
{
    position: absolute;
    top: -4px;
    right: 0;
    width: 850px; /*850*/
    height: 600px; /*600*/
    background: linear-gradient(45deg, #081b29, #8a6948);
    /* border-bottom: 3px solid #aba15b; */
    border-bottom: 3px solid #cd9c5d;
    transform: rotate(10deg) skewY(40deg);
    transform-origin: bottom right;
    transition: 1.5s ease;
    transition-delay:1.6s;
   
}


.wrapper.active .bg-animate
{
   transform: rotate(0) skewY(0);
   transition-delay: .5s;
}
.wrapper.activeforgot .bg-animate
{
   transform: rotate(0) skewY(0);
   transition-delay: .5s;
}

.wrapper .bg-animate2
{
    position: absolute;
    top: 100%;
    left: 250px;
    width: 850px;
    height: 700px;
    /* background:#305b47; */
    /* border: 3px solid #aba15b; */
    /* border-bottom: 3px solid #aba15b; */
    transform: rotate(0) skewY(0);
    transform-origin: bottom left;
    transition: 1.5s ease;
    transition-delay:.5s;

}

.wrapper.active .bg-animate2
{
 transform: rotate(-11deg) skewY(-41deg);
 transition-delay: 1.2s;
}
.wrapper.activeforgot .bg-animate2
{
 transform: rotate(-11deg) skewY(-41deg);
 transition-delay: 1.2s;
}

.logo {
    display: flex;
    align-items: center;
    color: white;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    text-decoration: none;
}

.logo img {
    max-height: 58px !important; /* Adjust as needed */
    margin-right: 10px;
}
.logo p{
    padding:5px;
    margin-bottom: 0 !important;
}

.custom-swal
{
    width: 400px !important;  
   
}

input[type="checkbox"] {
    accent-color: #8a6948; /* Change to your preferred color */
}

.circularStyleClass {
   /* height: 275px; /* Set a fixed height for the container */
    overflow: hidden; /* Hide overflow content */
    position: relative; /* Required for positioning */
    
  }

.scrolling-text {
    /* white-space: nowrap; */
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    animation: scroll-up 10s linear infinite;

  }
  
  /* 15.04.25 */

/* main.css */
.dark-background {
    --background-color: #a9937b !important;
}

.header {
    /* --background-color: #412407 !important; */
    /* --background-color: #643708 !important; */
    --background-color: #744a20 !important;
}

.footer {
    /* background-color: #4a3017 !important; */
    /* background-color: #643708 !important; */
    background-color: #744a20 !important;

}

/* homepagestyle */
.wrapper{
Background: transparent;
Border: 2px solid rgba(255, 255, 255, .2);
Backdrop-filter: blur(20px);
Box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.wrapper .bg-animate {
    background: linear-gradient(45deg, #081b29, #b8640f);
}

.wrapper .bg-animate2 {
    Background: transparent;
    /* Border: 2px solid rgba(255, 255, 255, .2); */
    Border: 3px solid #cd9c5d;
    Backdrop-filter: blur(20px);
    Box-shadow: 0 0 10px rgba(0, 0, 0, .2);

}

/* Signup state */
.wrapper.active .bg-animate {
    background: transparent;
}
.wrapper.active .bg-animate2 {
    background: linear-gradient(45deg, #081b29, #b8640f);
}

/* Forgot Password state */
.wrapper.activeforgot .bg-animate {
    background: transparent;
}
.wrapper.activeforgot .bg-animate2 {
    background: linear-gradient(45deg, #081b29, #b8640f);
}


  @keyframes scroll-up {
    0% {
      top: 100%; /* Start at the bottom of the container */
    }
    100% {
      top: -100%; /* Scroll to the top of the container */
    }
  }



/* mobile , ipad view */

@media (max-width: 768px) {

    #homeInfoId,
    #getStartedBtnId
    {
        display: none;
    }
    
    .info-text h2 {
        font-size: 28px;} 

    .form-box h2 {
            font-size: 26px;} 
    .hero h2 {
    font-size: 21px;
    margin-left: 0px;
    }

    .col-lg-8 {
        padding: 0 25px;
    }

    .wrapper .form-box {
        width: 100%;
    }
    
    .footer h4 {
        text-align: center;
    }
    .footer .footer-about a
    {
        font-size: 20px !important;
    }

    .form-box.login .input-box {
        height: 17%;
    }

    .wrapper1{
        /* border-radius: 40px;
        height: 550px;
        width: 100% !important; */

        border-radius: 2.5rem;
        width: 90% !important;
        max-width: 100%;
        min-height: 50vh;
        min-height: -webkit-fill-available; /* Fallback */
        aspect-ratio: 1/1; /* Remove if not needed */

    } 
    
   .wrapper .bg-animate {
        top: -90px;
        left: -1px;
        width: 100%;
        height: 43% ;
        background: linear-gradient(88deg, #55462a, #432610);
        border: 3px solid #cd9c5d;
        transform:none;
        transition: 1.5s ease;
        transition-delay: 1.6s;
        border-radius: 28vw;
    }

   

   .descriptionTextCls   
   {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center; 
   }

    .wrapper .form-box.login {
        left: 0;
        /* padding: 0 55px 0 45px; */
        padding: 0 35px 0 35px;
        height: 100%;
        top: 6%;
    } 
    
     .wrapper .form-box {width: 100%;} 
    
     .wrapper .info-text.login { 
        text-align: center;
         padding: 10px; 
         top: 0px;
         width: 100%;
         z-index: 10;
    } 
    
     .wrapper .info-text { 
        justify-content: center;
        width: 100%; 
        height: auto; 
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
   

    .wrapper.activeforgot .bg-animate
    {
        top: 79% !important;
        z-index: 10;
    }
    .wrapper .info-text.forgotPwd {
        top: 83%;
        z-index: 10;
        width: 100% !important;
        text-align: center;
        padding: 0 50px 0 50px;
    }
    .wrapper .form-box.forgotPwd,
    .wrapper .form-box.register
    {
        top: -13%;
        padding: 0 50px 0 50px;
      
    }
    
    .form-box.forgotPwd .input-box,
    .form-box.register .input-box {
        height: 23%;
    }
    
    .wrapper .bg-animate2 {
        display: none;
    }

    .wrapper.active.activesignup .bg-animate
    {
        top: 79% !important;
        z-index: 10;
    }

    .wrapper .info-text.register {
    
        top: 83%;
        z-index: 10;
        width: 100% !important;
        text-align: center;
        padding: 0 50px 0 50px;
    
    }

    .no-transition {
        transition: none !important;
    }

    .circularStyleClass
    {
     text-align: left; 
     /* width: 80%;  */
    }

    .h4, h4 {
        font-size: calc(0.95rem + .3vw) !important;
    }
    .h5, h5 {
        font-size: 0.85rem !important;
    }

    .form-box .input-box {
        margin: 18px 0;
    }
    .input-box label {
        font-size: 14px;}
        .btn {
            height: 40px !important;
        }
        .form-box .logreg-link {
            font-size: 12.5px;
            margin: 18px 0 8px;
        }
        .input-box input {
            font-size: 14px;
        }
    
    .wrapper.active .form-box.register .OtpDivCls {
    
        margin-bottom: 27px;
    }
    #otpPhoneInfoId{
        font-size: 10px;
    }

    .wrapper.activeforgot .form-box.forgotPwd .OtpForgotDivCls{
        margin-bottom: 27px;
    }
    #otpFrgtPhoneInfoId{
        font-size: 10px;
    }
    .input-box i {
        font-size: 14px !important;
    }

    .wrapper.active .bg-animate,
    .wrapper.activeforgot .bg-animate
     {
        background: linear-gradient(45deg, #081b29, #b8640f) !important;
    }
}



    @media (max-width: 991.98px) {
        .loginDivCls {
            order: 1; /* Content first on mobile */
        }

        .descriptionTextCls {
            order: 2; /* Sidebar second on mobile */
        }
    }

    @media (min-width: 992px) {
        .loginDivCls {
            order: 2; /* Content second on desktop */
        }

        .descriptionTextCls {
            order: 1; /* Sidebar first on desktop */
        }
    }
  


@media (max-width: 1200px) {
    .wrapper {
        /* width: 65%; */
        width: 100%;
        height: 427px;
    }
    .wrapper .info-text {
        width: 60%;}
        .logo img {
            max-height: 33px !important;
        }
        .logo p {
            font-size: 15px !important;
        }
        .mobile-nav-toggle {font-size: 23px;}
        #circularListId p{
            font-size: 17px;
        }
}

/* Specific width for iPad Pro (12.9-inch & 11-inch) and iPad Air */
@media (max-width: 1024px) and (min-width: 820px) {
    .wrapper {
        width: auto; /* Or specify a custom width */
    }
    .wrapper .info-text {
        width: 60%;}
}

/* Specific width for Google Nest Hub */
@media (max-width: 1280px) and (min-width: 1024px) {
    .wrapper {
        width: auto; /* Or specify a custom width */
    }
    .wrapper .info-text {
        width: 60%;}

    .wrapper .bg-animate2 {
        left: 200px;
    }
    .wrapper .bg-animate {
       
        right:-15px;
    }
    .hero {
        padding: 13vh 0 15vh 0 !important;
    }
    .hero h2 {
        font-size: 30px;
      margin-left: 0px;
    }
    .info-text h2 {
        font-size: 29px;}
    .h4, h4 {
        font-size: calc(1.0rem + .3vw);}
    .h5, h5 {
        font-size: 0.9rem !important;}

}

/*10.04.2025*/

@media (min-width: 1200px) {
    .h4, h4 {
        font-size: 1.16rem !important; 
    }
}



@media (min-width: 1200px) {
    .navmenu li:hover>a, .navmenu .active, .navmenu .active:focus {
        color: var(--contrast-color);
        /* background-color: #887763 !important; */
        background-color: #d0ab7f !important;
    }
    
}

/* Media Queries for specific breakpoints */

/* Small phones (iPhone SE) */
@media (max-width: 375px) and (max-height: 667px) {
    .wrapper {
        height: 500px;
        width: 90%;
    }
    .wrapper .bg-animate {
        height: 38% ;
    }
    .logo img {
        max-height: 33px !important;
    }
    .logo p {
        font-size: 15px !important;
    }
    .mobile-nav-toggle {font-size: 23px;}
    #circularListId p{
        font-size: 13px;
    }

    .wrapper.active .bg-animate,
    .wrapper.activeforgot .bg-animate
     {
        background: linear-gradient(45deg, #081b29, #b8640f) !important;
    }
}

/* Medium phones (iPhone XR, most Android) */
@media (min-width: 376px) and (max-width: 414px) {
    .wrapper {
        height: 433px;
        width: 90%;
        }
    .hero{
        padding: 9vh 0 8vh 0;
    }
    .logo img {
        max-height: 33px !important;
    }
    .logo p {
        font-size: 15px !important;
    }
    .mobile-nav-toggle {font-size: 23px;}
    #circularListId p{
        font-size: 13px;
    }
    .wrapper.active .bg-animate,
    .wrapper.activeforgot .bg-animate
     {
        background: linear-gradient(45deg, #081b29, #b8640f) !important;
    }
}

/* Large phones (iPhone Plus sizes, some Android) */
@media (min-width: 415px) and (max-width: 767px) {
    .wrapper {
        height: 433px;
       width: 85%;
    }
    .hero{
        padding: 9vh 0 8vh 0;
    }
    .logo img {
        max-height: 33px !important;
    }
    .logo p {
        font-size: 15px !important;
    }
    .mobile-nav-toggle {font-size: 23px;}
    #circularListId p{
        font-size: 13px;
    }

    .wrapper.active .bg-animate,
    .wrapper.activeforgot .bg-animate
     {
        background: linear-gradient(45deg, #081b29, #b8640f) !important;
    }
}

/* ipad mini */
@media (min-width: 768px) and (max-width: 1024px) {
    .wrapper {
        height: 412px;
        width: 58%;
    }
    .hero
    {    padding: 0vh 0 11vh 0;}

    /* .bg-animate{
        height: 92% !important;
    }
    .wrapper .bg-animate {
        left: -27px !important;
        width: 114% !important;
    }
    .wrapper .info-text.register {
    top: 81% !important;
    } */

}

/* Tablets (iPad, iPad Mini) - portrait */
@media (min-width: 820px) and (max-width: 1023px) {
    .wrapper {
        height: 441px;
        width: 100%;
    }
    .hero
    {    padding: 0vh 0 15vh 0;}

    .form-box.forgotPwd .input-box {
        height: 13%;
    }
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
  .hero {
    padding: 0vh 0 0vh 0 !important;
  }
}

/* Tablets (iPad Pro) - portrait */
@media (min-width: 1024px) and (max-width: 1365px) {
    .wrapper {
        height: 465px;
        width: 100%;
    }
    .hero
    {           padding: 0vh 0 50vh 0;}
    .form-box h2 {
        font-size: 22px;}
    .wrapper .bg-animate {
        right: -37px;
    }
    .form-box .input-box {
        margin: 18px 0;}
    .input-box input {
        font-size: 14px;}
    #otpPhoneInfoId
    {
        font-size: 10px;
    }
    .wrapper.active .form-box.register .OtpDivCls {
    
        margin-bottom: 25px;
    }
    #otpFrgtPhoneInfoId{
        font-size: 10px;
    }
}

/* Landscape tablets and small laptops */
@media (min-width: 1366px) and (max-width: 1439px) {
    .wrapper {
        height: 700px;
    }
}

/* Larger screens (Nest Hub, desktop) */
/* @media (min-width: 1440px) {
    .wrapper {
        height: 750px;
    }
} */

/* Foldables (Galaxy Fold) */
@media (max-width: 768px) and (min-aspect-ratio: 1/1) {
    .wrapper {
        height: auto;
        min-height: 300px;
    }
    .wrapper.active .bg-animate,
    .wrapper.activeforgot .bg-animate
     {
        background: linear-gradient(45deg, #081b29, #b8640f) !important;
    }
}

@media only screen and 
       (min-width: 344px) and (max-width: 400px) and 
       (min-height: 700px) and (max-height: 885px) {    
       
        p{
            margin-bottom: 0.70rem;
        }
        .wrapper.activeforgot .bg-animate {
            top: 82% !important;}
        .hero h2 {
            font-size: 18px;
            margin-left: 0px;
        }
    }
/* iPhone SE (1st Gen) / iPhone 5/5S - 320×568 */

@media (width: 320px) and (height: 568px) {
    /* Further reduce padding */
    .hero{
        padding: 16vh 0 10vh 0;
    }
    .wrapper {
        height: 450px;
        width: 100%;
    }
    .btn {
        height: 34px !important;
        width: 76%;
        font-size: 12px;
    }
    .wrapper .form-box.login,
    .wrapper .form-box.forgotPwd,
    .wrapper .form-box.register  {
        text-align: center;
    }
    .hero h2 {
        font-size: 16px;
        margin-left: 0px;
    }
    .h4, h4 {
        font-size: calc(0.75rem + .3vw) !important;
    }
    .h5, h5 {
        font-size: 0.65rem !important;
    }
    .wrapper.active .bg-animate,
    .wrapper.activeforgot .bg-animate
     {
        background: linear-gradient(45deg, #081b29, #b8640f) !important;
    }
}

@media (width: 320px) and (height: 480px) {
    .wrapper {
        height: 382px;
        width: 100%;
    }
    .hero {
        padding: 19vh 0 8vh 0;}
   
 .wrapper .info-text.login {
    top: -6px;}
    .hero h2 {
        font-size: 16px;
       margin-left: 0px;
    }
    .h4, h4 {
        font-size: calc(0.75rem + .3vw) !important;
    }
    .h5, h5 {
        font-size: 0.65rem !important;
    }
    .wrapper .bg-animate {
        height: 41%;
    }
    .form-box .input-box {
        margin: 12px 0;
    }
    .btn {
        height: 34px !important;
        width: 76%;
        font-size: 12px;
    }
    .form-box .logreg-link {
        font-size: 10.5px;
        margin: 16px 0 8px;
    }
    .input-box input {
        font-size: 12px;
    }
    .signupPwdSetDivCls
    {
        font-size: 13px;
        /* display: block !important; */
    }
    .forgotPwdSetDivCls
    {
        font-size: 12px;
    }
    .wrapper .form-box.login,
    .wrapper .form-box.forgotPwd,
    .wrapper .form-box.register  {
        text-align: center;
    }
    .wrapper.active .bg-animate,
    .wrapper.activeforgot .bg-animate
     {
        background: linear-gradient(45deg, #081b29, #b8640f) !important;
    }
    

}



/* .wrapper.active .bg-animate {
    background: transparent;
} */

/* .wrapper.activesignup .bg-animate2 {
    background: linear-gradient(45deg, #081b29, #b8640f);}

.wrapper.activeforgot .bg-animate2 {
    background: linear-gradient(45deg, #081b29, #b8640f);} */

/* Default state (Login) */
/* .wrapper:not(.active):not(.forgot-password) .bg-animate {
    background: linear-gradient(45deg, #081b29, #b8640f);
}
.wrapper:not(.active):not(.forgot-password) .bg-animate2 {
    background: transparent;
} */



/* Forgot Password state */
/* .wrapper.forgot-password .bg-animate {
    background: linear-gradient(45deg, #081b29, #b8640f);
}
.wrapper.forgot-password .bg-animate2 {
    background: transparent;
} */



/* @media (max-width: 375px) {
    .wrapper {
        border-radius: 1.5rem;
        min-height: 60vh;
    }
} */

/* @media (max-width: 991px) {
    .wrapper {
        min-height: 480px;
        border-radius: 30px;
        padding: 16px;
    }
} */