body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: 'Helvetica Neue';
}


.parking__wrapper, .map, .yandexmap{
    width: 86%;
    margin: 0 auto;
}

.footer__logo{
    width: 10vw;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    align-items: center;
    
}

.footer__logo img{
    width: 100%;
    height: 100%;
}
.logo__desktop, .footer__logo{
    width: 10vw;
    object-fit: cover;
}

.logo__desktop img , .footer__logo img{
    width: 100%;
    height: 100%;
}
.links {
    position: relative;
    font-size: 1vw;
    font-weight: 500;
    line-height: normal;
    /* display: inline-block; */
    cursor: pointer;
    padding-bottom: 4px;
}
.currentuserposition{
    margin-top: 60px;
    color: rgba(32, 46, 72, 0.70);
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.head{
    color: #3B3D40;
    margin-top: 41px;
    font-size: 3vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: "Systopie";
}

.map__area{
    width: 57%;
    flex-direction: column;
    /* gap: 41px; */
    
}

.parkinginfo{
    flex-direction: column;
    gap: 4vw;
    margin-top: 3vw;
}


.firstbackground,
.secondbackground{
    display: flex;
    justify-content: right;
    object-fit: cover;
    
}

.secondbackground{
    margin-top: -5px;
}
.parking__wrapper{
    justify-content: space-between;
}
.bluebackwrapper{
    width: 36vw;
}


.bluebackgroundWithcar {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 9vw;
    position: relative;
    
}

.car{
    position: absolute; 
    right: -200%; 
    bottom: 5vw; 
    width: 60vw; 
    height: auto; 
    animation: slideIn 1.3s ease-in-out 0.6s forwards; 

}
.car img {
    width: 100%; 
    height: auto; 
}

@keyframes slideIn {
    to {
        right: 0; 
    }
}

.firstbackground img {
    width: 100%;
    height: 100%;
}

.secondbackground img {
    width: 100%;
    height: 100%;
}



.quanparking{
    font-family: 'Systopie';
    font-style: normal;
    font-weight: 700;
    font-size: 3.5vw;
    
    color: #000000;


}


.info{
    flex-direction: column;
    gap: 2vw;
}

.areas{
   gap: 4vw;
    
}

.infohead{
    font-style: normal;
    font-weight: 400;
    font-size: 1.7vw;
    line-height: 42px;
    color: #000000;
}

.quantity{
    font-style: normal;
    font-weight: 700;
    font-size: 1.5vw;
    line-height: 37px;
    color: #000000;
}

.mapimage{
    object-fit: cover;

}
.mapimage img{
    width: 100%;
    height: 100%;
}

.map, .mapimage{
    margin-top: 4vw;
}

.map{
    opacity: 0;
    transition: opacity 0.5s ease;
}

.show {
    opacity: 1;
}

.time{
    display: flex;
    flex-direction: column;
    gap: 40px;
    
}

.right{
    display: flex;
    justify-content: right;
}
currentLine::after{
    border-color: #fff;
    
}
.currentLineh::after{
    border-color: #102D4A;
    }

/* @media screen and (max-width:1775px){

    .infohead{
        font-size: 30px;
    }

    .quantity{
    font-size: 27px;
    }

    .quanparking{
    font-size: 60px;   
    }
    .parkinginfo{
        gap: 60px;
    }
} */


.pointer{
    cursor: pointer;
}

.blockWithmapslider{
    background: url("./desktopimages/DJI_0208 1.png"), linear-gradient(rgba(18, 25, 32, 0.67));
    background-repeat: no-repeat;
    background-size: cover;

}

.secondmap{
    width: 86%;
    margin: 0 auto;
    height: 400px;
}

.dropdown {
    position: relative;
    display: inline-block;

  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 11vw;
    
    padding: 10px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    transform-origin: center top;
    animation: slideIn 0.3s ease-in-out;
    border-radius: 5px;
  }
  
  .dropdown-content a {
    color: black;
    padding-top: 0.2vw;
    padding-bottom: 0.2vw;
    text-decoration: none;
    display: block;
    
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    left: -4vw;
    
    
  }

.droplink{
    position: relative;
    font-size: 0.7vw; 
    font-weight: 500;
    line-height: normal;
    display: flex;
    cursor: pointer;
    padding-bottom: 1vw;
    text-align: center;
    
}


.droplink::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 9.7vw;
    border-bottom: 0.05vw solid transparent;
    transition: border-color 0.3s ease;
}

.droplink:hover::after{
    border-color: black;
    opacity: 0.6;
}

.ft{
    font-size: 1vw;
}
  
  @keyframes slideInheader {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }

/* @media screen and (max-width:1430px)
 {
    .areas{
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (min-width:2000px)
 {
    
    
    .quanparking{
        font-size: 86px;
    }
    .infohead{
        font-size: 46px;
    }

    .quantity{
        font-size: 44px;
    }

    .parkinginfo{
        margin-top: 60px;
        gap: 100px;
    }
} */

/* @media screen and (min-width:2400px)
 {
    .parkinginfo{
        gap: 60px;
    }
    
    .info{
        gap: 44px;
    }
} */

/* @media screen and (min-width:700px) and (max-width:1100px) {
    
    .currentuserposition{
        font-size: 20px;
        margin-top: 40px;
    }
    .infohead{
        font-size: 22px;
    }
    .parkinginfo {
        gap: 10px;
    }
    .head{
        font-size: 34px;
    }
    .name{
        font-size: 20px;
    }

    .car{
        position: absolute; 
        right: -200%; 
        bottom: 40px; 
        width: 170%; 
        height: auto; 
        animation: slideIn 1.3s ease-in-out 0.6s forwards; 
    
    }
    .car img {
        width: 100%; 
        height: auto; 
    }

    .bluebackgroundWithcar{
        padding-bottom: 100px;
    }

    .quanparking{
        font-size: 36px;
    }

    .info {
        font-size: 14px;
        gap: 5px;
    }
    .infrostructure__links {
        width: 100%;
    }
    .link__inf {
        font-size: 12px;
        gap: 10px;
    }
    .iconloc{
        height: 25px;
    }
    .bluebackname {
        font-size: 20px;
    }
    .bluebackinfo{
        font-size: 14px;
    }
    .d1 img{
        width: 5px;
        height: 5px;
    }

    .charhead{
        font-size: 24px;
    }

    .charname {
        font-size: 14px;
    }
    .quantity {
        font-size: 12px;
    }

    .bigtext {
        font-size: 30px;
    }
    .verticalline__info{
        height: 480px
    }

    .icontext{
        font-size: 14px;
        margin-bottom: 80px;
    }
    .icon{
        width: 100px;
        height: 100px;
    }
    .footer__firstline, .footer__secondline  {
        width: 98%; 
        margin: 0 auto;
    }
    .ft {
        font-size: 12px;
    }
    
    .links__wrapper{
        gap: 5px;
    }

    .links{
        font-size: 12px;
    }

    .logo__desktop img{
        width: 140px;
        height: 30px;
    }
    .links__wrapper{
        width:75%;
        margin: 0 auto;
    }

    
    .footer__line{
        width: 100%;
    }

    .dropdown {
        margin-top: -5px;
    }
} */
/* @media screen and (min-width:1100px) and (max-width:1300px) {
    .links__wrapper{
        width: 80%;
    }
    .dropdown {
        margin-top: -5px;
    }
} */