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

body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  background-color: #08090b;
  height: 100vh;
}

/* navbar design */
header {
  position: fixed;
  width: 100%;
  padding: 1rem;
  /* background: rgba(255, 255, 255, 0.1); */
}

.logo {
  height: 25px;
}

.navbar {
  height: 100%;
  width: 100%;
}

.nav-container {
  width: 67rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-items ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin-left: 7rem;
}

.nav-items a {
  text-decoration: none;
  color: lab(100 0 0);
  font-size: 1rem;
  padding: 6px 12px;
}

.nav-items a:hover {
  border-radius: 20px;
  background-color: lab(100 0 0 / 0.05);
}

.sales-button {
  font-size: 1rem;
  color: #f1eaea;
  background-color: lab(100 0 0 / 0.05);
  border: none;
  padding: 0.5rem 0.75rem;
  border-radius: 2.5rem;
  cursor: pointer;
}

.subscribe {
  font-size: 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 3rem;
  cursor: pointer;
  border: none;
  color: lab(2 -0.17 -0.47);
}

.subscribe:hover {
  background-color: #c0bcbc;
}

/* main section design starts */
/* hero section */
.hero-section {
  /* 
    background-image property needs a box to print, so we have to assign
    a height to this section.
  */
  background-image: url("./Images/bg-dark.svg");
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 7rem;
  width: 100%;
}

.hero-div {
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 67rem;
  margin: 0 auto;
}

.hero-div a {
  background-color: rgba(221, 219, 217, 0.16);
  text-decoration: none;
  color: #d8d5d5;
  border-radius: 40px;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.hero-div span {
  background-color: lab(51.3415% -41.5657 15.3527);
  color: #f9f9f9;
  padding: 4px 8px;
  border-radius: 11px;
  font-size: 0.875rem;
}

.h-suggestion {
  font-size: 1rem;
}

.hero-div p::after {
  content: "→";
  background-color: #fff;
  margin-left: 0.5rem;
  padding: 2px 4px;
  color: #0a0a0a;
  border-radius: 50%;
  font-size: 0.8rem;
}

.hero-text {
  /* border: 1px solid red; */
  width: 100%;
  text-align: center;
  padding: 4rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-text h1 {
  color: lab(100 0 0);
  font-size: 3.598rem;
  font-weight: 500;
  width: 37.5rem;
}

.hero-text h2 {
  color: lab(91.64% 0 -0.01);
  font-size: 1.2rem;
  width: 25rem;
  margin-top: 2rem;
  font-weight: 400;
  line-height: 1.5;
}

.hero-email-subs {
  background-color: rgba(221, 219, 217, 0.16);
  padding: 0.3rem;
  margin-top: 2rem;
  border-radius: 2.5rem;
}

.hero-email-subs > input {
  padding: 0 8px;
  color: lab(100 0 0);
  background: transparent;
  border: none;
  width: 18rem;
  outline: none;
  font-size: 1.2rem;
}

.hero-text form > input::placeholder {
  color: rgba(255, 255, 255, 0.622);
}

.hero-email-subs button {
  background: lab(100 0 0);
  color: #000000;
  padding: 9px 12px;
  font-size: 1rem;
  border-radius: 2.5rem;
}

.h-img img {
  border-radius: 20px;
}

/* brand CTA section */
.brand-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 2rem 6rem;
}

.cta-grid-container {
  width: 67rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 2.5rem;
  column-gap: 1rem;
}

.cta-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.9rem;
}

/* built section design */

.built-container {
  /* border: 1px solid red; */
  width: 67rem;
  margin: 0 auto 9rem;
}

.built-text-container {
  /* border: 1px solid yellow; */
  color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 2rem;
  row-gap: 1rem;
}

.built-text-container h2 {
  font-size: 3rem;
  font-weight: 500;
}

.built-text-container p {
  color: lab(100% 0 0/0.7);
  width: 40.5rem;
  text-align: center;
  text-wrap: balance;
}

.built-card-container {
  /* border: 1px solid blue; */
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.built-card-box-1 {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.build-card {
  border: 1px solid lab(100% 0 0/0.07);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card-text {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  row-gap: 1rem;
}

.card-image {
  text-align: center;
  margin-top: auto;
}

.card-text p:first-child {
  color: lab(79.9844% -59.6292 22.5096);
  font-size: 0.813rem;
}

.card-text h3 {
  font-size: 1.6rem;
  font-weight: 400;
  color: lab(100% 0 0);
}

.card-text p:last-child {
  text-wrap: balance;
  color: lab(100% 0 0/0.7);
  line-height: 1.4;
}

.built-card-box-2 {
  /* border: 1px solid red; */
  padding: 1rem;
  border: 1px solid lab(100% 0 0/0.07);
  border-radius: 1rem;
}

.built-card-2-text {
  /* border: 1px solid yellow; */
  /* color: #f9f9f9; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2rem;
  row-gap: 1rem;
}

.built-card-2-img {
  /* border: 1px solid rgb(242, 0, 255); */
  text-align: center;
}

.built-card-2-text p:first-child {
  color: lab(79.9844% -59.6292 22.5096);
  font-size: 0.813rem;
}

.built-card-2-text h4 {
  font-size: 1.6rem;
  font-weight: 400;
  color: lab(100% 0 0);
}

.built-card-2-text p:last-child {
  text-wrap: balance;
  color: lab(100% 0 0/0.7);
  line-height: 1.4;
  max-width: 40rem;
  text-align: center;
}

/* enterprise section design */
.entrp-section {
  background-color: lab(100% 0 0/0.05);
  max-width: 100%;
  padding: 6rem 0;
}

.enp-container {
  max-width: 67rem;
  margin: 0 auto;
  /* border: 1px solid red; */
}

.enp-cta {
  /* border: 1px solid yellow; */
  display: flex;
  justify-content: space-between;
  padding-bottom: 3rem;
}

.enp-cta div {
  /* border: 1px solid blue; */
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  max-width: 40rem;
}

.enp-cta div h4 {
  color: lab(79.9844% -59.6292 22.5096);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.038rem;
  font-weight: 400;
}

.enp-cta div h3 {
  color: lab(100% 0 0);
  font-size: 2.5rem;
  font-weight: 500;
  text-wrap: balance;
  line-height: 2.75rem;
}

.enp-cta div p {
  color: lab(100% 0 0/0.7);
  text-wrap: balance;
  font-weight: 300;
}

.enp-cta a {
  text-decoration: none;
  margin-top: auto;
}

.enp-cta button {
  padding: 0.75rem 2rem;
  border-radius: 3rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.enp-cta button:hover {
  background-color: #d8d5d5;
}

.enp-feature {
  /* border: 1px solid red; */
  margin: 2rem 0;
  padding-bottom: 5rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.enp-feature h4 {
  margin: 2rem 0 1rem;
  color: lab(100 0 0);
  font-size: 1.25rem;
  font-weight: 400;
  text-wrap: balance;
}

.enp-feature p {
  color: lab(100% 0 0/0.7);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: balance;
  font-weight: 300;
}

.enp-img {
  max-width: 100%;
}

.enp-img-container {
  background-image: url("./Images/att.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 6rem 3.5rem;
  border-radius: 2rem;
}

.enp-img-ct {
  display: flex;
  flex-direction: column;
}

.enp-img-ct h3 {
  margin-top: 1rem;
}

.enp-img-ct .enpimagebox {
  margin: 8.594rem 0 0 0;
  display: flex;
  gap: 1.2rem;
}

.enpimagebox p:first-child {
  color: #ffff;
  font-size: 2.5rem;
}

.enpimagebox p:last-child {
  color: lab(100% 0.01 -0.01 / 0.58);
  font-size: 0.875rem;
  text-wrap: balance;
}

.enp-img-ct > p {
  color: #ffff;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.enp-img-ct h3 {
  font-size: 1.5rem;
  color: #ffff;
  width: 35rem;
  text-wrap: balance;
  font-weight: 400;
}

#enp_section_p {
  text-transform: none;
  margin-top: 3rem;
  font-size: 1rem;
}

#enp_section_p::after {
  content: "›";
  margin-left: 8px;
  font-size: large;
}

.enp-brands-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.enp-brand-box img {
  height: 4.063rem;
}

/* customer section */
.customer-section {
  padding: 4.5rem 0;
  max-width: 100%;
}

.customer-info {
  max-width: 67rem;
  margin: 0 auto;
  padding: 2.5rem 2rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 1rem;
}

.customer-info p:first-child {
  color: lab(79.9844% -59.6292 22.5096);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.038rem;
  font-weight: 400;
}

.customer-info h2 {
  font-size: 2.5rem;
  color: lab(100 0 0);
  font-weight: 500;
}

.customer-info p:last-child {
  color: lab(100% 0 0 / 0.7);
  line-height: 1.4;
  max-width: 38rem;
  text-align: center;
}

.customer-banner img {
  max-width: 100%;
}

/* documentation winning section */
.docs-win-section {
  padding: 7.5rem 0.25rem;
  /* border: 1px solid red; */
  max-width: 100%;
}

.docs-win-box {
  /* border: 1px solid blue; */
  max-width: 67rem;
  margin: 0 auto;
  color: #f1eaea;

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

.docs-win-box > h3 {
  font-size: 2.5rem;
  color: lab(100 0 0);
  font-weight: 500;
  max-width: 600px;
  text-wrap: balance;
  text-align: center;
}

.docs-win-box .win-p {
  color: lab(100 0 0);
  line-height: 1.4;
  margin-top: 1rem;
}

.box-button {
  margin-top: 3rem;
}

.box-button #white {
  padding: 0.75rem 2rem;
  border-radius: 3rem;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.box-button #black {
  padding: 0.75rem 2rem;
  border-radius: 3rem;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid lab(100% 0.01 -0.01 / 0.133);
  cursor: pointer;
  color: lab(100 0 0);
  background-color: lab(2.42579% -0.165291 -0.470081);
}

.box-banner-grid {
  /* border: 1px solid yellow; */
  margin-top: 4rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.box-banner {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.box-banner img {
  width: 4rem;
}

.box-banner div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.box-banner h4 {
  font-size: 1.25rem;
  color: lab(100 0 0);
  font-weight: 300;
}

.box-banner p {
  color: lab(100% 0.01 -0.01 / 0.825);
  font-size: 1rem;
}

.box-banner a {
  text-decoration: none;
  color: lab(79.9844% -59.6292 22.5096);
}

.box-banner a::after {
  content: "›";
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.box-banner a:hover::after {
  transform: translateX(5px);
}

.box-banner-1 {
  border-right: 1px solid lab(100% 0.01 -0.01 / 0.066);
}

/* footer section */
footer {
  background-color: lab(100% 0 0/0.05);
}

.footer-section {
  max-width: 67rem;
  margin: 0 auto;
}

.ft-social-mediad a > img {
  width: 30px;
}

.ft-box-1 {
  display: flex;
  justify-content: space-between;
  padding: 64px 32px 24px;
  border: 1px solid lab(100% 0.01 -0.01 / 0.066);
}

.ft-social-mediad {
  display: flex;
  column-gap: 1rem;
}

.ft-box-2 {
  width: 100%;
  padding: 48px 32px 72px;
  border: 1px solid lab(100% 0.01 -0.01 / 0.066);
  display: grid;
  /* grid-template-columns: repeat(5, 1fr); */
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ft-box-item h3 {
  color: lab(100% 0 0/0.5);
  text-transform: uppercase;
  font-size: 0.813rem;
  font-weight: 400;
  margin-bottom: 4px;
  padding: 6px 12px;
}

.ft-box-item ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: start;
  align-items: start;
}

.ft-box-item li {
  padding: 6px 12px;
}

.ft-box-item li > a {
  color: lab(100% 0 0);
  font-size: 0.875rem;
  text-decoration: none;
}

.ft-box-3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 32px 96px;
  border: 1px solid lab(100% 0.01 -0.01 / 0.066);
}

.ft-box-3 div:last-child {
  display: flex;
  gap: 1rem;
  background-color: lab(100% 0 0/0.05);
  padding: 5px;
  border-radius: 3rem;
  cursor: pointer;
}

.ft-box-3 div:first-child {
  color: lab(100% 0 0);
  background-color: lab(100% 0 0/0.05);
  padding: 6px 14px;
  font-size: 0.813rem;
  border-radius: 3rem;
}

.ft-box-3 div:first-child::before {
  content: "⌾";
  font-size: 15px;
  color: lab(79.9844% -59.6292 22.5096);
  margin-right: 6px;
}

.copy-right {
  color: lab(100 0 0/0.6);
  font-size: 0.813rem;
}

/* end of the line */