body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
}
.reusable{
  overflow:hidden;
}
.site_width{
  max-width:100%;
}
.heavy {
  font-weight: 600;
}

.thin {
  font-weight: 100;
}

.reusable img {
  width: 100%;
}

.hero {
  position: relative;
}

.hero-img {
  position: relative;
  max-width: 2200px;
  object-fit: cover;
}

#hero-h1 {
  position: absolute;
  bottom: 10%;
  left: 5%;
  color: #000;
  font-weight: 600;
  max-width:80%;
  background-color:rgba(255,255,255,0.7);
  padding:3% 4%
}

.hero-logo {
  position: absolute;
  top: 5%;
  right: 5%;
  max-width: clamp(50px, 8vw, 8vw);
  ;
}

.header-main {
  background: #ededed;
  padding: 5% 10vw;
}

.header-container {
  position: relative;
}

.header-container::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: -15px;
  height: 100%;
  width: 2px;
  background: #000;
}
.title{
  font-weight:700;
}
.depth-grid {
  margin-top: 50px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 50%);
  justify-content: space-evenly;
  align-items: flex-start;
}

#depth-col1 {
  grid-column: 1/2;
  max-width: 650px;
}

#depth-col2 {
  grid-column: 2/3;
}

.modal-dialog{
  width:80%;
margin-top:100px;
}

.section1{
  background-image: linear-gradient(to bottom, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7)100%), url('/imageserver/Reusable/GAF/commercial/warranty-hero.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  height:clamp(500px, 50vh, 55vh);
  display:grid;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.icon-img{
  max-width:70px;
}

.section1-container {
  padding:5vw 18vw;
  /* color: #fff; */
 
}

.card-section {
 text-align:center;
display:flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap:wrap;
}
.product-card{
  min-height: 325px;
  width:350px;
  position: relative;
  margin:20px;
  display:inline-block;
}
.product-card__content {
  text-align: center;
  position: relative;
  transition: transform 3s;
  transform-style: preserve-3d;
}

.product-card:hover .product-card__content {
  transform: rotateY(0.5turn);
}

.product-card__front, .product-card__back {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 325px;
  width: 350px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .5);
}

.product-card__back {
  transform: rotateY(0.5turn);
  padding: 2%;
  /* color: white; */
}



.product-card p {
  font-weight: 500;
  padding: 0 5%;
}

.step1 .product-card__front {
  background-image: radial-gradient(ellipse at left, rgba(255, 255, 255, .4), transparent), radial-gradient(ellipse at right, rgba(255, 255, 255, .4), transparent), url('/imageserver/Reusable/GAF/commercial/tpo-systems.jpg');
  background-size:cover;
}

.step1 .product-card__back {
  background-image:linear-gradient(rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url('/imageserver/Reusable/GAF/commercial/eg-tpo-fleeceback.jpg');
  background-size: cover;
  /* background-blend-mode: overlay; */
}

.step2 .product-card__front {
  background: radial-gradient(ellipse at left, rgba(255, 255, 255, .5), transparent), radial-gradient(ellipse at right, rgba(255, 255, 255, .5), transparent), url('/imageserver/Reusable/GAF/commercial/pvc-systems.jpg');
  background-size:cover;
}

.step2 .product-card__back {
  background-image:linear-gradient(rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url('/imageserver/Reusable/GAF/commercial/eg-tpo-smoothmembranes.jpg');
  /* background-blend-mode: overlay; */
  background-size: cover;

}

.step3 .product-card__front {
  background: radial-gradient(ellipse at left, rgba(255, 255, 255, .5), transparent), radial-gradient(ellipse at right, rgba(255, 255, 255, .5), transparent), url('/imageserver/Reusable/GAF/commercial/asphaltic-roofing.jpg');
  background-size:cover;
}

.step3 .product-card__back {
  background-image:linear-gradient(rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url('/imageserver/Reusable/GAF/commercial/rubber-hw25-smooth.jpg');
  background-size: cover;
  /* background-blend-mode: overlay; */
}

.step4 .product-card__front {
  background: radial-gradient(ellipse at left, rgba(255, 255, 255, .5), transparent), radial-gradient(ellipse at right, rgba(255, 255, 255, .5), transparent), url('/imageserver/Reusable/GAF/commercial/insulation.jpg');
  background-size:cover;
}

.step4 .product-card__back {
  background-image:linear-gradient(rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url('/imageserver/Reusable/GAF/commercial/polyiso.jpg');
  background-size: cover;
  /* background-blend-mode: overlay; */
}

.step5 .product-card__front {
  background: radial-gradient(ellipse at left, rgba(255, 255, 255, .5), transparent), radial-gradient(ellipse at right, rgba(255, 255, 255, .5), transparent), url('/imageserver/Reusable/GAF/commercial/cover-boards.jpg');
  background-size:cover;
}

.step5 .product-card__back {
  background-image: linear-gradient(rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%),url('/imageserver/Reusable/GAF/commercial/nh-polyiso.jpg');
  background-size: cover;
  /* background-blend-mode: overlay; */
}

.flex-group{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items: flex-start;
  justify-content: space-evenly;
}
.flex-item{
  width:300px;
}
.flex-item img{
  /* max-width:200px; */
}
.product-image{
  text-align: center;
  border:1px solid #000;
}
.section3 {
  padding:0 8%;
  margin-top:8%;
  /* display: grid; */
  grid-template-columns: 45% 55%;
  /* min-height: 80vh; */
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 1)100%), url('/imageserver/Reusable/GAF/commercial/green-planet.jpg');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}
.video-wrapper video{
  max-width:600px;
  width:100%;
}

#benefits {
  grid-column: 2/3;
  align-self:center;
}

.section3 ul li {
  position: relative;
  list-style-type: none;
}

.section3 ul li::before {
  position: absolute;
  content: url('/imageserver/Reusable/GAF/commercial/checkx50.png');
  top: 0;
  left: -45px;
}

/* ============ Media Queries =========== */
@media screen and (max-width:1400px) {
  #hero-h1 {
    padding:1% 2%
  }
}

@media screen and (max-width:1200px) {
  .section3 {
      display: block;
  }
}
@media screen and (max-width:1100px) {
  #hero-h1 {
    position: relative;
    /* max-width:100%; */
  }
}

@media screen and (max-width:992px) {
  .depth-grid{
      display:block;
      margin-top: 20px;
  }
  .section1-container {
      padding: 10vw 4vw;
      text-align:center;
  }
  .section1{
    height:100%;
  }
}
@media screen and (max-width:768px) {
  .header-container::before{
      display:none;
  }
}

@media screen and (max-width:600px) {
  .product-card{
    width:250px;
    margin:1%;
  }
.product-card__front, .product-card__back {
  width: 250px;
}
  #hero-logo {
      max-width: 50px;
  }
  #hero-h1 {
      width: 100%;
      max-width:100%;
      bottom: 10%;
      left: 0;
      text-align: center;
  }
  .header-container {
      padding: 5% 5vw;
      text-align: center;
  }
  .section3 {
      background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 1)100%), url('/imageserver/Reusable/GAF/commercial/green-planet.jpg');
  }
}

@media screen and (max-width:350px) {
 
  .product-card__front, .product-card__back {
      height: 325px;
      width: 250px;
      margin:0 auto;
  }
  .section1-container {
      padding: 4vw;
      text-align:center;
  }
}