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

:root {
    --grey: #5f5f5f;
    --green: #008001;
    --lightgrey: #cccccc;
    --lightgreen: #16cc65;
    --cubic: linear
}


/* Global */

.color-green {
    color: var(--lightgreen)
}

.bg-green {
    background-color: #074020;
}

body {
    font-family: "Titillium Web", Arial, Helvetica, sans-serif;
    line-height: 1.5;
    background-color: #2a2929;
    background-image: url('../img/bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    color: #fff;
    padding: 4em 0;
    margin: 0;
    position: relative;
}

body::after {
    content: "";
    position: absolute;
    bottom: 4em;
    left: 6em;
    width: calc(100% - 12em);
    height: calc(100% - 8em);
    border: 2px solid var(--grey);
    pointer-events: none;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.container {
    max-width: calc(100% - 12em);
    width: 100%;
    margin-left: 6em;
    margin-right: 6em;
    padding-left: 6em;
    padding-right: 6em;
}


/* Header */

header .container {
    border-bottom: 2px solid var(--grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.logo {
    padding: 1em 0
}

header ul li a {
    padding: .75em 2em;
    background: var(--green);
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    transition: letter-spacing 200ms linear
}

header ul li a:hover {
    letter-spacing: 2px;
}

header ul li:last-child a {
    background: var(--lightgrey);
    color: var(--green)
}

header ul {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
    align-items: center;
}


/* Capraz */

.capraz {
    position: relative;
    clip-path: polygon(0 0, 90% 0, 100% 25%, 100% 80%, 100% 100%, 10% 100%, 0 75%, 0% 20%);
}


/*section */

.half {
    width: 33.33%;
    padding: 4em 0;
    margin: 6em 0
}

.half h1 {
    position: relative;
    font-size: 3em;
    line-height: 1.2;
    margin: 0 0 .5em 0;
    padding-bottom: .5em;
    font-weight: 600;
}

.half h1::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 3px;
    background: var(--lightgrey);
}

.half p {
    text-align: justify;
}

.half>a {
    background: var(--lightgreen);
    padding: .75em 2em;
    margin-top: 2em;
    display: inline-block;
    font-weight: 700;
    transition: all 200ms var(--cubic);
}

.half>a:hover {
    letter-spacing: 1px;
}

.cizgi {
    width: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.4), transparent, rgba(255, 255, 255, 0.4));
    height: 2px;
}

.cizgi.kalin {
    background: #5f5f5f;
}

.incelt {
    font-weight: 400;
}


/* games grid */

.games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
    align-items: center;
    justify-content: space-between;
    margin-top: -5em;
    padding-bottom: 4em
}

.games-grid>a {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 1em;
    border: 2px solid rgba(255, 255, 255, 0.08);
    max-width: calc(237px + 5em);
    border-radius: 2px;
    transition: all 200ms linear
}

.games-grid>a:hover::before {
    background: var(--lightgreen);
}

.games-grid>a::before {
    content: "";
    position: absolute;
    top: -.4em;
    left: calc(50% - 3em);
    width: 6em;
    height: .8em;
    background: #5F5F5F;
    transition: all 200ms linear
}

.games-grid>a .inside {
    position: relative;
    background: #1b1b1b;
    padding: 1em 1.5em;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: calc(237px + 3em);
}

.games-grid>a .inside::before {
    content: "";
    position: absolute;
    bottom: 2em;
    left: 1.5em;
    width: calc(100% - 3em);
    height: calc(100% - 5em);
    border: 1px solid var(--lightgreen);
    z-index: 1;
}

.games-grid>a .inside::after {
    content: "";
    position: absolute;
    bottom: .9em;
    right: .85em;
    width: 2em;
    height: 3em;
    background: #1b1b1b;
    border-left: 1px solid var(--lightgreen);
    transform: rotate(45deg);
    z-index: 6;
}

.games-grid>a .image,
.games-grid>a .info {
    position: relative;
    z-index: 2;
}

.games-grid img {
    width: 234px;
    margin-left: 1px
}

.games-grid h3 {
    color: var(--lightgreen);
    font-size: 1.5em;
    margin: .5em 0
}

.games-grid .info {
    padding: 0 1em;
    text-align: left;
    margin-bottom: 2em
}

.games-grid .image {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.opacityimg {
    max-width: 200px;
    max-height: 200px;
    text-align: center;
    position: absolute;
    bottom: 0
}

.games-content {
    text-align: center;
    padding: 3em 0
}

.games-content h2 {
    max-width: 60%;
    margin: 0 auto;
    font-size: 2.75em
}

.games-content p {
    font-size: 1.2em;
    margin: 2em 0 2em 0
}


/* Bonus Area */

.bonus-area {
    background-color: #4c4b4b;
    background-image: url('../img/bonusbg.png');
    padding: 6em 0
}

.bonus-area h3 {
    font-size: 2.75em;
    margin: 0
}

.bonuscizgi {
    width: calc(100% - 12em);
    margin: 2em 6em;
    height: 2px;
    background: #5f5f5f;
}

.bonus-grid {
    display: grid;
    grid-template-areas: "a a b c" "a a d e ";
    gap: 2em
}

.bonus-grid>a {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
    align-items: stretch;
    justify-content: space-between;
    padding: 2em 1em;
    border: 1px solid rgba(255, 255, 255, 0.4)
}

.bonus-grid>a:nth-child(1) {
    grid-area: a;
}

.bonus-grid>a:nth-child(2) {
    grid-area: b;
}

.bonus-grid>a:nth-child(3) {
    grid-area: c;
}

.bonus-grid>a:nth-child(4) {
    grid-area: d;
}

.bonus-grid>a:nth-child(5) {
    grid-area: e;
}

.bonus-grid .info {
    line-height: 1.2;
    text-transform: uppercase;
}

.bonus-grid>a:not(:first-child) .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bonus-grid .title {
    font-size: 3em;
    color: var(--lightgreen);
    font-weight: 700;
}

.bonus-grid .image {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.bonus-grid .title.mini {
    font-size: 2em;
}

.bonus-grid .desc {
    font-size: 1.5em;
    max-width: 220px;
}

.bonus-grid .detail {
    margin-top: 2em;
    color: var(--lightgreen);
}

.first-bottom {
    position: relative;
    grid-column: 1 / 3;
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.first-bottom .detail {
    text-transform: uppercase;
}

.first-bottom p {
    font-size: 1.2em
}

.first-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1em;
    width: calc(100% + 2em);
    border-top: 1px solid #fff
}

.first {
    border-color: #fff !important;
    position: relative;
}

.first .title {
    font-size: 5em;
}


/* footer */

footer {
    padding: 2em 0
}

.payments {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2em;
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

footer img {
    max-width: 100%;
}

.providers .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2em
}

.providers .left,
.providers .right {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    padding: 2em 0;
}

.footer-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

footer .copyright {
    text-transform: uppercase;
}

.dikeyfooter {
    background: #5f5f5f;
    position: relative;
}

.dikeyfooter::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2em;
    height: calc(100% + 4em);
    width: 2px;
    background: #5f5f5f;
}

.dikeyfooter::before {
    content: "";
    position: absolute;
    left: -4px;
    top: calc(50% - 30px);
    width: 10px;
    height: 60px;
    background: #5F5F5F;
}

footer img {
    transition: all 200ms linear
}

footer img:hover {
    transform: scale(1.05)
}

@media screen and (max-width:1024px) {
    body {
        padding: 0
    }
    body::after {
        display: none;
    }
    header .container {
        flex-direction: column;
    }
    .logo {
        margin-bottom: 1em
    }
    .container {
        margin: 0;
        max-width: 100%;
        padding: 0 2em
    }
    .half {
        width: 100%;
        padding: 2em 0;
        margin: 2em 0;
    }
    .games-grid {
        grid-template-columns: 1fr;
        margin: 0;
        padding: 2em 0
    }
    .bonus-grid {
        grid-template-areas: unset;
    }
    .bonus-grid>a:nth-child(n) {
        grid-area: unset;
        text-align: center;
    }
    .bonus-grid>a {
        display: flex;
        flex-direction: column;
    }
    .bonus-grid .image {
        justify-content: center;
        align-items: center;
    }
    .games-content h2 {
        max-width: 100%;
    }
    .bonus-grid .desc {
        max-width: 100%;
    }
    .bonus-grid .detail {
        margin: 1em 0
    }
    .half h1 {
        color: var(--lightgreen);
        text-shadow: 0 0 2px #fff;
    }
    .payments {
        grid-template-columns: repeat(3, 1fr);
        gap: 1em
    }
    .providers .left,
    .providers .right {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .copyright {
        margin-top: 2em
    }
}