body {
    font-family: Ubuntu, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;

}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #000;
    position: auto;
    width: 90%;
    top: 0;
    z-index: 900;
}
header img {
    height: 75px;
}
nav ul {
    list-style: none;
    display: flex;
    margin: 0; /* Fix margin */
    padding: 0;
}
nav ul li {
    margin-left: 10px;
}
nav ul li a {
    color: #FFD700;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    display: block; /* Ensure links are block level elements */
    padding: 10px; /* Add padding for better clickability */
}
.section {
    padding: 40px 10px;
    text-align: center;
}
.hero {
    text-align: center;
    padding: 20px 10px;
    background: url('casino-background.jpg') no-repeat center center/cover;
}
.hero h1 {
    font-size: 3em;
    color: #FFD700;
}
.hero p {
    font-size: 1.5em;
    color: #fff;
}
.hero button {
    background-color: #8B0000;
    color: #FFD700;
    border: none;
    padding: 15px 30px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
}
.hero button a {
    text-decoration: none;
    color: #FFD700;
}

.hero2 {
    text-align: center;
    padding: 10px 30px;
    height: 560px;
  	position: center;
    /*background: url('casino-background.jpg') no-repeat center center/cover;*/
}
.hero2 h1 {
    font-size: 5em;
    color: #FFD700;
}
.hero2 p {
    font-size: 1.5em;
    color: #fff;
}
.hero2 button {
    background-color: #8B0000;
    color: #FFD700;
    border: none;
    padding: 15px 30px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
}
.hero2 button a {
    text-decoration: none;
    color: #FFD700;
}

.hero2_1 {
    text-align: center;

    height: 200px;
  	position: absolute;
  	width: 200px;
    /*background: url('casino-background.jpg') no-repeat center center/cover;*/
}
.hero3 {
    text-align: center;
    padding: 10px 30px;
    height: 560px;
  	position: static;

    /*background: url('casino-background.jpg') no-repeat center center/cover;*/
}
.features, .howitworks, .testimonials, .cta, .packages, .contact, .whatitlookslike, .machinevshuman {
    text-align: center;
    
}
.features {
    background-color: #006400;
    
}
.features h2, .howitworks h2, .testimonials h2, .cta h2, .packages h2, .disclaimer h2, .contact h2, .machinevshuman h2 {
    font-size: 2em;
    margin-bottom: 20px;
}
.features div, .howitworks div, .packages div, .contact div , .faq div , .about div, .machinevshuman div {
    margin: 1%;
    padding: 20px;
    color: #fff;
}
.faq {
    background-color: #333;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.packages {
    background-color: #333;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.packages .highlight {
    background-color: #FFD700;
    color: #000;
}
.packages .highlight button {
    background-color: #8B0000;
    color: #FFD700;
}
.packages .highlight button a {
    color: #FFD700;
}
.packages .best-value::before {
    content: "Best Value";
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FFD700;
    color: #000;
    padding: 5px 10px;
    border-radius: 0 10px 0 10px;
    
}
.packages button {
    background-color: #FFD700;
    color: #000;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
.packages button a {
    text-decoration: none;
    color: #000;
}
.testimonials {
    background-color: #8B0000;
}
.cta {
    background: url('casino-chips-cards.jpg') no-repeat center center/cover;
    padding: 25px 20px;
}
.cta button {
    background-color: #006400;
    color: #FFD700;
    border: none;
    padding: 15px 30px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
}
.cta button a {
    text-decoration: none;
    color: #FFD700;
}

.cta2 {
    background: url('casino-chips-cards.jpg') no-repeat center center/cover;
    padding: 25px 20px;
}

footer {
    background-color: #000;
    padding: 20px;
    text-align: center;
    color: #fff;
}
footer a {
    color: #FFD700;
    text-decoration: none;
    margin: 0 10px;
}
footer .social-icons {
    margin-top: 10px;
}
footer .social-icons img {
    height: 30px;
    margin: 0 5px;
}
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 5px;
}
input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
}
textarea .about {
    width: 50px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #666;
    color: #000;
}
button[type="submit"] {
    background-color: #8B0000;
    color: #FFD700;
    border: none;
    padding: 15px 30px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
}
.signup-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.signup-container h2 {
    margin-bottom: 20px;
}
.column {
    float: left;
    width: 20%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}

.columnpkg {
    float: left;
    width: 15%;
    padding: 5px;
    height: 245px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}
.columndisclaimer {
    float: absolute;
    width: 100%;
    padding: 5px;
    height: 150px;
    color: #fff; /* this was commented*/
    text-align: left;
    border-radius: 8px;
}
.columnfaq {
    float: left;
    width: 20%;
    padding: 5px;
    height: 1350px;
    color: #77f; /* this was commented*/
    border-radius: 8px;
}
.columnwhatitlookslike {
    float: left;
    width: 20%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}

.columnhowitworks {
    float: left;
    width: 20%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}
.columnabout {
    float: left;
    width: 20%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}
.columnmachinevshuman {
    float: left;
    width: 20%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* Mobile Styles */
@media (max-width: 700px) {
.row {
    flex-direction: column;
}
.column {
    width: 100%;
}
.columnwhatitlookslike {
    float: flex;
    width: 90%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}
.columnhowitworks {
    float: inherit;
    width: 90%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}
.columnmachinevshuman {
    float: inherit;
    width: 90%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}

.columnabout {
    float: inherit;
    width: 90%;
    padding: 5px;
    height: 250px;
    color: #fff; /* this was commented*/
    border-radius: 8px;
}
    .columnpkg {
        width: 90%;
        border-radius: 8px;
    }
.columnfaq {
    float: left;
    width: 100%;
    padding: 5px;
    height: 1350px;
    color: #77f; /* this was commented*/
    border-radius: 8px;
}   
    nav ul {
        display: inline;
        flex-direction: column;
        width: 100%;
    }
    nav ul.nav-open {
        display: flex;
    }
    .menu-toggle {
        display: block;
        cursor: pointer;
    }
    .bar {
        display: inline;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #fff;
    }
    .faq-container {
        width: 100%;
        height: 600px;
        margin-top: 10px;
    }

    .faq-question, .faq-answer {
        font-size: 16px;
    } 
  .faq-column {
    flex: 1;
    /*background-color: #444;  Same as your column background */
    padding: 5px;
}
    
    .sectionloggedin .row {
        flex-direction: column;
    }
    .sectionloggedin .column {
        width: 100%;
    }   

.hero {
    text-align: center;
    padding: 5px 5px;
    background: url('casino-background.jpg') no-repeat center center/cover;
}    
}






.login-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}
.login-container {
    max-width: 400px;
    width: 100%;
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.login-container h2 {
    margin-bottom: 20px;
}
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 5px;
}
input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
}
button[type="submit"] {
    background-color: #8B0000;
    color: #FFD700;
    border: none;
    padding: 15px 30px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
}
.sectionloggedin {
    padding: 70px 20px;
    text-align: center;
}

.sectionloggedin.hero {
    text-align: center;
    padding: 10px 20px;
    background: url('casino-background.jpg') no-repeat center center/cover;
    color: #FFD700;
}

.sectionloggedin .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sectionloggedin .column {
    float: left;
    width: 15%;
    padding: 10px;
    box-sizing: border-box;
}

.sectionloggedin .column a {
    color: white;
    text-decoration: none;
}

/* Mobile Styles */
@media (max-width: 760px) {
    .sectionloggedin .row {
        flex-direction: column;
    }
    .sectionloggedin .column {
        width: 100%;
    }
}


    .choices {
      display: flex;
      flex-direction: column;
      text-align: center;
      width: 100%;
    }

    .choice {
      margin: 5px;
    }

.choice a {
    display: block;
    padding: 5px 5px;
    color: #fff;
    text-decoration: none;
    border-radius: 1px;
    transition: background-color 0.3s;
}

.accessible a {
    background-color: green;
}

.restricted a {
    background-color: #343434;
}


    .choice a:hover {
      background-color: #2980b9;
    }

    .choicebuy {
      margin: 10px;
      background-color: red;
    }

    .choicebuy a {
      display: block;
      padding: 10px 20px;
      background-color: #3498db;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s;
    }

    .choicebuy a:hover {
      /*background-color: #2980b9; */
    }

/* Mobile Styles */
@media (max-width: 768px) {
    .choices .row {
        flex-direction: column;
    }
    .choices .column {
        width: 100%;
    }
    .choices {
        width: 100%;
    }
}


.signup-button {
    background-color: #8B0000;
    color: #FFD700;
    border: none;
    padding: 15px 30px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    display: block;
    width: 100%;
    text-align: center;
}

.signup-button a {
    text-decoration: none;
    color: #FFD700;
}

.access-denied-section {
    padding: 100px 20px;
    text-align: center;
    background-color: #8B0000; /* Dark red background to indicate an error or warning */
    color: #FFD700; /* Gold text color for contrast */
}

.access-denied-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #222; /* Dark background to match your theme */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.access-denied-container h2 {
    margin-bottom: 20px;
    font-size: 2em;
    color: #FFD700; /* Gold color for headings */
}

.access-denied-container p {
    font-size: 1.2em;
    color: #FFD700; /* Gold color for text */
}

.access-denied-container a {
    color: #FFD700; /* Gold color for links */
    text-decoration: none;
}

.access-denied-container a:hover {
    text-decoration: underline; /* Underline links on hover */
}
.blue {
    color: blue;
}

.black {
    color: black;
}



.video-container {
    position: relative;
    padding-bottom: 66.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 50%;
    background: #000;
    margin-top: 20px;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* soccer indexm1m2m3.php*/
        
        .container { max-width: 1200px; margin: auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; position: absolute;}
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 5px; text-align: center; border: 1px solid #ccc; }
        th { background-color: #red; }
        input { width: 85%; padding: 2.5px; margin: 2.5px 0; box-sizing: border-box; }





/* FAQ styles */
.faq-container {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    margin-top: 10px;
    color: black;  /* Update to black */
}

.faq-item {
    cursor: pointer;
    
    padding: 1px;
    margin: 1px 0;
    /*border: 1px solid #ddd;*/
    border-radius: 5px;
    color: yellow;
    font-weight: bold;
    text-align: left;
    
}

.faq-question {
    cursor: pointer;
    background-color: #FFD700;
    padding: 1px;
    margin: 1px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: black;
    font-weight: bold;
    text-align: left;
}

.faq-answer {
    display: none;
    padding: 5px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    color: black;
    text-align: left;
}

/* Buttons */
button {
    background-color: #8B0000;
    color: #FFD700;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin: 5px;
}

button a {
    color: #FFD700;
    text-decoration: none;
}

button a:hover {
    text-decoration: underline;
}



@media (max-width: 480px) {

    header img {
        height: 90px;
    }
    .faq-question, .faq-answer {
        font-size: 14px;
    } 

}


#faq .faq-question {
    color: black;  /* Set color to black only within the FAQ section */
}
#faq .faq-answer {
    color: black;  /* Set color to black only within the FAQ section */
}
#container {
  display: flex;             
  flex-direction: column;            
  flex-wrap: nowrap;             
  justify-content: space-between;
  width: 200px;
  /*background-color: lightyellow;*/
} 
#container > div {
  width: 200px;
  height: 305px;
  /*border: 2px dashed black;*/
}
#container1 > div {
  display: flex; 
  width: 150px;
  height: 300px;
  /*border: 2px dashed black;*/
}
#container2 > div {
  width: 150px;
  height: 600px;
  /*border: 2px dashed black;*/
}
#container3 > div {
  width: 450px;
  height: 200px;
  border: 2px dashed black;
}
#container4 > div {
  width: 450px;
  height: 150px;
  border: 2px dashed black;
}


/* Collapsible Container */
.collapsible-section {
    background-color: #1e1e1e;
    border-radius: 8px;
    margin: 20px 0;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.collapsible-section-inside {
    background-color: #1e1e1e;
    border-radius: 8px;
    margin: 20px 0;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
/* Header Style */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #2b2b2b;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.collapsible-header:hover {
    background-color: #343434;
}

/* Icon Style */
.collapsible-icon {
    font-size: 24px;
    color: #00ffff;
    transition: transform 0.3s ease;
}

/* Content Style */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    background-color: #1e1e1e;
    transition: max-height 0.5s ease;
    padding: 0 20px;
}

.collapsible-content p,
.collapsible-content ul,
.collapsible-content img {
    margin: 15px 0;
    color: #dcdcdc;
    line-height: 1.6;
}

/* Expanded State */
.collapsible-section.active .collapsible-content {
     max-height: 100%;  /* Adjust based on content length */
    padding: 20px;
}

.collapsible-section.active .collapsible-icon {
    transform: rotate(45deg); /* Changes '+' to 'x', can adjust as needed */
}

/* Content Style */
.collapsible-content-inside {
    max-height: 0;
    overflow: hidden;
    background-color: #1e1e1e;
    transition: max-height 0.5s ease;
    padding: 0 20px;
}

.collapsible-content-inside p,
.collapsible-content-inside ul,
.collapsible-content-inside img {
    margin: 15px 0;
    color: #dcdcdc;
    line-height: 1.6;
}

/* Expanded State */
.collapsible-content-inside {
     max-height: 100%;  /* Adjust based on content length */
    padding: 20px;
}




.containercasino {
    display: flex; 
    background-color: #111;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.containercasino h2 {
    text-align: center;
    color: #FFD700;
    margin-bottom: 20px;
}

.containercasino h3 {
    margin-top: 20px;
    color: #FFD700;
}