body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
* {
    margin: 0;
    padding: 0;
} /*щоб всюди задавати відступи вручну*/
/* Menu */
.Menu{
    background: #04314B;
    color: #FFFFFF;
    height: 80px;
    display: flex; /* Встановлюємо контейнер flex */
    align-items: center; /* Вирівнюємо елементи по вертикалі по центру */
}
.menu_name{
    font-family: "Abhaya Libre", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 64px;
    margin-right: 100px;
}
.menu_ul{
    text-align: center;
    flex-grow: 1; /* Add this line */
}
.Menu ul{
    list-style: none;
    display: flex; /* Робимо список елементів flex контейнером */
    justify-content: space-around; 
    align-items: center; /* Align items vertically */
    text-align: center;
    flex-grow: 1; /* Add this line */
}
.Menu .menu_list {
    flex-grow: 1; /* Add this line */
    margin-right: 54px; /* Додати відступ між елементами */
}
.Menu .menu_list a{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:"slnt" 0;
    font-size: 32px;
    padding: 20px;
    color: #FFFFFF;
}
.Menu .menu_list a:hover {
    text-decoration: none; /* Забираємо підкреслення при наведенні */
}
.menu_exit{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:"slnt" 0;
    display: flex;
    flex-direction: column; /* Розташовуємо елементи в стовпчик */
    align-items: center; /* Вирівнюємо по центру по горизонталі */
    margin-left: 100px; /* Зсуваємо вправо */
    padding-right: 20px;  
}
.menu_exit img {
    width: 47px; /* Задаємо ширину зображенню */
    height: 45px; /* Задаємо висоту зображенню */
    padding-top: 8px;
}
.Menu .menu_exit a:hover{
    text-decoration: none;
}
.Menu .menu_exit .menu_exit_link {
    color: #FFFFFF;
}
/*Description*/
.Description {
    position: relative;
    text-align: center;
    margin-bottom: -50px; /* Видаляємо внутрішній відступ між .Description та .Help */
}

.Description img {
    width: 100%;
    height: auto;
    filter: brightness(70%) saturate(150%); /* Змінюємо колір*/
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4, 49, 75, 0.5); /* квадрат з кольором #04314B з прозорістю 50% */
}

.description_name {
    font-family: "Abhaya Libre", serif;
    font-weight: 600;
    font-style: normal;
    position: absolute;
    top: 368px; /* змінюємо вертикальне положення description_name */
    left: 10px;
    color: white;
    font-size: 80px;
    z-index: 1; /* забезпечуємо, щоб description_name був поверх зображення */
    margin-left: 52px; /* Додаємо відступ зліва */
}

.description_about_us {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:"slnt" 0;
    position: absolute;
    top: 493px; /* змінюємо вертикальне положення description_about_us */
    left: 10px; /* забезпечуємо відступ зліва */
    right: 10px; /* забезпечуємо відступ зправа */
    color: white;
    font-size: 28px;
    box-sizing: border-box; /* забезпечуємо, щоб padding не змінював ширину блоку */
    background-color: #04314B; /* кольоровий фон без прозорості */
    border-radius: 5px;
    margin-left: 82px; /* Додаємо відступ зліва */
    margin-right: 52px; /* Додаємо відступ зліва */
    border-radius: 24px; /* Заокруглення */
    padding-top: 30px;
    padding-bottom: 38px;
    padding-left: 20px;
    padding-right:20px;
}
/*Help*/
.Help{
    padding-top: 90px;
    background-color: #04314B;
    display: flex; /* Встановлюємо контейнер flex */
    flex-direction: column; /* Розміщуємо елементи в колонку */
    align-items: center; /* Вирівнюємо елементи по центру по горизонталі */
}
.help_name{
    padding-top: 36px;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:"slnt" 0;
    color: #FFFFFF;
    font-size: 64px;
    padding-right: 20px;
    align-self: flex-start; /* Розміщуємо .help_name по лівому краю */
    margin-left: 52px; /* Додаємо відступ зліва */
}
.rectangles_container {
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 0; /* Додаємо відступ зліва */
    display: flex; /* Встановлюємо контейнер flex */
    justify-content: center; /* Розташовуємо прямокутники рівномірно по контейнеру */
    width: 100%; /* Встановлюємо ширину контейнера на всю ширину родітеля */
    align-items: center; /* Відцентрувати по вертикалі */
    margin-left: 60px;
}
.rectangle {
    width: 400px;
    height: 550px;
    background-color:  #1B465E;
    margin-right: 65px; /* Відступ між прямокутниками */
    border-radius: 24px; /* Заокруглення */
}
.rectangle:hover {
    background-color: #FFFFFF; /* Колір при наведенні */
}
.rectangle_text:hover{
    color: #04314B;
}
.rectangle_text{
    color: #FFFFFF;
    margin-right: 20px;
    margin-left: 21px;

}
.rectangle_nomber{
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;   
    font-size: 72px;
    text-align: right;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 68px;
}
.rectange_h{
    font-family: "Abhaya Libre", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 38px;

}
.rectange_p{
    font-family: "Abhaya Libre", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 24px;


}

.tabs_block[id]:target {
    display: block;
}
.tabs_block[id="categories_of_law"] {
    display: none;
}
.tabs_item[href="#categories_of_law"] {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #04314B; /* Змініть колір фону на потрібний вам */
}
.tabs_block[id="categories_of_law"]:target {
    display: block;
}

.Categories{
    display: flex;
    background-color: #04314B;
    flex-direction: column; /* Розміщуємо елементи в колонку */
    height: 100%; /* Додаємо властивість висоти */
    padding: 20px; /* Додаємо наповнення */
}
.categories_of_law_name {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:"slnt" 0;
    margin-top: 20px;
    color: white;
    font-size: 40px;
    margin-bottom: 20px;
    padding: left 30px;
    font-size: 64px;
    padding: 0 30px; /* Значення padding для обох сторін */
}

.Categories ul li img {
    width: 100px;
    height: 100px;
    margin-right: 50px;
}
.Categories ul li h2 {
    font-family: "Abhaya Libre", serif;
    font-weight: 600;
    font-style: normal;
    position: absolute;
    font-style: normal;
    color: #04314B;
    font-size: 36px;
}
.Categories ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Рядки будуть автоматично обриватися на новий рядок */
    justify-content: space-between; /* Рівномірно розподіляємо елементи між рядками */
    justify-content: space-between; /* Рівномірно розподіляємо елементи між рядками */
    margin: 40px; /* Відступи від країв сайту */
}

.Categories ul li {
    display: flex;
    align-items: center;
    margin-bottom: 50px; /* Додаємо відступ між рядками */
    background-color: #FFFFFF;
    width: calc(33.33% - 50px); /* Розміщаємо по три елементи в рядку і забираємо відступи */
    height: 220px;
    padding: 10px; /* Додаємо внутрішній відступ */
    border-radius: 32px; /* Заокруглюємо краї */
    box-sizing: border-box;
}
.categoties_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.categoties_item img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px; /* Додаємо відступ між зображенням та посиланням */
    margin-left: 40px; /* Вирівнюємо зображення по правому краю блоку */
    margin-right: 40px; /* Вирівнюємо зображення по лівому краю блоку */
}
.categoties_item a {
    font-family: "Abhaya Libre", serif;
    font-weight: 600;
    font-style: normal;
    position: absolute;
    text-decoration: none;
    color: #04314B; /* Колір тексту */
    font-size: 36px;
    margin-top: 100px;
    flex-direction: column; /* Розташуємо елементи блоку в стовпчик */
    align-items: center; /* Вирівнюємо елементи по центру по горизонталі */
    text-align: center; /* Вирівнюємо текст по центру */
    display: flex;
    word-wrap: break-word;
}

/* Стилі для пустого вікна входу */
#login {
    display: none;
    width: 100%;
    height: 100vh;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999; /* Щоб вікно було поверх інших елементів */
}
/*правила дорожнього руху*/
.tabs_block[id="traffic_rules"] {
    display: none;
}
.tabs_item[href="#traffic_rules"] {
    
}
.tabs_block[id="traffic_rules"]:target {
    display: block;
}
.search-box{
    width: 1000px;
    height: 80px;
    background: #FFFFFF;
    margin-top: 80px;
    position: relative;
    display: flex; /* додано */
    justify-content: center; /* додано */
    align-items: center; /* додано */
    margin-left: auto; /* додано */
    margin-right: auto; /* додано */
}
.row_search{
   display: flex;
   align-items: center; 
}
.search_traffic_rules{
    
    width: 1000px; /* Змінено */
    height: 80px;
    border-radius: 20px;
    font-size: 26px;
    padding-left: 80px;
    color: #04314B;
}
.search_img{
    margin-left: 20px;
    width: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;

}
button{
    background: transparent;
    border: 0;
    outline: 0;
}
.search_codex{
    justify-content: center; /* додано */
    align-items: center; /* додано */
    margin-left: 228px;
    margin-right: 229px;
}
.search_codex{
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}
.search_codex li{  
    list-style: none;
    font-size: 28px;
    font-family: "Days One", sans-serif; /* Додаємо шрифт Days One, а в разі його відсутності, використовуємо загальні шрифти sans-serif */
    padding: 20xp 12px;
    cursor: default;
    border-radius: 12px; 
}
.search_codex li:hover{
    background: rgba(4, 49, 75, 0.1);
}


/*contacts*/
.tabs_block[id="contacts"] {
    display: none;
}
.tabs_item[href="#contacts"] {
    padding: 10px 20px;
    border-radius: 5px;
}
.tabs_block[id="contacts"]:target {
    display: block;
}
.contacts_about {
    font-weight: bold;
    position: relative;
    background-color: #04314B;
    display: flex; /* Встановлюємо контейнер flex */
    flex-wrap: wrap; /* Дозволяємо елементам обтікати контейнер */
    justify-content: center /* Вирівнюємо елементи по центру горизонтально */
    
}
.contacts_map {
    position: relative; /* Додаємо позиціонування */
    width: 100%;
    height: auto;
}

.contacts_list {
    list-style: none;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    width: 280px; /* Задаємо ширину блока */
    height: 192px; /* Задаємо висоту блока */
    border-radius: 32px; /* Додаємо заокруглення */
    display: inline-block; /* Встановлюємо властивість flex для вирівнювання елементів всередині */
    vertical-align: top;
    justify-content: center; /* Вирівнюємо елементи по горизонталі по центру */
    align-items: center; 
    text-align: center;
    margin: 0 22px;
    margin-top: -100px;
    position: relative; /* Додаємо позиціонування для внутрішніх елементів */
}

.contacts_list_name {
    font-family: "Days One", sans-serif; /* Додаємо шрифт Days One, а в разі його відсутності, використовуємо загальні шрифти sans-serif */
    font-size: 32px;
    color: #04314B;
    text-align: center; /* Вирівнюємо текст по центру */
    margin-top: 0; /* Встановлюємо відступ зверху */
}

.contacts_list_other {
    font-family: "Days One", sans-serif; /* Додаємо шрифт Days One, а в разі його відсутності, використовуємо загальні шрифти sans-serif */
    font-size: 20px;
    color: #04314B;
    text-align: center; /* Вирівнюємо текст по центру */
    padding-top: 35px;
    padding-bottom: 20px;
}
.contacts_img {
    padding-top: 20px;
    vertical-align: middle; /* Вирівнюємо зображення по вертикалі по центру */  
}
.overlay_map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4, 49, 75, 0.5); /* квадрат з кольором #04314B з прозорістю 50% */
}
/*те що під мапою*/
.contacts_down {
    font-family: "Days One", sans-serif; /* Додаємо шрифт Days One, а в разі його відсутності, використовуємо загальні шрифти sans-serif */
    position: relative;  
    display: flex; /* Додаємо властивість flex */
    justify-content: space-between; /* Вирівнюємо елементи по краях контейнера */
    align-items: flex-start; /* Вирівнюємо елементи по вертикалі по центру */
    padding-bottom: 100px;
}

.contacts_all {
    background-color: #04314B;
}

.wrote{
    padding-top: 96px;
}

.wrote_us_h {
    color: #FFFFFF;
    font-size: 40px;
    padding-bottom: 20px;
    margin-top: 90px; /* Відступ вниз */
    margin-left: 170px;
}

.wrote_us_list {
    font-weight: bold;
    background-color: #FFFFFF;
    color: #04314B;
    width: 520px;
    height: 780px;
    border-radius: 32px;
    font-size: 26px;
    padding-left: 68px;
    margin-left: 130px;
    padding-top: 25px;
    margin-right: 80px;
}

.wrote_list_text {
    margin-bottom: 20px;
}

.search_wrote {
    width: 440px;
    height: 45px;
    border-radius: 20px;
    margin-bottom: 20px;
    margin-top: 12px;
    font-size: 24px;
    padding-left: 10px;
    overflow-wrap: break-word;
}
.search_wrote_massenge{
    width: 440px;
    height: 150px;
    border-radius: 20px;
    margin-bottom: 20px;
    margin-top: 12px;
    font-size: 24px;
    padding-left: 10px;
}
.wrote_us_send{
    background-color: #04314B;
    color: #FFFFFF;
    height: 62px;
    width: 272px;
    border-radius: 32px;
    font-size: 28px;
    margin-top: 24px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 80px;

}

.social{
    padding-top: 90px;
    margin-right: 58px;
    margin-left: 100px;
}

.social_h {
    color: #FFFFFF;
    font-size: 40px;
    padding-bottom: 18px;
    position: relative; /* Встановлюємо позицію блоку як відносної */
    margin-left: -30px;
}
.social_list {
    font-weight: 500;
    background-color: #FFFFFF;
    color: #04314B;
    width: 440px; /* Максимальна ширина блока */
    height: 210px; /* Задаємо висоту блока */
    border-radius: 32px; /* Додаємо заокруглення */
    font-size: 26px;
    padding-left: 30px;
    padding-right: 78px;
    padding-bottom: 8px;
    padding-top: 38px;
    display: flex; /* Робимо блок flex контейнером */
    flex-direction: column; 
    position: relative; /* Встановлюємо позицію блоку як відносної */
    left: -80px; /* Зміщуємо блок вліво на 100px */
    margin-left: +20px;
    


}
.social_list a{
    text-decoration: none;
    color: #04314B;
}
.social_list_item {
    display: flex; /* Робимо блок flex контейнером для кожної пари зображення-текст */
    align-items: center; /* Вирівнюємо елементи по вертикалі */
    padding-bottom: 30px;
}
.social_list_text {
    margin-right: 10px; /* Задаємо відступ між елементами */
}

.social_img {
    padding-right: 22px;
    width: 40px;
    height: 40px;
}
/*Юристи*/
.lawyers{
    margin-left: +60px;
}
.lawyers_filter {
    position: relative;
    z-index: 2;
}

.lawyers_h{
    margin-top: 40px;
    margin-left: 120px;
    font-size: 64px;
    color: #04314B;
    font-weight: bold;
    font-family: "Inter", sans-serif;
}
.lawyers_filter_ul{
    margin-left: 120px;
    margin-top: 40px;
    display: flex;
    text-align: center;
    
}

.lawyers_filter_li{
    list-style: none; /* прибирає маркери списку */
    margin-right: 35px;
    position: relative;
    
}
.lawyers_filte_city,
.lawyers_filte_specilization,
.lawyers_filte_sorting {
    font-family: "Inter", sans-serif;
    text-decoration: none;
    color: #04314B;
    font-size: 20px;
    font-weight: bold;
    padding-top: 7px;
    display: inline-block; /* додає блочний властивість для правильного застосування обводки */
    border: 3px solid #04314B;
    border-radius: 12px; /* заокруглює кути */
    width: 186px;
    height: 35px;
    margin: 0 auto;
    z-index: 3;
}
.city, .specilization, .sorting{
    position: absolute;
    background: #FFFFFF;
    color: #04314B;
    font-size: 20px;
    border: 2px solid #04314B;
    display: none;
    width: 186px;
    left: 50%; /* розміщує списки по центру відносно батьківського блока */
    transform: translateX(-50%); /* зсуває списки вліво на половину їх ширини */
    padding-top: 15px;
    font-weight: bold;
    font-family: "Inter", sans-serif;

}
.city li,
.specilization li,
.sorting li {
    padding-bottom: 20px;
    cursor: pointer; /* Зміна курсору при наведенні */
}
.city li:hover,
.specilization li:hover,
.sorting li:hover {
    text-decoration: underline; /* Підкреслення при наведенні */
}

.lawyers_filte_city:focus + .city,
.lawyers_filte_specilization:focus + .specilization,
.lawyers_filte_sorting:focus + .sorting {
    display: block;
}

.lawyers_filter_li:focus-within .city,
.lawyers_filter_li:focus-within .specilization,
.lawyers_filter_li:focus-within .sorting {
    display: block;
}

.city{
    list-style: none;
}

.specilization{
    list-style: none;
}
.lawyers_filte_sorting{
    margin-right: 0;
}   
.sorting{
    list-style: none;
}
/*Особисті дани юристів*/
.lawyers_persons{
    display: flex;
    flex-direction: column;
}
.lawyers_person{
    background: #04314B;
    margin-left: 120px;
    width: 1150px;
    height: 200px;
    border-radius: 24px;
    margin-top: 30px;
    display: flex; /* Use flexbox for internal alignment */
}
.lawyers_person2{
    background: #04314B;
    margin-left: 120px;
    width: 1150px;
    height: 200px;
    border-radius: 24px;
    margin-top: 30px;
    display: flex; /* Use flexbox for internal alignment */
}
.lawyers_person3{
    background: #04314B;
    margin-left: 120px;
    width: 1150px;
    height: 200px;
    border-radius: 24px;
    margin-top: 30px;
    display: flex; /* Use flexbox for internal alignment */
}
.lawyers_person_img{
    margin: 22px 45px 21px 34px;
}
.lawyers_person_ul{
    color: #FFFFFF;
    font-size: 20px;
    font-family: "Inter", sans-serif;
    list-style: none;
    margin-top: 22px;
    font-weight: bold;
    white-space: nowrap; /* Текст не буде переноситися */
}
.lawyers_person_li{
    display: flex;
    flex-direction: row; 
}
.lawyers_person_li_peting{
    margin-top: 20px;
}

.lawyers_contacts1{
    background: #FFFFFF;
    color: #04314B;
    font-size: 20px;
    border-radius: 24px;
    width: 150px;
    height: 37px;
    font-family: "Inter", sans-serif;
    display: flex; /* Use flexbox for internal alignment */
    align-items: center;
    justify-content: center; 
    margin-top: 137px;
    margin-left: 450px; /* Left margin */
    margin-right: 20px; /* Right margin */
    font-weight: bold;   
    text-decoration: none;
    list-style: none;
    z-index: 1;   
}
.lawyers_contacts2{
    background: #FFFFFF;
    color: #04314B;
    font-size: 20px;
    border-radius: 24px;
    width: 130px;
    height: 37px;
    font-family: "Inter", sans-serif;
    display: flex; /* Use flexbox for internal alignment */
    align-items: center;
    justify-content: center; 
    margin-top: 137px;
    margin-left: 460px; /* Left margin */
    margin-right: 20px; /* Right margin */
    font-weight: bold;   
    text-decoration: none;
    list-style: none;
    z-index: 1;   
}
.lawyers_contacts3{
    background: #FFFFFF;
    color: #04314B;
    font-size: 20px;
    border-radius: 24px;
    width: 150px;
    height: 37px;
    font-family: "Inter", sans-serif;
    display: flex; /* Use flexbox for internal alignment */
    align-items: center;
    justify-content: center; 
    margin-top: 137px;
    margin-left: 449px; /* Left margin */
    margin-right: 20px; /* Right margin */
    font-weight: bold;   
    text-decoration: none;
    list-style: none;
    z-index: 1;   
}
  /* Контакти content */
.contacts_date_content {
    width: 588px;
    height: 280px;
    background-color: #FFFFFF;
    padding-top: 5px;
    margin-top: 230px;
    margin-left: 500px;
    margin-left: auto; /* Автоматичний відступ зліва */
    margin-right: auto; /* Автоматичний відступ справа */
    text-align: center;
    
    
}
.contacts_date_content_text1{
    color: #04314B;
    font-size: 32px;
    margin-top: 25px;
    margin-bottom: 20px;
    font-family: "Inter", sans-serif;
    font-weight: 800;
    margin-left: +30px;
    
}
.contacts_date_content_text2{
    color: #04314B;
    font-size: 32px;
    margin-top: 25px;
    margin-bottom: 20px;
    font-family: "Inter", sans-serif;
    font-weight: 800;
    
}
.contacts_date_content_link{
    color: #04314B;
    font-size: 24px;
    font-family: "Inter", sans-serif;
    font-weight: 700;
}
.contacts_data_content_img img{
    margin-right: 10px;
    margin-left: +10px;
}
  
  /* Close button */
.close {
    float: right;
    cursor: pointer;
    /* Add more styling for the close button here */
}

.contacts_date {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; 
    width: 100%;
    height: 100%;
    background-color:  rgba(4, 49, 75, 0.5);
}

.lawyers_persons {
    /* Set the position to relative to allow z-index to work */
    position: relative;
    /* Add a lower z-index value to ensure it appears below .contacts_date_background */
    z-index: 1;
    /* Rest of your styles for .lawyers_persons */
}
 
/*Вхід*/
.menu_exit a{
    text-decoration: none;
    list-style: none;
    color: #FFFFFF;
}
.login_vhit{
    display: flex; /* Задаємо flex контейнер */
    flex-direction: column; /* Встановлюємо напрямок розміщення елементів у стовбчик */
    justify-content: center; /* Вирівнюємо елементи по центру по горизонталі */
    align-items: center; /* Вирівнюємо елементи по центру по вертикалі */
}
.login_vhit_h{
    font-family: "Inter", sans-serif;
    color: #04314B;
    font-size: 64px;
    font-weight: 900;
    padding-top: 40px;

}
.login_vhit_date{
    padding-top: 38px;
}
.login_vhit_date_p{
    font-family: "Inter", sans-serif;
    color: #04314B;
    font-size: 24px;
    padding-bottom: 10px;
    font-weight: 700;
    margin-left: +25px;

}
.search_vhit_date_search{
    position: relative;
    
}
.login_vhit_date_img{
    position: absolute;
    z-index: 1;
    height: 30px;
    width: 30px;
    padding-top: 12px;
    padding-bottom: 13px;
    padding-left: 15px;

}
.search_vhit{
    height: 55px;
    width: 416px;
    border-radius: 20px ;
    border: 2px solid #04314B ;
    margin-bottom: 18px;
    padding-left: 55px;
    font-size: 24px;
}
/*Увійти*/
.login_vhit_vhit{
    background-color: #04314B;
    border-radius: 32px;
    width: 174px;
    height: 49px;
    list-style: none;
    color: #FFFFFF;
    font-size: 28px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Увійти через*/
.login_vhit_vhit_by{
    color: #04314B;
    font-size: 32px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    margin-top: 65px;
}
.login_vhit_imgs{
    margin-bottom: 18px;

}
.login_vhit_img_apple{
    margin-right: 54px; 
    margin-left: 54px;
}
.login_vhit_not_account{
    background-color: #04314B;
    border-radius: 32px;
    width: 355px;
    height: 54px;
    color: #FFFFFF;
    font-size: 32px;
    list-style: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Реєстрація*/
.login_register_menu{
    display: flex; /* Задаємо flex контейнер */
    flex-direction: column; /* Встановлюємо напрямок розміщення елементів у стовбчик */
    justify-content: center; /* Вирівнюємо елементи по центру по горизонталі */
    align-items: center; /* Вирівнюємо елементи по центру по вертикалі */

}
.login_register_menu_h{
    font-family: "Inter", sans-serif;
    color: #04314B;
    font-size: 64px;
    font-weight: 900;
    padding-top: 40px;

}
.login_register_data{
    padding-top: 8px

}
.login_register_data_name{
    font-family: "Inter", sans-serif;
    color: #04314B;
    font-size: 24px;
    padding-bottom: 10px;
    font-weight: 700;
    margin-left: +25px;
}
.login_register_search{
    position: relative;
}
.login_register_search_img{
    position: absolute;
    z-index: 1;
    height: 30px;
    width: 30px;
    padding-top: 12px;
    padding-bottom: 13px;
    padding-left: 15px;
}
.search_register{
    height: 55px;
    width: 416px;
    border-radius: 20px ;
    border: 2px solid #04314B ;
    margin-bottom: 18px;
    padding-left: 55px;
    font-size: 24px;
}
.login_register_register{
    background-color: #04314B;
    border-radius: 32px;
    width: 272px;
    height: 49px;
    list-style: none;
    color: #FFFFFF;
    font-size: 28px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login_register_register_by{
    color: #04314B;
    font-size: 32px;
    font-weight: 400px;
    font-family: "Inter", sans-serif;
    margin-top: 65px;
}
/*відгуки*/
.reviews {
    display: block !important; /* Виправляємо можливі проблеми зі стилями */
    padding-top: 30px;
    margin-right: 100px;
    margin-left: 45px;
}

.reviews_h {
    color: #FFFFFF;
    font-size: 40px;
    padding-bottom: 18px;
    margin-left: 35px;
    font-weight: 600;
}

.reviews_persons {
    background-color: #FFFFFF;
    width: 505px;
    border-radius: 32px;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reviews_person {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: start;
    height: 260px;
    width: 505px;
    margin-top: +10px;
}

.column {
    display: flex;
    flex-direction: column;
}

.column-1 {
    justify-content: center;
    align-items: center;
}

.column-2 {
    justify-content: center;
}

.column-3 {
    justify-content: center;
    align-items: flex-end;
}

.undo, .redo {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.undo {
    left: 0;
}

.redo {
    right: 0;
}

.reviews_person_img {
    width: 40px;
    height: 40px;
    border-radius: 32px;
    margin-bottom: 10px;
}

.reviews_person_name {
    font-size: 24px;
    color: #04314B;
    margin-bottom: 10px;
    font-weight: 600;
}

.reviews_person_date {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 24px;
    font-weight: 600;
    color: #04314B;
    margin-bottom: 10px;
    margin-left: -200px; /* Зсуваємо вліво на 50px */
    margin-right: +20px;
}

.stars {
    display: flex;
    
    margin-bottom: 10px;
}

.stars img {
    width: 30px;
    height: 30px;
}

.reviews_person_text {
    font-size: 22px;
    color: #04314B;
    font-weight: 600;
    white-space: nowrap; /* Текст не буде переноситися */
}

/* Контейнер для соціальних мереж та відгуків */
.social_reviews_container {
    display: flex;
    flex-direction: column; /* Вертикальне розташування */
    gap: 20px; /* Проміжок між елементами */
}