body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f9fa;
         }
         team {
             display:flex;
             flex-wrap: wrap;
             justify-content: center;
         }

         
         
         .header-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5); /* Adjust the overlay color and opacity as needed */
}


         header h1 {
            font-size: 2.5em;
         }

         header p {
            font-size: 1.2em;
         }
         
         

         .container {
            margin-top: 20px;
         }

         .teamCard {
            display: inline-block;
            margin: 10px;
            text-align: center;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.3s ease;
            position: relative;
         }

         .teamCard.selected {
            border-color: #007bff;
         }
         
         
             
    

         .teamImage {
            width: 125px;
            height: 100px;
            object-fit: scale-down;
            border-radius: 10%;
            display:inline-block;
            margin: 0 auto;
         }

         .badge {
            position: absolute;
            top: -10px;
            right: -10px;
            color: white;
         }

.custom-paragraph {
   font-size: 10px; /* Example: Adjust the font size */
   color: #555; 
   text-align: justify;/* Example: Adjust the text color */
   /* Add more custom styles as needed */
}

         #predictionForm {
            max-width: 400px;
            margin: 20px auto;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }

         label {
            font-weight: bold;
            margin-bottom: 5px;
         }

         input.form-control {
            margin-bottom: 15px;
         }

         #selectedTeams {
            margin-top: 10px;
         }

         #selectedTeams span {
            display: block;
            margin-bottom: 10px;
            background-color: #ffae00;
            color: black;
            padding: 5px 10px;
            border-radius: 10px;
         }

         #submitBtn {
            background-color: #FFD300;
            color: black;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
         }

         #submitBtn:hover {
            background-color: #0056b3;
         }

         @media (min-width: 768px) {
            header {
               padding: 80px 0;
            }

            .container {
               display: flex;
               justify-content: space-between;
            }

            #teamsSection {
               flex: 1;
            }

            #predictionForm {
               flex: 1;
               margin: 20px;
            }

            #selectedTeams {
               margin-top: 10px;
               background-color: #f8f9fa;
               padding: 10px;
               border-radius: 10px;
            }
         }

         body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
         }

         .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
         }

         .landing-section {
           background-color: #f5f5f5;
            text-align: center;
            padding: 50px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin: 0 10px;
         }
         
         landing-team {
            background-color: #f5f5f5;
            text-align: center;
            padding: 50px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin: 0 10px;
         }

         .landing-section h1 {
            color: #333;
         }

         .section-description {
            color: #666;
            margin-bottom: 30px;
         }

         .steps {
            display: flex;
            justify-content: space-around;
         }

         .step {
            flex: 1;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin: 0 10px;
         }

         .step h2 {
            color: #333;
         }

         footer {
            background-color: #333;
            color: #fff;
            padding: 50px 0;
            text-align: center;
         }

         footer h3 {
            margin-bottom: 20px;
         }

         header {
            background-image: url('images/header.jpg');
            /* Replace 'your-background-image.jpg' with the actual file path or URL to your background image */
            background-size: cover;
            background-position: center;
            color: #fff;
            text-align: center;
            padding: 20px 20px;
         }

         h1.display-4 {
            font-size: 3.5em;
            margin-bottom: 20px;
         }
         
         
          h1.display-3 {
            font-size: 2.5em;
            margin-bottom: 20px;
         }

         p.lead {
            font-size: 1.2em;
            margin-bottom: -20px;
         }
         
          p.headlead {
            font-size: 1.2em;
            margin-bottom: -20px;
            color:white;
         }

         button.btn-primary {
            font-size: 1.2em;
            padding: 15px 30px;
            border-radius: 5px;
            background-color: #FFD700;
            /* Golden yellow color, feel free to change */
            color: #000;
            /* Black text for contrast */
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
         }

         button.btn-primary:hover {
            background-color: #FFA500;
            /* Darker shade on hover, feel free to change */
         }

         /* Dark Mode */
         body.dark-mode {
            background-color: #333;
            color: #fff;
         }

         body.dark-mode header {
            background-color: #222;
         }

         body.dark-mode .container {
            background-color: #444;
         }

         body.dark-mode .landing-section {
            background-color: #555;
         }

         body.dark-mode footer {
            background-color: #222;
         }

         body.dark-mode .teamCard.selected {
            border-color: #fff;
         }

         body.dark-mode input.form-control,
         body.dark-mode #selectedTeams span {
            background-color: #555;
            color: #fff;
         }

         body.dark-mode #submitBtn,
         body.dark-mode #resetBtn,
         body.dark-mode button.btn-primary {
            background-color: #FFD700;
            color: #000;
         }

         body.dark-mode #submitBtn:hover,
         body.dark-mode #resetBtn:hover,
         body.dark-mode button.btn-primary:hover {
            background-color: #FFA500;
         }

         body.dark-mode .modal-content {
            background-color: #333;
            color: #fff;
         }

         body.dark-mode .modal-header {
            border-bottom: 1px solid #444;
         }

         body.dark-mode .modal-footer {
            border-top: 1px solid #444;
         }

         footer {
            background-color: #333;
            color: #fff;
            padding: 50px 0;
            text-align: center;
         }

         .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
         }

         h3 {
            margin-bottom: 20px;
         }

         p {
            color: #666;
            margin-bottom: 30px;
         }

         .sponsor-logos {
            margin-bottom: 30px;
         }

         .sponsor-logos img {
            width: 100px;
            /* Adjust the width as needed */
            margin: 0 10px;
            /* Adjust the margin between logos */
         }

         .footer-links a {
            color: #fff;
            margin-right: 20px;
            /* Adjust the margin between links */
            text-decoration: none;
         }

         .footer-logo img {
            width: 150px;
            /* Adjust the width as needed */
            margin-top: 20px;
            /* Adjust the margin between the links and your logo */
         }

         /* Media query for mobile */
         @media (max-width: 767px) {
            .steps {
               flex-direction: column;
               align-items: center;
            }

            .step {
               width: 100%;
               margin: 0 0 20px 0;
            }
         }

         /* Other styles for mobile mode */
         #predictionForm button {
            width: 46%;
            /* Adjust the width as needed */
            display: inline-block;
            margin-right: 2%;
         }

         #resetBtn {
            background-color: #007bff;
            /* Blue color */
            color: #fff;
         }