/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
}
       .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #051c2d;
            color: white;
            padding: 10px 20px;
        }

        .logo img {
            height: 40px;
        }

        .nav a {
    text-decoration: none;
    color: #fff; /* Change to desired color */
    margin: 0 15px;
    font-weight: bold;
}

.nav a:hover {
    color: #007bff; /* Highlight color on hover */
    text-decoration: underline;
}


        .search {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .search input {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .search button {
            padding: 5px 10px;
            background-color: #ffa500;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search button:hover {
            background-color: #ff8c00;
        }



        .Button_button__L2wUb {
            padding: 10px 20px;
            background-color: #c8102e;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .Button_button__L2wUb:hover {
            background-color: #a60d24;
        }
        
        
                .MaxWidthContainer_mwc__ID5AG {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .PackageSelector_container__IGEcD {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .PeriodToggle_container__rgF5A {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .PeriodToggle_toggleContainer__PfdmE {
            display: flex;
            background: #eaeaea;
            border-radius: 20px;
            padding: 5px;
        }

        .PeriodToggle_toggleOption__SYo2y {
            padding: 10px 20px;
            cursor: pointer;
        }

        .PeriodToggle_toggleOption__SYo2y:hover {
            background: #d6d6d6;
            border-radius: 20px;
        }

        .PackageSelector_lpCardRow__67tWH {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .LeaguePassCard_container__lZ_BQ {
            flex: 1 1 calc(50% - 20px);
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .LeaguePassCard_planCard__gD5li {
            padding: 20px;
        }

        .LeaguePassCard_title___BCxB {
            font-size: 24px;
            margin: 0 0 10px;
        }

        .LeaguePassCard_priceAndCta__L8Ras {
            margin-top: 20px;
            text-align: center;
        }

        .LeaguePassCard_costSmall__gZzq7 {
            font-size: 20px;
            color: #333;
            margin: 5px 0;
        }

        .CTA_button__IzkCs {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .CTA_transparent__wnYSp {
            background: #0077cc;
            color: #fff;
        }

        .CTA_transparent__wnYSp:hover {
            background: #005fa3;
        }

        .CTA_gold__9oEt2 {
            background: #ffc107;
            color: #333;
        }

        .CTA_gold__9oEt2:hover {
            background: #e0a800;
        }

        .LeaguePassCard_feature__Ik8U_ {
            border-top: 1px solid #eaeaea;
            padding: 10px;
            text-align: center;
        }

        .LeaguePassCard_featureHeader__v4GoC {
            font-weight: bold;
            margin: 0;
        }

        .LeaguePassCard_tag__S9Sd3 {
            display: inline-block;
            background: #0077cc;
            color: #fff;
            padding: 2px 8px;
            border-radius: 5px;
            font-size: 12px;
        }
        
        
        
        /* Container styles */
.PackagesContent_packagesContentSection__FsCxL {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.PackagesContentItem_packagesContentItem__SFfF1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
  background-color: #f4f4f4;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.PackagesContentItem_content__F9FUX {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* Image styling */
.PackagesContentItem_image__tMIBa img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
}

/* Text and Button Section */
.PackagesContentItem_textAndCta__LL8eS {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  flex: 1;
}

.PackagesContentItem_textContent__Sa0oG {
  margin-bottom: 20px;
}

.PackagesContentItem_titleText__cVhxJ {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
}

.PackagesContentItem_descriptionText__scccD {
  font-size: 1rem;
  color: #666;
}

/* Button Styles */
.Button_button__L2wUb {
  background-color: #0078d4;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.Button_button__L2wUb:hover {
  background-color: #005fa3;
}

.Button_button__L2wUb:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}



/* Accordion styles */
.Question_answer__Dnbuv {
  overflow: hidden;
  max-height: 0;  /* Initially collapsed */
  transition: max-height 0.3s ease-in-out;
}

.Question_answer__Dnbuv.open {
  max-height: 1000px; /* Allow enough height for the content */
}


        
  h1, h2 {
            color: #2c3e50;
        }
        p {
            margin-bottom: 1em;
        }
        ul {
            margin-bottom: 1em;
        }
        .pricing-comparison {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        .pricing-comparison h3 {
            color: #2980b9;
        }
        .features-list {
            list-style-type: none;
            padding: 0;
        }
        .features-list li {
            margin-bottom: 10px;
        }
        .cta-button {
            background-color: #27ae60;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            display: inline-block;
            margin-top: 20px;
        }
        .cta-button:hover {
            background-color: #2ecc71;
        }       
        
        
        
        
          /* Container for the video gallery */
        .video-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            padding:25px;
        }

        /* Individual video item */
        .video-item {
            width: 350px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            cursor: pointer;
            position: relative;
            transition: transform 0.3s;
        }
         
         
    .video-thumbnail {
        position: relative;
    }

    /* Styling for the image in the video item */
    .video-item img {
        width: 100%;
        height: auto;
    }

    /* Overlay for the video duration text */
    .video-duration {
        position: absolute;
        bottom: 10px;   /* Position from the bottom */
        right: 10px;    /* Position from the right */
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
    }
         
         
         
         
        /* Styling for the thumbnail image */
        .video-item img {
            width: 100%;
            height: auto;
        }

        /* Hover effect for the video item */
        .video-item:hover {
            transform: scale(1.05);
        }

        /* Video information overlay */
        .video-info {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 45px;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        /* Show the video info on hover */
        .video-item:hover .video-info {
            opacity: 1;
        }

        .video-info h3 {
            font-size: 18px;
            margin: 0;
        }

        .video-info .metadata {
            font-size: 10px;
            margin-top: 10px;
        }

        /* Button to show the video */
        .watch-button {
            margin-top: 10px;
            background-color: #ff4500;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            text-align: center;
            display: none;
        }

        .video-item:hover .watch-button {
            display: block;
        }

        /* Video player styles */
        .video-player {
            display: none;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }

        iframe {
            width: 100%;
            height: 315px;
            border: none;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .video-item {
                width: 100%;
                margin-bottom: 20px;
            }
        

    .content {
      min-height: 100vh;
      padding-bottom: 120px; /* Ensure content doesn't overlap footer */
    }