@font-face {
  font-family: CursorGothic;
  src: url("./fonts/CursorGothic-Regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: CursorGothic;
  src: url("./fonts/CursorGothic-Italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: CursorGothic;
  src: url("./fonts/CursorGothic-Bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: CursorGothic;
  src: url("./fonts/CursorGothic-BoldItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

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

body {
  background-color: #13120a;
  color: #edecec;
  font-family:
    "CursorGothic", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  margin: 16px 20px;
  position: relative;
}

#nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 58px;
  background-color: #13120a;
  z-index: 100;
  padding: 0 49px;
}

#nav #logo {
  width: 97px;
  cursor: pointer;
}

#nav ul {
  display: flex;
  align-items: center;
  gap: 29px;
}

#nav ul li a {
  text-decoration: none;
  color: #edecec;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#nav #button-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

#nav button {
  border: none;
  cursor: pointer;
}

#nav #signInBTN {
  background-color: transparent;
  color: #edecec;
  border: 0.1px solid white;
  border-radius: 90px;
  padding: 5px 16px;
  font-weight: 400;
}

#nav #downloadBTN {
  background-color: #EDECEC;
  color: #13120a;
  border-radius: 90px;
  padding: 7px 18px;
}

#nav ul li:hover {
  opacity: 0.8;
}

#nav #signInBTN:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

#nav #downloadBTN:hover {
  background-color: #D7D6D5;
}

#main {
  margin: 135px 20px 0;
}

#main #mainContainter {
  padding: 29px;
}

#hero #hero-content h1 {
  font-size: 27px;
  font-weight: 400;
  line-height: 35px;
  margin-bottom: 22px;
}

#hero #hero-content button {
  background-color: #EDECEC;
  color: #13120a;
  border: none;
  border-radius: 90px;
  padding: 10px 18px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

#hero #hero-content img {
  width: 18px;
}

#hero #hero-content button:hover {
  background-color: #D7D6D5;
}

#hero #hero-content {
  margin-bottom: 56px;
}

#hero #hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

#companyLogo {
  padding-top: 56px;
}
#companyLogo #trustedText h1 {
  text-align: center;
  font-size: 14px;
  letter-spacing: -0.01em;
  font-weight: 400;
  padding-bottom: 22px;
}

#companyLogo #logoContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#companyLogo #logoContainer .logoBox {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1B1912;
  padding: 0;
  border-radius: 6px;
  width: 140px;
  height: 80px;
}

#companyLogo #logoContainer .logoBox img {
  width: 80px;
  height: auto;
  display: block;
}

#featuresSection {
  margin-top: 112px;
}

#feature {
  margin-bottom: 75px;
}

#feature .feature-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background-color: #1B1912; //#1B1912
  border-radius: 6px;
}

#feature .feature-content:hover {
  background-color: #1D1B16;
}

#feature .feature-content .feature-left {
  padding-left: 16px;
}

.padright {
  padding-right: 32px;
}

#feature .feature-content .feature-right {
  padding: 16px;
}

#feature .feature-content .feature-left h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 35px;
  display: block;
}

#feature .feature-content .feature-left p {
  font-size: 21px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 18px;
  color: #999894;
}

#feature .feature-content .feature-left a {
  text-decoration: none;
  color: #f54e00;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
}

#feature .feature-content .feature-left a:hover {
  opacity: 0.8;
}

#feature .feature-content .feature-right img {
  width: 830px;
  height: auto;
  display: block;
  border-radius: 6px;
}

#testimonial {
  margin-top: 112px;
}

#testimonial-container {
  padding: 5px;
}

#testimonial-container h1 {
  text-align: center;
  font-weight: 100;
  margin-bottom: 40px;
}

#testimonial-container #testimonialBox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#testimonial-container #testimonialBox .testimonialContent {
  background-color: #1B1912;
  border-radius: 9px;
  padding: 16px;
}

#testimonial-container #testimonialBox .testimonialContent p {
  font-size: 16px;
  font-weight: 100;
  padding-bottom: 130px;
}

#moreP {
  margin-bottom: 41px;
}

#morePa {
  margin-bottom: 40px;
}

#morePad {
  margin-bottom: 30px;
}

#testimonial-container #testimonialBox .testimonialContent figure {
  display: flex;
  align-items: center;
  gap: 10px;
}

#testimonial-container #testimonialBox .testimonialContent figure img {
  width: 40px;
  height: auto;
  border-radius: 3px;
}

#testimonial-container #testimonialBox .testimonialContent figure figcaption {
  display: inline;
  font-size: 17px;
  font-weight: 500;

}

#testimonial-container #testimonialBox .testimonialContent figure figcaption span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #999894;
}

#about {
  margin-top: 139px;
}

#about h1 {
  font-size: 25px;
  font-weight: 100;
  margin-bottom: 20px;
}

#about #about-container {
  display: flex;
  gap: 10px;
}

#about #about-container #cardBox .aboutContent {
  background-color: #1D1B16;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border-radius: 5px;
}

#about #about-container #cardBox .aboutContent h3 {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

#about #about-container #cardBox .aboutContent p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #9A9997;
}

#about #about-container #cardBox .aboutContent a {
  text-decoration: none;
  color: #f54e00;
  font-size: 16px;
  font-weight: 500;
  padding-top: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 19px;
}

#about #about-container #cardBox .aboutContent a:hover {
  opacity: 0.8;
}

#about #about-container #cardBox .aboutContent img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

#changelog{
  margin-top: 112px;
}

#changelog h1{
  font-size: 25px;
  font-weight: 100;
  margin-bottom: 20px;
}

#changelog #logsContainer {
  display: flex;
  gap: 10px;
}

#changelog #logsContainer .logBox {
  background-color: #1b1913;
  width: 350px;
  height: 120px;
  border-radius: 5px;
  padding: 16px;
  border-radius: 6px;
}

#changelog #logsContainer .logBox:hover {
  background-color: #201E18;
}

#changelog #logsContainer .logBox h3 {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 23px;
  color: #949391;
}

#changelog #logsContainer .logBox h3 span {
  margin-right: 15px;
  border: 1px solid #949391;
  border-radius: 19px;
  padding: 1px 9px;
}

#changelog #logsContainer .logBox p {
  font-weight: 200;
  width: 250px;
  font-size: 17px;
}

#changelog a {
  color: #f54e00;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
  display: block;
}

#changelog a:hover {
  opacity: 0.8;
}

#joinUs {
  margin-top: 125px;
}

#joinUs #box {
  background-color: #1B1912;
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 15px;
}


#joinUs #box #leftSide h1 {
  font-size: 21px;
  font-weight: 100;
  text-align: left;
  padding-bottom: 23px;
}

#joinUs #box #leftSide a {
  text-decoration: none;
  color: #f54e00;
  font-size: 16px;
  font-weight: 100;
  gap: 8px;
}

#joinUs #box #leftSide a:hover {
  opacity: 0.8;
}

#joinUs #box #rightSide {
  margin-left: 100px;
}

#joinUs #box #rightSide img {
  width: 810px;
  height: auto;
  display: block;
}

#recentHighlight {
  margin-top: 175px;
  background-color: #1B1912;
}

#recentHighlight #recentHighlightContainer {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 60px 60px 30px;
}

#recentHighlight #recentHighlightContainer #boxContainer #recentText {
  font-size: 16px;
  font-weight: 100;
}

#recentHighlight #recentHighlightContainer #boxContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 930px;
}

#recentHighlight #recentHighlightContainer #boxContainer .box {
  background-color: #201E18;
  padding: 22px;
  border-radius: 6px;
  margin-left: 300px;
}

#recentHighlight #recentHighlightContainer #boxContainer .box:hover {
  background-color: #24221b;
}

#recentHighlight #recentHighlightContainer #boxContainer .box h3 {
  font-size: 16px;
  font-weight: 100;
  padding-bottom: 5px;
}

#recentHighlight #recentHighlightContainer #boxContainer .box .description {
  font-size: 17px;
  color: #949391;
  font-weight: 100;
}

#recentHighlight #recentHighlightContainer #boxContainer .box .date {
  font-size: 17px;
  color: #949391;
  font-weight: 100;
}

#recentHighlight #recentHighlightContainer #viewMore {
  text-decoration: none;
  color: #f54e00;
  font-size: 16px;
  font-weight: 500;
  align-self: flex-start;
  margin-left: 300px;
}

#CTA {
  width: 100%;
  height: 400px;
}

#CTA #box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: 125px;
}

#CTA #box h1 {
  font-size: 64px;
  font-weight: 100;
}

#CTA #box button {
  display: flex;
  justify-content: center;
  background-color: #EDECEC;
  align-items: center;
  border-radius: 90px;
  padding: 14px 17px;
  font-size: 17px;
}

#CTA #box button img {
  width: 19px;
  height: auto;
}

#CTA #box button:hover {
  background-color: #D7D6D5;
}

footer {
  background-color: #1B1912;
  padding: 60px 80px 30px;
}

footer #links {
  display: flex;
  align-items: flex-start;
  gap: 160px;
  padding-bottom: 100px;
  font-size: 13px;
}

footer #links ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

footer #links p {
  color: #9A9997;
  font-weight: 100;
  font-size: 14px;
}

footer #links ul li {
  font-weight: 100;
  color: #EDECEC;
}

footer #lastPart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
}

footer #lastPart p {
  font-size: 14px;
  color: #9A9997;
}

footer #lastPart p span {
  padding-left: 18px;
}

footer #lastPart img {
  width: 310px;
  height: auto;
}