* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body { 
  line-height: 1.6;
  overflow-x: hidden;
  background-color: #555555;
  color: #333;
}

/* Page-specific backgrounds */
body.home-page {
  background-color: #555555;
}

body.about-page {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
  min-height: 100vh;
}

body.contact-page {
  background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
  min-height: 100vh;
}

/* Service Page Specific Background - Higher Specificity */
body.service-page {
  background-color: #f8f9fa;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

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

header {
  background: #111;
  color: #fff;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

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

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 40px;
  width: auto;
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.05);
}

nav a {
  color: #fff;
  margin-left: 20px;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

nav a:hover {
  color: #f9a826;
  transform: translateY(-2px);
}

nav a.active {
  background: #f9a826;
  color: #111;
  font-weight: 600;
}

.hero {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.7), rgba(40, 40, 40, 0.6)), url('../images/Logo V2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero .container {
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.hero h1 {
  font-size: 30px;
  margin-bottom: 10px;
  padding-top: 370px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards, float 3s ease-in-out infinite;
}

.hero p {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease 0.3s forwards, float 3s ease-in-out infinite 0.5s;
}

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

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

.btn {
  display: inline-block;
  /* margin: 15px 0 0 auto; */
  padding: 10px 20px;
  background: transparent;
  color: #fff;
  text-decoration: none;
  border: 0px solid #f9a826;
  border-radius: 5px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease 0.6s forwards;
}

.btn:hover {
  background: #f9a826;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(249, 168, 38, 0.3);
}

.section {
  padding: 60px 0;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

.section h2 {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: all 0.6s ease;
}

.section.visible h2 {
  opacity: 1;
  transform: translateY(0) scale(1);
  color: #f9a826;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.coming-soon {
  text-align: center;
  padding: 80px 20px;
}

.coming-soon-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 60px 40px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.coming-soon-icon {
  font-size: 80px;
  margin-bottom: 30px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.coming-soon-content h3 {
  font-size: 36px;
  color: #f9a826;
  margin-bottom: 20px;
  font-weight: 700;
}

.coming-soon-content p {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
}

.coming-soon-content .btn {
  margin-top: 20px;
}

.light { background: #f4f4f4; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
  padding-top: 100px;
}

.service-item {
  background: white;
  padding: 20px 15px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: rotateX(0deg) rotateY(0deg) translateZ(0px);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;
}

.service-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-item:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(5deg) translateZ(20px) scale(1.08);
  box-shadow: 
    0 25px 50px rgba(0,0,0,0.2),
    0 10px 30px rgba(249, 168, 38, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 168, 38, 0.15), transparent);
  transition: left 0.5s ease;
  transform: translateZ(1px);
}

.service-item:hover::before {
  left: 100%;
}

.service-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(249, 168, 38, 0.1) 0%, transparent 50%, rgba(249, 168, 38, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translateZ(2px);
  pointer-events: none;
}

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

.service-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.service-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  transform: translateZ(0px);
}

.service-item:hover .service-icon {
  transform: translateZ(30px) scale(1.3) rotateY(10deg) rotateX(5deg);
  filter: drop-shadow(0 10px 20px rgba(249, 168, 38, 0.4));
}

.service-item h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  transform: translateZ(0px);
}

.service-item:hover h3 {
  color: #f9a826;
  transform: translateZ(15px) scale(1.05);
  text-shadow: 0 2px 10px rgba(249, 168, 38, 0.3);
}

.card h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.card h3 a:hover {
  color: #f9a826;
}

.card {
  padding: 20px;
  background: white;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: rotateX(0deg) rotateY(0deg) translateZ(0px);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;
}

.card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(5deg) translateZ(20px) scale(1.08);
  box-shadow: 
    0 25px 50px rgba(0,0,0,0.2),
    0 10px 30px rgba(249, 168, 38, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 168, 38, 0.15), transparent);
  transition: left 0.5s ease;
  transform: translateZ(1px);
}

.card:hover::before {
  left: 100%;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(249, 168, 38, 0.1) 0%, transparent 50%, rgba(249, 168, 38, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translateZ(2px);
  pointer-events: none;
}

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

.service-image {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  transform: translateZ(0px);
}

.card:hover .service-image {
  transform: translateZ(30px) scale(1.3) rotateY(10deg) rotateX(5deg);
  filter: drop-shadow(0 10px 20px rgba(249, 168, 38, 0.4));
}

.card.clickable {
  cursor: pointer;
  transition: all 0.3s ease;
}

.card.clickable:hover {
  transform: translateY(-15px) rotateX(5deg) rotateY(5deg) translateZ(20px) scale(1.08);
  box-shadow: 
    0 25px 50px rgba(0,0,0,0.2),
    0 10px 30px rgba(249, 168, 38, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.card.clickable:active {
  transform: translateY(-5px) scale(1.02);
}

/* Custom Modal Styles */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  animation: modalFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
  margin: 20px;
  animation: modalSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  transform-origin: center;
}

.modal-header {
  background: linear-gradient(135deg, #111 0%, #333 100%);
  color: white;
  padding: 20px;
  text-align: center;
  opacity: 0;
  animation: headerSlideDown 0.8s ease 0.3s forwards;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5em;
  font-weight: 600;
  transform: translateY(-20px);
  animation: titleBounce 0.6s ease 0.5s forwards;
}

.modal-body {
  padding: 30px 20px;
  text-align: center;
  opacity: 0;
  animation: bodyFadeIn 0.5s ease 0.7s forwards;
}

.modal-body p {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.1em;
  line-height: 1.6;
  text-align: center;
  transform: translateY(20px);
  animation: textSlideUp 0.4s ease 0.9s forwards;
}

@keyframes headerSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes titleBounce {
  0% {
    transform: translateY(-20px) scale(0.8);
  }
  60% {
    transform: translateY(5px) scale(1.1);
  }
  80% {
    transform: translateY(-3px) scale(0.95);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bodyFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes textSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-body p:last-child {
  margin-bottom: 0;
  font-weight: 600;
  color: #f9a826;
}

.modal-footer {
  padding: 20px;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-top: 1px solid #e9ecef;
}

.btn-cancel {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel:hover {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}

.btn-ok {
  background: linear-gradient(135deg, #f9a826 0%, #e69520 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-ok:hover {
  background: linear-gradient(135deg, #e69520 0%, #d68410 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(249, 168, 38, 0.4);
}

/* Modal Animations */
@keyframes modalFadeIn {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  50% {
    opacity: 0.7;
    backdrop-filter: blur(5px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

@keyframes modalSlideUp {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.3) rotate(-5deg);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-20px) scale(1.05) rotate(2deg);
  }
  70% {
    transform: translateY(10px) scale(0.98) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* Responsive Modal */
@media (max-width: 600px) {
  .modal-content {
    width: 95%;
    margin: 10px;
  }
  
  .modal-header {
    padding: 15px;
  }
  
  .modal-header h3 {
    font-size: 1.3em;
  }
  
  .modal-body {
    padding: 20px 15px;
  }
  
  .modal-body p {
    font-size: 1em;
  }
  
  .modal-footer {
    padding: 15px;
    flex-direction: column;
  }
  
  .btn-cancel, .btn-ok {
    width: 100%;
    margin: 5px 0;
  }
}

.service-highlighted {
  background: linear-gradient(135deg, #f9a826 0%, #e69520 100%) !important;
  border: 3px solid #f9a826 !important;
  box-shadow: 0 15px 35px rgba(249, 168, 38, 0.4) !important;
  transform: scale(1.05) !important;
  animation: pulse-highlight 2s ease-in-out infinite;
}

@keyframes pulse-highlight {
  0%, 100% { 
    box-shadow: 0 15px 35px rgba(249, 168, 38, 0.4);
  }
  50% { 
    box-shadow: 0 20px 40px rgba(249, 168, 38, 0.6);
  }
}

.about {
  display: flex;
  align-items: center;
  gap: 30px;
}

.about img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

input, textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: all 0.3s ease;
}

input:focus, textarea:focus {
  outline: none;
  border-color: #f9a826;
  box-shadow: 0 0 10px rgba(249, 168, 38, 0.2);
}

footer {
  background: #111;
  color: white;
  text-align: center;
  padding: 15px;
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: #f9a826;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(249, 168, 38, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  text-decoration: none;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: #e69520;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(249, 168, 38, 0.4);
}

.back-to-top:active {
  transform: translateY(-2px);
}

.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  /* background: #25D366; */
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  /* box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); */
  transition: all 0.3s ease;
  z-index: 1000;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: #128C7E;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

.whatsapp-float:active {
  transform: translateY(-2px);
}

.hero-content {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-content.hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.about-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  animation: fadeInUp 0.5s ease;
}

.about-details h3 {
  color: #f9a826;
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 600;
}

.about-details p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 15px;
}

.view-more-btn {
  position: relative;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  overflow: hidden;
  transition: transform 0.2s ease;
  text-decoration: none;
}

.view-more-btn:hover {
  transform: scale(1.03);
}

.view-more-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #feca57,
    #ff9ff3,
    #ff6b6b
  );
  z-index: -2;
  filter: blur(10px);
  transform: rotate(0deg);
  transition: transform 1.5s ease-in-out;
}

.view-more-btn:hover::before {
  transform: rotate(180deg);
}

.view-more-btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: black;
  border-radius: 47px;
  z-index: -1;
  filter: blur(5px);
}

.view-more-btn i {
  color: transparent;
  background: conic-gradient(
    from 0deg,
    #ff6b6b,
    #4ecdc4,
    #45b7d1,
    #96ceb4,
    #feca57,
    #ff9ff3,
    #ff6b6b
  );
  background-clip: text;
  filter: hue-rotate(0deg);
  position: relative;
  z-index: 1;
}

.view-more-btn:hover i {
  animation: hue-rotating 2s linear infinite;
}

.view-more-btn:active {
  transform: scale(0.99);
}

@keyframes hue-rotating {
  to {
    filter: hue-rotate(360deg);
  }
}

.view-more-btn-container {
  text-align: center;
  margin-top: 50px;
}

.about-more-btn {
  margin-top: 20px;
  background: #f9a826;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.about-more-btn:hover {
  background: #e69520;
}

/* Wave Animation Background for Contact Page */
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

#contact.section {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#contact .wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e69520;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  transition: 0.5s;
}

#contact .wave span {
  content: "";
  position: absolute;
  width: 325vh;
  height: 325vh;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #000;
}

#contact .wave span:nth-child(1) {
  border-radius: 45%;
  background: rgba(20, 20, 20, 1);
  animation: animate 5s linear infinite;
}

#contact .wave span:nth-child(2) {
  border-radius: 40%;
  background: rgba(20, 20, 20, 0.5);
  animation: animate 10s linear infinite;
}

#contact .wave span:nth-child(3) {
  border-radius: 42.5%;
  background: rgba(20, 20, 20, 0.5);
  animation: animate 15s linear infinite;
}

@keyframes animate {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}

.contact-content {
  position: relative;
  z-index: 1;
}

/* Moving Sphere Animation for Home Page About Section */
#about.section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 60vh;
  padding: 80px 0;
}

#about.section .container {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.sphere-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.sun {
  background-color: red;
  opacity: 0.3;
  position: absolute;
  top: -1050px;
  left: -300px;
  width: 2200px;
  height: 1200px;
  border-radius: 50%;
  animation-name: sunrise2;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

.sun2 {
  background-color: orange;
  opacity: 0.3;
  position: absolute;
  top: -1050px;
  left: -1200px;
  width: 2200px;
  height: 1200px;
  border-radius: 50%;
  animation-name: sunrise2;
  animation-duration: 14s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

.sun3 {
  background-color: yellow;
  opacity: 0.3;
  position: absolute;
  top: -1050px;
  left: -600px;
  width: 2200px;
  height: 1200px;
  border-radius: 50%;
  animation-name: sunrise2;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

@keyframes sunrise2 {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(150px, 50px);
  }
  50% {
    transform: translate(300px, 10px);
  }
  75% {
    transform: translate(150px, 50px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.about-sphere-content {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 50px 30px;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#about.section .container h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: 700;
}

#about.section .container p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #ffffff;
  margin-bottom: 20px;
}

.about-sphere-content em {
  color: #777;
  font-style: italic;
  font-size: 1.1rem;
}

#about.section .highlight-year {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #f9a826;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 20px;
  border: 2px solid #f9a826;
  border-radius: 25px;
  z-index: 20;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  }
}

.about-sphere-content .btn {
  display: inline-block;
  padding: 18px 35px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.4s ease;
  margin-top: 25px;
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
  border: 2px solid transparent;
}

.about-sphere-content .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #764ba2, #667eea);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Additional sphere variations for more dynamic effect */
.sun4 {
  background-color: #ff6b6b;
  opacity: 0.2;
  position: absolute;
  top: -800px;
  left: -400px;
  width: 1800px;
  height: 1000px;
  border-radius: 50%;
  animation-name: sunrise2;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-delay: 3s;
  animation-iteration-count: infinite;
}

.sun5 {
  background-color: #4ecdc4;
  opacity: 0.2;
  position: absolute;
  top: -900px;
  left: -800px;
  width: 2000px;
  height: 1100px;
  border-radius: 50%;
  animation-name: sunrise2;
  animation-duration: 18s;
  animation-timing-function: linear;
  animation-delay: 4s;
  animation-iteration-count: infinite;
}

/* Mobile Responsive for Moving Sphere About Section */
@media (max-width: 768px) {
  .about-sphere-content {
    padding: 35px 20px;
    margin: 20px;
  }
  
  .about-sphere-content h2 {
    font-size: 2.5rem;
  }
  
  .about-sphere-content p {
    font-size: 1.1rem;
  }
  
  .about-sphere-content em {
    font-size: 1rem;
  }
  
  .about-sphere-content .btn {
    padding: 15px 25px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .about-sphere-content {
    padding: 25px 15px;
    margin: 15px;
  }
  
  .about-sphere-content h2 {
    font-size: 2rem;
  }
  
  .about-sphere-content p {
    font-size: 1rem;
  }
  
  .about-sphere-content em {
    font-size: 0.9rem;
  }
  
  .about-sphere-content .btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* Mobile Responsive Design Improvements */

/* Mobile Devices (≤480px) */
@media (max-width: 480px) {
  /* Base Container and Layout */
  .container {
    padding: 0 10px;
    max-width: 100%;
  }
  
  /* Header Navigation */
  header {
    padding: 10px 0;
  }
  
  .nav {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  
  .logo {
    font-size: 1.2rem;
    text-align: center;
  }
  
  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  nav a {
    font-size: 12px;
    padding: 8px 15px;
    text-align: center;
    width: 100%;
    max-width: 200px;
  }
  
  /* Hero Section */
  .hero-content {
    padding: 20px 10px;
    text-align: center;
  }
  
  .hero-content h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 15px;
  }
  
  .hero-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  
  .btn {
    padding: 12px 20px;
    font-size: 14px;
    margin: 5px;
  }
  
  /* Services Grid - Mobile */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 10px;
  }
  
  .service-item {
    padding: 15px;
    text-align: center;
  }
  
  .service-icon {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  
  .service-item h3 {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  
  .service-item p {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  /* Contact Layout - Mobile */
  #contact {
    padding: 20px 10px;
    min-height: auto;
    max-height: none;
    overflow: visible;
  }
  
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 0;
  }
  
  .contact-left, .contact-right {
    padding: 10px;
  }
  
  .contact-item {
    padding: 12px 10px;
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .contact-icon {
    font-size: 18px;
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }
  
  .contact-text h3 {
    font-size: 0.9rem;
    margin-bottom: 5px;
  }
  
  .contact-text p {
    font-size: 0.8rem;
    line-height: 1.3;
  }
  
  /* Contact Form - Mobile */
  .contact-form {
    padding: 15px;
  }
  
  .contact-form h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .contact-form textarea {
    min-height: 100px;
  }
  
  .contact-form button {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    margin-top: 10px;
  }
  
  /* About Page - Mobile */
  .about-hero-new {
    padding: 20px 10px;
    text-align: center;
  }
  
  .about-hero-new h1 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 15px;
  }
  
  .about-hero-new p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .mission-vision-section {
    padding: 20px 10px;
  }
  
  .mission-vision-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .mission-card-new,
  .vision-card-new {
    padding: 20px 15px;
  }
  
  .mission-title-new,
  .vision-title-new {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  
  .mission-text-new,
  .vision-text-new {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 15px;
  }
  
  .mission-point-new,
  .vision-point-new {
    font-size: 0.8rem;
    margin-bottom: 8px;
  }
  
  /* Stats Grid - Mobile */
  .stats-grid-new {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 20px 10px;
  }
  
  .stat-card-new {
    padding: 15px 10px;
  }
  
  .stat-number-new {
    font-size: 1.5rem;
  }
  
  .stat-label-new {
    font-size: 0.8rem;
  }
  
  /* Services Page - Mobile */
  .grid {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 10px;
  }
  
  .card {
    padding: 20px 15px;
    text-align: center;
  }
  
  .card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  
  .card p {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  /* Values Section - Mobile */
  .values-section-new {
    padding: 20px 10px;
  }
  
  .values-grid-new {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .value-card-new {
    padding: 20px 15px;
  }
  
  .value-title-new {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  
  .value-text-new {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  /* Timeline - Mobile */
  .about-timeline {
    padding: 20px 10px;
  }
  
  .timeline-item {
    padding: 15px 10px;
  }
  
  .timeline-card {
    padding: 15px;
  }
  
  .timeline-year {
    font-size: 1rem;
  }
  
  .timeline-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }
  
  .timeline-description {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  /* CTA Section - Mobile */
  .cta-section {
    padding: 30px 20px;
  }
  
  .cta-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .cta-description {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }
  
  .cta-button {
    padding: 15px 25px;
    font-size: 14px;
  }
  
  /* Footer - Mobile */
  footer {
    padding: 15px 10px;
    text-align: center;
  }
  
  footer p {
    font-size: 0.8rem;
  }
  
  /* Floating Buttons - Mobile */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
    font-size: 20px;
  }
  
  .back-to-top {
    width: 45px;
    height: 45px;
    bottom: 15px;
    left: 15px;
    font-size: 16px;
  }
  
  /* Modal - Mobile */
  .modal-content {
    width: 95%;
    margin: 10px auto;
    padding: 20px 15px;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .modal-header h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }
  
  .modal-body p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
  }
  
  .modal-footer {
    flex-direction: column;
    gap: 10px;
    padding: 15px 0 0;
  }
  
  .btn-cancel, .btn-ok {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    margin: 5px 0;
  }
  
  /* Section Padding - Mobile */
  .section {
    padding: 30px 0;
  }
  
  /* Typography - Mobile */
  h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }
  
  h2 {
    font-size: 1.4rem;
    line-height: 1.3;
  }
  
  h3 {
    font-size: 1.1rem;
    line-height: 1.3;
  }
  
  p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  /* Form Elements - Mobile */
  input, textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px;
    border-radius: 5px;
  }
  
  /* Button Adjustments - Mobile */
  .btn {
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 5px;
    margin: 5px;
  }
  
  /* Hide/Show Elements - Mobile */
  .desktop-only {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
}

/* Small Tablets (481px-768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
  
  /* Services Grid */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* Contact Layout */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  /* About Page */
  .mission-vision-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .stats-grid-new {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .services-grid-new {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .values-grid-new {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* Services Page */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .card:hover,
  .contact-item:hover {
    transform: none;
    box-shadow: none;
  }
  
  .btn:active {
    transform: scale(0.98);
  }
  
  .card:active {
    transform: scale(0.98);
  }
  
  .contact-item:active {
    transform: scale(0.98);
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-content {
    padding: 15px 10px;
  }
  
  .hero-content h1 {
    font-size: 1.5rem;
  }
  
  .about-hero-new {
    padding: 15px 10px;
  }
  
  .mission-vision-section {
    padding: 15px 10px;
  }
}

/* 3D Animations for Contact Section */
#contact {
  perspective: 1000px;
  transform-style: preserve-3d;
}

#contact .container {
  animation: slideIn3D 1s ease-out;
  transform-origin: center;
}

#contact h2 {
  animation: flipIn3D 1.2s ease-out;
  transform-style: preserve-3d;
}

#contact p {
  animation: fadeIn3D 1.4s ease-out;
}

#contact .btn {
  transform-style: preserve-3d;
}

/* Contact Form 3D Animation */
.contact-form {
  animation: rotateIn3D 1.8s ease-out;
  transform-style: preserve-3d;
}

.contact-item {
  animation: slideInLeft3D 1.5s ease-out;
  transform-style: preserve-3d;
}

.contact-item:nth-child(2) {
  animation-delay: 0.2s;
}

.contact-item:nth-child(3) {
  animation-delay: 0.4s;
}

.contact-item:nth-child(4) {
  animation-delay: 0.6s;
}

/* 3D Animation Keyframes */
@keyframes slideIn3D {
  0% {
    transform: translateZ(-100px) rotateY(15deg);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipIn3D {
  0% {
    transform: rotateX(-90deg) translateZ(50px);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg) translateZ(0);
    opacity: 1;
  }
}

@keyframes fadeIn3D {
  0% {
    transform: translateZ(30px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
}

@keyframes bounceIn3D {
  0% {
    transform: scale(0) rotateZ(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotateZ(90deg);
  }
  100% {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }
}

@keyframes rotateIn3D {
  0% {
    transform: rotateY(-180deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes slideInLeft3D {
  0% {
    transform: translateX(-100px) rotateZ(-15deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotateZ(0deg);
    opacity: 1;
  }
}

/* Simple Animations for Home Page About Section */
#about.section.light .about > div:first-child {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}

#about.section.light .about > div:first-child h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease 0.2s forwards;
}

#about.section.light .about > div:first-child p {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease 0.4s forwards;
}

#about.section.light .about > div:first-child .btn {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease 0.6s forwards;
}

#about.section.light .about img {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeInRight 1s ease 0.3s forwards;
}

/* Contact Section Background Animation */
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Starry Night Animation for Contact Section */
#contact.section.light {
  min-height: 60vh;
  background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
  overflow: hidden;
  position: relative;
}

#contact.section.light .stars {
  width: 1px;
  height: 1px;
  position: absolute;
  background: white;
  box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
    22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
    38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
    53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
    68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
    83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
    98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
    18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
    35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
    50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
    65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white,
    80vw 92vh 1px white, 85vw 82vh 2px white, 90vw 88vh 1px white,
    95vw 75vh 2px white;
  animation: twinkle 8s infinite linear;
}

#contact.section.light .stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
    3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
    27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
    51vw 92vh 2px white, 59vw 78vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

#contact.section.light .shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, white, transparent);
  animation: shoot 3s infinite ease-in;
}

#contact.section.light .shooting-star:nth-child(2) {
  top: 20%;
  left: -100px;
  animation-delay: 0s;
}

#contact.section.light .shooting-star:nth-child(3) {
  top: 35%;
  left: -100px;
  animation-delay: 1s;
}

#contact.section.light .shooting-star:nth-child(4) {
  top: 50%;
  left: -100px;
  animation-delay: 2s;
}

#contact.section.light .shooting-star:nth-child(5) {
  top: 65%;
  left: -100px;
  animation-delay: 1.5s;
}

#contact.section.light .shooting-star:nth-child(6) {
  top: 80%;
  left: -100px;
  animation-delay: 0.5s;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: translateX(120vw) translateY(50vh) rotate(25deg);
    opacity: 0;
  }
}

#contact.section.light .container {
  position: relative;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(249, 168, 38, 0.3);
}

#contact.section.light h2 {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#contact.section.light p {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#contact.section.light strong {
  color: #f9a826;
}

/* Simple Animations for Home Page Contact Section */
#contact.section.light .container > div {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}

#contact.section.light h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease 0.2s forwards;
}

#contact.section.light p {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease 0.4s forwards;
}

#contact.section.light .btn {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease 0.6s forwards;
}

/* Simple Animation Keyframes */
@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#about {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 25%, #ffffff 50%, #f8f9fa 75%, #e9ecef 100%);
  min-height: 60vh;
  padding: 60px 0;
  padding-top: 100px;
  position: relative;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* Hero Section */
.about-hero-new {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 0;
  position: relative;
}

.about-hero-new h1 {
  font-size: 42px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
  letter-spacing: -1px;
  line-height: 1.2;
}

.about-hero-new .subtitle {
  font-size: 18px;
  color: #7f8c8d;
  margin-bottom: 30px;
  font-weight: 300;
}

/* Mission & Vision Section */
.mission-vision-section {
  margin: 40px 0;
  text-align: center;
}

.mission-vision-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
}

.mission-vision-section .subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

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

.mission-card-new,
.vision-card-new {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  padding: 30px 25px;
  border-radius: 20px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(249, 168, 38, 0.15);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  border: 1px solid rgba(249, 168, 38, 0.2);
  overflow: hidden;
}

.mission-card-new::before,
.vision-card-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f9a826, #e67e22, #f9a826);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.mission-card-new:hover,
.vision-card-new:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 5px 20px rgba(249, 168, 38, 0.25);
}

.mission-icon-new,
.vision-icon-new {
  font-size: 48px;
  background: linear-gradient(135deg, #f9a826, #e67e22);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.mission-card-new:hover .mission-icon-new,
.vision-card-new:hover .vision-icon-new {
  transform: scale(1.1) rotate(5deg);
}

.mission-title-new,
.vision-title-new {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
}

.mission-text-new,
.vision-text-new {
  font-size: 15px;
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 20px;
}

.mission-points-new,
.vision-points-new {
  text-align: left;
  margin-top: 20px;
}

.mission-point-new,
.vision-point-new {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #333;
}

.point-icon-new {
  color: #f9a826;
  margin-right: 10px;
  font-weight: bold;
}

/* Timeline */
.about-timeline {
  position: relative;
  margin: 40px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f9a826, #e67e22);
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.timeline-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.timeline-content {
  flex: 1;
  padding: 0 40px;
}

.timeline-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(249, 168, 38, 0.1);
  border-right: 4px solid #f9a826;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.timeline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(249, 168, 38, 0.05) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.timeline-card:hover {
  transform: translateX(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.timeline-item:nth-child(odd) .timeline-card {
  border-right: none;
  border-left: 4px solid #f9a826;
}

.timeline-item:nth-child(odd) .timeline-card:hover {
  transform: translateX(-10px);
}

.timeline-year {
  font-size: 20px;
  font-weight: 700;
  color: #f9a826;
  margin-bottom: 8px;
}

.timeline-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.timeline-description {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  background: #f9a826;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid white;
  box-shadow: 0 3px 10px rgba(249, 168, 38, 0.4);
}

/* Stats Grid */
.stats-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.stat-card-new {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  padding: 30px 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(249, 168, 38, 0.15);
}

.stat-card-new::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f9a826, #e67e22);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

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

.stat-card-new:hover::after {
  transform: scaleX(1);
}

.stat-icon-new {
  font-size: 40px;
  margin-bottom: 15px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.stat-card-new:hover .stat-icon-new {
  transform: scale(1.15) rotate(-5deg);
}

.stat-number-new {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, #2c3e50, #f9a826);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 5px;
}

.stat-label-new {
  font-size: 14px;
  color: #7f8c8d;
}

/* Services Grid */
.services-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.service-card-new {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(249, 168, 38, 0.1);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(249, 168, 38, 0.15);
}

.service-card-new::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(249, 168, 38, 0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card-new:hover::before {
  opacity: 1;
}

.service-card-new:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 5px 20px rgba(249, 168, 38, 0.2);
}

.service-icon-new {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #f9a826 0%, #e67e22 50%, #f9a826 100%);
  background-size: 200% 200%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
  color: white;
  box-shadow: 0 8px 25px rgba(249, 168, 38, 0.4);
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.service-card-new:hover .service-icon-new {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 12px 35px rgba(249, 168, 38, 0.5);
  animation: gradientShift 2s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.service-title-new {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.service-description-new {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

/* Values Section */
.values-section-new {
  margin: 40px 0;
  text-align: center;
}

.values-section-new h2 {
  font-size: 36px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 15px;
}

.values-section-new .subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 40px;
}

.values-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.value-card-new {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(249, 168, 38, 0.15);
}

.value-card-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 168, 38, 0.1), transparent);
  transition: left 0.6s ease;
}

.value-card-new:hover::before {
  left: 100%;
}

.value-card-new:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  border-color: rgba(249, 168, 38, 0.3);
}

.value-number {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(249, 168, 38, 0.4), rgba(249, 168, 38, 0.15));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.value-card-new:hover .value-number {
  background: linear-gradient(135deg, #f9a826, #e67e22);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.value-icon-new {
  font-size: 40px;
  margin-bottom: 15px;
  display: inline-block;
  transition: all 0.3s ease;
}

.value-card-new:hover .value-icon-new {
  transform: scale(1.15) rotate(-5deg);
}

.value-title-new {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.value-text-new {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #f9a826, #e67e22);
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  margin: 40px 0;
}

.cta-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
  margin-bottom: 15px;
}

.cta-description {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 25px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button {
  display: inline-block;
  background: white;
  color: #f9a826;
  padding: 15px 35px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* Responsive */
@media(max-width: 768px) {
  .about-hero-new h1 {
    font-size: 24px;
  }
  
  .mission-vision-grid,
  .services-grid-new,
  .stats-grid-new,
  .values-grid-new {
    grid-template-columns: 1fr;
  }
  
  .timeline-line {
    left: 15px;
  }
  
  .timeline-item {
    flex-direction: column !important;
    align-items: flex-start;
  }
  
  .timeline-content {
    padding: 0 0 0 40px;
  }
  
  .timeline-dot {
    left: 15px;
  }
}

/* Contact Page - Modern Trending Design */
#contact {
  padding: 20px 0 10px;
  padding-top: 40px;
  text-align: center;
  min-height: calc(60vh - 40px);
  max-height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
  display: flex;
  align-items: center;
}

#contact .container {
  max-height: calc(100vh - 100px);
  overflow: hidden;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin: 0;
  align-items: start;
}

.contact-left {
  text-align: center;
}

.contact-left h2 {
  font-size: 32px;
  margin-bottom: 20px;
  margin-top: 0;
  color: #2c3e50;
  background: linear-gradient(135deg, #2c3e50, #f9a826);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 15px;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(249, 168, 38, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(249, 168, 38, 0.15);
}

.contact-item.center-address {
  justify-content: center;
  text-align: center;
  border-right: 3px solid #f9a826;
  border-top: 3px solid #f9a826;
}

.contact-item.center-phone {
  justify-content: center;
  text-align: center;
  border-left: 3px solid #f9a826;
  border-bottom: 3px solid #f9a826;
}

.contact-item.center-email {
  justify-content: center;
  text-align: center;
  border-right: 3px solid #f9a826;
  border-top: 3px solid #f9a826;
}

.contact-item.center-hours {
  justify-content: center;
  text-align: center;
  border-left: 3px solid #f9a826;
  border-bottom: 3px solid #f9a826;
}

.contact-item.center-mobile {
  justify-content: center;
  text-align: center;
  border-right: 3px solid #f9a826;
  border-top: 3px solid #f9a826;
  border-bottom: 3px solid #f9a826;
  border-left: 3px solid #f9a826;
}

.contact-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 168, 38, 0.1), transparent);
  transition: left 0.6s ease;
}

.contact-item:hover::before {
  left: 100%;
}

.contact-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.12),
    0 4px 15px rgba(249, 168, 38, 0.2);
  border-color: rgba(249, 168, 38, 0.3);
}

.contact-icon {
  font-size: 22px;
  margin-right: 12px;
  margin-top: 2px;
  background: linear-gradient(135deg, #f9a826, #e67e22);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.3s ease;
  display: inline-block;
}

.contact-item:hover .contact-icon {
  transform: scale(1.2) rotate(10deg);
}

.contact-text h3 {
  font-size: 14px;
  margin-bottom: 4px;
  color: #2c3e50;
  font-weight: 600;
}

.contact-text p {
  font-size: 12px;
  color: #7f8c8d;
  line-height: 1.4;
  margin: 0;
}

.contact-form {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  padding: 25px;
  border-radius: 20px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(249, 168, 38, 0.1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(249, 168, 38, 0.2);
}

.contact-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f9a826, #e67e22, #f9a826);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.contact-form h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #2c3e50;
  background: linear-gradient(135deg, #2c3e50, #f9a826);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 12px;
  border: 2px solid rgba(249, 168, 38, 0.2);
  border-radius: 12px;
  font-size: 14px;
  background: white;
  transition: all 0.3s ease;
  color: #2c3e50;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #f9a826;
  box-shadow: 0 4px 15px rgba(249, 168, 38, 0.2);
  transform: translateY(-2px);
}

.contact-form textarea {
  height: 80px;
  resize: none;
}

.contact-form .btn {
  background: linear-gradient(135deg, #f9a826 0%, #e67e22 50%, #f9a826 100%);
  background-size: 200% 200%;
  color: white;
  padding: 14px 35px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 8px 25px rgba(249, 168, 38, 0.4);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-form .btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(249, 168, 38, 0.5);
  /* animation: none; */
}

/* Responsive Design for Contact Page */
@media(max-width: 768px) {
  #contact {
    padding-top: 60px;
    overflow-y: auto;
  }
  
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .contact-left h2 {
    font-size: 24px;
  }
  
  .contact-form {
    padding: 20px;
  }
  
  .contact-form h3 {
    font-size: 18px;
  }
  
  .contact-item {
    padding: 10px 12px;
  }
  
  .contact-icon {
    font-size: 18px;
  }
}
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 55px;
  height: 55px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); */
  transition: all 0.3s ease;
  z-index: 1000;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: #128C7E;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-float:active {
  transform: translateY(-1px);
}

.whatsapp-float img {
  width: 28px;
  height: 28px;
  /* filter: brightness(0) invert(1); */
}