html,body {
  height: 100%;
  width: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  min-height: 812px;
  margin:0;
}
body {
  background-color: #f8f9fc;
  font-family: 'Open Sans', Arial, sans-serif;
  display: grid;
}
a {
  text-decoration: none;
  color:#7280bb;
  transition: all 0.8s ease;
}

a:hover {
  color: white;
}

.flag {
  position: absolute;
  right: 5px;

  width: 35px;
  height: 20px;
}

#tc {
  color: white;
  font-size: 12px;
  text-decoration: underline;
  font-weight: 100;
  margin-top: 15px;
}

.header-block {
  display: grid;
  /* width: 100%; */
  margin: 10px 0 0 0;
  padding: 10px 5px 10px 5px;
  background-color: #29335c;
  background-image: url(/img/bg11.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, .5);
}

.header-block h1, h2 {
  margin-top: 0;
  margin-bottom: 5px;
}

.header-block h1 {
  font-size: 24px;
}

.header-block h1 span {
  color: #f8cd4f;
}

.header-block h2 {
  font-size: 16px;
}

.header-block p {
  font-size: 16px;
  line-height: 26px;
}

.header-block i {
  display: block;
  text-align: right;
  font-size: 14px;
}

.header-block a {
  margin: 0 10px;
  color: #fff;
  text-decoration: underline;
}

.header-block span {
  display: inline-block;
  padding: 0 20px 0 0;
}

.header-block svg {
  float: left;
  fill: #fff;
  display: block;
  margin-right: .5rem;
  width: 20px;
}

.contentsection {
  display: grid;
  margin: 10px 10px 0px 10px;
}

#popmenu {
  display: none;
}
/* popup */

.trow {
  margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.menubtn {
  background-color: #42aa8b;
    height: 55px;
    width: 250px;
    display: grid;
    justify-content: center;
    align-content: center;
    color: white;
    border-radius: 30px;
    font-weight: 700;
}

.menubtn:hover {
background-color: #51d6ae;
}

.navbtns {
  display: flex;
    position: absolute;
    justify-self: end;
    margin: 10px 25px 0px 0px;
}

#sbtn {
  background-color: #42aa8b;
  height: 40px;
  color: white;
  width: 106px;
  margin-right: 10px;
  border-radius: 20px;
  display: grid;
  justify-content: center;
  align-content: center;
  font-size: 14px;
  font-weight: 900;
}

#sbtn:hover {
background-color: #55c091;
}

#lbtn {
border-radius: 20px;
border: 3px solid #42aa8b;
height: 34px;
color: #42aa8b;
width: 100px;
display: grid;
justify-content: center;
align-content: center;
font-size: 14px;
font-weight: 900;
}

#lbtn:hover {
border: 3px solid #55c091;
}

.outline {
  background-color: white!important;
  border: 3px solid #42aa8b;
  color: #42aa8b;
      margin: -40px 0px;
}

.outline:hover {
  border: 3px solid #51d6ae;
  color: #51d6ae;
}

#xclose {
  font-size: 20px;
    font-weight: 900;
    color: #29335c;
        margin-right: -80px;
}

#xclose:hover {
  color: #29335c;
}

.topmenu {
  background-color: white;
    height: 275px;
    display: grid;
    justify-content: center;
}

#logom {
  width: 40px;
}

.menulink {
  display: flex;
    margin: 30px 40px;
    align-items: center;
}

.menulink a {
  color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    margin-left: 15px;
}
#promo {
  background-image: url(../img/promo.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}

#all {
  background-image: url(../img/all.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}

#hot {
  background-image: url(../img/hot.png);
  background-size: 100%;
height: 45px;
width: 45px;
border-radius: 20px;
background-repeat: no-repeat;
background-position: 2px 0px;
background-color: #283b6a;
}

#slotside {
  background-image: url(../img/slotside.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}

#cs {
  background-image: url(../img/cs.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}
.pop-up-container {
  display: block;
  z-index: 2000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(8px);
  background: #11234b99;
}

.pop-up-container form {
  position: relative;
  width: 325px;
  height: 100%;
  background-color: #29335c;
  box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.2);
  border: solid #3a3939 2px;
  color: #eee;
  font-size: 14px;
  border-radius: 8px;
}

.pop-up-container h4 {
  margin-top: 0;
  margin-bottom: 20px;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, .5);
  font-size: 24px;
  color: #eee;
}

.pop-up-container p {
  margin-bottom: 20px;
  font-size: 16px;
}

.pop-up-button  {
  cursor: pointer;
  width: 45%;
  display: inline-block;
  padding: 15px 30px 15px 30px;
  background: #8e948c;
  border: solid #3a3939 1px;
  border-radius: 8px;
  font-size: 16px;
  color: #2f312d!important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.2);
}

.pop-up-button:hover {
  background: #8cbb7c;
  color: #bbbaba!important;
  text-decoration: none;
}

/* popup */


ul,li {
  list-style-type: none;
}

ul {
  display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}
.registration {
  display: grid;
    background-color: #29335c;
    height: 100%;
    z-index: 33;
    color: white;
    align-content: baseline;
}

#registration-form {
  margin: -5px 0px 0px 0px;
}

.row {
  display: flex;
  margin-top: 39px;
}

.row a {
  margin: 10px;
}
.navsection {
  display: grid;
  align-content: baseline;
    width: 100%;
justify-self: center;
}
.regnav {
  width: 100%;
  display: grid;
  justify-items: center;
  background-color: white;
  height: 100px;
  align-content: center;
}


.splshbtn {
  background-color: #3ba080;
    width: 200px;
    height: 50px;
    color: white;
    display: grid;
    justify-content: center;
    align-content: center;
    font-weight: 900;
    border-radius: 22px;
}
#login {
border: 3px solid white;
color: #ffffff;
background-color: #00000040;
text-shadow: none;
width: 274px;
height: 50px;
display: grid;
font-weight: 900;
font-size: 14px;
justify-content: center;
align-content: center;
border-radius: 26px;
transition: all 0.8s ease;
box-shadow: 1px 2px 4px #0000007a;
}

#login:hover {
  color: #3ba080;
}

.navrow {
  display: grid;
      width: 100%;
      background-color: #fff;

      /* position: fixed; */
      top: 0;
      z-index: 333;
}

.navboxa {
  width: 44%;
    display: grid;
    justify-content: left;
    align-self: center;
}

.navboxb {
  width: 50%;
display: grid;
justify-content: left;
align-self: center;
}

.navrow1 a {
color: #082b54;
font-size: 18px;
font-weight: 900;
transition: all 0.8s ease;
}

.navrow1 a:hover {
color: #082b547a;
font-size: 18px;
font-weight: 900;
}

.Gnav {
  display: flex;
width: 100%;
align-items: center;
}

.gamescta {
  width: 200px;
    height: 40px;
    display: grid;
    border-radius: 6px;
    justify-content: center;
    background-color: #29335c;
    color: white;
    align-content: center;
}

.spacenav {
  width: 50%;
}

#menupic {
  width: 40px;
  height: 40px;
  margin-left: 25px;
  background-image: url(../img/mobile.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  align-self: center;
}
#mob {
  display: none;
}
.openact {
  background-color: white;
  display: grid;
  justify-content: center;
  align-content: center;
}
.icon {
  width: 68px;
    height: 68px;
    border: 2px solid #29335c;
    display: grid;
    justify-items: center;
    align-content: space-evenly;
    border-radius: 56px;
    transition: all 0.8s ease;
    font-size: 12px;
    color: #29335c;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.icon:hover {

  background-color: #29335c;
}

#i1  {
  transition: all 0.8s ease;
background-image: url(../img/slot.png);
}

#i2  {
  transition: all 0.8s ease;
background-image: url(../img/live.png);
}

#i3  {
  transition: all 0.8s ease;
  background-image: url(../img/jackpot.png);
}

#i4  {
  transition: all 0.8s ease;
background-image: url(../img/table.png);
}

#i5  {
  transition: all 0.8s ease;
  background-image: url(../img/allgames.png);
}

#i1:hover   {
background-image: url(../img/slotw.png);
}

#i2:hover   {
background-image: url(../img/livew.png);
}

#i3:hover   {
  background-image: url(../img/jackpotw.png);
}

#i4:hover   {
background-image: url(../img/tablew.png);
}

#i5:hover  {
  background-image: url(../img/allgamesw.png);
}

.space {
  width: 10%;
}

.signact {
  border: 2px solid white;
      color: white;
      border-radius: 4px;
      height: 30px;
      font-size: 12px;
      display: grid;
      width: 80px;
      align-content: center;
      justify-content: center;
}

.openact {
  background-color: white;
      display: grid;
      justify-content: center;
      align-content: center;
      color: #f74d07;
      border-radius: 4px;
      height: 40px;
      width: 125px;
      font-size: 12px;

}

.iconrow {
  display: flex;
width: 90%;
justify-content: space-evenly;
justify-self: center;
margin-top: 25px;
align-items: center;
}



.iconarea {
  display: grid;
justify-items: center;
    margin: 0px 20px;
}

.iconarea p {
  color: #29335c;
  font-weight: 900;
  font-size: 14px;
}

#mobilemenu {
  color: white;
  display: none;
}
.inputtop {
      background-color: #9999995e;
      border: none;
      border-radius: 4px;
      /* box-shadow: 2px 2px 2px #0000002e inset; */
      height: 30px;
}


#logo {
  width: 140px;
    height: 60px;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    justify-self: center;
}
.headicns {
  display: none;
}
.whitemenu {
display: flex;
    height: 50px;
    background-color: white;
    font-size: 15px;
    justify-content: space-around;
    align-items: center;
    width: 85%;
    justify-self: center;
}

.whitemenu a {
  color: #8a8a8a;
}

.whitemenu a:hover {
  color: #f74d07;
}

#bgheaderslider {
display: grid;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 680px;
position: relative;
width: 100%;
justify-self: center;
}

.ctasection {
  display: grid;
  justify-content: center;
  align-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: initial;
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-shadow: 0px 0px 8px #0000007a;
  justify-self: left;
}

#one.ctasection {
  background-image: url(../img/bg.jpg);
}

#two.ctasection {
  background-image: url(../img/bg22.png);
}

#three.ctasection {
  background-image: url(../img/bg33.png);
}

#four.ctasection {
  background-image: url(../img/bg11.png);
}


.ctaarea {
  text-align: center;
display: grid;
justify-items: center;
margin-top: 40px;
}

.ctaarea span{
  color: grey;
    text-decoration: underline;
    font-size: 12px;
}

.ctaarea h1 {
  font-size: 70px;
    margin: 0;
    font-weight: 800;
    line-height: 70px;
    margin-top: 30px;
}

.ctaarea h3 {
  font-size: 22px;
      line-height: 26px;
      margin-bottom: 0;
      margin-top: 6px;
      font-weight: 800;
}

.ctabutton {
  width: 280px;
    height: 55px;
    display: grid;
    color: white;
    font-weight: 700;
    background-color: #43aa8b;
    justify-content: center;
    align-content: center;
    border-radius: 26px;
    text-shadow: none;
    transition: all 0.8s ease;
    box-shadow: 1px 2px 4px #0000007a;
    font-size: 14px;
}

.ctabutton:hover {
  background-color: #48bb97;
  box-shadow: 1px 2px 4px #00000000;
}

.gamesection {
  display: grid;
background-color: #f1f4f9;
width: 100%;
justify-self: center;

}

.gamesection1 {
  display: grid;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    justify-self: center;
    width: 100%;
    align-content: space-around;
    justify-content: center;
}
.gamesection2 {
  display: grid;
    background-image: url(../img/bg6.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 75%;
    width: 90%;
    justify-self: center;
    text-align: center;
    margin-bottom: 100px;
    height: 600px;
    color: white;
    align-content: center;
    justify-items: center;
}

.gamesection2 a {
  justify-self: center;
      margin-bottom: 20px;
      color: white;
      font-size: 30px;
}
.gamesection2 h1 {
  margin: 0;
}

#gsearch {

  width: 70%;
  justify-self: center;
  height: 55px;
  background-color: #e4e7e9;
  border-radius: 40px;
  background: #e4e7e9;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  text-align: center;
}

::-webkit-input-placeholder {
  color: #29335c;
  font-size: 14px;
}

:-ms-input-placeholder {
  color: #29335c;
  font-size: 14px;
}

::placeholder {
  color: #29335c;
  font-size: 14px;
}

.title {
  display: flex;
    align-items: center;
    margin: 20px 0px -30px 60px;
}

.title img {
  width: 35px;
    height: 35px;
    margin: 0px 10px 0px;
    border: 2px solid #29335c;
    border-radius: 70px;
}
.moregames {
  margin-left: 50%;
    display: grid;
    border: solid 3px #8891a5;
    padding: 14px;
    border-radius: 34px;
    font-weight: 900;
    color: #29335c;
    font-size: 15px;
    display: none;
}
/*form styles*/
#msform {
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
  z-index: 333;
}
#msform fieldset {
  background: #252d52;
    border: 0 none;
    border-radius: 3px;
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 10%;
    position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
/*inputs*/
#msform input, #msform textarea {
  padding: 15px;
    border: 1px solid #ccc;
    border-radius: 28px;
    margin-bottom: 10px;
    height: 60px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #fff;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}


.writtencontent {
  background-color: #f8f9fc;
    display: grid;
    width: 65%;
    color: #29335c;
    justify-self: center;
    margin-bottom: 100px;
    margin-top: 50px;
}

.writtencontent p {
color: #29335c;
font-size: 16px;
}

.writtencontent h2 {
color: #29335c;
font-size: 22px;
}

.thnxmessage {
  display: grid;
    background-color: #3a4f9fad;
    width: 60%;
    border-radius: 8px;
    box-shadow: 2px 2px 18px 7px #4170dc inset;
    padding:40px 20px;
}
.category {
  display: grid;
}
.thnkbtn {
  background-color: #f86c11;
      box-shadow: 0px 6px 8px 0px black;
      width: 200px;
      height: 60px;
      justify-self: center;
      display: grid;
    align-content: center;
}

.thnkbtn:hover {
  box-shadow: 0px 6px 8px 0px #00000000;
}

#signupsection {
  display: grid;
height: 200px;

align-content: end;
justify-items: center;
margin-top: 50px;
padding-bottom: 40px;
color: white;
text-align: center;
background-image: url(../img/bg33.png);
background-position: center 76%;
background-repeat: no-repeat;
background-size: cover;

}

#signupsection h1 {
  margin:0;
}
.confirmation {
  display: grid;
background-color: #252d52;
height: 600px;
color: white;
align-content: center;
justify-content: center;
text-align: center;
}

.confirmation h3 {
color: #3ba080;
}

.confirmation a {
  width: 200px;
      display: grid;
      height: 45px;
      background-color: white;
      align-content: center;
      border-radius: 50px;
      justify-self: center;
      padding: 10px;
      transition: all 0.8s ease;
}

.confirmation a:hover {
background-color: #3ba080;
}

.signin {
  margin: 5px;
    height: 40px;
    border: none;
    border-radius: 8px;
}
.ctabtn {
  width: 150px;
  height: 40px;
  display: grid;
  justify-content: center;
  background-color: white;
  align-items: center;
  margin: 5px;
  transition: all 0.8s ease;
  border-radius: 4px;
    box-shadow: 3px 3px 4px 4px #00000057;
}
.ctabtn:hover {
  box-shadow: 3px 3px 4px 4px #00000000;
}
.signrow {
  display: flex;
  align-items: center;
}

.signrow a {
  color: black;
  font-weight: 900;
  transition: all 0.8s ease;
}

.signrow a:hover {
  color: #00c7ff;
  font-weight: 900;
}

.category h1 {
  color: #29335c;
    font-size: 28px;
    font-weight: 900;
}

.gamerow {
  display: flex;
  justify-content: center;
}

.game {
  height: 130px;
width: 220px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: grey;
margin: 40px 10px;
transition: all 0.8s ease;
border-radius: 15px;
display: grid;
justify-content: center;
align-content: end;
}

.game p {
  color: #29335c;
  margin-bottom: -60px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-transform: capitalize;
}
.gameplayer {
  width: 100%;
}
.gameplayer > div {
  display: grid;
      justify-items: center;
}

iframe {

}

.game:hover {
  box-shadow: 4px 6px 4px #00000000;
}

#g1 {
  background-image: url(../img/narcos.svg);
}

#g2 {
  background-image: url(../img/bookofatem.jpg);
}

#g3 {
  background-image: url(../img/bookofoz.jpg);
}

#g4 {
  background-image: url(../img/fighter.jpg);
}

#g5 {
  background-image: url(../img/piratesplenty.jpg);
}

#g6 {
  background-image: url(../img/darkking.jpg);
}

#g7 {
  background-image: url(../img/starburst.svg);
}

#g8 {
  background-image: url(../img/rage.svg);
}

#g9 {
  background-image: url(../img/fortuniumgold.jpg);
}

#g10 {
  background-image: url(../img/divine.svg);
}

#g11 {
  background-image: url(../img/blackjack.jpg);
}

#g12 {
  background-image: url(../img/gonzos.jpeg);
}

#g13 {
  background-image: url(../img/flowerfortune.jpeg);
}

#g14 {
  background-image: url(../img/jumanji.jpg);
}

#g15 {
  background-image: url(../img/twinspin.svg);
}

#g16 {
  background-image: url(../img/godsgold.jpg);
}

#g17 {
  background-image: url(../img/africanlegends.jpeg);
}

#g18 {
  background-image: url(../img/queenalexandria.jpeg);
}

#g19 {
  background-image: url(../img/roses.jpg);
}

#g20 {
  background-image: url(../img/hell.jpg);
}


#g21 {
  background-image: url(../img/cherrypop.jpg);
}

#g22 {
  background-image: url(../img/roulette.jpg);
}

#g23 {
  background-image: url(../img/wildwild.jpg);
}

#g24 {
  background-image: url(../img/midnighttokyo.jpg);
}

#c1 {
  background-image: url(../img/dazzle.jpg);
}

#c2 {
  background-image: url(../img/motor.jpg);
}

#c3 {
  background-image: url(../img/c3.jpg);
}

#c4 {
  background-image: url(../img/c4.png);
}

#c5 {
  background-image: url(../img/c5.png);
}

#c6 {
  background-image: url(../img/c6.png);
}

.gamec {
  width: 200px;
    height: 250px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: grey;
  box-shadow: 4px 6px 4px #0000005c;
  margin: 40px 10px;
    border-radius: 6px;
    display: grid;
    justify-content: center;
    align-content: end;
}

.gamec:hover {
  box-shadow: 4px 6px 4px #00000000;
}

.gamec p {
  color: #262626;
  margin-bottom: -60px;
  font-weight: 900;
  text-align: center;
}

.gamef {
  width: 100%!important;
  height: 100%!important;
}


.footer {
  display: grid;
    justify-items: center;
    align-content: center;
    background-color: #29335c;
    text-align: center;
    color: #8f8f8f;
    padding-bottom: 20px;
    width: 100%;
    /* height: 300px; */
    justify-self: center;
    z-index: 1;
}

.ftop {
  clip-path: polygon(0 38%, 100% 0, 100% 102%, 0% 100%);
      background-color: black;
      height: 350px;
      display: grid;
      align-content: flex-end;
      justify-items: center;
      width: 100%;
}

.fbottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
background-color: black;
height: 300px;
width: 100%;
display: grid;
justify-items: center;
}

.footer p {
  width: 80%;
  font-size: 16px;
}

.footerlinks2 {
  display: flex;
}

.footerlinks {
  display: flex;
  width: 90%;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}

.footerlinks img {
  margin: 10px 0px;
max-height: 38px;
}

.footerlinks2 a {
  margin: 5px;
  color: #bec3cd;
  transition: all 0.8s ease;
  font-size: 18px;
}

.footerlinks2 a:hover {
  color: #ffffff;
}

.Thead {
  color: white;
  height: 300px;
  background-color: #29335c;
  display: grid;
  justify-content: center;
  align-content: center;
  margin-top: 60px;
  font-size: 34px;
}

.privacy {
  text-align: center;
      padding-top: 20px;
      background-color: #29335c;
      padding-bottom: 20px;
      color: white;
}

.privacy p {
  width: 80%;
  font-size: 16px;
}

strong {
  font-weight: 600;
      font-size: 20px;
}

.terms {
  text-align: initial;
padding-top: 20px;
padding-bottom: 20px;
color: #29335c;
width: 80%;
justify-self: center;
}

.terms li {
box-shadow: 0px 0px 0px #00000070;
background: #f0f8ff00;
}

.terms a {
  color: #4fc1e9;
}

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

#hide {
  color: white;
  float: right;
  margin-right: 30px;
  font-size: 30px;
}

#hide:hover{
color: #333;
}

#hide2 {
  color: white;
  float: right;
  margin-right: 30px;
  font-size: 30px;
}

#hide2:hover{
color: #333;
}

/* pop up style */
.mobgames {
  display: none;
}

#gsearch2 {
  display: none;
}

@media only screen and (min-width:1251px) and (max-width: 3000px) {

#gsearch2 {
  display: block;
  max-width: 325px;
  min-width: 321px;
  width: 100%;
    align-self: flex-start;
    margin-right: 40px;
    justify-self: center;
    height: 55px;
    background-color: #e4e7e9;
    border-radius: 40px;
    background: #e4e7e9;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    border: none;
    text-align: left;
    margin-top: 10px;
}

#gsearch {
  display: none;
}

}

@media only screen and (min-width:1350px) and (max-width: 2500px) {
  .gamerow {
      justify-content: space-evenly;}

      .game {
        height: 165px;
        width: 250px;
      }

      .mobgames {
        display: none;
      }


}

@media only screen and (min-width:500px) and (max-width: 830px) {
  #mobilemenu {
    color: white;
    display: flex;
  }
  .desktop {
    display: none;}

    .mobgames {
      display: none;
    }

    #gsearch2 {
      display: none;
    }

}

@media only screen and (min-width:500px) and (max-width: 790px) {
.game {
  height: 60px;
  width: 80px;}

.game p {
  font-size: 12px;
}
.icon {
  width: 56px;
  height: 56px;
}
#gsearch2 {
  display: none;
}
.iconarea p{
  font-size: 12px;
}

.ctabutton {
  width: 150px;
}

#login {
  width: 150px;
}
  .gamec {
    width: 150px;
    height: 200px;}

.category h1 {
  font-size: 22px
}

.ctasection {
  justify-content: center;
}
.ctaarea {
    margin-left: 0px;
    display: grid;
    justify-items: center;
    text-align: center;
}
.ctaarea h1 {
    font-size: 50px;
    margin: 0;}

.thnxmessage {
    padding:20px 40px;

}

.mobgames {
  display: none;
}

#menupic {
  display: none;
}

#logo {
 justify-self: baseline;
 margin-left: 15px;
}

}
@media only screen and (min-width:500px) and (max-width: 535px) {

  .signrow {
      display: grid;}

      #signupsection {
    height: 300px;}

    .mobgames {
      display: none;
    }
    #gsearch2 {
      display: none;
    }
}
@media only screen and (min-width:0px) and (max-width: 499px) {
.desk {
  display: none;
}
.hide {
  display: none;
}
.menulink {
  margin: 18px 13px;
}
.navboxa {
    width: 44.5%;
  }
#menupic {
  display: none;
}

.registration {
  margin-top: 25px;
}

#gsearch {
    width: 90%;
  }
  #gsearch2 {
    display: none;
  }

  .row {
    display: grid;
    justify-items: center;
    padding-top: 0px;
    margin-top: 20px
  }

.iconrow {
  width: 100%;
  padding-top: 20px;
}

  #mobilemenu {
    color: white;
    display: flex;

  }

  .navrow {
   /* height: 40px; */
   padding-top: 10px;
   align-items: center;
  }

  .navrow1 a {
    display: none;
  }

.contentsection {
  /* margin: 200px 10px 0px 10px; */
}

  #mob {
    display: flex;
  }
.ctabutton {
  width: 200px;
}
#login {
  width: 200px;
}
  .headicns {
    display: flex;
  }
.headicns h1 {
  margin: 0;
}
  .navrow2 a {
  color: white;
  }

#progressbar {
  display: none;
}
#msform fieldset {
  margin: 0;
}
iframe {
  max-width: 100%;

}

.icon {
  width: 64px;
    height: 64px;
    background-size: 68px 68px;
}

.iconarea p{
  font-size: 12px;
}

.iconarea {
text-align: center;
}

.ctabutton {
  width: 220px;
}

#login {
  width: 220px;
}

 .mobilebtn {
   background-color: white;
    display: grid;
    justify-content: center;
    align-content: center;
    color: #f74d07;
    border-radius: 4px;
    height: 40px;
    width: 75px;
    font-size: 12px;
 }

 .mobilebtn p {
   color: #f86c11;
 }
  .navrow2 {
    align-items: center;
    justify-content: space-around;
  }
body {
  background-color: #f8f9fc;
}

#logo {
height: 28px;
width: 100px;
background-image: url(../img/mobilelogo.svg);
background-size: contain;
justify-self: flex-start;
  }

  #sbtn {
    width: 96px;
    margin-right: 10px;
    font-size: 10px;
  }

  #lbtn {
    width: 96px;
    font-size: 10px;
  }

.navbtns {
margin: 0px;
margin-right: 15px;
}

#bgheaderslider {
  width: 100%;
  height: 580px;
}

.mobgames {
  display: grid;
}

.mobgamedivider {
display: flex;
}

  .gamesection {
    width: 100%;
  }
  .gamesection2 {
    background-position: right 75%;
  }
  .gamerow {
    display: grid;
  }
  .game {
    height: 89px;
    width: 159px;
    margin: 20px 10px;
  }


  .game p {
    font-size: 12px;
    }

    .signrow {
        display: grid;}

        #signupsection {
      height: 300px;}

      .category h1 {
        font-size: 18px;
       line-height: 26px;
      }

.gamec {
margin-bottom: 80px;
width: 100px;
height: 150px;
}

.thnxmessage {
  padding:10px 20px;
  }

  .whitemenu {
    width: 100%;
  }
.title {
  margin: 20px 0px -12px 10px;
}
 .ctasection {
  justify-content: center;
  background-size: cover;
   }

   .ctaarea {
       margin-left: 0px;
       display: grid;
       justify-items: center;
       text-align: center;
       margin-top: 46px;
   }

   .ctaarea h1 {
       font-size: 44px;
       margin: 0;
      line-height: 44px;
    }

  .ctaarea h3 {
    font-size: 16px;
    line-height: 20px;
      }

    .footer {
      width: 100%;
    }

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

    .ftop {
      clip-path: polygon(0 21%, 100% 0, 100% 102%, 0% 100%);
    height: 350px;
    align-content: center;
    width: 100%;
    justify-items: center;
    }

    
    .footerlinks {
      flex-direction: column;
    }

  }

:root {
   --clr-page-bg      : #021245;
   --clr-page-bg-2    : #3A194F;
   --clr-card-bg      : #FFFFFF;
   --clr-border       : #E5E8F0;
   --clr-heading      : #FFFFFF;
   --clr-body         : #FFFFFF;
   --clr-body-dark    : #000000;
   --clr-muted        : #6F7A8C;
   --clr-green        : #6EC50A;
   --clr-yellow       : #FFB800;
   --clr-bullet       : #4563FF;
   /* Footer specific colors */
   --c-bg             : #0C183C;
   --c-text-primary   : #FFFFFF;
   --c-text-secondary : #C9D2F4;
   --c-divider        : #FFFFFF1A;
   --c-accent         : #3E66FF;
   --ff-heading       : "Montserrat", "Poppins", sans-serif;
   --ff-body          : "Inter", "Open Sans", sans-serif;
   --shadow-card      : 0 4px 14px rgba(0,0,0,.08);
   --radius-card      : 8px;
   --radius-btn       : 6px;
   --container-max    : 1320px;
   --gap-page-h       : 5vw;
   --bp-tablet        : 768px;
   --bp-mobile        : 640px;
}

body {
   margin: 0;
   background: radial-gradient(circle at 100% 0%, var(--clr-page-bg-2) 0%, var(--clr-page-bg) 60%);
   font-family: var(--ff-body);
   color: var(--clr-body);
   min-height: 100vh;
   box-sizing: border-box; 
}

*, *::before, *::after { 
   box-sizing: inherit;
}

.container {
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--gap-page-h);
   padding-right: var(--gap-page-h);
}

/* HEADER and LOGO ---------------------------------------------------- */
.site-header {
   display: flex;
   align-items: center;
   padding: 20px var(--gap-page-h);
}

.site-logo {
   width: 120px;
   height: auto;
   margin-right: auto;
}

.site-logo svg {
   width: 100%;
   height: auto;
   display: block;
}

/* HERO -------------------------------------------------------------- */
.hero {
   color: var(--clr-heading);
   padding: 40px 0 60px; /* Reduced top and bottom padding */
}

.hero__inner { /* This is the .container */
   display: flex;
   gap: 80px;
}

.hero__content { flex: 1 1 60%; }
.hero h1 { font: 700 52px/1.15 var(--ff-heading); margin:0 0 16px; }
.hero__date { font: 500 18px var(--ff-body); opacity:.8; margin:0 0 32px; }

.bullet-list {
   list-style:none; 
   padding:0; 
   margin:0 0 32px;
}

.bullet-list li {
   font: 500 18px/1.4 var(--ff-body);
   padding-left:40px; 
   position:relative; 
   margin-bottom:16px;
}

.bullet-list li::before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f058"; /* Font Awesome check-circle icon */
   position: absolute;
   left: 0;
   top: 0;
   font-size: 24px;
   color: var(--clr-bullet);
}

.trust-row {
   display: flex;
   gap: 24px; 
   flex-wrap: wrap;
   font: 600 14px var(--ff-body);
   list-style: none; 
   padding: 0;
   margin: 0;
}

.trust-row li { 
   display: flex; 
   align-items: center; 
} 

.trust-row li > i.fas { 
   margin-right: 8px; 
   font-size: 1em; 
   color: var(--clr-bullet);
}

.hero__art{ flex:1 1 40%; display:flex; justify-content:center; align-items:flex-start; }
.hero__art img{ width:100%; max-width:420px; height:auto; display:block; }

/* OFFER WALL -------------------------------------------------------- */
/* .offerwall { margin-top:-60px; } - Removed as requested */

/* CARD GRID (desktop) */
.casino-card {
   background: var(--clr-card-bg);
   box-shadow: var(--shadow-card);
   border-radius: var(--radius-card);
   padding: 28px 32px 0; 
   margin-bottom: 32px;
   display: grid;
   grid-template-columns: 220px 260px 240px 120px 1fr;
   align-items: stretch; 
   justify-items: center;
   position: relative;
   min-height: 140px;
}

.card__logo, 
.card__bonus,
.card__rating,
.card__score,
.card__cta {
   padding-left: 16px; 
   padding-right: 16px;
   display: flex; 
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%; 
}

.card__logo img { 
   width: 180px;
   height: 80px;
   object-fit: contain;
   display: block; 
}

.card__bonus {
   text-align: center;
   color: var(--clr-body-dark);
}

.card__bonus .label { font: 600 14px var(--ff-body); display:block; }
.card__bonus .headline { font: 700 22px var(--ff-heading); margin: 4px 0; display:block; }
.card__bonus .subline { font: 400 14px var(--ff-body); display:block; }

.card__rating { 
   text-align: center; 
   color: var(--clr-body-dark);
   border-left: 1px solid var(--clr-border);
}

.card__rating .votes { font: 400 14px var(--ff-body); display: block; margin-bottom: 6px; }
.stars { font-size: 18px; color: var(--clr-yellow); letter-spacing: 2px; }

.card__score { 
   font: 700 34px var(--ff-heading); 
   color: var(--clr-green); 
   text-align: center; 
   border-left: 1px solid var(--clr-border);
}

.card__cta {
   text-align: center; 
   gap: 8px; 
   border-left: 1px solid var(--clr-border);
}

.btn-play {
   display: inline-block;
   background: var(--clr-green);
   color: #fff;
   padding: 16px 48px;
   border-radius: var(--radius-btn);
   font: 700 16px var(--ff-heading);
   text-transform: uppercase;
   text-decoration: none;
   transition: background 0.2s;
   white-space: nowrap; 
}

.btn-play:hover, .btn-play:focus {
   background: #5aa209;
}

.review-link { font: 500 13px var(--ff-body); color: var(--clr-muted); text-decoration: underline; }

.card__legal {
   grid-column: 1/-1; 
   margin-top: 24px;
   margin-left: -32px; 
   margin-right: -32px;
   padding: 12px 32px 16px; 
   background-color: #fafafa;
   color: #5b616c;
   font-family: var(--ff-body);
   font-weight: 400;
   font-size: 11px; 
   line-height: 1.4; 
   text-align: center;
   border-top: 1px solid var(--clr-border);
   border-bottom-left-radius: var(--radius-card);
   border-bottom-right-radius: var(--radius-card);
}

/* CONTENT SECTION --------------------------------------------------- */
.content-section {
   padding: 60px 0;
   background: linear-gradient(to bottom, var(--clr-page-bg) 0%, var(--c-bg) 100%);
}

.content-section .container {
   max-width: 1200px;
}

.content-section h2 {
   font: 600 28px/1.2 var(--ff-heading);
   color: var(--c-text-primary);
   margin: 0 0 24px;
}

.content-section h3 {
   font: 600 22px/1.3 var(--ff-heading);
   color: var(--c-text-primary);
   margin: 32px 0 16px;
}

.content-section p {
   font: 400 16px/1.6 var(--ff-body);
   color: var(--c-text-secondary);
   margin: 0 0 16px;
}

/* FOOTER ------------------------------------------------------------ */
.site-footer {
   background-color: var(--c-bg);
   padding: 4rem 1.25rem;
   color: var(--c-text-primary);
}

.footer-container {
   max-width: 1200px;
   margin: 0 auto;
}

.footer-top {
   display: flex;
   justify-content: space-between;
   gap: 4rem;
   margin-bottom: 2rem;
}

.footer-brand h4 {
   font: 700 14px/1.4 var(--ff-heading);
   text-transform: uppercase;
   color: var(--c-text-primary);
   margin: 0 0 1rem;
}

.footer-info p {
   font: 400 15px/1.5 var(--ff-body);
   color: var(--c-text-secondary);
   margin: 0 0 1rem;
}

.footer-divider {
   border-top: 1px solid var(--c-divider);
   margin: 0 0 2rem;
}

.footer-trust {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 1.5rem;
   margin-bottom: 2rem;
}

.footer-trust img {
   height: 34px;
   width: auto;
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
}

.footer-nav ul {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   gap: 1rem;
   flex-wrap: wrap;
}

.footer-nav a {
   color: var(--c-text-primary);
   font: 400 14px/1.5 var(--ff-body);
   text-decoration: none;
   transition: color 0.2s;
}

.footer-nav a:hover,
.footer-nav a:focus {
   color: var(--c-accent);
}

.footer-nav li:not(:last-child)::after {
   content: "·";
   padding-left: 1rem;
   color: var(--c-text-secondary);
}

.copyright {
   font: 400 14px/1.5 var(--ff-body);
   color: var(--c-text-secondary);
}

/* RESPONSIVE  <=  768px -------------------------------------------- */
@media(max-width: 768px) {
   .site-header {
      padding: 15px var(--gap-page-h);
   }
   
   .site-logo {
      width: 100px;
   }
   
   .hero {
      padding: 20px 0 40px;
   }
   
   .hero__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
   .hero__art { display: none; }
   .hero h1 { font-size: 42px; }
   
   .offerwall.container {
      padding-left: 12px;
      padding-right: 12px;
   }
   
   .casino-card {
      padding: 20px 10px 0; 
      margin-bottom: 24px;
      grid-template-columns: none !important; 
      display: flex;
      flex-direction: column;
      align-items: center; 
   }
   
   .card__rating,
   .card__score,
   .card__cta {
      border-left: none; 
   }
   
   .card__logo, 
   .card__bonus,
   .card__rating,
   .card__score,
   .card__cta {
      padding-left: 8px;
      padding-right: 8px;
      text-align: center; 
      margin-bottom: 16px; 
   }
   
   .card__logo { margin-bottom: 10px; } 
   .card__cta { margin-bottom: 0; } 
   
   .card__bonus .headline {
      font-size: 18px;
   }
   
   .btn-play {
      padding: 14px 0; 
      font-size: 15px;
      width: 100%; 
   }
   
   .card__legal {
      margin-left: -10px; 
      margin-right: -10px;
      padding-left: 10px; 
      padding-right: 10px;
   }
   
   /* Footer responsive */
   .site-footer {
      padding: 3rem 1rem;
   }
   
   .footer-top {
      flex-direction: column;
      gap: 2rem;
   }
   
   .footer-trust {
      justify-content: center;
   }
   
   .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 1.5rem;
   }
   
   .footer-nav ul {
      justify-content: center;
   }
   
   .copyright {
      order: 1;
   }
}

/* RESPONSIVE  <=  640px (mobile) ----------------------------------- */
@media(max-width: 640px) {
   .site-header {
      padding: 10px var(--gap-page-h);
   }
   
   .site-logo {
      width: 80px;
   }
   
   .hero { 
      padding: 15px 0 30px;
   }
   
   /* .offerwall { margin-top: -20px; } - Removed margin-top for mobile too */
   
   /* Mobile typography optimizations */
   .hero h1 { 
      font-size: 32px; /* Further reduced from 42px on tablet */
      line-height: 1.2;
   }
   
   .hero__date {
      font-size: 16px;
      margin-bottom: 24px;
   }
   
   .bullet-list { 
      margin-bottom: 24px;
   }
   
   .bullet-list li { 
      font-size: 14px; 
      padding-left: 28px;
      margin-bottom: 12px;
      line-height: 1.5;
   }
   
   .bullet-list li::before {
      font-size: 18px;
      top: 1px;
   }
   
   .trust-row {
      font-size: 13px;
      gap: 16px;
   }
   
   .trust-row li > i.fas {
      margin-right: 6px;
   }
   
   .offerwall.container { 
      padding-left: 4px;
      padding-right: 4px;
   }
   
   .casino-card {
      padding: 16px 4px 0; 
      margin-bottom: 16px;
   }
   
   .card__logo, 
   .card__bonus,
   .card__cta { 
      padding-left: 4px;
      padding-right: 4px;
   }
   
   .card__logo img { 
      width: 120px;
      height: 60px;
   }
   
   .card__bonus .headline { 
      font-size: 16px;
      line-height: 1.2;
   }
   
   .card__bonus .label { 
      font-size: 11px;
      letter-spacing: 0.5px;
   }
   
   .card__bonus .subline { 
      font-size: 12px;
      line-height: 1.3;
   }
   
   .card__rating, .card__score { display: none; } 
   
   .btn-play {
      font-size: 14px;
      padding: 12px 0;
   }
   
   .review-link {
      font-size: 12px;
   }
   
   .card__cta { gap: 6px; }
   
   .card__legal {
      margin-left: -4px; 
      margin-right: -4px;
      padding: 10px 4px 12px;
      font-size: 10px;
   }
   
   /* Content section mobile */
   .content-section {
      padding: 40px 0;
   }
   
   .content-section h2 {
      font-size: 24px;
   }
   
   .content-section h3 {
      font-size: 20px;
   }
   
   .content-section p {
      font-size: 14px;
   }
   
   /* Footer mobile */
   .footer-nav ul {
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
   }
   
   .footer-nav li:not(:last-child)::after {
      display: none;
   }
   
   .footer-trust {
      gap: 1rem;
   }
   
   .footer-trust img {
      height: 30px;
   }
}

    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background-color: #066aab;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    .modal-content img {
        max-width: 100px;
        margin-bottom: 20px;
    }
    .modal-content h1 {
        color: #fff;
        margin-bottom: 20px;
    }
    .modal-content p {
        color: #fff;
        margin-bottom: 20px;
        max-width: 80%;
    }
    .modal-content label {
        display: block;
        margin: 20px 0;
        color: #fff;
        font-weight: 700;
    }
    .modal-content button {
        padding: 10px 20px;
        background-color: #FFA500;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
    .modal-content button:disabled {
        background-color: #aaa;
    }