/* Main Section Layout (Flexbox) */
.service-section {
    display: flex;
    max-width: 1200px;
    margin: 10px auto;
    padding: 20px;
    gap: 40px; /* Space between image and service boxes */
    align-items: center; /* Vertically align items */
}

/* Left Side Styling (Image) */
.left-image {
    flex: 1; /* Takes up half the space */
    max-width: 50%;
}

.left-image img {
    width: 100%;
    height: 520px;
    display: block;
    /* You can add a subtle border or glow effect here if desired */
    border-radius: 8px;
}

/* Right Side Styling (Services Container) */
.right-services {
    flex: 1; /* Takes up the other half of the space */
    display: flex;
    flex-direction: column; /* Stack the boxes vertically */
    gap: 15px; /* Space between the service boxes */
}

/* Individual Service Box Styling */
.service-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #161b22; /* Slightly lighter dark background for the box */
    border: 1px solid #30363d; /* Subtle border */
    border-left: 5px solid #db13f3; /* A bright, contrasting color on the left edge */
    border-radius: 8px;
    transition: background-color 0.3s, border-color 0.3s;
}

.service-box:hover {
    background-color: #1f252d; /* Slightly darker on hover */
    border-color: #fff;
    cursor: pointer;
}

.service-box h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    color: #ef6aff; /* Highlight color for the title */
}

.service-box p {
    margin: 0;
    font-size: 0.9em;
    color: #c9d1d9; /* Lighter text for description */
}

.icon {
    font-size: 2em;
    color: #00aaff; /* Icon color */
    padding-left: 20px;
}

/* Placeholder for Icon - Use a real icon library (like Font Awesome) for production */
.icon-placeholder {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    /* This makes the placeholder text look like an icon */
}

/* Media Query for smaller screens (making it stack vertically) */
@media (max-width: 768px) {
    .service-section {
        flex-direction: column;
        gap: 30px;
    }

    .left-image, .right-services {
        max-width: 100%;
    }
}