/*
 Theme stylesheet — moved inline styles for the Home template
 NOTE: This file contains styles moved from `hom.php`'s inline block.
*/

/* Font Face Imports */
@font-face {
	font-family: "Jost";
	src: url('asset/images/Jost,Lato/Jost/static/Jost-400.ttf') format('truetype');
	font-weight: 400;
}
@font-face {
	font-family: "Jost";
	src: url('asset/images/Jost,Lato/Jost/static/Jost-500.ttf') format('truetype');
	font-weight: 500;
}

/* ========== BASE & UNIVERSAL STYLES ========== */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.75rem;
    --navy: 222.2 47.4% 11.2%;
    --navy-foreground: 210 40% 98%;
}

/* Fail-safe Background Hardening */
.bg-hardened {
    position: relative !important;
    background-color: #0f172a !important;
}
.bg-hardened img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}
.bg-hardened .overlay-hardened {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
}
.bg-hardened .content-hardened {
    position: relative !important;
    z-index: 20 !important;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
.container, section { width: 100%; }

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

/* Mobile First: Extra Small (320px to 480px) */
@media screen and (max-width: 480px) {
	/* Typography */
	h1, h2 { font-size: 22px !important; line-height: 1.3 !important; }
	h3 { font-size: 18px !important; line-height: 1.4 !important; }
	h4 { font-size: 16px !important; }
	h5 { font-size: 14px !important; }
	p { font-size: 13px !important; line-height: 1.6 !important; }
    
	/* Spacing & Padding */
	.section-padding { padding: 25px 12px !important; }
	.py-20 { padding-top: 30px !important; padding-bottom: 30px !important; }
	.py-52 { padding-top: 25px !important; padding-bottom: 25px !important; }
	.py-42 { padding-top: 25px !important; padding-bottom: 25px !important; }
	.py-5 { padding: 12px !important; }
	.mb-5 { margin-bottom: 15px !important; }
	.mb-8 { margin-bottom: 20px !important; }
	.mb-16 { margin-bottom: 25px !important; }
	.mb-4 { margin-bottom: 12px !important; }
	.gap-4 { gap: 8px !important; }
	.gap-5 { gap: 12px !important; }
	.gap-12 { gap: 12px !important; }
    
	/* Grid & Layout */
	.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
	.grid { display: flex !important; flex-direction: column !important; }
	.md\:grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
	.row { display: flex !important; flex-wrap: wrap !important; margin-right: -6px; margin-left: -6px; }
	.col-md-6, .col-md-4, .col-md-3, .col-lg-6, .col-lg-4 { width: 100% !important; padding: 6px !important; }
	.col-6 { width: 50% !important; }
	.col-lg-12 { width: 100% !important; flex-direction: column !important; }
}

/* Some core utilities and components */
.fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.image-hover { transition: transform 0.3s ease; }
.image-hover:hover { transform: scale(1.05); }
.scroll-circle-spinner { animation: spin 8s linear infinite; }

.section-padding { padding: 60px 0; }
.section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #999; margin-bottom: 10px; }
.section-heading { font-size: 46px; font-weight: 500; margin-bottom: 20px; font-family: "Jost", sans-serif; }

.btn { border-radius: 5px; font-weight: 600; transition: all 0.3s ease; }
.btn-primary { background-color: #667eea; border-color: #667eea; }
.btn-primary:hover { background-color: #764ba2; border-color: #764ba2; }

.service-card { padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.service-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 50%; margin-bottom: 15px; font-size: 28px; }

.gallery-item { position: relative; overflow: hidden; border-radius: 10px; }
.gallery-item img { width: 100%; height: auto; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.1); }

/* Layout constraint */
@media (min-width: 992px) {
	.container { max-width: 1280px; margin: 0 auto; }
}

/* Keyframes (kept simple here; original complex animations can be added if needed) */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

/* End of moved styles */

/*
  Constrain every section's content to a centered max width of 1280px
  - Sections retain full-bleed backgrounds while their inner content is capped.
  - Applies to common wrappers used in the template: direct `.container` children
	inside `section`, `.section-padding`, and utility class `.max-w-7xl`.
*/

section > .container,
section .container,
.section-padding > .container,
.section-padding .container,
.max-w-7xl,
.container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Keep some horizontal breathing room on very small screens */
@media (max-width: 767px) {
	section > .container,
	.section-padding > .container,
	.container {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}
}

/*
Theme Name: Noya Dalan
Theme URI: https://techxou.com
Author: Minhajul Islam 
Author URI: https://github.com/minhajul-galib
Description: A modern and lightweight WordPress theme designed for research and policy organizations, optimized for sustainable development, youth empowerment, environmental preservation, and knowledge dissemination. Built by Techxou for Noya Dalan Research Center with a clean layout, responsive design, and optimized performance. Motto: "From territorial views to global thoughts".
Version: 1.0.0
License: Proprietary
License URI: https://techxou.com/license
Text Domain: noya-research
Tags: education, news, portfolio, business, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, flexible-header, footer-widgets, full-width-template, theme-options, translation-ready, two-columns, left-sidebar, right-sidebar, wide-blocks

Copyright © 2026
Developed by Minhajul Islam Galib for Techxou (https://techxou.com).
All Rights Reserved. This theme is exclusively created for Noya Dalan Research Center.
Redistribution, resale, or modification outside this project is strictly prohibited without written permission from Techxou.
*/

/* Primary menu & dropdown styles (desktop) */
ul li a{
    text-decoration: none !important;
}

#primary-menu {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
}

#primary-menu > li {
	position: relative;
}

#primary-menu a {
	color: #ffffff;
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	display: inline-block;
	transition: color 150ms ease, background 150ms ease;
}

#primary-menu .menu-item-has-children > a::after {
	content: "▾";
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	color: rgba(255,255,255,0.85);
}

/* Dropdown panel */
#primary-menu .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0px);
  background: linear-gradient(180deg, #2b9af3, #1f86d9);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 200px;
  box-shadow: 0 10px 30px rgba(4, 21, 40, 0.35);
  display: none;
  z-index: 60;
}#primary-menu .sub-menu li {
	display: block;
}

#primary-menu .sub-menu a {
	color: #ffffff;
	padding: 10px 14px;
	display: block;
	border-radius: 8px;
}

#primary-menu .sub-menu a:hover {
	background: rgba(255,255,255,0.06);
}

/* show dropdown on hover (desktop) */
#primary-menu li:hover > .sub-menu {
	display: block;
}

/* Tweak for deeply nested sub-menus (if present) */
#primary-menu .sub-menu .sub-menu {
	left: 100%;
	top: 0;
}

/* Ensure mobile menu uses default stacking (keeps Tailwind utility classes working) */
@media (max-width: 767px) {
	#primary-menu {
		flex-direction: column;
		gap: 0.5rem;
	}
	#primary-menu .sub-menu {
		position: static;
		background: transparent;
		box-shadow: none;
		padding-left: 1rem;
	}
	#primary-menu .sub-menu a { padding: 8px 0; }
}

/* Small helper to match screenshot spacing on header */
.site-header-spacer { height: 4rem; }

/* Menu font styles */
#mobile-primary-menu li {
	list-style: none;
}

/* contact  */
.wpcf7 label{

	width: 100%;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-bottom: 20px;
}

.wpcf7-submit {
    background: #2563eb;
    color: #fff;
    padding: 12px 30px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.wpcf7-submit:hover {
    background: #1d4ed8;
}



/* Sliding overlay for service cards: slides color from bottom to top on hover */
.service-card-wrap {
	position: relative;
	overflow: hidden;
}

.service-card-wrap img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2; /* raise image above the background overlay */
}

.service-card-wrap .service-card {
	position: relative;
	z-index: 3; /* keep text above overlay */
}

.service-card-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	background: #3797E4;
	transform: translateY(100%);
	transition: transform .45s cubic-bezier(.2,.9,.3,1);
	z-index: 1; /* put overlay below the service image but above the background */
	opacity: 0.95;
	pointer-events: none;
}

.service-card-wrap:hover::after,
.service-card-wrap:focus-within::after {
	transform: translateY(0);
}
.service-icon{
	background-color: #2f7eff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    box-shadow: 0px 1px 3px #42424285;
	margin-bottom: 15px;
}
.service-card-wrap:hover .service-card h5,
.service-card-wrap:hover .service-card p,
.service-card-wrap:hover .service-icon,
.service-card-wrap:focus-within .service-card h5,
.service-card-wrap:focus-within .service-card p,
.service-card-wrap:focus-within .service-icon {
	color: #fff;
	
}

/* Optional subtle image scale on hover */
.service-card-wrap:hover img {
	transform: scale(1.02);
	transition: transform .45s ease;
}

/* Reflecting overlay effect for images (image-anime) - Center to diagonal corners shutter style */
figure.image-anime {
	position: relative;
	display: block;
	overflow: hidden;
}

figure.image-anime img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .45s ease;
	z-index: 1; /* lowered so overlays (::before/::after) can appear above image */
	position: relative;
}

figure.image-anime::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 280%;
	height: 280%;
	background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, transparent 50%);
	transform: translate(-50%, -50%) scale(0);
	z-index: 6; /* ensure overlay sits above the image */
	transition: transform .35s cubic-bezier(.34,.1,.64,.1);
	pointer-events: none;
}

figure.image-anime::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 280%;
	height: 280%;
	background: linear-gradient(315deg, rgba(255,255,255,0.9) 0%, transparent 50%);
	transform: translate(-50%, -50%) scale(0);
	z-index: 6; /* ensure overlay sits above the image */
	transition: transform .35s cubic-bezier(.34,.1,.64,.1);
	pointer-events: none;
}

figure.image-anime:hover::before,
figure.image-anime:focus::before,
figure.image-anime:focus-within::before,
figure.image-anime:hover::after,
figure.image-anime:focus::after,
figure.image-anime:focus-within::after {
	transform: translate(-50%, -50%) scale(1);
}

figure.image-anime:hover img,
figure.image-anime:focus img {
	transform: scale(1.03) translateY(-4px);
}

/* keyboard focus visible outline for accessibility */
figure.image-anime:focus {
	outline: 3px solid rgba(55,151,228,0.35);
	outline-offset: 4px;
}



/* Avoid using ::before/::after on <img> (replaced elements).
   Use the wrapper `figure.image-anime` pseudo-elements instead.
   Ensure images that should participate are positioned and display:block. */

img.image-anime,
.image-anime img {
	position: relative;
	display: block;
}

/* Services Section Responsive Styles */
.services-title {
	font-size: 42px;
}

.services-description {
	margin-top: 0;
}

.service-card {
	padding: 25px 20px;
}

.service-card-title {
	font-size: 22px;
}

.service-image-wrapper {
	flex-shrink: 0;
}

/* Tablet Styles (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	.services-title {
		font-size: 36px;
	}
	
	.service-card {
		padding: 20px 18px;
	}
	
	.service-card-title {
		font-size: 20px;
	}
	
	.services-gallery {
		row-gap: 1.5rem !important;
	}
}

/* Mobile Styles (max-width: 767px) */
@media (max-width: 767px) {
	
	#services .container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	#services .section-padding {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	.services-title {
		font-size: 28px;
		line-height: 1.3em;
	}
	
	.services-badge-text {
		font-size: 0.85rem !important;
	}
	
	.services-badge-icon {
		font-size: 0.9rem !important;
	}
	
	.services-description {
		font-size: 0.95rem;
		margin-top: 1rem;
	}
	
	.service-card {
		padding: 20px 16px;
	}
	
	.service-card-title {
		font-size: 18px;
		margin-bottom: 0.75rem;
	}
	
	.service-card-text {
		font-size: 0.875rem;
		line-height: 1.5;
	}
	
	.service-icon {
		width: 36px;
		height: 36px;
		margin-bottom: 12px;
	}
	
	.services-gallery {
		row-gap: 1.25rem !important;
	}
	
	.services-gallery .col-12 {
		margin-bottom: 0;
	}
}

/* Small Mobile Styles (max-width: 575px) */
@media (max-width: 575px) {

	.services-title {
		font-size: 24px;
	}
	
	.service-card {
		padding: 18px 14px;
	}
	
	.service-card-title {
		font-size: 16px;
	}
	
	.service-card-text {
		font-size: 0.8rem;
	}
	
	.service-icon {
		width: 32px;
		height: 32px;
		margin-bottom: 10px;
	}
}

/* How It Works Section Responsive Styles */
#how-it-works {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.how-it-works-title {
	font-size: 42px;
}

.how-it-works-step-number {
	font-size: 24px;
}

.how-it-works-step-title {
	font-size: 22px;
}

.how-it-works-image-text {
	font-size: 72px;
	left: -20px;
	top: -20px;
}

.how-it-works-badge {
	font-size: 17px;
}

.badge-circle {
	width: 44px;
	height: 44px;
	font-size: 21px;
}

/* Tablet Styles (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	#how-it-works {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	
	.how-it-works-title {
		font-size: 36px;
	}
	
	.how-it-works-step-number {
		font-size: 22px;
		min-width: 44px !important;
	}
	
	.how-it-works-step-title {
		font-size: 20px;
	}
	
	.how-it-works-image-text {
		font-size: 60px;
		left: -15px;
		top: -15px;
	}
	
	.how-it-works-badge {
		font-size: 15px;
		padding: 0.75rem 1rem !important;
	}
	
	.badge-circle {
		width: 40px;
		height: 40px;
		font-size: 19px;
	}
	
	.badge-text {
		font-size: 0.9rem;
	}
}

/* Mobile Styles (max-width: 767px) */
@media (max-width: 767px) {
	#how-it-works {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	.how-it-works-header {
		margin-bottom: 2rem !important;
	}
	
	.how-it-works-title {
		font-size: 28px;
		line-height: 1.3em;
		margin-bottom: 0 !important;
	}
	
	.how-it-works-badge-text {
		font-size: 0.85rem !important;
	}
	
	.how-it-works-badge-icon {
		font-size: 0.9rem !important;
	}
	
	.how-it-works-badge {
		font-size: 14px;
		padding: 0.6rem 0.9rem !important;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 100%;
	}
	
	.badge-circles {
		margin-right: 8px !important;
	}
	
	.badge-circle {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	
	.badge-text {
		font-size: 0.8rem;
		white-space: nowrap;
	}
	
	.how-it-works-image-wrapper {
		margin-bottom: 1.5rem;
	}
	
	.how-it-works-image-text {
		font-size: 48px;
		left: -10px;
		top: -10px;
	}
	
	.how-it-works-steps {
		margin-top: 0 !important;
	}
	
	.how-it-works-step {
		margin-bottom: 1.5rem !important;
	}
	
	.how-it-works-step-number {
		font-size: 20px;
		min-width: 40px !important;
	}
	
	.how-it-works-step-title {
		font-size: 18px;
		margin-bottom: 0.5rem !important;
	}
	
	.how-it-works-step-text {
		font-size: 0.875rem;
		line-height: 1.5;
	}
}

/* Small Mobile Styles (max-width: 575px) */
@media (max-width: 575px) {
	#how-it-works {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	
	.how-it-works-title {
		font-size: 24px;
	}
	
	.how-it-works-badge {
		font-size: 12px;
		padding: 0.5rem 0.75rem !important;
	}
	
	.badge-circle {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}
	
	.badge-text {
		font-size: 0.75rem;
	}
	
	.how-it-works-image-text {
		font-size: 40px;
		left: -8px;
		top: -8px;
	}
	
	.how-it-works-step-number {
		font-size: 18px;
		min-width: 36px !important;
	}
	
	.how-it-works-step-title {
		font-size: 16px;
	}
	
	.how-it-works-step-text {
		font-size: 0.8rem;
	}
	
	.how-it-works-step {
		margin-bottom: 1.25rem !important;
	}
}

/* ========== COMPREHENSIVE PAGE RESPONSIVENESS FIXES ========== */

/* Brands Section Responsive */
#brands {
	padding: 2rem 0;
}

.brands-logo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.brands-logo-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 2rem;
	}
}

.brands-center-badge {
	width: 190px;
	height: 190px;
	margin-top: -45px;
}

.brands-center-badge-inner {
	width: 190px;
	height: 190px;
}

.brands-center-circle-outer {
	width: 105px;
	height: 105px;
}

.brands-center-circle-inner {
	width: 84px;
	height: 84px;
}

.brands-scroll-svg {
	width: 130px;
	height: 130px;
}

/* Some Facts Section Responsive */
#some-facts {
	background-attachment: scroll !important;
}

#some-facts h2 {
	font-size: 42px;
}

#some-facts .facts-value {
	font-size: 40px;
}

#some-facts .decorative-shape {
	width: 380px;
	height: 380px;
}

/* What We Do Section Comprehensive Responsive Styles */
#what-we-do {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

#what-we-do .container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.what-we-do-badge-icon {
	font-size: 1rem;
}

.what-we-do-badge-text {
	font-size: 0.875rem;
}

.what-we-do-title {
	font-size: 42px;
	font-weight: 600;
	line-height: 1.2em;
}

.what-service-card {
	padding: 20px;
	transition: all 0.3s ease;
}

.what-service-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.what-service-icon {
	width: 48px;
	height: 48px;
	font-size: 20px;
	flex-shrink: 0;
}

.what-service-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.what-service-text {
	font-size: 0.875rem;
	line-height: 1.5;
}

.service-support-wrapper {
	bottom: 0;
	left: 0;
	right: 0;
}

.service-support-badge {
	padding: 30px;
	min-width: 150px;
}

.service-support-value {
	font-size: 2rem;
	font-weight: 700;
}

.service-support-label {
	font-size: 0.875rem;
}

/* Our Work Section Responsive */
#our-work h2 {
	font-size: 42px;
}

/* Team Member Section Comprehensive Responsive Styles */
#team-member {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

#team-member .container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.team-member-title {
	font-size: 42px;
	font-weight: 600;
	line-height: 1.2em;
}

.team-member-image-wrapper {
	height: 384px;
}

.team-name {
	font-size: 20px;
	font-weight: 700;
}

.team-role {
	font-size: 14px;
	font-weight: 600;
}

.team-member-content {
	padding: 1.5rem;
}

.team-social-icon {
	width: 44px;
	height: 44px;
}

.team-social-icon span {
	font-size: 18px;
}

/* Latest Blog Section Responsive */
#latest-blog h2 {
	font-size: 42px;
}

/* About Section Comprehensive Responsive Styles */
#about {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* About Section - Space between columns on large screens */
@media (min-width: 992px) {
	#about .row.justify-content-lg-between {
		justify-content: space-between !important;
	}
	
	#about .row.justify-content-lg-between > .col-lg-5 {
		flex: 0 0 auto;
		width: auto;
		max-width: 48%;
	}
}

.about-section-heading {
	font-size: 46px;
}

.about-section-text {
	font-size: 1rem;
	line-height: 1.6;
}

.about-feature-title {
	font-size: 22px;
}

.about-feature-text {
	font-size: 0.875rem;
	line-height: 1.5;
}

.about-image-wrapper {
	margin-top: 2rem;
}

.about-overlay-image {
	top: -20px;
	left: -20px;
	max-width: 221px;
}

#about .opening-hours-badge {
	max-width: 280px;
	padding: 1rem;
	bottom: 20px;
	right: 20px;
}

.opening-hours-title {
	font-size: 22px;
}

.opening-hours-icon {
	width: 24px;
	height: 24px;
}

/* Tablet Styles (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	/* Brands Section */
	.brands-logo-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;
	}
	
	.brands-center-badge {
		width: 160px;
		height: 160px;
		margin-top: -35px;
	}
	
	.brands-center-badge-inner {
		width: 160px;
		height: 160px;
	}
	
	.brands-center-circle-outer {
		width: 90px;
		height: 90px;
	}
	
	.brands-center-circle-inner {
		width: 72px;
		height: 72px;
	}
	
	.brands-scroll-svg {
		width: 110px;
		height: 110px;
	}
	
	/* Some Facts */
	#some-facts h2 {
		font-size: 36px;
	}
	
	#some-facts .facts-value {
		font-size: 32px;
	}
	
	#some-facts .decorative-shape {
		width: 280px;
		height: 280px;
	}
	
	/* What We Do - Tablet */
	#what-we-do {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	
	#what-we-do .container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.what-we-do-title {
		font-size: 36px !important;
		line-height: 1.3em !important;
		margin-bottom: 1.5rem !important;
	}
	
	.what-we-do-badge-text {
		font-size: 0.8rem;
	}
	
	.what-service-card {
		padding: 18px !important;
		margin-bottom: 1rem !important;
	}
	
	.what-service-icon {
		width: 44px !important;
		height: 44px !important;
		font-size: 18px !important;
	}
	
	.what-service-title {
		font-size: 20px !important;
	}
	
	.what-service-text {
		font-size: 0.85rem;
	}
	
	.service-support-badge {
		padding: 24px !important;
	}
	
	.service-support-value {
		font-size: 1.75rem !important;
	}
	
	.service-support-label {
		font-size: 0.8rem;
	}
	
	/* Other Sections */
	#our-work h2,
	#latest-blog h2 {
		font-size: 36px;
	}
	
	/* Team Member - Tablet */
	#team-member {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	
	#team-member .container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.team-member-title {
		font-size: 36px !important;
		line-height: 1.3em !important;
	}
	
	#team-member .row.g-4 {
		gap: 1rem !important;
	}
	
	.team-member-image-wrapper {
		height: 320px !important;
	}
	
	.team-name {
		font-size: 18px !important;
	}
	
	.team-role {
		font-size: 13px !important;
	}
	
	.team-member-content {
		padding: 1rem !important;
	}
	
	.team-social-icon {
		width: 40px !important;
		height: 40px !important;
	}
	
	.team-social-icon span {
		font-size: 16px !important;
	}
	
	/* About Section - Tablet */
	#about {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	
	.about-section-heading {
		font-size: 36px;
		line-height: 1.3em;
	}
	
	.about-feature-title {
		font-size: 20px;
	}
	
	.about-image-wrapper {
		margin-top: 1.5rem;
	}
	
	.about-overlay-image {
		top: -15px;
		left: -15px;
		max-width: 180px;
	}
	
	#about .opening-hours-badge {
		max-width: 240px;
		padding: 0.875rem;
		bottom: 15px;
		right: 15px;
	}
	
	.opening-hours-title {
		font-size: 20px;
	}
}

/* Mobile Styles (max-width: 767px) */
@media (max-width: 767px) {
	/* Brands Section */
	#brands {
		padding: 1.5rem 0;
	}
	
	.brands-logo-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	
	.brands-center-badge {
		width: 120px;
		height: 120px;
		margin-top: -20px;
		order: 3;
		grid-column: 1 / -1;
		justify-self: center;
	}
	
	.brands-center-badge-inner {
		width: 120px;
		height: 120px;
	}
	
	.brands-center-circle-outer {
		width: 70px;
		height: 70px;
	}
	
	.brands-center-circle-inner {
		width: 56px;
		height: 56px;
	}
	
	.brands-scroll-svg {
		width: 90px;
		height: 90px;
	}
	
	.brands-scroll-svg text {
		font-size: 7px !important;
	}
	
	/* Some Facts */
	#some-facts {
		background-attachment: scroll !important;
	}
	
	#some-facts h2 {
		font-size: 28px;
		line-height: 1.3em;
	}
	
	#some-facts .facts-value {
		font-size: 28px;
	}
	
	#some-facts .decorative-shape {
		width: 200px;
		height: 200px;
		display: none; /* Hide on mobile for better UX */
	}
	
	/* What We Do - Mobile */
	#what-we-do {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	#what-we-do .container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.what-we-do-title {
		font-size: 28px !important;
		line-height: 1.3em !important;
		margin-bottom: 1.25rem !important;
	}
	
	.what-we-do-badge-icon {
		font-size: 0.9rem;
	}
	
	.what-we-do-badge-text {
		font-size: 0.75rem;
	}
	
	.what-service-card {
		padding: 16px !important;
		margin-bottom: 1rem !important;
	}
	
	.what-service-icon {
		width: 40px !important;
		height: 40px !important;
		font-size: 18px !important;
	}
	
	.what-service-title {
		font-size: 18px !important;
	}
	
	.what-service-text {
		font-size: 0.8rem;
		line-height: 1.5;
	}
	
	.service-support-wrapper {
		position: relative !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		margin-top: 1.5rem;
		width: 100%;
	}
	
	.service-support-badge {
		padding: 20px !important;
		width: 100%;
		max-width: 100%;
		position: relative !important;
	}
	
	.service-support-value {
		font-size: 1.5rem !important;
	}
	
	.service-support-label {
		font-size: 0.75rem;
	}
	
	/* Our Work */
	#our-work h2 {
		font-size: 28px;
		line-height: 1.3em;
	}
	
	/* Team Member - Mobile */
	#team-member {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	#team-member .container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.team-member-title {
		font-size: 28px !important;
		line-height: 1.3em !important;
	}
	
	.team-member-image-wrapper {
		height: 300px !important;
	}
	
	.team-name {
		font-size: 18px !important;
	}
	
	.team-role {
		font-size: 13px !important;
	}
	
	.team-social-icon {
		width: 40px !important;
		height: 40px !important;
	}
	
	.team-social-icon span {
		font-size: 16px !important;
	}
	
	/* Latest Blog */
	#latest-blog h2 {
		font-size: 28px;
		line-height: 1.3em;
	}
	
	/* About Section - Mobile */
	#about {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	#about .container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.about-section-heading {
		font-size: 28px;
		line-height: 1.3em;
		margin-bottom: 1rem !important;
	}
	
	.about-section-text {
		font-size: 0.95rem;
		margin-bottom: 1.5rem !important;
	}
	
	.about-feature-item {
		margin-bottom: 1.25rem;
	}
	
	.about-feature-title {
		font-size: 18px;
		margin-bottom: 0.5rem !important;
	}
	
	.about-feature-text {
		font-size: 0.875rem;
		line-height: 1.5;
	}
	
	.about-image-wrapper {
		margin-top: 2rem;
		padding: 0;
	}
	
	.about-overlay-image {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		max-width: 100% !important;
		margin-bottom: 1rem;
		display: block;
	}
	
	#about .opening-hours-badge {
		max-width: 100% !important;
		padding: 1rem !important;
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		margin-top: 1.5rem;
		width: 100%;
	}
	
	.opening-hours-title {
		font-size: 18px !important;
	}
	
	.opening-hours-icon {
		width: 20px !important;
		height: 20px !important;
	}
	
	/* Hero Section Additional Fixes */
	#hero h1 {
		font-size: clamp(22px, 6vw, 55px) !important;
	}
}

/* ========== HERO SECTION COMPREHENSIVE RESPONSIVE STYLES ========== */
#hero {
	padding-top: 5rem;
	padding-bottom: 5rem;
	position: relative;
	overflow: hidden;
}

.hero-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 10;
}

.hero-content {
	padding: 1rem 0;
}

.hero-badge {
	margin-bottom: 1.5rem;
}

.hero-badge-icon {
	font-size: 1rem;
}

.hero-badge-text {
	font-size: 0.875rem;
	letter-spacing: 1px;
}

.hero-title {
	font-size: 55px;
	font-weight: 600;
	line-height: 1.2em;
	color: #ffffff;
}

.hero-buttons {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.hero-button {
	font-size: 1rem;
	text-decoration: none;
	transition: all 0.3s ease;
}

.hero-button-primary {
	background-color: #3b82f6;
	color: #ffffff;
}

.hero-button-primary:hover {
	background-color: #2563eb;
	color: #ffffff;
}

.hero-button-secondary {
	border: 2px solid #ffffff;
	color: #ffffff;
}

.hero-button-secondary:hover {
	background-color: #ffffff;
	color: #000000;
}

.hero-features {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.hero-feature-item {
	margin-bottom: 1rem;
}

.hero-feature-text {
	font-size: 1rem;
	color: #ffffff;
}

.hero-image-wrapper {
	padding-left: 2rem;
}
/* SweetAlert Custom Styling */
.swal2-popup {
    border-radius: 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

.swal2-title {
    color: #2c3e50 !important;
    font-size: 24px !important;
}

.swal2-confirm {
    background-color: #3085d6 !important;
    border-radius: 5px !important;
    padding: 10px 30px !important;
    font-size: 16px !important;
}

/* Success Section Styling */
#successSection {
    animation: fadeIn 0.5s ease-in;
}

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

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
    border-radius: 8px;
    padding: 20px;
}

.btn-primary {
    background-color: #3085d6;
    border-color: #3085d6;
    padding: 12px 30px;
    font-size: 18px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #2573c3;
    border-color: #2573c3;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


/* ------------------------- */

/* ============================================
   GLOBAL 1220px MAX WIDTH FOR SINGLE POSTS
   ============================================ */




@media (max-width: 768px) {
    .single-post .container,
    .single .container,
    .single-post .container-lg,
    .single .container-lg {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .single-post .classical-editor-content img,
    .single .classical-editor-content img {
        max-width: 100% !important;
        height: auto !important;
    }
}
/* ------------------------- */
/* Tablet Styles (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	#hero {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}
	
	.hero-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.hero-content {
		padding: 0.5rem 0;
	}
	
	.hero-badge {
		margin-bottom: 1.25rem;
	}
	
	.hero-badge-text {
		font-size: 0.8rem;
	}
	
	.hero-title {
		font-size: 38px;
		line-height: 1.3em;
		margin-bottom: 1.5rem !important;
	}
	
	.hero-buttons {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}
	
	.hero-button {
		font-size: 0.95rem;
		padding: 0.6rem 1.75rem !important;
	}
	
	.hero-features {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}
	
	.hero-feature-text {
		font-size: 0.95rem;
	}
	
	.hero-image-wrapper {
		padding-left: 1.5rem;
		margin-top: 2rem;
	}
}

/* Mobile Styles (max-width: 767px) */
@media (max-width: 767px) {
	#hero {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	
	.hero-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.hero-content {
		padding: 0;
		text-align: center;
	}
	
	.hero-badge {
		margin-bottom: 1rem;
		justify-content: center;
	}
	
	.hero-badge-icon {
		font-size: 0.9rem;
	}
	
	.hero-badge-text {
		font-size: 0.75rem;
	}
	
	.hero-title {
		font-size: 28px;
		line-height: 1.3em;
		margin-bottom: 1.25rem !important;
		text-align: center;
	}
	
	.hero-buttons {
		margin-top: 1.25rem;
		margin-bottom: 1.25rem;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	
	.hero-button {
		font-size: 0.9rem;
		padding: 0.5rem 1.5rem !important;
		width: 100%;
		max-width: 280px;
		text-align: center;
		justify-content: center;
	}
	
	.hero-features {
		margin-top: 1.25rem;
		margin-bottom: 1.25rem;
		text-align: left;
	}
	
	.hero-feature-item {
		margin-bottom: 0.75rem;
	}
	
	.hero-feature-text {
		font-size: 0.9rem;
	}
	
	.hero-image-wrapper {
		padding-left: 0;
		margin-top: 2rem;
	}
}

/* Small Mobile Styles (max-width: 575px) */
@media (max-width: 575px) {
	#hero {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	.hero-title {
		font-size: 24px;
	}
	
	.hero-badge-text {
		font-size: 0.7rem;
	}
	
	.hero-button {
		font-size: 0.85rem;
		padding: 0.45rem 1.25rem !important;
		max-width: 100%;
	}
	
	.hero-feature-text {
		font-size: 0.85rem;
	}
}

/* Small Mobile Styles (max-width: 575px) */
@media (max-width: 575px) {
	/* Brands Section */
	.brands-center-badge {
		width: 100px;
		height: 100px;
		margin-top: -15px;
	}
	
	.brands-center-badge-inner {
		width: 100px;
		height: 100px;
	}
	
	.brands-center-circle-outer {
		width: 60px;
		height: 60px;
	}
	
	.brands-center-circle-inner {
		width: 48px;
		height: 48px;
	}
	
	.brands-scroll-svg {
		width: 75px;
		height: 75px;
	}
	
	.brands-scroll-svg text {
		font-size: 6px !important;
	}
	
	/* Some Facts */
	#some-facts h2 {
		font-size: 24px;
	}
	
	#some-facts .facts-value {
		font-size: 24px;
	}
	
	/* What We Do - Small Mobile */
	#what-we-do {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	
	.what-we-do-title {
		font-size: 24px !important;
	}
	
	.what-service-card {
		padding: 14px !important;
	}
	
	.what-service-icon {
		width: 36px !important;
		height: 36px !important;
		font-size: 16px !important;
	}
	
	.what-service-title {
		font-size: 16px !important;
	}
	
	.what-service-text {
		font-size: 0.75rem;
	}
	
	.service-support-badge {
		padding: 18px !important;
	}
	
	.service-support-value {
		font-size: 1.25rem !important;
	}
	
	/* Other Sections */
	#our-work h2,
	#team-member h2,
	#latest-blog h2 {
		font-size: 24px;
	}
	
	/* About Section - Small Mobile */
	#about {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	
	.about-section-heading {
		font-size: 24px;
	}
	
	.about-feature-title {
		font-size: 16px;
	}
	
	.about-feature-text {
		font-size: 0.8rem;
	}
	
	.opening-hours-title {
		font-size: 16px !important;
	}
	
	#about .opening-hours-badge {
		padding: 0.875rem !important;
	}
	
	#about .opening-hours-badge h5 {
		font-size: 16px !important;
	}
}

/* Fix for background-attachment on mobile */
@media (max-width: 767px) {
	section[style*="background-attachment: fixed"] {
		background-attachment: scroll !important;
	}
}

/* Fix for overflow issues */
@media (max-width: 767px) {
	.container,
	.max-w-7xl {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	section {
		overflow-x: hidden;
	}
}

/* Fix for text overflow */
@media (max-width: 767px) {
	h1, h2, h3, h4, h5, h6 {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	
	p, span, div {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}


/* Site Preloader styles */
#site-preloader {
	position: fixed;
	inset: 0;
	background: #ffffff;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .45s ease, visibility .45s ease;
}

#site-preloader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.site-preloader-inner { text-align: center; }
.site-preloader-logo { max-width: 180px; width: 40%; height: auto; animation: preloader-pulse 1.4s ease-in-out infinite; }
.site-preloader-logo-text { font-family: 'Jost', sans-serif; font-size: 28px; font-weight:700; color:#111; }

@keyframes preloader-pulse {
	0% { transform: scale(1); opacity: 1; }
	50% { transform: scale(0.95); opacity: 0.85; }
	100% { transform: scale(1); opacity: 1; }
}

/* Logo: Explicitly disable image-anime animation */
.logo-wrap,
.logo-wrap img,
header .logo-wrap,
header figure,
header figure.image-anime,
header figure.image-anime img,
header img {
	animation: none !important;
	transform: none !important;
}

/* Remove all pseudo-element animations from header images */
header figure.image-anime::before,
header figure.image-anime::after,
header figure::before,
header figure::after,
footer figure.image-anime::before,
footer figure.image-anime::after,
footer figure::before,
footer figure::after {
	animation: none !important;
	transform: none !important;
	display: none !important;
}

/* Ensure preloader logo still animates */
#site-preloader .site-preloader-logo {
	animation: preloader-pulse 1.4s ease-in-out infinite !important;
}
/* Enhanced Multi-Step Form Styles */
.service-request-form {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.form-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.form-header {
    background: linear-gradient(135deg, #3085d6, #2573c3);
    color: white;
    padding: 2rem;
    text-align: center;
}

.form-header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.form-body {
    padding: 2rem;
}

/* Enhanced Input Animations */
.enhanced-input:focus, .enhanced-select:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(48, 133, 214, 0.15);
}

.enhanced-input::placeholder {
    color: #adb5bd;
    transition: all 0.3s ease;
}

.enhanced-input:focus::placeholder {
    transform: translateY(-20px);
    opacity: 0;
}

/* Service Type Icons */
.service-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-option:hover {
    border-color: #3085d6;
    background-color: #f8f9fa;
}

.service-option.selected {
    border-color: #3085d6;
    background-color: rgba(48, 133, 214, 0.1);
}

.service-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    width: 40px;
    text-align: center;
}

/* Progress Animation */
.progress-fill {
    background: linear-gradient(90deg, #3085d6, #2573c3, #667eea);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Button Enhancements */
.btn-enhanced {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.btn-enhanced:hover::before {
    left: 100%;
}

.btn-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Success Animation */
.success-checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #28a745;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #28a745;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.success-checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #28a745;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #28a745;
    }
}

/* Loading Spinner Enhancement */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3085d6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Form Validation Enhancements */
.field-error {
    animation: shake 0.5s ease-in-out;
    border-color: #dc3545 !important;
}

.field-success {
    animation: pulse 0.5s ease-in-out;
    border-color: #28a745 !important;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .form-container {
        margin: 1rem;
        border-radius: 15px;
    }
    
    .form-header {
        padding: 1.5rem;
    }
    
    .form-header h2 {
        font-size: 1.5rem;
    }
    
    .form-body {
        padding: 1.5rem;
    }
    
    .step-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .enhanced-input, .enhanced-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .form-container {
        background: rgba(33, 37, 41, 0.95);
        color: #fff;
    }
    
    .step-header {
        background: linear-gradient(135deg, #2c3e50, #34495e);
    }
    
    .enhanced-input, .enhanced-select {
        background-color: #495057;
        border-color: #6c757d;
        color: #fff;
    }
    
    .enhanced-input::placeholder {
        color: #adb5bd;
    }
    
    .review-card {
        background: #495057;
        border-color: #6c757d;
    }
}

/* Accessibility Enhancements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.focus-visible {
    outline: 2px solid #3085d6;
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .enhanced-input, .enhanced-select {
        border-width: 3px;
    }
    
    .btn-primary {
        border: 2px solid #000;
    }
    
    .step-circle {
        border-width: 3px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}