@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Petrona:wght@100;200;300;400;500&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css");
:root {
    --offWhite: #f5f4f0;
        --gold: #99753f;
    --copper: #875422;
    --lightGrey: #dadbe0;
    --grey: #828386;
    --mediumGrey: #4c4d4f;
    --charcoal: #232324;
}
body {
    background-color: #ffffff;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.825rem; 
    text-transform: uppercase; 
    font-weight: 700;
    color: var(--copper);
    line-height: 110%;

}
@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem; 
    } 
}
h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem; 
    text-transform: uppercase; 
    font-weight: 700;
    color: var(--copper);
}
@media (min-width: 768px) {
    h2 {
        font-size: 2rem; 
    }  
}
h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem; 
    text-transform: uppercase; 
    font-weight: 700;
    color: var(--copper);
}
h4 {
    font-family: 'Lato', sans-serif;
    font-size: 1rem; 
    text-transform: uppercase; 
    font-weight: 700;
}
header {
    padding-top: 10px;
    padding-bottom: 10px;
    position: scroll;
    top: 0px;
    background-color: #ffffff;
}
@media (min-width: 768px) {
    header {
        position: fixed;
    }   
}
a:link.nav-link, a:visited.nav-link {
      font-family: 'Montserrat', sans-serif;
  font-size: 1rem; 
  text-transform: uppercase; 
  font-weight: 500;
color: var(--mediumGrey);
}
a:hover.nav-link {
color: var(--lightGrey);
}
header .phone {
    padding-top: 10px;
}
header .phone a:link, header .phone a:visited {
          font-family: 'Montserrat', sans-serif;
  font-size: 1.125rem; 
  font-weight: 700;
color: var(--copper);
text-decoration: none;
}
header .phone a:hover {
    color: var(--lightGrey);
}
.navbar-toggler {
    margin-top: -70px;
}
.hero {
    background-image: url(../images/backHero.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    padding: 0px;
    color: #ffffff;
    margin-top: 0px;
}
@media (min-width: 768px) {
    .hero {
        background-attachment: fixed;
        margin-top: 76px;
    }  
}
.hero .overlay {
    background-color: rgba(20, 20, 20, .35);
        padding-top: 75px;
    padding-bottom: 50px;
}
@media (min-width: 768px) {
    .hero .overlay {
            padding-top: 175px;
        padding-bottom: 175px;
    }   
}
.hero p:nth-child(1) {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;  
  text-transform: uppercase;
  font-weight: 700;
  line-height: 90%;
}
@media (min-width: 768px) {
    .hero p:nth-child(1) {
        font-size: 3rem;  
      }  
}
.hero p:nth-child(2) {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;  
  text-transform: uppercase;
  font-weight: 400;
  line-height: 90%;
}
@media (min-width: 768px) {
    .hero p:nth-child(2) {
        font-size: 2.5rem;
      }  
}
.hero .btn {
background-color: transparent;
border-color: #ffffff;
border-style: solid;
color: #ffffff;
border-radius: 0px;
 font-family: 'Lato', sans-serif;
 text-transform: uppercase;
 font-weight: 500;
 margin-top: 50px;
 -webkit-transition: background .375s linear;
-moz-transition: background .375s linear;
-ms-transition: background .375s linear;
-o-transition: background .375s linear;
transition: background .375s linear;
}
.hero .btn:hover {
    background-color: #ffffff;
    color: var(--charcoal);
}
.content {
    padding-top: 90px;
    padding-bottom: 90px;
    padding-left: 25px;
    padding-right: 25px;
}
.content p.lead {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--gold);
    line-height: 110%;
}
@media (min-width: 768px) {
    .content p.lead {
        font-size: 1.75rem;
    }  
}
.content p, .leadin p, .content ul {
    font-family: 'Lato', sans-serif;
    font-size: .95rem;
    font-weight: 300;
    color: var(--grey);
}
@media (min-width: 768px) {
    .content p, .leadin p, .content ul {
        font-size: 1.25rem;
    } 
}
.leadin {
    background-color: var(--offWhite);
}
.leadin .leadinImage {
background-image: url(../images/backLeadin.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 250px;
}
@media (min-width: 768px) {
    .leadin .leadinImage {
        height: initial;
        } 
}
.leadin .leadinText {
   padding-top: 75px; 
   padding-right: 25px;
   padding-left: 25px;
   padding-bottom: 75px; 
}
@media (min-width: 768px) {
    .leadin .leadinText {
        padding-right: 50px;
        padding-left: 50px;
     } 
}
@media (min-width: 992px) {
    .leadin .leadinText {
        padding-right: 100px;
        padding-left: 100px;
     } 
}
@media (min-width: 1200px) {
    .leadin .leadinText {
        padding-right: 150px;
        padding-left: 150px;
     } 
}
.leadin .btn, .antietch .btn, .interior .btn {
background-color: var(--copper);
color: var(--offWhite);
border-radius: 0px;
 font-family: 'Lato', sans-serif;
 text-transform: uppercase;
 font-weight: 500;
 margin-top: 20px;
 -webkit-transition: background .375s linear;
-moz-transition: background .375s linear;
-ms-transition: background .375s linear;
-o-transition: background .375s linear;
transition: background .375s linear;
}
.leadin .btn:hover, .antietch .btn:hover, .interior .btn:hover {
    background-color: var(--gold);
}
.antietch {
    background-image: url(../images/backAntietch.webp);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 75px;
    padding-bottom: 75px;
}
@media (min-width:768px) and (max-width:992px) {
	.antietch {
		background-position:right;
	}
}
.antietch .textBox {
  padding: 20px;
  font-family: 'Lato', sans-serif;
  font-size: .975rem;
  font-weight: 300;
  color: var(--grey);
  background-color: rgba(255, 255, 255, .35);
}
@media (min-width: 768px) {
    .antietch .textBox {
        padding: 50px;
        font-size: 1.25rem;
      }  
}
.testimonial {
    padding-top: 50px;
    padding-bottom: 45px;
}
.testimonial p:nth-child(1) {
    font-family: 'Petrona', serif;
    font-size: 15rem;
    font-weight: 300;
    color: var(--copper);
    padding: 0px;
    display: block;
    margin-top: -50px;
}
.testimonial p:nth-child(2) {
    font-family: 'Petrona', serif;
    font-size: 1.25rem;
    font-weight: 100;
    font-style: italic;
    line-height: 120%;
    color: var(--grey);
    margin-top: -200px;
}
@media (min-width: 768px) {
    .testimonial p:nth-child(2) {
        font-size: 2rem;
    } 
}
.testimonial p:nth-child(3) {
    font-family: 'Lato', sans-serif;
    font-size: .85rem;
    font-weight: 500;
    color: var(--grey);
}
@media (min-width: 768px) {
    .testimonial p:nth-child(3) {
        font-size: .95rem;
    }
}
footer {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: var(--charcoal);
    color: var(--lightGrey);
}
footer .row {
    margin-left: 90px;
}
footer .col-md-4 {
    margin-top: 15px;
    margin-bottom: 15px;
}
footer p, footer ul {
    font-family: 'Lato', sans-serif;
    font-size: .95rem;
    font-weight: 400;
}
footer a:link, footer a:visited {
    color: var(--lightGrey);
    text-decoration: none;
}
footer a:hover {
    color: #ffffff;
}
footer .bi-facebook, footer .bi-instagram {
    font-size: 1.5rem;
    margin-right: 25px;
}

.line {
    display: block;
    height: 3px;
    width: 125px;
    background-color: var(--lightGrey);
    margin-top: 25px;
    margin-bottom: 25px;
}
hr {
    margin-top: 25px;
    margin-bottom: 25px;
}
.titleBar {
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0px;
    padding: 0px;
}
@media (min-width: 768px) {
    .titleBar {
        margin-top: 125px;
    } 
}
@media (min-width: 992px) {
    .titleBar {
        margin-top: 75px;
    } 
}
.whatWeDo {
    background-image: url(../images/backWhat.webp);
}
.gallery {
    background-image: url(../images/backGallery.webp);
}
.contact {
    background-image: url(../images/backContact.webp);
}
.antiEtch {
    background-image: url(../images/backAntietch.webp);
}
.antiEtch img {
    filter: brightness(3) contrast(3) grayscale(1) saturate(3);
}
.titleBar .overlay {
    background-color: rgba(20, 20, 20, .35);
        padding-top: 35px;
    padding-bottom: 35px;
}
@media (min-width: 768px) {
    .titleBar .overlay {
            padding-top: 75px;
        padding-bottom: 75px;
    }   
}

.titleBar p {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;  
    text-transform: uppercase;
    font-weight: 700;
    line-height: 90%;
    color: #ffffff;
  }
  @media (min-width: 768px) {
    .titleBar p {
          font-size: 5rem;  
        }  
  }
  /* photo gallery styling */
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
  }
  
  .image-gallery > li {
    height: 300px;
    position: relative;
  }
  
  .image-gallery li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
  .image-gallery > li {
    flex: 1 1 auto;
    /* ... */
  }
  .image-gallery::after {
    content: "";
    flex-grow: 999;
  }
  /* bfore and after gallery */
  .beforeAfter {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .beforeAfter .row {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .beforeAfter .before:after {
    content: 'Before';
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--charcoal);
  }
  .beforeAfter .after:after {
    content: 'After';
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--charcoal);
  }