* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

@use 'vars' as *;
@font-face {
  font-family: "gafataregular";
  src: url("../fonts/gafata-regular-webfont.woff2") format("woff2"), url("../fonts/gafata-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
h1, h2, h3, h4, h5, p, li {
  font-family: gafataregular; }

p, li, a {
  font-family: gafataregular;
  font-weight: 300; }

a {
  text-decoration: none; }

h1.HeaderTitle {
  font-size: 3em; }

h3.HeaderSubTitle {
  font-family: gafataregular;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 0.9em; }

#comments {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em; }
  #comments p {
    line-height: 2em; }
  #comments h5 {
    background-color: #0000cc;
    padding: 4px 0 4px 4px;
    color: white;
    margin-bottom: 12px; }

button {
  background: white;
  border: none;
  padding: 0.4em 0.8em;
  color: white;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  transition: all 0.4s ease-in-out; }
  button:hover {
    background: #ccccff;
    color: white; }
  button a {
    text-decoration: none;
    font-size: 1.4em; }

button#btn-reviews {
  background: #0089ca; }
  button#btn-reviews:hover {
    background: #31bdff; }

ul li {
  list-style-type: none;
  line-height: 1.6em; }

h4.ReviewName {
  font-size: 2em;
  font-weight: 700;
  font-style: normal;
  padding: 4px 0 4px 4px;
  color: #000099; }

h2.service-icon {
  color: #fff;
  font-size: 3em; }

h3.service-title {
  font-size: 1.4em;
  font-weight: 400;
  padding-bottom: 1em; }

.fensa img, .chas img {
  width: 240px; }
.fensa p, .chas p {
  color: #006697;
  margin: 1em 0; }

.glass-options h3, .col-options h3 {
  padding-bottom: 1em;
  font-size: 1.4em; }

.Feature-Title {
  font-size: 2em;
  padding: 2em;
  text-align: center; }

.cta h3 a {
  font-family: gafataregular;
  font-weight: 700;
  font-style: normal;
  color: #80deea; }
  .cta h3 a:hover {
    color: #0089ca; }

h3.jubilee {
  color: red;
  padding-bottom: 1em; }

a.tel-call {
  color: #ffffff;
  font-family: gafataregular;
  font-weight: 700;
  font-style: normal; }

h1.call {
  font-size: 3em; }

h4.call {
  font-family: "sarah-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.8em; }

.trickle {
  color: #0089ca; }

h2.upper-case {
  text-transform: uppercase;
  font-size: 0.8em; }

h2.isobel {
  font-family: "great-vibes", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #d5d900;
  font-size: 3em; }

body {
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: contain;
  color: white; }

.container {
  display: grid;
  grid-template-column: 1fr;
  justify-content: center;
  align-items: center; }

section.cta {
  background-color: #80deea;
  display: grid;
  grid-template-columns: 100%;
  justify-content: center;
  align-items: center;
  padding: 1em;
  color: #003;
  z-index: 10;
  position: relative; }
  section.cta h2 {
    font-size: 2.4em;
    line-height: 2.4em; }
  section.cta p {
    font-size: 1em;
    line-height: 1.4em;
    padding-bottom: 2em; }

.Services {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  background: #fff;
  color: #6666ff;
  padding: 2em 2em 6em 2em;
  gap: 2em;
  width: 100%; }
  .Services .service-item {
    background: #fff;
    box-shadow: 0px 2px 6px #ccccff;
    padding: 0 2em 2em 2em;
    width: 300px;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease-in;
    -o-border-radius: 16px;
    -ms-border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px; }
  .Services .service-item.appear {
    opacity: 1; }
    .Services .service-item.appear .service-item-header {
      background-image: url("../img/service-item-bg.svg");
      background-size: 300px;
      background-repeat: no-repeat;
      background-position-y: -150px;
      width: 300px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      padding: 2em;
      color: white; }
    .Services .service-item.appear .service-item-description {
      padding-top: 2em;
      text-align: center; }
      .Services .service-item.appear .service-item-description p {
        margin-bottom: 2em;
        line-height: 1.6em; }

.Index-Review {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2em;
  padding: 1em;
  background: #fff;
  color: #0089ca; }

.IndexReviewTitle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 2em;
  grid-row-start: 2; }

.IndexReview {
  margin-bottom: 2em;
  padding: 1.2em;
  background: #fff;
  box-shadow: 0px 2px 6px #ccccff;
  transition: opacity 0.6s ease-in;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px; }
  .IndexReview p {
    color: #6666ff; }

.Section-Title {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  color: #0089ca;
  padding: 4em 2em; }
  .Section-Title h1 {
    padding: 3em 0 0 0; }
  .Section-Title h3 {
    font-size: 2em;
    line-height: 2em; }
  .Section-Title h2 {
    font-size: 2em;
    text-align: center;
    padding: 0 1em; }

.directors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  padding: 2em; }
  .directors img {
    width: 100%; }

.staff {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  padding: 2em; }

.about {
  display: flex;
  flex-direction: column;
  background: #0000cc;
  padding: 1em;
  margin: 0 2em;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px; }
  .about p {
    margin-bottom: 1em; }
    .about p a {
      color: white;
      font-weight: 700; }
      .about p a:hover {
        color: #0089ca; }
  .about h4 {
    padding-bottom: 0.4em;
    font-size: 1.2em;
    border-bottom: 3px solid #0089ca;
    margin-bottom: 1em; }

.team-card {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 6px #ccccff;
  padding-bottom: 1em;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px; }
  .team-card img {
    width: 100%;
    -o-border-top-left-radius: 16px;
    -ms-border-top-left-radius: 16px;
    -moz-border-top-left-radius: 16px;
    -webkit-border-top-left-radius: 16px;
    -o-border-top-right-radius: 16px;
    -ms-border-top-right-radius: 16px;
    -moz-border-top-right-radius: 16px;
    -webkit-border-top-right-radius: 16px; }
  .team-card h4, .team-card p {
    padding: 0 1em;
    color: #0089ca; }
  .team-card h4 {
    font-size: 1.2em;
    line-height: 2em; }

.accreditations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4em;
  margin: 0 4em; }

.terms {
  display: flex;
  flex-direction: column;
  margin: 0 3em; }
  .terms p, .terms h4 {
    color: #0089ca;
    margin: 1em 0; }
  .terms li {
    color: #0089ca;
    font-weight: 700; }

.main {
  display: grid;
  grid-template-columns: 1fr 4fr;
  padding: 2em 4em;
  gap: 2em; }

.main-products {
  position: relative;
  display: grid;
  grid-template-column: 1fr;
  justify-content: center;
  width: 100%;
  padding: 2em 4em;
  gap: 2em; }
  .main-products .product-img-container {
    display: flex;
    flex-direction: column;
    width: 80vw;
    max-width: 1200px; }
    .main-products .product-img-container .product-img {
      display: grid;
      grid-template-column: 1fr;
      gap: 1.2em;
      position: relative;
      height: calc(80vw*.75);
      max-height: 900px;
      overflow: hidden;
      z-index: -1; }
      .main-products .product-img-container .product-img .product-hero {
        nth-child(1)-position: absolute;
        nth-child(2)-position: absolute;
        nth-child(3)-position: absolute;
        nth-child(4)-position: absolute; }
      .main-products .product-img-container .product-img img.product-hero-pic {
        display: none;
        position: relative;
        top: 0px;
        width: 100%;
        transition: clip-path 0.8s ease;
        z-index: 1000; }
        .main-products .product-img-container .product-img img.product-hero-pic.active {
          display: block; }

.product-small-pics {
  margin-top: 1em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6em; }
  .product-small-pics .product-thumb {
    width: 100%;
    align-self: flex-start; }
    .product-small-pics .product-thumb:hover {
      cursor: pointer; }

.tiltandturn-small-pics {
  margin: 5em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em; }
  .tiltandturn-small-pics .product-thumb {
    width: 100%;
    align-self: flex-start; }
    .tiltandturn-small-pics .product-thumb:hover {
      cursor: pointer; }

.product-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  padding: 2em;
  background: #80deea; }

.main-specs .features {
  display: grid;
  grid-template-columns: 1fr;
  background: #003;
  padding: 2em;
  margin-top: 2em; }
  .main-specs .features p {
    line-height: 2em; }
  .main-specs .features h3 {
    line-height: 2em;
    padding-top: 1em; }
.main-specs .col-options .colours {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1em; }
.main-specs .glass-options .glass {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1em; }
.main-specs .product-desc {
  display: grid;
  grid-template-columns: 1fr;
  grid-area: product-desc;
  gap: 1em;
  padding: 2em;
  align-items: flex-start;
  color: #0089ca; }

.main-doors {
  background: #80deea;
  display: flex;
  padding: 4em; }

.product-styles {
  padding: 4em; }
  .product-styles .product-styles-details {
    display: flex;
    flex-direction: column;
    gap: 2em;
    color: #0089ca; }

.RAL-options {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #0089ca;
  padding: 4em;
  gap: 2em; }
  .RAL-options img {
    width: 300px; }
  .RAL-options .ral-text {
    display: flex;
    flex-direction: column;
    gap: 2em; }

.hardware {
  background: #003;
  padding: 4em; }
  .hardware p, .hardware h3 {
    padding: 1em 0;
    line-height: 1.4em; }
  .hardware .hardware-img {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em; }
    .hardware .hardware-img img {
      width: 100%; }

.windows-security {
  display: flex;
  flex-direction: column;
  gap: 2em;
  color: #0089ca;
  justify-content: center;
  align-items: center;
  padding: 2em 4em 4em 4em; }

.product {
  background: #80deea;
  display: grid;
  grid-template-column: 1fr;
  justify-content: center;
  align-items: center;
  gap: 2em; }
  .product .product-img {
    display: flex;
    justify-content: center; }
  .product .product-desc h2 {
    font-size: 2.4em; }
  .product .product-desc h4 {
    font-size: 1.5em;
    line-height: 1.8em; }
  .product .product-desc p {
    font-size: 1.2em;
    line-height: 1.5em; }

.product-overview {
  background: #003;
  padding: 4em; }
  .product-overview p {
    line-height: 2em; }

.product-detail {
  background: #80deea;
  padding: 4em;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .product-detail .product-detail-img {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    justify-content: center;
    align-items: center;
    margin-top: 3em; }
    .product-detail .product-detail-img img {
      width: 100px; }

.window-desc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  padding: 4em; }
  .window-desc .window-desc-detail {
    color: #0089ca; }
    .window-desc .window-desc-detail p, .window-desc .window-desc-detail h3 {
      line-height: 1.6em; }

.textured-glass {
  display: flex;
  flex-direction: column;
  background: #003;
  justify-content: center;
  align-items: center;
  width: 100%;
  align-self: center;
  padding: 4em; }
  .textured-glass img {
    width: 100%;
    max-width: 600px;
    align-self: center;
    justify-self: center;
    -o-border-radius: 16px;
    -ms-border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px; }
  .textured-glass p {
    padding: 1em 0; }

.textured-glass-pics {
  display: grid;
  grid-template-column: 1fr;
  justify-content: center;
  align-items: center;
  background: #80deea;
  padding: 4em;
  gap: 2em; }
  .textured-glass-pics .textured-glass-pic {
    background: #fff;
    -o-border-radius: 16px;
    -ms-border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    box-shadow: 0px 2px 6px #666;
    overflow: hidden; }
    .textured-glass-pics .textured-glass-pic .glass-text {
      color: #0089ca;
      padding: 1em;
      display: flex;
      justify-content: space-between; }
  .textured-glass-pics#replacement-glass {
    background: pink; }
  .textured-glass-pics#texture-level {
    background: #80deea; }
    .textured-glass-pics#texture-level .textured-glass-pic .glass-text {
      display: flex;
      justify-content: center; }

.texture-glass-detail {
  display: grid;
  grid-template-column: 1fr;
  justify-content: center;
  padding: 4em;
  gap: 2em; }

.glass-tech, .glass-privacy {
  color: #0089ca; }

.splash-back-options {
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  background: #80deea;
  padding: 4em;
  justify-content: center;
  align-items: center; }
  .splash-back-options .design-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: auto;
    overflow: auto;
    scroll-behavior: smooth; }
    .splash-back-options .design-options .designs {
      display: flex;
      width: 100%;
      gap: 1em;
      scroll-behavior: smooth; }
      .splash-back-options .design-options .designs img {
        width: 200px;
        -o-border-radius: 16px;
        -ms-border-radius: 16px;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
        border-radius: 16px; }
      .splash-back-options .design-options .designs img:nth-child(1) {
        padding-left: calc(464em - 70vw); }
  .splash-back-options .scroll-right, .splash-back-options .scroll-left {
    display: flex;
    justify-content: center; }
    .splash-back-options .scroll-right i, .splash-back-options .scroll-left i {
      transition: color 0.5s ease-in-out; }
      .splash-back-options .scroll-right i:hover, .splash-back-options .scroll-left i:hover {
        cursor: pointer;
        color: #0089ca; }

.main-upvc-doors {
  display: grid;
  grid-template-columns: 1fr; }
  .main-upvc-doors > div:nth-child(2) {
    background-color: #000099; }
  .main-upvc-doors .upvc-doors {
    display: flex;
    flex-direction: column;
    background-color: #003;
    padding: 2em;
    justify-content: center;
    align-items: center;
    gap: 1em;
    text-align: center; }
    .main-upvc-doors .upvc-doors img {
      height: 200px; }

.main-upvc-doors.main-open {
  display: grid;
  grid-tmplate-columns: 1fr; }

.product-upvc-description > div:nth-child(2) {
  background-color: #000099; }

.vista-description {
  padding: 2em;
  color: #003;
  opacity: 0;
  height: 0px;
  transform-origin: top;
  transition: 1s opacity ease-in-out;
  overflow: hidden; }
  .vista-description .vista-product-overview p {
    line-height: 1.6em; }
  .vista-description .vista-product-overview .vista-range {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 3em; }
    .vista-description .vista-product-overview .vista-range .color-title, .vista-description .vista-product-overview .vista-range .door-title {
      display: flex;
      justify-content: center;
      width: 100vw;
      background-color: #003;
      padding-block: 2em; }
      .vista-description .vista-product-overview .vista-range .color-title h2, .vista-description .vista-product-overview .vista-range .door-title h2 {
        color: #fff; }
    .vista-description .vista-product-overview .vista-range .vista-colors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
      align-items: center;
      gap: 2em;
      padding-block: 2em; }
      .vista-description .vista-product-overview .vista-range .vista-colors .color, .vista-description .vista-product-overview .vista-range .vista-colors .door {
        color: #fff;
        width: 123px;
        display: flex;
        height: 123px; }
        .vista-description .vista-product-overview .vista-range .vista-colors .color img, .vista-description .vista-product-overview .vista-range .vista-colors .door img {
          position: absolute; }
        .vista-description .vista-product-overview .vista-range .vista-colors .color p, .vista-description .vista-product-overview .vista-range .vista-colors .door p {
          position: relative;
          font-size: 0.6em;
          padding: 0.6em; }
        .vista-description .vista-product-overview .vista-range .vista-colors .color#white, .vista-description .vista-product-overview .vista-range .vista-colors .color#chartwell, .vista-description .vista-product-overview .vista-range .vista-colors .door#white, .vista-description .vista-product-overview .vista-range .vista-colors .door#chartwell {
          color: #003; }
        .vista-description .vista-product-overview .vista-range .vista-colors .color#cream, .vista-description .vista-product-overview .vista-range .vista-colors .door#cream {
          color: #003; }
    .vista-description .vista-product-overview .vista-range .vista-doors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
      align-items: center;
      gap: 2em;
      padding-block: 2em; }
      .vista-description .vista-product-overview .vista-range .vista-doors .door {
        color: #003;
        width: 156px;
        display: flex;
        flex-direction: column; }
        .vista-description .vista-product-overview .vista-range .vista-doors .door p {
          font-size: 0.9em;
          padding: 0.6em; }

.vista-active {
  opacity: 1;
  height: auto; }

.upvc-doors.vista-closed {
  display: none; }

.upvc-doors.hallmark-closed {
  display: none; }

.hidden-btn {
  display: none; }

.hallmark-description {
  opacity: 0;
  height: 0;
  transform-origin: top;
  transition: 1s opacity ease-in-out;
  overflow: hidden; }
  .hallmark-description .hallmark-range {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 3em; }
    .hallmark-description .hallmark-range .color-title, .hallmark-description .hallmark-range .door-title {
      display: flex;
      justify-content: center;
      width: 100vw;
      background-color: #003;
      padding-block: 2em; }
      .hallmark-description .hallmark-range .color-title h2, .hallmark-description .hallmark-range .door-title h2 {
        color: #fff; }
    .hallmark-description .hallmark-range .hallmark-colors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
      align-items: center;
      gap: 2em;
      padding-block: 2em; }
      .hallmark-description .hallmark-range .hallmark-colors .color, .hallmark-description .hallmark-range .hallmark-colors .door {
        color: #fff;
        width: 123px;
        display: flex;
        height: 123px;
        overflow: hidden; }
        .hallmark-description .hallmark-range .hallmark-colors .color img, .hallmark-description .hallmark-range .hallmark-colors .door img {
          position: absolute;
          overflow: hidden; }
        .hallmark-description .hallmark-range .hallmark-colors .color p, .hallmark-description .hallmark-range .hallmark-colors .door p {
          position: relative;
          font-size: 0.6em;
          padding: 0.6em; }
        .hallmark-description .hallmark-range .hallmark-colors .color#white, .hallmark-description .hallmark-range .hallmark-colors .color#chartwell, .hallmark-description .hallmark-range .hallmark-colors .door#white, .hallmark-description .hallmark-range .hallmark-colors .door#chartwell {
          color: #003; }
        .hallmark-description .hallmark-range .hallmark-colors .color#cream, .hallmark-description .hallmark-range .hallmark-colors .door#cream {
          color: #003; }
    .hallmark-description .hallmark-range .hallmark-doors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
      align-items: center;
      gap: 2em;
      padding-block: 2em; }
      .hallmark-description .hallmark-range .hallmark-doors .door {
        color: #003;
        width: 156px;
        display: flex;
        flex-direction: column; }
        .hallmark-description .hallmark-range .hallmark-doors .door p {
          font-size: 0.9em;
          padding: 0.6em; }

.hallmark-active {
  opacity: 1;
  height: auto; }

.banner {
  background-color: #003;
  padding: 2em;
  display: flex;
  flex-direction: column;
  align-items: center; }

.community {
  display: grid;
  grid-template-columns: 1fr; }
  .community > div:nth-child(odd) {
    background-color: #3333ff; }
  .community > div:nth-child(even) {
    background-color: #003; }
  .community > div {
    padding: 2em; }

.charity {
  display: flex;
  flex-direction: column;
  gap: 2em; }
  .charity .Content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em; }

.business {
  display: grid;
  grid-template-columns: 1fr;
  flex-direction: column;
  gap: 2em;
  justify-content: center;
  align-items: flex;
  color: #003;
  padding-inline: 2em;
  clear: both;
  overflow: auto;
  background-color: #ebebff; }
  .business > div:nth-child(odd) {
    background-color: #b8b8ff; }
  .business > div:nth-child(even) {
    background-color: #ebebff; }
  .business img {
    width: 100%; }
  .business .business-item {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
    padding-bottom: 0.6em; }
    .business .business-item .title {
      padding: 0.5em; }
      .business .business-item .title h4 {
        font-size: 1.2em; }
    .business .business-item .content {
      display: flex; }
      .business .business-item .content .work-local {
        display: flex;
        flex-direction: column;
        gap: 1em; }
    .business .business-item .desc {
      padding-inline: 0.6em; }
  .business .suppliers {
    display: flex;
    flex-direction: column;
    width: 100%; }

.community {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-contents: center;
  margin-inline: auto;
  max-width: 1200px; }

.open_close {
  padding-bottom: 2em; }

.opening-times {
  padding-top: 0.6em; }

.review-cta {
  display: flex;
  flex-direction: column;
  margin-inline: 2em;
  background-color: #3333ff;
  padding: 1em;
  gap: 1em;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px; }
  .review-cta button.btn {
    background: #003;
    border: 1px white solid;
    outline: 2px solid #003; }
    .review-cta button.btn a {
      background: #003;
      color: white;
      display: block; }

.air-ambulance {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  padding-inline: 2em;
  align-items: center; }
  .air-ambulance .charity-pics {
    display: grid;
    grid-template-columns: 1fr; }
    .air-ambulance .charity-pics img {
      width: 100%; }

.doors-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  padding: 2em; }
  .doors-detail img {
    width: 100%; }
  .doors-detail h1, .doors-detail h2, .doors-detail h3, .doors-detail h4 {
    color: #003;
    padding: 0;
    margin: 0; }
  .doors-detail .doors-visage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em; }
    .doors-detail .doors-visage h1 {
      font-size: 10em; }
    .doors-detail .doors-visage h2 {
      font-size: 3em;
      text-transform: uppercase; }
    .doors-detail .doors-visage h3 {
      font-size: 2em;
      text-transform: uppercase; }
    .doors-detail .doors-visage h4 {
      font-size: 1.16em; }

.doors-images {
  display: grid;
  grid-template-columns: 1fr;
  padding: 2em;
  gap: 2em; }

.doors-images-container {
  background-color: #003;
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 2em; }
  .doors-images-container .doors-images-header {
    display: flex;
    flex-direction: column;
    gap: 1.6em; }
  .doors-images-container .door-image-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em; }
    .doors-images-container .door-image-container .door-image img {
      width: 100%; }

.inox-glazing {
  color: #003;
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  max-width: 1200px;
  margin-inline: auto; }
  .inox-glazing .inox-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .inox-glazing .inox-header h1 {
      color: #003;
      font-size: 4em; }
    .inox-glazing .inox-header h2 {
      color: #9999ff;
      font-size: 1.2em; }
  .inox-glazing .inox-content {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 80vw;
    align-self: center;
    text-align: center; }
  .inox-glazing .inox-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    padding: 2em;
    align-items: center; }
    .inox-glazing .inox-images .door-image img {
      width: 100%; }

.glass-options {
  background-color: #003;
  padding: 2em;
  display: flex;
  flex-direction: column;
  gap: 2em; }
  .glass-options .glass-options-header h2 {
    padding-bottom: 1em; }
  .glass-options .glass-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px; }
  .glass-options .mini-blinds {
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .glass-options .mini-blinds .mini-blinds-header {
      display: flex;
      flex-direction: column;
      gap: 1em; }
    .glass-options .mini-blinds .mini-blinds-images {
      display: flex; }
      .glass-options .mini-blinds .mini-blinds-images .blind-image-description {
        display: flex;
        flex-direction: column;
        justify-content: space-around; }

.doors-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2em;
  margin-block: 2em;
  margin-inline: auto; }

.brochure-container {
  display: flex;
  color: #003;
  justify-content: center;
  align-items: center;
  padding: 2em;
  gap: 2em;
  background-color: #ccccff; }
  .brochure-container .brochure {
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .brochure-container .brochure h2, .brochure-container .brochure p {
      padding-block: 1em; }
    .brochure-container .brochure img {
      width: 100%; }

.door-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2em; }

.door-collection-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
  max-width: 1500px;
  justify-content: space-around; }
  .door-collection-container > div:nth-child(odd) {
    background-color: #b8b8ff; }
  .door-collection-container .door-collection {
    background-color: #8585ff;
    padding: 2em;
    max-width: 360px;
    justify-self: center; }
  .door-collection-container h2 {
    padding-bottom: 1em; }
  .door-collection-container p {
    font-size: 1.2em;
    line-height: 1.5em; }

.outer-container {
  background-color: navy;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em; }
  .outer-container .i-container {
    background-color: navy;
    display: grid;
    grid-template-columns: 1fr;
    padding: 2em;
    justify-content: center;
    align-items: center; }
    .outer-container .i-container h3 {
      text-align: center;
      font-size: 2.4em;
      padding: 1em; }
    .outer-container .i-container h2 {
      text-align: center;
      padding: 0.6em; }
    .outer-container .i-container p {
      text-align: center;
      font-size: 1.2em; }
    .outer-container .i-container img {
      width: 300px;
      margin-inline: auto; }
  .outer-container .i-links {
    background-color: #fff;
    display: flex;
    width: 90vw;
    padding: 2em;
    justify-content: space-around;
    align-items: center;
    -o-border-radius: 16px;
    -ms-border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px; }
    .outer-container .i-links a {
      font-size: 1.2em;
      text-align: center; }

.logo {
  width: 300px; }

.service-icon {
  height: 100px; }

button#btn-reviews {
  font-size: 1.2em;
  background-color: #0000cc; }
  button#btn-reviews:hover {
    cursor: pointer; }

.fa-user {
  padding: 0.42em 0.5em;
  font-size: 0.7em;
  margin-right: 0.8em;
  background: #003;
  color: white;
  -o-boder-radius: 400px;
  -ms-border-radius: 400px;
  -moz-border-radius: 400px;
  -webkit-border-radius: 400px; }

.glass-item, .col-item {
  width: 100%; }

.glass-pic img {
  width: 100%; }

.header-left .time {
  color: white; }
  .header-left .time a h4 {
    color: white; }
  .header-left .time #open_close {
    color: white; }

img.double-glazed-pic {
  width: 100%; }

.splash-back-options .design-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em; }

button.pdf-btn {
  background: white;
  border: none;
  padding: 0.4em 0.8em;
  color: white;
  margin-top: 2em;
  width: 300px;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  transition: all 0.4s ease-in-out; }
  button.pdf-btn:hover {
    background: #ccccff;
    color: white; }

.xmas {
  background-color: red;
  background-image: url("../img/xmas-bg.webp");
  background-position: bottom left;
  background-size: cover;
  padding: 5em 3em 12em 3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-text: center; }
  .xmas h3 {
    line-height: 2em;
    text-align: center; }

.doors-logo {
  width: 200px; }

.air-ambulance, .business {
  width: 100%; }

.w1200 {
  max-width: 1200px;
  text-align: center; }

header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1em 0 0 0;
  background: #003; }
  header .header-left {
    order: 3; }
  header .Title {
    order: 1; }
  header .header-left {
    order: 2; }
    header .header-left h4 a, header .header-left h3 a {
      font-size: 1.4em;
      line-height: 2em;
      color: white; }
      header .header-left h4 a:hover, header .header-left h3 a:hover {
        color: #0089ca; }
  header .header-right h4 {
    font-size: 1em;
    line-height: 1.6em;
    color: white; }
  header nav {
    width: 100%;
    background: #0000cc;
    margin-top: 1em;
    order: 4;
    z-index: 100000; }
    header nav ul {
      display: flex;
      justify-content: space-around;
      padding: 0.5em; }
      header nav ul li a {
        text-transform: uppercase;
        font-weight: 700;
        color: white; }
        header nav ul li a:hover {
          color: #003; }

.email-issues {
  background: red;
  color: #fff;
  padding: 1em 4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em; }

footer {
  display: grid;
  grid-template-column: 1fr;
  justify-content: center;
  align-items: center;
  align-text: center;
  background: #003;
  gap: 2em;
  width: 100%;
  padding: 2em;
  margin-top: 4em; }
  footer .footer-left {
    display: flex;
    align-self: center; }
  footer .footer-right h4 a {
    font-size: 1.2em;
    line-height: 2em;
    color: white; }
    footer .footer-right h4 a:hover {
      color: #0089ca; }

footer.test {
  position: relative;
  top: calc(0.2*100vw);
  display: grid;
  grid-template-column: 1fr;
  justify-content: center;
  align-items: center;
  align-text: center;
  background: #003;
  gap: 2em;
  width: 100%;
  padding: 2em;
  margin-top: 4em; }
  footer.test .footer-left {
    display: flex;
    align-self: center; }
  footer.test .footer-right h4 a {
    font-size: 1.2em;
    line-height: 2em;
    color: white; }
    footer.test .footer-right h4 a:hover {
      color: #0089ca; }

.services-dropdown, .downloads-dropdown, .contact-dropdown {
  width: 100%;
  position: absolute;
  z-index: 20;
  background: #003;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 2px solid white;
  justify-content: space-around;
  padding: 1em 2em;
  opacity: 0;
  transform: scaleY(0);
  transition: 0.8s all ease-in-out;
  transform-origin: top;
  gap: 1.6em; }
  .services-dropdown > div, .downloads-dropdown > div, .contact-dropdown > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.8em; }
    .services-dropdown > div h3, .downloads-dropdown > div h3, .contact-dropdown > div h3 {
      display: flex;
      justify-content: center;
      gap: 0.8em;
      width: 90%;
      border-bottom: 1px white solid;
      margin-bottom: 0.4em;
      font-size: 1.4em; }
    .services-dropdown > div h4 a, .downloads-dropdown > div h4 a, .contact-dropdown > div h4 a {
      line-height: 1.8em;
      font-size: 1em;
      color: white;
      text-align: center; }
      .services-dropdown > div h4 a:hover, .downloads-dropdown > div h4 a:hover, .contact-dropdown > div h4 a:hover {
        color: #0089ca; }

.services-dropdown.active, .downloads-dropdown.active, .contact-dropdown.active {
  opacity: 1;
  transform: scaleY(1); }

@media screen and (min-width: 700px) {
  .Services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
    background: #fff;
    color: #6666ff;
    padding: 2em 1em 6em 1em;
    gap: 2em;
    width: 100%; }

  .product-detail .product-detail-img {
    display: grid;
    grid-template-columns: repeat(4, 1fr); }

  .vista-description .vista-product-overview .vista-range .vista-colors, .vista-description .vista-product-overview .vista-range .vista-doors {
    grid-template-columns: repeat(4, 1fr); }

  .hallmark-description .hallmark-range .hallmark-colors {
    grid-template-columns: repeat(4, 1fr); }
  .hallmark-description .hallmark-range .hallmark-doors {
    grid-template-columns: repeat(4, 1fr); }

  .doors-images-container {
    background-color: #003;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .doors-images-container .doors-images-header {
      display: flex;
      flex-direction: column;
      gap: 1.6em; }
    .doors-images-container .door-image-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2em; }
      .doors-images-container .door-image-container .door-image img {
        width: 100%; }

  img.vDoor {
    width: 50vw;
    max-width: 400px; }

  .brochure-container {
    display: flex;
    flex-direction: row; }
    .brochure-container .brochure {
      flex-direction: row; }
      .brochure-container .brochure .brochure-cta {
        display: flex;
        flex-direction: column;
        justify-content: center; } }
@media screen and (min-width: 768px) {
  .Section-Title {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    color: #0089ca;
    padding: 4em; }
    .Section-Title h2 {
      font-size: 3em; }

  .directors {
    display: grid;
    grid-template-columns: 1fr 1fr; }

  .staff {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    padding: 2em; }

  .product-detail .product-detail-img {
    display: grid;
    grid-template-columns: repeat(6, 1fr); }

  .hardware .hardware-img {
    display: grid;
    grid-template-columns: 1fr 1fr; }

  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-around;
    align-items: space-around; }
    footer .footer-right {
      display: flex;
      flex-direction: column;
      align-text: right;
      align-items: flex-end;
      justify-content: flex-end; }

  .textured-glass-pics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center; }

  .texture-glass-detail {
    display: grid;
    grid-template-columns: 1fr 1fr; }

  .charity {
    width: 100%; }
    .charity .Content {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr; }

  .air-ambulance .charity-pics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
    justify-content: center; }

  .business {
    display: grid;
    grid-template-columns: repeat(3, 1fr); }

  .doors-images-container {
    background-color: #003;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .doors-images-container .doors-images-header {
      display: flex;
      flex-direction: column;
      gap: 1.6em; }
    .doors-images-container .door-image-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2em; }
      .doors-images-container .door-image-container .door-image img {
        width: 100%; }

  .glass-options {
    background-color: #003;
    padding: 2em;
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .glass-options .glass-options-header h2 {
      padding-bottom: 1em; }
    .glass-options .glass-images {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2em; }
      .glass-options .glass-images .glass-image img {
        width: 100%; }

  .inox-glazing .inox-images {
    grid-template-columns: repeat(4, 1fr); }

  img.vDoor {
    width: 33.3vw; }

  .door-collection-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; } }
@media screen and (min-width: 1060px) {
  header {
    display: grid;
    grid-template-columns: repeat(3, 1fr); }
    header .header-left {
      order: 1; }
    header .Title {
      order: 2; }
    header .header-right {
      order: 3; }
    header nav {
      order: 4; }

  nav {
    grid-column: 1/4; }

  .services-dropdown, .downloads-dropdown, .contact-dropdown {
    width: 100%;
    position: absolute;
    z-index: 20;
    background: #003;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid white;
    justify-content: space-around;
    padding: 1em 2em;
    opacity: 0;
    transform: scaleY(0);
    transition: 0.8s all ease-in-out;
    transform-origin: top;
    gap: 1.6em; }
    .services-dropdown > div, .downloads-dropdown > div, .contact-dropdown > div {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 0.8em; }
      .services-dropdown > div h3, .downloads-dropdown > div h3, .contact-dropdown > div h3 {
        display: flex;
        justify-content: center;
        gap: 0.8em;
        width: 90%;
        border-bottom: 1px white solid;
        margin-bottom: 0.4em;
        padding-bottom: 0.4em;
        font-size: 1.3em; }
      .services-dropdown > div h4 a, .downloads-dropdown > div h4 a, .contact-dropdown > div h4 a {
        line-height: 1.8em;
        font-size: 1em;
        color: white;
        text-align: center; }
        .services-dropdown > div h4 a:hover, .downloads-dropdown > div h4 a:hover, .contact-dropdown > div h4 a:hover {
          color: #0089ca; }

  section.cta {
    background-color: #80deea;
    background-image: url("../img/cta-house.svg");
    background-repeat: no-repeat;
    background-position-x: 0;
    height: 70vh;
    display: grid;
    grid-template-columns: 50% 50%;
    justify-content: center;
    align-items: center;
    padding: 3em;
    color: #003;
    gap: 2em; }
    section.cta h2 {
      font-size: 3em;
      line-height: 2.4em; }
    section.cta p {
      font-size: 1.4em;
      line-height: 2em;
      padding-bottom: 2em; }

  .Services {
    grid-template-columns: repeat(3, 1fr);
    gap: 4em; }

  .staff {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    padding: 2em; }

  #comments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em; }

  .Index-Review {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 2em;
    padding: 4em;
    background: #fff;
    color: #0089ca; }

  .IndexReviewTitle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-contect: flex-end;
    align-items: flex-start;
    gap: 2em;
    grid-row-start: 1;
    height: 100%; }

  .accreditations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4em;
    margin: 0 4em; }

  .product {
    display: grid;
    grid-template-columns: 30% 70%; }

  .window-desc {
    display: grid;
    grid-template-columns: 1fr 1fr; }

  .product-detail .product-detail-img {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 1em; }

  .product-options {
    display: grid;
    grid-template-columns: 1fr 1fr; }

  .RAL-options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5em; }

  .textured-glass {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    align-self: center;
    gap: 2em; }

  .textured-glass-pics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; }

  .main-upvc-doors {
    display: grid;
    grid-template-columns: 1fr 1fr; }
    .main-upvc-doors.main-open {
      display: grid;
      grid-template-columns: 1fr; }

  .business {
    grid-template-columns: repeat(4, 1fr); }

  .vista-description .vista-product-overview .vista-range .vista-colors {
    grid-template-columns: repeat(6, 1fr); }
  .vista-description .vista-product-overview .vista-range .vista-doors {
    grid-template-columns: repeat(5, 1fr); }

  .hallmark-description .hallmark-range .hallmark-colors {
    grid-template-columns: repeat(6, 1fr); }
  .hallmark-description .hallmark-range .hallmark-doors {
    grid-template-columns: repeat(5, 1fr); }

  .doors-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    padding: 2em; }
    .doors-detail img {
      width: 100%; }
    .doors-detail h1, .doors-detail h2, .doors-detail h3, .doors-detail h4 {
      color: #003;
      padding: 0;
      margin: 0; }
    .doors-detail .doors-visage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5em; }
      .doors-detail .doors-visage h1 {
        font-size: 16em; }
      .doors-detail .doors-visage h2 {
        font-size: 4.5em;
        text-transform: uppercase; }
      .doors-detail .doors-visage h3 {
        font-size: 3.1em;
        text-transform: uppercase; }
      .doors-detail .doors-visage h4 {
        font-size: 1.8em; }

  .doors-images-container {
    background-color: #003;
    padding: 4em;
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .doors-images-container .doors-images-header {
      display: flex;
      flex-direction: column;
      gap: 1.6em; }
    .doors-images-container .door-image-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 3em; }
      .doors-images-container .door-image-container .door-image img {
        width: 100%; }

  .glass-options .mini-blinds {
    display: grid;
    grid-template-columns: 1fr 1fr; } }
@media screen and (min-width: 1300px) {
  .logo {
    width: 400px; }

  header .header-right h4 {
    font-size: 1.4em;
    line-height: 2em;
    color: white; }

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

  .main-specs .features {
    display: flex;
    flex-direction: column;
    align-items: center; }
  .main-specs .col-options .colours {
    display: grid;
    grid-template-columns: repeat(6, 1fr); }
  .main-specs .glass-options .glass {
    display: grid;
    grid-template-columns: repeat(6, 1fr); }

  .hardware .hardware-img {
    display: grid;
    grid-template-columns: repeat(4, 1fr); }

  .textured-glass-pics {
    display: grid;
    grid-template-columns: repeat(4, 1fr); }

  .xmas {
    padding: 4vw 4vw 20vw 4vw; }
    .xmas h3 {
      font-size: 2.4em; }

  .business {
    grid-template-columns: repeat(6, 1fr); }

  .doors-images-container {
    background-color: #003;
    padding: 6em;
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .doors-images-container .doors-images-header {
      display: flex;
      flex-direction: column;
      gap: 1.6em; }
    .doors-images-container .door-image-container {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 3em; }
      .doors-images-container .door-image-container .door-image img {
        width: 100%; } }
@media screen and (min-width: 1498px) {
  .main-products .product-img-container .product-img .product-hero {
    nth-child(1)-position: relative;
    nth-child(1)-top: 0;
    nth-child(2)-position: relative;
    nth-child(2)-top: -900px;
    nth-child(3)-position: relative;
    nth-child(3)-top: -1800px;
    nth-child(4)-position: relative;
    nth-child(4)-top: -2700px; }

  .vista-description .vista-product-overview .vista-range .vista-colors, .vista-description .vista-product-overview .vista-range .vista-doors {
    grid-template-columns: repeat(8, 1fr); }

  .hallmark-description .hallmark-range .hallmark-colors {
    grid-template-columns: repeat(8, 1fr); }
  .hallmark-description .hallmark-range .hallmark-doors {
    grid-template-columns: repeat(8, 1fr); }

  .doors-images-container {
    background-color: #003;
    padding: 6em;
    display: flex;
    flex-direction: column;
    gap: 2em; }
    .doors-images-container .doors-images-header {
      display: flex;
      flex-direction: column;
      gap: 1.6em; }
    .doors-images-container .door-image-container {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4em; }
      .doors-images-container .door-image-container .door-image img {
        width: 100%; }

  .glass-options {
    display: grid;
    grid-template-columns: 1fr 1fr; } }
@media screen and (min-width: 1600px) {
  section.cta {
    grid-template-columns: 30% 70%;
    padding: 8em; }

  .Services {
    grid-template-columns: repeat(4, 1fr);
    gap: 4em;
    justify-content: center;
    align-items: center; }

  .team-main {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    width: 1580px; }

  .textured-glass-pics {
    display: grid;
    grid-template-columns: repeat(5, 1fr); }
    .textured-glass-pics#replacement-glass {
      display: grid;
      grid-template-columns: repeat(6, 1fr); }

  .splash-back-options .design-options .designs img:nth-child(1) {
    padding-left: calc(464em - 70vw); }

  .business {
    grid-template-columns: repeat(8, 1fr); } }
@media screen and (min-width: 2000px) {
  .vista-description .vista-product-overview .vista-range .vista-colors {
    grid-template-columns: repeat(13, 1fr); }
  .vista-description .vista-product-overview .vista-range .vista-doors {
    grid-template-columns: repeat(10, 1fr); }

  .hallmark-description .hallmark-range .hallmark-colors {
    grid-template-columns: repeat(13, 1fr); }
  .hallmark-description .hallmark-range .hallmark-doors {
    grid-template-columns: repeat(10, 1fr); }

  .doors-images-container .door-image-container {
    display: grid;
    grid-template-columns: repeat(15, 1fr); } }
@media screen and (min-width: 2200px) {
  .Services {
    grid-template-columns: repeat(6, 1fr);
    gap: 4em;
    justify-content: center;
    align-items: center; }

  .product-detail .product-detail-img {
    display: grid;
    grid-template-columns: repeat(18, 1fr); }

  .textured-glass-pics {
    display: grid;
    grid-template-columns: repeat(7, 1fr); }
    .textured-glass-pics#texture-level {
      display: grid;
      grid-template-columns: repeat(5, 1fr); } }