/* General ===================================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
  scroll-behavior: smooth;
  --clr-pri:            #056738;
  --clr-pri-light:      #08A157;
  --clr-pri-dark:       #04532D;
  --clr-pri-darker:     #033F22;
  --clr-sec:            #272263;
  --clr-sec-light:      #5D54C4;
  --clr-sec-lighter:    #938DD8;
  --clr-light:          #ffffff;
  --clr-light-trans-75: #ffffffbf;
  --clr-light-dark:     #EBEBEB;
  --clr-dark:           #000000;
  --clr-dark-trans-50:  #00000080;
  --clr-red:            #EC798A;
  
  --header-height:    4rem;
  --nav-menu-width:  10rem;
  --border-rad:     0.5rem;

  --box-shadow: 0.25rem 0.25rem 0.5rem #00000080;
}
body,
textarea,
input {
  font-family: Arial, sans-serif, Helvetica;
}
body {
  display: flex;
  justify-content: center;
  background-color: var(--clr-light-dark);
  color: var(--clr-dark);
}
body.frozen {
  overflow: hidden;
}
main {
  background-color: var(--clr-light);
  padding-top: var(--header-height);
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
}
section {
  padding: 1rem;
}
li {
  list-style: none;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: -100;
  transition: backdrop-filter 200ms ease-in-out,
             background-color 200ms ease-in-out;
}
.overlay.visible {
  background-color: rgba(0, 0, 0, 0.85);
}


/* Text Presets ================================================================================ */
h1, h2, h3, p {
  user-select: none;
  z-index: 1;
}

h1 {
  font-size: 2.75rem;
  padding: 1rem;
  text-align: center;
  background-color: var(--clr-sec);
  color: var(--clr-light);
  margin-bottom: 2rem;
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
}
h2 {
  width: 100%;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 2rem;
  margin-top: 1rem;
}
p {
  font-size: 1.75rem;
}
a {
  text-decoration: none;
  color: var(--clr-dark);
}

/* Navigation ================================================================================== */
header {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 2000px;
  height: var(--header-height);
  font-size: 1.25rem;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--clr-light);
  box-shadow: 0 0 1rem black;
  transition: transform 250ms ease-in-out;
  z-index: 10;
}
.header-logo::before {
  content: "IDR Masonry & Design";
}
nav {
  display: flex;
  z-index: 20;
}
.nav-link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: var(--border-rad);
}
.nav-link > a {
  padding: 1rem;
  user-select: none;
  transition: color 125ms ease-in-out,
   background-color 125ms ease-in-out;
}
.nav-link:hover > a {
  background-color: var(--clr-sec-lighter);
}
.nav-link > span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 0.125rem;
  background-color: var(--clr-dark);
  transform: translateX(-50%) scaleX(0);
  transition: transform 200ms ease-in-out;
}
.nav-link.current > span {
  transform: translateX(-50%) scaleX(1);
}
/* Hamburger */
.hamburger {
  position: relative;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 30;
  display: none;
}
.hamburger > .bar {
  position: absolute;
  transform-origin: center;
  width: 100%;
  height: 0.25rem;
  border-radius: 1rem;
  background-color: var(--clr-dark);
  transition: opacity 200ms ease-in-out,
            transform 200ms ease-in-out;
}
.hamburger > .bar:first-of-type {
  transform: translateY(-0.6rem);
}
.hamburger > .bar:last-of-type {
  transform: translateY(0.6rem);
}


/* Home ======================================================================================== */
#home {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
}
.home-background,
.home-bg-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.home-background {
  object-fit: cover;
  object-position: top;
}
.home-bg-overlay {
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 0;
  /* Duration | curve | delay | direction | name */
  animation: 1.5s ease-in-out 2s forwards darken;
}
@keyframes darken {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in-animation {
  opacity: 0;
  /* Duration | curve | delay | direction | name */
  animation: 1.5s ease-in-out 2s forwards show;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.home-logo {
  width: 50vmin;
  min-width: 22rem;
  padding: 2rem;
  margin-bottom: 1rem;
  background-color: var(--clr-light-trans-75);
  border-radius: var(--border-rad);
  z-index: 1;
  box-shadow: var(--box-shadow);
}
.home-btns {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 1rem;
  font-size: 1.75rem;
  z-index: 1;
}
.home-btns > a {
  padding: 0.5rem 1rem;
  text-align: center;
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
  transition: color 125ms ease,
   background-color 125ms ease;
}
.solutions-btn {
  background-color: var(--clr-light-trans-75);
}
.quote-btn {
  background-color: var(--clr-pri);
  color: var(--clr-light);
}
.solutions-btn:hover,
.quote-btn:hover {
  background-color: var(--clr-dark);
  color: var(--clr-light);
}
.home-arrow {
  width: 3rem;
  height: 3rem;
  padding: 0.5rem;
  margin-top: 1rem;
  background-color: var(--clr-light-trans-75);
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
  transition: color 125ms ease,
   background-color 125ms ease;
}
.home-arrow:hover {
  background-color: var(--clr-dark);
  color: var(--clr-light);
}

/* About ======================================================================================= */
#about {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: calc(var(--header-height) + 1rem) 1rem;
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  width: 100%;
  max-width: 60rem;
  gap: 1rem;
}
.about-grid > img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
}


/* Solutions =================================================================================== */
#solutions {
  background-color: var(--clr-light-dark);
  overflow: hidden;
  padding: calc(var(--header-height) + 1rem) 1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  width: 100%;
  max-width: 70rem;
  gap: 0.5rem;
}
.solutions-grid > p {
  background-color: var(--clr-light);
  font-size: 1.25rem;
  border-radius: var(--border-rad);
  padding: 0.5rem;
  background-color: var(--clr-light);
  box-shadow: inset var(--box-shadow);
}
.solutions-grid > p::first-letter {
  text-decoration: underline;
}
.solutions-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 70rem;
}
.solutions-list > li {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  width: 100%;
  margin-top: 2rem;
  gap: 1rem;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-rad);
  padding: 1rem;
}
.solutions-list h3 {
  margin-top: 0;
}
.solutions-list img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
}
.solution-text {
  display: flex;
  flex-direction: column;
}


/* Goal ======================================================================================== */
#goal {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: calc(var(--header-height) + 1rem) 1rem;
}
#goal > p {
  max-width: 70rem;
}
.goal-history-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
  max-width: 70rem;
}
.goal-history-con > img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
}
.goal-history-con > p {
  margin: 0.5rem;
  font-size: 0.75rem;
  color: var(--clr-dark-trans-50);
}
.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  grid-auto-rows: 1fr;
  gap: 1rem;
  margin: 2rem 0;
  width: 100%;
  max-width: 70rem;
}
.goal-grid > li {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 1rem;
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
}
.goal-grid svg {
  color: var(--clr-pri-light);
  background-color: var(--clr-dark);
  border-radius: var(--border-rad);
  padding: 0.5rem;
  width: 5rem;
  height: 5rem;
  box-shadow: var(--box-shadow);
}
.goal-grid p {
  margin-top: 0.5rem;
}


/* Contact ===================================================================================== */
#contact {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: calc(var(--header-height) + 1rem) 1rem;
}
#contact h3 {
  margin-bottom: 0.5rem;
}
form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 40rem;
  padding: 1rem;
  background-color: var(--clr-dark);
  color: var(--clr-light);
  border-radius: var(--border-rad);
  box-shadow: var(--box-shadow);
}
select {
  color: var(--clr-dark);
  border: none;
  background-color: var(--clr-light);
}
.contact-info-list {
  width: 100%;
}
.contact-info-list > li {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  width: 100%;
}
label {
  margin-bottom: 0.25rem;
}
.contact-info-list label,
#human-verification-container,
.contact-info-list button {
  font-size: 1.5rem;
}
.contact-info-list input,
select,
textarea {
  padding: 0.5rem;
  font-size: 1.15rem;
  border: none;
  box-shadow: inset var(--box-shadow);
}
.contact-info-list input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: inset var(--box-shadow),
      0 0 1px 0.25rem var(--clr-dark),
      0 0 1px 0.4rem  var(--clr-light);
}
.contact-info-list button:focus {
  outline: none;
  box-shadow: 0 0 1px 0.25rem var(--clr-dark),
              0 0 1px 0.4rem  var(--clr-light);
}
textarea {
  resize: none;
}

.contact-info-list button {
  border: none;
  background-color: var(--clr-pri);
  color: var(--clr-light);
  cursor: pointer;
  padding: 0.5rem;
}
.contact-info-list button:hover {
  background-color: var(--clr-pri-dark);
}
.contact-info-list button:active {
  background-color: var(--clr-pri-darker);
}


#contact-location-input {
  position: absolute;
  top: -100vh;
  left: -100vh;
}


/* Footer ====================================================================================== */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--clr-dark);
}
#call-number,
#address,
.socials > a {
  padding: 0.5rem;
  background-color: var(--clr-sec);
  border-radius: var(--border-rad);
  margin-bottom: 0.5rem;
  color: var(--clr-light);
  transition: background-color 125ms ease-in-out;
}
#call-number:hover,
#address:hover,
.socials > a:hover {
  background-color: var(--clr-sec-light);
}
#call-number,
#address,
.socials {
  min-width: 18rem;
}
#call-number {
  font-size: 2.25rem;
  text-align: center;
}
#address {
  font-size: 1rem;
  text-align: center;
}
.socials {
  display: flex;
  gap: 0.5rem;
}
.socials > a {
  width: 50%;
  text-align: center;
}
footer #designer-link,
footer > p {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--clr-light);
  opacity: 0.5;
  text-align: center;
}
footer #designer-link {
  background-color: transparent;
  transition: opacity 125ms ease-in-out;
}
footer #designer-link:hover {
  opacity: 0.75;
  background-color: transparent;
}


/* Animate When In View ======================================================================== */
.animate-when-in-view {
  transition: opacity 500ms ease-out,
            transform 500ms ease-out;
}
.animate-when-in-view.hidden {
  transform: translate3d(0, 3rem, 0);
  opacity: 0;
}


/* Responsive Elements ========================================================================= */
@media (max-width: 768px) {

  header.hidden {
    transform: translate3d(0, calc(-1 * var(--header-height)),0);
  }
  /* Navigation Menu */
  nav {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 1rem + var(--header-height) / 2));
    width: var(--nav-menu-width);
    max-height: calc(100% - var(--header-height) - 2rem);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: var(--clr-light);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  }
  nav.active {
    transform: translate(-50%, calc(-50% + var(--header-height) / 2));
    opacity: 1;
    pointer-events: unset;
  }

  .nav-link > a {
    text-align: center;
    width: calc(var(--nav-menu-width) - 2rem);
  }
  .nav-link > span {
    display: none;
  }

  /* Hamburger */
  .hamburger {
    display: flex;
  }
  .hamburger.active > .bar:first-of-type {
    transform: rotate(45deg);
  }
  .hamburger.active > .bar:nth-of-type(2) {
    opacity: 0;
  }
  .hamburger.active > .bar:last-of-type {
    transform: rotate(-45deg);
  }
}
@media (max-width: 500px) {
  /* Nav */
  .header-logo::before {
    content: "";
  }
  .header-logo {
    width: 4rem;
    height: 4rem;
    background-image: url(./img/logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Home */
  .home-logo {
    display: none;
  }
  .home-btns {
    grid-auto-flow: row;
  }
  .services-btn {
    margin-bottom: 1rem;
  }
}


@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
  .overlay.visible {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(1rem);
            backdrop-filter: blur(1rem);
  }
}