/* Reset  */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*********************************************** Utility Components  *************************************************/
:root {
  font-size: 62.5%;

  /***************** Custom Properties *****************/

  /* Colors */
  --color-primary: #649bcf;
  --color-primary-m-light: #91bbe3;
  --color-primary-m-dark: rgb(57, 118, 175);

  --color-secondary: #1ea4d9;
  --color-secondary-m-light: rgb(115, 210, 248);
  --color-secondary-m-dark: rgb(7, 110, 151);

  --color-tertiary: #23b7d9;
  --color-tertiary-m-light: rgb(84, 192, 216);
  --color-tertiary-m-dark: rgb(14, 86, 102);

  --color-quaternary: #1fa65a;
  --color-quaternary-m-light: rgb(86, 226, 147);
  --color-quaternary-m-dark: rgb(13, 102, 52);

  --color-quiternary: #f23030;
  --color-quiternary-m-light: rgb(251, 107, 107);
  --color-quiternary-m-dark: rgb(165, 20, 20);

  --heavy-font-weight: 300;

  --main-grid-columns: [container-start] 1fr [center-start]
    repeat(10, [col-start] minmax(min-content, 11rem) [col-end]) [center-end]
    1fr [container-end];

  /* Transtion Duration */
  --transition-duration: 0.3s;

  /* Section Title Font Size */
  --font-size-title: calc(2rem + 2vw);

  /* Section Padding */
  --padding-section: 8vh 3vw;
}

body {
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 1.7;
  background-color: rgb(252, 252, 252);
  font-weight: 200;
  color: #1c1c1c;
}

.container {
  display: grid;
  grid-template-columns: var(--main-grid-columns);
  grid-template-rows: 100vh repeat(4, min-content);
}

/* Anchor tags */
a:link,
a:visited {
  color: white;
  text-decoration: none;
  font-size: calc(0.5rem + 1vw);
  padding: 1rem 2rem;
  border-radius: 0.3rem;
  position: relative;
  transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
  z-index: 1;
}

/* Paragraphs */
p {
  color: var(color-tertiary-m-dark);
  font-size: calc(1rem + 1vw);
  font-weight: 200;
}

/* List Items */
li {
  list-style: none;
}

/* Icons */
i {
  font-size: var(--font-size-title);
  color: var(--color-secondary-m-dark);
}

/* Header */

header#header {
  /* background-color: var(--color-primary); */
  grid-column: container-start / container-end;
  background: linear-gradient(
      rgba(7, 110, 151, 0.7),
      /* Example: 70% opacity */ rgba(7, 110, 151, 0.7)
    ),
    url("img/white_condo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.header__main-nav {
  grid-column: center-start / center-end; /* Places the nav within the center columns */
  z-index: 5;
  position: relative;
}

.header__main-nav__content {
  /* Make the content area a flex container to arrange logo and menu */
  display: flex;
  /* Distribute space between the logo and menu */
  justify-content: space-between;
  /* Vertically align items in the center */
  align-items: center;
}

.header__main-nav--logo__logo img {
  width: 15rem;
  height: auto;
  padding: 1rem 0;
}

/* (Optional) Adjust spacing and alignment within the menu */
.header__main-nav--menu ul {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  display: flex; /* Make the list a flex container for horizontal menu items */
}

.header__main-nav--menu li {
  margin-left: 20px; /* Add spacing between menu items */
  overflow: hidden;
}

.header__main-nav--menu ul > li > a {
  font-weight: var(--heavy-font-weight);
}

/* Hamburger */
.header__main-nav--hamburger {
  position: fixed;
  top: 3rem;
  right: 3rem;
  height: 5rem;
  width: 5rem;
  padding: 1rem;
  background-color: var(--color-primary-m-dark);
  z-index: 10;

  /* display: flex;
  justify-content: center;
  align-items: center; */

  display: grid;
  place-items: center;

  animation: main-nav 2s;
}

@keyframes main-nav {
  0% {
    transform: translateX(150rem) rotate(1800deg);
    opacity: 0;
  }

  100% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
}

.header__main-nav input[type="checkbox"] {
  position: fixed;
  top: 3rem;
  right: 3rem;
  height: 5rem;
  width: 5rem;
  opacity: 0;
  cursor: pointer;
  z-index: 11;
}

/* Hamburger Lines */
.header__main-nav--hamburger > div {
  position: relative;
  height: 0.3rem;
  width: 100%;
  background-color: var(--color-primary-m-light);

  display: grid;
  place-items: center;
  transition: all var(--transition-duration) ease-in-out;
}

/* hamburger Top and Bottom Lines */
.header__main-nav--hamburger > div::before,
.header__main-nav--hamburger > div::after {
  content: "";
  position: absolute;
  top: -1rem;
  width: 60%;
  height: inherit;
  background-color: inherit;
  z-index: 2;
}

.header__main-nav--hamburger > div::before {
  left: 0;
}

.header__main-nav--hamburger > div::after {
  top: 1rem;
  right: 0;
}

/* Rotating the Menu */
.header__main-nav
  input[type="checkbox"]:checked
  + .header__main-nav--hamburger
  > div {
  transform: rotate(135deg);
}

.header__main-nav
  input[type="checkbox"]:checked
  + .header__main-nav--hamburger
  > div::before {
  left: 0;
  top: 0;
  width: 100%;
  transform: rotate(270deg);
}

.header__main-nav
  input[type="checkbox"]:checked
  + .header__main-nav--hamburger
  > div::after {
  opacity: 0;
}

.header__main-nav
  input[type="checkbox"]:checked:hover
  + .header__main-nav--hamburger
  > div {
  transform: rotate(405deg);
}

/* Hero Section */

.header__hero__content {
  display: grid;
  grid-column: center-start / center-end;
  grid-auto-rows: 1fr;
  justify-items: center;
  align-items: center;
  height: 100vh;
}

.header__logo__content--content__title {
  font-size: calc(3rem + 2.5vw);
  font-weight: 300;
  text-transform: uppercase;
  padding: 0 2rem 0 var(--font-size-title);
  color: white;
}

.header__logo__content--content__para {
  font-size: calc(1rem + 2vw);
  font-weight: 400;
  padding: 2vh 2rem 6vh var(--font-size-title);
  color: white;
}

.header__logo__content--content__link {
  /* Existing styles */
  margin-left: var(--font-size-title);
  border: 0.2rem solid var(--color-tertiary);

  /* New styles for fixed height */
  align-self: start; /* Or end, center, etc. */
  height: 50px; /* Assuming you set a fixed height */
  line-height: 50px; /* Vertically centers single-line text */
  display: flex; /* Make the link a flex container */
  align-items: center; /* Centers content vertically */
  justify-content: center; /* Centers content horizontally (optional, but often helpful) */
}

.header__logo__content--content__link:link,
.header__logo__content--content__link:visited {
  margin-left: var(--font-size-title);
  border: 0.2rem solid var(--color-tertiary);
}

.header__logo__content--content__link:link::before,
.header__logo__content--content__link:visited::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-tertiary);
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(1, 0, 0, 1);
  z-index: -1;
}

.header__logo__content--content__link:hover::before,
.header__logo__content--content__link:active::before {
  transform: scaleX(1);
}

/* STARTTTTTTT */

section#contact-info {
  grid-column: center-start / col-end 6;
  padding: var(--padding-section);

  display: grid;
  grid-template-rows: repeat(3, max-content);
  grid-gap: 2vh;
}

.contact-info__title {
  font-size: var(--font-size-title);
  padding: 0 2rem 1rem;
  font-weight: 300;
  position: relative;
}

.contact-info__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12%;
  height: 0.2rem;
  width: 20%;
  background-color: var(--color-secondary);
}

.contact-info__para {
  padding: 2rem;
}

section#contact-info p,
.contact-schedule__contact p {
  color: var(--color-tertiary-m-dark);
}

.contact-info__icons {
  margin-left: 2rem;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.contact-info__icons--weather,
.contact-info__icons--time {
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  grid-template-rows: 10vh;
  justify-items: start;
  align-items: center;
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Booking Date Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#contact-schedule {
  grid-column: col-start 7 / center-end;
  padding: var(--padding-section);

  display: grid;
  grid-template-rows: repeat(2, 1fr);
}

.contact-schedule__schedule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2vw;
  place-items: center;
}

.contact-schedule__schedule--structural,
.contact-schedule__schedule--restorative,
.contact-schedule__schedule--supportive {
  display: grid;
  grid-row-gap: 3vh;
}

.contact-schedule__schedule--structural h5,
.contact-schedule__schedule--restorative h5,
.contact-schedule__schedule--supportive h5 {
  font-size: calc(1rem + 1vw);
  text-align: center;
  font-weight: 500;
}

.contact-schedule__schedule--structural > div,
.contact-schedule__schedule--restorative > div,
.contact-schedule__schedule--supportive > div {
  background-color: var(--color-secondary);
  padding: 2rem 4rem;

  display: flex; /* Makes the div a flex container */
  align-items: center; /* Vertically centers the flex items (h5 and div) */
  position: relative;
}

.contact-schedule__schedule--structural > div::before,
.contact-schedule__schedule--restorative > div::before,
.contact-schedule__schedule--supportive > div::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-width: 1.5rem;
  margin-left: -1.5rem;
  border-style: solid;
  border-color: transparent transparent var(--color-secondary) transparent;
}

.contact-schedule__schedule--structural > div p:nth-of-type(2),
.contact-schedule__schedule--restorative > div p:nth-of-type(2),
.contact-schedule__schedule--supportive > div p:nth-of-type(2) {
  font-size: 3rem;
  font-weight: 700;
}

.contact-schedule__contact {
  align-self: end;
}

.contact-schedule__contact--link:link,
.contact-schedule__contact--link:visited {
  background-color: var(--color-secondary);
  color: white;
  transition: all var(--transition-duration) ease-in-out;
}

.contact-schedule__contact--link:hover,
.contact-schedule__contact--link:active {
  color: var(--color-secondary);
  background-color: white;
  border: 0.1rem var(--color-secondary) solid;
}

.contact-schedule__contact p:first-of-type {
  margin-top: 4rem;
}

.contact-schedule__contact p:first-of-type,
.contact-schedule__contact p:nth-of-type(2),
.contact-schedule__contact p:nth-of-type(3) {
  font-size: 2rem;
}

/* ENDDDDDDD */

/* Section Something Else */
section#something__else {
  background-color: gray;
  grid-column: center-start / center-end;
}

/* Footer */
footer#footer {
  background-color: pink;
  grid-column: container-start / container-end;
}

/* MEDIA SCREEN SIZES */

@media screen and (min-width: 1500px) {
  .header__main-nav--menu a:link,
  .header__main-nav--menu a:visited {
    font-size: 2rem;
  }

  .header__logo__content--content__title {
    font-size: 8rem;
  }

  .header__logo__content--content__para {
    font-size: 5rem;
  }

  .contact-info__title {
    font-size: 5rem;
  }

  .contact-info__para,
  .contact-info__icons--time,
  .contact-info__icons--weather {
    font-size: 2.5rem;
  }

  section#contact-info {
    padding: 3rem 1rem;
  }

  .contact-info__icons {
    grid-template-columns: 0.6fr 1fr;
  }

  .contact-info__icons--weather {
    grid-template-columns: 0.8fr 1fr;
  }
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ jobs Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#jobs {
  grid-column: container-start / container-end;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  grid-gap: 2rem;
}

/* Caret (^)  NOT Carrot (bunny=rabbit) */

div[class^="jobs"] {
  padding: 2rem;
  background-position: center;
  background-size: cover;
  transition: transform var(--transition-duration) ease-in-out;
}

div[class^="jobs"]:hover,
div[class^="jobs"]:active {
  transform: scale(1.05);
}

div[class^="jobs"] h2[class^="jobs"] {
  font-size: var(--font-size-title);
  padding: 0 2rem 1rem 0;
  font-weight: 400;
  color: white;
  text-transform: uppercase;
}

div[class^="jobs"] p[class^="jobs"] {
  font-size: 2rem;
  margin: 1.5rem 0 4rem 0;
  color: white;
  font-weight: 500;
}

div[class^="jobs"] a[class^="jobs"]:link,
div[class^="jobs"] a[class^="jobs"]:visited {
  display: inline-block;
  margin-bottom: 2rem;
  background-color: white;
  color: var(--color-primary);
  z-index: 2;
  overflow: hidden;
}

div[class^="jobs"] a[class^="jobs"]:hover,
div[class^="jobs"] a[class^="jobs"]:active {
  color: white;
}

div[class^="jobs"] a[class^="jobs"]:link::before,
div[class^="jobs"] a[class^="jobs"]:visited::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 0;
  z-index: -1;
  background-color: var(--color-secondary);
  transition: height var(--transition-duration) ease-in-out;
}

div[class^="jobs"]:nth-child(1n) a[class^="jobs"]:link::before,
div[class^="jobs"]:nth-child(1n) a[class^="jobs"]:visited::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

div[class^="jobs"]:nth-child(2n) a[class^="jobs"]:link::before,
div[class^="jobs"]:nth-child(2n) a[class^="jobs"]:visited::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

div[class^="jobs"] a[class^="jobs"]:hover::before,
div[class^="jobs"] a[class^="jobs"]:active::before {
  height: 400%;
}

.jobs__job-1 {
  background: linear-gradient(rgba(30, 164, 217, 0.8), rgba(30, 164, 217, 0.8)),
    url("img/jobs/carlton.jpeg");
}

.jobs__job-2 {
  background: linear-gradient(rgba(30, 164, 217, 0.8), rgba(30, 164, 217, 0.8)),
    url("img/jobs/fairways.jpg");
}

.jobs__job-3 {
  background: linear-gradient(rgba(30, 164, 217, 0.8), rgba(30, 164, 217, 0.8)),
    url("img/jobs/crystol_cove.jpg");
}

.jobs__job-4 {
  background: linear-gradient(rgba(30, 164, 217, 0.8), rgba(30, 164, 217, 0.8)),
    url("img/jobs/ocean_club.jpeg");
}

.jobs__job-5 {
  background: linear-gradient(rgba(30, 164, 217, 0.8), rgba(30, 164, 217, 0.8)),
    url("img/jobs/delray.jpg");
}

.jobs__job-6 {
  background: linear-gradient(rgba(30, 164, 217, 0.8), rgba(30, 164, 217, 0.8)),
    url("img/jobs/halcyon.jpg");
}

section#motto {
  background-color: var(--color-secondary-m-dark);
  grid-column: container-start / container-end;
  padding: 10vh 3vw;
}

.motto__content {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.motto__content--title {
  font-size: var(--font-size-title);
  padding: 0 2rem 1rem;
  font-weight: 300;
  color: white;
  text-transform: uppercase;
  margin-bottom: 2rem;
  position: relative;
}

.motto__content--title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 45%;
  height: 0.2rem;
  width: 10%;
  background-color: white;
}

.motto__cotent--para {
  color: var(--color-secondary-m-light);
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Events Content Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#events-content,
section#features-content {
  grid-column: container-start / col-end 9;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

section#events-content > div,
section#features-content > div {
  padding: var(--padding-section);
  display: grid;

  grid-template-areas:
    "title"
    "para";
  grid-row-gap: 4vh;
  align-items: center;
  justify-items: start;
}

section#events-content > div:first-child {
  background: linear-gradient(
      var(--color-tertiary-m-light),
      var(--color-tertiary-m-light)
    ),
    url("img/Events/beach-party.jpg");
  border-right: solid 0.2rem var(--color-tertiary);
}

section#events-content > div:last-child {
  background: linear-gradient(
      var(--color-tertiary-m-light),
      var(--color-tertiary-m-light)
    ),
    url("img/Events/culture-discovery.jpg");
  border-left: solid 0.2rem var(--color-tertiary);
}

section#events-content > div:first-child,
section#events-content > div:last-child {
  background-size: cover;
  background-position: center;
}

section#events-content > div h2[class*="title"],
section#features-content > div h2[class*="title"] {
  grid-area: title;
  font-size: var(--font-size-title);
  font-weight: 400;
  color: white;
}

section#events-content > div p[class*="para"],
section#features-content > div p[class*="para"] {
  grid-area: para;
  color: white;
  font-weight: 500;
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Events Text Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#events-text,
section#features-text {
  background-color: var(--color-tertiary);
  grid-column: col-start 10 / center-end;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}

.events-text__content,
.features-text__content {
  transform: rotate(0.25turn);
}

.events-text__content--title,
.gallery-text__content--title,
.features-text__content--title {
  font-size: var(--font-size-title);
  font-weight: 500;
  color: white;
  letter-spacing: 0.2rem;
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Gallery Text Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#gallery-text {
  background-color: var(--color-primary);
  grid-column: center-start / col-end 1;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}

.gallery-text__content {
  transform: rotate(-0.25turn);
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Gallery Carousel Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#gallery-carousel {
  grid-column: col-start 2 / container-end;
  height: 90vh;
  overflow: hidden;
  border: solid 0.2rem var(--color-secondary);
  position: relative;
}

/* Image Container */
div.gallery-carousel__img-container {
  /* background-color: lawngreen; */
  height: 100%;
  width: 100%;
  position: relative;
}

/* Image Container List (UL) */
.gallery-carousel__img-container--list {
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform var(--transition-duration) ease-in-out;
}

/* Image Container List Items (LIs) */
.gallery-carousel__img-container--list__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Carousel Images */
.gallery-carousel__img-container--list__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel Buttons */
.gallery-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1;
}

/* Button Right */
.gallery-carousel__btn--right {
  right: 0;
}

/* Carousel Nav */
.gallery-carousel__nav {
  /* background-color: red; */
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 5%;
  transform: translateX(-50%);
  margin-bottom: 1rem;

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 3rem;
}

/* Carousel Nav Buttons */
.gallery-carousel__nav--btn {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  background-color: var(--color-secondary);
  border: none;
  cursor: pointer;
}

/* Current Button/Image */
.current--img {
  background-color: var(--color-primary);
}

/* To hide the arrows */
.hidden {
  display: none;
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Features Content Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#features-content > div:first-child {
  background: linear-gradient(
      var(--color-secondary-m-light),
      var(--color-secondary-m-light)
    ),
    url("img/Features/cocktail.jpg");
  border-right: solid 0.2rem var(--color-secondary);
}

section#features-content > div:last-child {
  background: linear-gradient(
      var(--color-secondary-m-light),
      var(--color-secondary-m-light)
    ),
    url("img/Features/surfing.jpg");
  border-left: solid 0.2rem var(--color-secondary);
}

section#features-content > div:first-child,
section#features-content > div:last-child {
  background-size: cover;
  background-position: left;
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Features Text Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
section#features-text {
  background-color: var(--color-secondary);
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ crew Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/ /* a word not award */
section#crew {
  grid-column: center-start / center-end;
  padding: var(--padding-section);

  display: grid;
  grid-template-columns: repeat(auto-fit, 28rem);
  grid-gap: 5rem;
  place-content: center;
}

.crew__card {
  width: 28rem;
  height: 50rem;
  position: relative;
}

.crew__card--front,
.crew__card--back {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 1s ease-in-out;
  backface-visibility: hidden;
  transform: perspective(100rem);

  display: grid;
  justify-items: center;
  align-items: start;
  padding: 3rem;
}

.crew__card--front h2 {
  background-color: var(--color-secondary-m-light);
  padding: 1rem;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.crew__card--back p {
  place-self: center;
  font-size: 2rem;
  font-weight: 400;
}

.crew__card:first-child .crew__card--front {
  background-image: url("img/crew/henry.jpeg");
}

.crew__card:nth-child(2) .crew__card--front {
  background-image: url("img/crew/crew-1.jpg");
}

.crew__card:nth-child(3) .crew__card--front {
  background-image: url("img/crew/david.jpg");
}


.crew__card--contact {
  display: flex; /* Makes the div a flex container */
  flex-direction: column; /* Stacks the paragraphs vertically */
  justify-content: center; /* Centers the paragraphs vertically as a group */
  align-items: center; /* Centers the paragraphs horizontally as a group */
  height: 100%;
  color: white;
}

.crew__card--contact i {
  font-size: 1.4rem;
  color: white;
}

.crew__card--contact p {
  text-align: center; /* Centers the text horizontally within each paragraph */
  margin: 5px 0; 
}

.crew__card--contact--name{
  font-weight: 400;
  font-size: 2.5rem;
}

.crew__card--contact--cual{
  font-size: 1.5rem;
  margin: 0 0 4rem 0;
}

.crew__card--contact--number{
  font-size: 2rem;
}

.crew__card--contact--email{
  
}

.crew__card--contact--email a:link,
.crew__card--contact--email a:visited {
  font-size: 1.5rem;
  border: 0;
  margin: 0;
}


/* 1turn => 360deg => meaning 0.5turn => 180deg */
.crew__card--back {
  transform: perspective(100rem) rotateY(0.5turn);
  background-color: var(--color-secondary);
}

.crew__card:hover .crew__card--front {
  transform: perspective(100rem) rotateY(0.5turn);
}

.crew__card:hover .crew__card--back {
  transform: perspective(100rem) rotateY(1turn);
}

/*@@##$$%%^^&&**@@##$$%%^^&&**^^ Footer Section ^^**@@##$$%%^^&&**@@##$$%%^^&&*/
footer#footer {
  background-color: var(--color-primary);
  grid-column: container-start / container-end;
  padding: 6vh 4vw;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}

.footer__social--link:link,
.footer__social--link:visited {
  display: inline-block;
  background-color: var(--color-secondary);
  border-radius: 4rem;
  margin-right: 1rem;
  box-shadow: 0.5rem 0.5rem 2rem 0.5rem var(--color-secondary-m-light),
    -0.5rem -0.5rem 2rem 0.5rem var(--color-secondary-m-light);
  transform: scale(0.8);
  animation: social 3s linear infinite;
}

.footer__social--link i {
  font-size: 2rem;
  color: var(--color-quiternary);
}

@keyframes social {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0;
  }
}

.footer__social--link:link:nth-child(1),
.footer__social--link:visited:nth-child(1) {
  animation-delay: 0s;
}

.footer__social--link:link:nth-child(2),
.footer__social--link:visited:nth-child(2) {
  animation-delay: 0.3s;
}

.footer__social--link:link:nth-child(3),
.footer__social--link:visited:nth-child(3) {
  animation-delay: 0.6s;
}

.footer__social--link:link:nth-child(4),
.footer__social--link:visited:nth-child(4) {
  animation-delay: 0.9s;
}

@media screen and (max-width: 1200px) {
  a:link,
  a:visited {
    font-size: 1.75rem;
  }
}

@media screen and (min-width: 601px) {
  .header__main-nav--hamburger {
    visibility: hidden;
  }

  .header__main-nav input[type="checkbox"] {
    visibility: hidden;
    right: -100px;
  }
}

@media screen and (max-width: 985px) {
  section#contact-info {
    grid-column: center-start / center-end;
    padding: 1rem 1rem;

    display: grid;
    grid-template-rows: repeat(3, max-content);
    grid-gap: 2vh;
  }

  section#contact-schedule {
    grid-column: center-start / center-end;
    padding: 1rem 1rem;

    display: grid;
    /* grid-template-rows: repeat(2 min-content, 1fr); */
    grid-template-rows: min-content 1fr;
  }

  .contact-schedule__contact {
    margin-top: 2rem;
  }
}

@media screen and (max-width: 800px) {
  .contact-schedule__contact {
    margin: 2rem 2rem;
    align-items: center;
    text-align: center;
  }

  section#jobs {
    grid-gap: 0;
  }

  footer#footer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .header__main-nav--menu {
    position: fixed; /* Position the menu as an overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
      145,
      187,
      227,
      0.95
    ); /* Semi-transparent black background */
    z-index: 8; /* Ensure it's above other elements */

    /* Initially hide the menu */
    transform: translateX(-100%); /* Initially off-screen */
    visibility: hidden; /* Hide completely */
    opacity: 0; /* Make transparent */
    transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
      opacity 0.3s ease-in-out; /* Transition properties with delays */
  }

  .header__main-nav--menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .header__main-nav--menu ul > li > a {
    display: inline-block;
    margin: calc(1.5rem + 1vh);
    font-size: 2rem;
    font-weight: var(--heavy-font-weight);

    /* color: var(--color-primary-m-dark); */
    text-decoration: none;
  }

  .header__main-nav__checkbox:checked ~ .header__main-nav--menu {
    transform: translateX(0); /* Slide into view */
    visibility: visible; /* Make visible */
    opacity: 1; /* Make opaque */
    transition-delay: 0s; /* No delay when transitioning to visible */
  }

  .contact-schedule__schedule {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  div[class^="jobs"] p[class^="jobs"] {
    margin: 1.5rem 0 4rem 0;
  }

  div[class^="jobs"] p[class^="jobs"],
  .motto__content--para,
  section#events-content > div p[class*="para"],
  section#features-content > div p[class*="para"],
  footer#footer p {
    font-size: 1.5rem;
  }

  section#events-text,
  section#gallery-text,
  section#features-text {
    display: none;
  }

    section#events-content,
  section#features-content {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  }

  section#events-content,
  section#gallery-carousel,
  section#features-content {
    grid-column: center-start / center-end;
  }

  section#events-content > div:first-child,
  section#events-content > div:last-child,
  section#features-content > div:first-child,
  section#features-content > div:last-child {
    border: none;
  }

    /* Carousel Left/Right Buttons */
  .gallery-carousel__btn i {
    font-size: 5rem;
  }

  /* Carousel Navigation */
  .gallery-carousel__nav {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 3vh;
    grid-column-gap: 10vw;
    height: 12%;
  }

    footer#footer {
    padding: 4vh 2vw;
  }
}

@media screen and (max-width: 400px) {
  section#contact-info {
    padding: 1rem 2rem;
    text-align: justify;
  }

  .contact-info__icons {
    grid-template-columns: 0.5fr 1fr;
  }

  .contact-info__icons--weather {
    grid-template-columns: 0.8fr 1fr;
  }

  section#jobs {
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }
}