@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&display=swap');
:root { 

  --bg-1: #434f53; 
  --bg-2: #4e799c;
  --bg-3: rgba(5,35,63,0.9);

  --overlet-color:rgba(0, 0, 0, 0.3);
    


  --color-bg-1:rgb(218,57,43);  
  --color-bg-2:#8a8acc;
  --white: #fff;
  --black: #212121;
  --white-section:#ffffff;
  --accent-color:rgb(255, 193, 26);

  --hover-tranzitipn: all .4s cubic-bezier(.3,1,.35,1) 0s;  
}

body{
  
    direction: ltr;
    font-family: 'Alegreya', sans-serif !important;
    font-size: 16px;
    margin: 0;
    padding: 0px;
    color: var(--white);
    background-color: var(--bg-2);
    
}
h1,
h2,
h3,
h4,
h5,
p{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--hover-tranzitipn);
}
a:hover,a:focus{
    color: var(--accent-color);
}
img{
    display: block;
    max-width: 100%;
    max-height: 100%;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-map{
    margin-top: 46px;
    width: 100%;
    height:431px;
    display: flex;   
    align-items: center;
    justify-content: center;
}
.contact-map iframe{
    height: 100%;
    width: 100%;  

}

.section{
    padding: 72px 0;
}

.blok-text-page p{
  margin-bottom: 10px;
  text-indent: 3ch;
}
.blok-text-page h1{
    font-weight: 700;
    text-align: center;
    margin-bottom:  21px;
}
.blok-text-page h2{
    font-weight: 700;
    text-align: center;
    margin-bottom:19px ;
}
.blok-text-page table,.blok-text-page a{
    word-break: break-word;
    color: inherit;
}
.blok-text-page ul {
    margin: 0 25px;
    list-style: square;
}
.grup-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.contact-form-check{
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  color: var(--color-tex);
}
.pos{
    position: relative;
}
.moto-hed-bag{
    position: absolute;
    background: transparent;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.hero{
    display: flex;
    align-items: center;
    text-align: center;
    min-height: 50vh;
}
.main-hero{
    padding: 150px 0 26px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: top;
    background-image: url(galleryarchive/background/bg-light-068499ca19eee4.jpg); 
}
.main-hero::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:rgba(0, 0, 0, 0.58);      
}
.hed-top{
    display: flex;
    align-items: center;
    padding-top: 19px;
    flex-direction: row;
    justify-content: space-between;
}

.top-small-line{
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 19px;
    padding-right: 19px;
    display: flex;
    justify-content: center;
    width: 50%;
}
.hed-top-line{
    max-width: 100%;
    width: 100%;
    box-sizing: content-box;
    height: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #ffffff;
    margin: 0;
    display: inline-block;
}
.hed-nav{
    padding: 20px 0;
}
.name-hed{
    position: relative;
    padding: 0 14px;
    font-size: 40px;
    color: var(--white);
}
.name-hed::before,.name-hed::after{
    position: absolute;
    content: "";
    width: 14px;
    height: 2px;
    background: var(--white);
    top: 50%;
  

}
.name-hed::before{
    left: 0;
}
.name-hed::after{
    right: 0;
}
.nav-link{
    color: var(--white);
    font-weight: 700;
     
}

.hedar-bottom-wrapper{
    display: flex;
    flex-direction: column;
    gap: 33px;
    align-items: center;
}
.hedar-bottom-wrapper h1{
font-size: 54px;
font-weight: 800;
color: rgba(255,255,255,0.2);
background: url(directory/img/white-cloud.jpg) repeat;
-webkit-background-clip: text;
background-size: contain;
animation: fire 25s linear infinite;
}

@keyframes fire {
    0% {
        background-position: left 0 top 25px;
    }

    50% {
        background-position: left 130px top -35px;
    }

    100% {
        background-position: left 260px top 0;
    }
}


.navbar-toggler{
    width: 40px;
    height: 40px;
    padding: 0 8px;    
    background-color: #191d26;
}
.navbar-toggler svg{
    fill:  var(--accent-color);
}
.top-game-wrapper{
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
}
.top-game-blok{
    flex-grow: 1;
    flex-basis: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-game-item,.games-link{
    position: relative;
    width: 230px;
    height: 250px;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: rgba(218, 57, 43, 0.1) 7px 7px 10px;
    transition: opacity 0.3s ease 0s;
    opacity: 1;
    display: block;
}
.top-game-item::before{
    content: " ";
    position: absolute;
    top: 0;
    transition: var(--hover-tranzitipn);
    filter: opacity(1);
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;   
    background: linear-gradient(180deg,rgba(218,57,43,0),rgba(218,57,43,0.8));
}
.top-game-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
   transition: var(--hover-tranzitipn);
}
.iner-gemes{
    text-align: center;
    padding: 14px 19px;
    border-radius: 21px;
    opacity: 0;
    transition: var(--hover-tranzitipn);
    background: var(--accent-color);
    color: var(--black);
}
.iner-gemes1{
   background: rgb(255 53 26);
}
.iner-gemes2{
 background: rgb(39 26 255);
}
.top-game-item:hover:before{
    background: linear-gradient(180deg,rgba(218,57,43,0),rgb(81 80 80 / 80%));
}
.top-game-item:hover .games-title{
    opacity: 0;
}
.top-game-item:hover .iner-gemes{
    opacity: 0.85;
}
.games-title{
    transition: opacity .4s ease;
    opacity: 1;
}
.top-game{
    position: relative;
    top: -70px;
    display: none;
}
.top-game-title{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 23px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    transition: var(--hover-tranzitipn);
}
.top-game-bg{
    background-color: rgb(252, 255, 114);
}
.games-link{
    align-items: center;
    text-align: center;
    gap: 14px;
    flex-direction: column;
    color: var(--black);
    justify-content: center;
}
.section-page{
    padding: 72px 0 ;
}
.section-smol{
    padding: 47px 0;
   
}
.section-page-bottom{
    padding: 35px 0 23px;
}
.section-col-bg{
    padding: 47px 0;
    background: #ffc11ac4;
}
.contact-row{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.contact-col{
    flex-grow: 1;
    flex-basis: 200px;
}
.contact-col:hover .cont-item-icon{
 background-color: var(--color-bg-1);
 border: 1px solid var(--white);
}
.cont-item{
    display: flex;
    gap: 14px;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.cont-item-content a{
    transition: var(--hover-tranzitipn);
}
.cont-item-content a:hover,.cont-item-content a:focus{
    color: var(--color-bg-1);
}
.cont-item-content{
    font-size: 16px;
}
.cont-item-content h3{
    font-size: 20px;
    font-weight: 800;
}
.cont-item-icon{
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    transition: var(--hover-tranzitipn);
}
.cont-item-icon i{
    font-size: 40px;
    color: var(--black);
}
.subscribe-form{
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 19px;
    border-radius: 8px;
    box-shadow: rgba(229, 223, 143, 0.4) 0px 7px 29px 0px;
    background: linear-gradient(0deg, rgba(155,160,190,0.9243346997001926) 29%, rgba(26,105,133,1) 79%);
    animation: moveBorder 3s linear infinite;
}
.form-input,.form-textarea,.input-controlholder--block,.textarea-controlholder--block{
    width: 100%;
    outline: none;
    padding: 11px 16px;
    color: var(--white);
    height: 45px;
    background-color: transparent;
    font-style: normal;
    border-radius: 8px;
    font-weight: 200;
   border: 1px solid var(--white);
}
.form-input::placeholder,.form-textarea::placeholder,.input-controlholder--block::placeholder,.textarea-controlholder--block::placeholder{
    color: var(--white);
}
.form-textarea,.textarea-controlholder--block{
    height: 140px;
}
.form-img{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.form-img img{
    width: 100%;
    max-height: 426px;
    height: 100%;
    object-fit: contain;
}
.top-title{
    font-size: 18px;
}
.section-about-bg{
    position: relative;
    background-image: url(galleryarchive/background/bg-dark-068499ca19efbc.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-page-top{
    background-image: url(galleryarchive/background/bg-dark-168499ca19f01e.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section-about-bg::before{
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.58);
}
.title-section{
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: flex-start;
   width: 100%;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 40px;
    
}

.about-img img{
    width: 100%;
    height: 100%;
    max-height: 426px;
    object-fit: contain;
}
.pege-nav{
    display: flex;
    gap: 8px;
    justify-content: end;
}
.pege-nav-item{
    font-size: 12px;

}
.games-main-links img{
    width: 100%;
    height: 431px;
    object-fit: cover;
    transition: var(--hover-tranzitipn);
}
.games-main-links{
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: var(--hover-tranzitipn);
    height: 100%;
    border-radius: 10px;
}

.games-main-links::before{
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
    left: 0%;
    top: 0;
    background-color: #7257572e;
}
.games-main-links:hover img{
    -webkit-transform: scale3d(1.05,1.05,1);
    transform: scale3d(1.05,1.05,1);
}
.games-main-links:hover{
     box-shadow: 0 0 60px rgba(97, 51, 40, 0.9);
}
.game-main-title{
    position: absolute;
    background: var(--white);
    bottom: 20px;
    left: 10%;
    opacity: 1;
    right: auto;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--black);
   
}
.page-section-title{
    font-weight: 700;   
    color: #ffffff;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 50px;
}
.faq-wrapper{
    border-radius: 4px;
    border: 1px solid var(--white);
}
.accordion{
    padding: 50px;
}
.accordion-button{
    border: none;
    border-radius: 0;
    font-weight: 700;
    color: var(--white);
    background-color: inherit; 
   
    
}
.accordion-button:not(.collapsed)::after {
   content: "-";
    transform: none;
    background-image: none;
    color: var(--accent-color);
    font-size: 18px;
}
.accordion-button::after{
    content: "+";
    background-image: none;
    color: var(--accent-color);
    font-size: 18px;
}
.accordion-button:not(.collapsed){
    box-shadow:none;
}
.accordion-button:focus {
    border: none;
    border-radius: 0;
    box-shadow:none;
}
.accordion-item {
    border: none;    
    background-color: transparent;  
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid rgba(216, 216, 216, 0.2);
    background: linear-gradient(0deg, rgba(155,160,190,0.9243346997001926) 29%, rgba(26,105,133,1) 79%);
   
}
.accordion-item:last-of-type .accordion-collapse,.accordion-item:last-of-type .accordion-collapse,.accordion-item:last-of-type,.accordion-item:first-of-type {
    border-radius: 8px;
   
}
.accordion-collapse{
    border: none;
}
.accordion-button:not(.collapsed){
    background-color: transparent;
    color: var(--white);
    font-weight: 700;
}
.accordion-body{
    color: var(--black);
}
.coment-wrapper{  
    border-radius: 10px;   
}
.coment-box{
 padding: 50px;
}
.coment-item{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--white);
    padding: 23px;
}



.pages-game-item-box{
    display: flex;
    justify-content: space-between;
    padding: 0;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: var(--white-section);
    border-radius:  10px;
    -webkit-box-shadow:  -5px -5px 5px -5px rgba(255, 193, 26, 0.6) inset;
    -moz-box-shadow:  -5px -5px 5px -5px rgba(255, 193, 26, 0.6) inset;
    box-shadow:  -5px -5px 5px -5px rgba(255, 193, 26, 0.6) inset;
   
}
.pages-game-item-box-img{
    width: 40%;
    position: relative;
    overflow: hidden;   
    height: 100%;
}

.pages-game-item-box-img img{
    width: 100%;
    height: 100%;   
    object-fit: cover;   
    transition: filter 0.4s ease
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgba(218,57,43,0),rgb(81 80 80 / 80%));
    opacity: 1;
    border-radius:0;
    
    transition: opacity 0.4s ease,border-radius 0.4s ease; 
}

.pages-game-item-box-img:hover img {
    filter: brightness(100%); 
}

.pages-game-item-box-img:hover .overlay {
    opacity: 0; 
    border-radius: 50%;
}
.pages-game-item-box-content{
    padding: 26px 20px;
    width: 60%;
    color: var(--bg-1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}
.step-bg{
    background-repeat: no-repeat;    
    background-position: center center;
    background-size: cover;
    overflow: hidden;    
    background-image: url(galleryarchive/background/opacity_bg-068499ca19f1d3.png );
}
.pages-game-item-box-title{
    font-weight: 800;
    font-size: 25px;
}
.rating-item{
    display: flex;
    align-items: center;
    gap: 8px;
}
.rating-item svg{
 fill: var(--accent-color);
}
.cart-btn{
    width: 100%;
}
.revers{
    flex-direction: row;
}
.page-content p{
    margin-bottom: 10px;
    text-indent: 3ch;
}
.page-content ul,ol{
    list-style: inside;
}
.igra-direction{
    display: flex;
    flex-direction: column-reverse;
}
.page-img{
    max-height: 322px;
    object-fit: cover;
    border-radius: 10px;
    float: left;
    width: 37%;
    margin: 19px;
    margin-top: 0;
    margin-left: 0;
    
}
.playing{
    margin-bottom: 50px;
    padding-top: 50px;
    height:550px;	
    width: 100%;
}
.playing iframe{
    height: 100%;
    width: 100%;
}
.comment-wrapper{
margin:26px 0;
gap: 20px;

}
.comment-item{
background: rgb(15 28 46 / 86%);               
display: flex;
border-radius: 8px;
gap: 14px;
flex-direction:  column;
padding: 23px;
height: 100%;



}
.leftcol{
    flex: 1;
    display: flex;
    gap: 19px;
    flex-wrap: wrap;
    flex-direction: row;
    opacity: 0.95;
    align-items: start;
}
.rightcol{
    float: left;
    flex: 2;
    position: relative;

}
.avatar{
    
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.avatar img{
    width: 50px;
    height: 50px;
    padding: 1px;
    border-radius:  50%;
    background: linear-gradient( to bottom, #515151 5%, #474747 95%);
}
.section-tow{   
    padding: 26px 0;
}
.avatar__name h5{
    color: #c1dbf4;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    flex-wrap: wrap;
}
.review_box {
    margin: 8px 0 13px;
    display: flex;
    gap: 20px;
    align-items: center;
    background: rgba( 0, 0, 0, 0.2 );

}
.review_box h3{
font-size: 16px;
color: #d6d7d8;
padding: 3px 0px 0px 0px;
line-height: 19px;
}
.thumb{
height: 40px;
width: 40px;
background: #1a2431;
display: flex;
align-items: center;
justify-content: center;
}
.thumb i{
    color: var(--accent-color); 
    font-size: 27px;   
}
.bi-hand-thumbs-up::before{
transform: rotateY(180deg);
}
.rightcol_coment{
font-size: 12px;
color: #acb2b8;
overflow-wrap: break-word;
line-height: 17px;
}
.soft-testimotional-icon{
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: 800;
color: #257A3E;
padding-top: 5px;
}

.footer{
    padding-top: 50px;
    background: rgb(15 28 46 / 86%); 
}
.footer-bottom{
    padding-top: 26px;
    padding-bottom: 20px;  
    display: flex;
    gap: 20px;
    justify-content: space-between;
    border-top: 1px solid #ffffff42;
    flex-direction: row;
   
}
.footer-iner{
    padding: 23px;
}
.copyright{
    display: flex;
    align-items: center;
    justify-content: center;  
    gap: 14px;
    flex-wrap: wrap;
    color: var(--white);
    font-size: 15px;
}
.disclaime-img{
    display: flex;
    align-items: center;
    justify-content: center;
}
.disclaime-img img{
    width: 100%;
    height: 50px;
    object-fit: contain;
}
.footer-nav{
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}
.video-box{
    position: relative;
    width: 100%;
    height: 570px;
}
.section-video{
    position: relative;     
    padding: 63px 0;    
    background: url('galleryarchive/background/bg-dark-268499ca19f07d.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}
.section-video::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0.58);   

}
.video-text{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
}
.button-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    transition: var(--hover-tranzitipn);
    background-color: var(--white);
    border-radius: 50%;
    color: var(--black);
    cursor: pointer;
}
.button-play > svg{
    width: 50px;
    height: 50px;
}
.button-play:hover,.button-play:focus,.button-play:active{
    background-color: var(--accent-color);
}
.button-video-close{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
}
.video-container{
    width: 100%;
    box-shadow: rgba(229, 223, 143, 0.4) 0px 7px 29px 0px;
    display: none;
    position: relative;
}
.video-player{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.video-box .title-section{
    justify-content: center;
}
.disclaimer-wrapper{
    width: 75%;
    margin: 0 auto;
    text-align: center;
    padding: 23px;
    border-radius: 8px;
    box-shadow: rgba(229, 223, 143, 0.4) 0px 7px 29px 0px;
    background: linear-gradient(0deg, rgba(155,160,190,0.9243346997001926) 29%, rgba(26,105,133,1) 79%);
    animation:  moveBorder 3s linear infinite;
}
@keyframes moveBorder {
  0% {
    border: 5px solid #3498db;
  }
  25% {
    border: 5px solid var( --color-bg-1);
  }
  50% {
    border: 5px solid #2ecc71;
  }
  75% {
    border: 5px solid var(--accent-color);
  }
  100% {
    border: 5px solid #3498db;
  }
}
@media (max-width: 575px){
    .name-hed{
        font-size: 25px;
    }
    .hedar-bottom-wrapper h1{
        font-size: 26px;
    }
    .title-section{
        font-size: 25px;
    }
    .accordion-body,.accordion-button{
        
        padding-left: 5px;
        padding-right: 5px;
    }

    .disclaimer-wrapper{
        padding: 20px 5px; 
    }
    .pages-game-item-box-content{
        padding: 30px 10px;
        font-size: 16px;
    }
    .pages-game-item-box {
        border-radius: 25px;
    }
    .footer-bottom{
        flex-direction:  column-reverse;
    }
     .form-col{
        padding: 0;
     }
     .video-box{
        height: 431px;
     }
}
@media (min-width: 768px){ 
    .game-main{
    flex-direction:  row;
   }
}
@media (max-width: 768px){
    .accordion{
        padding: 19px;
    }
    .accordion-button{
        font-size: 15px;
       
    }
    .accordion-body{
       font-size: 15px;
    }
    .pages-game-item-box,.revers{
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .pages-game-item-box-img,.pages-game-item-box-content{
        width: 100%;

    }
    .page-img{
    float: none;
    width:100%;
    margin: 0 0 20px 0;  
   }
   .comment-item{
    flex-direction: column-reverse;
    }
    .leftcol{
    align-items: center;
  }
}
@media (min-width: 575px) and (max-width: 768.98px){  
    .hedar-bottom-wrapper h1{
        font-size: 42px;
    }
    .cart{
        padding: 0;
    }
    
}
@media (min-width: 768px) and (max-width: 991.98px){  
  
}
@media (max-width: 992px){ 
    .hed-top{
        align-items: inherit;
        flex-direction: column-reverse;
        
    }
    .top-small-line{
        width: 100%;
    }
    .hed-top-item:last-child{
        text-align: end;
    }
    .hed-top-item:first-child{
        text-align: start;
    }
    .navbar-nav{       
        border: 1px solid #28313f; 
        margin-top: 10px;
    }
    .nav-item{
        background-color: #191d26;
        border-bottom: 1px solid #191d26;
    }
   .navbar-nav  .nav-link{
    color: #ffc11a;    
    background-color: #191d26;
    padding: 10px 47px 10px 20px;
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    }
    .nav-link:hover,.nav-link:focus,.nav-link:active{
        color: var(--white);
    }
    .navbar{
        flex-direction: column;
        gap: 14px;
        
    }
    .navbar-collapse{
    width: 100%;
    }
    .name-hed{
        text-align: center;
    }
    .section-page{
        padding: 93px 0;
    }
    .top-game{
        top: 0;
        padding-top: 26px;
        padding-bottom: 26px;
    }
    .disclaimer-wrapper{
        width: 100%;
    }
    .about-img img{
        max-height: 431px;
    } 
    
}
@media (min-width: 992px){ 
   .navbar-nav{
    width: 100%;
   }
   .navbar-expand-lg .navbar-nav{
    justify-content: end;
   }
   .nav-link:hover{
    color: var(--accent-color);
   }
   .hedar-bottom-wrapper h1{
    font-size: 90px;
   }
   .about{
    flex-direction: row;
   }

}    
@media (max-width: 1024px){
}
@media (min-width: 1200px){   
 .title-section{
    font-size: 54px;
 }
}
.btn-1 {
 
    padding: 14px 18px;
    display: block;
    width: fit-content; 
    text-align: center;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 800;
    color: white;
    transition: .4s cubic-bezier(.22,.61,.36,1);
    -webkit-box-shadow: 0 3px 3px 0 rgba(1,1,1,.55);
    box-shadow: 0 3px 3px 0 rgba(1,1,1,.55);
    background-color: #ff0e1f;
  }
  
  .btn-1:hover,.btn-1:focus {
    -webkit-filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    color: white;
  }
  
  
  
  
  
  .btn-2 {
    padding: 15px 23px;
    display: block;
    width: fit-content;
    text-align: center;
    font-size: 16px;
    border: none;
    outline: none;
    color: rgb(255, 193, 26);
    background: #151965f0;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 25px;
  }
  
  .btn-2:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 25s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
   border-radius: 25px;
  }
  
  .btn-2:hover {
  color: #fff;
  }
  
  .btn-2:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #151965f0;
    left: 0;
    top: 0;
    border-radius: 25px;
  }
  
  @keyframes glowing {
    0% {
      background-position: 0 0;
    }
  
    50% {
      background-position: 400% 0;
    }
  
    100% {
      background-position: 0 0;
    }
  }
  
  
  
    
  .btn-3 {
   
    padding: 21px 21px;
    width: fit-content;
    text-align: center;  
    font-size: 16px;
    background-color: #010114;
    border-color: #0000;
    color: #fff;
    font-weight: 800;
    border-radius: 8px;
    box-shadow: inset 0 3px 0 0 #00fcff, inset 20px 0 50px #08eee14d, inset 20px 0 300px #00c8bb0d, inset 0 20px 50px #08eee14d, inset 0 0 10px #affffa, 4px 4px 4px 0 #0a0a0a80;
   border: none;
   cursor: pointer;
    transition: all .3s;
    outline: none;
   
  }
  
  
  
  .btn-3:hover {
    border-color: #0000;
    color: rgb(255, 193, 26);
  }
  
  .btn-4 {
    text-align: center;
    display: block;
    padding: 15px 26px;
    width: fit-content;
    color: #fff;
    text-transform: uppercase;
    background-color: #111;
    border: 1px solid #efdede;
   -webkit-transition: all .4s cubic-bezier(.3,1,.35,1) 0s;
    transition:all .4s cubic-bezier(.3,1,.35,1) 0s;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0px 0px 3px 2px #f9aa01;
    
    
  }
  
  .btn-4:hover,
  .btn-4:focus {
    background-color: rgb(255, 193, 26);
    border-color: rgb(255, 193, 26);
    color: #111;
  }
  
  
  .btn-5 {
    padding: 14px 18px;
    border: none;  
    display: block;
    font-style: italic;
    width: fit-content;
    background: #0e1721;
    text-align: center;
    border-radius: 21px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff; 
    transition:all .4s cubic-bezier(.3,1,.35,1) 0s;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline: 2px solid #fff;
    box-shadow: rgba(229, 223, 143, 0.4) 0px 7px 29px 0px;
  }
  
  .btn-5:hover {
    color: #fff;
    transform: scale(1.05);
    outline: 2px solid #fff;
    
  
  }
  
  .btn-5::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: rgb(255, 193, 26);
    transform: skewX(-45deg);
    z-index: -1;
    transition: width 500ms;
  }
  
  .btn-5:hover::before {
    width: 200%;
  }
  
  
  
