/* =========================
SERVICES PAGE CSS
Jupiter Oilfield Services
========================= */


/* =========================
SERVICES BANNER
========================= */

.services-banner{

    position:relative;

    height:50vh;

    background:
    linear-gradient(rgba(0,0,0,0.75),
    rgba(0,0,0,0.75)),
    url('../images/img07.jpg')
    center center/cover no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    overflow:hidden;
}


.services-banner h1{

    font-size:4rem;

    font-weight:800;

    text-transform:uppercase;

    margin-bottom:15px;

    letter-spacing:1px;
}


.services-banner p{

    font-size:1.2rem;

    color:#f1f1f1;
}


/* =========================
SERVICES INTRO
========================= */

.services-intro{

    background:#fff;
}


.services-intro img{

    border-radius:20px;

    transition:0.5s ease;
}


.services-intro img:hover{

    transform:scale(1.02);
}


.services-intro h2{

    font-size:2.7rem;

    font-weight:800;

    color:#111;

    margin-bottom:25px;
}


.services-intro p{

    font-size:1.05rem;

    line-height:1.9;

    color:#555;
}


/* =========================
SERVICES GRID SECTION
========================= */

.services-grid-section{

    background:#f7f9fc;
}


.services-grid-section h2{

    font-size:2.8rem;

    font-weight:800;

    color:#111;
}


.services-grid-section p{

    color:#666;
}


/* =========================
SERVICE CARD
========================= */

.service-card{

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    height:100%;

    position:relative;

    overflow:hidden;

    transition:0.4s ease;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.06);
}


/* HOVER EFFECT */
.service-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.12);
}


/* GOLD SHAPE */
.service-card::before{

    content:'';

    position:absolute;

    width:140px;
    height:140px;

    background:
    rgba(255,193,7,0.10);

    border-radius:50%;

    top:-60px;
    right:-60px;
}


/* ICON */
.service-icon{

    width:80px;
    height:80px;

    background:#ffc107;

    color:#111;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:20px;

    font-size:32px;

    margin-bottom:25px;

    transition:0.4s ease;
}


.service-card:hover .service-icon{

    transform:rotate(-8deg) scale(1.05);

}


/* TEXT */
.service-card h4{

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:15px;

    color:#111;
}


.service-card p{

    color:#666;

    line-height:1.8;
}


/* =========================
WHY CHOOSE US
========================= */

.why-box{

    display:flex;

    gap:20px;

    margin-bottom:35px;

    padding:25px;

    background:#fff;

    border-radius:18px;

    transition:0.4s ease;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.06);
}


.why-box:hover{

    transform:translateX(8px);

}


.why-box i{

    width:70px;
    height:70px;

    background:#ffc107;

    color:#111;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    font-size:28px;

    flex-shrink:0;
}


.why-box h4{

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:10px;
}


.why-box p{

    color:#666;

    margin:0;

    line-height:1.8;
}


/* =========================
SERVICE GALLERY
========================= */

.service-gallery{

    background:#0b1f35;
}


.service-gallery h2{

    font-size:2.7rem;

    font-weight:800;
}


.gallery-img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:18px;

    transition:0.5s ease;

    cursor:pointer;
}


.gallery-img:hover{

    transform:scale(1.04);

    box-shadow:
    0 15px 30px rgba(0,0,0,0.30);
}


/* =========================
CTA SECTION
========================= */

.cta-section{

    background:
    linear-gradient(rgba(0,0,0,0.75),
    rgba(0,0,0,0.75)),
   
    padding:110px 20px;

    text-align:center;

    color:#fff;
}


.cta-section h2{

    font-size:3rem;

    font-weight:800;

    margin-bottom:20px;
}


.cta-section p{

    font-size:1.1rem;

    margin-bottom:30px;

    color:#ddd;
}


.cta-section .btn{

    padding:15px 40px;

    border-radius:10px;

    font-weight:700;

    transition:0.4s ease;
}


.cta-section .btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 10px 25px rgba(255,193,7,0.30);
}


/* =========================
RESPONSIVE
========================= */

@media(max-width:991px){

    .services-banner h1{

        font-size:3rem;
    }

    .services-intro h2,
    .services-grid-section h2,
    .service-gallery h2,
    .cta-section h2{

        font-size:2.3rem;
    }

}


@media(max-width:768px){

    .services-banner{

        height:40vh;
    }

    .services-banner h1{

        font-size:2.3rem;
    }

    .services-banner p{

        font-size:1rem;
    }

    .service-card{

        padding:30px 25px;
    }

    .gallery-img{

        height:240px;
    }

    .cta-section{

        padding:80px 20px;
    }

}


@media(max-width:576px){

    .services-banner h1{

        font-size:1.9rem;
    }

    .services-intro h2,
    .services-grid-section h2,
    .service-gallery h2,
    .cta-section h2{

        font-size:1.9rem;
    }

    .why-box{

        flex-direction:column;

        align-items:flex-start;
    }

}