/* ========================================================================
   OIYAA TECHNOLOGIES - SOLUTIONS PAGE STYLES
   
   STRUCTURE:
   1. Hero Section & Page Header Styles
   2. Quote Box & Content Sections
   3. Owl Carousel & Solutions Grid
   4. Ecosystem & Core Solutions
   5. Utility Classes & Wave Backgrounds
   6. CONSOLIDATED RESPONSIVE MEDIA QUERIES (at bottom)
   
   NOTE: All media queries have been consolidated at the bottom of this file
   for better maintainability and easier analysis.
======================================================================== */

/* Hero Section Styling */
.page-header {
	background: var(--oiyaa-blue);
	color: white;
	padding: 3rem 3rem 8rem 3rem;
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
	/* SVG Wave as background */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 390' preserveAspectRatio='none'><path d='M 0,400 L 0,225 C 174.93333333333334,267.8 349.8666666666667,310.6 524,279 C 698.1333333333333,247.4 871.4666666666667,141.4 1024,95 C 1176.5333333333333,48.6 1308.2666666666667,61.8 1440,75 L 1440,400 L 0,400 Z' fill='%23ffffff'></path></svg>");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
	min-height: 300px;
}

.page-header .hero-content {
	position: relative;
	z-index: 2;
	padding-bottom: 8rem;
}

.hero-title {
	font-size: 3rem;
	font-weight: var(--weight-bold);
	margin-bottom: 1rem;
	line-height: 1.2;
}

.hero-text {
	font-size: 1.25rem;
	font-weight: var(--weight-regular);
	opacity: 0.9;
	margin-bottom: 0;
}

/* Quote Box Section */
.quote-box {
	background-color: rgba(175, 210, 238, 0.2);
	padding: 2.5rem;
	border-radius: var(--radius-standard);
	position: relative;
	text-align: center;
	margin: 2rem 0;
}

.quote-mark {
	font-size: 6rem;
	color: var(--oiyaa-light-blue);
	font-family: Georgia, serif;
	line-height: 1;
	position: absolute;
	top: -1rem;
	left: 50%;
	transform: translateX(-50%);
}

.quote-text {
	color: var(--oiyaa-blue);
	font-size: 1.5rem;
	line-height: 1.6;
	margin: 3rem 0 3rem 0;
	font-style: italic;
}

/* Template Solution Cards */
.solutions-cards-row {
	margin: 3rem 0;
}

.solution-card-template {
	background: white;
	border-radius: var(--radius-standard);
	padding: 2rem 1.5rem;
	text-align: center;
	height: 100%;
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	border: 1px solid rgba(21, 63, 105, 0.1);
}

.solution-card-template:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(21, 63, 105, 0.15);
	border-color: var(--oiyaa-light-blue);
}

.solution-card-template .solution-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 1.5rem;
	background: linear-gradient(135deg, var(--oiyaa-light-blue), var(--oiyaa-blue));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	box-shadow: 0 4px 12px rgba(21, 63, 105, 0.2);
}

.solution-card-template h5 {
	color: var(--oiyaa-blue);
	font-size: 1.3rem;
	font-weight: var(--weight-semibold);
	margin-bottom: 1rem;
	line-height: 1.3;
}

.solution-card-template p {
	color: var(--oiyaa-gray-text);
	line-height: 1.6;
	margin-bottom: 0;
	font-size: 1rem;
}

/* Solutions Grid - Owl Carousel Layout */
.solutions-grid-container {
	margin: 5px 0 5px 0;
	position: relative;
	width: 100%;
	border-radius: 16px;
	padding: 2rem 0;
}

.solutions-grid {
	padding: 1rem 0 2rem 0;
	width: 100%;
	position: relative;
}

/* Owl Carousel customization for solutions */
.solutions-carousel.owl-carousel {
	padding: 3rem 2rem;
	position: relative;
}

.solutions-carousel.owl-carousel .owl-stage-outer {
	overflow: visible;
}

.solutions-carousel .owl-stage {
	display: flex;
	align-items: stretch;
}

.solutions-carousel .owl-item {
	height: auto;
	display: flex;
	align-items: stretch;
}

.solutions-carousel .owl-item>div {
	width: 100%;
	height: 100%;
}

.solutions-carousel .owl-nav {
	margin-top: 0;
	text-align: center;
}

.solutions-carousel .owl-nav button {
	background: var(--oiyaa-blue) !important;
	color: white !important;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 18px;
	margin: 0 10px;
	border: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(21, 63, 105, 0.2);
}

.solutions-carousel .owl-nav button:hover {
	background: var(--oiyaa-light-blue) !important;
	color: var(--oiyaa-blue) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(21, 63, 105, 0.3);
}

.solutions-carousel .owl-nav button.owl-prev {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.solutions-carousel .owl-nav button.owl-next {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.solutions-carousel .owl-dots {
	text-align: center;
	margin-top: 2rem;
}

.solutions-carousel .owl-dots .owl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(21, 63, 105, 0.3);
	margin: 0 6px;
	border: none;
	transition: all 0.3s ease;
}

.solutions-carousel .owl-dots .owl-dot.active,
.solutions-carousel .owl-dots .owl-dot:hover {
	background: var(--oiyaa-blue);
	transform: scale(1.2);
}

/* Remove old flexbox styles that conflict with Owl Carousel */
.solutions-track {
	display: none;
	/* Hide old track styles */
}

.solution-card-new {
	background: white;
	border-radius: 12px;
	padding: 2.5rem 2rem;
	text-align: center;
	box-shadow: 0 8px 32px rgba(21, 63, 105, 0.1);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	border: 1px solid rgba(175, 210, 238, 0.2);
	width: 100%;
	height: 100%;
	min-height: 350px;
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

.solution-card-new::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--oiyaa-light-blue), var(--oiyaa-blue));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.solution-card-new:hover {
	transform: translateY(-12px);
	box-shadow: 0 20px 40px rgba(21, 63, 105, 0.2);
	border-color: var(--oiyaa-light-blue);
}

.solution-card-new:hover::before {
	opacity: 1;
}

.solution-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 2rem;
	background: linear-gradient(135deg, var(--oiyaa-light-blue), var(--oiyaa-blue));
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 2.2rem;
	box-shadow: 0 8px 24px rgba(21, 63, 105, 0.3);
	transition: all 0.3s ease;
}

.solution-card-new:hover .solution-icon {
	transform: scale(1.1);
	box-shadow: 0 12px 32px rgba(21, 63, 105, 0.4);
}

.solution-icon.embedded::before {
	content: "⚙️";
}

.solution-icon.api::before {
	content: "🔗";
}

.solution-icon.portal::before {
	content: "📊";
}

.solution-icon.ai::before {
	content: "🤖";
}

.solution-icon.analytics::before {
	content: "📈";
}

.solution-icon.mobile::before {
	content: "📱";
}

.solution-icon.security::before {
	content: "🔒";
}

.solution-icon.automation::before {
	content: "🔄";
}

.solution-card-new h3 {
	color: var(--oiyaa-blue);
	font-size: 1.3rem;
	font-weight: var(--weight-semibold);
	margin-bottom: 1rem;
	line-height: 1.3;
}

.solution-card-new p {
	color: var(--oiyaa-gray-text);
	line-height: 1.6;
	margin-bottom: 0;
}



/* Enhanced Ecosystem Section */
.solutions-ecosystem {
	background: unset;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-standard);
	color: var(--oiyaa-blue);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ecosystem-title {
	color: var(--oiyaa-blue) !important;
	font-weight: var(--weight-bold);
	font-size: 2.25rem;
	margin-bottom: 1.5rem;
}



.ecosystem-title {
	color: var(--oiyaa-blue) !important;
	font-weight: var(--weight-bold);
	font-size: 2.25rem;
	margin-bottom: 1.5rem;
}

.ecosystem-description {
	color: var(--oiyaa-blue) !important;
	font-weight: var(--weight-medium);
	font-size: 1.15rem;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
}

/* Ensure text inside components is highly visible */
.eco-component h4 {
	color: var(--oiyaa-light-blue) !important;
	font-weight: var(--weight-semibold);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.eco-component p {
	color: rgba(255, 255, 255, 0.9);
	font-weight: var(--weight-regular);
	line-height: 1.6;
	opacity: 1;
	/* Full opacity for component text */
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.summary-box {
	border-left: 4px solid var(--oiyaa-blue);
	background-color: rgba(175, 210, 238, 0.1) !important;
	position: relative;
	overflow: hidden;
}

.summary-box::after {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--oiyaa-light-blue);
	opacity: 0.2;
	z-index: 0;
}

/* Ensure highlight box text is fully opaque */
.mt-4 p.mb-0 {
	opacity: 1;
	/* Ensure full opacity for text */
}

/* Enhance the highlight box at the bottom of the ecosystem section */
.solutions-ecosystem .mt-4 {
	background-color: rgba(175, 210, 238, 0.15) !important;
	/* Slightly increased opacity */
	border-radius: 0.375rem;
	border-left: 4px solid var(--oiyaa-light-blue);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Ecosystem highlight box styling */
.ecosystem-highlight {
	background-color: rgba(175, 210, 238, 0.15) !important;
	border-radius: 0.375rem;
	border-left: 4px solid var(--oiyaa-light-blue);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.highlight-text {
	color: var(--oiyaa-white) !important;
	font-weight: var(--weight-medium);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	opacity: 1 !important;
}

/* ========================================================================
   INNOVATIVE IMPLEMENTATION PROCESS STYLES
======================================================================== */

/* Implementation Section */
.implementation-section {
    position: relative;
    overflow: hidden;
}

.implementation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23afd2ee' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    z-index: 1;
}

.implementation-section .container-fluid {
    position: relative;
    z-index: 2;
}

/* Process Timeline Container */
.process-timeline {
    position: relative;
    padding: 2rem 0;
    max-width: 1000px;
    margin: 0 auto;
}

/* Remove global timeline line */
.process-timeline::before {
    display: none;
}

/* Individual Process Step */
.process-step-modern {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4rem;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.process-step-modern:nth-child(1) { animation-delay: 0.1s; }
.process-step-modern:nth-child(2) { animation-delay: 0.2s; }
.process-step-modern:nth-child(3) { animation-delay: 0.3s; }
.process-step-modern:nth-child(4) { animation-delay: 0.4s; }
.process-step-modern:nth-child(5) { animation-delay: 0.5s; }

/* Step Circle Container */
.process-step-circle {
    position: relative;
    width: 120px;
    height: 120px;
    margin-right: 3rem;
    flex-shrink: 0;
    z-index: 2;
}

/* Main Circle */
.process-step-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--oiyaa-blue) 0%, #1e5a96 100%);
    border-radius: 50%;
    box-shadow: 
        0 8px 32px rgba(21, 63, 105, 0.3),
        0 0 0 8px rgba(175, 210, 238, 0.2),
        0 0 0 16px rgba(175, 210, 238, 0.1);
    transition: all 0.4s ease;
}

/* Outer Ring Animation */
.process-step-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 2px solid var(--oiyaa-blue);
    border-radius: 50%;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: rotate 3s linear infinite;
    opacity: 0.6;
}

/* Process Icon */
.process-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    font-weight: var(--weight-bold);
    z-index: 3;
    transition: all 0.3s ease;
}

/* Step Number */
.step-number {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 3px solid var(--oiyaa-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: var(--weight-bold);
    color: var(--oiyaa-blue);
    z-index: 4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Process Content */
.process-content {
    flex: 1;
    padding: 1.5rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.08),
        0 2px 16px rgba(0,0,0,0.04);
    border: 1px solid rgba(175, 210, 238, 0.3);
    position: relative;
    transition: all 0.4s ease;
    margin-top: 10px;
}

.process-content::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 30px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid white;
    filter: drop-shadow(-1px 0 1px rgba(175, 210, 238, 0.3));
}

/* Process Title */
.process-title {
    font-size: 1.4rem;
    font-weight: var(--weight-semibold);
    color: var(--oiyaa-blue);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

/* Process Description */
.process-description {
    color: var(--oiyaa-gray-text);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Process Features List */
.process-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.process-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--oiyaa-gray-text);
    font-size: 0.9rem;
}

.process-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--oiyaa-blue);
    font-weight: bold;
    font-size: 0.85rem;
}

/* Hover Effects */
.process-step-modern:hover .process-step-circle::before {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 
        0 12px 48px rgba(21, 63, 105, 0.4),
        0 0 0 12px rgba(175, 210, 238, 0.3),
        0 0 0 24px rgba(175, 210, 238, 0.1);
}

.process-step-modern:hover .process-content {
    transform: translateY(-5px);
    box-shadow: 
        0 16px 48px rgba(0,0,0,0.12),
        0 4px 24px rgba(0,0,0,0.08);
    border-color: var(--oiyaa-light-blue);
}

.process-step-modern:hover .process-icon {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Timeline Progress Bar */
.timeline-progress {
    position: relative;
    margin-top: 3rem;
    padding: 0 60px;
}

.progress-bar {
    height: 6px;
    background: rgba(175, 210, 238, 0.3);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--oiyaa-blue) 0%, var(--oiyaa-light-blue) 100%);
    border-radius: 3px;
    width: 0%;
    animation: progressFill 2s ease-in-out 1s forwards;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* Original Process steps styling - keeping for fallback */
.process-step {
	position: relative;
}

.process-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 20px;
	height: 15px;
	width: 2px;
	background-color: var(--oiyaa-blue);
	opacity: 0.3;
}

/* Industry cards styling */
.industry-card {
	transition: border-color 0.3s ease;
}

.industry-card:hover {
	border-color: var(--oiyaa-blue) !important;
}

/* Component title styling */
.component-title {
	color: var(--oiyaa-light-blue) !important;
	font-weight: var(--weight-semibold);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	margin-bottom: 0.75rem;
}

/* Content section adjustments for wave spacing */
.content-section {
	margin-top: 4rem;
}

/* NOTE: Responsive styles for .content-section are in the consolidated media queries section at the bottom */

/* NOTE: All responsive styles for hero, page-header, solutions, etc. are consolidated in the media queries section at the bottom */

/* Core Solutions - Alternating Layout */
.core-solution-item {
	display: flex;
	align-items: center;
	margin-bottom: 4rem;
	gap: 4rem;
	padding: 1rem 0;
	background: #f3f4f6;
	border-radius: var(--radius-standard);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

.core-solution-item:nth-child(even) {
	flex-direction: row-reverse;
}

.core-solution-content {
	flex: 1;
	padding: 1rem 3rem;
}

.core-solution-image {
	flex: 1;
	max-width: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.core-solution-image img {
	width: 100%;
	height: auto;
	max-width: 400px;
	border-radius: var(--radius-standard);
}

.core-solution-item h4 {
	color: var(--oiyaa-blue);
	font-size: 2rem;
	font-weight: var(--weight-semibold);
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

.core-solution-item p {
	color: var(--oiyaa-gray-text);
	line-height: 1.7;
	margin-bottom: 2rem;
	font-size: 1.1rem;
}

.core-solution-item ul {
	margin-bottom: 2.5rem;
	padding-left: 0;
	list-style: none;
}

.core-solution-item ul li {
	color: var(--oiyaa-gray-text);
	margin-bottom: 0.75rem;
	padding-left: 1.5rem;
	position: relative;
	font-size: 1rem;
	line-height: 1.5;
}

.core-solution-item ul li::before {
	content: "•";
	color: var(--oiyaa-blue);
	font-weight: bold;
	position: absolute;
	left: 0;
	font-size: 1.2rem;
}

.core-solution-item .btn {
	background-color: var(--oiyaa-blue);
	color: white;
	border: none;
	padding: 0.875rem 2.5rem;
	border-radius: var(--radius-pill);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
}

.core-solution-item .btn:hover {
	background-color: #1a4a7a;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(21, 63, 105, 0.3);
}

/* Custom container width adjustments */
.content-section .container-fluid {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* NOTE: Responsive styles for container-fluid are in the consolidated media queries section at the bottom */

/* Section-specific container width adjustments */
.infrastructure-section .container-fluid {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

.ecosystem-section .container-fluid {
	/* max-width: 1400px; */
	margin: 0 auto;
	padding: 0 2rem;
}

.core-solutions-section .container-fluid {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

.industries-section .container-fluid {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

.implementation-section .container-fluid {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

.cta-section .container-fluid {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Solutions grid section maintains full width */
.solutions-grid-section .container-fluid {
	padding: 0 2rem;
}

/* NOTE: All responsive styles for sections and core solutions are in the consolidated media queries section at the bottom */

/* Alternative wave background class */
.wave-bg {
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='%23ffffff' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,192C384,192,480,160,576,149.3C672,139,768,149,864,165.3C960,181,1056,203,1152,202.7C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'></path></svg>") no-repeat bottom;
	background-size: cover;
}

/* Wave container for HTML-based approach */
.wave-container {
	position: relative;
	overflow: hidden;
}

.wave-container::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path fill='%23ffffff' fill-opacity='1' d='M0,128L48,144C96,160,192,192,288,192C384,192,480,160,576,149.3C672,139,768,149,864,165.3C960,181,1056,203,1152,202.7C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'></path></svg>") no-repeat bottom;
	background-size: cover;
}

/* ========================================================================
   CONSOLIDATED RESPONSIVE MEDIA QUERIES
   All responsive adjustments organized by breakpoint for better maintainability
======================================================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {
	.page-header .hero-content {
		padding-bottom: 4rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.page-header .hero-content {
		padding-bottom: 6rem;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.page-header .hero-content {
		padding-bottom: 10rem;
	}

	.solution-card-new {
		background: white;
		border-radius: 12px;
		padding: 2.5rem 2rem;
		text-align: center;
		min-height: 300px;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: center;
	}
}


/* Medium to Large Tablets and Small Desktops: 992px and below */
@media (max-width: 992px) {

	/* Core Solutions Mobile Responsiveness */
	.core-solution-item {
		flex-direction: column !important;
		gap: 2rem;
		margin-bottom: 3rem;
		padding: 2rem 1.5rem;
	}

	.core-solution-item:nth-child(even) {
		flex-direction: column !important;
	}

	.core-solution-content {
		padding: 0;
		text-align: center;
	}

	.core-solution-image {
		max-width: 100%;
		order: -1;
	}

	.core-solution-item h4 {
		font-size: 1.75rem;
		margin-bottom: 1rem;
	}

	.core-solution-item p {
		font-size: 1rem;
		margin-bottom: 1.5rem;
	}

	.core-solution-item ul {
		margin-bottom: 2rem;
		text-align: left;
		display: inline-block;
	}

	/* Core Solution Button Responsive - Medium Screens */
	.core-solution-item .btn {
		padding: 0.8rem 2.25rem;
		font-size: 0.875rem;
		margin-top: 1.25rem;
		display: block;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	/* Page Header with Smaller SVG Wave */
	.page-header {
		padding: 2.5rem 2rem 5rem 2rem;
		min-height: 200px;
		/* Use a smaller, more compact SVG wave for medium screens */
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,160L80,149.3C160,139,320,117,480,122.7C640,128,800,160,960,165.3C1120,171,1280,149,1360,138.7L1440,128L1440,200L1360,200C1280,200,1120,200,960,200C800,200,640,200,480,200C320,200,160,200,80,200L0,200Z' fill='%23ffffff'></path></svg>");
		background-size: 100% auto;
		background-position: bottom center;
	}

	.hero-title {
		font-size: 2.5rem;
	}

	.hero-text {
		font-size: 1.15rem;
	}
}



/* Tablets and Large Mobile: 768px and below */
@media (max-width: 768px) {

	/* Content Section Adjustments */
	.content-section {
		margin-top: 3rem;
	}

	/* Hero Section Responsive */
	.hero-title {
		font-size: 2rem;
	}

	.hero-text {
		font-size: 1.1rem;
	}

	.page-header {
		padding: 2rem 1rem 6rem 1rem;
		background-size: 100% auto;
		background-position: bottom center;
		min-height: 250px;
	}


	/* Quote Box Responsive */
	.quote-box {
		padding: 2rem;
		margin: 2rem 0;
	}

	.quote-mark {
		font-size: 4rem;
		top: -0.5rem;
	}

	.quote-text {
		font-size: 1rem;
		margin: 1.5rem 0 0 0;
	}

	/* Solutions Ecosystem Responsive */
	.solutions-ecosystem {
		padding: 2rem 1rem !important;
		min-height: 140px;
	}

	/* Solutions Grid Responsive */
	.solutions-grid-container {
		margin: 2rem 0 3rem 0;
		padding: 1.5rem 0;
	}

	.solutions-carousel.owl-carousel {
		padding: 1.5rem 1rem;
	}

	.solutions-carousel .owl-nav button {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.solutions-carousel .owl-nav button.owl-prev {
		left: 5px;
	}

	.solutions-carousel .owl-nav button.owl-next {
		right: 5px;
	}

	.solution-card-new {
		padding: 1.5rem;
	}

	.solution-card-new h3 {
		font-size: 1.1rem;
	}

	.solution-card-new p {
		font-size: 0.9rem;
	}

	.solution-icon {
		width: 60px;
		height: 60px;
		font-size: 1.8rem;
	}

	/* Core Solution Button Responsive - Tablet */
	.core-solution-item .btn {
		padding: 0.75rem 2rem;
		font-size: 0.875rem;
		margin-top: 1rem;
		display: block;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 576px) {
	.ecosystem-title {
		font-size: 1.75rem;
		margin-bottom: 1rem;
	}

	.ecosystem-description {
		font-size: 1rem;
		padding: 0 1rem;
	}

	.solutions-ecosystem {
		padding: 2rem 1rem !important;
		min-height: 160px;
	}

	/* Page Header Mobile Optimized */
	.page-header {
		padding: 1.5rem 1rem 5rem 1rem;
		background-size: 100% auto;
		background-position: bottom center;
		min-height: 200px;
		/* Use a simpler wave pattern for mobile */
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'><path d='M0,256L48,240C96,224,192,192,288,181.3C384,171,480,181,576,186.7C672,192,768,192,864,181.3C960,171,1056,149,1152,149.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z' fill='%23ffffff'></path></svg>");
		background-repeat: no-repeat;
	}


	.hero-title {
		font-size: 1.8rem;
	}

	/* Quote Box Mobile */
	.quote-box {
		padding: 1.5rem;
		margin: 1.5rem 0;
	}

	.quote-mark {
		font-size: 3rem;
		top: -0.25rem;
	}

	.quote-text {
		font-size: 0.95rem;
		margin: 1rem 0 0 0;
	}

	/* Solutions Grid Mobile */
	.solutions-grid-container {
		margin: 1.5rem 0 2rem 0;
		padding: 1rem 0;
	}

	.solutions-track {
		gap: 1rem;
		padding: 0 0.5rem;
	}

	.solution-card-new {
		min-width: 260px;
		max-width: 300px;
		padding: 1.25rem;
	}

	.solution-card-new h3 {
		font-size: 1rem;
	}

	.solution-card-new p {
		font-size: 0.85rem;
	}

	.solution-icon {
		width: 50px;
		height: 50px;
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}

	/* Container Fluid Mobile */
	.content-section .container-fluid {
		padding: 0 0.5rem;
	}

	.infrastructure-section .container-fluid,
	.ecosystem-section .container-fluid,
	.core-solutions-section .container-fluid,
	.industries-section .container-fluid,
	.implementation-section .container-fluid,
	.cta-section .container-fluid {
		padding: 0 0.5rem;
	}

	.solutions-grid-section .container-fluid {
		padding: 0 0.5rem;
	}

	/* Core Solutions Mobile */
	.core-solution-item {
		gap: 1rem;
		margin-bottom: 2rem;
		padding: 1rem 0.75rem;
	}

	.core-solution-item h4 {
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
	}

	.core-solution-item p {
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}

	.core-solution-item ul {
		margin-bottom: 1.5rem;
	}

	.core-solution-item ul li {
		font-size: 0.85rem;
		margin-bottom: 0.4rem;
		padding-left: 1.2rem;
	}

	.core-solution-item .btn {
		padding: 0.75rem 2rem;
		font-size: 0.85rem;
		margin-top: 1.5rem;
		display: block;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	.core-solution-image img {
		max-width: 280px;
	}

	.page-header .hero-content {
		padding-bottom: 10rem;
	}

	.solution-card-new {
		background: white;
		border-radius: 12px;
		padding: 2.5rem 2rem;
		text-align: center;
		min-height: 300px;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: center;
	}
}

/* Extra Small Mobile Devices: 480px and below */
@media (max-width: 480px) {
	.page-header {
		padding: 1.5rem 0.75rem 4.5rem 0.75rem;
		background-size: 100% auto;
		background-position: bottom center;
		min-height: 180px;
	}


	.hero-title {
		font-size: 1.6rem;
		line-height: 1.3;
	}

	.hero-text {
		font-size: 0.9rem;
	}

	.quote-box {
		padding: 1.25rem;
		margin: 1.25rem 0;
	}

	.quote-mark {
		font-size: 2.5rem;
		top: -0.125rem;
	}

	.quote-text {
		font-size: 0.9rem;
		margin: 0.75rem 0 0 0;
	}
}

/* High Contrast Mode for Accessibility */
@media (forced-colors: active) {

	.solutions-ecosystem,
	.eco-component,
	.ecosystem-highlight {
		border: 2px solid ButtonText;
	}

	.ecosystem-title,
	.component-title,
	.highlight-text,
	.ecosystem-description,
	.eco-component p {
		color: ButtonText !important;
		text-shadow: none;
	}
}

/* ========================================================================
   RESPONSIVE STYLES FOR IMPLEMENTATION PROCESS
======================================================================== */

/* Medium screens and tablets: 992px and below */
@media (max-width: 992px) {
	.process-timeline::before {
		left: 39px; /* Center of 80px circle (80/2 = 40, minus 1px for line width) */
		top: 40px; /* Start from center of first smaller circle */
		bottom: 40px; /* End at center of last smaller circle */
	}
	
	.process-step-circle {
		width: 80px;
		height: 80px;
		margin-right: 2rem;
	}
	
	.process-step-circle::before {
		width: 60px;
		height: 60px;
	}
	
	.process-step-circle::after {
		width: 80px;
		height: 80px;
	}
	
	.process-icon {
		font-size: 1.5rem;
	}
	
	.step-number {
		width: 28px;
		height: 28px;
		font-size: 0.75rem;
	}
	
	.process-title {
		font-size: 1.25rem;
	}
}

/* Small tablets and large phones: 768px and below */
@media (max-width: 768px) {
	.process-timeline {
		padding: 1rem 0;
	}
	
	.process-timeline::before {
		display: none;
	}
	
	.process-step-modern {
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-bottom: 3rem;
	}
	
	.process-step-circle {
		margin-right: 0;
		margin-bottom: 1.5rem;
		width: 100px;
		height: 100px;
	}
	
	.process-step-circle::before {
		width: 70px;
		height: 70px;
	}
	
	.process-step-circle::after {
		width: 90px;
		height: 90px;
	}
	
	.process-content {
		margin-top: 0;
		padding: 1.5rem;
	}
	
	.process-content::before {
		display: none;
	}
	
	.process-features {
		text-align: left;
		display: inline-block;
	}
	
	.timeline-progress {
		padding: 0 20px;
	}
}

/* Mobile phones: 576px and below */
@media (max-width: 576px) {
	.implementation-section {
		padding: 3rem 0;
	}
	
	.process-step-circle {
		width: 80px;
		height: 80px;
	}
	
	.process-step-circle::before {
		width: 60px;
		height: 60px;
		box-shadow: 
			0 4px 16px rgba(21, 63, 105, 0.3),
			0 0 0 4px rgba(175, 210, 238, 0.2);
	}
	
	.process-step-circle::after {
		width: 70px;
		height: 70px;
	}
	
	.process-icon {
		font-size: 1.25rem;
	}
	
	.step-number {
		width: 24px;
		height: 24px;
		font-size: 0.7rem;
		bottom: -2px;
		right: -2px;
	}
	
	.process-content {
		padding: 1.25rem;
	}
	
	.process-title {
		font-size: 1.15rem;
		margin-bottom: 0.5rem;
	}
	
	.process-description {
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}
	
	.process-features li {
		font-size: 0.85rem;
		margin-bottom: 0.4rem;
	}
	
	/* Hover effects disabled on mobile */
	.process-step-modern:hover .process-step-circle::before,
	.process-step-modern:hover .process-content,
	.process-step-modern:hover .process-icon {
		transform: none;
		box-shadow: inherit;
	}
}

/* API Features Carousel Styles */
.api-features-carousel.owl-carousel {
	position: relative;
	padding: 0 60px;
}

.api-features-carousel.owl-carousel .owl-stage-outer {
	overflow: visible;
}

.api-features-carousel .owl-stage {
	display: flex;
	align-items: stretch;
}

.api-features-carousel .owl-item {
	display: flex;
	align-items: stretch;
	height: auto;
}

.api-features-carousel .owl-item>div {
	width: 100%;
	height: 100%;
}

.api-features-carousel .owl-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.api-features-carousel .owl-nav button {
	width: 50px;
	height: 50px;
	background: white !important;
	border-radius: 50%;
	box-shadow: 0 4px 15px rgba(21, 63, 105, 0.15);
	color: var(--oiyaa-blue) !important;
	font-size: 18px;
	border: 1px solid rgba(175, 210, 238, 0.3);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.api-features-carousel .owl-nav button:hover {
	background: var(--oiyaa-blue) !important;
	color: white !important;
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(21, 63, 105, 0.25);
}

.api-features-carousel .owl-nav button.owl-prev {
	left: -60px;
}

.api-features-carousel .owl-nav button.owl-next {
	right: -60px;
}

.api-features-carousel .owl-dots {
	text-align: center;
	margin-top: 2rem;
}

.api-features-carousel .owl-dots .owl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(21, 63, 105, 0.3);
	margin: 0 6px;
	border: none;
	transition: all 0.3s ease;
}

.api-features-carousel .owl-dots .owl-dot.active,
.api-features-carousel .owl-dots .owl-dot:hover {
	background: var(--oiyaa-blue);
	transform: scale(1.2);
}

/* Contact Methods Carousel Styles */
.contact-methods-carousel.owl-carousel {
	position: relative;
	padding: 0 60px;
}

.contact-methods-carousel.owl-carousel .owl-stage-outer {
	overflow: visible;
}

.contact-methods-carousel .owl-stage {
	display: flex;
	align-items: stretch;
}

.contact-methods-carousel .owl-item {
	display: flex;
	align-items: stretch;
	height: auto;
}

.contact-methods-carousel .owl-item>div {
	width: 100%;
	height: 100%;
}

.contact-methods-carousel .owl-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.contact-methods-carousel .owl-nav button {
	width: 50px;
	height: 50px;
	background: white !important;
	border-radius: 50%;
	box-shadow: 0 4px 15px rgba(21, 63, 105, 0.15);
	color: var(--oiyaa-blue) !important;
	font-size: 18px;
	border: 1px solid rgba(175, 210, 238, 0.3);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-methods-carousel .owl-nav button:hover {
	background: var(--oiyaa-blue) !important;
	color: white !important;
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(21, 63, 105, 0.25);
}

.contact-methods-carousel .owl-nav button.owl-prev {
	left: -60px;
}

.contact-methods-carousel .owl-nav button.owl-next {
	right: -60px;
}

.contact-methods-carousel .owl-dots {
	text-align: center;
	margin-top: 2rem;
}

.contact-methods-carousel .owl-dots .owl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(21, 63, 105, 0.3);
	margin: 0 6px;
	border: none;
	transition: all 0.3s ease;
}

.contact-methods-carousel .owl-dots .owl-dot.active,
.contact-methods-carousel .owl-dots .owl-dot:hover {
	background: var(--oiyaa-blue);
	transform: scale(1.2);
}

/* API Feature Card and Contact Method Card Styles */
.api-feature-card,
.contact-method-card {
	width: 100%;
	height: 100%;
}

.api-features-container,
.contact-methods-container {
	position: relative;
}

/* Portal Features Carousel Styles */
.portal-features-carousel.owl-carousel {
	position: relative;
	padding: 0 60px;
}

.portal-features-carousel.owl-carousel .owl-stage-outer {
	overflow: visible;
}

.portal-features-carousel .owl-stage {
	display: flex;
	align-items: stretch;
}

.portal-features-carousel .owl-item {
	display: flex;
	align-items: stretch;
	height: auto;
}

.portal-features-carousel .owl-item>div {
	width: 100%;
	height: 100%;
}

.portal-features-carousel .owl-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.portal-features-carousel .owl-nav button {
	width: 50px;
	height: 50px;
	background: white !important;
	border-radius: 50%;
	box-shadow: 0 4px 15px rgba(21, 63, 105, 0.15);
	color: var(--oiyaa-blue) !important;
	font-size: 18px;
	border: 1px solid rgba(175, 210, 238, 0.3);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.portal-features-carousel .owl-nav button:hover {
	background: var(--oiyaa-blue) !important;
	color: white !important;
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(21, 63, 105, 0.25);
}

.portal-features-carousel .owl-nav button.owl-prev {
	left: -60px;
}

.portal-features-carousel .owl-nav button.owl-next {
	right: -60px;
}

.portal-features-carousel .owl-dots {
	text-align: center;
	margin-top: 2rem;
}

.portal-features-carousel .owl-dots .owl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(21, 63, 105, 0.3);
	margin: 0 6px;
	border: none;
	transition: all 0.3s ease;
}

.portal-features-carousel .owl-dots .owl-dot.active,
.portal-features-carousel .owl-dots .owl-dot:hover {
	background: var(--oiyaa-blue);
	transform: scale(1.2);
}

/* Portal Features Carousel Mobile Adjustments */
@media (max-width: 768px) {
	.portal-features-carousel.owl-carousel {
		padding: 0 20px;
	}
	
	.portal-features-carousel .owl-nav button.owl-prev {
		left: -20px;
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
	
	.portal-features-carousel .owl-nav button.owl-next {
		right: -20px;
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
	
	.portal-features-carousel .owl-dots {
		margin-top: 1.5rem;
	}
	
	.portal-features-carousel .owl-dots .owl-dot {
		width: 10px;
		height: 10px;
		margin: 0 4px;
	}
}

/* Mobile phones: 576px and below */
@media (max-width: 576px) {
	/* Portal Features Carousel Extra Small Mobile Adjustments */
	.portal-features-carousel.owl-carousel {
		padding: 0 15px;
	}
	
	.portal-features-carousel .owl-nav button.owl-prev,
	.portal-features-carousel .owl-nav button.owl-next {
		width: 35px;
		height: 35px;
		font-size: 12px;
	}
	
	.portal-features-carousel .owl-nav button.owl-prev {
		left: -15px;
	}
	
	.portal-features-carousel .owl-nav button.owl-next {
		right: -15px;
	}
	
	.portal-features-carousel .owl-dots .owl-dot {
		width: 8px;
		height: 8px;
		margin: 0 3px;
	}
}

/* Benefits Carousel - Equal Height Cards */
.benefits-carousel-container {
	margin: 3rem 0;
}

.benefits-carousel .owl-stage-outer {
	overflow: visible;
}

.benefits-carousel .owl-stage {
	display: flex;
	align-items: stretch;
}

.benefits-carousel .owl-item {
	display: flex;
	height: auto;
}

.benefits-carousel .item {
	display: flex;
	width: 100%;
	height: 100%;
}

.benefits-carousel .solution-card-template {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px; /* Set minimum height for consistency */
	width: 100%;
}

.benefits-carousel .solution-card-template h4 {
	flex-shrink: 0;
	margin-bottom: 1rem;
}

.benefits-carousel .solution-card-template p {
	flex-grow: 1;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

/* Ensure equal heights across all visible items */
.benefits-carousel .owl-item.active {
	height: auto;
}

.benefits-carousel .owl-item.active .item {
	height: 100%;
}

/* Override any conflicting Owl Carousel styles */
.benefits-carousel .owl-item {
	float: none !important;
}

.benefits-carousel .owl-dots {
	text-align: center;
	margin-top: 2rem;
}

.benefits-carousel .owl-dots .owl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(21, 63, 105, 0.3);
	margin: 0 5px;
	transition: all 0.3s ease;
}

.benefits-carousel .owl-dots .owl-dot.active,
.benefits-carousel .owl-dots .owl-dot:hover {
	background: var(--oiyaa-blue);
}