/*----------------------------------------------------*\
  #GLOBAL STYLES
\*----------------------------------------------------*/

:root {
    /* Colors */
    --clr-dark-bg: #151515; /* Darker background */
    --clr-dark-card: #1C1C1C; /* Slightly lighter for cards */
    --clr-dark-card-hover: #252525; /* Even lighter on hover */
    --clr-text-light: #F0F0F0;
    --clr-text-secondary: #BBBBBB; /* Lighter grey for secondary text */
    
    --clr-accent: #33CCFF; /* Luminous Blue */
    --clr-accent-hover: #0099CC; /* Corresponding hover shade */
    
    --clr-border-light: #333333;
    --clr-error: #FF6B6B; /* For close buttons or errors */

    /* Fonts */
    --ff-heading: 'Montserrat', sans-serif;
    --ff-body: 'Open Sans', sans-serif;

    /* Spacing */
    --space-sm: 15px;
    --space-md: 30px;
    --space-lg: 50px;
    --space-xl: 80px;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-easing: ease-in-out;
}

/* Base Styles */
html {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

body {
    background-color: var(--clr-dark-bg);
    color: var(--clr-text-light);
    font-family: var(--ff-body);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from animations */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Better font rendering */
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    color: var(--clr-text-light);
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

h1 {
    font-size: 3.8em;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2); /* Softer glow */
}

h2 {
    font-size: 2.8em;
    text-align: center;
    margin-bottom: var(--space-xl);
    color: var(--clr-accent); /* Accent color for main section titles */
    text-shadow: 0 0 10px rgba(0, 255, 192, 0.3); /* Subtle glow for headings */
}

h3 {
    font-size: 1.9em;
    margin-bottom: var(--space-sm);
}

p {
    font-size: 1.1em;
    color: var(--clr-text-secondary);
}

.section-intro {
    max-width: 900px;
    margin: 0 auto var(--space-xl) auto;
    text-align: center;
    font-size: 1.25em;
    line-height: 1.8;
    color: var(--clr-text-light); /* Make intro text brighter */
}

/* Links */
a {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-easing);
}

a:hover {
    color: var(--clr-accent-hover);
}

/* Buttons (General Styles) */
.cta-button {
    background-color: var(--clr-accent);
    color: var(--clr-dark-bg); /* Dark text on bright button */
    padding: 16px 35px;
    border: none;
    border-radius: 8px; /* Slightly more rounded */
    font-size: 1.2em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block; /* For transform to work */
    transition: background-color var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing);
    box-shadow: 0 5px 20px rgba(0, 255, 192, 0.4); /* Stronger initial glow */
}

.cta-button:hover {
    background-color: var(--clr-accent-hover);
    transform: translateY(-5px) scale(1.02); /* More pronounced lift */
    box-shadow: 0 0 30px rgba(51, 204, 255, 0.6); /* Enhanced glow */
}

.secondary-cta {
    background-color: transparent;
    color: var(--clr-accent);
    border: 2px solid var(--clr-accent);
    margin-top: var(--space-xl);
}

.secondary-cta:hover {
    background-color: var(--clr-accent);
    color: var(--clr-dark-bg);
    box-shadow: 0 8px 30px rgba(0, 255, 192, 0.6);
}

/*----------------------------------------------------*\
  #HEADER
\*----------------------------------------------------*/

.header {
    background-color: rgba(0, 0, 0, 0.75); /* More transparent for blur effect */
    padding: var(--space-sm) var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px); /* Stronger frosted glass effect */
    -webkit-backdrop-filter: blur(8px);
}

.logo {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--clr-accent);
    text-shadow: 0 0 8px rgba(0, 255, 192, 0.6);
    letter-spacing: 0.05em;
}

.header-right {
    display: flex;
    align-items: center;
}

/* Sidebar Toggle Button (Hamburger Icon) */
.sidebar-toggle {
    background: none;
    border: none;
    color: transparent; /* Make the '☰' character invisible */
    font-size: 0; /* Also hide its font size */
    cursor: pointer;
    margin-left: var(--space-md);
    width: 35px; /* Set a fixed width for the hamburger */
    height: 28px; /* Set a fixed height for the hamburger */
    position: relative; /* Needed for positioning pseudo-elements */
    display: flex; /* Use flexbox to center the middle line */
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove default button padding */
    z-index: 1001; /* Ensure it's above other elements if needed */
}

/* Middle line (the button itself) */
.sidebar-toggle::before, /* Top line */
.sidebar-toggle::after,  /* Bottom line */
.sidebar-toggle { /* This refers to the middle line itself */
    background-color: var(--clr-text-light); /* Color of the lines */
    height: 3px; /* Thickness of the lines */
    width: 100%; /* Full width for the lines */
    border-radius: 2px; /* Slightly rounded ends for the lines */
    transition: all var(--transition-speed) var(--transition-easing);
}

.sidebar-toggle::before,
.sidebar-toggle::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Position relative to the button */
    left: 0;
}

.sidebar-toggle::before {
    top: 0; /* Position top line */
}

.sidebar-toggle::after {
    bottom: 0; /* Position bottom line */
}

/* Hover effect */
.sidebar-toggle:hover::before,
.sidebar-toggle:hover::after,
.sidebar-toggle:hover {
    background-color: var(--clr-accent); /* Change color on hover */
}

/* Animation for when sidebar is active (optional: "X" transform) */
.sidebar.active .sidebar-toggle {
    background-color: transparent; /* Hide the middle line */
}

.sidebar.active .sidebar-toggle::before {
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1.5px; /* Adjust to center after rotation */
}

.sidebar.active .sidebar-toggle::after {
    transform: rotate(-45deg);
    bottom: 50%;
    margin-bottom: -1.5px; /* Adjust to center after rotation */
}

/*----------------------------------------------------*\
  #SIDEBAR NAVIGATION
\*----------------------------------------------------*/

.sidebar {
    position: fixed;
    top: 0;
    right: -320px; /* Hidden by default, adjusted width */
    width: 300px; /* Wider sidebar */
    height: 100%;
    background-color: var(--clr-dark-card);
    box-shadow: -8px 0 25px rgba(0, 0, 0, 0.7); /* Stronger shadow */
    transition: right 0.5s cubic-bezier(0.65, 0.05, 0.36, 1); /* Smoother animation curve */
    z-index: 999;
    padding-top: var(--space-xl); /* Space for header and close button */
    display: flex;
    flex-direction: column;
}

.sidebar.active {
    right: 0; /* Slide in */
}

.sidebar-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--clr-text-secondary);
    font-size: 3em; /* Larger close icon */
    cursor: pointer;
    transition: color var(--transition-speed) var(--transition-easing);
}
.sidebar-close:hover {
    color: var(--clr-error); /* Red for close */
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Allow ul to take available space */
}

.sidebar ul li {
    padding: 5px 0; /* Vertical spacing between buttons */
}

.sidebar ul li a {
    display: block;
    padding: 18px var(--space-md); /* More padding */
    color: var(--clr-text-light);
    text-decoration: none;
    font-size: 1.15em;
    font-weight: 600;
    transition: background-color var(--transition-speed) var(--transition-easing),
                color var(--transition-speed) var(--transition-easing),
                border-left-color var(--transition-speed) var(--transition-easing);
    border-left: 6px solid transparent; /* Thicker border for indicator */
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
    background-color: var(--clr-dark-card-hover);
    color: var(--clr-accent);
    border-left-color: var(--clr-accent);
}

/*----------------------------------------------------*\
  #MAIN CONTENT & SECTIONS
\*----------------------------------------------------*/

main {
    padding-top: 0px; /* Adjust based on header height */
}

/* General Section Styling */
section {
    padding: var(--space-xl) var(--space-lg);
    margin-bottom: 0; /* Sections will fill vertically */
    opacity: 0; /* Hidden by default for JS animation */
    transform: translateY(30px); /* More pronounced slide up */
    transition: opacity 1s var(--transition-easing), transform 1s var(--transition-easing);
    will-change: opacity, transform; /* Optimize for animation */
}

section.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

/* Page Content Wrapper for Sub-Pages */
.page-content {
    padding: var(--space-xl) var(--space-lg);
    max-width: 1300px; /* Slightly wider content area */
    margin: auto;
    min-height: calc(100vh - 80px - 90px); /* Ensure content pushes footer down */
}

/*----------------------------------------------------*\
  #HERO SECTION
\*----------------------------------------------------*/

.hero-section {
    min-height: 100vh; /* Keep this to ensure it's at least one viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* This centers the content vertically */
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: 0; /* Header already handles padding, but you can add if content starts too high */
    padding-bottom: 60px; /* Increased bottom padding to give more room */
}

.hero-content {
    z-index: 1;
    max-width: 1000px;
    padding: 0 var(--space-md);
    flex-grow: 1; /* Allow content to grow within the flex container */
    
    /* Make hero-content itself a flex container for its children */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
    width: 100%; /* Ensure it spans full width for centering */
}

/* Adjust margins/spacing for elements inside hero-content */
.hero-logo-img {
    width: 100%; /* Using CSS for 50% width */
    max-width: 300px; /* Max size for desktop */
    height: auto;
    display: block;
    margin: 0 auto 35px auto; /* Increased margin below logo for more space */
    animation: fadeInScale 2s var(--transition-easing) 0.2s forwards;
    filter: drop-shadow(0 0 15px rgba(0, 207, 255, 0.6));
}

.hero-content h1 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 20px; /* Space below H1 */
    font-size: 3.8em;
}

.hero-content h2 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 25px; /* Space below H2 */
    font-size: 2.8em;
    color: var(--clr-accent);
    text-shadow: 0 0 10px rgba(0, 207, 255, 0.4);
}

.hero-content p {
    font-size: 1.4em;
    margin-bottom: 45px; /* Increased space below paragraph before button */
    line-height: 1.7;
    animation: slideUp 2s var(--transition-easing) 0.5s forwards;
    color: var(--clr-text-light);
    max-width: 800px;
}

.hero-content .cta-button {
    margin-top: 0; /* Ensure no extra margin pushes it down */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    .hero-logo-img {
        max-width: 250px;
        margin-bottom: 30px;
    }
    .hero-content h1 { font-size: 3.2em; }
    .hero-content h2 { font-size: 2.2em; }
    .hero-content p { font-size: 1.2em; margin-bottom: 35px; }
    .hero-section { padding-bottom: 40px; }
}

@media (max-width: 768px) {
    .hero-logo-img {
        max-width: 200px;
        margin-bottom: 25px;
    }
    .hero-content h1 { font-size: 2.6em; }
    .hero-content h2 { font-size: 1.8em; }
    .hero-content p { font-size: 1.1em; margin-bottom: 30px; }
    .hero-section { padding-bottom: 30px; }
}

@media (max-width: 480px) {
    .hero-logo-img {
        width: 70%; /* Allow it to be wider on tiny screens */
        max-width: 180px;
        margin-bottom: 20px;
    }
    .hero-content h1 { font-size: 2em; }
    .hero-content h2 { font-size: 1.5em; }
    .hero-content p { font-size: 1em; margin-bottom: 25px; }
    .hero-section { padding-bottom: 20px; }
}
/*----------------------------------------------------*\
  #WHAT WE DO SECTION
\*----------------------------------------------------*/

.what-we-do-section {
    background-color: var(--clr-dark-bg); /* Ensure consistent background */
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Larger min-width */
    gap: var(--space-lg); /* Larger gap */
    margin-top: var(--space-xl);
}

.service-item {
    background-color: var(--clr-dark-card);
    padding: var(--space-md);
    border-radius: 12px; /* More rounded corners */
    text-align: center;
    transition: transform var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing),
                background-color var(--transition-speed) var(--transition-easing);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(30px);
}

.service-item:hover {
    transform: translateY(-15px); /* More pronounced lift */
    background-color: var(--clr-dark-card-hover);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(51, 204, 255, 0.6); /* Enhanced glow */
}

.service-item .icon {
    font-size: 4em; /* Larger icons */
    color: var(--clr-accent);
    margin-bottom: var(--space-md);
    transition: transform 0.5s var(--transition-easing);
    text-shadow: 0 0 30px rgba(51, 204, 255, 0.6); /* Icon glow */
}
.service-item:hover .icon {
    transform: scale(1.15) rotateY(10deg); /* Slight rotation on hover */
}

.service-item h3 {
    font-size: 1.7em;
    margin-top: 0;
    color: var(--clr-text-light);
}

.service-item p {
    font-size: 1em;
    color: var(--clr-text-secondary);
}

/* Animation for service items (JS triggered) */
.service-item-fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s var(--transition-easing) calc(var(--item-index) * 0.1s),
                transform 1s var(--transition-easing) calc(var(--item-index) * 0.1s); /* Staggered animation */
}

/*----------------------------------------------------*\
  #CONTACT US SECTION
\*----------------------------------------------------*/

.contact-us-section {
    background-color: var(--clr-dark-card); /* Consistent card background */
    padding: var(--space-xl) var(--space-lg);
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    text-align: center;
    max-width: 1200px;
    margin: var(--space-xl) auto; /* Center the section */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Info slightly wider */
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    text-align: left;
}

.contact-form-container, .contact-info-map {
    background-color: var(--clr-dark-bg);
    padding: var(--space-lg);
    border-radius: 10px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3); /* Inset shadow for depth */
}

.contact-form h3, .contact-info-map h3 {
    font-size: 2em;
    margin-bottom: var(--space-lg);
    color: var(--clr-accent);
    text-align: center;
}

.contact-form input,
.contact-form textarea {
    width: calc(100% - 24px); /* Account for padding */
    padding: 15px;
    margin-bottom: var(--space-md);
    border: 1px solid var(--clr-border-light);
    border-radius: 6px;
    background-color: #282828; /* Slightly lighter input background */
    color: var(--clr-text-light);
    font-size: 1.05em;
    transition: border-color var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--clr-accent);
    outline: none;
    box-shadow: 0 0 30px rgba(51, 204, 255, 0.6);
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resize */
    min-height: 120px;
}

.contact-form .cta-button {
    width: 100%;
    padding: 18px;
    font-size: 1.15em;
}

.contact-info-map p {
    margin-bottom: var(--space-sm);
    font-size: 1.1em;
    color: var(--clr-text-light);
}

.contact-info-map p i {
    color: var(--clr-accent);
    margin-right: 12px;
    font-size: 1.3em;
}

.contact-info-map p a {
    color: var(--clr-text-light); /* Make contact links light */
    transition: color var(--transition-speed) var(--transition-easing);
}
.contact-info-map p a:hover {
    color: var(--clr-accent);
}

.map-container {
    margin-top: var(--space-lg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--clr-border-light);
}

.map-container iframe {
    display: block; /* Remove extra space below iframe */
    filter: grayscale(0.8) invert(0.1); /* Darken and desaturate map */
    transition: filter 0.5s ease;
}
.map-container iframe:hover {
    filter: grayscale(0) invert(0); /* Color on hover */
}

/*----------------------------------------------------*\
  #PREVIOUS CUSTOMERS PAGE (PORTFOLIO)
\*----------------------------------------------------*/

.portfolio-section {
    text-align: center;
    background-color: var(--clr-dark-bg);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Larger min-width */
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.project-card {
    background-color: var(--clr-dark-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing);
    opacity: 0;
    transform: translateY(30px);
}

.project-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(51, 204, 255, 0.6);
}

.project-card img {
    width: 100%;
    height: auto; /* Consistent image height */
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--transition-easing);
}

.project-card:hover img {
    transform: scale(1.08); /* More pronounced zoom */
}

.project-card h3 {
    font-size: 1.5em;
    margin: var(--space-md) var(--space-md) var(--space-sm) var(--space-md);
    color: var(--clr-accent);
}

.project-card p {
    font-size: 0.95em;
    margin: 0 var(--space-md) var(--space-sm) var(--space-md);
    color: var(--clr-text-secondary);
}

.project-card .details-button {
    display: inline-block;
    background-color: var(--clr-accent);
    color: var(--clr-dark-bg);
    padding: 10px 25px;
    border-radius: 6px;
    margin-bottom: var(--space-md);
    font-weight: 600;
    transition: background-color var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing);
}

.project-card .details-button:hover {
    background-color: var(--clr-accent-hover);
    transform: translateY(-3px);
}

/* Animation for project cards (JS triggered) */
.project-card-fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s var(--transition-easing) calc(var(--item-index) * 0.1s),
                transform 1s var(--transition-easing) calc(var(--item-index) * 0.1s); /* Staggered */
}

.testimonials-section {
    margin-top: var(--space-xl);
    background-color: var(--clr-dark-card);
    padding: var(--space-xl);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.testimonials-section h3 {
    font-size: 2.2em;
    color: var(--clr-text-light);
    margin-bottom: var(--space-xl);
}

.testimonial-carousel {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    /* Add JS for actual carousel functionality (e.g., swiping, dots) */
}

.testimonial-item {
    background-color: var(--clr-dark-bg);
    padding: var(--space-md);
    border-radius: 10px;
    max-width: 480px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); /* Inset shadow for quotes */
    text-align: left;
    flex: 1 1 350px; /* Larger base for testimonials */
    min-width: 280px;
}

.testimonial-item p {
    font-style: italic;
    font-size: 1.1em;
    color: var(--clr-text-secondary);
    margin-bottom: var(--space-sm);
}

.testimonial-item .client-info {
    font-size: 0.95em;
    text-align: right;
    color: var(--clr-accent);
    font-weight: 600;
    margin-top: var(--space-sm);
}

/*----------------------------------------------------*\
  #ALLIES PAGE
\*----------------------------------------------------*/

.allies-section {
    text-align: center;
    background-color: var(--clr-dark-bg);
}

.ally-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.ally-card {
    background-color: var(--clr-dark-card);
    padding: var(--space-md);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-speed) var(--transition-easing),
                box-shadow var(--transition-speed) var(--transition-easing);
    opacity: 0;
    transform: translateY(30px);
}

.ally-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(51, 204, 255, 0.6);
}

.ally-card img {
    max-width: 180px; /* Slightly larger logos */
    height: auto;
    margin-bottom: var(--space-md);
    transition: filter 0.5s var(--transition-easing);
}

.ally-card:hover img {
    filter: grayscale(0) brightness(1) contrast(1); /* Color on hover */
}

.ally-card h3 {
    font-size: 1.6em;
    margin-bottom: var(--space-sm);
    color: var(--clr-accent);
}

.ally-card p {
    font-size: 1em;
    color: var(--clr-text-secondary);
    margin-bottom: var(--space-md);
}

.ally-link {
    display: inline-block;
    background-color: var(--clr-accent);
    color: var(--clr-dark-bg);
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing);
}

.ally-link:hover {
    background-color: var(--clr-accent-hover);
    transform: translateY(-3px);
}

/* Animation for ally cards (JS triggered) */
.ally-card-fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s var(--transition-easing) calc(var(--item-index) * 0.1s),
                transform 1s var(--transition-easing) calc(var(--item-index) * 0.1s); /* Staggered */
}

/*----------------------------------------------------*\
  #FOOTER
\*----------------------------------------------------*/

footer {
    background-color: #000000; /* Pure black footer */
    color: var(--clr-text-secondary);
    text-align: center;
    padding: var(--space-md);
    font-size: 0.9em;
    margin-top: var(--space-xl);
    border-top: 1px solid var(--clr-border-light); /* Subtle top border */
}

.footer-social-icons {
    margin-top: var(--space-sm);
}

.footer-social-icons a {
    color: var(--clr-text-light); /* White icons in footer */
    font-size: 2em; /* Larger icons */
    margin: 0 18px; /* More spacing */
    transition: color var(--transition-speed) var(--transition-easing),
                transform var(--transition-speed) var(--transition-easing);
}

.footer-social-icons a:hover {
    color: var(--clr-accent); /* Accent color on hover */
    transform: translateY(-5px) scale(1.1); /* More pronounced lift */
}

/*----------------------------------------------------*\
  #ANIMATIONS (Keyframes)
\*----------------------------------------------------*/

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

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

/*----------------------------------------------------*\
  #RESPONSIVE DESIGN (Media Queries)
\*----------------------------------------------------*/

@media (max-width: 1024px) {
    h1 {
        font-size: 3.2em;
    }
    h2 {
        font-size: 2.4em;
    }
    .hero-content p {
        font-size: 1.2em;
    }
    .service-grid, .project-grid, .ally-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-md);
    }
    section {
        padding: var(--space-xl) var(--space-md);
    }
    .page-content {
        padding: var(--space-xl) var(--space-md);
    }
    .contact-grid {
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .header {
        padding: 12px var(--space-sm);
    }
    .logo {
        font-size: 1.9em;
    }
    .sidebar {
        width: 280px; /* Slightly smaller sidebar */
        right: -280px;
    }
/* Sidebar Toggle Button (Hamburger Icon) */
.sidebar-toggle {
    background: none; /* Keep background transparent */
    border: none;
    color: transparent; /* Hide any default character */
    font-size: 0;
    cursor: pointer;
    margin-left: var(--space-md);
    width: 35px; /* Maintain fixed width */
    height: 28px; /* Maintain fixed height */
    position: relative; /* Needed for positioning pseudo-elements */
    display: flex; /* Helps in aligning the pseudo-elements if desired, but not for the middle line itself */
    justify-content: center; /* For initial '☰' if not hidden */
    align-items: center; /* For initial '☰' if not hidden */
    padding: 0;
    z-index: 1001;
}

/* Common styles for all three hamburger lines (top, middle, bottom) */
.sidebar-toggle span, /* NEW: This will be our explicit middle line */
.sidebar-toggle::before,
.sidebar-toggle::after {
    background-color: var(--clr-text-light); /* Color of the lines */
    height: 3px; /* Thickness of the lines */
    width: 100%; /* Full width for the lines relative to button width */
    border-radius: 2px; /* Slightly rounded ends for the lines */
    transition: all var(--transition-speed) var(--transition-easing);
}

/* Positioning for pseudo-elements (top and bottom lines) */
.sidebar-toggle::before,
.sidebar-toggle::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Position relative to the button */
    left: 0;
}

.sidebar-toggle::before {
    top: 0; /* Position top line */
}

.sidebar-toggle::after {
    bottom: 0; /* Position bottom line */
}

/* Position the middle line using a span (RECOMMENDED) or adjust the button itself */
/* If you use a <span> for the middle line: */
.sidebar-toggle span {
    display: block; /* Ensure the span takes width/height */
}


/* Hover effect */
.sidebar-toggle:hover span, /* Hover on explicit span */
.sidebar-toggle:hover::before,
.sidebar-toggle:hover::after {
    background-color: var(--clr-accent); /* Change color on hover */
}

/* Animation for when sidebar is active (optional: "X" transform) */
/* The .sidebar.active .sidebar-toggle rule should now target the explicit span */
.sidebar.active .sidebar-toggle span {
    background-color: transparent; /* Hide the middle line */
}

.sidebar.active .sidebar-toggle::before {
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1.5px; /* Adjust to center after rotation */
}

.sidebar.active .sidebar-toggle::after {
    transform: rotate(-45deg);
    bottom: 50%;
    margin-bottom: -1.5px; /* Adjust to center after rotation */
}
    h1 {
        font-size: 2.6em;
    }
    h2 {
        font-size: 2em;
    }
    .section-intro {
        font-size: 1.1em;
        margin-bottom: var(--space-lg);
    }
    .cta-button {
        padding: 14px 30px;
        font-size: 1.1em;
    }
    .contact-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: var(--space-md);
    }
    .contact-form-container, .contact-info-map {
        padding: var(--space-lg) var(--space-md);
    }
    .service-item, .project-card, .ally-card {
        padding: var(--space-md);
    }
    .testimonial-item {
        flex: 1 1 100%; /* Full width testimonials */
        max-width: none;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.6em;
    }
    .sidebar {
        width: 50%; /* Full width sidebar */
        right: -100%;
    }
    .sidebar-close {
        font-size: 2.5em;
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.7em;
        margin-bottom: var(--space-md);
    }
    .hero-content p {
        font-size: 1em;
    }
    .cta-button {
        padding: 12px 25px;
        font-size: 1em;
    }
    section {
        padding: var(--space-lg) var(--space-sm);
    }
    .page-content {
        padding: var(--space-lg) var(--space-sm);
    }
    .service-item .icon {
        font-size: 3.5em;
    }
    .service-item h3 {
        font-size: 1.4em;
    }
    .project-card img {
        height: 200px;
    }
    .footer-social-icons a {
        font-size: 1.7em;
        margin: 10px 10px;
    }
}
/* Sidebar Toggle Button (Hamburger Icon) */
.sidebar-toggle {
    background: none;
    border: none;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    margin-left: -70px; /* This is the line you'll modify */
    width: 35px;
    height: 28px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 1001;
}

/* Common styles for all three hamburger lines (top, middle, bottom) */
.sidebar-toggle span, /* This targets the explicit middle line */
.sidebar-toggle::before,
.sidebar-toggle::after {
    background-color: var(--clr-text-light); /* Color of the lines (white/light grey) */
    height: 3px; /* Thickness of the lines */
    width: 100%; /* Full width for the lines relative to button width */
    border-radius: 2px; /* Slightly rounded ends for the lines */
    transition: all var(--transition-speed) var(--transition-easing);
}

/* Positioning for pseudo-elements (top and bottom lines) */
.sidebar-toggle::before,
.sidebar-toggle::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Position relative to the button */
    left: -200;
}

/* Adjust these 'top' and 'bottom' values to space the lines */
.sidebar-toggle::before {
    top: 5px; /* Top line starts 5px from the top edge of the button */
}

.sidebar-toggle::after {
    bottom: 5px; /* Bottom line ends 5px from the bottom edge of the button */
}

/* Ensure the span (middle line) is a block element to take width/height */
.sidebar-toggle span {
    display: block; /* Make the span behave like a block element */
}


/* Hover effect */
.sidebar-toggle:hover span, /* Hover on explicit span */
.sidebar-toggle:hover::before,
.sidebar-toggle:hover::after {
    background-color: var(--clr-accent); /* Change color on hover */
}

/* Animation for when sidebar is active (optional: "X" transform) */
/* The .sidebar.active .sidebar-toggle rule should now target the explicit span */
.sidebar.active .sidebar-toggle span {
    background-color: transparent; /* Hide the middle line */
}

.sidebar.active .sidebar-toggle::before {
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1.5px; /* Adjust to center after rotation */
}

.sidebar.active .sidebar-toggle::after {
    transform: rotate(-45deg);
    bottom: 50%;
    margin-bottom: -1.5px; /* Adjust to center after rotation */
}