/*
Theme Name: tecnosurge
Theme URI: 
Author: Axecorp Technologies
Description: 'A Custom Built Wordpress Theme'npm
Version: 1.0.0
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
.debug {
  position: fixed;
  top: 0px;
  left: 0px;
  color: crimson;
  margin: 0;
  padding: 3px;
  font-size: 12px;
  line-height: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 99999;
}
.debug .debug-currentBreakpoint::after {
  content: "Breakpoint: MAX";
}
.debug .debug-breakpointRange::after {
  content: "Range: 1500px - Unlimited";
}

@media (max-width: 0px) {
  .debug .debug-currentBreakpoint::after {
    content: "Breakpoint: MAX";
  }
  .debug .debug-breakpointRange::after {
    content: "Range: 1500px - 0px";
  }
}

@media (max-width: 1499px) {
  .debug .debug-currentBreakpoint::after {
    content: "Breakpoint: XL";
  }
  .debug .debug-breakpointRange::after {
    content: "Range: 1250px - 1499px";
  }
}

@media (max-width: 1249px) {
  .debug .debug-currentBreakpoint::after {
    content: "Breakpoint: LG";
  }
  .debug .debug-breakpointRange::after {
    content: "Range: 992px - 1249px";
  }
}

@media (max-width: 991px) {
  .debug .debug-currentBreakpoint::after {
    content: "Breakpoint: MD";
  }
  .debug .debug-breakpointRange::after {
    content: "Range: 768px - 991px";
  }
}

@media (max-width: 767px) {
  .debug .debug-currentBreakpoint::after {
    content: "Breakpoint: SM";
  }
  .debug .debug-breakpointRange::after {
    content: "Range: 576px - 767px";
  }
}

@media (max-width: 575px) {
  .debug .debug-currentBreakpoint::after {
    content: "Breakpoint: XS";
  }
  .debug .debug-breakpointRange::after {
    content: "Range: 0px - 575px";
  }
}

.adminbar .debug {
  top: 32px;
}
@media (max-width: 991px) {
  .adminbar .debug {
    top: 0px;
    left: 120px;
  }
}

@media (max-width: 991px) {
  #wpadminbar {
    display: none;
  }
  html#no {
    margin-top: 0 !important;
  }
}

* {
  outline: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

sup,
sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub {
  top: 0.4em;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}
/* 
body {
  position: relative;
} */

table.xdebug-error.xe-warning {
  display: none;
}

/* /new css  */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Arimo", Arial, sans-serif;
}

/* ================= Header ================= */
.read-more {
    color: #fff;
}
.view-more-btn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color:#a100ff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}
.view-more-btn:hover {
    background-color: #a100ff;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 20px;
  background: transparent;
  transition: background 0.3s ease;
  z-index: 999;
}

.header.scrolled {
  background: #a100ff;
}

.header.scrolled img {
  filter: brightness(0); /* Black color on scroll */
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
}

.header__container {
  max-width: 1700px;
  margin: 0 auto;
  /* padding: 14px 20px; */
  display: flex;
  align-items: center !important;
  justify-content: space-between;
}


@media (max-width: 1024px) {
   .header__right {
    margin-top: 0px;
}
}

.header__logo-img {
/*   height: auto; */
	height: 80px;
  display: block;
}

/* Right cluster (menu + translate + burger) */
.header__right {
  display: flex;
  align-items: center;
  gap: 90px; /* menu <-> translate gap fixed */
}

/* ========== Nav (desktop & mobile share) ========== */
.nav__list {
  display: flex;
  align-items: center;
  gap: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list--mobile {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.nav__link {
  display: inline-block;
  text-decoration: none;
  color: white;
  font-size: 18px;
  font-weight: 600; /* bold */
  letter-spacing: 0.3px;
  padding: 6px 2px;
  transition: color 0.2s ease, opacity 0.2s ease;
  text-transform: uppercase;
}
.nav__link:hover {
  color: #a100ff;
}

/* Translate btn */
.translate-btn {
  background: none;
  border: none;
  color: var(--purple);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
}

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  width: 40px;
  height: 36px;
  border: 1px solid var(--edge);
  background: #0d0d0d;
  border-radius: 3px;
  padding: 7px 8px;
  cursor: pointer;
}
.hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: #cfcfcf;
  margin: 4px 0;
}

/* ================= Drawer (mobile) ================= */
.drawer {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}
.drawer--open {
  display: block;
}
.drawer__panel {
  position: absolute;

  right: 0;
  top: 0;
  bottom: 0;
  width: 88%;
  max-width: 360px;
  background: #0b0b0b;
  border-left: 1px solid var(--edge);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.22s ease-out;
}
@keyframes slideIn {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--edge);
}
.drawer__logo-img {
  height: 34px;
}
.drawer__close {
  background: none;
  border: none;
  color: #bbb;
  font-size: 22px;
  cursor: pointer;
}
.nav--mobile .nav__list .nav__item {
  width: 100%;
  border-bottom: 1px solid var(--edge);
}
.nav--mobile .nav__link {
  width: 100%;
  padding: 16px 18px;
}

/* ////////////////////// heroo section   /////////////////////////////// */
 .expand-text {
    text-align: right;
    padding-top: 20px;
    padding-right: 7px;
	 color: #fff;
    text-decoration: underline;
	 font-size:17px;
	 font-family: Arial, sans-serif;
}
.get_consultant {
    padding-top: 25px;
}
.get_consultant a.link {
    background: linear-gradient(90deg, #7500C0 100%, #A100FF 50%);
    color: #fff;
    border: none;
    padding: 15px 35px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
    text-decoration: none;
    border-radius: 50px;
    display: inline-block;
	 transition: all 0.3s ease-in-out;
}
.get_consultant a.link:hover{
    background: linear-gradient(90deg, #681e97 100%, #A100FF 50%);
}
.get_consultant a.link:hover svg {
    transform: translateX(5px);
    transition: transform 0.3s ease-in-out;
}


.banner {
/*   padding: 0 20px; */
/*   width: 100%; */
  background-color: black;
  position: relative;
}

/* section.banner:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-image: url('http://192.168.100.133/wp-content/uploads/2025/08/Group-1.png');
  opacity: 1;
  top: 0;
  background-position: bottom center;
  background-size: cover;
} */

/* section.banner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-image: url("photos/Group\ 1\ \(3\).png");
  top: 0;
  background-position: bottom center;
  background-size: cover;
} */

.banner__container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 400px 0px 280px 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  position: relative;
  z-index: 55;
}

/* ====== Top row (heading + text + button) ====== */
.banner__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.banner__subtitle {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 97px;
  margin: 0;
  line-height: 1.1;
/*   white-space: nowrap; */
}

.banner__text {
  max-width: 42%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 20px; */
}

 
.banner__line {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: load 2s linear forwards; /* Animation to grow width */
}

@keyframes load {
  0% {
    width: 0; /* Start at 0% width */
  }
  100% {
    width: 250px; /* End at full width (250px as per your original CSS) */
  }
}
.banner__para {
  font-size: 17px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  color: #fff;
}

/* Button (add styling) */
.banner__btn {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #a100ff;
  padding: 12px 22px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.1s ease;
}
.banner__btn:hover {
  background: #7c00cc;
}
.banner__btn:active {
  transform: translateY(1px);
}

/* ====== Big heading ====== */
.banner__title {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 150px;
  margin: 0;
  line-height: 1.05;
}
/* /////////////////////////// Slider //////////////////////////////// */

/* Section background */


/* ///////////////////////////////   Case Studies  ////////////////////////////////////// */

/* .maincase {
  width: 100%;
  padding: 150px 20px 150px 20px;
  background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%), #000000; 
  background-repeat: no-repeat;
} */
.maincase {
/*   background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%), #000000; */
   padding: 150px 20px 150px 20px;
  width: 100%;
  background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background-color: #000000; /* Fallback */
}

.caseiner {
  margin: auto;
  max-width: 1700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.casestdh1 {
  color: white;
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 100px;
  text-transform: uppercase;
  text-align: center;
}
/* 
.banner_linestd {
  display: block;
  width: 250px;
  height: 5px;
  background: #a100ff;
  margin-bottom: 10px;
} */

.banner_linestd {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loads 2s linear forwards; /* Animation to grow width */
}
@keyframes loads {
  0% {
    width: 0;
  }
  100% {
    width: 250px;
  }
}
 @keyframes load {
  0% {
    width: 0;
  }
  100% {
    width: 250px;
  }
}

.case2nd {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap; /* ✅ wrap allow */
  justify-content: center;
  gap: 40px; /* spacing between cards */
}

.cardcasestd {
  flex: 1 1 400px; /* ✅ flexible width */
  max-width: 500px;
  background: black;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  font-family: Arial, sans-serif;
}


@media (max-width: 880px) {
 .cardcasestd {
  flex: 1 1 300px; /* ✅ flexible width */
  max-width: 500px;
}

}


@media (hover: none) {
  .card:hover {
    /* Disable hover styles */
    transform: none;
    box-shadow: none;
  }
}


.insights .slider-container,   
.insights .slick-list {
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0%,
    black 0%,
    black 95%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 0%,
    black  95%,
    transparent 100%
  );
}

.cardcasestd img {
  width: 100%;
  border-radius: 15px;
  display: block;
	height: 350px;
    object-fit: cover;
	position:relative;
	z-index:1;
}

.cardcontentcasestd {
    border: 1px solid #903cc0;
    border-top: 0px !important;
    box-shadow: 0 0 12px rgba(196, 110, 247, 0.7);
    padding: 20px;
    border-radius: 0 0 12px 12px;
   
	 background: rgba(255, 255, 255, -0.8);
    backdrop-filter: blur(10px);
    margin-top: -10px;
    padding-top: 40px;
}

.cardcontentcasestd h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
}

.cardcontentcasestd p {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #ccc;
  margin-bottom: 20px;
}

.cardcontentcasestd a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}






.cardcontentcasestd a span{
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #a100ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
	
}


.cardcontentcasestd a :hover, .insights__see-all__btns{
    background-position-x: 0;
    transform: translateX(5px); 
}
  

/* ✅ Responsive tweaks */
@media (max-width: 1500px) {
  .casestdh1 {
    font-size: 50px;
  }

  .maincase {
    padding: 150px 20px 70px 20px;
  }
}

@media (max-width: 1200px) {
  .casestdh1 {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .casestdh1 {
    font-size: 40px;
  }
  .case2nd {
    gap: 20px;
  }
	.get_consultant a.link {
		padding: 15px 25px;
	}
	.header{
		padding: 20px 20px;
	}
}

@media (max-width: 480px) {
  .casestdh1 {
    font-size: 40px;
  }
  .banner_linestd {
    width: 150px;
  }
  .cardcasestd {
    flex: 1 1 100%; /* ✅ full width on mobile */
    max-width: 100%;
  }
}

/* //////////////////////    footer work /////////////////////////// */

/* ===== CORE WRAPPER (black area) ===== */
.footer-wrap {
  width: 100%;
  background: #000;
  display: flex;
  justify-content: center;
}

/* ===== BG BLOCK (image + gradient) ===== */
.footer-bg {
  width: 1700px;
  max-width: 100%;
  position: relative;
  padding-top: 72px;
  padding-bottom: 5px;
  border-radius: 150px 150px 0px 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  isolation: isolate;
}

/* background image */
.footer-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/tecnosurge/wp-content/uploads/2025/08/Group-53.png") center/cover no-repeat; /* replace path */
  z-index: -2;
}

/* purple glow gradient overlay (#A100FF @ 20%) with dark fade */
.footer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(161, 0, 255, 0.2) 0%,
    rgba(161, 0, 255, 0.1) 35%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: -1;
}

/* ===== INNER LAYOUT ===== */
.footer-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 0px; /* side/bottom breathing room */
  box-sizing: border-box;
  gap: 70px; /* title ↔ links = 80px (spec) */
}

/* ===== TITLE ===== */
.footer-title {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 42px; /* spec */
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ===== NAV AREA ===== */
.footer-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px; /* big row ↔ small row spacing */
}

/* top links row */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px; /* 30px gap between items (spec) */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* purple separators between items */
.footer-links li {
  position: relative;
  display: flex;
  align-items: center;
}

/* separator line (not after last) */
.footer-links li:not(:last-child)::after {
  content: "";
  display: block;
  width: 26px; /* separator width */
  height: 3px;
  background: #a100ff;
  border-radius: 2px;
  margin-left: 30px; /* keeps total gap = 30px visually */
}

/* sub links row */
.footer-sub-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-sub-links li {
  position: relative;
  display: flex;
  align-items: center;
}

.footer-sub-links li:not(:last-child)::after {
  content: "";
  width: 26px;
  height: 3px;
  background: #a100ff;
  border-radius: 2px;
  margin-left: 30px;
}

/* links look */
.footer-links a,
.footer-sub-links a {
  /* font-family: Arial, sans-serif; */
  font-size: 21px; /* spec */
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
}

/* ===== COPYRIGHT PILL ===== */
/* distance from links to copyright = 150px (spec) */
.footer-copy {
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 100px;
  background: #a100ff;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  border-radius: 22px 22px 0px 0px;
}

/* ===== RESPONSIVE POLISH ===== */

@media (max-width: 1550px) {
  .footer-bg {
    margin: 0px 20px;
    border-radius: 100px 100px 0px 0px;
  }

  .footer-copy {
    margin-top: 70px;
  }
  .footer-nav {
    gap: 25px;
  }

  .footer-links {
    gap: 15px; /* 30px gap between items (spec) */
  }

  .footer-links a,
  .footer-sub-links a {
    font-size: 18px;
  }
}

@media (max-width: 1280px) {
  .footer-bg {
    border-radius: 65px 65px 0px 0px;
  }

  .footer-copy {
    margin-top: 50px;
  }
}

@media (max-width: 768px) {
  .footer-bg {
    margin: 0px 20px;
    border-radius: 50px 50px 0px 0px;
  }
  .footer-title {
    font-size: 34px;
  }
  .footer-inner {
    gap: 50px;
  }
  .footer-copy {
    font-size: 16px;
    padding: 12px 70px;
  }

  .footer-links li:not(:last-child)::after {
    display: none;
  }
  .footer-sub-links li:not(:last-child)::after {
    display: none;
  }
 .footer-links li{
		border-right: 2px solid #a100ff;
    padding-right: 10px;
	}
	.footer-sub-links li{
		border-right: 2px solid #a100ff;
    padding-right: 10px;
	}
}
@media(max-width:575px){
	.footer-copy {
		 padding: 12px 35px;
	} 
}
@media (max-width: 480px) {
  .footer-title {
    font-size: 28px;
  }
  .footer-links a,
  .footer-sub-links a {
    font-size: 16px;
  }
  .footer-inner {
    gap: 48px;
  }
  .footer-copy {
    font-size: 14px;
    height: 54px;
  }
  .footer-links li:not(:last-child)::after,
  .footer-sub-links li:not(:last-child)::after {
    width: 18px;
    margin-left: 20px;
  }
}

/* ///////////////////// About Us /////////////////////////////// */

.about {
  padding: 0 20px 50px 20px;
  background-color: #000000;
}

.about__wrap {
  position: relative;
  margin: 0 auto;
  max-width: 1622px; /* responsive */
  width: 100%;
/*   min-height: 675px; */
  padding: 250px 20px 80px 20px;

  background-size: cover;
  /* background-position: right center; */
  background-repeat: no-repeat;

  border-radius: 16px;
  overflow: hidden;
}

.about__wrap::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.about__content {
  position: relative; /* above overlay */
  z-index: 1;
  max-width: 720px; /* your 720px spec */
  width: 100%;
  color: #fff;
}

.about__heading {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 50px; /* desktop spec */
  color: #ffffff;
  margin: 0 0 10px 0;
}

/* .about__line {
  display: block;
  width: 380px;
  height: 5px;
  background: #0b0b0b; /* as you set; change to #fff if needed */
/*   margin-bottom: 18px; */
/* } */  
.about__line {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #0b0b0b; /* Solid color for simplicity, or use a gradient */
 margin-bottom: 18px;
  flex-shrink: 0;
  animation: bar 2s linear forwards; /* Animation to grow width */
}


@keyframes bar {
  0% {
    width: 0; /* Start at 0% width */
  }
  100% {
    width: 380px; /* End at full width (250px as per your original CSS) */
  }
}
@keyframes loadss {
  0% {
    width: 0; /* Start at 0% width */
  }
  100% {
    width: 380px; /* End at full width (250px as per your original CSS) */
  }
}

.about__text {
  color: #ffffff;
/*   width: 50%; */
  max-width: 800px;
  font-size: 16px;
  line-height: 25px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 14px 0;
}

.about__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 14px Arial, sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  background: #000000;
  padding: 10px 16px;
  border-radius: 6px;
}
.about__btn::after {
  content: "›";
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #ffffff;
  color: #000;
  border-radius: 4px;
  font-weight: 700;
}

.aboutmob {
  padding: 0px 20px;
  display: none;
  /* margin: 20px 0px; */
  background-color: #000000;
}
.about__textmob {
  color: #ffffff;
  width: 100%;
  font-size: 16px;
  line-height: 25px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 14px 0;
}

.aboutwrapmob {
  padding: 30px;
  width: 100%;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #a100ff;
}

.about__contentmob {
  width: 100%;
}

.mobaboutimg {
  width: 100%;
}

ul.footer-media-links {
    list-style: none;
    display: flex; 
    align-items: center;
    justify-content: space-between;
}
ul.footer-media-links li a img{
	width: 35px;
	height: 35px;
}
li.tex-wraps {
    margin: 0px 20px;
}
/* =========================================================
   Breakpoints media query for all sections 
   ========================================================= */

@media (max-width: 1400px) {
  .about {
    padding-bottom: 70px;
  }

  .about__wrap {
    padding: 280px 20px 70px 20px;
    min-height: 630px;
  }
  .about__heading {
    font-size: 44px;
  }
  .about__line {
    width: 300px;
  }
}

@media (max-width: 1200px) {
  .about__wrap {
    padding: 240px 20px 70px;
    /* min-height: 600px; */
  }
  .about__heading {
    font-size: 40px;
  }
  .about__line {
    width: 260px;
    height: 4px;
  }
  .about__text {
    font-size: 15px;
    line-height: 24px;
    width: 90%;
  }
}

/* <= 992px : tablet */
@media (max-width: 992px) {

.about{
  display: none;
}

  .about__wrap {
    padding: 200px 20px 64px;
    min-height: 560px;
    /* display: none; */
    background-position: center;
  }

  .about__contentmob {
    width: 90%;
  }
  .about__heading {
    font-size: 36px;
  }
  .about__line {
    width: 220px !important;
  }
  .about__text {
    max-width: 520px;
    width: 100%;
  }
  .aboutmob {
    padding: 0px 20px;
    display: block;
  }
  .about__textmob {
    font-size: 18px;
    line-height: 25px;
  }
}
@media(max-width:775px){
	.aboutmob{
		padding: 50px 20px 0px 20px;
	}
}

@media (max-width: 578px) {
	
	ul.footer-media-links{
		    width: 65%;
    margin: 0;
		flex-wrap: wrap;
    gap: 20px;
    padding-left: 0px;
		justify-content:center;
	}
	li.tex-wraps {
    margin: 0px 0px;
}
 .mobaboutimg {
    width: 100%;
}
    .about__textmob {
        font-size: 16px;
        line-height: 25px;
    }
    .aboutwrapmob{
      padding: 20px 20px 0px 20px;
    }
}
@media(max-width:420px){
	ul.footer-media-links{
/* 		width:75%; */
	}
}







a.mailto {
    color: #fff;
}

a.phone {
    color: #fff;
}




.svc {
  background-color: #000000;
}

.svc__wrap {
  max-width: 100%;
  margin: 0 auto;
  margin-top: -15px 0px;
  padding: 0px 0px;
  display: flex;
  align-items: center;
  padding-left: 149px;
  padding-right: 0;
  padding-bottom: 70px;
}

.svc__left {
  width: 45%;
}


.svc__heading {
  margin: 0;
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 100px;
  line-height: normal;

  vertical-align: middle;
  text-transform: uppercase;
}
/* .svc__underline {
  display: block;
  width: 250px;
  height: 5px;
  background: #a100ff;
  margin: 11px 0px;
} */

.svc__underline {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin: 11px 0px;
  flex-shrink: 0;
  animation: load 2s linear forwards; /* Animation to grow width */
}
 
@keyframes load {
  0% {
    width: 0;  
  }
  100% {
    width: 250px; 
  }
}   
.svc__para {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 31.7px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #d7d7d7;
  margin: 0 0 24px 0;
  width: 85%;
}
.svc__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 14px/1 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
}
.svc__cta::after {
  content: "›";
  display: inline-block;
  transform: translateY(-1px);
  background: #a100ff;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  text-align: center;
  line-height: 20px;
  font-weight: 700;
}






/* --------- Responsive svc  section--------- */
@media (max-width: 1550px) {
  .svc__wrap {
    column-gap: 70px;
    padding-left: 40px;
  }
  .svc__heading {
    font-size: 75px ;
  }
}

@media (max-width: 1200px) {
  .svc__left {
    width: 100%;
  }
  .svc__right {
    width: 100%;
  }
  .svc__wrap {
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
gap: 30px;
  }
 .svc__wraps {
  width: 100% !important;
  }

  .svc__heading {
    font-size: 50px;
  }
}
@media (max-width: 992px) {
  .svc__wrap {
    row-gap: 32px;
    padding-left: 24px;
  }

  .svc__right {
    width: 100%;
  }
  .svc__para {
    max-width: 90%;
  }
}
@media(max-width:767px){
  .svc__wrap {
    padding-top: 35px;
  }
  .insights__title{
    font-size: 42px;
  }
  .svc__para{
    font-size: 16px;
    line-height: normal;
  }
}
@media (max-width: 600px) {
  .svc__heading {
    font-size: 42px;
  }
  
  .svc__underline {
    width: 140px;
    height: 4px;
  }
/*   .card {
    flex-basis: 300px;
    height: 420px;
  } */
  .card__title {
    font-size: 18px;
  }
}
@media(max-width:575px){
  .svc__heading {
    font-size: 32px ;
  }
  .insights__see-all{
    font-size: 17px;
  }
  .svc__para{
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 1750px) {
  .banner__container {
    padding: 300px 20px;
    height: 880px;
  }
}
/* responsive banner */
@media (max-width: 1560px) {
  .banner__container {
    padding: 300px 20px;
    height: 880px;
  }
  .banner__subtitle {
    font-size: 75px;
  }
  .banner__title {
    font-size: 100px;
  }
  .banner__text {
    max-width: 40%;
  }
  .banner__para {
    font-size: 16px;
  }
}

@media (max-width: 1200px) {
  .banner__container {
    padding: 240px 20px;
    gap: 20px;
    height: 760px;
  }
  .banner__row {
    gap: 24px;
  }
  .banner__subtitle {
    font-size: 70px;
  }
  .banner__title {
    font-size: 110px;
  }
  .banner__line {
    width: 180px;
    height: 4px;
  }
  .banner__text {
    max-width: 60%;
  }
    .banner__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}

@media (max-width: 992px) {
  .banner__container {
    padding: 200px 20px;
    height: 650px;
    gap: 20px;
  }
  .banner__text {
    max-width: 65%;
  }
  .banner__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .banner__subtitle {
    font-size: 45px;
  }
  .banner__title {
    font-size: 70px;
  }
  .banner__para {
    font-size: 15px;
  }
}

/*  (mobile layout) Banner */
@media (max-width: 768px) {
  .banner{
    min-height: 100%;
  }
  .banner__container {
    padding: 240px 20px 120px 20px; /* mobile friendly */
    height: auto; /* fixed height hatayi */
    min-height: 560px; /* decent min height */
  }

  .banner__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .banner__subtitle {
    font-size: 35px;
    white-space: normal;
  }

  .banner__text {
    max-width: 80%;
    gap: 10px;
  }

  .banner__line {
    width: 170px;
    height: 3px;
    margin-top: 6px;
  }
  .banner__para {
    font-size: 15px;
  }

  .banner__btn {
    padding: 10px 18px;
    font-size: 13px;
  }

  .banner__title {
    font-size: 50px;
    margin-top: 10px;
  }
}

/* extra small phones  Banner*/
@media (max-width: 480px) {
  .banner {
/*     padding: 0 14px; */
  }
  .banner__container {
    padding: 200px 20px 100px 20px;
    min-height: 520px;
  }
  .banner__subtitle {
    font-size: 25px;
  }
  .banner__title {
    font-size: 35px;
  }
  .banner__line {
    width: 120px;
  }
  .banner__para {
    font-size: 14px;
    width: 100%;
  }
	.banner__text {
    max-width: 100%;
    gap: 10px;
  }

	 .insights__see-alls {
        width: 100%;
        font-size: 15px;
    }
}

/* ========== Responsive rules  header ========== */

@media (max-width: 1500px) {
  .nav__link {
    font-size: 16px;
  }
}
@media (max-width: 1200px) {
  .nav__link {
    font-size: 14px;
  }
/*   .nav__list{
    padding-top: 50px;
  } */
  .nav__list {
    gap: 15px;
  }
}

@media (max-width: 1024px) {
  .nav--desktop {
    display: none;
  } /* hide desktop nav */
  .hamburger {
    display: block;
  } /* show burger */
  .header__right {
    gap: 16px;
  } /* tighten spacing on small screens */
}
@media(max-width:575px){
	.header__logo-img {
    height: 100%;
  }
}
@media (max-width: 420px) {
  .header__container {
    /* padding: 12px 16px; */
     padding: 12px 0px;
  }
   
  .translate-btn {
    font-size: 16px;
  }
}

/* slider section  */

.insights {
  padding: 40px 20px 60px 21px;
  width: 1660px;
  max-width: 100%;
  margin: 0 auto;
}
.insights__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 26px;
  align-items: center;
}

.insights__title-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.insights__title {
  font-weight: 700;
  font-style: Bold;
  font-size: 80px;
  line-height: 100px;
  letter-spacing: -4px;
  text-transform: uppercase;
  width: 36%;
  margin: 0;
  font-family: Arial;
  color: white;
}
/* .insights__bar {
  height: 5px;
  width: 250px;
  margin: 6px 0 12px;
  background-color: #a100ff;
} */

.insights__bar {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loads 2s linear forwards; /* Animation to grow width */
}
 
.insights__desc {
  width: 90%;
  color: #ffffff;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 36px;
  vertical-align: middle;
}
.insights-content-line {
  width: 45%;
}
.insights__see-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffff;
  font-weight: 700;
  text-decoration: none;
  justify-content: end;
  font-family: Arial;
  font-weight: 700;
  font-style: Bold;
  font-size: 21.3px;
  text-transform: uppercase;
}



/* .insights__see-all__btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(90deg, #a100ff 50%, #6d00ad 50%);
  font-size: 18px;
  transition: transform 0.15s ease;
} */

.insights-carousal-img {
  background: radial-gradient(
        circle at 100% 100%,
        transparent 0,
        transparent 12px,
        transparent 12px
      )
      0% 0% / 15px 15px no-repeat,
    radial-gradient(
        circle at 0 100%,
        transparent 0,
        transparent 12px,
        transparent 12px
      )
      100% 0% / 15px 15px no-repeat,
    radial-gradient(
        circle at 100% 0,
        transparent 0,
        transparent 12px,
        transparent 12px
      )
      0% 100% / 15px 15px no-repeat,
    radial-gradient(
        circle at 0 0,
        transparent 0,
        transparent 12px,
        transparent 12px
      )
      100% 100% / 15px 15px no-repeat,
    linear-gradient(transparent, transparent) 50% 50% / calc(100% - 6px)
      calc(100% - 30px) no-repeat,
    linear-gradient(transparent, transparent) 50% 50% / calc(100% - 30px)
      calc(100% - 6px) no-repeat,
    linear-gradient(rgba(161, 0, 255, 0) 0%, #a100ff 100%);
  border-radius: 15px !important;
  padding: 3px !important;
	  height: 415px;
  box-sizing: content-box;
}

.slider-container {
  width: 100%;
  max-width: 1660px;
  margin: auto;
  padding: 20px 0;
  background: #000;
}
.slider-wrapping {
  display: flex;
}
.insights-carousal {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: 0.3s ease;
}

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

/* Center align dots */
/* Hide arrows */
.slick-prev,
.slick-next {
  display: none !important;
}

/* Show dots properly */
.slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 5px;
  bottom: -60px !important;
}
.slick-dots li button:before {
  font-size: 12px;
  color: #555 !important;
  opacity: 1;
}
.slick-dots li.slick-active button:before {
  color: #a100ff !important;
}
.slick-dots li button:before {
  font-size: 14px; /* size bara */
  color: #6d00ad !important; /* default color */
  opacity: 1;
}
.slick-dots li.slick-active button:before {
  color: #a100ff !important; /* active dot color */
}

.slick-dots li button:before {
  font-size: 9px !important;
}
.slick-dots li {
  margin: 0px !important;
}
.icon {
  color: #a020f0;
  font-size: 20px;
  margin-bottom: 10px;
}

.content h3 {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

.content p {
  color: #fff;
  font-size: 14px;
  margin: 5px 0;
}

.arrow {
  color: #fff;
  font-size: 18px;
  position: absolute;
/*   right: 15px; */
	right: 40px;
/*   bottom: 28px; */
	bottom:32px;
	display:flex;
	align-items:center;
	gap:10px;
/* 	visibility:hidden; */
}
 
.insights-content {
  font-family: Arial;
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.11px;
  vertical-align: middle;
  text-transform: uppercase;
  color: white;
	text-align:left;
	padding-bottom: 40px;
	width:85%;
}

/* Gap between slides to mimic your flex gap */
.slider-container .slick-track {
  display: flex;
  gap: 40px;
  position: relative;
}
@media(max-width:767px){
  .slider-container .slick-track{
    gap: 30px;
  }
  .svcslider .bg-border{
    width: 100%;
  }
}

@media(max-width:575px){
    .insights__see-alls{
        width:75% !important;
    }
}

@media(max-width:375px){
     .svcslider .bg-border{
        width: 320px !important;
      }
}



/* .slick-track {
  position: relative;
} */

/* Dots styling (if enabled) */
.slick-dots {
  bottom: -32px;
}
.slick-dots li button:before {
  color: #555;
  opacity: 1;
}
.slick-dots li.slick-active button:before {
  color: #a100ff;
}

@media (max-width: 1280px) {
  .insights__title {
    font-size: 70px;
  }
  .insights__desc {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 1100px) {
  .insights-carousal {
    width: 440px;
    height: 300px;
  }
}

@media (max-width: 991px) {
  .insights__title-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
  }
  .insights__title {
    font-size: 50px;
  }
  .insights__desc {
    font-size: 16px;
    line-height: 25px;
  }

  .insights__see-all {
    font-style: medium;
    font-size: 18.3px;
  }
} 

@media (max-width: 880px) {
  .insights {
    width: 100%;
    padding: 28px 16px 44px;
  }
  .insights__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .insights__title-wrap {
    flex-direction: column;
    gap: 12px;
    align-items: start;
  }
  .insights__title {
    width: auto;
    font-size: 56px;
    line-height: 60px;
    width: 100%;
  }

  .insights-content-line {
    width: 100%;
  }
  .insights__desc {
    font-size: 18px;
    line-height: 30px;
  }
  .insights-carousal {
    /* width: 84vw; */ 
    height: 260px;
  }
}

@media(max-width:767px){
  .insights__title {
    font-size: 42px;
  }
 .insights-content{
    font-size: 20px;
  }
  .insights-carousal {
    /* width: 84vw; */
    width: 90vw;
    height: 100%; 
  }
}
@media(max-width:575px){
 .insights-content{
    font-size: 18px;
  }
}
.slidermain {
  background-color: #000;
}

/* ===== Section wrapper (black bg) ===== */
.intelli {
  background: #000;
  color: #fff;
  padding: 150px 20px 120px 20px;
}

/* ===== Fixed-width inner container ===== */
.intelli-inner {
  max-width: 1700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* ===== Left (text) ===== */
.intelli-title {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 80px; /* spec */
  line-height: 95px; /* spec */
  text-transform: uppercase;
}

/* heading ke neeche 30px ka gap: purple line */
/* .intelli-line {
  display: block;
  width: 250px;
  height: 5px;
  background: #ffffff;
  margin-top: 30px;
} */

.intelli-line {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loads 2s linear forwards; /* Animation to grow width */
}
 
.intelli-text {
  margin: 18px 0 0; /* slight space after line */
  max-width: 850px; /* readable line length */
  font-family: "Inter", Arial, sans-serif;
  font-size: 18px; /* spec */
  line-height: 25px; /* spec */
  color: #ededed;
}

/* ===== Right (image) ===== */
.intelli-right {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
}

.intelli-left {
  flex: 1 1 60%;
}

.intelli-illustration {
  width: 100%;
  height: auto;
  display: block;
	border-radius:10px;
}

/* ===== Responsive polish (still flex) ===== */

@media (max-width: 1550px) {
  .intelli {
    padding: 150px 20px 80px 20px;
  }
  .intelli-title {
    font-size: 60px;
    line-height: 70px;
  }
}

@media (max-width: 1200px) {
  .intelli-title {
    font-size: 50px;
    line-height: 60px;
  }

  .intelli-line {
    margin-top: 10px;
  }
  .intelli-text {
    font-size: 16px;
    line-height: 24px;
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .intelli-inner {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: 30px;
  }
  .intelli-title {
    font-size: 50px;
    line-height: 60px;
  }
  .intelli-right {
    width: 100%;
    justify-content: start;
  }
  .intelli-illustration {
    width: 50% !important;
    height: auto;
    display: block;
  }
  .intelli-text {
    font-size: 16px;
    line-height: 24px;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  .intelli-inner {
    flex-wrap: wrap;
    padding-top: 60px;
  }
  .intelli-illustration{
    width: 100% !important;
  }
  .intelli-left,
  .intelli-right {
    flex: 1 1 100%;
  }

  .intelli-line {
    margin-top: 15px;
  }
  .intelli-right {
    order: 2;
  } /* text first, image below on small screens */
  .intelli-title {
    font-size: 50px;
    line-height: 60px;
    width: 90%;
  }
}

@media (max-width: 768px) {
  .intelli-title {
    font-size: 35px;
    line-height: 40px;
    width: 100%;
  }
  .intelli {
    padding: 110px 20px 70px 20px;
  }
}

@media (max-width: 520px) {
  .intelli-title {
    font-size: 30px;
    line-height: 40px;
  }
  .intelli-line {
    margin-top: 15px;
    width: 120px;
    height: 5px;
  }
  .intelli-text {
    font-size: 16px;
    line-height: 24px;
  }
}

.singlestd {
  background: #000;
  color: #fff;
  padding: 125px 20px 100px 20px;
}

/* ===== Fixed-width inner container ===== */
.singlestd-inner {
  max-width: 1700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* ===== Left (text) ===== */
.singlestd-title {
  margin: 0;
/*   font-family: Arial, sans-serif; */
	  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 72px; /* spec */
  line-height: 95px; /* spec */
  text-transform: uppercase;
}

/* heading ke neeche 30px ka gap: purple line */
/* .singlestd-line {
  display: block;
  width: 250px;
  height: 5px;
  background: #ffffff;
  margin-top: 30px;
} */

.singlestd-line {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loadssss 2s linear forwards; /* Animation to grow width */
}

@keyframes loadssss {
  0% {
    width: 0; /* Start at 0% width */
  }
  100% {
    width: 250px; /* End at full width (250px as per your original CSS) */
  }
}
 

.singlestd-text {
  margin: 18px 0 0; /* slight space after line */
  max-width: 850px; /* readable line length */
  font-family: "Inter", Arial, sans-serif;
  font-size: 18px; /* spec */
  line-height: 25px; /* spec */
  color: #ededed;
}

/* ===== Right (image) ===== */
.singlestd-right {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
}

.singlestd-left {
  flex: 1 1 50%;
}

.singlestd-illustration {
  max-width: 100%;
  height: 55vh;
  display: block;
  border-radius: 20px;
}

/* ===== Responsive polish (still flex) ===== */

@media (max-width: 1550px) {
  .singlestd-title {
    font-size: 60px;
    line-height: 70px;
  }
}

@media (max-width: 1200px) {
  .singlestd-title {
    font-size: 50px;
    line-height: 60px;
  }

  .singlestd-line {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {
  .singlestd-inner {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: 30px;
  }
  .singlestd-title {
    font-size: 50px;
    line-height: 60px;
  }
  .singlestd-right {
    width: 100%;
    justify-content: start;
  }
  .singlestd-illustration {
    width: 50% !important;
    height: auto;
    display: block;
  }
  .singlestd-text {
    font-size: 16px;
    line-height: 24px;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  .singlestd-inner {
    flex-wrap: wrap;
  }
  .singlestd-left,
  .singlestd-right {
    flex: 1 1 100%;
  }

  .singlestd-line {
    margin-top: 15px;
  }
  .singlestd-right {
    order: 2;
  }
  .singlestd-title {
    font-size: 50px;
    line-height: 60px;
    width: 90%;
  }
}

@media (max-width: 768px) {
  .singlestd-title {
    font-size: 35px;
    line-height: 40px;
    width: 100%;
  }
	.singlestd-illustration {
    width: 100% !important; 
  }
}

@media (max-width: 520px) {
  .singlestd-title {
    font-size: 30px;
    line-height: 40px;
  }
  .singlestd-line {
    margin-top: 15px;
    width: 120px;
    height: 5px;
  }
  .singlestd-text {
    font-size: 16px;
    line-height: 24px;
  }
}

.snglstdsecmain {
  background-color: #000;

  padding: 0px 20px 70px 20px;
}

.snglestdchld {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 1620px;
  max-width: 100%;
  margin: 0% auto;
}

.snglstdhead {
  color: white;
  font-size: 80px;
  font-weight: bold;
  line-height: normal;
  font-family: Arial, sans-serif;
  margin: 0px;
}

/* .singlestdchld-line {
  display: block;
  width: 250px;
  height: 5px;
  background: #a100ff;
} */

.singlestdchld-line  {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loads 2s linear forwards; /* Animation to grow width */
}
 

.sngpera {
  color: white;
  font-family: "Inter", Arial, sans-serif;
  font-size: 20px; /* spec */
  line-height: 36px; /* spec */
}

.snglestdchld p img{
	width:100%;
}
@media (max-width: 1550px) {
  .snglstdhead {
    font-size: 70px;
    font-weight: bold;
    line-height: 90px;
  }
  .sngpera {
    font-size: 18px; /* spec */
    line-height: 30px; /* spec */
  }
}
@media (max-width: 1280px) {
  .snglestdchld {
    gap: 10px;
  }

  .snglstdhead {
    font-size: 60px;
    font-weight: bold;
    line-height: 70px;
  }
  .sngpera {
    font-size: 16px; /* spec */
    line-height: 25px; /* spec */
  }
}

@media (max-width: 768px) {
  .snglestdchld {
    gap: 15px;
  }

  .snglstdhead {
    font-size: 45px;
    font-weight: bold;
    line-height: 55px;
  }
  .sngpera {
    font-size: 16px; /* spec */
    line-height: 25px; /* spec */
  }
}

@media (max-width: 580px) {
  .snglestdchld {
    gap: 15px;
  }
  .snglstdhead {
    font-size: 35px;
    font-weight: bold;
    line-height: 45px;
  }
  .sngpera {
    font-size: 14px; /* spec */
    line-height: 22px; /* spec */
  }
}

/* .faq-wrap {
  background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%), #000000;
  padding: 75px 0;
  color: #ffffff;
} */

.faq-wrap  {
/*   background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%), #000000; */
  padding: 0px 20px 70px 20px;
	color: #ffffff;
} 
.faq-wrap {
  background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background-color: #000000; /* Fallback */
}

/* ===== 1700px inner with 40px sides ===== */
.faq-inner {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* ===== Section heading (slightly smaller) ===== */
.faq-title {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 70px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.faq-underline {
  display: block;
  width: 250px;
  height: 4px;
  background: #a100ff;
  border-radius: 3px;
  margin: 14px 0 50px 0px;
}

/* ===== List wrapper ===== */
.faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
}

/* ===== Each item ===== */
.faq-item {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
}

/* Question row */
.faq-summary {
  border-top: 2px solid rgba(161, 0, 255, 0.55);
  border-bottom: 2px solid rgba(161, 0, 255, 0.55);
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 30px 0px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #ffffff;
}
.faq-summary::-webkit-details-marker {
  display: none;
}
.faq-summary::after {
  content: "+";
  font-size: 35px;
  line-height: 1;
  margin-left: 12px;
  color: #ffffff;
}
.faq-item[open] .faq-summary::after {
  content: "-";
}

/* Expanded area: left copy + right image */
.faq-pane {
  display: flex;
  align-items: flex-start;
  align-items: center;
  gap: 24px;
  padding: 30px 12px 30px;
}

/* Left text */
.faq-copy {
  flex: 1 1 55%;
}
.faq-copy p {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  color: #e6e6e6;
}

/* Right media */
.faq-media {
  flex: 1 1 45%;
  display: flex;
  justify-content: flex-end;
}
.faq-media img {
  width: 100%;
  /* max-width: 420px; */
  height: auto;
  display: block;
	opacity: 0.5;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}


@media (max-width: 1280px) {
  .faq-title {
    text-align: center;
    font-size: 65px;
    line-height: 78px;
  }
  .faq-summary {
    font-size: 30px;
    padding: 20px 0px;
  }
  .faq-copy p {
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #e6e6e6;
  }
}

@media (max-width: 1024px) {
  .faq-title {
    font-size: 48px;
    line-height: 56px;
  }
  .faq-summary {
    font-size: 24px;
  }
  .faq-media img {
    max-width: 380px;
  }
}


@media (max-width: 820px) {
  .faq-pane {
    flex-wrap: wrap;
  }
  .faq-copy,
  .faq-media {
    flex: 1 1 100%;
  }
  .faq-media {
    justify-content: flex-start;
  }
  .faq-media img {
    max-width: 100%;
  }
}

@media(max-width:767px){
  .faq-inner{
    padding: 40px 0px;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .faq-title {
    font-size: 32px;
    line-height: 40px;
  }
  .faq-summary {
    font-size: 20px;
    padding: 12px 10px;
  }
  .faq-underline {
    width: 110px;
    height: 3px;
    margin: 12px 0 22px;
  }
  .faq-copy p {
    font-size: 16px;
    line-height: 28px;
  }
}

.wwd {
  background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%),
    url("https://technosurge.co.uk/wp-content/uploads/2025/08/sergrid.png"), #000000;
  padding: 70px 20px;
  color: #fff;
}

/* Fixed inner width = 1700px */
.wwd-inner {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0; /* agar side padding chahiye to add kar sakte ho */
  box-sizing: border-box;
}

.wwdcont {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0% auto;
  padding: 0px 20px 50px 20px;
}

.wwdconthead {
  margin: 0;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 97px;
  line-height: 110px;
  text-transform: uppercase;
}

.wwdconttext {
  font-family: "Inter", Arial, sans-serif;
  font-size: 20px; /* spec */
  line-height: 36px; /* spec */
  color: #ededed;
  text-align: center;  
	width:90%;
}


.faq-underline {
  display: block;
  width: 0;  
  height: 5px;
  background: #a100ff; 
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: load 2s linear forwards;  
}
 
/* FLEX grid: 4 columns, 2 rows, 50px gaps */
.wwd-grid.btwo-grid {
    justify-content: center;
}
.wwd-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}

/* Ensure exactly 4 per row inside this grid */
.wwd-grid .card {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 150px) / 4);
  height: 440px;
  border-radius: 14px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.card_link{
    text-decoration: none;
  color: #fff;
	font-size:18px;
line-height: 22px;
/* 	font-family: Arial, sans-serif; */
		font-family: "Lato", sans-serif;
}

/* ------- Optional responsive (agar chaho) ------- */

@media (max-width: 1550px) {
  .wwd-grid {
    gap: 30px;
  }
  .wwd-grid .card {
     flex: -1 0 calc((100% - 90px) / 4) !important;
  }

  .wwdconthead {
    font-size: 70px;
    line-height: 80px;
  }

  .wwdconttext {
    font-size: 18px; 
    line-height: 36px;
  }
}
@media (max-width: 1280px) {
  .wwd-grid {
    gap: 30px;
  }
  .wwd-grid .card {
    box-sizing: border-box;
 flex: 1 0 calc((100% - -130px) / 4) !important;
  }
  .card__text {
    line-height: 18px !important;
  }

  .card__title {
    font-size: 18px !important;
  }

  .card__head {
    gap: 10px;
    margin-bottom: 5px;
  }

  .card__inner {
    padding: 0px 10px 10px 15px !important;
  }
  .wwdconthead {
    font-size: 60px;
    line-height: 75px;
  }

  .wwdconttext {
    font-size: 18px; /* spec */
    line-height: 25px; /* spec */
  }
}

@media (max-width: 900px) {
  .wwd-grid {
    gap: 30px;
  }
  .wwd-grid .card {
    box-sizing: border-box;
     flex: 1 0 calc((100% -  -30px) / 2) ;
  }

  .card__title {
    font-size: 18px;
  }
  .wwdconthead {
    font-size: 50px;
    line-height: 60px;
  }

  .wwdconttext {
    font-size: 18px; 
    line-height: 25px;
  }
}
@media (max-width: 560px) {
  .faq-underline{
    margin: 20px 0 20px 0px;
  }
  .wwdcont{
    padding-bottom: 20px;
  }
  .wwd-grid {
    column-gap: 16px;
    row-gap: 20px;
  }
  
  .wwd-grid .card {
    box-sizing: border-box;
    /* flex: 0 0 calc((100% - 70px) / 1); */
    flex: 100%;
    height: auto;
  }

  .wwdconthead {
    font-size: 35px;
    line-height: 40px;
  }

  .wwdconttext {
    font-size: 16px; /* spec */
    line-height: 25px; /* spec */
  }
}


.insights__see-alls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffff;
  font-weight: 700;
  text-decoration: none;
  justify-content: end;
  font-family: Arial;
  font-weight: 700;
  font-style: Bold;
  font-size: 15px;
  width: 30%;
} 


.bgblk{
  background-color: #000 !important;
}



  .insights__see-all:hover .insights__see-all__btn{
    background-position-x: 0;
    transform: translateX(5px); /* arrow jese thoda right ko move karega */

}





.insights__see-all__btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
/*     background: linear-gradient(90deg, #7500c0 50%, #a100ff 50); */
	  background: linear-gradient(90deg, #a100ff 50%, #6d00ad 50%);
    background-size: 200% 200%;
    background-position-x: 100%;
    transition: background-position-x 0.6s cubic-bezier(0.85, 0, 0, 1),
                transform 0.6s cubic-bezier(0.85, 0, 0, 1);
    color: #fff;
	
}

.insights__see-all__btnr{
	 display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
/*     background: linear-gradient(90deg, #7500c0 50%, #a100ff 50); */
	  background: linear-gradient(90deg, #a100ff 50%, #6d00ad 50%);
    background-size: 200% 200%;
    background-position-x: 100%;
    transition: background-position-x 0.6s cubic-bezier(0.85, 0, 0, 1),
                transform 0.6s cubic-bezier(0.85, 0, 0, 1);
    color: #fff; 
	margin-left:4px;
}
.insights__see-all__btnr svg{
	width: 10px;
    height: 10px;
}

/* Hover pe effect */
.insights__see-alls:hover .insights__see-all__btn{
    background-position-x: 0;
    transform: translateX(5px); /* arrow jese thoda right ko move karega */

}

@media(max-width:1360px){
	.insights__see-alls{
		width:50%;
		font-size: 15px;
	}
}

@media(max-width:1200px){
	.insights__see-alls{
		justify-content: start;
	}
}
.dataandai {
/*   background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%), #000000; */
  padding: 0px 20px 70px 20px;
} 
.dataandai {
  background: linear-gradient(to right, rgba(161, 0, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background-color: #000000; /* Fallback */
}
.ainowmain {
  width: 1700px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  gap: 50px;
  margin: 0% auto;
}
.aiinnner {
/*   width: 360px; */
  display: flex;
  flex-direction: column;
  gap: 20px;
	width:25%;
  padding: 0px 20px 0px 20px;
}
/* .ailine {
  display: block;
  width: 35px;
  height: 5px;
  background: #a100ff;
  margin-top: 30px;
} */
.ailine {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loadsss 2s linear forwards; /* Animation to grow width */
}

@keyframes loadsss {
  0% {
    width: 0; /* Start at 0% width */
  }
  100% {
    width: 35px; /* End at full width (250px as per your original CSS) */
  }
}
.aipera {
  font-family: Arial, sans-serif;
  font-size: 21px;
  margin: auto;
  color: white;
	margin:unset:

  font-weight: 400;
  line-height: 32px;
}
.aihdng {
  font-family: Arial, sans-serif;
  font-weight: 700;
  margin: 0px;
  font-size: 70px;
  color: white;
}
.datatool {
  width: 1700px;
  max-width: 100%;
  padding: 50px 20px;
  margin: 0% auto;
  margin-bottom: 50px;
}
.toolhdng {
  font-size: 80px;
  font-family: Arial, sans-serif;
  color: white;
  margin: 0%;
}
@media (max-width: 1550px) {
  .ainowmain {
    gap: 24px;
  }
  .aiinnner {
    gap: 15px;
    padding: 0px;
  }
  .aihdng {
    font-weight: 700;
    font-size: 60px;
  }
  .toolhdng {
    font-size: 60px;
  }
  .aipera {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 1280px) {
  .aihdng {
    font-weight: 700;
    font-size: 50px;
  }
  .datatool {
    padding: 60px 0px;
    margin-bottom: 10px;
  }
}
@media (max-width: 991px) {
  .ainowmain {
    gap: 25px;
    flex-wrap: wrap;
  }
  .aihdng {
    font-weight: 700;
    font-size: 40px;
  }
  .aiinnner {
    padding: 0px;
    width: 48%;
  }
  .aipera {
    width: 85%;
    font-size: 18px;
    line-height: 25px;
  }
  .toolhdng {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .ainowmain {
    gap: 25px;
    flex-wrap: wrap;
  }
  .aiinnner {
    padding: 0px;
    width: 100%;
  }
  .toolhdng {
    font-size: 40px;
  }
  .aipera {
    width: 100%;
    font-size: 16px;
    line-height: 25px;
  }
}

@media (max-width: 580px) {
  .ainowmain {
    gap: 10px;
  }
  .aipera {
    width: 97%;
  }
  .aihdng {
    font-weight: 700;
    font-size: 35px;
  }
  .toolhdng {
    font-size: 30px;
  }
  .aiinnner {
    padding: 0px;
    width: 100%;
    gap: 10px;
  }
}



/* saad css services grid section */
.bg-border {
    background: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, transparent 12px) 0% 0% / 15px 15px no-repeat, radial-gradient(circle at 0 100%, transparent 0, transparent 12px, transparent 12px) 100% 0% / 15px 15px no-repeat, radial-gradient(circle at 100% 0, transparent 0, transparent 12px, transparent 12px) 0% 100% / 15px 15px no-repeat, radial-gradient(circle at 0 0, transparent 0, transparent 12px, transparent 12px) 100% 100% / 15px 15px no-repeat, linear-gradient(transparent, transparent) 50% 50% / calc(100% - 6px) calc(100% - 30px) no-repeat, linear-gradient(transparent, transparent) 50% 50% / calc(100% - 30px) calc(100% - 6px) no-repeat, linear-gradient(rgba(161, 0, 255, 0) 0%, #a100ff 100%);
    border-radius: 15px;
    padding: 3px;

  }



  .svc__wraps {
    max-width: 100%;
    margin: 0 auto;
        width: 55%;
    /* padding: 0 0 70px; */
    display: flex;
    align-items: center;
    gap: 40px;
  
  }

  .svc__right {
    overflow: hidden;
  }
/* ////overflowauto */
.js-drag-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
  .svcslider.js-drag-scroll {
    display: flex;
    /* justify-content: space-between; */
    gap: 30px;
  }
.svcslider .bg-border {
    display: inline-block;
    width: 380px; /* Adjust based on your design */
    margin-right: 30px;
}
.svcslider {
    overflow: hidden; /* Ensure slider container handles overflow */
}
  /* Heading and Content */
 
  .svc__underline {
    display: block;
    width: 250px;
    height: 5px;
    background: #a100ff;
    margin: 11px 0;
  }



  .svc__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 14px/1 Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
  }

  .svc__cta::after {
    content: "›";
    display: inline-block;
    transform: translateY(-1px);
    background: #a100ff;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
  }

/* Card Styles */
.card {
  aspect-ratio: 0.8; 
  border-radius: 14px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 23px !important; 
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  transition: all 0.3s ease;
  user-select: none;
}

/* Overlay (default state: only gradient) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,   
    rgba(0,0,0,0.7) 100%
  ); 
  transform: translateY(50%);
  transition: all 0.4s ease;
  z-index: 1;
}

/* Text/content clear */
.card > * {
  position: relative;
  z-index: 2;
}

/* Title */
.cardtitle {
  font: 700 21px/1.25 Arial, sans-serif;
  color: #fff;
  margin: 0 0 8px 0;
}

/* Card Body: Hidden by default */
.cardbody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.5s ease;
}

/* Card Text */
.cardtext {
  padding-bottom: 30px;
  font: 400 14px/1.6 "Inter", Arial, sans-serif;
  color: #ddd;
  margin: 0;
  opacity: 1 !important;
}

/* ============================= */
/* DESKTOP: Hover effects enabled */
/* ============================= */
@media screen and (min-width: 769px) {
  .card:hover::before {
    transform: translateY(0);
    backdrop-filter: blur(6px);         /* background blur */
    -webkit-backdrop-filter: blur(6px); /* Safari support */
  }

  .card:hover .cardbody {
     max-height: 300px;   /* Expand body*/
    z-index: 2 !important;
  }
}

/* ============================= */
/* MOBILE: Auto Open (no hover)  */
/* ============================= */
@media screen and (hover: none) and (pointer: coarse) {
  .card::before {
    transform: translateY(0) !important; /* Overlay fully visible */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .cardbody {
    max-height: 250px !important; /* Always open */
    z-index: 2 !important;
  }
}









/* @media(max-width:757px){
	.cardbody{
		 max-height: fit-content;
    overflow: unset;
    transition:unset; 
	}
	#all-page-124 .wwd-grid .card {
      height: 440px;
}
	.snglestdchld p img {
		    width: 100%;
	}
	.singlestd-illustration{
		width:100% !important;
	}
	.card--open .cardbody {
    display: block;
} */













      /* ===== Contact us banner ===== */
.gform_heading{
	display:none !important;	
}
    .contactbanner {
        background: #000;
        color: #fff;
        padding: 130px 20px 100px 20px;
    }

    /* ===== Fixed-width inner container ===== */
.form-wrap {
    max-width: 1700px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
	gap:25px;
	padding-top:50px;
}
    .cntct-inner{
/*     max-width: 1700px;
    margin: 0 auto; */
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px;
		width:50%;
    }
#all-page-208 .cntct-line{
	margin-top:10px;
}
    /* ===== Left (text) ===== */
    .cntct-title {
    margin: 0;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 97px; /* spec */
    line-height: 110px; /* spec */
    text-transform: uppercase;
    }

    /* heading ke neeche 30px ka gap: purple line */
/*     .cntct-line {
    display: block;
    width: 250px;
    height: 5px;
    background: #a100ff;
    margin-top: 30px;
    } */

.cntct-line {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
margin-top: 30px;
  flex-shrink: 0;
  animation: loads 2s linear forwards; /* Animation to grow width */
}

    .cntct-text {
    margin: 18px 0 0; /* slight space after line */
    max-width: 850px; /* readable line length */
    font-family: "Inter", Arial, sans-serif;
    font-size: 18px; /* spec */
    line-height: 25px; /* spec */
    color: #ededed;
    }

    /* ===== Right (image) ===== */
    .cntct-right{
/*     flex: 1 1 45%; */
    display: flex;
/*     justify-content: space-between; */
		gap:20px;
width: 100%;
    }

    .cntct-left{
    flex: 1 1 55%;
    }


    .nmbrdiv{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    }

    .locatdiv{
    display: flex;
    flex-direction: column;
    gap: 30px;
        width: 50%;
    }

    .brainpic{
        width: 75px;
    }
    .locapic{
        width: 75px;
    }
    .nmbrhead{
        font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 30px; /* spec */
    line-height: 41px; /* spec */
    color:white;
margin: 0px;
    }

    .nmbrtxt{
    font-family: "Inter", Arial, sans-serif;
    font-size: 18px; /* spec */
    line-height: 25px; /* spec */
    color: #ededed;
       margin: 0px;
    }



    .locticn{
        display: flex;
        justify-content: space-between;
            align-items: center;
        width: 88%;
    }
    .dirctlogo{
        width:auto;
        height: 20px;
    }

.map-container{
	width: 100%;
/* 	margin: 0 auto; */
}

    /* ===== Responsive polish (still flex) ===== */

    @media (max-width: 1550px) {
    .cntct-title  {
        font-size: 65px;
        line-height: 90px;
    }
    }

    @media (max-width: 1200px) {
    .contactbanner {
        background: #000;
        color: #fff;
        padding: 150px 20px 70px 20px;
    }


    .cntct-title  {
        font-size: 60px;
        line-height: 70px;
    }
    .nmbrhead{
    font-size: 25px; 
    line-height: 35px; 
    }
    .nmbrtxt{

    font-size: 16px; 
    line-height: 25px; 
 
    }
    }


    @media (max-width: 1150px) {

    .cntct-text {
        font-size: 17px;
        line-height: 24px;
    }
    .cntct-right {
        display: flex;
        justify-content: space-between;
        width: 50%;
        gap: 30px;
    }
    }


    @media (max-width: 1024px) {
    .cntct-inner {
        flex-wrap: wrap;
        /* flex-direction: column-reverse; */
        gap: 30px;
    }
    .cntct-title  {
        font-size: 55px;
        line-height: 70px;
    }
    .cntct-right {
        width: 100%;
    
    }
    .wwa-illustration {
        width: 50% !important;
        height: auto;
        display: block;
    }
    .cntct-text {
        font-size: 16px;
        line-height: 24px;
        max-width: 100% !important;
    }
    .nmbrdiv{
        gap: 20px;
    }
    .locatdiv{
        gap: 20px;
    }
    }

    @media (max-width: 900px) {
    .cntct-inner {
        flex-wrap: wrap;
    }
    .cntct-right,
    .cntct-left{
        flex: 1 1 100%;
    }

    .cntct-line {
        margin-top: 5px;
        
    }
    .cntct-right{
        order: 2;
        justify-content: space-between;
        gap: 20px;
    }
    .cntct-title{
        font-size: 50px;
        line-height: 72px;
    }
    .nmbrhead{
    font-size: 20px; 
    line-height: 30px; 
    }

    }

@media(max-width:775px){
	.form-wrap{
		flex-direction:column;
	}
	.cntct-inner{
		width:100%;
		margin-bottom:30px;
	}
	.contact-form{
		width:100% !important;
		padding: 0px 0px 50px 0px;
	}
}

    @media (max-width: 520px) {
    .cntct-title{
        font-size: 30px;
        line-height: 50px;
    }
    .cntct-line {
        margin-top: 15px;
        width: 120px;
        height: 5px;
    }
    .cntct-text {
        font-size: 16px;
        line-height: 24px;
    }
    .cntct-right{
        flex-wrap:wrap ;
        gap: 30px;
    }
    .nmbrdiv{
        width: 100%;
    }


    .locatdiv{
            width: 100%;
    }
    }


    .cardcontentcasestd a span {
    width: 30px!important;
    height: 30px !important;
     border-radius: 5px;

}


/* Gravity Form Wrapper */

.contact-form{
	width:50%;
background-color: #000;
padding: 0px 20px 70px 20px;
}

.gform_wrapper {
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
}

/* Title Center Alignment */
.gform_title {
  margin: auto;
}

/* Large Inputs and Select Fields */
.gform-theme--foundation .gfield input.large,
.gform-theme--foundation .gfield select.large {
  inline-size: 100%;
  height: 51px;
  border-radius: 0px;
  background-color: #202020;
  border: none;
}

/* Removing Border When Active on Inputs and Select */
.gform-theme--foundation .gfield input.large:focus,
.gform-theme--foundation .gfield select.large:focus {
  border: none !important;
  background-color: #333; /* Darker background on focus */
}

/* Textarea Styles */
.gform-theme--foundation .gfield textarea.large {
  background-color: #202020;
  border: none;
  border-radius: 0px;
}

/* Specific Inputs (ID Based) */
#input_1_3_6, #input_1_1_3 {
  background-color: #202020;
  border: none;
  border-radius: 5px;
  height: 50px;
}

/* Input Text Color */
#input_1_9 {
  color: #A2A2A0 !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
	border-radius: 5px;
}

/* Label Styling */
.gfield_label {
  color: white !important;
  font-family: Arial, sans-serif !important;
  font-weight: bold !important;
  font-size: 18px !important;
}

/* On Field Focus: Remove Border and Change Background */
.gform-theme--foundation .gfield input:focus,
.gform-theme--foundation .gfield textarea:focus,
.gform-theme--foundation .gfield select:focus {
  border: none;
  background-color: #333; /* Darker background on focus */
  color: white;
}

/* Change Background When Suggesting Text */
.gform-theme--foundation .gfield input[type="text"]:not(:focus):not(:placeholder-shown) {
  background-color: #282828 !important; /* Change the background when text is entered */
}

.gform-theme--foundation .gfield input[type="text"]:not(:focus):not(:placeholder-shown) ~ .gfield_label {
  color: #ffffff !important;
}

/* Handle Suggested Text (Autocomplete) */
.gform-theme--foundation .gfield input[type="text"]:focus {
  background-color: #333 !important; /* Background when focused */
  border: none!important;
}
#label_1_11_1{
color: white !important;
  font-family: Arial, sans-serif !important;
  font-weight: lighter !important;
  font-size: 18px !important;
	
}

.gform_button ,
#gform_submit_button_1 {
    background: linear-gradient(90deg, #7500C0 50%, #A100FF 50%);
    color: #fff; 
    border: none; 
    padding: 15px 35px;
    font-size: 16px; 
    cursor: pointer; 
    transition: background 0.3s ease;
}



.innersngl{
  background-color: #000;
}

.reinavntmain {
  background-color: #000;
}

.ReinventData {
  max-width: 100%;
  width: 1700px;
  display: flex;
  flex-direction: column;
  gap: 50px;
padding: 70px 20px 150px 20px;
  margin: auto;
}

.reinvantcont {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.Reinventhaed {
  font-size: 80px;
  font-family: Arial, sans-serif;
  color: white;
  margin: 0px;
  line-height: 1.2;
}

/* .Reinventline {
  display: block;
  width: 560px;
  height: 5px;
  background: #a100ff;
} */

.Reinventline {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loadss 2s linear forwards; /* Animation to grow width */
}

@keyframes loadss {
  0% {
    width: 0; /* Start at 0% width */
  }
  100% {
    width: 560px; /* End at full width (250px as per your original CSS) */
  }
}
@media(max-width:775px){
	.Reinventline{
		width:450px;
	}
}
@media(max-width:575px){
	.Reinventline{
		width:250px;
	}
}
/* .reinvantdata {
  display: flex;
  gap: 50px;
} */

.reininnleft, .reininnright {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.reinventimagetext.Flip {
    grid-column: span 1;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.reinleftimg img {
  border-radius: 10px 10px 0px 0px;
  width: 100%;
  height: auto;
}

.reinleftcont {
  margin-top: -5px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #160024;
  padding: 30px;
  border-radius: 0px 0px 10px 10px;
}

/* .linerein {
  display: block;
  width: 35px;
  height: 5px;
  background: #a100ff;
  margin-top: 30px;
} */
.linerein {
  display: block;
  width: 0; /* Start with zero width */
  height: 5px;
  background: #a100ff; /* Solid color for simplicity, or use a gradient */
  margin-bottom: 10px;
  flex-shrink: 0;
  animation: loadd 2s linear forwards; /* Animation to grow width */
}

@keyframes loadd {
  0% {
    width: 0; /* Start at 0% width */
  }
  100% {
    width: 35px; /* End at full width (250px as per your original CSS) */
  }
}

.reinheading {
  font-family: Arial, sans-serif;
  font-size: 20px;
  margin: 0px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffffff;
}

.reinmainhdng {
  font-family: Arial, sans-serif;
  font-size: 40px;
   margin: 0px;
  font-weight: lighter;
  color: #ffffff;
  line-height: 1.3;
}

.reinrightcont {
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: #160024;
  padding: 30px;
  border-radius: 10px;
}

.noradius {
  border-radius: 10px 10px 0px 0px !important; 
}
.borrad {
    border-radius: 0px 0px 10px 10px !important;
    width: 100%;
    height: auto;
}


/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 1200px) {
  .Reinventhaed {
    font-size: 60px;
  }
  .Reinventline {
    width: 400px;
  }
  .reinmainhdng {
    font-size: 25px;
  }

  .reinleftcont {
    gap: 10px;
    padding: 15px;
}

.reinrightcont {
    gap: 15px;
    padding: 15px;
}

.reininnleft, .reininnright {
    gap: 25px;
}
.reinvantdata {
    gap: 25px;
}
}

@media (max-width: 992px) {
  .reinvantdata {
    flex-direction: column;
    gap: 40px;
  }
  .reininnleft,
  .reininnright {
    width: 100%;
  }
  .Reinventhaed {
    font-size: 50px;
    /* text-align: center; */
  }

}

@media (max-width: 768px) {
  .Reinventhaed {
    font-size: 40px;
  }
  .Reinventline {
    width: 250px;
  }
  .reinmainhdng {
    font-size: 22px;
  }
  .reinheading {
    font-size: 18px;
  }
  .reininnleft, .reininnright{
display: flex;
flex-direction: column;
  }
}

@media (max-width: 480px) {
  .Reinventhaed {
    font-size: 30px;
  }
  .Reinventline {
    width: 180px !important;
    height: 4px;
  }
  .reinmainhdng {
    font-size: 22px;
  }
  .reinheading {
    font-size: 16px;
  }
  .reinleftcont,
  .reinrightcont {
    padding: 20px;
  }
}


#all-page-124 .slick-dots,
#all-page-124 .insights__see-all {
    display: none !important;
}


  .insights .slick-list {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}



.refdatabtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffff;
    text-decoration: none;
   font-family: Arial;
    font-style: Bold;
    font-size: 21.3px;
   
}

 .refdatabtn:hover , .txtsvg {
    background-position-x: 0;
    transform: translateX(5px); 
} 




.bgblck {
  background: black !important;
	width: 25px !important;
	text-align: center !important;
	  transition: all 0.3s ease-in-out;
}

.insights__see-all:hover .bgblck {
    transform: translateX(5px) rotate(0deg);
}



.snglestdchld p {
    color: #fff;
	margin:7px 0px;
	font-family: "Lato", sans-serif;
	 font-size: 22px;
    line-height: 30px;
}
.snglestdchld p strong{
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 34px;
    text-decoration: underline;
}
.snglestdchld ol li{
    color: #fff;
	font-family: "Lato", sans-serif;
}
.snglestdchld h1, h2, h3, h4, h5, h6{
	color:#fff;
	font-family: "Lato", sans-serif;
	margin:0px;
}
.snglestdchld ol,ul{
	margin:0px;
	 font-size: 19px;
}
.snglestdchld ul li{
    color: #fff;
	font-family: "Lato", sans-serif;
	    margin-bottom: 10px;
	    font-size: 19px;
}
.snglestdchld ul li::marker {
    color: #a100ff; /* apna desired color */
    font-size: 18px; /* agar size bhi change karna ho */
}
.snglestdchld h1{
	font-size:48px;
	color: #ffffff;
}
.snglestdchld h2{
	font-size:35px;
	color: #620598;
}
.snglestdchld h3{
	font-size:30px;
	color: #620598;
}
.snglestdchld h4{
	font-size:25px;
	color: #620598;
}
.snglestdchld h5{
	font-size:22px;
	color: #620598;
}

@media(max-width:1249px){
	
.snglestdchld p {
    color: #fff;
	margin:7px 0px;
	font-family: "Lato", sans-serif;
	 font-size: 22px;
    line-height: 30px;
}
.snglestdchld p strong{
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 30px;
    text-decoration: underline;
}
.snglestdchld ol li{
    color: #fff;
	font-family: "Lato", sans-serif;
}
.snglestdchld h1, h2, h3, h4, h5, h6{
	color:#ffffff;
	font-family: "Lato", sans-serif;
	margin:0px;
}
.snglestdchld ol,ul{
	margin:0px;
	 font-size: 19px;
}
.snglestdchld ul li{
    color: #fff;
	font-family: "Lato", sans-serif;
	    margin-bottom: 10px;
	    font-size: 19px;
}
.snglestdchld ul li::marker {
    color: #a100ff; /* apna desired color */
    font-size: 18px; /* agar size bhi change karna ho */
}
.snglestdchld h1{
	font-size:42px;
	color: #ffffff;
}
.snglestdchld h2{
	font-size:32px;
	color: #ffffff;
}
.snglestdchld h3{
	font-size:28px;
	color: #ffffff;
}
.snglestdchld h4{
	font-size:24px;
	color: #ffffff;
}
.snglestdchld h5{
	font-size:20px;
	color: #ffffff;
}
}
@media(max-width:775px){
	
.snglestdchld p {   
	 font-size: 20px;
    line-height: 26px;
}
.snglestdchld p strong{ 
    font-size: 26px; 
}  
.snglestdchld ol,ul{ 
	 font-size: 18px;
}
.snglestdchld ul li{ 
	    margin-bottom: 10px;
	    font-size: 18px;
}
.snglestdchld ul li::marker {
    color: #a100ff; /* apna desired color */
    font-size: 18px; /* agar size bhi change karna ho */
}
.snglestdchld h1{
	font-size:36px;
	color: #ffffff;
}
.snglestdchld h2{
	font-size:28px;
	color: #ffffff;
}
.snglestdchld h3{
	font-size:24px;
	color: #ffffff;
}
.snglestdchld h4{
	font-size:22px;
	color: #ffffff;
}
.snglestdchld h5{
	font-size:20px;
	color: #ffffff;
}
}
@media(max-width:575px){
	
.snglestdchld p {   
	 font-size: 18px;
    line-height: 20px;
}
.snglestdchld p strong{ 
    font-size: 22px; 
}  
.snglestdchld ol,ul{ 
	 font-size: 17px;
}
.snglestdchld ul li{ 
	    margin-bottom: 10px;
	    font-size: 17px;
}
.snglestdchld ul li::marker { 
    font-size: 17px; /* agar size bhi change karna ho */
}
.snglestdchld h1{
	font-size:30px; 
}
.snglestdchld h2{
	font-size:24px; 
}
.snglestdchld h3{
	font-size:22px; 
}
.snglestdchld h4{
	font-size:20px; 
}
.snglestdchld h5{
	font-size:19px; 
}
}