.elementor-1198 .elementor-element.elementor-element-30aae29{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.5;--padding-top:150px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-1198 .elementor-element.elementor-element-30aae29:not(.elementor-motion-effects-element-type-background), .elementor-1198 .elementor-element.elementor-element-30aae29 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hexissupport.com/wp-content/uploads/2025/05/Traffic-Marshal-banner-1.jpg");background-position:center center;background-size:cover;}.elementor-1198 .elementor-element.elementor-element-30aae29::before, .elementor-1198 .elementor-element.elementor-element-30aae29 > .elementor-background-video-container::before, .elementor-1198 .elementor-element.elementor-element-30aae29 > .e-con-inner > .elementor-background-video-container::before, .elementor-1198 .elementor-element.elementor-element-30aae29 > .elementor-background-slideshow::before, .elementor-1198 .elementor-element.elementor-element-30aae29 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1198 .elementor-element.elementor-element-30aae29 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-1198 .elementor-element.elementor-element-a65d43e .wpr-post-breadcrumbs{text-align:center;justify-content:center !important;color:#FFFFFF;font-size:18px;}.elementor-1198 .elementor-element.elementor-element-a65d43e .wpr-breadcrumbs{text-align:center;justify-content:center !important;}.elementor-1198 .elementor-element.elementor-element-a65d43e .wpr-post-breadcrumbs a{color:#FFFFFF;}.elementor-1198 .elementor-element.elementor-element-a65d43e .wpr-post-breadcrumbs a:hover{color:#FFB838;}.elementor-1198 .elementor-element.elementor-element-290a916{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-1198 .elementor-element.elementor-element-30aae29{--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-c2559a9 *//* Main Container Styles */
.traffic-marshal-services-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    background: transparent !important;
}

/* Section Heading Styles */
.traffic-marshal-services-heading {
    color: #3f6088;
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    padding-bottom: 15px;
}

.traffic-marshal-services-heading:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: #fcca2a;
}

/* Service Section Styles */
.traffic-marshal-service-section {
    margin-bottom: 60px;
}

/* Card Styles */
.traffic-marshal-service-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.traffic-marshal-service-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3f6088, #fcca2a);
}

.traffic-marshal-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Icon Styles */
.traffic-marshal-service-icon {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.traffic-marshal-service-card:hover .service-image {
    transform: scale(1.05);
}

/* Content Styles */
.traffic-marshal-service-title {
    color: #3f6088;
    font-size: 22px;
    margin-bottom: 15px;
}

.traffic-marshal-service-content {
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.traffic-marshal-service-description {
    color: #666;
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
}

/* Read More Button */
.traffic-marshal-read-more {
    display: block;
    background: linear-gradient(90deg, #3f6088, #5a7ca8);
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: auto;
}

.traffic-marshal-read-more:hover {
    background: linear-gradient(90deg, #fcca2a, #fcd65e);
    color: #3f6088;
    transform: translateY(-2px);
}

/* Grid Layout - Same for all screens */
.traffic-marshal-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* Remove slider navigation completely */
.traffic-marshal-slider-nav {
    display: none !important;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .traffic-marshal-services-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .traffic-marshal-services-slider {
        padding: 0 !important;
    }
    
    .traffic-marshal-slider-container {
        margin: 0 !important;
    }
    
    .traffic-marshal-service-card {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .traffic-marshal-services-heading {
        font-size: 28px;
    }
    
    .traffic-marshal-service-title {
        font-size: 20px;
    }
    
    .traffic-marshal-service-description {
        font-size: 14px;
    }
    
    .traffic-marshal-read-more {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .traffic-marshal-service-icon {
        height: 150px;
    }
    
    .traffic-marshal-services-grid {
        grid-template-columns: 1fr;
    }
}/* End custom CSS */