:root {
     --main-color: #2d363f;
     --secondary-color: #0687ab;
     --third-color: #FFFFFF;
 }

 body {
     font-family: "Lato", serif;
     overflow-x: hidden;
 }

 .dropdown-menu a {
     text-transform: none !important;
 }

 /*header*/
 .space-divider {
     padding: 40px 20px;
 }

 .space-divider2 {
     border-top: 3px solid var(--secondary-color);
     padding: 50px 20px;
 }

 .max-box {
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
     display: block;
 }

 .headline-title {
     color: var(--secondary-color);
     margin: 20px auto;
     font-size: 40px;
 }

 .head-logo {
     width: 100%;
     max-width: 88px;
 }

 .main-header {
     border-bottom: 2px solid var(--third-color);
 }

 .main-header .logo {
     z-index: 0;
 }

 h1 {
     font-size: 55px;
     font-weight: 600;
 }

 p {
     font-size: 18px;
 }

 .container-maxwidth {
     width: 100%;
     max-width: 1200px;
 }

 header {
     background-color: #fff;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
     position: sticky;
     top: 0;
     z-index: +999;
 }

 .navbar {
     font-size: 18px;
     font-weight: 500;
     line-height: 27px;
     position: unset !important;
 }

 .navbar-nav {
     gap: 20px;
 }

 .navbar-nav li a {
     text-transform: uppercase;
     font-size: 17px;
 }

 .navbar-dark .navbar-nav .nav-link {
     color: #000;
 }

 .navbar-dark .navbar-nav .nav-link:hover {
     color: #000;
 }

 .fs-6 {
     font-size: 1rem !important;
     color: #000 !important;
 }

 .navbar-toggler i {
     color: #9198ae;
     font-size: 30px;
 }

 .navbar-toggler .fa-times {
     display: none;
 }

 .navbar-toggler[aria-expanded="true"] .fa-times {
     display: block !important;
 }

 .navbar-toggler[aria-expanded="true"] .fa-bars {
     display: none !important;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 /* hover */
 .navbar-nav .nav-item .nav-link {
     position: relative;
     overflow: hidden;
     transition: color 0.5s ease;
     padding: 2px 15px;
 }

 /* 
 .navbar-nav .nav-item .nav-link::before {
     content: '';
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--secondary-color);
     transition: top 0.5s ease;
     z-index: -1;
     border-bottom: 2px solid var(--third-color);
 }

 .navbar-nav .nav-item .nav-link:hover::before {
     top: 0;
 }

 .navbar-nav .nav-item .nav-link:hover {
     color: var(--third-color);
 } */

 /* social media */
 .social-menu {
     display: flex;
 }

 .social-btn {
     list-style: none;
     width: 40px;
     height: 40px;
     background: #0088cc;
     margin: 8px;
     border-radius: 30%;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0 10px 10px -5px rgb(255, 255, 255, 0.1);
     transition: all 0.3s;
     z-index: 10px;
 }

 .social-btn a {
     text-decoration: none;
     color: var(--third-color);
 }

 .social-btn:hover a {
     color: var(--third-color);
 }

 .social-menu .social-btn:hover::before {
     top: -45px;
     opacity: 1;
 }

 .social-btn:hover::after {
     top: -12px;
     opacity: 1;
 }

 .telegram a {
     color: #fff;
 }

 .telegram:hover,
 .telegram:hover .social-btn:before,
 .telegram:hover .social-btn:after {
     background: #0088cc;
 }

 .head-box {
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
 }

 .headline {
     color: var(--main-color);
 }

 .head-list {
     gap: 40px;
     margin-top: 20px;
     font-weight: 600;
 }

 .icon-color {
     color: var(--secondary-color);
 }

 /* Pack */

 .pricing-box {
     backdrop-filter: blur(3px);
     background-color: rgba(255, 255, 255, 0.1);
     box-shadow: rgb(6, 135, 171) 0px 2px 2px, rgb(255, 255, 255) 0px 7px 55px -3px, rgb(6, 135, 171) 0px -3px 0px inset;
     border: 2px solid #0687ab;
 }

 .inner-li li {
     font-size: 18px;
     line-height: 1.7;
     font-weight: 700;
 }

 .pricing-box .gold {
     background: linear-gradient(146deg, rgb(174, 134, 37) 8%, rgb(189, 176, 0) 36%, rgb(174, 134, 37) 91%);
     background-clip: border-box;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     font-size: 25px;
 }

 .pricing-box .silver {
     background: linear-gradient(278deg, rgb(59, 59, 59) 8%, rgb(119, 114, 114) 42%, rgb(59, 59, 59) 90%);
     background-clip: border-box;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     font-size: 25px;
 }

 .pricing-box .bronze {
     background: linear-gradient(278deg, rgb(40% 20% 3.1%), 8%, rgb(178, 99, 18) 42%, rgb(135, 64, 6) 90%);
     background-clip: border-box;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     font-size: 23px;
 }

 .logo-box {
     box-shadow: rgb(6, 135, 171) 0px 4px 4px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
     padding: 10px;
     height: 150px;
     width: 150px;
     border-radius: 50% !important;
     position: absolute;
 }

 .logo-box h4 {
     font-size: 15px;
     color: #0687ab;
     font-weight: 800;
 }

 /* table */
 .fourth-box {
     width: 100%;
     max-width: 1000px;
     margin: 0 auto;
     box-shadow: rgb(45, 54, 63) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
 }

 .fourth-box h2 {
     color: var(--secondary-color);
 }

 .list li {
     margin-bottom: 15px;
 }

 /* faq */
 .accordion,
 .accordion * {
     border: none !important;
 }

 .accordion .accordion-item {
     border-bottom: 5px solid var(--secondary-color) !important;
 }

 .accordion .accordion-item button[aria-expanded='true'] {
     border-bottom: 1px solid var(--secondary-color);
 }

 .accordion button {
     position: relative;
     display: block;
     text-align: left;
     width: 100%;
     padding: 1em 0;
     color: var(--main-color);
     font-size: 25px;
     font-weight: 600;
     border: none;
     background: none;
     outline: none;
 }

 .accordion button:hover,
 .accordion button:focus {
     cursor: pointer;
 }

 .accordion button:hover::after,
 .accordion button:focus::after {
     cursor: pointer;
     color: var(--secondary-color);
     border: 1px solid var(--secondary-color);
 }

 .accordion button .accordion-title {
     padding: 1em 1.5em 1em 0;
 }

 .accordion button .icon {
     display: inline-block;
     position: absolute;
     top: 18px;
     right: 0;
     width: 22px;
     height: 22px;
     border: 1px solid;
     border-radius: 22px;
 }

 .accordion button .icon::before {
     display: block;
     position: absolute;
     content: '';
     top: 9px;
     left: 5px;
     width: 10px;
     height: 2px;
     background: currentColor;
 }

 .accordion button .icon::after {
     display: block;
     position: absolute;
     content: '';
     top: 5px;
     left: 9px;
     width: 2px;
     height: 10px;
     background: currentColor;
 }

 .accordion button[aria-expanded='true'] {
     color: var(--secondary-color);
 }

 .accordion button[aria-expanded='true'] .icon::after {
     width: 0;
 }

 .accordion button[aria-expanded='true']+.accordion-content {
     opacity: 1;
     max-height: 30em;
     transition: all 200ms linear;
     will-change: opacity, max-height;
 }

 .accordion .accordion-content {
     opacity: 0;
     max-height: 0;
     overflow: hidden;
     transition: opacity 200ms linear, max-height 200ms linear;
     will-change: opacity, max-height;
 }

 .accordion .accordion-content p {
     font-size: 20px;
     font-weight: 500;
     margin: 1em 0;
     color: var(--main-color);
 }

 .accordion .accordion-content p:hover {
     color: var(--secondary-color);
 }

 .foot-logo {
     width: 100%;
     max-width: 150px;
 }

 .top-footer {
     padding: 80px 0 80px;
     background-color: var(--main-color);
 }

 .footer {
     background-color: var(--secondary-color);
     padding: 20px 0px;
 }

 .footer p {
     font-size: 14px;
 }

 .footer_img {
     list-style: none;
     padding: 0;
     gap: 30px;
 }

 .img-1 {
     width: 100%;
     max-width: 40px;
 }

 .img-2 {
     width: 100%;
     max-width: 140px;
 }

 .footer_img li a {
     padding-bottom: 7px;
 }

 .footer_txt p {
     font-size: 16px;
 }

 .footer_txt {
     border-left: 1px solid var(--secondary-color);
     padding-left: 50px;
 }

 /* advertise banner */
 .avertise-title {
     font-weight: 700;
 }


 .advertise-box h6 {
     font-weight: 700;
 }

 .advertise .age-verification-text {
     font-size: 12px;
     margin-bottom: 0;
 }

 .cta-button {
     background: #71a55d;
     font-size: 16px;
     float: left;
 }

 .advertise-box .black {
     background: #000;
     padding: 12px;
 }

 .advertise-box .green {
     background: #79c000;
     padding: 12px;
 }

 .advertise-box .dark-blue {
     background: #071925;
     padding: 12px;
 }

 .advertise-box .orange {
     background: #ff6600;
     padding: 12px;
 }

 .advertise-box .dark-orange {
     background: #eb4d1d;
 }

 .advertise-box h5 {
     font-size: 18px;
     font-weight: 700;
 }

 .btn-custom-cu {
     justify-content: space-between;
     justify-content: space-between;
     border: #b8d3ae 2px solid !important;
     padding: 20px 10px;
     border-radius: 10px;
     margin: 0 0 10px;
     float: left;
 }

 .rounded-3 img {
     border-radius: 10px;
 }

 @media(max-width: 990px) {
     .cta-button {
         width: 100%;
         margin-top: 20px;
         display: block;
         text-align: center;
         font-size: 16px;
     }

     .container,
     .container-sm {
         max-width: 100%;
     }
 }


 /* table */


 .black {
     background: #000;
     padding: 12px;
 }

 .green {
     background: #79c000;
     padding: 12px;
 }

 .dark-blue {
     background: #071925;
     padding: 12px;
 }

 .orange {
     background: #ff6600;
     padding: 12px;
 }

 .dark-orange {
     background: #eb4d1d;
 }

 .compare_table {
     background-color: #fff;
     border: 1px solid #0687ab;
 }

 .compare_table .casino_logo {
     padding: 10px;
 }

 .bonus_txt {
     font-size: 16px;
     list-style: none;
     border-right: 2px solid #0787ab;
     border-left: 2px solid #0888ab;
 }

 .bonus_txt i {
     color: var(--secondary-color);
 }

 .bonus_txt-cu {
     font-weight: 600;
     font-size: 16px;
     list-style: none;
     border-right: 2px solid #0787ab;
     border-left: 2px solid #0888ab;
     margin: 0;
     padding: 0;
     text-align: center;
     height: 100%;
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 9px;
     justify-content: center;
 }

 .bonus_txt-cu p {
     margin: 0 !important;
 }

 .rating_number {
     font-size: 25px;
     font-weight: 600;
 }

 .rating {
     max-width: 120px;
 }

 .ply-btn {
     /*background-image: linear-gradient(to right, #0687AB 0%, #2D363F 15%, #0687AB 30%, #108CAE 55%, #0687AB 100%);*/
     background: #10bcef !important;
     padding: 8px 40px;
     border-radius: 10px;
     font-size: 18px;
     font-weight: 700;
     line-height: 32px;
     transition: all 0.5s ease;
 }

 .border-dark {
     border-left: 1px solid black;
     border-right: 1px solid black;
     padding: 40px 40px;
 }

 .bottom_txt {
     background-color: #1b1b1b;
     padding: 50px;
 }

 .bottom_txt h2 {
     font-size: 24px;
 }

 .bottom_txt p,
 .list li {
     font-size: 17px;
     line-height: 1.6;
 }

 .compare_table .col-7.list-content {
     border-left: 1px solid #a2a2a2;
     display: flex;
     align-items: center;
     justify-content: center !important;
 }

 .compare_table .col-7 {
     border-left: 1px solid #a2a2a2;
     display: flex;
     align-items: center;
     justify-content: start !important;
 }

 .badge-container {
     display: flex;
     align-items: center;
     margin: 0 0 10px;
     width: 100%;
     float: left;
 }

 .badge-container:last-child {
     margin: 0;
 }

 .circle {
     width: 207px;
     height: 207px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: -46px;
     z-index: 1;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
     min-width: 207px;
     float: left;
     padding: 30px;
 }

 .circle .img {
     width: 150px;
     border-radius: 50%;
     background: #027b5e;
     height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 25px;
 }

 .img img {
     width: 100%;
 }

 .ribbon {
     position: relative;
     padding: 20px 50px 20px 80px;
     width: 100%;
     color: white;
     clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
     margin-left: -15px;
 }

 .ribbon .cta-button {
     background-color: #fff !important;
     color: #000 !important;
 }

 .ribbon h3 {
     margin: 0;
     font-size: 16px;
     font-weight: 700;
     margin: 0 0 5px;
 }

 .ribbon p {
     margin: 0 0 5px;
     font-size: 14px;
     color: #fff;
 }

 /* Colors */
 .gold .circle {
     background-color: #b09651;
 }

 .gold .ribbon {
     background-color: #d2c26a;
 }

 .silver .circle {
     background-color: #8a8a8a;
 }

 .silver .ribbon {
     background-color: #939393;
 }

 .bronze .circle {
     background-color: #9c5716;
 }

 .bronze .ribbon {
     background-color: #c1702b;
 }

 .bg-light-cu {
     background-color: #f3f3f3;
     padding: 20px;
 }

 .bg-light-cu h2 {
     font-size: 20px;
     font-weight: 800;
 }

 .card-cu {
     border: 1px solid #ddd;
     border-radius: 6px;
     padding: 15px;
     margin-bottom: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #fff;
 }

 .offer {
     width: 70%;
 }

 .offer-title {
     font-weight: bold;
     font-size: 15px;
     margin-bottom: 5px;
 }

 .offer-title.green-cus {
     color: #007e33;
 }

 .offer-title.red-cus {
     color: #cc0000;
 }

 .offer-title.orange-cus {
     color: #ff8800;
 }

 .description {
     font-size: 13px;
     color: #555;
 }

 .company {
     font-size: 12px;
     color: #888;
     margin-bottom: 5px;
 }

 .btn-custom {
     background-color: #10bcef;
     color: white;
     border: none;
     padding: 8px 12px;
     font-size: 13px;
     border-radius: 4px;
     cursor: pointer;
     white-space: nowrap;
     text-decoration: none !important;
 }

 .btn-custom:hover {
     background-color: #086b8a;
 }

 .cardh2 {
     font-size: 20px;
     font-weight: 800;
 }

 .btn-custom1 {
     background-color: #b09651;
     color: white;
     border: none;
     padding: 10px 16px;
     font-size: 16px;
     font-weight: bold;
     border-radius: 50px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     text-decoration: none;
     transition: 0.5s;
 }

 .btn-custom1:hover {
     background-color: #665525;
 }

 .bookie-logo {
     height: 31px;
     vertical-align: middle;
     border-radius: 6px;
 }

 .silver .btn-custom1 {
     background-color: #8a8a8a;
 }

 .silver .btn-custom1:hover {
     background-color: #6d6c6c;
 }

 .bronze .btn-custom1 {
     background-color: #9c5716;
 }

 .bronze .btn-custom1:hover {
     background-color: #552b03;
 }

 .para {
     width: 100%;
     float: left;
     font-size: 14px;
     text-align: center;
     font-weight: 500;
 }

 small {
     width: 100%;
     float: left;
     display: block;
     margin-top: 7px;
     font-size: 11px;
 }

 .group-cu {
     width: 100%;
     float: left;
     display: flex;
     justify-content: space-between;
     gap: 10px;
 }

 .groupbox {
     width: 49%;
     float: left;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
 }

 .groupbox:first-child {
     width: 30%;
 }

 .groupbox:last-child {
     flex: 1;
 }

 .groupbox>img {
     width: 100%;
     border-radius: 4px;
 }

 .my-flex-1 {
     flex: 1;
 }

 .border-right-cu {
     border-left: none;
     margin: 0;
     padding: 0;
     font-size: 14px;
 }

 .btn-cu {
     width: 200px;
     max-width: 100%;
     float: left;
     padding: 10px;
     font-size: 14px;
     text-align: center;
 }

 .rate {
     font-size: 20px;
     font-weight: 800;
 }

 .rate strong {
     font-size: 22px;
 }

 .bonus_txt-cu img {
     width: 100px;
     max-width: 100%;
 }

 .counter {
     width: 32px;
     height: 24px;
     color: #5d5f71;
     background-color: #ecf1f8;
     position: absolute;
     top: 10px;
     left: 10px;
     border-radius: 4px;
     font-size: 13px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* responsive */
 @media screen and (max-width: 991px) {
     .navbar-collapse.collapse:not(.show) {
         display: none;
     }

     .navbar-collapse {
         position: absolute;
         top: 80px;
         left: 0;
         background: #fff;
         width: 100%;
         z-index: 9999;
         padding: 25px;
     }

     .navbar-nav {
         gap: 5px;
     }

     .navbar-nav .nav-item .nav-link {
         padding: unset !important;
     }

     .space-divider {
         padding: 30px 20px;
     }

     .headline-title {
         font-size: 26px;
         text-align: center;
         margin: 0 0 20px;
     }

     h1 {
         font-size: 40px;
     }

     .btn-custom-bg3 {
         padding-top: 20px;
         border-top: 3px solid var(--secondary-color);
     }

     .footer_txt {
         padding-left: 10px;
     }
 }

 @media only screen and (max-width: 768px) {
     .buy-btn2 {
         padding: 10px 11px;
         background: var(--secondary-color);
         color: var(--third-color);
         box-shadow: 0 0 0 0 var(--secondary-color);
         animation: pulse-animation 1.5s infinite ease-in-out;
         font-size: 15px;
     }

     th {
         font-size: 16px;
     }

     .navbar-dark .navbar-nav .nav-link:hover {
         color: var(--main-color);
     }

     .social-menu .social-btn:hover::before {
         top: -45px;
         opacity: 1;
         left: -9px;
     }

     .compare_table .col-12 {
         border-top: 1px solid #a2a2a2;
     }

     .bonus_txt {
         border-left: 0px !important;
         border-right: 0px !important;
     }

     .my-flex-1 {
         flex: none;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 10px;
     }

     .btn-cu {
         width: 100%;
         max-width: 100%;
         float: left;
         padding: 10px 40px;
         font-size: 14px;
         text-align: center;
     }
 }

 @media (max-width: 700px) {
     .card-cu {
         flex-direction: column;
         align-items: flex-start;
     }

     .btn-custom {
         margin-top: 10px;
         width: 100%;
     }

     .ribbon {
         position: relative;
         padding: 50px 20px 20px 20px;
         width: 100%;
         color: white;
         clip-path: none;
         margin-top: -50px;
         margin-left: 0;
     }

     .badge-container {
         flex-direction: column;
         justify-content: center;
     }

     .circle {
         margin: 0;
     }

     .btn-custom1 {
         width: 100%;
         justify-content: center;
     }
 }

 .footer {
     background-color: #f3f3f3;
     padding: 20px;
     font-family: Arial, sans-serif;
     font-size: 12px;
     color: #666;
 }

 .top-section {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     flex-wrap: wrap;
     padding-bottom: 20px;
     border-bottom: 1px solid rgba(17, 17, 26, 0.1);
 }

 .top-section img {
     height: 16px;
 }

 .img1 {
     height: 22px !important;
 }

 .bottom-section {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
     gap: 30px;
     padding-top: 20px;
 }

 .bottom-section p {
     margin: 0;
     font-size: 10px;
 }

 .mayores {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .mayores img {
     width: 24px;
 }

 .medal {
     position: relative;
     width: 100%;
 }

 .medal img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .number {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 36px;
     font-weight: bold;
     color: white;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
 }

 .hover-dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
     /* perfect alignment */
 }

 /* Optional: Prevent flicker */
 .hover-dropdown .dropdown-menu {
     display: none;
 }

 h3 {
     font-size: 20px;
     margin: 0 0 20px;
     font-weight: 600;
 }

 .m0 {
     margin: 0;
 }

 .para-cu:last-child,
 .para:last-child,
 h3:last-child {
     margin: 0 !important;
 }

 .center {
     width: 100%;
     float: left;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 table {
     width: 1000px;
     max-width: 100%;
     border: 1px solid #000;
     border-collapse: collapse;
     margin-top: 10px;
 }

 tr {
     width: 100%;
     border: #000 1px solid;
 }

 td {
     width: 50%;
     padding: 10px;
     border: #000 1px solid;
     font-size: 14px;
 }

 th {
     width: 50%;
     padding: 10px;
     background-color: #000;
     color: #fff;
     border: #fff 1px solid;
     font-size: 18px;
 }

 .para-cu {
     font-size: 14px;
     margin: 0 0 20px;
 }

 .left {
     text-align: left;
 }

 .table-b {
     margin: 0 0 20px;
 }

 .h2 {
     font-size: 30px;
     font-weight: 800;
     margin: 0 0 10px;
 }