@font-face {
    font-family: 'Figtree-regular';
    src: url('../fonts/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Inter-medium';
    src: url('../fonts/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
    font-display: swap;
}

:root {
    --matrix-black: #000000;
    --matrix-Blue: #043fa4;
    --matrix-white: #ffffff;

    --red-color: #dc3545;
    --orange-color: #fd7e14;
    --red-dark: #c82333;
    --orange-dark: #e95e0c;
    --Golden: #cd9d39;
    --Golden-dark: #976905;
}

.text-justify{
    text-align: justify;
}

* {
     font-family: "Inter-medium", sans-serif;
    color: var(--matrix-black);
}
.text-golden{
    color: var(--Golden);
}
.bg-golden{
    background-color: var(--Golden);
}
.logo{
    width: 10%;
    position: static;
    z-index: 9999;
}
.logo img{
    width: 10% !important;
    margin-top: 10px;
}

@media (max-width: 991.98px) {
    .mobile-cover {
        position: relative !important;
        height: auto !important;
        top: 0 !important;
        margin-top: 50px;
        width: 100%;
    }
}
@media (max-width: 576px) {
    .logo img{
        width: 100% !important;
        margin-top: 0px;
    }
}

.nav-link {

    font-size: 18px;
}
.nav-link:hover {
   color: var(--Golden-dark);
    font-size: 18px;
}
.btn-get-quote {


    transition: all 0.3s ease;
}

.btn-get-quote:hover {
    background-color: var(--Golden);
    color: var(--matrix-white);
    border: 1px solid var(--Golden);
}

/* Specifically target Bootstrap icons */
.btn-get-quote i {
    color: var(--Golden);
}
.btn-get-quote:hover i {
    color: var(--matrix-white);
}

/* Or if you're using Bootstrap icon classes specifically */
.btn-get-quote:hover .bi {
    color: var(--matrix-white);
}
.get-help{
    color: var(--Golden);
}
.carousel-item {
  height: 600px; /* Your desired height */
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is key - it crops instead of stretching */
}

/*.finger-tips{*/

/*    background: rgb(from var(--matrix-black) r g b ) no-repeat !important;*/
/*    z-index: 9999;*/

/*}*/

.card-img-container {
            height: 100px; /* Set your desired height */
            overflow: hidden;
        }

        .card-img-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .gradient-button {
            background: linear-gradient(90deg, var(--Golden), var(--Golden-dark));
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: #ffffff;
        }

        .gradient-button:hover {
            background: linear-gradient(90deg, var(--Golden), var(--Golden-dark));
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
            color:#ffffff;
        }
        .icon_color{
            color: var(--matrix-white) !important;
        }


        .accordion-button:not(.collapsed) {
            background-color: #d3d3d3 !important;
            color: #000000 !important;
            }
            .accordion-button:focus {
                box-shadow: none !important;
            }
            /* Optional: Change hover state */
            .accordion-button:not(.collapsed):hover {
            background-color: #d3d3d3 !important;

            }
        .accordion-button-custom:not(.collapsed) {
            background-color: #e2e3e5 !important;
            color: #000000 !important;
            }
            .accordion-button-custom:focus {
                box-shadow: none !important;
            }
            /* Optional: Change hover state */
            .accordion-button-custom:not(.collapsed):hover {
            background-color: #e2e3e5 !important;

            }


.get_help{
    background:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../images/customer-support.jpg') no-repeat center 20% !important;
    background-size: cover;
}


/* Additional CSS to ensure proper positioning */
.carousel-item {
  min-height: 600px; /* Adjust this value as needed */
  position: relative;
}

.carousel-item img {
  height: 100%;
  object-fit: cover;
}





/* Or use Bootstrap theme colors */


   .nav-pills .nav-link {
    background-color: #000 !important;
    color: white !important;
    margin-right: 0.50rem;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #333 !important; /* Slightly lighter when active */
    color: white !important;
    border: 1px solid #000 !important;
}
/*
======================================= for Mobiles
*/
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .logo{
        width: 25%;
        position: absolute;
        }

 }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .carousel-item {
    min-height: 500px; /* Slightly shorter on mobile */
    }

    .position-absolute {
        transform: translate(-50%, -50%) !important;
    }


 }

 /*  ==============================
 City to City
 ===================================
 */

 /* .feature-card {
            border-radius: 10px;
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        } */

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }

        .highlight-badge {
            background-color: var(--accent-color);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 10px;
            display: inline-block;
        }

        .benefit-list {
            list-style: none;
            padding-left: 0;
        }

        .benefit-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .benefit-list li:last-child {
            border-bottom: none;
        }

        .benefit-list li i {
            color: var(--accent-color);
            margin-right: 10px;
        }



        .section-title {
            color: var(--primary-color);
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 30px;
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: var(--secondary-color);
        }

        .text-center .section-title:after {
            left: 50%;
            transform: translateX(-50%);
        }

        .stats-counter {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .hero-section {
                padding: 60px 0;
            }

            .display-4 {
                font-size: 2.5rem;
            }
        }

/* carousal image responsive */
.carousel-image-wrapper {
    height: 60vh; /* Default mobile height */
    min-height: 400px;
}

/* Desktop styles */
@media (min-width: 768px) {
    .carousel-image-wrapper {
        height: 70vh; /* Taller on desktop */
        min-height: 500px; /* Larger minimum height on desktop */
    }
}

/* Large desktop styles */
@media (min-width: 1200px) {
    .carousel-image-wrapper {
        height: 70vh; /* Even taller on large screens */
        min-height: 400px;
    }
}

/* Extra small devices (portrait phones) */
@media (max-width: 575.98px) {
    .carousel-image-wrapper {
        height: 40vh; /* Slightly smaller for very small screens */
        min-height: 300px;
    }
}

/* Landscape phones */
@media (min-width: 576px) and (max-width: 767.98px) {
    .carousel-image-wrapper {
        height: 75vh; /* Adjust for landscape phones */
        min-height: 450px;
    }
}
/* carousal image responsive */

.opacity-20{
    background-color: rgba(0, 0, 0, 0.20) !important;
}
.fs-16{
    font-size: 1rem !important;
}
.fs-24{
    font-size: 1.5rem !important;
}
.fs-44{
    font-size: 2.75rem !important;
}
/* Zoho Chat */
.chat-iframe-wrap {
    max-height: 60% !important;
    width: 500px !important;
}
@media (max-width: 554px) {
    .chat-iframe-wrap, .chat-iframe-wrap iframe, .chat-loader-cont {
        min-height: 480px !important;
        height: auto !important;
    }
}

/* ===========================
   MAIN PAGE FORM – COMPACT
=========================== */

/* HARD RESET */
#lead_form,
#lead_form * {
    color: #000 !important;
    font-family: Manrope, sans-serif !important;
}

#lead_form label,
#lead_form h3,
#lead_form span,
#lead_form div {
    color: #000 !important;
}

/* ===========================
   FORM WRAPPER – COMPACT
=========================== */
/* Current desktop styles */
#lead_form {
    width: 45% !important;
    float: right !important;
    background: #fff !important;
    padding: 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
}

/* Tablet styles (optional) */
@media (max-width: 1024px) {
    #lead_form {
        width: 55% !important;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    #lead_form {
        width: 100% !important;
        float: none !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        padding: 15px !important; /* Slightly more padding on mobile for better touch */
        border-radius: 10px !important; /* Slightly smaller radius on mobile */
        box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important; /* Softer shadow on mobile */
    }

    /* Optional: Adjust parent container if needed */
    #lead_form_container {
        padding: 0 10px !important; /* Add some padding on mobile */
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    #lead_form {
        padding: 12px !important;
        margin: 0px auto !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    }
}

/* ===========================
   TITLE
=========================== */
#lead_form h3 {
    font-size: 14px !important;
    font-weight: 600;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
}

/* ===========================
   GRID SPACING – TIGHT
=========================== */
#lead_form .col-lg-12,
#lead_form .col-xs-6,
#lead_form .col-xs-12 {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 5px !important; /* reduced */
}

/* Remove random <br> spacing */
#lead_form br {
    display: none !important;
}

/* ===========================
   LABELS – COMPACT
=========================== */
#lead_form label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    line-height: 1.2;
}

/* ===========================
   INPUTS / SELECTS – COMPACT
=========================== */
#lead_form .form-control {
    height: 34px !important; /* reduced */
    padding: 4px 9px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    border: 1px solid #d4d4d4 !important;
}

/* Date inputs */
#lead_form input[type="date"] {
    padding-right: 8px !important;
}

/* Placeholder */
#lead_form input::placeholder {
    color: #777 !important;
}

/* Focus */
#lead_form .form-control:focus {
    border-color: #919191 !important;
    box-shadow: 0 0 0 2px rgba(69, 69, 69, 0.25) !important;
}

/* ===========================
   PHONE INPUT (intl-tel)
=========================== */
#lead_form .iti {
    width: 100%;
}

#lead_form .iti input {
    height: 34px !important;
    padding-left: 72px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ===========================
   ADD STOP LINK
=========================== */
#lead_form .add-stops {
    font-size: 12px !important;
    font-weight: 500;
    color: #575757 !important;
    text-decoration: none !important;
}

/* ===========================
   CHECKBOX
=========================== */
#lead_form .medium-checkbox {
    margin-right: 6px;
    transform: scale(0.95);
}

/* ===========================
   SUBMIT BUTTON – COMPACT
=========================== */
#submit_button {
    height: 40px !important; /* reduced */
    width: 100% !important;
    margin-top: 6px !important;
    background: linear-gradient(135deg, #e34012, #e15e00) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 26px rgba(85, 84, 84, 0.35);
}

/* Hover */
#submit_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(60, 60, 60, 0.45);
}

/* ===========================
   TERMS TEXT – SUBTLE
=========================== */
#lead_form > div:last-child {
    font-size: 10.5px;
    opacity: 0.6;
    margin-top: 4px;
}

/* Utility */
.inline {
    display: block !important;
}

#cat_list, #personal_info, #trip_summary{
    margin-top:450px !important;
}

.apply_now {
    --bs-btn-bg: linear-gradient(135deg, #e34012, #e15e00);
    --bs-btn-hover-bg: linear-gradient(135deg, #f85c2e, #ff954b);
    --bs-btn-border-color: transparent;
}

/* Hover (desktop) */
.apply_now:hover {
    background-image: linear-gradient(135deg, #f85c2e, #ff954b);
    color: #fff;
}

/* Active + Focus (Android + iOS FIX) */
.apply_now:active,
.apply_now:focus {
    background-image: linear-gradient(135deg, #f85c2e, #ff954b);
    box-shadow: none;
    color: #fff;
}