@font-face {
    font-family: 'Prompt-Regular';
    src: url('../fonts/Prompt/Prompt-Regular.eot');
    src: url('../fonts/Prompt/Prompt-Regular.eot?') format('embedded-opentype'),
        url('../fonts/Prompt/Prompt-Regular.woff') format('woff'),
        url('../fonts/Prompt/Prompt-Regular.ttf') format('ttf');
}

@font-face {
    font-family: 'Prompt-Light';
    src: url('../fonts/Prompt/Prompt-Light.eot');
    src: url('../fonts/Prompt/Prompt-Light.eot?') format('embedded-opentype'),
        url('../fonts/Prompt/Prompt-Light.woff') format('woff'),
        url('../fonts/Prompt/Prompt-Light.ttf') format('ttf');
}

@font-face {
    font-family: 'Prompt-Bold';
    src: url('../fonts/Prompt/Prompt-Bold.eot');
    src: url('../fonts/Prompt/Prompt-Bold.eot?') format('embedded-opentype'),
        url('../fonts/Prompt/Prompt-Bold.woff') format('woff'),
        url('../fonts/Prompt/Prompt-Bold.ttf') format('ttf');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto/Roboto-Regular.eot');
    src: url('../fonts/Roboto/Roboto-Regular.eot?') format('embedded-opentype'),
        url('../fonts/Roboto/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto/Roboto-Regular.ttf') format('ttf');
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto/Roboto-Light.eot');
    src: url('../fonts/Roboto/Roboto-Light.eot?') format('embedded-opentype'),
        url('../fonts/Roboto/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto/Roboto-Light.ttf') format('ttf');
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto/Roboto-Bold.eot');
    src: url('../fonts/Roboto/Roboto-Bold.eot?') format('embedded-opentype'),
        url('../fonts/Roboto/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto/Roboto-Bold.ttf') format('ttf');
}
.text-promotion-banners{
    font-size: clamp(12px, 2vw, 22px) !important;
}
.title-promotion {
    color: #2797FF;
    font-weight: 900 !important;
}
.title-rule-promotion {
    color: #2797FF;
    text-decoration: underline;
    font-weight: 900 !important;

}

.-block-text{
    color: #060E3F;
}
.-block-text .-text {
    color: #060E3F;
}
.warpper-post-index {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    gap: 1vw;
    max-width: 100%;
    width: 100%;
}
@media only screen and (max-width: 820px) {
   .warpper-post-index {
       grid-template-columns:  50% 50%;
    } 
}

.warpper-post-index .card {
    box-sizing: border-box;
    background: transparent;
    max-width: 100%;
    width: 1005;
}
.warpper-post-index .card .card-body{
    padding: 10px;
}

.warpper-post-index .card .card-img-top {
    border: 3px solid #2797FF;
    height:167px !important;
}

.warpper-post-index .card .card-body .card-text {
    font-size: clamp(14px, 2vw, 20px);
    font-weight: normal !important;
}

.button-post {
    background: none;
    border: none;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    padding: 6%;
    background: linear-gradient(180deg, #5B9BFC 0%, #0A1F2B 100%);
    border: 2px solid #1698F5;
    box-sizing: border-box;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%), 0px 10px 30px #4a77bc;
    border-radius: 2.2vw;
    font-weight: bold;
    color: white;
    font-size: clamp(6px, 2vw, 20px);
    text-align: left;
}
.button-post img {
    width: 17%;
    height: auto;
    padding: 2%;
}

.icon-down {
    width: 40px !important;
    height: 40px !important;
}
@media only screen and (max-width: 799px){
    .icon-down {
    width: 35px !important;
    height: 35px !important;
}
}
@media only screen and (max-width: 768px){
    .button-post {
    border-radius: 15px;
    }
}
.text-content {
    font-size: clamp(12px, 2.2vw, 20px);
}

.padding-button {
    background: linear-gradient(180deg, #5B9BFC 0%, #0A1F2B 100%);
    border: 2px solid #1698F5;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 10px 30px #4A77BC;
    border-radius: 23.8095px;
    color: white;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 3%;
    padding-right: 3%;
}
.bg-bloger {
    background: #8dc8ffb2;
    padding: 0.5vw;
    border: 4px solid #ffff;
    border-radius: 30px;
    box-shadow: 0 0 3px 5px #b9a2a269;
    max-width: 100%;
    width: 100%;
}