/*---------------------
         Reset
----------------------*/
/* Box sizing rules */
*,
*::before,
*::after {
   box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
   padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
   margin: 0;
}

/* Set core body defaults */
body {
   min-height: 100vh;
   scroll-behavior: smooth;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
   list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
   text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
   max-width: 100%;
   display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
   margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
   font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
   * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

/*---------------------
   Custom Properties
----------------------*/
:root {
   --clr-light: #fff;
   --clr-med: rgb(110, 131, 148);
   --clr-dark: rgb(61, 89, 112);

   /* font families */
   --ff-main: 'Barlow', sans-serif;
   --fw-bold: 500;
   --fw-regular: 300;
}

/*---------------------
  Utility Classes
----------------------*/
.flex {
   display: flex;
}

.d-block {
   display: block;
}

.d-none {
   display: none;
}

.text-center {
   text-align: center;
}

.border-bottom::after {
   content: '';
   display: block;
   width: 100%;
   height: 1px;
   background: linear-gradient(90deg, var(--clr-dark), var(--clr-light));
}

/*---------------------
   General Styles
----------------------*/

body {
   font-size: 1.125rem;
   line-height: 1.5;
   font-family: var(--ff-main);
   font-weight: 300;
   color: rgb(44, 44, 44);
   background: url(images/background_tile.png);
}

h1,
h2,
h3,
h4 {
   font-weight: 500;
   font-family: var(--ff-main);
   color: var(--clr-dark);
}

h4 {
   line-height: 1;
   margin-bottom: 0.5em;
}

p {
   margin-bottom: 1em;
}

/*---------------------
   Home Page Styles
----------------------*/

.container {
   max-width: 1200px;
   margin: 0 auto;
}

.main-header {
   width: 100%;
   height: 120px;
   padding: 1em;
   justify-content: space-between;
   align-items: center;
}

@media screen and (min-width: 800px) {
   .main-header {
      padding: 0 3em 1.5em 3em;
   }
}

.main-header,
footer {
   background-color: var(--clr-dark);
   background-image: url(images/texture.png);
   background-repeat: no-repeat;
   background-position: bottom;
}

.logo {
   width: 70%;
}

/* Navigation */

.nav {
   position: fixed;
   background: var(--clr-dark);
   color: var(--clr-light);
   opacity: 0.9;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 100;
   transform: translatex(100%);
   transition: transform 250ms cubic-bezier(0.5, 0, 0.5, 1);
}

.nav__list {
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   font-size: 0.75em;
   list-style: none;
   height: 100%;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   margin: 0;
   padding: 0;
}

.nav__link {
   color: var(--clr-light);
   text-decoration: none;
   margin: 0;
   transition: all 0.5s ease;
}

.nav__link:hover {
   color: var(--clr-med);
}

.nav-toggle {
   padding: 0.5em;
   background: transparent;
   border: 0;
   cursor: pointer;
   position: absolute;
   right: 1em;
   top: 1em;
   z-index: 1000;
}

.nav-open .nav {
   transform: translateX(0);
}

.nav-open .nav-toggle {
   position: fixed;
}

.nav-open .hamburger {
   transform: rotate(0.625turn);
}

.nav-open .hamburger::before {
   transform: rotate(90deg) translateX(-6px);
}

.nav-open .hamburger::after {
   opacity: 0;
}

.hamburger {
   display: block;
   position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
   background: var(--clr-light);
   width: 2em;
   height: 3px;
   border-radius: 1em;
   transition: transform 250ms ease-in-out;
}

.hamburger::before,
.hamburger::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
}

.hamburger::before {
   top: 6px;
}
.hamburger::after {
   bottom: 6px;
}

@media screen and (min-width: 800px) {
   .nav-toggle {
      display: none;
   }

   .nav {
      position: relative;
      transform: translateX(0);
   }

   .nav__list {
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      margin: 0;
      padding: 0;
   }

   .nav__link {
      padding: 1em;
   }
}
/* End of Nav Section */

.hero {
   color: var(--clr-light);
   background: rgba(0, 0, 0, 0.35);
   min-height: 60vh;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
}

.img-slider {
   position: absolute;
   z-index: -1;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 100%;
   min-height: 100%;   
}

.img-slider img {
   width: 100%;
  
}


  


.hero-footer {
   text-transform: uppercase;
   font-size: 0.65em;
   padding: 0 1em 0 1em;
   width: 100%;
   text-align: center;
   position: absolute;
   bottom: 0;
   background-color: rgba(61, 89, 112, 0.75);
}

@media screen and (min-width: 800px) {
   .hero-footer {
      font-size: 0.75em;
   }
}

/* chevron apperas on homepage in the footer section */
.chevron::before {
   border-style: solid;
   border-width: 0.1em 0.1em 0 0;
   content: '';
   display: inline-block;
   height: 1em;
   left: 0.15em;
   position: relative;
   top: 0.15em;
   transform: rotate(-45deg);
   vertical-align: top;
   width: 1em;
}

.chevron.bottom:before {
   top: 0;
   transform: rotate(135deg);
}

.home-services {
   flex-direction: column;
   padding: 1em 5em;
   background-color: var(--clr-light);
}

.service-item {
   text-align: center;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
   margin-bottom: 2em;
}

.service-item-title {
   margin: 0;
}

.service-item-link {
   transition: all 0.5s ease;
}

.service-item-link:hover {
   transform: scale(1.1);
}

@media screen and (min-width: 800px) {
   .home-services {
      flex-direction: row;
      padding: 3em 5em 3em 5em;
      justify-content: space-between;
   }

   .service-item {
      justify-content: space-between;
      margin-bottom: 0;
   }

   .service-item + .service-item {
      margin-left: 30px;
   }
}

footer {
   flex-direction: column;
   color: var(--clr-light);
   font-size: 0.8rem;
   padding: 1em;
   height: 300px;
   margin-bottom: 6em;
   align-items: center;
}

.footer-nav {
   margin-left: 1em;
}

.footer-nav__link {
   color: var(--clr-light);
   text-decoration: none;
   padding: 0.25em;
   margin: 1em;
}

.footer-locations-wrapper {
   flex-direction: column;
}

.footer-location {
   text-align: center;
   margin-top: 1em;
}
.footer-location p {
   margin-bottom: 0;
}

@media screen and (min-width: 800px) {
   footer {
      padding: 0 5em 1.5em 5em;
      flex-direction: row;
      justify-content: space-between;
      height: 180px;
   }
   .footer-nav {
      margin-right: 2em;
   }

   .footer-locations-wrapper {
      flex-direction: row;
   }

   .footer-location {
      text-align: left;
      margin-left: 2em;
   }
}

/*-------------------------------------
   General Styles for all other pages
---------------------------------------*/
.page-header {
   text-transform: uppercase;
   text-align: center;
   padding: 0.25em;
   background-color: var(--clr-med);
}

.page-header h3 {
   color: var(--clr-light);
   font-size: 1em;
}

.col-container {
   background-color: var(--clr-light);
   padding: 2em;
   flex-direction: column;
   align-items: center;
}

.col-rev {
   flex-direction: column-reverse;
}

.col {
   padding: 0.5em;
}

.col-sidebar-img {
   margin-bottom: 1rem;
}

.col-main-content h4 {
   text-align: center;
}

.home-service-item-img,
.service-item-img {
   width: 60%;
   height: auto;
   margin: 0 auto;
}

@media screen and (min-width: 800px) {
   .col-container {
      padding: 2em 3em;
      flex-direction: row;
      align-items: flex-start;
   }

   .col {
      flex-basis: 100%;
   }

   .col-main-content {
      flex: 1 1 70%;
      padding-right: 3em;
      margin-left: 1.5em;
   }

   .col-sidebar {
      display: block;
      flex: 1 1 30%;
   }

   .col-main-content h4 {
      text-align: left;
   }

   .service-item-img {
      width: 50%;
   }

   .placeholder {
      padding: 5em;
      background-color: var(--clr-light);
      margin-bottom: 1em;
   }
}

/*-------------------------
      Contact Page
 -------------------------*/
.contact-info {
   font-size: 1rem;
   max-width: 800px;
   margin: 0 auto 2em auto;
}

.contact-info p {
   margin-bottom: 0.5rem;
}

.locations-grid {
   margin: 0 auto;
   max-width: 800px;
   display: grid;
   gap: 1rem;
}

.location {
   text-align: left;
   font-size: 0.8rem;
   justify-content: center;
}

.location-address {
   width: 20ch;
}

.location-address p {
   margin-bottom: 0;
}
.location-name,
.location-phone {
   font-weight: var(--fw-bold);
}

.location-phone span {
   color: var(--clr-dark);
}

.location-map {
   margin-top: 0;
   width: 140px;
   height: auto;
}

.location-map iframe {
   width: 100%;
   height: 100%;
   border: 1px solid var(--clr-dark);
}

.apply-btn {
   width: 20ch;
   display: block;
   font-size: 1rem;
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   color: var(--clr-light);
   background-color: var(--clr-med);
   padding: 0.5rem 2rem;
   margin: 1rem auto;
   transition: all 0.2s ease-in-out;
}

.apply-btn:link {
   text-decoration: none;
}

.apply-btn:hover {
   background-color: var(--clr-dark);
   transform: scale(1.1);
}

@media screen and (min-width: 800px) {
   .locations-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .location {
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
   }

   .location-map {
      margin-top: 1rem;
   }
}

/*-------------------------
      Galllery
 -------------------------*/

.gallery-container {
   background-color: var(--clr-light);
   padding: 2em 3em;
}

#gallery {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 1rem;
}

.gallery-img {
   width: 100%;
   height: 170px;
   position: relative;
   transition: transform 250ms;
   cursor: pointer;
}

.gallery-img:hover {
   transform: translateY(-2px);
   box-shadow: 3px 3px 10px black;
}

#popup {
   z-index: 1000;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.75);
   display: flex;
   justify-content: center;
   align-items: center;
   transform: translateY(-100%);
   transition: 350ms;
}

/*-------------------------
   Form Page
 -------------------------*/
.form-container {
   background-color: var(--clr-light);
   padding: 2em 3em;
}

.form-response {
   height: 50vh;
}

.application-form {
   max-width: 600px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
}

.form-section {
   padding: 1rem;
   border-radius: 0.5rem;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
   margin-bottom: 2rem;
}

fieldset {
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   border: none;
   /*  */
}

.address2 {
   margin-left: 0.65rem;
}
label {
   font-size: 0.9rem;
   display: block;
   color: #666;
   font-weight: 100;
}
label em {
   color: var(--clr-med);
}

input[type='text'],
input[type='email'],
input[type='file'],
textarea {
   width: 100%;
   margin-bottom: 1rem;
   padding: 0.4rem;
   border: 1px solid var(--clr-med);
   transition: 0.3s;
}

input[type='file'] {
   border: none;
}

input[type='text']:focus,
input[type='email']:focus,
textarea:focus {
   outline: 0;
   box-shadow: 0 0 0.625rem rgba(102, 118, 172, 0.5);
}
textarea {
   height: 10rem;
   resize: vertical;
}

.form-btn {
   margin: 0 auto;
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   color: var(--clr-light);
   background-color: var(--clr-med);
   border: none;
   border-radius: 0.6rem;
   padding: 0.5rem 1rem;
   width: 50%;
}