.banner {
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding-top: 2vh;
    padding-bottom: 2vh;
    font-family: 'Montserrat';
}

.banner-container {
    width: 90vw;
    height: 70vh;
    background-image: url(../images/car_bg_image.png);
    background-size: 90vw 70vh;
    justify-content: center;
    justify-items: center;
    border-radius: 1.5vw;
    -webkit-border-radius: 1.5vw;
    -moz-border-radius: 1.5vw;
    -ms-border-radius: 1.5vw;
    -o-border-radius: 1.5vw;
}
.auto {
    position: relative;
    z-index: 1;
} 
.auto img {
    position: absolute;
    width: 100vh;
    left: -25vw;
    top: 5vh;
}
.action {
    position: relative;
    color: white;
    font-size: 5vw;
    font-weight: 700;
    letter-spacing: 1vw;
    height: 10vh;
}
.otkogo {
    position: relative;
    color: red;
    height: 10vh;
    font-size: 3vw;
    font-weight: 500;
    letter-spacing: 1vw;
}
.first-obloko {
    width: 30vw;
    height: 14vh;
    background-color: white;
    border-radius: 1.5vw;
    -webkit-border-radius: 1.5vw;
    -moz-border-radius: 1.5vw;
    -ms-border-radius: 1.5vw;
    -o-border-radius: 1.5vw;
    font-weight: 700;
    font-size: 1.5vw;
    text-align: left;
    padding-left: 1vw;
    align-items: center;
    align-self: center;
    align-content: center;
    letter-spacing: 0.05vw;
    margin-right: 20vw;
    
}
.first-obloko span {
    color: red;
}
.second-obloko {
    width: 30vw;
    height: 9vh;
    background-color: white;
    border-radius: 1.5vw;
    -webkit-border-radius: 1.5vw;
    -moz-border-radius: 1.5vw;
    -ms-border-radius: 1.5vw;
    -o-border-radius: 1.5vw;
    margin-top: 20vh;
    margin-left: 13vw;
    align-content: end;
    text-align: right;
    padding-right: 1vw;
    font-size: 1.6vw;
    font-weight: 700;
    letter-spacing:  0.05vw;
    padding-bottom: 1vh;
}
.second-obloko span {
    color: red;
}
.tg-banner-btn {
    position: absolute;
    justify-content: start;
    margin-right: 43vw;
    z-index: 9;
}
.tg-banner-btn a:hover {
    color: red;
}
.tg-banner-btn a {
    display: flex;
    text-decoration: none;
    color: white;
    align-content: center;
    align-items: center;
}
.round-icon {
    position: absolute;
    left: -1vw;
    top: -6vh;
}
.round-icon img {
    width: 5vw;
}
.tg-banner-btn-text {
    background-color: rgb(82, 82, 82);
    width: 20vw;
    height: 4vh;
    padding-left: 2vw;
    padding-right: 1vw;
    text-align: center;
    align-content: center;
    font-weight: 600;
    font-size: 1.2vw;
    letter-spacing: 0.1vw;
    border-top-right-radius: 0.5vw;
    border-bottom-right-radius: 0.5vw;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    margin-left: 1vw;
}
.tg-banner-btn-text:hover {
    color: rgb(247, 31, 31);
}
@media (max-width: 2561px) {
    .auto img {
        top: 7vh;
        width: 90vh
    }
    .second-obloko {
        margin-top: 16vh;
    }
    .round-icon img {
        margin-top: 1vh;
    }
    .tg-banner-btn{
        margin-top: 4vh;
    }
}
@media (max-width: 1921px) {
    .auto img {
        top: 9vh;
        width: 90vh
    }
    .second-obloko {
        margin-top: 19vh;
    }
    .tg-banner-btn{
        margin-top: 1vh;
    }
}
@media (max-width: 1600px) {

}
@media (max-width: 1280px) {
    .auto img {
        top: 4vh;
        width: 100vh;
        left: -30vw
    }
    .round-icon {
        top: -4vh;
    }
}
@media (max-width: 993px) {
    .auto img {
        top: 7vh;
        width: 95vh;
    }
}
@media (max-width: 769px) {

}
@media (max-width: 500px) {
    .banner-container {
        width: 96vw;
        background-size: 240vw;
    }
    .action {
        font-size: 16vw;
    }
    .otkogo{
        font-size: 7vw;
        height: 6vh;
    }
    .auto {
        
    }
    .auto img {
        width: 70vh;
        left: -45vw;
        overflow-x: hidden;
        overflow: hidden;
    }
    .first-obloko {
        width: 60vw;
        font-size: 5vw;
        margin-right: 30vw;
    }
    .second-obloko{
        width: 45vw;
        font-size: 5vw;
        padding-left: 2vw;
        padding-right: 4vw;
        margin-top: 12vh;
        margin-left: 30vw;
    }
    .tg-banner-btn{
        margin-top: 8vh;
        margin-right: 0vw;
    }
    .round-icon{
        left: -2vw;
    }
    .round-icon img {
        width: 20vw;
    }
    .tg-banner-btn-text {
        width: 70vw;
        font-size: 5vw;
        margin-left: 15vw;
        margin-bottom: 0vh;
    }
}