/* 
----------------------------------------
Table of Contents
----------------------------------------
1. Basic Setup
2. Reusable
    2.1 section paddings
    2.2 section specifics
    2.3 section descriptions and text
    2.4 padding between paragraphs
    2.5 border
    2.6 descriptions
3. Header
    3.1 fixed navbar
    3.2 navbar text color change
    3.3 hamburger menu lines
    3.4 hamburger menu black
    3.5 hamburger fixed position
    3.6 hamburger menu white
    3.7 hamburger menu animation
    3.8 navigation
    3.9 navigation show
    3.10 links
    3.11 links white
    3.12 links animation 
    3.13 call button
    3.14 hero text box
    3.15 call to action button
4. About Us
    4.1 about us background image
5. Services
    5.1 services container
    5.2 service icons
    5.3 service icon descriptions
6. Why Us
    6.1 why us background image
    6.2 reasons container
    6.3 why us icons
    6.4 why us icon titles
    6.5 why us icon descriptions
7. Citites
    7.1 map
    7.2 title and description
    7.3 city listings
8. Contact
    8.1 input
    8.2 autofill style
    8.3 text area
    8.4 input and textarea
    8.5 submit button
9. Footer
    9.1 footer links
    9.2 footer links hover effect
    9.3 copy right
10. Onload Animations
11. Media Queries
    11.1 full screen navbar
    11.2 600px width
    11.3 800px width
    11.4 1024px width
    11.5 1536px width
    11.6 1680px width
    11.7 1900px width
    11.8 2500px width
*/

/* ----------------------------------------
Basic Setup
---------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background-color: #fff;
  color: #fff;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
*:focus {
  outline: none;
}
/* only activates once the full navbar appears */
body.no-scroll {
  overflow: hidden;
  touch-action: none;
}

/* ----------------------------------------
Reusable
---------------------------------------- */
/* section paddings */
.container {
  padding: 1.5rem 5%;
  max-width: 1536px;
  margin: 2rem auto;
}
/* section specifics */
.section-title {
  text-align: center;
  color: #000;
  font-size: 1.625rem;
  font-weight: 400;
}
/* section descriptions and text */
.section-text {
  color: #000;
  line-height: 1.8125em;
  font-size: 1.125rem;
}
/* margin between paragraphs */
.section-text p {
  margin-bottom: 1.8125rem;
}
/* border */
.border {
  display: block;
  height: 0.125rem;
  background-color: #f5b700;
  content: "";
  width: 3.75rem;
  margin: 1.25rem auto;
}
/* descriptions */
.center-text {
  text-align: center;
}

/* ----------------------------------------
Header
---------------------------------------- */
header {
  background-color: #000;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../images/landing-page.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  min-height: 400px;
  background-attachment: scroll;
  max-width: 1536px;
  margin: 0 auto;
}
.header {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  padding: 0.3125rem 5% 0 5%;
  background: transparent;
  z-index: 3;
}
/* fixed navbar */
.header.fixed {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 2px #efefef;
}
.brand-name {
  color: #fff;
  line-height: 3.4375rem;
  font-size: 1.75rem;
  text-decoration: none;
}
/* navbar text color change */
.fixed .brand-name,
.fixed nav ul li a {
  color: #000;
}
/* hamburger menu lines */
.hamburger {
  position: absolute;
  top: 20px;
  right: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.4s ease;
}
.hamburger > div {
  width: 100%;
  height: 4px;
  background: #fff;
  border-radius: 5px;
  transition: all 0.4 ease;
}
.hamburger > div:before,
.hamburger > div:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background: inherit;
  border-radius: 5px;
  transition: all 0.4 ease;
}
.hamburger > div:before {
  transform: translateY(-8px);
}
.hamburger > div:after {
  transform: translateY(8px);
}
/* hamburger menu black */
.fixed .hamburger > div {
  background: #000;
}
/* hamburger fixed position */
.hamburger.stuck {
  position: fixed;
}
/* hamburger menu white */
.js-hamburger.white {
  background: #fff !important;
}
/* hamburger menu animation */
.rotate-ham-menu {
  transform: rotate(-135deg);
}
.rotate-ham-menu.hamburger > div:before,
.rotate-ham-menu.hamburger > div:after {
  transform: rotate(-90deg);
}
/* navigation */
nav {
  display: none;
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #1a5e63;
  top: 0;
  left: 0;
  opacity: 0;
  position: fixed;
}
/* navigation show */
nav.active {
  display: block;
  opacity: 1;
  overflow: hidden;
}
/* links */
nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 70px;
}
nav ul li {
  list-style: none;
  opacity: 0;
}
nav ul li a {
  font-size: 1.5625rem;
  color: #fff;
  text-decoration: none;
}
nav ul li a:link,
nav ul li a:visited {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.2s;
}
nav ul li a:hover,
nav ul li a:active {
  border-bottom: 2px solid #f5b700;
}
/* links white */
nav.white ul li a {
  color: #fff;
}
/* links animation */
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/* call button */
.call-btn:link,
.call-btn:visited {
  background: linear-gradient(135deg, #f5b700, #f0c500);
  border: none;
  border-radius: 50px;
  color: #000;
  text-decoration: none;
  display: inline-block;
  font-size: 1.375rem;
  font-weight: 400;
  padding: 10px 20px;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.call-btn:hover,
.call-btn:active,
.call-btn:focus {
  background: linear-gradient(135deg, #d8a303, #c7a800);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.phone-icon {
  vertical-align: middle;
}
/* hero text box */
.hero-text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding: 0 5%;
}
.hero-text-box h1 {
  margin-bottom: 1.25em;
  font-weight: 300;
}
.hero-text-box h2 {
  margin-bottom: 3em;
  font-size: 1.25rem;
  font-weight: 300;
}
/* call to action button*/
.btn:link,
.btn:visited {
  background: linear-gradient(135deg, #b7d5d4, #9fc7c5);
  border: none;
  border-radius: 50px;
  color: #000;
  text-decoration: none;
  display: inline-block;
  font-size: 1.375rem;
  font-weight: 400;
  padding: 10px 20px;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.btn:hover,
.btn:active {
  background: linear-gradient(135deg, #74aaa8, #5a8d8c);
}

/* ----------------------------------------
About Us
---------------------------------------- */
/* about us background image */
.bg1 {
  background: url(../images/about-bg.svg) no-repeat;
  background-size: cover;
  background-position: bottom;
}
.about-content {
  display: flex;
  flex-direction: column;
}
.iso-house {
  margin: 1.875rem auto;
  opacity: 0;
  height: 50%;
  width: 50%;
}
/* ----------------------------------------
Services
---------------------------------------- */
.services {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  justify-content: center;
  gap: 30px;
}
/* services container */
.service-des {
  text-align: center;
}
/* service icons */
.service-des img {
  width: 130px;
  height: 130px;
}
/* service icon descriptions */
.service-des p {
  color: #000;
  width: 100%;
  font-size: 1.5rem;
}
/* ----------------------------------------
Why Us
---------------------------------------- */
/* why us background image */
.bg2 {
  background: url(../images/why-us-bg.svg) no-repeat;
  background-size: cover;
  background-position: 25% 75%;
}
.reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
}
/* reasons container */
.reasons-des {
  width: 100%;
  text-align: center;
  margin-top: 1.875rem;
}
/* why us icons */
.reasons-des img {
  width: 50%;
  height: 50%;
  margin-bottom: 1.25rem;
}
/* why us icon titles */
.reasons-des h2 {
  color: #000;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}
/* why us icon descriptions */
.reasons-des p {
  color: #000;
  width: 100%;
  font-size: 1.25rem;
}
/* ----------------------------------------
Cities
---------------------------------------- */
/* map */
.locations iframe {
  width: 100%;
  height: 350px;
}
.locations-container {
  margin-top: 1.875rem;
  background-color: #fafcfd;
  padding: 1.875rem 0;
}

/* title and description */
.city-title {
  /* padding-top: 1.875rem; */
  font-size: 1.5rem;
  color: #000;
  text-align: center;
}
.city-des {
  width: 90%;
  margin: 1.25rem auto;
  font-size: 1.125rem;
  color: #000;
  text-align: center;
}

/* city listings */
.listings-container {
  margin: 0 auto;
  width: 80%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.listings {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.listings span {
  display: flex;
  align-items: center;
  flex: 0 1 calc(50% - 1rem);
}

.listings span img {
  height: 1.875rem;
  width: 1.875rem;
  margin-right: 5px;
}
.listings span p {
  color: #000;
  display: inline;
  font-size: 1.125rem;
}
/* ----------------------------------------
Contact
---------------------------------------- */
.bg3 {
  background: url(../images/contact-bg.svg) no-repeat;
  background-size: cover;
  background-position: top;
}
.contact-section img {
  display: none;
  width: 100%;
  height: 100%;
}
form {
  text-align: center;
}
/* input */
form input {
  width: 90%;
  height: 50px;
  border-radius: 30px;
  margin-bottom: 1.875rem;
  border: 1px solid #c4c4c4;
  font-size: 1rem;
}
form input::placeholder {
  color: #c4c4c4;
  text-align: center;
}
/* autofill style */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  box-shadow: 0 0 0 30px white inset !important;
}
/* text area */
form textarea {
  resize: none;
  width: 90%;
  height: 200px;
  border: 1px solid #c4c4c4;
  border-radius: 30px;
  margin-bottom: 1.875rem;
  font-size: 1.125rem;
  line-height: 1.25rem;
  overflow: auto;
}
form textarea::placeholder {
  color: #c4c4c4;
  text-align: center;
}
/* input and textarea */
form input,
form textarea {
  padding: 1rem 20px;
}
/* submit button */
.submit-btn {
  background: linear-gradient(135deg, #f5b700, #f0c500);
  border: none;
  border-radius: 50px;
  color: #000;
  font-size: 1.125rem;
  font-weight: 400;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.submit-btn:hover,
.submit-btn:active,
.submit-btn:focus {
  background: linear-gradient(135deg, #d8a303, #c7a800);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
/* ----------------------------------------
Footer
---------------------------------------- */
footer {
  background-color: #333;
}
footer.container {
  margin: 0 auto;
}
/* footer links */
.footer-links {
  margin-bottom: 1.875rem;
  width: 100%;
}
.footer-links li {
  list-style: none;
  margin-bottom: 20px;
  text-align: center;
}
.footer-links li a {
  cursor: pointer;
}
.footer-links li a:link,
.footer-links li a:visited {
  text-decoration: none;
  color: #fafafa;
}
/* footer links hover effect */
.footer-links li a:hover,
.footer-links li a:active {
  color: #d8a303;
}
/* copy right */
footer p {
  color: #fafafa;
  text-align: center;
}
.footer-links li a,
footer p {
  font-size: 1rem;
}
/* ----------------------------------------
Onload Animations
---------------------------------------- */
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate_fadeInRight {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate_fadeIn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* ----------------------------------------
Media Queries
---------------------------------------- */
/* needed for city listings to avoid weird layout */
@media (max-width: 360px) {
  .listings-container {
    width: 50%;
  }
  .listings span {
    flex: 0 1 100%;
  }
}
/* Extra Small (xs: 0px - 599px) */
@media (max-width: 599px) {
  .reasons-des img {
    width: 90px;
    height: 90px;
  }
}

/* Small screen sizes and up */
@media (min-width: 600px) {
  .iso-house {
    height: 320px;
    width: 320px;
  }
  /* services */
  .services {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 2.5rem;
  }
  .service-des {
    width: 50%;
  }

  /* why us */
  .reasons-des img {
    width: 100px;
    height: 100px;
  }

  /* city listings */
  .listings span {
    flex: 0 1 calc(33.33% - 1rem);
  }
  /* citites */
  .locations iframe {
    height: 450px;
  }

  /* contact */
  form input,
  form textarea {
    width: 70%;
  }
}

/* Medium screen sizes and up */
@media (min-width: 900px) {
  /* navigation */
  .hamburger {
    display: none;
  }
  .header {
    left: 50%;
    transform: translateX(-50%);
    max-width: 1536px;
  }
  nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    background: transparent;
    opacity: 1;
    height: auto;
    width: auto;
    top: 0;
    right: 5%;
  }
  nav ul {
    width: auto;
    height: auto;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 1rem;
    gap: 60px;
  }
  nav ul li {
    opacity: 1;
    padding-bottom: 0;
  }
  nav ul li a {
    font-size: 1.25rem;
  }
  .call-btn:link,
  .call-btn:visited {
    font-size: 1.25rem;
    padding: 7px 7px;
  }
  .iso-house {
    height: 350px;
    width: 350px;
  }
  .services {
    column-gap: 2.5rem;
  }
  .service-des {
    width: 20%;
  }
  .reasons {
    flex-direction: row;
    align-items: flex-start;
    column-gap: 2.5rem;
  }
  .contact-section {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  form {
    width: 55%;
  }
  form input,
  form textarea {
    width: 100%;
  }
  .contact-section img {
    display: block;
    height: 250px;
    width: 250px;
  }
  .footer-links {
    display: flex;
    column-gap: 2rem;
  }

  .footer-links li:last-child {
    margin-right: 0;
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .locations {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
  }

  .locations iframe {
    order: 2;
    flex: 1 1 60%;
  }

  .locations-container {
    margin-top: 0;
    order: 1;
    flex: 1 1 40%;
  }
  .listings {
    justify-content: flex-start;
  }
  .listings span {
    flex: 0 1 calc((100% - 1.5rem) / 2);
  }
  .city-des {
    text-align: left;
  }
}