/* Общие сбросы и база */
*, *::before, *::after { box-sizing: border-box; }


/* Улучшение читаемости основного текста */
main {
   padding: 40px;
   /* max-width: 1100px; */
}


/* Оформление "списков", которые сделаны обычным текстом */
main h3 + p {
   border-left: 11px solid var(--golden-rod);
   padding-left: 20px;
   margin-left: 10px;
   font-style: italic;
   color: var(--clr-text-regular-inverted);
}

/* Подсветка ключевых слов */
.accent-word {
   font-size:  1.1rem;
   font-weight: bold;
   color: var(--golden-rod);
   margin-top: 10px;
}



/* 2 столбца: sidebar слева и страница справа */
.container { 
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr; /* 1fr = "одна свободная доля" */
}

body {
   margin: 0;
   font-family: sans-serif;
   font-weight: 400;
   color: #111;
   background-color: #fff;
   text-align: justify;
   font-size: 17px;
   line-height: 1.5;
}

h1, h3 { color: var(--golden-rod); }
h2 { 
   font-size: 1.7rem; 
   color: var(--golden-rod) 
}
h3 { 
   font-size: 1.2rem; 
   margin: 30px 0 0 12px;
   text-align: center;
   text-transform: capitalize;
}


p {
   font-size: 18px;
   margin: 15px 15px;
}

a {
   color: hsl(240, 100%, 60%);
   text-decoration: underline;
}
a:hover {
   color: hsl(220, 100%, 70%);
   text-decoration: underline;
}


/* Специфические блоки */
.title-text1 {
   font-size: 1.2rem;
   font-weight: bold;
   color: var(--clr-black);
   padding: 15px 70px;
   text-align: center;
}




/* --- УСЛУГИ (карточки) --- */
.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
   padding: 0;
   justify-items: center;
}


/* Сама карточка */
.services-item {
   position: relative; /* Чтобы оверлей был внутри */
   overflow: hidden;   /* Чтобы оверлей не вылезал за края */
   background: var(--clr-services-item);
   padding: 0px 20px;
   border-radius: 20px;
   text-align: center;
   border: 1px solid var(--golden-rod);
   box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   max-width: 420px;
   height: 350px; /* Фиксированная высота, чтобы все были ровные */
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
}


.services-item p {
   color: var(--clr-text-regular);
   font-size: 15px;
}


.services-item:hover {
   transform: scale(1.03);
   box-shadow: 5px 0px 7px rgba(0,0,0,0.1);
}

/* Фейковая круглая иконка с БУКВОЙ - средствами CSS */
.services-icon-placeholder {
   width: 70px; height: 70px;
   background: var(--bg-gray);
   color: var(--secondary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 25px;
   font-size: 2rem;
   font-weight: bold;
}

/* Всплывающий слой (Overlay) */
.services-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(250, 250, 250, 0.95); 
   color: black;
   padding: 0px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: justify;
   
   /* Скрываем .services-overlay внизу, но не весь */
   transform: translateY(95%);
   transition: transform 0.4s ease-in-out;
}

/* Показываем .services-overlay при наведении */
.services-item:hover .services-overlay {
   transform: translateY(0);
}

.services-overlay p {
   font-size: 15px;
   color: black;
   font-weight: 500;
   line-height: 1.1;
   padding: 0;
   margin: 30px;
}
/* ================== */




/* Секция НАШИ ПРЕИМУЩЕСТВА */
.boxes-grid {
   display: flex;
   justify-content: center;
   gap: 90px;
   padding: 20px 10px;
   max-width: 70rem;
   margin: 0px auto 70px;
}

.box-item {
   flex: 0 0 33.33%;
   border: 1px solid #111;
   padding: 20px;
   text-align: center;
   background: #fff;
}

/* Звёздочка в сетке */
.boxes-icon svg {
   display: block;
   margin: 0 auto;
   height: 2.5rem;
   width: 2.5rem;
}
/* END: Секция НАШИ ПРЕИМУЩЕСТВА */


/* Красивое оформление таблицы */
table {
   width: 80%;
   border-collapse: collapse;
   margin: 20px auto 70px;
   background-color: #fff;
   border-radius: 12px;
   overflow: hidden; /* Чтобы скругления работали */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

table tr:first-child {
   background-color: var(--golden-rod); /* Используем ваш золотой цвет */
   color: white;
}

table td {
   padding: 15px 20px;
   border-bottom: 1px solid #eee;
   font-size: 16px;
}

table tr:first-child td {
   font-weight: bold;
   font-size: 1rem;
   letter-spacing: 1px;
}

table tr:nth-child(even) {
   background-color: #f9f9f9; /* Эффект ЗЕБРЫ */
}

table tr:hover:not(:first-child) {
   background-color: #ebd065; /* подсветка при наведении */
   transition: background-color 0.5s ease;
}

table td:first-child {
   font-size: 1rem;
   font-weight: bold;
   color: var(--golden-rod);
   width: 25%; /* размер колонки с брендами */
}