:root {
  --btn-primary-color: rgb(33, 231, 134);
  --secondary-color: rgb(20, 27, 34);
  --article-bg-color: rgba(255, 255, 255, 0.05);
  --main-background-color: rgb(13, 13, 17);
  --text-color: rgb(194, 195, 197);
  --inactive-color: rgb(136, 139, 142);
  --text-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --btn-header-font: "Bakbak One", "Arial Black", Arial, sans-serif;
  --transition-effect: 0.3s ease-in-out;
  scroll-behavior: smooth;
}

/********************** General css *********************/

* {
  padding: 0;
  margin: 0;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  background-color: rgb(4, 11, 17);
  font-family: "Bakbak One", "Arial Black", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.56;
  color: rgb(255, 255, 255);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

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

.wrapper {
  max-width: 1450px;
  width: 100%;
  margin: auto;
  padding-inline: 20px;
}

/**************** Buttons styles ****************/

button {
  cursor: pointer;
}

.btn-basic {
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.5;
  gap: 8px;
  text-transform: uppercase;
}

.btn-media {
  display: inline-flex;
  background-color: rgb(88, 101, 242);
  border: 1px solid rgb(88, 101, 242);
  transition: background var(--transition-effect);
}

.btn-media:hover,
.btn-media:active,
.btn-media:focus {
  background-color: rgba(88, 101, 242, 0.5);
}

.btn-light {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--btn-primary-color);
  background-color: var(--btn-primary-color);
  color: var(--secondary-color);
  font-family: var(--btn-header-font);
  transition: background var(--transition-effect);
}

.btn-light:hover,
.btn-light:active,
.btn-light:focus {
  background-color: rgba(33, 231, 134, 0.5);
}

.btn-border {
  border: 2px solid var(--btn-primary-color);
  background-color: inherit;
  color: rgb(255, 255, 255);
  font-family: var(--btn-header-font);
  transition: background var(--transition-effect);
}

.btn-border:hover,
.btn-border:active,
.btn-border:focus {
  background-color: rgba(33, 231, 134, 0.2);
}

/* Text styles */
.highlighted-text {
  color: var(--btn-primary-color);
}

.secondary-heading {
  font-size: 44px;
  line-height: 1.27;
  text-align: center;
  text-transform: uppercase;
}

/********************* Header styles *****************************/

.header {
  display: flex;
  background-color: rgb(4, 11, 17);
  position: sticky;
  padding-top: 30px;
  padding-bottom: 30px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 60px;
}

.logo-block {
  display: flex;
  align-items: center;
  font-size: 32px;
  line-height: 1.31;
  gap: 0 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--transition-effect);
}

.logo-block:hover,
.logo-block:active,
.logo-block:focus {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/************* Header navigation styles *******************/
.nav-menu {
  max-width: 710px;
  width: 100%;
}

.nav-menu-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 30px;
  padding-bottom: 4px;
}

.nav-menu-item {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 2px;
}

.nav-menu-name {
  position: relative;
}

.nav-menu-item:not(.active) .nav-menu-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--btn-primary-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-menu-item:not(.active):hover .nav-menu-name::after,
.nav-menu-item:not(.active):active .nav-menu-name::after,
.nav-menu-item:not(.active):focus .nav-menu-name::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-menu-item.active .nav-menu-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--btn-primary-color);
}

.nav-dropdown-item {
  position: relative;
  cursor: pointer;
}

.arrow-down {
  stroke: rgb(255, 255, 255);
  vertical-align: middle;
  margin-left: 4px;
  padding-bottom: 4px;
  transition: var(--transition-effect);
}

.nav-menu-item:hover .arrow-down,
.nav-menu-item:active .arrow-down,
.nav-menu-item:focus .arrow-down {
  transform: rotateX(180deg);
  margin-bottom: 4px;
}

.dropdown-content {
  display: none;
  width: max-content;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 18px;
  padding: 16px 100px 16px 20px;
  background-color: var(--secondary-color);
  box-shadow: 0 10px 25px rgba(71, 92, 133, 0.1);
  z-index: 1;
}

.dropdown-content::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 12px;
  border: 10px solid transparent;
  border-bottom-color: var(--secondary-color);
}

.nav-dropdown-item:hover .dropdown-content {
  display: block;
}

.dropdown-item:not(:last-child) {
  padding-bottom: 14px;
}

.dropdown-item {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: capitalize;
}

.dropdown-item-link {
  transition: color var(--transition-effect);
}

.dropdown-item-link:hover,
.dropdown-item-link:active,
.dropdown-item-link:focus {
  color: var(--btn-primary-color);
}

.btn-box {
  display: flex;
  align-items: center;
  column-gap: 20px;
}

.darkmode-toggle + .switch-mode::before {
  display: inline-block;
  text-align: center;
  line-height: 60px;
  content: url("../img/icons/switch.svg");
  background-color: var(--secondary-color);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: var(--transition-effect);
}

.darkmode-toggle:checked + .switch-mode::before {
  content: url("../img/icons/switch-dark.svg");
  background-color: var(--btn-primary-color);
}

/* ************************** */

.btn-media-header {
  display: flex;
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: background var(--transition-effect);
}

.btn-media-header:hover,
.btn-media-header:active,
.btn-media-header:focus {
  background-color: rgb(35, 46, 57);
}

/**************** Hero section **************************/

.hero-section {
  background-image: linear-gradient(
      to top,
      rgb(4, 11, 17) 15%,
      rgba(4, 11, 17, 0) 55%
    ),
    radial-gradient(
      ellipse at top left,
      rgba(48, 113, 101, 0.8) 10%,
      rgba(20, 27, 34, 0.6) 70%
    );
  background-repeat: no-repeat;
  background-size: auto, 750px 278px;
  background-position: bottom, top -100px left 0;
  background-color: var(--secondary-color);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: " ";
  display: inline-block;
  width: 496px;
  height: 496px;
  position: absolute;
  mask-image: url(../img/bg-s/star-big.svg),
    linear-gradient(to bottom, rgb(29, 35, 40) 0%, rgba(29, 35, 40, 0) 100%);
  mask-composite: intersect;
  mask-size: contain;
  right: -150px;
  bottom: -60px;
  transform: rotate(-30deg);
  background-color: rgb(29, 35, 40);
}

.hero-box {
  display: flex;
  align-items: center;
}

.hero-image {
  flex-shrink: 0;
  padding-left: 150px;
  position: relative;
}

.hero-content {
  width: 600px;
  padding-top: 140px;
  padding-bottom: 190px;
}

.hero-title {
  width: inherit;
  font-size: 72px;
  line-height: 1.11;
  text-transform: uppercase;
}

.last-line::before {
  content: "";
  white-space: pre;
  display: block;
}

.hero-text {
  font-family: var(--text-font);
  font-size: 20px;
  line-height: 1.5;
  padding: 20px 0 24px;
}

.hero-text::first-letter {
  text-transform: capitalize;
}

.hero-counter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 0.4fr;
  grid-template-areas:
    "hero-total  hero-profiles"
    "hero-total-tx hero-profiles-tx";
  grid-column-gap: 80px;
  grid-row-gap: 8px;
  max-width: 395px;
}

.hero-total-nb {
  grid-area: hero-total;
}

.hero-profiles-nb {
  grid-area: hero-profiles;
}

.hero-total-tx {
  grid-area: hero-total-tx;
}

.hero-profiles-tx {
  grid-area: hero-profiles-tx;
}

.hero-number {
  font-size: 44px;
  line-height: 1.27;
  text-shadow: 0 4px 13px rgba(255, 255, 255, 0.4);
}

.hero-description {
  font-family: var(--text-font);
  font-size: 16px;
  line-height: 1.63;
  color: var(--text-color);
}

.hero-description::first-letter {
  text-transform: capitalize;
}

.hero-btn {
  display: flex;
  padding-top: 48px;
  gap: 24px;
}

/*******************  nft-cards section ****************/

.nft-cards {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: var(--main-background-color);
  display: flex;
  column-gap: 30px;
  overflow-x: auto;
  white-space: nowrap;
  justify-content: space-between;
  scrollbar-width: none;
}

.nft-card-link {
  display: block;
  background-color: var(--article-bg-color);
  transition: var(--transition-effect);
}

.nft-card-link:hover,
.nft-card-link:active,
.nft-card-link:focus {
  opacity: 0.5;
  filter: invert(10%);
}

.nft-card {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 330px;
  padding: 20px;
}

.nft-card-title {
  font-size: 20px;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
}

/********************* About section ***********************/

.about-section {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  background-color: var(--main-background-color);
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: " ";
  width: 400px;
  height: 400px;
  background-image: url("../img/bg-s/star-big.svg");
  background-size: 400px;
  background-repeat: no-repeat;
  transform: rotate(-65deg);
  position: absolute;
  bottom: 100px;
  left: -150px;
  opacity: 80%;
}

.about-description {
  padding-top: 16px;
  padding-bottom: 60px;
  margin: auto;
  font-family: var(--text-font);
  color: var(--text-color);
  max-width: 930px;
}

.about-description::first-letter {
  text-transform: capitalize;
}

.about-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  list-style-position: inside;
  text-align: left;
  padding-bottom: 30px;
  counter-reset: list-item;
}

.about-list-item {
  padding: 30px;
  background-color: var(--secondary-color);
  max-width: 570px;
  position: relative;
  counter-increment: list-item;
}

.about-list-card {
  margin-top: -48px;
}

.about-list-title {
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 26px;
  text-transform: uppercase;
}

.about-list-description {
  font-family: var(--text-font);
  color: var(--text-color);
}

.about-list-description::first-letter {
  text-transform: capitalize;
}

.hp-about-btn {
  display: inline-block;
}

.about-list-item::marker {
  content: counter(list-item, decimal-leading-zero);
  color: var(--secondary-color);
  font-size: 80px;
  line-height: 1.2;
  text-shadow: 0 0 1px var(--btn-primary-color);
}

.hover-effect::before,
.hover-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 3px;
  border-style: solid;
  pointer-events: none;
}

.hover-effect::before {
  border-image: linear-gradient(
      to bottom right,
      rgba(33, 231, 134, 1) 0%,
      rgba(33, 231, 134, 0) 20%
    )
    1;
  opacity: 0;
  transition: var(--transition-effect);
}

.hover-effect::after {
  border-image: linear-gradient(
      to top left,
      rgba(33, 231, 134, 1) 0%,
      rgba(33, 231, 134, 0) 20%
    )
    1;
  opacity: 0;
  transition: opacity var(--transition-effect);
}

.hover-effect:hover::before,
.hover-effect:hover::after {
  opacity: 1;
}

/******************* Workflow section ********************/

.workflow {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: var(--main-background-color);
  position: relative;
  overflow: hidden;
}

.workflow::before {
  content: " ";
  width: 560px;
  height: 560px;
  background-image: url("../img/bg-s/star-big.svg");
  background-size: 560px;
  background-repeat: no-repeat;
  transform: rotate(33deg);
  position: absolute;
  top: 170px;
  right: -230px;
  opacity: 60%;
}

.workflow-cards {
  padding-top: 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 330px);
  justify-content: center;
  gap: 30px;
  text-align: center;
  list-style: none;
}

.workflow-item {
  background-color: var(--secondary-color);
  padding: 30px 30px 26px;
  counter-increment: count list-item;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.workflow-card-text {
  font-size: 24px;
  line-height: 1.33;
  text-transform: capitalize;
  text-wrap: nowrap;
}

.workflow-card-title {
  font-size: 22px;
  line-height: 1.36;
  color: var(--btn-primary-color);
  text-transform: uppercase;
}

.workflow-card-title::after {
  content: " " counter(count);
}

.step-connect::before {
  content: url("../img/img-workflow/icon1.svg");
  position: relative;
  top: -16px;
}

.step-select::before {
  content: url("../img/img-workflow/icon2.svg");
  position: relative;
  top: -6px;
}

.step-confirm::before {
  content: url("../img/img-workflow/icon3.svg");
  position: relative;
  top: -15px;
}

.step-receive::before {
  content: url("../img/img-workflow/icon4.svg");
  position: relative;
  top: -14px;
}

/******************* Road Map section ***********************/

.roadmap-section {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: var(--main-background-color);
  position: relative;
  overflow: hidden;
}

.roadmap-section::before {
  content: " ";
  width: 560px;
  height: 560px;
  background-image: url("../img/bg-s/star-big.svg");
  background-size: 560px;
  background-repeat: no-repeat;
  transform: rotate(33deg);
  position: absolute;
  top: -250px;
  right: -230px;
  opacity: 60%;
}

.roadmap-card {
  display: flex;
  column-gap: 80px;
  align-items: center;
  background-color: var(--article-bg-color);
  padding: 48px 44px;
  margin-top: 60px;
  margin-bottom: 24px;
}

.roadmap-img-box {
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "roadmap-img-big roadmap-img-sm"
    "roadmap-img-big roadmap-img-sm-last";
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: stretch;
}

.roadmap-img-big {
  grid-area: roadmap-img-big;
}

.roadmap-img-2 {
  grid-area: roadmap-img-sm;
}

.roadmap-img-sm-last {
  grid-area: roadmap-img-sm-last;
}

.roadmap-card-title {
  font-size: 36px;
  line-height: 1.22;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.roadmap-list {
  margin-bottom: 30px;
}

.roadmap-items {
  display: flex;
  column-gap: 8px;
  font-family: var(--text-font);
  color: var(--text-color);
  text-transform: capitalize;
}

.roadmap-items:not(:last-child) {
  margin-bottom: 20px;
}

.roadmap-items::before {
  content: url("../img/icons/phase-icon.svg");
}

/******** Phase line **********/

.roadmap-nav {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.btn-roadmap {
  background: none;
  border: none;
}

.btn-arrow {
  stroke: var(--text-color);
  stroke-width: 4;
  transition: stroke var(--transition-effect);
}

.btn-roadmap:hover .btn-arrow,
.btn-roadmap:active .btn-arrow,
.btn-roadmap:focus .btn-arrow {
  stroke: var(--btn-primary-color);
}

.btn-arrow-reverse {
  transform: rotate(180deg);
}

.roadmap-nav-item-list {
  display: flex;
  width: 90%;
  list-style: none;
  counter-reset: phase-list;
}

.roadmap-nav-item {
  width: 100%;
  counter-increment: phase-list;
}

.roadmap-label {
  font-size: 20px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-color);
  text-align: center;
  display: block;
  cursor: pointer;
}

.active:checked + .roadmap-label {
  color: rgb(255, 255, 255);
}

.active:checked + .roadmap-label .elipse-default {
  fill: var(--btn-primary-color);
}

.active:checked + .roadmap-label .progress-line::before {
  background-color: rgb(136, 139, 142);
}

.active:checked + .completed .progress-line::after {
  background-color: rgb(136, 139, 142);
}

.roadmap-label::after {
  content: " " counter(phase-list);
}

.progress-line {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
}

.progress-line::before,
.progress-line::after {
  content: " ";
  display: block;
  width: 50%;
  height: 2px;
  background-color: rgb(67, 67, 67);
}

.elipse-default {
  fill: #888b8e;
  flex-shrink: 0;
}

/****************** Team section ************************/

.team-section {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: var(--main-background-color);
  position: relative;
  overflow: hidden;
}

.team-section::before {
  content: "";
  width: 450px;
  height: 450px;
  background-image: url("../img/bg-s/star-big.svg");
  background-size: 450px;
  background-repeat: no-repeat;
  transform: rotate(-65deg);
  position: absolute;
  bottom: 100px;
  left: -210px;
  opacity: 80%;
}

.team-list {
  padding-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.team-card {
  background-color: var(--secondary-color);
  text-align: center;
  padding: 40px 20px;
  width: 330px;
  position: relative;
}

.team-name {
  font-size: 24px;
  line-height: 1.25;
  margin-top: 30px;
  margin-bottom: 4px;
  text-transform: capitalize;
}

.team-title {
  font-family: var(--text-font);
  color: var(--text-color);
  margin-bottom: 26px;
  text-transform: capitalize;
}

.team-connect-list {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.team-media-linkedin {
  fill: var(--text-color);
  border: 1px solid transparent;
  border-radius: 3px;
  transition: var(--transition-effect);
}

.team-media-item:hover .team-media-linkedin,
.team-media-item:active .team-media-linkedin,
.team-media-item:focus .team-media-linkedin {
  background-color: var(--text-color);
  fill: var(--secondary-color);
  border: 1px solid var(--text-color);
}

.team-media-facebook,
.team-media-telegram {
  fill: var(--secondary-color);
  background-color: var(--text-color);
  border: 1px solid var(--text-color);
  border-radius: 50%;
  transition: var(--transition-effect);
}

.team-media-item:hover .team-media-facebook,
.team-media-item:active .team-media-facebook,
.team-media-item:focus .team-media-facebook,
.team-media-item:hover .team-media-telegram,
.team-media-item:active .team-media-telegram,
.team-media-item:focus .team-media-telegram {
  fill: var(--text-color);
  background-color: var(--secondary-color);
}

.team-media-instargam {
  fill: var(--text-color);
  border: 1px solid transparent;
  border-radius: 5px;
  transition: var(--transition-effect);
}

.team-media-item:hover .team-media-instargam,
.team-media-item:active .team-media-instargam,
.team-media-item:focus .team-media-instargam {
  fill: var(--secondary-color);
  background-color: var(--text-color);
}

/****************** Partners section ***********************/
.partners {
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: var(--main-background-color);
  position: relative;
  overflow: hidden;
}

.partners::before {
  content: "";
  width: 284px;
  height: 284px;
  background-image: url("../img/bg-s/star-small.svg");
  background-size: 284px;
  background-repeat: no-repeat;
  transform: rotate(165deg);
  position: absolute;
  bottom: 30px;
  left: -160px;
  opacity: 80%;
}

.partners-cards {
  padding-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.partners-card-item {
  padding: 20px 24px;
}

.partner-banner {
  display: block;
}

.banner-bg {
  background-color: var(--secondary-color);
}

/************************** FAQs section ***********************/

.faq-box-section {
  background-color: var(--main-background-color);
}

.faq-title {
  margin-bottom: 60px;
}

.faq-box {
  position: relative;
  top: 220px;
  left: 0;
  margin-top: -200px;
}

.faqs-card {
  margin: 0 auto;
  background-color: var(--secondary-color);
  padding: 30px 20px;
  max-width: 930px;
  transition: background var(--transition-effect);
}

.faqs-card:not([open]):hover,
.faqs-card:not([open]):active,
.faqs-card:not([open]):focus {
  background-color: rgb(16, 21, 26);
}

.faqs-card:not(:last-child) {
  margin-bottom: 24px;
}

.faqs-name {
  font-size: 24px;
  line-height: 1.25;
  color: rgb(194, 195, 197);
  list-style: none;
  cursor: pointer;
}

.faqs-name::-webkit-details-marker,
.faqs-name::marker {
  display: none;
}

.faqs-name::first-letter,
.faqs-content::first-letter {
  text-transform: capitalize;
}

.faqs-name::after {
  content: url("../img/icons/plus.svg");
  float: right;
}

.faqs-card[open] .faqs-name {
  color: rgb(255, 255, 255);
}

.faqs-card[open] .faqs-name::after {
  content: url("../img/icons/minus.svg");
}

.faqs-content {
  font-family: var(--text-font);
  color: var(--text-color);
  border-top: 1px solid rgb(67, 67, 67);
  margin-top: 16px;
  padding-top: 16px;
}

/*********************** Homepage Footer ***********************/

/******************* Homepage call-action section **************/

.cta-homepage {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 80px;
  padding-top: 320px;
}

.cta-homepage-text {
  font-family: var(--text-font);
  color: var(--text-color);
  padding-top: 8px;
  padding-bottom: 40px;
}

.cta-homepage-text::first-letter {
  text-transform: capitalize;
}

.cta-homepage-btns {
  display: flex;
  justify-content: center;
  column-gap: 36px;
  padding-bottom: 40px;
}

/* Homepage newsletter subcribtion form */

.home-newsletter {
  margin: 0 auto;
  display: flex;
  max-width: 690px;
}

.site-newsletter {
  width: 440px;
}

.site-newsletter-fieldset {
  border: none;
}

.site-newsletter-wrapper {
  display: flex;
}

.newsletter-field {
  padding: 14px 24px;
  background-color: rgba(194, 195, 197, 0.15);
  border: 1px solid transparent;
  width: 100%;
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.63;
}

.newsletter-field:hover {
  background-color: rgba(194, 195, 197, 0.1);
  transition: background var(--transition-effect);
}

.newsletter-field:focus {
  background-color: rgba(194, 195, 197, 0.1);
  border: 1px solid var(--text-color);
  outline: 1px inset var(--text-color);
}

.newsletter-field:-webkit-autofill,
.newsletter-field:-webkit-autofill:hover,
.newsletter-field:-webkit-autofill:focus {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--text-color);
  -webkit-box-shadow: 0 0 0 50px rgba(194, 195, 197, 0.1) inset;
}

.field-validation:valid:not(:placeholder-shown) {
  border: 1px solid var(--btn-primary-color);
}

.field-validation:invalid:not(:placeholder-shown) {
  border: 1px solid rgb(255, 0, 0);
}

input::placeholder {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.63;
  opacity: 0.6;
}

input::placeholder::first-letter {
  text-transform: capitalize;
}

/************ social-networks Footer *********************/

.social-networks-items {
  display: inline-flex;
  justify-content: center;
  gap: 30px;
  padding-top: 30px;
}

.network-item {
  background-color: rgba(194, 195, 197, 0.15);
  width: 50px;
  height: 50px;
  padding: 12px 10px;
  transition: var(--transition-effect);
}

.network-item:hover,
.network-item:active,
.network-item:focus {
  background-color: rgba(194, 195, 197, 0.05);
  box-shadow: inset 0 0 0 1px rgba(194, 195, 197, 0.15);
}

/*************** footer-nav section *********************/

.footer-border {
  border-top: 1px solid rgb(67, 67, 67);
  padding: 20px 0;
}

.footer-nav {
  display: flex;
  justify-content: space-between;
}

.footer-logo-box {
  display: flex;
  align-items: center;
  gap: 60px;
}

.footer-logo {
  display: flex;
  font-size: 22px;
  line-height: 1.36;
  gap: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--transition-effect);
}

.footer-logo:hover,
.footer-logo:active,
.footer-logo:focus {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.footer-copyright-text {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.57;
}

/************************ Homepage Footer Pages ******************/

.nav-pages-items {
  display: flex;
  justify-content: space-between;
  column-gap: 46px;
}

.nav-pages-item {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.57;
  text-transform: capitalize;
  transition: color var(--transition-effect);
}

.nav-pages-item:visited {
  color: rgb(136, 136, 137);
}

.nav-pages-item:hover,
.nav-pages-item:active,
.nav-pages-item:focus {
  color: rgba(194, 195, 197, 0.5);
}

/************************* CATALOG Page **************************/

/******************* Breadcrumbs ***************************/

.breadcrumbs {
  background-color: var(--secondary-color);
  padding-top: 75px;
  padding-bottom: 75px;
}

.breadcrumbs-list {
  padding-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  font-size: 14px;
  line-height: 1.43;
  text-transform: uppercase;
}

.breadcrumbs-link {
  color: var(--inactive-color);
  transition: color var(--transition-effect);
}

.vertical-line::before {
  content: "";
  display: block;
  width: 1.5px;
  height: 16px;
  background-color: var(--inactive-color);
}

.breadcrumbs-link:hover,
.breadcrumbs-link:active,
.breadcrumbs-link:focus {
  color: var(--btn-primary-color);
}

/********** Catalog NFT Collection ***************************/

.nft-collection-section {
  background-color: var(--main-background-color);
  padding-top: 100px;
  padding-bottom: 200px;
}

.nft-collection {
  display: flex;
  justify-content: space-between;
  align-items: start;
  column-gap: 80px;
}

.catalogpage-content {
  width: 100%;
}

.nft-card-list {
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  justify-items: center;
  gap: 30px;
}

.nft-collection-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}

/*********** Search form ***********/

.search-form {
  width: 280px;
  display: flex;
  align-items: center;
  position: relative;
}

.search-field {
  all: unset;
  padding: 12px 20px 10px 24px;
  width: 100%;
  font-family: var(--text-font);
  font-size: 16px;
  line-height: 1.63;
  color: var(--text-color);
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}

.search-field::-webkit-search-cancel-button {
  position: relative;
  padding-right: 5px;
  padding-left: 20px;
  top: 10px;
  -webkit-appearance: none;
  height: 24px;
  width: 24px;
  mask-image: url("../img/icons/plus.svg");
  background-color: var(--text-color);
  mask-repeat: no-repeat;
  mask-size: 24px;
  transform: rotate(45deg);
}

/* .search-field:hover  {
  color: rgba(194, 195, 197, 0.5);
} */

.search-field:-webkit-autofill,
.search-field:-webkit-autofill:hover,
.search-field:-webkit-autofill:focus {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--text-color);
}

.search-field::placeholder {
  font-family: var(--text-font);
  font-size: 16px;
  line-height: 1.63;
  color: var(--text-color);
}

.search-field:hover {
  background-color: rgba(20, 27, 34, 0.5);
  transition: background var(--transition-effect);
}

.search-field:focus {
  border: 2px solid rgb(65, 69, 74);
  background-color: rgba(20, 27, 34, 0.5);
}

.search-btn {
  all: unset;
  cursor: pointer;
  transition: var(--transition-effect);
  position: absolute;
  right: 20px;
  top: 14px;
}

.search-btn:hover,
.search-btn:active,
.search-btn:focus {
  opacity: 0.6;
}

/************ Current filter display ********************/

.current-filters-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: var(--secondary-color);
}

.current-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 20px;
  border: 1px solid rgb(65, 69, 74);
  font-family: var(--text-font);
  font-size: 16px;
  line-height: 1.63;
  color: rgb(247, 247, 247);
  text-transform: capitalize;
}

.close-icon {
  stroke: rgb(247, 247, 247);
  transform: rotate(45deg);
  stroke-width: 2px;
}

.current-filters-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.57;
  text-transform: capitalize;
  transition: opacity var(--transition-effect);
}

.current-filters-btn:hover,
.current-filters-btn:active,
.current-filters-btn:focus {
  opacity: 0.6;
}

/************ Aside filter form catalog section ***************/

.nft-filter {
  /* display: flex; */
  background-color: var(--secondary-color);
  width: 280px;
  margin-bottom: 12px;
}

.nft-filter-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  line-height: 1.4;
  padding: 16px 12px;
  list-style: none;
  text-transform: uppercase;
}

.nft-filter-name::marker,
.nft-filter-name::-webkit-details-marker {
  display: none;
}

.nft-filter-name::after {
  background-image: url("../img/icons/plus.svg");
  background-size: 24px 24px;
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.nft-filter[open] .nft-filter-name::after {
  background-image: url("../img/icons/minus.svg");
}

.nft-filter-list {
  padding: 20px 22px;
  border-top: 1px solid rgb(67, 67, 67);
  font-family: var(--text-font);
  font-size: 14px;
  line-height: 1.57;
  color: var(--text-color);
  text-transform: capitalize;
}

.nft-filter-item {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.catalog-checkbox-label {
  cursor: pointer;
}

.catalog-checkbox + label::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
  text-align: center;
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid var(--text-color);
  border-radius: 2px;
}

.catalog-checkbox:checked + label::before {
  content: url("../img/icons/checked.svg");
  background-color: var(--btn-primary-color);
  line-height: 15px;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*************** Call Action section - Coloful **************/

.cta-section {
  background-color: var(--secondary-color);
}

.call-action-catalog {
  margin-bottom: -40px;
  background-color: var(--secondary-color);
  position: relative;
  overflow: hidden;
  top: -100px;
  padding: 40px 0 48px;
  border-radius: 8px;
  background-image: url("../img/bg-s/star-small.svg"),
    linear-gradient(to left, rgb(35, 51, 222), rgb(10, 190, 102));
  background-repeat: no-repeat;
  background-size: 137px auto, cover;
  background-position: top left 25%, center;
  background-blend-mode: screen;
}

.call-action-catalog::before {
  content: "";
  width: 256px;
  height: 256px;
  background-image: url("../img/bg-s/star-big.svg");
  background-size: 256px auto;
  background-repeat: no-repeat;
  transform: rotate(-10deg);
  position: absolute;
  top: 40px;
  left: -50px;
  opacity: 30%;
  filter: invert(1);
}

.call-action-catalog::after {
  content: "";
  width: 320px;
  height: 320px;
  background-image: url("../img/bg-s/star-big.svg");
  background-size: 320px auto;
  background-repeat: no-repeat;
  transform: rotate(-45deg);
  position: absolute;
  top: -65px;
  right: -50px;
  opacity: 40%;
  filter: invert(0.7);
}

.catalog-cta-text {
  padding-top: 4px;
  padding-bottom: 22px;
  text-align: center;
  font-family: var(--text-font);
  color: rgb(247, 247, 249);
}

.catalog-cta-text::first-letter {
  text-transform: capitalize;
}

.cta-catbtn-box {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/********************** Catalog Footer *******************/

.catalog-footer {
  background-color: var(--secondary-color);
}

.footer-nftcatalog {
  display: flex;
  gap: 156px;
  justify-content: space-between;
}

.catalog-footer-logobox {
  width: 324px;
}

.footer-cat-logo {
  display: flex;
  gap: 16px;
  font-size: 30px;
  line-height: 1.4;
  padding-bottom: 12px;
  text-transform: uppercase;
  transition: filter var(--transition-effect);
}

.footer-cat-logo:hover,
.footer-cat-logo:active,
.footer-cat-logo:focus {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.catalog-footer-text {
  font-size: 16px;
  line-height: 1.63;
  font-family: var(--text-font);
}

.catalog-footer-text::first-letter {
  text-transform: capitalize;
}

.footer-nav-section {
  display: flex;
  flex-wrap: wrap;
  gap: 130px;
  padding-bottom: 42px;
}

/**************** Catalog Sitemap section *******************/

.sitemap-title {
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 20px;
  text-transform: uppercase;
}

.sitemap-list:not(:last-child) {
  padding-bottom: 16px;
}

/************** Footer Copyright section in catalog *************/

.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgb(67, 67, 67);
  padding-top: 20px;
  padding-bottom: 20px;
}

.footer-media-list {
  display: flex;
  gap: 40px;
}

.network-item-cat {
  width: 20px;
  height: 20px;
}

.footer-media-link {
  transition: opacity var(--transition-effect);
}

.footer-media-link:hover,
.footer-media-link:active,
.footer-media-link:focus {
  opacity: 0.5;
}

/***************** CATALOG ITEM PAGE *****************************/

/***************** NFT card item ***********************/

.nftcard-box {
  padding-top: 100px;
  background-color: var(--main-background-color);
}

.card-details {
  display: flex;
  position: relative;
}

/******************* Image block ***********************/

.nftcard-img {
  flex-shrink: 0;
}

.time-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  width: 608px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  padding: 20px 74px;
  position: absolute;
  margin: 0 40px 30px;
  bottom: 10px;
}

.time-counter-title {
  font-size: 24px;
  line-height: 1.25;
  text-transform: uppercase;
}

/*  Counter list */
.nftcard-box-timer {
  display: flex;
  gap: 22px;
}

.countdown-item {
  text-align: center;
}

.time-counter-div {
  color: var(--text-color);
  position: relative;
  top: -4px;
}

.countdown-name {
  font-size: 20px;
  line-height: 1.4;
  color: rgb(246, 246, 246);
  text-transform: uppercase;
}

/******************* NFT Details section *******************/

.nftcard-details {
  max-width: 620px;
  margin-left: auto;
}

.nftcard-details-title {
  text-align: left;
  padding-bottom: 24px;
}

.nftcard-details-text {
  font-size: 20px;
  line-height: 1.5;
  font-family: var(--text-font);
  color: var(--text-color);
  padding-bottom: 20px;
}

.nftcard-details-text::first-letter {
  text-transform: capitalize;
}

.nft-features {
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px 16px;
}

.nft-feature {
  padding: 20px;
  width: 196px;
  background-color: var(--secondary-color);
}

.nft-category {
  font-size: 16px;
  line-height: 1.63;
  font-family: var(--text-font);
  color: var(--text-color);
  text-transform: capitalize;
}

.nft-feature-var {
  font-size: 24px;
  line-height: 1.25;
  text-transform: uppercase;
}

/********************** NFT price block ******************/

.nft-price {
  display: inline-flex;
  gap: 14px;
  padding-bottom: 40px;
  font-size: 36px;
  line-height: 1.22;
  text-transform: uppercase;
}

.btn-buy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
}

.nftcard-box-btns {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
}

.nftcard-media-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid rgb(136, 139, 142);
  padding: 16px 24px;
  font-size: 16px;
  line-height: 1.5;
  flex-basis: 290px;
  text-transform: uppercase;
  transition: background var(--transition-effect);
}

.nftcard-media-btn:hover,
.nftcard-media-btn:active,
.nftcard-media-btn:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

/*********** NFT cards collection section ********************/

.nft-cards-section {
  padding-top: 100px;
  padding-bottom: 200px;
  background-color: var(--main-background-color);
}

.nft-cards.cat-item-collection {
  padding-top: 40px;
  padding-bottom: 30px;
}

.nft-cat-btn-block {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.btn-nft-cat {
  width: 48px;
  height: 48px;
  transition: var(--transition-effect);
}

.cat-arrow {
  stroke-width: 2;
  stroke: rgb(255, 255, 255);
  padding-bottom: 2px;
  transition: var(--transition-effect);
}

.cat-gt-arrow {
  transform: rotate(180deg);
}

.btn-nft-cat:hover,
.btn-nft-cat:active,
.btn-nft-cat:focus {
  background-color: var(--btn-primary-color);
}

.btn-nft-cat:hover .cat-arrow,
.btn-nft-cat:active .cat-arrow,
.btn-nft-cat:focus .cat-arrow {
  stroke: var(--secondary-color);
}

/************************* FAQ Page ******************************/

.q-box {
  background-color: var(--main-background-color);
  padding-top: 100px;
  padding-bottom: 200px;
}

/****************** Contact Us Page *******************/

.contact-info-section {
  padding-top: 100px;
  padding-bottom: 40px;
  background-color: var(--main-background-color);
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.contact-info-option {
  border: 1px solid rgb(67, 67, 67);
  padding: 40px 30px;
  width: 450px;
  text-align: center;
}

.contact-info-icon {
  fill: var(--btn-primary-color);
}

.contact-info-title {
  padding-top: 20px;
  padding-bottom: 8px;
  font-size: 36px;
  line-height: 1.22;
  text-transform: capitalize;
}

.contact-details {
  font-family: var(--text-font);
  color: var(--text-color);
  transition: opacity var(--transition-effect);
}

.contact-details:hover,
.contact-details:active,
.contact-details:focus {
  opacity: 0.5;
}

/*****************  Get in touch form section ***************/

.get-intouch-block {
  padding-bottom: 200px;
  text-align: center;
  background-color: var(--main-background-color);
}

.get-intouch-text {
  padding-top: 4px;
  padding-bottom: 60px;
  font-size: 20px;
  line-height: 1.5;
  font-family: var(--text-font);
}

.get-intouch-text::first-letter {
  text-transform: capitalize;
}

.get-intouch-form {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  max-width: 690px;
  margin: auto;
}

.form-block {
  border: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.form-block-input,
.form-textarea {
  background-color: rgba(194, 195, 197, 0.15);
  padding: 14px 24px;
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.63;
  border: 1px solid transparent;
  width: 100%;
}

.form-block-input:hover,
.form-textarea:hover {
  background-color: rgba(194, 195, 197, 0.1);
  transition: background var(--transition-effect);
}

.form-block-input:focus,
.form-textarea:focus {
  background-color: rgba(194, 195, 197, 0.1);
  border: 1px solid var(--text-color);
  outline: 1px inset var(--text-color);
}

.form-block-input:-webkit-autofill,
.form-block-input:-webkit-autofill:hover,
.form-block-input:-webkit-autofill:focus {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--text-color);
  -webkit-box-shadow: 0 0 0 50px rgba(194, 195, 197, 0.1) inset;
}

.get-intouch-block input[name="name"] {
  width: 240px;
}

.form-textarea {
  resize: vertical;
}

.btn-get-intouch {
  margin: auto;
  width: fit-content;
  margin-top: 20px;
  padding: 12px 36px;
  text-transform: uppercase;
}

/********************** About Us Page ****************************/

.story-section {
  text-align: center;
  background-color: var(--main-background-color);
  padding-top: 100px;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
}

.story-section::before {
  content: "";
  width: 276px;
  height: 276px;
  background-image: url("../img/bg-s/star-small.svg");
  background-size: 276px;
  background-repeat: no-repeat;
  transform: rotate(25deg);
  position: absolute;
  top: 50px;
  left: 350px;
  opacity: 80%;
}

.story-section::after {
  content: "";
  width: 184px;
  height: 184px;
  background-image: url("../img/bg-s/star-small.svg");
  background-size: 184px;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  position: absolute;
  top: 200px;
  right: 430px;
  opacity: 80%;
}

.story-section-text {
  font-family: var(--text-font);
  color: var(--text-color);
  padding: 16px 240px 40px;
}

.story-section-text::first-letter {
  text-transform: capitalize;
}

.about-counter {
  margin: 0 auto;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 0.4fr 1fr;
  grid-template-areas:
    "hero-total-tx hero-profiles-tx"
    "hero-total hero-profiles";
  grid-column-gap: 60px;
  grid-row-gap: 0;
  width: 395px;
}

/********* about page cards ***************/

.aboutpage-list {
  display: flex;
  gap: 30px;
  justify-content: center;
  list-style-position: inside;
}

.aboutpage-list-item {
  max-width: 330px;
  padding: 25px;
  background-color: var(--secondary-color);
  position: relative;
}

.aboutpage-list-item::marker {
  content: counter(list-item, decimal-leading-zero);
  color: rgba(33, 231, 134, 0.3);
  font-size: 80px;
  line-height: 1.2;
}

.aboutpage-list-card {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  flex-shrink: 0;
  margin-top: -45px;
}

.aboutpage-list-title {
  font-size: 24px;
  line-height: 1.25;
  text-transform: uppercase;
}

.aboutpage-list-description {
  font-family: var(--text-font);
  color: var(--text-color);
}

.about-list-description::first-letter {
  text-transform: capitalize;
}

.about-partners {
  padding-top: 50px;
  padding-bottom: 200px;
  background-color: var(--main-background-color);
  position: relative;
  overflow: hidden;
}

.about-partners::before {
  content: "";
  width: 284px;
  height: 284px;
  background-image: url("../img/bg-s/star-small.svg");
  background-size: 284px;
  background-repeat: no-repeat;
  transform: rotate(165deg);
  position: absolute;
  top: 35%;
  left: -160px;
  opacity: 80%;
}

/************************ BLOG PAGE ****************************/

.blog-page {
  padding-top: 100px;
  padding-bottom: 40px;
  background-color: var(--main-background-color);
}

.blogpage-card-list {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.blogpage-card {
  width: 450px;
  padding: 30px 20px;
  background-color: var(--secondary-color);
  position: relative;
}

.blog-label {
  position: absolute;
  top: 45px;
  right: 35px;
}

.blog-label:hover .label-deco,
.blog-label:active .label-deco,
.blog-label:focus .label-deco {
  background-color: rgba(33, 231, 134, 0.5);
}

.label-deco {
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.57;
  background-color: var(--btn-primary-color);
  border: 1px solid var(--btn-primary-color);
  text-transform: uppercase;
  transition: background var(--transition-effect);
}

.blog-data {
  padding-top: 25px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  column-gap: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--inactive-color);
  text-transform: uppercase;
}

.blog-info-line::before {
  content: "";
  display: block;
  width: 1px;
  height: 16px;
  background-color: var(--inactive-color);
}

.blog-info {
  display: flex;
  column-gap: 6px;
}

.person-icon {
  fill: var(--btn-primary-color);
  stroke: var(--btn-primary-color);
}

.calendar-icon {
  fill: var(--btn-primary-color);
  stroke: var(--btn-primary-color);
}

.blogpage-card-title {
  font-size: 36px;
  line-height: 1.22;
  padding-bottom: 4px;
  text-transform: uppercase;
}

.blogpage-card-text {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 20px;
  line-height: 1.5;
  padding-bottom: 20px;
}

.blogpage-card-text::first-letter {
  text-transform: capitalize;
}

.blogpage-card-readmore {
  padding: 0 8px;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  transition: color var(--transition-effect);
}

.readmore-arrow {
  fill: rgb(255, 255, 255);
  transition: fill var(--transition-effect);
}

.blogpage-card-readmore:hover,
.blogpage-card-readmore:active,
.blogpage-card-readmore:focus {
  color: var(--inactive-color);
}

.blogpage-card-readmore:hover .readmore-arrow,
.blogpage-card-readmore:active .readmore-arrow,
.blogpage-card-readmore:focus .readmore-arrow {
  fill: var(--inactive-color);
}

.blog-pagination {
  background-color: var(--main-background-color);
  padding-bottom: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.pagination-page {
  display: block;
  width: 48px;
  height: 48px;
  font-size: 20px;
  line-height: 2.4;
  font-family: var(--text-font);
  border: 1px solid var(--secondary-color);
  padding: 1.5px;
  text-align: center;
  transition: background var(--transition-effect);
}

.pagination-page.active {
  background-color: var(--secondary-color);
  color: var(--btn-primary-color);
}

.pagination-page:hover,
.pagination-page:active,
.pagination-page:focus {
  background-color: var(--secondary-color);
}

/*******************  Blog Article Page ***************************/

.blog-article-content {
  padding-top: 100px;
  padding-bottom: 180px;
  background-color: var(--main-background-color);
}

.blog-article {
  display: flex;
  gap: 60px;
}

/******* Blog article main content block **************************/

.blog-article-title {
  padding-top: 30px;
  font-size: 36px;
  line-height: 1.22;
  text-transform: capitalize;
}

.blog-article-label {
  float: inline-end;
  position: relative;
  top: -42px;
}

.blogarticle-data {
  padding-top: 40px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  line-height: 1.5;
  font-family: var(--text-font);
  color: var(--inactive-color);
  text-transform: capitalize;
}

.blogarticle-line::before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background-color: var(--inactive-color);
}

.blogarticle-item {
  display: flex;
  gap: 6px;
}

.blog-story {
  font-size: 20px;
  line-height: 1.5;
  font-family: var(--text-font);
  color: var(--text-color);
  padding-bottom: 24px;
}

.blog-story::first-letter {
  text-transform: capitalize;
}

.blog-story-quote {
  padding: 26px 32px;
  border-left: 8px solid var(--btn-primary-color);
  background-color: rgba(33, 231, 134, 0.1);
}

.blog-story-text {
  padding-bottom: 12px;
  font-family: var(--text-font);
  font-size: 24px;
  line-height: 1.25;
}

.blog-story-text::first-letter {
  text-transform: capitalize;
}

.blog-story-rating {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.blog-article-rating {
  font-family: var(--text-font);
  font-size: 14px;
  line-height: 1.57;
  color: var(--text-color);
  display: flex;
  gap: 4px;
}

.blog-quote-author {
  font-size: 16px;
  line-height: 1.5;
  font-style: normal;
  text-transform: capitalize;
}

.blog-article-sub-imgs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  padding-top: 40px;
  padding-bottom: 30px;
}

.blog-sub-article {
  padding-bottom: 20px;
}

.article-block-title {
  padding-bottom: 12px;
  font-size: 30px;
  line-height: 1.4;
  text-transform: capitalize;
}

.article-block-text {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 20px;
  line-height: 1.5;
}

.article-block-text::first-letter {
  text-transform: capitalize;
}

.article-block-text:not(:first-of-type) {
  padding-top: 12px;
}

.blog-tags-share {
  padding-top: 4px;
  padding-bottom: 32px;
  display: flex;
  justify-content: space-between;
}

.tags-block,
.share-block {
  display: flex;
  gap: 12px;
  align-items: center;
}

.blog-tags-title {
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--btn-header-font);
  text-transform: capitalize;
}

.tags {
  font-family: var(--text-font);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  background-color: rgba(65, 69, 74, 0.4);
  text-transform: uppercase;
  transition: background var(--transition-effect);
}

.tags:hover,
.tags:active,
.tags:focus {
  background-color: rgba(65, 69, 74, 0.9);
}

.share {
  transition: opacity var(--transition-effect);
}

.share:hover,
.share:active,
.share:focus {
  opacity: 0.5;
}

.share-icon {
  display: block;
}

.blog-article-pages {
  padding-bottom: 60px;
  display: flex;
  justify-content: space-between;
}

.blog-mini-link:hover .content-block-text,
.blog-mini-link:active .content-block-text,
.blog-mini-link:focus .content-block-tex {
  color: var(--btn-primary-color);
}

.blog-article-mini {
  display: flex;
  gap: 16px;
  padding: 20px 20px;
  background-color: var(--secondary-color);
  max-width: 410px;
  font-family: var(--text-font);
  font-weight: 700;
}

.blog-page-reverse {
  flex-direction: row-reverse;
  text-align: right;
}

.content-block-title {
  font-size: 18px;
  line-height: 1.56;
  padding-top: 4px;
  text-transform: capitalize;
}

.content-block-text {
  font-size: 14px;
  line-height: 1.57;
  color: var(--text-color);
  text-transform: uppercase;
  transition: color var(--transition-effect);
}

/************* Blog article sidebar form block ***********/

.blog-article-form {
  width: 330px;
}

.blog-article-form .search-form,
.blog-filters {
  border: none;
  width: inherit;
}

.blog-article-form .search-form {
  margin-bottom: 20px;
}

.blog-filters {
  margin-bottom: 40px;
  background-color: var(--secondary-color);
}

.blog-filters-list {
  padding: 20px 24px;
}

.sidebar-card-name {
  padding: 16px 24px;
  font-size: 20px;
  line-height: 1.4;
  background-color: var(--secondary-color);
  border-bottom: 1px solid rgb(67, 67, 67);
  width: 100%;
  text-transform: uppercase;
}

.blog-filter-item {
  font-family: var(--text-font);
  font-size: 14px;
  line-height: 1.57;
  color: var(--text-color);
  cursor: pointer;
  text-transform: capitalize;
}

.filter-categories:checked + .blog-filter-item {
  color: var(--btn-primary-color);
}

/* Blog article sidebar form recent posts block */

.recent-post-link {
  transition: filter var(--transition-effect);
}

.recent-post-link:hover,
.recent-post-link:active,
.recent-post-link:focus {
  filter: brightness(0.6);
}

.recent-post {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
}

.recent-post-title {
  font-family: var(--text-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.56;
  padding-bottom: 4px;
  text-transform: capitalize;
}

.recent-post-list {
  display: flex;
  column-gap: 6px;
  align-items: center;
  font-family: var(--text-font);
  font-size: 12px;
  line-height: 1.5;
  color: var(--inactive-color);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.recent-post-line::before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--inactive-color);
}

.recent-post-time {
  text-transform: capitalize;
}

/* blog filters tags block */

.blog-filters-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  padding: 20px 24px;
  font-family: var(--text-font);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag {
  display: block;
  padding: 8px 12px;
  font-family: var(--text-font);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  background-color: rgba(65, 69, 74, 0.4);
  transition: background var(--transition-effect);
}

.tag:hover,
.tag:active,
.tag:focus {
  background-color: rgba(65, 69, 74, 0.9);
}

/*  Feedback Form in the Blog Article page */

.feedback-section-title {
  font-size: 36px;
  line-height: 1.22;
  text-transform: uppercase;
}

.feedback-section-description {
  font-family: var(--text-font);
  color: var(--text-color);
  font-size: 20px;
  line-height: 1.5;
  padding-top: 4px;
  padding-bottom: 30px;
}

.feedback-section-description::first-letter {
  text-transform: capitalize;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.feedback-form input[name="name"],
.feedback-form input[name="phone"] {
  width: 335px;
}

@media (max-width: 720px) {
  .header-content {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .logo-block {
    justify-content: center;
  }

  .btn-box {
    flex-wrap: wrap;
    justify-content: center;
  }

  .social-networks-items {
    flex-wrap: wrap;
  }

  .footer-nav {
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
  }

  .nav-pages-items {
    flex-wrap: wrap;
    column-gap: 22px;
  }

  .roadmap-card {
    flex-direction: column;
  }

  .footer-nftcatalog {
    flex-direction: column;
    row-gap: 50px;
  }

  .footer-nav-section {
    flex-wrap: wrap;
    gap: 50px;
  }

  .footer-copyright {
    flex-direction: column;
    row-gap: 20px;
  }

  .nft-collection-search {
    flex-direction: column;
    align-items: start;
  }

  .current-filters-block {
    flex-wrap: wrap;
  }
}

@media (max-width: 950px) {
  .header-content {
    column-gap: 30px;
  }

  .logo-block {
    width: 100%;
    gap: 0 8px;
  }

  .nav-menu-items {
    column-gap: 15px;
  }

  .nav-menu-item {
    font-size: 14px;
  }

  .hero-section::before {
    mask-size: 300px;
    right: -350px;
    bottom: -130px;
  }

  .hero-box {
    justify-content: center;
  }

  .hero-content {
    text-align: center;
  }

  .hero-counter {
    margin: auto;
  }

  .hero-btn {
    justify-content: center;
  }

  .hero-image {
    display: none;
  }

  .card-details {
    flex-direction: column;
  }
  .time-counter {
    top: 500px;
    height: fit-content;
  }

  .nftcard-details {
    margin: 0;
  }

  .story-section::before {
    left: -10px;
  }

  .story-section::after {
    right: 30px;
  }

  .aboutpage-list {
    flex-wrap: wrap;
  }

  .blog-article {
    flex-direction: column;
  }

  .blog-article-form {
    width: 100%;
  }
}