@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
body{
    font-family: 'Cairo', sans-serif;
    background-color: #f8f7fa;
}
html {
    scroll-behavior: smooth;
}
/*==============================

            navbar

================================*/
nav.abha-navbar {
    background-color: #ffffff6b !important;
    backdrop-filter: blur(5px);
}
nav.abha-navbar::before{
    content: url(./images/abha-logo-comp.svg);
    height: 20px;
    width: 100px;
    position: absolute;
    left: 40px;
    bottom: -5px;
}

/* ==============================

            bottons

---------------------------------*/
.abhabutton {
    position: relative;
    font-family: inherit;
    font-weight: 500;
    font-size: 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(to right, #cb0404, #003f79);
    color: #fff;
    overflow: hidden;
  }
  
  .cssbuttons-io svg {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
  }
  
  .abhabutton span {
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: #fff;
  }
  
  .abhabutton::before,
  .abhabutton::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  .abhabutton::before {
    content: "";
    background: #00417c;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  }
  
  .abhabutton:hover::before {
    transform: translate3d(100%, 0, 0);
    color: #fff;
  }
  
  .abhabutton:active {
    transform: scale(0.95);
  }
  












.stadium-background{
    background-image: url(./images/stadium.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.stadium-background-inn{
    background-image: url(./images/stadium.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.mh-100{
    min-height: 100vh;
}
.vh-30{
    height: 30vh !important;
   }
.vh-70{
 height: 70vh !important;
}
.font-small-1 {
    font-size: 0.7rem !important;
}


.font-small-2 {
    font-size: 0.8rem !important;
}


.font-small-3 {
    font-size: 0.9rem !important;
}



.font-small-4 {
    font-size: 1rem !important;
}



.font-medium-1 {
    font-size: 1.1rem !important;
}



.font-medium-2 {
    font-size: 1.2rem !important;
}


.font-medium-3 {
    font-size: 1.3rem !important;
}


.font-medium-4 {
    font-size: 1.4rem !important;
}


.font-medium-5 {
    font-size: 1.5rem !important;
}


.font-large-1 {
    font-size: rem !important;
}



.font-large-2 {
    font-size: 3rem !important;
}



.font-large-3 {
    font-size: 4rem !important;
}



.font-large-4 {
    font-size: 5rem !important;
}



.font-large-5 {
    font-size: 6rem !important;
}

.custom-card{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 15px 35px;
    border: none;
    border-radius: 20px;
}
.logos{
    max-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
.match-info {
    display: flex;
    flex-direction: column;
    padding: 20px;
    align-items: center;
}
.info_date {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

.match-time {
    font-size: 30px;
    font-weight: 200;
    position: relative;
    padding-inline-end: 20px;
    display: flex;
    justify-self: center;
}

.match-time:after {
    content: " ";
    width: 1px;
    height: 40px;
    background: #d8d8d8;
    position: absolute;
    left: 0;
}

.match-day {
    padding-inline: 20px;
}
.weekday {font-weight: 700;display: block;}
.teams {
    display: flex;
    flex-direction: row;
    font-weight: 200;
    justify-content: center;
}
.teams .local:after {
    content: "-";
    margin: 10px;
}
.match-number {
    display: block;
    text-align: center;
}
.match-day-info {
    font-weight: 300;
    line-height: 19px;
    text-align: center;
}
.match-day-info p{
    text-align: center;
}
.buy-tickets {
    text-decoration: none;
    border-radius: .25rem;
    /* font-style: normal; */
    font-weight: 400;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
    clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
    transition: .2s .1s;
    background-image: linear-gradient(90deg,#5723c6,#349bff);
    border: 0 solid;
  }
  
  .buy-tickets:hover {
    cursor: pointer;
    transition: all .3s ease-in;
    padding-right: 18px;
    padding-left: 18px;
    color: #fff;
  }
  .vip-section {
    position: absolute;
    background: #f7ff7e70;
    width: 20%;
    height: 100px;
    left: 50%;
    bottom: 8%;
    transform: translate(-50%, -14%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
.custom-container {
    max-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.stadium-seats {
    width: 60%;
    overflow: hidden;
    margin: 0 50px;
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.next-match {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.next-match img {
    /* width: 30%; */
    max-height: 100px;
    max-width: 100px;
}

.next-match span {
    margin-inline: 10px;
    font-size: 20px;
}





.info_date {
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
    font-weight: 300;
}

.next-match-table #timer div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
    padding: 2px;
    border-radius: 5px;
    margin-inline: 0;
}
.next-match-table .next-match div {
    margin-block: 5px;
    font-size: 10px;
}
.next-match-table .local {
    margin-inline: 0;
    font-size: 15px;
}
.next-match-table .visitor {
    margin-inline: 0;
    font-size: 15px;
}

.competition img {
    max-height: 80px;
    max-width: 80px;
}
/* .cls-1{fill:#e7e696;}.cls-2{fill:#efefed;}.cls-3{fill:#b6b6b6;}.cls-4{fill:#cfd3ea;} */


/* ======================

        seats

=========================*/

.all-section-seats {
    display: flex;
    flex-direction: row;
    margin: 50px 0 0 0;
    justify-content: center;
    text-align: center;
    /* margin: 50px auto 0; */
}
 .seatsReceipt {
  text-align: center;
}
.seat  {
    border: #444451 solid 1px;
    height: 12px;
    width: 15px;
    margin: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}
.seat-column {
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.seatSelected {
  background-color: #dcffd1;
  color: black;
}
.seatUnavailable {
  background-color: gray;
}
.seat-divider-left {
    margin-left: 30px;
}
.seat-divider-right {
    margin-right: 30px;
}
.seatSelection{
    margin-top: 100px;
    opacity: 0;
    display: none;
    visibility: hidden;
    transform: translate(0%, 0%);
}
@keyframes move {
    0%{
        transform: translate(0%, 0%);
        opacity: 0;
        display: none;
        visibility: hidden;
    }
    100% {
        transform: translate(0%, -80%);
        opacity: 1;
        display: block;
        visibility: visible;
    }
}
@media screen and (max-width:650px) {
    @keyframes move {
        0%{
            transform: translate(0%, 0%);
            opacity: 0;
            display: none;
        }
        100% {
            transform: translate(0%, -30%);
            opacity: 1;
            display: block;
        }
    }
    .seatSelection{
        transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        margin-top: 40px;
    }
    .stadium-seats{
        width: 100%;
        margin: 20px 0 0 0;
    }
}
.card {
    background-clip: padding-box;
    box-shadow: 0 0.25rem 1.125rem rgba(75,70,92,.1);
    border: none;
    justify-content: center;
}

.card-header {
    padding: 25px;
    border: none;
    background: var(--bs-body-bg);
}
/*=======================

        staduim svg

=========================*/
#stadium{
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);   
}
#stadium .upper-vip{
    fill:#f7d589;
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}
#stadium.upper-vip-chosen{
    transform: rotateX(180deg) translate(0%, 60%);
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
} 
#stadium .lower-vip{
    fill:#f7d589;
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
}
#stadium.lower-vip-chosen{
    transform: translate(0%, -60%);
    transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
} 
.upper-vip:hover,.lower-vip:hover {
    opacity: 0.5;
    transition: all 5ms ease-in-out !important;
}
/*==========================

        Seats Rows

============================*/
.right-row {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
}
.right-row h6:nth-child(1){
    margin-top: 30px;
}
.right-row h6{
    height: 12px;
    width: 15px;
    margin: 5px;
    padding: 10px;
}
.left-row {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
}
.left-row h6:nth-child(1){
    margin-top: 30px;
}
.left-row h6{
    height: 12px;
    width: 15px;
    margin: 5px;
    padding: 10px;
}
/*======================

    Seats inforamtions

========================*/
.general-info {
    text-align: center;
    display: flex;
    justify-content: center;
}
.number-of-seats-available .total-number-of-seats {
    font-size: 14px;
    color: #8b8b8b;
}
.number-of-seats-available {
    padding: 10px;
    margin-inline-end: 20px;
}
.selection-name {
    display: flex;
    justify-content: center;
    align-items: center;
}
.selection-name .premium-one {
    padding: 5px 10px;
    border: #ed9300 solid 1px;
    background: #f7d589;
    border-radius: 10px;
}
/* ==================

    countdown theme

====================*/
div#timer {
    display: flex;
    justify-content: space-evenly;
}

div#days {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
    padding: 5px;
    border-radius: 5px;
    /* margin-inline: 5px; */
}

div#hours {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
    padding: 5px;
    border-radius: 5px;
    margin-inline: 5px;
}

div#minutes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
    padding: 5px;
    border-radius: 5px;
    margin-inline: 5px;
}

div#seconds {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
    padding: 5px;
    border-radius: 5px;
    margin-inline: 5px;
}
div#seconds span,
div#minutes span,
div#hours span,
div#days span {
    opacity:0.6;
}
/* ==============================

        the stadium svg style

=================================*/
.cls-1{stroke:#e68e00;stroke-width:.39px;}.cls-1,.cls-2,.cls-3,.cls-4{fill:none;}.cls-1,.cls-3,.cls-4{stroke-miterlimit:10;}.cls-5{fill:#683ab7;}.cls-6{fill:#ebe6ff;}.cls-7{fill:#fff;}.cls-8{fill:#fff8e9;}.cls-9{fill:#ffe9ab;}.cls-10{fill:#fff4d9;}.cls-11{fill:#ffe49f;}.cls-12{fill:#b5e7f4;}.cls-13{fill:#319331;}.cls-14{fill:#8cd4ed;}.cls-15{fill:#d7ccff;}.cls-16{fill:#c4b3f4;}.cls-17{fill:#d2f5ff;}.cls-18{fill:#e0e0e0;}.cls-2{stroke:#2163aa;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;}.cls-3{stroke:#000;}.cls-4{stroke:#ec9300;}

/* number of seats and section type badge */
.seats-labels {
    margin-bottom: 20px;
}
.seats-labels a {
    margin-block: 5px;
    margin-inline: 5px;
}
.btn.btn-vip-section {
    background-color: #ffe49f;
    color: #000;
}
.btn-vip-section span.badge {
    background-color: #ffffff;
    color: #000;
    margin-inline: 10px;
    font-weight: 400;
}
.btn.btn-vip-section:hover {
    background-color: #ffd977;
}
.btn.btn-ca-section {
    background-color: #ffe9ab;
    color: #000;
}
.btn-ca-section span.badge {
    background-color: #ffffff;
    color: #000;
    margin-inline: 10px;
    font-weight: 400;
}
.btn.btn-ca-section:hover {
    background-color: #ffe087;
}
.btn.btn-cb-section {
    background-color: #b5e7f4;
    color: #000;
}
.btn-cb-section span.badge {
    background-color: #ffffff;
    color: #000;
    margin-inline: 10px;
    font-weight: 400;
}
.btn.btn-cb-section:hover {
    background-color: #7ae4ff;
}
.btn.btn-f-section {
    background-color: #d7ccff;
    color: #000;
}
.btn-f-section span.badge {
    background-color: #ffffff;
    color: #000;
    margin-inline: 10px;
    font-weight: 400;
}
.btn.btn-f-section:hover {
    background-color: #bfadff;
}
#families-section:hover,
#vip-section:hover,
#vip-section:hover,
#class-a-section:hover,
#class-b-section:hover{
    opacity: 0.7;
    cursor: pointer;
}
/* =====================

    seats animetion

========================*/
/* vip section */
.stadium-seats.vip-stadium-section-chosen {
    transform: translateY(-250px);
}
.seatSelection.vip-section-chosen {
    opacity: 1;
    display: block;
    visibility: visible;
    animation-name: slide-in-bl;
    transform: translateY(-300px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slide-in-bl {
			
    0% {
        transform:translateY(1000px) translateX(-1000px);
        opacity:0;
    }
    100% {
        transform:translateY(0) translateX(0);
        opacity:1;
    }
}
/* mobile */
@media screen and (max-width: 650px){
    /* vip section */
    .seatSelection.vip-section-chosen {
        opacity: 1;
        display: block;
        visibility: visible;
        transform: translateY(-150px);
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        transform: move ;
    }
    .stadium-seats.vip-stadium-section-chosen {
        transform: translateY(-140px);
        transform: move ;
    }
}
/* test */
.match-now-running {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ddffea;
    padding: 5px;
    border-radius: 5px;
    margin-inline: 25px;
}

.match-now-running span:after {
    content: " ";
    display: block;
    width: 15px;
    height: 5px;
    background: #0bc66f;
    margin-block: 10px;
    border-radius: 20px;
    animation: run 1s linear 0s infinite normal none;
    margin-inline: auto;
}

@-webkit-keyframes run {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}
.match-ended {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffdddd;
    padding: 5px;
    border-radius: 5px;
    margin-inline: 25px;
}
.no-matches {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sponsor {
    max-width: 80%;
    margin-inline: auto;
    background-color: #fff;
    padding: 10px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sponsor img {
    max-width: 40px;
    max-height: 60px;
    margin: 10px;
}
main.no-matches {
    height: 100vh;
}
section.no-matches {
    display: none;
}
.apple-pay {
    background: black;
    color: white;
    font-weight: 500;
    font-size: 18px;
    border-radius: 10px;
    border: none;
    margin-right: 10px;
    display: flex;
    justify-content: center;
}

.apple-pay span{
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
}

.apple-pay img {
    display: flex;
    height: 20px;
    filter: brightness(0) invert(1);
}
.apple-pay:hover {
    background: #00000036;
    color: black;
    font-weight: 500;
    font-size: 18px;
    border-radius: 10px;
    border: none;
    margin-right: 10px;
    display: flex;
    justify-content: center;
}

.apple-pay:hover img {
    filter: none;
}
.text-medium-gray {
    color: #757575;
}
.no-decoration {
    text-decoration: none;
}
footer {
    background: #e7e7e7;
}
.footer-logos img {
    height: 20px;
    margin: 20px 10px;
}

p.hr-line{
    position:relative;
    max-width: 100%;
    text-align: center;
    width: 100%;
    padding: 10px 0;
}
p.hr-line:after {
    position: absolute;
    content: "";
    height: 1px;
    background: linear-gradient(to right, #cb0404, #003f79);
    top: 50%;
    width: 46%;
    left: 0;
}
p.hr-line:before {
    position: absolute;
    content: "";
    height: 1px;
    background: linear-gradient(to left, #cb0404, #003f79);
    top: 50%;
    width: 46%;
    right: 0;
}

@media screen and (max-width: 500px) {
    .reservation-page .apple-pay{
        width: 100%;
    }
      .reservation-page .abhabutton{
          width: 100% ;
      }
  }

  @media screen and (max-width: 500px) {
    .payment-btn-holder .abhabutton {
        width: 100%;
        display: block;
        margin-block: 10px;
    }
    
    .payment-btn-holder #apple-device .apple-pay {
        width: 100%;
        display: flex;
        margin: 0;
    }
    .payment-btn-holder{
        flex-direction: column;
    }
    .match-info{
      align-items: center;
    }
    .next-match-table #timer div{
        margin: 5px  8px;
        padding: 5px 10px;
      }
      
  }
  @media screen and (min-width: 500px){

   div p.hr-line{
       display: none;
    }
  }