:root{
    --main-color:#1B375D;
    --secondary-color:#3AAE29;
  }
  
  body, html{
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-size:18px;
  }
  .maincontent{
    max-width:100%;
    padding:0;
    margin:0;
    background:#ececec;
  }
  .maincontent_wrapper{
    padding-top:0;
  }
  .maincontent{
    max-width:100%;
  }
  img{
    width:100%;
  }
  
  h1{
    font-size:clamp(32px, 3.2vw, 52px);
    font-family: 'Cinzel', serif; 
    font-weight:600;
  }
  h2{
    font-size:clamp(22px, 2vw, 48px);
    font-family: 'Cinzel', serif; 
    font-weight:600;
  }
  h3{
    font-size:clamp(18px, 1.6vw, 42px);
    font-family: 'Cinzel', serif; 
    font-weight:600;
  }
  p{
    font-family: 'Poppins', sans-serif;
    font-weight:200;
  }
.my-hr{
    border: 0; 
    height: 1px; 
    width:70%;
    margin:4% auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
hr{
  border-top:1px solid #000;
}
 .my-header{
    text-align: center;
    max-width:1200px;
    padding:2%;
    margin:0 auto;
 }
 .highlight{
    font-weight:500;
 }
 .grid{
  display:grid;
  grid-template-columns: repeat(2, 50%);
  padding:0 3%;
}
.product-main-wrapper{
  margin-bottom:5%;
}
.features{
  max-width:1200px;
  padding:2%;
  margin:0 auto;
}
#features-list-header{
  font-size:1.4rem;
  max-width:700px;
  font-weight:300;
}
 .flex-group{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    align-items:flex-start;
    flex-wrap:wrap;
    margin:2% auto;
    max-width:1000px;
    padding:0 2%;
 }
 .flex-group img{
    max-width:100px;
 }
.flex-item{
    display:flex;
    flex-direction:column;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.flex-item img{
  max-width:75px;
}

.my-logo{
    margin:2% 0 0 2%;
}
.features-list{
  padding:0 3%;
}
.features-list ul{
  margin-left:30px;
  max-width:750px;
}
.features-list h1{
  margin-top:0;
}
.colors-container{
  text-align: center;
  max-width:1600px;
  padding:0 3%;
  margin:0 auto;
}
.gallery img{
  max-width:130px;
}
.arch-gallery .gallery-item img{
  filter:brightness(0.8);
}
.gallery-item p{
  margin-top:5px;
  font-size:14px;
}
.gallery{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  flex-wrap:wrap;
  align-items:center;
  padding:3% 2%;
}
.gallery-item{
  margin:5px;
}
.gallery-item img{
  border:1px solid #000;
}
.visualizer{
  background-image:url('/imageserver/Reusable/alside-siding23/visualizer-min.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.visualizer-btn{
  border:1px solid #000;
  padding:14px 21px;
  display:inline-block;
  margin-top:.4em;
  color:#102093;
  transition:.3s;
}
.visualizer-btn:hover{
  text-decoration: none;
  box-shadow: 2px 5px 8px 1px rgba(0,0,0,0.29);
}
.visualizer-content{
  padding:5%;
  background-color:#fff;
  max-width:clamp(400px, 30%, 600px);
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}


/* ------------------------------------------ Media Queries -------------------------------------------------------- */
@media screen and (max-width:992px) {
   
    ul li{
      list-style: none;
    }
    ul{
      padding-inline-start: 0;
    }
    .grid{
      display:block;
      text-align: center;
    }
    .features-list h1{
      margin-top:1em;
    }
    #features-list-header{
      font-size:1.2rem;
      max-width:100%;
      font-weight:300;
    }
}
@media screen and (max-width:700px) {
  .visualizer-content{
    background-color:rgba(255,255,255,0.8);
    text-align: center;
    max-width:100%;
  }
}