@media screen and (max-width: 1681px) {
    .detailText {
        top: 500px !important;
    }

    .number-container:nth-of-type(3)>.details-btn {
        left: 20px !important;
        top: 490px !important;
    }

    .number-container:nth-of-type(1)>.details-btn {
        left: 20px !important;
        /* top: 30px !important; */
        /* top: 600px !important; */
    }

    .number-container:nth-of-type(1)>.detailText {
        left: -10px !important;
    }

    .details-btn {
        /* top: 50vh !important; */
        right: 43px !important;
        top: 490px !important;
    }

    .number-image:hover~.details-btn {
        top: 630px !important;
    }

    .col-lg-3 {
        width: 410px;
        height: 660px;
        /* position: relative; */
    }
}

@media screen and (min-height: 950px) {
    @keyframes numberAnimation {
        from {
            top: -92vh;
            opacity: 0.3;
        }

        to {
            top: -25vh;
            opacity: 1;
        }
    }

    .be9logo {
        left: 88vw;
        bottom: 12vh;
    }

    .number-image {
        /* transform: scale(0.9); */
    }

    .number-image:hover~.details-btn {
        top: 64vh;
    }

    .be10logo {
        left: 62vw;
        bottom: 43vh;
    }

    .be11logo {
        left: 65vw;
        bottom: 41vh;
    }

    .detailText {
        top: 49vh;
    }

    .number-container:nth-of-type(1)>.detailText {
        left: 0;
        top: 51vh;
    }

    .details-btn {
        top: 54vh;
        right: 35px;
        /* width: 100%; */
    }

    .number-container:nth-of-type(1)>.details-btn {
        left: -10px;
        right: 0;
    }

    .number-container:nth-of-type(3)>.details-btn {
        left: -10px;
        right: 0;
    }

    .details-btn:hover {
        top: 61.5vh;
    }

    .detailText:hover+.details-btn {
        top: 61.5vh;
    }

    .detailText:hover+.details-btn {
        top: 61.5vh;
    }

    .number-image:hover {
        transform: scale(1);
    }
}

@media screen and (min-height:700px) and (max-height: 900px) {
    @keyframes numberAnimation {
        from {
            top: -92vh;
            opacity: 0.3;
        }

        to {
            top: -15vh;
            opacity: 1;
        }
    }

    .number-container:nth-of-type(1)>.detailText {
        top: 490px !important;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 470px !important;
    }

    .number-container:nth-of-type(3)>.details-btn {
        top: 480px !important;
    }

    .number-image:hover~.details-btn {
        top: 590px !important;
    }
}

@media screen and (min-width:1541px) and (max-width: 1680px) {
    .number-image:hover~.details-btn {
        top: 63vh;
    }

    .detailText {
        top: 460px !important;
    }

    .be11logo {
        bottom: 28vh;
        left: 72vw;
    }

    .be10logo {
        left: 62vw;
        bottom: 28vh;
    }

    .be9logo {
        left: 86vw;
    }

    .number-container:nth-of-type(3) .number-image:hover~.details-btn {
        top: 68vh;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 55vh;
    }

    .number-container>.details-btn {
        top: 54vh;
    }

    @keyframes cloudAnimation {
        from {
            transform: translate(-100vw, -235vh) scale(1);
        }

        to {
            transform: translate(-180vw, -360vh) scale(0.5);
        }
    }

    .cloud-image {
        transform: translate(-100vw, -235vh);
        animation: cloudAnimation 3s ease-in-out forwards;
    }

    /*@keyframes bgAnimation {
        from {
            transform: translate(0vw, -35vh) scale(1.3);
        }

        to {
            transform: translate(0vw, -75vh) scale(1);
        }
    }

    .bg-image {
        transform: translate(0vw, -100vh);
        animation: bgAnimation 3s ease-in-out forwards;
    }*/

    @keyframes logoAnimation {
        from {
            transform: translate(0, 18vh) scale(1);
        }

        to {
            transform: translate(0, 74vh) scale(0.4);
        }
    }

    .number-container:nth-of-type(1)>.detailText {
        left: 0;
        top: 470px !important;
    }

    .number-container:nth-of-type(3)>.detailText {
        left: 0;
    }

    .number-container:nth-of-type(1)>.details-btn {
        left: -10px;
    }

    .number-image:hover {
        transform: scale(1.1);
    }

    .details-btn:hover+.number-image {
        transform: scale(1.1);
    }

    .detailText:hover+.number-image {
        transform: scale(1.1);
    }
}

@media screen and (max-width: 1540px) {
    .number-container {
        padding: 0 20px;
    }

    .number-image {
        max-width: 95%;
        height: auto;
    }

    .detailText {
        font-size: 14px;
        top: 460px !important;
    }

    .number-container:nth-of-type(1)>.detailText {
        left: -0.5vw;
    }

    .details-btn {
        font-size: 12px;
        padding: 8px 16px;
        width: 160px;
        top: 54vh;
    }

    .be9logo {
        width: 130px;
        left: 86vw;
        bottom: 4vh;
    }

    .be10logo {
        width: 130px;
        left: 64vw;
        bottom: 30vh;
    }

    .be11logo {
        width: 130px;
        left: 74vw;
        bottom: 30vh;
    }

    @keyframes cloudAnimation {
        from {
            transform: translate(-100vw, -235vh) scale(1);
        }

        to {
            transform: translate(-180vw, -360vh) scale(0.5);
        }
    }

    .cloud-image {
        transform: translate(-100vw, -235vh);
        animation: cloudAnimation 3s ease-in-out forwards;
    }

    /*@keyframes bgAnimation {
        from {
            transform: translate(0vw, -35vh) scale(1.3);
        }

        to {
            transform: translate(0vw, -103vh) scale(1);
        }
    }

    .bg-image {
        transform: translate(0vw, -100vh);
        animation: bgAnimation 3s ease-in-out forwards;
    }*/

    @keyframes logoAnimation {
        from {
            transform: translate(0, 18vh) scale(1);
        }

        to {
            transform: translate(0, 71vh) scale(0.5);
        }
    }

    .number-container>.details-btn {
        top: 51vh;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 54vh;
    }

    .number-image:hover~.details-btn {
        top: 560px;
    }

    .number-container:nth-of-type(3) .number-image:hover~.details-btn {
        top: 67vh;
    }

    .number-container:nth-of-type(1)>.details-btn {
        left: 1vw;
    }

    .detailText:hover+.details-btn {
        top: 65vh;
    }
}

@media screen and (max-width: 1440px) {
    .number-container {
        padding: 0 20px;
    }

    .number-image {
        max-width: 95%;
        height: auto;
    }

    .detailText {
        font-size: 12px;
        top: 50vh;
    }

    .number-container:nth-of-type(1)>.detailText {
        left: -5px;
    }

    .details-btn {
        font-size: 12px;
        padding: 8px 16px;
        width: 170px;
        top: 54vh;
    }

    .be9logo {
        width: 130px;
        left: 86vw;
        bottom: 7vh;
    }

    .be10logo {
        width: 130px;
        left: 64vw;
        bottom: 30vh;
    }

    .be11logo {
        width: 130px;
        left: 74vw;
        bottom: 30vh;
    }

    @keyframes cloudAnimation {
        from {
            transform: translate(-100vw, -235vh) scale(1);
        }

        to {
            transform: translate(-180vw, -360vh) scale(0.5);
        }
    }

    .cloud-image {
        transform: translate(-100vw, -235vh);
        animation: cloudAnimation 3s ease-in-out forwards;
    }

    /*@keyframes bgAnimation {
        from {
            transform: translate(0vw, -35vh) scale(1.2);
        }

        to {
            transform: translate(0vw, -80vh) scale(1);
        }
    }

    .bg-image {
        transform: translate(0vw, -100vh);
        animation: bgAnimation 3s ease-in-out forwards;
    }*/

    @keyframes logoAnimation {
        from {
            transform: translate(0, 18vh) scale(1);
        }

        to {
            transform: translate(0, 72vh) scale(0.5);
        }
    }

    .number-container>.details-btn {
        top: 52vh;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 55vh;
    }

    .number-container:nth-of-type(1)>.details-btn {
        left: -0.5vw;
    }
}

@media screen and (max-width: 1360px) {
    .number-container {
        padding: 0 15px;
    }

    .number-image {
        max-width: 90%;
        height: auto;
    }

    .detailText {
        font-size: 10px;
        top: 51vh;
        left: 0px;
    }

    .number-container:nth-of-type(1)>.detailText {
        left: 0vw;
    }

    .number-container>.details-btn {
        font-size: 11px;
        padding: 8px 5px;
        width: 140px;
        top: 53vh;
    }

    .be9logo {
        width: 120px;
        left: 86vw;
        bottom: 7vh;
    }

    .be10logo {
        width: 120px;
        left: 62vw;
        bottom: 24vh;
    }

    .be11logo {
        width: 120px;
        left: 72vw;
        bottom: 24vh;
    }

    @keyframes logoAnimation {
        from {
            transform: translate(0, 18vh) scale(1);
        }

        to {
            transform: translate(0, 74vh) scale(0.5);
        }
    }

    .logo-container img {
        max-width: 45%;
    }

    @keyframes cloudAnimation {
        from {
            transform: translate(-100vw, -235vh) scale(1);
        }

        to {
            transform: translate(-180vw, -360vh) scale(0.5);
        }
    }

    .cloud-image {
        transform: translate(-100vw, -235vh);
        animation: cloudAnimation 3s ease-in-out forwards;
    }

    /*@keyframes bgAnimation {
        from {
            transform: translate(0vw, -35vh) scale(1.2);
        }

        to {
            transform: translate(-17vw, -58vh) scale(0.8);
        }
    }

    .bg-image {
        transform: translate(0vw, -100vh);
        animation: bgAnimation 3s ease-in-out forwards;
        width: 130vw;
        height: 210vh;
    }*/

    .number-container:nth-of-type(1)>.details-btn {
        left: -7px;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 54vh;
    }
}

@media screen and (max-width: 1280px) {

    /*.bg-image {
        transform: translate(0vw, -100vh);
        animation: bgAnimation 3s ease-in-out forwards;
        width: 130vw;
        height: 170vh;
    }

    @keyframes bgAnimation {
        from {
            transform: translate(0vw, -35vh) scale(1.2);
        }

        to {
            transform: translate(-17vw, -30vh) scale(0.8);
        }
    }*/
    .number-container:nth-of-type(1)>.detailText {
        left: 0px;
        top: 51vh;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 51vh;
    }

    .logo-container img {
        max-width: 40%;
    }

    @keyframes logoAnimation {
        from {
            transform: translate(0, 18vh) scale(1);
        }

        to {
            transform: translate(0, 75vh) scale(0.5);
        }
    }

    .detailText {
        top: 49vh;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 54vh;
    }

    .be9logo {
        width: 120px;
        left: 85vw;
        bottom: 6vh;
    }

    .number-container:nth-of-type(3)>.details-btn {
        right: 1vw;
    }

    .number-container:nth-of-type(3)>.details-btn {
        left: -17px;
    }

    .be10logo {
        width: 120px;
        left: 62vw;
        bottom: 23vh;
    }

    .be11logo {
        width: 120px;
        left: 72vw;
        bottom: 23vh;
    }
}

@media screen and (max-width: 1024px) {
    body {
        overflow: visible;
        overflow-x: hidden;
        min-height: 1864px;
    }

    .number-image:hover {
        transform: scale(1);
    }

    .number-container:nth-of-type(1)>.details-btn {
        left: 19px;
        top: 51vh;
    }

    .number-container:nth-of-type(1)>.detailText {
        left: 70px;
    }

    .number-container:nth-of-type(3) .number-image:hover~.details-btn {
        top: auto;
    }

    .border-div {
        display: none;
    }

    .logo-container>img {
        animation: none;
        max-width: 70%;
        transform: translate(0, 2vh);
    }

    .d-flex {
        justify-content: flex-start !important;
    }

    .justify-content-center {
        justify-content: flex-start !important;
        flex-direction: column !important;
        transform: translate(0, 2vh);
    }

    .col-lg-3 {
        width: 100%;
    }

    .bg-image {
        animation: none;
        width: 1580px;
        height: auto;
        position: fixed;
        top: 100px;
        right: -80px;
        transition: transform 0.1s ease-out;
        transform: translateY(20px);
    }

    .cloud-image {
        animation: none;
        width: 1790px;
        position: fixed;
        right: -650px;
        top: 180px;
        transition: transform 0.1s ease-out;
        transform: translateY(-180px);
    }

    .number-container {
        top: 100px;
        animation: none;
        opacity: 1;
        height: 470px;
    }

    .detailText {
        top: 360px;
    }

    .number-container>.details-btn {
        width: 170px;
        top: 450px !important;
    }

    .number-container:nth-of-type(3)>.details-btn {
        width: 170px;
        top: 450px !important;
        left: -10px;
    }

    .be9logo-container,
    .be10logo-container,
    .be11logo-container {
        display: none;
    }

    .number-container:nth-of-type(3)>.detailText {
        left: 20px;
    }

    .number-container:nth-of-type(3)>.detailText {
        top: 360px;
    }

    .number-container:nth-of-type(3)>.detailText {
        left: 30px;
    }

    .number-container:nth-of-type(1) {
        margin-left: -30px;
    }

    .details-btn {
        transform: unset !important;
        transition: unset !important;
        margin-top: -50px;
    }

    main {
        z-index: 2;
    }

    .img_popup {
        width: 100% !important;
    }
}


@media screen and (max-width: 500px) {
    .offer-container img {
        max-width: 60%;
    }

    .number-container>.details-btn {
        top: 560px !important;
        /* position: relative; */
    }

    .number-container:nth-of-type(1)>.detailText {
        left: 19px;
        top: 57vh;
        font-size: 10px;
        background: #fff;
        width: 160px;
        width: 40%;
        left: 0 !important;
        padding: 10px;
        right: 0;
        margin: 0 auto;
        color: #00307C;
    }

    .number-container:nth-of-type(3)>.detailText {
        left: 19px;
        top: 57vh;
        font-size: 10px;
        background: #fff;
        width: 160px;
        width: 40%;
        left: 0 !important;
        padding: 10px;
        right: 0;
        margin: 0 auto;
        color: #00307C;
    }

    .number-container:nth-of-type(1) {
        margin-left: 0px;
    }

    .number-container:nth-of-type(1)>.details-btn {
        left: 0;
    }

    .number-container:nth-of-type(3)>.details-btn {
        left: 0;
        top: 560px !important;
    }

    .number-container {
        justify-content: flex-end !important;
    }
}