/* Global Font Family (excluding header and footer elements) */
* {
    font-family: 'Space Grotesk', sans-serif;
}

/* Keep original fonts for header and footer */
header *, footer *, .footer *, #header *, #footer * {
    /* These will use their original font declarations below */
}

/* Global Heading Font Family (excluding navbar/footer) */
main h1, main h2, main h3, main h4, main h5, main h6,
section h1, section h2, section h3, section h4, section h5, section h6,
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6,
.title, .serv-title, .hero-title, .section-title,
.introtitle, .approach-title, .cta-text h1,
.slider-container h2, .why-kaaspro h2,
.empower, .mobile-title, .title1 {
    font-family: 'Space Mono', monospace !important;
}

/* Text Selection Styling */
::selection {
    background: rgba(255, 182, 193, 0.3); /* Baby pink with transparency */
    color: #fff;
}

::-moz-selection {
    background: rgba(255, 182, 193, 0.3); /* Firefox support */
    color: #fff;
}

/* Make buttons and images non-selectable */
button,
button *,
.btn,
.btn *,
.cta-btn,
.cta-btn *,
a.btn,
a.btn *,
img,
svg,
video,
canvas {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    pointer-events: auto;
}

/* Ensure images can't be dragged */
img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    draggable: false;
}

/* Highlight Color */
/* .highlight {
    color: rgba(255, 182, 193, 1);
}

.footer-highlight {
    color: rgba(255, 182, 193, 1);
} */

/* Header */
.footer-highlight {
    color: rgba(255, 182, 193, 1);
}
header {
    position: fixed;
    top: 20px; /* Space from top for island effect */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: auto; /* Let content determine width */
    max-width: 800px; /* Maximum width for large screens */
    z-index: 1000;
    background-color: transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0; /* Remove default padding */
}

/* Scrolled header styles - Simple Island */
header.scrolled {
    /* Clean glass background */
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Perfect pill shape */
    border-radius: 50px;
    padding: 12px 24px;
    
    /* Keep navbar fixed and visible */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 800px;
    
    /* Subtle shadow */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Border for definition */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    overflow: hidden;
}



/* Ensure navigation content appears above glass effects */
header.scrolled nav {
    position: relative;
    z-index: 10;
}

/* Scrolled state adjustments */
header.scrolled .logo {
    font-size: 24px; /* Slightly smaller in pill */
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

/* Update shade color for scrolled state */
header.scrolled .logo .shade {
    color: rgba(255, 182, 193, 1); /* Pink accent color */
}

/* Nav links in pill shape */
header.scrolled .nav-links {
    gap: 1.5rem; /* Maintain compact spacing */
}

header.scrolled .nav-links a {
    color: #ffffff;
    font-size: 15px; /* Even smaller in pill */
    font-weight: 500;
    position: relative;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Enhance readability on glass */
}

/* Hover effect for scrolled nav links */
header.scrolled .nav-links a:hover {
    color: rgba(255, 182, 193, 1); /* Pink hover color */
    text-decoration: none;
}

/* Active link in scrolled state */
header.scrolled .nav-links a.active {
    color: rgba(255, 182, 193, 1);
    font-weight: 600;
}

/* Hide hamburger menu when scrolled on desktop */
@media (min-width: 769px) {
    header.scrolled .hamburger {
        display: none !important;
    }
}

/* Body padding to account for island navbar */
body {
    padding-top: 100px; /* Space for floating island navbar */
}


/* Make all header elements non-selectable */
#header,
#header *,
header,
header * {
    user-select: none !important; /* Make header non-selectable */
    -webkit-user-select: none !important; /* Safari */
    -moz-user-select: none !important; /* Firefox */
    -ms-user-select: none !important; /* IE/Edge */
    -webkit-touch-callout: none !important; /* iOS Safari */
}

/* Navigation Bar - Island layout */
header nav {
    display: flex;
    align-items: center;
    gap: 2rem; /* Space between logo and nav links */
    white-space: nowrap; /* Prevent wrapping */
}

/* Logo */
header .logo {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Space Mono', monospace, 'Courier New', Courier;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Don't shrink */
    font-display: swap; /* Enable font swapping for faster LCP */
}

/* Navigation Links */
header .nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem; /* Tighter spacing for pill */
    margin: 0;
    padding: 0;
    align-items: center;
    margin-top:5px
}

header .nav-links li {
    margin: 0; /* Ensure consistent spacing using gap */
}

header .nav-links a {
    color: rgb(255, 255, 255); /* Default link color */
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px; /* Smaller for compact pill */
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0; /* Vertical padding for easier clicking */
}

/* Hover and Active States for Navigation Links */
header .nav-links a:hover,
header .nav-links a:active,
header .nav-links a:focus {
    color: rgba(255, 182, 193, 1);
}


/* Active Navigation Link Styling */
.nav-links a.active {
    color: rgba(255, 182, 193, 1); /* Highlight color */
    /* border-bottom: 2px solid rgb(255, 255, 255); Underline the active link */
    font-weight: bold;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    height: 20px;
    width: 25px;
}

.hamburger span {
    display: block;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
}

.hamburger.close span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Top to bottom */
}

.hamburger.close span:nth-child(2) {
    opacity: 0; /* Hide the middle line */
}

.hamburger.close span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px); /* Bottom to top */
}

.shade{
    color: rgba(255, 182, 193, 1);
}

@media(max-width: 1024px){
    header .nav-links {
        list-style: none;
        display: flex;
        gap: 2.5rem;
        margin: 0; /* Removed unnecessary margin-top adjustment */
        padding: 0;
    }
    header .nav-links a {
        font-size: 18px;
    }
}
/* Media Query for Mobile Screens */
@media (max-width: 500px) {



    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        right: 5px;
        color: #fff;
        background-color: #121212;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        padding: 10px;
        gap: 10px;
        width: 150px;
        height: 200px;
        border: 2px solid #fff;
    }
    



    header .nav-links.show {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    header .nav-links {
        list-style: none;
        display: none;
        gap: 1.0rem;
        margin: 0;
        padding: 0;
        text-align: center;
        padding: 10px;
    }

    header .nav-links li {
        margin: 0;
        margin-top: 4px;
    }

    .footer-content{
        flex-direction: column-reverse;
    }

    .footer-highlight {
        color: rgba(255, 182, 193, 1);
    }


    .shade{
        font-size: 34px;
        color: rgba(255, 182, 193, 1);
    }
}





/* Footer */
.footer {
    padding: 0;
    font-size: 0.9rem;
    color: #999;
    background-color: #121212;
    margin-top: 4rem;
    overflow-x: hidden;
    position: relative;
}

/* Make all footer elements non-selectable */
#footer,
#footer *,
.footer,
.footer *,
footer,
footer * {
    user-select: none !important; /* Make footer non-selectable */
    -webkit-user-select: none !important; /* Safari */
    -moz-user-select: none !important; /* Firefox */
    -ms-user-select: none !important; /* IE/Edge */
    -webkit-touch-callout: none !important; /* iOS Safari */
}

.footer hr {
    border: none;
    border-top: 1px solid #333;
    margin: 0 0 3rem 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Main Footer Container */
.footer-main {
    padding: 0 2rem 3rem;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr 1.5fr;
    gap: 3rem;
}

/* Footer Columns */
.footer-column {
    text-align: left;
}

.footer-column.company-info {
    padding-right: 2rem;
}

/* Footer Brand */
.footer-brand {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.company-description {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #b3b3b3;
    margin-bottom: 1.5rem;
}

.copyright {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #b3b3b3;
}

/* Footer Headings */
.footer-heading {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1.5rem;
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-links a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    color: #b3b3b3;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(5px);
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    color: #b3b3b3;
}

.contact-item a {
    color: #b3b3b3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #fff;
}

.contact-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(255, 182, 193, 0.8);
}

/* Newsletter Section */
.newsletter-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    color: #b3b3b3;
    margin-bottom: 1rem;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.75rem 1rem;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

.newsletter-form input::placeholder {
    color: #666;
}

.newsletter-form input:focus {
    outline: none;
    border-color: rgba(255, 182, 193, 0.6);
}

.newsletter-form button {
    padding: 0.75rem 1.5rem;
    background-color: rgba(255, 182, 193, 0.9);
    border: none;
    border-radius: 4px;
    color: #121212;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.newsletter-form button:hover {
    background-color: rgba(255, 182, 193, 1);
    transform: translateY(-2px);
}

/* Social Section */
.social-section {
    margin-top: 1.5rem;
}

.social-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    color: #b3b3b3;
    margin-bottom: 1rem;
}

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

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.social-icons a:hover {
    background-color: rgba(255, 182, 193, 0.2);
    border-color: rgba(255, 182, 193, 0.4);
    transform: translateY(-3px);
}

.social-icons img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.social-icons a:hover img {
    opacity: 1;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background-color: rgba(255, 182, 193, 0.9);
    border: none;
    border-radius: 50%;
    color: #121212;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 999;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: rgba(255, 182, 193, 1);
    transform: translateY(-3px);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .footer-container {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 2.5rem;
    }
    
    .footer-column:nth-child(3) {
        grid-column: span 2;
    }
}

@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer-column.company-info {
        grid-column: span 2;
        padding-right: 0;
        margin-bottom: 1rem;
    }
    
    .footer-column:nth-child(3) {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .footer-main {
        padding: 0 1.5rem 2rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-column.company-info {
        grid-column: span 1;
        text-align: center;
    }
    
    .footer-column {
        text-align: center;
    }
    
    .footer-links a:hover {
        transform: none;
    }
    
    .contact-info {
        align-items: center;
    }
    
    .contact-item {
        justify-content: center;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form button {
        width: 100%;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 500px) {
    .footer {
        margin-top: 2rem;
    }
    
    .footer hr {
        margin-bottom: 2rem;
    }
    
    .footer-brand {
        font-size: 1.5rem;
    }
    
    .footer-heading {
        font-size: 1rem;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    
    .footer-links a,
    .contact-item,
    .newsletter-text,
    .company-description {
        font-size: 0.85rem;
    }
    
    .copyright {
        font-size: 0.75rem;
    }
}

/* Footer Highlight Color */
.footer-highlight {
    color: rgba(255, 182, 193, 1);
}

/* Description Section (legacy) */
.description {
    margin-top: 5%;
    font-family: 'Space Grotesk', sans-serif;
    max-width: 235px;
}

/* ========== UNIFIED HERO BANNER STYLES ========== */
/* Based on industries page design for consistency across all pages */

/* Hero Section Base */
.hero {
    background: url(../svg/KaasBG.svg) no-repeat center / cover;
    background-size: cover;
    background-position: center;
    color: white;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin-top: -100px;
    position: relative;
    display: flex;
    overflow: visible;
}

/* Hero Content Container */
.hero-content {
    position: relative;
    text-align: center;
    max-width: 80vw;
    margin: 0 auto;
    padding: 0 2rem;
    opacity: 0.95;
}

/* Hero Title - Industries Page Style */
.hero-title {
    font-size: clamp(5rem, 10vw, 8rem);
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1 !important;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Hero Description - Industries Page Style */
.hero-description {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
}

/* Floating Text Animation */
.floating-text {
    color: #FFB6C1;
    display: inline-block;
    animation: floatIn 2s ease-out forwards;
    animation-delay: 0.3s;
    animation-fill-mode: both;
    position: relative;
    white-space: nowrap;
    transform: translateY(20px);
    opacity: 0;
}

@keyframes floatIn {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mobile Responsive Hero Styles */
@media (max-width: 768px) {
    .hero {
        min-height: 85vh;
        padding-top: 100px;
        margin-top: -80px;
    }
    
    .hero-title {
        font-size: clamp(3rem, 8vw, 5rem);
        margin-bottom: 1.5rem;
        line-height: 1 !important;
    }
    
    .hero-description {
        font-size: clamp(1rem, 3vw, 1.25rem);
        padding: 0 1rem;
    }
    
    .floating-text {
        white-space: normal;
        display: inline;
    }
}