@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap); 
:root {
  --main-color: #333;
}
html, body{padding:0; margin:0; box-sizing:border-box}
header {background-color:#000; padding:10px 0}
.cta {display:inline-block; padding:10px 30px; color:#f7f5f2; background-color:transparent; border:5px solid red; font-size:2rem; text-transform:uppercase; letter-spacing:.3rem; margin-top:0; transition:background-color .3s ease, color .3s ease}
.cta:hover {color:#fff; background-color:red}
.logo {max-width:150px; height:auto; margin-bottom:0; display:block; margin-left:auto; margin-right:auto; background-color:#000; padding:10px}

@media screen and (max-width:768px) {
.logo {max-width:120px}
}

@media screen and (max-width:480px) {
.logo {max-width:100px}
}

html {font-size:10px; font-family:Montserrat, sans-serif}
a {text-decoration:none}
.container {min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center}
img {height:100%; width:100%; object-fit:cover}
p {color:#bfa7a7; font-size:1.8rem; line-height:2.5rem; font-weight:300; letter-spacing:.05rem; margin:5px 70px 10px}
.brand h1 {font-size:3rem; text-transform:uppercase; color:#ed0a0a}
#hero {background-color:#000; background-size:cover; background-position:top center; position:relative; z-index:1; padding:3rem 1rem}
#hero::after {content:''; position:absolute; left:0; top:0; height:100%; width:100%; background-color:#000; opacity:.6; z-index:-1}
#hero .hero {max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; height:100vh; padding-top:10px}
#hero h1 {display:block; width:fit-content; font-size:4rem; position:relative; color:transparent; animation:text_reveal .15s ease forwards; animation-delay:1s; margin-bottom:1.5rem}

@media (max-width:768px) {
#hero h1 {font-size:2.5rem; margin-bottom:1rem}
}

#hero h1:nth-child(1) {animation-delay:1s}
#hero h1:nth-child(2) {animation-delay:2s}
#hero h1:nth-child(3) {animation:text_reveal_name .15s ease forwards; animation-delay:3s}
#hero h1 span {position:absolute; top:0; left:0; height:100%; width:0; background-color:red; animation:text_reveal_box 1s ease; animation-delay:.5s}
#hero h1:nth-child(1) span {animation-delay:.5s}
#hero h1:nth-child(2) span {animation-delay:1.5s}
#hero h1:nth-child(3) span {animation-delay:2.5s}
#hero .cta {display:inline-block; padding:10px 30px; color:#f7f5f2; background-color:transparent; border:5px solid red; font-size:2rem; text-transform:uppercase; letter-spacing:.3rem; margin-top:30px; transition:background-color .3s ease, color .3s ease}
#hero .cta:hover {color:#fff; background-color:red}
.image-container {display:flex; justify-content:space-between; width:80%; margin-top:2rem}
.image-left, .image-right {width:48%; height:auto; object-fit:cover; border-radius:10px}

@media (max-width:768px) {
.image-container {flex-direction:column; width:90%; gap:10px; margin-left:28%}
.image-left, .image-right {width:70%; margin-bottom:1rem}
}

#map-reviews {background-color:#0e0000; padding:4rem 1.5rem; text-align:center}
.map-review-container {max-width:900px; margin:0 auto}
.map-review-container h1.section-title {font-size:2.8rem; font-weight:700; color:#fff; margin:0 0 2rem; text-transform:uppercase; letter-spacing:.15rem}
.map-container {border-radius:20px; overflow:hidden; box-shadow:0 8px 15px #00000040; margin-top:2rem; background-color:#fff}
.map-container iframe {width:100%; height:320px; border:none}

@media screen and (max-width:768px) {
.map-review-container h1.section-title {font-size:2.2rem}
.map-container iframe {height:250px}
}

#services .services {background-color:#113c45; display:flex; flex-direction:column; text-align:center; width:100%; padding:100px 0}
#services .section-title {font-size:5rem; font-weight:400; color:#fff; margin-bottom:10px; margin-top:15px; text-transform:uppercase; letter-spacing:.2rem; text-align:center}
#services .section-title span {color:#dc143c}
#services .section-bottom {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:50px}
#services .service-item {flex-basis:80%; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; padding:30px; border-radius:10px; background-color:#29323c; background-size:cover; margin:10px 5%; position:relative; z-index:1; overflow:hidden}
#services .service-item::after {content:''; position:absolute; left:0; top:0; height:100%; width:100%; background-image:linear-gradient(60deg, #29323c, #4a5f63 100%); opacity:.8; z-index:-1}
#services .service-item h2 {font-size:2rem; color:#fff; margin-bottom:10px; text-transform:uppercase}
#services .service-item p {color:#bfa7a7; text-align:left; margin-left:10px; margin-right:10px; font-size:1.6rem; line-height:2rem; letter-spacing:.05rem; margin-bottom:20px}

@media screen and (max-width:768px) {
#services .section-title {font-size:3.8rem}
#services .service-item p {font-size:1.4rem; line-height:1.8rem; margin-left:20px; margin-right:20px; text-align:justify}
}

@media screen and (max-width:480px) {
#services .section-title {font-size:4.5rem}
#services .service-item p {font-size:1.3rem; line-height:1.6rem; margin-left:10px; margin-right:10px; text-align:justify}
}

#about .about {background-color:#1a1a1a; display:flex; flex-wrap:wrap; justify-content:center; padding:80px 20px}
#about .col-left {flex:1 1 100%; max-width:350px; height:auto; display:flex; justify-content:center; margin-bottom:30px}
#about .about-img img {width:100%; height:auto; border-radius:10px; box-shadow:0 10px 30px #0006}
#about .col-right {flex:2 1 60%; max-width:800px; padding:20px; color:#f1f1f1; text-align:left}
#about .section-title {font-size:3rem; font-weight:700; color:#f4f4f4; margin-bottom:40px; text-transform:uppercase; letter-spacing:.1rem; text-align:center; text-shadow:2px 2px 10px #0000004d}
#about .col-right h1 {font-size:3rem; font-weight:900; color:#fff; text-transform:uppercase; margin-bottom:10px; letter-spacing:.05rem; text-shadow:2px 2px 15px #00000080}
#about .col-right h2 {font-size:1.8rem; font-weight:500; letter-spacing:.2rem; margin-bottom:20px; color:#e53e3e; text-transform:uppercase; text-shadow:1px 1px 8px #0006}
#about .col-right p {font-size:1.2rem; line-height:1.8; margin-bottom:30px; text-align:justify; color:#e4e4e4; letter-spacing:.05rem; width:100%; margin-left:0; margin-right:0}
#about .col-right p::first-letter {font-size:3rem; font-weight:800; color:#e53e3e}

@media (max-width:768px) {
#about .about {padding:60px 20px}
#about .col-left, #about .col-right {flex:1 1 100%; text-align:center}
#about .col-right h1 {font-size:2.5rem}
#about .col-right h2 {font-size:1.6rem}
#about .col-right p {font-size:1.1rem; width:100%; margin:0; padding:0 20px}
}

@media (max-width:480px) {
#about .section-title {font-size:2.2rem}
#about .col-left {max-width:250px}
#about .col-right h1 {font-size:2rem}
#about .col-right p {font-size:1.5rem; width:100%; padding:0 10px}
}

#contact .contact {background-color:#000; display:flex; flex-direction:column; text-align:center; width:100%; padding:6rem 0; margin-top:0}
#contact .section-title {font-size:3rem; font-weight:600; color:#fff; margin-bottom:2rem; text-transform:uppercase; letter-spacing:.2rem}
#contact .contact-items {width:60%; margin:0 auto}
#contact .contact-item {width:100%; max-width:600px; padding:2rem; text-align:center; border-radius:10px; margin:1.5rem auto; display:flex; justify-content:center; align-items:center; flex-direction:column; box-shadow:0 0 18px 0 #f5f5f5; transition:box-shadow .3s ease}
#contact .contact-item:hover {box-shadow:0 0 5px 0 #fff}
#contact .icon {width:70px; margin:0 auto 1rem}
#contact .contact-info h1 {font-size:2.5rem; font-weight:500; margin-bottom:.5rem; color:#fff}
#contact .contact-info h2 {font-size:1.3rem; line-height:2rem; font-weight:500; color:#fff; margin:.5rem 0}
#footer {background-image:linear-gradient(60deg, #29323c, #485563 100%)}
#footer .footer {min-height:200px; flex-direction:column; padding-top:50px; padding-bottom:10px}
#footer .social-icon {display:flex; margin-bottom:30px; margin-top:20px}
#footer .social-item {height:50px; width:50px; margin:0 5px}
#footer .social-item img {filter:grayscale(1); transition:.3s ease filter}
#footer .social-item:hover img {filter:grayscale(0)}
#footer p1 {color:#fff; font-size:1.3rem}
#footer p2 {color:red; font-size:1rem}
#footer {background-color:#333; color:#fff; padding:20px 0; text-align:center}
#footer p {font-size:14px; margin:5px 0; color:#ccc}
#footer p:first-child {font-weight:700}
#footer p:last-child {font-style:italic}

@media (max-width:600px) {
#footer p {font-size:12px}
#footer {padding:15px 0}
}

@keyframes text_reveal_box {
50% {width:100%; left:0}
100% {width:0; left:100%}
}

@keyframes text_reveal {
100% {color:#fff}
}

@keyframes text_reveal_name {
100% {color:#303f42; font-weight:900}
}