.overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
        z-index: 999; /* Ensure overlay is on top */
    }

    .modals {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        z-index: 9999; /* Ensure modal is on top of the overlay */
        height: 33%;
        width: 25%;
        border-radius: 0.5em;
        animation: delayAndFadeIn 0.8s ease-in-out forwards; /* Delay and then fade in */
    }   




    /* Style for the close button */
    .modals .close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    @keyframes delayAndFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
    }
    /* Bouncing animation for the icon */
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-20px);
        }
        60% {
            transform: translateY(-10px);
        }
    }

    /* Apply the bouncing animation to the icon */
    .bouncing-icon {
        animation: bounce 2s infinite;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        /* 15% {
            transform: rotate(180deg);
        }
        30%{
            transform: rotate(280deg);
        } */
        70%{
            transform: rotate(359deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    /* Apply the rotation animation to the checkmark icon */
    #insertedModal .rotating-icon {
        animation: rotate 2.5s infinite; /* 0.5 seconds rotation + 3 seconds pause */
    }
  
  @media screen and (max-width: 1280px) {
        .img-showcase-container{
            width: 50% !important;
        }

        .login-form-container{
            width: 50% !important;
        }
    }



    @media screen and (max-width: 1050px) {
        .login-form{
            width: 95% !important;
        }

        .login-form input{
           font-size: 16px !important;
           padding: 3% !important;
        }

        .show-pass{
            font-size: 20px !important;
            top: 35% !important;
        }

        .login-form button{
            font-size: 16px !important;
        }
    }


    @media screen and (max-width: 800px) {
        .img-showcase-container{
            width: 0 !important;
            display: none !important;
         }

        .login-form-container{
            width: 50% !important;
        }

        .login-form-container{
            width: 100% !important;
        }

        .login-form{
            width: 80% !important;
        }

        .login-form button{
            font-size: 16px !important;
        }

        .login-form button{
            font-size: 16px !important;
            padding: 2% !important;
        }

        .show-pass{
            font-size: 25px !important;
            top: 30% !important;
        }

        .login-form input{
            font-size: 20px !important;
            padding: 2% !important;
         }

         .password-input{
            margin-bottom: 10px !important;
         }
      }
  
      @media screen and (max-width: 700px) {
        .login-form{
            /* background: red !important; */
            width: 95% !important;
        }
      }

      @media screen and (max-width: 550px) {
        .login-form{
            /* background-color: red !important; */
            width: 98% !important;
        }

      }