@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Cormorant Garamond, "Times New Roman", Times, serif;
}

body {
  background-color: #1e1e1e;
}

h1 {
  font-size: 3rem;
}

p,
a {
  font-size: 1.4rem;
}

hr.style-eight {
  overflow: visible;
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
  margin-top: 40px;
}
hr.style-eight:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: transparent;
}

/*** HAMBURGER STYLES ***/
.hamburger-container {
  height: 50px;
  width: 50px;
  position: absolute;
  position: fixed;
  top: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  transition: background 0.3s ease-in-out;
  z-index: 99999999;
}

.hamburger-container:hover {
  cursor: pointer;
}

.bar {
  background-color: #fff;
  height: 3px;
  width: 30px;
  opacity: 0.8;
  display: block;
  margin: 0 auto;
}

.hamburger-container.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-container.active .bar:nth-child(1) {
  width: 40px;
  transform: translateY(12px) rotate(45deg) translateX(0px);
  transition: transform 0.3s;
  background-color: #000;
}

.hamburger-container.active .bar:nth-child(3) {
  width: 40px;
  transform: translateY(-13px) rotate(-45deg);
  transition: transform 0.3s;
  background-color: #000;
}

/* MENU EXPANDED STYLES */
.no-scroll {
  overflow: hidden;
}

.menu-expanded {
  opacity: 0;
  height: 100vh;
  background-image: url("images/menu-background.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -111;
  transition: opacity 0.3s ease-in-out;
}

.menu-expanded img {
  width: 200px;
}

.menu-expanded.active {
  z-index: 9999999;
  opacity: 1;
}

.menu-expanded ul {
  margin-top: 100px;
  text-align: center;
  color: #fff;
}

.menu-expanded ul li {
  list-style: none;
  margin: 20px;
  font-weight: 600;
}

.menu-expanded ul li a {
  text-decoration: none;
  font-size: 2rem;
  color: #000;
}

.menu-expanded ul li a:hover {
  cursor: pointer;
  color: #fff;
  transition: 0.3s ease-in;
}

/* CONTENT ROW STYLES */
.x-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}

/*** HEADER STYLES ***/
.header-section {
  background-image: url("images/header.jpg");
  background-color: rgba(0, 0, 0, 1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  position: relative;
}

.header-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-content img {
  width: 100%;
}

.mobile-header-btn {
  font-weight: 800;
  visibility: hidden;
}

.astrocene-container {
  background-color: #1e1e1e;
}

.astrocene-box {
  width: 60%;
  display: block;
  margin: 0 auto 30px auto;
}

@media only screen and (max-width: 600px){
  .astrocene-box {
    width: 90%;

  }
}

/*** THE GOLDEN HOUR ***/
.golden-hour-container {
  background-image: url("images/sunset.png");
  background-color: rgba(0, 0, 0, 1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  line-height: 1.5;
  padding: 20px;
  font-weight: 800;
}

.box {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  gap: 20px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.album-year {
  margin-top: -25px;
}

/*** RUMINATION STYLES ***/
.rumination {
  background-image: url("images/rumination.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  line-height: 1.5;
  font-weight: 800;
}

.full-box {
  flex-basis: 50%;
}

.full-inner-box p {
  font-size: 1.5rem;
}

.full-inner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 60px 20px;
}

/*** MOSAIC STYLES ***/
.mosaic-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
  padding: 30px;
  background-image: url("images/mosaic-4.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
    background-attachment: fixed;
  color: #fff;
  font-weight: 800;
}

.mosaic-top-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.mosaic-top-container img {
  max-width: 500px;
}

.mosaic-container iframe {
  width: 600px;
}

.mosaic-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  line-height: 1.5;
  width: 80%;
  padding: 20px;
}

/*** PERENNIAL AND WHAT WE KNOW  STYLES***/
.half-screen {
  flex-basis: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.half-screen > img {
  filter: brightness(45%);
  width: 100%;
  height: 100%;
}

.perennial-container {
  background-image: url("images/perennial-bw.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.what-we-know-container {
  background-image: url("images/what-we-know-bw.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.half-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  color: #fff;
  gap: 10px;
  font-weight: 800;
}

.half-text a {
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  padding: 8px;
}

.half-text a:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.3s ease-in-out;
}

/*** LOGO SCROLL ***/
@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 60px 0;
  background-color: #1f1f1f;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to right, #1f1f1f, rgba(31, 31, 31, 0.1));
}

.logos:after {
  right: 0;
  background: linear-gradient(to left, #1f1f1f, rgba(31, 31, 31, 0.1));
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 25s slide infinite linear;
}

.logos-slide img {
  height: 50px;
  margin: 0 40px;
}

/*** ASSOCIATED ACTS ***/
#associated-acts {
  background-color: #fff;
}
.associated-acts {
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

.half-screen-inner-container {
  position: relative;
  height: 100%;
  min-width: 500px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.half-image {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.show {
  opacity: 1;
}

.half-image-1 {
  transform: translateX(-100%);
}

.half-image-1.show {
  animation: slideIn 0.5s ease forwards;
  transform: translateX(0);
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}

.intersect-rect-2 {
  background-color: rgb(255, 255, 255);
  position: relative;
  height: 500px;
  margin: 50px 0;
}

.sliding-block {
  background-color: gray;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  position: relative;
}

.sliding-block.show {
  animation: slideIn 0.5s ease forwards;
  transform: translateX(0);
}

.half-image-2 {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

.half-image-2.show {
  opacity: 1;
  transition: 0.5s ease-in;
  transition-delay: 0.2s;
}

.half-text-2 {
  color: #fff;
  z-index: 5;
  position: absolute;
  text-align: center;
}

/*** CONTACT STYLES ***/
.contact-container {
  background-image: url("images/contact.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  align-items: center;
}

.contact-container h1 {
  margin-top: 30px;
}

.contact-container form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
  padding: 40px;
}

.contact-container form input {
  font-weight: 800;
  font-size: 1.3rem;
}

.contact-container form button {
  width: 150px;
  display: block;
  margin: 0 auto;
  background-color: transparent;
  color: #fff;
  padding: 12px;
  font-size: 1.5rem;
  border: 2px solid #fff;
  font-weight: 800;
}

.label-input-container {
  display: flex;
  flex-direction: column;
}

input {
  padding: 6px;
  font-size: 1rem;
}

/*** FOOTER STYLES ***/
footer {
  color: #fff;
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 35px;
}

.footer-inner-container {
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  width: 100px;
}

.social-icons-container i {
  color: #fff;
  font-size: 2rem;
  margin: 0 12px;
}

.social-icons-container.footer-inner-container {
  justify-content: end;
}
.social-icons-container i:hover {
  transform: translateY(-5px);
  filter: brightness(85%);
  transition: 0.3s ease-in-out;
}

.copyright-container {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.footer-inner-container p {
  font-size: 0.7rem;
}

.footer-inner-container a {
  text-decoration: none;
  color: #fff;
  font-size: 0.7rem;
}

@media only screen and (max-width: 1024px) {
  .header-section {
    background-image: url("images/quality-40.jpg");
    background-attachment: scroll; /*no browser support for background-attachment: fixed; */
    height: 100vh;
  }

  .header-content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .header-content img {
    width: 80%;
  }

  .mosaic-top-container img {
    max-width: 400px;
  }

  .intersect-rect-2 {
    height: 300px;
  }

  .half-screen-inner-container {
    min-width: 300px;
  }

  .perennial-container p,
  .what-we-know-container p {
    font-size: 1.3rem;
  }
}

@media only screen and (max-width: 768px) {
  .hamburger-container {
    top: 10px;
    right: 10px;
  }

  .mobile-header-btn {
    margin-top: 10px;
    background-color: transparent;
    padding: 10px;
    font-size: 1.4rem;
    border: 1px solid #000;
    visibility: visible;
  }

  .mobile-header-btn a {
    color: #000;
    text-decoration: none;
  }

  .menu-expanded.active {
    background-image:none;
    background-color: rgb(232, 225, 185);
    box-shadow:inset 0px 0px 20px 5px rgba(151, 83, 14, .7);
  }

  .menu-expanded.active ul {
    margin-top: 50px;
  }

  h1 {
    font-size: 3rem;
  }

  .header-section {
    height: 100vh;
  }

  .header-content {
    width: 100%;
  }

  .header-content img {
    width: 90%;
  }

  .box {
    flex-basis: 100%;
    padding: 20px 10px;
  }

  .full-box,
  .half-screen {
    flex-basis: 100%;
  }

  .full-inner-box {
    padding: 20px 10px;
  }

  .full-inner-box h2 {
    font-size: 1.4rem;
    padding: 10px;
  }

  .full-inner-box iframe {
    width: 100%;
  }

  .full-inner-box p {
    font-size: 1.4rem;
  }

  .x-row.rumination {
    flex-direction: column-reverse;
  }

  .mosaic-container {
    padding: 20px 10px;
  }

  .mosaic-top-container iframe {
    flex-basis: 90%;
  }

  .mosaic-text-container {
    padding: 10px;
    width: 100%;
  }

  .mosaic-container img {
    width: 90%;
  }

  .mosaic-container iframe {
    width: 300px;
  }

  .half-text {
    width: 100%;
    padding: 10px;
  }

  .perennial-container p,
  .what-we-know-container p {
    font-size: 1rem;
  }

  .intersect-rect-2 {
    height: 300px;
  }

  .logos:before,
  .logos:after {
    width: 100px;
  }

  .contact-container form {
    width: 100%;
  }

  .copyright-container {
    margin-top: 8px;
    font-size: 0.7rem;
  }

  footer {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .footer-inner-container {
    align-items: center;
  }
}