/* Global */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family: Arial, sans-serif; line-height:1.6; scroll-behavior: smooth; background:#f0f0f5; color:#333;}

/* 3D Text Effect */
h1,h2,h3,p,a {text-shadow: 2px 2px 5px rgba(0,0,0,0.3);}

/* Navbar */
.navbar {display:flex; justify-content:space-between; align-items:center; padding:15px 50px; background:linear-gradient(90deg,#1e3c72,#2a5298); position:sticky; top:0; z-index:100;}
.logo {font-size:1.8rem; font-weight:bold; color:#fff;}
.logo span {color:#ffcc00;}
.navbar ul {display:flex; gap:20px;}
.navbar ul li {list-style:none;}
.navbar a {color:#fff; text-decoration:none; font-weight:bold; transition:0.3s;}
.navbar a:hover {color:#ffcc00;}

/* Hero */
.hero {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('https://ibb.co.com/pjhH5gn3') no-repeat center/cover;
  color:#fff;
  text-align:center;
  padding:120px 20px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero h1 {font-size:3rem; margin-bottom:20px;}
.hero p {font-size:1.3rem; margin-bottom:30px;}
.btn {display:inline-block; padding:12px 25px; background:#ffcc00; color:#000; font-weight:bold; border-radius:8px; box-shadow:0 5px 0 #b38f00; text-decoration:none; transition:0.3s;}
.btn:hover {transform:translateY(-3px); box-shadow:0 8px 15px rgba(0,0,0,0.4);}

/* Features */
.features {text-align:center; padding:70px 20px; opacity:0; transform:translateY(50px); transition: all 1s ease-in-out;}
.features h2 {font-size:2.5rem; margin-bottom:40px;}
.feature-box {display:flex; gap:30px; justify-content:center; flex-wrap:wrap;}
.feature {background:#fff; padding:30px; border-radius:15px; width:280px; box-shadow:5px 5px 15px rgba(0,0,0,0.2); transition:0.3s;}
.feature:hover {transform:translateY(-5px);}

/* Pricing */
.pricing {text-align:center; padding:70px 20px; background:#eef2f9; opacity:0; transform:translateY(50px); transition: all 1s ease-in-out;}
.pricing h2 {font-size:2.5rem; margin-bottom:40px;}
.pricing-box {display:flex; justify-content:center; gap:30px; flex-wrap:wrap;}
.card {background:#fff; padding:30px; border-radius:15px; width:280px; box-shadow:6px 6px 15px rgba(0,0,0,0.2); position:relative; transition:0.3s;}
.card:hover {transform:translateY(-5px);}
.ribbon {position:absolute; top:10px; left:-20px; background:#ff4444; color:#fff; padding:5px 20px; font-size:0.9rem; font-weight:bold; transform:rotate(-15deg); box-shadow:2px 2px 5px rgba(0,0,0,0.4);}
.price {font-size:1.8rem; margin:15px 0; color:#1e3c72;}
.card ul {margin:15px 0;}
.card ul li {list-style:none; margin:8px 0;}

/* About */
.about {text-align:center; padding:70px 20px; opacity:0; transform:translateY(50px); transition: all 1s ease-in-out;}

/* Footer */
footer {background:#1e3c72; color:#fff; text-align:center; padding:20px; margin-top:30px; border-top:4px solid #ffcc00; opacity:0; transform:translateY(50px); transition: all 1s ease-in-out;}

/* Scroll Animation using :target */
section:target,
section:focus-within,
section:hover {opacity:1; transform:translateY(0);}