/* Import Navigation Styles */

@import url("nav.css");

* {
  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

body {
  font-family: "poppins", sans-serif;

  background-color: #ffffff;

  color: #333;

  line-height: 1.6;

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  scroll-behavior: smooth;
}

html {
  overflow-x: hidden;

  scroll-behavior: smooth;
  
}

h1 {
  font-size: 3.5rem;

  font-weight: 800;
}

h2 {
  font-size: 2.2rem;

  font-weight: 700;
}

p {
  font-size: 1rem;

  line-height: 1.7;

  color: #f4f8ff;
}

/* Navigation styles moved to nav.css */

/* Hero Section */

#main {
  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  overflow-x: hidden;

  position: relative;
   margin: 0;

  padding: 0;
}

/* Horizontal Slider Styles */

.slider-container {
  width: 100%;

  height: 100vh;

  overflow: hidden;

  position: relative;
}

.slider-wrapper {
  display: flex;

  height: 100%;

  transition: transform 0.6s ease-in-out;

  will-change: transform;
}

.slide {
  min-width: 100vw;

  height: 100vh;

  position: relative;

  flex-shrink: 0;
}

/* AI Automation Section Styles */

.ai-automation {
  position: relative;

  min-height: 90vh;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: url("../images/AI_bg.png") center/cover no-repeat;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  margin: 0;

  margin-top: 80px;

  padding-left: 0;

  padding-right: 0;
}

.ai-automation::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(
    135deg,
    rgba(203, 203, 203, 0.2) 0%,

    rgba(255, 253, 253, 0.1) 50%,

    rgba(234, 221, 221, 0.15) 100%
  );

  z-index: 1;
}

.ai-automation-content {
  width: 90%;

  max-width: 1200px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 3rem;

  position: relative;

  z-index: 2;

  padding-left: 2rem;
}

.ai-automation-text {
  width: 50%;

  display: flex;

  flex-direction: column;
}

.ai-automation-visual {
  display: none;
}

.ai-automation-title {
  font-size: 3.5rem;

  font-weight: 800;

  color: #000;

  line-height: 1.2;

  margin-bottom: 1.5rem;

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

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ai-automation-subtitle {
  font-size: 1.3rem;

  line-height: 1.6;

  color: rgb(44, 44, 44);

  margin-bottom: 2.5rem;

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

  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);

  font-weight: 400;

  max-width: 500px;
}

.ai-automation-buttons {
  display: flex;

  gap: 1.5rem;

  align-items: center;
}
.ai-automation-buttons a{
  text-decoration: none;
}
.ai-automation-btn {
  padding: 1rem 2rem;

  border-radius: 50px;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  border: none;

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

  position: relative;

  overflow: hidden;
}

.ai-automation-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

  color: #ffffff;

  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.ai-automation-btn.primary:hover {
  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.ai-automation-btn.secondary {
  background: transparent;

  color: #ffffff;

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

  backdrop-filter: blur(10px);

  background-color: black;
}

.ai-automation-btn.secondary:hover {
  background: white;

  color: black;

  border-color: rgba(255, 255, 255, 1);

  transform: translateY(-2px);
}

/* DevOps Section Styles */

.devops {
  position: relative;

  min-height: 90vh;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: url("../images/Devops.jpeg") right center/cover no-repeat;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  margin: 0;

  margin-top: 80px;

  padding-left: 0;

  padding-right: 0;
}

.devops::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,

    rgba(255, 255, 255, 0.7) 50%,

    rgba(255, 255, 255, 0.3) 100%
  );

  z-index: 1;
}

.devops-content {
  width: 90%;

  max-width: 1200px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 3rem;

  position: relative;

  z-index: 2;

  padding-left: 2rem;
}

.devops-text {
  width: 50%;

  display: flex;

  flex-direction: column;
}

.devops-visual {
  width: 50%;

  display: none;
}

.devops-title {
  font-size: 3.5rem;

  font-weight: 800;

  color: #1e3a8a;

  line-height: 1.2;

  margin-bottom: 1.5rem;

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

.devops-subtitle {
  font-size: 1.3rem;

  line-height: 1.6;

  color: #64748b;

  margin-bottom: 2.5rem;

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

  font-weight: 400;

  max-width: 500px;
}

.devops-buttons {
  display: flex;

  gap: 1.5rem;

  align-items: center;
}
.devops-buttons a{
  text-decoration: none;
}
.devops-btn {
  padding: 1rem 2rem;

  border-radius: 50px;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  border: none;

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

  position: relative;

  overflow: hidden;
}

.devops-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

  color: #ffffff;

  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

.devops-btn.primary:hover {
  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}

.devops-btn.secondary {
  background: #1e3a8a;

  color: #ffffff;

  border: 2px solid #1e3a8a;

  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.2);
}

.devops-btn.secondary:hover {
  background: #2563eb;

  border-color: #2563eb;

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
}

/* Slider Indicators - Fixed Position */

.slider-indicators {
  position: fixed;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 1rem;

  z-index: 9999;

  transition: opacity 0.3s ease;
}

/* Hide indicators when mobile menu is open */

body.nav-open .slider-indicators {
  opacity: 0;

  pointer-events: none;
}

.slider-indicator {
  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: rgba(26, 26, 46, 0.3);

  cursor: pointer;

  transition: all 0.3s ease;
}

.slider-indicator.active {
  background: #1a1a2e;

  transform: scale(1.2);
}

/* Responsive Design */

@media (max-width: 1024px) {
  .ai-automation-content {
    flex-direction: column;

    padding: 2rem;

    text-align: left;

    justify-content: center;

    padding-left: 2rem;
  }

  .ai-automation-text {
    width: 100%;

    max-width: 100%;

    padding-right: 0;

    margin-bottom: 2rem;
  }

  .ai-automation-title {
    font-size: 2.5rem;
  }

  .ai-automation-subtitle {
    font-size: 1.1rem;
  }

  .ai-automation-buttons {
    justify-content: flex-start;
  }

  .devops-content {
    flex-direction: column;

    padding: 2rem;

    text-align: left;

    justify-content: center;

    padding-left: 2rem;
  }

  .devops-text {
    width: 100%;

    max-width: 100%;

    padding-right: 0;

    margin-bottom: 2rem;
  }

  .devops-title {
    font-size: 2.5rem;
  }

  .devops-subtitle {
    font-size: 1.1rem;
  }

  .devops-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .ai-automation-content {
    padding-left: 1rem;
  }

  .ai-automation-title {
    font-size: 2rem;
  }

  .ai-automation-subtitle {
    font-size: 1rem;
  }

  .ai-automation-buttons {
    flex-direction: column;

    gap: 1rem;

    align-items: flex-start;
  }

  .ai-automation-btn {
    width: 100%;

    max-width: 300px;
  }

  .devops-content {
    padding-left: 1rem;
  }

  .devops-title {
    font-size: 2rem;
  }

  .devops-subtitle {
    font-size: 1rem;
  }

  .devops-buttons {
    flex-direction: column;

    gap: 1rem;

    align-items: flex-start;
  }

  .devops-btn {
    width: 100%;

    max-width: 300px;
  }
}

body.home #hero,
body.home .hero {
  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  overflow: hidden;

  background-color: rgb(69, 120, 187);

  background: url("../images/hero.png") center/cover no-repeat !important;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  margin: 0;

  margin-top: 80px;

  padding-left: 0;

  padding-right: 0;
}

.hero-content {
  width: 90%;

  max-width: 1200px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 3rem;
}

/* Left Side - Text Content */

.hero-text {
  width: 55%;

  display: flex;

  flex-direction: column;
}

/* Right Side - Visual Element */

.hero-visual {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Prevent overflow */
}

/* Floating Card */

.floating-card {
  width: clamp(280px, 90vw, 320px);
  max-width: 320px;
  padding: clamp(20px, 4vw, 30px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  text-align: center;
  animation: float 6s ease-in-out infinite;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Add missing float animation */


.floating-card h3 {
  font-size: 1.5rem;

  font-weight: 700;

  color: #1e3a8a;

  margin-bottom: 0.5rem;
}

.floating-card p {
  font-size: 0.9rem;

  color: #64748b;

  margin-bottom: 1.5rem;
}

.floating-card .stats {
  display: flex;

  justify-content: space-around;

  gap: 1rem;
}

.floating-card .stats div {
  text-align: center;
}

.floating-card .stats h4 {
  font-size: 1.8rem;

  font-weight: 800;

  color: #2563eb;

  margin-bottom: 0.25rem;
}

.floating-card .stats span {
  font-size: 0.8rem;

  color: #64748b;

  font-weight: 500;
}

.hero-title {
  /* margin: 10rem; */

  position: relative;

  width: min(45rem, 100%);

  height: auto;

  font-size: 3.5rem;

  font-weight: 800;

  color: #1e3a8a;

  line-height: 1.2;

  margin-bottom: 0.75rem;

  animation: fadeInUp 1s ease;
}



#element {
  position: relative; /* keep in normal flow (no overlap / no sticky parent issues) */

  display: block;

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

  color: #2563eb;

  font-weight: 600;

  margin: 0;

  margin-top: 0.25rem;

  caret-color: transparent;

  max-width: 100%;

  /* Fix for jumping/blinking */

  min-height: 1.5em; /* Prevent height collapse when empty */

  height: 1.5em; /* Fixed height to prevent reflow */

  /* Hardware acceleration */
}

.hero-subtitle {
  width: min(90%, 60rem);

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

  font-weight: 900;

  display: flex;

  justify-content: center;

  margin-top: 3rem;

  color: rgb(22, 116, 203);

  font-weight: 700;

  letter-spacing: 4px;

  text-transform: uppercase;

  margin-left: auto;

  margin-right: auto;
}

.letter {
  display: inline-block;

  animation: fadeIn 0.8s ease forwards;

  opacity: 0;

  letter-spacing: 18px;
}

.letter:nth-child(1) {
  animation-delay: 0.2s;
}

.letter:nth-child(2) {
  animation-delay: 0.4s;
}

.letter:nth-child(3) {
  animation-delay: 0.6s;
}

.letter:nth-child(4) {
  animation-delay: 0.8s;
}

.letter:nth-child(5) {
  animation-delay: 1s;
}

.letter:nth-child(6) {
  animation-delay: 1.2s;
}

.letter:nth-child(7) {
  animation-delay: 1.4s;
}

.letter:nth-child(8) {
  animation-delay: 1.6s;
}

.letter:nth-child(9) {
  animation-delay: 1.8s;
}

.letter:nth-child(10) {
  animation-delay: 2s;
}

.letter:nth-child(11) {
  animation-delay: 2.2s;
}

.letter:nth-child(12) {
  animation-delay: 2.4s;
}

.letter:nth-child(13) {
  animation-delay: 2.6s;
}

.letter:nth-child(14) {
  animation-delay: 2.8s;
}

.letter-space {
  display: inline-block;

  width: 2rem;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Mobile Responsive - Stack Hero Content Vertically */

@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;

    gap: 2rem;

    text-align: center;
  }

  .hero-text {
    width: 100%;

    align-items: center;
  }

  .hero-visual {
    width: 100%;
    margin-top: 2rem;
    overflow: hidden;
    display:flex;
    flex-direction:column-reverse; /* Prevent overflow */
  }

  /* floating-card responsive sizing handled by clamp() in main style */

  .hero-title {
    font-size: 2rem;

    text-align: center;

    width: 100%;
  }

  .hero-subtitle {
    font-size: 1.8rem;

    justify-content: center;

    width: 100%;
  }
}

/* iPad Responsive - Fix TECH REDEFINED positioning */

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-content {
    gap: 2rem;
  }

  .hero-text {
    width: 50%;
  }

  .hero-visual {
    width: 45%;
  }

  .hero-title {
    font-size: 2.2rem;

    line-height: 1.3;

    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: 2rem;

    letter-spacing: 8px;

    margin-top: 2rem;

    width: 100%;

    justify-content: center;

    margin-left: 15vw;
  }

  /* floating-card responsive sizing handled by clamp() in main style */

  .letter {
    letter-spacing: 8px;
  }

  /* Navigation adjustments for tablets/iPads */

  .nav-links {
    gap: clamp(1rem, 1.5vw, 2rem);
  }

  .nav-links li a {
    font-size: 0.85rem;
  }

  #contact-btn {
    width: 100px;

    font-size: 0.8rem;
  }

  .lang-btn-container {
    width: 100px;
  }

  .lang-btn-container button {
    font-size: 13px;
  }
}

/* Second Section */

#second {
  margin-top: 2rem;

  width: 100%;

  min-height: 120vh;

  background-color: #ffffff;
}

#what h2 {
  padding-top: 7vh;

  color: rgb(57, 101, 159);
}

#what-content {
  width: 80rem;

  font-size: 1.5rem;

  margin-top: 2vh;

  margin-left: 5vw;
}

#sec-para {
  width: 60vw;

  font-size: 1rem;

  margin-top: 1rem;

  margin-left: 5vw;
}

#sec-para p {
  font-family: "inter", sans-serif;

  font-weight: 400;
}

#service_image {
  width: 75vw;

  height: 35vh;

  border-radius: 5%;

  margin-top: 5vh;

  margin-left: 5vw;

  display: flex;

  justify-content: center;

  gap: 10vw;
}

#service_image img {
  width: 24%;

  height: 70%;

  object-fit: cover;

  border-radius: 5%;

  margin-top: 40px;
}

#service_data {
  width: 45vw;

  height: 57vh;

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

  backdrop-filter: blur(10px);

  display: flex;

  flex-direction: column;

  align-items: center;

  border-radius: 10px;
}

#service_data h3 {
  margin-top: 2rem;

  font-size: 1.5rem;

  font-weight: 700;

  color: #1e3a8a;
}

#service_data p {
  width: 80%;

  margin-top: 1rem;

  font-size: 1rem;

  text-align: center;

  font-family: "inter", sans-serif;

  font-weight: 400;

  color: #475569;
}

#service_data li {
  list-style-type: "✔ ";

  color: #1f2933;
}

#service_data button {
  width: 150px;

  height: 40px;

  border: none;

  border-radius: 20px;

  color: white;

  background: #2563eb;

  font-size: 1rem;

  cursor: pointer;

  margin-left: 25vw;

  margin-top: 3vh;
}

#service_data button:hover {
  background-color: rgb(116, 68, 184);
}

#service_data button a {
  color: white;

  text-decoration: none;
}

#third {
  width: 100%;

  min-height: 100vh;

  background-color: #ffffff;
}

.about {
  width: 89vw;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14vw;
}

#aboutus {
  margin-top: 4vh;

  padding: 0px 30px;
}

.headings {
  margin-left: 5vw;
}

#aboutustitle {
  height: 10vh;

  display: flex;

  align-items: end;
}

#aboutus h2 {
  font-size: large;

  font-family: "poppins", sans-serif;

  font-weight: 800;
}

#aboutus h1 {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  font-size: 2.5rem;

  font-weight: 800;

  margin-bottom: 1.5rem;
}

#aboutus h5 {
  width: 25vw;

  font-size: 1rem;

  margin-top: 1rem;

  font-family: "inter", sans-serif;

  font-weight: 400;
}

#aboutus button {
  width: 150px;

  height: 40px;

  background-color: #fc7686;

  border: none;

  border-radius: 20px;

  color: white;

  font-size: 1rem;

  cursor: pointer;

  margin-top: 2rem;
}

#aboutus a {
  color: white;

  text-decoration: none;
}

#aboutus button:hover {
  background-color: #c24a5c;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(251, 113, 133, 0.4);
}

#aboutimage {
  width: 30vw;

  height: 40vh;

  border-radius: 5%;

  margin-top: 5vh;

  margin-right: 5vw;

  display: flex;

  justify-content: center;
}

#aboutimage img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 5%;
}

/* Vision & Mission Box Section */

.vision-mission-section {
  padding: 80px 20px;

  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);

  margin: 60px -20px;
}

.vision-mission-container {
  max-width: 1200px;

  margin: 0 auto;
}

.section-title {
  text-align: center;

  font-size: 2.5rem;

  font-weight: 700;

  color: #2c3e50;

  margin-bottom: 3rem;

  position: relative;
}

.section-title::after {
  content: "";

  position: absolute;

  bottom: -15px;

  left: 50%;

  transform: translateX(-50%);

  width: 80px;

  height: 4px;

  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

  border-radius: 2px;
}

.vision-mission-grid {
  display: grid;

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

  gap: 2rem;

  margin-top: 2rem;
}

.vision-box,
.mission-box {
  background: white;

  border-radius: 20px;

  padding: 2.5rem;

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

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

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;
}

.vision-box::before,
.mission-box::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 5px;

  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

  border-radius: 20px 20px 0 0;
}

.mission-box::before {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.vision-box:hover,
.mission-box:hover {
  transform: translateY(-5px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.vision-box:hover::before,
.mission-box:hover::before {
  height: 8px;
}

.box-icon {
  width: 70px;

  height: 70px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

  font-size: 1.8rem;

  color: white;
}

.vision-box .box-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.mission-box .box-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.box-title {
  font-size: 1.8rem;

  font-weight: 700;

  color: #2c3e50;

  margin-bottom: 1rem;

  position: relative;
}

.box-content {
  color: #666;

  font-size: 1.05rem;

  line-height: 1.7;

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

.box-content p {
  margin: 0;

  color: black;
}

/* Mobile Responsive for Vision & Mission Boxes */

@media (max-width: 768px) {
  .vision-mission-section {
    padding: 60px 20px;

    margin: 40px -20px;
  }

  .section-title {
    font-size: 2rem;

    margin-bottom: 2rem;
  }

  .vision-mission-grid {
    grid-template-columns: 1fr;

    gap: 1.5rem;
  }

  .vision-box,
  .mission-box {
    padding: 2rem;
  }

  .box-icon {
    width: 60px;

    height: 60px;

    font-size: 1.5rem;

    margin-bottom: 1rem;
  }

  .box-title {
    font-size: 1.5rem;
  }

  .box-content {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .vision-mission-section {
    padding: 40px 20px;

    margin: 40px -20px;
  }

  .section-title {
    font-size: 1.8rem;

    margin-bottom: 1.5rem;
  }

  .vision-mission-grid {
    grid-template-columns: 1fr;

    gap: 1rem;
  }

  .vision-box,
  .mission-box {
    padding: 1.5rem;
  }

  .box-icon {
    width: 50px;

    height: 50px;

    font-size: 1.2rem;

    margin-bottom: 0.8rem;
  }

  .box-title {
    font-size: 1.3rem;
  }

  .box-content {
    font-size: 0.9rem;
  }
}

/* What Makes Us Different Section - Split Screen Layout */

.different-section {
  padding: 80px 0;

  background: #ffffff;
}

.different-container {
  display: flex;

  max-width: 1320px;

  margin: 0 auto;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Left Section - Background Image */

.different-left {
  width: 50%;

  height: 980px;

  

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;
}

.different-image-overlay {
  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(
    135deg,
    rgba(33, 97, 160, 0.8),
    rgba(33, 97, 160, 0.3)
  );

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px;
}

.different-content-overlay {
  text-align: center;

  color: #ffffff;

  max-width: 500px;
}

.different-title {
  font-size: 2.5rem;

  font-weight: 800;

  margin-bottom: 20px;

  color: #ffffff;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  line-height: 1.2;
}

.different-description {
  font-size: 1.1rem;

  line-height: 1.6;

  color: #ffffff;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Expertise Overlay - Hidden by default, shown on hover */

.expertise-overlay {
  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(
    135deg,
    rgba(33, 97, 160, 0.95),
    rgba(33, 97, 160, 0.4)
  );

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.4s ease 0.2s,
    visibility 0.4s ease 0.2s;
}

.different-left:hover .expertise-overlay {
  opacity: 1;

  visibility: visible;
}

.different-left:hover .different-content-overlay {
  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.expertise-content {
  text-align: center;

  color: #ffffff;

  max-width: 500px;

  width: 100%;
}

.expertise-title {
  font-size: 2rem;

  font-weight: 800;

  margin-bottom: 30px;

  color: #ffffff;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  line-height: 1.2;
}

.expertise-container {
  display: flex;

  flex-direction: column;

  gap: 20px;

  max-width: 500px;

  margin: 0 auto;
}

.expertise-item {
  display: flex;

  align-items: flex-start;

  padding: 20px;

  background: linear-gradient(135deg, #f8fafc, #e0f2fe);

  border: 1px solid rgba(59, 130, 246, 0.1);

  border-radius: 16px;

  transition: all 0.3s ease;

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

  cursor: pointer;

  position: relative;

  overflow: hidden;
}

.expertise-item:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);

  background: linear-gradient(135deg, #3b82f6, #2563eb);

  border-color: #3b82f6;
}

.expertise-item.active {
  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(59, 130, 246, 0.25);

  background: linear-gradient(135deg, #3b82f6, #2563eb);

  border-color: #2563eb;
}

.expertise-item:hover .expertise-item-title,
.expertise-item.active .expertise-item-title {
  color: #ffffff;
}

.expertise-item:hover .expertise-description,
.expertise-item.active .expertise-description {
  color: #ffffff;
}

.expertise-item:hover .expertise-icon,
.expertise-item.active .expertise-icon {
  background: linear-gradient(135deg, #ffffff, #f0f9ff);

  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.3);
}

.expertise-item:hover .expertise-icon i,
.expertise-item.active .expertise-icon i {
  color: #3b82f6;
}

.expertise-icon {
  width: 50px;

  height: 50px;

  background: linear-gradient(135deg, #3b82f6, #60a5fa);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 15px;

  flex-shrink: 0;

  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);

  transition: all 0.3s ease;
}

.expertise-icon i {
  color: #ffffff;

  font-size: 20px;

  transition: all 0.3s ease;
}

.expertise-content {
  flex: 1;
}

.expertise-item-title {
  font-size: 1.1rem;

  font-weight: 600;

  color: #0f172a;

  margin-bottom: 8px;

  transition: color 0.3s ease;
}

.expertise-description {
  font-size: 0.85rem;

  line-height: 1.5;

  color: #64748b;

  transition: color 0.3s ease;
}

/* Responsive Design for Expertise Section */

@media (max-width: 1024px) {
  .expertise-overlay {
    padding: 30px;
  }

  .expertise-title {
    font-size: 1.6rem;

    margin-bottom: 25px;
  }

  .expertise-container {
    gap: 15px;
  }

  .expertise-item {
    padding: 15px;
  }

  .expertise-icon {
    width: 45px;

    height: 45px;

    margin-right: 12px;
  }

  .expertise-icon i {
    font-size: 18px;
  }

  .expertise-item-title {
    font-size: 1rem;
  }

  .expertise-description {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .expertise-overlay {
    padding: 20px;
  }

  .expertise-title {
    font-size: 1.4rem;

    margin-bottom: 20px;
  }

  .expertise-container {
    gap: 12px;
  }

  .expertise-item {
    flex-direction: column;

    text-align: center;

    padding: 20px 15px;
  }

  .expertise-icon {
    margin-right: 0;

    margin-bottom: 10px;
  }

  .expertise-item-title {
    text-align: center;

    margin-bottom: 6px;
  }

  .expertise-description {
    text-align: center;

    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .expertise-overlay {
    padding: 15px;
  }

  .expertise-title {
    font-size: 1.2rem;

    margin-bottom: 15px;
  }

  .expertise-container {
    gap: 10px;
  }

  .expertise-item {
    padding: 15px 10px;
  }

  .expertise-icon {
    width: 40px;

    height: 40px;
  }

  .expertise-icon i {
    font-size: 16px;
  }

  .expertise-item-title {
    font-size: 0.9rem;
  }

  .expertise-description {
    font-size: 0.7rem;
  }
}

.different-right {
  width: 50%;

  background: #f8fafc;

  padding: 60px 40px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.differentiators-container {
  max-width: 500px;
}

.differentiator-item {
  display: flex;

  align-items: flex-start;

  margin-bottom: 30px;

  padding: 25px;

  background: linear-gradient(135deg, #f8fafc, #e0f2fe);

  border: 1px solid rgba(59, 130, 246, 0.1);

  border-radius: 16px;

  transition: all 0.3s ease;

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

  cursor: pointer;

  position: relative;

  overflow: hidden;
}

.differentiator-item:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);

  background: linear-gradient(135deg, #3b82f6, #2563eb);

  border-color: #3b82f6;
}

.differentiator-item.active {
  transform: translateY(-3px);

  box-shadow: 0 12px 25px rgba(59, 130, 246, 0.25);

  background: linear-gradient(135deg, #3b82f6, #2563eb);

  border-color: #2563eb;
}

.differentiator-item:hover .differentiator-title,
.differentiator-item.active .differentiator-title {
  color: #ffffff;
}

.differentiator-item:hover .differentiator-description,
.differentiator-item.active .differentiator-description {
  color: #ffffff;
}

.differentiator-item:hover .differentiator-icon,
.differentiator-item.active .differentiator-icon {
  background: linear-gradient(135deg, #ffffff, #f0f9ff);

  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.3);
}

.differentiator-item:hover .differentiator-icon i,
.differentiator-item.active .differentiator-icon i {
  color: #3b82f6;
}

.differentiator-icon {
  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, #3b82f6, #60a5fa);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 20px;

  flex-shrink: 0;

  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

.differentiator-icon i {
  color: #ffffff;

  font-size: 24px;
}

.differentiator-content {
  flex: 1;
}

.differentiator-title {
  font-size: 1.3rem;

  font-weight: 600;

  color: #0f172a;

  margin-bottom: 10px;
}

.differentiator-description {
  font-size: 0.95rem;

  line-height: 1.5;

  color: #64748b;
}

/* Responsive Design for Different Section */

@media (max-width: 1024px) {
  .different-container {
    flex-direction: column;

    max-width: 100%;

    padding: 0 20px;
  }

  .different-left {
    width: 100%;

    height: 400px;
  }

  .different-right {
    width: 100%;

    padding: 40px 30px;
  }

  .differentiators-container {
    max-width: 100%;
  }

  .different-title {
    font-size: 2rem;
  }

  .different-description {
    font-size: 1rem;
  }

  .differentiator-item {
    margin-bottom: 25px;

    padding: 20px;
  }

  .differentiator-icon {
    width: 50px;

    height: 50px;

    margin-right: 15px;
  }

  .differentiator-icon i {
    font-size: 20px;
  }

  /* Disable hover effects on mobile for differentiator items */
  .differentiator-item:hover {
    transform: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-color: #e2e8f0;
  }

  .differentiator-item:hover .differentiator-title {
    color: #1e293b;
  }

  .differentiator-item:hover .differentiator-description {
    color: #64748b;
  }

  .differentiator-item:hover .differentiator-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
  }

  .differentiator-item:hover .differentiator-icon i {
    color: #ffffff;
  }

  /* Active state for mobile clicks */
  .differentiator-item.active {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
    border-color: #2563eb;
  }

  .differentiator-item.active .differentiator-title {
    color: #ffffff;
  }

  .differentiator-item.active .differentiator-description {
    color: #ffffff;
  }

  .differentiator-item.active .differentiator-icon {
    background: linear-gradient(135deg, #ffffff, #f0f9ff);
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.3);
  }

  .differentiator-item.active .differentiator-icon i {
    color: #3b82f6;
  }

  .differentiator-title {
    font-size: 1.2rem;
  }

  .differentiator-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .different-section {
    padding: 60px 0;
  }

  .different-left {
    height: 450px;
  }

  /* Mobile Carousel Styles */
  .expertise-carousel {
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .expertise-track {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
  }

  .expertise-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
  }

  .carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .carousel-dot.active {
    background: white;
    transform: scale(1.2);
  }

  .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
  }

  .carousel-nav:hover {
    background: rgba(0, 0, 0, 0.8);
  }

  .carousel-nav.prev {
    left: 10px;
  }

  .carousel-nav.next {
    right: 10px;
  }

  .different-right {
    padding: 30px 20px;
  }

  .different-title {
    font-size: 1.8rem;
  }

  .different-description {
    font-size: 0.95rem;
  }

  .differentiator-item {
    flex-direction: column;

    text-align: center;

    padding: 25px 20px;
  }

  .differentiator-icon {
    margin-right: 0;

    margin-bottom: 15px;
  }

  .differentiator-title {
    text-align: center;

    margin-bottom: 8px;
  }

  .differentiator-description {
    text-align: center;

    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .different-section {
    padding: 40px 0;
  }

  .different-left {
    height: 400px;
  }

  /* Mobile Carousel Styles - Small Phones */
  .expertise-carousel {
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .expertise-track {
    display: flex;
    transition: transform 0.3s ease;
    height: 100%;
  }

  .expertise-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
  }

  .carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
  }

  .carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .carousel-dot.active {
    background: white;
    transform: scale(1.2);
  }

  .carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
  }

  .carousel-nav:hover {
    background: rgba(0, 0, 0, 0.8);
  }

  .carousel-nav.prev {
    left: 8px;
  }

  .carousel-nav.next {
    right: 8px;
  }

  .different-right {
    padding: 20px 15px;
  }

  .different-title {
    font-size: 1.6rem;
  }

  .different-description {
    font-size: 0.9rem;
  }

  .differentiator-item {
    padding: 20px 15px;
  }

  .differentiator-icon {
    width: 45px;

    height: 45px;
  }

  .differentiator-icon i {
    font-size: 18px;
  }

  /* Disable hover effects on mobile for differentiator items */
  .differentiator-item:hover {
    transform: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-color: #e2e8f0;
  }

  .differentiator-item:hover .differentiator-title {
    color: #1e293b;
  }

  .differentiator-item:hover .differentiator-description {
    color: #64748b;
  }

  .differentiator-item:hover .differentiator-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
  }

  .differentiator-item:hover .differentiator-icon i {
    color: #ffffff;
  }

  /* Active state for mobile clicks */
  .differentiator-item.active {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
    border-color: #2563eb;
  }

  .differentiator-item.active .differentiator-title {
    color: #ffffff;
  }

  .differentiator-item.active .differentiator-description {
    color: #ffffff;
  }

  .differentiator-item.active .differentiator-icon {
    background: linear-gradient(135deg, #ffffff, #f0f9ff);
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.3);
  }

  .differentiator-item.active .differentiator-icon i {
    color: #3b82f6;
  }

  .differentiator-title {
    font-size: 1.1rem;
  }

  .differentiator-description {
    font-size: 0.8rem;
  }
}

/* Services Grid Layout */

.services-grid {
  display: grid;

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

  grid-template-rows: auto auto;

  gap: 30px;

  padding: 40px 20px;

  background: #ffffff;

  border-radius: 20px;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);

  width: 90%;

  margin: 0 auto;
}

/* Service Cards */

.service-card {
  background: #f1f7ff;

  border: 1px solid rgba(33, 97, 160, 0.1);

  border-radius: 18px;

  padding: 30px;

  border-radius: 18px;

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

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(33, 97, 160, 0.15);

  background: linear-gradient(135deg, #e0f2ff, #dbeafe);
}

.service-card:hover::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: #2161a0;

  border-radius: 18px 18px 0 0;
}

.service-icon {
  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, #2161a0, #1d4ed8);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  color: white;

  font-size: 24px;
}

.service-content h3 {
  color: #0f172a;

  font-size: 1.4rem;

  font-weight: 700;

  margin-bottom: 12px;

  line-height: 1.3;
}

.service-content p {
  color: #64748b;

  font-size: 1rem;

  line-height: 1.6;

  margin-bottom: 20px;
}

.service-link {
  color: #2161a0;

  text-decoration: none;

  font-weight: 700;

  font-size: 0.9rem;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: color 0.3s ease;
}

.service-link:hover {
  color: #1d4ed8;
}

.service-link:hover::after {
  content: "→";

  margin-left: 4px;

  transition: margin-left 0.3s ease;
}

/* Responsive Design */

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

    padding: 30px 15px;
  }

  .service-card {
    padding: 20px;
  }

  .service-icon {
    width: 50px;

    height: 50px;

    font-size: 20px;

    margin-bottom: 15px;
  }

  .service-content h3 {
    font-size: 1.2rem;

    margin-bottom: 10px;
  }

  .service-content p {
    font-size: 0.9rem;

    margin-bottom: 15px;
  }

  .service-link {
    font-size: 0.85rem;
  }
}

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

    gap: 15px;

    padding: 20px 10px;
  }

  .service-card {
    padding: 15px;
  }

  .service-icon {
    width: 40px;

    height: 40px;

    font-size: 18px;

    margin-bottom: 10px;
  }

  .service-content h3 {
    font-size: 1.1rem;

    margin-bottom: 8px;
  }

  .service-content p {
    font-size: 0.85rem;

    margin-bottom: 12px;
  }

  .service-link {
    font-size: 0.85rem;
  }
}

/* About Section - Split Screen Layout */

.about-section {
  padding: 80px 0;

  background: #ffffff;
}

.about-container {
  display: flex;

  max-width: 1320px;

  margin: 0 auto;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Left Section - Background Image */

.about-left {
  width: 60%;

  height: 800px;

  background: url("../images/about_back.png") center/cover no-repeat;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;
}

.about-image-overlay {
  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(
    to right,
    rgba(33, 97, 160, 0.7),
    rgba(33, 97, 160, 0.2)
  );

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 40px;
}

.about-content-overlay {
  text-align: center;

  color: #ffffff;

  max-width: 500px;
}

.about-title {
  font-size: 2.5rem;

  font-weight: 800;

  margin-bottom: 20px;

  color: #ffffff;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  line-height: 1.2;
}

.about-description {
  font-size: 1.1rem;

  line-height: 1.6;

  color: #ffffff;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Right Section - Values */

.about-right {
  width: 40%;

  background: #f1f7ff;

  padding: 60px 40px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.values-container {
  max-width: 400px;
}

.values-title {
  font-size: 2rem;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 40px;

  text-align: center;
}

.value-item {
  display: flex;

  align-items: flex-start;

  margin-bottom: 30px;

  padding: 20px;

  background: #ffffff;

  border-radius: 12px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

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

.value-item:hover {
  transform: translateY(-5px);

  box-shadow: 0 10px 25px rgba(33, 97, 160, 0.15);
}

.value-icon {
  width: 50px;

  height: 50px;

  background: linear-gradient(135deg, #3b82f6, #60a5fa);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 20px;

  flex-shrink: 0;

  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

.value-icon i {
  color: #ffffff;

  font-size: 20px;
}

.value-content {
  flex: 1;
}

.value-title {
  font-size: 1.2rem;

  font-weight: 600;

  color: #0f172a;

  margin-bottom: 8px;
}

.value-description {
  font-size: 0.9rem;

  line-height: 1.5;

  color: #64748b;
}

/* About Know More Button */

.about-cta {
  text-align: center;

  margin-top: 30px;
}

.about-know-more-btn {
  display: inline-block;

  padding: 12px 30px;

  background: linear-gradient(135deg, #3b82f6, #60a5fa);

  color: #ffffff;

  text-decoration: none;

  border-radius: 25px;

  font-weight: 600;

  font-size: 0.95rem;

  transition: all 0.3s ease;

  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.about-know-more-btn:hover {
  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);

  background: linear-gradient(135deg, #2563eb, #3b82f6);
}

/* Responsive Design */

@media (max-width: 1024px) {
  .about-container {
    flex-direction: column;

    max-width: 100%;

    padding: 0 20px;
  }

  .about-left {
    width: 100%;

    height: 400px;
  }

  .about-right {
    width: 100%;

    padding: 40px 30px;
  }

  .values-container {
    max-width: 100%;
  }

  .about-title {
    font-size: 2rem;
  }

  .about-description {
    font-size: 1rem;
  }

  .values-title {
    font-size: 1.8rem;

    margin-bottom: 30px;
  }

  .value-item {
    margin-bottom: 20px;

    padding: 15px;
  }

  .value-icon {
    width: 40px;

    height: 40px;

    margin-right: 15px;
  }

  .value-icon i {
    font-size: 18px;
  }

  .value-title {
    font-size: 1.1rem;
  }

  .value-description {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: 60px 0;
  }

  .about-left {
    height: 300px;
  }

  .about-right {
    padding: 30px 20px;
  }

  .about-title {
    font-size: 1.8rem;
  }

  .about-description {
    font-size: 0.95rem;
  }

  .values-title {
    font-size: 1.6rem;

    margin-bottom: 25px;
  }

  .value-item {
    flex-direction: column;

    text-align: center;

    padding: 20px 15px;
  }

  .value-icon {
    margin-right: 0;

    margin-bottom: 15px;
  }

  .value-title {
    text-align: center;

    margin-bottom: 5px;
  }

  .value-description {
    text-align: center;

    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .about-section {
    padding: 40px 0;
  }

  .about-left {
    height: 250px;
  }

  .about-right {
    padding: 20px 15px;
  }

  .about-title {
    font-size: 1.6rem;
  }

  .about-description {
    font-size: 0.9rem;
  }

  .values-title {
    font-size: 1.4rem;
  }

  .value-item {
    padding: 15px 10px;
  }

  .value-icon {
    width: 35px;

    height: 35px;

    font-size: 16px;
  }

  .value-title {
    font-size: 1rem;
  }

  .value-description {
    font-size: 0.75rem;
  }
}

body {
  background: #ffffff;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

@media (max-width: 480px) {
  .vision-mission-section {
    padding: 40px 15px;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .vision-box,
  .mission-box {
    padding: 1.5rem;
  }

  .box-icon {
    width: 50px;

    height: 50px;

    font-size: 1.3rem;
  }

  .box-title {
    font-size: 1.3rem;
  }

  .box-content {
    font-size: 0.95rem;
  }
}

#fourth {
  width: 100%;

  height: auto;

  background-color: #ffffff;

  padding: 60px 20px;
}

#industries {
  width: 95vw;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  padding-top: 5vh;

  gap: 2vw;
}

#industry_title {
  margin-left: 5vw;
}

#industry-list {
  width: 80vw;

  margin-left: 10vw;
}

.industry_telecom,
.industry_bfsi,
.industry_finance {
  width: 80vw;

  display: flex;

  gap: 50px;
}

#automotive_data {
  width: 20vw;

  height: 20vh;
}

#telecom_data h2,
#automotive_data h2,
#bfsi_data h2,
#healthcare_data h2,
#finance_data h2 {
  font-size: 1.2rem;

  color: #333;

  background: none;
}

#telecom_image img,
#automotive_image img,
#bfsi_image img,
#healthcare_image img,
#finance_image img {
  width: 100%;

  height: 100%;

  border-radius: 15%;
}

#telecom_image,
#automotive_image,
#bfsi_image,
#healthcare_image,
#finance_image {
  width: 15vw;

  height: 20vh;

  border-radius: 5%;

  margin-right: 2rem;

  object-fit: cover;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-shrink: 0;
}

#telecom_data h4,
#automotive_data h4,
#bfsi_data h4,
#healthcare_data h4,
#finance_data h4 {
  margin-top: 0.5rem;

  font-size: 0.9rem;

  color: #333;

  font-weight: 500;

  text-align: left;

  width: 240px;
}

/* Industry items - side by side layout */

#industry-item1,
#industry-item2,
#industry-item3,
#industry-item4,
#industry-item5 {
  display: flex;

  align-items: flex-start;

  gap: 2rem;

  margin-bottom: 2rem;
}

/* Data containers */

#telecom_data,
#automotive_data,
#bfsi_data,
#healthcare_data,
#finance_data {
  display: flex;

  flex-direction: column;

  gap: 0.5rem;
}

#industry_button {
  width: max-content; /* stable width */

  min-width: 220px; /* safe tap size */

  height: 44px; /* mobile standard */

  padding: 0 24px;

  background-color: #3d82f1;

  border: none;

  border-radius: 20px;

  color: white;

  font-size: 1rem;

  cursor: pointer;

  /* 🔴 REMOVE ALL vh / vw margins */

  margin: 32px auto 0;

  display: flex;

  justify-content: center;

  align-items: center;

  /* 🔥 CRITICAL */
 

  box-sizing: border-box;

  touch-action: manipulation;
}

#industry_button {
  align-self:center;
}

#industry_button a {
  color: white;

  text-decoration: none;
}

#industry_button:hover {
  background-color: #0052cc;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(251, 113, 133, 0.4);
}

#automotive_data h4 {
  width: 100%;

  height: auto;
}

#different {
  width: 100%;

  min-height: auto;

  background-color: #ffffff;

  margin-left: -5vw;
}

#enterprise_grade {
  background: radial-gradient(
    circle at center,

    rgba(15, 76, 129, 1) 0%,

    rgba(7, 54, 104, 1) 40%,

    rgba(3, 31, 66, 1) 80%,

    rgba(0, 15, 36, 1) 100%
  );

  position: relative;

  padding: 10px;

  height: 10rem;

  border-radius: 20px;

  overflow: hidden;

  color: white;

  margin-top: 5vh;

  gap: 40px;

  margin-left: 10%;
}

#enterprise_grade h2 {
  font-size: 1.5rem;
}

#grade_rocket {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-left: 25vw;
}

#enterprise_grade p {
  width: 90%;

  margin-top: 1rem;

  font-size: 1rem;

  text-align: center;

  font-family: "inter", sans-serif;

  font-weight: 600;

  padding: 0px 40px;
}

#diff_automate {
  width: 90%;

  height: 11rem;

  background-color: #e6d6ff;

  display: flex;

  flex-direction: column;

  align-items: center;

  border-radius: 20px;

  margin-top: 12vh;

  margin-left: 10%;
}

#diff_gear i {
  font-size: 40px;

  color: rgb(7, 7, 7);
}

#diff_gear {
  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 800;

  margin-top: 1rem;
}

#diff_automate p {
  width: 80%;

  margin-top: 1rem;

  font-size: 1rem;

  text-align: center;

  font-family: "inter", sans-serif;

  font-weight: 600;
}

#diff_cloud {
  width: 90%;

  height: 11rem;

  background: radial-gradient(
    circle at top left,
    #4da6ff,
    #0052cc 60%,
    #003366
  );

  display: flex;

  flex-direction: column;

  align-items: center;

  border-radius: 20px;

  margin-top: 12vh;

  margin-left: 10%;
}

#diff_cloud_icon,
#diff_secure_icon {
  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 800;

  margin-top: 1rem;
}

#diff_cloud_icon i {
  font-size: 40px;

  color: white;
}

#diff_cloud p,
#diff_secure p {
  width: 80%;

  margin-top: 1rem;

  font-size: 1rem;

  text-align: center;

  font-family: "inter", sans-serif;

  font-weight: 600;
}

#diff_secure {
  background-color: rgb(214, 162, 162);

  width: 90%;

  height: 11rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  border-radius: 20px;

  margin-top: 12vh;

  margin-left: 10%;
}

#diff_secure_icon i {
  font-size: 40px;

  color: rgb(97, 2, 2);
}

#engagement_page {
  width: 100%;

  padding: 60px 20px;

  margin-top: 5em;

  text-align: center;

  background-color: #ffffff;
}

#engagement_title h1 {
  font-size: 3rem;

  font-weight: 700;

  color: #000;

  margin-bottom: 60px;
}

.engagement_container {
  position: relative;

  max-width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: auto auto;

  gap: 40px;

  align-items: center;

  justify-items: center;
}

#engagement_image {
  grid-column: 1 / 3;

  grid-row: 1 / 3;

  width: 350px;

  height: 250px;

  z-index: 10;
}

#engagement_image img {
  width: 90%;

  height: 90%;

  object-fit: cover;

  border-radius: 20px;
}

.model-card {
  width: 280px;

  padding: 30px;

  border-radius: 20px;

  text-align: center;

  transition: all 0.3s ease;

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

  position: relative;

  overflow: hidden;
}

.model-icon {
  width: 70px;

  height: 70px;

  margin: 0 auto 20px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  color: white;

  transition: all 0.3s ease;
}

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

  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.model-card.model-beige .model-icon {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);

  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.model-card.model-gray .model-icon {
  background: linear-gradient(135deg, #6b7280, #9ca3af);

  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.model-card.model-cyan .model-icon {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);

  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.model-card h2 {
  font-size: 1.4rem;

  font-weight: 700;

  margin-bottom: 15px;

  transition: color 0.3s ease;
}

.model-card p {
  font-size: 0.95rem;

  line-height: 1.6;

  font-weight: 500;

  transition: color 0.3s ease;
}

.model-card:hover {
  transform: scale(1.05) translateY(-5px);

  z-index: 5;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

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

.model-card.model-pink:hover h2,
.model-card.model-pink:hover p {
  color: #ffffff;
}

.model-card.model-pink:hover .model-icon {
  background: linear-gradient(135deg, #ffffff, #fce7f3);

  color: #ec4899;

  transform: rotate(360deg) scale(1.1);
}

.model-card.model-beige:hover {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.model-card.model-beige:hover h2,
.model-card.model-beige:hover p {
  color: #ffffff;
}

.model-card.model-beige:hover .model-icon {
  background: linear-gradient(135deg, #ffffff, #fef3c7);

  color: #f59e0b;

  transform: rotate(360deg) scale(1.1);
}

.model-card.model-gray:hover {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.model-card.model-gray:hover h2,
.model-card.model-gray:hover p {
  color: #ffffff;
}

.model-card.model-gray:hover .model-icon {
  background: linear-gradient(135deg, #ffffff, #f3f4f6);

  color: #6b7280;

  transform: rotate(360deg) scale(1.1);
}

.model-card.model-cyan:hover {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
}

.model-card.model-cyan:hover h2,
.model-card.model-cyan:hover p {
  color: #ffffff;
}

.model-card.model-cyan:hover .model-icon {
  background: linear-gradient(135deg, #ffffff, #ecfeff);

  color: #06b6d4;

  transform: rotate(360deg) scale(1.1);
}

/* Model 1 - Top Left - Pink */

#model1 {
  grid-column: 1;

  grid-row: 1;

  background-color: #f5d5d5;

  color: #000;

  width: 360px;

  /* margin-right: 3vw; */
}

/* Model 2 - Top Right - Beige */

#model2 {
  grid-column: 2;

  grid-row: 1;

  background-color: #e8d8b8;

  color: #000;

  width: 360px;

  margin-left: 2vw;
}

/* Model 3 - Bottom Left - Gray */

#model3 {
  grid-column: 1;

  grid-row: 2;

  background-color: #e0e0e0;

  color: #000;

  width: 360px;
}

/* Model 4 - Bottom Right - Cyan */

#model4 {
  grid-column: 2;

  grid-row: 2;

  background-color: #b8e0d8;

  color: #000;

  width: 360px;

  margin-left: 2vw;
}

#model22 {
  width: 30vw;

  height: 35vh;

  background-color: #4f1d9f;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;
}

/* ===============================



   ENGAGEMENT MODELS – HOVER LOGIC



================================ */

/* Smooth transition */

#engagement_image {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* When ANY model is hovered → hide image */

.engagement_container:has(.model-card:hover) #engagement_image {
  opacity: 0;

  transform: scale(0.95);

  pointer-events: none;
}

/* Highlight hovered model */

.model-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.model-card:hover {
  transform: scale(1.05);

  z-index: 5;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Sixth Page - Contact Section */

#six {
  width: 95%;

  margin-top: 0;

  margin-left: 6%;
}

#contactbox {
  margin: 0 auto;

  text-align: center;
}

#contactbox h1 {
  font-size: 2rem;

  font-weight: 700;

  color: #000;

  margin: 0;
}

#contactbox {
  width: 65vw;

  height: 30vh;

  padding-top: 15px;

  background: linear-gradient(135deg, #2563eb, #38bdf8);

  border-radius: 24px;

  color: white;

  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
}

#contactbox h2 {
  font-size: 1.5rem;

  font-weight: 600;

  color: white;
}

#contactbox h1 {
  color: rgba(255, 255, 255, 0.9);

  font-weight: 500;
}

#contactbox button {
  width: 150px;

  height: 40px;

  background: white;

  border: none;

  border-radius: 20px;

  color: #2563eb;

  font-size: 1rem;

  cursor: pointer;

  margin-top: 2rem;
}

#contactbox button:hover {
  background-color: #1d4ed8;

  color: white;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(251, 113, 133, 0.4);
}

#contactbox a {
  color: #2563eb;

  text-decoration: none;
}

/* Footer styles removed - using global footer.css */

/* Footer styles removed - using global footer.css */

/* Mobile Navigation */

@media (max-width: 768px) {
  .nav-container {
    padding-left: 20px;
  }

  .mobile-menu-btn {
    display: inline-flex;

    margin-left: 12px;
  }
}

@media (max-width: 480px) {
  .nav-links {
    width: 100%;

    padding: 84px 20px 20px;
  }

  .hero-content h1 {
    font-size: 2rem;
  }
  
  
}

/* ============================================



   COMPREHENSIVE RESPONSIVE STYLES



   Desktop (≥1200px) remains unchanged



   ============================================ */

/* Prevent horizontal overflow globally on smaller screens */

@media (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }

  #main {
    overflow-x: hidden;
  }
}

/* ============================================



   TABLET / iPad (768px - 1024px)



   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Navigation adjustments */

  .nav-container {
    width: 95%;

    padding-left: 20px;

    padding-right: 20px;

    margin-left: 2.5%;
  }

  .nav-links {
    margin-left: auto;

    gap: clamp(1rem, 2vw, 2rem);

    justify-content: flex-end;
  }

  .logo {
    margin-left: 3%;

    margin-right: auto;
  }

  /* Hero Section */

  .hero {
    min-height: auto;

    padding-top: 80px;
  }

  .hero-content {
    margin-left: clamp(1rem, 3vw, 2rem);

    margin-top: 5rem;

    height: auto;
  }

  .hero-title {
    width: clamp(80%, 85vw, 45vw);

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

    margin-top: 23vh;
  }

  #element {
    margin: 0;

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

    position: relative;

    width: 100%;
  }

  .hero-subtitle {
    width: 100%;

    font-size: clamp(2.3rem, 4.5vw, 3rem);

    margin-top: 7.5rem;

    justify-content: center;
  }

  .letter {
    letter-spacing: clamp(5px, 2vw, 15px);
  }

  .letter-space {
    width: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  /* What We Do Section */

  #second {
    height: auto;

    padding-bottom: 5vh;
  }

  #what-content {
    width: 90%;

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

    margin-left: 5vw;
  }

  #sec-para {
    width: 85%;

    font-size: clamp(0.9rem, 1.5vw, 1rem);
  }

  #service_image {
    width: 90%;

    flex-direction: column;

    gap: 3vh;

    height: auto;

    margin-left: 5vw;

    align-items: center;
  }

  #service_image img {
    width: 100%;

    height: auto;

    max-height: 250px;

    margin-top: 0;
  }

  #service_data {
    width: 100%;

    height: auto;

    padding: 2rem 1.5rem;
  }

  #service_data button {
    margin-left: 0;

    margin-top: 2vh;
  }

  /* About Us Section */

  #third {
    height: 80em;

    padding-bottom: 5vh;
  }

  .about {
    flex-direction: column;

    width: 95%;

    gap: 5vh;
  }

  #aboutus h5 {
    width: 90%;

    max-width: 600px;
  }

  #aboutimage {
    width: 90%;

    max-width: 500px;

    height: auto;

    margin-right: 0;
  }

  /* Industries Section */

  #fourth {
    padding: 40px clamp(10px, 3vw, 20px);
  }

  #industry-list {
    width: 95%;

    margin-left: 2.5vw;
  }

  .industry_telecom,
  .industry_bfsi,
  .industry_finance {
    width: 100%;

    gap: clamp(20px, 5vw, 50px);
  }

  #telecom_image,
  #automotive_image,
  #bfsi_image,
  #healthcare_image,
  #finance_image {
    width: clamp(120px, 18vw, 15vw);

    height: auto;

    min-height: 120px;
  }

  #telecom_data h4,
  #automotive_data h4,
  #bfsi_data h4,
  #healthcare_data h4,
  #finance_data h4 {
    width: 100%;

    max-width: 400px;
  }

  #industry_button {
    width: clamp(200px, 60vw, 300px);

    height: 44px;

    margin: 4vh auto 0;

    font-size: clamp(0.9rem, 3vw, 1rem);

    /* ❌ REMOVE */

    /* margin-left: 50%; */

    /* transform: translateX(-50%); */
  }

  /* What Makes Us Different */

  #different {
    height: auto;

    padding-bottom: 5vh;

    margin-left: 0;
  }

  #enterprise_grade {
    width: 95%;

    margin-left: 2.5vw;
  }

  #grade_rocket {
    margin-left: 5vw;
  }

  #enterprise_grade,
  #diff_automate,
  #diff_cloud,
  #diff_secure {
    width: 95%;

    margin-left: 2.5vw;

    height: auto;

    min-height: 15vh;

    padding: 2rem 1.5rem;
  }

  /* Engagement Models */

  #engagement_page {
    padding: 40px clamp(15px, 3vw, 20px);
  }

  .engagement_container {
    max-width: 90%;

    gap: 30px;
  }

  #engagement_image {
    width: 300px;

    height: 220px;
  }

  .model-card {
    width: clamp(250px, 35vw, 360px);
  }

  #model1,
  #model2,
  #model3,
  #model4 {
    width: clamp(250px, 35vw, 360px);

    margin-left: 0;

    margin-right: 0;
  }

  /* Contact Section */

  #contactbox {
    width: 90%;

    height: auto;

    padding: 5vh 3vw;
  }

  #contactbox h1 {
    font-size: clamp(2.8rem, 4vw, 3.8rem);
  }

  #contactbox h2 {
    font-size: clamp(2.3rem, 3.5vw, 3.1rem);
  }

  /* Footer */

  #footbox {
    margin-left: 0;

    width: 100%;

    height: fit-content;

    padding: 30px clamp(15px, 3vw, 30px);
  }

  #footabout {
    width: 95%;

    flex-direction: column;

    gap: 2rem;

    align-items: center;
  }

  #footlogo {
    width: auto;

    margin-top: 0;
  }

  #footabout_title {
    width: 100%;

    max-width: 400px;

    text-align: center;
  }

  #footnav {
    width: 100%;

    margin-left: 0;

    gap: 10vw;

    justify-content: center;
  }
}

/* ============================================



   ASUS ZENBOOK FOLD (854px - 1024px)



   ============================================ */

@media (min-width: 854px) and (max-width: 1024px) {
  .nav-container {
    width: 92%;

    padding-left: 15px;

    padding-right: 15px;

    margin-left: 6%;
  }

  .nav-links {
    margin-left: auto;

    gap: clamp(1.2rem, 2.2vw, 2.2rem);

    justify-content: flex-end;
  }

  .logo img {
    margin-left: 6%;

    margin-right: auto;
  }
}

/* ============================================



   IPAD AIR (820px - 1180px)



   ============================================ */

@media (min-width: 820px) and (max-width: 1180px) {
  .nav-container {
    width: 93%;

    display: flex;

    align-items: center;

    justify-content: center;
  }

  .nav-links {
    margin-left: 2%;

    gap: clamp(1.3rem, 2.3vw, 2.3rem);

    justify-content: flex-end;
  }

  .logo img {
    margin-top: 0vh;
  }
}

/* ============================================



   LARGE MOBILE / SMALL TABLET (≤768px)



   ============================================ */

@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  /* Navigation - already handled above, adding logo adjustments */

  .nav-container {
    padding-left: clamp(10px, 3vw, 20px);
  }

  .logo-text {
    font-size: clamp(18px, 4vw, 22px);
  }

  .logo-img {
    width: clamp(24px, 5vw, 32px);
  }

  .logo {
    margin-right: 50%;
  }

  /* Hero Section */

  .hero {
    min-height: auto;

    padding-top: 70px;

    padding-bottom: 30px;
  }

  .hero::before {
    width: 400px;

    height: 400px;
  }

  .hero-content {
    margin-left: clamp(10px, 3vw, 2rem);

    margin-top: 3rem;

    height: auto;
  }

  .hero-title {
    position: relative;

    width: 100%;

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

    margin-bottom: 1.5rem;

    line-height: 1.3;
  }

  #element {
    position: relative;

    margin: 1rem 0 0 0;

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

    display: block;

    width: 100%;
  }

  .hero-subtitle {
    width: 100%;

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

    margin-top: 2rem;

    flex-wrap: wrap;

    justify-content: center;
  }

  .letter {
    letter-spacing: clamp(5px, 2vw, 15px);
  }

  .letter-space {
    width: clamp(0.5rem, 2vw, 2rem);
  }

  /* What We Do Section */

  #second {
    height: auto;

    padding-bottom: 5vh;

    margin-top: 0;
  }

  #what h2 {
    padding-top: 5vh;

    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }

  .headings {
    margin-left: clamp(10px, 3vw, 5vw);
  }

  #what-content {
    width: 95%;

    font-size: clamp(1.1rem, 4vw, 1.5rem);

    margin-left: clamp(10px, 3vw, 5vw);

    margin-top: 1.5vh;
  }

  #what-content h1 {
    font-size: clamp(1.1rem, 4vw, 1.5rem);

    line-height: 1.4;
  }

  #sec-para {
    width: 90%;

    font-size: clamp(0.9rem, 3vw, 1rem);

    margin-left: clamp(10px, 3vw, 5vw);

    line-height: 1.6;
  }

  #service_image {
    width: 95%;

    flex-direction: column;

    gap: 3vh;

    height: auto;

    margin-left: clamp(10px, 3vw, 5vw);

    margin-top: 3vh;

    align-items: center;
  }

  #service_image img {
    width: 100%;

    max-width: 400px;

    height: auto;

    max-height: 250px;

    margin-top: 0;
  }

  #service_data {
    width: 100%;

    height: auto;

    padding: 2rem 1.5rem;

    min-height: auto;
  }

  #service_data h3 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }

  #service_data p {
    font-size: clamp(0.9rem, 3vw, 1rem);

    line-height: 1.6;
  }

  #service_data ul {
    margin-top: 1rem;
  }

  #service_data li {
    font-size: clamp(0.9rem, 3vw, 1rem);

    margin-bottom: 0.5rem;
  }

  #service_data button {
    width: clamp(140px, 40vw, 150px);

    height: 44px;

    margin-left: 0;

    margin-top: 2vh;

    font-size: clamp(0.9rem, 3vw, 1rem);
  }

  /* About Us Section */

  #third {
    height: auto;

    padding-bottom: 5vh;
  }

  .about {
    flex-direction: column;

    width: 95%;

    gap: 4vh;

    margin-left: clamp(10px, 3vw, 5vw);
  }

  #aboutus {
    margin-top: 3vh;

    padding: 0 clamp(15px, 4vw, 30px);

    width: 100%;
  }

  #aboutustitle {
    height: auto;
  }

  #aboutus h2 {
    font-size: clamp(1rem, 3vw, large);
  }

  #aboutus h1 {
    font-size: clamp(1.8rem, 5vw, 2.5rem);

    margin-bottom: 1rem;
  }

  #aboutus h5 {
    width: 100%;

    font-size: clamp(0.9rem, 3vw, 1rem);

    line-height: 1.6;
  }

  #aboutus button {
    width: clamp(130px, 35vw, 150px);

    height: 44px;

    font-size: clamp(0.9rem, 3vw, 1rem);
  }

  #aboutimage {
    width: 95%;

    max-width: 500px;

    height: auto;

    margin-right: 0;

    margin-top: 2vh;
  }

  /* Industries Section */

  #fourth {
    padding: 40px clamp(10px, 3vw, 20px);
  }

  #industries {
    width: 100%;

    height: auto;

    padding-top: 3vh;
  }

  #industry_title {
    margin-left: clamp(10px, 3vw, 5vw);
  }

  #industry_title h2 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }

  #industry-list {
    width: 95%;

    margin-left: clamp(10px, 3vw, 10vw);
  }

  .industry_telecom,
  .industry_bfsi,
  .industry_finance {
    width: 100%;

    flex-direction: column;

    gap: 2vh;
  }

  #industry-item1,
  #industry-item2,
  #industry-item3,
  #industry-item4,
  #industry-item5 {
    flex-direction: column;

    align-items: center;

    text-align: center;

    width: 100%;

    margin-bottom: 3vh;

    gap: 1.5rem;
  }

  #telecom_image,
  #automotive_image,
  #bfsi_image,
  #healthcare_image,
  #finance_image {
    width: 100%;

    max-width: 300px;

    height: auto;

    min-height: 200px;

    margin-right: 0;

    margin-bottom: 1rem;
  }

  #telecom_data,
  #automotive_data,
  #bfsi_data,
  #healthcare_data,
  #finance_data {
    width: 100%;

    max-width: 500px;
  }

  #telecom_data h2,
  #automotive_data h2,
  #bfsi_data h2,
  #healthcare_data h2,
  #finance_data h2 {
    font-size: clamp(1.1rem, 4vw, 1.2rem);

    text-align: center;
  }

  #telecom_data h4,
  #automotive_data h4,
  #bfsi_data h4,
  #healthcare_data h4,
  #finance_data h4 {
    width: 100%;

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

    text-align: center;

    margin-top: 0.8rem;
  }

  /* What Makes Us Different */

  #different {
    height: auto;

    padding-bottom: 5vh;

    margin-left: 0;
  }

  #what_differ h2 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);

    margin-left: clamp(10px, 3vw, 5vw);
  }

  #enterprise_grade {
    width: 95%;

    margin-left: 2.5vw;

    margin-top: 3vh;

    padding: 2rem 1.5rem;
  }

  #grade_rocket {
    margin-left: 0;

    justify-content: center;

    flex-wrap: wrap;
  }

  #enterprise_grade h2 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }

  #enterprise_grade p {
    font-size: clamp(0.9rem, 3vw, 1rem);

    width: 100%;

    padding: 0;

    line-height: 1.6;
  }

  #enterprise_grade,
  #diff_automate,
  #diff_cloud,
  #diff_secure {
    width: 95%;

    margin-left: 2.5vw;

    height: auto;

    min-height: auto;

    padding: 2rem 1.5rem;

    margin-top: 3vh;
  }

  #diff_gear,
  #diff_cloud_icon,
  #diff_secure_icon {
    justify-content: center;

    flex-wrap: wrap;

    gap: 0.8rem;
  }

  #diff_gear i,
  #diff_cloud_icon i,
  #diff_secure_icon i {
    font-size: clamp(32px, 8vw, 40px);
  }

  #diff_gear h2,
  #diff_cloud_icon h2,
  #diff_secure_icon h2 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  #diff_automate p,
  #diff_cloud p,
  #diff_secure p {
    font-size: clamp(0.9rem, 3vw, 1rem);

    width: 100%;

    line-height: 1.6;
  }

  /* Engagement Models */

  #engagement_page {
    padding: 40px clamp(10px, 3vw, 20px);
  }

  #engagement_title h1 {
    font-size: clamp(2rem, 6vw, 3rem);

    margin-bottom: 40px;
  }

  .engagement_container {
    max-width: 100%;

    grid-template-columns: 1fr;

    grid-template-rows: auto;

    gap: 30px;

    justify-items: center;
  }

  #engagement_image {
    grid-column: 1;

    grid-row: auto;

    width: 100%;

    max-width: 400px;

    height: auto;

    min-height: 250px;

    order: -1;
  }

  #engagement_image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
  }

  .model-card {
    width: 100%;

    max-width: 400px;

    padding: clamp(20px, 5vw, 30px);
  }

  #model1,
  #model2,
  #model3,
  #model4 {
    grid-column: 1;

    grid-row: auto;

    width: 100%;

    max-width: 400px;

    margin-left: 0;

    margin-right: 0;
  }

  .model-card h2 {
    font-size: clamp(1.2rem, 4vw, 1.4rem);
  }

  .model-card p {
    font-size: clamp(0.9rem, 3vw, 0.95rem);

    line-height: 1.6;
  }

  /* Contact Section */

  #six {
    margin-top: 0;

    margin-left: 0;
  }

  #contactbox {
    width: 95%;

    height: auto;

    padding: 4vh 3vw;

    margin: 0 auto;
  }

  #contactbox h2 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);

    margin-bottom: 1rem;
  }

  #contactbox h1 {
    font-size: clamp(1.3rem, 5vw, 2rem);

    line-height: 1.4;
  }

  #contactbox button {
    width: clamp(130px, 40vw, 150px);

    height: 44px;

    font-size: clamp(0.9rem, 3vw, 1rem);

    margin-top: 1.5rem;
  }

 
  /* Footer - using global footer.css */

    /* Navigation */

    .nav-container {
      padding-left: 10px;

      padding-right: 10px;
    }

    #contact-btn {
      white-space: nowrap;

      padding: 10px 10px;
    }

    .mobile-menu-btn {
      width: 100%;

      height: 40px;

      font-size: 1.4rem;
    }

    .nav-container {
      display: flex;

      align-items: center;

      justify-content: space-between;
    }

    .logo {
      margin-right: 30%;
    }

    /* Hero Section */

    .hero {
      padding-top: 60px;

      padding-bottom: 20px;
    }

    .hero::before {
      width: 300px;

      height: 300px;
    }

    .hero-content {
      margin-left: 10px;

      margin-top: 8rem;
    }

    .hero-title {
      font-size: clamp(1.5rem, 7vw, 1.8rem);

      line-height: 1.3;

      margin-top: 20vh;
    }

    #element {
      font-size: clamp(1.2rem, 6vw, 1.5rem);

      margin-top: 0.8rem;
    }

    .hero-subtitle {
      font-size: clamp(1.8rem, 8vw, 2.5rem);

      margin-top: 5.8rem;
    }

    .letter {
      letter-spacing: clamp(2px, 1.5vw, 8px);
    }

    /* What We Do */

    #what h2 {
      padding-top: 3vh;

      font-size: 1.1rem;
    }

    .headings {
      margin-left: 10px;
    }

    #what-content {
      margin-left: 10px;

      margin-top: 1vh;
    }

    #what-content h1 {
      font-size: clamp(1rem, 5vw, 1.3rem);
    }

    #sec-para {
      margin-left: 10px;

      font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    }

    #service_image {
      margin-left: 10px;

      margin-top: 2vh;
    }

    #service_data {
      padding: 1.5rem 1rem;
    }

    #service_data h3 {
      font-size: 1.1rem;
    }

    #service_data p,
    #service_data li {
      font-size: clamp(0.85rem, 3.5vw, 0.9rem);
    }

    #service_data button {
      width: 130px;
    }

    /* About Us */

    .about {
      margin-left: 10px;
    }

    #aboutus {
      padding: 0 15px;
    }

    #aboutus h1 {
      font-size: clamp(1.5rem, 6vw, 1.8rem);
    }

    #aboutus h5 {
      font-size: clamp(0.85rem, 3.5vw, 0.95rem);
    }

    #aboutus button {
      width: 120px;

      height: 42px;
    }

    /* Industries */

    #fourth {
      padding: 30px 10px;
    }

    #industry_title {
      margin-left: 10px;
    }

    #industry-list {
      margin-left: 10px;
    }

    #telecom_image,
    #automotive_image,
    #bfsi_image,
    #healthcare_image,
    #finance_image {
      max-width: 280px;

      min-height: 180px;
    }

    #telecom_data h2,
    #automotive_data h2,
    #bfsi_data h2,
    #healthcare_data h2,
    #finance_data h2 {
      font-size: 1rem;
    }

    #telecom_data h4,
    #automotive_data h4,
    #bfsi_data h4,
    #healthcare_data h4,
    #finance_data h4 {
      font-size: clamp(0.85rem, 3.5vw, 0.9rem);
    }

    /* What Makes Us Different */

    #what_differ h2 {
      margin-left: 10px;

      font-size: 1.1rem;
    }

    #enterprise_grade {
      margin-left: 2.5vw;

      padding: 1.5rem 1rem;
    }

    #enterprise_grade h2 {
      font-size: 1.1rem;
    }

    #enterprise_grade p {
      font-size: clamp(0.85rem, 3.5vw, 0.9rem);
    }

    #diff_automate,
    #diff_cloud,
    #diff_secure {
      margin-left: 2.5vw;

      padding: 1.5rem 1rem;

      margin-top: 2vh;
    }

    #diff_gear i,
    #diff_cloud_icon i,
    #diff_secure_icon i {
      font-size: 28px;
    }

    #diff_gear h2,
    #diff_cloud_icon h2,
    #diff_secure_icon h2 {
      font-size: 1rem;
    }

    #diff_automate p,
    #diff_cloud p,
    #diff_secure p {
      font-size: clamp(0.85rem, 3.5vw, 0.9rem);
    }

    /* Engagement Models */

    #engagement_page {
      padding: 30px 10px;
    }

    #engagement_title h1 {
      font-size: clamp(1.8rem, 7vw, 2.5rem);

      margin-bottom: 30px;
    }

    #engagement_image {
      max-width: 100%;

      min-height: 200px;
    }

    .model-card {
      padding: 20px 15px;
    }

    .model-card h2 {
      font-size: 1.1rem;

      margin-bottom: 12px;
    }

    .model-card p {
      font-size: clamp(0.85rem, 3.5vw, 0.9rem);
    }

    /* Contact */

    #contactbox {
      width: 98%;

      padding: 3vh 4vw;
    }

    #contactbox h2 {
      font-size: 1.1rem;
    }

    #contactbox h1 {
      font-size: clamp(1.2rem, 6vw, 1.5rem);
    }

    #contactbox button {
      width: 120px;

      height: 42px;

      font-size: 0.9rem;
    }

    /* Footer - using global footer.css */

   

  /* ============================================



   LARGE SCREENS (≥1440px) - Optional enhancements



   ============================================ */

  @media (min-width: 1440px) {
    .engagement_container {
      max-width: 1400px;
    }

    .section-container {
      max-width: 1400px;
    }
  }

  @media (max-width: 768px) {
    #engagement_image {
      opacity: 1 !important;

      transform: none !important;
    }
  }

  @media (min-width: 768px) and (max-width: 804px) {
    #contact-btn {
      white-space: nowrap;

      padding: 10px 10px;
    }
  }
}

/*media query especially for galazy z fold*/

@media (max-width: 350px) {
  .hero-subtitle {
    width: 100%;

    font-size: 20px;
  }
}

/* Mobile Navigation - Increased spacing for index page */

@media (max-width: 768px) {
  #main-nav .nav-links {
    gap: 2rem !important; /* Increased from 0.5rem to 1rem */
  }
}
@media (max-width:480px){
  .hero-text, .hero-visual{
   margin-top: -25vh;
  
  }
  .hero-content{
     display:flex;
     padding: 20px;
     padding-top: 60px; /* Added padding-top for mobile frontpage */
     gap:15vh;
   flex-direction:column-reverse;
  }
  
   .hero-subtitle {
    width:100vh;
    margin-left:-30vh;
   margin-top:-1vh;
   padding-top:5vh;
   /* Increased from 100vh to fit both dashboard and Tech Redefined */
  }
}