/* .open-sans {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
}
 */


/* 1. Heading Font Stack (Outfit & Sora) */
h1, h2, h3, .heading-style {
    font-family: "Outfit", Sora;
    font-weight: 700;
    line-height: 1.2;
}

/* 2. Body Font Stack (Manrope & Urbanist) */
body, p, .body-style, span {
    font-family: "Manrope", Urbanist;
    font-weight: 400;
    line-height: 1.6;
}

main,
.content-wrapper {
	margin-top: var(--header-height, 70px);
}

/* body {
	font-family: "Open Sans", sans-serif;
} */

* {
	/* cursor: none; */
	/* Hide original mouse */
}

.cursor {
	width: 25px;
	height: 25px;
	background-color: #4d43fe;
	/* The yellow/gold from your image */
	border-radius: 50%;
	position: fixed;
	/* Better than absolute for custom cursors */
	pointer-events: none;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	/* Only transition transform/size, not top/left to avoid lag */
	transition: transform 0.1s ease, background-color 0.2s;
	transform: translate(-50%, -50%);
}

/* Small inner point */
.center-point {
	width: 4px;
	height: 4px;
	background-color: rgba(0, 0, 0, 0.5);
	/* Semi-transparent black dot */
	border-radius: 50%;
}

/* Hovering over links */
.cursor-hover {
	transform: translate(-50%, -50%) scale(1.5);
	background-color: #4d43fe;
}

/* Clicking effect */
.cursor-click {
	transform: translate(-50%, -50%) scale(0.8);
}


#site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 30px 6%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 9999;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	background: transparent;
}

/* Super.money Scroll Effect */
#site-header.scrolled {
	padding: 15px 6%;
	background: rgba(5, 5, 5, 0.6) !important;
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
}

/* Style for the logo link container */
.header-logo a {
/* 	display: inline-block; */
	text-decoration: none;
	color: inherit;
	/* For the site title text */
}

/* Ensure the image doesn't explode the header size */
.header-logo img {
	max-height: 50px;
	/* Adjust this to match your design */
	width: auto;
	display: block;
}

/* Style for the text fallback (Site Title) */
.site-title {
	font-size: 24px;
	font-weight: bold;
	margin: 0;
}

.header-logo {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff !important;
	text-decoration: none;
	letter-spacing: -1px;
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 35px;
}

.header-nav a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: 0.3s;
}

.header-nav a:hover {
	color: #fff;
}

.header-cta {
	background: #fff;
	color: #000 !important;
	padding: 10px 22px;
	border-radius: 50px;
	font-weight: 600;
}

@media (max-width: 768px) {
	.header-nav {
		/* display: none; */
	}

	/* Hide for mobile simplified */
}


.rayo-hero {
	position: relative;
	height: 100vh;
	width: 100%;
	background-color: #050505;
	background: radial-gradient(circle at top right, #1a1a1a 0%, #050505 70%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 5%;
	margin: 0;
}

.hero-badge {
	font-size: 0.7rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	margin-bottom: 25px;
	color: #888;
	font-family: "Manrope", Urbanist;
}

.hero-title {
	font-size: clamp(2.8rem, 9vw, 6.5rem);
	font-weight: 800;
	line-height: 1.05;
	color: #fff;
	margin: 0;
	max-width: 1100px;
	/* Rayo Gradient Text Effect */
	background: linear-gradient(180deg, #FFFFFF 30%, rgba(255, 255, 255, 0.3) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-subtitle {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: #8f8f8f;
	max-width: 550px;
	margin-top: 30px;
	line-height: 1.6;
}

.hero-btns {
	margin-top: 40px;
	display: flex;
	gap: 15px;
}

.btn-main {
	background: #fff;
	color: #000;
	padding: 16px 35px;
	border-radius: 50px;
	font-weight: 600;
	text-decoration: none;
	transition: 0.3s;
}

@media (max-width: 768px) {
	.rayo-hero {
		height: auto;
		padding: 150px 5% 80px 5%;
	}

	.hero-btns {
		flex-direction: column;
		width: 100%;
		max-width: 250px;
	}
}


.hero-wrapper {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: #f8f7f4;
	/* Off-white Rayo background */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Floating 3D Objects --- */
.obj {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	animation: float 6s ease-in-out infinite;
}

.obj-1 {
	top: 15%;
	left: 5%;
	width: 180px;
}

/* Large brain/abstract object */
.obj-2 {
	top: 68%;
	left: 77%;
	width: 120px;
	animation-delay: -2s;
}

/* Cube object */
.obj-3 {
	top: 10%;
	right: 15%;
	width: 100px;
	animation-delay: -4s;
}

/* Top sphere */

@keyframes float {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-20px) rotate(5deg);
	}
}

/* --- Main Text Reveal --- */
.hero-main-text {
	position: relative;
	z-index: 2;
	padding-left: 8%;
	max-width: 1200px;
}

.hero-main-text h1 {
	font-size: clamp(3.5rem, 12vw, 9rem);
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -3px;
	color: #4d43fe;
	margin: 10px 0;
}

.purple-pill {
	background: #a29bfe;
	color: #fff;
	padding: 0 40px;
	border-radius: 200px;
	display: inline-block;
	margin-left: -10px;
}

.fade-in {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeInUp 1s forwards ease-out;
}

.delay-1 {
	animation-delay: 0.3s;
}

.delay-2 {
	animation-delay: 0.6s;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Right-to-Left Marquee --- */
.marquee-section {
	position: absolute;
	bottom: 50px;
	width: 100%;
	border-top: 1px dashed #ccc;
	padding-top: 20px;
}

.marquee-content {
	display: flex;
	white-space: nowrap;
	animation: marqueeScroll 30s linear infinite;
}

.marquee-item {
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	color: #555;
	padding-right: 100px;
	display: flex;
	align-items: center;
}

.marquee-item::before {
	content: "★";
	margin-right: 10px;
	color: #000;
}

.purple-pill-marquee {
	display: inline-flex;
	vertical-align: middle;
	background-color: #A3A3FF;
	color: white;
	border-radius: 100px;
	/* Pill shape */
	overflow: hidden;
	width: 338px;
	position: relative;
	margin: 0 10px;
	/* Ensure the pill height matches the large font size */
	height: 110px;
	align-items: center;
}

@media(max-width:768px) {
	.purple-pill-marquee {
		width: 227px;
        height: 75px;
		margin: 0;
		margin-top: 10px;
	}
}

.marquee-track {
	display: flex;
	width: max-content;
	/* Vital: prevents the text from wrapping or gapping */
	white-space: nowrap;
	will-change: transform;
	animation: scroll-right 8s linear infinite;
	/* Adjusted time for smoother flow */
}

.marquee-track span {
	font-size: 76px;
	font-weight: 600;
	padding-right: 40px;
	/* Space between words */
	display: flex;
	align-items: center;
}


@keyframes scroll-right {
	0% {
		/* Start with the track shifted left so the 'window' is full */
		transform: translateX(-50%);
	}

	100% {
		/* Move it back to the original position */
		transform: translateX(0);
	}
}


/* Website Section */

.premium-stats-section {
	padding: 80px 5%;
	background-color: #f9f9f9;
}

.stats-container {
	display: flex;
	gap: 30px;
	max-width: 1300px;
	margin: 0 auto;
}

.stat-card {
	flex: 1;
	background: #fff;
	border-radius: 40px;
	padding: 50px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.stat-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Typography */
.stat-info {
	max-width: 50%;
	z-index: 2;
}

.stat-number {
	font-size: 110px;
	font-weight: 800;
	margin: 0;
	line-height: 1;
}

.stat-number span {
	color: #333;
	font-size: 80px;
}

.stat-desc {
	font-size: 18px;
	color: #555;
	margin: 20px 0 40px;
	line-height: 1.4;
}

/* Buttons */
.stat-btn {
	display: inline-flex;
	align-items: center;
	padding: 15px 30px;
	border: 2px solid #000;
	border-radius: 50px;
	text-decoration: none;
	color: #000;
	font-weight: 600;
	transition: all 0.3s ease;
}

.stat-btn:hover {
	background: #000;
	color: #fff;
}

.arrow {
	margin-left: 10px;
	font-size: 20px;
}

/* Image Floating Effect */
.stat-image {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60%;
	height: 100%;
	pointer-events: none;
}

.stat-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom right;
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.stat-card:hover .stat-image img {
	transform: scale(1.05) translate(-10px, -10px);
}

/* Responsive Code */
@media (max-width: 1024px) {
	.stats-container {
		flex-direction: column;
	}

	.stat-card {
		padding: 40px;
		min-height: 400px;
	}

	.stat-number {
		font-size: 80px;
	}
}


/* Custom utility for the exact rounded look in your image */
.rounded-40 {
	border-radius: 40px !important;
}

.stat-card {
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	min-height: 450px;
}

.stat-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1) !important;
}

/* Typography Scale */
.display-1 {
	font-size: 56px;
	/* Responsive large font */
	letter-spacing: -2px;
}

.stat-card p.text-muted{
    font-weight: 600;
}

.stat-number span {
	font-size: 0.7em;
	vertical-align: top;
	/* margin-left: -5px; */
}

/* 3D Image Positioning */
.stat-img-container {
	width: 100%;
	pointer-events: none;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.floating-img {
	height: 90%;
	object-fit: contain;
	transition: transform 0.6s ease-out;
	transform-origin: bottom right;
}

.stat-card:hover .floating-img {
	transform: scale(1.08) translate(-10px, -10px);
}

.z-index-2 {
	position: relative;
	z-index: 2;
}


.rayo-btn {
	display: inline-flex;
	align-items: center;
	padding: 1px 26px;
	font-size: 18px;
	font-weight: 600;
	color: #000;
	/* Initial text color */
	text-decoration: none;
	border: 2px solid #000;
	border-radius: 50px;
	/* Perfect pill shape */
	position: relative;
	overflow: hidden;
	/* Clips the background fill */
	z-index: 1;
	transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The background fill layer */
.rayo-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	/* The color it fills with */
	transform: scaleX(0);
	/* Start hidden (zero width) */
	transform-origin: right;
	/* Fills from left to right */
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
	/* Sits behind the text */
}

/* Hover States */
.rayo-btn:hover {
	color: #fff;
	/* Text turns white */
}


.rayo-btn:hover::before {
	transform: scaleX(1);
	/* Expands to full width */
	transform-origin: left;
}

/* Arrow Animation */
.rayo-btn i {
	transition: transform 0.4s ease;
}

.rayo-btn:hover i {
	transform: rotate(45deg);
	/* Slight rotation for a creative touch */
}


/* Ensure the text stays above the image */
.z-3 {
	z-index: 3;
	position: relative;
}

/* Image Container: Absolute to the card, not the row */
.stat-img-container {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60%;
	/* Adjust width to prevent overlapping text */
	height: 100%;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	pointer-events: none;
	/* Allows clicks to pass through to buttons */
}

.floating-img {
	max-width: 100%;
	max-height: 90%;
	object-fit: contain;
	transition: transform 0.6s ease;
	/* This ensures the image cuts off at the card border */
	transform-origin: bottom right;
}

/* Hover effect for the image */
.stat-card:hover .floating-img {
	transform: scale(1.05) translate(-10px, -10px);
}

/* Fix for the button alignment in a row if needed */
.rayo-btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}


button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 0;
	vertical-align: middle;
	text-decoration: none;
	background: transparent;
	padding: 0;
	font-size: inherit;
	font-family: "Manrope", Urbanist;
}

button.learn-more {
	width: 12rem;
	height: auto;
}

button.learn-more .circle {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: relative;
	display: block;
	margin: 0;
	width: 3rem;
	height: 3rem;
	background: #282936;
	border-radius: 1.625rem;
}

button.learn-more .circle .icon {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff;
}

button.learn-more .circle .icon.arrow {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}

button.learn-more .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -0.25rem;
	right: 0.0625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-top: 0.125rem solid #fff;
	border-right: 0.125rem solid #fff;
	transform: rotate(45deg);
}

button.learn-more .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 0;
	margin: 0 0 0 1.85rem;
	color: #282936;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

button:hover .circle {
	width: 100%;
}

button:hover .circle .icon.arrow {
	background: #fff;
	transform: translate(1rem, 0);
}

button:hover .button-text {
	color: #fff;
}

.who-we-are {
	padding: 60px 0;
	background-color: #ffffff;
}

/* The Orange Dot */

/* Sidebar Label Text */
.label-text {
	font-size: 28px;
	/* letter-spacing: 1px; */
	color: #333;
	font-weight: 700;
}

/* Large Main Heading */
.main-heading {
	font-size: 28px;
	line-height: 1.2;
	color: #4d43fe;
	letter-spacing: -1px;
}

/* Responsive adjustment for small screens */
@media (max-width: 768px) {
	.main-heading {
		font-size: 1.75rem;
	}
	.testimonial-card{
		    max-width: 341px !important;
		    min-height: 215px !important; 
	}
}


/* General fix for all devices */
.featured-section {
	/* padding-top: 80px;
	padding-bottom: 80px; */
	padding: 60px 0;
}

/* Mobile specific adjustment (smaller screens need less padding) */
@media (max-width: 768px) {
	.featured-section {
		padding: 60px 0;
		/* padding-top: 50px; */
	}
	.who-we-are
	{
		padding: 60px 10px;
	}
	.container
	{
		gap:0 !important;
	}
}

.container {
	display: flex;
	gap: 50px;
	align-items: flex-start;
	position: relative; /* This creates the 'anchor' */
  	width: 100%;
	/* Crucial for sticky to work */
}


/* LEFT SIDE STYLING */
.left-content {
	flex: 1;
	position: sticky;
	top: 134px;
	/* Distance from top when it starts sticking */
}


/* This targets tablets and mobile phones */
@media (max-width: 1024px) {
    .cursor {
        display: none !important;
    }
}


.sticky-wrapper {
	max-width: 400px;
}

.title {
	font-size: 56px;
	line-height: 0.9;
	font-weight: 700;
	margin-bottom: 20px;
	color: #1a1a1a;
}

.description {
	font-size: 22px;
	color: #4d43fe;
	margin-bottom: 40px;
	line-height: 1.1;
	font-weight: 500;
}

.btn-all-works {
	display: inline-block;
	padding: 15px 35px;
	border: 1px solid #1a1a1a;
	border-radius: 50px;
	text-decoration: none;
	color: #1a1a1a;
	font-weight: 500;
	transition: 0.3s;
}

.btn-all-works:hover {
	background: #1a1a1a;
	color: #fff;
}

/* RIGHT SIDE STYLING */
/* Update the Right Content Styles */
.right-content {
	flex: 1.5;
}

.service-card {
	width: 100%;
	margin-bottom: 80px;
	/* Increased spacing between projects */
}

.image-box {
	width: 100%;
	border-radius: 40px;
	/* Rounded corners like the image */
	overflow: hidden;
	background: #e0e0e0;
	aspect-ratio: 16 / 10;
	margin-bottom: 16px;
	/* Space between image and its title */
	transition: transform 0.4s ease;
}

/* Optional: Slight lift effect on hover */
.service-card:hover .image-box {
	transform: translateY(-10px);
}

.image-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Styling for the Title below the image */
.card-info h3 {
	font-size: 26px;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 2px;
}

.card-info p {
	font-size: 16px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* RESPONSIVE: Stack on mobile */
@media (max-width: 992px) {
	.left-content {
		position: relative;
		top: 0;
		/* margin-bottom: 50px; */
	}

	.title {
		font-size: 50px;
	}
}


.marquee-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
	transform: rotate(-2deg) scale(1.05);
}

.marquee-row {
	display: flex;
	overflow: hidden;
	padding: 25px 0;
	align-items: center;
}

/* Row Background Colors */
.row-blue {
	background-color: var(--brand-blue);
}

.row-black {
	background-color: var(--bg-black);
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
}

.marquee-content {
	display: flex;
	gap: 60px;
	/* Space between logos */
	animation: scroll-left 40s linear infinite;
}

/* Direction: Left to Right */
.reverse .marquee-content {
	animation: scroll-right 40s linear infinite;
}

.logo-item {
	height: 50px;
	/* Consistent height for all logos */
	width: auto;
	object-fit: contain;
	/* filter: brightness(0) invert(1);  */
}

/* Animation Keyframes */
@keyframes scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@keyframes scroll-right {
	from {
		transform: translateX(-50%);
	}

	to {
		transform: translateX(0);
	}
}


/* Container to hold the whole section */
.company-logo {
	/* background-color: #000000; Deep black background */
	padding: 40px 0;
	overflow: hidden;
	/* CRITICAL: Prevents the slanted rows from causing a horizontal scrollbar */
	width: 100%;
	position: relative;
}


/* Base style for each row */
.marquee-row {
	display: flex;
	white-space: nowrap;
	padding: 30px 0;
	align-items: center;
}

/* Color Options */
.row-blue {
	background-color: #4d43fe;
}

/* Strong Blue */
.row-black {
	background-color: #111111;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
}

/* Animation Setup */
.marquee-content {
	display: flex;
	gap: 100px;
	/* Space between logos */
	animation: scroll-left 30s linear infinite;
}


/* Keyframes for smooth infinite scroll */
@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@keyframes scroll-right {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0);
	}
}


.partner-section {
	background-color: #f9f9f9;
	/* Match the light background in your image */
}

.partner-card {
	background: #ffffff;
	border-radius: 20px;
	/* Rounded corners */
	aspect-ratio: 1 / 1;
	/* Makes them perfect squares */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 0, 0, 0.03);
	/* Subtle border */
}

.partner-card img {
	max-height: 50px;
	filter: grayscale(100%);
	opacity: 0.4;
	/* Soft look from your image */
	transition: all 0.3s ease;
}

/* Hover effect to bring back color and lift the card */
.partner-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	border-color: transparent;
}

.partner-card:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

.tracking-widest {
	letter-spacing: 0.15rem;
}


.review-section {
	overflow-x: hidden;
	background-color: #000;
}

.testimonial-card {
	padding: 30px;
	border-radius: 8px;
	min-height: 250px;
	transition: transform 0.3s ease;
	max-width: 400px;
	margin: 0 auto;
}

/* Background Colors */
.bg-orange {
	background-color: #4d43fe;
	color: #fff;
}

.bg-dark-grey {
	background-color: #1a1a1a;
	color: #fff;
	border: 1px solid #333;
}

/* The Tilted Effect */
/* Rotate odd slides one way, even slides the other */
.swiper-slide:nth-child(odd) .testimonial-card {
	transform: rotate(-3deg);
}

.swiper-slide:nth-child(even) .testimonial-card {
	transform: rotate(2deg);
}

/* Hover effect to straighten them out */
.testimonial-card:hover {
	transform: rotate(0deg) scale(1.05) !important;
	z-index: 10;
}

.swiper-pagination-bullet {
	background: #fff;
}


.swiper {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}

.swiper.mySwiper {
    padding-bottom: 0 !important;
	overflow: visible;
}

.swiper-pagination {
    bottom: 0px; /* or display: none; if you don't want them */
}

.container-footer {
	max-width: 1400px;
	margin: 0 auto;
}


.footer-section {
	position: relative;
	padding: 60px 0 0 0;
	background-color: #ffffff;
	/* Starting color */
	overflow: hidden;
	transition: background-color 0.4s ease;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	padding: 0 5%;
	position: relative;
	z-index: 10;
	/* Keeps form and text above the background */
}

/* Left Column Styling */
.contact-info {
	flex: 1;
	min-width: 300px;
}

.contact-info h4{
	font-size: 28px;
	font-weight: 600;
}


.sub-heading {
	color: var(--primary-yellow);
	font-size: 14px;
}

.contact-info h1 {
	font-size: 32px;
	margin: 20px 0;
	line-height: 1.3;
}

.email-link,
.phone-link {
	display: block;
	font-size: 26px;
	color: #4d43fe;
	font-weight: bold;
}

/* Social Buttons */
.social-icons {
	display: flex;
	gap: 10px;
	margin-top: 30px;
}

.social-btn {
	background: white;
	color: black;
	padding: 8px 15px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 12px;
	transition: 0.3s;
}

.social-btn:hover {
	background: var(--primary-yellow);
}

/* Form Card */
.form-card {
	background: white;
	color: black;
	padding: 40px;
	border-radius: 12px;
	width: 100%;
	max-width: 450px;
}

.form-card input,
.form-card textarea {
	width: 100%;
	background: #eee;
	border: none;
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 5px;
}

.submit-btn {
	background: black;
	color: white;
	padding: 12px 25px;
	border-radius: 30px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
}

@media(max-width:768px) {
	.submit-btn {
		color: #4d43fe;
		font-weight: 700;
	}
}

/* Big Footer Text */
.footer-bottom {
	padding: 20px 5%;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	position: relative;
	z-index: 3;
}


/* Header menu css */

/* Header Controls */
#site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 5%;
	background: transparent;
	width: 100%;
	z-index: 999;
}

.hamburger-btn {
	background: #4d43fe !important;
	border: none !important;
	width: 50px;
	height: 50px;
	border-radius: 50% !important;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.hamburger-btn .line {
	width: 20px;
	height: 2px;
	background: #fff;
	display: block;
}

/* 1. Backdrop */
.rayo-modal-overlay {
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(2px);
    z-index: 999999;
    display: none; align-items: center; justify-content: center;
}

/* 2. Container Box (Limits height for scrolling) */
.rayo-container {
    background: #0d0d0d !important;
    width: 90%; max-width: 1150px;
    max-height: 85vh; /* Box height limit */
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; /* Anchor for sticky close button */
    overflow: hidden; 
}

/* 3. Sticky Close Button Styling */
.close-modal-btn {
    position: absolute !important;
    top: 25px; right: 25px; /* Fixed position in box */
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50%;
    color: #fff !important;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 1005; /* Must be higher than scroll wrapper */
    transition: 0.3s;
}

/* 4. Scrollable Wrapper (Content scrolls UNDER the close button) */
.rayo-scroll-wrapper {
    width: 100%; height: 100%;
    overflow-y: auto;
    padding: 70px 60px;
    scrollbar-width: none; /* Hide for Firefox */
}
.rayo-scroll-wrapper::-webkit-scrollbar { display: none; } /* Hide for Chrome */

/* 5. Layout (Tab & Desktop Side-by-Side) */
.rayo-flex-content {
    display: flex !important;
    gap: 60px;
    /* align-items: flex-start; */
}
.rayo-nav-side { flex: 1.6; }
.rayo-contact-side { 
    flex: 1; 
    padding-left: 60px; 
    /* border-left: 1px solid rgba(255, 255, 255, 0.1);  */
    margin-top: 20px;
}

/* 6. Menu Polish (No Underlines/Dots, Stars on Right) */
.rayo-menu-list, .rayo-menu-list li {
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
}
.rayo-menu-list li a {
    text-decoration: none !important; /* No Underlines */
    font-size: 28px;
    font-weight: 600; 
	color: #fff !important;
    display: flex; 
    justify-content: space-between; /* Stars to the right */
    align-items: center;
    padding: 8px 0;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
}

/* 7. Contact Details */
.contact-label { color: #fff; font-size: 11px; letter-spacing: 2px; margin-bottom: 20px; }
.contact-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.c-icon { color: #fff; font-size: 16px; opacity: 0.7; }
.contact-link { color: #fff !important; text-decoration: none !important; font-size: 19px; }

/* 8. Mobile Fix (Stacking) */
@media (max-width: 991px) {
    .rayo-flex-content { gap: 30px; }
    .rayo-contact-side { padding-left: 8px; }
}

@media (max-width: 767px) {
    .rayo-flex-content { flex-direction: column !important; }
    .rayo-contact-side {
        /* padding-left: 0;  */
		/* border-left: none; */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 20px; 
		width: 100%;
    }
    .rayo-scroll-wrapper 
	{ padding: 20px 0px; }
    .close-modal-btn { 
		position: absolute !important;
			top: 25px;
			right: 16px;
			width: 38px;
			height: 38px;
			background: rgba(255, 255, 255, 0.15) !important;
			border: 1px solid rgba(255, 255, 255, 0.2) !important;
			border-radius: 50%;
			color: #fff !important;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1005;
			transition: 0.3s;
			/* ght: 44px; */
	 }
}

/* 1. Reset WordPress Defaults for the Menu */


/* 3. The Star Icon Style */
.rayo-star {
	/* font-size: 30px !important;
	color: rgba(255, 255, 255, 0.4) !important;
	font-weight: normal !important; */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.rayo-container::-webkit-scrollbar {
	display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
.rayo-container {
	-ms-overflow-style: none !important;
	/* IE and Edge */
	scrollbar-width: none !important;
	/* Firefox */
	overflow-y: auto !important;
}

/* Ensure the body doesn't scroll when menu is open */
body.menu-open {
	overflow: hidden !important;
	height: 100vh !important;
}


/* 4. Responsive Fix for Mobile/Tab */
@media (max-width: 1024px) {
	.rayo-menu-list li a {
		font-size: 28px !important;
		/* Medium size for tablets */
	}
}


/* Mobile Adjustments */
@media (max-width: 991px) {
	.footer-content {
		flex-direction: column;
	}
	.obj-2 {
    top: 66%;
    left: 65%;
	}
	/* .big-branding {
		font-size: 26px;
		transform: scale(2);
	} */
}


/* 6. Tablet & Mobile Adjustments */
@media (max-width: 768px) {
	.rayo-menu-list li a {
		font-size: 28px !important;
	}

	.rayo-container {
		padding: 40px 20px !important;
	}

	.close-modal-btn {
		/* top: 20px !important;
		right: 20px !important; */
	}

	.footer-content {
		flex-direction: column;
	}
}



/* Media Query for Mobile Devices */
@media screen and (max-width: 600px) {
  .big-branding {
    font-size: 34px !important; /* Forces the size smaller for mobile */
    line-height: 1.1 !important; /* Adds a bit of space so letters don't touch */
  }
}


/* 5. Tagline & Promo Text Styling */
.rayo-tagline {
	font-size: 18px !important;
	color: #888 !important;
	margin-bottom: 40px !important;
	line-height: 1.4 !important;
}

.rayo-promo-text p {
	font-size: 20px !important;
	color: #fff !important;
	line-height: 1.5 !important;
}


/* Prevent menu items from overlapping button on small screens */
@media (max-width: 768px) {
	.rayo-container {
		/* padding: 80px 30px 40px 30px; */
		/* Extra top padding for the X */
	}

	.close-modal-btn {
		/* top: 20px !important;
		right: 20px !important;
		font-size: 40px !important; */
	}
	.rayo-menu-list ul{
		margin-left: 0px;
		padding-left: 0px;
	}
}





.big-branding {
	font-size: 62px;
	/* Adjusted for single line safety */
	font-weight: 900;
	/* line-height: 0.9; */
	margin-top: 50px;
	/* text-transform: uppercase; */
	white-space: nowrap;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.2em;
	/* Keeps consistent spacing between words */
	transform: scale(3);
	transform-origin: center bottom;
}

.word-wrapper {
	display: inline-flex;
	justify-content: center;
	position: relative;
	/* Set this width to your longest word (e.g., "DEVELOP") 
       so the 'with us' doesn't move */
	min-width: 5.5ch;
	color: #4d43fe;
}

#flip-word {
	display: inline-block;
	will-change: transform, opacity;
}


/* Scoped Styles to prevent conflicts */
.gateway-marquee-unique {
	--bg-black: #050505;
	--border-color: #1a1a1a;
	--card-w: 248px;
	--card-h: 124px;
	--speed: 35s;

	background-color: var(--bg-black);
	padding: 60px 0;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.gateway-marquee-unique .gm-title {
	color: #ffffff;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 46px;
	opacity: 0.8;
}

.review-section .gm-title{
	color: #ffffff;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 46px;
	opacity: 0.8;
}

/* The outer wrapper that hides the overflow */
.gateway-marquee-unique .gm-viewport {
	display: flex;
	width: 100%;
	position: relative;
	/* Soft fade on left and right edges */
	mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* The moving track */
.gateway-marquee-unique .gm-track {
	display: flex;
	/* Track height is exactly 2x card height to allow staggering */
	height: calc(var(--card-h) * 2);
	animation: gm-scroll-left var(--speed) linear infinite;
	flex-shrink: 0;
}

/* Individual Logo Boxes */
.gateway-marquee-unique .gm-card {
	width: var(--card-w);
	height: var(--card-h);
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: -1px;
	/* Overlap borders for thin line look */
	background: transparent;
}

/* Staggering Logic */
.gateway-marquee-unique .gm-top {
	align-self: flex-start;
}

.gateway-marquee-unique .gm-bottom {
	align-self: flex-end;
}

/* Image styling */
.gateway-marquee-unique .gm-card img {
	max-width: 146px;
	max-height: 68px;
	object-fit: contain;
	/* Forces images to be white/grayscale like the image */
	/* filter: brightness(0) invert(1);  */
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.gateway-marquee-unique .gm-card:hover img {
	opacity: 1;
}

/* Animation Keyframes */
@keyframes gm-scroll-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* Pause when user hovers */
.gateway-marquee-unique .gm-viewport:hover .gm-track {
	animation-play-state: paused;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.gateway-marquee-unique {
/* 		--card-w: 180px;
		--card-h: 120px; */
		padding: 60px 0;
	}
	.tfo-hero-banner{
		min-height: 56vh !important;
	}
	.ter-sub-headline{
/* 		font-size:40px !important; */
	}

}


/* Mobile Optimization */
@media (max-width: 768px) {
	.featured-section .container {
		display: flex;
		flex-direction: column;
		/* Stacks the title above the cards */
		padding: 0 20px;
		/* Prevents content from touching screen edges */
		overflow-x: hidden;
		/* Safety net for horizontal scroll */
	}

	.left-content,
	.right-content {
		width: 100%;
		/* Ensure they take full width */
	}

	.sticky-wrapper {
		position: relative !important;
		/* Disables sticky on mobile for better flow */
		margin-bottom: 40px;
		text-align: left;
	}

	.service-card {
		width: 100%;
		margin-bottom: 30px;
		/* Adds breathing room between cards */
	}

	.service-card img {
		width: 100%;
		/* Makes images responsive */
		height: auto;
		display: block;
	}
}


.hamburger-icon-class {
	/* Replace with your actual class name */
	display: block !important;
	color: #000000;
	/* Or #FFFFFF if your background is dark */
	z-index: 9999;
	/* Brings it to the very front */
	position: relative;
}

.tfo-hero-banner {
        width: 100%;
        min-height: 92vh;
        background: #000; /* Solid black like the image */
        display: flex;
        align-items: center;
        padding: 0 10%;
    }

    .tfo-hero-main-text {
        color: #ffffff;
        font-size: 68px; /* Responsive bold text */
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -2px;
        margin: 0;
    }


	/* Target screens 600px wide or smaller */
		@media screen and (max-width: 768px) {
			h1, .tfo-hero-main-text { 
				font-size: 34px; /* Adjust this number until it fits your screen perfectly */
				line-height: 40px; /* Keeps the spacing between lines readable */
			}
			
		}

    .tfo-changing-word {
        color: #ffffff; /* Accent color for the rotating part */
        display: inline-block;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .tfo-text-fade {
        opacity: 0;
        transform: translateY(15px);
    }


.ter-sub-headline{
	font-size: 28px;
    font-weight: 700;
    line-height: 0.9;
    color: #000;
    margin: 0;
}

	.tfo-content-wrapper { max-width: 1200px; margin: 80px auto; padding: 0 20px; color: #fff; }
    .tfo-section-title { font-size: 3rem; margin-bottom: 40px; border-bottom: 1px solid #333; }
    .tfo-acc-box { border-bottom: 1px solid #222; }
    .tfo-acc-head { 
        width: 100%; padding: 30px 0; background: none; border: none; 
        color: #fff; display: flex; justify-content: space-between; 
        font-size: 1.5rem; cursor: pointer; 
    }
    .tfo-acc-body { 
        max-height: 0; overflow: hidden; transition: max-height 0.4s ease; color: #888; 
    }
    .tfo-acc-box.active .tfo-acc-body { max-height: 200px; padding-bottom: 30px; }
    .tfo-acc-box.active .tfo-plus { transform: rotate(45deg); color: #00ffcc; }


.tfo-banner-hero {
        position: relative;
        width: 100%;
        height: 92vh; /* Adjust height based on your header size */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .tfo-banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Darkens bg for text readability */
        z-index: 1;
    }

    .tfo-banner-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #ffffff;
    }

    .tfo-banner-heading {
        font-size: clamp(2.5rem, 10vw, 5.5rem);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
        margin: 0;
    }

    .tfo-accent-text {
        color: #000000; /* Change this to your brand color */
        display: inline-block;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .tfo-text-fade {
        opacity: 0;
        transform: translateY(10px);
    }

	.tfo-main-container {
        max-width: 1100px;
        margin: 60px auto;
        padding: 0 20px;
    }

    .tfo-details-section {
        margin-bottom: 80px;
    }

    .tfo-details-title {
        font-size: 2.5rem;
        margin-bottom: 30px;
        border-bottom: 2px solid #333;
        padding-bottom: 15px;
        color: #fff;
    }

    .tfo-acc-item {
        border-bottom: 1px solid #222;
    }


/* Accordion Button Styling */
/* Unified Typography */

.tfo-main-wrapper {
    max-width: 1000px; /* Optional: sets a readable width */
    margin: 0 auto;
}

/* Accordion Item */
.tfo-acc-item {
    border-bottom: 2px solid #000; /* Professional thick line */
}

/* The Button / Header */
.tfo-acc-btn {
    width: 100%;
    padding: 30px 0;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between; /* Pushes arrow to the far right */
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

/* Bold Title Styling */
.tfo-acc-title {
    font-size: 22px;
    /* font-weight: 700;  */
    color: #000;
}

/* The Extra Bold Arrow */
.tfo-acc-icon::before {
    font-size: 2.2rem;
    font-weight: 900; /* Maximum boldness for the arrow */
    display: inline-block;
    transition: transform 0.4s ease, color 0.4s ease;
    line-height: 1;
}

/* CLOSED STATE: Down-Left Arrow */
.tfo-acc-icon::before {
    content: "↙";
    color: #000;
}

/* --- ACTIVE / OPEN STATE --- */

/* Yellow Title and Arrow on Open/Hover */
.tfo-acc-item.is-open .tfo-acc-title,
.tfo-acc-btn:hover .tfo-acc-title,
.tfo-acc-btn:hover .tfo-acc-icon::before {
    color: #4d43fe; /* Brand Yellow */
}

/* Arrow Swaps to Up-Right on Open */
.tfo-acc-item.is-open .tfo-acc-icon::before {
    content: "↗";
    color: #4d43fe;
}

/* The Content Panel */
.tfo-acc-panel {
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); /* Smooth snap animation */
}

/* Text inside the panel */
.tfo-acc-content {
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 1.6;
    color: #444;
}


	/* about us section */ 
.ter-section-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    padding: 60px 5%;
    background: #ffffff;
    align-items: start;
}

/* Left side sticky branding */
.ter-branding-col {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

.ter-meet-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 0.9;
    color: #000;
    margin: 0;
}

.ter-yellow-text {
    color: #4d43fe;
    margin-top: 5px;
}

/* Right side content */
.ter-content-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ter-about-header {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    color: #001f3f;
    text-transform: uppercase;
    border-bottom: 6px solid #001f3f;
    width: fit-content;
    margin: 0;
    padding-bottom: 5px;
}

.ter-italic-sub {
    font-size: 20px;
    font-weight: 700;
    color: #001f3f;
    font-style: italic;
    margin: 10px 0 0 0;
}

.ter-para {
    font-size: 18px;
    /* line-height: 1.6; */
    color: #333;
    margin: 0;
	text-align: justify;
}

.ter-bold-blue {
    font-weight: 700;
    color: #001f3f;
}

.ter-footer-quote {
    font-weight: 700;
    font-size: 18px;
    margin-top: 10px;
}

/* Responsive adjustment */
@media (max-width: 992px) {
    .ter-section-wrapper {
        grid-template-columns: 1fr;
		gap: 1px;
    }
    
    .ter-branding-col {
        position: relative;
        top: 0;
        margin-bottom: 20px;
    }
}



.tfo-marquee-section {
    padding: 60px 0;
    background: #fff;
    overflow: hidden; /* Hides the logos when they go off screen */
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.tfo-marquee-container {
    display: flex;
    width: 100%;
}

.tfo-marquee-content {
    display: flex;
    gap: 80px; /* Space between logos */
    animation: tfo-scroll-left 25s linear infinite;
    align-items: center;
}

.tfo-marquee-content img {
    height: 50px; /* Adjust based on your logo sizes */
    width: auto;
    filter: grayscale(100%); /* Optional: Matches the clean black/white agency look */
    opacity: 0.7;
    transition: all 0.3s ease;
}

.tfo-marquee-content img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Keyframes for right to left movement */
@keyframes tfo-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Moves exactly half the width to loop perfectly */
    }
}



.tfo-scroll-marquee-section {
    padding: 60px 0;
    background: #1e1927;
    overflow: hidden;
    /* Bold borders like image 5fc7ba */
    /* border-top: 2px solid #000;
    border-bottom: 2px solid #000; */
}

.tfo-marquee-track {
    display: flex;
    gap: 120px; /* Wider gap for a premium, airy feel */
    white-space: nowrap;
    will-change: transform;
    /* Center the track initially */
    transform: translateX(0);
}

.tfo-marquee-track img {
    height: 50px; /* Standardized height like image 613ae2 */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.tfo-marquee-track img:hover {
    opacity: 1;
    filter: grayscale(0%);
}


/* Unique class for the Contact Page Hero */
/* Banner Container */
.tfo-hero-banner.contact-hero, .service-hero {
    position: relative;
    width: 100%;
    height: 80vh; /* Takes 80% of screen height on Desktop */
    display: flex;
    align-items: center;
    /* justify-content: center; */
    /* Background logic */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    overflow: hidden;
}

/* Ensure the fade animation from your JS is defined */
.tfo-text-fade {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Layout and Spacing */
.terrance-contact-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    background: #ffffff; /* Clean white background */
    color: #000000; /* Primary text black */
}

.contact-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    align-items: flex-start;
}

.details-column {
    flex: 1;
    min-width: 320px;
}

.form-column {
    flex: 1;
    min-width: 320px;
}

/* Typography */
.contact-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.blue-square {
    background: #34a8eb;
    color: #ffffff;
    padding: 5px 12px;
    font-weight: bold;
    font-size: 1.2rem;
}

.title-large {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    color: #000000;
}

.hero-statement {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 40px;
    color: #000000;
}

/* Contact & Address Details Grouping */
.info-group {
    margin-bottom: 30px;
}

.blue-heading {
    color: #4d43fe;
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.info-content {
    font-size: 18px;
    line-height: 1.6;
    color: #000000;
}

.info-content strong {
    display: block;
    font-weight: 600;
    margin-top: 5px;
}

/* Form Side Styling */
.form-container {
    padding: 20px 0;
}

/* Attractive Form Container */
.cf7-custom-style {
    background-color: #f0f9ff; /* Very light blue background (not dark) */
    padding: 30px;
    border-radius: 20px; /* Smooth rounded corners for the form area */
    border: 1px solid #e1e8ed;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
}

/* Grid Layout */
.cf7-custom-style .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cf7-custom-style .field-full {
    grid-column: span 2;
}

/* Label Styling */
.cf7-custom-style label {
    font-weight: 700;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Attractive Input Fields */
.cf7-custom-style .wpcf7-form-control {
    width: 100% !important;
    background: #ffffff !important; /* White inputs on light blue background */
    border: 1.5px solid #d1d9e0 !important;
    padding: 14px 18px !important;
    border-radius: 12px !important; /* Rounded inputs */
    color: #000 !important;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Hover & Focus Effects (The "Attractive" part) */
.cf7-custom-style .wpcf7-form-control:hover {
    border-color: #1e1927 !important;
}

.cf7-custom-style .wpcf7-form-control:focus {
    border-color: #4d43fe !important;
    background: #ffffff !important;
    outline: none;
    box-shadow: 0 0 0 4px rgba(52, 168, 235, 0.15) !important; /* Blue outer glow */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Textarea height */
.cf7-custom-style textarea.wpcf7-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Modern Submit Button */
.cf7-custom-style .wpcf7-submit {
    width: 100%;
    background: #4d43fe !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 16px;
    padding: 18px !important;
    border: none !important;
    border-radius: 12px !important; /* Rounded button */
    cursor: pointer;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(52, 168, 235, 0.3);
}

.cf7-custom-style .wpcf7-submit:hover {
    background: #000000 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

.cf7-custom-style .wpcf7-submit:active {
    transform: translateY(0);
}

/* Mobile Fix */
@media (max-width: 650px) {
    .cf7-custom-style .form-grid {
        grid-template-columns: 1fr;
    }
    .cf7-custom-style .field-full {
        grid-column: span 1;
    }
}




/* Call to Action Link Styling */
.cta-link {
    text-decoration: none; /* Removes default underline */
    color: inherit; /* Keeps the text black as per your previous request */
    transition: all 0.3s ease;
    display: inline-block;
}

.cta-link strong {
    cursor: pointer;
}

/* Hover Effect */
.cta-link:hover {
    color: #1e1927; /* Changes text to blue on hover */
    transform: translateX(5px); /* Subtle nudge to the right */
}



.wpcf7 form .wpcf7-response-output
{
	margin: 0 0  !important;
    padding: 0 0  !important;
    border: none !important;
	text-align: center;
}


.wpcf7 form.invalid .wpcf7-response-output
{
	border-color: none !important;
}

.agency-services-container {
  padding: 60px 60px;
  background-color: transparent;
  font-family: "Manrope", Urbanist;
  max-width: 1400px;
  margin: 0 auto;
}

.agency-bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
}

.bento-card {
  grid-column: span 2;
  aspect-ratio: 1 / 1; /* LOCKS THE SQUARE SIZE */
  background: #f8f8f8;
  padding: 35px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  transition: transform 0.3s ease;
  overflow: hidden; /* Prevents text from changing card size */
}

/* Centering Logic for 4th and 5th items */
.bento-card.centered-card:nth-child(4) { grid-column: 2 / span 2; }
.bento-card.centered-card:nth-child(5) { grid-column: 4 / span 2; }

/* Blue Highlight Card */
.featured-blue { background-color: #1a42f0 !important; color: white !important; border: none; }

.bento-card h3 { 
  font-size: 28px; 
  font-weight: 700; 
  line-height: 1.2; 
  margin:10px 0; 
  
  color: #1e1927; 
}
.featured-blue h3 { color: white; }

/* Description Styling - This ensures text fits inside the square */
.bento-card p {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
  margin: 18px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines to keep square perfect */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-blue p { color: #ccd5ff; }

/* Image Wrapper */
.card-image-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
}

.card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: 0.4s ease;
}

.bento-card:hover { transform: translateY(-8px); }
.bento-card:hover img { filter: grayscale(0%); opacity: 1; }

/* Mobile and Tablet Responsiveness */
@media (max-width: 1100px) {
  .agency-bento-grid { grid-template-columns: repeat(4, 1fr); }
  .bento-card.centered-card:nth-child(4), 
  .bento-card.centered-card:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 768px) {
  .agency-bento-grid { grid-template-columns: 1fr; }
  .bento-card { grid-column: span 1 !important; }
  .agency-services-container{
	padding: 60px 0;
  }
  .contact-flex
  {
	gap: 1px;
  }
  .blue-heading
  {
	margin-bottom: 0;
  }
	.hero-wrapper {
		min-height: 74vh;
	}
	.tfo-hero-banner.contact-hero, .service-hero {
		width: 100%;
		height: 46vh;
	}
}


/* 1. Hide the second logo completely by default */
.logo-secondary {
    display: none !important;
}

/* 2. When the header is NOT scrolled, show the default logo */
#site-header:not(.scrolled) .custom-logo-link {
    display: block;
}

/* 3. When the header IS scrolled... */

/* Hide the blue logo */
#site-header.scrolled .custom-logo-link {
    display: none !important;
}

/* Show the black/white logo */
#site-header.scrolled .logo-secondary {
    display: block !important;
    max-height: 50px; /* Adjust as needed */
    width: auto;
}