.services-section {
    padding: 50px 25px;
    background: #000;
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -200px;
    left: -200px;
    border-radius: 50%;
    background:rgba(200, 200, 200, 0.411);
    filter: blur(120px);
    z-index: 0;
}

.services-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    top: 40%;
    right: -120px;
    border-radius: 50%;
    background: #ffe60157;
    filter: blur(100px);
    z-index: 0;
}

.services-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    position: relative; 
    z-index:1; 
}

.services-header { 
    text-align: center; 
    margin-bottom: 70px; 
}

.services-header h2 { 
    font-size: 40px; 
    color: #fff; 
    margin-bottom:10px; 
}

.services-subtitle { 
    color: #fff; 
    font-size: 15px; 
}


/* GRID */

.services-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

.services-column { 
    display: flex; 
    flex-direction: column; 
    gap:30px; 
}

.center-column { 
    justify-content: center; 
}


/* CARD */

.service-card { 
    background: #000; 
    border:1px solid #ffe401; 
    border-radius:15px; 
    overflow:hidden; 
    display:flex; 
    flex-direction:column; 
    cursor:pointer; 
    transition:all 0.4s ease;
}

.service-image img { 
    width:100%; 
    height:100%; 
    object-fit:cover; 
    display:block; 
    border-bottom:1px solid #ffe401; 
    transition:transform 0.3s ease, 
    border-color 0.3s ease;
}

.service-content { 
    padding:20px; 
    display:flex; 
    flex-direction:column; 
    gap:10px;
}

.service-title { display:flex; align-items:center; gap:10px;}
.service-title i { color:#ffe401; font-size:16px; }
.service-title h3 { color:#fff; margin:0; font-size:20px;}
.service-pills { display:flex; gap:8px; flex-wrap:wrap; }
.service-pill { padding:4px 12px; font-size:11px; border-radius:50px; background:#2a2a2a; color:#ccc;}
.service-cta { margin-top:5px; font-size:13px; color:#ffe401; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:all 0.3s ease;}
.service-cta i { font-size:11px; transition:transform 0.3s ease; }

/* Card Sizes */
.service-card.small .service-image { height:100px; }
.service-card.medium .service-image { height:229px; }
.service-card.large .service-image { height:615px; }

/* Hover */
.service-card:hover { background:#fff; transform:translateY(-10px); border-color:#000; }
.service-card:hover h3 { color:#000; }
.service-card:hover .service-title i { color:#000; }
.service-card:hover .service-image img { transform:scale(1.05); border-bottom:1px solid #000; }
.service-card:hover .service-cta { color:#000; }
.service-card:hover .service-cta i { transform:translateX(5px);}
.service-card:hover .service-pill { background-color:#ffe401; color:#000;}

/* MODAL */
.service-modal { 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,0.9); 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    padding:40px 20px; 
    opacity:0; 
    visibility:hidden; 
    pointer-events:none; 
    transition:0.3s ease; 
    z-index:9999; 
}

#modalDescription {
    color: #000000;
    margin-top: 0;
}

.service-modal.active { 
    opacity:1; 
    visibility:visible; 
    pointer-events:auto; 
}

.service-modal-content {
    background:#fff;
    border:1px solid #000;
    border-radius:15px;
    max-width:600px;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.service-modal-content h3 {
    color:#000;
}

.service-modal-content .service-title i {
    color:#000;
}

.service-modal-content .service-pill {
    background:#ffe401;
    color:#000;
    font-weight:600;
}

.service-modal-content .service-image img { 
    height:250px; width:100%; 
    object-fit:cover; 
    border-bottom:1px solid #2a2a2a; }

.modal-divider { 
    border:none; 
    height:1px; 
    background:#000000; 
    margin:10px 0; 
}

.modal-price { 
    color:#000000; 
    font-weight:bold; 
    font-size:16px; 
    margin:5px 0;
}


.modal-inquire {
    text-decoration: none;
    background: #2a2a2a;
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-block;
    margin-top: 10px;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

    border: 1px solid #000;

    transition: 
        background 0.3s ease,
        color 0.3s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.modal-inquire:hover {
    background: #ffe401;
    color: #000;

    transform: translateY(-3px);

    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.modal-explore {
    text-decoration: none;
    background: #2a2a2a; /* same as inquire */
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-block;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

    border: 1px solid #000;

    transition: 
        background 0.3s ease,
        color 0.3s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.modal-explore:hover {
    background: #ffe401; /* same hover as inquire */
    color: #000;

    transform: translateY(-3px);

    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Responsive */
@media(max-width:992px) { 
    .services-grid{ grid-template-columns:1fr;} 
    .center-column{justify-content:flex-start;} 
    .service-card.large .service-image{height:300px;} 
    .service-modal-content .service-image img{height:200px;} 
}