/*================================== Dental Hero Pro v1 ===================================*/ :root{ --primary:#0A84FF; --primary2:#33A1FF; --dark:#0F172A; --text:#334155; --white:#ffffff; } .dental-hero{ position:relative; width:100%; height:850px; overflow:hidden; background: linear-gradient(135deg,#F8FBFF 0%,#EDF5FF 50%,#F9FCFF 100%); display:flex; align-items:center; } .hero-container{ width:1400px; max-width:92%; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; z-index:5; position:relative; } .hero-left h1{ font-size:74px; font-weight:800; line-height:1.05; color:var(--dark); margin-bottom:25px; } .hero-left h1 span{ color:var(--primary); } .hero-left p{ font-size:21px; line-height:1.8; color:#64748B; max-width:620px; margin-bottom:40px; } .hero-badge{ display:inline-flex; padding:12px 24px; border-radius:999px; background:#fff; border:1px solid rgba(10,132,255,.15); backdrop-filter:blur(25px); font-weight:700; margin-bottom:30px; color:var(--primary); box-shadow: 0 20px 40px rgba(10,132,255,.08); } .hero-buttons{ display:flex; gap:18px; margin-bottom:60px; } .hero-btn{ padding:18px 36px; border-radius:999px; background:linear-gradient(135deg,#0A84FF,#3DAEFF); color:#fff; font-weight:700; text-decoration:none; transition:.4s; box-shadow: 0 25px 60px rgba(10,132,255,.35); } .hero-btn:hover{ transform:translateY(-6px); box-shadow: 0 35px 80px rgba(10,132,255,.45); } .hero-btn.outline{ background:#fff; color:var(--primary); border:1px solid rgba(10,132,255,.18); } .hero-stats{ display:flex; gap:55px; } .hero-stats h2{ font-size:40px; color:var(--primary); margin-bottom:5px; } .hero-stats span{ color:#64748B; font-weight:500; } .hero-right{ position:relative; height:760px; } .glass{ position:absolute; width:600px; height:600px; right:40px; top:70px; background:rgba(255,255,255,.22); backdrop-filter:blur(40px); border-radius:45px; border:1px solid rgba(255,255,255,.5); box-shadow: 0 30px 80px rgba(10,132,255,.12); } .product{ position:absolute; transition:.8s; filter: drop-shadow(0 35px 45px rgba(0,0,0,.18)); animation:floating 6s ease-in-out infinite; } .p1{ width:230px; left:20px; top:20px; } .p2{ width:210px; right:0; top:150px; animation-delay:1s; } .p3{ width:220px; left:140px; bottom:130px; animation-delay:2s; } .p4{ width:210px; right:140px; top:20px; animation-delay:3s; } .p5{ width:220px; right:80px; bottom:20px; animation-delay:4s; } @keyframes floating{ 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(-18px); } }