/* *******Header ********/

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000000;
  padding: 0 4.8rem;

  /* Height for sticky part */
  height: 9.6rem;

  /* For mobile nav */
  position: relative;
}

.logo,
.logo:link,
.logo:visited {
  z-index: 9998;
  text-decoration: none;
  font-size: 2.4rem;
  color: #f1f3f5;

  transition: all 0.5s;
  align-self: center;
}

.logo:hover,
.logo:active {
  color: #99e9f2;
}

.logo-container {
  display: flex;
  align-items: center; /* Align vertically in the center */
  gap: 1rem; /* Optional: space between text and image */
}

/* *******Navigation******* */

.main-nav-list {
  list-style: none;
  display: flex;
  gap: 4.8rem;
  align-items: center;
}

.main-nav-link:link,
.main-nav-link:visited {
  text-decoration: none;
  display: inline-block;
  font-weight: 500;
  font-size: 1.8rem;
  color: #f1f3f5;

  /* Tranisitions */
  transition: all 0.5s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #99e9f2;
}

.main-nav-link.btn {
  color: #fff;
}

/* Mobile buttons */

.btn-mobile-nav {
  display: none;
  background: none;
  border: none;
}

.btn-mobile-icon {
  height: 4.8rem;
  width: 4.8rem;
}

.btn-mobile-nav[name='close-icon'] {
  display: none;
}

/* ******** Sticky Navigation */

.sticky .header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: 4.8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(0, 0, 0, 0.904);
}

.sticky .header .btn {
  padding: 0.8rem 1.6rem;
}

.sticky .section-hero {
  margin-top: 9.6rem;
}

.app-icon-header {
  height: 80px; /* Adjust this to match desired button height */
  width: auto; /* Maintain aspect ratio */
  display: block;
}
.app-icon-img {
  height: 80px; /* Adjust this to match desired button height */
  width: auto; /* Maintain aspect ratio */
  display: block;
}

.sticky .app-icon-header {
  height: 35px;
} /* 

--- 01 TYPOGRAPHY SYSTEM

- FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights:
Default: 400
medium: 500
Dark: 600
Darkest: 700

-Font size


- Line Heights:
Default: 1
small:
medium :
large :

SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

---02 Colours

- Primary 
- Tints: 
- Shades: 
- Accents:
- Greys: #555 #333  #000000

---05 Shadows

---06 Border Radius
default 9px

---07 White Spacer


-letter spacing
0.5px
0.75px

*/