doormile-site/includes/sections/hero/howits-hero-section.php

<!-- <style>
    .howits-hero-custom-bg.elementor-repeater-item-3264830,
    .howits-hero-custom-bg.elementor-repeater-item-6867061 {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('assets/images/home1-slide-1.png') !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .howits-hero-custom-bg.elementor-repeater-item-6867061 {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('assets/images/home1-slide-2.png') !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    @media (max-width: 1024px) {
        .elementor-element.elementor-element-741f56c {
            width: calc(100% - 40px) !important;
            max-width: none !important;
            margin-left: auto !important;
            margin-right: auto !important;
            overflow: hidden !important;
            border-radius: 25px !important;
            --padding-top: 0px !important;
            --padding-bottom: 0px !important;
            --padding-left: 0px !important;
            --padding-right: 0px !important;
        }

        .elementor-element.elementor-element-6c7cbcb,
        .elementor-element.elementor-element-6c7cbcb > .elementor-widget-container,
        .elementor-element.elementor-element-6c7cbcb .logico-content-slider-widget,
        .elementor-element.elementor-element-6c7cbcb .content-slider-wrapper,
        .elementor-element.elementor-element-6c7cbcb .content-slider-container,
        .elementor-element.elementor-element-6c7cbcb .content-slider,
        .elementor-element.elementor-element-6c7cbcb .owl-stage-outer,
        .elementor-element.elementor-element-6c7cbcb .owl-stage,
        .elementor-element.elementor-element-6c7cbcb .owl-item {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

        .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
            width: 100% !important;
            min-height: 620px !important;
            height: 620px !important;
            border-radius: 25px !important;
            overflow: hidden !important;
        }

        .elementor-element.elementor-element-6c7cbcb .slide-content {
            width: 100% !important;
            min-height: 620px !important;
            padding-left: 48px !important;
            padding-right: 48px !important;
            box-sizing: border-box !important;
        }

        .elementor-element.elementor-element-6c7cbcb .slide-content-inner {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }

    @media (max-width: 767px) {
        .elementor-element.elementor-element-741f56c {
            width: calc(100% - 24px) !important;
            border-radius: 22px !important;
        }

        .elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
            min-height: 560px !important;
            height: 560px !important;
            border-radius: 22px !important;
        }

        .elementor-element.elementor-element-6c7cbcb .slide-content {
            min-height: 560px !important;
            padding-left: 22px !important;
            padding-right: 22px !important;
        }

        .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
            max-width: 100% !important;
            font-size: clamp(38px, 11vw, 48px) !important;
            line-height: 1.05 !important;
            overflow-wrap: break-word !important;
        }

        .elementor-element.elementor-element-6c7cbcb .content-slider-item-text,
        .elementor-element.elementor-element-6c7cbcb .content-slider-item-text .text-content {
            max-width: 100% !important;
            font-size: 17px !important;
            line-height: 1.55 !important;
        }
    }
</style> -->
<div class="elementor-61">
<div class="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
    <div class="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
        <div class="elementor-widget-container">
            <div class="logico-content-slider-widget">
                <div class="content-slider-wrapper">
                    <div class="content-slider-container">
                        <div class="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom" data-slider-options="{&quot;items&quot;:1,&quot;nav&quot;:true,&quot;navText&quot;:&quot;&quot;,&quot;dots&quot;:true,&quot;progress&quot;:true,&quot;dotsContainer&quot;:&quot;.owl-dots-6c7cbcb&quot;,&quot;autoplayHoverPause&quot;:false,&quot;autoplay&quot;:false,&quot;autoplaySpeed&quot;:5000,&quot;autoplayTimeout&quot;:5000,&quot;loop&quot;:true,&quot;dragEndSpeed&quot;:1200,&quot;navSpeed&quot;:1200,&quot;dotsSpeed&quot;:1200,&quot;pullDrag&quot;:false,&quot;freeDrag&quot;:false,&quot;callbacks&quot;:false,&quot;animateOut&quot;:&quot;fadeOut&quot;,&quot;rtl&quot;:false}">
                            <div class="content-item slider-item elementor-repeater-item-3264830 slide-style-standard howits-hero-custom-bg">
                                <div class="slide-content">
                                    <div class="slide-content-inner">
                                        <h1 class="content-slider-item-heading logico-content-wrapper-1">
                                            <span class="heading-content">One Journey. Complete
                                                Control.</span>
                                        </h1>
                                        <div class="content-slider-item-text logico-content-wrapper-2">
                                            <div class="text-content">
                                                <p>See how Doormile connects first, mid, and last
                                                    mile into a seamless delivery experience powered
                                                    by MileTruth&trade; AI.</p>
                                            </div>
                                        </div>
                                        <!-- <div class="content-slider-item-buttons logico-content-wrapper-3">
                                                                        <a class="logico-alter-button" href="#" target="_blank">Explore more</a>
                                                                    </div> -->
                                    </div>
                                </div>
                            </div>
                            <div class="content-item slider-item elementor-repeater-item-6867061 slide-style-standard howits-hero-custom-bg">
                                <div class="slide-content">
                                    <div class="slide-content-inner">
                                        <h1 class="content-slider-item-heading logico-content-wrapper-1">
                                            <span class="heading-content">A New Freight
                                                Experience</span>
                                        </h1>
                                        <div class="content-slider-item-text logico-content-wrapper-2">
                                            <div class="text-content">
                                                <p>See how Doormile connects first, mid, and last
                                                    mile into a seamless delivery experience powered
                                                    by MileTruth&trade; AI.</p>
                                            </div>
                                        </div>
                                        <!-- <div class="content-slider-item-buttons logico-content-wrapper-3">
                                                                        <a class="logico-alter-button" href="#" target="_blank">Explore more</a>
                                                                    </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
                            <div class="slider-footer-content">
                                <div class="slider-pagination">
                                    <div class="slider-progress-wrapper">
                                        <span class="slider-progress-current">01</span>
                                        /<span class="slider-progress-all">02</span>
                                    </div>
                                    <div class="owl-dots owl-dots-6c7cbcb"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>