.heading_text h1{
  font-family: 'black_north_demoregular';
  color: #000;
  font-size: 80px;
  text-align:center;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-shadow: 0 0 10px rgba(0,0,0,.7);
}

.heading_text{text-align: center;width: 100%;padding: 80px 0 0;/* background: #000; */}
.heading_text h1 span{position: relative;}
.heading_text h1 span::after{content: "";position: absolute;bottom: 7px;height: 4px;display: block;width: 100%;left: 0;box-shadow: 0px 0px 8px rgba(0,0,0,.9);background: #000;border-radius: 4px;}


.webdesign_section1 {
    height: 100vh;
    width: 100%;
    position: relative;
  }
.web_portfolio_outer{width: 100%; float: left; padding: 100px 0;}

.device_outer{max-width: 1170px;margin: 0 auto;position: relative;width: 100%;padding: 0 50px;}

.device_desktop{width: 65%;margin: 0 auto;position: relative;z-index: 2;}
.device_desktop img,
.device_laptop img,
.device_ipad img,
.device_mobile img{position: relative; z-index: 8;}

.desktop_img_scroll{position: absolute;z-index: 1;left: 4%;top: 27px;width: 92%;height: 73%;overflow: hidden;}
.desktop_img_scroll img,
.laptop_img_scroll img,
.ipad_img_scroll img,
.mobile_img_scroll img{width: 100%;}


.device_laptop{width: 40%;position: relative;z-index: 3;margin: -232px 0px 0 0;float: right;}
.device_ipad{width: 20%;margin: -26% 0 0 14%;position: relative;z-index: 4;}
.device_mobile{width: 10%;margin: -20% 0 0 3%;position: relative;z-index: 5;}


.laptop_img_scroll{position: absolute;z-index: 1;left: 13%;top: 13px;width: 74%;height: 84%;overflow: hidden;}
.ipad_img_scroll{position: absolute;z-index: 1;left: 3%;top: 35px;width: 94%;height: 79%;overflow: hidden;}
.mobile_img_scroll{position: absolute;z-index: 1;left: 5%;top: 38px;width: 90%;height: 67%;overflow: hidden;}



.desktop_img_scroll img{ animation: scroll 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}
.laptop_img_scroll img{ animation: scroll_laptop 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}
.ipad_img_scroll img{ animation: scroll_ipad 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}
.mobile_img_scroll img{ animation: scroll_mobile 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}

.web_info{ width: 80%; margin: 0 auto; padding: 00px 0; text-align: center;     font-family: 'Glamsy'; }
.web_info h3{text-transform: none; font-family: 'Glamsy'; }
.web_info p{font-size: 16px; line-height: 24px; padding: 0 10%;}

.qodef-button.qodef-layout--filled.qodef-html--link:hover{background: #6c84c9;}
.qodef-button.qodef-layout--filled.qodef-html--link:hover:after{border-color:#6c84c9 ;}
 


.desktop_img_scroll_1 img{ animation: scroll_1 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}
.laptop_img_scroll_1 img{ animation: scroll_laptop_1 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}
.ipad_img_scroll_1 img{ animation: scroll_ipad_1 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}
.mobile_img_scroll_1 img{ animation: scroll_mobile_1 12s 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;}


@keyframes scroll {
   
    20%,60% {
      margin-top: -100px;
    }
    80% {
      transform: translateY(-84%);
    }
  }
 
@keyframes scroll_laptop {
   
    20%,60% {
      margin-top: -30px;
    }
    80% {
      transform: translateY(-84%);
    }
  }
 
  @keyframes scroll_ipad {
     
      20%,60% {
        margin-top: -30px;
      }
      80% {
        transform: translateY(-84%);
      }
    }
    @keyframes scroll_mobile {
     
        20%,60% {
          margin-top: -20px;
        }
        80% {
          transform: translateY(-94%);
        }
      }
    




      @keyframes scroll_1 {
   
        20%,60% {
          margin-top: -100px;
        }
        80% {
          transform: translateY(-90.8%);
        }
      }
     
    @keyframes scroll_laptop_1 {
       
        20%,60% {
          margin-top: -30px;
        }
        80% {
          transform: translateY(-90.5%);
        }
      }
     
      @keyframes scroll_ipad_1 {
         
          20%,60% {
            margin-top: -30px;
          }
          80% {
            transform: translateY(-90%);
          }
        }
         @keyframes scroll_mobile_1 {
     
          20%,60% {
            margin-top: -20px;
          }
          80% {
            transform: translateY(-96.3%);
          }
        }

/* ---------------------------------------------------------------------------------- */
        @media only screen and (max-width: 1280px){

          
@keyframes scroll {
   
  20%,60% {
    margin-top: -10px;
  }
  80% {
    transform: translateY(-80%);
  }
}

@keyframes scroll_laptop {
 
  20%,60% {
    margin-top: -5px;
  }
  80% {
    transform: translateY(-80%);
  }
}

@keyframes scroll_ipad {
   
    20%,60% {
      margin-top: -5px;
    }
    80% {
      transform: translateY(-80%);
    }
  }
  @keyframes scroll_mobile {
   
      20%,60% {
        margin-top: -5px;
      }
      80% {
        transform: translateY(-91%);
      }
    }
  




    @keyframes scroll_1 {
 
      20%,60% {
        margin-top: -10px;
      }
      80% {
        transform: translateY(-85%);
      }
    }
   
  @keyframes scroll_laptop_1 {
     
      20%,60% {
        margin-top: -5px;
      }
      80% {
        transform: translateY(-85%);
      }
    }
   
    @keyframes scroll_ipad_1 {
       
        20%,60% {
          margin-top: -5px;
        }
        80% {
          transform: translateY(-85%);
        }
      }
       @keyframes scroll_mobile_1 {
   
        20%,60% {
          margin-top: -5px;
        }
        80% {
          transform: translateY(-91%);
        }
      }

     

        }


/* ---------------------------------------------------------------------------------- */
@media (max-width: 992px){


  .webdesign_section1{height: auto;}
  .heading_text h1{font-size: 36px;}
  .heading_text h1 span::after{
    bottom: -1px;
}
.web_portfolio_outer{
    padding: 40px 0 60px;
}
.heading_text{
    padding: 40px 0 0;
}

.web_portfolio_outer .divider-line{
    margin: 50px 0;
}

 .device_laptop{
  margin: -17% 0 0 0;
  }
 .mobile_img_scroll,
 .desktop_img_scroll,
 .ipad_img_scroll,
 .laptop_img_scroll{
  top: 0;
  height: 100%;
  }

  .desktop_img_scroll{height: 79%;}
  .device_outer{padding: 0 10px;}
  .web_info h3{font-size: 22px;}
  
@keyframes scroll {
   
  20%,60% {
    margin-top: -10px;
  }
  80% {
    transform: translateY(-80%);
  }
}

@keyframes scroll_laptop {
 
  20%,60% {
    margin-top: -5px;
  }
  80% {
    transform: translateY(-80%);
  }
}

@keyframes scroll_ipad {
   
    20%,60% {
      margin-top: -5px;
    }
    80% {
      transform: translateY(-80%);
    }
  }
  @keyframes scroll_mobile {
   
      20%,60% {
        margin-top: -5px;
      }
      80% {
        transform: translateY(-91%);
      }
    }
  




    @keyframes scroll_1 {
 
      20%,60% {
        margin-top: -10px;
      }
      80% {
        transform: translateY(-85%);
      }
    }
   
  @keyframes scroll_laptop_1 {
     
      20%,60% {
        margin-top: -5px;
      }
      80% {
        transform: translateY(-85%);
      }
    }
   
    @keyframes scroll_ipad_1 {
       
        20%,60% {
          margin-top: -5px;
        }
        80% {
          transform: translateY(-85%);
        }
      }
       @keyframes scroll_mobile_1 {
   
        20%,60% {
          margin-top: -5px;
        }
        80% {
          transform: translateY(-91%);
        }
      }

     

}