body {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
}

a, a:hover, button, button:hover {
    transition: 0.3s ease all;
}

a, a:hover {
    text-decoration: none;
}
.navbar.bgwhite{
    background: #ffffff !important;
}
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:hover{
    color: #ffffff !important;
}
.sticky.navbar-light .navbar-nav .nav-link, .sticky.navbar-light .navbar-nav .nav-link:hover,
.navbar-light.bgwhite .navbar-nav .nav-link, .navbar-light.bgwhite .navbar-nav .nav-link:hover{
    color: #000 !important;
}
#new-nav .nav-item:hover a .hovercol{
    color: #ffffff !important;
}
.bgwhite#new-nav .nav-item:hover a .hovercol,
.sticky#new-nav .nav-item:hover a .hovercol{
    color: #000 !important;
}
/*BANNER*/
.prado-banner-fluid{
    background: #0e1322;
    padding: 120px 12px;
}
.prado-banner-fluid h1{
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 60px;
}
.prado-banner-fluid h1 span{
    font-weight: 600;
}
header {
    margin-bottom: -6rem !important;
}
/*ABOUT*/
.about-prado-fluid{
    background: #ffffff;
    padding: 120px 12px;
}
.happy-customer-row{
    padding-bottom: 60px;
}
.happy-customer-column{
    position: relative;
}
.happy-customer-column:before{
    width: 2px;
    height: 50px;
    border-radius: 20px;
    opacity: 0.2;
    background: #BD0000;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
}
.happy-customer-column:last-child:before{
    display: none;
}
.happy-customer-column h6{
    font-size: 46px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: 0.04em;
    color: #000000;
}
.about-prado-fluid h5{
    font-size: 26px;
    font-weight: 500;
    line-height: 46px;
    color: #25403D;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.about-prado-fluid p{
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    color: #000000;
    margin-bottom: 0;
}
.about-prado-fluid ul{
    padding-top: 60px;
}
.about-prado-fluid ul li a{
    position: relative;
    transition: 0.3s ease all;
    display: inline-block;
}
.about-prado-fluid ul li a img{
    height: 50px;
    transition: 0.3s ease all;
}
.hover-icon{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    opacity: 0;
}
.about-prado-fluid ul li a:hover .hover-icon{
    opacity: 1;
}
.about-prado-fluid ul li a:hover .primary-icon{
    opacity: 0;
}
.about-prado-fluid .happy-customer-column p{
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #A1A1A1;
}
.about-product-fluid{
    background: #0F172A;
    background-size: cover;
    padding: 120px 12px;
}
.about-product-img-row{
    padding-bottom: 90px;
}
.common-heading{
    padding-bottom: 0;
}
.common-heading h5{
    font-size: 40px;
    font-weight: 700;
    line-height: 62px;
    color: #ffffff;
}
.common-heading p{
    font-size: 20px;
    font-weight: 400;
    line-height: 35px;
    color: #ffffff70;
    padding-bottom: 0;
    margin-bottom: 0;
    position: relative;
}
.img-fluid.banner-single-img{
    height: 120px;
    width: 120px;
    position: absolute;
    left: 15%;
    bottom: 40px;
}
.about-product-card-row{
    position: relative;
    z-index: 1;
    padding-top: 90px;
}
.my-border-hy{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    animation: border_hy 5s linear forwards infinite;
    animation-direction: alternate;
    background: linear-gradient(90deg, #ffffff 65%, #ffffff 35%) top / 100% 100% no-repeat;
}
.my-border-hy .strips-div{
    position: absolute;
    content: '';
    left: -1px;
    top: 20px;
    width: 3px;
    background: #ffffff;
    height: 65px;
}
@keyframes border_hy {
    0% {
        height: 80%
    }

    100% {
        height: 100%
    }
}
.product-inner-card{
    padding: 30px;
}
.product-inner-card h6{
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 40px;
    color: #ffffff;
}
.product-inner-card h6 img{
    width: 64px;
    height: 64px;
    margin-right: 15px;
}
.product-inner-card ul{
    padding-left: 30px;
}
.product-inner-card ul li{
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #ffffff;
    padding: 4px 0;
}
.product-background-layer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.research-base-drive-fluid{
    overflow-x:hidden;
    padding: 120px 12px;
    background: #EEF2F7;
}
.inspiring-smooth-fluid .common-heading h5,
.research-base-drive-fluid .common-heading h5,
.smooth-onboarding-heading .common-heading h5,
.making-way-consistent-fluid .common-heading h5{
    color: #000000;
}
.inspiring-smooth-fluid .common-heading p,
.research-base-drive-fluid .common-heading p,
.making-way-consistent-fluid .common-heading p{
    color: #00000060;
}
.research-base-group-img{
    position: absolute;
    left: -72px;
    top: -120px;
    width: 675px;
    z-index: 0;
}
.research-base-details-row{
    padding-top: 70px;
}
.user-details-research-img{
    width: 70%;
}
.user-details-research-img img{
    position: relative;
    left: -74px;
}
.user-details-research-details{
    width: 30%;
    padding: 0;
    position: relative;
    left: -74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.user-details-research-details h5{
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    color: #000000;
}
.user-details-research-details p{
    font-size: 20px;
    font-weight: 400;
    line-height:24px;
    color: #00000060;
}
.custom-accordion .card{
    margin-bottom: 12px;
    background: #ffffff;
    border-radius: 20px;
    border: 0;
}
.custom-accordion .card .btn{
    display: flex;
    align-items: center;
    border: 0;
    justify-content: space-between;
    border-radius: 20px;
    background: #ffffff;
    padding: 15px;
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    color: #000000;
    text-align: left;
}
.custom-accordion .card .btn.collapsed{
   border-radius: 20px;
}
.custom-accordion .card .btn{
   border-radius: 20px 20px 0 0;
}
.custom-accordion .card .btn.about-card.collapsed ~ .collapse,
.custom-accordion .card .btn.about-card.collapsed ~ .collapsing,
.custom-accordion .card .btn.about-card.collapsed,
.custom-accordion .card .btn.goals-needs-card.collapsed ~ .collapse,
.custom-accordion .card .btn.goals-needs-card.collapsed ~ .collapsing,
.custom-accordion .card .btn.goals-needs-card.collapsed,
.custom-accordion .card .btn.pain-points-card.collapsed ~ .collapse,
.custom-accordion .card .btn.pain-points-card.collapsed ~ .collapsing,
.custom-accordion .card .btn.pain-points-card.collapsed,
.custom-accordion .card .btn.solutions-card.collapsed ~ .collapse,
.custom-accordion .card .btn.solutions-card.collapsed ~ .collapsing,
.custom-accordion .card .btn.solutions-card.collapsed{
    background: #ffffff;
    color: #000000;
}

.custom-accordion .card .btn.about-card ~ .collapse,
.custom-accordion .card .btn.about-card ~ .collapsing,
.custom-accordion .card .btn.about-card{
    background: #000000;
    color: #ffffff;
}
.custom-accordion .card .btn.goals-needs-card ~ .collapse,
.custom-accordion .card .btn.goals-needs-card ~ .collapsing,
.custom-accordion .card .btn.goals-needs-card{
    color: #ffffff;
    background: #F68B29;
}
.custom-accordion .card .btn.pain-points-card ~ .collapse,
.custom-accordion .card .btn.pain-points-card ~ .collapsing,
.custom-accordion .card .btn.pain-points-card{
    background: #FF4545;
    color: #ffffff;
}
.custom-accordion .card .btn.solutions-card ~ .collapse,
.custom-accordion .card .btn.solutions-card ~ .collapsing,
.custom-accordion .card .btn.solutions-card{
    background: #00F076;
}
.collapse-inner-header{
    display: flex;
    align-items: center;
}
.icons-div{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    position: relative;
}
.custom-accordion .card .btn img{
    width: 100%;
    height: 100%;
}
.custom-accordion .card .btn img.image-white{
    position: absolute;
    top: 0;
    left: 0;
}
.custom-accordion .card .btn img.image-white,
.custom-accordion .card .btn.collapsed img.image-primary{
    opacity: 1;
}
.custom-accordion .card .btn img.image-primary,
.custom-accordion .card .btn.collapsed img.image-white{
    opacity: 0;
}
.custom-accordion .card .collapse{
    border: 0;
}
.custom-accordion .card .btn.collapsed ~ .collapse{
    border-radius: 0;
}
.custom-accordion .card .btn ~ .collapsing,
.custom-accordion .card .btn ~ .collapse{
    border-radius: 0 0 20px 20px;
}
.custom-accordion .card .collapse .card-body{
    padding: 0 20px 20px 45px;
}
.custom-accordion .card .collapse .card-body p,
.custom-accordion .card .collapse .card-body ul li{
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}
.custom-accordion .card .btn .arrow-icon{
    width: 20px;
    height: 20px;
    position: relative;
}
.custom-accordion .card .btn .arrow-icon img{
    width: 100%;
    height: 100%;
}
.custom-accordion .card .btn.collapsed .arrow-icon img.arrow-black{
    opacity: 1;
}
.custom-accordion .card .btn .arrow-icon img{
    position: absolute;
    left: 0;
    right: 0;
}
.custom-accordion .card .btn .arrow-icon img.arrow-black,
.custom-accordion .card .btn.collapsed .arrow-icon img.arrow-white{
    opacity: 0;
}
.custom-accordion .card .btn .arrow-icon img.arrow-white{
    opacity: 1;
}
.inspiring-smooth-fluid{
    background: #EEF2F7;
    padding: 120px  12px;
    position: relative;
    z-index: 1;
}
.inspiring-smooth-fluid:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: #F5F7FA;
    border-radius: 0 0 700px 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.inspiring-img-div{
    overflow: auto;
}
.inspiring-img-div::-webkit-scrollbar{
    display: none;
}
.inspiring-img-div > .col-12{
    width: 1700px;
    max-width: 1700px;
}
.exploring-design-wireframe-fluid{
    background: linear-gradient(180deg, #0F172A 0%, #121620 100%, #121620 100%);
    padding: 120px 12px 90px;
    position: relative;
}
.exploring-design-wireframe-fluid:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 700px;
    background: linear-gradient(180deg, #000000 18.4%, rgba(6, 7, 10, 0) 100%);
    transform: rotate(180deg);
}
.wireframe-card{
    margin: 30px 0;
}
.looper-img-div{
    width: 640px;
    height: 618px;
    position: absolute;
    top: -120px;
    right: 0;
    z-index: 1;
}
.looper-img-div img{
    width: 100%;
    height: 100%;
}
.wireframe-row-all{
    position: relative;
    z-index: 2;
}
.exploring-design-wireframe-fluid .common-heading h5{
    padding-bottom: 30px;
    position: relative;
}
.making-way-consistent-fluid{
    padding: 120px 12px 0;
    position: relative;
    overflow: hidden;
    background: #F8F8FA;
    z-index: 1;
}
.making-way-consistent-fluid:before{
    content: '';
    position: absolute;
    top: -207px;
    left: -119px;
    width: 730px;
    height: 730px;
    border-radius: 100%;
    background: #ffffff;
    z-index: 0;
}
.date-making-img{
    margin-bottom: 45px;
    position: relative;
    left: -80px;
    z-index: 1;
}
.date-making-img img{
    height: 46px;
}
.making-group-things-img{
    position: absolute;
    right: -72px;
    bottom: 0;
    height: auto;
    z-index: 0;
}
.making-group-things-img img{
    width: 100%;
    height: 100%;
}
.making-way-consistent-fluid .common-heading h5{
    font-size: 24px;
    line-height: 34px;
    z-index: 1;
    position: relative;
}
.making-way-consistent-fluid .common-heading p{
    font-size: 16px;
    line-height: 28px;
    padding-bottom: 20px;
    margin-bottom: 0;
    z-index: 1;
}
.mobile-group-div{
    padding-bottom: 70px;
    position: relative;
}
.utilizing-info-fluid{
    background: #ffffff;
    padding: 120px 12px 90px;
}
.description-utilizing-section{
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
}
.real-time-tracker-fluid .common-heading h5,
.description-utilizing-section .common-heading h5{
    color: #000000;
    font-size: 28px;
    line-height: 42px;
}
.real-time-tracker-fluid .common-heading p,
.description-utilizing-section .common-heading p{
    color: #00000070;
    margin: 0;
    font-size: 18px;
    line-height: 32px;
}
.strategically-flow-fluid .description-utilizing-section{
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
}
.real-time-tracker-fluid{
    padding: 90px 12px 45px;
}
.development-tools-fluid{
    background: #06070A;
    padding: 120px 12px 0;
    position: relative;
}
.accomplishing-undefeated-efficiency-fluid{
    background: linear-gradient(180deg, #06070A 0%, #0F172A 100%);
    padding: 0 12px 120px;
}
.robust-app-env-fluid{
    padding-top: 60px;
    background: linear-gradient(180deg, #0F172A 0%, #06070A 100%);
}
.user-interface-fluid{
    background: #06070A;
    z-index: 1;
    padding: 90px 12px 120px;
}
.user-interface-fluid:after,
.style-guide-fluid:after{
    content: '';
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
    height: 80px;
    border-radius: 0 0 90px 90px;
    background: #06070A;
    box-shadow: 0 14px 85px 0 #00000040;
    z-index: 0;
}
.marquee-slider-div{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
.marquee-slider-div marquee{
    height: 55px;
    display: flex;
    align-items: center;
}
.marquee-slider-div ul li span{
    border: 1px solid #ffffff;
    padding: 12px 32px;
    border-radius: 48px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #ffffff;
}
.style-guide-fluid{
    background: #25403D;
    position: relative;
    padding: 180px 12px 0;
}
.style-guide-fluid:after{
    box-shadow: none;
    z-index: 1;
    background: #25403D;
}
.smooth-onboarding-fluid{
    background: #F5F7FA;
    padding: 200px 12px 120px;
    overflow: hidden;
}
.smooth-onboarding-heading{
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
}
.smooth-onboarding-heading .common-heading h5{
    color: #000000;
    position: relative;
    padding-bottom: 30px;
}
.letting-customers-meals-fluid{
    padding:0 0 30px;
}
.letting-customer-details{
    position: absolute;
    top: 60px;
    right: 60px;
    width: 40%;
}
.letting-customer-details .common-heading h5{
    color: #000000;
    font-size: 30px;
    line-height: 45px;
}
.letting-customer-details .common-heading p{
    color: #00000060;
    font-size: 18px;
    line-height: 30px;
}
.schedule-food-fluid{
    padding: 90px 12px 120px;
}
.letting-customer-details.schedule-food-row{
    right: auto;
    left: 60px;
    top: 0;
    width: 40%;
}
.design-tools-fluid {
    background: #EEF2F7;
    padding: 60px 15px 0;
}
.design-tools-fluid h5 {
    font-size: 40px;
    font-weight: 600;
    line-height: 60px;
    color: #000000;
    margin-bottom: 60px;
}
.design-tools-fluid h6 {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #000000;
    margin-bottom: 15px;
    padding-left: 30px;
}
.design-tools-fluid ul {
    margin-bottom: 30px;
    padding-left: 30px;
}
.design-tools-fluid ul li img {
    width: 100px;
    height: 100px;
}
.bg-shade-1, .bg-shade-2{
    height: 700px;
    position: absolute;
    bottom: 0;
}
.bg-shade-1{
    left: -12px;
}
.bg-shade-1 img, .bg-shade-2 img{
    height: 100%;
    width: 100%;
}
.bg-shade-2{
    right: -12px;
    bottom: -45px;
}
.cooking-studio-fluid{
    background: #F3F0FF;
    padding: 120px 12px;
}
.cooking-studio-heading{
    padding-bottom: 35px;
}
.cooking-studio-heading h5{
    color: #000C51;
    font-size: 40px;
    font-weight: 700;
    line-height: 58px;
    margin-bottom: 20px;
}
.cooking-studio-heading h5 span{
    color: #3D5AFE;
}
.cooking-studio-heading p{
    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    color: #828FAD;
}
button.all-blogs-button{
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: #3D5AFE;
    background: transparent;
    border: 0;
    padding: 0;
}
.blogs-card .blog-img{
    border-radius: 20px;
}
.blogs-card h6{
    margin-top: 30px;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 20px;
}
.blogs-card h6 a{
    color: #000C51;
}
.blogs-card p{
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    color: #828FAD;
}
button.read-more-btn{
    font-size: 18px;
    font-weight: 400;
    line-height: 34px;
    color: #007BFF;
    background: transparent;
    padding: 0;
    border: 0;
}
button.read-more-btn img,
button.all-blogs-button img{
    height: 12px;
    margin-left: 5px;
}
.footer-screenshot-fluid{
    padding-top: 90px;
}
.ceo-quote-row {
    position: relative;
    background: #25403D;
    border-radius: 36px;
    padding: 52px 38px;
    margin-top: 100px;
    margin-bottom: 120px;
}
.quote-icon {
    position: absolute;
    top: 15px;
    right: 40px;
    padding: 0;
    width: auto;
}
.tool-clip-img{
    position: absolute;
    top: -12px;
    right: -24px;
}
.tool-clip-img img{
    height: 200px;
}
.quote-icon img {
    height: 35px;
}
.ceo-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    float: left;
}
.ceo-img img {
    width: 100%;
    height: 100%;
}
.ceo-details {
    padding-left: 20px;
    float: left;
    position: relative;
    width: calc(100% - 120px);
}
.ceo-details:before {
    content: '';
    position: absolute;
    top: -10px;
    right: 20px;
    height: 75px;
    width: 2px;
    background: #FFFFFF20;
}
.ceo-details h6 {
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
    color: #ffffff;
    margin-bottom: 0;
}
.ceo-details p {
    font-size: 22px;
    font-weight: 400;
    line-height: 40px;
    color: #FFFFFF99;
}
.ceo-quote-row h5 {
    font-size: 36px;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -0.800000011920929px;
    color: #ffffff;
}
.more-case-studies-row h5 {
    font-size: 32px;
    font-weight: 600;
    line-height: 44px;
    color: #000836;
}
.more-case-studies-row h5 span {
    color: #0151A8;
}
.mobile-onboarding-layer-img, .onboarding-food-mobile, .common-heading p.before-after-none:before, .common-heading p.before-after-none:after{
    display: none;
}
.line-hr-tag{
    margin: 45px 0 30px;
    width: 100%;
    height: 1px;
    background:  linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 54.34%, rgba(255, 255, 255, 0) 100%);
}
.enhance-div{
    margin: 15px 0;
}
.enhance-div h6{
    font-size: 20px;
    font-weight: 600;
    line-height: 25px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}
.enhance-div h6 img{
    height: 24px;
    margin-right: 5px;
}
.enhance-div span{
    font-size: 18px;
    font-weight: 400;
    line-height: 33px;
    color: #FFFFFF60;
}
.about-meal-img-div{
    width: 100%;
    height: 100%;
    transition: 1.5s ease all;
}
.about-meal-img-div img{
    transition: 1.5s ease all;
}
.about-meal-img-div:hover img.gray{
    opacity: 0;
}
.about-meal-img-div img.primary{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.about-meal-img-div:hover img.primary{
    opacity: 1;
}
   
.wrapper {
    margin: 0 auto;
}

.trigger {
    position: absolute;
}

.trigger--one {
    left: 0;
}

.scene {
    position: absolute;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
}

.scene--active {
    position: fixed;
}

.scene--ended {
    position: absolute;
    bottom: 0;
    top: auto;
}

.horizontal-scroll-section {
    position: relative;
    min-height: 100vh;
    opacity: 0;
    transition: 0.2s opacity;
}

.horizontal-scroll-section img {
    display: block;
    max-height: 80%;
    width: auto;
}

.horizontal-scroll-section--init {
    opacity: 1;
}

.horizontal-scroll-section__content {
    display: flex;
    align-items: center;
}

.horizontal-scroll-section__content-wrapper {
    display: flex;
    height: 100%;
    align-items: center;
    position: relative;
}

.horizontal-scroll-section__content-section {
    position: relative;
    min-width: 42vw;
    text-align: center;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
}

.horizontal-scroll-section__image {
    display: flex;
    align-items: center;
}

.horizontal-scroll-section__image h2 {
    margin-left: 20px;
    width: 250px;
    text-align: left;
    flex-shrink: 0;
}

.horizontal-scroll-section--animation-one .horizontal-scroll-section__image--two {
    opacity: 1;
    transform: translateX(0);
}
.smooth-onboarding-div{
    display: flex;
    justify-content: space-between;
}
.smooth-onboarding-div .smooth-section-1,
.smooth-onboarding-div .smooth-section-2,
.smooth-onboarding-div .smooth-section-3{
    width: 30%;
    position: relative;
    animation: moveUpDown 4s ease-in-out infinite;
}

.smooth-onboarding-div .smooth-section-1{
    top: 75px;
}
.smooth-onboarding-div .smooth-section-2{
    animation: moveDownUp 4s ease-in-out infinite;
}
.smooth-onboarding-div .smooth-section-3{
    top: 190px;
}

@keyframes moveUpDown {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-30px);
    }
  }
  @keyframes moveDownUp {
    0%, 100% {
      transform: translateY(-30px);
    }
    50% {
      transform: translateY(0);
    }
  }



@media screen and (min-width: 1670px) {
.horizontal-scroll-section__content-section {min-width: 37vw}
.scroll-disc {top: 235px}
}

@media screen and (min-width: 1900px) {
.horizontal-scroll-section__content-section {min-width: 33vw}
.scroll-image-3 {transform: translate(-117px, 0px)}
}
.scrollsection{
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}
.my-border{
    position: relative;
    top: 15px;
    width: 200px;
    animation: border_anim 3s linear forwards;
}
.my-border .strips{
    position: absolute;
    width: 170px;
    height: 4px;
    background-color: #26413E;
    animation: border_anim 5s linear forwards infinite;
    animation-direction: alternate;
    background: linear-gradient(90deg, #26413E 65%, #ffffff 35%) top / 100% 4px no-repeat;
    z-index: 1;
}
.my-border.same .strips{
    background: linear-gradient(90deg, #26413E  65%, #26413E 35%) top / 100% 4px no-repeat;
}
.my-border.red .strips{
    background: linear-gradient(90deg,  #26413E 65%, #711344 35%) top / 100% 4px no-repeat;
}
@keyframes border_anim {
    0% {
        width: 0%
    }

    100% {
        width: 200px
    }
}

.arrow-container {
    position: absolute;
    top: 75px;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: arrow-bounce 2s infinite ease-in-out;
    z-index: 0;
  }
  
  @keyframes arrow-bounce {
    0%, 100% {
      transform: translate(-50%, -50%) scaleY(1);
    }
    50% {
      transform: translate(-50%, -50%) scaleY(0.7);
    }
  }

.number-wrapper {
    position: relative;
    height: 56px;
    overflow: hidden;
    margin-bottom: .5rem;
}

.number {
    position: absolute;
    width: 100%;
    transform: translateY(0);
    transition: transform 1s ease;
    font-size: 46px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: 0.04em;
    color: #000000;

}

.number.slide-up {
    transform: translateY(-100%);
}

.number.new {
    transform: translateY(100%);
}
.icons-hover-section{
    transition: 0.3s ease all;
    cursor: pointer;
}
.hover-icon-section{
    position: absolute;
    bottom: 76px;
    right: 15px;
    width: 570px;
    transition: 0.3s ease all;
    opacity: 0;
}
.icons-hover-section:hover .hover-icon-section{
    opacity: 1;
}


/*RESPONSIVE*/

@media screen and (min-width: 320px) and (max-width: 767px) {
    header .nav-container {
        position: relative;
    }
    header {
        margin-bottom: -5rem !important;
    }
.development-tools-fluid .common-heading h5{
    padding-bottom: 40px;
}
.arrow-container{
    left: 50.3%;
}
.hover-icon-section{display: none}
.mobile-group-div {padding-bottom: 45px;padding-top: 30px}
.description-utilizing-section ~ img, .mobile-slide-img{padding-top: 30px}
.real-time-tracker-fluid {padding: 60px 12px 30px}
.quote-icon img {height: 20px}
.description-utilizing-section {width: 100%;position: relative}
.making-group-things-img {position: relative;right: 0;margin-top: -45px}
.date-making-img {margin-bottom: 0;left: 0}
.common-heading {padding-bottom: 60px}
.making-way-consistent-fluid .common-heading h5 {font-size: 20px;line-height: 30px}
.making-way-consistent-fluid .common-heading p, .common-heading p {font-size: 16px;line-height: 32px}
.making-way-consistent-fluid {padding: 60px 12px 0}
.making-way-consistent-fluid:before {width: 485px;height: 585px}
.looper-img-div {width: 250px;height: 250px;top: -50px}
.common-heading h5 {font-size: 24px;line-height:38px}
.exploring-design-wireframe-fluid {padding: 60px 12px}
.common-heading {padding-bottom: 30px}
.inspiring-smooth-fluid,
.research-base-drive-fluid{padding: 60px 12px}
.user-details-research-img {width: 50%}
.user-details-research-img img {left: -90px;top: -30px}
.user-details-research-details {width: 50%;left: -30px;top: -45px}
.user-details-research-details h5 {font-size: 24px;line-height: 34px}
.user-details-research-details p {font-size: 16px;line-height: 21px}
.custom-accordion{padding-top: 30px}
.research-base-group-img {left: -45px;top: 65%;width: 685px}
.custom-accordion .card .btn {font-size: 18px;line-height: 30px}
.custom-accordion .card .collapse .card-body p, .custom-accordion .card .collapse .card-body ul li {font-size: 16px;line-height: 30px}
.custom-accordion .card .btn img {width: 35px;height: 35px}
.about-product-img-row {padding-bottom: 60px}
.about-product-fluid, .about-prado-fluid, .utilizing-info-fluid {padding: 60px 12px}
.about-product-card-row > .col-12{margin: 15px 0}
.product-inner-card {padding: 10px}
.product-inner-card h6 {font-size: 20px;line-height: 32px;margin-bottom: 30px}
.product-inner-card ul li {font-size: 16px;line-height: 28px}
.happy-customer-column:before{display: none}
.happy-customer-column {text-align: center;padding-bottom: 45px}
.happy-customer-column h6 {font-size: 50px;line-height: 62px}
.about-prado-fluid .happy-customer-column p {font-size: 20px;line-height: 28px}
.happy-customer-row {padding-bottom: 15px}
.about-prado-fluid h5 {font-size: 24px;line-height: 42px;text-align: center}
.about-prado-fluid p {font-size: 16px;line-height: 40px;text-align: center}
.about-prado-fluid ul {padding-top: 30px;padding-bottom: 60px;text-align: center}
.about-prado-fluid ul li a img {height: 40px;margin: 10px 0}
.prado-banner-fluid {padding: 100px 12px 30px}
.prado-banner-fluid h1 {margin-bottom: 0;line-height: 40px;font-size: 30px}
.prado-banner-fluid h1 span {font-weight: 600;margin-bottom: 10px;display: inline-block}
.real-time-tracker-fluid .common-heading h5, .description-utilizing-section .common-heading h5 {font-size: 24px;line-height: 38px}
.real-time-tracker-fluid .common-heading p, .description-utilizing-section .common-heading p {font-size: 16px;line-height: 32px}
.development-tools-fluid {padding: 60px 12px 20px}
.accomplishing-undefeated-efficiency-fluid {padding: 60px 12px 30px}
.user-interface-fluid {padding: 60px 12px 90px}
.row.common-heading.pb-0{padding-bottom: 60px !important}
.marquee-slider-div ul li span {padding: 10px 20px;font-size: 12px;line-height: 16px}
.user-interface-fluid:after, .style-guide-fluid:after {bottom: -49px;height: 50px;border-radius: 0 0 60px 60px}
.style-guide-fluid {padding: 100px 12px 0}
.smooth-onboarding-heading {position: relative;width: 100%}
.smooth-onboarding-fluid {padding: 100px 12px 60px}
.bg-shade-1, .bg-shade-2 {height: 400px}
.bg-shade-2 {bottom: 100px}
.letting-customer-details {position: relative;top: 0;right: 0;width: 100%}
.schedule-food-fluid {padding: 0 12px 60px}
.letting-customer-details.schedule-food-row {right: auto;left: 0;top: 0;width: 100%}
.design-tools-fluid h5 {font-size: 24px;line-height: 36px;margin-bottom: 30px}
.design-tools-fluid h6, .design-tools-fluid ul {padding-left: 0}
.design-tools-fluid ul li img {width: 55px;height: 55px}
.ceo-img {width: 90px;height: 90px}
.ceo-quote-row {padding: 30px 20px;margin-top: 45px;margin-bottom: 60px}
.ceo-details {padding-left: 15px;width: calc(100% - 90px)}
.ceo-details h6 {font-size: 22px;line-height: 34px}
.ceo-details p {font-size: 15px;line-height: 28px}
.ceo-details:before, .mobile-none, .bg-shade-1{display: none}
.ceo-quote-row h5 {font-size: 20px;line-height: 35px;margin-top: 20px}
.cooking-studio-fluid {padding: 45px 0 30px}
.cooking-studio-heading h5 {font-size: 24px;line-height: 34px}
.cooking-studio-heading p {font-size: 16px;line-height: 32px}
.col-12.col-sm-12.col-md-12.col-lg-4.text-end{text-align: left !important}
.blogs-card {padding-bottom: 30px}
.footer-screenshot-fluid {padding-top: 60px}
.mobile-onboarding-layer-img{display: inline-block;width: 680px;overflow: auto;position: relative;left: 30px}
.mobile-onboarding-layer-img img{height: 450px}
.onboarding-food-mobile{display: inline-block;padding-top: 30px}
.onboarding-food-mobile img{height: 200px}
.inspiring-img-div{overflow: auto}
.inspiring-img-div .col-12{width: 1500px;max-width: 1500px}
.wireframe-row-mobile{overflow: auto}
.wireframe-row-mobile > .col-12{width: 2050px;max-width: 2050px;display: flex;}
.wireframe-row-mobile .wireframe-card{padding: 0 18px;margin: 0;width: 250px;float: left}
.wireframe-row-mobile .wireframe-card img{height: 475px}
.development-tools-img-row, .robust-row-img{overflow: auto;margin-top: 0 !important}
.robust-row-img .col-12{width: 775px;max-width: 775px;display: flex;}
.robust-row-img .col-12 img{
    width: 775px;
    max-width: 775px;
}
.img-fluid.banner-single-img {
    height: 40px;
    width: 40px;
    bottom: 0;
}
.smooth-onboarding-div{
    display: none;
}
.mobile-schedule-img{position: relative;right: -24px}
.about-prado-fluid h5 span{
    font-weight: 700;
}
.tool-clip-img{display: none;}
.mobile-slide-img, .typo-icon-scroll{
    overflow: auto;
}
.typo-icon-scroll{
    margin-top: 30px;
}
.mobile-slide-img .col-12{
    max-width: 1200px;
    width: 1200px;
    display: flex;
}
.mobile-slide-img .list-inline-list{
    width: 322px;
    float: left;
    padding-right:10px;
}
.mobile-slide-img .list-inline-list:last-child{
    width: 432px;
}
.typo-icon-scroll .col-12, .typo-icon-scroll .col-12 img{
    width: 600px;
    max-width: 600px;
}
.letting-customers-meals-fluid {
    padding: 30px 0;
}
.design-tools-fluid {
    padding: 45px 0 0;
}


}
@media screen and (min-width: 768px) and (max-width: 1200px) {
    .development-tools-fluid .common-heading h5{
        padding-bottom: 40px;
    }
    .letting-customers-meals-fluid .img-fluid.d-block{
        height: 1100px;
        margin: auto;
    }
.img-fluid.banner-single-img {height: 100px;width: 100px;bottom: 0}
.arrow-container {top: 55px}
.hover-icon-section{display: none}
.prado-banner-fluid {padding: 120px 12px 90px}
.prado-banner-fluid h1 {margin-bottom: 45px}
.about-prado-fluid {padding: 75px 12px}
.happy-customer-row {padding-bottom: 45px}
.about-prado-fluid h5 {font-size: 22px;line-height: 38px}
.about-prado-fluid p {font-size: 18px;line-height: 36px}
.about-prado-fluid ul {padding-top: 45px;padding-bottom: 45px}
.about-product-fluid {padding: 75px 12px}
.about-product-img-row {padding-bottom: 60px}
.common-heading {padding-bottom: 45px}
.common-heading h5 {font-size: 28px;line-height: 40px}
.common-heading p {font-size: 16px;line-height: 30px;padding-bottom: 25px}
.about-product-card-row .col-12.col-sm-12.col-md-12.col-lg-4 {margin-bottom: 30px}
.research-base-drive-fluid {padding: 90px 12px}
.research-base-group-img {top: 30px;width: 475px}
.research-base-details-row {padding-top: 15px}
.custom-accordion{margin-top: 45px}
.inspiring-smooth-fluid {padding: 75px 12px}
.exploring-design-wireframe-fluid {padding: 75px 12px 60px}
.making-way-consistent-fluid {padding: 75px 12px 170px}
.making-group-things-img {right: -38px;bottom: -100px;z-index: -1;width: 75%}
.utilizing-info-fluid {padding: 90px 12px 60px}
.description-utilizing-section {position: relative;top: 0;left: 0;width: 100%}
.accomplishing-undefeated-efficiency-fluid {padding: 0 12px 75px}
.smooth-onboarding-heading {top: -80px;width: 35%}
.letting-customer-details {position: relative;right: 0;width: 100%}
.letting-customer-details.schedule-food-row {right: auto;left: 0;top: 0;width: 100%}
.design-tools-fluid h5 {font-size: 32px;line-height: 50px;margin-bottom: 0}
.design-tools-img{margin-bottom: 45px}
.ceo-quote-row {margin-top: 60px;margin-bottom: 90px}
.ceo-quote-row h5 {font-size: 28px;line-height: 40px;margin-top: 30px}
.cooking-studio-fluid {padding: 75px 12px 30px}
.cooking-studio-heading h5 {font-size: 32px;line-height: 48px;margin-bottom: 10px}
.cooking-studio-heading p {font-size: 18px;line-height: 34px}
.blogs-card{margin-bottom: 45px}
.product-inner-card {padding: 10px}
}
@media screen and (min-width: 1024px) and (max-width: 1200px){
.letting-customer-details {position: absolute;width: 50%}
.letting-customer-details.schedule-food-row {width: 47%}
.design-tools-fluid ul li img {width: 85px;height: 85px}
}
@media screen and (min-width: 1201px) and (max-width: 1600px) {
    .looper-img-div {
        top: -230px;
    }
.hover-icon-section{bottom: 56px;right: 15px;width: 425px}
.arrow-container {top: 65px}
.ceo-quote-row {margin-bottom: 90px}
.ceo-quote-row h5 {font-size: 26px;line-height: 40px}
.common-heading h5 {font-size: 32px;line-height: 50px}
.common-heading {padding-bottom: 0}
.design-tools-fluid h5 {font-size: 26px;line-height: 36px;margin-bottom: 45px}
.cooking-studio-heading h5 {font-size: 32px;line-height: 42px}
.cooking-studio-heading p {font-size: 16px;line-height: 28px}
button.all-blogs-button {font-size: 18px;line-height: 28px}
.blogs-card h6 {margin-top: 25px;font-size: 16px;line-height: 27px;margin-bottom: 15px}
.blogs-card p {font-size: 15px;line-height: 24px;margin-bottom: 10px}
button.read-more-btn {font-size: 15px;line-height: 30px}
}
@media screen and (min-width: 1401px) and (max-width: 1600px) {
.common-heading h5 {font-size: 36px;line-height: 56px}
.common-heading p {font-size: 18px;line-height: 32px}
.product-inner-card h6 {font-size: 20px;line-height: 30px;margin-bottom: 35px}
.product-inner-card {padding: 20px 40px 20px 20px}
.product-inner-card ul li {font-size: 18px}
.hover-icon-section {bottom: 66px;right: 15px;width: 506px}
}
@media screen and (min-width: 1601px) and (max-width: 1919px) {
.hover-icon-section {bottom: 66px;right: 15px;width: 506px}
}
@media screen and (min-width: 1920px) and (max-width: 4000px) {
.container{max-width: 1520px}
.real-time-tracker-fluid .common-heading h5, .description-utilizing-section .common-heading h5 {font-size: 40px;line-height: 57px}
.description-utilizing-section {width: 40%}
}
@media screen and (min-width: 1920px) and (max-width:2500px){
.letting-customer-details {top: 15%;right: 20%;width: 25%}
}
@media screen and (min-width: 2501px) and (max-width: 4000px) {
.letting-customer-details {top: 15%;right: 20%;width: 25%}
}