* {
  margin: 0;
  padding: 0;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
body {
  background-color: #14120b;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 86%;
  margin: 16px auto;
  height: 40px;
  position: sticky;
}

.logo {
  color: white;
  font-size: 18px;
}
.midsec {
  color: white;
}

.butt {
  display: flex;
  gap: 36px;
}

.navbut {
  background-color: #201811;
  color: white;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: 16px;
}
#endsec {
  display: flex;
  gap: 12px;
}

.signin {
  background-color: transparent;
  color: inherit;
  font-size: 15px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.download {
  background-color: transparent;
  color: inherit;
  font-size: 15px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;

  border: 1px solid rgba(255, 255, 255, 0.2);

  cursor: pointer;
  background-color: #d7d6d5;
  color: black;
}
.mid2 {
  width: 86%;
  margin: 20px auto;
  color: white;
  margin-top: 110px;
}
.mid2 h4 {
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 70;
}
.mid2 button {
  background-color: #edecec;
  padding: 12px 40px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 26px;
  margin-top: 16px;
}
.mid2 button:hover {
  background-color: #fdf7f7;
}

.image {
  display: block;
  margin: 0 auto;
}
.image-box {
  display: flex;
  justify-content: center;
  margin-top: 58px;
}

.image-box img {
  width: 86%;
}
.grid {
  width: 86%;
  margin: 90px;
}

.para {
  text-align: center;

  color: white;
}
.grid1 {
  width: 86%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);

  gap: 10px;
  justify-content: center;
  margin-left: 96px;
  margin-top: 12px;
}
.one {
  height: 120px;
  background: rgb(27, 25, 19);
  color: white;
  border-radius: 8px;
  justify-content: center;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-container {
  background-color: #1d1b15;
  color: white;
  width: 86%;
  display: grid;
  grid-template-columns: 1.35fr 2.5fr;
  margin: 12px;
  margin-left: 96px;
  align-items: center;
  margin-bottom: 90px;
}
.text {
  margin-left: 40px;
}
.text h2 {
  color: white;
  margin: 0;
  font-size: 24px;
  margin-bottom: 20px;
}

.text p {
  margin-top: 30px;
  color: white;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.2;
}
#learn {
  margin-top: 26px;
  color: red;
  background-color: #1d1b15;
  padding: 10px 20px;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
.image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-right: 8px;
}

.grid-container2 {
  background-color: #1d1b15;
  color: white;
  width: 86%;
  display: grid;
  grid-template-columns: 2.5fr 1.35fr;
  margin: 12px;
  margin-left: 96px;
  align-items: center;
}
.text2 {
  margin-left: 40px;
}
.text2 h2 {
  color: white;
  margin: 0;
  font-size: 24px;
  margin-bottom: 20px;
}

.text2 p {
  margin-top: 30px;
  color: white;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.2;
}
#learn2 {
  margin-top: 26px;
  color: red;
  background-color: #1d1b15;
  padding: 10px 20px;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
.image2 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 16px;
}

.grid-container3 {
  background-color: #1d1b15;
  color: white;
  width: 86%;
  display: grid;
  grid-template-columns: 1.35fr 2.5fr;
  margin: 12px;
  margin-top: 90px;
  margin-left: 96px;
  align-items: center;
  margin-bottom: 90px;
}
.text3 {
  margin-left: 40px;
}
.text3 h2 {
  color: white;
  margin: 0;
  font-size: 24px;
  margin-bottom: 20px;
}

.text3 p {
  margin-top: 30px;
  color: white;
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.2;
}
#learn3 {
  margin-top: 26px;
  color: red;
  background-color: #1d1b15;
  padding: 10px 20px;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
.image3 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-right: 8px;
}
.paraend h3 {
  color: white;
  text-align: center;
  font-size: 30px;
  margin-bottom: 60px;
}

.grid-container5 {
  width: 86%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 14px;
}

.items {
  background: rgb(27, 25, 19);

  color: white;
  display: grid;

  /* place-items: center; */
  padding-top: 20px;
  padding-left: 10px;
}

.grid-container5 h5 {
  padding-left: 0px;
}
.abcd {
  display: flex;
  align-items: end;
  padding-bottom: 20px;
}
.idk h4 {
  width: 86%;
  color: rgb(237, 236, 236);
  margin-top: 160px;
  font-size: 26px;
  font-weight: 300;
  margin-left: 110px;
  margin-bottom: 30px;
}
.lower {
  width: 86%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 18px;
  margin-bottom: 580px;
}
#learn6 {
  margin-top: 26px;
  color: red;
  background-color: #1d1b15;
  padding: 10px 20px;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
#learn7 {
  margin-top: 26px;
  color: red;
  background-color: #1d1b15;
  padding: 10px 20px;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
#learn8 {
  margin-top: 26px;
  color: red;
  background-color: #1d1b15;
  padding: 10px 20px;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
.learn6img {
  width: 100%;
  height: 100%;
}
.learn7img {
  width: 100%;
  height: 100%;
}
.learn8img {
  width: 100%;
  height: 100%;
}
.learn6img img,
.learn7img img,
.learn8img img {
  width: 102%;
  height: 100%;
  object-fit: contain;
  margin-left: -9.6px;
}
.learn6img img {
  height: 95%;
}
.learn8img img {
  height: 98%;
}
.changelog {
  font-size: 26px;
  line-height: 32.5px;
  color: rgb(237, 236, 236);
  margin-left: 108px;
  margin-bottom: 22px;
}

.gridx {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 86%;
  margin: 0 auto;
  background-color: #14120b;
  padding: 20px;
}
.itemsss {
  background-color: #1a1812;
  padding: 15px;
  border-radius: 16px;
}
.itemsss h4 {
  color: #fff;
  margin-bottom: 8px;
}

.itemsss p {
  color: #999;
  font-size: 14px;
  line-height: 1.5;
}
#learn88 {
  margin-top: 20px;
  color: red;
  padding: 10px 20px;
  background-color: #14120b;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  margin-left: 110px;
  margin-bottom: 52px;
}

.grid-container6 {
  margin-top: 150px;
  background-color: #1d1b15;
  color: white;
  width: 86%;
  display: grid;
  grid-template-columns: 1.35fr 2.5fr;
  margin: 12px;
  margin-top: 90px;
  margin-left: 96px;
  align-items: center;
  margin-bottom: 200px;
}
.text33 {
  margin-left: 40px;
}
.text33 h2 {
  color: white;
  margin: 0;
  font-size: 22px;
  margin-bottom: 20px;
  line-height: 28.6px;
  font-weight: 120px;
}

#learn33 {
  margin-top: 26px;
  color: red;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
.image33 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-right: 8px;
}

body {
  margin: 0;
  background: #141311;
  color: #eaeaea;
  font-family: system-ui, sans-serif;
}

.wrapper {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin-top: 100px;
  background-color: #1b1913;
}
#learn3333 {
  color: red;

  font-size: 18px;
  padding: 4px 8px;
  border-radius: 20px;
  background-color: #1b1913;
  border: none;
  cursor: pointer;
}
.container9 {
  width: 900px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.9;
}

.cards {
  display: grid;
  gap: 20px;
}

.iteem {
  background: rgba(255, 255, 255, 0.04);
  padding: 20px;
  border-radius: 10px;
}

.iteem h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.iteem p {
  margin: 0 0 12px;
  font-size: 14px;
  opacity: 0.8;
}

.iteem h5 {
  margin: 0;
  font-size: 12px;
  opacity: 0.6;
}

#foot {
  margin-top: 150px;
  height: 100px;
  width: 100%;
  text-align: center;
  font-size: 36px;
}
.fut {
  margin-bottom: 30px;
  font-weight: 200;
}

.lastbut {
  padding: 15px 50px;
  border-radius: 40px;
  font-size: 24px;
  margin-bottom: 900px;
}
.footer {
  margin-top: 250px;
  height: 500px;
  width: 100%;
  background: #1b1913;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.tea {
  padding-top: 80px;
  margin-left: 110px;
  line-height: 1.6;
}

.copyright {
  width: 100%;
  height: 50px;

  margin-left: 110px;

  display: flex;
  gap: 40px;
  align-items: center;
  text-align: center;
}