.hero::after {
    background-image: url('../images/services/gps/hero.jpg');
    /* Background image for hero section */
}

.hero {
    gap: 0;
    /* Remove gap in hero section */
}

nav {
    background: rgba(104, 113, 94, 0.3);
    /* Semi-transparent background for navigation */
}

/* ///////rims */
.heading {
    display: flex;
    /* Flexbox for heading layout */
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Center items horizontally */
    flex-direction: column;
    /* Stack items vertically */
    margin: 30px 0;
    /* Margin around heading */
}

.heading h1 {
    font-size: 30px;
    /* Font size for heading */
    font-weight: 400;
    /* Font weight */
    font-style: normal;
    /* Normal font style */
}

.hr-heading {
    color: #688E4E;
    /* Color for horizontal line */
    width: 13%;
    /* Width of the line */
    height: 5px;
    /* Height of the line */
    background-color: #688E4E;
    /* Background color */
    border: none;
    /* No border */
    margin: 7px 0;
    /* Margin around the line */
}

.rims-tire-section {
    margin: 30px;
    /* Margin around tire section */
}

.rims-heading {
    display: flex;
    /* Flexbox for rims heading layout */
    align-items: center;
    /* Center items vertically */
    justify-content: center;
    /* Center items horizontally */
    flex-direction: column;
    /* Stack items vertically */
}

.rims-heading p {
    padding: 0 20px;
    /* Padding around paragraph */
    text-align: center;
    /* Center align text */
}

.rims-heading img {
    width: 61%;
    margin: 1.25rem 0;
    height: 54vh;
}

/* ///////////////////services-card */
.container-service {
    width: 94%;
    /* Width of the service container */
}

.card {
    display: flex;
    /* Flexbox for card layout */
    background-color: rgb(206, 214, 216);
    /* Background color of card */
    margin: 20px 30px;
    /* Margin around card */
    overflow: hidden;
    /* Prevent overflow */
    padding: 20px;
    /* Padding inside card */
}

.card img {
    width: 53%;
    /* Width for card image */
    /* height: 67%; Uncomment if height is needed */
    /* object-fit: cover; Uncomment if you want to maintain aspect ratio */
    margin: auto 0;
    /* Center image vertically */
}

.card-content {
    padding: 20px;
    /* Padding inside card content */
    width: 60%;
    /* Width for card content */
}

.card-content h3 {
    margin-top: 0;
    /* Remove top margin */
    color: #688E4E;
    /* Color for card heading */
    /* Font size for card heading */
    /* 26px */
    font-size: 30px;
}

.card-content p {
    color: #666;
    /* Color for card paragraph */
    margin: 15px 0;
    /* Margin around paragraph */
    font-size: 18px;
}

.card-content .icon {
    width: 30px;
    /* Width for icon */
    height: 30px;
    /* Height for icon */
    background-color: #007474;
    /* Background color for icon */
    border-radius: 50%;
    /* Round icon */
    display: flex;
    /* Flexbox for icon layout */
    align-items: center;
    /* Center icon vertically */
    justify-content: center;
    /* Center icon horizontally */
    color: white;
    /* Color for icon */
    margin-top: 20px;
    /* Margin on top of icon */
}

/* Responsive Styles */
.rims-heading img {
    width: 65%;
    /* Default width for rims heading image */
    margin: 20px 0;
    /* Margin around image */
    height: 70vh;
    /* Height for image */
}

@media (max-width: 1280px) {
    .rims-heading img {
        width: 79%;
        /* Adjust width for smaller screens */
        margin: 20px 0;
        /* Margin around image */
        height: 70vh;
        /* Maintain height for image */
    }
}

@media (max-width: 980px) {
    .card img {
        margin: 50px 0;
        /* Adjust margin for card image */
    }
}

@media (max-width: 768px) {
    .card {
        flex-direction: column;

    }

    .rims-heading p {
        padding: 0px;
        text-align: center;
    }

    .card img {
        width: 95%;
        height: 250px;
        order: 1;
        margin: auto;
    }

    .card-content {
        width: 100%;
        order: 2;
    }

    .container-service {
        width: 100%;
    }

    .rims-heading img {
        width: 100%;

    }
}

@media (max-width: 596px) {
    .hero h1 {
        color: #fff;
        font-size: 3rem;
    }
}

@media (max-width: 511px) {
    .rims-heading img {
        width: 79%;
        margin: 20px 0px;
        height: 46vh;
    }
}

@media (max-width: 480px) {
    .card-content h3 {
        font-size: 25px;
    }

    .card-content p {
        font-size: 0.9em;
        padding: 0px;
        margin: 10px;
        margin-left: 0;
    }

    .card img {

        height: 200px;

    }

    .card-content {
        padding: 20px;

        padding-left: 0;
        padding-right: 0;
    }

    .hero h1 {
        color: #fff;
        font-size: 3rem;
        margin: 0px 20px;
    }
}

@media (max-width: 376px) {
    .hero h1 {
        color: #fff;
        font-size: 37px;
        margin: 0px 20px;
    }
}

li::marker {
    color: #1B2727;
}


.card-content ul {
    margin-left: 17px;
    list-style: square;
}


.card-content ul li {
    color: #666;
    margin: 10px 0px;
    /* 10px */
    font-size: 18px;
}

/* Media Queries for Responsive Design */

/* For devices with max width of 768px */
@media (max-width: 768px) {
    .card {
        flex-direction: column;
        /* Stack card elements vertically */
    }

    .rims-heading p {
        padding: 0;
        /* Remove padding */
        text-align: center;
        /* Center align text */
    }

    .card img {
        width: 95%;
        /* Adjust image width */
        height: 250px;
        /* Set fixed height */
        order: 1;
        /* Ensure image appears first */
        margin: auto;
        /* Center image */
    }

    .card-content {
        width: 100%;
        /* Full width for content */
        order: 2;
        /* Content appears after image */
    }

    .container-service {
        width: 100%;
        /* Full width for service container */
    }

    .rims-heading img {
        width: 100%;
        /* Full width for rims heading image */
    }
}

/* For devices with max width of 596px */
@media (max-width: 596px) {
    .hero h1 {
        color: #fff;
        /* Set heading color */
        font-size: 3rem;
        /* Adjust font size */
    }
}

/* For devices with max width of 511px */
@media (max-width: 511px) {
    .rims-heading img {
        width: 79%;
        /* Adjust width for smaller screens */
        margin: 20px 0;
        /* Margin around image */
        height: 46vh;
        /* Adjust height */
    }
}

/* For devices with max width of 480px */
@media (max-width: 480px) {
    .card-content h3 {
        font-size: 25px;
        /* Adjust heading size */
    }

    .card-content p {
        font-size: 0.9em;
        /* Adjust paragraph font size */
        padding: 0;
        /* Remove padding */
        margin: 10px;
        /* Margin around paragraph */
        margin-left: 0;
        /* Remove left margin */
    }

    .card img {
        height: 200px;
        /* Fixed height for card image */
    }

    .card-content {
        padding: 20px;
        /* Padding for content */
        padding-left: 0;
        /* Remove left padding */
        padding-right: 0;
        /* Remove right padding */
    }

    .hero h1 {
        color: #fff;
        /* Set heading color */
        font-size: 3rem;
        /* Adjust font size */
        margin: 0 20px;
        /* Margin around heading */
    }
}

/* For devices with max width of 376px */
@media (max-width: 376px) {
    .hero h1 {
        color: #fff;
        /* Set heading color */
        font-size: 37px;
        /* Adjust font size */
        margin: 0 20px;
        /* Margin around heading */
    }
}

/* List Marker Color */
li::marker {
    color: #1B2727;
    /* Color for list markers */
}

/* Card Content List Styles */
.card-content ul {
    margin-left: 17px;
    /* Left margin for list */
    list-style: square;
    /* Square list style */
}

.card-content ul li {
    color: #666;
    /* Color for list items */
    margin: 10px 0;
    /* Margin around list items */
    /* 10px */
    font-size: 18px;
}