/* TechMave Mobile App Development - Custom CSS */



/* Variables */

:root {

  /* Colors */

  --primary-color: #2196F3;

  --secondary-color: #128ef3;

  --accent-color: #06b6d4;

  --success-color: #10b981;

  --warning-color: #f59e0b;

  --error-color: #ef4444;

  

  /* Background Colors */

  --bg-primary: #0a0b1e;

  --bg-secondary: #1a1b3e;

  --bg-tertiary: #2d2e6e;

  --bg-card: rgba(255, 255, 255, 0.05);

  --bg-card-hover: rgba(255, 255, 255, 0.1);

  

  /* Text Colors */

  --text-primary: #ffffff;

  --text-secondary: rgba(255, 255, 255, 0.7);

  --text-muted: rgba(255, 255, 255, 0.5);

  

  /* Border Colors */

  --border-primary: rgba(255, 255, 255, 0.2);

  --border-glow: rgba(99, 102, 241, 0.4);

  

  /* Shadows */

  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.3);

  --shadow-glow: 0 0 40px rgba(99, 165, 241, 0.4);

  --shadow-button: 0 4px 20px rgba(99, 102, 241, 0.3);

  

  /* Transitions */

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Global Styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Inter', sans-serif;

  background: var(--bg-primary);

  color: var(--text-primary);

  line-height: 1.6;

  overflow-x: hidden;

}

.padding-global {

    flex: 1;

    padding-left: 8%;

    padding-right: 8%;

}

/* Smooth Scrolling */

html {

  scroll-behavior: smooth;

}



/* Animations */

.fade-in-up {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}



.fade-in-up.animate {

  opacity: 1;

  transform: translateY(0);

}



.scale-in {

  opacity: 0;

  transform: scale(0.9);

  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}



.scale-in.animate {

  opacity: 1;

  transform: scale(1);

}



/* Hero Section */

.hero-section {

    min-height: 100vh;

    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    margin-top: -80px;

    padding: 120px 0 0;

}



.hero-bg-animation {

  position: absolute;

  inset: 0;

  overflow: hidden;

}



.floating-element {

  position: absolute;

  border-radius: 50%;

  filter: blur(60px);

  animation: float 8s ease-in-out infinite;

}



.element-1 {

  top: 20%;

  left: 10%;

  width: 200px;

  height: 200px;

  background: rgba(99, 102, 241, 0.2);

  animation-delay: 0s;

}



.element-2 {

  bottom: 20%;

  right: 10%;

  width: 300px;

  height: 300px;

  background: rgba(139, 92, 246, 0.2);

  animation-delay: 2s;

}



.element-3 {

  top: 25%;

  left: 25%;

  width: 250px;

  height: 250px;

  background: rgba(6, 182, 212, 0.1);

  animation-delay: 1s;

}



.element-4 {

  bottom: 25%;

  right: 25%;

  width: 350px;

  height: 350px;

  background: rgba(139, 92, 246, 0.1);

  animation-delay: 3s;

}



.element-5 {

  top: 30%;

  left: 30%;

  width: 280px;

  height: 280px;

  background: rgba(6, 182, 212, 0.15);

  animation-delay: 1.5s;

}



.element-6 {

  bottom: 30%;

  right: 30%;

  width: 320px;

  height: 320px;

  background: rgba(99, 102, 241, 0.15);

  animation-delay: 2.5s;

}



@keyframes float {

  0%, 100% {

    transform: translateY(0px) translateX(0px);

  }

  25% {

    transform: translateY(-20px) translateX(10px);

  }

  50% {

    transform: translateY(-10px) translateX(-10px);

  }

  75% {

    transform: translateY(-30px) translateX(5px);

  }

}

/**************************

Hero Section Css Start Here

**************************/

.hero-bottom-ellipse {

    z-index: 99;

    width: 100%;

    height: 60%;

    position: absolute;

    inset: auto 0% 0%;

}

.hero-global-grediant-wrap {

    z-index: 0;

    width: 100%;

    height: 100%;

    position: absolute;

    inset: 0% 0% auto;

}

.image-full-both.hero-ellipse {

    object-position: 50% 0%;

}

.image-full-both {

    object-fit: cover;

    width: 100%;

    height: 100%;

    overflow: clip;

}

/* .InnerContent {

    position: relative;

    z-index: 1;

} */

 .contentSectionSide {

    position: relative;

    z-index: 999;

}

.home-hero-right {

    z-index: 99;

    padding-bottom: var(--_spacing---section-padding--100px);

    /* background-image: url("https://cdn.prod.website-files.com/6830a523c2182ea11a435f44/6831e6253c41283b7c094966_phone%20screen.avif"); */

    background-position: 50% 30px;

    background-repeat: no-repeat;

    background-size: 390px 780px;

    justify-content: center;

    align-items: flex-end;

    width: 100%;

    height: 620px;

    display: flex;

    z-index: 1;

    position: relative;

}

.InnerContent .row{

  align-items: center !important;

}



.profile-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

}

.profileCntBnr h5 {

    margin-bottom: 0;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 5px;

}



ul.profile-items li img {

    width: 25px;

}

ul.profile-items {

    display: flex;

    list-style: none;

    padding: 0px 0 0 7px;

    margin-bottom: 0;

}

ul.profile-items li {

    padding: 5px;

    background: #ffff;

    border-radius: 50px;

    border: 2px solid #dadada;

    margin-left: -10px;

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

}

.profileCntBnr p {

    margin-bottom: 0;

    color: #cbdfee;

}

.profileCntBnr h5 {

    margin-bottom: 0;

    color: #fff;

    display: flex;

    align-items: center;

    gap: 5px;

}









.hero-badge {

  display: inline-flex;

  align-items: center;

  padding: 8px 16px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 50px;

  font-size: 12px;

  font-weight: 500;

  color: var(--text-secondary);

  margin-bottom: 2rem;

}



.hero-title {

    width: 100%;

    font-family: "Inter Tight", sans-serif;

    text-transform: capitalize;

    margin-top: 0;

    margin-bottom: 15px;

    font-size: 55px;

    font-weight: 600;

    line-height: 110%;

    color: #fff;

    letter-spacing: 0.5px;

    padding-top: 0;

}



.hero-subtitle {

    font-size: 17px;

    font-weight: 300;

    color: var(--text-secondary);

    margin-bottom: 2rem;

    max-width: 600px;

    line-height: 1.5;

}



.hero-buttons {

  margin-bottom: 2em;

}



.hero-buttons .btn {

  font-weight: 400;

  padding: 12px 32px;

  border-radius: 8px;

  transition: var(--transition-smooth);

}



.hero-buttons .btn-outline-light {

  background: transparent;

  border: 1px solid var(--border-primary);

  color: var(--text-primary);

}



.hero-buttons .btn-outline-light:hover {

  background: rgba(255, 255, 255, 0.1);

  border-color: var(--primary-color);

}



.hero-buttons .btn-primary {

  background: var(--primary-color);

  border: 1px solid var(--primary-color);

  box-shadow: var(--shadow-button);

}



.hero-buttons .btn-primary:hover {

  background: var(--secondary-color);

  border-color: var(--secondary-color);

  box-shadow: var(--shadow-glow);

}



.hero-tags {

  display: flex;

  align-items: center;

  gap: 1rem;

  font-size: 14px;

  color: var(--text-muted);

}



.floating-card {

    position: absolute;

    bottom: 2rem;

    right: 25rem;

    width: 200px;

    height: 140px;

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

    border: 1px solid var(--border-primary);

    border-radius: 16px;

    padding: 1rem;

    transition: var(--transition-smooth);

    animation: cardFloat 6s ease-in-out infinite;

    z-index: 9999;

}



.floating-card:hover {

  transform: scale(1.05);

  box-shadow: var(--shadow-glow);

}

.floating-card .card-footer {

    padding: 15px 0;

}

@keyframes cardFloat {

  0%, 100% {

    transform: translateY(0px);

  }

  50% {

    transform: translateY(-10px);

  }

}



.card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1rem;

}



.card-icon {

  width: 32px;

  height: 32px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 14px;

}



.card-dot {

  width: 24px;

  height: 24px;

  background: rgba(255, 255, 255, 0.2);

  border-radius: 50%;

}



.card-lines {

  margin-bottom: 1rem;

}



.line {

  height: 8px;

  background: rgba(255, 255, 255, 0.3);

  border-radius: 4px;

  margin-bottom: 8px;

}



.line-1 {

  width: 60%;

}



.line-2 {

  width: 40%;

  background: rgba(255, 255, 255, 0.2);

}



.card-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.card-label {

    font-size: 13px;

    color: var(--text-muted);

}



.card-number {

  font-size: 18px;

  font-weight: 600;

  color: var(--text-primary);

}



.time-zone {

  position: absolute;

  bottom: 2rem;

  right: 14rem;

  font-size: 10px;

  color: var(--text-muted);

  font-family: 'Monaco', 'Menlo', monospace;

}



.time {

  font-family: 'Monaco', 'Menlo', monospace;

}



.floating-icon {

  position: absolute;

  width: 64px;

  height: 64px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  transition: var(--transition-smooth);

}



.icon-left {

  top: 25%;

  left: 2rem;

  color: var(--accent-color);

  animation: iconFloat 6s ease-in-out infinite;

}



.icon-right {

  top: 33%;

  right: 2rem;

  color: var(--secondary-color);

  animation: iconFloat 8s ease-in-out infinite reverse;

}



@keyframes iconFloat {

  0%, 100% {

    transform: translateY(0px);

  }

  50% {

    transform: translateY(-20px);

  }

}



/* Section Styles */

.services-section,

.industries-section,

.tech-section {

  padding: 6rem 0;

  background: var(--bg-primary);

}



.counter-section,

.ai-section {

  padding: 6rem 0;

  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);

  position: relative;

}



.counter-bg-animation,

.ai-bg-animation {

  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

}



.section-title {

  font-size: clamp(2.5rem, 5vw, 4rem);

  font-weight: 700;

  line-height: 1.2;

  margin-bottom: 1.5rem;

}



.title-main {

  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.title-accent {

  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.section-subtitle {

  font-size: clamp(1.125rem, 2.5vw, 1.25rem);

  color: var(--text-secondary);

  max-width: 800px;

  margin: 0 auto;

  line-height: 1.6;

}



/* Service Cards */

.service-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 16px;

  padding: 2rem;

  height: 100%;

  transition: var(--transition-smooth);

  cursor: pointer;

  position: relative;

  overflow: hidden;

}



.service-card:hover {

  transform: translateY(-8px) scale(1.02);

  border-color: var(--border-glow);

  box-shadow: var(--shadow-glow);

}



.service-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, var(--primary-color) 0%, transparent 50%);

  opacity: 0;

  transition: var(--transition-smooth);

  pointer-events: none;

}



.service-card:hover::before {

  opacity: 0.05;

}



.service-icon {

  width: 64px;

  height: 64px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  color: white;

  margin-bottom: 1.5rem;

  transition: var(--transition-smooth);

  position: relative;

}



.service-card:hover .service-icon {

  box-shadow: var(--shadow-glow);

  transform: scale(1.1);

}



.service-icon::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 16px;

  opacity: 0.2;

  filter: blur(20px);

  z-index: -1;

  transition: var(--transition-smooth);

}



.service-card:hover .service-icon::after {

  opacity: 0.4;

}



.service-title {

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 1rem;

  color: var(--text-primary);

  transition: var(--transition-smooth);

}



.service-card:hover .service-title {

  color: var(--primary-color);

}



.service-description {

  color: var(--text-secondary);

  margin-bottom: 1.5rem;

  line-height: 1.6;

}



.service-features {

  list-style: none;

  margin-bottom: 1.5rem;

}



.service-features li {

  font-size: 14px;

  color: var(--text-secondary);

  margin-bottom: 0.5rem;

  position: relative;

  padding-left: 1rem;

}



.service-features li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 6px;

  height: 6px;

  background: var(--accent-color);

  border-radius: 50%;

}



.service-link {

  color: var(--primary-color);

  font-weight: 500;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  transition: var(--transition-smooth);

}



.service-card:hover .service-link {

  color: var(--secondary-color);

}



.service-link i {

  transition: var(--transition-smooth);

}



.service-card:hover .service-link i {

  transform: translateX(4px);

}



/* Counter Cards */

.counter-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 16px;

  padding: 2rem;

  text-align: center;

  height: 100%;

  transition: var(--transition-smooth);

  cursor: pointer;

}



.counter-card:hover {

  transform: translateY(-8px) scale(1.05);

  border-color: var(--border-glow);

  box-shadow: var(--shadow-glow);

}



.counter-icon {

  width: 64px;

  height: 64px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  color: white;

  margin: 0 auto 1rem;

  transition: var(--transition-smooth);

  position: relative;

}



.counter-card:hover .counter-icon {

  box-shadow: var(--shadow-glow);

  transform: scale(1.1);

}



.counter-icon::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 16px;

  opacity: 0.2;

  filter: blur(20px);

  z-index: -1;

  transition: var(--transition-smooth);

}



.counter-card:hover .counter-icon::after {

  opacity: 0.4;

}



.counter-number {

  font-size: clamp(2.5rem, 5vw, 4rem);

  font-weight: 700;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  display: inline-block;

  line-height: 1;

}



.counter-suffix {

  font-size: clamp(2.5rem, 5vw, 4rem);

  font-weight: 700;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  display: inline-block;

  line-height: 1;

}





.counter-label {

  font-size: 1.125rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  color: var(--text-primary);

  transition: var(--transition-smooth);

}



.counter-card:hover .counter-label {

  color: var(--primary-color);

}



.counter-description {

  color: var(--text-secondary);

  font-size: 14px;

}



.cta-text {

  font-size: 1.125rem;

  color: var(--text-secondary);

  margin-bottom: 2rem;

}



/* Industry Cards */

.industry-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 16px;

  padding: 1.5rem;

  height: 100%;

  transition: var(--transition-smooth);

  cursor: pointer;

  position: relative;

  overflow: hidden;

}



.industry-card:hover {

  transform: translateY(-8px) scale(1.05);

  border-color: var(--border-glow);

  box-shadow: var(--shadow-glow);

}



.industry-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, var(--primary-color) 0%, transparent 50%);

  opacity: 0;

  transition: var(--transition-smooth);

  pointer-events: none;

}



.industry-card:hover::before {

  opacity: 0.05;

}



.industry-icon {

    width: 56px;

    height: 56px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: white;

    margin-bottom: 1rem;

    transition: var(--transition-smooth);

    position: relative;

    background: #252525;

}

.industry-icon i {

    color: #d2d2d2;

}

/* .blue-gradient { background: linear-gradient(135deg, #3b82f6, #06b6d4); }

.red-gradient { background: linear-gradient(135deg, #ef4444, #ec4899); }

.green-gradient { background: linear-gradient(135deg, #10b981, #34d399); }

.orange-gradient { background: linear-gradient(135deg, #f59e0b, #f97316); }

.purple-gradient { background: linear-gradient(135deg, #8b5cf6, #a855f7); }

.indigo-gradient { background: linear-gradient(135deg, #6366f1, #3b82f6); }

.teal-gradient { background: linear-gradient(135deg, #14b8a6, #06b6d4); }

.pink-gradient { background: linear-gradient(135deg, #ec4899, #f472b6); }

.yellow-gradient {

    background: linear-gradient(135deg, #FF9800, #FFC107);

} */

.industry-card:hover .industry-icon {

  transform: scale(1.1);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

}



.industry-icon::after {

  content: '';

  position: absolute;

  inset: 0;

  background: inherit;

  border-radius: 12px;

  opacity: 0.2;

  filter: blur(16px);

  z-index: -1;

  transition: var(--transition-smooth);

}



.industry-card:hover .industry-icon::after {

  opacity: 0.4;

}



.industry-title {

  font-size: 1.125rem;

  font-weight: 600;

  margin-bottom: 0.75rem;

  color: var(--text-primary);

  transition: var(--transition-smooth);

}

.IndusTitle .gredent-color {

    -webkit-text-fill-color: transparent;

    background-image: linear-gradient(88deg, #fff, #bababa 31%, #a7a7a7);

    -webkit-background-clip: text;

    background-clip: text;

}

.industry-card:hover .industry-title {

  color: var(--primary-color);

}



.industry-description {

  color: var(--text-secondary);

  font-size: 14px;

  margin-bottom: 1rem;

  line-height: 1.5;

}



.industry-features {

  list-style: none;

}



.industry-features li {

  font-size: 12px;

  color: var(--text-muted);

  margin-bottom: 0.25rem;

  position: relative;

  padding-left: 0.75rem;

  transition: var(--transition-smooth);

}



.industry-features li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 4px;

  height: 4px;

  background: var(--accent-color);

  border-radius: 50%;

  transition: var(--transition-smooth);

}



.industry-card:hover .industry-features li::before {

  background: var(--primary-color);

}



.industry-cta-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 16px;

  padding: 2rem;

  text-align: center;

}



.cta-title {

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 1rem;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.cta-description {

  color: var(--text-secondary);

  margin-bottom: 1.5rem;

  line-height: 1.6;

}



/* AI Section */

.ai-badge {

  display: inline-flex;

  align-items: center;

  padding: 8px 16px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 50px;

  font-size: 12px;

  font-weight: 500;

  color: var(--text-secondary);

  margin-bottom: 2rem;

}



.ai-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 16px;

  padding: 2rem;

  height: 100%;

  transition: var(--transition-smooth);

  cursor: pointer;

}



.ai-card:hover {

  transform: translateY(-8px) scale(1.02);

  border-color: var(--border-glow);

  box-shadow: var(--shadow-glow);

}



.ai-icon {

  width: 64px;

  height: 64px;

  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  color: white;

  margin-bottom: 1.5rem;

  transition: var(--transition-smooth);

  position: relative;

}



.ai-card:hover .ai-icon {

  box-shadow: var(--shadow-glow);

  transform: scale(1.1);

}



.ai-icon::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));

  border-radius: 16px;

  opacity: 0.2;

  filter: blur(20px);

  z-index: -1;

  transition: var(--transition-smooth);

}



.ai-card:hover .ai-icon::after {

  opacity: 0.4;

}



.ai-title {

  font-size: 1.25rem;

  font-weight: 600;

  margin-bottom: 1rem;

  color: var(--text-primary);

  transition: var(--transition-smooth);

}



.ai-card:hover .ai-title {

  color: var(--primary-color);

}



.ai-description {

  color: var(--text-secondary);

  margin-bottom: 1.5rem;

  line-height: 1.6;

}



.ai-features {

  list-style: none;

}



.ai-features li {

  font-size: 14px;

  color: var(--text-secondary);

  margin-bottom: 0.5rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.ai-features li i {

  color: var(--accent-color);

  font-size: 12px;

}



.ai-tech-title {

  font-size: 1.75rem;

  font-weight: 600;

  margin-bottom: 2rem;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.ai-tech-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: 1rem;

  max-width: 800px;

  margin: 0 auto;

}



.ai-tech-item {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 12px;

  padding: 1rem;

  text-align: center;

  transition: var(--transition-smooth);

  cursor: pointer;

}



.ai-tech-item:hover {

  transform: scale(1.05);

  border-color: var(--border-glow);

}



.tech-logo {

  font-size: 2rem;

  margin-bottom: 0.5rem;

  transition: var(--transition-smooth);

}



.ai-tech-item:hover .tech-logo {

  transform: scale(1.1);

}



.tech-name {

  font-size: 14px;

  font-weight: 500;

  color: var(--text-secondary);

  transition: var(--transition-smooth);

}



.ai-tech-item:hover .tech-name {

  color: var(--text-primary);

}



.ai-process-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 24px;

  padding: 3rem;

}



.process-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 8px 16px;

  background: rgba(99, 102, 241, 0.2);

  border: 1px solid rgba(99, 102, 241, 0.3);

  border-radius: 50px;

  font-size: 12px;

  font-weight: 500;

  color: var(--primary-color);

  margin-bottom: 1.5rem;

}



.process-title {

  font-size: 2rem;

  font-weight: 600;

  margin-bottom: 1rem;

  background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.process-description {

  color: var(--text-secondary);

  margin-bottom: 2rem;

  line-height: 1.6;

}



.process-steps {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.process-step {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

}



.step-number {

  width: 48px;

  height: 48px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: 600;

  font-size: 14px;

  flex-shrink: 0;

}



.step-content h4 {

  font-size: 1.125rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  color: var(--text-primary);

}



.step-content p {

  color: var(--text-secondary);

  font-size: 14px;

}



/* Tech Section */

.tech-badge {

  display: inline-flex;

  align-items: center;

  padding: 8px 16px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 50px;

  font-size: 12px;

  font-weight: 500;

  color: var(--text-secondary);

  margin-bottom: 2rem;

}



.tech-tabs {

  max-width: 1200px;

  margin: 0 auto;

}



.tech-tabs .nav-pills {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 12px;

  padding: 8px;

}



.tech-tabs .nav-link {

  background: transparent;

  border: none;

  color: var(--text-secondary);

  padding: 12px 24px;

  border-radius: 8px;

  transition: var(--transition-smooth);

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-weight: 500;

}



.tech-tabs .nav-link:hover {

  color: var(--text-primary);

  background: rgba(255, 255, 255, 0.05);

}



.tech-tabs .nav-link.active {

  background: var(--primary-color);

  color: white;

}



.tech-category-header {

  text-align: center;

  margin-bottom: 2rem;

}



.tech-category-title {

  font-size: 1.75rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.tech-category-description {

  color: var(--text-secondary);

  max-width: 600px;

  margin: 0 auto;

}



.tech-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 12px;

  padding: 1.5rem;

  text-align: center;

  transition: var(--transition-smooth);

  cursor: pointer;

  height: 100%;

}



.tech-card:hover {

  transform: scale(1.05);

  border-color: var(--border-glow);

  box-shadow: var(--shadow-card);

}



.tech-card .tech-logo {

  font-size: 2.5rem;

  margin-bottom: 1rem;

  transition: var(--transition-smooth);

}



.tech-card:hover .tech-logo {

  transform: scale(1.1);

}



.tech-card .tech-name {

  font-size: 1.125rem;

  font-weight: 600;

  margin-bottom: 0.5rem;

  color: var(--text-primary);

  transition: var(--transition-smooth);

}



.tech-card:hover .tech-name {

  color: var(--primary-color);

}



.tech-card .tech-description {

  color: var(--text-secondary);

  font-size: 14px;

}



.security-card {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

  border-radius: 24px;

  padding: 3rem;

  margin-top: 3rem;

}



.security-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 8px 16px;

  background: rgba(6, 182, 212, 0.2);

  border: 1px solid rgba(6, 182, 212, 0.3);

  border-radius: 50px;

  font-size: 12px;

  font-weight: 500;

  color: var(--accent-color);

  margin-bottom: 1.5rem;

}



.security-title {

  font-size: 2rem;

  font-weight: 600;

  margin-bottom: 1rem;

  background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.security-description {

  color: var(--text-secondary);

  line-height: 1.6;

}



.security-features {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

}



.security-feature {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 1rem;

}



.feature-icon {

  width: 48px;

  height: 48px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 20px;

  margin-bottom: 0.75rem;

}



.feature-content h4 {

  font-size: 1rem;

  font-weight: 600;

  margin-bottom: 0.25rem;

  color: var(--text-primary);

}



.feature-content p {

  color: var(--text-secondary);

  font-size: 14px;

}



/* Button Styles */

.btn {

  font-weight: 500;

  border-radius: 8px;

  transition: var(--transition-smooth);

  border: 1px solid transparent;

}



.btn-primary {

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border: none;

  color: white;

  box-shadow: var(--shadow-button);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-glow);

  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));

}



.btn-lg {

  padding: 12px 32px;

  font-size: 1rem;

}



/* Responsive Design */

@media (max-width: 1200px) {

  .floating-card {

    width: 180px;

    height: 120px;

    padding: 0.75rem;

  }

  

  .time-zone {

    right: 12rem;

  }

}



@media (max-width: 992px) {

  .floating-card,

  .time-zone,

  .floating-icon {

    display: none;

  }

  

  .hero-title {

    font-size: clamp(2.5rem, 6vw, 5rem);

  }

  

  .section-title {

    font-size: clamp(2rem, 4vw, 3rem);

  }

  

  .hero-buttons {

    flex-direction: column;

    align-items: stretch;

  }

  

  .hero-buttons .btn {

    margin-bottom: 1rem;

  }

  

  .security-features {

    grid-template-columns: 1fr;

  }

  

  .ai-tech-grid {

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  }

}



@media (max-width: 768px) {

  .hero-section,

  .services-section,

  .counter-section,

  .industries-section,

  .ai-section,

  .tech-section {

    padding: 4rem 0;

  }

  

  .ai-process-card,

  .security-card {

    padding: 2rem;

  }

  

  .tech-tabs .nav-link {

    font-size: 14px;

    padding: 8px 12px;

  }

  

  .tech-tabs .nav-link span {

    display: none;

  }

  

  .hero-tags {

    flex-wrap: wrap;

    justify-content: center;

    font-size: 12px;

  }

  

  .process-steps {

    gap: 1rem;

  }

  

  .process-step {

    flex-direction: column;

    text-align: center;

  }

  

  .step-number {

    margin: 0 auto;

  }

}



@media (max-width: 576px) {

  .container {

    padding: 0 1rem;

  }

  

  .service-card,

  .counter-card,

  .industry-card,

  .ai-card {

    padding: 1.5rem;

  }

  

  .hero-buttons .btn {

    padding: 12px 24px;

  }

  

  .counter-number,

  .counter-suffix {

    font-size: clamp(2rem, 4vw, 3rem);

  }

}



/* Loading Animation */

@keyframes pulse {

  0%, 100% {

    opacity: 1;

  }

  50% {

    opacity: 0.5;

  }

}



.loading {

  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



/* Utility Classes */

.text-gradient {

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.bg-glass {

  background: var(--bg-card);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border-primary);

}



.border-glow {

  border-color: var(--border-glow);

  box-shadow: var(--shadow-glow);

}



/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}



/* Focus Styles */

.btn:focus,

.nav-link:focus,

.service-card:focus,

.counter-card:focus,

.industry-card:focus,

.ai-card:focus,

.tech-card:focus {

  outline: 2px solid var(--primary-color);

  outline-offset: 2px;

}



/* Features Cards Section */

.features-cards-section {

  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);

  position: relative;

  overflow: hidden;

}



.features-cards-section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

    background: radial-gradient(circle at 20% 20%, rgb(33 150 243 / 15%) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgb(33 150 243 / 15%) 0%, transparent 50%);

  pointer-events: none;

}



/* Feature Cards */

.feature-card {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 20px;

  padding: 2rem;

  height: 100%;

  position: relative;

  overflow: hidden;

  transition: var(--transition-smooth);

  backdrop-filter: blur(10px);

}



.feature-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: radial-gradient(600px circle at var(--x, 0) var(--y, 0), rgba(255, 255, 255, 0.06), transparent 40%);

  opacity: 0;

  transition: opacity 0.3s ease;

  pointer-events: none;

}



.feature-card:hover::before {

  opacity: 1;

}



.feature-card:hover {

  transform: translateY(-8px);

  border-color: rgba(99, 102, 241, 0.3);

  box-shadow: 

    0 20px 40px rgba(0, 0, 0, 0.3),

    0 0 30px rgba(99, 102, 241, 0.2);

}



/* Glow Card Effect */

.glow-card {

  position: relative;

}



.glow-card::after {

  content: '';

  position: absolute;

  top: -2px;

  left: -2px;

  right: -2px;

  bottom: -2px;

  background: linear-gradient(45deg, 

    #6366f1, #8b5cf6, #06b6d4, #10b981, 

    #6366f1, #8b5cf6, #06b6d4, #10b981);

  border-radius: 22px;

  z-index: -1;

  opacity: 0;

  transition: opacity 0.3s ease;

  background-size: 400% 400%;

  animation: gradient-shift 3s ease infinite;

}



.glow-card:hover::after {

  opacity: 0.7;

}



@keyframes gradient-shift {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



/* Feature Icon Wrapper */

.feature-icon-wrapper {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem;

}



.feature-icon {

  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 15px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  color: white;

  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);

}



.feature-badge {

  background: rgba(99, 102, 241, 0.2);

  color: var(--primary-color);

  padding: 0.25rem 0.75rem;

  border-radius: 20px;

  font-size: 0.7rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  border: 1px solid rgba(99, 102, 241, 0.3);

}



.feature-card h4 {

  color: var(--text-primary);

  font-size: 1.25rem;

  font-weight: 600;

  margin-bottom: 1rem;

}



.feature-card p {

    color: var(--text-secondary);

    font-size: 1rem;

    line-height: 1.6;

    margin-bottom: 1.5rem;

}



/* Feature Stats */

.feature-stats {

  margin-bottom: 1.5rem;

}



.stat-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0.75rem;

}



.stat-label {

  font-size: 0.8rem;

  color: var(--text-muted);

  flex: 1;

}



.stat-bar {

  width: 60px;

  height: 4px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 2px;

  margin: 0 0.75rem;

  overflow: hidden;

}



.stat-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));

  border-radius: 2px;

  transition: width 0.6s ease;

}



.stat-value {

  font-size: 0.8rem;

  color: var(--text-primary);

  font-weight: 600;

  min-width: 30px;

  text-align: right;

}



/* Feature Metrics */

.feature-metrics {

  display: flex;

  justify-content: space-between;

  margin-bottom: 1.5rem;

  padding: 1rem;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.metric {

  text-align: center;

}



.metric-value {

  display: block;

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--primary-color);

  line-height: 1;

}



.metric-label {

  font-size: 0.7rem;

  color: var(--text-muted);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



/* Performance Chart */

.performance-chart {

  margin-bottom: 1.5rem;

}



.chart-container {

  display: flex;

  gap: 0.75rem;

  padding: 1rem;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.chart-bar {

  flex: 1;

  height: 60px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 8px;

  position: relative;

  overflow: hidden;

}



.chart-bar::before {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: var(--percentage, 0%);

  background: linear-gradient(0deg, var(--primary-color), var(--accent-color));

  transition: height 0.6s ease;

}



.chart-label {

  position: absolute;

  bottom: 0.25rem;

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.7rem;

  color: var(--text-primary);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



/* Cloud Features */

.cloud-features {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-bottom: 1.5rem;

}



.cloud-feature {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.5rem 0.75rem;

  background: rgba(99, 102, 241, 0.1);

  border: 1px solid rgba(99, 102, 241, 0.2);

  border-radius: 20px;

  font-size: 0.8rem;

  color: var(--text-secondary);

}



.cloud-feature i {

  color: var(--primary-color);

  font-size: 0.9rem;

}



/* Feature Tech Icons */

.feature-icons {

  display: flex;

  gap: 0.75rem;

  align-items: center;

}



.feature-tech-icon {

  width: 32px;

  height: 32px;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-secondary);

  font-size: 0.9rem;

  transition: var(--transition-smooth);

}



.feature-tech-icon:hover {

  background: rgba(99, 102, 241, 0.2);

  border-color: rgba(99, 102, 241, 0.4);

  color: var(--primary-color);

  transform: scale(1.1);

}



/* High Contrast Mode Support */

@media (prefers-contrast: high) {

  :root {

    --border-primary: rgba(255, 255, 255, 0.5);

    --text-secondary: rgba(255, 255, 255, 0.9);

    --text-muted: rgba(255, 255, 255, 0.8);

  }

}



/* Responsive Design for Feature Cards */

@media (max-width: 768px) {

  .feature-card {

    padding: 1.5rem;

  }

  

  .feature-metrics {

    flex-direction: column;

    gap: 1rem;

  }

  

  .metric {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  

  .metric-value {

    font-size: 1rem;

  }

  

  .chart-container {

    gap: 0.5rem;

  }

  

  .feature-icons {

    justify-content: center;

  }

}



/* Strategy Analysis Section */

.strategy-section {

  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);

  position: relative;

  overflow: hidden;

  min-height: 100vh;

  display: flex;

  align-items: center;

}



.strategy-section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),

    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);

  pointer-events: none;

}



.strategy-content {

  padding: 2rem 0;

}



.strategy-badge {

  color: var(--text-muted);

  font-size: 0.875rem;

  font-weight: 500;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 1.5rem;

}



.strategy-title {

  font-size: 3.5rem;

  font-weight: 300;

  line-height: 1.1;

  color: var(--text-primary);

  margin-bottom: 2rem;

}



.strategy-description {

  font-size: 1.125rem;

  line-height: 1.8;

  color: var(--text-secondary);

  margin-bottom: 2.5rem;

  max-width: 90%;

}



.strategy-button .btn {

  padding: 1rem 2.5rem;

  font-size: 1rem;

  font-weight: 500;

  border-radius: 8px;

  text-transform: uppercase;

  letter-spacing: 1px;

  transition: var(--transition-smooth);

}



/* SWOT Diagram */

.swot-diagram {

  position: relative;

  height: 600px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.swot-container {

  position: relative;

  width: 500px;

  height: 500px;

}



/* Center Circle */

.swot-center {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 10;

}



.center-circle {

  width: 160px;

  height: 160px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);

  border: 3px solid rgba(255, 255, 255, 0.1);

}



.center-circle h3 {

  color: white;

  font-size: 1rem;

  font-weight: 600;

  line-height: 1.3;

  text-transform: uppercase;

  letter-spacing: 1px;

}



/* SWOT Elements */

.swot-element {

  position: absolute;

  width: 240px;

  text-align: center;

}



.swot-element[data-position="top"] {

  top: 0;

  left: 50%;

  transform: translateX(-50%);

}



.swot-element[data-position="right"] {

  top: 50%;

  right: 0;

  transform: translateY(-50%);

}



.swot-element[data-position="bottom"] {

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

}



.swot-element[data-position="left"] {

  top: 50%;

  left: 0;

  transform: translateY(-50%);

}



.swot-circle {

  width: 80px;

  height: 80px;

  background: rgba(255, 255, 255, 0.05);

  border: 2px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1rem;

  backdrop-filter: blur(10px);

  transition: var(--transition-smooth);

}



.swot-circle:hover {

  transform: scale(1.1);

  border-color: var(--primary-color);

  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);

}



.swot-icon {

  font-size: 1.5rem;

  color: var(--primary-color);

}



.swot-content h4 {

  color: var(--text-primary);

  font-size: 1.25rem;

  font-weight: 600;

  margin-bottom: 0.75rem;

}



.swot-content p {

  color: var(--text-secondary);

  font-size: 0.875rem;

  line-height: 1.6;

  margin-bottom: 1rem;

}



.swot-badge {

  display: inline-block;

  background: rgba(99, 102, 241, 0.1);

  border: 1px solid rgba(99, 102, 241, 0.3);

  color: var(--primary-color);

  padding: 0.25rem 0.75rem;

  border-radius: 20px;

  font-size: 0.75rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



/* Connecting Lines */

.connecting-lines {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  pointer-events: none;

}



.line {

  position: absolute;

  background: linear-gradient(90deg, 

    rgba(99, 102, 241, 0.6) 0%, 

    rgba(6, 182, 212, 0.6) 50%, 

    rgba(99, 102, 241, 0.6) 100%);

  opacity: 0.3;

}



.line-vertical {

  top: 0;

  left: 50%;

  width: 2px;

  height: 100%;

  transform: translateX(-50%);

}



.line-horizontal {

  top: 50%;

  left: 0;

  width: 100%;

  height: 2px;

  transform: translateY(-50%);

}



.line-diagonal-1 {

  top: 50%;

  left: 50%;

  width: 2px;

  height: 70%;

  transform: translate(-50%, -50%) rotate(45deg);

  transform-origin: center;

}



.line-diagonal-2 {

  top: 50%;

  left: 50%;

  width: 2px;

  height: 70%;

  transform: translate(-50%, -50%) rotate(-45deg);

  transform-origin: center;

}



/* Color Variations for SWOT Elements */

.swot-strengths .swot-circle {

  border-color: rgba(16, 185, 129, 0.4);

}



.swot-strengths .swot-icon {

  color: var(--success-color);

}



.swot-strengths .swot-badge {

  background: rgba(16, 185, 129, 0.1);

  border-color: rgba(16, 185, 129, 0.3);

  color: var(--success-color);

}



.swot-weaknesses .swot-circle {

  border-color: rgba(239, 68, 68, 0.4);

}



.swot-weaknesses .swot-icon {

  color: var(--error-color);

}



.swot-weaknesses .swot-badge {

  background: rgba(239, 68, 68, 0.1);

  border-color: rgba(239, 68, 68, 0.3);

  color: var(--error-color);

}



.swot-opportunities .swot-circle {

  border-color: rgba(6, 182, 212, 0.4);

}



.swot-opportunities .swot-icon {

  color: var(--accent-color);

}



.swot-opportunities .swot-badge {

  background: rgba(6, 182, 212, 0.1);

  border-color: rgba(6, 182, 212, 0.3);

  color: var(--accent-color);

}



.swot-threats .swot-circle {

  border-color: rgba(245, 158, 11, 0.4);

}



.swot-threats .swot-icon {

  color: var(--warning-color);

}



.swot-threats .swot-badge {

  background: rgba(245, 158, 11, 0.1);

  border-color: rgba(245, 158, 11, 0.3);

  color: var(--warning-color);

}



/* Responsive Design for Strategy Section */

@media (max-width: 992px) {

  .strategy-title {

    font-size: 2.5rem;

  }

  

  .swot-container {

    width: 400px;

    height: 400px;

  }

  

  .center-circle {

    width: 120px;

    height: 120px;

  }

  

  .center-circle h3 {

    font-size: 0.875rem;

  }

  

  .swot-element {

    width: 200px;

  }

}



@media (max-width: 768px) {

  .strategy-section {

    min-height: auto;

    padding: 4rem 0;

  }

  

  .strategy-title {

    font-size: 2rem;

  }

  

  .strategy-description {

    max-width: 100%;

  }

  

  .swot-diagram {

    height: 500px;

    margin-top: 3rem;

  }

  

  .swot-container {

    width: 320px;

    height: 320px;

  }

  

  .center-circle {

    width: 100px;

    height: 100px;

  }

  

  .center-circle h3 {

    font-size: 0.75rem;

  }

  

  .swot-element {

    width: 160px;

  }

  

  .swot-circle {

    width: 60px;

    height: 60px;

  }

  

  .swot-icon {

    font-size: 1.25rem;

  }

  

  .swot-content h4 {

    font-size: 1rem;

  }

  

  .swot-content p {

    font-size: 0.8rem;

  }

}



/* iOS Development Section */

.ios-development-section {

  padding: 120px 0;

  background: linear-gradient(135deg, #0a0b1e 0%, #1a1b3e 50%, #2d2e6e 100%);

  position: relative;

  overflow: hidden;

}



.ios-bg-animation {

  position: absolute;

  inset: 0;

  overflow: hidden;

}



.ios-badge {

  display: inline-flex;

  align-items: center;

  padding: 10px 20px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 50px;

  font-size: 14px;

  font-weight: 500;

  color: var(--text-secondary);

  margin-bottom: 2rem;

}



.ios-title {

  font-size: clamp(2.5rem, 6vw, 4rem);

  font-weight: 300;

  line-height: 1.1;

  margin-bottom: 1.5rem;

  color: var(--text-primary);

}



.ios-subtitle {

  font-size: clamp(1.125rem, 2vw, 1.25rem);

  font-weight: 400;

  color: var(--text-secondary);

  margin-bottom: 3rem;

  line-height: 1.4;

}



.ios-features {

  margin-bottom: 3rem;

}



.feature-item {

  display: flex;

  align-items: center;

  margin-bottom: 1rem;

  color: var(--text-secondary);

}



.feature-item i {

  color: var(--success-color);

  margin-right: 1rem;

  font-size: 16px;

}



.ios-cta {

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border: none;

  padding: 16px 32px;

  border-radius: 50px;

  font-weight: 600;

  box-shadow: var(--shadow-button);

  transition: var(--transition-smooth);

}



.ios-cta:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);

}



/* iOS Mockups */

.ios-mockups {

  position: relative;

  height: 600px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.iphone-mockup {

  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);

  border-radius: 40px;

  padding: 8px;

  box-shadow: 

    0 20px 60px rgba(0, 0, 0, 0.4),

    inset 0 1px 2px rgba(255, 255, 255, 0.1);

  position: relative;

}



.iphone-main {

  width: 280px;

  height: 580px;

  z-index: 2;

}



.iphone-screen {

  background: linear-gradient(180deg, #000 0%, #1a1a1a 100%);

  border-radius: 35px;

  height: 100%;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  position: relative;

}



/* Screen Header */

.screen-header {

  padding: 15px 20px 0;

}



.status-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

  font-size: 14px;

  font-weight: 600;

  color: white;

}



.time {

  font-weight: 700;

}



.indicators {

  display: flex;

  gap: 6px;

}



.indicators i {

  font-size: 12px;

}



.app-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}



.app-title {

  font-size: 20px;

  font-weight: 700;

  color: white;

}



.header-controls {

  display: flex;

  gap: 15px;

}



.header-controls i {

  font-size: 18px;

  color: rgba(255, 255, 255, 0.7);

}



/* Screen Content */

.screen-content {

  flex: 1;

  padding: 0 20px;

}



.search-section {

  margin-bottom: 30px;

}



.search-box {

  background: rgba(255, 255, 255, 0.1);

  border-radius: 25px;

  padding: 15px 20px;

  display: flex;

  align-items: center;

  gap: 15px;

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.search-box i {

  color: var(--primary-color);

  font-size: 16px;

}



.search-box span {

  flex: 1;

  color: rgba(255, 255, 255, 0.7);

  font-size: 14px;

}



.search-btn {

  background: var(--primary-color);

  border-radius: 50%;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.search-btn i {

  color: white;

  font-size: 12px;

}



.popular-section h3 {

  color: white;

  font-size: 18px;

  font-weight: 600;

  margin-bottom: 15px;

}



.destination-card {

  background: rgba(255, 255, 255, 0.05);

  border-radius: 15px;

  padding: 15px;

  display: flex;

  gap: 15px;

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.destination-image {

  width: 60px;

  height: 60px;

  border-radius: 10px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}



.destination-info h4 {

  color: white;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 5px;

}



.destination-info p {

  color: rgba(255, 255, 255, 0.7);

  font-size: 14px;

}



/* Tab Bar */

.tab-bar {

  display: flex;

  justify-content: space-around;

  padding: 15px 20px 25px;

  background: rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(20px);

}



.tab-item {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: 12px;

  transition: var(--transition-smooth);

}



.tab-item.active {

  background: var(--primary-color);

}



.tab-item i {

  font-size: 16px;

  color: rgba(255, 255, 255, 0.7);

}



.tab-item.active i {

  color: white;

}



/* Floating UI Elements */

.floating-ui {

  position: absolute;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(20px);

  border-radius: 15px;

  padding: 15px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  border: 1px solid rgba(255, 255, 255, 0.3);

  animation: floatUI 6s ease-in-out infinite;

}



.location-card {

  top: 50px;

  left: -50px;

  display: flex;

  align-items: center;

  gap: 12px;

  animation-delay: 0s;

}



.booking-card {

  top: 200px;

  right: -60px;

  min-width: 200px;

  animation-delay: 2s;

}



.notification-card {

  bottom: 150px;

  left: -40px;

  display: flex;

  align-items: center;

  gap: 12px;

  animation-delay: 4s;

}



.ui-icon {

  width: 35px;

  height: 35px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}



.ui-icon i {

  color: white;

  font-size: 14px;

}



.notification-icon {

  background: linear-gradient(135deg, var(--warning-color), #ff8c00);

}



.ui-content {

  flex: 1;

}



.ui-label {

  display: block;

  font-size: 12px;

  font-weight: 600;

  color: #333;

  margin-bottom: 2px;

}



.ui-value {

  display: block;

  font-size: 11px;

  color: #666;

}



.ui-time {

  display: block;

  font-size: 12px;

  color: #666;

  margin-bottom: 8px;

}



.ui-action {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  font-weight: 600;

  color: var(--primary-color);

}



.ui-action i {

  font-size: 10px;

}



/* Navigation Icons */

.nav-icons {

  position: absolute;

  top: 80px;

  left: -80px;

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.nav-icon {

  width: 40px;

  height: 40px;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  transition: var(--transition-smooth);

  animation: floatNav 4s ease-in-out infinite;

}



.nav-icon:nth-child(1) { animation-delay: 0s; }

.nav-icon:nth-child(2) { animation-delay: 0.5s; }

.nav-icon:nth-child(3) { animation-delay: 1s; }

.nav-icon:nth-child(4) { animation-delay: 1.5s; }

.nav-icon:nth-child(5) { animation-delay: 2s; }



.nav-icon i {

  color: #333;

  font-size: 14px;

}



.nav-icon:hover {

  transform: scale(1.1);

  background: var(--primary-color);

}



.nav-icon:hover i {

  color: white;

}



@keyframes floatUI {

  0%, 100% {

    transform: translateY(0px);

  }

  50% {

    transform: translateY(-10px);

  }

}



@keyframes floatNav {

  0%, 100% {

    transform: translateX(0px);

  }

  50% {

    transform: translateX(5px);

  }

}



/* Responsive Design */

@media (max-width: 768px) {

  .ios-development-section {

    padding: 80px 0;

  }

  

  .ios-mockups {

    height: 400px;

    margin-top: 50px;

  }

  

  .iphone-main {

    width: 220px;

    height: 450px;

  }

  

  .floating-ui,

  .nav-icons {

    display: none;

  }

  

  .ios-title {

    text-align: center;

  }

  

  .ios-subtitle {

    text-align: center;

  }

}







/*******************************

About US Section css Start Here

******************************/

.section_about {

    background: #0f0f0f;

    padding: 60px 0 60px;

}

.section_about .centerTitleSection {

    width: 90%;

    text-align: center;

    margin: 0 auto;

    position: relative;

    padding-top: 60px;

}

.section_about .centerTitleSection::before{

  background: linear-gradient(270deg, #3d354e00 28.87%, #3d354e 45.39%, #3d354e 53.54%, #3d354e00 70.06%);

    top: 0;

    content: "";

    height: 1px;

    left: 0;

    position: absolute;

    width: 100%;

}

.inner-section-title {

    color: #fff;

    font-size: 65px;

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -0.015em;

    margin-bottom: 0;

}

video.videoSection {

    height: 400px;

    border-radius: 20px;

    border: 1px solid #464646;

    width: 100%;

    object-fit: cover;

}

.AboutPara {

    color: #9d9d9e;

    font-size: 17px;

    line-height: 1.381002381;

    letter-spacing: .011em;

    padding-top: 25px;

    width: 90%;

    margin: 0 auto;

}



.counterCard {

    grid-column-gap: 60px;

    grid-row-gap: 5px;

    /* border: 1.63px solid #112845;

    background-color: #0f0f0f; */

    border-radius: 16px;

    flex-flow: column;

    padding: 20px;

    display: flex;

    text-align: center;

    position: relative;

}

.counterCard::after {

    content: '';

    background: linear-gradient(180deg, rgba(255, 0, 208, 0) 0%, #2196F3 50.12392187964707%, rgba(255, 0, 208, 0) 100%);

    bottom: 0;

    flex: none;

    left: calc(106% - 1px / 2);

    overflow: hidden;

    position: absolute;

    top: 0;

    width: 1px;

    z-index: 1;

}

.CounterCardWrapper .row .col-lg-3:last-child .counterCard::after{

  display: none;

}



.counterCard h6 {

    -webkit-text-fill-color: transparent;

    background-image: linear-gradient(#abc4f5, #d1d7e4);

    -webkit-background-clip: text;

    background-clip: text;

    margin-bottom: 0;

    font-size: 3rem;

    font-weight: 600;

    /* background-image: linear-gradient(88deg, #fff, #dae9ff 31%, #006efc); */

}



.CounterCardWrapper {

    width: 85%;

    margin: 50px auto 0;

}

/*******************************

About US Section css END Here

******************************/



/******************************

Services Section CSS Start Here

*******************************/

.features-cards-section {

    padding: 60px 0 50px;

}

.features-cards-section {

    background: linear-gradient(180deg, #0f0f0f 0%, #0f0f0f 100%);

    position: relative;

    overflow: hidden;

}

.features-cards-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

      background: radial-gradient(circle at 20% 20%, rgba(33, 46, 243, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(33, 125, 243, 0.15) 0%, transparent 50%);

    pointer-events: none;

}

.LeftSectionTitle {

    position: relative;

    margin-bottom: 50px;

    width: 70%;

}

.hythereTitle h2 {

    color: #fff !important;

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1.4;

    color: #fff;

    margin-bottom: 10px;

}

.serviceSubtitle {

    font-size: 50px;

    font-weight: 500;

    margin-bottom: 0;

}

.quote-wraper {

    display: flex;

    margin-top: 21px;

}

.quote-wraper_line-fill {

    background-color: #fff;

   width: 1px;
  height: 100%;

}

.quote-wraper_line {

 width: 1px;
  margin-left: -1px;
  margin-right: 1rem;
  height: auto;

}

.serviceTitlePara {

    margin-bottom: 0;

font-size: 0.9rem;

}

.ServiceCardWrapper .col-lg-4 {

    margin-bottom: 25px;

}

.glow-card::after {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    background: linear-gradient(45deg, #87caff, #182936, #192a37, #192c3b, #18232c, #18242e, #253e52, #192b39);

    border-radius: 22px;

    z-index: -1;

    opacity: 0;

    transition: opacity 0.3s ease;

    background-size: 400% 400%;

    animation: gradient-shift 3s ease infinite;

}

.feature-icon {

    width: 60px;

    height: 60px;

   background-image: linear-gradient(to bottom,#514f57,#292630);

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: white;

    box-shadow: 0 8px 20px rgb(63 63 63 / 30%);

}

.feature-card:hover {

    transform: translateY(-8px);

    border-color: rgb(33 150 243 / 32%);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),

    0 0 30px rgba(99, 102, 241, 0.2);

}

.feature-icon-wrapper {

    display: flex;

    align-items: self-start;

    justify-content: space-between;

    margin-bottom: 1.5rem;

}

.feature-badge {

    background: rgb(130 130 130 / 20%);

    color: #bebebe;

    padding: 0.25rem 0.75rem;

    border-radius: 20px;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border: 1px solid rgb(194 194 194 / 30%);

}

/******************************

Services Section CSS END Here

*******************************/



/******************************

Why Choose Section CSS Start Here

*******************************/

.WhyChooseTechMave {

    margin: 0;

    background-color: #0f0f0f;

    color: #fff;

    padding: 70px 0;

}

.WhyChooseTechMave h1 {

    font-size: 2.5rem;

    font-weight: 400;

    margin-bottom: 20px;

    line-height: 1.4;

    color: #fff;

}

    .WhyChooseTechMave p {

      font-size: 1rem;

      color: #ccc;

      margin-bottom: 40px;

      max-width: 900px;

    }

    /* .WhyChooseTechMave .grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

      gap: 40px;

    } */

     :root{

    --tw-gradient-to: rgba(57, 60, 69, 0) var(--tw-gradient-to-position);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

      --tw-gradient-to: #1a1d24 var(--tw-gradient-to-position);

          --tw-gradient-from: #393c45 var(--tw-gradient-from-position);

     }

    .WhyChooseTechMave .card {

      background: transparent;

      overflow: hidden;

      position: relative;

      width: 100%;

      height: 100%;

      

   

         

    }

    .WhyChooseTechMave .card h2 {

      font-size: 2rem;

      color: #3b82f6; /* blue highlight */

      margin: 0 0 10px 0;

    }

    .WhyChooseTechMave .card h3 {

        font-size: 1.2rem;

        margin: 0 0 10px 0;

        font-weight: bold;

        color: #fff;

    }

    .WhyChooseTechMave .card p {

      color: #ccc;

      font-size: 0.95rem;

      line-height: 1.5;

    }

 .WhyChooseTechMave .cta {

    margin-top: 60px;

    padding: 20px;

    background: #202020;

    border-radius: 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    border: 1px solid #3a3a3a;

    backdrop-filter: blur(35px);

}

  .WhyChooseTechMave .cta h2 {

    font-size: 1.2rem;

    margin: 0;

    color: #fff;

}

    /* .WhyChooseTechMave .cta button {

      background: #3b82f6;

      color: #fff;

      border: none;

      padding: 12px 24px;

      border-radius: 6px;

      font-size: 1rem;

      cursor: pointer;

    } */

    /* .WhyChooseTechMave .cta button:hover {

      background: #2563eb;

    } */

.WhyCooseContentWrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 60px;

}

.whyChoseTitle {

    width: 50%;

}

.whyChosepara {

    width: 40%;

}





/******************************

Why Choose Section CSS END Here

*******************************/







/******************************

IndustriesServe Section CSS Start Here

*******************************/

section.IndustriesServe {

    background: #0f0f0f;

    padding: 70px 0 60px;

    /* position: relative; */

}





section.IndustriesServe  .centerTitleSection {

    width: 90%;

    text-align: center;

    margin: 0 auto;

    position: relative;

    padding-top: 80px;

    margin-bottom: 60px;

}

section.IndustriesServe  .centerTitleSection::before {

    background: linear-gradient(270deg, #3d354e00 28.87%, #3d354e 45.39%, #3d354e 53.54%, #3d354e00 70.06%);

    top: 0;

    content: "";

    height: 1px;

    left: 0;

    position: absolute;

    width: 100%;

}

.indus-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, #656565, #2a2c2d);

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: white;

    box-shadow: 0 8px 20px rgb(63 63 63 / 30%);

}

.indus-badge {

    background: rgb(130 130 130 / 20%);

    color: #bebebe;

    padding: 0.25rem 0.75rem;

    border-radius: 20px;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border: 1px solid rgb(194 194 194 / 30%);

}

.IndusWrapper {

    display: flex;

    align-items: self-start;

    justify-content: space-between;

    margin-bottom: 20px;

}

h4.IndusTitle {

    color: #fff;

    margin-bottom: 15px;

    font-size: 22px;

}

.industry-features {

    list-style: none;

    padding: 0;

}

.industry-features li {

    font-size: 14px;

    color: var(--text-muted);

    margin-bottom: 0.25rem;

    position: relative;

    padding-left: 0.75rem;

    transition: var(--transition-smooth);

    font-weight: 400;

}

/* Root wrapper */

.pricing {

    position: relative;

    margin-bottom: 25px;

    transition: 0.2s all;

}

.pricing:hover {

    transform: scale(1.05);

}

/* Popular badge */

.pricing-badge {

  position: absolute;

  top: -0.5rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  height: 1.25rem;

  display: flex;

  align-items: center;

  padding: 0 0.625rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-size: 0.75rem;

  font-weight: 600;

  color: #eef2ff;

  background-color: #6366f1;

  border-radius: 9999px;

  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

}



/* Outer gradient shell (gradient border via padding:1px) */

.pricing .card-shell {

    position: relative;

    overflow: hidden;

    width: 100%;

    height: 365px;

    padding: 1px;

    border-radius: 1.5rem;

    background-image: linear-gradient(to bottom, #0f0f0f, #0f0f0f);

}

/* @media (min-width: 1024px) {

  .pricing .card-shell { border-radius: 2.5rem; }

} */

/* Dark: gradient */

.pricing .dark .card-shell {

  background-image: linear-gradient(to bottom, #393C45, #1A1D24);

}



/* Blurred colored blob in the shell */

.pricing .shell-blob {

  position: absolute;

  width: 50%;

  height: 8rem;

  right: -2rem;

  top: -4rem;

  background-color: #6366f1;

  filter: blur(64px);

  opacity: 0.25;

}

.pricing .dark .shell-blob {

  right: auto;

  left: -2rem;

  background-color: #ffffff;

}



/* Spinning blurred border overlay */

.pricing .spinner {

  position: absolute;

  inset: 0;

  border: 1px solid #ef4444; /* red-500 */

  filter: blur(64px);

  animation: spin-slow 8s linear infinite;

}

@keyframes spin-slow {

  from { transform: rotate(0); }

  to   { transform: rotate(360deg); }

}

.pricing .spinner-inner {

  position: absolute;

  height: 50%;

  width: 50%;

  right: -25%;

  bottom: 0;

  background-color: #6366f1;

}

.pricing .dark .spinner-inner {

  background-color: #818cf8; /* indigo-400 */

}



/* Inner card panel */

.pricing .card {

    position: relative;

    width: 100%;

    height: 100%;

    border-radius: 23px;

    background: #181818;

    padding: 2rem 1.5rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-start;

}





.pricing .dark .card {

  background: #101318;

}



/* Top glow */

.pricing .card-glow {

    position: absolute;

    left: 3rem;

    right: 3rem;

    height: 3rem;

    top: -1.5rem;

    background: #6366f100;

    filter: blur(64px);

    opacity: 0.7;

    transition: opacity 300ms;

    transition: 0.3s all;

}

.pricing .card:hover .card-glow {

    opacity: 0.9;

    background: #2196F3;

}



/* Content typography */

.pricing .card-title {

  color: #000;

  font-weight: 800;

  line-height: 1.25;

  font-size: 1.5rem;                 /* text-2xl */

}

@media (min-width: 1024px) {

  .pricing .card-title { font-size: 1.875rem; } /* lg:text-3xl */

}

.pricing .dark .card-title { color: #fff; }



.pricing .card-desc {

  margin-top: 0.75rem;

  color: #475569;                    /* slate-600 */

  line-height: 1.625;

  font-size: 1rem;

}

.pricing .dark .card-desc { color: #cbd5e1; } /* slate-300 */











@keyframes spin {

  100% {

    transform: rotate(1turn);

}

}



.feature-dot {

    background-color: #2196f312;

    border-radius: 100%;

    width: 20px;

    height: 19px;

    position: absolute;

    inset: auto auto 24px 24px;

    z-index: 1;

}

.feature-dot._2 {

    inset: 24px 24px auto auto;

}



.SecCenterHEading {

    grid-column-gap: .625em;

    grid-row-gap: .625em;

    flex-flow: column;

    justify-content: center;

    align-items: center;

    max-width: 70%;

    display: flex;

    margin: 0 auto 50px;

}

.SecCenterHEading h2 {

    color: #ffffff;

    margin-top: 0;

    margin-bottom: 0;

    text-align: center;

    padding-bottom: 8px;

    line-height: 100%;

   font-size: 5em;

    font-weight: 700;

    line-height: 100%;

}

.SecCenterHEading p {

    color: #8d8d8d;

    margin-bottom: 0;

    font-size: 21px;

    line-height: 1.3;

    text-align: center;

    margin-top: 0px;

    margin-bottom: 0;

}





 .industry-card {

        transition: all 0.5s ease-in-out;

    }



    .hidden-card {

        opacity: 0;

        transform: translateY(20px);

        height: 0;

        margin: 0;

        overflow: hidden;

    }



    .hidden-card.show {

        display: block !important;

        opacity: 1;

        transform: translateY(0);

        height: auto;

        margin-bottom: 1.5rem;

    }









.waitlist-btn {

    position: relative;

    display: inline-block;

    border-radius: 9999px;

    padding: 1px;

    font-size: 16px;

    line-height: 1.5;

    color: #ffffff;

    transition: all 0.3s ease;

    background: transparent;

    border: none;

    cursor: pointer;

    margin-top: 20px;

}



/* Hover color + glow */

.waitlist-btn:hover {

  color: #f4f4f5; /* zinc-100 */

  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5); /* shadow-glow */

}



/* Background radial highlight on hover */

.waitlist-bg {

  position: absolute;

  inset: 0;

  border-radius: inherit;

  overflow: hidden;

}

.waitlist-bg::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background: radial-gradient(

    75% 100% at 50% 0%,

    rgba(56, 189, 248, 0.6) 0%,

    rgba(56, 189, 248, 0) 75%

  );

  opacity: 0;

  transition: opacity 0.5s ease;

}

.waitlist-btn:hover .waitlist-bg::before {

  opacity: 1;

}



/* Button inner label */

.waitlist-label {

    position: relative;

    z-index: 10;

    border-radius: inherit;

    background-color: #0f0f0f;

    padding: 12px 35px;

    border: 1px solid rgb(255 255 255 / 37%);

}

/* Underline glow effect */

.waitlist-underline {

  position: absolute;

  bottom: 0;

  left: 1.125rem;

  height: 1px;

  width: calc(100% - 2.25rem);

  background: linear-gradient(

    to right,

    rgba(34, 211, 238, 0) 0%,

    rgba(34, 211, 238, 0.9) 50%,

    rgba(34, 211, 238, 0) 100%

  );

  opacity: 0;

  transition: opacity 0.5s ease;

}

.waitlist-btn:hover .waitlist-underline {

  opacity: 0.4;

}



/*************************************

IndustriesServe Section CSS End Here

**************************************/





/*************************************

Hire Android developer Section CSS Start Here

**************************************/

.androidDev {

    background: #FFC107;

    padding: 5px;

    /* color: #ffff; */

}

ul.ModernList {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 5px;

}

ul.ModernList li {

    font-size: 16px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 10px;

    width: calc(50% - 15px);

}

ul.ModernList li iconify-icon {

    font-size: 20px;

    color: #467af5;

}



.ListSubtitle {

    margin-bottom: 25px;

    font-size: 25px;

}

.contentIdea p {

    color: #6a6767;

    font-size: 16px;

    margin: 15px 0 25px;

}

.contentIdea h4 {

    font-size: 50px;

    margin-bottom: 15px;

}

.hireRow{

  align-items: center;

}

/*************************************

Hire Android developer Section CSS End Here

**************************************/





/*************************************

Our Process Section CSS Star Here

**************************************/



.scroll-wrapper-TMS .container {

    max-width: 1300px !important;

    margin: auto;

}



h6.outline-text {

    margin-bottom: 5px;

    font: 800 40px Arial;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1px;

}

.scroll-right-1-TMS {

    flex-wrap: wrap;

    width: 100%;

    height: auto;

    display: flex;

    /* align-items: center; */

}

.scroll-right-box {

    width: calc(50% - 10px) !important;

}

.scroll-right-box:nth-child(even){

position: relative;

top: 30px;

}

/*************************************

Our Process Section CSS End Here

**************************************/





/*************************************

Technologies Section CSS Star Here

**************************************/

.spreadsheets .section-header-title {

    text-align: center;

    font-weight: 600;

    font-size: 65px;

}

.tech-tabs .nav-pills {

    background: transparent;

    backdrop-filter: blur(10px);

    border: none;

    border-radius: 12px;

    padding: 8px;

}

.tech-category-header {

    margin-bottom: 4rem;

}

.tech-card {

    background: none;

    backdrop-filter: none;

    border: none;

    border-radius: 12px;

    padding: 0;

    text-align: center;

    transition: var(--transition-smooth);

    cursor: pointer;

    height: 100%;

}

.tech-logo img {

    width: 50px;

    height: 50px;

    object-fit: contain;

}

.tech-card:hover {

    transform: scale(1.05);

    border-color: transparent;

    box-shadow: none;

}

.tech-card:hover .tech-logo {

    box-shadow: 0 0 50px rgb(56 189 248 / 44%);

}

.tech-logo {

    padding: 10px;

    width: 70px;

    height: 70px;

    margin: 0 auto;

    border: 2px solid #292929;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

}

.techs-grid-wrapper {

    display: flex;

    gap: 50px;

    justify-content: center;

}

.tech-tabs .nav-link iconify-icon {

    font-size: 24px;

}

.tech-tabs .nav-link {

    background: transparent;

    border: none;

    color: var(--text-secondary);

    padding: 10px 15px;

    border-radius: 8px;

    transition: var(--transition-smooth);

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 500;
    font-size: 13px;

}

.tech-tabs .nav-pills {

  

    gap: 5px;

}

.spreadsheets {

    background: #101418;

    padding: 0px 0 80px;

}

.Developing-android-apps .row {

    align-items: center

}

/*************************************

Technologies Section CSS End Here

**************************************/





/*************************************

Developing-android-apps Section CSS Start Here

**************************************/

.Developing-android-apps {

    padding: 60px 0 0;

    background: #101418;

    position: relative;

}

.Developing-android-apps::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    background: #101418;

    background: linear-gradient(179deg, rgba(16, 20, 24, 1) 0%, rgb(3 50 77) 52%, rgb(18 23 28) 96%);

    width: 100%;

    height: 100%;

    /* z-index: -1; */

    opacity: 0.5;

}

/*************************************

Developing-android-apps Section CSS End Here

**************************************/





/*******************************
    OurApp Showcase css Start Here
********************************/
.showcase-section {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #11161c;
    overflow: hidden;
}
.showcase-section .title-container {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9999;
}
.subtitle {
    font-size: 1.4em;
    margin-bottom: 10px;
    opacity: 1;
    display: inline-block;
    color: #ffffff;
}
.subtitle::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -18px;
    width: 8px;
    height: 8px;
    background: #2196F3;
    box-shadow: 0 0 40px rgba(99, 165, 241, 0.4);
    border-radius: 50%;
}
.title {
    font-size: 10em;
    white-space: nowrap;
}
.our, .showcase {
    display: inline-block;
    background: linear-gradient(180deg, #fff 22.5%, #ffffffb3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    filter: blur(20px);
    will-change: opacity, filter, transform;
    z-index: 9999;
}
.slides-container {
    display: flex;
    height: 100%;
    width: calc((28vw * 5) + 30vw); /* Desktop: 5 slides at 28vw + 30vw margin */
    padding-left: 30vw; /* Desktop: 30% margin from left */
    will-change: transform;
}
.slide {
    flex: 0 0 28vw; /* Desktop: 28vw per slide */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5em;
    color: white;
}
.mockItems {
    width: 100%;
    position: relative;
}
.mockitem {
    padding: 60px 55px;
}
.mockitem img {
    width: 100%;
}
 
.ClientBox {
    background: #12171d;
    border-radius: 14px;
    padding: 20px;
    /* min-height: 249px; */
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px rgb(2 6 23 / 12%), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    border: 1px solid rgb(255 255 255 / 14%);
    position: absolute;
    top: 65%;
    left: 57%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 45%;
    backdrop-filter: blur(10px);
}
.brandName {
    font-size: 16px;
    margin-bottom: 0;
    color: #fff;
}
.ClientBox img {
    width: 90px;
}
 
p.ClientLocation {
    color: #fff;
    margin-bottom: 0;
}
p.AppCategory {
    color: #bcbcbc;
    margin-bottom: 0;
    font-size: 12px;
}
.boxInnerdfs {
    /* display: flex; */
    /* align-items: end; */
    justify-content: space-between;
}
 
 
/* "plus" button in the lower-right */
.pill-add {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.03);
    backdrop-filter: blur(4px);
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: inset 0 0 0 1px #d4e8ff14, inset 0 .5px .5px #d4e8ff1f, inset 0 3px 12px #d4e8ff14, inset 0 -16px 32px #d4e8ff14;
    position: absolute;
    top: 10px;
    right: 7px;
    background: linear-gradient(90.01deg, rgb(135 135 135 / 24%) .01%, rgb(255 255 255 / 24%) 52.01%, rgb(90 90 90 / 24%) 100%);
    transition: 0.3s all;
    cursor: pointer;
    }
.pill-add:hover {
    transform: scale(1.05);
    /* box-shadow: 0 6px 18px rgba(0,0,0,0.7); */
    background: linear-gradient(90.01deg, rgb(216 216 216 / 24%) .01%, rgb(103 103 103 / 24%) 52.01%, rgb(241 241 241 / 24%) 100%);
}
 
/* small plus icon */
.plus{display:inline-block;width:16px;height:16px;position:relative}
.plus::before, .plus::after{content:"";position:absolute;background:rgba(255,255,255,0.8);left:50%;top:50%;transform:translate(-50%,-50%);}
.plus::before{width:2px;height:10px;border-radius:2px}
.plus::after{height:2px;width:10px;border-radius:2px}
/* Tablet view: 768px to 991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .slides-container {
        width: calc((50vw * 5) + 10vw); /* Tablet: 5 slides at 50vw + 10vw margin */
        padding-left: 10vw; /* Tablet: 10vw margin from left */
    }
    .slide {
        flex: 0 0 50vw; /* Tablet: 50vw per slide (2 slides visible) */
    }
    .title {
        font-size: 6em; /* Adjust title size for tablet */
    }
    .subtitle {
        font-size: 1.2em; /* Adjust subtitle size for tablet */
    }
    .mockitem {
        padding: 60px 40px; /* Adjust padding for tablet */
    }
}
 
/* Mobile view: viewport width <= 767px */
@media screen and (max-width: 767px) {
    .slides-container {
        width: calc(100vw * 5); /* Mobile: 5 slides at 100vw */
        padding-left: 0; /* Mobile: No left margin */
    }
    .slide {
        flex: 0 0 100vw; /* Mobile: 100vw per slide */
    }
    .title {
        font-size: 3em !important;
    }
    .subtitle {
        font-size: 1em; /* Reduce subtitle size for mobile */
    }
    .mockitem {
        padding: 60px 30px;
    }
    .row.PortFolioRow .col-lg-5 {
    display: none;
}
}
 
/* Scoped modal styling */
.Portfolio.Modal .modal-content {
    background: #141414fa;
    color: #e6e8eb;
    border-radius: 0;
    border: none;
    /* box-shadow: 0 8px 40px rgba(2,6,23,0.7); */
    box-shadow: inset 0 0 0 1px #d4e8ff14, inset 0 .5px .5px #d4e8ff1f, inset 0 3px 12px #d4e8ff14, inset 0 -16px 32px #d4e8ff14;
    backdrop-filter: blur(10px);
}
    .Portfolio.Modal .modal-header {
      border-bottom: none;
      padding: 20px 24px;
    }
    .Portfolio.Modal .modal-title {
      font-weight: 700;
      color: #fff;
    }
    .Portfolio.Modal .btn-close {
      filter: invert(1);
    }
    .Portfolio.Modal .modal-footer {
      border-top: none;
      justify-content: flex-end;
      gap: 10px;
    }
    .Portfolio.Modal .btn-primary {
      background: linear-gradient(90deg,#6a5cff,#2ee6a7);
      border: none;
    }
    .Portfolio.Modal .btn-outline-light {
      border-color: rgba(255,255,255,0.15);
      color: #f1f5f9;
    }
.Portfolio.Modal {
    z-index: 999999 !important;
}
.Portfolio .modal-dialog {
    max-width: 800px !important;
}
.Portfolio .modal-dialog-centered {
    min-height: calc(100% - 0px);
}
.home-hero-design-shadow {
    z-index: 0;
    pointer-events: none;
    width: 300px;
    height: auto;
    position: absolute;
    inset: 0% 0% auto auto;
}
.home-hero-design-shadow.second {
    width: 500px;
    right: 10%;
}
 
.mocupImage img {
    width: 100%;
    margin: 0 auto;
}
.contentBoxPort img.clientLogoPort {
    width: 150px;
}
.contentBoxPort h3 {
    font-size: 25px;
    margin: 30px 0px 10px;
    color: #fff;
}
.contentBoxPort p {
    color: #ccc;
    font-size: 16px;
    line-height: 1.5;
}
h3.SubTitlejk {
    letter-spacing: 0.3em;
    font-size: 12px;
    margin-bottom: 10px;
    color: #d5d5d5;
    text-transform: uppercase;
}
p.MainTitlejk {
    margin-right: 20px;
    color: #ffffff;
}
.ClientInfoPort {
    display: flex;
    flex-wrap: wrap;
}
.ClientInfoPortInner {
    width: 50%;
}
.mocupImage img {
    width: 100%;
}
.mocupImage {
    text-align: center;
}
.PortFolioRow{
  align-items: center;
}
.portfolioContent .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
}
.non-custodial-security-line.top-right {
    position: absolute;
    inset: 0% 0% auto auto;
}
.non-custodial-security-line.bottom-left {
    position: absolute;
    inset: auto auto 0% 0%;
}
.non-custodial-security-line.bottom-right {
    position: absolute;
    inset: auto 0% 0% auto;
}
.non-custodial-security-line.top-left {
    position: absolute;
    inset: 0% auto auto 0%;
}
.consultUsbtn {
    color: #1272ff;
    font-weight: 500;
    font-size: 15px;
}
.consultUsbtn:hover {
    color: #4a94ff;
}
/*******************************
    OurApp Showcase css End Here
********************************/





      /*******************************

        Testimonial Section css Start Here

        ********************************/



/* .TestimonialWrapper {

      background: #000;

      font-family: Arial, sans-serif;

      padding: 40px;

      color: #fff;

    }



    .TestimonialWrapper .swiper {

      width: 100%;

      padding-bottom: 40px;

    }



    .TestimonialWrapper .testimonial-card {

      background: #111;

      border-radius: 20px;

      padding: 20px;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      height: 100%;

      box-shadow: 0 4px 12px rgba(0,0,0,0.4);

    } */



    /* Stars */

    .TestimonialWrapper .stars {

      color: #00e5c0;

      margin-bottom: 15px;

      font-size: 18px;

    }



    .TestimonialWrapper .stars i {

      margin-right: 3px;

    }



    /* Text */

    .TestimonialWrapper .testimonial-text {

      color: #ddd;

      font-size: 15px;

      line-height: 1.6;

      margin-bottom: 20px;

    }



    /* Profile */

    .TestimonialWrapper .profile {

      display: flex;

      align-items: center;

      margin-top: auto;

    }



    .TestimonialWrapper .profile img {

      width: 48px;

      height: 48px;

      border-radius: 50%;

      margin-right: 12px;

      border: 2px solid #222;

      object-fit: cover;

    }



    .TestimonialWrapper .profile h4 {

      margin: 0;

      font-size: 16px;

      font-weight: bold;

      color: #fff;

    }



    .TestimonialWrapper .profile p {

      margin: 0;

      font-size: 13px;

      color: #aaa;

    }

    .testimonial-card {

    border: 1px solid #232b32;

    padding: 20px;

    height: 300px;

    border-radius: 15px;

}

.cGttSj.linePattern.nolinepattern {

    background-image: none;

}

.TestimonialWrapper {

    margin-top: 70px;

}

section.spreadsheets.testimonialMain {

    background: #0f0f0f;

    padding: 0 0 50px;

}

    /*******************************

        Testimonial Section css End Here

        ********************************/







/*******************************

    FAQ Section css End Here

********************************/

section.spreadsheets.FaqWrapper {

    background: #0F0F0F;

    background: linear-gradient(182deg, rgba(15, 15, 15, 1) 0%, rgba(7, 2, 33, 1) 96%);

    position: relative;

    padding: 0 0 30px;

}

.FaqWrapper .cGttSj.linePattern.nolinepattern {

    background-image: none;

    padding-top: 55px;

}

.ContactUsBtn{

      background: radial-gradient(86.86% 86.86% at 50% 111.67%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(198.77% 172.22% at 55.56% 112.78%, rgba(136, 125, 255, .5) 0%, rgba(136, 125, 255, 0) 100%), #713DFF;

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    -webkit-text-fill-color: transparent;

    transition: all .2s ease;

}

/* .FaqWrapper::after {

    background: linear-gradient(270deg, #3d354e00 28.87%, #3d354e 45.39%, #3d354e 53.54%, #3d354e00 70.06%);

    top: 0;

    content: "";

    height: 1px;

    left: 0;

    position: absolute;

    width: 100%;

} */





 /* Scoped FAQ styles */

    .FaqMainWrapper {

      max-width: 800px;

      margin: 50px auto;

    }



    .FaqMainWrapper .faq-item {

      padding: 20px 0;

      position: relative;

    }



    .FaqMainWrapper .faq-item:before {

      background: linear-gradient(

        270deg,

        rgba(61, 53, 78, 0) 0.2%,

        #30273a 45.39%,

        #30273a 53.54%,

        rgba(61, 53, 78, 0) 110.06%

      );

      bottom: 0;

      content: "";

      height: 1px;

      left: 0;

      right: 0;

      position: absolute;

      width: 100%;

      transition: all 1s ease;

    }



    .FaqMainWrapper .faq-question {

      font-size: 1.4rem;

      font-weight: 600;

      cursor: pointer;

      display: flex;

      justify-content: space-between;

      align-items: center;



      /* gradient text */

      background: linear-gradient(180deg, #fff 22.5%, #ffffffb3);

      -webkit-background-clip: text;

      background-clip: text;

      color: transparent;

      -webkit-text-fill-color: transparent;

      /* display: block; */

    }



    .FaqMainWrapper .faq-question span {

      font-size: 1.5rem;

      transition: transform 0.3s ease;

      color: #fff; /* solid white for readability */

      -webkit-text-fill-color: #fff;

    }



    .FaqMainWrapper .faq-item.active .faq-question span {

      transform: rotate(45deg); /* makes + look like × */

    }



    .FaqMainWrapper .faq-answer {

      max-height: 0;

      overflow: hidden;

      opacity: 0;

      transition: max-height 0.4s ease, opacity 0.4s ease;

    }



    .FaqMainWrapper .faq-answer.show {

      opacity: 1;

    }



    .FaqMainWrapper .faq-answer p {

      color: #ddd;

      margin: 10px 0 0;

    }





    /*Other css  */

    .connectletsUs {

    background: linear-gradient(180deg, #070220 0%, #070221 100%);

}

.CallActionInner {

    padding: 50px;

    border: 1px solid #1d1544;

    border-radius: 10px;

    background: linear-gradient(0deg, rgba(191, 175, 255, .04) 0%, rgb(9 4 39) 100%), linear-gradient(180deg, rgb(7 2 32) 0%, rgb(8 3 33) 100%);

position: relative;

  }

.CallActionInner::before {

    content: '';

    background: radial-gradient(24.45% 22.45% at 50% 0%, rgba(133, 102, 255, .04) 0%, rgba(133, 102, 255, 0) 100%, rgba(133, 102, 255, 0) 100%), radial-gradient(38.5% 24.47% at 50% 11.59%, rgba(133, 102, 255, .08) 0%, rgba(133, 102, 255, 0) 100%);

    position: absolute;

    top: 0px;

    left: 0;

    width: 100%;

    height: 100%;

}



.addresbox_content p {

    margin-bottom: 10px;

    color: #5b5b5b;

}

.footer-bottom {

    border-top: 1px solid #101041;

    padding: 25px 0;

}









/* Responsive Design */

/* Sticky sidebar styles */

.ourDevProcess {

    position: relative;

    min-height: 100vh;

}

.ourDevProcess .Secure-text-left h3, .ourDevProcess h3.taitel-main-TMS {

    font-size: 46px;

    font-weight: 600;

    max-width: 100%;

    padding: 12px 0px;

    color: #000000;

    margin: 0;

    line-height: 60px;

}

.ourDevProcess .badge-secondary-VK.link, .ourDevProcess span.taitel-TMS {

    color: #000000;

}

.vehicleextrawrap#sticky-sidebar {

    z-index: 100;

    background-color: #fff;

    padding: 20px;

}



.scroll-wrapper-TMS,

.container,

.row,

.col-lg-5 {

    overflow: visible;

    min-height: 100%;

}



.scroll-right-1-TMS {

    overflow: visible;

  

}

.scroll-text-left-TMS {

    width: 100% !important;

 

}

#scrolled .pin-spacer {

    margin-top: 0px !important;

    width: 100% !important;

}

@media (max-width: 991px) {

    .vehicleextrawrap#sticky-sidebar {

        position: static;

    }

}





/************************************************

  IOS Hero Section Css Start here 17 sep,2025

***********************************************/

.IOS-HeroSection.hero-section {

    min-height: unset;

    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    margin-top: 0;

    padding: 70px 0px 0;

}

.IOS-HeroSection{

  .scroll-wrapper-TMS, .container, .row, .col-lg-5 {

    overflow: visible;

    min-height: 100%;

}

  .contentSectionSide {

      position: relative;

      z-index: 999;

      text-align: center;

  }

  .InnerContent .row {

      align-items: center !important;

      justify-content: center;

  }

  .hero-subtitle {

      font-size: 17px;

      font-weight: 300;

      color: var(--text-secondary);

      margin-bottom: 2rem;

      max-width: 600px;

      line-height: 1.5;

      margin: 15px auto 25px;

  }

  .hero-tags {

    display: flex;

    align-items: center;

    gap: 1rem;

    font-size: 14px;

    color: var(--text-muted);

    justify-content: center;

}

.profile-wrapper {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    justify-content: center;

    border: 1px solid #4b3483;

    padding: 7px 11px;

    border-radius: 30px;

    backdrop-filter: blur(22px);

    background-image: radial-gradient(circle closest-corner at 50% 160%, #8b5261, #fff0 67%), linear-gradient(hsla(0, 0%, 100%, .18), #00000012);

    /* box-shadow: inset 0 0 #c4bbd3, 0 4px 4px #0e091870, 0 13px 16px -8px #000, inset 0 4px 12px #ffffff36; */

}

ul.profile-items {

    display: flex;

    list-style: none;

    padding: 0px 0 0 7px;

    margin-bottom: 0;

}

ul.profile-items li {

    padding: 5px;

    background: #ffff;

    border-radius: 50px;

    border: 2px solid #dadada;

    margin-left: -10px;

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    display: flex;

}

ul.profile-items li img {

    width: 18px;

}

.hero-title {

    width: 100%;

    font-family: "Inter Tight", sans-serif;

    text-transform: capitalize;

    margin-top: 0;

    margin-bottom: 15px;

    font-size: 55px;

    font-weight: 600;

    line-height: 110%;

    color: #fff;

    letter-spacing: 0.5px;

    padding-top: 0;

}

.hero-buttons {

    margin-bottom: 2em;

}

.hero-buttons .btn {

    font-weight: 400;

    padding: 12px 32px;

    border-radius: 8px;

    transition: var(--transition-smooth);

}

.hero-buttons .btn-outline-light {

    background: transparent;

    border: 1px solid var(--border-primary);

    color: var(--text-primary);

}

.hero-buttons .btn-primary {

    background: var(--primary-color);

    border: 1px solid var(--primary-color);

    box-shadow: var(--shadow-button);

}

.hero-bottom-ellipse {

    height: 40%;

}

}





.MobileMockupsIos {

    column-gap: 3.9375rem;

    justify-content: center;

    align-items: flex-end;

    width: 100%;

    max-width: 64.625rem;

    display: flex;

    position: relative;

    margin: 50px auto 0;

    z-index: 1;

}





/**********************************

Why Choose Section 2 For IOS PAge start here

************************************/

.WhyChoose2IOS {

    background: #fff;

        padding: 70px 0;

}

.WhyChoose2IOS h1 {

    font-size: 2.5rem;

    font-weight: 400;

    margin-bottom: 20px;

    line-height: 1.4;

    color: #000000;

}

.WhyChoose2IOS .whyChosepara {

    width: 40%;

}

.WhyChoose2IOS .whyChosepara p{

    font-size: 1rem;

    color: #151515;

    margin-bottom: 40px;



}

.fe-top {

    grid-column-gap: 25px;

    grid-template-rows: auto;

    grid-template-columns: 1fr 1fr;

    grid-auto-columns: 1fr;

    margin-bottom: 25px;

    display: grid;

}

.analytics-block {

    background-color: #f0f0f0;

    background-image: url("../images/677268193c869eed4d3882ae_fe-graph-01.png");

    background-position: 100% 100%;

    background-repeat: no-repeat;

    background-size: contain;

    border: 1px solid #0000001a;

    border-radius: 8px;

    min-height: 215px;

    padding: 30px;

}

.fe-title {

    margin-bottom: 8px;

    font-size: 20px;

}

.analytics-text {

    width: 100%;

    max-width: 68%;

    margin-bottom: 0;

    color: #727272;

}

.strategic-block {

    background-color: #f0f0f0;

    background-image: url("../images/fgdsfgdfg.png");

    background-position: 90% 86%;

    background-repeat: no-repeat;

    background-size: contain;

    border: 1px solid #0000001a;

    border-radius: 8px;

    min-height: 215px;

    padding: 30px;

}





.strategic-text {

    width: 100%;

    max-width: 55%;

    margin-bottom: 0;

        color: #727272;

}

.fe-bottom {

    grid-column-gap: 25px;

    display: flex;

}

.seo-block {

    background-color: #f0f0f0;

    background-image: url("../images/dfds.png");

    background-position: 100% 100%;

    background-repeat: no-repeat;

    background-size: contain;

    border: 1px solid #0000001a;

    border-radius: 8px;

    width: 100%;

    max-width: 68%;

    min-height: 322px;

    padding: 30px;

}

.seo-text {

    width: 100%;

    max-width: 46%;

    margin-bottom: 0;

    color: #727272;

}

.saas-block {

    background-color: #f0f0f0;

    background-image: url("../images/677268191b68d708236bb8dd_fe-graph-04.png");

    /* background-position: 100% 100%; */

    background-repeat: no-repeat;

    background-size: contain;

    border: 1px solid #0000001a;

    border-radius: 8px;

    width: 100%;

    max-width: 32%;

    min-height: 322px;

    padding: 30px;

    background-position-x: 15px;

    background-position-y: 100%;

}

.saas-text {

    margin-bottom: 0;

    color: #727272;

}

/**********************************

Why Choose Section 2 For IOS PAge End here

************************************/





/**********************************

Hire IOS section for IOS PAge Start here

************************************/

     .slideBox {

            /* min-height: 100vh; */

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 20px;

            box-sizing: border-box;

        }

        

        .code-when-text-TMS ul {

            padding: 0px;

        }

        .code-when-text-TMS {

            padding-left: 30px;

        }

.code-when-image {

    padding: 40px 0;

}

.code-when-text-TMS h4 {

    font-size: 40px;

    font-weight: 600;

}

.run-text-TMS h3 {

    font-size: 36px;

    }

    .code-when-wrap-TMS {

       background: #0f0f0f;

}

.about-wrapper-TMS {

    padding: 100px 0px 40px 0px;

    height: auto;

    width: 100%;

    background: #0f0f0f;

}



.code-when-image img {

    height: 100%;

    width: 100%;

    border: none;

    border-radius: 16px;

    box-shadow: none;

    filter: contrast(125%);

    max-width: 200%;

    outline: none;

    outline-offset: 0;

    padding-top: 0;

    transform: none;

    transform-style: preserve-3d;

    vertical-align: baseline;

    width: 95%;

    margin-left: auto;

}

.slideBox1 {

    background-color: #edfff4;

}

.runcheck-box h6 {

    font-size: 16px;

    line-height: 28px;

    margin-bottom: 0;

}

.run-video-wrap-TMS img {

    height: unset;

    width: unset;

    position: unset;

    left: unset;

    top: unset;

    transform: unset;

}

.run-video-inner {

    height: 598px;

    width: 100%;

    display: flex;

    align-items: center;

    align-items: center;

}

.run-wrap-TMS {

    display: flex;

    background-color: #101010;

    border: 1px solid #ffffff33;

    border-radius: 16px;

    gap: 40px;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 9;

    overflow: hidden;

}

.about-wrapper-TMS .row {

    align-items: center;

}



/**********************************

Hire IOS section for IOS PAge End here

************************************/



























































































































































/************************************



Media Queries Start Here For All Devices



*************************************/



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

@media (min-width:767px) and (max-width: 992px) {

.tech-tabs .nav-pills {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    white-space: nowrap;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding-bottom: 10px;

    cursor: grab;

    justify-content: unset !important;

}



  .tech-tabs .nav-pills::-webkit-scrollbar {

    display: none; /* Hides scrollbar for Chrome, Safari, etc. */

  }



  .tech-tabs .nav-pills .nav-link {

    flex: 0 0 auto; /* Prevents links from shrinking or stretching */

    margin-right: 10px; /* Adds spacing between tabs */

    padding: 8px 12px; /* Adjusted padding for better touch targets */

    font-size: 12px;

  }



  .tech-tabs .nav-pills .nav-link iconify-icon {

    font-size: 18px;

  }



  /* Existing styles from previous response */

  .hero-section {

    padding: 80px 0;

    min-height: auto;

  }



  .hero-title {

    font-size: clamp(2rem, 5vw, 3.5rem);

  }



  .hero-subtitle {

    font-size: 16px;

    max-width: 90%;

  }



  .home-hero-right {

    height: 500px;

    background-size: 300px 600px;

  }



  .hero-buttons {

    flex-direction: column;

    gap: 1rem;

  }



  .hero-buttons .btn {

    width: 100%;

    text-align: center;

  }



.profile-wrapper {

    display: none;

}



 .services-section, .industries-section, .tech-section, .counter-section, .ai-section, .features-cards-section, .ios-development-section, .strategy-section, .section_about, .WhyChooseTechMave, .IndustriesServe, .Developing-android-apps {

    padding: 50px 0;

}

.section-title, .inner-section-title, .SecCenterHEading h2 {

    font-size: clamp(2rem, 6vw, 3rem);

}



  .section-subtitle,

  .serviceTitlePara,

  .ios-subtitle,

  .strategy-description,

  .AboutPara {

    font-size: 1rem;

    max-width: 100%;

  }



  .service-card,

  .counter-card,

  .industry-card,

  .ai-card,

  .tech-card,

  .feature-card,

  .pricing .card {

    padding: 1.5rem;

  }



  .ai-tech-grid {

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  }



  .security-features {

    grid-template-columns: 1fr;

  }



  .swot-container {

    width: 400px;

    height: 400px;

  }



  .swot-element {

    width: 200px;

  }



  .swot-circle {

    width: 70px;

    height: 70px;

  }



  .center-circle {

    width: 120px;

    height: 120px;

  }



  .center-circle h3 {

    font-size: 0.875rem;

  }



  .ios-mockups {

    height: 500px;

  }



  .iphone-main {

    width: 250px;

    height: 520px;

  }



  .LeftSectionTitle {

    width: 90%;

  }



  .WhyCooseContentWrapper {

    flex-direction: column;

    gap: 2rem;

  }



  .whyChoseTitle,

  .whyChosepara {

    width: 100%;

    text-align: center;

  }



  .CounterCardWrapper {

    width: 95%;

  }



  .counterCard {

    padding: 15px;

  }



  .counterCard h6 {

    font-size: 2.5rem;

  }



  .techs-grid-wrapper {

    gap: 30px;

  }



  .tech-logo {

    width: 60px;

    height: 60px;

  }



  .FaqMainWrapper .faq-question {

    font-size: 1.2rem;

  }



  .FaqMainWrapper .faq-answer p {

    font-size: 0.9rem;

  }



  .CallActionInner {

    padding: 30px;

  }





  /*My media query css  */

/* .contentSectionSide {

    margin-top: 70px;

} */

.hero-section {

    padding: 150px 0 60px;

}

.InnerContent .col-lg-8 {

    padding: 0;

}

.hero-title {

    line-height: 120%;

    margin-bottom: 15px;

}

.hero-subtitle {

    max-width: 100%;

    margin-bottom: 20px;

}

.hero-buttons {

    flex-direction: row;

    gap: 0px;

    display: flex;

}

.InnerContent .col-lg-4 {

    display: none;

}

.hero-tags span {

    white-space: nowrap;

}

.hero-tags {

    flex-wrap: nowrap;

    justify-content: center;

}



section.section_about {

    padding: 0 0 50px;

}

.section_about .centerTitleSection {

    padding-top: 50px;

}

.AboutPara {

    width: 100%;

    padding-top: 15px;

}

.inner-section-title {

    font-size: 40px !important;

    line-height: 3.1rem;

}

.CounterCardWrapper .row .col-lg-3 {

    width: 25%;

}

.ServiceCardWrapper .col-lg-4 {

    margin-bottom: 20px;

    padding: 0 10px !important;

}

.row.WhyChooseRow .col-sm-6 {

    padding: 0 8px;

}

.counterCard h6 {

    font-size: 2.2em;

}

.CounterCardWrapper {

    margin: 35px auto 0;

}

.counterCard {

    padding: 0 0 10px;

}

.section_about .centerTitleSection {

    width: 100%;

}

section.section_about .col-lg-12 {

    padding: 0;

}

.cta-text {

    font-size: 16px;

}

.hythereTitle h2 {

    font-size: 20px !important;

}

.serviceSubtitle {

    font-size: 2.5rem;

    line-height: 40px;

}

.LeftSectionTitle {

    margin-bottom: 35px;

}

section.features-cards-section {

    padding: 50px 0 25px;

}



.WhyChooseTechMave h1 {

     margin-bottom: 0;

   }

   .WhyCooseContentWrapper {

    flex-direction: column;

    gap: 1rem;

        margin-bottom: 30px;

}

.WhyChooseTechMave p {

    font-size: 1rem !important;

    color: #ccc;

    margin-bottom: 0;

    

  

}

.row > [class*="col"] {

    padding-left: 0;

    padding-right: 0;

}

.WhyChooseTechMave .card {

    background: #3d3c3c38;

    overflow: hidden;

    position: relative;

    width: 100%;

    height: auto;

    padding: 20px;

    border: 1px solid #3a3939;

    margin-bottom: 12px;

}

.WhyChooseTechMave .card h2 {

    font-size: 2rem;

    color: #3b82f6;

    margin: 0 0 10px 0;

    font-size: 25px !important;

}



.TransformingIdea {

    padding: 50px 0 50px;

}

.imgTransforming img {

    padding-right: 0;

    width: 100%;

    display: none;

}

.contentIdea {

    margin-top: 0;

}

.industry-card-box {

    padding: 0 10px !important;

}

.contentIdea h4 {

   

    margin-bottom: 0px !important;

}

.contentIdea p {

    margin: 5px 0 25px;

}

.ListSubtitle {

    font-size: 1.2rem;

}

ul.ModernList {

    display: flex;

    align-items: start;

    flex-wrap: wrap;

    gap: 5px;

    flex-direction: column;

}

ul.ModernList li {

    width: 100%;

}

section.IndustriesServe {

    padding: 50px 0 50px;

}

.SecCenterHEading {

     max-width: 100%;

      margin: 0 auto 30px;

}

.SecCenterHEading p {

     font-size: 18px;

}

.pricing .card-shell {

    height: 380px;

}

 .scroll-wrapper-TMS {

    padding: 50px 50px 30px;

}

.scroll-right-box {

    margin: 0;

}

.scroll-right-box:nth-child(even) {

    position: relative;

    top: 0;

}

.scroll-right-1-TMS {

    gap: 20px;

    margin-top: 20px;

}

.spreadsheets .section-header-title {

    font-size: 50px;

}

.title {

    font-size: 6em;

    white-space: nowrap;

}

.linePattern {

    padding: 50px 80px 200px;

}

.techs-wrapper {

    width: calc(33.33% - 20px);

}

.techs-grid-wrapper {

    gap: 10px;

            flex-wrap: wrap;

    

}

.tech-category-header {

    margin-bottom: 2rem;

}

.tech-tabs .nav-pills .nav-link {

    font-size: 14px;

}

.spreadsheets {

    background: #101418;

    padding: 0px 0 0px;

}

.about-text-TMS {

    padding-right: 0;

}

.Secure-text-left h3, h3.taitel-main-TMS {

    font-size: 42px;

    max-width: 100%;

    padding: 12px 0px 0 !important;

    line-height: 40px;

    line-height: 50px;

}

.about-video-TMS {

    margin-top: 30px;

    padding-left: 0;

}

.spreadsheets .section-header {

    margin-bottom: 30px;

}

h4.IndusTitle {

    font-size: 25px;

}

.industry-description {

  

    font-size: 16px;



}

.industry-features li {

    font-size: 16px;

}

.scroll-right-box h4 {

    font-size: 22px;

    line-height: 30px;

    font-weight: 600;

    color: #000;

    margin-bottom: 5px;

    letter-spacing: 0.5px;

}

.showcase-section .title-container {

    top: 30%;

}

.testimonialMain .linePattern {

    padding: 40px 80px 155px;

}

.TestimonialWrapper {

    margin-top: 5px;

}

section.spreadsheets.testimonialMain {

    padding: 0 0 0px;

}

.connectletsUs {

    padding: 0px 0px 50px;

}

.call-action-center h2.fz-70 {

    font-size: 27px !important;

    margin-bottom: 15px;

}

.slide {

   

        margin-right: 2vw; /* Optional spacing between slides */

    }

   

    .mockitem {

    padding: 60px 0px;

}





/* Hero Section of IOS responsive for mobile start */

  .IOS-HeroSection  .hero-tags {

    gap: 1rem;

    flex-wrap: wrap;

    

}

.IOS-HeroSection  .hero-tags span {

          color: #ffffff;

}

.IOS-HeroSection.hero-section {

      padding: 40px 0px 0;

}

.MobileMockupsIos {

    column-gap: 0;

     margin: 50px auto 80px;

    

}

.hero-bottom-ellipse {

    height: 30%;

}

/* Hero Section of IOS responsive for mobile End */



/* Why Chhose of IOS responsive for mobile Start */

.WhyChoose2IOS {

    background: #fff;

    padding: 40px 0;

}

.WhyCooseContentWrapper {

    gap: 0.5rem;

}

.WhyChoose2IOS h1 {

    margin-bottom: 0;

}

.WhyChoose2IOS .whyChosepara {

    width: 100%;

}

.WhyChoose2IOS .whyChosepara p {

    margin-bottom: 0;

}

/* .fe-top {

grid-template-columns: 1fr; 

} */

  .analytics-block {

    background-position: 90px 43px;

    margin-bottom: 0;

}

.analytics-text {

     max-width: 85%;

 }

.strategic-block {

       background-position: 335% 90px;

   }

.strategic-text {

    width: 100%;

    max-width: 100%;

    margin-bottom: 0;

    color: #727272;

}

/* .fe-bottom {

    flex-direction: column;

} */

.seo-block {

    width: 100%;

    max-width: 100%;

    min-height: 270px;

    margin-bottom: 0;

}

.seo-text {

    width: 100%;

    max-width: 100%;

}

.saas-block {

    width: 100%;

    max-width: 100%;

    min-height: 300px;

}



/* Why Chhose of IOS responsive for mobile end */





/* Hire IOS of IOS responsive for mobile end */

.about-wrapper-TMS {

       padding: 50px 0 0;

}

.slideBox {

     padding: 20px 0;

   }

.code-when-text-TMS p {

    max-width: 100%;

}

.code-when-text-TMS h4 {

    margin-bottom: 10px;

    font-size: 28px;

}

.code-when-box-TMS {



    display: block;

   

}

.code-when-text-TMS {

    padding-left: 0;

}

.code-when-image {

    padding: 0;

}

.code-when-text-TMS ul li {

    line-height: 25px;

    flex-wrap: wrap;

    margin-bottom: 12px;

}

.code-when-image {

    width: 100%;

    max-width: 100%;

    /* display: none; */

    margin-top: 30px;

}

.code-when-image img {

    width: 100%;

    }

.run-wrap-TMS {

    gap: 20px;

    flex-direction: column;

    padding: 25px;

}

.run-text-TMS {

    padding-left: 0;

    width: 100%;

}

.run-text-TMS h3 {

    font-size: 29px;

    margin-bottom: 10px;

}

.runcheck-wrapTMS {

    padding-top: 5px;

}

.runcheck-box {

    width: 100%;

  }

  .run-video-wrap-TMS {

    display: none;

}

}





/* Mobile Devices (max-width: 767px) */

@media (max-width: 767px) {

  

.tech-tabs .nav-pills {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    white-space: nowrap;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding-bottom: 10px;

    cursor: grab;

    justify-content: unset !important;

}



  .tech-tabs .nav-pills::-webkit-scrollbar {

    display: none; /* Hides scrollbar for Chrome, Safari, etc. */

  }



  .tech-tabs .nav-pills .nav-link {

    flex: 0 0 auto; /* Prevents links from shrinking or stretching */

    margin-right: 10px; /* Adds spacing between tabs */

    padding: 8px 12px; /* Adjusted padding for better touch targets */

    font-size: 12px;

  }



  .tech-tabs .nav-pills .nav-link iconify-icon {

    font-size: 18px;

  }



  /* Existing styles from previous response */

  .hero-section {

    padding: 80px 0;

    min-height: auto;

  }



  .hero-title {

    font-size: clamp(2rem, 5vw, 3.5rem);

  }



  .hero-subtitle {

    font-size: 16px;

    max-width: 90%;

  }



  .home-hero-right {

    height: 500px;

    background-size: 300px 600px;

  }



  .hero-buttons {

    flex-direction: column;

    gap: 1rem;

  }



  .hero-buttons .btn {

    width: 100%;

    text-align: center;

  }



.profile-wrapper {

    display: none;

}



 .services-section, .industries-section, .tech-section, .counter-section, .ai-section, .features-cards-section, .ios-development-section, .strategy-section, .section_about, .WhyChooseTechMave, .IndustriesServe, .Developing-android-apps {

    padding: 50px 0;

}

  .section-title,

  .inner-section-title,

  .SecCenterHEading h2 {

    font-size: clamp(2rem, 4vw, 3rem);

  }



  .section-subtitle,

  .serviceTitlePara,

  .ios-subtitle,

  .strategy-description,

  .AboutPara {

    font-size: 1rem;

    max-width: 100%;

  }



  .service-card,

  .counter-card,

  .industry-card,

  .ai-card,

  .tech-card,

  .feature-card,

  .pricing .card {

    padding: 1.5rem;

  }



  .ai-tech-grid {

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  }



  .security-features {

    grid-template-columns: 1fr;

  }



  .swot-container {

    width: 400px;

    height: 400px;

  }



  .swot-element {

    width: 200px;

  }



  .swot-circle {

    width: 70px;

    height: 70px;

  }



  .center-circle {

    width: 120px;

    height: 120px;

  }



  .center-circle h3 {

    font-size: 0.875rem;

  }



  .ios-mockups {

    height: 500px;

  }



  .iphone-main {

    width: 250px;

    height: 520px;

  }



  .LeftSectionTitle {

    width: 90%;

  }



  .WhyCooseContentWrapper {

    flex-direction: column;

    gap: 2rem;

  }



  .whyChoseTitle,

  .whyChosepara {

    width: 100%;

    text-align: center;

  }



  .CounterCardWrapper {

    width: 95%;

  }



  .counterCard {

    padding: 15px;

  }



  .counterCard h6 {

    font-size: 2.5rem;

  }



  .techs-grid-wrapper {

    gap: 30px;

  }



  .tech-logo {

    width: 60px;

    height: 60px;

  }



  .FaqMainWrapper .faq-question {

    font-size: 1.2rem;

  }



  .FaqMainWrapper .faq-answer p {

    font-size: 0.9rem;

  }



  .CallActionInner {

    padding: 30px;

  }





  /*My media query css  */

/* .contentSectionSide {

    margin-top: 70px;

} */

.hero-section {

    padding: 150px 0 60px;

}

.InnerContent .col-lg-8 {

    padding: 0;

}

.hero-title {

    line-height: 120%;

    margin-bottom: 15px;

}

.hero-subtitle {

    max-width: 100%;

    margin-bottom: 20px;

}

.hero-buttons {

    flex-direction: row;

    gap: 0px;

    display: flex;

}

.InnerContent .col-lg-4 {

    display: none;

}

.hero-tags span {

    white-space: nowrap;

}

.hero-tags {

    flex-wrap: nowrap;

    justify-content: center;

}



section.section_about {

    padding: 0 0 50px;

}

.section_about .centerTitleSection {

    padding-top: 50px;

}

.AboutPara {

    width: 100%;

    padding-top: 15px;

}

.inner-section-title {

    font-size: 28px !important;

    line-height: 2.1rem;

  }

.CounterCardWrapper .row .col-lg-3 {

    width: 50%;

}

.counterCard h6 {

    font-size: 2.2em;

}

.CounterCardWrapper {

    margin: 35px auto 0;

}

.counterCard {

    padding: 0 0 10px;

}

.section_about .centerTitleSection {

    width: 100%;

}

section.section_about .col-lg-12 {

    padding: 0;

}

.cta-text {

    font-size: 16px;

}

.hythereTitle h2 {

    font-size: 20px !important;

}

.serviceSubtitle {

    font-size: 1.8rem;

    line-height: 40px;

}

.LeftSectionTitle {

    margin-bottom: 35px;

}

section.features-cards-section {

    padding: 50px 0 25px;

}



.WhyChooseTechMave h1 {

     margin-bottom: 0;

   }

   .WhyCooseContentWrapper {

    flex-direction: column;

    gap: 1rem;

        margin-bottom: 30px;

}

.WhyChooseTechMave p {

    font-size: 1rem !important;

    color: #ccc;

    margin-bottom: 0;

    

  

}

.row > [class*="col"] {

    padding-left: 0;

    padding-right: 0;

}

.WhyChooseTechMave .card {

    background: #3d3c3c38;

    overflow: hidden;

    position: relative;

    width: 100%;

    height: auto;

    padding: 20px;

    border: 1px solid #3a3939;

    margin-bottom: 12px;

}

.WhyChooseTechMave .card h2 {

    font-size: 2rem;

    color: #3b82f6;

    margin: 0 0 10px 0;

    font-size: 25px !important;

}



.TransformingIdea {

    padding: 50px 0 50px;

}

.imgTransforming img {

    padding-right: 0;

}

.contentIdea {

    margin-top: 25px;

}

.contentIdea h4 {

   

    margin-bottom: 0px !important;

}

.contentIdea p {

    margin: 5px 0 25px;

}

.ListSubtitle {

    font-size: 1.2rem;

}

ul.ModernList {

    display: flex;

    align-items: start;

    flex-wrap: wrap;

    gap: 5px;

    flex-direction: column;

}

ul.ModernList li {

    width: 100%;

}

section.IndustriesServe {

    padding: 50px 0 50px;

}

.SecCenterHEading {

     max-width: 100%;

      margin: 0 auto 30px;

}

.SecCenterHEading p {

     font-size: 18px;

}

.pricing .card-shell {

      height: 350px;

  }

  .scroll-wrapper-TMS {

    padding: 50px 0px 30px;

}

.scroll-right-box {

    width: calc(100% - 10px) !important;

}

.linePattern {

    padding: 50px 80px 200px;

}

.techs-wrapper {

    width: calc(33.33% - 20px);

}

.techs-grid-wrapper {

    gap: 10px;

            flex-wrap: wrap;

    

}

.tech-category-header {

    margin-bottom: 2rem;

}

.tech-tabs .nav-pills .nav-link {

    font-size: 14px;

}

.spreadsheets {

    background: #101418;

    padding: 0px 0 0px;

}

.about-text-TMS {

    padding-right: 0;

}

.Secure-text-left h3, h3.taitel-main-TMS {

    font-size: 28px;

    max-width: 100%;

    padding: 12px 0px 0 !important;

    line-height: 40px;

}

.about-video-TMS {

    margin-top: 30px;

    padding-left: 0;

}

.spreadsheets .section-header {

    margin-bottom: 30px;

}

h4.IndusTitle {

    font-size: 25px;

}

.industry-description {

  

    font-size: 16px;



}

.industry-features li {

    font-size: 16px;

}

.scroll-right-box h4 {

    font-size: 22px;

    line-height: 30px;

    font-weight: 600;

    color: #000;

    margin-bottom: 5px;

    letter-spacing: 0.5px;

}

.showcase-section .title-container {

    top: 30%;

}

.testimonialMain .linePattern {

            padding: 30px;
        display: block;

}

.TestimonialWrapper {

    margin-top: 5px;

}

section.spreadsheets.testimonialMain {

    padding: 0 0 0px;

}

.connectletsUs {

    padding: 0px 0px 50px;

}

.call-action-center h2.fz-70 {

    font-size: 27px !important;

    margin-bottom: 15px;

}

.ourDevProcess .Secure-text-left h3, .ourDevProcess h3.taitel-main-TMS {

    font-size: 30px;

    line-height: 42px;

}

.FaqMainWrapper {

    max-width: 800px;

    margin: 50px 20px;

}

.scroll-right-box:nth-child(even) {

    position: relative;

    top: 0;

}



 /* Hero Section of IOS responsive for mobile start */

  .IOS-HeroSection  .hero-tags {

    gap: 1rem;

    flex-wrap: wrap;

    

}

.IOS-HeroSection  .hero-tags span {

          color: #ffffff;

}

.IOS-HeroSection.hero-section {

      padding: 40px 0px 0;

}

.MobileMockupsIos {

    column-gap: 0;

     margin: 50px auto 80px;

    

}

.hero-bottom-ellipse {

    height: 30%;

}

/* Hero Section of IOS responsive for mobile End */



/* Why Chhose of IOS responsive for mobile Start */

.WhyChoose2IOS {

    background: #fff;

    padding: 40px 0;

}

.WhyCooseContentWrapper {

    gap: 0.5rem;

}

.WhyChoose2IOS h1 {

    margin-bottom: 0;

}

.WhyChoose2IOS .whyChosepara {

    width: 100%;

}

.WhyChoose2IOS .whyChosepara p {

    margin-bottom: 0;

}

.fe-top {

grid-template-columns: 1fr; /* stack on smaller screens */

}

    .analytics-block {

        background-position: 90px 43px;

        margin-bottom: 25px;

    }

.analytics-text {

     max-width: 85%;

 }

.strategic-block {

       background-position: 335% 90px;

   }

   .strategic-text {

    width: 100%;

    max-width: 70%;

    margin-bottom: 0;

    color: #727272;

}

.fe-bottom {

    flex-direction: column;

}

.seo-block {

    width: 100%;

    max-width: 100%;

    min-height: 270px;

    margin-bottom: 23px;

}

.seo-text {

    width: 100%;

    max-width: 100%;

}

.saas-block {

    width: 100%;

    max-width: 100%;

    min-height: 280px;

  

}



/* Why Chhose of IOS responsive for mobile end */





/* Hire IOS of IOS responsive for mobile end */

.about-wrapper-TMS {

       padding: 50px 0 0;

}





.slideBox {

    padding: 0;

  

}

.code-when-text-TMS p {

    max-width: 100%;

}

.code-when-text-TMS h4 {

    margin-bottom: 10px;

    font-size: 28px;

}

.code-when-box-TMS {



    display: block;

   

}

.code-when-text-TMS {

    padding-left: 0;

}

.code-when-image {

    padding: 0;

}

.code-when-text-TMS ul li {

    line-height: 25px;

    flex-wrap: wrap;

    margin-bottom: 12px;

}

.code-when-image {

    width: 100%;

    max-width: 100%;

    display: none;

}

.code-when-image img {

    width: 100%;

    }

.run-wrap-TMS {

    gap: 20px;

    flex-direction: column;

    padding: 25px;

}

.run-text-TMS {

    padding-left: 0;

    width: 100%;

}

.run-text-TMS h3 {

    font-size: 29px;

    margin-bottom: 10px;

}

.runcheck-wrapTMS {

    padding-top: 5px;

}

.runcheck-box {

    width: 100%;

  }

  .run-video-wrap-TMS {

    display: none;

}

}



/* Small Mobile Devices (max-width: 576px) */

@media (max-width: 576px) {

  .tech-tabs .nav-pills {

    display: flex;

    flex-wrap: nowrap;

    overflow-x: auto;

    white-space: nowrap;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding-bottom: 10px;

    cursor: grab;

  }



  .tech-tabs .nav-pills::-webkit-scrollbar {

    display: none;

  }



  .tech-tabs .nav-pills .nav-link {

    flex: 0 0 auto;

    margin-right: 6px;

    padding: 6px 8px;

    font-size: 14px;

  }



  .tech-tabs .nav-pills .nav-link iconify-icon {

    font-size: 14px;

  }



  /* Existing styles from previous response */

  .hero-title {

    font-size: clamp(1.5rem, 3.5vw, 2rem);

  }



  .hero-subtitle {

    font-size: 12px;

  }



  .home-hero-right {

    height: 300px;

    background-size: 200px 400px;

  }



  .hero-buttons .btn {

    padding: 10px 20px;

    font-size: 0.9rem;

  }



  .section-title,

  .inner-section-title,

  .SecCenterHEading h2 {

    font-size: clamp(1.5rem, 3vw, 2rem);

  }



 .section-subtitle, .serviceTitlePara, .ios-subtitle, .strategy-description, .AboutPara {

    font-size: 1rem;

}



  .service-card,

  .counter-card,

  .industry-card,

  .ai-card,

  .tech-card,

  .feature-card,

  .pricing .card {

    padding: 1rem;

  }



  .service-icon,

  .counter-icon,

  .ai-icon,

  .feature-icon,

  .indus-icon {

    width: 45px;

    height: 45px;

    font-size: 1rem;

  }



  .service-title, .counter-label, .ai-title, .cta-title, .industry-title, .feature-card h4 {

    font-size: 1.4rem;

}

  .counter-number,

  .counter-suffix {

    font-size: clamp(1.8rem, 3.5vw, 2.5rem);

  }



  .ios-mockups {

    height: 300px;

  }



  .iphone-main {

    width: 180px;

    height: 360px;

  }



  .videoSection {

    height: 250px;

  }



  .tech-logo {

    width: 45px;

    height: 45px;

  }



  .tech-logo img {

    width: 35px;

    height: 35px;

  }



 .testimonial-card {

    height: 250px;

}



  .TestimonialWrapper .testimonial-text {

    font-size: 13px;

  }



  .TestimonialWrapper .profile img {

    width: 35px;

    height: 35px;

  }



  .FaqMainWrapper .faq-question {

    font-size: 1rem;

  }



  .FaqMainWrapper .faq-answer p {

    font-size: 0.85rem;

  }



  .contentIdea h4 {

    font-size: 1.8rem;

  }



}

.sticky-container {
            position: sticky;
            top: 20px; /* Offset from top when sticky */
            height: fit-content; /* Ensure it doesn't stretch unnecessarily */
        }