@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;700;900&display=swap');

* {
  margin: 0;
  padding: 0;
  text-decoration: 0;
  box-sizing: border-box;
  font-size: 16px;
}

/* 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;
  line-height: 0;
}

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


/* remove all button styles */
button {
  all: unset;
  cursor: pointer;
}

/* colors  */
:root {
  /* primary */
  --dark-yellow: hsl(48, 87%, 46%);
  --dark-blue: hsl(229, 77%, 17%, 1);
  /* secondary */
  --light-yellow: hsl(48, 90%, 61%);
  --light-blue: hsl(229, 45%, 33%);
  /* neutral */
  --black: rgb(55, 55, 82);
  --gray: hsla(240, 10%, 57%, 1);
  --light-gray: hsla(240, 10%, 57%, 0.25);
  --white: hsla(0, 0%, 98%, 1);
  /* buttom hover */
  --yellow-hover: hsla(48, 87%, 46%, 1);
  --blue-hover: hsla(229, 77%, 17%, 1);
  --light-blue-hover: hsla(229, 45%, 33%);
}

body {
  min-height: 100vh;
  line-height: 1.3;
  text-rendering: optimizeSpeed;
  font-family: 'IBM Plex Sans';
  background-color: var(--white);
  margin: 0;
}

/* *** utilities *** */

/* headings */
.h1,
.gradient-text {
  font: 900 4rem/100% Red Hat Display, serif;
  color: var(--black);
}

.gradient-text {
  background: linear-gradient(92.19deg, #f5d142 -15.84%, #2e3c7a 114.64%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.h2 {
  font: 900 2.5rem/110% Red Hat Display, serif;
  color: var(--black);
}

.body-text {
  font: 500 1.125rem/144% Red Hat Display, serif;
  color: var(--gray);
}

.overline {
  font: 900 1rem/160% Red Hat Display, serif;
  color: var(--dark-cyan);
  text-transform: uppercase;
}

/* buttons */
.btn-1,
.btn-2,
.btn-3 {
  font: 900 1rem/160% Red Hat Display, serif;
  color: var(--white);
  padding: 1rem 2.5rem;
  border-radius: 2rem;
}

/* highlighted button text */
.btn {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  cursor: pointer;
}

.btn-1 {
  background-color: var(--dark-yellow);
}

.btn-1:hover {
  background-color: var(--blue-hover);
}


.btn-2 {
  background-color: var(--dark-blue);
}

.btn-2:hover {
  background-color: var(--yellow-hover);
}

.btn-3 {
  background-color: var(--dark-blue);
}

.btn-3:hover {
  background-color: var(--light-blue-hover);
}


/* padding and margins */
.pb-42 {
  padding-bottom: 2.625rem;
}

/* *** utilities *** */

header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5rem 0 3.75rem 0;
}

.meet-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  flex-direction: row;
}

.meet-logo:hover {
  filter: saturate(3);
}

.meet {
  order: 2;
  transition: ease-out 1s;
}

/* logo hover effect */
.meet,
.icon {
  transition: ease-out 1s;
}

.meet:hover~.icon {
  transform: rotate(720deg);
  filter: blur(0.0625rem);
  transition: cubic-bezier(0.65, 0.05, 0.36, 1) 1s;
}

.icon:hover {
  transform: rotate(-720deg);
  filter: blur(0.0625rem);
  transition: cubic-bezier(0.65, 0.05, 0.36, 1) 1s;
}

/* hero section */

.container {
  max-width: 91.25rem;
}

.hero-wrapper {
  text-align: center;
  gap: 1.75rem;
}

.hero-wrapper .body-text {
  max-width: 36.25rem;
  overflow: hidden;
}

/* flex class for all the page */
.flex,
.flex-hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img {
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero-img-mobile {
  display: none;
}


.hero-img-left {
  content: url(./assets/desktop/image-hero-left.png);
  margin-bottom: 3rem;
  transition: ease 0.5s;
}

.hero-img-right {
  content: url(./assets/desktop/image-hero-right.png);
  margin-bottom: -3rem;
  transition: ease 0.5s;
}

.hero-img-left:hover {
  content: url(./assets/desktop/image-hero-left-hover.png);
  margin-bottom: 3rem;
  transition: ease 0.5s;
  filter: saturate(0.5);
}

.hero-img-right:hover {
  content: url(./assets/desktop/image-hero-right-hover.png);
  margin-bottom: -3rem;
  transition: ease 0.5s;
  filter: saturate(0.5);
}


/* dividers */

.divider {
  padding-top: 6.875rem;
}

.divider-2 {
  padding-top: 4.375rem;
}

.number-one,
.number-two {
  font: 900 1rem/160% Red Hat Display, serif;
  color: var(--gray);
  background-color: var(--white);
  border: 0.0938rem solid var(--light-gray);
  border-radius: 6.25rem;
  margin: 0 auto;
  width: 3.5rem;
  height: 3.5rem;
}

.number-bar {
  margin: 0 auto;
  content: "";
  width: 0.0625rem;
  height: 5.25rem;
  background-color: var(--light-gray);
}

/* photo gallery section */

.photo-gallery-wrapper {
  display: flex;
  justify-content: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.875rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* max-width 1110px centered */

.gallery-grid,
footer {
  max-width: 69.375rem;
  margin: 0 auto;
}

/* *** */

.gallery-container {
  overflow: hidden;
  border-radius: 0.5rem;
}

.gallery-grid img {
  overflow: hidden;
  border-radius: 0.5rem;
  transition: ease-out 0.5s;
}

.gallery-grid img:hover {
  transition: linear 0.5s;
  transform: scale(1.05) translateX(0.1875rem);
  filter: saturate(2);
}

.gallery-grid {
  transition: linear 0.5s;
}

.gallery-grid:hover>.gallery-container:not(:hover) {
  filter: grayscale(0.6);
  opacity: 0.8;
  transition: linear 0.5s;
}

/* explainer section */

.explainer-section-wrapper {
  flex-direction: column;
  max-width: 32.5rem;
  text-align: center;
  margin: 0 auto;
}

.explainer-section-wrapper .body-text {
  padding-top: 2.375rem;
}

.explainer-section-wrapper .h2 {
  padding-top: 1.375rem;
}


/* footer section */
.footer-wrapper {
  background-color: var(--dark-yellow);
  position: relative;
  z-index: 1;
  height: 21.875rem;
  margin-top: -1.75rem;
}

.number-two {
  position: relative;
  z-index: 2;
}

.flex footer {
  gap: 5rem;
  justify-content: space-between;
}

.footer-wrapper .body-text,
.footer-wrapper .h2 {
  color: var(--white);
  max-width: 21.875rem;
}

.footer-wrapper .btn-1:hover {
  background-color: var(--yellow-hover);
}

.footer-wrapper::before {
  content: "";
  background-image: url(./assets/desktop/image-footer.jpg);
  background-size: cover;
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  opacity: 0.2;
  z-index: -5;
}

/* breakpoints */

/* tablet breakpoint */

@media (max-width: 79.375rem) {

  .flex-hero {
    flex-direction: column;
  }

  .hero-img,
  .hero-img-left {
    display: none;
  }


  .hero-img-mobile {
    display: flex;
    padding-bottom: 4.375rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    /* width: 100%; */
  }

  .hero-img-mobile:hover {
    content: url(./assets/tablet/image-hero-hover.png);
  }

  .hero-wrapper .body-text {
    max-width: 32.5rem;
  }

  .explainer-section-wrapper {
    flex-direction: column;
    max-width: 41.25rem;
    text-align: center;
    margin: 0 auto;
  }

  .footer-wrapper {
    height: 26.75rem;
  }

  .flex footer {
    display: flex;
    text-align: center;
    flex-direction: column;
    gap: 2.5rem;
  }

  .footer-wrapper .body-text {
    max-width: 33.4375rem;
  }
}

@media (max-width: 62.5rem) {
  .footer-wrapper::before {
    background-image: url(./assets/tablet/image-footer.jpg);
  }
}

@media (max-width: 56.25rem) {

  .h1,
  .gradient-text {
    font-size: 3rem;
  }
}

/* mobile breakpoint */
@media (max-width: 50rem) {
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 0 1.5rem;
  }

  .explainer-section-wrapper {
    max-width: 25rem;
  }

  .footer-wrapper .h2,
  .h2 {
    font-size: 2rem;
  }

  .btn {
    flex-wrap: wrap;
    align-items: center;
  }

  .flex footer {
    display: flex;
    text-align: center;
    flex-direction: column;
    max-width: 18.75rem;
    gap: 2.5rem;
  }
}

@media (max-width: 37.5rem) {

  .h1,
  .gradient-text {
    font-size: 2.5rem;
  }

  .hero-img-mobile {
    padding-bottom: 3.125rem;
  }

  .explainer-section-wrapper,
  .hero-wrapper .body-text,
  .explainer-section-wrapper .body-text,
  .footer-wrapper .body-text {
    max-width: 18.75rem;
    font-size: 1rem;
  }

  .pb-42 {
    padding-bottom: 2.25rem;
  }

  .hero-img-mobile {
    max-width: 410px;
  }

  .footer-wrapper::before {
    background-image: url(./assets/mobile/image-footer.jpg);
  }
}

@media (max-width: 25rem) {
  .btn {
    flex-direction: column;
    /* hover */
  }
}

.hero-img-left,
.hero-img-right,
.meet-logo {
  -webkit-animation: slideIn 1s ease-in;
  animation: slideIn 1s ease-out;
}

/* intro animation */

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateX(0px);
    opacity: 1;
  }
}