@font-face {
    font-family: "Montserrat";
    src: url("font/Montserrat-Regular.ttf") format("truetype"); /* Correct format name */
    font-weight: normal;
    font-style: normal;
  }
  h1.h2.h3,h4,h5,h6,p span a{
    font-family: Montserrat;
  }

.main-navigation.has-branding .inside-navigation.grid-container, .main-navigation.has-branding.grid-container .inside-navigation:not(.grid-container){
    display: none !important;
}




            .btn-watch .btn {
                font-size: 16px !important;
                font-weight: 500;
            }

        body {
            background-color: #f8f9fa;
            font-family: Montserrat;
        }

        /* Header Styling */
        .header {
            background-color: #2c2c2c;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .uheader {
            background-color: #2c2c2c;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            max-height: 50px;
        }

        .header a {
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
        }

        .header a:hover {
            text-decoration: underline;
        }

        /* Dropdown and Download Button Section */
        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .dropdown-menu {
            background-color: #000;
        }

        .dropdown-menu .dropdown-item {
            color: #fff;
            text-decoration: none;
        }

        .dropdown-menu .dropdown-item:hover {
            background-color: #444;
        }

        /* Download Button */
        .btn-download {
            background-color: #00BA00;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            padding: 3px 5px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 10px;
            text-align: center;
            text-decoration: none;
        }

        .btn-download img {
            max-height: 30px;
            border-radius: 5px;

        }

        .btn-download:hover {
            background-color: #00BA00;
        }

        /* Match Card */
        .match-card {
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 20px;
        }

        .match-card img {
            max-width: 100%;
            height: auto;
        }

        .match-card .team-logo {
            max-width: 50px;
        }

        .btn-watch a {
            margin: 5px;
            text-decoration: none;
        }

        /* Live Status */
        .live-status {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }
a{
    text-decoration: none !important;
}


        .live-status span {
            font-size: 20px;
            font-weight: 900;
            color: #000;
        }

        .starting-soon-status span {
            font-size: 20px;
            font-weight: 900;
            color: #000;
        }

        .btn-watch .btn {
            font-size: 14px;
            font-weight: 500;
            color: #fff;
        }
        .ubtna{
            color: #FFFF00;
            float: center;
            font-size: small !important ;
            
        }
        .ubtnb{
            color: #fff;
            float: center;
            font-size: large !important ;

            
        }
        .pruf{
            background-color: #1C54A5;
        }
        .gruf{
            background-color: #00BA00;
        }
        .live-status {
    display: flex;
    align-items: center;
    gap: 10px; 
}

.live-status img {
    flex-shrink: 0; 
  
}

.live-status span {
    flex-grow: 1; 
    text-align: center; 
    font-size: 20px; 
    font-weight: bold; 
    color: #000; 
}
.touruf{
    text-align: center; 
    font-size: 20px; 
    font-weight: 500; 
    color: #000; 
}
.ufdro{
    font-size: 22px !important;
    font-weight: 400;
}
.btn-watch .btn {
    font-size: 14px;
    font-weight: 500;
    color: #fff; 
    border: none; }

/* Button Hover State */
.btn-watch .btn:hover {
    color: #fff; 
    opacity: 0.9; 
}

/* Active Button State */
.btn-watch .btn:active {
    color: #fff; 
    opacity: 0.8; 
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); 
}

/* Primary Button (pruf) Colors */
.btn-watch .btn.pruf {
    background-color: #1C54A5;
}

.btn-watch .btn.pruf:hover,
.btn-watch .btn.pruf:active {
    background-color: #1C54A5;
}

/* Green Button (gruf) Colors */
.btn-watch .btn.gruf {
    background-color: #00BA00; 
}

.btn-watch .btn.gruf:hover,
.btn-watch .btn.gruf:active {
    background-color: #00BA00; 
}

/* Responsive Styling */
@media (max-width: 768px) {
  .container {
    flex-direction: column; 
    align-items: flex-start;
  }
  .btn-watch .btn{
    font-size: 12px !important;

  }
  .logo{
      margin-bottom: 20px !important;
  }
  .header{
    padding: 24px 8px;
  }
  .header-right {
    display: flex;
    align-items: flex-center;
    gap: 10px;
    margin-top: 20px !important;
    
  }

  .btn-download {
    width: 100%; 
    justify-content: center;
    margin-left: 15px;
  }

  .live-status span{
    font-size: 16px;
    padding: 8px;
    gap: 8px;
  }
  .btn-watch{
      flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  }

  .touruf span{
    font-size: 14px;
    padding: 8px;
  }

  .btn-watch .btn {
    min-width: 80px;
    max-width: 120px;
    font-size: 12px;
  }
  .btn-watch .btn.gruf{
      white-space: nowrap;
  }

}

@media (max-width: 480px) {
  .logo {
    max-width: 250px; 
    margin-bottom: 5px;
  }
  .header{
    padding: 24px 8px;
  }
  .ufdro{
    font-size: 18px !important;
    font-weight: 400;
}
  .dropdown-toggle {
    font-size: 14px;
  }

  .ubtna {
    font-size: 11px !important;
        white-space: nowrap;
  }

  .ubtnb {
    font-size: 18px !important;
  }

  .match-card {
    margin-bottom: 20px;
  }

  .btn-watch .btn {
    flex: 1 1 auto;
    font-size: 10px;
  }

  .live-status {
    font-size: 10px;
    padding: 5px;
  }

  .touruf {
    font-size: 10px;
  }

}