/* UBEST HOMEPAGE CSS - NAMESPACE: ubest-hp- */

/* Reset & Basic */
.ubest-hp-main { overflow-x: hidden; clear: both; background: #fff; }
.ubest-hp-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ubest-hp-title { text-align: center; margin: 60px 0 40px; font-size: 32px; font-weight: 700; color: #222; }
.ubest-hp-title::after { content:''; display:block; width:40px; height:3px; background:#0056b3; margin:15px auto 0; }

/* 1. Hero Fixes (Corrected from Screenshot) */
.ubest-hp-hero { 
    position: relative; 
    height: 600px; /* Forces height to prevent collapse */
    background: #111; 
    overflow: hidden; 
}
.ubest-hp-slide { 
    position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; 
    background-size: cover; background-position: center; display: flex; align-items: center; 
}
.ubest-hp-active { opacity: 1; z-index: 2; }
.ubest-hp-hero-content { color: #fff; max-width: 700px; z-index: 5; }
.ubest-hp-hero-content h1 { font-size: 44px; line-height: 1.2; margin-bottom: 10px; }
.ubest-hp-hero-sub { margin-top: 30px; border-left: 4px solid #0056b3; padding-left: 20px; }

/* 2. Brands Grid (2x4) */
.ubest-hp-brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ubest-hp-brand-item { 
    border: 1px solid #eee; padding: 30px 15px; text-align: center; transition: 0.3s; background:#fff; text-decoration: none !important;
}
.ubest-hp-brand-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.ubest-hp-brand-img img { height: 50px; width: auto; object-fit: contain; margin-bottom: 15px; }
.ubest-hp-brand-item h4 { color: #555; font-size: 15px; margin: 0; }

/* 3. Products & News - Line Clamp (3 lines) */
.ubest-hp-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ubest-hp-news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.ubest-hp-product-card, .ubest-hp-news-card { background: #fff; border-radius: 4px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); overflow: hidden; }
.ubest-hp-product-thumb img, .ubest-hp-news-img img { width: 100%; height: 200px; object-fit: cover; }
.ubest-hp-product-body, .ubest-hp-news-body { padding: 20px; }

.ubest-hp-line-clamp-3 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; 
    overflow: hidden; font-size: 14px; color: #666; line-height: 1.6;
}

/* 4. Contact Form (CF7 Styling) */
.ubest-hp-contact-section { background: #f9f9f9; padding: 80px 0; }
.ubest-hp-contact-wrapper { display: grid; grid-template-columns: 4fr 6fr; gap: 60px; }
.ubest-hp-contact-form input, .ubest-hp-contact-form textarea {
    width: 100% !important; padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;
}
.ubest-hp-contact-form input[type="submit"] {
    background: #0056b3; color: #fff; border: none; padding: 15px 40px; cursor: pointer; font-weight: 700;
}

/* 5. Responsive */
@media (max-width: 992px) {
    .ubest-hp-products-grid { grid-template-columns: 1fr 1fr; }
    .ubest-hp-news-grid { grid-template-columns: 1fr 1fr; }
    .ubest-hp-contact-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ubest-hp-brands-grid { grid-template-columns: 1fr 1fr; }
    .ubest-hp-hero { height: 400px; }
    .ubest-hp-hero-content h1 { font-size: 28px; }
}