/* ===========================================
   GBTECH WORLD INNOVATIONS LIMITED STYLESHEET
   Author: GBTech Web Team
   Version: 3.0
   Date: 2024-01-17
   =========================================== */

/* ====================
   CSS VARIABLES (Custom Properties)
   Reusable values throughout the website
   ==================== */
:root {
    /* COLOR PALETTE */
    --primary-color: #FF6B00;           /* Main orange brand color */
    --primary-dark: #CC5500;            /* Darker orange for hover states */
    --primary-light: #FF8C42;           /* Lighter orange for accents */
    --secondary-color: #003366;         /* Dark blue for professionalism */
    --accent-color: #00A859;            /* Green for success/savings */
    --accent-light: #4CD964;            /* Light green */
    --dark-color: #212529;              /* Main text color */
    --light-color: #F8F9FA;             /* Light background */
    --gray-color: #6C757D;              /* Gray text */
    --light-gray: #E9ECEF;              /* Light borders/backgrounds */
    --white: #FFFFFF;                   /* Pure white */
    --black: #000000;                   /* Pure black */
    
    /* SHADOWS */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);      /* Small shadow */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);     /* Medium shadow */
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);    /* Large shadow */
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.25);   /* Extra large shadow */
    
    /* TRANSITIONS */
    --transition-fast: 0.2s ease;       /* Fast animations */
    --transition-normal: 0.3s ease;     /* Normal animations */
    --transition-slow: 0.5s ease;       /* Slow animations */
    
    /* BORDER RADIUS */
    --radius-sm: 4px;                   /* Small rounded corners */
    --radius-md: 8px;                   /* Medium rounded corners */
    --radius-lg: 12px;                  /* Large rounded corners */
    --radius-xl: 20px;                  /* Extra large rounded corners */
    --radius-circle: 50%;               /* Perfect circle */
    
    /* SPACING */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-2xl: 3rem;    /* 48px */
    --space-3xl: 4rem;    /* 64px */
    
    /* FONT SIZES */
    --font-xs: 0.75rem;   /* 12px */
    --font-sm: 0.875rem;  /* 14px */
    --font-base: 1rem;    /* 16px */
    --font-lg: 1.125rem;  /* 18px */
    --font-xl: 1.25rem;   /* 20px */
    --font-2xl: 1.5rem;   /* 24px */
    --font-3xl: 1.875rem; /* 30px */
    --font-4xl: 2.25rem;  /* 36px */
    --font-5xl: 3rem;     /* 48px */
    
    /* CONTAINER WIDTHS */
    --container-sm: 100%;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
}

/* ====================
   CSS RESET & BASE STYLES
   Remove browser defaults and set base styles
   ==================== */
* {
    margin: 0;                          /* Remove default margin */
    padding: 0;                         /* Remove default padding */
    box-sizing: border-box;             /* Include padding/border in element size */
}

html {
    scroll-behavior: smooth;            /* Smooth scrolling for anchor links */
    font-size: 16px;                    /* Base font size */
}

body {
    font-family: 'Roboto', sans-serif;  /* Main body font */
    line-height: 1.6;                   /* Line height for readability */
    color: var(--dark-color);           /* Text color */
    background-color: var(--white);     /* Background color */
    overflow-x: hidden;                 /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;/* Smooth fonts on WebKit */
    -moz-osx-font-smoothing: grayscale; /* Smooth fonts on Firefox */
}

/* ====================
   TYPOGRAPHY
   Headings and text styles
   ==================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Headings use Poppins font */
    font-weight: 600;                   /* Semi-bold weight */
    line-height: 1.3;                   /* Tighter line height */
    margin-bottom: var(--space-md);     /* Bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
}

h1 { font-size: var(--font-5xl); }      /* 48px */
h2 { font-size: var(--font-4xl); }      /* 36px */
h3 { font-size: var(--font-3xl); }      /* 30px */
h4 { font-size: var(--font-2xl); }      /* 24px */
h5 { font-size: var(--font-xl); }       /* 20px */
h6 { font-size: var(--font-lg); }       /* 18px */

p {
    margin-bottom: var(--space-md);     /* Paragraph spacing */
    font-size: var(--font-base);        /* Base font size */
}

a {
    color: var(--primary-color);        /* Link color */
    text-decoration: none;              /* Remove underline */
    transition: color var(--transition-normal); /* Smooth color transition */
}

a:hover {
    color: var(--primary-dark);         /* Darker on hover */
}

/* ====================
   LAYOUT UTILITIES
   Reusable layout classes
   ==================== */
.container {
    width: 100%;                        /* Full width */
    max-width: var(--container-xxl);    /* Maximum width */
    margin: 0 auto;                     /* Center container */
    padding: 0 var(--space-lg);         /* Horizontal padding */
}

.section {
    padding: var(--space-3xl) 0;        /* Section padding */
}

.section-header {
    text-align: center;                 /* Center header content */
    margin-bottom: var(--space-3xl);    /* Bottom margin */
}

.section-title {
    font-size: var(--font-4xl);         /* Section title size */
    color: var(--secondary-color);      /* Dark blue color */
    position: relative;                  /* For pseudo-element */
    display: inline-block;               /* Allow width adjustment */
    margin-bottom: var(--space-sm);     /* Bottom margin */
}

.section-title::after {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position relative to title */
    bottom: -10px;                      /* Position below title */
    left: 50%;                          /* Center horizontally */
    transform: translateX(-50%);        /* Perfect centering */
    width: 80px;                        /* Width of underline */
    height: 4px;                        /* Height of underline */
    background-color: var(--primary-color); /* Orange underline */
    border-radius: var(--radius-sm);    /* Rounded corners */
}

.section-subtitle {
    font-size: var(--font-lg);          /* Subtitle size */
    color: var(--gray-color);           /* Gray color */
    max-width: 700px;                   /* Maximum width */
    margin: 0 auto;                     /* Center subtitle */
}

/* ====================
   BUTTONS
   Button styles and variations
   ==================== */
.btn {
    display: inline-block;              /* Inline block display */
    padding: var(--space-md) var(--space-xl); /* Button padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    font-weight: 500;                   /* Medium font weight */
    text-decoration: none;              /* Remove underline */
    transition: all var(--transition-normal); /* Smooth transitions */
    font-family: 'Poppins', sans-serif; /* Button font */
    border: none;                       /* Remove border */
    cursor: pointer;                    /* Pointer cursor */
    font-size: var(--font-base);        /* Base font size */
    text-align: center;                 /* Center text */
    position: relative;                 /* For hover effects */
    overflow: hidden;                   /* Contain pseudo-elements */
}

.btn-primary {
    background-color: var(--primary-color); /* Orange background */
    color: var(--white);                /* White text */
    border: 2px solid var(--primary-color); /* Orange border */
}

.btn-primary:hover {
    background-color: var(--primary-dark); /* Darker orange on hover */
    border-color: var(--primary-dark);  /* Darker border */
    transform: translateY(-3px);        /* Lift effect */
    box-shadow: var(--shadow-lg);       /* Add shadow */
}

.btn-secondary {
    background-color: transparent;      /* Transparent background */
    color: var(--primary-color);        /* Orange text */
    border: 2px solid var(--primary-color); /* Orange border */
}

.btn-secondary:hover {
    background-color: var(--primary-color); /* Orange background on hover */
    color: var(--white);                /* White text on hover */
    transform: translateY(-3px);        /* Lift effect */
    box-shadow: var(--shadow-lg);       /* Add shadow */
}

.btn i {
    margin-right: var(--space-sm);      /* Space between icon and text */
}

/* ====================
   HEADER & NAVIGATION
   Top navigation bar styles
   ==================== */
.header {
    position: fixed;                    /* Fixed at top */
    top: 0;                             /* Position at top */
    left: 0;                            /* Position at left */
    width: 100%;                        /* Full width */
    z-index: 1000;                      /* Above all content */
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    backdrop-filter: blur(10px);        /* Glass effect */
    box-shadow: var(--shadow-sm);       /* Subtle shadow */
    padding: var(--space-md) 0;         /* Vertical padding */
    transition: all var(--transition-normal); /* Smooth transitions */
}

.header.scrolled {
    padding: var(--space-sm) 0;         /* Smaller padding when scrolled */
    background-color: rgba(255, 255, 255, 0.98); /* More opaque when scrolled */
    box-shadow: var(--shadow-md);       /* Deeper shadow when scrolled */
}

.nav-container {
    display: flex;                      /* Flex container */
    justify-content: space-between;     /* Space between logo and menu */
    align-items: center;                /* Center vertically */
    max-width: var(--container-xxl);    /* Maximum width */
    margin: 0 auto;                     /* Center container */
    padding: 0 var(--space-lg);         /* Horizontal padding */
}

/* LOGO STYLES */
.logo {
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-md);               /* Space between image and text */
    text-decoration: none;              /* Remove underline */
}

.logo img {
    height: 50px;                       /* Logo height */
    width: auto;                        /* Auto width */
    transition: transform var(--transition-normal); /* Smooth scale */
}

.logo:hover img {
    transform: scale(1.05);             /* Slight scale on hover */
}

.logo-text h1 {
    font-size: var(--font-xl);          /* Company name size */
    margin-bottom: 0;                   /* Remove bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
    line-height: 1.2;                   /* Tight line height */
}

.logo-text p {
    font-size: var(--font-xs);          /* Smaller text */
    color: var(--gray-color);           /* Gray color */
    margin-bottom: 0;                   /* Remove bottom margin */
    line-height: 1;                     /* Single line height */
}

/* NAVIGATION MENU */
.nav-menu {
    display: flex;                      /* Flex container */
    list-style: none;                   /* Remove bullets */
    gap: var(--space-xl);               /* Space between items */
    align-items: center;                /* Center vertically */
}

.nav-link {
    text-decoration: none;              /* Remove underline */
    color: var(--dark-color);           /* Dark text color */
    font-weight: 500;                   /* Medium weight */
    transition: color var(--transition-normal); /* Smooth color transition */
    position: relative;                  /* For underline effect */
    padding: var(--space-sm) 0;         /* Vertical padding */
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-color);        /* Orange on hover/active */
}

.nav-link.active::after {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position relative to link */
    bottom: 0;                          /* Position at bottom */
    left: 0;                            /* Start from left */
    width: 100%;                        /* Full width */
    height: 2px;                        /* Height of underline */
    background-color: var(--primary-color); /* Orange underline */
    border-radius: var(--radius-sm);    /* Rounded corners */
}

.nav-cta {
    background-color: var(--primary-color); /* Orange background */
    color: var(--white) !important;     /* White text (important overrides) */
    padding: var(--space-sm) var(--space-lg); /* Button padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    font-weight: 600;                   /* Bold weight */
    transition: all var(--transition-normal); /* Smooth transitions */
}

.nav-cta:hover {
    background-color: var(--primary-dark); /* Darker orange on hover */
    transform: translateY(-2px);        /* Lift effect */
    box-shadow: var(--shadow-md);       /* Add shadow */
}

/* MOBILE MENU TOGGLE */
.menu-toggle {
    display: none;                      /* Hidden on desktop */
    cursor: pointer;                    /* Pointer cursor */
    flex-direction: column;             /* Stack bars vertically */
    gap: 4px;                           /* Space between bars */
    padding: var(--space-sm);           /* Padding around toggle */
    z-index: 1001;                      /* Above navigation */
}

.bar {
    width: 25px;                        /* Bar width */
    height: 3px;                        /* Bar height */
    background-color: var(--dark-color); /* Dark color */
    transition: all var(--transition-normal); /* Smooth transitions */
    border-radius: var(--radius-sm);    /* Rounded ends */
}

.menu-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Rotate first bar */
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;                         /* Hide middle bar */
}

.menu-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px); /* Rotate third bar */
}

/* ====================
   HERO SECTION
   Main banner section styles
   ==================== */
.hero {
    padding-top: 150px;                 /* Space for fixed header */
    padding-bottom: var(--space-3xl);   /* Bottom padding */
    background: linear-gradient(        /* Gradient overlay */
        rgba(0, 51, 102, 0.9),         /* Dark blue with transparency */
        rgba(0, 51, 102, 0.85)         /* Slightly lighter */
    ), url('images/hero-bg.jpg.jpeg');      /* Background image */
    background-size: cover;             /* Cover entire area */
    background-position: center;        /* Center image */
    background-attachment: fixed;       /* Parallax effect */
    color: var(--white);                /* White text */
    text-align: center;                 /* Center text */
    position: relative;                  /* For positioning children */
    overflow: hidden;                   /* Hide overflow */
}

.hero::before {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    top: 0;                             /* Position at top */
    left: 0;                            /* Position at left */
    width: 100%;                        /* Full width */
    height: 100%;                       /* Full height */
    background: radial-gradient(        /* Radial gradient overlay */
        circle at 30% 20%,             /* Gradient center */
        rgba(255, 107, 0, 0.2) 0%,     /* Orange glow */
        transparent 50%                /* Transparent edges */
    );
    pointer-events: none;               /* Don't interfere with clicks */
}

.hero-content {
    max-width: 800px;                   /* Maximum content width */
    margin: 0 auto var(--space-3xl);    /* Center and add bottom margin */
    position: relative;                  /* For z-index */
    z-index: 1;                         /* Above background */
}

.hero-title {
    font-size: var(--font-5xl);         /* Large title */
    margin-bottom: var(--space-lg);     /* Bottom margin */
    line-height: 1.2;                   /* Tight line height */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow */
    animation: fadeInUp 1s ease-out;    /* Entrance animation */
}

.hero-title span {
    color: var(--primary-color);        /* Highlighted text in orange */
    display: inline-block;               /* Allow transform */
    position: relative;                  /* For pseudo-element */
}

.hero-title span::after {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    bottom: 5px;                        /* Position below text */
    left: 0;                            /* Start from left */
    width: 100%;                        /* Full width */
    height: 3px;                        /* Height of underline */
    background-color: var(--primary-color); /* Orange underline */
    border-radius: var(--radius-sm);    /* Rounded corners */
    animation: widthGrow 1.5s ease-out; /* Growing animation */
}

.hero-subtitle {
    font-size: var(--font-xl);          /* Subtitle size */
    margin-bottom: var(--space-2xl);    /* Bottom margin */
    opacity: 0.9;                       /* Slightly transparent */
    animation: fadeInUp 1s ease-out 0.3s both; /* Delayed animation */
}

.hero-buttons {
    display: flex;                      /* Flex container */
    gap: var(--space-lg);               /* Space between buttons */
    justify-content: center;            /* Center buttons */
    animation: fadeInUp 1s ease-out 0.6s both; /* Delayed animation */
}

.hero-buttons .btn {
    min-width: 200px;                   /* Minimum button width */
}

/* HERO STATISTICS */
.hero-stats {
    display: flex;                      /* Flex container */
    justify-content: center;            /* Center horizontally */
    flex-wrap: wrap;                    /* Wrap on small screens */
    gap: var(--space-2xl);              /* Space between items */
    margin-top: var(--space-3xl);       /* Top margin */
    position: relative;                  /* For z-index */
    z-index: 1;                         /* Above background */
    animation: fadeInUp 1s ease-out 0.9s both; /* Delayed animation */
}

.stat-item {
    text-align: center;                 /* Center text */
    padding: var(--space-lg);           /* Padding around stat */
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    backdrop-filter: blur(10px);        /* Glass effect */
    border-radius: var(--radius-lg);    /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Light border */
    min-width: 150px;                   /* Minimum width */
    transition: transform var(--transition-normal); /* Smooth transform */
}

.stat-item:hover {
    transform: translateY(-5px);        /* Lift on hover */
    background: rgba(255, 255, 255, 0.15); /* More opaque on hover */
}

.stat-item h3 {
    font-size: var(--font-4xl);         /* Large number */
    color: var(--primary-color);        /* Orange color */
    margin-bottom: var(--space-xs);     /* Small bottom margin */
    font-weight: 700;                   /* Bold weight */
}

.stat-item p {
    font-size: var(--font-base);        /* Base font size */
    opacity: 0.9;                       /* Slightly transparent */
    margin-bottom: 0;                   /* Remove bottom margin */
    text-transform: uppercase;          /* Uppercase text */
    letter-spacing: 1px;                /* Letter spacing */
    font-weight: 500;                   /* Medium weight */
}

/* ====================
   SERVICES SECTION
   Services grid styles
   ==================== */
.services {
    background-color: var(--light-color); /* Light background */
    position: relative;                  /* For decorative elements */
}

.services::before {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    top: 0;                             /* Position at top */
    right: 0;                           /* Position at right */
    width: 300px;                       /* Width of decoration */
    height: 300px;                      /* Height of decoration */
    background: radial-gradient(        /* Radial gradient */
        var(--primary-light) 0%,        /* Light orange */
        transparent 70%                 /* Transparent edges */
    );
    opacity: 0.1;                       /* Very transparent */
    pointer-events: none;               /* Don't interfere with clicks */
}

.services-grid {
    display: grid;                      /* Grid container */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: var(--space-xl);               /* Space between cards */
}

.service-card {
    background-color: var(--white);     /* White background */
    border-radius: var(--radius-lg);    /* Rounded corners */
    padding: var(--space-xl);           /* Card padding */
    box-shadow: var(--shadow-md);       /* Card shadow */
    transition: all var(--transition-normal); /* Smooth transitions */
    border-top: 4px solid var(--primary-color); /* Top accent border */
    position: relative;                  /* For hover effect */
    overflow: hidden;                   /* Hide overflow */
}

.service-card::before {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    top: 0;                             /* Position at top */
    left: -100%;                        /* Start off-screen left */
    width: 100%;                        /* Full width */
    height: 100%;                       /* Full height */
    background: linear-gradient(        /* Gradient overlay */
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.7s ease;         /* Smooth sliding */
}

.service-card:hover::before {
    left: 100%;                         /* Slide across */
}

.service-card:hover {
    transform: translateY(-10px);       /* Lift on hover */
    box-shadow: var(--shadow-xl);       /* Deeper shadow */
}

.service-icon {
    font-size: 2.5rem;                  /* Large icon size */
    color: var(--primary-color);        /* Orange icon */
    margin-bottom: var(--space-lg);     /* Bottom margin */
    display: inline-block;               /* Allow transform */
    transition: transform var(--transition-normal); /* Smooth transform */
}

.service-card:hover .service-icon {
    transform: scale(1.2) rotate(5deg); /* Scale and rotate on hover */
}

.service-card h3 {
    font-size: var(--font-2xl);         /* Service title size */
    margin-bottom: var(--space-md);     /* Bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
}

.service-features {
    list-style: none;                   /* Remove bullets */
    margin-top: var(--space-lg);        /* Top margin */
}

.service-features li {
    padding: var(--space-sm) 0;         /* Vertical padding */
    border-bottom: 1px solid var(--light-gray); /* Bottom border */
    position: relative;                  /* For icon positioning */
    padding-left: 30px;                 /* Space for icon */
    font-size: var(--font-base);        /* Base font size */
}

.service-features li:last-child {
    border-bottom: none;                /* Remove border from last item */
}

.service-features li i {
    position: absolute;                  /* Position absolutely */
    left: 0;                            /* Position at left */
    top: var(--space-sm);               /* Vertical alignment */
    color: var(--accent-color);         /* Green checkmark */
    font-size: var(--font-lg);          /* Icon size */
}

.service-price {
    margin-top: var(--space-lg);        /* Top margin */
    padding-top: var(--space-md);       /* Top padding */
    border-top: 2px dashed var(--light-gray); /* Dashed top border */
    font-weight: 600;                   /* Bold weight */
    color: var(--primary-color);        /* Orange color */
    font-size: var(--font-lg);          /* Larger font */
}

/* ====================
   ABOUT SECTION
   About company styles
   ==================== */
.about-grid {
    display: grid;                      /* Grid container */
    grid-template-columns: 1fr 1fr;     /* Two equal columns */
    gap: var(--space-3xl);              /* Space between columns */
    align-items: center;                /* Center vertically */
}

.about-content {
    padding-right: var(--space-xl);     /* Right padding */
}

.about-content .section-title {
    text-align: left;                   /* Left aligned title */
}

.about-content .section-title::after {
    left: 0;                            /* Start from left */
    transform: none;                    /* No transform needed */
}

.about-content > p {
    font-size: var(--font-lg);          /* Larger paragraph */
    margin-bottom: var(--space-2xl);    /* Bottom margin */
    line-height: 1.8;                   /* More line height */
}

.about-features {
    margin: var(--space-2xl) 0;         /* Vertical margin */
}

.feature {
    display: flex;                      /* Flex container */
    gap: var(--space-lg);               /* Space between icon and text */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    align-items: flex-start;            /* Align to top */
}

.feature i {
    font-size: 1.5rem;                  /* Icon size */
    color: var(--primary-color);        /* Orange icon */
    margin-top: 5px;                    /* Top margin for alignment */
    flex-shrink: 0;                     /* Prevent shrinking */
}

.feature h4 {
    margin-bottom: var(--space-xs);     /* Small bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
    font-size: var(--font-xl);          /* Feature title size */
}

.feature p {
    color: var(--gray-color);           /* Gray text */
    margin-bottom: 0;                   /* Remove bottom margin */
    font-size: var(--font-base);        /* Base font size */
}

/* CERTIFICATES */
.certificates {
    margin-top: var(--space-2xl);       /* Top margin */
    padding-top: var(--space-lg);       /* Top padding */
    border-top: 1px solid var(--light-gray); /* Top border */
}

.certificates h4 {
    margin-bottom: var(--space-md);     /* Bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
}

.cert-badges {
    display: flex;                      /* Flex container */
    flex-wrap: wrap;                    /* Wrap badges */
    gap: var(--space-md);               /* Space between badges */
}

.cert-badge {
    background-color: var(--light-color); /* Light background */
    color: var(--secondary-color);      /* Dark blue text */
    padding: var(--space-sm) var(--space-md); /* Badge padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    font-size: var(--font-sm);          /* Small font */
    font-weight: 500;                   /* Medium weight */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
    border: 1px solid var(--light-gray); /* Light border */
}

.cert-badge i {
    color: var(--primary-color);        /* Orange icon */
}

/* ABOUT IMAGE */
.about-image {
    position: relative;                  /* For overlay positioning */
    border-radius: var(--radius-lg);    /* Rounded corners */
    overflow: hidden;                   /* Hide overflow */
    box-shadow: var(--shadow-lg);       /* Image shadow */
}

.about-image img {
    width: 100%;                        /* Full width */
    height: auto;                       /* Auto height */
    display: block;                     /* Remove bottom space */
    transition: transform var(--transition-slow); /* Slow transform */
}

.about-image:hover img {
    transform: scale(1.05);             /* Zoom on hover */
}

.image-overlay {
    position: absolute;                  /* Position absolutely */
    bottom: 0;                          /* Position at bottom */
    left: 0;                            /* Position at left */
    right: 0;                           /* Position at right */
    background: linear-gradient(        /* Gradient overlay */
        transparent,
        rgba(0, 0, 0, 0.7)
    );
    color: var(--white);                /* White text */
    padding: var(--space-xl);           /* Overlay padding */
    transform: translateY(100%);        /* Start hidden below */
    transition: transform var(--transition-normal); /* Smooth slide up */
}

.about-image:hover .image-overlay {
    transform: translateY(0);           /* Slide up on hover */
}

.image-overlay h4 {
    color: var(--white);                /* White heading */
    margin-bottom: var(--space-xs);     /* Small bottom margin */
}

.image-overlay p {
    color: rgba(255, 255, 255, 0.8);    /* Semi-transparent white */
    margin-bottom: 0;                   /* Remove bottom margin */
    font-size: var(--font-base);        /* Base font size */
}

/* ====================
   SOLAR CALCULATOR
   Savings calculator styles
   ==================== */
.calculator {
    background: linear-gradient(        /* Gradient background */
        135deg,
        var(--light-color) 0%,
        #e3f2fd 100%
    );
    position: relative;                  /* For decorative elements */
    overflow: hidden;                   /* Hide overflow */
}

.calculator::before {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    top: -50%;                          /* Position above */
    right: -10%;                        /* Position right */
    width: 400px;                       /* Width of circle */
    height: 400px;                      /* Height of circle */
    background: radial-gradient(        /* Radial gradient */
        var(--accent-light) 0%,         /* Light green */
        transparent 70%                 /* Transparent edges */
    );
    opacity: 0.2;                       /* Low opacity */
    border-radius: var(--radius-circle); /* Perfect circle */
    pointer-events: none;               /* Don't interfere with clicks */
}

.calculator-container {
    display: grid;                      /* Grid container */
    grid-template-columns: 1fr 1fr;     /* Two equal columns */
    gap: var(--space-2xl);              /* Space between columns */
    background-color: var(--white);     /* White background */
    border-radius: var(--radius-xl);    /* Large rounded corners */
    overflow: hidden;                   /* Hide overflow */
    box-shadow: var(--shadow-xl);       /* Large shadow */
}

.calculator-inputs {
    padding: var(--space-2xl);          /* Inputs padding */
    background-color: var(--light-color); /* Light background */
    border-right: 1px solid var(--light-gray); /* Right border */
}

.calculator-inputs h3 {
    color: var(--secondary-color);      /* Dark blue color */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    font-size: var(--font-2xl);         /* Medium size */
}

.calc-form .form-group {
    margin-bottom: var(--space-xl);     /* Bottom margin */
}

.calc-form label {
    display: block;                     /* Block display */
    margin-bottom: var(--space-sm);     /* Bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
    font-weight: 500;                   /* Medium weight */
    font-size: var(--font-base);        /* Base font size */
}

.calc-form label i {
    color: var(--primary-color);        /* Orange icon */
    margin-right: var(--space-sm);      /* Right margin */
}

.calc-form input[type="number"],
.calc-form select {
    width: 100%;                        /* Full width */
    padding: var(--space-md);           /* Input padding */
    border: 2px solid var(--light-gray); /* Light border */
    border-radius: var(--radius-md);    /* Rounded corners */
    font-size: var(--font-base);        /* Base font size */
    transition: border-color var(--transition-normal); /* Smooth border */
    background-color: var(--white);     /* White background */
}

.calc-form input[type="number"]:focus,
.calc-form select:focus {
    outline: none;                      /* Remove default outline */
    border-color: var(--primary-color); /* Orange border on focus */
}

.range-slider {
    margin-top: var(--space-md);        /* Top margin */
}

.range-slider input[type="range"] {
    width: 100%;                        /* Full width */
    height: 6px;                        /* Slider height */
    background: var(--light-gray);      /* Track color */
    border-radius: 3px;                 /* Rounded track */
    outline: none;                      /* Remove outline */
    /* -webkit-appearance: none;           Remove default styling */
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;           /* Remove default styling */
    width: 20px;                        /* Thumb width */
    height: 20px;                       /* Thumb height */
    background: var(--primary-color);   /* Orange thumb */
    border-radius: var(--radius-circle); /* Circular thumb */
    cursor: pointer;                    /* Pointer cursor */
    border: 3px solid var(--white);     /* White border */
    box-shadow: var(--shadow-sm);       /* Thumb shadow */
}

#calculate-btn {
    width: 100%;                        /* Full width */
    margin-top: var(--space-lg);        /* Top margin */
    font-size: var(--font-lg);          /* Larger font */
    padding: var(--space-lg);           /* More padding */
}

/* CALCULATOR RESULTS */
.calculator-results {
    padding: var(--space-2xl);          /* Results padding */
}

.calculator-results h3 {
    color: var(--secondary-color);      /* Dark blue color */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    font-size: var(--font-2xl);         /* Medium size */
}

.results-container {
    display: grid;                      /* Grid container */
    grid-template-columns: 1fr 1fr;     /* Two columns */
    gap: var(--space-lg);               /* Space between cards */
    margin-bottom: var(--space-2xl);    /* Bottom margin */
}

.result-card {
    background-color: var(--light-color); /* Light background */
    border-radius: var(--radius-lg);    /* Rounded corners */
    padding: var(--space-lg);           /* Card padding */
    text-align: center;                 /* Center text */
    border: 2px solid transparent;      /* Transparent border */
    transition: all var(--transition-normal); /* Smooth transitions */
}

.result-card:hover {
    border-color: var(--primary-color); /* Orange border on hover */
    transform: translateY(-5px);        /* Lift on hover */
}

.result-icon {
    font-size: 2rem;                    /* Large icon */
    color: var(--primary-color);        /* Orange icon */
    margin-bottom: var(--space-md);     /* Bottom margin */
}

.result-card h4 {
    font-size: var(--font-base);        /* Base font size */
    color: var(--gray-color);           /* Gray text */
    margin-bottom: var(--space-sm);     /* Small bottom margin */
    font-weight: 500;                   /* Medium weight */
}

.result-value {
    font-size: var(--font-2xl);         /* Large value */
    color: var(--secondary-color);      /* Dark blue color */
    font-weight: 700;                   /* Bold weight */
    margin-bottom: var(--space-xs);     /* Small bottom margin */
}

.result-label {
    font-size: var(--font-sm);          /* Small label */
    color: var(--gray-color);           /* Gray text */
    margin-bottom: 0;                   /* Remove bottom margin */
}

/* SAVINGS CHART */
.savings-breakdown {
    background-color: var(--light-color); /* Light background */
    border-radius: var(--radius-lg);    /* Rounded corners */
    padding: var(--space-xl);           /* Padding */
    margin-bottom: var(--space-xl);     /* Bottom margin */
}

.savings-breakdown h4 {
    color: var(--secondary-color);      /* Dark blue color */
    margin-bottom: var(--space-lg);     /* Bottom margin */
    font-size: var(--font-lg);          /* Larger font */
}

.savings-breakdown h4 i {
    color: var(--accent-color);         /* Green icon */
    margin-right: var(--space-sm);      /* Right margin */
}

.savings-chart {
    display: flex;                      /* Flex container */
    height: 200px;                      /* Chart height */
    align-items: flex-end;              /* Align bars to bottom */
    gap: 10px;                          /* Space between bars */
    margin-bottom: var(--space-md);     /* Bottom margin */
}

.chart-bar {
    flex: 1;                            /* Equal width bars */
    background: linear-gradient(        /* Gradient bars */
        to top,
        var(--primary-color),
        var(--primary-light)
    );
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; /* Rounded top corners */
    position: relative;                  /* For tooltip positioning */
    transition: height 1s ease-out;     /* Animated height change */
}

.chart-bar::after {
    content: attr(data-year);           /* Show year from data attribute */
    position: absolute;                  /* Position absolutely */
    top: -25px;                         /* Position above bar */
    left: 50%;                          /* Center horizontally */
    transform: translateX(-50%);        /* Perfect centering */
    font-size: var(--font-sm);          /* Small font */
    font-weight: 600;                   /* Bold weight */
    color: var(--secondary-color);      /* Dark blue color */
}

.chart-labels {
    display: flex;                      /* Flex container */
    justify-content: space-between;     /* Space evenly */
    color: var(--gray-color);           /* Gray text */
    font-size: var(--font-sm);          /* Small font */
}

.calculator-cta {
    text-align: center;                 /* Center text */
    padding: var(--space-lg);           /* Padding */
    background-color: var(--accent-color); /* Green background */
    color: var(--white);                /* White text */
    border-radius: var(--radius-lg);    /* Rounded corners */
}

.calculator-cta p {
    margin-bottom: var(--space-lg);     /* Bottom margin */
    font-size: var(--font-lg);          /* Larger font */
}

.calculator-cta strong {
    font-size: var(--font-2xl);         /* Large savings number */
    display: block;                     /* Block display */
    margin-top: var(--space-sm);        /* Top margin */
}

.calculator-cta .btn-secondary {
    background-color: var(--white);     /* White background */
    color: var(--accent-color);         /* Green text */
    border-color: var(--white);         /* White border */
}

.calculator-cta .btn-secondary:hover {
    background-color: transparent;      /* Transparent on hover */
    color: var(--white);                /* White text */
    border-color: var(--white);         /* White border */
}

/* ====================
   PROJECTS SECTION
   Portfolio projects styles
   ==================== */
.projects {
    background-color: var(--white);     /* White background */
}

.project-filters {
    display: flex;                      /* Flex container */
    justify-content: center;            /* Center filters */
    flex-wrap: wrap;                    /* Wrap on small screens */
    gap: var(--space-md);               /* Space between buttons */
    margin-bottom: var(--space-2xl);    /* Bottom margin */
}

.filter-btn {
    padding: var(--space-sm) var(--space-lg); /* Button padding */
    background-color: var(--light-color); /* Light background */
    color: var(--gray-color);           /* Gray text */
    border: none;                       /* Remove border */
    border-radius: var(--radius-md);    /* Rounded corners */
    cursor: pointer;                    /* Pointer cursor */
    font-weight: 500;                   /* Medium weight */
    transition: all var(--transition-normal); /* Smooth transitions */
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--primary-color); /* Orange background */
    color: var(--white);                /* White text */
}

.projects-grid {
    display: grid;                      /* Grid container */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive columns */
    gap: var(--space-xl);               /* Space between cards */
    margin-bottom: var(--space-3xl);    /* Bottom margin */
}

.project-card {
    background-color: var(--white);     /* White background */
    border-radius: var(--radius-lg);    /* Rounded corners */
    overflow: hidden;                   /* Hide overflow */
    box-shadow: var(--shadow-md);       /* Card shadow */
    transition: all var(--transition-normal); /* Smooth transitions */
    border: 1px solid var(--light-gray); /* Light border */
}

.project-card:hover {
    transform: translateY(-10px);       /* Lift on hover */
    box-shadow: var(--shadow-xl);       /* Deeper shadow */
    border-color: var(--primary-color); /* Orange border */
}

.project-image {
    height: 250px;                      /* Fixed image height */
    overflow: hidden;                   /* Hide overflow */
    position: relative;                  /* For overlay positioning */
}

.project-image img {
    width: 100%;                        /* Full width */
    height: 100%;                       /* Full height */
    object-fit: cover;                  /* Cover container */
    transition: transform var(--transition-slow); /* Slow zoom */
}

.project-card:hover .project-image img {
    transform: scale(1.1);              /* Zoom on hover */
}

.project-overlay {
    position: absolute;                  /* Position absolutely */
    top: 0;                             /* Position at top */
    left: 0;                            /* Position at left */
    right: 0;                           /* Position at right */
    bottom: 0;                          /* Position at bottom */
    background: linear-gradient(        /* Gradient overlay */
        to bottom,
        transparent,
        rgba(0, 0, 0, 0.7)
    );
    opacity: 0;                         /* Hidden by default */
    transition: opacity var(--transition-normal); /* Smooth fade */
    display: flex;                      /* Flex container */
    align-items: flex-end;              /* Align to bottom */
    padding: var(--space-lg);           /* Padding */
}

.project-card:hover .project-overlay {
    opacity: 1;                         /* Show on hover */
}

.project-location {
    color: var(--white);                /* White text */
    font-size: var(--font-sm);          /* Small font */
    background: rgba(0, 0, 0, 0.7);     /* Semi-transparent background */
    padding: var(--space-xs) var(--space-sm); /* Padding */
    border-radius: var(--radius-sm);    /* Rounded corners */
}

.project-location i {
    color: var(--primary-color);        /* Orange icon */
    margin-right: var(--space-xs);      /* Right margin */
}

.project-info {
    padding: var(--space-xl);           /* Info padding */
}

.project-info h3 {
    font-size: var(--font-xl);          /* Project title size */
    margin-bottom: var(--space-md);     /* Bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
}

.project-info > p {
    color: var(--gray-color);           /* Gray text */
    margin-bottom: var(--space-lg);     /* Bottom margin */
    font-size: var(--font-base);        /* Base font size */
}

.project-details {
    display: flex;                      /* Flex container */
    justify-content: space-between;     /* Space between items */
    margin-bottom: var(--space-md);     /* Bottom margin */
    flex-wrap: wrap;                    /* Wrap on small screens */
    gap: var(--space-sm);               /* Space between items */
}

.project-details span {
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: 5px;                           /* Space between icon and text */
    color: var(--gray-color);           /* Gray text */
    font-size: var(--font-sm);          /* Small font */
}

.project-details i {
    color: var(--primary-color);        /* Orange icon */
}

.project-savings {
    background-color: var(--accent-color); /* Green background */
    color: var(--white);                /* White text */
    padding: var(--space-sm) var(--space-md); /* Padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    font-weight: 600;                   /* Bold weight */
    display: inline-flex;                /* Inline flex */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
}

.project-savings i {
    font-size: var(--font-lg);          /* Larger icon */
}

/* PROJECT STATS */
.project-stats {
    display: grid;                      /* Grid container */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
    gap: var(--space-xl);               /* Space between stats */
    background-color: var(--light-color); /* Light background */
    padding: var(--space-2xl);          /* Stats padding */
    border-radius: var(--radius-xl);    /* Rounded corners */
}

.project-stat {
    text-align: center;                 /* Center text */
}

.project-stat h4 {
    font-size: var(--font-base);        /* Base font size */
    color: var(--gray-color);           /* Gray text */
    margin-bottom: var(--space-sm);     /* Bottom margin */
    font-weight: 500;                   /* Medium weight */
}

.stat-number {
    font-size: var(--font-4xl);         /* Large number */
    color: var(--primary-color);        /* Orange color */
    font-weight: 700;                   /* Bold weight */
    margin-bottom: var(--space-xs);     /* Small bottom margin */
}

.stat-label {
    font-size: var(--font-base);        /* Base font size */
    color: var(--gray-color);           /* Gray text */
    margin-bottom: 0;                   /* Remove bottom margin */
}

/* ====================
   TESTIMONIALS SECTION
   Client reviews styles
   ==================== */
.testimonials {
    background-color: var(--secondary-color); /* Dark blue background */
    color: var(--white);                /* White text */
    position: relative;                  /* For decorative elements */
}

.testimonials::before {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    top: 0;                             /* Position at top */
    left: 0;                            /* Position at left */
    width: 100%;                        /* Full width */
    height: 100%;                       /* Full height */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.05)"/></svg>');
    background-size: cover;             /* Cover entire area */
    pointer-events: none;               /* Don't interfere with clicks */
}

.testimonials .section-title,
.testimonials .section-subtitle {
    color: var(--white);                /* White text */
}

.testimonials .section-title::after {
    background-color: var(--primary-color); /* Orange underline */
}

.testimonials-slider {
    display: grid;                      /* Grid container */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: var(--space-xl);               /* Space between cards */
    margin-bottom: var(--space-3xl);    /* Bottom margin */
}

.testimonial-card {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    border-radius: var(--radius-lg);    /* Rounded corners */
    padding: var(--space-xl);           /* Card padding */
    transition: all var(--transition-normal); /* Smooth transitions */
    border-left: 4px solid var(--primary-color); /* Left accent border */
    backdrop-filter: blur(10px);        /* Glass effect */
}

.testimonial-card:hover {
    background-color: rgba(255, 255, 255, 0.15); /* More opaque on hover */
    transform: translateY(-5px);        /* Lift on hover */
}

.testimonial-rating {
    color: var(--primary-color);        /* Orange stars */
    margin-bottom: var(--space-lg);     /* Bottom margin */
    font-size: var(--font-lg);          /* Star size */
}

.testimonial-content {
    position: relative;                  /* For quote icon positioning */
    margin-bottom: var(--space-xl);     /* Bottom margin */
}

.testimonial-content i {
    font-size: 1.5rem;                  /* Quote icon size */
    color: var(--primary-color);        /* Orange icon */
    margin-bottom: var(--space-md);     /* Bottom margin */
    opacity: 0.5;                       /* Semi-transparent */
}

.testimonial-content p {
    font-style: italic;                 /* Italic text */
    color: rgba(255, 255, 255, 0.9);    /* Semi-transparent white */
    margin-bottom: 0;                   /* Remove bottom margin */
    line-height: 1.8;                   /* More line height */
    font-size: var(--font-base);        /* Base font size */
}

.testimonial-author {
    display: flex;                      /* Flex container */
    gap: var(--space-md);               /* Space between avatar and info */
    align-items: center;                /* Center vertically */
    padding-top: var(--space-lg);       /* Top padding */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Top border */
}

.author-avatar {
    width: 50px;                        /* Avatar width */
    height: 50px;                       /* Avatar height */
    border-radius: var(--radius-circle); /* Circular avatar */
    object-fit: cover;                  /* Cover container */
    border: 2px solid var(--primary-color); /* Orange border */
}

.testimonial-author h4 {
    color: var(--white);                /* White name */
    margin-bottom: var(--space-xs);     /* Small bottom margin */
    font-size: var(--font-lg);          /* Name size */
}

.testimonial-author p {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    margin-bottom: var(--space-xs);     /* Small bottom margin */
    font-size: var(--font-sm);          /* Small font */
}

.author-location {
    color: var(--primary-color);        /* Orange location */
    font-size: var(--font-xs);          /* Extra small font */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: 3px;                           /* Small gap */
}

/* CLIENT LOGOS */
.client-logos {
    text-align: center;                 /* Center content */
    padding-top: var(--space-3xl);      /* Top padding */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Top border */
}

.client-logos h4 {
    color: var(--white);                /* White heading */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    font-size: var(--font-xl);          /* Heading size */
}

.logos-grid {
    display: grid;                      /* Grid container */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive columns */
    gap: var(--space-lg);               /* Space between logos */
    max-width: 900px;                   /* Maximum width */
    margin: 0 auto;                     /* Center grid */
}

.logo-item {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    padding: var(--space-lg);           /* Logo padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    display: flex;                      /* Flex container */
    flex-direction: column;             /* Stack vertically */
    align-items: center;                /* Center horizontally */
    gap: var(--space-sm);               /* Space between icon and text */
    transition: all var(--transition-normal); /* Smooth transitions */
}

.logo-item:hover {
    background-color: rgba(255, 255, 255, 0.15); /* More opaque on hover */
    transform: translateY(-5px);        /* Lift on hover */
}

.logo-item i {
    font-size: 2rem;                    /* Large icon */
    color: var(--primary-color);        /* Orange icon */
}

.logo-item span {
    color: var(--white);                /* White text */
    font-weight: 500;                   /* Medium weight */
    text-align: center;                 /* Center text */
    font-size: var(--font-sm);          /* Small font */
}

/* ====================
   CONTACT SECTION
   Contact form and info styles
   ==================== */
.contact-grid {
    display: grid;                      /* Grid container */
    grid-template-columns: 1fr 1fr;     /* Two equal columns */
    gap: var(--space-3xl);              /* Space between columns */
    margin-bottom: var(--space-3xl);    /* Bottom margin */
}

.contact-info {
    padding-right: var(--space-xl);     /* Right padding */
}

.contact-info .section-title {
    text-align: left;                   /* Left aligned title */
}

.contact-info .section-title::after {
    left: 0;                            /* Start from left */
    transform: none;                    /* No transform needed */
}

.contact-info > p {
    font-size: var(--font-lg);          /* Larger paragraph */
    margin-bottom: var(--space-2xl);    /* Bottom margin */
    color: var(--gray-color);           /* Gray text */
}

.contact-details {
    margin: var(--space-2xl) 0;         /* Vertical margin */
}

.contact-item {
    display: flex;                      /* Flex container */
    gap: var(--space-lg);               /* Space between icon and info */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    align-items: flex-start;            /* Align to top */
}

.contact-item i {
    font-size: 1.2rem;                  /* Icon size */
    color: var(--primary-color);        /* Orange icon */
    margin-top: 5px;                    /* Top margin for alignment */
    flex-shrink: 0;                     /* Prevent shrinking */
}

.contact-item h4 {
    margin-bottom: var(--space-xs);     /* Small bottom margin */
    color: var(--secondary-color);      /* Dark blue color */
    font-size: var(--font-lg);          /* Heading size */
}

.contact-item p {
    color: var(--gray-color);           /* Gray text */
    margin-bottom: 0;                   /* Remove bottom margin */
    font-size: var(--font-base);        /* Base font size */
    line-height: 1.6;                   /* More line height */
}

/* COMPANY REGISTRATION */
.company-registration {
    background-color: var(--light-color); /* Light background */
    padding: var(--space-xl);           /* Padding */
    border-radius: var(--radius-lg);    /* Rounded corners */
    margin-bottom: var(--space-2xl);    /* Bottom margin */
    border-left: 4px solid var(--primary-color); /* Left accent border */
}

.company-registration h4 {
    color: var(--secondary-color);      /* Dark blue heading */
    margin-bottom: var(--space-md);     /* Bottom margin */
    font-size: var(--font-lg);          /* Heading size */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
}

.company-registration h4 i {
    color: var(--primary-color);        /* Orange icon */
}

.company-registration p {
    color: var(--gray-color);           /* Gray text */
    margin-bottom: 0;                   /* Remove bottom margin */
    line-height: 1.8;                   /* More line height */
}

.company-registration strong {
    color: var(--secondary-color);      /* Dark blue text */
}

/* SOCIAL MEDIA */
.social-links h4 {
    color: var(--secondary-color);      /* Dark blue heading */
    margin-bottom: var(--space-md);     /* Bottom margin */
    font-size: var(--font-lg);          /* Heading size */
}

.social-icons {
    display: flex;                      /* Flex container */
    gap: var(--space-md);               /* Space between icons */
}

.social-icon {
    display: inline-flex;                /* Inline flex */
    align-items: center;                /* Center vertically */
    justify-content: center;            /* Center horizontally */
    width: 40px;                        /* Icon width */
    height: 40px;                       /* Icon height */
    background-color: var(--light-gray); /* Light background */
    color: var(--dark-color);           /* Dark icon */
    border-radius: var(--radius-circle); /* Circular icon */
    transition: all var(--transition-normal); /* Smooth transitions */
    text-decoration: none;              /* Remove underline */
}

.social-icon:hover {
    background-color: var(--primary-color); /* Orange background on hover */
    color: var(--white);                /* White icon on hover */
    transform: translateY(-3px);        /* Lift on hover */
}

/* CONTACT FORM */
.contact-form {
    background-color: var(--white);     /* White background */
    padding: var(--space-2xl);          /* Form padding */
    border-radius: var(--radius-xl);    /* Rounded corners */
    box-shadow: var(--shadow-lg);       /* Form shadow */
    border: 1px solid var(--light-gray); /* Light border */
}

.contact-form h3 {
    color: var(--secondary-color);      /* Dark blue heading */
    margin-bottom: var(--space-sm);     /* Bottom margin */
    font-size: var(--font-2xl);         /* Heading size */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
}

.contact-form h3 i {
    color: var(--primary-color);        /* Orange icon */
}

.contact-form > p {
    color: var(--gray-color);           /* Gray text */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    font-size: var(--font-base);        /* Base font size */
}

/* FORM STYLES */
.form-row {
    display: grid;                      /* Grid container */
    grid-template-columns: 1fr 1fr;     /* Two equal columns */
    gap: var(--space-lg);               /* Space between inputs */
    margin-bottom: var(--space-lg);     /* Bottom margin */
}

.form-group {
    position: relative;                  /* For floating labels */
    margin-bottom: var(--space-xl);     /* Bottom margin */
}

.form-group label {
    position: absolute;                  /* Position absolutely */
    top: -10px;                         /* Position above input */
    left: var(--space-md);              /* Left padding */
    background-color: var(--white);     /* White background */
    padding: 0 5px;                     /* Small padding */
    font-size: var(--font-sm);          /* Small font */
    color: var(--gray-color);           /* Gray text */
    pointer-events: none;               /* Don't interfere with clicks */
    transition: all var(--transition-normal); /* Smooth transitions */
    z-index: 1;                         /* Above input */
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;                        /* Full width */
    padding: var(--space-md) var(--space-lg); /* Input padding */
    border: 2px solid var(--light-gray); /* Light border */
    border-radius: var(--radius-md);    /* Rounded corners */
    font-family: 'Roboto', sans-serif;  /* Input font */
    font-size: var(--font-base);        /* Base font size */
    transition: all var(--transition-normal); /* Smooth transitions */
    background-color: var(--white);     /* White background */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;                      /* Remove default outline */
    border-color: var(--primary-color); /* Orange border on focus */
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1); /* Orange glow */
}

.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group select:not([value=""]) + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -10px;                         /* Keep above input */
    color: var(--primary-color);        /* Orange text */
    font-weight: 600;                   /* Bold weight */
}

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

/* FILE UPLOAD */
.file-upload {
    position: relative;                  /* For custom styling */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-md);               /* Space between elements */
}

.file-upload input[type="file"] {
    position: absolute;                  /* Position absolutely */
    width: 100%;                        /* Full width */
    height: 100%;                       /* Full height */
    opacity: 0;                         /* Hide default input */
    cursor: pointer;                    /* Pointer cursor */
    z-index: 2;                         /* Above custom label */
}

.file-upload label {
    background-color: var(--light-color); /* Light background */
    color: var(--dark-color);           /* Dark text */
    padding: var(--space-md) var(--space-lg); /* Button-like padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    cursor: pointer;                    /* Pointer cursor */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
    transition: all var(--transition-normal); /* Smooth transitions */
    border: 2px dashed var(--light-gray); /* Dashed border */
    flex: 1;                            /* Take available space */
    justify-content: center;            /* Center content */
}

.file-upload label:hover {
    background-color: var(--primary-color); /* Orange on hover */
    color: var(--white);                /* White text on hover */
    border-color: var(--primary-color); /* Orange border */
}

.file-name {
    color: var(--gray-color);           /* Gray text */
    font-size: var(--font-sm);          /* Small font */
    flex: 1;                            /* Take available space */
}

.file-hint {
    font-size: var(--font-xs);          /* Extra small font */
    color: var(--gray-color);           /* Gray text */
    margin-top: var(--space-xs);        /* Top margin */
    margin-bottom: 0;                   /* Remove bottom margin */
}

/* FORM STATUS */
.form-status {
    margin-top: var(--space-lg);        /* Top margin */
    padding: var(--space-md);           /* Padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    text-align: center;                 /* Center text */
    font-weight: 500;                   /* Medium weight */
    display: none;                      /* Hidden by default */
}

.form-status.success {
    background-color: #d4edda;          /* Light green */
    color: #155724;                     /* Dark green */
    border: 1px solid #c3e6cb;          /* Green border */
    display: block;                     /* Show on success */
}

.form-status.error {
    background-color: #f8d7da;          /* Light red */
    color: #721c24;                     /* Dark red */
    border: 1px solid #f5c6cb;          /* Red border */
    display: block;                     /* Show on error */
}

/* MAP SECTION */
.map-section {
    background-color: var(--light-color); /* Light background */
    padding: var(--space-2xl);          /* Section padding */
    border-radius: var(--radius-xl);    /* Rounded corners */
}

.map-section h3 {
    color: var(--secondary-color);      /* Dark blue heading */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    font-size: var(--font-2xl);         /* Heading size */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
}

.map-section h3 i {
    color: var(--primary-color);        /* Orange icon */
}

.office-locations {
    display: grid;                      /* Grid container */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: var(--space-xl);               /* Space between cards */
}

.office-card {
    background-color: var(--white);     /* White background */
    padding: var(--space-xl);           /* Card padding */
    border-radius: var(--radius-lg);    /* Rounded corners */
    box-shadow: var(--shadow-sm);       /* Card shadow */
    transition: all var(--transition-normal); /* Smooth transitions */
    border-top: 3px solid var(--primary-color); /* Top accent border */
}

.office-card:hover {
    transform: translateY(-5px);        /* Lift on hover */
    box-shadow: var(--shadow-md);       /* Deeper shadow */
}

.office-card h4 {
    color: var(--secondary-color);      /* Dark blue heading */
    margin-bottom: var(--space-md);     /* Bottom margin */
    font-size: var(--font-lg);          /* Heading size */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
}

.office-card h4 i {
    color: var(--primary-color);        /* Orange icon */
}

.office-card p {
    color: var(--gray-color);           /* Gray text */
    margin-bottom: var(--space-sm);     /* Bottom margin */
    font-size: var(--font-base);        /* Base font size */
}

.office-card p:last-child {
    margin-bottom: 0;                   /* Remove bottom margin */
}

.office-card p i {
    color: var(--primary-color);        /* Orange icon */
    margin-right: var(--space-sm);      /* Right margin */
}

/* ====================
   LIVE CHAT WIDGET
   Chat interface styles
   ==================== */
.chat-widget {
    position: fixed;                    /* Fixed position */
    bottom: 100px;                      /* Position above toggle */
    right: 30px;                        /* Position from right */
    width: 350px;                       /* Chat width */
    background-color: var(--white);     /* White background */
    border-radius: var(--radius-lg);    /* Rounded corners */
    box-shadow: var(--shadow-xl);       /* Large shadow */
    z-index: 9999;                      /* Above all content */
    display: none;                      /* Hidden by default */
    flex-direction: column;             /* Stack children vertically */
    overflow: hidden;                   /* Hide overflow */
    border: 1px solid var(--light-gray); /* Light border */
}

.chat-widget.active {
    display: flex;                      /* Show when active */
    animation: slideInUp 0.3s ease-out; /* Entrance animation */
}

.chat-header {
    background-color: var(--secondary-color); /* Dark blue header */
    color: var(--white);                /* White text */
    padding: var(--space-lg);           /* Header padding */
    display: flex;                      /* Flex container */
    justify-content: space-between;     /* Space between title and close */
    align-items: center;                /* Center vertically */
}

.chat-header h4 {
    color: var(--white);                /* White heading */
    margin-bottom: 0;                   /* Remove bottom margin */
    font-size: var(--font-lg);          /* Heading size */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
}

.chat-header h4 i {
    color: var(--primary-color);        /* Orange icon */
}

.chat-close {
    background: none;                   /* No background */
    border: none;                       /* No border */
    color: var(--white);                /* White icon */
    font-size: var(--font-2xl);         /* Large close icon */
    cursor: pointer;                    /* Pointer cursor */
    line-height: 1;                     /* Tight line height */
    padding: 0;                         /* No padding */
    width: 24px;                        /* Fixed width */
    height: 24px;                       /* Fixed height */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    justify-content: center;            /* Center horizontally */
    border-radius: var(--radius-circle); /* Circular button */
    transition: background-color var(--transition-fast); /* Fast transition */
}

.chat-close:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Light background on hover */
}

.chat-body {
    padding: var(--space-lg);           /* Body padding */
    height: 300px;                      /* Fixed height */
    overflow-y: auto;                   /* Vertical scroll */
    display: flex;                      /* Flex container */
    flex-direction: column;             /* Stack messages vertically */
    gap: var(--space-md);               /* Space between messages */
}

.chat-message {
    max-width: 80%;                     /* Maximum message width */
    padding: var(--space-md);           /* Message padding */
    border-radius: var(--radius-lg);    /* Rounded corners */
    position: relative;                  /* For time positioning */
}

.chat-message.bot {
    align-self: flex-start;             /* Align to left */
    background-color: var(--light-color); /* Light background for bot */
    border-bottom-left-radius: 0;       /* Pointed left corner */
}

.chat-message.user {
    align-self: flex-end;               /* Align to right */
    background-color: var(--primary-color); /* Orange background for user */
    color: var(--white);                /* White text */
    border-bottom-right-radius: 0;      /* Pointed right corner */
}

.chat-time {
    font-size: var(--font-xs);          /* Very small font */
    color: var(--gray-color);           /* Gray text */
    margin-top: var(--space-xs);        /* Top margin */
    display: block;                     /* Block display */
}

.chat-message.user .chat-time {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
}

.chat-input {
    display: flex;                      /* Flex container */
    border-top: 1px solid var(--light-gray); /* Top border */
}

.chat-input input {
    flex: 1;                            /* Take available space */
    padding: var(--space-lg);           /* Input padding */
    border: none;                       /* Remove border */
    outline: none;                      /* Remove outline */
    font-size: var(--font-base);        /* Base font size */
}

.chat-input button {
    background-color: var(--primary-color); /* Orange background */
    color: var(--white);                /* White icon */
    border: none;                       /* Remove border */
    padding: 0 var(--space-xl);         /* Button padding */
    cursor: pointer;                    /* Pointer cursor */
    transition: background-color var(--transition-normal); /* Smooth transition */
}

.chat-input button:hover {
    background-color: var(--primary-dark); /* Darker orange on hover */
}

/* CHAT TOGGLE BUTTON */
.chat-toggle {
    position: fixed;                    /* Fixed position */
    bottom: 30px;                       /* Position from bottom */
    right: 30px;                        /* Position from right */
    width: 60px;                        /* Button width */
    height: 60px;                       /* Button height */
    background-color: var(--primary-color); /* Orange background */
    color: var(--white);                /* White icon */
    border-radius: var(--radius-circle); /* Circular button */
    border: none;                       /* Remove border */
    cursor: pointer;                    /* Pointer cursor */
    box-shadow: var(--shadow-lg);       /* Button shadow */
    z-index: 9998;                      /* Below chat widget */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    justify-content: center;            /* Center horizontally */
    font-size: var(--font-xl);          /* Large icon */
    transition: all var(--transition-normal); /* Smooth transitions */
}

.chat-toggle:hover {
    background-color: var(--primary-dark); /* Darker orange on hover */
    transform: scale(1.1);              /* Scale up on hover */
}

.chat-notification {
    position: absolute;                  /* Position absolutely */
    top: -5px;                          /* Position above button */
    right: -5px;                        /* Position right of button */
    background-color: #ff4757;          /* Red background */
    color: var(--white);                /* White text */
    font-size: var(--font-xs);          /* Very small font */
    width: 20px;                        /* Notification width */
    height: 20px;                       /* Notification height */
    border-radius: var(--radius-circle); /* Circular notification */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    justify-content: center;            /* Center horizontally */
    font-weight: 600;                   /* Bold weight */
}

/* ====================
   FOOTER
   Website footer styles
   ==================== */
.footer {
    background-color: var(--secondary-color); /* Dark blue background */
    color: var(--white);                /* White text */
    padding: var(--space-3xl) 0 var(--space-xl); /* Footer padding */
    position: relative;                  /* For decorative elements */
}

.footer::before {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    top: 0;                             /* Position at top */
    left: 0;                            /* Position at left */
    width: 100%;                        /* Full width */
    height: 5px;                        /* Height of top border */
    background: linear-gradient(        /* Gradient border */
        90deg,
        var(--primary-color),
        var(--accent-color),
        var(--primary-color)
    );
}

.footer-grid {
    display: grid;                      /* Grid container */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: var(--space-2xl);              /* Space between columns */
    margin-bottom: var(--space-3xl);    /* Bottom margin */
}

.footer-col {
    padding-right: var(--space-xl);     /* Right padding */
}

.footer-logo {
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-md);               /* Space between logo and text */
    margin-bottom: var(--space-lg);     /* Bottom margin */
    text-decoration: none;              /* Remove underline */
}

.footer-logo img {
    width: 40px;                        /* Logo width */
    height: 40px;                       /* Logo height */
}

.footer-logo h3 {
    color: var(--white);                /* White heading */
    margin-bottom: 0;                   /* Remove bottom margin */
    font-size: var(--font-lg);          /* Heading size */
}

.footer-logo p {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    margin-bottom: 0;                   /* Remove bottom margin */
    font-size: var(--font-xs);          /* Very small font */
}

.footer-description {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    margin-bottom: var(--space-xl);     /* Bottom margin */
    font-size: var(--font-base);        /* Base font size */
    line-height: 1.7;                   /* More line height */
}

/* NEWSLETTER */
.newsletter h4 {
    color: var(--white);                /* White heading */
    margin-bottom: var(--space-md);     /* Bottom margin */
    font-size: var(--font-lg);          /* Heading size */
}

.newsletter-form {
    display: flex;                      /* Flex container */
    gap: var(--space-sm);               /* Space between input and button */
}

.newsletter-form input {
    flex: 1;                            /* Take available space */
    padding: var(--space-md);           /* Input padding */
    border: none;                       /* Remove border */
    border-radius: var(--radius-md);    /* Rounded corners */
    font-size: var(--font-base);        /* Base font size */
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    color: var(--white);                /* White text */
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);    /* Semi-transparent placeholder */
}

.newsletter-form button {
    background-color: var(--primary-color); /* Orange background */
    color: var(--white);                /* White icon */
    border: none;                       /* Remove border */
    padding: 0 var(--space-lg);         /* Button padding */
    border-radius: var(--radius-md);    /* Rounded corners */
    cursor: pointer;                    /* Pointer cursor */
    transition: background-color var(--transition-normal); /* Smooth transition */
}

.newsletter-form button:hover {
    background-color: var(--primary-dark); /* Darker orange on hover */
}

/* FOOTER LINKS */
.footer-col h4 {
    color: var(--white);                /* White heading */
    margin-bottom: var(--space-lg);     /* Bottom margin */
    font-size: var(--font-lg);          /* Heading size */
    position: relative;                  /* For pseudo-element */
    padding-bottom: var(--space-sm);    /* Bottom padding */
}

.footer-col h4::after {
    content: '';                        /* Empty content */
    position: absolute;                  /* Position absolutely */
    bottom: 0;                          /* Position at bottom */
    left: 0;                            /* Start from left */
    width: 40px;                        /* Width of underline */
    height: 2px;                        /* Height of underline */
    background-color: var(--primary-color); /* Orange underline */
}

.footer-links {
    list-style: none;                   /* Remove bullets */
}

.footer-links li {
    margin-bottom: var(--space-md);     /* Bottom margin */
}

.footer-links li:last-child {
    margin-bottom: 0;                   /* Remove bottom margin from last item */
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    text-decoration: none;              /* Remove underline */
    transition: color var(--transition-normal); /* Smooth color transition */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
    font-size: var(--font-base);        /* Base font size */
}

.footer-links a:hover {
    color: var(--primary-color);        /* Orange on hover */
    padding-left: 5px;                  /* Indent on hover */
}

.footer-links a i {
    font-size: var(--font-sm);          /* Small icon */
}

/* FOOTER CONTACT */
.footer-contact p {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    margin-bottom: var(--space-md);     /* Bottom margin */
    display: flex;                      /* Flex container */
    align-items: center;                /* Center vertically */
    gap: var(--space-sm);               /* Space between icon and text */
    font-size: var(--font-base);        /* Base font size */
}

.footer-contact p i {
    color: var(--primary-color);        /* Orange icon */
    width: 20px;                        /* Fixed icon width */
}

/* PAYMENT METHODS */
.payment-methods h4 {
    color: var(--white);                /* White heading */
    margin-bottom: var(--space-md);     /* Bottom margin */
    font-size: var(--font-lg);          /* Heading size */
}

.payment-icons {
    display: flex;                      /* Flex container */
    gap: var(--space-lg);               /* Space between icons */
    font-size: var(--font-2xl);         /* Large icons */
}

.payment-icons i {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    transition: color var(--transition-normal); /* Smooth color transition */
}

.payment-icons i:hover {
    color: var(--primary-color);        /* Orange on hover */
}

/* FOOTER BOTTOM */
.footer-bottom {
    display: flex;                      /* Flex container */
    justify-content: space-between;     /* Space between sections */
    align-items: center;                /* Center vertically */
    padding-top: var(--space-xl);       /* Top padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Top border */
    flex-wrap: wrap;                    /* Wrap on small screens */
    gap: var(--space-md);               /* Space between elements */
}

.footer-bottom-left p {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    margin-bottom: 0;                   /* Remove bottom margin */
    font-size: var(--font-sm);          /* Small font */
}

.footer-bottom-right {
    display: flex;                      /* Flex container */
    gap: var(--space-md);               /* Space between links */
    flex-wrap: wrap;                    /* Wrap on small screens */
}

.footer-bottom-right a {
    color: rgba(255, 255, 255, 0.7);    /* Semi-transparent white */
    text-decoration: none;              /* Remove underline */
    font-size: var(--font-sm);          /* Small font */
    transition: color var(--transition-normal); /* Smooth color transition */
}

.footer-bottom-right a:hover {
    color: var(--primary-color);        /* Orange on hover */
}

/* BACK TO TOP BUTTON */
.back-to-top {
    position: fixed;                    /* Fixed position */
    bottom: 100px;                      /* Position above chat toggle */
    right: 30px;                        /* Position from right */
    width: 50px;                        /* Button width */
    height: 50px;                       /* Button height */
    background-color: var(--primary-color); /* Orange background */
    color: var(--white);                /* White icon */
    border-radius: var(--radius-circle); /* Circular button */
    border: none;                       /* Remove border */
    cursor: pointer;                    /* Pointer cursor */
    box-shadow: var(--shadow-md);       /* Button shadow */
    z-index: 9997;                      /* Below chat elements */
    display: none;                      /* Hidden by default */
    align-items: center;                /* Center vertically */
    justify-content: center;            /* Center horizontally */
    font-size: var(--font-lg);          /* Large icon */
    transition: all var(--transition-normal); /* Smooth transitions */
}

.back-to-top.visible {
    display: flex;                      /* Show when visible */
}

.back-to-top:hover {
    background-color: var(--primary-dark); /* Darker orange on hover */
    transform: translateY(-5px);        /* Lift on hover */
}

/* ====================
   ANIMATIONS
   Keyframe animations
   ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;                     /* Start invisible */
        transform: translateY(30px);    /* Start lower */
    }
    to {
        opacity: 1;                     /* End visible */
        transform: translateY(0);       /* End in normal position */
    }
}

@keyframes widthGrow {
    from {
        width: 0;                       /* Start with no width */
    }
    to {
        width: 100%;                    /* End with full width */
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;                     /* Start invisible */
        transform: translateY(20px);    /* Start lower */
    }
    to {
        opacity: 1;                     /* End visible */
        transform: translateY(0);       /* End in normal position */
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);            /* Normal size */
    }
    50% {
        transform: scale(1.05);         /* Slightly larger */
    }
    100% {
        transform: scale(1);            /* Back to normal */
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);        /* Start rotation */
    }
    to {
        transform: rotate(360deg);      /* End rotation */
    }
}

/* ====================
   RESPONSIVE DESIGN
   Media queries for different screen sizes
   ==================== */

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    :root {
        --container-xxl: 1140px;        /* Smaller container */
    }
    
    .hero-title {
        font-size: var(--font-4xl);     /* Smaller hero title */
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    :root {
        --container-xxl: 960px;         /* Smaller container */
    }
    
    .hero-title {
        font-size: var(--font-3xl);     /* Smaller hero title */
    }
    
    .about-grid,
    .contact-grid,
    .calculator-container {
        grid-template-columns: 1fr;     /* Single column layout */
        gap: var(--space-2xl);          /* Reduced gap */
    }
    
    .about-image {
        order: -1;                      /* Image before content */
    }
    
    .contact-info {
        padding-right: 0;               /* Remove right padding */
    }
    
    .form-row {
        grid-template-columns: 1fr;     /* Single column forms */
    }
    
    .results-container {
        grid-template-columns: repeat(2, 1fr); /* Two column results */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    :root {
        --container-xxl: 720px;         /* Smaller container */
    }
    
    /* MOBILE MENU */
    .menu-toggle {
        display: flex;                  /* Show mobile menu toggle */
    }
    
    .nav-menu {
        position: fixed;                /* Fixed position */
        top: 80px;                      /* Below header */
        left: -100%;                    /* Off-screen to left */
        flex-direction: column;         /* Stack vertically */
        background-color: var(--white); /* White background */
        width: 100%;                    /* Full width */
        text-align: center;             /* Center text */
        transition: left var(--transition-normal); /* Smooth slide */
        box-shadow: var(--shadow-lg);   /* Menu shadow */
        padding: var(--space-xl) 0;     /* Menu padding */
        gap: 0;                         /* No gap between items */
        z-index: 999;                   /* Above content */
    }
    
    .nav-menu.active {
        left: 0;                        /* Slide into view */
    }
    
    .nav-link {
        padding: var(--space-lg);       /* Larger touch target */
        width: 100%;                    /* Full width */
        display: block;                 /* Block display */
        border-bottom: 1px solid var(--light-gray); /* Separator lines */
    }
    
    .nav-link:last-child {
        border-bottom: none;            /* Remove last separator */
    }
    
    .nav-cta {
        margin: var(--space-lg) auto 0; /* Center call to action */
        display: inline-block;           /* Inline block */
        width: auto;                    /* Auto width */
    }
    
    /* HERO SECTION */
    .hero {
        padding-top: 120px;             /* Less space for header */
    }
    
    .hero-title {
        font-size: var(--font-2xl);     /* Smaller hero title */
    }
    
    .hero-subtitle {
        font-size: var(--font-base);    /* Smaller subtitle */
    }
    
    .hero-buttons {
        flex-direction: column;         /* Stack buttons */
        align-items: center;            /* Center buttons */
        gap: var(--space-md);           /* Smaller gap */
    }
    
    .hero-buttons .btn {
        width: 100%;                    /* Full width buttons */
        max-width: 300px;               /* Maximum width */
        text-align: center;             /* Center text */
    }
    
    /* SECTION TITLES */
    .section-title {
        font-size: var(--font-2xl);     /* Smaller section titles */
    }
    
    .section-subtitle {
        font-size: var(--font-base);    /* Smaller subtitles */
    }
    
    section {
        padding: var(--space-2xl) 0;    /* Less section padding */
    }
    
    /* CALCULATOR */
    .results-container {
        grid-template-columns: 1fr;     /* Single column results */
    }
    
    /* CHAT WIDGET */
    .chat-widget {
        width: calc(100% - 60px);       /* Full width minus margins */
        right: 30px;                    /* Right margin */
        left: 30px;                     /* Left margin */
    }
    
    /* FOOTER */
    .footer-bottom {
        flex-direction: column;         /* Stack footer bottom */
        text-align: center;             /* Center text */
        gap: var(--space-md);           /* Gap between elements */
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    :root {
        --container-xxl: 100%;          /* Full width container */
    }
    
    .container {
        padding: 0 var(--space-md);     /* Less horizontal padding */
    }
    
    .hero-title {
        font-size: var(--font-xl);      /* Even smaller hero title */
    }
    
    .hero-stats {
        gap: var(--space-md);           /* Smaller stats gap */
    }
    
    .stat-item {
        min-width: 120px;               /* Smaller stat items */
        padding: var(--space-md);       /* Less padding */
    }
    
    .stat-item h3 {
        font-size: var(--font-2xl);     /* Smaller numbers */
    }
    
    .services-grid,
    .projects-grid {
        grid-template-columns: 1fr;     /* Single column grids */
    }
    
    .project-filters {
        gap: var(--space-sm);           /* Smaller filter gap */
    }
    
    .filter-btn {
        padding: var(--space-sm) var(--space-md); /* Smaller buttons */
        font-size: var(--font-sm);      /* Smaller font */
    }
    
    .office-locations {
        grid-template-columns: 1fr;     /* Single column offices */
    }
    
    /* BACK TO TOP & CHAT TOGGLE */
    .back-to-top,
    .chat-toggle {
        width: 50px;                    /* Smaller buttons */
        height: 50px;                   /* Smaller buttons */
        bottom: 20px;                   /* Position from bottom */
        right: 20px;                    /* Position from right */
    }
    
    .chat-widget {
        bottom: 90px;                   /* Position above buttons */
        right: 20px;                    /* Right margin */
        left: 20px;                     /* Left margin */
        width: calc(100% - 40px);       /* Full width minus margins */
    }
}

/* Print styles */
@media print {
    .header,
    .chat-toggle,
    .chat-widget,
    .back-to-top,
    .hero-buttons,
    .contact-form,
    .footer {
        display: none !important;       /* Hide non-essential elements */
    }
    
    body {
        color: #000 !important;         /* Black text for printing */
        background: #fff !important;    /* White background */
    }
    
    a {
        color: #000 !important;         /* Black links */
        text-decoration: underline !important; /* Underlined links */
    }
    
    .container {
        max-width: 100% !important;     /* Full width */
        padding: 0 !important;          /* No padding */
    }
    
    section {
        padding: 20px 0 !important;     /* Minimal padding */
        page-break-inside: avoid;       /* Avoid breaking sections */
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #FF8C00;       /* Brighter orange */
        --secondary-color: #000080;     /* Navy blue */
        --accent-color: #008000;        /* Forest green */
    }
    
    .btn-primary,
    .btn-secondary {
        border-width: 3px;              /* Thicker borders */
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* Disable animations */
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}