.carphone {
    background-image: url('../assets/backgrounds/carphone1.jpg');
}
.flag {
    background-image: url('../assets/backgrounds/flag2.png');
}
.grassphone {
    background-image: url('../assets/backgrounds/grass1.jpg');
}
body {
    overflow: hidden;
}
.header {
    width: 100vw;
}
ul.burger__list {
    height: 100vh;
    overflow-y: auto;
}
ul.burger__list::-webkit-scrollbar {
    display: none;
}

.main {
    position: relative;
    max-height: 1170px;
    width: 100vw;
    overflow: hidden;
    height: 100vh;
    font-family: "Roboto", sans-serif;
}
body {
    background: #080728;
}
.carphone,
.flag,
.grassphone {
    background-size: contain;
    background-repeat: no-repeat;
}
.carphone {
    height: 1515px;
    width: 1870px;
    position: absolute;
    left: -245px;
    top: 0;
}
.breeding {
    position: relative;
}
.flag {
    height: 1900px;
    width: 1800px;
    position: absolute;
    top: -220px;
    z-index: 5;
}

.grassphone {
    height: 1217px;
    width: 1295px;
    position: absolute;
    right: -264px
}
.logo {
    position: absolute;
    top:100px;
    left:100px;
    z-index: 50;
}
.car {
    position: absolute;
    top: 277px;
    left: 360px;
    width: 36%;
}
.logo__img {
    background-image: url(../assets/images/logo.png);
    width: 480px;
    height: 200px;
    background-size: cover;
    z-index: 20;
}
.west {
    position: absolute;
    top: 70vh;
    right: 0px;
    z-index: 40;
}
.west__img {
    background-image: url('../assets/images/west.png');
    width: 252px;
    height: 111px;
}
.west p {
    border-radius: 6px;
    padding: 12px 40px 14px 40px;
    width: 271px;
    height: 54px;
    background: #4EA0DE;

    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    transform: skewX(-12deg);
}
.telegram__button {
    box-shadow: inset 0 0 13px 0 #931d38, inset 0 2px 4px 0 rgba(193, 20, 59, 0.5), inset 0 -2px 4px 0 rgba(203, 25, 25, 0.5), inset 2px 0 13px 0 rgba(202, 30, 70, 0.5), inset -2px 0 13px 0 rgba(201, 38, 75, 0.5);
background: #000;
width: 440px;
height: 58px;
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border:2px solid #fff;
transform: skewX(-12deg);
margin-top:44px;
}

@media (max-width:1440px) {
    .carphone {
        height: 1121px;
        width: 1473px;
        left: -245px;
        top: 0;
    }
    .car {
        position: absolute;
        top: 264px;
        left: 417px;
        width: 26%;
    }
    .flag {
        height: 1419px;
        width: 1344px;
        top: -220px;
        left: 184px;
    }
    .grassphone {
        height: 1304px;
        width: 1336px;
        right: 0;
    }
    .west {
        position: absolute;
        top: 70vh;
        left: 74vw;
    
    }
    
.main {
    position: relative;
    max-height: 900px;
    width: 100vw;
    overflow: hidden;
}
.container {
    width: 1440px;
}

}
@media (max-width:1024px) {
    .carphone {
        height: 774px;
        width: 1402px;
        left: -245px;
        top: 0;
    }
    .car {
        position: absolute;
        top: 226px;
        left: 226px;
        width: 32%;
    }
    .flag {
        height: 1011px;
        width: 1019px;
        top: -114px;
        left: 132px;
    }
    .grassphone {
        height: 1000px;
        width: 1000px;
        right: -136px;
    }
    .main {
        max-height: 768px;
    }
    .container {
        width: 1024px;
    }
    .logo {
        position: absolute;
        top: 40px;
        left: 40px;
    }
    .logo__img {
        width: 346px;
        height: 143px;
    }
    .telegram__button {
        width: 313px;
        height: 48px;
        font-size: 16px;
        margin-top: 31px;
    }
    .west {
        top: 67vh;
        left: 68vw;
    }
}


@media (max-width:1440px) and (max-height:700px) and (min-width:1024px) {
    .flag {
        height: 1051px;
        width: 1280px;
        top: -220px;
        left: 500px;
    }
    .car {
        position: absolute;
        top: 222px;
        left: 472px;
        width: 26%;
    }
    .west {
        position: absolute;
        top: 63vh;
        left: 74vw;
    }
    .logo {
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .carphone {
        height: 1086px;
        width: 1275px;
        left: 0;
        top: 0;
    }
    .grassphone {
        height: 1200px;
        width: 1000px;
        right: 0;
    }
}

@media (max-width:1300px) and (max-height:700px) and (min-width:1024px) {
    .flag {
        height: 1051px;
        width: 1280px;
        top: -191px;
        left: 250px;
    }
    .car {
        position: absolute;
        top: 203px;
        left: 408px;
        width: 19%;
    }
    .west {
        position: absolute;
        top: 63vh;
        left: 74vw;
    }
    .logo {
        position: absolute;
        top: 50px;
        left: 0px;
        z-index: 20;
        transform: scale(0.9);
    }
    .carphone {
        height: 1037px;
        width: 1120px;
        left: -86px;
        top: 0;
    }
    .grassphone {
        height: 1247px;
        width: 1400px;
        right: 102px;
        top: -44px;
    }
}
@media (max-width:768px) and (min-width:500px) {
    body {
        overflow: auto;
    }
}
@media (max-width:1024px) and (max-height:700px)  {
    .flag {
        height: 1011px;
        width: 956px;
        top: -114px;
        left: 30px;
    }
    .car {
        position: absolute;
        top: 226px;
        left: 167px;
        width: 32%;
    }
    .west {
        position: absolute;
        top: 63vh;
        left: 64vw;
    }
    .logo {
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .carphone {
        height: 774px;
        width: 1402px;
        left: -410px;
        top: 0;
    }
    .grassphone {
        height: 1000px;
        width: 1000px;
        right: 0;
        top: -50px;
    }
}

@media (max-width:820px) {
    .grassphone {
        height: 1000px;
        width: 1000px;
        right: 0;
        top: -100px;
    }
    .flag {
        height: 1011px;
        width: 1019px;
        top: -114px;
        left: -14px;
    }
    .carphone {
        height: 774px;
        width: 1402px;
        left: -392px;
        top: 0;
    }
    .west {
        top: 67vh;
        left: 61vw;
    }
}
@media (max-width:768px) {
    .car {
        display: none;
    }

    ul.burger__list {
        height: 1000px;
        overflow-y: auto;
    }
    .container {
        width: 768px;
    }
    .main {
        max-height: 1172px;
        overflow-x: hidden;
        height: 1100px;
    }
    .breeding {
        height: 100vh;
    }
    
    .carphone {
        background-image: url(../assets/backgrounds/carmobile.jpg);
        height: 520px;
        width: 100vw;
        left: 0;
        top: 0;
        background-size: cover;
        position: relative;
        background-position: 0px -76px;
    }
    .flag {
        transform: rotate(45deg);
        height: 1011px;
        width: 872px;
        top: -2px;
        left: -65px;
    }
    
    .west {
        top: 650px;
        left: 0;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .grassphone {
        background-image: url(../assets/backgrounds/grassmobile.jpg);
        height: 100vh;
        width: 100vw;
        position: relative;
        background-size: cover;
        background-position: bottom;
    }
}
@media(max-width:500px) {
    .flag {
        transform: rotate(45deg);
        height: 500px;
        width: 500px;
        top: 239px;
        left: -21px;
        /* transform: translateX(10px); */
    }
    .carphone {
        background-image: url(../assets/backgrounds/carmobile2.jpg);
        height: 571px;
        width: 100vw;
        left: 0;
        top: 0;
        background-size: cover;
        position: relative;
        background-position: 0 11%;
    }
    .logo {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .west {
        top: 650px;
    }
    .main {
        max-height: 1000px;
    }
    .carphone {
        background-image: url(../assets/backgrounds/carmobile2.jpg);
        height: 560px;
}
.flag {
    transform: rotate(45deg);
    height: 500px;
    width: 500px;
    top: 237px;
}
.grassphone {
    background-image: url(../assets/backgrounds/grassmobile.jpg);
    height: 50vh;
    width: 100vw;
    position: relative;
    background-size: cover;
    background-position: bottom;
}
.west {
    top: clamp(551px, 70vh, 700px);
}
}
@media (max-width:500px) and (max-height:750px) {
    .west {
        top: clamp(402px, 67vh, 700px);
        transform: scale(0.85);
    }
    .flag {
        transform: rotate(45deg);
        height: 500px;
        width: 500px;
        top: 169px;
    }
    .carphone {
        background-image: url(../assets/backgrounds/carmobile2.jpg);
        height: 493px;
    }
    .west__img {
        background-image: url(../assets/images/west.png);
        width: 218px;
        height: 111px;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .west p {
        border-radius: 6px;
        padding: 12px 20px 14px 20px;
        width: 227px;
    }
    .logo{
        transform: scale(0.75);
        top:15px;
    }
    .telegram__button {
        width: 313px;
        height: 48px;
        font-size: 16px;
        margin-top: 0px;
    }
    .carphone {
        background-position: 0px -78px;
        height: 466px;
    }
    .flag {
        transform: rotate(45deg);
        height: 489px;
        width: 430px;
        top: 158px;
    }
    
}
@media (min-width:1440px) {
    .logo {
        left: 10px;
    }
}
@media (max-width:1200px) and (min-width:1025px) and (min-height:700px) {
    .logo {
        transform: scale(0.9);
        top: 50px;
        left: 50px;
    }
    .flag {
        transform: scale(0.9);
        left: 17px;
    }
    .grassphone {
        height: 1102px;
        width: 1336px;
        right: 67px;
    }
    .west {
        position: absolute;
        top: 65vh;
        left: 68vw;
    }
    .car {
        position: absolute;
        top: 264px;
        left: 250px;
        width: 26%;
    }
}