.ordering-app {
    position: relative;
}
.ordering-app i {
    position: absolute;
    font-size: 22px;
    top: 3px;
    color: var(--primarycolor);
}
.ordering-app .title-wrap {
    padding-left: 35px;
}
.ordering-app .title-wrap h3 {
    color: var(--primarycolor);
}
.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item {
    background-color: #fff;
    border: 0;
    margin-bottom: 15px;
}
#hireDeveloper .accordion-item, #nodeDeveloper .accordion-item{
    margin-bottom: 0;
}
#hireDeveloper .accordion-item:nth-child(even), #nodeDeveloper .accordion-item:nth-child(even){
    border-top: 1px solid #70707033;
    border-bottom: 1px solid #70707033;
}
#hireDeveloper .accordion-item:last-child, #nodeDeveloper .accordion-item:last-child{
    border-bottom: 1px solid #70707033;
}
#hireDeveloper .accordion-button, #nodeDeveloper .accordion-button {
    padding: 12px 12px 12px 20px;
    font-weight: 600;
    font-size: 18px;
}
#hireDeveloper .accordion-body, #nodeDeveloper .accordion-body{
    padding: 0px 12px 0 20px;
}
#hireDeveloper .accordion-button:focus, #nodeDeveloper .accordion-button:focus {
    box-shadow: none;
}
#hireDeveloper.accordion .accordion-button:not(.collapsed)::after, #nodeDeveloper.accordion .accordion-button:not(.collapsed)::after{
    --bs-accordion-btn-icon-width: 0;
}
#hireDeveloper.accordion .accordion-button:not(.collapsed), #nodeDeveloper.accordion .accordion-button:not(.collapsed){
    pointer-events: none;
}
.desc.recent-desc {
  background-color: transparent;
  border: 0;
}
.bg-blue {
    background: var(--bglightblue);
}
.drone-icon-wrap {
    padding: 50px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    width: 100%;
    height: 98%;
    flex-direction: column;
    transition: .3s ease-in-out;
}
.drone-icon-wrap img {
    margin: 0 0 30px;
}
.drone-icon-wrap h4 {
    font-size: 22px;
    line-height: 33px;
    color: var(--secondrycolor);
    font-weight: 600;
    margin: 0 0 15px;
    padding: 0;
}
.drone-icon-wrap:hover, .drone-icon-wrap:focus {
    box-shadow: 0 0 10px #ff6c1a inset;
    transition: .4s ease-in-out;
}
.ourservices {
    background: #f3f6f9;
}
.accordion-header {
    margin-bottom: 0;
}
.accordion-button:not(.collapsed) {
    color: #ff6c1a !important;
    background-color: #fff !important;
    box-shadow: none;
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.list {
    margin: 0 0 20px;
    padding: 0;
}
.list li {
    color: #4c596d;
    font-size: 16px;
    font-weight: 400;
    line-height: 168%;
    padding-bottom: 20px;
    position: relative;
    padding-left: 18px;
    list-style-type: none;
    margin: 0;
}
.list li:before {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    background: #ff6c1a;
}

/* customscroll-start */
.recentworks .scroller__wrapper  {
    /* How long one slide is visible on screen (from entering screen to leaving it) */
    --scrolling-gallery-item-duration: 20s;
    /* How many items we want to see on screen at once */
    --scrolling-gallery-items-visible: 4;
    /* How many items are to scroll */
    --scrolling-gallery-items-total: 4;
    overflow: hidden;
    will-change: transform;

}   
@media (max-width: 991px) {
    .recentworks .scroller__wrapper {
    /* How many items we want to see on screen at once */
    --scrolling-gallery-items-visible: 2;
    /* How long one slide is visible on screen (from entering screen to leaving it) */
    --scrolling-gallery-item-duration: 10s;
    }
}
    
@media (max-width: 600px) {
    .recentworks .scroller__wrapper {
    /* How many items we want to see on screen at once */
    --scrolling-gallery-items-visible: 1;
    /* How long one slide is visible on screen (from entering screen to leaving it) */
    --scrolling-gallery-item-duration: 10s;
    }
    .clients-scroller img {
        max-width: 180px;
    }
}
    
.recentworks .recentwork-scroller {
    animation-duration: calc(var(--scrolling-gallery-item-duration, 1s) / var(--scrolling-gallery-items-visible) * var(--scrolling-gallery-items-total));
    animation-timing-function: linear;
    animation-name: scrolling-gallery;
    animation-iteration-count: infinite;
    display: flex;
    /* white-space: nowrap; */
}

.recentworks .scroller__container {
    /* Without this, scroll will jump on desktop if any vertical scrollbar is shown */
    width: 100%;

}

.recentworks .scroller__item {
    flex: 0 0 calc(100% / var(--scrolling-gallery-items-visible));
    /* Without this, block elements will take width from their contents and thus making wrong calculations,
        so this just force elements to take only exact part of the container (screen) and equal for all */
    width: 0px;
    /* If you want to have it continuous without any spaces, remove two lines below */
    box-sizing: border-box;
    padding: 1em;
}
    
.recentworks .recentwork-scroller img {
    display: block;
    height: auto;
    object-position: center;
    margin: auto;
    width: 100%;
}
/* customscroll-end */

@keyframes scrolling-gallery {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(var(--scrolling-gallery-items-total) * -100% / var(--scrolling-gallery-items-visible)));
    }
}
    
 .recentwork-scroller:hover,
 .recentwork-scroller:focus {
    animation-play-state: paused;
}



@media screen and (max-width: 1199px) {
    .blog-card.food-demo-videos h3 {
        min-height: 50px;
    }
    .drone-icon-wrap {
        padding: 30px;
    }
    .drone-icon-wrap h4 {
        font-size: 19px;
        line-height: 28px;
        margin: 0 0 10px;
    }
}
@media screen and (max-width: 991px) {
    .food-order-main {
        padding-bottom: 0;
    }
    .ordering-app i {
        font-size: 20px;
        top: 1px;
    }
    .drone-icon-wrap h4 {
        font-size: 18px;
        line-height: 28px;
        margin: 0 0 10px;
    }
    .drone-icon-wrap {
        padding: 20px;
    }
    .drone-icon-wrap img {
        margin: 0 0 15px;
    }
}
@media screen and (max-width: 767px) {
    .screens-main {
        padding-bottom: 0;
    }
    
}
@media screen and (max-width: 575px) {
    .desc.recent-desc {
        padding-bottom: 0;
    }
}
@media screen and (max-width: 480px) {
    .ordering-app .title-wrap {
        padding-left: 30px;
    }
    .ordering-app i {
        font-size: 18px;
        top: 0px;
    }
    #hireDeveloper .accordion-button, #nodeDeveloper .accordion-button {
        font-size: 16px;
        padding: 12px;
    }
    #hireDeveloper .accordion-body, #nodeDeveloper .accordion-body {
        padding: 0px 12px 0 14px;
    }
}