@font-face {font-family: "Mont-Bold"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype");}
@font-face {font-family: "Mont-Regular"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype");}
@font-face {font-family: "Mont-Medium"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype");}
@font-face {font-family: "Mont-Semi-Bold"; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");}
@font-face {font-family: "Mont-light"; src: url("../fonts/Montserrat-light.ttf") format("truetype");}
@font-face {font-family: "Mont-thin"; src: url("../fonts/Montserrat-Thin.ttf") format("truetype");}
@font-face {font-family: "Poppins-Medium"; src: url("../fonts/Poppins-Medium.ttf") format("truetype");}

body{width: 100%;display: flex; flex-direction: column; background: #0F0F0F;align-items: center; overflow-x: hidden;}
*{margin: 0; padding: 0;}
a { text-decoration: none; } 
button:hover{background: #E65200;cursor: pointer;}
.open-bet-info-btn:hover{background: transparent; border: 1px solid #E65200; cursor: pointer;}
.total-div-content.promo img:hover{cursor: pointer;}

header{
    width: 60%;
    /* border: 1px solid red; */
    height: fit-content;
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    min-width: 1160px;
    z-index: 1000;
    /* border: 1px solid red; */
}

.burger{
    display: none;
    display: flex;
    height: fit-content;
    flex-direction: column;
    align-items: end;
    width: fit-content;
    gap: 10px;
    /* background: red; */
    margin-left: auto;
    display: none;
}

.burger-big{
    width: 53px;
    height: 4px;
    background: white;
    border-radius: 20px;
}

.burger-small{
    width: 38px;
    height: 4px;
    background: white;
    border-radius: 20px;
}

.header-logo{
    width: 6%;
    aspect-ratio: 77/86;
}

.header-logo-text{
    width: fit-content;
    font-family: "Mont-Light";
    font-size: 16px;
    color: white;
    margin-left: 3%;
    display: none;
}

.nav-menu{
    width: 60%;
    aspect-ratio: 697/50;
    background: linear-gradient(-45deg, #000000 10%, rgba(96, 96, 96, 0.21) 100%);
    border-radius: 318px;
    border: 1px solid rgba(113, 113, 113, 0.5);
    margin-left: auto;
    display: flex; 
    align-items: center;
    justify-content: center;
    gap: 4%;
}

.nav-btn{
    width: fit-content;
    font-family: "Mont-Regular";
    font-size: 16px;
    text-decoration: none;
    color: white;
    /* border: 1px solid red; */
    padding: 1% 3%;
    border-radius: 20px;
    background: transparent;
    transition: color 0.5s ease, background 10s ease;
}

.nav-btn.active, .nav-btn:hover{
    background: linear-gradient(135deg, #FF5D04 0%, #FF9E68 100%);
    color: black;
}

.section-1{
    width: 100%;
    aspect-ratio: 1920/456;
    /* border: 1px solid red; */
    position: relative;
    overflow: hidden;
    min-height: 324px;
    display: flex;
    justify-content: center;
}

.header-field{
    width: 1920px;
    aspect-ratio: 1920/1439;
    min-height: 324px;
    position: absolute;
    bottom: 0;
    left: 50vw;
    transform: translateX(-50%);
    display: flex;
}

.header-overlay{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(6, 7, 9, 1) 0%, rgba(0, 0, 0, 0) 100%);
    display: none;
}

.header-adv{
    width: 48%;
    aspect-ratio: 500/227;
    border-radius: 113px 0 0 113px;
    position: absolute;
    background: #484848;
    bottom: 0;
    right: 0;
    display: none;
}

.header-big-bear{
    position: absolute;
    width: 35%;
    aspect-ratio: 664/637;
    right: 0;
    top: 30%;
    /* border: 1px solid red; */
    min-width: 472px;
}

.header-text{
    width: 60%;
    /* border: 1px solid orange; */
    position: relative;
    height: fit-content;
    margin-top: auto;
    color: white;
    font-family: "Mont-Bold";
    font-size: clamp(37px, 2.5vw + 1px, 52px);
    min-width: 824px;
    margin-bottom: 3%;
}

.mobile-adv{
    width: 100%;
    aspect-ratio: 774/167;
    background: #484848;
    min-width: 310px;
    display: none;
}

.section-2{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.main-content{
    width: 60%;
    min-width: 824px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid blue; */
    gap: 5px;
}

.advertisement-div{
    width: 16%;
    /* border: 1px solid green;  */
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.big-advertisement-div{
    width: 100%;
    aspect-ratio: 324/714;
    background: #484848;
    border-radius: 13px;
}

.small-advertisement-div{
    width: 100%;
    aspect-ratio: 324/320;
    background: #484848;
    border-radius: 13px;
}

.bet-diller-div{
    width: 100%;
    aspect-ratio: 1160/121;
    display: grid;
    grid-template-columns: 12% 8% 15% 17% 8% 17% 10%;
    justify-content: center;
    align-items: center;
    /* background: rgba(33, 33, 33, 1); */
    background: rgba(33, 33, 33, 1);
    border-radius: 12px;
    position: relative;
    z-index: 10;
    justify-content: center;
    gap: clamp(10px, calc(1.8vw - 8px), 20px);
}

.razdel-line{
    height: 100%;
    display: none;
    border:1px solid #BABABA;
}

.bet-logo{
    width: 100%;
    aspect-ratio: 138/32;
}

.raiting-bet-div{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 5px;

}

.raiting-bet-div img{
    width: 25%;
    aspect-ratio: 24/21;
}

.bonus-bet-div{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 5px;
}

.bonus-bet-div img{
    width: 33%;
    aspect-ratio: 1/1;
}

.depozit-bet-div{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 5px;
}

.depozit-bet-div img{
    width: 16%;
    aspect-ratio: 1/1;
}
.message-bet-div{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 5px;
}

.message-bet-div img{
    width: 30%;
    aspect-ratio: 24/23;
}

.start-bet-game{
    width: 100%;
    aspect-ratio: 194/55;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 12px 36px 36px 12px;
    background: #FF5D04;
    color: white;
    font-family: "Mont-Bold";
    font-size: clamp(15px, calc(1.25vw + 5px), 21px);
    font-size: 21px;
}

.open-bet-info{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 5px;
}

.open-bet-info-btn{
    width: 36%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #FF5D04;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.open-bet-info-btn img{
    width: 29%;
    aspect-ratio: 8/13;
}

.article{
    width: 60%;
    min-width: 824px;
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 60px;
}

.ball-article{
    width: 100%;
    aspect-ratio: 1920/600;
    position: relative;
    overflow: hidden;
    /* background: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}



.ball-article-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 3;
}

.ball-article-img{
    width: 1920px;
    aspect-ratio: 1920/600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}

.ball-article-content{
    width: 60%;
    display: flex;
    flex-direction: column;
    z-index: 3;
    gap: 20px;
    min-width: 824px;
}

.orange-line{
    width: 60%;
    border-bottom: 1px solid rgba(255, 93, 4, 0.5);
    margin-top: 60px;
    min-width: 824px;
}

.article-grid{
    width: 60%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
    margin-top: 60px;
    min-width: 824px;
}

.article-grid:hover{cursor: pointer;}

.article-grid.mobile{
    grid-template-columns: repeat(2, 1fr);
    display: none;
}

.article-grid-item{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.article-grid-item img{
    width: 100%;
    aspect-ratio: 360/233;
}

.big-slaider-advertisement{
    width: 60%;
    aspect-ratio: 1160/324;
    background: #484848;
    border-radius: 13px;
    position: relative;
    margin-top: 32px;
    min-width: 824px;
    display: none;
}

.advertisement-point-div{
    display: flex;
    gap: 5px;
    position: absolute;
    bottom: 0;
}


.all-bet-div{
    width: 100%;
}

.bet-info-div{
    width: 100%;
    background: #2C2C2C;
    margin-top: -2%;
    border-radius: 0 0 8px 8px;
    position: relative;
    z-index: 9;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.9s ease;
    margin-bottom: 3vh;
    /* border: 1px solid red; */
}

.info-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 36% 22% 22%;
    gap: 5%;
    justify-content: center;
    padding-top: 5%;
}

.main-info{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* gap: 10px; */
}

.info-string{
    border-bottom: 1px solid rgba(152, 152, 154, 1);
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding-bottom: 5px;
}

.info-data{
    margin-left: auto;
    color: white;
    font-family: "Mont-Semi-Bold";
    font-size: clamp(11px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
}

.info-data img{
    width: 100%;
}

.main-info-yes, .main-info-no{
    display: flex;
    flex-direction: column;
    gap: 5%;
}

.main-info-text{
    display: flex;
    align-items: center;
}

.main-info-text-big{
    margin-left: 10px;
    color: white;
    font-family: "Mont-Bold";
    font-size: clamp(15px, calc(1.25vw + 5px), 22px);
    /* font-size: 22px; */
}

.info-grid-string{
    width: 90%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 5%;
    padding-bottom: 10px;
    /* border: 1px solid red; */
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
}

.info-grid-string-div{
    display: flex;
    align-items: center;
}

.mark-bar{
    width: 70%;
    aspect-ratio: 742/6;
    border-radius: 24px;
    background: #5B5B5B;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    margin-left: auto;
}

.mark{
    height: 100%;
    background: #FF5D04;

}

.mark-text{
    margin-left: 3%;
}

.bet-info-div.open {
  max-height: 1200px; /* выбрать значение с запасом */
}

.open-bet-info-btn img {
  transition: transform 0.3s ease;
}

.open-bet-info-btn.rotated img {
  transform: rotate(180deg);
}

.ball-article-content-name{
    color: white;
    font-family: "Mont-Light";
    /* font-size: clamp(18px, calc(1.25vw + 5px), 32px); */
    font-size: 22px;
}

.ball-article-content-text{
    color: white;
    font-family: "Mont-Light";
    font-size: 17px;
    /* font-size: 26px; */
}

.article-grid-item-name{
    color: white;
    font-family: "Mont-Semi-Bold";
    font-size: clamp(15px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
}

.article-grid-item-theme{
    font-family: "Mont-thin";
    color: white;
    font-size: clamp(15px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
}

.article-grid-item-btn{
    width: 80%;
    aspect-ratio: 286/61;
    border: none;
    background: rgba(255, 93, 4, 1);
    border-radius: 10px 30px 30px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: "Mont-Regular";
    font-size: clamp(11px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
}

.article-name{
    color: white;
    font-family: "Mont-Bold";
    font-size: 22px;
}

.article-text{
    color: white;
    font-family: "Mont-Light";
    font-size: 17px;
    /* font-size: 26px; */
}

.raiting-bet-div-name{
    color: white;
    font-family: "Mont-Regular";
    font-size: clamp(10px, calc(1.25vw + 5px), 14px);
    /* font-size: 14px; */
}

.raiting-bet-div-text{
    color: white;
    font-family: "Mont-Bold";
    font-size: clamp(10px, calc(1.25vw + 5px), 14px);
    /* font-size: 14px; */
}

.low-text{
    color: rgba(152, 152, 154, 1);
    font-family: "Mont-Regular";
    font-size: clamp(11px, calc(1.25vw + 5px), 16px);
    /* font-size: 16px; */
}


.plus-minus-div{
    width: 90%;
    border-radius: 24px;
    background: #464646;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 30px 0;
    margin-top: 75px;
    /* margin-bottom: 35px; */
}

.plus-div{
    display: flex;
    
    /* border: 1px solid red; */
    width: 45%;
}

.plus-div.content{
    flex: 1;
    /* background: orange; */
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    gap: 15px;
}

.plus-div.string{
    width: 100%;
    display: flex;

}

.plus-div.point{
    color: white;
    font-family: "Mont-Regular";
    /* font-size: clamp(15px, 1.6vw + 1px, 22px); */
    width: fit-content;
    
}

.plus-div.name{
    width: fit-content;
    color: white;
    font-family: "Mont-Bold";
    font-size: clamp(15px, 1.6vw + 1px, 22px);
    /* font-size: 22px; */
    margin-left: 0px;
}

.plus-div.text{
    flex: 1;
    color: white;
    font-family: "Mont-Regular";
    font-size: clamp(11px, 1.2vw + 0.5px, 16px);
    margin-left: 10px;
    
}

.plus-div.line{
    width: 0px;
    border: 1px solid #BABABA;
}

.total-div{
    width: 90%;
    height: fit-content;
    margin: 0 auto;
    /* border: 1px solid red; */
    /* margin-bottom: 35px; */
    display: flex;
    justify-content: center;
    /* border: 1px solid red; */
}

.total-div-content{
    /* border: 1px solid green; */
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.total-div-content.big-text{
    color: white;
    font-family: "Mont-Bold";
    font-size: clamp(17px, calc(1.25vw + 5px), 24px);
    gap: 10%;
    display: flex;
    /* border: 1px solid red; */
    width: fit-content;
}

.total-div-content.big-text img{
    width: 15%;
    aspect-ratio: 1/1;
}

.total-div-content.small-text{
    color: white;
    font-family: "Mont-Regular";
    font-size: clamp(11px, calc(1.25vw + 5px), 16px);
    display: flex;
}

.big-text-volume{
    font-family: "Mont-Bold";
    
}

.total-div-content-line{
    height: 100px;
    border: 1px solid #BABABA;
}

.total-div-app{
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid green; */
    gap: 4.5vw;
}

.total-div-app.up{
    flex: 1;
    display: flex;
    justify-content: center;
}

.total-div-app.down{
    width: fit-content;

}

.total-div-content.promo{
    flex-direction: column;
    position: relative;
    text-align: left;
    align-items: start;
    color: white;
    font-size: clamp(22px, calc(1.25vw + 5px), 32px);
}

.total-div-content.promo img{
    position: absolute;
    top: 0;
    right: 0;
}

.promo-name{
    font-family: "Mont-Regular";
}

.promo-text{
    font-family: "Mont-Bold";
}

.hide-menu{
    width: 60%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: start;
    color: white;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.hide-menu.show{
    transform: translateX(0%);
}

.close-menu-btn{
    width: fit-content;
    height: fit-content;
    /* aspect-ratio: 1/1; */
    margin-left: auto;
    margin-right: 5%;
    color: white;
    background: transparent;
    border: none;
    font-size: 5vw;
}

.menu-text{
    margin-left: 10%;
    margin-top: 15%;
    margin-bottom: 10%;
    font-family: "Mont-Bold";
    font-size: 10vw;
}

.hide-menu a{
    margin-left: 10%;
    color: white;
    font-family: "Mont-Medium";
    font-size: 5vw;
    margin-bottom: 5%;
}




footer{
    margin-top: 60px;
    width: 100%;
    display: flex;
    /* height: 400px; */
    justify-content: center;
}

.footer-div{
    /* border: 1px solid green; */
    width: 60%;
    min-width: 1160px;
    display: flex;
    flex-direction: column;
}

.footer-menu {
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    padding-bottom: 31px;
}

.footer-menu-row {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.footer-menu a {
    color: rgba(239, 239, 239, 1);
    font-size: 15px;
    font-family: "Mont-Regular";
    text-decoration: none;
}

.footer-info {
    display: grid;
    grid-template-columns: 1fr 10% 1fr;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: 125px;
    /* border: 1px solid red; */
    margin-top: 31px;
    margin-bottom: 31px;
}

.footer-info-content{
    /* border: 1px solid orange; */
    position: absolute;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-family: "Mont-Regular";
    color: white;
    height: fit-content;
}
.footer-info-mobile{
    display: none;
}

.footer-info-content.start{left: 0;opacity: 0.75;}
.footer-info-content.center{left: 50%;transform: translateX(-50%);width: 9%;}
.footer-info-content.end{right: 0;}

@media (max-width: 1440px){
    header{width: 80%;min-width: 824px;}
    .nav-btn{font-size: clamp(11px, 1.0vw + 0.01px, 16px);}
    .header-logo-text{font-size: clamp(11px, 1.0vw + 0.01px, 16px);}

    .advertisement-div{display: none;}
    .big-slaider-advertisement{display: flex;}
    .ball-article-img{width: 100%; height: 100%;}
    .header-overlay{display: flex;}

    .footer-div{width: 80%;min-width: 824px;}
    .footer-info{font-size: clamp(9px, 1.2vw + 0.5px, 14px);}
    .footer-menu{font-size: clamp(11px, 1vw + 3px, 15px);}
}

@media (max-width: 1050px){
    .header-adv{display: flex;}
    .header-big-bear{transform: translateX(10%);}
}

@media (max-width: 900px){
    header{margin-top: 30px; min-width: 320px;}
    .header-logo{width: 21%;}
    .header-logo-text{display: none;}
    .nav-menu{display: none;}
    .burger{display: flex;}
    .header-adv{display: none;}
    .header-field{width: 100%; height: auto;}
    .header-big-bear{display: none;}
    .header-text{width: 80%; min-width: 310px;}

    .main-content{width: 80%; min-width: 310px;}
    .info-grid {grid-template-columns: 1fr 1fr;width: 80%;}
    .main-info {grid-column: 1 / -1;}
    .main-info-yes {grid-column: 1;}
    .main-info-no {grid-column: 2;}
    .bet-info-div{display: flex;flex-direction: column;align-items: center;}
    .info-grid-string{width: 80%;}
    .mark-bar{width: 51%;}
    .message-bet-div{display: none;}
    .bet-diller-div{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
    .article-grid-item-btn{background: rgba(255, 93, 4, 1); width: 90%; font-size: clamp(11px, calc(-2.1vw + 32px), 16px);}

    .big-slaider-advertisement{width: 80%; border-radius: 0%; min-width: 310px;}
    .mobile-adv{display: flex;}
    .article{width: 80%; min-width: 310px;}
    .big-slaider-advertisement{display: none;}
    .ball-article{width: 100%; min-height: 427px; aspect-ratio: 775/427;}
    .ball-article-img{width: 1920px;aspect-ratio: 1365/426;position: absolute;top: 50%;left: 50%;transform: translate(-55%,-50%);}
    .ball-article-content{width: 80%; min-width: 310px;}
    .orange-line{display: none;}
    .article-grid{display: none;}
    .article-grid.mobile{display: grid; min-width: 310px; width: 80%;}
    .plus-minus-div{width: 100%;border-radius: 0%; flex-direction: column;}
    .plus-div{ width: 100%; flex-direction: column;}
    .plus-div.string{flex-direction: row;}
    .plus-div.point{margin-left: 0px;}
    .plus-div.line{width: 85%; margin-left: auto; margin-right: auto;}
    .plus-div{width: 85%; margin-left: auto; margin-right: auto;}
    .plus-div.content{gap: 2px;}
    .total-div{flex-direction: column;}
    /* .total-div-app.down{flex-direction: column;} */
    .total-div-content-line{display: none;}
    .total-div-app.up{padding-bottom: 30px; padding-top: 30px;}
    .total-div-app.down{width: 100%; justify-content: end; padding-top: 30px; padding-bottom: 30px; border-top: 1px solid rgba(255, 93, 4, 0.5); height: fit-content;}
    .razdel-line{display: flex; height: 70px;}
    .total-div-content.big-text{width: 50%; gap: 10px;}
    
    .section-1{min-height: 225px; aspect-ratio: 768/351;}
    
    
    
    .footer-div{min-width: 640px;}
    .footer-menu{flex-direction: column; font-size: 30px; margin-top: 28px;}
    footer{background: #1A1A1A;}
    .footer-info{display: none;}
    .footer-info-mobile{display: flex;height: fit-content;width: 100%;align-items: center;margin-bottom: 100px;margin-top: 21px;gap: 30px;}
    .footer-info-content-img{width: 142px;aspect-ratio: 142/159;}
    .footer-info-content-rekv{flex: 1;display: flex;flex-direction: column;justify-content: end;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";margin-left: 20px;}
    .footer-info-content-prav{width: 35%;display: flex;flex-direction: column;justify-content: end;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";margin-left: 30px;}
    .footer-info-content-prav span{width: fit-content;}
    .bonus-bet-div{display: none;}
    .bet-diller-div{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); width: 90;}
    footer{background: #1A1A1A; min-width: 310px;}
    .footer-menu{min-width: 310px; width: 100%; font-size: 30px; margin-top: 28px;}
    .footer-menu-row{width: 100%; gap: 30px;}
    .footer-menu-row a {font-size: 25px;}
    .footer-div{min-width: 310px;}
    .footer-info{min-width: 310px; display: none;}
    .footer-menu-row.down{flex-direction: column; align-items: center; gap: 20px;}
    .footer-info-mobile{display: flex;height: fit-content;width: 100%;align-items: center;flex-direction: column;margin-bottom: 100px;margin-top: 21px;gap: 30px;}
    .footer-info-content-img{width: 142px;aspect-ratio: 142/159;}
    .footer-info-content-rekv{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";}
    .footer-info-content-prav{width: 100%;display: flex;flex-direction: column;justify-content: center;height: 100%;color: white;font-size: 15px;font-family: "Mont-Regular";text-align: center;align-items: center;}
    .footer-info-content-prav span{width: fit-content;}
    
}

@media (max-width: 1000px){
    .depozit-bet-div{display: none;}
    .bet-diller-div{grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
    .bet-diller-div{min-height: 82px;}
    
}

@media (max-width: 550px){
    .raiting-bet-div{display: none;}
    .bet-diller-div{grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
    .article-grid-item-btn{font-size: clamp(16px, 1.27vw + 11px, 20px);}
    .ball-article-img{width: 1365px; height: 426px;}
}

@media (max-width: 500px){
    .article-grid.mobile{display: grid; min-width: 310px; grid-template-columns: repeat(1, 1fr);}
    .info-grid {grid-template-columns: 1fr; width: 90%; gap: 20px;}
    .main-info {grid-column: 1;}
    .main-info-yes {grid-column: 1;}
    .main-info-no {grid-column: 1;}
    .info-grid-string{margin-top: 40px;}
    .article-grid-item-btn{width: 100%;}
    .header-text{font-size: clamp(24px, 6.4vw, 32px);}
    .info-grid-string{width: 90%;}
    
}