html {
  scroll-padding-top: 110px;
}


html {
  scroll-behavior: smooth;
}

#aqua-learn-more{
scroll-margin: 150px;
}
#aqua-range{
scroll-margin: 150px;
}

/* -----------------------------------
       Typography Styles
----------------------------------- */
.aqua-pro-h2{
font-size:48px;
font-weight:400;
color:#fff;
text-transform:uppercase;
margin:0;
text-align: left;
}

.aqua-pro-h3{
font-size:22px;
color:#fff;
font-family:magistral;
}

.aqua-pro-h4{
font-size:14px;
color:#fff;
font-family:magistral;
letter-spacing: 1px;
}

.aqua-pro-h4 span{
font-size:12px;
font-weight:100;}

.aqua-p{
color:#fff;
opacity: 0.5;
font-size: 18px;
}


/* -----------------------------------
        Layout & Containers
----------------------------------- */
.aqua-splash-container{
min-height: calc(100vh - 100px);
display:flex;
flex-direction: row;
justify-content: center;
align-items:center;
gap:25px;

flex-wrap: wrap;
  

padding-right: 50px;
margin-top:90px;

width: 90vw;
margin: auto;
max-width: 1440px;

}

.splash-container{
  height: calc(100vh - 100px);
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  gap:25px;


  padding-right: 50px;
  }
  

.aqua-page-wrap{
  width: 90vw;
  margin: auto;
  max-width: 1440px;

  margin-bottom: 100px;
}

.aqua-pro-col{
  width: 45%;
  min-width: 300px;
  height: auto;

  text-align: left;

  display: flex;
  flex-direction: column;
}

.splash-content{
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;

gap:10px;
}

.aqua-page-contain{
padding: 0 50px;
}

.aqua-button-row{
display:flex;
flex-direction:row;
justify-content: space-between;
flex-wrap:wrap;
gap:10px;
max-width:350px;

margin-top:10px;
}

.aqua-feature-row{
min-width: 350px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-between;
gap:10px;
margin: 100px 0 50px 0;
}

.aquaProSplashImg{
  max-height: 70vh;
  margin: auto;

  border-radius: 25px;
}

.aqua-feature{
min-height: 200px;
min-width:200px;
aspect-ratio:1/1;
background: #1d1d1d;
border-radius: 25px;

display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
}

.aqua-feature .aqua-pro-h3{
font-size: 16px !important;
}

.aqua-review-contain{
width:100%;
padding:50px;
background:#1d1d1d;
border-radius:25px;
}

.aqua-reviews-row{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-between;
gap:10px;
}

.aqua-review{
width:auto;
display:flex;
flex-direction:row;
align-items:center;
gap:10px;
flex: 0 3 auto;
max-width: 390px;
}

/* -----------------------------------
        Miscellaneous
----------------------------------- */

.aqua-pro-splash{
width:100%;
max-width: 790px;
margin:auto;
}

.aqua-pro-icon{
width:175px;
margin-bottom:15px;
margin-left:0;
}

.aqua-button{
background:#fff;
border:1.5px solid #fff;
border-radius: 10px;
padding:8px 16px;
}

.aqua-button.invert{
background:transparent;
border:1.5px solid #fff
}

.aqua-button a{
color:#000 !important;
font-family:magistral;
font-weight:600;
font-size:18px;
letter-spacing:0.5px;}

.aqua-button.invert a{
color:#fff !important}

  .products.wrapper .product-item-info .product-item-details .product-item-name a {
      color: #fff;
    }

    .products.wrapper .product-item-info .product-sku,
    .products.wrapper .product-item-info .product-item-details .price-box {
      color: #fff;
    }

    .products-grid .product-item-info:hover,
    .products-grid .product-item-info.active {
      background: #000;
    }

.aqua-grid-parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.aqua-div1,.aqua-div2,.aqua-div3{
padding: 50px;
border-radius:25px;
background-size:cover !important;
background-position:center;
position:relative;
}

.aqua-div1,.aqua-div2,.aqua-div3 p{ 
color:#fff;
font-size:18px !important;
}

.aqua-div1 { 
grid-area: 1 / 1 / 2 / 3; 
background:url("/media/wysiwyg/AquaPro/AquaPro-Waterproof-bg.jpg") rgba(0, 0, 0, 0.5);
background-blend-mode: overlay;
}
.aqua-div2 { 
grid-area: 2 / 1 / 3 / 2; 
background:url("/media/wysiwyg/AquaPro/AquaPro-PVC-bg.jpg") rgba(0, 0, 0, 0.5);
background-blend-mode: overlay;
}
.aqua-div3 { 
grid-area: 2 / 2 / 3 / 3; 
background:url("/media/wysiwyg/AquaPro/AquaPro-Attachment-bg.jpg") rgba(0, 0, 0, 0.5);
background-blend-mode: overlay;
}

.aqua-best-buy{
width:50px;
}


.aqua-image-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.aqua-grid-image{
background:red; 
min-height: 275px;
background-size: cover !important;
background-position:center !important;;
background-repeat:no-repeat;
border-radius:25px;
}

.aqua-grid-image.one { 
grid-area: 1 / 1 / 4 / 4; 
background:url("/media/wysiwyg/AquaPro/Aqua-PRO-T30-Lifestyle_27_.jpg");
}
.aqua-grid-image.two {
 grid-area: 1 / 4 / 4 / 6; 
background:url("/media/wysiwyg/AquaPro/Aqua-PRO-Water-Lifestyle_27_.jpg");
}
.aqua-grid-image.three {
 grid-area: 4 / 1 / 6 / 3;
background:url("/media/wysiwyg/AquaPro/AQUA-PRO-D50_lifestyle_4_.jpg");
}
.aqua-grid-image.four {
grid-area: 4 / 3 / 6 / 5;
 background:url("/media/wysiwyg/AquaPro/AQUA_PRO_DE20.jpg");
}
.aqua-grid-image.five {
 grid-area: 4 / 5 / 6 / 6; 
 background:url("/media/wysiwyg/AquaPro/AQUA-PRO-D50_lifestyle_5_.jpg");
}

.aqua-feature-icon{
width: 80px;
height:auto;
}

.aqua-feature-icon.small{
width: 70px;
height:auto;
}

    .page-layout-1column .column.main {
      padding-bottom: 0;
    }


/* -----------------------------------
        Responsive Media Queries
----------------------------------- */

@media only screen and (max-width: 768px) {


  .aqua-splash-container{
    min-height: calc(100vh - 100px);
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    gap:25px;
    
    flex-wrap: wrap;
      
    
    padding: 15px!important;
    margin-top:90px !important;
    
    width: 90vw;
    margin: auto;
    max-width: 1440px;
    
    }

.aqua-page-col{
padding:0 25px;
 }

.aqua-feature-row{
min-width:unset;
justify-content: center;
}

.splash-container {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding-right: 0;
    padding: 25px;
}

.aqua-grid-parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.aqua-div1,.aqua-div2,.aqua-div3{
padding: 25px;
border-radius:25px;
background-size:cover !important;
background-position:center;
position:relative;
}
}

@media only screen and (max-width: 768px) {


.aqua-grid-image{
min-height: 250px;
background-size: cover !important;
background-position:center !important;;
background-repeat:no-repeat;
border-radius:25px;
}
  .aqua-image-grid {
    grid-template-columns: 1fr; /* 1 column layout */
  }

  /* Reset all grid-area to auto so items stack vertically */
  .aqua-grid-image.one,
  .aqua-grid-image.two,
  .aqua-grid-image.three,
  .aqua-grid-image.four,
  .aqua-grid-image.five {
    grid-area: auto;
  }
}





/* Atlas */ 

.atlas-h1{
  font-family: magistral;
  font-weight: bold;

  font-size: 150px;
  margin: 0px;
  text-align: left;}
.atlas-h2{
  font-family: univers;
  font-weight: bold;
  font-style: oblique;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 2.5px;

  font-size: 75px;
  margin: 0;
    margin-top:-25px}
.atlas-h3{
  font-family: univers;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 2.5px;

  font-size: 32px;}
h4{
    font-size: 16px !important;  }
  .atlas-h4{
    font-family: magistral;
    font-weight: bold;
  
    font-size: 16px;
    margin: 0px;
    text-align: left;}

.text-wrapper{
  margin:  100 auto !important;
  text-align: left !important;
  width: 700px !important;}

.wrapper{
  margin-top: 100px !important;
  text-align: left !important;
  min-width: 700px !important;}

.flex-container {
  display: flex;
   flex-direction: row;    
  height: auto;
  min-height: 300px;
  padding: 0px;
  gap: 50px;

  margin-top: 100px;

  min-width: 300px;
  flex-wrap: wrap;}
  .flex-container.flip {
  flex-direction: row-reverse;
  margin-bottom: 100px;}
    .flex-container > div{
      border-radius: 5px;
      padding: 8px;}


.item1 { 
  /* flex:1 1 300px; */
  flex-grow:1;
  flex-basis:300px;}
  .item1.waterproof{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;

    background-image: url('/CSS/Images/Atlas/ATLAS_Waterbead.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  }
    .item1 h3{
      margin: 0;}

.item2 { 
  /* flex:0 1 300px; */
  flex-basis:400px;}
  .item2 li{
      color: white !important;}

.atlas-feature-icon{
  height: 100px;}
  .atlas-feature-icon.small{
    height: 50px;
    margin: auto;}
    .atlas-feature-icon.smaller{
      height: 30px;
      margin: auto;}


.vid-feature{
  width: 700px;
  margin: auto;
  margin-top: 100px;

  text-align: center;}
  .vid-feature h3{
    text-align: center;}
    .vid-feature img{
      margin-top: 25px;}

.masonry{
  column-gap: 5px !important;}
  .masonry img{
    padding: 2.5px;}

.black-banner{
  width: 100vw;
  padding-top: 50px;
  padding-bottom: 50px;

  background: black;

  text-align: center;

  margin: 100px auto;}
  .black-banner .wrapper{
    text-align: center !important;}
    .black-banner .wrapper h3{
      text-align: center !important;}

.range-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;}
  .feature-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;}
    .atlas-feature{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 10px;}


.product-container{
  justify-content: flex-start !important;
  gap: 50px;
  margin-top: 50px;}
  .card-body{
    background: #fff;}

@media screen and (max-width: 1024px) { 

  .text-wrapper{
    margin:  100 auto !important;
    text-align: left !important;
    width: 90% !important;
    margin: auto;}
  
  .wrapper{
    margin-top: 100px !important;
    text-align: left !important;
    min-width: 90% !important;
  margin: auto;}
  

  .splash {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-image: url(/CSS/Images/Atlas/atlas-BG.jpg);
    background-size: cover;
    background-position: 60% 50%;
    background-repeat: no-repeat;
    min-height: 500px;
}
  .splash .content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.atlas-h1 {
  font-size: 80px;
}
.atlas-h2 {
  font-size: 38px;
}


  .flex-container {
    display: flex;
     flex-direction: column;    
    height: auto;
    min-height: 300px;
    padding: 0px;
    gap: 50px;
  
    margin-top: 100px;
  
    min-width: 300px;
    flex-wrap: wrap;}

    .flex-container.flip {
      flex-direction: column;
      margin-bottom: 100px;}

      .item2 { 
        /* flex:0 1 300px; */
        flex-basis:unset !important;}
      
  .vid-feature {
    width: 90%;
    margin: auto;
    margin-top: 100px;
    text-align: center;
  }

  .feature-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 25px;
}
    
  
  }