/* Base Reset & Fonts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
    background-color: #f9fafb;
    color: #1f2937;
}

/* Brand Colors */
:root {
    --primary-red: #D90429;
    --primary-red-hover: #b80322;
    --dark-bg: #111827;
    --hm-red:#e40025; --hm-red-dark:#980015; --hm-red-deep:#68000d;
    --hm-ink:#0d1b2a; --hm-muted:#667085; --hm-bg:#f7f8fa; --hm-line:#e7e9ee; --hm-soft:#fff1f3;
}

/* Utility Classes */
.bg-red-brand { background-color: var(--primary-red); }
.text-red-brand { color: var(--primary-red); }
.border-red-brand { border-color: var(--primary-red); }

/* Header Styling */
.header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============ HOSTMAFIYA HOME PAGE STYLES ============ */

.gauge-container { position: relative; width: 200px; height: 100px; margin: 0 auto; }
.gauge-body {
    width: 100%; height: 100%;
    border-top-left-radius: 100px; border-top-right-radius: 100px;
    background: linear-gradient(90deg, #ff4d4d 0%, #d90429 100%);
    position: relative; overflow: hidden;
}
.gauge-inner {
    position: absolute; bottom: 0; left: 20px; right: 20px; height: 80px;
    background: #ffffff;
    border-top-left-radius: 80px; border-top-right-radius: 80px;
}
.gauge-needle {
    position: absolute; bottom: 0; left: 50%; width: 4px; height: 75px;
    background: #d90429; transform-origin: bottom center;
    transform: rotate(45deg); border-radius: 2px;
}
.gauge-center-dot {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 16px; background: #d90429;
    border-radius: 50%; border: 3px solid #fff;
}

/* HOSTMAFIYA FINAL POLISH LAYER */
html{scroll-behavior:smooth}
body{background:#f7f8fa!important;color:var(--hm-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
body > section{box-sizing:border-box}

/* HERO */
section.bg-gradient-to-r.from-\[\#5B020B\] {
  background:
    radial-gradient(circle at 76% 28%,rgba(255,65,65,.35),transparent 28%),
    radial-gradient(circle at 18% 55%,rgba(255,255,255,.06),transparent 24%),
    linear-gradient(115deg,#65000b 0%,#a50017 52%,#e40025 100%) !important;
  padding-top:58px!important; padding-bottom:30px!important;
}
section.bg-gradient-to-r.from-\[\#5B020B\] .max-w-7xl{max-width:1180px!important}
section.bg-gradient-to-r.from-\[\#5B020B\] h2{font-size:clamp(38px,4.2vw,60px)!important;line-height:.98!important;letter-spacing:-.035em!important;text-shadow:0 2px 12px rgba(0,0,0,.15)}
section.bg-gradient-to-r.from-\[\#5B020B\] > div:first-child{gap:40px!important}
section.bg-gradient-to-r.from-\[\#5B020B\] input{height:48px!important;font-size:14px!important}
section.bg-gradient-to-r.from-\[\#5B020B\] button{height:48px!important;padding:0 22px!important;background:var(--hm-red)!important;border-radius:12px!important}
section.bg-gradient-to-r.from-\[\#5B020B\] .max-w-lg{border-radius:15px!important;padding:6px!important}
section.bg-gradient-to-r.from-\[\#5B020B\] .grid-cols-2.md\:grid-cols-4{max-width:1180px!important;margin-top:28px!important;padding-top:20px!important}

section.max-w-7xl.mx-auto.px-4.-mt-8{max-width:1180px!important;margin-top:-22px!important}
section.max-w-7xl.mx-auto.px-4.-mt-8 > div{gap:14px!important}
section.max-w-7xl.mx-auto.px-4.-mt-8 > div > div{
  min-height:92px!important;padding:15px 16px!important;border-radius:16px!important;
  box-shadow:0 7px 24px rgba(16,24,40,.07)!important;border:1px solid #eceef2!important;
}
section.max-w-7xl.mx-auto.px-4.-mt-8 .w-12.h-12{width:48px!important;height:48px!important;border-radius:14px!important;background:#fff0f2!important}

section.py-16.px-4.max-w-7xl.mx-auto{max-width:1180px!important;padding-top:58px!important;padding-bottom:58px!important}
section.py-16.px-4.max-w-7xl.mx-auto h3{letter-spacing:-.025em!important;font-size:30px!important}
section.py-16.px-4.max-w-7xl.mx-auto .mb-12,
section.py-16.px-4.max-w-7xl.mx-auto .mb-10{margin-bottom:30px!important}

section.py-16.px-4.max-w-7xl.mx-auto .grid-cols-2.md\:grid-cols-4 > div{
  min-height:180px!important;padding:28px 20px!important;border-radius:18px!important;
  box-shadow:0 8px 25px rgba(16,24,40,.045)!important;border-color:#eceef2!important;
}
section.py-16.px-4.max-w-7xl.mx-auto .grid-cols-2.md\:grid-cols-4 > div .w-12.h-12{width:52px!important;height:52px!important;background:#fff0f2!important}

/* ============ BILLING TABS ============ */
#billingTabContainer{gap:10px!important;margin-top:24px!important}

/* Base (default, non-hover) tab style */
#billingTabContainer .billing-tab{
  min-width:145px!important;min-height:58px!important;padding:10px 18px!important;
  border-radius:999px!important;border:1px solid #dfe3ea!important;background:#fff!important;
  box-shadow:0 2px 8px rgba(16,24,40,.025)!important;color:#25324a!important;
}

/* Active/selected tab (the one currently chosen, e.g. Monthly by default) */
#billingTabContainer .billing-tab.bg-red-brand{
  background:var(--hm-red)!important;border-color:var(--hm-red)!important;color:#fff!important;
  box-shadow:0 8px 22px rgba(228,0,37,.2)!important;
}

/* Hover state — turns yellow on mouse-over, beats specificity of rules above */
#billingTabContainer .billing-tab:hover,
#billingTabContainer .billing-tab.bg-red-brand:hover {
    background-color: #ffcc00 !important;
    color: #000 !important;
    border-color: #ffcc00 !important;
}
#billingTabContainer .billing-tab:hover div {
    color: #000 !important;
}

#billingTabContainer .billing-tab div:first-child{font-size:13px!important}
#billingTabContainer .billing-tab div:nth-child(2){font-size:11px!important}

/* ============ PRICING CARDS (old grid rules — kept for any non-slider references) ============ */
#billingTabContainer + .grid.md\:grid-cols-4{gap:22px!important;align-items:stretch!important}
#billingTabContainer + .grid.md\:grid-cols-4 > div{
  min-height:610px!important;padding:28px 26px 22px!important;border-radius:22px!important;
  border:1px solid #e2e6ec!important;box-shadow:0 10px 32px rgba(16,24,40,.055)!important;
}
#billingTabContainer + .grid.md\:grid-cols-4 > div:nth-child(2){
  border:2px solid var(--hm-red)!important;box-shadow:0 18px 42px rgba(228,0,37,.12)!important;transform:translateY(-10px)!important;
}
#billingTabContainer + .grid.md\:grid-cols-4 > div:nth-child(2) .absolute{
  top:-17px!important;background:var(--hm-red)!important;padding:7px 20px!important;border-radius:999px!important;font-size:11px!important;
}
#billingTabContainer + .grid.md\:grid-cols-4 h4{font-size:23px!important;letter-spacing:-.02em!important}
#billingTabContainer + .grid.md\:grid-cols-4 p{font-size:12px!important;color:#748096!important}
#billingTabContainer + .grid.md\:grid-cols-4 .text-4xl{font-size:42px!important;line-height:1!important;color:var(--hm-red)!important}
#billingTabContainer + .grid.md\:grid-cols-4 .text-2xl{font-size:25px!important}
#billingTabContainer + .grid.md\:grid-cols-4 .inline-block{margin-top:4px!important;padding:5px 12px!important;border-radius:999px!important;background:#ffe3e7!important}
#billingTabContainer + .grid.md\:grid-cols-4 ul{margin-top:25px!important;padding-top:20px!important;line-height:1.35!important}
#billingTabContainer + .grid.md\:grid-cols-4 li{min-height:22px!important;font-size:13px!important;color:#526071!important}
#billingTabContainer + .grid.md\:grid-cols-4 li i{font-size:12px!important}
#billingTabContainer + .grid.md\:grid-cols-4 a{min-height:48px!important;border-radius:12px!important;font-size:13px!important}

/* ============ ORDER NOW BUTTON HOVER (for the new slider cards) ============ */
.order-btn:hover {
    background-color: #ffcc00 !important;
    border-color: #ffcc00 !important;
    color: #fff !important;
}
.order-btn:hover span,
.order-btn:hover i {
    color: #fff !important;
}

/* ============ PRICING SLIDER (new — for Level 1/2/3/4/5/6... cards) ============ */
.plans-slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.25rem 1.25rem;
    scrollbar-width: thin;
}
.plans-slider::-webkit-scrollbar { height: 6px; }
.plans-slider::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

.plan-card {
    scroll-snap-align: start;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .plan-card { flex: 0 0 calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
    .plan-card { flex: 0 0 calc(25% - 1.125rem); max-width: calc(25% - 1.125rem); }
}

/* ============ OTHER SECTIONS (unchanged) ============ */
section.py-16.px-4.max-w-7xl.mx-auto .md\:grid-cols-12{gap:18px!important}
section.py-16.px-4.max-w-7xl.mx-auto .gauge-container{width:220px!important;height:110px!important}
section.py-16.px-4.max-w-7xl.mx-auto .gauge-body{background:conic-gradient(from 270deg,#ffe4e8 0deg,#e40025 165deg,#ffe4e8 165deg 180deg)!important}
section.py-16.px-4.max-w-7xl.mx-auto .gauge-inner{left:24px!important;right:24px!important;height:86px!important}
section.py-16.px-4.max-w-7xl.mx-auto .gauge-needle{height:82px!important;width:5px!important;transform:rotate(42deg)!important}
section.py-16.px-4.max-w-7xl.mx-auto .gauge-center-dot{width:18px!important;height:18px!important}

section.max-w-7xl.mx-auto.px-4.my-10 > div,
section.max-w-7xl.mx-auto.px-4.my-8 > div{
  border-radius:22px!important;padding:28px 34px!important;
  background:linear-gradient(105deg,#85000f,#e40025)!important;
  box-shadow:0 16px 35px rgba(228,0,37,.16)!important;
}

section.py-16.px-4.max-w-7xl.mx-auto .md\:grid-cols-12 > .md\:col-span-3{border-radius:20px!important}
section.py-16.px-4.max-w-7xl.mx-auto .md\:col-span-9 > div{min-height:190px!important;border-radius:18px!important;padding:22px!important}

.faq-item{min-height:54px!important;padding:17px 20px!important;border-radius:14px!important;box-shadow:0 4px 16px rgba(16,24,40,.035)!important}
.faq-item h4{font-size:13px!important}
.faq-answer{font-size:13px!important}

a,button,.group{transition:all .2s ease}

@media(max-width:767px){
  section.bg-gradient-to-r.from-\[\#5B020B\]{padding-top:40px!important}
  section.bg-gradient-to-r.from-\[\#5B020B\] h2{font-size:38px!important}
  section.bg-gradient-to-r.from-\[\#5B020B\] .w-72.h-80{display:none!important}
  section.max-w-7xl.mx-auto.px-4.-mt-8{margin-top:12px!important}
  section.py-16.px-4.max-w-7xl.mx-auto{padding-top:42px!important;padding-bottom:42px!important}
  section.py-16.px-4.max-w-7xl.mx-auto h3{font-size:24px!important}
  #billingTabContainer{overflow-x:auto;justify-content:flex-start!important;flex-wrap:nowrap!important;padding:4px 2px 10px!important}
  #billingTabContainer .billing-tab{min-width:145px!important;flex:0 0 auto}
  #billingTabContainer + .grid.md\:grid-cols-4 > div{min-height:auto!important}
  #billingTabContainer + .grid.md\:grid-cols-4 > div:nth-child(2){transform:none!important;margin-top:8px!important}
}