@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500&family=Tangerine&display=swap');

@font-face {
    font-family: 'Black-ops';
    src: url('../fonts/BlackOpsOne-Regular.ttf');
  }
  @font-face{
    font-family: 'Krona One';
    src: url('../fonts/KronaOne-Regular.ttf');
  }
  @font-face{
    font-family: 'Khand';
    src: url('../fonts/Khand-Regular.ttf');
  }

html {
    scroll-behavior: smooth;
}

*
{
    margin: o;
    padding: 0;
    font-family: 'Poppins',sans-serif;
    box-sizing: border-box;
    transition: 0.6s ease-in-out;
    align-items: center;
    transition-delay: 0.1s;
    /* overflow-y: hidden; */

}

a{
    
    text-decoration: none;
    background: rgba(0, 20, 85, 0.416);
    border-radius: 30px;
    border: 2px solid white;
    font-family: 'Krona One', sans-serif;
    color: white;
    text-align: center;
    border-radius: 30px;
    padding: 5px 23px;
    transition: 0.3s ease-in-out;
  }
  a:hover{
    background: black;
    text-decoration: none;

  }

/* --------------------------------------------
        PAGE LOADER
-------------------------------------------- */
.loader{
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: space-evenly;
    background: rgb(0, 0, 0);
    animation: 1.3s ld-back 1;
    animation-delay: 0s;
    opacity: 0;
    z-index: 2;
  }
  @keyframes ld-back{
    0%{z-index: 20;opacity: 1;}
    50%{z-index: 20;opacity: 1;}
    90%{z-index: 20;opacity: 1;}
    100%{z-index: 20;opacity: 0.5;}
  }
  .loader div{
    position: absolute;
    top: 30%;
    width: 30vh;
    height: 30vh;
    transition: 0.0001s;
    animation: 2s load 1;
    animation-delay: 0s;
    opacity: 0;
    border-radius: 50%;
    
  }
  @keyframes load{
    0%{ 
      z-index: 20; 
      opacity: 1;
      border-top: 5px solid rgb(0, 92, 167);
    }
    30%{
      z-index: 20; 
      opacity: 1;
      border-right: 5px solid rgb(192, 0, 160);
    }
    60%{
      z-index: 20; 
      opacity: 1;
      border-bottom: 5px solid rgb(231, 9, 83);
    }
    80%{
      z-index: 20;
      opacity: 1;
      border-left: 5px solid rgba(255, 251, 0, 0.767);
    }
    100%{
      z-index: 20;
      opacity: 1;
      border: none;transform: rotate(360deg)
    }
    
  }


body
{
    position: relative;
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(/images/web.jpg);
    background-repeat: no-repeat;
    transition: all 0.1s ease-in-out;
    background-size: cover;
}

body::-webkit-scrollbar {
    width: 6px;
    background-color: rgb(19, 24, 44);
  }
  body::-webkit-scrollbar-thumb {
    background-color: rgb(231, 9, 83);
    box-shadow: -10px 0 20px white;
    border-radius: 30px;
  }
/* .container .imgBx
{
   
} */

.container .imgBx {
  z-index: 6;
  position: absolute;
  margin-top: 35%;
  left: 50%;
  transform: translate(-50%);
 
}
.container  .countdownBx
{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    /* display: flex; */
    margin-top: -5%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - 450px);
}
.countdownBx .h2-edit-plain{
  text-transform: lowercase !important;
  margin-top: 70%;
}
.container  .countdownBx h2
{
    text-align: center;
    margin-top: 50%;
    font-size: .8em;
    color: #C5B358;
    font-family: 'Shippori Mincho B1', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;

}
.container  .countdownBx .countdown
{
    margin-top: 30px;
    left: 50%;
    height: 120px;
    display: flex;
    /* z-index: 5; */
    justify-content: center;
    align-items: center;
}
/* .container  .countdownBx .countdown div
{
    position: relative;
    width: 100px;
    text-align: center;
    color: #C5B358;
    font-size: 1.0em;
    margin-top: -25px;
    font-weight: 500;
    margin: 0 10px;
}
.container  .countdownBx .countdown div::before
{
    content: 'text';
    font-family: 'Shippori Mincho B1', serif;
    font-family: 'Tangerine', cursive;
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 100%;
    height: 35px;
    color: #F0E68C;
    font-size: 0.7em;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.container  .countdownBx .countdown div#day::before
{
    content: 'Days';
}
.container  .countdownBx .countdown div#hour::before
{
    content: 'Hours';
}
.container  .countdownBx .countdown div#minute::before
{
    content: 'Minutes';
}
.container  .countdownBx .countdown div#second::before
{
    content: 'Seconds';
}
.container  .countdownBx .countdown div#second,
.container  .countdownBx .countdown div#second::before
{
    color: #ff0;
} */
@media (max-width:991px)
{
    .container .countdownBx
    {
       
        margin-top: 50%;
        width: 100%;
    }
    .container  .countdownBx .countdown div{
        width: 100%;
        font-size: 0.8em;
        align-items: center;
        justify-content: center;
        margin-left: 0%;
        margin-left: -22px;
    }
   
    
}
@media (max-width:600px)
{
    .container .countdownBx h2
    {
        text-align: center;
        font-size: 1.0em;
        align-items: center;
        justify-content: center;
    }
   
    .container .imgBx {
     text-align: center;
     width: 100%;
        font-size: 12px;
       left: 50%;
       transform: translate(-50%);
       margin-top: 70vh;
        

    }
    
  
   
    
}

/* The Modal (background) */
/* .modal { */
  /* display: none;  */
  /* position: fixed; 
  z-index: 10;
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
} */

/* Modal Content */
/* .modal-content {
  background-color: red;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
} */

/* The Close Button */
/* .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
} */