/*!
Theme Name: Godspeedio
Theme URI: http://htekz.com/
Author: Hassan
Author URI: http://htekz.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: godspeedio
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Godspeedio is based on Wordpress https://wordpress.org/, (C) 2012-2020 Automattic, Inc.
Wordpress is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
:root {
  --primary: #2d5bff;
  --navy: #000745;
  --purple: #6f49ff;
  --purple-dark: #633be8;
  --light-gray: #e8edf2;
  --yellow: #f0f299;
  --text-dark: #000435;
  --blue-bg: #3d52ef;
}
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&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&display=swap");
@font-face {
  font-family: "Comfortaa";
  src: url("fonts/Comfortaa-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("fonts/Comfortaa-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("fonts/Comfortaa-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Variable.ttf") format("truetype");
  font-weight: 100 900; /* supports all weights */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.ttf") format("truetype");
  font-weight: 100 900; /* supports all weights */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "open-sauce";
  src: url("fonts/open-sauce-one-latin-700-normal.ttf") format("truetype");
  font-weight: 100 900; /* supports all weights */
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "Jost", sans-serif;
  color: var(--text-dark);
  background-color: #fafafa;
  overflow-x: hidden;
} /* Hero Styles */
.hero-title {
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-size: 60px;
  color: #000845;
  text-align: center;
  font-family: "Comfortaa";
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  -webkit-text-stroke: 1px #000;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.highlight {
  background: linear-gradient(90deg, #fcffef, #cbfb5a);
  padding: 0 10px;
  display: inline-block;
  line-height: 1;
}
.success-icon-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
  top: -2px;
}
.px-50 {
  padding: 0px 100px !important;
} /* .success-icon-wrap {    display: inline-flex;    align-items: center;    vertical-align: middle;    position: relative;    top: -2px;    margin-left: 10px;} */
.icon-part {
  width: 22px;
  height: 35px;
  border-radius: 40px 0 0 40px;
}
.dark-hf-circle {
  background: #000435;
  border: 1px solid #000435;
}
.white-hf-circle {
  background-color: #fff;
  border: 1px solid #101010;
}
.purple-hf-circle {
  background: #b4b4ff;
  border: 1px solid #b4b4ff;
}
.icon-part.purple {
  border-radius: 0 40px 40px 0;
}
.hero-subtitle {
  font-size: 18px;
  font-family: "Inter", sans-serif;
  color: #000845;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.06em;
  text-align: center;
}

nav.navbar .booking-btn {
    font-size: 14px;
    font-family: "General Sans", sans-serif;
    color: #ffffff;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    background: linear-gradient(to right, #809CF8, #E853F6);
    transition: 0.3s ease;
    border-radius: 30px;
    padding: 15px 25px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
nav.navbar .login-btn {
    line-height: 1;
    letter-spacing: -0.01em;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    gap: 8px;
    color: #000845;
    font-size: 16px;
    font-weight: 300;
}
nav.navbar .login-btn .fa-circle-user {
    font-size: 20px;
}
ul.navbar-nav li a {
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    color: #64636a;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    padding: 0px 15px !important;
    font-weight: 300;
    position: relative;
}
ul.navbar-nav li a:hover::before,
ul.navbar-nav li a.active::before {
    content: "";
    width: 5px;
    height: 5px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}
.nav-link:focus, .nav-link:hover {
    color: #c66af6;
}
nav.navbar {
    background-color: #f9f9f9;
    box-shadow: 0px 4px 40px #d7d7d7;
    padding: 20px 0px;
}
.btn-navy {
    background-color: var(--navy);
    color: #ffffff;
    transition: 0.3s;
    font-size: 18px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}


.btn-navy:hover {
    background-color: #00065a;
    color: white;
} 
.team-img {
    max-width: 650px;
    /* margin-bottom: -50px; */
    width: 100%;
    position: relative;
    z-index: 1;
}
.bg-navy {
  background-color: var(--navy);
}
.rounded-extra {
  border-radius: 44px;
}
.stats-outer-container {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.stat-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stat-box h3 {
  font-size: 74.73px;
  font-family: Inter, sans-serif;
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.caption-start-box {
  font-size: 16px;
  font-family: Inter, sans-serif;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.06em;
}
.stat-purple {
  background-color: var(--purple-dark);
  border-radius: 20px !important;
}
.stat-gray {
  background-color: var(--light-gray);
  border-radius: 20px !important;
  justify-content: center;
  align-items: center;
}
.stat-gray h3,
.stat-gray .caption-start-box {
  color: #000;
  margin-bottom: 10px;
}
.stat-gray h3 {
  margin-top: 10px;
}
.stat-blue {
  background-color: var(--blue-bg);
  border-radius: 20px !important;
  justify-content: center;
  align-items: center;
}
.stat-blue h3,
.stat-blue .caption-start-box {
  color: #fff;
  margin-bottom: 10px;
}
.stat-blue h3 {
  margin-top: 10px;
} /* .stat-yellow {    background-color: var(--yellow);    border-radius: 20px !important;} */
.stat-yellow {
  background-color: var(--yellow);
  border-radius: 20px !important;
  justify-content: center;
  align-items: center;
}
.stat-yellow h3,
.stat-yellow .caption-start-box {
  color: #000;
  margin-bottom: 10px;
}
.stat-yellow h3 {
  margin-top: 10px;
}
.stat-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.rotate-negative-45 {
  transform: rotate(-45deg);
}
.hero-section {
  padding-bottom: 0;
}
.stats-outer-container {
  /* margin-top: -80px; */
  box-shadow: 0 30px 60px rgba(0, 4, 53, 0.15);
} /* Logos Bar */
.trusted-bar {
  border-bottom: 1px solid #f0f0f0;
}
.partner-logo-img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  background-color: #fff;
}
.trusted-bartner {
  font-size: 20px;
  font-family: Inter, sans-serif;
  color: #030207;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-align: center;
} /* Features Section */
.feature-title {
  font-size: 3.125rem;
  font-family: "Comfortaa";
  color: #000845;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: center;
}
.custom-accordion-item {
  border-bottom: 1px solid #3d52ef;
  transition: 0.3s;
  padding: 0px 25px;
}
.accordion-header-btn {
  width: 100%;
  border: none;
  background: none;
  padding: 25px 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000845;
  font-weight: 400;
  font-size: 18px;
  font-family: "Inter", sans-serif;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: #000845;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
}
.partner-carousel .owl-item {
  /* background: #fff; */
  padding: 15px;
  border-radius: 5px;
}
.custom-accordion-item.active .accordion-content {
  max-height: 200px;
  padding-bottom: 20px;
  padding-bottom: 30px;
}
.custom-accordion-item.active {
  background-color: #f8f0ff;
  border-bottom: 1px solid var(--primary);
}
.toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: black;
  font-size: 0.8rem;
}
.active .toggle-icon {
  border-color: var(--primary);
  color: #000000;
  background-color: transparent;
}
.image-side-container {
  border-radius: 40px; /* height: 500px; */ /* Desktop height */
  overflow: hidden;
  position: relative;
  margin-left: 50px;
} /* Image control */
.image-side-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Prevent stretch, crop properly */
  display: block;
}
.diff-list-item img {
  margin-right: 15px;
  margin-top: 3px;
  height: fit-content;
  width: 20px;
}
.difference-section h2 {
  font-size: 50px;
  font-family: "Comfortaa";
  color: #000845;
  font-weight: 500;
  margin-bottom: 60px;
} /* Testimonial Section */
.testimonial-grid-card {
  background-color: #3151f1;
  border-radius: 30px;
  padding: 60px;
  color: white;
  padding-right: 0px;
}
.quote-link {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9rem;
}
.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.logo-tile {
  background: white;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.logo-tile img {
  max-height: 25px;
  object-fit: contain;
} /* Difference Section */
.diff-list-item {
  border-bottom: 2px solid #aec8ff;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
.diff-list-item:last-child {
  border-bottom: none;
}
.check-icon {
  color: #a4f43b;
  font-size: 1.2rem;
  margin-right: 15px;
  margin-top: 5px;
}
.btn-gradient-purple {
  background: linear-gradient(to right, #809cf8, #e853f6);
  transition: 0.3s ease;
  font-size: 16px;
  font-family: "General Sans", Arial, sans-serif;
  color: #ffffff;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.16px;
  border-radius: 30px;
  padding: 15px 25px;
}
.btn-gradient-purple:hover {
  background: var(--navy);
  color: #dddddd;
}
.dashboard-growth-section {
  background: #f7f7f8;
  padding: 80px 0px;
} /* Dashboard Growth */
.dashboard-growth-inner {
  background: #ffffff;
  border: 1px solid #f8f8f8;
  padding: 50px;
}
.dashboard-growth-section img {
  width: 100%;
}
.dashboard-growth-section h2 {
  font-size: 50px;
  font-family: "Comfortaa";
  color: #1f253d;
  font-weight: 500;
  letter-spacing: -0.16px;
}
.dashboard-growth-section p {
  font-size: 19px;
  font-family: "Satoshi";
  color: #1f253d;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0;
}
.feature-grid-small .fw-bold {
  font-size: 16px;
  font-family: "open-sauce";
  color: #1f253d;
  font-weight: 700 !important;
  line-height: 34px;
  letter-spacing: 0;
}
.feature-grid-small {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feat-item-mini {
  display: flex;
  align-items: center;
  gap: 15px;
  background: white;
  padding: 15px 0px;
  border-radius: 12px;
}
.bi-arrow-right-short {
  width: 30px;
  height: 30px;
  transform: rotate(-30deg);
}
.dashboard-growth-inner a:hover {
  background: linear-gradient(to right, #809cf8, #e853f6);
  transition: 0.3s ease;
  color: #fff;
}
.feat-icon-sm {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.bg-cream {
  color: #ff9800;
  background-color: #f6f6f6;
}
.feat-item-mini:hover .feat-icon-sm {
  box-shadow: 0px 3px 2px #00000045;
}
.dashboard-growth-inner a {
  font-size: 16px;
  font-family: "Satoshi";
  color: #1f253d;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0;
  border: 1px solid #9d9d9d;
  padding: 15px 25px;
}
.services-section {
  padding: 30px 0px;
}
section.services-section h2 {
  font-size: 50px;
  font-family: "Comfortaa";
  color: #000845;
  font-weight: 500;
  letter-spacing: -3px;
}
.services-section .text-muted {
  font-size: 18px;
  font-family: "Inter", sans-serif;
  color: #000845 !important;
  font-weight: 400;
  line-height: 150%;
}
.bg-pink-light {
  background-color: #fff0f5;
  color: #e91e63;
}
.bg-teal-light {
  background-color: #f0fffb;
  color: #009688;
}
.bg-orange-light {
  background-color: #fff5f0;
  color: #ff5722;
} /* Visual Services */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-card {
  background: #e8ebf6;
  padding: 25px 40px;
  transition: 0.4s;
  cursor: pointer;
  border: none;
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-card.active {
  background: #3859f4;
  color: white;
  padding: 50px 40px;
  flex-direction: column;
  align-items: flex-start;
}
.service-card.active span.service-number {
  color: #ffffff80;
}
.service-card.active .service-number {
  margin-right: 0;
  margin-bottom: 5px;
}
.service-card.active .service-title {
  color: #fff;
  font-size: 40px;
}
.service-card.active .service-title span.fw-light {
  color: #ffffff80;
}
.service-card .service-desc {
  display: none;
  margin-top: 20px;
  font-size: 18px;
  font-family: "Inter", sans-serif;
  color: #ffffff;
  font-weight: 400;
}
.service-number {
  margin-right: 20px;
  opacity: 0.8;
  font-size: 30px;
  font-family: "Inter", sans-serif;
  color: #000000;
  font-weight: 400;
  line-height: 33px;
}
.service-title {
  margin-bottom: 0;
  font-size: 24px;
  font-family: "Inter", sans-serif;
  color: #070127;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.72px;
}
.service-card.active .service-desc {
  display: block;
}
.service-card .discover-link {
  display: none;
  position: absolute;
  bottom: 20px;
  right: 40px;
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  line-height: 33px;
  text-decoration: underline;
}
.service-card.active .discover-link {
  display: block;
}
.service-card:not(.active):hover {
  background: #e0e7f5;
}
.project-tag {
  font-size: 20px;
  font-family: "Inter", sans-serif;
  color: #000000;
  font-weight: 500;
  letter-spacing: -0.72px;
}
.project-tag svg.bi.bi-dash-lg {
  width: 30px;
  height: 30px;
  position: relative;
  top: -2px;
}
.projects-section h2 {
  font-size: 50px;
  font-family: Comfortaa;
  color: #000845;
  font-weight: 500;
  letter-spacing: -3px;
}
.our-works-section .text-muted {
  font-size: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #404040;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: 0;
}
.our-works-section h2 {
  font-size: 65px;
  font-family: "Comfortaa", sans-serif;
  color: #000845;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.08em;
} /* Projects Section */
.project-grid-item {
  overflow: hidden;
  height: 300px;
}
.project-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.project-grid-item:hover img {
  transform: scale(1.1);
}
.btn-outline-navy {
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: 50px;
  padding: 12px 25px;
  transition: 0.3s;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* spacing between text and icon */
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: white;
} /* Our Works Tabs */
.work-tab-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.work-tab-btn {
  background: none;
  border: none;
  padding: 10px 15px;
  border-bottom: 1px solid #dee2e6;
  transition: 0.3s;
  font-size: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #000000;
  font-weight: 500;
  line-height: 1.67;
  letter-spacing: 0;
}
.work-tab-btn.active {
  border-bottom: 2px solid;
}
.work-tab-btn.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.case-study-large {
  background: #fdfdfd;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.case-study-small {
  background: #fdfdfd;
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.p-badge {
  text-transform: uppercase;
  font-size: 16px;
  font-family: "Comfortaa", sans-serif;
  color: #404040;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.04em;
}
.quote-icon-custom img {
  max-width: 25px;
}
.case-study-large-sec h3 {
  font-size: 36px;
  font-family: "Comfortaa", sans-serif;
  color: #0f0f0f;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.04em;
}
.case-study-large-sec a {
  font-size: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #141414;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0;
}
.case-study-smalls h4 {
  font-size: 34px;
  font-family: "Comfortaa", sans-serif;
  color: #0f0f0f;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 0.03em;
}
.case-study-smalls h4 {
  font-size: 38px;
  font-family: "Comfortaa", sans-serif;
  color: #0f0f0f;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0em;
} /* Testimonials New - Refined */
.testimonial-new-section {
  background-color: #f4f6fc;
}
.testimonial-badge-pill {
  font-size: 0.8rem;
  padding: 6px 15px;
  border-radius: 50px;
  display: inline-block;
  margin-right: 10px;
}
.pill-light {
  border: 1px solid #ccc;
  background: white;
  color: #333;
}
.pill-dark {
  background: #000;
  color: #fff;
}
.testi-card-blue {
  background: #3b5bff;
  border-radius: 30px;
  overflow: hidden; /* height: 350px; */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.testi-owl-carousel {
  padding-bottom: 35px;
}
.testi-image-main {
  width: 100%;
  height: auto;
  display: block;
}
.quote-icon-custom {
  font-size: 2.5rem;
  color: #000;
  font-family: sans-serif;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}
.testi-main-text {
  color: #333;
  margin-bottom: 10px;
  font-size: 33px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.05em;
}
.testi-main-text span {
  color: #888;
}
.testi-author-info {
  color: #666;
  font-size: 0.75rem;
}
.testi-author-info {
  font-size: 18px;
  font-family: "Inter", sans-serif;
  color: #7d7d7d;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.07em;
  margin-top: 30px;
}
.toggle-icon .fa-minus {
  margin-top: 2px;
}
.testimonial-new-section h2 {
  font-size: 60px;
  font-family: "Comfortaa", sans-serif;
  color: #0f0f0f;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.testi-author-info strong {
  font-size: 18px;
  font-family: "Inter", sans-serif;
  color: #000000;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.07em;
}
.testi-nav-arrows {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  justify-content: flex-end;
}
.testi-arrow {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
}
.arrow-white {
  background: #fff;
  border: 1px solid #eee;
  color: #666;
}
.arrow-blue {
  background: #3b5bff;
  color: #fff;
}
.testi-progress {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  text-align: left;
  margin-right: 20px;
  margin-left: 80px;
}
.testi-progress span {
  color: #ccc;
}
.testi-avatar-small {
  width: 110px !important;
  height: 130px;
  border-radius: 12px;
  object-fit: cover;
  margin-left: 80px;
} /* Slide Content Animation */
.testi-owl-carousel .owl-item .item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.testi-owl-carousel .owl-item.active .item {
  opacity: 1;
  transform: translateY(0);
}
.testi-owl-carousel .owl-item.active .testi-card-blue {
  animation: scaleIn 0.8s ease forwards;
}
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.testi-author-mini {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
} /* Global Reach Refined - Final */
.map-section-top {
  margin: 0 auto 60px;
  text-align: center;
}
.map-section-top p {
  color: #9d9d9d;
  font-size: 20px;
  font-family: "Comfortaa", sans-serif;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.01em;
  text-align: center;
}
.map-section-top span {
  color: #000;
}
.btn-read-more {
  border: 1.5px solid #111;
  border-radius: 50px;
  padding: 8px 25px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #000000;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
}
span.cta-project {
  font-size: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #000000;
  font-weight: 500;
  line-height: 2.3;
  letter-spacing: 0.01em;
}
.btn-read-more:hover {
  background: #111;
  color: #fff;
}
.map-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 700px;
  background: url(images/map-group.png) no-repeat center;
  background-size: cover;
}
.map-avatar-pin {
  position: absolute;
  z-index: 10;
}
.avatar-main {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}
.pin-label {
  background: white;
  padding: 7px 16px;
  border-radius: 50px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
  position: absolute;
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: #767676;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.pin-ceo {
  top: 12%;
  left: 28%;
}
.pin-pm {
  top: 35%;
  left: 8%;
}
.pin-researcher {
  bottom: 25%;
  left: 22%;
}
.pin-ux-top {
  top: 15%;
  left: 62%;
}
.pin-ux-mid {
  top: 35%;
  left: 85%;
}
.pin-hiring {
  bottom: 18%;
  left: 80%;
}
.label-top {
  bottom: 65px;
  left: 15px;
}
.label-right {
  left: 55px;
  top: 40px;
}
.label-left {
  right: 50px;
  top: 40px;
}
.label-bottom {
  top: 80px;
  left: -10px;
}
.map-center-text {
  z-index: 1;
  font-size: 36px;
  font-family: "Comfortaa", sans-serif;
  color: #000000;
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.04em;
  text-align: center;
}
.social-heading {
  bottom: 140px;
}
.btn-join-gradient {
  border: none;
  padding: 15px 35px;
  border-radius: 50px;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(to right, #809cf8, #e853f6);
}
.join-us-social {
  bottom: 100px;
}
a.cta-email-link:hover {
  border-bottom: 2px solid #000;
} /* CTA Banner Refined - Final */
.cta-banner-refined {
  background-color: #61a3ff;
  border-radius: 30px;
  padding: 80px;
  color: #111;
  position: relative;
  overflow: hidden;
  min-height: 500px;
}
.cta-banner-refined h2 {
  margin: 40px 0 80px;
  font-size: 60px;
  font-family: "Comfortaa", sans-serif;
  color: #000000;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.cta-email-link {
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #000000;
  font-weight: 500;
  line-height: 2.3;
  letter-spacing: 0.01em;
}
.cta-shapes-wrap {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 500px;
  height: 450px;
  pointer-events: none;
}
.blob-o {
  position: absolute;
  bottom: -20px;
  right: 300px;
  width: 200px;
  height: 180px;
  background: #ff5722;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  z-index: 2;
}
.blob-t {
  position: absolute;
  bottom: 10px;
  right: -40px;
  width: 280px;
  height: 280px;
  background: #85e8c8;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  z-index: 1;
}
.dots-p {
  position: absolute;
  bottom: 60px;
  right: 70px;
  width: 350px;
  height: 300px;
  background-image: radial-gradient(#000 2px, transparent 2px);
  background-size: 25px 25px;
  opacity: 0.1;
  z-index: 0;
} 

/* Contact Section */
.contact-left {
    background-color: #3b5bff;
    color: white;
    padding: 100px;
    border-radius: 0;
}

.contact-right {
    background-color: #e8ebf6;
    padding: 100px;
}
.contact-right .text-muted {
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    color: #70798b;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.06em;
}
.contact-icon-box {
    width: 55px;
    height: 55px;
    background: #5d7bff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.form-control-custom {
    background: transparent !important;
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    padding: 15px 0;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #70798b;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
}

.form-control-custom::placeholder {
    color: #999;
}

.form-control-custom:focus {
    border-bottom: 2px solid #3b5bff;
    box-shadow: none;
    outline: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #000;
}

.btn-contact {
    background: linear-gradient(to right, #809CF8, #E853F6);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #fff;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0;
}

.btn-contact:hover {
    opacity: 0.9;
    color: white;
    transform: translateY(-2px);
}

.contact-footer-section {
    margin-top: -100px;
}
span.contact-tagz {
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #fffc;
    font-weight: 500;
    line-height: 5;
    letter-spacing: 0.04em;
}
section.contact-footer-section h2 {
    font-size: 24px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    max-width: 340px;
}
section.contact-footer-section h3 a {
    font-size: 25px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0;
    text-decoration: none;
}
section.contact-footer-section h3 a:hover {
    text-decoration: underline;
}
.common-txt {
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}
img.translation {
    width: 30px;
    height: 30px;
}
.footer-inner {
    background: #131B5D;
    padding-top: 150px;
    color: #fff;
}
.footer-above h2 {
    font-size: 85.37px;
    font-family: 'Comfortaa', sans-serif;
    color: #ffffff;
    font-weight: 300;
    line-height: 100.45px;
    letter-spacing: -5.1px;
    margin-bottom: 15px;
}
.footer-above p {
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    color: #dedede;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.02em;
}
.footer-above h4 {
    font-size: 18.77px;
    font-family: 'Inter', sans-serif;
    color: #d0d0d0;
    font-weight: 500;
    line-height: 1.88;
    letter-spacing: 0;
}

.footer-logo {
    margin-bottom: 20px;
}
ul.social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    margin-top: 15px;
}
ul.social li a {
    font-size: 25px;
    color: #fff;
}

.footer-above h3 {
    font-size: 23.46px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}
ul.cont {
    list-style: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 35px;
}
ul.cont li a {
    text-decoration: none;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.06em;
    display: flex;
    gap: 15px;
}
ul.addr {
    list-style: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
ul.addr li {
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.06em;
}
ul.f-links {
    list-style: none;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
ul.f-links li a {
    text-decoration: none;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.06em;
} 
.footer-above {
    padding-bottom: 70px;
}
.copyright p {
     font-size: 14.53px; 
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0;
    margin: 0px;
}
ul.copyLinks {
    list-style: none;
    display: flex;
    gap: 15px;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}
.copyright .input-group {
    justify-content: flex-end;
    gap: 15px;
    align-items: center;
}
.copyright .input-group .btn {
    border: none;
    color: #fff;
    padding: 0px;
}
.copyright .input-group .btn:hover {
    background-color: transparent;
}
.copyright .btn-check:checked+.btn, .copyright .btn.active, .copyright .btn.show, .copyright .btn:first-child:active, .copyright :not(.btn-check)+.btn:active {
    background-color: transparent;
}
.copyright .dropdown-toggle::after {
    display: none;
}
.copyright {
    padding: 31px 0px;
    background-image: url(images/footer-layer.png);
    background-size: cover;
    background-repeat: no-repeat;
}
ul.copyLinks li a {
    font-size: 14.53px;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: none;
}
.footer-above input.form-control {
    background: transparent;
    padding: 20px;
    border-radius: 50px !important;
    border: 1px solid #ededed;
}
.footer-above input.form-control::placeholder {
  color: #c8c8c8; /* Changes the placeholder text color to red */
}
#button-subscribe {
    background: linear-gradient(to right, #809CF8, #E853F6);
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0;
}
/*service page css start*/
.trust-section a,
.core-services-section a,
.blog-posts-section a,
.faq-section a,
.projects-showcase-section a,
.testimonial-carousel-section a {
  text-decoration: none;
  transition: 0.3s;
}
.service-hero {
  background: linear-gradient(90deg, #fcfff6 0%, #f5e6ff 50%, #e1ebf9 100%);
  padding: 30px 0 60px;
}
.breadcrumb-custom {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb-custom i {
  font-size: 0.7rem;
  color: #aaa;
}
.breadcrumb-custom a {
  color: #666;
}
.breadcrumb-custom span {
  color: #000;
  font-weight: 500;
}
.service-hero-title {
  font-size: 3.5rem;
  font-weight: 500;
  font-family: "Comfortaa";
  color: var(--navy);
  margin: 0;
}
.Vectorline{
  margin-right: 500px !important;
  margin-top: -30px !important;
}

.service-hero-text {
  font-size: 1.25rem;
  font-family: "General Sans";
  line-height: 1.4;
  text-align: start;
  color: #333;
  margin-top: 10px;
}
.trust-section {
  padding: 100px 0;
}
.trust-title {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  font-family: "Comfortaa";
  letter-spacing: -2px;
  color: var(--navy);
}
.trust-highlight {
  background: linear-gradient(90deg, #fefffb, #cbfb5a);
  padding: 0 15px;
  display: inline-block;
}
.trust-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  font-family: "General Sans";
  margin-bottom: 40px;
}
.btn-navy-pill {
  background-color: var(--navy);
  color: white;
  border: none;
  padding: 10px 40px;
  border-radius: 50px;
  font-weight: 600;
  font-family: "Comfortaa";
  display: inline-block;
}
.btn-navy-pill:hover {
  background-color: #00065a;
  color: white;
  transform: translateY(-2px);
}
.callback-link {
  color: #000;
  font-weight: 600;
  margin-left: 30px;
  font-family: "Comfortaa";
}
.callback-link:hover {
  color: var(--primary);
}
.partner-strip {
  border-top: 1px solid #eee;
  padding: 60px 0;
}
.service-partner-logo {
  max-height: 45px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: 0.3s;
  opacity: 0.7;
}
.service-partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.core-services-section {
  background-color: var(--blue-bg);
  padding: 100px 0;
  color: white;
}
.service-title-main {
  color: white;
  font-size: 3.5rem;
  font-weight: 400;
  font-family: "Comfortaa";
}
.section-title-main {
  font-size: 2.7rem;
  font-family: "Comfortaa";
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 40px;
  line-height: 1.1;
}
.section-header {
  margin-bottom: 60px;
}
.section-header p {
  margin: 0 auto;
  opacity: 0.9;
  font-family: "General Sans";
  font-size: 1.1rem;
  line-height: 1.6;
}
.service-card-v2 {
  background: white;
  border-radius: 30px;
  padding: 40px;
  height: 100%;
  transition: 0.3s;
  border: none;
  color: var(--text-dark);
}
.service-card-v2:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.card-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  color: white;
  font-size: 1.2rem;
}
.service-card-v2 h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 15px;
  font-family: "Comfortaa";
}
.service-card-v2 p {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.6;
  font-family: "General Sans";
}
.btn-explore {
  border: 1px solid #ddd;
  border-radius: 50px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: "General Sans";
  color: var(--text-dark);
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-explore:hover {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.blog-posts-section {
  padding: 100px 0;
  background: #fff;
}
.blog-item {
  display: flex;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid #ddd;
  align-items: flex-start;
}
.blog-item:last-child {
  border-bottom: none;
}
.blog-img-wrap {
  flex: 0 0 400px;
  overflow: hidden;
}
.blog-img-wrap img {
  width: 100%;
  height: 340px;
  filter: grayscale(100%);
  transition: 0.3s;
}
.blog-img-wrap:hover img {
  filter: grayscale(0%);
}
.blog-content {
  flex: 1;
}
.blog-category {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--primary);
  font-family: "Comfortaa";
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
  display: block;
}
.blog-content h3 {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  font-family: "Comfortaa";
  margin-bottom: 20px;
  color: var(--navy);
}
.blog-content p {
  color: #666;
  font-size: 1rem;
  font-family: "General Sans";
  line-height: 1.6;
  margin-bottom: 55px;
}
.blog-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}
.author-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.author-info strong {
  display: block;
  font-size: 0.85rem;
  color: #000;
  font-family: "General Sans";
}
.author-info span {
  font-size: 0.85rem;
  color: #999;
  font-family: "General Sans";
}
.faq-section {
  padding: 30px 0;
  background: #fff;
}
.faq-badge {
  background: #eef2ff;
  color: var(--purple);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 15px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 20px;
}
.faq-header {
  margin-bottom: 60px;
}
.faq-accordion {
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 25px 0;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: 0;
  font-size: 1.3rem;
  font-family: "Comfortaa";
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
}
.faq-icon {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #666;
  transition: 0.3s;
}
.faq-item.active .faq-icon {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  color: #666;
  font-size: 0.95rem;
  font-family: "General Sans";
  line-height: 1.6;
  margin-top: 0;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  margin-top: 20px;
}
.showcase-intro span {
  color: #262626;
  font-weight: 500;
}
.projects-showcase-section {
  padding: 100px 0;
  background: #fff;
}
.showcase-intro {
  max-width: 900px;
  margin: 0 auto 100px;
  text-align: center;
}
.showcase-intro p {
  color: #888;
  line-height: 1.8;
  font-size: 1.1rem;
  margin-bottom: 30px;
}
.showcase-intro strong {
  color: #333;
}
.btn-read-more-round {
  border: 1px solid #111;
  padding: 12px 30px;
  border-radius: 50px;
  color: #111;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
}
.btn-read-more-round:hover {
  background: #111;
  color: #fff;
}
.section-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 20px;
  display: block;
}
.project-block {
  margin-bottom: 120px;
}
.project-img-side {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}
.project-img-side img {
  width: 100%;
  height: auto;
  display: block;
}
.project-text-side {
  padding: 40px;
}
.pill-service {
  border: 1px solid #959595;
  border-radius: 50px;
  padding: 5px 20px;
  font-size: 0.85rem;
  font-family: "Comfortaa";
  color: #666;
  display: inline-block;
  margin-bottom: 30px;
}
.logo-box {
  width: 100px;
  height: 60px;
  border: 1px solid #ddd;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  background: white;
}
.logo-box img {
  max-width: 100%;
  max-height: 100%;
}
.project-desc {
  font-size: 1.2rem;
  line-height: 1.6;
  font-family: "General Sans";
  color: #444;
  margin-top: 30px;
}
.showcase-dots {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 50px;
}
.dot {
  width: 60px;
  height: 8px;
  background: #eee;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.dot.active {
  background: var(--primary);
}
.carousel-indicators [data-bs-target] {
  width: 60px;
  height: 8px;
  background-color: #e0e0e0; /* inactive */
  border-radius: 10px;
  opacity: 1;
  transition: all 0.3s ease;
}
.carousel-indicators .active {
  background-color: #0d6efd; /* Bootstrap blue */
}
.testimonial-carousel-section {
  padding: 100px 0;
  background: #fdfdfd;
}
.testi-header {
  margin-bottom: 80px;
}
.testi-item-v2 {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 20px;
}
.testi-img-v2 {
  flex: 0 0 350px;
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
}
.testi-img-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testi-info-v2 {
  flex: 1;
}
.testi-quote-icon {
  font-size: 3rem;
  color: #333;
  margin-bottom: 20px;
  display: block;
}
.testi-text-v2 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
  margin-bottom: 30px;
}
.testi-text-v2 span {
  color: #888;
}
.testi-author-v2 {
  font-size: 0.9rem;
  color: #666;
}
.testi-author-v2 strong {
  color: #000;
  margin-right: 15px;
}
.testi-custom-nav {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}
.testi-btn-round {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 1rem;
}
.service-btn-prev {
  background: #eee;
  color: #666;
}
.service-btn-next {
  background: var(--primary);
  color: white;
} 
 /*About page css start*/
.about-hero {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  padding: clamp(56px, 7vw, 92px) 0;
  background: radial-gradient(
      1200px 520px at 18% 0%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(180deg, #f6f5ff 0%, #eef0ff 55%, #f4f6ff 100%);
} /* dotted pattern (top-right) */
.about-hero::before {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 220px;
  height: 140px;
  opacity: 0.55;
  background-image: radial-gradient(
    rgba(20, 22, 35, 0.25) 1.2px,
    transparent 1.2px
  );
  background-size: 10px 10px;
  border-radius: 18px;
  pointer-events: none;
} /* orange blob (right edge) */
.about-hero::after {
  content: "";
  position: absolute;
  right: -85px;
  top: 36px;
  width: 190px;
  height: 190px;
  background: radial-gradient(
    circle at 30% 30%,
    #ffb38f 0%,
    #ff7a45 55%,
    #ff5a2b 100%
  );
  border-radius: 60% 40% 55% 45% / 55% 55% 45% 45%;
  opacity: 0.95;
  filter: blur(0.2px);
  pointer-events: none;
}
.about-hero .kicker {
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  font-family: "Comfortaa";
  color: #161827;
  margin-bottom: 22px;
}
.about-hero .headline {
  font-weight: 420;
  letter-spacing: -0.03em;
  font-family: "Comfortaa";
  line-height: 1.06;
  font-size: clamp(40px, 5.6vw, 92px); /* big like screenshot */
  margin: 0;
  color: #0b0b12;
} /* keep text position similar (left, with generous whitespace) */
.about-hero .wrap {
  padding-left: clamp(8px, 1.5vw, 18px);
} /* optional: tighten on very small screens */
@media (max-width: 576px) {
  .about-hero::after {
    right: -120px;
    top: 10px;
    transform: scale(0.9);
  }
  .about-hero::before {
    right: -50px;
    top: -40px;
    transform: scale(0.9);
  }
  .about-hero .kicker {
    font-size: 14px;
  }
}
.about-video {
  background: #fff;
  padding: 44px 0;
}
.video-frame {
  margin: 0 auto;
 }
.video-link {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #e9e9ee;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.video-thumb {
  width: 100%;
  aspect-ratio: 2 / 1; /* your ratio */
  object-fit: cover;
  display: block;
}
.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: 0.18s ease;
}
.play-btn::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 24px solid rgba(255, 255, 255, 0.95);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left: 6px;
}
.video-link:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(0, 0, 0, 0.32);
}
.vision-wrap {
  position: relative;
  padding: 56px 0 34px;
  background: #fff;
  overflow: hidden;
} /* left dotted big circle (like screenshot) */
.vision-wrap .dots-circle {
  position: absolute;
  left: -120px;
  top: 85px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  opacity: 0.55;
  background-image: radial-gradient(
    rgba(12, 16, 28, 0.35) 1.4px,
    transparent 1.4px
  );
  background-size: 10px 10px;
  pointer-events: none;
}
.vision-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: 70px;
  align-items: start;
} /* Left column */
.vision-kicker {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #2a2a2a;
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
} /* simple constellation svg area */
.constellation {
  width: 520px;
  max-width: 100%;
  height: 220px;
  margin-top: 8px;
} /* Right column text */
.vision-title {
  font-size: 54px;
  line-height: 1.05;
  font-family: "Comfortaa";
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 18px 0;
}
.vision-body {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.35;
}
.vision-body p {
  margin: 0 0 10px 0;
  font-family: "Satoshi";
  font-weight: 400;
}
.vision-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
}
.vision-link:hover {
  text-decoration: underline;
}
.vision-link .arrow {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
} /* ---------- IMAGE ROW ---------- */
.vision-images {
  padding: 26px 0 60px;
  background: #fff;
}
.img-card {
  border-radius: 28px;
  overflow: hidden;
  height: 230px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  background: #f2f2f2;
}
.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
} /* responsiveness */
@media (max-width: 992px) {
  .vision-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .vision-title {
    font-size: 42px;
  }
  .constellation {
    height: 200px;
  }
  .img-card {
    height: 210px;
  }
}
@media (max-width: 576px) {
  .vision-title {
    font-size: 36px;
  }
  .vision-body {
    font-size: 16px;
  }
}
.story-sec {
  padding: 70px 0 80px;
  background: #fff;
} /* Top spacing like screenshot (left aligned content, big whitespace) */
.story-kicker {
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 18px;
}
.story-title {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 22px 0;
}
.story-text {
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 1000px;
} /* circles row */
.stats-row {
  margin-top: 54px; /* big gap like screenshot */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; /* circles touch/overlap slightly via negative margin */
  align-items: center;
  justify-items: center;
}
.stat-bubble {
  width: 240px;
  height: 240px;
  border: 2px solid var(--text-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: transparent; /* little overlap like screenshot */
}
.stat-bubble:first-child {
  margin-left: 0;
}
.stat-num {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 14px;
  color: #0b0b12;
}
.stat-label {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: #0b0b12;
  max-width: 170px;
  margin: 0 auto;
} /* --- Our Story Section --- */
.story-sec {
  padding: 100px 0;
  background-color: #fff;
  font-family: "Jost", sans-serif;
}
.story-kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #444;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.story-title {
  font-size: 55px;
  font-family: "Comfortaa", cursive;
  color: #000;
  margin-bottom: 30px;
  font-weight: 400;
  letter-spacing: -1.5px;
}
.story-text {
  font-size: 20px;
  line-height: 1.5;
  color: #444;
  margin-bottom: 80px;
  font-family: "Jost", sans-serif;
}
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  justify-content: flex-start;
  align-items: center;
}
.stat-bubble {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: transparent;
  transition: all 0.3s ease;
}
.stat-bubble:hover {
  background-color: #fcfcfc;
  border-color: #000;
}
.stat-num {
  font-size: 80px;
  font-weight: 600;
  color: #111;
  line-height: 1;
  font-family: "Inter", sans-serif;
  margin-bottom: 5px;
}
.stat-label {
  font-size: 19px;
  color: #111;
  line-height: 1.25;
  font-weight: 500;
  font-family: "Jost", sans-serif;
}
@media (max-width: 1200px) {
  .story-title {
    font-size: 48px;
  }
  .stat-bubble {
    width: 220px;
    height: 220px;
  }
  .stat-num {
    font-size: 64px;
  }
  .stat-label {
    font-size: 17px;
  }
}
@media (max-width: 991px) {
  .story-title {
    font-size: 42px;
  }
  .stats-row {
    justify-content: center;
    gap: 20px;
  }
  .story-text {
    margin-bottom: 50px;
  }
}
@media (max-width: 576px) {
  .story-sec {
    padding: 60px 0;
  }
  .story-title {
    font-size: 34px;
  }
  .stat-bubble {
    width: 190px;
    height: 190px;
  }
  .stat-num {
    font-size: 52px;
  }
  .stat-label {
    font-size: 15px;
  }
} /* --- Services Grid Section --- */
.services-grid-sec {
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}
.services-main-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
.service-info-card,
.service-grid-item {
  padding: 70px 100px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.4s ease;
}
.service-grid-item:hover {
  background: linear-gradient(90deg, #8ba1fd 0%, #d87df7 100%);
  border-color: transparent;
}
.service-grid-item:hover .service-item-name,
.service-grid-item:hover .service-item-desc,
.service-grid-item:hover .service-item-arrow,
.service-grid-item:hover .service-icon-box {
  color: #fff;
}
.service-grid-item:hover .service-icon-box {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}
.services-main-grid > *:nth-child(3n) {
  border-right: none;
}
.service-inner-content {
  max-width: 400px;
}
.service-kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #444;
  margin-bottom: 25px;
  text-transform: uppercase;
  font-family: "Jost", sans-serif;
}
.service-grid-title {
  font-size: 45px;
  font-family: "Comfortaa", cursive;
  color: #000;
  margin-bottom: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.5px;
}
.service-grid-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 40px;
  font-family: "Jost", sans-serif;
}
.learn-more-btn {
  display: inline-flex;
  align-items: center;
  padding: 18px 35px;
  background: linear-gradient(90deg, #8ba1fd 0%, #d87df7 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.learn-more-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(139, 161, 253, 0.3);
  color: #fff;
}
.btn-arrow {
  margin-left: 10px;
  font-size: 18px;
}
.service-icon-box {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  font-size: 24px;
  color: #111;
  background-color: transparent;
  transition: 0.3s ease;
}
.service-item-name {
  font-size: 30px;
  font-family: "Comfortaa", cursive;
  color: #000;
  margin-bottom: 20px;
  font-weight: 400;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}
.service-item-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 40px;
  font-family: "Jost", sans-serif;
  transition: color 0.3s ease;
}
.service-item-arrow {
  font-size: 28px;
  color: #111;
  transition: transform 0.3s ease;
}
.service-grid-item:hover .service-item-arrow {
  transform: translateX(10px);
} /* Specific alignments for the grid items to match screenshot exactly */ /* The layout in screenshot: Row 1: [About] [Service 1] [Service 2]Row 2: [Service 3] [Service 4] [Service 5]*/
@media (max-width: 1400px) {
  .service-info-card,
  .service-grid-item {
    padding: 80px 50px;
  }
  .service-grid-title {
    font-size: 44px;
  }
}
@media (max-width: 1199px) {
  .services-main-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services-main-grid > *:nth-child(2n) {
    border-right: none;
  }
  .services-main-grid > *:nth-child(3n) {
    border-right: 1px solid #f0f0f0;
  }
}
@media (max-width: 767px) {
  .services-main-grid {
    grid-template-columns: 1fr;
  }
  .service-info-card,
  .service-grid-item {
    padding: 60px 30px;
    border-right: none;
  }
  .service-grid-title {
    font-size: 36px;
  }
} /* --- Team Section --- */
.team-sec {
  padding: 120px 0;
  background-color: #fff;
}
.team-main-title {
  font-size: 52px;
  font-family: "Comfortaa", cursive;
  color: #000;
  line-height: 1.1;
  letter-spacing: -1.5px;
  max-width: 1150px;
}
.team-intro-p {
    margin-left: 150px;
  font-size: 19px;
  line-height: 1.6;
  color: #666;
  font-family: "Jost", sans-serif;
  max-width: 500px;
}
.team-members-header {
  margin-top: 100px;
  margin-bottom: 50px;
}
.team-members-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  font-family: "Jost", sans-serif;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.team-img-box {
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
}
.team-img-box img {
  width: 100%;
  aspect-ratio: 1/1.2;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.team-item:hover .team-img-box img {
  transform: scale(1.05);
}
.social-overlay {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s ease, bottom 0.3s ease;
}
.team-item:hover .social-overlay {
  opacity: 1;
  bottom: 35px;
}
.social-overlay a {
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  transition: all 0.3s ease;
}
.social-overlay a:hover {
  background-color: #fff;
  color: #000;
}
.member-name {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
  font-family: "Jost", sans-serif;
  text-align: center;
}
.member-role {
  font-size: 15px;
  color: #888;
  margin-bottom: 15px;
  font-family: "Jost", sans-serif;
  text-align: center;
}
.team-line {
  width: 100%;
  height: 2px;
  background-color: #000000;
}
.join-team-footer {
  margin-top: 43px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #cacaca;
}
.join-title {
  font-size: 52px;
  font-family: "Comfortaa", cursive;
  color: #000;
  line-height: 1.1;
  letter-spacing: -1.5px;
}
.join-text {
  font-size: 19px;
  line-height: 1.6;
  color: #777;
  font-family: "Jost", sans-serif;
}
@media (max-width: 1200px) {
  .team-main-title,
  .join-title {
    font-size: 42px;
  }
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .team-main-title,
  .join-title {
    font-size: 32px;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-sec {
    padding: 60px 0;
  }
} /* --- Question Banner Section --- */
.question-banner-sec {
  padding: 100px 0;
  background-color: #fff;
}
.question-banner-wrap {
  background-color: #f3f2ff;
  border-radius: 20px;
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.avatar-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-group img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin: 0 -12px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.banner-title {
  font-size: 42px;
  font-family: "Comfortaa", cursive;
  color: #000;
  margin-bottom: 20px;
  font-weight: 400;
  letter-spacing: -1px;
}
.banner-text {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
  font-family: "Jost", sans-serif;
}
.contact-btn-black {
  display: inline-flex;
  align-items: center;
  background-color: #111;
  color: #fff;
  padding: 18px 40px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: all 0.3s ease;
  font-family: "Jost", sans-serif;
}
.contact-btn-black:hover {
  background-color: #333;
  color: #fff;
  transform: translateY(-3px);
}
.shape-teal {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 250px;
  height: 180px;
  background-color: #00b4c1;
  border-radius: 100px 100px 0 0;
  transform: rotate(20deg);
  z-index: 1;
  opacity: 0.9;
  filter: blur(20px);
  display: none; /* We will use better shapes below */
} /* Custom Shapes to match screenshot precisely */
.question-banner-wrap::before {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 150px;
  background-color: #00acc1;
  border-radius: 50% 50% 0 0;
  transform: rotate(15deg);
  z-index: 0;
}
.question-banner-wrap::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px;
  height: 200px;
  background-color: #ff7043;
  border-radius: 50%;
  z-index: 0;
}
.question-content {
  position: relative;
  z-index: 2;
} /* --- Contact Tags Section --- */
.contact-tags-sec {
  padding: 100px 0;
  margin-bottom: 100px;
  background-color: #fff;
}
.contact-sec-title {
  font-size: 72px;
  font-family: "Comfortaa", cursive;
  color: #000;
  margin-bottom: 25px;
  font-weight: 400;
  letter-spacing: -2px;
}
.contact-sec-desc {
  font-size: 20px;
  color: #666;
  font-family: "Jost", sans-serif;
  line-height: 1.5;
  margin-bottom: 50px;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.tag-item {
  padding: 14px 28px;
  border: 1px solid #111;
  border-radius: 50px;
  color: #000;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  transition: all 0.3s ease;
  background-color: transparent;
}
.tag-item:hover {
  background-color: #f5f5f5;
}
.active-tag {
  background-color: #000;
  color: #fff;
  border-color: #000;
}
.active-tag:hover {
  background-color: #222;
  color: #fff;
}
@media (max-width: 991px) {
  .contact-sec-title {
    font-size: 56px;
  }
  .banner-title {
    font-size: 34px;
  }
}
@media (max-width: 576px) {
  .contact-sec-title {
    font-size: 42px;
  }
  .question-banner-wrap {
    padding: 60px 20px;
  }
  .banner-title {
    font-size: 28px;
  }
} /* --- About Hero Section --- */
.about-hero {
  background: linear-gradient(135deg, #fdfcff 0%, #fff 100%);
  padding: 160px 0 130px;
  position: relative;
  overflow: hidden;
}

.about-hero::before {
  content: "";
  position: absolute;
  top: 20%;
  left: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(216, 125, 247, 0.08) 0%,
    transparent 70%
  );
  z-index: 0;
}

.about-hero .kicker {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 35px;
  font-family: "Jost", sans-serif;
  position: relative;
  z-index: 2;
}

.about-hero .headline {
  font-size: 78px;
  font-family: "Comfortaa", cursive;
  font-weight: 700;
  color: #0b0b12;
  line-height: 1.05;
  letter-spacing: -3.5px;
  margin: 0;
  position: relative;
  z-index: 2;
}

.hero-shape-orange {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 350px;
  height: 350px;
  background-color: #ff6f42;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  opacity: 0.95;
  z-index: 1;
  transform: rotate(25deg);
  box-shadow: 0 0 60px rgba(255, 111, 66, 0.2);
}

.hero-dots {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(#d1d1eb 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.7;
  z-index: 2;
}

@media (max-width: 1200px) {
  .about-hero .headline {
    font-size: 64px;
    letter-spacing: -2px;
  }
}

@media (max-width: 991px) {
  .about-hero .headline {
    font-size: 52px;
    letter-spacing: -1px;
  }
  .about-hero {
    padding: 100px 0 70px;
  }
}

@media (max-width: 576px) {
  .about-hero .headline {
    font-size: 36px;
    line-height: 1.1;
  }
  .about-hero .kicker {
    font-size: 12px;
    margin-bottom: 20px;
  }
  .hero-shape-orange {
    width: 180px;
    height: 180px;
    right: -50px;
    top: -50px;
  }
}
.about-hero {
  background-color: #fcfbff;
  padding: 140px 0 50px;
  position: relative;
  overflow: hidden;
}
.about-hero .kicker {
  font-size: 14px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 30px;
  font-family: "Jost", sans-serif;
}
.about-hero .headline {
  font-size: 72px;
  font-family: "Comfortaa", cursive;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.1;
  letter-spacing: -2px;
  max-width: 1250px;
  margin: 0;
}

.hero-dots {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(#d1d1eb 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: 0.6;
  z-index: 1;
}
@media (max-width: 1200px) {
  .about-hero .headline {
    font-size: 64px;
  }
}
@media (max-width: 991px) {
  .about-hero .headline {
    font-size: 52px;
    letter-spacing: -1px;
  }
  .about-hero {
    padding: 100px 0 60px;
  }
}
@media (max-width: 576px) {
  .about-hero .headline {
    font-size: 38px;
  }
  .about-hero .kicker {
    font-size: 12px;
    margin-bottom: 20px;
  }
  .hero-shape-orange {
    width: 150px;
    height: 180px;
  }
}



/*portfolio page css start*/
.portfolio-hero-text{
 font-size: 1.55rem;
  font-family: "Comfortaa";
  line-height: 1.4;
  font-weight: 500;
  text-align: start;
  color: #333;
  max-width: 530px;
  margin-top: 30px;
}
.portfolio-hero{
background: linear-gradient(
  90deg,
  #f5e6ff 0%,
  #e1ebf9 50%,
  #fcfff6 100%
);
  padding: 30px 0 60px;
}

/* Portfolio Work Section */
.portfolio-work-section {
  padding: 80px 0;
  background-color: #ffffff;
}
.portfolio-main-title {
  font-family: "Comfortaa", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #030207;
  letter-spacing: -1px;
}
.curved-underline {
  position: relative;
  display: inline-block;
}
.curved-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg width='214' height='12' viewBox='0 0 214 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9.5C45.5 4.5 131.5 -2.5 212 9.5' stroke='%23CBFB5A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}
.portfolio-sub-text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #404040;
  max-width: 800px;
  line-height: 1.6;
}

/* Portfolio Filter Tabs */
.portfolio-work-section .work-tab-btns {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
  border-bottom: 2px solid #f0f0f0 !important;
  padding-bottom: 0 !important;
  margin-top: 40px !important;
}
.portfolio-work-section .work-tab-btn {
  background: none !important;
  border: none !important;
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #030207 !important;
  padding: 10px 15px !important;
  position: relative !important;
  transition: 0.3s !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
}
.portfolio-work-section .work-tab-btn:hover {
  color: var(--primary) !important;
}
.portfolio-work-section .work-tab-btn.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* Portfolio Card */
.portfolio-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.4s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.portfolio-img-wrap {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 12px;
}
.portfolio-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.portfolio-card:hover .portfolio-img-wrap img {
  transform: scale(1.05);
}
.portfolio-content {
  padding: 25px 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.portfolio-content h3 {
  font-family: "Comfortaa", sans-serif;
  font-size: 38px;
  font-weight: 400;
  color: #030207;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -1px;
}
.portfolio-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.category-tag {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #666;
  border-left: 2px solid #ddd;
  padding-left: 10px;
}
.learn-more-btn {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid #ddd;
  padding: 10px 25px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}
.learn-more-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.learn-more-btn i {
  font-size: 12px;
}

/* Response Fixes */
@media (max-width: 768px) {
  .portfolio-main-title {
    font-size: 32px;
  }
  .portfolio-content h3 {
    font-size: 20px;
  }
}

/* Video Testimonial Section */
.video-testimonial-section {
  padding: 0px 0;
  background-color: #ffffff;
}
.testimonial-text {
  font-family: "Inter", sans-serif;
  font-size: 23px;
  color: #404040;
  max-width: 1200px;
  line-height: 1.6;
  text-align: center;
  font-weight: 400;
}
.testimonial-text strong {
  color: #030207;
  font-weight: 700;
}
.learn-more-outline-btn {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #030207;
  text-decoration: none;
  border: 1px solid #ddd;
  padding: 12px 35px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}
.learn-more-outline-btn:hover {
  background: #030207;
  color: #fff;
  border-color: #030207;
}

/* Grow Together CTA Section */
.grow-together-section {
  padding-top: 120px;
    background-color: #ffffff;

  overflow: hidden;
}
.grow-together-inner {
  position: relative;
  z-index: 1;
}
.person-img-wrap {
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}
.person-img-wrap img {
  width: 100%;
  max-width: 580px;
  height: auto;
  object-fit: contain;
  transform: scale(1.1);
  transform-origin: bottom left;
}
.grow-title {
  font-family: "Comfortaa", sans-serif;
  font-size: 130px;
  font-weight: 500;
  color: #03045e;
  line-height: 0.85;
  letter-spacing: -5px;
  position: relative;
  margin-bottom: 50px;
}
.highlight-together {
 background: linear-gradient(90deg, #fcffef, #cbfb5a);
  display: inline-block;
  font-size: 70px;
  padding-right: 70px;
display: flex;
justify-content: end;  line-height: 1;/* Precise indentation from image */
}

.grow-cta-btn {
  background: linear-gradient(90deg, #8ba3ff 0%, #d87cff 100%);
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: 0.3s;
  border: none;
  box-shadow: 0 10px 25px rgba(139, 163, 255, 0.3);
  margin-left: 0px;
}
.grow-cta-btn i {
  font-size: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 2px;
}
.grow-cta-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(139, 163, 255, 0.5);
  color: #ffffff !important;
}

@media (max-width: 1400px) {
  .grow-title {
    font-size: 110px;
  }
}
@media (max-width: 1200px) {
  .grow-title {
    font-size: 90px;
  }
  .highlight-together {
    margin-left: 80px;
  }
}
@media (max-width: 991px) {
  .grow-title {
    font-size: 70px;
    letter-spacing: -2px;
  }
  .highlight-together {
    margin-left: 40px;
  }
  .person-img-wrap {
    justify-content: center;
    margin-bottom: 50px;
  }
  .person-img-wrap img {
    max-width: 400px;
  }
}
@media (max-width: 768px) {
  .grow-title {
    font-size: 50px;
    letter-spacing: -1px;
    line-height: 1;
  }
  .highlight-together {
    margin-left: 0;
    display: block;
    margin-top: 10px;
  }
}
/*portfolio page css end*/

/* ==========================================================================
   PPC Page V2 Styles (100% Fidelity)
   ========================================================================== */

.ppc-breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}
.ppc-breadcrumb .breadcrumb-item {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}
.ppc-breadcrumb .breadcrumb-item a {
    color: #666;
    text-decoration: none;
}
.ppc-breadcrumb .breadcrumb-item.active {
    color: #000;
    font-weight: 600;
}

.ppc-main-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 85px;
    font-weight: 300;
    color: #000;
    line-height: 1.05;
    letter-spacing: -3px;
    margin-bottom: 0;
}

.title-img-span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

.title-img-span img {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.ppc-profiles-span {
    display: inline-flex;
    align-items: center;
    margin: 0 10px;
}

.mini-profile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-left: -20px;
    object-fit: cover;
}

.mini-profile:first-child {
    margin-left: 0;
}

.ppc-hero-lead {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    max-width: 600px;
}

.load-more-link {
    color: #3b59ff;
    text-decoration: none;
    font-weight: 500;
}

.ppc-consult-btn {
    display: inline-block;
    background: linear-gradient(90deg, #3b59ff 0%, #d88cff 100%);
    color: #fff !important;
    padding: 18px 45px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 17px;
    text-decoration: none;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(59, 89, 255, 0.2);
}

.ppc-consult-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(59, 89, 255, 0.3);
}

.ppc-hero-image {
    width: 100%;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}

/* Why Choose V2 */
.why-choose-v2-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 60px;
    font-weight: 500;
    color: #000;
    line-height: 1.1;
    letter-spacing: -2px;
}

.why-choose-v2-intro {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.ppc-custom-accordion {
    border-top: 1.5px solid #e5e5e5;
}

.ppc-accordion-item {
    border-bottom: 1.5px solid #e5e5e5;
    padding: 40px 0;
    transition: 0.4s;
}

.ppc-accordion-item.active {
    border-radius: 20px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: -30px;
    margin-right: -30px;
    border-color: transparent;
}

.ppc-accordion-header {
    cursor: pointer;
}

.ppc-acc-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
    letter-spacing: -0.5px;
}

.ppc-acc-icon {
    width: 38px;
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    transition: 0.3s;
    margin-left: auto;
}

.ppc-acc-icon.active {
    background-color: #3b59ff;
    color: #fff;
    border-color: #3b59ff;
}

.ppc-acc-body-content {
    padding-top: 15px;
}

.ppc-acc-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

.ppc-acc-img-wrap {
    padding: 0 15px;
}

.ppc-acc-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsive Fixes */
@media (max-width: 1200px) {
    .ppc-main-title { font-size: 65px; }
    .why-choose-v2-title { font-size: 55px; }
}

@media (max-width: 991px) {
    .ppc-main-title { font-size: 50px; letter-spacing: -1.5px; }
    .why-choose-v2-title { font-size: 45px; }
    .ppc-acc-title { font-size: 22px; }
}

@media (max-width: 768px) {
    .ppc-main-title { font-size: 40px; }
    .title-img-span img { height: 40px; }
    .mini-profile { width: 40px; height: 40px; }
    
}

/* Approach Section Redesign */
.approach-main-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 55px;
    font-weight: 500px;
    color: #000;
    letter-spacing: -1.5px;
}

.approach-main-desc {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #444;
    line-height: 1.6;
}

.approach-brand-logo svg {
    display: block;

}

.approach-accordion-wrap {
    display: flex;
    flex-direction: column;
}

.approach-step-item {
    padding: 30px 0;
    border-bottom: 1px solid #39393936;
    transition: 0.3s;
}

.approach-step-item:last-child {
    border-bottom: none;
}

.step-header {
    cursor: pointer;
}

.step-badge {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background: #f8f8f8;
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 24px;
    transition: 0.4s;
    font-family: 'Inter', sans-serif;
}

.approach-step-item.active .step-badge {
    background: linear-gradient(135deg, #4A77FF 0%, #A57CFF 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(74, 119, 255, 0.2);
}

.step-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #333;
    margin-bottom: 0;
    letter-spacing: -0.5px;
    transition: 0.3s;
}

.approach-step-item.active .step-title {
    color: #000;
}

.step-body {
    padding-left: 84px; /* match badge width (60) + ms-4 gap (24) */
    padding-top: 15px;
}

.step-body p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 1100px;
}

.step-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 16px;
    transition: 0.3s;
}

.approach-step-item.active .step-toggle {
    border-color: #000;
}

/* Blue CTA Section */
.ppc-blue-cta {
    background-color: #3b59ff;
    width: 100%;
}

.ppc-blue-cta .blue-cta-inner {
    color: #fff;
}
.cta-para {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.btn-ghost-white {
    display: inline-block;
    padding: 12px 25px;
    border: 1.5px solid #fff;
    border-radius: 50px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
    transition: 0.3s ease;
}

.btn-ghost-white:hover {
    background-color: #fff;
    color: #3b59ff;
}

.cta-main-img {
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    height: 400px;
    width: 100%;
}

@media (max-width: 991px) {
    .cta-para { font-size: 16px; }
    .cta-img-wrap { margin-top: 50px; }
}

/* PPC Services We Offer Accordion */
.ppc-offers {
    background-color: #FAF8F5;
}

.offers-main-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 50px;
    font-weight: 400;
    color: #000;
}

.offers-accordion-wrap {
    margin: 0 auto;
}

.offer-acc-item {
    background: #fff;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: 0.3s ease;
}

.offer-acc-item.active {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.offer-acc-header {
    padding: 30px 40px;
    cursor: pointer;
}

.offer-acc-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 35px;
    font-weight: 500;
    margin-bottom: 0;
    color: #333;
}

.offer-acc-toggle {
    width: 40px;
    height: 40px;
    border: 1.5px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 16px;
    transition: 0.3s;
}

.offer-acc-body {
    padding: 0 40px 40px 40px;
}
.offer-descmain{
    margin-bottom: 100px;
}
.offer-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #666;
    line-height: 2;
}

.offer-bullets {
    list-style: none;
}

.offer-bullets li {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

.offer-bullets li strong {
    color: #333;
}

.bullet-dot {
    color: #333;
    font-weight: bold;
}

.offer-img-wrap img {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Why PPC Matters Accordion */
.ppc-matters {
    background-color: #f9f9f9;
}

.matters-acc-item {
    background: #fff;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: 0.3s ease;
}

.matters-acc-header {
    cursor: pointer;
}

.matters-acc-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #000;
}

.matters-acc-icon {
    font-size: 24px;
    transition: 0.3s ease;
}

.matters-acc-item.active {
    background-color: #3b59ff;
    color: #fff;
}

.matters-acc-item.active .matters-acc-title {
    color: #fff;
}

.matters-acc-item.active .matters-acc-icon {
    transform: rotate(45deg);
}

.matters-acc-item:not(.active) .matters-acc-icon {
    transform: rotate(-45deg);
}

.matters-acc-body p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .matters-acc-title { font-size: 18px; }
}

/* Key Elements Carousel Section */
.ppc-key-elements {
    background-color: #fff;
    position: relative;
}
.ppc-key-elements2 {
    background-color: var(--blue-bg);
    position: relative;
    padding: 50px;
}

.key-abstract-logo {
    position: absolute;
    top: -40px;
    right: 0;
    opacity: 0.8;
}

.key-element-item {
    padding: 20px;
}

.key-badge {
    width: 60px;
    height: 60px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Comfortaa', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #333;
    flex-shrink: 0;
}

.key-badge.active {
    background: linear-gradient(135deg, #4A77FF 0%, #A57CFF 100%);
    color: #fff;
}

.key-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #000;
    margin-bottom: 0;
}

.key-desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #666;
    line-height: 1.7;
}
.key-title2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0;
}

.key-desc2 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.7;
}

/* Custom Progress Bar CSS */
.key-progress-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.key-progress-bar-bg {
    height: 3px;
    background: #e0e0e0;
    position: relative;
    border-radius: 2px;
}

.key-progress-line {
    height: 100%;
    background: #3b59ff;
    width: 16.66%; /* Starting width for 1/6 */
    transition: 0.4s ease;
    border-radius: 2px;
}
.key-progress-line2 {
    height: 100%;
    background: #9e9af8;
    width: 16.66%; /* Starting width for 1/6 */
    transition: 0.4s ease;
    border-radius: 2px;
}

.key-counter {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    min-width: 50px;
}
.key-counter {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    min-width: 50px;
}



/* Drive Results Section */
.ppc-drive-results {
    background-color: #3b59ff;
    color: #fff;
}

.drive-results-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 48px;
    font-weight: 500;
}

.drive-results-desc {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.drive-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.drive-item-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 26px;
    font-weight: 500;
}

.drive-item-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.9;
    padding-left: 36px; /* Align with title start (icon width + margin) */
}
.ppc-main-desc{
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #444;
    line-height: 1.6;
  max-width:  1100px;
}
@media (max-width: 767px) {
    .drive-results-title { font-size: 32px; }
    .drive-item-title { font-size: 22px; }
}

  .graphic-hero-section {
      padding: 80px 0;
      background-color: #fff;
    }

    .graphic-hero-title {
      font-family: 'Comfortaa', sans-serif;
      font-size: 65px;
      font-weight: 500;
      color: #1f253d;
      line-height: 1.1;
      margin-bottom: 25px;
    }

    .graphic-hero-text {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #404040;
      max-width: 600px;
      margin-bottom: 30px;
    }

    /* Blue Services Section */
    .graphic-services-section {
      background-color: #3859f4;
      /* Matches screenshot blue */
      padding: 80px 0;
      color: white;
    }

    .gs-section-title1 {
      font-family: 'Comfortaa', sans-serif;
      font-size: 50px;
      font-weight: 500;
      margin-bottom: 20px;
      color: white;
    }

    .gs-section-desc {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      font-weight: 400;
      max-width: 800px;
      margin-bottom: 60px;
      line-height: 1.6;
      opacity: 0.9;
      color: white;
    }

    .gs-card {
      background: white;
      border-radius: 30px;
      padding: 50px 40px;
      height: 100%;
      color: #1f253d;
      transition: transform 0.3s ease;
      text-align: center;
    }

    .gs-card:hover {
      transform: translateY(-5px);
    }

    .gs-icon-wrapper {
      width: 80px;
      height: 80px;
      background: linear-gradient(90deg, #516eff, #d277ff);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 30px;
      color: white;
      font-size: 28px;
      box-shadow: 0 10px 20px rgba(111, 134, 255, 0.3);
    }

    .gs-card-title {
      font-family: 'Comfortaa', sans-serif;
      font-size: 30px;
      font-weight: 400;
      margin-bottom: 30px;
      color: #1f253d;
    }

    .gs-list {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: center;
    }

    .gs-list li {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 15px;
      position: relative;
      padding-left: 20px;
      color: #555;
    }

    .gs-list li::before {
      content: '○';
      /* Circle bullet */
      position: absolute;
      left: 0;
      top: 0px;
      font-weight: bold;
      color: #555;
      font-size: 12px;
    }

    /* Process Steps Section */
    .process-steps-section {
      padding: 40px 0;
      background-color: #fcfcfc;
    }
    
    .process-section-title {
       font-family: 'Comfortaa', sans-serif;
       font-size: 44px;
       font-weight: 500;
       color: #1f253d;
       line-height: 1.2;
    }

    .process-step-item {
      display: flex;
      align-items: center; 
      gap: 30px;
      margin-bottom: 25px;
    }

    .step-number-circle {
      width: 70px;
      height: 70px;
      min-width: 70px;
      background-color: #3859f4;
      border-radius: 50%;
      color: white;
      font-family: 'Inter', sans-serif;
      font-size: 30px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card {
      background-color: #3859f4;
      border-radius: 20px;
      padding: 35px 50px;
      color: white;
      flex-grow: 1;
      width: 100%;
    }

    .step-card-title {
      font-family: 'Comfortaa', sans-serif;
      font-size: 32px;
      font-weight: 400;
      margin-bottom: 10px;
    }

    .step-card-desc {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      line-height: 1.5;
      opacity: 0.9;
      margin-bottom: 0;
      font-weight: 300;
    }
    
   


    /* Paste in your main CSS file */
.process-section {
  background: #ffffff;
  padding: 56px 0 40px;
}

.process-title {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 400;            /* light-ish like the screenshot */
  letter-spacing: -0.02em;
  font-family: "Comfortaa";
  margin-bottom: 26px;
  color: #111;
}

.process-step {
  margin-bottom: 22px;
}

.step-title {
  font-size: 1.66rem;
  font-weight: 450;
  margin-bottom: 6px;
  font-family: "General Sans";
  color: #111;
}

.step-no {
  margin-right: 10px;
  font-weight: 400;
  color: #111;
}

.step-text {
  margin: 0;
  color: #6b6f76;              /* soft gray */
  font-size: 1rem;
  line-height: 1.9;
  
}
.step-title2 {
  font-size: 1.76rem;
  font-weight: 500;
  letter-spacing: 0.10rem;
  margin-bottom: 6px;
  font-family: "Comfortaa";
  color: #111;
}


 .gs-section-desc-2 {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      max-width: 1200px;
      margin-bottom: 60px;
      line-height: 1.6;
      opacity: 0.9;
      color: white;
    }

    /* Paste in your main CSS file */
.ht-section {
  background: #3f63f2; /* close to screenshot */
  padding: 70px 0  64px;
  margin: 0;
  color: #fff;
}

.ht-title {
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 500; /* light/clean */
  line-height: 1.12;
  font-family: "Comfortaa";
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.ht-lead {
  max-width: 1200px;
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 34px;
}

.ht-cards {
  margin-top: 10px;
}

/* Cards */
.ht-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 22px 20px;
  height: 100%;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.ht-card-title {
  color: #1c1f26;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: "Comfortaa";
  line-height: 1.25;
}

.ht-card-text {
  color: #6b707a;
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0;
}



.gs-cta{
  background:#fff;
  padding: 80px 0 90px; /* top/bottom spacing like screenshot */
}

.gs-section-title{
  font-family: "Comfortaa";
  font-weight: 400; /* light like screenshot */
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  color: #111 !important;
}
.gs-section-title4{
  font-family: "Comfortaa";
  font-weight: 400; /* light like screenshot */
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 78px;
  color: white;
}

.gs-section-desc-3{
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  max-width: 1050px;     /* paragraph width like screenshot */
  line-height: 1.75;
  opacity: 0.9;
  color: #111;          /* IMPORTANT: white hata diya */
  margin: 0 auto;
}
.social-media-section {
  padding: 80px 0;
}

.social-headline {
  font-family: "Comfortaa", sans-serif;
  font-size: 65px; /* Large headline */
  font-weight: 500;
  color: #000000;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.social-decoration {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-visual-box {
  background-color: var(--blue-bg);
  width: 100%;
  height: 500px; /* Adjust as needed */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* Align man to bottom */
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 50px;
}

.social-icons-collage {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icons-collage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.social-man-image {
  width: 45%;
  height: 90%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.social-man-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.social-content-text p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  margin-bottom: 25px;
  max-width: 100%;
}

.btn-consultation {
  background: linear-gradient(90deg, #5b7fff 0%, #d86bf4 100%);
  border: none;
  border-radius: 50px;
  padding: 15px 35px;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s ease;
}

.btn-consultation:hover {
  color: #ffffff;
  opacity: 0.9;
}

.btn-consultation i {
  font-size: 14px;
}



.gs-section-desc-4{
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  max-width: 1250px;     /* paragraph width like screenshot */
  line-height: 1.75;
  opacity: 0.9;
  color: #111;          /* IMPORTANT: white hata diya */
  margin: 0 auto;
}

/* ===== Two Blue Blocks Section (NEW CLASSES) ===== */
.htk-blueblocks{
  background: #ffffff;
  padding: 28px 0 40px;
}

/* each card */
.htk-blueblock{
  background: #3f63f2;                 /* same blue vibe */
  border-radius: 18px;
  padding: 36px 34px 30px;
  margin-bottom: 26px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  border: 2px solid rgba(255,255,255,0.18);
}

.htk-blueblock__title{
  color: #ffffff;
  font-size: clamp(1.6rem, 2.3vw, 2.35rem);
  font-weight: 500;
  font-family: "comfortaa";
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.htk-blueblock__text{
  color: rgba(255,255,255,0.88);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 1280px;
  margin-bottom: 14px;
  margin-top: 54px;
}

/* bullet list with white dots like screenshot */
.htk-blueblock__list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  max-width: 1280px;
}

.htk-blueblock__list li{
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
  color: rgba(255,255,255,0.88);
  font-size: 1rem;
  line-height: 1.7;
}

.htk-blueblock__list li::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  position: absolute;
  left: 0;
  top: 0.6em;
}

.htk-blueblock__list strong{
  color: #ffffff;
  font-weight: 600;
}

/*= NEW CLASSES: Text Blocks (match screenshot) ===== */
.htk-copyblocks{
  background:#fff;
  padding: 34px 0 46px;
}

/* spacing between blocks */
.htk-copyblock{
  margin-bottom: 134px;
}

/* big left headings */
.htk-copyblock__title{
  font-family: "comfortaa";
  font-weight: 400;                 /* thin/clean like screenshot */
  color: #111;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 58px 0;
}

/* paragraph container slightly narrow like screenshot */
.htk-copyblock__body{
  max-width: 1180px;
}

.htk-copyblock__body p{
  font-family: 'Inter', sans-serif;
  font-size: 15px;                  /* small like screenshot */
  line-height: 1.75;
  color: rgba(0,0,0,0.75);
  margin-bottom: 14px;
}

/* last block bottom spacing */
.htk-copyblock--last{
  margin-bottom: 0;
}


/* ===== UNIQUE HERO SECTION ===== */
.Socialmediahero{
  font-family: "Inter", sans-serif;
  background:#fff;
  position: relative;
  overflow: hidden;
}

.Socialmediahero::before{
  content:"";
  position:absolute;
  right:-260px;
  top:140px;
  width: 720px;
  height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(63,99,242,0.10), rgba(63,99,242,0.00) 60%);
  filter: blur(6px);
  pointer-events:none;
}

.Socialmediahero__wrap{
  position: relative;
}

/* Titles */
.Socialmediahero__title{
  font-weight: 500;
  font-family: "comfortaa";
  font-size: clamp(2.0rem, 3.5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color:#111;
}

.Socialmediahero__subtitle{
  font-weight: 400;
  font-family: "comfortaa";
  font-size: clamp(1.2rem, 2.0vw, 1.8rem);
  line-height: 1.2;
  margin: 0 0 18px;
  color:#111;
}

/* Image */
.Socialmediahero__imgBox{
  margin-top: 18px;
  width: 100%;
  max-width: 1420px;
}

.Socialmediahero__img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 6px;
  object-fit: cover;
}

.Socialmediahero__text{
  max-width: 420px;
  color: rgba(0,0,0,0.70);
  font-size: 0.82rem;
  line-height: 1.75;
  margin-bottom: 18px;
}

/* Button */
.Socialmediahero__btn{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  color:#fff;
  text-decoration:none;
  font-weight: 500;
  font-size: 0.95rem;
  background: linear-gradient(90deg, #2f76ff 0%, #ff79e6 100%);
  box-shadow: 0 12px 26px rgba(47,118,255,0.22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.Socialmediahero__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(47,118,255,0.26);
}

.Socialmediahero__btnIcon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.20);
  line-height:1;
}


/* responsive */
@media (max-width: 991.98px){
  .Socialmediahero__imgBox{ max-width: 100%; }
  .Socialmediahero__text{ max-width: 100%; }
}

/* ===== Alternating Feature Sections ===== */
.htk-features {
  padding: 80px 0;
  background: #fff; /* White background */
}

.htk-feature-row {
  margin-bottom: 100px; /* Space between rows */
}
.htk-feature-row:last-child {
  margin-bottom: 0;
}

/* Text Styling */
.htk-feature-heading {
  font-family: "Comfortaa", sans-serif; /* Matching existing headers */
  font-size: clamp(0.8rem, 2.5vw, 1.6rem);
  font-weight: 500;
  color: #111;
  line-height: 1.3;
  margin-bottom: 15px;
}

.htk-separator {
  width: 150px;
  height: 2px;
  background-color: #111;
  margin-bottom: 25px;
}

.htk-feature-desc {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
}

/* Image Masking Logic Cleaned up for Full Images */
.htk-feature-img-box {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.htk-masked-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Removed complex slicing logic since distinct images are now used */



/* Decorations */
.htk-asterisk-blue {
  position: absolute;
  top: -15px;
  left: -25px;
  z-index: 10;
  transform: rotate(15deg);
}

.htk-asterisk-blue-bottom {
  position: absolute;
  bottom: -15px;
  left: -25px;
  z-index: 10;
  transform: rotate(-15deg);
}

.htk-doodle-blue {
  position: absolute;
  bottom: 10px;
  right: -10px;
  z-index: 10;
}


/* ===== Social Media Process Section (Unique) ===== */
.sm-process-section {
    background-color: var(--blue-bg); /* #3d52ef Matches vibrant blue */
    position: relative;
    padding: 100px 0; /* Increase padding for spacious look */
}

.sm-process-main-title {
  font-family: "Comfortaa", sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem); /* Larger title */
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.sm-process-main-desc {
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  line-height: 1.8;
  opacity: 0.9;
  max-width: 900px;
}

/* Carousel Items */
.sm-process-item {
    transition: all 0.3s ease;
    border: 2px solid transparent; 
    height: 100%;
    min-height: 400px; /* Taller card */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px; /* Default padding */
}

/* Inactive State */
.sm-process-item.bg-white {
    background-color: transparent !important; 
}
.sm-process-item.active {
    background-color: #ffffff !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Stronger shadow */
    border-radius: 40px !important; /* Larger border radius */
}
/* Ensure inactive also has border radius for smooth transition */
.sm-process-item {
    border-radius: 40px !important; 
}


/* Typography */
.sm-process-item .text-dark {
    color: #fff !important; 
}
.sm-process-item.active .text-dark {
    color: #000 !important; 
}

.sm-process-item:not(.active) h3, 
.sm-process-item:not(.active) p {
    color: #ffffff !important;
}
.sm-process-item.active h3, 
.sm-process-item.active p {
    color: #111111 !important;
}

.sm-process-title {
    font-size: 1.8rem;
    font-family: "Comfortaa", sans-serif;
    font-weight: 600;
}

.sm-process-desc {
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Badges */
.sm-process-badge {
    width: 70px; /* Larger badge */
    height: 70px;
    border-radius: 50%; /* Circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Comfortaa", sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    transition: 0.3s;
    background: #ffffff; /* Default Inactive: White circle */
    color: var(--blue-bg); /* Blue text */
    flex-shrink: 0;
}

.sm-process-badge.active,
.sm-process-item.active .sm-process-badge {
    /* Active Badge: Light Blue/Purple Gradient */
    background: linear-gradient(135deg, #8ba0ff 0%, #b69eff 100%); 
    color: #ffffff;
}

/* Progress Bar */
.sm-process-progress-line {
    height: 4px;
    /* Gradient pink/purple as seen at the bottom */
    background: linear-gradient(90deg, #d387ff 0%, #ff79e6 100%);
    width: 25%; 
    transition: 0.4s ease;
    border-radius: 2px;
}
.key-progress-bar-bg {
    background-color: rgba(255,255,255,0.2);
    height: 4px;
    border-radius: 2px;
}
.key-counter {
   color: #fff;
   font-weight: 600;
   font-family: "Inter";
}
.social-heart{
  font-family: "Inter", sans-serif;
  background: #fff;
  padding: 46px 0 52px;
  margin-top: 150px;
}

/* top spacing */
.social-heart__top{
  padding-bottom: 142px;
}

/* avatars cluster */
.social-heart__avatars{
  position: relative;
  width: 340px;
  height: 220px;
}

.social-heart__avatar{
  position: absolute;
  border-radius: 999px;
  object-fit: cover;
  border: 6px solid #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}

/* match screenshot placement */
.social-heart__avatar--1{ left: 30px; top: 35px; width: 72px; height: 72px; }
.social-heart__avatar--2{ left: 155px; top: 0px; width: 58px; height: 58px; }
.social-heart__avatar--3{ left: 165px; top: 60px; width: 86px; height: 86px; }
.social-heart__avatar--4{ left: 50px; top: 120px; width: 78px; height: 78px; }
.social-heart__avatar--5{ left: 170px; top: 150px; width: 56px; height: 56px; }

/* timeline + headline */
.social-heart__headline-wrap{
  display: flex;
  align-items: center;
  gap: 34px;
  padding-top: 8px;
}




.social-heart__headline{
  font-weight: 400;
  color: #111;
  font-family: "comfortaa";
  font-size: clamp(2.9rem, 2.7vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

/* intro */
.social-heart__intro{
  padding: 22px 0 18px;
}

.social-heart__title{
  font-weight: 300;
  color: #111;
  font-family: "comfortaa";
  font-size: clamp(3.5rem, 3.7vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 34px 0;
}

.social-heart__desc{
  max-width: 1300px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  color: rgba(0,0,0,0.62);
  margin: 0;
}

/* feature grid */
.social-heart__features{
  margin-top: 26px;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.social-heart__feature{
  padding: 28px 26px;
  min-height: 170px;
}

.social-heart__feature--border{
  border-left: 1px solid rgba(0,0,0,0.08);
}

.social-heart__feature-title{
  font-weight: 600;
  font-family: "comfortaa";
  font-size: 1.52rem;
  color: rgba(0,0,0,0.78);
  margin: 0 0 50px 0;
}

.social-heart__feature-text{
  font-size: 0.72rem;
  line-height: 1.75;
  color: rgba(0,0,0,0.55);
  margin: 0;
  max-width: 320px;
}


/* ===== Social Media Negligence Section ===== */
.sm-risk-section {
    padding: 100px 0;
    background: #ffffff; /* White bg */
}

.sm-risk-title {
    font-family: "Comfortaa", sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 500;
    color: #000435;
    line-height: 1.2;
}

.sm-risk-desc {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    max-width: 600px;
    margin-left: auto; /* Push right if col is full width */
}

/* Accordion Container */
.sm-risk-accordion {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Accordion Item */
.sm-risk-item {
    background: #e8ebf0; /* Default Inactive Gray */
    padding: 30px 40px;
    border-radius: 8px; /* Slight roundness */
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    overflow: hidden;
}

.sm-risk-header {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: "Comfortaa", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #111; /* Default dark text */
}

.sm-risk-num {
    opacity: 0.7;
    font-weight: 400;
}

.op-text {
    opacity: 0.6; /* For 'Opportunities:' part if desired */
}

.sm-risk-body {
    display: none; /* Hidden by default */
    padding-top: 20px;
    max-width: 800px;
}

.sm-risk-body-text {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    color: #fff; /* Only visible in blue active state mainly */
}


/* ACTIVE STATE */
.sm-risk-item.active {
    background-color: #3b5aff !important; /* Vibrant Blue */
    color: #ffffff !important;
}

.sm-risk-item.active .sm-risk-header {
    color: #ffffff;
    font-size: 2rem; /* Title grows when active */
    margin-bottom: 10px;
}

.sm-risk-item.active .sm-risk-num {
    opacity: 0.8;
}
.sm-risk-item.active .op-text {
    opacity: 0.6; 
}
/* Ensure inactive text remains dark */
.sm-risk-item:not(.active) .sm-risk-header {
   color: #111;
}


/* Social Media Negligence Section - Final Implementation */
.social-negligence-section {
    background-color: #fcfcfc;
    /* Subtle premium gradient mesh */
    background-image: 
        radial-gradient(circle at 5% 10%, rgba(111, 73, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 95% 90%, rgba(200, 150, 255, 0.12) 0%, transparent 45%);
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.neg-header-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 3.5rem;
    color: var(--navy);
    line-height: 1.1;
    margin-bottom: 1rem;
    font-weight: 500;
}

.neg-header-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.6;
    margin-left: 100px;
    max-width: 550px;
}

.negligence-accordion-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.negligence-item {
    background-color: #f1f3f9;
    padding: 40px;
    border-radius: 4px; /* Slight roundness or sharp */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.negligence-item:hover {
    background-color: #e5eaf5;
}

.negligence-item.active {
    background-color: #3859f4;
    color: #fff;
    box-shadow: 0 10px 30px rgba(56, 89, 244, 0.3);
}

.neg-item-header {
    display: flex;
    flex-direction: column;
}

.neg-num {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    opacity: 0.5;
    margin-bottom: 15px;
    font-weight: 500;
}

.negligence-item.active .neg-num {
    opacity: 0.8;
    color: #fff;
}

.neg-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.neg-main-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.2rem;
    font-weight: 600; /* Bold part */
    color: var(--navy);
}

.neg-sub-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2.2rem;
    font-weight: 300; /* Light part */
    color: #7a86a1;
}

.negligence-item.active .neg-main-title,
.negligence-item.active .neg-sub-title {
    color: #fff;
}

.negligence-item.active .neg-sub-title {
    opacity: 0.8;
}

.neg-content {
    display: none;
    margin-top: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #fff; /* White text when active */
    max-width: 90%;
}

/* Ensure only active item shows content */
.negligence-item.active .neg-content {
    display: block;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   1. STRATEGY BLUE SECTION (Social Media Page)
   ========================================= */
.strategy-blue-section {
    background-color: #3859f4; /* Royal Blue */
    color: #fff;
    position: relative;
    padding: 100px 0;
}
.strategy-main-title{
    font-family: 'Comfortaa';
    font-size: 45px;
    font-weight: 300;

}
.strategy-main-desc {
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    font-weight: 300;
    opacity: 0.9;
}
.strategy-blue-section .approach-main-title {
    font-size: 60px;
    font-family: 'Comfortaa';
    line-height: 1.1;
    margin-bottom: 2rem;
    font-weight: 500;
}

.strategy-blue-section .approach-main-desc {
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 800px;
}

/* Strategy Cards */
.strategy-card-item {
    padding: 40px;
    border-radius: 40px;
    transition: all 0.3s ease;
    background: transparent;
    border: 1px solid transparent;
}

/* Active Strategy Card (White Pop) */
.strategy-card-item.active-card {
    background: #fff;
    color: #000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* Strategy Badges */
.strategy-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Comfortaa', sans-serif;
    margin-right: 20px;
    transition: all 0.3s ease;
    background: #fff;
    color: #3859f4; 
}

/* Active Strategy Badge */
.strategy-card-item.active-card .strategy-badge {
    background: linear-gradient(135deg, #7F84FF 0%, #E293F3 100%);
    color: #fff;
}

/* Strategy Titles */
.strategy-card-title {
    font-size: 2rem;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 500;
    margin: 0;
}

.strategy-card-item.active-card .strategy-card-title {
    color: #000;
}

/* Strategy Descriptions */
.strategy-card-desc {
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    opacity: 0.9;
}

.strategy-card-item.active-card .strategy-card-desc {
    color: #333;
    opacity: 1;
}

/* Strategy Progress Bar */
.strategy-blue-section .strategy-progress-track {
    background: rgba(255,255,255,0.2);
    height: 4px;
    border-radius: 4px;
    overflow: hidden;
}

.strategy-blue-section .strategy-progress-bar {
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}

.strategy-blue-section #strategyCounterText {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}


/* =========================================
   2. KEY ELEMENTS (PPC Page)
   ========================================= */
.ppc-key-elements {
    background-color: #fff;
    color: #000;
}

.key-element-item {
    padding: 20px;
}

/* PPC Titles */
.key-title {
    font-size: 1.8rem; /* Slightly smaller than strategy */
    font-family: 'Comfortaa', sans-serif;
    font-weight: 500;
    margin: 0;
    color: #000;
}

/* PPC Badges */
.key-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'Comfortaa', sans-serif;
    margin-right: 20px;
    background: #f0f0f0; /* Light grey default */
    color: #000;
}

.key-badge.active {
    background: linear-gradient(135deg, #7F84FF 0%, #E293F3 100%);
    color: #fff;
}

/* PPC Progress Bar */
.key-progress-bar-bg {
    background: #eee;
    height: 4px;
    border-radius: 4px;
    overflow: hidden;
}

.key-progress-line {
    background: #3859f4; /* Blue progress for white section */
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}

#keyCounterText {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* =========================================
   3. PROMISE SLIDER (Existing)
   ========================================= */
.promise-slider{
  background: #111a55;              /* dark navy like screenshot */
  padding: 48px 0 44px;
  overflow: hidden;                 /* needed for stagePadding look */
  font-family: "Inter", sans-serif;
}

.promise-slider__pill{
  display: inline-block;
  background: rgba(86, 120, 255, 0.45);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}

.promise-slider__title{
  color: #fff;
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 26px 0;
}

.promise-slider__title-light{
  opacity: 0.9;
  font-weight: 400;
}

/* Owl wrapper spacing */
.promise-slider__carousel{
  margin-top: 12px;
}

/* make stage padding visible + smooth */
.promise-slider__owl .owl-stage-outer{
  overflow: visible;                 /* IMPORTANT for stagePadding */
}

.promise-slider__item{
  padding: 0 12px;                   /* slide gaps like screenshot */
}

/* card design */
.promise-card{
  height: 220px;
  border-radius: 0px;                /* screenshot has sharp corners */
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.promise-card--primary{
  background: #3f63f2;
  color: rgba(255,255,255,0.90);
}

.promise-card--light{
  background: #ffffff;
  color: rgba(0,0,0,0.70);
}

.promise-card__icon{
  width: 90px;
  min-width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
}

.promise-card__icon img{
  width: 84px;
  height: 84px;
  object-fit: contain;
}

/* white card icon looks blue-ish */
.promise-card__icon--blue img{
  filter: none;
}

.promise-card__text{
  font-size: 14px;
  line-height: 1.75;
  max-width: 520px;
}

.promise-card__text--dark{
  color: rgba(0,0,0,0.70);
}

/* nav dots like screenshot (optional) */
.promise-slider__owl .owl-dots{
  margin-top: 18px;
}

.promise-slider__owl .owl-dot span{
  width: 8px !important;
  height: 8px !important;
  margin: 5px 6px !important;
  background: rgba(255,255,255,0.35) !important;
}

.promise-slider__owl .owl-dot.active span{
  background: rgba(255,255,255,0.85) !important;
}


/* ===========================
   Our Promise Intro Section
   =========================== */
.promise-intro{
  font-family: "Inter", sans-serif;
  padding: 46px 0 60px;
  background: #ffffff;
}

.promise-intro__wrap{
  position: relative;
}

.promise-intro__title{
  font-weight: 500;
  color: #111;
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  font-family: "comfortaa";
  letter-spacing: -0.02em;
  margin: 0 0 36px 0;
}

/* content spacing like screenshot */
.promise-intro__content{
  padding-top: 10px;
}

/* left rail */
.promise-intro__rail{
  position: relative;
  width: 34px;
  height: 260px;
}

/* vertical line */
.promise-intro__line{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  border-radius: 99px;
}

/* marker images (instead of CSS dots) */
.promise-intro__marker{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;      /* adjust according to your marker image */
  height: 18px;
  object-fit: contain;
}

/* positions (match screenshot spacing) */
.promise-intro__marker--1{ top: 34px; }
.promise-intro__marker--2{ top: 66px; }
.promise-intro__marker--3{ top: 98px; }
.promise-intro__marker--4{ top: 130px; }

/* paragraph */
.promise-intro__text{
  max-width: 920px;
  margin: 38px auto 0;   /* pushes text down like screenshot */
  color: rgba(0,0,0,0.65);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Social Media Negligence Section */
.social-negligence {
    background-color: #fafafa; /* Or match section bg */
}

.negligence-header-wrap h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 3rem;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 2rem;
}

.negligence-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.6;
    max-width: 500px;
}

/* Accordion Item */
.negligence-item {
    background-color: var(--light-gray);
    border-radius: 0; /* Initial design looks like blocks, checking screenshot closer... looks like separate blocks */
    margin-bottom: 1rem;
    padding: 30px 40px;
    transition: all 0.3s ease;
    cursor: pointer;
}
/* Re-check screenshot: rounded corners? No, sharp or slightly rounded. Let's go with slight or none based on others. */
/* Screenshot show clear separation. */
.negligence-item {
    background-color: #E8EDF2; /* Light gray from screenshot/var */
    color: var(--text-dark);
}

.negligence-item.active {
    background-color: #3859f4; /* Bright blue */
    color: #fff;
}

.neg-number {
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.8rem;
    opacity: 0.6;
    margin-bottom: 15px;
    display: block;
}

.negligence-item.active .neg-number {
    opacity: 0.8;
    color: #fff;
}

.neg-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.neg-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2rem;
    font-weight: 400;
}
.neg-title strong {
    font-weight: 600;
}

.negligence-item.active .neg-title {
    color: #fff;
}

.neg-subtitle {
    font-family: 'Comfortaa', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    opacity: 0.7;
}

.negligence-item.active .neg-subtitle {
    color: #e0e0e0;
}

.neg-body {
    display: none;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 20px;
    max-width: 90%;
}

.negligence-item.active .neg-body {
    display: block;
    color: #fff;
}

  
 /* Tablet (max-width: 992px) */



/* Virtual Assistant Hero Section */
.hero-va-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.hero-va-title {
  font-family: 'Comfortaa';
  font-size: 3.5rem;
  font-weight: 500;
  color: #000;
  line-height: 1.2;
  margin-bottom: 25px;
}

.hero-va-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 35px;
  max-width: 85%;
}

.btn-gradient-va {
  background: linear-gradient(90deg, #3b82f6 0%, #d946ef 100%);
  color: white;
  border: none;
  padding: 15px 35px;
  border-radius: 50px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.btn-gradient-va:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
  color: white;
}

.btn-gradient-va i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.btn-gradient-va:hover i {
    transform: translate(2px, -2px) rotate(-45deg);
}

/* Ensure initial rotation if using arrow right and wanting up-right */
.btn-gradient-va .fa-arrow-right {
    transform: rotate(-45deg);
}
.btn-gradient-va:hover .fa-arrow-right {
    transform: translate(2px, -2px) rotate(-45deg);
}


.va-image-wrapper {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 3/4; 
  height: 100%;
  margin-bottom: 130px;
}

.va-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
}

.va-stats-card {
  background: white;
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  max-width: 550px;
  margin-top: 50px;
  border: 1px solid #f0f0f0;
}

.va-stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  gap: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 25px;
}

.va-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.va-stat-icon-circle {
  width: 40px;
  height: 40px;
  background: #000;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.va-stat-text h4 {
  font-size: 1.2rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  margin: 0;
  color: #000;
  line-height: 1;
}

.va-stat-text span {
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  color: #666;
  white-space: nowrap;
}

.va-testimonial-quote {
  font-style: normal;
  color: #444;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  padding-left: 0px;
}

.portfolio-work-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Virtual Assistant Risk Mitigation Section */
.va-risk-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f5ff 0%, #ffffff 100%);
}

.va-risk-title {
  font-family: 'Comfortaa', sans-serif;
  font-size: 2.9rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin-bottom: 60px;
  line-height: 1.3;
}

.va-risk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 80px;
}

.va-risk-card {
  background: white;
  padding: 40px 30px;
  width: 350px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.va-risk-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.va-risk-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 15px;
  line-height: 1.4;
}

.va-risk-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

.va-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  padding: 8px 20px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.va-read-more:hover {
  background: #000;
  color: white;
}

.va-read-more i {
  font-size: 0.8rem;
  transform: rotate(-45deg);
}

/* Why Choose Htekz Section */
.va-why-choose-section {
  padding: 60px 0 80px;
  background: white;
}

.va-why-title {
  font-family: 'Comfortaa', sans-serif;
  font-size: 2.8rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.3;
}

.va-why-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 50px;
  max-width: 780px;
}

.va-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.va-feature-box {
  background: #ffffff;
  padding: 35px 30px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
   box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}

.va-feature-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.va-feature-box h4 {
  font-family: "comfortaa";
  font-size: 1.15rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
  line-height: 1.4;
}

.va-feature-box p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}



/* Success Stories Section */
.va-success-section {
  padding: 80px 0;
  background: #fafafa;
}

.va-success-title {
  font-family: 'Comfortaa', sans-serif;
  font-size: 2.7rem;
  font-weight: 500;
  color: #000;
  text-align: center;
  /* margin-right: 200px; */
  margin-bottom: 20px;
  line-height: 1.3;
}

.va-success-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.va-testimonial-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.va-testimonial-card {
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.va-testimonial-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.va-testimonial-content {
  padding: 30px 25px;
}

.va-testimonial-quote-icon {
  font-size: 1.7rem;
  color: #e0e0e0;
  line-height: 0;
  margin-bottom: 15px;
  font-family: serif;
}

.va-testimonial-text {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 25px;
}

.va-testimonial-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.va-testimonial-author-dot {
  width: 6px;
  height: 6px;
  background: #ff4444;
  border-radius: 50%;
}

.va-testimonial-author-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #000;
}

.va-testimonial-service {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  border-radius: 50px;
  color: #000;
 background-color: rgba(68, 68, 68, 0.1);
  padding-left: 14px;
}

/* Your Partner in Success Section */
.va-partner{
  padding: 70px 0;
  background: #ffffff;
}

/* outer rounded light-blue container */
.va-partner__box{
  background: #eaf6ff;
  border-radius: 48px;
  padding: 34px;
}

/* image wrapper inside */
.va-partner__media{
  border-radius: 34px;
  overflow: hidden;
  height: 100%;
  min-height: 360px;
}

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

/* right content spacing */
.va-partner__content{
  padding: 0 30px 0 60px;
}

.va-partner__title{
  font-family: 'Comfortaa', sans-serif;
  font-size: 2.7rem;
  font-weight: 500;
  color: #111;
  margin: 0 0 18px 0;
  line-height: 1.15;
}

.va-partner__text{
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  color: rgba(0,0,0,0.55);
  line-height: 1.75;
  margin: 0;
  max-width: 620px;
}

.process-flow{
  padding: 26px 0;
  background: #fff;
  font-family: "Inter", sans-serif;
}

.process-flow__list{
  max-width: 1280px;
  margin: 0 auto;
}

.process-flow__item{
  --w: 80%;
  --c: #7A4DF8;
  margin-bottom: 16px;
}

/* full row area */
.process-flow__track{
  position: relative;
  width: 100%;
  max-width: 920px;
  overflow: visible; /* step text can sit outside */
}

/* the colored progress bar (ONLY this has width) */
.process-flow__bar{
  position: relative;
  width: var(--w);
  height: 60px;
  border-radius: 999px;
  background: var(--c);
  display: flex;
  align-items: center;
  padding-left: 84px; /* space for number inside */
  box-shadow: 0 16px 30px rgba(0,0,0,0.10);
}

/* number circle INSIDE bar (start) */
.process-flow__num{
  position: absolute;
  left: 10px;           /* slight outside like screenshot */
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  font-family: "Comfortaa", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #111;
  border: 5px solid color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* bar label */
.process-flow__label{
  font-family: "Comfortaa", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

/* STEP text EXACTLY at bar end */
.process-flow__step{
  position: absolute;
  left: calc(var(--w) + 26px);  /* ✅ bar end + small gap */
  top: 50%;
  transform: translateY(-50%);
  font-family: "Comfortaa", sans-serif;
  font-size: 20px;
  color: rgba(0,0,0,0.35);
  white-space: nowrap;
}

.tech-use{
    padding: 70px 0 80px;
    background:
      radial-gradient(circle at 18% 28%, rgba(255, 228, 210, 0.70), rgba(255,255,255,0) 52%),
      radial-gradient(circle at 78% 88%, rgba(210, 246, 255, 0.70), rgba(255,255,255,0) 55%),
      #ffffff;
    overflow: hidden;
    font-family: "Inter", sans-serif;
  }

  .tech-use__title{
    font-family: "Comfortaa", sans-serif;
    font-size: clamp(2.1rem, 3.1vw, 3.1rem);
    font-weight: 500;
    color: #111;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
  }

  .tech-use__intro{
    max-width: 520px;
    color: rgba(0,0,0,0.50);
    font-size: 0.92rem;
    line-height: 1.75;
    margin: 0 0 28px 0;
  }

  /* Card base */
  .tech-use__card{
    background: rgba(255,255,255,0.92);
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    min-height: 255px;
    height: 100%;
  }

  /* Icon bubble */
  .tech-use__icon{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, #3b82f6 0%, #a78bfa 100%);
    margin-bottom: 14px;
  }

  .tech-use__icon i{
    font-size: 20px;
    color: #ffffff;
  }

  .tech-use__card-title{
    font-family: "Comfortaa", sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #111;
    margin: 0 0 8px 0;
  }

  .tech-use__card-text{
    margin: 0;
    color: rgba(0,0,0,0.52);
    font-size: 0.84rem;
    line-height: 1.65;
    max-width: 330px;
  }

  /* Right area */
  .tech-use__right{
    position: relative;
    min-height: 560px;
  }

  .tech-use__model{
    position: absolute;
    top: 75px;
    right: -10px;
    width: 430px;
    max-width: 430px;
    pointer-events: none;
  }

  .tech-use__model img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* push right cards below image */
  .tech-use__right-grid{
    padding-top: 470px;
  }

  /* make right cards same row equal size */
  .tech-use__right-grid .col-md-6{
    display: flex;
  }
  .tech-use__right-grid .tech-use__card{
    width: 100%;
  }


  .process-work {
        position: relative;
        padding: 46px 0 64px;
        font-family: "Inter", sans-serif;
        background:
          radial-gradient(circle at 8% 55%, rgba(170, 150, 255, 0.35), rgba(255, 255, 255, 0) 52%),
          radial-gradient(circle at 92% 45%, rgba(170, 235, 255, 0.45), rgba(255, 255, 255, 0) 55%),
          #ffffff;
        overflow: hidden;
      }

      .process-work__wrap {
        position: relative;
      }

      /* Heading */
      .process-work__heading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 6px 20px 28px;
      }

      .process-work__title {
        margin: 0;
        font-family: "Comfortaa", sans-serif;
        font-weight: 500;
        font-size: clamp(1.5rem, 2.3vw, 2.25rem);
        color: #111;
        letter-spacing: -0.01em;
      }

      .process-work__line {
        height: 2px;
        width: min(260px, 22vw);
        background: linear-gradient(90deg, rgba(30, 120, 255, 0), rgba(30, 120, 255, 0.45), rgba(30, 120, 255, 0));
        border-radius: 99px;
      }

      .process-work__dot {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #0b57ff;
        box-shadow: 0 8px 18px rgba(11, 87, 255, 0.25);
      }

      /* Grid wrapper spacing */
      .process-work__grid-wrap {
        padding-left: 28px;
        padding-right: 28px;
      }

      /* Grid */
      .process-work__grid {
        border-radius: 0;
      }

      .process-work__cell {
        padding: 50px 50px;
        min-height: 260px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* Titles inside cells */
      .process-work__cell-title {
        font-family: "Comfortaa", sans-serif;
        font-weight: 600;
        font-size: clamp(1.2rem, 1.6vw, 1.85rem);
        color: #111;
        margin: 0 0 18px 0;
        line-height: 1.2;
      }

      .process-work__cell-text {
        margin: 0;
        color: rgba(0, 0, 0, 0.55);
        font-size: 0.92rem;
        line-height: 1.7;
        max-width: 360px;
      }

      /* Divider lines like screenshot */
.process-work__cell--b {
  border-bottom: 1px solid rgba(255, 255, 255, 2.06);
}

.process-work__cell--t {
  border-top: 1px solid rgba(255, 255, 255, 2.06);
}

.process-work__cell--lb {
  border-left: 1px solid rgba(255, 255, 255, 2.06);
}

.process-work__cell--rb {
  border-right: 1px solid rgba(255, 255, 255, 2.06);
}

.process-work__cell--lt {
  border-left: 1px solid rgba(255, 255, 255, 2.06);
}

.process-work__cell--rt {
  border-right: 1px solid rgba(255, 255, 255, 2.06);
}


  .seo-perf{
    padding: 60px 0 70px;
    font-family: "Inter", sans-serif;
    background:
      radial-gradient(circle at 12% 20%, rgba(150, 130, 255, 0.28), rgba(255,255,255,0) 55%),
      radial-gradient(circle at 88% 18%, rgba(180, 240, 255, 0.35), rgba(255,255,255,0) 55%),
      #fff;
  }

  .seo-perf__wrap{ 
    max-width: 1420px;
   }

   .seo-perf__head{
    margin-top: 140px;
   }

  .seo-perf__title{
    font-family: "Comfortaa", sans-serif;
    font-weight: 500;
    font-size: clamp(2rem, 3vw, 3.1rem);
    color: #111;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    line-height: 1.15;
  }

  .seo-perf__subtitle{
    color: rgba(0,0,0,0.55);
    font-size: 0.92rem;
    line-height: 1.7;
    max-width: 1320px;
    margin: 0 auto;
  }

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

  .seo-perf__item-title{
    font-family: "Comfortaa", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: #111;
    margin: 0 0 10px 0;
  }

  .seo-perf__item-text{
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(0,0,0,0.55);
    max-width: 320px;
  }

  .seo-perf__item--tight .seo-perf__item-text{ max-width: 300px; }

  .seo-perf__media{
    border-radius: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.6);
  }

  .seo-perf__media img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* Image sizing like screenshot */
  .seo-perf__media--left img{ height: 120px; object-fit: cover; }
  .seo-perf__media--top img{ height: 120px; object-fit: cover; }
  .seo-perf__media--seo img{ height: 110px; object-fit: contain; padding: 8px; }

  /* Dark box right */
  .seo-perf__dark{
    background: #1f2a44;
    padding: 22px 20px;
    color: #fff;
    min-height: 270px;
  }

  .seo-perf__dark-title{
    font-family: "Comfortaa", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0 0 12px 0;
  }

  .seo-perf__dark-text{
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
  }

  /* CTA Blue bar */
  .seo-perf__cta{
    margin-top: 88px;
    background: #3c59f0;
    padding: 52px 22px;
    text-align: center;
  }

  .seo-perf__cta-title{
    font-family: "Comfortaa", sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
    line-height: 1.25;
    margin: 0 0 14px 0;
  }

  .seo-perf__cta-text{
    margin: 0 auto;
    max-width: 960px;
    color: rgba(255,255,255,0.82);
    font-size: 0.9rem;
    line-height: 1.7;
  }

/* css end */

/*home page responsiveness end*/ /*service page responsiveness start */
@media (max-width: 991px) {
  section {
    padding: 60px 0 !important;
  }
  .service-hero {
    padding: 30px 0 60px !important;
  }
  .service-hero-title,
  .trust-title,
  .section-title-main,
  .service-title-main {
    font-size: 2.5rem !important;
  }
  .trust-title br {
    display: none;
  }
  .blog-item {
    flex-direction: column;
    gap: 20px;
  }
  .blog-img-wrap {
    flex: 0 0 auto;
    width: 100%;
  }
  .blog-img-wrap img {
    height: 250px;
    object-fit: cover;
  }
  .project-item-row {
    flex-direction: column !important;
  }
  .project-text-side {
    padding: 30px 0 0;
  }
  .testi-item-v2 {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .testi-img-v2 {
    flex: 0 0 auto;
    width: 100%;
    height: 350px;
  }
  .testi-custom-nav {
    justify-content: center;
  }
  .testi-text-v2 {
    font-size: 1.4rem;
  }
  .hero-title {
    font-size: 1.9rem;
  }
  .hero-subtitle {
    max-width: 300px;
  }
  .team-img {
    max-width: 100%;
    margin-bottom: 20px;
  }
  .feature-title {
    font-size: 2rem;
  }
  .testimonial-grid-card {
    padding: 30px;
  }
  .map-center-text {
    font-size: 1.2rem;
  }
  .cta-banner-refined h2 {
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 0.95;
    max-width: 700px;
    color: #000;
    letter-spacing: -2px;
  }
  .image-side-container {
    height: 420px;
  }
  .btn-outline-navy {
    padding: 8px 20px;
    font-size: 0.85rem;
  }
  .btn-outline-navy i {
    margin-left: 0.3rem;
  }
    .btn-outline-navy {
    padding: 8px 20px;
    font-size: 0.85rem;
  }
  .btn-outline-navy i {
    margin-left: 0.3rem;
  }
   .hero-title {
    font-size: 1.9rem;
  }
  .hero-subtitle {
    max-width: 300px;
  }
  .team-img {
    max-width: 100%;
    margin-bottom: 20px;
  }
  .feature-title {
    font-size: 2rem;
  }
  .testimonial-grid-card {
    padding: 30px;
  }
  .map-center-text {
    font-size: 1.2rem;
  }
  .cta-banner-refined h2 {
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 0.95;
    max-width: 700px;
    color: #000;
    letter-spacing: -2px;
  }
  .image-side-container {
    height: 420px;
  }
   .social-heart__avatars{
    width: 100%;
    height: 210px;
    margin-bottom: 18px;
  }

  .social-heart__headline-wrap{
    gap: 18px;
  }

  .social-heart__features{
    border-top: none;
    border-bottom: none;
    background: transparent;
  }

  .social-heart__feature{
    border-top: 1px solid rgba(0,0,0,0.08);
  }

  .social-heart__feature--border{
    border-left: none;
  }
    .htk-feature-row {
    margin-bottom: 60px;
    flex-direction: column;
    text-align: left;
  }
  
  .htk-feature-text.pe-lg-5, .htk-feature-text.ps-lg-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 30px;
  }
  
  /* Reset order for stacking */
  .col-lg-6.order-2 { order: 2; }
  .col-lg-6.order-1 { order: 1; }

      .key-abstract-logo { display: none; }
    .key-title { font-size: 24px; }
      .social-headline {
    font-size: 40px;
  }
  .social-visual-box {
    height: auto;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  .social-icons-collage, .social-man-image {
    width: 100%;
    height: auto;
  }
  .ht-section .container {
    max-width: 1060px;
  }
   .offers-main-title { font-size: 36px; }
    .offer-acc-header { padding: 20px; }
    .offer-acc-body { padding: 0 20px 20px 20px; }
    .offer-acc-title { font-size: 22px; }
    .offer-img-wrap { margin-top: 30px; padding-left: 0 !important; }
    .va-testimonial-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .va-partner-content {
    padding-left: 0;
    margin-top: 30px;
  }
  
  .va-success-title,
  .va-partner-title {
    font-size: 2rem;
  }
  
  .va-partner-image-wrapper {
    min-height: 300px;
  }
    .va-partner__box{
    padding: 22px;
    border-radius: 32px;
  }

  .va-partner__media{
    min-height: 260px;
    border-radius: 26px;
  }

  .va-partner__content{
    padding: 26px 10px 0 10px;
  }

  .va-partner__title{
    font-size: 2.2rem;
  }
    .va-risk-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .va-features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .va-risk-title,
  .va-why-title {
    font-size: 2rem;
  }
   .tech-use__right{
      min-height: auto;
      margin-top: 26px;
    }
    .tech-use__model{
      position: static;
      width: min(430px, 100%);
      margin: 0 auto 18px;
    }
    .tech-use__right-grid{
      padding-top: 0;
    }
    .tech-use__intro{ max-width: 100%; }
          .process-work__grid-wrap {
          padding-left: 14px;
          padding-right: 14px;
        }
    .seo-perf__item-text{ max-width: 100%; }
    .seo-perf__media--left img,
    .seo-perf__media--top img{ height: 160px; }
    .seo-perf__dark{ min-height: auto; }
  
        .process-work__cell {
          padding: 42px 22px;
          min-height: auto;
          border-left: none !important;
          border-right: none !important;
        }

        .process-work__cell--t {
          border-top: 1px solid rgba(0, 0, 0, 0.06);
        }

        .process-work__cell--b {
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .process-work__line {
          width: 18vw;
        }

        .process-work__dot {
          width: 22px;
          height: 22px;
        }
}
@media (max-width: 768px) {
  .service-hero-title,
  .trust-title,
  .section-title-main,
  .service-title-main {
    font-size: 2.2rem !important;
  }
  .trust-highlight {
    padding: 0 5px;
  }
  .btn-navy-pill {
    width: 50%;
    text-align: center;
  }
  .callback-link {
    margin-left: 0;
    margin-top: 10px;
    display: block;
    text-align: center;
  }
  .blog-content h3 {
    font-size: 1.5rem;
  }
  .project-desc {
    font-size: 1.1rem;
  }
  .faq-question {
    font-size: 1.1rem;
  }
   .promise-intro__title{
    text-align: left;
  }
  .promise-intro__text{
    margin-top: 18px;
  }
  .promise-intro__rail{
    height: 180px;
    margin-bottom: 10px;
  }
  .promise-card{
    height: auto;
    padding: 22px 20px;
    gap: 18px;
  }
  .promise-card__icon{
    width: 70px;
    min-width: 70px;
    height: 70px;
  }
  .promise-card__icon img{
    width: 60px;
    height: 60px;
  }
      .sm-risk-item { padding: 20px; }
    .sm-risk-header { font-size: 1.2rem; }
    .sm-risk-item.active .sm-risk-header { font-size: 1.5rem; }
    .process-step-item {
          gap: 15px;
       }
       .step-number-circle {
          width: 50px;
          height: 50px;
          min-width: 50px;
          font-size: 20px;
       }
       .step-card {
          padding: 25px;
       }
       .step-card-title {
          font-size: 24px;
       }
         .process-steps__row{
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 14px;
  }
  .process-flow__bar{
    height: 54px;
    padding-left: 76px;
  }
  .process-flow__label{
    font-size: 16px;
  }
  .process-flow__step{
    position: static;          /* on mobile, show below bar */
    display: block;
    transform: none;
    margin-top: 8px;
    margin-left: 66px;
    font-size: 16px;
  }
  .process-flow__num{
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
} /* Responsive adjustments */ /* Tablet */

@media (max-width: 576px) {
  .image-side-container {
    height: 300px;
    border-radius: 25px;
  }
  .btn-outline-navy {
    padding: 6px 15px;
    font-size: 0.9rem;
  }
  .btn-outline-navy i {
    margin-left: 0.2rem;
  }
  .map-section-top p {
    font-size: 0.9rem;
  }
    .image-side-container {
    height: 300px;
    border-radius: 25px;
  }
  .btn-outline-navy {
    padding: 6px 15px;
    font-size: 0.9rem;
  }
  .btn-outline-navy i {
    margin-left: 0.2rem;
  }

.hero-va-title {
  font-family: 'Comfortaa';
  font-size: 2rem;
  font-weight: 500;
  color: #000;
  line-height: 1.2;
  margin-bottom: 25px;
}
  .map-section-top p {
    font-size: 0.9rem;
  }
  .htk-copyblock{
    margin-bottom: 42px;
  }
  .htk-copyblock__body p{
    font-size: 14px;
  }
    .htk-blueblock{
    padding: 26px 18px 22px;
    border-radius: 16px;
  }
  .portfolio-main-title {
  font-family: "Comfortaa", sans-serif;
  font-size: 38px;
  font-weight: 500;
  color: #030207;
  letter-spacing: -1px;
}
.approach-main-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 25px;
    font-weight: 500px;
    color: #000;
    letter-spacing: 1.5px;
}
} /*services page responsiveness end*/