/* Variables */
:root {
  /* Primary colors */
  --clr-primary-100: hsl(7, 99%, 70%);
  --clr-primary-200: hsl(51, 100%, 49%);
  --clr-primary-300: hsl(167, 40%, 24%);
  --clr-primary-400: hsl(198, 62%, 26%);
  --clr-primary-500: rgba(144, 212, 197, 1);
  --clr-primary-600: hsl(168, 34%, 41%);

  /* Neutral colors */
  --clr-neutral-100: hsl(212, 27%, 19%);
  --clr-neutral-200: hsl(213, 9%, 39%);
  --clr-neutral-300: hsl(232, 10%, 55%);
  --clr-neutral-400: hsl(210, 4%, 67%);
  --clr-neutral-500: hsl(0, 0%, 100%);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Logo */
.logo {
  cursor: pointer;
  height: 30px;
}

/* Header */
.header {
  position: relative;
  height: 100dvh;
  background-size: cover;
  background: url(images/mobile/image-header.jpg);
  background-position: center;
  background-repeat: no-repeat;
  padding: 1.5em 1em;
}

@media (min-width: 50em) {
  .header {
    position: relative;
    height: 89vh;
    background-position: center;
    background: url(images/desktop/image-header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* Navigation wrapper */
.nav-wrapper {
  margin: 0 auto;
  position: relative;
  max-width: 1440px;
  padding: 0 2em;
}

@media (min-width: 50em) {
  .nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2em;
  }
}

/* Primary Navigation */
#primary-navigation {
  top: 100%;
  right: 5%;
  position: absolute;
  width: 90%;
  background-color: var(--clr-neutral-500);
  text-align: center;
  clip-path: polygon(95% 5%, 100% 0, 100% 100%, 0 100%, 0 5%);
  padding: 1em;
  padding-bottom: 0.5em;
  padding-top: 1.5em;
  display: none;
  z-index: 999;
}

@media (min-width: 50em) {
  #primary-navigation {
    all: unset;
  }
}

/* Hamburger Icon */
#nav-toggle {
  display: none;
}

.nav-toggle-label span,
.nav-toggle-label span::after,
.nav-toggle-label span::before {
  content: "";
  height: 2px;
  width: 1.5rem;
  position: absolute;
  background-color: var(--clr-neutral-500);
  top: 5px;
  right: 5%;
}

.nav-toggle-label span::after {
  top: 7px;
}

.nav-toggle-label span::before {
  top: -7px;
}

#nav-toggle:checked ~ .primary-navigation {
  display: block;
}

@media (min-width: 50em) {
  .nav-toggle-label {
    display: none;
  }
}

/* Navigation list, item and links */
.primary-navigation__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list__item {
  margin-bottom: 1em;
}

.item__link {
  text-decoration: none;
  color: var(--clr-neutral-300);
}

/* mobile navigation bar */
@media (min-width: 50em) {
  .primary-navigation__list {
    display: flex;
    align-items: center;
  }

  .list__item {
    margin-bottom: 0;
    margin-left: 2em;
  }
  .item__link {
    color: var(--clr-neutral-500);
  }
}

/* Call to Action button */
.cta {
  color: var(--clr-neutral-100);
  text-transform: uppercase;
  display: inline-block;
  border-radius: 100vw;
  padding: 0.7em 1em;
  background: var(--clr-primary-200);
}

@media (min-width: 50em) {
  .cta {
    margin-left: 1em;
    background: var(--clr-neutral-500);
    color: var(--clr-neutral-200);
  }
  .cta:hover {
    background-color: #6ecefe;
    color: var(--clr-neutral-500);
  }
}

/* heading 1 */
.main-heading {
  font-size: 3rem;
  margin-top: 2em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--clr-neutral-500);
}

@media (min-width: 50em) {
  .main-heading {
    font-size: 3.5rem;
    margin-top: 3em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--clr-neutral-500);
  }
}

.arrow {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -60%);
}

@media (min-width: 50em) {
  .arrow {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -70%);
  }
}

/* main section */
.main {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Learn more button */
.learn-more {
  text-decoration: none;
  color: var(--clr-neutral-100);
  position: relative;
}

.learn-more::after {
  content: "";
  position: absolute;
  height: 5px;
  width: 100%;
  background: var(--clr-primary-200);
  opacity: 0.6;
  border-radius: 100vw;
  bottom: 0;
  left: 0;
}

.learn-more:hover::after {
  opacity: 1;
}


/* Section details */
.details {
  padding: 2em 0.5em;
  order: -1;
}

.glass-details {
  padding: 2em 0.5em;
}

@media (min-width: 50em) {
  .details {
    text-align: left;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .glass-details {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Paragraphs */
.paragraph {
  margin: 0 auto;
  color: var(--clr-neutral-300);
  max-width: 32ch;
}

@media (min-width: 50em) {
  .paragraph {
    color: var(--clr-neutral-300);
    max-width: 45ch;
  }
}

/* Images for sections */
.egg__image {
  order: 0;
}

.glass__image {
  order: 0;
}

@media (min-width: 50em) {
  .egg__image {
    order: 1;
    width: 50%;
  }
  .glass__image {
    order: 0;
    width: 50%;
  }
}

.sub-heading {
  font-size: 2rem;
}

@media (min-width: 50em) {
  .sub-heading {
    font-size: 2.5rem;
    color: var(--clr-neutral-100);
    max-width: 14ch;
  }
}

/* Second learn more button */
.lm--updated {
  text-decoration: none;
  color: var(--clr-neutral-100);
  position: relative;
}

.lm--updated::after {
  content: "";
  position: absolute;
  height: 5px;
  width: 100%;
  background: var(--clr-primary-100);
  opacity: 0.6;
  border-radius: 100vw;
  bottom: 0;
  left: 0;
}

.lm--updated:hover::after {
  opacity: 1;
}

/* Text and buttons */
.text-and-buttons {
  text-align: center;
}

.text-and-buttons > *:not(:last-child) {
  padding: 1rem 0;
}
@media (min-width: 50em) {
  .text-and-buttons {
    text-align: left;
  }
  .egg {
    width: 100%;
    display: flex;
  }
  .glass {
    width: 100%;
    display: flex;
  }
  
}

/* Third Section */

.gfx {
  position: relative;
}

.for-gfx {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.para--gfx {
  color: var(--clr-neutral-100);
  max-width: 40ch;
}

@media (min-width: 50em) {
  .images {
    position: relative;
    display: flex;
  }

  .images__image {
    position: relative;
  }

  .for-gfx {
    text-align: center;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
  }

  .para--gfx {
    color: var(--clr-neutral-100);
  }
}

/* testimonials */

.testimonial-heading {
  font-size: 1.5rem;
  color: var(--clr-neutral-400);
  text-align: center;
}

.testimonials {
  padding: 2em 0;
}

.clients {
  padding: 2em 0;
}

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

.users:not(:last-child) {
  margin-bottom: 3em;
}

.user__images {
  border-radius: 100vw;
  height: 70px;
  width: 70px;
}

.user-name {
  text-align: center;
  padding-top: 1em;
}

.user-remarks {
  text-align: center;
  max-width: 32ch;
  color: var(--clr-neutral-200);
  margin: 1em 0;
}

.role {
  text-align: center;
  font-size: 0.85rem;
  color: var(--clr-neutral-300);
}

@media (min-width: 50em) {
  .testimonial-heading {
    padding-bottom: 2em;
  }
  .testimonials {
    padding: 8em 0;
  }

  .clients {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2em;
  }

  .update {
    margin-top: 2.5em;
  }
}

/* Gallery */
.section-1 {
  display: flex;
}
.section-2 {
  display: flex;
}

@media (min-width: 50em) {
  .gallery {
    display: flex;
  }
  .section-1 {
    display: auto;
  }
  .section-2 {
    display: auto;
  }
}


/* footer */

.footer {
  background: var(--clr-primary-500);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 3em 0;
}

.footer > * {
  margin-top: 2em;
}

.footer-logo {
  height: 30px;
}

.footer-list {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  list-style: none;
}

.social-list {
  list-style: none;
  display: flex;
  margin-top: 2em;
  padding: 0;
  cursor: pointer;
}

.social-list__item {
  margin-left: 1em;
}

.social-list__item:hover {
  fill: var(--clr-neutral-500);
}

.social-logo:hover {
  fill: var(--clr-neutral-500);
}

.list__item {
  margin-left: 2em;
}

.list__link {
  color: var(--clr-primary-600);
  text-decoration: none;
}

.list__link:hover {
  color: var(--clr-neutral-500);
}

/* utility classes */
.fraunces-bold {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}

.fraunces-black {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}

.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}