:root {

    --logo_txt: #2866C2;

    --nav_txt_clr: #0A2540;

    --nav_txt_sz: clamp(0.875rem, 1vw + 0.5rem, 1rem);

    --nav_txt_wght: 500;

    --font-family: "Manrope", sans-serif;

    --nav_btn_bg: #2866C2;

    --btn_txt_clr: #fff;

    --btn_txt: clamp(1rem, 1vw + 0.7rem, 1.0rem);

    --bsc_btn_bg: #234982;

    --primrytitle_clr: #0A2540;

    --primrytitle_sz: 40px;

    --regular: 400;

    --bold: 600;

    --semi-bold: 500;

    --light: 300;

    --secndrytitle_clr: #7B8893;

    --secndrytitle_sz: clamp(1rem, 1vw + 0.7rem, 1.1rem);

    --innr_crdBg: #F2F8FF;

    --secondary_txtSz: clamp(1rem, 1vw + 0.7rem, 1.1rem);

    --contactBg: #EEF3F8;

    --contactLftbg: #678FD5;

    --banner_txt: 45px;

    --icon_crdbg: #ffff;



}



@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



body {

    font-family: var(--font-family);

}



.manrope {

    font-family: "Manrope", sans-serif;

    font-optical-sizing: auto;

    font-style: normal;

}



a {

    text-decoration: none;

}





/* =========================

            NAVBAR

        ========================= */



.pg_hdr {

    background: #fff;

    padding: 16px 0;

    position: relative;

    z-index: 999;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);



    .navbar-brand {

        font-size: calc(var(--nav_txt_sz) + 0.5vw);

        font-weight: 700;

        color: #2866C2;

        font-family: var(--font-family);



        &:hover {

            color: #0d1b2e;

        }

    }



    .navbar-nav {

        gap: 10px;

    }



    .nav-link {

        color: #0A2540CC;

        font-size: var(--nav_txt_sz);

        font-weight: 600;

        padding: 10px 16px !important;

        transition: 0.3s ease;

        position: relative;

        font-family: var(--font-family);



        &:hover {

            color: #2866C2;

        }

    }



    .nav_btn {

        background: #2866C2;

        padding: 8px 20px;

        border-radius: 8px;

        font-weight: 600;

        border: 0;

        transition: 0.3s ease;

        color: #fff;



        a{

            color: #ffff;

        }



        &:hover {

            background: #10284c;

            color: #fff;

            transform: translateY(-2px);

        }

    }



    /* =========================

        MEGA MENU

    ========================= */



    .mega_dropdown {

        position: static;



        &:hover {



            .mega_menu,

            .solution_mega_menu {

                opacity: 1;

                visibility: visible;

                transform: translateY(0);

            }

        }

    }



    .mega_menu,

    .solution_mega_menu {

        width: 90%;

        left: 0;

        right: 0;

        border: 0;

        top: 85px;

        border-radius: 0 0 20px 20px;

        padding: 40px 20px;

        margin: 0 auto;

        display: block;

        opacity: 0;

        visibility: hidden;

        transform: translateY(20px);

        transition: all 0.35s ease;

        background: #000;

        color: #fff;

    }



    



    .mega_menu_item {



        h4 {

            font-size: 18px;

            font-weight: 700;

            margin-bottom: 18px;

            color: #fff;

            font-family: var(--font-family);

        }



        ul {



            li {

                margin-bottom: 12px;



                a {

                    text-decoration: none;

                    color: #fff;

                    font-size: var(--nav_txt_sz);

                    transition: 0.3s ease;

                    display: inline-block;

                    font-family: var(--font-family);



                    &:hover {

                        color: #a9abad;

                    }

                }

            }

        }

    }



    /* RIGHT CONTENT */



    .mega_menu_info {



        h2 {

            font-size: 28px;

            font-weight: 700;

            margin-bottom: 15px;

            color: #fff;

            font-family: var(--font-family);

        }



        p {

            font-size: 19px;

            line-height: 1.7;

            color: #fff;

            margin-bottom: 20px;

            font-family: var(--font-family);

        }

    }



    /* =========================

        MOBILE

    ========================= */



    @media (max-width: 991px) {



        .mega_menu,

        .solution_mega_menu {

            opacity: 1 !important;

            visibility: visible !important;

            transform: none !important;

            display: none;

            position: relative !important;

            box-shadow: none;

            padding: 20px 10px;

            border-radius: 12px;

        }



        .dropdown-menu.show {

            display: block;

        }



        .mega_menu_info {

            margin-top: 20px;

        }



        .navbar-nav {

            padding-top: 20px;

        }



        .nav_btn {

            margin-top: 20px;

            width: 100%;

        }

    }

}



.bnr_btn {

    background-color: var(--nav_btn_bg) !important;

    color: var(--btn_txt_clr) !important;

    font-family: var(--font-family);

    font-size: var(--btn_txt);

    padding: 8px 20px;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 600;

    transition: all 0.3s ease-in-out;

    border: solid 1px var(--nav_btn_bg);



    &:hover {

        background-color: transparent !important;

        border: solid 1px var(--btn_txt_clr);

    }

}



.basic_btn {

    background-color: var(--bsc_btn_bg) !important;

    color: var(--btn_txt_clr) !important;

    font-family: var(--font-family);

    font-size: var(--btn_txt);

    padding: 8px 30px;

    border-radius: 6px;

    font-weight: 500;

    border: solid 1px var(--bsc_btn_bg);



}



.bnr_light_Btn {

    background-color: var(--btn_txt_clr) !important;

    color: var(--bsc_btn_bg) !important;

    font-family: var(--font-family);

    font-size: var(--btn_txt);

    padding: 8px 20px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    border: solid 1px var(--btn_txt_clr);

    transition: all 0.3s ease-in-out;





    &:hover {

        background-color: var(--nav_btn_bg) !important;

        color: var(--btn_txt_clr) !important;

        border: solid 1px var(--nav_btn_bg);

    }

}



.dvTitle {

    h2 {

        font-size: var(--primrytitle_sz);

        color: var(--primrytitle_clr);

        font-weight: var(--semi-bold);

        font-family: var(--font-family);

    }



    p {

        font-size: var(--secndrytitle_sz);

        color: var(--secndrytitle_clr);

        font-weight: var(--regular);

        font-family: var(--font-family);

        max-width: 843px;

    }





}



.contactUs {

    padding: 60px 0 80px 0;





    .contact_crd {

        background: var(--contactBg);

        border-radius: 12px;

        overflow: hidden;

        padding: 20px 20px 0 20px;

        height: 516px;

    }



    /* LEFT */

    .left_prt {

        background: var(--contactLftbg);

        padding: 40px 32px;

        height: 90%;

        color: #fff;

        position: relative;

        overflow: hidden;

        border-radius: 20px;

    }



    .left_prt h3 {

        font-size: 27px;

        font-weight: var(--bold);

        margin-bottom: 40px;

        font-family: var(--font-family);

    }



    .left_prt p {

        font-size: 19px;

        opacity: 0.9;

        line-height: 1.6;

        margin-bottom: 32px;

        font-weight: var(--light);

        font-family: var(--font-family);

        max-width: 300px;

    }



    .contact_info {

        display: flex;

        flex-direction: column;

        gap: 18px;

    }



    .contact_info_item {

        display: flex;

        align-items: center;

        gap: 10px;

        font-size: 20px;

        margin-bottom: 15px;

    }



    /* Decorative circle bottom-right */

    .circle_decor {

        position: absolute;

        bottom: -50px;

        right: -50px;

        width: 160px;

        height: 160px;

        border-radius: 50%;

        background: rgba(255, 255, 255, 0.12);

    }



    /* RIGHT */

    .right_prt {

        padding: 40px 36px;

    }



    .right_prt h4 {

        font-size: 25px;

        font-weight: 700;

        color: #234982;

        margin-bottom: 24px;

        font-family: var(--font-family);

    }



    .form_input {

        width: 100%;

        border: 1px solid #dde1ea;

        border-radius: 6px;

        padding: 11px 14px;

        font-size: 15px;

        color: #333;

        background: #f7f8fb;

        outline: none;

        transition: border-color 0.2s;

    }



    .form_input:focus {

        border-color: #5a7ac7;

        background: #fff;

    }



    textarea.form_input {

        resize: vertical;

        height: 70px;

    }



    .btn_contact {

        background: #234982;

        color: #fff;

        border: none;

        padding: 13px 32px;

        border-radius: 7px;

        font-size: 15px;

        font-weight: 600;

        cursor: pointer;

        transition: background 0.2s;

    }



    .btn_contact:hover {

        background: #243f7a;

    }

}



.pg_footer {

    background-image: url(../images/footer_bg.png);

    background-repeat: no-repeat;

    background-position: center;

    background-color: #3a3f47;

    /* fallback */

    color: #cbd5e1;



    h5,

    h6 {

        color: #fff;

        margin-bottom: 15px;

        font-size: 18px;

    }



    /* Orange accent for emergencies heading */

    .emergency-heading {

        color: #B1CBF8 !important;

        /* orange, match your brand accent */

    }



    p {

        font-size: 15px;

        line-height: 1.6;

        color: #fff;

    }



    /* Links */

    ul {

        li {

            margin-bottom: 3px;

            font-size: clamp(0.8125rem, 0.6vw + 0.65rem, 0.9375rem);

            color: #fff;

            cursor: pointer;



            a {

                color: #fff;

                text-decoration: none;

                font-size: clamp(0.8125rem, 0.6vw + 0.65rem, 0.9375rem);

                transition: 0.2s;





                &:hover {

                    color: #cbd5e1;

                }

            }

        }

    }



    /* LinkedIn social icon */

    .social-icon {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 34px;

        height: 34px;

        border: 1px solid #cbd5e1;

        border-radius: 6px;

        color: #cbd5e1;

        font-size: 16px;

        text-decoration: none;

        transition: 0.2s;



        &:hover {

            border-color: #fff;

            color: #fff;

        }

    }



    /* Contact items */

    .contact_item {

        align-items: flex-start;



        .icon {

            width: 36px;

            height: 36px;

            border: 1px solid #cbd5e1;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 15px;

            flex-shrink: 0;

        }



        p {

            font-size: clamp(0.8125rem, 0.6vw + 0.65rem, 0.9375rem);

        }

    }



    /* Copyright bar */

    .footer-bottom {

        border-top: 1px solid rgba(255, 255, 255, 0.1);

        padding: 16px 0;

        font-size: 13px;

        color: #94a3b8;



        a {

            color: #94a3b8;

            text-decoration: none;



            &:hover {

                color: #fff;

            }

        }

    }

}



.hero_section {

    padding: 0 15px;



    .hero_bg {

        background-repeat: no-repeat;

        padding: 300px 0;

        background-size: cover;

        background-position: bottom;

        border-radius: 16px;

        

        .hero_content {

            position: relative;

            z-index: 1;

            padding-left: 230px;



            h1 {

                font-size: 64px;

                font-weight: 500;

                color: #fff;

                line-height: 1.2;

                margin-bottom: 16px;

                font-family: var(--font-family);

            }



            p {

                font-size: 18px;

                color: #eceef1;

                margin-bottom: 28px;

                line-height: 1.6;

                font-family: var(--font-family);

                font-weight: 500;

            }



            .hero_btns {

                display: flex;

                gap: 12px;

                flex-wrap: wrap;



                .hero_btn_primary {

                    background: #2563eb;

                    border-color: #2563eb;

                    color: #fff;

                    padding: 8px 20px;

                    font-size: 14px;

                    border-radius: 6px;

                    font-family: var(--font-family);



                    &:hover {

                        background: #1d4ed8;

                        border-color: #1d4ed8;

                    }

                }



                .hero_btn_outline {

                    background: transparent;

                    border: 1px solid #fff;

                    color: #fff;

                    padding: 8px 20px;

                    font-size: 14px;

                    border-radius: 6px;

                    font-family: var(--font-family);



                    &:hover {

                        background: rgba(255, 255, 255, 0.15);

                        color: #fff;

                    }

                }

            }

        }

    }



    @media (max-width: 768px) {

        .hero_bg {

            height: 380px;

            border-radius: 10px;



            .hero_content {

                padding-left: 24px;



                h1 {

                    font-size: 28px;

                }



                p {

                    font-size: 13px;

                }

            }

        }

    }

}



.glbl_btn {

    background-color: var(--bsc_btn_bg);

    color: var(--btn_txt_clr);

    border-radius: 30px;

    font-size: var(--btn_txt);

    font-family: var(--font-family);

    padding: 8px 20px;

}



.transparent_btn {

    background-color: var(--icon_crdbg);

    border: solid 1px var(--bsc_btn_bg);

    color: var(--bsc_btn_bg);

    border-radius: 6px;

    font-size: var(--btn_txt);

    font-family: var(--font-family);

    padding: 8px 20px;

}



.icon_crd {

    background-color: var(--icon_crdbg);

    box-shadow: 0px 4px 10.6px 0px rgba(231, 237, 244, 0.80);

    border-radius: 15px;

    padding: 30px;

    display: inline-block;

    margin-bottom: 25px;



    img {

        width: 30px;

        height: 28px;

    }

}



.innr_crd {

    background-color: var(--innr_crdBg);

    padding: 25px 30px;

    border-radius: 20px;

    margin-bottom: 25px;

    min-height: 340px;

    position: relative;

    overflow: hidden;

    cursor: pointer;



    transition:

        transform 0.35s ease,

        box-shadow 0.35s ease,

        background-color 0.35s ease;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);



    h6 {

        color: var(--primrytitle_clr);

        font-weight: var(--bold);

        font-size: 19px;

        font-family: var(--font-family);

        transition: color 0.3s ease;

    }



    p {

        color: var(--secndrytitle_clr);

        font-weight: var(--regular);

        font-size: var(--btn_txt);

        font-family: var(--font-family);

        transition: color 0.3s ease;

    }



    /* top glow effect */

    &::before {

        content: "";

        position: absolute;

        top: -120px;

        right: -120px;

        width: 220px;

        height: 220px;

        background: rgba(255, 255, 255, 0.08);

        border-radius: 50%;

        transition: all 0.5s ease;

    }



    &:hover {

        transform: translateY(-10px);

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);

        background-color: #ffffff;



        &::before {

            top: -80px;

            right: -80px;

            transform: scale(1.2);

        }



        h6 {

            color: #0d6efd;

        }



        p {

            color: #555;

        }

    }

}



.product_heroBnr {



    .hero_bg {

        height: 530px;

    }



    .hero_content {

        max-width: fit-content !important;

        padding-left: 262px !important;



        h2 {

            font-size: var(--banner_txt);

            color: var(--btn_txt_clr);

            font-family: var(--font-family);



        }



        .breadcrumb-item a {

            color: var(--btn_txt_clr);

            font-size: 15px;

        }



        .breadcrumb-item.active a {

            color: #9FD7FF !important;

            pointer-events: none;

            cursor: default;

        }

    }



}



.blogs {

    .cargo-card {

        border: 1px solid #e8ecef;

        border-radius: 16px;

        overflow: hidden;

        box-shadow: none;

        min-height: 303px;

    }



    .cargo-card img {

        height: 180px;

        object-fit: cover;

        border-radius: 0;

        /* image fills card top edge */

    }



    .meta {

        display: flex;

        justify-content: space-between;

        align-items: center;

        font-size: 12px;

        color: #85929D;

        margin-bottom: 16px;

    }



    .badge {

        background: transparent !important;

        border: 1px solid #A3B0BB;

        padding: 3px 10px;

        border-radius: 20px;

        font-size: 11px;

        color: #85929D;

        font-weight: 500;

    }



    .card-title {

        color: #0A2540;

        font-weight: 500;

        font-size: 15px;

        margin: 0;

    }



    /* Navigation arrows */

    .swiper-button-next,

    .swiper-button-prev {

        width: 32px;

        height: 32px;

        background: #5a7dbf;

        border-radius: 50%;

        color: #fff;

        top: 40%;

        /* align to image area, not full card */

        transform: translateY(-50%);

    }



    .swiper-button-next::after,

    .swiper-button-prev::after {

        font-size: 10px;

    }

}



.left-domain {

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    display: flex;

    align-items: stretch;

    height: 400px;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

    transition: box-shadow 0.3s ease, transform 0.3s ease;



    &:hover {

        box-shadow: 0 12px 36px rgba(27, 58, 107, 0.15);

        transform: translateY(-3px);



        .domain-img {

            transform: scale(1.04);

        }



        .domain-content {

            h5 {

                color: #1b3a6b;

            }



            .btn-read {

                background: #14305a;

                transform: translateY(-1px);

                box-shadow: 0 4px 14px rgba(27, 58, 107, 0.4);



                &::after {

                    transform: translateX(0);

                }



                .arrows {

                    transform: translateX(3px);

                }

            }

        }

    }



    .domain-img {

        width: 48%;

        object-fit: cover;

        flex-shrink: 0;

        border-radius: 16px;

        transition: transform 0.5s ease;

    }



    .domain-content {

        padding: 1.6rem 1.6rem 1.6rem 1.4rem;

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 0.55rem;



        h5 {

            font-size: 18px;

            font-weight: 600;

            color: var(--primrytitle_clr);

            line-height: 1.7;

            margin: 0;

            transition: color 0.2s ease;

            font-family: var(--font-family);

        }



        p {

            font-size: 19px;

            color: var(--secndrytitle_clr);

            line-height: 1.55;

            margin: 0;

            font-family: var(--font-family);

            font-weight: 400;

        }



        .btn-read {

            display: inline-flex;

            align-items: center;

            gap: 0.4rem;

            background: #1b3a6b;

            color: #fff;

            font-size: 0.8rem;

            font-weight: 600;

            padding: 0.45rem 1.1rem;

            border-radius: 8px;

            border: none;

            width: fit-content;

            text-decoration: none;

            transition: background 0.25s ease,

                transform 0.25s ease,

                box-shadow 0.25s ease;

            position: relative;

            overflow: hidden;



            &::after {

                content: '';

                position: absolute;

                inset: 0;

                background: rgba(255, 255, 255, 0.12);

                transform: translateX(-100%);

                transition: transform 0.3s ease;

            }



            .arrows {

                font-size: 0.9rem;

                letter-spacing: -2px;

                transition: transform 0.25s ease;

            }

        }

    }

}



.right-cards-wrapper {

    display: flex;

    gap: 16px;

    height: 500px;



    .small-card {

        position: relative;

        flex: 1;

        min-width: 150px;

        height: 400px;

        border-radius: 20px;

        overflow: hidden;

        cursor: pointer;

        transition: all 0.45s ease;

        display: flex;



        &:hover {

            flex: 5;



            .card-img {

                transform: scale(1.06);

            }



            .overlay-text {

                opacity: 1;

                bottom: 155px;



                p,

                .btn-read {

                    opacity: 1;

                    transform: translateY(0);

                    font-family: var(--font-family);
					margin-bottom: 4px;

                }

            }



            &::after {

                background: linear-gradient(to top,

                        rgba(0, 0, 0, 0.85),

                        rgba(0, 0, 0, 0.3));

            }

        }



        .card-img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            transition: transform 0.5s ease;

        }



        &::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(to top,

                    rgba(0, 0, 0, 0.75),

                    rgba(0, 0, 0, 0.15));

            z-index: 1;

            transition: 0.4s ease;

        }



        .overlay-text {

            position: absolute;

            left: 20px;

            bottom: 20px;

            right: 20px;

            z-index: 2;

            color: #fff;

            height: 100px;



            h5 {

                font-size: 21px;

                font-weight: 700;

                margin-bottom: 10px;

                font-family: var(--font-family);

            }



            p {

                font-size: 15px;

                line-height: 1.6;

                opacity: 0;

                transform: translateY(15px);

                transition: 0.35s ease;

                margin-bottom: 16px;

                font-family: var(--font-family);

            }



            .btn-read {

                display: inline-block;

                padding: 10px 18px;

                background: #1b3a6b;

                color: #fff;

                border-radius: 8px;

                text-decoration: none;

                font-family: var(--font-family);

                opacity: 0;

                transform: translateY(15px);

                transition: 0.35s ease;

            }

        }



        .card-arrow {

            position: absolute;

            top: 15px;

            right: 15px;

            z-index: 3;



            width: 34px;

            height: 34px;

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.25);



            display: flex;

            align-items: center;

            justify-content: center;



            color: #fff;

            backdrop-filter: blur(4px);

        }

    }

}



.home_operation {



  /* ── Wrapper ── */

  .domain-wrapper {

    display: flex;

    gap: 14px;

    align-items: stretch;

    height: 380px;

  }



  /* ── Each Card ── */

  .domain-card {

    position: relative;

    border-radius: 18px;

    overflow: hidden;

    cursor: pointer;

    flex: 1;

    min-width: 0;

    transition:

      flex 0.55s cubic-bezier(0.4, 0, 0.2, 1),

      box-shadow 0.4s ease;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);



    /* ════════════════════════════

       HOVER / EXPANDED STATE

    ════════════════════════════ */

    &:hover {

      flex: 4.5;

      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);

      background: #ffffff;



      .card-img {

        position: absolute;

        top: 0;

        left: 0;

        width: 45%;

        height: 100%;

        border-radius: 14px;

      }



      .card-overlay {

        opacity: 0;

      }



      .card-arrow {

        opacity: 0;

      }



      .card-collapsed-title {

        opacity: 0;

      }



      .card-expanded-content {

        opacity: 1;

        pointer-events: auto;

      }

    }



    /* ── COLLAPSED: image fills full card ── */

    .card-img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      display: block;

      transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1);

    }



    /* ── Dark gradient overlay ── */

    .card-overlay {

      position: absolute;

      inset: 0;

      background: linear-gradient(

        to top,

        rgba(8, 20, 55, 0.92) 0%,

        rgba(8, 20, 55, 0.45) 55%,

        rgba(8, 20, 55, 0.1) 100%

      );

      z-index: 1;

      transition: opacity 0.45s ease;

    }



    /* ── Arrow badge top-right ── */

    .card-arrow {

      position: absolute;

      top: 14px;

      right: 14px;

      width: 34px;

      height: 34px;

      background: rgba(255, 255, 255, 0.18);

      border: 1px solid rgba(255, 255, 255, 0.3);

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      color: #fff;

      font-size: 15px;

      z-index: 3;

      backdrop-filter: blur(6px);

      -webkit-backdrop-filter: blur(6px);

      transition: opacity 0.3s ease;

    }



    /* ── Collapsed title at bottom ── */

    .card-collapsed-title {

      position: absolute;

      bottom: 0;

      left: 0;

      right: 0;

      z-index: 2;

      padding: 20px;

      color: #fff;

      font-size: 1rem;

      font-weight: 700;

      line-height: 1.35;

      transition: opacity 0.3s ease;

    }



    /* ── Right-side content panel ── */

    .card-expanded-content {

      position: absolute;

      top: 0;

      left: 45%;

      right: 0;

      bottom: 0;

      display: flex;

      flex-direction: column;

      justify-content: center;

      padding: 28px 28px 28px 26px;

      background: #ffffff;

      opacity: 0;

      pointer-events: none;

      transition: opacity 0.35s ease 0.2s;

      z-index: 4;



      h5 {

        font-size: 1.15rem;

        font-weight: 700;

        color: #0d1f4e;

        line-height: 1.35;

        margin-bottom: 12px;

      }



      p {

        font-size: 0.85rem;

        color: #6b7a99;

        line-height: 1.6;

        margin-bottom: 22px;

      }



      /* ── Read More button ── */

      .btn-read {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 10px 22px;

        background: #0d2060;

        color: #ffffff;

        border-radius: 8px;

        font-size: 0.82rem;

        font-weight: 600;

        text-decoration: none;

        letter-spacing: 0.03em;

        width: fit-content;

        transition:

          background 0.25s ease,

          transform 0.2s ease;



        &:hover {

          background: #1a3a8f;

          transform: translateX(2px);

        }



        .arrows {

          font-size: 1rem;

          letter-spacing: -2px;

        }

      }

    }

  }



  /* ── Responsive (mobile) ── */

  @media (max-width: 700px) {



    .domain-wrapper {

      flex-direction: column;

      height: auto;

    }



    .domain-card {

      flex: none !important;

      height: 200px;

      width: 100%;



      &:hover {

        flex: none !important;

        height: 300px;



        .card-img {

          width: 100%;

          height: 45%;

          top: 0;

          left: 0;

          border-radius: 14px 14px 0 0;

        }

      }



      .card-expanded-content {

        top: 45%;

        left: 0;

        padding: 16px;

      }

    }

  }

}



/* home page css start*/

.whoWEr {

    padding: 90px 0;



    h2 {

        font-size: var(--primrytitle_sz);

        color: var(--primrytitle_clr);

        font-weight: 500;

        font-family: var(--font-family);

        margin-bottom: 25px;

    }



    p {

        color: var(--secndrytitle_clr);

        font-family: var(--font-family);

        max-width: 500px;

        line-height: 25px;

        font-size: var(--secndrytitle_sz);

        margin-bottom: 20px;

        font-weight: var(--regular);

    }



    h6 {

        color: var(--primrytitle_clr);

        font-size: var(--secondary_txtSz);

        font-family: var(--font-family);

        margin-bottom: 20px;

    }



}



.operation_domains {

    padding: 70px 0 90px 0;

    background-color: #F8F9FA;



    .dvTitle {

        h6 {

            display: inline-block;

            background: #fff;

            padding: 6px 25px;

            border-radius: 30px;

            font-size: 13px;

            margin-bottom: 15px;

            color: var(--primrytitle_clr);

            font-weight: var(--bold);

            font-family: var(--font-family);

        }



        h2 {

            margin-bottom: 10px;

        }



        p {

            color: #6c757d;

            max-width: 500px;

        }

    }



    

}



.trusted_clients_section {

    background: #fff;

    padding: 50px 0 50px;



    .trusted_title {

        font-size: 26px;

        font-weight: 500;

        color: #1a1a2e;

        margin-bottom: 15px;

        letter-spacing: 0.2px;

        font-family: var(--font-family);

    }



    .logo_row {

        margin-bottom: 10px;

        align-items: center;

    }



    .logo_col {

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 16px 24px;

    }



    .client_logo {

        max-width: 120px;

        width: 100%;

        height: auto;

        filter: grayscale(100%) opacity(0.45);

        transition: filter 0.3s ease;



        &:hover {

            filter: grayscale(0%) opacity(1);

        }

    }



    @media (max-width: 768px) {

        .trusted_title {

            font-size: 20px;

        }



        .logo_col {

            padding: 12px 16px;

        }



        .client_logo {

            max-width: 90px;

        }

    }

}

/* Home page css end */



/* About us page css start */

:root {

    --blue-dark: #1a3c6e;

    --blue-mid: #2563b0;

    --blue-light: #3b7dd8;

    --accent: #f59e0b;

    --text-dark: #1e293b;

    --text-gray: #64748b;

    --bg-light: #f8fafc;

    --border: #e2e8f0;

}



/* ── ABOUT SECTION ── */

.about-section {

    padding: 70px 0 60px;

    background: #fff;

}



.dvTitle {

    h6 {

        border: solid 1px #E5E8EB;

        display: inline-block;

        border-radius: 30px;

        padding: 5px 25px;

        color: var(--primrytitle_clr);

        font-weight: var(--bold);

        font-size: var(--btn_txt);

        font-family: var(--font-family);

        margin-bottom: 18px;

    }

}



/* tab pills */

/* tab pills */

.about-tabs {



    margin-top: 30px;



    .nav-pills {

        gap: 8px;

        margin-bottom: 28px;

    }



    .nav-link {

        border: 1.5px solid var(--nav_btn_bg);

        color: var(--nav_btn_bg);

        font-size: 17px;

        font-weight: 600;

        padding: 10px 30px;

        transition: all .2s;

        border-radius: 30px;

        font-weight: var(--semi-bold);



        &.active,

        &:hover {

            background: var(--nav_btn_bg);

            color: #fff;

        }

    }



    #aboutTabContent {

        p {

            margin-bottom: 10px;

            font-size: 18px;

            color: #7B8893;

        }

    }

}



.cdm_txt {

    color: var(--primrytitle_clr);

    font-size: 18px;

    font-weight: var(--regular);

    font-family: var(--font-family);



}



.btn-contact {

    background: var(--blue-dark);

    color: #fff;

    border-radius: 4px;

    padding: 10px 26px;

    font-weight: 600;

    font-size: 20px;

    display: inline-block;

    margin-top: 22px;

    transition: background .2s;

    text-decoration: none;



    &:hover {

        background: var(--blue-mid);

        color: #fff;

    }

}



/* image grid */

.about-images {

    position: relative;



    .img-main {

        width: 100%;

        height: 230px;

        object-fit: cover;

        border-radius: 6px;

    }



    .img-secondary {

        width: 100%;

        height: 150px;

        object-fit: cover;

        border-radius: 6px;

    }



    .experience-badge {

        position: absolute;

        top: 12px;

        left: 12px;

        background: var(--blue-light);

        color: #fff;

        font-size: .72rem;

        font-weight: 700;

        padding: 6px 12px;

        border-radius: 4px;

        letter-spacing: .5px;

    }

}



/* ── JOURNEY SECTION ── */

.journey-section {

    padding: 60px 0 80px;

}



.tl-wrap {

    padding: 3rem 2rem;

    overflow-x: auto;



    /* ── Main grid: 5 columns, 5 rows ── */

    .tl-grid {

        display: grid;

        grid-template-columns: repeat(5, 1fr);

        grid-template-rows: auto 70px 16px 70px auto;

        min-width: 640px;



        /* ── Labels ── */

        .tl-label {

            text-align: center;

            padding: 0 10px;



            h5 {

                font-size: 18px;

                font-weight: 500;

                color: #404040;

                margin: 0 0 6px;

                line-height: 1.4;

                font-family: var(--font-family);

            }



            p {

                font-size: 14px;

                color: #7B8893;

                line-height: 1.6;

                margin: 0;

                font-family: var(--font-family);

                font-weight: 400;

            }

        }



        /* ── Row assignments ── */

        .above {

            grid-row: 1;

            align-self: end;

            padding-bottom: 0;

        }



        .stem-row-top {

            grid-row: 2;

        }



        .stem-row-bot {

            grid-row: 4;

        }



        .below {

            grid-row: 5;

            align-self: start;

            padding-top: 0;

        }



        /* ── Column assignments ── */

        .col1 {

            grid-column: 1;

        }



        .col2 {

            grid-column: 2;

        }



        .col3 {

            grid-column: 3;

        }



        .col4 {

            grid-column: 4;

        }



        .col5 {

            grid-column: 5;

        }



        /* ── Stems ── */

        .stem-top {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: flex-end;

        }



        .stem-bot {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: flex-start;

        }



        .stem-line {

            width: 2px;

            background: #5784C7;

            flex: 1;

        }



        .stem-dot {

            width: 10px;

            height: 10px;

            border-radius: 50%;

            background: #5784C7;

            flex-shrink: 0;

        }



        /* ── Row 3: horizontal rule + pills ── */

        .tl-hline {

            grid-row: 3;

            grid-column: 1 / -1;



            align-self: center;



            height: 2px;



            background: #d5dde8;



            z-index: 0;

        }



        .tl-pill-cell {

            grid-row: 3;



            display: flex;

            align-items: center;

            justify-content: center;



            z-index: 1;



            .tl-pill {

                width: 44px;

                height: 16px;

                border-radius: 8px;

                background: #5784C7;

            }

        }

    }

}



.blogs{

    padding: 40px 0;

}



/* ── VIDEO / SERVICE SECTION ── */

.service-section {

    overflow: hidden;

    background: #5e88d1;



    .col-lg-6:first-child {

        position: relative;

        border-radius: 0;

        display: inline-flex;

        justify-content: end;

        /*align-items: anchor-center;*/



        .service-bg-image {

            width: 100%;

            height: 90%;

            object-fit: cover;

            position: absolute;

            inset: 0;

            border-radius: 0px 15px 15px 15px;

        }



        .overlay-panel {

            position: relative;

            z-index: 2;

            display: none !important;

            /*min-height: 779px;*/

            /*margin-top: -179px;*/

            background: linear-gradient(90deg,

                    rgba(17, 48, 98, 0.15) 0%,

                    rgba(17, 48, 98, 0.20) 55%,

                    rgba(17, 48, 98, 0.65) 100%);



            .video-play-btn {

                width: 74px;

                height: 74px;

                border-radius: 50%;

                border: 2px solid #234982;

                display: flex;

                align-items: center;

                justify-content: center;

                background-color: #234982;

                color: #fff;

                padding: 26px 18px;

                text-align: center;

                font-size: 18px;

                line-height: 1.5;

                font-weight: 500;

                backdrop-filter: blur(3px);

                margin-top: 110px;



                i {

                    font-size: 24px;

                }

            }



            .we-are-badge {

                color: #fff;

                text-align: center;

                font-size: 18px;

                font-weight: 500;

                font-family: var(--font-family);

                line-height: 1.5;

                font-weight: 700;



            }

        }

    }



    .why-choose-panel {

        background: #5E88D1;

        padding: 70px 70px;

        color: #fff;

        position: relative;



        .why-label {

            display: inline-block;

            background: #fff;

            color: #0A2540;

            padding: 8px 18px;

            border-radius: 40px;

            font-size: 20px;

            text-transform: uppercase;

            font-weight: 700;

            letter-spacing: 1px;

            margin-bottom: 24px;

            width: fit-content;

            font-family: var(--font-family);

        }



        h2 {

            font-size: 40px;

            line-height: 1.1;

            font-weight: 500;

            margin-bottom: 30px;

            color: #fff;

            font-family: var(--font-family);

        }



        .desc {

            font-size: 15px;

            line-height: 1.9;

            color: rgba(255, 255, 255, 0.85);

            max-width: 90%;

            margin-bottom: 55px;

            font-family: var(--font-family);

            font-weight: 400;

        }



        .feature-item {

            display: flex;

            align-items: flex-start;

            gap: 28px;

            margin-bottom: 45px;



            .feature-icon {

                min-width: 82px;

                width: 82px;

                height: 82px;

                border-radius: 50%;

                background: #fff;

                display: flex;

                align-items: center;

                justify-content: center;

                color: #204786;

                font-size: 34px;

            }



            .feature-text {

                h6 {

                    font-size: 20px;

                    font-weight: 700;

                    margin-bottom: 12px;

                    color: #fff;

                    font-family: var(--font-family);

                }



                p {

                    font-size: 15px;

                    line-height: 1.8;

                    color: rgba(255, 255, 255, 0.82);

                    margin: 0;

                    font-family: var(--font-family);

                }

            }

        }

    }

}



/* Responsive */

@media (max-width: 991px) {



    .why-choose-panel {

        padding: 50px 30px;

    }



    .why-choose-panel h2 {

        font-size: 42px;

    }



    .feature-text h6 {

        font-size: 22px;

    }



    .feature-icon {

        width: 64px;

        height: 64px;

        min-width: 64px;

        font-size: 26px;

    }



    .desc,

    .feature-text p {

        font-size: 16px;

    }



    .we-are-badge {

        width: 140px;

        font-size: 16px;

    }

}



/* ── RESPONSIVE FIXES ── */

@media (max-width: 991px) {

    .about-section {

        padding: 50px 0;

    }



    .about-section h2 {

        font-size: 1.7rem;

    }



    .timeline-item h5 {

        font-size: .8rem;

    }

}



@media (max-width: 767px) {

    .timeline-row {

        flex-direction: column;

        gap: 24px;

    }



    .timeline-connector {

        display: none;

    }



    .timeline-item {

        text-align: left;

        padding: 0;

    }



    .service-section {

        min-height: auto;

    }



    .why-choose-panel {

        padding: 36px 24px;

    }



    .navbar-top {

        display: none;

    }

}



/* placeholder images via picsum */

.ph {

    background: #dde6f5;

    border-radius: 6px;

}

/* About us page css end */



/* Product page css start */

.cdm, .cclp, .QMS {

    padding: 90px 0;

    .dvTitle{

        h2{

            font-size: 50px;

            font-weight: 600;

            line-height: 59px;

        }

        p{

            max-width: 843px;

            width: 100%;

            font-size: 16px;

            font-weight: 400;

            line-height: 29px;

        }

    }

    .innr_crd{

        .icon_crd{

            max-width: 103px;

            width: 100%;

            min-height: 103PX;

            height: 100%;

            background-color: #fff;

                display: flex;

                align-items: center;

                justify-content: center;

                border-radius: 6px;

                margin-bottom: 28px;

        }

        h6{

            font-size: 20px;

            line-height: 26px;

            color: #0A2540;

            margin-bottom: 16px;

        }

        p{

            color: #7B8893;

            font-size: 16px;

            line-height: 29px;

            font-weight: 400;

            max-width: 371px;

            width: 100%;

            margin-bottom: 22px;

        }

    }

    a {

        text-decoration: none;

        color: #fff;

    }



}



.cclp {

    background-color: #F8F9FA;

    padding: 90px 0;

    .innr_crd{

        .icon_crd{

            background-color: #F2F8FF;

        }

    }



    a {

        text-decoration: none;

        color: #fff;

    }



    .innr_crd {

        background-color: #fff;

    }



    .icon_crd {

        background-color: #F2F8FF;

    }

}



.QMS {

    padding: 90px 0;



    a {

        text-decoration: none;

        color: #fff;

    }

}



.abt_module {

    padding: 50px 0 5px;

    .dvTitle{

        h6{

            max-width: 188px;

            width: 100%;

            padding: 9px 0;

            text-align: center;

            border: 1px solid #E5E8EB;

            margin: 0 auto 22px;

            border-radius: 30px;

            font-size: 20px;

            font-weight: 500;

            color: #0A2540;

        }

        h2{

            font-size: 42px;

            font-weight: 600;

            color: #0A2540;

            margin-bottom: 21px;

        }

        p{

            max-width: 1164px;

            width: 100%;

            font-size: 18px;

            line-height: 29px;

            font-weight: 500;

            color: #68717a;

        }



    }



    p {

        margin: 0 auto;

        max-width: 890px;

        color: #0A2540CC;

    }



    /* h6 {

        border: 1px solid rgba(229, 232, 235, 1);

        display: inline-block;

        background: #fff;

        padding: 6px 16px;

        border-radius: 30px;

        font-size: 14px;

        margin-bottom: 15px;

        font-family: var(--font-family);

        font-weight: var(--bold);

        color: #0A2540;

    }



    h2{

        margin-bottom: 20px;

    } */

}



.prodct_solution {

    background-color: #F8F9FA;

    padding: 97px 0 50px;

    .dvTitle{

        max-width: 631px;

        width: 100%;

        h2{

            font-size: 41px;

            font-weight: 600;

            color: #0A2540;

        }

        p{

            color: #3A4F65;

            font-size: 16px;

            line-height: 26px;

            font-weight: 400;

        }

    }



    .glbl_btn {

        border-radius: 6px;

        padding: 14px 0;

        margin-top: 30px;

        max-width: 200px;

        width: 100%;

        display: inline-block;



        a {

            color: #fff;

            text-decoration: none;



        }

    }



    p{

        color: #0A2540CC;

    }



    h2{

        margin-bottom: 25px;

    }

}

/* Product Page css end */



/* Solution page css start */

.uldCre_bg {

    padding: 50px 0 150px 0;



    h2 {

        font-size: var(--primrytitle_sz);

        color: var(--primrytitle_clr);

        font-weight: var(--semi-bold);

        font-family: var(--font-family);

    }



    p {

        font-size: var(--secndrytitle_sz);

        color: var(--secndrytitle_clr);

        font-weight: var(--regular);

        font-family: var(--font-family);

        max-width: 500px;

    }

}



.uld_dashboard {

    padding: 90px 0;

    background: #f8f9fb;

    overflow: hidden;



    .dvTitle {



        h2 {

            font-size: 38px;

            line-height: 1.15;

            font-weight: 500;

            color: var(--primrytitle_clr);

            margin-bottom: 24px;

        }



    }



    /* LEFT LIST */

    .feature-list {

        padding: 0;

        margin: 0;

        list-style: none;



        li {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 18px;



            font-size: 17px;

            font-weight: 500;

            color: #0d1b3d;



            i {

                color: #20c36a;

                font-size: 20px;

            }

        }

    }



    /* CENTER IMAGE */

    .dashboard_img {

        text-align: center;



        .dashboard-image {

            max-width: 100%;

            width: 700px;

            transition: all 0.4s ease;



            &:hover {

                transform: translateY(-8px) scale(1.02);

            }

        }

    }



    /* RIGHT FEATURES */

    .right-features {

        position: relative;

        padding-left: 60px;



        /* curved connector line */

        &::before {

            content: "";

            position: absolute;

            left: 22px;

            top: 40px;

            width: 120px;

            height: 78%;

            border-left: 1px dashed #d6d6d6;

            border-top-left-radius: 120px;

            border-bottom-left-radius: 120px;

        }



        .feature-box {

            display: flex;

            align-items: flex-start;

            gap: 18px;

            margin-bottom: 32px;

            position: relative;

            z-index: 2;



            transition: all 0.3s ease;



            &:hover {

                transform: translateX(10px);

            }



            .icon-box {

                width: 62px;

                height: 62px;

                min-width: 62px;



                background: #5f8ff7;

                border-radius: 14px;



                display: flex;

                align-items: center;

                justify-content: center;



                box-shadow: 0 10px 25px rgba(95, 143, 247, 0.25);



                img {

                    width: 28px;

                }

            }



            .feature-content {



                h5 {

                    font-size: 20px;

                    font-weight: 700;

                    color: #102347;

                    margin-bottom: 8px;

                }



                p {

                    font-size: 18px;

                    line-height: 1.7;

                    color: #7d8597;

                    margin: 0;

                }

            }

        }

    }

    

    



    /* RESPONSIVE */

    @media (max-width: 991px) {



        text-align: center;



        .feature-list {



            li {

                justify-content: center;

            }

        }



        .right-features {

            padding-left: 0;



            &::before {

                display: none;

            }



            .feature-box {

                justify-content: center;

                text-align: left;

            }

        }



        .dashboard_img {

            margin: 30px 0;

        }

    }

}



.feature-wrapper {

        background: #fff;

        border-radius: 12px;

        overflow: hidden;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        border: 1px solid #ececec;

        margin: -75px 30px;

        position: absolute;

    

        .feature-item {

            padding: 20px 24px;

            height: 100%;

            position: relative;

    

            &::after {

                content: "";

                position: absolute;

                top: 20px;

                right: 0;

                width: 1px;

                height: 60%;

                background: #e7e7e7;

            }

    

            &.last {

                &::after {

                    display: none;

                }

            }

        }

    

        .icon-box {

            width: 46px;

            height: 46px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 18px;

            color: #fff;

            flex-shrink: 0;

        }

    

        .bg-blue {

            background: #dce9ff;

            color: #5f8ff7;

        }

    

        .bg-green {

            background: #d8f4e7;

            color: #4dbb89;

        }

    

        .bg-purple {

            background: #eadfff;

            color: #9a71f7;

        }

    

        .bg-orange {

            background: #ffe7d7;

            color: #f3a05d;

        }

    

        .feature-title {

            font-size: 20px;

            font-weight: 700;

            color: #1f2d3d;

            margin-bottom: 6px;

        }

    

        .feature-subtitle {

            font-size: 15px;

            font-weight: 600;

            color: #2b2b2b;

            margin-bottom: 4px;

        }

    

        .feature-text {

            font-size: 14px;

            color: #8a8a8a;

            line-height: 1.5;

            margin-bottom: 0;

        }

    

        @media (max-width: 767px) {

    

            .feature-item {

                border-bottom: 1px solid #ececec;

    

                &::after {

                    display: none;

                }

    

                &.last {

                    border-bottom: none;

                }

            }

        }

    }



.hero-section {

    padding: 60px 0;

    overflow: hidden;

    background-color: #F8F9FA;









    .dashboard-image {

        width: 100%;

        max-width: 650px;

        display: block;

        margin: auto;

    }



    .right-features {

        position: relative;

        padding-left: 70px;



        .feature-box {

            display: flex;

            gap: 16px;

            margin-bottom: 28px;

            position: relative;

            z-index: 2;



            .icon-box {

                min-width: 70px;

                height: 70px;

                background: #5c84df;

                border-radius: 18px;

                display: flex;

                align-items: center;

                justify-content: center;



                i {

                    color: #fff;

                    font-size: 28px;

                }

            }



            .feature-content {

                h5 {

                    font-size: 20px;

                    font-weight: 700;

                    margin-bottom: 6px;

                    color: #0b2341;

                }



                p {

                    margin: 0;

                    color: #8b97a8;

                    line-height: 1.6;

                    font-size: 15px;

                }

            }

        }

    }

}



.feature-list {

    list-style: none;

    padding: 0;

    margin: 0;



    li {

        display: flex;

        align-items: center;

        gap: 12px;

        margin-bottom: 10px;

        color: var(--primrytitle_clr);

        font-weight: 400;

        font-family: var(--font-family);

        font-size: 17px;

    }



    i {

        color: #11b36b;

        font-size: 18px;

    }

}



.uld_smarter {

    padding: 50px 0;



    .dvTitle {

        h2 {

            font-size: 47px;

            font-family: var(--font-family);

            font-weight: 500;

        }



        h4 {

            font-size: 38px;

            color: var(--primrytitle_clr);

            font-weight: var(--semi-bold);

            font-family: var(--font-family);

            margin-bottom: 15px;

        }

    }



    .innr_crd {

        img {

            width: 50px;

            height: 50px;

        }



        h6 {

            margin-bottom: 15px !important;

        }



        min-height: 270px;



    }



    .benefits_content {

        margin-top: -200px;

        padding: 0 50px;



        h4 {

            font-size: 30px;

            font-family: var(--font-family);

            color: var(--btn_txt_clr);

            font-weight: 500;

        }



        p {

            font-size: 17px;

            font-family: var(--font-family);

            color: var(--btn_txt_clr);

            font-weight: var(--regular);

        }



         a {

            border: 1px solid #fff;

            border-radius: 6px;

            padding: 8px 20px;

            background: #fff;

            color: #2866c2;

            font-size: 19px;

            font-weight: var(--bold);

            font-family: var(--font-family);

            transition: 0.3s ease;

            line-height: 30px;



            &:hover {

                background: transparent;

                color: #fff;

            }

        }

    }

}



.trucking_cdm {

    position: relative;

    padding: 90px 0;

    margin: 50px 0 0 0;



    .wrap {

        &::before {

            content: "";

            position: absolute;

            width: 70%;

            height: 95%;

            top: 0;

            left: 0;

            background-image: url(../../images/truking_cdm.png);

            background-repeat: no-repeat;

            background-size: contain;

            background-position: center;

            z-index: -1;

            transform: translate(428px, 10px);

        }



        .title {

            h3 {

                font-size: 44px;

                font-weight: var(--semi-bold);

                font-family: var(--font-family);

                margin-bottom: 26px;

                color: var(--primrytitle_clr);

            }

        }



        .content {

            h6 {

                font-size: var(--secndrytitle_sz);

                font-weight: var(--semi-bold);

                font-family: var(--font-family);

                font-weight: var(--bold);

            }



            p {

                font-size: var(--secndrytitle_sz);

                font-weight: var(--regular);

                font-family: var(--font-family);

                color: var(--secndrytitle_clr);

                max-width: 475px;

            }

        }

    }



    .glbl_btn {

        border-radius: 6px;

    }

}



.t_cdm {



    margin-bottom: 50px;



    .dvTitle {

        h2 {

            font-weight: var(--semi-bold);

        }

    }



    .innr_crd {

        min-height: 307px;

    }





}



.tms {

    background-color: #F8F9FA;

    padding: 70px 0 50px 0;



    h2 {

        margin-bottom: 40px;

        font-size: 40px;

        font-weight: var(--semi-bold);

        font-family: var(--font-family);

        color: var(--primrytitle_clr);

    }



    .tms_card {

        background-color: #fff;

        padding: 50px 30px;

        border-radius: 20px;

        width: 300px;

        height: 330px;

        margin-bottom: 20px;

        cursor: pointer;

        transition: all 0.3s ease-in-out;



        h6 {

            font-size: 20px;

            font-weight: var(--bold);

            font-family: var(--font-family);

            color: #000000;

            margin-bottom: 14px;

            margin-top: 35px;

        }



        p {

            font-size: 18px;

            font-weight: var(--regular);

            font-family: var(--font-family);

            color: #7B8893;

            margin-bottom: 0px;

            line-height: 27.2px;

        }







        &:hover {

            background-color: #234982;

            transform: rotate(-5deg);



            h6,

            p {

                color: #fff;

            }



            img {

                filter: invert(1);

            }

        }

    }

}



.key_bnfts_section {

    position: relative;

    padding: 50px 0 50px 0;



    h2 {

        font-size: 40px;

        font-weight: var(--semi-bold);

        font-family: var(--font-family);

        color: var(--primrytitle_clr);

        margin-left: 120px;

        margin-bottom: 20px;

    }



    .key_bnftsBg {



        img {

            width: 100%;

            border-radius: 24px;

            height: 320px;

            object-fit: cover;

        }

    }



    .benefits_content {

        position: absolute;

        top: 50%;

        left: 0;

        width: 100%;

        transform: translateY(-50%);

        margin-top: 0px;

        padding: 0 50px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 30px;



        h4 {

            color: #fff;

            font-size: 30px;

            font-weight: 700;

            line-height: 1.2;

            margin-bottom: 18px;

            font-family: var(--font-family);

        }



        p {

            color: #fff;

            font-size: 19px;

            margin-bottom: 0;

            font-weight: 400;

            line-height: 1.7;

            font-family: var(--font-family);

        }



        a {

            border: 1px solid #fff;

            border-radius: 6px;

            padding: 8px 20px;

            background: #fff;

            color: #2866c2;

            font-size: 19px;

            font-weight: var(--bold);

            font-family: var(--font-family);

            transition: 0.3s ease;

            line-height: 30px;



            &:hover {

                background: transparent;

                color: #fff;

            }

        }

    }



    .process_wrapper {

        position: relative;



        /* DOTTED LINE */

        &::before {

            content: "";

            position: absolute;

            top: 52px;

            left: 15%;

            width: 70%;

            border-top: 1px dashed #cfcfcf;

            z-index: 1;

        }

    }



    .process_item {

        position: relative;

        text-align: center;

        z-index: 2;



        h4 {

            font-size: 20px;

            font-weight: 700;

            color: var(--primrytitle_clr);

            margin-bottom: 12px;

            font-weight: var(--bold);

            font-family: var(--font-family);

            margin-top: 20px;

        }



        p {

            font-size: 19px;

            color: var(--secndrytitle_clr);

            line-height: 1.7;

            margin-bottom: 0;

            font-weight: var(--regular);

            font-family: var(--font-family);

        }



        img {

            width: 100px;

        }

    }











    /* =========================

        MOBILE

    ========================== */



    @media (max-width: 991px) {



        .process_wrapper {



            &::before {

                display: none;

            }

        }







        .process_item {

            margin-bottom: 40px;

        }

    }



    /* =========================

        TABLET

    ========================== */



    @media (max-width: 991px) {



        .benefits_content {

            padding: 0 30px;



            h4 {

                font-size: 38px;

            }



            p {

                font-size: 16px;

            }



            button {

                min-width: 160px;

                min-height: 60px;

            }

        }

    }



    /* =========================

        MOBILE

    ========================== */



    @media (max-width: 767px) {



        .key_bnftsBg {



            img {

                min-height: 500px;

            }

        }



        .benefits_content {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);



            flex-direction: column;

            align-items: flex-start;

            justify-content: center;



            padding: 30px 25px;



            h4 {

                font-size: 32px;



                br {

                    display: none;

                }

            }



            p {

                font-size: 15px;

            }



            button {

                width: 100%;

                min-height: 56px;

            }

        }

    }

}



.why_choose_section {

    background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 162.72%);

    padding: 0 0 300px 0;



    .left_content {



        position: relative;



        h6 {

            border: 1.5px solid var(--contactLftbg);

            background-color: var(--contactLftbg);

            color: var(--btn_txt_clr);

            font-size: 20px;

            font-weight: var(--semi-bold);

            padding: 5px 30px;

            border-radius: 30px;

            display: inline-block;

            margin-bottom: 25px;

        }



        h2 {

            font-size: 50px;

            line-height: 1.15;

            font-weight: 500;

            color: #0A2540;

            margin-bottom: 8px;

            font-family: var(--font-family);

            font-weight: 500;

        }



        p {

            font-size: 19px;

            line-height: 1.9;

            color: #7B8893;

            margin-bottom: 35px;

            max-width: 500px;

            font-family: var(--font-family);

            font-weight: 400;

        }





    }



    /* =========================

       COMMON FEATURE CARD

    ========================== */



    .feature_card {

        display: flex;

        align-items: flex-start;



        gap: 20px;



        padding: 10px 0;



        transition: all 0.3s ease;



        &:hover {

            transform: translateY(-5px);

        }



        .icon_box {

            width: 70px;

            min-width: 70px;

            height: 70px;



            border-radius: 18px;



            background: #f5f8ff;



            display: flex;

            align-items: center;

            justify-content: center;



            img {

                width: 42px;

            }

        }



        .content {



            h4 {

                font-size: 22px;

                line-height: 1.3;



                font-weight: 700;



                color: #1b2430;



                margin-bottom: 14px;

            }



            p {

                font-size: 18px;

                line-height: 1.9;



                color: #8b95a7;



                margin-bottom: 0;

            }

        }

    }



    /* =========================

       MIDDLE COLUMN

    ========================== */



    .feature_wrap {

        position: absolute;

        width: 40%;

        right: 10%;



        .middle_features {

            display: flex;

            flex-direction: column;

        }



        /* =========================

       RIGHT COLUMN

    ========================== */



        .right_features {

            position: relative;



            padding-left: 45px;



            &::before {

                content: "";



                position: absolute;



                top: 0;

                left: 0;



                width: 1px;

                height: 100%;



                background: #e9ecef;

            }





        }

    }





    .divider {

        width: 100%;

        height: 1px;

        background: #e9ecef;

        margin: 16px 0;

    }



    /* =========================

       RESPONSIVE

    ========================== */



    @media (max-width: 991px) {



        padding: 70px 0;



        .left_content {



            text-align: center;



            p {

                max-width: 100%;

            }

        }



        .middle_features {

            gap: 30px;

        }



        .right_features {

            padding-left: 0;



            &::before {

                display: none;

            }

        }

    }



    @media (max-width: 767px) {



        .left_content {



            h2 {

                font-size: 38px;

            }

        }



        .feature_card {

            flex-direction: column;



            .icon_box {

                width: 65px;

                height: 65px;

                min-width: 65px;



                img {

                    width: 38px;

                }

            }



            .content {



                h4 {

                    font-size: 20px;

                }



                p {

                    font-size: 14px;

                }

            }

        }

    }

}



.integrated_module {

    background-color: #F8F9FA;

    padding: 90px 0;



    .domain-wrapper {

        margin-top: 30px;



        .left-domain,

        .small-card {

            padding: 10px;

        }



        .small-card {

            background-color: #fff;

            padding: 70px 10px;



            img {

                width: 100px;

                height: 100px;

            }



            &::before {

                display: none;

            }



            &::after {

                display: none;

            }



            .card-arrow {

                border: 1px solid rgba(234, 234, 234, 1);

                background-color: rgba(248, 248, 248, 1);

                color: #000000;

                width: 30px;

                height: 30px;

            }



            .overlay-text {

                color: #0A2540;

                bottom: 115px;

            }

        }

    }







}



.efficiency {

    padding: 70px 0;

    background: linear-gradient(180deg, #FFFFFF -5.48%, #F8F9FA 100%);



    h6 {

        border: 1.5px solid var(--contactLftbg);

        background-color: var(--contactLftbg);

        color: var(--btn_txt_clr);

        font-size: 20px;

        font-weight: var(--semi-bold);

        padding: 5px 30px;

        border-radius: 30px;

        display: inline-block;

        margin-bottom: 25px;

    }



    h2 {

        font-weight: var(--semi-bold);

        margin-bottom: 50px;

    }



    .efficiency_dv {

        position: relative;

        z-index: 1;



        &::after {

            content: "";

            position: absolute;

            top: -2px;

            left: 50%;

            width: 65%;

            height: 120px;

            background-image: url(../../images/curve.png);

            background-repeat: no-repeat;

            background-position: center;

            background-size: contain;

            transform: translateX(-50%);

            z-index: -1;

            pointer-events: none;

        }



        .col-md-3 {

            position: relative;

            z-index: 2;

        }

    }



    .icon {

        background-color: #F2F8FF;

        width: 100px;

        height: 100px;

        border-radius: 50%;



        display: flex;

        align-items: center;

        justify-content: center;



        margin: 0 auto;



        transition: all 0.35s ease;

        cursor: pointer;



        img {

            transition: all 0.35s ease;

        }



        &:hover {

            transform: translateY(-8px) scale(1.05);

            background-color: var(--contactLftbg);

            box-shadow: 0 15px 30px rgba(0, 102, 255, 0.18);



            img {

                transform: scale(1.1);

                filter: brightness(0) invert(1);

            }

        }

    }



    .txt {



        h4 {

            font-size: 20px;

            font-weight: var(--bold);

            font-family: var(--font-family);

            color: var(--primrytitle_clr);



            margin-top: 20px;

            margin-bottom: 20px;

        }



        p {

            font-size: 18px;

            font-weight: var(--regular);

            font-family: var(--font-family);

            color: var(--secndrytitle_clr);



            margin-top: 20px;

            margin-bottom: 0;

            line-height: 1.8;

        }

    }



    @media (max-width: 991px) {



        .efficiency_dv {



            &::after {

                display: none;

            }

        }



        .col-md-3 {

            margin-bottom: 40px;

        }

    }

}





/* =========================

   SECTION OUTER

========================= */



.section-outer {

    background: #fff;

    padding: 0;

    padding: 70px 0;







    /* Main Section */

    .holistic-section {





        .section-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 10px;



            .section-title {

                font-size: 36px;

                font-weight: 500;

                color: #0A2540;

                line-height: 1.2;

                font-family: var(--font-family);

            }



            .section-subtitle {

                font-size: 18px;

                color: #7B8893;

                text-align: right;

                line-height: 1.6;

                padding-top: 6px;

                font-weight: 500;

                font-family: var(--font-family);

            }





        }



        /* Divider */

        .top-divider {

            border: none;

            border-top: 1px solid #e0e6ef;

            margin: 30px 0 0;

        }



        /* Content Area */

        .content-area {



            position: relative;



            /* Steps Column */

            .steps-col {

                flex: 1;

                padding-right: 20px;



                /* Each Step */

                .step-item {

                    display: flex;

                    align-items: flex-start;

                    gap: 20px;

                    padding: 32px 0;

                    border-bottom: 1px solid #E2E2E2;

                    border-top: 1px solid #E2E2E2;

                    position: relative;



                    &:last-child {

                        border-bottom: none;

                    }



                    &.active {

                        background: #eef3fc;

                        padding-left: 0px;

                        margin-right: -20px;

                        padding-right: 20px;

                        border-radius: 0;

                        border-bottom: 1px solid #E2E2E2;

                        border-top: 1px solid #E2E2E2;



                        .step-number {

                            color: #1a2f5e;

                        }



                        .step-arrow {

                            background: #3b6fd4;

                            border-color: #3b6fd4;



                            svg {

                                stroke: #fff;

                            }

                        }

                    }



                    /* Step number */

                    .step-number {

                        font-size: 64px;

                        font-weight: 700;

                        line-height: 1;

                        min-width: 80px;

                        color: #c8d5e8;

                        user-select: none;

                        margin-top: -6px;

                    }



                    /* Step content */

                    .step-content {

                        flex: 1;

                        padding-top: 4px;



                        .step-title {

                            font-size: 20px;

                            font-weight: 600;

                            color: #0A2540;

                            margin-bottom: 6px;

                            font-family: var(--font-family);

                        }



                        .step-desc {

                            font-size: 17px;

                            color: #00000080;

                            line-height: 1.65;

                            max-width: 300px;

                            font-family: var(--font-family);

                        }

                    }



                    /* Arrow button */

                    .step-arrow {

                        display: flex;

                        align-items: center;

                        justify-content: center;

                        width: 36px;

                        height: 36px;

                        border-radius: 50%;

                        border: 1.5px solid #c8d5e8;

                        background: #fff;

                        cursor: pointer;

                        flex-shrink: 0;

                        margin-top: 4px;

                        transition: all 0.2s ease;



                        svg {

                            width: 14px;

                            height: 14px;

                            stroke: #7a8a9a;

                        }

                    }

                }

            }



            /* Laptop mockup column */

            .laptop-col {

                position: absolute;

                top: 0;

                bottom: 0;

                right: 0;

                left: 0;

                transform: translate(60%, 20%);

                width: 70%;





            }

        }



        h6 {

            border: 1.5px solid var(--contactLftbg);

            background-color: var(--contactLftbg);

            color: var(--btn_txt_clr);

            font-size: 20px;

            font-weight: var(--semi-bold);

            padding: 5px 30px;

            border-radius: 30px;

            display: inline-block;

            margin-bottom: 10px;

        }

    }



    .laptop-img {

        transition: 0.4s ease;

    }

}



.section-wrapper {

    background-color: #f4f7fb;

    padding: 60px 0;



    .badge-pill {

        background-color: #e8f0fe;

        color: #3b6de7;

        font-size: 13px;

        font-weight: 500;

        padding: 6px 16px;

        border-radius: 50px;

        display: inline-block;

        margin-bottom: 16px;

    }



    .section-title {

        font-size: 36px;

        font-weight: 700;

        color: #0d1b2a;

        margin-bottom: 16px;

    }



    .section-desc {

        font-size: 14px;

        color: #6b7280;

        line-height: 1.7;

        max-width: 340px;

    }



    .btn-demo {

        background-color: #1a3c6e;

        color: #fff;

        font-size: 14px;

        font-weight: 500;

        padding: 12px 28px;

        border-radius: 6px;

        border: none;

        margin-top: 28px;

        display: inline-block;

        text-decoration: none;

        transition: background 0.2s;



        &:hover {

            background-color: #122d55;

            color: #fff;

        }

    }



    /* Feature card */

    .feature-card {

        background: #fff;

        border-radius: 12px;

        padding: 28px 24px;

        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

        display: flex;

        gap: 18px;

        align-items: flex-start;

        height: 100%;



        .feature-icon {

            width: 56px;

            height: 56px;

            flex-shrink: 0;

            display: flex;

            align-items: center;

            justify-content: center;



            img {

                width: 100%;

                height: 100%;

                object-fit: contain;

            }

        }



        .feature-title {

            font-size: 16px;

            font-weight: 700;

            color: #0d1b2a;

            margin-bottom: 8px;

        }



        .feature-desc {

            font-size: 13.5px;

            color: #6b7280;

            line-height: 1.65;

            margin: 0;

        }

    }



    /* Right column cards */

    .side-feature-card {

        background: #fff;

        border-radius: 12px;

        padding: 24px 20px;

        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

        display: flex;

        gap: 16px;

        align-items: flex-start;

    }



    .divider-line {

        border: none;

        border-top: 1px solid #e5e9f0;

        margin: 16px 0;

    }



    /* SVG Icons inline */

    .icon-customer {

        background: #fff3e0;

        border-radius: 10px;

        padding: 8px;

    }



    .icon-financial {

        background: #fce4ec;

        border-radius: 10px;

        padding: 8px;

    }



    .icon-quality {

        background: #fff8e1;

        border-radius: 10px;

        padding: 8px;

    }



    .icon-security {

        background: #e8f5e9;

        border-radius: 10px;

        padding: 8px;

    }



    @media (max-width: 991px) {

        .section-title {

            font-size: 28px;

        }



        .section-desc {

            max-width: 100%;

        }

    }

}





@media (max-width: 991px) {

    .hero-section {

        text-align: center;



        .hero-title {

            font-size: 38px;

        }



        .hero-desc {

            margin-inline: auto;

        }



        .feature-list {

            li {

                justify-content: center;

            }

        }



        .right-features {

            margin-top: 50px;



            &::before {

                display: none;

            }

        }

    }

}

/* Solution Page css end */



/* Contact Page css start */

.section-wrapper {

    padding: 48px 0 64px;



    /* ── Info Cards ── */

    .info-card {

        display: flex;

        gap: 16px;

        padding: 20px 24px;



        .icon-wrap {

            width: 100px;

            height: 100px;

            display: flex;

            align-items: center;

            justify-content: center;

            background-color: #F7F7F7;

            border-radius: 6px;

        }



        .card-title {

            font-weight: 700;

            font-size: 0.95rem;

            margin-bottom: 4px;

            color: #1a1a2e;

        }



        p {

            margin: 0;

            font-size: 0.82rem;

            color: #6b7280;

            line-height: 1.6;

        }

    }



    /* ── Badge pill ── */

    .badge-pill {

        background-color: #678FD5;

        color: #fff;

        font-size: 14px;

        font-weight: 500;

        padding: 6px 20px;

        border-radius: 50px;

        display: inline-block;

        margin-bottom: 18px;

        font-family: var(--font-family);

    }



    /* ── Heading ── */

    .contact-heading {

        font-size: 40px;

        font-weight: 500;

        line-height: 1.2;

        color: #0f172a;

        margin-bottom: 16px;

        font-family: var(--font-family);

    }



    .contact-desc {

        font-size: var(--secndrytitle_sz);

        color: var(--secndrytitle_clr);

        line-height: 1.7;

        margin-bottom: 32px;

        font-family: var(--font-family);

        font-weight: 400;

    }



    /* ── Location Block ── */

    .location-title {

        font-size: 25px;

        font-weight: 500;

        color: #2F84BE;

        margin-bottom: 12px;

        font-family: var(--font-family);

    }



    /* .location-nav {

        display: flex;

        align-items: center;

        gap: 6px;

        margin-bottom: 14px;



        button {

            border: 1px solid #e7edf4;

            background: #fff;

            color: #6b7280;

            width: 28px;

            height: 28px;

            border-radius: 4px;

            font-size: 0.8rem;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            transition: background 0.2s;



            &:hover {

                background: #f0f5fb;

            }

        }

    } */



    .location-info {

        li {

            display: flex;

            align-items: center;

            gap: 10px;

            font-size: 15px;

            color: #282828;

            margin-bottom: 8px;

            list-style: none;

            padding: 0;

            font-family: var(--font-family);

            font-weight: 500;



            i {

                color: #4a7fc1;

                font-size: 0.9rem;

                min-width: 16px;

            }

        }

    }



    /* ── Form ── */

    .contact-form {

        .form-control {

            border: 1px solid #e2e8f0;

            border-radius: 6px;

            font-size: 0.87rem;

            color: #374151;

            padding: 10px 14px;

            background: #f9fbfd;

            transition: border-color 0.2s, box-shadow 0.2s;

            font-family: var(--font-family);



            &::placeholder {

                color: #020202;

                font-family: var(--font-family);

            }



            &:focus {

                border-color: #4a7fc1;

                box-shadow: 0 0 0 3px rgba(74, 127, 193, 0.12);

                background: #fff;

            }

        }



        textarea.form-control {

            min-height: 110px;

            resize: none;

            font-family: var(--font-family);

        }

    }



    .btn-send {

        background-color: #234982;

        color: #fff;

        border: none;

        border-radius: 30px;

        padding: 10px 30px;

        font-size: 15px;

        font-weight: 500;

        display: inline-flex;

        align-items: center;

        gap: 8px;

        transition: background 0.2s, transform 0.15s;

        font-family: var(--font-family);



        &:hover {

            background-color: #24508f;

            transform: translateY(-1px);

        }

    }

}

.contact_bg{

    background-color: #fff !important;

}

/* Contact page css end */



/* System page css start */

/* ALERT */



.alert-box {

    .alert-cont {

        margin: 30px 0 40px;

        background: #fff8e6;

        border: 1px solid #facc15;

        border-radius: 16px;

        padding: 18px 24px;

        display: flex;

        gap: 15px;

        align-items: flex-start;



        i {

            color: #ca8a04;

            margin-top: 4px;

            font-family: var(--font-family);

        }



        h4 {

            font-size: 20px;

            font-weight: 700;

            color: #92400e;

            margin-bottom: 5px;

            font-family: var(--font-family);

        }



        p {

            color: #a16207;

            font-size: 18px;

            font-family: var(--font-family);

        }

    }

}







/* CARDS */

.status {

    .status-border {

        background: #fff;

        border-radius: 20px;

        padding: 35px;

        margin: 28px 0 48px;

        border: 1px solid #e5e7eb;



        h2 {

            font-size: 22px;

            margin-bottom: 10px;

            color: #2F2F2F;

            font-family: var(--font-family);

        }



        .card-subtitle {

            color: #717171;

            margin-bottom: 30px;

            font-size: 20px;

            font-family: var(--font-family);

        }



        .status-row {

            display: flex;

            align-items: center;

            gap: 16px;

            padding: 22px;

            border: 1px solid #d1fae5;

            background: #ecfdf5;

            border-radius: 16px;



            i {

                color: #10b981;

                font-size: 26px;

                font-family: var(--font-family);

            }



            h3 {

                color: #047857;

                font-size: 20px;

                margin-bottom: 4px;

                font-family: var(--font-family);

            }



            p {

                color: #6b7280;

                font-size: 14px;

                font-family: var(--font-family);

            }

        }

    }

}



/* VERSION */

.version {

    .version-border {

        background: #fff;

        border-radius: 20px;

        padding: 35px;

        margin: 28px 0 48px;

        border: 1px solid #e5e7eb;



        h2 {

            font-size: 30px;

            color: #242424;

            font-weight: 700;

            font-family: var(--font-family);

        }



        .version-title {

            font-size: 36px;

            font-weight: 700;

            margin-bottom: 10px;

            font-family: var(--font-family);



            span {

                font-size: 31px;

            }

        }

    }

}







.release {

    color: #6b7280;

    margin-bottom: 30px;

    font-size: 22px;

    font-family: var(--font-family);

}



.whats-new {

    margin-bottom: 30px;

}



.whats-new h3 {

    margin-bottom: 18px;

    font-size: 25px;

    font-family: var(--font-family);

}



.whats-new ul {

    list-style: none;

}



.whats-new li {

    display: flex;

    gap: 12px;

    margin-bottom: 14px;

    color: #374151;

    font-size: 22px;

    font-family: var(--font-family);

}



.whats-new li i {

    color: #10b981;

    margin-top: 4px;

    font-family: var(--font-family);

}



.download-box {

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    padding: 30px;

    margin-top: 25px;

}



.download-box h3 {

    margin-bottom: 18px;

    font-size: 24px;

    font-family: var(--font-family);

}



.download-box ol {

    padding-left: 20px;

    color: #6b7280;

    font-family: var(--font-family);

}



.download-box li {

    margin-bottom: 12px;

    font-size: 20px;

    color: #717171;

    font-family: var(--font-family);

}



.download-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: #234982;

    color: white;

    padding: 14px 22px;

    border-radius: 10px;

    margin-top: 20px;

    font-weight: 500;

    text-decoration: none;

    font-size: 15px;

    font-family: var(--font-family);

}



/* MAINTENANCE */







.maintenance {

    .maintenance-border {

        background: #fff;

        border-radius: 20px;

        padding: 35px;

        margin: 28px 0 48px;

        border: 1px solid #e5e7eb;



        h2 {

            font-size: 22px;

            color: #2F2F2F;

            font-family: var(--font-family);

            font-weight: 500;

        }



        p {

            font-size: 20px;

            color: #717171;

            font-family: var(--font-family);

            font-weight: 500;

        }



        .maintenance-box {

            background: #eff6ff;

            border: 1px solid #bfdbfe;

            border-radius: 16px;

            padding: 22px;

            display: flex;

            gap: 15px;

            margin-top: 20px;



            i {

                color: #2563eb;

                margin-top: 5px;

                font-family: var(--font-family);

            }



            h4 {

                color: #1C398E;

                margin-bottom: 10px;

                font-size: 22px;

                font-family: var(--font-family);

            }



            p {

                color: #195FD1;

                font-size: 20px;

                font-family: var(--font-family);

                font-weight: 500;

            }

        }





    }

}

/* System page css end */



/* Cargo Operation page css start */

html{

    overflow-x: hidden;

}

body{

    overflow-x: hidden;

}

.truck-clpp{

    /* position: relative; */

    padding: 90px 0;

    margin: 50px 0 0 0;

    .title{

        /* ── Badge pill ── */

        h6 {

            background-color: #4a7fc1;

            color: #fff;

            font-size: 0.78rem;

            font-weight: 500;

            padding: 12px 16px;

            border-radius: 50px;

            display: inline-block;

            margin-bottom: 18px;

            max-width: 148px;

            width: 100%;

            text-align: center;

        }

        h3{

            font-size: 45px;

            font-weight: 600;

            line-height: 1.2;

            color: #0f172a;

            margin-bottom: 16px;

        }

        p{

            font-size: 18px;

            color: var(--secndrytitle_clr);

            line-height: 1.7;

            margin-bottom: 32px;

            font-family: var(--font-family);

            font-weight: 300;

        }

    }

    ul{

        display: flex;

        flex-wrap: wrap;

        gap: 20px;

        li{

            list-style: none;

            padding-bottom: 20px;

            box-sizing: border-box;

            font-size: 18px;

            color: #1E364E;

            font-weight: 500;

            img{

                margin-right: 10px;

            }

        }

    }

}







.get_demo_wrap{

    background: url(/Cargo_nl/assets/images/get-a-demo.jpg) no-repeat center center;

    background-size: cover;

    padding: 85px 124px 89px 80px;

}



.it_works{

    padding: 90px 0;

    .work_left{

        h6 {

            border: solid 1px #E5E8EB;

            display: inline-block;

            border-radius: 30px;

            padding: 5px 25px;

            color: var(--primrytitle_clr);

            font-weight: var(--bold);

            font-size: var(--btn_txt);

            font-family: var(--font-family);

            margin-bottom: 18px;

        }

        h2{

            font-size: 45px;

            font-weight: 600;

            line-height: 1.2;

            color: #0f172a;

            margin-bottom: 65px;

        }

        ul{

            li{

                h3{

                    font-size: 22px;

                    font-weight: 700;  

                    color: #1F2428;

                    margin-bottom: 10px;

                }

                p{

                    font-size: 15px;

                    color: var(--secndrytitle_clr);

                    line-height: 1.7;

                    margin-bottom: 20px;

                    font-family: var(--font-family);

                    font-weight: 300;

                }

            }

        }

    }

}



.features{

    padding: 90px 0;

    background-color: #F2F8FF;

    .feTitle{

        margin-bottom: 92px;

        h6 {

            border: solid 1px #E5E8EB;

            display: inline-block;

            border-radius: 30px;

            padding: 5px 25px;

            color: var(--primrytitle_clr);

            font-weight: var(--bold);

            font-size: var(--btn_txt);

            font-family: var(--font-family);

            margin-bottom: 18px;

        }

        h2{

            font-size: 45px;

            font-weight: 600;

            line-height: 1.2;

            color: #0f172a;

            margin-bottom: 19px;

        }

        p{

            font-size: 18px;

            color: var(--secndrytitle_clr);

            line-height: 1.7;

            margin-bottom: 32px;

            font-family: var(--font-family);

            font-weight: 300;

            margin: 0 auto;

            max-width: 787px;

            width: 100%;

        }

    }

    .feat_left{

        h4{

            font-size: 27px;

            line-height: 34px;

            max-width: 514px;

            width: 100%;

            font-weight: 600;

            color: #0A2540;

            margin-bottom: 31px;

        }

        p{

            font-size: 18px;

            color: var(--secndrytitle_clr);

            line-height: 1.7;

            margin-bottom: 20px;

            font-family: var(--font-family);

            font-weight: 300;

        }

        ul{

            /* display: flex; */

            flex-wrap: wrap;

            /* gap: 20px; */

            li{

                list-style: none;

                padding-bottom: 20px;

                box-sizing: border-box;

                font-size: 18px;

                color: #1E364E;

                font-weight: 500;

                img{

                    margin-right: 10px;

                }

            }

        }



    }

}



































 .loss-prevention{

    padding:90px 0;

    .heading{

        text-align:center;

        margin-bottom:60px;

        h6{

            background-color: #4a7fc1;

            color: #fff;

            font-size: 0.78rem;

            font-weight: 500;

            padding: 12px 16px;

            border-radius: 50px;

            display: inline-block;

            margin-bottom: 18px;

            max-width: 148px;

            width: 100%;

        }

        h3{

            font-size: 45px;

            font-weight: 600;

            line-height: 1.2;

            color: #0f172a;

            margin-bottom: 16px;

        }

        p{

            font-size: 18px;

            color: var(--secndrytitle_clr);

            line-height: 1.7;

            margin-bottom: 32px;

            font-family: var(--font-family);

            font-weight: 300;

            max-width: 787px;

            width: 100%;

            margin: 0 auto;

        }

    }

    /* MAIN LAYOUT */

    .layout{

        /* display: grid; */

        grid-template-columns:1fr 520px;

        gap:40px;

        align-items:start;

        .left-section{

            display:grid;

            grid-template-columns:repeat(2,1fr);

            gap:22px;

            .card{

                background:#F2F8FF;

                padding:26px;

                border-radius:20px;

                border: none;

                transition:.3s;

                .icon{

                    width:48px;

                    height:48px;

                    border-radius:14px;

                    background:#fff;

                    display:flex;

                    align-items:center;

                    justify-content:center;

                    margin-bottom:24px;

                    font-size:18px;

                }



                h3{

                    font-size:24px;

                    margin-bottom:14px;

                }



                p{

                    line-height:1.8;

                    color:#8c97a8;

                    margin-bottom:20px;

                    font-size:15px;

                }



                .crdfeat{

                    display:flex;

                    flex-direction:column;

                    gap:12px;

                    li{

                        list-style:none;

                        display:flex;

                        align-items:center;

                        gap:10px;

                        font-size:18px;

                        font-weight:500;

                    }

                    i{

                        color:#3d6dd8;

                    }

                }

            }

        }

        .right-section{

            position:sticky;

            top:40px;

            .image-card{

                position:relative;

                height:620px;

                border-radius:28px;

                overflow:hidden;

                img{

                    width:100%;

                    height:100%;

                    object-fit:cover;

                }

                .overlay{

                    position:absolute;

                    inset:0;

                    background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.1)     );

                    display:flex;

                    align-items:flex-end;

                    padding:40px;

                    .overlay-content{

                        h2{

                            color:#fff;

                            font-size:36px;

                            margin-bottom:14px;

                            line-height:1.2;

                        }

                        p{

                            color:rgba(255,255,255,.88);

                            line-height:1.8;

                            font-size:15px;

                        }

                    }

                } 



            }

        }

    }

}





/*BLOG*/



.blog {



    padding: 80px 0 0 0;



    /* ── Header ── */

    .blog_section_header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 20px;

    }



    .section-title {

        font-size: 25px;

        font-weight: 700;

        margin: 0;

        color: #242424;

        font-family: var(--font-family);

    }



    .view-all-link {

        font-size: 0.875rem;

        color: #34556BCC;

        text-decoration: none;

        font-weight: 500;

        font-family: var(--font-family);



        &:hover {

            text-decoration: underline;

        }

    }



    /* ── Divider ── */

    .blog_section_divider {

        border: none;

        border-top: 1px solid #e0e0e0;

        margin-bottom: 24px;

    }



    /* ── Post Card ── */

    .post-card {

        margin-bottom: 32px;



        img {

            width: 100%;

            height: 200px;

            object-fit: cover;

            border-radius: 6px;

            display: block;

        }

    }



    .post-title {

        font-size: clamp(1rem, 1vw + 0.7rem, 1.1rem);

        font-weight: 500;

        margin-top: 14px;

        margin-bottom: 10px;

        line-height: 1.45;

        font-family: var(--font-family);

        

        a{

             color: #433D3D !important;

        }

       

    }



    .post-meta {

        font-size: clamp(0.9375rem, 0.7vw + 0.7rem, 1rem);

        color: #888;

        display: flex;

        align-items: center;

        gap: 10px;

        font-family: var(--font-family);



        span.divider {

            color: #ccc;

            font-family: var(--font-family);

        }



        .category {

            color: #888;

            font-family: var(--font-family);

        }

    }



    /* ── Sidebar ── */

    .sidebar-search {

        input {

            border-radius: 6px;

            border: 1px solid #e0e0e0;

            padding: 10px 14px;

            font-size: 0.875rem;

            width: 100%;

            outline: none;

            color: #555;

            font-family: var(--font-family);



            &::placeholder {

                color: #bbb;

                font-family: var(--font-family);

            }

        }

    }



    .sidebar-section-title {

        font-size: 22px;

        font-weight: 700;

        margin-top: 28px;

        margin-bottom: 14px;

        color: #111;

        font-family: var(--font-family);

    }



    /* ── Categories ── */

    .category-item {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 10px 0;

        border-bottom: 1px solid #f0f0f0;

        font-size: 0.875rem;

        cursor: pointer;



        &:last-child {

            border-bottom: none;

        }



        .cat-label {

            display: flex;

            align-items: center;

            gap: 8px;

            color: #333;

            

            a{

                color: #433D3D;

                font-size:font-size: clamp(0.95rem, 0.8vw + 0.7rem, 1.125rem);

            }

        }



        .plus-icon {

            font-size: 1rem;

            color: #678FD5;

            font-weight: 700;

            font-family: var(--font-family);

        }



        .cat-count {

            background-color: #F8F8F8;

            color: #555;

            font-size: 14px;

            font-weight: 600;

            padding: 4px 20px;

            border-radius: 2px;

            font-family: var(--font-family);

        }



        &.active {

            .cat-label {

                color: #678FD5;

                font-weight: 600;

                font-family: var(--font-family);

            }



            .cat-count {

                background-color: #678FD5;

                color: #fff;

                font-family: var(--font-family);

            }

        }

    }



    /* ── Tags ── */

    .tags-wrapper {

        display: flex;

        flex-wrap: wrap;

        gap: 8px;

        margin-top: 4px;

    }



    .tag-pill {

       font-size: clamp(0.8125rem, 0.6vw + 0.65rem, 0.9375rem);

        color: #444;

        border: 1px solid #F0F0F0;

        border-radius: 0px;

        padding: 4px 12px;

        background: #fff;

        cursor: pointer;

        transition: background 0.2s, color 0.2s;

        font-family: var(--font-family);

        

        a{

            color: #3A3737;

        }



    }

}



.recent_blog {



    padding: 10px 0 30px 0;



    /* ── Header ── */

    .recntblg_header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 0;

    }



    .section-title {

        font-size: 20px;

        font-weight: 700;

        margin: 0;

        color: #242424;

        font-family: var(--font-family);

    }



    .view-all-link {

        font-size: 0.875rem;

        color: #34556BCC;

        text-decoration: none;

        font-weight: 500;

        font-family: var(--font-family);



        &:hover {

            text-decoration: underline;

        }

    }



    .recntblg_divider {

        border: none;

        border-top: 1px solid #e0e0e0;

        margin: 16px 0 0 0;

    }



    /* ── Blog Row ── */

    .blog-item {

        display: flex;

        align-items: flex-start;

        gap: 20px;

        padding: 24px 0;

        border-bottom: 1px solid #f0f0f0;



        &:last-of-type {

            border-bottom: none;

        }

    }



    .blog-thumb {

        flex-shrink: 0;

        width: 148px;

        height: 105px;

        object-fit: cover;

        border-radius: 6px;

    }



    .blog-body {

        flex: 1;

    }



    .blog-meta {

        display: flex;

        align-items: center;

        gap: 10px;

        font-size: 0.8rem;

        color: #888;

        margin-bottom: 10px;

        flex-wrap: wrap;

        font-family: var(--font-family);



        .sep {

            color: #ccc;

        }



        span:first-child {

            color: #34556B;

            font-size: 14px;

        }

    }



    .blog-title {

        font-size: 1.05rem;

        font-weight: 700;

        color: #111;

        margin: 0;

        line-height: 1.4;

        font-family: var(--font-family);

    }



    /* ── Pagination ── */

    .pagination-wrapper {

        display: flex;

        align-items: center;

        gap: 6px;

        margin-top: 28px;

    }



    .page-btn {

        width: 36px;

        height: 36px;

        border-radius: 50%;

        border: 1px solid #e0e0e0;

        background: #fff;

        font-size: 0.875rem;

        font-weight: 500;

        font-family: var(--font-family);

        color: #333;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: background 0.2s, color 0.2s, border-color 0.2s;

        text-decoration: none;



        &:hover {

            background: #678FD5;

            color: #fff;

            border-color: #678FD5;

        }



        &.active {

            background: #678FD5;

            color: #fff;

            border-color: #678FD5;

        }



        &.arrow {

            font-size: 1rem;

            color: #555;

        }

    }

}



.blog_details {



    padding: 80px 0 50px !important;

    .article-wrapper {

        padding: 0 20px 48px 20px;

    }



    /* ── Hero Image ── */

    .hero-img {

        width: 100%;

        height: 300px;

        object-fit: cover;

        display: block;

    }



    /* ── Meta ── */

    .article-meta {

        display: flex;

        align-items: center;

        gap: 12px;

        font-size: 0.8rem;

        color: #888;

        margin: 16px 0px 12px 0px;

        font-family: var(--font-family);

    }



    .article-meta .sep {

        color: #ccc;

    }



    /* ── Title ── */

    .article-title {

        font-size: 1.25rem;

        font-weight: 500;

        font-family: var(--font-family);

        line-height: 1.35;

        color: #111;

        margin: 0 0px 18px 0px;

    }



    /* ── Body text ── */

    .article-body {

        padding: 0px;

    }



    .article-body p {

        font-size: 1.0rem;

        color: #444;

        line-height: 1.75;

        margin-bottom: 16px;

        font-family: var(--font-family);

    }



    /* ── Checklist ── */

    .checklist {

        list-style: none;

        padding: 0;

        margin: 4px 0 20px 0;

    }



    .checklist li {

        display: flex;

        align-items: flex-start;

        gap: 10px;

        font-size: 0.82rem;

        color: #444;

        line-height: 1.6;

        font-family: var(--font-family);

        margin-bottom: 10px;

    }



    .checklist li .check-icon {

        flex-shrink: 0;

        margin-top: 2px;

        color: #2563eb;

        font-size: 0.85rem;

    }



    .checklist li strong {

        font-weight: 700;

        font-family: var(--font-family);

        color: #111;

    }



    /* ── Gallery Grid ── */

    .gallery-grid {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 5px;

        margin-bottom: 32px;

    }



    .gallery-grid img {

        width: 100%;

        aspect-ratio: 1 / 1;

        object-fit: cover;

        border-radius: 4px;

        display: block;

    }



    /* ── What's New List ── */

    .news-item {

        display: flex;

        align-items: flex-start;

        gap: 12px;

        padding: 12px 0;

        border-bottom: 1px solid #f0f0f0;

    }



    .news-item:last-child {

        border-bottom: none;

    }



    .news-thumb {

        flex-shrink: 0;

        width: 70px;

        height: 58px;

        object-fit: cover;

        border-radius: 4px;

    }



    .news-body {

        flex: 1;

    }



    .news-title a{

        font-size: 1.0rem;

        font-weight: 500;

        color: #3A3737;

        line-height: 1.4;

        margin: 0 0 4px 0;

        font-family: var(--font-family);

    }



    .news-date {

        font-size: 0.75rem;

        color: #888;

        margin: 0;

    }



    .news_item_wrap{

        min-height: 35%;

        overflow-y: scroll;

    }

}















    /* RESPONSIVE */



    @media(max-width:1100px){



      .layout{

        grid-template-columns:1fr;

      }



      .right-section{

        position:relative;

        top:0;

      }



      .image-card{

        height:450px;

      }



    }



    @media(max-width:768px){



      .loss-prevention{

        padding:50px 20px;

      }



      .heading h1{

        font-size:34px;

      }



      .left-section{

        grid-template-columns:1fr;

      }



      .overlay-content h2{

        font-size:28px;

      }



    }



/* Cargo Operation page css end */