/***************************************
========================================

	Author Name   : Themeplaza
	This is HTML5 template
	Template Name : Halloween Animated Banner Collection
	Version: 1.0
	
****************************************
=======================================/

-----------------------------------------------------------------*/


<style>
:root{--orange:#ff7a00;--gold:#ffd12f;--ink:#10091c}
*{box-sizing:border-box}
body{margin:0;background:#0b0712;color:#fff;font-family:Inter,Arial,sans-serif}
.page-head{text-align:center;padding:46px 20px 24px;background:radial-gradient(circle at top,#3c145d,#10091c 65%)}
.page-head .tag{font-size:12px;letter-spacing:4px;color:#ffc15c;font-weight:800}
.page-head h1{font-size:clamp(28px,5vw,54px);margin:12px 0 8px}
.page-head p{color:#cfc3df;margin:0}
.banner{position:relative;isolation:isolate;overflow:hidden;min-height:390px;margin:24px auto;max-width:1180px;border-radius:20px;padding:clamp(28px,6vw,72px);display:flex;align-items:center;box-shadow:0 18px 60px #0008}
.banner .copy{position:relative;z-index:2;max-width:650px}
.kicker{font-size:12px;letter-spacing:4px;font-weight:800;text-transform:uppercase}
.banner h2{font-size:clamp(40px,7vw,78px);line-height:.98;margin:18px 0;font-weight:950;letter-spacing:-2px}
.banner p{font-size:17px;line-height:1.6;max-width:470px}
.cta{display:inline-block;margin-top:14px;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:1px;padding:15px 24px;border-radius:999px;transition:.25s}
.cta:hover{transform:translateY(-4px) scale(1.04);filter:brightness(1.15)}
.pill{display:inline-block;border:1px solid #ffffff35;border-radius:999px;padding:9px 13px;margin:18px 6px 0 0;font-size:11px;color:#fff}
.float{position:absolute;z-index:1;pointer-events:none}
.bats{font-size:32px;animation:fly 8s linear infinite}
.moon{width:125px;height:125px;border-radius:50%;background:#fff1b9;box-shadow:0 0 65px #a7caff;right:11%;top:10%;animation:moonPulse 4s ease-in-out infinite}
.pumpkin{font-size:clamp(80px,13vw,160px);right:7%;bottom:7%;filter:drop-shadow(0 0 22px #ff6500);animation:bob 3s ease-in-out infinite}
.ghost{font-size:clamp(110px,16vw,190px);right:8%;bottom:8%;filter:drop-shadow(0 0 30px #f8b7ff);animation:bob 2.7s ease-in-out infinite}
.witch{font-size:clamp(100px,16vw,180px);right:8%;bottom:9%;filter:drop-shadow(0 0 25px #ff9c22);animation:floaty 5s ease-in-out infinite}
.spark{font-size:25px;color:#ffd75c;animation:twinkle 1.4s ease-in-out infinite alternate}
.b1{background:radial-gradient(circle at 78% 30%,#244d8b 0,#10172f 38%,#080811 80%);border:1px solid #42619b}
.b1 .kicker{color:#a9d8ff}.b1 h2{color:#fff;text-shadow:0 0 22px #479cff}.b1 h2 span{display:block;color:#ff9b18}.b1 .cta{background:#ff941c;color:#170c17}
.b1:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#070812 0%,transparent 70%);pointer-events:none}
.b2{background:radial-gradient(circle at 75% 45%,#842bba,#3c0c80 43%,#190b3e 78%);border:1px solid #aa65ff}
.b2 .kicker{color:#ffe16b}.b2 h2{color:#ffcf36;text-shadow:0 5px 0 #9e3e13,0 0 25px #ffb000}.b2 h2 span{display:block;color:#fff}.b2 .cta{background:#ffe044;color:#29104b}
.b3{background:radial-gradient(circle at 76% 35%,#ff8a16,#7d2109 40%,#16080a 82%);border:1px solid #ff8a28}
.b3 .kicker{color:#ffd04e}.b3 h2{color:#fff;text-shadow:3px 4px #5d180a}.b3 h2 span{color:#ffc21b}.b3 .cta{background:#ffc21b;color:#251006}
.b4{background:radial-gradient(circle at 78% 42%,#42234c,#171021 50%,#07070d 90%);border:1px solid #6f416d}
.b4 .kicker{color:#ffb65e}.b4 h2{font-family:Georgia,serif;font-weight:700;font-style:italic;color:#fff}.b4 h2 span{color:#ff7a17}.b4 .cta{background:#ff7a17;color:#1c0b13}
.footer{text-align:center;color:#9387a4;padding:12px 20px 40px;font-size:12px}
@keyframes fly{0%{transform:translate(-20vw,0) rotate(-8deg)}50%{transform:translate(25vw,-30px) rotate(8deg)}100%{transform:translate(100vw,15px) rotate(-5deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}
@keyframes twinkle{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.25)}}
@keyframes moonPulse{0%,100%{box-shadow:0 0 40px #a7caff}50%{box-shadow:0 0 75px #fff1b9}}
@media(max-width:650px){.banner{min-height:440px;align-items:flex-start;padding:30px 24px;margin:16px 12px;border-radius:15px}.banner .copy{max-width:100%}.banner p{max-width:300px;font-size:14px}.moon{width:75px;height:75px;right:7%;top:8%}.pumpkin,.ghost,.witch{right:3%;bottom:2%;opacity:.85}.banner h2{font-size:clamp(38px,11vw,60px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
</style>