.custom-casino-section {
  width: 100%;
  padding: 0 20px; /* Mobile-friendly padding */
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.casino-card {
  display: flex;
  align-items: center;
  background-color: #0f4f37;
  border-radius: 10px;
  padding: 15px 20px;
  border: 2px solid white;
  margin-bottom: 15px;
  color: white;
  flex-wrap: wrap;
}

.casino-col.col-feature1.casino-info ul li {
    text-align: left;
}

/* Column widths for desktop */
.col-logo { flex: 1 1 150px; text-align: center; }
.col-offer { flex: 1 1 200px; text-align: center; }
.col-feature1 { flex: 1 1 180px; text-align: center; }
.col-feature2 { flex: 1 1 280px; text-align: center; }
.col-feature3 { flex: 1 1 150px; text-align: center; }
.col-button { flex: 0 0 auto; text-align: center; }

/* Logo styles */
.col-logo img {
  max-width:150PX;
  height: auto;
}

/* Offer styles */
.col-offer strong {
  font-size: 15px;
}
.casino-stars {
  color: #ffd84f;
  margin-top: 5px;
  font-size: 16px;
}

/* Features styles */
.casino-info {
  font-size: 13px;
  line-height: 1.4;
}
.casino-info span {
  margin-right: 5px;
}

/* Button styles */
.casino-btn {
  background-color: #e7a63a;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  transition: 0.3s;
  display: inline-block;
}
.casino-btn:hover {
  background-color: #d28d20;
}

.casino-col {
  margin-bottom: 8px;
}
.col-button {
  margin-top: 5px;
}





/*
Complain System Plugin 

*/
.ccs-complaint-form { max-width: 720px; margin: 1rem auto; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; }
.ccs-complaint-form .ccs-errors { background: #ffecec; border: 1px solid #e99; padding: .75rem; border-radius: 6px; margin-bottom: 1rem; }
.ccs-complaint-form .ccs-success { background: #eaffea; border: 1px solid #9e9; padding: .75rem; border-radius: 6px; margin-bottom: 1rem; }
.ccs-complaint-form label { display:block; margin-bottom:.25rem; }
.ccs-complaint-form input[type="text"], .ccs-complaint-form textarea, .ccs-complaint-form select { width:100%; padding:.5rem; border:1px solid #ccc; border-radius:6px; }
.ccs-complaint-form button { padding:.6rem 1rem; border:0; border-radius:6px; cursor:pointer; }



@media (max-width: 678px) {
  .casino-card {
    justify-content: center;
    align-items: center;
    display: flex;
  }
}













/* SINGLE PAGE */

.hero-banner {
  width: 100%;
  height: 400px;
  background-image: url('https://dcoders.agency/onlinecasinoemirates/wp-content/uploads/2025/08/Screenshot-2025-08-04-at-11.09.19-scaled.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop */
@media (min-width: 1024px) {
  .hero-banner {
      height: 500px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-banner {
      height: 350px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hero-banner {
      height: 250px;
      background-position: center center;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .hero-banner {
      height: 200px;
  }
}


.security-grid {
  display: flex;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      width: 100%;
      margin: 0 auto;
      /* padding: 0px 40px; */
      /* flex-wrap: wrap; */
      align-items: center;
      justify-content: space-between;
}

.security-item {
  background: rgb(255 255 255);
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 50%;
}

.security-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.item-footer{
  margin-top: 10px;
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.item-header h3
{
  margin-left: 12px;
}
.item-title {
  color: #0f4f37 !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, .3);
  text-align: center;
}

.item-content {
  color: #2C5530;
  font-size: 16px;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(255,255,255,0.2);
}

@media (max-width: 768px) {
  .security-grid{
    flex-wrap: wrap;
  }
  .security-item{
    width: 100%;
  }

}

@media (max-width: 768px) {
  .security-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .security-item {
    padding: 25px;
  }
  .item-title {
    font-size: 20px;
  }
  .item-content {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .security-item {
    padding: 20px;
  }
  
  .item-title {
    font-size: 18px;
  }
  .item-content {
    font-size: 14px;
  }

}

/* .topBarMenu .elementor-icon-list-item:nth-child(3) span {
  color: #FFFFFF !important;
  background-color: #d7a84a;
  font-size: 16px;
  font-weight: 600 !important;
  text-decoration: none;
  fill: var(--e-global-color-03e5c99);
  border-style: none;
  padding: 11px;
  border-radius: 9px !important;
} */

.tobBestCasinoHome .e-con-inner{
  justify-content: center;
}



.threeColsCasino .casino-card{
  width: 30%;
}
.threeColsCasino{
  display: flex  !important;
  width: 100%;
  gap: 20px;
  justify-content: center !important;
  flex-wrap: wrap;
}


.threeColsCasino a{
  text-decoration: none !important;
  text-align: center;
}
.casino_col_heading h3 {
    font-size: 26px !important;
    color: #d28d20;
}
.card_col_img img{
  width: 100% !important;
  max-width: 100% !important;
  padding: 20px;
}
.card_col_text{
  text-align: center;
}
.card_col_img{
  text-align: center;
 width: 100%;
}
@media (max-width:992px){
  .threeColsCasino .casino-card {
    width: 100%;
}
.card_row {
    display: flex
;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.card_col_img{
  text-align: center;
 width: 45%;
}
.card_col_img img{
  padding: 0px ;
}
.card_col_text {
 width: 50%;

}
.threeColsCasino{
  gap: 0px ;
}
.threeColsCasino .col-button{
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.threeColsCasino .casino-stars{
    margin-top: 0px !important;

}
#ccs_attachment{
  width: 100% !important;
  margin: 0 !important;
      max-width: 100%;
}
}

#ccs_casino{
  background-color: #fff !important;
}
.ccs-form input ,.ccs-form textarea{
  background-color: #fff !important;

}

.threeColsCasino .casino-btn{
  padding: 5px 12px !important; 
}





.contactForm { max-width: 720px; margin: 1rem auto; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; }
			.contactForm .ccs-errors { background: #ffecec; border: 1px solid #e99; padding: .75rem; border-radius: 6px; margin-bottom: 1rem; }
			.contactForm .ccs-success { background: #eaffea; border: 1px solid #9e9; padding: .75rem; border-radius: 6px; margin-bottom: 1rem; color: black; }
			.contactForm label { display:block; color: #fff !important;}
			.contactForm input, .contactForm textarea, .contactForm select { width:100%; padding:.5rem; border:1px solid #ccc !important; border-radius:6px; }
			.contactForm input[type="submit"] { padding:.6rem 1rem; border:0; border-radius:6px; cursor:pointer; 
      	background: linear-gradient(45deg, #FF8F00, #FFA726);
				color: white;
				box-shadow: 0 4px 15px rgba(255, 143, 0, 0.3);}
			.contactForm .btnP{text-align: center;}
			.contactForm input[type="file"] {
				display: block;
				margin: 0 auto;              /* centers the input */
				padding: .4rem;
				border: 1px solid #ccc;
				border-radius: 6px;
				background: #fff;
				cursor: pointer;
				max-width: 60%;              /* keeps it neat, not full width */
				text-align: center;
			}
			.contactForm label[for="ccs_attachment"] {
				display: block;
				text-align: center;          /* center the label as well */
				margin-bottom: 0.5rem;
				font-weight: 600;
			}
			.contactForm button:hover{
				border: none;
				color: white !important;
			}

			.btn-save {
			
			}

      .contactForm input, .contactForm textarea {
    background-color: #fff !important;
}










/* Post Cards */
/* Wrapper */
.post_card_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* space between cards */
  margin: 0 auto;
  max-width: 1200px;
  justify-content: center;
}

/* Card styles */
.post_card_wrapper .custom-post {
  background: #214C3B ;
  /* border: 1px solid #ddd; */
  /* border-radius: 8px; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(33.333% - 20px); /* Default: 3 per row */
  /* box-shadow: 0 2px 6px rgba(0,0,0,0.1); */
  transition: transform 0.3s ease;
}


.post_card_wrapper .custom-post:hover {
  transform: translateY(-5px);
}

.post_card_wrapper .post-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.post_card_wrapper .post-content {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post_card_wrapper h3 {
  font-size: 27px !important;
  margin-bottom: 16px !important;
  color: #ffc857 !important;
}

.post_card_wrapper .excerpt {
  flex-grow: 1;
  margin-bottom: 16px !important;
  color: #FFF;
  font-size: 16px;
  line-height: 1.5;
}

.post_card_wrapper .read-more {
  /* display: inline-block;
  padding: 8px 15px;
  background: #ff8f00;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
  transition: background 0.3s ease; */
  background-color: #e7a63a;
  color: #fff !important;
  text-decoration: none !important;
  padding: 5px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  transition: .3s;
  display: inline-block;
}

#load-more-posts.btn-load-more{
  background-color: #D7A84A !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-style: none !important;
}
.post_card_wrapper .read-more:hover {
  background: #e67e00;
}

/* Tablet (2 cards) */
@media (max-width: 1023px) {
  .post_card_wrapper .custom-post {
      flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 620px) {
  .custom-post{
    padding: 12px 0px;
  }
  .post_card_wrapper h3 {
    font-size: 16px !important;
  }
  .post_card_wrapper .excerpt{
    font-size: 12px;
  }
  .post_card_wrapper .read-more{
    padding: 5px 0px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
  }

}


/* Mobile (still 2 cards instead of 1) */
@media (max-width: 479px) {
  .post_card_wrapper .custom-post {
      flex: 1 1 calc(50% - 20px);
  }
}


.casino_ImgBox{
  width: 25%;
}
.casino_Title{
  width: 30%;
  text-align: start !important;
}
.casino_Rating{
  width: 20%;
}
.casino_Btn_play{
  width: 25%;
}
.casino-card{
  text-align: center;
  position: relative;
}
.casino_ImgBox img {
    width: 100px !important;
}
.casino_Btn_play .casino-btn {
    background-color: #e7a63a;
    color: #fff;
    text-decoration: none;
    padding: 12px 40px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    transition: .3s;
    display: inline-block;
    border-radius: 50px;
}
.casinoCountCircle {
    background: #e7a63a;
    color: #000;
    padding: 5px 15px;
    border-radius: 50%;
    position: absolute;
    top: -5%;
    left: -1%;
}
@media(max-width:767px){
 .casino_ImgBox{
  width: 100%;
}
.casino_Title{
  width: 30%;
  display: none;
}
.casino_Rating{
  width: 100%;
}
.casino_Btn_play{
  width: 100%;
} 
.casino_ImgBox img {
    width: 100% !important;
}
.casino_Btn_play .casino-btn {
    background-color: #e7a63a;
    color: #fff;
    text-decoration: none;
    padding: 0px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    transition: .3s;
    display: inline-block;
    border-radius: 50px;
}

a.elementor-post__read-more, .read-more-btn {
    font-size: 9px !important;
    padding: 2px 4px !important;
}
.custom-post .excerpt{
  display: none  !important;
}
.custom-post h3 {
    margin: 0 0 10px;
    font-size: 12px !important;
}

.post_card_wrapper .post-content {
    padding: 8px;
    flex-grow: 1;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
}
}


#makeOnlineCasinoContent{
  display: none;
}
#articlesNewsContent{
  display: none;
}
.show #articlesNewsContent{
  display: block !important;
}