main {
    flex: 1; /* Ensures content area grows to push the footer to the bottom */
    padding: 20px;
    text-align: center;
      }


        .tab-container {
            width: 100%;
            max-width: 600px;
            margin: auto;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .tab-header {
            display: flex;
            position: relative;
            /*background: #0958ab94; */

            background: linear-gradient(45deg, #235384, #0958ab94);


        }

        .tab-header button {
            flex: 1;
            padding: 15px;
            border: none;
            background: transparent;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
            position: relative;
        }

        .tab-header button.active {
            background: radial-gradient(circle, #085cb0, #2a5179) !important; /* Distinct color for active tab */
            color: white;
            font-weight: bold;
            z-index: 2;
        }

        .text-color {
        color: darkblue; /* Distinct color for active tab */
        font-size: 15px;
        }

        /* Full Vertical Tab Separators */
        .tab-header button:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 2px;
            height: 100%; /* Full height */
            background: rgba(255, 255, 255, 0.5);
        }

        .tab-content {
            display: none;
            padding: 20px;
            min-height: 350px;
            background: #f0f8ff; /* Content area color */
            animation: fadeIn 0.3s ease-in-out;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
   /* Sidebar for Mobile */
        .sidebar {
            position: fixed;
            top: 0;
            left: -250px;
            width: 250px;
            height: 100%;
            background: radial-gradient(circle, #085cb0, #2a5179) !important;
            color: white;
            overflow: auto;
            transition: 0.3s;
            z-index: 1000;
        }

        .sidebar.active {
            left: 0;
        }

        .sidebar a {
            display: block;
            padding: 15px;
            color: white;
            text-decoration: none;
            transition: 0.3s;
        }

        .sidebar a:hover {
            background-color: #575757;
        }

        /* Overlay for Mobile */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .overlay.active {
            display: block;
        }

        /* Horizontal Navbar for Desktop */
        @media (min-width: 992px) {
            .sidebar {
                display: none;
            }

            .horizontal-navbar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: radial-gradient(circle, #085cb0, #2a5179) !important;
                padding: 10px 20px;
            }

            .horizontal-navbar a {
                color: white;
                text-decoration: none;
                margin: 0 15px;
                font-weight: bold;
                transition: color 0.3s;
            }

        .horizontal-navbar a:hover {

             color: #ffeb3b;

        }


        .horizontal-navbar .active {
             background: radial-gradient(circle, #085cb0, #2a5179) !important;
             color: #ffeb3b;

        }

            .menu-btn {
                display: none;
            }
        }

        /* Transition effect for navbar switching */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Mobile view adjustments */
        @media (max-width: 768px) {
            h3 {
                font-size: 1rem; /* Reduce size for mobile */
            }

            h5 {
                font-size: 0.8rem; /* Smaller size for mobile */
            }
        }

        .hand {
            display: inline-block;
            font-size: 24px;
            font-family: Arial, sans-serif;
            cursor: pointer;
        }

        .hand::before {
            content: '👉';
            color: #007bff;
            transition: color 0.3s ease;
        }

        .hand:hover::before {
            color: #0056b3;
        }


          /* Basic styles for the input container */
        .input-container {
            position: relative;         /* Makes the icon position relative to this container */
            max-width: 100%;            /* Ensures it adapts on responsive devices */
            margin-bottom: 20px;        /* Adds spacing between fields */
        }

        /* Styles for the input field */
        .input-container input {
            width: 100%;                /* Makes the input fill the container width */
            padding-right: 30px;        /* Adds space for the icon */
            padding: 10px;              /* Padding for input text */
            font-size: 16px;            /* Adjust font size */
            box-sizing: border-box;     /* Ensures padding doesn't affect width */
        }


     input[type="text"], input[type="email"] {
            width: 100%;
            padding: 10px;
            padding-right: 2.5em;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }

    input[type="text"]:focus, input[type="email"]:focus {
            border-color: #007bff;
        }



        .status-icon {
        position: absolute;         /* Position the icon absolutely */
        right: 5px;                /* Align the icon to the end of the input field */
        top: 50%;                   /* Center icon vertically */
        transform: translateY(-50%);/* Adjust for perfect centering */
        font-size: 25px;            /* Icon size */
        pointer-events: none;       /* Prevent icon from being interactive */
        color: green;               /* Icon color; customize as needed */

        }



        .valid .status-icon {
            color: green;
            border-color: #00bd9d;

        }

        .invalid .status-icon {
            color: red;
            display: inline-block;

        }

        /* Valid Input */
        .form-group input.valid {
            border-color: green;
        }

         /* Invalid Input */
        .form-group input.invalid {
            border-color: red;
        }

        .invalid-feedback {
            color: red;
            font-size: 0.9em;
            display: none;
        }

        .invalid .invalid-feedback {
            display: block;
        }



        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .form-group input {
            flex: 1; /* Allow the input to take up available space */
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
        }

        .form-group .status-icon {
            margin-left: 10px;
            color: green;
            font-size: 20px; /* Adjust icon size to align with input height */
        }

        /* Responsive Design */
        @media (max-width: 600px) {
            .form-group {
                flex-direction: column;
                align-items: stretch;
            }

            .form-group input {
                margin-bottom: 10px; /* Add spacing between input and icon */
            }

            .form-group .status-icon {
                margin-left: 0;
                text-align: center;
            }
        }

        .forgot-link {
            text-align: right;
            margin-top: 5px;
        }
        .forgot-link a {
            font-size: 0.9em;
            color: blue;
            text-decoration: none;
        }
        .forgot-link a:hover {
            text-decoration: underline;
        }

      input.uppercase-input {
            text-transform: uppercase;
        }

    .content-minheight {
    display: flex;
    flex-direction: column;
    min-height: 70vh; /* Ensures footer sticks to the bottom */
    }
    @@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .text-success {
    color: #28a745; /* Bootstrap green */
    }

    .text-danger {
        color: #dc3545; /* Bootstrap red */
    }