.expertise-section {
    background: linear-gradient(115deg, #ffffff 65%, #1b1b1b 65%);
    position: relative;
    overflow: hidden;
}

.expertise-section .section-title {
    margin-bottom: 50px;
}

.expertise-section .section-title h2 {
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
}

.expertise-item {
    position: relative;
    overflow: hidden;
    height: 400px;
    background-color: #ccc;
    border-radius: 0px;
}

.expertise-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.expertise-item:hover .expertise-bg {
    transform: scale(1.1);
}

.expertise-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 10;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

.expertise-content h4 {
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0;
    text-transform: capitalize;
    font-family: 'Outfit', sans-serif;
}

.expertise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 108, 181, 0.2), rgba(0, 108, 181, 0.85));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 5;
}

.expertise-item:hover .expertise-overlay {
    opacity: 1;
}

/* Custom Navigation Buttons */
.expertise-section .owl-nav .owl-prev,
.expertise-section .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    line-height: 38px !important;
    background: transparent !important;
    border: 1px solid #000;
    border-radius: 50%;
    color: #000;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s;
    margin: 0;
    padding: 0;
}

.expertise-section .owl-nav .owl-prev {
    left: -50px;
    border-color: #333;
    color: #333;
}

.expertise-section .owl-nav .owl-next {
    right: -50px;
    border-color: #fff;
    color: #fff;
}

.expertise-section .owl-nav .owl-prev:hover {
    background: #000 !important;
    color: #fff;
}

.expertise-section .owl-nav .owl-next:hover {
    background: #fff !important;
    color: #000;
}

@media (max-width: 1199px) {
    .expertise-section {
        background: linear-gradient(180deg, #ffffff 50%, #1b1b1b 50%);
        /* Top/Bottom split on tablet/mobile maybe? Or keep diagonal but adjust */
        background: #fff;
    }

    .expertise-section .owl-nav .owl-prev,
    .expertise-section .owl-nav .owl-next {
        display: none;
        /* Hide arrows on smaller screens usually */
    }
}

/* Animation & Hover Effects for About Section */
.feature-box-3 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    border-radius: 8px;
    background: #fff;
}

.feature-box-3:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.feature-box-3 .icon {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-box-3:hover .icon {
    transform: scale(1.1);
}

.feature-box-3 i {
    transition: color 0.3s ease;
}

.feature-box-3:hover i {
    color: #db2d2e;
}

.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
}

/* Career Section */
.career-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax effect */
    padding: 100px 0;
    color: #fff;
    text-align: center;
}

.career-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 17, 26, 0.7);
    /* Dark blue/black overlay */
    z-index: 1;
}

.career-content {
    position: relative;
    z-index: 2;
}

.career-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif;
    color: white !important;
}

.career-subtitle {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 40px;
    display: block;
}

.btn-skew-black {
    background-color: #000;
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    border: none;
    display: inline-block;
    transform: skewX(-20deg);
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-skew-black span {
    display: inline-block;
    transform: skewX(20deg);
    /* Counter-skew text */
}

.btn-skew-black:hover {
    background-color: #006CB5;
    /* Brand red on hover */
    color: #fff;
}

/* Force Motors Intro Section */
.force-motors-intro {
    background-image: url('https://www.forcemotors.com/wp-content/uploads/2025/02/abt-bg.png.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* .abt-vehicle-list {
    margin: 0;
    padding: 0 0 280px 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;

} */

.abt-vehicle-list li {
    margin: 0 -25px;
    /* Create overlap */
    position: relative;
}

.abt-vehicle-list img {
    max-height: 250px;
    /* Larger base size */
    width: auto;
    position: relative;
    transition: all 0.5s ease;
}

/* Center Vehicle - Urbania */
.abt-vehicle-list li:nth-child(5) img {
    max-height: 350px;
    z-index: 10;
    margin-bottom: -15px;
}

/* Inner Neighbors */
.abt-vehicle-list li:nth-child(4) img,
.abt-vehicle-list li:nth-child(6) img {
    max-height: 280px;
    z-index: 9;
}

/* Middle Neighbors */
.abt-vehicle-list li:nth-child(3) img,
.abt-vehicle-list li:nth-child(7) img {
    max-height: 240px;
    z-index: 8;
}

/* Outer Neighbors */
.abt-vehicle-list li:nth-child(2) img,
.abt-vehicle-list li:nth-child(8) img {
    max-height: 210px;
    z-index: 7;
}

/* Far Outer Neighbors */
.abt-vehicle-list li:nth-child(1) img,
.abt-vehicle-list li:nth-child(9) img {
    max-height: 190px;
    z-index: 6;
}

[data-aos][data-aos][data-aos-delay="2000"].aos-animate,
body[data-aos-delay="2000"] [data-aos].aos-animate {
    transition-delay: 2s;
}

[data-aos^=zoom][data-aos^=zoom].aos-animate {
    opacity: 1;
    transform: translateZ(0) scale(1);
}

[data-aos][data-aos][data-aos-delay="2000"],
body[data-aos-delay="2000"] [data-aos] {
    transition-delay: 0;
}

[data-aos][data-aos][data-aos-duration="1000"],
body[data-aos-duration="1000"] [data-aos] {
    transition-duration: 1s;
}

.abt-vehicle-list li:nth-child(1) img {
    left: -1095px;
    top: 58px;
}

[data-aos][data-aos][data-aos-easing=ease],
body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease;
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s;
}

[data-aos^=zoom][data-aos^=zoom] {
    opacity: 0;
    transition-property: opacity, transform;
}


.abt-vehicle-list img {
    transition: all 0.5s ease;
    /* position: absolute; */
    /* margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto; */
}

/* .abt-vehicle-list img:hover {
    transform: scale(1.1);
    z-index: 20;
} */


/* Spotlight Section */
.spotlight-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(108deg, #1d1e23 48%, #ffffff 48.2%);
    overflow: hidden;
}

.spotlight-title {
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 40px;
    font-family: 'Outfit', sans-serif;
    padding-left: 20px;
}

.spotlight-card {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.spotlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.spotlight-card:hover::before {
    background: rgba(0, 0, 0, 0.4);
}

.spotlight-card-lg {
    height: 500px;
}

.spotlight-card-sm {
    height: 235px;
    margin-bottom: 30px;
}

.spotlight-card-sm:last-child {
    margin-bottom: 0;
}

.spotlight-tag {
    position: absolute;
    top: 30px;
    left: 30px;
    background: #fff;
    color: #006CB5;
    padding: 5px 15px;
    font-weight: 600;
    font-size: 15px;
    z-index: 10;
    text-transform: capitalize;
    font-family: 'Outfit', sans-serif;
    border-radius: 2px;
}

.spotlight-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 10;
    padding-right: 20px;
}

/* Large card styling specifically */
.spotlight-card-lg .spotlight-content h2 {
    color: #1A1B20;
    /* Dark text for big card heading "Press Release" looks dark in image? No, wait. */
}

/* Re-evaluating text color from image. 
   "Press Release" text looks black but overlaid on newspaper? No, it says "See What's Making Headlines" in white. 
   "Press Release" is the big faded text? No, "Press Release" is large on the paper. 
   The overlay text "See What's Making Headlines" is white.
   The link "Read More" is white with arrow.
*/
.spotlight-content h3 {
    color: #fff;
    /* White title for small cards */
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.spotlight-card-lg .spotlight-content-lg h3 {
    font-size: 28px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.spotlight-link {
    color: #fff;
    font-weight: 500;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
    transition: all 0.3s ease;
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.spotlight-link i {
    margin-left: 8px;
    transition: margin-left 0.3s ease;
}

.spotlight-card:hover .spotlight-link i {
    margin-left: 12px;
}

@media (max-width: 991px) {
    .spotlight-section {
        background: #1A1B20;
    }

    .spotlight-card-lg {
        height: 400px;
        margin-bottom: 30px;
    }
}

/* Align Vehicle Cards */
.owl-item {
    height: 100%;
}

.owl-item .item {
    height: 100%;
}

.car-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    /* Optional: adds subtle rounding */
}

.car-image {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.car-image img {
    height: 250px;
    /* Fixed height for consistency */
    width: 100%;
    object-fit: contain;
    /* Contain ensures the entire vehicle is visible without cropping, use cover if you prefer filling the box */
    object-position: center;
    background: #f4f4f4;
    /* Light gray background for transparent images */
}

.car-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.car-content .price {
    margin-top: auto;
    /* Push button to bottom */
}

/* Ensure the grid wrap works if not in carousel (though here it IS in carousel) */
.owl-stage {
    display: flex;
}

/* Fix vehicle name being hidden on hover by absolute positioned car-list */
.car-item .car-list {
    position: relative;
    bottom: auto;
    left: auto;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
}

.car-item:hover .car-list {
    height: 40px;
    /* Expands to show content */
    border-bottom: 1px solid #f6f6f6;
}