body {

        background-image: url(https://iili.io/HUJbl5X.md.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    div {
        font-family: 'Poppins', sans-serif;
    }

    h1, h4 {
        color: white;
    }

    .nav-logo-title img {
        position: absolute;
        top: 10px;
        left: 20px;

        content: url(https://iili.io/HUJbrqQ.md.png);
        max-width: 60px;
    }

    .nav-logo-title a {
        position: absolute;
        top: 25px;
        left: 90px;

        color: black;
        font-size: 20px;
        text-decoration: none;
    }

    nav ul a {
        color: black;
        font-size: 15px;
        text-decoration: none;
    }

    nav li {
        top: 25px;
        left: 1000px;

        float: right;
        margin-top: 3px;
        margin-right: 20px;
        padding: 10px;
        list-style-type: none;
    }

    .header-texts {
        position: absolute;
        top: 150px;
        left: 10px;

        text-align: right;
        font-weight: 200;
    }

    .header-texts h1 {
        font-size: 55px;
        margin-top: 10px;
        margin-left: 590px;
        font-weight: 100;
    }

    .header-texts h3 {
        color: white;
        font-size: 18px;
        margin-top: -30px;
        margin-left: 590px;
        font-weight: 100;
    }

    .header-texts p {
        position: absolute;
        text-align: left;
        margin-top: 260px;
        margin-left: 95px;
        width: 550px;
        color: rgb(28, 28, 28);
        font-size: 21.5px;
        font-weight: 100;
        line-height: 33px;
    }

    aside h2 {
        color: rgb(28, 28, 28);
    }

    aside ul li a {
        color: rgb(28, 28, 28);
    }

    aside ul {
        list-style-type: none;
    }

    aside li {
        float: right;
        margin-top: 3px;
        margin-left: 50px;
        padding: 20px;
        list-style-type: none;
    }

    aside ul:nth-last-of-type(1) li:nth-of-type(1) {
        position: absolute;
        top: 810px;
        left: 750px;

        animation-name: a15;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a15 {
        50% {top: 860px;}
        100% {top: 810px;}
    }

    aside ul:nth-last-of-type(1) li:nth-of-type(2) {
        position: absolute;
        top: 885px;
        left: 890px;

        animation-name: a14;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a14 {
        50% {left: 840px;}
        100% {left: 890px;}
    }

    aside ul:nth-last-of-type(1) li:nth-of-type(3) {
        position: absolute;
        top: 975px;
        left: 820px;

        animation-name: a13;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a13 {
        50% {top: 925px;}
        50% {left: 790px;}
        100% {top: 975px;}
        100% {left: 820px;}
    }

    aside ul:nth-last-of-type(1) li:nth-of-type(4) {
        position: absolute;
        top: 975px;
        left: 670px;

        animation-name: a12;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a12 {
        50% {top: 925px;}
        50% {left: 700px;}
        100% {top: 975px;}
        100% {left: 670px;}
    }

    aside h2:nth-last-of-type(1) {
        position: absolute;
        top: 885px;
        left: 650px;
        font-size: 18px;

        animation-name: a11;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a11 {
        50% {left: 700px;}
        100% {left: 650px;}
    }

    aside h2:nth-last-of-type(2) {
        position: absolute;
        top: 1155px;
        left: 800px;
        font-size: 18px;

        animation-name: a21;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a21 {
        50% {left: 850px;}
        100% {left: 800px;}
    }

    aside ul:nth-last-of-type(2) li:nth-of-type(1) {
        position: absolute;
        top: 1080px;
        left: 890px;

        animation-name: a22;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a22 {
        50% {top: 1130px;}
        100% {top: 1080px;}
    }

    aside ul:nth-last-of-type(2) li:nth-of-type(2) {
        position: absolute;
        top: 1155px;
        left: 1050px;

        animation-name: a23;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a23 {
        50% {left: 1000px;}
        100% {left: 1050px;}
    }

    aside ul:nth-last-of-type(2) li:nth-of-type(3) {
        position: absolute;
        top: 1245px;
        left: 970px;

        animation-name: a24;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a24 {
        50% {top: 1195px;}
        50% {left: 940px;}
        100% {top: 1245px;}
        100% {left: 970px;}
    }

    aside ul:nth-last-of-type(2) li:nth-of-type(4) {
        position: absolute;
        top: 1245px;
        left: 820px;

        animation-name: a25;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes a25 {
        50% {top: 1195px;}
        50% {left: 850px;}
        100% {top: 1245px;}
        100% {left: 820px;}
    }

    .content-first {
        position: relative;
        top: 1250px;
        left: 250px;

        background-image: url(https://iili.io/HUJbQmg.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 300px;
        height: 300px;

        animation-name: bubble1;
        animation-duration: 15s;
        animation-iteration-count: infinite;
    }

    @keyframes bubble1 {
        20% {top: 1200px;}
        20% {left: 230px;}
        40% {top: 1280px;}
        40% {left: 350px;}
        60% {top: 1300px;}
        60% {left: 150px;}
        80% {top: 1230px;}
        80% {left: 295px;}
        100% {top: 1250px;}
        100% {left: 250px;}
    }

    .content-first h2 {
        position: absolute;
        top: 60px;
        left: 50px;

        color: white;
        font-size: 40px;
        width: 200px;
        text-align: center;
        font-weight: 100;
        opacity: 1;
    }

    .content-first p:nth-last-of-type(1) {
        position: absolute;
        top: 140px;
        left: -10px;

        color: black;
        font-size: 11px;
        text-align: center;
        opacity: 0;
    }

    .content-first p:nth-last-of-type(2) {
        position: absolute;
        top: 10px;
        left: -10px;

        color: black;
        font-size: 11px;
        text-align: center;
        opacity: 0;
    }

    .content-first:hover {
        background-image: none;
        background-color: white;
        border-radius: 20px;
        padding: 10px;
        width: 320px;
        height: 290px;
        box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        transition: 0.3s;
    }

    .content-first:hover h2 {
        opacity: 0;
    }

    .content-first:hover p {
        opacity: 1;
        margin: 20px;
        margin-left: 30px;
    }

    .content-second {
        position: relative;
        top: 1250px;
        left: 650px;

        background-image: url(https://iili.io/HUJbQmg.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 300px;
        height: 300px;

        animation-name: bubble2;
        animation-duration: 15s;
        animation-iteration-count: infinite;
    }

    @keyframes bubble2 {
        20% {top: 1300px;}
        20% {left: 685px;}
        40% {top: 1100px;}
        40% {left: 675px;}
        60% {top: 1250px;}
        60% {left: 660px;}
        80% {top: 1200px;}
        80% {left: 575px;}
        100% {top: 1250px;}
        100% {left: 650px;}
    }

    .content-second h2 {
        position: absolute;
        top: 95px;
        left: 45px;

        color: white;
        font-size: 40px;
        text-align: center;
        font-weight: 100;
        opacity: 1;
    }

    .content-second h4 {
        color: black;
        font-size: 14px;
        text-align: center;

        opacity: 0;
    }

    .content-second p {
        color: black;
        font-size: 11px;
        text-align: center;

        opacity: 0;
    }

    .content-second:hover {
        background-image: none;
        background-color: white;
        border-radius: 20px;
        padding: 10px;
        width: 550px;
        height: 300px;
        box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        transition: 0.3s;
    }

    .content-second:hover h2 {
        opacity: 0;
    }

    .content-second:hover p {
        opacity: 1;
        margin: 20px;
        margin-left: 20px;
    }

    .content-second:hover h4 {
        opacity: 1;
    }

    div .articles {
        position: absolute;
        top: 1980px;
        left: -30px;

        background-image: url(https://i.postimg.cc/BvxLmZF8/Frame-12.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 600px;
        width: 1280px;
    }

    .article h3 p {
        color: black;
    }

    .article:nth-last-of-type(1) h3 {
        position: absolute;
        top: 228px;
        left: 696px;

        font-size: 15px;
        text-align: center;
        width: 200px;
    }

    .article:nth-last-of-type(1) p {
        position: absolute;
        top: 289px;
        left: 696px;

        font-size: 10px;
        width: 200px;
        text-align: center;
    }

    .article:nth-last-of-type(2) h3 {
        position: absolute;
        top: 80px;
        left: 112px;

        font-size: 15px;
        text-align: center;
        width: 180px;
    }

    .article:nth-last-of-type(2) p {
        position: absolute;
        top: 133px;
        left: 112px;

        font-size: 10px;
        width: 185px;
        text-align: center;
    }

    .article:nth-last-of-type(3) h3 {
        position: absolute;
        top: 135px;
        left: 1022px;

        font-size: 15px;
        text-align: center;
        width: 200px;
    }

    .article:nth-last-of-type(3) p {
        position: absolute;
        top: 185px;
        left: 1022px;

        font-size: 10px;
        width: 200px;
        text-align: center;
    }

    .article-long h3 {
        position: absolute;
        top: 285px;
        left: 463px;

        font-size: 16px;
        text-align: center;
        width: 200px;
    }

    .article-long p {
        position: absolute;
        top: 370px;
        left: 458px;

        font-size: 11px;
        width: 225px;
        text-align: center;
    }

    .article:nth-last-of-type(1) a {
        position: absolute;
        top: 410px;
        left: 770px;

        color: black;
        font-size: 11px;
    }

    .article:nth-last-of-type(2) a {
        position: absolute;
        top: 260px;
        left: 182px;

        color: black;
        font-size: 10px;
    }

    .article:nth-last-of-type(3) a {
        position: absolute;
        top: 290px;
        left: 1095px;

        color: black;
        font-size: 12px;
    }

    .article:nth-last-of-type(1) img {
        position: absolute;
        top: 70px;
        left: 260px;

        content: url(https://i.ibb.co/fVRBJ1P/6585920-removebg-preview.png);
        max-width: 115px;
        transform: rotate(20deg);
    }

    .article:nth-last-of-type(2) img {
        position: absolute;
        top: 230px;
        left: 645px;

        content: url(https://i.ibb.co/QrX09Rb/6586010-removebg-preview.png);
        max-width: 110px;
    }

    .article:nth-last-of-type(3) img {
        position: absolute;
        top: 120px;
        left: 945px;

        content: url(https://i.ibb.co/2SypXNb/6590503-removebg-preview.png);
        max-width: 100px;
    }

    .row-second td img {
        position: absolute;
        top: 280px;
        left: 368px;

        content: url(https://i.ibb.co/dm0sSkN/6590549-removebg-preview.png);
        max-width: 150px;
    }

    div .creativity {
        position: absolute;
        top: 2580px;

        background-image: url(https://i.postimg.cc/MK2kSWfZ/Frame-14.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 600px;
        width: 1200px;
    }

    .mini-one img{
        position: absolute;
        top: 50px;
        left: 350px;

        content: url(https://iili.io/HUJbQmg.png);
        max-width: 150px;
        opacity: 1;

        animation-name: waveone1;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes waveone1 {
        25% {top: 120px;}
        50% {top: 190px;}
        75% {top: 120px;}
        100% {top: 50px;}
    }

    .mini-one h2 {
        position: absolute;
        top: 92px;
        left: 350px;

        color: white;
        font-size: 18px;
        font-weight: 100;
        width: 150px;
        text-align: center;
        opacity: 1;

        animation-name: waveone2;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes waveone2 {
        25% {top: 165px;}
        50% {top: 235px;}
        75% {top: 165px;}
        100% {top: 92px;}
    }

    .mini-one p {
        position: absolute;
        top: 115px;
        left: 405px;

        color: black;
        text-align: center;
        background-color: white;
        width: 600px;
        border-radius: 20px;
        box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        transition: 0.3s;
        padding: 10px;
        opacity: 0;
        z-index: 1;
    }

    .mini-one:hover h2 {
        opacity: 0;
    }

    .mini-one:hover p {
        opacity: 1;
    }

    .mini-one:hover img{
        opacity: 0;
    }

    .mini-two img{
        position: absolute;
        top: 120px;
        left: 550px;

        content: url(https://iili.io/HUJbQmg.png);
        max-width: 150px;
        opacity: 1;

        animation-name: wavetwo1;
        animation-duration: 8s;
        animation-iteration-count: infinite;   
    }

    @keyframes wavetwo1 {
        25% {top: 190px;}
        50% {top: 120px;}
        75% {top: 50px;}
        100% {top: 120px;}
    }

    .mini-two h2 {
        position: absolute;
        top: 155px;
        left: 560px;

        color: white;
        font-size: 18px;
        font-weight: 100;
        width: 130px;
        text-align: center;
        opacity: 1;

        animation-name: wavetwo2;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes wavetwo2 {
        25% {top: 225px;}
        50% {top: 155px;}
        75% {top: 82px;}
        100% {top: 155px;}
    }

    .mini-two p {
        position: absolute;
        top: 115px;
        left: 405px;

        color: black;
        text-align: center;
        background-color: white;
        width: 600px;
        border-radius: 20px;
        box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        transition: 0.3s;
        padding: 10px;
        opacity: 0;
        z-index: 1;
    }

    .mini-two:hover h2 {
        opacity: 0;
    }

    .mini-two:hover p {
        opacity: 1;
    }

    .mini-two:hover img{
        opacity: 0;
    }

    .mini-three img{
        position: absolute;
        top: 190px;
        left: 750px;

        content: url(https://iili.io/HUJbQmg.png);
        max-width: 150px;
        opacity: 1;

        animation-name: wavethree1;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes wavethree1 {
        25% {top: 120px;}
        50% {top: 50px;}
        75% {top: 120px;}
        100% {top: 190px;}
    }

    .mini-three h2 {
        position: absolute;
        top: 225px;
        left: 760px;

        color: white;
        font-size: 16px;
        font-weight: 100;
        width: 130px;
        text-align: center;
        opacity: 1;

        animation-name: wavethree2;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes wavethree2 {
        25% {top: 155px;}
        50% {top: 82px;}
        75% {top: 155px;}
        100% {top: 225px;}
    }

    .mini-three p {
        position: absolute;
        top: 115px;
        left: 405px;

        color: black;
        text-align: center;
        background-color: white;
        width: 600px;
        border-radius: 20px;
        box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        transition: 0.3s;
        padding: 10px;
        opacity: 0;
        z-index: 1;
    }

    .mini-three:hover h2 {
        opacity: 0;
    }

    .mini-three:hover p {
        opacity: 1;
    }

    .mini-three:hover img{
        opacity: 0;
    }

    .mini-four img{
        position: absolute;
        top: 120px;
        left: 950px;

        content: url(https://iili.io/HUJbQmg.png);
        max-width: 150px;
        opacity: 1;

        animation-name: wavefour1;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes wavefour1 {
        25% {top: 190px;}
        50% {top: 120px;}
        75% {top: 50px;}
        100% {top: 120px;}
    }

    .mini-four h2 {
        position: absolute;
        top: 155px;
        left: 950px;

        color: white;
        font-size: 18px;
        font-weight: 100;
        width: 150px;
        text-align: center;
        opacity: 1;

        animation-name: wavefour2;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @keyframes wavefour2 {
        25% {top: 225px;}
        50% {top: 155px;}
        75% {top: 82px;}
        100% {top: 155px;}
    }

    .mini-four p {
        position: absolute;
        top: 115px;
        left: 405px;

        color: black;
        text-align: center;
        background-color: white;
        width: 600px;
        border-radius: 20px;
        box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        transition: 0.3s;
        padding: 10px;
        opacity: 0;
        z-index: 1;
    }

    .mini-four:hover h2 {
        opacity: 0;
    }

    .mini-four:hover p {
        opacity: 1;
    }

    .mini-four:hover img{
        opacity: 0;
    }

    .footer-credit h3:nth-last-of-type(1) {
        position: absolute;
        top: 3120px;
        left: 1108px;

        font-size: 8px;
    }

    .footer-credit h3:nth-last-of-type(2) {
        position: absolute;
        top: 3135px;
        left: 1024px;

        font-size: 8px;
    }

    .footer-form {
        position: absolute;
        top: 2960px;
        left: 100px;

        font-size: 7px;
    }

    .footer-form p{
        font-size: 8px;
        font-weight: bolder;
    }

    .footer-form input:nth-last-of-type(4) {
        width: 50px;
        height: 5px;
    }

    .footer-form select {
        width: 65px;
        height: 15px;
    }

    .footer-form button {
        margin-top: 8px;
    }

    .footer-logo h3 {
        position: absolute;
        margin-top: 2463px;
        left: 450px;

        font-size: 11px;
    }

    .footer-logo p {
        position: absolute;
        margin-top: 2480px;
        left: 450px;

        font-size: 11px;
    }


    @media (min-width: 481px) and (max-width: 767px) {
        body {
            background-image: url(https://iili.io/HUJDCwG.md.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            width: 481px;
        }
        
        div {
            font-family: 'Poppins', sans-serif;
        }

        .nav-logo-title img {
            position: absolute;
            top: -2px;
            left: 20px;
        
            content: url(https://iili.io/HUJbrqQ.md.png);
            max-width: 30px;
        }
        
        .nav-logo-title a {
            position: absolute;
            top: 8px;
            left: 60px;
        
            color: black;
            font-size: 10px;
            text-decoration: none;
        }
        
        nav ul a {
            color: black;
            font-size: 10px;
            text-decoration: none;
        }
        
        nav li {
            top: 25px;
            left: 1000px;
        
            float: right;
            margin-top: -18px;
            margin-right: 20px;
            padding: 5px;
            list-style-type: none;
        }

        .header-texts {
            text-align: right;
            font-weight: 100;
        }
    
        .header-texts h1 {
            position: absolute;
            top: -80px;
            left: -190px;

            font-size: 23px;
            margin-top: 10px;
            margin-left: 433px;
            font-weight: 100;
            width: 200px;
        }
    
        .header-texts h3 {
            color: white;
            font-size: 12px;
            margin-top: -30px;
            margin-left: 245px;
            width: 200px;
            font-weight: 100;
        }
    
        .header-texts p {
            position: absolute;
            text-align: left;
            margin-top: 58px;
            margin-left: 12px;
            width: 300px;
            color: rgb(28, 28, 28);
            font-size: 12px;
            font-weight: 100;
            line-height: 18px;
        }

        aside h2 {
            color: rgb(28, 28, 28);
        }
    
        aside ul li a {
            color: rgb(28, 28, 28);
            font-size: 10px;
        }
    
        aside ul {
            list-style-type: none;
        }
    
        aside li {
            float: none;
            margin-top: 0px;
            margin-left: 0px;
            padding: 0px;
            list-style-type: circle;
        }

        aside ul:nth-last-of-type(1) li:nth-of-type(1) {
            position: absolute;
            top: 435px;
            left: 407px;
    
            animation-name: a15;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a15 {
            50% {top: 860px;}
            100% {top: 810px;}
        }
    
        aside ul:nth-last-of-type(1) li:nth-of-type(2) {
            position: absolute;
            top: 455px;
            left: 407px;
    
            animation-name: a14;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a14 {
            50% {left: 840px;}
            100% {left: 890px;}
        }
    
        aside ul:nth-last-of-type(1) li:nth-of-type(3) {
            position: absolute;
            top: 475px;
            left: 407px;
    
            animation-name: a13;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a13 {
            50% {top: 925px;}
            50% {left: 790px;}
            100% {top: 975px;}
            100% {left: 820px;}
        }
    
        aside ul:nth-last-of-type(1) li:nth-of-type(4) {
            position: absolute;
            top: 495px;
            left: 407px;
    
            animation-name: a12;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a12 {
            50% {top: 925px;}
            50% {left: 700px;}
            100% {top: 975px;}
            100% {left: 670px;}
        }
    
        aside h2:nth-last-of-type(1) {
            position: absolute;
            top: 410px;
            left: 388px;
            font-size: 11px;
    
            text-align: right;
            animation-name: a11;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a11 {
            50% {left: 700px;}
            100% {left: 650px;}
        }
    
        aside h2:nth-last-of-type(2) {
            position: absolute;
            top: 295px;
            left: 398px;
            font-size: 11px;
    
            text-align: right;
            animation-name: a21;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a21 {
            50% {left: 850px;}
            100% {left: 800px;}
        }
    
        aside ul:nth-last-of-type(2) li:nth-of-type(1) {
            position: absolute;
            top: 315px;
            left: 403px;
    
            animation-name: a22;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a22 {
            50% {top: 1130px;}
            100% {top: 1080px;}
        }
    
        aside ul:nth-last-of-type(2) li:nth-of-type(2) {
            position: absolute;
            top: 335px;
            left: 407px;
    
            animation-name: a23;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a23 {
            50% {left: 1000px;}
            100% {left: 1050px;}
        }
    
        aside ul:nth-last-of-type(2) li:nth-of-type(3) {
            position: absolute;
            top: 355px;
            left: 394px;
    
            animation-name: a24;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a24 {
            50% {top: 1195px;}
            50% {left: 940px;}
            100% {top: 1245px;}
            100% {left: 970px;}
        }
    
        aside ul:nth-last-of-type(2) li:nth-of-type(4) {
            position: absolute;
            top: 375px;
            left: 420px;
    
            animation-name: a25;
            animation-duration: 8s;
            animation-iteration-count: infinite;

            -webkit-animation: none !important;
            -moz-animation: none !important;
            -o-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
        }
    
        @keyframes a25 {
            50% {top: 1195px;}
            50% {left: 850px;}
            100% {top: 1245px;}
            100% {left: 820px;}
        }

        .content-first {
            position: relative;
            top: 500px;
            left: 80px;
    
            background-image: url(https://iili.io/HUJbQmg.png);
            background-size: contain;
            background-repeat: no-repeat;
            width: 100px;
            height: 100px;
    
            animation-name: bubble1;
            animation-duration: 15s;
            animation-iteration-count: infinite;
        }

        @keyframes bubble1 {
            20% {top: 400px;}
            20% {left: 50px;}
            40% {top: 480px;}
            40% {left: 80px;}
            60% {top: 500px;}
            60% {left: 40px;}
            80% {top: 430px;}
            80% {left: 25px;}
            100% {top: 500px;}
            100% {left: 80px;}
        }

        .content-first h2 {
            position: absolute;
            top: 20px;
            left: 10px;
    
            color: white;
            font-size: 14px;
            text-align: center;
            font-weight: 200;
            width: 80px;

            opacity: 1;
        }
    
        .content-first p:nth-last-of-type(1) {
            position: absolute;
            top: 80px;
            left: -10px;
    
            color: black;
            font-size: 8px;
            text-align: center;

            opacity: 0;
        }
    
        .content-first p:nth-last-of-type(2) {
            position: absolute;
            top: -10px;
            left: -10px;
    
            color: black;
            font-size: 8px;
            text-align: center;

            opacity: 0;
        }

        .content-first:hover {
            background-image: none;
            background-color: white;
            border-radius: 20px;
            padding: 10px;
            width: 220px;
            height: 190px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
            transition: 0.3s;
        }
    
        .content-first:hover h2 {
            opacity: 0;
        }
    
        .content-first:hover p {
            opacity: 1;
            margin: 20px;
            margin-left: 30px;
        }

        .content-second {
            position: relative;
            top: 500px;
            left: 270px;
    
            background-image: url(https://iili.io/HUJbQmg.png);
            background-size: contain;
            background-repeat: no-repeat;
            width: 100px;
            height: 100px;
    
            animation-name: bubble2;
            animation-duration: 15s;
            animation-iteration-count: infinite;
        }

        @keyframes bubble2 {
            20% {top: 500px;}
            20% {left: 235px;}
            40% {top: 470px;}
            40% {left: 275px;}
            60% {top: 450px;}
            60% {left: 290px;}
            80% {top: 510px;}
            80% {left: 225px;}
            100% {top: 500px;}
            100% {left: 270px;}
        }
    
        .content-second h2 {
            position: absolute;
            top: 30px;
            left: 10px;
    
            color: white;
            font-size: 14px;
            text-align: center;
            font-weight: 100;
            width: 80px;
            opacity: 1;
        }
    
        .content-second h4 {
            color: black;
            font-size: 8px;
            text-align: center;
            line-height: 8px;
            opacity: 0;
        }
    
        .content-second p {
            color: black;
            font-size: 8px;
            text-align: center;
            line-height: 8px;
            opacity: 0;
        }
    
        .content-second:hover {
            background-image: none;
            background-color: white;
            border-radius: 20px;
            padding: 5px;
            width: 200px;
            height: 380px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
            transition: 0.3s;

            z-index: 1;
        }
    
        .content-second:hover h2 {
            opacity: 0;
        }
    
        .content-second:hover p {
            opacity: 1;
            margin: 20px;
            margin-left: 20px;
        }
    
        .content-second:hover h4 {
            opacity: 1;
        }

        div .articles {
            position: absolute;
            top: 1980px;
            left: -30px;
    
            background-image: none;
            background-size: cover;
            background-repeat: no-repeat;
            height: 600px;
            width: 1280px;
        }
    
        .article h3 p {
            color: black;
        }
    
        .article:nth-last-of-type(1) h3 {
            position: absolute;
            top: -1128px;
            left: 166px;
    
            font-size: 15px;
            text-align: center;
            width: 200px;

            background-color: white;
            border-radius: 20px;
            padding-top: 15px;
            padding: 10px;
            width: 210px;
            height: 180px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        }
    
        .article:nth-last-of-type(1) p {
            position: absolute;
            top: -1059px;
            left: 180px;
    
            font-size: 10px;
            width: 200px;
            text-align: center;
        }
    
        .article:nth-last-of-type(2) h3 {
            position: absolute;
            top: -880px;
            left: 170px;
    
            font-size: 15px;
            text-align: center;
            width: 180px;

            background-color: white;
            border-radius: 20px;
            padding-top: 15px;
            padding: 10px;
            width: 210px;
            height: 185px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        }
    
        .article:nth-last-of-type(2) p {
            position: absolute;
            top: -815px;
            left: 192px;
    
            font-size: 10px;
            width: 185px;
            text-align: center;
        }
    
        .article:nth-last-of-type(3) h3 {
            position: absolute;
            top: -630px;
            left: 172px;
    
            font-size: 15px;
            text-align: center;
            width: 200px;

            background-color: white;
            border-radius: 20px;
            padding-top: 15px;
            padding: 10px;
            width: 210px;
            height: 170px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        }
    
        .article:nth-last-of-type(3) p {
            position: absolute;
            top: -555px;
            left: 185px;
    
            font-size: 10px;
            width: 200px;
            text-align: center;
        }
    
        .article-long h3 {
            position: absolute;
            top: -395px;
            left: 173px;
    
            font-size: 16px;
            text-align: center;
            width: 200px;

            background-color: white;
            border-radius: 20px;
            padding-top: 15px;
            padding: 10px;
            width: 220px;
            height: 230px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
        }
    
        .article-long p {
            position: absolute;
            top: -305px;
            left: 180px;
    
            font-size: 11px;
            width: 225px;
            text-align: center;
        }
    
        .article:nth-last-of-type(1) a {
            position: absolute;
            top: -450px;
            left: 260px;
    
            color: black;
            font-size: 11px;
        }
    
        .article:nth-last-of-type(2) a {
            position: absolute;
            top: -685px;
            left: 260px;
    
            color: black;
            font-size: 11px;
        }
    
        .article:nth-last-of-type(3) a {
            position: absolute;
            top: -940px;
            left: 260px;
    
            color: black;
            font-size: 11px;

            z-index: 1;
        }
    
        .article:nth-last-of-type(1) img {
            position: absolute;
            top: -1140px;
            left: 100px;
    
            content: url(https://i.ibb.co/fVRBJ1P/6585920-removebg-preview.png);
            max-width: 115px;
            transform: rotate(20deg);

            z-index: 1;
        }
    
        .article:nth-last-of-type(2) img {
            position: absolute;
            top: -363px;
            left: 365px;
    
            content: url(https://i.ibb.co/QrX09Rb/6586010-removebg-preview.png);
            max-width: 110px;

            z-index: 1;
        }
    
        .article:nth-last-of-type(3) img {
            position: absolute;
            top: -865px;
            left: 355px;
    
            content: url(https://i.ibb.co/2SypXNb/6590503-removebg-preview.png);
            max-width: 100px;

            z-index: 1;
        }
    
        .row-second td img {
            position: absolute;
            top: -640px;
            left: 88px;
    
            content: url(https://i.ibb.co/dm0sSkN/6590549-removebg-preview.png);
            max-width: 150px;

            z-index: 1;
        }

        div .creativity {
            position: absolute;
            top: 1950px;
            background-image: url(https://iili.io/HUJDAc7.md.jpg);
            background-size: cover;
            background-repeat: no-repeat;

            width: 480px;
            height: 920px;
        }
    
        .mini-one img{
            position: absolute;
            top: 100px;
            left: 240px;
    
            content: url(https://iili.io/HUJbQmg.png);
            max-width: 150px;
            opacity: 1;
    
            animation-name: waveone1;
            animation-duration: 12s;
            animation-iteration-count: infinite;
        }
    
        @keyframes waveone1 {
            25% {left: 170px;}
            50% {left: 100px;}
            75% {left: 170px;}
            100% {left: 240px;}
        }
    
        .mini-one h2 {
            position: absolute;
            top: 142px;
            left: 240px;
    
            color: white;
            font-size: 18px;
            font-weight: 100;
            width: 150px;
            text-align: center;
            opacity: 1;
    
            animation-name: waveone2;
            animation-duration: 12s;
            animation-iteration-count: infinite;
        }
    
        @keyframes waveone2 {
            25% {left: 170px;}
            50% {left: 100px;}
            75% {left: 170px;}
            100% {left: 240px;}
        }
    
        .mini-one p {
            position: absolute;
            top: 115px;
            left: 55px;
    
            font-size: 10px;
            color: black;
            text-align: center;
            background-color: white;
            width: 350px;
            border-radius: 20px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
            transition: 0.3s;
            padding: 10px;
            opacity: 0;
            z-index: 1;
        }
    
        .mini-two img{
            position: absolute;
            top: 255px;
            left: 170px;
    
            content: url(https://iili.io/HUJbQmg.png);
            max-width: 150px;
            opacity: 1;
    
            animation-name: wavetwo1;
            animation-duration: 12s;
            animation-iteration-count: infinite; 
        }
    
        @keyframes wavetwo1 {
            25% {left: 100px;}
            50% {left: 170px;}
            75% {left: 240px;}
            100% {left: 170px;}
        }
    
        .mini-two h2 {
            position: absolute;
            top: 288px;
            left: 180px;
    
            color: white;
            font-size: 18px;
            font-weight: 100;
            width: 130px;
            text-align: center;
            opacity: 1;
    
            animation-name: wavetwo2;
            animation-duration: 12s;
            animation-iteration-count: infinite;
        }
    
        @keyframes wavetwo2 {
            25% {left: 110px;}
            50% {left: 180px;}
            75% {left: 250px;}
            100% {left: 180px;}
        }
    
        .mini-two p {
            position: absolute;
            top: 285px;
            left: 55px;
    
            font-size: 10px;
            color: black;
            text-align: center;
            background-color: white;
            width: 350px;
            border-radius: 20px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
            transition: 0.3s;
            padding: 10px;
            opacity: 0;
            z-index: 1;
        }
    
        .mini-two:hover h2 {
            opacity: 0;
        }
    
        .mini-two:hover p {
            opacity: 1;
        }
    
        .mini-two:hover img{
            opacity: 0;
        }
    
        .mini-three img{
            position: absolute;
            top: 413px;
            left: 100px;
    
            content: url(https://iili.io/HUJbQmg.png);
            max-width: 150px;
            opacity: 1;
    
            animation-name: wavethree1;
            animation-duration: 12s;
            animation-iteration-count: infinite;
        }
    
        @keyframes wavethree1 {
            25% {left: 170px;}
            50% {left: 240px;}
            75% {left: 170px;}
            100% {left: 100px;}
        }
    
        .mini-three h2 {
            position: absolute;
            top: 445px;
            left: 110px;
    
            color: white;
            font-size: 16px;
            font-weight: 100;
            width: 130px;
            text-align: center;
            opacity: 1;
    
            animation-name: wavethree2;
            animation-duration: 12s;
            animation-iteration-count: infinite;
        }
    
        @keyframes wavethree2 {
            25% {left: 180px;}
            50% {left: 250px;}
            75% {left: 180px;}
            100% {left: 110px;}
        }
    
        .mini-three p {
            position: absolute;
            top: 425px;
            left: 55px;
    
            font-size: 10px;
            color: black;
            text-align: center;
            background-color: white;
            width: 350px;
            border-radius: 20px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
            transition: 0.3s;
            padding: 10px;
            opacity: 0;
            z-index: 1;
        }
    
        .mini-three:hover h2 {
            opacity: 0;
        }
    
        .mini-three:hover p {
            opacity: 1;
        }
    
        .mini-three:hover img{
            opacity: 0;
        }
    
        .mini-four img{
            position: absolute;
            top: 570px;
            left: 170px;
    
            content: url(https://iili.io/HUJbQmg.png);
            max-width: 150px;
            opacity: 1;
    
            animation-name: wavefour1;
            animation-duration: 12s;
            animation-iteration-count: infinite;
        }
    
        @keyframes wavefour1 {
            25% {left: 240px;}
            50% {left: 170px;}
            75% {left: 100px;}
            100% {left: 170px;}
        }
    
        .mini-four h2 {
            position: absolute;
            top: 600px;
            left: 170px;
    
            color: white;
            font-size: 18px;
            font-weight: 100;
            width: 150px;
            text-align: center;
            opacity: 1;
    
            animation-name: wavefour2;
            animation-duration: 12s;
            animation-iteration-count: infinite;
        }
    
        @keyframes wavefour2 {
            25% {left: 240px;}
            50% {left: 170px;}
            75% {left: 100px;}
            100% {left: 170px;}
        }
    
        .mini-four p {
            position: absolute;
            top: 585px;
            left: 55px;
    
            font-size: 10px;
            color: black;
            text-align: center;
            background-color: white;
            width: 350px;
            border-radius: 20px;
            box-shadow: 0 19px 36px rgba(0, 0, 0, 0.3), 0 12px 16px rgba(0, 0, 0, 0.22);
            transition: 0.3s;
            padding: 10px;
            opacity: 0;
            z-index: 1;
        }
    
        .mini-four:hover h2 {
            opacity: 0;
        }
    
        .mini-four:hover p {
            opacity: 1;
        }
    
        .mini-four:hover img{
            opacity: 0;
        }

        .footer-credit h3:nth-last-of-type(1) {
            position: absolute;
            top: 2842px;
            left: 25px;
    
            font-size: 6px;
        }
    
        .footer-credit h3:nth-last-of-type(2) {
            position: absolute;
            top: 2853px;
            left: 25px;
    
            font-size: 6px;
        }
    
        .footer-form {
            position: absolute;
            top: 2695px;
            left: 200px;
    
            padding: 0;
            margin: 0;
            font-size: 7px;
        }
    
        .footer-form p{
            font-size: 8px;
            font-weight: bolder;
        }
    
        .footer-form input:nth-last-of-type(4) {
            width: 50px;
            height: 5px;
        }
    
        .footer-form select {
            width: 65px;
            height: 15px;
        }
    
        .footer-form button {
            margin-top: 8px;
        }
    
        .footer-logo h3 {
            position: absolute;
            margin-top: 2593px;
            left: 350px;
    
            font-size: 9px;
        }
    
        .footer-logo p {
            position: absolute;
            margin-top: 2610px;
            left: 300px;
    
            text-align: right;
            font-size: 8px;
        }

        .footer-form button {
            height: 15px;
            font-size: 8px;
        }

        .footer-form lable {
            font-size: 8px;
        }
            
    }