@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
:root{
    --text-color: #343f52;
    --bs-dark: #000000;
    --h-color:#343f52;
    --bs-body-font-size: 1rem;
    --bs-primary:#ccec44;
    --box-shadow-lg:0 .25rem 1.75rem rgba(30,34,40,.07);
    --btn-shadow:0 0.25rem 0.75rem rgb(30 34 40 / 15%);
    --translate-y:translateY(-.15rem);
    /* --font-family: "Manrope",sans-serif;  */
    --font-family: 'Inter', sans-serif; 
    /* font-family: 'Bitter', serif;
font-family: 'Roboto', sans-serif; */

    --bs-info :#7d46dd;
    --bs-danger:#e2626b;
    --section-bg:#9fe8700d;
    --h-font-family:'Sora',Inter,sans-serif;
    --bs-success:#198754;
    --bs-outline-primary:#7f009523;
    --bs-outline-info:#7d46dd25;
    --bs-outline-danger:#e2626b1c;
    --bs-outline-success:#1987542f;
    --price-card-shadow:0 0 0 0.05rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
    --font-size-8rem:0.8rem;
    --font-size-1rem:0.9rem;
    --font-size-1remfixed:1rem;
    --bs-white:white;
}

.automation-section {
    padding: 80px 0;
}

.main-title {
    color: #004d6b !important;
    font-size: 2.5rem;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
    line-height: 1.2;
}



.logo {
    height: 30px;
    /* Mobile height */
}

@media (min-width: 992px) {

    /* Using lg breakpoint for desktop */
    .logo {
        height: 37px;
        /* Desktop height */
    }
}

/* Hero Section Height */
.hero-section {
    min-height: 820px;
    /* Mobile height */
    /* height: 84vh; */
    max-width: 1920px;
}

@media (min-width: 992px) {

    /* Using lg breakpoint */
    .hero-section {
        min-height: 530px;
        /* Mobile height */
        /* height: 80vh; */
    }
}

/* Services Section Styles */

/* Enhanced Service Section Styles */
.section-heading {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.banner-subtitle {
    font-size: 1.05rem;
    color: #666666;
    max-width: 810px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 55px;
    margin-top: 15px;
}


.banner-subtitle.hero {
    margin-top: 9px;
    font-size: 1.1rem;
    margin-bottom: 20px !important;
    font-weight: 400 !important;

}

.feature-card {
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #ececece6;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}



.feature-card .icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(204, 236, 68, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}



.feature-card .icon-wrapper i {
    font-size: 2rem;
    color: #4a6741;
    transition: all 0.3s ease;
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.25rem 0 1rem;
    color: #333;
    transition: color 0.3s ease;
}


.feature-card p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    text-align: left;
}

.feature-list li {
    margin-bottom: 0.5rem;
    color: #505050;
    font-size: 0.9rem;
}

.feature-list li img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(15%) saturate(1135%) hue-rotate(70deg) brightness(92%) contrast(89%);
    width: 16px;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .section-heading {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .feature-card {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
    }

    .feature-card .icon-wrapper {
        width: 65px;
        height: 65px;
    }

    .feature-card .icon-wrapper i {
        font-size: 1.75rem;
    }

    .feature-list {
        margin-top: 0.75rem;
    }

    .mobile-search-wrapper.search-expanded #search-input {
        display: inline-block !important;
        /* Force display */
        width: 150px;
        /* Or desired width on mobile */
        max-width: none;
        /* Override desktop max-width */
        margin-left: 5px;
        /* Adjust spacing */
    }
}

.contact-form .form-control {
    color: rgb(48, 48, 48);
    background-color: rgb(253, 253, 253);
    background-image: none;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(138, 138, 138);
    border-image: initial;
    border-radius: 10px;}



.services-section {
    padding: 4rem 0 3rem 0;
    /* background-color: #eef2f4; */
    position: relative;
    overflow: hidden;
}

.select-city {
    font-weight: 700;
    font-size: 1.2rem;
    color: #000000;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.section-badge {
    background-color: rgba(204, 236, 68, 0.2);
    color: #4a6741;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 1rem;
    border-radius: 50px;
}



.section-subtitle {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.service-item {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .125);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}



.service-icon {
    width: 70px;
    height: 70px;
    background-color: rgba(204, 236, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.service-image {
    width: 100%;
    height: 230px;
    object-fit: cover;
    margin-bottom: 14px;
    display: block;
}



.service-icon i {
    font-size: 1.75rem;
    color: #4a6741;
}

.service-content {
    padding: 0.5rem 1.2rem 1.2rem 1.2rem;
}

.service-content h3 {
    font-size: 1.26rem;
    font-weight: 650;
    margin-bottom: 0.9rem;
    color: #212529;
}

.service-content p {
    font-size: 0.9rem;
    color: #666666;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
}

.service-features li {
    position: relative;
    padding-left: 1.8rem !important;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #666666;
}

.service-features li::before {
    content: "";
    position: absolute;
    left: 0;
    background-image: url("{{ static_asset('frontend/images/check.svg') }}");
    background-repeat: no-repeat;
    filter: brightness(0) saturate(100%) invert(28%) sepia(15%) saturate(1135%) hue-rotate(70deg) brightness(92%) contrast(89%);
    background-size: contain;
    width: 19px;
    height: 19px;
}

.services-cta {
    text-align: center;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.services-cta .btn {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}

.services-cta .btn-primary {
    background-color: #4a6741;
    border-color: #4a6741;
}

.services-cta .btn-primary:hover {
    background-color: #3a5331;
    border-color: #3a5331;
}

.services-cta .btn-outline-primary {
    color: #4a6741;
    border-color: #4a6741;
}

.services-cta .btn-outline-primary:hover {
    background-color: #4a6741;
    color: white;
}



.get-started-cta-button {
    display: inline-flex;
    align-items: center;
    height: 41px;
    padding: 0rem 9px 0rem 13px;
    background-image: linear-gradient(#e3f530, #ccec44);
    border: 1px solid rgba(197, 213, 31, 0.8) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    color: #000000;
    border-radius: 50px;
    text-decoration: none;
    font-family: Inter, sans-serif;
    font-weight: 800;
    font-size: 1.16rem;
    line-height: 1.5;
    transition: transform 0.25s ease, background-image 0.25s ease, border-radius 0.25s ease;
    cursor: pointer;
}

.get-started-cta-button:hover {
    background-image: linear-gradient(#e3f530, rgb(215, 255, 39));
    color: #000000;
    border-radius: 1px;
    transform: translate(0px) skew(-10deg, 0deg);
}

.get-started-cta-button .icon-wrapper-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5em;
    background-color: #000000;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    transition: background-color 0.3s ease;
    /* Smooth transition for icon background */
}

@media (max-width: 768px) {
    .get-started-cta-button .icon-wrapper-cta {
        width: 23px !important;
        height: 23px !important;
    }
}


/* Optional: Keep icon circle black on hover or change it */
/* .get-started-cta-button:hover .icon-wrapper-cta { */
/*     background-color: #222222; /* Slightly lighter black on hover if desired */
/* } */

.get-started-cta-button .icon-wrapper-cta img {
    width: 66%;
    height: auto;
    padding-right: 1px;
}



@media (max-width: 992px) {


    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .service-item {
        margin: 0px 10px;
    }
}

@media (max-width: 576px) {
    .select-city {
        font-size: 1rem;
    }

    .get-started-cta-button {
        height: 38px;
        font-size: 0.95rem;
        /* Adjust font size */
    }

    .get-started-cta-button.nav {
        height: 33px;
        font-size: 0.8rem;
        /* Adjust font size */
    }

    .service-content h3 {
        font-size: 1.15rem;

    }

    .analytics-feature-item h2 {
        font-size: 1.15rem;
    }

    .analytics-feature-item p {
        font-size: 0.9rem;
    }

    .services-section {
        padding: 2rem 0 1rem 0;
    }

    .service-image {
        height: 230px;

    }



    .section-subtitle {
        font-size: 1rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-cta .btn {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
    }
}

.map-component {
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.map-component img {
    transform: rotateY(-10deg);
    transition: transform 0.5s ease;
}

.map-component:hover img {
    transform: rotateY(0deg);
}

.delivery-points {
    position: absolute;
    width: 100%;
    height: 100%;
}

.delivery-points::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 20px #FFD700;
    animation: pulse 2s infinite;
}


@keyframes moveBackground {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 100%;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-lg {
        width: 100%;
    }

    .trust-indicators {
        flex-direction: column;
        align-items: flex-start;
    }
}



.hero-section {
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}



.icon-circle {
    width: 48px;
    height: 48px;
    background: #e8f0eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle i {
    font-size: 1.25rem;
}

.service-block {
    transition: transform 0.3s ease;
}



.service-block a {
    text-decoration-thickness: 2px !important;
}


@media (max-width: 768px) {


    .service-block h2 {
        font-size: 2rem !important;
    }
}

.feature-card {
    padding: 1rem 0.5rem;
    border-radius: 1rem;
    height: 100%;
    transition: all 0.3s ease;
    border: 1px solid #ececece6;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/* .feature-card:hover {
    transform: translateY(-5px);
    background-color: rgba(204, 236, 68, 0.3);
    border-color: #ccec44;
} */

.feature-card .icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(204, 236, 68);
    border-radius: 27%;
    transition: all 0.3s ease;
}



.feature-card .icon-wrapper i {
    font-size: 1.75rem;
    color: #000;
}



.feature-card p {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}


@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }

    .col {
        width: 100%;
        margin-bottom: 1rem;
    }
}

.service-card {
    border-bottom: 1px solid grey !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.service-card:last-child {
    border-bottom: none;
}

.icon-wrapper {
    min-width: 40px;
}

.service-card h5 {
    font-family: Inter, sans-serif !important;
    font-size: 1.1rem;
    color: #000 !important;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: grey !important;
}

/* Contact & FAQ Section Styles */
.contact-section,
.faq-section {
    height: 100%;
}

.accordion-button {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    padding: 15px 20px;
    transition: all 0.2s ease;
}

.accordion-button:not(.collapsed) {
    background-color: #4a6741;
    color: black;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(204, 236, 68, 0.5);
}

.accordion-button::after {
    background-size: 16px;
    transition: all 0.2s ease;
}



.accordion-body {
    background-color: #f8f9fa;
    line-height: 1.6;
}

.form-control:focus {
    border-color: rgba(204, 236, 68, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(204, 236, 68, 0.25);
}

.vr {
    opacity: 0.4;
}

@media (max-width: 992px) {

    .contact-section,
    .faq-section {
        margin-bottom: 2rem;
    }
}

/* Hero Section Styles */
.hero-section {
    background-color: #162925;
    position: relative;
    overflow: hidden;
}

.delivery-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: moveBackground 20s linear infinite;
    opacity: 0.1;
}

.text-gradient {
    background: linear-gradient(45deg, #ccec44, #4a6741);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.text-rotate {
    height: 1.5em;
    overflow: hidden;
    position: relative;
}

.text-rotate span {
    display: block;
    height: 100%;
    animation: rotateWords 8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
    position: absolute;
    width: 100%;
}

.text-rotate span:nth-child(2) {
    animation-delay: 2s;
}

.text-rotate span:nth-child(3) {
    animation-delay: 4s;
}

.text-rotate span:nth-child(4) {
    animation-delay: 6s;
}

@keyframes rotateWords {

    0%,
    20% {
        transform: translateY(0);
        opacity: 1;
    }

    25%,
    45% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50%,
    70% {
        transform: translateY(100%);
        opacity: 0;
    }

    75%,
    95% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-stats .stat-item {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    min-width: 120px;
}

.counter {
    font-size: 2.5rem;
    font-weight: 700;
}

.pain-point-card {
    transition: transform 0.3s ease;
}

.pain-point-card:hover {
    transform: translateY(-5px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-stats {
        flex-direction: column;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-lg {
        width: 100%;
    }

    .trust-indicators {
        flex-direction: column;
        align-items: flex-start;
    }
}

.icon-container {
    margin-right: 1.5rem !important;
    margin-left: 1.2rem !important;
}

/* Target screens wider than Bootstrap's medium breakpoint (>= 768px) */
@media (min-width: 768px) {
    #category-filter {
        width: 50% !important;
        /* Use !important if needed to override Bootstrap styles */
        /* You might want to remove the inline style 'width: 170px;' from the HTML */
    }
}

/* Optional: Define a width for smaller screens if needed */
@media (max-width: 767.98px) {
    #category-filter {
        width: 100%;
        /* Example: make it full width on mobile */
    }
}

/* Feature Highlights Section */
.feature-highlights-section {
    background-color: #f8f9fa;
    padding: 3rem 0 0rem 0;
    text-align: center;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.icon-container {
    background-color: #e8f0eb;
    border-radius: 50%;
    padding: 1rem;
    margin-right: 1.2rem !important;
}

.feature-item h5 {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.feature-item p {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    /* ... existing 992px styles ... */
}

@media (max-width: 768px) {

    /* ... existing 768px styles ... */
    .feature-highlights-section .feature-item h5 {
        font-size: 1rem;
        font-family: Sora, Inter, sans-serif;
    }

    .feature-highlights-section .feature-item p.small {
        font-size: 0.8rem;
        /* Adjust as needed */
        line-height: 1.6;
    }

    .mobile-search-wrapper.search-expanded #search-input {
        display: inline-block !important;
        /* Force display */
        width: 150px;
        /* Or desired width on mobile */
        max-width: none;
        /* Override desktop max-width */
        margin-left: 5px;
        /* Adjust spacing */
    }

    .feature-highlights-section {
        padding-top: 2rem !important;
    }
}


.subtitle {
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif !important;
    color: #333 !important;
    line-height: 1.4;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card {
    padding: 40px 30px;
    border-radius: 16px;
    height: 100%;
}
.container {
    max-width: 1400px;}

.feature-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    font-family: 'Sora',Inter, sans-serif !important;
}

.feature-card p {
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif !important;

    line-height: 1.5;
    margin: 0;
}

/* Card variants */
.feature-card.dark {
    background-color: #fd6732 !important;
}

.feature-card.lime {
    background-color: #e3f861 !important;
    color: #004d6b !important;
}

.feature-card.light {
    background-color: #e8f4f8 !important;
    color: #065866 !important;
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .main-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .subtitle {
        font-size: 1.25rem;
    }
}

body{
    font-size:var(--bs-body-font-size)!important;
    font-weight: 500!important;
    /* font-family: var(--font-family)!important; */
    color:var(--text-color)!important; 
    font-family: 'Inter', sans-serif!important;
 

}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6
{
    color: #000000 !important;
    font-family:var(--h-font-family)!important;

}


/* navbar */
.navbar {height: 62px;}
.w-90{
    width: 90% !important;
}


.navbar-expand-lg .navbar-nav .nav-link{
    color: #ececec;
}

@media (max-width: 991.98px){
    .navbar-expand-lg .navbar-collapse .nav-link
    {
        color:white!important;

    }
}

@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.offcanvas-nav-btn {
    border:none;
    background:none;
}
.navbar-light .navbar-nav .nav-link{
    font-weight: 600;

}
.nav-link:hover{
    color:var(--bs-primary)!important;
}
.offcanvas-footer .social a{
    padding:0px 5px;
}
.offcanvas-footer .social a i{
    font-size: 20px!important;
}

@media (min-width: 992px){
    .nav-link{
        padding:1.2rem 1rem!important;
    }
}
/* end navbar */




.btn-primary{
    background-image: linear-gradient(#e3f530, #ccec44);
    border: 1px solid #c8db07 !important;

    margin-left: 5px !important;
    display: -webkit-inline-box;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    margin: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    /* font-family: NoirPro, Arial; */
    font-family: "Inter", sans-serif;
    font-weight: 550;
    font-size: 0.9rem !important;
    line-height: 1.75;
    /* min-width: 50px; */
    height: 36px;
    padding: 4px 15px !important;
    border-radius: 11px;
    
    color: #163300;
    /* box-shadow: rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px; */
    flex-wrap: nowrap;
    flex-direction: row;
}
.btn{
    line-height: 1.7!important;
    font-weight: 800!important;
    height: 36px;
    padding: 4px 15px !important;

    color: #000000 !important;
}

.table>thead {
    vertical-align: middle;
}
@media (max-width: 768px) {
    .btn {
        height: 42px;
        line-height: 1.5 !important;
        
        font-size: 0.9rem !important;
        padding: 8px 15px !important;
        margin: 5px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    .btn i {
        font-size: 0.85rem !important;
    }
}

.btn:not(.btn-play):hover{
    transform: translateY(-.05rem)!important;
    box-shadow: var(--btn-shadow) !important;
}
/* bg color  */
.bg-primary{
    background-color: var(--bs-primary)!important;
    color: var(--bs-white)!important;
}
.bg-info{
    background-color: var(--bs-info)!important;
    color: white!important;
}
.bg-success{
    background-color: var(--bs-success)!important;
    color: white!important;
}
.bg-danger{
    background-color: var(--bs-danger)!important;
    color: white!important;
}
/* end bg color */


.text-primary{
    color: var(--bs-primary)!important;
}


.alert-inner{
    padding: 1rem 0!important;
}

.badge-lg {
    font-size: .8rem;
    padding: 0.35rem 0.55rem;
}

.font-weight-600{
    font-weight: 600!important;
    font-size: .8rem;
}



section::selection{
    background: rgba(226,98,107,.7)!important;
}



.morocco-map-wrapper {
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.morocco-map {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}
h1.display-1{
    font-family: Sora !important; 
    font-weight: 800; 
    font-size: 3.2rem;
    line-height: 1.3;
}

.section-title{
    font-family: Sora !important; 
    font-weight: 700; 
    font-size: 2.2rem !important;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 0.6rem;
    margin-top: 0.5rem;
    line-height: 1.2;
    margin-left: auto;
    margin-right: auto;
}

.custom-shadow-lg{
    box-shadow: var(--box-shadow-lg) !important;
}
.rounded{
    border-radius: 0.375rem!important;
    overflow: hidden;
}
footer .btn.rounded-pill.buy{
    padding: 15px 29px!important;
}
.btn.rounded-pill{
    padding: 12px 25px!important;
}
.mb-n18{
    margin-top: 8rem!important;
}

.btn-play{
    border-radius: 100%!important;
    overflow: hidden!important;
}

.btn-play i.bi.bi-play{
    font-size: 30px!important;
}

.btn-play:hover{
    box-shadow: var(--btn-shadow)!important;
}


.btn-circle{
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
    -webkit-animation: circle 2s infinite;
        animation: circle 2s infinite;
    background-color: var(--bs-primary);

}
.btn-circle:after{

        content: "";
        position: absolute;
        z-index: 0;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 80px;
        height: 80px;
        background: var(--bs-primary);
        border-radius: 50%;
        animation: circle-border 1500ms ease-out infinite;

}
 
@keyframes circle {
    0% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.2, 1.2);
    }
    100% {
      transform: scale(1, 1);
    }
  }



@keyframes circle-border {
    0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }

  p{
      color: #0a0a0a;
  }

  .btn-info{
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: white;
}

.btn-info:hover{
    background-color: var(--bs-info)!important;
    border-color: var(--bs-info)!important;
    color: white!important;
}
.btn-success:hover{

    background-color: var(--bs-success)!important;
}


  .btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;
}

.btn-danger:hover{
    background-color: var(--bs-danger)!important;
    border-color: var(--bs-danger)!important;
    color: white!important;
}

.section-bg{
    background-color: var(--section-bg);
}

.btn-outline-primary{
    border: none !important;
    background-color: var(--bs-outline-primary)!important;
    color:var(--bs-primary)!important;

}
.btn-outline-primary:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-primary)!important;
    color:var(--bs-primary)!important;
}

.btn-outline-info{
    border: none;
    color: var(--bs-info)!important;
    background-color: var(--bs-outline-info)!important;
}
.btn-outline-info:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-info)!important;
    color: var(--bs-info)!important;
}

.btn-outline-danger{
    border: none;
    color: var(--bs-danger)!important;
    background-color: var(--bs-outline-danger)!important;
}
.btn-outline-danger:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-danger)!important;
    color: var(--bs-danger)!important;

}

.btn-outline-success{
    border: none;
    color: var(--bs-success)!important;
    background-color: var(--bs-outline-success)!important;
}
.btn-outline-success:hover{
    box-shadow: var(--btn-shadow)!important;
    background-color: var(--bs-outline-success)!important;
    color: var(--bs-success)!important;

}


.bg-line-style{
    background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) 0.8px,#9fe8704f 1.6px,#9fe8704f 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);

}


section .title,footer .title{

    font-weight: 600!important;
    line-height: 1.1!important;
}

.mr-1{
    margin-right:1rem!important;
}

.list-unstyled li i.fa.fa-check
{
    background: #e7f2ec;
    border-radius: 50%;
    padding: 5px;
    color:var(--bs-success) ;
}
.list-unstyled li i.fa.fa-close
{
    background: var(--bs-outline-danger);
    border-radius: 50%;
    padding: 5px;
    color:var(--bs-danger) ;
    width: 26px!important;
    height: 26px!important;
    text-align: center;
}

.list-unstyled li{
    margin-top: 15px !important;
}

.typed-cursor{
    color:var(--bs-primary) !important;
    margin-left: 5px!important;
    font-weight: 100!important;
}

.fs-15{
    font-size: 15px!important;
}

.fs-1-5{
    font-size: 1.5rem!important;
}
.fs-1{
    font-size: 1rem!important;
}



/* badge */

.badge.badge-outline-primary{
    background-color: var(--bs-outline-primary)!important;
    color: var(--bs-primary)!important;
}
.badge.badge-outline-info{
    background-color: var(--bs-outline-primary)!important;
    color: var(--bs-primary)!important;
}
.badge.badge-outline-primary{
    background-color: var(--bs-outline-primary)!important;
    color: var(--bs-primary)!important;
}
.badge.badge-outline-success{
    background-color: var(--bs-outline-success)!important;
    color: var(--bs-success)!important;
}
.badge.badge-outline-danger{
    background-color: var(--bs-outline-danger)!important;
    color: var(--bs-danger)!important;
}

/* end badge  */

/*key features design */
section.key-features .card{
    border: none !important;
    box-shadow: var(--box-shadow-lg) !important;
    border-radius: 10px!important;
    transition: .3s;

}
section.key-features .card:hover{
    transform: translateY(-0.4rem);
}
section.key-features a{
    text-decoration: none!important;
    color: unset!important;
}
section.key-features .w-30{
    width: 30%;
}
 
.badge{
    border-radius: 20px!important;
}

section.bg-light{
    --bs-bg-opacity: 0.5;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
}

section.key-features h4,section.how-work-it h4{
    font-weight: 600!important;
}
section.key-features .card .key-profile,section.how-work-it .card .key-profile{
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    font-weight: 700!important;
    line-height: 1.7!important;
    letter-spacing: -.01rem!important;
    border-radius: 100%!important;
    height: 4rem!important;
    width: 4rem!important;
    text-transform: uppercase!important;
}
section.how-work-it .card .key-profile{
    width: 2rem!important;
    height: 2rem!important;
}
section.how-work-it .card .d-flex h4{
    margin-bottom: 0px;
}

.mr-15px{
    margin-right:15px!important;
}




/* end key features design */


.plyr { 
    border-radius: 10px!important;
}

.plyr__control.plyr__control--overlaid{
    background: var(--bs-primary)!important;
}
.plyr__control.plyr__control--overlaid:hover{
    background: var(--bs-primary)!important;
}

.plyr__controls__item.plyr__control:hover{
    background: var(--bs-primary)!important;
}
.plyr__controls button:hover{
    background-color: var(--bs-primary)!important;
}

.plyr__controls input{
    color: var(--bs-primary)!important;
}

.fs{
    font-size: 2rem!important;
}

section.how-work-it .card{
    border: none!important;
    box-shadow: var(--box-shadow-lg)!important;
    border-radius: 10px!important;
}


section.pricing-table .card, section.customer-feedback .card
{
    border:none!important;
    border-radius: 10px!important;
    box-shadow: var(--box-shadow-lg)!important;
}
section.pricing-table .card .card-body
{
    margin: auto!important;
}
section.pricing-table .card .currency{
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 400;
    padding-right: 0.2rem;
    padding-top: 0.4rem;
    font-family:'FontAwesome';
}

section.pricing-table .card .price{
    font-size: 3rem!important;
    font-weight: 100!important;
}

section.pricing-table .card .duration{
    margin-top: 30px!important;
    margin-left: 5px;
}

section.pricing-table .card h4.font-weight-bold{
    font-weight: 600!important;
}


section.pricing-table .card  ul li{
    margin-top:10px!important;
}


@media screen and (min-width:992px) {

    .mt-minus-20{
        margin-top: -20px!important;
    }
}

 

blockquote::before{
    content: "\201c";
    color: #aab0bc;
    opacity: .3;
    font-size: 6.5rem;
    font-weight: 400;
    top: 0;
    left: 50%;
    transform: translateX(-52%);
    line-height: 1;
    z-index: 1;
}

.customer-rate{
    display: inline-block;
    position: relative;
    width: 5rem;
    height: 0.8rem;
    font-size: 1.3rem;
    line-height: 1;
}


.customer-rate:before {
    color: rgba(38,43,50,.1);
}

.customer-rate:after, .customer-rate:before {
    display: inline-block;
    font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
    font-style: normal;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    color: #fcc032;
    content: "\2605\2605\2605\2605\2605";
    overflow: hidden;
}

.navbar-brand .logo,.footer-logo .logo{ 
    object-fit: contain;
}


.navbar-toggler-icon{
    width: 1.9em!important;
    height: 1.9em!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;

}

.hero-content-container {
    position: relative; /* Retain relative positioning if needed */
    z-index: 1;
    padding-top: 90px;
    padding-bottom: 3rem; /* Equivalent to Bootstrap's pb-5 */
  }

  
/* responsive  */

@media screen and (max-width: 991px) {

    
    body{
        font-size:var(--font-size-1rem)!important;
    }

    .btn,.btn.rounded-pill{
        padding:0.3rem 1rem!important;
        font-size: var(--font-size-1rem)!important;
    }

    section.key-features .card .key-profile, section.how-work-it .card .key-profile{
        width: 3rem!important;
        height: 3rem!important;
    }
    .swiper .card.m-5{
        margin: 2px!important;
        margin-bottom: 5rem!important;
    }

    .swiper .card .blockquote-box{
        padding-left:0.5rem!important;
        padding-right:0.5rem!important;
    }

    blockquote::before {
        font-size: 4rem!important;
    }

    .py-5{
        padding-top:2rem!important;
        padding-bottom: 2rem!important;
    }

    .section-title{
        font-size: 1.6rem !important;
    }

     section.customer-feedback .card {
        border: none!important;
        border-radius: 10px!important;
        box-shadow: var(--price-card-shadow)!important;
    }


    .offcanvas.offcanvas-nav{
        width: 60%!important;
    }

    h1.display-1{
        font-size: 1.85rem!important;
        line-height: 1.4;
    }
    .last-part{
        font-size: 1.64rem!important;
    }
    h1{
        font-size: 1.7rem!important;
    }
    

    .display-1 .background-edgy-hero {
        font-size: 1.75rem!important;
    }


   
    
    .banner-subtitle {
        font-size: 0.95rem !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-content-container {
        padding-top: 64px;
      }
    

    .navbar.navbar-expand-lg.center-nav{
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
    .navbar.navbar-expand-lg.center-nav .container.flex-lg-row.flex-nowrap.align-items-center{
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
    h1.title.mb-5{
        margin-bottom: 2rem!important;
        margin-top: 2rem!important;
    }

    .display-6{
        font-size: calc(1.375rem + 0.5vw)!important;
    }

    .key-features .container.pb-5.mb-5{
        margin-bottom: 0px!important;
    }

    .fs-1-5 {
        font-size: calc(1rem + 0.3vw)!important;
        margin-top: 2rem!important;
    }

    section.pricing-table .card.p-5{
        padding:3rem 1rem!important;
    }
    section.pricing-table .card .card-body{
        margin:unset!important;
    }
    .pricing-table .btn.rounded-pill{
        padding:15px 29px!important;
    }

    .navbar-brand .logo{
        object-fit: contain;
    }

    .auth-btn{
        font-size: 0.9!important;
    }

    .mob{
        border-radius: 30px !important;
        padding: 1px 10px !important;
        font-size: 16px !important;
        border: 1px solid rgb(204, 203, 203);
    }

    
 

}

.dropdown-menu {
    left: -4px !important;
    margin-top: 7px !important;
}

/* end responsive */
.font-weight-bold{
    font-weight: bold;
}
.font-size-25{
    font-size: 25px;
}

.dashboard-section{
    background: url(../img/responsive-application.png) no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-position: center;
}
.dashboard-section .dashboard-overlay{
    background: rgb(0 0 0 / 61%);
}
.dashboard-section .dashboard-content p{
  color: white!important;
}

.Industries i{
    font-size: 60px!important;
    color: var(--bs-primary);
}

.text-2rem{
    font-size: 2rem!important;
}

.banner-hilight{
    font-weight: 800!important;
    line-height: 41px!important;
    letter-spacing: 0em!important;
    text-align: left;
}
.banner-image{
    width: 100%;
    object-fit: contain;
}

.banner-subtitle{
    text-align: center!important;
    font-size: 1rem;
    font-weight: 400;
}

@media screen and (max-width: 991px) {
    h1.banner-hilight{
        font-size: 2rem!important;
        text-align: center;
    }
    .banner-subtitle{
        text-align: center!important;
        font-size: 0.97rem!important;
        padding-left: 2px;
        padding-right: 2px;
        
        
    }
}

.tracking-form input.form-control, .tracking-form button{
    border-width: 1px, 0px, 1px, 1px; 
    border-style: solid; 
    border: 1px solid white;
}


/* Mobile Tracking Form Styles */
@media (max-width: 991.98px) {
    #mobileTrackingForm {
        position: absolute;
        top: 115%;
        left: 0;
        right: 0;
        background: #171717;
        padding: 1rem;
        z-index: 1000;
    }

    

    .mobile-track-btn {
        background-image: linear-gradient(#e3f530, #ccec44);
        border: 1px solid #c8db07 !important;
        color: #163300 !important;
        padding: 8px 15px;
        border-radius: 11px;
        font-weight: 550;
        font-size: 0.885rem;
    }
}

/* Desktop Styles */
@media (min-width: 992px) {
    #mobileTrackingForm {
        display: block !important;
        position: static;
        background: transparent;
        padding: 0;
    }
    .get-started-cta-button.nav {
        height: 36px;
        font-size: 1rem;
    }
}

/* White placeholder for tracking input */
.tracking-form input::placeholder { /* Chrome, Firefox, Opera, Safari  */
    color: #ffffffce !important;
    opacity: 1; /* Ensures full opacity */
}

.tracking-form input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
    color: #ffffffce !important;
}

.tracking-form input::-moz-placeholder { /* Firefox 19+ */
    color: #ffffffce !important;
}

.tracking-form input:-ms-input-placeholder { /* IE 10+ */
    color: #ffffffce !important;
}

.tracking-form input::-ms-input-placeholder { /* Edge */
    color: #ffffffce !important;
}




.navbar-nav .form-control::placeholder {
    color: white !important;
    opacity: 0.9; /* Adjust this value to make the placeholder more or less visible */
}
.tracking-form button,.subscribe-form button{
    border-radius: 0rem 0.375rem 0.375rem 0rem!important;
}
.tracking-form input.form-control:focus,.subscribe-form input.form-control:focus{
    box-shadow: none !important;
}
.subscribe-form .btn:hover{
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.service-item{
    position: relative;
    border-radius: 10px;
    transition: 0.5s;
}
.service-item .service-box{ 
    width: 113.32px;
    height: 113.32px; 
    display: inline-block;
    /* Primary */ 
    background: var(--bs-primary);
    border-radius: 20px;
    transform: rotate(-44.56deg);
}
.service-item .service-box img{
  object-fit: contain;
}
.service-item .service-box .icon-box{
    transform: rotate(44.56deg);
    width: 100%;
    height: 100%;
    padding: 30px;
}

 
 .whycourier-item{ 
    height: 188px;
    margin: auto; 
    border-radius: 5px;
    box-shadow: 0px 0px 7px #00000040;
 }
.whycourier-item .whycourier-box{ 
    display: inline-block;
    margin: auto; 
}
.whycourier-item .whycourier-box img{  
    width: 66px; 
    object-fit: contain;
}

.pricing .nav-link{
    line-height: 1.7!important;
    font-weight: 700!important;
    padding: 0.5rem 1.2rem!important;
    border: none!important;
    color: var(--text-color);
}  
.pricing .nav-item{  
    border-bottom: 1px solid var(--bs-primary);
}
.pricing .nav-link.active{  
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border-radius: 0.375rem 0.375rem 0rem 0rem;
}
.pricing .nav-link.active:hover{   
    color: var(--bs-white)!important;
}

.pricing.breadcrumb .breadcrumb-item+.breadcrumb-item::before{
    content: "|";
    margin-top: 10px;
}
.charge-content .charge-item{
    /* border: 1px solid var(--bs-primary); */
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 5px;
    box-shadow: 0px 0px 3px var(--bs-primary);
    border-radius: 5px;
}
.charge-content  .charge-col{
    padding: 0px !important;
}

@media screen and (max-width: 991px){
    .pricing .nav-link {
        line-height: 1.5!important; 
        padding: 0.5rem 0.5rem!important; 
        font-size: 15px!important;
    }
    .pricing.breadcrumb .breadcrumb-item+.breadcrumb-item::before{
        margin-top: 0%!important;
    }
}

@media screen and (max-width: 768px){
    .pricing .nav-link {
        line-height: 1.5!important; 
        padding: 0.5rem 0.5rem!important; 
        font-size: 10px!important;
    }
    .pricing.breadcrumb .breadcrumb-item+.breadcrumb-item::before{
        margin-top: 0%!important;
    }
}

.achievement{
    min-height:150px;
}
.achievement .branch-title{
    text-align: left!important;
    color: var(--bs-white)!important;
}
.achievement .icon i{
    font-size: 30px;
}
.achievement .icon-text{ 
    padding-left: 15px;
}

.partner .partner-logo{
    width: 60px;
    object-fit: contain;
}

.swiper-pagination-bullet-active{
    background: var(--bs-primary)!important;
}
.footer-logo{
    text-align: left;
}

.footer-list{
    list-style: none;
}
.footer-list li a{
    display: block;
    text-align: left!important;
    color: var(--bs-white);
    text-decoration: none;
}
.footer-list li{
    margin-top: 5px!important;
}

@media screen and (max-width: 991px){
    .justify-content-center.achievement{
        justify-content: start!important;
        min-height: 120px!important;
    }
    .background-edgy{
        font-size: 0.8rem !important;
        
    }
}

.social-media i.icon{
    font-size: 30px;
    color: var(--bs-white);
}
.tracking-page.tracking-form input,
.tracking-page.tracking-form button{
    font-size: 25px;
}

.app-download i{
    color: var(--bs-white);
    font-size: 60px;
}

.font-size-1-5rem{
    font-size: 1.5rem;
}

.pagination .page-link{
    color: var(--bs-primary);
}
.pagination .active .page-link{
    background-color: var(--bs-primary);
    color: var(--bs-white);
    border-color: var(--bs-primary);
}
.faq.accordion .accordion-button{ 
    font-weight: 600!important;
    background:none;
}
.faq.accordion .accordion-button:focus{ 
     background: none!important; 
     box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
 
}

.faq.accordion .accordion-button:not(.collapsed){
    box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    font-weight: 700 !important;
}

.accordion-button:not(.collapsed)::after{
    background-image: var(--bs-accordion-btn-icon);
}

.faq.accordion .accordion-button,
.faq.accordion .accordion-body{
    padding-left: 23px;
}

@media screen and (max-width:991px) {
    .user-dropdown{
        position: absolute!important;
    }
}

.contact-form .form-control:focus{
    box-shadow: none!important;
    border: 2px solid #ccec44;}

.text-white{
    color:var(--bs-white)!important;
}
.text-color-white{
    color: #fff!important;
    /* text-transform: uppercase; */
}
.text-color-lime{
    color: #ccec44!important;
    /* text-transform: uppercase; */
}
.text-color-red{
    color: #f74304!important;
}
.text-shadow {
    text-shadow: 0px 0.5px 0px #181818;
}
.background-edgy{
    background-color: #ccec44;
    color: #000000 !important;
    /* border: 1px solid #bfe580; */
    width: fit-content;
    border-radius: 0px !important;
    font-family: Inter, Arial;
    font-weight: 700;
    font-size: 0.875rem;
    transform: translate(0px) skew(-10deg, 0deg);
    padding: 7px 8px;
}
.table-td td {
    padding-left: 18px;
    font-weight: 700;
}

.background-edgy-hero{
    background-color: #ccec44;
    width: fit-content;
    border-radius: 0px !important;
    color: #000000 !important;
    font-weight: inherit; 
    font-size: 3.1rem;
    transform: translate(0px) skew(-10deg, 0deg);
    padding: 3.3px 7px;
    margin-left: 5px;
    margin-right: 5px;

}

.auth-links a:hover{
    color: #333333 !important;
    font-weight: 750 !important;
}

/* Adjust the existing fixed-header */
.fixed-header {
    position: fixed;
    top: 32px; /* Initial position below the top-bar, JS will adjust this */
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.15s ease; /* REMOVED transition for top */
    /*border-bottom: 1px solid #409dd3b2;*/
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}

.fixed-header.header-scrolled {
    background-color: #141414; /* Solid background when scrolled */
}




/* Optional: Add a class to the section to trigger the fixed header */
.container-fluid.fixed-header-active {
    background-color: #141414;
}

.blogs .card .card-footer{
    background:none;
    border: none;
}

.blogs .card{
    border: none;
    box-shadow: 0px 0px 5px #0000002e;
}
.latest-blog .card-text i,.latest-blog .card-text small{
   font-size: 12px!important;
}
.latest-blog .card{
    border: none;
    box-shadow: 0px 0px 5px #0000002e;
}
@media screen and (max-width:991px) { 
    .latest-blog img{
        width: 130px!important;
        height: 130px!important;
    } 
    .top-bar {
        width: 100%;
        height: 32px !important;
        padding: 0px 7px 0px 6px !important;
    }
    .top-bar .nav-link,
    .top-bar .dropdown-menu a {
        color: #141414; /* Dark color for contrast on lime */
        font-size: 0.85rem !important; /* Slightly larger */
        font-weight: 600;
    }
}

.blogs .pagination{
    justify-content: center;
}







.language-list li{
    padding: 0.5rem;
    margin-top: 0px!important;
}

html[dir="rtl"] .navbar-nav.ms-auto{
    margin-right: auto !important;
}
html[dir="rtl"] .tracking-form button, html[dir="rtl"] .subscribe-form button{
    border-radius:  0.375rem 0rem 0rem 0.375rem !important;
}
html[dir="rtl"] .tracking-form input, html[dir="rtl"] .subscribe-form input{
   border-radius: 0px 5px 5px 0px!important;
}

html[dir="rtl"] .get-started-cta-button .icon-wrapper-cta {
    margin-left: 0em;
    margin-right: 0.5rem;
}

.service-details:hover{
    transform: unset;
    background:unset;
}
.service-details:hover h5, .service-details:hover p{
    color: unset!important;
}
.service-details:hover .text-primary{
    color: unset!important;
}

.why-courier-col{
    padding: 10px;
}
.whycourier-item{
    transition: 0.5s;

}
 
.whycourier-item:hover{
    transform: translateY(-0.4rem);
    background:var(--bs-primary); 
}
.whycourier-item:hover h5, .whycourier-item:hover p{
    color: var(--bs-white)!important;
}
.charge-item{
    transition: 0.5s;
}
.charge-item:hover{
    transform: translateY(-0.2rem);
    background:var(--bs-primary); 
}
.charge-item:hover h3, .charge-item:hover p{
    color: var(--bs-white)!important;
}
.navbar-nav .nav-item .nav-link.active{
    color: #333333;
    font-weight: 800;
}
 
@media screen and (min-width:992px) {

    .menu .nav-item,.auth-info .login-button{
        padding: 0.5rem 1rem!important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu .nav-item .nav-link,.auth-info .login-button .nav-link{
        padding:0px!important;
        padding-bottom: 3px;
    } 
    .menu .navbar-nav .nav-item .nav-link::before,.auth-info .login-button .nav-link::before{
        content: "";
        background: var(--bs-primary); 
        height: 2px;
        z-index: 11;
        bottom: 0px;
        left: 0px;
        border-radius: 30px; 
        position: absolute;
        transition: 0.3s;
        width: 0px;
    } 
    .menu .navbar-nav .nav-item .nav-link,.auth-info .login-button .nav-link{
        position: relative;
        overflow: hidden;
    } 
    .menu>.navbar-nav>.nav-item>.nav-link:hover::before,.auth-info .login-button .nav-link:hover::before{
       width: 100%;
    }
    .menu>.navbar-nav>.nav-item>.nav-link.active::before{
       width: 100%;
    }

}
.blogs .card{
    transition: 0.5s;
}
.blogs .card:hover{
    transform: translateY(-0.4rem);
    background: var(--bs-primary);
}
.blogs .card:hover h4.card-title,  .blogs .card:hover p{
    color: var(--bs-white)!important;
}
.latest-blog-item{
    transition: 0.5s;
}

.latest-blog-item:hover{
    background:var(--bs-primary);
}
.latest-blog-item:hover h5,.latest-blog-item:hover p{
    color: var(--bs-white)!important;
}

/* Add new styles for the top bar */
.top-bar {
    width: 100%;
    height: 32px;
    background-color: #131416; /* Or your preferred background */
    padding: 0px 33px; /* Adjust padding as needed */
}

.top-bar .nav-link,
.top-bar .dropdown-menu a {
    color: #000000; /* Dark color for contrast on lime */
    font-size: 0.95rem; /* Slightly larger */
    font-weight: 500;
    padding-top: 5px;
    padding-bottom: 5px;
}

.top-bar .header-link {
    color: #cfcfcf !important; /* Dark color for separator */
    font-size: 0.8rem !important;   
    font-weight: 500;

}
.top-bar .header-link:hover {
    color: #ffffff !important; 
    /* Dark color for separator */
    font-weight: 550;

}
.top-bar .auth-separator {
    color: #e7e7e7; /* Dark color for separator */
    font-size: 0.8rem;
    font-weight: 500;
    vertical-align: middle;
    margin: 0 -2px; /* Adjust spacing around separator */
}

.top-bar .nav-link:hover,
.top-bar .dropdown-menu a:hover {
    color: #000000; /* Darker hover */
    text-decoration: none; /* Remove underline on hover if desired */
}

/* Remove button styles specifically if needed */
.top-bar .auth-links a.nav-link {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* Reset padding if necessary */
    height: auto !important; /* Reset height */
    line-height: inherit !important;
    font-size: 0.9rem;
}

.top-bar .btn-primary {
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
}