/* === Root Variables === */
:root{--primary:#b22222;--secondary:#7a1a1a;--highlight:#f6b27c;
--bg-dark:#1c1c1c;--bg-dark-2:#2c2c2c;--bg-dark-3:#1f1f1f;
--text-light:#f0f0f0;--text-muted:#ccc;--radius:12px;--transition:0.3s ease;}

/* === Reset === */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg-dark);color:var(--text-light);line-height:1.6;scroll-behavior:smooth;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* === Animations === */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes gradientHeader{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
@keyframes fadeInUp{from{opacity:0;transform:translate(-50%,-40%);}to{opacity:1;transform:translate(-50%,-50%);}}
@keyframes pulse{0%{transform:translate(50%,-50%) scale(0.9);opacity:0.7;}50%{transform:translate(50%,-50%) scale(1.2);opacity:1;}100%{transform:translate(50%,-50%) scale(0.9);opacity:0.7;}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
@keyframes glowText{0%{text-shadow:0 0 5px rgba(246,178,124,0.5);}100%{text-shadow:0 0 12px rgba(246,178,124,1);}}

/* === Reduce motion === */
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}}

/* === Header === */
header{position:sticky;top:0;z-index:1002;padding:10px 20px;display:flex;justify-content:center;
background:linear-gradient(90deg,var(--bg-dark-2),#4d1f1f,var(--secondary),var(--bg-dark-2));background-size:400% 400%;
animation:gradientHeader 20s ease infinite;box-shadow:0 5px 15px rgba(0,0,0,0.4);border-radius:0 0 20px 20px;}
.header-container{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;}
header .logo img{height:60px;filter:drop-shadow(2px 2px 5px rgba(0,0,0,.7));}

/* === Broadcast === */
.broadcast{width:100%;padding:8px 15px;margin-bottom:15px;display:flex;justify-content:center;align-items:center;
background:#4d1f1f;color:var(--highlight);font-weight:bold;font-size:.95em;box-shadow:0 3px 6px rgba(0,0,0,.3);text-align:center;}
.broadcast-marquee{flex:0 1 auto;overflow:hidden;white-space:nowrap;margin-right:10px;text-align:center;}
.broadcast-marquee p{display:inline-block;padding-left:100%;animation:marquee 35s linear infinite;}
#datetime{white-space:nowrap;}

/* === Navigation === */
nav ul{display:flex;gap:25px;}
nav ul li a,nav ul li button{color:var(--text-light);font-weight:bold;padding:8px 15px;border-radius:8px;transition:var(--transition);}
nav ul li a:hover,nav ul li button:hover{background:linear-gradient(90deg,var(--secondary),var(--primary));transform:translateY(-3px);}

/* === Hamburger === */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:45px;height:45px;padding:10px;
background:rgba(255,255,255,0.1);border-radius:50%;cursor:pointer;z-index:1102;transition:var(--transition);}
.hamburger:hover{background:rgba(255,255,255,0.25);}
.hamburger span{width:25px;height:3px;background:#fff;border-radius:2px;transition:all .3s;}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translateY(8px);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translateY(-8px);}

/* === Mobile Menu === */
.mobile-menu{position:fixed;top:0;right:-100%;width:75%;max-width:300px;height:100%;display:flex;flex-direction:column;gap:20px;
padding:80px 20px;background:var(--bg-dark-2);color:var(--highlight);box-shadow:-5px 0 15px rgba(0,0,0,0.6);
transition:right .5s cubic-bezier(0.77,0,0.175,1);z-index:1103;}
.mobile-menu a,.mobile-menu button{display:block;padding:12px 15px;color:var(--highlight);font-size:1.2em;font-weight:700;text-align:left;
border-radius:8px;background:rgba(255,255,255,0.05);transition:var(--transition);}
.mobile-menu a:hover,.mobile-menu button:hover{background:linear-gradient(90deg,var(--secondary),var(--primary));color:#fff;transform:translateX(5px);}
.mobile-menu.active{right:0;}

/* === Overlay === */
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1001;display:none;opacity:0;transition:opacity .3s;}
.overlay.show{display:block;opacity:1;}

/* === Hero Banner === */
.hero-banner{position:relative;width:100%;aspect-ratio:16/5;height:auto;overflow:hidden;background:#0d0d0d;}
@media(max-width:768px){.hero-banner{aspect-ratio:16/9;max-height:none;}}
.hero-slide{position:absolute;inset:0;}
.hero-slide img{width:100%;height:100%;object-fit:contain;object-position:center;background:#0d0d0d;display:block;}
.hero-slide.is-active,.hero-slide.active{opacity:1;visibility:visible;z-index:1;transform:translateX(0);}
.hero-slide.is-leaving{opacity:0;visibility:hidden;transform:translateX(-4%);}
.hero-indicators{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:2;}
.hero-indicators .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:0;cursor:pointer;transition:background .2s,transform .2s;}
.hero-indicators .dot.is-active{background:#ffcc00;transform:scale(1.08);}
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;overflow:hidden;pointer-events:none;z-index:2;}
.hero-progress>span{display:block;height:100%;width:0%;background:#ffcc00;transition:width .2s linear;}

/* === Section General === */
main section{width:100%;padding:50px 20px;background:rgba(28,28,28,0.85);color:var(--text-light);text-align:center;border-radius:var(--radius);
opacity:0;transform:translateY(40px);transition:all .8s ease-out;}
main section.visible{opacity:1;transform:translateY(0);}
section h2{font-size:2em;margin-bottom:20px;color:var(--highlight);text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
section p{font-size:1.1em;max-width:800px;margin:0 auto 25px;color:var(--text-muted);}

/* === Services & Payment === */
#services,#payment{background:linear-gradient(135deg,var(--bg-dark-2),var(--bg-dark-3));border-radius:15px;padding:40px 20px;
margin:25px auto;max-width:1200px;box-shadow:0 8px 25px rgba(0,0,0,0.5);}
.services-container{display:flex;justify-content:center;align-items:stretch;gap:25px;flex-wrap:nowrap;}
.service-card{flex:1;max-width:280px;background:linear-gradient(145deg,var(--bg-dark-3),var(--bg-dark-2));
border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:25px;text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.5);transition:transform var(--transition),box-shadow var(--transition);
opacity:0;transform:translateY(40px);}
.service-card.visible{opacity:1;transform:translateY(0);}
.service-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px rgba(255,178,124,0.3);}
.service-card .card-header{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:12px;}
.service-card .icon{font-size:1.8em;color:var(--highlight);}
.service-card h3{color:#fff;font-size:1.3em;margin:0;}
.service-card p{color:var(--text-muted);font-size:1em;margin-bottom:15px;}
.progress-wrap{margin:12px 0;background:rgba(255,255,255,0.1);border-radius:20px;height:14px;overflow:hidden;position:relative;}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#ffb347,#ff416c);border-radius:20px;position:relative;}
.progress-loader{position:absolute;top:50%;right:0;transform:translate(50%,-50%);width:14px;height:14px;border-radius:50%;
background:#fff;box-shadow:0 0 8px rgba(255,255,255,0.8);animation:pulse 1s infinite;opacity:0;}
.progress-label{font-size:.9em;color:var(--highlight);}
.highlight-card{background:linear-gradient(145deg,var(--secondary),var(--primary));color:#fff;}
.counter{font-size:2em;font-weight:bold;color:#fff;text-shadow:0 0 10px rgba(255,255,255,0.7);}
.payment-container{display:grid;grid-template-columns:1fr;gap:25px;}
@media(min-width:768px){.payment-container{grid-template-columns:1fr 1fr;}}
.payment-container .service-box{background:linear-gradient(145deg,var(--bg-dark-3),var(--bg-dark-2));
border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:25px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,0.5);}
.payment-container h3{color:var(--highlight);margin-bottom:15px;}
.payment-container .buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.payment-container .buttons button{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;
padding:10px 15px;font-size:14px;border-radius:5px;transition:var(--transition);}
.payment-container .buttons button:hover{background:linear-gradient(90deg,#e25822,var(--primary));}

/* === FAQ Accordion === */
.accordion-container{display:flex;flex-direction:column;align-items:center;width:100%;margin:0 auto;}
.accordion-item{width:90%;max-width:800px;background:linear-gradient(135deg,rgba(0,0,0,0.35),rgba(70,10,10,0.45));
border-radius:10px;margin:20px auto;overflow:hidden;transition:box-shadow var(--transition),transform var(--transition);}
.accordion-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.4);}
.accordion-header{padding:15px;color:var(--highlight);font-weight:bold;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;}
.accordion-header .icon{font-size:1.3em;transition:transform var(--transition),color var(--transition);}
.accordion-body{max-height:0;overflow:hidden;padding:0 15px;color:var(--text-light);line-height:1.5;
transition:max-height .5s ease-in-out,padding .3s ease-in-out;opacity:0;}
.accordion-item.active .accordion-body{max-height:500px;padding:15px;opacity:1;}
.accordion-item.active .accordion-header .icon{transform:rotate(180deg);color:#fff;}

/* === Modal === */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:2000;
justify-content:center;align-items:center;opacity:0;transition:opacity .5s;}
.modal.show{display:flex;opacity:1;}
.modal .modal-content{background:#2c1c1c;padding:1.5rem;border-radius:8px;width:90%;max-width:500px;position:relative;
display:flex;flex-direction:column;gap:10px;animation:fadeInScale .5s ease forwards;}
.modal .modal-content h3{color:var(--highlight);text-align:center;margin-bottom:10px;}
.modal .modal-content iframe{width:100%;height:450px;border:none;border-radius:8px;background:var(--bg-dark);}
.modal .close-btn{position:absolute;top:10px;right:15px;font-size:1.5rem;cursor:pointer;}

/* === ScrollTop === */
#scrollTop{position:fixed;bottom:25px;left:25px;width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;font-weight:bold;font-size:1.2em;
box-shadow:0 5px 15px rgba(0,0,0,0.3);transition:var(--transition);display:none;}
#scrollTop:hover{transform:scale(1.1);}

/* === Footer === */
footer{background:linear-gradient(135deg,var(--bg-dark-3),var(--bg-dark-2));color:var(--highlight);padding:40px 20px;
border-radius:15px 15px 0 0;margin-top:25px;}
.footer-container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:30px;max-width:1200px;margin:0 auto;}
.footer-left,.footer-center,.footer-right{flex:1 1 250px;}
.footer-logo{height:60px;margin-bottom:10px;}
.footer-left p,.footer-center h4,.footer-right h4{margin-bottom:10px;font-weight:bold;color:var(--highlight);}
.footer-social a{display:inline-block;margin-right:15px;color:#fff;font-size:20px;transition:var(--transition);}
.footer-social a:hover{color:var(--primary);transform:translateY(-3px);}
.provider-logos{display:flex;flex-wrap:wrap;gap:15px;justify-content:flex-start;align-items:center;}
.provider-logos img{height:50px;transition:transform var(--transition),opacity var(--transition);cursor:pointer;}
.provider-logos img:hover{transform:scale(1.1);opacity:.9;}
.footer-bottom{text-align:center;margin-top:20px;font-size:.9em;color:var(--text-muted);border-top:1px solid rgba(255,255,255,0.2);padding-top:15px;}

/* === Rules Box === */
.rules-box{max-width:1200px;width:90%;margin:25px auto;padding:40px;background:linear-gradient(135deg,var(--bg-dark-2),var(--bg-dark-3));
border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,0.6);text-align:left;color:#eee;line-height:1.9;font-size:1.1em;}
.rules-box h2{text-align:center;color:var(--highlight);margin-bottom:20px;font-size:2em;}
.rules-box ol li{margin-bottom:14px;}

/* === CTA Button === */
.cta-btn{display:inline-block;margin-top:20px;padding:14px 30px;background:linear-gradient(90deg,var(--primary),var(--secondary));
color:#fff;font-size:1.1em;font-weight:bold;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,0.3);transition:var(--transition);}
.cta-btn:hover{background:linear-gradient(90deg,#e25822,var(--primary));transform:translateY(-3px);}

/* === Google Search Box === */
.google-search{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 18px;background:rgba(255,255,255,0.05);
border-radius:10px;margin-top:12px;transition:transform var(--transition),background var(--transition);}
.google-search:hover{background:linear-gradient(90deg,var(--secondary),var(--primary));transform:scale(1.05);}
.google-search img{height:20px;transition:transform .4s;}
.google-search span{font-weight:bold;color:var(--highlight);font-size:1.05em;letter-spacing:.5px;position:relative;animation:glowText 5s infinite alternate;}
.google-search:hover img{transform:rotate(15deg) scale(1.05);}

/* === Loader === */
.loader{width:30px;height:30px;border:5px solid rgba(255,255,255,0.3);border-top:5px solid var(--highlight);
border-radius:50%;animation:spin 1s linear infinite;margin:20% auto;}

/* === Responsive === */
@media(min-width:768px){.hero-content h1,.hero-content h2{font-size:2.5rem;}.hero-content p{font-size:1.2rem;}}
@media(min-width:1200px){.hero-content h1,.hero-content h2{font-size:3rem;}.hero-content p{font-size:1.3rem;}}
@media(max-width:1200px){.services-container{flex-wrap:wrap;}}
@media(max-width:1024px){.hero-banner{height:auto;}.service-card{flex:1 1 calc(50% - 20px);}}
@media(max-width:768px){.hero-content h2{font-size:1.8em;}.hero-content p{font-size:1em;}
nav ul{display:none;}.hamburger{display:flex;}.rules-box{width:95%;padding:25px;font-size:1em;}}
@media(max-width:600px){.service-card{flex:1 1 100%;}}
@media(max-width:480px){.hero-content h2{font-size:1.4em;}.hero-content p{font-size:.9em;}
header .logo img{height:50px;}.hamburger{width:40px;height:40px;}}
@media(max-width:420px){header{box-shadow:0 3px 8px rgba(0,0,0,0.35);}
#services,#payment{box-shadow:0 6px 16px rgba(0,0,0,0.45);}
.rules-box{box-shadow:0 8px 20px rgba(0,0,0,0.5);}}

/* =====================================================
   ROYAL BLUE & GOLD – FULL COLOR OVERRIDE
   (NO LAYOUT / NO SIZE / NO POSITION CHANGE)
===================================================== */

/* ROOT COLOR SYSTEM */
:root{
  --primary:#0D3B66;
  --secondary:#1D3557;
  --highlight:#F4D35E;

  --bg-dark:#0B132B;
  --bg-dark-2:#1C2541;
  --bg-dark-3:#141A33;

  --text-light:#EAEAEA;
  --text-muted:#BFC5D2;
}

/* GLOBAL */
body{
  background:var(--bg-dark);
  color:var(--text-light);
}

/* HEADER */
header{
  background:linear-gradient(
    90deg,
    #0B132B,
    #1C2541,
    #0D3B66,
    #1C2541
  );
}

/* NAV HOVER */
nav ul li a:hover,
nav ul li button:hover{
  background:linear-gradient(90deg,var(--primary),var(--highlight));
  color:#0B132B;
}

/* BROADCAST */
.broadcast{
  background:linear-gradient(90deg,#0D3B66,#1D3557);
  color:var(--highlight);
}

/* SECTION TITLE */
section h2{
  color:var(--highlight);
}

/* SERVICE CARD */
.service-card{
  background:linear-gradient(
    145deg,
    var(--bg-dark-3),
    var(--bg-dark-2)
  );
}
.service-card .icon,
.progress-label{
  color:var(--highlight);
}

/* PROGRESS BAR */
.progress-bar{
  background:linear-gradient(
    90deg,
    var(--highlight),
    #E9C46A
  );
}

/* HIGHLIGHT CARD */
.highlight-card{
  background:linear-gradient(
    145deg,
    var(--secondary),
    var(--primary)
  );
}

/* PAYMENT BUTTON */
.payment-container .buttons button{
  background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
  );
  color:#fff;
}
.payment-container .buttons button:hover{
  background:linear-gradient(
    90deg,
    var(--highlight),
    #E9C46A
  );
  color:#0B132B;
}

/* CTA BUTTON */
.cta-btn{
  background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary)
  );
}
.cta-btn:hover{
  background:linear-gradient(
    90deg,
    var(--highlight),
    #E9C46A
  );
  color:#0B132B;
}

/* HERO INDICATOR */
.hero-indicators .dot.is-active,
.hero-progress > span{
  background:var(--highlight);
}

/* FAQ / ACCORDION */
.accordion-item{
  background:linear-gradient(
    135deg,
    #0B132B,
    #1C2541
  );
  border:1px solid rgba(255,255,255,0.08);
}
.accordion-header{
  color:var(--highlight);
}
.accordion-header .icon{
  color:var(--highlight);
}
.accordion-body{
  color:var(--text-light);
}
.accordion-item.active{
  box-shadow:0 8px 25px rgba(244,211,94,0.25);
}

/* FOOTER */
footer{
  background:linear-gradient(
    135deg,
    #0B132B,
    #1C2541
  );
}
.footer-left h4,
.footer-center h4,
.footer-right h4{
  color:var(--highlight);
}
.footer-bottom{
  color:var(--text-muted);
}