@media (min-width: 320px) and (max-width: 767px) {

.toggleBtn {
margin-left: 0;
position: absolute;
top: 5px;
right: 20px;
}

.toggleBtn {
width: 30px;
background: #000;
height: 30px;
}




.toggleBtn div {
width: 100%;
height: 5px;
background: #fff;
margin: 5px auto;
transition: all 0.3s;
backface-visibility: hidden;
}

ul.menu.active {
transform: rotateX(0deg);
visibility: visible;
opacity: 1;
transform-origin: top;
transition: 0.5s;
z-index: 2;
}

ul.menu {
flex-direction: column;
gap: 10px;
position: fixed;
right: 0px;
top: 50px;
width: 100%;
background: #fff;
padding: 34px 20px;
transform: rotateX(90deg);
transform-origin: top;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}



/* Hide regular menus and display toggle button */
  .left-menu, .right-menu {
    display: none;
  }

  .toggle-btn {
    display: flex;
  }

  /* Show mobile menu when active */
  .mobile-menu.active {
    display: block;
            height: auto;
  }

.mobile-menu a:hover {
 background: transparent linear-gradient(180deg, #4951FE 0%, #BF01FF 100%) 0% 0% no-repeat padding-box;
  border-radius: 5px;
}






.text-goal span {
background: #FE1644 0% 0% no-repeat padding-box;
padding: 0 10px;
margin-right: 15px;
width: 100%;
display: block;
}

.text-goal-images {
display: block;
}

.menu-list {
padding: 0;
}

.flex-footer {
display: block;
}

.fifa-logo img {
width: auto;
}

.bg-service {
height: auto;
}

.flex-logo-card {
height: auto;
display: block;
}

.banner-txt-image img {
width: 35%;
}

.banner-text h1 {
line-height: 40px;
font-size: 20px;
padding-top: 0px;
}

.banner-txt-fifa {
top: 38%;
left: 8%;
}

.header--logo img {
width: 60%;
}

nav {
top: 0px;
justify-content: left;
}

.box-card {
background: transparent linear-gradient(180deg, #4951FE 0%, #BF01FF 100%) 0% 0% no-repeat padding-box;
padding: 10px;
border-radius: 30px;
}

.txt-heartland p {
padding: 0 0px;
}

.txt-heartland h2 {
font-size: 24px;
font-weight: 700;
}

.counter-txt h2 {
font-size: 24px;
padding-bottom: 20px;
font-weight: 700;
}

#counter {
display: block;
}


#counter .item {
height: auto;
}

.counter-txt span {
font-size: 42px;
}

#counter .item .count {
font-size: 42px;
padding-top: 10px;
}

.heading-match h2 {
font-size: 24px;
}

.text-goal h2 {
font-size: 24px;
}

.never-down-txt h3 {
font-size: 24px;
font-weight: 700;
}

.fifa-card-txt h3 {
width: 100%; 
text-align: center;
line-height: 32px;
font-size: 24px;
font-weight: 600;
}

.button-fifa {
width: 100%;
margin-top: 20px;
}

.menu-list ul li a {
color: #222;
}

.header--logo
{
text-align: left;
}

.text-goal-images h3 {
font-size: 24px;
font-weight: 700;
}

.venue-image {
background-image: url(../../assets/image/viva-banner.png);
margin-top: 30px;
background-repeat: no-repeat;
background-size: cover;
padding: 30px 15px;
background-position: right;
text-align: left;
height: auto;
border-radius: 40px;
}

.venue-image h1 {
font-size: 25px;
margin: 0;
font-weight: 700;
}

.venue-image p {
margin: 0;
}

.search-container input {
width: 100%;
}

.venue-detail {
padding: 15px;
}

.venue-detail h2 {
font-size: 22px;
text-align: left;
width: 100%;
}

.venue-detail p {
text-align: left;
}

.venue-map img {
width: 100%;
}

.main-box {
padding: 20px;
display: block;
}

.stadium-image img {
width: 100%;
}

.stadium-description {
padding-top: 25px;
}

.dallas-box {
display: block;
}

.stadium-detail h2 {
font-size: 24px;
}


.schedule-detail {
padding: 10px;
}

.schedule-detail h2 {
text-align: left;
}

.schedule-detail p {
width: 100%;
text-align: left;
}

.date-box {
margin: 10px;
height: auto;
}


.blog-image-banner {
background-image: url(../../assets/image/viva-banner.png);
margin-top: 30px;
background-repeat: no-repeat;
background-size: cover;
padding: 30px 15px;
background-position: center;
text-align: left;
height: auto;
border-radius: 40px;
}

.blog-image-banner h1 {
font-size: 22px;
margin: 0;
font-weight: 700;
width: 100%;
padding-bottom: 10px;
}

.blog-detail-image {
margin-right: 0px;
}

.blog-detail-text p {
margin-right: 0px;
text-align: left;
}

.blog-detail-text h2, h3 {
font-size: 20px;

}

.author-card-flex {
display: block;
}

.contact-text p {
width: 100%;
padding-top: 10px;
}

.match-txt h2 {
width: 100%;
line-height: 32px;
font-weight: 700;
font-size: 22px;
}

.match-team2:before {
width: 100%;
bottom: -15px;
left: 0;
}

.match-team2 {
display: block;
}


.privacy-policy-text p {
text-align: left;
}

.privacy-policy-text h2,h3 {
font-size: 24px;
}

.timeContainer .wrapper {
    display: block;
}

.counting-txtes:after
{
    display: none;
}

.privacy-policy {
    display: block;
}

.footer-copyright {
    display: block;
}

.privacy-policy p:after {
 display: none;
}

.column-header {
    padding: 10px 60px;
    font-size: 18px;
}

.table-schedule {
    flex-wrap: nowrap;
    overflow-x: scroll;
    scrollbar-color: #6a00ff #dd00ff; 
    scrollbar-width: thin;
}







.column {
    padding: 30px;
}

.column p {
    font-weight: 300;
    font-size: 18px;
    text-align: left;
}


.venue-map {
    margin-top: 70px;
}

.grid-container {
    gap: 10px;
}


.list-menu ul li:nth-child(4)
{
  display: block;
}

.list-menu ul li:nth-child(5)
{
  display: block;
}

.list-menu ul li:nth-child(6)
{
  display: block;
}

.mobile-menu ul {
    margin: 0;
    padding: 0;
}

.mobile-menu a {
    padding: 4px 0px;
}

.mobile-menu li {
    margin: 10px 0;
}

.quick-link {
    right: -120px;
}

.quick-link ul li a {
    font-size: 18px;
    padding: 15px 20px;
}

}


/* tab media query */


@media (min-width: 768px) and (max-width: 1024px) {

.toggleBtn {
margin-left: 0;
position: absolute;
top: 5px;
right: 20px;
}

.toggleBtn {
width: 30px;
background: #000;
height: 30px;
}




.toggleBtn div {
width: 100%;
height: 5px;
background: #fff;
margin: 5px auto;
transition: all 0.3s;
backface-visibility: hidden;
}

ul.menu.active {
transform: rotateX(0deg);
visibility: visible;
opacity: 1;
transform-origin: top;
transition: 0.5s;
z-index: 2;
}

ul.menu {
flex-direction: column;
gap: 10px;
position: fixed;
right: 0px;
top: 50px;
width: 100%;
background: #fff;
padding: 34px 20px;
transform: rotateX(90deg);
transform-origin: top;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}



/* Hide regular menus and display toggle button */
  .left-menu, .right-menu {
    display: none;
  }

  .toggle-btn {
    display: flex;
  }

  /* Show mobile menu when active */
  .mobile-menu.active {
    display: block;
            height: auto;
  }

.mobile-menu a:hover {
 background: transparent linear-gradient(180deg, #4951FE 0%, #BF01FF 100%) 0% 0% no-repeat padding-box;
  border-radius: 5px;
}


.text-goal span {
background: #FE1644 0% 0% no-repeat padding-box;
padding: 0 10px;
margin-right: 15px;
width: 100%;
display: block;
}

.text-goal-images {
display: block;
}

.menu-list {
padding: 0;
}

.flex-footer {
display: block;
}

.fifa-logo img {
width: auto;
}

.bg-service {
height: auto;
}

.flex-logo-card {
height: auto;
display: block;
}

.banner-txt-image img {
width: 35%;
}

.banner-text h1 {
line-height: 40px;
font-size: 20px;
padding-top: 0px;
}

.banner-txt-fifa {
top: 38%;
left: 8%;
}

.header--logo img {
width: 60%;
}

nav {
top: 0px;
justify-content: left;
}

.box-card {
background: transparent linear-gradient(180deg, #4951FE 0%, #BF01FF 100%) 0% 0% no-repeat padding-box;
padding: 10px;
border-radius: 30px;
}

.txt-heartland p {
padding: 0 0px;
}

.txt-heartland h2 {
font-size: 24px;
font-weight: 700;
}

.counter-txt h2 {
font-size: 24px;
padding-bottom: 20px;
font-weight: 700;
}

#counter {
display: block;
}


#counter .item {
height: auto;
}

.counter-txt span {
font-size: 42px;
}

#counter .item .count {
font-size: 42px;
padding-top: 10px;
}

.heading-match h2 {
font-size: 24px;
}

.text-goal h2 {
font-size: 24px;
}

.never-down-txt h3 {
font-size: 24px;
font-weight: 700;
}

.fifa-card-txt h3 {
width: 100%; 
text-align: center;
line-height: 32px;
font-size: 24px;
font-weight: 600;
}

.button-fifa {
width: 100%;
margin-top: 20px;
}

.menu-list ul li a {
color: #222;
}

.header--logo
{
text-align: left;
}

.text-goal-images h3 {
font-size: 24px;
font-weight: 700;
}

.venue-image {
background-image: url(../../assets/image/viva-banner.png);
margin-top: 30px;
background-repeat: no-repeat;
background-size: cover;
padding: 30px 15px;
background-position: right;
text-align: left;
height: auto;
border-radius: 40px;
}

.venue-image h1 {
font-size: 25px;
margin: 0;
font-weight: 700;
}

.venue-image p {
margin: 0;
}

.search-container input {
width: 100%;
}

.venue-detail {
padding: 15px;
}

.venue-detail h2 {
font-size: 22px;
text-align: left;
width: 100%;
}

.venue-detail p {
text-align: left;
}

.venue-map img {
width: 100%;
}

.main-box {
padding: 20px;
display: block;
}

.stadium-image img {
width: 100%;
}

.stadium-description {
padding-top: 25px;
}

.dallas-box {
display: block;
}

.stadium-detail h2 {
font-size: 24px;
}


.schedule-detail {
padding: 10px;
}

.schedule-detail h2 {
text-align: left;
}

.schedule-detail p {
width: 100%;
text-align: left;
}

.date-box {
margin: 10px;
height: auto;
}


.blog-image-banner {
background-image: url(../../assets/image/viva-banner.png);
margin-top: 30px;
background-repeat: no-repeat;
background-size: cover;
padding: 30px 15px;
background-position: center;
text-align: left;
height: auto;
border-radius: 40px;
}

.blog-image-banner h1 {
font-size: 22px;
margin: 0;
font-weight: 700;
width: 100%;
padding-bottom: 10px;
}

.blog-detail-image {
margin-right: 0px;
}

.blog-detail-text p {
margin-right: 0px;
text-align: left;
}

.blog-detail-text h2, h3 {
font-size: 20px;

}

.author-card-flex {
display: block;
}

.contact-text p {
width: 100%;
padding-top: 10px;
}

.match-txt h2 {
width: 100%;
line-height: 32px;
font-weight: 700;
font-size: 22px;
}

.match-team2:before {
width: 100%;
bottom: -15px;
left: 0;
}

.match-team2 {
display: block;
}


.privacy-policy-text p {
text-align: left;
}

.privacy-policy-text h2,h3 {
font-size: 24px;
}

.match-team {
display: block;
}

.match-team:before {
bottom: -20px;
height: 1px;
left: 0;
}

.timeContainer .wrapper {
    display: block;
}

.privacy-policy {
    display: block;
}

.footer-copyright {
    display: block;
}

.privacy-policy p:after {
 display: none;
}

.column-header {
    padding: 10px 60px;
    font-size: 18px;
}

.table-schedule {
    flex-wrap: nowrap;
    overflow: scroll;
}

.column {
    padding: 30px;
}

.column p {
    font-weight: 300;
    font-size: 18px;
    text-align: left;
}

.venue-map {
    margin-top: 70px;
}

.grid-container {
    gap: 10px;
}

.counting-txtes:after {
  display: none;
}

.mobile-menu ul {
    margin: 0;
    padding: 0;
}

.mobile-menu a {
    padding: 4px 0px;
}

.mobile-menu li {
    margin: 10px 0;
}

.mobile-menu {
    top: 50px;
}



}