/* trukr-section.css */

.register-btn:hover, .register-btn:focus {
    background: #0d50c0;
    color: white !important;
}
.trukr-section {
    padding: 40px 0 80px;
    background: #f7fbff;
/*    font-family: "Poppins", Arial, sans-serif;*/
    background: url('../img/home-new/section2-banner1.png'), url('../img/home-new/web.png');
    no-repeat bottom;
    background-size: cover;
   
    background-image: url('../img/home-new/section2-banner1.png'), /* top image (gradient) */
    url('../img/home-new/web.png'); /* bottom image */
    background-repeat: no-repeat, no-repeat;
    background-position:center center, bottom;
    background-size: contain, contain;
}

.trukr-section {
    padding: 80px 0 80px;
    background: #f7fbff;
/*    font-family: "Poppins", Arial, sans-serif;*/
   /* background: url('../img/home-new/web.png'), url('../img/home-new/section2-banner1.png');*/
    background-size: cover;
    background-image: url('../img/home-new/web.png'), /* top image (gradient) */
    url('../img/home-new/section2-banner1.png');
    background-repeat: no-repeat, no-repeat;
/*    background-position: bottom, bottom;
    background-size: contain, cover;*/
    background-position: 50% 80%, bottom;
    background-size: contain, cover;
    padding-bottom: 100px;
}

/* rounded banner card (top) */
.trukr-banner {
    padding: 0 0 24px;
}

.trukr-card {
    background: linear-gradient(180deg, #102b58, #153e6d);
    background: url("../img/home-new/banner-3.png");
    background-image: url('../img/home-new/bg-card3.png'), /* top layer */
    url('../img/home-new/banner-3.png'); /* bottom layer */
    background-size: cover;
    background-position: center center;
    color: #fff;
    border-radius: 22px;
    padding: 36px 36px;
    box-shadow: 0 12px 30px rgba(10,30,70,0.12);
    position: relative;
    overflow: hidden;
}

.trukr-logo {
    max-width: 140px;
    display: block;
    margin-bottom: 12px;
}

.trukr-card h2 {
    font-size: 28px;
    margin: 8px 0 12px;
    font-weight: 600;
    color:white;
}

.trukr-desc {
    font-size: 14.5px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 14px;
    max-width: 680px;
}

.trukr-card .demo-btn.btn {
    background: #fff;
    color: #0b6ef6;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border-color: #ffffff;
    border-width: 1px;
    border-style: solid;
 
    background: #ffffff
}

    .trukr-card .demo-btn.btn:hover {
       background:white;
       border-color:white;
       
     
    }

/* content area */
.trukr-content {
    margin-top: 28px;
    position: relative;
}

    /* decorative polygon background: you can replace with image if you have it */
    .trukr-content::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 120px;
        height: 260px;
/*        background: url("../img/home-new/web.png") left bottom no-repeat;*/
        background-size: cover;
        pointer-events: none;
        opacity: 1;
        z-index: 0;
    }

/* features grid */
.features-title {
    color: #2b5a91;
    font-weight: 600;
    margin-bottom: 18px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
    z-index: 2;
    position: relative;
}

.feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(20,40,70,0.06);
    box-shadow: 0 6px 18px rgba(10,40,80,0.03);
}

    .feature-card h5 {
        color: #214a7a;
        margin-bottom: 6px;
        font-weight: 700;
        font-size: 15px;
    }

    .feature-card p {
        margin: 0;
        font-size: 13.5px;
        color: #6b7280;
        line-height: 1.45;
    }

/* PHONE mockup */
.phone-mockup {
    position: relative;
    width: 320px;
    height: auto;
/*    margin-top: -40px;*/
    z-index: 3;
}

.phone-frame {
    display: block;
    width: 320px;
    height: auto;
}

.phone-screen {
    position: absolute;
    /* adjust these to position the inner screen precisely under your frame */
    left: 28px;
    top: 42px;
    width: 262px;
    height: 484px;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    overflow: hidden;
/*    box-shadow: inset 0 2px 10px rgba(0,0,0,0.15);*/
}

.phone-screen {
    position: absolute;
    left: 38px;
    top: 18px;
    width: 239px;
    height: 519px;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    overflow: hidden;
    border-radius:32px;
    /* box-shadow: inset 0 2px 10px rgba(0,0,0,0.15); */
}

/* slider dots */
.phone-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    gap: 8px;
}

    .phone-dots button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.45);
        cursor: pointer;
    }

        .phone-dots button.active {
            background: #fff;
        }



        /*docksmart section*/

.docksmart-section {
    background: #f7fbff;
    background: url('../img/home-new/web-pink.png'), url('../img/home-new/section2-banner1.png');
    background-size: cover;
    background-image: url('../img/home-new/web-pink.png'), /* top image (gradient) */
    url('../img/home-new/pink-bg.png');
    background-repeat: no-repeat, no-repeat;
    /*    background-position: bottom, bottom;
    background-size: contain, cover;*/
    background-position: 50% 80%, bottom;
    background-size: contain, cover;
    padding-bottom: 100px;
}

    /* rounded banner card (top) */
    .docksmart-section .trukr-banner {
        padding: 0 0 24px;
    }

    .docksmart-section .trukr-card {
        background: url("../img/home-new/dock-img.webp");
        background-image: url('../img/home-new/pink-card.png'), /* top layer */
        url('../img/home-new/dock-img.webp'); /* bottom layer */
        background-size: cover;
        background-position: center center;
        color: #fff;
        border-radius: 22px;
        padding: 36px 36px;
        box-shadow: 0 12px 30px rgba(10,30,70,0.12);
        position: relative;
        overflow: hidden;
    }





    .docksmart-section .trukr-desc {
        font-size: 14.5px;
/*        color: rgba(255,255,255,0.92);*/
color:#ffffff;
        line-height: 1.6;
        margin-bottom: 14px;
        max-width: 680px;
    }

    .docksmart-section .demo-btn {
        background: #fff;
        color: #0b6ef6;
        padding: 10px 18px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
    }
/* Responsive */
@media (max-width: 991px) {
    .trukr-content {
        display: block;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .phone-mockup {
        width: 260px;
    }

    .phone-frame {
        width: 260px;
    }

    .phone-screen {
        left: 22px;
        top: 34px;
        width: 216px;
        height: 400px;
        border-radius: 14px;
    }
}





/*left -right*/

/* card inner two-column layout */
.trukr-card-inner {
    display: flex;
    align-items: flex-end; /* vertically center content + button */
    gap: 28px;
    width: 100%;
    box-sizing: border-box;
}

/* left column holds logo, heading and paragraph */
.trukr-card-left {
    flex: 1 1 60%;
    min-width: 0; /* allows text truncation and wrapping inside flex */
}

/* right column for CTA */
.trukr-card-right {
    flex: 0 0 180px; /* reserve fixed space for CTA column */
    display: flex;
    justify-content: flex-end; /* push button to far right of column */
    align-items: center;
    padding-left: 8px;
}

/* make logo and heading behave */
.trukr-logo {
    max-width: 200px; /* slightly larger if needed */
    display: block;
    margin-bottom: 12px;
}

/* heading tweaks */
.trukr-card h2 {
    font-size: 30px;
    line-height: 1.12;
    margin: 6px 0 12px;
    color: #fff;
}

/* allow paragraph to take limited width inside left column */
.trukr-desc {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 640px;
}

/* CTA styling — keep as pill on the right */
.demo-btn {
    background: #fff;
    color: #0b6ef6;
    padding: 12px 20px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    box-shadow: 0 6px 18px rgba(10,40,80,0.12);
}



/* === STOCKLEAN SECTION CUSTOMIZATION === */
section#stocklean {
    padding-top: 80px;
}
.trukr-section.stocklean {
    position: relative;
    background: #f9fbff; 
    padding-bottom: 220px;
    overflow: visible;
/*    background: url("../img/home-new/web-stocklean.png");*/
    background-image: url('../img/home-new/web-stocklean.png'),
    url('../img/home-new/stocklean-bg-grad.png'); 
    background-size: cover;
    background-position: center center;
    color: #fff;
    border-radius: 0px;
    padding: 36px 36px;
    box-shadow: 0 12px 30px rgba(10,30,70,0.12);
    position: relative;
    overflow: hidden;
}

/* Stocklean banner background (custom gradient / image if needed) */
.stocklean .trukr-card {
    background-image: url('../img/home-new/grad-card-stocklean.png'), /* top layer */
    url('../img/home-new/stocklean-card.webp'); /* bottom layer */
    /*    background: linear-gradient(180deg, #0b2f5f, #16457d);*/
/*    background-image: url('../img/home-new/stocklean-card.png');*/
    background-size: cover;
    background-position: center;
}

/* Adjust heading color and logo size if needed */
.stocklean .trukr-logo {
    max-width: 150px;
    margin-bottom: 10px;
}

.stocklean .trukr-card h2 {
    color: #fff;
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1.2;
}

.stocklean .trukr-desc {
/*    color: rgba(255, 255, 255, 0.9);*/
color:#ffffff;
    font-size: 14.5px;
    max-width: 640px;
}

/* Features grid layout (no image on left side) */
.stocklean .features-grid--no-image {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1199.98px) {
    .stocklean .features-grid--no-image {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .stocklean .features-grid--no-image {
        grid-template-columns: 1fr;
    }
}

/* Bottom decorative laptop art */
.stocklean .section-art {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    max-width: calc(100% - 60px);
    bottom: -140px; /* overlap with next section */
    z-index: 1;
    pointer-events: none;
}

    .stocklean .section-art img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 18px;
        box-shadow: 0 20px 60px rgba(10, 30, 70, 0.12);
    }

/* Responsive fallback */
@media (max-width: 991.98px) {
    .stocklean {
        padding-bottom: 100px;
    }

        .stocklean .section-art {
            position: relative;
            bottom: 0;
            transform: none;
            width: 100%;
            margin-top: 30px;
        }

            .stocklean .section-art img {
                border-radius: 12px;
                box-shadow: 0 8px 28px rgba(10, 30, 70, 0.08);
            }
}


/* Smaller screens — stack and center */
@media (max-width: 991.98px) {
    .trukr-card-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-right: 20px; /* avoid button touching edges */
    }

    .trukr-card-right {
        flex: none;
        width: 100%;
        justify-content: flex-start; /* button aligns left on mobile; change to center if you prefer */
        padding-left: 0;
    }

    .demo-btn {
        margin-top: 8px;
    }

    .trukr-card h2 {
        font-size: 22px;
    }

    .trukr-desc {
        max-width: 100%;
        font-size: 14.25px;
    }
}

/*;laptop*/
/* ---------- Stocklean base ---------- */
.trukr-section.stocklean {
    position: relative;
    overflow: visible; /* allow art to overflow */
    /*  background: #f9fbff;*/
    /* internal spacing so next section won't overlap the laptop art */
    /* Adjust this value to suit your art height; 320px is a good starting point */
    padding-bottom: 200px;
    z-index: 0;
}

    /* Ensure Stocklean content (cards, headings) sits above art */
    .trukr-section.stocklean .trukr-card,
    .trukr-section.stocklean .features-grid,
    .trukr-section.stocklean .trukr-content {
        position: relative;
        z-index: 3;
    }

/* ---------- Decorative art (50% overlap) ---------- */
/* Default: full-bleed art (Option A). If you used Option B (inside .container)
   these rules still work but the image will be constrained by container width. */
.stocklean .section-art {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px; /* visual width on desktop — tweak as needed */
    max-width: calc(100% - 60px); /* prevent overflow on small screens */
    bottom: -50%; /* 50% of the image height will sit in next section */
    z-index: 1;
    pointer-events: none;
}

    /* Image sizing and style */
    .stocklean .section-art img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 12px; /* optional */
        box-shadow: 0 20px 60px rgba(10,30,70,0.10);
    }

/* Remove any default margin between sections; we use padding-bottom on stocklean */
.trukr-section + .trukr-section {
    margin-top: 0;
}

/* If you specifically want the *next* section to have top padding (300px),
   you can set it (but using stocklean's padding-bottom is preferable).
   If you WILL set next section padding you can use this rule (optional): */
.stocklean + .trukr-section {
    /* padding-top: 300px;  <-- only if you want extra spacing in the following section */
}

/* ---------- Responsive behavior ---------- */
@media (max-width: 1199.98px) {
    .stocklean {
        padding-bottom: 260px;
    }
        /* reduce vertical space on tablet */
        .stocklean .section-art {
            width: 900px;
        }
}

@media (max-width: 991.98px) {
    /* On mobile the artwork should not overlap; it should sit after content */
    .stocklean {
        padding-bottom: 120px; /* smaller padding for mobile */
    }

        .stocklean .section-art {
            position: relative;
            left: auto;
            transform: none;
            width: 100%;
            bottom: 0;
            margin-top: 32px;
            z-index: 1;
        }

            .stocklean .section-art img {
                border-radius: 10px;
                box-shadow: 0 8px 28px rgba(10,30,70,0.08);
            }
}
 


.feature-cards{
    padding-left:50px;
}

/*ICON FFEATURE CARDS*/
/* feature card base */
.feature-card {
    display: flex;
    align-items: flex-start; /* top-align icon and heading block */
    gap: 12px; /* space between icon and text */
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(20,40,70,0.06);
    box-shadow: 0 6px 18px rgba(10,40,80,0.03);
    min-height: 86px; /* keeps cards uniform height */
    box-sizing: border-box;
}

    /* icon wrapper (left) */
    .feature-card .feature-icon {
        flex: 0 0 44px; /* fixed icon column width */
        height: 44px;
        display: flex;
        align-items: baseline;
        justify-content: center;
        /*border-radius: 10px;*/ /* subtle rounded square like screenshot */
        /*background: #f3fbff;*/ /* light tint */
/*        border: 1px solid rgba(10,40,80,0.04);*/
        padding: 6px;
        box-sizing: border-box;
        padding-top:2px;    
    }

        /* actual icon image */
        .feature-card .feature-icon img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            display: block;
        }

    /* text area to the right */
    .feature-card .feature-body {
        flex: 1 1 auto;
        min-width: 0; /* allow text to wrap inside flex */
    }

    /* heading style */
    .feature-card h5 {
        margin: 0 0 6px 0;
        font-size: 14px;
        line-height: 1.2;
        color: #214a7a;
      
    }
    .feature-card h5 {
        margin: 0 0 10px 0;
        font-size: 15px;
        line-height: 1.2;
        color: #214a7a;
        font-weight: 600;
        color: #4d4d4d;
    }

    /* paragraph style */
    .feature-card p {
        margin: 0;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.35;
    }
    .feature-card p {
  
        color: #4d4d4d;
    }

    /* smaller/squared look on compact cards (if you use .small) */
    .feature-card.small {
        padding: 12px;
        min-height: 72px;
    }

        .feature-card.small .feature-icon {
            flex-basis: 40px;
            height: 40px;
        }

            .feature-card.small .feature-icon img {
                width: 20px;
                height: 20px;
            }

        .feature-card.small h5 {
            font-size: 13.5px;
        }

/* responsive: stack icon above text on very small screens */
@media (max-width: 430px) {
    .feature-card {
        flex-direction: row;
        gap: 10px;
    }
    /* If you prefer icon on top on tiny screens, uncomment:
  .feature-card { flex-direction: column; align-items: flex-start; }
  .feature-card .feature-icon { margin-bottom: 8px; }
  */
}


.trukr-section.stocklean {
    position: relative;
    background: #f9fbff;
    background: #f7f7f7;
    padding-bottom: 220px;
    overflow: visible;
    /* background: url("../img/home-new/web-stocklean.png"); */
    background-image: url('../img/home-new/web-stocklean.png'), url('../img/home-new/stocklean-bg-grad.png');
    background-size: contain;
    background-position: center 58%, bottom;
    color: #fff;
    background-repeat: no-repeat;
    border-radius: 0px;
    padding: 36px 36px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    padding-bottom: 400px;
}


section#control-tower {
    padding-top: 300px;
}

/* ========== LAPTOP ART SECTION ========== */
.laptop-art-section {
    position: relative;
    background: transparent;
    z-index: 2; /* sits between two sections */
    height: 0; /* we’ll control overlap with negative margins */
/*    padding:0px;    */

}



    /* Image style */
    .laptop-art img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 1100px; /* desktop size */
        max-width: calc(100% - 60px);
        z-index: 2;
        /* visually overlap both sections equally */
        margin-top: -300px; /* pulls it up into Stocklean */
        margin-bottom: -300px; /* pushes into next section */
    }

/* Responsive: scale down + adjust overlap */
@media (max-width: 1199.98px) {
    .laptop-art {
        width: 900px;
        margin-top: -240px;
        margin-bottom: -240px;
    }
}

@media (max-width: 991.98px) {
    .laptop-art {
        width: 100%;
        margin-top: -180px;
        margin-bottom: -180px;
    }
}

@media (max-width: 767.98px) {
    /* On mobile, no overlap — image just sits normally between sections */
    .laptop-art {
        margin: 30px auto 5px;
        width: 100%;
    }

        .laptop-art img {
            border-radius: 10px;
           
        }
}


/*contorl tower css*/

.control-tower{
    padding-top:400px !important;
}


/*control tower*/

#control-tower-analytics{
    padding-top:400px !important;


}
.prod-cta-section  {
    padding-top: 360px !important;

}

.trukr-section.control-tower-analytics {
    position: relative;
    background: #f9fbff;
    background: #f7f7f7;
    padding-bottom: 220px;
    overflow: visible;
    /* background: url("../img/home-new/web-stocklean.png"); */
    background-image: url('../img/home-new/cta-web.webp'), url('../img/home-new/green-bg4.webp');
    background-size: contain;
    background-position: center 81%, bottom;
    color: #fff;
    background-repeat: no-repeat;
    border-radius: 0px;
    padding: 36px 36px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    padding-bottom: 400px;
}


.bdr-btm-blue.active::after {
    content: '';
    display: block;

    height: 2px;
    background: #1161DF;
    transition: width .3s;
}
.bdr-btm-blue {
    padding-left: 0px;
    padding-right: 0px;
}

/*overider css for mobile*/
/* ---- frame-less phone slider (overrides absolute rules) ---- */
.phone-mockup--frame-less {
    width: 320px; /* slider visual width on desktop — tweak as needed */
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    position: relative;
    max-height:630px;
}

    /* make the screen a normal responsive block (not absolutely positioned) */
    .phone-mockup--frame-less .phone-screen {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        /* use the aspect ratio of your exported phone-screen images; this keeps height responsive */
        aspect-ratio: 239 / 519; /* adjust if your images have different proportions */
        height: auto !important;
        border-radius: 20px; /* match frame corner radius in image if needed */
        overflow: hidden;
        background-size: cover;
        background-position: center;
        box-shadow: 0 14px 40px rgba(10,30,70,0.08); /* subtle lift */
    }
    .phone-mockup--frame-less .phone-screen {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        aspect-ratio: 239 / 519;
        height: auto !important;
        border-radius: 15px;
        overflow: hidden;
        background-size: contain;
        background-position: top;
         box-shadow: none; 
        background-repeat: no-repeat;
    }
    /* dots inside the slider — bottom center */
    .phone-mockup--frame-less .phone-dots {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
        display: flex;
        gap: 8px;
        z-index: 5;
    }

    .phone-mockup--frame-less .phone-dots {
        position: absolute;
        left: 33%;
        transform: translateX(-50%);
        bottom: 170px;
        display: flex;
        gap: 8px;
        z-index: 5;
    }
section#trukr-product {
    padding-bottom: 0px !important;
}
section#docksmart-product {
    padding-bottom: 0px;
}

        /* dot styles (keep the same as before or tweak) */
        .phone-mockup--frame-less .phone-dots button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.45);
            cursor: pointer;
        }

            .phone-mockup--frame-less .phone-dots button.active {
                background: #fff;
            }

/* responsive: smaller width on small screens */
@media (max-width: 991.98px) {
    .phone-mockup--frame-less {
        width: 260px;
    }

        .phone-mockup--frame-less .phone-screen {
            aspect-ratio: 239 / 519;
            border-radius: 14px;
        }
}


@media(max-width:992px) {
    .hero-icons-wrap {
        margin-top: 26px;
        overflow-x: scroll;
        padding-bottom: 23px;
    }

    .hero-icons, .hero-icon-labels {
        gap: 30px;
    }

    .feature-cards {
        padding-left: 0px !important;
    }

    .phone-mockup--frame-less {
        max-height: 500px !important;
        margin-top: 50px !important;
    }

    section#stocklean {
        padding-left: 0px;
        padding-right: 0px;
    }
    .phone-mockup--frame-less .phone-dots {
      
        bottom: 139px;
       
    }
    .bdr-btm-blue p {
        font-size: 14px !important;
    }



    section#control-tower {
        border-radius: 0px !important;
    }
/*
    #control-tower-analytics {
        padding-top: 160px !important;
    }*/

/*    #control-tower-analytics {
        padding-top: 160px !important;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 150px;
    }*/

    /*.prod-cta-section {
        padding-top: 100px !important;*/
        /* padding-bottom: 60px !important; */
    /*}*/
}
@media(min-width:992px) and (max-width:1025px) {
    .laptop-art img {
    
        left: 56%;
       
    }
 

}
    @media(max-width:767px) {
        .bdr-btm-blue p {
            font-size: 16px;
        }
        .hero-icons-wrap {
            margin-top: 26px;
            overflow-x: scroll;
            padding-bottom: 23px;
        }

        .hero-icons, .hero-icon-labels {
            gap: 30px;
        }

        .feature-cards {
            padding-left: 0px !important;
            padding-right:0px;
        }

        .phone-mockup--frame-less {
            max-height: 500px !important;
            margin-top: 50px !important;
            margin-left:45px;
        }

        section#stocklean {
            padding-left: 0px;
            padding-right: 0px;
        }

        section#stocklean {
            padding-bottom: 135px;
            border-radius: 0px;
        }

        .laptop-art img {
            margin-top: -115px !important;
            margin-bottom: -115px !important;
        }

        section#control-tower {
            border-radius: 0px !important;
        }

        #control-tower-analytics {
            padding-top: 160px !important;
        }

        #control-tower-analytics {
            padding-top: 160px !important;
            padding-left: 0px;
            padding-right: 0px;
            padding-bottom: 150px;
        }

        .prod-cta-section {
            padding-top: 100px !important;
            /* padding-bottom: 60px !important; */
        }
        .col-lg-3.bdr-btm-blue {
            text-align: center;
        }
        section#trukr-product {
            padding-top: 50px;
        }
        section#docksmart-product {
            padding-top: 50px;
        }

        .trukr-card {
           
            margin-left: -15px;
            margin-right: -15px;
        }
        .prod-cta-section img.img-fluid.mbtm-20.pad-25-xs.w__140.animated.fadeInUp.visible {
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
    }

    /*new css*/

    /* ====== PLATFORM ICONS ====== */

    /* Grid container */
    .hero-icons-wrap {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 28px 0px;
        margin-top: 60px;
        color: #fff;
    }

    /* Each icon+label pair */
    .hero-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* left align icon, line, and text */
    }

        /* Icon */
        .hero-item .icon {
            width: 48px;
            height: 48px;
            display: block;
        }

            .hero-item .icon img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
            }

        /* Divider line between icon and text */
        .hero-item .divider {
            width: 100%; /* same as icon width */
            height: 1px;
            background: white;
            margin-top: 6px; /* small gap from icon */
            margin-bottom: 6px; /* small gap before text */
        }

        /* Label text */
        .hero-item .label {
            text-align: left;
            line-height: 1.3;
            font-size: 14px;
            color: #fff;
        }

            .hero-item .label strong {
                display: block;
                font-weight: 600;
            }

            .hero-item .label small {
                display: block;
                font-size: 12.5px;
                font-weight: 400;
                opacity: 1;
                margin-top:5px;
            }

    /* ====== RESPONSIVE BEHAVIOR ====== */

    /* Tablet (3 per row) */
    @media (max-width: 991px) {
        .hero-icons-wrap {
            grid-template-columns: repeat(3, 1fr);
            gap: 30px 0px;
        }

        .hero-first .hero-bg {
            padding: 40px 20px 40px;
        }
        .docksmart-section {
           
            background-position: 50% 86%, bottom;
         
        }
        .trukr-section {
       
            background-position: 50% 86%, bottom;
        
        }
    }

    @media (max-width: 767px) {
        .trukr-card-inner {
            padding-right: 0px; /* avoid button touching edges */
        }
        .feature-body p br.feature-br {
            display: none;
        }
        .prod-cta-section {
         
            /* padding-bottom: 60px !important; */
            text-align: center;
        }
        .trukr-card-left h2 br.feature-br {
            display: none;
        }

       
        .bdr-btm-blue p {
            font-size: 12px !important;
            margin-bottom: 10px;
            text-align: left;
            margin-left: 10px;
        }
        .bdr-btm-blue.active::after  {
            margin-bottom: 10px;
        }

       
    }

    /* Mobile (2 per row) */
    @media (max-width: 575px) {
        .hero-icons-wrap {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 0px;
        }

        .hero-item .icon {
            width: 42px;
            height: 42px;
        }

        .hero-item .divider {
            width: 100%;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .hero-item .label {
            font-size: 13px;
        }

            .hero-item .label small {
                font-size: 11.5px;
            }
    }

    /* ====== Optional hover polish ====== */
    .hero-item:hover .icon img {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }

    .hero-item:hover .divider {
        /*background: #00baff;*/ /* accent color under hover */
        /*transition: background 0.3s ease;*/
    }

    @media (max-width:992px) {
        .hero-first h1 {
            font-size: 34px !important;
            line-height: 1.2;
            font-weight: 600;
            margin: 0px 0 18px;
            text-shadow: 0 6px 22px rgba(0,0,0,0.45);
            color: white;
        }

        .stocklean .trukr-card h2 {
            color: #fff;
            font-size: 22px;
            text-transform: uppercase;
            line-height: 1.2;
        }
        img.trukr-logo.stock-logo {
            max-width: 200px !important;
            margin-left: -10px !important;
        
        }
        img.trukr-logo.dock-logo {
            max-width: 200px !important;
            margin-left: -10px !important;
        }
        img.trukr-logo.dock-logo {
            max-width: 200px !important;
            margin-left: -10px !important;
        }
        .trukr-logo {
            max-width: 150px !important;
            
        }
    }

.trukr-section .trukr-card .demo-btn.btn, .trukr-section .trukr-card .demo-btn.btn:hover, .trukr-section .trukr-card .demo-btn.btn:focus, .trukr-section .trukr-card .demo-btn.btn:active {
    color: #1260df !important;
    background: #fff !important;
    text-transform: math-auto;
    border: none;
    font-size: 15px;
    padding-top: 16px;
    padding-bottom: 16px;
}

    .control-tower-analytics .trukr-card {
        background-image: url('../img/home-new/grad4.webp'), url('../img/home-new/control-tower-card.webp');
        /* background: linear-gradient(180deg, #0b2f5f, #16457d); */
        /* background-image: url('../img/home-new/stocklean-card.png'); */
        background-size: cover;
        background-position: center;
    }

        .control-tower-analytics .trukr-card .demo-btn.btn, .control-tower-analytics .trukr-card .demo-btn.btn:hover, .control-tower-analytics .trukr-card .demo-btn.btn:focus, .control-tower-analytics .trukr-card .demo-btn.btn:active {
            background: #fff !important;
            color: #007b3e !important;
            text-transform: math-auto;
            border:none;
        }

#stocklean.stocklean .trukr-card .demo-btn.btn, #stocklean.stocklean .trukr-card .demo-btn.btn:hover, #stocklean.stocklean .trukr-card .demo-btn.btn:focus, #stocklean.stocklean .trukr-card .demo-btn.btn:active {
    background: #fff !important;
    color: #ae2300 !important;
    text-transform: math-auto;
    border:none;
}

.docksmart-section .trukr-card .demo-btn.btn, .docksmart-section .trukr-card .demo-btn.btn:hover, .docksmart-section .trukr-card .demo-btn.btn:focus, .docksmart-section .trukr-card .demo-btn.btn:active {
    color: #4a007b !important;
    background: #fff !important;
    border: none;
    text-transform: math-auto;
}


#trukr-product.features-title {

    color: #1161df;
    margin-bottom:30px;
    
}
#docksmart-product .features-title {
    color: #4a007b;
    margin-bottom: 30px;
}



#stocklean .features-title {
    color: #ae2300;
    margin-bottom: 30px;
}

#control-tower-analytics .features-title{
    display:none;

}



.trukr-section .trukr-card .demo-btn.btn {
    color: #1260df;
}


/*.trukr-card .demo-btn.btn:hover, .trukr-card .demo-btn.btn:focus, .trukr-card button.btn:not(:disabled):not(.disabled):active, button.btn:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close):hover, .btn:not(.close):not(.mfp-close):focus, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]):hover, a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active {
    background-color:inherit;
    border-color:inherit;
    color: inherit;
  
}*/
.phone-mockup--frame-less .phone-dots {
    display: none !important;
  
}
.trukr-logo {

    margin-bottom: 30px;
}

img.trukr-logo.dock-logo {
    max-width: 230px;
    margin-left: -10px;
}
img.trukr-logo.dock-logo {
    max-width: 310px;
    margin-left: -10px;
}
img.trukr-logo.stock-logo {
    max-width: 275px;
    margin-left: -10px;
    margin-bottom: 30px;
}
img.trukr-logo.control-logo {
    max-width: 300px;
    margin-bottom:30px;
}

@media (min-width: 991.98px) {

    .docksmart-section .trukr-card {
    
        margin-bottom: 50px !important;
    }
    .docksmart-section .features-title,.features-title, .stocklean .features-title {
        margin-bottom: 30px !important;
    }
}

@media (min-width: 768px) {

   

    .docksmart-section .features-title, .features-title, .stocklean .features-title {
        margin-bottom: 20px !important;
    }
 .stocklean .features-title {
        margin-bottom: 30px !important;
      
    }
}
@media (min-width: 768px) and (max-width:991px){
    .stocklean .features-title {
        margin-bottom: 30px !important;
        margin-top: 20px !important;
    }
    .features-grid {
        
        grid-template-columns: repeat(2, 1fr) !important;
       
    }
}