.animate {
            position: absolute;
            z-index: -1;
            margin-top: -100px;
            margin-left: -200px;
            width: 600px;
            height: 600px;
            opacity: 1;
        }
        .animate-glass {
            width: 100%;
            height: 100%;
            display: table;
            position: absolute;
            padding: 20px;
            backdrop-filter: blur(60px);
            -webkit-backdrop-filter: blur(60px);
        }

        .animate2 {
            position: absolute;
            z-index: -1;
            margin-top: -100px;
            left: 00px;
            width: 100%;
            height: 500px;
            opacity: 1;
            overflow: hidden;
            padding-top: 50px;
        }
        .animate2-glass {
            width: 100%;
            height:500px;
            display: table;
            position: absolute;
            backdrop-filter: blur(60px);
            -webkit-backdrop-filter: blur(60px);
        }

        .animate3 {
            position: absolute;
            z-index: -1;
            margin-top: -200px;
            margin-left: 800px;
            opacity: 3;
            width: 800px;
            height: 600px;
        }
        .animate3-glass {
            width: 100%;
            height: 100%;
            display: table;
            position: absolute;
            padding: 20px;
            backdrop-filter: blur(60px);
            -webkit-backdrop-filter: blur(60px);
        }

        .circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.2;
            margin: 130px;
            display: table;
            margin-left: 200px;
        }

        .circle1 {
            background: red;
            animation: float1 8s infinite ease-in-out;
            width: 300px;
            height: 300px;
        }

        .circle2 {
            background: #B73E59;
            animation: float2 10s infinite ease-in-out;
            width: 250px;
            height: 250px;
            margin-left: 200px;
        }

        .circle3 {
            background: blue;
            animation: float3 12s infinite ease-in-out;
            width: 250px;
            height: 250px;
            margin-left: 150px;
        }

        .circle4 {
            position: relative;
            display: inline-table;
            background: red;
            animation: float1 18s infinite ease-in-out;
            width: 200px;
            height: 200px;
            margin: 0 0 0 00px;
            z-index: -1;
        }

        .circle5 {
            position: relative;
            display: inline-table;
            background: #B73E59;
            animation: float2 10s infinite ease-in-out;
            width: 200px;
            height: 200px;
            margin: 0 0 0 -100px;
            z-index: -1;
        }

        .circle6 {
            position: relative;
            display: inline-table;
            background: blue;
            animation: float3 15s infinite ease-in-out;
            width: 200px;
            height: 200px;
            margin: 0 0 0 -100px;
            z-index: -1;
        }

        @keyframes float1 {
            0%   { transform: translate(0px, 0px); }
            50%  { transform: translate(60px, 60px); }
            100% { transform: translate(0px, 0px); }
        }

        @keyframes float2 {
            0%   { transform: translate(10px, 10px); }
            50%  { transform: translate(-60px, 75px); }
            100% { transform: translate(10px, 10px); }
        }

        @keyframes float3 {
            0%   { transform: translate(-10px, -10px); }
            50%  { transform: translate(20px, -15px); }
            100% { transform: translate(-10px, -10px); }
        }