@import url('./reset.css');
@import url('./main.css');

/* Over Ride Header Styling For SW  */
.header__nav ul a:not(.header__nav__menu a) {
  text-decoration: none;
  color: var(--sec-text-color);
}
header.scrolled
  .header__nav:not(.header__nav.active)
  ul
  a:not(.header__nav__menu a) {
  text-decoration: none;
  color: var(--text-color);
}
/* End Over Ride Header Styling For SW  */

main {
  margin-top: calc(200rem / 16);
  --project-color: #01dfd1;
  --project-sec-color: #f6fffc;
}

/* start intro section */
.intro p:first-of-type,
.intro p:first-of-type span {
  font-size: var(--font-h4);
  font-weight: bold;
}
.intro .project {
  position: relative;
  font-size: var(--font-h1);
  font-weight: bold;
}
.intro .project::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(420rem / 16);
  height: calc(110rem / 16);
  background-image: url('../media/g-sense/vector_circle.png');
  background-size: cover;
}
.intro p:first-of-type span {
  color: var(--project-color);
}
/* end intro section */

/* start approach section */
.approach .approach__header {
  font-size: var(--font-h3);
  font-weight: bold;
  position: relative;
  width: fit-content;
}
.approach .approach__header::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: calc(-5rem / 16);
  left: calc(-10rem / 16);
  width: 100%;
  height: calc(37rem / 16);
  background-image: url('../media/g-sense/Vector.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.approach .approach__content p:nth-of-type(2),
.approach .approach__content p:nth-of-type(2) span {
  font-size: var(--font-medium);
}
.approach .approach__content p:nth-of-type(2) span {
  color: var(--project-color);
}
/* end approach section */

/* start info section */
.info p:first-of-type {
  font-size: var(--font-medium);
}
.info p:last-of-type span {
  color: var(--project-color);
}
/* end info section */

/* start challenges section */
.challenges .challenges__header {
  font-size: var(--font-h3);
  font-weight: bold;
  margin-bottom: calc(100rem / 16);
}
.challenges .challenges__header span {
  color: var(--project-color);
  font-size: inherit;
  font-weight: inherit;
}
.challenges .challenge {
  position: relative;
  overflow: hidden;
  min-height: 40vh;
}
.challenges .challenge__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border: 1px solid #eeeeee;
  cursor: pointer;
  height: 100%;
}
.challenges .challenge__details {
  padding: calc(25rem / 16) calc(50rem / 16);
  box-shadow: 1px 1px 38.5px 0px #00000026;
  border-left: calc(10rem / 16) solid var(--project-color);
  background-color: var(--project-sec-color);
  display: flex;
  flex-direction: column;
  gap: calc(20rem / 16);
  position: absolute;
  top: 150%;
  left: 0;
  width: 100%;
  height: 150%;
  transition: top 0.3s ease-in-out;
}
.challenges .challenge:hover .challenge__details {
  top: 0;
}
.challenges .challenge__details p:first-of-type {
  font-weight: bold;
}
/* end challenges section */

/* start functionality section */
.functionality .functionality__header {
  font-size: var(--font-h3);
  font-weight: bold;
  margin-bottom: calc(100rem / 16);
}
.functionality .functionality__header span {
  color: var(--project-color);
  font-size: inherit;
  font-weight: inherit;
}
.functionality .function {
  background-color: var(--project-sec-color);
  padding: calc(20rem / 16);
  border-radius: calc(20rem / 16);
}
.functionality .function span {
  display: inline-block;
  background-color: #01dfd11a;
  padding: calc(10rem / 16);
  border-radius: 50%;
  margin-bottom: calc(10rem / 16);
}
.functionality .function__content p:first-of-type {
  font-weight: bold;
  margin-bottom: calc(10rem / 16);
}
/* end functionality section */

/* start solution section */
.solutions .solutions__header {
  font-size: var(--font-h3);
  font-weight: bold;
  margin-bottom: calc(100rem / 16);
}
.solutions .solutions__header span {
  color: var(--project-color);
  font-size: inherit;
  font-weight: inherit;
}
.solutions .solution {
  box-shadow: 0px 5px 22.3px 0px #00000026;
  padding: calc(80rem / 16) calc(50rem / 16);
  border-radius: calc(40rem / 16);
}
/* end solution section */