/* 
* BrainSpark Digital - Main Styles
* A modern, clean design for a digital agency
* 
* WHAT THIS FILE DOES:
* Think of this file like the main outfit instructions for our website. 
* Just like how you have different clothes for different occasions, 
* this file tells the website how each part should look and behave.
*/

/* ====== CSS RESET AND BASE STYLES ====== */
/* This section is like pressing the "reset" button on a video game.
   It makes sure all browsers start with the same basic rules,
   so our website looks the same everywhere! */

:root {
    /* ====== ANTHROPIC-INSPIRED DESIGN SYSTEM ====== */
    /* Clean, editorial, sophisticated aesthetic */
    
    /* Primary Backgrounds - Anthropic's warm cream palette */
    --bg-cream: #FAF7F2;          /* Anthropic's main background */
    --bg-warm: #F5F1EA;           /* Slightly warmer cream */
    --bg-primary: #FAF7F2;
    --bg-secondary: #F0EBE3;
    --background-color: #FAF7F2;
    --background-alt: #F0EBE3;
    
    /* Card Backgrounds - Anthropic's muted pastels */
    --card-beige: #E8DDD1;        /* Warm beige cards */
    --card-sage: #C5D6CD;         /* Soft sage/teal cards */
    --card-lavender: #D2D0DE;     /* Muted lavender cards */
    --card-peach: #E8D5C4;        /* Soft peach cards */
    --card-bg: #ffffff;
    
    /* Text Colors - High contrast for readability */
    --text-primary: #191919;      /* Near black - primary text */
    --text-color: #191919;
    --text-secondary: #3D3D3D;    /* Dark gray - secondary text */
    --text-light: #5A5A5A;
    --text-muted: #7A7A7A;        /* Muted gray */
    --header-color: #191919;
    --muted-text: #7A7A7A;
    
    /* Accent Colors - Anthropic style */
    --accent-terracotta: #CC6848; /* Warm orange - primary CTA */
    --accent-black: #191919;      /* Black - primary buttons */
    --accent-sage: #C5D6CD;       /* Sage green */
    --accent-lavender: #D2D0DE;   /* Lavender */
    --primary-color: #CC6848;     /* Orange accent */
    --secondary-color: #191919;   /* Black for contrast */
    --accent-color: #C5D6CD;
    
    /* Footer - Anthropic dark footer */
    --footer-bg: #191919;
    
    /* Semantic Colors */
    --success-color: #4A7C59;
    --warning-color: #CC6848;
    --danger-color: #C45C5C;
    
    /* UI Elements */
    --border-color: #E5E0D8;
    --border-dark: #D4CFC5;
    --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --border-radius: 16px;
    --border-radius-sm: 8px;
    --border-radius-lg: 24px;
    
    /* Typography - Anthropic uses clean, editorial fonts */
    --font-serif: 'Source Serif 4', 'Georgia', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Spacing Scale */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 8rem;
}

/* WEB DEVELOPMENT THEME COLORS 
   These are like different outfits for different pages.
   Web development pages get blue colors because blue = technology and trust */
.web-development-theme {
    --primary-color: #2563eb;      /* Blue - like the color of computer screens */
    --secondary-color: #1e3a8a;    /* Deeper blue - serious and professional */
    --accent-color: #3b82f6;       /* Bright blue - for highlighting cool tech stuff */
    --section-bg: #eff6ff;         /* Super light blue background */
}

/* SEO THEME COLORS
   SEO is about growing websites, so we use green (like plants growing!) */
.seo-theme {
    --primary-color: #059669;      /* Green - growth and success */
    --secondary-color: #065f46;    /* Darker green - stable growth */
    --accent-color: #10b981;       /* Bright green - visible success */
    --section-bg: #ecfdf5;         /* Very light green background */
}

/* AI THEME COLORS
   AI is futuristic and smart, so we use purple (mysterious and intelligent) */
.ai-theme {
    --primary-color: #7c3aed;      /* Purple - innovation and creativity */
    --secondary-color: #5b21b6;    /* Deep purple - advanced technology */
    --accent-color: #8b5cf6;       /* Bright purple - intelligence */
    --section-bg: #f5f3ff;         /* Very light purple background */
}



/* Graphic Design theme removed */

/* UNIVERSAL RESET - This is like cleaning your room before organizing it
   We remove all the default spacing and make sure everything fits properly */
* {
    margin: 0;           /* Remove all default spacing around elements */
    padding: 0;          /* Remove all default inner spacing */
    box-sizing: border-box;  /* Make sure padding and borders don't make things bigger */
}

/* HTML ROOT SETUP - This sets up the foundation of our website */
html {
    scroll-behavior: smooth;  /* When clicking links, scroll smoothly instead of jumping */
    font-size: 62.5%;       /* Makes 1rem = 10px, easier math for us! */
}

/* BODY SETUP - This is like setting the basic rules for the whole website */
body {
    font-family: var(--font-sans);       /* DM Sans - clean grotesque */
    font-size: 1.6rem;                   /* Base text size (16px) */
    line-height: 1.7;                    /* Slightly increased for readability */
    color: var(--text-color);            /* Soft charcoal text */
    background-color: var(--background-color);  /* Warm cream background */
    overflow-x: hidden;                  /* Hide horizontal scrollbars */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* HEADING STYLES - These make our titles look good */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);  /* Playfair Display - literary authority */
    font-weight: 600;        /* Semibold for elegance */
    line-height: 1.15;       /* Tighter line spacing for titles */
    margin-bottom: 1.5rem;   /* Space below each heading */
    color: var(--text-color); /* Soft charcoal for readability */
    letter-spacing: -0.02em; /* Slight negative tracking for polish */
}

/* SPECIFIC HEADING SIZES - Like small, medium, large, extra large shirts! */
h1 {
    font-size: 4.2rem;  /* Biggest heading - for main titles */
}

h2 {
    font-size: 3.6rem;  /* Second biggest - for section titles */
}

h3 {
    font-size: 2.4rem;  /* Medium size - for sub-sections */
}

/* PARAGRAPH STYLES - For regular text content */
p {
    margin-bottom: 1.5rem;    /* Space below each paragraph */
    color: var(--text-light); /* Slightly lighter color than headings */
}

/* LINK STYLES - How clickable text should look */
a {
    color: var(--primary-color);  /* Our main blue color */
    text-decoration: none;        /* Remove the underline */
    transition: var(--transition); /* Smooth color change when hovering */
}

/* LINK HOVER EFFECT - What happens when you move your mouse over links */
a:hover {
    color: var(--secondary-color);  /* Change to darker blue when hovering */
}

/* LIST STYLES - Remove default bullet points and numbers */
ul, ol {
    list-style: none;
}

/* IMAGE STYLES - Make sure images don't break our layout */
img {
    max-width: 100%;  /* Never let images be wider than their container */
    height: auto;     /* Keep the image proportions correct */
    display: block;   /* Make images behave like blocks */
}

/* CONTAINER STYLES - This is like the main wrapper for our content */
.container {
    width: 100%;           /* Take up the full width available */
    max-width: 120rem;     /* But never wider than 1200px */
    margin: 0 auto;        /* Center the container on the page */
    padding: 0 2rem;       /* Add some breathing room on the sides */
}

/* SECTION HEADER STYLES - For the top part of each section */
.section-header {
    text-align: center;    /* Center the text */
    margin-bottom: 5rem;   /* Space below the header */
}

.section-header h2 {
    margin-bottom: 1rem;   /* Small space below the title */
}

.section-header p {
    max-width: 60rem;      /* Don't let the description get too wide */
    margin: 0 auto;        /* Center the description */
}

/* BUTTON STYLES - How our clickable buttons should look */
.btn-primary, .btn-secondary {
    display: inline-block;      /* Make them behave like buttons */
    padding: 1.2rem 2.4rem;     /* Space inside the button */
    border-radius: 5px;         /* Slightly rounded corners */
    font-weight: 500;           /* Make text a bit bold */
    text-align: center;         /* Center the text */
    cursor: pointer;            /* Show hand cursor when hovering */
    transition: var(--transition); /* Smooth effects when hovering */
}

/* PRIMARY BUTTON - Our main action button */
.btn-primary {
    background-color: var(--primary-color);  /* Blue background */
    color: white;                            /* White text */
}

/* PRIMARY BUTTON HOVER EFFECT - What happens when you hover over it */
.btn-primary:hover {
    background-color: var(--secondary-color);  /* Darker blue background */
    color: white;                              /* Keep text white */
    transform: translateY(-3px);               /* Move up slightly (cool effect!) */
    box-shadow: var(--box-shadow);             /* Add shadow underneath */
}

/* SECONDARY BUTTON - Alternative button style */
.btn-secondary {
    background-color: transparent;         /* No background color */
    color: var(--primary-color);          /* Blue text */
    border: 2px solid var(--primary-color); /* Blue border */
}

/* SECONDARY BUTTON HOVER EFFECT */
.btn-secondary:hover {
    background-color: var(--primary-color);  /* Fill with blue on hover */
    color: white;                            /* Change text to white */
    transform: translateY(-3px);             /* Move up slightly */
    box-shadow: var(--box-shadow);           /* Add shadow */
}

/* CENTER BUTTON UTILITY - For centering buttons */
.center-btn {
    text-align: center;  /* Center the button */
    margin-top: 3rem;    /* Add space above */
}

/* ====== HEADER SECTION ====== */
/* This is the navigation bar at the top of the page.
   Think of it like the dashboard of a car - it helps you navigate the website! */

header {
    position: fixed;      /* Stay at the top when scrolling */
    top: 0;              /* Stick to the very top */
    left: 0;             /* Start from the left edge */
    width: 100%;         /* Go all the way across the screen */
    z-index: 1000;       /* Stay above everything else */
    background-color: var(--bg-primary);  /* Warm cream background */
    box-shadow: 0 1px 0 var(--border-color);  /* Subtle bottom border */
    padding: 1.5rem 0;   /* Vertical padding */
}

header .container {
    display: flex;            /* Arrange items in a row */
    justify-content: space-between;  /* Push logo left, menu right */
    align-items: center;      /* Center everything vertically */
}

/* LOGO STYLES - The brand name/logo on the left */
.logo a {
    display: flex;          /* Put logo parts in a row */
    align-items: center;    /* Center them vertically */
    text-decoration: none;  /* Remove underline from logo link */
}

.logo h1 {
    color: var(--text-color);     /* Soft charcoal for the logo */
    font-size: 2.6rem;            /* Refined size */
    font-weight: 700;             /* Bold and strong */
    margin-bottom: 0;             /* Remove space below */
    font-family: var(--font-serif); /* Playfair Display for brand */
    letter-spacing: -0.01em;
}

.logo span {
    color: var(--accent-terracotta);  /* Terracotta accent */
}

/* NAVIGATION SETUP - The menu part */
nav {
    display: flex;          /* Arrange nav items in a row */
    align-items: center;    /* Center them vertically */
}

/* NAVIGATION LINKS - The clickable menu items */
.nav-links {
    display: flex;          /* Put menu items in a row */
    margin: 0;              /* Remove default spacing */
}

.nav-links li {
    margin: 0 1.5rem;       /* Space between each menu item */
    position: relative;     /* Needed for dropdown positioning */
}

.nav-links a {
    color: var(--text-color);      /* Dark color for text */
    font-weight: 500;              /* Medium bold text */
    padding: 0.8rem 0;             /* Vertical padding for easier clicking */
    position: relative;            /* Needed for the active underline */
}

/* NAVIGATION HOVER EFFECTS - What happens when you hover over menu items */
.nav-links a:hover, .nav-links a.active {
    color: var(--primary-color);   /* Change to blue when hovering or active */
}

/* ACTIVE PAGE INDICATOR - Blue line under the current page */
.nav-links a.active::after {
    content: '';                   /* Create an invisible element */
    position: absolute;            /* Position it exactly where we want */
    bottom: 0;                     /* Place it at the bottom */
    left: 0;                       /* Start from the left */
    width: 100%;                   /* Go all the way across */
    height: 2px;                   /* Make it a thin line */
    background-color: var(--primary-color);  /* Blue color */
}

/* DROPDOWN MENU SETUP - For menu items with sub-menus */
.dropdown {
    position: relative;            /* Needed to position the dropdown correctly */
}

/* DROPDOWN CONTENT - The hidden menu that appears on hover */
.dropdown-content {
    position: absolute;            /* Position it relative to the parent */
    top: 100%;                     /* Place it right below the parent */
    left: 0;                       /* Align with left edge */
    background-color: white;       /* White background */
    min-width: 22rem;              /* Minimum width */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* Soft shadow */
    border-radius: 5px;            /* Rounded corners */
    display: none !important;      /* Hidden by default - force hide */
    z-index: 1;                    /* Stay above other content */
    opacity: 0;                    /* Start invisible */
    visibility: hidden;            /* Additional hiding method */
    transition: all 0.3s ease;     /* Smooth transitions */
}

/* Show dropdown only when explicitly activated */
.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

/* DROPDOWN LINK STYLES - Links inside the dropdown */
.dropdown-content a {
    display: block;                /* Make each link take full width */
    padding: 1rem 1.5rem;          /* Comfortable padding */
    color: var(--text-color);      /* Dark text color */
    font-weight: 400;              /* Normal font weight */
}

/* DROPDOWN LINK HOVER - Highlight when hovering over dropdown items */
.dropdown-content a:hover {
    background-color: var(--background-alt);  /* Light gray background */
}

/* SHOW DROPDOWN ON HOVER - Make dropdown appear when hovering */
.dropdown:hover .dropdown-content {
    display: block;                /* Show the dropdown */
}

/* MOBILE DROPDOWN CLICK FUNCTIONALITY */
.dropdown.active .dropdown-content {
    display: block;                /* Show dropdown when active class is present */
}

/* DISABLE HOVER ON TOUCH DEVICES */
@media (hover: none) and (pointer: coarse) {
    .dropdown:hover .dropdown-content {
        display: none;             /* Disable hover on touch devices */
    }
    
    .dropdown.active .dropdown-content {
        display: block;            /* Only show on click/tap */
    }
}

/* KEYFRAME ANIMATIONS FOR MOBILE DROPDOWN */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MOBILE TOGGLE BUTTON - The hamburger menu for phones */
.mobile-toggle {
    display: none;                 /* Hidden on desktop */
    flex-direction: column;        /* Stack the lines vertically */
    cursor: pointer;               /* Show it's clickable */
}

/* MOBILE TOGGLE LINES - The three lines that make the hamburger icon */
.mobile-toggle span {
    display: block;                /* Make each line a block */
    width: 25px;                   /* Line width */
    height: 3px;                   /* Line thickness */
    background-color: var(--text-color);  /* Dark color */
    margin: 2px 0;                 /* Small space between lines */
    transition: var(--transition); /* Smooth animation when changing */
}

/* ====== HERO SECTION ====== */
/* This is the big banner section at the top of the homepage.
   Think of it like a movie poster - it's the first thing people see 
   and it needs to grab their attention immediately! */

.hero {
    padding: 15rem 0 10rem;              /* Lots of space above and below */
    background-color: var(--background-alt);  /* Light gray background */
    position: relative;                  /* Needed for any overlays */
    overflow: hidden;                    /* Hide anything that goes outside */
}

/* HERO LAYOUT - How the content is arranged */
.hero .container {
    display: flex;                       /* Put content and image side by side */
    align-items: center;                 /* Center everything vertically */
    justify-content: space-between;      /* Push content left, image right */
}

/* HERO CONTENT - The text side (left) */
.hero-content {
    flex: 1;                            /* Take up available space */
    max-width: 60rem;                   /* Don't get too wide */
}

/* HERO MAIN TITLE - The big attention-grabbing headline */
.hero-content h1 {
    font-size: 4.8rem;                  /* Really big text! */
    line-height: 1.2;                   /* Tight line spacing */
    margin-bottom: 2rem;                /* Space below the title */
}

/* HERO DESCRIPTION - The smaller text that explains more */
.hero-content p {
    font-size: 1.8rem;                  /* Bigger than normal text */
    margin-bottom: 3rem;                /* Space before the buttons */
}

/* HERO BUTTONS - The action buttons */
.hero-cta {
    display: flex;                      /* Put buttons in a row */
    gap: 1.5rem;                        /* Space between buttons */
}

/* HERO IMAGE - The visual side (right) */
.hero-image {
    flex: 1;                            /* Take up available space */
    display: flex;                      /* Center the image */
    justify-content: flex-end;          /* Push image to the right */
    margin-left: 4rem;                  /* Space between text and image */
}

/* ====== SERVICES SECTION ====== */
/* This section shows what the company offers - like a menu at a restaurant.
   Each service gets its own card to make it easy to understand and choose from. */

.services {
    padding: 8rem 0;                     /* Breathing room above and below */
    background-color: var(--background-color);  /* White background */
}

/* SERVICES GRID LAYOUT - How the service cards are arranged */
.services-grid {
    display: grid;                       /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));  
    /* Make columns that are at least 250px wide, but can grow to fill space */
    gap: 3rem;                           /* Space between each service card */
}

/* INDIVIDUAL SERVICE CARD - Each service gets one of these */
.service-card {
    background-color: var(--background-alt);  /* Light gray background */
    border-radius: 10px;                 /* Rounded corners for a modern look */
    padding: 3rem;                       /* Inner spacing for comfort */
    box-shadow: var(--box-shadow);       /* Soft shadow to make it "float" */
    transition: var(--transition);       /* Smooth animations */
}

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

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    margin-bottom: 2rem;
    font-size: 2.8rem;
}

.service-card h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

.service-card p {
    margin-bottom: 2rem;
}

.learn-more {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--primary-color);
}

.learn-more i {
    margin-left: 0.5rem;
    transition: var(--transition);
}

.learn-more:hover i {
    transform: translateX(5px);
}

/* ====== WHY CHOOSE US SECTION ====== */
.why-choose-us {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    gap: 4rem;
}

.feature {
    display: flex;
    align-items: flex-start;
}

.feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    margin-right: 2rem;
    font-size: 2.4rem;
}

.feature-content h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

/* ====== CTA SECTION ====== */
.cta-section {
    padding: 8rem 0;
    background-color: var(--primary-color);
    text-align: center;
}

.cta-content {
    max-width: 80rem;
    margin: 0 auto;
}

.cta-content h2 {
    color: white;
    font-size: 3.6rem;
    margin-bottom: 2rem;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.8rem;
    margin-bottom: 3rem;
}

.cta-section .btn-primary {
    background-color: white;
    color: var(--primary-color);
}

.cta-section .btn-primary:hover {
    background-color: var(--secondary-color);
    color: white;
}

/* ====== TESTIMONIALS SECTION ====== */
.testimonials {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.testimonial-slider {
    max-width: 80rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.testimonial {
    padding: 2rem;
    background-color: var(--background-alt);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.testimonial-content {
    padding: 2rem 2.5rem;
    position: relative;
}

.testimonial-content::before {
    content: '\201C';
    font-size: 8rem;
    position: absolute;
    top: -2rem;
    left: 0;
    color: var(--primary-color);
    opacity: 0.2;
}

.testimonial-content p {
    position: relative;
    z-index: 1;
    font-size: 1.8rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    padding: 0 2.5rem;
}

.testimonial-author img {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1.5rem;
}

.testimonial-author h4 {
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.testimonial-author p {
    margin-bottom: 0;
    font-size: 1.4rem;
}

.testimonial-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}

.prev-btn, .next-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.prev-btn:hover, .next-btn:hover {
    background: var(--secondary-color);
}

.testimonial-dots {
    display: flex;
    align-items: center;
    margin: 0 2rem;
}

.dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #ddd;
    margin: 0 0.5rem;
    cursor: pointer;
}

.dot.active {
    background-color: var(--primary-color);
}

/* ====== CLIENTS SECTION ====== */
.clients {
    padding: 6rem 0;
    background-color: var(--background-alt);
}

.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.client-logo {
    flex: 0 0 18rem;
    display: flex;
    justify-content: center;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition);
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ====== BLOG PREVIEW SECTION ====== */
.blog-preview {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem;
}

.blog-card {
    background-color: var(--background-alt);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

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

.blog-image {
    height: auto;
    aspect-ratio: 1 / 1; /* square cards site-wide */
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

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

.blog-content {
    padding: 2rem;
}

.blog-category {
    display: inline-block;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.blog-content h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.blog-content p {
    margin-bottom: 1.5rem;
}

.read-more {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--primary-color);
}

.read-more i {
    margin-left: 0.5rem;
    transition: var(--transition);
}

.read-more:hover i {
    transform: translateX(5px);
}

/* ====== FOOTER ====== */
footer {
    background-color: var(--footer-bg);  /* Near black #111111 */
    color: rgba(255, 255, 255, 0.9);
    padding: 6rem 0 2rem;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 5rem;
    margin-bottom: 5rem;
}

.footer-logo h2 {
    color: white;
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-serif);
}

.footer-logo span {
    color: var(--accent-terracotta);
}

.footer-col p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    transition: var(--transition);
    position: relative;
}

.social-links a i {
    font-size: 1.6rem;
    line-height: 1;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.social-links a:hover {
    background-color: var(--primary-color);
    transform: translateY(-5px);
}

.footer-col h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.footer-links li {
    margin-bottom: 1rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--accent-terracotta);
    padding-left: 0.5rem;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.contact-info i {
    margin-right: 1rem;
    margin-top: 0.3rem;
    color: var(--accent-terracotta);
}

.contact-info a {
    color: rgba(255, 255, 255, 0.7);
}

.contact-info a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.copyright p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
    font-size: 1.4rem;
}

/* ====== PAGE HEADER ====== */
.page-header {
    padding: 15rem 0 6rem;
    background-color: var(--background-alt);
    text-align: center;
}

.page-header h1 {
    margin-bottom: 1.5rem;
}

.page-header p {
    max-width: 70rem;
    margin: 0 auto;
    font-size: 1.8rem;
}

/* ====== SERVICES OVERVIEW ====== */
.services-overview {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.services-cards {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.service-large-card {
    display: flex;
    background-color: var(--background-alt);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.service-large-card:hover {
    transform: translateY(-5px);
}

.service-large-card .service-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    height: auto;
    background-color: var(--primary-color);
    color: white;
    font-size: 4rem;
}

.service-large-card .service-content {
    padding: 3rem;
    flex: 1;
}

.service-large-card h3 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}

.service-features {
    margin: 2rem 0;
}

.service-features ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}

.service-features li {
    display: flex;
    align-items: center;
}

.service-features i {
    color: var(--success-color);
    margin-right: 1rem;
}

/* ====== PROCESS SECTION ====== */
.our-process {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.process-steps {
    max-width: 80rem;
    margin: 0 auto;
    position: relative;
}

.process-steps::before {
    display: none;
}

.process-step {
    display: flex;
    margin-bottom: 5rem;
    position: relative;
}

.process-step:last-child {
    margin-bottom: 0;
}

.step-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9rem;
    height: 9rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 3.6rem;
    font-weight: 700;
    margin-right: 3rem;
    position: relative;
    z-index: 1;
}

.step-content {
    padding-top: 1rem;
}

.step-content h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

/* ====== FAQ SECTION ====== */
.faq {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.faq-container {
    max-width: 80rem;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.faq-question {
    padding: 2rem;
    background-color: var(--background-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question h3 {
    margin-bottom: 0;
    font-size: 1.8rem;
}

.faq-question i {
    color: var(--primary-color);
    font-size: 1.8rem;
    transition: var(--transition);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 0 2rem 2rem;
    max-height: 50rem;
}

/* ====== ANIMATION CLASSES ====== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====== SCROLLED HEADER ====== */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* ====== UTILITY CLASSES ====== */
.no-scroll {
    overflow: hidden;
}

/* ====== CONTACT SECTION ====== */
.contact-section {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
}

.contact-info h2 {
    margin-bottom: 2rem;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    margin-right: 2rem;
    font-size: 2rem;
    flex-shrink: 0;
}

.method-details h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.method-details p, .method-details a {
    color: var(--text-light);
    margin-bottom: 0;
}

.social-connect {
    margin-top: 4rem;
}

.social-connect h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    transition: var(--transition);
    font-size: 1.8rem;
}

.social-icons a:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-5px);
}

.contact-form-container {
    background-color: var(--background-alt);
    padding: 4rem;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.contact-form-container h2 {
    margin-bottom: 2.5rem;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 0.3rem;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--text-light);
}

.form-submit {
    grid-column: 1 / -1;
    margin-top: 1rem;
}

.form-submit .btn-primary {
    padding: 1.2rem 3rem;
}

.form-success {
    text-align: center;
    padding: 4rem 2rem;
    display: none;
}

.form-success i {
    font-size: 6rem;
    color: var(--success-color);
    margin-bottom: 2rem;
}

.form-success h3 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}

/* ====== MAP SECTION ====== */
.map-section {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

/* ====== ABOUT PAGE STYLES ====== */
.about-intro {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.about-text h2 {
    margin-bottom: 2.5rem;
}

.about-text p {
    margin-bottom: 2rem;
}

.about-image {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.about-image img {
    width: 100%;
    height: auto;
    transition: var(--transition);
}

.about-image:hover img {
    transform: scale(1.05);
}

/* Core Values Section */
.core-values {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem;
}

.value-card {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 3rem;
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
}

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

.value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    margin: 0 auto 2rem;
    font-size: 3rem;
}

.value-card h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

/* Team Section */
.team-section {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.team-grid {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.team-member {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    background-color: var(--background-alt);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.member-image {
    height: 100%;
    position: relative;
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info {
    padding: 4rem;
}

.member-info h3 {
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
}

.member-title {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 2rem;
}

.member-bio {
    margin-bottom: 2rem;
}

.member-social {
    display: flex;
    gap: 1.5rem;
}

.member-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    transition: var(--transition);
}

.member-social a:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-5px);
}

/* Company Stats Section */
.company-stats {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.stats-content {
    max-width: 100rem;
    margin: 0 auto;
}

.stats-text {
    text-align: center;
    margin-bottom: 5rem;
}

.stats-text h2 {
    margin-bottom: 2rem;
}

.stats-text p {
    max-width: 70rem;
    margin: 0 auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 3rem;
}

.stat-item {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.stat-item:hover {
    transform: translateY(-10px);
}

.stat-number {
    display: block;
    font-size: 5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.stat-item p {
    font-size: 1.8rem;
    margin-bottom: 0;
    font-weight: 500;
}

/* ====== SERVICE PAGES STYLES ====== */
.service-hero {
    padding: 15rem 0 10rem;
    background-color: var(--background-alt);
    position: relative;
    overflow: hidden;
}

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

.service-hero-content {
    flex: 1;
    max-width: 60rem;
}

.service-hero-content h1 {
    font-size: 4.8rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.service-hero-content p {
    font-size: 1.8rem;
    margin-bottom: 3rem;
}

.service-hero-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-left: 4rem;
}

/* Client Problems Section */
.client-problems {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 3rem;
}

.problem-card {
    background-color: var(--background-alt);
    border-radius: 10px;
    padding: 3rem;
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
}

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

.problem-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    margin: 0 auto 2rem;
    font-size: 2.8rem;
}

.problem-card h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

/* Solution Section */
.service-solution {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.solution-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.solution-text h2 {
    margin-bottom: 2.5rem;
}

.solution-text p {
    margin-bottom: 2rem;
}

.solution-text .btn-primary {
    margin-top: 1rem;
}

.solution-image {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.solution-image img {
    width: 100%;
    height: auto;
    transition: var(--transition);
}

.solution-image:hover img {
    transform: scale(1.05);
}

/* Service Features Section */
.service-features {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.features-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4rem;
}

.feature-item:last-child {
    margin-bottom: 0;
}

.feature-item .feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    margin-right: 2rem;
    font-size: 2.4rem;
}

.feature-item .feature-content h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

/* Process Section */
.service-process {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 3rem;
}

.process-card {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 3rem;
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
    position: relative;
}

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

.process-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 auto 2rem;
}

.process-card h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

/* Portfolio Section */
.service-portfolio {
    padding: 8rem 0;
    background-color: var(--background-color);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem;
}

.portfolio-item {
    background-color: var(--background-alt);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.portfolio-item:hover {
    transform: translateY(-10px);
}

.portfolio-image {
    height: 25rem;
    position: relative;
    overflow: hidden;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.portfolio-item:hover .portfolio-image img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(67, 97, 238, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-content {
    padding: 2rem;
}

.portfolio-content h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.portfolio-content p {
    margin-bottom: 0;
}

/* Testimonials for Service Pages */
.service-testimonials {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

/* FAQ for Service Pages */
.service-faq {
    padding: 8rem 0;
    background-color: var(--background-color);
}

/* Related Services Section */
.related-services {
    padding: 8rem 0;
    background-color: var(--background-alt);
}

.related-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem;
}

.related-service-card {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 3rem;
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
}

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

.related-service-icon {
    display: inline-grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    margin: 0 auto 2rem;
    font-size: 2.8rem;
    line-height: 1;
}

.related-service-card h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

/* Service Pages Theme-Specific Styling */
/* These classes override the default backgrounds for theme-specific sections */

/* For service hero sections */
.web-development-theme .service-hero,
.web-development-theme .service-solution,
.web-development-theme .service-process,
.web-development-theme .service-testimonials,
.web-development-theme .related-services,
.web-development-theme .service-faq:nth-child(even) {
    background-color: var(--section-bg);
}

.seo-theme .service-hero,
.seo-theme .service-solution,
.seo-theme .service-process,
.seo-theme .service-testimonials,
.seo-theme .related-services,
.seo-theme .service-faq:nth-child(even) {
    background-color: var(--section-bg);
}

.ai-theme .service-hero,
.ai-theme .service-solution,
.ai-theme .service-process,
.ai-theme .service-testimonials,
.ai-theme .related-services,
.ai-theme .service-faq:nth-child(even) {
    background-color: var(--section-bg);
}

/* Removed design-theme overrides */

/* Custom problem card color by theme */
.web-development-theme .problem-icon,
.seo-theme .problem-icon,
.ai-theme .problem-icon,
.web-development-theme .process-number,
.seo-theme .process-number,
.ai-theme .process-number,
.web-development-theme .related-service-icon,
.seo-theme .related-service-icon,
.ai-theme .related-service-icon {
    background-color: var(--primary-color);
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
    html {
        font-size: 55%; /* Slightly reduce base font size on mobile */
    }
    
    h1 {
        font-size: 3.6rem;
    }
    
    h2 {
        font-size: 2.8rem;
    }
    
    /* Service hero section responsiveness */
    .service-hero .container {
        flex-direction: column;
    }
    
    .service-hero-content {
        max-width: 100%;
        text-align: center;
        margin-bottom: 4rem;
    }
    
    .service-hero-image {
        margin-left: 0;
    }
    
    /* Solution section responsiveness */
    .solution-content {
        grid-template-columns: 1fr;
    }
    
    .solution-text {
        order: 1;
    }
    
    .solution-image {
        order: 0;
        margin-bottom: 3rem;
    }
    
    /* Feature columns responsiveness */
    .features-columns {
        grid-template-columns: 1fr;
    }
    
    /* Portfolio responsiveness */
    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    }
    
    /* Related services responsiveness */
    .related-services-grid {
        grid-template-columns: 1fr;
    }
    
    /* Hero CTA responsiveness */
    .hero-cta {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    /* Mobile navigation toggle display */
    .mobile-toggle {
        display: flex;
    }
    
    /* Hide navigation on mobile */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--background-color);
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        margin: 1rem 0;
    }
    
    .dropdown-content {
        position: static;
        box-shadow: none;
        display: none;
        padding-left: 2rem;
        background-color: var(--background-alt);
        border-radius: 8px;
        margin-top: 1rem;
        padding: 1rem 2rem;
        border-left: 3px solid var(--primary-color);
    }
    
    .dropdown.active .dropdown-content {
        display: block;
        animation: slideDown 0.3s ease-out;
    }
    
    /* Mobile dropdown link styles */
    .dropdown-content a {
        padding: 1.2rem 1rem;
        margin: 0.3rem 0;
        border-radius: 8px;
        font-size: 1.5rem;
        font-weight: 500;
        transition: all 0.2s ease;
        display: block;
        position: relative;
        min-height: 44px; /* Touch target minimum */
        line-height: 1.2;
    }
    
    .dropdown-content a:hover,
    .dropdown-content a:focus,
    .dropdown-content a:active {
        background-color: var(--primary-color);
        color: white;
        transform: translateX(5px);
    }
    
    /* Touch device optimizations */
    @media (hover: none) and (pointer: coarse) {
        .dropdown-content a {
            padding: 1.5rem 1rem;
            font-size: 1.6rem;
            min-height: 48px; /* Larger touch targets on mobile */
        }
        
        .dropdown-content a:active {
            background-color: var(--primary-color);
            color: white;
            transform: scale(0.98);
        }
    }
    
    /* Mobile dropdown visual state enhancement */
    .dropdown.active > a {
        background-color: rgba(37, 99, 235, 0.1);
        color: var(--primary-color);
        border-radius: 8px;
    }
    
    /* Improve mobile nav link spacing */
    .nav-links li {
        margin: 0.8rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-links li:last-child {
        border-bottom: none;
    }
    
    .nav-links a {
        padding: 1.2rem 0;
        border-radius: 8px;
        transition: all 0.2s ease;
        font-size: 1.6rem;
        font-weight: 500;
        display: block;
        position: relative;
    }
    
    /* Ensure dropdown arrow is visible and properly positioned */
    .dropdown > a {
        padding-right: 3rem !important;
    }
    
    .dropdown > a::after {
        content: '\f107';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.4rem;
        color: var(--text-light);
        transition: all 0.3s ease;
    }
    
    .dropdown.active > a::after {
        transform: translateY(-50%) rotate(180deg);
        color: var(--primary-color);
    }
    
    /* Make sure dropdown content is properly hidden by default */
    .dropdown-content {
        display: none !important;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }
    
    .dropdown.active .dropdown-content {
        display: block !important;
        opacity: 1;
        transform: translateY(0);
        animation: slideDown 0.3s ease-out;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 50%; /* Further reduce base font size on smaller screens */
    }
    
    .cta-btn {
        display: none; /* Hide the top-right CTA on very small screens */
    }
    
    /* Single column for process cards */
    .process-grid {
        grid-template-columns: 1fr;
    }
    
    /* Adjust testimonials for small screens */
    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }
    
    .testimonial-author img {
        margin: 0 auto 1.5rem;
    }
}

/* Modern Color Scheme */
body {
    background: var(--background-color);
    color: var(--text-color);
    font-family: 'Poppins', 'Montserrat', Arial, sans-serif;
}

h1, h2, h3, h4 {
    color: var(--header-color);
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Blog Hero */
.blog-hero {
    background: var(--background-alt);
    color: var(--text-color);
    padding: 8rem 0 4rem 0;
    text-align: center;
}
.blog-hero h1 {
    font-size: 3.6rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}
.blog-hero-subheadline {
    font-size: 1.8rem;
    color: var(--text-light);
}

/* Featured Post */
.featured-post {
    padding: 0 0 4rem 0;
}
.featured-post-card {
    display: flex;
    flex-wrap: wrap;
    background: var(--background-alt);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    align-items: stretch;
}
.featured-post-image {
    flex: 1 1 320px;
    min-width: 320px;
    max-width: 480px;
    background: var(--background-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.featured-post-content {
    flex: 2 1 320px;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.featured-post-content h2 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}
.blog-category {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}

/* Blog Main Grid */
.blog-main-grid {
    display: grid;
    grid-template-columns: 3fr 1.2fr;
    gap: 4rem;
    margin-top: 2rem;
}
.blog-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.blog-card {
    background: var(--background-alt);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.blog-card:hover {
    transform: translateY(-10px);
}
.blog-image img {
    width: 100%;
    height: 18rem;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.blog-content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-content h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}
.blog-content p {
    color: var(--text-light);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.read-more {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    margin-top: auto;
    transition: var(--transition);
}
.read-more i {
    margin-left: 0.5rem;
    transition: var(--transition);
}
.read-more:hover {
    color: var(--secondary-color);
}
.read-more:hover i {
    transform: translateX(5px);
}

/* Blog Sidebar */
.blog-sidebar {
    background: var(--background-alt);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.sidebar-section h4 {
    color: var(--text-color);
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
}
.blog-search {
    display: flex;
    gap: 0.5rem;
}
.blog-search input {
    flex: 1;
    padding: 1rem 1.2rem;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    font-size: 1.5rem;
}
.blog-search button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 1rem 1.2rem;
    cursor: pointer;
    transition: var(--transition);
}
.blog-search button:hover {
    background: var(--secondary-color);
}
.blog-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-categories li {
    margin-bottom: 0.7rem;
}
.blog-categories a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}
.blog-categories a:hover {
    color: var(--secondary-color);
}
.newsletter-signup {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.newsletter-signup input {
    flex: 1;
    padding: 1rem 1.2rem;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    font-size: 1.5rem;
}
.newsletter-signup button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}
.newsletter-signup button:hover {
    background: var(--secondary-color);
}
.newsletter-note {
    color: var(--text-light);
    font-size: 1.3rem;
}

/* Responsive Design */
@media (max-width: 1100px) {
    .blog-main-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .blog-sidebar {
        margin-top: 2rem;
    }
}
@media (max-width: 900px) {
    .blog-list {
        grid-template-columns: 1fr;
    }
    .featured-post-card {
        flex-direction: column;
    }
    .featured-post-image, .featured-post-content {
        max-width: 100%;
        min-width: 0;
    }
}
@media (max-width: 600px) {
    .blog-hero h1 {
        font-size: 2.4rem;
    }
    .featured-post-content {
        padding: 1.5rem 1rem;
    }
    .blog-content {
        padding: 1rem 0.7rem 0.7rem 0.7rem;
    }
    .blog-sidebar {
        padding: 1.2rem 0.7rem;
    }
}

/* AI Success Section Styles */
.ai-success-section {
    padding: 8rem 0;
    background-color: var(--section-bg);
}

.ai-success-section .section-header {
    text-align: center;
    margin-bottom: 6rem;
}

.ai-success-section .section-header h2 {
    font-size: 3.6rem;
    color: var(--header-color);
    margin-bottom: 2rem;
    font-weight: 700;
}

.success-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45rem, 1fr));
    gap: 3rem;
    max-width: 120rem;
    margin: 0 auto;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2.5rem;
    background-color: var(--background-color);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

.benefit-icon i {
    font-size: 2.4rem;
    color: #10B981; /* Green checkmark color */
}

.benefit-item p {
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
    font-weight: 500;
}

/* AI theme specific background */
.ai-theme .ai-success-section {
    background-color: var(--section-bg);
}

/* Design Success Section Styles */
/* Removed design-success-section as Graphic Design was dropped */

/* Removed */

/* Removed */

/* Removed */