:root{
  --main-color:#EC6737;
  --secondary-color:#1F3949;
 
  --accent-dark-color:#1571A1;
  --fancy-font:'Cinzel', serif;
}


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;
}
.maincontent h1,h2,h3,h4,h5{
  font-family:var(--fancy-font);
  margin:0;
  padding:0
}
.maincontent p{
  font-family:'Poppins', sans-serif;
}

img{
  width:100%;
}
.my-container{
  max-width:90%;
  padding: 2%;
  margin:0 auto;
}
.highlight{
  color:var(--main-color)
}
.product-link{
  color:var(--secondary-color);
}
.product-link:hover{
  color:var(--main-color);
  text-decoration: none;
}
.product-link:hover .link-arrow{
  transform:translateX(5px);
  transition:.3s;
}
.link-arrow{
  display:inline-block;
  transition:.3s;
}
#hero{
  background-image: url('/imageserver/Reusable/brava-tile23/hero-min.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  height:clamp(300px, 50vw, 100vh);

}
#hero-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  height:100%;
  text-align:center;
}
#hero-name{
  color:var(--main-color);
  font-size:3rem;
  font-family: 'Poppins', serif;
  font-weight:700;
}
.hero-title{
  color:#fff;
  font-family: 'Cinzel', serif;
}
#hero-btn{
  color:#fff;
  background-color:var(--main-color);
  padding:10px 25px;
  font-size:1.5rem;
  border:1px solid var(--secondary-color);
  border-radius:2px;
  margin-top:10px;
}
.section1{
  background-image: url('/imageserver/Reusable/brava-tile23/nature-bg-min.png');
  background-repeat: no-repeat;
  background-size: cover;

}
.collage-grid img{
  max-width:25vw;
}
.collage-grid{
  display:grid;
  grid-template-columns: repeat(3, 33%);
  grid-template-rows: repeat(3, 33%);
}
#collage-text{
  grid-row:1/3;
  grid-column:1/-1;
  place-self: center;
  text-align: center;
  max-width:600px;
  margin:0 auto;
}
#collage-text h1{
  font-size:3rem;
  font-family:var(--fancy-font)
}
.nature-mobile{
  display:none;
}
#shake{
  grid-row:1/3;
  grid-column:1/2;
  display:flex;
  padding:3%;
}
#slate{
  grid-row:2/4;
  grid-column:2/3;
  display:flex;
  align-self: flex-end;
}
#spanish{
  grid-row:1/3;
  grid-column:3/4;
  justify-self:center;
  display:flex;
}
#section2{
  background-color:var(--secondary-color);
  padding:5%;
  color:#fff;
  text-align: center;
  margin:0 auto;
}
#section2 p{
  max-width:800px;
  margin:0 auto;
}
.flex-group{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: flex-start;
  margin:20px 0;
  flex-wrap:wrap;
}
.flex-item{
  max-width:200px;
  display:flex;
  flex-direction: column;
  text-align: center;
  margin:0 auto;
  justify-content: center;
  align-items: center;
  padding:0 5px;
}
.flex-image{
  height:65px;
  padding:0 5%;
  display:grid;
  align-items: center;
  margin:10px;
}
.benefits-image{
  max-width:75px;
}
.card-flex-item{
  max-width:400px;
  display:grid;
  margin:20px auto;
}
.card-flex-item img{
  max-width:400px;
  text-align: center;
  grid-column:1/2;
  grid-row:1/2;
}
.card-flex-item-text{
  background-color:#ececec;
  grid-column:1/2;
  grid-row:1/2;
  align-self:flex-end;
  padding:4% 0 4% 3%;
  max-width:90%;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #353535;
  font-size: 3rem;
  color: #fff;
  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: all 500ms;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card:hover {
  box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
  transform: translateY(-3px) scale(1.1);
}
 .my-header{
    text-align: center;
    margin:30px;
  }
#roof-system{
min-height:500px;
}
  #roof-system-image-container{
    max-width:768px;
    margin:0 auto;
    position: relative;

  }

  .roof-system-button{
    position: absolute;
    height:30px;
    width:30px;
    border-radius:50%;
    border:2px solid #fff;
    background-color:red;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
  }

  .roof-system-button:hover{
    transform:scale(1.5);
    transition:.3s;
  }
  .btn-number{
    font-size:14px;
    font-weight:700;
  }

  .roof-system-content{
    display:grid;
    max-width:768px;
    margin:0 auto;
  }

  .content-item{
    grid-column:1/2;
    grid-row:1/2;
  }

  .content-item h2{
    display: inline;
  }
  .content-item p{
    display: inline;
  }

  .roof-system-content img{
    max-width:150px;
    float:right;
    clear:both;
  }
  #btn1{
    top:35%;
    left:8.5%;
  }
  #btn2{
    top:46%;
    left:23.5%;
  }
  #btn3{
    top:17%;
    left:28.5%;
  }
  #btn4{
    top:4.5%;
    left:46.5%;
  }
  #btn5{
    top:10.5%;
    left:67%;
  }
  #btn6{
    top:30.5%;
    left:77%;
  }
  #btn7{
    top:51%;
    left:82%;
  }
  #btn8{
    top:50%;
    left:75.5%;
  }
  #btn9{
    top:67%;
    left:87.5%;
  }
  #btn10{
    top:88%;
    left:90.5%;
  }
  #btn11{
    top:57%;
    left:54.5%;
  }
  #btn12{
    top:49.5%;
    left:42.5%;
  }
  #btn13{
    top:61%;
    left:22.5%;
  }

  .gallery-container{
    padding:3%;
  }
  
  .gallery-my-header{
    text-align: center;
    margin-block:1em;
  }
  .my-header h1, h4{
    display:inline-block;
  }
  .video-wrapper{
    max-width:700px;
    margin:0 auto;
  }
  .title{color:#000;}
  .gallery-image{
    max-height:225px;
    overflow: hidden;
  }
  .title{
    display:block;
    background-color:#eee;
    max-width:80%;
    margin:-5% auto 0;
    position: relative;
    padding:8px 15px;
    z-index:5;
  }
  .gallery-flex-group{
    display:flex !important;
    flex-direction:row;
    flex-wrap:wrap;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
  }
  .gallery-flex-item{
    margin:2% 0;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
  }
  .gallery-grid-image{
    max-width:500px;
  }
   .gallery-image img{
    max-width:400px;
   }

/* Medium screens */
@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}

/* =============== Media Queries ================== */
@media screen and (max-width:1280px) {
  #spanish{
    justify-self: flex-end;
  }
}
@media screen and (max-width:992px) {
  body, html{
    font-size:16px;
  }
  #spanish{
    grid-row:2/4;
  }
  #shake{
    grid-row:2/4;
  }
  #collage-text{
    max-width:90%;
    place-self:initial;
    margin:20px auto 0;
  }
  #collage-text h1{
    font-size:2rem;
  }
}
@media screen and (max-width:600px) {
  body, html{
    font-size:14px;
  }
  .card-flex-item-text p{
    display:none;
  }
  .nature-desktop{
    display:none;
  }
   .title{
  font-size:16px;
}
.section1 {
    padding-block: 4%;
}

}