:root {
  --color-primary: #272827;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light: #ECF2F6;
  --color-dark: #27272E;
  --color-text-dark: #292930;
  --color-accent1: #FFDC60;
  --color-accent2: #FAB8C4;
  --color-blue-shade: #6865FF;
  --color-link: #2522BA;
  --color-mabel: #DBF8FF;
  --color-fog: #DBDEFF;
  --color-pink-shade: #FFD3DB;
  --color-peach: #FFEDDC;
  --color-rose: #C75C6F;
  --color-chart1: #896BA7;
  --color-chart2: #BADEFF;
  --color-body: #525260;
  --color-gray-1: #757589;
  --color-gray-2: #999FAE;
  --color-gray-3: #999AB8;
  --color-gray-4: #99A1AA;
  --color-ship-gray: #42424A;
  --color-ghost: #C7C7D5;
  --color-mercury: #E5E5E5;
  --gradient-primary: linear-gradient(90deg, #ECF2F6 0%, rgba(236, 242, 246, 0) 70.31%);
  --gradient-blue: linear-gradient(145.92deg, #5956E9 20.18%, #9991FF 76.9%);
  --gradient-accent: linear-gradient(180deg, #FAB8C4 0%, #FFEDF0 100%);
  --gradient-white: linear-gradient(266.3deg, rgba(236, 242, 246, 0) 7.84%, #ECF2F6 29.1%, rgba(236, 242, 246, 0) 64.32%);
  --gradient-dark: linear-gradient(180deg, #27272E 0%, #303035 100%);
  --border-light: 1px solid #E3E6E9;
  --border-lighter: 1px solid #ECF2F6;
  --border-dark: 1px solid var(--color-ship-gray);
  --border-gray: 1px solid var(--color-gray-4);
  --font-primary: 'DM Sans', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  --font-awesome: 'Font Awesome 5 Pro';
  --transition: all 0.3s ease-in-out;
}
*{margin: 0;padding: 0;text-decoration: none;list-style: none;border: none;position: relative;line-height: 1.2em;}
*,*:after,*::before{box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
body,html{width: 100%;min-width: 320px;overflow-x: hidden}
body{font-family: 'DM Sans', sans-serif;background: #fff;font-weight:normal;font-size:16px;letter-spacing:0;color:#272827;min-width:320px;overflow-x: hidden}
img{max-width:100%;width:auto;height:auto;}
.row{width:100%;}
.container{width:94%;margin:0 auto;max-width: 1695px; }
.cover{width:100%;height:100%;position:fixed;background:rgba(0, 0, 0, 0.85);top:0;left:0;z-index:2;display:none;}
.cover.act{display: block}
.flex{display: flex; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;flex-wrap: wrap; justify-content: space-between;  }
.no-wrap{flex-wrap: nowrap;}
.justify-left{justify-content: flex-start}
.justify-end{justify-content: flex-end}
.justify-center{justify-content: center}
.text-center{text-align: center}
.align-center{align-items: center;}
.align-top{align-items: top;}
.text-left{text-align: left;}
.alignself-left{align-self: flex-start;}
.order-1{order: 1;}
.order-2{order: 2;}

.scrollToTop{bottom:10%;position:fixed;right:20px;background:rgba(0, 0, 0, 0.5) url(../images/arw-up.png) no-repeat center center;width:35px;height:35px;text-align:center;border-radius:3px;box-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);transform: scale(0);transition: all 0.5s ease-in-out;cursor: pointer;-webkit-transition: all 0.5s ease-in-out;z-index: 100;}
.scrollToTop.act{transform: scale(1)}
.cover{width:100%;height:100%;position:fixed;background:rgba(0, 0, 0, 0.8);top:0;left:0;z-index:2;display:none;}
.cover.act{display: block}

.btn{display: inline-block;padding: 1rem 2rem;background: #272827;color: #fff;border: 1px solid #272827;border-radius: 10px;font-weight: 500;overflow: hidden;z-index: 2;cursor: pointer;}
.btn.white{background: #fff;color: #272827;border: 0;}
.btn::after{content: "";width: 300px;height: 300px;display: inline-block;position: absolute;top: 50%;left: 50%;border-radius: 50%;background: #000;   -webkit-transform: translateY(-50%) translateX(-50%) scale(0);
  -ms-transform: translateY(-50%) translateX(-50%) scale(0);
  transform: translateY(-50%) translateX(-50%) scale(0);
  -webkit-transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);z-index: -1;}
.btn:hover::after{    -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
  -ms-transform: translateY(-50%) translateX(-50%) scale(1);
  transform: translateY(-50%) translateX(-50%) scale(1);}
.btn.white:hover{color: #fff;}  
@media only screen{
    h1{font-size: 2.5rem;font-weight: 500;}
    h2{font-size: 2rem;font-weight: 500;line-height: 1.1em;}
    h3{font-size: 1.5rem;line-height: 1em;font-weight: 500;}
    h4{font-size: 1.125rem;font-weight: 500;}
    h5{font-size: 1.25rem;font-weight: 500;}
    h6{font-size: 1rem;font-weight: 500;}
    p{font-family: 'Poppins', sans-serif;font-size: 1rem;line-height: 1.4em;color: #525260;}

    header{position: fixed;top: 0;left: 0;width: 100%;background: transparent;z-index: 5;padding: 0.75rem 0;}
    header.act{background: #fff;box-shadow:0 2px 10px 0 rgb(0 0 0 / 10%);-webkit-animation: headerSlideDown .8s ease forwards;animation: headerSlideDown .8s ease forwards; }
    /* header .logo{max-width: 60px;} */
    header .logo a{display: block;line-height: 0;}
    .menu{width: 40px;height: 40px;border-radius: 50%;flex-direction: column;background: #f9a05b;cursor: pointer;}
    header .menu span {display: block;height: 2px;width: 20px;background-color: #fff;margin-bottom: 4px;border-radius: 10px;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;
    }
    header .menu span:last-child{margin-bottom: 0;width: 10px;margin-right: -10px;}
    header .menu.act span:nth-of-type(1){
        transform-origin:bottom;
        transform:rotatez(45deg) translate(4px,4px)
      }
    header .menu.act span:nth-of-type(2){
        transform-origin:top;
        transform:rotatez(-45deg)
    }
    header .menu.act span:nth-of-type(3){
        display: none;
      
    }

    header .header-nav{position: fixed;top: 0;left:0%;background: #fff;padding: 1rem;width: 100%;z-index: 10;display: none;box-shadow:0 2px 10px 0 rgb(0 0 0 / 10%);}
    header .header-nav.act{left: 0;}
    header nav li{text-align: center;}
    header nav li a{color: var(--color-gray-1);font-size: 1rem;padding: 1rem 0;display: inline-block;}
    header nav li.active a ,header nav li a:hover{color: #272827;}

    .home-panel{padding: 4rem 0 7rem 0;z-index: 3;}
    .home-panel .col{flex-basis: 100%;max-width: 100%;}
    .home-panel p{margin-top: 1rem;}
    .home-panel .btn-sec{margin-top: 2rem;}
    .home-panel .bg-items{position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;}
    .home-panel .bg-items .bg{position: absolute;z-index: -1;}
    .home-panel .bg-items .bg:nth-of-type(1){width: 50%;top: 0;left: 0;}
    .home-panel .bg-items .bg:nth-of-type(2){right: 0;width: 50%;}
    .home-panel .bg-items .bg:nth-of-type(3){
      left: 0;
      top: 45%;
      height: 48px;
      width: 48px;
      -webkit-animation: movingleftright1 infinite 25000ms;
      animation: movingleftright1 infinite 25000ms;
  }
    .home-panel .bg-items .bg:nth-of-type(4){
      left: 0;
      bottom: 20%;
      height: 32px;
      width: 32px;
      -webkit-animation: movingleftright3 infinite 20000ms;
      animation: movingleftright3 infinite 20000ms;
  }
  .home-panel .col .bg{position: absolute;z-index: 1;}
  .home-panel .laptop{margin-top: 3rem;max-width: 340px;}
  .home-panel .col .bg:nth-of-type(1){right: -10%;top: -15rem;width: 115px;}
  .home-panel .col .bg:nth-of-type(2){left:0rem;top: -12.5rem;width: 200px;}
  .home-panel .col .bg:nth-of-type(3){right:-10%;top: -9rem;width: 40%;}
  .home-panel .col .bg:nth-of-type(4){left: 50%;top: 0;transform: translateX(-50%);width: 150px;margin-top: 1rem;}

  .sub-title h6{color: #C75C6F;}
  .sub-title{margin-bottom: 1rem;}

  
  .home-services{background: #27272E;padding: 3rem 0;}
  .home-services h2{color: #fff;}
  .home-services p{font-weight: 500;color: #fff;opacity: 0.5;}
  .home-services .title{margin-bottom: 1rem;}

  .services_sec{margin-top: 3rem;}
  .services_box{padding: 2rem;z-index: 1;transition: var(--transition);-webkit-transition: var(--transition);margin-bottom: 1rem;}
  .services_box h5{margin:1rem 0}
  .services_box p{margin-bottom:1rem}
  .services_box h5,.services_box a{color: #fff;font-weight: 500;}
  .services_box:after {
    content: "";
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #27272E 0%, #303035 100%);;
    border: 1px solid;
    border-image-source: linear-gradient(0deg, #27272E 64.45%, rgba(74, 75, 86, 0.72) 100%);
    border-radius: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}
  .services_box:hover::after,.services_box:active::after{visibility: visible;opacity: 1;}
 
  .services_box a:before {
    content: "";
    width: 0;
    height: 1px;
    background-color: var(--color-accent2);
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .services_box a:hover{color:  var(--color-accent2);    padding-left: 50px;-webkit-transition: var(--transition);transition: var(--transition);}
  .services_box a:hover:before {width: 34px;opacity: 1;}

  .case-study{padding: 3rem 0;}
  .case-study h2{margin-bottom: 2rem;}
  .case-study .btn-sec{margin-top: 2rem;}
  .case-study p{margin-bottom: 1rem;}
  .case-study p:last-of-type{margin-bottom: 0;}
  .case-study .col:first-child{margin-bottom: 2rem;}
  .case-study .owl-nav{display: none;}

  .home-about{background-color: var(--color-light);padding: 3rem 0; background-image:  url(../images/line-4.png), url(../images/bubble-7.png), url(../images/line-5.png);
    background-position: left 15%, left top, right 95%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto;
  }
  .home-about p{margin-bottom: 1rem;}
  .home-about p:last-of-type{margin-bottom: 0;}
  .home-about .title{margin-bottom: 1rem;}
  .get_in_touch{padding: 2rem;background: #fff;border-radius: 15px;margin-top: 2rem;}
  .get_in_touch label{width: 100%;font-size: 1rem;font-weight: 500;color: var(--color-dark);margin-bottom: 0.625rem;display: block;}
  .get_in_touch input[type="text"],.get_in_touch input[type="email"],.get_in_touch textarea{border: var(--border-lighter);border-radius: 16px;background-color: transparent;color: var(--color-text-dark);padding: 15px 20px;width: 100%;font-size: 1rem;}
  textarea{resize: none;height: 120px;}
  .get_in_touch .inp-col{margin-bottom: 1rem;}
  .get_in_touch h3{margin-bottom: 2rem;}
  .get_in_touch .btn{font-weight: 500;font-size: 1rem;}
  input:focus-visible{border: var(--border-lighter) !important;}

  .projects{padding: 3rem 0;}
  .filter-title{font-size: 1rem;font-weight: 500;margin-right: 1rem;cursor: pointer;padding-bottom: 0.5rem;color: var(--color-gray-1);}
  .filter-title.act{color: #272827;}
  .filter-list .filter-items{flex-basis: 100%;max-width: 100%; -webkit-transition: var(--transition);transition: var(--transition);box-shadow: 0 55px 86px -35px #ecf2f6;margin-bottom: 2rem;border-radius: 15px;z-index:1;background: #fff;}
  .filter-list .cont{padding: 1rem;}
  .filter-list .filter-items .img{overflow: hidden;line-height: 0;border-top-right-radius: 50px;border-top-left-radius: 50px;}
  .filter-list .filter-items img{transform: scale(1);line-height: 0;
    -webkit-transition: -webkit-transform 2s cubic-bezier(0.2, 0.96, 0.34, 1);
    transition: -webkit-transform 2s cubic-bezier(0.2, 0.96, 0.34, 1);
    transition: transform 2s cubic-bezier(0.2, 0.96, 0.34, 1);
    transition: transform 2s cubic-bezier(0.2, 0.96, 0.34, 1), -webkit-transform 2s cubic-bezier(0.2, 0.96, 0.34, 1);}
  .filter-list .filter-items:hover img{transform: scale(1.2);}
  .filter-title:after{
    content: "";
    height: 2px;
    width: 100%;
    background-color: var(--color-primary);
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}
.filter-title.act::after{visibility: visible;opacity: 1;}
.project-tab{margin: 2rem 0;}
.filter-items h5{margin-bottom: 1rem;color: #272827;}
.filter-items h5 a{color: #272827;}
.filter-items h5:hover a{color: #0d6efd;}

  .clients{padding: 3rem 0;background-color: var(--color-dark);
    background-image:  url(../images/circle-1.png);
    background-position: 20% bottom;
    background-repeat: no-repeat;
    background-size: 50%;
  }
  .clients h2{color: #fff;margin: 1rem 0;}
  .client-box{flex-basis: 48%;max-width: 48%;text-align: left;}
 

  footer{padding: 10rem 0 0 0;}
  footer h2{margin-bottom: 1rem;}
  footer .cont{margin-bottom: 2rem;}
  form .form-control {
    border: var(--border-lighter);
    border-radius: 16px;
    background-color: transparent;
    color: var(--color-text-dark);
    padding: 15px 20px 15px 45px;
    width: 100%;
  }
  footer .btn{margin-top: 1rem;}
  footer .input-group:before {
    content: url("../images/message.png");
    position: absolute;
    left: 14px;
    top: 13px;
    z-index: 1;
  }
  footer nav{margin-top: 2rem;}
  footer nav li a{color: var(--color-body);padding: 0.25rem 0;}
  footer nav ul li{margin-bottom: 0.5rem;}
  footer nav ul ul{margin-top: 1rem;}
  footer nav .parent > li{margin-top: 1.5rem;}
  footer .copy-right{   
      border-top: 1px solid var(--color-ghost);
      padding: 25px 0;
      margin-top: 2rem;
      justify-content: center;
  }
  footer small{font-size: 0.875rem;margin-bottom: 1rem;display: inline-block;}
  footer .copy-right a{color: var(--color-body);margin-right: 1rem;}
  .desk-info{display: none;}

  .work-together{padding:5rem 0 8rem 0;background:#5956E9}
  .work-together h6{color: var(--color-accent1);}
  .work-together h2{color:#fff;margin: 1rem 0 3rem 0;}
  .work-together .container{z-index: 2;}
  .work-together .bg-list{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
  .work-together .bg-list .items{position:absolute;width: auto;}
  .work-together .bg-list .items:first-of-type{top: 0;left: 50%;transform:translateX(-50%);-webkit-transform:translateX(-50%)}
  .work-together .bg-list .items:nth-of-type(2){top: 50%;
        left: 18%;
        opacity: 0.5;
        -webkit-animation: movingleftright1 infinite 20000ms;
        animation: movingleftright1 infinite 20000ms;}
  .work-together .bg-list .items:nth-of-type(3){top: 31%;
    left: 20%;
    -webkit-animation: movingleftright2 infinite 25000ms;
    animation: movingleftright2 infinite 25000ms;
}
  .work-together .bg-list .items:nth-of-type(4){
    top: 44%;
    left: 28%;
    -webkit-animation: movingleftright1 infinite 25000ms;
    animation: movingleftright1 infinite 25000ms;
}
  .work-together .bg-list .items:nth-of-type(5){
    top: 50%;
    left: 17%;
    -webkit-animation: movingleftright2 infinite 30000ms;
    animation: movingleftright2 infinite 30000ms;
  }
  .work-together .bg-list .items:nth-of-type(6){
    top: 30%;
    right: 15%;
    -webkit-animation: movingleftright1 infinite 30000ms;
    animation: movingleftright1 infinite 30000ms;
  }

  .work-together .lap{position: absolute;top: 2.5rem;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 70%;z-index: 3;max-width: 250px;}
  .work-together .keyboard{position: absolute;top: 14rem;left: 50%;width: 50%;transform: translateX(-70%);-webkit-transform: translateX(-70%);z-index: 3;}
  .work-together .mouse{position: absolute;top: 13.5rem;left: 88%;width: 20%;transform: translateX(-100%);-webkit-transform: translateX(-100%);z-index: 3;}
  .work-together .chat{position: absolute;top: 3rem;left: 70%;width: 20%;transform: translateX(-90%);-webkit-transform: translateX(-90%);z-index: 3;}

  .work-together.anim .keyboard{transform: translateX(-50%) ;-webkit-transform: translateX(-50%) ;}
  .work-together.anim .mouse{transform: translateX(-88%) ;-webkit-transform: translateX(-88%) ;}
  .work-together.anim .chat{transform: translateX(-70%) ;-webkit-transform: translateX(-70%) !;}


 
  .breadcrumb{background: var(--gradient-primary);padding: 8rem 0 5rem 0;z-index: 3;}
  .breadcrumb li{margin-right: 1rem;font-size: 1rem;color:  var(--color-gray-2);z-index: 3;vertical-align: middle;}
  .breadcrumb li a::after {
    content: ".";
    font-size: 3rem;
    margin: -3px 0 0 1rem;
    display: inline-block;
    top: -7px;
    line-height: 0;
  }
  .breadcrumb li a{display: block;color:  var(--color-gray-2);}
  .breadcrumb li.active{color:#272827;}
  .breadcrumb .bg_items .items, .breadcrumb .bg_items{position: absolute;width: auto;z-index: 1;}
  .breadcrumb .bg_items{width: 100%;height: 100%;top: 0;left:0}
  .breadcrumb .bg_items .items:first-of-type{bottom: -4px;left: 0;}
  .breadcrumb .bg_items .items:nth-of-type(2){top: 0;right: 0;width: 28%;}
  .breadcrumb .bg_items .items:nth-of-type(3){top: 8rem;left: 0;}
  .contact-us{z-index: 3;padding: 3rem 0 0 0;}
  .contact_box{background: var(--color-dark);padding: 3rem;border-radius: 20px;margin-bottom: 2rem;color: #fff;max-width: 500px;}
  .contact_box h5,.contact_box span{color: #fff;}
  .contact_box span{display: block;margin:1rem 0;font-size: 0.875rem;}
  .contact_box a{color: var(--color-accent2);font-weight: 600;font-size: 1.5rem;}
  .get_in_touch.shadow-box {
    box-shadow: 0 20px 48px 0 rgba(153, 161, 170, 0.25);
  }
  .breadcrumb .title{margin-top: 2rem;z-index: 3;}
  .contact_panel .col{flex-basis: 100%;max-width: 100%;}
  .contact_panel .col:first-child{margin-bottom: 2rem;}
  .contact-page footer{padding-top: 3rem;}


  .about-panel{background: var(--gradient-primary);padding: 8rem 0 2rem 0;}
  .about-panel h2{color: #000248;margin-bottom: 1.5rem;}
  .about-panel p{font-size:0.875rem}
  .about-panel .col{z-index: 3;flex-basis: 100%;max-width: 100%;}
  .about-panel .bg_items .items{position: absolute;}
  .about-panel .bg_items{position: initial;}
  .about-panel .bg_items .items:first-of-type{left: 0;bottom: -5px;}
  .about-panel .bg_items .items:nth-of-type(2){right: 0;top: 0;width: 40%;}
  .single-portfolio-page .about-panel .bg_items .items:nth-of-type(2){right: 0;top: 0;width: 33%;}
  .about-panel .bg_items .items:nth-of-type(3){left: 0;bottom: -3rem;}

  .col-2-box{padding: 3rem 0;}
  .col-2-box .title{margin-bottom: 1rem;}
  .col-2-box p{margin-bottom: 1rem;}
  .col-2-box p:last-of-type{margin-bottom: 0;}
  .col-2-box .btn-sec{margin-top: 2rem;}
  .col-2-box .col:last-of-type{margin-bottom: 2rem;}
  .col-2-box .col{flex-basis: 100%;max-width: 100%;}

  .our-values{padding: 3rem 0;background-color: var(--color-dark);}
  .our-values h2,.our-values h3,.our-values h5{color: #fff;}
  .our-values .title{margin-bottom: 1.5rem;}
  .our-values p{color: #fff;opacity: 0.5;font-size: 0.875rem;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
  .our-values h5{margin: 1.5rem 0;display: block;}
  .value_sec{margin-top: 4rem;}
  .value_box{flex-basis: 100%;max-width: 100%;margin-bottom: 4rem;}
  .value_box .circle{width: 80px;height: 80px;background: -webkit-linear-gradient(left, #565677 0%, rgba(39, 39, 46, 0) 70.31%);
    background: linear-gradient(90deg, #565677 0%, rgba(39, 39, 46, 0) 70.31%);border-radius: 50%;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
  .value_box:hover .circle,.value_box.active .circle{background-color:rgb(89, 86, 233);}
  .value_box:hover p,.value_box.active p{opacity: 1;}


  .process{background-color: var(--color-light);padding: 3rem 0 2rem 0;}
  .process .cont .title{margin-bottom: 2rem;}
  .step{padding: 3rem 0;}
  .step .col{flex-basis: 100%;max-width: 100%;margin-bottom: 2rem;}
  .step .col:first-child{background-color: #fff;border-radius: 15px;}
  .step h3{margin-bottom: 2rem;}

  .services-panel{background-color: #fff;}
  .services_tab{padding: 1.5rem 1rem;border-bottom: 1px solid var(--color-mercury);background-color: #fff;z-index: 6;position: absolute;top: 0;left: 0;width: 100%;}
  .services_tab.act{position: fixed;top: 0;left: 0;width: 100%;z-index: 99;}
  .services_tab .item{margin-right: 1rem;font-size: 1rem;padding: 0.5rem 0;cursor: pointer;color: var(--color-gray-1);}
  .services_tab .item.act,.services_tab .item:hover{color: #272827;}
  .services_tab .item::after {
    content: "";
    height: 2px;
    width: 0;
    background-color: var(--color-primary);
    position: absolute;
    bottom: -1px;
    left: 0;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    color: #272827;
  }
  .services_tab .item:hover::after,.services_tab .item.act::after{width: 100%;}
  .services-item{padding: 3rem 0;}
  .services-item .title{margin-bottom: 2rem;}
  .services-item .col{background: -webkit-linear-gradient(top, #F8F8F8 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(180deg, #F8F8F8 0%, rgba(255, 255, 255, 0) 100%);
        background-color: rgba(0, 0, 0, 0);
    border: 1px solid;
        border-image-source: none;
    border-image-source: linear-gradient(90deg, #ECF2F6 0%, rgba(236, 242, 246, 0) 70.31%);
    background-color: var(--color-white);
    flex-basis: 100%;
    max-width: 100%;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 15px;
  }
  .services-item .col h4{margin: 1rem 0;}
  .services-item .col:hover{background-color: var(--color-light);}
  .services-item a:hover{padding-left: 50px;transition: all 0.3s ease-in-out;-webkit-transition: all 0.5s ease-in-out;}
  .services-item a{
    font-weight: 500;
    color: var(--color-body);
    position: relative;
    margin-top: 1rem;
    display: block;
  }
  .services-item a:hover::before {width: 34px;    opacity: 1;}
  .services-item a::before {
    content: "";
    width: 0;
    height: 1px;
    background-color: var(--color-body);
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .services-item:nth-of-type(even){background-color: var(--color-light);}

  .single-portfolio-page .about-panel .col:first-child{margin-bottom: 2rem;}
  .single-portfolio-page .about-panel .col:last-child img{border-radius: 20px;}
  .project-details{padding: 3rem 0;}
  .project-details .col{flex-basis: 100%;max-width: 100%;margin-bottom: 3rem;}
  .project-details .col:last-child{margin-bottom: 0;}
  .project-details .title{margin-bottom: 1.5em;}
  .project-details .cont p{font-size: 0.875rem;margin-bottom: 1.5rem;}
  .accordion{margin-top: 3rem;}
  .accordion p{font-size: 0.875rem;}
  .accordion .title{color:var(--color-body);font-size: 1.5rem;font-weight: 400;cursor: pointer;margin-bottom: 0;}
  .accordion h5{margin-left: 1rem;}
  .accordion .accordion-panel{border-bottom:1px solid var(--color-gray-2);padding-bottom:1.125rem;margin-bottom:1.125rem}
  .accordion .accordion-panel .info{display: none;margin-top: 1rem;}
  .accordion .accordion-panel.act .info{display: block;}
  .accordion .accordion-panel.act .title{color: #5956E9;}
}
@media only screen and (min-width : 480px){
  .home-panel .laptop{max-width: 451px;}
  .home-panel .col .bg:nth-of-type(2){top: -14.5rem;left: 2rem;}
  .home-panel .col .bg:nth-of-type(3){width: 45%;}


 
}
@media only screen and (min-width : 640px){
  .home-panel {padding: 4rem 0 9rem 0; }
  .home-panel .col:first-child{max-width: 380px;}
  .home-panel .laptop{max-width: 601px;}
  .home-panel .col .bg:nth-of-type(1) {right: 0;top: -21rem;width: 130px;}
  .home-panel .col .bg:nth-of-type(2) {top: -18.5rem;left: 3.25rem;width: 260px; }
  .home-panel .col .bg:nth-of-type(3) {top: -13rem;}
  .home-panel .col .bg:nth-of-type(4){width: 40%;}

  .home-services .cont{width: 50%;}
  .home-services .cont p{width: 80%;}
  .services_box{flex-basis: 48%;max-width: 48%;margin-bottom: 2rem;}
  .services_box h5{margin:2rem 0}
  .services_box p {margin-bottom: 2rem;}

  .case-study .col,.home-about .col{flex-basis: 48%;max-width: 48%;margin: 0 !important;}
  .case-study .owl-dots{width: 11%;margin-top: 2rem;}

  .get_in_touch{margin-top: 0;}

  .filter-list .filter-items,.value_box{flex-basis: 48%;max-width: 48%;}

  .client-box{flex-basis: 32%;max-width: 32%;}
  .clients-sec::after{content: "";width: 32%;display: inline-block;}

  .our-values .cont{max-width: 600px;}

  .value_box p{align-self: flex-end;}

  .process .cont p{max-width: 650px;display: inline-block;}
  .step{padding: 5rem 0 3rem 0;}
  .step .col:first-child{flex-basis: 30%;max-width: 30%;margin-right: 5%;margin-bottom: 0;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
  .step .col:hover:first-child{will-change: transform;transform: perspective(1000px) rotateX(0deg) rotateY(0deg);}
  .step .col:last-child{flex-basis: 40%;max-width: 40%;margin-bottom: 0;}
  .step:nth-of-type(even) .col:first-child{order: 2;margin-right: 0;}
  .step:nth-of-type(even) .col:last-child{order: 1;margin-right: 5%;}
  
}
@media screen and (min-width : 768px){ 
  .order-1{order: 2;}
  .order-2{order: 1;}

    footer .col-sm{flex-basis: 35%;max-width: 35%;}
    footer .col-lg{flex-basis: 62%;max-width: 62%;}
    footer nav {margin-top: 0;}
    footer nav .parent > li {width: 32%;display: inline-block;vertical-align: top;}
    footer .copy-right{justify-content: space-between;}

    .contact_panel .col{flex-basis: 48%;max-width: 48%;margin-bottom: 0;}
    .contact_panel .col:first-child{display: flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;flex-wrap: wrap;justify-content: flex-start;}
    
    .about-panel .col{flex-basis: 50%;max-width: 50%;}
    .about-panel .bg_items .items:nth-of-type(3) {bottom: -8rem;z-index: 3;}
    .about-panel p{font-size:1rem}

    .col-2-box{padding:5rem 0}
    .col-2-box .col{flex-basis: 48%;max-width: 48%;margin-bottom: 0 !important;}


    .services-item .col{flex-basis: 31.5%;max-width: 31.5%;}
    .services_info .main-col::after{width: 31.5%;content: "";display: inline-block;}
    .services_tab .item::after{bottom: -25px;}

    .project-details .col{flex-basis: 48%;max-width: 48%;}
    .project-details .col:first-child{max-width: 520px;}
    .project-details .title{margin-bottom: 2rem;}
    .project-details .cont p{font-size: 1rem;margin-bottom: 3rem;}
    .accordion p{font-size: 1rem;}
    .accordion .title{margin-bottom: 0;}
  }
@media screen and (min-width : 1024px){ 
  

  h1{font-size: 3.5rem;}
  h2{font-size: 3rem;}
  h3{font-size: 2rem;}
  h4{font-size: 1.25rem;}
  h6{font-size: 1.25rem;}
  .btn{font-size: 1.125rem;padding: 1rem 2rem;}

  /* header .logo{flex-basis: 15%;max-width: 15%;} */
  /* header .logo img{max-width: 80px;} */
  header .menu-sec{flex-basis: 5%;max-width: 5%;}
  .menu{width: 50px;height: 50px;}
  header .header-nav{position:relative;left:initial;top: initial;flex-basis: 60%;max-width: 60%;text-align: right;transition: none;-webkit-transition: none;background: transparent;display: block;box-shadow: none;}
  header nav li{display: inline-block;margin-right: 3rem;}
  header nav li:last-child{margin-right: 0;}
  header nav li a{font-size: 1.125rem;padding: 0;}
  header nav li a:after{content: "";width: 0;height: 1.5px;background: #272827;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;display: block;margin-top: 0.125rem;}
  header nav li a:hover:after, header nav li.active a::after{width: 100%;}

  .home-panel{padding: 8rem 0 12rem 0;}
  .home-panel .btn-sec {margin-top: 3rem;}
  .home-panel p{margin-top: 3rem;}
  .home-panel .col {flex-basis: 48%;max-width: 48%;}
  .home-panel .col:first-child{max-width: 510px;}
  .home-panel .bg-items .bg:nth-of-type(2) {width: 45%;}
  .home-panel .col .bg:nth-of-type(2) {top: -16.5rem;left: 1rem;}
  .home-panel .bg-items{overflow: hidden;}
  .home-panel .col .bg:nth-of-type(4) {width: 80%;left: 2rem;}

  .home-services{margin-top: -5rem;padding: 6rem 0 3rem 0;}
  .services_box{flex-basis: 32%;max-width: 32%;}

  .home-about{padding: 7rem 0;}
  .home-about .col{flex-basis: 46.5%;max-width: 46.5%;}
  .home-about p,.home-about h2{margin-bottom: 2rem;}
  .get_in_touch{max-width: 520px;padding: 4rem;}
  .get_in_touch .inp-col{margin-bottom: 2rem;}
  .get_in_touch .btn{font-size: 1.125rem;}

  .filter-list .filter-items{flex-basis: 31%;max-width: 31%;margin-bottom: 4rem;}
  .filter-list::after{content: "";width: 31%;}
  .filter-list .cont{padding: 2rem;}

  .home-services{
    background-image:  url(../images/circle-1.png), url(../images/line-2.png), url(../images/bubble-5.png);
    background-position: 50% 10%, 15% 50%, 24% 54%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto;
  }
  .projects{padding:6rem 0 4rem 0;
    background-image:  url(../images/circle-2.png), url(../images/bubble-2.png), url(../images/bubble-1.png);
    background-position: 50% 10%, 56% 14%, 30% 50%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto;
  }

  .clients{padding: 5rem 0 4rem 0;background-image:  url(../images/circle-1.png), url(../images/line-3.png), url(../images/bubble-5.png);
    background-position: 70% bottom, 40% top, 33.5% 15%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto;}
  .clients h2{margin: 1rem 0 2rem 0;}
  .clients p{max-width: 500px;}
  .clients-sec{margin-top: 2rem;}
  .client-box{flex-basis: 25%;max-width: 25%;}
  .client-box img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}
  .client-box:hover img {
    opacity: 1;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

footer{padding-top: 12rem;}
form .form-control{width: 60%;margin-right: 1rem;}
footer .input-group::before {top: 34px;}
footer .col-sm{padding-right: 3%;border-right: 1px solid var(--color-ghost);}
footer .col-lg{padding-left: 3%;}
footer .copy-right{margin-top: 3rem;}
footer small{margin-bottom: 0;}

.desk-info{position: fixed;right: -100%;top: 0;z-index: 999999;width: 100%;-webkit-transition: var(--transition);transition: var(--transition);display: block;height: 100%;}
.contact-info-wrap{max-width: 600px;background-color: #fff;height: 100vh;width: 100%;padding: 8rem 5rem 5rem 5rem;z-index: 999999;}
.desk-info.act{right: 0;}
.desk-info .address{font-style: initial;}
.desk-info .title{font-size: 1.25rem;margin-bottom: 1rem;display: block;}
.desk-info p{line-height: 1.5em;font-size: 0.9rem;font-size: var(--font-body-2);font-style: initial;}
.desk-info .address{margin-bottom: 4rem;}
.desk-info .address a{display:block;color: #272827;margin-bottom: 1rem;}
.desk-info .address a .fa{margin-right: 1rem;}
.social-share a{width: 50px;height: 50px;background: #272827;border-radius: 50%;color: #fff;margin-right: 1rem;-webkit-transition: var(--transition);transition: var(--transition);}
.social-share a:hover{filter: invert(1);-webkit-filter: invert(1);}
.desk-info .close{position: absolute;top: 3rem;left: 2rem;cursor: pointer;}
.desk-info .close img{max-width: 25px;}
header .menu:hover  span:first-child {
  width: 10px;
  margin-right: -10px;
}
header .menu:hover span:last-child {
  width: 20px;
  margin-right: 0;
}

.work-together{padding: 10rem 0;}
.work-together h2{margin:0.875rem 0 4rem 0;line-height: 1em;}
.work-together .lap{max-width: 350px;}
.work-together .keyboard{top: 18rem;text-align: center;}
.work-together .mouse{top: 17rem;}

.contact-us{padding: 0 0 5rem 0;}
.contact_panel{margin-top: 3rem;}
.contact_box{padding: 4rem;}
.contact_box span{font-size: 1rem;margin: 1rem 0 2rem 0;}
.contact_box a{font-size: 2rem;}
.breadcrumb{padding: 13rem 0 6rem 0;}
.breadcrumb li{font-size: 1.25rem;}

.contact_panel{
  padding-top: 5rem;
    background-image:  url(../images/bubble-2.png), url(../images/bubble-1.png), url(../images/circle-3.png);
    background-position: 40% 10%, 10% 100%, 70% 80%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto;
    padding-bottom: 2rem;
  }

  .our-values{padding: 5rem 0;
    background-image:  url(../images/circle-1.png), url(../images/line-2.png), url(../images/bubble-5.png);
    background-position: 50% 11%, 18% 50%, 22% 58%;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, auto, auto;
  }
  .our-values .value_sec::after{width: 31%;display: inline-block;content: "";}
  .value_box{flex-basis: 31%;max-width: 31%;}
  .our-values p{font-size: 1rem;}

  .process{padding: 5rem 0 2rem 0;
    background-image:  url(../images/bubble-24.png), url(../images/bubble-23.png), url(../images/line-4.png), url(../images/line-5.png), url(../images/line-4.png), url(../images/line-5.png);
    background-position: 0 0, right 20%, 0 20%, right 40%,0 73%,right 100%;
    background-repeat: no-repeat, no-repeat, no-repeat,no-repeat,no-repeat,no-repeat;
    background-size: auto, auto, auto, auto, auto, auto;
  }

  .services_tab{padding: 2.125rem 0;}
  .services_tab .item{font-size: 1.125rem;margin-right: 2.5rem;}
  .services_tab .item::after{bottom: -35px;}

  .project-details{padding: 8rem 0 6rem 0;}
}
@media screen and (min-width : 1280px){ 
  .home-panel{padding: 8rem 0 23rem 0;}
  .home-panel .col .bg:nth-of-type(2) {top: -23rem;left: -8px;width: 100%; }
  
  .home-services{margin-top: -7.5rem;padding: 8rem 0 5rem 0;}
  .services_box a{font-size: 1.125rem;}
  .case-study .owl-dots{margin-left: -1.5rem;}
  
  .projects{padding:8rem 0 6rem 0}
  .project-tab{margin:3rem 0 3rem 0}
  .filter-title{font-size:1.125rem}

  .clients{padding: 8rem 0 6rem 0;}

  footer .col-sm{flex-basis: 45%;max-width: 45%;}
  footer .col-lg{flex-basis: 55%;max-width: 55%;}
  footer li a,footer small,footer li strong,footer .copy-right a{font-size: 1.125rem;}
  form .form-control{font-size: 1rem;}
  footer nav ul li{margin-bottom: 1rem;}
  footer nav .parent{display: flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;flex-wrap: wrap; justify-content: space-between; }
  footer nav .parent > li{width: 36%;}
  footer nav .parent > li:nth-of-type(2),footer nav .parent > li:last-child{width: 22%;}

  .about-panel .bg_items .items:nth-of-type(3) {bottom: -14rem; }
  .col-2-box{padding:8rem 0}
  .col-2-box .title{margin-bottom: 2rem;}
  .col-2-box .col:first-child{flex-basis: 50%;max-width: 50%;}
  .col-2-box .col:last-child{flex-basis: 41%;max-width: 41%;}
  
  .our-values{padding: 8rem 0 6rem 0;}
  .our-values p{font-size: 1.125rem;}
  .our-values .value_sec{margin-top: 6rem;}
  .value_box h5{margin: 2rem 0;}

  .process{padding: 8rem 0 5rem 0;}

  .services-item {padding: 5rem 0 3rem 0;}
  .services-item .title {margin-bottom: 5rem;}
  .services-item .col{padding: 3rem;margin-bottom: 3rem;}
  .services-item a{font-size: 1.125rem;margin-top: 3rem;}

  .portfolio-page .filter-title{margin-right: 3rem;font-size: 1.25rem;}
  .portfolio-page .filter-list .filter-items {flex-basis: 23%; max-width: 23%; }
  .portfolio-page .filter-list::after { width: 23%;}
}
@media screen and (min-width : 1300px){ 
  h1{font-size: 4.375rem;}
  h2{font-size: 3.5rem;}
  h3{font-size: 2.25rem;}
  h4{font-size: 1.75rem;}
  h5{font-size: 1.5rem;}
  p{font-size: 1.125rem;}
  
  footer {padding-top: 15rem;  }
  .work-together{padding: 10rem 0 20rem 0;}
  .work-together .lap{max-width: 550px;}
  .work-together .keyboard{top: 28rem;text-align: center;}
  .work-together .mouse{top: 27rem;}
  .work-together .chat{left: 77%;transform: translateX(-77%);-webkit-transform: translateX(-77%);}

  .about-panel{padding: 15rem 0 3rem 0;}
  .single-portfolio-page .about-panel{padding: 10rem 0 2rem 0;}
  .about-panel .about_info{align-items: flex-start;}
  .about-panel .col:first-child{flex-basis: 55%;max-width: 700px;}
  .about-panel .col:last-child{flex-basis: 45%;max-width: 45%;}
  .about-panel .col:last-child img{transform: scale(1.65) translate(-40px,20px);-webkit-transform: scale(1.65) translate(-40px,20px);}
  .about-panel p{font-size:1.125rem;max-width: 510px;margin-top: 2rem;}
  .single-portfolio-page  .about-panel .about_info{align-items: center;}
  .single-portfolio-page .about-panel .col:last-child img{transform:none ;-webkit-transform: none;border-radius: 20px;}

  .value_box h5{font-size: 1.25rem;}
}

@-webkit-keyframes movingleftright1 {
  0% {
      -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
  }

  40% {
      -webkit-transform: translateX(50px) translateY(-200px);
      transform: translateX(50px) translateY(-200px);
  }

  75% {
      -webkit-transform: translateX(800px);
      transform: translateX(800px);
  }

  100% {
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
  }
}

@keyframes movingleftright1 {
  0% {
      -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
  }

  40% {
      -webkit-transform: translateX(50px) translateY(-200px);
      transform: translateX(50px) translateY(-200px);
  }

  75% {
      -webkit-transform: translateX(800px);
      transform: translateX(800px);
  }

  100% {
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
  }
}

@-webkit-keyframes movingleftright2 {
  0% {
      -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
  }

  40% {
      -webkit-transform: translateX(-50px) translateY(200px);
      transform: translateX(-50px) translateY(200px);
  }

  75% {
      -webkit-transform: translateX(-500px);
      transform: translateX(-500px);
  }

  100% {
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
  }
}

@keyframes movingleftright2 {
  0% {
      -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
  }

  40% {
      -webkit-transform: translateX(-50px) translateY(200px);
      transform: translateX(-50px) translateY(200px);
  }

  75% {
      -webkit-transform: translateX(-500px);
      transform: translateX(-500px);
  }

  100% {
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
  }
}

@-webkit-keyframes movingleftright3 {
  0% {
      -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
  }

  40% {
      -webkit-transform: translateX(100px) translateY(-200px);
      transform: translateX(100px) translateY(-200px);
  }

  75% {
      -webkit-transform: translateX(-500px);
      transform: translateX(-500px);
  }

  100% {
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
  }
}

@keyframes movingleftright3 {
  0% {
      -webkit-transform: translateX(0) translateY(0);
      transform: translateX(0) translateY(0);
  }

  40% {
      -webkit-transform: translateX(100px) translateY(-200px);
      transform: translateX(100px) translateY(-200px);
  }

  75% {
      -webkit-transform: translateX(-500px);
      transform: translateX(-500px);
  }

  100% {
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
  }
}

@-webkit-keyframes headerSlideDown {
    0% {
        margin-top: -100px;
        opacity: 0;
    }

    30% {
        margin-top: -50px;
        opacity: 0.3;
    }

    100% {
        margin-top: 0;
        opacity: 1;
    }
}

@keyframes headerSlideDown {
    0% {
        margin-top: -100px;
        opacity: 0;
    }

    30% {
        margin-top: -50px;
        opacity: 0.3;
    }

    100% {
        margin-top: 0;
        opacity: 1;
    }
}


.slide-anim{
  transition-duration: .2s;
  transition-duration: var(--sal-duration,.2s);
  transition-delay: 0s;
  transition-delay: var(--sal-delay,0s);
  transition-timing-function: ease;
  transition-timing-function: var(--sal-easing,ease);
  opacity: 0;
}
.slide-down{
  transform: translateY(-20%);
  -webkit-transform: translateY(-20%);
  transition-duration: .5s;
}
.slide-up{
  transform: translateY(20%);
  -webkit-transform: translateY(20%);
  transition-duration: .5s;
}

.slide-left{
  transform: translateX(20%);
  -webkit-transform: translateX(20%);
  transition-duration: .5s;
}
.slide-right{
  transform: translateX(-20%);
  -webkit-transform: translateX(-20%);
  transition-duration: .5s;
}

.zoom-in{
  transform: scale(.5);
  -webkit-transform: scale(.5);
  transition-duration: .5s;
}
.delay-100{
  transition-delay: .1s;
}
.delay-200{
  transition-delay: .2s;
}
.delay-300{
  transition-delay: .3s;
}
.delay-400{
  transition-delay: .4s;
}
.delay-500{
  transition-delay: .5s;
}
.delay-600{
  transition-delay: .6s;
}
.delay-700{
  transition-delay: .7s;
}
.duration-1000{
  transition-duration: 1s;
}
.duration-800{
  transition-duration: .8s;
}
.duration-700{
  transition-duration: .7s;
}
.duration-600{
  transition-duration: .6s;
}
.anim .slide-down,.anim .slide-left,.anim .zoom-in,.anim .slide-right,.anim .slide-up{
  transform: none;
  -webkit-transform: none;
  opacity: 1;
}