@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css?family=Raleway|Sacramento');

@import url('../webfonts/Basement-Medium.ttf');



.header .sub-menu-item1 a {
    --font-color: hsl(206, 80%, 50%);
    position: relative;
    display: block;
    padding: 4px 0;
    font-family: "Raleway", sans-serif;
    font-size: 36px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-text-stroke: 2px var(--font-color);
    color: transparent;
    background: linear-gradient(var(--font-color) 0 100%) left/0 no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    transition: 0.5s linear;
}

.header .sub-menu-item1 a:hover {
    background-size: 100%;
  }



  .text-effect{
    color: #fff6a9;
    font-family: 'Sacramento', cursive;
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    margin: 20px auto 0;
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    position: relative;
    animation: animate 2s ease-in-out infinite;
  }

  @keyframes animate{
    20%, 24%, 55%{
        color: #111;
        text-shadow: none;
    }
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%{
        color: #fff6a9;
        text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 100px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 479px){
    .text-effect{ font-size: 60px; }
}
@media only screen and (max-width: 359px){
    .text-effect{ font-size: 45px; }
}


.border-span-desn {
    display: inline-block;
    position: relative;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    margin: 20px 30px;
    /* background: rgba(0,0,0,0.09); */
}

.border-span-desn span{
    display: block;
    padding: 25px 80px;
  }
  .border-span-desn::before, .border-span-desn::after{
    content:"";
    width: 0;
    height: 2px;
    position: absolute;
    transition: all 0.2s linear;
    background: #fff;
  }
  
  .border-span-desn span::before, .border-span-desn span::after{
    content:"";
    width:2px;
    height:0;
    position: absolute;
    transition: all 0.2s linear;
    background: #fff;
  }

  .border-span-desn:hover{
/* background: black;
color: white; */
  }
  .border-span-desn:hover::before, .border-span-desn:hover::after{
    width: 100%;
  }
  .border-span-desn:hover span::before, .border-span-desn:hover span::after{
    height: 100%;
  }
  /*----- button 1 -----*/
  .border-span-desn::before, .border-span-desn::after{
    transition-delay: 0.2s;
  }
  .border-span-desn span::before, .border-span-desn span::after{
    transition-delay: 0s;
  }
  .border-span-desn::before{
    right: 0;
    top: 0;
  }
  .border-span-desn::after{
    left: 0;
    bottom: 0;
  }
  .border-span-desn span::before{
    left: 0;
    top: 0;
  }
  .border-span-desn span::after{
    right: 0;
    bottom: 0;
  }
  .border-span-desn:hover::before, .border-span-desn:hover::after{
    transition-delay: 0s;
  }
  .border-span-desn:hover span::before, .border-span-desn:hover span::after{
    transition-delay: 0.2s;
  }
  
  @font-face {
    font-family: myFirstFont;
    src: url(../webfonts/Basement-Medium.ttf);
 }
  /* .border-span-desn a{
    font-size: 50px;
    color: white;
    font-family: myFirstFont;
  }
   */