/* ==========================================================================
   TABLE OF CONTENTS (REFACTORED)
   ========================================================================== */
/*
    1.0 - Global Styles
        1.1 - html, body
    2.0 - Footer Layout Component
        2.1 - .footer
        2.2 - .wide-footer
        2.3 - .wide-footer-right
    3.0 - Newsletter Component
        3.1 - .newsletter-wrapper
        3.2 - .news-line
        3.3 - #join
        3.4 - #join-form
        3.5 - .visually-hidden
        3.6 - #join-form #email
        3.7 - #email
        3.8 - #join-form button
        3.9 - #join-form button:hover
    4.0 - Navigation Links Component
        4.1 - .links-wrapper
        4.2 - .links-wrapper ul
        4.3 - .links-wrapper ul li a
        4.4 - .links-wrapper ul li a:hover::after
        4.5 - .links-wrapper ul li a:after
    5.0 - Support Component
        5.1 - .support-wrapper
        5.2 - .support-wrapper h3
        5.3 - .support-wrapper a
        5.4 - .support-wrapper a:hover
    6.0 - Contact Component
        6.1 - .contact-wrapper
        6.2 - .contact-wrapper h3
        6.3 - address
        6.4 - .address, .email
        6.5 - .address br
        6.6 - .address img
        6.7 - .email img
        6.8 - .email a
        6.9 - .social-links
        6.10 - .social-icons
        6.11 - .social-icons li a
        6.12 - .social-icons img
        6.13 - .social-icons li a:hover img
    7.0 - Decorative & FX Component
        7.1 - .newsletter-wrapper, .links-wrapper, .support-wrapper, .contact-wrapper
        7.2 - #footer-shield, #footer-circle, #footer-triangle, #footer-diamond
        7.3 - #footer-shield
        7.4 - #footer-circle
        7.5 - #footer-triangle
        7.6 - #footer-diamond
        7.7 - .halftone-wrapper
        7.8 - .halftone
        7.9 - .halftone::after
        7.10 - .blue-blur
        7.11 - .white-blur
*/

/* ==========================================================================
                           1.0 - Global Styles
   ========================================================================== */

/* 1.1 html, body */
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ==========================================================================
                       2.0 - Footer Layout Component
   ========================================================================== */

/* 2.1 .footer */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding-bottom: 100px;
  background-color: var(--Navy-Blue-1000);
  overflow: hidden;
}

/* 2.2 .wide-footer */
@media (min-width: 1200px) {
  .wide-footer {
    display: flex;
    flex-direction: row;
    /* max-width: 1200px; */
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px 0;
  }
}
@media (min-width: 1920px) {
  .wide-footer {
    /* max-width: 90%; */
    margin: 5rem 0 0 12rem;
  }
}

/* 2.3 .wide-footer-right */
@media (min-width: 1200px) {
  .wide-footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    margin-left: -5rem;
  }
}
@media (min-width: 1400px) {
  .wide-footer-right {
    padding-left: 8rem;
  }
}
@media (min-width: 1920px) {
  .wide-footer-right {
    padding-left: 8rem;
    width: 43%;
  }
}
/* ==========================================================================
                         3.0 - Newsletter Component
   ========================================================================== */

/* 3.1 .newsletter-wrapper */
.newsletter-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

/* 3.2 .news-line */
.news-line {
  height: 1.25px;
  width: 100%;
  margin-top: 20px;
  background-color: var(--Neutral-Gray-100);
  border: none;
  opacity: 100%;
}

/* 3.3 #join */
#join {
  color: var(--Neutral-Indigo-100);
  line-height: normal;
  text-align: center;
  max-width: 276px;
}
@media (min-width: 576px) {
  #join {
    max-width: 460px;
  }
}
@media (min-width: 768px) {
  #join {
    max-width: 495px;
  }
}
@media (min-width: 1200px) {
  #join {
    max-width: 1010px;
  }
}
@media (min-width: 1621px) {
  #join {
    max-width: 1095px;
  }
}
@media (min-width: 1920px) {
  #join {
    max-width: 1270px;
    margin: 0 0 2rem 0;
  }
}

/* 3.4 #join-form */
#join-form {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
}
@media (min-width: 768px) {
  #join-form {
    flex-direction: row;
  }
}
@media (min-width: 1920px) {
  #join-form {
    gap: 35px;
  }
}

/* 3.5 .visually-hidden */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3.6 #join-form #email */
#join-form #email {
  /* padding: 0.5rem 2rem; */
  padding: 0 2rem;
  border: 1.25px solid var(--Navy-Blue-1000);
  width: 180px;
  height: 36px;
}

/* 3.7 #email */
#email {
  flex-grow: 1;
  max-width: 181px;
  line-height: 50px;
  flex-shrink: 0;
  background: var(--Neutral-Indigo-100);
  font-size: var(--fs-body);
  font-family: var(--font-primary);
  color: var(--Navy-Blue-1000);
}

@media (min-width: 1200px) {
  #email {
    max-width: 511px;
  }
}
@media (min-width: 1920px) {
  #email {
    width: 585px;
    height: 57px;
    flex-shrink: 0;
  }
}
#email::placeholder {
  font-size: var(--fs-body);
  font-weight: 500;
  opacity: 1;
}

/* 3.8 #join-form button */
#join-form button {
  display: flex;
  width: 120px;
  height: 36px;
  padding: 0 10px;
  /* padding: 1.5rem 2rem; */
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.25px solid var(--Neutral-Indigo-100);
  background-color: transparent;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--Neutral-Indigo-100);
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--fs-h6);
  font-style: normal;
  font-weight: 400;
  line-height: 14.192px;
  letter-spacing: 0.385px;
  transition:
    background-color 0.2s,
    color 0.2s;
  box-sizing: border-box;
}
@media (min-width: 1200px) {
  #join-form button {
    padding: 1.5rem;
  }
}

/* 3.9 #join-form button:hover */
#join-form button:hover {
  background: rgba(251, 251, 252, 1);
  color: var(--Netural-Indigo-1000);
}

/* ==========================================================================
                    4.0 - Navigation Links Component
   ========================================================================== */

/* 4.1 .links-wrapper */
.links-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 2rem;
}
@media (min-width: 1200px) {
  .links-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 50%;
    margin-left: 10rem;
  }
}
@media (min-width: 1920px) {
  .links-wrapper {
    margin: 0;
    align-items: flex-start;
  }
}

/* 4.2 .links-wrapper ul */
.links-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
@media (min-width: 1200px) {
  .links-wrapper ul {
    margin-top: 0;
  }
}

/* 4.3 .links-wrapper ul li a */
.links-wrapper ul li a {
  display: inline-block;
  color: var(--Neutral-Indigo-100);
  text-align: center;
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 2rem auto;
  text-decoration: none;
  position: relative;
}

@media (min-width: 1200px) {
  .links-wrapper ul {
    text-align: left;
  }
  .links-wrapper ul li a {
    text-align: left;
    margin-bottom: 2.5rem;
    margin-top: 0;
  }
}

/* 4.4 .links-wrapper ul li a:hover::after */
.links-wrapper ul li a:hover::after {
  width: 100%;
}

/* 4.5 .links-wrapper ul li a:after */
.links-wrapper ul li a:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 4px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}

/* ==========================================================================
                          5.0 - Support Component
   ========================================================================== */

/* 5.1 .support-wrapper */
.support-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 50px;
}
@media (min-width: 1200px) {
  .support-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (min-width: 1920px) {
  .support-wrapper {
    margin-bottom: 4rem;
  }
}

/* 5.2 .support-wrapper h3 */
.support-wrapper h3 {
  text-align: center;
  color: var(--Neutral-Indigo-100);
  font-family: var(--font-primary), sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* 5.3 .support-wrapper a */
.support-wrapper a {
  display: flex;
  height: 36px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: 1.25px solid var(--Neutral-Indigo-100);
  background-color: transparent;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  color: var(--Neutral-Indigo-100);
  font-family: "Barlow Condensed", sans-serif;
  font-size: var(--fs-h6);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.184px;
  transition:
    background-color 0.2s,
    color 0.2s;
  box-sizing: border-box;
}
@media (min-width: 1200px) {
  .support-wrapper a {
    padding: 1.5rem;
    margin-top: 1rem;
  }
}

/* 5.4 .support-wrapper a:hover */
.support-wrapper a:hover {
  background: rgba(251, 251, 252, 1);
  color: var(--Netural-Indigo-1000);
}

/* ==========================================================================
                         6.0 - Contact Component
   ========================================================================== */

/* 6.1 .contact-wrapper */
.contact-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 200px;
}
@media (min-width: 1200px) {
  .contact-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 6.3 address */
address {
  display: flex;
  flex-direction: column;
  color: var(--Neutral-Indigo-100);
  font-family: var(--font-primary), sans-serif;
  font-size: var(--fs-body);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.3px;
}

/* 6.4 .address, .email */
.address,
.email {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .address,
  .email {
    align-items: center;
    justify-content: flex-start;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 1200px) {
  .address,
  .email {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* 6.5 .address br */
@media (min-width: 1200px) {
  .address br {
    display: none;
  }
}

/* 6.6 .address img */
.address img {
  width: 10px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 1200px) {
  .address img {
    width: 2rem;
  }
}
.address img,
.email img {
  margin-top: 0.225rem;
}
@media(min-width:1200px){
  .address img,
.email img {
  margin-top: 0;
}
}
/* 6.7 .email img */
.email img {
  width: 8px;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 1200px) {
  .email img {
    width: 2rem;
  }
}

/* 6.8 .email a */
.email a {
  color: var(--Neutral-Indigo-100);
  text-decoration: none;
}
/* 6.9 .social-links */
.social-links {
  width: 100%;
}
/* 6.10 .social-icons */
.social-icons {
  list-style: none;
  width: fit-content;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
@media (min-wdith: 768px) {
  .social-icons {
    margin-top: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .social-icons {
    justify-content: flex-start;
    gap: 10px;
  }
}

/* 6.11 .social-icons li a */
.social-icons li a {
  display: block;
  line-height: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 6.12 .social-icons img */
.social-icons li,
.social-icons a,
.social-icons img {
  height: 20px;
  width: 20px;
  max-width: 20px;
  display: block;
}
@media (min-width: 768px) {
  .social-icons li,
  .social-icons a,
  .social-icons img {
    height: 25px;
    width: 25px;
    max-width: 25px;
  }
}
@media (min-width: 1200px) {
  .social-icons li,
  .social-icons a,
  .social-icons img {
    width: 40px;
    max-width: 40px;
    height: 40px;
  }
}

/* 6.13 .social-icons li a:hover img */
.social-icons li a:hover img {
  opacity: 0.8;
  transform: scale(1.1);
  transition: all 0.2s ease-in-out;
}

/* ==========================================================================
                      7.0 - Decorative & FX Component
   ========================================================================== */

/* 7.1 .newsletter-wrapper, .links-wrapper, .support-wrapper, .contact-wrapper */
.newsletter-wrapper,
.links-wrapper,
.support-wrapper,
.contact-wrapper {
  position: relative;
  z-index: 5;
}

/* 7.2 #footer-shield, #footer-circle, #footer-triangle, #footer-diamond */
#footer-shield,
#footer-circle,
#footer-triangle,
#footer-diamond {
  z-index: 0;
}

/* 7.3 #footer-shield */
#footer-shield {
  margin-top: 860px;
  width: 79.365px;
  height: 79.953px;
  flex-shrink: 0;
  aspect-ratio: 79.36/79.95;
  transform: rotate(-15deg);
  position: absolute;
  right: 1rem;
}
@media (min-width: 576px) {
  #footer-shield {
    margin-top: 820px;
    width: 79.365px;
    right: 8rem;
  }
}
@media (min-width: 992px) {
  #footer-shield {
    margin-top: 780px;
    width: 152.289px;
    height: 153.417px;
    right: 5rem;
  }
}
@media (min-width: 1200px) {
  #footer-shield {
    margin-top: 820px;
    width: 216.952px;
    height: 218.559px;
    right: 40rem;
  }
}
@media (min-width: 1400px) {
  #footer-shield {
    margin-top: 820px;
    right: 45rem;
  }
}
@media (min-width: 1920px) {
  #footer-shield {
    margin-top: 975px;
    right: 60rem;
  }
}

/* 7.4 #footer-circle */
#footer-circle {
  position: absolute;
  margin-top: 900px;
  width: 152px;
  left: 1rem;
}
@media (min-width: 576px) {
  #footer-circle {
    margin-top: 875px;
    width: 152px;
    left: 1rem;
  }
}
@media (min-width: 992px) {
  #footer-circle {
    position: absolute;
    margin-top: 775px;
    width: 303.046px;
    height: 303.046px;
    left: -3rem;
  }
}
@media (min-width: 1200px) {
  #footer-circle {
    position: absolute;
    margin-top: 1135px;
    width: 359px;
    height: 359px;
    left: -3rem;
  }
}
@media (min-width: 1400px) {
  #footer-circle {
    position: absolute;
    margin-top: 1135px;
    left: 5rem;
  }
}
@media (min-width: 1920px) {
  #footer-circle {
    margin-top: 1450px;
    left: -2rem;
  }
}

/* 7.5 #footer-triangle */
#footer-triangle {
  position: absolute;
  margin-top: 1020px;
  width: 120px;
  transform: rotate(15deg);
  right: -20px;
}
@media (min-width: 576px) {
  #footer-triangle {
    margin-top: 985px;
    width: 120px;
    right: 7rem;
  }
}
@media (min-width: 992px) {
  #footer-triangle {
    position: absolute;
    margin-top: 1050px;
    width: 303.046px;
    height: 303.046px;
    right: -0.5rem;
  }
}
@media (min-width: 1200px) {
  #footer-triangle {
    position: absolute;
    margin-top: 750px;
    width: 229.062px;
    height: 249.729px;
    right: -0.5rem;
  }
}
@media (min-width: 1400px) {
  #footer-triangle {
    position: absolute;
    margin-top: 750px;
    right: 1.5rem;
  }
}
@media (min-width: 1920px) {
  #footer-triangle {
    margin-top: 750px;
    right: 1.5rem;
  }
}

/* 7.6 #footer-diamond */
#footer-diamond {
  position: absolute;
  margin-top: 1235px;
  width: 15rem;
  transform: rotate(9deg);
  left: 1rem;
}
@media (min-width: 576px) {
  #footer-diamond {
    margin-top: 1175px;
    width: 15rem;
    left: 1rem;
  }
}
@media (min-width: 992px) {
  #footer-diamond {
    position: absolute;
    margin-top: 1335px;
    width: 204.275px;
    height: 204.275px;
    left: -3rem;
  }
}
@media (min-width: 1200px) {
  #footer-diamond {
    position: absolute;
    margin-top: 1015px;
    width: 353.553px;
    height: 353.553px;
    left: 30rem;
  }
}
@media (min-width: 1400px) {
  #footer-diamond {
    position: absolute;
    margin-top: 1015px;
    left: 45rem;
  }
}
@media (min-width: 1920px) {
  #footer-diamond {
    margin-top: 1215px;
    left: 40rem;
  }
}

/* 7.7 .halftone-wrapper */
.halftone-wrapper {
  width: 100%;
  height: 550px;
  background-color: var(--Navy-Blue-1000);
  overflow: hidden;
  position: relative;
  margin-top: 0;
}

/* 7.8 .halftone */
.halftone {
  margin-top: 0;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 500px;
  background: linear-gradient(to top, var(--Navy-Blue-1000) 90%, white);
  filter: contrast(50);
  mix-blend-mode: screen;
  --stop1: 0.25rem;
  --stop2: 0.65rem;
  --dot-size: 1rem;
  --bg-size: 1rem;
}

/* 7.9 .halftone::after */
.halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at center,
      var(--Neutral-Indigo-100) var(--stop1),
      transparent var(--stop2),
      var(--Neutral-Indigo-100)
    ),
    radial-gradient(
      circle at center,
      var(--Neutral-Indigo-100) var(--stop1),
      transparent var(--stop2),
      var(--Neutral-Indigo-100)
    );
  background-size: var(--bg-size) var(--dot-size);
  background-repeat: round;
  mask-image: linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0 / 0.5));
}

/* 7.10 .blue-blur */
.blue-blur {
  position: relative;
  top: -275px;
  left: 0;
  width: 100%;
  height: 500px;
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 10;
  background-color: var(--Navy-Blue-1000);
}

/* 7.11 .white-blur */
.white-blur {
  position: relative;
  top: -1150px;
  left: 0;
  width: 100%;
  height: 500px;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 12;
  background-color: var(--Neutral-Indigo-100);
}
.wide-footer-right__heading {
  color: var(--font-color-heading);
}
@media (min-width: 1200px) {
  .wide-footer-right__heading {
    margin-top: 0;
    margin-bottom: 0.225rem;
  }
}