@font-face {
    font-family: 'Raleway';
    src: url('./font/Raleway-Regular.ttf') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('./font/Raleway-Medium.ttf') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('./font/Raleway-SemiBold.ttf') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('./font/Raleway-ExtraBold.ttf') format('woff2');
    font-weight: 800;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }

  html, body {
    overflow-x: hidden;
    
}
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  button {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
  }
  
  input, textarea, button, select {
    font: inherit;
    border: none;
    outline: none;
  }
  
  body {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color: #2c2c2c;
    color: #fff;
    box-sizing: border-box;
  }
 
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #f2dafe;
    text-shadow:    1px 1px 2px black,
    0 0 1em rgb(255, 181, 42),
    0 0 0.2em rgb(255, 181, 42);
  }

  @media (max-width: 480px) {
    header{
        display: flex;
        align-items: start;
        justify-content: space-around;
        border-bottom: 1px solid #fff;
        padding: 20px 20px;
        position: fixed;
        width: 100vw;
        background-color: #2c2c2c;
        z-index: 100;
    }

    .header-laptop{
        display: none;
    }

    .header-nav {
        position: absolute;
        left: 50%;
        top: 14%;
        transform: translateX(-50%);
    }

    .mobile-btn-box-nav{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40px;
        width: 90vw;
    }
  
    .btn-login-nav{
        width: 50vw;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
        padding: 10px 10px;
        border-radius: 10px;
        font-size: 18px;
        background-color: #6c6c6c;
        color: #fff;
    }


    .btn-signup-nav{
        width: 50vw;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
        padding: 10px 10px;
        border-radius: 10px;
        font-size: 18px;
        background-color: #f7863a;
        color: #fff;
        margin-left: 10px;
    }

    .burger-menu {
        position: absolute;
        left: 15px;
        top: 25%;
        transform: translateY(-50%);
        width: 40px;
        height: 30px;
        cursor: pointer;
        z-index: 20;
    }
    
    .burger-menu span {
        display: block;
        height: 4px;
        width: 10vw;
        background: #f4f4f6;
        margin: 6px 0;
        transition: 0.3s;
    }
    
    .menu-toggle:checked + .burger-menu span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .menu-toggle:checked + .burger-menu span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle:checked + .burger-menu span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }


    .menu {
    position: fixed;
    left: -100%;
    top: 0;
    width: 86vw;
    height: 100vh;
    background: #2f374b;
    color: #fff;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: left 0.4s ease-in-out;
    box-shadow: 30px 20px 20px #08090be3;
    }
    
    .menu-toggle:checked ~ .menu {
        left: 0;
    }

    .menu a {
      color: #fff;
      text-decoration: none;
      font-size: 20px;
      font-weight: 600;
      padding: 10px;
      transition: 0.3s;
    }
    
    .menu a:hover {
      background: rgba(245, 245, 245, 0.2);
      border-radius: 5px;
    }
    
    .menu-toggle {
      display: none;
    }
  
    /*  */
  
    .header-nav img{
      width: 140px;
      height: 40px;
    }
  
    .mobile-btn-box{
    display: flex;
    flex-direction: column;
  }

  .btn-login{
    width: 50vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 20px;
    background-color: #6c6c6c;
    color: #fff;
}

.btn-signup{
    width: 50vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 20px;
    background-color: #f7863a;
    color: #fff;
}


.zeus-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    background-image: linear-gradient(90deg, 
                      rgba(255, 199, 79, 0.89) 30%,
                      rgba(255, 255, 255, 0) 100%),
                      url(./img/main-banner-mobile.png);
    background-position: -140px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%; 
    height: 400px; 
    margin-top: 150px;
    padding: 70px 10px 20px 10px;
}


.zeus-bonus{
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    text-shadow:    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
    padding: 50px 0;
}

.navigatioen-section{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    width: 100%;
}

.navigation-title{
    font-size: 24px;
    font-weight: 600;
    padding: 10px 0 0px 0;
    text-align: center;
}

.common-title{
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0 10px 0;
    text-align: center;
}

.navigation-txt{
    font-size: 20px;
    font-weight: 400;
    padding: 10px 0;
    width: 100%;
    text-align: start;
    margin: 0 auto;
}

.navigation-list{
    width: 90%;
}

.navigation-item{
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
    border-bottom: 1px solid #fff;
    padding: 10px 0;
}

.navigation-item:hover{
    background-color: #F7863A;
}


.bonus-banner-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    background-color: #a13dff4a;
    border-radius: 40px;
    padding: 10px 30px 0 30px;
    margin: 20px auto;
    box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        

}


.bonus-banner-img-girl{
    align-self: flex-end;
}

.bonus-banner-img-girl img{
   width: 280px;
   height: auto;
}

.bonus-banner-gift{
    width: 200px;
    height: auto;
}


.bonus-banner-info{
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.bonus-banner-txt{
    font-size: 22px;
    font-weight: 600;
    margin: 30px auto;
}

.slots-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 10px;
}

.slots-txt{
    font-size: 22px;
    font-weight: 500;
    margin: 20px auto;
}

.slots-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
}

.slots-item{
    position: relative;
    margin: 10px auto;
}

.slots-item .slots-item-play{
    display: none;
}

.slots-item:hover .slots-item-play{
    display: flex;
}

.slots-item-play{
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 0%;
    top: 0%;
    font-size: 10px;
    font-weight: 600;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(12px);
    border-radius: 14px;
}

.slots-item-play-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: auto;
    font-size: 30px;
    font-weight: 600;
    background-color: #f7863a;
    border-radius: 100%;
    padding: 2px 12px;
    margin: 10px 0;
}

.slots-item-play-link{
    font-size: 20px;
    font-weight: 600;
}

.slots-item-play-btn:hover{
    background-color: #1e0443;
}

.btn-bonus{
    padding: 4px 14px;
    border-radius: 10px;
    font-size: 22px;
    background-color: #F7863A;
    color: #fff;
    font-weight: 800;
    border: 3px solid #F7863A;
    margin: 18px auto;
    box-shadow: 1px 1px 2px #F7863A, 0 0 1em #F7863A, 0 0 0.2em #fff;
    }

    .btn-bonus:hover{
        background-color: inherit;
    }


    .offer-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        padding: 10px 10px;
    }

    .offer-spin{
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .spin-block{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 14px auto;
    }


    .spin-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #a13dff4a;
        border-radius: 30px;
        padding: 17px 20px;
        width: 100%;
        box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        
    }

    .spin-title{
        font-size: 22px;
        font-weight: 500;
    }

    .table-dep{
        width: 100%;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        border-collapse: collapse;
    }

     th, td{
        border: 1px solid #fff;
        padding: 4px 2px;

    }

    tr:nth-child(even){
        background-color: #000;
    }

    tr:hover {
        background-color: #ff575748;
    }

    tr:nth-child(1){
        background-color: #ff5757;
        font-size: 20px;
        font-weight: 500;
    }

      /* qa section */
      .faq-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
        padding: 10px 10px;
    }

    .qa-content{
        margin: 20px auto;
        display: flex;
        flex-direction: column;
    }
    
    .qa-scontent-title{
        margin: 10px auto;
        border: 1px solid #7a3b9abc;
        border-radius: 20px;
    }
    
    .qa-title{
      font-size: 20px;
      width: 100%;
      position: relative;
      margin: 0;
      padding: 8px 4px 18px 40px;
      display: block;
      cursor: pointer;
    }
    
    .qa-answaer {
      font-size: 18px;
      padding: 0px 8px;
      margin: 0 10px;
      height: 0;
      overflow: hidden;
      z-index: -1;
      position: relative;
      opacity: 0;
      -webkit-transition: .4s ease;
      -moz-transition: .4s ease;
      -o-transition: .4s ease;
      transition: .4s ease;
    }
    
    .panel:checked ~ .qa-answaer{
      height: auto;
      opacity: 1;
      padding: 14px;
    }
    
    .plus {
      position: absolute;
      margin-left: 16px;
      margin-top: 2px;
      z-index: 5;
      font-size: 38px;
      line-height: 100%;
      -webkit-user-select: none;    
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      -webkit-transition: .2s ease;
      -moz-transition: .2s ease;
      -o-transition: .2s ease;
      transition: .2s ease;
    }
    
    .panel:checked ~ .plus {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .panel {
      display: none;
    }
    

    

    footer{
        width: 100%;
        margin: 20px auto;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .payment-footer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 10px 10px;
        padding: 0 10px;
    }

    .payment-footer img{
        width: 80px;
        height: auto;
        margin: 10px 8px;
    }

    .secure-footer{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 40px auto;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 14px 0;
    }

    .secure-footer img{
        padding: 10px 20px;
        width: 90px;
        height: auto;
    }
    .image-background{
        background-color: #f4f4f6;
        border-radius: 20px;
        padding: 4px 8px;
    }
  
}

@media (min-width: 481px) and (max-width: 768px) {
    .header-mobile{
        display: none;
    }

    .header-laptop{
        padding: 20px 0;
        margin: auto;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-bottom: 1px solid #fff;
        position: fixed;
        z-index: 100;
        background-color: #2c2c2c;
        height: 70px;
        backdrop-filter: blur(2px);
    }

    .header-laptop img{
        width: 100px;
        height: auto;
    }

    .laptop-nav{
        display: flex;
        width: 34vw;
        align-items: center;
        justify-content: space-between;
    }

    .menu-link{
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }
    

    .laptop-btn-box{
        width: 36vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    
  .btn-login{
    padding: 6px 6px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #6c6c6c;
    color: #fff;
    font-weight: 600;
    border: 3px solid #6c6c6c;
}

.btn-login:hover{
    background-color: inherit;
}

.btn-signup{
    padding: 6px 6px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #f7863a;
    color: #fff;
    font-weight: 600;
    border: 3px solid #f7863a;
}

.btn-signup:hover{
    background-color: #ff575769;
}

.zeus-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    background-image: linear-gradient(90deg, 
                      rgba(248, 161, 75, 0.89) 30%,
                      rgba(247, 17, 17, 0) 100%),
                      url(./img/main-banner-alex.png);
    background-position: -400px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%; 
    height: 600px; 
    margin-top: 70px;
    padding: 0 100px;
}


.zeus-bonus{
    font-size: 40px;
    font-weight: 800;
    color: #fff;
    text-shadow:    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
}

.navigatioen-section{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 50px 0;
    width: 90%;
}

.navigation-title{
    font-size: 26px;
    font-weight: 600;
    padding: 20px 0 0px 0;
}

.common-title{
    font-size: 26px;
    font-weight: 600;
    margin: 20px 0 10px 0;
    width: 90%;
}

.navigation-txt{
    font-size: 22px;
    font-weight: 500;
    padding: 10px 0;
    width: 90%;
    text-align: start;
    margin: 0 auto;
}

.navigation-list{
    list-style: block;
}

.navigation-item{
    font-size: 22px;
    line-height: 50px;
    font-weight: 600;
    border-bottom: 1px solid #fff;
}

.navigation-item:hover{
    background-color: #F7863A;
}


.bonus-banner-section{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    background-color: #a13dff4a;
    border-radius: 40px;
    padding: 10px 30px 0 30px;
    margin: 20px auto;
    box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        
}


.bonus-banner-img-girl{
    align-self: flex-end;
}

.bonus-banner-img-girl img{
   width: 280px;
   height: auto;
}

.bonus-banner-gift{
    width: 200px;
    height: auto;
}


.bonus-banner-info{
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.bonus-banner-txt{
    font-size: 24px;
    font-weight: 600;
    margin: 30px auto;
}

.slots-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.slots-txt{
    font-size: 24px;
    font-weight: 500;
    margin: 20px auto;
}

.slots-list{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
}

.slots-item{
    position: relative;
}

.slots-item .slots-item-play{
    display: none;
}

.slots-item:hover .slots-item-play{
    display: flex;
}

.slots-item-play{
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 0%;
    top: 0%;
    font-size: 10px;
    font-weight: 600;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(12px);
    border-radius: 14px;
}

.slots-item-play-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: auto;
    font-size: 30px;
    font-weight: 600;
    background-color: #ff5757;
    border-radius: 100%;
    padding: 2px 12px;
    margin: 10px 0;
}

.slots-item-play-link{
    font-size: 20px;
    font-weight: 600;
}

.slots-item-play-btn:hover{
    background-color: #1e0443;
}

.btn-bonus{
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 24px;
    background-color: #ff5757;
    color: #fff;
    font-weight: 800;
    border: 3px solid #ff5757;
    margin: 18px auto;
    box-shadow: 1px 1px 2px #ff5757, 0 0 1em #ff5757, 0 0 0.2em #fff;
    }

    .btn-bonus:hover{
        background-color: inherit;
    }


    .offer-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 90%;
        margin: 0 auto;
    }

    .offer-spin{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .spin-block{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 44%;
    }


    .spin-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #a13dff4a;
        border-radius: 30px;
        padding: 17px 20px;
        width: 100%;
        box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        

    }

    .spin-title{
        font-size: 22px;
        font-weight: 500;
    }

    .table-dep{
        width: 90%;
        font-size: 20px;
        font-weight: 500;
        text-align: center;
        border-collapse: collapse;
    }

     th, td{
        border: 1px solid #fff;
        padding: 6px 4px;

    }

    tr:nth-child(even){
        background-color: #000;
    }

    tr:hover {
        background-color: #ff575748;
    }

    tr:nth-child(1){
        background-color: #ff5757;
        font-size: 24px;
        font-weight: 600;
    }

      /* qa section */
      .faq-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 80%;
    }

    .qa-content{
        margin: 20px auto;
        display: flex;
        flex-direction: column;
    }
    
    .qa-scontent-title{
        margin: 10px auto;
        border: 1px solid #7a3b9abc;
        border-radius: 26px;
    }
    
    .qa-title{
      font-size: 24px;
      width: 100%;
      position: relative;
      margin: 0;
      padding: 10px 10px 10px 60px;
      display: block;
      cursor: pointer;
    }
    
    .qa-answaer {
      font-size: 22px;
      padding: 0px 8px;
      margin: 0 10px;
      height: 0;
      overflow: hidden;
      z-index: -1;
      position: relative;
      opacity: 0;
      -webkit-transition: .4s ease;
      -moz-transition: .4s ease;
      -o-transition: .4s ease;
      transition: .4s ease;
    }
    
    .panel:checked ~ .qa-answaer{
      height: auto;
      opacity: 1;
      padding: 14px;
    }
    
    .plus {
      position: absolute;
      margin-left: 20px;
      margin-top: 2px;
      z-index: 5;
      font-size: 38px;
      line-height: 100%;
      -webkit-user-select: none;    
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      -webkit-transition: .2s ease;
      -moz-transition: .2s ease;
      -o-transition: .2s ease;
      transition: .2s ease;
    }
    
    .panel:checked ~ .plus {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .panel {
      display: none;
    }
    


    footer{
        width: 100%;
        margin: 20px auto;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .payment-footer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        width: 80%;
        margin: 40px 20px;
        padding: 0 40px;
    }

    .secure-footer{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 40px auto;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 14px 0;
    }

    .secure-footer img{
        padding: 10px 20px;
        width: 120px;
        height: auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header-mobile{
        display: none;
    }

    .header-laptop{
        padding: 20px 0;
        margin: auto;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-bottom: 1px solid #fff;
        position: fixed;
        z-index: 100;
        background-color: #2c2c2c;
        height: 70px;
        backdrop-filter: blur(2px);
    }

    .laptop-nav{
        display: flex;
        width: 34vw;
        align-items: center;
        justify-content: space-between;
    }

    .menu-link{
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }
    

    .laptop-btn-box{
        width: 30vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    
  .btn-login{

    padding: 8px 14px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #6c6c6c;
    color: #fff;
    font-weight: 600;
    border: 3px solid #6c6c6c;
}

.btn-login:hover{
    background-color: inherit;
}

.btn-signup{
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #ff5757;
    color: #fff;
    font-weight: 600;
    border: 3px solid #ff5757;
}

.btn-signup:hover{
    background-color: #ff575769;
}

.zeus-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    background-image: linear-gradient(90deg, 
                      rgba(255, 175, 36, 0.89) 30%,
                      rgba(255, 255, 255, 0) 100%),
                      url(./img/main-banner-alex.png);
    background-position: -400px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%; 
    height: 600px; 
    margin-top: 70px;
    padding: 0 100px;
}


.zeus-bonus{
    font-size: 40px;
    font-weight: 800;
    color: #fff;

}

.navigatioen-section{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 50px 0;
}

.navigation-title{
    font-size: 28px;
    font-weight: 600;
    padding: 20px 0 0px 0;
}

.common-title{
    font-size: 26px;
    font-weight: 600;
    margin: 20px 0 10px 0;
    width: 90%;
}

.navigation-txt{
    font-size: 24px;
    font-weight: 500;
    padding: 10px 0;
    width: 80%;
    text-align: start;
    margin: 0 auto;
}

.navigation-list{
    list-style: block;
}

.navigation-item{
    font-size: 24px;
    line-height: 50px;
    font-weight: 600;
    border-bottom: 1px solid #fff;
}

.navigation-item:hover{
    background-color: #F7863A;
}

.bonus-banner-section{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    background-color: #a13dff4a;
    border-radius: 40px;
    padding: 10px 30px 0 30px;
    margin: 20px auto;
    box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        
}


.bonus-banner-img-girl{
    align-self: flex-end;
}

.bonus-banner-img-girl img{
   width: 320px;
   height: auto;
}

.bonus-banner-gift{
    width: 250px;
    height: auto;
}


.bonus-banner-info{
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.bonus-banner-txt{
    font-size: 28px;
    font-weight: 600;
    margin: 30px auto;
}

.slots-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.slots-txt{
    font-size: 26px;
    font-weight: 500;
    margin: 20px auto;
}

.slots-list{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
}

.slots-item{
    position: relative;
}

.slots-item .slots-item-play{
    display: none;
}

.slots-item:hover .slots-item-play{
    display: flex;
}

.slots-item-play{
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 0%;
    top: 0%;
    font-size: 10px;
    font-weight: 600;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(12px);
    border-radius: 14px;
}

.slots-item-play-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: auto;
    font-size: 30px;
    font-weight: 600;
    background-color: #ff5757;
    border-radius: 100%;
    padding: 2px 12px;
    margin: 10px 0;
}

.slots-item-play-link{
    font-size: 20px;
    font-weight: 600;
}

.slots-item-play-btn:hover{
    background-color: #1e0443;
}

.btn-bonus{
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 24px;
    background-color: #f7863a;
    color: #fff;
    font-weight: 800;
    border: 3px solid #ff5757;
    margin: 18px auto;
    box-shadow: 1px 1px 2px #ff5757, 0 0 1em #ff5757, 0 0 0.2em #fff;
    }

    .btn-bonus:hover{
        background-color: inherit;
    }


    .offer-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .offer-spin{
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .spin-block{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 46%;
    }


    .spin-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #a13dff4a;
        border-radius: 30px;
        padding: 24px 16px;
        width: 100%;
        box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        
        }

    .spin-title{
        font-size: 26px;
        font-weight: 500;
    }

    .table-dep{
        width: 90%;
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        border-collapse: collapse;
    }

     th, td{
        border: 1px solid #fff;
        padding: 6px 4px;

    }

    tr:nth-child(even){
        background-color: #000;
    }

    tr:hover {
        background-color: #ff575748;
    }

    tr:nth-child(1){
        background-color: #ff5757;
        font-size: 26px;
        font-weight: 600;
    }

      /* qa section */
      .faq-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 80%;
    }

    .qa-content{
        margin: 20px auto;
        display: flex;
        flex-direction: column;
    }
    
    .qa-scontent-title{
        margin: 10px auto;
        border: 1px solid #7a3b9abc;
        border-radius: 26px;
    }
    
    .qa-title{
      font-size: 24px;
      width: 100%;
      position: relative;
      margin: 0;
      padding: 10px 10px 10px 60px;
      display: block;
      cursor: pointer;
    }
    
    .qa-answaer {
      font-size: 22px;
      padding: 0px 8px;
      margin: 0 10px;
      height: 0;
      overflow: hidden;
      z-index: -1;
      position: relative;
      opacity: 0;
      -webkit-transition: .4s ease;
      -moz-transition: .4s ease;
      -o-transition: .4s ease;
      transition: .4s ease;
    }
    
    .panel:checked ~ .qa-answaer{
      height: auto;
      opacity: 1;
      padding: 14px;
    }
    
    .plus {
      position: absolute;
      margin-left: 20px;
      margin-top: 2px;
      z-index: 5;
      font-size: 38px;
      line-height: 100%;
      -webkit-user-select: none;    
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      -webkit-transition: .2s ease;
      -moz-transition: .2s ease;
      -o-transition: .2s ease;
      transition: .2s ease;
    }
    
    .panel:checked ~ .plus {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .panel {
      display: none;
    }
    


    footer{
        width: 100%;
        margin: 20px auto;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .payment-footer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        width: 80%;
        margin: 40px 20px;
        padding: 0 40px;
    }

    .secure-footer{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 40px auto;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 14px 0;
    }

    .secure-footer img{
        padding: 10px 20px;
        width: 150px;
        height: auto;
    }
}
@media (min-width: 1025px) and (max-width: 1366px) {
    .header-mobile{
        display: none;
    }

    .header-laptop{
        padding: 20px 0;
        margin: auto;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-bottom: 1px solid #fff;
        position: fixed;
        z-index: 100;
        background-color: #2c2c2c;
        height: 70px;
        backdrop-filter: blur(2px);
    }

    .laptop-nav{
        display: flex;
        width: 30vw;
        align-items: center;
        justify-content: space-between;
    }

    .menu-link{
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }
    

    .laptop-btn-box{
        width: 32vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    
  .btn-login{
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #6c6c6c;
    color: #fff;
    font-weight: 600;
    border: 3px solid #6c6c6c;
}

.btn-login:hover{
    background-color: inherit;
}

.btn-signup{
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #ff5757;
    color: #fff;
    font-weight: 600;
    border: 3px solid #ff5757;
}

.btn-signup:hover{
    background-color: #ff575769;
}

.zeus-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    background-image: linear-gradient(90deg, 
                      rgba(122, 59, 154, 0.89) 30%,
                      rgba(255, 255, 255, 0) 100%),
                      url(./img/main-banner-alex.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%; 
    height: 600px; 
    margin-top: 70px;
    padding: 0 100px;
}


.zeus-bonus{
    font-size: 50px;
    font-weight: 800;
    color: #fff;

}

.navigatioen-section{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 70px 0;
}

.navigation-title{
    font-size: 36px;
    font-weight: 600;
    padding: 40px 0 0px 0;
}

.common-title{
    font-size: 36px;
    font-weight: 600;
    margin: 20px 0 10px 0;
}

.navigation-txt{
    font-size: 28px;
    font-weight: 500;
    padding: 10px 0;
    width: 80%;
    text-align: start;
    margin: 0 auto;
}

.navigation-list{
    list-style: block;
}

.navigation-item{
    font-size: 24px;
    line-height: 50px;
    font-weight: 600;
    border-bottom: 1px solid #fff;
}

.navigation-item:hover{
    background-color: #F7863A;
}



.bonus-banner-section{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    background-color: #a13dff4a;
    border-radius: 40px;
    padding: 10px 30px 0 30px;
    margin: 20px auto;
    box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        
}


.bonus-banner-img-girl{
    align-self: flex-end;
}

.bonus-banner-img-girl img{
   width: 370px;
   height: auto;
}

.bonus-banner-gift{
    width: 280px;
    height: auto;
}


.bonus-banner-info{
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.bonus-banner-txt{
    font-size: 34px;
    font-weight: 600;
    margin: 30px auto;
}

.slots-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.slots-txt{
    font-size: 28px;
    font-weight: 500;
    margin: 20px auto;
}

.slots-list{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 80%;
}

.slots-item{
    position: relative;
}

.slots-item .slots-item-play{
    display: none;
}

.slots-item:hover .slots-item-play{
    display: flex;
}

.slots-item-play{
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 0%;
    top: 0%;
    font-size: 10px;
    font-weight: 600;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(12px);
    border-radius: 14px;
}

.slots-item-play-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: auto;
    font-size: 30px;
    font-weight: 600;
    background-color: #ff5757;
    border-radius: 100%;
    padding: 2px 12px;
    margin: 10px 0;
}

.slots-item-play-link{
    font-size: 20px;
    font-weight: 600;
}

.slots-item-play-btn:hover{
    background-color: #1e0443;
}

.btn-bonus{
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 24px;
    background-color: #ff5757;
    color: #fff;
    font-weight: 500;
    border: 3px solid #ff5757;
    margin: 18px auto;
    box-shadow: 1px 1px 2px #ff5757, 0 0 1em #ff5757, 0 0 0.2em #fff;
    }

    .btn-bonus:hover{
        background-color: inherit;
    }


    .offer-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .offer-spin{
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .spin-block{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 40%;
    }


    .spin-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #a13dff4a;
        border-radius: 30px;
        padding: 40px 30px;
        width: 100%;
        box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        

    }

    .spin-title{
        font-size: 26px;
        font-weight: 500;
    }

    .table-dep{
        width: 80%;
        font-size: 26px;
        font-weight: 500;
        text-align: center;
        border-collapse: collapse;
    }

     th, td{
        border: 1px solid #fff;
        padding: 8px 6px;

    }

    tr:nth-child(even){
        background-color: #000;
    }

    tr:hover {
        background-color: #ff575748;
    }

    tr:nth-child(1){
        background-color: #ff5757;
        font-size: 30px;
        font-weight: 600;
    }

      /* qa section */
      .faq-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 70%;
    }

    .qa-content{
        margin: 20px auto;
        display: flex;
        flex-direction: column;
    }
    
    .qa-scontent-title{
        margin: 10px auto;
        border: 1px solid #7a3b9abc;
        border-radius: 26px;
    }
    
    .qa-title{
      font-size: 24px;
      width: 100%;
      position: relative;
      margin: 0;
      padding: 10px 10px 10px 60px;
      display: block;
      cursor: pointer;
    }
    
    .qa-answaer {
      font-size: 22px;
      padding: 0px 8px;
      margin: 0 10px;
      height: 0;
      overflow: hidden;
      z-index: -1;
      position: relative;
      opacity: 0;
      -webkit-transition: .4s ease;
      -moz-transition: .4s ease;
      -o-transition: .4s ease;
      transition: .4s ease;
    }
    
    .panel:checked ~ .qa-answaer{
      height: auto;
      opacity: 1;
      padding: 14px;
    }
    
    .plus {
      position: absolute;
      margin-left: 20px;
      margin-top: 2px;
      z-index: 5;
      font-size: 38px;
      line-height: 100%;
      -webkit-user-select: none;    
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      -webkit-transition: .2s ease;
      -moz-transition: .2s ease;
      -o-transition: .2s ease;
      transition: .2s ease;
    }
    
    .panel:checked ~ .plus {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .panel {
      display: none;
    }
    


    footer{
        width: 100%;
        margin: 20px auto;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .payment-footer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        width: 80%;
        margin: 40px 20px;
        padding: 0 40px;
    }

    .secure-footer{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 40px auto;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 14px 0;
    }

    .secure-footer img{
        padding: 10px 20px;
        width: 150px;
        height: auto;
    }
}

@media (min-width: 1367px)  {
    .header-mobile{
        display: none;
    }

    .header-laptop{
        padding: 20px 0;
        margin: auto;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        border-bottom: 1px solid #fff;
        position: fixed;
        z-index: 100;
        background-color: #2c2c2c;
        height: 70px;
        backdrop-filter: blur(2px);
    }

    .laptop-nav{
        display: flex;
        width: 30vw;
        align-items: center;
        justify-content: space-between;
    }

    .menu-link{
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }
    

    .laptop-btn-box{
        width: 26vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    
  .btn-login{

    padding: 8px 14px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #6c6c6c;
    color: #fff;
    font-weight: 800;
    border: 3px solid #6c6c6c;
}

.btn-login:hover{
    background-color: inherit;
}

.btn-signup{
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #ff5757;
    color: #fff;
    font-weight: 800;
    border: 3px solid #ff5757;
}

.btn-signup:hover{
    background-color: #ff575769;
}

.zeus-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    background-image: linear-gradient(90deg, 
                      rgba(249, 175, 78, 0.89) 30%,
                      rgba(255, 255, 255, 0) 100%),
                      url(./img/main-banner-alex.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%; 
    height: 600px; 
    margin-top: 70px;
    padding: 0 100px;
}

.zeus-section a{
    align-self: start;
    margin: 0;
}

.zeus-bonus{
    font-size: 50px;
    font-weight: 800;
    color: #fff;

}

.navigatioen-section{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 70px 0;
}

.navigation-title{
    font-size: 36px;
    font-weight: 600;
    padding: 40px 0 0px 0;
}

.common-title{
    font-size: 36px;
    font-weight: 600;
    margin: 20px 0 10px 0;
}

.navigation-txt{
    font-size: 28px;
    font-weight: 500;
    padding: 10px 0;
    width: 80%;
    text-align: start;
    margin: 0 auto;
}

.navigation-list{
    list-style: block;
}

.navigation-item{
    font-size: 24px;
    line-height: 60px;
    font-weight: 600;
    border-bottom: 1px solid #fff;
}

.navigation-item:hover{
    background-color: #F7863A;
}

.bonus-banner-section{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 70%;
    background-color: #a13dff4a;
    border-radius: 40px;
    padding: 10px 30px 0 30px;
    margin: 20px auto;
    box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        

}


.bonus-banner-img-girl{
    align-self: flex-end;
}

.bonus-banner-img-girl img{
   width: 370px;
   height: auto;
}

.bonus-banner-gift{
    width: 280px;
    height: auto;
}


.bonus-banner-info{
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.bonus-banner-txt{
    font-size: 34px;
    font-weight: 600;
    margin: 30px auto;
}

.slots-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.slots-txt{
    font-size: 28px;
    font-weight: 500;
    margin: 20px auto;
}

.slots-list{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 80%;
}

.slots-item{
    position: relative;
}

.slots-item .slots-item-play{
    display: none;
}

.slots-item:hover .slots-item-play{
    display: flex;
}

.slots-item-play{
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 0%;
    top: 0%;
    font-size: 10px;
    font-weight: 600;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(12px);
    border-radius: 14px;
}

.slots-item-play-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: auto;
    font-size: 30px;
    font-weight: 600;
    background-color: #ff5757;
    border-radius: 100%;
    padding: 2px 12px;
    margin: 10px 0;
}

.slots-item-play-link{
    font-size: 20px;
    font-weight: 600;
}

.slots-item-play-btn:hover{
    background-color: #1e0443;
}

.btn-bonus{
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 24px;
    background-color: #ff5757;
    color: #fff;
    font-weight: 600;
    border: 3px solid #ff5757;
    margin: 18px auto;
    box-shadow: 1px 1px 2px #ff5757, 0 0 1em #ff5757, 0 0 0.2em #fff;
    }

    .btn-bonus:hover{
        background-color: inherit;
    }


    .offer-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .offer-spin{
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .spin-block{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 40%;
    }


    .spin-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        background-color: #a13dff4a;
        border-radius: 30px;
        padding: 40px 30px;
        width: 100%;
        box-shadow: 1px 1px 2px #7a3b9a, 0 0 4em #7a3b9a, 0 0 0.2em #7a3b9a;        
    }

    .spin-title{
        font-size: 26px;
        font-weight: 500;
    }

    .table-dep{
        width: 70%;
        font-size: 26px;
        font-weight: 500;
        text-align: center;
        border-collapse: collapse;
    }

     th, td{
        border: 1px solid #fff;
        padding: 10px 10px;

    }

    tr:nth-child(even){
        background-color: #000;
    }

    tr:hover {
        background-color: #ff575748;
    }

    tr:nth-child(1){
        background-color: #ff5757;
        font-size: 30px;
        font-weight: 600;
    }

    /* qa section */
    .faq-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 50%;
    }

    .qa-content{
        margin: 20px auto;
        display: flex;
        flex-direction: column;
    }
    
    .qa-scontent-title{
        margin: 10px auto;
        border: 1px solid #7a3b9abc;
        border-radius: 26px;
    }
    
    .qa-title{
      font-size: 24px;
      width: 100%;
      position: relative;
      margin: 0;
      padding: 10px 10px 10px 60px;
      display: block;
      cursor: pointer;
    }
    
    .qa-answaer {
      font-size: 22px;
      padding: 0px 8px;
      margin: 0 10px;
      height: 0;
      overflow: hidden;
      z-index: -1;
      position: relative;
      opacity: 0;
      -webkit-transition: .4s ease;
      -moz-transition: .4s ease;
      -o-transition: .4s ease;
      transition: .4s ease;
    }
    
    .panel:checked ~ .qa-answaer{
      height: auto;
      opacity: 1;
      padding: 14px;
    }
    
    .plus {
      position: absolute;
      margin-left: 20px;
      margin-top: 2px;
      z-index: 5;
      font-size: 38px;
      line-height: 100%;
      -webkit-user-select: none;    
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      -webkit-transition: .2s ease;
      -moz-transition: .2s ease;
      -o-transition: .2s ease;
      transition: .2s ease;
    }
    
    .panel:checked ~ .plus {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .panel {
      display: none;
    }
    

    /* qa end */

    footer{
        width: 100%;
        margin: 20px auto;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        font-size: 26px;
        font-weight: 500;
        text-align: center;
    }

    .payment-footer{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 40px 20px;
        padding: 0 40px;
    }

    .secure-footer{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        margin: 40px auto;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 14px 0;
    }

    .secure-footer img{
        padding: 10px 20px;
        width: 150px;
        height: auto;
    }
}
.author-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #444445;
    color: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    max-width: 900px;
    margin: 40px auto;
    font-family: 'Inter', sans-serif;
}

.author-mobile {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.author-img {
    border-radius: 50%;
    border: 2px solid #FFD700;
    margin-right: 15px;
}

.author-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
}

.author-position {
    font-style: normal;
    color: #FFD700;
    font-size: 14px;
}

.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.author-info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.author-social {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    list-style: none;
    padding: 0;
}

.soc-item img {
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.soc-item img:hover {
    transform: scale(1.1);
}

.author-review-txt {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #dcdcdc;
    max-width: 700px;
}

.author-laptop {
    display: none;
}

@media (min-width: 768px) {
    .author-review {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .author-mobile {
        display: none;
    }

    .author-laptop {
        display: block;
        margin-right: 20px;
    }

    .author-info {
        align-items: flex-start;
    }

    .author-info-box {
        align-items: flex-start;
    }
}