:root{
  --main-color:#1B6166;
  --accent-color:#664B15;
  --main-color-light:#187346;
}


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;
}

img{
    width:100%;
  }
  #page-wrapper{
    overflow: hidden;
  }
  
  .panel {
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    will-change: transform;
  }
  
  #container {
    width: 100%;
    height: 100%;
    left: 0;
    
  }
  .title{
    color:#fff;
    font-size: 2rem;
    display: block;
    font-weight: 700;
    font-family: 'Cinzel Decorative', cursive;
  }
  .title-dark{
    color:#000;
    font-size: 2rem;
    display: block;
    font-weight: 700;
    font-family: 'Cinzel Decorative', cursive;
  }
  .title{
    color:#fff;
    font-size: 2rem;
    display: block;
    font-weight: 700;
    font-family: 'Cinzel Decorative', cursive;
  }
  span[class*="fade-in"]{
    visibility: hidden;
    font-size:2rem;
  }

  .beach-fade-in{
    visibility: hidden;
  }
  #hero {
    position: relative;
    z-index:20;
    /* display: grid; */
    perspective:800px;
    /* height:100vh; */
    /* background-image: url('/imageserver/Reusable/amarr-doors23/door-frame-min.png'); */
    background-size:cover;
    background-position: center;
    /* height:100vh; */
  }
  .hero-bg{
    position: relative;
    height:100vh;

  }
  .hero-bg::after{
    /* content:""; */
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 100%);
    background-size:cover;
    z-index:10;
  }
  #hero-content {
    height:100vh;
    width:100%;
    background-image: url('/imageserver/Reusable/amarr-doors23/door-min.png');
    background-size: cover;
    background-position: center;
    color: #485865;
    text-align: center;
    display: grid;
    place-items:center;
    position: absolute;
  }
  .hero-text{
    grid-column: 1/2;
    grid-row:1/2;
    align-self:center;
    color:#fff;
    font-size:3rem;
}


  #main-image{
    max-width:500px;
  }
  .subtitle{
    font-size:1.6rem;
    font-weight:200;
    font-family: 'Cinzel Decorative', cursive;
  }
  .main-header{
    text-align:center;
    /* padding:5% 0; */
    position: relative;
    margin-top:-200px;
    margin-bottom:50px;
    z-index:-1;
  }

 
  /* ============== Section 4 =================== */
  .section4{
    background-image:
    linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 10%, rgba(255,255,255,0.1) 50%,rgba(255,255,255,.5) 90%,  rgba(255,255,255,1) 100%), 
    linear-gradient(to right,  rgba(255,255,255,0.7) 50%,  rgba(255,255,255,0) 80%),
    url('/imageserver/Reusable/amarr-doors23/garage6-min.png');
    background-repeat: no-repeat;
    background-size: cover;
    display:grid;
    align-items: center;
    background-position: right;
    min-height:80vh;
  }
  .sec4-container{
    max-width:60%;
    padding:2% 2% 2% 5%;
  }

  #first{
    max-width:400px;
  }
  
  /* ===================== Section 4-Product =================== */
  
  .beach-product-header{
    text-align:center;
    max-width:1200px;
    margin:0 auto 30px;
  }
  .beach-fade-in{
    margin-left:20px;
    position: relative;
  }
  .beach-fade-in::after{
    content:"";
    position: absolute;
    top:0;
    left:0; 
    height:2px;
    width:10px;
    background-color: rgba(255, 255, 255, 0);
    z-index:40;
  }
  .beach-product-group{
    display:grid;
    grid-template-columns:1fr;
    gap:50px;
    justify-content:center;
    /* padding:0 3%; */
  }
  .beach-product {
    margin: 0 auto 0;
    position: relative;
  }
  .beach-product::after{
    content:"";
    position: absolute;
    height:0;
    width:100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index:10;
  }
  .beach-product-bg{
    visibility:hidden;
  }
  .my-row{
        display: grid;
        grid-template-columns: 350px .5fr .5fr 350px;
  }
  .beach-image-desktop{
    justify-self: center;
    max-width:600px;
    grid-column:1/3;
    grid-row:1/2;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.2));
  }
  .beach-product-content {
    grid-column: 3/5;
    grid-row: 1/2;
    max-width: 80%;
    padding-top: 5%;
    color:#222;
    z-index:20;
    justify-self:flex-start;
    margin: 0 auto;
  }
  .beach-product-content h1{
    border-bottom:1px solid #000;
    padding-bottom:3px;
  }
  .beach-product-content p{
    margin:10px 0 20px;
  }

  .myButton {
    background-color:var(--main-color);
    border-radius:10px;
    border:1px solid var(--main-color-light);
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:12px 23px;
    text-decoration:none;
    /* text-shadow:0px 1px 0px #283966; */
    text-transform: uppercase;
  }
  .myButton:hover {
    background-color:var(--main-color-light);
    color:#fff;
    text-decoration:none;
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2);
  }
  .myButton:active {
    position:relative;
    top:1px;
  }           
  
  .beach-image-mobile{
    grid-row:2/3;
    align-self:flex-end;
    grid-column: 1/5!important;
    max-width:100%!important;
    opacity:0;
    display:none;
  }
  #sandcastle{
    grid-row:1/2;
  }
  #sandcastle-bg{
    position: absolute;
    height:100%;
    width:100%;
    background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/amarr-doors23/traditional.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center, 0 86%;
    z-index:-1;
  }
  #hatteras{
    grid-row:3/4;
    
  }
  #hatteras-bg{
    position: absolute;
    height:100%;
    width:100%;
    background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/amarr-doors23/carriage-house.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index:-1;
  }
  #atlantica{
    grid-row:2/3;
  }
  #atlantica-bg{
    position: absolute;
    height:100%;
    width:100%;
    background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/amarr-doors23/modern.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    z-index:-1;
  }
  #atlantica img{
    grid-column:3/5;
    justify-self: flex-end;
  }

  #pacifica{
    grid-row:4/5;
  }
  #pacifica-bg{
    position: absolute;
    height:100%;
    width:100%;
    background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/amarr-doors23/garage10-min.png');
    background-size: cover;
    background-repeat: no-repeat;
    z-index:-1;
  }
  #pacifica img{
    grid-column:3/5;
    justify-self: flex-end;
  }
  #pacifica .beach-product-content{
    justify-self: flex-end;
    grid-column:1/4;
    text-align:right;
  }

  .color-flex-group{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap:wrap;
  }
  .color-flex-item{
    max-width:400px;
  }
  .card-header{
    text-align: center;
    max-width:1000px;
    margin:50px auto 30px;
    padding-inline: 2%;
  }
  .colors-flex-img {
    margin:0 auto;
  }
  
  /*  =============== Media Queries ================ */

  @media screen and (max-width:992px) {
    .my-row{
      display:block;
      text-align: center;
      margin:0 auto;
    }
    .beach-image-desktop{
      max-width:100%;
      text-align: center;
    }
    .colors-content{
      text-align: center;
    }
    .sec4-container{
      max-width:100%;
      text-align:center; 
    }
  }