Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="https://kit.fontawesome.com/86ca643d4a.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    </head>
    <body>
      <div class="page-wrapper">
  <div class="nav-wrapper">
        <div class="nav">
        <nav>
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">FAQs</a>
          <a href="#">Services</a>
          <a href="#">Contact Us</a>
        </nav>
        <span class="hamburger"><i class="fas fa-bars"></i></span>
        <div class="mobile-nav-container">
          <div class="sub-nav">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">FAQs</a>
          <a href="#">Services</a>
          <a href="#">Contact Us</a>
          </div> <!-- Sub Nav end -->
        </div> <!-- Mobile Nav container end -->
  
  </div><!-- Nav End -->
  
    </div><!-- Nav Wrapper end -->
<header class="header-wrapper">
<div class="header-inner">
<div class="branding">
<img class="logo" src="https://i.ibb.co/Tgn1QFp/logo-pinkhair.png" alt="pink hair company logo" width="350">

  </div> <!--branding-end-->

    <div class="social">
  <h2>Keep Up To Date With Us!</h2>
    <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
    <a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
    <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
    <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
      </div> <!--- Social end -->

    <div class="contact">
    <a href="mailto:info@company.com">info@pinkhairco.com <i class="fa fa-envelope"></i></a>
    <a href="tel:19006492508">1(800) GET-HAIR <i class="fa fa-phone"></i></a><br />
  <div class="search">
  <button class="button">Book Now</button>
    </div>
</div> <!--header inner end-->
</header><!--header-wrapper end-->
  <div class="kv-wrapper">
    <div class="kv-inner">
<div class="kv-overlay">
<div class="kv-overlay-inner">
  <h2>Want to learn more about our fantastic offers for both new and returning clients? <br /><br />Click the button below for more information</h2>
  <button class="button modal-btn">LEARN MORE</button>
  </div><!-- KV-overlay-inner end -->
      </div><!--KV-Overlay end-->
<img class="desktop-kv" src="https://i.ibb.co/JzZMB8z/kv1.png" alt="kv1">
<img class="desktop-kv" src="https://i.ibb.co/T2Rmd5z/kv2.png" alt="kv2">
<img class="desktop-kv" src="https://i.ibb.co/Kx1y0Lr/kv3.png" alt="kv3">
<img class="mobile-kv"  src="https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="mkv"    />
    </div> <!--KV Inner End -->
  </div><!-- KV-wrapper end -->
  <section class="main-content-wrapper">
    <div class="main-content-inner">
      <h1>Welcome to the Pink Hair company Salon</h1>
    <p>Where your hair has never looked so pretty! Our hairstylists are careful to create an ideal 'do for your hair color by carefully selecting the best ingredients for your hair type, the type of cut you are requesting, and by matching up your hair with our many beautiful prints and hairstyles. We offer flat irons, rotary irons, and heat, infrared and chlorine treatments.</p>
<br />
<p>We also offer a full range of androgynous, hair color styles and colors. That is what makes Pink Hair so unique, its location in the heart of Coral Gables makes getting to our location easy, convenient, and gives you the opportunity to be able to see and experience the many beautiful displays of hair color we have</p>
<div class="main-imgs">
<div class="img-wrapper">
<img src="https://images.unsplash.com/photo-1572872202671-dc8bd60080ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="barber chairs" width="400" />
</div>
<div class="img-wrapper">
      <img src="https://images.unsplash.com/photo-1562259920-47afc3030ba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="barber chairs" width="400" />
</div>
<div class="img-wrapper">
      <img src="https://images.unsplash.com/photo-1551386234-48770e28e791?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="barber chairs" width="400" />
  </div>
  <div class="img-wrapper">
      <img src="https://images.unsplash.com/photo-1527512950678-b88a241e9f4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="barber chairs" width="400" />
  </div>
      </div> <!-- mainimages-->
<p>The more structured the hair color is from what is known as the "white pick, the deeper the color." For instance, if your hair is light brown, a "white pick" would allow for deeper yellow, blue, green and red hues.
      </p> <br /><p>
If your color is part of a mixed race family, you may be affected by the color you've inherited, a common cause for people of mixed race to have "off" colors in their hair.</p>


    </div> <!-- main-content-inner-->
  </section> <!-- main content wrapper -->
 <section class="cta">
  
  <div class="action-wrap">
  
  <div class="action-container">
    <div class="action-icon">
<i class="fas fa-cut"></i>
    </div>
  <div class="action-text">
    <h2 class="action-title">Cuts & Styles</h2>
  
    <p class="action-flavor">
Offering Hair Cuts, and styles suitable for all ages and genders!
  </p>
    </div>
  
    <button class="action-button">
   LEARN MORE 
    </button>
    </div>
    <!------>
  <div class="action-container">
    <div class="action-icon">
<i class="fas fa-calendar-alt"></i>
    </div>
  <div class="action-text">
    <h2 class="action-title">Booking</h2>
  
    <p class="action-flavor">
Our Booking team works to ensure that we can always find room for you.</p>
    </div>
  
    <button class="action-button">
   LEARN MORE 
    </button>
    </div>
    <!------>
  <div class="action-container">
    <div class="action-icon">
<i class="fas fa-bath"></i>
    </div>
  <div class="action-text">
    <h2 class="action-title">Wash & Dry</h2>
  
    <p class="action-flavor">
We will professionally wash and dry your hair with our high quality product.
  </p>
    </div>
  
    <button class="action-button">
   LEARN MORE 
    </button>
    </div>
    <!------>
  <div class="action-container">
    <div class="action-icon">
<i class="fas fa-user-graduate"></i>
    </div>
  <div class="action-text">
    <h2 class="action-title">Skilled team</h2>
  
    <p class="action-flavor">
Our Team is handpicked from the most highly trained and educated prospects.
  </p>
    </div>
  
    <button class="action-button">
   LEARN MORE 
    </button>
    </div>
    <!------>
    </div>
    </div>
    </section>
    <section class="news-wrapper">
      <div class="left-wrapper">
        <div class="left-inner">
          <h2>NEWS</h2>
          <h3>Keep up to date with what's going on with Pink Hair Co.</h3>
          <a href=""><i class="fa fa-info"></i> This Franchise Gives Hair Stylists a Salon of Their Own Without the High Costs</a>
<a href=""><i class="fa fa-info"></i> How Do You Innovate a Barbershop? Ask Great Clips Franchisees.</a>
<a href=""><i class="fa fa-info"></i> #8 on the Franchise 500: Great Clips Reinvents the Haircut Experience</a>
          
          <a href=""><i class="fa fa-info"></i> 100 style trends for the on the go Mom.</a>
        </div> <!-- left inner -->
      </div> <!--left wrap -->
<div class="right-wrapper">
        <div class="right-inner">
        
        </div> <!-- right inner -->
      </div> <!--right wrap -->
    </section> <!--news-wrapper-->
<footer class="footer-wrapper">
<div class="footer-inner">

<div class="contactus">
  <h2>Contact Us</h2>
    <div class="contact-footer">
    <a href="mailto:info@company.com">info@pinkhairco.com <i class="fa fa-envelope"></i></a>
    <a href="tel:19006492508">1(800) GET-HAIR <i class="fa fa-phone"></i></a>
  </div>
  </div>
<div class="branding-foot">
<img class="logo" src="https://i.ibb.co/Tgn1QFp/logo-pinkhair.png" alt="pink hair company logo" width="250">
    <div class="social-footer">
    <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
    <a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
    <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
    <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
      </div> <!--- Social end -->
  </div>
<div class="followus">
  <h2>Follow Us</h2>
       <nav class="foot-navigation">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">FAQs</a>
          <a href="#">Services</a>
          <a href="#">Contact Us</a>
          <a href="#">Site Map</a>
        </nav>
  </div>
  </div><!--footer-inner -->
    <button onclick="scrollToTop()" class="toTop"><i class="fa fa-chevron-up" aria="hidden" aria-hidden="true"></i></button>
        </footer><!-- footer wrapper -->
<!-- Edit your Modal Window here -->
<div class="modal-overlay">
  <div class="modal">
    <h2 class="modal-title">NEW and RETURNING clients</h2><br />
    <h2>
      To receieve a coupon for $25 off a cut and style redeemable at your next visit, please complete the form below to be emailed this, and other deals.
    </h2><br />
    <label for="name">Name</label>
    <input type="name" name="name">
    <label for="email">Email</label>
    <input type="email" name="email">
    <button value="Submit">
      Submit
    </button>
<span class="modal-close">X</span>
<!-- Modal Edit end -->

  </div><!--page wrapper end -->

    </body>
</html>
              
            
!

CSS

              
                /// Mixin to manage responsive breakpoints
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin bp($breakpoint) {

    // If the key exists in the map
    @if map-has-key($breakpoints, $breakpoint) {
  
      // Prints a media query based on the value
      @media screen and (max-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    }
  
    // If the key doesn't exist in the map
    @else {
      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
      +"Available breakpoints are: #{map-keys($breakpoints)}.";
    }
  }
  
  
  //VARIABLES
  
  $breakpoints: (
  'mobile-sm': 375px,
  'mobile': 425px,
    'tablet': 768px,
    'laptop': 1280px,
    'laptop-lg': 1480px,
  'desktop': 2600px) !default;
  
  
  $primary: #ee74b5;
$primary-accent: #010010;
$primary-opaque: #ee74b5CF;
  $secondary: #262626;
$secondary-opaque: rgba(38, 38, 38, 0.6);
  $accent: #fffff7;
  $grad-st: #ee74b5;
  $grad-end: darken(#ee74b5, 10%);
  $highlight: #f9f9f9;
  $shade: #36454f;
  
  
  $transition: 400ms ease all;
  // SCSS START
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
  
    font-family: 'Montserrat', sans-serif;
    position: relative;
  }
  
  .page-wrapper{
    max-width: 100%;
  }

//NAVIGATION STYLES
  .nav-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: $primary;
    margin: auto;
  padding: 1rem;
    position: relative;
    width: 100%;
  }
    .nav {
      margin: auto;
      display: flex;
    align-items: center;
      a {
        text-decoration: none;
        color: $highlight;
        padding: 1rem;
        text-transform: uppercase;
    font-size: 1.66rem;
  transition: $transition;
        &:hover{
          color: lighten($shade, 6%);
        }
  
      }
  
  }
        .hamburger {
        text-decoration: none;
        color: $highlight;
        padding: 1rem;
        text-transform: uppercase;
    font-size: 1.66rem;
  transition: $transition;
          display: none;
        &:hover{
          color: lighten($shade, 6%);
        }
  
      }
  //Sub-Nav Style
  
  .sub-nav {
    opacity: 0;
    display: none;
    

  }

  // Break points for SCSS and Hamburger Nav. //
  
  @include bp('tablet') {
    header {
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin: auto;
  
      .nav {
        position: relative;
      }
    }
  
    .hamburger {
      font-size: 2rem;
      display: block;
    }
  
  
    .mobile-nav-container {
      margin: 0px;
      padding: 0px;
      text-align: center;
      height: auto;
      width: 100%;
  z-index: 99999;
      position: absolute;
  top: 100%;
  left: 0%;

      .sub-nav {
        background: black;
opacity: 0;
        width: 100%;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 999;
        position: absolute;
        max-height: 0vh;
        transition: max-height 700ms ease-out !important;
        
        a{
          opacity: 0;
             transition: opacity 500ms ease-in
        }
      }
  
  
  
  
  
    }
  
    .expanded {
      opacity: 1 !important;
      display: flex !important;
      max-height: 80vh !important;
      transition: max-height 800ms ease-in-out !important;
      
      a{
        opacity: 1 !important;
        transition: opacity 500ms ease-in;
      }
    }
  
  }
  

// SITE START

.header-wrapper{
  max-width: 100%;
  position: relative;
}

.header-inner{
  padding: 1rem;
  width: 100%;
background: linear-gradient($secondary, lighten($secondary, 8%));
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  
}

.social{
  text-align: center;
  h2{
    color: $highlight;
  }
  a{
  color: $primary;
    font-size: 3rem;
    text-align: center;
    margin: 0.4rem;
transition: $transition;
    &:hover{
color: $accent;
}
}
}


button{
  color: $highlight;
  border: 2px $primary solid;
  background: none;
  font-size: 2rem;
  padding: 1rem 2.4rem;
  transition: $transition;
      margin: auto;
  &:hover{
    background: $primary;
  }
}

  .contact{
  display: flex;
    flex-direction: column;
    
    a{
      text-decoration: none;
      color: $primary;
      font-size: 1.99rem;
      font-weight: 600;
      transition: $transition;
      &:hover{
        color: lighten($highlight, 10%);
      }
    }
}

.kv-wrapper{
  width: 100%;
background: linear-gradient($grad-st, $grad-end);
  position: relative;
}
.kv-inner{
    text-align: center;

  img{
    margin: 1rem;
    border: 2px solid $secondary;
    box-shadow: 6px 4px 8px $secondary;
  }
}

      button{
        color: $highlight;
        background: $primary;
        border: 1px solid $highlight;
        transition: $transition;
        
        &:hover{
          background: darken($primary, 5%);
        }
      }

.kv-overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: $secondary-opaque;
  
}

.kv-overlay-inner{
padding: 3rem;

  h2{
    margin: 1.5rem;
    font-size: 2rem;
    color: $accent;
  }
}

// POPUP STYLE

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: #00000088;
  width: 100%;
  height: 100vh;
  display:flex;
  align-items: center;
  justify-content: center;
 visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.35s;
}

.modal {
position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: $accent;
  padding: 2rem;
  width: 50%;
  height: auto;

  label{
    font-size: 1.66rem;
  }
  input{
    font-size: 2rem;
  }
  
  .modal-title{
    font-size: 2.44rem;
  }
h2{
text-align: center;
margin: 0 auto;
  font-size: 2rem;
}

button{
  font-family: 'Montserrat', sans-serif;
  color: $accent;
  background: $primary;
  padding: 10px 15px;
  margin: 10px;
  font-weight: bold;
  border: 1px solid #111;
  box-shadow: 2px 3px 3px black;
  transition: ease all 300ms;

  &:hover {
    transition: ease all 300ms;
    background: $primary;
  }
}
}

.active{
visibility: visible;
opacity: 1;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
}

//Modal style End //

//CTA SECTION STYLE
 .cta{
    width: 100%;
background: linear-gradient($secondary, lighten($secondary, 25%));
    filter: blur(0.44);
  }
  
  .action-wrap{
    display: flex;
    flex-direction: row;
    flex-basis: 25%;
    justify-content: space-evenly;
    background: rgba(0,0,0,0.4);
    padding: 4rem;
  
  }
  
  .action-container{
    background: linear-gradient(to bottom, $grad-st, $grad-end);
    padding: 2rem;
    margin: 2rem;
    max-width: 20%;
    min-height: 425px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    border-radius: 10px;
    box-shadow: 2px 4px 6px $primary;


  }
  
  .action-icon{
    color: $accent;
    font-size: 5rem;
    text-align: center;
    transition: $transition;
  
    &:hover{
      color: $shade;
    }
  }
  
  .action-text{
    h2{
      font-size: 2.4rem;
  margin: 1rem;
      text-transform: uppercase;
      font-weight: 800;
      color: $secondary
    }
    .action-flavor{
      padding: 1.25rem;
      font-weight: bold;
      font-size: 1rem;
    height: auto;
      color: lighten($accent, 15%);
  
    }
  }
  
  .action-button{
  border-top: none;
    border-left: none;
  border-bottom: 2px solid $highlight;
    background: $primary;
    color: $highlight;
    margin: auto;
    padding: 1.25rem 3.25rem;
  transition: $transition;
  font-size: 1.22rem;
    align-content: flex-end;
    &:hover{
      background: darken($primary, 10%);
    }
  }
  
//CTA SECTION

// News Section //

.news-wrapper{
  width: 100%;
  background: url("https://images.unsplash.com/photo-1501699743193-a242e09db93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  height: 800px;
  position: relative;
  
  &:before{
    content: '';
    position: absolute;
   background-color: #0009;
    width: 100%;
    height: 100%;
    filter: blur(4);
  }
  
}

.left-wrapper{
  max-width: 50%;
  width: 100%;
  background: $primary-opaque;
  height: 100%;
  border-right: 2px double $shade;
  text-align: center;
  padding: 2rem;
  z-index: 999;
  position: absolute;
}

.left-inner{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  
  h2{
    color: $accent;
    font-size: 3.75rem;
    padding: 2rem;
    text-decoration: underline;
    letter-spacing: 3px;
   
  }
  
  h3{
    color: $accent;
    font-size: 1.86rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }
  a{
    text-decoration: none;

    font-weight: 700;
    margin: 2rem;
    font-size: 1.5rem;
    transition: $transition;
    font-style: italic;
color: $primary-accent;
    &:hover{
    color: $accent;

}
  }
}

.main-content-wrapper{
  max-width: 100%;
  background: linear-gradient($grad-st, $grad-end);
}
.main-content-inner{
  padding: 4rem;
  h1{
    font-size: 3.5rem;
    color: $accent;
    text-transform: uppercase;
    font-weight: 800;
    text-align: center;
  }
  p{
    font-size: 1.66rem;
    letter-spacing: 4px;
  }
 .main-imgs{
    text-align: center;
        display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   margin: 2rem;
   .img-wrapper{
     transition: 400ms ease all;
     position: relative;
         &:before{
       content:'';
       height: 100%;
       width: 100%;
           position: absolute;
              transition: 400ms ease all;
     }
     &:hover{
 transition: 400ms ease all;
     &:before{
       content:'';
       height: 100%;
       width: 100%;
       background-color: #0009;
       position: absolute;
    
     }
     }
   
   img{

   border: 2px solid $secondary;
     box-shadow: 2px 3px 4px $shade;
   }
   }
  }
}

.footer-wrapper{
 width: 100%;
  background: $secondary;
}
.footer-inner{
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  align-items: center;
  padding: 3rem;



  h2{
    color: $accent;
    font-size: 2rem;
    text-decoration: underline;
         text-align: center;
    margin: auto;
  }
  .contact-footer{
display: flex;
    align-items: flex-start;
    flex-direction: column;
    a{
    text-decoration: none;
    color: $primary;
    font-weight: 800;
   font-size: 1.5rem;
flex-direction: row-reverse;
      .social-footer{
        text-align: center;
                margin: auto;
        a{
text-align: center;

}
      }

 

}
  }


  .foot-navigation{
    columns: 2;
    a{
      padding: 1px;
    }
  }
  
  h2{
    color: $accent;
    font-size: 2rem;
    text-decoration: underline;

  }
  a{
    text-decoration: none;
    color: $primary;
    font-weight: 800;
    font-size: 1.5rem;
      display: flex;
  flex-direction: column;
    transition: 400ms ease all;
      &:hover{
      color: $highlight;
    }
}
}

.branding-foot{


  .social-footer{
    flex-direction: row;
          display: flex;
    align-items: center;
    a{
      font-size: 2.5rem;
      padding: 5px;
      text-align: center;
      transition: 400ms ease all;
      margin: auto;
    }

  }
}

.mobile-kv{
  visibility: hidden;
  display: none;
}
.toTop{   
 position: fixed;
    bottom: 0;
    right: 0;
    background: rgba(200, 200, 200, 0.4);
    color: white;
    border-radius: 9px;
    padding: 1em;
    margin: 2em;
    border: none;
    -webkit-transition: 400ms ease all;
    transition: 400ms ease all;
  z-index: 9999999;
}
@include bp('desktop'){
  .kv-inner{
    img{
      max-width: 30% !important;
    }
  }

}
@include bp('laptop'){
  .nav{
    nav{
      a{
        display: none;
      }
    }
  }
  .header-inner{
    flex-direction: column;
    padding: 1rem;
  }
  .subscription-section {
    padding: 1.33rem;
  }
  .mobile-kv{
  visibility: visible;
  display: block;
    max-width: 100%;
    margin: 0 !important;
    box-shadow: none !important;
}
  .desktop-kv{
    visibility: hidden;
    display: none;
  }
  .kv-overlay{
    width: 100%;
  }
    .kv-inner{
    img{
      max-width: 100% !important;
    }
  }
  .main-content-inner {
    .main-imgs{
      flex-direction: column;
    } img{
      margin: 1rem 0;
      width: 100%;
}
  }  
  .action-wrap{
    flex-wrap: wrap;
    
  }
  .action-container{
    max-width: 40%;
  }
  .left-wrapper {
    max-width: 100%;
}
  
  .foot-navigation{
    columns: 1 !important;
    a{
      text-align: center;
      
    }
  }

  .contact{
    padding: 1rem;

  }

  .search{
text-align: center !important;
      margin: auto !important;

  }

}
@include bp('tablet'){
  .action-wrap{
        padding: 0;
  }
  .action-container{
    max-width: 100%;

  }
  .kv-overlay-inner {
    padding: 0.34rem;
}
  .kv-overlay{
    height: auto;
   
  }
  
  .foot-navigation{
    columns: 1;
  }
  .footer-inner{
    flex-direction: column;
  }
  .contactus {
    margin: 2rem;
}
  
  .nav-wrapper{
    position: fixed;
        z-index: 99999;
  }
  .left-wrapper{
    padding: 0;
  }
  .kv-overlay-inner {
h2 {
    margin: auto;
    font-size: 1.33rem !important;
    }
    .button{
      font-size: 1.3rem !important;
    }
  }
  .contact{
      padding: 1rem;
    a{
      font-size: 1.4rem;

    }
  }
}
@include bp('mobile'){
.main-content-inner {
    padding: 1rem;
  h1 {
    font-size: 2rem;
  }
  

  .foot-navigation{
    columns: 1;
  }
}
  



}
@include bp('mobile-sm'){
  .img-wrapper{
        flex-direction: column;
    display: flex;
  }

}
              
            
!

JS

              
                let modalBtn = document.querySelector('.modal-btn');
let modalOverlay = document.querySelector('.modal-overlay');
let modalClose = document.querySelector('.modal-close');

popUp = () => {
modalBtn.addEventListener('click', () =>{
modalOverlay.classList.add('active');
});
}

closepopUp = () => {
modalClose.addEventListener('click', () => {
modalOverlay.classList.remove('active');
});

}

popUp();
 closepopUp();

let Burger = document.querySelector('.hamburger');
let mNav = document.querySelector('.sub-nav');
mobileNav = () => {
  Burger.addEventListener('click', () => {
    mNav.classList.toggle('expanded');
  });
}

mobileNav();

const scrollToTop = () => {
    const c = document.documentElement.scrollTop || document.body.scrollTop;
    if (c > 0) {
      window.requestAnimationFrame(scrollToTop);
      window.scrollTo(0, c - c / 8);
    }
  };
scrollToTop();
              
            
!
999px

Console