*, :after, :before {box-sizing: border-box; padding: 0; margin: 0; border: none; outline: none; }
img {max-width: 100%; }
ul, li {list-style: none; margin: 0; }
label, textarea, input, ul, li, h1, h2, h3, h4, h5 {line-height: 1.2; }
a{text-decoration: none !important;display: inline-block;font-size: 16px;cursor: pointer; color: #383838;}
/* span, p, label {text-decoration: none !important; color: #383838; font-size: 16px; } */
select, input, textarea, button {width: 100%; border: none; outline: none; background: transparent; cursor: pointer; font-size: 16px; }
select:focus, input:focus, textarea:focus, button:focus {border: none; outline: none; }
input::placeholder, textarea::placeholder {opacity: 1; color: #626262; }
textarea {resize: none; }
p {color: var(--gray-medium); font-size: 17px; margin: 15px 0; text-align: justify; line-height: 1.6; }
.grecaptcha-badge {visibility: hidden; }
.wrapper {width: 100%; overflow: hidden; }
.fluid-container {width: 100%; max-width: 1350px; margin: 0 auto; padding: 0 20px; }
body {font-family: "Sk-Modernist", sans-serif; background: #070707; color: #ffffff; overflow-x: hidden; }
h1 {font-size: 56px; }
h2 {font-size: 42px; color: #fff; padding: 0 0 15px;}
h3 {font-size: 30px; color: var(--orange)}
.highlight {color: var(--orange); position: relative; font-size: 50px; }

 :root {--bg-primary: #080808; --bg-secondary: #151515; --bg-footer: #2b2b2b; --orange: #f4a31e; --orange-red: #ff541f; --white: #ffffff; --gray-light: #e0e0e0; --gray-medium: #cecece; --gray-dark: #b6bccc; --transition: all 0.3s ease; }
h1, h2, h3, h4, h5, h6 {color: var(--white); font-weight: 700; line-height: 1.2; }
h1 {font-size: 56px; }
/* common btn css  */
.common-btn { display: flex; justify-content: flex-start; margin-top: 15px;}
.common-btn a, .common-btn button{ display: flex; justify-content: center; align-items: center; padding: 14px 32px; font-size: 16px; font-weight: 600; border-radius: 8px; width: 100%; max-width: fit-content; transition: 0.3s ease; background: #f4a31e; color: #000;}
.common-btn.btn-primary a {background: #f4a31e;color: #000;}
.common-btn.btn-primary a:hover { background: #e6950f; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(244,163,30,0.3);}
.common-btn.btn-secondary a { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3);}
.common-btn.btn-secondary a:hover { border-color: #f4a31e; color: #f4a31e; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(244,163,30,0.2);}


/* Resp menu css */ 
html.hc-nav-yscroll {overflow-y: scroll; }
.desk-resp-ham {display: none; z-index: 1000; }
.desk-resp-ham ul.toggle-desk {position: absolute; cursor: pointer; width: 30px; right: 32px; bottom: 0px; margin: auto; top: 0px; height: 25px; }
.desk-resp-ham ul.toggle-desk li {transform: translateY(-50%); list-style: none; display: block; position: absolute; left: 0; height: 3px; right: 0; margin: 0 auto; width: 30px; opacity: 1; background: var(--orange); transition: all .25s ease; z-index: 1; }
.desk-resp-ham ul.toggle-desk li:nth-of-type(1) {top: 20%; }
.desk-resp-ham ul.toggle-desk li:nth-of-type(2) {top: 52%; }
.desk-resp-ham ul.toggle-desk li:nth-of-type(3) {top: 84%; }
.desk-resp-ham ul.toggle-desk.active li:nth-of-type(1) {top: 50%; transform: translateY(-50%) rotate(45deg); }
.desk-resp-ham ul.toggle-desk.active li:nth-of-type(2) {transform: translateY(-50%) rotate(45deg); opacity: 0; }
.desk-resp-ham ul.toggle-desk.active li:nth-of-type(3) {top: 50%; transform: translateY(-50%) rotate(-45deg); }
.inner-desk-ham {display: flex; }
.desk-resp-ham .sidebar {position: fixed; top: 0; left: -350px; width: 270px; height: 100vh; box-sizing: border-box; text-align: center; transition: .9s; z-index: 9; overflow: scroll; overflow-x: hidden; background: #0a0a0a; }
.desk-resp-ham .sidebar::before {content: ''; position: absolute; background: #24293e; top: 0; left: 0; bottom: 0; }
.desk-resp-ham .sidebar::-webkit-scrollbar {display: none; }
.desk-resp-ham .sidebar.active {left: 0px; box-shadow: 1px 0 8px rgba(0, 0, 0, 0.637); padding: 0px 0 120px; top: 0px; }
.desk-resp-ham .sidebar.active > span, .desk-resp-ham .sidebar.active > a {width: 100%; background: none; display: flex; justify-content: center; align-items: center; padding: 20px 10px; position: relative; }
.desk-resp-ham .sidebar a > img {width: 100%; max-width: 110px; background: none; border-radius: 10px}
.desk-resp-ham .sidebar ul.menu {position: relative; text-align: center; width: 100%; display: flex; flex-direction: column; gap: 0; margin: 0; }
.desk-resp-ham .sidebar ul.menu li {list-style: none; width: 100%; cursor: pointer; }
.nav-dropdown li a {padding: 10px 0 10px 35px !important; }
.nav-dropdown li a::before {content: ''; position: absolute; left: 2px; width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); top: -2px; bottom: 0; margin: auto; left: 20px; }
.nav-dropdown li a:hover {background: #fff; color: #24293e!important; }
.nav-dropdown li a:hover::before, .desk-resp-ham .sidebar ul.menu > li a.act-link::before {border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
.desk-resp-ham .sidebar ul.menu > li:hover > span, .desk-resp-ham .sidebar ul.menu > li a:hover, .desk-resp-ham .sidebar ul.menu > li a.act-link, .desk-resp-ham .sidebar ul.menu li span.act-link {color: var(--orange) !important; font-weight: 600; }
.desk-resp-ham .sidebar ul.menu li span, .desk-resp-ham .sidebar ul.menu li a {display: flex; gap: 5px; align-items: center; border-bottom: 1px dotted #c9c9c9; position: relative; text-transform: capitalize; color: #fff; width: 100%; max-width: 100%; justify-content: space-between; display: flex; padding: 15px 20px 15px 20px; font-size: 16px; text-align: left; }
.desk-ham-menu li a.act-link ~ .nav-dropdown > li > a.act-link {left: 0; background: none; color: var(--orange) !important; }
.desk-ham-menu li a.act-link::before {border-right: 2px solid #f4a31e !important; border-bottom: 2px solid #f4a31e !important; }
.nav-dropdown li.act-link a,.nav-dropdown li a:hover a,.desk-resp-ham .sidebar ul.menu>li>a.act-link a {color: #fff !important; }
.nav-dropdown li a.act-link,.nav-dropdown li a:hover,.desk-resp-ham .sidebar ul.menu>li>a.act-link a {color: #fff !important; }
.desk-resp-ham .sidebar ul.menu li a i {position: relative; bottom: -2px; font-size: 16px; }
.desk-resp-ham .sidebar ul.social-icon {position: relative; margin-top: 10%; width: 100%; height: 55px; display: flex; justify-content: center; }
.desk-resp-ham .sidebar ul.social-icon li a {text-decoration: none; display: flex; justify-content: center; gap: 0; width: 100%; height: 100%; position: relative; color: #111b30; border-radius: 50%; font-size: 25px; }
.nav-dropdown {display: flex; flex-direction: column; gap: 0px !important; background: #8595a442; }
.nav-dropdown li a {font-size: 14px !important; }
.desk-resp-ham .sidebar ul.social-icon li:hover a {color: #fff; }
.desk-resp-ham .sidebar ul.social-icon a .fa {line-height: 55px; }
.desk-resp-ham .sidebar ul.menu li > a.dropdown-span img {width: 100%; max-width: 15px !important; transition: 1s ease-in-out; filter: invert(1); background: none; }
.desk-resp-ham .sidebar ul.menu li:hover > a.dropdown-span img, .desk-resp-ham .sidebar ul.menu li.act-link > a.dropdown-span img {transition: 1s ease-in-out; filter: invert(61%) sepia(66%) saturate(393%) hue-rotate(3deg) brightness(97%) contrast(80%); }
.nav-dropdown li {background: var(--dark-yellow)}
.desk-resp-ham .sidebar ul.menu li > a.dropdown-span.act-link img {transition: 1s ease-in-out; filter: invert(86%) sepia(21%) saturate(3171%) hue-rotate(336deg) brightness(95%) contrast(93%); }
.desk-ham-menu .nav-dropdown-1 li a {padding: 10px 0 10px 50px !important; background: transparent; color: var(--dark-green) !important; font-size: 14px; position: relative; }
.desk-ham-menu .nav-dropdown-1 li a::before {content: ""; position: absolute; left: 30px; top: 3px; }
.resp-home.resp-link {color: var(--yellow) !important; font-weight: 600; }
/* Resp menu css */ 

/* ═══════════════════════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════════════════════ */ 
.header {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 0; transition: var(--transition); }
.header-wrapper {position: relative; }
.nav {display: flex; align-items: center; justify-content: space-between;     background: rgba(30, 40, 50, 0.45); /* backdrop-filter: blur(20px); */ -webkit-backdrop-filter: blur(20px); background-image: linear-gradient(135deg, rgb(116 117 118 / 35%), rgba(20, 30, 40, 0.4)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); color: white; padding: 10px 20px;}
.logo img {width: 100%; max-width: 100px; }
.logo {width: 100%; max-width: 100px; }
.nav-links {display: flex; align-items: center; gap: 32px; }
.nav-links li {position: relative; }
.nav-links li a, .nav-links li span {color: var(--white); font-size: 15px; font-weight: 500; transition: var(--transition); position: relative; padding: 30px 0; }
.nav-links li a:hover, .nav-links li span .nav-links li a.active {color: var(--orange); }
.nav-links li a::after {content: ""; position: absolute; bottom: 20px; left: 0; width: 0; height: 2px; background: var(--orange); transition: var(--transition); }
.nav-links li a:hover::after, .nav-links li a.active::after {width: 100%; }
.header-cta {background: var(--orange); color: var(--bg-primary); padding: 12px 15px; border-radius: 8px; font-weight: 600; transition: var(--transition); width: 100%; max-width: fit-content; min-width: 100px; display: flex; justify-content: center; align-items: center; }
.header-cta:hover {background: #e6950f; transform: translateY(-2px); }
.mobile-toggle {display: none; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer; padding: 5px; }
.mobile-toggle span {display: block; width: 25px; height: 2px; background: var(--white); transition: var(--transition); }
.nav-links li a:hover, .nav-links li a.act-link, .nav-links li span:hover, .nav-links li span.act-link {color: var(--orange)}
.first-child-route li a:hover, .first-child-route li a.act-link {color: var(--orange) !important; }
.nav-links li:hover .first-route {opacity: 1; visibility: visible; top: 50px; }
.first-route {position: absolute; width: 260px; opacity: 0; visibility: hidden; top: 50px; display: block; transition: 0.5s; left: -50px; margin: auto; z-index: 3; display: flex; border-bottom: 0px solid var(--yellow);background: rgba(30, 40, 50, 0.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background-image: linear-gradient(135deg, rgb(50 52 53), rgb(15 16 16 / 74%)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); color: white; }
.first-route li a {display: block; padding: 0 !important; color: var(--dark-blue) !important; text-transform: capitalize; }
.first-child-route {width: 100%; max-width: 600px; display: flex; flex-direction: column; position: relative; padding: 0 20px;     }
.first-child-route li {display: flex; justify-content: flex-start; }
.first-child-route li:last-child {border-bottom: none; }
.first-child-route li a {font-size: 16px !important; color: #fff !important; font-weight: initial !important; padding: 12px 0px !important; display: block; line-height: 1.6; margin: 0px 0; width: 100%; max-width: 100%;   border-bottom: 1px solid #ffffff33; }
.first-child-route li:last-child a {border-bottom: none;}
.first-child-route a::after {content: none !important; }

.services-dropdown {position: absolute; top: 100%; left: 0; width: 600px; display: flex; align-items: center; gap: 40px; opacity: 0; visibility: hidden; z-index: 999; transition: none !important; }
.services-menu:hover .services-dropdown {opacity: 1; visibility: visible; left: -450px; transition: none !important; }
.services-links {padding: 0 20px; width: 300px; display: flex; flex-direction: column; }
.first-child-route.services-links span {color: var(--orange);; margin: 0px 0 20px; text-align: center; padding: 0; font-weight: 600; font-size: 18px; }
.services-links a {font-size: 16px; display: block; padding-bottom: 8px; border-bottom: 1px dashed #fff; }
.services-links a:hover {color: #fff; padding-left: 6px; }
.services-image {width: 100%; max-width: 300px; }
.services-image img {width: 100%; max-width: 300px; display: block; }
.services-links li:last-child a {border-bottom: none; }
.services-menu .first-route {width: 600px; display: flex; align-items: stretch; gap: 0px; left: -300px; }
.services-image {width: 250px; display: flex; justify-content: center; }
.services-image img {width: 100%; max-width: 250px; }
.first-child-route.services-links li a:hover {color: #000; }
.services-links a::after {content: none !important; }
.services-links:first-child {border-right: 1px solid #ffffff33;}
.services-links:first-child { padding-right: 0; border-right: 1px solid rgba(255, 255, 255, 0.2); padding: 30px 0px 18px 30px; }
.services-links:last-child { padding-left: 0; padding: 30px 30px 18px 0px;}
.first-route.services-dropdown .first-child-route.services-links:last-child li a{padding: 12px 0px 12px 20px !important;}

/* ═══════════════════════════════════════════════════════════════════════════════ HERO SECTION ═══════════════════════════════════════════════════════════════════════════════ */ 
.hero {position: relative; min-height: 100vh; display: flex; align-items: center; background-color: #0b0c12;}
#particleCanvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero::before {content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: url("../images/banner/hero-banner-bg-image.jpg") no-repeat bottom center/cover; }
.hero::after {content: "";position: absolute;width: 100%; height: 100px; bottom:0; left: 0;background: linear-gradient(to top, #000, transparent);}
.hero-grid {display: flex; flex-wrap: wrap; gap: 60px; align-items: center; }
.hero-content, .hero-image {flex: 1; min-width: 300px; }
.hero-badge {display: inline-block; padding: 10px 20px; background: rgba(244, 163, 30, 0.1); border: 1px solid rgba(244, 163, 30, 0.3); border-radius: 30px; font-size: 14px; color: var(--orange); margin-bottom: 24px; }
.hero-content {position: relative; width: 100%; max-width: 100%; margin: auto; z-index: 2; }
.hero-content h1 {font-size: 62px; line-height: 1.2; margin-bottom: 24px; text-align: center; }
.hero-content .highlight {font-size: 62px; }
.hero-text {font-size: 18px; text-align: center; width: 100%; max-width: 500px; margin: 0 auto 30px; display: flex; }
.hero-buttons {display: flex; gap: 16px; margin-bottom: 48px; justify-content: center; align-items: center; }
.hero-stats {display: flex; gap: 40px; }
.stats-Wrapper {background: #000; padding: 10px 0 0px; color: #fff; position: relative; }
.stats-wrapper.resp{display: none;}
.stats-inner-wrapper {position: absolute; left: 0; right: 0; margin: auto; width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); border-radius: 6px; z-index: 3; }
.stat-content {flex: 1; position: relative; padding: 35px 20px; }
.stat-content:nth-child(1)::after, .stat-content:nth-child(2)::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50%; background: rgba(255, 255, 255, 0.1); }
.stat-content p {color: var(--orange-red); text-align: center; width: 100%; font-size: 21px; font-weight: 500; }
.stat-content h2 {color: #fff; font-weight: 700; text-align: center; font-size: 45px; }
 @keyframes float {  0%, 100% {transform: translateY(0); }
  50% {transform: translateY(-20px); }
}



/* ═══════════════════════════════════════════════════════════════════════════════ SECTION COMMON ═══════════════════════════════════════════════════════════════════════════════ */ 
.section-badge {display: inline-block; padding: 8px 16px; background: rgba(244, 163, 30, 0.1); color: var(--orange); font-size: 14px; font-weight: 600; border-radius: 20px; margin-bottom: 16px; }
.section-header {text-align: center;}
.section-header h2 {margin-bottom: 16px; }
.section-header p {color: var(--gray-medium); max-width: 600px; margin: 0 auto; }



/* ═══════════════════════════════════════════════════════════════════════════════ ABOUT SECTION ═══════════════════════════════════════════════════════════════════════════════ */
 
.about-grid {display: flex; justify-content: center; align-items: center; gap: 80px; align-items: center; background: #151515; padding: 40px; border-radius: 30px; }
.about-image {width: 100%; max-width: 500px; }
.about-content {width: 100%; max-width: 600px; }
.about-image img {border-radius: 16px; width: 100%; max-width: 500px; }
.about-content p {text-align: left; }
.about-features {margin: 32px 0; }
.about-features li {display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--white); font-size: 16px; }
.about-features i {color: var(--orange); }





/* ═══════════════════════════════════════════════════════════════════════════════ TECHNOLOGIES SECTION ═══════════════════════════════════════════════════════════════════════════════ */ 
.technologies {padding: 80px 0; background: var(--bg-primary); }
.tech-grid {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; }
.tech-item { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 24px 28px; display: flex; flex-direction: column; align-items: center;   justify-content: center;  gap: 16px;             transition: var(--transition); width: 100%; max-width: 240px;}
.tech-item img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0;}
.tech-item span { font-size: 17px; font-weight: 500; color: var(--gray-medium); text-align: center;}
.tech-item:hover {border-color: var(--orange); transform: translateY(-3px); }




/** ═══════════════════════════════════════════════════════════════════════════════ PROCESS SECTION ═══════════════════════════════════════════════════════════════════════════════ */ 
.process-card {background: #111111; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 56px 56px 42px; overflow: hidden; position: relative; background-image: url("../images/bg-our-process.png"); background-size: cover; background-position: center; }
.process-card-title {text-align: center; }
.process-card-title h2 {color: var(--white);}
.process-card-title .highlight {font-size: inherit; }
.process-journey {position: relative; margin: 46px 0 0; min-height: 438px; }
.journey-wave {position: absolute; top: 29px; left: -7%; width: 100%; height: auto; object-fit: contain; pointer-events: none; display: block; }
.journey-step {position: absolute; width: clamp(220px, 20vw, 280px); }
.step-pos-1 {left: 7%; top: 49%; }
.step-pos-2 {left: 40.5%; top: 31%; }
.step-pos-3 {right: 4.5%; top: -1%; }
.step-icon-wrap {position: relative; min-height: 82px; margin-bottom: 8px; }
.step-icon {width: 56px; height: 56px; background: #ffffff; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 2; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38); }
.icon-dot {display: block; width: 16px; height: 16px; background: var(--orange); border-radius: 50%; }
.step-num {position: absolute; top: 4px; left: 112px; font-size: 88px; font-weight: 600; line-height: 1; color: rgb(165 125 20 / 81%); display: block; letter-spacing: -2px; z-index: 1; pointer-events: none; }
.step-pos-1 .step-num {top: 14px; left: 118px; }
.step-pos-2 .step-num {top: 10px; left: 114px; }
.step-pos-3 .step-num {top: -37px; left: 120px; }

.step-details h3 {font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.35; }
.step-details p {font-size: 16px; color: rgba(255, 255, 255, 0.68); line-height: 1.6; margin: 0; opacity: 1; max-width: 24ch; text-align: left; }



/* ═══════════════════════════════════════════════════════════════════════════════ TESTIMONIALS SECTION ═══════════════════════════════════════════════════════════════════════════════ */ 
.testimonials {padding: 80px 0; background: var(--bg-primary); position: relative; overflow: visible; }
.testimonial-wrapper {position: relative; max-width: 900px; margin: 40px auto 0; padding: 60px 40px; border-radius: 30px; text-align: center; display: flex; align-items: center; justify-content: space-between; border: 15px solid transparent; background: linear-gradient(#0f0f0f, #0f0f0f) padding-box, linear-gradient(135deg, rgb(255 255 255 / 28%), rgba(255, 255, 255, 0.02)) border-box; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.03); overflow: hidden; }
.testimonials::after {content: ""; position: absolute; bottom: -254px; right: 16px; transform: translateX(30%); width: 800px; height: 800px; background: radial-gradient(circle, rgb(255 107 0 / 42%) 0%, rgba(255, 107, 0, 0) 80%); border-radius: 50%; pointer-events: none; z-index: 0; }
.testimonials::before {content: ""; position: absolute; background: url("../images/line.png")no-repeat center center/cover; width: 70%; height: 100%; right: -201px; bottom: -162px; overflow: visible; }
.nav-arrow {position: absolute; z-index: 2; background: transparent; border: none; color: var(--white); font-size: 20px; cursor: pointer; opacity: 0.5; transition: var(--transition); padding: 20px; width: 100%; max-width: 75px; bottom: 120px; height: 20px;}
button.nav-arrow.prev-arrow {left: 200px; transform: rotate(180deg);}
button.nav-arrow.next-arrow {right: 200px; bottom: 135px;}
.nav-arrow:hover {opacity: 1; color: var(--orange); }
.nav-arrow span{display: flex; justify-content: center; align-items: center; width: 100%; max-width: 20px;}
.nav-arrow span img{ width: 100%; max-width: 20px; filter: invert(1);}
.testimonial-slider {position: relative; z-index: 1; flex: 1 1 auto; width: 100%; max-width: 700px; margin: 0 auto; }
.testimonial-card {display: none; text-align: center; }
.testimonial-card.active {display: block; }
.testimonial-quote {font-size: 40px; color: var(--orange, #ff6b00); margin-bottom: 20px; text-align: left; position: relative; z-index: 2; }
.testimonial-text {font-size: 16px; line-height: 1.8; margin-bottom: 40px; color: var(--white); opacity: 0.8; text-align: center; }
.testimonial-author {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; position: relative; }
.author-avatar {width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); padding: 3px; }
.author-info {text-align: center; }
.author-name {display: block; font-size: 14px; font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.author-role {font-size: 12px; color: var(--white); opacity: 0.5; }





/* ═══════════════════════════════════════════════════════════════════════════════ CTA SECTION ═══════════════════════════════════════════════════════════════════════════════ */ 
.cta-section {padding: 0 0 80px; background: var(--bg-primary); }
.cta-card {position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 80px 40px; text-align: center; overflow: hidden; margin: 0 auto; }
.cta-card::before {content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; z-index: 0; }
.cta-card::after {content: ""; position: absolute; top: 0; left: 40%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient( circle, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0) 70% ); border-radius: 50%; pointer-events: none; z-index: 0; }
.cta-content {position: relative; z-index: 1; }
.cta-content h2 {font-size: 52px; font-weight: 700; }
.cta-content p {font-size: 16px; color: var(--white); opacity: 0.7; line-height: 1.6; margin-bottom: 40px; display: block; text-align: center; }
.cta-content .common-btn{justify-content: center;}
.cta-content .common-btn a{background: var(--orange-red); color: #fff; gap: 10px}
.cta-content .common-btn span{display: flex; justify-content: center; align-items: center; width: 100%; max-width: 20px;}
.cta-content .common-btn span img{width: 100%; max-width: 20px; filter: invert(1);}

/* ═══════════════════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════════════════ */ 
.footer {background: #140f0f; padding: 30px 0 0; }
.footer-grid {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding-bottom: 50px; border-bottom: 1px solid #F6A327; position: relative; }
.footer-column {flex: 0 0 auto; }
.about-col {flex: 0 0 320px; padding-right: 20px; }
.footer-logo {display: block; width: 100%; max-width: 100px; }
.footer-logo img {width: 100%; max-width: 100px; margin: 0 0 20px; }
.about-col h4 {color: var(--white) !important; font-size: 20px !important; font-weight: 600 !important; }
.about-col p {color: var(--white); line-height: 1.8; font-size: 16px; margin: 0; text-align: left; }
.social-links {display: grid; grid-template-columns: repeat(2, 45px); gap: 15px;}
.social-links span{display: flex; justify-content: center; align-items: center;}
.social-links img{width: 100%; max-width: 20px; filter: invert(76%) sepia(32%) saturate(3801%) hue-rotate(347deg) brightness(101%) contrast(91%);}
.social-circle {width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); transition: var(--transition); font-size: 16px; }
.social-circle:hover { background: var(--orange); color: var(--bg-primary); transform: translateY(-3px);}
.social-circle:hover span img {filter: invert(1);}
.footer-column h4 {color: var(--orange); font-size: 20px; font-weight: 500; text-transform: capitalize; padding: 0 0 20px; }
.footer-column ul li {margin-bottom: 16px; }
.footer-column ul li a {color: var(--white); transition: var(--transition); font-size: 16px; }
.footer-column ul li a:hover {color: var(--orange); opacity: 1; }
.contact-item {margin-bottom: 16px; color: var(--white) !important; font-size: 13px; line-height: 1.6; }
.contact-item a {color: var(--white); display: block; }
.contact-item a:hover{color: var(--orange);}
.footer-bottom {display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 14px; color: var(--white); border-top: none; }
.footer-bottom p, .footer-bottom a {color: rgba(255, 255, 255, 0.7); margin: 0; font-size: 14px;}
.footer-designer {color: rgba(255, 255, 255, 0.7); }




/* ═══════════════════════════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════════════════════════ */ 
.fade-in {opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible {opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════════════════════════════════════════════ cloud ═══════════════════════════════════════════════════════════════════════════════ */
 .cloud-wrapper {padding: 130px 0 80px; }
.cloud-inner-wrapper {display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.cloud-left {width: 100%; max-width: 990px; }
.cloud-left h2 {color: #fff; }
.sub-text {color: #aaa; width: 100%; max-width: 500px; width: 100%; margin-bottom: 40px; }
.cloud-box-wrapper {display: flex; flex-wrap: wrap; gap: 20px; padding: 30px 0 0; }
.cloud-box {background: linear-gradient(145deg, #1c1c1c, #2a2a2a); padding: 25px 65px 25px 25px; border-radius: 15px; transition: 0.3s; position: relative; }
.cloud-box.small {width: 100%; max-width: 330px; }
.cloud-box.big {width: 100%; max-width: 550px; border: 1px solid #ffffff1c; }
.cloud-box p {color: #bbb; text-align: left; }
.cloud-box h3 {font-size: 20px; }
.cloud-box:nth-child(1), .cloud-box:nth-child(4) {background: linear-gradient(145deg, #2a2a2a, #4b1f0d); }
.cloud-right {width: 100%; max-width: 300px; }
.cloud-right img {width: 100%; max-width: 300px; }
.cloud-box:hover {transform: translateY(-5px); }
.cloud-box {position: relative; }
.arrow {position: absolute; top: 46px; right: 15px; width: 35px; height: 35px; background: #ff9d3c; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.arrow img {width: 100%; max-width: 20px; transform: rotate(-45deg); }



.common-li {margin: 15px 0; }
.common-li li {position: relative; padding: 5px 0 10px 35px; font-size: 16px; line-height: 1.6; color: #dfd5d5}
.common-li li::before {content: ""; position: absolute; background: url(../images/icons/cloud.png) no-repeat center center/cover; width: 20px; height: 20px; top: 10px; left: 0; filter: invert(83%) sepia(29%) saturate(5602%) hue-rotate(346deg) brightness(99%) contrast(93%); }




/* sitemap css */
.sitemap-wrapper {padding: 80px 0; }
.sitemap li {position: relative; padding: 0 0px 0 25px; margin: 0 0 12px; }
.sitemap li::before {content: ""; position: absolute; left: 8px; top: 0; width: 2px; height: 100%; background: rgba(255,255,255,0.1); }
.sitemap li::after {content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; background: #f4a31e; border-radius: 50%; }
.sitemap a {color: #ccc; text-decoration: none; font-size: 16px; transition: 0.3s; }
.sitemap a:hover {color: #f4a31e; padding-left: 5px; }
.sitemap ul {margin-top: 10px; margin-left: 15px; padding-left: 10px; border-left: 1px dashed rgba(255,255,255,0.1); }
/* sitemap css */

/* contact css */ 
.contact-section {background: linear-gradient(135deg, #0e0d0d, #0f0f0f); padding: 80px 0; color: #fff; }
.contact-wrapper {display: flex; align-items: center; justify-content: center; gap: 60px; }
.contact-left {width: 40%; }
.sub-title {color: #f4a31e; font-size: 14px; display: block; margin-bottom: 10px; }
.contact-left h2 {font-size: 42px; margin-bottom: 30px; }
.contact-item {display: flex; gap: 15px; align-items: center; margin-bottom: 25px;}
.contact-item .contact-icon {width: 60px; height: 60px; border-radius: 50%; border: 5px solid #f4a31e; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 0 15px rgba(244,163,30,0.3); min-width: 60px;}
.contact-icon img {width: 100%; max-width: 20px; filter: invert(1); }
.contact-item p {color: #aaa; font-size: 14px; margin: 0; }
.contact-item h4 {font-size: 16px; color: #fff; }
.contact-social {display: flex; gap: 15px; margin-top: 25px; }
.contact-social a {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); transition: 0.3s; }
.contact-social img {width: 20px; height: 20px; filter: brightness(0) invert(1); /* white icons */}
.contact-social a:hover {background: #f4a31e; transform: translateY(-4px); box-shadow: 0 10px 20px rgba(244,163,30,0.4); }
.contact-social a:hover img {filter: brightness(0); /* black icon on orange */}
.get-in-touch-wrapper {margin: 80px 0; }
.get-in-touch-form {width: 100%; max-width: 550px; border: 1px solid #ffffff61; padding: 0px 30px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.get-in-touch-inner-wrapper {display: flex; justify-content: center; align-items: stretch; gap: 50px}
.get-in-touch-form h2 {color: var(--dark-blue); text-align: left; }
.form-md {width: 100%; text-align: center; margin: 32px auto 32px auto; }
.form-md .form-group {max-width: 500px; }
.form-group {margin: 25px 0; position: relative; }
.form-md input, .form-md textarea, .form-md select {position: relative; display: block; width: 100%; border-bottom: 1px solid #ffffff63; margin: 0px auto; padding: 15px 0px; outline: none !important; font-size: 16px; color: #fff; transition: all .2s ease-in-out; }
.form-md label {position: absolute; top: 18px; left: 0px; text-align: left; display: inline-block; height: 14px; line-height: 14px; font-size: 16px; font-weight: 400; color: #fff; margin: 0px auto; cursor: text; transition: all .15s ease-in-out; }
.form-md input:hover, .form-md input:focus, .form-md textarea:hover, .form-md textarea:focus {border-bottom: 1px solid #303030; }
.form-md input:valid + label, .form-md input:focus + label, .form-md textarea:valid + label, .form-md textarea:focus + label {top: -6px; color: var(--orange); font-weight: bold; }
.form-md .common-btn {justify-content: flex-start; }
.map {display: flex; justify-content: center; align-items: center; width: 100%; max-width: 90%; border-radius: 15px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; margin: 0 auto 80px; }
.map iframe {height: 100%; min-height: 500px; }
input:-webkit-autofill{background-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #f7f7f7 !important; box-shadow: 0 0 0 50px #141212 inset !important;}










/* inner pages css */ 
.inner-page-banner-wrapper {background: url(../images/banner/inner-banner.jpg) no-repeat center center/cover; width: 100%; height: 400px; position: relative; }
.banner-text {height: 100%; display: flex; justify-content: flex-end; align-items: flex-start; flex-direction: column; gap: 10px; position: relative; }
.inner-page-banner-wrapper .fluid-container {height: 100%; }
.banner-text h1 {color: var(--yellow); text-align: center; font-size: 48px;}
.banner-text ol {display: flex !important; justify-content: center; align-items: center; gap: 10px; }
.breadcrumb-migration-approach-img img {width: 100%; max-width: 25px; filter: invert(1); transform-origin: top center; }
.banner-text nav ol {display: flex; justify-content: flex-start; align-items: center; gap: 20px; padding: 0px 0px 10px; }
.banner-text nav ol li a, .banner-text nav ol li span {color: var(--yellow); display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 500; text-align: center; }
.breadcrumb-icon img {width: 100%; max-width: 30px; filter: invert(83%) sepia(29%) saturate(5602%) hue-rotate(346deg) brightness(99%) contrast(93%); }


/* our story css */ 
.our-story-wrapper {padding: 80px 0; }
.our-story-inner-wrapper h2, .our-story-inner-wrapper h3, .our-story-inner-wrapper p {text-align: center; }
.our-story-inner-wrapper {width: 100%; max-width: 1000px; margin: auto; background-image: linear-gradient(135deg, rgb(118 116 116 / 55%), rgb(20 30 40 / 50%)); border: 1px solid rgb(255 255 255 / 15%); border-radius: 15px; box-shadow: 0 8px 32px rgb(0 0 0 / 46%), inset 0 1px 0 rgba(255, 255, 255, 0.15); color: white; padding: 40px 40px 25px;}
.global-presence {display: flex; justify-content: center; align-items: center; gap: 50px; border: 1px solid #f4a31e94; padding: 50px; border-radius: 10px;}
.global-presence-left {width: 100%; max-width: 500px; position: relative; }
.global-presence-left img {width: 100%; max-width: 500px; box-shadow: 0 20px 50px rgba(0,0,0,0.6),0 0 0 2px rgba(244,163,30,0.2); }
.global-presence-right {width: 100%; max-width: 800px; }
.global-presence:nth-child(2) {margin: 70px 0 0 0 ; flex-direction: row-reverse; }
.global-presence-left::before {content: ""; position: absolute; inset: -2px; border-radius: 22px; background: linear-gradient(135deg, transparent, var(--orange), transparent); opacity: 0.6; z-index: -1; filter: blur(10px); }
.global-presence-right p {text-align: left; }




.differentiators-wrapper {padding: 80px 0px; }
.differentiators-inner-wrapper {display: flex; justify-content: center; align-items: stretch; gap: 50px; }
.differentiators-inner {width: 100%; max-width: 400px; border: 1px solid #ffffff70; padding: 30px 30px 15px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.differentiators-inner span {display: flex; justify-content: center; align-items: center; width: 100%; max-width: 70px; margin: 0 auto 25px; height: 70px; background: var(--orange); border-radius: 50%; }
.differentiators-inner span img {width: 100%; max-width: 50px; filter: invert(1); }
.differentiators-content h3, .differentiators-content p {text-align: center; }
/* our story css */



 /* cloud migration */
.cloud-migration-wrapper {padding: 80px 0; }
.cloud-migration-inner-wrapper {display: flex; justify-content: center; align-items: center; gap: 50px}
.cloud-migrtion-left {width: 100%; max-width: 500px; }
.cloud-migrtion-left img {width: 100%; max-width: 500px; }
.cloud-migration-right {width: 100%; max-width: 800px; }
.cloud-migration-right p {text-align: left; }
.migration-inner-wrapper {background: #2b2b2b; padding: 50px; position: relative; border-radius: 10px; }
.migration-inner-wrapper::before {content: ""; position: absolute; top: 70px; left: 85px; transform: translate(-50%, -50%); width: 56%; height: 100%; background: radial-gradient(circle, rgb(255 107 0 / 24%) 0%, rgba(255, 107, 0, 0) 42%); border-radius: 50%; z-index: 0; overflow: hidden; }
.migration-inner-wrapper h2 {text-align: center; }
.migration-inner-wrapper p {text-align: center; }
.migration-stats {display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: 20px 0 0; }
.stat-box {flex: 1; min-width: 200px; }
.stat-box h3 {text-align: center; }
.stat-box p {text-align: center; }


.migration-approach-wrapper {padding: 80px 0; }
.migration-approach-wrapper.inner{padding: 0 0 80px;}
.migration-approach-wrapper h2, .migration-approach-wrapper  p{text-align: center;}
.migration-approach {display: flex; flex-wrap: wrap; gap: 40px; padding: 40px 0 0; justify-content: center; align-items: stretch; }
.migration-approach-inner {display: flex; align-items: flex-start; gap: 20px; width: 100%; max-width: 600px; }
.migration-approach-inner .migration-approach-img {width: 80px; height: 80px; flex-shrink: 0; -webkit-backdrop-filter: blur(20px); background-image: linear-gradient(135deg, rgb(116 117 118 / 35%), rgba(20, 30, 40, 0.4)); border: 1px solid rgb(255 255 255 / 39%); border-radius: 50%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); color: white; display: flex; justify-content: center; align-items: center;}
.migration-approach-inner .migration-approach-img img {width: 100%; max-width: 45px; filter: invert(1); }
.migration-approach-content h3 {font-size: 26px; }
.migration-approach-content P {text-align: left; }
/* cloud migration */ 


/* Gen ai css */ 
.serverless-wrapper {padding: 80px 0px; }
.serverless-wrapper h2, .serverless-wrapper p {text-align: center; }
.serverless-inner {display: flex; flex-direction: column; gap: 20px; margin: 40px 0 0;}
.serverless-inner-inside {display: flex; justify-content: space-between; align-items: center; gap: 30px; background: linear-gradient(45deg, #310522, #002d35); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 30px; transition: 0.3s;}
.serverless-inner-inside.full {width: 100%;}
.serverless-inner-row {display: flex;gap: 20px;}
.serverless-inner-row .serverless-inner-inside{display: block;}
.serverless-inner-row .serverless-inner-inside .service-content{max-width: 100%;}
.service-content {max-width: 55%;}
.service-content p{text-align: left;}
.service-image{width: 100%; max-width: 500px; margin: auto; display: flex; justify-content: center; align-items: center;}
.service-image img {width: 100%; max-width: 300px;}
.serverless-inner-row .serverless-inner-inside .service-image{margin: auto;}
.serverless-inner-inside:hover {transform: translateY(-5px);}


.ai-services-dark.inner{padding: 0 0 80px;}
.ai-services-dark h2{text-align: center; padding: 0 0 20px;}
.ai-services-inner{background: rgba(30, 40, 50, 0.45); -webkit-backdrop-filter: blur(20px); background-image: linear-gradient(135deg, rgb(116 117 118 / 35%), rgba(20, 30, 40, 0.4)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); color: white; padding: 50px 80px;}
.service-row {display: flex; align-items: center; justify-content: space-between; margin-bottom: 70px; gap: 40px;}
.service-row.reverse {flex-direction: row-reverse;}
.service-text {flex: 1;}
.service-text h3 { font-size: 24px; margin-bottom: 12px; color: #ffffff;}
.service-text a { color: #38bdf8; text-decoration: none; font-size: 14px; transition: 0.3s;}
.service-text a:hover {color: #22d3ee;}
.service-icon {width: 100%; max-width: 400px; border-radius: 10px;}
.service-text p{text-align: left;}
.service-icon img { width: 100%; max-width: 400px;}
.service-row:last-child{margin-bottom: 0;}



.future-ready-wrapper {padding: 80px 0; }
.future-ready-inner-wrapper{width: 100%; max-width: 950px; margin: auto;}
.future-ready-inner-wrapper h2, .future-ready-inner-wrapper h3, .future-ready-inner-wrapper p {text-align: center; }
.future-ready-inner ul {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 40px; padding: 30px 0 0; }
.future-ready-inner ul li {width: 100%; max-width: 600px; background: #ffffffe0; padding: 20px 20px 20px 40px; border-radius: 10px; color: #050505; position: relative; transition: 0.5s ease;}
.future-ready-inner ul li::before {content: ""; position: absolute; background: url(../images/icons/checked.png) no-repeat center center/cover; width: 20px; height: 20px; top: 21px; left: 10px; }
.future-ready-inner ul li:hover{background: linear-gradient(to right, #f4a31ee8, #ffc360b3);}
 



.advantage-wrapper {padding: 0px 0 80px; text-align: center; color: #fff; }
.advantage-inner-wrapper {display: flex; gap: 25px; flex-wrap: wrap; justify-content: center; padding: 40px 0 0; }
.advantage-inner {width: 100%; max-width: 260px; background: #111; padding: 30px 20px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 38%); transition: 0.3s ease; }
.advantage-inner.inner {max-width: 600px; }
.advantage-inner > span:first-child {width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; border-radius: 50%; background: rgba(244,163,30,0.1); }
.advantage-inner > span:first-child img {width: 35px; filter: brightness(0) saturate(100%) invert(69%) sepia(70%) saturate(500%) hue-rotate(350deg);}
.advantage-inner > span:nth-child(2) {display: block; font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #fff; }
.advantage-inner p {text-align: center; }
 .advantage-inner:hover {border-color: #f4a31e; box-shadow: 0 10px 30px rgba(244,163,30,0.2); }
.advantage-inner:hover > span:first-child {background: #f4a31e; }
.advantage-inner:hover > span:first-child img {filter: brightness(0);}
/* Gen ai css */


/* cyber security css */
.cyber-solutions-inner-wrapper {display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 30px}
.cyber-solutions-inner {max-width: 350px; background: #111; padding: 25px; border-radius: 12px; border: 1px solid #f4a31e73; color: #fff; transition: 0.3s ease;  text-align: center;}
.cyber-solutions-inner h3, .cyber-solutions-inner p {text-align: center; }
.cyber-solutions-inner.btn.btn-primary {margin: auto; }
.cyber-solutions-modal {position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: 0.3s ease; z-index: 9999; }
.cyber-solutions-modal.active {opacity: 1; visibility: visible; }
.modal-content {position: relative; width: 90%; max-width: 600px; padding: 30px; border-radius: 16px; background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); color: #fff; transform: scale(0.9); transition: 0.3s ease; overflow: hidden; }
.cyber-solutions-modal.active .modal-content {transform: scale(1); }
.modal-content::before {content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 16px; background: linear-gradient(135deg, #f4a31e, transparent, #f4a31e); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.close-btn {position: absolute; top: 12px; right: 15px; font-size: 20px; cursor: pointer; color: #ffffff; transition: 0.3s; }
.close-btn:hover {color: #f4a31e; }
.cyber-solutions-inner .common-btn {display: flex; justify-content: center;align-items: center; margin: 20px 0 0;}

/* cyber security css */

/* Data engeneeir and analytics */

.unleash-wrapper {padding: 80px 0px;}
.unleash-inner-wrapper {display: flex; gap: 40px; align-items: flex-start;}
.unleash-inner-wrapper {display: flex; gap: 40px; height: 500px; }
.unleash-left{text-align: left;}
.unleash-left {width: 100%; max-width: 460px; position: sticky; top: 0; height: fit-content;}
.unleash-right {width: 100%; max-width: 800px; overflow-y: auto; height: 450px; padding-right: 10px;}
.unleash-right-inner {margin-bottom: 40px;}
.unleash-right-inner span {display: block; font-weight: 600; margin-bottom: 15px; font-size: 30px; color: #fff;}
.unleash-inner {padding: 20px; margin-bottom: 20px; border-radius: 8px; border: 1px solid #f4a31ea6;}



.scale-inner-wrapper {display: flex; gap: 50px; align-items: flex-start;}
.scale-left {width: 100%; max-width: 730px;}
.scale-right {width: 100%; max-width: 530px;}

.scale-card {background: var(--bg-footer); padding: 18px 20px; border-radius: 10px; border: 1px solid #222; position: relative; padding-left: 45px; transition: all 0.3s ease;}
.scale-card::before {content: "➜"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--orange);}
.scale-card:hover {border-color: var(--orange); box-shadow: 0 0 15px rgba(255, 122, 0, 0.25); transform: translateY(-4px);}

.scale-bottom {margin-top: 20px;}


.key-features-wrapper {padding: 0 0 80px;}
.key-features-inner-wrapper {display: flex; flex-wrap: wrap; justify-content: center;}
.key-features-wrapper h2{text-align: center; margin: 0px 0 30px;}
.key-features-inner {width: 100%; max-width: 407px;padding: 40px 30px; background: var(--bg-footer); border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;transition: 0.3s ease; }
.key-features-inner p{text-align: left;}
.key-features-inner:nth-child(3n) {border-right: none;}
.key-features-inner span {display: block;margin-bottom: 20px;}
.key-features-inner span img {width: 40px; filter: invert(1);}

/* Data engeneeir and analytics */


/* ml ops */
.why-ml-inner-wrapper h2, .why-ml-inner-wrapper p{text-align: center; }
.why-ml-inner-wrapper{width: 100%; max-width: 900px; margin: auto;}
.why-ml-inner-wrapper:nth-child(2){padding: 50px 0 0;}






.productivity-wrapper {padding: 50px 0; position: relative;   overflow: hidden; }
.productivity-inner-wrapper {display: flex; gap: 30px; justify-content: center; align-items: stretch; flex-wrap: wrap; transition: transform 0.4s ease-in-out;}
.productivity-inner { width: 100%; max-width: 400px; border: 1px solid #ffffff54; border-radius: 10px; overflow: hidden; background: #1c1c1c;}
.productivity-inner img {width: 100%; height: 220px; object-fit: cover; display: block;}
.productivity-content {padding: 15px;color: #fff;}
.productivity-content h3, .productivity-content p {text-align: center;}


/* ml ops */


/* ai ops */
.observability-inner-wrapper {display: flex; align-items: center; justify-content: space-between; gap: 40px; border: 1px solid #ffffff6e; padding: 30px; border-radius: 10px;}
.observability-inner-wrapper:nth-child(2n){flex-direction: row-reverse; margin: 60px 0px;}
.observability-left {width: 100%; max-width: 700px;}
.observability-right {width: 100%; max-width: 500px;}
.observability-right img {width: 100%; border-radius: 12px; display: block;}
.observability-inner {display: flex; gap: 20px; margin-top: 20px; justify-content: space-between; align-items: flex-start;}
.observability-inner-main {width: 100%; max-width: 220px;}
.observability-inner-main span {display: inline-block; margin-bottom: 10px;}
.observability-inner-main span img {width: 40px; height: 40px;filter: invert(83%) sepia(29%) saturate(5602%) hue-rotate(346deg) brightness(99%) contrast(93%);}
.observability-inner-main h4 {font-size: 18px; margin-bottom: 8px;}
.observability-inner-main p {text-align: left;}

/* SECTION */
.ai-ops-wrapper {padding: 80px 0;}
.ai-ops-inner-wrapper { display: flex; gap: 25px;}
.ai-ops-inner {flex: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #0b2a52 0%, #071a33 100%); position: relative; border: 1px solid #ffffff59; transition: 0.3s ease;}
.ai-ops-inner:hover {transform: translateY(-6px);}
.ai-ops-top {height: 140px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #1e4b8f, #0b2a52);}
.ai-ops-top span {display: inline-block;}
.ai-ops-top span img { width: 60px; height: 60px; filter: invert(1);}
.ai-ops-bottom {padding: 22px; position: relative;}
.ai-ops-bottom h3 {color: #ffffff; font-size: 18px; margin-bottom: 10px; font-weight: 600;}
.ai-ops-bottom p {text-align: left;}





/* ai ops */


/* well architected css */

.evolution-wrapper h2{text-align: center;}
.evolutoin-inner-wrapper {position: relative; max-width: 800px; margin: 30px auto 0; padding-left: 50px;}
.evolutoin-inner-wrapper::before {content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 3px; background: #ffffffc7;}
.evolutoin-inner {position: relative; margin-bottom: 30px; padding-left: 10px;}
.evolutoin-inner::before {content: ""; position: absolute; left: -44px; top: 0; width: 20px; height: 20px; background: var(--orange); border-radius: 50%; z-index: 2; bottom: 0; margin: auto;}
.evolutoin-content {-webkit-backdrop-filter: blur(20px); background-image: linear-gradient(135deg, rgb(116 117 118 / 35%), rgba(20, 30, 40, 0.4)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); color: white; padding: 10px 20px;}
.evolutoin-content span {display: block; font-weight: 700; margin-bottom: 6px; color: #fff; font-size: 20px;}
.evolutoin-content:hover {transform: translateX(5px);transition: 0.3s ease;}
.evolutoin-content p{text-align: left;}





/* SECTION BACKGROUND */
.pillars-wrapper {padding: 80px 0;}
.pillars-wrapper h2{text-align: center;}
.pillars-inner-wrapper {display: flex; gap: 60px 20px; justify-content: space-around; align-items: stretch; flex-wrap: wrap; margin: 50px 0 0;}
.pillar-inner {width: 100%; max-width: 373px; text-align: center; padding: 70px 20px 20px; border-radius: 6px; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.08); background: rgba(255, 255, 255, 0.02); border: 1px solid rgb(255 255 255 / 30%);}
.pillar-inner span {position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; background: linear-gradient(180deg, #f97316, #ea580c); display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);}
.pillar-inner span img { width: 30px; filter: invert(1);}
.pillar-inner h3 {font-size: 25px;}
.pillar-inner p{text-align: center;}


.review-inner-wrapper{width: 100%; max-width: 900px; margin: auto;}
.review-inner-wrapper p, .review-inner-wrapper h2{text-align: center;}
.review-inner-wrapper .hero-buttons{margin-bottom: 0;}


.waf-wrapper{padding: 80px 0;}
.waf-inner {display: flex; align-items: center; gap: 50px; margin-bottom: 60px;}
.waf-inner.reverse { flex-direction: row-reverse;}
.waf-image {width: 100%; max-width: 600px;}

.waf-image img {width: 100%; border-radius: 12px; display: block; transition: 0.4s ease; max-width: 600px; height: 300px;}
.waf-content { width: 100%; max-width: 660px;}
.waf-content p{text-align: left;}
.waf-final {margin-top: 40px; padding: 25px; background: rgba(255,255,255,0.05); border-left: 4px solid #38bdf8; border-radius: 8px;}
.waf-final p {margin: 0; color: #e2e8f0; line-height: 1.6;}
.waf-inner-wrapper{padding: 0 0 30px;}
.waf-inner-wrapper h2, .waf-inner-wrapper p{text-align: center;}
.waf-inner:last-child{margin-bottom: 0;}


/* inner pages css */ 


/* error page */ 
	.error-banner-wrapper {height: 400px; position: relative; }
	.error-content-wrapper {padding: 50px 0px; }
	.error-content {position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; }
/* error page */ 

    #to-top {cursor: pointer;position: fixed;bottom: 25px;right: 25px;width: 40px;z-index: 9;border-radius: 50%;rotate: 0deg;}
    #to-top img{filter: invert(48%) sepia(80%) saturate(3981%) hue-rotate(347deg) brightness(100%) contrast(102%);}