/* style.css
   Sections:
   1. Variables
   2. Accessibility Utilities
   3. Base / Body
   4. Hero / Header
   5. Plans (boxed hosting style)
   6. Hover Animations
   7. Logos Marquee, Utilities
   8. Responsive rules
   9. Footer
*/

/* ---------------------------
 1. Variables
--------------------------- */
:root{
  --header-1: #071a3a;   /* deep navy */
  --header-2: #0b2f63;   /* royal marine */
  --header-3: #004a9f;   /* hosting blue */
  --accent: #004a9f;
  --accent-glow: rgba(0,74,159,0.12);
  --card-bg: #ffffff;
  --card-border: rgba(20,20,30,0.06);
  --muted: #6c757d;
  --primary-1: #0f2753;
  --primary-2: #0b2b6b;
  --accent: #2bb4ff;
  --glass: rgba(255,255,255,0.06);
  --radius: 12px;
  --shadow: 0 6px 18px rgba(6,15,30,0.08);
  --shadow-hover: 0 18px 40px rgba(6,15,30,0.12);
}

/* Spacing utility equivalents (if not present in your stylesheet) */
.pt-80 { padding-top: 80px; }
.pb-20 { padding-bottom: 20px; }
.ptb-20 { padding: 20px 0; }

/* Width helper */
.w-20 { width: 120px; max-width: 20%; } /* adjust as needed for your layout */

/* Gradient strip (from your snippet) */
.gradient-bg {
  background: linear-gradient(90deg, #0b2b6b 0%, #0f2753 50%, #08213f 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Header intro wrapper - keep text centered and readable */
.header-intro .hero-content-wrap {
  text-align: center;
  padding-bottom: 6px;
}

/* About / feature content */
.feature-contents.section-heading { color: #243244; } /* dark text for content area */
.feature-contents.section-heading p,
.feature-contents.section-heading h5 {
  margin-bottom: 0.9rem;
  font-weight: 400;
  color: #222;
}

/* tech feature list */
.tech-feature-list li {
  font-size: 0.98rem;
  color: #333;
}

/* small icon color accent */
.color-primary { color: #0b66d1; } /* matches blue theme */
.color-primary:hover { color: #084fa8; }

/* border-top utility (if not provided) */
.border-top { border-top: 1px solid #e9eef6; }

/* responsive tweaks */
@media (max-width: 767.98px) {
  .w-20 { width: 96px; max-width: 36%; }
  .gradient-bg { padding: 16px 0; }
  .pt-80 { padding-top: 40px; }
}

/* preserve some of your hero space / subtle bg blending */
.header-intro {
  background: linear-gradient(180deg, rgba(11,43,107,0.04), rgba(11,43,107,0.00));
}

/* Accessible link focus visible */
a:focus { outline: 3px solid rgba(11,102,209,0.18); outline-offset: 2px; }

/* If you want to restore the wave markup from previous hero, optional */
.hero-wave svg { display: block; width: 100%; height: 72px; fill: #f6f8fb; }

/* HERO container */
.hero-animated{
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 90px 0 40px;
  isolation: isolate;
  background: linear-gradient(120deg, var(--primary-1), var(--primary-2));
}

/* animated gradient subtle movement */
.hero-bg-layer{
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(43,180,255,0.08), rgba(255,255,255,0.02));
  mix-blend-mode: overlay;
  animation: bgShift 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes bgShift {
  0% { transform: translateX(0) scale(1.02); filter: hue-rotate(0deg); }
  50% { transform: translateX(-6%) scale(1.03); filter: hue-rotate(10deg); }
  100% { transform: translateX(0) scale(1.02); filter: hue-rotate(0deg); }
}

/* layout */
.hero-content-wrap{ position: relative; z-index: 2; display:flex; align-items:center; min-height:380px; }
.hero-content { max-width:780px; margin:0 auto; text-align:center; padding: 10px; }

/* Title and animations */
.hero-title{
  font-size: 2.4rem;
  line-height:1.05;
  margin:0 0 12px;
  letter-spacing: -0.4px;
  transform: translateY(12px);
  opacity: 0;
  animation: fadeUp 0.7s 0.15s cubic-bezier(.2,.9,.2,1) forwards;
}
.hero-title .accent{
  color: var(--accent);
  position: relative;
}
.hero-title .accent::after{
  content: "";
  display:block;
  height:4px;
  width:60%;
  background: linear-gradient(90deg, rgba(43,180,255,0.35), rgba(43,180,255,0.08));
  margin-top:8px;
  border-radius: 6px;
  transform-origin:left center;
  transform: scaleX(0);
  animation: underlineGrow 0.55s 0.9s ease forwards;
}

@keyframes fadeUp{
  to { transform: translateY(0); opacity: 1; }
}
@keyframes underlineGrow{
  to { transform: scaleX(1); }
}

/* subtitle */
.hero-sub{
  margin: 12px 0 20px;
  font-size:1.05rem;
  color: rgba(255,255,255,0.92);
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.7s 0.3s cubic-bezier(.2,.9,.2,1) forwards;
}

/* CTAs */
.hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.btn-3d.btn-primary{
  background: linear-gradient(180deg, var(--accent), #1ea9ff);
  color: #052033;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight:700;
  box-shadow: 0 8px 30px rgba(43,180,255,0.18);
  transform: translateY(6px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.btn-3d.btn-primary:hover{ transform: translateY(0); box-shadow: var(--shadow-hover); }

/* ghost CTA */
.btn-ghost{
  background: transparent;
  color: rgba(255,255,255,0.95);
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: background .18s ease, transform .18s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.03); transform: translateY(-3px); }

/* hero badges */
.hero-badges{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; opacity:0; transform:translateY(6px);
  animation: fadeUp 0.7s 0.55s cubic-bezier(.2,.9,.2,1) forwards;
}
.badge{
  background: rgba(255,255,255,0.06);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.035);
}

/* decorative parallax shapes */
.hero-decor{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.decor-circle{ position:absolute; border-radius:999px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); }
.decor-1{ width:220px; height:220px; right: -50px; top:20px; opacity:0.12; transform: translate3d(0,0,0); }
.decor-2{ width:140px; height:140px; left:-30px; top:120px; opacity:0.10; transform: translate3d(0,0,0); }
.decor-rect{ width:120px; height:88px; right:20%; bottom: -20px; border-radius:16px; opacity:0.06; }

/* SVG wave */
.hero-wave{ position: relative; z-index:3; margin-top: 22px; }
.hero-wave svg{ display:block; width:100%; height:72px; }
.hero-wave path{ fill: #f6f8fb; opacity:1; }

/* scroll-down arrow */
.scroll-down{ position:absolute; left:50%; transform:translateX(-50%); bottom:8px; z-index:4; display:block; width:34px; height:54px; text-decoration:none; }
.scroll-down span{ display:block; width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.9); margin:0 auto; animation: bounce 1.6s infinite; box-shadow: 0 6px 14px rgba(2,6,23,0.24); }
@keyframes bounce{
  0%,100%{ transform: translateY(0); opacity: 0.95; }
  50%{ transform: translateY(10px); opacity:0.6; }
}

/* responsive */
@media (min-width:992px){
  .hero-title{ font-size: 3rem; }
  .hero-content-wrap{ min-height:460px; }
}
@media (max-width:576px){
  .hero-title{ font-size:1.6rem; }
  .hero-content { padding: 8px; }
}

/* small utility */
.hidden-visually{ position:absolute!important; left:-9999px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; }

/* ---------------------------
 2. Accessibility Utilities
--------------------------- */
.visually-hidden {
  position:absolute!important;
  height:1px;
  width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
  border:0;
  padding:0;
  margin:-1px;
}

/* Focus styles */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid rgba(0,95,204,0.18);
  outline-offset: 3px;
}
a.btn:focus-visible, .plan-cta:focus-visible { outline: 3px solid rgba(0,95,204,0.18); outline-offset: 3px; }

/* ---------------------------
 3. Base / Body
--------------------------- */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f6f9fc;
  color: #222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  margin: 0;
}

/* small headings */
.section-muted { color:var(--muted); }

/* ---------------------------
 4. Hero / Header
--------------------------- */
.hero-modern {
  background: linear-gradient(135deg, var(--header-1) 0%, var(--header-2) 45%, var(--header-3) 100%);
  color: #ffffff;
  padding: 64px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 34px rgba(3,14,38,0.28);
}

/* animated glow */
.hero-modern::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  left: -80px;
  top: -80px;
  background: radial-gradient(circle, rgba(0,123,255,0.24) 0%, rgba(0,123,255,0) 65%);
  filter: blur(44px);
  transform: translateZ(0);
  animation: heroGlow 7s infinite alternate ease-in-out;
  pointer-events: none;
}
@keyframes heroGlow {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to   { transform: translate(48px,36px) scale(1.03); opacity: 0.85; }
}

/* LOGO GLASS PANEL (white base gradient) */
.hero-logo-wrap {
  display: inline-block;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  box-shadow:
    0 8px 30px rgba(0,0,0,0.25),
    inset 0 0 18px rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  transition: transform .35s ease;
}

.hero-logo-wrap:hover {
  transform: translateY(-4px) scale(1.03);
}

/* LOGO (with floating animation) */
.hero-logo {
  width: 130px;                /* Updated weight for your new logo dimension request */
  height: auto;
  display:block;
  animation: floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* TITLE & SUBTITLE */
.hero-title {
  margin-top: 22px;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.hero-subtitle {
  max-width: 760px;
  margin: 12px auto 26px;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.55;
}


.hero-content { position: relative; z-index: 2; }
/* .hero-logo { width: 110px; display:block; margin: 0 auto 14px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); animation: floatLogo 4s ease-in-out infinite; } */
@keyframes floatLogo { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }

.hero-title { color: rgba(255,255,255,0.88); font-size: 2rem; font-weight:700; margin-bottom:8px; letter-spacing:-0.3px; }
.hero-subtitle { color: rgba(255,255,255,0.88); max-width: 780px; margin: 0 auto 18px; font-size:1.05rem; }

.hero-actions .hero-cta { display:inline-block; padding:12px 26px; border-radius:8px; font-weight:700; text-decoration:none; background:#fff; color:var(--header-2); box-shadow:0 8px 30px rgba(255,255,255,0.12); transition:all .22s ease; }
.hero-actions .hero-cta:hover { transform:translateY(-3px); background:#eaf4ff; }
.hero-actions .hero-cta-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #fff; }
.hero-actions .hero-cta-ghost:hover { background: rgba(255,255,255,0.06); }

.hero-stats { margin-top:18px; color:#fff; }
.hero-stats .stat-value { font-size:1.3rem; font-weight:800; }
.hero-stats .stat-label { color: rgba(255,255,255,0.85); font-size:0.85rem; }

/* wave */
.hero-wave svg { display:block; width:100%; height:auto; margin-top:34px; }

/* ---------------------------
 5. Plans (boxed hosting style)
--------------------------- */
.plans-wrap { padding: 48px 0 56px; }
.plans-intro h2 { font-size:1.6rem; font-weight:700; margin-bottom:6px; }
.plans-intro p { color:var(--muted); margin-bottom:0; }

.plans-grid { margin-top:28px; }

.plan-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:420px;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms ease, filter 200ms ease;
  position: relative;
  overflow: visible;
  box-shadow: 0 14px 34px rgba(10,18,35,0.06);
}

/* accent bar at top of card */
.plan-accent { position:absolute; left:0; right:0; top:0; height:6px; border-top-left-radius:12px; border-top-right-radius:12px; background: linear-gradient(90deg, var(--header-3) 0%, var(--header-2) 100%); opacity:0.98; }

.plan-title { font-size:1.05rem; font-weight:700; margin-bottom:0; text-align:center; }
.plan-price { text-align:center; margin-top:6px; }
.plan-price .amount { font-size:2rem; font-weight:800; margin-right:6px; color:#111; vertical-align:baseline; }
.plan-price .cycle { color:var(--muted); font-size:0.95rem; }

.plan-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.plan-features li { display:flex; align-items:center; gap:12px; color:#2b2b2b; font-size:0.97rem; line-height:1.3; }
.plan-features i { width:36px; text-align:center; font-size:1.25rem; }

.tick { color:#28a745; }
.cross { color:#dc3545; }

.plan-cta {
  display:inline-block;
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  text-align:center;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(20,20,30,0.06);
  background:#f8f9fb;
  color:#111;
  transition: background 180ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.plan-cta:hover { background:#eef2ff; transform: translateY(-2px); }
.plan-cta-primary { background:var(--accent); color:#fff; border:none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-card:hover { transition: none; transform: none; animation: none; box-shadow: 0 12px 28px rgba(0,0,0,0.10); }
  .hero-modern::before { animation: none; }
}

/* ---------------------------
 7. Logos Marquee, Utilities & feature boxes
--------------------------- */
.logos-marquee { display:flex; gap:36px; align-items:center; justify-content:center; overflow:hidden; padding:12px 0; }
.logos-marquee img { height:36px; opacity:0.9; transition:opacity .2s ease; }
.logos-marquee:hover img { opacity:1; }

/* simple infinite horizontal scroll using CSS animation if present */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* apply only when there are duplicated children for loop (JS duplicates in HTML) */
.logos-marquee.animate { display:flex; animation: marquee 18s linear infinite; }

/* small feature box style */
.feature-box { background:#fff; border-radius:10px; padding:18px; border:1px solid rgba(12,12,30,0.04); box-shadow: 0 8px 22px rgba(8,12,30,0.04); }

/* ---------------------------
 8. Responsive rules
--------------------------- */
@media (max-width: 991px) { .plan-card { min-height: 460px; } }
@media (max-width: 575px) {
  .plan-card { min-height: auto; padding:16px; }
  .plan-features li { gap:8px; font-size:0.95rem; }
  .plan-features i { width:30px; font-size:1.1rem; }
  .logos-marquee { gap:18px; }
}

/* ---------------------------
 Wave
--------------------------- */
:root {
    --primary: #4361ee;
    --secondary: #3f37c9;
    --accent: #4cc9f0;
    --dark: #1d3557;
    --light: #f8f9fa;
    --gradient: linear-gradient(135deg, #071a3a 0%, #0b2f63 100%);
    --gradient-light: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15);
    --radius: 12px;
}
.hero-section {
    padding: 100px 0 60px;
    background: var(--gradient);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,186.7C960,213,1056,235,1152,229.3C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-img {
    max-width: 200px;
    margin: 0 auto 30px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

/* Plan comparison Table Styles/ */
        /* Scoped styles for plan comparison only */
        .plan-comparison-modern {
            padding: 30px 0 50px 0;
        }

        .section-heading.text-center.mb-5 {
            margin-bottom: 2rem !important;
        }

        /* Optional: If you have any extra margin on the row */
        .plan-comparison-modern .row:last-child {
            margin-top: -0.5rem;
        }

        .plan-comparison-table {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: none;
            margin-bottom: 0;
            border-collapse: collapse;
            width: 100%;
        }

        .plan-comparison-table th,
        .plan-comparison-table td {
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .plan-comparison-head {
            background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
            color: white;
        }

        .plan-comparison-head th {
            padding: 25px 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            font-weight: 600;
            vertical-align: middle;
        }

        .plan-comparison-head th:first-child {
            border-radius: 12px 0 0 0;
        }

        .plan-comparison-head th:last-child {
            border-radius: 0 12px 0 0;
        }

        .plan-comparison-head th strong {
            font-size: 1.5rem;
        }

        .plan-comparison-badge {
            position: absolute;
            top: -10px;
            right: 10px;
            background: #ffc107;
            color: #000;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .plan-comparison-body tr {
            transition: all 0.3s ease;
        }

        .plan-comparison-body tr:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }

        .plan-comparison-body td {
            padding: 18px 15px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            vertical-align: middle;
        }

        .plan-comparison-body td:first-child {
            font-weight: 600;
            color: #1d3557;
            background-color: rgba(248, 249, 250, 0.7);
        }

        .plan-comparison-category {
            background-color: rgba(67, 97, 238, 0.1) !important;
            font-weight: 700 !important;
            color: #1d3557 !important;
            font-size: 1.1rem;
            padding: 15px !important;
            border: 1px solid rgba(67, 97, 238, 0.2) !important;
        }

        .plan-comparison-category i {
            margin-right: 10px;
            color: #4361ee;
        }

        .plan-comparison-check {
            color: #28a745;
            font-size: 1.2rem;
        }

        .plan-comparison-cross {
            color: #dc3545;
            font-size: 1.2rem;
        }

        .plan-comparison-btn {
            display: inline-block;
            padding: 10px 25px;
            background: #4361ee;
            color: white;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 5px 0 #3f37c9;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            font-size: 0.9rem;
        }

        .plan-comparison-btn:hover {
            transform: translateY(3px);
            box-shadow: 0 2px 0 #3f37c9;
            color: white;
        }

        .plan-comparison-btn:active {
            transform: translateY(5px);
            box-shadow: none;
        }

        .plan-comparison-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .plan-comparison-btn:hover::after {
            transform: translateX(0);
        }

        .plan-comparison-table-responsive {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .plan-comparison-header-row {
            background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
            color: white;
        }

        .plan-comparison-feature-header {
            color: white !important;
            background: transparent !important;
            font-size: 1.1rem;
            padding: 20px 15px !important;
        }

        .plan-comparison-plan-header {
            background: transparent !important;
            color: white;
            padding: 20px 15px !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            vertical-align: middle;
            text-align: center;
        }

        .plan-comparison-plan-header .h5 {
            margin-bottom: 8px;
            display: block;
        }

        .plan-price {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0;
        }

        .plan-price small {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
        }

        @media (max-width: 992px) {
            .plan-comparison-table-responsive {
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            }

            .plan-comparison-head th {
                padding: 20px 10px;
            }

            .plan-comparison-head th strong {
                font-size: 1.2rem;
            }
        }

        @media (max-width: 768px) {
            .plan-comparison-body td {
                padding: 12px 10px;
                font-size: 0.9rem;
            }

            .plan-comparison-head th {
                padding: 15px 8px;
            }
        }