/* Only .trucking-headline-clear gets margin-top, not .page-headline-section */
.page-headline-section.trucking-headline-clear {
    margin-top: 130px;
}
/* Add margin-top to match the gap below headline */
.page-headline-section {
    margin-top: 130px;
}
.trucking-banner-bg.true-bg {
    background: url('../images/trucking_banner.png') center center/cover no-repeat;
    background-color: transparent !important;
    padding-left: 48px;
}
.trucking-banner-content-right {
    padding-left: 32px;
}
/* Trucking Companies Banner uses Job Sites banner CSS for full-width stretch */
.trucking-banner-section {
    width: 100%;
    background: transparent;
    padding: 0;
}
.trucking-banner-bg {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 0 20px;
    background: none;
}
.trucking-banner-content-right, .hero-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0;
}
.hero-banner-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
/* Old Job Sites banner styles removed - now using updated styles below around line 4770 */


/* Problem Statement Section - Match Job Sites */
.problem-statement-section {
    background-color: #fff;
    width: 100%;
    padding: 30px 20px;
}
.problem-statement-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.problem-statement-headline {
    font-size: 2rem;
    color: #68696D;
    text-align: center;
    margin: 0 0 20px 0;
    font-weight: 700;
}
.problem-statement-content {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
}
.problem-statement-text {
    flex: 1;
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
}
.problem-statement-text strong {
    font-weight: 700;
    color: #68696D;
}
.problem-statement-image {
    flex: 0 0 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.problem-statement-image img {
    max-width: 340px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(67,171,219,0.10);
}
@media (max-width: 900px) {
    .problem-statement-content {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }
    .problem-statement-image {
        width: 100%;
        justify-content: flex-start;
    }
    .problem-statement-image img {
        max-width: 100%;
    }
}
/* Trucking Companies Problem Statement Section */
.trucking-problem-section {
    background: #fff;
    padding: 64px 0 48px 0;
}
.trucking-problem-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}
.trucking-problem-text {
    flex: 1 1 380px;
    min-width: 320px;
}
.trucking-problem-headline {
    font-size: 2rem;
    color: #68696D;
    margin-bottom: 24px;
    font-weight: 700;
    text-align: center;
}
.trucking-problem-desc {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
}
.trucking-problem-desc strong {
    font-weight: 700;
    color: #68696D;
}
.trucking-problem-img {
    flex: 0 0 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trucking-problem-img img {
    max-width: 340px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(67,171,219,0.10);
}
@media (max-width: 900px) {
    .trucking-problem-container {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }
    .trucking-problem-img {
        width: 100%;
        justify-content: flex-start;
    }
    .trucking-problem-img img {
        max-width: 100%;
    }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; }

/* Contact Bar - Keep it visible */
.contact-bar {
    background: #43ABDB;
    height: 70px;
    display: flex;
    align-items: center;
    z-index: 999;
    margin-top: 70px; /* Push it below the fixed menu */
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-icon {
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon img {
    height: 30px;
    width: auto;
    transition: all 0.3s ease;
}

.social-icon:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-item {
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-item img {
    height: 30px;
    width: auto;
    transition: all 0.3s ease;
}

.contact-item:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Floating Menu */
.floating-menu {
    position: fixed; top: 0; left: 0; right: 0;
    background: #F9F8F8;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000; 
    height: 70px;
    display: flex;
    align-items: center;
}

.menu-container {
    max-width: 1200px; 
    margin: 0 auto;
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    padding: 0 20px;
    width: 100%;
}

.logo { 
    text-decoration: none; 
    flex-shrink: 0;
}
.logo-image { 
    height: 70px; 
    width: auto; 
}

.menu-items { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.solutions-group {
    position: relative;
}

.solutions-toggle {
    display: block;
}

.solutions-toggle.pressed {
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.25);
}

/* Match pressed state for Product & Pricing and About desktop toggles */
.product-toggle.pressed,
.about-toggle.pressed {
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.25);
}

.solutions-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px 0;
    display: none;
    z-index: 1200;
}
.product-group, .about-group {
    position: relative;
}

.product-submenu, .about-submenu {
    position: absolute;
    top: 100%;
    right: 0; /* align to right under the toggle */
    left: auto;
    padding: 10px 0;
    display: none;
    z-index: 1200;
}

.product-submenu.active, .about-submenu.active {
    display: block;
}
.mobile-product-group, .mobile-about-group {
    display: inline-block;
    vertical-align: top;
}

.mobile-product-submenu, .mobile-about-submenu {
    display: none;
    padding: 8px 0;
    margin: 5px 0 0 0;
    width: max-content;
    margin-left: auto;
    text-align: right;
}

.mobile-product-submenu.active, .mobile-about-submenu.active {
    display: block;
}

.solutions-submenu.active {
    display: block;
}

.submenu-button {
    display: block;
    margin-bottom: 8px;
}

.submenu-button:last-child {
    margin-bottom: 0;
}

.submenu-button img {
    height: 50px;
    width: auto;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.submenu-button:hover img {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 6px 12px rgba(0,0,0,0.22));
}

/* Mobile Solutions Submenu */
.mobile-solutions-group {
    position: relative;
}

/* Removed pressed shadow on mobile solutions toggle per design */

.mobile-solutions-submenu {
    display: none;
    padding: 8px 0;
    margin: 5px 0 0 0;
}

.mobile-solutions-submenu.active {
    display: block;
}

.mobile-submenu-button {
    display: block;
    margin-bottom: 8px;
}

.mobile-submenu-button:last-child {
    margin-bottom: 0;
}

.mobile-submenu-button img {
    height: 45px;
    width: auto;
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.mobile-submenu-button:hover img {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 6px 12px rgba(0,0,0,0.22));
}

/* Align mobile submenu to the right of the toggle */
.mobile-solutions-group {
    display: inline-block; /* behave like other buttons for centering */
    vertical-align: top;
}

.mobile-solutions-submenu {
    width: max-content;
    text-align: right;
    margin-left: auto; /* keep submenu aligned to right */
}

.menu-button {
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.menu-button img {
    height: 60px;
    width: auto;
    transition: all 0.3s ease;
}

.menu-button:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.menu-button:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Mobile menu toggle */
.mobile-menu-toggle { 
    display: none; 
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    padding: 10px;
}

/* Mobile dropdown menu */
.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #F9F8F8; /* match desktop menu background */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-shadow: none; /* remove drop shadow on mobile menu */
    text-align: center;
    z-index: 1001;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu .menu-button {
    display: inline-block;
    margin: 0 10px 15px 10px;
    text-align: center;
}

.mobile-menu .menu-button:last-child {
    margin-bottom: 0;
}

/* Mobile contact menu */
.mobile-contact-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #43ABDB;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1000;
    margin-top: 0;
}

.mobile-contact-menu.active {
    display: block;
}

.mobile-contact-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.mobile-contact-row:last-child {
    margin-bottom: 0;
}

.mobile-contact-item {
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-contact-item img {
    height: 30px;
    width: auto;
    transition: all 0.3s ease;
}

.mobile-contact-item:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Desktop buttons - hidden on mobile */
.menu-button .desktop-img {
    display: block;
}

.menu-button .mobile-img {
    display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .trucking-banner-section, .trucking-banner-bg {
        min-height: 180px;
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }
    .trucking-banner-bg {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .trucking-banner-bg {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    
    .mobile-menu-toggle { 
        display: block; 
    }
    
    .menu-items {
        display: none !important;
    }
    
    .menu-container {
        padding: 0 15px;
    }
    
    /* Show mobile buttons in dropdown */
    .mobile-menu .menu-button .desktop-img {
        display: none;
    }
    
    .mobile-menu .menu-button .mobile-img {
        display: block;
        height: 60px;
        width: auto;
    }
    
    /* Strip all extras from main-level mobile buttons */
    .mobile-menu .menu-button {
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mobile-menu .menu-button:hover,
    .mobile-menu .menu-button:active,
    .mobile-menu .menu-button:focus {
        background: none !important;
        box-shadow: none !important;
    }

    .mobile-menu .menu-button:hover img,
    .mobile-menu .menu-button:active img,
    .mobile-menu .menu-button:focus img {
        transform: none !important;
        filter: none !important;
    }
    
    /* Hide contact bar on mobile */
    .contact-bar {
        display: none;
    }
}

/* Hero Section - Fix mobile font sizes */
.hero-section {
    background: white;
    padding: 40px 20px 40px 20px;
    text-align: center;
    color: #43ABDB;
}

.hero-section h1 {
    color: #43ABDB;
    font-size: 2.5rem; /* Desktop size */
    margin-bottom: 0;
    font-weight: 700;
}

@media (max-width: 768px) {
    .hero-section {
        padding: 30px 20px 30px 20px;
        margin-top: 70px; /* Push it below the fixed menu on mobile */
    }
    
    .hero-section h1 {
        font-size: 1.8rem; /* Increased from 1.5rem - one size up */
    }
}

@media (max-width: 480px) {
    .hero-banner-section {
        background-size: cover;
        background-position: center;
        max-height: none;
        padding-top: 20px;
    }
    .hero-section h1 {
        font-size: 1.5rem; /* Increased from 1.2rem - one size up */
    }
}

/* Carousel Section */
.carousel-section {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 0 auto; /* Center the narrowed banner */
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Static Background */
.static-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #f8f9fa; /* Fallback background color */
}

.static-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform; /* Optimize for animations */
    backface-visibility: hidden; /* Improve performance */
    font-size: 0; /* Hide alt text in Firefox */
    color: transparent; /* Hide any text */
    image-rendering: optimizeSpeed; /* Prioritize speed over quality for fast loading */
}

/* Mobile banner positioning - show less of the banner */
@media (max-width: 768px) {
    .static-background img {
        object-position: center top; /* Show top portion of banner on mobile */
    }
}

/* Content Slides */
.content-slides {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3; /* Higher z-index to ensure content shows above banner */
    overflow: hidden;
}

.content-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease-in-out;
    cursor: pointer;
    transform: translateX(100%); /* Default: off screen right */
}

/* Active slide - in center */
.content-slide.active {
    transform: translateX(0) !important;
}

/* Slide going to the left (exit left) */
.content-slide.exit-left {
    transform: translateX(-100%) !important;
}

/* Slide going to the right (exit right) */
.content-slide.exit-right {
    transform: translateX(100%) !important;
}

/* When both active and exit classes, exit wins */
.content-slide.active.exit-left {
    transform: translateX(-100%) !important;
}

.content-slide.active.exit-right {
    transform: translateX(100%) !important;
}

/* Overlay Images */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.slide-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    font-size: 0; /* Hide alt text in Firefox */
    color: transparent; /* Hide any text */
}

/* Content (Image + Text) */
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 40px;
    z-index: 5; /* Highest z-index to ensure content always shows */
    max-width: 1000px;
    width: 90%;
}

.slide-image {
    flex-shrink: 0;
}

.slide-image img {
    width: 300px; /* Increased by 25% (240px * 1.25) */
    height: 300px; /* Increased by 25% (240px * 1.25) */
    object-fit: contain;
}

.slide-text {
    flex: 1;
    color: #68696D; /* Updated color */
}

.slide-text h2 {
    font-size: 2rem; /* One size down from 2.5rem */
    margin-bottom: 20px;
    color: #68696D; /* Updated color */
    font-weight: 700;
}

.slide-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #68696D; /* Updated color */
    font-weight: bold; /* Added bold */
}

/* Navigation */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s ease;
    z-index: 10;
}

.carousel-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.carousel-nav.next {
    right: 20px;
}

.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.carousel-dot.active {
    background: white;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .carousel-section {
        width: 100%; /* Full width on mobile */
        height: 500px; /* Increased height to accommodate both images */
    }
    
    .slide-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .slide-image img {
        width: 200px; /* Slightly larger for better proportion with increased height */
        height: 200px; /* Slightly larger for better proportion with increased height */
    }
    
    .slide-text h2 {
        font-size: 1.44rem; /* One size down from 1.8rem */
        margin-bottom: 15px;
    }
    
    .slide-text p {
        font-size: 1rem;
    }
    
    .carousel-nav {
        padding: 10px 15px;
        font-size: 16px;
    }
    
    .carousel-nav.next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-section {
        height: 450px; /* Increased height for smaller mobile screens */
    }
    
    .slide-content {
        width: 95%;
    }
    
    .slide-image img {
        width: 120px; /* Increased by 20% (100px * 1.2) */
        height: 120px; /* Increased by 20% (100px * 1.2) */
    }
    
    .slide-text h2 {
        font-size: 1.2rem; /* One size down from 1.5rem */
    }
    
    .slide-text p {
        font-size: 0.9rem;
    }
}

/* this is the under carousel section */
.under-carousel-section {
    background: #43ABDB;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0; /* No padding, very close to carousel */
}

.under-carousel-text {
    color: white;
    font-size: 1.4rem; /* Increased from 1.2rem - one step up */
    font-weight: 600;
    text-align: center;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .under-carousel-text {
        font-size: 1.2rem; /* Increased from 1rem - one step up */
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .under-carousel-text {
        font-size: 1.1rem; /* Increased from 0.9rem - one step up */
        padding: 0 10px;
    }
}

/* Process Steps Section */
/* Interactive Steps Section */
.interactive-steps-section {
    background: white;
    padding: 30px 20px;
    min-height: 400px;
}

.status-buttons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.status-button {
    background: #F9F8F8;
    border: none;
    cursor: pointer;
    padding: 0; /* Remove padding to maximize image space */
    border-radius: 8px;
    transition: all 0.3s ease;
    opacity: 0.8;
    width: 160px;
    height: 70px; /* Match floating menu height */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.status-button:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.status-button.active {
    opacity: 1;
    background: #F9F8F8;
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.2);
    transform: none;
}

.status-button img {
    width: 100px; /* Much larger desktop image */
    height: 100px; /* Much larger desktop image */
    display: block;
    object-fit: contain;
}

.content-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
    min-height: 200px;
    position: relative; /* For positioning the letter_t */
}

.status-icons {
    position: relative;
    width: 120px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.status-icon {
    width: 112px; /* Increased by 25% from 90px */
    height: auto; /* Let height adjust to maintain aspect ratio */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all 0.4s ease;
}

.status-icon.active {
    opacity: 1;
    transform: translateX(-50%);
}

.step-content {
    flex: 1;
    padding-left: 0;
    max-width: 500px;
    position: relative;
    z-index: 1; /* Keep text content above the background letter_t */
}

.step-details {
    display: none;
    animation: fadeInSlide 0.5s ease forwards;
}

.step-details.active {
    display: block;
}

.step-headline {
    color: #68696D;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.step-explanation {
    color: #68696D;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.step-benefit {
    color: #555555;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

/* Static letter_t on the right side of interactive steps */
.interactive-steps-letter-t {
    position: absolute;
    right: 50px; /* Position it to the right of the content */
    top: 20px; /* Higher position like traffic signs section */
    z-index: 0; /* Behind text content but still visible */
    opacity: 0.4; /* Make it subtle as background element */
}

.interactive-steps-letter-t img {
    width: 80px;
    height: auto;
    object-fit: contain;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Desktop Video Button */
.desktop-video-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-bottom: 20px;
}

.desktop-video-button {
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.desktop-video-button img {
    width: 120px; /* Double the size - was 60px */
    height: auto;
    transition: all 0.3s ease;
}

.desktop-video-button:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Hide mobile elements on desktop */
.mobile-video-container {
    display: none;
}

/* Hide mobile step content on desktop */
.mobile-step-content {
    display: none !important; /* Force hide on desktop */
}

/* Mobile Responsive for Interactive Steps */
@media (max-width: 768px) {
    .interactive-steps-section {
        padding: 20px 15px;
        min-height: 100vh;
        overflow-y: auto;
        scroll-behavior: smooth;
        position: relative;
    }
    
    .status-buttons-row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0;
        align-items: center;
        pointer-events: auto; /* Re-enable button clicks on mobile */
    }
    
    .status-button {
        width: 300px; /* 5:1 ratio rectangle */
        height: 60px; /* 5:1 ratio rectangle */
        padding: 0; /* No padding to avoid shrinking image */
        cursor: pointer; /* Restore pointer cursor */
        margin-bottom: 15px; /* More space between buttons */
        border-radius: 12px; /* Rounded corners */
        background: rgba(249, 248, 248, 0.8); /* Semi-transparent background */
        display: flex; /* Ensure image centers properly */
        align-items: center; /* Center image vertically */
        justify-content: center; /* Center image horizontally */
    }
    
    .status-button img {
        width: 100%; /* Fill entire button width */
        height: 80%; /* 80% height to allow for 10% padding top and bottom */
        object-fit: contain; /* Maintain aspect ratio */
        margin: 10% 0; /* 10% top and bottom margin for padding */
    }
    
    /* Hide desktop content-row */
    .content-row {
        display: none;
    }
    
    /* Hide desktop video button on mobile */
    .desktop-video-container {
        display: none;
    }
    
    /* Show mobile video button */
    .mobile-video-container {
        display: flex !important;
    }
    
    /* Mobile content positioning - appears under each button */
    .mobile-step-content {
        display: none !important; /* Hidden by default on mobile too */
        width: 100%;
        max-width: 90%;
        margin: 5px auto 25px auto;
        text-align: center;
        padding: 12px 20px;
        background: rgba(249, 248, 248, 0.3);
        border-radius: 8px;
        animation: fadeInSlide 0.5s ease forwards;
    }
    
    .mobile-step-content.active {
        display: block !important; /* Override to show when active on mobile */
    }
    
    .mobile-step-content .step-headline {
        font-size: 22px; /* Increased from 18px - one size up */
        color: #1a1a1a;
        margin-bottom: 10px;
        font-weight: bold;
    }
    
    .mobile-step-content .step-explanation {
        font-size: 16px; /* Increased from 14px - one size up */
        color: #666;
        margin-bottom: 12px;
        line-height: 1.4;
    }
    
    .mobile-step-content .step-benefit {
        font-size: 14px; /* Increased from 12px - one size up */
        color: #444;
        font-style: italic;
        line-height: 1.3;
    }
    
    .mobile-step-icon {
        width: 105px; /* Increased by 25% from 84px */
        height: auto; /* Let height adjust to maintain aspect ratio */
        margin: 0 auto 8px auto; /* Reduced bottom margin from 15px to 8px */
        display: block;
    }
    
    /* Mobile Video Button */
    .mobile-video-container {
        display: flex;
        justify-content: center;
        margin: 30px auto 20px auto;
        max-width: 90%;
    }
    
    .mobile-video-button {
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
    }
    
    .mobile-video-button img {
        max-width: 200px;
        width: auto;
        height: auto;
        transition: all 0.3s ease;
    }
    
    .mobile-video-button:hover img {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
    
    /* Add scroll indicator */
    .interactive-steps-section::after {
        content: "Scroll to navigate through steps";
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #999;
        text-align: center;
        background: rgba(255,255,255,0.9);
        padding: 5px 10px;
        border-radius: 15px;
        z-index: 10;
    }
}

@media (max-width: 480px) {
    .status-buttons-row {
        gap: 18px;
    }
    
    .status-button {
        width: 250px; /* 5:1 ratio rectangle (smaller for mobile) */
        height: 50px; /* 5:1 ratio rectangle (smaller for mobile) */
        padding: 0; /* No padding to avoid shrinking image */
        display: flex; /* Ensure image centers properly */
        align-items: center; /* Center image vertically */
        justify-content: center; /* Center image horizontally */
    }
    
    .status-button img {
        width: 100%; /* Fill entire button width */
        height: 80%; /* 80% height to allow for 10% padding top and bottom */
        object-fit: contain; /* Maintain aspect ratio */
        margin: 10% 0; /* 10% top and bottom margin for padding */
    }
    
    .step-headline {
        font-size: 20px; /* Increased from 18px - one size up */
    }
}

/* Interactive Traffic Signs Section */
.traffic-signs-section {
    background: #F9F8F8;
    padding: 30px 20px;
    display: flex;
    gap: 96px; /* Increased by 20% from 80px (80 * 1.2 = 96px) */
    margin: 0 auto;
    width: 100%;
    justify-content: center; /* Center the content horizontally */
}

.traffic-signs-left {
    flex: 0 0 auto; /* Don't grow/shrink, use natural width */
    max-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

.traffic-signs-right {
    flex: 0 0 auto; /* Don't grow/shrink, use natural width */
    max-width: 650px; /* Set a reasonable max width */
    position: relative; /* For positioning the letter_t */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
}

.traffic-signs-illustration {
    flex: 1; /* Take up remaining space */
    display: flex;
    align-items: center; /* Center the illustration vertically within its space */
    justify-content: center; /* Center the illustration horizontally */
}

.traffic-signs-title {
    color: #68696D;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.traffic-signs-list {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Much tighter spacing */
}

.traffic-sign-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    width: 100%;
}

/* Create button containers with image + text layout */
.traffic-signs-section .traffic-sign-button {
    width: auto !important; /* Let width adjust to content */
    height: auto; /* Auto height to accommodate image + text */
    margin: 0 auto 4px auto; /* Tighter bottom margin */
    display: flex;
    flex-direction: column; /* Stack image above text */
    align-items: center;
    justify-content: flex-start; /* Align to top instead of center */
    padding: 6px !important; /* Reduced padding by half */
    box-sizing: border-box;
    position: relative; /* For consistent positioning */
}

.traffic-signs-section .traffic-sign-button img {
    width: auto !important; /* Let width scale naturally */
    height: 24px !important; /* Even smaller - about 30% of original 80px */
    max-width: none !important; /* No width constraints */
    display: block;
    margin-bottom: 2px; /* Tighter space between image and text */
    flex-shrink: 0; /* Prevent image from shrinking */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Shadow that follows original shape */
    transition: filter 0.3s ease;
}
        
/* Force small button size with maximum specificity */
.traffic-signs-section .traffic-sign-button img[src*="dispatch"],
.traffic-signs-section .traffic-sign-button img[src*="tracking"],
.traffic-signs-section .traffic-sign-button img[src*="invoicing"],
.traffic-signs-section .traffic-sign-button img[src*="communication"],
.traffic-signs-section .traffic-sign-button img[src*="growth"],
.traffic-signs-section .traffic-sign-button img[src*="video"] {
    width: auto !important;
    height: 20px !important; /* Force very small size */
    max-width: none !important;
}
        
/* Hide mobile elements on desktop */
.mobile-network-image,
.mobile-traffic-headline {
    display: none;
}

.traffic-sign-text {
    font-size: 22px; /* Much larger for desktop readability */
    color: #333;
    text-align: center;
    font-weight: 600; /* Slightly bolder */
    line-height: 1.2;
}

/* Video button - much smaller */
.traffic-sign-button.video-button img {
    width: 60px; /* Much smaller than other buttons */
}

.traffic-sign-button.video-button {
    width: auto; /* Let video button be its natural width */
    margin: 0 auto; /* Center it */
}

.traffic-sign-button:hover {
    transform: translateY(-2px);
    /* Removed brightness filter to preserve original colors */
}

.traffic-sign-button:hover img {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}

.traffic-signs-headline {
    color: #68696D;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
}

.traffic-signs-illustration {
    background: none;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    box-shadow: none;
    min-height: 400px;
    flex: 1; /* Take up remaining space */
    display: flex;
    align-items: center; /* Center the illustration vertically within its space */
    justify-content: center; /* Center the illustration horizontally */
    position: relative; /* For positioning the letter_t */
    z-index: 1; /* Keep content above the background letter_t */
}

.traffic-signs-illustration img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Static letter_t on the right side */
.letter-t-static {
    position: absolute;
    right: -40px; /* Move further right, outside content area */
    top: 20px; /* Higher position */
    z-index: 0; /* Behind text content but visible */
    opacity: 0.4; /* More subtle since it's further out */
}

.letter-t-static img {
    width: 80px;
    height: auto;
    object-fit: contain;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .traffic-signs-section {
        flex-direction: column;
        padding: 40px 20px; /* More side padding */
        gap: 40px; /* More gap between sections */
    }
    
    /* Hide the right column entirely on mobile */
    .traffic-signs-right {
        display: none;
    }
    
    /* Mobile headline - show above buttons */
    .mobile-traffic-headline {
        display: block !important;
        color: #68696D;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 25px;
        text-align: center;
    }
    
    /* Reduce spacing between buttons on mobile */
    .traffic-signs-list {
        gap: 0px; /* Remove flexbox gap entirely */
    }
    
    /* Remove button margins on mobile */
    .traffic-signs-section .traffic-sign-button {
        margin: 0 auto 1px auto !important; /* Much smaller bottom margin */
        padding: 2px !important; /* Reduce padding too */
    }
    
    /* Show mobile network images when active */
    .mobile-network-image.active {
        display: block !important; /* Show when active */
        margin: 4px 0 6px 0; /* 50% less spacing around network images */
        opacity: 1;
        max-height: 250px;
    }
    
    /* Show and style mobile network images only on mobile */
    .mobile-network-image {
        display: none !important; /* Completely hidden by default */
        width: 100%; /* Full container width instead of viewport */
        max-width: 100vw; /* Prevent overflow */
        height: auto;
        margin: 0; /* No margins when hidden */
        opacity: 0;
        overflow: hidden;
        transition: all 0.4s ease;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .mobile-network-image.active {
        opacity: 1;
        max-height: 250px;
        margin: 15px auto 25px auto;
    }
    
    .traffic-signs-left {
        max-width: 100%;
    }
    
    .traffic-signs-right {
        max-width: 100%;
    }
    
    .traffic-signs-title {
        font-size: 1.6rem; /* Reduced one step */
        text-align: center; /* Center align on mobile */
        color: #68696D; /* Darker color */
    }
    
    .traffic-signs-headline {
        font-size: 1.3rem; /* Reduced one step */
    }
    
    .traffic-signs-section .traffic-sign-button {
        width: 147px !important; /* 20% smaller than 184px - tablets */
        padding: 8px !important;
    }
    
    .traffic-signs-section .traffic-sign-button img {
        width: auto !important; /* Let width scale naturally */
        height: 24px !important; /* Same small size for mobile */
    }
    
    .traffic-sign-text {
        font-size: 16px !important; /* Larger for tablets */
    }
}

@media (max-width: 480px) {
    .traffic-signs-section {
        padding: 20px 10px;
    }
    
    .traffic-signs-title {
        font-size: 1.4rem; /* Reduced one step */
        font-weight: 600; /* Bold text */
        text-align: center; /* Center align on mobile */
        color: #68696D; /* Darker color */
        margin-bottom: 20px;
    }
    
    .traffic-signs-headline {
        font-size: 0.8rem; /* Reduced one step */
    }
    
    .traffic-signs-illustration {
        padding: 30px 20px;
        min-height: 300px;
    }
    
    /* Mobile button layout - simple vertical stack */
    .traffic-signs-list {
        display: flex;
        flex-direction: column;
        gap: 2px; /* Much tighter spacing on mobile */
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* All buttons same size on mobile - removed conflicting rules */
    
    .traffic-sign-button.video-button img {
        width: 12px !important; /* Much smaller video button */
    }

    .letter-t-static {
        right: 15px;
        top: 15px; /* Higher on mobile too */
    }
    
    .letter-t-static img {
        width: 60px;
    }
}

@media (max-width: 480px) {
    .traffic-signs-section {
        padding: 20px 10px;
    }
    
    .traffic-signs-headline {
        font-size: 1.1rem; /* Reduced one step */
    }
    
    .traffic-signs-illustration {
        padding: 20px 15px;
        min-height: 250px;
    }
    
    /* Mobile traffic sign button frames - fixed containers */
    .traffic-signs-section .traffic-sign-button {
        width: 110px !important; /* 20% smaller than 138px - mobile */
        padding: 5px !important; /* Reduced padding for tighter spacing */
    }
    
    .traffic-signs-section .traffic-sign-button img {
        width: auto !important; /* Let width scale naturally */
        height: 24px !important; /* Same small size for mobile */
    }
    
    .traffic-sign-text {
        font-size: 14px !important; /* Larger for mobile readability */
    }
    
    .traffic-sign-button.video-button img {
        width: 10px !important; /* Even smaller video button */
    }
    
    .letter-t-static {
        right: 10px;
        top: 10px; /* Higher on very small screens too */
    }
    
    .letter-t-static img {
        width: 50px;
    }
}

/* Hide contact bar on subpages (not homepage) */
body:not(.homepage) .contact-bar {
    display: none;
}

/* CTA Section Styles */
.cta-section {
    color: #333;
}

/* Headline Section (Blue Background) */
.cta-headline-section {
    background: #43ABDB;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-headline-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    text-align: center;
    margin: 0;
}

/* Content Section (Light Background) */
.cta-content-section {
    background: #F9F8F8;
    padding: 30px 0;
    position: relative;
}

.cta-content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.cta-subheadline {
    max-width: 800px;
    margin: 0 auto;
}

.cta-subheadline p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    color: #333333;
}

.cta-carousel-label {
    max-width: 600px;
    margin: 0 auto;
    padding: 15px 0 5px 0;
    text-align: center;
}

.cta-carousel-label p {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    color: #333333;
    line-height: 1.6;
}

/* Company Cards Carousel - Full Width Banner */
.company-cards-container {
    width: 100%;
    background-color: #E1E1E1;
    padding: 20px 0;
    margin: 0;
}

.cta-carousel-label {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 15px;
    padding: 0 20px;
}

.cta-carousel-label p {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
    font-weight: bold;
}

.company-cards-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 15px;
    padding: 0 20px;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.company-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.company-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.company-card[style*="cursor: pointer"]:hover {
    box-shadow: 0 10px 30px rgba(67, 171, 219, 0.3);
    transform: translateY(-8px);
    border-color: #43ABDB;
}

.company-placeholder {
    color: #333;
    font-weight: 500;
    text-align: center;
    font-size: 1rem;
    padding: 20px 10px;
    background-color: #FDF9D9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    flex: 1;
}

/* Placeholder card styling */
.company-card:has(.company-placeholder) {
    background-color: #FDF9D9;
    min-height: 200px;
}

/* Company Card Content */
.company-logo {
    text-align: center;
    margin-bottom: 15px;
    height: 60px; /* Fixed height to prevent jumping */
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-logo img {
    max-width: 80px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.company-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333333;
    text-align: center;
    margin-bottom: 10px;
}

.company-location {
    font-size: 0.9rem;
    color: #555555;
    text-align: center;
    margin-bottom: 8px;
}

.company-fleet {
    font-size: 0.9rem;
    color: #555555;
    text-align: center;
    font-weight: 500;
}

/* CTA Button - within banner */
.company-cards-container .cta-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.company-cards-container .cta-description {
    margin: 0;
    text-align: left;
    max-width: 400px;
    font-size: 1rem;
    color: #333;
}

.cta-button {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    padding: 0;
}

.cta-button:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

.cta-button:active {
    transform: scale(0.98);
}

.cta-button img {
    max-width: 100%;
    height: auto;
}

.cta-description {
    font-size: 1rem;
    margin: 0;
    color: #333;
    text-align: left;
    flex: 1;
}

/* HubSpot Modal */
.hubspot-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 40px;
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-close:hover {
    background-color: #f0f0f0;
    color: #333;
}

.modal-headline {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 30px 0;
    text-align: center;
    line-height: 1.4;
}

.hubspot-form-container {
    margin-top: 20px;
}

.form-placeholder {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .cta-headline-section {
        height: 70px;
    }
    
    .cta-content-section {
        padding: 30px 0;
    }
    
    .cta-headline {
        font-size: 1.2rem;
    }
    
    .cta-subheadline p {
        font-size: 1.3rem;
    }
    
    .cta-carousel-label p {
        font-size: 1rem;
    }
    
    .company-cards-container {
        margin: 10px 0;
        padding: 10px 0;
    }
    
    .company-cards-carousel {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .company-card {
        width: 90%;
        min-width: auto;
        max-width: 350px;
    }
    
    .cta-letter-t {
        right: 5px;
        top: -30px;
        opacity: 0.05;
    }
    
    .cta-letter-t img {
        width: 100px;
    }
    
    .company-cards-container {
        padding: 15px 0;
    }
    
    .cta-carousel-label {
        margin-bottom: 10px;
    }
    
    .company-cards-carousel {
        flex-direction: column;
        gap: 15px;
        padding: 0 15px;
        margin-bottom: 10px;
        min-height: auto;
    }
    
    .company-card {
        width: 100%;
        max-width: 350px;
        min-width: auto;
    }
    
    .company-cards-container .cta-button-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .company-cards-container .cta-description {
        text-align: center;
    }
    
    .modal-content {
        padding: 30px 20px;
        margin: 20px;
    }
    
    .modal-headline {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .cta-headline-section {
        height: 70px;
    }
    
    .cta-content-section {
        padding: 20px 0;
    }
    
    .cta-headline {
        font-size: 1.1rem;
    }
    
    .company-cards-container .cta-button-container {
        flex-direction: column;
        gap: 15px;
    }
    .cta-button-container {
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
        padding: 5px 0;
    }
    
    .company-cards-container {
        padding: 15px 0;
    }
    
    .company-cards-carousel {
        padding: 0 10px;
    }
    
    .company-card {
        width: 100%;
        max-width: 280px;
        min-width: auto;
    }
    
    .cta-description {
        text-align: center;
    }
    
    .cta-subheadline p {
        font-size: 1.1rem;
    }
    
    .cta-letter-t {
        display: none;
    }
    
    
    .modal-content {
        padding: 25px 15px;
    }
    
    .modal-headline {
        font-size: 1.3rem;
    }
}

@media (max-width: 320px) {
    .cta-subheadline p {
        font-size: 0.8rem;
    }
}

/* Modal-specific overrides for Figma form */
/* Main container - horizontal layout: sidebar + form */
.hubspot-modal .v29209_1606 {
    position: relative !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    width: 100% !important;
}

/* Left sidebar - 280px fixed width */
.hubspot-modal .v29209_1607 {
    position: relative !important;
    width: 280px !important;
    flex-shrink: 0;
    height: auto !important;
    min-height: 500px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 20px 15px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
}

/* Right form area - flexible width */
.hubspot-modal .v29209_1731 {
    position: relative !important;
    flex: 1 !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    overflow: visible !important;
    padding: 30px 20px !important;
    margin: 0 !important;
    background: rgba(249,249,249,1) !important;
    border-radius: 10px;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
}

/* Headlines */
.hubspot-modal .v29209_1846 {
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    font-size: 16px !important;
    text-align: center !important;
    display: block !important;
}

.hubspot-modal .v29209_1845 {
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    font-size: 28px !important;
    text-align: center !important;
    display: block !important;
}

/* White form card - contains all fields */
.hubspot-modal .v29209_1756 {
    position: relative !important;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 auto !important;
    padding: 20px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
}

/* First field container (Company name) - 75px */
.hubspot-modal .v29209_1757 {
    position: relative !important;
    width: 100% !important;
    min-height: 75px !important;
    max-height: 85px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    background: rgba(249,249,249,1) !important;
    border-radius: 10px !important;
    border: 1px solid #e1e1e1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.hubspot-modal .v29209_1764 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    overflow: visible !important;
}

.hubspot-modal .v29209_1765 {
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    overflow: visible !important;
}

/* Label row with asterisk */
.hubspot-modal .v29212_1855 {
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    gap: 5px;
    align-items: center !important;
}

/* Label wrapper - remove background image */
.hubspot-modal .v29212_1856 {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    background: none !important;
    overflow: visible !important;
}

/* Label text - make visible and larger */
.hubspot-modal .v29212_1854 {
    position: relative !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    color: #111727 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    white-space: normal !important;
}

/* Asterisk - make visible */
.hubspot-modal .v29212_1852 {
    position: relative !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    color: #dc3545 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Input hint text - "Enter here" - larger and ensure it doesn't overlap */
.hubspot-modal .v29209_1767 {
    position: relative !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
    color: #6c757d !important;
    font-size: 14px !important;
    opacity: 1 !important;
    white-space: normal !important;
}

/* Other fields container - vertical stack */
.hubspot-modal .v29211_1847 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px;
}

/* Simple text input fields (website, city) - 75px */
.hubspot-modal .v29211_1848,
.hubspot-modal .v29212_1866 {
    position: relative !important;
    width: 100% !important;
    min-height: 75px !important;
    max-height: 85px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    background: rgba(249,249,249,1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.hubspot-modal .v29211_1849,
.hubspot-modal .v29212_1867 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
}

/* Upload field - 120px with horizontal layout (label + button side by side) */
.hubspot-modal .v29212_1857 {
    position: relative !important;
    width: 100% !important;
    min-height: 120px !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    background: rgba(249,249,249,1) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    align-items: center !important;
}

.hubspot-modal .v29212_1858 {
    position: relative !important;
    flex: 1 !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    justify-content: center !important;
}

.hubspot-modal .v29212_1863 {
    position: relative !important;
    width: auto !important;
    flex-shrink: 0 !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
}

/* Dump truck field - 75px with horizontal layout (label + small input) */
.hubspot-modal .v29212_1870 {
    position: relative !important;
    width: 100% !important;
    min-height: 75px !important;
    max-height: 85px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    background: rgba(249,249,249,1) !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    align-items: center !important;
}

.hubspot-modal .v29212_1871 {
    position: relative !important;
    flex: 1 !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
}

.hubspot-modal .v29212_1876 {
    position: relative !important;
    width: 120px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #e8ebee !important;
    border: 1px solid #68696d !important;
    border-radius: 5px !important;
}

/* Text label styling for field labels */
.hubspot-modal .v29212_1854,
.hubspot-modal .v29211_1850,
.hubspot-modal .v29212_1859,
.hubspot-modal .v29212_1868,
.hubspot-modal .v29212_1873 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111727 !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
    white-space: normal !important;
}

/* Input hint text styling */
.hubspot-modal .v29209_1767,
.hubspot-modal .v29211_1851,
.hubspot-modal .v29212_1860,
.hubspot-modal .v29212_1869,
.hubspot-modal .v29212_1875 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    font-size: 14px !important;
    color: #6c757d !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
    white-space: normal !important;
}

/* Actual input fields */
.hubspot-modal .form-input {
    position: relative !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #111727 !important;
    padding: 0 !important;
    outline: none !important;
    font-family: 'Gilroy', sans-serif !important;
}

.hubspot-modal .form-input::placeholder {
    color: #6c757d !important;
    opacity: 0.8 !important;
}

.hubspot-modal .form-input:focus {
    outline: none !important;
}

/* Number input - remove spinner arrows */
.hubspot-modal input[type="number"] {
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

.hubspot-modal input[type="number"]::-webkit-outer-spin-button,
.hubspot-modal input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Image preview container */
#image-preview {
    position: relative !important;
    flex-shrink: 0 !important;
}

/* Required asterisk */
.hubspot-modal .v29212_1852 {
    color: #dc3545 !important;
    font-size: 16px !important;
}

/* Line separator */
.hubspot-modal .v29212_1882 {
    position: relative !important;
    width: 100% !important;
    height: 1px !important;
    top: auto !important;
    left: auto !important;
    margin: 10px 0 !important;
    background: #e1e1e1 !important;
}

/* Bottom buttons container */
.hubspot-modal .v29212_1885 {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    display: flex !important;
    gap: 15px;
    justify-content: center !important;
}

.hubspot-modal .v29212_1886,
.hubspot-modal .v29212_1888 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 12px 30px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button text - center aligned */
.hubspot-modal .v29212_1887,
.hubspot-modal .v29212_1889 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Upload button text - center aligned */
.hubspot-modal .v29212_1864 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Sidebar logo area - top logo container */
.hubspot-modal .v29209_1836 {
    position: relative !important;
    width: 100% !important;
    height: 120px !important;
    top: auto !important;
    left: auto !important;
    background: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hubspot-modal .v29209_1835 {
    display: none !important;
}

/* Sidebar logo image - actual logo */
.hubspot-modal .v29209_1608 {
    position: relative !important;
    width: 100% !important;
    max-width: 200px !important;
    height: 80px !important;
    top: auto !important;
    left: auto !important;
    background: url("../images/logo.png") no-repeat center !important;
    background-size: contain !important;
    margin: 0 auto !important;
}

/* Progress indicator frames - adjust positioning */
.hubspot-modal .v29209_1843 {
    position: relative !important;
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
    top: auto !important;
    left: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
    background: none !important;
}

.hubspot-modal .v29209_1844 {
    display: none !important;
}

/* "Set company" indicator - progress item with checkmark first, then text */
.hubspot-modal .v29209_1842 {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: 0 !important;
    margin-left: 0 !important;
    background: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
}

/* "Set company" text */
.hubspot-modal .v29209_1837 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    font-size: 16px !important;
    color: #111727 !important;
    order: 2 !important;
}

/* Progress checkmark circle - comes first */
.hubspot-modal .v29209_1838 {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    top: auto !important;
    left: auto !important;
    background: #43ABDB !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

/* Checkmark inside circle */
.hubspot-modal .v29209_1839,
.hubspot-modal .v29209_1840 {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
}

.hubspot-modal .v29209_1839::before {
    content: "✓" !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

.hubspot-modal .v29209_1840 {
    display: none !important;
}

/* Ensure all text elements display properly */
.hubspot-modal span {
    position: relative !important;
}

/* Mobile responsive */
@media (max-width: 968px) {
    .hubspot-modal .v29209_1606 {
        flex-direction: column !important;
    }
    
    .hubspot-modal .v29209_1607 {
        width: 100% !important;
        min-height: auto !important;
    }
    
    .hubspot-modal .v29209_1845 {
        font-size: 22px !important;
    }
    
    .hubspot-modal .v29209_1756 {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .hubspot-modal .v29209_1845 {
        font-size: 20px !important;
    }
    
    .hubspot-modal .v29209_1846 {
        font-size: 14px !important;
    }
    
    .modal-content {
        padding: 20px 10px !important;
    }
    
    .hubspot-modal .v29212_1857,
    .hubspot-modal .v29212_1870 {
        flex-direction: column !important;
        align-items: flex-start !important;
        min-height: 95px !important;
    }
    
    .hubspot-modal .v29212_1871 {
        margin-bottom: 8px !important;
        width: 100% !important;
    }
    
    .hubspot-modal .v29212_1873 {
        font-size: 14px !important;
    }
    
    .hubspot-modal .v29212_1876 {
        width: 100% !important;
        margin-top: 5px !important;
    }
}

/* Figma-to-HTML Company Setup Styles */
.v29209_1606 {
  width: 100%;
  height: 850px;
  background: rgba(249,249,249,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.v29209_1607 {
  width: 400px;
  height: 850px;
  background: linear-gradient(rgba(255,255,255,1), rgba(202,234,255,0.5));
  padding: 15px 15px;
  margin: 10px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.v29209_1836 {
  width: 283px;
  height: 100px;
  background: url("../images/v29209_1836.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 15px;
  left: 66px;
  overflow: hidden;
}

.v29209_1835 {
  width: 283px;
  height: 159px;
  background: url("../images/v29209_1835.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.v29209_1608 {
  width: 187px;
  height: 74px;
  background: url("../images/v29209_1608.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 125px;
  left: 114px;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}

.v29209_1843 {
  width: 283px;
  height: 100px;
  background: url("../images/v29209_1843.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 209px;
  left: 66px;
  overflow: hidden;
}

.v29209_1844 {
  width: 283px;
  height: 159px;
  background: url("../images/v29209_1844.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.name {
  color: #fff;
}

.v29209_1842 {
  width: 165px;
  height: 30px;
  background: url("../images/v29209_1842.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 329px;
  left: 125px;
  overflow: hidden;
}

.v29209_1837 {
  width: 111px;
  color: rgba(17,23,39,1);
  position: absolute;
  top: 6px;
  left: 54px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 18px;
  opacity: 1;
  text-align: left;
}

.v29209_1838 {
  width: 30px;
  height: 30px;
  background: url("../images/v29209_1838.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.v29209_1839 {
  width: 30px;
  height: 30px;
  background: rgba(67,171,219,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50%;
}

.v29209_1840 {
  width: 7px;
  height: 4px;
  background: rgba(67,171,219,1);
  opacity: 1;
  position: absolute;
  top: 13px;
  left: 11px;
  border: 1.5px solid rgba(255,255,255,1);
}

.v29209_1731 {
  width: 100%;
  height: 850px;
  background: url("../images/v29209_1731.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 50px 15px;
  margin: 15px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 400px;
  overflow: hidden;
}

.v29209_1846 {
  width: 599px;
  color: rgba(17,23,39,0.5);
  position: absolute;
  top: 50px;
  left: 265px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 20px;
  opacity: 1;
  text-align: left;
}

.v29209_1845 {
  width: 721px;
  color: rgba(17,23,39,1);
  position: absolute;
  top: 90px;
  left: 204px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 45px;
  opacity: 1;
  text-align: left;
}

.v29209_1756 {
  width: 100%;
  height: 640px;
  background: rgba(255,255,255,1);
  padding: 15px 10px;
  margin: 15px;
  opacity: 1;
  position: absolute;
  top: 160px;
  left: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29209_1757 {
  width: 100%;
  height: 75px;
  background: url("../images/v29209_1757.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 20px;
  opacity: 1;
  position: absolute;
  top: 15px;
  left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29209_1764 {
  width: 500px;
  height: 75px;
  background: url("../images/v29209_1764.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 15px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 290px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.v29209_1765 {
  width: 480px;
  height: 66px;
  background: url("../images/v29209_1765.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 3px 0px;
  margin: 6px;
  opacity: 1;
  position: absolute;
  top: 4px;
  left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29212_1855 {
  width: 480px;
  height: 29px;
  background: url("../images/v29212_1855.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 3px;
  left: 0px;
  overflow: hidden;
}

.v29212_1856 {
  width: 382px;
  height: 19px;
  background: url("../images/v29212_1856.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 5px;
  left: 0px;
  overflow: hidden;
}

.v29212_1854 {
  width: 343px;
  color: rgba(104,105,109,1);
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 16px;
  opacity: 1;
  text-align: left;
}

.v29212_1852 {
  width: 10px;
  color: rgba(246,51,51,1);
  position: absolute;
  top: 0px;
  left: 470px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}

.v29209_1767 {
  width: 480px;
  color: rgba(103,105,109,1);
  position: absolute;
  top: 38px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 20px;
  opacity: 1;
  text-align: left;
}

.v29211_1847 {
  width: 100%;
  height: 405px;
  background: url("../images/v29211_1847.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 20px;
  opacity: 1;
  position: absolute;
  top: 105px;
  left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29211_1848 {
  width: 500px;
  height: 75px;
  background: url("../images/v29211_1848.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 15px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 290px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.v29211_1849 {
  width: 480px;
  height: 66px;
  background: url("../images/v29211_1849.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 3px 0px;
  margin: 6px;
  opacity: 1;
  position: absolute;
  top: 4px;
  left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29211_1850 {
  width: 480px;
  color: rgba(104,105,109,1);
  position: absolute;
  top: 3px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 16px;
  opacity: 1;
  text-align: left;
}

.v29211_1851 {
  width: 480px;
  color: rgba(103,105,109,1);
  position: absolute;
  top: 38px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 20px;
  opacity: 1;
  text-align: left;
}

.v29212_1857 {
  width: 500px;
  height: 120px;
  background: url("../images/v29212_1857.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 25px 10px;
  margin: 15px;
  opacity: 1;
  position: absolute;
  top: 95px;
  left: 290px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.v29212_1858 {
  width: 325px;
  height: 66px;
  background: url("../images/v29212_1858.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 3px 0px;
  margin: 6px;
  opacity: 1;
  position: absolute;
  top: 27px;
  left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29212_1859 {
  width: 325px;
  color: rgba(104,105,109,1);
  position: absolute;
  top: 3px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 16px;
  opacity: 1;
  text-align: left;
}

.v29212_1860 {
  width: 325px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 38px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 20px;
  opacity: 1;
  text-align: left;
}

.v29212_1863 {
  width: 140px;
  height: 70px;
  background: rgba(67,171,219,1);
  padding: 10px 10px;
  margin: 10px;
  opacity: 1;
  position: absolute;
  top: 25px;
  left: 350px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
}

.v29212_1864 {
  width: 120px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 20px;
  opacity: 1;
  text-align: center;
}

.v29212_1866 {
  width: 500px;
  height: 75px;
  background: url("../images/v29212_1866.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 15px;
  opacity: 1;
  position: absolute;
  top: 235px;
  left: 290px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.v29212_1867 {
  width: 480px;
  height: 66px;
  background: url("../images/v29212_1867.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 3px 0px;
  margin: 6px;
  opacity: 1;
  position: absolute;
  top: 4px;
  left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29212_1868 {
  width: 480px;
  color: rgba(104,105,109,1);
  position: absolute;
  top: 3px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 400;
  font-size: 16px;
  opacity: 1;
  text-align: left;
}

.v29212_1869 {
  width: 480px;
  color: rgba(103,105,109,1);
  position: absolute;
  top: 38px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 20px;
  opacity: 1;
  text-align: left;
}

.v29212_1870 {
  width: 500px;
  height: 75px;
  background: url("../images/v29212_1870.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 15px;
  opacity: 1;
  position: absolute;
  top: 330px;
  left: 290px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.v29212_1871 {
  width: 345px;
  height: 31px;
  background: url("../images/v29212_1871.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 3px 0px;
  margin: 6px;
  opacity: 1;
  position: absolute;
  top: 22px;
  left: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.v29212_1873 {
  width: 345px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 3px;
  left: 0px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 20px;
  opacity: 1;
  text-align: left;
}

.v29212_1876 {
  width: 120px;
  height: 50px;
  background: rgba(232,235,238,1);
  padding: 10px 10px;
  margin: 10px;
  opacity: 1;
  position: absolute;
  top: 12px;
  left: 370px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.v29212_1875 {
  width: 94px;
  color: rgba(103,105,109,1);
  position: absolute;
  top: 12px;
  left: 13px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 20px;
  opacity: 1;
  text-align: left;
}

.v29212_1882 {
  width: 100%;
  height: 5px;
  background: url("../images/v29212_1882.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 5px 0px;
  margin: 36px;
  opacity: 1;
  position: absolute;
  top: 525px;
  left: 10px;
  overflow: hidden;
}

.v29212_1885 {
  width: 376px;
  height: 80px;
  background: url("../images/v29212_1885.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 5px 0px;
  margin: 36px;
  opacity: 1;
  position: absolute;
  top: 545px;
  left: 362px;
  overflow: hidden;
}

.v29212_1886 {
  width: 170px;
  height: 70px;
  background: rgba(67,171,219,1);
  padding: 10px 10px;
  margin: 10px;
  opacity: 1;
  position: absolute;
  top: 5px;
  left: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
}

.v29212_1887 {
  width: 150px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 20px;
  opacity: 1;
  text-align: center;
}

.v29212_1888 {
  width: 170px;
  height: 70px;
  background: rgba(255,255,255,1);
  padding: 10px 10px;
  margin: 10px;
  opacity: 1;
  position: absolute;
  top: 5px;
  left: 206px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
}

.v29212_1889 {
  width: 150px;
  color: rgba(67,171,219,1);
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 20px;
  opacity: 1;
  text-align: center;
}



/* ============================================
   Job Sites/Construction Companies Section
   ============================================ */

.job-sites-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Headline Section - Yellow Background - Match CTA Section Height */
.job-sites-headline-section {
    background-color: #FFF8B8 !important;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-sites-headline-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.job-sites-headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000000 !important;
    text-align: center;
    margin: 0;
}

/* Content Section */
.job-sites-content-section {
    background-color: #ffffff;
    width: 100%;
    padding: 30px 20px;
}

.job-sites-content-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Image on left */
.job-sites-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.job-sites-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Text content on right - Remove light blue background, add letter_t.png */
.job-sites-text-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 15px;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 200px auto;
}

.job-sites-text-wrapper {
    position: relative;
    z-index: 2;
}

.job-sites-subheadline {
    font-size: 1.8rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.job-sites-intro {
    font-size: 1.1rem;
    color: #333333;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

/* Features */
.job-sites-features {
    margin: 30px 0;
}

.job-sites-feature-group {
    margin-bottom: 25px;
}

.job-sites-feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #68696D;
    margin: 0 0 12px 0;
}

.job-sites-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.job-sites-feature-list li {
    font-size: 1rem;
    color: #555555;
    margin: 12px 0;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

.job-sites-feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #68696D;
    font-weight: bold;
    font-size: 1.3rem;
}

/* CTA Text */
.job-sites-cta-text {
    font-size: 1.15rem;
    font-weight: 600;
    font-style: italic;
    color: #000000;
    margin: 35px 0 25px 0;
    line-height: 1.4;
}

/* Video Button - Just the image */
.job-sites-video-button {
    display: inline-block;
    transition: all 0.3s ease;
}

.job-sites-video-button img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.job-sites-video-button:hover img {
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 968px) {
    .job-sites-content-container {
        flex-direction: column;
    }
    
    .job-sites-image {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .job-sites-headline {
        font-size: 1.3rem;
    }
    
    .job-sites-subheadline {
        font-size: 1.5rem;
    }
    
    .job-sites-text-content {
        background-size: 180px auto;
    }
}

@media (max-width: 768px) {
    .job-sites-headline-section {
        height: 60px !important;
        background-color: #FFF8B8 !important;
    }
    
    .job-sites-headline {
        font-size: 1.2rem;
        color: #000000 !important;
    }
    
    .job-sites-content-section {
        padding: 20px 15px;
    }
    
    .job-sites-content-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .job-sites-image {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .job-sites-image img {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        display: block;
    }
    
    .job-sites-text-content {
        padding: 20px 15px;
        background-size: 150px auto;
    }
    
    .job-sites-subheadline {
        font-size: 1.4rem;
        color: #68696D !important;
    }
    
    .job-sites-intro {
        font-size: 1rem;
        color: #333333 !important;
    }
    
    .job-sites-feature-title {
        font-size: 1.2rem;
        color: #68696D !important;
    }
    
    .job-sites-feature-list li {
        color: #555555 !important;
    }
    
    .job-sites-cta-text {
        font-size: 1.05rem;
        color: #333333 !important;
    }
}

@media (max-width: 480px) {
    .job-sites-headline-section {
        height: 50px !important;
        background-color: #FFF8B8 !important;
    }
    
    .job-sites-headline {
        font-size: 1rem;
        padding: 0 10px;
        color: #000000 !important;
    }
    
    .job-sites-content-section {
        padding: 20px 10px;
    }
    
    .job-sites-content-container {
        gap: 20px;
    }
    
    .job-sites-image {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .job-sites-image img {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    .job-sites-text-content {
        padding: 15px 12px;
        background-size: 100px auto;
        background-position: right bottom;
    }
    
    .job-sites-subheadline {
        font-size: 1.2rem;
        color: #68696D !important;
    }
    
    .job-sites-intro {
        font-size: 0.95rem;
        color: #333333 !important;
    }
    
    .job-sites-feature-title {
        font-size: 1.1rem;
        color: #68696D !important;
    }
    
    .job-sites-feature-list li {
        font-size: 0.9rem;
        margin: 10px 0;
        color: #555555 !important;
    }
    
    .job-sites-cta-text {
        font-size: 1rem;
        margin: 25px 0 20px 0;
        color: #333333 !important;
    }
    
    .job-sites-video-button img {
        max-width: 150px;
    }
}

/* ========================================
   TRUCKING COMPANIES & TRUCK BROKERS SECTION
   ======================================== */

.trucking-companies-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Headline Section - Blue Background */
.trucking-companies-headline-section {
    background-color: #43ABDB !important;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trucking-companies-headline-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.trucking-companies-headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #FFFFFF !important;
    text-align: center;
    margin: 0;
}

/* Content Section */
.trucking-companies-content-section {
    background-color: #ffffff;
    width: 100%;
    padding: 30px 20px;
}

.trucking-companies-content-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Text content on left with letter_t background */
.trucking-companies-text-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 15px;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 200px auto;
}

.trucking-companies-text-wrapper {
    position: relative;
    z-index: 2;
}

.trucking-companies-subheadline {
    font-size: 1.8rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.trucking-companies-intro {
    font-size: 1.1rem;
    color: #333333;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

/* Features */
.trucking-companies-features {
    margin: 30px 0;
}

.trucking-companies-feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #68696D;
    margin: 0 0 12px 0;
}

.trucking-companies-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.trucking-companies-feature-list li {
    font-size: 1rem;
    color: #555555;
    margin: 12px 0;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

.trucking-companies-feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #68696D;
    font-weight: bold;
    font-size: 1.3rem;
}

/* Video Button */
.trucking-companies-video-button {
    display: inline-block;
    margin-top: 25px;
    transition: transform 0.2s ease;
}

.trucking-companies-video-button:hover {
    transform: scale(1.05);
}

.trucking-companies-video-button img {
    max-width: 180px;
    height: auto;
}

/* Image on right */
.trucking-companies-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.trucking-companies-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .trucking-companies-headline-section {
        height: 60px !important;
        background-color: #43ABDB !important;
    }
    
    .trucking-companies-headline {
        font-size: 1.2rem;
        color: #FFFFFF !important;
    }
    
    .trucking-companies-content-section {
        padding: 20px 15px;
    }
    
    .trucking-companies-content-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .trucking-companies-text-content {
        order: 2;
        padding: 20px 15px;
        background-size: 150px auto;
    }
    
    .trucking-companies-image {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .trucking-companies-image img {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        display: block;
    }
    
    .trucking-companies-subheadline {
        font-size: 1.4rem;
        color: #68696D !important;
    }
    
    .trucking-companies-intro {
        font-size: 1rem;
        color: #333333 !important;
    }
    
    .trucking-companies-feature-title {
        font-size: 1.2rem;
        color: #68696D !important;
    }
    
    .trucking-companies-feature-list li {
        color: #555555 !important;
    }
}

@media (max-width: 480px) {
    .trucking-companies-headline-section {
        height: 50px !important;
        background-color: #43ABDB !important;
    }
    
    .trucking-companies-headline {
        font-size: 1rem;
        padding: 0 10px;
        color: #FFFFFF !important;
    }
    
    .trucking-companies-content-section {
        padding: 20px 10px;
    }
    
    .trucking-companies-content-container {
        gap: 20px;
    }
    
    .trucking-companies-image {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .trucking-companies-image img {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    .trucking-companies-text-content {
        padding: 15px 12px;
        background-size: 100px auto;
        background-position: left bottom;
    }
    
    .trucking-companies-subheadline {
        font-size: 1.2rem;
        color: #68696D !important;
    }
    
    .trucking-companies-intro {
        font-size: 0.95rem;
        color: #333333 !important;
    }
    
    .trucking-companies-feature-title {
        font-size: 1.1rem;
        color: #68696D !important;
    }
    
    .trucking-companies-feature-list li {
        font-size: 0.9rem;
        margin: 10px 0;
        color: #555555 !important;
    }
    
    .trucking-companies-video-button img {
        max-width: 150px;
    }
}

/* ========================================
   DRIVERS SECTION
   ======================================== */

.drivers-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Headline Section - Pink Background */
.drivers-headline-section {
    background-color: #FDD7E4 !important;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drivers-headline-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.drivers-headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000000 !important;
    text-align: center;
    margin: 0;
}

/* Content Section */
.drivers-content-section {
    background-color: #ffffff;
    width: 100%;
    padding: 30px 20px;
}

.drivers-content-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Image on left */
.drivers-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.drivers-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Text content on right with letter_t background */
.drivers-text-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 15px;
    border-radius: 12px;
    background-color: transparent;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 200px auto;
}

.drivers-text-wrapper {
    position: relative;
    z-index: 2;
}

.drivers-subheadline {
    font-size: 1.8rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.drivers-intro {
    font-size: 1.1rem;
    color: #333333;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

/* Features */
.drivers-features {
    margin: 30px 0;
}

.drivers-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.drivers-feature-list li {
    font-size: 1rem;
    color: #555555;
    margin: 12px 0;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

.drivers-feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #68696D;
    font-weight: bold;
    font-size: 1.3rem;
}

.drivers-feature-list li strong {
    color: #333333;
}

/* Video Button */
.drivers-video-button {
    display: inline-block;
    margin-top: 25px;
    transition: transform 0.2s ease;
}

.drivers-video-button:hover {
    transform: scale(1.05);
}

.drivers-video-button img {
    max-width: 180px;
    height: auto;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .drivers-headline-section {
        height: 60px !important;
        background-color: #FDD7E4 !important;
    }
    
    .drivers-headline {
        font-size: 1.2rem;
        color: #000000 !important;
    }
    
    .drivers-content-section {
        padding: 20px 15px;
    }
    
    .drivers-content-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .drivers-image {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .drivers-image img {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        display: block;
    }
    
    .drivers-text-content {
        padding: 20px 15px;
        background-size: 150px auto;
    }
    
    .drivers-subheadline {
        font-size: 1.4rem;
        color: #68696D !important;
    }
    
    .drivers-intro {
        font-size: 1rem;
        color: #333333 !important;
    }
    
    .drivers-feature-list li {
        color: #555555 !important;
    }
    
    .drivers-feature-list li strong {
        color: #333333 !important;
    }
}

@media (max-width: 480px) {
    .drivers-headline-section {
        height: 50px !important;
        background-color: #FDD7E4 !important;
    }
    
    .drivers-headline {
        font-size: 1rem;
        padding: 0 10px;
        color: #000000 !important;
    }
    
    .drivers-content-section {
        padding: 20px 10px;
    }
    
    .drivers-content-container {
        gap: 20px;
    }
    
    .drivers-image {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .drivers-image img {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    .drivers-text-content {
        padding: 15px 12px;
        background-size: 100px auto;
        background-position: right bottom;
    }
    
    .drivers-subheadline {
        font-size: 1.2rem;
        color: #68696D !important;
    }
    
    .drivers-intro {
        font-size: 0.95rem;
        color: #333333 !important;
    }
    
    .drivers-feature-list li {
        font-size: 0.9rem;
        margin: 10px 0;
        color: #555555 !important;
    }
    
    .drivers-feature-list li strong {
        color: #333333 !important;
    }
    
    .drivers-video-button img {
        max-width: 150px;
    }
}

/* ========================================
   DRIVER CTA BANNER
   ======================================== */

.driver-cta-banner {
    width: 100%;
    background-color: #FFF2F6;
    padding: 30px 20px;
}

.driver-cta-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.driver-cta-content {
    width: 100%;
}

.driver-cta-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.driver-cta-text {
    font-size: 1.1rem;
    color: #333333;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.driver-cta-button {
    display: inline-block;
    background-color: #FDD7E4;
    color: #000000;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.driver-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 215, 228, 0.5);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .driver-cta-banner {
        padding: 20px 15px;
    }
    
    .driver-cta-headline {
        font-size: 1.6rem;
    }
    
    .driver-cta-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .driver-cta-banner {
        padding: 20px 10px;
    }
    
    .driver-cta-headline {
        font-size: 1.4rem;
    }
    
    .driver-cta-text {
        font-size: 0.95rem;
    }
    
    .driver-cta-button {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    background-color: #E8EBEE;
    position: relative;
    overflow: hidden;
}

/* Letter T background between columns 2 and 3 */
.site-footer::after {
    content: '';
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    height: 320px;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* CTA Row */
.footer-cta {
    padding: 40px 20px;
    position: relative;
    z-index: 2;
}

.footer-cta-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.footer-cta-headline {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    margin: 0;
    flex: 1;
}

.footer-cta-button {
    display: inline-block;
    background-color: #FDD7E4;
    color: #000000;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px 40px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 215, 228, 0.5);
}

/* Separator Line */
.footer-separator {
    height: 1px;
    background-color: #CCCCCC;
    max-width: 1200px;
    margin: 0 auto;
}

/* Main Footer Content */
.footer-content {
    padding: 50px 20px;
    position: relative;
    z-index: 2;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr auto 1fr;
    gap: 60px;
}

/* Column 1: Brand */
.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    width: 180px;
    height: auto;
    margin-bottom: 15px;
}

.footer-tagline {
    font-size: 1rem;
    color: #555555;
    margin: 0 0 30px 0;
    line-height: 1.5;
}

.footer-social {
    display: flex;
    gap: 15px;
    margin-top: auto;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #333333;
    border-radius: 50%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #000000;
}

.social-link img {
    width: 20px;
    height: 20px;
}

/* Letter T Column */
.footer-letter-t {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-letter-t img {
    width: 80px;
    height: auto;
    opacity: 0.3;
}

/* Columns 2 & 3: Links */
.footer-column-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 20px 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    font-size: 1rem;
    color: #555555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #000000;
}

/* Copyright */
.footer-copyright {
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.footer-copyright p {
    font-size: 0.9rem;
    color: #666666;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-cta-container {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-cta-headline {
        font-size: 1.4rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-letter-t {
        display: none;
    }
    
    .footer-brand {
        align-items: center;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .site-footer::after {
        width: 160px;
        height: 240px;
        right: 50%;
        transform: translate(50%, -50%);
    }
}

@media (max-width: 480px) {
    .footer-cta {
        padding: 30px 15px;
    }
    
    .footer-cta-headline {
        font-size: 1.2rem;
    }
    
    .footer-cta-button {
        font-size: 1rem;
        padding: 12px 30px;
    }
    
    .footer-content {
        padding: 40px 15px;
    }
    
    .footer-logo {
        width: 150px;
    }
    
    .site-footer::after {
        width: 120px;
        height: 200px;
        right: 50%;
        transform: translate(50%, -50%);
    }
}

/* ========================================
   JOB SITES PAGE
   ======================================== */

/* Page Headline Section */
.page-headline-section {
    padding: 10px 20px 20px 20px;
    text-align: center;
    background: #FFFFFF;
}

.page-headline-container {
    max-width: 1000px;
    margin: 0 auto;
}

.page-headline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #68696D;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 900px;
    word-break: break-word;
}

/* Hero Banner Section */
.hero-banner-section {
    padding: 2px 0;
    background-image: url('../images/job_site_banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.hero-banner-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.hero-banner-content {
    flex: 1;
    padding: 0 40px;
}

.hero-banner-subheadline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.hero-banner-desc {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.hero-banner-button {
    display: inline-block;
    background-color: #FFF8B8;
    color: #000000;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 15px 40px;
    border: 2px solid #68696D;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-banner-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.hero-banner-image {
    flex: 1;
    text-align: right;
    padding: 0 40px 0 0;
}

.hero-banner-image img {
    max-width: 100%;
    height: 400px;
    object-fit: contain;
}

/* Job Sites Video Section *//* Responsive */
@media (max-width: 1024px) {
    .page-headline {
        font-size: 2rem;
    }
    
    .hero-banner-content {
        gap: 40px;
    }
    
    .hero-banner-text p {
        font-size: 1.2rem;
    }
    
    .hero-banner-image {
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .page-headline-section {
        padding: 100px 20px 30px 20px;
    }
    .page-headline {
        font-size: 1.6rem;
    }
    .hero-banner-section {
        min-height: 0;
        padding: 20px 0 10px 0;
    }
    .hero-banner-container {
        padding: 0 20px;
    }
    .hero-banner-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .hero-banner-text {
        max-width: 100%;
    }
    .hero-banner-text p {
        font-size: 1.1rem;
    }
    .hero-banner-image {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .page-headline {
        font-size: 1.3rem;
    }
    .hero-banner-section {
        min-height: 0;
        padding: 10px 0 5px 0;
    }
    .hero-banner-text p {
        font-size: 1rem;
    }
}

/* Problem Statement Section */
.problem-statement-section {
    padding: 60px 20px;
    background: #FFFFFF;
}

.problem-statement-container {
    max-width: 1200px;
    margin: 0 auto;
}

.problem-statement-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    text-align: center;
    margin: 0 0 40px 0;
    line-height: 1.3;
}

.problem-statement-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.problem-statement-text {
    flex: 1;
}

.problem-statement-text p {
    font-size: 1.1rem;
    font-weight: 400;
    color: #68696D;
    line-height: 1.7;
    margin: 0;
}

.problem-statement-image {
    flex-shrink: 0;
    max-width: 450px;
}

.problem-statement-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .problem-statement-section {
        padding: 40px 20px;
    }
    
    .problem-statement-headline {
        font-size: 1.5rem;
        margin: 0 0 30px 0;
    }
    
    .problem-statement-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .problem-statement-text p {
        font-size: 1rem;
    }
    
    .problem-statement-image {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .problem-statement-headline {
        font-size: 1.3rem;
    }
    
    .problem-statement-text p {
        font-size: 0.95rem;
    }
}

/* Solution Headline Section */
.solution-headline-section {
    background-color: #FFF8B8;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-headline-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.solution-headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000000;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .solution-headline-section {
        padding: 30px 20px;
    }
    
    .solution-headline {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .solution-headline-section {
        padding: 25px 15px;
    }
    
    .solution-headline {
        font-size: 1.2rem;
    }
}

/* Trucking Companies variant - blue background with white text */
.solution-headline-section.trucking-blue-bg {
    background-color: #43ABDB;
}

.solution-headline-section.trucking-blue-bg .solution-headline {
    color: #FFFFFF;
}

/* Solution Content Section */
.solution-content-section {
    padding: 60px 20px 5px 20px;
    background: #FFFFFF;
}

.solution-content-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.solution-content-text {
    flex: 1;
}

.solution-content-text p {
    font-size: 1.1rem;
    font-weight: 400;
    color: #68696D;
    line-height: 1.7;
    margin: 0 0 30px 0;
}

.solution-content-button {
    display: inline-block;
    background-color: #FFF8B8;
    color: #000000;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px 40px;
    border: 2px solid #68696D;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.solution-content-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(104, 105, 109, 0.3);
}

.solution-content-image {
    flex-shrink: 0;
    max-width: 450px;
}

.solution-content-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .solution-content-section {
        padding: 40px 20px;
    }
    
    .solution-content-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .solution-content-text p {
        font-size: 1rem;
    }
    
    .solution-content-image {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .solution-content-text p {
        font-size: 0.95rem;
    }
    
    .solution-content-button {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

/* Dispatching Content Section */
.dispatching-content-section {
    padding: 40px 20px;
    background: #FFFFFF;
}

.dispatching-content-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.dispatching-content-image {
    flex-shrink: 0;
    max-width: 450px;
}

.dispatching-content-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.dispatching-content-text {
    flex: 1;
}

.dispatching-content-text p {
    font-size: 1.1rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.dispatching-content-text p:last-child {
    margin-bottom: 0;
}

.dispatching-content-text strong {
    font-weight: 600;
    color: #000000;
}

/* Responsive */
@media (max-width: 768px) {
    .dispatching-content-section {
        padding: 20px 20px;
    }
    
    .dispatching-content-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .dispatching-content-image {
        max-width: 100%;
        width: 100%;
    }
    
    .dispatching-content-text p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .dispatching-content-text p {
        font-size: 0.95rem;
    }
}

/* Progress Tracking Sections - Minimal Padding */
.progress-tracking-section {
    padding: 30px 20px 10px 20px !important;
}

.progress-tracking-section-alt {
    padding: 10px 20px 30px 20px !important;
}

/* Dispatching Content Section Alt (Text Left, Image Right) */
.dispatching-content-section-alt {
    padding: 40px 20px;
    background: #FFFFFF;
}

.dispatching-content-container-alt {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.dispatching-content-text-alt {
    flex: 1;
}

.dispatching-content-text-alt p {
    font-size: 1.1rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.dispatching-content-text-alt p:last-child {
    margin-bottom: 0;
}

.dispatching-content-text-alt .content-subheadline {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
    margin: 0 0 20px 0;
}

.dispatching-content-text-alt strong {
    font-weight: 600;
    color: #000000;
}

.dispatching-video-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: #FFF8B8;
    color: #68696D;
    border: 2px solid #68696D;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.dispatching-video-button:hover {
    background-color: #68696D;
    color: #FFFFFF;
}

.dispatching-video-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: #FFF8B8;
    color: #68696D;
    border: 2px solid #68696D;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.dispatching-video-button:hover {
    background-color: #68696D;
    color: #FFFFFF;
}

.dispatching-content-image-alt {
    flex-shrink: 0;
    max-width: 450px;
}

.dispatching-content-image-alt img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .dispatching-content-section-alt {
        padding: 20px 20px;
    }
    
    .dispatching-content-container-alt {
        flex-direction: column;
        gap: 30px;
    }
    
    .dispatching-content-image-alt {
        max-width: 100%;
        width: 100%;
    }
    
    .dispatching-content-text-alt p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .dispatching-content-text-alt p {
        font-size: 0.95rem;
    }
}

/* Elevate Projects Image Section */
.elevate-projects-section {
    padding: 60px 20px;
    background: #FFFFFF;
    text-align: center;
}

.elevate-projects-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .elevate-projects-section {
        padding: 40px 20px;
    }
}

.elevate-projects-subheadline {
    font-size: 1.7rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 18px;
    margin-top: 0;
}

.elevate-projects-desc {
    font-size: 1.15rem;
    color: #333333;
    max-width: 700px;
    margin: 0 auto 32px auto;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .elevate-projects-subheadline {
        font-size: 1.2rem;
    }
    .elevate-projects-desc {
        font-size: 1rem;
    }
}

.elevate-projects-section {
    position: relative;
    padding: 0;
    background: #FFFFFF;
    text-align: center;
}

.elevate-projects-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.elevate-projects-overlay {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.elevate-projects-overlay .elevate-projects-subheadline,
.elevate-projects-overlay .elevate-projects-desc {
    background: rgba(255,255,255,0.92);
    display: inline-block;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .elevate-projects-overlay {
        top: 10%;
    }
}

.elevate-projects-above {
    max-width: 700px;
    margin: 0 auto -60px auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

@media (max-width: 768px) {
    .elevate-projects-above {
        margin-bottom: -30px;
    }
}

.trucking-banner-section {
    width: 100%;
    min-height: 340px;
    background: url('../images/trucking_banner.png') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px 0;
}
.trucking-banner-bg {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 340px;
    position: relative;
    box-sizing: border-box;
    padding: 0 40px;
}
.trucking-banner-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}
.trucking-banner-content {
    position: relative;
    z-index: 2;
    padding: 60px 40px 60px 80px;
    color: #68696D;
    max-width: 700px;
}
.trucking-banner-headline {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 18px 0;
    color: #68696D;
}
.trucking-banner-desc {
    font-size: 1.25rem;
    color: #68696D;
    margin: 0;
}
.trucking-banner-img {
    position: relative;
    z-index: 2;
    max-width: 420px;
    width: 38vw;
    min-width: 220px;
    height: auto;
    margin-right: 40px;
    border-radius: 8px;
    /* No background or box-shadow for transparent look */
    background: none;
    box-shadow: none;
}
@media (max-width: 900px) {
    .trucking-banner-bg {
        flex-direction: column;
        padding: 24px 20px;
        min-height: 260px;
    }
    .trucking-banner-content {
        padding: 0;
        align-items: center;
        text-align: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }
    .trucking-banner-img {
        max-width: 220px;
        margin: 20px 0 0 0;
    }
}
@media (max-width: 600px) {
    .trucking-banner-section {
        min-height: 220px;
    }
    .trucking-banner-bg {
        flex-direction: column;
        padding: 20px 16px;
        min-height: 200px;
        width: 100%;
        max-width: 100%;
    }
    .trucking-banner-content {
        padding: 0;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
    .trucking-banner-headline {
        font-size: 1.3rem;
    }
    .trucking-banner-desc {
        font-size: 1rem;
    }
    .trucking-banner-img {
        max-width: 180px;
        margin: 20px auto 0 auto;
    }
    .trucking-banner-img img {
        width: 100%;
        height: auto;
    }
}

.page-headline-section {
    width: 100%;
    padding: 0 0 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
.page-headline.trucking-blue {
    color: #43ABDB;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
}
@media (max-width: 600px) {
    .page-headline-section {
        padding: 0 0 20px 0;
    }
    .page-headline.trucking-blue {
        font-size: 1.6rem;
    }
    .page-headline-section.trucking-headline-clear {
        margin-top: 100px;
    }
}

.trucking-banner-content-right {
    color: #68696D;
}
.trucking-banner-subheadline {
    color: #68696D;
}
.trucking-banner-desc {
    color: #68696D;
}
.trucking-banner-demo-btn {
    display: inline-block;
    margin-top: 28px;
    padding: 15px 40px;
    background: #43ABDB;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(67,171,219,0.08);
}
.trucking-banner-demo-btn:hover {
    background: #2692c6;
    color: #fff;
}


/* Features Grid Section */
.features-grid-section {
    padding: 5px 20px 5px 20px;
    background: #FFFFFF;
}

.features-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-card {
    border: 2px solid #68696D;
    border-radius: 8px;
    padding: 30px;
    background: #FFFFFF;
    position: relative;
    text-align: left;
}

.feature-icon {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin: 0 0 15px 15px;
    shape-outside: margin-box;
}

.feature-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 15px 0;
    clear: none;
}

.feature-description {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
    clear: none;
}

.feature-card-with-bg {
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 80%;
}

/* Traffic Sign Section */
.traffic-sign-section {
    padding: 5px 20px 60px 20px;
    background: #FFFFFF;
}

.traffic-sign-container {
    max-width: 1200px;
    margin: 0 auto;
}

.traffic-sign {
    position: relative;
    background-image: url('../images/arrow.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left center;
    padding: 25px 100px 25px 30px;
    min-height: 120px;
    max-width: 70%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.traffic-sign::after {
    display: none;
}

.traffic-sign::before {
    display: none;
}

.traffic-sign-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #68696D;
    margin: 0;
    line-height: 1.6;
}

/* Getting Started Section */
.getting-started-section {
    padding: 30px 20px 60px 20px;
    background: #FFFFFF;
}

.getting-started-container {
    max-width: 1200px;
    margin: 0 auto;
}

.getting-started-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.getting-started-text {
    flex: 1;
}

.getting-started-text p {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.getting-started-text p:last-of-type {
    margin-bottom: 30px;
}

.getting-started-btn {
    display: inline-block;
    background: #43ABDB;
    color: #FFFFFF;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    transition: background 0.3s ease;
}

.getting-started-btn:hover {
    background: #2692c6;
}

.getting-started-image {
    flex: 1;
    text-align: center;
}

.getting-started-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Plan and Dispatch Section */
.plan-dispatch-section {
    padding: 60px 20px 0 20px;
    background: #FFFFFF;
}

.plan-dispatch-container {
    max-width: 1200px;
    margin: 0 auto;
}

.plan-dispatch-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.plan-dispatch-image {
    flex: 1;
    text-align: center;
}

.plan-dispatch-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.plan-dispatch-text {
    flex: 1;
}

.plan-dispatch-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.plan-dispatch-text p {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

/* Start Projects Section */
.start-projects-section {
    padding: 60px 20px 0 20px;
    background: #FFFFFF;
}

.start-projects-container {
    max-width: 1200px;
    margin: 0 auto;
}

.start-projects-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.start-projects-text {
    flex: 1;
    position: relative;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 80%;
    padding: 20px;
}

.start-projects-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.start-projects-text p {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

.start-projects-image {
    flex: 1;
    text-align: center;
}

.start-projects-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Monitor Progress Section */
.monitor-progress-section {
    padding: 60px 20px;
    background: #FFFFFF;
}

.monitor-progress-container {
    max-width: 1200px;
    margin: 0 auto;
}

.monitor-progress-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.monitor-progress-image {
    flex: 1;
    text-align: center;
}

.monitor-progress-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.monitor-progress-text {
    flex: 1;
}

.monitor-progress-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.monitor-progress-text p {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.monitor-progress-btn {
    display: inline-block;
    background: #43ABDB;
    color: #FFFFFF;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    transition: background 0.3s ease;
}

.monitor-progress-btn:hover {
    background: #2692c6;
}

/* Unlock Growth Section */
.unlock-growth-section {
    padding: 60px 20px 0 20px;
    background: #FFFFFF;
    position: relative;
}

.unlock-growth-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.unlock-growth-content {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 20px 100px 20px;
}

.unlock-growth-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.unlock-growth-text {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 800px;
}

.unlock-growth-image {
    margin-top: -80px;
    position: relative;
    z-index: 1;
}

.unlock-growth-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Driver Banner Section */
.driver-banner-section {
    background-image: url('../images/driver_banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 2px 0;
    width: 100%;
}

.driver-banner-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.driver-banner-content {
    flex: 1;
    padding: 0 40px;
}

.driver-banner-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.driver-banner-desc {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.driver-banner-demo-btn {
    display: inline-block;
    background: #FDD7E4;
    color: #000000;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    transition: background 0.3s ease;
}

.driver-banner-demo-btn:hover {
    background: #fcc2d4;
}

.driver-banner-img {
    flex: 1;
    text-align: right;
    padding: 0 40px 0 0;
}

.driver-banner-img img {
    max-width: 100%;
    height: 400px;
    object-fit: contain;
}

/* Driver Problem Statement Section */
.driver-problem-section {
    width: 100%;
    padding: 80px 0;
    background: #FFFFFF;
}

.driver-problem-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.driver-problem-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    text-align: center;
    margin: 0 0 50px 0;
    line-height: 1.3;
}

.driver-problem-content {
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: space-between;
}

.driver-problem-text {
    flex: 1;
    color: #68696D;
}

.driver-problem-text p {
    font-size: 1.125rem;
    line-height: 1.8;
    margin: 0;
}

.driver-problem-image {
    flex: 1;
    text-align: center;
}

.driver-problem-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Driver Pink Background for Headline */
.solution-headline-section.driver-pink-bg {
    background-color: #FDD7E4;
}

.solution-headline-section.driver-pink-bg .solution-headline {
    color: #000000;
}

/* Driver Description Section */
.driver-description-section {
    padding: 30px 20px 15px 20px;
    background: #FFFFFF;
}

.driver-description-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.driver-description-text {
    font-size: 1.25rem;
    color: #68696D;
    line-height: 1.8;
    margin: 0;
}

/* Driver Features Grid Section */
.driver-features-grid-section {
    width: 100%;
    padding: 30px 20px 60px 20px;
    background: #FFFFFF;
}

.driver-features-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.driver-feature-card {
    background: #FFFFFF;
    border: 2px solid #68696D;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.driver-feature-card-center {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.driver-feature-card-with-bg {
    background-image: url('../images/letter_t.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    position: relative;
}

.driver-feature-content {
    flex: 1;
}

.driver-feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.driver-feature-description {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

.driver-feature-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.driver-feature-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Driver Join Community Section */
.driver-join-section {
    width: 100%;
    padding: 60px 20px;
    background: #FFFFFF;
}

.driver-join-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.driver-join-content {
    flex: 1;
}

.driver-join-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.driver-join-text {
    margin-bottom: 30px;
}

.driver-join-text p {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.8;
    margin: 0 0 15px 0;
}

.driver-join-text p:first-child {
    font-weight: 600;
    margin-bottom: 20px;
}

.driver-video-btn {
    display: inline-block;
    background-color: #FDD7E4;
    color: #000000;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 15px 40px;
    border: 2px solid #68696D;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.driver-video-btn:hover {
    background: #fcc2d4;
}

.driver-join-image {
    flex: 1;
    text-align: center;
}

.driver-join-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Driver Seize Control Section */
.driver-control-section {
    width: 100%;
    padding: 60px 20px;
    background: #FFFFFF;
}

.driver-control-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.driver-control-image {
    flex: 1;
    text-align: center;
}

.driver-control-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.driver-control-content {
    flex: 1;
}

.driver-control-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.driver-control-text p {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.8;
    margin: 0 0 20px 0;
}

.driver-control-text p:last-child {
    margin-bottom: 0;
}

/* Driver Ready CTA Banner */
.driver-ready-section {
    width: 100%;
    background-image: url('../images/driver_ready_banner.png');
    background-size: cover;
    background-position: center;
    padding: 60px 0;
}

.driver-ready-bg {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.driver-ready-card {
    padding: 36px 40px;
    max-width: 900px;
    text-align: center;
}

.driver-ready-subheadline {
    font-size: 1.75rem;
    color: #FFFFFF;
    margin: 0 0 18px 0;
    font-weight: 700;
}

.driver-ready-text {
    font-size: 1.125rem;
    color: #FFFFFF;
    line-height: 1.7;
    margin: 0 0 22px 0;
}

.driver-ready-btn {
    display: inline-block;
    background-color: #FDD7E4;
    color: #000000;
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid #FFFFFF;
}

/* Driver Adapting to Changes Section */
.driver-changes-section {
    width: 100%;
    padding: 60px 20px;
    background: #FFFFFF;
}

.driver-changes-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.driver-changes-content {
    flex: 1;
}

.driver-changes-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.driver-changes-text p {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.8;
    margin: 0 0 15px 0;
}

.driver-changes-text p:first-child {
    font-weight: 600;
    margin-bottom: 20px;
}

.driver-changes-text p:last-child {
    margin-top: 20px;
}

.driver-changes-image {
    flex: 1;
    text-align: center;
}

.driver-changes-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Driver Effortless Job Approvals Section */
.driver-approval-section {
    width: 100%;
    padding: 60px 20px;
    background: #FFFFFF;
}

.driver-approval-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.driver-approval-image {
    flex: 1;
    text-align: center;
}

.driver-approval-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.driver-approval-content {
    flex: 1;
    position: relative;
    background-image: url('../images/letter_t.png');
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
}

.driver-approval-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.driver-approval-text p {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.8;
    margin: 0 0 20px 0;
}

.driver-approval-text p:last-child {
    margin-bottom: 0;
}

/* Driver Simplify Invoicing Section */
.driver-invoicing-section {
    width: 100%;
    padding: 60px 20px;
    background: #FFFFFF;
}

.driver-invoicing-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.driver-invoicing-content {
    flex: 1;
}

.driver-invoicing-subheadline {
    font-size: 1.75rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 25px 0;
    line-height: 1.3;
}

.driver-invoicing-text p {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.8;
    margin: 0 0 20px 0;
}

.driver-invoicing-text p:last-child {
    margin-bottom: 0;
}

.driver-invoicing-image {
    flex: 1;
    text-align: center;
}

.driver-invoicing-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Driver Growth/Success Section */
.driver-growth-section {
    width: 100%;
    padding: 60px 20px 20px 20px;
    background: #FFFFFF;
}

.driver-growth-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.driver-growth-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin-bottom: -80px;
    padding-right: 40px;
}

.driver-growth-subheadline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

.driver-growth-text {
    font-size: 1.125rem;
    color: #68696D;
    line-height: 1.8;
    margin: 0;
}

.driver-growth-image {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 0;
}

.driver-growth-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Clear class for drivers page headline */
.page-headline-section.drivers-headline-clear {
    margin-top: 130px;
}

/* Responsive */
@media (max-width: 1024px) {
    .traffic-sign {
        max-width: 85%;
    }
}

@media (max-width: 900px) {
    .traffic-sign {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .traffic-sign {
        background-image: url('../images/arrow_mobile.svg');
        padding: 25px 60px 25px 20px;
        min-height: 300px;
        max-width: 100%;
        background-size: 100% 100%;
    }
    
    .traffic-sign-text {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .getting-started-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .getting-started-image {
        order: -1;
    }
    
    .plan-dispatch-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .plan-dispatch-subheadline {
        font-size: 1.5rem;
    }
    
    .start-projects-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .start-projects-image {
        order: -1;
    }
    
    .start-projects-subheadline {
        font-size: 1.5rem;
    }
    
    .monitor-progress-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .monitor-progress-subheadline {
        font-size: 1.5rem;
    }
    
    .unlock-growth-headline {
        font-size: 1.5rem;
    }
    
    .unlock-growth-text {
        font-size: 1rem;
    }
    
    .driver-banner-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .driver-banner-content {
        padding: 0 20px;
        text-align: center;
    }
    
    .driver-banner-headline {
        font-size: 1.5rem;
    }
    
    .driver-banner-desc {
        font-size: 1rem;
    }
    
    .driver-banner-img {
        padding: 0 20px;
        text-align: center;
    }
    
    .driver-banner-img img {
        height: auto;
    }
    
    .driver-problem-section {
        padding: 50px 0;
    }
    
    .driver-problem-container {
        padding: 0 20px;
    }
    
    .driver-problem-headline {
        font-size: 1.5rem;
        margin: 0 0 30px 0;
    }
    
    .driver-problem-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .driver-problem-text p {
        font-size: 1rem;
    }
    
    .driver-problem-image {
        order: -1;
    }
    
    .driver-description-section {
        padding: 40px 20px;
    }
    
    .driver-description-text {
        font-size: 1rem;
    }
    
    .driver-features-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .driver-feature-card {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    
    .driver-feature-card-center {
        grid-column: 1;
    }
    
    .driver-feature-title {
        font-size: 1.25rem;
    }
    
    .driver-feature-description {
        font-size: 0.95rem;
    }
    
    .driver-feature-image {
        width: 100px;
        height: 100px;
    }
    
    .driver-join-section {
        padding: 40px 20px;
    }
    
    .driver-join-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .driver-join-subheadline {
        font-size: 1.35rem;
        text-align: center;
    }
    
    .driver-join-text p {
        font-size: 1rem;
    }
    
    .driver-join-image {
        order: -1;
    }
    
    .driver-video-btn {
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    
    .driver-control-section {
        padding: 40px 20px;
    }
    
    .driver-control-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .driver-control-subheadline {
        font-size: 1.35rem;
    }
    
    .driver-control-text p {
        font-size: 1rem;
    }
    
    .driver-changes-section {
        padding: 40px 20px;
    }
    
    .driver-changes-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .driver-changes-subheadline {
        font-size: 1.35rem;
    }
    
    .driver-changes-text p {
        font-size: 1rem;
    }
    
    .driver-approval-section {
        padding: 40px 20px;
    }
    
    .driver-approval-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .driver-approval-subheadline {
        font-size: 1.35rem;
    }
    
    .driver-approval-text p {
        font-size: 1rem;
    }
    
    .driver-approval-content {
        background-size: 30%;
        padding: 10px;
    }
    
    .driver-invoicing-section {
        padding: 40px 20px;
    }
    
    .driver-invoicing-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .driver-invoicing-subheadline {
        font-size: 1.35rem;
    }
    
    .driver-invoicing-text p {
        font-size: 1rem;
    }
    
    .driver-invoicing-image {
        order: -1;
    }
    
    .driver-growth-section {
        padding: 40px 20px 20px 20px;
    }
    
    .driver-growth-content {
        margin-bottom: 20px;
        padding-right: 0;
        text-align: center;
    }
    
    .driver-growth-subheadline {
        font-size: 1.5rem;
    }
    
    .driver-growth-text {
        font-size: 1rem;
    }
    
    .hero-banner-container {
        flex-direction: column;
        gap: 30px;
    }

/* Responsive tweaks for Driver Ready CTA */
@media (max-width: 768px) {
    .driver-ready-card {
        padding: 20px;
    }
    .driver-ready-subheadline {
        font-size: 1.35rem;
    }
    .driver-ready-text {
        font-size: 1rem;
    }
    .driver-ready-section {
        padding: 40px 0;
    }
}    .hero-banner-content {
        padding: 0 20px;
        text-align: center;
    }
    
    .hero-banner-subheadline {
        font-size: 1.5rem;
    }
    
    .hero-banner-desc {
        font-size: 1rem;
    }
    
    .hero-banner-image {
        padding: 0 20px;
        text-align: center;
    }
    
    .hero-banner-image img {
        height: auto;
    }
    
    .feature-icon {
        position: static;
        float: none;
        margin: 0 auto 20px auto;
    }
    
    .feature-title {
        padding-right: 0;
        text-align: center;
    }
    
    .feature-description {
        text-align: center;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .features-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-card {
        padding: 30px 20px;
        min-height: auto;
    }
    
    .feature-icon {
        position: static;
        float: none;
        margin: 0 auto 20px auto;
    }
    
    .feature-title {
        padding-right: 0;
        text-align: center;
    }
    
    .feature-description {
        text-align: center;
    }
}
/* ===== PRODUCT PAGE STYLES ===== */

/* Product Page Headline */
.page-headline-section.product-headline-clear {
    margin-top: 130px;
}

.product-headline-blue {
    color: #FF8E09;
}

/* Product Banner Section */
.product-banner-section {
    width: 100%;
    min-height: 340px;
    background: url('../images/product_banner.png') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px 0;
}

.product-banner-bg {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 340px;
    position: relative;
    box-sizing: border-box;
    padding: 0 40px;
}

.product-banner-content {
    position: relative;
    z-index: 2;
    padding: 60px 40px 60px 80px;
    color: #68696D;
    max-width: 700px;
}

.product-banner-content .subheadline {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 18px 0;
    color: #68696D;
    line-height: 1.2;
}

.product-banner-content .product-intro {
    font-size: 1.25rem;
    color: #68696D;
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.product-banner-content .product-description {
    font-size: 1.25rem;
    color: #68696D;
    margin: 0;
    line-height: 1.6;
}

.product-banner-image {
    position: relative;
    z-index: 2;
    max-width: 420px;
    width: 38vw;
    min-width: 220px;
    height: auto;
    margin-right: 40px;
    border-radius: 8px;
    background: none;
    box-shadow: none;
}

.product-banner-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Cloud Solution Explanation Section */
.cloud-explanation-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.cloud-explanation-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.cloud-explanation-container .subheadline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 24px 0;
}

.cloud-explanation-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0;
    max-width: 900px;
    margin: 0 auto;
}

/* Cloud Benefits Section */
.cloud-benefits-section {
    background-color: #FF8E09;
    padding: 0;
    width: 100%;
}

.cloud-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
}

.cloud-benefits-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    text-align: center;
}

/* Cloud Benefits Cards Section */
.cloud-benefits-cards-section {
    background-color: #FFFFFF;
    padding: 30px 20px 60px 20px;
}

.cloud-benefits-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.cloud-benefits-left-column {
    display: contents;
}

.cloud-benefit-horizontal-card {
    background: #FFFFFF;
    border: 2px solid #68696D;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.cloud-benefit-card-with-bg {
    background-image: url('../images/letter_t.png');
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.cloud-benefit-horizontal-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.cloud-benefit-horizontal-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-benefit-horizontal-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cloud-benefit-vertical-card {
    grid-column: 2;
    grid-row: 1 / 3;
    background: #FFFFFF;
    border: 2px solid #68696D;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cloud-benefit-vertical-image {
    width: 200px;
    height: 200px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-benefit-vertical-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cloud-benefit-full-card {
    grid-column: 1 / -1;
    background: #FFFFFF;
    border: 2px solid #68696D;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cloud-benefit-full-content {
    flex: 1;
}

.cloud-benefit-full-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-benefit-full-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cloud-benefit-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.cloud-benefit-text {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

/* Cloud Benefits Second Row Section */
.cloud-benefits-second-section {
    background-color: #FFFFFF;
    padding: 0 20px 30px 20px;
    margin-top: -30px;
}

.cloud-benefits-second-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 30px;
}

.cloud-benefit-small-card {
    background: #FFFFFF;
    border: 2px solid #68696D;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cloud-benefit-small-content {
    flex: 1;
}

.cloud-benefit-small-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-benefit-small-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cloud-benefit-large-card {
    background: #FFFFFF;
    border: 2px solid #68696D;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cloud-benefit-large-content {
    flex: 1;
}

.cloud-benefit-large-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-benefit-large-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cloud-benefit-advantage-card {
    grid-column: 1 / -1;
    background: #FFFFFF;
    border: 2px solid #68696D;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cloud-benefit-advantage-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cloud-benefit-advantage-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cloud-benefit-advantage-content {
    flex: 1;
}

/* Empowering Growth Section */
.empowering-growth-section {
    background-color: #FF8E09;
    padding: 0;
    width: 100%;
}

.empowering-growth-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
}

.empowering-growth-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

/* Product Network Section */
.product-network-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.product-network-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.product-network-content {
    flex: 1;
}

.product-network-right {
    flex: 1;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-network-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.product-network-text:last-child {
    margin-bottom: 0;
}

.product-network-image {
    width: 100%;
}

.product-network-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.product-network-arrow {
    width: 100%;
}

.product-network-arrow .traffic-sign {
    max-width: 100%;
    padding: 15px 80px 15px 20px;
    min-height: 80px;
}

.product-network-arrow .traffic-sign-text {
    font-size: 1rem;
}

/* Responsive - Product Banner */
@media (max-width: 900px) {
    .product-banner-bg {
        flex-direction: column;
        padding: 24px 20px;
        min-height: 260px;
    }
    
    .product-banner-content {
        padding: 0;
        align-items: center;
        text-align: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }
    
    .product-banner-image {
        max-width: 220px;
        margin: 20px 0 0 0;
    }
}

@media (max-width: 600px) {
    .product-banner-section {
        min-height: 220px;
    }
    
    .product-banner-bg {
        flex-direction: column;
        padding: 20px 16px;
        min-height: 200px;
        width: 100%;
        max-width: 100%;
    }
    
    .product-banner-content {
        padding: 0;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
    
    .product-banner-content .subheadline {
        font-size: 1.5rem;
    }
    
    .product-banner-content .product-intro,
    .product-banner-content .product-description {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .cloud-explanation-section {
        padding: 40px 20px;
    }
    
    .cloud-explanation-container .subheadline {
        font-size: 1.5rem;
    }
    
    .cloud-explanation-text {
        font-size: 1rem;
    }
    
    .cloud-benefits-container {
        min-height: 70px;
    }
    
    .cloud-benefits-headline {
        font-size: 1.5rem;
    }
    
    .empowering-growth-container {
        min-height: 70px;
    }
    
    .empowering-growth-headline {
        font-size: 1.5rem;
    }
}

@media (max-width: 900px) {
    .cloud-benefits-cards-container {
        grid-template-columns: 1fr;
    }
    
    .cloud-benefit-vertical-card {
        grid-column: 1;
        grid-row: auto;
    }
    
    .cloud-benefits-second-container {
        grid-template-columns: 1fr;
    }
    
    .product-network-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .product-network-right {
        max-width: 100%;
        width: 100%;
    }
    
    .product-network-section {
        padding: 60px 10px;
    }
    
    .product-network-arrow {
        margin: 0 -10px;
        width: calc(100% + 20px);
    }
}

@media (max-width: 600px) {
    .cloud-benefits-cards-section {
        padding: 30px 20px 40px 20px;
    }
    
    .cloud-benefit-horizontal-card,
    .cloud-benefit-full-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .cloud-benefit-horizontal-image,
    .cloud-benefit-full-image {
        width: 100px;
        height: 100px;
    }
    
    .cloud-benefit-vertical-image {
        width: 150px;
        height: 150px;
    }
    
    .cloud-benefit-title {
        font-size: 1.25rem;
    }
    
    .cloud-benefits-second-section {
        padding: 0 20px 40px 20px;
    }
    
    .cloud-benefit-small-card,
    .cloud-benefit-large-card,
    .cloud-benefit-advantage-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .cloud-benefit-small-image,
    .cloud-benefit-large-image,
    .cloud-benefit-advantage-image {
        width: 100px;
        height: 100px;
    }
    
    .product-network-section {
        padding: 40px 5px;
    }
    
    .product-network-text {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .product-network-arrow {
        margin: 0 -5px;
        width: calc(100% + 10px);
    }
    
    .product-network-arrow .traffic-sign {
        background-image: url('../images/arrow.svg');
        padding: 12px 60px 12px 15px;
        min-height: 70px;
    }
    
    .product-network-arrow .traffic-sign-text {
        font-size: 0.9rem;
    }
}

/* User Groups Section */
.user-groups-headline-section {
    width: 100%;
    background-color: #FF8E09;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
}

.user-groups-headline-container {
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.user-groups-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.user-groups-intro-section {
    width: 100%;
    padding: 60px 40px 12px;
}

.user-groups-intro-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.user-groups-intro {
    font-size: 1.1rem;
    color: #68696D;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .user-groups-headline-section {
        padding: 20px 30px;
    }
    
    .user-groups-headline {
        font-size: 1.75rem;
    }
    
    .user-groups-intro-section {
        padding: 50px 30px 10px;
    }
    
    .user-groups-intro {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .user-groups-headline-section {
        min-height: 70px;
        padding: 15px 20px;
    }
    
    .user-groups-headline {
        font-size: 1.5rem;
    }
    
    .user-groups-intro-section {
        padding: 40px 20px 8px;
    }
    
    .user-groups-intro {
        font-size: 0.95rem;
    }
}

/* User Groups Content Section */
.user-groups-content-section {
    width: 100%;
    padding: 30px 40px 60px;
}

.user-groups-content-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
}

.user-groups-boxes {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-group-box {
    padding: 6px;
    border-radius: 12px;
}

.user-group-yellow {
    background-color: #FFF8B8;
}

.user-group-white {
    background-color: #FFFFFF;
    border: 2px solid #68696D;
}

.user-group-pink {
    background-color: #FDD7E4;
}

.user-group-text {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin: 0;
}

.user-group-text strong {
    font-weight: 700;
}

.user-groups-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-groups-image img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .user-groups-content-section {
        padding: 25px 30px 50px;
    }
    
    .user-groups-content-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .user-groups-boxes {
        width: 100%;
    }
    
    .user-groups-image {
        width: 100%;
        max-width: 500px;
    }
}

@media (max-width: 600px) {
    .user-groups-content-section {
        padding: 20px 20px 40px;
    }
    
    .user-groups-boxes {
        gap: 4px;
    }
    
    .user-group-box {
        padding: 4px;
    }
    
    .user-group-text {
        font-size: 0.95rem;
    }
}

.user-groups-footer {
    max-width: 1200px;
    margin: 30px auto 0;
    text-align: center;
}

.user-groups-footer-text {
    font-size: 1.1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .user-groups-footer {
        margin-top: 20px;
    }
    
    .user-groups-footer-text {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .user-groups-footer {
        margin-top: 15px;
    }
    
    .user-groups-footer-text {
        font-size: 0.95rem;
    }
}

/* Unlocking Value Section */
.unlocking-value-section {
    width: 100%;
    background-color: #FF8E09;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
}

.unlocking-value-container {
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.unlocking-value-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

@media (max-width: 900px) {
    .unlocking-value-section {
        padding: 20px 30px;
    }
    
    .unlocking-value-headline {
        font-size: 1.75rem;
    }
}

@media (max-width: 600px) {
    .unlocking-value-section {
        min-height: 70px;
        padding: 15px 20px;
    }
    
    .unlocking-value-headline {
        font-size: 1.5rem;
    }
}

.unlocking-value-intro-section {
    width: 100%;
    padding: 60px 40px 12px;
}

.unlocking-value-intro-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.unlocking-value-intro {
    font-size: 1.1rem;
    color: #68696D;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .unlocking-value-intro-section {
        padding: 50px 30px 10px;
    }
    
    .unlocking-value-intro {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .unlocking-value-intro-section {
        padding: 40px 20px 8px;
    }
    
    .unlocking-value-intro {
        font-size: 0.95rem;
    }
}

/* Value Cards Section */
.value-cards-section {
    width: 100%;
    padding: 30px 40px 60px;
}

.value-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.value-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.value-card-savings {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 105px;
    padding-bottom: 105px;
}

.value-card-image {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.value-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.value-card-subheadline {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 15px 0;
}

.value-card-text {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

.value-card-divider {
    width: 1px;
    background-color: #68696D;
    align-self: stretch;
}

@media (max-width: 900px) {
    .value-cards-section {
        padding: 25px 30px 50px;
    }
    
    .value-cards-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .value-card-divider {
        display: none;
    }
    
    .value-card-savings {
        padding-bottom: 0;
        background-size: 84px;
        background-position: left bottom 20px;
    }
    
    .value-card-image {
        width: 70px;
        height: 70px;
    }
    
    .value-card-subheadline {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    .value-cards-section {
        padding: 20px 20px 40px;
    }
    
    .value-cards-container {
        gap: 25px;
    }
    
    .value-card-savings {
        background-size: 70px;
        background-position: left bottom 15px;
    }
    
    .value-card-image {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    
    .value-card-subheadline {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .value-card-text {
        font-size: 0.95rem;
    }
}

.value-cards-footer {
    max-width: 1200px;
    margin: 30px auto 0;
    text-align: center;
}

.value-cards-footer-text {
    font-size: 1.1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .value-cards-footer {
        margin-top: 20px;
    }
    
    .value-cards-footer-text {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .value-cards-footer {
        margin-top: 15px;
    }
    
    .value-cards-footer-text {
        font-size: 0.95rem;
    }
}

/* Product Enhancements Section */
.product-enhancements-section {
    width: 100%;
    background-color: #FF8E09;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
}

.product-enhancements-container {
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.product-enhancements-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.product-enhancements-intro-section {
    width: 100%;
    padding: 60px 40px 12px;
}

.product-enhancements-intro-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.product-enhancements-intro {
    font-size: 1.1rem;
    color: #68696D;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .product-enhancements-section {
        padding: 20px 30px;
    }
    
    .product-enhancements-headline {
        font-size: 1.75rem;
    }
    
    .product-enhancements-intro-section {
        padding: 50px 30px 10px;
    }
    
    .product-enhancements-intro {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .product-enhancements-section {
        min-height: 70px;
        padding: 15px 20px;
    }
    
    .product-enhancements-headline {
        font-size: 1.5rem;
    }
    
    .product-enhancements-intro-section {
        padding: 40px 20px 8px;
    }
    
    .product-enhancements-intro {
        font-size: 0.95rem;
    }
}

/* Enhancement Cards Section */
.enhancement-cards-section {
    width: 100%;
    padding: 30px 40px 60px;
}

.enhancement-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.enhancement-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.enhancement-card-image {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.enhancement-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.enhancement-card-subheadline {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 15px 0;
}

.enhancement-card-text {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

.enhancement-card-divider {
    width: 1px;
    background-color: #68696D;
    align-self: stretch;
}

@media (max-width: 900px) {
    .enhancement-cards-section {
        padding: 25px 30px 50px;
    }
    
    .enhancement-cards-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .enhancement-card-divider {
        display: none;
    }
    
    .enhancement-card-image {
        width: 70px;
        height: 70px;
    }
    
    .enhancement-card-subheadline {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {
    .enhancement-cards-section {
        padding: 20px 20px 40px;
    }
    
    .enhancement-cards-container {
        gap: 25px;
    }
    
    .enhancement-card-image {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }
    
    .enhancement-card-subheadline {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .enhancement-card-text {
        font-size: 0.95rem;
    }
}

/* Pricing Page Styles */
.pricing-headline-blue {
    background-color: transparent;
}

.pricing-headline-blue .page-headline {
    color: #0D76BB;
}

/* Pricing Banner Section */
.pricing-banner-section {
    width: 100%;
    min-height: 340px;
    background: url('../images/pricing_banner.png') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px 0;
}

.pricing-banner-bg {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 340px;
    position: relative;
    box-sizing: border-box;
    padding: 0 40px;
}

.pricing-banner-content {
    position: relative;
    z-index: 2;
    padding: 60px 40px 60px 80px;
    color: #68696D;
    max-width: 700px;
}

.pricing-banner-content .subheadline {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 18px 0;
    color: #68696D;
    line-height: 1.2;
}

.pricing-banner-content .pricing-intro {
    font-size: 1.25rem;
    color: #68696D;
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.pricing-banner-content .pricing-description {
    font-size: 1.25rem;
    color: #68696D;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.pricing-cta-button {
    display: inline-block;
    background-color: #0D76BB;
    color: #FFFFFF;
    padding: 14px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.pricing-cta-button:hover {
    background-color: #0a5a91;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 118, 187, 0.3);
}

.pricing-banner-image {
    position: relative;
    z-index: 2;
    max-width: 420px;
    width: 38vw;
    min-width: 220px;
    height: auto;
    margin-right: 40px;
    border-radius: 8px;
    background: none;
    box-shadow: none;
}

.pricing-banner-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .pricing-banner-section {
        min-height: 300px;
    }
    
    .pricing-banner-bg {
        flex-direction: column;
        padding: 30px 20px;
        min-height: 280px;
    }
    
    .pricing-banner-content {
        padding: 20px;
        max-width: 100%;
        text-align: center;
    }
    
    .pricing-banner-content .subheadline {
        font-size: 1.8rem;
    }
    
    .pricing-banner-content .pricing-intro,
    .pricing-banner-content .pricing-description {
        font-size: 1.1rem;
    }
    
    .pricing-cta-button {
        font-size: 1rem;
        padding: 12px 35px;
    }
    
    .pricing-banner-image {
        margin-right: 0;
        max-width: 350px;
    }
}

@media (max-width: 600px) {
    .pricing-banner-section {
        min-height: 220px;
    }
    
    .pricing-banner-bg {
        flex-direction: column;
        padding: 20px 16px;
        min-height: 200px;
        width: 100%;
        max-width: 100%;
    }
    
    .pricing-banner-content {
        padding: 0;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
    
    .pricing-banner-content .subheadline {
        font-size: 1.5rem;
    }
    
    .pricing-banner-content .pricing-intro,
    .pricing-banner-content .pricing-description {
        font-size: 1rem;
    }
    
    .pricing-cta-button {
        font-size: 0.95rem;
        padding: 12px 30px;
    }
    
    .pricing-banner-image {
        max-width: 280px;
    }
}

/* Subscription Subheadline Section */
.pricing-subscription-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.pricing-subscription-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.pricing-subscription-container .subheadline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0;
}

@media (max-width: 768px) {
    .pricing-subscription-section {
        padding: 40px 20px;
    }
    
    .pricing-subscription-container .subheadline {
        font-size: 1.5rem;
    }
}

/* Pricing Features Grid Section */
.pricing-features-grid-section {
    padding: 5px 20px 60px 20px;
    background: #FFFFFF;
}

.pricing-features-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.pricing-feature-card {
    border: 2px solid #68696D;
    border-radius: 8px;
    padding: 30px;
    background: #FFFFFF;
    position: relative;
    text-align: left;
}

.pricing-feature-icon {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin: 0 0 15px 15px;
    shape-outside: margin-box;
}

.pricing-feature-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pricing-feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 15px 0;
    clear: none;
}

.pricing-feature-description {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
    clear: none;
}

.pricing-feature-card-with-bg {
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 80%;
}

@media (max-width: 768px) {
    .pricing-features-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pricing-feature-card {
        padding: 25px;
    }
    
    .pricing-feature-icon {
        width: 80px;
        height: 80px;
    }
    
    .pricing-feature-title {
        font-size: 1.3rem;
    }
    
    .pricing-feature-description {
        font-size: 0.95rem;
    }
}

/* Free Trial Section */
.pricing-free-trial-section {
    background-color: #0D76BB;
    padding: 0;
    width: 100%;
}

.pricing-free-trial-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
}

.pricing-free-trial-headline {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .pricing-free-trial-container {
        min-height: 70px;
    }
    
    .pricing-free-trial-headline {
        font-size: 1.5rem;
    }
}

/* Free Trial Content Section */
.pricing-trial-content-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.pricing-trial-content-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.pricing-trial-text {
    flex: 1;
    max-width: 700px;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 60%;
    padding: 20px;
    position: relative;
    text-align: center;
}

.pricing-trial-text p {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0 0 30px 0;
    position: relative;
    z-index: 1;
}

.pricing-trial-button {
    display: inline-block;
    background-color: #0D76BB;
    color: #FFFFFF;
    padding: 14px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.pricing-trial-button:hover {
    background-color: #0a5a91;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 118, 187, 0.3);
}

.pricing-trial-image {
    flex: 0 0 auto;
    max-width: 400px;
}

.pricing-trial-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .pricing-trial-content-section {
        padding: 40px 20px;
    }
    
    .pricing-trial-content-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .pricing-trial-text {
        max-width: 100%;
        text-align: center;
    }
    
    .pricing-trial-text p {
        font-size: 1.05rem;
    }
    
    .pricing-trial-button {
        font-size: 1rem;
        padding: 12px 35px;
    }
    
    .pricing-trial-image {
        max-width: 350px;
    }
}

@media (max-width: 600px) {
    .pricing-trial-content-section {
        padding: 30px 20px;
    }
    
    .pricing-trial-content-container {
        gap: 30px;
    }
    
    .pricing-trial-text p {
        font-size: 1rem;
    }
    
    .pricing-trial-button {
        font-size: 0.95rem;
        padding: 12px 30px;
    }
    
    .pricing-trial-image {
        max-width: 100%;
    }
}

/* Subscription Info Banner Section */
.pricing-subscription-banner-section {
    width: 100%;
    background: url('../images/subscription_banner.png') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    min-height: 400px;
}

.pricing-subscription-banner-bg {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 60px;
    min-height: 400px;
}

.pricing-subscription-content {
    flex: 1;
    max-width: 700px;
}

.pricing-subscription-subheadline {
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.pricing-subscription-text {
    font-size: 1.15rem;
    color: #FFFFFF;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.pricing-subscription-text:last-child {
    margin-bottom: 0;
}

.pricing-subscription-image {
    flex: 0 0 auto;
    max-width: 294px;
    width: 27vw;
    min-width: 154px;
}

.pricing-subscription-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .pricing-subscription-banner-section {
        min-height: 300px;
    }
    
    .pricing-subscription-banner-bg {
        flex-direction: column;
        padding: 30px 20px;
        gap: 40px;
        min-height: 300px;
    }
    
    .pricing-subscription-content {
        max-width: 100%;
        text-align: center;
    }
    
    .pricing-subscription-subheadline {
        font-size: 1.6rem;
    }
    
    .pricing-subscription-text {
        font-size: 1.05rem;
    }
    
    .pricing-subscription-image {
        max-width: 245px;
    }
}

@media (max-width: 600px) {
    .pricing-subscription-banner-section {
        min-height: 250px;
    }
    
    .pricing-subscription-banner-bg {
        padding: 20px 16px;
        gap: 30px;
        min-height: 250px;
    }
    
    .pricing-subscription-subheadline {
        font-size: 1.4rem;
    }
    
    .pricing-subscription-text {
        font-size: 1rem;
    }
    
    .pricing-subscription-image {
        max-width: 196px;
    }
}

/* Fleet Management Section */
.pricing-fleet-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.pricing-fleet-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.pricing-fleet-image {
    flex: 0 0 auto;
    max-width: 400px;
}

.pricing-fleet-image img {
    width: 100%;
    height: auto;
    display: block;
}

.pricing-fleet-content {
    flex: 1;
    max-width: 700px;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 60%;
    padding: 20px;
    position: relative;
}

.pricing-fleet-subheadline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.pricing-fleet-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 16px 0;
    position: relative;
    z-index: 1;
}

.pricing-fleet-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .pricing-fleet-section {
        padding: 40px 20px;
    }
    
    .pricing-fleet-container {
        flex-direction: column-reverse;
        gap: 40px;
    }
    
    .pricing-fleet-image {
        max-width: 350px;
    }
    
    .pricing-fleet-content {
        max-width: 100%;
        text-align: center;
    }
    
    .pricing-fleet-subheadline {
        font-size: 1.6rem;
    }
    
    .pricing-fleet-text {
        font-size: 1.05rem;
    }
}

@media (max-width: 600px) {
    .pricing-fleet-section {
        padding: 30px 20px;
    }
    
    .pricing-fleet-container {
        gap: 30px;
    }
    
    .pricing-fleet-image {
        max-width: 100%;
    }
    
    .pricing-fleet-subheadline {
        font-size: 1.4rem;
    }
    
    .pricing-fleet-text {
        font-size: 1rem;
    }
}

/* Ten Pack Banner Section */
.pricing-tenpack-banner-section {
    width: 100%;
    background: url('../images/pricing_tenpack_banner.png') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    min-height: 400px;
}

.pricing-tenpack-banner-bg {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 60px;
    min-height: 400px;
}

.pricing-tenpack-content {
    flex: 1;
    max-width: 700px;
}

.pricing-tenpack-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.pricing-tenpack-text:last-child {
    margin-bottom: 0;
}

.pricing-tenpack-image {
    flex: 0 0 auto;
    max-width: 294px;
    width: 27vw;
    min-width: 154px;
}

.pricing-tenpack-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .pricing-tenpack-banner-section {
        min-height: 300px;
    }
    
    .pricing-tenpack-banner-bg {
        flex-direction: column;
        padding: 30px 20px;
        gap: 40px;
        min-height: 300px;
    }
    
    .pricing-tenpack-content {
        max-width: 100%;
        text-align: center;
    }
    
    .pricing-tenpack-text {
        font-size: 1.05rem;
    }
    
    .pricing-tenpack-image {
        max-width: 245px;
    }
}

@media (max-width: 600px) {
    .pricing-tenpack-banner-section {
        min-height: 250px;
    }
    
    .pricing-tenpack-banner-bg {
        padding: 20px 16px;
        gap: 30px;
        min-height: 250px;
    }
    
    .pricing-tenpack-text {
        font-size: 1rem;
    }
    
    .pricing-tenpack-image {
        max-width: 196px;
    }
}

/* Free Account Section */
.pricing-free-account-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.pricing-free-account-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.pricing-free-account-image {
    flex: 0 0 auto;
    max-width: 400px;
}

.pricing-free-account-image img {
    width: 100%;
    height: auto;
    display: block;
}

.pricing-free-account-content {
    flex: 1;
    max-width: 700px;
    background-image: url('../images/letter_t.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 60%;
    padding: 20px;
    position: relative;
}

.pricing-free-account-subheadline {
    font-size: 2rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 20px 0;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.pricing-free-account-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 16px 0;
    position: relative;
    z-index: 1;
}

.pricing-free-account-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .pricing-free-account-section {
        padding: 40px 20px;
    }
    
    .pricing-free-account-container {
        flex-direction: column-reverse;
        gap: 40px;
    }
    
    .pricing-free-account-image {
        max-width: 350px;
    }
    
    .pricing-free-account-content {
        max-width: 100%;
        text-align: center;
    }
    
    .pricing-free-account-subheadline {
        font-size: 1.6rem;
    }
    
    .pricing-free-account-text {
        font-size: 1.05rem;
    }
}

@media (max-width: 600px) {
    .pricing-free-account-section {
        padding: 30px 20px;
    }
    
    .pricing-free-account-container {
        gap: 30px;
    }
    
    .pricing-free-account-image {
        max-width: 100%;
    }
    
    .pricing-free-account-subheadline {
        font-size: 1.4rem;
    }
    
    .pricing-free-account-text {
        font-size: 1rem;
    }
}

/* Streamline CTA Section */
.pricing-streamline-section {
    background-color: #CAEAFF;
    padding: 60px 20px;
}

.pricing-streamline-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.pricing-streamline-subheadline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.pricing-streamline-button {
    display: inline-block;
    background-color: #0D76BB;
    color: #FFFFFF;
    padding: 14px 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-bottom: 25px;
}

.pricing-streamline-button:hover {
    background-color: #0a5a91;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(13, 118, 187, 0.3);
}

.pricing-streamline-text {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .pricing-streamline-section {
        padding: 40px 20px;
    }
    
    .pricing-streamline-subheadline {
        font-size: 1.8rem;
        margin: 0 0 25px 0;
    }
    
    .pricing-streamline-button {
        font-size: 1rem;
        padding: 12px 40px;
        margin-bottom: 20px;
    }
    
    .pricing-streamline-text {
        font-size: 0.95rem;
    }
}

/* About Us Page Styles */
.about-headline-cyan {
    background-color: transparent;
}

.about-headline-cyan .page-headline {
    color: #43ABDB;
}

/* About Us Banner Section */
.about-banner-section {
    width: 100%;
    background: url('../images/about_us_banner.png') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    min-height: 400px;
}

.about-banner-bg {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 60px;
    min-height: 400px;
}

.about-banner-content {
    flex: 1;
    max-width: 700px;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 40px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.about-banner-text {
    font-size: 1.25rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0;
}

.about-banner-image {
    flex: 0 0 auto;
    max-width: 294px;
    width: 27vw;
    min-width: 154px;
}

.about-banner-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .about-banner-section {
        min-height: 300px;
    }
    
    .about-banner-bg {
        flex-direction: column;
        padding: 30px 20px;
        gap: 40px;
        min-height: 300px;
    }
    
    .about-banner-content {
        max-width: 100%;
        text-align: center;
        padding: 30px;
    }
    
    .about-banner-text {
        font-size: 1.1rem;
    }
    
    .about-banner-image {
        max-width: 245px;
    }
}

@media (max-width: 600px) {
    .about-banner-section {
        min-height: 250px;
    }
    
    .about-banner-bg {
        padding: 20px 16px;
        gap: 30px;
        min-height: 250px;
    }
    
    .about-banner-content {
        padding: 25px;
    }
    
    .about-banner-text {
        font-size: 1rem;
    }
    
    .about-banner-image {
        max-width: 196px;
    }
}

/* Problem Statement Section */
.about-problem-section {
    background-color: #FFFFFF;
    padding: 60px 20px;
}

.about-problem-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.about-problem-headline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 50px 0;
    line-height: 1.2;
}

.about-problem-content {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.about-problem-image {
    flex: 0 0 auto;
    max-width: 450px;
}

.about-problem-image img {
    width: 100%;
    height: auto;
    display: block;
}

.about-problem-text-container {
    flex: 1;
    text-align: left;
}

.about-problem-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.about-problem-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .about-problem-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .about-problem-image {
        max-width: 100%;
    }
    
    .about-problem-text-container {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .about-problem-section {
        padding: 40px 20px;
    }
    
    .about-problem-headline {
        font-size: 1.8rem;
        margin: 0 0 35px 0;
    }
    
    .about-problem-content {
        gap: 30px;
    }
    
    .about-problem-text {
        font-size: 1rem;
    }
}

/* About Us - Mission Section */
.about-mission-section {
    width: 100%;
    background-image: url('../images/tragget_mission.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    padding: 0;
    position: relative;
}

.about-mission-color-stripe {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.about-mission-color-stripe img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.about-mission-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 20px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-mission-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-mission-headline {
    font-size: 2.5rem;
    font-weight: 700;
    color: #68696D;
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.about-mission-text {
    font-size: 1.25rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0 0 30px 0;
}

.about-mission-belief {
    font-size: 1.25rem;
    font-style: italic;
    color: #68696D;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .about-mission-section {
        min-height: 400px;
    }
    
    .about-mission-container {
        padding: 60px 20px;
    }
    
    .about-mission-headline {
        font-size: 1.8rem;
        margin: 0 0 25px 0;
    }
    
    .about-mission-text,
    .about-mission-belief {
        font-size: 1.1rem;
    }
}

@media (max-width: 600px) {
    .about-mission-section {
        min-height: 350px;
    }
    
    .about-mission-container {
        padding: 40px 20px;
    }
    
    .about-mission-headline {
        font-size: 1.5rem;
        margin: 0 0 20px 0;
    }
    
    .about-mission-text,
    .about-mission-belief {
        font-size: 1rem;
    }
    
    .about-mission-text {
        margin: 0 0 25px 0;
    }
}

/* About Us - Who We Serve Section */
.about-serve-section {
    width: 100%;
    background-color: #43ABDB;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-serve-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.about-serve-headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

/* About Us - Built For Section */
.about-built-section {
    width: 100%;
    background-color: #FFFFFF;
    padding: 30px 20px;
}

.about-built-container {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.about-built-subheadline {
    font-size: 1.5rem;
    font-weight: 400;
    color: #68696D;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .about-serve-section {
        padding: 30px 20px;
        height: auto;
    }
    
    .about-serve-headline {
        font-size: 1.2rem;
    }
    
    .about-built-section {
        padding: 25px 20px;
    }
    
    .about-built-subheadline {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .about-serve-section {
        padding: 25px 15px;
    }
    
    .about-serve-headline {
        font-size: 1.2rem;
    }
    
    .about-built-section {
        padding: 20px 20px;
    }
    
    .about-built-subheadline {
        font-size: 1rem;
    }
}

/* About Us - Three Columns Section */
.about-columns-section {
    width: 100%;
    background-color: #FFFFFF;
    padding: 40px 20px;
}

.about-columns-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.about-column {
    flex: 1;
    text-align: center;
    background-size: 56%;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 10px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.about-column-jobsite {
    background-image: url('../images/ticket_jobsite.png');
}

.about-column-trucking {
    background-image: url('../images/ticket_trucking.png');
}

.about-column-driver {
    background-image: url('../images/ticket_driver.png');
}

.about-column-subheadline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #68696D;
    margin: 0 0 14px 0;
    line-height: 1.3;
}

.about-column-text {
    font-size: 1.1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0;
}

.about-column-divider {
    width: 1px;
    background-color: #D0D0D0;
    align-self: stretch;
    flex-shrink: 0;
}

.about-columns-benefit {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    text-align: center;
}

.about-columns-benefit-text {
    font-size: 1.5rem;
    font-weight: 400;
    color: #68696D;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .about-columns-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .about-column {
        background-size: 56%;
        min-height: 200px;
    }
    
    .about-column-divider {
        display: none;
    }
    
    .about-columns-benefit {
        margin: 30px auto 0 auto;
    }
}

@media (max-width: 768px) {
    .about-columns-section {
        padding: 30px 20px;
    }
    
    .about-column {
        background-size: 56%;
    }
    
    .about-column-subheadline {
        font-size: 1.5rem;
        margin: 0 0 15px 0;
    }
    
    .about-column-text {
        font-size: 1.15rem;
    }
    
    .about-columns-benefit-text {
        font-size: 1.2rem;
    }
}

/* About Us - How it All Started Section */
.about-started-title-section {
    width: 100%;
    background-color: #43ABDB;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-started-title-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.about-started-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

.about-started-content-section {
    width: 100%;
    background-color: #CAEAFF;
    padding: 40px 20px;
}

.about-started-content-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-started-subheadline {
    font-size: 1.5rem;
    font-weight: 400;
    color: #68696D;
    margin: 0 0 30px 0;
    line-height: 1.4;
}

.about-started-text-container {
    text-align: left;
}

.about-started-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.about-started-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .about-started-title-section {
        padding: 30px 20px;
        height: auto;
    }
    
    .about-started-title {
        font-size: 1.2rem;
    }
    
    .about-started-content-section {
        padding: 30px 20px;
    }
    
    .about-started-subheadline {
        font-size: 1.2rem;
        margin: 0 0 25px 0;
    }
    
    .about-started-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .about-started-title-section {
        padding: 25px 15px;
    }
    
    .about-started-title {
        font-size: 1.2rem;
    }
}

/* About Us - Join Us Section */
.about-join-section {
    width: 100%;
    background-color: #43ABDB;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-join-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.about-join-headline {
    font-size: 1.4rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.3;
    text-align: center;
}

.about-join-content-section {
    width: 100%;
    background-color: #FFFFFF;
    padding: 40px 20px;
}

.about-join-content-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-join-text {
    font-size: 1.15rem;
    color: #68696D;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .about-join-section {
        padding: 30px 20px;
        height: auto;
    }
    
    .about-join-headline {
        font-size: 1.2rem;
    }
    
    .about-join-content-section {
        padding: 30px 20px;
    }
    
    .about-join-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .about-join-section {
        padding: 25px 15px;
    }
    
    .about-join-headline {
        font-size: 1.2rem;
    }
}

/* About Us - Contact Section */
.about-contact-section {
    width: 100%;
    background-color: #FFFFFF;
    padding: 30px 20px;
}

.about-contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
}

.about-contact-column {
    flex: 1;
    display: flex;
    justify-content: center;
}

.about-contact-info-box {
    background-color: #D9D9D9;
    padding: 25px 30px;
    border-radius: 8px;
    width: 100%;
}

.about-contact-info-item {
    font-size: 1rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.about-contact-info-item:last-child {
    margin-bottom: 0;
}

.about-contact-info-item strong {
    font-weight: 600;
    color: #000000;
}

.about-contact-image-column {
    text-align: center;
}

.about-contact-image-column img {
    max-width: 100%;
    height: auto;
}

.about-contact-button-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-contact-button {
    background-color: #43ABDB;
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 15px 50px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.about-contact-button:hover {
    background-color: #3595C5;
}

/* Contact Form Popup */
.contact-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.contact-popup.active {
    display: block;
}

.contact-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.contact-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.contact-popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #000000;
    cursor: pointer;
    line-height: 1;
}

.contact-popup-close:hover {
    color: #43ABDB;
}

.contact-popup-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 25px 0;
    text-align: center;
}

.about-contact-form {
    width: 100%;
}

.about-form-group {
    margin-bottom: 20px;
}

.about-form-group label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
}

.required {
    color: #FF0000;
}

.about-form-group input,
.about-form-group textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    color: #68696D;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font-family: inherit;
    box-sizing: border-box;
}

.about-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.about-form-button {
    background-color: #43ABDB;
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.about-form-button:hover {
    background-color: #3595C5;
}

@media (max-width: 900px) {
    .about-contact-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .about-contact-column {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .about-contact-section {
        padding: 20px 0;
    }
    
    .about-contact-container {
        padding: 0;
    }
    
    .about-contact-info-box {
        border-radius: 0;
    }
    
    .contact-popup-content {
        padding: 30px 20px;
    }
    
    .contact-popup-title {
        font-size: 1.5rem;
    }
}

/* Blog & News Page */
.blog-grid-section {
    width: 100%;
    background-color: #FFFFFF;
    padding: 60px 20px;
    position: relative;
    z-index: 1;
}

.blog-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.blog-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.blog-card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #43ABDB;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
}

.blog-card-content {
    padding: 25px;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #999999;
}

.blog-date,
.blog-read-time {
    display: flex;
    align-items: center;
}

.blog-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.blog-card-excerpt {
    font-size: 0.95rem;
    color: #68696D;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.blog-read-more {
    font-size: 0.95rem;
    font-weight: 600;
    color: #43ABDB;
    display: inline-block;
}

.blog-card:hover .blog-read-more {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .blog-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .blog-grid-section {
        padding: 40px 20px;
    }
    
    .blog-grid-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .blog-card-image {
        height: 200px;
    }
    
    .blog-card-title {
        font-size: 1.2rem;
    }
}

/* Blog Post Individual Page */
.blog-post-hero {
    padding: 140px 20px 40px;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    text-align: center;
}

.blog-post-hero-container {
    max-width: 800px;
    margin: 0 auto;
}

.blog-back-link {
    display: inline-block;
    font-size: 0.95rem;
    color: #43ABDB;
    font-weight: 600;
    margin-bottom: 15px;
    transition: opacity 0.3s ease;
}

.blog-back-link:hover {
    opacity: 0.7;
}

.blog-post-category {
    display: inline-block;
    padding: 8px 16px;
    background-color: #43ABDB;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.blog-post-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.blog-post-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 0.95rem;
    color: #999999;
}

.blog-post-date::before,
.blog-post-read-time::before {
    content: '•';
    margin-right: 8px;
    color: #43ABDB;
}

.blog-post-date:first-child::before {
    display: none;
}

/* Blog Post Featured Image */
.blog-post-image-section {
    padding: 0;
    background-color: #f8f9fa;
}

.blog-post-image-container {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-post-image-container img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: cover;
}

/* Blog Post Content */
.blog-post-content {
    padding: 60px 20px;
    background-color: #ffffff;
}

.blog-post-container {
    max-width: 800px;
    margin: 0 auto;
}

.blog-post-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    margin: 40px 0 20px 0;
    line-height: 1.3;
}

.blog-post-content h2:first-child {
    margin-top: 0;
}

.blog-post-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #000000;
    margin: 30px 0 15px 0;
    line-height: 1.4;
}

.blog-post-content p {
    font-size: 1.1rem;
    color: #333333;
    line-height: 1.8;
    margin: 0 0 20px 0;
}

.blog-post-content ul,
.blog-post-content ol {
    font-size: 1.1rem;
    color: #333333;
    line-height: 1.8;
    margin: 0 0 20px 0;
    padding-left: 30px;
}

.blog-post-content li {
    margin-bottom: 10px;
}

.blog-post-content a {
    color: #43ABDB;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.blog-post-content a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.blog-post-content blockquote {
    border-left: 4px solid #43ABDB;
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: #68696D;
}

.blog-post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 30px 0;
    border-radius: 8px;
}

/* Blog Post Footer */
.blog-post-footer {
    padding: 40px 20px 60px;
    background-color: #f8f9fa;
    text-align: center;
}

.blog-post-footer-container {
    max-width: 800px;
    margin: 0 auto;
}

.blog-back-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: #43ABDB;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.blog-back-button:hover {
    background-color: #3598c7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 171, 219, 0.3);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .blog-post-hero {
        padding: 120px 20px 30px;
    }
    
    .blog-post-title {
        font-size: 1.8rem;
    }
    
    .blog-post-content {
        padding: 40px 20px;
    }
    
    .blog-post-content h2 {
        font-size: 1.5rem;
        margin: 30px 0 15px 0;
    }
    
    .blog-post-content h3 {
        font-size: 1.2rem;
    }
    
    .blog-post-content p {
        font-size: 1rem;
    }
    
    .blog-post-image-container img {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .blog-post-title {
        font-size: 1.5rem;
    }
    
    .blog-post-meta {
        flex-direction: column;
        gap: 10px;
    }
}