@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-regular.woff2') format('woff2'),
         url('/assets/fonts/inter-regular.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-medium.woff2') format('woff2'),
         url('/assets/fonts/inter-medium.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-semibold.woff2') format('woff2'),
         url('/assets/fonts/inter-semibold.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-bold.woff2') format('woff2'),
         url('/assets/fonts/inter-bold.woff') format('woff');
}


:root {
    --primary: #FF6D00;
    --primary-dark: #E65100;
	--primary-darker: #CC4700;
    --primary-light: rgba(255, 109, 0, 0.1);
    --primary-extra-light: rgba(255, 109, 0, 0.05);
    --secondary: #455A64;
    --light: #F8FAFC;
    --dark: #1E293B;
    --gray: #94A3B8;
    --white: #FFFFFF;
    --border: #E2E8F0;
    --text: #1E293B;
    --text-medium: #475569;
    --text-light: #64748B;
    --bg: #F8FAFC;
    --bg-secondary: #F1F5F9;
    --border-light: #E2E8F0;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --transition: all 0.2s ease;
    --max-width: 1250px;
	--padding-vertical: 0;
    --padding-horizontal: 20px;
	--color-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --color-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --color-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --color-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --color-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --color-red: linear-gradient(135deg, #f83600 0%, #f9d423 100%);
	/* Additional catchy colors */
    --color-teal: linear-gradient(135deg, #00cdac 0%, #8ddad5 100%);
    --color-indigo: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    --color-cyan: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    --color-lime: linear-gradient(135deg, #a3e635 0%, #65a30d 100%);
    --color-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --color-rose: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
    --color-violet: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    --color-emerald: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --color-sky: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    --color-fuchsia: linear-gradient(135deg, #d946ef 0%, #c026d3 100%);
	/* Bonus ultra-catchy colors */
    --color-gold: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --color-coral: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
    --color-mint: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    --color-lavender: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
    --color-sunset: linear-gradient(135deg, #f97316 0%, #eab308 100%);
    --color-ocean: linear-gradient(135deg, #0ea5e9 0%, #1d4ed8 100%);
	/* Add these for highlight boxes */
    --important-bg: #FEF3E2;
    --warning-bg: #FEF2F2;
    --success-bg: #F0F9F4;
}

.dark-mode {
    --primary: #FF8A65;
    --primary-dark: #FF7043;
	--primary-darker: #F05A2D; 
    --light: #37474F;
    --dark: #ECEFF1;
    --gray: #78909C;
    --white: #263238;
    --border: #455A64;
    --text: #ECEFF1;
    --text-medium: #CFD8DC;
    --text-light: #90A4AE;
    --bg: #263238;
    --bg-secondary: #1E272C;
    --border-light: #37474F;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.35);
	/* Dark mode highlight boxes */
    --important-bg: rgba(254, 243, 226, 0.1);
    --warning-bg: rgba(254, 242, 242, 0.1);
    --success-bg: rgba(240, 249, 244, 0.1);
}
        		
		
		
		
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-sans);
    transition: background-color 0.3s, color 0.3s;
}
html {
    scroll-behavior: smooth;
}

/* Prevent horizontal overflow that causes scroll bars */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
	position: relative;
    background-color: var(--white);
    color: var(--text);
    line-height: 1.6;
	padding-top: 64px; /* Match the header height */
    -webkit-font-smoothing: antialiased;
}
 
        /* Navigation Bar */
/* Fixed Navigation Bar */
.site-header,
header[role="banner"] {
    background-color: var(--white);
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
	height: 64px; /* Set explicit height */
    box-shadow: var(--shadow-sm);
}
        
        .container {
            width: 100%;
            max-width: var(--max-width);
            margin: 0 auto;
            padding: var(--padding-vertical) var(--padding-horizontal);
        }
        
        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        
        .nav-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        /* Hamburger Menu */
        .hamburger-menu {
            position: relative;
            display: inline-block;
            z-index: 1000;
            cursor: pointer;           
            color: var(--dark);
        }
        
		        /* 3. Arrow Lines */
        .icon-arrow {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .icon-arrow span {
            height: 2px;
            background: var(--dark);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .icon-arrow span:nth-child(1) {
            width: 20px;
        }
        
        .icon-arrow span:nth-child(2) {
            width: 25px;
        }
        
        .icon-arrow span:nth-child(3) {
            width: 20px;
        }
        
        .icon-arrow:hover span:nth-child(1) {
            transform: translateX(5px);
        }
        
        .icon-arrow:hover span:nth-child(2) {
            transform: translateX(2px);
        }
        
        .icon-arrow:hover span:nth-child(3) {
            transform: translateX(5px);
        }
		
		
		
        .dropdown-content {
            position: fixed;
            top: 0;
            left: -100%;
            width: 300px;
            height: 100vh;
            background-color: var(--white);
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            z-index: 1002;
        }
        
        .dropdown-content.show {
            left: 0;
        }
        
        .dropdown-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            pointer-events: none;
            backdrop-filter: blur(2px);
        }
        
        .dropdown-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        
        .dropdown-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: var(--primary);
            color: var(--white);
            font-weight: 600;
            font-size: 1.2rem;
        }
        
        .close-dropdown {
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.0rem;
            cursor: pointer;
            padding: 5px;
            transition: transform 0.3s;
        }
        
        .close-dropdown:hover {
            transform: rotate(90deg);
        }
        
        .dropdown-links {
            padding: 20px 0;
        }
        
        .dropdown-links a {
            display: flex;
            align-items: center;
            padding: 15px 25px;
            color: var(--dark);
            text-decoration: none;
            transition: all 0.2s;
			font-size: 1.2em;
            font-weight: 500;
        }
        
		.dropdown-links a .svg-icon {
      width: 24px;
    height: 24px;
    margin-right: 15px;
    color: var(--primary);
    transition: color 0.3s ease;
      }

     .dropdown-links a:hover {
          background-color: var(--primary-extra-light);
          color: var(--primary);
          padding-left: 30px;
      }
		
        
        .dropdown-footer {
            display: flex;
            align-items: center;
            padding: 20px;
            border-top: 1px solid var(--border);
            margin-top: auto;
        }
        
        .dropdown-footer .dark-mode-toggle {
            margin-right: 15px;
        }
        
        .dropdown-footer span {
            font-size: 0.9rem;
            color: var(--text-medium);
        }
		
		/* SVG Icon Styles for Header */
.hamburger-menu .svg-icon,
.logo .svg-icon,
.nav-right .svg-icon {
    width: 22px;
    height: 22px;
    transition: color 0.3s ease;
}
		
    .logo .svg-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
	display: flex;
    margin-right: 8px;
}
        /* Logo */
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        

        
        /* Center Navigation Links - UPDATED */
/* Center Navigation Links - Improved */
.center-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.center-nav ul {
    display: flex;
    align-items: center;
    gap: 32px; /* Increased gap for better spacing */
    margin: 0;
    padding: 0;
    list-style: none;
}

.center-nav a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500; /* Increased from 500 */
    font-size: 1.02rem; /* Slightly larger */
    letter-spacing: 0.10px; /* Added for elegance */
    transition: all 0.3s ease; /* Smooth transition for all properties */
    white-space: nowrap;
    padding: 8px 0; /* Increased vertical padding */
    position: relative;
}

.center-nav a:hover {
    color: var(--primary);
}

/* Underline effect on hover */
.center-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

.center-nav a:hover::after {
    width: 100%;
}

/* Active state for current page */
.center-nav a.active {
    color: var(--primary);
    font-weight: 700;
}

.center-nav a.active::after {
    width: 100%;
}
        
        /* Right Navigation */
        .nav-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        /* Search Icon */
        .search-icon {
            font-size: 1.25rem;
            cursor: pointer;
            color: var(--text);
            transition: color 0.3s;
        }
        
        .search-icon:hover {
            color: var(--primary);
        }
        
        /* Dark Mode Toggle - FIXED */
        .dark-mode-toggle {
            width: 50px;
            height: 26px;
            background-color: var(--light);
            border-radius: 30px;
            position: relative;
            cursor: pointer;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
        }
        
        .dark-mode-toggle::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--primary);
            top: 3px;
            left: 3px;
            transition: transform 0.3s;
        }
        
        .dark-mode .dark-mode-toggle::before {
            transform: translateX(24px);
        }
        
		 /* Hero Section */
        .hero-container {
            position: relative;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: var(--white);            
        }
		
        /* Hero Section */
        .hero {
            padding: 70px 0 40px;
            position: relative;
            overflow: hidden;
            text-align: center;
        }
                       
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .hero h1 {
            font-size: clamp(29px, 5vw, 48px); /* one line! */
            margin-bottom: 1.5rem;
            color: var(--white);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.5px;
        }
        
        .hero p {
            font-size: 1.25rem;
            color: rgba(255,255,255,0.9);
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .hero-cta {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 40px;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 28px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: none;
            cursor: pointer;
            gap: 8px;
            position: relative;
            overflow: hidden;
        }
        
.btn-primary {
    background: var(--white);
    color: var(--primary-dark);
}

.btn-primary:hover {
    background: var(--light);
	color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

.btn-outline:hover {
    background: var(--white);
    color: var(--primary-dark);
}
        
        /* Tools Section */
        .tools-section {
            padding: 60px 0 80px 0;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }
        
        .section-header h2 {
            font-size: 1.8rem;
            color: var(--text);
        }
        
        .section-header a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
.tool-wrapper {
	background-color: var(--bg);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
	overflow: hidden; /* Works in all browsers including IE */
	display: flow-root; /* Modern browsers will use this if supported */
}
        
/* Enhanced Tool Card Styles - Matching Feature Card */
.tool-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.9rem 1.5rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

/* Add the same hover overlay effect as feature cards */
.tool-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, var(--primary-extra-light) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.tool-card:hover::before {
    opacity: 1;
}

/* Enhanced Tool Icon */
.tool-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.tool-icon .svg-icon {
    width: 35px;
    height: 35px;
    color: var(--primary);
    transition: all 0.3s ease;
}

.tool-card:hover .tool-icon {
    background: var(--primary);
    transform: scale(1.1);
}

.tool-card:hover .tool-icon .svg-icon {
    color: white;
}

/* Enhanced Typography */
.tool-card h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
  width: 100%;
}

.tool-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Enhanced Tool Tags */
.tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center;
}

.tool-tag {
    background: var(--primary-extra-light);
    color: var(--primary-dark);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--transition);
    border: 1px solid var(--primary-light);
}



/* Tool Card Link */
.tool-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* Ensure all interactive elements work */
.tool-card-link:hover h3 {
    color: var(--primary-dark);
}

.view-all-tools-cta {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 2rem;

}

.view-all-tools-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* btn-explore styles using your primary orange colors */
.btn-explore {
    background: transparent;
    color: var(--primary-dark);
    border: 2px solid var(--primary-dark);
}
.btn-explore:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}
.text-link {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 500;
    transition: var(--transition);
}

.text-link:hover {
    color: var(--primary-dark);
}
.view-all-tools-cta .svg-icon {
    width: 24px;
    height: 24px;
}

.hero-cta .svg-icon {
    width: 24px;
    height: 24px;
}

        /* Footer */
        footer {
            background-color: var(--dark);
            color: var(--white);
            padding: 60px 0 25px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 30px;
        }
        
        .footer-about {
            max-width: 300px;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 22px;
            font-weight: 700;
            color: var(--white);
        }
        
		.footer-logo .svg-icon {
            width: 28px;
            height: 28px;
            color: var(--primary);
			margin-right: 8px;
        }
		
        
        .footer-about p {
            color: var(--gray);
            margin-bottom: 25px;
            font-size: 15px;
        }
        
        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 25px;
            color: var(--white);
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 2px;
            background-color: var(--primary);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: var(--gray);
            text-decoration: none;
            transition: color 0.3s;
            font-size: 15px;
        }
        
        .footer-links a:hover {
            color: var(--white);
        }
        
.copyright {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light mode - subtle white */
    color: var(--gray);
    font-size: 14px;
}

.dark-mode .copyright {
    border-top-color: #D6DFE6; /* Dark mode (solid color) */
} 

.footer-social {
    margin-top: 1.5rem;
}

.footer-social h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.social-links {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-links a {
    color: inherit;
    font-size: 1.5rem;
    transition: color 0.2s ease;
}

.social-links a:hover {
    color: var(--primary);
}
  
.social-links .svg-icon {
    width: 26px;
    height: 26px;
    color: inherit;
}
  
/* Footer Responsive Styles */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 30px;
    }
}

@media (max-width: 768px) {
    footer {
        padding: 40px 0 20px;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* Force 2 equal columns */
        gap: 30px 20px;
        justify-items: center; /* Center grid items horizontally */
    }
    
    .footer-about {
        grid-column: 1 / -1;
        max-width: 100%;
        text-align: center;
    }
    
    .footer-column {
        text-align: center; /* Center content inside each column */
        width: 100%; /* Ensure columns take full available width */
    }
    
    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-logo {
        justify-content: center;
    }
    
    .footer-social {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 30px 0 15px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 25px;
        justify-items: center; /* Center the single column */
    }
    
    .footer-column {
        text-align: center;
        max-width: 280px; /* Optional: limit width for better readability */
    }
    
    .footer-links {
        padding: 0;
    }
    
    .social-links {
        gap: 0.8rem;
    }
    
    .social-links .svg-icon {
        width: 24px;
        height: 24px;
    }
    
    .copyright {
        padding-top: 20px;
        font-size: 13px;
    }
}

/* Handle odd number of columns gracefully */
@media (max-width: 768px) {
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Equal columns */
        justify-content: center;
    }
    
    /* If there's an odd number of .footer-column items, center them */
    .footer-column:nth-last-child(2):first-child,
    .footer-column:nth-last-child(2):first-child ~ .footer-column {
        grid-column: 1 / -1;
        text-align: center;
        max-width: 200px; /* Limit width for single centered column */
        margin: 0 auto;
    }
	.cookie-settings-link {
		text-align: center !important;
	}
}

/* Small mobile optimizations */
@media (max-width: 360px) {
    .footer-grid {
        gap: 20px;
    }
    
    .footer-column {
        max-width: 250px; /* Slightly narrower for very small screens */
    }
    
    .footer-column h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .footer-links a {
        font-size: 14px;
    }
    
    .footer-about p {
        font-size: 14px;
    }
}
  
  
  
        /* Responsive Adjustments */
        @media (max-width: 1200px) {
			.tools-section {
                padding: 40px 20px;
           }
            .center-nav {
                gap: 20px;
            }
        }
        
        @media (max-width: 992px) {
		   .tools-section {
                padding: 40px 20px;
           }            
            .hero p {
                font-size: 1.1rem;
            }
            
            .center-nav {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 0 15px;
            }
            .tools-section {
                padding: 60px 20px;
           }

            .hero {
                padding: 50px 15px 20px;
            }            
            .hero p {
                font-size: 1rem;
            }
            
            .hero-cta {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 250px;
            }
          
            
            .contact-btn span {
                display: none;
            }
        }
        
        @media (max-width: 480px) {
                      
            .dropdown-content {
                width: 280px;
            }
            
            .logo span {
                font-size: 1.25rem;
            }
        }
		

	
/* SV Dividers */
.divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.divider-wave--primary .divider-svg {
    fill: var(--bg);
}
.divider-wave--white .divider-svg {
    fill: var(--white);
}
/* Responsive adjustments 

.wave {
transform: rotate(180deg);
}
.wave path {
    fill: var(--bg);	
}
Responsive adjustments */


/* Responsive adjustments */
@media (max-width: 768px) {
    .divider svg {
        height: 40px;
    }
    
}

@media (max-width: 480px) {
    .divider svg {
        height: 30px;
    }
   
}









/* ====================== */
/* SECTION COMMON STYLES */
/* ====================== */
.info-section {
    padding: 80px 0;
    position: relative;
}

.section-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding-vertical) var(--padding-horizontal);
    position: relative;
    z-index: 2;
}

.section-title-container {
    text-align: center;
    margin-bottom: 60px;
}

.section-title-container h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--primary-dark);
    display: inherit !important;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.section-title-container h2 .svg-icon {
    width: 32px;
    height: 32px;
    color: var(--primary);
}


.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Background shapes for visual interest 
.info-section::before,
.info-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-light) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.15;
    z-index: 1;
}

.info-section::before {
    width: 400px;
    height: 400px;
    top: 0px;
    left: -100px;
}

.info-section::after {
    width: 300px;
    height: 300px;
    bottom: 0px;
    right: -50px;
}
*/
/* ==================== */
/* GENERAL SECTION RESPONSIVE IMPROVEMENTS */
/* ==================== */
@media (max-width: 768px) {
  .info-section {
    padding: 60px 15px;
  }
  .section-container {
  padding: var(--padding-vertical) 5px;

}
  .section-title-container h2 {
    font-size: 2rem;
  }
  
  .section-subtitle {
    font-size: 1.1rem;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .info-section {
    padding: 50px 10px;
  }
    .section-container {
  padding: var(--padding-vertical) 5px;

}
  .section-title-container h2 {
    font-size: 1.8rem;
  }
  
  .section-title-container h2 .svg-icon {
    width: 32px;
    height: 32px;
}
  
  
  .section-subtitle {
    font-size: 1rem;
  }
}





/* =================== */
/* PROCESS SECTION */
/* =================== */
.process-section-container {
    position: relative;
    background: var(--bg-secondary);

}
.process-section {
	border-top: 1px solid var(--border-light);
	border-bottom: 0px solid var(--border-light);
}

.process-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

.process-step {
    flex: 1;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.step-visual {
    position: relative;
    margin-bottom: 25px;
}

.step-visual .svg-icon {
    width: 110px;
    height: 110px;
    color: #4178d4;
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(65, 120, 212, 0.3);
}

.step-content h3 {
    font-size: 1.3rem;
    color: var(--text);
    margin-bottom: 15px;
}

.step-content p {
    color: var(--text-light);
    line-height: 1.6;
}

.step-connector {
    padding-top: 80px;
    min-width: 80px;
    display: flex;
    align-items: center;
}

.step-connector .svg-icon {
    width: 60px;
    height: 60px;
    color: #4178d4;
    opacity: 0.3;
}

@media (max-width: 1024px) {

  .process-steps {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .step-connector {
    display: none;
  }
  
  .process-step {
	display: block;
    max-width: 100%;
    padding: 0;
    flex-direction: row;
    text-align: left;
    gap: 25px;
	margin-bottom: 25px;
  }
  
  .step-visual {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
	
  .process-step {
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    left: 50%;
    transform: translateX(-50%);
  }
}


@media (max-width: 900px) {
  .process-steps {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .step-connector {
    display: none;
  }
  
  .process-step {
	display: block;
    max-width: 100%;
    padding: 0;
    flex-direction: row;
    text-align: left;
    gap: 25px;
  }
  
  .step-visual {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
	
  .process-step {
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .process-steps {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .step-connector {
    display: none;
  }
  
  .process-step {
   display: block;
    max-width: 100%;
    padding: 0;
    flex-direction: row;
    text-align: left;
    gap: 25px;
  }
  
  .step-visual {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
	
  .process-step {
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ==================== */
/* FEATURES SECTION */
/* ==================== */
.features-section-container {
     position: relative;
     background: var(--white);
}

.features-section {
    position: relative;
    overflow: hidden;
}

.features-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-light) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.05;
    top: -200px;
    left: -200px;
    z-index: 1;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

.feature-card {
    background: var(--white);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    border: 1px solid var(--border-light);
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary);
    font-size: 1.8rem;
    transition: all 0.3s ease;
}

.svg-icon {
  display: inline-block;
  vertical-align: -0.125em; /* Adjust vertical alignment if needed */
}

/* Fix for SVG icon in section titles */
.section-title-container h2 .svg-icon {
  width: 1em; /* Match font size */
  height: 1em; /* Match font size */
  vertical-align: -0.125em; /* Proper vertical alignment */
  margin-right: 0.5rem; /* Space between icon and text */
}

/* Ensure SVG icons match FontAwesome styling */
.feature-icon .svg-icon {
  width: 1.75rem; /* Match FontAwesome icon size */
  height: 1.75rem; /* Match FontAwesome icon size */
}

/* Specific fix for the star icon in the features section */
.features-section .svg-icon {
  width: 32px; /* Match the FontAwesome icon size */
  height: 32px; /* Match the FontAwesome icon size */
  display: inline-block;
  vertical-align: middle;
}


.feature-card:hover .feature-icon {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.feature-card h3 {
    margin: 0 0 15px;
    color: var(--text);
    font-size: 1.2rem;
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
    margin: 0 auto;
  }
}


    /* Use Cases Section */
    .use-cases-section-container {
      position: relative;
      background: var(--bg);
    }
    
    .use-cases-section {  
      position: relative;
      overflow: hidden;
    }

    .use-cases-section::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, var(--primary-light) 0%, rgba(255,255,255,0) 70%);
      top: 0px;
      right: -300px;
      opacity: 0.3;
    }

    .use-cases-section::after {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, var(--primary-light) 0%, rgba(255,255,255,0) 70%);
      bottom: 0px;
      left: -200px;
      opacity: 0.2;
    }

    .use-cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .use-case-card {
      background: var(--white);
      border-radius: 12px;
      padding: 40px 30px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      z-index: 1;
      border: 1px solid var(--border-light);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .use-case-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-md);
    }

    .icon-bg {
      width: 70px;
      height: 70px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 25px;
      font-size: 28px;
      color: white;
      position: relative;
    }

    .icon-bg .svg-icon {
      width: 32px;
      height: 32px;
    }


    .use-case-card h3 {
      font-size: 1.4rem;
      color: var(--text);
      margin-bottom: 15px;
      font-weight: 600;
    }

    .use-case-card p {
      color: var(--text-light);
      line-height: 1.6;
      margin: 0;
      font-size: 1.05rem;
    }

    .hover-effect {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(135deg, var(--primary-extra-light) 0%, rgba(255,255,255,0) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .use-case-card:hover .hover-effect {
      opacity: 1;
    }

    /* Privacy Section */
    .privacy-section {
      background-color: var(--bg-secondary);
    }

    .privacy-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .privacy-point {
      text-align: center;
    }

    .privacy-point .svg-icon {
      width: 48px;
      height: 48px;
      color: var(--primary);
      margin-bottom: 15px;
    }

    .privacy-point h3 {
      margin-bottom: 10px;
      color: var(--text);
    }

    .privacy-point p {
      color: var(--text-light);
      margin: 0;
    }




/* ==================== */
/* ABOUT SECTION STYLES */
/* ==================== */
.about-section-container {
    position: relative;
    background: var(--bg);
}
	
.about-section {
    position: relative;
    overflow: hidden;
}

.about-section::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-light) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.1;
    top: -100px;
    right: -100px;
    z-index: 1;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.about-text {
    flex: 1;
}

.about-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-card {
    background: var(--white);
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.about-card p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.about-card strong {
    color: var(--text);
    font-weight: 600;
}

.about-benefits {
    margin-top: 30px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}

.benefit-item .svg-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
    flex-shrink: 0;

}



.benefit-item span {
    color: var(--text);
    line-height: 1.6;
}

.qr-visual-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-visual-container .svg-icon {
    width: 250px;
    height: 250px;
    color: var(--primary-light);
    z-index: 2;
}


.qr-scan-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px dashed var(--primary);
    border-radius: 16px;
    animation: scan 4s infinite linear;
    opacity: 0.3;
}

@keyframes scan {
    0% { transform: scale(0.9); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
    100% { transform: scale(0.9); opacity: 0.3; }
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .about-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .about-visual {
        order: -1;
        margin-bottom: 20px;
    }
    
    .qr-visual-container {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 768px) {
    .about-card {
        padding: 30px;
    }
    
    .qr-visual-container {
        width: 200px;
        height: 200px;
    }
    
    .qr-visual-container i {
        font-size: 8rem;
    }
}

@media (max-width: 480px) {
    .about-card {
        padding: 25px 20px;
    }
    
    .about-card p {
        font-size: 1rem;
    }
    
    .benefit-item {
        margin-bottom: 12px;
    }
    
    .qr-visual-container {
        width: 180px;
        height: 180px;
    }
    
    .qr-visual-container i {
        font-size: 6rem;
    }
}






    /* FAQ Section */
	.faq-section-container {
      position: relative;
      background-color: var(--bg-secondary);
    }
    .faq-section {
      
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      max-width: 800px;
      margin: 0 auto;
    }

    .faq-card {
      background: var(--white);
      border-radius: 16px;
      padding: 0;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
      border: 1px solid var(--border-light);
    }

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

    .faq-header {
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      cursor: pointer;
      background: linear-gradient(135deg, var(--primary-extra-light) 0%, rgba(255,255,255,0) 100%);
    }

    .faq-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--primary-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .faq-icon .svg-icon {
      width: 20px;
      height: 20px;
      color: var(--primary);
    }

    .faq-header h3 {
      margin: 0;
      flex: 1;
      font-size: 1.1rem;
      color: var(--text);
    }

    .faq-header .chevron {
      width: 20px;
      height: 20px;
      color: var(--primary);
      transition: transform 0.3s ease;
    }

    .faq-card.active .chevron {
      transform: rotate(180deg);
    }

    .faq-content {
      padding: 0 20px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .faq-card.active .faq-content {
      padding: 20px 20px 25px;
      max-height: 500px;
    }

    .faq-content p {
      margin-top: 0;
      margin-bottom: 15px;
      color: var(--text-light);
    }

    .faq-content ul {
      padding-left: 0;
      list-style: none;
    }

    .faq-content li {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-light);
    }

    .faq-content li .svg-icon {
      width: 18px;
      height: 18px;
      color: var(--primary);
      flex-shrink: 0;
    }

    .faq-content .svg-icon {
      width: 18px;
      height: 18px;
      color: var(--primary);
      flex-shrink: 0;
    }

    .faq-content p .svg-icon {
      color: var(--primary);
      margin-right: 4px;
    }


/* Tips Section - Reusable for all tools */
.tips-section-container {
    position: relative;
    background: var(--bg);
}

/* Tips Grid - Reusable */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.tip-card {
    background: var(--white);
    border-radius: 12px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    border: 1px solid var(--border-light);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.tip-icon-bg {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 28px;
    color: white;
    position: relative;
}

.tip-icon-bg .svg-icon {
    width: 32px;
    height: 32px;
}

.tip-card h3 {
    font-size: 1.4rem;
    color: var(--text);
    margin-bottom: 15px;
    font-weight: 600;
}

.tip-card p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    font-size: 1.05rem;
}

.tip-hover-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, var(--primary-extra-light) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.tip-card:hover .tip-hover-effect {
    opacity: 1;
}

/* Reusable Color Classes for Tips */
.tip-color-1 .tip-icon-bg { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.tip-color-2 .tip-icon-bg { background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%); }
.tip-color-3 .tip-icon-bg { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); }
.tip-color-4 .tip-icon-bg { background: linear-gradient(135deg, #f83600 0%, #f9d423 100%); }
.tip-color-5 .tip-icon-bg { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.tip-color-6 .tip-icon-bg { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.tip-color-7 .tip-icon-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.tip-color-8 .tip-icon-bg { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }

/* Tips Footer - Reusable */
.tips-footer {
    background: var(--primary-extra-light);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-lg);
    padding: 25px;
    text-align: center;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
}



.tips-footer p {
    color: var(--text-medium);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

.tips-footer a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary);
	color: var(--white);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
	margin-top: 15px;
    padding: 14px 28px;
    border-radius: 50px;
    border: 2px solid var(--primary);
}

.tips-footer a:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tips-footer a .svg-icon {
    width: 18px;
    height: 18px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .tips-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .tips-section .section-container {
        padding: 60px 20px;
    }
    
    .tips-section .section-title-container h2 {
        font-size: 1.8rem;
        flex-direction: column;
        gap: 8px;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tip-card {
        padding: 30px 25px;
    }
    
    .tip-icon-bg {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    
    .tip-icon-bg .svg-icon {
        width: 28px;
        height: 28px;
    }
    
    .tip-card h3 {
        font-size: 1.3rem;
    }
    
    .tips-footer {
        padding: 30px 25px;
        margin-top: 40px;
    }
    
    .tips-footer p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .tips-section .section-container {
        padding: 50px 15px;
    }
    
    .tips-section .section-title-container h2 {
        font-size: 1.6rem;
    }
    
    .tips-section .section-subtitle {
        font-size: 1.1rem;
    }
    
    .tip-card {
        padding: 25px 20px;
    }
    
    .tips-footer {
        padding: 25px 20px;
    }
}

/* Dark Mode Support */
.dark-mode .tips-section {
    background: var(--bg);
}

.dark-mode .tip-card {
    background: var(--white);
    border-color: var(--border);
}

.dark-mode .tips-footer {
    background: var(--white);
    border-color: var(--border);
}

.dark-mode .tip-card h3 {
    color: var(--text);
}

.dark-mode .tip-card p {
    color: var(--text-light);
}

.dark-mode .tips-footer p {
    color: var(--text);
}





/* Related Tools Section */
.related-tools-container {
    position: relative;
    background-color: var(--primary-light);
}
.related-tools {    
    padding: 80px 0;
    position: relative;
}

.related-tools .section-container {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.related-tools .section-title-container {
    text-align: center;
    margin-bottom: 60px;
}

.related-tools .section-title-container h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.related-tools .section-title-container h2 i {
    color: var(--primary);
    font-size: 2.2rem;
}

.related-tools .section-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Related Tools Grid */
.related-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.related-tool-card {
    background: var(--white);
    border-radius: 16px;
    padding: 35px 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* Professional Gradient Overlay Effect */
.related-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(65, 120, 212, 0.03) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.related-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.related-tool-card:hover::before {
    opacity: 1;
}

/* Subtle border highlight on hover */
.related-tool-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 17px;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--primary-light), var(--primary)) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.related-tool-card:hover::after {
    opacity: 1;
}

.related-tool-card .svg-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--primary);
    transition: all 0.3s ease;
    background: var(--primary-extra-light);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 15px; /* Add padding for better visual balance */
}

.related-tool-card:hover .svg-icon {
    transform: scale(1.1);
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 5px 15px rgba(65, 120, 212, 0.3);
}

.related-tool-card h3 {
    font-size: 1.4rem;
    margin: 0 0 15px;
    color: var(--text);
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.related-tool-card p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    font-size: 1.05rem;
    position: relative;
    z-index: 2;
}

/* Individual icon colors */
.related-tool-card:nth-child(1) .svg-icon { 
    color: #E91E63; 
    background-color: rgba(233, 30, 99, 0.1); 
}
.related-tool-card:nth-child(2) .svg-icon { 
    color: #2196F3; 
    background-color: rgba(33, 150, 243, 0.1); 
}
.related-tool-card:nth-child(3) .svg-icon { 
    color: #4CAF50; 
    background-color: rgba(76, 175, 80, 0.1); 
}
.related-tool-card:nth-child(4) .svg-icon { 
    color: #FF9800; 
    background-color: rgba(255, 152, 0, 0.1); 
}

.related-tool-card:nth-child(1):hover .svg-icon { 
    background: linear-gradient(135deg, #E91E63, #AD1457); 
}
.related-tool-card:nth-child(2):hover .svg-icon { 
    background: linear-gradient(135deg, #2196F3, #1565C0); 
}
.related-tool-card:nth-child(3):hover .svg-icon { 
    background: linear-gradient(135deg, #4CAF50, #2E7D32); 
}
.related-tool-card:nth-child(4):hover .svg-icon { 
    background: linear-gradient(135deg, #FF9800, #EF6C00); 
}

/* Ensure SVG icons are properly sized within their containers */
.related-tool-card .svg-icon svg {
    width: 30px;
    height: 30px;
}


/* Responsive Design */
@media (max-width: 768px) {
    .related-tools {
        padding: 60px 15px;
    }
    
    .related-tools .section-title-container h2 {
        font-size: 2rem;
    }
    
    .related-tools .section-subtitle {
        font-size: 1.1rem;
    }
    
    .related-tools-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
        margin: 0 auto;
        margin-top: 30px;
    }
    
    .related-tool-card {
        padding: 25px 20px;
    }
    
    
    .related-tool-card h3 {
        font-size: 1.2rem;
    }
    
    .related-tool-card p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .related-tools {
        padding: 50px 10px;
    }
    
    .related-tools .section-title-container h2 {
        font-size: 1.8rem;
    }
        
    .related-tools .section-subtitle {
        font-size: 1rem;
    }
    
    .related-tool-card {
        padding: 20px 15px;
    }
        
    .related-tool-card h3 {
        font-size: 1.1rem;
    }
    
    .related-tool-card p {
        font-size: 0.95rem;
    }
}



/* SVG Section Dividers */
.section-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.divider-svg {
    fill: currentColor; /* Inherit color from parent */
}

.divider-wave--bg-secondary .divider-svg {
    fill: var(--bg-secondary);
}

.divider-wave--white .divider-svg {
    fill: var(--white);
}


.divider-wave--bg .divider-svg {
    fill: var(--bg);
	
}
    
.wave--primary-extra-light .divider-svg {
    fill: var(--bg-secondary);
}

.divider-wave .divider-svg {
    fill: var(--bg);
}
	
.divider-wave--primary-light .divider-svg {
    fill: var(--primary-light);
}
	
.wave .divider-svg {
    fill: var(--bg-secondary);
}

.wave--bg-secondary .divider-svg {
    fill: var(--bg-secondary);
}

.wave--bg .divider-svg {
    fill: var(--bg);
}

.divider-wave--primary-light .divider-svg {
    fill: var(--primary-light);
}
.flip-top-to-bottom {
    transform: rotateX(180deg);
}
	
/* Responsive adjustments */
@media (max-width: 768px) {
    .section-divider svg {
        height: 40px;
    }
    
    .features-divider,
    .use-cases-divider,
    .about-divider,
    .faq-divider {
        height: 50px;
    }
}

@media (max-width: 480px) {
    .section-divider svg {
        height: 30px;
    }
    
    .features-divider,
    .use-cases-divider,
    .about-divider,
    .faq-divider {
        height: 40px;
    }
}	

/* Individual Card Colors */
.wifi .icon-bg { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.events .icon-bg { background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%); }
.business .icon-bg { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); }
.coupons .icon-bg { background: linear-gradient(135deg, #f83600 0%, #f9d423 100%); }
.products .icon-bg { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.restaurant .icon-bg { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

/* Additional Use Case Card Colors */
.designers .icon-bg { background: linear-gradient(135deg, #00cdac 0%, #8ddad5 100%);}
.legal .icon-bg { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.realestate .icon-bg { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.healthcare .icon-bg { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

/* Additional Use Case Card Colors for Word Counter */
.writers .icon-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.students .icon-bg { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.content .icon-bg { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.translators .icon-bg { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.researchers .icon-bg { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }

/* Simple utility classes */
.bg-purple { background: var(--color-purple); }
.bg-pink { background: var(--color-pink); }
.bg-blue { background: var(--color-blue); }
.bg-green { background: var(--color-green); }
.bg-orange { background: var(--color-orange); }
.bg-red { background: var(--color-red); }
/* Additional color classes */
.bg-teal { background: var(--color-teal); }
.bg-indigo { background: var(--color-indigo); }
.bg-cyan { background: var(--color-cyan); }
.bg-lime { background: var(--color-lime); }
.bg-amber { background: var(--color-amber); }
.bg-rose { background: var(--color-rose); }
.bg-violet { background: var(--color-violet); }
.bg-emerald { background: var(--color-emerald); }
.bg-sky { background: var(--color-sky); }
.bg-fuchsia { background: var(--color-fuchsia); }
/* Bonus ultra-catchy colors */
.bg-gold { background: var(--color-gold); }
.bg-coral { background: var(--color-coral); }
.bg-mint { background: var(--color-mint); }
.bg-lavender { background: var(--color-lavender); }
.bg-sunset { background: var(--color-sunset); }
.bg-ocean { background: var(--color-ocean); }


/* Back to Top Button Styles */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
}

.back-to-top.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.back-to-top:active {
    transform: translateY(0);
}

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

/* Responsive design */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

.back-to-top:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}


/* Back to Top Button Styles */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    /* Prevent button from causing overflow */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.back-to-top.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.back-to-top:active {
    transform: translateY(0);
}

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

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 80px; /* Higher up to avoid mobile browser UI */
        right: 15px;
        width: 44px;
        height: 44px;
        /* Safe area insets for modern mobile browsers */
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        right: max(15px, env(safe-area-inset-right, 15px));
    }
    
    .back-to-top .svg-icon {
        width: 18px;
        height: 18px;
    }
	.tool-container {
        margin: 40px auto !important;
        padding: var(--padding-vertical) 10px;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
    .back-to-top {
        bottom: 70px; /* Even higher for very small screens */
        right: 12px;
        width: 42px;
        height: 42px;
    }
}

.tool-container {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin: 60px auto;
  margin-bottom: 50px !important;
  padding: var(--padding-vertical) var(--padding-horizontal);
}	
.tool-header {
	position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.tool-header h1 {
  font-size: 2.4rem;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.tool-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
	font-weight: 400;
}

/* Tablet */
@media (max-width: 1024px) {
    .tool-header h1 {
        font-size: 2.1rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
	.tool-header {
        margin-bottom: 30px;
}
    .tool-header h1 {
        font-size: 1.8rem;
    }
    
    .tool-subtitle {
        font-size: 1.1rem;
    }
}




.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.svg-logo {
    width: 120px; /* Adjust to your logo size */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

/* Optional: Add hover effects */
.logo:hover .svg-logo {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* If you need different sizes for different breakpoints */
@media (max-width: 768px) {
    .svg-logo {
        width: 120px;
    }
}

@media (max-width: 480px) {
    .svg-logo {
        width: 120px;
    }
}




.main-header h2 {
    font-size: 1.9rem;
    margin-bottom: 15px;
    color: var(--dark);
    display: inherit !important;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.main-header h2 .svg-icon {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

/* Dark Themed Coming Soon Card Styles */
.coming-soon-card {
    position: relative;
    background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 100%);
    border: 1px solid var(--border);
    color: var(--white);
}

.coming-soon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(69, 90, 100, 0.8) 100%);
    border-radius: 12px;
    z-index: 1;
}

.coming-soon-card > * {
    position: relative;
    z-index: 2;
}

.coming-soon-card .tool-icon {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.coming-soon-card .tool-icon .svg-icon {
    color: var(--white);
    filter: brightness(0.9);
}

.coming-soon-card h3 {
    color: #ffffff;
}

.coming-soon-card p {
    color: rgba(255, 255, 255, 0.8);
}

.coming-soon-card .tool-tag {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}


@keyframes pulse-glow {
    0% {
        box-shadow: 0 2px 8px rgba(255, 109, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 20px rgba(255, 109, 0, 0.6);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 2px 8px rgba(255, 109, 0, 0.4);
        transform: scale(1);
    }
}

/* Hourglass icon animation */
.coming-soon-card .tool-icon {
    animation: subtle-float 3s ease-in-out infinite;
}

@keyframes subtle-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Disable hover effects for coming soon cards */
.coming-soon-card:hover {
    transform: none;
    cursor: not-allowed;
}

.coming-soon-card:hover .tool-icon {
    transform: none;
    animation: subtle-float 3s ease-in-out infinite;
}

.coming-soon-card .tool-card-link {
    cursor: not-allowed;
    pointer-events: none;
}

/* Dark mode support */
.dark-mode .coming-soon-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--light) 100%);
    border: 1px solid var(--border-light);
}

.dark-mode .coming-soon-card::before {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(69, 90, 100, 0.6) 100%);
}


/* ==================== */
/* WHY CHOOSE US SECTION */
/* ==================== */
.why-choose-us-section-container {
    position: relative;
    background: var(--bg);
}

.why-choose-us-section {  
    position: relative;
    overflow: hidden;
}
/*
.why-choose-us-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary-light) 0%, rgba(255,255,255,0) 70%);
    top: 0px;
    right: -300px;
    opacity: 0.3;
}

.why-choose-us-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--primary-light) 0%, rgba(255,255,255,0) 70%);
    bottom: 0px;
    left: -200px;
    opacity: 0.2;
}
*/
.why-choose-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.why-choose-us-card {
    background: var(--white);
    border-radius: 12px;
    padding: 30px 30px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    border: 1px solid var(--border-light);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-choose-us-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.why-choose-us-card .icon-bg {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 28px;
    color: white;
    position: relative;
}

.why-choose-us-card .icon-bg .svg-icon {
    width: 32px;
    height: 32px;
}

.why-choose-us-card h3 {
    font-size: 1.4rem;
    color: var(--text);
    margin-bottom: 15px;
    font-weight: 600;
}

.why-choose-us-card p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    font-size: 1.05rem;
}

.why-choose-us-card .hover-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, var(--primary-extra-light) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.why-choose-us-card:hover .hover-effect {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .why-choose-us-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .why-choose-us-card {
        padding: 30px 25px;
    }
}

@media (max-width: 480px) {
    .why-choose-us-card {
        padding: 25px 20px;
    }
    
    .why-choose-us-card h3 {
        font-size: 1.2rem;
    }
}

/* Dark Mode Support */
.dark-mode .why-choose-us-section-container {
    background: var(--bg);
}

.dark-mode .why-choose-us-card {
    background: var(--white);
    border-color: var(--border);
}

.dark-mode .why-choose-us-card h3 {
    color: var(--text);
}

.dark-mode .why-choose-us-card p {
    color: var(--text-light);
}


/* Search Modal Styles */
.search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 41, 59, 0.9);
    z-index: 10000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: modalAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode .search-modal {
    background: rgba(15, 23, 42, 0.95);
}

.search-modal-content {
    background: var(--white);
    margin: 50px auto; /* 50px top and bottom margin */
    padding: 0;
    border-radius: var(--radius-lg);
    max-width: 700px;
    max-height: calc(100vh - 100px); /* Match the results container */
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    animation: contentSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.dark-mode .search-modal-content {
    background: var(--bg-secondary);
    border-color: var(--border);
}

.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg);
    flex-shrink: 0;
}

.dark-mode .search-header {
    border-bottom-color: var(--border);
    background: var(--bg);
}

.search-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-icon-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-icon-title .svg-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.search-icon-title h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    background: var(--color-indigo);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.search-shortcut-hint {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--primary-extra-light);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--primary);
}

.search-shortcut-hint kbd {
    padding: 0.125rem 0.375rem;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.dark-mode .search-shortcut-hint kbd {
    background: var(--bg);
    border-color: var(--border);
}

.close-search {
    background: var(--primary-extra-light);
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    color: var(--primary);
}

.close-search:hover {
    background: var(--primary-light);
    transform: scale(1.05);
}

/* Search Input */
.search-input-container {
    position: relative;
    padding: 1.5rem 2rem;
    flex-shrink: 0;
}

.search-input-icon {
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-light);
	z-index: 2;
    pointer-events: none;
    transition: var(--transition);
}

#searchInput {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    background: var(--white);
    color: var(--text);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

#searchInput:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    transform: translateY(-1px);
}

.dark-mode #searchInput {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

.search-loading {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-light);
    border-top: 2px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Search Suggestions */
.search-suggestions {
    padding: 0 2rem 1rem;
    flex-shrink: 0;
}

.suggestion-tags {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.suggestion-label {
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 500;
}

.suggestion-tag {
    padding: 0.375rem 0.75rem;
    background: var(--primary-extra-light);
    border: 1px solid var(--primary-light);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.suggestion-tag:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

/* Search Results - Dynamic Height */
.search-results-container {
    max-height: calc(100vh - 100px); /* 50px top + 50px bottom = 100px total margin */
    overflow-y: auto;
    flex: 1; /* Take available space */
}

/* More Prominent Scrollbar */
.search-results-container::-webkit-scrollbar {
    width: 10px; /* Even wider */
}

.search-results-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
    margin: 4px;
}

.search-results-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 6px;
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-results-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-darker) 100%);
    border: 1px solid var(--bg-secondary);
}

.dark-mode .search-results-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Add scrollbar to the entire modal if needed */
.search-modal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) var(--bg-secondary);
}

/* Ensure the modal itself doesn't cause page scrolling */
.search-modal {
    overflow: hidden;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
}

.dark-mode .search-results-header {
    background: var(--bg);
    border-bottom-color: var(--border);
}

.results-count {
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 500;
}

.results-filters {
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.search-results {
    padding: 1rem;
}

.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-light);
}

.search-result-item:hover {
    background: var(--primary-extra-light);
    border-color: var(--primary-light);
    transform: translateX(4px);
}

.search-result-item:last-child {
    margin-bottom: 0;
}
.search-modal-content .svg-icon{
	width: 20px;
    height: 20px;
}
.search-result-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--primary-extra-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.search-result-content {
    flex: 1;
}

.search-result-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.search-result-content p {
    margin: 0 0 0.5rem 0;
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.4;
}

.search-result-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-category {
    background: var(--primary);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.search-tags {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Search Footer */
.search-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg);
}

.dark-mode .search-footer {
    border-top-color: var(--border);
    background: var(--bg);
}

.search-tips {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.search-tips .svg-icon {
    width: 16px;
    height: 16px;
    color: var(--primary);
}

.search-tips kbd {
    padding: 0.125rem 0.375rem;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.dark-mode .search-tips kbd {
    background: var(--bg);
    border-color: var(--border);
}

/* No Results State */
.no-results {
    text-align: center;
    padding: 1rem 2rem;
    color: var(--text-light);
}

.no-results .svg-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-results p {
    margin: 0;
    font-size: 1rem;
}

/* Animations */
@keyframes modalAppear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes contentSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Scrollbar Styling */
.search-results-container::-webkit-scrollbar {
    width: 6px;
}

.search-results-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.search-results-container::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 3px;
}

.search-results-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .search-modal-content {
        margin: 0;
        border-radius: 0;
        height: 100%;
        max-width: none;
    }
    
    .search-header,
    .search-input-container,
    .search-suggestions,
    .search-results-header,
    .search-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .search-results {
        padding: 0.75rem;
    }
    

    
    .results-filters {
        flex-wrap: wrap;
    }
}

@media (max-width: 360px) {
    .search-title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

}

/* Simple mobile scroll solution */
@media (max-width: 768px) {
    .search-modal-content {
        overflow-y: auto; /* Let the entire modal scroll */
        -webkit-overflow-scrolling: touch;
    }
    
    .search-results-container {
        overflow-y: visible; /* Don't nest scroll containers */
        flex: none; /* Don't force height */
    }
    
    /* Prevent body scroll */
    body.search-modal-open {
        overflow: hidden;
    }
}

/* ===== MODERN COOKIE CONSENT BANNER ===== */
.cookie-consent-banner {
    position: fixed;
    bottom: 1rem;
    left: 2rem;
    right: 2rem;
    background: var(--white);
    padding: 1.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    z-index: 1000;
    display: none;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border);
    max-width: 900px;
    margin: 0 auto;
}

.cookie-consent-banner.active {
    display: block;
    transform: translateY(0);
    opacity: 1;
}

.consent-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: none;
}

.consent-text {
    flex: 1;
}

.cookie-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.cookie-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cookie-title-group {
    flex: 1;
}

.consent-text h4 {
    margin: 0 0 0.375rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.consent-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.4;
}

.consent-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.primary-action {
    background: var(--primary);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 0.9rem;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(255, 109, 0, 0.3);
}

.primary-action:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 109, 0, 0.4);
}

.secondary-action {
    background: transparent;
    color: var(--primary);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid var(--primary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.secondary-action:hover {
    background: rgba(255, 109, 0, 0.1);
    transform: translateY(-1px);
}

/* Cookie Notification */
.cookie-notification {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: #10b981;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-notification.show {
    transform: translateX(0);
}

.cookie-notification .svg-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Section Highlight */
.cookie-preferences:target {
    animation: highlight-section 2s ease;
}

@keyframes highlight-section {
    0% {
        background-color: rgba(255, 109, 0, 0.1);
        transform: scale(1.02);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

.cookie-preferences {
    scroll-margin-top: 100px; /* Space for fixed header + padding */
}

/* Smooth scrolling for the whole site */
html {
  scroll-behavior: smooth;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablets and smaller screens */
@media (max-width: 1024px) {
    .cookie-consent-banner {
        left: 1.5rem;
        right: 1.5rem;
        bottom: 1.5rem;
        padding: 1.25rem;
        border-radius: 16px;
    }
    
    .consent-content {
        gap: 1.5rem;
    }
}

/* Mobile Landscape and small tablets */
@media (max-width: 768px) {
    .cookie-consent-banner {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        padding: 1.25rem;
        border-radius: 14px;
    }
    
    .consent-content {
        flex-direction: column;
        text-align: left;
        gap: 1.25rem;
        align-items: stretch;
    }
    
    .cookie-header {
        gap: 0.75rem;
    }
    
    .consent-text h4 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    
    .consent-text p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .consent-actions {
        width: 100%;
        justify-content: center;
    }
    
    .primary-action,
    .secondary-action {
        flex: 1;
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
    
    .cookie-notification {
        left: 1rem;
        right: 1rem;
        top: 1rem;
        transform: translateY(-100%);
    }
    
    .cookie-notification.show {
        transform: translateY(0);
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    .cookie-consent-banner {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        padding: 1.125rem;
        border-radius: 12px;
    }
    
    .consent-content {
        gap: 1rem;
    }
    
    .cookie-header {
        gap: 0.5rem;
    }
    
    .cookie-icon {
        width: 18px;
        height: 18px;
    }
    
    .consent-text h4 {
        font-size: 0.95rem;
    }
    
    .consent-text p {
        font-size: 0.8rem;
    }
    
    .consent-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .primary-action,
    .secondary-action {
        width: 100%;
        padding: 0.75rem 1rem;
    }
}

/* Dark mode support */
.dark-mode .cookie-consent-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.dark-mode .consent-text h4 {
    color: var(--dark);
}

.dark-mode .consent-text p {
    color: var(--text-medium);
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .primary-action:hover,
    .secondary-action:hover {
        transform: none;
    }
    
    .primary-action:active,
    .secondary-action:active {
        transform: scale(0.98);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .cookie-consent-banner {
        transition: opacity 0.3s ease;
        transform: none;
    }
    
    .primary-action,
    .secondary-action {
        transition: none;
    }
    
    .cookie-preferences:target {
        animation: none;
    }
}

.cookie-settings-link {
    background: none;
    border: none;
    color: var(--gray);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

.cookie-settings-link:hover {
    color: var(--white);
    text-decoration: none;
}

/* If you want it to look exactly like the other footer links */
.footer-links .cookie-settings-link {
    display: block;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}
/* ===== CONTACT SECTION ===== */
.contact-section {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-top: 4rem;
}

.contact-section h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.contact-section p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: var(--text-medium);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.contact-email:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-email svg {
    width: 20px;
    height: 20px;
}

//* tools *//

.hero-container {
    position: relative;
    margin-bottom: 3rem;
}

.all-tools-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 4rem 0 3rem;
    position: relative;
    overflow: hidden;
}

.all-tools-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
}

.all-tools-hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.all-tools-hero h1 {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.all-tools-hero p {
    font-size: 1.25rem;
    opacity: 0.95;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

/* Keep all your existing search styles the same */
.all-tools-filter {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
	margin-bottom: 1.5rem;
}

.all-tools-search-container {
    position: relative;
    transition: var(--transition); /* Add transition to container */
}

#allToolsSearch {
    width: 100%;
    padding: 1.25rem 3rem 1.25rem 3rem;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    background: var(--white);
    color: var(--text);
    border: 2px solid transparent;
    font-family: inherit;
    line-height: normal;
    vertical-align: middle;
    /* Ensure consistent box sizing */
    box-sizing: border-box;
}

#allToolsSearch:focus {
    outline: none;
    box-shadow: 0 20px 50px rgba(255, 109, 0, 0.25);
    border-color: var(--primary);
    /* Remove transform from input */
    transform: none;
}

.all-tools-search-container:focus-within {
    transform: translateY(-3px); /* Move entire container instead */
}

#allToolsSearch::placeholder {
    color: var(--text-light);
    font-family: inherit;
    line-height: normal; /* Consistent line height for placeholder */
    vertical-align: middle; /* Consistent vertical alignment */
}

.all-tools-search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    pointer-events: none;
    /* Remove any transitions that might interfere */
    transition: none !important;
    /* Ensure consistent display */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px; /* Match SVG height */
    width: 20px; /* Match SVG width */
}

.all-tools-clear-search {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    /* Ensure consistent display */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px; /* Slightly larger for button */
    width: 24px;
}
.all-tools-clear-search:hover {
    background: var(--primary-extra-light);
    color: var(--primary);
}

.all-tools-clear-search.visible {
    opacity: 1;
    visibility: visible;
}

.all-tools-search-stats {
    text-align: center;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.all-tools-quick-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.all-tools-quick-action-btn {
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
    backdrop-filter: blur(10px);
}

.all-tools-quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Search Highlight */
.all-tools-highlight {
    background: linear-gradient(120deg, var(--primary-light) 0%, var(--primary-extra-light) 100%);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-weight: 600;
}
/* No Results Message */
.all-tools-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1rem 2rem 4rem;
    color: var(--text-light);
	margin-top: -80px;
}

.all-tools-no-results h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-medium);
}

.all-tools-no-results p {
    font-size: 1.1rem;
    opacity: 0.8;
}
/* Show All Button in No Results (solid color) */
.all-tools-show-all-btn {
    padding: 0.6rem 1.2rem;
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
    font-weight: 500;
}

.all-tools-show-all-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
    .all-tools-hero {
        padding: 3rem 0 2rem;
    }
    
    .all-tools-hero h1 {
        font-size: 2.25rem;
    }
    
    .all-tools-hero p {
        font-size: 1.1rem;
    }
    
    #allToolsSearch {
        padding: 1rem 3rem 1rem 3rem;
    }
    
    .all-tools-quick-actions {
        gap: 0.5rem;
    }
    
    .all-tools-quick-action-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}


/* ===== CONTACT SECTION ===== */
.contact-wrapper-section {
    position: relative;
    background-color: var(--primary-light);
}

.contact-container {
    padding: 3rem 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Remove .global and replace with: */
.support-promo {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    border-radius: 12px; 
    padding: 2rem 2rem;
    background: var(--white); /* Changed to white */
    box-shadow: var(--shadow-md); /* Added shadow for separation */
}

.support-promo .message-svg-icon{
    width: 60px;
	height: 60px;
	color: var(--primary);
	margin-bottom: .7rem;
}

.support-promo h3 {
    font-size: 1.75rem;
    margin-bottom: .7rem;
    color: var(--text);
}

.support-promo p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: var(--text-medium);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.support-promo .contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.support-promo .contact-email:hover {
	opacity: 0.9; 
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.support-promo .contact-email svg {
    width: 20px;
    height: 20px;
}


/* Category Filter Styles */
.all-tools-category-filter {
    position: relative;
    display: inline-block;
    margin-left: 12px;
    z-index: 1001; /* Ensure it's above other elements */
}

.all-tools-category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-medium);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    min-width: 160px; /* Slightly wider for better text */
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 1002;
}

.all-tools-category-btn:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.all-tools-category-btn.active {
    border-color: var(--primary);
    color: var(--primary);
}

.all-tools-category-btn svg {
    transition: transform 0.2s ease;
    width: 16px;
    height: 16px;
}

.all-tools-category-btn.active svg {
    transform: rotate(180deg);
}

.all-tools-category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1003; /* Higher than button */
    max-height: 400px; /* Increased height */
    overflow-y: auto;
    margin-top: 4px; /* Consistent distance from button */
    display: none;
    /* Ensure it's not constrained by parent containers */
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.all-tools-category-dropdown.show {
    display: block;
    animation: fadeInDropdown 0.2s ease;
}

@keyframes fadeInDropdown {
    from { 
        opacity: 0; 
        transform: translateY(-8px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.all-tools-category-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-medium);
    background: var(--white);
}

.all-tools-category-item:last-child {
    border-bottom: none;
}

.all-tools-category-item:hover {
    background: var(--primary-extra-light);
    color: var(--primary);
}

.all-tools-category-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.all-tools-category-count {
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.all-tools-category-item.active .all-tools-category-count {
    background: var(--primary);
    color: var(--white);
}

/* Update the search container to include category filter */
.all-tools-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative; /* Ensure proper stacking context */
    z-index: 1000;
}

.all-tools-search-container {
    flex: 1;
    min-width: 300px;
    position: relative;
}

/* Ensure parent containers don't clip the dropdown */
.all-tools-hero-content,
.container,
.tools-section {
    position: relative;
    overflow: visible !important;
}

/* Fix for any container that might be clipping */
main,
.hero-container,
section {
    overflow: visible !important;
}

/* ============================ */
/* RESPONSIVE BREAKPOINTS - FIXED DROPDOWN POSITION */
/* ============================ */

/* Tablet and small desktop (768px - 1024px) */
@media (max-width: 1024px) {
    .all-tools-filter {
        gap: 10px;
    }
    
    .all-tools-search-container {
        min-width: 250px;
    }
    
    .all-tools-category-btn {
        min-width: 150px;
        font-size: 13px;
        padding: 10px 14px;
    }
    
    /* Keep dropdown positioned normally */
    .all-tools-category-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px; /* Same distance as desktop */
    }
}

/* Mobile landscape and small tablets (576px - 768px) */
@media (max-width: 768px) {
    .all-tools-filter {
        flex-direction: row; /* Keep horizontal layout */
        align-items: center;
        gap: 8px;
    }
    
    .all-tools-search-container {
        min-width: 200px;
        flex: 1;
    }
    
    .all-tools-category-filter {
        margin-left: 0;
        flex-shrink: 0; /* Prevent shrinking */
    }
    
    .all-tools-category-btn {
        min-width: 140px;
        font-size: 13px;
        padding: 10px 12px;
        white-space: nowrap;
    }
    
    /* Keep dropdown positioned normally - no fixed positioning */
    .all-tools-category-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px; /* Same distance as desktop */
        max-height: 300px; /* Slightly smaller max-height for mobile */
    }
    
    .all-tools-category-item {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Small mobile devices (480px - 576px) */
@media (max-width: 576px) {
    .all-tools-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .all-tools-search-container {
        min-width: auto;
        width: 100%;
    }
    
    .all-tools-category-filter {
        width: 100%;
    }
    
    .all-tools-category-btn {
        width: 100%;
        min-width: auto;
        justify-content: space-between;
        font-size: 14px;
        padding: 12px 16px;
    }
    
    /* Keep dropdown positioned normally */
    .all-tools-category-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px; /* Same distance as desktop */
        max-height: 300px;
    }
    
    .all-tools-category-item {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Extra small mobile devices (below 480px) */
@media (max-width: 480px) {
    .all-tools-filter {
        gap: 6px;
    }
    
    /* Keep dropdown positioned normally */
    .all-tools-category-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px; /* Same distance as desktop */
        max-height: 280px;
    }
    
    .all-tools-category-item {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    /* Improve touch targets for mobile */
    .all-tools-category-btn,
    .all-tools-category-item {
        min-height: 44px; /* Minimum touch target size */
    }
}

/* Very small screens (below 360px) */
@media (max-width: 360px) {
    .all-tools-category-dropdown {
        max-height: 250px;
    }
    
    .all-tools-category-item {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .all-tools-category-count {
        font-size: 11px;
        padding: 2px 5px;
    }
}

/* Dark mode support */
.dark-mode .all-tools-category-btn {
    background: var(--white);
    border-color: var(--border);
    color: var(--text-medium);
}

.dark-mode .all-tools-category-dropdown {
    background: var(--white);
    border-color: var(--border);
}

.dark-mode .all-tools-category-item {
    background: var(--white);
    color: var(--text-medium);
    border-bottom-color: var(--border);
}

.dark-mode .all-tools-category-item:hover {
    background: var(--primary-extra-light);
    color: var(--primary);
}

.dark-mode .all-tools-category-item.active {
    background: var(--primary-light);
    color: var(--primary);
}

.dark-mode .all-tools-category-count {
    background: var(--bg-secondary);
    color: var(--text-light);
}

/* Handle dropdown positioning when near viewport edges */
.all-tools-category-dropdown {
    /* Ensure dropdown stays within viewport */
    max-width: 100vw;
    box-sizing: border-box;
}

/* Optional: Add upward opening when near bottom of viewport */
@media (max-width: 768px) {
    .all-tools-category-dropdown.upward {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: 4px;
    }
}

/* Visually hidden but accessible to screen readers and SEO */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}