:root {
    --primary-color: #264A75;
    --secondary-color: #1ca6d8;
    --soft-white: #f9f9f9;
    --light-gray: #e0e0e0;
    --deep-primary: #1b2b40;
    --border-radius-img: 8px;
}

.parallax-content {
    width: 100%;
    min-height: 100vh;
    background-size: cover;
}

.service-content {
    min-height: 102vh !important;
    padding-top: 36vh;
    text-align: center;
}

/** Engineering Construcion Services **/

.civil {
    background-image: url(../img/service-civil-engineering.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.mechanical {
    background-image: url(../img/service-mechanical-engineering.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.electrical {
    background-image: url(../img/service-electrical-engineering.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.building {
    background-image: url(../img/service-building-electrician.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.rough {
    background-image: url(../img/service-rough-carpenter.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.finishing {
    background-image: url(../img/service-finishing-carpenter.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.mason {
    background-image: url(../img/service-mason.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.painter {
    background-image: url(../img/service-painter.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.plumber {
    background-image: url(../img/service-plumber.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.welder {
    background-image: url(../img/service-welder.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.fabricator {
    background-image: url(../img/service-fabricator-2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.foreman {
    background-image: url(../img/service-foreman.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.steelman {
    background-image: url(../img/service-steelman.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.pipe-filter {
    background-image: url(../img/service-pipe-fitter.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.tile-setter {
    background-image: url(../img/service-tile-setter.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.draftsman {
    background-image: url(../img/service-draftsman.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.scaffolder {
    background-image: url(../img/service-scaffolder.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.blast {
    background-image: url(../img/service-blast-&-aluminum-fabricator-and-installer.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

/*Hospitality Industry Services */

.food-server {
    background-image: url(../img/service-food-server.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.chef {
    background-image: url(../img/service-chef.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.receptionist {
    background-image: url(../img/service-receptionist.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.cleaner {
    background-image: url(../img/service-cleaner.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.housekeeping {
    background-image: url(../img/service-housekeeping.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

/*Healthcare Services */

.nurses {
    background-image: url(../img/service-nurse.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.medical-technologist {
    background-image: url(../img/service-medical-technologist.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.dentist {
    background-image: url(../img/service-dentist.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.caregiver {
    background-image: url(../img/service-caregiver.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.nurse-aide {
    background-image: url(../img/service-nurse-aide.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}


/* Consulting and Management Services */

.executive-secretary {
    background-image: url(../img/service-executive-secretary.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.accountant {
    background-image: url(../img/service-accountant.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.manager {
    background-image: url(../img/service-manager.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.bookkeeper {
    background-image: url(../img/service-bookkeeper.avif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.administrative-staff {
    background-image: url(../img/service-administrative-staff.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

/* Fire and Safety Services */

.firefighter {
    background-image: url(../img/service-firefighter.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.fire-truck-driver {
    background-image: url(../img/service-fire-truck-driver.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.paramedic {
    background-image: url(../img/service-paramedic.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

/*Energy, Industrial and Utility Services */

.industrial-electrical-supervisor {
    background-image: url(../img/service-industrial-electrical-supervisor.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.industrial-electrical-foreman {
    background-image: url(../img/service-industrial-electrical-foreman.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.industrial-electrical-leadman {
    background-image: url(../img/service-industrial-electrical-leadman.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.industrial-electrical-electrician {
    background-image: url(../img/service-industrial-electrical-electrician.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.industrial-electrical-fitter {
    background-image: url(../img/service-industrial-electrical-fitter.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.instrument-supervisor {
    background-image: url(../img/service-instrument-supervisor.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.instrument-technician {
    background-image: url(../img/service-instrument-technician.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.instrument-foreman {
    background-image: url(../img/service-instrument-foreman.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.instrument-fitter {
    background-image: url(../img/service-instrument-fitter.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.industrial-welder {
    background-image: url(../img/service-welder-industry.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.mechanical-fitter {
    background-image: url(../img/service-mechanical-fitter.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.cable-tray-fabricator {
    background-image: url(../img/service-cable-tray-fabricator.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.cable-tray-fitter {
    background-image: url(../img/service-cable-tray-fitter.avif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

/*Mines and Quarries Services */

.heavy-equipment-mechanic {
    background-image: url(../img/service-heavy-equipment-mechanic.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.heavy-equipment-electrician {
    background-image: url(../img/service-heavy-equipment-electrician.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.heavy-equipment-operator {
    background-image: url(../img/service-heavy-equipment-operator.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.heavy-equipment-driver {
    background-image: url(../img/service-heavy-equipment-driver.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.welder-mining {
    background-image: url(../img/service-welder-mining.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.mechanical-fitter-mining {
    background-image: url(../img/service-mechanical-fitter-mining.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.hydraulic-mechanic {
    background-image: url(../img/service-hydraulic-mechanic.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.hydraulic-technician {
    background-image: url(../img/service-hydraulic-technician.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.crashing-plant-mechanic {
    background-image: url(../img/service-crashing-plant-mechanic.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

/*Transportation Services */

.trailer-driver {
    background-image: url(../img/service-trailer-driver.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.heavy-equipment-operator-transport {
    background-image: url(../img/service-heavy-equipment-operator-transport.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.dispatcher {
    background-image: url(../img/service-dispatcher.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.coordinator {
    background-image: url(../img/service-coordinator.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.warehouse-man {
    background-image: url(../img/service-warehouse-man.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Add these for dark overlay effect */
    background-color: rgba(10, 20, 49, 0.5);
    /* Adjust opacity as needed */
    background-blend-mode: darken;
}

.intro-content h1 {
    color: #fff;
}

.services-details h1 {
    color: var(--primary-color);
}

.content-image img {
    border-radius: var(--border-radius-img);
}

.service-details {
    padding-top: 8rem;
    margin-bottom: 2rem;
    text-align: right;
    background-color: #fff;
}

.service-info {
    background-color: var(--primary-color);
    text-align: left;
    padding: 2rem;
}

.service-info h1 {
    color: #fff;
    font-weight: 700;
}

.service-info p {
    color: #fff;
    font-weight: 400;
    text-align: justify;
}

.service-info img {
    border-radius: var(--border-radius-img);
}