/*
* ============================================
* AMC Digital - Main Stylesheet
* ============================================
* Based on Figma Design
*/
/* ============================================
Google Fonts Import
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/druk-trial');
/* Note: Clash Display & Druk Trial are premium fonts
You need to self-host them or use alternatives */
/* global */
html {
overflow-x: hidden !important;
width: 100%;
}
/* ============================================
CSS Custom Properties (Variables)
============================================ */
:root {
/* ==================
COLOR PALETTE
================== */
/* Background Colors */
--color-bg-primary: #0E0D1F;
--color-bg-secondary: #222222;
--color-bg-dark: #0A0917;
--color-bg-card: #18162D;
--color-bg-deep: #150E36;
--color-bg-overlay: rgba(255, 255, 255, 0.03);
--color-bg-overlay-light: rgba(255, 255, 255, 0.04);
--color-bg-overlay-medium: rgba(255, 255, 255, 0.18);
/* Primary Colors - Purple Shades */
--color-primary: #6C4DE9;
--color-primary-dark: #5B26E1;
--color-primary-darker: #371893;
/* Accent Colors - Purple/Violet Shades */
--color-accent-light: #8F69FF;
--color-accent-medium: #C6A8FF;
--color-accent-soft: #BDACFF;
--color-accent-pale: #D3BAEE;
/* Pink/Magenta Shades */
--color-pink-primary: #CE43FF;
--color-pink-light: #E69DFF;
--color-pink-dark: #8409C5;
--color-pink-muted: #8553B7;
/* Neutral Colors */
--color-white: #FFFFFF;
--color-white-off: #FCFBFF;
--color-gray-light: #D9D9D9;
--color-gray-medium: #3A3A3A;
--color-gray-dark: #4B4B4B;
--color-black: #000000;
--color-dark: #121212;
--color-dark-text: #101116;
/* Special Colors */
--color-lime: #BAFF36;
/* Transparent Colors */
--color-transparent: rgba(0, 0, 0, 0);
--color-black-20: rgba(0, 0, 0, 0.2);
--color-black-25: rgba(0, 0, 0, 0.25);
--color-black-50: rgba(0, 0, 0, 0.5);
--color-white-10: rgba(255, 255, 255, 0.1);
--color-white-30: rgba(255, 255, 255, 0.3);
--color-primary-20: rgba(108, 77, 233, 0.2);
/* Gradients */
--gradient-primary: linear-gradient(126deg, rgba(255, 255, 255, 1) 0%, rgba(198, 168, 255, 1) 100%);
--gradient-button: linear-gradient(300deg, rgba(39, 6, 217, 1) 0%, rgba(198, 168, 255, 1) 100%);
--gradient-purple: linear-gradient(-4deg, rgba(39, 6, 217, 1) 0%, rgba(198, 168, 255, 1) 100%);
--gradient-fade: linear-gradient(180deg, rgba(14, 13, 31, 1) 9%, rgba(14, 13, 31, 0) 100%);
--gradient-gray: linear-gradient(180deg, rgba(163, 163, 163, 1) 0%, rgba(0, 0, 0, 0) 49%, rgba(163, 163, 163, 1) 91%);
/* ==================
TYPOGRAPHY
================== */
/* Font Families */
--font-display: 'Clash Display', sans-serif;
--font-heading: 'Anton', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--font-accent: 'Druk Trial', sans-serif;
/* Font Sizes */
--text-xs: 14px;
--text-sm: 16px;
--text-base: 18px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 30px;
--text-3xl: 46px;
--text-4xl: 54px;
--text-5xl: 56px;
--text-6xl: 64px;
--text-7xl: 86px;
--text-8xl: 120px;
--text-9xl: 124px;
--text-10xl: 140px;
--text-hero: 200px;
/* Font Weights */
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Line Heights */
--leading-none: 0.96;
--leading-tight: 1.02;
--leading-snug: 1.06;
--leading-normal: 1.07;
--leading-relaxed: 1.2;
--leading-loose: 1.26;
--leading-body: 1.4;
--leading-paragraph: 1.5625;
/* Letter Spacing */
--tracking-tight: -2%;
--tracking-normal: 0;
/* ==================
SPACING
================== */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 10px;
--space-lg: 15px;
--space-xl: 20px;
--space-2xl: 25px;
--space-3xl: 40px;
--space-4xl: 60px;
--space-5xl: 80px;
--space-6xl: 100px;
/* ==================
BORDER RADIUS
================== */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 48px;
--radius-full: 100px;
/* ==================
SHADOWS & EFFECTS
================== */
--shadow-button: 0px 20px 64.5px 0px rgba(108, 77, 233, 1);
--shadow-card: 19px 105px 151px 0px rgba(0, 0, 0, 0.5);
--shadow-light: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
--shadow-medium: 16px 90px 130px 0px rgba(0, 0, 0, 0.4);
--shadow-heavy: 49px 65px 119px 0px rgba(0, 0, 0, 0.5);
/* Blur Effects */
--blur-sm: blur(12px);
--blur-md: blur(35px);
--blur-lg: blur(54px);
--blur-xl: blur(108px);
--blur-2xl: blur(134px);
--blur-3xl: blur(506px);
--blur-4xl: blur(600px);
--blur-5xl: blur(694px);
--blur-hero: blur(113px);
/* ==================
TRANSITIONS
================== */
--transition-fast: 150ms ease;
--transition-base: 300ms ease;
--transition-slow: 500ms ease;
/* ==================
BREAKPOINTS (for reference)
================== */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
--breakpoint-3xl: 1920px;
}
/* ============================================
BASE STYLES / CSS RESET
============================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
font-weight: var(--font-regular);
font-size: var(--text-sm);
line-height: var(--leading-loose);
color: var(--color-white);
background-color: var(--color-bg-primary);
overflow: visible !important;
}
/* ============================================
TYPOGRAPHY UTILITIES
============================================ */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-regular);
line-height: var(--leading-snug);
text-transform: uppercase;
}
h1 {
font-size: var(--text-9xl);
line-height: var(--leading-snug);
}
h2 {
font-size: var(--text-8xl);
line-height: var(--leading-normal);
}
h3 {
font-size: var(--text-6xl);
line-height: var(--leading-relaxed);
}
h4 {
font-size: var(--text-3xl);
line-height: var(--leading-none);
}
h5 {
font-size: var(--text-xl);
line-height: var(--leading-loose);
}
h6 {
font-size: var(--text-lg);
line-height: var(--leading-loose);
}
/* Paragraph & Body Text */
p {
font-family: var(--font-body);
font-weight: var(--font-light);
font-size: var(--text-sm);
line-height: var(--leading-loose);
color: var(--color-white);
}
/* Links */
a {
color: var(--color-white);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-accent-soft);
}
/* Lists */
ul,
ol {
list-style: none;
}
/* Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* ============================================
TEXT STYLE CLASSES
============================================ */
/* Display/Logo Text - Clash Display */
.text-display {
font-family: var(--font-display);
font-weight: var(--font-medium);
text-transform: uppercase;
}
/* Heading Text - Anton */
.text-heading {
font-family: var(--font-heading);
font-weight: var(--font-regular);
text-transform: uppercase;
}
/* Accent Text - Druk Trial */
.text-accent {
font-family: var(--font-accent);
font-weight: var(--font-bold);
}
/* Body Text - Plus Jakarta Sans */
.text-body {
font-family: var(--font-body);
}
.text-body-light {
font-family: var(--font-body);
font-weight: var(--font-light);
}
.text-body-medium {
font-family: var(--font-body);
font-weight: var(--font-medium);
}
.text-body-semibold {
font-family: var(--font-body);
font-weight: var(--font-semibold);
}
.text-body-bold {
font-family: var(--font-body);
font-weight: var(--font-bold);
}
/* Gradient Text */
.text-gradient {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition-duration: 0.1s;
}
.text-gradient-stroke {
-webkit-text-stroke: 1px transparent;
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
}
/* ============================================
COLOR UTILITY CLASSES
============================================ */
/* Background Colors */
.bg-primary {
background-color: var(--color-bg-primary);
}
.bg-secondary {
background-color: var(--color-bg-secondary);
}
.bg-dark {
background-color: var(--color-bg-dark);
}
.bg-card {
background-color: var(--color-bg-card);
}
.bg-overlay {
background-color: var(--color-bg-overlay);
}
.bg-overlay-light {
background-color: var(--color-bg-overlay-light);
}
/* Gradient Backgrounds */
.bg-gradient-primary {
background: var(--gradient-primary);
}
.bg-gradient-button {
background: var(--gradient-button);
}
.bg-gradient-purple {
background: var(--gradient-purple);
}
/* Text Colors */
.text-white {
color: var(--color-white);
}
.text-primary {
color: var(--color-primary);
}
.text-accent {
color: var(--color-accent-soft);
}
.text-muted {
color: var(--color-gray-light);
}
/* ============================================
BUTTON STYLES
============================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-lg);
padding: 10px 10px 10px 25px;
font-family: var(--font-body);
font-weight: var(--font-medium);
font-size: var(--text-sm);
line-height: var(--leading-paragraph);
border-radius: var(--radius-full);
border: none;
cursor: pointer;
transition: all var(--transition-base);
}
.btn-primary {
background: var(--gradient-button);
color: var(--color-white);
box-shadow: var(--shadow-button);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0px 25px 70px 0px rgba(108, 77, 233, 1);
}
.btn-secondary {
background: transparent;
color: var(--color-white);
border: 1px solid var(--color-white-10);
}
.btn-secondary:hover {
background: var(--color-bg-overlay-light);
}
.btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
/* padding: 14px 22px; */
border-radius: var(--radius-full);
background: var(--color-primary);
}
/* Link Button */
.btn-link {
display: inline-flex;
align-items: center;
gap: 11px;
font-family: var(--font-body);
font-weight: var(--font-medium);
font-size: var(--text-sm);
color: var(--color-white);
background: none;
border: none;
cursor: pointer;
}
.btn-link::after {
content: '';
display: block;
width: 15px;
height: 10px;
background-color: var(--color-white);
background: url('data:image/svg+xml,');
transition: width var(--transition-fast);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.btn-link:hover::after {
width: 25px;
fill: var(--color-primary);
}
/* ============================================
NAVIGATION STYLES
============================================ */
.nav {
background: var(--color-bg-overlay-light);
backdrop-filter: var(--blur-md);
border-radius: var(--radius-2xl);
}
.nav-link {
font-family: var(--font-body);
font-weight: var(--font-regular);
font-size: var(--text-sm);
line-height: var(--leading-loose);
color: var(--color-white);
transition: color var(--transition-fast);
}
.nav-link:hover,
.nav-link.active {
color: var(--color-accent-soft);
}
/* ============================================
CARD STYLES
============================================ */
.card {
background: var(--color-bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-glass {
background: var(--color-bg-overlay);
backdrop-filter: var(--blur-md);
border-radius: var(--radius-lg);
}
.card-bordered {
border: 1px solid var(--color-white-10);
}
/* ============================================
SECTION TITLE STYLES
============================================ */
.section-title {
font-family: var(--font-heading);
font-weight: var(--font-regular);
font-size: var(--text-8xl);
line-height: var(--leading-normal);
text-transform: uppercase;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-family: var(--font-body);
font-weight: var(--font-light);
font-size: var(--text-2xl);
line-height: var(--leading-loose);
color: var(--color-white);
}
/* ============================================
GLOW & BLUR EFFECTS
============================================ */
.glow-purple {
filter: var(--blur-5xl);
background-color: var(--color-primary-darker);
}
.glow-pink {
filter: var(--blur-3xl);
background-color: var(--color-pink-dark);
}
.glow-accent {
filter: var(--blur-3xl);
background-color: var(--color-accent-light);
}
.backdrop-blur {
backdrop-filter: var(--blur-md);
}
/* ============================================
CUSTOM UTILITY CLASSES
(Bootstrap provides most utilities - these are custom additions)
============================================ */
/* Custom Gap Variables (Bootstrap uses fixed values) */
.gap-custom-sm {
gap: var(--space-sm);
}
.gap-custom-md {
gap: var(--space-md);
}
.gap-custom-lg {
gap: var(--space-lg);
}
.gap-custom-xl {
gap: var(--space-xl);
}
/* Z-Index Utilities (higher than Bootstrap defaults) */
.z-100 {
z-index: 100;
}
.z-200 {
z-index: 200;
}
.z-1000 {
z-index: 1000;
}
/* Custom Opacity */
.opacity-03 {
opacity: 0.03;
}
.opacity-04 {
opacity: 0.04;
}
/* ============================================
BOOTSTRAP CONTAINER OVERRIDE
(Custom max-width for this design)
============================================ */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
--bs-gutter-x: 1.5rem;
}
@media (min-width: 1400px) {
.container,
.container-xxl {
max-width: 1320px;
}
}
@media (min-width: 1600px) {
/* .container, */
.container-xxl {
max-width: 1520px;
}
}
/* ============================================
SECTION LABEL STYLES
============================================ */
.section-label {
font-family: var(--font-body);
font-weight: var(--font-medium);
font-size: var(--text-sm);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
HEADER / NAVIGATION SECTION
============================================
Bootstrap 5.3.3: Latest Navbar Component
Styles for sticky header with glassmorphism effect
============================================ */
/* Glassmorphism Pill Shape */
.logo-left {
border-radius: 0px;
/* background-color: #8F69FF; */
width: 380px;
border-top-right-radius: 30px;
}
.header {
z-index: 10;
padding: var(--space-lg) 0;
background: transparent;
}
.header-wrapper {
position: relative;
width: 100%;
}
/* Navbar Brand / Logo (Left) */
.navbar-brand {
display: flex;
align-items: center;
padding: 0;
margin-right: auto;
transition: transform var(--transition-fast);
z-index: 10;
}
.navbar-brand:hover {
transform: scale(1.05);
}
/* Navigation Bar (Centered Pill) */
.header .navbar {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: var(--color-bg-overlay-light);
backdrop-filter: var(--blur-md);
-webkit-backdrop-filter: var(--blur-md);
border-radius: var(--radius-2xl);
border: 1px solid var(--color-white-10);
padding: var(--space-md) var(--space-3xl);
transition: all var(--transition-base);
z-index: 5;
}
.header .navbar.scrolled {
background: rgba(10, 10, 20, 0.95);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Header CTA Button (Right) */
.header-cta {
margin-left: auto;
z-index: 10;
}
.navbar-logo {
height: 45px;
width: auto;
object-fit: contain;
}
.navbar-brand-text {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Navbar Toggler (Mobile Menu Button) */
.navbar-toggler {
border: 1px solid var(--color-white-10);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
background: var(--color-bg-overlay-light);
backdrop-filter: var(--blur-sm);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0.25rem rgba(108, 77, 233, 0.25);
border-color: var(--color-primary);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
width: 24px;
height: 24px;
}
/* Navigation Links */
.navbar-nav {
gap: var(--space-lg);
}
.nav-link {
position: relative;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-transform: capitalize;
letter-spacing: 0.5px;
transition: all var(--transition-fast);
border-radius: var(--radius-md);
}
.nav-link:hover {
color: var(--color-accent-soft);
background: transparent;
}
.nav-link.active {
color: var(--color-primary);
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
}
/* Dropdown Menu */
.dropdown-icon {
width: 8px;
height: 8px;
transition: transform var(--transition-fast);
display: inline-block;
margin-left: var(--space-xs);
}
.dropdown-toggle[aria-expanded="true"] .dropdown-icon {
transform: rotate(180deg);
}
.dropdown-menu {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-lg);
padding: var(--space-md);
margin-top: var(--space-md);
backdrop-filter: var(--blur-md);
-webkit-backdrop-filter: var(--blur-md);
box-shadow: var(--shadow-card);
min-width: 200px;
}
.dropdown-item {
color: var(--color-white);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--color-bg-overlay-light);
color: var(--color-accent-soft);
}
.dropdown-item.active {
background: var(--color-primary-20);
color: var(--color-primary);
}
/* CTA Button in Navbar */
.navbar-nav .btn-primary {
margin-left: var(--space-lg);
white-space: nowrap;
}
/* ============================================
HERO SECTION
============================================
Main hero section with background, glow effects, and content
============================================ */
.hero {
/* min-height: 100vh; */
display: flex;
align-items: center;
overflow: hidden;
z-index: 1;
}
.hero-bg {
z-index: 3;
background-color: transparent !important;
}
.hero-glow {
width: 250px;
height: 250px;
border-radius: 50%;
opacity: 0.7;
z-index: 10;
}
.glow-purple {
bottom: 40%;
top: auto;
right: 25%;
filter: blur(30px);
background: black;
}
.glow-pink {
bottom: 40%;
left: 25%;
filter: blur(30px);
background: black;
}
.hero-bg-image {
object-fit: cover;
opacity: 0.3;
}
.hero-decorations {
z-index: 0;
pointer-events: none;
}
.decoration {
opacity: 0.5;
}
.decoration-1 {
top: 20%;
left: 5%;
width: 300px;
height: auto;
}
.hero-graphic {
bottom: 15%;
right: 10%;
width: 200px;
height: auto;
opacity: 0.3;
}
.hero-content {
z-index: 2;
min-height: 100%;
padding: 0 !important;
display: flex;
align-items: flex-start;
padding-top: 100px !important;
overflow: hidden;
}
.hero-layout {
min-height: 90vh;
align-items: stretch;
}
/* Left Column: "BUILT WITH DISCIPLINE." & Project Thumbnails */
.hero-left {
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding-top: 0;
padding-right: var(--space-3xl);
min-height: 90vh;
}
.hero-heading-left {
font-size: 95px;
line-height: 106%;
font-family: var(--font-heading);
font-weight: var(--font-regular);
letter-spacing: var(--tracking-tight);
text-align: left;
margin: 0;
text-transform: uppercase;
color: var(--color-white);
}
/* Bottom Left: Project Thumbnails (2.5 columns layout) */
.hero-projects-bottom {
width: 100%;
margin-top: auto;
padding-top: var(--space-4xl);
overflow: hidden;
position: relative;
}
.hero-projects-row {
display: flex;
gap: var(--space-lg);
width: calc(250% + var(--space-lg) * 2);
max-width: calc(200px * 2.5 + var(--space-lg) * 2);
position: relative;
}
.project-thumb-card {
flex: 0 0 200px;
width: 200px;
max-width: 200px;
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-white-10);
background: var(--color-bg-overlay-light);
backdrop-filter: var(--blur-sm);
transition: all var(--transition-base);
cursor: pointer;
}
.project-thumb-card:hover {
transform: translateY(-5px);
border-color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.project-thumb-card .project-thumb-img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
transition: transform var(--transition-base);
}
.project-thumb-card:hover .project-thumb-img {
transform: scale(1.1);
}
.project-thumb-card .project-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-md);
font-family: var(--font-body);
font-weight: var(--font-medium);
font-size: var(--text-sm);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
text-align: center;
}
/* Center Column: 3D Graphic */
.hero-center {
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 !important;
}
.hero-graphic-wrapper {
width: 100%;
max-width: 600px;
top: 80px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hero-graphic-3d {
width: 550px;
height: auto;
max-width: 1500px;
object-fit: contain;
filter: drop-shadow(0 0 80px rgba(108, 77, 233, 0.6));
animation: float 6s ease-in-out infinite;
position: relative;
z-index: 1;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-20px) scale(1.02);
}
}
/* margin top */
.amc-margintop {
margin-top: 100px !important;
padding-top: 0 !important;
}
/* Right Column: Text Content & Project Thumbnails */
.hero-right {
z-index: 3;
display: flex;
flex-direction: column;
justify-content: space-between;
/* padding-top: var(--space-4xl);
padding-left: var(--space-3xl); */
position: relative;
min-height: 100%;
}
.hero-text-top {
max-width: 100%;
/* margin-bottom: var(--space-4xl); */
margin-bottom: 70%;
}
.hero-text-top p {
font-family: var(--font-body);
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
color: var(--color-white);
text-align: left;
margin-bottom: var(--space-lg);
}
.hero-text-top strong {
font-weight: var(--font-bold);
color: var(--color-white);
}
.hero-text-top .btn-link {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-decoration: none;
text-transform: capitalize;
letter-spacing: 0.5px;
transition: all var(--transition-fast);
display: inline-flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.hero-text-top .btn-link:hover {
color: var(--color-white);
transform: translateX(5px);
}
.hero-text-top .btn-link img {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.hero-text-top .btn-link:hover img {
transform: translateX(5px);
}
/* Bottom Right: Project Thumbnails */
.hero-projects-bottom {
/* margin-top: var(--space-4xl); */
margin-top: 60%;
margin-bottom: var(--space-5xl);
}
.project-thumb {
display: flex;
align-items: center;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
transition: transform var(--transition-base);
cursor: pointer;
}
.project-thumb:last-child {
margin-bottom: 0;
}
.project-thumb:hover {
transform: translateX(5px);
}
.project-thumb-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: var(--radius-lg);
border: 1px solid var(--color-white-10);
flex-shrink: 0;
transition: transform var(--transition-base);
}
.project-thumb:hover .project-thumb-img {
transform: scale(1.05);
border-color: var(--color-primary);
}
.project-label {
font-family: var(--font-body);
font-weight: var(--font-medium);
font-size: var(--text-sm);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-xs);
line-height: 1.2;
}
.project-arrow {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.project-thumb:hover .project-arrow {
transform: translateX(5px);
}
/* Bottom Right: "DESIGNED FOR IMPACT." */
.hero-headings-bottom {
z-index: 3;
display: flex;
align-items: flex-end;
justify-content: flex-end;
margin-top: auto;
}
.hero-heading-right {
line-height: 1.2;
/* Lines ke beech ka gap set karne ke liye */
}
.hero-heading-right span {
display: block;
/* Agar aap class nahi lagana chahte toh yahan se bhi handle ho jayega */
}
.hero-heading-right {
font-family: var(--font-heading);
font-size: 95px;
font-weight: var(--font-regular);
line-height: 106%;
letter-spacing: var(--tracking-tight);
text-align: right;
margin: 0;
text-transform: uppercase;
color: var(--color-white);
}
.curve-line-large {
bottom: 10%;
left: 0;
width: 400px;
height: auto;
opacity: 0.5;
z-index: 1;
}
.curve-line-small {
top: 30%;
right: 0;
width: 200px;
height: auto;
opacity: 0.5;
z-index: 1;
}
.hero-socials {
bottom: 10%;
right: var(--space-4xl);
z-index: 10;
}
.social-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-bg-overlay-light);
backdrop-filter: var(--blur-md);
border: 1px solid var(--color-white-10);
transition: all var(--transition-base);
}
.social-icon:hover {
background: var(--color-primary-20);
transform: translateY(-3px);
}
.social-icon img {
width: 20px;
height: 20px;
}
/* ============================================
ABOUT SECTION
============================================
About section with text content, social icons, CTA buttons, geometric shapes
============================================ */
.about {
position: relative;
z-index: 2;
overflow: hidden;
}
/* Left Column: Text Content & Social Icons */
.about-left {
padding-right: var(--space-4xl);
}
.about .process-line-2 {
top: auto;
left: auto;
width: 20%;
height: auto;
transform: rotate(1deg);
bottom: 5%;
right: -9%;
}
.about .process-line-1 {
top: 50%;
left: -5%;
}
.about-left .section-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: capitalize;
letter-spacing: 0.5px;
padding: var(--space-xs) var(--space-lg);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
}
.about-left .section-title {
margin-top: var(--space-lg);
margin-bottom: var(--space-xl);
text-align: left;
}
.about-left p {
font-family: var(--font-body);
font-size: var(--text-xl);
line-height: 35px;
color: var(--color-white);
text-align: left;
}
.about-left p span {
color: #6B6B6B;
}
.about-left p strong {
font-weight: var(--font-bold);
color: var(--color-white);
}
.about-socials {
position: relative;
top: -20px;
}
.social-icon-circle {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background-color: var(--color-white);
border: none;
transition: all var(--transition-base);
flex-shrink: 0;
padding: 12px;
}
.social-icon-circle:hover {
background-color: #6C4DE9 !important;
transform: translateY(-3px);
}
.social-icon-circle:hover * {
fill: white;
}
/* .social-icon-circle svg {
width: 30px;
height: 30px;
object-fit: contain;
} */
/* Right Column: CTA Buttons & Geometric Shape */
.about-right {
min-height: 500px;
padding-left: var(--space-3xl);
}
.about-cta-top {
position: relative;
z-index: 3;
margin-bottom: var(--space-4xl);
}
.btn-learn-more {
background: var(--gradient-button);
border: none;
padding: var(--space-lg) var(--space-3xl);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: var(--space-md);
transition: all var(--transition-base);
box-shadow: var(--shadow-button);
}
.btn-learn-more:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-button-hover);
}
.btn-learn-more .btn-icon {
width: 40px;
height: 40px;
background: var(--color-white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-learn-more .btn-icon img {
width: 16px;
height: 16px;
filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(2000%) hue-rotate(240deg) brightness(90%) contrast(90%);
}
/* Geometric Outline Shape */
.about-geometric-shape {
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: 0.5;
}
.geometric-outline {
width: 100%;
height: 100%;
}
/* LET'S TALK Circular Button */
.about-cta-bottom {
bottom: var(--space-4xl);
right: var(--space-3xl);
z-index: 3;
}
.btn-lets-talk {
width: 250px;
height: 250px;
border-radius: 100rem;
background: linear-gradient(164deg, #fdfdfd0a 65%, #6C4DE9 100%);
border: 1px solid var(--color-white-10);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-accent);
font-size: 64px;
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
transition: all var(--transition-base);
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
background-color: #6C4DE933;
transform: rotate(-25deg);
box-shadow: #8f53ca85 -20px 131px 100px 5px;
}
.btn-lets-talk::before {
/* content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 0; */
}
.btn-lets-talk:hover {
transform: scale(1.05);
border-color: var(--color-primary);
box-shadow: var(--shadow-button);
}
.btn-lets-talk:hover::before {
opacity: 0.1;
}
.btn-lets-talk span {
position: relative;
z-index: 1;
}
/* ============================================
SERVICES SECTION
============================================
Services grid with cards
============================================ */
/* ============================================
SERVICES SECTION (How We Can Help)
============================================
Numbered services with hover expand, images, service tags
============================================ */
.services {
background: linear-gradient(180deg, var(--color-bg-primary) 0%, rgba(20, 15, 35, 1) 100%);
position: relative;
z-index: 2;
overflow: hidden;
padding: var(--space-5xl) 0;
}
/* Section Header */
.services-header {
margin-bottom: var(--space-5xl);
}
.services-header-left .section-title {
font-family: var(--font-heading);
font-size: var(--text-6xl);
font-weight: var(--font-regular);
line-height: 0.9;
letter-spacing: var(--tracking-tight);
text-transform: uppercase;
text-align: left;
margin: 0;
}
.services-link {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-fast);
display: inline-block;
}
.services-link:hover {
color: var(--color-accent-soft);
transform: translateX(5px);
}
/* Services List (Vertical, Numbered) */
.services-list {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.service-item {
position: relative;
padding: var(--space-4xl) 0;
border-bottom: 1px solid rgba(108, 77, 233, 0.2);
cursor: pointer;
transition: all var(--transition-base);
backdrop-filter: blur(5px);
}
.service-item:last-child {
border-bottom: none;
}
.service-item:hover {
background: rgba(108, 77, 233, 0.05);
}
.service-item.active {
background: #81818121;
backdrop-filter: blur(4px);
}
.service-item-content {
display: flex;
gap: var(--space-4xl);
align-items: flex-start;
}
.service-number {
font-family: var(--font-heading);
font-size: var(--text-5xl);
font-weight: var(--font-regular);
color: var(--color-white);
line-height: 1;
flex-shrink: 0;
position: relative;
}
.service-number::after {
content: '';
position: absolute;
top: 83%;
right: -20px;
transform: translateY(-50%);
width: 15px;
height: 15px;
border-radius: var(--radius-full);
background: var(--color-primary);
opacity: 1;
}
.service-main-content {
flex: 1;
width: 100%;
}
.service-title-row {
width: 100%;
align-items: flex-start;
}
.service-title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-regular);
line-height: 1.1;
letter-spacing: var(--tracking-tight);
color: var(--color-white);
text-transform: uppercase;
margin: 0;
flex-shrink: 0;
min-width: 300px;
}
/* Expanded Content (Image, Description, Tags) */
.service-expanded-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.6s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.4s ease-in-out;
margin-top: 0;
}
.service-item.active .service-expanded-content,
.service-item:hover .service-expanded-content {
max-height: 1000px;
opacity: 1;
margin-top: var(--space-4xl);
}
.service-image-wrapper {
width: 100%;
max-width: 800px;
margin-bottom: var(--space-3xl);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.service-image {
width: 100%;
height: auto;
object-fit: cover;
display: block;
transition: transform var(--transition-base);
}
.service-item:hover .service-image {
transform: scale(1.02);
}
.service-description {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-white);
margin-bottom: var(--space-3xl);
max-width: 800px;
}
.service-tags-section {
margin-top: var(--space-2xl);
}
.service-tags-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-transform: capitalize;
letter-spacing: 0.5px;
display: block;
margin-bottom: var(--space-lg);
}
.service-tags-list {
gap: var(--space-md);
}
.service-tag {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-regular);
color: var(--color-white);
padding: var(--space-sm) var(--space-lg);
background: transparent;
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
transition: all var(--transition-fast);
display: inline-block;
}
.service-tag:hover {
background: var(--color-primary-20);
border-color: var(--color-primary);
transform: translateY(-2px);
}
/* ============================================
PROCESS SECTION
============================================
Process steps with numbers and descriptions
============================================ */
/* ============================================
PROCESS SECTION (How We Work)
============================================
Staggered layout with 4 process cards
============================================ */
.process {
background: linear-gradient(180deg, rgba(20, 15, 35, 1) 0%, var(--color-bg-primary) 50%, rgba(20, 15, 35, 1) 100%);
position: relative;
z-index: 2;
overflow: hidden;
padding: var(--space-5xl) 0;
}
/* Section Header */
.process-header {
margin-bottom: var(--space-5xl);
}
.process-header-left .section-title {
font-family: var(--font-heading);
font-size: var(--text-6xl);
font-weight: var(--font-regular);
line-height: 0.9;
letter-spacing: var(--tracking-tight);
text-transform: uppercase;
text-align: left;
margin: 0;
}
.process-subtitle {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6C4DE9;
}
/* Process Steps Grid */
.process-steps {
/* gap: var(--space-3xl); */
position: relative;
align-items: flex-start;
}
/* Process Step Cards */
.process-step {
background: rgba(108, 77, 233, 0.15);
border: none !important;
backdrop-filter: var(--blur-sm);
-webkit-backdrop-filter: var(--blur-md);
transition: all var(--transition-base);
position: relative;
z-index: 1;
text-align: left;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
min-height: 380px;
width: 100%;
}
.process-step:hover {
transform: translateY(-5px);
border-color: var(--color-primary);
box-shadow: 0 12px 40px rgba(108, 77, 233, 0.3);
background: radial-gradient(129.29% 327.29% at 120% 100%, rgb(0 0 0 / 0%) 140%, rgb(255 255 255 / 82%) 100%), radial-gradient(85.2% 20.92% at 50.6% -10%, rgb(255 255 255 / 50%) 10%, rgb(0 0 0 / 0%) 85%), linear-gradient(270deg, rgb(0 0 0) -80%, rgb(0 0 0 / 10%) 100%, rgb(0 0 0) 100%), #5B26E1;
}
/* Staggered Layout: Step 1 & 3 (Top Position) */
.process-step-top {
margin-top: 0;
}
/* Staggered Layout: Step 2 & 4 (Lower Position) */
.process-step-bottom {
margin-top: var(--space-5xl);
}
.step-number {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.step-dot {
width: 10px;
height: 10px;
border-radius: var(--radius-full);
background: var(--color-primary);
display: inline-block;
opacity: 1;
position: absolute;
left: 110px;
top: 60px;
}
.step-title {
font-family: var(--font-heading);
font-size: 35px;
font-weight: var(--font-regular);
line-height: 1.2;
letter-spacing: var(--tracking-tight);
color: var(--color-white);
text-transform: uppercase;
margin: 0;
}
.step-desc {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-light);
line-height: var(--leading-relaxed);
color: var(--color-white);
opacity: 0.9;
}
.process-line-1,
.process-line-2 {
position: absolute;
opacity: 1;
z-index: 0;
pointer-events: none;
z-index: -1;
}
.process-line-1 {
top: 75%;
left: 35%;
width: 280px;
height: auto;
transform: translate(-50%, -50%);
}
.process-line-2 {
top: 40%;
left: 80%;
width: 215px;
height: auto;
transform: rotate(60deg);
}
/* ============================================
PROJECTS SECTION
============================================
Featured projects grid
============================================ */
.projects {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.projects-header {
margin-bottom: var(--space-5xl);
}
.projects-grid {
gap: var(--space-3xl);
}
.project-card {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
transition: all var(--transition-base);
overflow: hidden;
}
.project-card:hover {
transform: translateY(-10px);
box-shadow: none !important;
border-color: var(--color-primary);
}
.project-image {
position: relative;
overflow: hidden;
height: 300px;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.project-card:hover .project-image img {
transform: scale(1.1);
}
.project-info {
background: var(--color-bg-card);
}
.project-title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
line-height: var(--leading-tight);
}
.project-category {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
WHY US SECTION (Numbers Don't Lie)
============================================
Statistics section with background
============================================ */
.stats-section {
background-color: #0b021d;
}
.stats-card {
background: linear-gradient(135deg, #1a0b35 0%, #0b021d 100%);
border: none;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
padding: 5% 10% !important;
}
.text-primary {
color: #a855f7 !important;
}
.stat-item {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.decorative-line {
position: absolute;
top: 40px;
right: 0;
width: 300px;
height: 100px;
border-top: 1px solid rgba(168, 85, 247, 0.4);
border-right: 1px solid rgba(168, 85, 247, 0.4);
clip-path: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 10%, 0 10%);
}
@media (max-width: 768px) {
.stats-card {
margin: 0 10px;
}
.display-4 {
font-size: 2.5rem;
}
.display-5 {
font-size: 2rem;
}
.footerimg-one {
top: 25% !important;
}
}
/* ============================================
TEAM SECTION
============================================
Team member slider
============================================ */
.team {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.team-header {
margin-bottom: var(--space-5xl);
}
.team-slider {
gap: var(--space-3xl);
padding-bottom: var(--space-lg);
scrollbar-width: thin;
scrollbar-color: var(--color-primary) var(--color-bg-card);
}
.team-slider::-webkit-scrollbar {
height: 8px;
}
.team-slider::-webkit-scrollbar-track {
background: var(--color-bg-card);
border-radius: var(--radius-full);
}
.team-slider::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: var(--radius-full);
}
.team-member {
min-width: 300px;
transition: transform var(--transition-base);
}
.team-member:hover {
transform: scale(1.05);
}
.member-image {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.member-image img {
transition: transform var(--transition-slow);
}
.team-member:hover .member-image img {
transform: scale(1.1);
}
/* ============================================
CONTACT SECTION
============================================
Contact form section with background
============================================ */
.contact {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
overflow: hidden;
}
.contact-bg {
z-index: -1;
}
.contact-bg-image {
opacity: 0.2;
}
.contact-content {
position: relative;
z-index: 2;
}
.contact-left {
padding-right: var(--space-4xl);
}
.contact-form {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
border-radius: var(--radius-xl);
padding: var(--space-4xl);
}
.contact-form .form-control {
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-lg);
padding: var(--space-lg) var(--space-xl);
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--text-sm);
transition: all var(--transition-fast);
}
.contact-form .form-control:focus {
background: var(--color-bg-overlay-medium);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-20);
color: var(--color-white);
outline: none;
}
.contact-form .form-control::placeholder {
color: var(--color-gray-light);
opacity: 0.6;
}
.contact-form textarea.form-control {
resize: vertical;
min-height: 150px;
}
/* ============================================
FOOTER SECTION
============================================
Footer with links and social icons
============================================ */
.footer-section {
background: linear-gradient(360deg, #3d1c8f 0%, #0d0421 100%);
position: relative;
padding-bottom: 50px;
}
.cta-small-text {
font-size: 6rem;
font-weight: 400;
color: #6C4DE9;
margin-bottom: -15px;
}
.cta-big-text {
font-size: 22vw;
font-weight: 900;
line-height: 1;
margin-bottom: 0;
letter-spacing: 10px;
white-space: nowrap;
}
.btn-container {
bottom: -35px;
z-index: 10;
position: absolute;
left: 50%;
transform: translate(-70%, 0%);
}
.footer-divider {
border-top: 2px solid white;
width: 100%;
opacity: 1;
}
.footer-logo {
max-height: 40px;
}
.copyright-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
.footer-links li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.3s ease;
}
.footer-links li a:hover {
color: #ffffff;
}
.footerimg-one {
top: 50%;
}
.footerimg-two {
z-index: 10;
right: 0%;
top: 25%;
}
@media (max-width: 768px) {
.cta-small-text {
font-size: 1.5rem;
}
.cta-big-text {
font-size: 20vw;
}
.get-started-btn {
width: 110px;
height: 110px;
font-size: 1rem;
}
}
@media (max-width: 575px) {
.footerimg-two {
top: 0%;
right: 0%;
}
.footerimg-one {
top: 30%;
left: 0%;
}
.get-started-btn {
width: 90px;
height: 90px;
}
}
/* ============================================
PAGE HERO (for other pages)
============================================
Reusable page hero styles
============================================ */
.page-hero {
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.page-hero-bg {
z-index: -1;
}
.page-hero-bg-image {
opacity: 0.3;
}
.page-hero-content {
position: relative;
z-index: 2;
}
/* ============================================
CTA SECTION
============================================
Call-to-action section
============================================ */
.cta {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.cta-content {
padding: var(--space-5xl) var(--space-4xl);
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
border-radius: var(--radius-xl);
}
/* ============================================
PROJECTS PAGE HERO SECTION
============================================
Page hero for projects page with glow effects
============================================ */
.projects-hero {
min-height: 50vh;
background: var(--color-bg-primary);
}
.projects-hero .hero-glow {
width: 500px;
height: 500px;
opacity: 0.5;
}
.projects-hero .glow-purple {
top: 20%;
right: 15%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-primary-darker) 0%, transparent 70%);
}
.projects-hero .glow-pink {
bottom: 15%;
left: 20%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-pink-dark) 0%, transparent 70%);
}
/* ============================================
PROJECTS FILTER SECTION
============================================
Filter tabs for project categories
============================================ */
.projects-filter {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
border-bottom: 1px solid var(--color-white-10);
}
.filter-tabs {
gap: var(--space-lg);
flex-wrap: wrap;
}
.filter-tab {
background: transparent;
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
padding: var(--space-md) var(--space-2xl);
font-family: var(--font-body);
font-weight: var(--font-medium);
font-size: var(--text-sm);
color: var(--color-white);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.filter-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 0;
}
.filter-tab:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
}
.filter-tab:hover::before {
opacity: 0.1;
}
.filter-tab.active {
background: var(--gradient-button);
border-color: var(--color-primary);
color: var(--color-white);
box-shadow: var(--shadow-light);
}
.filter-tab.active::before {
opacity: 0;
}
.filter-tab span {
position: relative;
z-index: 1;
}
/* ============================================
PROJECTS GRID SECTION
============================================
Masonry-style projects grid with filter functionality
============================================ */
.projects-grid-section {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
min-height: 60vh;
}
.projects-masonry {
gap: var(--space-3xl);
align-items: stretch;
}
.project-item {
transition: all var(--transition-base);
opacity: 1;
transform: scale(1);
}
.project-item.hidden {
display: none;
}
.project-item.filtered-out {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
/* Project Card Large (col-lg-8) */
.project-card-large {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.project-card-large:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-card);
border-color: var(--color-primary);
}
.project-card-large .project-image {
height: 500px;
overflow: hidden;
position: relative;
}
.project-card-large .project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.project-card-large:hover .project-image img {
transform: scale(1.1);
}
.project-card-large .project-overlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
opacity: 0;
transition: opacity var(--transition-base);
}
.project-card-large:hover .project-overlay {
opacity: 1;
}
/* Project Card Regular (col-lg-4) */
.project-card {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.project-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-card);
border-color: var(--color-primary);
}
.project-card .project-image {
height: 350px;
overflow: hidden;
position: relative;
}
.project-card .project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.project-card:hover .project-image img {
transform: scale(1.1);
}
.project-overlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 2;
}
.project-card:hover .project-overlay,
.project-card-large:hover .project-overlay {
opacity: 1;
}
.project-overlay .btn {
opacity: 0;
transform: translateY(20px);
transition: all var(--transition-base);
}
.project-card:hover .project-overlay .btn,
.project-card-large:hover .project-overlay .btn {
opacity: 1;
transform: translateY(0);
}
.project-info {
background: var(--color-bg-card);
position: relative;
z-index: 1;
}
.project-title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
line-height: var(--leading-tight);
margin-bottom: var(--space-lg);
}
.project-card-large .project-title {
font-size: var(--text-4xl);
}
.project-tags {
gap: var(--space-md);
}
.tag {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-fast);
}
.tag:hover {
background: var(--color-primary-20);
border-color: var(--color-primary);
}
/* ============================================
LOAD MORE BUTTON
============================================
Load more projects button styling
============================================ */
.load-more {
margin-top: var(--space-5xl);
padding-top: var(--space-4xl);
}
.load-more .btn-secondary {
min-width: 200px;
padding: var(--space-lg) var(--space-3xl);
}
.load-more .btn-secondary:hover {
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-3px);
}
/* ============================================
PROJECT DETAILS PAGE - BREADCRUMB SECTION
============================================
Breadcrumb navigation styling
============================================ */
.breadcrumb-section {
background: var(--color-bg-primary);
border-bottom: 1px solid var(--color-white-10);
}
.breadcrumb {
background: transparent;
padding: 0;
margin: 0;
}
.breadcrumb-item {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-gray-light);
}
.breadcrumb-item a {
color: var(--color-white);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-item a:hover {
color: var(--color-primary);
}
.breadcrumb-item.active {
color: var(--color-accent-soft);
}
.breadcrumb-item+.breadcrumb-item::before {
content: "/";
color: var(--color-gray-light);
padding: 0 var(--space-md);
}
/* ============================================
PROJECT DETAILS PAGE - PROJECT HERO SECTION
============================================
Large project image with project info sidebar
============================================ */
.project-hero {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.project-hero-image {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
border: 1px solid var(--color-white-10);
}
.project-hero-image img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform var(--transition-slow);
}
.project-hero-image:hover img {
transform: scale(1.02);
}
.project-hero-info {
padding: var(--space-3xl) 0;
}
.project-category .badge {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-medium);
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: var(--radius-full);
}
.project-meta {
padding: var(--space-xl) 0;
border-top: 1px solid var(--color-white-10);
border-bottom: 1px solid var(--color-white-10);
}
.meta-item {
display: flex;
flex-direction: column;
}
.meta-label {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-gray-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.meta-value {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--color-white);
}
.project-cta {
margin-top: var(--space-3xl);
}
.project-cta .btn-outline-secondary {
border-color: var(--color-white-10);
color: var(--color-white);
background: transparent;
}
.project-cta .btn-outline-secondary:hover {
background: var(--color-bg-overlay-light);
border-color: var(--color-primary);
color: var(--color-primary);
}
/* ============================================
PROJECT DETAILS PAGE - PROJECT OVERVIEW SECTION
============================================
Project description, challenges, solutions, and stats
============================================ */
.project-overview {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.project-content {
padding-right: var(--space-3xl);
}
.challenges-section,
.solutions-section {
margin-top: var(--space-3xl);
padding-top: var(--space-3xl);
border-top: 1px solid var(--color-white-10);
}
.challenges-section h3,
.solutions-section h3 {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
margin-bottom: var(--space-xl);
}
.challenges-section ul li,
.solutions-section ul li {
padding: var(--space-md) 0;
}
.challenges-section ul li i,
.solutions-section ul li i {
color: var(--color-primary);
flex-shrink: 0;
}
.project-stats {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
position: sticky;
top: 120px;
}
.project-stats h3 {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-white-10);
}
.stat-item {
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-white-10);
}
.stat-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.stat-number {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: var(--font-bold);
color: var(--color-primary);
text-transform: uppercase;
}
.stat-label {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-gray-light);
}
/* ============================================
PROJECT DETAILS PAGE - PROJECT GALLERY SECTION
============================================
Multiple project images in grid layout
============================================ */
.project-gallery {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
border: 1px solid var(--color-white-10);
cursor: pointer;
transition: all var(--transition-base);
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-card);
border-color: var(--color-primary);
}
.gallery-item img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform var(--transition-slow);
}
.gallery-item:hover img {
transform: scale(1.05);
}
/* ============================================
PROJECT DETAILS PAGE - PROJECT FEATURES SECTION
============================================
Key features and technologies used
============================================ */
.project-features {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.features-list {
padding-right: var(--space-3xl);
}
.feature-item {
padding: var(--space-xl);
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-lg);
backdrop-filter: var(--blur-md);
transition: all var(--transition-base);
}
.feature-item:hover {
transform: translateX(10px);
border-color: var(--color-primary);
box-shadow: var(--shadow-light);
}
.feature-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.feature-item h4 {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
margin-bottom: var(--space-md);
}
.technologies-list {
padding-left: var(--space-3xl);
}
.tech-tags {
gap: var(--space-md);
}
.tech-tags .badge {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-full);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-fast);
}
.tech-tags .badge:hover {
background: var(--color-primary-20);
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-2px);
}
/* ============================================
PROJECT DETAILS PAGE - TESTIMONIAL SECTION
============================================
Client testimonial card
============================================ */
.project-testimonial {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.testimonial-card {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
position: relative;
overflow: hidden;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0.05;
z-index: 0;
}
.testimonial-card>* {
position: relative;
z-index: 1;
}
.quote-icon {
color: var(--color-primary);
opacity: 0.3;
}
.testimonial-text {
font-family: var(--font-body);
font-size: var(--text-lg);
font-style: italic;
line-height: var(--leading-relaxed);
color: var(--color-white);
max-width: 800px;
margin: 0 auto;
}
.testimonial-author {
margin-top: var(--space-3xl);
}
.author-name {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
}
.author-role {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-gray-light);
}
/* ============================================
PROJECT DETAILS PAGE - RELATED PROJECTS SECTION
============================================
Related project cards with navigation
============================================ */
.related-projects {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.related-projects .section-title {
margin-bottom: 0;
}
.related-projects .btn-link {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-fast);
}
.related-projects .btn-link:hover {
color: var(--color-accent-soft);
transform: translateX(5px);
}
.related-projects .btn-link img {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.related-projects .btn-link:hover img {
transform: translateX(5px);
}
.related-projects .project-card {
height: 100%;
}
.related-projects .project-image {
height: 300px;
}
.related-projects .project-category {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
CONTACT PAGE - CONTACT HERO SECTION
============================================
Page hero for contact page with background and glow effects
============================================ */
.contact-hero {
min-height: 50vh;
background: var(--color-bg-primary);
display: flex;
align-items: center;
}
.contact-hero .hero-glow {
width: 500px;
height: 500px;
opacity: 0.5;
}
.contact-hero .glow-purple {
top: 20%;
right: 15%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-primary-darker) 0%, transparent 70%);
}
.contact-hero .glow-pink {
bottom: 15%;
left: 20%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-pink-dark) 0%, transparent 70%);
}
.contact-hero .page-hero-bg-image {
opacity: 0.3;
}
/* ============================================
CONTACT PAGE - CONTACT SECTION
============================================
Contact info sidebar and contact form
============================================ */
.contact-section {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.contact-wrapper {
align-items: flex-start;
}
.contact-info {
position: sticky;
top: 120px;
}
.contact-info .section-title {
margin-bottom: var(--space-xl);
}
.contact-details {
margin-top: var(--space-4xl);
}
.contact-item {
padding: var(--space-xl) 0;
border-bottom: 1px solid var(--color-white-10);
}
.contact-item:last-child {
border-bottom: none;
}
.contact-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-item i {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-value {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--color-gray-light);
transition: color var(--transition-fast);
line-height: var(--leading-relaxed);
}
.contact-value:hover {
color: var(--color-primary);
}
.contact-social {
margin-top: var(--space-4xl);
padding-top: var(--space-3xl);
border-top: 1px solid var(--color-white-10);
}
.social-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-social .social-link {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-bg-overlay-light);
backdrop-filter: var(--blur-md);
border: 1px solid var(--color-white-10);
transition: all var(--transition-base);
}
.contact-social .social-link:hover {
background: var(--color-primary-20);
border-color: var(--color-primary);
transform: translateY(-3px);
box-shadow: var(--shadow-light);
}
.contact-social .social-link img {
width: 24px;
height: 24px;
}
/* Contact Form Enhanced Styling */
.contact-form-wrapper {
position: relative;
}
.contact-form {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
border-radius: var(--radius-xl);
padding: var(--space-4xl);
position: relative;
overflow: hidden;
}
.contact-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0.02;
z-index: 0;
}
.contact-form>* {
position: relative;
z-index: 1;
}
.contact-form .form-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-md);
}
.contact-form .form-control {
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-lg);
padding: var(--space-lg) var(--space-xl);
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--text-sm);
transition: all var(--transition-fast);
}
.contact-form .form-control:focus {
background: var(--color-bg-overlay-medium);
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-20);
color: var(--color-white);
outline: none;
}
.contact-form .form-control::placeholder {
color: var(--color-gray-light);
opacity: 0.6;
}
.contact-form textarea.form-control {
resize: vertical;
min-height: 150px;
}
.contact-form .btn-primary {
margin-top: var(--space-lg);
}
/* ============================================
CONTACT PAGE - FAQ SECTION
============================================
FAQ accordion styling
============================================ */
.faq {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.faq-header {
margin-bottom: var(--space-5xl);
}
.faq-header .section-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--space-xs) var(--space-lg);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
}
.faq-header .section-title {
margin-top: var(--space-lg);
}
.accordion {
--bs-accordion-bg: transparent;
--bs-accordion-border-color: var(--color-white-10);
--bs-accordion-border-radius: var(--radius-lg);
--bs-accordion-btn-padding-x: var(--space-3xl);
--bs-accordion-btn-padding-y: var(--space-xl);
}
.accordion-item {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
border-radius: var(--radius-lg) !important;
overflow: hidden;
transition: all var(--transition-base);
}
.accordion-item:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-light);
}
.accordion-button {
background: transparent;
border: none;
color: var(--color-white);
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: var(--font-regular);
text-transform: uppercase;
padding: var(--space-xl) var(--space-3xl);
box-shadow: none;
transition: all var(--transition-fast);
}
.accordion-button:not(.collapsed) {
background: var(--color-bg-overlay-light);
color: var(--color-primary);
box-shadow: none;
}
.accordion-button:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-20);
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c4de9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
width: 1.5rem;
height: 1.5rem;
transition: transform var(--transition-base);
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c4de9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(180deg);
}
.accordion-body {
padding: 0 var(--space-3xl) var(--space-xl);
background: transparent;
}
.accordion-body p {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-gray-light);
}
/* ============================================
ABOUT PAGE - ABOUT HERO SECTION
============================================
Page hero for about page with background and glow effects
============================================ */
.about-hero {
min-height: 50vh;
background: var(--color-bg-primary);
display: flex;
align-items: center;
}
.about-hero .hero-glow {
width: 500px;
height: 500px;
opacity: 0.5;
}
.about-hero .glow-purple {
top: 20%;
right: 15%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-primary-darker) 0%, transparent 70%);
}
.about-hero .glow-pink {
bottom: 15%;
left: 20%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-pink-dark) 0%, transparent 70%);
}
.about-hero .page-hero-bg-image {
opacity: 0.3;
}
/* ============================================
ABOUT PAGE - ABOUT INTRO SECTION
============================================
Two-column layout with text content and image
============================================ */
.about-intro {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.about-intro-text {
padding-right: var(--space-4xl);
}
.about-intro-text .section-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--space-xs) var(--space-lg);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
}
.about-intro-text .section-title {
margin-bottom: var(--space-xl);
}
.about-intro-text p {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-gray-light);
margin-bottom: var(--space-lg);
}
.about-intro-image {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
}
.about-intro-image img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--radius-xl);
border: 1px solid var(--color-white-10);
transition: transform var(--transition-slow);
}
.about-intro-image:hover img {
transform: scale(1.05);
}
/* ============================================
ABOUT PAGE - VALUES SECTION
============================================
Four value cards in grid layout
============================================ */
.values {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.values-header {
margin-bottom: var(--space-5xl);
}
.values-header .section-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--space-xs) var(--space-lg);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
}
.values-header .section-title {
margin-top: var(--space-lg);
}
.values-grid {
gap: var(--space-3xl);
}
.value-card {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 0;
}
.value-card:hover {
transform: translateY(-10px);
border-color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.value-card:hover::before {
opacity: 0.05;
}
.value-number {
font-family: var(--font-heading);
font-size: var(--text-6xl);
font-weight: var(--font-bold);
color: var(--color-primary);
text-transform: uppercase;
position: relative;
z-index: 1;
opacity: 0.3;
line-height: 1;
}
.value-title {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
position: relative;
z-index: 1;
margin-bottom: var(--space-lg);
}
.value-desc {
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-gray-light);
position: relative;
z-index: 1;
}
/* ============================================
ABOUT PAGE - TEAM SECTION
============================================
Team member cards in grid layout
============================================ */
.team {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.team-header {
margin-bottom: var(--space-5xl);
}
.team-header .section-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--space-xs) var(--space-lg);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
}
.team-header .section-title {
margin-top: var(--space-lg);
margin-bottom: var(--space-xl);
}
.team-header .section-subtitle {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-gray-light);
}
.team-grid {
gap: var(--space-3xl);
}
.team-member-card {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
border-radius: var(--radius-xl);
padding: var(--space-3xl);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.team-member-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 0;
}
.team-member-card:hover {
transform: translateY(-10px);
border-color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.team-member-card:hover::before {
opacity: 0.05;
}
.member-image {
position: relative;
z-index: 1;
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-xl);
border: 1px solid var(--color-white-10);
}
.member-image img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform var(--transition-slow);
}
.team-member-card:hover .member-image img {
transform: scale(1.1);
}
.member-info {
position: relative;
z-index: 1;
}
.member-name {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
margin-bottom: var(--space-sm);
}
.member-role {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-gray-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
SERVICES PAGE - SERVICES HERO SECTION
============================================
Page hero for services page with background and glow effects
============================================ */
.services-hero {
min-height: 50vh;
background: var(--color-bg-primary);
display: flex;
align-items: center;
}
.services-hero .hero-glow {
width: 500px;
height: 500px;
opacity: 0.5;
}
.services-hero .glow-purple {
top: 20%;
right: 15%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-primary-darker) 0%, transparent 70%);
}
.services-hero .glow-pink {
bottom: 15%;
left: 20%;
filter: blur(100px);
background: radial-gradient(circle, var(--color-pink-dark) 0%, transparent 70%);
}
.services-hero .page-hero-bg-image {
opacity: 0.3;
}
.services-hero .section-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--space-xs) var(--space-lg);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
}
/* ============================================
SERVICES PAGE - SERVICES OVERVIEW SECTION
============================================
Service cards grid with icons and descriptions
============================================ */
.services-overview {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
/* .services-grid {
gap: var(--space-3xl);
} */
.service-card {
background: var(--color-bg-card);
border: 1px solid var(--color-white-10);
backdrop-filter: var(--blur-md);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
height: 100%;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: opacity var(--transition-base);
z-index: 0;
}
.service-card:hover {
transform: translateY(-10px);
border-color: var(--color-primary);
box-shadow: var(--shadow-card);
}
.service-card:hover::before {
opacity: 0.05;
}
.service-icon {
position: relative;
z-index: 1;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-xl);
}
.service-icon img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--transition-base);
}
.service-card:hover .service-icon img {
transform: scale(1.1) rotate(5deg);
}
.service-title {
position: relative;
z-index: 1;
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
margin-bottom: var(--space-lg);
}
.service-desc {
position: relative;
z-index: 1;
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: var(--color-gray-light);
margin-bottom: var(--space-xl);
}
.service-card .btn-link {
position: relative;
z-index: 1;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-fast);
}
.service-card .btn-link:hover {
color: var(--color-accent-soft);
transform: translateX(5px);
}
.service-card .btn-link img {
width: 16px;
height: 16px;
transition: transform var(--transition-fast);
}
.service-card .btn-link:hover img {
transform: translateX(5px);
}
/* ============================================
SERVICES PAGE - SERVICE DETAIL SECTIONS
============================================
Detailed service information with alternating layouts
============================================ */
.service-detail {
background: var(--color-bg-primary);
position: relative;
z-index: 2;
}
.service-detail.bg-dark {
background: var(--color-bg-dark);
}
.service-detail .section-label {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-accent-soft);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--space-xs) var(--space-lg);
background: var(--color-bg-overlay-light);
border: 1px solid var(--color-white-10);
border-radius: var(--radius-full);
}
.service-detail .section-title {
margin-top: var(--space-lg);
margin-bottom: var(--space-xl);
}
.service-image {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
border: 1px solid var(--color-white-10);
}
.service-image img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: var(--radius-xl);
transition: transform var(--transition-slow);
}
.service-image:hover img {
transform: scale(1.05);
}
.service-features {
margin-top: var(--space-xl);
}
.service-features h4 {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--font-regular);
color: var(--color-white);
text-transform: uppercase;
margin-bottom: var(--space-lg);
}
.service-features ul li {
padding: var(--space-md) 0;
}
.service-features ul li i {
color: var(--color-primary);
flex-shrink: 0;
font-size: var(--text-lg);
}
.service-features ul li span {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-gray-light);
}
/* ============================================
UTILITY CLASSES
============================================ */
.object-fit-cover {
object-fit: cover;
}
/* ============================================
NOTE:
- Bootstrap 5.3.3 is loaded for responsive grid & utilities
- Use Bootstrap classes: d-flex, justify-content-center, etc.
- Use Bootstrap grid: row, col-*, g-* for gutters
- Custom styles override Bootstrap when needed
- Responsive styles are in responsive.css
============================================ */
/* ----------------------------------------------------------------------------------------------------- */
/* Typography */
.section-title {
font-family: var(--font-heading);
letter-spacing: 2px;
}
.text-gradient {
background: linear-gradient(to right, #ffffff, #b084ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.step-number {
font-size: 24px;
line-height: 1;
color: var(--color-white);
}
.latest-work-section .step-number {
font-size: 171px;
line-height: 1;
color: #ffffff3b;
font-family: var(--font-heading);
}
.latest-work-section .step-dot {
width: 20px;
height: 20px;
left: 180px;
top: 135px;
}
.latest-work-section .process-line-2 {
top: 14%;
left: 72%;
width: 320px;
height: auto;
transform: rotate(5deg);
z-index: -1;
}
/* Project List Styling */
.project-list li {
font-size: 1.1rem;
color: #a9a9a9;
margin-bottom: 10px;
padding-left: 30px;
position: relative;
cursor: pointer;
transition: 0.3s;
}
.project-list li::before {
content: '—';
position: absolute;
left: 0;
color: #a9a9a9;
}
.project-list li.active {
color: white;
font-weight: bold;
}
.project-list li.active::before {
color: white;
}
/* Image/Mockup Section */
.mockup-container {
position: relative;
/* background: radial-gradient(circle at top right, rgba(123, 31, 162, 0.3), transparent); */
border-radius: 30px;
}
.mockup-bg img {
transition: transform 0.5s ease;
max-width: 90%;
}
.mockup-bg img:hover {
transform: perspective(1000px) rotateY(-15deg) rotateX(10deg);
}
.small-text {
line-height: 1.6;
font-size: 0.95rem;
color: #a0a0a0 !important;
}
/* see-all-our */
.leaving-testimonial,
.see-all-our {
background: linear-gradient(180deg, rgba(20, 15, 35, 1) 0%, var(--color-bg-primary) 50%, rgba(20, 15, 35, 1) 100%);
position: relative;
z-index: 2;
overflow: hidden;
height: 700px;
}
.see-all-our .process-line-2 {
top: 15%;
left: 45%;
width: 250px;
height: auto;
z-index: -1;
transform: rotate(60deg);
filter: blur(6px);
}
.see-all-our .process-line-1 {
top: 20%;
left: 0;
width: 250px;
}
.see-all-our .blur-div {
backdrop-filter: blur(50px)
}
.see-all-our.service-sec-six {
margin-top: 200px !important;
}
/* hs-------------------------------------------------------------------------------------------------------------------------- */
.amc-header:after {
content: "";
width: 710px;
height: 100px;
background: radial-gradient(circle, rgba(0, 140, 255, 0.45) 0%, rgba(0, 140, 255, 0.00) 70%);
z-index: -1;
pointer-events: none;
background: black;
border-radius: 0px 0px 40px 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
}
.container.position-relative.hero-content.overflow-hidden:after {
content: '';
position: absolute;
top: 63%;
left: 0%;
transform: translate(-50%, -50%);
mask-image: linear-gradient(to left, transparent 0%, black 50%, black 10%, transparent 100%);
-webkit-mask-image: linear-gradient(to left, #ff454500 0%, #ff1111 50%, #ff2323 10%, #a52b2b 100%);
background: #8f53ca !important;
width: 11%;
height: 190px;
z-index: 38;
}
.services-inner .about-sec-four .container:after,
.contact-section .container:after,
.leaving-testimonial .container::before,
section#about:after {
content: "";
position: absolute;
width: 1500px;
height: 1300px;
background: url('data:image/svg+xml,');
z-index: -1;
top: 470px;
left: 50%;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
section.see-all-our:after {
content: '';
position: absolute;
top: 90%;
left: 0%;
transform: rotate(180deg);
mask-image: linear-gradient(to left, transparent 0%, black 50%, black 10%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, #ff454500 0%, #ff1111 50%, #ff2323 10%, #a52b2b 100%);
background: #0a050fdb !important;
width: 100%;
height: 17%;
z-index: 38;
}
/* .logo-left:after {
content: "";
position: absolute;
width: 3000px;
height: 1000px;
background: radial-gradient(circle, #8F69FF 22%, rgba(0, 140, 255, 0.00) 10%);
filter: blur(80px);
z-index: -3;
pointer-events: none;
left: 50%;
top: 0;
transform: translate(-50%, -58%);
} */
/* ============================================
Header Section
=============================================*/
.process:after,
.latest-work-section:after,
.about .container:after,
.leaving-testimonial::before,
.services .container::before,
.services .container:after,
.latest-work-section:before,
.about .container::before,
.process::before,
.services::before,
.services:after,
.hero-graphic-wrapper:after {
content: "";
position: absolute;
width: 1000px;
height: 800px;
background: radial-gradient(circle, #CE43FF 22%, rgba(0, 140, 255, 0.00) 10%);
filter: blur(80px);
z-index: -3;
pointer-events: none;
left: 50%;
top: 45%;
transform: translate(-50%, -58%);
}
.hero .swiper-slide h2:after {
content: '';
display: block;
width: 20px;
height: 15px;
background-color: var(--color-white);
background: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
top: 6px;
position: absolute;
right: -30px;
left: auto;
}
/* ============================================
Header Section
=============================================*/
.nav-link.active::after,
.amc-header .dropdown-toggle::after {
content: none;
}
.amc-header {
top: 20px !important;
}
.header .navbar {
background: radial-gradient(32.29% 32.29% at 50% 21.87%, rgb(0 0 0 / 0%) 0%, rgb(255 255 255 / 0%) 100%), radial-gradient(53.2% 22.92% at 49.6% 100%, rgb(255 255 255 / 50%) 0%, rgb(0 0 0 / 0%) 100%), linear-gradient(270deg, rgb(0 0 0) 0%, rgb(0 0 0 / 8%) 50%, rgb(0 0 0) 100%), #5B26E1;
}
.hero {
/* min-height: 100vh; */
display: flex;
align-items: center;
z-index: 1;
height: 1080px !important;
position: relative;
overflow: visible;
margin: 0px 10px;
}
.hero .hero-back {
position: absolute;
top: 420px;
left: 50%;
height: 1003px;
width: 1860px;
max-width: 1860px;
object-position: top;
transform: translate(-50%, -50%);
border-radius: 50px;
}
.hero-left {
min-height: fit-content !important;
}
.hero-layout {
min-height: fit-content;
}
.offcanvas {
backdrop-filter: blur(12px);
/* background: linear-gradient(180deg, #1b103a, #0f0825); */
}
body.offcanvas-open,
.openedxra {
overflow: hidden !important;
position: fixed;
width: 100%;
}
/* copy area */
.ab-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.homeSlider {
left: -170px;
top: 63%;
z-index: 10;
width: 30%;
}
.hero .swiper-wrapper {
align-items: center;
}
.hero .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border-radius: 20px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.hero .swiper-slide h2 {
font-size: 20px;
line-height: 24px;
font-family: var(--font-body);
position: relative;
text-transform: capitalize !important;
}
.hero .swiper-slide img {
border-radius: 20px;
overflow: hidden;
border: 10px solid #ffffff36;
}
.hero .swiper-pagination {
text-align: left !important;
}
.hero.swiper {
height: 400px;
margin-right: 0;
top: 53%;
}
/* about us section */
.services .container:after,
.latest-work-section::before,
.process:after,
.leaving-testimonial::before,
.latest-work-section:after,
.about .container:after {
width: 1000px;
height: 800px;
background: radial-gradient(circle, #8F69FF 22%, rgba(0, 140, 255, 0.00) 10%);
left: 70%;
top: 59%;
transform: translate(0%, -65%);
}
.services .container:after {
width: 900px;
height: 100px;
top: 600px;
transform: translate(0%, -65%);
}
.services .container::before {
content: none;
}
.leaving-testimonial::before,
.latest-work-section:after,
.process:after {
width: 1000px;
height: 1200px;
left: -30%;
top: 70%;
}
.process::before {
left: 70%;
top: 50%;
filter: blur(150px);
width: 800px;
height: 800px;
}
.about .container::before {
left: 0%;
top: 65%;
background: radial-gradient(circle, #ce43ff91 25%, rgba(0, 140, 255, 0.00) 10%);
}
.about-cta-bottom {
bottom: 0px;
}
/* services */
.services:after {
background: url(../images/icons/right-vector.png) center / cover no-repeat !important;
left: 2%;
top: 40%;
transform: translate(-50%, -58%);
filter: blur(0px);
width: 250px;
height: 200px;
}
.services::before {
width: 700px;
height: 700px;
background: radial-gradient(circle, #CE43FF 22%, rgba(0, 140, 255, 0.00) 10%);
left: 12%;
top: 42%;
}
.services .container::before {
width: 100%;
height: 500px;
left: 90%;
top: 80%;
background: radial-gradient(circle, #ce43ff66 22%, rgba(0, 140, 255, 0.00) 10%);
}
.service-item.active .service-title {
display: none;
}
.service-image-wrapper {
width: 533px;
max-width: 600px;
margin: 0 !important;
box-shadow: none;
}
.service-image-wrapper img {
height: 100%;
}
.service-main-content {
flex: 0;
width: 80%;
}
.service-main-content .service-title-one {
flex: 0;
width: fit-content;
}
.service-item .service-expanded-content {
gap: 30px;
}
.service-image-wrapper {
margin: 0 !important;
width: 750px;
box-shadow: none;
}
.service-description {
margin: 0;
font-size: var(--text-sm);
}
.service-item-content {
justify-content: space-between;
}
.service-image-wrapper {
max-width: 1000px;
}
/* latest work */
.latest-work-section .small-text {
font-size: var(--text-xs);
}
/* testimonial */
.leaving-testimonial .container::before {
background: url('data:image/svg+xml,') center/contain no-repeat;
top: 160px;
z-index: -5;
}
/* button */
.process-wrapper .pagintationdiv {
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.process-wrapper .swiper-button-next,
.process-wrapper .swiper-button-prev {
position: static;
width: 80px;
border: 1px solid #fff;
padding: 20px;
height: 80px;
border-radius: 10rem;
}
.process-wrapper .swiper-button-next svg,
.process-wrapper .swiper-button-prev svg {
width: 70%;
height: 70%;
}
.swiper-button-next,
.swiper-button-prev {
color: #0281ff;
}
.process-wrapper .swiper-button-next:after,
.process-wrapper .swiper-button-prev:after {
content: '';
border: none;
}
.process-wrapper .swiper-button-next:after,
.process-wrapper .swiper-button-prev:after {
position: absolute;
left: 10px;
border-radius: 50px;
padding: 13px 20px;
border: 1px solid #000;
color: #000;
font-size: 32px;
content: 'prev';
}
/* swiper testimonial */
.swiper.testimonial .swiper-slide {
opacity: 0.3;
}
.swiper.testimonial .swiper-slide-active {
border-right: 2px solid #4B4B4B;
opacity: 1;
}
.testimonial-btns {
position: relative;
height: 100px;
width: 11%;
left: 80%;
top: -100px !important;
}
.testimonial-btns .testimonial-prev {
transform: rotate(180deg);
}
.testimonial-btns .testimonial-next,
.testimonial-btns .testimonial-prev {
background: var(--color-primary);
padding: 18px;
border-radius: 10rem;
width: 60px;
height: 60px;
}
.swiper-button-next,
.swiper-button-prev {
&.swiper-button-disabled {
cursor: auto;
opacity: .35;
pointer-events: none;
background: #ffffff54;
}
}
/* us-------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------OUR PROJECTS PAGE----------------------------- */
/* ------------------------------------------------------------------------------SECTION ONE----------------------- */
.projects-header {
/* background:
radial-gradient(90% 60% at 55% 0%,
rgba(160, 120, 255, 0.45),
rgba(0, 0, 0, 0) 70%),
radial-gradient(70% 80% at 100% 35%,
rgba(140, 90, 255, 0.35),
rgba(0, 0, 0, 0) 70%),
radial-gradient(80% 60% at 30% 100%,
rgba(120, 80, 220, 0.25),
rgba(0, 0, 0, 0) 70%),
linear-gradient(135deg,
#05040a,
#0a0820,
#140b3a,
#1e0f4f); */
background-repeat: no-repeat;
background-size: cover;
min-height: 700px;
height: 700px;
padding: 80px 0;
}
/* .curve-color {
z-index: 1;
}
.curve-color::after {
content: "";
position: absolute;
width: 100%;
height: 500px;
background: radial-gradient(ellipse at center,
rgba(143, 105, 255, 0.6) 0%,
rgba(143, 105, 255, 0.2) 30%,
transparent 70%);
filter: blur(60px);
z-index: -1;
pointer-events: none;
left: 50%;
top: 30px;
transform: translateX(-50%);
opacity: 0.8;
} */
.projectimg-one {
right: 0%;
top: 20%;
}
.projectimg-two {
left: 0%;
top: 20%;
height: 70px;
width: 70px;
}
.projects-title {
word-wrap: break-word;
overflow-wrap: break-word;
font-size: var(--text-10xl);
}
.h-desc {
margin-top: 10%;
}
.description-text {
margin-top: 50px;
}
.geometric-line {
top: 53%;
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.projectimg-two {
top: 0%;
}
.projectimg-one {
bottom: 0%;
}
.geometric-line {
top: 33%;
width: 100%;
text-align: center;
}
.geometric-line svg {
width: 100% !important;
height: auto !important;
max-width: 90%;
}
.description-text {
text-align: left;
margin-left: 0;
margin-top: 20px;
}
.blur-img {
height: 100px;
width: 100px;
}
}
/* @media (max-width: 576px) {
.projects-header {
margin-left: 10px !important;
margin-right: 10px !important;
border-radius: 20px !important;
}
.geometric-line svg {
width: 150%;
height: auto;
}
} */
/* -----------------------------------------------------------------------SECTION TWO-------------------------------- */
.portfolio-section {
background:
radial-gradient(90% 60% at 55% 0%,
rgba(15, 8, 34, 0.45),
rgba(247, 7, 7, 0) 70%),
radial-gradient(70% 80% at 100% 35%,
rgba(24, 9, 58, 0.35),
rgba(0, 0, 0, 0) 70%),
radial-gradient(80% 60% at 30% 100%,
rgba(11, 3, 31, 0.25),
rgba(0, 0, 0, 0) 70%),
linear-gradient(135deg,
#05040a,
#0a0820,
#020103,
#070313);
}
.portfolio-section .glow-element {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.3;
pointer-events: none;
background: #8F69FF;
left: 0%;
width: 25%;
height: 25%;
top: 18%;
}
.portfolio-section .glow-element.glow-two {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.5;
pointer-events: none;
background: #632e9b;
top: 10%;
left: 75%;
width: 25%;
height: 28%;
}
.portfolio-section .glow-element.glow-three {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.3;
pointer-events: none;
background: #8F69FF;
left: 0%;
width: 25%;
height: 25%;
top: 50%;
}
.portfolio-section .glow-element.glow-four {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.4;
pointer-events: none;
background: #632e9b;
left: 75%;
width: 25%;
height: 30%;
top: 43%;
}
.portfolio-section .project-desc {
font-size: 1.5rem;
}
.project-card {
transition: transform 0.3s ease;
}
.image-wrapper img {
width: 100%;
display: block;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-wrapper:hover .overlay {
opacity: 1;
}
.view-project-btn {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 0px 10px;
border-radius: 50%;
font-weight: bold;
font-size: 1.7rem;
text-align: center;
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.2;
transform: rotate(-10deg);
}
.project-card {
background: transparent !important;
border: none !important;
transition: transform 0.3s ease;
}
.image-wrapper {
position: relative;
border-radius: 25px;
overflow: hidden;
background: transparent !important;
border: none !important;
}
.project-card,
.project-info {
background: transparent !important;
border: none !important;
padding-left: 0;
padding-right: 0;
}
.image-wrapper {
border-radius: 30px;
overflow: hidden;
border: none;
background: transparent;
}
.card-two {
margin-top: 200px !important;
}
@media (max-width: 768px) {
.project-title {
font-size: 1.8rem;
}
.mt-md-5 {
margin-top: 2rem !important;
}
}
/* ----------------------------------------------------------------FOOTER SECTION---------------------------------------- */
.footer-section {
background: linear-gradient(360deg, #3d1c8f 0%, #0d0421 100%);
position: relative;
}
.cta-small-text {
font-size: 6rem;
font-weight: 400;
color: #6C4DE9;
margin-bottom: -15px;
}
.cta-big-text {
font-size: 22vw;
font-weight: 900;
line-height: 1;
margin-bottom: 0;
letter-spacing: 10px;
white-space: nowrap;
}
.get-started-btn {
width: 190px;
height: 190px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
font-size: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
text-align: center;
padding: 0px;
transform: rotate(-15deg);
}
.get-started-btn:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: white !important;
transform: rotate(15deg) !important;
}
.footer-divider {
border-top: 2px solid white;
width: 100%;
opacity: 1;
}
.footer-logo {
max-height: 40px;
}
.copyright-text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
.footer-links li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.3s ease;
}
.footer-links li a:hover {
color: #ffffff;
}
.footerimg-one {
top: 50%;
z-index: 3;
}
.footerimg-two {
right: 2%;
top: 20%;
z-index: 10;
}
@media (max-width: 768px) {
.cta-small-text {
font-size: 1.5rem;
}
.cta-big-text {
font-size: 20vw;
}
.get-started-btn {
width: 110px;
height: 110px;
font-size: 1rem;
}
}
@media (max-width: 575px) {
.footerimg-two {
top: 0%;
right: 0%;
}
.footerimg-one {
top: 30%;
left: 0%;
}
.get-started-btn {
width: 90px;
height: 90px;
}
}
/* ---------------------------------------------------------CONSTRUCTION PAGE---------------------------------------------- */
/* ------------------------------------------------------------------SECTION ONE------------------------------------------- */
.construction-hero-section {
background: none !important;
padding-top: 100px;
}
.construction-hero-section .glow-element {
background: #371893;
top: -20%;
left: 25%;
width: 50%;
height: 40%;
z-index: 5;
filter: blur(80px);
opacity: 0.5;
position: absolute;
}
.construction-hero-section .main-heading {
line-height: 0.9;
text-transform: uppercase;
margin-bottom: 20px;
}
.construction-hero-section .gradient-text {
background: linear-gradient(to right, #eaddff, #b289ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.construction-hero-section .sub-text {
max-width: 500px;
margin-bottom: 20px;
font-size: 1.3rem;
}
.construction-hero-section .stats-bar {
padding-top: 20px;
}
.construction-hero-section .col-lg-4,
.construction-hero-section .col-lg-3 {
border-right: 2px solid white;
}
.construction-hero-section .stat-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 5px 0px 5px 10px;
display: inline-flex;
font-size: 1.3rem;
}
.construction-hero-section.stat-item:last-child {
border-right: none;
}
.construction-hero-section .label {
color: #6C4DE9;
font-weight: 500;
}
.construction-hero-section .value {
font-weight: 400;
color: #fff;
}
.construction-hero-section .live-link {
color: #6C4DE9;
text-decoration: underline;
font-weight: 500;
}
@media (max-width: 768px) {
.stat-item {
border-right: none;
border-bottom: 1px solid #333;
width: 100%;
}
}
/* ------------------------------------------------------------------SECTION TWO------------------------------------------------- */
.construction-sec-two .img-one {
top: -5%;
right: 0%;
}
.construction-sec-two .glow-element.glow-two {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.3;
pointer-events: none;
background: #632e9b;
top: 15%;
left: 70%;
width: 30%;
height: 50%;
}
.construction-sec-two .glow-element {
position: absolute;
z-index: -1;
filter: blur(80px);
opacity: 0.3;
pointer-events: none;
background: #632e9b;
bottom: -30%;
left: 0%;
width: 30%;
height: 60%;
}
.construction-sec-two .img-two {
bottom: -10%;
left: 0%;
height: auto;
width: 180px;
}
.construction-sec-four .heading-style {
font-size: var(--text-3xl);
}
@media (max-width: 575px) {
.construction-sec-two .img-one {
top: 0%;
right: 0%;
}
.construction-sec-two .img-two {
bottom: -5%;
left: 0%;
}
}
/* -------------------------------------------------------------------SECTION THREE -------------------------------------------- */
.construction-sec-three {
padding: 100px 0;
background: none;
margin-top: 130px;
color: #fff;
}
.construction-sec-three .glow-element.glow-two {
position: absolute;
z-index: -1;
filter: blur(80px);
opacity: 0.4;
pointer-events: none;
background: #632e9b;
top: 15%;
left: 75%;
width: 25%;
height: 80%;
}
.construction-sec-three .glow-element {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.2;
pointer-events: none;
background: #8409C5;
top: -5%;
left: 0%;
width: 30%;
height: 40%;
}
.construction-sec-three .heading-style {
letter-spacing: 2px;
text-transform: uppercase;
line-height: 1;
}
.construction-sec-three .heading-style::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: #7d5fff;
border-radius: 50%;
margin-left: 5px;
vertical-align: baseline;
}
.construction-sec-three .description-text {
line-height: 1.7;
font-size: 1.3rem;
font-weight: 300;
}
.construction-sec-three .content-block {
margin-bottom: 80px;
}
@media (max-width: 768px) {
.construction-sec-three .heading-style {
font-size: 2.2rem;
margin-bottom: 20px;
}
.construction-sec-three .description-text {
padding-top: 0 !important;
}
}
@media (min-width: 769px) {
.construction-sec-three .description-text {
padding-right: 120px;
}
}
/* --------------------------------------------------------------------SECTION FOUR ------------------------------------*/
.construction-sec-four .heading-style::after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: #7d5fff;
border-radius: 50%;
margin-left: 5px;
vertical-align: baseline;
}
.construction-sec-four .curve-bg {
z-index: -1;
top: -32%;
left: 0;
right: 0;
width: 100%;
height: auto;
overflow: hidden;
}
.construction-sec-four .curve-bg .curve {
width: 100vw;
max-width: 100%;
display: block;
object-fit: cover;
}
.construction-sec-four .description-text {
font-size: 1.3rem;
}
/* ----------------------------------------------------------------------SECTION FIVE----------------------------------------- */
.construction-sec-five.stats-section {
background: url('https://amcdigital.io/wp-content/uploads/2026/02/constsecb.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 40px !important;
margin: 50px 10px !important;
padding: 60px 0 !important;
overflow: hidden;
}
.construction-sec-five .stats-card {
background-color: none !important;
background: none !important;
box-shadow: none !important;
border-radius: none !important;
padding: none !important;
margin: none !important;
}
.construction-sec-five .stat-number {
font-size: var(--text-8xl);
font-weight: 800;
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.construction-sec-five .gradient-text {
background: linear-gradient(to right,
#ffffff 0%,
#ffffff 0%,
#eaddff 10%,
#b289ff 35%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
.construction-sec-five .stat-symbol {
-webkit-text-fill-color: #6C4DE9 !important;
color: #6C4DE9 !important;
font-size: 120px;
margin-left: 15px;
background: none !important;
}
.construction-sec-five .stat-desc {
font-size: 1.1rem;
font-weight: 300;
line-height: 1.3;
margin-top: 10px;
text-align: left;
}
@media (min-width: 768px) {
.construction-sec-five .border-end-md {
border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
}
@media (max-width: 767px) {
.construction-sec-five .stat-number {
font-size: 3.5rem;
}
.construction-sec-five .stats-card {
border-radius: 25px;
margin: 0 15px;
}
}
@media (max-width: 767px) {
.construction-sec-five .stat-number {
font-size: 3.5rem;
justify-content: flex-start;
}
.construction-sec-five .stats-card {
border-radius: 25px;
margin: 0 15px;
text-align: left;
}
.construction-sec-five .mb-4 {
padding-left: 20px;
}
}
/* ----------------------------------------------------------------------SECTION SIX------------------------------- */
.construction-sec-six .gradient-text {
background: linear-gradient(to right, #eaddff, #b289ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.construction-sec-six .m-none {
margin-top: 50px !important;
}
.gradient-text {
background: linear-gradient(to right, #eaddff, #b289ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.construction-sec-six .glow-element {
position: absolute;
z-index: 0;
filter: blur(80px);
opacity: 0.4;
pointer-events: none;
background: #632e9b;
top: 0%;
left: 70%;
width: 30%;
height: 100%;
}
.construction-sec-six .project-desc {
font-size: 1.3rem;
}
/* --------------------------------------------------------------------------CONTACT US ------------------------------------------- */
/* --------------------------------------------------------------------------SECTION ONE------------------------------------------- */
.contact-section {
padding: 60px 0;
}
.contact-section .contact-column {
border-right: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px;
}
.contact-section .contact-column:last-child {
border-right: none;
}
.contact-section .contact-title {
font-weight: 900;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 2px;
}
.contact-section .contact-info {
font-size: 1.1rem;
line-height: 1.6;
color: #d1d1d1;
}
@media (min-width: 768px) {
.contact-section .contact-column {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-section .contact-column:last-child {
border-right: none;
}
}
/* ------------------------------------------------------------------------------SECTION TWO----------------------------- */
.contact-line {
bottom: 10%;
left: -63.3%;
width: 100%;
}
.c-blur {
bottom: -5%;
right: -10%;
z-index: -1;
}
.social-icons-container {
position: relative;
z-index: 5;
margin-top: 40px !important;
padding-right: 10%;
}
.social-btn {
background-color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
transition: all 0.3s ease-in-out;
}
.social-btn:hover {
background-color: #6C4DE9;
transform: translateY(-5px);
box-shadow: 0px 10px 20px rgba(111, 66, 193, 0.3);
}
.social-btn:hover svg path {
fill: #ffffff !important;
}
.f-mt {
margin-top: 100px;
}
@media (max-width: 991px) {
.social-icons-container {
justify-content: center !important;
padding-right: 0;
margin-top: 50px !important;
}
}
/* -----------------------------------------------------------------SECTION THREE-----------------------------------------------*/
/* --------------------------------------------------------------------ABOUT-US PAGE--------------------------------------- */
/* ------------------------------------------------------------------SECTION-THREE------------------------------------------ */
.about-sec-three {
padding: 100px 0;
background: radial-gradient(circle at 50% 50%, #1e053a 0%, #0a0118 100%);
display: flex;
align-items: center;
position: relative;
margin-bottom: 100px !important;
}
.about-sec-three .about-blur-one {
bottom: -5%;
left: 30%;
}
.about-sec-three .about-blur-two {
top: 16%;
right: 15%;
}
.about-sec-three .about-three-bg {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(180px, 30vw, 420px);
height: auto;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
pointer-events: none;
}
.about-sec-three .card-number::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: #7d5fff;
border-radius: 50%;
margin-left: 5px;
vertical-align: baseline;
}
.about-sec-three .about-three-bg img {
width: 100%;
height: auto;
object-fit: contain;
}
.about-sec-three .container {
position: relative;
z-index: 2;
}
.about-sec-three .glow-element {
background: #632e9b;
bottom: -30%;
left: 0%;
width: 20%;
height: 50%;
z-index: 0;
filter: blur(100px);
opacity: 0.4;
position: absolute;
}
.about-sec-three .glass-card {
background-color: #6C4DE933;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid #6C4DE933;
border-radius: 30px;
padding: 50px;
height: 100%;
transition: transform 0.3s ease;
}
.about-sec-three .glass-card:hover {
transform: translateY(-10px);
}
@media (min-width: 992px) {
.about-sec-three .card-2 {
margin-top: 150px;
margin-left: -30px;
}
}
@media (max-width: 992px) {
.about-sec-three .about-blur-two {
top: 10%;
right: 10%;
}
}
/* -------------------------------------------------------------------------------SECTION FOUR-------------------------------------- */
.about-sec-four .purple-glass-bg {
min-height: 400px;
border-radius: 24px;
background:
radial-gradient(120% 120% at 85% 100%,
rgba(184, 154, 240, 0.9) 0%,
rgba(35, 12, 100, 0.6) 35%,
rgba(40, 30, 90, 0.9) 70%),
linear-gradient(135deg,
#f8f8f8 0%,
#502ba0 40%,
#120c2a 100%);
box-shadow:
inset 0 0 60px rgba(255, 255, 255, 0.08),
0 20px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.single.about-sec-four .container:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') center / contain no-repeat;
filter: blur(0px);
z-index: 0;
pointer-events: none;
left: 85%;
transform: translate(-50%, -58%);
right: 0%;
top: 28%;
}
.single.about-sec-four {
border-radius: 50px;
}
.about-sec-four .main-container {
border-radius: 50px;
padding: 80px 60px;
color: white;
position: relative;
overflow: hidden;
}
.about-sec-four .desc-text {
margin-top: 0 !important;
margin-bottom: 100px;
}
.about-sec-four .stat-box {
position: relative;
z-index: 1;
border-left: 1px solid rgba(255, 255, 255, 0.15);
padding-left: 25px;
}
.about-sec-four .main-container {
border-radius: 50px;
padding: 80px 60px;
color: white;
position: relative;
overflow: hidden;
}
.about-sec-four .stat {
margin-top: 100px;
}
.about-sec-four .stat-box {
position: relative;
z-index: 1;
border-left: 1px solid rgba(255, 255, 255, 0.15);
padding-left: 25px;
}
.about-sec-four .stat-desc {
font-size: 28px;
}
.about-sec-four .stat-number {
font-size: var(--text-8xl);
}
.about-sec-four .stat-number {
position: relative;
}
.about-sec-four .plus-sign {
background: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: #6C4DE9 !important;
color: #6C4DE9 !important;
}
.about-sec-four .plus-sign {
color: #6C4DE9 !important;
margin-left: 5px;
}
@media (max-width: 767px) {
.about-sec-four .stat-box {
border: none;
}
.about-sec-four .abt-four-line {
top: 27%;
}
}
/* ---------------------------------------------------------------------------SERVICE PAGE----------------------------------------- */
/* -------------------------------------------------------------------------SECTION TWO------------------------------------- */
.service-sec-two .service-dot::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: #7d5fff;
border-radius: 50%;
margin-left: 5px;
vertical-align: baseline;
}
.service-sec-two .seoncd-row {
margin-top: 100px;
}
.service-sec-two .ms-thrity {
margin-left: 25%;
}
.service-sec-two .s-one-img {
top: 19%;
right: 1%;
}
.service-sec-four .row {
align-items: stretch;
}
.img-col {
height: 100%;
}
.s-three-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.service-sec-two.s-one .glow-element {
position: absolute;
z-index: -1;
filter: blur(90px);
opacity: 0.4;
pointer-events: none;
background: #632e9b;
right: 0%;
width: 8%;
height: 100%;
}
.service-sec-two .s-one-img {
border-radius: 30px;
}
@media (max-width: 1599px) {
.service-sec-two .s-one-img {
width: 650px;
}
}
@media (max-width: 1200px) {
.service-sec-two .s-one-img {
width: 550px;
}
}
@media (max-width: 991px) {
.service-sec-two .s-one-img {
margin-top: 60%;
left: 0;
}
}
@media (max-width: 767px) {
.service-sec-two .s-one-img {
margin-top: 70%;
left: 0;
}
}
@media (max-width: 499px) {
.service-sec-two .s-one-img {
margin-top: 85%;
left: 0;
}
}
@media (max-width: 445px) {
.service-sec-two .s-one-img {
margin-top: 95%;
left: 0;
}
}
@media (max-width: 375px) {
.service-sec-two .s-one-img {
margin-top: 110%;
left: 0;
}
}
/* ----------------------------------------------------------------------SECTION THREE--------------------------------------- */
.service-sec-three {
margin-top: 200px;
}
.service-sec-three .service-dot::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: #7d5fff;
border-radius: 50%;
margin-left: 5px;
vertical-align: baseline;
}
.service-sec-three .s-two-h {
transform: translateX(-23%);
}
.service-sec-three .second-col {
transform: translateX(-10%);
}
.service-sec-three .s-two-p {
margin-top: 20%;
margin-bottom: 7%;
}
.service-sec-three .s-link {
margin-top: 5%;
}
.service-sec-three .s-two-btn {
margin-top: 12%;
}
.service-sec-three .s-two-img {
height: 100%;
border-radius: 30px;
object-fit: cover;
}
.service-sec-three .service-two-b {
bottom: -25%;
z-index: -1;
left: 0;
}
.service-sec-three .glow-element {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.4;
pointer-events: none;
background: #8F69FF;
left: 0%;
width: 15%;
height: 100%;
}
.service-sec-three .glow-element.glow-two {
position: absolute;
z-index: 3;
filter: blur(80px);
opacity: 0.4;
pointer-events: none;
background: #632e9b;
top: 40%;
left: 75%;
width: 25%;
height: 100%;
}
@media (max-width: 991px) {
.service-sec-three .s-two-h {
transform: none;
}
.service-sec-three .second-col {
transform: none;
margin-top: 3%;
}
}
.s-sec-five .service-two-b {
bottom: -25%;
z-index: -1;
left: 92%;
}
.s-sec-five .glow-element {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.4;
pointer-events: none;
background: #8F69FF;
left: 0%;
width: 15%;
height: 50%;
}
/* -----------------------------------------------------------------------SECTION THREE--------------------------------- */
.service-sec-four {
margin-top: 200px;
}
.service-sec-four .service-dot::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: #7d5fff;
border-radius: 50%;
margin-left: 5px;
vertical-align: baseline;
}
.service-sec-four .s-three-h {
transform: translateX(30%);
z-index: -1;
position: relative;
}
.service-sec-four .s-two-p {
margin-top: 20%;
margin-bottom: 7%;
}
.service-sec-four .s-link {
margin-top: 5%;
}
.service-sec-four .s-two-btn {
margin-top: 12%;
}
.service-sec-four .service-three-b {
right: 0%;
z-index: -1;
}
.service-sec-four .glow-element {
position: absolute;
z-index: -1;
filter: blur(90px);
opacity: 0.3;
pointer-events: none;
background: #8F69FF;
left: 0%;
width: 15%;
height: 100%;
bottom: -30%;
}
.service-sec-four .glow-element.glow-two {
position: absolute;
z-index: -1;
filter: blur(80px);
opacity: 0.4;
pointer-events: none;
background: #632e9b;
top: 0%;
left: 80%;
width: 20%;
height: 120%;
}
.service-sec-four .row {
align-items: stretch;
}
.img-col {
height: 100%;
}
.s-three-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 30px;
}
.service-sec-three.s-two .s-four-h {
transform: translateX(8%);
}
.service-sec-three.s-two .t-left {
margin-top: 5px;
transform: translateX(-40%);
}
.contact-section .container:after {
background: url('data:image/svg+xml,') center / contain no-repeat;
top: 400px;
left: 5%;
content: "";
position: absolute;
width: 80%;
height: 200px;
z-index: -1;
transform: translate(-50%, -50%);
}
.projects-header .hero-back {
width: 1860px;
height: 800px;
object-position: top;
max-width: 1860px;
top: 300px;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100px !important;
}
.services-inner .about-sec-four .container:after {
background: url('data:image/svg+xml,') center/contain no-repeat;
top: 180px;
z-index: 1;
width: 900px;
left: 72% !important;
}
.projects-header .container:after {
background: url('data:image/svg+xml,') center / contain no-repeat;
top: 70%;
left: 20%;
content: "";
position: absolute;
width: 75%;
height: 200px;
z-index: 1;
transform: translate(-50%, -50%);
}
/* services inner */
.services-inner-image {
border-radius: 30px;
}
.webServices .swiper-slide {
text-align: start;
font-size: 18px;
background: #6c4de96e;
display: flex;
justify-content: space-between;
align-items: start;
padding: 50px 20px;
min-height: 400px;
border-radius: 30px;
}
.webServices .swiper-slide h4 {
line-height: 60px;
}
.webServices .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.showCaseServicesSwiper .swiper-slide {
border-radius: 20px;
overflow: hidden;
}
@media (min-width: 1200px) {
.s-three-img {
width: 107%;
max-width: none;
margin-left: -7%;
}
}
@media (max-width: 991px) {
.service-sec-four .s-three-h {
transform: none;
}
.service-sec-four .s-three-number {
justify-content: start !important;
}
.service-sec-four .s-three-img {
margin-top: 3%;
}
}
/* ScrollSmoother container (essential structure) */
#smooth-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
/* hides native scrollbar – smoother provides virtual scroll */
}
#smooth-content {
position: relative;
width: 100%;
will-change: transform;
/* no fixed height — expanded by panels */
}
/* ensure smooth-wrapper hides overflow correctly */
#smooth-wrapper {
overflow: hidden;
}
/* minimal style for markers if enabled (just in case) */
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
z-index: 9999 !important;
background-color: transparent !important;
}
/* mouse side */
.custom-cursor {
position: fixed;
width: 40px;
height: 40px;
border: 2px solid var(--color-primary);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
transition: transform 0.15s ease-out, width 0.3s, height 0.3s;
z-index: 9999;
}
.btn {
/* width: 200px; */
/* border-radius: 5px; */
background-color: var(--color-primary-dark);
/* background-image: #F4F200; */
/* background-image: -moz-linear-gradient(top, #fff 0%, #F4F200 100%); */
/* background-image: -webkit-linear-gradient(top, #fff 0%,#F4F200 100%); */
/* background-image: linear-gradient(to bottom, #fff 0%,#F4F200 100%); */
background-size: 300px;
background-repeat: no-repeat;
background-position: 0%;
/* -webkit-transition: background 300ms ease-in-out; */
/* transition: background 300ms ease-in-out; */
}
.btn:hover {
background-color: var(--color-primary-dark);
background-position: -200%;
transition: background 0.6s ease-in-out;
}
.text-gradient:hover {
background: linear-gradient(to left, #ffffff, #b084ff) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
transform: rotate(2deg) !important;
}
.mask-wrapper {
overflow: hidden;
display: block;
}
.mask-text {
display: inline-block;
transform: translateY(100%);
}
/* ------------------------------------------------------------------------SERVICE-INNER-PAGE----------------- */
.serviceshs.s-three {
top: 25%;
left: 0%;
z-index: 0;
}
.serviceshs.s-four {
right: 0%;
top: 25%;
z-index: 0;
}
.serviceshs.glow-element {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.3;
pointer-events: none;
background: #8409C5;
left: 0%;
width: 25%;
height: 18%;
top: 22%;
}
.serviceshs.glow-element.glow-two {
position: absolute;
z-index: 2;
filter: blur(100px);
opacity: 0.4;
pointer-events: none;
background: #8409C5;
left: 75%;
width: 25%;
height: 15%;
top: 28%;
}
.serviceshs.slide {
background-color: #6C4DE933;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid #6C4DE933;
border-radius: 30px;
/* padding: 50px; */
height: 100%;
transition: transform 0.3s ease;
}
.single-s-sec-one .s-b-one {
left: 0%;
top: 5%;
z-index: 1;
}
.single-s-sec-one .s-b-two {
right: 0;
top: -10%;
filter: blur(2px);
z-index: 1;
}
.single-s-sec-one .glow-element {
position: absolute;
z-index: -1;
filter: blur(90px);
opacity: 0.5;
pointer-events: none;
background: #632e9b;
left: 0%;
width: 20%;
height: 100%;
top: 20%;
}
.single-s-sec-one .glow-element.glow-two {
position: absolute;
z-index: -1;
filter: blur(100px);
opacity: 0.4;
pointer-events: none;
background: #632e9b;
top: 20%;
left: 75%;
width: 25%;
height: 120%;
z-index: 4;
overflow: hidden;
display: block;
}
.single-s-sec-one .h-text {
font-size: 16px;
}
.mask-text {
display: inline-block;
transform: translateY(100%);
}
main {
overflow: visible;
}
.construction-vector {
right: 0;
z-index: 10;
left: auto;
transform: translate(100px, -50px);
}
/* ---------------------------------------------------------------------- Contact Form 7 --------------------------------------- */
/* Container styling */
.custom-cf7-container {
background-color: #1c1543;
/* Dark purple from your image */
padding: 40px;
border-radius: 15px;
color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Individual field wrapper */
.field-wrap {
margin-bottom: 25px;
}
/* Label styling */
.field-wrap label {
display: block;
font-size: 16px;
margin-bottom: 8px;
color: #ffffff;
font-weight: 400;
}
/* Input and Textarea Styling - The "Line" look */
.custom-cf7-container input[type="text"],
.custom-cf7-container input[type="email"],
.custom-cf7-container input[type="tel"],
.custom-cf7-container textarea {
width: 100% !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 0 !important;
color: #ffffff !important;
padding: 10px 0 !important;
font-size: 16px !important;
outline: none !important;
transition: border-color 0.3s ease;
}
/* Focus state - line brightens up */
.custom-cf7-container input:focus,
.custom-cf7-container textarea:focus {
border-bottom: 1px solid #ffffff !important;
}
/* Submit Button */
.custom-cf7-container input[type="submit"] {
background: #ffffff;
color: #1c1543;
border: none;
padding: 12px 30px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
transition: opacity 0.3s;
}
.custom-cf7-container input[type="submit"]:hover {
opacity: 0.8;
}
/* Fix for CF7's default span wrappers */
.wpcf7-form-control-wrap {
display: block !important;
}
section.construction-sec-two img {
border-radius: 30px;
}
section.construction-sec-four img {
border-radius: 30px;
}
.vc_column_container>.vc_column-inner {
padding-left: 0 !important;
padding-right: 0 !important;
}
section.showcaseswiper,
.single-services-inner {
height: min-content !important;
}
.four-not-page {
height: 600px !important;
display: flex;
align-items: center;
justify-content: center;
line-height: 45px;
text-align: center;
}
.searcher {
min-height: 600px !important;
display: flex;
align-items: center;
justify-content: center;
line-height: 45px;
text-align: center;
}
.process-line-2-1 {
top: 15%;
}
.process-line-1-1 {
top: 40%;
left: 4%;
width: 200px;
}
.leaving-testimonial {
height: max-content;
margin-bottom: 30px;
}
.search-form {
width: 55%;
margin: 10px auto;
}
.singler img.wp-post-image {
width: 100%;
border-radius: 30px;
margin: 15px 0px;
}
.singler .entry-header {
padding-top: 20px;
}