: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;
}

/*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;
}

/*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;
}

/* 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;
}

/* 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;
}

/*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;
}

/*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;
}


.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);
}