/* General Styling */
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(to right, rgb(8, 1, 61), rgb(2, 125, 4));
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            /* color: white; */
        }

        /* Main Container */
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            /* gap: 50px; */
            max-width: 900px;
            width: 100%;
            padding: 20px;
        }

        /* Left Section - Cricket Team Info */
        .col-5 {
            max-height: 125px;
            height: 100%;
            position: absolute;
            top: 10%;
            right: 45%;
            /* text-align: center; */
            animation: fadeInLeft 1s ease-in-out;
        }

        .col-5 h2 {
            font-size: 75px;
            font-weight: bold;
            color: #ffcc00;
            margin: 0;
            text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        }

        .col-5 h3 {
            font-size: 50px;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .col-5 img {
            justify-content: start;
            width: 350px;
            height: auto;
            filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
        }

        /* Login Form Container */
        .login-container {
            position: absolute;
            top: 12%;
            right: 7%;
            background-color: rgba(193, 193, 193, 0.4);
            border-radius: 25px;
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
            /* text-align: center; */
            animation: fadeInRight 1s ease-in-out;
            height: auto;
            width: 600px;
            /* Adjust width */
            max-width: 80%;
            /* Ensure it remains responsive */
            padding: 40px;
            /* Increase padding for better spacing */
        }

        .login-container h2 {
            font-family: 'Poppins', sans-serif;
            color: #ffffff;
            margin-bottom: 25px;
            font-size: 50px;
            font-weight: bold;
        }

        /* Form Input Fields */
        .form-group {
            display: flex;
            /* Ensures Flexbox layout */
            flex-direction: column;
            /* Stack the items vertically */
            justify-content: center;
            /* Vertically center the items */
            align-items: left;
            /* Align items to the left */
            text-align: left;
            /* Align the text inside the items to the left */
            margin-bottom: 15px;
            font-size: 30px;
            font-weight: bolder;
            gap: 5px;
        }


        .form-group label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            color: #000000;
        }

        .form-group input {
            height: 50px;
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 15px;
            transition: 0.3s;
        }

        .form-group input:focus {
            border-color: #ffcc00;
            box-shadow: 0px 0px 10px rgba(255, 204, 0, 0.5);
        }

        /* Login Button */
        button {
            height: 50px;
            width: 50%;
            padding: 12px;
            background: #ffcc00;
            border: none;
            color: #333;
            font-size: 20px;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s ease-in-out;
        }

        button:hover {
            background: #f0c521;
            transform: scale(1.05);
        }

        button h4 {
            font-weight: bold;
        }

        ;

        /* Error Message */
        .error-message {
            /*color: red;*/
            font-size: 19px;
            margin-top: 10px;
        }

        /* Animations */
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @media (max-width: 1600px) {
            
            body {font-family: 'Poppins', sans-serif;
            background: linear-gradient(to right, rgb(8, 1, 61), rgb(2, 125, 4));
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            /* color: white; */
        }

        /* Main Container */
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            /* gap: 50px; */
            max-width: 900px;
            width: 100%;
            padding: 20px;
        }

        /* Left Section - Cricket Team Info */
        .col-5 {
            max-height: 125px;
            height: 100%;
            position: absolute;
            top: 10%;
            right: 45%;
            /* text-align: center; */
            animation: fadeInLeft 1s ease-in-out;
        }

        .col-5 h2 {
            font-size: 75px;
            font-weight: bold;
            color: #ffcc00;
            margin: 0;
            text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        }

        .col-5 h3 {
            font-size: 50px;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .col-5 img {
            justify-content: start;
            width: 350px;
            height: auto;
            filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
        }

        /* Login Form Container */
        .login-container {
            position: absolute;
            top: 12%;
            right: 7%;
            background-color: rgba(193, 193, 193, 0.4);
            border-radius: 25px;
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
            /* text-align: center; */
            animation: fadeInRight 1s ease-in-out;
            height: auto;
            width: 600px;
            /* Adjust width */
            max-width: 80%;
            /* Ensure it remains responsive */
            padding: 40px;
            /* Increase padding for better spacing */
        }

        .login-container h3 {
            font-family: 'Poppins', sans-serif;
            color: #333;
            margin-bottom: 25px;
            font-size: 50px;
            font-weight: bold;
        }

        /* Form Input Fields */
        .form-group {
            display: flex;
            /* Ensures Flexbox layout */
            flex-direction: column;
            /* Stack the items vertically */
            justify-content: center;
            /* Vertically center the items */
            align-items: left;
            /* Align items to the left */
            text-align: left;
            /* Align the text inside the items to the left */
            margin-bottom: 15px;
            font-size: 30px;
            font-weight: bolder;
            gap: 5px;
        }


        .form-group label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            color: #000000;
        }

        .form-group input {
            height: 50px;
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 15px;
            transition: 0.3s;
        }

        .form-group input:focus {
            border-color: #ffcc00;
            box-shadow: 0px 0px 10px rgba(255, 204, 0, 0.5);
        }

        /* Login Button */
        button {
            height: 50px;
            width: 50%;
            padding: 12px;
            background: #ffcc00;
            border: none;
            color: #333;
            font-size: 20px;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s ease-in-out;
        }

        button:hover {
            background: #f0c521;
            transform: scale(1.05);
        }

        button h4 {
            font-weight: bold;
        }

        ;

        /* Error Message */
        .error-message {
            /*color: red;*/
            font-size: 19px;
            margin-top: 10px;
        }

        /* Animations */
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }}

        @media(max-width:1345px) {
            /* Main Container */
            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                /* gap: 50px; */
                max-width: 900px;
                width: 100%;
                padding: 20px;
            }

            /* Left Section - Cricket Team Info */
            .col-5 {
                max-height: 100px;
                height: 100%;
                position: absolute;
                top: 25%;
                right: 50%;
                /* text-align: center; */
                animation: fadeInLeft 1s ease-in-out;
            }

            .col-5 h2 {
                font-size: 50px;
                font-weight: bold;
                color: #ffcc00;
                margin: 0;
                text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
            }

            .col-5 h3 {
                font-size: 30px;
                color: #ffffff;
                margin-bottom: 20px;
            }

            .col-5 img {
                justify-content: start;
                width: 300px;
                height: auto;
                filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
            }

            /* Login Form Container */
            .login-container {
                position: absolute;
                top: 20%;
                right: 5%;
                background-color: rgba(193, 193, 193, 0.4);
                border-radius: 25px;
                box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
                /* text-align: center; */
                animation: fadeInRight 1s ease-in-out;
                height: auto;
                width: 800px;
                /* Adjust width */
                max-width: 40%;
                /* Ensure it remains responsive */
                padding: 40px;
                /* Increase padding for better spacing */
            }

            .login-container h2 {
                font-family: 'Poppins', sans-serif;
                color: white;
                margin-bottom: 25px;
                font-size: 50px;
                font-weight: bold;
            }

            /* Form Input Fields */
            .form-group {
                display: flex;
                /* Ensures Flexbox layout */
                flex-direction: column;
                /* Stack the items vertically */
                justify-content: center;
                /* Vertically center the items */
                align-items: left;
                /* Align items to the left */
                text-align: left;
                /* Align the text inside the items to the left */
                margin-bottom: 15px;
                font-size: 30px;
                font-weight: bolder;
                gap: 5px;
            }


            .form-group label {
                font-weight: bold;
                display: block;
                margin-bottom: 5px;
                color: #000000;
            }

            .form-group input {
                height: 60px;
                width: 100%;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 5px;
                font-size: 25px;
                transition: 0.3s;
            }

            .form-group input:focus {
                border-color: #ffcc00;
                box-shadow: 0px 0px 10px rgba(255, 204, 0, 0.5);
            }

            /* Login Button */
            button {
                height: 50px;
                width: 50%;
                padding: 12px;
                background: #ffcc00;
                border: none;
                color: #333;
                font-size: 20px;
                font-weight: bold;
                border-radius: 5px;
                cursor: pointer;
                transition: 0.3s ease-in-out;
            }

            button:hover {
                background: #F0C521;
                transform: scale(1.05);
            }

            button h4 {
                font-weight: bold;
            }

            ;

            /* Error Message */
            .error-message {
                /*color: red;*/
                font-size: 19px;
                margin-top: 10px;
            }
        }

        /* Responsive Design */
        @media (max-width: 1260px) {

            /* Main Container */
            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                /* gap: 50px; */
                max-width: 900px;
                width: 100%;
                padding: 20px;
            }

            /* Left Section - Cricket Team Info */
            .col-5 {
                max-height: 150px;
                height: 100%;
                position: absolute;
                top: 25%;
                right: 50%;
                /* text-align: center; */
                animation: fadeInLeft 1s ease-in-out;
            }

            .col-5 h2 {
                font-size: 55px;
                font-weight: bold;
                color: #ffcc00;
                margin: 0;
                text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
            }

            .col-5 h3 {
                font-size: 30px;
                color: #ffffff;
                margin-bottom: 20px;
            }

            .col-5 img {
                justify-content: start;
                width: 300px;
                height: auto;
                filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
            }

            /* Login Form Container */
            .login-container {
                position: absolute;
                top: 20%;
                right: 5%;
                background-color: rgba(193, 193, 193, 0.4);
                border-radius: 25px;
                box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
                /* text-align: center; */
                animation: fadeInRight 1s ease-in-out;
                height: auto;
                width: 800px;
                /* Adjust width */
                max-width: 40%;
                /* Ensure it remains responsive */
                padding: 40px;
                /* Increase padding for better spacing */
            }

            .login-container h2 {
                font-family: 'Poppins', sans-serif;
                color: white;
                margin-bottom: 25px;
                font-size: 50px;
                font-weight: bold;
            }

            /* Form Input Fields */
            .form-group {
                display: flex;
                /* Ensures Flexbox layout */
                flex-direction: column;
                /* Stack the items vertically */
                justify-content: center;
                /* Vertically center the items */
                align-items: left;
                /* Align items to the left */
                text-align: left;
                /* Align the text inside the items to the left */
                margin-bottom: 15px;
                font-size: 30px;
                font-weight: bolder;
                gap: 5px;
            }


            .form-group label {
                font-weight: bold;
                display: block;
                margin-bottom: 5px;
                color: #000000;
            }

            .form-group input {
                height: 60px;
                width: 100%;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 5px;
                font-size: 25px;
                transition: 0.3s;
            }

            .form-group input:focus {
                border-color: #ffcc00;
                box-shadow: 0px 0px 10px rgba(255, 204, 0, 0.5);
            }

            /* Login Button */
            button {
                height: 50px;
                width: 50%;
                padding: 12px;
                background: #ffcc00;
                border: none;
                color: #333;
                font-size: 20px;
                font-weight: bold;
                border-radius: 5px;
                cursor: pointer;
                transition: 0.3s ease-in-out;
            }

            button:hover {
                background: #F0C521;
                transform: scale(1.05);
            }

            button h4 {
                font-weight: bold;
            }

            ;

            /* Error Message */
            .error-message {
                /*color: red;*/
                font-size: 19px;
                margin-top: 10px;
            }
        }
        
        @media (max-width: 860px) {

            /* Main Container */
            .container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 15px;
            }

            /* Left Section - Cricket Team Info */
            .col-5 {
                text-align: center;
                max-height: 120px;
                width: 100%;
                position: static;
                /* Prevents overlapping */
                animation: fadeInLeft 1s ease-in-out;
            }

            .col-5 h2 {
                font-size: 40px;
                /* Adjusted for smaller screens */
            }

            .col-5 h3 {
                font-size: 30px;
                margin-bottom: 10px;
            }

            .col-5 img {
                display: none;
            }

            /* Login Form Container */
            .login-container {
                position: relative;
                top: auto;
                right: auto;
                background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(69, 69, 69, 0.5)),
                    url(../img/player.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
                /* Makes it flexible */
                max-width: 600px;
                height: auto;
                max-height: none;
                background-color: rgba(193, 193, 193, 0.6);
                padding: 20px;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
                border-radius: 20px;
                animation: fadeInRight 1s ease-in-out;
            }

            .login-container h2 {
                font-size: 30px;
                text-align: center;
                margin-bottom: 20px;
            }

            /* Form Input Fields */
            .form-group {
                font-size: 18px;
                margin-bottom: 10px;
                gap: 3px;
            }

            .form-group label {
                font-size: 18px;
            }

            .form-group input {
                height: 45px;
                font-size: 18px;
                padding: 8px;
            }

            /* Login Button */
            button {
                width: 100%;
                height: 45px;
                font-size: 18px;
                padding: 10px;
            }

            button:hover {
                transform: scale(1.02);
            }

            /* Error Message */
            .error-message {
                font-size: 16px;
                text-align: center;
            }
        }

        @media (max-width: 490px) {

            /* Main Container */
            .container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 15px;
            }

            /* Left Section - Cricket Team Info */
            .col-5 {
                text-align: center;
                max-height: 120px;
                width: 100%;
                position: static;
                /* Prevents overlapping */
                animation: fadeInLeft 1s ease-in-out;
            }

            .col-5 h2 {
                font-size: 30px;
                /* Adjusted for smaller screens */
            }

            .col-5 h3 {
                font-size: 20px;
                margin-bottom: 10px;
            }

            .col-5 img {
                display: none;
            }

            /* Login Form Container */
            .login-container {
                position: relative;
                top: auto;
                right: auto;
                background: linear-gradient(rgba(255, 255, 255, 0.208), rgba(69, 69, 69, 0.142)),
                    url(../img/player.png);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
                /* Makes it flexible */
                max-width: 500px;
                height: auto;
                max-height: none;
                background-color: rgba(193, 193, 193, 0.6);
                padding: 0 20px 20px 20px;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
                border-radius: 20px;
                animation: fadeInRight 1s ease-in-out;
            }

            .login-container h2 {
                font-size: 30px;
                text-align: center;
                margin-bottom: 20px;
            }

            /* Form Input Fields */
            .form-group {
                font-size: 18px;
                margin-bottom: 10px;
                gap: 3px;
            }

            .form-group label {
                font-size: 18px;
            }

            .form-group input {
                height: 45px;
                font-size: 18px;
                padding: 8px;
            }

            /* Login Button */
            button {
                background: #ffcc00;
                width: 100%;
                height: 45px;
                font-size: 18px;
                padding: 10px;
            }

            button:hover {
                transform: scale(1.02);
                background: #F0C521;
            }

            /* Error Message */
            .error-message {
                font-size: 10px;
                text-align: center;
            }
        }