/* Основні стилі */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f9f9f9;
color: #1E293B;
line-height: 1.6;
}
/* Загальний стиль шапки */
.header-custom {
width: 100%;
font-family: Arial, sans-serif;

overflow: hidden;
position: relative;
}
/* Верхній блок із заголовком */
.header-top {
background: #1E293B;
color: white;
padding: 40px 0;
text-align: center;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 10;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Заголовок */
.header-top h1 {
margin: 50px 0 0; /* Відступ зверху */
color: #ffffff; /* Білий текст */
font-size: clamp(1.8em, 4vw, 2.5em);
position: relative;
top: 10px;
transition: top 0.3s ease-in-out;
line-height: 1.2;
text-align: center;
}
/* Другий рядок заголовка */
.header-top h1 span {
color: #FFD700;
text-transform: uppercase;
}
/* Нижній блок із текстом і кнопкою */
.header-bottom {
background: linear-gradient(90deg, #2563EB, #46A3FF);
color: white;
padding: 20px 10px 40px;
text-align: center;
font-size: 1.3em;
font-weight: bold;
position: relative;
z-index: 5;
line-height: 1.6;
}
/* Дизайн "зебра" для нижнього блоку */
.header-bottom:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 15px;
background: repeating-linear-gradient(
45deg,
black 0,
black 10px,
#FFD700 10px,
#FFD700 20px
); /* Чорно-жовті смужки */
}
/* Кнопка */
.cta-button {
display: inline-block;
background: white;
color: #2563EB;
padding: 15px 30px;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
border-radius: 25px;
margin: 20px auto;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
/* Ефект при наведенні */
.cta-button:hover {
background: #2563EB;
color: white;
transform: scale(1.05);
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
.header-top h1 {
font-size: 1.2em;
margin: 20px 0;
top: 20px;
position: relative;
line-height: 1.4;
}
.header-top h1 span {
font-size: 1.1em;
}
.header-bottom {
font-size: 1em;
padding: 15px 10px 30px;
line-height: 1.4;
}
.cta-button {
padding: 12px 25px;
font-size: 0.9em;
margin: 25px auto;
border-radius: 20px;
}
}
/* Секція логотипів */
#brands {
text-align: center;
padding: 40px 20px;
margin: 20px auto;
max-width: 1200px;
background-color: #f9f9f9;
border-radius: 10px;
}
#brands h2 {
font-size: 1.4em;
color: #474040;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
}
/* Грид логотипів */
.brand-logos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
justify-items: center;
align-items: center;
padding: 40px 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 1200px;
margin: 0 auto;
}
/* Стиль логотипів */
.brand-logos-grid img {
max-width: 150px;
height: auto;
border-radius: 5px;

}
/* Адаптивність для планшетів */
@media (max-width: 992px) {
.brand-logos-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
#brands h2 {
font-size: 1.3em;
}
.brand-logos-grid img {
max-width: 120px;
}
}
/* Адаптивність для телефонів */
@media (max-width: 768px) {
.brand-logos-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
#brands h2 {
font-size: 1.2em;
}
.brand-logos-grid img {
max-width: 100px;
}
}
/* Унікальний контейнер для "Про нас" */
#about-us-container {
background: #f7f9fc;
padding: 50px 0;
}
/* Секція "Про нас" */
#about-us {
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
padding: 40px 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 auto;
max-width: 1200px;
min-height: 300px;
text-align: center;
}
/* Контейнер контенту */
#about-us .content-wrapper {
max-width: 800px;
margin: 0 auto;
}
/* Заголовок */
#about-us h2 {
font-size: 1.4em;
color: #474040;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
}
/* Текст */
#about-us p {
font-size: 1.2em;
color: #555;
line-height: 1.8;
margin: 0 auto 20px;
text-align: center !important;
}
/* Кнопка */
#about-us .cta-button {
display: inline-block;
background: linear-gradient(90deg, #2563EB, #2563EB);
color: white;
padding: 12px 25px;
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Ефект наведення */
#about-us .cta-button:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
#about-us-container {
padding: 30px 0;
}
#about-us {
padding: 20px 10px;
}
#about-us h2 {
font-size: 1.2em;
}
#about-us p {
font-size: 1em;
line-height: 1.6;
}
#about-us .cta-button {
font-size: 1em;
padding: 10px 20px;
}
}
/* Унікальний контейнер для "Proč nás vybrat?" */
#why-us-container {
background: #f8f9fa;
padding: 50px 0;
}
/* Оригінальні стилі блоку "Proč nás vybrat?" */
#why-us {
padding: 40px 20px;
text-align: center;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 auto;
max-width: 1200px;
}
#why-us h2 {
font-size: 1.4em;
color: #474040;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Елементи списку */
#why-us .why-item {
margin-bottom: 20px;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
display: flex;
align-items: center;
gap: 15px;
}
/* Іконка перед текстом */
#why-us .why-item::before {
content: "✔️";
font-size: 1.5em;
background: linear-gradient(90deg, #FFD700, #FF8C00);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
flex-shrink: 0;
}
/* Текст елемента */
#why-us p {
font-size: 1.2em;
color: #1E293B;
margin: 0;
text-align: left;
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
#why-us h2 {
font-size: 1.2em;
}
#why-us .why-item::before {
font-size: 1.2em;
}
#why-us p {
font-size: 1em;
}
}
/* Футер */
footer {
background: #1E293B;
color: white;
text-align: center;
padding: 40px 20px;
margin-top: 40px;
border-radius: 10px 10px 0 0;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}
footer h2 {
font-size: 1.4em;
margin-bottom: 20px;
color: #1E293B;
}
footer p {
font-size: 1.2em;
margin-bottom: 15px;
}
footer a {
color: #1E293B;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
footer a:hover {
color: #1E293B;
}
/* Ключові кадри для тримтіння */
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
}
/* Загальний стиль кнопки */
.fixed-call-button {
position: fixed;
background: linear-gradient(90deg, #2563EB, #2563EB);
color: white;
padding: 8px 20px;
font-size: 1.1em;
text-decoration: none;
text-align: center;
border-radius: 50px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
z-index: 1000;
transition: all 0.3s ease-in-out;
animation: shake 1.4s ease-in-out infinite;
animation-delay: 1s;
}
/* Стиль при наведенні */
.fixed-call-button:hover {
background: linear-gradient(90deg, #2563EB, #2563EB);
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
/* Позиціонування на комп'ютерах */
@media (min-width: 768px) {
    .fixed-call-button {
bottom: 20px;
right: 20px;
top: unset;
left: unset;
transform: none;
}
}
/* Позиціонування на мобільних пристроях */
@media (max-width: 767px) {
.fixed-call-button {
top: 10px;
left: 50%;
transform: translateX(-50%);
bottom: unset;
right: unset;
width: 45%;
padding: 9px 0;
font-size: 1em;
}
}
/* Забрати підкреслення у посиланнях */
#services .service-item a {
text-decoration: none;
color: inherit;
}
#services h3 {
font-size: 1.5em;
color: #0078D4;
margin-bottom: 10px;
}
#services p {
font-size: 1.1em;
color: #1E293B;
line-height: 1.6;
}
/* Секція контактів */
#contact-info {
background: #ffffff;
padding: 40px 20px;
margin: 20px auto;
max-width: 1200px;
text-align: center;
}
/* Заголовок */
#contact-info h2 {
font-size: 1.5em;
color: #474040;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 30px;
}
/* Контейнер колонок */
.contact-columns {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
/* Окремі колонки */
.column {
flex: 1 1 30%;
min-width: 250px;
padding: 20px;
text-align: left;
background: transparent;
border: none;
box-shadow: none;
transition: none;
}
/* Заголовки колонок */
.column h3 {
font-size: 1.2em;
color: #1E293B;
margin-bottom: 10px;
font-weight: bold;
}
/* Текст у колонках */
.column p, .column ul li {
font-size: 1em;
color: #555;
line-height: 1.6;
margin: 10px 0;
}
/* Номер телефону та пошта */
.column p a {
color: #000;
text-decoration: none;
font-weight: bold;
}
.column p a:hover {
text-decoration: underline;
}
/* Список у колонках */
.column ul {
list-style: none;
padding: 0;
}
/* Адаптація для планшетів */
@media (max-width: 992px) {
.column {
flex: 1 1 45%;
}
#contact-info h2 {
font-size: 1.3em;
}
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
.column {
flex: 1 1 100%;
margin-bottom: 20px;
}
#contact-info h2 {
font-size: 1.2em;
}
}
/* Основний фон сайту */
body {
background: linear-gradient(90deg, #D8ECFF, #BADDFF);
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Секція "Naše služby" */
#services {
padding: 40px 20px;
text-align: center;
background: #ffffff; /* Білий фон */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 1200px;
}
#services h2 {
font-size: 1.4em;
color: #1E293B;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
}
#services .service-item {
margin-bottom: 20px;
padding: 20px;
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
transition: transform 0.3s, box-shadow 0.3s;
}
#services .service-item:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
background: #fffcf5;
}
#services .service-item a {
display: block;
text-decoration: none;
color: inherit;
}
#services h3 {
font-size: 1.2em;
margin-bottom: 10px;
color: #1E293B;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
-webkit-background-clip: text;
text-align: center;
margin: 0 auto;
}
#services p {
font-size: 1.2em;
color: #1E293B;
line-height: 1.6;
margin: 0;
text-align: center;
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
#services h2 {
font-size: 1.2em;
}
#services h3 {
font-size: 1em;
}
#services p {
font-size: 0.9em;
line-height: 1.4;
}
}
/* Інформаційна смужка */
.info-bar {
background: #1E293B;
color: #ffffff;
padding: 10px 20px;
text-align: center;
font-size: 1.1em;
border-bottom: 2px solid #2563EB;
font-weight: bold;
}
/* Посилання у смужці */
.info-bar a {
color: #46A3FF;
text-decoration: none;
font-weight: bold;
}
.info-bar a:hover {
text-decoration: underline;
color: #FFD700;
}
/* Для мобільних пристроїв (менше 768px ширини) */
@media (max-width: 768px) {
.info-bar {
font-size: 0.9em;
}
}
/* Для комп'ютерів (768px і більше) */
@media (min-width: 768px) {
.info-bar {
font-size: 1.2em;
}
}
/* Кнопка для відкриття меню */
.menu-toggle {
background: #2563EB;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 10px;
left: 15px;
z-index: 1000;
display: block;
}
/* Приховати кнопку меню на комп'ютерах */
@media (min-width: 769px) {
.menu-toggle {
display: none;
}
}
/* Меню */
.menu {
background: #1E293B;
color: white;
padding: 10px 15px;
border-radius: 0;
flex-direction: column;
display: none;
position: absolute;
top: 60px;
left: 20px;
width: calc(90% - 40px);
z-index: 999;
}
/* Відкрите меню на мобільних */
.menu.open {
display: flex;
}
/* Пункти меню */
.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.menu li {
text-align: left;
}
/* Розділювач між пунктами */
.menu li:not(:last-child) {
border-bottom: 1px solid #46A3FF;
}
/* Посилання в меню */
.menu a {
text-decoration: none;
color: white;
font-weight: bold;
padding: 10px 15px;
transition: background 0.3s, color 0.3s;
display: block;
}
.menu a:hover {
background: #46A3FF;
color: white;
}
/* Постійно відкрите меню на великих екранах */
@media (min-width: 769px) {
.menu {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
flex-direction: row;
justify-content: center;
background: #1E293B;
padding: 10px 0;
z-index: 1000;
}
.menu ul {
flex-direction: row;
gap: 20px;
justify-content: center;
}
/* Видалення розділювачів на комп'ютерах */
.menu li:not(:last-child) {
border-bottom: none;
}
}
/* Блок цін */
#price-list {
background: #ffffff;
padding: 50px 25px;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 40px auto;
max-width: 1200px;
}
/* Заголовок секції */
#price-list h2 {
font-size: 1.4em;
color: #474040;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Підзаголовок */
#price-list p {
font-size: 1em;
color: #555;
line-height: 1.6;
margin-bottom: 30px;
}
/* Таблиця */
#price-list table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1em;
line-height: 1.5;
color: #333;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
}
/* Заголовки таблиці */
#price-list th {
background: linear-gradient(90deg, #2563EB, #2563EB);
color: white;
padding: 15px;
text-transform: uppercase;
font-size: 1.1em;
font-weight: bold;
}
/* Рядки таблиці */
#price-list td {
padding: 15px;
border: 1px solid #ddd;
text-align: center;
font-size: 1em;
line-height: 1.5;
color: #555;
}
/* Чередування кольорів рядків */
#price-list tr:nth-child(even) {
background: #f9f9f9;
}
#price-list tr:nth-child(odd) {
background: #ffffff;
}
/* Заклик до дії */
#price-list a {
display: inline-block;
margin-top: 30px;
color: #555;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
transition: color 0.3s ease, transform 0.2s ease;
}
#price-list a:hover {
color: #555;
transform: scale(1.04);
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
#price-list {
padding: 30px 15px;
}
#price-list h2 {
font-size: 1.4em;
}
#price-list p {
font-size: 1em;
}
#price-list table {
font-size: 0.9em;
}
#price-list th, #price-list td {
padding: 10px;
}
}
@media (max-width: 480px) {
#price-list h2 {
font-size: 1.2em;
}
#price-list p {
font-size: 0.9em;
}
#price-list table {
font-size: 0.8em;
}
#price-list th, #price-list td {
padding: 8px;
}
}
/* Секція статистики */
#our-stats {
background: #ffffff;
padding: 40px 20px;
text-align: center;
margin: 20px auto;
border-radius: 10px;
max-width: 1200px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Контейнер для статистики */
.stats-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
/* Окремий елемент статистики */
.stat-item {
flex: 1 1 20%;
text-align: center;
background: #f9f9f9;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Іконка статистики */
.stat-icon {
max-width: 50px;
margin-bottom: 10px;
}
/* Текст статистики */
.stat-item h3 {
font-size: 1.2em;
margin-bottom: 10px;
color: #333333;
text-transform: uppercase;
font-weight: bold;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.stat-item p {
font-size: 1.2em;
color: #333;
line-height: 1.6;
margin: 0;
text-align: center;
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
#our-stats h2 {
font-size: 1.2em;
}
.stat-item h3 {
font-size: 1em;
}
.stat-item p {
font-size: 0.9em;
line-height: 1.4;
}
}
/* Секція "Opravy všech značek" */
#brand-repairs {
background: #f9f9f9;
padding: 40px 20px;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 1200px;
}
/* Контент секції */
#brand-repairs .brand-repairs-content {
max-width: 800px;
margin: 0 auto;
}
/* Заголовок секції */
#brand-repairs h2 {
font-size: 1.4em;
color: #333333;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Текст */
#brand-repairs p {
font-size: 1.2em;
color: #555;
line-height: 1.6;
margin: 0 auto;
max-width: 800px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Адаптація для мобільних */
@media (max-width: 768px) {
#brand-repairs h2 {
font-size: 1.2em;
}
#brand-repairs p {
font-size: 1em;
line-height: 1.4;
}
}
/* форма */
/* Секція форми захвату */
#capture-form {
background: #ffffff;
padding: 40px 20px;
text-align: center;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px auto;
max-width: 1200px;
}
/* Контейнер форми */
#capture-form form {
background: #f9f9f9;
padding: 40px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: 0 auto;
}
/* Заголовок */
#capture-form h2 {
font-size: 1.4em;
color: #474040;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
}
/* Опис */
#capture-form p {
font-size: 1.1em;
color: #555;
line-height: 1.6;
margin-bottom: 20px;
}
/* Поля форми */
.form-group {
margin-bottom: 20px;
text-align: left;
}
.form-group label {
margin-bottom: 5px;
font-size: 1em;
color: #333;
font-weight: bold;
display: block;
text-align: left;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
font-size: 1em;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
font-size: 1em;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input:focus {
border-color: #FF8C00;
box-shadow: 0 0 5px rgba(255, 140, 0, 0.4);
outline: none;
}
/* Кнопка відправки */
.submit-button {
background: linear-gradient(90deg, #46A3FF, #2563EB);
color: white;
padding: 12px 25px;
font-size: 1.2em;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.submit-button:hover {
transform: scale(1.05);
background: linear-gradient(90deg, #2563EB, #46A3FF);
}
/* Повідомлення про успіх */
#success-message {
margin-top: 15px;
padding: 15px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 5px;
text-align: center;
font-size: 1em;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
display: none;
}
#success-message p {
margin: 0;
}
/* Адаптація для телефонів */
@media (max-width: 768px) {
#capture-form form {
max-width: 100%;
}
#capture-form h2 {
font-size: 1.2em;
}
#capture-form p {
font-size: 1em;
}
.form-group input {
font-size: 0.9em;
padding: 10px;
}
.submit-button {
font-size: 1em;
padding: 10px 20px;
}
#success-message {
font-size: 0.9em;
}
}
/* Основний банер cookie */
#cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.9);
color: #fff;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 15px 20px;
box-sizing: border-box;
z-index: 1000;
}
/* Текст у банері */
#cookie-banner span {
font-size: 16px;
margin-right: 20px;
}
/* Кнопки у банері */
#cookie-banner button {
background-color: #ffcc00;
color: #000;
border: none;
padding: 8px 15px;
cursor: pointer;
border-radius: 5px;
font-size: 14px;
margin-left: 10px;
transition: background-color 0.3s ease;
}
/* Кнопка "Відхилити" */
#decline-cookie {
background-color: #666;
color: #fff;
}
/* Ефект при наведенні */
#cookie-banner button:hover {
background-color: #ffb700;
}
/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
#cookie-banner {
flex-direction: column;
text-align: center;
padding: 15px;
}
#cookie-banner span {
margin-bottom: 10px;
font-size: 14px;
}
#cookie-banner button {
margin: 5px 0;
width: 100%;
}
}
/* Модальне вікно */
#modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
#modal-content {
background: #fff;
padding: 20px;
border-radius: 10px;
max-width: 600px;
max-height: 80vh;
width: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
overflow-y: auto;
position: relative;
font-family: Arial, sans-serif;
color: #333;
box-sizing: border-box;
}
#modal-content h2 {
margin-top: 0;
font-size: 22px;
color: #000;
text-align: center;
}
#modal-content p, #modal-content li {
font-size: 16px;
line-height: 1.6;
margin: 10px 0;
color: #333;
}
#modal-content ul {
padding-left: 20px;
margin: 10px 0;
}
/* Фіксований блок для кнопки */
#close-modal-wrapper {
position: sticky;
bottom: 0;
left: 0;
width: 100%;
background: transparent;
text-align: center;
padding: 10px 0;
}
/* Жовта кнопка "Закрити" */
#close-modal {
background-color: #ffcc00;
color: #000;
border: none;
padding: 15px 20px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
display: inline-block;
width: 100%;
max-width: 600px;
margin: 0 auto;
border-radius: 5px;
}
/* При наведенні на кнопку */
#close-modal:hover {
background-color: #ffb700;
color: #000; /* Чорний текст */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
/* Адаптація для мобільних пристроїв */
@media (max-width: 768px) {
#cookie-banner {
flex-direction: column;
text-align: center;
padding: 15px;
}
#cookie-banner span {
margin-bottom: 10px;
font-size: 14px;
}
#cookie-banner button {
font-size: 14px;
margin: 5px 0;
width: 100%;
}
#modal-content {
max-height: 90vh;
padding: 15px;
}
#modal-content h2 {
font-size: 18px;
}
#modal-content p, #modal-content li {
font-size: 14px;
}
#close-modal {
font-size: 14px;
padding: 8px 15px;
}
}
/* Блокування прокручування основної сторінки */
body.no-scroll {
overflow: hidden;
}
#cookie-banner {
display: none;
opacity: 0;
transition: opacity 1s ease-in-out;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #1E293B;
color: white;
padding: 10px;
text-align: center;
z-index: 1000;
}
#modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1001;
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.no-scroll {
overflow: hidden;
}
#cookie-banner a {
color: #ffcc00;
text-decoration: underline;
cursor: pointer;
}
#cookie-banner a:visited {
color: #ffcc00;
}
#cookie-banner a:hover {
color: #ffb700;
}
/* Секція соціальних мереж */
#social-media-section {
  background: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
  margin: 20px auto;
  max-width: 1200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#social-media-section .container-social h3 {
  font-size: 1.4em;
  color: #474040;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 25px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.social-media-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.social-media-links li {
  margin: 0;
}

.social-media-links a {
  display: inline-block; /* Змінено на inline-block для простоти */
  width: 50px;
  height: 50px;
  border: 2px solid #FF8C00;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  overflow: hidden; /* Щоб обрізати зображення по колу */
  background-color: #ffffff; /* Фоновий колір, якщо зображення не заповнює все коло */
}

.social-media-links a img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Масштабує зображення, щоб заповнити контейнер, може обрізати */
  display: block; /* Забирає можливий нижній відступ у inline зображень */
}

.social-media-links a:hover {
  border-color: #FF8C00;
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Можна змінити фон або додати інший ефект для зображення при наведенні,
     наприклад, легке затемнення через псевдоелемент або фільтр
  */
}

/* Адаптивність */
@media (max-width: 768px) {
  #social-media-section .container-social h3 {
    font-size: 1.2em;
  }

  .social-media-links a {
    width: 45px;
    height: 45px;
  }

  .social-media-links {
    gap: 15px;
  }
}

/* Global box-sizing and root font-size for rem units */
    *, *::before, *::after { box-sizing: border-box; }
    html { font-size: 16px; }
    
    .google-reviews {
      width: 90%;
      max-width: 450px;
      margin: 2rem auto;
      background: #fff;
      border-radius: 1rem;
      box-shadow: 0 0.125rem 0.75rem rgba(60,64,67,.16), 0 0.09375rem 0.1875rem rgba(60,64,67,.08);
      padding: 1.5rem 1rem;
      overflow: hidden;
    }
    .google-reviews-title {
      display: flex;
      align-items: center;
      font-size: 1.125rem;
      font-weight: 500;
      color: #1a73e8;
      margin-bottom: 1.25rem;
      letter-spacing: 0.02em;
      gap: 0.625rem;
    }
    .google-reviews-title svg { width: 1.75rem; height: 1.75rem; }
    .review {
      display: block;
      border-radius: 0.875rem;
      padding: 1rem;
      margin-bottom: 0.75rem;
      background: #fff;
      box-shadow: 0 0.09375rem 0.4375rem rgba(60,64,67,.08);
      border: 1px solid #f1f3f4;
      text-decoration: none;
      transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .review:hover {
      background: #f8fafd;
      box-shadow: 0 0.25rem 1.25rem rgba(26,115,232,0.09);
      border-color: #e5efff;
    }
    .review-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .avatar {
      flex-shrink: 0;
      width: 10vw;
      max-width: 38px;
      height: 10vw;
      max-height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e3eeff 0%, #e5eafc 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1967d2;
      font-weight: 500;
      font-size: 1.125rem;
      text-transform: uppercase;
      border: 1.5px solid #e5efff;
      box-shadow: 0 0.0625rem 0.1875rem rgba(60,64,67,.07);
    }
    .user-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .user-name {
      font-weight: 500;
      color: #1a202c;
      font-size: 1rem;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .stars {
      margin-top: 0.125rem;
      display: flex;
      align-items: center;
      gap: 0.0625rem;
    }
    .star-icon { width: 1.125rem; height: 1.125rem; }
    .review-date {
      color: #7c7c7c;
      font-size: 0.8125rem;
      margin-left: 0.25rem;
      white-space: nowrap;
    }
    .review-text {
      color: #3c4043;
      font-size: 0.9375rem;
      margin-top: 0.625rem;
      line-height: 1.5;
      word-break: break-word;
    }
    @media (min-width: 600px) {
      .google-reviews { padding: 1.5rem 1.25rem; }
    }
    @media (min-width: 1024px) {
      .google-reviews { max-width: 550px; }
    }