@font-face {
    font-family: "TT Lakes";
    src: url("fonts/TTLakes-Regular.woff") format('woff');
    font-weight: 400;
   
    
}


@font-face {
    font-family: "TT Lakes";
    src: url("fonts/TTLakes-Medium.woff") format('woff');
    font-weight: 500;
}

@font-face {
    font-family: "TT Lakes";
    src: url("fonts/TTLakes-Bold.woff") format('woff');
    font-weight: 700;
    
}
 

* {
    margin: 0;
    padding: 0;
}



body {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 320px;
font-family: "TT Lakes";
box-shadow: 5px 5px 10px rgba(126, 126, 130, 1);
overflow: hidden;
height: 100vh;
}






button {
    font-weight: 400;
}



header {
display: flex;
padding: 10px;
align-items: center;
padding: 15px;
justify-content: space-between;

}


.header__button {
background-color: white;
border: none;


}



.header__logo {

background-color: white;
border: none;

}


.container {
    overflow-y: auto;
}


.menu__list {

display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 20px;

}


.menu__title {
border: none;
align-items: center;
font-weight: 500;


}




.first-title {
    display: flex;
    width: 235px;
    border-radius: 5px;
    align-items: center;
    font-size: 15px;
    color: rgba(126, 126, 130, 1);
    
}
    

   .divider {
    position: relative;
    width: 10px;
    height: 40px;
    background-color: aqua;
    border-radius: 15px;
    left: -5px;
   
}

.menu__item{
border:none;
background: none;
font-size: 15px;
text-align:left;
padding: 14px;
border-radius: 5px;
align-items: flex-start;
color: rgba(27, 28, 33, 1);
font-weight: 500;
transition: all 0.3s ease;

}

.menu__item {
    border: 2px solid transparent;
    padding: 10px;
}

.menu__item:hover {
    transform: translateY( -3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 2px solid aqua;
    
}

.second-menu {
display: flex;
flex-direction: column;
max-width: 255px;
gap: 20px;
padding: 5px;

}



.menu {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    width: 255px;
   
    
   
}

.menu::-webkit-scrollbar {
    display: none;
}


.footer {
padding: 20px;


}



.footer__buttons{

display:flex;
gap: 20px;


}


.footer__lang-btn:hover {
    border: none;
    color: rgba(126, 126, 130, 1);
}


.footer__button {
background-color: white;
border: none;

}








.footer__mail {
padding-top: 15px;
display: block;
margin-bottom: 10px;
text-decoration: none;
color: black;
font-weight: 500;
font-size: 20px;

}



.footer__phone {
padding-top: 15px;
font-size: 30px;
font-weight: 700;
text-decoration: none;
color:black;

}



.footer__lang-btn {
padding-top: 30px;
background-color: white;
font-size: 16px;
border: none;
background: none;
margin-right: 10px;
cursor: pointer;
font-weight: 500;

}



@media(max-height: 768px) {
    .header {
  padding: 8px;
}

.menu__list {
    gap: 8px;
}

.second-menu {
    gap: 10px;
}

.footer {
    padding: 10px;
    margin-top: 150px;
}

.footer__buttons {
    gap: 10px;
}

.footer__phone {
    font-size: 18px;
}
}

@media (max-height: 600px) {
   
   .container {
    overflow-y: auto;
    height: 100vh;
   }
    

   .footer {
    margin-top: 100px;
    padding: 20px;
   }
    
       
    .menu {
        justify-content: center;
       
    }

    .second-menu {
        max-width: 220px;
    }

    .menu__item {
        max-width: 220px;
    }
}


@media (min-height: 600px) {

    .footer {
        padding: 20px;
        margin-top: 120px;
    }

    .menu__item {
        max-width: 205px;
    }
}




@media (min-height: 900px) {
    .menu__list {
        gap: 25px;

    }

    .menu__item {
        font-size: 18px;
        max-width: 245px;

    }

    .footer__phone {
        font-size: 32px;
    }


.menu::-webkit-scrollbar {
    display: none;
}

.footer {
    margin-top: 240px;
   
}

}