/* Загальні стилі */
			body {
				font-family: Arial, sans-serif;
				text-align: center;
				margin: 0;
				padding: 0;
			}
	
		
			.inverters-p {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				margin: 20px auto 0;
				width: 70% !important; /* Встановлює ширину 80% з пріоритетом */
				max-width: 1200px; /* Обмежує максимальну ширину для великих екранів */
			}
	
			
			h1 {
				margin-bottom: 30px;
				font-size: 26px;
				color: #222;
				animation: fadeIn 1.5s ease;
			}
			.container {
				display: flex;
				justify-content: center;
				gap: 5px;
				flex-wrap: wrap;
				margin-top: 20px;
				padding: 20px 10px;
				max-width: 1200px;
				margin-left: auto;
				margin-right: auto;
			}

	
			.column {
				width: 30%; /* Для трьох блоків в рядку */
				text-align: center;
				position: relative;
				background-color: #b9daf9;
				border-radius: 10px;
				padding: 20px 10px;
			}
	
			/* Налаштування для мобільних пристроїв */
		@media (max-width: 768px) {
			.column {
				width: 100%; /* Для повної ширини на мобільних пристроях */
				margin-bottom: 10px;
		}
		}

	
			.column img {
				width: 300px;
				height: 333px;
				object-fit: cover;
				border-radius: 10px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			}
			.column::after {
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 300px;
				height: 333px;
				border-radius: 10px;
				background-color: rgba(0, 0, 0, 0.3);
				opacity: 0;
				transition: opacity 0.3s ease;
				z-index: 2;
			}
			.column:hover::after {
				opacity: 1;
			}
			.caption {
				font-size: 18px;
				font-weight: bold;
				text-transform: uppercase;
				margin: 10px;
			}
			.details {
				width: 60%;
				text-align: left;
				font-size: 14px;
				color: #555;
				margin: 5px auto 0 auto;
				line-height: 1.5;
				padding-left: 10px;
			}
			.order-button {
				display: inline-block;
				margin-top: 10px;
				padding: 10px 20px;
				font-size: 16px;
				color: #fff;
				background-color: #28a745;
				border: none;
				border-radius: 5px;
				text-decoration: none;
				cursor: pointer;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				transition: background-color 0.3s ease, box-shadow 0.3s ease;
			}
			.order-button:hover {
				background-color: #218838;
				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
			}
	
			@media (max-width: 768px) {
				.container {
					flex-direction: column;
					align-items: center;
				}
				.column {
					width: 90%;
					margin-bottom: 20px;
				}
				.column img {
					width: 100%;
					height: auto;
				}
				footer {
					flex-direction: column;
					align-items: center;
				}
				.footer-column {
					width: 100%;
					text-align: center;
					margin-bottom: 15px;
				}
			}
			
      
		
        /* Анімація */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }