﻿
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

	a {
		color: #b3b3b3;
		font-size: 14px;
		text-decoration: none;
	}

		a:hover {
				color: #dfdfdf;
			}

    .signUpT{
				color: #fee37d;
				}

    body {
      background: linear-gradient(145deg, #0b101a 0%, #0f1522 100%);
      font-family: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      /* padding: 2rem 1.5rem; */
      color: #eef2ff;
      animation: fadeInAnimation ease 3s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

      .h3, h3 {
        font-size: 24px;
    }

    p {
        font-size: 14px;
    }

    .grey{
        font-size: 12px;
        color: #b3b3b3;
    }
    

    .links{
        color: #57bcff;
        cursor: pointer;
    }

    .tcLogo{
      max-width: 195px;
      max-height: 65px;
    }

    .casino-name-row .tcLogo{
      max-width: 150px;
      max-height: 58px;
    }


    .navbar {
        padding: 10px;
        background: linear-gradient(145deg, #00a3f0 0%, #1b3d95 100%);
        color:#fff;
        border-bottom: 1px solid rgb(255 255 255 / 28%);
        position: fixed;
        z-index: 999;
        width: 100%;
    }

    .nav-item a{
        color:#fff;
    }

    .nav-item a:hover {
        color:#7cfffb;
    }

    .nav-item a:active,
    .nav-item a:focus,
    .nav-item a:focus-within,
    .nav-item a:focus-visible,
    .nav-item a:checked,
    .nav-item a:root,
    .nav-item a:target {
        color:#a5fff4;
    }


    .pagination {
      cursor:pointer;
    }
    
    .dropdown-menu{
        background: linear-gradient(145deg, #0b0e1a 0%, #0f1322 100%);
      }

    /* main container – matches image width and spacing */
    .container {
      max-width: 1280px;
      margin: 0 auto;
    }

    /* ========== HEADER / "TOP 3 FEATURED GRID" ========== */
    .section-title {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.3px;
      background: linear-gradient(135deg, #FFFFFF 0%, #C0C7E0 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-block: 1.5rem;
      border-left: 5px solid #03a9f4;
      padding-left: 1rem;
    }

    /* featured 3-column grid */
    .featured-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1.8rem;
      margin-bottom: 3.5rem;
      justify-content: center;
    }

    /* unified t3Card style */
    .t3Card {
      background: rgba(18, 22, 40, 0.85);
      backdrop-filter: blur(0px);
      border-radius: 32px;
      border: 1px solid rgba(72, 85, 130, 0.4);
      box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transition: all 0.2s ease;
      padding: 18px 25px 18px;
      flex: 1;
      display: flex;
      min-width: 260px;
      background: linear-gradient(145deg, #10172b, #0c1522);
      flex-direction: column;
      justify-content: space-evenly;
    }

    .t3Card:hover {
      transform: translateY(-4px);
      border-color: #8fd9ff69;
      box-shadow: 0 28px 40px -14px black;
    }

    
    .subBox .btn-claim{
      max-width: 300px;
    }

    /* casino name + stars row */
    .casino-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }

    .casino-name {
      font-size: 1.65rem;
      font-weight: 800;
      background: linear-gradient(115deg, #FFF, #C0CCF5);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -0.3px;
    }

    .stars {
      color: #FFD966;
      font-weight: 600;
      font-size: 1rem;
      background: rgba(0, 0, 0, 0.4);
      padding: 0.2rem 0.6rem;
      border-radius: 40px;
      backdrop-filter: blur(2px);
    }

    /* offer highlight */
    .offer-big {
      margin: 1rem 0 0.75rem;
    }

    .main-bonus {
      font-size: 2rem;
      font-weight: 800;
      line-height: 1.2;
      background: linear-gradient(125deg, #fee475, #eba639);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .sub-bonus {
      font-size: 1rem;
      color: #a4b0e0;
      font-weight: 500;
      margin-top: 6px;
    }

    .badge-light {
      background: rgba(245, 176, 66, 0.18);
      border-radius: 40px;
      padding: 0.2rem 0.8rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: #ffcd7e;
      display: inline-block;
      margin-top: 8px;
    }

    /* double CTA row as in image: "CLAIM BONUS" + "CLICK TO CLAIM" */
    .cta-double {
      display: flex;
      gap: 5px;
      margin-top: 12px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: end;
    }

    .btn-claim {
      background: linear-gradient(95deg, #03a9f4, #2196f3);
      border: none;
      font-weight: 800;
      padding: 10px 30px;
      border-radius: 44px;
      color: #ffffff;
      font-size: 15px;
      max-width: 210px;
      width: fit-content;
      cursor: pointer;
      transition: 0.15s;
      box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.5);
      flex: 1;
      text-align: center;
      font-family: inherit;
      text-decoration: none;
    }

    .btn-click {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid #8fd9ff69;
      font-weight: 600;
      padding: 0.65rem 1rem;
      border-radius: 44px;
      color: #ffffff;
      font-size: 15px;
      cursor: pointer;
      transition: 0.15s;
      flex: 1;
      text-align: center;
      font-family: inherit;
    }

    .btn-claim:hover,
    .btn-click:hover {
      filter: brightness(1.05);
      transform: scale(0.97);
    }

    /* ========== ALL TOP DEPOSIT BONUS OFFERS (list style) ========== */
    .all-offers-title {
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: -2.2px;
      background: linear-gradient(40deg, #FFFFFF 0%, #8ae7ff 70%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin: 2.5rem 0 1.8rem 0;
      border-left: 5px solid #03a9f4;
      padding-left: 1rem;
    }

    /* offer rows container */
    .offers-list {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    /* each offer item -> exactly like image: left area + right CTA */
    .offer-row {
      background: rgba(14, 18, 35, 0.75);
      backdrop-filter: blur(2px);
      border-radius: 28px;
      border: 1px solid rgba(80, 95, 145, 0.35);
      padding: 1.1rem 1.5rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      transition: all 0.2s;
    }

    .offer-row:hover {
      background: rgba(22, 28, 52, 0.9);
      border-color: #03a9f4 66;
    }

    .offer-info {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      flex: 3;
    }

    .casino-name-row {
      font-weight: 800;
      font-size: 1.35rem;
      min-width: 150px;
      margin: 0;
      color: #F2F4FF;
      letter-spacing: -0.2px;
    }

    .stars-row {
      color: #FFCF6E;
      font-weight: 600;
      background: #1e2340;
      padding: 0.2rem 0.7rem;
      border-radius: 50px;
      font-size: 0.85rem;
    }

    .offer-desc {
      font-weight: 600;
      color: #CCD6FF;
      font-size: 18px;
      background: rgba(0, 0, 0, 0.25);
      padding: 2px 20px;
      border-radius: 15px;
      text-shadow: 1px 2px black;
      max-width: 35ch;
    }

    .extra-details {
      font-size: 14px;
      color: #8D9AE0;
      margin-top: 2px;
      display: block;
      letter-spacing: -0.2px;
    }

    .code-block {
      background: #20243d;
      border-radius: 40px;
      padding: 4px 10px;
      /* font-family: monospace; */
      font-weight: 600;
      font-size: 12px;
      color: #FFD966;
      border: 1px solid #03a9f4 40;
      display: inline-block;
    }

    .offer-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: flex-end;
      min-width: 160px;
    }

    .play-now-btn {
      background: linear-gradient(105deg, #2d3458, #1b2040);
      border: none;
      padding: 0.6rem 1.4rem;
      border-radius: 40px;
      font-weight: 700;
      color: #ffffff;
      cursor: pointer;
      transition: 0.1s;
      font-size: 16px;
      font-family: inherit;
      text-decoration:none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }

    .play-now-btn:hover {
      background: linear-gradient(105deg, #3d4670, #2a2f54);
      color: #FFF2DF;
      transform:scale(0.9);
    }

    .dropdown-item:focus, .dropdown-item:hover{
      background: #7c9da552;
    }

    .inline-code {
      /* font-family: monospace; */
      /* font-weight: bold; */
      background: #060814;
      padding: 5px 10px;
      margin: 0px 5px 0;
      border-radius: 30px;
      font-size: 12px;
      color: #fed076;
    }

    .reviewLinks {
      /* font-family: monospace; */
      /* font-weight: bold; */
      background: #060814;
      border-radius: 30px;
      font-size: 12px;
      color: #87dbff;
    }


    .reviewLinks:hover,.reviewLinks:active,.reviewLinks:visited {
      /* font-family: monospace; */
      /* font-weight: bold; */
      background: #87dbff;
      color: #020511;
    }


    /* special nuance : wagering line was repeated in platinum reels image? I match text exactly */
    .wagering-note {
      font-size: 0.7rem;
      color: #9aa8e6;
      letter-spacing: -0.2px;
      background: #00000030;
      border-radius: 14px;
      padding: 0.1rem 0.6rem;
      margin-left: 0.5rem;
    }


    .mailSubsForm{
      max-width: 375px;
      width: 100%;
      gap:5px;
      justify-content: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    input{
      border-radius: 999px;
      width: 100%;
    }

    /* .mailSubText{
      
    } */

    .subBox{
      width:fit-content;
      max-width:700px;
    }
    
footer {
    background-color: #12002d;
    border-top: 2px solid #ffffff;
    padding: 15px 0 15px;
    position: relative;
    z-index: 999;
}

.footPosition{
    width:fit-content;
    display:inline-flex;
}

    footer .footer-links ul li a {
        font-size: 12px;
        color: #9ae4ff;
    }

        footer .footer-links ul li a:hover {
            color: #9ae4ff;
            text-decoration: underline;
        }

    .footer-icons img {
        max-height: 24px;
        padding-inline: 0px;
        margin: 0 auto;
        margin-block: 4px;
    }

    .crypto-icons img {
        max-height: 28px!important;
        padding-inline: 4px;
        margin: 0 auto;
        margin-block: 4px;
        display: inline;
    }

    .footer-icons {
        text-align: center;
        margin: 0 auto;
        filter:grayscale(1);
        /* border-top: 1px solid rgba(80, 95, 145, 0.35); */
        width: fit-content;
    }

    .footer-content{
      width:fit-content;
    }


    /* Logo block */

.swiper-vertical {
    .swiper-button-prev, ~.swiper-button-prev {
        bottom: auto;
        top: var(--swiper-navigation-sides-offset, -7px);
    }
}

.swiper-vertical {
    .swiper-button-next, ~.swiper-button-next {
        bottom: var(--swiper-navigation-sides-offset, -12px);
        top: auto;
    }
}


.swiper-button-next, .swiper-button-prev {
    svg {
        height: 70%;
    }
}



.swiper-button-prev {
	top: var(--swiper-navigation-sides-offset, -9px);
	color: #82b8df;
}

.swiper-button-next {
	bottom: var(--swiper-navigation-sides-offset, -11px);
	color: #82b8df;
}

.swiper-pagination-bullet-active {
	background: #82b8df;
	opacity: var(--swiper-pagination-bullet-opacity, 1);
}

#sHomePagePromos {
	position: absolute;
	top: 75px;
}


.swiper-wrapper {
	/* height: 300px; */
	border-radius: 20px;
	padding: 0;
}

.swiper-vertical {
	touch-action: pan-x;
}

.swiper {
	width: 92%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	overflow: clip;
	list-style: none;
	z-index: 1;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	/* background: #444; */
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}



.swiper-slide img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* Only the active slide is fully bright */
.swiper-slide-active {
	opacity: 1;
}


/* Ensure your actual content is above the overlay */
.swiper-slide-content {
	position: relative;
	z-index: 2;
	/* Add your content styles here */
}

.mySwiper{
	    background-color: #0f1525;
	    mask-image: linear-gradient(90deg, rgba(25, 22, 41, 0) 0%, #161b29 8%, #161d29 90%, rgba(25, 22, 41, 0) 100%);
	    border-radius: 28px;
	    border: 1px solid rgba(72, 85, 130, 0.4);
}

.mySwiper img{
	height: 26px;
	margin-block: 14px;
	width: fit-content;
}

.logo-nav {
    display: block;
    width: 226px;
    height: 70px;
    position: absolute;
    top: 35px;
    left: 10px;
    text-align: left;
    cursor: pointer;
    /* opacity: 0; */
    z-index: 2;
}

.popCard {
    background: rgba(18, 22, 40, 0.85);
    color: #CCD6FF;
    backdrop-filter: blur(0px);
    border-radius: 32px;
    border: 1px solid rgba(72, 85, 130, 0.4);
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    padding: 18px 25px 18px;
    flex: 1;
    display: flex;
    min-width: 260px;
    background: linear-gradient(145deg, #10172b, #0c1522);
    flex-direction: column;
    justify-content: space-evenly;
}

    /* responsive */
    @media (max-width: 900px) {
      body {
        padding: 0;
      }

      .offer-info {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0rem;
      }

      .offer-row {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 10px;
      }

      .offer-actions {
        justify-content: end;
        margin-top: 0.8rem;
      }

      .featured-grid {
        gap: 1.2rem;
      }

      .main-bonus {
        font-size: 1.6rem;
      }
    }

    @media (max-width: 550px) {

		.offer-desc {
		    font-size: 18px;
		    max-width: 35ch;
		}

    .casino-name-row {
      margin: 5px 0px 0px 10px;
    }

    .stars-row {
      right: 10px;
      position: absolute;
    }

      .offer-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0rem;
    }

      .tcLogo {
          max-width: 125px;
      }
      .cta-double {
        /* flex-direction: column; */
        margin-top: 0px;
        width: 100%;
        justify-content: center;
        gap: 4px;
      }

      .section-title {
        font-size: 20px;
      }

      .all-offers-title {
        font-size: 20px;
      }

      .btn-claim {
        font-size: 15px;
        padding: 10px 18px;
      }

    .btn-click {
      padding: 0.65rem 0rem;
      font-size: 14px;
    }

        .h3, h3 {
        font-size: 18px;
    }

      .t3Card {
        text-align: center;
      }

      .casino-header {
        justify-content: center;
        gap: 0.6rem;
        margin-bottom: 0;
      }


      .subBox {
        max-width: 100%;
      }

      .mailSubsForm {
        max-width: 100%;
        width: 100%;
        gap: 5px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}



    @media (max-width: 550px) {

      a {
          font-size: 12px;
      }
  }

    /* extra spark to match 4.9 / stars precision */
    .star-filled {
      display: inline-block;
    }

    hr {
      display: none;
    }

.custom-loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #009feb 94%, #0000) top / 8px 8px no-repeat, conic-gradient(#0000 30%, #009feb);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:s3 1s infinite linear;
}

@keyframes s3{ 
  100%{transform: rotate(1turn)}
}
    
	.page-link,
	.page-link::selection,
    .page-link:focus,
    .page-link:focus-within,
    .page-link:focus-visible,
    .page-link:checked,
    .page-link:root,
    .page-link:target{
      background-color: #949494;
      font-weight:bold;
      color: #0f0f1c;
}

.page-link:active, .page-link:visited,
.active>.page-link, .page-link.active {
      background-color: #03a9f4;
      border: 1px solid #03a9f4;
}


.page-link:hover{
      color: #03a9f4;
      background-color: #ffffff;
}


.custom-tooltip {
  --bs-tooltip-bg: #03a9f4;
  --bs-tooltip-color: white;
}

    ::-webkit-scrollbar {
      width: 12px;
      height: 3px;
      border-left: 1px solid #03a9f4;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #03a9f4;
    }
