:root {
    /* PowerPack Brand Colors */
    --primary-blue: #0D1B5D;
    /* Deep Navy */
    --secondary-blue: #20B2E8;
    /* Cyan/Sky Blue */
    --white: #FFFFFF;
    --light-grey: #F5F7FA;
    --dark-text: #1A1A1A;
    --text-muted: #666666;
    --border-color: #E6E6E6;

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Dimensions */
    --header-height: 80px;
    --container-width: 1200px;

    /* Transitions */
    --transition: all 0.3s ease;
}

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

body {
    font-family: var(--font-body);
    color: var(--dark-text);
    line-height: 1.6;
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utility */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--light-grey);
}

.text-center {
    text-align: center;
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--secondary-blue);
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    border: 2px solid var(--secondary-blue);
    cursor: pointer;
}

.btn:hover {
    background-color: transparent;
    color: var(--secondary-blue);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-blue);
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(13, 27, 93, 0.95);
    backdrop-filter: blur(10px);
    height: var(--header-height);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

header .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* For mobile menu positioning */
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1001;
    /* Ensure logo stays above mobile menu */
}

header nav {
    display: flex;
    align-items: center;
}

.logo img {
    height: 50px;
}

.logo h2 {
    color: var(--white);
    margin: 0;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--white);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--secondary-blue);
    transition: var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
}

/* Mobile Header Styles */
@media (max-width: 900px) {
    .mobile-menu-btn {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        /* Slide out by default */
        width: 100%;
        height: 100vh;
        background-color: var(--primary-blue);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: var(--transition);
        padding-top: var(--header-height);
        /* Space for header */
    }

    .nav-links.active {
        right: 0;
        /* Slide in */
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .header-cta {
        display: none !important;
        /* Hide Get Quote button in header on mobile if inside nav-links, or handle carefully. 
                                     The existing HTML puts .header-cta OUTSIDE .nav-links but inside nav. 
                                     We might need to adjust HTML to put it inside menu or keep it visible. 
                                     For now, let's keep it visible on tablet but maybe hide on very small mobile?
                                     Actually, usually you want CTA in the menu. 
                                     Let's hide the separate CTA div on mobile and add a CTA link to the menu in HTML? 
                                     Or just move the CTA into .nav-links in HTML. 
                                     Current plan: Keep existing, but user might want it clean. 
                                     Let's see. HTML Structure: nav > .nav-links + .header-cta.
                                     Mobile menu only targets .nav-links. 
                                     I will move .header-cta into .nav-links in the HTML step. */
    }
}

/* Hero Section with Video */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
    overflow: hidden;
    margin-top: 0;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(13, 27, 93, 0.7), rgba(13, 27, 93, 0.5));
    z-index: -1;
}

.hero h1 {
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 40px;
    max-width: 600px;
    opacity: 0.9;
}

.hero-btns {
    display: flex;
    gap: 20px;
}

/* Sections */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--primary-blue);
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--secondary-blue);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    padding: 0;
    /* Remove padding to let image sit flush if desired, or keep padding and use inner container */
    padding-bottom: 40px;
    /* Keep padding at bottom */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border-bottom: 3px solid transparent;
    transition: var(--transition);
    overflow: hidden;
    /* For image */
}

.service-card:hover {
    transform: translateY(-10px);
    border-bottom-color: var(--secondary-blue);
}

.service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    margin-bottom: 20px;
}

.service-content {
    padding: 0 40px;
}

.service-icon {
    font-size: 2.5rem;
    color: var(--secondary-blue);
    margin-bottom: 20px;
    display: inline-block;
}

.service-card h3 {
    margin-bottom: 15px;
    color: var(--primary-blue);
}

.service-card.basic {
    padding: 40px;
}

/* Footer */
footer {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* CTA Redesign */
.cta-rounded {
    background-color: var(--secondary-blue) !important;
    /* Cyan */
    border-radius: 20px;
    width: 60%;
    margin: 40px auto;
    padding: 30px;
    /* Reduced padding */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    .cta-rounded {
        width: 90%;
        border-radius: 20px;
        padding: 30px 20px;
    }
}

/* Hero Slider */
.hero {
    position: relative;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out;
    overflow: hidden;
}

.hero-slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slider-img.active {
    opacity: 1;
}

/* Beliefs & Values Section */
.beliefs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.belief-card {
    display: flex;
    align-items: center;
    text-align: left;
    background-color: var(--white);
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #EFF1F5;
    transition: var(--transition);
}

.belief-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.belief-icon-box {
    width: 45px;
    height: 45px;
    background-color: #E0F2FE;
    /* Very light blue */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    /* Removed border and previous shadow */
}

.belief-icon {
    font-size: 1.2rem;
    color: var(--secondary-blue);
}

.belief-content {
    flex-grow: 1;
}

.belief-text {
    font-weight: 500;
    color: #333;
    line-height: 1.5;
    font-size: 0.95rem;
    margin: 0;
    max-width: none;
}

.blue-banner {
    background-color: #1a44c7;
    /* A brighter/richer blue for the banner akin to screenshot */
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1a44c7 100%);
    color: var(--white);
    padding: 60px 40px;
    text-align: center;
    border-radius: 12px;
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 500;
    margin-top: 50px;
    box-shadow: 0 10px 30px rgba(13, 27, 93, 0.15);
}

/* Removed the top stripe ::before pseudo-element */

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

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

    .blue-banner {
        padding: 40px 20px;
        font-size: 1rem;
    }

    .belief-card {
        padding: 20px;
    }
}

/* Vision Icon Box */
.vision-icon-box {
    width: 40px;
    height: 40px;
    background-color: var(--secondary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Manpower Supply List Alignment */
.manpower-list {
    margin-top: 15px;
    font-size: 0.9rem;
    list-style-type: none;
    padding-left: 0;
    color: var(--text-muted);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.manpower-list li {
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
}

.manpower-list li i {
    margin-right: 8px !important;
    margin-top: 4px;
    flex-shrink: 0;
}

/* --- Responsive Adjustments --- */

@media (max-width: 900px) {

    /* Tablet Typography */
    .hero h1 {
        font-size: 2.8rem;
    }

    .section-title h2 {
        font-size: 2.2rem;
    }

    .cta-rounded {
        width: 80%;
    }
}

@media (max-width: 768px) {

    /* Footer Stacking */
    footer .container>div {
        grid-template-columns: 1fr 1fr !important;
        /* 2 cols on tablet */
        gap: 30px;
    }

    /* About Us - Policies two col stays, but maybe adjust padding */
}

@media (max-width: 600px) {

    /* Mobile General */
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .section-title h2 {
        font-size: 1.8rem;
    }

    /* Footer Stacking - Full Mobile */
    footer .container>div {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .footer-bottom {
        text-align: center;
    }

    /* Grids */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .manpower-list {
        grid-template-columns: 1fr;
    }

    /* About Policies Stacking */
    .policy-container {
        /* If using a class for the flex container */
        flex-direction: column;
    }

    /* Fix Trust Strip Flex */
    .container>div[style*="justify-content:center"] {
        /* Targeting the flex container in Trust Strip - ideally add a class to it in HTML */
        flex-direction: column;
        gap: 20px !important;
    }

    /* CTA */
    .cta-rounded {
        width: 95%;
        padding: 20px 15px;
    }

    .cta-rounded h2 {
        font-size: 1.5rem;
    }
}