.nav {
    width: 100%;
    position: relative;
  }
  
  .nav > .nav-header {
    display: inline;
  }
  
  /* .nav > .nav-header > .nav-title {
    display: inline-block;
    font-size: 22px;
    color: #fff;
    padding: 10px 10px 10px 10px;
  } */
  
  .nav > .nav-btn {
    display: none;
  }
  
  .nav > .nav-links {
    display: inline;
    float: right;
    font-size: 18px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
  }
  
  .nav > .nav-links > a {
    display: inline-block;
    padding: 13px 10px 13px 10px;
    text-decoration: none;
    color: #efefef;
    
  }
  
  .nav > .nav-links > a:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
  
  .nav > #nav-check {
    display: none;
  }
  /*.logo{*/
  /*  max-width: 50%;*/
  /*    padding: 20px 0px;*/
  /*}*/
  .menu{
    background-color: #4d4d4d;
    z-index: 9999;
    width: 100%;
  }
  .home::before{
      content: " ";
      background-image: url(../images/background.png);
      position: absolute;
      top: 0;
      right: 0;
      background-repeat: no-repeat;
      height: 500px;
    width: 500px;
    z-index: -1;
  }
  .home-text h5{
      color: #FF9A45;
  }
  .home-text h1 span{
      color: #FF9A45 !important;
  }
  .home-text h1{
    color: #4D4D4D;
    font-weight: 700;
    font-size: 70px;
  }
  .home-text p{
      color: #757C75;
      padding-bottom: 20px;
  }
.home-img img{
    height: 500px;
    width: auto;
    -webkit-filter: drop-shadow(5px 10px 15px rgba(77, 77, 77, 0.5));
    filter: drop-shadow(5px 10px 15px rgba(77, 77, 77, 0.5));
}
  .home-text-back{
      position: relative;
  }
  .info{
      padding: 50px 0px;
  }
  .home-text a{
      text-decoration: none;
      background-color: #4D4D4D;
      color: #FF9A45;
      font-size: 15px;
      font-weight: 600;
      padding: 15px 30px;
      border-radius: 30px;
      transition: 0.5s;
  }
  .home-text a:hover{
      color: #4d4d4d;
      background-color: #FF9A45;
      box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
  }
  .feature-img{
    -webkit-filter: drop-shadow(5px 10px 15px rgba(77, 77, 77, 0.5));
    filter: drop-shadow(5px 10px 15px rgba(77, 77, 77, 0.5));
  }
.feature-titel{
  font-size: 32px;
  padding-bottom: 15px;
  margin-bottom: 0px;
  color: #4d4d4d;
  font-weight: 700;
}
.feature-list h4{
  font-size: 20px;
  color: #FF9A45;
}
.feature-list p{
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.feature{
  position: relative;
}
.feature::before{
  content: " ";
  background-image: url(../images/background.png);
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  height: 500px;
width: 500px;
z-index: -1;
transform: rotatey(178deg);
}
html {
  scroll-behavior: smooth;
}
.heading h1{
  font-size: 38px;
  font-weight: 700;
  color: #4D4D4D;
  margin-bottom: 20px;
}
.heading h1 span{
  color: #FFA44B;
}
.dm-width {
  width: 400px;
  margin: 0 auto;
}

.iphone-mockup {
  position: relative;
  z-index: 5;
}

.dm-device {
   position: relative;
   width: 100%;
   padding-bottom:203.477897%;
   margin-bottom: 20px;
}

.device {
 position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   -webkit-background-size: 100% 100%;
   
   background-repeat: no-repeat;
         background-image: url(https://res.cloudinary.com/di5yipnns/image/upload/v1482236588/apple-iphone_aivldo.png);
 background-size: cover;
   background-position: center center;
}

.screen {
  overflow: hidden;
   position: absolute;
   top: 18.1%;
   bottom: 20.6%;
   left: 12.49%;
   right: 17.4%;
   z-index: 0;
   /* background-color: #E91E63; */
}

.slider {
 height: 100%;
 width: 100%;
 z-index: 1;
}
.slider div {
 height: 100%;
}

/* .slider__item {
   font-size: 100px;
   color: rgba(255,255,255,0.7);
   display: flex;
   justify-content: center;
   align-items: center;
} */
.slider__item img{
  width: 100%;
  height: 100%;
}
.screenshot{
  position: relative;
} 
.screenshot::before{
  content: " ";
  background-image: url(../images/background.png);
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  height: 500px;
width: 500px;
z-index: -1;
}
.feature-titel span{
  color: #FFA74C;
}
.feature-list ul li a{
  color: #4d4d4d;
  font-size: 18px;
  font-weight: 500;
  transition: 0.5s;
}
.feature-list ul li{
  padding-bottom: 20px;
}
.feature-list ul li a:hover{
  text-decoration: none;
  margin-left: 10px;
}
.footer{
  background-color: #4D4D4D;
  margin-top: 50px;
  height: 300px;
  width: auto;
}
footer{
  background-color: #4D4D4D;
}
.footer-col1 img{
max-width: 400px;
}
.footer-col1 p{
  margin-top: 15px;
  color: #f5f5f5;
  font-size: 15px;
}

.footer-col2 h4{
  color: #FFA24A;
  font-size: 20px;
}
.footer-col2 a{
  text-decoration: none;
  color: #f5f5f5;
  display: block;
  width: 100%;
  padding: 5px 0px;
  border-bottom: 1px solid #666666;
}
.footer-col2 a:last-child{
  border-bottom: none;
}
h4.heading{
  width: 100%;
}
.header{
  background-color: #FF9A45;
  padding: 50px 0px;
  text-align: center;
  color: #fff;
}
.services{
  background-color: #4D4D4D;
  padding: 30px 20px;
  margin-top: 20px;
  border-radius: 10px;
  position: relative;
}
.services h4{
  color: #FFA24A;
}
.services p{
  color: #f5f5f5;
  margin: 0;
}
.services::before{
  content: " ";
    width: 99%;
    height: 93%;
    position: absolute;
    padding: 5px;
    top: 6px;
    left: 0;
    border-radius: 10px;
    border: 1px dashed #fff;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}









  @media (min-width: 1200px) and (max-width: 1299px){

  }
  @media(max-width: 1199px){
    .home-img img{
      height: 400px;
    }
  }
  @media(max-width: 991px){
    .nav > .nav-btn {
      display: inline-block;
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,
  .nav #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
    z-index: 1;
  }
  .nav > .nav-links{
      top: 100%;
      transform: unset;
  }
  .home-img img{
    margin-left: auto;
    margin-right: auto;
  }
  }
  @media(max-width: 767px){
    .screenshot::before{
      content: unset;
    }
    .feature::before{
      content: unset;
    }
    .home::before{
      content: unset;
    }
    .home-img{
      margin-top: 50px;
    }
  }
  @media(max-width: 575px){
    .home-img img{
      width: 350px;
      height: auto;
    }
    .info{
      overflow-y: hidden;
    }
    .dm-width{
      width: 300px;
    }
  }