* {
        box-sizing: border-box;
    }

    body {
        font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
        margin: 0;
    }

    .body-background{
        background-image: url("https://image.my.silhouette-group.com/lib/fe3111737364047f771779/m/1/94343524-a904-4a7f-b8a8-81bdb3fd6653.jpg");
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
    }
  
    @media (max-width: 460px) {
        .body-background{  
            background-position: 70% 100%;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
            position: fixed;
            background-color: #1e2b3c;
            overflow: scroll;

        }
        .icon{
            left: 42%!important;
        }
       .play-now{
            padding: 0px 10px;
       }
    }
  
    .logo-container {
        color:#fff;
    }

    .logo-container h1{
        margin: 0;
        padding: 0px 13px;
        text-align:center;
    }

    .logo {
        margin:auto; 
        max-width:200px;
    }

    .logo img{
        margin:20px auto; 
        max-width:200px;
    }

    .card-container {
        display: flex;
        flex-wrap: wrap;
        font-size: 30px;
        text-align: center;
        max-width:1000px;
        margin:30px auto;
    }

    .card-container div{
        padding: 10px;
        flex: 16.6%;
        box-sizing:border-box;
    }

    /* Responsive layout - makes a one column-layout instead of two-column layout */
    @media (max-width: 800px) {
        .card-container div{
            flex: 30%;
        }
    }

    @media (max-width: 460px) {
        .card-container div{
            flex: 50%;
        }
    }

    @media (max-width: 320px) {
        .card-container div{
            flex: 100%;
        }

    }

    .door {
        width: 100%;
        height: 140px;
        border: solid 1px #fff;
        display: inline-block;
        position:relative;
        transform-origin: left center; /* Set the origin to the left center for opening effect */
        font-weight: 700;
    }

    .door:hover {
        transform: translateX(10px);
    }

    .door.open {
        transform: rotateY(55deg); /* Open towards the viewer */
        box-shadow: 10px 0 15px rgba(0, 0, 0, 0.5);
        z-index: 1; /* Ensure the opened door is above others */
    }

    .play-now { 
        margin: 60px auto;
    }

    .play-now h1{
        text-align:center;
        color:#fff;
        font-size: 24px;
        font-weight: 100;
        line-height: 35px;
        max-width: 800px;
        margin: auto;
    }

    .modal.active {
        display: flex;
    }

    /* Style for the modal */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index:1000;
        padding:0px;
    }

    /* Style for the modal content */
    .main-modal-content {
        background-color: #fff;
        padding: 20px;
        width: 80%;
        max-width: 800px; /* Max width for larger screens */
        max-height: 80%;   /* Allow height to adjust based on content */
        border-radius: 0px; /* Optional: add rounded corners */
        display: flex;
        flex-direction: column; /* Stack content vertically */
        justify-content: center; /* Center items vertically */
        align-items: center; /* Center items horizontally */
        margin: 20px; /* Add equal margin around the modal content */
        overflow-y: auto;   
        position: relative;
        overflow-x: hidden;
    }
    .close-button {
        position: absolute;
        top: -11px;
        right: 0px;
        cursor: pointer;
        font-size: xx-large;
        color: #000; 
        padding: 2px 15px; 
        border: none; 
    }

    #doorTitle {
        position:relative;
        width: 100%;
        font-weight: 700;
    }

    .close {
        cursor: pointer;
        float: right;
    }
    
    #innerModalContent{
        width: 100%;
        display:flex;
        flex-direction:column;
        align-items: center; 
        overflow-y: auto;
    }
    
    .number{
        color: #fff;
        padding: 0px !important;
        position:absolute;
    }

    .italic-number {
        font-style: italic;
    }

    .font-18 {
        font-size: 42px;
    }

    .font-14 {
        font-size: 28px;
    }

    .one-number{bottom: 10px;left: 10px;}

    .two-number{bottom: 88px;right: 114px;}

    .three-number{bottom: 10px;left: 10px;}

    .four-number{top: 49px;right: 62px;}

    .five-number{top: 76px;left: 115px;}

    .six-number{top: 10px;right: 10px;}

    .seven-number{bottom: 47px;left: 64px;}

    .eight-number{bottom: 56px;right: 62px;}

    .nine-number{bottom: 92px;left: 13px;}

    .ten-number{top: 10px;left: 10px;}

    .eleven-number{bottom: 54px;right: 58px;}

    .twelve-number{bottom: 10px;right: 10px;}

    .thirteen-number{    top: 10px;right: 97px;}

    .fourteen-number{top: 10px;right: 10px;}

    .fifteen-number{top: 10px;left: 10px;}


    .sixteen-number{top: 93px;left: 102px;}

    .seventeen-number{top: 10px;left: 10px;}

    .eighteen-number{bottom: 10px;right: 10px;}

    .nineteen-number{top: 10px;left: 10px;}

    .twenty-number{top: 10px;left: 10px;}

    .twenty-one-number{top: 86px;right: 10px;}

    .twenty-two-number{top: 81px;right: 96px;}

    .twenty-three-number{top: 51px;left: 58px;}

    .twenty-four-number{top: 10px;right: 10px;}

    .flex-container-horizontal-line{
        display: flex;
        flex-wrap: wrap;
        font-size: 30px;
        text-align: center;
        max-width:1000px;
        margin:auto;
        margin-top: 50px;
    }

    .hr-line {
        border: none; 
        border-top: 1px solid white; 
        width: 100%;
    }
    
    .newsletter-container {
        max-width: 400px;
        margin: auto;
    }

    .newsletter-left {
        padding: 10px;
        flex: 70%;
    }

    .newsletter-right {
        padding: 10px;
        flex: 30%;
    }
    .newsletter-heading-div{
        text-align: center;
    }

    .newsletter-h1 {
        color: #000000;
        font-size: 32px;
        font-weight: 400;
        margin-top: 40px;
        display: inline-flex;
    }

    .input-button-container {
        position: relative; /* Make this the positioning context */
        margin-bottom: 10px; /* Space between input and button */
        display: flex;
    }

    input[type="text"] {
        width: 100%; /* Full width for better appearance */
        border: none;
        border-bottom: 1px solid #000; /* Only show the bottom border */
        outline: none;
        padding: 12px 0;
        transition: border-color 0.3s;
        background: none;
        color: black;
        font-size: 22px;
        text-align: center;
        font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
        font-weight: 100;
    }


    #registerButton {
        background: #f4f4f4;;
        border: 1px solid #000;
        color: black;
        cursor: pointer;
        display: inline-block;
        font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
        font-weight: 700;
        line-height: 1.6em;
        overflow: hidden;
        padding: .5rem 1.6rem;
        position: relative;
        transition: all .18s ease-in;
        z-index: 1;
        width: 80%;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #registerButton:hover {
        background: #000;
        border: 1px solid #000;
        color: #fff;
    }

    .newsletter-wrap{
        background-color: #f4f4f4;
        text-align: center;
        max-width:1000px;
        max-width: 980px;
        margin: auto;
        padding-bottom: 20px;
        position: relative;
    }

    .icon{
        position: absolute;
        text-align: center;
        margin: auto;
        top: -30px;
        width: 60px;
        left: 47%;
    }

    #ITLeagalText{
        margin: 0px auto;
    }

    #ITLeagalText h1{
        text-align: center;
        color: #fff;
        font-size: 7px;
        font-weight: 100;
        line-height: 13px;
        max-width: 800px;
        margin: auto;

    }

@media (max-width: 600px) {

.close-button {
    position: absolute;
    top: 0px;
  }

 .main-modal-content {
  max-height:96%!important;
  margin: 0px!important;
}

/*Added as a part of DBUSF-633*/
.retailer-search-close-button{
   position: absolute;
   top: 5px;
}

.retailer-iframe-modal-content{
  padding: 0px;
  width: 100%!important;
  height: 100%!important;
}

}



.retailerSearchIframeModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index:1000;
  padding:0px;
}

/* Style for the modal content */
.retailer-iframe-modal-content {
  background-color: #fff;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  height: 80%;
  overflow: hidden; /* Add this to prevent scrollbars */
  position: relative;
  flex: unset !important;
}

.retailer-search-close-button {
  position: absolute;
  top: -8px;
  right: 38px;
  cursor: pointer;
  font-size: xx-large;
}