* { margin: 0%;
    padding: 0%;
    box-sizing: border-box;}

body { background-color: #161d24 !important;}

a { text-decoration: none !important;}

.container { max-width: 1320px !important;
            padding: 0px !important;}

.sec01_h {background: url(./img/hero.png);
          padding: 80px 20px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
            height: 100vh;}

header { background-color: #000 !important;
        padding: 20px;}

.logo { width: 150px;}

.ju_e {justify-content: end;}

.wc { color: #fff;}

h1, h2, h3, h4, h5, h6, p, span, label, input, select, b, a, li, th, td { font-family: "Outfit", sans-serif !important;}

.nav-link { color: #fff !important;
            font-size: 18px;}

.here { position: absolute;}

section { position: relative;}

.hero1 { top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
         z-index: 9;
        width: 800px;}

.hero2 { top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 1500px;
    width: 90%;}

.hero3 { bottom: 10%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 800px;
    z-index: 12;
    width: 90%;}


    @keyframes slides {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-100%);
        }
      }
      
      .logos {
        overflow: hidden;
        padding: 30px 0px;
        white-space: nowrap;
        position: relative;
      }
      
      .logos:before, .logos:after {
        position: absolute;
        top: 0;
        content: '';
        width: 250px;
        height: 100%;
        z-index: 2;
      }
      
      .logo_items {
        display: inline-block;
        animation: 35s slides infinite linear;
      }
      
      .logos:hover .logo_items {
        animation-play-state: paused;
      }
      
      .logo_items .lo1 {
        height: 150px;
        margin: 0px 40px;
        display: inline-block;
      }

.sec02_h { background-color: #0f1c23;
            padding: 60px 20px;}

.sec03_h { padding: 70px 20px;
            background-color: #000;}

.gc { color: #45f882 !important;}

.sub_title { font-size: 26px;
            margin-bottom: 20px;}

.title_h2 { font-size: 56px;}

.rt_box { position: relative;
          padding:160px 20px 20px;
          border-radius: 20px;
            border: 1px solid gray;
            margin-top: 280px;}

.rt_icon_img {width: 50px;
              height: 50px;}

.rt_icon_box { background-color: #0f1c23;
                position: absolute;
                padding: 20px;
                border-radius: 50px;
                border: 7px solid #000;
                top: 40px;
                left: 20px;}

.rt_img {
    width: 80%;
    height: 330px;
    border-radius: 20px;
    position: absolute;
    object-fit: cover;
    top: -230px;
    left: 10%;}

.review { background-color: #0f1c23;
            padding: 5px 10px;
            border-radius: 10px;
            font-size: 14px;}

.rt_text { font-size: 18px;}

.rt_titleh4 { font-size: 27px;}

.al_c { align-self: center;}

.jc_sb { justify-content: space-between;}

.re_text { font-size: 16px;
            color: gray;
            margin-top: 15px;}

.rt_box:hover { border-color: #45f882;}

.rt_box:hover .rt_icon_box { background-color: #45f882;}

.about {width: 100%;}

.wf_box { padding: 20px 30px;
          border-radius: 20px;
          border: 1px solid gray;  }

.wf_box:hover { border-color: #45f882;}

.ab_01 { width: 80px;
        margin-right: 30px;}

.wf_title_h4 { font-size: 36px;}

.wf_text_p { font-size: 18px;
            color: #969eb2;
            margin-top: 20px;}

.mar_top { margin-top: 50px !important;}

.cuntar_title { font-size: 76px;
                font-weight: 800;}

.cuntar_text { font-size: 20px;}

.sec04_h { background-color: #000;
          padding: 70px 20px;}

.gm_box {
  /* -webkit-clip-path: polygon(22% 0%, 78% 0%, 100% 50%, 78% 100%, 22% 100%, 0% 50%); */
  clip-path: polygon(22% 0%, 78% 0%, 100% 50%, 78% 100%, 22% 100%, 0% 50%);
  background:#0f1c23;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  padding: 30px;
  border: 1px solid #45f882;
  height: 190px;
}

.pr { position: relative;}

.dm_img1 { width: 90px;}

.gm_box02 { background: url(./img/tournament.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            padding: 20px;
            height: 190px;
            align-self: center;
            }

.gm_sub_title { font-size: 16px;}

.gm_title {font-size: 34px;}

.ggg { justify-content: center;}

.gm_black { background-color: #000;
            padding: 20px 40px;
            border-radius: 10px;}

.ggg { gap: 30px;}

.black_time {
  font-size: 40px;
  font-weight: 700;}

  .black_date.mb-0 {
    font-size: 20px;
    color: gray;}

.sec05_h { padding: 70px 20px;
           background-color: #000;}

.jo { background: url(./img/sec05_bg.png);
            background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          height: 368px;
          padding: 50px;}

.jo_title { font-size: 46px;}

.jo_text { font-size: 22px;
            color: gray;
          max-width: 800px;
          margin:30px auto;}

.th-btn {
  text-align: center;
  background-color: #45f882;
  color: #000 !important;
  font-size: 16px;
  font-weight: 700;
  min-width: 200px;
  position: relative;
  justify-content: center;
  clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0% 50%);
  overflow: hidden;
  padding: 16px 40px;
  display: inline-block;
  margin-top: 10px;
}

.th-btn:before, .th-btn:after {
  content: "";
  position: absolute;
  background-color: #000;
  z-index: -1;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  top: 5px;
  left: 5px;
  width: 16px;
  height: calc(100% - 10px);
  border-radius: 0;
  transition: -webkit-clip-path 0.2s ease;
  -webkit-transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
  -webkit-clip-path: polygon(85% 0, 100% 0, 15% 50%, 100% 100%, 85% 100%, 0% 50%);
  clip-path: polygon(85% 0, 100% 0, 15% 50%, 100% 100%, 85% 100%, 0% 50%);
}

.th-btn:after {
  right: 5px;
  left: auto;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sec06_h { background: url(./img/video-sec-bg.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          background-attachment: fixed;
          height: 550px;}


.con {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.play_btn {
  border: 2px dotted white;
  color: aliceblue !important;
  border-radius: 50%;
  padding: 50px 42px 40px;
  position: relative;
}

.play_btn::after {
  position: absolute;
  content: '';
  bottom: -7px;
  top: -7px;
  left: -7px;
  right: -7px;
  background-color: transparent;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0px;
  opacity: 1;
  transform-origin: center;
  animation: anim 800ms linear infinite;
}

.play_btn::before {
  position: absolute;
  content: '';
  bottom: -7px;
  top: -7px;
  left: -7px;
  right: -7px;
  background-color: transparent;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0px;
  opacity: 0.8;
  transform-origin: center;
  animation: anim 18000ms linear 1400ms infinite;
}

@keyframes anim {
  from {
      margin: 0px;
      opacity: 1;
  }

  to {
      margin: -15px;
      opacity: 0;
  }
}

.play_btn i { font-size: 35px;}

table { width: 100%;}

.table_row1 { background-color: #45f882;}

.table_h, .table_data { padding: 15px 20px;
                        font-size: 20px;}

.table_h:nth-child(1), .table_data:nth-child(1) {padding-left: 50px;}

.table_h:nth-child(last), .table_data:nth-child(last) {padding-right: 50px;}

.table_row {clip-path: polygon(2% 0%, 98% 0%, 100% 50%, 98% 100%, 2% 100%, 0% 50%);}

.table_row2 {
  background-color: #0f1c23;
  position: relative;
  top: 15px;}

.table_img { width: 34px;
  margin-right: 15px;}

.sec07_h { padding: 70px 20px;
            background-color: #000;}

.bc_card { background: url(./img/blog_card.jpg);
            background-repeat: no-repeat;
          background-size: cover;
          border-radius: 20px;
          margin-top: 30px;
          padding: 30px;}

.bc_img { width: 100%;
          border-radius: 20px;
          clip-path: polygon(20% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 25% 100%, 0 100%, 0% 20%);
        }

.pl_now { font-size: 18px;
          margin-top: 10px;
          display: inline-block;}


footer { padding: 70px 20px 40px;
          background-color: #000;}

.footer_logo { width:500px;
    background: #0f1c23;
    display: inline-block;
    clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 60px 100%);
    padding: 22px 110px;
}

.footer05 { border-width: 5px 0px 5px 0px;
            border-style: solid;
            border-color: #0f1c23;
            padding: 40px 0px;}

.f_l_l { display: flex;
          column-gap: 40px;
        justify-content: center;
        padding: 40px 20px;}

.foo_l { font-size: 18px;
        color: #fff !important;}

.foo_text { font-size: 19px;
            color: gray;}

.footer_title { font-size: 28px;}

.s_m_l { column-gap: 10px;
          margin-top: 20px;}

.sm_i { display: inline-block;
        background-color: #0f1c23;
        padding: 10px 15px;
        border-radius: 10px}

.sm_i i { font-size: 20px;
          color: #fff;}

.foo_form { display: flex;
            column-gap: 15px;
            justify-content: center;}

  .form_input { background-color: #0f1c23;
      clip-path: polygon(2% 0%, 98% 0%, 100% 50%, 98% 100%, 2% 100%, 0% 50%);
      display: block;
      width: 100%;
      padding: 14px 50px;
      font-size: 20px;
      color: #fff;
      border: none;
  }

  .f_f { max-width: 800px;
          margin: 40px auto;}


  input { border: none;}

  .sub_btn { margin-top: 0px;
    font-family: "Outfit", sans-serif !important; }

  .foo_last_t { font-size: 18px;}

  .ar_foo { border-top: 5px solid #0f1c23;
            padding-top:40px ;}

  .con_head { min-width: 141px;
              margin: 0px 0px 0px 30px;}

  .nav-item { align-self: center;}

  @media (max-width:1100px) {
    .jo_title { font-size: 40px;}

    .title_h2 { font-size: 48px;}

    .hero1 { width: 600px;}

    .rt_titleh4 { font-size: 21px;}

    .rt_text { font-size: 16px;}

    .cuntar_title { font-size: 60px;}

    .gm_title { font-size: 28px;}

    .black_time { font-size: 25px;}

    .gm_black { padding: 15px 20px;}

    .black_date.mb-0 { font-size: 14px;}

    .gm_box02, .gm_box { height: 150px;}

    .dm_img1 { width: 50px;}
  }

  @media (max-width:992px) {

  header { padding: 2px 20px;}

  .sec02_h { padding: 25px 20px;}

  .logo_items .lo1 { height: 100px;
    margin: 0px 25px;}

  .sec03_h { padding: 50px 15px;}

  .rt_img {height: 232px;
    top: -125px;}

  .title_h2 { font-size: 36px;}

  .rt_icon_img {
    width: 30px;
    height: 30px;}

  .rt_box {padding: 138px 12px 12px;
    margin-top: 160px;}

    .re_text { font-size: 11px;}

    .rt_titleh4 { font-size: 17px;}

    .review { font-size: 10px;}

    .rt_text {font-size: 13px;}

    .ab_01 { width: 50px;
      margin-right: 17px;}

    .wf_title_h4 { font-size: 27px;}

    .wf_text_p { font-size: 17px;
      margin-top: 10px;}

    .cuntar_title { font-size: 40px;}

    .cuntar_text { font-size: 16px;}
  
    .sec04_h { padding: 50px 20px;}

    .gm_title { font-size: 24px;}

    .sec06_h { height: 360px;}

    .jo_title { font-size: 30px;}

    .jo_text {
      font-size: 18px;
      margin: 28px auto;}

    .sec05_h { padding: 50px 20px;}

    .sec07_h { padding: 50px 20px;}

    .bc_card { padding: 15px;}

    .pl_now { font-size: 14px;}

    .mar_top {margin-top: 35px !important;}

    footer { padding: 50px 20px 40px;}

    .footer_logo { width: 390px;}

    .foo_text { font-size: 17px;}

    .sub_title {
      font-size: 22px;
      margin-bottom: 10px;}

    .table_h, .table_data {
        padding: 15px 3px;
        font-size: 18px;}

    .hero1 { width: 436px;}

    .sec01_h {height: 76vh;}

  }


  @media (max-width:767px) {
    .logos { padding: 0px;}

    .logo_items .lo1 { height: 65px;}

    .title_h2 { font-size: 32px;}

    .sub_title { font-size: 18px;}

    .about { margin-bottom: 30px;}

    .t_d_n { display: none !important;}

    .wf_title_h4 { font-size: 20px;}

    .sec03_h { padding: 40px 15px;}

    .sec04_h { padding: 40px 15px;}

    .jo_title { font-size: 24px;}

    .th-btn { font-size: 14px;}

    .table_h, .table_data { font-size: 13px;}

    .table_h:nth-child(1), .table_data:nth-child(1) { padding-left: 25px;}

    .table_h:nth-child(last), .table_data:nth-child(last) {padding-right: 25px;}

    .table_img {
      width: 27px;
      margin-right: 8px;}

    .sec07_h {padding: 40px 15px;}

    footer { padding: 40px 15px 30px;}

    .footer_title { font-size: 22px;}

    .footer05 { padding: 30px 0px;
                border-width: 3px 0px 3px 0px;}

    .foo_last_t { font-size: 14px;}

    .ar_foo { padding-top: 30px;
              border-width: 3px;}

    .form_input { font-size: 16px;}

    .jo_text { font-size: 16px;}

    .sec05_h { padding: 40px 15px;}
  }


  @media (max-width:575px) {
    .footer_logo {width: 295px;
                  padding: 15px 60px;}

    .f_l_l { display: flex; 
             padding: 15px;
              justify-content: space-between;
            column-gap: 15px;}
             
    .hero1 {width: 222px;}

    .sec01_h { height: 266px;}
  
    .title_h2 { font-size: 28px;}

    .ab_01 {
      width: 40px;
      margin-right: 15px;}

    .black_time { font-size: 17px;}

    .gm_black { padding: 10px 10px;}

    .ggg { gap: 12px;}

    .gm_title { font-size: 15px;}
  
    .gm_sub_title { font-size: 10px; }

    .jo { background: none;
          padding: 0px;
          height: 240px;}

    .foo_l { font-size: 14px;}

    .foo_form {
      display: block;
      text-align: center;}

    .sub_btn { display: inline-block;
                margin-top: 20px;}

    .table_main { overflow-x: hidden;}

    .table_scroll { overflow-x: scroll;}
              
    .pt_table { width: 600px;}

    .kjjj { margin-top: 0px;}

  }