:root {
    --primary-color: #001253;
}
body {
    font-family: "Poppins", sans-serif !important;
}

.hero-container {
    min-height: 100vh;
    position: relative;
}

.logo-container {
    color: #000;
    width: 100%;
    font-weight: 200;
    padding: 1% 0%;
    
}

    .logo-container .message-credentials {
        font-size: 16px;
        font-weight: 500;
        color: #666666;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .logo-container .heading-welcome {
        font-size: 30px;
        font-weight: 600;
        margin: 0;
    }

    .logo-container h1 {
        color: #242424;
        font-size: 2.4rem;
    }

.e-progress-btn .e-btn-content {
    position: relative;
    z-index: 1;
    display: contents;
}

.logo-img {
    width: 18rem;
    cursor: pointer;
    margin-left: -11px;
}

.e-input-group:not(.e-disabled) .e-input-group-icon:hover, .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}

.left-section {
    padding: 2% 6%;
    min-height: 100vh;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 16px;
}


.background-shadow-1 {
    width: 300px;
    position: absolute;
    top: -88px;
    left: 604px;
    height: 300px;
    border-radius: 50%;
    background: #F3F7FD;
}

.background-shadow-2 {
    width: 250px;
    position: absolute;
    bottom: -57px;
    left: -34px;
    height: 250px;
    border-radius: 50%;
    background: #F3F7FD;
}
.right-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    /* Image layer */
    .right-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("https://ultimotive-hub.s3.dualstack.eu-west-2.amazonaws.com/national-warranties-flag-image3%201.png") center/cover no-repeat;
        filter: blur(2px) brightness(0.9);
        transform: scale(1.08);
        z-index: 0;
        
    }

    /* Brand overlay (main magic) */
    .right-section::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, rgba(0, 18, 83, 0.65) 0%, /* brand strong */
        rgba(0, 18, 83, 0.45) 40%, /* soften */
        rgba(0, 64, 140, 0.35) 100% /* slight variation */
        );
        z-index: 1;
    }
/* 🔥 Animation */
@keyframes bgMove {
    0% {
        transform: scale(1.08) translate(0, 0);
    }

    25% {
        transform: scale(1.1) translate(-10px, -5px);
    }

    50% {
        transform: scale(1.12) translate(10px, 5px);
    }

    75% {
        transform: scale(1.1) translate(-5px, 10px);
    }

    100% {
        transform: scale(1.08) translate(0, 0);
    }
}

    /* Content */
    .right-section > * {
        position: relative;
        z-index: 2;
    }
.list-items {
    position: absolute;
    right: 16%;
    width: 60%;
}


.list-item {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.9rem;
    margin: 22px 0;
}

.number {
    text-align: center;
    background-color: #fff;
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-left: 0.9%;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%), inset 0px 4px 4px rgb(0 0 0 / 25%);
    line-height: 41px;
  
}

.right-section-text {
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1.2px;
    margin-bottom: 0 !important;
    margin-left: 3%;
/*    text-shadow: 1px 1px 0 #0a2a66, 2px 2px 0 #08214f, 3px 3px 0 #061a3d, 4px 4px 10px rgba(0, 0, 0, 0.5)*/
}

.vertical-line {
    height: 40px;
    border-left: 3px solid #fff;
    margin-left: 22px;
    margin-top: 5px;
}

.footer {
    position: absolute;
    bottom: 8%;
    left: 1%;
    padding: 0 5%;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer p {
    margin: 0 !important;
}

.btn:focus {
    outline: none !important;
    outline-offset: 0px !important;
}


.qr-img {
    width: 10%;
}

.validation-input {
    margin-right: 10px;
    margin-top: 0;
    width: 80%;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error) {
    margin-right: 10px;
    margin-top: 0;
}

#txtValidationKey {
    height: 45px;
}

.btn-primary {
    color: #fff;
    border-color: var(--btn-hover) !important;
    /*    background-color: var(--primary-color) !important;*/
    background: linear-gradient(135deg, rgb(0, 18, 83), rgb(0, 51, 204)) !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    transition: transform 0.3s ease, color 0.3s ease;
}
    /* smooth fill from center */
    .btn-primary::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--btn-hover);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s ease;
        z-index: -1;
    }

    .btn-primary:hover::before {
        transform: scaleX(1);
    }

    /* slight zoom */
    .btn-primary:hover {
        transform: scale(1.05);
        color: #fff !important;
    }

    /* focus remove */
    .btn-primary:focus,
    .btn-primary:focus-visible,
    .btn-primary:active {
        outline: none !important;
        box-shadow: none !important;
    }


    

@media screen and (max-width: 740px) {
    .footer {
        bottom: 5% !important;
        padding: 0 5%;
    }

        .footer p:last-child {
            color: #000 !important;
        }
}


@media screen and (min-width: 1000px) and (max-width: 1200px) {
}

@media screen and (min-width: 768px) {
    .right-section {
        padding: 0;
    }


    .error-msg {
        width: 80% !important;
        font-size: 0.8rem !important;
    }

    .qr-img {
        width: 18% !important;
    }

    .left-section {
        align-items: center;
    }
}

@media screen and (min-width: 1000px) {
    .right-section {
        padding: 0;
        display: flex;
    }

    .form {
        margin-top: 10%;
    }

    .qr-img {
        width: 20% !important;
    }

    .validate-logo-img {
        width: 3.4rem;
        height: 100%;
    }
}


@media screen and (min-width: 1280px ) and (max-width: 1440px) {
    .footer {
        bottom: 4% !important;
        padding: 0 5%;
    }

    .background-shadow-1 {
        left: 480px !important;
    }

    .footer p:last-child {
        color: #fff;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1279px) {
    .footer {
        bottom: 4%;
        padding: 0 5%;
    }

        .footer p:last-child {
            color: #fff;
        }
}

/*
@media screen and (min-width: 1000px ) and (max-width: 1280px) {
    .footer {
        bottom: 8% !important;
        padding: 0 8%;
    }
}*/


@media screen and (min-width: 1440px) {
    .e-btn {
        margin: 5% 0 !important;
        padding: 2% 0 !important;
    }

    .trial {
        font-size: 2rem !important;
    }


    .logo-img {
        width: 22rem;
        margin-bottom: 1%;
    }

    .trial {
        padding: 16px 0;
    }

    .qr-img {
        width: 30% !important;
    }
}


/*media queries for macbook*/

@media only screen and (min-width: 2304px) {
    .validate-input {
        padding-top: 0;
        margin-top: 3px;
    }
}