@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Share+Tech+Mono&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200..1000&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Share+Tech+Mono&display=swap');

/* Prevent horizontal overflow */
html, body {
  margin: 0; /* Remove default body margin */
  padding: 0; /* Remove default body padding */
  overflow-x: hidden; /* Hide horizontal overflow */
  width: 100%;
}

/* Ensure all elements respect the width of the viewport */
* {
  box-sizing: border-box; /* Include padding and border in width calculation */
}

.hero {
  width: 100%; /* Ensure the .hero section spans the full width */
}

.container {
  max-width: 100%; /* Prevent containers from exceeding viewport width */
  overflow: hidden; /* Hide any internal overflow */
}

.docHub {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.test {
  color: red;
}

.header {
  background-color: #1c1c1f;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 64px;
  color: #fff;
  font: 400 16px mulish, sans-serif;
}

.logoContainer {
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo {
  width: 106px;
  height: auto;
}

.navigation {
  display: flex;
  gap: 16px;
}

.navLink {
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
}

.headerActions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.demoButton {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #bdf78b;
  color: #1e1e22;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 60px;
  padding: 12px 16px;
  cursor: pointer;
}

.buttonIcon {
  width: 18px;
  height: 10px;
}

.themeToggle {
  display: flex;
  align-items: center;
  gap: 7px;
}

.themeIcon {
  width: 16px;
  height: 16px;
}

.themeText {
  color: #fff;
}

.hero {
  background-color: #3e4042;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 496px;
  /* Background properties for the repeating pattern */
  background-repeat: repeat; /* Ensure the pattern repeats */
  background-size: auto;
  display: flex;
  background-position: center; /* Adjust vertically or horizontally */
}

.heroContent {
  max-width: 100%;
  padding: 0 37px;
}

.heroTitle {
  color: var(--text-inverted-default, #FFF);
  text-align: center;
  width: 372px;
  height: 42px;
  gap: 28px;
  opacity: 0px;

  /* Correct usage of Mulish font */
  font-family: Mulish, sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 700 !important; /* Ensuring bold weight is applied */
  /*line-height: 90px; /* 150% */
}


/* Typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Blinking cursor animation */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}


.heroDescription {
  color: #fff;
  font-size: 24px;
  font-family: Mulish, sans-serif;
}

.searchForm {
  position: relative;
  width: 100%;
  max-width: 539px;
  margin-top: 40px;
}

.searchInput {
  width: 100%;
  padding: 10px 10px;
  border-radius: 50px;
  border: none;
  background-color: #1e1e22;
  color: #fff;
  font: 16px Mulish, sans-serif;
}

.searchButton {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 42px;
  background-color: #bdf78b;
  border: none;
  border-radius: 60px;
  cursor: pointer;
}

.searchIconAI {
  position: absolute;
  left: 16px; /* Position the icon inside the input */
  width: 24px;
  height: 39px; /* Adjust size of the icon */
  opacity: 80%;
  pointer-events: none; /* Prevent the icon from intercepting clicks */
}

.searchIcon {
  width: 16px;
  height: 16px;
}

.popularSearches {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
  font: 12px Mulish, sans-serif;
}

.searchTag {
  background-color: rgba(30, 30, 34, 0.5);
  border: none;
  border-radius: 60px;
  padding: 4px 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.productCards {
  display: flex;
  margin-top: -165px;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* Adjust for tablets and medium devices */
@media (max-width: 1024px) {
  .productCards {
    gap: 16px; /* Reduce gap between items */
    margin-top: -130px; /* Adjust margin for smaller screens */
  }
}

/* Adjust for mobile devices */
@media (max-width: 768px) {
  .productCards {
    flex-direction: column; /* Stack items vertically */
    gap: 12px; /* Smaller gap */
    margin-top: -130px; /* Further reduced margin */
  }
}

/* Optional for very small screens */
@media (max-width: 480px) {
  .productCards {
    gap: 8px; /* Compact gap */
    margin-top: -100px; /* Minimal margin for small devices */
  }
}


.productCard {
  background-color: rgba(44, 46, 48, 1);
  border-radius: 32px;
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 23px;
  max-width: 528px;
  flex: 1 0 0;
  align-self: stretch;
  height: 140px;
  max-width: 430px;
  gap: 23px;
  opacity: 0px;
  font-family: Mulish, sans-serif;
  transition: border-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
  border: 2px solid transparent; /* Default border */
}

.productCard:hover {
  border-color: #bdf78b; /* Change border to red on hover */
  cursor: pointer; /* Show pointer cursor */
}

.productIcon {
  height: 70px;
  width: 80px;
}

.productInfo {
  display: flex;
  flex-direction: column;
}

.productCategory {
  color: #bdf78b;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.26px;
  text-transform: uppercase;
}

.productTitle {
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  margin-top: 6px;
}

.productDescription {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  margin-top: 6px;
}

.gettingStarted {
  background-color: #fff;
  padding: 160px 64px 96px;
}

.sectionTitle {
  color: #1e1e22;
  font-size: 40px;
  font-weight: 800;
  line-height: 36px;
  text-align: center;
}

.sectionSubtitle {
  display: block;
  font-size: 24px;
  font-weight: 600;
  margin-top: 10px;
}

.stepsContainer {
  display: flex;
  gap: 24px;
  margin-top: 64px;
}

.stepCard {
  background-color: #e7e8ea;
  border-radius: 41px;
  padding: 24px;
  flex: 1;
}

.stepHeader {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stepNumber {
  background-color: #1c1c1f;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}

.stepTitle {
  color: #1c1c1f;
  font-size: 24px;
  font-weight: 700;
}

.stepContent {
  margin-top: 16px;
  padding-left: 70px;
}

.stepDescription {
  color: rgba(28, 28, 31, 0.9);
  font-size: 16px;
  line-height: 21px;
}

.stepActions {
  display: flex;
  gap: 40px;
  margin-top: 24px;
}

.actionButton {
  background: none;
  border: none;
  color: #1c1c1f;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.resourcesSection {
  background-color: #3E4042;
  display: flex;
  padding: 80px 64px;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  align-self: stretch;
}

/* Adjust for tablets and medium devices */
@media (max-width: 1024px) {
  .resourcesSection {
    padding: 60px 32px; /* Reduce padding for smaller screens */
    gap: 32px; /* Reduce space between items */
  }
}

/* Adjust for mobile devices */
@media (max-width: 768px) {
  .resourcesSection {
    flex-direction: column; /* Stack items vertically */
    padding: 40px 20px; /* Further reduce padding */
    gap: 20px; /* Smaller gap for mobile */
    align-items: center; /* Center-align content */
  }
}

/* Optional for very small screens */
@media (max-width: 480px) {
  .resourcesSection {
    padding: 20px 10px; /* Minimal padding */
    gap: 12px; /* Compact gap */
  }
}


.resourcesHeader {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}

.resourcesTitle {
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  line-height: 48px;
}

.learnMoreButton {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #bdf78b;
  border: none;
  border-radius: 60px;
  padding: 12px 16px;
  color: #1e1e22;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.resourcesGrid {
  display: flex;
  gap: 24px;
}

.resourceCard {
  background-color: #1E1E22;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 36px 30px;
  width: 180px;
  height: 180px;
  box-sizing: border-box;
  transition: border-color 0.3s, transform 0.3s ease; /* Smooth transition for hover effects */
  border: 2px solid transparent; /* Default border */
}

.resourceCard:hover {
  border-color: #bdf78b; /* Green border on hover */
  transform: translateY(-5px); /* Slight lift on hover */
}

.resourceCard a {
  text-decoration: none; /* Remove underline for links */
  color: inherit; /* Inherit text color */
  display: flex; /* Ensure content stays inside the link */
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.resourceIcon {
  width: 70px;
  height: 70px;
}

.resourceTitle {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  padding-top: 15px;
}

.featureGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 32px;
  padding: 96px 64px;
  margin-top: -86px;
}

/* Adjust for tablets and smaller devices */
@media (max-width: 1024px) {
  .featureGrid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    padding: 64px 32px; /* Reduce padding */
    gap: 24px; /* Smaller gap */
  }
}

/* Adjust for mobile devices */
@media (max-width: 768px) {
  .featureGrid {
    grid-template-columns: 1fr; /* Single column */
    padding: 48px 16px; /* Further reduced padding */
    gap: 16px; /* Even smaller gap */
  }
}

/* Optional for very small screens */
@media (max-width: 480px) {
  .featureGrid {
    padding: 32px 8px; /* Minimal padding for compact layout */
    gap: 8px; /* Compact gap */
  }
}




.featureCard {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space between content blocks */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transform and shadow */
  overflow: hidden; /* Prevent content from overflowing during scaling */
}


/* Dark Mode */
html.dark {
  .featureCard {
  background-color: #121217;
  color: #fff;
  }
  .featureDescription {
    color: #FFF;
  }
  .featureGrid {
    background-color: #121217;
  }
  .heroTitle {
    color: #FFFFFF;
  }
  .learnMoreButton {
    color: #1e1e22;
  }
  .resourcesTitle {
    color: #FFF;
  }
}

.featureCard:hover {
  transform: scale(1.05); /* Slightly increase the size of the card */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.arrowIcon {
  display: none;
  width: 16px; /* Adjust size to match the design */
  height: 16px;
  margin-left: 4px; /* Optional: Adds extra space if needed */
  vertical-align: middle; /* Ensures proper alignment with the text */
  transition: transform 0.2s ease; /* Adds a smooth effect on hover if desired */
}

.featureCard:hover .arrowIcon {
  display: block; /* Show the arrow icon when the card is hovered */
}

.featureHeader {
  display: flex;
  align-items: center; /* Align icon and title vertically */
  gap: 12px; /* Space between icon and title */
  margin-bottom: 16px;
}

.featureIcon {
  background-color: #e7e8ea;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.featureTitle {
  color: #1c1c1f;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex; /* Ensures the title and icon align horizontally */
  align-items: center; /* Aligns the icon with the text */
  gap: 8px; /* Adds space between the title and the icon */
  margin: 0;
}

.featureDescription {
  color: #1c1c1f;
  font-size: 14px;
 /* margin-top: 8px; */
  padding-left: 52px;
}

.footer {
  background-color: #1e1e22;
  padding: 88px 64px 16px;
}

.footerContent {
  display: flex;
  justify-content: space-between;
}

.footerColumn {
  display: flex;
  flex-direction: column;
}

.footerColumnTitle {
  color: #bdf78b;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footerLinkList {
  list-style-type: none;
  padding: 0;
}

.footerLink {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  line-height: 2;
}

.socialLinks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.socialLink {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.socialIcon {
  width: 17px;
  height: 17px;
}

.footerDivider {
  background-color: #bdf78b;
  height: 1px;
  margin: 48px 0;
}

.footerBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footerLogo {
  width: 106px;
}

.copyright {
  color: #fff;
  font-size: 16px;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 991px) {

  .containerFluid {
    width: 100%;
  }

  .header {
    padding: 16px 20px;
  }

  .hero {
    padding: 100px 20px;
  }

  .heroTitle {
    font-size: 40px;
  }

  .productCards {
    flex-direction: column;
    padding: 0 20px;
  }

  .gettingStarted {
    padding: 100px 20px;
  }

  .stepsContainer {
    flex-direction: column;
  }

  .resourcesSection {
    padding: 100px 20px;
  }

  .resourcesGrid {
    flex-wrap: wrap;
    justify-content: center;
  }

  .featureGrid {
    padding: 60px 20px;
  }



  .footer {
    padding: 60px 20px 16px;
  }

  .footerContent {
    flex-wrap: wrap;
    gap: 40px;
  }
}