body {
            height: 100%;
            margin: 0;
            overflow-x: hidden;
            overflow-y: auto;
            /* Allow vertical scrolling */
        }

        header {
            z-index: 1000;
        }

        .background-container {
            background: linear-gradient(135deg, #c9eff4, #fcc4d7, #ffccbc, #daf4b5, #fce6e4, #dfffbc);
            font-family: 'Arial', sans-serif;
            text-align: center;
            animation: gradientAnimation 12s infinite alternate ease-in-out;
            background-size: 300% 300%;
        }

        /* Keyframes for Smooth Gradient Transition */
        @keyframes gradientAnimation {
            0% {
                background-position: top left;
            }

            100% {
                background-position: bottom right;
            }
        }



        .container-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100vh;
            padding: 2rem;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 40%;
            text-align: center;
        }

        .services-section {
            background: transparent;
            border-radius: 15px;
            padding: 2rem;
            width: 40%;
        }

        /* .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            justify-content: center;
            align-items: center;
        } */

        .service-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 120px;
        }

        .service-btn img {
            width: 50px;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .service-btn:hover {
            transform: scale(1.05);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        }

        .service-btn:hover img {
            transform: translateY(-5px);
            filter: brightness(1.2);
        }

        .col-lg-4 {
            display: flex;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .container-wrapper {
                flex-direction: column;
                text-align: center;
            }

            .login-container,
            .services-section {
                width: 100%;
                margin-bottom: 20px;
            }

            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Smooth Diagonal Gradient Animation */



        /* Common styles for all abstract shapes */
        .uneven-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.6;
            filter: blur(30px);
            animation-duration: 15s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }

        /* Large shape - Center Right */
        .uneven-shape1 {
            width: 320px;
            height: 320px;
            background: linear-gradient(135deg, #fd6c71, #fad0c4);
            top: 45%;
            left: 70%;
            transform: translate(-50%, -50%);
            animation: morph1 18s infinite alternate ease-in-out;
        }

        /* Medium shape - Top Left */
        .uneven-shape2 {
            width: 250px;
            height: 250px;
            background: linear-gradient(135deg, #6e81ff, #ff92e0);
            top: 15%;
            left: 10%;
            animation: morph2 20s infinite alternate ease-in-out;
        }

        /* Small shape - Bottom Right */
        .uneven-shape3 {
            width: 180px;
            height: 180px;
            background: linear-gradient(135deg, #ffef5c, #ff5a2c);
            bottom: 10%;
            right: 8%;
            animation: morph3 14s infinite alternate ease-in-out;
        }

        /* Morphing Animations */
        @keyframes morph1 {
            0% {
                border-radius: 50% 40% 60% 30%;
                transform: scale(1) rotate(0deg);
            }

            50% {
                border-radius: 40% 60% 30% 50%;
                transform: scale(1.1) rotate(10deg);
            }

            100% {
                border-radius: 50% 40% 60% 30%;
                transform: scale(1) rotate(0deg);
            }
        }

        @keyframes morph2 {
            0% {
                border-radius: 30% 50% 40% 60%;
                transform: scale(1) rotate(0deg);
            }

            50% {
                border-radius: 50% 30% 60% 40%;
                transform: scale(1.15) rotate(-10deg);
            }

            100% {
                border-radius: 30% 50% 40% 60%;
                transform: scale(1) rotate(0deg);
            }
        }

        @keyframes morph3 {
            0% {
                border-radius: 60% 40% 50% 30%;
                transform: scale(1) rotate(0deg);
            }

            50% {
                border-radius: 40% 50% 60% 30%;
                transform: scale(1.2) rotate(15deg);
            }

            100% {
                border-radius: 60% 40% 50% 30%;
                transform: scale(1) rotate(0deg);
            }
        }

        /* 
@keyframes morph {
    0% { border-radius: 50% 20% 40% 70%; }
    25% { border-radius: 30% 60% 50% 20%; }
    50% { border-radius: 60% 30% 70% 40%; }
    75% { border-radius: 20% 50% 30% 60%; }
    100% { border-radius: 50% 20% 40% 70%; }
}
@keyframes morph2 {
    0%   { border-radius: 70% 30% 50% 20%; }
    25%  { border-radius: 20% 70% 30% 60%; }
    50%  { border-radius: 50% 20% 70% 40%; }
    75%  { border-radius: 30% 60% 20% 70%; }
    100% { border-radius: 70% 30% 50% 20%; }
}
@keyframes morph3 {
    0%   { border-radius: 40% 30% 50% 60%; }
    20%  { border-radius: 60% 40% 30% 50%; }
    40%  { border-radius: 30% 50% 70% 40%; }
    60%  { border-radius: 70% 30% 40% 60%; }
    80%  { border-radius: 50% 60% 30% 70%; }
    100% { border-radius: 40% 30% 50% 60%; }
}

.uneven-shape1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    border-radius: 50% 20% 40% 70%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
    animation: morph 20 infinite alternate ease-in-out;
}
.uneven-shape2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #6e81ff, #ff92e0);
    border-radius: 50% 20% 40% 70%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 30%;
    left: 20%;
    transform: translate(-50%, -50%);
    animation: morph2 20s infinite alternate ease-in-out;
}
.uneven-shape3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #ffef5c, #ff5a2c);
    border-radius: 50% 20% 40% 70%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 90%;
    left: 90%;
    transform: translate(-50%, -50%);
    animation: morph3 20s infinite alternate ease-in-out;
} */



        /* Glassmorphism Login Container */
        .login-container {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: auto;
            text-align: center;
            transition: transform 0.3s ease-in-out;
        }

        /* Services Section with a Curved Background */
        .services-section {
            background: transparent;
            border-radius: 50px 50px 0 0;
            padding: 2rem;
            margin-top: 40px;
            position: relative;
            transition: all 0.3s ease-in-out;

        }

        /* Service Button Styling */
        .service-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 10px;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 120px;
            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
        }

        .service-btn-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 10px;
            padding: 5px;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 120px;

        }

        .service-btn img {
            width: 50px;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        /* Service Button Hover Effects */
        .service-btn:hover,
        .service-btn-header:hover {
            transform: scale(1.05);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
            color: black;
        }

        .service-btn:hover img {
            transform: translateY(-5px);
            filter: brightness(1.2);
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            margin-top: 40px;
        }





        /* Blurred Overlay */
        .blur-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(15px);
            /* Blurs anything behind */
            background: rgba(255, 255, 255, 0.2);
            /* Slight transparency */
        }

        /* Moving Shape */
        .moving-shape {
            position: absolute;
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, #ff4081, #448aff);
            border-radius: 50%;
            opacity: 0.5;
            animation: moveShape 40s infinite alternate ease-in-out;
        }

        .moving-shape2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, #2278ea, #ee7b01);
            border-radius: 50%;
            opacity: 0.5;
            animation: moveShape1 40s infinite alternate ease-in-out;
        }

        /* Keyframes for Random Movement */
        @keyframes moveShape {
            0% {
                top: 10%;
                left: 10%;
                transform: scale(1);
            }

            25% {
                top: 12%;
                left: 10%;
                transform: scale(1.2);
            }

            50% {
                top: 15%;
                left: 15%;
                transform: scale(0.8);
            }

            75% {
                top: 12%;
                left: 12%;
                transform: scale(1.3);
            }

            100% {
                top: 10%;
                left: 10%;
                transform: scale(1);
            }
        }

        @keyframes moveShape1 {
            0% {
                top: 42%;
                left: 70%;
                transform: scale(.7);
            }

            25% {
                top: 45%;
                left: 80%;
                transform: scale(1);
            }

            50% {
                top: 40%;
                left: 70%;
                transform: scale(1.2);
            }

            75% {
                top: 42%;
                left: 73%;
                transform: scale(1.3);
            }

            100% {
                top: 40%;
                left: 80%;
                transform: scale(1);
            }
        }

        .mouse1 {
            position: absolute;
            right: -10px;
            /* Start from off-screen */
            top: 210px;
            /* Adjust as needed */
            animation: moveMouse2 3s infinite ease-out;
            animation-delay: 1s;
            opacity: 0;
            z-index: 9999;
        }

        .mouse2 {
            position: absolute;
            top: 80px;
            right: 250px;
            animation: moveMouse1 3s infinite ease-out;
            animation-delay: 1s;
            opacity: 0;
            z-index: 9999;

        }

        @keyframes moveMouse1 {
            0% {
                opacity: 0;
            }

            90% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }


        @keyframes moveMouse2 {
            from {
                opacity: 1;
                top: 200px;
                right: -10px;
                /* Off-screen */
            }

            to {
                opacity: 1;
                top: 100px;
                right: 230px;
                /* Final position */
            }
        }

        .jump {
            transform: translateY(-5px);
            filter: brightness(1.2);
        }

        .col-md-4 {
            text-align: center;
            justify-content: center;
            display: flex;
        }

        .btn-new {
            background-color: #0e145c;
            color: white;
        }

        .btn-new:hover {
            background-color: #080c3d;
            color: white;
        }

        a:hover {
            color: #000;
        }

        /* Add this rule to allow scrolling on mobile */
        body {
            overflow-y: auto;
            /* Ensure vertical scrolling is enabled */
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .background-container {
                position: absolute;
                top: 40px;
            }

            .login-container {
                width: 100%;
            }

            .services-section {
                border-radius: 30px 30px 0 0;
                padding: 1.5rem;
            }
        }