@import url('https://fonts.googleapis.com/css2?family=Baskervville&family=Montserrat:wght@300;700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  letter-spacing: -0.4px;
}

h1, h2, h3, h4 {
  font-family: 'Baskervville', serif;
}

.carpet-top-nav, .tile-top-nav, .hardwood-top-nav {
  background-position: bottom center;
  background-size: cover;
}

.carpet-top-nav {
  background-image: url(images/carpet-bg.jpg);
}

.tile-top-nav {
  background-image: url(images/tile-bg.jpg);
}

.hardwood-top-nav {
  background-image: url(images/hardwood-bg.jpg);
}

.product-grid {
  grid-template-columns: repeat(5, 1fr);
}

.product-grid .grid-logos {
  grid-row: 1;
  grid-column: 1 / span 3;
}

.product-grid .grid-logos div {
  background-size: 75%;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
}

.product-grid .grid-logos div:nth-child(1) {
  background-image: url(images/logos/logo_centura.png);
}

.product-grid .grid-logos div:nth-child(2) {
  background-image: url(images/logos/logo_goodfellow.png);
}

.product-grid .grid-logos div:nth-child(3) {
  background-image: url(images/logos/logo_prosol.png);
}

.product-grid .grid-logos div:nth-child(4) {
  background-image: url(images/logos/logo_anatolia.svg);
}

.product-grid .grid-logos div:nth-child(5) {
  background-image: url(images/logos/logo_ceratec.svg);
}

.product-grid .grid-logos div:nth-child(6) {
  background-image: url(images/logos/logo_sarana.jpg);
}

.product-grid .grid-logos div:nth-child(7) {
  background-image: url(images/logos/logo_ciot.png);
}

.product-grid .grid-logos div:nth-child(8) {
  background-image: url(images/logos/logo_urban_zebra.png);
}

.product-grid .grid-logos div:nth-child(9) {
  background-image: url(images/logos/logo_mohawk.svg);
}

.product-grid .grid-logos div:nth-child(10) {
  background-image: url(images/logos/logo_shaw_floors.svg);
}

.product-grid .grid-logos div:nth-child(11) {
  background-image: url(images/logos/logo_grandeur.png);
}

.product-grid .grid-logos div:nth-child(12) {
  background-image: url(images/logos/logo_simba.png);
}

.product-grid .grid-logos div:nth-child(13) {
  background-image: url(images/logos/logo_shnier.svg);
}

.product-grid .grid-logos div:nth-child(14) {
  background-image: url(images/logos/logo_woden.webp);
}

.product-grid .grid-logos div:nth-child(15) {
  background-image: url(images/logos/logo_canadianstandard.png);
}

.product-grid .grid-logos div:nth-child(16) {
  background-image: url(images/logos/logo_fuzion.png);
}

.product-grid .title-description {
  grid-column: 4 / span 2;
  grid-row: 1 / span 2;
}

.product-grid .title-description p {
  margin-bottom: 10px;
}

.gallery-grid {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.gallery-grid .title-description {
  grid-column: 1 / span 3;
}

.gallery-grid .img-1 {
  background-image: url(images/gallery-img-4.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 90% 50%;
  grid-row: 1 / span 3;
  grid-column: 4;
}

.gallery-grid .img-2 {
  background-image: url(images/gallery-img-6.jpg);
  background-size: 150%;
  background-repeat: no-repeat;
  background-position: center center;
  grid-row: 1;
  grid-column: 5;
}

.gallery-grid .img-3 {
  background-image: url(images/gallery-img-8.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 12% 52%;
  grid-row: 2;
  grid-column: 1 / span 2;
}

.gallery-grid .img-4 {
  background-image: url(images/gallery-img-5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  grid-row: 2;
  grid-column: 3;
  aspect-ratio: 1 / 1;
}

.gallery-grid .img-5 {
  background-image: url(images/gallery-img-7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 43%;
  grid-row: 2;
  grid-column: 5;
}

.gallery-grid .img-6 {
  background-image: url(images/gallery-img-2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  grid-row: 3;
  grid-column: 1;
}

.gallery-grid .img-7 {
  background-image: url(images/gallery-img-3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  grid-row: 3;
  grid-column: 2 / span 2;
}

.gallery-grid .img-8 {
  background-image: url(images/gallery-img-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 80% 70%;
  grid-row: 3;
  grid-column: 5;
}

.gallery-grid .images:hover {
  zoom: 2;
}
.showroom-grid {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.showroom-grid .img-1, .showroom-grid .img-2, .showroom-grid .img-3 {
  background-image: url(images/office-bg.jpg);

}

.showroom-grid .title-description {
  grid-row: 1 / span 2;
  grid-column: 4 / span 2;
}

.showroom-grid .img-1 {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

.showroom-grid .img-2 {
  grid-row: 1;
  grid-column: 3;
  aspect-ratio: 1 / 1;
  background-position-x: 85.6666%;
}

.showroom-grid .img-3 {
  grid-row: 2;
  grid-column: 3;
  background-position: 86.66666% 88.36666%;
}

.showroom-grid ul li, .contact-grid ul li {
  width: 100%;
}

.showroom-grid ul span, .contact-grid ul span {
  float: right;
}

.contact-grid {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
}

.contact-grid .title-description {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: grid;
  place-items: start;
}

.contact-grid .location {
  grid-column: 3 / span 3;
  grid-row: 1;
  background-image: url(images/location.jpg);
  background-size: 200%;
  background-position: center center;
  position: relative;
}

.contact-grid .location:after {
  content: '';
  height: 57px;
  width: 41px;
  position: absolute;
  top: calc(50% - 57px);
  left: calc(50% - 28.5px);
  display: block;
  background-image: url(images/pin.svg);
  background-repeat: no-repeat;
}

.contact-grid .call-to-action {
  place-self: end;
  justify-self: start;
  margin-top: 100px;
}

@media screen and (max-width: 1080px) {
  .tile-container { 
    height: 70vh !important;
  }
}

@media screen and (max-width: 860px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .from-black {
    padding-bottom: 0px !important;
  }

  .main-nav {
    flex-direction: column !important;
    padding-right: 2.5rem !important;
  }

  .main-nav .logo {
    margin-right: 0;
  }

  .main-nav nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
  }

  .main-nav .nav-link {
    margin-right: 5px !important;
    margin-left: 5px !important;
    grid-row: 1;
    text-align: center;
  }

  .main-nav .nav-link:nth-child(1) {
    grid-column: 1;
  }

  .main-nav .nav-link:nth-child(2) {
    grid-column: 2;
  }

  .main-nav .nav-link:nth-child(3) {
    grid-column: 3;
  }

  .main-nav .nav-link:nth-child(4) {
    grid-column: 4;
  }
  
  .main-nav .social-nav {
    grid-row: 2;
    grid-column: 1 / span 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    margin-right: auto;
    margin-top: 10px;
    grid-column-gap: 10px;
  }

  .main-nav .social-nav a {
    text-align: center;
    margin-right: 0 !important;
  }

  .tile-container { 
    height: auto !important;
  }

  .tile-container .grid-cols-3 {
    grid-template-columns: auto !important;
  } 

  .tile-container .grid-cols-3 .tile-top-nav {
    padding-top: 250px !important;
  } 

  .product-grid .title-description {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .product-grid .grid-logos {
    grid-column: 1 / span 5;
    grid-row: 2;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
  }

  .gallery-grid .title-description {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .gallery-grid .img-1, .gallery-grid .img-2, .gallery-grid .img-3, .gallery-grid .img-4, .gallery-grid .img-5, .gallery-grid .img-6, .gallery-grid .img-7, .gallery-grid .img-8 {
    background-position: center center;
    background-size: cover;
    aspect-ratio: 1/1;
  }

  .gallery-grid .img-1 {
    grid-column: 1;
    grid-row: 2;
  }

  .gallery-grid .img-2 {
    grid-column: 2;
    grid-row: 2;
  }

  .gallery-grid .img-3 {
    grid-column: 3;
    grid-row: 2;
  }

  .gallery-grid .img-4 {
    grid-column: 4;
    grid-row: 2;
  }

  .gallery-grid .img-5 {
    grid-column: 1;
    grid-row: 3;
  }

  .gallery-grid .img-6 {
    grid-column: 2;
    grid-row: 3;
  }

  .gallery-grid .img-7 {
    grid-column: 3;
    grid-row: 3;
  }

  .gallery-grid .img-8 {
    grid-column: 4;
    grid-row: 3;
  }

  .showroom-grid {
    margin-bottom: 0 !important;
    padding-bottom: 5rem;
    grid-template-rows: 200px auto;
  }

  .showroom-grid .img-2, .showroom-grid .img-3 {
    display: none;
  }

  .showroom-grid .img-1 {
    background-size: cover;
    background-position: 50% 30%;
    grid-row: 1;
    grid-column: 1 / span 5;
  }

  .showroom-grid .title-description {
    grid-row: 2;
    grid-column: 1 / span 5;
  }

  .contact-grid {
    grid-template-rows: 200px auto;
  }

  .contact-grid .location {
    grid-row: 1;
    grid-column: 1 / span 5;
  }

  .contact-grid .title-description {
    grid-row: 2;
    grid-column: 1 / span 5;
  }

  .contact-grid .call-to-action {
    margin-top: 0;
  }
}