/* All Include Files */
@import "../includes/_variables.css";
@import "../includes/_global-styles.css";

/* All Component Files */
@import "../components/_navbar.css";
@import "../components/_footer.css";


/* Bonuses Section */

.bonuses .container{
	width: 100%;
    max-width: 1650px;
    margin: auto;
}

.bonuses {
    width: 100%;
    /*padding-bottom: 100px;*/
    display: flex;
    justify-content: center;
    position: relative;
}

.bonuses .effect-2 {
    position: absolute;
    bottom: 100px;
    left: 100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: var(--primary-color);
    filter: blur(300px);
}

.bonuses .effect-3 {
    position: absolute;
    top: 500px;
    left: 95%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--primary-color);
    filter: blur(100px);
}

.bonuses .container .filters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    margin-bottom: 50px;
    background: #7e7e7e;
    padding: 20px;
    border: 4px solid #920000;
    border-radius: 25px;
}

.bonuses .container .filters button {
    width: 100%;
    height: 45px;
    background: var(--primary-color);
    backdrop-filter: blur(20px);
    border-radius: 10px;
    font-size: 20px;
    text-transform: uppercase;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: bold;
}

.bonuses .container .bonuses-wrapper {
    width: 100%;
}

.bonuses .container .bonuses-wrapper .bonus {
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(20px);
    border-radius: 25px;
    margin-bottom: 40px;
}

.bonuses .container .bonuses-wrapper .bonus:last-child {
    margin-bottom: 0px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top {
    width: 100%;
    height: 110px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .img-container {
    width: 255px;
    height: 110px;
    border-radius: 25px 0px 0px 25px;
    overflow: hidden;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .img-container img {
    width: 255px;
    height: 110px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .img-container img:hover {
    transform: scale(1.1);
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .info-part {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .title-info-part {
    min-width: 300px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .info-part h3 {
    font-size: 26px;
    font-weight: 600;
    color: var(--primary-color);
    text-shadow: 0px 0px 20px var(--primary-color);
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .info-part  p {
    font-size: 16px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .btns {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .btns button {
    width: 120px;
    height: 60px;
    padding: 0px 15px;
    background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px);
    border-radius: 100px;
    font-size: 17px;
    text-transform: uppercase;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .btns button:hover {
    opacity: 0.5;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .btns button i {
    transition: all 0.4s ease;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .btns button.active i {
    transform: rotate(180deg);
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .btns .cta-btn {
    margin-left: 10px;
    width: 120px;
    height: 60px;
    background: var(--primary-color);
    box-shadow: 0px 0px 20px var(--primary-color);
    border-radius: 100px;
    font-size: 22px;
    text-transform: uppercase;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-top .btns .cta-btn:hover {
    opacity: 0.5;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom {
    border-top: 1px solid rgba(0, 158, 255, 0.1);
    width: 100%;
    height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom.active {
    margin-top: 20px;
    opacity: 1;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top {
    width: 100%;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: 1.5fr 4fr 2fr 2fr;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part {
    width: 100%;
    border-right: 1px solid rgba(0, 158, 255, 0.1);
    padding: 0px 20px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part:first-child {
    padding-left: 0px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part:last-child {
    border-right: none;
    padding-right: 0px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .max-bet {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 158, 255, 0.1);
    margin-bottom: 20px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .max-bet h3 {
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .max-bet h2 {
    font-size: 45px;
    font-weight: 700;
    color: var(--primary-color);
    text-shadow: 0px 0px 20px var(--primary-color);
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .license {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .license h3 {
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .license img {
    width: 100%;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .features h3 {
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .features p {
    font-size: 16px;
    margin-bottom: 5px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .features p i {
    width: 20px;
    color: var(--primary-color);
    text-shadow: 0px 0px 20px var(--primary-color);
    margin-right: 5px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .features p:last-child {
    margin-bottom: 0px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .availability h3 {
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .availability .countries {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .availability .countries img {
    width: 100%;
    border-radius: 5px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .availability .payments {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .deposit h3 {
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .deposit .deposit-methods {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .deposit .deposit-methods img {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 150px var(--primary-color);
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-container {
    width: 100%;
    padding: 20px;
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-container .bonus-bottom-bottom {
    border-top: 1px solid rgba(0, 158, 255, 0.1);
    width: 100%;
    padding: 20px 0px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-container .bonus-bottom-bottom img {
    width: 100%;
}

/* Responsive */


/* Bonuses Section (Responsive) */
@media only screen and (max-width: 1350px) {
    .bonuses .container {
        width: 95%;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-top .img-container {
        width: 195px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-top .img-container img {
        width: 195px;
    }
}

@media only screen and (max-width: 1080px) {
    .bonuses .container .filters {
        flex-direction: column;
    }

    .bonuses .container .filters .filters-left {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        margin-bottom: 20px;
    }

    .bonuses .container .filters .filters-left .all-offers-btn {
        width: 100%;
        margin-right: 0px;
    }

    .bonuses .container .filters .filters-left .sort-by-select {
        width: 100%;
    }

    .bonuses .container .filters .filters-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }

    .bonuses .container .filters .filters-right .bonus-type-select {
        width: 100%;
        margin-right: 0px;
    }

    .bonuses .container .filters .filters-right .deposit-options-select {
        width: 100%;
    }
}

@media only screen and (max-width: 1080px) {
    .bonuses .container .filters {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 580px) {
    .bonuses .container .filters {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (max-width: 1024px) {
    .bonuses .container .bonuses-wrapper .bonus .bonus-top {
        height: fit-content;
        flex-direction: column;
        padding-right: 0px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-top .img-container {
        width: 100%;
        height: fit-content;
        border-radius: 25px 25px 0px 0px;
        margin-bottom: 20px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-top .img-container img {
        width: 100%;
        height: fit-content;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-top .info-part {
        margin-bottom: 20px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-top .info-part:last-child {
        margin-bottom: 0px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-top .details-btn-rating-wrapper {
        margin-bottom: 20px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom.active {
        border-radius: 0px 0px 10px 10px;
    }
}

@media only screen and (max-width: 850px) {
    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top {
        grid-template-columns: 1fr;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part {
        border-right: none;
        border-bottom: 1px solid rgba(0, 158, 255, 0.1);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part:last-child {
        border-bottom: none;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .license img {
        width: 100px;
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .availability .countries {
        grid-template-columns: repeat(6, 1fr);
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .deposit .deposit-methods {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media only screen and (max-width: 550px) {
    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .availability .countries {
        grid-template-columns: repeat(4, 1fr);
    }

    .bonuses .container .bonuses-wrapper .bonus .bonus-bottom .bonus-bottom-top .bonus-bottom-top-part .deposit .deposit-methods {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 520px) {
    .bonuses .container .filters .filters-left {
        grid-template-columns: 1fr;
    }

    .bonuses .container .filters .filters-right {
        grid-template-columns: 1fr;
    }
}









/* Main Section */
.main {
  padding: 100px 0px;
  display: flex;
  justify-content: center;
}

.main .main-container {
  width: 80%;
  max-width: 1450px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main .main-container h2 {
  text-align: center;
  font-size: 35px;
}

.main .main-container h2 span {
  color: var(--primary-color);
}

.main .main-container .top-desc {
    margin-top: 10px;
    text-align: center;
    font-size: 38px;
    margin-bottom: 50px;
    color: white;
    font-weight: bold;
    width: 52%;
}

.main .main-container .boxes-section {
  margin-bottom: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main .main-container .boxes-section h2 {
  margin-bottom: 50px;
}

.main .main-container .boxes-section .boxes {
  width: 100%;
}

.main .main-container .boxes-section .boxes .box {
  width: 100%;
  background: #1a1c2b;
  border: 2px solid var(--primary-color);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  overflow: hidden;
}

@media only screen and (max-width: 678px) {
  .main .main-container .boxes-section .boxes .box {
    grid-template-columns: 1fr;
  }
}

.main .main-container .boxes-section .boxes .box .box-left {
  width: 100%;
  padding: 50px;
}

.main .main-container .boxes-section .boxes .box .box-left h3 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
}

.main .main-container .boxes-section .boxes .box .box-left h3 span {
  color: var(--primary-color);
}

.main .main-container .boxes-section .boxes .box .box-right {
  width: 100%;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .main-container .boxes-section .boxes .box .box-right img {
  width: 100%;
}

.main .main-container .videos-section {
  margin-bottom: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main .main-container .videos-section h2 {
  margin-bottom: 50px;
  width: 100%;
  text-align: left !important;
}

.main .main-container .videos-section .videos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 40px;
}

.main .main-container .videos-section .videos iframe {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  border: 2px solid var(--primary-color);
}

.main .main-container .videos-section a {
  width: 150px;
  height: 40px;
  background: var(--primary-color);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 500;
  margin-top: 50px;
  text-transform: uppercase;
}

.main .main-container .insta-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main .main-container .insta-section h2 {
  margin-bottom: 50px;
  width: 100%;
}

.main .main-container .insta-section .images {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 25px;
}

.main .main-container .insta-section .images img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.main .main-container .insta-section .images img:hover {
  transform: scale(1.05);
}

/* Responsive */
@media only screen and (max-width: 900px) {
  .main .main-container .videos-section .videos {
    grid-template-columns: repeat(1, 1fr);
  }

  .main .main-container .videos-section .videos iframe {
    height: 250px;
  }

  .main .main-container .insta-section .images {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 450px) {
  .main .main-container .insta-section .images {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Items */
.main .main-container .items {
  width: 100%;
}

.main .main-container .items .item {
    background: #7e7e7e;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 3px solid black;
}


.main .main-container .items .item:last-child {
  margin-bottom: 0px;
}

.main .main-container .items .item .item-top {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 50px;
}

.main .main-container .items .item .item-top .item-top-left {
  width: 100%;
  display: flex;
  justify-content: center;
}

.main .main-container .items .item .item-top .item-top-left img {
  height: 50px;
  margin: auto;
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-left
  .item-top-left-content
  h3 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  color: var(--primary-color);
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-left
  .item-top-left-content
  p {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 300;
}

.main .main-container .items .item .item-top .item-top-center {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-center
  .item-top-center-part {
  width: 100%;
  border-left: 2px solid var(--primary-color);
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-center
  .item-top-center-part:last-child {
  border-right: 2px solid var(--primary-color);
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-center
  .item-top-center-part
  h3 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: var(--primary-color);
    font-weight: bold;
    line-height: 35px;
}
.main
  .main-container
  .items
  .item
  .item-top
  .item-top-center
  .item-top-center-part
  p {
  text-align: center;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 300;
  color: white;
  line-height:35px;
}

.main .main-container .items .item .item-top .item-top-right {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    margin-top: 15px;
}

.main .main-container .items .item .item-top .item-top-right button {
  width: 100%;
  height: 45px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  border-radius: 100px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-right
  button:nth-child(1) {
    font-weight: 600;
    background: var(--primary-color);
    color: white;
    font-size: 16px;
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-right
  button:nth-child(1):hover {
  opacity: 0.9;
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-right
  button:nth-child(2) {
  background: var(--primary-color);
  color: #7e7e7e;
}

.main
  .main-container
  .items
  .item
  .item-top
  .item-top-right
  button:nth-child(2):hover {
  opacity: 0.9;
}

.main .main-container .items .item .item-top .item-top-right .claim-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    border-radius: 100px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.main .main-container .items .item .item-top .item-top-right .claim-btn {
  background: #000;
  color: white;
}

.main .main-container .items .item .item-top .item-top-right .claim-btn:hover {
  opacity: 0.9;
}

.main .main-container .items .item .item-bottom-wrapper {
  height: 0px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.main .main-container .items .item .item-bottom {
  margin-top: 10px;
  border-top: 2px solid var(--secondary-color);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  grid-gap: 20px;
}

.main .main-container .items .item .item-bottom .item-bottom-part {
  border-right: 2px solid var(--secondary-color);
  padding: 0px 20px 0px 0px;
}

.main .main-container .items .item .item-bottom .item-bottom-part:last-child {
  border-right: none;
}

.main .main-container .items .item .item-bottom .item-bottom-part h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.main .main-container .items .item .item-bottom .item-bottom-part p {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 15px;
}

.main .main-container .items .item .item-bottom .item-bottom-part p:last-child {
  margin-bottom: 0px;
}

.main .main-container .items .item .item-bottom .item-bottom-part-2 p {
  display: flex;
  align-items: center;
}

.main .main-container .items .item .item-bottom .item-bottom-part-2 p i {
  color: var(--primary-color);
  margin-right: 10px;
}

.main .main-container .items .item .item-bottom .item-bottom-part .flags img {
  width: 50px;
  display: inline-block;
  margin-right: 10px;
}

/* Youtube Main Section */
.youtube-main {
  display: flex;
  justify-content: center;
  padding-bottom: 100px;
}

.youtube-main .youtube-main-container {
  width: 80%;
  max-width: 1450px;
  margin: auto;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1.5fr;
  grid-gap: 50px;
}

.youtube-main .youtube-main-container h2 {
  font-size: 45px;
  margin-bottom: 50px;
}

.youtube-main .youtube-main-container h2 span {
  color: var(--primary-color);
}

.youtube-main .youtube-main-container .video-card {
  width: 100%;
  background: #141b20;
  border-radius: 20px;
  overflow: hidden;
}

.youtube-main .youtube-main-container .video-card iframe {
  width: 100%;
  height: 450px;
}

.youtube-main .youtube-main-container .video-card .video-card-content {
  padding: 20px;
}

.youtube-main .youtube-main-container .video-card .video-card-content h4 {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 5px;
}

.youtube-main .youtube-main-container .video-card .video-card-content p {
  font-size: 16px;
  color: #bfbfbf;
}

/* Youtube Featured Section */
.youtube-featured {
  padding-bottom: 100px;
}

.youtube-featured .youtube-featured-container {
  width: 80%;
  max-width: 1450px;
  margin: auto;
}

.youtube-featured .youtube-featured-container h2 {
  font-size: 35px;
  margin-bottom: 50px;
}

.youtube-featured .youtube-featured-container h2 span {
  color: var(--primary-color);
}

.youtube-featured .youtube-featured-container .video-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 50px;
}

.youtube-featured .youtube-featured-container .video-cards .video-card {
  width: 100%;
  background: #1a1c2b;
  border: 3px solid var(--primary-color);
  border-radius: 20px;
  overflow: hidden;
}

.youtube-featured .youtube-featured-container .video-cards .video-card iframe {
  width: 100%;
  height: 450px;
}

.youtube-featured
  .youtube-featured-container
  .video-cards
  .video-card
  .video-card-content {
  padding: 20px;
}

.youtube-featured
  .youtube-featured-container
  .video-cards
  .video-card
  .video-card-content
  h4 {
  font-size: 15px;
  color: var(--primary-color);
  margin-bottom: 5px;
}

.youtube-featured
  .youtube-featured-container
  .video-cards
  .video-card
  .video-card-content
  p {
  font-size: 12px;
  color: #bfbfbf;
}

.youtube-featured .youtube-featured-container .cta-btn {
  margin: 50px auto 0px auto;
  width: 160px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  border-radius: 100px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: var(--primary-color);
  color: white;
}

.youtube-featured .youtube-featured-container .cta-btn:hover {
  opacity: 0.9;
}

/* Twitch Main Section */
.twitch-main {
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
}

.twitch-main .twitch-main-container {
  width: 80%;
  max-width: 1450px;
  margin: auto;
}

.twitch-main .twitch-main-container h2 {
  font-size: 35px;
  margin-bottom: 50px;
}

.twitch-main .twitch-main-container h2 span {
  color: var(--primary-color);
}

.twitch-main .twitch-main-container #twitch-embed {
  width: 100%;
  display: flex;
  justify-content: center;
}

.twitch-main .twitch-main-container #twitch-embed iframe {
  width: 80%;
  max-width: 1450px;
  height: 800px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

/* Responsive */

/* Main Section (Responsive) */
@media only screen and (max-width: 1580px) {
  .main .main-container {
    width: 90%;
  }
}

@media only screen and (max-width: 1350px) {
  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-left
    .item-top-left-content
    h3 {
    font-size: 16px;
  }

  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-left
    .item-top-left-content
    p {
    font-size: 12px;
  }

  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-center
    .item-top-center-part
    h3 {
    font-size: 16px;
  }

  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-center
    .item-top-center-part
    p {
    font-size: 12px;
  }

  .main .main-container .items .item .item-bottom .item-bottom-part h3 {
    font-size: 16px;
  }

  .main .main-container .items .item .item-bottom .item-bottom-part p {
    font-size: 12px;
  }

  .main .main-container .items .item .item-bottom .item-bottom-part .flags img {
    width: 30px;
  }
}

@media only screen and (max-width: 1200px) {
  .main .main-container .items .item .item-top {
    grid-template-columns: 1fr 2.5fr;
  }

  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-center
    .item-top-center-part:last-child {
    border-right: none;
  }

  .main .main-container .items .item .item-top .item-top-right {
    width: 50%;
    margin: auto;
    grid-column: 1 / 3;
  }
}

@media only screen and (max-width: 950px) {
  .main .main-container .items .item .item-top {
    grid-template-columns: 1fr;
  }

  .main .main-container .items .item .item-top .item-top-left {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-center
    .item-top-center-part:nth-child(1) {
    border-left: none;
  }

  .main .main-container .items .item .item-top .item-top-right {
    width: 100%;
    grid-column: auto;
  }

  .main .main-container .items .item .item-bottom {
    grid-template-columns: repeat(2, 1fr);
  }

  .main .main-container .items .item .item-bottom .item-bottom-part-2 {
    border-right: none;
  }
}

@media only screen and (max-width: 600px) {
  .main .main-container .items .item .item-top .item-top-center {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }

  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-center
    .item-top-center-part:nth-child(3) {
    border-left: none;
  }
}

@media only screen and (max-width: 580px) {
  .main .main-container h2 {
    font-size: 25px;
  }

  .main .main-container .top-desc {
    font-size: 14px;
  }

  .main .main-container .top-desc br {
    display: none;
  }
}

@media only screen and (max-width: 520px) {
  .main .main-container .items .item .item-bottom {
    grid-template-columns: 1fr;
  }

  .main .main-container .items .item .item-bottom .item-bottom-part {
    border-right: none;
    border-bottom: 2px solid var(--secondary-color);
    padding: 0px 0px 20px 0px;
  }

  .main .main-container .items .item .item-bottom .item-bottom-part:last-child {
    border-bottom: none;
    padding: 0px;
  }
}

@media only screen and (max-width: 420px) {
  .main .main-container .items .item .item-top .item-top-center {
    grid-template-columns: 1fr;
  }

  .main
    .main-container
    .items
    .item
    .item-top
    .item-top-center
    .item-top-center-part {
    border-left: none;
  }
}

/* Youtube Main & Featured Section (Responsive) */
@media only screen and (max-width: 1340px) {
  .youtube-main .youtube-main-container {
    width: 90%;
  }

  .youtube-main .youtube-main-container h2 br {
    display: none;
  }

  .youtube-featured .youtube-featured-container {
    width: 90%;
  }
}

@media only screen and (max-width: 1100px) {
  .youtube-main .youtube-main-container {
    grid-gap: 20px;
  }
}

@media only screen and (max-width: 950px) {
  .youtube-main .youtube-main-container {
    grid-template-columns: 1fr;
  }

  .youtube-featured .youtube-featured-container .video-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 580px) {
  .youtube-main .youtube-main-container h2 {
    font-size: 25px;
  }

  .youtube-main .youtube-main-container .video-card iframe {
    height: 250px;
  }

  .youtube-featured .youtube-featured-container h2 {
    font-size: 25px;
  }

  .youtube-main .youtube-main-container .video-card .video-card-content h4 {
    font-size: 15px;
  }

  .youtube-main .youtube-main-container .video-card .video-card-content p {
    font-size: 12px;
  }

  .youtube-featured .youtube-featured-container .video-cards {
    grid-template-columns: 1fr;
  }

  .youtube-featured
    .youtube-featured-container
    .video-cards
    .video-card
    iframe {
    height: 250px;
  }
}

/* Twitch Main Section (Responsive) */
@media only screen and (max-width: 1450px) {
  .twitch-main .twitch-main-container #twitch-embed iframe {
    width: 100%;
    height: 650px;
  }
}

@media only screen and (max-width: 1050px) {
  .twitch-main .twitch-main-container #twitch-embed iframe {
    width: 100%;
    height: 550px;
  }
}

@media only screen and (max-width: 600px) {
  .twitch-main .twitch-main-container {
    width: 90%;
  }
}

@media only screen and (max-width: 580px) {
  .twitch-main .twitch-main-container h2 {
    font-size: 25px;
  }
}

.item-bottom-part-3 .flags {
    padding-bottom: 40px;
    border-bottom: 2px solid var(--secondary-color);
}

.item-bottom-part-3 .flags:last-child {
    padding-bottom: 0px;
    border-bottom: none;
}
a.logo.bdr-right {
    border-right: 1px solid white;
    padding-right: 8px;
    margin-right: 8px;
}
.icn img {
    width: 70% !important;
    /* height: 70%; */
}