/* ================================================================
    PROJECT: SAD Advance / SA Reliable Manpower Supply
    DESCRIPTION: Main stylesheet for corporate website
    DEVELOPER: Md. Sahed Shamim
================================================================ 
*/



/* --- Basic Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Top Bar --- */
.top-bar {
    background: #222;
    color: #fff;
    padding: 10px 0;
    font-size: 14px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
}

.contact-info span {
    margin-right: 20px;
}

.lang-switch a {
    color: #fff;
    text-decoration: none;
}

.lang-switch a.active {
    color: #ff5e14;
}

/* --- Header & Navigation --- */
header {
    background: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    color: #222;
}

.logo span {
    color: #ff5e14;
}

.slogan {
    font-size: 12px;
    letter-spacing: 2px;
    color: #777;
}

/* --- Dropdown Menu Logic --- */
nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    position: relative;
    padding: 10px 15px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    transition: 0.3s;
}

nav ul li a:hover {
    color: #ff5e14;
}

/* Hidden Sub-Menu */
nav ul li ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 260px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-top: 3px solid #ff5e14;
    padding: 10px 0;
    flex-direction: column;
}

/* Show Sub-Menu on Hover */
nav ul li:hover > ul.sub-menu {
    display: flex;
}

nav ul li ul.sub-menu li {
    padding: 0;
    width: 100%;
}

nav ul li ul.sub-menu li a {
    padding: 12px 20px;
    display: block;
    font-size: 13px;
    text-transform: none;
    font-weight: 400;
    border-bottom: 1px solid #f9f9f9;
}

nav ul li ul.sub-menu li a:hover {
    background: #f8f8f8;
    padding-left: 25px;
}

/* --- Hero Section --- */
.hero {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('image/home/001.avif') center/cover;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero h2 {
    font-size: 42px;
    margin-bottom: 10px;
}

.hero .btn {
    display: inline-block;
    background: #ff5e14;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    margin-top: 20px;
    border-radius: 4px;
    font-weight: bold;
}

/* --- Service Sections --- */
.section-title {
    text-align: center;
    margin: 50px 0 30px;
    font-size: 32px;
}

.intro-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.service-card {
    background: #f9f9f9;
    padding: 30px;
    text-align: center;
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}

.service-card:hover {
    border-color: #ff5e14;
    transform: translateY(-5px);
}

.service-card i {
    font-size: 40px;
    color: #ff5e14;
    margin-bottom: 15px;
}

/* --- Compliance & Bank --- */
.compliance {
    background: #eee;
    padding: 40px 0;
    text-align: center;
}

.bank-logo {
    height: 40px;
    margin-top: 10px;
}

/* --- Footer --- */
footer {
    background: #222;
    color: #fff;
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-contact p, .footer-about p {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 5px;
}

.vision-logo {
    height: 60px;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 20px;
    font-size: 13px;
    color: #777;
}

.btn-profile {
    background: #ff5e14;
    color: #fff !important;
    padding: 8px 15px !important;
    border-radius: 4px;
}


/* --- Reset & Base 2 --- */


/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; color: #333; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- Top Bar --- */
.top-bar { background: #222; color: #fff; padding: 10px 0; font-size: 13px; }
.top-bar .container { display: flex; justify-content: space-between; }
.contact-info span { margin-right: 20px; }
.lang-switch a { color: #fff; text-decoration: none; }
.lang-switch a.active { color: #ff5e14; font-weight: bold; }

/* --- Header & Nav --- */
header { background: #fff; padding: 15px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
header .container { display: flex; justify-content: space-between; align-items: center; }
.logo h1 { font-family: 'Oswald', sans-serif; font-size: 26px; }
.logo span { color: #ff5e14; }
.slogan { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #777; }

nav ul { list-style: none; display: flex; }
nav ul li { position: relative; padding: 10px 15px; }
nav ul li a { text-decoration: none; color: #333; font-weight: bold; text-transform: uppercase; font-size: 13px; transition: 0.3s; }
nav ul li a:hover { color: #ff5e14; }

/* Dropdown */
nav ul li ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 240px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 10px 0; flex-direction: column; border-top: 3px solid #ff5e14; }
nav ul li:hover > ul.sub-menu { display: flex; }
nav ul li ul.sub-menu li { padding: 0; }
nav ul li ul.sub-menu li a { padding: 10px 20px; text-transform: none; display: block; border-bottom: 1px solid #f5f5f5; }

/* --- Hero --- */
.hero { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('image/home/001.avif') center/cover; height: 70vh; display: flex; align-items: center; text-align: center; color: #fff; }
.hero-content { max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: 45px; margin-bottom: 20px; font-family: 'Oswald', sans-serif; }
.btn { display: inline-block; background: #ff5e14; color: #fff; padding: 12px 30px; text-decoration: none; border-radius: 4px; font-weight: bold; margin-top: 20px; }

/* --- Categories & Grid --- */
.section-title { text-align: center; font-family: 'Oswald', sans-serif; font-size: 32px; margin: 50px 0; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.cat-item { text-align: center; padding: 20px; border: 1px solid #eee; transition: 0.3s; }
.cat-item:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: #ff5e14; }
.cat-item img { width: 80px; height: 80px; margin-bottom: 15px; }
.cat-item h3 { margin-bottom: 10px; font-size: 18px; }

/* --- Main Cards --- */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 60px 0; }
.service-card { background: #f9f9f9; padding: 40px; text-align: center; }
.service-card img { width: 200px; margin-bottom: 20px; }

/* --- Footer --- */
footer { background: #1a1a1a; color: #fff; padding: 60px 0 20px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.footer-bottom { border-top: 1px solid #333; margin-top: 40px; padding-top: 20px; text-align: center; font-size: 12px; color: #777; }
.btn-profile { background: #ff5e14; color: #fff !important; padding: 8px 15px !important; border-radius: 4px; }



/* --- Sectors Served --- */
.sectors-section { padding: 80px 0; background: #fdfdfd; }
.section-subtitle { text-align: center; max-width: 800px; margin: 0 auto 40px; color: #666; }
.sector-grid { display: flex; justify-content: space-around; flex-wrap: wrap; }
.sector-list ul { list-style: none; }
.sector-list li { font-size: 18px; font-weight: 500; margin-bottom: 15px; display: flex; align-items: center; }
.sector-list li i { color: #ff5e14; margin-right: 12px; font-size: 20px; }

/* --- CTA Banner --- */
.cta-banner { padding: 60px 0; background: #fff; }
.cta-flex { display: flex; align-items: center; gap: 50px; }
.cta-image img { width: 100%; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.cta-text h2 { font-family: 'Oswald', sans-serif; font-size: 30px; line-height: 1.3; margin-bottom: 20px; }

/* --- Booking Section --- */
.booking-section { background: #ff5e14; padding: 80px 0; color: #fff; text-align: center; }
.white { color: #fff; }
.white-text { margin-bottom: 50px; opacity: 0.9; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.step-card { padding: 20px; }
.step-card img { width: 100px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.step-card h3 { margin-bottom: 15px; }
.btn-white { background: #fff; color: #ff5e14; }

/* --- FAQ Section --- */
.faq-section { padding: 80px 0; background: #fff; }
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #eee; margin-bottom: 10px; }
.faq-question { width: 100%; text-align: left; padding: 20px; background: none; border: none; font-size: 18px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-answer { padding: 0 20px 20px; display: none; color: #555; }
.faq-question:hover { color: #ff5e14; }



/* Sectors Grid Styling */
.sectors-grid-section { padding: 60px 0; background: #fff; }
.main-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.grid-column { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 20px; }

.sector-card {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    transition: all 0.4s ease;
    cursor: pointer;
}


.sector-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); 
    transition: background 0.4s ease;
}

.sector-card:hover::before {
    background: rgba(0, 0, 0, 0.3); 
}

.sector-card h4 {
    position: relative;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    z-index: 1;
    padding: 0 15px;
}

.sector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


.s1 { background-image: url('image/home/015.avif'); }
.s2 { background-image: url('image/home/016.jpg'); }
.s3 { background-image: url('image/home/017.jpg'); }
.s4 { background-image: url('image/home/018.jpg'); }
.s5 { background-image: url('image/home/019.jpg'); }
.s6 { background-image: url('image/home/020.jpg'); }
.s7 { background-image: url('image/home/021.jpg'); }
.s8 { background-image: url('image/home/022.jpg'); }
.s9 { background-image: url('image/home/023.jpg'); }
.s10 { background-image: url('image/home/024.webp'); }


@media screen and (max-width: 768px) {
    .grid-column { min-width: 100%; }
    .sector-card { height: 180px; }
}






/* --- Hero Section Styling --- */
.et_pb_section_0 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                      url('image/home/001.avif') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed; 
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.hero-title {
    font-size: 52px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.5);
}

.hero-subtitle {
    font-size: 20px;
    margin-bottom: 35px;
    opacity: 0.9;
    font-weight: 400;
}

/* Button Styling */
.btn-hero {
    background-color: #ff5e14; 
    color: #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
    display: inline-block;
}

.btn-hero:hover {
    background-color: #e04d0d;
}


@media screen and (max-width: 768px) {
    .hero-title { font-size: 32px; }
    .hero-subtitle { font-size: 16px; }
    .et_pb_section_0 { min-height: 60vh; background-attachment: scroll; }
}




.faq-answer {
    display: none; 
    padding: 15px 20px;
    background-color: #f9f9f9;
    color: #333;
    border-top: 1px solid #eee;
}

.faq-question {
    width: 100%;
    cursor: pointer;
    border: none;
    outline: none;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s;
}


/* End Code All */



.developer-credit a {
    background: linear-gradient(45deg, #ff5e14, #ffbd39);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.developer-credit a:hover {
    transform: scale(1.1); 
    filter: drop-shadow(0px 0px 8px rgba(255, 94, 20, 0.6));
}


.developer-credit a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: #ffbd39;
    transition: width 0.4s ease;
    -webkit-transition: width 0.4s ease;
}

.developer-credit a:hover::after {
    width: 100%;
    left: 0;
    background: #ff5e14;
}


/* ===============############## Start New Css############=============== */

/* Contact Section Layout */
.contact-form-section {
    background-color: #000;
    padding: 60px 0;
}

.contact-flex-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    background: #111;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Image Side */
.contact-image-column {
    flex: 1;
    min-width: 450px;
}

.image-wrapper {
    position: relative;
    height: 100%;
    min-height: 400px;
}

.side-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 94, 20, 0.8); 
    padding: 10px 20px;
    border-radius: 5px;
}

/* Form Side */
.contact-form-column {
    flex: 1;
    min-width: 400px;
    padding: 50px;
    color: #fff;
}

.request-tag {
    color: #ff5e14;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.form-title {
    font-size: 30px;
    margin-bottom: 15px;
    color: #fff;
}

.form-subtitle {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #ccc;
}

/* Input Styles */
.form-fields-wrapper {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.field-half { flex: 1; }
.field-full { width: 100%; margin-bottom: 15px; }

.input {
    width: 100%;
    padding: 12px 15px;
    background-color: #222 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 5px;
}

.input:focus {
    border-color: #ff5e14 !important;
    outline: none;
}

/* Captcha & Submit */
.et_contact_bottom_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-input {
    width: 60px !important;
    text-align: center;
}

.submit-btn {
    background-color: #ff5e14 !important;
    color: #fff !important;
    padding: 12px 35px !important;
    border-radius: 5px !important;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover {
    background-color: #e04d0d !important;
    transform: translateY(-2px);
}

/* Responsive */
@media screen and (max-width: 980px) {
    .contact-image-column { min-width: 100%; min-height: 250px; }
    .contact-form-column { padding: 30px; }
}




/* ===============############## Page: manpower-services.html ############=============== */


/* Services Hero */
.services-hero {
    padding: 100px 0;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
                url('image/home/014.webp');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.services-hero h1 {
    font-size: 45px;
    color: #ff5e14;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Grid Layout */
.services-grid-section {
    padding: 80px 0;
}

.services-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}


/* CTA Section */
.cta-section {
    padding: 60px 0;
    text-align: center;
    background: #111;
    border-top: 2px solid #ff5e14;
}

.cta-section h2 {
    margin-bottom: 30px;
    font-size: 28px;
}

.btn-hero {
    background: #ff5e14;
    color: #fff;
    padding: 15px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
    display: inline-block;
}

.btn-hero:hover {
    background: #fff;
    color: #ff5e14;
}

/* Section Styling */
    .manpower-solutions {
        padding: 60px 0;
        background-color: #f9f9f9;
        font-family: 'Roboto', sans-serif;
    }
    .section-header {
        text-align: center;
        margin-bottom: 40px;
    }
    .main-title {
        font-family: 'Oswald', sans-serif;
        font-size: 32px;
        color: #333;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .sub-text {
        font-size: 16px;
        color: #666;
    }

    /* Grid Layout */
    .manpower-grid {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
    }
    .manpower-item {
        flex: 0 0 33.333%; /* 3 items per row */
        max-width: 33.333%;
        padding: 15px;
        box-sizing: border-box;
    }

    /* Card Styling */
    .item-card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        text-align: center;
        padding: 20px;
        transition: transform 0.3s ease;
    }
    .item-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .item-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 5px;
        margin-bottom: 15px;
    }
    .item-card h3 {
        font-size: 20px;
        margin-bottom: 15px;
        color: #000;
    }

    /* Button Styling */
    .btn-contact {
        display: inline-block;
        background-color: #ff5722; /* Customize your brand color */
        color: #fff;
        padding: 10px 25px;
        text-decoration: none;
        border-radius: 4px;
        font-weight: bold;
        transition: background 0.3s ease;
    }
    .btn-contact:hover {
        background-color: #e64a19;
    }


	
	
/* Services Grid Styling */
.services-grid-section {
    padding: 80px 0;
    background-color: #f4f7f9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-title {
    text-align: center;
    font-size: 36px;
    color: #2c3e50;
    margin-bottom: 50px;
    font-weight: 700;
}

.services-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.cat-item {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;
}

.cat-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid #3498db;
}

.icon-box {
    width: 60px;
    height: 60px;
    background: #eef2f7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.icon-box i {
    font-size: 28px;
    color: #3498db;
	
}

.cat-item h3 {
    font-size: 22px;
    color: #1a202c;
    margin-bottom: 15px;
    font-weight: 600;
}

.cat-item ul {
    list-style: none;
    padding: 0;
}

.cat-item ul li {
    font-size: 15px;
    color: #555;
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.cat-item ul li::before {
    content: "✔";
    color: #3498db;
    margin-right: 10px;
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .services-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Updated Sub-Hero Styling to avoid Conflict */
.sub-hero-area {
    position: relative;
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Background Animation Effect */
.sub-hero-accent {
    position: absolute;
    top: -150px;
    right: -150px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 98, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    animation: subPulse 10s infinite alternate;
}

@keyframes subPulse {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-20px, 20px); }
}

.sub-hero-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 1;
}

/* Content Styles */
.sub-hero-badge {
    background: rgba(0, 98, 255, 0.1);
    color: #0062ff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 25px;
}

.sub-hero-title {
    font-size: 54px;
    font-weight: 800;
    line-height: 1.15;
    color: #1a202c;
    margin-bottom: 25px;
}

.sub-hero-highlight {
    background: linear-gradient(90deg, #0062ff, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-hero-desc {
    font-size: 19px;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 550px;
}

/* Updated Buttons */
.sub-hero-btns {
    display: flex;
    gap: 20px;
}

.sub-btn-main {
    background: #0062ff;
    color: #fff;
    padding: 18px 35px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 98, 255, 0.2);
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub-btn-outline {
    border: 2px solid #e2e8f0;
    color: #1a202c;
    padding: 16px 33px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.sub-btn-main:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0, 98, 255, 0.3); }
.sub-btn-outline:hover { border-color: #0062ff; color: #0062ff; }

/* Visual Components */
.sub-hero-visual {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.sub-glass-card {
    position: relative;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 35px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    animation: subFloat 6s infinite ease-in-out;
}

.sub-main-img {
    width: 100%;
    max-width: 520px;
    border-radius: 25px;
    display: block;
}

.sub-floating-label {
    position: absolute;
    bottom: 40px;
    left: -40px;
    background: #ffffff;
    padding: 18px 28px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-left: 5px solid #10b981;
}

.sub-floating-label i { color: #10b981; font-size: 22px; }
.sub-floating-label span { font-weight: 700; color: #2d3748; font-size: 15px; }

@keyframes subFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .sub-hero-wrapper { flex-direction: column; text-align: center; }
    .sub-hero-title { font-size: 38px; }
    .sub-hero-desc { margin: 0 auto 30px; }
    .sub-hero-btns { justify-content: center; }
    .sub-floating-label { left: 50%; transform: translateX(-50%); bottom: -20px; width: max-content; }
    .sub-hero-area { padding: 80px 0; }
}



/* ===============############## Page: manpower-strength.html ############=============== */

/* --- Manpower Strength Styling (Updated Color Theme) --- */
.manpower-strength-section {
    padding: 80px 0;
    
    background-color: #121418; 
    color: #fff;
}

.section-title {
    text-align: center;
    font-size: 36px;
    color: #ff5e14; 
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.section-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    color: #a0a0a0;
    font-size: 16px;
    line-height: 1.6;
}

.strength-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.strength-card {
   
    background: rgba(30, 34, 40, 0.6); 
    padding: 35px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px); 
}

.strength-card:hover {
    border-color: #ff5e14;
    
    background: rgba(255, 94, 20, 0.08); 
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.strength-card h3 {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 25px;
    border-bottom: 2px solid #ff5e14;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}


.strength-card h3 i {
    color: #ff5e14; 
    font-size: 22px;
}

.strength-card ul {
    list-style: none;
}

.strength-card ul li {
    padding: 10px 0;
    font-size: 15px;
    color: #d1d1d1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
}


.strength-card ul li::before {
    content: "•";
    color: #ff5e14;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: 0;
}

.strength-card ul li:last-child {
    border-bottom: none;
}


@media (max-width: 768px) {
    .strength-grid {
        grid-template-columns: 1fr;
    }
    .section-title {
        font-size: 28px;
    }
}



/* ===============############## Page: About-Us.html ############=============== */

/* --- About Us Page Styling --- */

/* Hero Section */
.about-hero {
    padding: 120px 0 80px;
    background: linear-gradient(rgba(18, 20, 24, 0.8), rgba(18, 20, 24, 0.9)), 
                url('image/home/014.webp');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.about-hero h1 {
    font-size: 42px;
    color: #ff5e14;
    text-transform: uppercase;
}

/* Company Overview */
.about-content-section {
    padding: 80px 0;
    background-color: #121418;
    color: #fff;
}

.about-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.about-text { flex: 1; min-width: 300px; }
.about-image { flex: 1; min-width: 300px; }

.about-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.gold-text { color: #ff5e14; margin-bottom: 20px; font-size: 32px; }

/* Legal Cards */
.legal-info-section {
    padding: 80px 0;
    background-color: #1a1d23;
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.legal-card {
    background: rgba(45, 50, 60, 0.6);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: 0.3s;
}

.legal-card:hover {
    border-color: #ff5e14;
    transform: translateY(-10px);
}

.legal-card i {
    font-size: 40px;
    color: #ff5e14;
    margin-bottom: 20px;
}

.legal-card h3 {
    margin-bottom: 20px;
    color: #fff;
}

.legal-card ul { list-style: none; text-align: left; }
.legal-card ul li {
    padding: 8px 0;
    font-size: 14px;
    color: #ccc;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Vision & Mission */
.vision-mission {
    padding: 80px 0;
    background-color: #121418;
}

.vision-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.vision-box {
    flex: 1;
    min-width: 300px;
    background: #1a1d23;
    padding: 40px;
    border-left: 5px solid #ff5e14;
    border-radius: 0 15px 15px 0;
}

.vision-box h3 { color: #ff5e14; margin-bottom: 15px; }

/* Responsive */
@media (max-width: 768px) {
    .about-hero h1 { font-size: 32px; }
    .about-flex { flex-direction: column; }
}



.legal-card p, 
.legal-card ul li, 
.legal-card h3 {
    color: #ffffff !important; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
}

.legal-card ul li strong {
    color: #ff5e14; 
}


.vision-box h3 {
    color: #ff5e14; 
    font-size: 24px;
    margin-bottom: 15px;
}

.vision-box p {
    color: #ffffff !important; 
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}


.legal-card strong {
    color: #ff5e14;
}



/* ===============############## Page: Contact.html ############=============== */


.contact-section {
    padding: 80px 0;
    background-color: #121418;
}

.contact-wrapper {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}



.info-box {
    background: rgba(45, 50, 60, 0.6);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.info-box:hover {
    border-color: #ff5e14;
    transform: translateY(-5px);
}

.info-box i {
    font-size: 35px;
    color: #ff5e14;
    margin-bottom: 15px;
}

.info-box h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px;
}

.info-box p {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.6;
}

.wa-link {
    display: inline-block;
    margin-top: 10px;
    color: #ff5e14;
    text-decoration: none;
    font-weight: bold;
}

/* Form Styling */
.contact-form-container {
    flex: 1;
    background: rgba(45, 50, 60, 0.4);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-form-container h3 {
    color: #ff5e14;
    margin-bottom: 25px;
    font-size: 24px;
}

.input-group {
    margin-bottom: 20px;
}

.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 15px;
    background: #1a1d23;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    outline: none;
    transition: 0.3s;
}

.input-group input:focus, 
.input-group textarea:focus {
    border-color: #ff5e14;
    box-shadow: 0 0 10px rgba(255, 94, 20, 0.2);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: #ff5e14;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover {
    background: #e04d0d;
    transform: scale(1.02);
}

.map-section {
    padding-bottom: 80px;
    background-color: #121418;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .contact-wrapper { flex-direction: column; }
}



/* ===============############## Page: subcontracting-services.html ############=============== */


/* Subcontracting Hero Specific Styles */
.subcontracting-hero {
    position: relative;
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Subtle background element */
.subcontracting-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba(0, 98, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.subcontracting-hero-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.subcontracting-hero-content {
    flex: 1;
}

.subcontracting-hero-badge {
    color: #0062ff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #0062ff;
    padding-bottom: 5px;
    display: inline-block;
    margin-bottom: 20px;
}

.subcontracting-hero-title {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.1;
    color: #1a202c;
    margin-bottom: 20px;
}

.subcontracting-hero-gradient {
    background: linear-gradient(90deg, #0062ff, #3182ce);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subcontracting-hero-desc {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 35px;
    max-width: 540px;
}

.subcontracting-btn-primary {
    display: inline-block;
    background: #0062ff;
    color: #ffffff;
    padding: 16px 35px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0, 98, 255, 0.2);
    transition: 0.3s ease;
}

.subcontracting-btn-primary:hover {
    background: #004ecc;
    transform: translateY(-3px);
}

/* Image Styling */
.subcontracting-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.subcontracting-hero-img-box {
    position: relative;
}

.subcontracting-hero-img-box img {
    width: 100%;
    max-width: 580px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.subcontracting-hero-stat {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border-left: 5px solid #0062ff;
}

.subcontracting-hero-stat i {
    font-size: 24px;
    color: #0062ff;
}

.subcontracting-hero-stat strong {
    display: block;
    font-size: 16px;
    color: #2d3748;
}

.subcontracting-hero-stat span {
    font-size: 12px;
    color: #718096;
}

/* Responsive */
@media (max-width: 992px) {
    .subcontracting-hero-flex {
        flex-direction: column;
        text-align: center;
    }
    .subcontracting-hero-title {
        font-size: 36px;
    }
    .subcontracting-hero-desc {
        margin: 0 auto 30px;
    }
    .subcontracting-hero-stat {
        right: 50%;
        transform: translateX(50%);
        bottom: -15px;
        width: max-content;
    }
}


/* Subcontracting V2 Custom Styles */
.subcontracting-v2-area {
    padding: 100px 0;
    background-color: #ffffff;
}

.sub-v2-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.sub-v2-row.reverse {
    flex-direction: row-reverse;
}

.sub-v2-col {
    flex: 1;
}

/* Image Side Styles */
.sub-v2-img-container {
    position: relative;
    z-index: 1;
}

.sub-v2-img-container img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}

.sub-v2-shape {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 150px;
    height: 150px;
    background: #eef2f7;
    border-radius: 20px;
    z-index: 0;
}

.sub-v2-shape.second-shape {
    top: auto;
    bottom: -20px;
    left: auto;
    right: -20px;
    background: rgba(0, 98, 255, 0.05);
}

/* Text Side Styles */
.sub-v2-label {
    color: #0062ff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 15px;
}

.sub-v2-content-box h3 {
    font-size: 32px;
    color: #1a202c;
    line-height: 1.3;
    margin-bottom: 20px;
    font-weight: 700;
}

.sub-v2-content-box p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* List Styling */
.sub-v2-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}

.sub-v2-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 16px;
    color: #2d3748;
}

.sub-v2-list li::before {
    content: "\f058"; /* FontAwesome Check Circle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #0062ff;
    font-size: 18px;
}

.sub-v2-list li strong {
    color: #1a202c;
}

/* Mobile View Check */
@media (max-width: 992px) {
    .subcontracting-v2-area { padding: 60px 0; }
    .sub-v2-row, .sub-v2-row.reverse {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 70px;
        text-align: center;
    }
    .sub-v2-content-box h3 { font-size: 26px; }
    .sub-v2-list li { text-align: left; }
    .sub-v2-shape { display: none; }
}



/* Subcontracted Roles Grid Styles */
.sub-roles-area {
    padding: 80px 0;
    background-color: #f8fafc;
}

.sub-roles-header {
    text-align: center;
    margin-bottom: 50px;
}

.sub-roles-main-title {
    font-size: 36px;
    color: #1a202c;
    font-weight: 800;
    margin-bottom: 15px;
}

.header-line {
    width: 80px;
    height: 4px;
    background: #0062ff;
    margin: 0 auto;
    border-radius: 2px;
}

/* Grid Configuration */
.sub-roles-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sub-role-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sub-role-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    border-color: #0062ff;
}

.sub-role-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 98, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.sub-role-icon i {
    font-size: 28px;
    color: #0062ff;
}

.sub-role-card h4 {
    font-size: 20px;
    color: #1a202c;
    margin-bottom: 15px;
    font-weight: 700;
}

.sub-role-card p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
}

.sub-role-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-role-card ul li {
    font-size: 15px;
    color: #4a5568;
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
    line-height: 1.4;
}

.sub-role-card ul li::before {
    content: "•";
    color: #0062ff;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Highlight Card Style */
.highlight-card {
    background: #1a202c;
    border: none;
}

.highlight-card h4, .highlight-card ul li {
    color: #ffffff;
}

.highlight-card .sub-role-icon {
    background: rgba(255, 255, 255, 0.1);
}

.highlight-card .sub-role-icon i {
    color: #38bdf8;
}

.highlight-card ul li::before {
    color: #38bdf8;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .sub-roles-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sub-roles-grid-wrapper {
        grid-template-columns: 1fr;
    }
    .sub-roles-main-title {
        font-size: 28px;
    }
}



/* Selection Section CSS */
.sub-partner-selection {
    padding: 80px 0;
    background: #fdfdfd;
}

.sub-selection-header {
    text-align: center;
    margin-bottom: 50px;
}

.sub-selection-header h3 {
    font-size: 32px;
    color: #1a202c;
    font-weight: 700;
}

.sub-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
}

.selection-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-bottom: 4px solid #e2e8f0;
    transition: 0.3s;
}

.selection-item:hover {
    border-color: #0062ff;
    transform: translateY(-5px);
}

.step-num {
    font-size: 40px;
    font-weight: 900;
    color: rgba(0, 98, 255, 0.80);
    display: block;
    margin-bottom: 10px;
}

.selection-item h4 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #2d3748;
}

/* Insights Section CSS */
.sub-insights-area {
    padding: 80px 0;
    background: #ffffff;
}

.sub-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.insight-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: 0.3s;
}

.insight-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.insight-body {
    padding: 20px;
}

.insight-body h4 {
    font-size: 17px;
    margin-bottom: 10px;
    color: #1a202c;
    min-height: 50px;
}

.insight-body p {
    font-size: 14px;
    color: #718096;
    margin-bottom: 20px;
    line-height: 1.5;
}

.read-more-btn {
    display: inline-block;
    color: #0062ff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.read-more-btn:hover {
    border-color: #0062ff;
}

/* Responsive */
@media (max-width: 1024px) {
    .sub-insights-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sub-insights-grid { grid-template-columns: 1fr; }
    .sub-selection-grid { grid-template-columns: 1fr; }
}



/* --- Global Section Title (আপনার হোমপেজের স্টাইল অনুযায়ী) --- */
.section-title {
  text-align: center;
  font-size: 36px;
  color: #ff5e14; /* আপনার দেওয়া অরেঞ্জ কালার */
  margin-bottom: 15px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}

/* --- Subcontracting Hero Section Update --- */
.subcontracting-hero-gradient {
    background: #ff5e14; /* গ্র্যাডিয়েন্টের বদলে সলিড অরেঞ্জ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subcontracting-hero-badge {
    color: #ff5e14;
    border-bottom: 2px solid #ff5e14;
}

.subcontracting-btn-primary {
    background: #ff5e14;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

.subcontracting-btn-primary:hover {
    background: #e65410; /* Hover-এ একটু ডার্ক অরেঞ্জ */
}

/* --- Selection Partner Section Update --- */
.step-num {
    font-size: 40px;
    font-weight: 900;
    color: rgba(255, 94, 20); /* আপনার অরেঞ্জ কালারের লাইট ভার্সন */
    display: block;
    margin-bottom: 10px;
}

.selection-item:hover {
    border-color: #ff5e14;
}

/* --- Roles & Insights Section Update --- */
.header-line {
    width: 80px;
    height: 4px;
    background: #ff5e14; /* নীল থেকে অরেঞ্জ */
    margin: 0 auto;
    border-radius: 2px;
}

.sub-role-icon i, 
.sub-v2-list li::before, 
.read-more-btn {
    color: #ff5e14;
}

.sub-role-card:hover {
    border-color: #ff5e14;
}

.read-more-btn:hover {
    border-color: #ff5e14;
}


/* Booking Section Styling */
.booking-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); /* প্রফেশনাল ডার্ক ব্যাকগ্রাউন্ড */
    text-align: center;
}

/* টাইটেল স্টাইল (আপনার হোমপেজ অনুযায়ী অরেঞ্জ কালার) */
.booking-section .section-title.white {
    color: #ff5e14; /* নীল বা সাদার বদলে আপনার ব্র্যান্ড অরেঞ্জ */
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 800;
}

.white-text {
    color: #e2e8f0;
    font-size: 18px;
    margin-bottom: 50px;
}

/* স্টেপ গ্রিড লেআউট */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* স্টেপ কার্ড ডিজাইন */
.step-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
    border-color: #ff5e14; /* হোভারে আপনার অরেঞ্জ বর্ডার */
}

.step-card img {
    width: 80px;
    margin-bottom: 25px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

.step-card h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 700;
}

.step-card p {
    color: #cbd5e0;
    font-size: 15px;
    line-height: 1.6;
}

/* হোয়াটসঅ্যাপ বাটন ডিজাইন */
.btn-white {
    display: inline-block;
    padding: 15px 35px;
    background-color: #ff5e14; /* বাটনটি অরেঞ্জ কালার করা হয়েছে */
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.3);
}

.btn-white:hover {
    background-color: #ffffff;
    color: #ff5e14 !important;
    transform: scale(1.05);
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 992px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .step-card {
        padding: 30px;
    }
}




/* ===============############## Page: civil-construction.html ############=============== */


/* Civil Construction Dedicated Styles */
.civil-const-hero {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.civil-const-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.civil-const-col-content, 
.civil-const-col-image {
    flex: 1;
}

/* Title Styling */
.civil-const-title {
    font-size: 48px;
    line-height: 1.2;
    color: #1a202c;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.civil-const-title span {
    color: #ff5e14; /* আপনার সেই সিগনেচার অরেঞ্জ কালার */
}

.civil-const-divider {
    width: 60px;
    height: 5px;
    background: #ff5e14;
    margin: 25px 0;
}

.civil-const-description {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 500px;
}

/* Button Styling */
.civil-const-btn {
    display: inline-block;
    padding: 15px 35px;
    background-color: #ff5e14;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    text-transform: uppercase;
    transition: 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

.civil-const-btn:hover {
    background-color: #1a202c;
    transform: translateY(-3px);
}

/* Image Styling */
.civil-const-img-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.civil-const-main-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.civil-const-img-frame:hover .civil-const-main-img {
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .civil-const-row {
        flex-direction: column;
        text-align: center;
    }
    .civil-const-title {
        font-size: 36px;
    }
    .civil-const-divider {
        margin: 20px auto;
    }
    .civil-const-description {
        margin: 0 auto 30px;
    }
    .civil-const-col-image {
        width: 100%;
        margin-top: 30px;
    }
}


/* Civil Trades Section Styles */
.civil-trades-section {
    padding: 80px 0;
    background-color: #f8fafc; /* হালকা গ্রে ব্যাকগ্রাউন্ড */
}

.civil-trades-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.trade-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 15px;
    text-align: center;
    border-bottom: 3px solid transparent;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.trade-card:hover {
    transform: translateY(-10px);
    border-color: #ff5e14; /* আপনার অরেঞ্জ কালার */
    box-shadow: 0 15px 30px rgba(255, 94, 20, 0.1);
}

.trade-icon {
    font-size: 40px;
    color: #ff5e14;
    margin-bottom: 20px;
}

.trade-card h4 {
    font-size: 19px;
    color: #1a202c;
    font-weight: 700;
    margin-bottom: 15px;
}

.trade-card p {
    font-size: 14px;
    color: #718096;
    line-height: 1.5;
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 1024px) {
    .civil-trades-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .civil-trades-grid {
        grid-template-columns: 1fr;
    }
}

/* Civil Information Sections */
.civil-info-area {
    padding: 60px 0;
    background-color: #ffffff;
}

.civil-info-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.civil-info-row.reverse {
    flex-direction: row-reverse;
}

.civil-info-text, .civil-info-image {
    flex: 1;
}

/* টাইটেল আপনার হোমপেজ স্টাইল অনুযায়ী */
.civil-info-title {
    font-size: 32px;
    color: #1a202c;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.civil-info-text p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 15px;
    text-align: justify;
}

/* ইমেজ স্টাইল */
.civil-info-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.civil-info-image img:hover {
    transform: scale(1.02);
}

/* ডিভাইডার আপনার আগের সেকশন থেকে নেওয়া */
.civil-const-divider {
    width: 60px;
    height: 4px;
    background: #ff5e14; /* Orange */
    margin-bottom: 25px;
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 992px) {
    .civil-info-row, .civil-info-row.reverse {
        flex-direction: column;
        gap: 30px;
        text-align: center;
        margin-bottom: 60px;
    }
    
    .civil-info-title {
        font-size: 26px;
    }
    
    .civil-const-divider {
        margin-left: auto;
        margin-right: auto;
    }
}


/* Why Choose & CTA Area */
.civil-why-choose {
    padding: 80px 0;
    background-color: #fcfcfc;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.benefit-item {
    background: #fff;
    padding: 15px;
    border-left: 4px solid #ff5e14;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-size: 14px;
    color: #4a5568;
}

/* CTA Card Styling */
.civil-cta-card {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    flex: 0.8;
}

.cta-inner h4 {
    color: #ff5e14;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.cta-inner h1 {
    font-size: 30px;
    margin-bottom: 20px;
    color: #fff;
}

.cta-inner p {
    font-size: 15px;
    margin-bottom: 30px;
    opacity: 0.9;
    line-height: 1.6;
}

.cta-large {
    display: block;
    width: 100%;
    padding: 18px;
    font-size: 18px;
    text-align: center;
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    .civil-cta-card {
        margin-top: 40px;
        flex: 1;
    }
}



/* ===============############## Page: Mechanical & Piping.html ############=============== */

/* Mechanical Page Specific CSS */
.mechanical-hero-area {
    padding: 80px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.mechanical-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.mechanical-hero-content {
    flex: 1;
}

.mechanical-hero-image {
    flex: 1;
}

/* Titles */
.mechanical-main-title {
    font-size: 42px;
    font-weight: 800;
    color: #1a202c;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.mechanical-sub-title {
    font-size: 36px;
    font-weight: 700;
    color: #ff5e14; /* Your Brand Orange */
    margin-top: 5px;
}

/* Description */
.mechanical-desc-box p {
    font-size: 18px;
    line-height: 1.6;
    color: #4a5568;
    margin-top: 25px;
}

/* Button */
.mechanical-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #fff;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 30px;
    transition: 0.3s ease;
    text-transform: uppercase;
}

.mechanical-btn:hover {
    background-color: #1a202c;
    transform: translateY(-3px);
}

/* Image Styling */
.mechanical-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .mechanical-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .mechanical-main-title {
        font-size: 32px;
    }
    
    .mechanical-sub-title {
        font-size: 28px;
    }
}


/* Mechanical Content Sections CSS */
.mechanical-content-area {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.mechanical-info-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

.mechanical-info-row.mechanical-reverse {
    flex-direction: row-reverse;
}

.mechanical-info-text, .mechanical-info-image {
    flex: 1;
}

/* Title & Divider */
.mechanical-info-title {
    font-size: 30px;
    color: #1a202c;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
}

.mechanical-divider {
    width: 60px;
    height: 4px;
    background: #ff5e14; /* Orange */
    margin-bottom: 25px;
}

/* Content Text */
.mechanical-info-text p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

/* Image Styles */
.mechanical-info-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.07);
    transition: transform 0.3s ease;
}

.mechanical-info-image img:hover {
    transform: translateY(-5px);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .mechanical-info-row, .mechanical-info-row.mechanical-reverse {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .mechanical-info-title {
        font-size: 24px;
    }
    
    .mechanical-divider {
        margin: 0 auto 20px auto;
    }
}


/* Mechanical Categories CSS */
.mechanical-category-area {
    padding: 80px 0;
    background-color: #ffffff;
    text-align: center;
}

.mechanical-section-header {
    margin-bottom: 50px;
}

.mechanical-category-main-title {
    font-size: 28px;
    color: #1a202c;
    font-weight: 800;
    margin-bottom: 15px;
}

/* Grid Layout */
.mechanical-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Card Styling */
.mechanical-cat-card {
    background: #fff;
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.mechanical-cat-card:hover {
    transform: translateY(-10px);
    border-color: #ff5e14; /* Your Brand Orange */
    box-shadow: 0 15px 30px rgba(255, 94, 20, 0.1);
}



.mechanical-cat-icon img {
    width: 100%;
    height: auto;
}

.mechanical-cat-name {
    font-size: 18px;
    color: #2d3748;
    font-weight: 700;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .mechanical-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .mechanical-category-grid {
        grid-template-columns: 1fr;
    }
    .mechanical-category-main-title {
        font-size: 22px;
    }
}


/* Mechanical Advantages Section CSS */
.mechanical-advantage-area {
    padding: 80px 0;
    background-color: #f4f7f6;
}

.mechanical-advantage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.mechanical-adv-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mechanical-adv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.mechanical-adv-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.mechanical-adv-content {
    padding: 25px;
    text-align: left;
}

.mechanical-adv-content h4 {
    font-size: 20px;
    color: #1a202c;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    border-bottom: 2px solid #ff5e14;
    padding-bottom: 10px;
    display: inline-block;
}

.mechanical-adv-content p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .mechanical-advantage-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .mechanical-advantage-grid {
        grid-template-columns: 1fr;
    }
    .mechanical-advantage-main-title {
        font-size: 24px;
    }
}

/* Mechanical Final CTA CSS */
.mechanical-cta-area {
    padding: 100px 0;
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    color: #ffffff;
    position: relative;
}

.mechanical-cta-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

.mechanical-cta-text {
    flex: 1;
}

.mechanical-cta-text h4 {
    color: #ff5e14; /* Brand Orange */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px;
    margin-bottom: 10px;
}

.mechanical-cta-text h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.mechanical-cta-text p {
    font-size: 18px;
    opacity: 0.8;
    line-height: 1.6;
}

/* Action Box Styling */
.mechanical-cta-action {
    flex: 1;
}

.mechanical-action-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
}

.mechanical-action-box h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #fff;
}

.mechanical-action-box p {
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Book Now Button */
.mechanical-cta-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 15px 45px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.3);
}

.mechanical-cta-btn:hover {
    background-color: #ffffff;
    color: #ff5e14;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.2);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .mechanical-cta-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .mechanical-cta-text h1 {
        font-size: 32px;
    }
}


/* ===============############## Page: Electrical.html ############=============== */

/* Electrical Page Specific Styles */
.electrical-hero-area {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.electrical-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.electrical-hero-content {
    flex: 1;
}

.electrical-hero-image {
    flex: 1;
}

/* Typography */
.electrical-main-title {
    font-size: 48px;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.electrical-sub-title {
    font-size: 38px;
    color: #ff5e14; /* Your Brand Orange */
    font-weight: 700;
    margin-top: 0;
}

.electrical-description p {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.6;
    margin-top: 25px;
}

/* Button */
.electrical-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    text-transform: uppercase;
    margin-top: 35px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

.electrical-btn:hover {
    background-color: #1a202c;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Image Styling */
.electrical-img-frame img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}

/* Responsive Grid */
@media (max-width: 991px) {
    .electrical-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .electrical-main-title {
        font-size: 36px;
    }
    
    .electrical-sub-title {
        font-size: 30px;
    }
    
    .electrical-hero-image {
        margin-top: 40px;
        width: 100%;
    }
}


/* Electrical Info Section Styling */
.electrical-info-area {
    padding: 80px 0;
    background-color: #fcfcfc;
}

.electrical-info-row {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.electrical-info-column {
    flex: 1;
}

/* Image Box */
.electrical-image-box img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    position: sticky;
    top: 20px; /* স্ক্রল করার সময় ইমেজটি জায়গায় থাকবে */
}

/* Text Content */
.electrical-text-block {
    margin-bottom: 40px;
}

.electrical-block-title {
    font-size: 26px;
    color: #1a202c;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
}

.electrical-divider {
    width: 50px;
    height: 4px;
    background-color: #ff5e14;
    margin-bottom: 20px;
}

.electrical-text-block p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}

/* Highlighted Block Style */
.highlight-block {
    background: #fff;
    padding: 25px;
    border-left: 5px solid #ff5e14;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Responsive */
@media (max-width: 991px) {
    .electrical-info-row {
        flex-direction: column;
    }
    
    .electrical-block-title {
        font-size: 22px;
    }

    .electrical-image-box img {
        position: static;
        margin-bottom: 30px;
    }
}

/* Electrical Categories CSS */
.electrical-category-area {
    padding: 80px 0;
    background-color: #ffffff;
    text-align: center;
}

.electrical-section-header {
    margin-bottom: 50px;
}

.electrical-category-main-title {
    font-size: 28px;
    color: #1a202c;
    font-weight: 800;
    margin-bottom: 15px;
}

.electrical-divider {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 0 auto;
}

/* Grid Layout for 5 Items */
.electrical-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Card & Icon Styling */
.electrical-cat-card {
    background: #fff;
    padding: 40px 15px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.electrical-cat-card:hover {
    transform: translateY(-10px);
    border-color: #ff5e14;
    box-shadow: 0 15px 30px rgba(255, 94, 20, 0.1);
}

.electrical-cat-icon {
    font-size: 60px; /* আপনার চাহিদা মতো বড় আইকন */
    color: #ff5e14;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    transition: all 0.4s ease;
}

.electrical-cat-card:hover .electrical-cat-icon {
    transform: scale(1.15);
    color: #1a202c;
}

.electrical-cat-name {
    font-size: 17px;
    color: #2d3748;
    font-weight: 700;
    margin-top: 15px;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 1200px) {
    .electrical-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .electrical-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .electrical-category-grid {
        grid-template-columns: 1fr;
    }
}


/* Electrical Advantages & CTA Style */
.electrical-advantages-area {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.electrical-advantage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.electrical-adv-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.electrical-adv-card:hover {
    transform: translateY(-10px);
}

.electrical-adv-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.electrical-adv-content {
    padding: 25px;
}

.electrical-adv-content h4 {
    font-size: 19px;
    color: #1a202c;
    margin-bottom: 15px;
    font-weight: 700;
    border-left: 4px solid #ff5e14;
    padding-left: 15px;
}

.electrical-adv-content p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
}

/* Final CTA Styling */
.electrical-final-cta {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    border-radius: 20px;
    padding: 60px;
    display: flex;
    align-items: center;
    gap: 50px;
    color: #ffffff;
}

.electrical-cta-left {
    flex: 1;
}

.electrical-cta-badge {
    background: #ff5e14;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
}

.electrical-cta-left h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.electrical-cta-right {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
}

.electrical-cta-right h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.electrical-book-btn {
    display: inline-block;
    background: #ff5e14;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    margin-top: 20px;
    text-transform: uppercase;
    transition: 0.3s;
}

.electrical-book-btn:hover {
    background: #ffffff;
    color: #ff5e14;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .electrical-advantage-grid {
        grid-template-columns: 1fr;
    }
    .electrical-final-cta {
        flex-direction: column;
        padding: 40px 20px;
    }
}



/* ===============############## Page: Plumbing.html ############=============== */


/* Plumbing Page Specific Styles */
.plumbing-hero-area {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.plumbing-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.plumbing-hero-content {
    flex: 1;
}

.plumbing-hero-image {
    flex: 1;
}

/* Typography */
.plumbing-main-title {
    font-size: 52px;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.plumbing-sub-title {
    font-size: 40px;
    color: #ff5e14; /* Brand Orange */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
}

.plumbing-highlight {
    font-size: 22px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 15px;
}

.plumbing-description p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.7;
}

/* Button */
.plumbing-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 16px 45px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    margin-top: 35px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

.plumbing-btn:hover {
    background-color: #1a202c;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Image Styling */
.plumbing-img-frame img {
    width: 100%;
    height: auto;
    border-radius: 30px 0 30px 0; /* একটু ভিন্ন ডিজাইনের বর্ডার */
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    border-bottom: 10px solid #ff5e14;
}

/* Responsive Grid */
@media (max-width: 991px) {
    .plumbing-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .plumbing-main-title {
        font-size: 38px;
    }
    
    .plumbing-sub-title {
        font-size: 32px;
    }
    
    .plumbing-hero-image {
        margin-top: 40px;
        width: 100%;
    }
}

/* Plumbing Info & Expertise Styling */
.plumbing-info-area {
    padding: 80px 0;
    background-color: #fcfcfc;
}

.plumbing-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.plumbing-row.reverse {
    flex-direction: row-reverse;
}

.plumbing-col-text, .plumbing-col-img {
    flex: 1;
}

/* Intro Box */
.plumbing-intro-box p {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Image Wrapper */
.plumbing-img-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

/* Expertise Content */
.plumbing-section-title {
    font-size: 32px;
    color: #1a202c;
    font-weight: 800;
    margin-bottom: 15px;
}

.plumbing-title-line {
    width: 60px;
    height: 4px;
    background: #ff5e14; /* Brand Orange */
    margin-bottom: 30px;
}

.plumbing-expertise-list {
    list-style: none;
    padding: 0;
}

.plumbing-expertise-list li {
    font-size: 16px;
    color: #2d3748;
    margin-bottom: 18px;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

/* List Icon (Orange Bullet) */
.plumbing-expertise-list li::before {
    content: "\f058"; /* Font Awesome Check Circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ff5e14;
    font-size: 20px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .plumbing-row, .plumbing-row.reverse {
        flex-direction: column;
        gap: 40px;
    }
    .plumbing-section-title {
        font-size: 26px;
        text-align: center;
    }
    .plumbing-title-line {
        margin: 0 auto 30px auto;
    }
}


/* Plumbing Details Styles */
.plumbing-details-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.plumbing-why-box {
    padding-right: 20px;
}

.plumbing-feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.plumbing-feature-list li {
    font-size: 16px;
    color: #4a5568;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
}

.plumbing-feature-list li::before {
    content: "\f00c"; /* Font Awesome Check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ff5e14;
}

/* Tag Cloud for Types */
.plumbing-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.plumbing-tag {
    background: #f1f5f9;
    color: #1a202c;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.plumbing-sub-title-dark {
    font-size: 22px;
    color: #1a202c;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Industry List Styling */
.plumbing-industry-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.plumbing-industry-list li {
    font-size: 15px;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plumbing-industry-list li i {
    color: #ff5e14;
    font-size: 18px;
}

/* Partnership Note */
.plumbing-partnership-note {
    background: #fff8f5;
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid #ff5e14;
}

.plumbing-partnership-note h3 {
    font-size: 20px;
    color: #1a202c;
    margin-bottom: 15px;
}

.plumbing-partnership-note p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
}

.plumbing-brand-call {
    margin-top: 15px;
    color: #1a202c !important;
}

/* Responsive */
@media (max-width: 991px) {
    .plumbing-industry-list {
        grid-template-columns: 1fr;
    }
}

/* Plumbing Final CTA CSS */
.plumbing-cta-area {
    padding: 80px 0;
    background: #ffffff; /* সাদা ব্যাকগ্রাউন্ডের উপর ডার্ক বক্স */
}

.plumbing-cta-wrapper {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    padding: 60px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* সজ্জার জন্য একটি ব্যাকগ্রাউন্ড এলিমেন্ট */
.plumbing-cta-wrapper::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 94, 20, 0.1);
    border-radius: 50%;
}

.plumbing-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.plumbing-cta-text {
    flex: 2;
}

.plumbing-cta-text h4 {
    color: #ff5e14;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
    margin-bottom: 10px;
}

.plumbing-cta-text h1 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 15px;
}

.plumbing-cta-text p {
    color: #cbd5e0;
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
}

.plumbing-cta-button-box {
    flex: 1;
    text-align: right;
}

/* Book Now Button */
.plumbing-book-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 18px 50px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.3);
}

.plumbing-book-btn:hover {
    background-color: #ffffff;
    color: #ff5e14;
    transform: translateY(-5px);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .plumbing-cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .plumbing-cta-button-box {
        text-align: center;
    }
    
    .plumbing-cta-text h1 {
        font-size: 32px;
    }
}


/* ===============############## Page: factory.html ############=============== */

/* Factory Page Specific Styles */
.factory-hero-area {
    padding: 100px 0;
    background-color: #fcfcfc;
    overflow: hidden;
}

.factory-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.factory-hero-content {
    flex: 1.2;
}

.factory-hero-image {
    flex: 0.8;
}

/* Typography */
.factory-main-title {
    font-size: 46px;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.factory-divider {
    width: 80px;
    height: 5px;
    background: #ff5e14; /* Brand Orange */
    margin-bottom: 30px;
}

.factory-highlight {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 20px;
    border-left: 4px solid #ff5e14;
    padding-left: 15px;
}

.factory-description p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.8;
}

/* Button */
.factory-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 16px 45px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    margin-top: 35px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

.factory-btn:hover {
    background-color: #1a202c;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Image Styling with Industrial Look */
.factory-img-frame img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    filter: grayscale(20%); /* ইন্ডাস্ট্রিয়াল লুক দেওয়ার জন্য হালকা গ্রেস্কেল */
    transition: 0.5s ease;
}

.factory-img-frame img:hover {
    filter: grayscale(0%);
}

/* Responsive Grid */
@media (max-width: 991px) {
    .factory-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .factory-main-title {
        font-size: 34px;
    }
    
    .factory-highlight {
        border-left: none;
        padding-left: 0;
    }

    .factory-hero-image {
        margin-top: 40px;
        width: 100%;
    }
}

/* Factory Details & Roles Styling */
.factory-details-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.factory-info-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

.factory-info-text, .factory-info-img {
    flex: 1;
}

.factory-intro-card p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

.factory-img-box img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Section Header */
.factory-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.factory-section-header h2 {
    font-size: 32px;
    color: #1a202c;
    font-weight: 800;
}

.factory-header-line {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto;
}

/* Roles Grid */
.factory-roles-container {
    background: #f8fafc;
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.factory-roles-title {
    font-size: 24px;
    color: #1a202c;
    margin-bottom: 35px;
    text-align: center;
    font-weight: 700;
}

.factory-roles-grid {
    display: flex;
    gap: 40px;
}

.factory-roles-col {
    flex: 1;
}

.factory-list {
    list-style: none;
    padding: 0;
}

.factory-list li {
    font-size: 16px;
    color: #2d3748;
    margin-bottom: 18px;
    padding-left: 25px;
    position: relative;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 10px;
}

.factory-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ff5e14;
}

/* Responsive */
@media (max-width: 991px) {
    .factory-info-row, .factory-roles-grid {
        flex-direction: column;
    }
    .factory-roles-container {
        padding: 30px 20px;
    }
}


/* Factory Icon Grid Styling */
.factory-icons-area {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.factory-section-title-center {
    text-align: center;
    margin-bottom: 50px;
}

.factory-section-title-center h2 {
    font-size: 36px;
    color: #1a202c;
    font-weight: 800;
}

.factory-title-underline {
    width: 70px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto;
}

.factory-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.factory-icon-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.factory-icon-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    border-color: #ff5e14;
}

.factory-icon-box {
   
    margin: 0 auto 15px;
}

.factory-icon-box img {
    width: 100%;
    height: auto;
}

.factory-icon-card h4 {
    font-size: 16px;
    color: #2d3748;
    font-weight: 700;
    margin: 0;
}

/* Responsive Grid */
@media (max-width: 1199px) {
    .factory-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .factory-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .factory-section-title-center h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .factory-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Factory Final CTA Styling */
.factory-cta-area {
    padding: 100px 0;
    background-color: #ffffff;
}

.factory-cta-wrapper {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    padding: 60px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* Background Design Element */
.factory-cta-wrapper::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 150px;
    height: 150px;
    background: rgba(255, 94, 20, 0.1);
    border-radius: 50%;
}

.factory-cta-row {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.factory-cta-content {
    flex: 1;
}

.factory-cta-tag {
    color: #ff5e14;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
}

.factory-cta-heading {
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.factory-cta-desc {
    color: #cbd5e0;
    font-size: 17px;
    line-height: 1.6;
}

.factory-cta-action {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.factory-cta-info h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 700;
}

.factory-cta-info p {
    color: #a0aec0;
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* CTA Button */
.factory-book-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 18px 50px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.3);
}

.factory-book-btn:hover {
    background-color: #ffffff;
    color: #ff5e14;
    transform: translateY(-5px);
}

/* Responsive */
@media (max-width: 991px) {
    .factory-cta-row {
        flex-direction: column;
        text-align: center;
    }
    .factory-cta-wrapper {
        padding: 40px 20px;
    }
    .factory-cta-heading {
        font-size: 32px;
    }
}


/* ===============############## Page: welder-work.html ############=============== */

/* Welder Page Specific Styles */
.welder-work-hero {
    padding: 100px 0;
    background-color: #f4f7f9;
    overflow: hidden;
}

.welder-work-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.welder-work-hero-content {
    flex: 1.2;
}

.welder-work-hero-image {
    flex: 0.8;
}

/* Typography */
.welder-work-main-title {
    font-size: 44px;
    font-weight: 900;
    color: #111;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.welder-work-divider {
    width: 70px;
    height: 6px;
    background: #ff5e14; /* Brand Orange */
    margin-bottom: 30px;
}

.welder-work-highlight {
    font-size: 22px;
    font-weight: 700;
    color: #ff5e14;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.welder-work-description p {
    font-size: 18px;
    color: #333;
    line-height: 1.8;
}

/* Button */
.welder-work-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 16px 45px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    margin-top: 35px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

.welder-work-btn:hover {
    background-color: #ffffff;
    color: #ff5e14;
    transform: translateY(-5px);
}

/* Image Styling */
.welder-work-img-frame img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-bottom: 8px solid #ff5e14; /* ওয়েল্ডিং থিমের জন্য অরেঞ্জ বর্ডার */
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .welder-work-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .welder-work-main-title {
        font-size: 32px;
    }
    
    .welder-work-hero-image {
        margin-top: 40px;
    }

    .welder-work-divider {
        margin: 0 auto 30px;
    }
}


/* Welder Details & Roles Styling */
.welder-work-details-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.welder-work-info-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.welder-work-info-text, .welder-work-info-img {
    flex: 1;
}

.welder-work-intro-card p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

.welder-work-img-box img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Section Header */
.welder-work-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.welder-work-section-header h2 {
    font-size: 32px;
    color: #1a202c;
    font-weight: 800;
}

.welder-work-header-line {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto;
}

/* Roles List Styling */
.welder-work-roles-grid {
    display: flex;
    gap: 40px;
}

.welder-work-roles-col {
    flex: 1;
}

.welder-role-item {
    background: #f8fafc;
    padding: 20px 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #ff5e14;
    transition: all 0.3s ease;
}

.welder-role-item:hover {
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateX(10px);
}

.welder-role-item h4 {
    font-size: 18px;
    color: #1a202c;
    font-weight: 700;
    margin-bottom: 8px;
}

.welder-role-item p {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .welder-work-info-row, .welder-work-roles-grid {
        flex-direction: column;
    }
    .welder-role-item:hover {
        transform: translateY(-5px);
    }
}

/* Welder Features & Industries Styling */
.welder-work-features-area {
    padding: 80px 0;
    background-color: #fcfcfc;
}

.welder-work-feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.welder-work-feature-row.reverse-row {
    flex-direction: row-reverse;
}

.welder-work-feature-text, .welder-work-feature-img {
    flex: 1;
}

.welder-work-feature-text h3 {
    font-size: 30px;
    color: #1a202c;
    margin-bottom: 25px;
    font-weight: 800;
}

.welder-work-check-list {
    list-style: none;
    padding: 0;
}

.welder-work-check-list li {
    font-size: 17px;
    color: #4a5568;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
}

.welder-work-check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ff5e14;
}

.welder-work-feature-img img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* Industry Grid Styling */
.welder-work-industries-box {
    background: #1a202c;
    padding: 60px 40px;
    border-radius: 20px;
    margin-bottom: 100px;
    color: #ffffff;
}

.welder-work-industries-box h2 {
    color: #ffffff;
}

.welder-work-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.industry-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.industry-item:hover {
    background: #ff5e14;
    border-color: #ff5e14;
    transform: translateY(-5px);
}

.industry-item span {
    font-weight: 600;
    font-size: 16px;
}

.welder-work-note {
    margin-top: 20px;
    font-style: italic;
    color: #718096;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .welder-work-feature-row, .welder-work-feature-row.reverse-row {
        flex-direction: column;
        gap: 40px;
    }
    .welder-work-industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .welder-work-industry-grid {
        grid-template-columns: 1fr;
    }
}

/* Welder Icon Grid Styling */
.welder-work-grid-area {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.welder-work-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.welder-work-card {
    background: #ffffff;
    padding: 35px 20px;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #edf2f7;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.welder-work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #ff5e14;
}

.welder-work-icon {

}

.welder-work-icon img {
    max-width: 100%;
    height: auto;
}

.welder-work-card h4 {
    font-size: 16px;
    color: #1a202c;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

/* Tablet & Mobile View */
@media (max-width: 1199px) {
    .welder-work-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .welder-work-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .welder-work-card {
        padding: 25px 15px;
    }
    .welder-work-card h4 {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .welder-work-grid-container {
        grid-template-columns: 1fr;
    }
}


/* Welder Final CTA Styling */
.welder-work-cta-area {
    padding: 100px 0;
    background-color: #ffffff;
}

.welder-work-cta-container {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border-radius: 25px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.welder-work-cta-row {
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.welder-work-cta-left {
    flex: 1;
}

.welder-work-cta-sub {
    color: #ff5e14;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.welder-work-cta-main-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.welder-work-cta-text {
    color: #d1d5db;
    font-size: 18px;
    line-height: 1.6;
}

.welder-work-cta-right {
    flex: 1;
}

.welder-work-cta-content-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.welder-work-cta-content-box h3 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.welder-work-cta-content-box p {
    color: #9ca3af;
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Final Button Styling */
.welder-work-final-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 18px 45px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 10px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(255, 94, 20, 0.3);
}

.welder-work-final-btn:hover {
    background-color: #ffffff;
    color: #ff5e14;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 991px) {
    .welder-work-cta-row {
        flex-direction: column;
        text-align: center;
    }
    .welder-work-cta-container {
        padding: 40px 25px;
    }
    .welder-work-cta-main-title {
        font-size: 32px;
    }
}


/* ===============############## Page: hvac-manpower.html ############=============== */

/* HVAC Page Specific Styles */
.hvac-manpower-hero {
    padding: 100px 0;
    background-color: #f0f7ff; /* Light Cool Blue Background */
    overflow: hidden;
}

.hvac-manpower-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hvac-manpower-hero-content {
    flex: 1;
}

.hvac-manpower-hero-image {
    flex: 1;
}

/* Typography */
.hvac-manpower-main-title {
    font-size: 46px;
    font-weight: 800;
    color: #1a202c;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hvac-manpower-divider {
    width: 80px;
    height: 5px;
    background: #ff5e14; /* Brand Orange */
    margin-bottom: 30px;
}

.hvac-manpower-sub-title {
    font-size: 24px;
    font-weight: 700;
    color: #2b6cb0; /* Professional Blue */
    margin-bottom: 20px;
}

.hvac-manpower-description p {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.8;
}

/* Button */
.hvac-manpower-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 16px 35px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px; /* Rounded pill style */
    text-transform: uppercase;
    margin-top: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

.hvac-manpower-btn:hover {
    background-color: #1a202c;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Image Styling */
.hvac-manpower-img-frame img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    border: 10px solid #ffffff;
}

/* Responsive Design */
@media (max-width: 991px) {
    .hvac-manpower-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .hvac-manpower-main-title {
        font-size: 34px;
    }

    .hvac-manpower-divider {
        margin: 0 auto 25px;
    }

    .hvac-manpower-hero-image {
        margin-top: 30px;
    }
}

/* HVAC Details & Features Styling */
.hvac-manpower-details-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.hvac-manpower-info-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

.hvac-manpower-info-text, .hvac-manpower-info-img {
    flex: 1;
}

.hvac-manpower-card-intro p {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.8;
    border-left: 5px solid #ff5e14;
    padding-left: 20px;
}

.hvac-manpower-info-img img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Section Header */
.hvac-manpower-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.hvac-manpower-section-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1a202c;
}

.hvac-manpower-header-line {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto;
}

/* Features Grid/Flex */
.hvac-manpower-features-row {
    display: flex;
    gap: 60px;
}

.hvac-manpower-features-left, .hvac-manpower-features-right {
    flex: 1;
}

/* Role Items */
.hvac-role-item {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2f7;
}

.hvac-role-item h4 {
    font-size: 19px;
    color: #2d3748;
    font-weight: 700;
    margin-bottom: 8px;
}

.hvac-role-item p {
    font-size: 16px;
    color: #718096;
    margin: 0;
}

/* Sub Boxes (Industries & Compliance) */
.hvac-sub-info-box, .hvac-compliance-box {
    background: #f7fafc;
    padding: 35px;
    border-radius: 15px;
    margin-top: 40px;
}

.hvac-compliance-box {
    background: #1a202c;
    color: #ffffff;
}

.hvac-sub-info-box h3, .hvac-compliance-box h3 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 700;
}

.hvac-compliance-box h3 { color: #ff5e14; }

/* Lists Styling */
.hvac-list-styled, .hvac-check-list {
    list-style: none;
    padding: 0;
}

.hvac-list-styled li, .hvac-check-list li {
    font-size: 16px;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

.hvac-list-styled li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #ff5e14;
    font-weight: bold;
}

.hvac-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #48bb78;
    font-weight: bold;
}

.hvac-side-image-stack img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 991px) {
    .hvac-manpower-info-row, .hvac-manpower-features-row {
        flex-direction: column;
    }
}

/* HVAC Why Choose & CTA Section */
.hvac-manpower-extra-area {
    padding: 100px 0;
    background-color: #f8fafc;
}

.hvac-manpower-feature-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.hvac-manpower-feature-text, .hvac-manpower-feature-img {
    flex: 1;
}

.hvac-section-header-left h2 {
    font-size: 30px;
    color: #1a202c;
    font-weight: 800;
    margin-bottom: 10px;
}

.hvac-header-line {
    width: 50px;
    height: 4px;
    background: #ff5e14;
    margin-bottom: 30px;
}

.hvac-feature-check-list {
    list-style: none;
    padding: 0;
}

.hvac-feature-check-list li {
    font-size: 17px;
    color: #4a5568;
    margin-bottom: 18px;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
}

.hvac-feature-check-list li::before {
    content: "\f058"; /* FontAwesome Check Circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #2b6cb0; /* HVAC Blue theme */
    font-size: 20px;
}

.hvac-img-frame img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* CTA Card Styling */
.hvac-manpower-cta-card {
    background: linear-gradient(135deg, #2b6cb0 0%, #1a365d 100%);
    padding: 60px;
    border-radius: 30px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(43, 108, 176, 0.3);
}

.hvac-cta-content h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
}

.hvac-cta-content p {
    font-size: 18px;
    margin-bottom: 35px;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hvac-btn-primary {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 18px 50px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.hvac-btn-primary:hover {
    background-color: #ffffff;
    color: #2b6cb0;
    transform: translateY(-5px);
}

/* Responsive */
@media (max-width: 991px) {
    .hvac-manpower-feature-row {
        flex-direction: column;
    }
    .hvac-manpower-cta-card {
        padding: 40px 20px;
    }
}

/* HVAC Quote Section Styling */
.hvac-manpower-quote-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.hvac-manpower-quote-wrapper {
    background: #1a202c; /* Deep Dark Background */
    border-radius: 30px;
    padding: 70px 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Background Accent (Optional Design Element) */
.hvac-manpower-quote-wrapper::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 94, 20, 0.1);
    border-radius: 50%;
}

.hvac-manpower-quote-row {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.hvac-manpower-quote-left, .hvac-manpower-quote-right {
    flex: 1;
}

/* Left Side Typography */
.hvac-quote-sub {
    color: #ff5e14;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.hvac-quote-title {
    color: #ffffff;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
}

.hvac-quote-desc {
    color: #a0aec0;
    font-size: 18px;
    line-height: 1.6;
}

/* Right Side Card */
.hvac-hire-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hvac-hire-card h3 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 700;
}

.hvac-hire-card p {
    color: #cbd5e0;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.hvac-cta-bold {
    color: #ff5e14 !important;
}

/* Button Styling */
.hvac-quote-btn {
    display: inline-block;
    background-color: #ff5e14;
    color: #ffffff;
    padding: 18px 40px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
}

.hvac-quote-btn:hover {
    background-color: #ffffff;
    color: #1a202c;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 991px) {
    .hvac-manpower-quote-row {
        flex-direction: column;
        text-align: center;
    }
    .hvac-quote-title {
        font-size: 32px;
    }
    .hvac-manpower-quote-wrapper {
        padding: 50px 25px;
    }
}



/* ===============############## Page: equipment-rental.html ############=============== */

/* Equipment Rental Page Hero Styling */
.equipment-rental-hero {
    padding: 100px 0;
    background-color: #ffffff; /* Clean White Background */
    position: relative;
}

.equipment-rental-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.equipment-rental-hero-content {
    flex: 1;
}

.equipment-rental-hero-image {
    flex: 1;
}

/* Typography Styles */
.equipment-rental-main-title {
    font-size: 52px;
    font-weight: 900;
    color: #111827;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

.equipment-rental-underline {
    width: 100px;
    height: 6px;
    background-color: #ff5e14; /* Brand Orange */
    margin: 20px 0;
}

.equipment-rental-slogan p {
    font-size: 22px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 25px;
}

.equipment-rental-intro-text p {
    font-size: 18px;
    color: #6b7280;
    line-height: 1.8;
}

/* Button Styling */
.equipment-rental-main-btn {
    display: inline-block;
    background-color: #111827;
    color: #ffffff;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    text-transform: uppercase;
    margin-top: 30px;
    transition: all 0.3s ease;
    border: 2px solid #111827;
}

.equipment-rental-main-btn:hover {
    background-color: #ff5e14;
    border-color: #ff5e14;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.2);
}

/* Image Container Styling */
.equipment-rental-img-container img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    border: 10px solid #ffffff;
}

.equipment-rental-img-container img:hover {
    transform: translate(5px, 5px);
    box-shadow: 10px 10px 0px #ff5e14;
}

/* Responsive Design */
@media (max-width: 991px) {
    .equipment-rental-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .equipment-rental-main-title {
        font-size: 38px;
    }

    .equipment-rental-underline {
        margin: 20px auto;
    }

    .equipment-rental-img-container img {
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }
}


/* Equipment Details & Benefits Styling */
.equipment-rental-details-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.equipment-rental-info-row, 
.equipment-rental-benefits-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.equipment-rental-benefits-row {
    flex-direction: row-reverse; /* Alternating Layout */
}

.equipment-rental-info-text, 
.equipment-rental-info-img,
.equipment-rental-benefits-text,
.equipment-rental-benefits-img {
    flex: 1;
}

/* Typography */
.equipment-rental-details-area h3 {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 25px;
    line-height: 1.3;
}

.equipment-rental-details-area p {
    font-size: 18px;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* List Styling */
.equipment-rental-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.equipment-rental-list li {
    font-size: 17px;
    color: #374151;
    margin-bottom: 20px;
    padding-left: 30px;
    position: relative;
}

.equipment-rental-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff5e14;
    font-weight: 900;
    font-size: 20px;
}

.equipment-rental-list strong {
    color: #111827;
    display: block;
    margin-bottom: 3px;
}

/* Image Effects */
.equipment-rental-info-img img,
.equipment-rental-benefits-img img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.equipment-rental-img-frame {
    position: relative;
}

.equipment-rental-img-frame::after {
    content: "";
    position: absolute;
    top: -15px;
    right: -15px;
    width: 100%;
    height: 100%;
    border: 2px solid #ff5e14;
    border-radius: 15px;
    z-index: -1;
}

/* Responsive */
@media (max-width: 991px) {
    .equipment-rental-info-row, 
    .equipment-rental-benefits-row {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        margin-bottom: 60px;
    }
    
    .equipment-rental-list li {
        text-align: left;
    }
    
    .equipment-rental-details-area h3 {
        font-size: 26px;
    }
}

/* Equipment Categories Grid Styling */
.equipment-rental-categories-area {
    padding: 80px 0;
    background-color: #f9fafb;
}

.equipment-rental-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.equipment-rental-section-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #111827;
}

.equipment-rental-header-line {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto;
}

/* Grid Layout */
.equipment-rental-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card Styling */
.equipment-rental-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.equipment-rental-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: #ff5e14;
}

.equipment-card-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.equipment-rental-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
}

.equipment-rental-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.equipment-rental-card ul li {
    font-size: 16px;
    color: #4b5563;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.equipment-rental-card ul li:last-child {
    border-bottom: none;
}

/* Highlight Card Style */
.equipment-highlight-card {
    background-color: #111827;
    color: #ffffff;
}

.equipment-highlight-card h4 {
    color: #ffffff;
}

.equipment-highlight-card ul li {
    color: #d1d5db;
    border-bottom-color: rgba(255,255,255,0.1);
}

.equipment-card-desc {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 991px) {
    .equipment-rental-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .equipment-rental-grid {
        grid-template-columns: 1fr;
    }
}

/* Insights Section Styling */
.equipment-rental-insights-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.equipment-rental-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.equipment-insight-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.equipment-insight-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.equipment-insight-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.equipment-insight-content {
    padding: 25px;
}

.equipment-insight-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
    height: 50px; /* Fixed height for alignment */
    overflow: hidden;
}

.equipment-insight-content p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Read More Link Styling */
.equipment-read-more {
    display: inline-block;
    color: #ff5e14;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.equipment-read-more:hover {
    border-bottom-color: #ff5e14;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 1200px) {
    .equipment-rental-insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .equipment-rental-insights-grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ Section Styling */
.equipment-rental-faq-area {
    padding: 80px 0;
    background-color: #f8fafc;
}

.equipment-rental-faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.equipment-faq-item {
    background: #ffffff;
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    border: 1px solid #e2e8f0;
}

.equipment-faq-question {
    width: 100%;
    padding: 20px 25px;
    background: #ffffff;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.equipment-faq-question:hover {
    color: #ff5e14;
}

.faq-icon {
    font-size: 24px;
    color: #ff5e14;
    transition: transform 0.3s ease;
}

/* Hidden Answer Part */
.equipment-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #ffffff;
}

.equipment-faq-answer p {
    padding: 0 25px 20px 25px;
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Active State Styles */
.equipment-faq-item.active .equipment-faq-answer {
    max-height: 200px; /* Adjust based on content */
}

.equipment-faq-item.active .faq-icon {
    transform: rotate(45deg); /* Turns + into x */
}

.equipment-faq-item.active .equipment-faq-question {
    color: #ff5e14;
}



/* Equipment Card Image Styling */
.equipment-card-image {
    margin-bottom: 20px;
    text-align: center;
}

.equipment-card-image img {
    width: 100%; /* আপনার প্রয়োজন অনুযায়ী সাইজ কমিয়ে বা বাড়িয়ে নিতে পারেন */
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* হোভার ইফেক্ট (ঐচ্ছিক) */
.equipment-rental-card:hover .equipment-card-image img {
    transform: scale(1.1);
}


/* ===============############## Page: hse-officer.html ############=============== */

/* HSE Officer Hero Styling */
.hse-officer-hero {
    padding: 100px 0;
    background: linear-gradient(to right, #ffffff 50%, #f0f7ff 100%);
    overflow: hidden;
}

.hse-officer-hero-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.hse-officer-hero-content {
    flex: 1.2;
}

.hse-officer-hero-image {
    flex: 0.8;
}

/* Typography & Elements */
.hse-officer-badge {
    display: inline-block;
    background: #e1effe;
    color: #1e40af;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hse-officer-main-title {
    font-size: 48px;
    font-weight: 800;
    color: #1a202c;
    line-height: 1.2;
    margin-bottom: 15px;
}

.hse-officer-divider {
    width: 80px;
    height: 5px;
    background: #ff5e14;
    margin-bottom: 25px;
}

.hse-officer-sub-title {
    font-size: 24px;
    color: #2b6cb0;
    font-weight: 600;
    margin-bottom: 20px;
}

.hse-officer-description {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* Buttons */
.hse-officer-cta-group {
    display: flex;
    gap: 20px;
}

.hse-officer-btn-primary {
    background: #1e40af; /* Safety Blue */
    color: #ffffff;
    padding: 16px 35px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hse-officer-btn-outline {
    border: 2px solid #1e40af;
    color: #1e40af;
    padding: 14px 35px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hse-officer-btn-primary:hover {
    background: #ff5e14;
    transform: translateY(-3px);
}

.hse-officer-btn-outline:hover {
    background: #1e40af;
    color: #fff;
}

/* Image Wrapper */
.hse-officer-img-wrapper {
    position: relative;
}

.hse-officer-img-wrapper img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.hse-officer-experience-tag {
    position: absolute;
    bottom: 20px;
    right: -20px;
    background: #ff5e14;
    color: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .hse-officer-hero-row {
        flex-direction: column;
        text-align: center;
    }
    .hse-officer-main-title {
        font-size: 36px;
    }
    .hse-officer-divider {
        margin: 0 auto 25px;
    }
    .hse-officer-cta-group {
        justify-content: center;
    }
    .hse-officer-experience-tag {
        position: static;
        margin-top: 20px;
        display: inline-block;
    }
}

/* HSE Details & Roles Area */
.hse-officer-details-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.hse-officer-info-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.hse-officer-info-text, .hse-officer-info-img {
    flex: 1;
}

.hse-sub-heading {
    font-size: 28px;
    font-weight: 800;
    color: #1a365d;
    margin-bottom: 20px;
}

.hse-officer-info-text p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Center Header Styling */
.hse-center-header {
    text-align: center;
    margin-bottom: 60px;
}

.hse-center-header h2 {
    font-size: 34px;
    font-weight: 800;
    color: #1a202c;
}

.hse-header-line {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto;
}

/* Roles Row Styling */
.hse-officer-roles-row {
    display: flex;
    gap: 50px;
    background: #f8fafc;
    padding: 50px;
    border-radius: 30px;
    align-items: flex-start;
}

.hse-roles-image {
    flex: 0.8;
}

.hse-roles-image img {
    width: 100%;
    border-radius: 20px;
}

.hse-roles-content {
    flex: 1.2;
}

.hse-roles-intro {
    font-size: 18px;
    color: #2d3748;
    margin-bottom: 30px;
    font-weight: 500;
}

/* Specialist Grid */
.hse-specialist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.hse-specialist-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #ff5e14;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.hse-specialist-item strong {
    display: block;
    font-size: 18px;
    color: #1e40af;
    margin-bottom: 5px;
}

.hse-specialist-item p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .hse-officer-info-row, .hse-officer-roles-row {
        flex-direction: column;
        padding: 25px;
    }
    .hse-specialist-grid {
        grid-template-columns: 1fr;
    }
}

/* HSE Category & Why Choose Styling */
.hse-officer-list-area {
    padding: 80px 0;
    background-color: #fcfcfc;
}

.hse-officer-header {
    text-align: center;
    margin-bottom: 50px;
}

.hse-officer-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #1a202c;
}

/* Category Grid */
.hse-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.hse-cat-item {
    background: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 12px;
    font-weight: 700;
    color: #1e40af; /* Safety Blue */
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.hse-cat-item:hover {
    background: #1e40af;
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(30, 64, 175, 0.2);
}

/* Why Choose Us Row */
.hse-officer-why-row {
    display: flex;
    align-items: center;
    gap: 60px;
    background: #ffffff;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.hse-why-text, .hse-why-img {
    flex: 1;
}

.hse-why-text h3 {
    font-size: 30px;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 25px;
}

.hse-why-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.hse-why-list li {
    font-size: 17px;
    color: #4a5568;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
}

.hse-why-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff5e14;
    font-weight: 900;
    font-size: 20px;
}

/* CTA Button */
.hse-cta-button {
    display: inline-block;
    background: #ff5e14;
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s;
}

.hse-cta-button:hover {
    background: #1a202c;
    transform: scale(1.05);
}

.hse-img-frame img {
    width: 100%;
    border-radius: 20px;
}

/* Responsive */
@media (max-width: 991px) {
    .hse-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hse-officer-why-row {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }
    .hse-why-list li {
        text-align: left;
    }
}

@media (max-width: 575px) {
    .hse-category-grid {
        grid-template-columns: 1fr;
    }
}


/* ===============############## Page: qc.html ############=============== */

/* QC Hero Styling */
.qc-hero-area {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.qc-hero-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.qc-hero-content, .qc-hero-image {
    flex: 1;
}

/* Badge & Typography */
.qc-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #0f172a;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
    border: 1px solid #e2e8f0;
}

.qc-main-title {
    font-size: 44px;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.qc-divider {
    width: 70px;
    height: 6px;
    background: #ff5e14; /* Brand Color */
    margin-bottom: 30px;
}

.qc-description {
    font-size: 18px;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Feature Mini List */
.qc-features {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}

.qc-feat-item {
    font-weight: 700;
    color: #111827;
    font-size: 16px;
}

.qc-feat-item span {
    color: #ff5e14;
    margin-right: 8px;
}

/* Buttons */
.qc-cta-group {
    display: flex;
    gap: 20px;
}

.qc-btn-primary {
    background: #111827;
    color: #ffffff;
    padding: 16px 35px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.qc-btn-outline {
    border: 2px solid #111827;
    color: #111827;
    padding: 14px 35px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.qc-btn-primary:hover {
    background: #ff5e14;
    transform: translateY(-3px);
}

.qc-btn-outline:hover {
    background: #111827;
    color: #fff;
}

/* Image Section */
.qc-img-container {
    position: relative;
}

.qc-img-container img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.15);
}

.qc-experience-card {
    position: absolute;
    top: 30px;
    left: -30px;
    background: #ff5e14;
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(255, 94, 20, 0.3);
}

.qc-experience-card h4 {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
}

.qc-experience-card p {
    font-size: 12px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 991px) {
    .qc-hero-row {
        flex-direction: column;
        text-align: center;
    }
    .qc-main-title {
        font-size: 32px;
    }
    .qc-divider {
        margin: 0 auto 30px;
    }
    .qc-features {
        justify-content: center;
    }
    .qc-cta-group {
        justify-content: center;
    }
    .qc-experience-card {
        position: static;
        margin: 20px auto 0;
        display: inline-block;
    }
}

/* QC Details & Roles Styling */
.qc-details-area {
    padding: 80px 0;
    background-color: #ffffff;
}

.qc-info-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}

.qc-info-content {
    flex: 1.2;
}

.qc-sub-heading {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
}

.qc-info-content p {
    font-size: 17px;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 15px;
}

.qc-info-image {
    flex: 0.8;
}

.qc-info-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Center Header */
.qc-center-header {
    text-align: center;
    margin-bottom: 50px;
}

.qc-center-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
}

.qc-header-line {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto;
}

/* Roles Grid Wrapper */
.qc-roles-grid-wrapper {
    display: flex;
    gap: 40px;
    background: #f8fafc;
    padding: 50px;
    border-radius: 30px;
    align-items: center;
}

.qc-roles-list-box {
    flex: 1.3;
}

.qc-roles-list-box h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 30px;
}

.qc-roles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.qc-role-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #ff5e14;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    transition: 0.3s;
}

.qc-role-card:hover {
    transform: translateX(10px);
    background: #fff7f2;
}

.qc-role-card strong {
    display: block;
    font-size: 16px;
    color: #111827;
    margin-bottom: 5px;
}

.qc-role-card p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.qc-roles-image-box {
    flex: 0.7;
}

.qc-roles-image-box img {
    width: 100%;
    border-radius: 15px;
}

/* Responsive */
@media (max-width: 991px) {
    .qc-info-row, .qc-roles-grid-wrapper {
        flex-direction: column;
        padding: 30px 20px;
    }
    .qc-roles-grid {
        grid-template-columns: 1fr;
    }
}

/* QC Service Icon Grid Styling */
.qc-icon-grid-area {
    padding: 60px 0 100px;
    background-color: #ffffff;
}

.qc-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.qc-service-item {
    background: #ffffff;
    padding: 40px 20px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #f1f5f9;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.qc-service-item:hover {
    transform: translateY(-12px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #ff5e14;
}

.qc-service-icon {
    width: 80px;
    height: 80px;
    background: #fdf2ed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.qc-service-item:hover .qc-service-icon {
    background: #ff5e14;
}

.qc-service-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.qc-service-item:hover .qc-service-icon img {
    filter: brightness(0) invert(1); /* আইকন সাদা হয়ে যাবে হোভারে */
}

.qc-service-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    transition: all 0.3s ease;
}

.qc-service-item:hover h4 {
    color: #ff5e14;
}

/* Responsive */
@media (max-width: 1024px) {
    .qc-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .qc-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .qc-grid-container {
        grid-template-columns: 1fr;
    }
    .qc-service-item {
        padding: 30px 15px;
    }
}

/* QC Contact CTA Styling */
.qc-contact-cta-area {
    padding: 100px 0;
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%); /* Dark Industrial Theme */
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Decorative Background Element */
.qc-contact-cta-area::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 94, 20, 0.1);
    border-radius: 50%;
}

.qc-cta-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.qc-cta-content, .qc-cta-action-box {
    flex: 1;
}

.qc-cta-badge {
    color: #ff5e14;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

.qc-cta-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
}

.qc-cta-desc {
    font-size: 18px;
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Action Box Styling */
.qc-cta-action-box {
    background: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.qc-action-heading {
    color: #111827;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
}

.qc-action-text {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* Button */
.qc-main-btn {
    display: inline-block;
    background: #ff5e14;
    color: #ffffff;
    padding: 18px 50px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.3);
}

.qc-main-btn:hover {
    background: #111827;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 991px) {
    .qc-cta-row {
        flex-direction: column;
        text-align: center;
    }
    .qc-cta-title {
        font-size: 32px;
    }
    .qc-cta-action-box {
        padding: 30px 20px;
    }
}


/* ===============############## Page: office-staff.html ############=============== */

/* Office Staff Hero Styling */
.office-staff-hero-area {
    padding: 100px 0;
    background-color: #f8fafc;
    overflow: hidden;
}

.office-staff-hero-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.office-staff-hero-content {
    flex: 1;
}

.office-staff-main-title {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.office-staff-divider {
    width: 80px;
    height: 5px;
    background: #ff5e14;
    margin-bottom: 25px;
}

.office-staff-subtitle {
    font-size: 18px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 35px;
}

.office-staff-primary-btn {
    display: inline-block;
    padding: 15px 40px;
    background: #1e40af;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.office-staff-primary-btn:hover {
    background: #ff5e14;
    transform: translateY(-3px);
}

/* Image Styling */
.office-staff-hero-image {
    flex: 1;
}

.office-staff-img-wrapper {
    position: relative;
}

.office-staff-img-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.office-staff-experience-badge {
    position: absolute;
    bottom: 20px;
    left: -20px;
    background: #ff5e14;
    color: #fff;
    padding: 15px 25px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(255, 94, 20, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .office-staff-hero-row {
        flex-direction: column;
        text-align: center;
    }
    
    .office-staff-divider {
        margin: 0 auto 25px;
    }
    
    .office-staff-main-title {
        font-size: 34px;
    }
    
    .office-staff-experience-badge {
        position: relative;
        left: 0;
        margin-top: 20px;
        display: inline-block;
    }
}


/* Office Staff Info Section */
.office-staff-info-area {
    padding: 80px 0;
    background: #ffffff;
}

.office-staff-info-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.office-staff-info-text {
    flex: 1.2;
}

.office-staff-sub-heading {
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
}

.office-staff-info-text p {
    font-size: 17px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 20px;
}

.office-staff-info-img {
    flex: 0.8;
}

.office-staff-info-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

/* Categories Section */
.office-staff-categories-area {
    padding: 80px 0;
    background: #f1f5f9;
}

.office-staff-center-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.office-staff-center-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
}

.office-staff-header-line {
    width: 60px;
    height: 4px;
    background: #ff5e14;
    margin: 15px auto 25px;
}

/* Roles Layout */
.office-staff-cat-row {
    display: flex;
    gap: 40px;
}

.office-staff-list-wrapper {
    flex: 1.4;
}

.office-staff-list-wrapper h3 {
    font-size: 22px;
    color: #1e40af;
    margin-bottom: 10px;
}

.office-staff-roles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.office-staff-role-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border-bottom: 3px solid #e2e8f0;
    transition: 0.3s;
}

.office-staff-role-item:hover {
    border-color: #ff5e14;
    transform: translateY(-5px);
}

.office-staff-role-item strong {
    display: block;
    font-size: 16px;
    color: #0f172a;
    margin-bottom: 5px;
}

.office-staff-role-item span {
    font-size: 14px;
    color: #64748b;
}

/* Side Card */
.office-staff-side-content {
    flex: 0.6;
}

.office-staff-side-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.office-staff-side-card img {
    width: 100%;
}

.office-staff-card-body {
    padding: 30px;
}

.office-staff-card-body p {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .office-staff-info-row, .office-staff-cat-row {
        flex-direction: column;
    }
    .office-staff-roles-grid {
        grid-template-columns: 1fr;
    }
}


/* Office Staff Icon Grid Styling */
.office-staff-icon-grid-area {
    padding: 60px 0 100px;
    background-color: #ffffff;
}

.office-staff-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.office-staff-item {
    background: #ffffff;
    padding: 35px 20px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #edf2f7;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.office-staff-item:hover {
    transform: translateY(-8px);
    border-color: #1e40af; /* Corporate Blue */
    box-shadow: 0 15px 30px rgba(30, 64, 175, 0.1);
}

.office-staff-icon {
    width: 70px;
    height: 70px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    transition: all 0.3s ease;
}

.office-staff-item:hover .office-staff-icon {
    background: #1e40af;
}

.office-staff-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.office-staff-item:hover .office-staff-icon img {
    filter: brightness(0) invert(1);
}

.office-staff-item h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.office-staff-item:hover h4 {
    color: #1e40af;
}

/* Responsive */
@media (max-width: 991px) {
    .office-staff-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .office-staff-grid-container {
        grid-template-columns: 1fr;
    }
}


/* ===============############## Page: Contact.html ############=============== */


/* Contact Hero Styling */
.contact-hero-area {
    padding: 100px 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.contact-hero-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.contact-hero-content {
    flex: 1;
}

.contact-main-title {
    font-size: 56px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.contact-divider {
    width: 60px;
    height: 5px;
    background: #ff5e14;
    margin-bottom: 25px;
}

.contact-subtitle {
    font-size: 18px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 30px;
}

.contact-breadcrumb {
    font-size: 14px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-breadcrumb .active {
    color: #ff5e14;
}

/* Image Frame Styling */
.contact-hero-image {
    flex: 1;
}

.contact-img-frame {
    position: relative;
    z-index: 1;
}

.contact-img-frame img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.contact-shape-overlay {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid #ff5e14;
    border-radius: 30px;
    z-index: -1;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-hero-row {
        flex-direction: column-reverse;
        text-align: center;
    }
    
    .contact-divider {
        margin: 0 auto 25px;
    }
    
    .contact-main-title {
        font-size: 40px;
    }
    
    .contact-shape-overlay {
        display: none;
    }
}


/* ===============############## Page: About-Us.html ############=============== */

/* About Us Hero Styling */
.about-us-hero {
    padding: 100px 0;
    background-color: #fcfdfe;
    overflow: hidden;
}

.about-us-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-us-col-content {
    flex: 1.2;
}

.about-us-title {
    font-size: 52px;
    font-weight: 900;
    color: #1a202c;
    line-height: 1.1;
    margin-bottom: 20px;
}

.about-us-title span {
    color: #ff5e14;
}

.about-us-divider {
    width: 70px;
    height: 5px;
    background: #1e40af;
    margin-bottom: 30px;
}

.about-us-description p {
    font-size: 17px;
    color: #4a5568;
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-us-legal-box {
    background: #f1f5f9;
    padding: 20px;
    border-left: 4px solid #1e40af;
    border-radius: 0 12px 12px 0;
    margin-top: 25px;
}

.about-us-legal-box p {
    font-size: 15px;
    margin-bottom: 0;
    font-style: italic;
    color: #2d3748;
}

.about-us-btn {
    display: inline-block;
    padding: 14px 35px;
    background: #1e40af;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s ease;
    margin-top: 20px;
}

.about-us-btn:hover {
    background: #ff5e14;
    transform: translateY(-3px);
}

/* Image Section Styling */
.about-us-col-image {
    flex: 0.8;
}

.about-us-img-frame {
    position: relative;
}

.about-us-main-img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.about-us-experience-card {
    position: absolute;
    bottom: -25px;
    left: -25px;
    background: #ff5e14;
    color: #fff;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(255, 94, 20, 0.3);
}

.about-us-experience-card h3 {
    font-size: 20px;
    margin: 0;
}

.about-us-experience-card p {
    font-size: 14px;
    margin: 5px 0 0;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 991px) {
    .about-us-row {
        flex-direction: column;
        text-align: center;
    }
    
    .about-us-divider {
        margin: 0 auto 30px;
    }
    
    .about-us-title {
        font-size: 38px;
    }
    
    .about-us-experience-card {
        position: relative;
        left: 0;
        bottom: 0;
        margin-top: 30px;
        display: inline-block;
    }
}
/* ===== Responsive Hardening Patch (May 2026) ===== */
@media (max-width: 991px) {
    body {
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .top-bar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .contact-info span {
        display: block;
        margin-right: 0;
    }

    header .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    nav {
        width: 100%;
    }

    nav ul {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    nav ul li {
        padding: 0;
    }

    nav ul li a {
        display: block;
        padding: 8px 10px;
        font-size: 12px;
        border: 1px solid #eee;
        border-radius: 4px;
        background: #fff;
    }

    nav ul li ul.sub-menu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        box-shadow: none;
        border-top: 0;
        border-left: 2px solid #ff5e14;
        margin-top: 6px;
        padding: 6px 0 0 10px;
        background: transparent;
    }

    nav ul li:hover > ul.sub-menu,
    nav ul li:focus-within > ul.sub-menu {
        display: flex;
    }

    nav ul li ul.sub-menu li a {
        border: 0;
        padding: 8px 6px;
        background: transparent;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .cta-flex {
        flex-direction: column;
        gap: 24px;
    }

    .contact-flex-container {
        flex-direction: column;
    }

    .contact-image-column,
    .contact-form-column,
    .about-text,
    .about-image,
    .grid-column {
        min-width: 100%;
    }

    .contact-form-column {
        padding: 24px;
    }

    .sub-hero-wrapper {
        gap: 24px;
    }

    .sub-hero-accent {
        width: 320px;
        height: 320px;
        top: -120px;
        right: -140px;
    }

    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 767px) {
    nav ul {
        flex-direction: column;
        align-items: stretch;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li a {
        width: 100%;
    }
}

/* ===== Mobile Grid Safety Patch (May 2026) ===== */
@media (max-width: 767px) {
    .category-grid,
    .service-grid,
    .services-wrapper,
    .strength-grid,
    .legal-grid,
    .steps-grid,
    .footer-grid,
    .sub-selection-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .category-grid > *,
    .service-grid > *,
    .services-wrapper > *,
    .strength-grid > *,
    .legal-grid > *,
    .steps-grid > *,
    .footer-grid > *,
    .sub-selection-grid > * {
        min-width: 0;
    }

    .cat-item,
    .service-card,
    .strength-card,
    .legal-card,
    .selection-item {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ===== Local Map Placeholder (May 2026) ===== */
.map-local-placeholder {
    min-height: 450px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.map-local-content {
    max-width: 560px;
    text-align: center;
    color: #fff;
}

.map-local-content i {
    font-size: 48px;
    color: #ff5e14;
    margin-bottom: 16px;
}

.map-local-content h3 {
    font-size: 30px;
    margin-bottom: 12px;
    color: #fff;
}

.map-local-content p {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
}

.map-open-btn {
    display: inline-block;
    background: #ff5e14;
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    transition: background 0.3s ease;
}

.map-open-btn:hover {
    background: #e04d0d;
}

@media (max-width: 767px) {
    .map-local-placeholder {
        min-height: 320px;
        padding: 20px;
    }

    .map-local-content h3 {
        font-size: 24px;
    }

    .map-local-content p {
        font-size: 14px;
    }
}

/* ===== Sitewide Mobile Stabilizer (May 2026 v2) ===== */
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 991px) {
    body {
        overflow-x: clip;
    }

    .container {
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .top-bar {
        padding: 8px 0;
    }

    .top-bar .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .contact-info span {
        margin-right: 0;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }

    header {
        padding: 10px 0;
    }

    header .container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .logo h1 {
        font-size: 22px;
        line-height: 1.1;
    }

    .slogan {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #1f2937;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        min-height: 42px;
    }

    .mobile-menu-bar {
        display: block;
        width: 16px;
        height: 2px;
        background: #1f2937;
        border-radius: 2px;
    }

    .mobile-menu-text {
        letter-spacing: 0.5px;
    }

    #top-menu-nav {
        width: 100%;
        order: 3;
    }

    #top-menu-nav #top-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 8px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

    header.mobile-nav-open #top-menu-nav #top-menu {
        display: flex;
    }

    #top-menu-nav #top-menu > li {
        width: 100%;
        padding: 0;
        border-bottom: 1px solid #f1f5f9;
    }

    #top-menu-nav #top-menu > li:last-child {
        border-bottom: 0;
    }

    #top-menu-nav #top-menu > li > a {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        font-size: 13px;
        border: 0;
        border-radius: 0;
        background: #ffffff;
        line-height: 1.35;
        text-align: left;
    }

    #top-menu-nav #top-menu > li > a .fa-chevron-down {
        font-size: 11px;
        transition: transform 0.2s ease;
    }

    #top-menu-nav #top-menu > li.submenu-open > a .fa-chevron-down {
        transform: rotate(180deg);
    }

    #top-menu-nav #top-menu > li:hover > ul.sub-menu {
        display: none !important;
    }

    #top-menu-nav #top-menu > li.submenu-open > ul.sub-menu {
        display: flex !important;
    }

    #top-menu-nav #top-menu li ul.sub-menu {
        display: none !important;
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 6px 0;
        background: #f8fafc;
        border-top: 1px solid #e5e7eb;
        border-left: 0;
        box-shadow: none;
        flex-direction: column;
    }

    #top-menu-nav #top-menu li ul.sub-menu li a {
        display: block;
        width: 100%;
        padding: 10px 16px;
        border: 0;
        background: transparent;
        font-size: 13px;
        line-height: 1.4;
    }

    #top-menu-nav #top-menu li ul.sub-menu li a:hover {
        padding-left: 16px;
    }

    .btn-profile {
        justify-content: center;
    }

    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 767px) {
    [class*="-row"] {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .contact-hero-row {
        flex-direction: column-reverse !important;
    }

    [class*="-grid"] {
        grid-template-columns: 1fr !important;
    }

    .hse-officer-cta-group,
    .sub-hero-btns,
    .hvac-manpower-hero-btn-group,
    .civil-const-btn-group,
    .electrical-hero-buttons,
    .welder-work-cta-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hse-officer-btn-primary,
    .hse-officer-btn-outline,
    .btn,
    .btn-hero,
    .office-staff-primary-btn,
    .hse-cta-button,
    .qc-main-btn,
    .hvac-quote-btn,
    .civil-const-btn,
    .contact-main-btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    h1,
    h2,
    h3 {
        word-break: break-word;
    }

    .hero,
    .et_pb_section_0 {
        min-height: auto;
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

/* ===== Extra Mobile Wrapper Safety (May 2026) ===== */
@media (max-width: 767px) {
    [class*="-wrapper"],
    [class*="-flex"] {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .image-wrapper,
    .hse-officer-img-wrapper,
    .about-us-img-frame,
    .contact-img-frame {
        min-height: 0;
    }
}

/* ===== Header Mobile Inline + Hamburger Only (May 2026) ===== */
@media (max-width: 991px) {
    .top-bar .container {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .contact-info {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .contact-info span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-right: 0;
        white-space: nowrap;
    }

    .mobile-menu-toggle {
        width: 46px;
        min-width: 46px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        gap: 4px;
        flex-direction: column;
    }

    .mobile-menu-text {
        display: none !important;
    }

    .mobile-menu-bar {
        width: 18px;
        height: 2px;
    }
}

@media (max-width: 575px) {
    .contact-info span {
        font-size: 11px;
    }
}