@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=League+Spartan:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --cci-main-color: #37E3EB;
    --cci-main-color-hover: #6ff8ff;
    --cci-color1: #37E3EB;
    --cci-color1-hover: #68f7ff;
    --cci-color2: #FF4CAB;
    --cci-color2-hover: #ff5cb3;
    --cci-background-light: #FAFAFA;
    --main-border-radius: 10px;
}
body {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
}
.main-container{
    width: 100%;
    max-width: 45rem;
}
.center-screen {
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    min-height: 100vh!important;
}
.center-horizontal-mobile { }
.cci-bg-light{ background-color: var(--cci-background-light)!important; }
.cci-img-button{
   cursor: pointer;
}
.cci-button:hover{ background: var(--cci-main-color-hover); }
.cci-button.play-now{ 
    color: #FFF!important;
    font-family: 'Alexandria', sans-serif !important;
    font-size: 15px!important;
    font-style: normal!important;
    font-weight: 400!important;
    line-height: normal!important;
    border-radius: 50px!important;
    height: 40px;
}

.play-now-button-color1{ background: var(--cci-color1)!important; }
.play-now-button-color1:hover{ background: var(--cci-color1-hover)!important; }
.play-now-button-color2{ background: var(--cci-color2)!important; }
.play-now-button-color2:hover{ background: var(--cci-color2-hover)!important; }

.cci-button.start-now{ 
    width: 408px;
    height: 60px;
    color: #FFF!important;
    font-family: 'Alexandria', sans-serif !important;
    font-size: 26px!important;
    font-style: normal!important;
    font-weight: 400!important;
    line-height: normal!important;
}
.game-card{
    border: 1px solid #E3E3E3;
    height: 180px;
    border-radius: var(--main-border-radius);
    background: #FFF;
    padding: 1rem;
}

 /* the slides */
.slick-slide {
    margin: 0 27px;
}
/* the parent */
.slick-list {
    margin: 0 -27px;
}
.vertical-line {
    width: 2px; 
    background: radial-gradient(50% 50% at 50% 50%, #E3E3E3 0%, #FFF 100%);
    margin: 10px;
}

@media only screen and (max-width: 768px) {
    .center-horizontal-mobile{
        margin: 0 auto!important;
    }
}