body{   
    height: 100vh;
    background-color: #1A1C1E;
}


.sidebar{
    position: fixed;
    background-color: #1A1C1E;
    padding: .4rem .8rem;
    z-index: 90;    
}

.sidebar img{
    transition : all 0.5s ease;
    cursor:pointer;
}

.sidebar nav div{
    align-items: center;
    width:39%;
    height:39px;
    position :relative;
    list-style-type: none;
    padding-bottom: 9px;
    margin-bottom: 48px;
}

.sidebar nav {
    margin-top: 90px;
}

.sidebar nav div a{
    position:relative;
    display:flex;
    text-decoration: none;
}

.sidebar div  img.image-hover{
    position: absolute;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity .2s;
}

.sidebar div  img.image-hover:hover{
    opacity: 1;
}

main{
    width: 95%;
}

section{
  width:100%;
}

.main-content{

}


.wrapper{
  display: flex;
  background-color: #1A1C1E;
}
    
.wrapper-inner{  
  margin: 0px auto;
  background-color: #1A1C1E; 
  display: flex;
  flex-direction: column;   
}

    /*fonts */
.epilogue-hero-title {
font-family: "Epilogue", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
font-size: 84px;
color: white;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease forwards;
padding-top: 90px;
}

.poppins-medium {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}

/*animations */

.hero { 
 display: flex;
 justify-content: space-between;
 height: 100vh;
 min-height: 736px;
 z-index: 1;
 overflow: hidden;
 }
      
.hero-content {
 max-width: 50%;
 position: absolute;
 z-index: 5;
 padding-left: 8%;
 }
      
 .hero-title {
 font-size: 3rem;
  }
      
 .hero-subtitle {
        font-size: 1.5rem;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.8s ease 0.2s forwards;
 }
      
 .cta-button {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease 0.4s forwards;
  }
      
 .hero-image{
 position: absolute;
 }

 .hero-image img {
  max-width: 100%;
  opacity: 0;
  transform: translateX(50px);
  animation: fadeInRight 1s ease 0.6s forwards;
     
   }

      .hero-image-football-player img {
        max-width: 100%;
        opacity: 0;
        transform: translateX(50px);
        animation: fadeInRight 1s ease 0.6s forwards;
        position: absolute;
        right: 0;
        z-index: 4;
        top: 117px;
        
      }

      .hero-image-chips-and-dice img {
        max-width: 100%;
        opacity: 0;
        transform: translateX(50px);
        animation: fadeInRight 1s ease 0.6s forwards;
        position: absolute;
        right: 24%;
        z-index: 3;
        top: 317px;
        
      }

      .hero-image-payment-options{
        display: flex;
        justify-content:center;
        width: 100%;
        background-color: #1A1C1E;;
        height:95px;
      
      }

      .hero-image-payment-options span{
        height:37px;
        width:138px;
        align-self: center;

      }



      .vip-club{
        display: flex;
        overflow :hidden;
        justify-content: space-between;
        padding-left: 100px;

      }

      .vip-club-images{
      max-height: 201px;

      }

      .vip-text-section{
        display:flex;
        flex-direction: column;
        max-width: 65%;

      }

      .text-section-1 , .text-section-2{
        display:flex;
        flex-direction: row;
        align-items: center;
        max-height: 149px;
        margin-top: 29px;

      }

      .circular-body-text{
        max-width: 33%;
      }

      .casino-images{
        display: flex;
        align-items: center;
      }

      .cards-text , .circular-text{
        display:flex;
        flex-direction: column;

      }

      .cards-header-text , .circular-header-text{
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #E2E2E6;

      }

      .cards-body-text , .circular-body-text{

        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #E2E2E6;
        opacity: 60%;
      }

      .play-in-seconds{
        width: 331px;
        height: 207px;
      }


      #visa{
        background-image: url("img/hero-slider/visa.svg");
        background-repeat: no-repeat;
      }

      #mastercard{
      background-image: url("img/hero-slider/mastercard.svg");
      background-repeat: no-repeat;
    }

     #applepay{
        background-image: url("img/hero-slider/applepay.svg");
        background-repeat: no-repeat;
      }

      #gpay{
        background-image: url("img/hero-slider/gpay.svg");
        background-repeat: no-repeat;
      }

      #casino{
       
        background-repeat: no-repeat;      
      }

      #sports{
       
        background-repeat: no-repeat;      
      }

      #events{
       
        background-repeat: no-repeat;   
        padding-top: 61px;   
      }

      .categories{
        display: flex;
        justify-content:space-evenly;
        min-height: 660px;


      }


      .categories div{
        background-position: center;
        height: 320px;
        width: 33%;
      }

      .logo{
        margin-left: 10%;
        margin-top: 54px;
        width:152px;
        height:130px;
        background-image: url("img/header/logo.svg");

      }

      .logo-placeholder{


      }

      .sign-up-section{


      }

      .payment-options{
        margin-top: 19px;
        z-index: 1;
      }

      .btn{
        border-radius: 8px;
        border:none;

      }

      .vip-features{

        display: flex;
        flex-direction: column;
        align-items: center;
        max-height: 976px;
      }

      .vip-features .circular-body-text{
        text-align: center;
      }

      .vip-features-text-image{
        margin-bottom: -50px;
        margin-top: -77px;
      }


      .rotating-cards {

        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        top: -650px;
        z-index: 2;


      }

      .rotating-cards img{
       transform-origin: 50% 300%;

      }

      .black-roulette-wheel {
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        top: -220px;
        z-index: 1;


      }

      .black-roulette-wheel img{

        width: 83%;

      }

      .join-the-club{
      width: 331px;
      height: 207px;
      position: relative;
      z-index: 2;

      }

      .sportsbook{
        display: flex;
        flex-direction: row;
        padding-left: 100px;
        max-height: 900px;


      }

      .sportsbook-text-section{
        display: flex;
        flex-direction: column;
        overflow:hidden;


      }

      .sportsbook .text-section-2:nth-of-type(1) .circular-body-text{

        max-width:49%;

      }

      .sportsbook .text-section-2:nth-of-type(2) .circular-body-text{

        max-width:71%;

      }

      .sportsbook-text-section > img{
        margin-bottom: -87px;
      }

      .sportsbook-text-section  > img:nth-of-type(1){

        position: relative;
        left: 70px;

      }

      .sportsbook > div{

        flex-grow: 1;
      }

      .sportsbook .main-images{

        display:flex;
        flex-wrap:wrap;
      }

      .sportsbook .main-images img{
        width:100%;

      }

      .main-images > img:nth-of-type(1){
        max-width:362px;

      }

      .main-images > img:nth-of-type(2){
        position: relative;
        top: -646px;
        z-index: 3;
      }

      .create-your-account{
        width: 331px;
        height: 207px;
      }


      .events{
        background-image: url("img/fiery-background-image.svg");
        background-position: center;
        display: flex;
        flex-direction: row;
        padding-left: 100px;

      }


      .events > div{



      }

      .events  > div:nth-of-type(1){
        flex-grow:1.8;
        display: flex;
        flex-direction: column;


      }

      .events  > div:nth-of-type(1) img{
        
      }


      .events  > div:nth-of-type(2){
        flex-grow:1;

      }

      .events  > div:nth-of-type(3){
        flex-grow:1.8;
        overflow-x: hidden;

      }

      .events .circular-header-text{

        margin-top:55px;
      }

      .events .circular-body-text{

        max-width: 44%;
        padding-top: 12px;
      }

      .events .baseballer{

        display:flex;

      }

      .events .baseballer img{
        position: relative;

      }

      .bonus{

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding-left: 100px;

      }


      .bonus > div{

        height:250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url("img/bonus-background-border.png");
        width: 30%; 
        background-repeat: no-repeat;
        background-size: contain;

      }

      .bonus .text-section{
        font-family: "Poppins", sans-serif;
        font-size: 34px;
        font-style: normal;
        font-weight: 700;
        color:#E2E2E6;
        opacity: 60%;
        text-align: center;
        margin-top: -38px;


      }

      .bonus > div img{

        width:78%

      }

      .stats > div:nth-of-type(1) img{

        width:92%

      }


      .stats{

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding-left: 100px;
        min-height: 400px;

      }

      .stats > div{

        height:175px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url("img/stats-gradient-border-black-background.png");
        width: 30%; 
        background-repeat: no-repeat;
        background-size: contain;

      }

      .stats > div img{

        width:90%

      }

      .stats > div:nth-of-type(2) img{

        width:56%

      }

      .stats > div:nth-of-type(3) img{

        width:69%

      }

      .stats .text-section{
        font-family: "Poppins", sans-serif;
        font-size: 12px;
        font-style: normal;
        color:#E2E2E6;
        opacity: 60%;
        text-align: center;
        margin-top: -38px;


      }

      .security{
        background-image: url("img/security-section-background.svg");
        background-position: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        height: 624px;

      }

      .security > div{
        height:560px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url("img/golden-gradient-margin-black-background.svg");
        width: 37%;
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 27px;
        overflow-y: hidden;
       

      }

      .security > div:nth-of-type(1){
        font-family: "Poppins", sans-serif;

        font-weight: 500;
        color: #E4FCE4;
        font-size:1.39vw;
    }

      .security > div img{
        width:90%;
      }


      #padlock-holder{

        margin-top: -42px;
        position: relative;
        z-index: 4;
        display: flex;
        align-items: center;
        flex-direction: column;
      }

      #padlock-holder > img{

        width:75%;
        position: relative;

      }

      #secure-payments-holder{
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: -35px;
      }

      #secure-payments-holder > img{
        width:77% ;

      }

      #vip-is-secured-holder{
        margin-top: -14px;
        display: flex;
         align-items: center;
         flex-direction: column;
      }

      #vip-is-secured-holder img{

        width: 103%;


      }

      .slogan{

        background-image: url("img/slogan-background.png");
        background-position: center;
      }

      .slogan > div{

        background-color: #1A1C1EF7;
        display: flex;
        flex-direction: column;
        align-items: center;
      }



      .sign-up-section button{

        margin-right: 12px;
        margin-top: 89px;
        width: 137px;
        height: 61px;
        color: white;
        font-size: 17.2px;
        line-height: 23px;
   
      }

        .sign-in{
            background-color: #00857E;

    }

        .sign-up{

            background-image: linear-gradient(#BB9A51, #664807);
        }

      header{
        display: flex;
        justify-content:space-between;
        height:183px;

      }

      footer{
        
        font-family: "Poppins", sans-serif;
        display: flex;
        flex-direction: column;
        height:783px;


      }

      .footer-header{

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #E2E2E6;
        margin-bottom: 25px;
        padding-left: 100px;


      }

      .footer-body{
        display: flex;
        flex-direction: row;
        min-height: 400px;
        min-height: 400px;
        border: 2px solid #2C343D;
      }

      .footer-body > div{

        border-right: 2px solid #2C343D;
        padding-left: 57px;
      }

      .footer-body > div:nth-of-type(1){
        flex-grow:1.5;
        padding-left: 100px;

      }

      .footer-body > div:nth-of-type(2){
        flex-grow:1;

      }

      .footer-body > div:nth-of-type(3){
        flex-grow:1;

      }

      .footer-body > div:nth-of-type(2){
        flex-grow:1.5;

      }





      .footer-body-text{
        font-size: 12px;
        font-style: normal;
        color:#E2E2E6;
        opacity: 60%;

      }

      .footer-section-header{
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #E2E2E6;
        margin-top: 34px;
        margin-bottom: 25px;

      }

      .footer-section-body div{
      color:#F8F8FA;
      font-size: 14px;
      margin-bottom: 8px;
      opacity: 60%;
      


    }

      .payment-info{
        display: flex;
        flex-direction: column;
        color:#E2E2E6;

      }

      .payment-info div:first-child{

        opacity: 60%;
      }

      .footer-payment-logos{


      }

      .logo-company-info{

        display: flex;
       flex-direction: row;
       align-items: center;


      }

      .logo-company-info div{
      opacity: 60%;
      max-width: 55%;
      }

      .logo-company-info img{
      padding-right: 15px;

      }
      
      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      @keyframes fadeInRight {
        to {
          opacity: 0.7;
          transform: translateX(0);
        }
      }