/*
Theme Name: Hello Elementor Child
Theme URI: 
Description: A child theme of Hello Elementor
Author: Your Name
Author URI: 
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/


/* Your custom styles go below */



.nhl-live-wrapper { margin:20px 0; }
.section-title {
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; font-size:18px; margin-bottom:10px;
}
.section-title .view-all-toggle { color:#1e90ff; font-size:14px; text-decoration:none; cursor:pointer; }
.nhl-card-container {
  display:flex; flex-wrap:wrap; gap:15px;
}
.scroll-view { overflow-x:auto; flex-wrap:nowrap; }
.scroll-view .nhl-game-card { flex:0 0 auto; }
.nhl-game-card {
  border-radius:6px; overflow:hidden;
  width:300px; position:relative; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.6);
  text-decoration:none;
}
.nhl-game-card .stadium-name {
  background:rgba(0,0,0,0.4);
  padding:5px 8px; font-size:13px;
}
.nhl-game-card .game-date {
  position:absolute; top:5px; right:8px;
  font-size:12px; color:#fff; font-weight:bold;
}
.nhl-game-card .team-logos {
  display:flex; justify-content:space-between;
  padding:20px 10px;
}
.nhl-game-card .team { text-align:center; width:48%; }
.nhl-game-card .team img { width:50px; height:50px; object-fit:contain; }
.nhl-game-card .team span { display:block; margin-top:5px; font-size:14px; }

.nhl-game-card .overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:bold;
  opacity:0; transition:opacity 0.3s ease;
}
.nhl-game-card:hover .overlay {
  opacity:1;
}


.nba-live-wrapper { margin:20px 0; }
.section-title {
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; font-size:18px; margin-bottom:10px;
}
.section-title .view-all-toggle { color:#1e90ff; font-size:14px; text-decoration:none; cursor:pointer; }
.nba-card-container {
  display:flex; flex-wrap:wrap; gap:15px;
}
.scroll-view { overflow-x:auto; flex-wrap:nowrap; }
.scroll-view .nba-game-card { flex:0 0 auto; }
.nba-game-card {
  border-radius:6px; overflow:hidden;
  width:300px; position:relative; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.6);
  text-decoration:none;
}
.nba-game-card .stadium-name {
  background:rgba(0,0,0,0.4);
  padding:5px 8px; font-size:13px;
}
.nba-game-card .game-date {
  position:absolute; top:5px; right:8px;
  font-size:12px; color:#fff; font-weight:bold;
}
.nba-game-card .team-logos {
  display:flex; justify-content:space-between;
  padding:20px 10px;
}
.nba-game-card .team { text-align:center; width:48%; }
.nba-game-card .team img { width:50px; height:50px; object-fit:contain; }
.nba-game-card .team span { display:block; margin-top:5px; font-size:14px; }

.nba-game-card .overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:bold;
  opacity:0; transition:opacity 0.3s ease;
}
.nba-game-card:hover .overlay {
  opacity:1;
}

.mlb-live-wrapper { margin:20px 0; }
.section-title {
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; font-size:18px; margin-bottom:10px;
}
.section-title .view-all-toggle { color:#1e90ff; font-size:14px; text-decoration:none; cursor:pointer; }
.mlb-card-container {
  display:flex; flex-wrap:wrap; gap:15px;
}
.scroll-view { overflow-x:auto; flex-wrap:nowrap; }
.scroll-view .mlb-game-card { flex:0 0 auto; }
.mlb-game-card {
  border-radius:6px; overflow:hidden;
  width:300px; position:relative; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.6);
  text-decoration:none;
}
.mlb-game-card .stadium-name {
  background:rgba(0,0,0,0.4);
  padding:5px 8px; font-size:13px;
}
.mlb-game-card .game-date {
  position:absolute; top:5px; right:8px;
  font-size:12px; color:#fff; font-weight:bold;
}
.mlb-game-card .team-logos {
  display:flex; justify-content:space-between;
  padding:20px 10px;
}
.mlb-game-card .team { text-align:center; width:48%; }
.mlb-game-card .team img { width:50px; height:50px; object-fit:contain; }
.mlb-game-card .team span { display:block; margin-top:5px; font-size:14px; }

.mlb-game-card .overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:bold;
  opacity:0; transition:opacity 0.3s ease;
}
.mlb-game-card:hover .overlay {
  opacity:1;
}

.nfl-live-wrapper { margin:20px 0; }
.section-title {
  display:flex; justify-content:space-between; align-items:center;
  color:#fff; font-size:18px; margin-bottom:10px;
}
.section-title .view-all-toggle { color:#1e90ff; font-size:14px; text-decoration:none; cursor:pointer; }
.nfl-card-container {
  display:flex; flex-wrap:wrap; gap:15px;
}
.scroll-view { overflow-x:auto; flex-wrap:nowrap; }
.scroll-view .nfl-game-card { flex:0 0 auto; }
.nfl-game-card {
  border-radius:6px; overflow:hidden;
  width:300px; position:relative; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.6);
  text-decoration:none;
}
.nfl-game-card .stadium-name {
  background:rgba(0,0,0,0.4);
  padding:5px 8px; font-size:13px;
}
.nfl-game-card .game-date {
  position:absolute; top:5px; right:8px;
  font-size:12px; color:#fff; font-weight:bold;
}
.nfl-game-card .team-logos {
  display:flex; justify-content:space-between;
  padding:20px 10px;
}
.nfl-game-card .team { text-align:center; width:48%; }
.nfl-game-card .team img { width:50px; height:50px; object-fit:contain; }
.nfl-game-card .team span { display:block; margin-top:5px; font-size:14px; }

/* Overlay for Watch Live */
.nfl-game-card .overlay {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:bold;
  opacity:0; transition:opacity 0.3s ease;
}
.nfl-game-card:hover .overlay {
  opacity:1;
}

.pricing-wrapper {
  max-width: 1000px;
  margin: 0px auto;
  padding: 0 0px;
  text-align: center;
  font-family: Arial, sans-serif;
}

.pricing-title {
  font-size: 32px;
  margin-bottom: 10px;
  color: #fff;
  
}
.pricing-subtitle {
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
}

.pricing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.pricing-card {
  background: #1e1e1e;
  color: #fff;
  padding: 25px 20px;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.pricing-card h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.pricing-card .price {
  font-size: 28px;
  font-weight: bold;
  margin: 10px 0;
}

.pricing-card p {
  margin: 6px 0;
}

.pricing-card ul {
  text-align: left;
  padding-left: 20px;
  margin: 15px 0;
  list-style: disc;
  font-size: 14px;
}

.pricing-card ul li {
  margin: 5px 0;
}

.pricing-card button {
  background: #1e90ff;
  color: #fff;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s;
}

.pricing-card button:hover {
  background: #0073e6;
}

/* Badges */
.pricing-card .badge {
  display: inline-block;
  background: #ff4c4c;
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 14px;
  margin-top: 10px;
}

/* Highlight most popular and best value */
.most-popular {
  border: 2px solid #ff4c4c;
}

.best-value {
  border: 2px solid #1e90ff;
}
a {
    background-color: transparent;
    color: #ffffff;
    text-decoration: none
}

a:active,a:hover {
    color: #ffffff
}


    :root {
        --bg: #0b0f1a;
        --bg2: #0f1526;
        --card: #121a2e;
        --text: #e6ebff;
        --muted: #9fb0ffcc;
        --accent: #6aa6ff;
        --accent2: #7ef0ff;
        --success: #24d67d;
        --danger: #ff5470;
        --warning: #ffb020;
        --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    }

    * {
        box-sizing: border-box
    }

    html,
    body {
        margin: 0;
        padding: 0;
        background: radial-gradient(1200px 800px at 80% -10%, rgba(110, 166, 255, .2), transparent), linear-gradient(180deg, var(--bg), var(--bg2));
        color: var(--text);
        font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif
    }

    a {
        color: inherit;
        text-decoration: none
    }

    img {
        max-width: 100%;
        display: block
    }

    .container {
        width: min(1200px, 92vw);
        margin-inline: auto
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        padding: .9rem 1.3rem;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        color: #0b1020;
        font-weight: 700;
        box-shadow: var(--shadow);
        border: none;
        cursor: pointer
    }

    .btn:hover {
        filter: brightness(1.05)
    }

    .btn--ghost {
        background: transparent;
        border: 1px solid #2a3a66;
        color: var(--text)
    }

    .badge {
        display: inline-block;
        padding: .25rem .6rem;
        border: 1px solid #2a3a66;
        border-radius: 999px;
        color: var(--muted);
        font-size: .78rem;
        letter-spacing: .02em
    }

    header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(3, 6, 20, .6);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #192242
    }

    nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .7rem 0
    }

    .nav-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap
    }

    .nav-links a {
        padding: .5rem .8rem;
        border-radius: 10px;
        color: var(--muted)
    }

    .nav-links a:hover {
        background: #111a33;
        color: var(--text)
    }

    /* Hero */

    .hero {
        position: relative;
        padding: 1rem 0 3rem;
        overflow: hidden
    }

    .hero__grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        gap: 2.5rem
    }

     .hero h1 {
        font-size: clamp(1rem, 5vw, 2.2rem);
        line-height: 1.5;
        margin: 0 0 1rem;
        text-align:center;
    }

    .hero p {
        color: var(--muted);
        margin: 0 0 1.5rem
    }

    .hero__cta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap
    }

    .glow {
        position: absolute;
        inset: auto -20% -40% -20%;
        height: 420px;
        background: radial-gradient(closest-side at 50% 40%, rgba(110, 166, 255, .35), transparent 70%);
        filter: blur(40px);
        pointer-events: none
    }

    .hero__stats {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 1.25rem
    }

    .stat {
        background: linear-gradient(180deg, #0d1428, #0b1224);
        border: 1px solid #1e2a52;
        border-radius: 16px;
        padding: .75rem 1rem;
        min-width: 150px
    }

    .stat b {
        font-size: 1.1rem
    }

    /* Features */

    .section {
        padding: 3.5rem 0
    }

    .section h2 {
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        margin: 0 0 1rem
    }

    .grid {
        display: grid;
        gap: 1.2rem
    }

    .grid--3 {
        grid-template-columns: repeat(3, 1fr)
    }

    @media (max-width:900px) {
        .hero__grid {
            grid-template-columns: 1fr
        }
        .grid--3 {
            grid-template-columns: 1fr
        }
    }

    .card {
        background: linear-gradient(180deg, #0f172f, #0c152a);
        border: 1px solid #1b2a54;
        border-radius: 20px;
        padding: 1.2rem;
        box-shadow: var(--shadow)
    }

    .card h3 {
        margin: .2rem 0 .6rem;
        font-size: 1.15rem
    }

    .card p {
        color: var(--muted);
        margin: 0
    }

    .icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        color: #081226;
        box-shadow: 0 6px 18px rgba(112, 171, 255, .35)
    }

    /* Pricing */

    .pricing-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .pricing-card {
        background: linear-gradient(180deg, #0f172f, #0c152a);
        border: 1px solid #1b2a54;
        border-radius: 20px;
        padding: 1.5rem;
        box-shadow: var(--shadow);
        text-align: center
    }

    .pricing-card h3 {
        margin-top: 0;
        font-size: 1.4rem
    }

    .pricing-card .price {
        font-size: 2rem;
        font-weight: 800;
        margin: .5rem 0
    }

    .pricing-card ul {
        list-style: none;
        padding: 0;
        margin: 1rem 0;
        text-align: left
    }

    .pricing-card li {
        margin: .3rem 0;
        color: var(--muted)
    }

    .pricing-card button {
        margin-top: 1rem;
        padding: .7rem 1.2rem;
        border: none;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        color: #0b1020;
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--shadow)
    }

    .pricing-card button:hover {
        filter: brightness(1.05)
    }

    .most-popular {
        border: 2px solid var(--accent)
    }

    .best-value {
        border: 2px solid var(--success)
    }

/* Section Title */
.flexible-title {
  text-align: center;
  padding-top: 20px;     
  font-size: 2rem;    
  font-weight: 700;
  line-height: 1.2;
}

/* Section Description */
.flexible-desc {
  text-align: center;     
  margin: 0 0 2rem 0;    
  padding: 0 1rem;         
  color: #9fb0ffcc;         
  font-size: 1.5rem;          
  line-height: 1.6;          
}

/* Optional: small screens */
@media (max-width: 600px) {
  .flexible-title {
    font-size: 1.6rem;
  }
  .flexible-desc {
    font-size: 0.95rem;
  }
	.hero__stats  {
    display: flex;
    flex-direction: column;
    margin-right: 30px;
		
}
}
    /* Responsive */

    @media (max-width: 1000px) {
        .pricing-cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 600px) {
        .pricing-cards {
            grid-template-columns: 1fr;
        }
        .pricing-card ul {
            text-align: left;
            /* List remains left-aligned */
        }
    }