:root {
 --primary-bg-color: #000000; /* Define a global variable */
 }
 //santafefuego.com
 
 /* General Styling */
 body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
 overflow-x: hidden;	
   background-image: url('#'); /* Adjust the background image path */
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 /* Navigation Bar */
 .navbar {
   background-color: var(--primary-bg-color);
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px 20px;
   position: sticky;
   top: 0;
   z-index: 1000;
   width: 100%;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .navbar-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
 }
 
 /* Hamburger Menu */
 .menu-icon {
   display: none;
   font-size: 1.8em;
   cursor: pointer;
   color: white;
 }
 
 /* Logo */
 .navbar-logo img {
   height: 40px;
   width: auto;
 }
 
 /* Navigation Links */
 .navbar-links {
   list-style: none;
   display: flex;
   margin: 0;
   padding: 0;
   gap: 15px;
   flex-grow: 1;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
 }
 
 .navbar-links li {
   display: inline;
 }
 
 .navbar-links a {
   text-decoration: none;
   color: white;
   font-size: 14px;
   transition: color 0.3s ease;
   padding: 8px 15px;
 }
 
 .navbar-links a:hover {
   color: #464545;
 }
 
 /* Dropdown Menu */
 .navbar-item--dropdown {
   position: relative;
 }
 
 .navbar-item--dropdown .dropdown-menu {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   background-color: #fff;
   border: 1px solid #ddd;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 1rem;
   width: 300px;
   z-index: 1000;
 }
 
 /* Triangle Pointed Arrow */
 .navbar-item--dropdown .dropdown-menu::before {
   content: '';
   position: absolute;
   top: -10px;
   left: 20px;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #fff;
   z-index: 1001;
   filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
 }
 
 .navbar-item--dropdown:hover .dropdown-menu {
   display: block;
 }
 
 .navbar-item--dropdown .dropdown-menu li {
   list-style: none;
   margin: 0;
 }
 
 .navbar-item--dropdown .dropdown-menu a {
   text-decoration: none;
   display: block;
   padding: 0.5rem 1rem;
   color: #333;
   font-size: 14px;
   transition: background-color 0.3s ease;
 }
 
 .navbar-item--dropdown .dropdown-menu a:hover {
   color: #fc4763;
   text-decoration: underline;
 }
 
 /* Show Dropdown Menu on Hover */
 .navbar-item--dropdown:hover .dropdown-menu {
   display: grid;
 }
 
 /* Right-side Icons */
 .navbar-icons {
   display: flex;
   align-items: center;
   gap: 20px;
   padding-right: 20px;
 }
 
 .icon {
   display: inline-block;
   width: 25px;
   height: 25px;
   background-size: cover;
   background-repeat: no-repeat;
 }
 
 .social-icons icon{
   display: flex;
   align-items: center;
   gap: 8px;
   fill: grey;
 }
 
 .small-screen-social-icon{
   display: none;
 }
 
 .search-icon {
   background-image: url('./images/search-icon.png');
   width: 20px;
   height: 20px;
 }
 
 .user-icon {
   background-image: url('./images/user-icon.png');
 }
 
 .fb-icon {
   background-image: url('./images/fb-icon.png');
 }
 
 .x-icon {
   background-image: url('./images/x-icon.png');
 }
 
 .email-icon {
   background-image: url('./images/email-icon.png');
 }
 
 .link-icon {
   background-image: url('./images/link-icon.png');
 }
 
 .instagram-icon {
   background-image: url('./images/insta-icon.png');
 }
 
 /* Content Layout */
 .content {
   display: flex;
   max-width: 1200px;
   margin: 20px auto;
 }
 
 /* Sidebar adjustments */
 .sidebar {
   position: sticky;
   top: 0;
   width: 25%;
   background: #f4f4f4;
   padding: 15px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   max-height: 1000px;
   overflow-y: auto;
 }
 
 /* Card styling inside the sidebar */
 .card {
   margin-bottom: 200px;
   padding: 10px;
   //background: #ffffff;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   color:black;
 }
 
 /* Card Item */
 .card-item {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 10px;
   margin-bottom: 10px;
   //background-color: #ffffff;
   border-radius: 5px;
   flex-direction: column;
   transition: background-color 0.3s ease, color 0.3s ease;
   cursor: pointer;
   
 }
 
 .card-item:hover {
   background-color: #002d72;
   color: #ffffff;
 }
 
 /* Prevent text links from showing styles */
 .card-item a {
   text-decoration: none;
   color: inherit;
   
 }
 
 /* Card Image */
 .card-image {
   width: 120px;
   height: auto;
   border-radius: 5px;
   object-fit: cover;
   margin-right: 15px;
 }
 
 /* Card Title */
 
 .card-title {
 font-size: 16px;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 line-height: 1.2;
 flex: 1; /* Allows text to take up remaining space */
 
 }
 
 /* News Section */
 .news-section {
   flex: 1;
   padding: 15px;
 }
 
 .news-card {
   background: white;
   padding: 15px;
   margin-bottom: 20px;
   border: 1px solid #ddd;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   color: black;
 }
 
 .news-title {
   font-size: 1.5em;
   margin-bottom: 10px;
 }
 
 .news-image {
   width: 100%;
   height: auto;
   border-radius: 5px;
 }
 
 .news-meta {
   display: flex;
   justify-content: space-between;
   color: grey;
   font-size: 0.9em;
   margin-top: 20px;
   margin-right: 50px;
   margin-left: 50px;
 }
 
 .news-description {
   display: none;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.2em;
   margin-bottom: 50px;
   margin-right: 50px;
   margin-left: 50px;
 }
 
 .news-description-preview {
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.2em;
   margin-bottom: 50px;
   margin-right: 50px;
   margin-left: 50px;
   display: block;
 }
 
 .view-more {
   display: block;
   margin: 10px auto 0;
   padding: 10px 15px;
   border: 1px solid lightgray;
   color: lightgray;
   background: transparent;
   cursor: pointer;
   border-radius: 5px;
   text-align: center;
 }
 
 /* Basic styling */
 body {
   font-family: Arial, sans-serif;
 }
 
 .search-bar {
   display: none;
   width: 200px;
   padding: 5px;
   font-size: 14px;
   border-radius: 5px;
   border: 1px solid #ddd;
 }
 
 .search-icon {
   background-color: transparent;
   border: none;
   cursor: pointer;
 }
 
 .search-icon:focus {
   outline: none;
 }
 
 .stats-summary-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 10px;
}

.stats-summary-content {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
}

.stats-summary-team-logo {
  width: 20px;
  height: auto;
}

.stats-summary-team-logo img {
  margin-top: 2px;
  height: 10px;
}

.stats-summary-player-name {
  flex-grow: 1;
  white-space: nowrap;
}

.stats-summary-player-name a {
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.stats-summary-player-score {
  min-width: 30px;
  text-align: right;
}




.top-news-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.top-news-content {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  margin-bottom: 10px;
}

.top-news-bulletin {
  margin-left: 10px;
  width: 5px;
  height: auto;
}

.top-news-date {
  width: 60px;
  white-space: nowrap;
}

.top-news-link a {
  display: inline-block;
  white-space: nowrap;
}
 
 /* Responsive Design for Smaller Screens */
 @media (max-width: 768px) {
	 
	 .navbar {
max-width: 985px;
width: 985px;
}
 
   .search-bar {
     display: none;
     width: 50%;
     height: 15px;
     transform: translateX(50%);
   }
 
   .navbar-search {
     width: 100%;
   }
 
   .navbar-logo {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
   }
 
   .navbar-links {
     display: none;
     flex-direction: column;
     position: absolute;
     left: 0;
     top: 60px;
     width: 40%;
     height: 100vh;
     padding: 10px 0;
     gap: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     background: white;
     border-radius: 5px;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
     font-weight: normal;
   }
 
   .navbar-link {
     position: relative;
     display: flex;
     /*justify-content: space-between;*/
     align-items: center;
   }
 
   .navbar-link::after {
     content:  url('./images/arrow-icon.ico');;
     position: absolute;
     right: 10px;
     width: 10px;
     height: 10px;
     display: inline-block;
   }
 
   .navbar-item--dropdown .dropdown-menu {
     display: none;
     position: absolute;
     left: calc(100%);
     background-color: #fff;
     top: calc(0%);
     width: calc(100%);
   }
 
   .navbar-item--dropdown .dropdown-menu::before {
    display: none;
   }
 
   .navbar-links.show {
     display: flex;
   }
 
   .navbar-links li {
     text-align: left;
     padding: 5px 10px;
   }
 
   .navbar-links a {
     display: block;
     color: black;
     font-size: 14px;
     text-decoration: none;
     padding: 0px;
   }
 
   .navbar-links a:hover {
     color: #005bac;
   }
 
   .navbar-icons {
     display: flex;
     align-items: center;
     gap: 20px;
     padding-right: 30px;
   }
 
   .menu-icon {
     display: block;
     font-size: 1.8em;
     cursor: pointer;
     color: white;
   }
 
   .sidebar {
     display: none;
   }
 
   .news-description-preview {
     display: none;
   }
 
   .news-description {
     display: block;
   }
 
   .small-screen-social-icon{
     display: flex;
     gap: 20px;
     align-items: center;
     text-align: left;
     padding: 5px 10px;
   }
}