html {
    overflow-x: hidden;
    height: 100%;
    position: relative;
}

body {
    overflow-x: hidden;
    font-family: 'MBF Nanomaton' !important;
    background-image: url("/assets/images/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: relative;
    color: #fff;
}

div#root {
    height: 100%;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #00000078;
}

.landing-page {
    position: relative;
    z-index: 2;
}

a {
    text-decoration: none;
}

h1 {
    font-size: 70px;
    font-family: 'MBF Nanomaton' !important;
}

p {
    font-size: 16px;
}

.image-ratio {
    padding-top: 116%;
}

.image-ratio img {
    object-fit: cover;
    transform: translateY(-5%);
    animation: floater 5s infinite;
    /* transition: ease 0.5s; */
}

.social-icons img {
    transition: all 0.5s;
}

.social-icons img:hover {
    transform: translateY(-4px);
}

.phone-number {
    position: relative;
    color: #fff;
    font-size: 18px;
    transition: all 0.5s;

}

.phone-number::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 1px;
    background: #fff;
    transition: all 0.5s;
}

.phone-number:hover {
    color: #fff;
}

.phone-number:hover::after {
    color: #fff;
    width: 100%;
}

.float-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



@keyframes floater {
    0% {
        transform: translateY(-5%);
        transition: ease 10s;
    }

    50% {
        transform: translateY(5%);
        transition: ease 10s;
    }
}


/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
    h1 {
        font-size: 50px;
    }

    p {
        font-size: 16px;
    }

    .phone-number {
        font-size: 16px;
    }

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

    h1 {
        font-size: 40px;
    }

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    .social-icons img:hover {
        transform: translateY(0);
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .image-ratio {
        padding-top: 65%;
    }

    .image-ratio img {
        object-fit: contain;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    h1 {
        font-size: 25px;
    }

    .logo {
        width: 75px;
        height: 75px;
    }
    .image-ratio {
        padding-top: 40%;
    }
}

/* Animation */

[animate] {
    transition: transform 1s 0.5s, opacity 1s 0.5s;
    opacity: 0;
}

[animate].show {
    opacity: 1;
}

[animate="left"] {
    transform: translateX(-15px);
}

[animate="left"].show {
    transform: translateX(0);
}

[animate="right"] {
    transform: translateX(15px);
}

[animate="right"].show {
    transform: translateX(0);
}

[animate="up"] {
    transform: translateY(-15px);
}

[animate="up"].show {
    transform: translateY(0);
}

[animate="down"] {
    transform: translateY(15px);
}

[animate="down"].show {
    transform: translateY(0);
}

.no-transition-delay {
    transition-delay: 0s;
}