.landing {
  position: relative;
  padding-bottom: 24em;
}

.m-container-gradetool {
  position: relative;
  background: #262626;
  padding: 20px;
  border-radius: 5px;
  overflow: hidden;
}

.m-more-pagination {
  color: #89898B;
  font-size: 15px;
  transition: .2s;
  position: absolute;
  bottom: 15px;
}

.m-gradetool-subtitle {
  margin-top: 12px;
  margin-bottom: 25px;
}

.m-gradetool-title {
  margin-top: 27px;
  font-weight: 501;
  text-align: center;
}

.m-list-int {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  text-align: center;
  background: #121212;
  border-radius: 0 0 10px 0;
  padding: 5px;
  color: #F6B83E;
  font-weight: 901;
  font-size: 22px;
}

.m_list-gradetool-- {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  display: none;
  gap: 20px;
}

.landing-container h3 {
  max-width: 81%;
  color: #A3A3A3;
  font-weight: initial;
}

.landing-container {
  margin-top: 150px;
  max-width: 63%;
  transform: skewX(-6deg);
}

.landing-container h1 {
  font-size: 4rem;
  line-height: 1;
}

.add {
  margin-top: 13em !important;
}

.details-grading .underline-footer {
  color: #FAFAFA !important;
  font-size: initial !important;
}

.details-grading strong {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 18px;
}

.details-grading {
  margin-top: -24px;
  display: flex;
  align-items: center;
}

.line-separator {
  padding-left: 12px;
  padding-right: 12px;
}

.box-btn {
  display: flex;
  gap: 35px;
}

.landing-btn {
  padding: 9px;
  background: #FAFAFA;
  color: #121212;
  font-weight: 601;
  border-radius: 55px;
  cursor: pointer;
  padding-left: 17px;
  padding-right: 17px;
  border: 1px SOLID #FAFAFA;
  transition: .2s;
}

.box-btn .second {
  background: #121212 !important;
  color: #A3A3A3;
  border: 1px SOLID #A3A3A3;
  font-weight: initial;
}

.landing-btn:hover {
  background-color: #D3D3D3;
  border: 1px SOLID #D3D3D3;
}

.demo-card {
  position: absolute;
  top: -100px;
  width: 40%;
  right: 0;
  height: 100%;
  z-index: -1;
}

.demo-card img {
  width: 100%;
  animation: floating 4s cubic-bezier(0.4, 0.03, 0.3, 1);
  display: block;
    margin: auto;
  
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform: translate3d(0,0,0);
}

.layer-1 {
  background-image: url('/include/images/card.png');
  z-index: 1;
}

.hero {
  height: calc(100vh + 120px);
  object-fit: cover;
  width: 100vw;
  top: -5rem;
  position: absolute;
  max-width: 100%;
  opacity: .4;
  z-index: -15;
}

.text-container-landing h2 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: #FAFAFA;
  white-space: nowrap;
  max-width: 65ch;
}

.text-container-landing h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #A3A3A3;
  margin: auto;
}

.text-container-landing {
  text-align: center;
  max-width: 70%;
  margin: auto;
}

.animation {
  height:50px;
  overflow:hidden;
  margin-left: 1rem;
}

.animation > div > div {
  padding: 0.25rem 0.75rem;
  height:2.81rem;
  margin-bottom: 2.81rem;
  display:inline-block;
}

.animation div:first-child {
  animation: text-animation 30s infinite;
}

.flex-demo {
  display: flex;
  gap: 2rem;
  max-width: 80%;
  margin: auto;
  margin-top: 4.5em;
  margin-bottom: 10em;
}

.container-demo p {
  margin-top: .25rem;
  color: #A3A3A3;
  font-size: 14px;
}

.container-demo img {
  width: 100%;
  opacity: .8;
  margin-bottom: -36px;
}

.container-demo:hover .hover-img {
  bottom: calc(0% - 2.7em);
  opacity: .9;
}

.container-demo {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 2rem;
  border: 1px SOLID #27272a;
  border-radius: .75rem;
  width: 100%;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  background: linear-gradient(130deg,#121212,#121212 12%,#1a1a1a 30%,#121212 55%,#121212);
}

.container-demo:hover {
  background-color: rgba(39, 39, 42, 0.5) !important;
  border-color: rgb(63, 63, 70) !important;
}

.container-demo:hover .img-gradetool {
  transform: scale(1.05);
}

.icon {
  border-style: solid;
  margin-bottom: 1rem;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  justify-content: center;
  align-items: center;
  border-radius: .5rem;
  border-width: 1px;
  border-color: rgb(63, 63, 70);
  background: linear-gradient(136.82deg,hsla(0,0%,100%,.08) 9.54%,hsla(0,0%,100%,0) 101.31%);
}

.icon img {
  width: 80% !important;
  margin-top: -36px;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.container-demo:hover .hover-img {
  bottom: calc(0% - 2.7em);
  opacity: .9;
}

.hover-img {
  position: absolute;
  left: 50%;
  width: 87% !important;
  bottom: calc(0% - 4em);
  transform: translate(-50%, -50%);
  transition: .2s;
  opacity: .8;
}

.img-gradetool {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(64, 64, 64);
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: rgb(64, 64, 64);
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgb(64, 64, 64);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  transition: .2s;
}

.bottom-module_01 {
  margin-bottom: 4.5em !important;
}

.gradetool-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px 5px 5px 5px;
  background: linear-gradient(90deg, rgb(107, 121, 155) 0%, rgb(219, 222, 255) 58%, rgb(145, 148, 191) 100%);
  border-radius: 99px;
  transition: .2s;
  width: fit-content;
  cursor: pointer;
  margin: auto;
  margin-top: 40px;
}

.gradetool-input svg {
  width: 7px;
  padding-right: 10px;
  transition: .2s;
}

.gradetool-input:hover svg {
  width: 7px;
  padding-right: 7px;
  margin-left: 3px;
}

.gradetool-input svg path {
  fill: #262626;
}

.gradetool-try {
  display: flex;
  flex-direction: row;
  -moz-box-align: center;
  align-items: center;
  font-size: 13px;
  line-height: 1;
  color: #262626;
  font-weight: 600;
}

.gradetool {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px 5px 10px;
  background: #2927538f;
  border-radius: 99px;
  font-size: 9px;
  text-transform: uppercase;
  line-height: 1.33;
  color: #FAFAFA;
  font-weight: 501;
  letter-spacing: .7px;
}

.flex-content {
  display: flex;
  gap: 2rem;
  height: fit-content;
}

.pagination-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.slider-pagination {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 10px;
}

.pagination-item:hover {
 color: #C1C1C2;
}

.pagination-item p {
  color: #5C5C63;
  margin-top: 4px;
  margin-bottom: 9px;
  font-size: 15px;
  max-width: 85%;
}

.pagination-item:hover p {
 color: #7F7F86;
}

.head-title {
  display: flex;
  gap: .5em;
  align-items: center;
}

.head-title svg {
  width: 100%;
  height: fit-content;
}

.icon-pagination {
  width: 25px;
  display: flex;
}

.head-title .title-head {
 font-size: 19px;
}

.active .more-pagination {
  color: #FAFAE5;
}

.active:hover .more-pagination {
  color: #FAFAE5 !important;
}

.more-pagination:hover {
  text-decoration: underline;
  color: #FAFAFA;
}

.pagination-item:hover .more-pagination {
 color: #C1C1C2;
}

.pagination-item.active {
  color: #FAFAFA;
}

.active p {
  color: #A1A1A7;
}

.active .more-pagination {
  color: #FAFAE5;
}

.active svg path {
  fill: #FAFAFA !important;
  stroke: #FAFAFA !important;
}

.active:hover svg path {
  fill: #FAFAFA !important;
  stroke: #FAFAFA !important;
}

.active:hover p {
  color: #A1A1A7 !important;
}

.active:hover .more-pagination {
  color: #FAFAE5 !important;
}

.more-pagination {
  color: #89898B;
  font-size: 15px;
  transition: .2s;
}

.pagination-item {
  cursor: pointer;
  color: #A3A3A3;
  border-radius: 4px;
  height: 100%;
  transition: background-color 0.3s ease;
}

.slider-label {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 0 291px 55px hsla(0,0%,100%,.05);
}

.slider {
  height: 100%;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #407cff, #da8bff, #fb7185);
  z-index: 10;
}

.label-module {
  display: flex;
  margin: auto;
  margin-bottom: 10rem;
  gap: 4rem;
  margin-top: 5em;
  max-width: 80%;
}

.slab-module {
  display: flex;
  margin: auto;
  gap: 4rem;
  max-width: 80%;
}

.label-box-title p {
  font-size: 15px;
  line-height: 1.257;
  text-align: left;
  color: #A3A3A3;
  margin-top: -8px;
}

.slab-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}

.slab-box-title p {
  font-size: 15px;
  line-height: 1.257;
  text-align: left;
  color: #A3A3A3;
  margin-top: -8px;
}

.label-box-title h3 {
  font-size: 25px;
  line-height: 1.257;
  color: #FAFAFA;
  font-weight: 600;
  margin: 0px;
}

.slab-box-title h3 {
  font-size: 25px;
  line-height: 1.257;
  color: #FAFAFA;
  font-weight: 600;
  margin: 0px;
}

.label-box-title {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.slab-box-title {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.slab {
  transition: .3s;
}

.label-box-hover {
  margin-top: 30px;
}

.slab-box-hover {
  margin-top: 30px;
}

.label p {
  color: rgb(184, 190, 201);
  font-weight: 400;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.label span {
  color: #A3A3A3;
}

.slab p {
  color: rgb(184, 190, 201);
  font-weight: 400;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.slab span {
  color: #A3A3A3;
}

.label-demo img {
  width: 100%;
  height: 100%;
}

.label-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}

.label-demo {
  background: #262626;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex: 1 1 0%;
  height: fit-content;
}

.slab-demo img {
  width: 100%;
  height: 100%;
}

.label-active span {
  color: #FAFAFA;
  font-weight: 501;
}

.label-active p {
  color: #A3A3A3;
  font-weight: 400;
  opacity: 1;
  max-height: 100px;
  margin-top: 5px;
  overflow: hidden;
}

.slab-active span {
  color: #FAFAFA;
  font-weight: 501;
}

.slab-demo {
  background: #121212;
  border-radius: 8px;
  min-height: 20rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex: 1 1 0%;
  height: 100%;
}

.slab-active p {
  color: #A3A3A3;
  font-weight: 400;
  opacity: 1;
  max-height: 100px;
  margin-top: 5px;
  overflow: hidden;
}

.label-active {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #1C1C1C;
  cursor: pointer;
  border-bottom: 0.1rem solid #1C1C1C;
  transition: 0.3s ease-in-out;
}

.slab-active {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #1C1C1C;
  cursor: pointer;
  border-bottom: 0.1rem solid #1C1C1C;
  transition: 0.3s ease-in-out;
}

.label-hover {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 15px;
  background: transparent;
  border-bottom: 0.1rem solid #1C1C1C;
  border-radius: 0px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.slab-hover {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 15px;
  background: transparent;
  border-bottom: 0.1rem solid #1C1C1C;
  border-radius: 0px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.module_middle {
  padding: 7em 0 7em 0;
  background: #262626;
  font-size: 14px;
  color: #A3A3A3;
  margin-top: 10em;
  position: relative;
}

@keyframes floating {
  0% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-8px) rotate(1deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes text-animation {
  0%   { margin-top: 0; }
  15%  { margin-top: 0; }
  20%  { margin-top: -50px; }
  35%  { margin-top: -50px; }
  40%  { margin-top: -100px; }
  55%  { margin-top: -100px; }
  60%  { margin-top: -150px; }
  75%  { margin-top: -150px; }
  80%  { margin-top: -200px; }
  95%  { margin-top: -200px; }
  100% { margin-top: 0; }
}

@media screen and (max-width: 1300px) {
  .demo-card {width: 32%;}
  .landing-container h1 {font-size: 3.5rem;}
  .landing-container {max-width: 70%;}
  .add {margin-top: 6em !important}
  .text-container-landing {max-width: 100%}
  .landing {padding-bottom: 12em}
  .module_middle .content {padding-left: initial !important; padding-right: initial !important;}
}
@media screen and (max-width: 1200px) {
  #gradetool-explain-- {display: none}
  .m_list-gradetool-- {display: grid}
}
@media screen and (max-width: 1120px) {
  .demo-card {top: -148px;width: 22%;right: 35px;}
  .line-separator {opacity: 0; height: 2px;}
  .details-grading {display: block;}
  .landing-container h1 {font-size: 2.5rem;}
  .flex-demo {max-width: 100%}
}

@media screen and (max-width: 1000px) {
  .landing-container h3 {max-width: 95%}
  .text-container-landing h2 {font-size: 1.85rem}
}

@media screen and (max-width: 800px) {
  .demo-card {display: none}
  .landing-container {max-width: 100%; margin-top: initial;}
  .text-container-landing h2 {font-size: 1.4rem}
  .text-container-landing h3 {font-size: .8rem; max-width: 100%; line-height: initial;}
  .flex-demo {display: block; box-sizing: border-box;}
  .container-demo {display: block; width: initial;}
  .hover-img {transform: initial; margin: auto; display: block; position: initial; width: 70% !important}
  .img-gradetool {width: 70% !important;display: block;margin: auto;margin-top: 25px;}
  .flex-demo .container-demo:first-child {margin-bottom: 25px}
  .slab-module {display: block}
  .slab-demo {margin-bottom: 15px;}
  .label-module {display: block}
  .label-demo {margin-top: 15px;}
  .landing {padding-bottom: 6em;}
  .m_list-gradetool-- {display: block;}
  .m-container-gradetool:not(:last-child) {margin-bottom: 30px}
  .slab-box-title h3 {margin-top: 20px}
}

@media screen and (max-width: 650px) {
  .box-btn {display: block}
  .box-btn a {display: block; text-align: center;}
  .box-btn a:first-child {margin-bottom: 20px}
  .text-container-landing h2 {font-size: 1rem; max-width: 100%}
  .animation {margin-left: initial;}
  .landing-container {transform: skewX(-3deg);}
}