/* Fonts */

@font-face {
    font-family: GilroyLight;
    src: url(/Fonts/gilroy-free/Gilroy-FREE/Gilroy-Light.otf);
  }
  @font-face {
    font-family: GilroyBold;
    src: url(/Fonts/gilroy-free/Gilroy-FREE/Gilroy-ExtraBold.otf);
  }
  
  @font-face {
    font-family: MachinaLight;
    src: url(/Fonts/Machina-font/659dbdfd5a080be8d348316f_PPNeueMachina_\ Light.ttf);
  }
  @font-face {
    font-family: MachinaBold;
    src: url(/Fonts/Machina-font/659dbdfd5a080be8d348316e_PP\ Neue\ Machina\ Inktrap\ Medium.ttf);
  }
  
  /* Colors */
  
  :root {
    --primary-color: #141b23;
    --secondary-color: #ffffff;
    --bg-color: #0d9644;
    --service-s-color: #f8f7f0;
    --footer-color: #24231d;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html,
  body {
    width: 100%;
    height: 100%;
  }
  body{
    scroll-behavior: smooth;
  }
  .home-about{
    height: 50vh !important;
  }
#about-hero{
    width: 100%;
    height: 50vh;
    margin-top: 5%;
    background-image: url(/Images/contact-hero.jpg) !important;
    background-size: cover;
    background-position: center;
}
#about-hero-content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vw 0;
    background-image: url(/Images/__after.png);
    color: var(--secondary-color);
}
#about-hero-content h1{
    font-family: GilroyLight;
    font-weight: 900;
    font-size: 5vw;
}
#about-hero-content h6{
    font-family: GilroyLight;
    font-weight: 300;
    font-size: 1.5vw;
}
#about-hero-content h6 a{
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 1.8vw;
    font-weight: 600;
}

/* Location-section */

#location-section{
  width: 100%;
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 3vw;
}
.l-card{
  width: 25%;
  text-align: center;
  background-color: var(--service-s-color);
  padding: 3vw 1vw;
  font-family: GilroyLight;
}
.l-card h3{
  font-weight: 900;
  font-size: 2vw;
  margin-bottom: 1vw;
}
.l-card h6{
  font-weight: 900;
  font-size: 1vw;
}
.l-card:hover{
  cursor: pointer;
  box-shadow: 5px 5px 15px rgba(128, 128, 128, 0.108);
}
.l-card img{
  width: 10vw;
}

/* contact-form-section */

#contact-form-section{
  width: 100%;
  min-height: 100vh;
  display: flex;
}
#contact-image{
  width: 40%;
  background-image: url(/Images/contact-image.jpg);
  background-size: cover;
}
#contact-form{
  width: 60%;
  background-color: var(--service-s-color);
  padding: 3vw 5vw;
}
#contact-form h3{
  font-family: MachinaBold;
  font-weight: 900;
  font-size: 2vw;
  color: var(--bg-color);
}
#contact-form h1{
  font-family: GilroyBold;
  font-weight: 300;
  font-size: 3vw;
  color: var(--primary-color);
  margin: 1vw 0;
}
#contact-form form{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1vw;
  margin-top: 3vw;
}
#contact-form form input{
  padding: 1.5vw 2.5vw;
  border-radius: 5px;
  border: none;
  outline: none;
  font-family: GilroyLight;
  font-weight: 600;
  font-size: 1.1vw;
}
#contact-form form textarea{
  padding: 1vw 2.5vw;
  border-radius: 5px;
  border: none;
  outline: none;
  font-family: GilroyLight;
  font-weight: 600;
  font-size: 1.1vw;
}
#contact-form form a{
  width: 25%;
  color: var(--secondary-color);
  text-decoration: none;
  font-family: GilroyLight;
  font-weight: bold;
  padding: 1.5vw 2vw;
  background-color: var(--bg-color);
  margin-right: 1vw;
  border-radius: 3vw;
  border-top-left-radius: 0;
  cursor: pointer;
}
#contact-form form a:hover{
  background-color: #0d9644ce;
}

/* map-section */

#map-section{
  width: 100%;
  min-height: 50vh;
}
#map-section iframe{
  width: 100%;
  min-height: 100%;
}

/* Media Quries */

@media screen and (max-width: 576px){
  #about-hero {
    height: 40vh;
  }
  #about-hero-content h1 {
    font-size: 10vw;
  }
  #about-hero-content h6 {
    font-size: 4vw;
  }
  #about-hero-content h6 a {
    font-size: 5vw;
  }
  #location-section{
    min-height: 50vh;
    flex-direction: column;
    gap: 5vw 0;
    padding: 10vw 5vw;
  }
  .l-card{
    width: 70%;
    height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 3vw;
  }
  .l-card img{
    width: 25vw;
  }
  .l-card h3{
    font-size: 7vw;
    margin-bottom: 3vw;
  }
  .l-card h6{
    font-size: 3vw;
  }
  #contact-form-section{
    flex-direction: column;
  }
  #contact-image{
    width: 100%;
    height: 50vh;
  }
  #contact-form{
    width: 100%;
    min-height: 50vh;
    padding: 10vw 5vw;
  }
  #contact-form h3{
    font-size: 4vw;
  }
  #contact-form h1{
    font-size: 7vw;
  }
  #contact-form form input{
    font-size: 4vw;
    padding: 4vw 3vw;
    margin-bottom: 3vw;
  }
  #contact-form form textarea{
    font-size: 4vw;
    padding: 4vw 3vw;
    margin-bottom: 3vw;
  }
  #contact-form form a{
    padding: 6vw 5vw;
    width: 40%;
    border-radius: 50px;
    border-top-left-radius: 0;
  }
}
@media (min-width: 576px) and (max-width: 992px){
  #about-hero-content h1 {
    font-size: 8vw;
  }
  #about-hero-content h6 {
    font-size: 3vw;
  }
  #about-hero-content h6 a {
    font-size: 4vw;
  }
  #location-section{
    min-height: 40vh;
  }
  #contact-form-section{
    min-height: 60vh;
  }
  #contact-form h3{
    font-size: 3vw;
    margin-top: 3vw;
  }
  #contact-form h1{
    font-size: 4.5vw;
  }
  #contact-form form input{
    font-size: 2.3vw;
    margin-bottom: 1vw;
    padding: 2vw 3vw;
  }
  #contact-form form textarea{
    font-size: 2.3vw;
  }
  #contact-form a{
    width: 40% !important;
    margin-top: 1vw;
    padding: 4vw 2vw;
  }
  #map-section{
    height: 50vh !important;
  }
}