/* ---------- Reset & global ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; width:100%; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden; }

/* ================= HERO ================= */
.hero { position: relative; width: 100%; height: 100vh; background: black; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.hero .logo { width: 280px; opacity: 0; animation: fadeIn 1.2s forwards, fadeOut 1s forwards 1.2s; z-index: 3; }
.hero::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: url("https://i.ibb.co/PsrwMSG0/Whats-App-Image-2025-08-25-at-3-15-47-PM.jpg") no-repeat center center/cover; animation: slideDown 2s ease-in-out forwards; animation-delay: 1.2s; z-index: 1; }
.headline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Great Vibes', cursive; font-size: clamp(1.5rem, 5vw, 3.5rem); color: #fff; white-space: nowrap; opacity: 0; animation: fadeUp 1.5s ease forwards; animation-delay: 3s; z-index: 2; text-align: center; }

@keyframes fadeIn { from { opacity:0; transform: scale(0.9);} to { opacity:1; transform: scale(1);} }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes slideDown { from { top: -100%; } to { top: 0; } }
@keyframes fadeUp { from { opacity:0; transform: translate(-50%, -40%);} to { opacity:1; transform: translate(-50%, -50%);} }

section { padding: 40px 8%; }

/* ================= ABOUT ================= */
.about-section { background-color: #f8f6f2; color: #333; line-height: 1.6; }
.about-section h2.section-title { font-size: 2.3rem; font-weight: bold; margin-bottom: 15px; text-align:left; color:#222; position:relative; }
.about-section h2.section-title::after { content:""; display:block; width:70px; height:3px; background-color:#B6A385; margin-top:8px; }
.about-container { display: grid; grid-template-columns: 1fr 1fr; gap:25px; align-items: center; }
.about-container img { width:100%; height:100%; object-fit: cover; object-position: right center; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.12); }
.about-text p { margin-bottom:12px; font-size:1.05rem; }
.mv-container { display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:25px; }
.mv-box { background-color: #B6A385; color:#fff; padding:22px; border-radius:12px; box-shadow:0 3px 8px rgba(0,0,0,0.18); transition: transform .3s ease; }
.mv-box:hover { transform: translateY(-6px); }
.mv-box h3 { margin-bottom:8px; font-size:1.4rem; font-weight:bold; }

@media (max-width:900px) {
  .about-container { grid-template-columns: 1fr; text-align:center; }
  .mv-container { grid-template-columns: 1fr; }
}

/* ================= HOT DEALS ================= */
.hot-deals-section { padding: 50px 5%; background: #fff; }
.hot-deals-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.deal-card { position:relative; overflow:hidden; border-radius:10px; cursor:pointer; }
.deal-card img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.deal-card:hover img { transform: scale(1.1); }
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,.5); display:flex; justify-content:center; align-items:center; text-align:center; }
.overlay h3 { color:#fff; font-size:20px; font-weight:700; margin:0; text-transform:uppercase; letter-spacing:1px; }
@media (max-width:1024px) { .hot-deals-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px)  { .hot-deals-grid { grid-template-columns: 1fr; } }

/* ================= MATERIALS ================= */
.materials-section { background-color: #dcd0bf; padding: 60px 40px; }
.materials-section .section-title { max-width:1200px; margin:0 auto 24px; text-align:center; position:relative; padding:4px 12px 0; }
.materials-heading { margin:0; font-size:34px; line-height:1.25; font-weight:800; letter-spacing:.4px; color:#2a2a2a; display:inline-flex; align-items:center; gap:10px; position:relative; }
.materials-heading .heading-accent { position:relative; padding:0 4px; }
.materials-heading .heading-accent::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px; border-radius:2px; background: linear-gradient(90deg,#d4a373,#c08457); }
.materials-section .heading-sub { margin:14px 0 4px; font-size:15px; color:#4b4b4b; letter-spacing:.2px; }
.materials-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; max-width:1200px; margin:0 auto; }
@media (max-width:1024px) { .materials-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px)  { .materials-grid { grid-template-columns: 1fr; } }
.material-card { display:flex; flex-direction:column; background: linear-gradient(145deg,#fff,#f9f5ef); border-radius:20px; box-shadow:0 6px 15px rgba(0,0,0,0.08); overflow:hidden; transition: all .3s ease; }
.material-card:hover { transform: translateY(-6px); box-shadow:0 10px 20px rgba(0,0,0,0.12); }
.card-image { height:280px; background:#e9e6e1; overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.material-card:hover .card-image img { transform: scale(1.05); }
.card-title { padding:16px; font-size:18px; font-weight:600; text-align:center; color:#222; position:relative; }
.card-title::after { content:""; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:40%; height:3px; border-radius:2px; background: linear-gradient(90deg,#d4a373,#c08457); }

.download-wrap { max-width:1200px; margin:32px auto 0; display:flex; justify-content:center; }
.download-btn.fancy { --btn-bg: #6b5f4c; --btn-bg-hover:#5f5443; --btn-bg-active:#544b3c; --gloss: rgba(255,255,255,0.25); --shadow: rgba(0,0,0,0.18); --shadow-strong: rgba(0,0,0,0.28); --ring: rgba(107,95,76,0.45); display:inline-flex; gap:10px; align-items:center; text-decoration:none; color:#fff; background: radial-gradient(120% 200% at 20% -50%, var(--gloss) 0%, transparent 60%), var(--btn-bg); padding:14px 24px; border-radius:14px; font-weight:800; letter-spacing:.3px; box-shadow:0 10px 20px var(--shadow); position:relative; overflow:hidden; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.download-btn.fancy .btn-icon { font-size:18px; transition: transform 180ms ease; }
.download-btn.fancy .btn-text { font-size:16px; white-space:nowrap; }
.download-btn.fancy:hover .btn-icon { transform: translateY(1px); }
.download-btn.fancy::before { content:""; position:absolute; inset:0; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.25) 45%, transparent 60%); transform: translateX(-120%); transition: transform 500ms ease; }
.download-btn.fancy:hover::before { transform: translateX(120%); }
.download-btn.fancy::after { content:""; position:absolute; inset:-8px; border-radius:16px; box-shadow:0 0 0 0 var(--ring); opacity:0; transition: box-shadow 280ms ease, opacity 280ms ease; }
.download-btn.fancy:active::after { box-shadow:0 0 0 10px var(--ring); opacity:1; }
.download-btn.fancy:hover { background: radial-gradient(120% 200% at 20% -50%, var(--gloss) 0%, transparent 60%), var(--btn-bg-hover); transform: translateY(-2px); box-shadow:0 14px 28px var(--shadow-strong); }
.download-btn.fancy:active { background: radial-gradient(120% 200% at 20% -50%, var(--gloss) 0%, transparent 60%), var(--btn-bg-active); transform: translateY(0); box-shadow:0 10px 20px var(--shadow); }
@media (max-width:400px) { .download-btn.fancy .btn-text { font-size:15px; } }

/* ================= USP ================= */
.usp-section { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:30px; padding:60px 20px; max-width:1200px; margin:0 auto; background-color: #78866B; font-family: 'Courier Prime', monospace; }
.usp-box { text-align:center; padding:20px; }
.usp-icon { font-size:40px; margin-bottom:15px; }
.usp-title { font-size:20px; font-weight:700; margin-bottom:10px; }
.usp-text { font-size:15px; line-height:1.5; }

/* ================= FOOTER ================= */
.footer { background:#000; color:#FFF; font-family:'Courier Prime', monospace; text-align:center; padding:30px 20px; }
.footer-logo img { width:250px; margin-bottom:25px; }
.footer-contact { display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; margin-bottom:20px; }
.contact-item { display:flex; align-items:center; gap:10px; }
.contact-text { font-size:14px; word-break:break-word; }
.icon-circle { display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px; background-color:#222; color:#FFF; border-radius:50%; font-size:18px; }
.divider { width:1px; height:60px; background-color:#FFF; }
.footer-bottom { font-size:12px; border-top:1px solid #FFF; padding-top:10px; }

@media (max-width:1024px) { .footer-logo img { width:200px; } .divider { height:50px; } }
@media (max-width:768px) { .footer-logo img { width:180px; } .footer-contact { flex-direction:column; gap:20px; } .divider { display:none; } }