/* ============================================== */
/* VARIALBES */
/* ============================================== */

:root{
  --color-dark:    #212121;
  --color-black:   #1b1b1b;
  --color-grey:    #666;
  --color-pearl:   rgba(101, 101, 101, 0.1);
  --color-soft:    #f1f1f1;
  --color-green:   #00CC54;
  --color-green-light: #D3FED2;
  --gradient-dark-green: linear-gradient(180deg, #212925 0%, #111914 100%);
  --gradient-trans-green: linear-gradient(to right, rgba(5, 182, 77, 0), rgba(5, 182, 77, 1) 50%, rgba(5, 182, 77, 0));

  --header-h: 72px;
}

@media only screen and (max-width: 1080px){
  :root{
    --header-h: 60px;
  }
}

/* ============================================== */
/* COLORS */
/* ============================================== */

.c-green{  background-color: var(--color-green);  }
.gradient-dark{  background: var(--gradient-dark-green);  }
.gradient-green{  background: var(--gradient-trans-green);  }

.tc-green{  color: var(--color-green);  }
.tc-green-light{  color: var(--color-green-light);  }

.bevel-corner{
  background: linear-gradient(140deg, transparent 3%, var(--color-pearl) 3%, var(--color-pearl) 97%, transparent 97%);
}

/* ============================================== */
/* FONTS */
/* ============================================== */

.f-aldrich{  font-family: 'Aldrich', sans-serif;  }
.f-poppins{  font-family: 'Poppins', sans-serif;  }

/* ============================================== */
/* UTILTIES */
/* ============================================== */

.uppercase{  text-transform: uppercase;  }
.m-t-0{  margin-top: 0;  }
.p-0-30{  padding: 0 30px;  }
.abs{  position: absolute;  }

.bg-img{
  width: 100%;
  height: 100%;
}
.obj-cover{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.m-auto{
  margin: auto;
}

@media only screen and (max-width: 768px){
  .small-p-10-30{
    padding: 10px 30px;
  }
  .small-m-center{
    margin-right: auto;
    margin-left: auto;
  }
}

/* ============================================== */
/* BTN */
/* ============================================== */

.btn.outline.b-green{
  border: 1px solid var(--color-green);
}
.btn.outline.b-green:hover{
  background-color: var(--color-green);
  color: #fff;
}

/* ============================================== */
/* HERO */
/* ============================================== */

.hero-title{
  max-width: 20ch;
}
.hero-text{
  max-width: 42ch;
}
.hero-after{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.hero-divider{
  height: 6em;
}

@media only screen and (max-width: 1080px){
  .hero .bg-overlay{
    background-color: rgba(0,0,0,0.4);
  }
}
@media only screen and (max-width: 768px){
  .hero .bg-overlay{
    background-color: rgba(0,0,0,0.6);
  }
}

/* ============================================== */
/* NFT */
/* ============================================== */

.bg-board{
  z-index: -1;
  opacity: 0.5;
}
.heart-img{
  bottom: -30px;
  left: 15%;
  z-index: 2;
}
.nft-container{
  padding: 2em 2em 1em;
}
.nft-block{
  margin-top: -40px;
}

.future-text{
  max-width: 52ch;
}
.future-big{
  max-width: 22ch;
}
.future-subtitle::before{
  content: url(../../images/body/separator.svg);
  display: block;
  position: absolute;
  right: calc(100% + 2em);
  top: 0;
}

@media only screen and (max-width: 1080px){
  .future-subtitle::before{
    content: '';
    display: none;
  }
}
@media only screen and (max-width: 768px){
  .heart-img{
    position: static;
    max-width: 300px;
    margin-bottom: 1em;
  }
}

/* ============================================== */
/* WHY NAKAGAMES */
/* ============================================== */

.why-naka-text{
  padding-right: 2em;
}
.why-naka-icons{
  padding-left: 2em;
  transform: translateY(-18%);
}
.icons-container::after{
  content: '';
  display: block;
  width: 98%;
  height: 80%;
  position: absolute;
  bottom: 0;
  left: -2em;
  background: linear-gradient(140deg, transparent 3%, var(--color-pearl) 3%, var(--color-pearl) 97%, transparent 97%);
  z-index: -1;
}

@media only screen and (max-width: 1080px){
  .why-naka-text{
    padding-right: 0;
  }
  .why-naka-icons{
    padding-left: 0;
    transform: translateY(0);
    margin-top: 2em;
  }
}
@media only screen and (max-width: 768px){
  .icons-container::after{
    left: 0;
    height: 95%;
  }
}

/* ============================================== */
/* TEAM */
/* ============================================== */

.bg-team{
  opacity: 0.4;
}
.border-before{
  top: 0;
  left: 0;
}

@media only screen and (max-width: 768px){
  .team-block{
    padding-top: 2em;
    padding-bottom: 2em;
  }
}

/* ============================================== */
/* CUN GAME */
/* ============================================== */

.cungame-title{
  max-width: 18ch;
}
.cungame-text{
  max-width: 50ch;
}
@media only screen and (max-width: 768px){
  .cungame-benefits br{
    display: none;
  }
}

.benefits-grid{
  grid-template-columns: 1.8fr 1.1fr 1.1fr 1.1fr 1.8fr;
  border: 1px solid var(--color-black);
}
.corner-tr{
  top: -1px;
  right: -1px;
}
.corner-bl{
  bottom: -1px;
  left: -1px;
}
.benefit{
  padding: 2em;
  height: 100%;
}
.benefit-text{
  transition-property: background-color, color;
  transition: 0.2s linear;
}
.benefit:hover .benefit-text{
  background-color: var(--color-green);
  color: #fff;
}
.benefit:not(:last-child){
  border-right: 1px solid var(--color-black);
}
.commission{
  max-width: 48ch;
  margin-top: 2%;
}
.before-line-big::before, .before-line-small::before{
  content: '';
  width: 4px;
  display: block;
  background-color: var(--color-black);
  position: absolute;
}
.before-line-big::before{
  height: 60%;
  top: 10px;
  left: -4px;
}
.before-line-small::before{
  height: 36%;
  top: 40%;
  left: 0;
}
.benefits-grid::after{
  content: 'NFT';
  padding: 0.65em 1em;
  background-color: #fff;
  display: block;
  position: absolute;
  bottom: 0;
  left: 15%;
  transform: translateY(50%);
  pointer-events: none;
}

@media only screen and (max-width: 1080px){
  .benefits-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .benefits-grid::after{
    left: 25%;
  }
  .benefit:first-of-type, .benefit:last-of-type{
    grid-column: span 3;
    border-right: none;
  }
  .benefit:nth-last-of-type(2){
    border-right: none;
  }
  .benefit:not(:last-of-type){
    border-bottom: 1px solid var(--color-black);
  }
}
@media only screen and (max-width: 768px){
  .benefits-grid{
    grid-template-columns: 1fr;
  }
  .benefits-grid::after{
    left: 60%;
  }
  .benefit:first-of-type, .benefit:last-of-type{
    grid-column: span 1;
  }
  .benefit:not(:last-child){
    border-right: none;
  }
  .level-img{
    max-width: 80px;
  }
  .commission{
    margin-top: 3%;
  }
}

/* ============================================== */
/* CONTACT */
/* ============================================== */

.contact-section{
  overflow: hidden;
}
.top-line{
  height: 2px;
}
.contact-green-lines{
  left: 50%;
  transform: translateX(-50%);
}
.footer-logo, .footer-big-text{
  margin-bottom: 4rem;
}
.footer-big-text{
  filter: drop-shadow(0 0 4px var(--color-green-light));
}
.map{
  bottom: 0;
  left: 10%;
  opacity: 0.05;
}
.logos-grid{
  margin: 3em 0;
}
.logos-partner{
  opacity: 0.4;
}
.social-footer .icon::after{
  width: 40px;
  height: 40px;
  top: 2.5px;
  left: 2.5px;
}
.gradient-footer{
  bottom: 0;
  left: 0;
  height: 50%;
  background: linear-gradient(to top, #111914, transparent);
}

@media only screen and (max-width: 1080px){
  .map{
    left: 0;
    height: 60%;
    object-fit: cover;
  }
}
@media only screen and (max-width: 768px){
  .footer-logo{
    width: 60px;
  }
  .contact-green-lines > div:nth-child(n + 7){
    display: none;
  }
  .contact-block{
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .footer-logo, .footer-big-text{
    margin-bottom: 2rem;
  }
}

/* ============================================== */
/* FOOTER */
/* ============================================== */

.footer{
  --footer-h: 50px;
  height: var(--footer-h);
  margin-top: calc(var(--footer-h) * -1);
  background-color: transparent;
  z-index: 2;
}
.footer p{
  margin: 0;
  font-size: 0.8rem;
}

/* ============================================== */
/* ANIMATIONS */
/* ============================================== */

.tran-op{
	--d: 0s;
	transform: translate3d(var(--dist-x), var(--dist-y), 0);
	opacity: 0;
}
.opacity{
  --d: 0s;
  opacity: 0;
}
.animated.tran-op{
	animation: tranOp 0.5s var(--d) ease-out forwards;
}
.animated.opacity{
	animation: show 0.5s var(--d) ease-out forwards;
}

.hero-subtitle, .hero-line, .hero-title, .hero-text, .hero-btn{
  --dist-x: 40px;
  --dist-y: 0;
  animation: tranOp 0.5s var(--d) ease-out forwards;
}
.hero-subtitle, .hero-line{
  --d: 1.4s;
}
.hero-title{
  --d: 1.5s;
}
.hero-text{
  --d: 1.6s;
}
.hero-btn{
  --d: 1.7s;
}

.about-icons{
  --dist-x: 0;
  --dist-y: 30px;
}
@media only screen and (min-width: 769px){
  .about-icons:nth-child(2){
    --d: 0.3s;
  }
  .about-icons:nth-child(3){
    --d: 0.6s;
  }
}

.nft-container{
  --dist-x: 40px;
  --dist-y: 0;
}

.benefits-grid{
  --dist-x: 0;
  --dist-y: 40px;
}

.animated .benefit.opacity{
  animation: show 0.5s var(--d) ease-out forwards;
}
.animated .benefit:nth-of-type(2){
  --d: 0.2s;
}
.animated .benefit:nth-of-type(3){
  --d: 0.4s;
}
.animated .benefit:nth-of-type(4){
  --d: 0.6s;
}
.animated .benefit:nth-of-type(5){
  --d: 0.8s;
}

.level{
  --dist-x: 0;
  --dist-y: 30px;
}
@media only screen and (min-width: 769px){
  .level:nth-child(2){
    --d: 0.3s;
  }
  .level:nth-child(3){
    --d: 0s;
  }
  .level:nth-child(4){
    --d: 0.3s;
  }
}
@media only screen and (min-width: 1081px){
  .level:nth-child(2){
    --d: 0.3s;
  }
  .level:nth-child(3){
    --d: 0.6s;
  }
  .level:nth-child(4){
    --d: 0.9s;
  }
}

@keyframes tranOp {
	to{
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}
@keyframes show {
	to{
		opacity: 1;
	}
}