:root {
 --bg-light: #dff4fe;
 --bg-accent: #f8f9e6;
 --menu-bg: #e3ebb6;
 --text-dark: #333333;
 --text-gray: #666666;
 --primary-green: #4a611a;
 --accent-red: #e80b0a;
}

body {
 margin: 0;
 padding: 0;
 font-family: Tahoma, Arial, sans-serif;
 color: var(--text-dark);
 line-height: 1.6;
}

header {
 background-color: var(--bg-light);
 padding-right: 20px;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
}

.header-logo {
 display: flex;
}

.header-logo img {
 height: auto;
 max-width: 100%;
}

.contact-info {
 display: flex;
 align-items: center;
 gap: 15px;
}

.phone1 {
 font-size: 1.2rem;
 color: var(--text-gray);
}

.phone2 {
 font-size: 1.5rem;
 font-weight: bold;
 color: var(--text-gray);
}

nav {
 background: var(--menu-bg);
 border-bottom: 2px solid var(--primary-green);
}

.menu-container {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 margin: 0;
 padding: 0;
}

.menu-container li a, .menu {
 display: block;
 padding: 12px 25px;
 font-size: 13pt;
 color: var(--primary-green);
 text-decoration: none;
 font-weight: bold;
 transition: all 0.3s ease;
}

.menu-container li a:hover {
 background: #d4de9f;
 color: var(--accent-red);
}

main {
 max-width: 1200px;
 margin: 0 auto;
 padding: 20px;
}

.ac {
 font-size: 24pt;
 color: var(--accent-red);
 font-weight: bold;
 display: block;
 margin-bottom: 15px;
}

.titul {
 font-size: 20pt;
 color: var(--primary-green);
 margin: 20px 0 10px;
}

.acc {
 font-size: 14pt;
 color: var(--text-gray);
}

.calc {
 font-size: 13pt;
 color: var(--text-gray);
}

.link {
 font-size: 13pt;
 color: var(--accent-red);
 text-decoration: underline;
}

.info-section {
 background-color: var(--bg-accent);
 padding: 25px;
 border-radius: 8px;
 margin-bottom: 30px;
 border-left: 5px solid var(--primary-green);
}

.content-images {
 text-align: center;
 margin: 30px 0;
}

.content-images img {
 max-width: 100%;
 height: auto;
 margin-bottom: 20px;
 border-radius: 5px;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#info {
 background: var(--menu-bg);
 border: 1px solid var(--primary-green);
 font-size: 13pt;
 color: var(--primary-green);
 padding: 10px;
 position: absolute;
 visibility: hidden;
 border-radius: 4px;
}

footer {
 background: var(--bg-accent);
 padding: 30px 20px;
 text-align: center;
 border-top: 1px solid #ddd;
}

@media (max-width: 768px) {
 header {
  flex-direction: column;
  gap: 20px;
  text-align: center;
 }

 .menu-container {
  justify-content: center;
 }

 .menu-container li a {
  padding: 10px 15px;
  font-size: 11pt;
 }

 .ac {
  font-size: 18pt;
 }

 .titul {
  font-size: 16pt;
 }
}
/* Стилізація карток продукції */
.product-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 20px;
 margin-top: 25px;
}

.product-card {
 background: #fff;
 border: 1px solid #ddd;
 border-radius: 8px;
 overflow: hidden;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 cursor: pointer;
 text-align: center;
}

.product-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 border-color: var(--primary-green);
}

.product-card img {
 width: 100%;
 height: 150px;
 object-fit: cover;
 display: block;
}

/* Стилі для модального вікна (Preview) */
.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.85);
 align-items: center;
 justify-content: center;
 cursor: zoom-out;
}

.modal-content {
 max-width: 90%;
 max-height: 90%;
 border-radius: 5px;
 box-shadow: 0 0 20px rgba(0,0,0,0.5);
 cursor: default;
}

.close-modal {
 position: absolute;
 top: 20px;
 right: 30px;
 color: #fff;
 font-size: 40px;
 font-weight: bold;
 cursor: pointer;
}

/* Додаткові стилі для цієї сторінки */
.portfolio-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 25px;
 margin-top: 30px;
}

.portfolio-card {
 background: #fff;
 border: 1px solid #ddd;
 border-radius: 8px;
 overflow: hidden;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 cursor: pointer;
}

.portfolio-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.portfolio-card img {
 width: 100%;
 height: 200px;
 object-fit: cover;
 display: block;
}

.portfolio-caption {
 padding: 12px;
 font-size: 14px;
 text-align: center;
 background: var(--bg-accent);
 color: var(--primary-green);
 font-weight: bold;
}

.partners-block {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 margin: 40px 0;
 padding: 20px;
 background: var(--bg-accent);
 border-radius: 8px;
 justify-content: center;
}

.partner-item {
 text-align: center;
 max-width: 250px;
}

.partner-item img {
 border: 2px solid #fff;
 border-radius: 4px;
 margin-top: 10px;
 transition: opacity 0.3s;
}

.partner-item img:hover {
 opacity: 0.8;
}