/* --- Variables & Reset --- */
:root {
    --primary-blue: #0056b3;
    --primary-orange: #F57F20;
    --primary-green: #7CBB00;
    --dark-text: #333;
    --light-gray: #f4f4f4;
    --white: #fff;
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    background-color: var(--white);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

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

.section { padding: 60px 0; }
.bg-light { background-color: var(--light-gray); }
.text-white { color: var(--white); }
.bg-white { background-color: var(--white); }

/* --- Typography Utilities --- */
.section-title {
    font-size: 2rem;
    margin-bottom: 10px;
    
}
.center { text-align: center; }
.underline {
    height: 3px;
    width: 60px;
    background: var(--primary-orange);
    margin-bottom: 30px;
}
.underline.center { margin: 0 auto 40px auto; }

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}
.btn-primary {
    background-color: var(--primary-orange);
    color: var(--white);
}
.btn-primary:hover { background-color: #d66a00; }
.btn-nav {
    background-color: var(--primary-orange);
    color: var(--white) !important;
    padding: 8px 15px;
    border-radius: 4px;
}
.btn-sm {
    padding: 5px 15px;
    background: var(--primary-blue);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

/* --- Navbar with Overlapping Logo --- */

.menu-toggle { 
    display: none; 
    font-size: 1.5rem; 
    cursor: pointer; 
}

/* 2. Define the "Scrolled" state for the Desktop Logo */
/* This class will be added by JavaScript when you scroll down */
.navbar.scrolled .logo {
    /* Reset the "Badge" look to fit inside the bar */
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    
    /* Center it vertically if needed */
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.navbar.scrolled .logo img {
    /* Shrink the image to match the header height */
    height: 60px; 
    width: auto;
    transition: all 0.3s ease; /* Smooth animation */
}

/* Ensure the main logo has a transition for the resizing effect */
.logo, .logo img {
    transition: all 0.3s ease;
}

.navbar {
    position: sticky;
    top: 0;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 1rem 0;
    height: 80px; /* Fixed height for the white bar */
}

.nav-container {
    display: flex;
    justify-content: flex-end; /* Pushes links to the right */
    align-items: center;
    position: relative; /* Essential for the logo positioning */
    height: 100%;
}

/* The Big Overlapping Logo */
.logo {
    position: absolute;
    top: 0;     /* Aligns to top of screen */
    left: 0;    /* Aligns to left of container */
    z-index: 1001; /* Sits on top of everything */
    
    /* Optional: White background card effect behind the logo */
    background: #fff; 
    padding: 10px 15px 15px 15px;
    border-radius: 0 0 10px 10px; /* Rounded bottom corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.logo img {
    height: 140px; /* Large size to cover Header + Banner */
    width: 140px;  /* Force square aspect ratio */
    object-fit: contain; /* Keeps logo completely visible inside the square */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-right: 20px;
}

.nav-links a {
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 1rem;
    text-transform: uppercase;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary-orange);
}

/* --- Mobile Responsiveness Fix --- */
/* On mobile, we must shrink it back, or it will block the screen */
@media (max-width: 768px) {
    .navbar {
        height: auto;
        padding: 10px 0;
    }
    .nav-container {
        justify-content: space-between; /* Reset for mobile */
    }
    .logo {
        position: static; /* Back to normal flow */
        background: none;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .logo img {
        height: 60px; /* Smaller standard size for mobile */
        width: auto;
    }
    .nav-links {
        margin-right: 0;
    }
}

/* --- Hero Carousel --- */
.hero-carousel {
    position: relative;
    height: 600px; /* Adjust height as needed */
    overflow: hidden;
    color: white;
    background: #333; /* Fallback color */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Hidden by default */
    transition: opacity 1s ease-in-out; /* Smooth fade effect */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.slide.active {
    opacity: 1; /* Show active slide */
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    padding-top: 60px; /* Space for the hanging logo */
}

/* Animations for text */
.slide.active h1 { animation: slideUp 1s ease forwards; }
.slide.active p { animation: slideUp 1.2s ease forwards; }
.slide.active .btn { animation: slideUp 1.4s ease forwards; }

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-content p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Specific Button Colors for slides */
.btn-orange { background-color: var(--primary-orange); color: white; }
.btn-orange:hover { background-color: #d66a00; }

.btn-green { background-color: var(--primary-green); color: white; }
.btn-green:hover { background-color: #6aa300; }

/* Carousel Controls */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.carousel-btn:hover { background: var(--primary-orange); }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* Dots */
.carousel-dots {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active, .dot:hover {
    background-color: var(--primary-orange);
    transform: scale(1.2);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-carousel { height: 500px; }
    .slide-content h1 { font-size: 2rem; }
    .slide-content p { font-size: 1rem; }
}

/* --- About --- */
.about-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
}
.about-text { flex: 1; }
.about-image { flex: 1; }
.img-placeholder {
    width: 100%;
    height: 300px;
    background: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    color: #bbb;
    border-radius: 10px;
}

/* --- Mission/Vision Cards --- */

/* --- Dark Background Section with Overlay --- */
.bg-dark-image {
    /* 1. The Image + Dark Overlay (0.8 opacity makes it very dark) */
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
                url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    padding: 80px 0;
}

/* 2. Make the Main Title White */
.bg-dark-image .section-title {
    color: #ffffff !important;
}

/* 3. Card Styling */
.bg-dark-image .card {
    background: #ffffff; /* Explicitly white background */
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Strong shadow for pop */
    border-radius: 5px; /* Optional rounded corners */
    overflow: hidden; /* Keeps the header inside the radius */
}

/* 4. THE FIX: Force Text Inside Cards to be Dark Grey */
.bg-dark-image .card-body p {
    color: #333333 !important; /* This ensures text is visible on white */
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Header Colors match your request */
.card-header {
    padding: 15px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.card-header.blue { background-color: var(--primary-blue); }
.card-header.green { background-color: var(--primary-green); }
.card-header.orange { background-color: var(--primary-orange); }

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.card {
    background: var(--white);
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: var(--transition);
}
.card:hover { transform: translateY(-5px); }
.card-header {
    padding: 15px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.card-header.blue { background-color: var(--primary-blue); }
.card-header.green { background-color: var(--primary-green); }
.card-header.orange { background-color: var(--primary-orange); }
.card-body { padding: 20px; text-align: center; }

/* --- Services (Split Layout) --- */
.services-container {
    display: flex;
    gap: 30px;
    border: 1px solid #eee;
    padding: 20px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    min-height: 300px;
}
.services-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
}
.service-tab {
    padding: 15px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    transition: var(--transition);
    border-left: 4px solid transparent;
}
.service-tab:hover { background: #f9f9f9; color: var(--primary-blue); }
.service-tab.active {
    background: #f0f8ff;
    color: var(--primary-blue);
    border-left: 4px solid var(--primary-blue);
    font-weight: bold;
}
.services-content { flex: 2; padding-left: 20px; }
.service-detail { display: none; animation: fadeIn 0.5s; }
.service-detail.active { display: block; }
.detail-header {
    padding: 15px;
    color: white;
    margin-bottom: 15px;
    border-radius: 3px;
}
.detail-header.blue-bg { background: var(--primary-blue); }
.detail-header.orange-bg { background: var(--primary-orange); }
.detail-header.green-bg { background: var(--primary-green); }
.detail-body ul { margin: 15px 0; }
.detail-body ul li { margin-bottom: 10px; }
.detail-body i { color: var(--primary-green); margin-right: 10px; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Portfolio Section Background --- */
/* --- Portfolio Section (Professional Grid) --- */
.bg-portfolio {
    background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), 
                url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-attachment: fixed;
    padding: 80px 0;
    color: white;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 40px auto 0;
}

.portfolio-card {
    background: white;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;
}

.portfolio-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.portfolio-card:hover .blue-icon { border-bottom-color: var(--primary-blue); }
.portfolio-card:hover .orange-icon { border-bottom-color: var(--primary-orange); }

.card-icon { font-size: 3.5rem; margin-bottom: 20px; }
.blue-icon { color: var(--primary-blue); }
.orange-icon { color: var(--primary-orange); }

.card-content h3 { color: #333; margin-bottom: 10px; font-size: 1.4rem; }
/* Add these missing color classes */
.blue-text { 
    color: var(--primary-blue) !important; 
}

.orange-text { 
    color: var(--primary-orange) !important; 
}

/* Optional: Add a hover effect to make it interactive */
.btn-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.card-content p { color: #666; font-size: 0.95rem; margin-bottom: 20px; }
.btn-link { font-weight: bold; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; }


/* --- FIXED MODAL CSS (Wide & Centered) --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark backdrop */
    backdrop-filter: blur(5px); /* Modern blur effect */
    
    /* FLEXBOX CENTERING MAGIC */
    align-items: center; 
    justify-content: center;
}

.modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 900px; /* WIDE Format */
    max-height: 85vh; /* Keep it within screen height */
    border-radius: 8px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column; /* Header top, Footer bottom, Body scrolls */
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    padding: 20px 30px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.modal-header h2 { margin: 0; color: var(--primary-blue); font-size: 1.5rem; }
.close-modal { font-size: 2rem; color: #aaa; cursor: pointer; line-height: 1; }
.close-modal:hover { color: #333; }

.modal-body {
    padding: 30px;
    overflow-y: auto; /* Internal scrolling */
    background: #fff;
}

/* Portfolio List Styling */
.project-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.project-item:last-child { border-bottom: none; }

.project-icon-box {
    width: 50px;
    height: 50px;
    background: #eef2ff;
    color: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.project-details h4 { margin: 0 0 5px 0; color: #222; font-size: 1.1rem; }
.project-details p { margin: 0 0 8px 0; color: #666; font-size: 0.95rem; line-height: 1.5; }
.tag {
    display: inline-block;
    background: #eee;
    color: #555;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.modal-footer {
    padding: 15px 30px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: right;
    border-radius: 0 0 8px 8px;
}

/* --- Pricing Section --- */
.section-desc {
    max-width: 600px;
    margin: -20px auto 40px auto;
    color: #666;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    position: relative;
}

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

/* Color Coding Top Borders */
.blue-card { border-top: 5px solid var(--primary-blue); }
.orange-card { border-top: 5px solid var(--primary-orange); }

.pricing-header {
    padding: 30px 30px 20px;
    text-align: center;
    background: #fafafa;
    border-bottom: 1px solid #eee;
	
}

.pricing-header h3 { margin-bottom: 5px; font-size: 1.4rem; color: #fff; }
.pricing-header p { color: #fff; font-size: 0.9rem; }

.pricing-body { padding: 30px; text-align: center; }

/* Price Tag Styling */
.price-tag { margin-bottom: 25px; color: #333; }
.currency { font-size: 1.5rem; vertical-align: top; font-weight: bold; }
.amount { font-size: 3rem; font-weight: 700; line-height: 1; }
.period { font-size: 0.9rem; color: #999; display: block; margin-top: 5px; }

.pricing-features { text-align: left; margin-bottom: 30px; padding-left: 10px; }
.pricing-features li { margin-bottom: 12px; color: #555; font-size: 0.95rem; }
.pricing-features li i { color: var(--primary-green); margin-right: 10px; width: 20px; text-align: center; }

/* Outline Buttons */
.btn-outline-blue {
    background: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.btn-outline-blue:hover { background: var(--primary-blue); color: white; }

.btn-outline-orange {
    background: transparent;
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange);
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.btn-outline-orange:hover { background: var(--primary-orange); color: white; }

/* --- Quote Modal Specifics --- */
.quote-modal-content {
    max-width: 500px; /* Narrower than portfolio modal */
    border-radius: 8px;
    overflow: hidden;
}

.form-row { display: flex; gap: 20px; }
.form-group.half { flex: 1; }

/* Responsive Grid fix */
@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0; }
}


/* --- Contact Us (Enhanced) --- */
.contact-section { background: var(--primary-blue); color: white; }
.contact-wrapper {
    display: flex;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.contact-info {
    flex: 1;
    background: #004494;
    padding: 40px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-info p {padding-bottom: 25px;}
.contact-info h3 { font-size: 1.5rem; margin-bottom: 20px; }
.info-item { display: flex; align-items: center; margin-bottom: 20px; }
.info-item i { font-size: 1.2rem; margin-right: 15px; color: var(--primary-orange); }
.social-icons { margin-top: 20px; }
.social-icons a { margin-right: 15px; font-size: 1.2rem; transition: 0.3s; }
.social-icons a:hover { color: var(--primary-orange); }

.contact-form {
    flex: 1.5;
    padding: 40px;
    color: var(--dark-text);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
}
.full-width { width: 100%; }

/* --- Footer --- */
footer {
    background: #222;
    color: #aaa;
    text-align: center;
    padding: 20px;
}

/* --- Modal --- */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 5px;
    position: relative;
}
.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-modal:hover { color: black; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .about-wrapper, .services-container, .contact-wrapper {
        flex-direction: column;
    }
    .services-sidebar {
        border-right: none;
        border-bottom: 1px solid #eee;
        display: grid;
        grid-template-columns: 1fr 1fr; 
    }
    .services-content { padding-left: 0; padding-top: 20px; }
    .nav-links { display: none; } /* Add JS toggle for mobile menu later */
    .menu-toggle { display: block; }
    .hero-content h1 { font-size: 1.8rem; }
	.navbar {
        padding: 15px 0; /* Adjust mobile padding */
        height: auto;
    }

    /* On mobile, we ignore the "scrolled" resizing because it's already small */
    .logo {
        position: static;
        transform: none;
        background: none;
        padding: 0;
        box-shadow: none;
    }
    .logo img {
        height: 60px;
        width: auto;
    }
	
	.navbar.scrolled .logo {
	transform: none;	
	}
}
}

/* --- BLOG PAGE STYLES --- */

/* 1. Page Banner (Static version of Hero) */
.page-banner {
    height: 400px; /* Same height as Home Hero to fit Logo */
    background: linear-gradient(rgba(0,86,179,0.8), rgba(0,86,179,0.8)), 
                url('https://images.unsplash.com/photo-1455390582262-044cdead2797?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
}

.banner-content {
    padding-top: 60px; /* Space for the overlapping logo */
}

.banner-content h1 { font-size: 3rem; margin-bottom: 10px; }
.banner-content p { font-size: 1.2rem; opacity: 0.9; }

/* 2. Blog Layout (Grid Split) */
.blog-layout {
    display: grid;
    grid-template-columns: 8fr 4fr; /* 8 cols left, 4 cols right */
    gap: 40px;
    margin-top: 20px;
}

/* 3. Blog Grid (The posts) */
.blog-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive Grid */
    gap: 30px;
}

.blog-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.blog-thumb {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-thumb img { transform: scale(1.1); }

/* Category Tags */
.blog-cat {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 10px;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
}
.cat-blue { background: var(--primary-blue); }
.cat-orange { background: var(--primary-orange); }
.cat-green { background: var(--primary-green); }

.blog-details { padding: 20px; }

.blog-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
}

.blog-details h3 { font-size: 1.25rem; margin-bottom: 10px; line-height: 1.4; }
.blog-details h3 a { color: #333; transition: 0.2s; }
.blog-details h3 a:hover { color: var(--primary-orange); }

.blog-details p { font-size: 0.95rem; color: #666; margin-bottom: 15px; }

.read-more {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.read-more:hover { text-decoration: underline; }

/* 4. Sidebar Styling */
.sidebar .widget {
    background: white;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.widget-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-orange);
    padding-left: 15px;
    color: #333;
}

/* Search Widget */
.search-widget form { display: flex; }
.search-widget input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
}
.search-widget button {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 0 15px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.search-widget button:hover { background: #004494; }

/* Category Widget */
.category-widget ul li {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px 0;
}
.category-widget ul li:last-child { border-bottom: none; }
.category-widget ul li a {
    display: flex;
    justify-content: space-between;
    color: #555;
    font-weight: 500;
}
.category-widget ul li a:hover { color: var(--primary-orange); }
.category-widget ul li a span {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #777;
}

/* CTA Widget */
.cta-widget { text-align: center; background: #f9fbfd !important; border: 1px solid #b3d7ff !important; }
.cta-widget h4 { color: var(--primary-blue); margin-bottom: 10px; }
.cta-widget p { margin-bottom: 15px; font-size: 0.9rem; }

/* 5. Pagination Styling */
.pagination-wrapper {
    margin-top: 50px;
    text-align: center;
}

.pagination {
    display: inline-flex;
    gap: 10px;
    margin-bottom: 15px;
}

.pagination li a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #ddd;
    color: #555;
    border-radius: 4px;
    font-weight: 600;
    transition: 0.3s;
}

.pagination li a.active, .pagination li a:hover {
    background: var(--primary-orange);
    color: white;
    border-color: var(--primary-orange);
}

.pagination-info { font-size: 0.9rem; color: #888; }

/* Responsive Blog */
@media (max-width: 992px) {
    .blog-layout { grid-template-columns: 1fr; } /* Stack Grid and Sidebar */
    .sidebar { margin-top: 40px; }
}

/* Styling for the new script line */
.slide-content .script-text {
    display: block;
    font-family: 'Dancing Script', cursive; /* Elegant script font */
    font-size: 1.5rem;
    color: #ffd700; /* Gold or a color that pops against your background */
    margin-bottom: 25px;
    opacity: 0.9;
}

/* Enhancing the headline and paragraph spacing */
.slide-content h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    max-width: 800px;
    line-height: 1.2;
}

.slide-content p {
    font-size: 1.2rem;
    margin-bottom: 10px;
    max-width: 700px;
    line-height: 1.6;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .slide-content h1 { font-size: 2rem; }
    .slide-content .script-text { font-size: 1.2rem; }
}

/* Service Intro Text */
.service-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #444;
    border-left: 4px solid #eee;
    padding-left: 15px;
}

/* Accordion Styling */
.accordion-group {
    margin-bottom: 30px;
}

.accordion-group h4 {padding: 15px 0px 15px; color: #e67e22;}


details {
    background: #f9f9f9;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

details[open] {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

summary {
    padding: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none; /* Removes default arrow */
    position: relative;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Custom Arrow for Accordion */
summary::after {
    content: '\f067'; /* FontAwesome Plus Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

details[open] summary::after {
    content: '\f068'; /* FontAwesome Minus Icon */
    transform: rotate(180deg);
}

details p {
    padding: 0 15px 15px 15px;
    margin: 0;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
}

/* Background Colors for Headers */
.blue-bg { background-color: #0056b3; color: white; }
.orange-bg { background-color: #e67e22; color: white; }

/* Modal Sizing */
.professional-modal {
    width: 80% !important;
    max-width: 1000px;
    margin: 50px auto;
    border-radius: 8px;
    overflow: hidden;
}

/* Before/After Box Styling */
.comparison-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

.diff-card {
    padding: 15px;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.diff-card.before {
    background-color: #fff5f5;
    border-left: 4px solid #fc8181;
}

.diff-card.after {
    background-color: #f0fff4;
    border-left: 4px solid #68d391;
    font-weight: 500;
}

.diff-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.before .diff-label { color: #c53030; }
.after .diff-label { color: #2f855a; }

/* Responsive Modal */
@media (max-width: 768px) {
    .professional-modal {
        width: 95% !important;
        margin: 20px auto;
    }
    .comparison-box {
        grid-template-columns: 1fr; /* Stack before/after on mobile */
    }
}

/* Modal Accordion Styling */
.modal-accordion {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #fff;
    transition: all 0.3s ease;
}

.modal-accordion[open] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e0;
}

.modal-summary {
    padding: 16px 20px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #2d3748;
}

/* Hide default arrow */
.modal-summary::-webkit-details-marker {
    display: none;
}

.modal-summary i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: #a0aec0;
}

.modal-accordion[open] .modal-summary i {
    transform: rotate(180deg);
}

.modal-accordion-content {
    padding: 0 20px 20px 20px;
    border-top: 1px solid #edf2f7;
    background-color: #fcfcfc;
}

.modal-intro {
    margin-bottom: 20px;
    color: #718096;
    font-size: 0.95rem;
}

/* Ensure comparison box stacks correctly inside accordion */
@media (max-width: 768px) {
    .comparison-box {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* 1. Remove the default browser arrow (marker) */
.modal-summary::-webkit-details-marker {
    display: none !important;
}

.modal-summary {
    list-style: none !important; /* For Firefox */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
}

/* 2. Remove the middle icon specifically */
/* If you have an <i> tag in the middle of your summary in JS, remove it there, 
   OR use this CSS to hide any <i> that isn't the last child */
.modal-summary i:not(:last-child) {
    display: none !important;
}

/* 3. Style the remaining icon (the Plus/Minus on the right) */
.modal-summary i {
    font-size: 1rem;
    color: #666;
    transition: transform 0.3s ease;
}

/* Pricing Section Enhancements */
.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.pricing-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.pricing-header {
    padding: 30px;
    text-align: center;
    color: #fff;
}

.blue-card .pricing-header { background-color: #0056b3; }
.orange-card .pricing-header { background-color: #e67e22; }

.price-tag {
    text-align: center;
    padding: 20px 0 10px;
}

.price-tag .amount {
    font-size: 3rem;
    font-weight: 700;
    color: #333;
}

.price-tag .currency {
    font-size: 1.5rem;
    vertical-align: top;
    margin-right: 5px;
    color: #333;
}

.price-tag .period {
    display: block;
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-note {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    padding: 0 30px 20px;
    line-height: 1.4;
    font-style: italic;
}

.pricing-features {
    list-style: none;
    padding: 20px 30px;
    margin: 0;
    border-top: 1px solid #eee;
}

.pricing-features li {
    margin-bottom: 12px;
    font-size: 1rem;
    color: #444;
}

.pricing-features i {
    margin-right: 10px;
}

.blue-card i { color: #0056b3; }
.orange-card i { color: #e67e22; }

.full-width {
    width: calc(100% - 60px);
    margin: 0 30px 30px;
}

/* Button styles if not already defined */
.btn-outline-blue {
    border: 2px solid #0056b3;
    color: #0056b3;
    background: transparent;
}
.btn-outline-blue:hover {
    background: #0056b3;
    color: #fff;
}

.btn-outline-orange {
    border: 2px solid #e67e22;
    color: #e67e22;
    background: transparent;
}
.btn-outline-orange:hover {
    background: #e67e22;
    color: #fff;
}

/* FAQ Section Styles */
.faq-container {
    max-width: 800px;
    margin: 40px auto 0;
}

.faq-item {
    background: #fff;
    border: 1px solid #eee;
    margin-bottom: 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.faq-item[open] {
    border-color: #0056b3; /* Matching your blue theme */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.faq-summary {
    list-style: none;
    padding: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
}

/* Remove default browser arrow */
.faq-summary::-webkit-details-marker {
    display: none;
}

/* Plus Icon for FAQ */
.faq-summary::after {
    content: '\f067'; /* Plus */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.9rem;
    color: #0056b3;
    transition: transform 0.3s ease;
}

/* Minus Icon when open */
.faq-item[open] .faq-summary::after {
    content: '\f068'; /* Minus */
}

.faq-content {
    padding: 0 20px 20px;
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
    border-top: 1px solid #f9f9f9;
}

#contentFields, #cvFields, #employeeCountGroup, #cvUploadGroup {
    animation: fadeIn 0.4s ease-in-out;
    margin-top: 15px;
    border-left: 3px solid #0056b3; /* Content Notch Blue brand accent */
    padding-left: 15px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.contact-form select, .contact-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fcfcfc;
}

/* Contact Section Legal Links */
.legal-links {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle line for dark bg */
    font-size: 0.85rem;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.legal-links .separator {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 10px;
}


/* Professional Footer Layout */
.footer {
    background-color: #1a1a1a;
    color: #fff;
    padding: 80px 0 30px; /* Increased padding for breathing room */
    margin-top: 50px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Brand gets more space than link columns */
    gap: 60px; /* Wider gap between sections */
    align-items: start;
}

.footer-logo {
    max-width: 180px;
    margin-bottom: 25px;
    
}

.footer-col p {
    color: #bbb;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    font-weight: 600;
}

/* Decorative underline for headers */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 2px;
    background-color: #0056b3;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: #fff;
    padding-left: 5px; /* Subtle interaction effect */
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #fff;
    background: rgba(255,255,255,0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.social-links a:hover {
    background: #0056b3;
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    color: #777;
    font-size: 0.85rem;
}

/* Responsive fix */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .social-links {
        justify-content: center;
    }
}

/* Mobile Styles (Inside your @media (max-width: 768px) block) */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Matches your header height */
        right: 0;
        background: white;
        width: 100%;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    /* This class is toggled by JavaScript */
    .nav-links.active {
        display: flex !important;
    }
}

.prev-btn, .next-btn {
    display: none !important;
}