body {
  margin: 0;
  width: 100%;
  height: 100vh;
}

::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

p {
  margin: 0;
}

h2 {
  font-size: 46px !important;
}

button {
  transition: transform 0.2s ease;
}

button:hover {
  transform: scale(1.10);
}

#overlap-menu {
  position: fixed;
  
  top: 20px;
  right: 20px;
  z-index: 10;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

#overlap-menu img {
  width: 260px;
  height: auto;
}

#loginBtnPro {
  background: transparent;
  border: 2px solid #D9D9D9;
  
  color: #D9D9D9;
  font-weight: 600;

  border-radius: 11px;
  padding: 8px 16px;
  font-size: 18px;
  margin-left: 25px;
}

#signupBtnPro {
  background: #D9D9D9;
  border: none;

  color: #000000;
  font-weight: 600;

  border-radius: 11px;
  padding: 10px 14px;
  font-size: 18px;
}

#global {
  width: 100%;
  height: 2000px;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;
}

#top-wall-broken {
  position: relative;
  top: -260px;

  width: 100%;
  min-width: 1900px;

  z-index: 2;
}

#bottom-wall-broken {
  position: relative;
  top: -160px;

  width: 100%;
  min-width: 1900px;

  z-index: 2;
}

#top-wall-broken,
#bottom-wall-broken {
  pointer-events: none;
}

#background {
  background: #141414;

  top: 11px;

  width: 100%;
  height: 802px;

  position: absolute;

  display: flex;
  flex-direction: row;
  
  z-index: 1;
}

#b-left {
  flex: 1;
}

#b-center {
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#b-right {
  flex: 1;
}

#main-heading {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.72);
}

#main-description {
  padding: 0 40px;
  margin-bottom: 10px;

  font-size: 32px;
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
}

#cta-main {
  border: #969696 2px solid;
  border-radius: 16px;

  background: transparent;

  color: #ADADAD;
  font-size: 16px;
  font-weight: 600;

  padding: 10px 26px;
}

#content-area {
  position: absolute;
  background: #1D284B;

  top: 1000px;

  width: 100%;
  
  z-index: 2;
}

.promo-container {
  padding: 226px 170px;
  /*  border: 1px solid red; */

  font-size: 26px;

  display: flex;
  flex-direction: row;
  gap: 100px;

  position: relative;
}

.leftPromo {
  flex: 1;
}

.rightPromo {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.centerPromo {
  flex: 1;

  display: flex;
  align-items: center;
  flex-direction: column;
}

.toleft {
  align-self: flex-start;
}

.toRight {
  align-self: flex-end;
}

.promo-container h2 {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 15px;
}

.promo-container p {
  color: rgba(255, 255, 255, 0.56);
}

#po-des {
  width: 500px;
}

#pt-des {
  width: 400px;
}

#templateVideo {
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 50px;
  color: white;
}

.pm-page-icon {
  position: absolute;
  left: 190px;
}

.pm-video-icon {
  position: absolute;
  left: 300px;
}

.pm-table-icon {
  position: absolute;
  left: 434px;
}

.pm-page-icon,
.pm-video-icon,
.pm-table-icon {
  width: 270px;
  top: 25%;
}

#pth-ti {
  margin-bottom: 90px;
}

#interactive-area {
  width: 100%;

  aspect-ratio: 16 / 8;

  background: rgb(26, 26, 26);

  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 50px;
  color: white;

  position: relative;
}

.thought {
  position: absolute;
  background: white;
  border: 3px grey solid;
  color: black;
  font-family: 'Arial' !important;
  font-size: 32px;
  padding: 15px 30px;
  cursor: move;
  user-select: none;
}

#thought1 {
  left: 60%;
  top: 50%;
}

#thought2 {
  left: 45%;
  top: 45%;
}

#thought3 {
  left: 25%;
  top: 60%;
}

#cta-secondary {
  position: absolute;
  bottom: 200px;

  background: #000000;
  border: none;

  color: #ffffff;
  font-size: 36px;
  font-weight: 700;

  border-radius: 11px;
  padding: 24px 48px;
}

#pf-des {
  width: 500px;
}

#pf-img {
  position: absolute;
  right: 0;
  top: 226px;

  width: 1000px;
}

#promo-five {
  margin-top: 500px;
}

#pfi-centerPromo {
  display: flex;
  flex-direction: row;
  gap: 120px;

  height: 2000px;
  position: relative;
}

#pfi-l,
#pfi-c,
#pfi-r {
  flex: 1;
  height: 100%;
}

#pfi-c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.block-element {
  width: 100%;

  aspect-ratio: 16 / 9;

  background: rgb(27, 27, 27);

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  transition: transform 0.2s ease;
  z-index: 2;
  cursor: pointer;
}

.block-element:hover {
  transform: scale(1.10);
}

.mt1 {
  width: 55%;
}

.mt2 {
  width: 70%;
}

.mt3 {
  width: 50%;
}

.mt-ti {
  position: absolute;
  top: -100px;
}

#ps-ti {
  margin-bottom: 120px;
}

#testimonials-wrapper {
  position: absolute;
  left: 0;

  width: 100%;
  height: 250px;

  overflow: hidden;
}

#testimonials-bar {
  position: relative;

  width: auto;
  height: 100%;

  color: white;

  display: flex;
  flex-direction: row;

  animation: scroll 30s linear infinite;
}

.testimonial {
  display: flex;
  flex-direction: row;

  gap: 15px;
  padding: 20px;

  width: 400px;

  background: #0e132579;

  user-select: none;

  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  color: white !important;
}

.description {
  color: grey;
}

.us-pfp {
  width: 60px;
  height: 60px;

  border-radius: 999px;
}

.testimonial-thumbnail {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 10px 0;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-119.6%); }
}

/* Mobile styles */
@media (max-width: 1447px) {
  #main-heading {
    font-size: 35px;
    text-align: center;
  }

  #main-description {
    font-size: 20px;
    padding: 0;
  }

  #b-right,
  #b-left {
    display: none;
  }

  #b-center {
    padding: 40px;
  }

  #cta-main {
    font-size: 14px;
  }

  .promo-container {
    padding: 100px 20px;

    flex-direction: column;
  }

  #po-des, #pt-des, #pf-des {
    width: 100%;
  }

  #templateVideo {
    width: 100%;
    max-width: 625px;
  }

  #promo-three {
    margin-top: 400px;
  }

  #interactive-area {
    aspect-ratio: 8 / 16;
  }

  #thought1 {
    left: 41%;
    top: 20%;
    transform: translateX(-50%);
  }

  #thought2 {
    left: 55%;
    top: 41%;
    transform: translateX(-50%);
  }

  #thought3 {
    left: 50%;
    top: 53%;
    transform: translateX(-50%);
  }

  #thought1,
  #thought2,
  #thought3 {
    white-space: nowrap;
  }

  #cta-secondary {
    bottom: 80px;
    font-size: 24px;
    padding: 16px 32px;
  }

  .pm-page-icon {
    top: 120%;
    left: 50%;
    transform: translate(-110%, -40%);
    width: 31.65%;
    max-width: 200px;
  }

  .pm-video-icon {
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 31.65%;
    max-width: 200px;
  }

  .pm-table-icon {
    top: 120%;
    left: 50%;
    transform: translate(25%, -40%);
    width: 32.84%;
    max-width: 208px;
  }

  #pf-img {
    width: 100%;
    top: auto;
    position: relative;
    margin-top: 40px;
    max-width: 668px;
  }

  #promo-five {
    display: none;
  }

  #promo-six {
    margin-top: 200px;
  }

  #loginBtnPro, #signupBtnPro {
    font-size: 14px;
    padding: 6px 12px;
  }

  #overlap-menu img {
    width: 200px;
  }

  #overlap-menu {
    top: 10px;
    right: 10px;
    gap: 10px;
    transform: scale(0.8);
    transform-origin: top right;
  }
}

@media (min-width: 1433px) and (max-width: 1700px) {
  #pf-img {
    width: 1000px;
    top: 80%;
  }
}

#footer {
  font-size: 28px;
  color: #787878;
  display: flex;
  flex-direction: column;
  padding: 5vw;
  gap: 50px;
  background-color: #2e2e2e;
  border-top: 1px solid #444;

  margin-top: 200px;
}

#footer-lists {
  display: flex;
  flex-direction: row;
}

.list-title {
  color: #9c9c9c;
  margin: 30px 0 10px 0;
}

#left-list {
  flex: 1;
}

#right-list {
  flex: 1;
}

#copyright-bar {
  font-size: 20px;
  color: #555;
}

#footer a {
  color: rgb(122, 122, 122);
  text-decoration: none;

  display: block;
}

#footer a:hover {
  color: #d1d1d1;

  text-decoration: underline;
}

.list-option {
  margin: 0 0 15px 0;
}

.list-option:hover {
  cursor: pointer;
}