@import url("header.css");
@import url("fonts.css");


.main {
    background: var(--light-gray-bg);
    padding-top: 204px;
    padding-bottom: 163px;
}

.content-btn {
    background: #FFD867 0% 0% no-repeat padding-box;
    border: 1px solid #000000;
    border-radius: 6px;
    font: normal normal bold 13px/17px Noto Sans Georgian;
    padding: 10px 32px;
}

.content-btn__icon {
    margin-left: 10px;
}

.yellow-btn:hover {
    background: #FFD867 0% 0% no-repeat padding-box;
    border: 1px solid #000000;
}

.landing-welcome {
    font-size: 50px;
}

.landing-appname {
    font-size: 70px;
}

.landing-info {
    font-size: 40px;
    color: #000000B3;
}

@media (max-width: 1024px) {

    .main {
        padding-top: 108px;
    }

    .landing-welcome {
        font-size: 36px;
    }

    .landing-appname {
        font-size: 50px;
    }

    .landing-info {
        font-size: 24px;
    }
}

@media (max-width: 768px) {

    .main {
        padding-top: 166px;
    }

    .landing-appname {
        font-size: 45px;
    }

    .landing-info {
        font-size: 24px;
        line-height: 40px;
    }

    .floating-image-bottom {
        margin-top: 50px;
        height: 80%;
    }
}

@media (max-width: 320px) {

    .main {
        padding-top: 100px;
    }

    .landing-welcome {
        font-size: 24px;
    }

    .landing-appname {
        font-size: 30px;
        line-height: 70px;
    }

    .landing-info {
        font-size: 18px;
        line-height: 40px;
    }

    .floating-image-bottom {
        margin-top: 70px;
        height: 40%;
    }
}



.floating-image {
    right: 20px;
    top: -60px;
}

.floating-image-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}