@charset "UTF-8";
/**
* Template Name:BEES Express Logistics Inc

* Updated: with Bootstrap v5.3.3
*/
/*--------------------------------------------------------------
# Font & C Variables
--------------------------------------------------------------*/
/* You can add global styles to this file, and also import other style files */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* You can add global styles to this file, and also import other style files */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    font-family: "Montserrat", sans-serif;
    color: #444444;
    font-size: 14px;
}

.cursor-pointer {
    cursor: pointer;
}

a {
    text-decoration: none;
    transition: 0.3s;
}

    a:hover {
        text-decoration: none;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
}

.font-size-14 {
    font-size: 16px;
}

.font-size-18 {
    font-size: 18px !important;
}

.custom-heading {
    font-size: 16px !important; /* default for small screens */
}

@media (min-width: 992px) { /* lg and above */
    .custom-heading {
        font-size: 18px !important;
    }
}

.theme-primary-btn {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.9rem 0.5rem;
    font-size: 14px;
    border-radius: 10px;
    transition: all 0.3s ease 0s;
    color: #000000;
    background: #FFEA00;
    border-color: #FFEA00;
    position: relative;
    min-width: 200px;
}

    .theme-primary-btn .text-width {
        width: calc(100% - 40px) !important;
    }

    .theme-primary-btn i {
        margin-left: 5px;
        font-size: 18px;
        transition: 0.3s;
    }

    .theme-primary-btn .image-arrow {
        position: relative;
        width: 40px;
    }

        .theme-primary-btn .image-arrow::before {
            content: "";
            height: 10px;
            width: 1px;
            background-color: rgba(0, 0, 0, 0.52);
            position: absolute;
            height: 30px;
            top: -4px;
            left: 0;
            transition: all ease 0.4s;
        }

        .theme-primary-btn .image-arrow .theme-arrow {
            max-width: 14px;
            transition: all ease 0.4s;
        }

    .theme-primary-btn:hover {
        background-color: #FFEA00;
        border-color: #FFEA00;
        color: #000000;
    }

        .theme-primary-btn:hover .image-arrow::before {
            background-color: rgba(0, 0, 0, 0.52);
        }

        .theme-primary-btn:hover .image-arrow .theme-arrow {
            transform: rotate(45deg);
            transition: all ease 0.4s;
            filter: unset;
        }

    .theme-primary-btn:focus {
        background-color: #FFEA00;
        border-color: #FFEA00;
        color: #000000;
    }

        .theme-primary-btn:focus .image-arrow::before {
            background-color: rgba(0, 0, 0, 0.52);
        }

        .theme-primary-btn:focus .image-arrow .theme-arrow {
            transform: rotate(45deg);
            transition: all ease 0.4s;
            /* makes the SVG white */
        }

    .theme-primary-btn.active {
        background-color: #FFEA00;
        border-color: #FFEA00;
        color: #000000;
    }

        .theme-primary-btn.active .image-arrow::before {
            background-color: rgba(0, 0, 0, 0.52);
        }

        .theme-primary-btn.active .image-arrow .theme-arrow {
            transform: rotate(45deg);
            transition: all ease 0.4s;
        }

.theme-btn-light-white {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    color: #444444;
}

    .theme-btn-light-white:hover {
        background-color: #FFEA00;
        border: 1px solid #FFEA00;
        color: #444444;
    }

.btn-white-outline {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 10px;
    transition: all 0.3s ease 0s;
    color: #ffffff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.middle-content {
    margin-top: 50px !important;
    margin-bottom: 30px !important;
}

    .middle-content > .hero-image > img {
        max-height: 300px !important;
    }


    .btn-white-outline span {
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .btn-white-outline i {
        margin-left: 5px;
        font-size: 18px;
        transition: 0.3s;
    }

    .btn-white-outline:hover i {
        transform: translateX(5px);
    }

    .btn-white-outline:hover {
        background-color: #FFEA00;
        border-color: #FFEA00;
        color: #000000;
    }

.theme-arrow-btn {
    padding: 0.9rem 0.5rem;
    font-size: 14px;
    border-radius: 10px;
    min-width: 200px;
    font-weight: 500;
    transition: 0.5s;
    color: #ffffff;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 200px;
    border: 1px solid #000000;
}

    .theme-arrow-btn .text-width {
        width: calc(100% - 40px);
    }

    .theme-arrow-btn i {
        margin-left: 5px;
        font-size: 18px;
        transition: 0.3s;
    }

    .theme-arrow-btn .image-arrow {
        position: relative;
        width: 40px;
    }

        .theme-arrow-btn .image-arrow::before {
            content: "";
            height: 10px;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.52);
            position: absolute;
            height: 30px;
            top: -4px;
            left: 0;
            transition: all ease 0.4s;
        }

        .theme-arrow-btn .image-arrow .theme-arrow {
            max-width: 14px;
            transition: all ease 0.4s;
            filter: brightness(0) invert(1);
        }

    .theme-arrow-btn:hover {
        background-color: #FFEA00;
        border-color: #FFEA00;
        color: #000000;
    }

        .theme-arrow-btn:hover .image-arrow::before {
            background-color: rgba(0, 0, 0, 0.52);
        }

        .theme-arrow-btn:hover .image-arrow .theme-arrow {
            transform: rotate(45deg);
            transition: all ease 0.4s;
            filter: unset;
        }

    .theme-arrow-btn:focus {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff;
    }

        .theme-arrow-btn:focus .image-arrow::before {
            background-color: rgba(0, 0, 0, 0.52);
        }

        .theme-arrow-btn:focus .image-arrow .theme-arrow {
            transform: rotate(45deg);
            transition: all ease 0.4s;
            filter: brightness(0) invert(1);
            /* makes the SVG white */
        }

    .theme-arrow-btn.active {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff;
    }

        .theme-arrow-btn.active .image-arrow::before {
            background-color: rgba(255, 255, 255, 0.52);
        }

        .theme-arrow-btn.active .image-arrow .theme-arrow {
            transform: rotate(45deg);
            transition: all ease 0.4s;
            filter: brightness(0) invert(1);
            /* makes the SVG white */
        }

    .theme-arrow-btn.theme-black-btn {
        transition: all 0.3s ease;
    }

        .theme-arrow-btn.theme-black-btn:hover {
            background-color: #000000;
            border-color: #000000;
            color: #ffffff;
            transform: translateY(-3px);
        }

            .theme-arrow-btn.theme-black-btn:hover .image-arrow::before {
                background-color: rgba(255, 255, 255, 0.52);
            }

            .theme-arrow-btn.theme-black-btn:hover .image-arrow .theme-arrow {
                transform: rotate(45deg);
                transition: all ease 0.4s;
                filter: brightness(0) invert(1);
            }

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.submit-btn {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

    .submit-btn .image-arrow .theme-arrow {
        filter: brightness(0) invert(1) !important;
    }

@media (max-width: 576px) {
    .get-in-touch-btn {
        background-color: #FFEA00;
        border-color: #FFEA00;
        color: #000000;
    }

        .get-in-touch-btn .image-arrow .theme-arrow {
            filter: none !important;
        }
}


    .btn-check:checked + .btn .image-arrow .theme-arrow,
    .btn.active .image-arrow .theme-arrow,
    .btn.show .image-arrow .theme-arrow,
    .btn:first-child:active .image-arrow .theme-arrow,
    :not(.btn-check) + .btn:active .image-arrow .theme-arrow {
        transform: rotate(45deg);
        transition: all ease 0.4s;
        filter: brightness(0) invert(1);
        /* makes the SVG white */
    }

.website-form-control .form-control {
    box-shadow: unset !important;
    border: 2px solid #bfbfbf;
    border-radius: 20px;
    padding-left: 1rem;
}

    .website-form-control .form-control:focus {
        border: 2px solid #000000;
    }

.website-form-control .website-label {
    font-size: 14px;
    padding-left: 1rem;
}

    .website-form-control .website-label span {
        color: red;
    }

.website-form-control .textarea-control {
    min-height: 100px;
}

@keyframes bicycle {
    from {
        transform: translateX(-640px);
    }

    to {
        transform: translatex(1380px);
    }
}

@keyframes micro {
    from {
        transform: translateX(620px);
    }

    to {
        transform: translateX(-1500px);
    }
}

/* Animation Left Right */
.leftRight-animation {
    animation: fadeLeftRight 10s ease-out infinite;
}

/* Fade Left Right */
@keyframes fadeLeftRight {

    0%, 100% {
        transform: translateX(100px);
    }

    50% {
        transform: translateX(0px);
    }
}

@keyframes up-down {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-10px);
    }
}

.animated-img {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

.section-gap {
    padding: 60px 20px;
}

@media (min-width: 1200px) {
    .section-gap {
        padding: 80px 15px;
    }
}

.title-container .title-top {
    margin-bottom: 0;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
}

    .title-container .title-top .title-svg img {
        width: 30px;
        margin-right: 5px;
        margin-top: -5px;
    }

.title-container .main-title {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    color: #444444;
}

@media (min-width: 991px) {
    .title-container .main-title {
        font-size: 34px;
    }
}

/*--------------------------------------------------------------
# Coming Soon Page
--------------------------------------------------------------*/
.coming-soon-container {
    background: url(../assets/images/yellow-bg.svg) no-repeat;
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

    .coming-soon-container .logo-call-container {
        padding: 20px 20px 0 20px;
        align-items: center;
    }

.initials-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff !important; 
    color: #000000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0 auto;
    border: 2px solid #000000;
}



@media (min-width: 1400px) {
    .coming-soon-container .logo-call-container {
        padding-top: 40px;
    }
}

@media (min-width: 1600px) {
    .coming-soon-container .logo-call-container {
        padding: 40px 100px 0 100px;
    }
}

.coming-soon-container .logo-call-container .logo-container img {
    max-width: 200px;
}

@media (min-width: 1400px) {
    .coming-soon-container .logo-call-container .logo-container img {
        max-width: 300px;
        margin-bottom: unset;
    }
}

.coming-soon-container .call-us-container {
    color: #000000;
}

    .coming-soon-container .call-us-container span {
        font-size: 18px;
        font-weight: 400;
        text-transform: uppercase;
    }

    .coming-soon-container .call-us-container .call-no {
        font-size: 30px;
        margin-bottom: 0;
        font-weight: 700;
        color: #000000;
    }

@media (min-width: 991) {
    .coming-soon-container .call-us-container .call-no {
        font-size: 40px;
    }
}

@media (min-width: 1400px) {
    .coming-soon-container .call-us-container .call-no {
        font-size: 48px;
    }
}

.coming-soon-container .coming-soon-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    min-height: calc(100vh - 200px);
}

@media (min-width: 767px) {
    .coming-soon-container .coming-soon-content {
        min-height: calc(100vh - 250px);
        padding: 20px;
    }

    .section-gap {
        padding: 30px 10px;
    }
}

@media (min-width: 1600px) {
    .coming-soon-container .coming-soon-content {
        min-height: calc(100vh - 300px);
    }
}

.coming-soon-container .coming-soon-content .coming-logo {
    max-width: 300px;
}

@media (min-width: 1400px) {
    .coming-soon-container .coming-soon-content .coming-logo {
        max-width: 620px;
    }
}

.coming-soon-container .coming-soon-content .content-body h4 {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}

@media (min-width: 767px) {
    .coming-soon-container .coming-soon-content .content-body h4 {
        font-size: 24px;
    }
}

@media (min-width: 991px) {
    .coming-soon-container .coming-soon-content .content-body h4 {
        font-size: 30px;
    }
}

.coming-soon-container .coming-soon-content .content-body p {
    font-size: 14px;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    .coming-soon-container .coming-soon-content .content-body p {
        font-size: 16px;
        max-width: 820px;
    }
}

.coming-soon-container .coming-bottom-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

    .coming-soon-container .coming-bottom-container .bottom-img {
        width: 100%;
        max-height: 230px;
    }

@media (min-width: 1400px) {
    .coming-soon-container .coming-bottom-container .bottom-img {
        max-height: 250px;
    }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.scrolled .header-section-container {
    background: #000000;
    padding: 0;
}

.header-section-container {
    color: #ffffff;
    background-color: transparent;
    padding: 20px 0;
    transition: all 0.5s;
    z-index: 997;
}

    .header-section-container .header-container {
        background: #000000;
        border-radius: 15px;
        padding: 10px 10px;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    }

@media (min-width: 575px) {
    .header-section-container .header-container {
        padding: 5px 25px;
    }
}

@media (min-width: 1200px) {
    .header-section-container .header-container {
        margin: 0 25px;
    }
}

@media (min-width: 1600px) {
    .header-section-container .header-container {
        margin: 0 60px;
    }
}

@media (min-width: 1920px) {
    .header-section-container .header-container {
        margin: 0 100px;
    }
}

.header-section-container .header-container .logo {
    line-height: 1;
    padding-left: 5px;
}

    .header-section-container .header-container .logo img {
        max-height: 34px;
        margin-right: 8px;
    }

@media (min-width: 575px) {
    .header-section-container .header-container .logo img {
        max-height: 50px;
    }
}

.header-section-container .header-container .header-menu-btn .theme-primary-btn {
    min-width: 130px !important;
}

@media (max-width: 575px) {
    .header-section-container .header-container .header-menu-btn .theme-primary-btn {
        min-width: 100px;
    }
}

@media (max-width: 1200px) {
    .header-section-container {
        padding-top: 10px;
    }

        .header-section-container .header-container {
            margin-left: 10px;
            margin-right: 10px;
            padding: 10px 5px 10px 15px;
        }

            .header-section-container .header-container .logo {
                order: 1;
            }

            .header-section-container .header-container .header-menu-btn {
                order: 2;
                margin: 0 10px 0 0;
                display: flex;
            }

            .header-section-container .header-container .menu-container {
                order: 3;
            }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* menu-container - Desktop */
@media (min-width: 1200px) {
    .menu-container {
        padding: 0;
    }

        .menu-container ul {
            margin: 0;
            padding: 0;
            display: flex;
            list-style: none;
            align-items: center;
        }

            .menu-container ul .nav-item {
                position: relative;
                padding: 20px 15px;
            }

                .menu-container ul .nav-item:last-child {
                    padding-right: 0;
                }

                .menu-container ul .nav-item .item-link {
                    color: #ffffff;
                    font-size: 14px;
                    font-family: "Montserrat", sans-serif;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    white-space: nowrap;
                    transition: 0.3s;
                    text-transform: capitalize;
                }

                    .menu-container ul .nav-item .item-link i {
                        font-size: 12px;
                        line-height: 0;
                        margin-left: 5px;
                        transition: 0.3s;
                    }

                    .menu-container ul .nav-item .item-link::before {
                        content: "";
                        position: absolute;
                        height: 6px;
                        bottom: 10px;
                        left: 50%;
                        background-color: #FFEA00;
                        visibility: hidden;
                        width: 6px;
                        transition: all 0.3s ease-in-out 0s;
                        border-radius: 30px;
                    }

                    .menu-container ul .nav-item .item-link.active {
                        color: #FFEA00;
                    }

                        .menu-container ul .nav-item .item-link.active::before {
                            visibility: visible;
                            width: 6px;
                        }

                    .menu-container ul .nav-item .item-link:hover {
                        color: #FFEA00;
                    }

                        .menu-container ul .nav-item .item-link:hover::before {
                            visibility: visible;
                            width: 6px;
                        }

        .menu-container .dropdown ul {
            margin: 0;
            padding: 10px 0;
            background: var(--nav-dropdown-background-color);
            display: block;
            position: absolute;
            visibility: hidden;
            left: 14px;
            top: 130%;
            opacity: 0;
            transition: 0.3s;
            border-radius: 4px;
            z-index: 99;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        }

            .menu-container .dropdown ul li {
                min-width: 200px;
            }

                .menu-container .dropdown ul li a {
                    padding: 10px 20px;
                    font-size: 15px;
                    text-transform: none;
                    color: #444444;
                }

        .menu-container .dropdown:hover ul {
            opacity: 1;
            top: 100%;
            visibility: visible;
        }

            .menu-container .dropdown:hover ul .dropdown ul {
                top: 0;
                left: -90%;
                visibility: hidden;
            }

            .menu-container .dropdown:hover ul .dropdown:hover ul {
                opacity: 1;
                top: 0;
                left: -100%;
                visibility: visible;
            }
}

/* menu-container - Mobile */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
        background-color: #FFEA00;
        color: #000000;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        width: 48px;
        z-index: 1001;
        position: relative;
        border: none;
        outline: none;
        padding: 0;
    }

        .mobile-nav-toggle svg {
            width: 24px;
            height: 24px;
            display: block;
            z-index: 99999;
        }

    .menu-container {
        padding: 0;
        z-index: 9997;
    }

        .menu-container ul {
            display: none;
            list-style: none;
            position: absolute;
            inset: 60px 20px 20px 20px;
            padding: 10px 0;
            margin: 0;
            border-radius: 6px;
            background-color: var(--nav-mobile-background-color);
            overflow-y: auto;
            transition: 0.3s;
            z-index: 9998;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        }

            .menu-container ul a {
                color: var(--nav-dropdown-color);
                padding: 10px 20px;
                font-family: var(--nav-font);
                font-size: 14px;
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: space-between;
                white-space: nowrap;
                transition: 0.3s;
            }

                .menu-container ul a i {
                    font-size: 12px;
                    line-height: 0;
                    margin-left: 5px;
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    transition: 0.3s;
                    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
                }

        .menu-container .dropdown ul {
            position: static;
            display: none;
            z-index: 99;
            padding: 10px 0;
            margin: 10px 20px;
            background-color: var(--nav-dropdown-background-color);
            border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
            box-shadow: none;
            transition: all 0.5s ease-in-out;
        }

            .menu-container .dropdown ul ul ul {
                background-color: rgba(33, 37, 41, 0.1);
            }

        .menu-container .active i,
        .menu-container .active:focus i {
            background-color: #ffffff;
            color: var(--contrast-color);
            transform: rotate(180deg);
        }

        .menu-container .dropdown > .dropdown-active {
            display: block;
            background-color: #ffffff;
        }

    .mobile-nav-active {
        overflow: hidden;
    }

        .mobile-nav-active .mobile-nav-toggle {
            position: absolute;
            font-size: 32px;
            top: 15px;
            right: 15px;
            margin-right: 0;
            z-index: 9999;
        }

        .mobile-nav-active .menu-container {
            position: fixed;
            overflow: hidden;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            transition: 0.3s;
        }

            .mobile-nav-active .menu-container > ul {
                display: block;
            }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: #FFEA00;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
    color: #000000;
}

    .scroll-top i {
        font-size: 24px;
        line-height: 0;
    }

    .scroll-top:hover {
        background-color: #000000;
        color: #FFEA00;
    }

    .scroll-top.active {
        visibility: visible;
        opacity: 1;
        bottom: 15px;
    }

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

    .hero-section-container .section-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .hero-section-container .video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
    }

        .hero-section-container .video-wrap .custom-video {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .hero-section-container .hero-container {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

        .hero-section-container .hero-container .hero-content-container {
            padding: 10rem 1rem 1rem 1rem;
        }

@media (min-width: 400px) {
    .hero-section-container .hero-container .hero-content-container {
        padding: 1rem;
    }
}

@media (min-width: 767px) {
    .hero-section-container .hero-container .hero-content-container {
        padding: 2rem 1rem;
    }
}

@media (min-width: 1200px) {
    .hero-section-container .hero-container .hero-content-container {
        padding: 2rem 0rem;
    }
}

.hero-section-container .hero-container .hero-content-container .company-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.95rem;
}

    .hero-section-container .hero-container .hero-content-container .company-badge i {
        font-size: 1.2rem;
    }

    .hero-section-container .hero-container .hero-content-container .company-badge img {
        width: 18px;
        margin-right: 6px;
        margin-top: -1px;
    }

    .hero-section-container .hero-container .hero-content-container .company-badge .svg-white {
        filter: brightness(0) invert(1);
        /* makes the SVG white */
    }

.hero-section-container .hero-container .hero-content-container .hero-content {
    text-align: left;
}

    .hero-section-container .hero-container .hero-content-container .hero-content .accent-text {
        color: #FFEA00;
    }

    .hero-section-container .hero-container .hero-content-container .hero-content h1 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.1;
    }


@media (min-width: 767px) {
    .hero-section-container .hero-container .hero-content-container .hero-content h1 {
        font-size: 3rem;
    }
}

@media (min-width: 991px) {
    .hero-section-container .hero-container .hero-content-container .hero-content h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1400px) {
    .hero-section-container .hero-container .hero-content-container .hero-content h1 {
        font-size: 64px;
    }
}

.hero-section-container .hero-container .hero-content-container .hero-content h2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.hero-section-container .hero-container .hero-content-container .hero-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 575px) {
    .hero-section-container .hero-container .hero-content-container .hero-content h2 {
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.2;
    }
}

@media (min-width: 991px) {
    .hero-section-container .hero-container .hero-content-container .hero-content h2 {
        font-size: 32px;
    }
}

@media (min-width: 1200px) {
    .hero-section-container .hero-container .hero-content-container .hero-content h2 {
        font-size: 40px;
    }
}

.hero-section-container .hero-container .hero-content-container .hero-content p {
    font-size: 1rem;
    margin-top: 1rem;
}

@media (min-width: 1200px) {
    .hero-section-container .hero-container .hero-content-container .hero-content p {
        max-width: 400px;
    }
}

.hero-section-container .hero-container .hero-content-container .hero-content p .typed {
    font-weight: 600;
    color: #FFEA00;
}

.hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons {
    margin-top: 2rem;
}

    .hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons .btn.btn-primary {
        background-color: #FFEA00;
        color: #000;
        border: none;
    }

        .hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons .btn.btn-primary .image-arrow::before {
            background: rgba(0, 0, 0, 0.52);
        }

        .hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons .btn.btn-primary .theme-arrow {
            filter: unset !important;
        }

        .hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons .btn.btn-primary:hover {
            background-color: #FFEA00;
        }

    .hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons .btn.btn-link {
        color: #fff;
        text-decoration: none;
    }

        .hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons .btn.btn-link i {
            vertical-align: middle;
        }

        .hero-section-container .hero-container .hero-content-container .hero-content .hero-buttons .btn.btn-link:hover {
            text-decoration: underline;
        }

.hero-section-container .hero-container .hero-image {
    position: relative;
    text-align: center;
    margin-top: 100px;
}

@media (min-width: 1600px) {
    .hero-section-container .hero-container .hero-image {
        text-align: end;
        margin-top: 170px;
    }
}

.hero-section-container .hero-container .hero-image img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 991px) {
    .hero-section-container .hero-container .hero-image img {
        max-width: 370px;
    }
}

.hero-section-container .hero-container .hero-bees-content .top-content {
    max-width: 100%;
}

@media (min-width: 1400px) {
    .hero-section-container .hero-container .hero-bees-content .top-content {
        max-width: 800px;
        min-height: 150px;
    }
}

@media (min-width: 1800px) {
    .hero-section-container .hero-container .hero-bees-content .top-content {
        max-width: 800px;
        min-height: 200px;
    }
}

.hero-section-container .hero-container .hero-bees-content .bottom-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

@media (min-width: 1400px) {
    .hero-section-container .hero-container .hero-bees-content .bottom-content {
        flex-direction: row;
    }
}

/*--------------------------------------------------------------
# Footer Section
--------------------------------------------------------------*/
.footer-section-container {
    color: #ffffff;
    padding: 60px 15px;
    position: relative;
    overflow: hidden;
    background: #000000;
}

@media (min-width: 1200px) {
    .footer-section-container {
        padding: 60px 15px 30px 15px;
    }
}

.footer-section-container .logo-text {
    font-size: 24px;
}

.footer-section-container .footer-link-container {
    margin-top: 30px;
    padding: 34px 0 0 0;
    position: relative;
}

    .footer-section-container .footer-link-container::before {
        content: "";
        background: transparent linear-gradient(90deg, #707070 0%, #2c2c2c 50%, #383838 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        height: 1px;
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 0;
    }

    .footer-section-container .footer-link-container .footer-link {
        margin-bottom: 40px;
    }

        .footer-section-container .footer-link-container .footer-link h4 {
            color: #FFEA00;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 30px;
            position: relative;
        }

@media (min-width: 768px) {
    .footer-section-container .footer-link-container .footer-link h4 {
        margin-bottom: 40px;
    }
}

.footer-section-container .footer-link-container .footer-link h4::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 2px;
    background: #FFEA00;
    bottom: -9px;
    border-radius: 10px;
}

.footer-section-container .footer-link-container .footer-link .ul-container {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-section-container .footer-link-container .footer-link .ul-container li {
        margin-bottom: 10px;
    }

        .footer-section-container .footer-link-container .footer-link .ul-container li a {
            font-size: 14px;
            color: #ffffff;
            text-decoration: none;
            transition: all 0.5s;
        }

            .footer-section-container .footer-link-container .footer-link .ul-container li a.active {
                color: #FFEA00;
            }

            .footer-section-container .footer-link-container .footer-link .ul-container li a i {
                margin-right: 4px;
            }

            .footer-section-container .footer-link-container .footer-link .ul-container li a:hover {
                margin-left: 5px;
                color: #FFEA00;
            }

.footer-section-container .footer-link-container .footer-link .get-touch-footer p {
    margin-bottom: 5px;
}

.footer-section-container .footer-link-container .footer-link .get-touch-footer .call-number {
    font-size: 24px;
    color: #FFEA00;
    font-weight: 600;
}

@media (min-width: 991px) {
    .footer-section-container .footer-link-container .footer-link .get-touch-footer .call-number {
        font-size: 34px;
    }
}

.footer-section-container .footer-link-container .footer-link .get-touch-footer .app-download {
    margin-top: 20px;
}

    .footer-section-container .footer-link-container .footer-link .get-touch-footer .app-download img {
        max-width: 130px;
        height: 40px;
        cursor: pointer;
    }

.footer-section-container .footer-bottom-container {
    position: relative;
    padding-top: 20px;
}

    .footer-section-container .footer-bottom-container::before {
        content: "";
        background: transparent linear-gradient(90deg, #707070 0%, #2c2c2c 50%, #383838 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        height: 1px;
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 0;
    }

    .footer-section-container .footer-bottom-container .social-link ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .footer-section-container .footer-bottom-container .social-link ul li a {
            font-size: 14px;
            color: #ffffff;
        }

            .footer-section-container .footer-bottom-container .social-link ul li a:hover {
                color: #FFEA00;
            }

/*--------------------------------------------------------------
# Services Section (Home)
--------------------------------------------------------------*/
.our-services-container {
    background: url(../images/about2.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

    .our-services-container .feature-box {
        border: 1px solid #f2f2f2;
        box-shadow: 0px 0px 19px 1px rgba(199, 199, 199, 0.09);
        padding: 20px;
        min-height: 300px;
        margin-top: 10px;
        transition: ease all 0.35s;
        -moz-transition: ease all 0.35s;
        -o-transition: ease all 0.35s;
        -webkit-transition: ease all 0.35s;
        top: 0;
        position: relative;
        z-index: 1;
        -webkit-clip-path: polygon(0 0, 92% 0, 100% 11%, 100% 80%, 100% 100%, 20% 100%, 0 100%, 0% 20%);
        clip-path: polygon(0 0, 92% 0, 100% 11%, 100% 80%, 100% 100%, 20% 100%, 0 100%, 0% 20%);
        overflow: hidden;
        border-radius: 30px;
        width: 100%;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        cursor: pointer;
    }

@media (min-width: 991px) {
    .our-services-container .feature-box {
        min-height: 350px;
    }
}

@media (min-width: 1400px) {
    .our-services-container .feature-box {
        min-height: 300px;
    }
}

.our-services-container .feature-box.feature-mobile-app {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/home/app.jpg);
}

.our-services-container .feature-box.smart-logistics {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/home/services-software.jpg);
}

.our-services-container .feature-box.delivery-management {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/home/service3.png);
}

.our-services-container .feature-box::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/service-4.jpg);
    background-position: 50%;
    background-size: cover;
    opacity: 0;
    transition: all 0.45s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 5px;
    z-index: -1;
}

.our-services-container .feature-box::after {
    position: absolute;
    width: 100%;
    height: 0px;
    bottom: 0px;
    left: 0px;
    top: auto;
    content: "";
    background: rgba(0, 0, 0, 0.65);
    transition: 0.5s;
    z-index: -1;
    border-radius: 5px;
}

.our-services-container .feature-box:hover {
    top: -10px;
}

    .our-services-container .feature-box:hover::before {
        opacity: 1.5;
    }

    .our-services-container .feature-box:hover .feature-icon {
        background-color: #FFEA00;
        color: #000000 !important;
    }

    .our-services-container .feature-box:hover .feature-content .mobile-app-top h5 {
        color: #FFEA00;
    }

    .our-services-container .feature-box:hover .feature-content p {
        color: #ffffff;
    }

    .our-services-container .feature-box:hover::after {
        bottom: 0px;
        height: 100%;
    }

.our-services-container .feature-box .feature-icon {
    width: 70px;
    height: 70px;
    background: #FFEA00;
    color: #000000;
    text-align: center;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    position: relative;
    transition: ease all 0.35s;
    margin-bottom: 24px;
    margin-top: 15px;
}

    .our-services-container .feature-box .feature-icon::before {
        position: absolute;
        content: "";
        left: -8px;
        top: -8px;
        height: 100%;
        width: 100%;
        background: color-mix(in srgb, #FFEA00, transparent 80%);
        border-radius: 5px;
        transition: all 0.3s ease-out 0s;
        transform: translateZ(-1px);
    }

.our-services-container .feature-box .feature-content {
    height: 100%;
}

    .our-services-container .feature-box .feature-content .mobile-app-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }

        .our-services-container .feature-box .feature-content .mobile-app-top .download-app img {
            max-width: 80px;
            height: 24px;
            -o-object-fit: contain;
            object-fit: contain;
            margin-right: 1px;
        }

            .our-services-container .feature-box .feature-content .mobile-app-top .download-app img:last-child {
                margin-right: 0;
            }

        .our-services-container .feature-box .feature-content .mobile-app-top h5 {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 18px;
            margin-bottom: 0;
            color: #ffffff;
        }

    .our-services-container .feature-box .feature-content p {
        color: #ffffff;
        opacity: 0.9;
    }

.our-services-container .feature-box img.img-fluid.mobile-img {
    position: absolute;
    z-index: 0;
    width: 300px;
    right: -22px;
    bottom: -26px;
}

/*--------------------------------------------------------------
# Marqee Section (Home)
--------------------------------------------------------------*/
.marqee-section {
    background-color: #FFEA00;
    color: #000000;
    font-weight: 700;
    margin-bottom: 0;
    padding: 10px 0;
}

    .marqee-section .marquee-text marquee .marqee-flex {
        display: flex;
        gap: 15px;
        align-items: center;
        margin-top: 5px;
    }

        .marqee-section .marquee-text marquee .marqee-flex .marqee-box {
            font-size: 40px;
            text-transform: uppercase;
            color: #ffea00;
            -webkit-text-stroke: 2px #3c3c3c;
            font-family: sans-serif !important;
            font-weight: 800;
            letter-spacing: 1.1px;
        }

@media (min-width: 1200px) {
    .marqee-section .marquee-text marquee .marqee-flex .marqee-box {
        font-size: 50px;
    }
}

.marqee-section .marquee-text marquee .marqee-flex .marqee-box:hover {
    color: #3c3c3c;
    -webkit-text-stroke: unset;
}

.marqee-section .marquee-text marquee .marqee-flex .marqee-box img {
    margin-top: -10px;
    max-width: 50px;
}

/*--------------------------------------------------------------
# Logistics solutions Section (Home)
--------------------------------------------------------------*/
.logistics-solution-container {
    background: url(../images/section-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}

    .logistics-solution-container .content-bottom .content-part {
        border-bottom: 1px dashed #8e8989;
        padding: 24px 0;
    }

        .logistics-solution-container .content-bottom .content-part h4 {
            font-weight: 600;
            color: #000000;
        }

    .logistics-solution-container .stats-image-sec {
        position: relative;
    }

        .logistics-solution-container .stats-image-sec .stats-card {
            display: flex;
        }

            .logistics-solution-container .stats-image-sec .stats-card .about-card {
                background-color: #000000;
                color: #ffffff;
                min-height: 200px;
                justify-content: center;
                align-items: center;
                display: flex;
                border-top: 10px solid #FFEA00 !important;
                width: 100%;
                padding: 20px 10px;
                border-radius: 16px;
            }

@media (min-width: 991px) {
    .logistics-solution-container .stats-image-sec .stats-card .about-card {
        max-width: 200px;
        padding: 30px 10px;
    }
}

.logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item {
    display: flex;
    flex-direction: column;
}

    .logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item .stats-icon {
        width: -moz-fit-content;
        width: fit-content;
        padding: 15px 10px;
        border-radius: 10px;
        background-color: #FFEA00;
        margin: 0 auto;
        margin-bottom: 5px;
    }

@media (min-width: 767px) {
    .logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item .stats-icon {
        padding: 20px 15px;
    }
}

.logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item .stats-icon img {
    max-width: 40px;
}

@media (min-width: 575px) {
    .logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item .stats-icon img {
        max-width: 50px;
    }
}

.logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item .purecounter {
    font-size: 24px;
    font-weight: 500;
}

@media (min-width: 767px) {
    .logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item .purecounter {
        font-size: 30px;
    }
}

@media (min-width: 1200px) {
    .logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item .purecounter {
        font-size: 36px;
    }
}

.logistics-solution-container .stats-image-sec .stats-card .about-card .stats-item p {
    font-size: 14px;
    font-weight: 500;
}

@media (min-width: 991px) {
    .logistics-solution-container .stats-image-sec .card-position {
        transform: translate(20%, -2%);
        z-index: 2;
        background-color: transparent;
    }
}

.logistics-solution-container .stats-image-sec .card-position img {
    border-radius: 20px;
}

.logistics-solution-container .stats-image-sec .card-relative {
    position: relative;
    z-index: -1;
    background-color: transparent;
}

    .logistics-solution-container .stats-image-sec .card-relative img {
        border-radius: 20px;
    }

/*--------------------------------------------------------------
# How it works Section (Home)
--------------------------------------------------------------*/
.how-it-works {
    background: #FFEA00 url(../images/hero-bg-abstract.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

    .how-it-works::before {
        content: "";
        background: rgba(255, 235, 59, 0.88);
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .how-it-works .steps-container {
        margin-top: 30px;
    }

@media (min-width: 1400px) {
    .how-it-works .steps-container {
        margin-top: 32px;
    }
}

.how-it-works .steps-container .step-work-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    text-align: center;
    margin-bottom: 30px;
    padding: 15px;
    position: relative;
}

@media (min-width: 1200px) {
    .how-it-works .steps-container .step-work-container {
        margin-bottom: 0;
    }
}

.how-it-works .steps-container .step-work-container .line-item {
    display: none;
    position: absolute;
    transform: translateX(117px);
    /* background: rgba(0, 0, 0, 0.3); */
    width: 200px;
    height: 1px;
    margin: -12px;
    left: 24px;
    z-index: 0;
    border: 1px dashed rgba(0, 0, 0, 0.5);
}

@media (min-width: 992px) {
    .how-it-works .steps-container .step-work-container .line-item {
        display: block;
    }
}

.how-it-works .steps-container .step-work-container img,
.how-it-works .steps-container .step-work-container h4,
.how-it-works .steps-container .step-work-container span,
.how-it-works .steps-container .step-work-container p {
    position: relative;
    z-index: 1;
}

.how-it-works .steps-container .step-work-container img {
    width: 70px;
    height: 70px;
}

.how-it-works .steps-container .step-work-container h4 {
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    margin-bottom: 0;
}

.how-it-works .steps-container .step-work-container span {
    background-color: #000000;
    color: #ffffff;
    font-size: 14px;
    border-radius: 30px;
    min-width: 130px;
    padding: 8px 5px;
    font-weight: bold;
    position: relative;
}

.how-it-works .steps-container .step-work-container p {
    margin-bottom: 0;
    font-weight: 600;
}

/*--------------------------------------------------------------
# Counter and FAQ (Home)
--------------------------------------------------------------*/
.counter-faq-section {
    position: relative;
    padding: 20px 0 !important;
    /* background: 
 color-mix(in srgb, #000, transparent 20%); */
}

@media (max-width:756px){
    .counter-faq-section {
        padding: 0 !important;
    }
}

    .counter-faq-section .canada-bg {
        position: absolute;
        right: 0;
        display: none;
        top: 0;
        z-index: 0;
    }

@media (min-width: 1200px) {
    .counter-faq-section .canada-bg {
        display: block;
    }
}

.counter-faq-section .canada-bg img {
    max-width: 500px;
}

.counter-faq-section .counter-container {
    background-color: #000000;
    border-radius: 20px;
    padding: 40px 15px;
}

@media (min-width: 1200px) {
    .counter-faq-section .counter-container {
        transform: translate(10px, -60px);
    }
}

.counter-faq-section .counter-container .counter-box .counter-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    margin-bottom: 15px;
}

    .counter-faq-section .counter-container .counter-box .counter-flex .top-arrow {
        margin-right: 8px;
    }

        .counter-faq-section .counter-container .counter-box .counter-flex .top-arrow i {
            font-size: 54px;
            color: #FFEA00;
        }

    .counter-faq-section .counter-container .counter-box .counter-flex .value-number .purecounter {
        color: #ffffff;
        font-size: 70px;
        font-weight: 700;
    }

@media (min-width: 1800px) {
    .counter-faq-section .counter-container .counter-box .counter-flex .value-number .purecounter {
        font-size: 80px;
    }
}

.counter-faq-section .counter-container .counter-box .counter-flex .value-number .alphabet {
    color: #FFEA00;
    font-size: 60px;
    font-weight: bold;
}

.counter-faq-section .counter-container .counter-box p {
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    opacity: 0.8;
}

.counter-faq-section .faq-section .canada-map img {
    max-width: 300px;
}

.counter-faq-section .faq-section .faq-container .accordion .accordion-item {
    border: none !important;
}


    /* .counter-faq-section .faq-section .faq-container .accordion .accordion-item {
  border-bottom: 1px dashed #dee2e6;
} */
    .counter-faq-section .faq-section .faq-container .accordion .accordion-item .accordion-header .accordion-button {
        background: #fff;
        border-radius: 26px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

        .counter-faq-section .faq-section .faq-container .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
            font-weight: 700;
            letter-spacing: 1.1px;
            color: #000000;
            background-color: #FFEA00;
            box-shadow: unset;
        }

        .counter-faq-section .faq-section .faq-container .accordion .accordion-item .accordion-header .accordion-button span.count-no {
            margin-right: 15px;
            font-size: 16px;
        }

        .counter-faq-section .faq-section .faq-container .accordion .accordion-item .accordion-header .accordion-button span.questions {
            font-size: 14px;
            font-weight: 600;
            margin-right: 4px;
        }

    .counter-faq-section .faq-section .faq-container .accordion .accordion-item .accordion-content .accordion-body p {
        font-size: 14px;
        font-weight: 500;
    }

    .counter-faq-section .faq-section .faq-container .accordion .accordion-item .accordion-header .accordion-button {
        align-items: normal !important;
    }

/*--------------------------------------------------------------
# Contact Us (Home)
--------------------------------------------------------------*/
.contact-container {
    background: #ffffff url(../images/faq-bg.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-height: 300px;
}

@media (min-width: 1200px) {
    .contact-container {
        min-height: 300px;
    }
}

/*--------------------------------------------------------------
#  Request a Quote  (Home)
--------------------------------------------------------------*/
.request-quote-container {
    position: relative;
}

    .request-quote-container .contact-tab-container {
        background-color: #FFEA00;
        padding: 20px;
        border-radius: 20px;
        position: relative;
    }

@media (min-width: 1200px) {
    .request-quote-container .contact-tab-container {
        transform: translate(10px, -130px);
        padding: 30px 30px 0 30px;
    }
}

.request-quote-container .contact-tab-container .nav-tab-container {
    flex-wrap: nowrap;
    overflow: auto;
}

@media (min-width: 1200px) {
    .request-quote-container .contact-tab-container .nav-tab-container {
        transform: translate(10px, -50px);
    }
}

.request-quote-container .contact-tab-container .nav-tab-container .nav-item .nav-link {
    padding: 15px 10px;
    background-color: #ffffff;
    margin-right: 15px;
    min-width: 160px;
    text-align: center;
    border-radius: 30px;
    line-height: normal;
    font-size: 13px;
    color: #333;
    border: 1px solid #b1b1b1;
}

    .request-quote-container .contact-tab-container .nav-tab-container .nav-item .nav-link.active {
        background-color: #000000;
        color: #ffffff;
        border: 1px solid #000000;
    }

@media (min-width: 1200px) {
    .request-quote-container .contact-tab-container .content-tab-container {
        transform: translate(0px, -40px);
    }
}

.request-quote-container .contact-tab-container .content-tab-container .tab-pane .personal-data-container h5 {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .request-quote-container .contact-tab-container .content-tab-container .tab-pane .personal-data-container h5 i {
        margin-right: 5px;
    }

/*--------------------------------------------------------------
//<!--Start rotateme animation
--------------------------------------------------------------*/
.custom-radio-button {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    /* Optional for responsiveness */
}

    .custom-radio-button .form-check {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .custom-radio-button .form-check .form-check-input {
            width: 20px;
            height: 20px;
            margin-top: -1px;
            margin-right: 4px;
        }

            .custom-radio-button .form-check .form-check-input:focus {
                border-color: #ffffff;
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
            }

            .custom-radio-button .form-check .form-check-input:checked {
                background-color: #000000;
                border-color: #000000;
            }

.splash-service-main {
    position: relative;
    overflow: hidden;
}

    .splash-service-main::before {
        content: "";
        background: color-mix(in srgb, #000, transparent 20%);
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .splash-service-main .bg-video-container {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        z-index: 1;
    }

        .splash-service-main .bg-video-container .custom-video {
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }

    .splash-service-main .app-z-index {
        z-index: 3;
        position: relative;
    }

        .splash-service-main .app-z-index h6 {
            margin-bottom: 15px;
            font-size: 20px;
            position: relative;
        }

            .splash-service-main .app-z-index h6::after {
                content: "------\f5ea";
                position: absolute;
                height: 1px;
                /* background-color: #fff; */
                width: 100px;
                top: 0px;
                font-family: bootstrap-icons !important;
                color: #FFEA00;
            }

@media (max-width: 575px) {
    .splash-service-main .app-z-index h6::after {
        display: none;
    }
}

.splash-service-main .app-z-index .benefits-list {
    list-style: none;
    padding: 0;
}

@media (min-width: 767px) {
    .splash-service-main .app-z-index .benefits-list {
        -moz-column-count: 2;
        column-count: 2;
        -moz-column-gap: 3rem;
        column-gap: 3rem;
    }
}

.splash-service-main .app-z-index .benefits-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #ffffff;
}

    .splash-service-main .app-z-index .benefits-list li::before {
        content: "✔";
        position: absolute;
        left: 0;
        top: 0;
        color: #FFEA00;
        font-weight: bold;
        font-size: 1rem;
    }

.advantage-thumb {
    position: relative;
}

    .advantage-thumb .thumb1 {
        position: relative;
        z-index: 1;
    }

        .advantage-thumb .thumb1 img {
            max-width: 400px;
            width: 100%;
            height: auto;
        }

@media (min-width: 1600px) {
    .advantage-thumb .thumb1 img {
        max-width: 500px;
    }
}

.advantage-thumb .shape1 {
    position: absolute;
    bottom: 0;
    right: -50px;
}

    .advantage-thumb .shape1 img {
        max-width: 100%;
    }

.about-container {
    position: relative;
    overflow: hidden;
    background: url(../images/hero-bg-abstract.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 3;
}

    .about-container::before {
        content: "";
        background: color-mix(in srgb, #ffffff, transparent 20%);
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .about-container .w-md-100 {
        position: relative;
        z-index: 2;
    }

    .about-container .about-icon-box {
        position: relative;
    }

        .about-container .about-icon-box .feature-about {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .about-container .about-icon-box .feature-about .info-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 30px;
                margin-bottom: 10px;
                transition: all 520ms ease;
                border-radius: 5px;
                height: 60px;
                width: 60px;
                background-color: #FFEA00;
            }

            .about-container .about-icon-box .feature-about .info-title {
                font-weight: 700;
                font-size: 18px;
                color: #000000;
                margin-bottom: 0;
            }

.main-about-image {
    position: absolute;
    right: 0;
    padding: 0;
    top: -140px;
    height: 100dvh;
    z-index: 2;
}

/*-----------------Our Equipment  Section
--------------------------------------------------------------*/
.our-equipment-container {
    overflow: hidden;
    background: url(../images/about-5.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 0 20px;
}

@media (min-width: 1200px) {
    .our-equipment-container {
        padding: 0;
    }
}

.our-equipment-container::before {
    content: "";
    background: color-mix(in srgb, #000, transparent 0%);
    position: absolute;
    inset: 0;
    z-index: 1;
}

.our-equipment-container .equipment-container {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

    .our-equipment-container .equipment-container .title-container .main-title {
        color: #ffffff;
    }

    .our-equipment-container .equipment-container .feature-style-one-items {
        margin: 0;
        grid-template-columns: 1fr;
        gap: 30px;
        display: grid;
        height: 100%;
    }

@media (min-width: 768px) {
    .our-equipment-container .equipment-container .feature-style-one-items {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .our-equipment-container .equipment-container .feature-style-one-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item {
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 30px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: #000000;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item {
        border: unset;
    }
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item .icon img {
    margin-bottom: 50px;
    height: 60px;
    position: unset;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item h4 {
    font-size: 18px;
    font-weight: 600;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item p {
    margin-bottom: 0;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item .truck-left {
    position: absolute;
    left: -100px;
    bottom: 0;
    transition: all 0.35s ease-in-out;
    opacity: 0;
    visibility: hidden;
    max-width: 170px;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 40%;
    background: #eeeeee1a;
    /* background: rgba(255, 229, 0, 0.25); */
    z-index: -1;
    transition: all 0.35s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item:hover::after {
    width: 100%;
    visibility: visible;
    opacity: 1;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item:hover .truck-left {
    left: 0;
    visibility: visible;
    opacity: 1;
    transition-delay: 0.2s;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item.active::after {
    width: 100%;
    visibility: visible;
    opacity: 1;
}

.our-equipment-container .equipment-container .feature-style-one-items .feature-style-one-item.active .truck-left {
    left: 0;
    visibility: visible;
    opacity: 1;
    transition-delay: 0.2s;
}

.svg-white {
    filter: brightness(0) invert(1);
    /* makes the SVG white */
}

/*-----------------Our Equipment  Section ---------------------
--------------------------------------------------------------*/
.hero-content-section {
    position: relative;
    background: url(../images/hero-bg-abstract.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

    .hero-content-section .truck-bg {
        position: absolute;
        z-index: 4;
        /* top: 20px; */
        bottom: -73px;
        left: -17px;
    }

        .hero-content-section .truck-bg img {
            max-width: 250px;
        }

    .hero-content-section::before {
        content: "";
        background: color-mix(in srgb, #ffffff, transparent 20%);
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .hero-content-section .home-truck-image {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 3;
    }

        .hero-content-section .home-truck-image img {
            animation: fadeLeftRight 10s linear infinite;
            max-width: 300px;
        }

    .hero-content-section .home-wrapper-container {
        position: relative;
        z-index: 10;
        border-radius: 10px;
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background: #FCFC2F;
        background: linear-gradient(135deg, #FFD710, #FCFC2F);
    }

        .hero-content-section .home-wrapper-container .style-column:last-child .splash-service-content {
            border-right: none;
        }

        .hero-content-section .home-wrapper-container .style-column .splash-service-content {
            z-index: 2;
            text-align: left;
            padding: 50px 30px;
            position: relative;
            border-right: 1px solid rgba(255, 255, 255, 0.1019607843);
            height: 100%;
            transition: 0.3s;
            overflow: hidden;
            color: #000000;
        }

            .hero-content-section .home-wrapper-container .style-column .splash-service-content img.wave-top {
                width: 100%;
                position: absolute;
                bottom: 0;
                -o-object-fit: cover;
                object-fit: cover;
                /* top: 0; */
                z-index: 1;
            }

            .hero-content-section .home-wrapper-container .style-column .splash-service-content .content-part {
                position: relative;
                z-index: 1;
            }

            .hero-content-section .home-wrapper-container .style-column .splash-service-content::before {
                content: "";
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                background: #000000;
                z-index: -1;
                position: absolute;
                border-radius: 10px;
                opacity: 0;
                transition: 0.3s;
                color: #ffffff;
            }

            .hero-content-section .home-wrapper-container .style-column .splash-service-content::after {
                content: "";
                width: 80%;
                height: 50%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                background: var(--color-darker);
                bottom: 0;
                border-radius: 0;
                filter: blur(10px);
                z-index: -5;
                opacity: 0;
                transition: 0.3s;
            }

            .hero-content-section .home-wrapper-container .style-column .splash-service-content .icon img {
                max-width: 50px;
                margin-bottom: 20px;
            }

            .hero-content-section .home-wrapper-container .style-column .splash-service-content h4 {
                font-size: 20px;
                font-weight: 600;
            }

            .hero-content-section .home-wrapper-container .style-column .splash-service-content:hover {
                transform: translateY(-20px) scale(1.03);
                border-color: transparent;
                color: #ffffff;
            }

                .hero-content-section .home-wrapper-container .style-column .splash-service-content:hover::before {
                    opacity: 1;
                    transform: scale(1);
                }

                .hero-content-section .home-wrapper-container .style-column .splash-service-content:hover::after {
                    opacity: 1;
                }

                .hero-content-section .home-wrapper-container .style-column .splash-service-content:hover img {
                    filter: brightness(0) invert(1);
                }

    .hero-content-section .app-container .device-wrapper {
        position: relative;
    }

        .hero-content-section .app-container .device-wrapper .device {
            position: relative;
        }

            .hero-content-section .app-container .device-wrapper .device .device-macbook-screen {
                position: absolute;
                top: 6.8%;
                left: 12.3%;
                width: 75.1%;
                height: 81.1%;
                -o-object-fit: cover;
                object-fit: cover;
            }

            .hero-content-section .app-container .device-wrapper .device.device-iphone-x {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 22%;
                border-radius: 2.75rem;
                box-shadow: 0px 12px 15px rgba(140, 152, 164, 0.1);
            }

                .hero-content-section .app-container .device-wrapper .device.device-iphone-x .device-iphone-x-screen {
                    position: absolute;
                    top: 2.4%;
                    left: 4%;
                    width: 92.4%;
                    height: 96%;
                    -o-object-fit: cover;
                    object-fit: cover;
                    border-radius: 0.5rem;
                }

/* ============================================================== 
    # Testimonial Style Five
=================================================================== */
.tesimonial-section {
    position: relative;
    background: #000 url(../images/about-bg.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Custom bullet size and spacing */
    /* Active bullet customization */
}

    .tesimonial-section .truck-bg {
        position: absolute;
        z-index: 4;
        /* top: 20px; */
        bottom: -73px;
        left: -17px;
    }

        .tesimonial-section .truck-bg img {
            max-width: 250px;
        }

    .tesimonial-section .testimonial-carousel {
        overflow: hidden;
        border-radius: 10px;
    }

        .tesimonial-section .testimonial-carousel .swiper-wrapper .tesimonial-item .info {
            background: #ffffff;
            padding: 40px;
        }

            .tesimonial-section .testimonial-carousel .swiper-wrapper .tesimonial-item .info h4 {
                margin-bottom: 10px;
            }

            .tesimonial-section .testimonial-carousel .swiper-wrapper .tesimonial-item .info p {
                color: #444444;
                font-size: 19px;
            }

            .tesimonial-section .testimonial-carousel .swiper-wrapper .tesimonial-item .info .d-flex {
                justify-content: space-between;
                margin-bottom: 30px;
            }

                .tesimonial-section .testimonial-carousel .swiper-wrapper .tesimonial-item .info .d-flex > i {
                    font-size: 50px;
                    line-height: 1;
                    color: #efefef;
                }

            .tesimonial-section .testimonial-carousel .swiper-wrapper .tesimonial-item .info i {
                color: #FFEA00;
            }

        .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom {
            background: #000000;
            padding: 30px;
            padding-top: 0;
        }

            .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom h4 {
                color: #ffffff;
                margin-bottom: 5px;
            }

            .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom span {
                color: #FFEA00;
            }

            .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom .thumb {
                display: inline-block;
                position: relative;
                top: -35px;
                margin-bottom: -65px;
                padding: 10px;
                background: #000000;
                border-radius: 50%;
                z-index: 1;
            }

                .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom .thumb::before,
                .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom .thumb::after {
                    position: absolute;
                    content: "";
                    height: 40px;
                    width: 20px;
                }

                .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom .thumb::before {
                    left: -16px;
                    top: -5px;
                    border-bottom-right-radius: 15px;
                }

                .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom .thumb::after {
                    right: -16px;
                    top: -5px;
                    border-bottom-left-radius: 15px;
                }

                .tesimonial-section .testimonial-carousel .swiper-wrapper .bottom .thumb img {
                    height: 60px;
                    width: 60px;
                    border-radius: 50%;
                    border: 2px solid rgba(255, 255, 255, 0.3);
                }
.swiper-pagination {
    bottom: -8px !important; 
}

.tesimonial-section .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background-color: #000000;
    opacity: 1;
    margin: 0 6px;
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
}

    .tesimonial-section .swiper-pagination-bullet-active {
        background-color: #FFEA00;
        transform: scale(1.3);
        /* enlarge the active bullet */
        box-shadow: 0 0 5px rgba(255, 230, 0, 0.6);
    }

    .tesimonial-section .testimonial-five-navs {
        display: flex;
        justify-content: flex-end;
        gap: 11px;
    }

        .tesimonial-section .testimonial-five-navs div {
            background: #FFEA00;
            display: inline-block;
            height: 50px;
            width: 50px;
            text-align: center;
            line-height: 45px;
        }

            .tesimonial-section .testimonial-five-navs div:first-child {
                background: #ffffff;
            }

            .tesimonial-section .testimonial-five-navs div::after {
                display: none;
            }

.call-action-container {
    overflow: hidden;
    position: relative;
}

    .call-action-container::before {
        content: "";
        background: color-mix(in srgb, #000000, transparent 30%);
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .call-action-container .call-bg {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        z-index: 1;
    }

    .call-action-container .container-xl {
        position: relative;
        z-index: 3;
    }

        .call-action-container .container-xl .call-box {
            color: #ffffff;
        }

            .call-action-container .container-xl .call-box p {
                margin-bottom: 0;
            }

    .call-action-container .call-us-truck {
        position: absolute;
        /* top: 0; */
        max-width: 220px;
        right: 0;
        z-index: 2;
        bottom: 0;
    }

        .call-action-container .call-us-truck img {
            animation: fadeLeftRight 10s linear infinite;
        }

.city-delivery {
    position: relative;
    z-index: 4;
}

    .city-delivery .bg-shape1 {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 1100px;
    }

    .city-delivery .bg-shape2 {
        position: absolute;
        bottom: 10px;
        left: 28%;
        animation: bicycle 22s linear infinite;
        max-width: 150px;
    }

    .city-delivery .bg-shape3 {
        position: absolute;
        bottom: 10px;
        right: 21%;
        animation: micro 22s linear infinite;
        max-width: 250px;
    }

#map {
    display: block;
    /* width: 95%; */
    height: 350px;
    margin: 0 auto;
    box-shadow: 0px 5px 20px #ccc;
}

.map-container {
    background: url("../images/faq-bg.png");
    background-size: cover;
    background-position: center;
    position: relative;
    /* 03. SLider Area */
}

    .map-container .cities-container .city-carousel-box {
        background: #ffffff url("../images/canada.svg");
        background-size: cover;
        background-position: bottom;
        display: flex;
        align-items: center;
        border: 1px solid #eee;
        flex-direction: column;
        padding: 15px;
        border-radius: 5px;
        min-height: 150px;
        justify-content: center;
    }

        .map-container .cities-container .city-carousel-box .city-icon {
            margin-bottom: 10px;
        }

        .map-container .cities-container .city-carousel-box h4 {
            font-size: 16px;
            text-transform: uppercase;
            margin-bottom: 0;
            text-align: center;
        }

    .map-container .cities-container .owl-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

        .map-container .cities-container .owl-nav button.owl-prev {
            background-color: #ffffff !important;
        }

        .map-container .cities-container .owl-nav button.owl-prev,
        .map-container .cities-container .owl-nav button.owl-next {
            background: none;
            border: none;
            padding: 0;
            width: 50px;
            height: 50px;
            position: relative;
            background-color: #FFEA00;
        }

            .map-container .cities-container .owl-nav button.owl-prev i,
            .map-container .cities-container .owl-nav button.owl-next i {
                display: none;
            }

            .map-container .cities-container .owl-nav button.owl-prev::before,
            .map-container .cities-container .owl-nav button.owl-next::before {
                content: "";
                display: block;
                width: 27px;
                height: 10px;
                background-repeat: no-repeat;
                background-size: contain;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .map-container .cities-container .owl-nav button.owl-prev::before {
                background-image: url('data:image/svg+xml;utf8,<svg width="34" height="10" viewBox="0 0 27 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27 9H3L9.9 1" stroke="%23232323" stroke-width="3" /></svg>');
            }

            .map-container .cities-container .owl-nav button.owl-next::before {
                background-image: url('data:image/svg+xml;utf8,<svg width="34" height="10" viewBox="0 0 27 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 9H24L17.1 1" stroke="%23ffffff" stroke-width="3" /></svg>');

            }
.font-weight-500 {
    font-weight: 500;
}

.region-link {
    color: #000;
}

.region-click {
    font-weight: 600;
    cursor: pointer;
    color: #ffc107; 
}

.link-color {
    color: #ffc107;
}

    .region-click:hover {
        text-decoration: underline;
        color: #ffca28; 
    }



.form-control.is-invalid {
    border: 2px solid red !important;
}

.modal-save-btn {
    float: right;
}

.weight-modal .modal-footer {
    border-top: 0;
}

.iotasol-link {
    color: #FFEA00;
}

.weight-calculate-btn:hover {
    background-color: #000 !important;
    color: #fff;
}

.gmnoprint {
    display: none;
}

.section-heading {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    letter-spacing: 0.5px;
    position: relative;
}

.courier-logo img {
    height: 100px;
}

.courier-logo-sec {
    background: #fff;
}

@media (min-width:768px) {
    .section-heading {
        font-size: 26px;
    }

    .courier-logo-sec {
        -webkit-clip-path: polygon(0 0, 97% 0, 100% 11%, 100% 80%, 100% 100%, 20% 100%, 0 100%, 0% 20%) !important;
        clip-path: polygon(0 0, 97% 0, 100% 11%, 100% 80%, 100% 100%, 20% 100%, 0 100%, 0% 20%) !important;
    }

    .courier-logo img {
        height: 120px;
    }

    .courier-logo-text {
        font-size: 16px !important;
        font-weight: 300;
    }

    .courier-logo-sec {
        padding: 40px 20px !important;
    }
}

.courier-logo-sec {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 30px;
    min-height: 300px;
    -webkit-clip-path: polygon(0 0, 92% 0, 100% 11%, 100% 80%, 100% 100%, 20% 100%, 0 100%, 0% 20%);
    clip-path: polygon(0 0, 92% 0, 100% 11%, 100% 80%, 100% 100%, 20% 100%, 0 100%, 0% 20%);
}


.courier-logo-text {
    font-size: 14px;
    line-height: 1.8;
}

.theme-arrow-btn {
    display: inline-flex;
    align-items: center;
}

.theme-arrow {
    margin-left: 8px;
}

.textarea-control {
    height: 150px;
}

.form-message {
    margin-top: 15px;
    font-weight: bold;
}


#dropdownMenu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
}

.dropdown-item {
    font-size: 12px;
    color: #000;
}

    .dropdown-item.active,
    .dropdown-item:active {
        color: #000;
        font-weight: 500;
        text-decoration: none;
        background-color: #f6bf0b14 !important;
    }

    .dropdown-item:hover {
        background-color: #f6bf0b14 !important;
    }


/* Default fully rounded input */
#dropdownInput {
    transition: border-radius 0.2s ease;
}

/* Dropdown menu — limit height and square top when open */
#dropdownMenu {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /*border-radius: 0 0 20px 20px;  Default */
    transition: border-radius 0.2s ease;
}

#dropdownArrow {
    font-size: 14px !important;
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.toaster {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4caf50;
    color: white;
    border-radius: 4px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* ⛔ Prevent blocking clicks */
    padding: 0;
    /* Default to 0 when hidden */
}

    .toaster.show {
        opacity: 1;
        pointer-events: auto;
        /* ✅ Allow interaction if needed */
        padding: 10px 15px;
    }

    .toaster.error {
        background: #e74c3c;
    }

/* Apply red border only after submit (was-validated) */
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
    box-shadow: none;
}

    .was-validated .form-control:invalid:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    /* Optional: Make asterisk red when invalid */
    .was-validated .form-control:invalid ~ .website-label span {
        color: #dc3545 !important;
    }

.margin-right-2rem {
    margin-right: 2rem;
}


/* Rounded scrollbar only for the cargo dropdown menu */
#dropdownMenu::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#dropdownMenu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#dropdownMenu::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 10px;
}

    #dropdownMenu::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

/* Firefox support */
#dropdownMenu {
    scrollbar-width: thin;
    scrollbar-color: #999 #f1f1f1;
}

.alberta-map-bg {
    /* background: #fee93b; */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info {
    height: 400px; /* adjust based on your layout */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Initially show only limited lines */
.testimonial-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: all 0.3s ease;
}

    /* Expanded view with scroll, but height of card remains fixed */
    .testimonial-text.expanded {
        -webkit-line-clamp: unset;
        overflow-y: auto;
    }

.read-more-btn {
    font-size: 0.85rem;
    color: #ed5a00;
    background: none;
    border: none;
    cursor: pointer;
    align-self: flex-start;
}

.map-main-title {
    font-size: 16px;
    font-weight: 600;
}

@media(min-width:768px) {
    .map-main-title {
        font-size: 24px;
    }
}

.accordion-collapse.accordion-content.collapse.show {
    top: -6px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 0px 0px 20px 20px;
}

.accordion-button:not(.collapsed) {
    border-radius: 20px 20px 0px 0px !important;
}

.accordion-button.collapsed {
    border-radius: 20px !important;
    /* or your preferred value */
}

.footerMap img {
    height: 220px;
}

.footerMap{
    display:flex;
    justify-content:center;
}



/* 📱 Show only on small screens (0–576px) */

    .auth-buttons {
        position: fixed;
        top: 50%;
        right: -80px; /* start slightly off-screen */
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 9999;
        animation: slideIn 1s ease forwards;
    }

        .auth-buttons a {
            text-decoration: none;
            cursor:pointer;
            text-align: center;
            border-radius: 0px 8px 8px 0px; /* rounded left side */
            padding: 16px 12px;
            font-weight: 700;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
            transition: all 0.3s ease;
            min-height: 90px;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
            font-size: 14px;
        }

        /* 🟡 Sign Up – Yellow background */
        .auth-buttons .btn-signup {
            background-color: #FFEA00;
            display: inline-block;
            color: #000;
        }

        /* ⚪ Login – White background with yellow border */
        .auth-buttons .btn-login {
            background-color: #fff;
            display: inline-block;
            color: #000;
        }

        .auth-buttons .btn-quote {
            background-color: #FFEA00;
            display: inline-block;
            color: #000;
        }

        /* Hover effects */
        .auth-buttons a:hover {
            transform: rotate(180deg) scale(1.07);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 234, 0, 0.8);
        }

    /* Slide-in animation */
    @keyframes slideIn {
        0% {
            right: -100px;
            opacity: 0;
        }

        100% {
            right: 0;
            opacity: 1;
        }
    }
/*@media (max-width: 576px) {
    .auth-buttons .btn-signup,
    .auth-buttons .btn-login {
        display: inline-block;
    }
}*/

/* Modal overlay */
.modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: none; /* keep it hidden by default */
    justify-content: center;
    align-items: center;
}


/* Modal box */
.modal-content {
    background: #fff;
    border-radius: 20px;
    max-width: 650px;
    width: 90%;
    padding: 40px 35px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    animation: zoomFadeIn 0.5s ease forwards;
    transform: scale(0.8);
    opacity: 0;
}

/* Zoom + Fade Animation */
@keyframes zoomFadeIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Close button */
.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #333;
    transition: all 0.3s ease;
}

    .close:hover {
        color: #FFEA00;
    }

/* Icon */
.modal-icon {
    font-size: 50px;
    color: #FFEA00;
    margin-bottom: 20px;
}

/* Header */
.modal-body h3 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #333;
}

/* Description */
.modal-body p {
    font-size: 18px;
    color: #555;
    margin-bottom: 35px;
    line-height: 1.6;
}

/* Buttons */
.modal-buttons a {
    display: inline-block;
    margin: 10px 15px;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.4s ease;
}

/* Sign Up Button */
.modal-buttons .btn-signup {
    background: linear-gradient(135deg, #FFEA00, #FFD700);
    color: #000;
    box-shadow: 0 5px 15px rgba(255, 234, 0, 0.4);
}

    .modal-buttons .btn-signup:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 20px rgba(255, 234, 0, 0.6);
    }

/* Sign In Button */
.modal-buttons .btn-login {
    background: #333;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

    .modal-buttons .btn-login:hover {
        background: #555;
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    }

/* Responsive */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        padding: 30px 25px;
    }

    .modal-body h3 {
        font-size: 24px;
    }

    .modal-body p {
        font-size: 16px;
    }

    .modal-buttons a {
        width: 100%;
        margin: 10px 0;
    }
}

.customer-auth-btn {
    line-height: 1.1 !important;
    padding: 0.6rem 0.5rem;
    font-weight: 600 !important;
    border-radius: 15px !important;
    justify-content: center !important;
}

@media (max-width: 430px) {
    #pills-tab {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

        #pills-tab .nav-item {
            width: 100% !important;
        }

            #pills-tab .nav-item .nav-link{
                margin:0!important;
            }
}