* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

:root {
  --primary         : #1489e1;
  --primary-light   : #1489e1;
  --teal            : hsl(182, 25%, 50%);
  --background      : hsl(0, 0%, 100%);
  --foreground      : hsl(215, 16%, 25%);
  --muted           : hsl(210, 20%, 95%);
  --muted-foreground: hsl(215, 16%, 47%);
  --border          : hsl(210, 20%, 88%);
  --card            : hsl(0, 0%, 99%);
  --shadow          : 0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  --shadow-lg       : 0px 10px 20px -4px rgba(0, 0, 0, 0.12);
  --shadow-3d       : 0 20px 60px rgba(0, 0, 0, 0.3);
  --secondary       : #1489e1 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family     : 'Open Sans', sans-serif !important;
  color           : var(--foreground);
  background-color: var(--background);
  line-height     : 1.8;
  overflow-x      : hidden;
  perspective     : 1000px;
}

.container {
  max-width: 1280px;
  margin   : 0 auto;
  padding  : 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

/* Navigation with 3D effect */
#navbar {
  position       : fixed;
  top            : 0;
  left           : 0;
  right          : 0;
  z-index        : 1000;
  transition     : all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  background     : rgba(252, 252, 252, 0.844);

}

#navbar.scrolled {
  background     : rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow     : 0 10px 40px rgba(0, 0, 0, 0.1);
  border-bottom  : 1px solid var(--border);
  transform      : translateZ(50px);
}

.nav-content {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  height         : 80px;
}

.logo {
  font-size      : 1.5rem;
  font-weight    : 700;
  color          : white;
  text-decoration: none;
  padding        : 0.5rem 0.75rem;
  border-radius  : 0.375rem;
  transition     : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.logo:hover {
  background: rgba(0, 0, 0, 0.181);
  transform : translateZ(10px) scale(1.05);
}

.nav-links {
  display    : none;
  align-items: center;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
    gap    : 20px;
  }
}

.nav-link {
  color          : var(--foreground);
  text-decoration: none;
  font-size      : 0.875rem;
  font-weight    : 500;
  padding        : 0.5rem 0.75rem;
  border-radius  : 0.375rem;
  transition     : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position       : relative;
  transform-style: preserve-3d;
}

.nav-link::after {
  content   : '';
  position  : absolute;
  bottom    : 0;
  left      : 50%;
  width     : 0;
  height    : 2px;
  background: var(--primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform : translateX(-50%);
}

.nav-link:hover {
  font-weight: bolder;
  transform  : translateY(-2px);
}

.nav-link:hover::after {
  width: 80%;
}

.mobile-menu-btn {
  display       : flex;
  flex-direction: column;
  gap           : 0.25rem;
  background    : none;
  border        : none;
  cursor        : pointer;
  padding       : 0.5rem;
  transition    : transform 0.3s;
}

.mobile-menu-btn:hover {
  transform: scale(1.1);
}

@media (min-width: 768px) {
  .mobile-menu-btn {
    display: none;
  }
}

.mobile-menu-btn span {
  width     : 1.5rem;
  height    : 2px;
  background: var(--foreground);
  transition: all 0.3s;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.nav-links.mobile {
  display        : flex;
  flex-direction : column;
  position       : absolute;
  top            : 80px;
  left           : 0;
  right          : 0;
  background     : rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  padding        : 1rem;
  border-top     : 1px solid var(--border);
  gap            : 0.5rem;
  animation      : slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity  : 0;
    transform: translateY(-20px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

/* Buttons with 3D effects */
.btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.5rem;
  padding        : 0.625rem 1.5rem;
  font-size      : 0.875rem;
  font-weight    : 500;
  border-radius  : 0.375rem;
  text-decoration: none;
  cursor         : pointer;
  border         : 2px solid transparent;
  transition     : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height     : 2.25rem;
  position       : relative;
  transform-style: preserve-3d;
  overflow       : hidden;
}

/* Buttons with 3D effects */
.btn1 {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.5rem;
  padding        : 0.625rem 1.5rem;
  font-size      : 0.875rem;
  font-weight    : 500;
  border-radius  : 0.375rem;
  text-decoration: none;
  cursor         : pointer;
  border         : 2px solid transparent;
  transition     : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height     : 2.25rem;
  position       : relative;
  transform-style: preserve-3d;
  overflow       : hidden;
}

.btn::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  opacity   : 0;
  transition: opacity 0.3s;
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background  : linear-gradient(135deg, var(--primary) 0%, hsl(207, 44%, 55%) 100%);
  color       : white;
  border-color: var(--primary);
  box-shadow  : 0 4px 15px rgba(207, 114, 128, 0.3);
}

.btn-primary:hover {
  transform : translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(207, 114, 128, 0.4);
}

.btn-primary:active {
  transform: translateY(-1px) scale(0.98);
}

.btn-secondary {
  background  : white;
  color       : #1489e1;
  border-color: white;
  box-shadow  : 0 4px 15px rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
  transform : translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px #1489e1;
}

.btn-outline {
  background     : rgba(255, 255, 255, 0.1);
  color          : white;
  border-color   : #1489e1;
  backdrop-filter: blur(4px);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.2);
  transform : translateY(-3px) scale(1.02);
}

.btn-block {
  width: 100%;
}

.icon {
  width     : 1.25rem;
  height    : 1.25rem;
  transition: transform 0.3s;
}

.btn:hover .icon {
  transform: translateX(3px);
}

.icon-small {
  width : 1rem;
  height: 1rem;
}

/* Hero Section with 3D parallax */
.hero {
  position       : relative;
  min-height     : 100vh;
  display        : flex;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
  transform-style: preserve-3d;
}

.hero-bg {
  position       : absolute;
  inset          : 0;
  background     : linear-gradient(135deg, var(--primary) 0%, hsl(207, 44%, 49%) 50%, var(--primary-light) 100%);
  transform-style: preserve-3d;
}

.floating-blob {
  position       : absolute;
  border-radius  : 50%;
  filter         : blur(60px);
  mix-blend-mode : multiply;
  opacity        : 0.3;
  animation      : float3D 8s ease-in-out infinite;
  transform-style: preserve-3d;
}

.blob-1 {
  top       : 5rem;
  left      : 5rem;
  width     : 20rem;
  height    : 20rem;
  background: var(--primary-light);
}

.blob-2 {
  top            : 10rem;
  right          : 5rem;
  width          : 20rem;
  height         : 20rem;
  background     : var(--primary-light);
  animation-delay: 2s;
}

.blob-3 {
  bottom         : 5rem;
  left           : 50%;
  width          : 20rem;
  height         : 20rem;
  background     : var(--primary);
  animation-delay: 4s;
}

@keyframes float3D {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  33% {
    transform: translate3d(30px, -30px, 20px) rotate(120deg);
  }

  66% {
    transform: translate3d(-20px, 20px, -20px) rotate(240deg);
  }
}

.hero-content {
  position       : relative;
  z-index        : 10;
  text-align     : center;
  padding        : 5rem 0;
  transform-style: preserve-3d;
  margin-top     : 50px !important;
}

.badge {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.5rem;
  background     : rgba(255, 255, 255, 0.25);
  color          : white;
  padding        : 0.5rem 1rem;
  border-radius  : 9999px;
  border         : 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  font-size      : 0.875rem;
  margin-bottom  : 1.5rem;
  transform-style: preserve-3d;
  transition     : all 0.3s;
  box-shadow     : 0 8px 32px rgba(0, 0, 0, 0.1);
}

.badge:hover {
  transform : translateZ(20px) scale(1.05);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
}

.hero-title {
  font-size         : 3rem;
  font-weight       : 700;
  color             : white;
  margin-bottom     : 1.5rem;
  line-height       : 1.2;
  transform-style   : preserve-3d;
  /* text-shadow    : 0 10px 30px rgba(0, 0, 0, 0.3); */
}

@media (min-width: 640px) {
  .hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 4.5rem;
  }
}

.highlight {
  color    : #1489e1;
  display  : inline-block;
  animation: glow 2s ease-in-out infinite;
}

.hero-subtitle {
  font-size  : 1.125rem;
  color      : rgba(255, 255, 255, 0.95);
  max-width  : 48rem;
  margin     : 0 auto 2rem;
  line-height: 1.75;
}

@media (min-width: 640px) {
  .hero-subtitle {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 1.5rem;
  }
}

.hero-buttons {
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 4rem;
}

@media (min-width: 640px) {
  .hero-buttons {
    flex-direction: row;
  }
}

.hero-stats {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 2rem;
  max-width            : 56rem;
  margin               : 30px auto;
}

@media (min-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat {
  text-align     : center;
  transform-style: preserve-3d;
  transition     : all 0.3s;
  padding        : 1rem;
  border-radius  : 0.5rem;
  background     : rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.stat:hover {
  transform : translateZ(30px) rotateY(5deg);
  background: rgba(255, 255, 255, 0.15);
}

.stat-number {
  font-size    : 2rem;
  font-weight  : 700;
  color        : white;
  margin-bottom: 0.5rem;
  text-shadow  : 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (min-width: 640px) {
  .stat-number {
    font-size: 2.25rem;
  }
}

.stat-label {
  color    : rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .stat-label {
    font-size: 1rem;
  }
}

.scroll-indicator {
  position       : absolute;
  bottom         : 2.5rem;
  left           : 50%;
  transform      : translateX(-50%);
  color          : rgba(255, 255, 255, 0.7);
  animation      : bounce3D 2s infinite;
  transform-style: preserve-3d;
}

.scroll-indicator svg {
  width : 1.5rem;
  height: 1.5rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.scroll-indicator:hover {
  color: white;
}

@keyframes bounce3D {

  0%,
  100% {
    transform: translateX(-50%) translateY(0) translateZ(0);
  }

  50% {
    transform: translateX(-50%) translateY(-15px) translateZ(10px);
  }
}

/* Section Styles with 3D */
section {
  padding        : 5rem 0;
  transform-style: preserve-3d;
  position       : relative;
}


.section-header {
  text-align     : center;
  margin-bottom  : 4rem;
  transform-style: preserve-3d;
}

.section-title {
  font-size      : 2rem;
  font-weight    : 700;
  color          : #1489e1 !important;
  margin-bottom  : 1rem;
  transform-style: preserve-3d;
  transition     : all 0.3s;
}

.section-title:hover {
  transform: translateZ(10px);
}

@media (min-width: 640px) {
  .section-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3rem;
  }
}

.section-subtitle {
  font-size: 1.125rem;
  color    : var(--muted-foreground);
  max-width: 48rem;
  margin   : 0 auto;
}

/* About Section with 3D */
.about {
  background: var(--muted);
  position  : relative;
  overflow  : hidden;
}

.about::before {
  content       : '';
  position      : absolute;
  top           : -50%;
  right         : -10%;
  width         : 40%;
  height        : 200%;
  background    : linear-gradient(135deg, rgba(199, 230, 255, 0.1) 0%, transparent 100%);
  transform     : rotate(15deg);
  pointer-events: none;
}

.about-grid {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 3rem;
  align-items          : center;
  margin-bottom        : 4rem;
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.about-image {
  animation          : slideInLeft 0.8s ease-out;
  animation-delay    : 0.2s;
  animation-fill-mode: both;
  transform-style    : preserve-3d;
}

.image-placeholder {
  position       : relative;
  border-radius  : 0.5rem;
  overflow       : hidden;
  box-shadow     : var(--shadow-3d);
  background     : linear-gradient(135deg, rgba(207, 114, 128, 0.2) 0%, rgba(199, 230, 255, 0.2) 100%);
  aspect-ratio   : 16/9;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 2rem;
  transform-style: preserve-3d;
  transition     : all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-placeholder:hover {
  transform : rotateY(-5deg) rotateX(5deg) translateZ(20px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.icon-large {
  width          : 6rem;
  height         : 6rem;
  color          : var(--primary);
  margin-bottom  : 1rem;
  transform-style: preserve-3d;
  transition     : transform 0.5s;
}

.image-placeholder:hover .icon-large {
  transform: rotateY(360deg) scale(1.1);
}

.cert-text {
  font-size  : 1.5rem;
  font-weight: 700;
  color      : var(--foreground);
}

.cert-subtext {
  color: var(--muted-foreground);
}

.about-content {
  display            : flex;
  flex-direction     : column;
  gap                : 1.5rem;
  animation          : slideInRight 0.8s ease-out;
  animation-delay    : 0.3s;
  animation-fill-mode: both;
}

.about-item {
  display        : flex;
  gap            : 0.75rem;
  padding        : 1rem;
  background     : rgb(238, 253, 253);
  border-radius  : 0.5rem;
  transform-style: preserve-3d;
  transition     : all 0.3s;
  box-shadow     : 0px 3px 20px rgba(0, 0, 0, 0.381);
}

.about-item:hover {
  transform : translateX(10px) translateZ(10px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
}

.check-icon {
  width      : 1.5rem;
  height     : 1.5rem;
  color      : var(--primary);
  flex-shrink: 0;
  margin-top : 0.25rem;
}

.about-item h3 {
  font-size    : 1.125rem;
  font-weight  : 600;
  color        : var(--foreground);
  margin-bottom: 0.5rem;
}

.about-item p {
  color      : var(--muted-foreground);
  line-height: 1.75;
}

.features-grid {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 2rem;
  perspective          : 1000px;
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background         : #1489e1 !important;
  padding            : 2rem;
  border-radius      : 0.5rem;
  box-shadow         : var(--shadow);
  transition         : all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation          : scaleIn 0.6s ease-out;
  animation-fill-mode: both;
  transform-style    : preserve-3d;
  position           : relative;
}

.feature-card h3 {
  color: #ffffff !important;
}

.feature-card p {
  color: #abe6ff !important;
}

.feature-card::before {
  content      : '';
  position     : absolute;
  inset        : 0;
  border-radius: 0.5rem;
  background   : linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  opacity      : 0;
  transition   : opacity 0.5s;
  z-index      : -1;
}

.feature-card:hover::before {
  opacity: 0.1;
}

.feature-card:nth-child(1) {
  animation-delay: 0.4s;
}

.feature-card:nth-child(2) {
  animation-delay: 0.5s;
}

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

.feature-card:hover {
  transform : translateY(-10px) rotateX(5deg) translateZ(20px);
  box-shadow: var(--shadow-3d);
}

.feature-icon {
  width          : 3.5rem;
  height         : 3.5rem;
  border-radius  : 0.5rem;
  background     : linear-gradient(135deg, rgba(207, 114, 128, 0.15) 0%, rgba(199, 230, 255, 0.15) 100%);
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 1rem;
  transform-style: preserve-3d;
  transition     : all 0.5s;

}

.feature-card:hover .feature-icon {
  transform : rotateY(360deg) scale(1.1);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.feature-icon svg {
  width     : 1.75rem;
  height    : 1.75rem;
  color     : white;
  transition: color 0.5s;
}

.feature-card:hover .feature-icon svg {
  color: white;
}

.feature-card h3 {
  font-size    : 1.25rem;
  font-weight  : 600;
  color        : var(--foreground);
  margin-bottom: 0.75rem;
}

.feature-card p {
  color      : var(--muted-foreground);
  line-height: 1.75;
}

/* Services Section with 3D card flip */
.services {
  position: relative;
  overflow: hidden;
}

.services::before {
  content       : '';
  position      : absolute;
  bottom        : -50%;
  left          : -10%;
  width         : 40%;
  height        : 200%;
  background    : linear-gradient(135deg, rgba(207, 114, 128, 0.05) 0%, transparent 100%);
  transform     : rotate(-15deg);
  pointer-events: none;
}

.services-grid {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 2rem;
  perspective          : 1500px;
}

@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  background         : var(--card);
  padding            : 2rem;
  border-radius      : 0.5rem;
  box-shadow         : var(--shadow);
  transition         : all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation          : scaleIn 0.6s ease-out;
  animation-fill-mode: both;
  transform-style    : preserve-3d;
  position           : relative;
  overflow           : hidden;
}

.service-card::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, transparent 0%, rgba(199, 230, 255, 0.1) 100%);
  opacity   : 0;
  transition: opacity 0.6s;
}

.service-card:hover::after {
  opacity: 1;
}

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

.service-card:nth-child(2) {
  animation-delay: 0.3s;
}

.service-card:nth-child(3) {
  animation-delay: 0.4s;
}

.service-card:nth-child(4) {
  animation-delay: 0.5s;
}

.service-card:nth-child(5) {
  animation-delay: 0.6s;
}

.service-card:nth-child(6) {
  animation-delay: 0.7s;
}

.service-card:hover {
  transform : translateY(-15px) rotateX(10deg) translateZ(30px);
  box-shadow: var(--shadow-3d);
}

.service-icon {
  width          : 4rem;
  height         : 4rem;
  border-radius  : 0.5rem;
  background     : linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 1.5rem;
  transition     : all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  position       : relative;
  z-index        : 1;
}

.service-card:hover .service-icon {
  transform : rotateY(180deg) scale(1.15);
  box-shadow: 0 15px 40px rgba(207, 114, 128, 0.4);
}

.service-icon svg {
  width : 2rem;
  height: 2rem;
  color : white;
}

.service-card h3 {
  font-size    : 1.25rem;
  font-weight  : 600;
  color        : var(--foreground);
  margin-bottom: 0.75rem;
  position     : relative;
  z-index      : 1;
}

.service-card>p {
  color        : var(--muted-foreground);
  line-height  : 1.75;
  margin-bottom: 1rem;
  position     : relative;
  z-index      : 1;
}

.service-features {
  list-style    : none;
  display       : flex;
  flex-direction: column;
  gap           : 0.5rem;
  position      : relative;
  z-index       : 1;
}

.service-features li {
  display    : flex;
  align-items: center;
  gap        : 0.5rem;
  font-size  : 0.875rem;
  color      : var(--muted-foreground);
  transition : all 0.3s;
}

.service-card:hover .service-features li {
  transform: translateX(5px);
}

.service-features li::before {
  content      : '';
  width        : 0.375rem;
  height       : 0.375rem;
  border-radius: 50%;
  background   : var(--primary);
  flex-shrink  : 0;
  transition   : all 0.3s;
}

.service-card:hover .service-features li::before {
  transform : scale(1.5);
  box-shadow: 0 0 10px var(--primary);
}

/* Projects Section with 3D */
.projects {
  background: var(--muted);
  position  : relative;
  overflow  : hidden;
}

.projects::before {
  content       : '';
  position      : absolute;
  top           : -30%;
  left          : 50%;
  width         : 60%;
  height        : 150%;
  background    : radial-gradient(circle, rgba(199, 230, 255, 0.1) 0%, transparent 70%);
  transform     : translateX(-50%);
  pointer-events: none;
}

.projects-grid {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 2rem;
  perspective          : 1500px;
}

@media (min-width: 640px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.project-card {
  background         : var(--card);
  border-radius      : 0.5rem;
  overflow           : hidden;
  box-shadow         : var(--shadow);
  transition         : all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation          : scaleIn 0.6s ease-out;
  animation-fill-mode: both;
  transform-style    : preserve-3d;
  position           : relative;
}

.feature-card h4 {
  color: white !important;
}

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

.project-card:nth-child(2) {
  animation-delay: 0.3s;
}

.project-card:nth-child(3) {
  animation-delay: 0.4s;
}

.project-card:nth-child(4) {
  animation-delay: 0.5s;
}

.project-card:hover {
  transform : translateY(-15px) rotateY(-5deg) rotateX(5deg) translateZ(30px);
  box-shadow: var(--shadow-3d);
}

.project-image {
  position       : relative;
  height         : 16rem;
  display        : flex;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
  transform-style: preserve-3d;
}

.project-image::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  opacity   : 0;
  transition: opacity 0.6s;
}

.project-card:hover .project-image::before {
  opacity: 1;
}

.gradient-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);
}

.gradient-primary {
  background: linear-gradient(135deg, rgba(207, 114, 128, 0.25) 0%, rgba(199, 230, 255, 0.25) 100%);
}

.gradient-teal {
  background: linear-gradient(135deg, rgba(182, 25, 50, 0.25) 0%, rgba(95, 158, 160, 0.25) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, rgba(95, 158, 160, 0.25) 0%, rgba(207, 114, 128, 0.25) 100%);
}

.project-icon {
  width          : 8rem;
  height         : 8rem;
  color          : rgba(207, 114, 128, 0.5);
  transition     : all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  filter         : drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.project-card:hover .project-icon {
  transform: rotateY(360deg) scale(1.2) translateZ(20px);
  color    : var(--primary);
}

.project-content {
  padding : 1.5rem;
  position: relative;
  z-index : 1;
}

.project-badge {
  display        : inline-block;
  padding        : 0.25rem 0.75rem;
  background     : linear-gradient(135deg, var(--muted) 0%, rgba(210, 220, 230, 0.8) 100%);
  color          : var(--foreground);
  border-radius  : 9999px;
  font-size      : 0.875rem;
  margin-bottom  : 0.75rem;
  transform-style: preserve-3d;
  transition     : all 0.3s;
}

.project-card:hover .project-badge {
  transform : translateZ(15px);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color     : white;
}

.project-content h3 {
  font-size    : 1.25rem;
  font-weight  : 600;
  color        : var(--foreground);
  margin-bottom: 0.5rem;
}

.project-content p {
  color      : var(--muted-foreground);
  line-height: 1.75;
}

/* Contact Section with 3D */
.contact {
  position: relative;
  overflow: hidden;
}

.contact::before {
  content       : '';
  position      : absolute;
  top           : 0;
  right         : 0;
  width         : 50%;
  height        : 100%;
  background    : radial-gradient(circle at top right, rgba(199, 230, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
}

.contact-grid {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 3rem;
  perspective          : 1500px;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-form-wrapper {
  animation          : slideInLeft 0.8s ease-out;
  animation-delay    : 0.2s;
  animation-fill-mode: both;
}

.contact-form {
  background     : var(--card);
  padding        : 2rem;
  border-radius  : 0.5rem;
  box-shadow     : var(--shadow);
  transform-style: preserve-3d;
  transition     : all 0.5s;
}

.contact-form:hover {
  transform : translateZ(20px) rotateX(2deg);
  box-shadow: var(--shadow-3d);
}

.form-group {
  margin-bottom  : 1.5rem;
  transform-style: preserve-3d;
}

.form-group label {
  display      : block;
  font-size    : 0.875rem;
  font-weight  : 500;
  color        : var(--foreground);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  width          : 100%;
  padding        : 0.625rem 0.75rem;
  font-size      : 0.875rem;
  border         : 2px solid var(--border);
  border-radius  : 0.375rem;
  background     : var(--background);
  color          : var(--foreground);
  transition     : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.form-group input:focus,
.form-group textarea:focus {
  outline     : none;
  border-color: var(--primary);
  box-shadow  : 0 0 0 4px rgba(207, 114, 128, 0.1), 0 8px 20px rgba(207, 114, 128, 0.15);
  transform   : translateZ(5px);
}

.form-group textarea {
  min-height: 8rem;
  resize    : vertical;
}

.contact-info-wrapper {
  display            : flex;
  flex-direction     : column;
  gap                : 1.5rem;
  animation          : slideInRight 0.8s ease-out;
  animation-delay    : 0.3s;
  animation-fill-mode: both;
}

.contact-info-card {
  background     : var(--card);
  padding        : 2rem;
  border-radius  : 0.5rem;
  box-shadow     : var(--shadow);
  transform-style: preserve-3d;
  transition     : all 0.5s;
}

.contact-info-card:hover {
  transform : translateZ(20px) rotateY(-5deg);
  box-shadow: var(--shadow-3d);
}

.contact-info-card h3 {
  font-size    : 1.5rem;
  font-weight  : 600;
  color        : var(--foreground);
  margin-bottom: 1.5rem;
}

.contact-info-item {
  display        : flex;
  gap            : 1rem;
  margin-bottom  : 1.5rem;
  transform-style: preserve-3d;
  transition     : all 0.3s;
}

.contact-info-item:hover {
  transform: translateX(10px) translateZ(10px);
}

.contact-icon {
  width          : 3rem;
  height         : 3rem;
  border-radius  : 0.5rem;
  background     : linear-gradient(135deg, rgba(207, 114, 128, 0.15) 0%, rgba(199, 230, 255, 0.15) 100%);
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  transform-style: preserve-3d;
  transition     : all 0.5s;
}

.contact-info-item:hover .contact-icon {
  transform : rotateY(360deg);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.contact-icon svg {
  width     : 1.5rem;
  height    : 1.5rem;
  color     : var(--primary);
  transition: color 0.5s;
}

.contact-info-item:hover .contact-icon svg {
  color: white;
}

.contact-info-item h4 {
  font-size    : 0.875rem;
  font-weight  : 600;
  color        : var(--foreground);
  margin-bottom: 0.25rem;
}

.contact-info-item a {
  color          : var(--muted-foreground);
  text-decoration: none;
  transition     : color 0.2s;
}

.contact-info-item a:hover {
  color: var(--primary);
}

.contact-info-item p {
  color: var(--muted-foreground);
}

.contact-cta-card {
  background     : linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  padding        : 2rem;
  border-radius  : 0.5rem;
  color          : white;
  transform-style: preserve-3d;
  transition     : all 0.5s;
  position       : relative;
  overflow       : hidden;
}

.contact-cta-card::before {
  content   : '';
  position  : absolute;
  top       : -50%;
  right     : -50%;
  width     : 100%;
  height    : 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  transition: all 0.8s;
}

.contact-cta-card:hover::before {
  top  : -20%;
  right: -20%;
}

.contact-cta-card:hover {
  transform : translateZ(25px) rotateY(5deg);
  box-shadow: var(--shadow-3d);
}

.contact-cta-card h3 {
  font-size    : 1.5rem;
  font-weight  : 600;
  margin-bottom: 1rem;
  position     : relative;
  z-index      : 1;
}

.contact-cta-card ul {
  list-style    : none;
  display       : flex;
  flex-direction: column;
  gap           : 0.75rem;
  position      : relative;
  z-index       : 1;
}

.contact-cta-card li {
  display    : flex;
  align-items: flex-start;
  gap        : 0.5rem;
  transition : all 0.3s;
}

.contact-cta-card:hover li {
  transform: translateX(5px);
}

.contact-cta-card li::before {
  content      : '';
  width        : 0.375rem;
  height       : 0.375rem;
  border-radius: 50%;
  background   : white;
  flex-shrink  : 0;
  margin-top   : 0.5rem;
  box-shadow   : 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Footer with 3D */
.footer {
  background     : var(--foreground);
  color          : white;
  padding        : 3rem 0 0;
  position       : relative;
  overflow       : hidden;
  transform-style: preserve-3d;
}

.footer::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  height    : 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
  animation : shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.footer-grid {
  display              : grid;
  grid-template-columns: 1fr;
  /* 1 column by default (mobile) */
  gap                  : 2rem;
  margin-bottom        : 2rem;
  align-items          : start;
  justify-content      : space-between;
}

/* For tablets and above */
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns */
  }
}

/* For desktops */
@media (min-width: 1024px) {
  .footer-grid {
    display        : flex;
    justify-content: space-around;
  }
}

.footer-col {
  color: #fff;
}

/* Align the second footer column content to the right */
.footer-col:last-child {
  text-align: left;
}

.footer-col:last-child .contact-list {
  align-items: flex-end;
}

.contact-list {
  list-style: none;
  padding   : 0;
  margin    : 0;
}

.contact-list li {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  margin-bottom: 10px;
}

.contact-list li svg {
  width : 18px;
  height: 18px;
}



.footer-col {
  transform-style: preserve-3d;
  transition     : all 0.3s;
}

.footer-col:hover {
  transform: translateZ(10px);
}

.footer-logo {
  font-size    : 1.5rem;
  font-weight  : 700;
  color        : var(--primary-light);
  margin-bottom: 1rem;
  text-shadow  : 0 0 20px rgba(199, 230, 255, 0.3);
}

.footer-col p {
  color        : rgba(255, 255, 255, 0.8);
  line-height  : 1.75;
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  gap    : 0.75rem;
}

.social-link {
  width          : 2.5rem;
  height         : 2.5rem;
  border-radius  : 0.375rem;
  background     : rgba(255, 255, 255, 0.1);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : white;
  transition     : all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.social-link:hover {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  transform : translateY(-5px) rotateY(360deg) scale(1.1);
  box-shadow: 0 10px 25px rgba(199, 230, 255, 0.4);
}

.social-link svg {
  width : 1.25rem;
  height: 1.25rem;
}

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

.footer-col h4 {
  font-size    : 1.125rem;
  font-weight  : 600;
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  color          : rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition     : all 0.3s;
  display        : inline-block;
}

.footer-col ul li a:hover {
  color    : var(--primary-light);
  transform: translateX(5px);
}

.contact-list li {
  display    : flex;
  align-items: flex-start;
  gap        : 0.5rem;
}

.footer-bottom {
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
  align-items    : center;
  justify-content: space-between;
  padding        : 2rem 0;
  border-top     : 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
  }
}

.footer-bottom p {
  color    : rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.footer-links {
  display  : flex;
  gap      : 1.5rem;
  font-size: 0.875rem;
}

.footer-links a {
  color          : rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition     : all 0.3s;
}

.footer-links a:hover {
  color    : var(--primary-light);
  transform: translateY(-2px);
}

/* Advanced Animations */
@keyframes fadeInUp {
  from {
    opacity  : 0;
    transform: translateY(30px) translateZ(-20px);
  }

  to {
    opacity  : 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity  : 0;
    transform: translateX(-40px) rotateY(-15deg);
  }

  to {
    opacity  : 1;
    transform: translateX(0) rotateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity  : 0;
    transform: translateX(40px) rotateY(15deg);
  }

  to {
    opacity  : 1;
    transform: translateX(0) rotateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity  : 0;
    transform: scale(0.9) translateZ(-30px);
  }

  to {
    opacity  : 1;
    transform: scale(1) translateZ(0);
  }
}

.fade-in-up {
  animation          : fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

/* Parallax effect */
.parallax {
  transform-style: preserve-3d;
  transition     : transform 0.1s ease-out;
}


.hero {
  position       : relative;
  width          : 100%;
  height         : 100vh;
  /* full viewport height */
  overflow       : hidden;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 0 20px;
  /* small horizontal padding for mobile */
}

/* Floating blobs */
.floating-blob {
  position: absolute;
  z-index : 2;
}

.hero {
  position       : relative;
  width          : 100%;
  height         : 100vh;
  overflow       : hidden;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;

}

/* Background slider */
.hero-slider {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
  z-index : 0;
}

.hero-slider .slide {
  position           : absolute;
  width              : 100%;
  height             : 100%;
  background-size    : cover;
  background-position: center;
  opacity            : 0;
  transform          : scale(1.1);
  transition         : opacity 2s ease-in-out, transform 12s ease;
}

.hero-slider .slide.active {
  opacity  : 1;
  transform: scale(1);
}

/* Overlay for text readability */
.hero-overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(0, 0, 0, 0.45);
  z-index   : 1;
}

/* Floating blobs stay on top */
.floating-blob {
  position: absolute;
  z-index : 2;
}

/* Hero Content */
.hero-content {
  position      : relative;
  z-index       : 3;
  text-align    : center;
  color         : #fff;
  padding-top   : 300px;
  padding-bottom: 250px;
}

/* Scroll indicator */
.scroll-indicator {
  position : absolute;
  bottom   : 20px;
  left     : 50%;
  transform: translateX(-50%);
  z-index  : 3;
}



@media (max-width: 768px) {
  .hero {
    height : auto;
    /* allow hero to expand on mobile */
    padding: 160px 20px;
    /* top & bottom padding */
  }

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

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

  .hero-buttons .btn {
    width    : 100%;
    max-width: 250px;
    display  : block;
    margin   : 10px auto;
  }

  .hero-stats {
    flex-direction: column;
    gap           : 20px;
    margin-top    : 20px;
  }

  .hero-stats .stat-number {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .hero-stats .stat-number {
    font-size: 1.2rem;
  }
}

.project-card {
  background-color: #fff;
  border-radius   : 10px;
  overflow        : hidden;
  box-shadow      : 0 10px 30px rgba(0, 0, 0, 0.1);
  transition      : transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform : translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.project-image {
  width              : 100%;
  height             : 200px;
  /* adjust as needed */
  background-size    : cover;
  background-position: center;
}

.project-content {
  padding: 20px;
}

.project-badge {
  display      : inline-block;
  background   : #1489e1;
  color        : #fff;
  padding      : 5px 10px;
  border-radius: 5px;
  font-size    : 0.8rem;
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .project-image {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .project-image {
    height: 150px;
  }
}

.services {
  padding    : 100px 0;
  background : linear-gradient(180deg, #f9fafc 0%, #eef2f7 100%);
  font-family: 'Open Sans', sans-serif;
  color      : #333;
}

.section-header {
  text-align   : center;
  margin-bottom: 60px;
  max-width    : 800px;
  margin-left  : auto;
  margin-right : auto;
}

.section-title {
  font-size    : 2.5rem;
  font-weight  : 700;
  color        : #1489e1;
  margin-bottom: 10px;
  position     : relative;
  display      : inline-block;
}



.section-subtitle {
  font-size  : 1rem;
  color      : #555;
  margin-top : 20px;
  line-height: 1.7;
}

.services-grid {
  display: grid;
  gap    : 2.5rem;
  margin : auto;
}

/* Service Card */
.service-card {
  background    : #fff;
  border-radius : 20px;
  padding       : 2.2rem;
  box-shadow    : 0 10px 30px rgba(0, 0, 0, 0.08);
  transition    : all 0.4s ease;
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
  border-top    : 4px solid var(--primary);
  position      : relative;
  overflow      : hidden;
}

.service-card::before {
  content      : "";
  position     : absolute;
  top          : 0;
  left         : 0;
  width        : 100%;
  height       : 4px;
  background   : linear-gradient(90deg, var(--primary-light), var(--primary));
  border-radius: 10px 10px 0 0;
}

.service-card:hover {
  transform : translateY(-10px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
}

/* Icon Styling */
.service-icon {
  width          : 70px;
  height         : 70px;
  background     : linear-gradient(135deg, var(--primary-light), var(--primary));
  color          : #fff;
  border-radius  : 18px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 1.5rem;
  box-shadow     : 0 6px 15px rgba(0, 0, 0, 0.1);
  transition     : transform 0.4s ease;
}

.service-card:hover .service-icon {
  transform: rotate(10deg) scale(1.05);
}

.service-card h3 {
  font-size    : 1.35rem;
  font-weight  : 600;
  color        : var(--primary);
  margin-bottom: 1rem;
}

.service-card p {
  color        : #444;
  font-size    : 0.98rem;
  margin-bottom: 1rem;
  line-height  : 1.6;
}

/* Features List */
.service-features {
  list-style: none;
  padding   : 0;
  margin-top: 0.5rem;
  width     : 100%;
}

.service-features li {
  position     : relative;
  padding-left : 26px;
  margin-bottom: 10px;
  font-size    : 0.95rem;
  color        : #222;
  line-height  : 1.5;
}

.service-features li::before {
  content    : "✓";
  position   : absolute;
  left       : 0;
  top        : 0;
  color      : var(--primary);
  font-weight: 700;
}

/* Gradient Variants */
.gradient-blue {
  --primary      : #3a8ef6;
  --primary-light: #7bb0ff;
}

.gradient-teal {
  --primary      : #009688;
  --primary-light: #4db6ac;
}

.gradient-primary {
  --primary      : #6c63ff;
  --primary-light: #a49dff;
}

.gradient-secondary {
  --primary      : #ff6f61;
  --primary-light: #ff9a8b;
}

.gradient-gold {
  --primary      : #ffb300;
  --primary-light: #ffe082;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }

  .service-card {
    padding: 1.6rem;
  }

  .service-icon {
    width : 60px;
    height: 60px;
  }
}

.contact {
  padding    : 100px 0;
  background : linear-gradient(180deg, #f7faff 0%, #eef3f9 100%);
  font-family: 'Open Sans', sans-serif;
}

.section-header {
  text-align   : center;
  margin-bottom: 60px;
}

.section-title {
  font-size  : 2.5rem;
  font-weight: 700;
  color      : #1489e1;
  position   : relative;
  display    : inline-block;
}

.section-subtitle {
  color     : #555;
  font-size : 1rem;
  margin-top: 20px;
}

.contact-grid {
  display                 : grid;
  /* grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); */
  gap                     : 3rem;
  margin                  : auto;
}

.contact-form {
  background   : #fff;
  border-radius: 16px;
  padding      : 2.5rem;
  box-shadow   : 0 10px 25px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display      : block;
  font-weight  : 600;
  color        : #333;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width        : 100%;
  padding      : 12px 15px;
  border       : 1px solid #ccc;
  border-radius: 8px;
  font-size    : 0.95rem;
  transition   : all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #1489e1;
  box-shadow  : 0 0 0 2px rgba(58, 142, 246, 0.15);
  outline     : none;
}

textarea {
  resize    : vertical;
  min-height: 120px;
}

/* Button */
.btn1 {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  background     : linear-gradient(135deg, #3a8ef6, #6c63ff);
  color          : #fff;
  padding        : 12px 20px;
  border         : none;
  border-radius  : 10px;
  cursor         : pointer;
  font-size      : 1rem;
  font-weight    : 600;
  transition     : all 0.3s ease;
}

.btn1:hover {
  transform : translateY(-3px);
  box-shadow: 0 8px 20px rgba(58, 142, 246, 0.25);
}


/* Map Styling */
.contact-map iframe {
  width        : 100%;
  height       : 300px;
  border       : 0;
  border-radius: 16px;
  box-shadow   : 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }

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

/* Mission Section */
.mission-section {
  background: #f9fafb;
  text-align: center;
}

.mission-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : 30px;
  margin-top           : 40px;

}

.mission-card {
  background   : #1489e1;
  border-radius: 16px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.08);
  padding      : 30px 20px;
  transition   : all 0.3s ease;
  position     : relative;
  box-shadow   : 3px 3px 13px rgb(112, 112, 112);
}

.mission-card h1 {
  color: #ffffff !important;
}

.mission-card p {
  color: #d9ebf5 !important;
}

.mission-card:hover {
  transform : translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.mission-icon {
  background     : var(--primary);
  color          : #fff;
  width          : 60px;
  height         : 60px;
  margin         : 0 auto 20px;
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.mission-icon svg {
  width : 30px;
  height: 30px;
}

.mission-card h3 {
  color        : var(--primary);
  font-size    : 1.3rem;
  margin-bottom: 10px;
}

.mission-card p {
  font-size  : 0.95rem;
  line-height: 1.6;
  color      : #333;
}

/* General Container */
.careers-section {
  background : #f5f7fa;
  font-family: 'Open Sans', sans-serif;
}

.container {
  max-width: 1300px;
  margin   : 0 auto;
}

/* Section Header */
.careers-header {
  text-align   : center;
  margin-bottom: 60px;
}

.careers-header h2 {
  font-size    : 40px;
  color        : #1f2937;
  margin-bottom: 15px;
}

.careers-header p {
  font-size: 18px;
  color    : #4b5563;
}

/* Content Grid */
.careers-content {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 50px;
  align-items          : flex-start;
}

/* Left Info Card */
.info-card {
  background   : #fff;
  padding      : 30px;
  border-radius: 12px;
  box-shadow   : 0 12px 30px rgba(0, 0, 0, 0.1);
  transition   : transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform : translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.info-card h3 {
  font-size    : 28px;
  margin-bottom: 20px;
  color        : #111827;
}

.info-card ul {
  list-style  : disc;
  padding-left: 20px;
  color       : #374151;
  line-height : 1.8;
}

/* Form Card */
.form-card {
  background   : #fff;
  padding      : 35px;
  border-radius: 12px;
  box-shadow   : 0 12px 30px rgba(0, 0, 0, 0.1);
  transition   : transform 0.3s ease, box-shadow 0.3s ease;
}

.form-card:hover {
  transform : translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.form-card h3 {
  font-size    : 28px;
  margin-bottom: 25px;
  color        : #111827;
}

/* Form Fields */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display      : block;
  font-weight  : 600;
  margin-bottom: 8px;
  color        : #1f2937;
}

.form-group input,
.form-group textarea {
  width        : 100%;
  padding      : 12px 15px;
  border-radius: 8px;
  border       : 1px solid #d1d5db;
  font-size    : 15px;
  transition   : border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #1489e1;
  box-shadow  : 0 0 8px rgba(59, 130, 246, 0.3);
  outline     : none;
}

/* File Upload */
.file-upload input[type="file"] {
  padding: 5px;
}

/* Submit Button */
.btn-submit {
  background   : linear-gradient(90deg, #3b82f6, #2563eb);
  color        : #fff;
  font-size    : 16px;
  padding      : 14px 25px;
  border       : none;
  border-radius: 8px;
  cursor       : pointer;
  font-weight  : 600;
  transition   : background 0.3s ease, transform 0.2s ease;
}

.btn-submit:hover {
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  transform : translateY(-2px);
}

/* Required Field */
.required {
  color: red;
}

/* Responsive */
@media (max-width: 900px) {
  .careers-content {
    grid-template-columns: 1fr;
  }

  .careers-section {
    padding: 60px 15px;
  }
}

/* --- Global Layout --- */
.services-page {
  max-width  : 1300px;
  margin     : 0 auto;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.7;
  color      : #222;
}

/* --- Each Service Block --- */
.service-section {
  display      : flex;
  align-items  : center;
  gap          : 60px;
  margin-bottom: 120px;
  flex-wrap    : wrap;
  background   : #ffffff;
  border-radius: 24px;
  box-shadow   : 0 8px 25px rgba(0, 0, 0, 0.06);
  overflow     : hidden;
  position     : relative;
  transition   : transform 0.4s ease, box-shadow 0.4s ease;
}

.service-section:hover {
  transform : translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* Alternate Layout */
.service-section.alt {
  flex-direction: row-reverse;
}

/* --- Text Content --- */
.service-content {
  flex     : 1;
  min-width: 340px;
  padding  : 40px 50px;
  z-index  : 2;
}

.service-content h2 {
  font-size    : 2.4rem;
  font-weight  : 700;
  color        : #1489e1;
  margin-bottom: 15px;
  position     : relative;
}

.service-content h2::after {
  content      : "";
  display      : block;
  width        : 60px;
  height       : 3px;
  background   : #0096c7;
  margin-top   : 8px;
  border-radius: 4px;
}

.service-content p {
  font-size    : 1.05rem;
  margin-bottom: 20px;
  color        : #333;
}

.service-content h4 {
  font-size  : 1.2rem;
  margin-top : 20px;
  color      : #1489e1;
  font-weight: 600;
}

.service-content ul {
  margin    : 10px 0 0 20px;
  list-style: none;
}

.service-content ul li {
  position     : relative;
  margin-bottom: 8px;
  padding-left : 24px;
  font-size    : 1.02rem;
  color        : #444;
}

.service-content ul li::before {
  content    : "✔";
  position   : absolute;
  left       : 0;
  top        : 0;
  color      : #1489e1;
  font-weight: bold;
  font-size  : 1rem;
}

/* --- Image Container --- */
.service-image {
  flex         : 1;
  min-width    : 350px;
  position     : relative;
  overflow     : hidden;
  border-radius: 0;
  height       : 100%;
}

.service-image img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  display   : block;
  transition: transform 0.8s ease;
}

.service-section:hover .service-image img {
  transform: scale(1.08);
}

/* --- Gradient Overlay --- */
.service-image::before {
  content : "";
  position: absolute;
  inset   : 0;
  opacity : 0.25;
  z-index : 1;
}

.gradient-blue::before {
  background: linear-gradient(135deg, #0096c7, #1489e1);
}

.gradient-teal::before {
  background: linear-gradient(135deg, #2ec4b6, #00bfa6);
}

.gradient-primary::before {
  background: linear-gradient(135deg, #1489e1, #90e0ef);
}

.gradient-secondary::before {
  background: linear-gradient(135deg, #48cae4, #1489e1);
}

.gradient-gold::before {
  background: linear-gradient(135deg, #ffb703, #fb8500);
}

/* --- Soft Section Divider --- */
.service-section:not(:last-child)::after {
  content   : "";
  position  : absolute;
  bottom    : -60px;
  left      : 10%;
  right     : 10%;
  height    : 1px;
  background: linear-gradient(to right, transparent, #ccc, transparent);
  opacity   : 0.4;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .service-section {
    flex-direction: column !important;
    margin-bottom : 80px;
  }

  .service-content {
    padding: 30px;
  }

  .service-content h2 {
    font-size: 1.8rem;
  }

  .service-content p,
  .service-content ul li {
    font-size: 0.95rem;
  }
}


/* --- Read More Button --- */
.read-more-btn {
  display           : inline-block;
  margin-top        : 20px;
  padding           : 10px 22px;
  /* background     : linear-gradient(135deg, #1489e1, #1489e1); */
  color             : #fff;
  text-decoration   : none;
  border-radius     : 50px;
  font-weight       : 600;
  letter-spacing    : 0.3px;
  transition        : all 0.3s ease;
  position          : relative;
  overflow          : hidden;
}

.read-more-btn:hover {
  background: linear-gradient(135deg, #023e8a, #0096c7);
  transform : translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 150, 199, 0.3);
}



.read-more-btn:hover::after {
  transform: translateX(4px);
}


.service-content.expanded p {
  max-height: none;
}

.service-content p {
  max-height: 120px;
  overflow  : hidden;
  transition: max-height 0.5s ease;
}

/* --------------------------------
   Stat Cards
-----------------------------------*/
.stats-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap                  : 20px;
  margin               : 40px 0;
}

.stat-card {
  background   : var(--bg-light);
  padding      : 25px;
  text-align   : center;
  border-radius: 12px;
  box-shadow   : 0 3px 10px rgba(0, 0, 0, 0.08);
  transition   : 0.3s ease;
}

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

.stat-card h3 {
  color        : var(--primary);
  font-size    : 2rem;
  margin-bottom: 8px;
}

/* --------------------------------
   Info Cards (for survey section)
-----------------------------------*/
.card-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap                  : 20px;
  margin               : 30px 0;
}

.info-card {
  background   : #f5f9ff;
  border-left  : 5px solid var(--primary);
  padding      : 20px;
  border-radius: 10px;
  transition   : 0.3s ease;
}

.info-card:hover {
  background: #e9f4ff;
  transform : scale(1.03);
}

/* --------------------------------
   Feature Grid
-----------------------------------*/
.feature-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap                  : 20px;
  margin               : 30px 0;
}

.feature {
  background   : var(--bg-light);
  padding      : 25px;
  border-radius: 10px;
  box-shadow   : 0 2px 8px rgba(0, 0, 0, 0.05);
  transition   : 0.3s ease;
}

.feature:hover {
  transform: translateY(-3px);
}

/* --------------------------------
   Project Cards
-----------------------------------*/
.project-cards {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : 20px;
  margin-top           : 25px;
}

.project-card {
  border       : 1px solid #e3e3e3;
  border-radius: 10px;
  padding      : 20px;
  background   : white;
  transition   : 0.3s ease;
}

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














/* General Styling */
:root {
  --primary      : #1489e1;
  --primary-light: #1489e1;
  --secondary    : #004e89;
  --text-dark    : #333;
  --text-light   : #666;
  --gradient-blue: linear-gradient(135deg, #1489e1, #1489e1);
  --card-bg      : #fff;
  --shadow       : 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Page Header */
.page-header {
  background: var(--gradient-blue);
  color     : #fff;
  text-align: center;
  padding   : 90px 20px;
  position  : relative;
  overflow  : hidden;
}

.page-header::before {
  content   : "";
  position  : absolute;
  inset     : 0;
  background: url("./images/infrastructure-bg.jpg") center/cover no-repeat;
  opacity   : 0.1;
}

.page-header h1 {
  font-size  : 3rem;
  font-weight: 700;
}

.page-header p {
  font-size : 1.2rem;
  margin-top: 0.5rem;
  opacity   : 0.95;
}

/* Container */
.service-detail.container {
  max-width: 1150px;
  margin   : 70px auto;
}

/* Headings */
.service-detail h2 {
  font-size    : 2rem;
  color        : var(--primary);
  margin-bottom: 20px;
  position     : relative;
}

.service-detail h2::after {
  content      : "";
  width        : 60px;
  height       : 4px;
  background   : var(--primary);
  position     : absolute;
  bottom       : -8px;
  left         : 0;
  border-radius: 4px;
}

.service-detail h3 {
  margin-top : 50px;
  color      : var(--secondary);
  font-size  : 1.6rem;
  font-weight: 600;
}

/* Paragraphs */
.service-detail p {
  color      : var(--text-light);
  line-height: 1.8;
  margin     : 12px 0 25px;
  font-size  : 1.05rem;
}

/* Stats Section */
.stats-grid {
  display        : flex;
  justify-content: space-between;
  gap            : 20px;
  margin         : 30px 0 50px;
  flex-wrap      : wrap;
}

.stat-card {
  flex         : 1;
  background   : var(--card-bg);
  box-shadow   : var(--shadow);
  padding      : 25px;
  border-radius: 12px;
  text-align   : center;
  transition   : all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-6px);
}

.stat-card h3 {
  color      : var(--primary);
  font-size  : 2rem;
  font-weight: 700;
}

.stat-card p {
  color     : var(--text-dark);
  font-size : 1rem;
  margin-top: 5px;
}

/* Lists */
.service-detail ul {
  list-style: none;
  padding   : 0;
}

.service-detail ul li {
  padding-left: 30px;
  position    : relative;
  margin      : 10px 0;
  color       : var(--text-dark);
}


/* Cards */
.card-grid {
  display   : flex;
  gap       : 20px;
  flex-wrap : wrap;
  margin-top: 25px;
}

.info-card {
  flex         : 1;
  background   : var(--card-bg);
  border-radius: 12px;
  box-shadow   : var(--shadow);
  text-align   : center;
  padding      : 25px;
  transition   : 0.3s;
}

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

.info-card img {
  width        : 100%;
  height       : 180px;
  /* adjust height as per your design (try 200–250px for larger visuals) */
  object-fit   : cover;
  /* ensures image fills card neatly */
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow   : 0 4px 15px rgba(0, 0, 0, 0.15);
  transition   : all 0.4s ease;
}

.info-card:hover img {
  transform : scale(1.05);
  box-shadow: 0 8px 25px rgba(10, 103, 181, 0.3);
}


.info-card h4 {
  color        : var(--primary);
  font-size    : 1.2rem;
  margin-bottom: 8px;
}

/* Features */
.feature-grid {
  display   : flex;
  gap       : 20px;
  flex-wrap : wrap;
  margin-top: 25px;
}

.feature {
  flex         : 1;
  background   : var(--card-bg);
  padding      : 25px;
  border-radius: 12px;
  box-shadow   : var(--shadow);
  text-align   : center;
  transition   : 0.3s;
}

.feature i {
  font-size    : 2rem;
  color        : var(--primary);
  margin-bottom: 10px;
}

.feature:hover {
  transform: translateY(-6px);
}

/* Project Cards */
.project-cards {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap                  : 20px;
  margin-top           : 25px;
}

.project-card {
  background   : var(--card-bg);
  padding      : 25px;
  border-radius: 12px;
  box-shadow   : var(--shadow);
  transition   : 0.3s;
}

.project-card:hover {
  transform: translateY(-6px);
}

.project-card h4 {
  color    : var(--primary);
  font-size: 1.2rem;
}

/* Charts */
.chart-card {
  background   : var(--card-bg);
  border-radius: 16px;
  /* slightly more rounded for modern look */
  box-shadow   : 0 10px 25px rgba(0, 0, 0, 0.12);
  /* stronger 3D shadow */
  padding      : 30px 20px;
  margin-top   : 30px;
  transition   : transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
  transform : translateY(-6px);
  /* subtle 3D pop effect */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.chart-card canvas {
  width : 100%;
  height: 250px !important;
  /* taller chart for better visibility */
}

@media (max-width: 768px) {

  .chart-card canvas {
    height: 200px !important;
  }
}


/* Back Button */
.btn-primary {
  background     : var(--primary);
  color          : white;
  padding        : 12px 26px;
  border-radius  : 8px;
  text-decoration: none;
  transition     : 0.3s;
  font-weight    : 500;
}

.btn-primary:hover {
  background: var(--primary-light);
  transform : translateY(-4px);
}

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

  .stats-grid,
  .card-grid,
  .feature-grid {
    flex-direction: column;
  }

  .page-header h1 {
    font-size: 2.4rem;
  }

  .info-card img {
    height: 150px;
  }
}


/* ------------------------------
   Services Section
--------------------------------*/
.services {
  background: #f9f9f9;
}

.section-header {
  text-align   : center;
  margin-bottom: 60px;
}

.section-title {
  font-size  : 2.8rem;
  color      : var(--primary);
  font-weight: 700;
}

.section-subtitle {
  font-size : 1.1rem;
  color     : var(--text-dark);
  margin-top: 10px;
}

/* Service Section Layout */
.service-section {
  display      : flex;
  align-items  : center;
  gap          : 40px;
  margin-bottom: 60px;
  flex-wrap    : wrap;
}

.service-section.alt {
  flex-direction: row-reverse;
}

.service-content {
  flex: 1;
}

.service-content h2 {
  font-size    : 2rem;
  color        : var(--primary);
  margin-bottom: 15px;
}

.service-content h4 {
  font-size: 1.2rem;
  color    : var(--secondary);
  margin   : 15px 0 10px;
}

.service-content p {
  font-size    : 1rem;
  color        : var(--text-dark);
  line-height  : 1.7;
  margin-bottom: 15px;
}

.service-content ul {
  list-style   : none;
  padding-left : 0;
  margin-bottom: 20px;
}

.service-content ul li {
  padding-left: 30px;
  position    : relative;
  margin      : 8px 0;
  font-size   : 0.97rem;
}

.service-content ul li::before {
  content    : "✓";
  position   : absolute;
  left       : 0;
  color      : var(--primary);
  font-weight: bold;
}

.read-more-btn {
  display        : inline-block;
  margin-top     : 15px;
  background     : var(--primary);
  color          : #fff;
  border-radius  : 8px;
  text-decoration: none;
  font-weight    : 500;
  transition     : all 0.3s ease;
}

.read-more-btn:hover {
  background: var(--primary-light);
  transform : translateY(-3px);
}

/* Service Images */
.service-image {
  flex         : 1;
  border-radius: 16px;
  overflow     : hidden;
  box-shadow   : var(--shadow);
  transition   : transform 0.3s ease, box-shadow 0.3s ease;
}

.service-image img {
  width     : 100%;
  height    : 300px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-image:hover {
  transform : translateY(-6px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

/* Gradient backgrounds for images */
.gradient-blue {
  background: linear-gradient(135deg, #1489e1, #1489e1);
}

.gradient-teal {
  background: linear-gradient(135deg, #0b8e88, #12c0b8);
}

.gradient-primary {
  background: linear-gradient(135deg, #1489e1, #0a94e1);
}

.gradient-secondary {
  background: linear-gradient(135deg, #004e89, #1477b5);
}

.gradient-gold {
  background: linear-gradient(135deg, #d4af37, #f2c94c);
}

/* Responsive */
@media (max-width: 992px) {
  .service-section {
    flex-direction: column;
  }

  .service-section.alt {
    flex-direction: column;
  }

  .service-image img {
    height: 250px;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 2rem;
  }

  .service-content h2 {
    font-size: 1.6rem;
  }

  .service-content h4 {
    font-size: 1.1rem;
  }

  .service-image img {
    height: 200px;
  }
}


.feature-grid,
.project-cards {
  display              : grid;
  gap                  : 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.feature-card,
.project-card {
  background   : #fff;
  border-radius: 10px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow     : hidden;
  transition   : transform 0.3s ease;
}

.feature-card img,
.project-card img {
  width     : 100%;
  height    : 180px;
  /* uniform height for all images */
  object-fit: cover;
  /* makes image cover the area without distortion */
}

.feature-card:hover,
.project-card:hover {
  transform: translateY(-5px);
}


.project-image {
  background-size    : cover;
  /* Cover entire card */
  background-position: center;
  /* Keep focus centered */
  background-repeat  : no-repeat;
  image-rendering    : auto;
  /* Smooth scaling */
  width              : 100%;
  height             : 200px;
  /* Adjust height as needed */
  transition         : transform 0.3s ease;
}

/* Optional hover zoom for better visual appeal */
.project-card:hover .project-image {
  transform: scale(1.05);
}

/* Overlay on top of image */
.image-overlay {
  position        : absolute;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-color: rgba(70, 130, 180, 0.4);
  /* steelblue with 40% opacity */
  pointer-events  : none;
  /* so it doesn’t block hover */
}


.services-page {
  padding: 0;
}

.service-section {
  display      : flex;
  align-items  : center;
  gap          : 40px;
  margin-bottom: 80px;
  flex-wrap    : wrap;
}

.service-section.alt {
  flex-direction: row-reverse;
}

.service-content {
  flex     : 1;
  min-width: 300px;
}

.service-content h2 {
  font-size    : 2rem;
  color        : var(--primary, #1489e1);
  margin-bottom: 15px;
  position     : relative;
}

.service-content h4 {
  font-size : 1.2rem;
  margin-top: 15px;
  color     : #333;
}

.service-content p {
  margin-bottom: 20px;
  font-size    : 1rem;
  color        : #444;
}

.service-content ul {
  margin      : 15px 0;
  list-style  : none;
  padding-left: 0;
}

.service-content ul li {
  position     : relative;
  padding-left : 28px;
  margin-bottom: 10px;
  color        : #555;
}

.service-content ul li::before {
  content    : "✔";
  position   : absolute;
  left       : 0;
  top        : 0;
  color      : var(--primary, #1489e1);
  font-weight: bold;
}

.read-more-btn {
  display        : inline-block;
  margin-top     : 15px;
  padding        : 10px 22px;
  background     : var(--primary, #1489e1);
  color          : #fff;
  text-decoration: none;
  border-radius  : 8px;
  transition     : all 0.3s ease;
  position       : relative;
}

.read-more-btn:hover {
  background: darken(var(--primary, #1489e1), 10%);
  transform : translateY(-2px);
}

.read-more-btn:hover::after {
  transform: translateX(4px);
}

.service-image {
  flex    : 1;
  width   : 100%;
  height  : 100%;
  overflow: hidden;
  position: relative;
}

.service-image img {
  width     : 100%;
  height    : auto;
  transition: transform 0.4s ease;
}

.service-section:hover .service-image img {
  transform: scale(1.05);
}

/* Gradient overlay (optional, if you have CSS for gradients) */
.service-image::before {
  content : "";
  position: absolute;
  inset   : 0;
  opacity : 0.25;
  z-index : 1;
}

.gradient-blue::before {
  background: linear-gradient(135deg, #1489e1, #1489e1);
}

.gradient-teal::before {
  background: linear-gradient(135deg, #0b8e88, #12c0b8);
}

.gradient-primary::before {
  background: linear-gradient(135deg, #1489e1, #0a94e1);
}

.gradient-secondary::before {
  background: linear-gradient(135deg, #004e89, #1477b5);
}

.gradient-gold::before {
  background: linear-gradient(135deg, #ffb703, #fb8500);
}

/* WhatsApp button styling */
.whatsapp-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 10px;
  padding         : 10px 18px;
  border          : 2px solid #25D366;
  color           : #ffffff;
  font-weight     : 600;
  background-color: #25D366;
  font-size       : 16px;
  border-radius   : 10px;
  text-decoration : none;
  transition      : all 0.3s ease;
}

.whatsapp-btn:hover {
  background-color: #ffffff;
  color           : #139f46;
  transform       : translateY(-2px);
}

/* Logo inside the button */
.whatsapp-logo {
  width        : 22px;
  height       : 22px;
  border-radius: 50%;
  object-fit   : contain;
}

/* Philosophy Section */
.philosophy-section {
  background-color: #f9fafb;
  padding         : 80px 0;
}

.philosophy-grid {
  display: grid;
  gap    : 30px;
}

.philosophy-card {
  background   : #1489e1;
  padding      : 30px 25px;
  border-radius: 12px;
  box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.702);
  text-align   : center;
  transition   : all 0.3s ease;
}

.philosophy-card:hover {
  transform : translateY(-8px);
  box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.12);
}

.philosophy-number {
  display      : inline-block;
  font-size    : 2rem;
  font-weight  : 700;
  color        : whitesmoke;
  margin-bottom: 10px;
  border       : 2px solid white;
  padding      : 5px 10px;
  border-radius: 15px;
}

.philosophy-card h3 {
  font-size    : 1.25rem;
  color        : #ffffff;
  margin-bottom: 10px;
}

.philosophy-card p {
  color      : #eef9ff;
  font-size  : 0.95rem;
  line-height: 1.6;
}


/* Certifications Section */
.certifications-section {
  background: #f9fafc;
  padding   : 80px 0;
}

.certifications-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap                  : 30px;
  margin-top           : 40px;
}

.certificate-card {
  background   : #fff;
  border-radius: 16px;
  padding      : 25px 20px;
  position     : relative;
  text-align   : left;
  box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.08);
  transition   : all 0.3s ease;
}

.certificate-card:hover {
  transform : translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.certificate-icon {
  width          : 50px;
  height         : 50px;
  border-radius  : 10px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  font-size      : 1.5rem;
  margin-bottom  : 15px;
}

.certificate-icon.blue {
  background: #1489e1;
}

.certificate-icon.green {
  background: #16a34a;
}

.certificate-icon.purple {
  background: #8b5cf6;
}

.certificate-icon.orange {
  background: #f97316;
}

.certificate-icon.red {
  background: #dc2626;
}

.certificate-icon.teal {
  background: #0d9488;
}

.certificate-badge {
  position     : absolute;
  top          : 20px;
  right        : 20px;
  padding      : 4px 10px;
  border-radius: 12px;
  font-size    : 0.8rem;
  font-weight  : 600;
  color        : #fff;
}

.verified {
  background: #1489e1;
}

.active {
  background: #21b6fb00;
}

.valid {
  background: #a855f7;
}

.certified {
  background: #ef4444;
}

.certified1 {
  background: blue;
}

.certified2 {
  background: green;
}

.registered {
  background: #14b8a6;
}

.certificate-card h3 {
  font-size    : 1.1rem;
  color        : #111;
  margin-bottom: 8px;
}

.certificate-card p {
  color        : #555;
  font-size    : 0.95rem;
  line-height  : 1.5;
  margin-bottom: 20px;
}

.view-btn {
  display        : inline-block;
  padding        : 8px 14px;
  background     : #f1f5f9;
  color          : #1489e1;
  font-weight    : 600;
  border-radius  : 8px;
  text-decoration: none;
  transition     : 0.3s ease;
}

.view-btn:hover {
  background: #1489e1;
  color     : #fff;
}

.logo img.nav-logo {
  height : 50px;
  /* Adjust based on your header height */
  width  : auto;
  /* Keeps aspect ratio */
  display: block;
}

@media (max-width: 768px) {
  .logo img.nav-logo {
    height: 40px;
    /* Slightly smaller on mobile */
  }
}




/* HERO SECTION */
.hero {
  position       : relative;
  height         : 100vh;
  color          : #fff;
  overflow       : hidden;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : 0 20px;
  /* small padding on mobile */
}

.hero-slider {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
  z-index : 0;
}

.hero-slider .slide {
  position           : absolute;
  width              : 100%;
  height             : 100%;
  background-size    : cover;
  background-position: center;
  opacity            : 0;
  transition         : opacity 1.5s ease-in-out;
}

.hero-slider .slide.active {
  opacity: 1;
}

.hero-content {
  position  : relative;
  z-index   : 2;
  text-align: center;
  padding   : 0 10px;
}

.hero-content h1 {
  font-size    : 3rem;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 1.2rem;
  max-width: 700px;
  margin   : 0 auto;
}

.hero-bg {
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  z-index       : 1;
  pointer-events: none;
}

/* Dark overlay */
.hero::before {
  content   : "";
  position  : absolute;
  inset     : 0;
  background: rgba(0, 0, 0, 0.45);
  z-index   : 1;
}

/* POPUP */
.popup {
  display         : none;
  position        : fixed;
  z-index         : 1000;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  overflow-y      : auto;
  background-color: rgba(0, 0, 0, 0.85);
  padding         : 0px;
  box-sizing      : border-box;
  justify-content : center;
  align-items     : center;
  display         : flex;
  padding-top     : 30rem !important;
}

.popup img {
  max-width    : 100%;
  max-height   : 100%;
  border-radius: 10px;
  box-shadow   : 0 5px 15px rgba(0, 0, 0, 0.5);
}

.close-btn {
  position   : absolute;
  top        : 15px;
  right      : 20px;
  color      : red;
  font-size  : 35px;
  font-weight: bold;
  cursor     : pointer;
  z-index    : 1001;
}

.close-btn:hover {
  color: #ff5555;
}




/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .hero {
    height: 155vh !important;
  }

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

  .hero-content p {
    font-size: 1rem;
  }

  .popup img {
    width : 95%;
    margin: 30px auto;
  }

  /* POPUP */
  .popup {
    padding-top: 70rem !important;
  }


}



@media (max-width: 480px) {
  .hero {
    height : 155vh !important;
    padding: 0 10px;
  }

  .hero-content {
    padding: 100px 0px;
  }

  /* .hero-content h1 {
    font-size: 2.5rem !important;
  } */

  .hero-content p {
    font-size: 1.2rem;
  }

  .close-btn {
    font-size: 28px;
    top      : 10px;
    right    : 15px;
    color    : red;
  }


  /* POPUP */
  .popup {
    padding-top: 70rem !important;
  }




}

/* RESPONSIVE */
@media (max-width: 768px) {
  .popup img {
    width     : 95%;
    max-height: 80%;
  }

  .close-btn {
    font-size: 28px;
    top      : 10px;
    right    : 15px;
  }
}

@media (max-width: 480px) {
  .popup img {
    width     : 100%;
    max-height: 75%;
  }
}

/* POPUP */
.popup {
  display         : flex;
  position        : fixed;
  z-index         : 1000;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  overflow-y      : auto;
  background-color: transparent;
  padding         : 20px;
  box-sizing      : border-box;
  justify-content : center;
  align-items     : center;
  display         : flex;
}

.popup img {
  max-width    : 100%;
  max-height   : 100%;
  border-radius: 10px;
  box-shadow   : 0 5px 15px rgba(0, 0, 0, 0);
  display      : flex;
  align-items  : center;
}

.close-btn {
  position   : absolute;
  top        : 75px;
  right      : 20px;
  color      : rgb(255, 0, 0);
  font-size  : 35px;
  font-weight: bold;
  cursor     : pointer;
  z-index    : 1001;
}

.close-btn:hover {
  color: #ff0000;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .popup img {
    width     : 95%;
    max-height: 80%;
  }

  .close-btn {
    font-size: 28px;
    top      : 10px;
    right    : 15px;
  }
}

@media (max-width: 480px) {
  .popup img {
    width     : 100%;
    max-height: 75%;
  }
}


.whatsapp-section {
  margin         : 20px 0;
  display        : flex;
  justify-content: flex-start;
}

.whatsapp-btn {
  display         : inline-flex;
  align-items     : center;
  background-color: #25D366;
  color           : white;
  font-weight     : 600;
  padding         : 10px 20px;
  border-radius   : 50px;
  text-decoration : none;
  transition      : transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-btn:hover {
  background-color: #1ebe5d;
  background-color: #ffffff;

  transform: translateY(-3px);
}

.whatsapp-logo {
  width       : 24px;
  height      : 24px;
  margin-right: 10px;
}


.whatsapp-section {
  position: relative;
  z-index : 10;
}

.whatsapp-btn {
  cursor        : pointer;
  pointer-events: all;
}


.project-image img {
  width     : 100%;
  height    : 150px;
  object-fit: cover;
}

/* Dropdown Container */
.nav-dropdown {
  position: relative;
  display : inline-block;
}

/* Dropdown Toggle Button */
.dropdown-toggle {
  background: none;
  border    : none;
  color     : inherit;
  font      : inherit;
  cursor    : pointer;
  padding   : 10px 15px;
}

/* Dropdown Menu */
.dropdown-menu {
  display         : none;
  position        : absolute;
  background-color: #fff;
  min-width       : 180px;
  box-shadow      : 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius   : 6px;
  z-index         : 1000;
}

/* Dropdown Menu Links */
.dropdown-menu a {
  color          : #333;
  padding        : 10px 15px;
  display        : block;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color: #f0f0f0;
  color           : #1489e1;
}

/* Show dropdown on hover */
.nav-dropdown:hover .dropdown-menu {
  display: block;
}

/* Infrastructure Engineering Section */
.infrastructure-section {
  background: linear-gradient(to bottom, #ffffff, #ffffff);
  text-align: center;
}

.section-title {
  font-size     : 3rem;
  font-weight   : 800;
  color         : #1489e1;
  text-transform: uppercase;
  margin-bottom : 15px;
}

.section-titleh {
  font-size     : 2rem;
  font-weight   : 800;
  color         : #1489e1;
  text-transform: uppercase;
  margin-bottom : 15px;
}

.section-subtitle {
  color      : #555;
  max-width  : 900px;
  margin     : 0 auto 50px;
  font-size  : 1.05rem;
  line-height: 1.8;
}

.expertise-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  gap                  : 30px;
  margin-top           : 40px;
}

.expertise-card {
  background    : #fff;
  border-radius : 16px;
  box-shadow    : 0 4px 14px rgba(0, 0, 0, 0.1);
  overflow      : hidden;
  transition    : all 0.4s ease;
  display       : flex;
  flex-direction: column;
  height        : 100%;
}

.expertise-card img {
  width     : 100%;
  height    : 180px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.expertise-card:hover img {
  transform: scale(1.07);
}

.expertise-card h4 {
  font-size  : 1.4rem;
  color      : #1489e1;
  font-weight: 700;
  padding    : 15px 20px 5px;
  text-align : center;
}

.expertise-card p {
  font-size: 0.95rem;
  color    : #444;
  padding  : 0 20px 20px;
}

.expertise-card:hover {
  transform : translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.read-more-wrapper {
  margin-top: 60px;
}

.read-more-btn {
  display        : inline-block;
  background     : linear-gradient(135deg, #1489e1, #2563eb);
  color          : #fff;
  padding        : 14px 34px;
  border-radius  : 35px;
  text-decoration: none;
  font-weight    : 600;
  transition     : all 0.3s ease;
  letter-spacing : 0.5px;
}

.read-more-btn:hover {
  background: linear-gradient(135deg, #153e75, #1e40af);
  transform : scale(1.05);
}




/* Popup Background Overlay */
.popup {
  display         : none;
  /* Hidden by default */
  position        : fixed;
  z-index         : 9999;
  left            : 0;
  top             : 0;
  width           : 100%;
  height          : 100%;
  overflow        : auto;
  background-color: rgba(0, 0, 0, 0.75);
  justify-content : center;
  align-items     : center;
}

/* Popup Visible */
.popup.active {
  display: flex;
}

/* Popup Inner Box */
.popup-content {
  position     : relative;
  background   : #fff;
  padding      : 10px;
  border-radius: 10px;
  box-shadow   : 0 5px 20px rgba(0, 0, 0, 0.3);
  max-width    : 100%;
  max-height   : 100vh;
  animation    : zoomIn 0.4s ease;
}

/* Certificate Image */
.popup-content img {
  max-width    : 100%;
  max-height   : 95vh;
  border-radius: 10px;
}

/* Close Button */
.close-btn {
  position     : absolute;
  top          : -15px;
  right        : -15px;
  background   : #ff0505;
  color        : #ffffff;
  font-size    : 24px;
  font-weight  : bold;
  width        : 35px;
  height       : 35px;
  border-radius: 50%;
  text-align   : center;
  line-height  : 35px;
  cursor       : pointer;
  box-shadow   : 0 2px 10px rgba(0, 0, 0, 0.3);
  transition   : 0.3s;
}

.close-btn:hover {
  background: #cf1609;
  color     : #fff;
}

/* Zoom Animation */
@keyframes zoomIn {
  from {
    transform: scale(0.7);
    opacity  : 0;
  }

  to {
    transform: scale(1);
    opacity  : 1;
  }
}

/* === Floating Animation for Images === */
@keyframes floaty {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.expertise-card:nth-child(3n) img {
  animation: floaty 5s ease-in-out infinite;
}

.expertise-card:nth-child(3n + 1) img {
  animation: floaty 6s ease-in-out infinite;
}

.expertise-card:nth-child(3n + 2) img {
  animation: floaty 4.5s ease-in-out infinite;
}

/* === Fade-in Scroll Animation === */
@keyframes fadeInUp {
  from {
    opacity  : 0;
    transform: translateY(30px);
  }

  to {
    opacity  : 1;
    transform: translateY(0);
  }
}

.expertise-card {
  opacity  : 0;
  animation: fadeInUp 0.8s forwards;
}

.expertise-card:nth-child(odd) {
  animation-delay: 0.2s;
}

.expertise-card:nth-child(even) {
  animation-delay: 0.4s;
}


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

.vision {
  background-color: #ffffff;
  padding         : 100px 20px;
}

.vision-text-wrapper {
  max-width : 900px;
  text-align: left;
}

.vision h2 {
  font-size    : 3rem;
  color        : #1489e1;
  /* Bright blue like in the image */
  font-weight  : 200;
  line-height  : 1.2;
  margin-bottom: 40px;
}

.vision p {
  font-size    : 1.125rem;
  color        : #333;
  line-height  : 1.6;
  margin-bottom: 20px;
}

.vision .slogan {
  font-weight: 500;
  color      : #111;
}

/* Featured Insights Section */
.featured-insights {
  background-color: #e8efed;
  padding         : 100px 0;
  position        : relative;
  overflow        : hidden;
  font-family     : 'Open Sans', sans-serif;
}

.insights-container {
  position  : relative;
  max-width : 1200px;
  margin    : 0 auto;
  min-height: 480px;
}

.insight {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 60px;
  opacity        : 0;
  transform      : translateX(100%);
  transition     : all 0.8s ease-in-out;
  position       : absolute;
  width          : 100%;
}

.insight.active {
  opacity  : 1;
  transform: translateX(0);
  position : relative;
}

.insight-text {
  flex        : 1;
  padding     : 20px;
  /* transform: translateX(0%);
  transition  : all 0.8s ease-in-out; */
}

.insight-category {
  color         : #1489e1;
  font-weight   : 600;
  letter-spacing: 1px;
  margin-bottom : 15px;
  text-transform: uppercase;
  font-size     : 0.9rem;
}

.insight-text h2 {
  font-size    : 2rem;
  color        : #0a0a0a;
  margin-bottom: 20px;
  line-height  : 1.4;
  font-weight  : 600;
}

.insight-text p {
  font-size    : 1rem;
  color        : #333;
  line-height  : 1.6;
  margin-bottom: 20px;
}

.learn-more {
  display        : inline-block;
  font-weight    : 600;
  color          : #1489e1;
  text-decoration: none;
  transition     : all 0.3s ease;
  border-bottom  : 2px solid transparent;
}

.learn-more:hover {
  border-color: #1489e1;
}

.insight-image {
  flex         : 1;
  overflow     : hidden;
  border-radius: 10px;
}

.insight-image img {
  width        : 100%;
  height       : auto;
  border-radius: 10px;
  object-fit   : cover;
  transform    : scale(2);
  transition   : transform 1.2s ease;
}

.insight.active .insight-image img {
  transform: scale(1.05);
}

.insight-navigation {
  position: absolute;
  bottom  : -10px;
  right   : auto;
  display : flex;
  gap     : 10px;
}

.insight-navigation button {
  background   : #1489e1;
  border       : 1.5px solid #97d4ff;
  color        : #ffffff;
  font-size    : 20px;
  cursor       : pointer;
  width        : 45px;
  height       : 45px;
  border-radius: 50%;
  transition   : all 0.3s ease;
}

.insight-navigation button:hover {
  background-color: #1489e1;
  color           : #fff;
}

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

  .insight-image {
    order: -1;
    width: 100%;
  }

  .insight-text {
    padding: 0 15px;
  }

  .insight-text h2 {
    font-size: 1.6rem;
  }

  .insight-navigation {
    position       : relative;
    justify-content: center;
    margin-top     : 40px;
  }
}


.hero {
  position: relative;
  height  : 100vh;
  overflow: hidden;
  color   : white;
}

.hero-video {
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  object-fit: cover;
  z-index   : -2;
}

/* Optional dark overlay to keep text readable */
.hero-overlay {
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index   : -1;
}


.hero-slider::before {
  content   : "";
  position  : absolute;
  inset     : 0;
  background: rgba(0, 0, 0, 0.508);
  z-index   : 1;
}


/* --- Expertise Section --- */
.expertise-section {
  padding         : 80px 0;
  background-color: #f9f9f9;
}

.expertise-container {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 40px;
  align-items: flex-start;
  margin     : 3rem auto;
}

/* Left Column */
.expertise-left {
  flex         : 1;
  min-width    : 300px;
  padding-right: 40px;
  border-right : 1px solid #ccc;

}

.expertise-left h2 {
  font-size    : 50px;
  font-weight  : 600;
  margin-bottom: 20px;
}

.expertise-left p {
  font-size: 22px;
  color    : #333;
}

/* Featured Project */
.featured-project {
  margin-top: 40px;
}

.featured-project img {
  width        : 100%;
  max-width    : 500px;
  border-radius: 8px;
  display      : block;
  height       : 230px;
}

.featured-project .featured-label {
  margin-top: 10px;
  color     : #777;
}

.featured-project h3 {
  font-size: 24px;
  margin   : 5px 0;
}

.featured-project a {
  color          : #1489e1;
  font-weight    : 600;
  text-decoration: none;
  transition     : all 0.3s ease;
}

.featured-project a:hover {
  text-decoration: underline;
}

/* Right Column */
.expertise-right {
  flex           : 1;
  min-width      : 250px;
  padding-left   : 40px;
  align-items    : center;
  justify-content: center;
  /* margin      : auto; */
}

.expertise-right h4 {
  font-size    : 18px;
  margin-bottom: 20px;
}

.expertise-right ul {
  list-style : none;
  padding    : 0;
  font-size  : 42px;
  line-height: 2;
}

.expertise-right a {
  text-decoration: none;
  color          : #1489e1;
  transition     : color 0.3s ease;
}

.expertise-right a:hover {
  color: #1489e1;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
  .expertise-container {
    flex-direction: column;
  }

  .expertise-right {
    padding-left: 0;
    border-left : none;
    border-top  : 1px solid #ccc;
    padding-top : 30px;
  }

  .expertise-right ul {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .expertise-left h2 {
    font-size: 28px;
  }

  .expertise-left p,
  .expertise-right ul {
    font-size: 16px;
  }

  .featured-project h3 {
    font-size: 20px;
  }

  .expertise-right ul {
    line-height: 2.8;
    font-size  : 25px;
  }

  .featured-project img {
    max-width: 100%;
  }

  .ISOExpert {
    display        : block;
    justify-content: center;
    align-items    : center;
  }

  .feature-card {
    margin-bottom: 20px;
  }

  .expertise-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap                  : 30px;
    margin-top           : 40px;
  }

}

.form-group {
  display: block;
}

.insight-text p {
  font-size    : 1.2rem;
  color        : #333;
  line-height  : 1.6;
  margin-bottom: 20px;
}


svg {
  margin-top: 10px;
}


/* Core Values Section */
.values-section {
  background : #f8fbff;
  padding    : 100px 0;
  font-family: 'Open Sans', sans-serif;
}

.values-section .section-title {
  text-align    : center;
  font-size     : 2.5rem;
  font-weight   : 700;
  color         : #1489e1;
  text-transform: uppercase;
  margin-bottom : 60px;
}

.values-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap                  : 30px;
  justify-items        : center;
}

.value-card {
  background   : #ffffff;
  border-radius: 15px;
  padding      : 30px 25px;
  text-align   : center;
  box-shadow   : 6px 6px 12px rgba(0, 0, 0, 0.1);
  border-top   : 5px solid #1489e1;
  transition   : all 0.3s ease;
  max-width    : 300px;
}

.value-card:hover {
  transform : translateY(-8px);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.15);
}

.value-icon {
  width : 60px;
  height: 60px;
  margin: 0 auto 15px;
  color : #1489e1;
}

.value-card h3 {
  font-size    : 1.3rem;
  font-weight  : 700;
  color        : #0e1b33;
  margin-bottom: 10px;
}

.value-card p {
  font-size  : 1rem;
  color      : #444;
  line-height: 1.6;
}


/* ========== APPROACH SECTION ========== */
.approach-section {
  background: #ffffff;
  padding   : 100px 0;
}

.approach-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap                  : 40px;
}

.approach-step {
  background   : #f0f7ff;
  border-radius: 15px;
  padding      : 25px;
  text-align   : center;
  transition   : all 0.3s ease;
  box-shadow   : 4px 4px 12px rgba(0, 0, 0, 0.08);
}

.approach-step:hover {
  transform: translateY(-6px);
}

.step-number {
  display      : inline-block;
  background   : #1489e1;
  color        : #fff;
  font-weight  : bold;
  padding      : 10px 18px;
  border-radius: 50%;
  font-size    : 1.2rem;
  margin-bottom: 10px;
}

/* ========== SUSTAINABILITY ========== */
.sustainability-section {
  background: linear-gradient(135deg, #1489e1, #1489e1);
  color     : #fff;
  padding   : 90px 0;
  text-align: center;
}

.sustainability-text {
  max-width  : 800px;
  margin     : 0 auto;
  font-size  : 1.1rem;
  line-height: 1.8;
}

/* ========== TIMELINE SECTION ========== */
.timeline-section {
  background : #f9fbff;
  padding    : 100px 0;
  font-family: 'Open Sans', sans-serif;
}

.timeline {
  position    : relative;
  margin      : 40px auto;
  padding-left: 30px;
  border-left : 4px solid #1489e1;
  max-width   : 800px;
}

.timeline-item {
  margin-bottom: 40px;
  position     : relative;
}

.timeline-dot {
  position        : absolute;
  left            : -12px;
  top             : 0;
  width           : 20px;
  height          : 20px;
  background-color: #1489e1;
  border-radius   : 50%;
}

.timeline-content h3 {
  color        : #0e1b33;
  font-weight  : 700;
  margin-bottom: 8px;
}

.timeline-content p {
  color      : #333;
  line-height: 1.7;
  font-size  : 1rem;
}

.read-more-btn {
  display        : inline-block;
  margin-top     : 12px;
  padding        : 5px 16px;
  background     : #1489e1;
  color          : #fff;
  font-weight    : 500;
  text-decoration: none;
  border-radius  : 6px;
  transition     : all 0.3s ease;
}

.read-more-btn:hover {
  background: #1489e1;
  transform : translateY(-2px);
}


.service-detail {
  padding   : 80px 0;
  background: #f9fbff;
}

.service-detail .container {
  max-width: 950px;
  margin   : 0 auto;
}

.service-title {
  font-size    : 2rem;
  font-weight  : 700;
  color        : #0e1b33;
  margin-bottom: 25px;
}

.service-detail p {
  font-size    : 1.05rem;
  line-height  : 1.8;
  color        : #333;
  margin-bottom: 18px;
}

.service-detail ul {
  list-style-type: disc;
  margin-left    : 25px;
  margin-bottom  : 25px;
  color          : #333;
  line-height    : 1.8;
}

.service-detail li {
  margin-bottom: 6px;
}


.expertise-card {
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
  height         : 100%;
  background     : #fff;
  border-radius  : 10px;
  box-shadow     : 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow       : hidden;
  transition     : transform 0.3s ease, box-shadow 0.3s ease;
}

.expertise-card img {
  width        : 100%;
  height       : 180px;
  object-fit   : cover;
  border-radius: 6px;
}

.expertise-card h4 {
  color      : #1489e1;
  font-size  : 18px;
  font-weight: 700;
  margin-top : 12px;
}

.expertise-card p {
  flex-grow  : 1;
  /* pushes button to bottom */
  margin-top : 8px;
  color      : #444;
  line-height: 1.5;
}

.read-more-btn {
  align-self     : flex-start;
  display        : inline-block;
  padding        : 8px 18px;
  background     : #1489e1;
  color          : #fff;
  font-weight    : 500;
  text-decoration: none;
  border-radius  : 6px;
  transition     : all 0.3s ease;
  margin-top     : auto;
  /* ensures button stays at bottom */
}

.read-more-btn:hover {
  background: #1489e1;
  transform : translateY(-2px);
}

.expertise-card:hover {
  transform : translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.service-title {
  text-align: center;
}

.mv-buttons {
  display        : flex;
  justify-content: center;
  gap            : 20px;
  margin-top     : 25px;
}

.mv-btn {
  padding         : 8px 16px;
  background-color: #1489e1;
  color           : white;
  font-weight     : 500;
  border-radius   : 8px;
  text-decoration : none;
  transition      : all 0.3s ease;
}

.mv-btn:hover {
  background-color: #1489e1;
  transform       : translateY(-2px);
}

.popup-inline img {
  max-width    : 100%;
  border-radius: 10px;
  box-shadow   : 0 4px 20px rgba(0, 0, 0, 0.3);
}

.popup-inline .close-btn {
  color     : #333;
  transition: color 0.3s;
}

.popup-inline .close-btn:hover {
  color: #ff4d4d;
}






.mvp-section {
  background: #f9fcff;
  padding   : 100px 0;
  text-align: center;
}

.mv-buttons {
  display        : flex;
  justify-content: center;
  gap            : 15px;
  margin         : 30px 0 50px;
}

.mv-btn {
  background   : #e9f4ff;
  border       : 2px solid #1489e1;
  color        : #1489e1;
  font-weight  : 600;
  padding      : 4px 20px;
  border-radius: 30px;
  cursor       : pointer;
  transition   : all 0.3s ease;
}

.mv-btn:hover {
  background: #1489e1;
  color     : #fff;
}

.mv-btn.active {
  background: #1489e1;
  color     : #fff;
}

.mv-content {
  margin       : 0 auto;
  text-align   : left;
  background   : #ffffff;
  border-radius: 16px;
  box-shadow   : 0 6px 20px rgba(0, 0, 0, 0.08);
  transition   : all 0.4s ease;
}

.mv-tab {
  display   : none;
  opacity   : 0;
  transform : translateY(10px);
  transition: all 0.4s ease;
}

.mv-tab.active {
  display  : block;
  opacity  : 1;
  transform: translateY(0);
}

.mv-tab h2 {
  color     : #1489e1;
  text-align: center;
}

.mv-tab p {
  color: #333;
}






.hero-title span,
.hero-title {
  font-size: 4rem;
}

.hero-stats .stat-number,
.mission-card h1,
.footer-logo,
.feature-card h3,
.cert-text,
.about-item h3,
.hero-content h1,
.vision h2,
.insight-text h2,
.certificate-card h3,
.expertise-left h2,
h2,
.expertise-right a {
  font-size  : 2.2rem !important;
  font-family: 'Open Sans', sans-serif !important;

  ;
}

.insight-text p,
.stat-label,
.nav-link,
.hero-content p,
.about-item p,
.mission-card p,
.section-subtitle,
.footer-col p,
.philosophy-card p,
.footer-col h4,
.footer-col ul li a,
.footer-col ul,
.footer-bottom p,
.feature-card p,
.cert-subtext,
.about-item h3,
.vision p,
.certificate-card p,
.view-btn,
.verified,
.valid,
.certified,
.certified1,
.certified2,
.registered,
.expertise-right ul,
.expertise-left p,
p,
.philosophy-card h3,
.mv-btn,
label {
  font-size  : 1.2rem !important;
  line-height: 1.8 !important;
  font-family: 'Open Sans', sans-serif !important;

}

.mv-btn {
  font-size: 1.4rem !important;
}

p {
  text-align: left;
}


@media (max-width: 576px) {

  .hero-title span,
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-stats .stat-number,
  .mission-card h1,
  .philosophy-card h3,
  .footer-logo,
  .feature-card h3,
  .cert-text,
  .about-item h3,
  .hero-content h1,
  .vision h2,
  .insight-text h2,
  .certificate-card h3,
  .expertise-left h2,
  h2,
  .expertise-right a {
    font-size  : 2rem !important;
    font-family: 'Open Sans', sans-serif !important;
  }

  .insight-text p,
  .stat-label,
  .nav-link,
  .hero-content p,
  .about-item p,
  .mission-card p,
  .section-subtitle,
  .footer-col p,
  .philosophy-card p,
  .footer-col h4,

  .footer-col ul,
  .footer-bottom p,
  .feature-card p,
  .cert-subtext,
  .about-item h3,
  .vision p,
  .certificate-card p,
  .view-btn,
  .verified,
  .valid,
  .certified,
  .certified1,
  .certified2,
  .registered,
  .expertise-right ul,
  .expertise-left p,
  p,
  label {
    font-size  : 1.2rem !important;
    line-height: 1.8 !important;
    font-family: 'Open Sans', sans-serif !important;

  }


  .footer-col p,
  .footer-col ul li,
  .footer-col ul li a,

  .footer-col ul li span {
    font-size  : 1.1rem !important;
    line-height: 1.8 !important;
    font-family: 'Open Sans', sans-serif !important;
  }

  .mv-btn {
    padding    : 3px 15px;
    font-size  : 1rem !important;
    line-height: 1.8 !important;
    font-family: 'Open Sans', sans-serif !important;
  }


}

.career-button-container {
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.career-btn {
  background     : linear-gradient(90deg, #ffffff, #ffffff);
  color          : #1489e1;
  font-weight    : 600;
  font-size      : 1.1rem;
  padding        : 14px 32px;
  border-radius  : 8px;
  text-decoration: none;
  box-shadow     : 0 4px 12px rgba(0, 123, 255, 0.3);
  transition     : all 0.3s ease;
}

.career-btn:hover {
  background: linear-gradient(90deg, #1489e1, #1489e1);
  transform : translateY(-3px);
  color     : #ffff;
  box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}





.footer-logo-link {
  display      : inline-block;
  margin-bottom: 15px;
}

.footer-logo-img {
  width     : 140px;
  height    : auto;
  display   : block;
  object-fit: contain;
}