﻿.wc-header {
  position: relative;
  width: 100%;
  height: 150px;
  background: url("../../Images/worldCup/worldCupHeaderDesktop.webp");
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  margin-bottom: 40px;
}

.wc-hero__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.wc-hero__cup {
  background-image: url(../../Images/worldCup/worldCupDesktop.webp);
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 535px;
  width: 100%;
  height: 155px;
  margin: 0px auto;
}

.wc-nav__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  width: 100%;
  margin-top: -47px;
  padding: 0 8px;
}

.wc-nav__item {
  max-width: 181px;
  width: 100%;
}

.wc-tab {
  display: flex;
  justify-content: center;
  padding: 7px;
  border: none;
  background-color: #ffffff;
  color: #000000;
  font-family: DroidKufiBold, Arial;
  font-size: 13px;
}

.wc-nav__item:nth-child(3) {
  margin-left: 122px;
}

.wc-tab:hover,
.wc-tab:focus-visible {
  background-color: #04cf5c;
  outline: none;
}

.wc-tab--active {
  background-color: #04cf5c;
}

.searchResult  .ttl h1{background:#056818}
.searchResult  .ttl {    border-bottom: 2px solid #056818;}
.searchResult .filterDiv .filterItem{background:#056818}

@media (min-width: 768px) {
  .content {
    padding: 0px 16px 16px 16px !important;
  }

  .wc-header {
    width: calc(100% + 32px);
    max-width: 100vw;
    margin-left: -16px;
    margin-right: -16px;
    box-sizing: border-box;
  }
}

@media (min-width: 1360px) and (max-width: 1919px) {
  .wc-hero__cup {
    max-width: 470px;
    width: 100%;
  }

  .wc-nav__list {
    margin-top: -65px;
  }
}

@media (min-width: 1280px) and (max-width: 1359px) {
  .wc-hero__cup {
    max-width: 420px;
    width: 100%;
  }

  .wc-nav__list {
    margin-top: -75px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .wc-hero__cup {
    max-width: 320px;
    width: 100%;
  }

  .wc-nav__list {
    margin-top: -92px;
  }

  .wc-tab {
    padding: 3px;
  }
}

@media (min-width: 992px) and (max-width: 1023px) {
  .wc-hero__cup {
    max-width: 430px;
    width: 100%;
  }

  .wc-nav__list {
    margin-top: -70px;
  }

  .wc-tab {
    padding: 4px;
  }
}

@media (min-width: 900px) and (max-width: 991px) {
  .wc-hero__cup {
    max-width: 400px;
    width: 100%;
    margin-bottom: 16px;
  }

  .wc-nav__list {
    margin-top: -85px;
  }

  .wc-tab {
    padding: 2px;
  }
}

@media (max-width: 899px) {
  .wc-header {
    background: url("../../Images/worldCup/worldCupHeaderMobile.webp");
    background-repeat: no-repeat;
    background-size: 100% 90px;
    margin-bottom: 16px;
    height: 130px;
  }

  .wc-hero__cup {
    background-image: url("../../Images/worldCup/worldCupMobile.webp");
    background-position: center;
    max-width: unset;
    width: 100%;
    height: 90px;
  }

  .wc-nav__item:nth-child(3) {
    margin-left: 0px;
  }

  .wc-nav__list {
    display: flex;
    align-items: normal;
    justify-content: normal;
    gap: 0px;
    width: 100%;
    margin-top: 0px;
    padding: 0px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .wc-tab {
    padding: 13px;
  }
}
