/* RESET & FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #F2F3F7; color: #333; }
img { max-width: 100%; display: block; }

/* UTILS */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.blue-text { color: #2C74B3; }
.text-center { text-align: center; }
hr {margin: 3% 0;}

/* NAVBAR */
.navbar { background: #fff; padding: 20px 0; border-bottom: 1px solid #eee; }
.flex-nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 900; font-size: 1.2rem; }
.nav-right { display: flex; align-items: center; gap: 30px; }
.socials { display: flex; gap: 15px; font-size: 0.9rem; }
.buy-btn { background: #000; color: #fff; border: none; padding: 10px 25px; border-radius: 50px; font-weight: 900; font-size: 0.7rem; cursor: pointer; }

/* HERO */
.hero { display: flex; gap: 50px; padding: 80px 0; align-items: center; }
.hero-text { flex: 1.2; }
.hero-text h1 { font-size: 3.8rem; font-weight: 900; line-height: 0.85; letter-spacing: -2px; margin-bottom: 25px; }
.hero-text p { font-size: 0.9rem; color: #666; max-width: 450px; }
.hero-img { flex: 1; position: relative; }
.hero-img img { border-radius: 8px; box-shadow: 20px 20px 0 #fff; }

/* SPLIT IMAGES */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split img { height: 400px; object-fit: cover; width: 100%; }

/* SLOGAN */
.slogan { padding: 100px 0; text-align: center; }
.slogan h2 { font-size: 1.6rem; font-weight: 800; font-style: italic; max-width: 800px; margin: 0 auto; }

/* FEATURES */
.features { display: flex; gap: 80px; padding-bottom: 100px; align-items: flex-start; }
.features-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; }
.icon-box { justify-items: center; text-align: center; gap: 15px; }
.circle { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem; margin: 20px;}
.icon-txt h4 { font-size: 1rem; font-weight: 900; margin-bottom: 5px; }
.icon-txt p { font-size: 0.9rem; color: #888; }

/* Colors */
.c1 { background: #1a3c5e; } .c2 { background: #2e5b2a; } .c3 { background: #4a90e2; }
.c4 { background: #f5a623; } .c5 { background: #1e3a1a; } .c6 { background: #e67e22; }

.man-img { flex: 1; }
.man-img img { border-radius: 8px; width: 100%; }
.cap { margin-top: 20px; font-weight: 900; text-align: center; font-size: 1.1rem; }

/* BLUE AREA */
.blue-area { background: #8EB1D7; color: #000000; padding: 100px 0; }
.blue-area h2 { font-size: 2.5rem; font-weight: 900; margin-bottom: 20px; } 
.blue-area p { max-width: 900px; margin: 0 auto 50px; font-size: 1.2rem; }
.arc-mask { max-width: 600px; height: 400px; margin: 0 auto; border-radius: 300px 300px 0 0; overflow: hidden;  }
.arc-mask img { height: 100%; object-fit: cover; width: 100%; }

/* USAGE AREA */
.usage { display: flex; gap: 80px; padding: 120px 20px; align-items: center; }
.arc-left { flex: 1; border-radius: 300px 300px 0 0; overflow: hidden; border: 1px solid #ddd; height: 500px; }
.arc-left img { height: 100%; object-fit: cover; width: 100%; }
.usage-content { flex: 1; }
.thumb { display: flex; gap: 15px; margin-bottom: 30px; }
.thumb img { width: 200px; height: 200px; object-fit: cover; border-radius: 4px; }
.usage-content h3 { font-weight: 900; font-size: 2rem; margin-bottom: 20px; }
.usage-content ul { list-style: none; margin-bottom: 40px; }
.usage-content li { font-weight: 700; margin-bottom: 10px; }
.buy-black { background: #000; color: #fff; border: none; padding: 15px 40px; border-radius: 50px; font-weight: 900; cursor: pointer; }

/* FOOTER */
.footer { background: #2071B1; color: #fff; padding: 40px 0; }
.footer-flex { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: 500; }
.f-contact { text-align: right; opacity: 0.8; }

/* MOBILE */
@media (max-width: 768px) {
    .hero, .features, .usage { flex-direction: column; text-align: center; }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-text p { margin: 0 auto 30px; }
    .features-grid { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
}