/**
 * Mobile Styles - EXACT REPLICA from design.html
 * Lexx.inovation Mobile Optimization
 */

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Smooth scrolling for all mobile devices */
html {
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

/* Prevent horizontal scroll on mobile */
body {
	overflow-x: hidden;
	width: 100%;
}

/* Optimize touch interactions */
@media (hover: none) and (pointer: coarse) {
	/* Remove hover effects on touch devices */
	a:hover,
	button:hover {
		opacity: 1;
	}
	
	/* Add tap highlight color */
	a,
	button,
	[role="button"] {
		-webkit-tap-highlight-color: rgba(0, 86, 167, 0.2);
	}
}

/* Optimize animations on mobile */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================
   MOBILE: 768px and below
   ============================================ */

@media (max-width: 768px) {
	
	/* Container - VW units for mobile */
	.container {
		padding-right: 2.7777777778vw;
		padding-left: 2.7777777778vw;
	}
	
	/* Hero Section Mobile Optimizations */
	.hero__title {
		font-size: 10vw;
		line-height: 105%;
	}
	
	.hero__description {
		font-size: 4.2vw;
		margin-top: 4vw;
	}
	
	.hero__cta-wrapper {
		margin-top: 6vw;
	}
	
	/* Section Titles Mobile */
	.section-title {
		font-size: 9vw;
		line-height: 110%;
		margin-bottom: 4vw;
	}
	
	.section-subtitle {
		font-size: 4.4vw;
		line-height: 145%;
	}
	
	/* Cards and Boxes Mobile */
	.card,
	.service-box,
	.feature-box {
		padding: 5.5vw;
		border-radius: 2.7777777778vw;
	}
	
	/* Images and Media Mobile */
	img {
		border-radius: 2.7777777778vw;
	}
	
	.video-box,
	.video-box__preview {
		border-radius: 2.7777777778vw;
	}
	
	/* Spacing Mobile */
	.mt-20 {
		margin-top: 5.5vw !important;
	}
	
	.mt-40 {
		margin-top: 8vw !important;
	}
	
	.mb-20 {
		margin-bottom: 5.5vw !important;
	}
	
	.mb-40 {
		margin-bottom: 8vw !important;
	}
	
	/* Text sizes Mobile */
	.text--l {
		font-size: 4.4vw;
	}
	
	.text--m {
		font-size: 4vw;
	}
	
	.text--s {
		font-size: 3.6vw;
	}
	
	/* Portfolio Filter Mobile */
	.portfolio-filters {
		flex-wrap: wrap;
		gap: 2vw;
	}
	
	.portfolio-filter-btn {
		font-size: 3.8vw;
		padding: 2vw 4vw;
	}
	
	/* Testimonials Mobile */
	.testimonial-text {
		font-size: 4.5vw;
		line-height: 150%;
	}
	
	.testimonial-author {
		font-size: 3.8vw;
	}
	
	/* Footer Mobile */
	.footer-columns {
		grid-template-columns: 1fr !important;
		gap: 8vw;
	}
	
	.footer-column h3 {
		font-size: 5vw;
		margin-bottom: 4vw;
	}
	
	.footer-column ul li {
		font-size: 3.8vw;
		margin-bottom: 2.5vw;
	}
	
	/* Network Box */
	.network-box {
		gap: 2.2222222222vw;
	}
	
	.network-box__item {
		width: 100%;
	}
	
	.network-box__item-cover {
		height: 44.4444444444vw;
	}
	
	.network-box__item-cover img {
		border-radius: 2.7777777778vw;
	}
	
	.network-box__item-cover::after {
		content: "";
		background-color: rgba(0, 0, 0, 0.15);
	}
	
	.network-box__item-inner {
		z-index: 7;
		bottom: 0;
		padding-right: 2.7777777778vw;
		padding-bottom: 2.7777777778vw;
		padding-left: 2.7777777778vw;
		row-gap: 4.7222222222vw;
	}
	
	.network-box__num {
		display: none;
	}
	
	.network-box__title {
		font-size: 6.6666666667vw;
		text-align: left;
		width: 100%;
	}
	
	.network-box__desc {
		font-size: 3.3333333333vw;
	}
	
	.network-box__desc-desk {
		display: none;
	}
	
	.network-box__desc-mobile {
		display: block;
	}
	
	.arrow-m-tt {
		width: 13.3333333333vw;
		display: block;
		margin-left: 14.1666666667vw;
	}
	
	.arrow-m-tt svg {
		width: 100%;
	}
	
	/* Talent Center */
	.talent-center {
		top: 50%;
		transform: translateY(-50%) translateX(-50%);
		width: 25vw;
		height: 25vw;
		padding-top: 0.8333333333vw;
		padding-right: 0.8333333333vw;
		padding-bottom: 0.8333333333vw;
		padding-left: 0.8333333333vw;
		box-shadow: none;
	}
	
	.talent-center-inner {
		padding-right: 0;
		padding-left: 0;
	}
	
	.section-logo-design-in {
		max-width: 18.8888888889vw;
	}
	
	.circle-timer-wrapper .rs-timer-pie {
		border: 1.8333333333vw solid rgba(240, 183, 17, 0.50);
		background: transparent;
	}
	
	.circle-timer-wrapper-left {
		clip-path: polygon(calc(50% + 2.2222222222vw / 2) 0, 100% 0, 100% 100%, calc(50% + 2.2222222222vw / 2) 100%);
	}
	
	.circle-timer-wrapper-right {
		clip-path: polygon(0 0, calc(50% - 2.2222222222vw / 2) 0, calc(50% - 2.2222222222vw / 2) 100%, 0 100%);
	}
	
	/* Hide vertical slider on mobile */
	.hero__visual-area {
		display: none !important;
	}

	/* Horizontal mobile services slider — auto-scrolling like desktop vertical */
	.services-mobile-wrap {
		overflow: hidden;
		mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	}

	.services-mobile-list {
		display: flex;
		gap: 12px;
		width: max-content;
		animation: mobileHorizontalScroll 20s linear infinite;
	}

	.services-mobile-list::-webkit-scrollbar {
		display: none;
	}

	@keyframes mobileHorizontalScroll {
		0% { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}

	.services-mobile-list:hover {
		animation-play-state: paused;
	}

	.service-mobile-item {
		flex-shrink: 0;
		width: 170px;
	}

	.service-mobile-item a {
		display: block;
		text-decoration: none;
		border-radius: 12px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		transition: transform 0.3s ease;
	}

	.service-mobile-item img {
		width: 100%;
		height: 110px;
		object-fit: cover;
		display: block;
	}

	.service-mobile-item h3 {
		margin: 0;
		padding: 8px 12px;
		font-size: 12px;
		font-weight: 600;
		color: #1a1a1a;
	}

	/* Hide vertical slider on mobile */
	.hero__visual-area {
		display: none !important;
	}

	.vert-scroll-up {
		animation: scrollUpInfinite 30s linear infinite !important;
		animation-delay: -15s !important;
	}

	.vert-scroll-down {
		animation: scrollDownInfinite 30s linear infinite !important;
		animation-delay: -15s !important;
	}

	/* Smaller cards on mobile */
	.vert-slider__elem-cover {
		height: 160px !important;
	}

	.vert-slider__elem-desc {
		padding: 20px 10px 10px !important;
	}

	.vert-slider__elem-desc-title {
		font-size: 13px !important;
		line-height: 1.25 !important;
	}
	
	/* Video Box */
	.video-box:not(.video-box--animated) {
		border-radius: 9px;
	}
	
	/* Menu Section Cover */
	.menu-section-cover {
		width: 64px;
		height: 64px;
		border-radius: 9px;
	}
	
	/* F-Menu Item */
	.f-menu-item {
		flex-direction: row;
		align-items: center;
	}
	
	.f-menu-item::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 1px;
		bottom: -20px;
		background-color: #D9D9D9;
	}
	
	.f-menu-item:last-child::after {
		content: none;
	}
	
	.f-menu-utem__cover-wrap {
		width: 64px;
		height: 64px;
		min-width: 0;
		min-height: 0;
		max-width: none;
	}
}

/* ============================================
   MOBILE: 992px and below
   ============================================ */

@media (max-width: 992px) {

	
	/* Container adjustments for mobile */
	.container {
		padding-right: var(--gutter);
		padding-left: var(--gutter);
	}
	
	/* Grid Layouts - Stack on mobile */
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr !important;
		gap: 32px;
	}
	
	/* Section Padding - Reduce on mobile */
	section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	
	/* Hero Section Mobile */
	.hero__content-wrapper {
		display: flex !important;
		flex-direction: column;
		gap: 30px;
	}
	
	.hero__text-content,
	.hero__visual-area {
		width: 100%;
	}
	
	.hero__title {
		font-size: 9vw;
		line-height: 110%;
	}
	
	.hero__description {
		font-size: 4.5vw;
	}
	
	/* Creative Growth Section Mobile */
	.growth-content-wrapper {
		grid-template-columns: 1fr !important;
		gap: 40px;
	}
	
	.section-title {
		font-size: 8vw;
		line-height: 115%;
	}
	
	.section-subtitle {
		font-size: 4vw;
	}
	
	/* Elite Talent Section Mobile */
	.talent-grid {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}
	
	/* Brand Elevation Section Mobile */
	.brand-elevation-wrapper {
		flex-direction: column;
		gap: 32px;
	}
	
	/* Portfolio Section Mobile */
	.portfolio-grid {
		grid-template-columns: 1fr !important;
		gap: 20px;
	}
	
	.portfolio-item {
		height: 50vw;
		max-height: 300px;
	}
	
	/* Testimonials Section Mobile */
	.testimonials-wrapper {
		flex-direction: column;
	}
	
	.testimonial-item {
		width: 100%;
		min-width: 100%;
	}
	
	/* CTA Section Mobile */
	.cta-content {
		padding: 40px 20px;
		text-align: center;
	}
	
	.cta-title {
		font-size: 7vw;
	}
	
	/* Stats Section Mobile */
	.stats-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px;
	}
	
	.stat__count {
		font-size: 12vw;
	}
	
	.stat__label {
		font-size: 3.5vw;
	}
	
	/* Buttons Mobile */
	.btn {
		width: 100%;
		justify-content: center;
		padding: 14px 24px;
		font-size: 16px;
	}
	
	.hero__cta-buttons {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}
	
	/* Optimize animations on mobile */
	* {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	/* Hardware acceleration for smooth animations */
	.btn,
	.card {
		transform: translateZ(0);
		backface-visibility: hidden;
		perspective: 1000px;
	}
	
	/* First Section */
	.first-section {
		padding-top: 100px;
	}
	
	/* Hide vertical scrolling slider on mobile */
	.vert-area-slider {
		display: none !important;
	}

	.hero__visual-area {
		display: none !important;
	}

	/* Ensure scrolling animation runs on mobile */
	.vert-scroll-up {
		animation: scrollUpInfinite 30s linear infinite !important;
	}

	.vert-scroll-down {
		animation: scrollDownInfinite 30s linear infinite !important;
		animation-delay: -15s !important;
	}

	/* Hide vertical slider */
	.services-mobile-list::-webkit-scrollbar {
		display: none;
	}

	.service-mobile-item {
		flex-shrink: 0;
		width: 170px;
		scroll-snap-align: start;
	}

	.service-mobile-item a {
		display: block;
		text-decoration: none;
		border-radius: 12px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	}

	.service-mobile-item img {
		width: 100%;
		height: 110px;
		object-fit: cover;
		display: block;
	}

	.service-mobile-item h3 {
		margin: 0;
		padding: 8px 12px;
		font-size: 12px;
		font-weight: 600;
		color: #1a1a1a;
	}
	
	/* Visual elements inside mobile slider columns */
	.vert-slider__elem-cover {
		height: 160px !important;
	}
	
	.vert-slider__elem-desc {
		padding: 20px 10px 10px !important;
	}
	
	.vert-slider__elem-desc-title {
		font-size: 13px !important;
		line-height: 1.25 !important;
	}
	
	/* Mobile-optimized card hover effects */
	@media (hover: none) {
		.card:active,
		.portfolio-item:active,
		.service-box:active {
			transform: scale(0.98);
			transition: transform 0.1s ease;
		}
	}
	
	.small-vert-slide-item {
		height: auto !important;
		width: 200px;
	}
	
	/* Network Box */
	.network-box__item-inner {
		max-width: none;
		padding-right: var(--space-m);
		padding-left: var(--space-m);
	}
	
	.talent-center {
		top: 0;
	}
	
	/* Services Slider */
	.serv-slider__item {
		width: 300px;
	}
	
	/* Sub Main Menu */
	.sub-main-menu {
		display: none;
	}
	
	/* Megamenu */
	.megamenu-content-area {
		padding-top: 0;
		padding-bottom: 0;
		border-top: 0;
		max-height: none !important;
	}
	
	.megamenu-content-area-inner {
		padding-right: 0;
		padding-left: 0;
		grid-gap: 30px 0;
	}
	
	.megamenu-drop-top-area {
		padding-top: 20px;
		padding-bottom: 0;
	}
	
	.megamenu-drop-top-area-scroll-inner {
		--min: 100%;
		grid-gap: 40px;
		flex-direction: column;
	}
	
	.megamenu-drop-bottom-area {
		padding-top: 28px;
		padding-bottom: 28px;
		height: auto;
	}
	
	.megamenu-drop-bottom-area-container {
		flex-wrap: wrap;
	}
	
	.sub-section-mm-category {
		width: 100%;
		flex-direction: column-reverse;
		justify-content: flex-end;
		align-items: flex-start;
	}
	
	.menu-section-desc {
		display: none;
	}
	
	.menu-section-cover {
		box-shadow: none;
	}
	
	.f-menu-utem__cover-wrap {
		border-radius: 9px;
		background-color: #D9D9D9;
		box-shadow: none;
	}
	
	.f-menu-utem__title {
		font-size: 36px !important;
	}
	
	.mainmenu-section-title {
		color: var(--primary);
		font-size: 36px;
		line-height: 120%;
	}
	
	/* Additional Mobile Buttons */
	.additional-mobile-btns {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin-top: auto;
		padding-top: var(--space-l);
		padding-bottom: var(--space-l);
	}
	
	.l-btn-full {
		justify-content: center !important;
		width: 100% !important;
	}
	
	.btn-wrapper-mb {
		display: block;
	}
	
	/* Vertical Slider Elem Desc Title */
	.vert-slider__elem-desc-title {
		line-height: 100%;
	}
	
	/* Embla Right */
	.embla-right {
		margin-top: 16px;
	}
	
	/* First Section Gradients */
	.first-gr-section::after {
		content: none;
	}
	
	.first-gr-section::before {
		content: none;
	}
}

/* ============================================
   MOBILE: 480px and below
   ============================================ */

@media (max-width: 480px) {
	
	/* Hero Section - Extra Small Mobile */
	.hero__title {
		font-size: 11vw;
		line-height: 100%;
	}
	
	.hero__description {
		font-size: 4.5vw;
		margin-top: 5vw;
	}
	
	/* Section Titles - Extra Small Mobile */
	.section-title {
		font-size: 10vw;
		line-height: 105%;
	}
	
	.section-subtitle {
		font-size: 4.8vw;
	}
	
	/* Cards - Extra Small Mobile */
	.card,
	.service-box,
	.feature-box {
		padding: 6vw;
	}
	
	/* Buttons - Extra Small Mobile */
	.btn {
		font-size: 4.2vw;
		padding: 3.5vw 6vw;
	}
	
	/* Stats - Extra Small Mobile */
	.stat__count {
		font-size: 14vw;
	}
	
	.stat__label {
		font-size: 4vw;
	}
	
	/* Portfolio Items - Extra Small Mobile */
	.portfolio-item {
		height: 60vw;
	}
	
	/* Spacing - Extra Small Mobile */
	section {
		padding-top: 12vw;
		padding-bottom: 12vw;
	}
	
	.mt-20 {
		margin-top: 6vw !important;
	}
	
	.mt-40 {
		margin-top: 10vw !important;
	}
	
	/* Grid Gaps - Extra Small Mobile */
	.grid--2,
	.grid--3,
	.grid--4 {
		gap: 6vw;
	}
	
	/* Logo scroll - Extra Small Mobile */
	.logos-scroll-container {
		gap: 8vw;
	}
	
	.logo-item {
		width: 20vw;
		height: 8vw;
	}
	
	/* Touch target sizes - Accessibility */
	.btn,
	.portfolio-filter-btn,
	a[class*="link"] {
		min-height: 44px;
		min-width: 44px;
	}
	
	/* Logos Scroll */
	.logos-scroll-container {
		--gap: var(--space-l);
	}
	
	/* Logo Partners Slide */
	.splide-logo-partners__slide-item {
		height: 36px;
	}
	
	/* Small Vert Slide Item */
	.small-vert-slide-item {
		width: 140px;
	}
	
	/* Embla Slide */
	.embla .embla__slide {
		width: 140px;
	}
	
	/* Vertical Slider Elem */
	.vert-slider__elem {
		height: 200px;
		border-radius: 9px;
	}
	
	/* Vertical Slider Elem Desc Title */
	.vert-slider__elem-desc-title {
		font-size: 5.5vw;
	}
	
	/* First Section */
	.first-section {
		padding-top: 80px;
	}
	
	/* Services Slider */
	.serv-slider__item {
		width: 243px;
	}
	
	/* Menu Section Cover */
	.menu-section-cover {
		width: 64px;
		height: 64px;
		border-radius: 9px;
	}
	
	/* Sub Section MM Category */
	.sub-section-mm-category {
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: center;
	}
}

/* ============================================
   MOBILE: 360px and below (Extra Small)
   ============================================ */

@media (max-width: 360px) {
	
	.vert-slider__elem-desc-title {
		font-size: 7vw;
	}
	
	/* Extra tight spacing for very small screens */
	.container {
		padding-right: 4vw;
		padding-left: 4vw;
	}
	
	.hero__title {
		font-size: 12vw;
	}
	
	.section-title {
		font-size: 11vw;
	}
}

/* ============================================
   MOBILE LANDSCAPE MODE
   ============================================ */

@media (max-width: 992px) and (orientation: landscape) {
	
	/* Reduce vertical padding in landscape */
	section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	/* Optimize hero for landscape */
	.hero {
		min-height: auto;
	}
	
	.hero__title {
		font-size: 6vh;
	}
	
	.hero__description {
		font-size: 2.5vh;
	}
	

	
	/* Reduce vertical spacing in landscape */
	.mt-40 {
		margin-top: 20px !important;
	}
	
	.mb-40 {
		margin-bottom: 20px !important;
	}
}

/* ============================================
   MOBILE: 1280px and below (Small Desktop)
   ============================================ */

@media (max-width: 1280px) {
	
	.hw-298 {
		width: auto;
	}
}