/* Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
	/* Typography */
	--font-family-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

	/* Color Palette */
	--color-primary: #a7092e;
	--color-primary-hover: #8a0726;
	--color-secondary: #e4032f;
	--color-secondary-hover: #c00328;
	--color-dashed-border: rgba(255, 255,255, 0.3);
	--color-white: #ffffff;
	--color-white-70: rgba(255, 255, 255, 0.7);
	--color-white-50: rgba(255, 255, 255, 0.5);
	--color-black: #121212;
	--bg-black: #121212;
	--color-bg-svg: linear-gradient(180deg, rgba(255, 83, 83, 0.2) 0%, rgba(255, 53, 53, 0.14) 100%) !important;


	/* Background Colors */
	--bg-primary: var(--color-black);
	--bg-secondary: #0D0E10;
	--bg-dark: var(--color-black);
	--bg-dark-saas: var(--color-black);

	/* Text Colors */
	--text-primary: var(--color-white);
	--text-secondary: var(--color-white-70);
	--text-muted: var(--color-white-50);

	/* Border Colors */
	--border-color: var(--color-white-50);
	--border-color-light: var(--color-white-70);

	/* Shadow and Effects */
	--shadow-light: 0 2px 8px rgba(167, 9, 46, 0.1);
	--shadow-medium: 0 4px 16px rgba(167, 9, 46, 0.15);

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;

	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;

	/* Typography */
	--font-family-neue: 'Neue Grotesk', sans-serif;
	--font-family-neue-light: 'Neue Light', sans-serif;
	--font-family-chivo: 'Chivo Mono', monospace;

	/* Spacing */
	--border-radius: 0;
	--transition-duration: 0.3s;
	--transition-timing: ease;

	/* Shadows */
	--box-shadow-light: 0 2px 8px rgba(25, 231, 110, 0.08);
	--box-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);

	/* Z-index */
	--z-index-dropdown: 1000;
	--z-index-header: 9999;
	--z-index-pseudo: 1;
	--z-index-behind: -1;
}

/* ==================== SECTION-SPECIFIC COLOR SCHEMES ===================== */
[data-section="others"] {
	--color-primary: #221f20;
	--color-secondary: #2e2c2d;
	--color-accent-dark:rgb(22, 21, 21);
	--color-text-divider:rgb(22, 21, 21);
	--color-dashed-border: rgba(255, 255, 255, 0.3);
	--color-hover-bg: var(--color-primary);
	--color-bg-svg: linear-gradient(180deg, rgba(134, 107, 107, 0.582) 0%, rgba(122, 108, 108, 0.14) 100%) !important;
}

[data-section="voice"] {
	--color-primary: #411a23;
	--color-secondary: #2f1720;
	--color-accent: #8a4a5a;
	--color-accent-light: #b07a8a;
	--color-accent-dark: #2d0f15a2;
	--color-text-divider:rgb(22, 21, 21);
	--color-dashed-border: #813d4d8c;
	--color-hover-bg: var(--color-primary);
	--color-bg-svg: linear-gradient(180deg, rgba(146, 55, 55, 0.582) 0%, rgba(165, 99, 99, 0.14) 100%) !important;
}

[data-section="messaging"] {
	--color-primary: #c05a0b;
	--color-secondary: #ef791e;
	--color-accent: #ff9f4a;
	--color-accent-light: #ffb366;
	--color-accent-dark: #9749113f;
	--color-text-divider:rgb(22, 21, 21);
	--color-dashed-border: #ef791e33;
	--color-hover-bg: var(--color-primary);
	--color-bg-svg: linear-gradient(180deg, rgba(202, 117, 67, 0.26) 0%, rgba(226, 99, 49, 0.24) 100%) !important;
}

[data-section="internet"] {
	--color-primary: #06726b;
	--color-secondary: #009f95;
	--color-accent: #00c4b8;
	--color-accent-light: #33d4c9;
	--color-accent-dark: #01333038;
	--color-text-divider:rgb(22, 21, 21);
	--color-dashed-border: #009f9531;
	--color-hover-bg: var(--color-primary);
	--color-bg-svg: linear-gradient(180deg, rgba(65, 125, 182, 0.267) 0%, rgba(57, 205, 231, 0.315) 100%) !important;
}

[data-section="industry"] {
	--color-primary: #a38929;
	--color-secondary: #b69939;
	--color-accent: #ffe08c;
	--color-accent-light: #ffe6a8;
	--color-accent-dark: #efc235;
	--color-text-divider:rgb(22, 21, 21);
	--color-dashed-border: #ffde712c;
	--color-hover-bg: var(--color-primary);
	--color-bg-svg: linear-gradient(180deg, rgba(221, 223, 131, 0.658) 0%, rgba(219, 221, 120, 0.575) 100%) !important;
}

[data-section="elva"] {
	--color-primary: #a7092e;
	--color-secondary: #e4032f;
	--color-accent: #25181b;
	--color-accent-light: #f397a9;
	--color-text-divider:rgb(22, 21, 21);
	--color-dashed-border: #be345454;
	--color-hover-bg: var(--color-primary);
	--color-bg-svg: linear-gradient(180deg, rgba(167, 9, 46, 0.479) 0%, rgba(167, 9, 46, 0.575) 100%) !important;
}

/* ==================== SECTION COLOR SCHEMES END ===================== */

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: var(--font-family-inter) !important;
}

html, body {
	overflow-x: hidden !important;
}

body {
	background-color: var(--bg-primary) !important;
}

/* Selector Style */
::selection {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

::-moz-selection {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

::-webkit-selection {
	background-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

/* Global Styles */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 300 !important;
	color: var(--text-primary) !important;
	line-height: clamp(1.2, 0.5vw + 1.1, 1.4) !important;
}

h1 {
	font-size: clamp(2rem, 4vw + 1.5rem, 4rem) !important;
}

h2 {
	font-size: clamp(1.75rem, 3.5vw + 1.25rem, 3.5rem) !important;
}

h3 {
	font-size: clamp(1.5rem, 3vw + 1rem, 3rem) !important;
}

h4 {
	font-size: clamp(1.25rem, 2.5vw + 0.75rem, 2.5rem) !important;
}

h5 {
	font-size: clamp(1.125rem, 2vw + 0.625rem, 2rem) !important;
}

h6 {
	font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) !important;
}

a {
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-primary-hover) !important;
}

.max-container, .container {
    max-width: 1268px !important;
    margin: 0 auto !important;
}

.bg-black {
	background-color: var(--bg-black) !important;
}

.section-heading {
	font-size: 1.25rem !important;
}
.subsection-heading {
	font-size: 2rem !important;
}
.subsection-subheading {
	font-size: 14px !important;
}
.cta-heading {
	font-size: 1.5rem !important;
	font-weight: 500 !important;
}
@media (min-width: 576px) {
	.subsection-subheading {
		width: 75% !important;
	}
	.cta-heading {
		font-size: 2.35rem !important;
		font-weight: 400;
	}
}
@media (min-width: 768px) {
	.subsection-heading {
		font-size: 2.5rem !important;
	}
	.subsection-subheading {
		width: 100% !important;
	}
	.cta-heading {
		font-size: 3rem !important;
		padding-inline: 2.15rem;
	}
	
}
@media (min-width: 992px) {
	.subsection-heading {
		font-size: 3.75rem !important;
	}
	.cta-heading {
		font-size: 3.5rem !important;
		width: 65% !important;
		margin: 0 auto !important;
	}
}

.fs-14 {
	font-size: 14px;
}

.bg-primary {
	background-color: var(--color-primary) !important;
}
.bg-secondary {
	background-color: var(--color-secondary) !important;
}

.text-primary {
	color: var(--color-primary) !important;
}

/* Dashed Styles */
.ver-r4 .border-dashed-vertical,
.ver-r4 .max-container.border-dashed-vertical,
.ver-r4 div.border-dashed-vertical,
.border-dashed-vertical {
	border-left: 1px dashed var(--color-dashed-border) !important;
	border-right: 1px dashed var(--color-dashed-border) !important;
	border-color: var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

.border-dashed-horizontal {
	position: relative;
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

.border-dashed-horizontal-extend-both {
	position: relative;
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

.border-dashed-horizontal-extend-both::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 50vw;
	height: calc(100% + 2px);
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	transform: translateX(-100%);
	pointer-events: none;
	z-index: -1;
}

.border-dashed-horizontal-extend-both::after {
	content: '';
	position: absolute;
	top: -1px;
	right: 0;
	width: 50vw;
	height: calc(100% + 2px);
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	transform: translateX(100%);
	pointer-events: none;
	z-index: -1;
}

/* Add border-dashed-horizontal-extend-right class */
.border-dashed-horizontal-extend-right {
    position: relative;
    border-top: 1px dashed var(--color-dashed-border) !important;
    border-bottom: 1px dashed var(--color-dashed-border) !important;
    border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
    border-image-slice: 1 !important;
  }

  .border-dashed-horizontal-extend-right::after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    width: 50vw;
    height: calc(100% + 2px);
    border-top: 1px dashed var(--color-dashed-border) !important;
    border-bottom: 1px dashed var(--color-dashed-border) !important;
    border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
    transform: translateX(100%);
    pointer-events: none;
    z-index: 10;
  }

/* Individual dashed border styles to override solid borders with custom dash pattern */
.border-dashed-left {
	border-left: 1px dashed var(--color-dashed-border) !important;
	border-right: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

.border-dashed-right {
	border-right: 1px dashed var(--color-dashed-border) !important;
	border-left: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

/* Add dashed top border style */
.border-dashed-top {
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

/* Add dashed horizontal border style */
.border-dashed-horizontal {
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-left: none !important;
	border-right: none !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

/* Navbar bottom border extend both */
.border-bottom-extend-both {
	position: relative;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
}

/* Featured Key Services heading border - make it dashed */
.border-bottom.border-light.border-opacity-25 {
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

/* Featured Services Section - Update all borders to use consistent color */
.featured-services-card-bordered-left {
	border-left: 1px dashed var(--color-dashed-border) !important;
}

.featured-services-card-bordered-right {
	border-right: 1px dashed var(--color-dashed-border) !important;
}

.featured-services-card-bordered-bottom {
	border-bottom: 1px dashed var(--color-dashed-border) !important;
}

.featured-services-row-bordered {
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
}

/* General border-dashed class with consistent color */
.border-dashed {
	border: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(45deg, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

/* Ver-r4 specific header border styling */
.ver-r4 .primary-header.border-dashed-bottom {
	border-bottom: 1px dashed var(--color-dashed-border) !important;
}

/* General border-dashed-bottom styling for ver-r4 */
.border-dashed-bottom {
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

.border-bottom-extend-both::before {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 50vw;
	height: 1px;
	border-bottom: 1px dashed var(--color-dashed-border);
	transform: translateX(-100%);
	pointer-events: none;
	z-index: -1;
}

.border-bottom-extend-both::after {
	content: '';
	position: absolute;
	bottom: -1px;
	right: 0;
	width: 50vw;
	height: 1px;
	border-bottom: 1px dashed var(--color-dashed-border);
	transform: translateX(100%);
	pointer-events: none;
	z-index: -1;
}

/* Add border-dashed-top-extend-both class */
.border-dashed-top-extend-both {
	position: relative;
	border-top: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

.border-dashed-top-extend-both::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 50vw;
	height: 1px;
	border-top: 1px dashed var(--color-dashed-border);
	transform: translateX(-100%);
	pointer-events: none;
	z-index: -1;
}

.border-dashed-top-extend-both::after {
	content: '';
	position: absolute;
	top: -1px;
	right: 0;
	width: 50vw;
	height: 1px;
	border-top: 1px dashed var(--color-dashed-border);
	transform: translateX(100%);
	pointer-events: none;
	z-index: -1;
}

/* Add border-dashed-bottom-extend-both class */
.border-dashed-bottom-extend-both {
	position: relative;
	border-bottom: 1px dashed var(--color-dashed-border) !important;
	border-image: repeating-linear-gradient(to right, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}

.border-dashed-bottom-extend-both::before {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 50vw;
	height: 1px;
	border-bottom: 1px dashed var(--color-dashed-border);
	transform: translateX(-100%);
	pointer-events: none;
	z-index: -1;
}

.border-dashed-bottom-extend-both::after {
	content: '';
	position: absolute;
	bottom: -1px;
	right: 0;
	width: 50vw;
	height: 1px;
	border-bottom: 1px dashed var(--color-dashed-border);
	transform: translateX(100%);
	pointer-events: none;
	z-index: -1;
}


section, nav, footer, .responsive-nav {
	padding-left: 5% !important;
	padding-right: 5% !important;
}
.section-subheading {
	font-size: 0.85rem !important;
}




/* Mobile devices (<576px) */
@media (min-width: 576px) {
	
	section, nav, footer, .responsive-nav {
		padding-left: 4.5% !important;
		padding-right: 4.5% !important;
	}

	.section-heading {
		font-size: 2.5rem !important;
	}
	.section-subheading {
		font-size: 1rem !important;
	}
}

@media (min-width: 992px) {
	
	section, nav, footer {
		padding-left: 5% !important;
		padding-right: 5% !important;
	}
}

@media (min-width: 1200px) {
	
	section, nav, footer, .responsive-nav {
		padding-left: 4% !important;
		padding-right: 4% !important;
	}

	.section-heading {
		font-size: 3.5rem !important;
		line-height: 1.2 !important;
	}
	.section-subheading {
		font-size: 1.25rem !important;
	}
}

/* Legacy max-width queries for broader compatibility */
@media (min-width: 1400px) {
	
	section, nav, footer, .responsive-nav {
		padding-left: 3% !important;
		padding-right: 3% !important;
	}
}

/* CTA Section Styles */
.cta-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.cta-overlay {
	background: rgba(0, 0, 0, 0.6);
	z-index: 2;
}

.cta-container {
	z-index: 10;
}