@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Grotesk:wght@300..700&display=swap');

*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



form,
form input,
form select,
form textarea{
    font-size: 16px;
}


:root {
    /* Colors */
    --primary-blue: #0066cc;
    /* Royal Blue */
    --primary-orange: #ff6900;
    /* Bright Orange */
    --dark-charcoal: #333333;
    /* Dark Charcoal */
    --pure-white: #ffffff;
    /* Pure White */
    --light-grey: #f0f0f0;
    /* Light Grey */
    --golden-yellow: #ffcc00;
    /* Golden Yellow */
    --black: #000000;
    /* Black */
    --light-blue: #99ccff;
    /* Light Blue */

    /* Spacing */
    --space-xs: 8px;
    /* Extra Small spacing */
    --space-sm: 16px;
    /* Small spacing */
    --space-md: 32px;
    /* Medium spacing */
    --space-lg: 48px;
    /* Large spacing */
    --space-xl: 64px;
    /* Extra Large spacing */
    --space-xxl: 80px;
    /* Extra Extra Large spacing */

    /* Typography with clamp() */
    --font-size-xs: clamp(14px, .8vw, 1rem);
    /* Fluid font size for small text */
    --font-size-sm: clamp(12px, .9vw, 1rem);
    /* Small text */
    --font-size-md: clamp(14px, 1.1vw, 1.3rem);
    /* Default body text */
    --font-size-lg: clamp(16px, 1.3vw, 1.6rem);
    /* Larger text */
    --font-size-xl: clamp(18px, 1.7vw, 2rem);
    /* Extra Large text */
    --font-size-heading: clamp(23px, 2vw, 2.3rem);
    /* Heading text */
    --line-height: 1.5;
    /* Base line height for readability */

    /* Font Families */
    --font-family-base: "Montserrat", serif;
    /* Base font family */
    --font-family-heading: "Poppins", serif;
    /* Heading font family */


    /* Box Shadows */
    --box-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Small shadow */
    --box-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Medium shadow */
    --box-shadow-lg: 0 6px 15px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-duration: 0.3s;
    /* Default transition duration */
    --transition-ease: ease-in-out;
    /* Default easing function */


    /* Link States */
    --link-color: var(--primary-blue);
    /* Normal link color */
    --link-hover-color: var(--light-blue);
    /* Hover link color */
    --link-active-color: var(--primary-orange);
    /* Active link color */

    /* Additional Root Variables for Layout */
    --container-width: 1250px;
    /* Max width for main container */
    --max-content-width: 100%;
    /* Max width for content sections */
    --min-content-width: 320px;
    /* Min width for content sections */
    --footer-bg: var(--dark-charcoal);
    /* Footer background color */
    --header-bg: var(--primary-blue);
    /* Header background color */
    --header-height: 80px;
    /* Header height */
    --footer-height: 100px;
    /* Footer height */

    /* filter */
    --filter-1: brightness(0) saturate(100%) invert(51%) sepia(87%) saturate(3729%) hue-rotate(0deg) brightness(102%) contrast(105%);

    /* new root for progressbar */

    --body--background: #f3f3f3;
    --rail-inactive-color: #d0d0d0;
    --tracker-dot-color: #f44336;
    --tracker--dot-size: 10px;
}

html,
body {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    /* Scalable text size */
    line-height: var(--line-height);
    background-color: var(--pure-white);
    color: var(--dark-charcoal);
    text-transform: capitalize;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

.container {
    max-width: var(--container-width);
    display: block;
    margin: 0 auto;
}

/* Page container */
.page-container {
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    height: 100%;
    /* Full height of the viewport */
}

main {
    flex: 1;
    /* Takes up all the available space in the middle */
}

.flex {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}


/* header start */
header .top_header {
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-left: var(--space-xl);
    height: calc(var(--footer-height) - 15px);
}

header .top_header .top_nav .top_menu .top_menu_list a,
header .top_header .top_nav .top_menu,
header .top_header .top_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    list-style: none;
}

header .top_header .top_nav .top_menu .top_menu_list a {
    text-decoration: none;
}

header .top_header .top_nav .top_menu .top_menu_list a span {
    color: var(--pure-white);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

header .top_header .top_nav .top_menu .top_menu_list a img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    filter: var(--filter-1);
}

header .top_header .socials_link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    height: 100%;
}

header .top_header .socials_link img {
    width: 20px;
    filter: brightness(0) saturate(100%) invert(98%) sepia(88%) saturate(36%) hue-rotate(188deg) brightness(111%) contrast(95%);
    cursor: pointer;
}

header .top_header .socials_link a {
    padding: var(--space-sm) var(--space-md);
    background: var(--primary-orange);
    color: var(--pure-white);
    font-weight: 500;
    font-size: var(--font-size-md);
    text-transform: uppercase;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

header .header_main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    transition: .5s var(--transition-ease);
    z-index: 999;
    background-color: var(--pure-white);
    box-shadow: var(--box-shadow-md);
}


header .header_main.scrolled {
    max-width: 100%;
    width: 100%;
    background-color: var(--pure-white);
    box-shadow: var(--box-shadow-sm);
    top: 0;
    left: 0;
    right: 0;
    padding: 0 var(--space-md);
}

 .logo a{
    font-size: clamp(14px, 1.6vw, 1.8rem);
    text-transform:uppercase;
    padding: 0 50px;
    display: block;
    text-decoration: none;
    color:  var(--primary-orange);
    font-weight: 700;
}
 .logo a span{
   color:  var(--primary-blue);
    font-size: clamp(14px, 1.9vw, 2.1rem);
}

.header_main_menu .logo{
    display:none;
}
header .header_main .header_main_menu .header_main_menu_list {
    position: relative;
    transition: .5s var(--transition-ease);
    display: inline-block;
}

header .header_main .header_main_menu .header_main_menu_list:last-child {
    margin-right: 0;
}

header .header_main .header_main_menu .header_main_menu_list::before {
    position: absolute;
    content: '';
    top: 60%;
    width: 0;
    height: 3px;
    background: var(--primary-orange);
    transition: .5s var(--transition-ease);
}

header .header_main .header_main_menu .header_main_menu_list:hover::before {
    width: var(--max-content-width);
}

header .header_main .header_main_menu .header_main_menu_list>a {
    text-decoration: none;
    color: var(--black);
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 30px 0;
}

/* header end */

/* landing page swiper start */

.landing_page_wrapper,
.landing_page_wrapper .slide {
    width: 100%;
    height: 80vh;
    position: relative;
}

.landing_page_wrapper .slide {
    overflow: hidden;
}

.landing_page_wrapper .slide::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.40);
    z-index: 10;
}

.landing_page_wrapper .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Start with the image hidden */
    transform: translateX(-100%);
    /* Slide the image off-screen to the left */
    animation: slideIn 1s forwards;
    /* Slide in animation */
}

/* Keyframe for the image sliding animation */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
        /* Start off-screen to the left */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* End at the original position */
    }
}

.landing_page_wrapper .slide .image_date {
    position: absolute;
    top: 50%;
      left: 20%;
    transform: translate(-50%, -20%);
  
    z-index: 10;
    user-select: none;

    /* Start below */
}

.landing_page_wrapper .slide .image_date span.text {
    font-size: var(--font-size-sm);
    color: var(--pure-white);
    font-weight: 600;
    opacity: 0;
    transform: translateY(60%);
}

.landing_page_wrapper .slide.swiper-slide-active .image_date span.text {
    animation: animate_span 0.6s 1s linear forwards;
}

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


.landing_page_wrapper .slide .image_date h2 {
    font-size: var(--font-size-heading);
    max-width: 500px;
    color: var(--pure-white);
    font-weight: 600;
    font-family: var(--font-family-heading);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
    opacity: 0;
    transform: scale(.9);
}

.landing_page_wrapper .slide.swiper-slide-active .image_date h2 {
    animation: animate_a 0.6s 1s linear forwards;
}

.landing_page_wrapper .slide .image_date h2 .orange {
    color: var(--primary-orange);
    transform: translateY(60%);
    opacity: 0;
}

.landing_page_wrapper .slide.swiper-slide-active .image_date h2 .orange {
    animation: animate_orange 1s 1.3s forwards;
}

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

.landing_page_wrapper .slide .image_date a {
    padding: var(--space-sm) var(--space-md);
    color: var(--pure-white);
    border: 1px solid var(--primary-orange);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    display: block;
    transition: 1s ease-in-out;
    opacity: 0;
    transform: scale(.9);
}


.landing_page_wrapper .slide.swiper-slide-active .image_date a {
    animation: animate_a .4s .6s linear forwards;
}

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


.landing_page_wrapper .slide .image_date a:hover {
    background-color: var(--link-active-color);
}

/* Styling pagination bullets */
.landing_page .swiper-pagination-bullet {
    background-color: #fff;
    height: 10px;
    width: 30px;
    border-radius: 10px;
    transition: .5s var(--transition-ease);
}

.landing_page .swiper-pagination-bullet-active {
    background-color: var(--primary-orange);
}

.landing_page .swiper-button-next,
.landing_page .swiper-button-prev {
    color: #fff;
    height: 40px;
    width: 40px;
    background-color: var(--primary-orange);
    border-radius: 50%;
    top: 90%;
}

.landing_page .swiper-button-next::after,
.landing_page .swiper-button-prev::after,
.landing_page .swiper-button-next::before,
.landing_page .swiper-button-prev::before {
    font-size: 18px;
    font-weight: 400;
}

.landing_page .swiper-button-prev,
.landing_page .swiper-rtl .swiper-button-next {
    left: 92%;
    right: auto
}

.landing_page .swiper-button-next,
.landing_page .swiper-rtl .swiper-button-prev {
    right: 10px;
    left: auto
}

.landing_page .swiper-slide-button:hover {
    color: var(--primary-orange);
}

@media screen and (max-width:568px){
    .landing_page_wrapper .slide .image_date a{
        margin: 0 auto;
        text-align: center;
    }
}

/* track */
.track_form_index {
    width: 100%;
    height: 300px;
    background-image: url('../image/globus_image_small.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.track_form_index form {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -40%);
    max-width: 1000px;
    width: 100%;
    padding: 40px;
}

.track_form_index form h2 {
    color: var(--pure-white);
    font-size: var(--font-size-lg);
}

.track_form_index form input {
    font-size: 16px;
    width: 60%;
    padding: 15px 20px;
    border: none;
    background: var(--pure-white);
    outline: none;
    margin-top: 10px;
}

.track_form_index form input::placeholder {
    text-transform: capitalize;
    font-weight: 100;
    font-size: var(--font-size-md);
}

.track_form_index form button {
    background-color: var(--primary-orange);
    padding: 15px 20px;
    border: none;
    color: var(--pure-white);
    font-size: var(--font-size-md);
    text-transform: capitalize;
    margin-left: 10px;
    cursor: pointer;
}

/* track_order */

.tracking_display,
.track_order {
    width: 100%;
    height: 100%;
    background-image: url('../image/world.jpeg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    background-attachment: fixed;
    scroll-behavior: smooth;
    padding: 0 20px;
}

.track_order .heading {
    padding: 50px 0;
}

.track_order .heading h2 {
    position: relative;
    font-size: var(--font-size-sm);
    color: #555;
}

.tracking_display .map_h2::after,
.tracking_display .tracking_display_trace h1::after,
.tracking_display .tracking_display_flex .tracking_display_row h1::after,
.calculator .calculator_flex .flex_Row .title::after,
.franchise_container .franchise_flex .col .franchise_head>h2::after,
.agent_container .agent_flex .col h2::after,
.review_form .head h3::after,
.services .services_content .col:last-child h1::after,
.marquee-container h1::after,
footer.footer .footer_middle .footer_items h2::after,
.news-articles .head .title::after,
.features .feature_flex .features_row:nth-child(2) h2::after,
.track_order .heading h2::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background-color: var(--primary-orange);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
}

.track_order .heading h1 {
    font-size: var(--font-size-heading);
    max-width: 600px;
}

.track_order .heading h1 span {
    color: var(--primary-orange);
}

.track_order .track_order_row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin: 20px 0;
}

.track_order .track_order_item {
    padding: .8em 0;
}

.track_order .track_order_row .track_order_img {
    width: 80px;
    filter: var(--filter-1);
    transition: .5s var(--transition-ease);
}

.track_order .track_order_row .track_order_img:hover {
    transform: rotate(-85deg);
}

/* On hover, transform the image */
.track_order_item:hover .track_order_img img {
    transform: rotate(-85deg);
    transition: transform 0.3s ease;
    /* Smooth rotation */
}

.track_order .track_order_row .track_order_content {
    margin-top: 20px;
}

.track_order .track_order_row .track_order_content h2 {
    font-size: var(--font-size-md);
    color: var(--black);
}

.track_order .track_order_row .track_order_content p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
    color: #555;
    margin: 15px 0;
}

.track_order .track_order_row .track_order_content a {
    text-decoration: none;
    font-size: var(--font-size-sm);
    color: #555;
    position: relative;
}

.track_order .track_order_row .track_order_content a::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 4px;
    background-color: var(--primary-orange);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
}

/* inquery */
.inquery {
    width: 100%;
    min-height: 592px;
    padding: 0 20px;
    background-image: url('../image/section_back_1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.bracket_container {
    display: flex;
    max-width: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(-50%, -30%);
}

.inquery .bracket_wrapper {
    position: relative;
}

.inquery .bracket_wrapper .bracket>div {
    background: var(--primary-orange);
}

.inquery .bracket_wrapper .bracket .first_div {
    width: 40px;
    height: 10px;
    background-color: var(--primary-orange);
    position: absolute;
    top: 0;
    left: 12px;
}

.inquery .bracket_wrapper .bracket .second_div {
    width: 20px;
    height: 200px;
    background-color: var(--primary-orange);
    position: absolute;
    top: 0;
    bottom: 0;
}

.inquery .bracket_wrapper .bracket .third_div {
    position: absolute;
    top: auto;
    bottom: -100%;
    left: 12px;
    transform: translateY(100%);
    width: 40px;
    height: 12px;
    transition: transform .2s cubic-bezier(.55, .085, .68, .53) .2s, opacity 0s linear .4s;
}

.inquery .bracket_wrapper .bracket_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 40px;
    width: 100%;
    padding: 48px 0 48px 0;
    overflow: hidden;
}

.inquery :is(h3, p, a) {
    color: var(--pure-white);
}

.inquery .bracket_wrapper .bracket_content .title {
    font-size: var(--font-size-sm);
    font-weight: 300;
}

.inquery .bracket_wrapper .bracket_content .subtitle {
    font-size: var(--font-size-heading);
    letter-spacing: 2px;
    font-family: var(--font-family-base);
}

.bracket_container .text_content {
    max-width: 500px;
    margin: 20px auto;
    width: 100%;
    display: block;
    position: absolute;
    top: 100%;
    left: 45%;
    margin-top: 50px;
}

.bracket_container .text_content p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
    margin-bottom: 30px;
}

.blog .blog_col .link,
.bracket_container .text_content a {
    font-size: var(--font-size-sm);
    border: 1px solid var(--primary-orange);
    padding: 12px 20px;
    text-decoration: none;
    position: relative;
    border-radius: 8px;
}

.blog .blog_col .link::before,
.bracket_container .text_content a::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    border-radius: 8px;
    background-color: var(--primary-orange);
    transition: .5s var(--transition-ease);
    z-index: -1;
}

.blog .blog_col .link:hover::before,
.news-articles .news-item .link:hover::before,
.bracket_container .text_content a:hover::before {
    width: 100%;
}

/* calculator section start */
.calculator {
    max-width: 100%;
    width: 100%;
    background-image: url('../image/background14.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    padding: 40px 20px;
    z-index: 1;
    /* Ensure the content is above the overlay */
}

.calculator::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(21, 8, 59, 0.5);
    z-index: -1;
    /* Send the overlay behind the content */
}

.calculator .calculator_flex {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    justify-content: space-between;
}

.calculator .calculator_flex .flex_Row {
    flex: 1;
    height: 100%;
}

.calculator .calculator_flex .flex_Row .title {
    color: var(--primary-orange);
    font-size: clamp(10px, 1vw, 1.2rem);
    text-transform: uppercase;
    position: relative;
}


.calculator .calculator_flex .flex_Row .subtitle {
    font-size: clamp(14px, 2.5vw, 3.2rem);
    color: white;
    margin: 15px 0;
}

.calculator .calculator_flex .flex_Row .subtitle span {
    color: #ff6900;
}

.calculator .calculator_flex .flex_Row .text {
    font-size: clamp(13px, .9vw, 1rem);
    color: white;
    max-width: 500px;
    width: 100%;
    display: inline-block;
    line-height: 1.8;
    font-weight: 500;
}

.calculator .calculator_flex .flex_Row .flex_row_svgs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.calculator .calculator_flex .flex_Row .flex_row_svgs .svgs img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    filter: brightness(0) saturate(100%) invert(91%) sepia(73%) saturate(0%) hue-rotate(78deg) brightness(102%) contrast(102%);
    margin-bottom: 15px;
}

.calculator .calculator_flex .flex_Row .flex_row_svgs .svgs span {
    font-size: clamp(13px, 1.1vw, 1.4rem);
    color: white;
    margin-top: 20px;
}

.calculator .calculator_flex .flex_Row .calculator_form {
    padding: 25px;
    background: white;
    width: 100%;
}

.calculator .calculator_flex .flex_Row .calculator_form h3 {
    font-size: clamp(13px, 1.1vw, 1.4rem);
    color: #000;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}

.calculator .calculator_flex .flex_Row .calculator_form .input_flex {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.calculator .calculator_flex .flex_Row .calculator_form .input_flex select,
.calculator .calculator_flex .flex_Row .calculator_form .input_flex input {
    width: 100%;
    padding: 10px 13px;
    outline: 1px solid gray;
    border: none;
    margin: 10px 0;
}

.calculator .calculator_flex .flex_Row .calculator_form .input_flex input::placeholder {
    text-transform: capitalize;
    color: #555;
    font-family: var(--font-family-base);
}

.calculator .calculator_flex .flex_Row .calculator_form .input_checkboxs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0;
}

.calculator .calculator_flex .flex_Row .calculator_form .input_checkboxs .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calculator .calculator_flex .flex_Row .calculator_form .input_checkboxs label {
    font-size: clamp(13px, 1vw, 1.4rem);
    color: #555;
}

.calculator .calculator_flex .flex_Row .calculator_form button {
    width: 100%;
    max-width: 100%;
    padding: 15px 0;
    display: block;
    border: none;
    background: var(--primary-orange);
    color: white;
    text-transform: capitalize;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-family-base);
}

/* Styles for the Quote Popup */
.quote-popup {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Dark background */
    justify-content: center;
    align-items: center;
}

.track_popup {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    transform: translateY(100%);
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.track_popup.show {
    transform: translateY(0);
    visibility: visible;
}

.track_popup .container,
.quote-popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 400px;
    text-align: center;
}

.track_popup .container form .track_input,
.track_popup .container form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.track_popup .container form .track_input {
    margin-bottom: 14px;
}

.track_popup .container form h1 {
    font-size: clamp(14px, 1.8vw, 2rem);
    text-transform: uppercase;
    display: block;
    margin: 15px auto;
}

.track_popup .container form .track_input label {
    font-size: clamp(14px, 1vw, 1.1rem);
    margin-bottom: 10px;
    text-align: left;
}

.track_popup .container form .track_input input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    outline: 1px solid gray;
}

.track_popup .container form .track_input input::placeholder {
    text-transform: capitalize;
}

.track_popup .container form .button_flex {
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    gap: 12px;
    justify-content: space-between;
}
.track_popup .container form .button_flex > *{
    flex: 1;
}

.track_popup .container form .button_flex span,
.track_popup .container form .button_flex button {
    width: 100%;
    padding: 8px;
    cursor: pointer;
    color: #f0f0f0;
    outline: none;
    border: none;
    text-transform: capitalize;
    font-size: clamp(14px, 1vw, 1.1rem);
    font-family: var(--font-family-base);
}

.track_popup .container form .button_flex button:first-child {
    background: green;
}

.track_popup .container form .button_flex span {
    background: var(--primary-orange);
}

.quote-popup-content small.warning {
    font-size: clamp(12px, .8vw, 1rem);
    color: red;
    font-weight: 500;
    line-height: 1.1;
}


.quote-popup-content .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

.quote-popup-content button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.quote-popup-content button:hover {
    background-color: #45a049;
}



/* calculator section end */
/* features start */

.features {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 40px 20px;
}

.features .container .more_question a {
    display: block;
    margin: 30px auto;
    text-decoration: none;
    background: var(--primary-orange);
    padding: var(--space-xs);
    color: #fff;
    max-width: 300px;
    width: 100%;
    text-align: center;
    font-size: clamp(12px, .9vw, 1.1rem);
    border-radius: 10px;
    font-weight: 600;
}

.features .feature_flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.features .features_row {
    height: 100%;
}

.features .features_row:first-child {
    width: 50%;
}

.features .features_row:nth-child(2) {
    width: 50%;
}

.features .feature_flex .features_col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.features .feature_flex .features_col>* {
    padding: .8em 0;
}

.features .feature_flex .features_row:first-child h2 {
    font-size: var(--font-size-heading);
    background-color: var(--primary-orange);
    width: fit-content;
    padding: 10px 20px;
    color: var(--pure-white);
    margin: 10px 0;
}

.features .feature_flex .features_row:nth-child(2) h2 {
    font-size: var(--font-size-sm);
    position: relative;
    color: #555;
}

.features .feature_flex .features_row:nth-child(2) h1 {
    font-size: var(--font-size-heading);
    line-height: 1.5;
    margin-bottom: 10px;
}

.features .feature_flex .features_row:nth-child(2) h1 span {
    color: var(--primary-orange);
}

.features .feature_flex .features_row:nth-child(2) .title>* {
    padding: .2em 0;
}

.features .feature_flex .features_row:nth-child(2) .title p {
    font-size: var(--font-size-md);
    margin-bottom: 14px;
    line-height: var(--line-height);
}

.features .feature_flex .features_col h3 {
    font-size: var(--font-size-lg);
    color: var(--black);
    margin-bottom: 10px;
}

.features .feature_flex .features_col p {
    font-size: var(--font-size-sm);
    line-height: 1.9;
    max-width: 500px;
    width: 100%;
}

.features .feature_flex .features_col .feature_img {
    width: 50px;
    height: 50px;
    border: 3px solid var(--primary-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.features .feature_flex .features_col .feature_img img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    filter: var(--filter-1);
}

.features .feature_flex .features_col:hover .feature_img {
    border: 3px solid var(--black);
}

.features .feature_flex .features_col:hover .feature_img img {
    filter: unset;
}

/* .faq section start */
.features_row .items .faq_item {
    margin: 15px 0;
}

.features_row .items .faq_item .faq_question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    background: var(--primary-orange);
    box-shadow: var(--box-shadow-md);
    padding: 15px 20px;
}

.features_row .items .faq_item .faq_question img {
    width: 15px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7497%) hue-rotate(266deg) brightness(106%) contrast(101%);
}

.features_row .items .faq_item .faq_question h3 {
    font-size: var(--font-size-md);
    color: #f9f9f9;
}

.features_row .items .faq_item .faq_content_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--transition-ease);
}

.features_row .items .faq_item .faq_content_answer.show {
    max-height: 1000px;
}

.features_row .items .faq_item .faq_content_answer p {
    font-size: var(--font-size-sm) !important;
    color: #000;
    max-width: 900px;
    display: block;
    line-height: 1.7;
    font-family: var(--font-family-heading);
    font-weight: 600;
}

/* features section end */

.blog,
.news-articles {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    background-color: #fff;
}

.section.fade-in {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 1s ease, transform 0.6s ease;
}

.section.fade-in.visible {
    opacity: 1;
    transform: translateX(0);
}

.section.zooms-in {
    transform: scale(0.8);
    /* Start smaller */
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.section.zooms-in.visible {
    transform: scale(1);
    /* Zoom to normal size */
    opacity: 1;
}

.section.bounce {
    transform: translateY(50px);
    /* Start below */
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease-out;
}

.section.bounce.visible {
    transform: translateY(0);
    /* Move to normal position */
    opacity: 1;
}

.section.from-bottom {
    opacity: 0;
    transform: translateY(50px);
    /* Example: slide from bottom */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.section.from-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

.section.rotate-in {
    opacity: 0;
    transform: translateY(50px);
    /* Example: slide from bottom */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.section.rotate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.section.revealtext {
    transform: rotateY(180deg);
    /* Start flipped */
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.section.revealtext.visible {
    transform: rotateY(0);
    /* Flip to normal position */
    opacity: 1;
}

.section.revealY {
    transform: translateY(-120px);
    transition: all .6s ease-in;
    opacity: 0;
}

.section.revealY.visible {
    opacity: 1;
    transform: translateY(0);
}

.section.from-left {
    opacity: 0;
    transform: translate(-40px, 60px);
    /* Slide diagonally */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.section.from-left.visible {
    opacity: 1;
    transform: translate(0);
    /* Return to original position */
}

.news-articles .head {
    margin: 30px 0;
}

.news-articles .head .title {
    font-size: var(--font-size-xs);
    color: #666;
    position: relative;
    margin-bottom: 10px;
}

.news-articles .head .subtitle {
    font-size: calc(var(--font-size-heading));
    color: var(--black);
    max-width: 700px;
}

/* Swiper container */
.news-articles .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Style each slide */
.blog .blog_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.blog .blog_col,
.news-articles .swiper-slide {
    background-color: #fff;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    position: relative;
}

.blog .blog_col:hover img,
.news-articles .news-item:hover img {
    transform: scale(1.05);
    border-radius: 8px;
    /* Zoom effect on hover */
}

.blog .blog_col .news_wrap,
.news-articles .swiper-slide .news_wrap {
    position: relative;
    padding: 0;
    margin: 0;
}

.blog .blog_col .news_wrap .plus,
.news-articles .swiper-slide .news_wrap .plus {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.80);
    transition: .4s var(--transition-ease);
    transform: scale(1.05);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.blog .blog_col:hover .news_wrap .plus,
.news-articles .swiper-slide:hover .news_wrap .plus {
    opacity: 1;
}

.blog .blog_col .news_wrap .plus a,
.news-articles .swiper-slide .news_wrap .plus a {
    color: var(--pure-white);
    width: 40px;
    height: 40px;
    background-color: var(--primary-orange);
    border-radius: 50%;
    font-size: var(--font-size-heading);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog .blog_col .news_wrap .plus img,
.news-articles .swiper-slide .news_wrap .plus img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(524%) hue-rotate(260deg) brightness(118%) contrast(100%);
}

/* Style news articles */
.blog .blog_col img,
.news-articles .news-item img {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    transition: .5s var(--transition-ease);
}



.blog .blog_col h3,
.news-articles .news-item h3 {
    font-size: var(--font-size-sm);
    margin-top: 10px;
    max-width: 300px;
}

.blog .blog_col .news-summary,
.news-articles .news-item .news-summary {
    font-size: var(--font-size-xs);
    color: #666;
    margin-top: 10px;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: start;
}

.blog .blog_col .news-summary a,
.news-articles .news-item .news-summary a {
    font-size: var(--font-size-xs);
    color: #666;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
}

.blog .blog_col .news-summary span,
.news-articles .news-item .news-summary span {
    display: inline-block;
    /* Ensures it behaves like a block-level element */
    width: 20px;
    height: 2px;
    background: var(--primary-orange);
    /* Add color */
    margin: 0 10px;
    /* Optional: adds spacing before the line */
}

.blog .blog_col .title,
.news-articles .news-item .title {
    color: #000;
    font-size: var(--font-size-md);
    text-decoration: none;

}

.blog .blog_col .title h3 {
    margin-bottom: 30px;
}

.news-articles .news-item .title h3 {
    margin-bottom: 20px;
    font-size: clamp(12px, 1vw, 1.1rem);
}

.blog .blog_col .link,
.news-articles .news-item .link {
    color: #333333;
    cursor: pointer;
}

/* Pagination bullets */
.news-articles .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.7;
}

.news-articles .swiper-pagination-bullet-active {
    background-color: #ff6600;
    opacity: 1;
}

/* Navigation buttons */
.news-articles .swiper-button-next,
.news-articles .swiper-button-prev {
    color: var(--pure-white);
    background-color: var(--primary-orange);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: none;
}


/* Show navigation buttons when hovering over the swiper container */
.news-articles .swiper-container:hover .swiper-button-next,
.news-articles .swiper-container:hover .swiper-button-prev {
    display: flex;
}

/* Optional: Add transition for smooth appearance */
.news-articles .swiper-button-next,
.news-articles .swiper-button-prev {
    transition: opacity 0.3s ease;
    opacity: 0.5;
    /* Slightly transparent */
}

.news-articles .swiper-button-next:hover,
.news-articles .swiper-button-prev:hover {
    opacity: 1;
    /* Full opacity when hovering on the buttons */
}

.news-articles .swiper-button-next::after,
.news-articles .swiper-button-prev::after {
    font-size: 18px;
}

/* partners marquee start */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

.marquee-container {
    width: auto;
    margin: auto;
    overflow: hidden;
    position: relative;
    padding: 40px 20px;
}

.marquee-container h1 {
    margin: 30px 0;
    font-size: var(--font-size-heading);
    position: relative;
}

.marquee-container .marquee-content {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
    align-items: center;
    justify-content: space-between;
}

.marquee-container .marquee-content .marquee {
    height: 100%;
    width: 250px;
}

/* partners marquee end */

/* about us start */
.about_banner.agent {
    background-image: url('../image/background14.jpg');
}

.about_banner.news {
    background-image: url('../image/world3.jpg');
}

.about_banner {
    width: 100%;
    height: 400px;
    background-image: url('../image/banner2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
}

.about_banner .wrap {
    position: absolute;
    left: 10%;
}

.about_banner h3 {
    color: #fff;
    font-size: var(--font-size-sm);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.about_banner h1 {
    font-size: var(--font-size-heading);
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 45%, #ff6900 55%);
    padding: 20px 60px;
    color: var(--pure-white);
}

/* service  start*/
.services {
    margin: 30px 0;
    padding: 40px 20px;
    width: 100%;
}

.services .head {
    margin: 30px 0;
    max-width: 600px;
}

.services .head h1 {
    font-size:var(--font-size-heading);
    line-height: var(--line-height);
}

.services .head span {
    font-size: var(--font-size-heading);
    color: var(--primary-orange);
    font-weight: 600;
    font-family: var(--font-family-base);
}

.services .services_content {
    width: 100%;
    display: flex;
    align-items: stretch;
    /* Ensures full height */
    justify-content: space-between;
    gap: 20px;
}

.services .services_content .col {
    width: 100%;
    /* Adjusted to allow space for the line */
    height: 100%;
}

.services .services_content .col:first-child {
    width: 80%;
    border-right: 2px solid red;
}

.services .services_content .col:last-child {
    width: 20%;
}

.services .services_content .line {
    display: block;
    width: 2px;
    /* Adjust the thickness of the line */
    background-color: red;
    /* Line color */
    height: 100%;
    /* Full height of the container */
    align-self: stretch;
    /* Stretch the line to align with the columns */
    margin: 0 10px;
    /* Space between the line and the columns */
}

.services .services_content .col .bracket_service {
    position: relative;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.services .services_content .col .bracket_service::before,
.services .services_content .col .bracket_service::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background-color: var(--primary-orange);
}

.services .services_content .col .bracket_service::before {
    left: -5px;
}

.services .services_content .col .bracket_service::after {
    right: -5px;
}

.services .services_content .col .bracket_service h3 {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    max-width: 500px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.services .services_content .header_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    background: #000;
    box-shadow: var(--box-shadow-md);
}

.services .services_content .header_text h2 {
    font-size: var(--font-size-xl);
}

.services .services_content .header_text img {
    width: 20px;
    transform: rotate(90deg);
    filter: var(--filter-1);
}

.services .services_content .header_textcontent {
    width: 100%;
    border: 1px solid #666;
    padding: 10px;
}

.services .services_content .header_textcontent .tabs {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.services .services_content .header_textcontent .tabs h3 {
    font-size: var(--font-size-md);
    background: #f0f0f0;
    padding: 10px 15px;
}

.services .services_content .header_textcontent .tabs h3.active {
    background: var(--primary-orange);
}

.services .services_content .header_textcontent .content_list {
    border: 1px solid #666;
    padding: 10px 25px;
}

.services .services_content .header_textcontent .content_list p strong {
    font-size: var(--font-size-lg);
}

.services .services_content .header_textcontent .content_list ul li {
    list-style-type: decimal;
}

.services .services_content .header_textcontent .content_list ul li,
.services .services_content .header_textcontent .content_list p {
    font-size: var(--font-size-sm);
}

.services .services_content .header_textcontent .content_list>*,
.services .services_content .wrap>* {
    padding: 10px 0;
}

.services .services_content .header_textcontent .content form {
    box-shadow: var(--box-shadow-md);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.services .services_content .header_textcontent .content form textarea {
    width: 100%;
    height: 100px;
}

.services .services_content .header_textcontent .content form input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    outline: 2px solid #666;
}

.services .services_content .header_textcontent .content form button {
    max-width: 300px;
    padding: 15px 20px;
    background: var(--primary-orange);
    border: none;
    text-transform: uppercase;
    font-family: var(--font-family-heading);
}

.services .services_content .wrap p {
    font-size: var(--font-size-sm);
    font-weight: 300;
    font-family: var(--font-family-heading);
    max-width: 900px;
    line-height: var(--line-height);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.services .services_content .wrap ul {
    padding: 0 1.1em;
}

.services .services_content .wrap ul li {
    padding: .3em 0;
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
    font-weight: 600;
}

.services .services_content .col:last-child h1 {
    position: relative;
    font-size: var(--font-size-lg);
}

.services .services_content .col:last-child .col_menu {
    list-style: none;
}

.services .services_content .col:last-child .col_menu .col_menu_list {
    display: block;
    padding: .4em 0;
    position: relative;
}

.services .services_content .col:last-child .col_menu .col_menu_list a {
    color: #555;
    text-decoration: none;
    font-size: var(--font-size-md);
    position: relative;
    transition: all .5s var(--transition-ease);
}


.services .services_content .col:last-child .col_menu .col_menu_list a:hover {
    color: var(--primary-orange);
}

.services .services_content .col:last-child .col_menu .col_menu_list a::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-orange);
    transition: width .5s var(--transition-ease);
}

.services .services_content .col:last-child .col_menu .col_menu_list a:hover::after {
    width: 100%;
}

.services .services_content .col:last-child .img {
    width: 100%;
    margin: 40px 0;
}

.services .services_content .col_wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.services .services_content .col_wraps .title,
.services .services_content .col_wrap .title {
    font-size: var(--font-size-md);
    letter-spacing: 1.2;
    color: var(--primary-orange);
    margin-bottom: 8px;
    font-weight: 600;
    font-family: var(--font-family-heading);
    text-align: center;
}

.services .services_content .col_wraps {
    margin: 25px 0;
}

.services .services_content .col_wraps,
.services .services_content .col_wrap .content {
    flex: 1;
    box-shadow: var(--box-shadow-lg);
    background: #fff;
    padding: 20px;
}

.services .services_content .col_wraps p,
.services .services_content .col_wrap .content p {
    font-size: var(--font-size-sm);
    line-height: 1.9;
    display: block;
    font-weight: 500;
}

/* service  end*/


/* vision start */
.vision {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    background-color: #f0f0f0;
}

.vision .flex .items {
    flex: 1;
    background-color: #fff;
    box-shadow: var(--box-shadow-md);
    padding: 30px;
}

.vision .flex .items .vision_img {
    width: 60px;
    height: 60px;
    border: 4px solid var(--primary-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.vision .flex .items .vision_img img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    filter: var(--filter-1);
    display: inline-block;
    margin: 0 auto;
}

.vision .flex .items .vision_content {
    margin: 20px 0;
}

.vision .flex .items .vision_content h3 {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: 10px;
}

.vision .flex .items .vision_content p {
    font-size: var(--font-size-md);
    line-height: 1.9;
    text-align: center;
}

/* vision send */

/* counter section start */
.counter {
    padding: 3em 2em;
    background-image: url('../image/globus_image_large.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    position: relative;
}

.counter::before {
    position: absolute;
    content: '123K.';
    left: 20%;
    font-size: calc(var(--font-size-heading) + 200px);
    font-weight: 700;
    color: rgba(94, 91, 91, 0.5);
    text-align: left;
    z-index: 1;
    /* Behind the .head */
}

.counter .head {
    text-align: left;
    margin: 40px;
    max-width: 600px;
    z-index: 2;
    /* Above the ::before pseudo-element */
    position: relative;
    /* Ensure it respects z-index */
}


.counter .head h1 {
    font-size: var(--font-size-heading);
}

.counter .counter_wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 4em 2em;
}

.counter .counter_wrap .counter_flex {
    position: relative;
}

.counter .counter_wrap .counter_flex h1 {
    color: #000;
    font-size: var(--font-size-heading);
    margin-bottom: .2em;
}

.counter .counter_wrap .counter_flex h3 {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    font-family: var(--font-family-heading);
    position: relative;
}


.counter .counter_wrap .counter_flex h3::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    background: #fff;
}

/* counter section end */

/* about_team section start */
.about_team {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    background: #f0f0f0;
}

.about_team .head {
    margin: 40px 0;
}

.about_team .head .title {
    font-size: var(--font-size-xs);
    color: #666;
    position: relative;
    margin-bottom: 10px;
}

.about_team .team_display .content .name::after,
.about_team .head .title::after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 4px;
    background: var(--primary-orange);
    margin-left: 10px;
}

.about_team .head .subtitle {
    font-size: var(--font-size-heading);
    font-family: var(--font-family-heading);
    text-transform: uppercase;
    letter-spacing: 1.2;
}

.about_team .about_team_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1em;
}

.about_team .about_team_grid .col {
    position: relative;
}

.about_team .about_team_grid .col .team_img {
    margin-bottom: 15px;
    position: relative;
}

.about_team .about_team_grid .col .team_img img {
    border-radius: 10px;
    display: block;
    width: 100%;
    height: 100%;
}

.about_team .about_team_grid .col .view_more {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.80);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: .5s var(--transition-ease);
}

.about_team .about_team_grid .col .team_img:hover .view_more {
    opacity: 1;
    visibility: visible;
}

.about_team .about_team_grid .col .view_more a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-orange);
    padding: 15px 50px;
    color: var(--pure-white);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-family: var(--font-family-base);
}


.about_team .about_team_grid .col .team_content {
    text-align: center;
}

.about_team .about_team_grid .col .team_content h2 {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    font-family: var(--font-family-base);
}

.about_team .about_team_grid .col .team_content span {
    display: inline-block;
    width: 30px;
    height: 4px;
    background: var(--primary-orange);
    margin: 0;
}

.about_team .about_team_grid .col .team_content .name {
    color: var(--primary-orange);
}

.about_team .more_link {
    margin: 60px auto;
    display: block;
}

.about_team .more_link a {
    text-decoration: none;
    padding: 15px 40px;
    background-color: var(--primary-orange);
    color: var(--pure-white);
    margin: 60px auto;
    display: block;
    width: fit-content;
}

.about_team .team_display {
    position: fixed;
    top: 0;
    right: 0;
    padding: 30px;
    width: 400px;
    height: 100vh;
    background: var(--pure-white);
    box-shadow: var(--box-shadow-md);
    z-index: 999;
    overflow: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: all .5s var(--transition-ease);
}

.about_team .team_display.show {
    transform: translateX(0);
    visibility: visible;
}

.about_team .team_display .close {
    margin: 0 0 20px 0;
    cursor: pointer;
}

.about_team .team_display .close img {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.about_team .team_display .content .name {
    font-size: var(--font-size-sm);
    margin: 10px 0 2px 0;
    color: #666;
    position: relative;
}

.about_team .team_display .content .title {
    font-size: var(--font-size-md);
    margin: 0 0 5px 0;
}

.about_team .team_display .content p {
    font-size: var(--font-size-sm);
    font-weight: 400;
    font-family: var(--font-family-base);
    line-height: 1.7;
    max-height: 300px;
    /* Limit the height initially (adjust as needed) */
    overflow: hidden;
    /* Hide content beyond max-height */
    transition: max-height 0.3s ease-in-out;
    padding: .2em;
    /* Smooth transition when expanding */
}

.about_team .team_display .content p::-webkit-scrollbar {
    width: 2px;
    background: var(--primary-orange);
}

.about_team .team_display .content p.expanded {
    max-height: 1000px;
    overflow-y: auto;
    /* A large value to ensure it shows the full content */
}

.about_team .team_display .content .view_more {
    margin: 15px 0;
}

.about_team .team_display .content .view_more button {
    border: 1px solid var(--primary-orange);
    padding: 15px 40px;
    background-color: var(--primary-orange);
    color: var(--pure-white);
    font-size: var(--font-size-md);
    cursor: pointer;
}

/* about_team section end */
/* about us end */

/* blog page start */
.breadcrumbs {
    width: 100%;
    height: 100%;
    padding: 40px;
    position: relative;
}

.breadcrumbs .container {
    margin-top: -100px;
    background-color: #fff;
    box-shadow: var(--box-shadow-md);
    padding: 40px;
}

.breadcrumbs .container .breadcrumbs_ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    gap: 15px;
}

.breadcrumbs .container .breadcrumbs_ul span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--primary-orange);
}

.breadcrumbs .container .breadcrumbs_ul .breadcrumbs_list a {
    color: #666;
    text-decoration: none;
}

.breadcrumbs .container .breadcrumbs_ul .breadcrumbs_list:last-child a {
    color: black;
}

/* news_wrap start */
.news_wrap {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
}

.news_wrap .news_wrap_flex,
.news_wrap .news_wrap_textlink,
.news_wrap .news_wrap_head {
    display: flex;
    align-items: center;
    gap: 10px;
}


.news_wrap .news_wrap_head h4 {
    font-weight: 400;
    font-size: var(--font-size-sm);
    color: #666;
}

.news_wrap .news_wrap_head span {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--primary-orange);
}

.news_wrap .news_wrap_textlink h1 {
    font-size: var(--font-size-heading);
}

.news_wrap .news_wrap_textlink {
    justify-content: space-between;
    margin: 40px 0;
}

.news_wrap .news_wrap_textlink .img {
    width: 60px;
    height: 60px;
    background: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news_wrap .news_wrap_textlink .img img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(26deg) brightness(107%) contrast(101%);
}

.news_wrap .news_wrap_flex .socials {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.news_wrap .news_wrap_flex .socials a {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;
    background: #f0f0f0;
    box-shadow: var(--box-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s var(--transition-ease);
}

.news_wrap .news_wrap_flex .socials a:hover {
    box-shadow: unset;
}

.news_wrap .news_wrap_flex .socials a img {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.news_wrap .news_wrap_flex .text_content {
    margin-left: 50px;
    max-width: 100%;
    box-shadow: var(--box-shadow-md);
    background: #f0f0f0;
    padding: 20px 40px;
    font-family: var(--font-family-heading);
}

.news_wrap .news_wrap_flex .text_content p {
    font-size: var(--font-size-md);
    line-height: var(--line-height);
}

/* news_wrap end */
/* review_form start */
.review_form {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
}

.review_form .head h3 {
    color: #555;
    font-size: var(--font-size-md);
    position: relative;
}

.review_form .head p {
    color: #666;
    font-size: var(--font-size-sm);
    margin-top: 10px;
}

.review_form .review_form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.review_form .review_form input,
.review_form .review_form textarea {
    outline: none;
    border: .5px solid var(--primary-orange);
}

.review_form .review_form .form_control_text_area {
    resize: none;
    width: 100%;
    min-height: 140px;
    padding: 10px 15px;
}

.review_form .review_form .text_control_input {
    width: 100%;
    padding: 12px 15px;
}

.review_form .review_form .text_control_input::placeholder {
    text-transform: capitalize;
    font-weight: 300;
    color: #a2a0a0;
    font-size: var(--font-size-md);
    font-family: var(--font-family-heading);
}

.review_form .review_form .check_flex label {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
}

.review_form .review_form button {
    max-width: 300px;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    color: #fff;
    background: var(--primary-orange);
    margin-top: 10px;
    font-weight: 500;
    font-family: var(--font-family-heading);
}

/* review_form end */
/* blog page end */

/* tabs_container section start */

.tabs_container {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
}

.tabs_container .tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 20px;
}

.tabs_container .tabs h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    background-color: #f0f0f0;
    padding: 20px 40px;
}

.tabs_container .tabs .active {
    background: var(--primary-orange);
    color: var(--pure-white);
    transition: .5s var(--transition-ease);
}

.services .services_content .header_textcontent .tab_contents>div,
.tab_content>div {
    display: none;
}

.services .services_content .header_textcontent .tab_contents .active,
.tab_content .active {
    display: block;
}

.tabs_container .tab_content .content h3 {
    font-size: var(--font-size-heading);
    margin-bottom: 8px;
}

.tabs_container .tab_content .content p {
    font-size: var(--font-size-md);
    line-height: var(--line-height);
    color: #666;
    font-family: var(--font-family-heading);
    margin-bottom: 15px;
    max-width: 700px;
}

.tabs_container .tab_content .content p.first_p,
.tabs_container .tab_content .content p.last_p {
    margin-bottom: 30px;
}

.tabs_container .tab_content .content a {
    text-decoration: none;
    border: 1px solid var(--primary-orange);
    background: var(--primary-orange);
    color: #fff;
    padding: 20px 40px;
}

.tab_contentflex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.tab_contentflex:first-child>div {
    width: 50%;
}

.tab_contentflex:first-child .swiper {
    width: 100%;
    height: 100%;
}

.tab_contentflex:first-child .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab_contentflex:first-child .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tab_contentflex:last-child>div {
    width: 50%;
}

.tab_contentflex:last-child .swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.tab_contentflex:last-child .swiper-slide {
    background-size: cover;
    background-position: center;
}

.tab_contentflex:last-child .swiper3 {
    height: 20%;
    bottom: 10px;
    margin-top: -60px;
    border-top: 2px solid #fff;
}

/* Style for non-active swiper slides */
.tab_contentflex:last-child .swiper3 .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    transition: .5s var(--transition-ease);
    position: relative;
    /* Important for overlay positioning */
}

/* White overlay for non-active slides */
.tab_contentflex:last-child .swiper3 .swiper-slide:not(.swiper-slide-thumb-active)::after {
    content: '';
    /* Create an empty overlay */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    /* White overlay with transparency */
    z-index: 1;
    /* Ensures the overlay is above the slide content */
}

/* Make active slide more visible */
.tab_contentflex:last-child .swiper3 .swiper-slide-thumb-active {
    opacity: 1;
    box-shadow: var(--box-shadow-md);
    z-index: 2;
    /* Ensure active slide is above other slides */
}

.tab_contentflex:last-child .swiper3 .swiper-slide img {
    display: block;
    width: 100%;
    height: 70px;
    object-fit: cover;
}

.tabcontentflex_swiper_container .swiper-button-next,
.tabcontentflex_swiper_container .swiper-button-prev {
    background: var(--primary-orange);
}

.tabcontentflex_swiper_container .swiper-button-next::after,
.tabcontentflex_swiper_container .swiper-button-prev::after {
    font-size: var(--font-size-md);
}

/* tabs_container section end */

/* agent_container section start */
.franchise_container,
.agent_container {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    background-image: url('../image/world.jpeg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.agent_container .agent_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.agent_container .agent_flex .col {
    flex: 1;
}

.agent_container .agent_flex .col form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 13px;
}

.agent_container .agent_flex .col form .input_wrap {
    position: relative;
}

.agent_container .agent_flex .col form .input_wrap input {
    width: 100%;
    outline: 1px solid #666;
    padding: 10px 15px;
    border: none;
    margin-top: 10px;
}

.agent_container .agent_flex .col form .input_wrap textarea {
    width: 100%;
    resize: none;
    height: 100px;
    margin-top: 10px;
    padding: 10px 15px;
}

.agent_container .agent_flex .col form button {
    max-width: 140px;
    padding: 10px 15px;
    background: var(--primary-orange);
    border: none;
    color: var(--pure-white);
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
}

.agent_container .agent_flex .col h2 {
    font-size: var(--font-size-xs);
    position: relative;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.agent_container .agent_flex .col p {
    font-size: var(--font-size-sm);
    font-family: var(--font-family-heading);
    margin-bottom: 15px;
    line-height: 1.9;
    font-weight: 500;
}

/* agent_container section end */

/* franchise_container section start */
.franchise_container .franchise_flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.franchise_container .franchise_flex .col {
    flex: 1;
}

.franchise_container .franchise_flex .col .franchise_head>h2 {
    width: 100%;
    font-size: clamp(12px, 1.1em, 1.3vw);
    text-transform: uppercase;
    letter-spacing: 1.4;
    margin-bottom: 15px;
    position: relative;
}

.franchise_container .franchise_flex .col .franchise_head>p {
    font-size: var(--font-size-sm);
    margin-bottom: 10px;
    max-width: 600px;
    font-weight: 500;
    line-height: 1.9;
}

.franchise_container .franchise_flex .col .franchise_list {
    background: #f0f0f0;
    padding: 30px;
    width: 100%;
}

.franchise_container .franchise_flex .col .franchise_list h2 {
    font-size: var(--font-size-md);
    position: relative;
}

.franchise_container .franchise_flex .col .franchise_list p {
    font-size: var(--font-size-sm);
    max-width: 600px;
    display: block;
    line-height: 1.8;
}

.franchise_container .franchise_flex .col .franchise_list .franchise_li {
    list-style: none;
    margin-top: 20px;
}

.franchise_container .franchise_flex .col .franchise_list .franchise_li li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.franchise_container .franchise_flex .col .franchise_list .franchise_li li img {
    width: 10px;
    filter: var(--filter-1);
}

.franchise_container .franchise_flex .col .franchise_list .franchise_li li span {
    font-size: var(--font-size-sm);
    width: 100%;
}

/* franchise_form */
.franchise_form {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    background: url('../image/globus_image_large.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.franchise_form .franchise_form_flex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.franchise_form .franchise_form_flex .col {
    flex: 1;
    width: 100%;
    height: 100%;
}

.franchise_form .franchise_form_flex>span {
    width: 2px;
    height: 100%;
    background: red;
    color: red;
    display: inline-block;
}

.franchise_form .franchise_form_flex .col h2 {
    font-size: var(--font-size-md);
    color: #f0f0f0;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.franchise_form .franchise_form_flex .col p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
    color: #f9f9f9;
    margin-bottom: 10px;
    font-weight: 500;
    font-family: var(--font-family-heading);
}

.franchise_form .franchise_form_flex .col a {
    text-decoration: none;
    color: #000;
}

.franchise_form .franchise_form_flex .col a h1 b {
    font-size: var(--font-size-heading);
}

.franchise_form .franchise_form_flex .col form {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.franchise_form .franchise_form_flex .col form .input_flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.franchise_form .franchise_form_flex .col form .input_row input,
.franchise_form .franchise_form_flex .col form .input_flex input {
    width: 100%;
    padding: 13px 15px;
    border: none;
    outline: none;
    outline-color: 1px solid #666;
    background: var(--pure-white);
}

.franchise_form .franchise_form_flex .col form .input_row input::placeholder,
.franchise_form .franchise_form_flex .col form .input_flex input::placeholder {
    text-transform: capitalize;
    font-family: var(--font-family-heading);
}

.franchise_form .franchise_form_flex .col form .input_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.franchise_form .franchise_form_flex .col form button {
    max-width: 300px;
    border: none;
    background: #ff6900;
    color: var(--pure-white);
    box-shadow: var(--box-shadow-md);
    margin-top: 15px;
    text-transform: capitalize;
    padding: 10px 15px;
    cursor: pointer;
}

/* franchise_container section end */

/* contact_us page start */

.bg_sec {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--font-family-heading);
    width: 100%;
    height: 100%;
    padding: 40px 20px;

}

.faq {
    background-image: url('../image/world2.jpg');
}

.address_container {
    background: url('../image/world2.jpg');
}

.contact_us {
    background-image: url('../image/world.jpg');
}

.address_container .address_flex,
.contact_us .contactus_flex {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.address_container .address_flex .items,
.contact_us .col {
    flex: 1;
    width: 100%;
    height: 100%;
}

.contact_us .col .head {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--black);
}

.contact_us .col .head h1 {
    font-size: var(--font-size-heading);
}

.contact_us .col .head h3 {
    font-size: var(--font-size-md);
    color: #555;
}

.contact_us .col .bracket {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 15px;
}

.contact_us .col .bracket_wrap {
    width: 10px;
    height: 200px;
    top: 0;
    left: 0;
    position: absolute;
    background: var(--primary-orange);
}

.contact_us .col .bracket .first_div {
    position: absolute;
    width: 40px;
    height: 6px;
    background: var(--primary-orange);
    top: 0;
}

.contact_us .col .bracket .second_div {
    position: absolute;
    width: 40px;
    height: 6px;
    background: var(--primary-orange);
    bottom: 0;
}

.contact_us .col .bracket h3 {
    font-size: var(--font-size-md);
    position: absolute;
    top: 40px;
    left: 30px;
    max-width: 400px;
    text-transform: uppercase;
}

.contact_us .col iframe {
    height: 400px;
    position: relative;
    display: none;
}

.contact_us .col form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact_us .col form .form_input {
    width: 100%;
}

.contact_us .col form .form_input input {
    width: 100%;
    padding: 15px 20px;
    margin-top: 10px;
    font-size: 16px;
}

.contact_us .col form .form_input label {
    font-size: var(--font-size-sm);
}

.contact_us .col form .form_input textarea {
    width: 100%;
    resize: none;
    height: 100px;
    font-size: 16px;
    margin-top: 10px;
}

.contact_us .col form button {
    max-width: 300px;
    padding: 15px 20px;
    border: none;
    background: var(--primary-orange);
    color: var(--pure-white);
    text-transform: uppercase;
    font-family: var(--font-family-heading);
    cursor: pointer;
}

/* .address_container */
.address_container .address_flex {
    align-items: center;
}

.address_container .address_flex .items {
    display: block;
    margin: 0 auto;
}

.address_container .address_flex .items img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.address_container .address_flex .items :is(address, h2, a) {
    text-align: center;
}

.address_container .address_flex .items h2 {
    text-transform: uppercase;
    margin: 20px auto;
    display: block;
    font-size: var(--font-size-heading);
}

.address_container .address_flex .items address {
    max-width: 300px;
    display: block;
    margin: 0 auto;
    color: #f9f9f9;
    font-size: var(--font-size-sm);
}

.address_container .address_flex .items a {
    display: block;
    margin: 0 auto;
    text-decoration: none;
    color: var(--primary-blue);
    font-weight: 600;
    width: fit-content;
    font-size: var(--font-size-sm);
}

/* contact_us page end */

/* .faq section end */

/* tracking_display start */
.tracking_display {
    padding: 0 20px 40px 20px;

}

.tracking_display .tracking_display_flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--font-family-heading);
    padding: 10px 8px;
}

.tracking_display .tracking_display_trace {
    margin-bottom: 20px;
}


.tracking_display .map_h2,
.tracking_display .tracking_display_trace h1,
.tracking_display .tracking_display_flex .tracking_display_row h1 {
    font-size: clamp(13px, 1.2vw, 1.3rem);
    margin: 20px 0;
    color: var(--primary-orange);
    position: relative;

}

.tracking_display .tracking_display_flex .tracking_display_row .display_details li:nth-child(even) {
    background: #e7e5e5;
}


.tracking_display .tracking_display_flex .tracking_display_row {
    flex: 1;
    height: 100%;
}

.tracking_display .tracking_display_flex .tracking_display_row .display_details li {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    padding: .8em 10px;
}

.tracking_display .tracking_display_flex .tracking_display_row .display_details li span {
    font-size: clamp(13px, .8vw, 1.1rem);
    text-transform: uppercase;
    font-weight: 600;
    width: 50%;
}

.tracking_display .tracking_display_flex .tracking_display_row .display_details li figcaption {
    font-size: clamp(12px, .9vw, 1.1rem);
    font-weight: 600;

}

.tracking_display .tracking_display_grid {
    max-width: 100%;
    width: 100%;
}

.tracking_display .tracking_display_grid .items {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;

    padding: .8em 20px;
}

.tracking_display .tracking_display_grid .items>div {
    flex: 1;
    height: 100%;
}

.tracking_display .tracking_display_grid .items:nth-child(even) {
    background-color: var(--light-grey);
}


.tracking_display .tracking_display_grid h3 {
    font-size: clamp(13px, .9vw, 1rem);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.tracking_display .tracking_display_grid span {
    font-size: clamp(12px, .9vw, 1.1rem);
    font-weight: 500;
    color: #555;
}

/* progress_bar */
.progress_bar {
    position: relative;
}

.progress_bar .container {
    background: var(--light-grey);
    box-shadow: var(--box-shadow-md);
    padding: 30px;
}

.progress_bar .details {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.progress_bar .details .order h1 {
    text-transform: uppercase;
    font-size: clamp(12px, 1vw, 1.1rem);
}

.progress_bar .details .order h1 span {
    color: var(--primary-orange);
}

.progress_bar .details .date {
    font-size: clamp(12px, .9vw, 1rem);
}



.progress_bar .lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    place-items:center;
    gap: 1em;
}
@media screen and (max-width:768px){
    .progress_bar .lists{
         grid-template-columns: repeat(3, 1fr);
    }
}
.progress_bar .lists .list {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .8em;
    flex: 1 1 50px;
    text-align: center;
}

.progress_bar .lists .list p {
    font-size: clamp(12px, .9vw, 1rem);
}

.progress_bar .lists .list .img_wrap {
    width: 60px;
    height: 60px;
    background-color: var(--light-grey);
    box-shadow: var(--box-shadow-md);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: .5s var(--transition-ease);
}

.progress_bar .lists .list .img_wrap:hover {
    box-shadow: none;
}

.progress_bar .lists .list img {
    max-width: 27px;
    animation: blink 3s linear forwards;

}

/* progress_bar end */

/* timeline container */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 100px auto;
    background-image: url('../image/world.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    z-index: 1;
    /* Ensure the timeline itself stays above the pseudo-element */
}

.timeline::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 100%;
    background-color: var(--primary-orange);
    /* This color should now be visible */
    top: 0;
    left: 50%;
    margin-left: -3px;
    z-index: -1;
    /* Ensure the ::after element is above the background image */
    animation: moveline 6s linear forwards;
}


.timeline .timeline_container {
    padding: 10px 50px;
    position: relative;
    width: 50%;
    height: 100%;
    animation: movedown 1s linear forwards;
    opacity: 0;
}

.timeline .timeline_container .textbox {
    padding: 20px 30px;
    background-color: #fff;
    box-shadow: var(--box-shadow-lg);
    position: relative;
    border-radius: 6px;
    font-size: clamp(13px, 1vw, 1.2rem);
}

.timeline .timeline_container .textbox h2 {
    font-weight: 600;
}

.timeline .timeline_container .textbox small {
    font-size: clamp(13px, .9vw, 1.2rem);
    display: inline-block;
    margin-bottom: 15px;
}

.timeline .timeline_container:nth-child(odd) {
    left: 0;
}

.timeline .timeline_container:nth-child(odd) .arrow {
    height: 0;
    width: 0;
    position: absolute;
    z-index: 1;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid var(--primary-orange);
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.timeline .timeline_container:nth-child(even) .arrow {
    height: 0;
    width: 0;
    position: absolute;
    z-index: 1;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid var(--primary-orange);
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

.timeline .timeline_container:nth-child(even) {
    left: 50%;
}

.timeline .timeline_container img {
    position: absolute;
    width: 40px;
    height: 40px;
    object-fit: cover;
    background: #fff;
    box-shadow: var(--box-shadow-lg);
    border-radius: 50%;
    right: -20px;
    top: 32px;
    z-index: 999;
    animation: pulse 1s infinite linear;
}

.timeline .timeline_container:nth-child(even) img {
    left: -20px;
}


/* .tracking_display .progress_wrapper .progress_container .progress_span span {
    position: absolute;
    width: var(--tracker--dot-size);
    height: var(--tracker--dot-size);
    background: #e15241;
    border: 2px solid var(--body--background);
    box-shadow: var(--box-shadow-md);
    top: 50%;
       animation: pulse 1s infinite linear;
    left: var(--position);
    transform: translateY(-50%);
    border-radius: 50%;
    transition: left 0.5s var(--transition-ease);
    z-index: 10;
}

 */

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes movedown {
    0% {
        opacity: 1;
        transform: translateY(-30px);
    }

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

@keyframes moveline {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.5);
    }

    100% {
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
    }
}


@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



/* tracking_display end */
/* footer image */

footer.footer {
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    background-image: url('../image/globus_image_large_dark.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

footer.footer .upper_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border-bottom: 1px solid var(--pure-white);
}

footer.footer .upper_footer .footer_menu {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

footer.footer .upper_footer .footer_menu .footer_menulist a {
    font-size: var(--font-size-md);
    color: var(--pure-white);
    text-decoration: none;
}

footer.footer .upper_footer .footer_socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

footer.footer .upper_footer .footer_socials img {
    display: block;
    margin: 20px;
    height: 20px;
    object-fit: cover;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    cursor: pointer;
}

footer.footer .footer_middle {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin: 30px 0;
}

footer.footer .footer_middle .footer_items:first-child {
    margin-bottom: 15px;
}

footer.footer .footer_middle .footer_items .logo .logo_link {
    display: inline-block;
    background: white;
    max-width: 200px;
}

footer.footer .footer_middle .footer_items .logo img {
    width: 100%;
}

footer.footer .footer_middle .footer_items .logo address {
    color: #f9f9f9;
    font-size: var(--font-size-md);
    line-height: var(--line-height);
    margin: 20px 0;
    margin-bottom: 40px;
}

footer.footer .footer_middle .footer_items .logo .get_location {
    color: #f0f0f0;
    border: 1.5px solid #f0f0f0;
    font-size: var(--font-size-xs);
    padding: 20px 40px;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 20px;
}

footer.footer .footer_middle .footer_items h2 {
    color: #f0f0f0;
    font-size: var(--font-size-lg);
    margin-bottom: 10px;
    position: relative;
    width: max-content;
}

footer.footer .footer_middle .footer_items {
    list-style: none;
}

footer.footer .footer_middle .footer_items li {
    padding: .3em 0;
}

footer.footer .footer_middle .footer_items:last-child p,
footer.footer .footer_middle .footer_items li a {
    color: #f0f0f0;
    text-decoration: none;
}

footer.footer .footer_middle .footer_items:last-child p {
    line-height: var(--line-height);
    font-size: var(--font-size-sm);
    margin: 20px 0;
}

footer.footer .footer_middle .footer_items:last-child form {
    width: 100%;
}

footer.footer .footer_middle .footer_items:last-child form .input_wrap {
    position: relative;
}

footer.footer .footer_middle .footer_items:last-child form input {
    padding: 8px;
    max-width: 100%;
    outline: none;
    border: 1px solid #f0f0f0;
    font-size: 16px;
}

footer.footer .footer_middle .footer_items:last-child form input::placeholder {
    color: var(--black);
    text-decoration: none;
    text-transform: capitalize;
}

footer.footer .footer_middle .footer_items:last-child form button {
    padding: 10px;
    background-color: var(--primary-orange);
    border: none;
    color: #f0f0f0;
    font-size: var(--font-size-md);
    cursor: pointer;
}

footer.footer .footer_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #000;
    padding: 20px 40px;
}

footer.footer .footer_bottom p {
    color: var(--pure-white);
    font-size: var(--font-size-sm);
}

/* Scroll to Top Button Style */
#scrollToTopBtn {
    position: fixed;
    /* Fixes the button to a fixed position on the screen */
    bottom: 20px;
    /* Distance from the bottom of the page */
    /* Distance from the right of the page */
    background-color: #ff6600;
    /* Button background color */
    color: white;
    right: 0;
    /* Button text color */
    border: none;
    /* Remove default button border */
    border-radius: 50%;
    /* Make the button round */
    padding: 15px;
    /* Space inside the button */
    font-size: 20px;
    /* Font size of the icon */
    cursor: pointer;
    /* Pointer cursor on hover */
    display: none;
    /* Hide the button by default */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Optional shadow */
    z-index: 1000;
    /* Make sure the button is above other content */
}

#scrollToTopBtn:hover {
    background-color: #ff6900;
    /* Darker background on hover */
}


/* footer end */
@media screen and (min-width:1200px) {
    header .header_main .logo img {
        display: block;
        max-width: 300px;
        max-height: 80px;
        object-fit: cover;
        transform: scale(1.01);
        transition: .5s var(--transition-ease);
    }

    header .header_main .logo img:hover {
        transform: scale(1);
    }

    header .header_main .header_main_menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        gap: var(--space-sm);
        font-family: var(--font-size-heading);
        padding: 0 var(--space-xl);
        z-index: 999;
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu {
        position: absolute;
        top: 100%;
        /* This ensures it will be placed below the parent element */
        left: 0;
        width: 200px;
        background-color: #fff;
        /* Push the submenu down from the parent */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out;
        /* Animate opacity and transform */
        list-style: none;
        transform: translateY(-10px);
        /* Start slightly above the final position */
    }

    header .header_main .header_main_menu>.header_main_menu_list:hover .submenu {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
        /* Move to the final position */
        border-top: 4px solid var(--primary-orange);
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list {
        padding: .4em .5em;
        transition: .5s var(--transition-ease);
    }


    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list:hover {
        background: var(--primary-orange);
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list:hover a {
        color: #fff;
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list a {
        font-size: var(--font-size-sm);
        transition: .5s var(--transition-ease);
        color: var(--black);
        text-decoration: none;
    }

    .counter .counter_wrap .counter_flex:not(:last-child)::before {
        content: '';
        background: #fff;
        position: absolute;
        width: 2px;
        height: 3em;
        top: 50%;
        transform: translateY(-50%);
        right: -1em;
    }
}

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

    /* Style the hamburger icon (initial state) */
    /* Base style for the hamburger icon */
    .hamburger_menu {
        width: 30px;
        height: 3px;
        background-color: var(--primary-orange);
        border-radius: 5px;
        position: relative;
        transition: all 0.3s ease;
        /* Smooth transition for the change */
    }

    /* Create the before and after pseudo-elements to form the three lines */
    .hamburger_menu::before,
    .hamburger_menu::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 3px;
        background-color: var(--primary-orange);
        border-radius: 5px;
        transition: all 0.3s ease;
        /* Smooth transition for the lines */
    }

    /* Position the pseudo-elements */
    .hamburger_menu::before {
        top: -8px;
        /* Position the top line */
    }

    .hamburger_menu::after {
        bottom: -8px;
        /* Position the bottom line */
    }

    /* When the hamburger is active (menu opened), animate it */
    .toggle_btn.active .hamburger_menu {
        background-color: transparent;
        /* Hide the middle hamburger line */
    }

    /* The top line rotates to form the top of the X */
    .toggle_btn.active .hamburger_menu::before {
        transform: rotate(45deg);
        /* Rotate top line */
        top: 0;
        /* Center it */
    }

    /* The bottom line rotates to form the bottom of the X */
    .toggle_btn.active .hamburger_menu::after {
        transform: rotate(-45deg);
        /* Rotate bottom line */
        bottom: 0;
        /* Center it */
    }

    header .top_header .top_nav {
        display: none;
    }

    header .top_header {
        width: 100%;
        justify-content: flex-end;
    }

    header .top_header .socials_link {
        justify-content: space-between;
    }

    header .header_main.scrolled,
    header .header_main {
        padding: 12px;
    }

    header .header_main .logo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header .header_main .logo img {
        max-width: 150px;
    }

    header .header_main .header_main_menu {
        background: #fff;
        width: 300px;
        height: 100vh;
        position: fixed;
        top: 85px;
        left: 0;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: .5s var(--transition-ease);
        display: flex;
        flex-direction: column;
        padding: var(--space-xl);
        list-style: none;
    }

    header .header_main.scrolled .header_main_menu {
        top: 0;
    }

    header .header_main .header_main_menu.show {
        transform: translateX(0);
        z-index: var(--z-index-dropdown);
        box-shadow: var(--box-shadow-md);
    }


    header .header_main .header_main_menu .logo {
        display: block;
    }

    header .header_main .header_main_menu .header_main_menu_list {
        padding: 15px 0;
    }

    header .header_main .header_main_menu .header_main_menu_list>a {
        padding: 0;
        font-size: calc(var(--font-size-md) - 1px);
        text-transform: uppercase;
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu {
        list-style: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s var(--transition-ease);
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu.show {
        max-height: 1000px;
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list {
        padding: 8px 20px;
        transition: .5s var(--transition-ease);
        position: relative;
        list-style: none;
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list::before {
        position: absolute;
        content: '.';
        top: 15px;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--primary-orange);
        z-index: 1;
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list:hover {
        background: var(--primary-orange);
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list:hover a {
        color: var(--pure-white);
    }

    header .header_main .header_main_menu .header_main_menu_list .submenu .submenu_list a {
        font-size: var(--font-size-sm);
        color: #555;
        text-decoration: none;
        font-weight: 600;
    }

    header .header_main .header_main_menu .header_main_menu_list:hover::before {
        width: fit-content;
    }

    .landing_page_wrapper .slide .image_date {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .landing_page_wrapper .slide .image_date h2 {
        max-width: 100%;
        width: 100%;
        font-size: var(--font-size-heading);
    }

    .landing_page .swiper-button-prev,
    .landing_page .swiper-rtl .swiper-button-next {
        left: 85%;
        right: auto
    }

    .track_form_index {
        padding: 0 20px;
    }

    .track_form_index form {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .track_form_index form h2 {
        font-size: var(--font-size-md);
    }

    .track_form_index form input {
        width: 100%;
        margin-bottom: 15px;
    }

    .track_form_index form button {
        margin: 0;
    }

    /* .vision .flex .items Styling */
    .vision .flex .items {
        flex: 1 1 calc(50% - var(--space-sm));
        /* 50% width minus the gap for 2 items per row */
        background-color: #fff;
        box-shadow: var(--box-shadow-md);
        padding: 30px;
    }

    .timeline_container {
        width: 85%;
        height: 70vh;
        display: block;
        margin: 80px auto;
    }

    .timeline {
        margin: 50px auto;
        padding: 0 20px;
    }

    .timeline::after {
        left: 31px;
    }

    .timeline .timeline_container {
        width: 100%;
        padding-left: 80px;
        padding-right: 10px;
        margin: 0;
    }

    .timeline .timeline_container .textbox small {
        margin-bottom: 10px;
    }

    .timeline .timeline_container:nth-child(even) {
        left: 0;
    }

    .timeline .timeline_container:nth-child(even) img,
    .timeline .timeline_container:nth-child(odd) img {
        left: -8px;
    }

    .timeline .timeline_container:nth-child(even) .arrow,
    .timeline .timeline_container:nth-child(odd) .arrow {
        border-right: 15px solid var(--primary-orange);
        border-left: 0;
        left: -15px;
    }
}



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

    .bracket_container {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .inquery .bracket_wrapper .bracket .first_div {
        left: 12px;
    }

    .inquery .bracket_wrapper .bracket .second_div {
        width: 15px;
        height: 200px;
        background-color: var(--primary-orange);
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .inquery .bracket_wrapper .bracket .third_div {
        bottom: -5%;
    }

    .bracket_container .text_content {
        position: unset;
        top: unset;
        left: unset;
        display: block;
        margin: 0 auto;
        position: absolute;
        top: 100%;
        left: 0 !important;
        min-width: 100% !important;
        margin: 0;
        padding: 0 30px;
        margin-top: 30px;
    }


    .bracket_container .text_content p {
        max-width: 500px !important;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        font-size: var(--font-size-sm);
    }

    .features .feature_flex {
        flex-direction: column;
    }

    .features .features_row:first-child {
        width: 100%;
    }

    .features .features_row:nth-child(2) {
        width: 100%;
    }

    .counter::before {
        left: 5%;
        font-size: clamp(10em, 20vw, 100px);
    }

    .contact_us {
        height: 100%;
    }

    .contact_us .bracket {
        display: none;
    }

    .address_container .address_flex,
    .contact_us .contactus_flex,
    .franchise_form .franchise_form_flex .col form .input_flex,
    .franchise_form .franchise_form_flex,
    .franchise_container .franchise_flex,
    .agent_container .agent_flex,
    .tab_contentflex,
    .services .services_content .col_wrap {
        flex-direction: column;
    }

    .address_container .address_flex .items :is(address, a) {
        font-size: var(--font-size-md);
    }

    .address_container .address_flex .items h2 {
        margin: 10px auto;
    }

    .tab_contentflex {
        gap: 40px;
    }

    .tab_contentflex:last-child>div,
    .tab_contentflex:first-child>div {
        width: 100%;
    }

    .contact_us .col iframe {
        width: 100%;
        display: block;
        margin-top: 20px;
    }

    .tracking_display .tracking_display_flex {
        flex-direction: column;
        width: 100%;
        align-items: unset;
    }
}

@media screen and (max-width:560px) {
    header .header_main .header_main_menu {
        width: calc(100% - 70px);
    }

    .landing_page .swiper-button-prev,
    .landing_page .swiper-rtl .swiper-button-next {
        left: 70%;
        right: auto
    }

    .track_order .track_order_row {
        grid-template-columns: 1fr;
    }


    footer.footer .upper_footer .footer_menu,
    footer.footer .upper_footer {
        flex-direction: column;
        justify-content: unset;
        align-items: unset;
    }

    footer.footer .upper_footer .footer_socials img {
        flex: 0 1 45%;
        width: 10px;
    }

    .services .services_content {
        flex-direction: column;
        padding: 0 20px;
    }

    .services .services_content .col:first-child {
        width: 100%;
    }

    .services .services_content .col:last-child {
        width: 100%;
    }

    .vision .flex .items {
        flex: 1 1 100%;
        /* 100% width for each item */
        padding: 15px;
        /* Adjust padding if needed */
    }

    .counter .counter_wrap .counter_flex:not(:last-child)::before {
        content: '';
        background: #fff;
        position: absolute;
        width: 90%;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: -1em;
        bottom: -3em;
    }


    .counter::before {
        left: 5%;
        top: 50%;
        transform: translateY(-50%);
        font-size: clamp(20px, 20em, 20.1vw);
    }

    .blog .blog_grid,
    .about_team .about_team_grid {
        grid-template-columns: 1fr;
    }

    .about_team .team_display {
        width: 100%;
    }

    .franchise_container .franchise_flex .col .franchise_head>h2::after {
        all: unset;
    }

    .features {
        padding: 40px 30px;
    }

    .news_wrap .news_wrap_flex .socials {
        display: flex !important;
        flex-direction: row !important;
        margin-bottom: 10px;
    }

    .news_wrap .news_wrap_flex .socials a {
        width: 40px !important;
        height: 40px !important;
    }

    .news_wrap .news_wrap_flex .socials a img {
        width: 20px;
        height: 20px;
    }

    .news_wrap .news_wrap_flex .text_content {
        margin: 0;
        max-width: 100%;
        padding: 10px;
    }

    .news_wrap .news_wrap_flex .text_content p {
        line-height: 1.8;
        display: inline-block;
        margin: 0 auto;
        font-size: .9rem;
    }

    .news_wrap .news_wrap_flex {
        flex-direction: column;
    }

    .features .feature_flex .features_col {
        flex-direction: column;
        text-align: center;
        padding: 30px 0;
    }

    .calculator .calculator_flex .input_checkboxs,
    .calculator .calculator_flex .input_flex.last {
        flex-wrap: wrap;
    }

    .tracking_display .tracking_display_grid {
        grid-template-columns: repeat(2, 1fr);
        place-items: unset;
        gap: unset;
        grid-gap: 15px;
        align-items: flex-start;
    }
}

@media screen and (max-width: 600px){
    .calculator .calculator_flex {
        flex-direction:column;
    }
}