/* Mobile Responsive */
@media (max-width: 768px) {
	
	nav {
		padding: var(--padding-lg) var(--padding-lg);
	}
	
	.logo {
		font-size: var(--font-size-heading-h3);
		gap: var(--gap-sm);
	}
	
	#hero {
		padding-top: 9rem; /* Stops content from getting masked by nav bar on mobile */
	}
	
	section {
		padding: var(--padding-xxxxxl) var(--padding-xl);
	}
	
	.hero-content h1 {
		font-size: var(--font-size-heading-h1);
	}

	.hero-content p {
		font-size: var(--font-size-body);
	}

	.nav-links {
		display: none;
	}

	.section-header h2 {
		font-size: var(--font-size-heading-h1);
	}

	.feature-category-heading {
	  text-align: center;
	}
	
	.features-grid {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        gap: var(--gap-xxl);
    }
	
	.feature-card {
		padding: var(--padding-xxxxl);
	}

	.pricing-grid {
		gap: 4rem;
	}

	.pricing-card.featured {
		transform: scale(1);
	}

	.contact-form-container {
		padding: var(--padding-xxxxl);
	}

	.footer-content {
		grid-template-columns: 1fr;
		gap: var(--gap-xxxxl);
	}
	
	.scroll-indicator-overlay {
        display: block; /* Show overlay on mobile */
        position: fixed; /* Keep it centered in the viewport */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Use a semi-transparent dark background */
        background: rgba(0, 0, 0, 0.2); 
        z-index: 998; /* Below nav and scroll indicator but above hero */
        pointer-events: none; /* Allows user to interact with elements underneath */
    }
	
	.scroll-indicator {
        position: fixed; /* Center in the viewport for drag indication */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: auto; /* Remove bottom positioning */
        /* Change animation from 'bounce' (scroll wheel) to 'drag' (touch) */
        animation: drag 2s infinite; 
    }
	
	.scroll-indicator span {
		background: white;
		border: 2px solid var(--grey);
	}

    .scroll-indicator span::before {
        /* Change animation from 'scroll' (scroll wheel) to 'drag-thumb' (touch) */
        animation: drag-thumb 2s infinite;
		background: var(--grey-gradient);
    }
	
	.mobile-number-input-field-group {
		display: flex;
		flex-wrap: wrap;
	}

	.country-code-dropdown {
		width: 100%;
		max-width: unset;
	}
}