@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  background-color: #DEE1E6;
}

img {
  max-width: 100%;
}

h2 {
  font-size: 36px;
  color: #EA4335;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  h2 {
    font-size: 60px;
  }
}

h3 {
  font-size: 30px;
  color: #A91E50;
  margin: 0;
}
@media (min-width: 768px) {
  h3 {
    font-size: 40px;
  }
}

blockquote {
  font-size: 1.4em;
  margin: 15px auto;
  font-style: italic;
  color: #555555;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid #A91E50;
  line-height: 1.6;
  position: relative;
  background: #DEE1E6;
}
blockquote::before {
  content: "“";
  color: #A91E50;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

ol li, ul li {
  opacity: 1;
  visibility: visible;
}

header#site-header {
  background: #090942;
  padding: 10px 15px;
}
header#site-header nav {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  z-index: 10;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
header#site-header nav #brand #logo {
  border-radius: 50%;
  cursor: pointer;
}
header#site-header nav #brand #logo img {
  max-width: 150px;
}
@media (min-width: 768px) {
  header#site-header nav #brand #logo img {
    max-width: 200px;
  }
}
header#site-header nav #menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
ul li {
  list-style: none;
}

li:last-child a {
  margin-right: 0;
}
li a {
  font-family: "Roboto", sans-serif;
  display: block;
  color: #090942;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 700;
  -webkit-transition: color 0.4s ease-in;
  transition: color 0.4s ease-in;
}
li a:hover {
  color: #00ED64;
}
@media (min-width: 768px) {
  li a {
    color: #FFFFFF;
    margin-right: 30px;
  }
}

#menu-toggle {
  width: 55px;
  height: 55px;
  background: #EA4335;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}
#menu-toggle:hover .bar {
  width: 25px;
}

#menu-toggle.closeMenu .bar {
  width: 25px;
}
#menu-toggle.closeMenu .bar:first-child {
  -webkit-transform: translateY(7px) rotate(45deg);
          transform: translateY(7px) rotate(45deg);
}
#menu-toggle.closeMenu .bar:nth-child(2) {
  -webkit-transform: scale(0);
          transform: scale(0);
}
#menu-toggle.closeMenu .bar:last-child {
  -webkit-transform: translateY(-7px) rotate(-45deg);
          transform: translateY(-7px) rotate(-45deg);
}

.bar {
  width: 25px;
  height: 2px;
  background: #fff;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.bar:nth-child(2) {
  width: 20px;
  margin: 5px 0;
}
.bar:last-child {
  width: 15px;
}

@media screen and (max-width: 767px) {
  #menu-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  ul {
    display: inline-block;
    width: 100vw;
    height: 0;
    position: absolute;
    top: 75px;
    background: hsla(0, 0%, 100%, 0.75);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    -webkit-box-shadow: 0 5px 30px -4px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 30px -4px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  ul.menu-links.showMenu {
    height: 100dvh;
    padding: 30px 0 0;
  }
  ul.menu-links.showMenu li {
    padding: 15px 0;
    opacity: 1;
    visibility: visible;
  }
  ul.menu-links li {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
}
.banner {
  background-color: #3D3A45;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.45))), url("./img/roofing-banner.jpg") no-repeat center;
  background: linear-gradient(rgba(0, 0, 0, 0.45)), url("./img/roofing-banner.jpg") no-repeat center;
  background-size: cover;
  padding: 90px 15px;
}
.banner .container {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}
.banner .container h1 {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  font-size: 40px;
  margin: 10px 0;
  font-weight: 700;
}
@media (min-width: 768px) {
  .banner .container h1 {
    font-size: 90px;
  }
}
.banner .container p {
  color: #FFFFFF;
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.2em;
  margin-bottom: 15px;
}
.banner .container button {
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 1.2px;
  margin: 15px auto;
  font-family: "Young Serif", serif;
  color: #ffffff;
  cursor: pointer;
  border-radius: 100px;
  padding: 15px 20px;
  border: 0px solid #000;
  -webkit-animation: btnpulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
          animation: btnpulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
}
@-webkit-keyframes btnpulse {
  0% {
    -webkit-box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 0px 0px 0px rgb(255, 255, 255);
            box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 0px 0px 0px rgb(255, 255, 255);
  }
  100% {
    -webkit-box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255, 0.2), 0px 0px 0px 10px rgba(255, 255, 255, 0);
            box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255, 0.2), 0px 0px 0px 10px rgba(255, 255, 255, 0);
  }
}
@keyframes btnpulse {
  0% {
    -webkit-box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 0px 0px 0px rgb(255, 255, 255);
            box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4), 0px 0px 0px 0px rgb(255, 255, 255);
  }
  100% {
    -webkit-box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255, 0.2), 0px 0px 0px 10px rgba(255, 255, 255, 0);
            box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255, 0.2), 0px 0px 0px 10px rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes colorShift {
  0%, 100% {
    background: #4285F4;
  }
  33% {
    background: #EA4335;
  }
  66% {
    background: #FBBC05;
  }
}
@keyframes colorShift {
  0%, 100% {
    background: #4285F4;
  }
  33% {
    background: #EA4335;
  }
  66% {
    background: #FBBC05;
  }
}

.backtotop {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, background-color 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s, background-color 0.3s 0s;
  bottom: 20px;
  right: 10px;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  background-color: #e1433c;
  height: 40px;
  width: 40px;
  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;
  border-radius: 3px;
}

.backtotop img {
  width: 50%;
  height: auto;
}

.backtotop.active {
  opacity: 1;
  visibility: visible;
}

.backtotop:hover {
  background-color: #FE701B;
}

#services {
  background-color: #FFFFFF;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.65))), url("./img/abstract-shape.svg") no-repeat center;
  background: linear-gradient(rgba(255, 255, 255, 0.65)), url("./img/abstract-shape.svg") no-repeat center;
  background-size: cover;
  padding: 90px 15px;
}
#services h2 {
  text-align: center;
}
#services .container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 60px 90px;
}
@media (min-width: 768px) {
  #services .container {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
}
#services .container .item {
  background: hsla(0, 0%, 98%, 0.5);
  -webkit-box-shadow: 0 20px 100px rgba(0, 0, 0, 0.1);
          box-shadow: 0 20px 100px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 32px;
  padding: 48px;
}
#services .container .item img {
  border-radius: 7px;
  border: 1px solid #6E11F4;
  padding: 0.25rem;
}

#asphalt-shingles {
  padding: 90px 15px;
  background-color: #FFFFFF;
}
#asphalt-shingles h2 {
  max-width: 1200px;
  margin: 0 auto 30px;
}
#asphalt-shingles .container {
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  #asphalt-shingles .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
#asphalt-shingles .container .half {
  -ms-flex-preferred-size: 45%;
      flex-basis: 45%;
}
#asphalt-shingles .container .half img {
  border: 1px solid #6C10F4;
  padding: 0.25rem;
  border-radius: 7px;
}

#metal-roofing {
  padding: 90px 15px;
  background-image: -webkit-gradient(linear, right top, left top, from(#f1fcfb), color-stop(60%, #f0f9fd), to(#faf4fd));
  background-image: linear-gradient(270deg, #f1fcfb, #f0f9fd 60%, #faf4fd);
}
#metal-roofing .container {
  max-width: 1200px;
  margin: 0 auto;
}
#metal-roofing .container .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

#contact {
  padding: 90px 15px;
  background-color: #0a0d12;
  background-image: url(./img/criss-cross.png);
}
@media (min-width: 768px) {
  #contact .contact-wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  #contact .contact-wrapper .contact-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
#contact .contact-wrapper .contact-row .greeting {
  color: #000000;
  margin-bottom: 60px;
}
@media (min-width: 768px) {
  #contact .contact-wrapper .contact-row .greeting {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
}
#contact .contact-wrapper .contact-row .contact-method {
  background-image: -webkit-gradient(linear, right top, left top, from(#f1fcfb), color-stop(60%, #f0f9fd), to(#faf4fd));
  background-image: linear-gradient(270deg, #f1fcfb, #f0f9fd 60%, #faf4fd);
  padding: 20px 10px;
  border: 1px solid #5ecbff;
  border-radius: 4px;
}
@media (min-width: 768px) {
  #contact .contact-wrapper .contact-row .contact-method {
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
  }
}
#contact .contact-wrapper .contact-row .contact-method h4, #contact .contact-wrapper .contact-row .contact-method p, #contact .contact-wrapper .contact-row .contact-method a {
  color: #222222;
}

footer.footer {
  background-color: #193549;
  padding: 90px 0 0;
}
footer.footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  footer.footer .footer-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
footer.footer .footer-container p, footer.footer .footer-container a, footer.footer .footer-container h4 {
  color: #FFFFFF;
}
footer.footer .footer-container h4 {
  margin: 0 0 10px;
}
footer.footer .footer-container p, footer.footer .footer-container a {
  font-size: 16px;
}
footer.footer .footer-container img {
  max-width: 200px;
}
footer.footer .footer-container img.visiting-card {
  max-width: 100%;
}
footer.footer .footer-container .footer-col {
  margin: 0 15px 60px;
  padding: 30px;
  border-radius: 4px;
  background: #15232D;
  -webkit-box-shadow: 2px 2px 2px #15232D;
          box-shadow: 2px 2px 2px #15232D;
  -webkit-box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25);
          box-shadow: inset 2px 2px 2px hsla(0, 0%, 100%, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
  footer.footer .footer-container .footer-col {
    -ms-flex-preferred-size: 32%;
        flex-basis: 32%;
  }
}
footer.footer .footer-container .footer-col ul li {
  list-style: none;
}
footer.footer .bottombar {
  padding: 20px 15px;
  background-color: #070e14;
  text-align: center;
  font-style: italic;
  color: #FFFFFF;
  font-size: 0.9em;
  font-weight: 300;
}/*# sourceMappingURL=style.css.map */