body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
}

.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}
.reusable{
  overflow:hiden;
}
.row{
  margin-right:0;
  margin-left:0;
}
img {
    width: 100%;
}
.highlight{
  font-weight:200;
}
.thin{
  font-weight:200;
}
.top-space{
  margin-top:10px;
}
.r-btn{
  border:2px solid #000;
  padding:2% 4%;
  border-radius:5px;
  display:inline-block;
}
.r-btn a{
  color:#000;

}
.section3{
  margin-top:50px;
  background-color: #ececec;
  padding:4% 0;
}
.divider-line{
  height:5px;
  width:15%;
  background-color:#3398CA;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  margin:10px 0;
}
.divider-line-center{
  height:5px;
  width:30%;
  background-color:#3398CA;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  margin:10px auto;
}
.r-container{
  max-width:1800px;
  padding:2%;
  margin:0 auto;
}

/* ======================== */

/* ====================== */
.hero{
  position: relative;
  background-image: 
  url('/imageserver/Reusable/garage-doors-general/door1.png');
  background-repeat: no-repeat;
  background-size:cover;
  background-position:right;
  clip-path: polygon(0% 12%, 100% 12%, 100% 84%, 0% 84%);
  margin-top:-8%;
  margin-bottom:-6%;
}
.hero-content{
  padding:8% 0 8% 20%;
}
#hero_logo{
  max-width:20vw;
  position:absolute;  
  z-index:5;
  /* width:300px; */
  top:18%;
  left:3%;
}
.hero-content h2{
  padding:0 0 10px 0;
  max-width:clamp(250px, 60vw, 500px);
}
.hero-main-img{
  max-width:300px;
  text-align: center;
  margin:0 auto;
}
.hero-right{
  display:flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column; 
  height:100vh;
}
.hero-right h1{
  font-size:clamp(30px, 3.5vw, 52px);
  color:#fff;
  text-transform:uppercase;                                                                     
}
.video-wrapper{
  width:516px;
}
#header_logo{
  max-width:300px;
}
.r-header{             
  max-width:900px;                                                                  
  margin:0 auto;  
  padding:0 2%;
  text-align: center;
}
.r-flex-group{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
  margin-top:30px;
}
.r-flex-item{
  max-width:400px;
  text-align: center;
}
.r-flex-item-img img{
  max-width:275px;
}
.r-detail{
  position: relative;
  min-height:50vh;
  margin:0 auto;
}

#trex_detail{
  position: absolute;
  max-width:60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.detail-logo{
  max-width:400px;
}
.vortex-content{
  height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
}
.showSingle:hover{
  cursor:pointer;
}
.circle{
  max-width:40px;
  position: absolute;
}
.circle:hover{
  cursor:pointer;
}
.circle1{
  bottom:65%;
  left:35%;
}
.circle2{
  top:40%;
  left:55%;
}
.circle3{
  bottom:40%;
  right:36%;
}
#dp_circle1{
  bottom:55%;
  left:25%;
}
#dp_circle2{
  top:40%;
  left:35%;
}
#dp_circle3{
  top:40%;
  left:46%;
}
#dp_circle4{
  bottom:40%;
  right:35%;
}

.section4{
  background-image:linear-gradient(to bottom,rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,1) 100%), url('/imageserver/Reusable/garage-doors-general/new-door3.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding:5% 8%;
  text-align: center;
  margin-bottom:50px;
  color:#000;
  
}
.my-center{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

}
.r-detail-container{
  position: absolute;
  top:85%;
  left:50%;
  transform: translate(-50%, -50%);
  border:2px solid #000;
  border-radius:5px;
  padding:14px 16px;
}
.doc{
  color:#000;
}
.doc:hover{
  text-decoration: none;
}
.section4 p{
  margin-top:20px;
  max-width:1400px;
  margin:10px auto 0;
}
.products{
  margin-top:30px;
}
.trex-hero{
  background-image: url('/imageserver/Reusable/alurex/bg-trex_1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height:100vh;
}
.doublepro-hero{
  background-image: url('/imageserver/Reusable/alurex/doublepro-bg_3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height:100vh;
}
.clean-hero{
  background-image: url('/imageserver/Reusable/alurex/guard-hero.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height:100vh;
}
.section2{
  margin-top:50px;
}
.modal-dialog{
  width:60%;
  margin:100px auto 0;
}
.modal-header{
  background-color:#ececec;
  padding:0;

}
.modal-title img{
  max-width:200px;
}
@media screen and (max-width:992px) {
  .hero-right{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height:100vh;
  }
  .hero-right h1{
    font-size:clamp(20px, 6.5vw, 60px);
  }
}
@media screen and (max-width:830px) {
  .r-flex-group{
    display:block;
    margin:0 auto;
  }
  .r-flex-item{
    margin:30px auto;
  }
}
@media screen and (max-width:600px) {
  .video-wrapper{
    width:100%;
    max-width:516px;
  }
}