/* 
SolveIT - Main Stylesheet
------------------------------------------
Based on Figma design but customized with SolveIT brand colors
*/

/* 
------------------------------------------
VARIABLES
------------------------------------------
*/
:root {
    /* Brand Colors */
    --color-primary-light: #18dafe;
    --color-primary-mid: #777cfe;
    --color-primary-dark: #c926ff;
    --color-gradient-start: #2c28d4;
    --color-gradient-end: #1f2070;
    
    /* Supporting Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark: #1a1a2e;
    --color-light: #f8f9fa;
    --color-gray-light: #e9ecef;
    --color-gray: #6c757d;
    --color-gray-dark: #343a40;
    
    /* Text Colors */
    --text-dark: #202124;
    --text-medium: #5f6368;
    --text-light: #9aa0a6;
    
    /* Radius */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-extra-large: 24px;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Typography */
    --font-family: 'Poppins', sans-serif;
    --font-size-base: 16px;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Container */
    --container-max-width: 1200px;
    --container-padding: 1.5rem;
}

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

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--color-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary-mid);
    text-decoration: none;
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

button, input, textarea, select {
    font-family: var(--font-family);
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Section Styles */
section {
    padding: var(--spacing-xxl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));
    border-radius: 4px;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-top: 1.5rem; /* Add more spacing before subtitles */
}

/* 
------------------------------------------
BUTTONS
------------------------------------------
*/
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-medium);
    font-weight: var(--font-weight-medium);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(119, 124, 254, 0.4);
}

.btn-primary:hover {
    box-shadow: 0 8px 20px rgba(119, 124, 254, 0.6);
    transform: translateY(-2px);
    color: var(--color-white);
}

.btn-secondary {
    background: var(--color-gradient-start);
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(31, 32, 112, 0.3);
}

.btn-secondary:hover {
    background: var(--color-gradient-end);
    box-shadow: 0 8px 20px rgba(31, 32, 112, 0.5);
    transform: translateY(-2px);
    color: var(--color-white);
}

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

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

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* 
------------------------------------------
HEADER & NAVIGATION
------------------------------------------
*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    padding: 0;
    transition: all var(--transition-normal);
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}

.header.transparent {
    background-color: transparent;
    box-shadow: none;
}

.header.transparent .logo-dark {
    display: none;
}

.header.transparent .logo-light {
    display: block;
}

.header.transparent .nav__link {
    color: var(--color-white);
}

.header.transparent .hamburger-menu span {
    background-color: var(--color-white);
}

.header.scrolled {
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    padding: 0;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}

.header .container {
    height: 100%;
}

.header__content {
    height: 100%;
}

/* Maintain same height on mobile when scrolled */
@media (max-width: 767px) {
    .header {
        padding: 0 !important;
        height: 65px !important; /* Fixed height for mobile */
        min-height: 65px !important; /* Ensure minimum height */
        max-height: 65px !important; /* Ensure maximum height */
        box-sizing: border-box !important;
        transition: background-color 0.3s, box-shadow 0.3s !important; /* Only transition color and shadow */
    }
    
    .header.scrolled {
        padding: 0 !important;
        height: 65px !important; /* Fixed height for mobile */
        min-height: 65px !important;
        max-height: 65px !important;
    }
    
    .header__logo {
        overflow: visible !important; /* Allow logo to overflow its container */
        height: 65px !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }
    
    .header__logo img.logo-dark {
        height: 80px !important; /* Smaller size for mobile header logo */
        max-height: 80px !important; 
        display: block !important;
        margin-top: -7px !important;
    }
    
    .header__logo img.logo-light {
        display: none !important;
    }
    
    .header.transparent .header__logo img.logo-dark {
        display: none !important;
    }
    
    .header.transparent .header__logo img.logo-light {
        display: block !important;
        height: 80px !important;
        max-height: 80px !important;
        margin-top: -7px !important;
    }
    
    .header__content {
        height: 100% !important;
        align-items: center !important;
        padding: 0 15px !important;
    }
    
    /* Adjust spacing to ensure consistent height */
    .header__mobile-trigger {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure hero section has proper top spacing for mobile */
    .hero {
        padding-top: 85px !important;
    }
}

/* This ensures the header doesn't change size on mobile */
.header {
    will-change: transform; /* Performance optimization */
    transform: translateZ(0); /* Force GPU acceleration */
}

.header.scrolled .logo-dark {
    display: block;
}

.header.scrolled .logo-light {
    display: none;
}

.header.scrolled .nav__link {
    color: var(--text-dark);
}

.header.scrolled .hamburger-menu span {
    background-color: var(--text-dark);
}

.header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    display: flex;
    align-items: center;
}

.header__logo img {
    height: 120px; /* Increased 3x from 40px */
}

.logo-light {
    display: none;
}

/* Desktop Navigation */
.header__nav {
    display: none;
}

.nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item {
    position: relative;
    margin-left: var(--spacing-md);
}

.nav__link {
    font-weight: var(--font-weight-medium);
    padding: 0.5rem;
    color: var(--text-dark);
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));
    transition: width var(--transition-normal);
}

.nav__link:hover::after,
.nav__link.active::after {
    width: 100%;
}

.nav__link--highlighted {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-medium);
    box-shadow: 0 4px 10px rgba(119, 124, 254, 0.3);
}

.nav__link--highlighted:hover {
    color: var(--color-white);
    box-shadow: 0 6px 15px rgba(119, 124, 254, 0.5);
    transform: translateY(-2px);
}

.nav__link--highlighted::after {
    display: none;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px; /* Increased width to accommodate longer menu items */
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-medium);
    padding: var(--spacing-md);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
    z-index: 100;
}

.dropdown:hover .dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown__menu li {
    margin: var(--spacing-xs) 0;
}

.dropdown__menu a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--text-dark);
    transition: all var(--transition-normal);
    border-radius: var(--radius-small);
    white-space: nowrap; /* Prevent text from wrapping */
}

.dropdown__menu a:hover {
    background-color: var(--color-gray-light);
    padding-left: var(--spacing-md);
    background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
}

/* Mobile Trigger */
.header__mobile-trigger {
    display: block;
    cursor: pointer;
    position: fixed;
    right: 15px;
    top: 22px;
    z-index: 1100;
}

@media (min-width: 768px) {
    .header__mobile-trigger {
        position: static;
    }
}

.hamburger-menu {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-menu span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--text-dark);
    transition: all var(--transition-normal);
}

/* Mobile Navigation */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-color: var(--color-white);
    z-index: 2000;
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    transition: right var(--transition-normal);
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-light);
}

.mobile-nav__logo img {
    height: 108px; /* Increased 3x from 36px */
}

.mobile-nav__close {
    font-size: 1.5rem;
    cursor: pointer;
    transition: color var(--transition-normal);
}

.mobile-nav__close:hover {
    color: var(--color-primary-dark);
}

.mobile-nav__menu {
    padding: var(--spacing-md);
}

.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav__item {
    margin-bottom: var(--spacing-sm);
}

.mobile-nav__link {
    display: block;
    padding: var(--spacing-sm);
    color: var(--text-dark);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-small);
    transition: all var(--transition-normal);
}

.mobile-nav__link:hover,
.mobile-nav__link.active {
    background-color: var(--color-gray-light);
    padding-left: var(--spacing-lg);
}

.mobile-nav__link--highlighted {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
    border-radius: var(--radius-medium);
}

.mobile-nav__link--highlighted:hover {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
}

.mobile-nav__item--has-children {
    position: relative;
}

.mobile-nav__item--has-children::after {
    content: '+';
    position: absolute;
    right: var(--spacing-md);
    top: 10px;
    font-size: 1.2rem;
    transition: transform var(--transition-normal);
}

.mobile-nav__item--has-children.active::after {
    transform: rotate(45deg);
}

.mobile-nav__submenu {
    list-style: none;
    margin: 0;
    padding-left: var(--spacing-lg);
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.mobile-nav__item--has-children.active .mobile-nav__submenu {
    max-height: 500px;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.mobile-nav__submenu li {
    margin-bottom: var(--spacing-xs);
}

.mobile-nav__submenu a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--text-medium);
    font-size: 0.9rem;
    transition: all var(--transition-normal);
    border-radius: var(--radius-small);
}

.mobile-nav__submenu a:hover {
    background-color: var(--color-gray-light);
    padding-left: var(--spacing-md);
}

.mobile-nav__contact {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-gray-light);
}

.mobile-nav__contact-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.mobile-nav__contact-item i {
    width: 30px;
    color: var(--color-primary-mid);
}

.mobile-nav__social {
    padding: var(--spacing-md);
    display: flex;
    border-top: 1px solid var(--color-gray-light);
}

.mobile-nav__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--color-gray-light);
    color: var(--text-dark);
    border-radius: 50%;
    margin-right: var(--spacing-sm);
    transition: all var(--transition-normal);
}

.mobile-nav__social a:hover {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* This ensures the overlay doesn't block clicks when not active */
    transition: all var(--transition-normal);
}

.overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Only capture clicks when active */
}

/* 
------------------------------------------
HERO SECTION
------------------------------------------
*/
.hero {
    position: relative;
    padding: 0;
    height: 100vh; /* Full height viewport */
    background: url('../images/herobg.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 40, 212, 0.8), rgba(31, 32, 112, 0.8)); /* Overlay with gradient */
    opacity: 0.85;
    pointer-events: none; /* Ensure overlay doesn't block clicks */
}

/* Ensure hero content, image, and buttons are clickable and visible above overlay */
.hero__content, .hero__image {
    position: relative;
    z-index: 5; /* Bring content above any overlays */
}

.hero__content .btn {
    position: relative;
    z-index: 10; /* Extra high z-index to ensure it's always clickable */
}

.hero__image img {
    position: relative;
    z-index: 5; /* Ensure image is above the overlay */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25)); /* Add shadow for depth */
    margin-top: 30px; /* Move image down */
    width: 90%; /* Make image 10% smaller */
    max-width: 450px; /* Maintain max width constraint */
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__content {
    text-align: center;
    color: var(--color-white);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
}

.hero__content h1 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-lg);
}

.hero__content p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
    opacity: 0.9;
}

.hero__image {
    width: 100%;
    max-width: 500px;
}

/* 
------------------------------------------
SERVICES SECTION
------------------------------------------
*/
.services {
    background-color: var(--color-light);
    position: relative;
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.service-card {
    background-color: var(--color-white);
    border-radius: var(--radius-large);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.service-card__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    border-radius: 50%;
}

.service-card h3 {
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-semibold);
}

.service-card p {
    color: var(--text-medium);
    margin-bottom: 0;
}

/* 
------------------------------------------
FAQ SECTION
------------------------------------------
*/
.faq {
    background-color: var(--color-light);
    position: relative;
    overflow: hidden;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-white);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.faq-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.faq-question {
    padding: var(--spacing-lg);
    cursor: pointer;
    position: relative;
    font-weight: var(--font-weight-semibold);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--transition-normal);
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--color-primary-mid);
    transition: all var(--transition-normal);
}

.faq-item.active .faq-question {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
}

.faq-item.active .faq-question::after {
    content: '−';
    color: var(--color-white);
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 var(--spacing-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding: var(--spacing-lg);
    opacity: 1;
    visibility: visible;
    border-top: 1px solid var(--color-gray-light);
}

.faq-more {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.faq-more a {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: transparent;
    color: var(--color-primary-mid);
    border: 2px solid var(--color-primary-mid);
    border-radius: var(--radius-medium);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
}

.faq-more a:hover {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* 
------------------------------------------
TESTIMONIALS SECTION
------------------------------------------
*/
.testimonials {
    background-color: var(--color-white);
}

.testimonials__slider {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--radius-large);
}

.testimonials__slider-inner {
    display: flex;
    transition: transform 1.2s ease; /* Slower transition */
    width: max-content; /* Ensure it accommodates all cards */
}

.testimonial-card {
    background-color: var(--color-light);
    border-radius: var(--radius-large);
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg); /* Increased padding */
    flex: 0 0 calc(50% - var(--spacing-lg)); /* Fixed width using flex-basis */
    margin: 0 calc(var(--spacing-lg) / 2);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    width: 450px; /* Fixed width for each card */
    max-width: calc(50% - var(--spacing-lg)); /* Ensure not more than 50% - margin */
    border: 3px solid; /* Add border */
    border-image: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark)) 1; /* Gradient border for all cards */
    border-image-slice: 1;
    position: relative;
}

/* Handle testimonial appearance on different screen sizes */
@media (min-width: 768px) {
    .testimonials__slider {
        width: 93%;
        padding: 0 var(--spacing-md);
    }
    
    .testimonial-card {
        max-width: 450px; /* Set a maximum width to avoid cards being too wide */
    }
}

/* On mobile, show only 1 card at a time */
@media (max-width: 767px) {
    .testimonial-card {
        width: calc(100% - var(--spacing-lg));
    }
}

/* Add smooth animation for cards */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* No hover effects for testimonial cards as requested */

.testimonial-card__content {
    margin-bottom: var(--spacing-lg);
}

.testimonial-card__content p {
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: 0;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
}

.testimonial-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: var(--spacing-md);
    border: 3px solid var(--color-white);
    box-shadow: var(--shadow-sm);
}

.testimonial-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-card__info h4 {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
}

.testimonial-card__info p {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--text-medium);
}

/* 
------------------------------------------
CONTACT SECTION
------------------------------------------
*/
.contact {
    background-color: var(--color-light);
}

.contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.contact__info {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.contact__info-item {
    background-color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact__info-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact__info-item i {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary-mid);
    display: inline-block;
}

.contact__info-item h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    width: 100%;
}

.contact__info-item p {
    margin-bottom: 0;
    color: var(--text-medium);
    text-align: center;
    width: 100%;
}

.contact__form {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-md);
}

@media (max-width: 767px) {
    .contact__form form button[type="submit"] {
        display: block;
        margin: 0 auto;
    }
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-medium);
    transition: all var(--transition-normal);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-primary-mid);
    box-shadow: 0 0 0 3px rgba(119, 124, 254, 0.2);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* 
------------------------------------------
FOOTER
------------------------------------------
*/
.footer {
    background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    color: var(--color-white);
    padding: var(--spacing-xxl) 0 var(--spacing-md);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/footer-pattern.svg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl);
}

.footer__brand {
    max-width: 350px;
}

.footer__logo {
    height: 120px; /* Increased 3x from 40px */
    margin-bottom: var(--spacing-md);
}

.footer__brand p {
    opacity: 0.8;
    font-size: 0.9rem;
}

.footer__social {
    display: flex;
    margin-top: var(--spacing-md);
}

.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-radius: 50%;
    margin-right: var(--spacing-sm);
    transition: all var(--transition-normal);
}

.footer__social a:hover {
    background-color: var(--color-white);
    color: var(--color-gradient-start);
    transform: translateY(-2px);
}

.footer__links h4,
.footer__newsletter h4 {
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
}

.footer__links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__links li {
    margin-bottom: var(--spacing-xs);
}

.footer__links a {
    color: rgba(255, 255, 255, 0.8);
    transition: all var(--transition-normal);
    display: inline-block;
}

.footer__links a:hover {
    color: var(--color-white);
    transform: translateX(5px);
}

.footer__newsletter p {
    opacity: 0.8;
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

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

.footer__newsletter input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-medium);
    margin-bottom: var(--spacing-sm);
    outline: none;
}

.footer__newsletter button {
    align-self: flex-start;
}

.footer__bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__bottom p {
    opacity: 0.7;
    font-size: 0.9rem;
    margin-bottom: 0;
}

.footer__developer {
    margin-top: var(--spacing-md);
    text-align: center;
    background-color: white;
    padding: 5px 15px;
    border-radius: 4px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.footer__developer p {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #c05208; /* Changed to requested color */
    margin-bottom: 0;
}

.footer__developer a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #c05208 !important; /* Changed to requested color */
    font-weight: 500;
}

/* Remove hover effect */
.footer__developer a:hover {
    opacity: 1;
    color: #c05208 !important;
    transform: none; /* Prevent any transform on hover */
}

.developer-logo {
    height: 1.7em; /* Doubled the size */
    width: auto;
    vertical-align: middle;
}

/* 
------------------------------------------
ABOUT SECTION
------------------------------------------
*/
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.about {
    background: linear-gradient(-45deg, var(--color-primary-light), var(--color-primary-mid), var(--color-primary-dark), var(--color-primary-mid));
    background-size: 300% 300%;
    animation: gradient-animation 6s ease infinite; /* Changed from 3s to 7s to make it a bit slower */
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero-pattern.svg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1;
    pointer-events: none; /* Ensure pattern overlay doesn't block clicks */
}

.about .section-header h2 {
    color: var(--color-white);
}

.about .section-header p {
    color: rgba(255, 255, 255, 0.9);
}

.about__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-large);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    background-color: rgba(255, 255, 255, 0.15);
}

.stat-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(119, 124, 254, 0.4);
}

.stat-card__number {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--spacing-xs);
}

.stat-card__title {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.about__content {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-large);
    padding: var(--spacing-xl);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

.about__content h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    display: inline-block;
    position: relative;
}

.about__content h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100px; /* Increased from 40px to make line longer */
    height: 2px;
    background: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));
    border-radius: 2px;
}

.about__content p {
    color: rgba(255, 255, 255, 0.9);
}

.about__list {
    list-style: none;
    padding-left: 0;
}

.about__list li {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
}

.about__list i {
    color: var(--color-primary-light);
    margin-right: var(--spacing-sm);
    font-size: 1.1rem;
}

/* Form styles for validation */
.form-error-message {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
    padding: var(--spacing-sm);
    border-radius: var(--radius-small);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

.form-group input.error,
.form-group textarea.error {
    border-color: #dc3545;
}

.form-success-message {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    padding: var(--spacing-sm);
    border-radius: var(--radius-small);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}

/* Testimonial dots navigation */
.testimonial-dots {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-gray-light);
    margin: 0 var(--spacing-xs);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.dot.active {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    transform: scale(1.2);
}

/* 
------------------------------------------
MEDIA QUERIES
------------------------------------------
*/
@media (max-width: 767px) {
    /* Hide hero image on mobile */
    .hero__image {
        display: none;
    }
    
    /* Center hero content on mobile */
    .hero .container {
        text-align: center;
    }
    
    .hero__content {
        text-align: center;
        margin-right: 0;
    }
}

@media (min-width: 576px) {
    h1 {
        font-size: 3rem;
    }
    
    .hero__content h1 {
        font-size: 3rem;
    }
    
    .contact__info {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .hero .container {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .hero__content {
        text-align: left;
        margin-bottom: 0;
        margin-right: var(--spacing-xl);
    }
    
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .header__nav {
        display: block;
    }
    
    .header__mobile-trigger {
        display: none;
    }
    
    .services__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .contact__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* 
------------------------------------------
SCROLL DOWN ARROW
------------------------------------------
*/
.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
    animation: bounce 2s infinite;
}

.scroll-down svg {
    width: 30px;
    height: 50px;
    fill: none;
    stroke: var(--color-white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scroll-down .arrow {
    animation: arrow-animation 1s infinite alternate;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-15px) translateX(-50%);
    }
    60% {
        transform: translateY(-7px) translateX(-50%);
    }
}

@keyframes arrow-animation {
    0% {
        opacity: 0.2;
        transform: translateY(-3px);
    }
    100% {
        opacity: 1;
        transform: translateY(3px);
    }
}

/* 
------------------------------------------
ANIMATIONS
------------------------------------------
*/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
/* 
==============================================
MOBILE FIX FOR FOOTER & FAQ CLICKABILITY
==============================================
Add this to the bottom of your styles1.css file
or include it as a separate stylesheet AFTER styles1.css
*/

/* 
------------------------------------------
1. Z-INDEX FIXES - Critical for clickability
------------------------------------------
*/

/* Ensure FAQ section is above other elements */
.faq {
    position: relative;
    z-index: 50;
}

/* Make FAQ items clickable with proper z-index */
.faq-item {
    position: relative;
    z-index: 51;
}

.faq-question {
    position: relative;
    z-index: 52;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(119, 124, 254, 0.2);
}

/* Ensure footer is above background elements */
.footer {
    position: relative;
    z-index: 50;
    background-color: var(--color-dark);
}

/* Make all footer links properly clickable */
.footer a {
    position: relative;
    z-index: 51;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(119, 124, 254, 0.2);
}

.footer__social a {
    position: relative;
    z-index: 52;
}

/* Footer bottom section */
.footer__bottom {
    position: relative;
    z-index: 51;
}

.footer__bottom a {
    position: relative;
    z-index: 52;
}

/* 
------------------------------------------
2. POINTER EVENTS FIX
------------------------------------------
Remove pointer events from decorative elements
*/

/* Prevent background elements from blocking clicks */
.about::before,
.hero::before,
.hero::after,
section::before,
section::after {
    pointer-events: none !important;
}

/* Ensure pattern overlays don't block interactions */
.pattern-overlay,
.gradient-overlay {
    pointer-events: none !important;
}

/* 
------------------------------------------
3. MOBILE TOUCH TARGET OPTIMIZATION
------------------------------------------
Minimum 44x44px for better mobile usability
*/

@media (max-width: 768px) {
    /* FAQ Questions - Larger touch targets */
    .faq-question {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 16px 20px;
        touch-action: manipulation;
    }
    
    /* Footer Links - Better spacing and size */
    .footer__links ul li {
        margin-bottom: 12px;
    }
    
    .footer__links a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 8px;
        touch-action: manipulation;
    }
    
    /* Footer Social Icons - Larger touch area */
    .footer__social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        min-height: 48px;
        margin: 0 6px;
        touch-action: manipulation;
    }
    
    /* Footer Developer Link */
    .footer__developer a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 8px;
        touch-action: manipulation;
    }
    
    /* Newsletter Form */
    .footer__newsletter input,
    .footer__newsletter button {
        min-height: 48px;
        touch-action: manipulation;
    }
}

/* 
------------------------------------------
4. MOBILE-SPECIFIC FIXES
------------------------------------------
*/

@media (max-width: 768px) {
    /* Prevent iOS zoom on input focus */
    .footer__newsletter input[type="email"] {
        font-size: 16px;
    }
    
    /* Better mobile padding for footer */
    .footer {
        padding-bottom: 20px;
    }
    
    .footer__grid {
        gap: 40px;
    }
    
    /* Ensure footer stays at bottom */
    .footer {
        margin-top: auto;
    }
    
    /* FAQ Mobile optimization */
    .faq-container {
        margin-bottom: 20px;
    }
    
    .faq-item {
        margin-bottom: 12px;
    }
    
    /* Remove any conflicting transforms on mobile */
    .footer a:active,
    .faq-question:active {
        opacity: 0.7;
    }
}

/* 
------------------------------------------
5. OVERFLOW AND SCROLL FIXES
------------------------------------------
*/

/* Prevent horizontal overflow issues */
body {
    overflow-x: hidden;
    position: relative;
}

/* Ensure sections don't create scroll issues */
section {
    overflow-x: hidden;
    position: relative;
}

/* 
------------------------------------------
6. WEBKIT SPECIFIC FIXES (iOS Safari)
------------------------------------------
*/

/* Remove tap highlight color conflicts */
.footer a,
.faq-question,
button,
input {
    -webkit-tap-highlight-color: rgba(119, 124, 254, 0.2);
}

/* Ensure proper touch scrolling */
.footer,
.faq {
    -webkit-overflow-scrolling: touch;
}

/* Fix iOS Safari button styling */
.footer button,
.footer input {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
}

/* 
------------------------------------------
7. ACCESSIBILITY IMPROVEMENTS
------------------------------------------
*/

/* Focus states for keyboard navigation */
.footer a:focus,
.faq-question:focus {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* Better hover states for touch devices */
@media (hover: none) {
    .footer a:hover,
    .faq-question:hover {
        opacity: 0.8;
    }
}

/* 
------------------------------------------
8. CRITICAL OVERRIDES (if issues persist)
------------------------------------------
Use these only if the above fixes don't work
*/

/* Force footer above everything except header */
.footer {
    z-index: 100 !important;
}

.footer * {
    z-index: inherit;
}

/* Force FAQ clickability */
.faq {
    isolation: isolate;
}

.faq-question {
    isolation: isolate;
}

/* 
------------------------------------------
TESTING CHECKLIST
------------------------------------------
After applying these fixes, test:
1. Can you click footer social icons on mobile?
2. Can you click footer navigation links?
3. Can you click the developer link at bottom?
4. Can you click FAQ questions to expand/collapse?
5. Does the newsletter form work?
6. Do links work in both portrait and landscape?
7. Test on iOS Safari and Chrome mobile
*/

/*
------------------------------------------
BLACK FRIDAY BANNER & DEALS LINK
------------------------------------------
*/
.black-friday-banner {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: var(--color-white);
    padding: 0.5rem 0;
    text-align: center;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.banner-icon {
    font-size: 1rem;
}

.banner-text {
    font-weight: 500;
    font-size: 0.9rem;
}

.banner-cta {
    background: var(--color-white);
    color: var(--color-primary-mid);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.banner-cta:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.nav__link--deals {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-mid));
    color: var(--color-white) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav__link--deals:hover {
    background: linear-gradient(135deg, var(--color-primary-mid), var(--color-primary-dark));
    transform: translateY(-2px);
}

.mobile-nav__link--deals {
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-mid));
    color: var(--color-white) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 6px;
    font-weight: 600;
    margin: 0.5rem 0;
}

.mobile-nav__link--deals:hover {
    background: linear-gradient(135deg, var(--color-primary-mid), var(--color-primary-dark));
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .banner-text {
        font-size: 0.8rem;
    }

    .banner-cta {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
}