/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ***** Resets ***** */

*,
::after,
::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: var(--main-bg-color);
  background-color: white;
}

ul,
ol,
li,
a {
  text-decoration: none;
  list-style: none;
}

/* ***** Root Var ***** */

:root {
  /* Colors */

  --main-color-solid: rgb(43, 49, 83);
  --main-color-semisolid: rgb(43, 49, 83, 0.75);
  --main-color-medium: rgb(43, 49, 83, 0.5);
  --main-color-ligh: rgb(43, 49, 83, 0.25);

  --secondary-color-solid: rgb(236, 233, 233);
  --secondary-color-semisolid: rgb(236, 233, 233, 0.75);
  --secondary-color-medium: rgb(236, 233, 233, 0.5);
  --secondary-color-ligh: rgb(236, 233, 233, 0.25);

  --tertiary-color-solid: #f89428;
  --tertiary-color-semisolid: #f89428bf;
  --tertiary-color-medium: #f8942880;
  --tertiary-color-ligh: #f8942840;

  --main-bg-color: #9b9b9b23;
  --secondary-bg-color: ;

  /* Fonts */

  --main-font: ;
  --secondary-font: ;

  --high-font-size: ;
  --medium-font-size: ;
  --low-font-size: ;

  /* Spacing */

  --xlg-spacing: ;
  --lg-spacing: 7rem;
  --md-spacing: ;
  --sm-spacing: ;
  --xsm-spacing: ;
}

/* ***** Custom Styles ***** */

h1,
h2,
h3,
h4,
h5 {
  font-family: "Montserrat", sans-serif;
  font-weight: bold !important;
}

p,
a,
::placeholder,
select {
  font-family: "Montserrat", sans-serif;
}

small {
  font-family: "Montserrat", sans-serif;
}

.borderTertiary {
  border-bottom: solid 3px var(--tertiary-color-solid) !important;
}

/* ***** Navbar ***** */

#dropdown__item:hover {
  -webkit-transition: color 0.3s ease-in-out v;
  -o-transition: color 0.3s ease-in-out v;
  transition: color 0.3s ease-in-out v;
  color: var(--main-color-solid) !important;
  background: var(--tertiary-color-solid);
}
.navbar-brand {
  color: var(--tertiary-color-solid) !important;
}

.navbar-brand:hover {
  text-shadow: 0 0 3px var(--tertiary-color-solid) !important;
}

.nav-link {
  color: antiquewhite;
}

.dropdown-item {
  color: black;
}

/* ***** Hero Section ***** */

.bg__hero-img {
  height: 100vh;
}

.glass-bg {
  background-color: rgba(219, 217, 217, 0.337);
  -webkit-backdrop-filter: blur(5px) brightness(0.65);
  backdrop-filter: blur(5px) brightness(0.65);
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.bg__hero-img li {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.bg__hero-img li:hover {
  font-weight: bold;
  color: var(--tertiary-color-solid);
  text-shadow: 0 0 1px var(--tertiary-color-medium);
}

.bg__hero-img img {
  width: 20%;
}

.intro {
  background-color: var(--tertiary-color-medium);
  -webkit-backdrop-filter: blur(5px) brightness(0.8);
  backdrop-filter: blur(5px) brightness(0.8);
  -webkit-box-shadow: 49px 26px 52px -4px rgbargba(45, 45, 45, 0.394);
  box-shadow: 49px 26px 52px -4px rgba(45, 45, 45, 0.394);
}

.main-cover {
  background-color: whitesmoke;
}

/* ***** About US ***** */
.bg-tertiary {
  background-color: var(--tertiary-color-solid);
}

#careers img {
  max-width: 100%;
}

.worker__atributtes img {
  -webkit-transform: scale(1.8);
  -ms-transform: scale(1.8);
  transform: scale(1.8);
}

.big-text__careers {
  background-color: var(--tertiary-color-solid);
}

.worker__skills article img {
  display: inline-block;
  padding: .5rem;
  border-radius: 100px;
  background-color: var(--tertiary-color-solid);
}

/* ***** Services ***** */

#services img {
  width: 70%;
}

.img-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: var(--md-spacing);
  border-radius: 50%;
}
#services img {
  border-radius: 15px 0 50px 0;
}

#services-container article {
  margin-bottom: var(--lg-spacing);
}

/* ROOFING  */

#pvc {
  background-image: url(../ASSETS/img/roofs/PVC-Roof-Featured-Image.webp);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
}
#tpo {
  background-image: url(../ASSETS/img/roofs/TPO.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
}

#epdm {
  background-image: url(../ASSETS/img/roofs/Epdm.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

#tile {
  background-image: url(../ASSETS/img/roofs/TileRoof.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
}
#asphaltic {
  background-image: url(../ASSETS/img/roofs/asphaltic.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
}

#metal {
  background-image: url(../ASSETS/img/roofs/metalRoof.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/* ***** Footer ***** */

footer {
  background-color: rgb(27, 26, 26);
  color: white !important;
}

form input,
select {
  background-color: rgb(223, 220, 220) !important;
}

footer input:hover {
  -webkit-box-shadow: 0 0 5px 1px var(--tertiary-color-semisolid);
  box-shadow: 0 0 5px 1px var(--tertiary-color-semisolid);
}

footer select:hover {
  -webkit-box-shadow: 0 0 5px 1px var(--tertiary-color-semisolid);
  box-shadow: 0 0 5px 1px var(--tertiary-color-semisolid);
}

footer img {
  width: 22%;
}

.footer__nav-item:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: var(--tertiary-color-solid) !important;
}

footer a {
  color: antiquewhite;
}
footer strong {
  color: rgb(99, 99, 227);
}

footer small strong:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: rgb(108, 108, 255);
  text-shadow: 0 0 2px rgb(102, 102, 252);
}

#socialMedia i:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

  color: var(--tertiary-color-solid);
  text-shadow: 0 0 2px var(--tertiary-color-solid);
}

#footer_letsConnect {
  color: var(--tertiary-color-solid);
}

#footer_letsConnect:hover {
  text-shadow: 0 0 2px var(--tertiary-color-solid);
}

#Build-OPS {
  border-right: 1px solid white;
}
/* ***** Media Querys ***** */
@media (max-width: 576px) {
  #careers img {
    width: 17%;
  }
  .bg__hero-img img {
    width: 40%;
  }
  .intro {
    border-radius: 0 0 0 0 !important;
  }
  #Build-OPS {
    border-right:none;
  }
}

/* ***** Animations ***** */
.turnUp {
  transition: all ease-in-out;
  translate: rotateX(0);
  animation: turnUp 0.5s forwards;
}

@keyframes turnUp {
  0% {
    translate: rotateX(0);
  }
  100% {
    translate: rotateX(180deg);
  }
}