*, *::after, *::before {
    box-sizing: border-box;
}

@font-face {
    font-family: Colo-Pro-Black;
    /* Имя шрифта */
    src: url(fonts/Colo-Pro-Black.otf);
    /* Путь к файлу со шрифтом */
}

@font-face {
    font-family: Colo-Pro;
    /* Имя шрифта */
    src: url(fonts/Colo-Pro.otf);
    /* Путь к файлу со шрифтом */
}

a {
    text-decoration: none;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.container {
    margin: 0;
    width: 490px;
    /*background-color: #FFAB06;*/
}

.header {
    display: flex;
    flex-direction: row;
    background-color: #272727;
}


.header-title {
    color: #FFAB06;
    font-size: 16px;
    font-family: 'Roboto', serif;
    font-weight: 500;
    line-height: 105.4%;
    padding: 14px 86px;
}

.header-lang {
    border: 1px solid #444444;
    width: 47px;
    height: 24px;
    text-align: center;
    margin: 10px 0 11px;
    border-radius: 2px;
    background-color: #444444;

}

.header-lang__title {
    color: #FFFFFF;
    font-family: 'Roboto', serif;
    font-weight: 400;
    font-size: 16px;
}

.main {
    /*text-align: center;*/
    background-color: #FFAB06;
}

.main-wrapper {
    background-image: url(img/bg4.png);
    background-repeat: no-repeat;
    width: 100%;
    text-align: center;
    height: 900px;

}

.main-title {
    color: #FFFFFF;
    font-size: 104px;
    line-height: 105.4%;
    font-family: 'Colo Pro Black';
}

.main-link__img {
    padding-top: 26px;
}

.main-text {
    color: #2C2C2C;
    font-family: 'Roboto', serif;
    font-size: 24px;
    padding-left: 46px;
    padding-right: 46px;
    font-weight: 500;
}

.googlestore {
    padding-top: 12px;
}

.image-phone {
    padding-top: 30px;
}

.block-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #FFFFFF;
    z-index: 10;
    /*position: absolute;
    top: 80%;*/

}

.news,
.events,
.places,
.rules {
    padding: 5px;
}

.block-info {
    text-align: center;
    background-color: #272727;
}

.info {
    padding-top: 15px;
    color: #FFFFFF;
    font-family: 'Roboto', serif;
    font-size: 16px;
    font-weight: 500;
}

.form {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
}

.form:first-child {
    border-radius: 4px;

}

.form-numberspan:first-child {
    border-radius: 4px;
}

.form-number {
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 25px;
    color: #000000;
    background: #FFFFFF;
    border: 2px solid #FFAB06;
    transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
    border-radius: 4px;
}

.form-field {
    width: 380px;
    height: 64px;
    border: 2px solid #FFAB06;
    border-radius: 4px;
}


.form::after {
    position: absolute;
    top: 15px;
    left: 55px;
    content: "+971";
    pointer-events: none;
    font-size: 16px;
    color: black;
    border-right: 2px solid #ccc;
    padding: 5px;
}

.buttons {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    padding-bottom: 10px;
}

.block-offer {
    background-image: url(img/offer.png);
    background-repeat: no-repeat;
    width: 100%;
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.offer-title {
    font-family: 'Roboto', serif;
    font-weight: 500;
    font-size: 14px;
}

.exit {
    width: 186px;
    height: 64px;
    border: 2px solid #FFAB06;
    box-sizing: border-box;
    border-radius: 4px;
}

.subscribe {
    width: 186px;
    height: 64px;
    border: 2px solid #FFAB06;
    background-color: #FFAB06;
    box-sizing: border-box;
    border-radius: 4px;
}

.subscribe:hover {
    cursor: pointer;
}

.exit-name {
    padding-top: 20px;
    color: white;
    font-family: 'Roboto', serif;
    font-weight: 400;
    font-size: 16px;
}

.subscribe-name {
    color: #272727;
    font-family: 'Roboto', serif;
    font-weight: 400;
    font-size: 16px;
}

.footer {
    display: flex;
    align-items: center;
    background: #FFFFFF;
}

.footer-store {
    padding-left: 19px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.footer-img {
    padding-left: 65px;
}

@media screen and (max-width: 450px) and (orientation: portrait) {
    .header-title {
        padding: 10px 50px;
    }

    .main-wrapper {
        background-image: url(img/bg2.png);
        height: 875px;
    }

    .info {
        padding-left: 25px;
        padding-right: 25px;
    }
    .buttons {
        padding-left: 25px;
        padding-right: 20px;
    }
    .block-offer {
        padding: 0 16px 16px 50px;
    }
    .footer-img {
        padding-left: 30px;
    }
    .form::after {
        left: 25px;
    }

}
@media screen and (max-width: 430px) and (orientation: portrait) {
    .header-title {
        padding: 10px 40px;
    }
    .news-img,
    .events-img,
    .places-img,
    .rules-img {
        width: 180px;
        height: 180px;
    }
    .block-offer {
        padding: 0 16px 16px 35px;
    }
    .subscribe {
        margin-left: 5px;
    }
    
}
@media screen and (max-width: 390px) and (orientation: portrait) {
    .header-title {
        padding: 10px 40px;
    }
    .news-img,
    .events-img,
    .places-img,
    .rules-img {
        width: 150px;
        height: 150px;
    }
    
    
}
@media screen and (max-width: 290px) and (orientation: portrait) {
    .header-title {
        padding: 10px 18px;
    }
    .news-img,
    .events-img,
    .places-img,
    .rules-img {
        width: 150px;
        height: 150px;
    }
    .main-text {
        margin: 0;
    }
    
    .form-field {
        width: 250px;
        height: 50px;
    }
    .exit,
    .subscribe {
        width: 110px;
        height: 60px;
    }
    .buttons {
        justify-content: space-evenly;
    }
   
    .google-store__img,
    .app-store__img {
        width: 120px;
    }
    .footer-img {
        width: 100px;
    }
    .googlestore,
    .main-link__appstore {
        width: 200px;
    }
    .main-wrapper {
        background-position: top center;
    }
}