:root {
    --theme:#00008b;
  --theme2:#25D366;
  --dark:#0F2239;
  --text:#4D5765;
  --white:#ffffff;
  --bg:#F3F7FB;
  --border:#e6e6e6;
  --theme-color:#00008b;
  --theme-light:#2563eb;
  --text-dark:#0F2239;
  --text-light:#4D5765;
  --white:#ffffff;
  --bg:#F3F7FB;
  --transition:0.5s ease;
  --theme-color2: #EA0000;
  --title-color: #0F2239;
  --body-color: #4D5765;
  --smoke-color: #F3F7FB;
  --black-color: #000000;
  --white-color: #ffffff;
  --light-color: #72849B;
  --yellow-color: #FFB539;
  --success-color: #28a745;
  --error-color: #dc3545;
  --border-color: #ecf1f9;
    --main-blue: #00008b;
  --main-red: #EA0000;
  --dark: #000;
  --light: #fff;
  --accent: #FFB539;
  --title-font: 'Jost';
  /* --body-font: 'Jost'; */
  --icon-font: "Font Awesome 6 Pro";
    --volgarie_font:'volgarieregular';
    --accent:#111;
    --muted:#666;
    --border:#e6e6e6;
    --transition: 0.6s cubic-bezier(.2,.9,.2,1);
  --main-container: 1380px;
  --container-gutters: 24px;
  --section-space: 120px;
  --section-space-mobile: 80px;
  --section-title-space: 70px;
  --ripple-ani-duration: 5s;
  
}

a{
    text-decoration: none;
}

p{
  font-family: 'Jost';
  font-size: 17px;
}
body, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
      font-family: 'Jost';

 background:#fff;}




 
/* GLOBAL */
body {
  margin: 0;
  font-family: 'Jost', sans-serif;

}

/* HERO WRAPPER */
.hero-core {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
  background: radial-gradient(circle at top, var(--main-blue), var(--dark));
}

/* CENTER CONTENT */
.hero-core__content {
  max-width: 800px;
  margin: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-core__tag {
  background: rgba(255,255,255,0.1);
  padding: 8px 20px;
  border-radius: 30px;
  display: inline-block;
  margin-bottom: 20px;
    color:#fff;

}

.hero-core__title {
  font-size: 52px;
  font-weight: 700;
  color:#fff;
}

.hero-core__title span {
  color: #FFB539;
}

.hero-core__text {
  margin-top: 20px;
  color: #ccc;
}

/* BUTTON */
.hero-core__btn {
  margin-top: 30px;
  display: inline-block;
  background: var(--main-red);
  color: #fff;
  padding: 12px 30px;
  border-radius: 40px;
  transition: 0.3s;
}

.hero-core__btn:hover {
  background: var(--light);
  color: var(--main-red);
}

/* IMAGE CIRCLES */
.hero-core__circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.2);
  animation: float 6s infinite ease-in-out;
}

.hero-core__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SIZES */
.size-sm { width: 90px; height: 90px; }
.size-md { width: 120px; height: 120px; }
.size-lg { width: 100px; height: 100px; }

/* POSITIONS (ALL SIDES) */
.pos-1 { top: 18%; left: 9%; }
.pos-2 { top: 15%; right: 8%; }
.pos-3 { bottom: 8%; left: 10%; }
.pos-4 { bottom: 5%; right: 5%; }
.pos-5 { top: 50%; left: 2%; }
.pos-6 { top: 40%; right: 2%; }
.pos-7 { top: 20%; left: 25%; }
.pos-8 { bottom: 20%; right: 25%; }

/* ANIMATION */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

/* RESPONSIVE */
@media(max-width:768px){
  .hero-core__title {
    font-size: 32px;
  }
  .hero-core__circle {
    display: none;
  }
}



/* SECTION COMMON */
.section-block {
  padding: 50px 8%;
}

/* ================= STEP 2 ================= */

.stats-glow {
  background: linear-gradient(135deg, #00008b, #000);
  border-radius: 20px;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

.stats-glow::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--secondary);
  filter: blur(150px);
  top: -100px;
  left: -100px;
  opacity: 0.4;
}

.stats-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-box {
  flex: 1;
  min-width: 220px;
  text-align: center;
  padding: 25px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  transition: 0.4s;
}

.stat-box:hover {
  transform: translateY(-10px) scale(1.05);
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #FFD700;
}

.stat-text {
  margin-top: 8px;
  opacity: 0.8;
    color:#fff;

}

/* ================= STEP 3 ================= */

.problem-section {
  display: flex;
  align-items: center;
  gap: 50px;
}

.problem-left, .problem-right {
  flex: 1;
}

.problem-title {
  font-size: 40px;
  font-weight: 700;
}

.problem-card {
  margin-top: 20px;
  background: rgba(255,255,255,0.05);
  padding: 25px;
  border-radius: 15px;
  border-left: 4px solid var(--secondary);
  transition: 0.3s;
}

.problem-card:hover {
  transform: translateX(10px);
}

.problem-list li {
  margin-bottom: 10px;
}

/* ================= STEP 4 ================= */

.solution-split {
  display: flex;
  align-items: center;
  gap: 50px;
}

.solution-left {
  flex: 1;
}

.solution-right {
  flex: 1;
}

.solution-title {
  font-size: 42px;
  font-weight: 700;
}

.solution-highlight {
  color: #ea0000;
}

.solution-card {
  background: var(--glass);
  background: var(--theme-color);
  color:white;
  padding: 20px;
  margin-top: 15px;
  border-radius: 12px;
  transition: 0.3s;
}

.solution-card:hover {
  /* background: rgba(255,255,255,0.15); */
  transform: translateY(-5px);
}

.solution-image {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* RESPONSIVE */
@media(max-width: 992px){

  .problem-section,
  .solution-split {
    flex-direction: column;
  }

}


/* SECTION */
.about-sec {
  padding: 100px 8%;
}

/* WRAPPER */
.about-sec__wrap {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

/* IMAGE SIDE */
.about-sec__media {
  flex: 1;
  position: relative;
}

.about-sec__img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* FLOAT IMAGE */
.about-sec__float {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  bottom: -30px;
  right: -30px;
  border: 4px solid var(--white-color);
}

.about-sec__float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT */
.about-sec__content {
  flex: 1;
}

/* TITLE */
.about-sec__title {
  font-size: 40px;
  color: var(--title-color);
  font-weight: 700;
}

.about-sec__title span {
  color: var(--theme-color);
}

/* TEXT */
.about-sec__text {
  margin-top: 20px;
  text-align: justify;
  color: var(--body-color);
  line-height: 1.7;
}



/* BUTTON */
.about-sec__btn {
  display: inline-block;
  margin-top: 30px;
  background: var(--theme-color);
  color: var(--white-color);
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: var(--transition);
}

.about-sec__btn:hover {
  background: var(--theme-color2);
}

/* RESPONSIVE */
@media(max-width: 992px) {
  .about-sec__wrap {
    flex-direction: column;
  }

  .about-sec__float {
    display: none;
  }
}

/* ================= SECTION ================= */
.services-area {
  padding: 10px 5%;
  text-align: center;
}

/* TITLE */
.section-title {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 16px;
  color: #aaa;
  margin-bottom: 60px;
}

/* GRID */
.services-area__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* ================= CARD ================= */
.service-item {
  background: #fff;
  color: #111;
  border: 2px solid #00008b;
  padding: 50px 25px 40px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: 0.4s;
}

/* TOP CIRCLE */
.service-item::before {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  top:-20px;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.5s;
}

/* 🔥 LIGHT SHAPE */
.service-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(https://tecch-nextjs-rktheme.vercel.app/assets/img/about/shape-4-4.png);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: 0.5s ease;
  z-index: 0;
}

/* 🔥 HOVER (LIGHT OPACITY GRADIENT) */
.service-item:hover {
  background: linear-gradient(
    135deg,
    rgba(47, 128, 237, 0.5),
    rgba(234, 0, 0, 0.5)
  );
  color: #fff;
  transform: translateY(-10px);
}

/* LIGHT SHAPE SHOW */
.service-item:hover::after {
  opacity: 0.12;
}

/* ICON */
.service-item__icon {
  width: 70px;
  height: 70px;
  background: #2f80ed;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: auto;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
  transition: 0.4s;
}

/* TEXT */
.service-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.service-item p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

.service-item a {
  text-decoration: none;
  font-weight: 600;
  color: #2f80ed;
  position: relative;
  z-index: 2;
}

/* HOVER TEXT */
.service-item:hover p {
  color: #eee;
}

.service-item:hover a {
  color: #fff;
}

/* ICON CHANGE */
.service-item:hover .service-item__icon {
  background: #fff;
  color: #2f80ed;
}

/* CIRCLE MOVE */
.service-item:hover::before {
  top: 50px;
  background: rgba(255,255,255,0.2);
}

/* RESPONSIVE */
@media(max-width: 992px){
  .services-area__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 576px){
  .services-area__grid {
    grid-template-columns: 1fr;
  }
}



/* ================= PROCESS ================= */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 25px;
}

.process-box {
  background: var(--white-color);
  padding: 35px 25px;
  border-radius: 15px;
  text-align: center;
  border: 1px solid var(--border);
  transition: var(--transition);
  position: relative;
}

/* SHAPE ICON */
.shape-icon {
  width: 70px;
  height: 70px;
  margin: auto;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--main-blue), var(--main-red));
  clip-path: polygon(
    25% 5%, 75% 5%,
    100% 50%, 75% 95%,
    25% 95%, 0% 50%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  font-size: 24px;
}

/* TEXT */
.process-box h3 {
  margin-bottom: 10px;
}

.process-box p {
  font-size: 14px;
  color: var(--body-color);
}

/* HOVER */
.process-box:hover {
  transform: translateY(-10px);
  border-color: var(--theme-color);
  box-shadow: 0 10px 25px rgba(0,0,139,0.15);
}

/* ================= BENEFITS ================= */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 25px;
  margin-top: 60px;
}

.benefit-box {
  background: var(--white-color);
  padding: 25px;
  border-radius: 12px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

/* ICON */
.benefit-box i {
  font-size: 28px;
  color: var(--theme-color);
  margin-bottom: 15px;
}

/* TEXT */
.benefit-box h4 {
  margin-bottom: 8px;
}

.benefit-box p {
  font-size: 14px;
  color: var(--body-color);
}

/* SHAPE BG */
.benefit-box::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--main-blue), var(--main-red));
  border-radius: 50%;
  top: -40px;
  right: -40px;
  opacity: 0.08;
  transition: var(--transition);
}

/* HOVER */
.benefit-box:hover {
  transform: translateY(-8px);
  border-color: var(--theme-color);
}

.benefit-box:hover::before {
  transform: scale(1.3);
  opacity: 0.15;
}



/* SECTION */
.industries {
    padding: 100px 20px;
    text-align: center;
    background-color: #0F2239;
    color: var(--white-color);
}

.industries h2 {
    font-size: 38px;
    margin-bottom: 10px;
}

.industries p.top {
    color: var(--light-color);
    margin-bottom: 60px;
}

/* WRAPPER */
.pill-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* PILL */
.pill {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 25px;
    border-radius: 50px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.4s;
    cursor: pointer;
}

/* ICON */
.pill .icon {
    width: 50px;
    height: 50px;
    background: var(--theme-color2);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: 0.4s;
}

/* TEXT */
.pill h4 {
    margin-bottom: 3px;
    font-size: 16px;
}

.pill p {
    font-size: 13px;
    color: var(--light-color);
}

/* HOVER EFFECT */
.pill:hover {
    transform: translateY(-8px) scale(1.03);
    background: var(--theme-color2);
}

.pill:hover .icon {
    background: var(--white-color);
    color: var(--theme-color2);
}

.pill:hover p {
    color: var(--white-color);
}

/* RESPONSIVE */
@media(max-width:600px) {
    .pill {
        flex-direction: column;
        text-align: center;
        border-radius: 20px;
    }
}




/* SECTION */
.faq-section {
    padding: 100px 20px;
}

.faq-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* LEFT IMAGE */
.faq-image {
    flex: 1;
    position: relative;
}

.faq-image img {
    width: 100%;
    border-radius: 20px;
}

/* OVERLAY */
.faq-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(
        to bottom right,
        rgba(0,0,139,0.3),
        rgba(234,0,0,0.3)
    );
}

/* RIGHT CONTENT */
.faq-content {
    flex: 1;
}

.faq-content h2 {
    font-size: 34px;
    color: var(--title-color);
    margin-bottom: 10px;
}

.faq-content p.top {
    color: var(--body-color);
    margin-bottom: 30px;
}

/* FAQ ITEM */
.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    background: var(--white-color);
}

/* QUESTION */
.faq-question {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question h4 {
    font-size: 16px;
    color: var(--title-color);
}

/* ICON */
.faq-icon {
    width: 35px;
    height: 35px;
    background: var(--theme-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
}

/* ANSWER */
/* .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease;
    padding: 0 20px;
} */

.faq-answer p {
    padding: 10px 0 20px;
    font-size: 14px;
    color: var(--body-color);
}

/* ACTIVE */
.faq-item.active {
    border-color: var(--theme-color2);
}

.faq-item.active .faq-icon {
    background: var(--theme-color2);
    transform: rotate(45deg);
}

/* RESPONSIVE */
@media(max-width:900px) {
    .faq-container {
        flex-direction: column;
    }
}

.heroUltraWrap {
  height: 100vh;
  background: url('https://img.freepik.com/free-vector/design-concept-illustration-idea-style-creativity-projects_613284-3229.jpg?t=st=1775891403~exp=1775895003~hmac=73ba0d944b0339ae0d12def25a64f2eacd0ed7840b71625904a8cdc3e943e70a&w=2000') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* OVERLAY */
.heroUltraWrap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
     rgba(234,0,0,0.5),
    rgba(0,0,139,0.5)
   
  );
}

/* CONTENT */
.heroUltraContent {
  position: relative;
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 20px;
}

/* TITLE */
.heroUltraContent h1 {
  font-size: 52px;
  font-weight: 700;
}

.heroUltraContent h1 span {
  color: #FFD700;
}

/* TEXT */
.heroUltraContent p {
  margin: 20px 0 30px;
  font-size: 18px;
  opacity: 0.9;
}

/* BUTTON */
.heroUltraBtn {
  display: inline-block;
  background: #fff;
  color: var(--theme-color);
  padding: 14px 32px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.heroUltraBtn:hover {
  background: var(--theme-color2);
  color: #fff;
}

/* FLOATING STATS */
.heroStatsWrap {
  position: absolute;
  bottom: 40px;
  display: flex;
  gap: 20px;
}

/* CARD */
.heroStatCard {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  padding: 15px 25px;
  border-radius: 15px;
  text-align: center;
}

.heroStatCard h3 {
  font-size: 20px;
}

.heroStatCard p {
  font-size: 12px;
}

/* RESPONSIVE */
@media(max-width:768px) {
  .heroUltraContent h1 {
    font-size: 32px;
  }

  .heroStatsWrap {
    flex-direction: column;
    bottom: 20px;
  }
}


/* ABOUT SECTION */
.aboutNovaWrap {
  padding: 20px 20px;
  background: #f9fbff;
}

/* CONTAINER */
.aboutNovaContainer {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* IMAGE */
.aboutNovaImage {
  position: relative;
}

.aboutNovaImage img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* EXPERIENCE BADGE */
.aboutExpBadge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: var(--theme-color);
  color: #fff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}

.aboutExpBadge h3 {
  font-size: 26px;
}

.aboutExpBadge p {
  font-size: 12px;
}

/* CONTENT */
.aboutNovaContent h2 {
  font-size: 38px;
  color: var(--title-color);
}

.aboutNovaContent h2 span {
  color: var(--theme-color2);
}

.aboutNovaContent p {
  margin: 20px 0;
  color: var(--body-color);
  line-height: 1.6;
}

/* FEATURES */
.aboutFeatureList {
  margin-top: 20px;
}

.aboutFeatureItem {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.aboutFeatureIcon {
  width: 35px;
  height: 35px;
  background: var(--theme-color2);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.aboutFeatureText {
  color: var(--body-color);
}

/* BUTTON */
.aboutNovaBtn {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 28px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
}

.aboutNovaBtn:hover {
  background: var(--theme-color2);
}

/* RESPONSIVE */
@media(max-width:768px) {
  .aboutNovaContainer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .aboutExpBadge {
    left: 50%;
    transform: translateX(-50%);
  }

  .aboutFeatureItem {
    justify-content: center;
  }
}

/* SECTION */
.serviceMorphWrap {
  padding: 100px 20px;
  background: #f6f8ff;
  text-align: center;
}

.serviceMorphWrap h2 {
  font-size: 42px;
  color: var(--title-color);
  margin-bottom: 60px;
}

.serviceMorphWrap h2 span {
  color: var(--theme-color2);
}

/* GRID */
.serviceMorphGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

/* CARD */
.serviceBlobCard {
  padding: 45px 25px;
  background: var(--white);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  position: relative;
  transition: 0.5s;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* HOVER */
.serviceBlobCard:hover {
  transform: translateY(-10px) scale(1.03);
  border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
}

/* ICON */
.serviceBlobIcon {
  width: 75px;
  height: 75px;
  background: linear-gradient(45deg, var(--theme-color), var(--theme-color2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin: 0 auto 20px;
  transition: 0.4s;
}

.serviceBlobIcon i {
  font-size: 30px;
}

/* ICON HOVER */
.serviceBlobCard:hover .serviceBlobIcon {
  transform: rotate(10deg) scale(1.1);
}

/* TITLE */
.serviceBlobCard h3 {
  font-size: 22px;
  color: var(--title-color);
  margin-bottom: 15px;
}

/* LIST */
.serviceBlobCard ul {
  list-style: none;
}

.serviceBlobCard ul li {
  font-size: 14px;
  color: var(--body-color);
  margin-bottom: 10px;
}

/* GLOW EFFECT */
.serviceBlobCard::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(0,0,0,0.05), transparent);
  opacity: 0;
  transition: 0.4s;
}

.serviceBlobCard:hover::after {
  opacity: 1;
}

/* RESPONSIVE */
@media(max-width:768px) {
  .serviceMorphWrap h2 {
    font-size: 28px;
  }
}

/* SECTION */
.logoTypesWrapX {
  padding: 10px 20px;
  background: #f9fbff;
}

.logoTypesWrapX h2 {
  text-align: center;
  font-size: 40px;
  color: var(--title-color);
  margin-bottom: 70px;
}

.logoTypesWrapX h2 span {
  color: var(--theme-color2);
}

/* MAIN GRID */
.logoMainFlexX {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  max-width: 1200px;
  margin: auto;
  align-items: center;
}

/* LEFT IMAGE */
.logoLeftImageX img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* TIMELINE */
.logoTimelineX {
  position: relative;
}

/* LINE */
/* .logoTimelineX::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--theme-color), var(--theme-color2));
} */

/* ITEM */
.logoStepX {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

/* ICON */
.logoStepIconX {
  min-width: 60px;
  height: 60px;
  background: var(--white);
  border: 4px solid var(--theme-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  font-size: 22px;
  z-index: 2;
  transition: 0.4s;
}

/* CONTENT */
.logoStepContentX {
  background: #fff;
  padding: 20px 25px;
  margin-left: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: 0.4s;
}

.logoStepContentX h3 {
  color: var(--title-color);
  font-size: 20px;
  margin-bottom: 5px;
}

.logoStepContentX p {
  font-size: 14px;
  color: var(--body-color);
}

/* HOVER */
.logoStepX:hover .logoStepIconX {
  background: var(--theme-color2);
  color: #fff;
  border-color: var(--theme-color2);
}

.logoStepX:hover .logoStepContentX {
  transform: translateX(10px);
}

/* RESPONSIVE */
@media(max-width:768px) {

  .logoMainFlexX {
    grid-template-columns: 1fr;
  }

  .logoTimelineX::before {
    left: 20px;
  }

  .logoStepIconX {
    min-width: 50px;
    height: 50px;
  }

  .logoTypesWrapX h2 {
    font-size: 28px;
  }
}


/* SECTION */
.why {
  padding: 20px 5%;
  text-align: center;
}

.why h2 {
  font-size: 40px;
  color: var(--title-color);
  margin-bottom: 15px;
}

.why p.subtitle {
  color: var(--body-color);
  margin-bottom: 50px;
}

/* GRID */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* CARD */
.why-card {
  background: var(--white);
  padding: 30px 20px;
  border-radius: 15px;
  transition: 0.4s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

/* ICON */
.why-card i {
  font-size: 28px;
  color: var(--theme-color);
  margin-bottom: 15px;
  transition: 0.3s;
}

/* TITLE */
.why-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--title-color);
}

/* TEXT */
.why-card p {
  font-size: 14px;
  color: var(--body-color);
}

/* HOVER EFFECT */
.why-card:hover {
  transform: translateY(-10px);
  background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
  color: #fff;
}

.why-card:hover h3,
.why-card:hover p {
  color: #fff;
}

.why-card:hover i {
  color: #fff;
}

/* RESPONSIVE */
@media(max-width: 992px){
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 576px){
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* SECTION */
.tech-process-section {
  padding: 20px 5%;
  text-align: center;
}

.tech-process-title {
  font-size: 42px;
  color: var(--title-color);
  margin-bottom: 60px;
}

/* GRID */
.tech-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  max-width: 1300px;
  margin: auto;
}

/* CARD */
.tech-process-item {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  padding: 40px 25px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

/* ICON */
.tech-process-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef2ff;
  color: var(--theme-color);
  font-size: 22px;
  position: relative;
  z-index: 2;
}

/* TEXT */
.tech-process-item h3 {
  font-size: 18px;
  color: var(--title-color);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.tech-process-item p {
  font-size: 14px;
  color: var(--body-color);
  position: relative;
  z-index: 2;
  line-height: 1.6;
}

/* =========================
   DIFFERENT SHAPES PER CARD
========================= */

/* CARD 1 - CIRCLE BLUR */
.tech-process-item:nth-child(1)::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  background: rgba(0,0,139,0.08);
  border-radius: 50%;
  top: -50px;
  right: -50px;
}

/* CARD 2 - DIAGONAL WAVE */
.tech-process-item:nth-child(2)::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(234,0,0,0.08), transparent);
  transform: rotate(45deg);
  top: -80px;
  right: -80px;
}

/* CARD 3 - ROTATED SQUARE */
.tech-process-item:nth-child(3)::before {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  background: rgba(0,0,139,0.06);
  transform: rotate(45deg);
  bottom: -50px;
  right: -50px;
}

/* CARD 4 - DOT PATTERN CIRCLE */
.tech-process-item:nth-child(4)::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  background-image: radial-gradient(var(--theme-color) 2px, transparent 2px);
  background-size: 12px 12px;
  border-radius: 50%;
  top: -60px;
  right: -60px;
  opacity: 0.15;
}

/* HOVER */
.tech-process-item:hover {
  transform: translateY(-10px);
  border-color: var(--theme-color);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* RESPONSIVE */
@media(max-width: 992px){
  .tech-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 576px){
  .tech-process-grid {
    grid-template-columns: 1fr;
  }
}
/* SECTION */
.faq-section {
  padding: 100px 5%;
}

/* WRAPPER */
.faq-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* LEFT IMAGE */
.faq-image {
  position: relative;
}

.faq-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* RIGHT SIDE */
.faq-content h2 {
  font-size: 40px;
  color: var(--title-color);
  margin-bottom: 25px;
}

/* FAQ ITEM */
.faq-item {
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  transition: var(--transition);
}

/* QUESTION
.faq-question {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--title-color);
} */

.faq-question i {
  transition: var(--transition);
}

/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  color: var(--body-color);
  line-height: 1.6;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

/* ACTIVE */
.faq-item.active {
  border-color: var(--theme-color);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.faq-item.active .faq-answer {
  padding: 15px 20px 20px;
  max-height: 200px;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
  color: var(--theme-color);
}

/* RESPONSIVE */
@media(max-width: 992px) {
  .faq-wrapper {
    grid-template-columns: 1fr;
  }

  .faq-content h2 {
    text-align: center;
  }
}
/* CTA SECTION */
.cta-section {
  padding: 10px 5%;
}

/* CTA BOX */
.cta-box {
  max-width: 1100px;
  margin: auto;
  background: linear-gradient(135deg, var(--theme-color), #1b1bbf);
  color: var(--white-color);
  padding: 60px 40px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* BACKGROUND SHAPES */
.cta-box::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  top: -100px;
  left: -100px;
}

.cta-box::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  bottom: -100px;
  right: -100px;
}

/* TEXT */
.cta-box h2 {
  font-size: 36px;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
}

.cta-box p {
  font-size: 16px;
  line-height: 1.7;
  max-width: 800px;
  margin: auto;
  position: relative;
  z-index: 2;
  opacity: 0.95;
}

/* BUTTON */
.cta-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 14px 30px;
  background: var(--theme-color2);
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s ease;
  position: relative;
  z-index: 2;
}

.cta-btn:hover {
  background: #c50000;
  transform: translateY(-3px);
}

/* RESPONSIVE */
@media(max-width: 768px){
  .cta-box h2 {
    font-size: 26px;
  }

  .cta-box {
    padding: 40px 25px;
  }
}


.seo-services-wrap {
  padding: 80px 5%;
  background: #f5f5f5;
  text-align: center;
}

.seo-title {
  font-size: 34px;
  color: #1a237e;
  margin-bottom: 40px;
}

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

.seo-box {
  background: #fff;
  overflow: hidden;
  position: relative;
}

.seo-image {
  height: 260px;
}

.seo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease;
}

.seo-info {
  background: #1a1f7a;
  color: #fff;
  padding: 60px 20px 30px;
  position: relative;
}

.seo-icon {
  width: 80px;
  height: 80px;
  background: #1a1f7a;
  border-radius: 50%;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border: 6px solid #fff;
}

.seo-box:hover img {
  transform: scale(1.1);
}

.seo-box:hover .seo-info {
  background: #0d47a1;
}

/* RESPONSIVE */
@media(max-width: 992px) {
  .seo-flex-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 576px) {
  .seo-flex-grid {
    grid-template-columns: 1fr;
  }
}

/* SECTION */
.seoabout-section {
  position: relative;
  padding: 100px 6%;
  background: linear-gradient(135deg, #ffffff, #f5f7fa);
  overflow: hidden;
}

/* CONTAINER */
.seoabout-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/* LEFT CONTENT */
.seoabout-content {
  flex: 1;
  z-index: 2;
}

.seoabout-content h1 {
  font-size: 35px;
  color: #111;
  margin-bottom: 20px;
  line-height: 1.2;
}

.seoabout-content h1 span {
  color: #0d47a1;
}

.seoabout-content p {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* FEATURES */
.seoabout-features {
  list-style: none;
  margin-bottom: 25px;
}

.seoabout-features li {
  font-size: 15px;
  color: #444;
  margin-bottom: 8px;
}

/* BUTTONS */
.seoabout-buttons {
  display: flex;
  gap: 15px;
}

.seoabout-btn-primary {
  background: #0d47a1;
  color: #fff;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.seoabout-btn-primary:hover {
  background: #08306b;
}

.seoabout-btn-outline {
  border: 2px solid #0d47a1;
  color: #0d47a1;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.seoabout-btn-outline:hover {
  background: #0d47a1;
  color: #fff;
}

/* STATS */
.seoabout-stats {
  display: flex;
  gap: 30px;
  margin-top: 25px;
}

.seoabout-stats h3 {
  color: #0d47a1;
  font-size: 22px;
}

.seoabout-stats p {
  font-size: 13px;
  color: #666;
}

/* RIGHT IMAGE */
.seoabout-image {
  flex: 1;
  z-index: 2;
}

.seoabout-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* BLOBS */
.seoabout-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.3;
}

.blob-a {
  width: 200px;
  height: 200px;
  background: #90caf9;
  top: 10%;
  left: 5%;
}

.blob-b {
  width: 250px;
  height: 250px;
  background: #a5d6a7;
  bottom: 10%;
  right: 10%;
}

.blob-c {
  width: 150px;
  height: 150px;
  background: #ffcc80;
  top: 50%;
  right: 30%;
}

/* RESPONSIVE */
@media(max-width: 992px) {
  .seoabout-container {
    flex-direction: column;
    text-align: center;
  }

  .seoabout-content h1 {
    font-size: 34px;
  }

  .seoabout-buttons {
    justify-content: center;
  }

  .seoabout-stats {
    justify-content: center;
    flex-wrap: wrap;
  }
}




/* HERO BANNER */
.seo-banner {
  height: 100vh;
  background: url('https://img.freepik.com/premium-photo/seo-search-engine-optimization-digital-marketing-business-technology-concept_524876-489.jpg?uid=R208066470&ga=GA1.1.1679070017.1753435898&semt=ais_hybrid&w=740&q=80') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* OVERLAY */
.seo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* CONTENT */
.seo-banner-content {
  position: relative;
  text-align: center;
  color: #fff;
  max-width: 800px;
  padding: 20px;
}

.seo-banner-content h1 {
  font-size: 50px;
  margin-bottom: 20px;
  line-height: 1.2;
}

.seo-banner-content h1 span {
  color: #ff9800;
}

.seo-banner-content p {
  font-size: 16px;
  margin-bottom: 30px;
  color: #ddd;
  line-height: 1.6;
}

/* BUTTONS */
.seo-banner-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.banner-btn-primary {
  background: #ff3b3b;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.banner-btn-primary:hover {
  background: #d62828;
}

.banner-btn-outline {
  border: 2px solid #fff;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.banner-btn-outline:hover {
  background: #fff;
  color: #000;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .seo-banner-content h1 {
    font-size: 32px;
  }

  .seo-banner-buttons {
    flex-direction: column;
  }
}

/* SECTION */
.seo-clean-section {
  padding: 80px 6%;
  text-align: center;
}

.seo-clean-section h2 {
  font-size: 34px;
  margin-bottom: 50px;
  color: var(--title-color);
}

/* GRID */
.seo-clean-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

/* CARD */
.seo-clean-card {
  background: var(--white);
  padding: 35px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  transition: 0.4s;
  position: relative;
  overflow: hidden;
}

/* subtle top line */
.seo-clean-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: var(--theme-color2);
  transition: 0.4s;
}

/* HOVER */
.seo-clean-card:hover::before {
  width: 100%;
}

.seo-clean-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* DIAMOND ICON */
.seo-clean-icon {
  width: 70px;
  height: 70px;
  background: var(--theme-color2);
  margin: 0 auto 20px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
  border-radius: 8px;
}

.seo-clean-icon i {
  transform: rotate(-45deg);
  color: var(--white-color);
  font-size: 24px;
}

/* TEXT */
.seo-clean-card h3 {
  font-size: 16px;
  color: var(--title-color);
}

/* HOVER ICON EFFECT */
.seo-clean-card:hover .seo-clean-icon {
  background: var(--theme-color);
}

/* OPTIONAL TEXT HOVER */
.seo-clean-card:hover h3 {
  color: var(--theme-color);
}

/* RESPONSIVE */
@media(max-width: 576px) {
  .seo-clean-section h2 {
    font-size: 26px;
  }
}

/* SECTION */
.seo-process-section {
  padding: 80px 6%;
  text-align: center;
}

.seo-process-title {
  font-size: 36px;
  margin-bottom: 60px;
  color: #0F2239;
}

/* WRAPPER */
.seo-process-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

/* GRADIENT LINE */
.seo-process-wrapper::before {
  content: "";
  position: absolute;
  top: 55px;
  left: 5%;
  width: 90%;
  height: 4px;
  background: linear-gradient(90deg, #EA0000, #00008b);
  z-index: 0;
}

/* CARD */
.seo-step-card {
  background: #fff;
  padding: 30px 20px;
  border-radius: 16px;
  width: 100%;
  max-width: 220px;
  position: relative;
  z-index: 1;
  border: 1px solid #eee;
  transition: 0.4s;
}

.seo-step-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ICON CIRCLE */
.seo-step-icon {
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #EA0000, #00008b);
  border-radius: 50%;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 0 0 5px #fff;
  transition: 0.4s;
}

/* STEP NUMBER SMALL */
.step-no {
  font-size: 13px;
  color: #999;
  margin-bottom: 5px;
}

/* TEXT */
.seo-step-card h3 {
  font-size: 17px;
  margin-bottom: 10px;
  color: #0F2239;
}

.seo-step-card p {
  font-size: 14px;
  color: #555;
}

/* HOVER EFFECT */
.seo-step-card:hover .seo-step-icon {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 0 15px rgba(234,0,0,0.4);
}

/* RESPONSIVE */
@media(max-width: 992px) {
  .seo-process-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .seo-process-wrapper::before {
    display: none;
  }

  .seo-step-card {
    max-width: 100%;
  }
}


.pd-split-section{
  display:flex;
  align-items:center;
  padding:80px 6%;
  gap:50px;
}

.pd-split-img{ flex:1; }

.pd-split-img img{
  width:100%;
  border-radius:16px;
  box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.pd-split-content{ flex:1; }

.pd-section-title{
  font-size:32px;
  margin-bottom:30px;
  color:#0F2239;
}

/* WHY */
.pd-why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.pd-why-card{
  background:#fff;
  padding:20px;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  transition:0.4s;
}

.pd-why-card i{ color:#EA0000; margin-bottom:8px; }
.pd-why-card h3{ font-size:15px; }

.pd-why-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:#EA0000;
  transform:scaleX(0);
  transform-origin:left;
  transition:0.4s;
  opacity:0.08;
}

.pd-why-card:hover::before{ transform:scaleX(1); }
.pd-why-card:hover{ transform:translateY(-6px); }

/* INDUSTRY */
.pd-industry-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.pd-industry-box{
  border:2px solid #eee;
  padding:20px;
  border-radius:12px;
  text-align:center;
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

.pd-industry-box i{
  font-size:22px;
  color:#00008b;
  margin-bottom:10px;
}

.pd-industry-box p{ font-size:14px; }

.pd-industry-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:#00008b;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:0.4s;
}

.pd-industry-box:hover::before{ transform:scaleY(1); }

.pd-industry-box:hover i,
.pd-industry-box:hover p{
  color:#fff;
  position:relative;
  z-index:1;
}

.pd-industry-box:hover{ border-color:#00008b; }

/* REVERSE */
.pd-reverse{ flex-direction:row-reverse; }

/* CTA */
.pd-cta-section{
  position:relative;
  padding:100px 6%;
  text-align:center;
  background:#0F2239;
  color:#fff;
  overflow:hidden;
}

.pd-cta-shape{
  position:absolute;
  border-radius:50%;
  opacity:0.2;
  animation:pd-float 6s infinite ease-in-out;
}

.pd-cta-shape.one{
  width:220px;
  height:220px;
  background:#EA0000;
  top:-60px;
  left:-60px;
}

.pd-cta-shape.two{
  width:160px;
  height:160px;
  background:#00bcd4;
  bottom:-50px;
  right:-50px;
  animation-delay:2s;
}

.pd-cta-shape.three{
  width:120px;
  height:120px;
  background:#ff9800;
  top:40%;
  left:80%;
  animation-delay:4s;
}

@keyframes pd-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-25px);}
}

.pd-cta-content h2{ font-size:36px; margin-bottom:15px; }
.pd-cta-content p{ font-size:16px; margin-bottom:25px; opacity:0.9; }

.pd-cta-btn{
  display:inline-block;
  padding:12px 30px;
  background:#EA0000;
  color:#fff;
  border-radius:30px;
  text-decoration:none;
}

/* FAQ */
.pd-faq-section{ padding:80px 6%; }

.pd-faq-title{
  text-align:center;
  font-size:34px;
  margin-bottom:50px;
  color:#0F2239;
}

.pd-faq-row{
  display:flex;
  gap:50px;
  align-items:center;
}

.pd-faq-left{ flex:1; }

.pd-faq-left img{
  width:100%;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.pd-faq-right{ flex:1; }

.pd-faq-card{
  background:#fff;
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:12px;
  cursor:pointer;
  transition:0.3s;
}

.pd-faq-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.pd-faq-number{
  width:35px;
  height:35px;
  background:#00008b;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}

.pd-faq-answer{
  max-height:0;
  overflow:hidden;
  font-size:14px;
  color:#555;
  transition:0.4s ease;
  padding-left:47px;
}

.pd-faq-card.active .pd-faq-answer{
  max-height:140px;
  margin-top:10px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .pd-split-section,
  .pd-reverse,
  .pd-faq-row{
    flex-direction:column;
  }
}

/* SECTION */
.webDev-section {
  background: var(--white-color);
  padding: 100px 0;
}

/* IMAGE BOX */
.webDev-imageBox {
  background: var(--smoke-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  transition: 0.3s;
}

.webDev-imageBox:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.webDev-imageBox img {
  width: 100%;
  max-width: 430px;
}

/* BADGE */
.webDev-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(0,0,139,0.08);
  color: var(--theme-color);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 15px;
}

/* TITLE */
.webDev-title {
  font-size: 42px;
  font-weight: 800;
  color: var(--title-color);
  line-height: 1.3;
}

.webDev-title span {
  color: var(--theme-color);
}

/* TEXT */
.webDev-text {
  margin-top: 18px;
  font-size: 16px;
  text-align: justify;
  color: var(--body-color);
  line-height: 1.8;
}

/* FEATURES */
.webDev-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 25px;
}

/* FEATURE CARD */
.webDev-feature {
  background: var(--smoke-color);
  border: 1px solid var(--border-color);
  padding: 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  transition: 0.3s;
}

.webDev-feature i {
  color: var(--theme-color);
  font-size: 18px;
}

.webDev-feature:hover {
  border-color: var(--theme-color);
  transform: translateY(-4px);
}

/* BUTTON */
.webDev-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 26px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.webDev-btn:hover {
  background: var(--theme-color2);
  transform: translateY(-3px);
  color: #fff;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .webDev-title {
    font-size: 30px;
    text-align: center;
  }

  .webDev-text {
    text-align: center;
  }

  .webDev-features {
    grid-template-columns: 1fr;
  }

  .webDev-btn {
    /* display: block; */
    margin: 25px auto 0;
  }

  .webDev-imageBox {
    margin-bottom: 30px;
  }
}
/* HERO BANNER */
.heroBanner {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* BACKGROUND IMAGE */
  background: url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d") center/cover no-repeat;

  color: #fff;
  overflow: hidden;
}

/* DARK OVERLAY */
.heroBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

/* CONTENT */
.heroBanner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 20px;
}

/* BADGE */
.heroBanner-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 30px;
  font-size: 13px;
  margin-bottom: 15px;
}

/* TITLE */
.heroBanner-title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.2;
}

.heroBanner-title span {
  color: #ffcc00;
}

/* TEXT */
.heroBanner-text {
  margin-top: 18px;
  font-size: 17px;
  color: #e5e5e5;
  line-height: 1.8;
}

/* BUTTON */
.heroBanner-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 28px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.heroBanner-btn:hover {
  background: var(--theme-color2);
  transform: translateY(-3px);
  color: #fff;
}

/* RESPONSIVE */
@media(max-width: 768px) {

  .heroBanner-title {
    font-size: 30px;
  }

  .heroBanner-text {
    font-size: 15px;
  }
}

/* ===== SECTION ===== */
.serviceSec {
  padding: 80px 0;
  background: #f5f7fb;
}

/* ===== CARD ===== */
.serviceCard {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* IMAGE */
.serviceCard img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  transition: 0.4s;
}

/* DEFAULT CONTENT (ICON + TITLE) */
.serviceTop {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  z-index: 2;
  transition: 0.4s;
}

/* ICON */
.serviceIcon {
  width: 70px;
  height: 70px;
  background: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 26px;
}

/* TITLE */
.serviceTop h4 {
  font-size: 22px;
  font-weight: 700;
}

/* OVERLAY (HIDDEN FIRST) */
.serviceOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 34, 57, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;

  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

/* HOVER CONTENT */
.serviceContent {
  color: #fff;
  opacity: 0;
  transform: translateY(30px);
  transition: 0.4s;
}

/* DESCRIPTION */
.serviceContent p {
  font-size: 14px;
  margin: 10px 0;
}

/* BUTTON */
.serviceContent a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
}

/* ===== HOVER EFFECTS ===== */
.serviceCard:hover img {
  transform: scale(1.08);
}

/* SHOW OVERLAY */
.serviceCard:hover .serviceOverlay {
  opacity: 1;
  visibility: visible;
}

/* MOVE ICON + TITLE UP */
.serviceCard:hover .serviceTop {
  bottom: 55%;
  transform: translateY(-50%);
}

/* SHOW TEXT */
.serviceCard:hover .serviceContent {
  opacity: 1;
  transform: translateY(0);
}


/* SECTION */
.radialSec {
  padding: 20px 0;
  background: url(https://tecch-nextjs-rktheme.vercel.app/assets/img/service/shape-4-1.png);
  color: var(--title-color);
  text-align: center;

  /* ✅ added border */
  border: 1px solid var(--border-color);
}

/* TITLE */
.radialSec h2 {
  font-weight: 800;
}

/* CENTER */
.core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 0 40px rgba(0,0,139,0.3);
  color: var(--white-color);
}

/* WRAP */
.circleWrap {
  position: relative;
  width: 420px;
  height: 420px;
  margin: auto;
}

/* NODE */
.node {
  position: absolute;
  width: 95px;
  height: 95px;
  background: var(--white-color)
  ;
  color: var(--title-color);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1px solid var(--accent);
  transition: 0.3s;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* ICON */
.node i {
  font-size: 18px;
  margin-bottom: 5px;
  color: var(--theme-color);
}

/* HOVER */
.node:hover {
  transform: scale(1.15);
  background: var(--theme-color);
  color: var(--white-color);
}

.node:hover i {
  color: var(--white-color);
}

/* POSITIONS */
.n1 { top: 0; left: 50%; transform: translateX(-50%); }
.n2 { top: 18%; right: 0; }
.n3 { bottom: 18%; right: 0; }
.n4 { bottom: 0; left: 50%; transform: translateX(-50%); }
.n5 { bottom: 18%; left: 0; }
.n6 { top: 18%; left: 0; }

/* ================= MOBILE ================= */
@media (max-width: 768px) {

  .radialSec {
    padding: 60px 15px;
    border: 1px solid var(--border-color); /* keep border mobile too */
  }

  .circleWrap {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 40px auto;
  }

  .core {
    position: relative;
    top: unset;
    left: unset;
    transform: none;
    width: 100%;
    max-width: 220px;
    height: 120px;
    border-radius: 12px;
    margin-bottom: 15px;
    font-size: 16px;
  }

  .node {
    position: relative;
    width: 48%;
    height: 95px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  }

  .node i {
    font-size: 16px;
  }

  .n1, .n2, .n3, .n4, .n5, .n6 {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    transform: none;
  }

  .node:active {
    transform: scale(0.95);
  }
}
/* ===== SECTION ===== */
.ctaSection{
  overflow: hidden;
}

/* LEFT IMAGE */
.ctaImg{
  height: 320px;
}

.ctaImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RIGHT CONTENT */
.ctaContent{
  position: relative;
  background: var(--black-color);
  color: var(--white-color);
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 🔺 MAIN ANGLE SHAPE */
.ctaContent::before{
  content:"";
  position:absolute;
  left:-120px;
  top:0;
  width:260px;
  height:100%;
  background: var(--main-red);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 🔺 SECOND LAYER SHAPE */
.ctaContent::after{
  content:"";
  position:absolute;
  left:-70px;
  bottom:0;
  width:200px;
  height:70%;
  background: var(--theme-color2);
  opacity: 0.6;
  clip-path: polygon(0 100%, 100% 100%, 0 0);
}

/* TEXT */
.ctaBox{
  position: relative;
  z-index: 2;
}

.ctaBox h2{
  font-size: 36px;
  font-weight: 800;
  color: var(--white-color);
  margin-bottom: 20px;
}

/* BUTTON */
.ctaBtn{
  background: var(--main-red);
  color: var(--white-color);
  padding: 12px 32px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: var(--transition);
}

.ctaBtn:hover{
  background: var(--theme-color);
  color: var(--white-color);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){

  .ctaImg,
  .ctaContent{
    height: auto;
  }

  .ctaContent{
    padding: 40px 20px;
  }

  .ctaContent::before,
  .ctaContent::after{
    display:none;
  }

  .ctaBox h2{
    font-size: 24px;
  }

}

/* SECTION */
.whySec {
  padding: 20px 0;
  background: #f8f9fc;
}

/* TITLE */
.whyTitle {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--title-color);
  margin-bottom: 60px;
}

.whyTitle span {
  color: var(--theme-color2);
}

/* CARD */
.whyCard {
  background: var(--white-color);
  border-radius: 16px;
  padding: 25px;
  position: relative;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  display: flex;
  gap: 20px;
  align-items: center;
}

/* HOVER */
.whyCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  border-color: var(--theme-color);
}

/* ICON BOX */
.whyIcon {
  min-width: 70px;
  height: 70px;
  background: rgba(0,0,139,0.08);
  color: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 50%;
  transition: var(--transition);
}

/* ICON HOVER */
.whyCard:hover .whyIcon {
  background: var(--theme-color2);
  color: var(--white-color);
}

/* TEXT */
.whyText h5 {
  font-size: 18px;
  font-weight: 700;
  color: var(--title-color);
}

.whyText p {
  font-size: 14px;
  color: var(--body-color);
  margin-top: 5px;
}

/* ZIG-ZAG ALIGN */
.whyRow:nth-child(even) .whyCard {
  flex-direction: row-reverse;
  text-align: right;
}

/* RESPONSIVE */
@media(max-width:768px){
  .whyCard {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* ================= INDUSTRIES ================= */
.industrySec {
  padding: 20px 0;
  background: var(--smoke-color);
}

.industryTitle {
  text-align: center;
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 60px;
  color: var(--title-color);
}

.industryCard {
  background: var(--white-color);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: 0.4s;
  position: relative;
  overflow: hidden;
}

.industryCard::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: var(--theme-color);
  top: -40px;
  right: -40px;
  border-radius: 50%;
  opacity: 0.08;
}

.industryIcon {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: rgba(0,0,139,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--theme-color);
}

.industryCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  border-color: var(--theme-color);
}

.industryCard:hover .industryIcon {
  background: var(--theme-color2);
  color: var(--white-color);
}

.industryCard h5 {
  font-weight: 700;
  color: var(--title-color);
}

.industryCard p {
  font-size: 14px;
  color: var(--body-color);
}

/* ================= FAQ ================= */
.faqSec {
  padding: 100px 0;
  background: var(--white-color);
}

.faqTitle {
  font-size: 38px;
  font-weight: 800;
  color: var(--title-color);
  margin-bottom: 30px;
}

.faqImg {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.accordion-item {
  border: none;
  margin-bottom: 15px;
  border-radius: 12px;
  overflow: hidden;
}

.accordion-button {
  font-weight: 600;
  background: var(--smoke-color);
  color: var(--title-color);
}

.accordion-button:not(.collapsed) {
  background: var(--theme-color);
  color: var(--white-color);
}

.accordion-body {
  background: #fff;
  font-size: 14px;
  color: var(--body-color);
}

/* RESPONSIVE */
@media(max-width:768px){
  .industryTitle, .faqTitle {
    font-size: 28px;
  }
}




/* HERO */
.uq-hero{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 20px;

    /* ✅ YOUR IMAGE */
    background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url("https://img.freepik.com/premium-photo/email-marketing-business-strategy-hand-holding-tablet-pc-with-social-network-icon_1304044-6380.jpg?uid=R208066470&ga=GA1.1.1679070017.1753435898&semt=ais_hybrid&w=740&q=80");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;
    overflow:hidden;
    text-align:center;
}

/* FLOAT ICONS */
.uq-icon{
    position:absolute;
    font-size:22px;
    opacity:0.15;
    animation: float 6s infinite ease-in-out;
    color: var(--white-color);
}

.uq-icon:nth-child(1){top:10%;left:8%;}
.uq-icon:nth-child(2){top:20%;right:10%; animation-delay:1s;}
.uq-icon:nth-child(3){bottom:15%;left:12%; animation-delay:2s;}
.uq-icon:nth-child(4){bottom:25%;right:15%; animation-delay:3s;}

@keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-20px);}
}

/* CENTER CONTENT */
.uq-container{
    max-width:800px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    z-index:2;
}

/* TEXT */
.uq-left{
    color: var(--white-color);
}

.uq-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:20px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    font-size:13px;
    margin-bottom:15px;
}

.uq-left h1{
    font-size:48px;
    line-height:1.2;
    margin-bottom:15px;
}

.uq-left h1 span{
    color: #ff9800;
}

.uq-left p{
    font-size:16px;
    opacity:0.85;
    line-height:1.6;
    max-width:600px;
    margin:0 auto 25px;
}

/* BUTTONS */
.uq-btns{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.uq-btn{
    padding:12px 22px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);
}

.uq-primary{
    background: var(--theme-color);
    color: var(--white-color);
}

.uq-primary:hover{
    background: var(--theme-color2);
}

.uq-outline{
    border:1px solid var(--white-color);
    color: var(--white-color);
    background:transparent;
}

.uq-outline:hover{
    background: var(--white-color);
    color: var(--title-color);
}

/* RESPONSIVE */
@media(max-width:768px){
    .uq-left h1{
        font-size:34px;
    }
}
/* SECTION */
.ems-about-sec{
  width:100%;
  padding:90px 20px;
  position:relative;
  /* overflow:hidden; */
}

/* BACKGROUND GLOW */
.ems-about-sec::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background: rgba(0,0,139,0.06);
  border-radius:50%;
  top:-120px;
  left:-120px;
  filter: blur(80px);
}

/* CONTAINER */
.ems-about-wrap{
  max-width:var(--main-container);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* gap:60px; */
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}

/* LEFT */
.ems-about-left{
  flex:1;
}

.ems-tag{
  display:inline-block;
  padding:7px 16px;
  border:1px solid var(--border-color);
  border-radius:30px;
  font-size:13px;
  color:var(--theme-color);
  background: var(--smoke-color);
  margin-bottom:15px;
}

.ems-about-left h2{
  font-size:42px;
  color:var(--title-color);
  margin-bottom:15px;
  line-height:1.2;
}

.ems-about-left h2 span{
  color:var(--theme-color);
}

.ems-about-left p{
  font-size:16px;
  color:var(--body-color);
  line-height:1.7;
  margin-bottom:25px;
  max-width:600px;
}

/* FEATURES */
.ems-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.ems-feature-card{
  background: var(--white-color);
  border:1px solid var(--border-color);
  padding:18px;
  border-radius:14px;
  transition:var(--transition);
  box-shadow:0 5px 20px rgba(0,0,0,0.04);
}

.ems-feature-card:hover{
  transform:translateY(-6px);
  border-color:var(--theme-color);
}

/* RIGHT IMAGE CARD */
.ems-about-right{
  flex:1;
  display:flex;
  justify-content:center;
}

/* BACKGROUND IMAGE CARD */
.ems-bg-image-card{
  width:480px;
  height:500px;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:url("https://img.freepik.com/premium-photo/3d-laptop-showcasing-email-marketing-automation-customer-engagement-icons-business-communication_1036687-66811.jpg?uid=R208066470&ga=GA1.1.1679070017.1753435898&semt=ais_hybrid&w=740&q=80") center/cover no-repeat;
  box-shadow:0 20px 50px rgba(0,0,0,0.15);
  transition:var(--transition);
}

.ems-bg-image-card:hover{
  transform:translateY(-8px);
}

/* OVERLAY */
.ems-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.75));
}

/* CONTENT */
.ems-content-card{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:25px;
  text-align:center;
  color:#fff;
  z-index:2;
}

.ems-icon{
  font-size:40px;
  margin-bottom:10px;
}

.ems-content-card h3{
  color:#fff;
  margin-bottom:8px;
}

.ems-content-card p{
  font-size:14px;
  opacity:0.9;
  margin-bottom:15px;
}

/* STATS */
.ems-stats{
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,0.2);
  padding-top:12px;
}

.ems-stat h4{
  color:#38bdf8;
  font-size:18px;
}

.ems-stat p{
  color:#ddd;
  font-size:12px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .ems-about-left h2{
    font-size:30px;
  }

  .ems-feature-grid{
    grid-template-columns:1fr;
  }

  .ems-about-wrap{
    display: block;
    text-align:center;
    justify-content:center;
  }

  .ems-bg-image-card{
    width:100%;
    height:420px;
  }
  .emx-wrap{
    padding: 20px;
  }
}

/* SECTION */
.email-section{
  padding:10px 20px;
  text-align:center;
}

/* TITLE */
.email-section h2{
  font-size:38px;
  color:var(--title-color);
}

.email-section h2 span{
  color:var(--theme-color);
}

.email-section p.sub{
  max-width:600px;
  margin:10px auto 50px;
  color:var(--body-color);
}

/* GRID */
.email-section .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
  max-width:1100px;
  margin:auto;
}

/* 📩 EMAIL SHAPE CARD */
.mail-card{
  position:relative;
  background:var(--white);
  padding:30px 25px;
  border-radius:10px;
  text-align:left;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.4s;
}

/* envelope top fold */
.mail-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:70px;
  background:linear-gradient(135deg,#00008b, #3b82f6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* bottom envelope triangle */
.mail-card::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:70px;
  background:rgba(0,0,139,0.05);
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

/* ICON */
.mail-icon{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--theme-color);
  color:#fff;
  border-radius:12px;
  font-size:18px;
  margin-top:20px;
  margin-bottom:15px;
  position:relative;
  z-index:2;
}

/* TITLE */
.mail-card h3{
  font-size:18px;
  color:var(--title-color);
  position:relative;
  z-index:2;
}

/* TEXT */
.mail-card p{
  font-size:14px;
  color:var(--body-color);
  margin-top:8px;
  line-height:1.6;
  position:relative;
  z-index:2;
}

/* HOVER OPEN EFFECT */
.mail-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* hover envelope glow */
.mail-card:hover::before{
  filter:brightness(1.2);
}

/* BUTTON */
.mail-card a{
  display:inline-block;
  margin-top:15px;
  font-size:14px;
  color:var(--theme-color);
  font-weight:600;
  text-decoration:none;
  position:relative;
  z-index:2;
}

/* RESPONSIVE */
@media(max-width:768px){
 .email-section h2{font-size:28px;}
}
/* SECTION WRAPPER */
.emx-wrap{
  padding:40px 20px;
}

/* TITLE */
.emx-head{
  text-align:center;
  margin-bottom:60px;
}

.emx-head h2{
  font-size:38px;
  color:var(--title-color);
}

.emx-head h2 span{
  color:var(--theme-color);
}

.emx-head p{
  max-width:650px;
  margin:10px auto;
  color:var(--body-color);
}

/* ================= EMAIL TYPES ================= */
.emx-ribbon-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
  margin-bottom:90px;
}

/* CARD */
.emx-ribbon{
  position:relative;
  background:#fff;
  padding:25px;
  border-radius:14px;
  border:1px solid var(--border);
  transition:0.4s;
  overflow:hidden;
}

.emx-ribbon:hover{
  transform:translateY(-10px);
  border-color:var(--theme-color);
  box-shadow:0 20px 40px rgba(0,0,139,0.12);
}

/* RIBBON TAG */
.emx-ribbon::before{
  content:"EMAIL";
  position:absolute;
  top:15px;
  right:-30px;
  background:var(--theme-color);
  color:#fff;
  padding:6px 40px;
  transform:rotate(45deg);
  font-size:11px;
}

/* ICON */
.emx-icon{
  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  font-size:20px;
  box-shadow:0 10px 25px rgba(0,0,139,0.25);
  margin-bottom:12px;
  transition:0.4s;
}

.emx-ribbon:hover .emx-icon{
  transform:rotate(8deg) scale(1.1);
}

/* TEXT */
.emx-ribbon h4{
  color:var(--title-color);
  margin-bottom:10px;
}

.emx-ribbon p{
  color:var(--body-color);
  font-size:14px;
  line-height:1.6;
}

/* ================= PROCESS ================= */
.emx-process{
  padding:20px 20px;
  text-align:center;
}

.emx-process h2{
  font-size:38px;
  color:var(--title-color);
}

.emx-process h2 span{
  color:var(--theme-color);
}

.emx-process p{
  max-width:650px;
  margin:10px auto 60px;
  color:var(--body-color);
}

.emx-flow{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

/* PROCESS CARD */
.emx-node{
  width:180px;
  height:180px;
  background:#fff;
  border:2px solid #e6e6e6;
  border-radius:30px 60px 30px 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:0.4s;
  position:relative;
}

.emx-node:hover{
  transform:translateY(-10px);
  border-color:var(--theme-color);
  box-shadow:0 20px 35px rgba(0,0,139,0.15);
}

/* ICON */
.emx-node i{
  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  font-size:18px;
  margin-bottom:10px;
}

/* TEXT */
.emx-node h4{
  font-size:14px;
  color:var(--title-color);
}

.emx-node p{
  font-size:12px;
  color:var(--body-color);
  margin-top:5px;
  padding:0 10px;
}

/* DOT */
.emx-node::before{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background:#38bdf8;
  border-radius:50%;
  top:12px;
  right:12px;
  box-shadow:0 0 10px #38bdf8;
}

/* ARROW */
.emx-arrow{
  font-size:28px;
  color:var(--theme-color);
}

/* RESPONSIVE */
@media(max-width:900px){
  .emx-flow{
    flex-direction:column;
  }

  .emx-arrow{
    transform:rotate(90deg);
  }
}
/* SECTION */
.wcu{
  padding:30px 20px;
}

/* HEADER */
.wcu-head{
  text-align:center;
  margin-bottom:60px;
}

.wcu-head h2{
  font-size:40px;
  color:var(--title-color);
}

.wcu-head h2 span{
  color:var(--theme-color);
}

.wcu-head p{
  max-width:650px;
  margin:10px auto;
  color:var(--body-color);
}

/* LAYOUT */
.wcu-wrap{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

/* LEFT IMAGE PANEL (NEW) */
.wcu-image{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  height:100%;
  min-height:420px;
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.wcu-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:0.5s;
}

.wcu-image:hover img{
  transform:scale(1.15);
}

/* overlay */
.wcu-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,139,0.5),rgba(37,99,235,0.3));
}

/* floating badge */
.wcu-badge{
  position:absolute;
  bottom:20px;
  left:20px;
  background:#fff;
  padding:10px 15px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  color:var(--title-color);
  z-index:2;
}

/* RIGHT CONTENT */
.wcu-right{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* FEATURE ROW */
.wcu-item{
  display:flex;
  gap:15px;
  align-items:flex-start;
  padding:18px;
  background:#fff;
  border-radius:14px;
  border:1px solid #e6e6e6;
  transition:0.4s;
}

.wcu-item:hover{
  transform:translateX(8px);
  border-color:var(--theme-color);
  box-shadow:0 15px 30px rgba(0,0,139,0.1);
}

/* ICON */
.wcu-icon{
  min-width:45px;
  height:45px;
  background:linear-gradient(135deg,var(--theme-color),#2563eb);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

/* TEXT */
.wcu-text h4{
  color:var(--title-color);
  margin-bottom:5px;
}

.wcu-text p{
  font-size:14px;
  color:var(--body-color);
  line-height:1.5;
}

/* RESPONSIVE */
@media(max-width:900px){
  .wcu-wrap{
    grid-template-columns:1fr;
  }

  .wcu-image{
    min-height:280px;
  }
}

/* ================= CTA WRAPPER ================= */
.emc-ctaWrap{
  padding:20px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  
 
}

.emc{
    background:var(--bg);
    width:1200px ;
}
/* CARD */
.emc-ctaCard{
  
  width:100%;
  background:linear-gradient(135deg,var(--theme-color),var(--theme-light));
  border-radius:25px;
  padding:60px 40px;
  color:var(--white);
  position:relative;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

/* floating shapes */
.emc-ctaCard::before,
.emc-ctaCard::after{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  background:rgba(255,255,255,0.08);
  border-radius:50%;
}

.emc-ctaCard::before{
  top:-60px;
  left:-60px;
}

.emc-ctaCard::after{
  bottom:-80px;
  right:-80px;
}

/* CONTENT */
.emc-ctaContent{
  text-align:center;
  position:relative;
  z-index:2;
}

/* ICON */
.emc-ctaIcon{
  width:70px;
  height:70px;
  margin:0 auto 20px;
  background:rgba(255,255,255,0.15);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  backdrop-filter:blur(10px);
}

/* TITLE */
.emc-ctaTitle{
  font-size:34px;
  margin-bottom:10px;
}

/* TEXT */
.emc-ctaText{
  font-size:16px;
  opacity:0.9;
  max-width:600px;
  margin:0 auto 25px;
  line-height:1.6;
}

/* BUTTONS */
.emc-ctaBtns{
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}

/* PRIMARY BUTTON */
.emc-btnPrimary{
  background:#fff;
  color:var(--theme-color);
  padding:12px 22px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
}

.emc-btnPrimary:hover{
  transform:translateY(-5px);
}

/* OUTLINE BUTTON */
.emc-btnOutline{
  border:1px solid rgba(255,255,255,0.6);
  color:#fff;
  padding:12px 22px;
  border-radius:10px;
  text-decoration:none;
  transition:var(--transition);
}

.emc-btnOutline:hover{
  background:rgba(255,255,255,0.15);
  transform:translateY(-5px);
}

/* RESPONSIVE */
@media(max-width:600px){
  .emc-ctaTitle{
    font-size:26px;
  }
}


/* ================= FAQ SECTION ================= */
.emf-wrap{
  padding:30px 20px;
}

/* HEADER */
.emf-head{
  text-align:center;
  margin-bottom:50px;
}

.emf-head h2{
  font-size:38px;
  color:var(--title);
}

.emf-head h2 span{
  color:var(--theme-color);
}

.emf-head p{
  max-width:600px;
  margin:10px auto;
  color:var(--text);
}

/* LAYOUT */
.emf-layout{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:center;
}

/* LEFT FAQ */
.emf-box{
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* ITEM */
.emf-item{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:0.3s;
  box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

.emf-question{
  padding:18px 20px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  color:var(--title);
}

.emf-question i{
  transition:0.3s;
}

/* ANSWER */
.emf-answer{
  max-height:0;
  overflow:hidden;
  transition:0.4s ease;
  padding:0 20px;
  color:var(--text);
  font-size:14px;
  line-height:1.6;
}

/* ACTIVE */
.emf-item.active .emf-answer{
  max-height:200px;
  padding:0 20px 18px;
}

.emf-item.active .emf-question i{
  transform:rotate(180deg);
  color:var(--theme-color);
}

/* RIGHT IMAGE */
.emf-image{
  position:relative;
}

.emf-image img{
  width:100%;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* floating badge */
.emf-badge{
  position:absolute;
  bottom:20px;
  left:20px;
  background:var(--theme-color);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
}

/* RESPONSIVE */
@media(max-width:900px){
  .emf-layout{
    grid-template-columns:1fr;
  }

  .emf-image{
    order:-1;
  }
}


/* HERO */
.orbit-hero{
  width:100%;
  min-height:100vh;
  background:radial-gradient(circle at center,#111b2e,#070b14);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

/* glow rings */
.orbit-hero::before,
.orbit-hero::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  border:1px solid rgba(37,211,102,0.15);
  animation:rotate 12s linear infinite;
}

.orbit-hero::after{
  width:700px;
  height:700px;
  border-color:rgba(37,211,102,0.08);
  animation-direction:reverse;
}

@keyframes rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* CENTER CONTENT */
.center-box{
  text-align:center;
  color:#fff;
  max-width:700px;
  z-index:2;
  position:relative;
}

.badge{
  display:inline-block;
  padding:6px 14px;
  border-radius:30px;
  background:rgba(37,211,102,0.15);
  color:var(--wa);
  font-size:13px;
  margin-bottom:15px;
  border:1px solid rgba(37,211,102,0.3);
}

.center-box h1{
  font-size:52px;
  line-height:1.2;
}

.center-box h1 span{
  color:var(--wa);
}

.center-box p{
  margin-top:15px;
  color:var(--text);
  line-height:1.7;
}

/* BUTTONS */
.btns{
  margin-top:25px;
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}

.btn{
  padding:12px 22px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.primary{
  background:var(--wa);
  color:#fff;
}

.outline{
  border:2px solid var(--wa);
  color:var(--wa);
}

/* ORBIT BUBBLES */
.chat{
  position:absolute;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  box-shadow:0 10px 20px rgba(0,0,0,0.3);
  animation:float 4s infinite ease-in-out;
  white-space:nowrap;
}

.chat.me{
  background:var(--wa);
  color:#fff;
}

.chat.you{
  background:#fff;
  color:#000;
}

/* positions */
.c1{top:20%;left:15%;}
.c2{top:25%;right:15%;}
.c3{bottom:25%;left:10%;}
.c4{bottom:20%;right:12%;}
.c5{top:50%;left:5%;}

/* floating */
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

/* RESPONSIVE */
@media(max-width:768px){
  .center-box h1{
    font-size:34px;
  }
  .chat{
    display:none;
  }
}


/* HERO */
.wax-hero{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 20px;
  position:relative;
  overflow:hidden;
}

/* background glow */
.wax-hero::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:rgba(37,211,102,0.08);
  border-radius:50%;
  top:-150px;
  left:-150px;
}

.wax-hero::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:rgba(37,211,102,0.06);
  border-radius:50%;
  bottom:-150px;
  right:-150px;
}

/* container */
.wax-container{
  max-width:1200px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* LEFT */
.wax-left h1{
  font-size:48px;
  color:var(--dark);
  line-height:1.2;
}

.wax-left h1 span{
  color:var(--theme-color);
}

.wax-left p{
  margin-top:15px;
  color:var(--text);
  text-align: justify;
  line-height:1.7;
  max-width:500px;
}

/* badge */
.wax-badge{
  display:inline-block;
  padding:6px 14px;
  background:rgba(37,211,102,0.12);
  color:var(--theme-color);
  border-radius:30px;
  font-size:13px;
  margin-bottom:15px;
  font-weight:600;
}

/* buttons */
.wax-btns{
  margin-top:25px;
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.wax-btn{
  padding:12px 22px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.wax-primary{
  background:var(--theme-color);
  color:#fff;
}

.wax-outline{
  border:2px solid var(--theme-color);
  color:var(--theme-color);
  background:#fff;
}

/* RIGHT VISUAL */
.wax-right{
  position:relative;
}

/* phone mockup */
.wax-phone{
  width:320px;
  height:600px;
  background:#111;
  border-radius:40px;
  margin:auto;
  padding:18px;
  box-shadow:0 30px 60px rgba(0,0,0,0.2);
  position:relative;
}

/* screen */
.wax-screen{
  width:100%;
  height:100%;
  background:#eafaf1;
  border-radius:30px;
  padding:15px;
  overflow:hidden;
}

/* chat bubbles */
.wax-chat{
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:10px;
  font-size:13px;
  box-shadow:0 5px 10px rgba(0,0,0,0.05);
}

.wax-chat.me{
  background:var(--theme-color);
  color:#fff;
  margin-left:auto;
  width:80%;
}

.wax-chat.you{
  width:85%;
}

/* floating stats */
.wax-stat{
  position:absolute;
  background:#fff;
  padding:12px 14px;
  border-radius:14px;
  box-shadow:0 15px 30px rgba(0,0,0,0.1);
  display:flex;
  align-items:center;
  gap:10px;
  animation:float 4s infinite ease-in-out;
}

.wax-stat i{
  color:var(--theme-color);
  font-size:18px;
}

.wax-stat.one{top:40px; left:-30px;}
.wax-stat.two{bottom:60px; right:-40px;}
.wax-stat.three{top:50%; right:-60px;}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

/* RESPONSIVE */
@media(max-width:900px){
  .wax-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .wax-left p{
    margin:auto;
  }

  .wax-phone{
    width:280px;
    height:520px;
  }

  .wax-stat{
    display:none;
  }
}


/* SECTION */
.srv-section{
  padding:90px 20px;
}

/* HEADER */
.srv-head{
  text-align:center;
  margin-bottom:50px;
}

.srv-head h2{
  font-size:40px;
  color:var(--dark);
}

.srv-head h2 span{
  color:var(--theme);
}

.srv-head p{
  max-width:600px;
  margin:10px auto;
  color:var(--text);
  line-height:1.6;
}

/* GRID */
.srv-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

/* CARD */
.srv-card{
  background:var(--white);
  padding:30px 25px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  border:1px solid #e6e6e6;
  transition:0.4s;
}

/* glowing shape */
.srv-card::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  background:rgba(37,211,102,0.08);
  border-radius:50%;
  top:-60px;
  right:-60px;
  transition:0.5s;
}

.srv-card:hover::before{
  transform:scale(1.5);
}

.srv-card:hover{
  transform:translateY(-10px);
  border-color:var(--theme-color);
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

/* ICON */
.srv-icon{
  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--theme-color),#128C7E);
  color:#fff;
  border-radius:14px;
  font-size:20px;
  margin-bottom:15px;
  box-shadow:0 10px 25px rgba(37,211,102,0.3);
}

/* TITLE */
.srv-card h3{
  font-size:18px;
  color:var(--dark);
  margin-bottom:8px;
}

/* TEXT */
.srv-card p{
  font-size:14px;
  color:var(--text);
  line-height:1.6;
}

/* BUTTON */
.srv-card a{
  display:inline-block;
  margin-top:15px;
  font-size:14px;
  color:var(--theme);
  font-weight:600;
  text-decoration:none;
}

/* RESPONSIVE */
@media(max-width:768px){
  .srv-head h2{
    font-size:28px;
  }
}

/* ================= WHY CHOOSE ================= */
.wcu-sec{
  padding:20px 20px;
}

.wcu-container{
  max-width:1100px;
  margin:auto;
}

.wcu-head{
  text-align:center;
  margin-bottom:50px;
}

.wcu-head h2{
  font-size:38px;
  color:var(--dark);
}

.wcu-head span{
  color:var(--theme);
}

.wcu-head p{
  color:var(--text);
  max-width:600px;
  margin:auto;
  margin-top:10px;
}

/* GRID */
.wcu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

/* CARD */
.wcu-card{
  background:var(--white);
  padding:30px 25px;
  border-radius:18px;
  text-align:center;
  border:1px solid #e6e6e6;
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

/* glow effect */
.wcu-card::before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:rgba(37,211,102,0.1);
  border-radius:50%;
  top:-40px;
  right:-40px;
  transition:0.5s;
}

.wcu-card:hover::before{
  transform:scale(1.5);
}

.wcu-card:hover{
  transform:translateY(-12px);
  box-shadow:0 25px 50px rgba(0,0,0,0.1);
}

/* ICON */
.wcu-card i{
  font-size:24px;
  color:var(--theme);
  margin-bottom:12px;
}

/* TEXT */
.wcu-card h4{
  font-size:18px;
  color:var(--dark);
  margin-bottom:6px;
}

.wcu-card p{
  font-size:14px;
  color:var(--text);
  line-height:1.6;
}

/* ================= INDUSTRIES ================= */
.ind-sec{
  padding: 20px;
  background:#fff;
}

.ind-container{
  /* max-width:1100px; */
  margin:auto;
}

.ind-head{
  text-align:center;
  margin-bottom:50px;
}

.ind-head h2{
  font-size:38px;
  color:var(--dark);
}

.ind-head span{
  color:var(--theme);
}

.ind-head p{
  color:var(--text);
  max-width:600px;
  margin:auto;
  margin-top:10px;
}

/* GRID */
.ind-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}


/* ICON */
.ind-card i{
  color:var(--theme);
  font-size:16px;
}



/* RESPONSIVE */
@media(max-width:768px){
  .wcu-head h2,
  .ind-head h2{
    font-size:28px;
  }
  .ind-card{
    display: block;
  }
}


/* SECTION */
.benx-sec{
  padding:100px 20px;
}

/* HEADER */
.benx-head{
  text-align:center;
  margin-bottom:60px;
}

.benx-head h2{
  font-size:38px;
  color:var(--dark);
}

.benx-head span{
  color:var(--theme);
}

.benx-head p{
  max-width:600px;
  margin:10px auto;
  color:var(--text);
}

/* GRID */
.benx-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

/* CARD */
.benx-card{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:25px;
  position:relative;
  overflow:hidden;
  transition:0.4s;
  border:1px solid rgba(255,255,255,0.4);
}

/* glowing border */
.benx-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(120deg, transparent, var(--theme), transparent);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition:0.4s;
}

.benx-card:hover::before{
  opacity:1;
}

.benx-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 25px 50px rgba(0,0,0,0.1);
}

/* ICON */
.benx-icon{
  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#25D366,#16a34a);
  color:#fff;
  font-size:20px;
  margin-bottom:15px;
  box-shadow:0 10px 25px rgba(37,211,102,0.3);
}

/* TITLE */
.benx-card h4{
  font-size:16px;
  color:var(--dark);
  margin-bottom:8px;
}

/* TEXT */
.benx-card p{
  font-size:14px;
  color:var(--text);
  line-height:1.6;
}

/* FLOAT DOT */
.benx-card::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background:var(--theme);
  border-radius:50%;
  top:15px;
  right:15px;
  box-shadow:0 0 12px var(--theme);
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.5); opacity:0.5;}
  100%{transform:scale(1); opacity:1;}
}

/* RESPONSIVE */
@media(max-width:768px){
  .benx-head h2{
    font-size:28px;
  }
}
/* ================= CTA SECTION ================= */
.ctx-section{
  padding:20px 20px;
}

.ctx-box{
  max-width:1100px;
  margin:auto;
  background:linear-gradient(135deg,#25D366,#128C7E);
  border-radius:25px;
  padding:60px 40px;
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* floating shapes */
.ctx-box::before,
.ctx-box::after{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  background:rgba(255,255,255,0.1);
  border-radius:50%;
}

.ctx-box::before{
  top:-60px;
  left:-60px;
}

.ctx-box::after{
  bottom:-60px;
  right:-60px;
}

/* text */
.ctx-box h2{
  font-size:36px;
  margin-bottom:15px;
}

.ctx-box p{
  max-width:600px;
  margin:auto;
  text-align: left;
  line-height:1.7;
  opacity:0.95;
}

/* button */
.ctx-btn{
  display:inline-block;
  margin-top:25px;
  padding:14px 28px;
  background:#fff;
  color:#25D366;
  font-weight:600;
  border-radius:12px;
  text-decoration:none;
  transition:0.3s;
}

.ctx-btn:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 25px rgba(0,0,0,0.2);
}

/* ================= FAQ SECTION ================= */
.fqx-section{
  padding:20px 20px;
}

.fqx-head{
  text-align:center;
  margin-bottom:50px;
}

.fqx-head h2{
  font-size:36px;
  color:var(--dark);
}

.fqx-head span{
  color:var(--theme);
}

/* GRID */
.fqx-grid{
  max-width:1000px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

/* FAQ CARD */
.fqx-card{
  background:#fff;
  border-radius:16px;
  padding:20px;
  border:1px solid #e6e6e6;
  transition:0.3s;
  cursor:pointer;
}

.fqx-card:hover{
  transform:translateY(-5px);
  border-color:var(--theme);
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* QUESTION */
.fqx-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:600;
  color:var(--dark);
}

/* ANSWER */
.fqx-a{
  margin-top:10px;
  font-size:14px;
  color:var(--text);
  line-height:1.6;
  display:none;
}

/* ICON */
.fqx-icon{
  color:var(--theme);
  transition:0.3s;
}

/* ACTIVE */
.fqx-card.active .fqx-a{
  display:block;
}

.fqx-card.active .fqx-icon{
  transform:rotate(180deg);
}

/* RESPONSIVE */
@media(max-width:768px){
  .fqx-grid{
    grid-template-columns:1fr;
  }
}

/* SECTION */
.fea-section{
  padding:10px 20px;
}

/* TITLE */
.fea-head{
  text-align:center;
  margin-bottom:60px;
}

.fea-head h2{
  font-size:40px;
  color:var(--dark);
}

.fea-head h2 span{
  color:var(--theme);
}

.fea-head p{
  max-width:650px;
  margin:10px auto;
  color:var(--text);
}

/* GRID */
.fea-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
}

/* CARD */
.fea-card{
  background:#fff;
  padding:25px;
  border-radius:18px;
  border:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  gap:15px;
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

/* side accent bar */
.fea-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:var(--theme);
  transform:scaleY(0);
  transition:0.4s;
}

.fea-card:hover::before{
  transform:scaleY(1);
}

.fea-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* ICON */
.fea-icon{
  min-width:50px;
  height:50px;
  background:linear-gradient(135deg,var(--theme),#128C7E);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:18px;
  box-shadow:0 10px 20px rgba(37,211,102,0.25);
}

/* TEXT */
.fea-text h4{
  font-size:16px;
  color:var(--dark);
  margin-bottom:5px;
}

.fea-text p{
  font-size:14px;
  color:var(--text);
  line-height:1.6;
}


/* SECTION */
.prc-section{
  padding:20px 20px;
  text-align:center;
}

/* TITLE */
.prc-title h2{
  font-size:40px;
  color:var(--dark);
}

.prc-title h2 span{
  color:var(--theme);
}

.prc-title p{
  max-width:650px;
  margin:10px auto 60px;
  color:var(--text);
  line-height:1.6;
}

/* GRID */
.prc-grid{
  /* max-width:1100px; */
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}

/* CARD */
.prc-card{
  background:#fff;
  padding:25px 20px;
  border-radius:18px;
  position:relative;
  border:1px solid #e6e6e6;
  transition:0.4s;
  overflow:hidden;
}

/* glow effect */
.prc-card::before{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  background:rgba(37,211,102,0.08);
  border-radius:50%;
  top:-50px;
  right:-50px;
  transition:0.4s;
}

.prc-card:hover{
  transform:translateY(-10px);
  border-color:var(--theme);
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

.prc-card:hover::before{
  transform:scale(1.4);
}

/* STEP NUMBER */
.prc-num{
  width:45px;
  height:45px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--theme),#128C7E);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  margin:auto;
  margin-bottom:15px;
  box-shadow:0 10px 25px rgba(37,211,102,0.3);
}

/* ICON */
.prc-icon{
  font-size:22px;
  color:var(--theme);
  margin-bottom:10px;
}

/* TEXT */
.prc-card h3{
  font-size:18px;
  color:var(--dark);
  margin-bottom:8px;
}

.prc-card p{
  font-size:14px;
  color:var(--text);
  line-height:1.6;
}


/* HERO */
.crm-hero{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px 20px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0F172A,#1E293B);
}

/* animated gradient blur */
.crm-hero::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,#3B82F6,transparent);
  top:-150px;
  left:-150px;
  opacity:0.3;
  animation:move 8s infinite alternate;
}

.crm-hero::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:radial-gradient(circle,#22c55e,transparent);
  bottom:-150px;
  right:-150px;
  opacity:0.2;
  animation:move 10s infinite alternate;
}

@keyframes move{
  0%{transform:translate(0,0);}
  100%{transform:translate(50px,50px);}
}

/* CONTAINER */
.crm-container{
  max-width:1200px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* LEFT */
.crm-left{
  color:#fff;
}

.crm-badge{
  display:inline-block;
  padding:6px 14px;
  background:rgba(59,130,246,0.2);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:30px;
  font-size:13px;
  margin-bottom:15px;
}

.crm-left h1{
  font-size:48px;
  line-height:1.2;
}

.crm-left h1 span{
  color:#3B82F6;
}

.crm-left p{
  margin-top:18px;
  color:#cbd5e1;
  line-height:1.7;
  max-width:500px;
}

/* highlight line */
.crm-highlight{
  margin-top:20px;
  font-weight:600;
  color:#22c55e;
}

/* buttons */
.crm-btns{
  margin-top:30px;
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.crm-btn{
  padding:12px 24px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.crm-primary{
  background:#3B82F6;
  color:#fff;
}

.crm-outline{
  border:1px solid #3B82F6;
  color:#3B82F6;
}

/* RIGHT DASHBOARD UI */
.crm-right{
  position:relative;
}

/* dashboard card */
.crm-dashboard{
  background:#fff;
  border-radius:20px;
  padding:20px;
  box-shadow:0 25px 50px rgba(0,0,0,0.25);
}

/* header */
.crm-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
}

.crm-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ef4444;
  margin-right:5px;
}

.crm-bars{
  display:flex;
}

/* lead list */
.crm-lead{
  background:#f8fafc;
  padding:12px;
  border-radius:10px;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.crm-lead span{
  font-size:12px;
  color:var(--text);
}

.crm-tag{
  background:#22c55e;
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font-size:11px;
}

/* floating stats */
.crm-stat{
  position:absolute;
  background:#fff;
  padding:12px 15px;
  border-radius:12px;
  box-shadow:0 15px 30px rgba(0,0,0,0.15);
  font-size:13px;
}

.crm-stat.one{top:-20px; left:-20px;}
.crm-stat.two{bottom:-20px; right:-20px;}

/* RESPONSIVE */
@media(max-width:900px){
  .crm-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .crm-left p{
    margin:auto;
  }

  .crm-stat{
    display:none;
  }
}



/* SECTION */
.crm-abt{
  padding:20px 20px;
}

/* WRAP */
.crm-abt-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

/* LEFT IMAGE */
.crm-abt-left{
  position:relative;
}

/* main image */
.crm-img{
  width:100%;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(0,0,0,0.15);
}

.crm-img img{
  width:100%;
  display:block;
}

/* floating mini cards */
.crm-float{
  position:absolute;
  background:#fff;
  padding:12px 15px;
  border-radius:12px;
  box-shadow:0 15px 30px rgba(0,0,0,0.15);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}

.crm-float i{
  color:var(--accent);
}

.crm-float.one{
  top:-20px;
  left:-20px;
}

.crm-float.two{
  bottom:-20px;
  right:-20px;
}

.crm-float.three{
  top:40%;
  right:-30px;
}

/* RIGHT CONTENT */
.crm-abt-right h2{
  font-size:38px;
  color:var(--primary);
}

.crm-abt-right h2 span{
  color:var(--accent);
}

.crm-abt-right p{
  margin-top:15px;
  color:var(--text);
  line-height:1.7;
}

/* FEATURES */
.crm-features{
  margin-top:25px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.crm-feature{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.crm-feature i{
  color:var(--green);
  margin-top:4px;
}

/* CTA BOX */
.crm-highlight{
  margin-top:25px;
  padding:18px;
  background:rgba(59,130,246,0.08);
  border-left:4px solid var(--accent);
  border-radius:10px;
  font-weight:600;
}

/* RESPONSIVE */
@media(max-width:900px){
  .crm-abt-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .crm-features{
    grid-template-columns:1fr;
  }



  .crm-float{
    display:none;
  }
}




/* SECTION */
.crmx-services{
  padding:10px 20px;
  /* background:#0F172A; */
  /* color:#fff; */
}

/* HEADER */
.crm-head{
  text-align:center;
  margin-bottom:60px;
}

.crm-head h2{
  font-size:40px;

}

.crm-head span{
  color:#3b82f6;
}

.crm-head p{
  color:#cbd5e1;
  margin-top:10px;
}

/* SPLIT */
.crm-split{
  display:flex;
  height:420px;
  overflow:hidden;
  border-radius:20px;
  max-width:1200px;
  margin:auto;
}

/* PANEL */
.crm-panel{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.6s ease;
  overflow:hidden;
}

/* BACKGROUND IMAGES */
.crm-panel:nth-child(1){
  background:url('https://images.unsplash.com/photo-1560518883-ce09059eeffa') center/cover;
}

.crm-panel:nth-child(2){
  background:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f') center/cover;
}

.crm-panel:nth-child(3){
  background:url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d') center/cover;
}

.crm-panel:nth-child(4){
  background:url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d') center/cover;
}

/* DARK OVERLAY */
.crm-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.75);
  transition:0.4s;
}

.crm-panel:hover::before{
  background:rgba(15,23,42,0.5);
}

/* EXPAND */
.crm-panel:hover{
  flex:2;
}

/* CONTENT */
.crm-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:20px;
  transition:0.4s;
}

.crm-panel:hover .crm-content{
  transform:scale(1.1);
}

/* ICON */
.crm-content i{
  font-size:34px;
  margin-bottom:12px;
  color:#3b82f6;
}

/* TITLE */
.crm-content h3{
  margin-bottom:8px;
      color:#cbd5e1 !important;

}

/* TEXT */
.crm-content p{
  font-size:14px;
  color:#e2e8f0;
  max-width:230px;
  margin:auto;
}

/* MOBILE */
@media(max-width:900px){
  .crm-split{
    flex-direction:column;
    height:auto;
    gap:10px;
  }

  .crm-panel{
    height:220px;
  }

  .crm-panel:hover{
    flex:unset;
  }
}

/* SECTION */
.crmfeat-sec{
  padding:20px 20px;
}

/* TITLE */
.crmfeat-head{
  text-align:center;
  margin-bottom:60px;
}

.crmfeat-head h2{
  font-size:38px;
  color:#0F2239;
}

.crmfeat-head span{
  color:#00008b;
}

.crmfeat-head p{
  max-width:650px;
  margin:10px auto;
  color:#4D5765;
}

/* LAYOUT */
.crmfeat-wrap{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

/* LEFT FEATURES */
.crmfeat-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ITEM */
.crmfeat-item{
  display:flex;
  align-items:center;
  gap:15px;
  background:#fff;
  padding:18px;
  border-radius:14px;
  border:1px solid #e6e6e6;
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

/* hover glow line */
.crmfeat-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:#00008b;
  transform:scaleY(0);
  transition:0.4s;
}

.crmfeat-item:hover::before{
  transform:scaleY(1);
}

.crmfeat-item:hover{
  transform:translateX(8px);
  box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

/* ICON */
.crmfeat-icon{
  width:45px;
  height:45px;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:16px;
}

/* TEXT */
.crmfeat-item h4{
  color:#0F2239;
  font-size:15px;
}

/* RIGHT PANEL */
.crmfeat-right{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .crmfeat-wrap{
    grid-template-columns:1fr;
  }
}

/* SECTION */
.crmsec{
  padding:20px 20px;
}

/* TITLE */
.crmsec-head{
  text-align:center;
  margin-bottom:60px;
}

.crmsec-head h2{
  font-size:40px;
  color:#0F2239;
}

.crmsec-head span{
  color:#00008b;
}

.crmsec-head p{
  max-width:650px;
  margin:10px auto;
  color:#4D5765;
}

/* GRID - 5 IN ONE ROW */
.crmsec-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
}

/* CARD */
.crmsec-card{
  background:#fff;
  padding:22px;
  border-radius:18px;
  border:1px solid #e6e6e6;
  position:relative;
  transition:0.4s;
  overflow:hidden;
  text-align:center;
}

/* hover */
.crmsec-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,139,0.10);
  border-color:#00008b;
}

/* NUMBER BADGE */
.crmsec-card::before{
  content:attr(data-step);
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
}

/* ICON */
.crmsec-icon{
  width:55px;
  height:55px;
  margin:0 auto 12px;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  font-size:18px;
  box-shadow:0 10px 25px rgba(0,0,139,0.2);
}

/* TEXT */
.crmsec-card h3{
  font-size:16px;
  color:#0F2239;
  margin-bottom:8px;
}

.crmsec-card p{
  font-size:13px;
  color:#4D5765;
  line-height:1.5;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .crmsec-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media(max-width:768px){
  .crmsec-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:500px){
  .crmsec-grid{
    grid-template-columns:1fr;
  }
}


/* ================= BENEFITS ================= */
.ben-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.ben-card{
  background:#fff;
  padding:25px;
  border-radius:18px;
  border:1px solid #e6e6e6;
  position:relative;
  transition:0.4s;
  overflow:hidden;
}

.ben-card:hover{
  transform:translateY(-10px);
  border-color:#00008b;
  box-shadow:0 20px 35px rgba(0,0,139,0.1);
}

/* ICON */
.ben-icon{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  margin-bottom:12px;
}

/* TEXT */
.ben-card h4{
  color:#0F2239;
  margin-bottom:6px;
}

.ben-card p{
  font-size:14px;
  color:#4D5765;
}

/* decorative glow */
.ben-card::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:rgba(0,0,139,0.06);
  border-radius:50%;
  bottom:-40px;
  right:-40px;
}

/* ================= WHY CHOOSE ================= */
.why-wrap{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

/* LEFT BOX */
.why-left{
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  padding:40px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

.why-left::before,
.why-left::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  background:rgba(255,255,255,0.1);
  border-radius:50%;
}

.why-left::before{top:-40px;left:-40px;}
.why-left::after{bottom:-60px;right:-60px;}

.why-left h3{
  font-size:26px;
  margin-bottom:10px;
}

.why-left p{
  line-height:1.6;
  opacity:0.9;
}

/* RIGHT LIST */
.why-right{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.why-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  padding:18px;
  border-radius:14px;
  border:1px solid #e6e6e6;
  transition:0.4s;
}

.why-item:hover{
  transform:translateX(8px);
  border-color:#00008b;
  box-shadow:0 15px 30px rgba(0,0,139,0.1);
}

/* ICON */
.why-icon{
  min-width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* TEXT */
.why-item h4{
  color:#0F2239;
  margin-bottom:4px;
}

.why-item p{
  font-size:14px;
  color:#4D5765;
}

/* RESPONSIVE */
@media(max-width:900px){
  .why-wrap{
    grid-template-columns:1fr;
  }
}
/* COMMON TITLE */
.sec-title{
  text-align:center;
  margin-bottom:50px;
}

.sec-title h2{
  font-size:38px;
  color:#0F2239;
}

.sec-title span{
  color:#00008b;
}

.sec-title p{
  max-width:650px;
  margin:10px auto;
  color:#4D5765;
}

/* SECTION */
.section{
  padding:30px 20px;
}



.ind-card{
  background:#fff;
  padding:25px;
  border-radius:18px;
  border:1px solid #e6e6e6;
  /* text-align:center; */
  position:relative;
  overflow:hidden;
  transition:0.4s;
}

.ind-card:hover{
  transform:translateY(-10px);
  border-color:#00008b;
  box-shadow:0 20px 40px rgba(0,0,139,0.1);
}
.ind-card:hover i{
  color:#ff9800 ;

}

/* .ind-icon{
  width:55px;
  height:55px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  border-radius:14px;
  font-size:18px;
  margin-bottom:12px;
} */

.ind-card h4{
  color:#0F2239;
  margin-bottom:6px;
}

.ind-card p{
  font-size:14px;
  color:#4D5765;
}

/* glow */
.ind-card::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:rgba(0,0,139,0.06);
  border-radius:50%;
  bottom:-40px;
  right:-40px;
}

/* ================= CTA ================= */
.cta-box{
  max-width:900px;
  margin:auto;
  background:linear-gradient(135deg,#00008b,#2563eb);
  color:#fff;
  padding:50px;
  border-radius:22px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* floating circles */
.cta-box::before,
.cta-box::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  background:rgba(255,255,255,0.1);
  border-radius:50%;
}

.cta-box::before{top:-60px;left:-60px;}
.cta-box::after{bottom:-60px;right:-60px;}

.cta-box h2{
  font-size:30px;
  margin-bottom:10px;
}

.cta-box p{
  opacity:0.9;
  margin-bottom:25px;
  line-height:1.6;
}

.cta-btn{
  display:inline-block;
  padding:12px 24px;
  background:#fff;
  color:#00008b;
  font-weight:600;
  border-radius:10px;
  text-decoration:none;
  transition:0.3s;
}

.cta-btn:hover{
  transform:scale(1.05);
}
.crmfaq7-section{
  padding:20px 20px;
  background:#F3F7FB;
  font-family:Segoe UI;
}

.crmfaq7-head{
  text-align:center;
  margin-bottom:40px;
}

.crmfaq7-head h2{
  font-size:38px;
  color:#0F2239;
}

.crmfaq7-head h2 span{
  color:#00008b;
}

/* WRAPPER */
.crmfaq7-wrap{
  max-width:900px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ITEM */
.crmfaq7-item{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:14px;
  overflow:hidden;
  transition:0.4s;
}

/* QUESTION */
.crmfaq7-q{
  padding:18px 20px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#0F2239;
  transition:0.3s;
}

.crmfaq7-q:hover{
  background:#f9fbff;
}

/* ANSWER */
.crmfaq7-a{
  display:none;
  padding:0 20px 18px;
  font-size:14px;
  color:#4D5765;
  line-height:1.6;
}

/* ACTIVE */
.crmfaq7-item.active .crmfaq7-a{
  display:block;
}

.crmfaq7-item.active .crmfaq7-q i{
  transform:rotate(180deg);
  transition:0.3s;
}

/* RESPONSIVE */
@media(max-width:768px){
  .sec-title h2{
    font-size:28px;
  }

  .cta-box{
    padding:30px;
  }
}