body {
	font-family: 'Inter', sans-serif;
	background-color: #f8f9fa;
	/* Neutral light background */
}

.text-purple {
	color: #4800a7;
}

.bg-black-op-60 {
	background: #00000061;
}

.bg-purple {
	background-color: #4800a7;
}
.border-purple {
	border-color: #4800a7;
}

.max-height-260 {
	max-height: 260px;
	display: flex;
}

.max-height-180 {
	max-height: 180px;
	display: flex;
}

.accent-color {
	background: #8D00A7;
	background: linear-gradient(90deg, rgba(141, 0, 167, 1) 0%, rgba(72, 0, 167, 1) 100%);
	color: white;
}
.gradient-color {
	background: #8D00A7;
	background: linear-gradient(90deg, rgba(141, 0, 167, 1) 0%, rgba(72, 0, 167, 1) 100%);
}

.accent-color-lighter {
	background-color: #8d00a7;
	color: white;
}

.accent-color:hover {
	background-color: #8d00a7;
}

.secondary-cta {
	border: 1px solid #4800a7;
	color: #4800a7;
}

.secondary-cta:hover {
	background-color: #4800a7;
	color: white;
}
.orange-text {
	color: #ff8a00;
}
.orange-bg {
	background-color: #ff8a00;
}
.border-orange {
	border-color: #e47b00;
}

.orange-button {
	background-color: #ff8a00;
	color: #FFF;
	/*#4800a7;*/
}

.orange-button:hover {
	background-color: #4800a7;
	;
}

.hero-bg {
	background-image: url('technology-background-blue.jpg');
	background-position: 100% 50%;
	background-size: cover;
	position: relative;
	background-color: #1A202C;
	/* Fallback and fix for z-index issue */
	color: white;
	padding-top: 25vh;
	padding-bottom: 25vh;
	overflow: hidden;
	/* Hide video overflow */
}

.small-hero-bg-insights {
	background-image: url('insights.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
}
.small-hero-bg-amsterdam {
	background-image: url('amsterdam-aerial.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
	
}
.small-hero-bg-earth {
	background-image: url('aerial-europe.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
	
}
.small-hero-bg-sky {
	background-image: url('night-sky.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
}
.small-hero-bg-about{
	background-image: url('infrastructure-bg.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
}
.small-hero-bg-network{
	background-image: url('network.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
}

.small-hero-bg-streaming-server{
	background-image: url('media-streaming-server.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
}
.small-hero-bg-article {
	background-image: url('soccer-game.jpg');
	background-position: 0 50%;
	background-size: cover;
	position: relative;
}

.nav-item {
	position: relative;
}

.dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: white;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	z-index: 10;
	min-width: 240px;
	border-radius: 8px;
	padding: 8px 0;
}

.nav-item:hover .dropdown {
	display: block;
}

.dropdown a {
	padding: 12px 16px;
	display: block;
	color: #333;
	white-space: nowrap;
}

.dropdown a:hover {
	background-color: #f1f1f1;
}

.dropdown-arrow::after {
	content: ' \25BC';
	font-size: 0.6em;
	vertical-align: middle;
	margin-left: 4px;
}

/* Loading spinner */
.loader {
	border: 4px solid #f3f3f3;
	border-radius: 50%;
	border-top: 4px solid #0072a7;
	/* Updated blue spinner */
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

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

	100% {
		transform: rotate(360deg);
	}
}

/* Workloads section specific styles */
.workload-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.tech-background {
	backround-image: url("tech.png");
}

.opacity-50 {
	opacity: 0.5;
}

.hero-bg .leading-tight {
	line-height: 1.2;
}

/* 3D hover effect */
.tilt-container {
	perspective: 1000px;
	/* Creates a 3D space for the tilt effect */
}

.tilt-card {
	transform-style: preserve-3d;
	/* Children are positioned in 3D space */
	transition: transform 0.1s ease-out;
	/* Smooth transition for the tilt */
}

.tilt-card .masked-image-blur {
	transform: translateZ(20px);
	/* Lifts the image slightly forward */
}

/* Add this to your existing stylesheet */
.logo-marquee {
	overflow: hidden;
	width: 100%;
	height: 110px;
	/* Adjust to fit your logo size */
	position: relative;
	background: #000;
	display: flex;
	align-items: center;
}

.logo-track {
    display: flex;
    align-items: center;
    animation: scroll-logos 60s linear infinite;
    width: max-content; /* Keep this */
    will-change: transform;       /* Tells browser to optimize for movement */
    backface-visibility: hidden;  /* Prevents micro-stuttering */
    transform: translateZ(0);     /* Forces hardware acceleration */
}
.logo-track img {
    margin-right: 4rem;
    height: 80px;
    width: auto;
    
    /* --- FIXES START HERE --- */
    flex-shrink: 0;        /* Prevents the logo from being squished by the container */
    max-width: none;       /* Overrides any global theme constraints */
    display: block;        /* Removes accidental inline spacing */
    min-width: 1px;        /* Forces the browser to acknowledge the element exists before load */
}

.margin-top-26 {
	margin-top: 26px;
}

.padding-12 {
	padding: 12px;
	height: 280px;
	min-height: 280px;
}

.padding-12-no-min {
	padding: 12px;
}

.h220-min220 {
	height: 220px;
	min-height: 220px;
}

.h260-min260 {
	height: 260px;
	min-height: 260px;
}

.h320-min320 {
	height: 320px;
	min-height: 320px;
}

.h360-min360 {
	height: 360px;
	min-height: 360px;
}

.constrained-image {
	max-height: 175px;
    display: flex;
}

.bottom-margin {
	margin-bottom: 2rem;
}

.override-lh {
	line-height: 1.35 !important;
}

.override-color-white {
	color: #f1f1f1;
}

.wp-block-button__link {
	background-color: #00000000 !important;
}

/*
---
--- DYNAMIC MOBILE MENU STYLING
---
*/

/* 1. The main <ul> container */
#mobile-menu ul.mobile-menu-list {
    list-style: none; /* Remove bullets */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* 2. All menu item wrappers */
#mobile-menu ul.mobile-menu-list li.menu-item {
    padding: 0;
    margin: 0;
}

/* 3. Top-level links (like 'Dedicated Servers') */
/* We use > to select only direct children */
#mobile-menu ul.mobile-menu-list > li.menu-item > a {
    display: block;
    padding-top: 0.5rem;    /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    color: #374151; /* text-gray-700 */
    font-weight: 500; /* font-medium */
}
#mobile-menu ul.mobile-menu-list > li.menu-item > a:hover {
    color: #3B82F6; /* hover:text-blue-500 */
}

/* 4. The sub-menu section wrappers ('Solutions' & 'Why Us' LI) */
#mobile-menu ul.mobile-menu-list > li.menu-item-has-children {
    padding-top: 0.5rem; /* pt-2 from the static wrapper div */
}

/* 5. Style the PARENT links ('Solutions', 'Why Us') as section headers */
#mobile-menu ul.mobile-menu-list > li.menu-item-has-children > a {
    display: block;
    padding-top: 0.5rem;    /* pt-2 */
    padding-bottom: 0.25rem; /* pb-1 */
    color: #6B7280; /* text-gray-500 */
    font-weight: 700; /* font-bold */
    font-size: 0.875rem; /* text-sm */
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wide */
    pointer-events: none; /* Makes the header (like "Solutions") unclickable */
}
/* Make headers not change color on hover */
#mobile-menu ul.mobile-menu-list > li.menu-item-has-children > a:hover {
    color: #6B7280; 
}

/* 6. Style the sub-menu <ul> itself */
#mobile-menu ul.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 7. Style the sub-menu links (the indented ones) */
#mobile-menu ul.sub-menu li.menu-item a {
    display: block;
    padding-top: 0.5rem;    /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    padding-left: 1rem;     /* pl-4 */
    color: #374151; /* text-gray-700 */
    font-weight: 500; /* font-medium */
}
#mobile-menu ul.sub-menu li.menu-item a:hover {
    color: #3B82F6; /* hover:text-blue-500 */
}

/*
 * ===================================================================
 * STYLE THE "LEARN MORE" LINK & FIX CARD SPACING
 *
 * This makes the Post Excerpt block a flex column, makes
 * the text <p> tag grow, and styles the "Learn More" link.
 * ===================================================================
*/

/* 1. Make the excerpt's <p> tag grow and add the bottom margin */
.wp-block-post-excerpt p.wp-block-post-excerpt__excerpt {
    flex-grow: 1;           /* THIS PUSHES THE BUTTON DOWN */
    margin-bottom: 1.5rem;  /* This is your 'mb-6' space */
}

/* 2. Style the "Learn More" link to look like a button */
.wp-block-post-excerpt a.wp-block-post-excerpt__more-link {
    /* Base Button Shape & Sizing */
    display: inline-block;     /* Make it a block */
    max-width: max-content;  /* This is your 'w-auto' / 'max-w-max' fix */
    padding: 0.5rem 1.5rem;  /* This is your py-2 px-6 */
    border-radius: 0.375rem; /* This is your rounded-md */
    
    /* Font & Text */
    font-weight: 700; /* font-bold */
    color: white !important;
    text-decoration: none;

    /* Background & Gradient */
    background: #8D00A7; /* Fallback */
    background: linear-gradient(90deg, rgba(141, 0, 167, 1) 0%, rgba(72, 0, 167, 1) 100%);
    
    /* Hover Animation */
    transition: transform 0.3s ease;
    transform: scale(1); /* Base state for transform */
}

.wp-block-post-excerpt a.wp-block-post-excerpt__more-link:hover {
    transform: scale(1.05); /* This is your hover:scale-105 */
}


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

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

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

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

/*
 * ===================================================================
 * FINAL, CORRECTED STYLING FOR "CTO Call Form"
 * This forces CF7 checkboxes and radios to match the static design.
 * ===================================================================
*/

/* 1. Target the plugin's default wrapper for all options */
.wpcf7-form-control-wrap {
    display: block; /* Make sure it takes up full width */
}

/* 2. Target the list that CF7 creates (e.g., for "Select your workload") */
.wpcf7-form-control-wrap[data-name="workload"] .wpcf7-list-item {
    display: flex;
    align-items: center;
    /* This replicates the <div class="flex items-center"> from your static HTML */
}

/* 3. Target the list for "What would you like to discuss?" */
.wpcf7-form-control-wrap[data-name="discuss"] .wpcf7-list-item {
    display: flex;
    align-items: center;
}

/* 4. Target the list for "Timeline" radios */
.wpcf7-form-control-wrap[data-name="timeline"] .wpcf7-list-item {
    display: flex;
    align-items: center;
}

/* 5. Style the actual checkbox/radio input */
.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
    height: 1rem; /* h-4 */
    width: 1rem; /* w-4 */
    color: #9333ea; /* text-purple-600 */
    border-color: #D1D5DB; /* border-gray-300 */
    border-radius: 0.25rem; /* rounded */
}
.wpcf7-list-item input[type="checkbox"]:focus,
.wpcf7-list-item input[type="radio"]:focus {
     --tw-ring-color: #a855f7; /* focus:ring-purple-500 */
     /* Re-applying Tailwind's focus ring */
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #a855f7;
}

/* 6. Style the label text next to the input */
.wpcf7-list-item .wpcf7-list-item-label {
    margin-left: 0.75rem; /* ml-3 */
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* text-gray-700 */
}

/* --- FIX: File Upload Button Styling --- */

/* Target the input itself to set text color/size */
.gloman-file-upload {
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
}

/* Target the "Choose File" button specifically */
.gloman-file-upload::file-selector-button {
    /* Re-create Tailwind 'file:mr-4 file:py-2 file:px-4' */
    margin-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
    /* Re-create 'file:rounded-md file:border-0' */
    border-radius: 0.375rem;
    border-width: 0;
    
    /* Re-create 'file:text-sm file:font-semibold' */
    font-size: 0.875rem;
    font-weight: 600;
    
    /* Re-create 'file:bg-purple-50 file:text-purple-700' */
    background-color: #faf5ff;
    color: #7e22ce;
    
    /* Cursor pointer for better UX */
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Target Hover State ('hover:file:bg-purple-100') */
.gloman-file-upload::file-selector-button:hover {
    background-color: #f3e8ff;
}

/* --- HIDE GOOGLE RECAPTCHA BADGE --- */
.grecaptcha-badge {
    visibility: hidden !important;
}

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

/* --- H1 (If used inside the content) --- */
.prose h1 {
    font-size: 2.25rem; /* text-4xl */
    line-height: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #111827;
}

/* --- H2 (Your requested style) --- */
.prose h2 {
    font-size: 1.875rem; /* text-3xl */
    line-height: 2.25rem;
    font-weight: 700;
    margin-top: 3rem;    /* Spacing before new section */
    margin-bottom: 1rem;
    color: #111827;
}

/* --- H3 (Sub-sections) --- */
.prose h3 {
    font-size: 1.5rem;   /* text-2xl */
    line-height: 2rem;
    font-weight: 600;    /* Semi-bold */
    margin-top: 2rem;    /* Slightly less space than H2 */
    margin-bottom: 0.75rem;
    color: #111827;
}

/* --- H4 (Minor sections) --- */
.prose h4 {
    font-size: 1.25rem;  /* text-xl */
    line-height: 1.75rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: #111827;
}

/* --- DESKTOP SIZES (md: breakpoint) --- */
@media (min-width: 768px) {
    .prose h1 { font-size: 3rem; }      /* text-5xl */
    .prose h2 { font-size: 2.25rem; }   /* text-4xl */
    .prose h3 { font-size: 1.875rem; }  /* text-3xl */
    .prose h4 { font-size: 1.5rem; }    /* text-2xl */
}