@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');

@font-face {
  font-family: 'WorldCup2026';
  src: url('../fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;  
  padding: 0;
  box-sizing: border-box;
  color: rgb(255, 255, 255) !important;
}

.content-background {
  height: 100vh;
  background: -moz-linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background: -webkit-linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background: linear-gradient(45deg, #6E3FB0 0%, #7A1A24 25%, #D62828 50%, #2D9B3F 75%, #C8E84D 100%);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
  /*min-height: calc(100vh - 2rem);*/
  display: flex;  
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  overflow: hidden; 
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* media query for height */

@media screen and (max-height: 600px) {
  .content-background {
      height: 100vw;
  }
}

@media screen and (max-width: 1000px) {
  .content-background {
      min-height: 800px;
      height: 100%;
  }
}

.content-background::before, 
.content-background::after {
  content: "";
  width: 70vmax;
  height: 70vmax;
  position: absolute;
  background: rgba(255, 255, 255, 0.07);
  left: -20vmin;
  top: -20vmin;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  z-index: 1;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
  pointer-events: none; 
  overflow: hidden;
}
.content-background::after {
  width: 70vmin;
  height: 70vmin;
  left: auto;
  right: -10vmin;
  top: auto;
  bottom: 0;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%; 
  overflow: hidden;
}

@-webkit-keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@keyframes Gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}

@keyframes morph {
  0% {
      border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  }
  100% {
      border-radius: 40% 60%;
  } 
}

@keyframes spin {
  to {
      transform: rotate(1turn);
  } 
}
.st0{display:none;}
.st1{display:inline;}
.st2{opacity:0.29;}
.st3{fill:#FFFFFF;}
.st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_4_);}
.st6{clip-path:url(#SVGID_6_);}
.st7{clip-path:url(#SVGID_8_);}
.st8{clip-path:url(#SVGID_10_);}
.st9{fill:none;}
.st10{clip-path:url(#SVGID_12_);}
.st11{opacity:0.7;}
.st12{clip-path:url(#SVGID_14_);}
.st13{opacity:0.2;}
.st14{clip-path:url(#SVGID_16_);}
.st15{opacity:0.3;fill:#FFFFFF;enable-background:new;}


*, *::after, *::before {
    box-sizing: border-box;
    /* font-family: verdana; */
    /* font-size: 2.25rem; */
    /* font-weight: 700px; */
  }
  
  body {
    background-color: rgba(110, 63, 176, 0.25) !important;
    color: rgb(0,0,0);
    font-family: 'Open Sans', sans-serif;
    font-weight: 500 !important;

  }
  
  /* ul i{
    color : rgb(0, 0, 0) !important;
    transition: all 0.2s ease-in-out;

  } */

  a{
    color: rgb(255, 255, 255) !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
  }

  /* ul i:hover{
    color : rgb(0,0,0) !important;
  } */

    a:hover{
        color: rgb(0,0,0) !important;
    }
    
  .flip-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    /* box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2); */
    border-radius: .1em;
  }
  
  .top,
  .bottom,
  .flip-card .top-flip,
  .flip-card .bottom-flip {
    height: .75em;
    line-height: 1;
    padding: .25em;
    overflow: hidden;
    font-weight: 100px;
    font-size: 5.25rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-family: 'Open Sans', sans-serif;

  }
  
/* media query 500 px */

@media screen and (max-width: 500px) {
    .top,
    .bottom,
    .flip-card .top-flip,
    .flip-card .bottom-flip {
        font-size: 4.25rem;
    }
}

  .top,
  .flip-card .top-flip {
    /* background-color: #f7f7f7; */
    background-color: hsla(0, 0%, 97%, 0.50);
    backdrop-filter: blur(50px);
    border-top-right-radius: .1em;
    border-top-left-radius: .1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .bottom,
  .flip-card .bottom-flip {
    display: flex;
    align-items: flex-end;
    border-bottom-right-radius: .1em;
    border-bottom-left-radius: .1em;
    background-color: hsla(0, 0%, 97%, 0.50);
    backdrop-filter: blur(50px);
  }
  
  .flip-card .top-flip {
    position: absolute;
    width: 100%;
    animation: flip-top 250ms ease-in;
    transform-origin: bottom;
  }
  
  @keyframes flip-top {
    100% {
      transform: rotateX(90deg);
    }
  }
  
  .flip-card .bottom-flip {
    position: absolute;
    bottom: 0;
    width: 100%;
    animation: flip-bottom 250ms ease-out 250ms;
    transform-origin: top;
    transform: rotateX(90deg);
  }
  
  @keyframes flip-bottom {
    100% {
      transform: rotateX(0deg);
    }
  }
  
  .flex-counter-container{
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
  }


  
  .counter-container {
    display: flex;
    gap: 0.75em;
    justify-content: center;
    align-items: center;
    /* background: #4e54c8;   */
    border-radius: 5px;
    padding: 25px 30px;
    /* width: 900px; */
    /* height: 300px; */
    flex-wrap: wrap;
    /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); */
    font-weight: 2rem;
    /* filter : drop-shadow(0 0 0.75rem #000); */
  }
  
  .counter-container-segment {
    display: flex;
    flex-direction: column;
    gap: .1em;
    align-items: center;
  }
  
  .segment {
    display: flex;
    gap: .1em;
  }
  
  .segment-title {
    font-size: 1rem;
  }
  
  .next-text-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 1em;
    /* height: 100%; */
    
  }
  .text-next{
    font-size: 4rem;
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.15),
    1px 2px 1px rgba(0,0,0,0.15),
    1px 3px 1px rgba(0,0,0,0.15),
    1px 4px 1px rgba(0,0,0,0.15),
    1px 5px 1px rgba(0,0,0,0.15),
    1px 6px 1px rgba(0,0,0,0.15),
    1px 7px 1px rgba(0,0,0,0.15),
    1px 8px 1px rgba(0,0,0,0.15),  
    1px 9px 1px rgba(0,0,0,0.15),
    1px 10px 1px rgba(0,0,0,0.15);
    font-family: 'Open Sans', sans-serif; */
    font-weight: 500;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50));



  }

  .text-next:nth-child(2) {
    font-family: 'WorldCup2026';
    /* text-shadow: 
    1px 1px 1px rgba(0, 133, 199, 0.15),   
    2px 2px 1px rgba(255, 215, 0, 0.15),    
    3px 3px 1px rgba(255, 255, 255, 0.15),  
    4px 4px 1px rgba(0, 166, 81, 0.15),     
    5px 5px 1px rgba(238, 51, 78, 0.15),    
    6px 6px 1px rgba(0, 133, 199, 0.10),    
    7px 7px 1px rgba(255, 215, 0, 0.10),    
    8px 8px 1px rgba(255, 255, 255, 0.10),  
    9px 9px 1px rgba(0, 166, 81, 0.10),     
    10px 10px 1px rgba(238, 51, 78, 0.10);   */
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50));

}

.text-next:nth-child(1) {
    font-family: 'WorldCup2026';
    /* text-shadow: 
    1px 1px 1px rgba(0, 133, 199, 0.15),   
    2px 2px 1px rgba(255, 215, 0, 0.15),    
    3px 3px 1px rgba(255, 255, 255, 0.15),  
    4px 4px 1px rgba(0, 166, 81, 0.15),     
    5px 5px 1px rgba(238, 51, 78, 0.15),    
    6px 6px 1px rgba(0, 133, 199, 0.10),    
    7px 7px 1px rgba(255, 215, 0, 0.10),    
    8px 8px 1px rgba(255, 255, 255, 0.10),  
    9px 9px 1px rgba(0, 166, 81, 0.10),     
    10px 10px 1px rgba(238, 51, 78, 0.10);   */
}



  @media screen and (max-width: 800px) {
    .flex-counter-container{
    transform: translate(-50%, -35%);
    }

    .text-next{
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 376px) {
  .flex-counter-container{
  transform: translate(-50%, -20%);
  }

  .text-next{
      font-size: 2.5rem;
  }
}

@media screen and (max-height: 400px) {
    .flex-counter-container{
    transform: translate(-50%, -15%);
    }
}



.start_btn{
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-top: 2rem;
            }

/* .start_btn button{
  font-size: 55px;
  font-weight: 500;
  color: #007bff;
  padding: 15px 30px; 
  outline: none;
  border: none;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  z-index: 5;
} */

.start_btn{
  display: none;
}



/* CSS */
.button-82-pushable {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-82-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button-82-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  /* background:       ; */
}

.button-82-front {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background:   #000000;
  will-change: transform;
  transform: translateY(-4px);
  transition:
    transform
    600ms
    cubic-bezier(.3, .7, .4, 1);
    font-family: 'WorldCup2026';

}

@media (min-width: 768px) {
  .button-82-front {
    font-size: 2rem;
    padding: 12px 42px;
  }
}

.button-82-pushable:hover {
  filter: brightness(110%);
  -webkit-filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition:
    transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}


.logo-acc{
  width: 100%;
  height: 100%;
  
}

.logo-acc img{
  max-width: 100px;
  max-height: 100px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  filter : drop-shadow(0 0 0.75rem #000);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.15),
  1px 2px 1px rgba(0,0,0,0.15),
  1px 3px 1px rgba(0,0,0,0.15),
  1px 4px 1px rgba(0,0,0,0.15),
  1px 5px 1px rgba(0,0,0,0.15),
  1px 6px 1px rgba(0,0,0,0.15),
  1px 7px 1px rgba(0,0,0,0.15),
  1px 8px 1px rgba(0,0,0,0.15),
  1px 9px 1px rgba(0,0,0,0.15),
  1px 10px 1px rgba(0,0,0,0.15),
1px 18px 6px rgba(255, 255, 255, 0.4),
1px 22px 10px rgba(255, 255, 255, 0.4),
1px 25px 35px rgba(255, 255, 255, 0.4),
1px 30px 60px rgba(255, 255, 255, 0.4);
  opacity: 0.5;
}


.logo-mega{
  width: 100%;
  height: 100%;
  
}

.logo-mega img{
  max-width: 100px;
  max-height: 100px;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  object-fit: contain;
  padding: 1rem;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  filter : drop-shadow(0 0 0.75rem #000);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.15),
  1px 2px 1px rgba(0,0,0,0.15),
  1px 3px 1px rgba(0,0,0,0.15),
  1px 4px 1px rgba(0,0,0,0.15),
  1px 5px 1px rgba(0,0,0,0.15),
  1px 6px 1px rgba(0,0,0,0.15),
  1px 7px 1px rgba(0,0,0,0.15),
  1px 8px 1px rgba(0,0,0,0.15),
  1px 9px 1px rgba(0,0,0,0.15),
  1px 10px 1px rgba(0,0,0,0.15),
1px 18px 6px rgba(255, 255, 255, 0.4),
1px 22px 10px rgba(255, 255, 255, 0.4),
1px 25px 35px rgba(255, 255, 255, 0.4),
1px 30px 60px rgba(255, 255, 255, 0.4);
  opacity: 0.5;
}

/* media max width 800px */

@media (max-width: 767px) {
  .logo-mega img{
    max-width: 75px;
    max-height: 75px;;
    top: 0;
    right: 0;
  }

  .logo-acc img{
    max-width: 75px;
    max-height: 75px;
    top: 0;
    left: 0;
  }
}