/* Topbar Styles */
:root {
  --gradient: linear-gradient(135deg, #141716, #040505);
  --primary-dark: #00664F;
  --primary-light: #00D289;
  --text-dark: #333;
  --text-light: #666;
}

* {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.topbar {
  background: #000;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 0.5rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.topbar .topbar-left,
.topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.topbar .topbar-left a,
.topbar .topbar-right a {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
  transition: color 0.2s;
  font-weight: 500;
}

.topbar .topbar-left a:hover,
.topbar .topbar-right a:hover {
  color: #e0e0e0;
}

.topbar .topbar-left i,
.topbar .topbar-right i {
  color: #fff;
  font-size: 1em;
  transition: color 0.2s;
}

.topbar .social-icons {
  display: flex;
  gap: 1rem;
}

.topbar .social-icons a {
  color: #fff;
  background: #111;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  font-size: 1.1em;
  box-shadow: 0 1px 4px rgba(255,255,255,0.04);
}

.topbar .social-icons a:hover {
  background: #fff;
  color: #000 !important;
}

.topbar .social-icons a:hover i{
    color: #000;
}

.topbar-right span {
  color: #fff;
  font-weight: 600;
  margin-right: 1.5rem;
  letter-spacing: 0.01em;
}


@media (max-width:1100px){
    .topbar .container .topbar-right span{
        display: none;
    }
}
@media (max-width:800px){
    .topbar .container .topbar-right{
        display: none;
    }
    .topbar .container{
        justify-content: center !important;
        align-items: center !important;

    }
}
@media (max-width: 768px) {
    .topbar .container {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
      padding: 0 1rem;
    }
    .topbar-left,
    .topbar-right {
      gap: 1rem;
      flex-wrap: wrap;
    }
    .topbar-right span {
      margin-right: 0.5rem;
    }
  }
  
@media (max-width:620px){
    .topbar .container .topbar-left a:nth-child(1){
        display: none;
    }
}
@media (max-width:468px){
    .topbar .container .topbar-left a:nth-child(3){
        display: none;
    }
}

/* Header Styles */
header {
    background: #fff;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.07);
    padding: 0.5rem 0;

}

header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0 1.5rem;
}

header .logo {
    width: 90px;
    min-width: 70px;
    display: flex;
    align-items: center;
}

header .logo img,
header .logo .custom-logo {
    width: 100%;
    max-width: 90px;
    height: auto;
    display: block;
}

header .nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

header .nav a {
    color: #111;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5em;
    background: transparent;
    font-weight: 600;
}

header .nav a:hover,
header .nav .nav-item.has-submenu:hover > a,
header .nav .nav-item.has-submenu:focus-within > a {
    background: #111;
    color: #fff;
}

header .nav .nav-item {
    position: relative;
}

header .nav .nav-item.has-submenu > .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 250px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border-radius: 6px;
    z-index: 100;
    flex-direction: column;
    padding: 0.5rem 0;
    border: 1px solid #eee;
}

header .nav .nav-item.has-submenu:hover > .submenu,
header .nav .nav-item.has-submenu:focus-within > .submenu {
    display: flex;
}

header .nav .submenu a {
    color: #111;
    padding: 0.5rem 1.25rem;
    font-size: 0.98rem;
    border-radius: 0;
    background: none;
    transition: background 0.2s, color 0.2s;
    width: 100%;
}

header .nav .submenu a:hover {
    background: #111;
    color: #fff;
}

header .call-btn {
    display: flex;
    align-items: center;
    background: #111;
    color: #fff;
    font-weight: 700;
    padding: 0.5rem 1.25rem;
    border-radius: 24px;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
    margin-left: 1.5rem;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);
    gap: 0.5em;
    border: none;
}

header .call-btn:hover {
    background: #fff;
    color: #111;
    border: 1px solid #111;
}

header .call-btn .call-ico {
    font-size: 1.2em;
    margin-right: 0.5em;
}

/* Mobile Menu Icon */
header .menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    margin-left: 1.5rem;
}

header .menu-icon span {
    display: block;
    width: 28px;
    height: 3px;
    background: #111;
    border-radius: 2px;
    transition: all 0.3s ease;
}

header .menu-icon.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

header .menu-icon.open span:nth-child(2) {
    opacity: 0;
}

header .menu-icon.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Sidebar */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.mobile-logo {
    width: 120px;
}

.mobile-logo img,
.mobile-logo .custom-logo {
    width: 100%;
    height: auto;
    max-width: 90px;
}

.close-menu-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #111;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s;
}

.close-menu-btn:hover {
    background: #eee;
}

/* Mobile Navigation */
.mobile-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.mobile-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    color: #111;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.mobile-nav a:hover {
    background: #f8f9fa;
    color: #111;
}

.mobile-nav a i {
    width: 20px;
    text-align: center;
    color: #666;
}

/* Mobile Submenu */
.mobile-nav-item.has-submenu .submenu-toggle {
    justify-content: space-between;
}

.submenu-arrow {
    transition: transform 0.3s ease;
}

.mobile-nav-item.has-submenu.active .submenu-arrow {
    transform: rotate(180deg);
}

.mobile-submenu {
    display: none;
    background: #f8f9fa;
    border-top: 1px solid #eee;
}

.mobile-nav-item.has-submenu.active .mobile-submenu {
    display: block;
}

.mobile-submenu a {
    padding-left: 3rem;
    font-size: 0.95rem;
    color: #666;
}

.mobile-submenu a:hover {
    background: #e9ecef;
    color: #111;
}

/* Mobile Menu Footer */
.mobile-menu-footer {
    padding: 1.5rem;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.mobile-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #666;
}

.contact-item i {
    width: 16px;
    color: #999;
}

/* Responsive styles */
@media (max-width: 900px) {
    header .container {
        gap: 1rem;
    }
    header .nav {
        gap: 1rem;
    }
    header .call-btn {
        padding: 0.5rem 1rem;
        font-size: 0.98rem;
    }
}

@media (max-width: 768px) {
    header .container {
        gap: 1rem;
        padding: 0 1rem;
    }
    
    /* Hide desktop navigation on mobile */
    header .desktop-nav {
        display: none;
    }
    
    /* Show mobile menu icon */
    header .menu-icon {
        display: flex;
    }
    
    /* Adjust mobile menu width for smaller screens */
    .mobile-menu {
        width: 280px;
        left: -280px;
    }
}

@media (max-width: 480px) {
    .mobile-menu {
        width: 100%;
        left: -100%;
    }
    
    header .container {
        padding: 0 0.75rem;
    }
    
    header .logo {
        width: 80px;
        min-width: 60px;
    }
}

/*  Hero section style */

/* Hero Section */
.hero-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
}

/* Background Elements */
.hero-section .bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-section .floating-circle {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.hero-section .circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.hero-section .circle-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.hero-section .circle-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.hero-section .grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}


/* Hero Container */
.hero-section .hero-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 1rem 1rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero-section .hero-content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  gap: 4rem;
}

.hero-section .content-left {
  flex: 0 0 60%;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-section .content-right {
  flex: 0 0 40%;
  max-width: 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Left Content */
.hero-section .badge {
  display: inline-block;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.9rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 40%;

}

.hero-section .badge i {
  color: white;
}

.hero-section .hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-section .highlight-text {
  color: white;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 8px;
}

.hero-section .hero-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease-out 0.6s both;
  text-align: justify;
}

.hero-section .stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease-out 0.9s both;
}

.hero-section .stat-item {
  text-align: center;
}

.hero-section .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  display: block;
}

.hero-section .stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.hero-section .cta-buttons {
  display: flex;
  gap: 1rem;
  animation: fadeInUp 1s ease-out 1.2s both;
}

.hero-section .btn-primary, .btn-secondary {
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.hero-section .btn-primary {
  background: white;
  color: black;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.hero-section .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.9);
}

.hero-section .btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-section .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  transform: translateY(-3px);
}

/* Right Content - Form */
.hero-section .form-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-section .form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.hero-section .form-header h3 {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.hero-section .form-header p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.hero-section .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-section .form-group {
  position: relative;
}

.hero-section .input-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.hero-section .input-icon i {
  position: absolute;
  left: 1rem;
  color: rgba(255, 255, 255, 0.5);
  z-index: 2;
}

.hero-section .contact-form input,
.hero-section .contact-form select,
.hero-section .contact-form textarea {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.hero-section .contact-form input::placeholder,
.hero-section .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.hero-section .contact-form input:focus,
.hero-section .contact-form select:focus,
.hero-section .contact-form textarea:focus {
  outline: none;
  border-color: white;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.hero-section .contact-form select option {
  background: #1a1a1a;
  color: white;
}

.hero-section .submit-btn {
  background: white;
  color: black;
  padding: 1rem 2rem;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.hero-section .submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.9);
}

.hero-section .form-footer {
  text-align: center;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

.hero-section .form-footer i {
  color: white;
  margin-right: 0.5rem;
}

/* Scroll Indicator */
.hero-section .scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  animation: bounce 2s infinite;
}

.hero-section .scroll-text {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.hero-section .scroll-arrow {
  font-size: 1.2rem;
  color: white;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* Animations */
@keyframes slideInLeft {
  from {
      opacity: 0;
      transform: translateX(-50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
      opacity: 0;
      transform: translateX(50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

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

/* Responsive Design */
@media (max-width: 1024px) {
  .hero-section .hero-title {
      font-size: 3rem;
  }
  
  .hero-section .hero-content {
      flex-direction: column;
      gap: 2rem;
  }

  .hero-section .content-left {
      max-width: 100%;
      flex: 1 1 100%;
  }
  .hero-section .content-right {
      max-width: 100%;
      flex: 1 1 100%;
      margin-top: 2rem;
      justify-content: center;
  }
}

@media (max-width: 768px) {
      .hero-section .hero-content {
      grid-template-columns: 1fr;
      gap: 2rem;
      text-align: center;
  }
  
  .hero-section .hero-title {
      font-size: 2.5rem;
      text-align: left;
  }
  
  .hero-section .stats {
      justify-content: center;
  }
  
  .hero-section .cta-buttons {
      justify-content: center;
      flex-wrap: wrap;
  }
  
  .hero-section .form-container {
      margin-top: 2rem;
  }
  
  .hero-section .hero-container {
      padding: 100px 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .hero-section .hero-title {
      font-size: 2rem;
  }
  
  .hero-section .hero-description {
      font-size: 1rem;
      text-align: justify;
  }
  
  .hero-section .stats {
      gap: 1rem;
  }
  
  .hero-section .cta-buttons {
      flex-direction: column;
      align-items: center;
  }
  
  .hero-section .btn-primary, .hero-section .btn-secondary {
      width: 100%;
      max-width: 300px;
      justify-content: center;
  }
  
  .hero-section .form-container {
      padding: 1.5rem;
  }
  
  .hero-section .nav-container {
      padding: 0 1rem;
  }
}

@media (max-width:600px){
  .hero-section .badge{
    width: 100%;
  }
}

/* Hover Effects */
.hero-section .form-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.hero-section .stat-item:hover .stat-number {
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* Loading Animation */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: loading 2s infinite;
  z-index: 1;
}

@keyframes loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
} 


.brand-section {
  position: relative;
  min-height: 100vh;
  padding: 80px 20px;
  background: #ffffff;
  overflow: hidden;
}

/* Animated Background Elements */
.brand-section .background-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.brand-section .shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.02);
  animation: float 8s ease-in-out infinite;
}

.brand-section .shape:nth-child(1) {
  width: 100px;
  height: 100px;
  top: 15%;
  left: 5%;
  animation-delay: 0s;
}

.brand-section .shape:nth-child(2) {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 10%;
  animation-delay: 3s;
}

.brand-section .shape:nth-child(3) {
  width: 80px;
  height: 80px;
  bottom: 25%;
  left: 15%;
  animation-delay: 6s;
}

.brand-section .shape:nth-child(4) {
  width: 120px;
  height: 120px;
  top: 5%;
  right: 35%;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% {
      transform: translateY(0px) rotate(0deg);
      opacity: 0.3;
  }
  50% {
      transform: translateY(-30px) rotate(180deg);
      opacity: 0.1;
  }
}

/* Moving Dots Pattern */
.brand-section .dots-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: movePattern 25s linear infinite;
}

@keyframes movePattern {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(60px, 60px);
  }
}

.brand-section .container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.brand-section .content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.brand-section .left-content {
  padding-right: 40px;
}

.brand-section .about-tag {
  display: inline-block;
  background: #000000;
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 25px;
  animation: slideInLeft 1s ease-out 0.2s both;
}

.brand-section .main-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #000000;
  line-height: 1.2;
  margin-bottom: 25px;
  animation: slideInLeft 1s ease-out 0.4s both;
}

.brand-section .description {
  font-size: 1rem;
  color: #666666;
  line-height: 1.7;
  margin-bottom: 40px;
  animation: slideInLeft 1s ease-out 0.6s both;
}

.brand-section .services-card {
  background: white;
  border: 2px solid #000000;
  border-radius: 25px;
  padding: 35px;
  margin-bottom: 35px;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 1);
  animation: slideInLeft 1s ease-out 0.8s both;
}



.brand-section .card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 25px;
}

.brand-section .services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.brand-section .service-item {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #333333;
  font-weight: 500;
  transition: all 0.3s ease;
}

.brand-section .service-item:hover {
  color: #000000;
  transform: translateX(5px);
}

.brand-section .service-item::before {
  content: '●';
  color: #000000;
  font-size: 8px;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.brand-section .service-item:hover::before {
  transform: scale(1.3);
}

.brand-section .cta-button {
  display: inline-flex;
  align-items: center;
  background: #000000;
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  animation: slideInLeft 1s ease-out 1s both;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-section .cta-button:hover {
  background: #333333;
  transform: translateX(5px);
}

.brand-section .cta-button::after {
  content: '→';
  margin-left: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.brand-section .cta-button:hover::after {
  transform: translateX(3px);
}

.brand-section .right-content {
  position: relative;
  animation: slideInRight 1s ease-out 0.6s both;
}

.brand-section .images-container {
  position: relative;
  height: 450px;
  width: 100%;
}

.brand-section .team-image {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #f5f5f5;
}

.brand-section .team-image:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.brand-section .team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* filter: grayscale(100%); */
  transition: all 0.3s ease;
}

.brand-section .team-image:hover img {
  filter: grayscale(0%);
}

.brand-section .main-image {
  width: 400px;
  height: 420px;
  top: 0;
  right: 0;
  z-index: 3;
}

.brand-section .secondary-image {
  width: 250px;
  height: 250px;
  bottom: -100px;
  left: 40px;
  z-index: 4;
  border: 15px solid white;
}

.brand-section .experience-badge {
  position: absolute;
  bottom: 0;
  right: 80px;
  background: white;
  border: 2px solid #000000;
  border-radius: 20px;
  padding: 10px 30px;
  z-index: 4;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
  animation: bounce 3s infinite;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.brand-section .experience-number {
  font-size: 1.7rem;
  font-weight: 600;
  color: #000000;
  margin-bottom: 5px;
}

.brand-section .experience-text {
  font-size: 0.85rem;
  color: #666666;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-8px);
  }
  60% {
      transform: translateY(-4px);
  }
}

/* Animation Keyframes */
@keyframes slideInLeft {
  from {
      opacity: 0;
      transform: translateX(-50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
      opacity: 0;
      transform: translateX(50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .brand-section .main-title {
      font-size: 2.5rem;
  }
  
  .brand-section .content-wrapper {
      grid-template-columns: 1fr;
      gap: 50px;
  }
  
  .brand-section .left-content {
      padding-right: 0;
  }
  
  .brand-section .images-container {
      height: 350px;
  }
  
  .brand-section .main-image {
      width: 250px;
      height: 180px;
  }
  
  .brand-section .secondary-image {
      width: 180px;
      height: 130px;
  }
  
  .brand-section .experience-badge {
      right: 50px;
      padding: 15px 25px;
  }
}


.services-section {
min-height: 100vh;
background: #000;
padding: 100px 20px;
position: relative;
overflow: hidden;
}

.services-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}

.services-section .container {
max-width: 1200px;
margin: 0 auto;
}

.services-section .section-title {
text-align: center;
color: white;
margin-bottom: 60px;
position: relative;
}

.services-section .title-main {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}

.services-section .title-sub {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}

.services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}

.services-section .service-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 0.8s forwards;
}

.services-section .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}

.services-section .service-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
}

.services-section .service-card:hover::before {
left: 100%;
}

.services-section .icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: transform 0.3s ease;
}

.services-section .service-card:hover .icon-wrapper {
transform: scale(1.1);
}

.services-section .icon-wrapper i {
font-size: 35px;
color: white;
position: relative;
z-index: 1;
}

.services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}

.services-section .service-description {
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 25px;
}

.services-section .learn-more {
display: inline-block;
padding: 10px 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 25px;
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.services-section .learn-more:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}

.services-section .view-all-wrapper {
margin-top: 40px;
text-align: center;
}

.services-section .view-all-wrapper .btn-modern {
display: inline-block;
padding: 15px 35px;
background: var(--gradient);
border-radius: 30px;
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.services-section .view-all-wrapper .btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
background:linear-gradient(45deg, rgb(255 255 255), rgb(255 255 255));
}

.services-section .view-all-wrapper .btn-modern:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

/* Animation delays for cards */
.services-section .service-card:nth-child(1) {
animation-delay: 0.4s;
}
.services-section .service-card:nth-child(2) {
animation-delay: 0.6s;
}
.services-section .service-card:nth-child(3) {
animation-delay: 0.8s;
}
.services-section .service-card:nth-child(4) {
animation-delay: 1s;
}
.services-section .service-card:nth-child(5) {
animation-delay: 1.2s;
}
.services-section .service-card:nth-child(6) {
animation-delay: 1.4s;
}

/* Responsive Design */
@media (max-width: 768px) {
.services-section .services-section {
  padding: 60px 15px;
}

.services-section .title-main {
  font-size: 2rem;
}

.services-section .title-sub {
  font-size: 1rem;
  padding: 0 20px;
}

.services-section .services-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

.services-section .service-card {
  padding: 30px 20px;
}

.services-section .icon-wrapper {
  width: 70px;
  height: 70px;
}

.services-section .icon-wrapper i {
  font-size: 30px;
}
}
.home-stats-section {
padding: 100px 0;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}

.home-stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background: radial-gradient(
  circle at 50% 50%,
  rgba(36, 36, 225, 0.03) 0%,
  transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}

.home-stats-section .container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 80px;

position: relative;
z-index: 1;
}

.home-stats-section .text-content {
flex: 1;
position: relative;
}

.home-stats-section .glowing-line {
width: 3px;
height: 100px;
background: #000;
position: absolute;
left: -20px;

top: 0;
animation: glow 2s ease-in-out infinite;
}

.home-stats-section .headline {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
opacity: 0;

transform: translateY(30px);
animation: slideUpFade 1s forwards;
}

.home-stats-section .headline span {
display: block;
background: #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.home-stats-section .description {
font-size: 1.2rem;
color: #555;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0;

animation: slideUpFade 1s 0.3s forwards;
}

.home-stats-section .stats-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
perspective: 1000px;
}

.home-stats-section .stat-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;

transform: translateZ(0);
transition: transform 0.5s;
position: relative;
overflow: hidden;
opacity: 0;
animation: cardAppear 0.5s forwards;
}

.home-stats-section .stat-card:nth-child(1) {
animation-delay: 0.4s;
}
.home-stats-section .stat-card:nth-child(2) {
animation-delay: 0.6s;
}
.home-stats-section .stat-card:nth-child(3) {
animation-delay: 0.8s;
}

.home-stats-section .stat-card:nth-child(4) {
animation-delay: 1s;
}

.home-stats-section .stat-card:hover {
transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
}

.home-stats-section .stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;

height: 100%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(36, 36, 225, 0.1),
  transparent
);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}

.home-stats-section .stat-number {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;

-webkit-text-fill-color: transparent;
margin-bottom: 10px;
position: relative;
display: inline-block;
}

.home-stats-section .stat-number::after {
content: "+";
font-size: 2rem;
position: absolute;
top: 0;
right: -20px;

background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.home-stats-section .stat-label {
font-size: 1.2rem;
color: #555;
font-weight: 600;
position: relative;
}

.home-stats-section .floating-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

overflow: hidden;
pointer-events: none;
}

.home-stats-section .particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;

animation: float 20s linear infinite;
}

.home-stats-section .particle:nth-child(1) {
left: 10%;
top: 20%;
animation-delay: 0s;
}
.home-stats-section .particle:nth-child(2) {
left: 30%;
top: 50%;
animation-delay: 2s;
}
.home-stats-section .particle:nth-child(3) {
left: 50%;
top: 30%;
animation-delay: 4s;
}

.home-stats-section .particle:nth-child(4) {
left: 70%;
top: 60%;
animation-delay: 6s;
}
.home-stats-section .particle:nth-child(5) {
left: 90%;
top: 40%;
animation-delay: 8s;
}

@keyframes pulse {
0%,
100% {
  transform: scale(1);
  opacity: 0.5;
}
50% {
  transform: scale(1.05);
  opacity: 0.8;
}
}

@keyframes glow {
0%,
100% {
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(36, 36, 225, 0.5);
}
50% {
  opacity: 1;
  box-shadow: 0 0 20px rgba(36, 36, 225, 0.8);
}
}

@keyframes cardAppear {
from {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}
to {
  opacity: 1;
  transform: translateY(0) scale(1);
}
}

@keyframes shimmer {
0% {
  transform: translateX(-100%);
}
100% {
  transform: translateX(100%);
}
}

@keyframes float {
0% {
  transform: translateY(0) rotate(0deg);
  opacity: 0;
}
50% {
  opacity: 0.5;
}
100% {
  transform: translateY(-100vh) rotate(360deg);
  opacity: 0;
}
}

.home-stats-section .typing-effect {
overflow: hidden;
border-right: 3px solid rgba(36, 36, 225, 1);
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
from {
  width: 0;
}
to {
  width: 100%;
}
}

@keyframes blink-caret {
from,
to {
  border-color: transparent;
}
50% {
  border-color: rgba(36, 36, 225, 1);
}
}

@media (max-width: 1024px) {
.home-stats-section .container {
  flex-direction: column;
  text-align: center;
}

.home-stats-section.glowing-line {
  display: none;
}

.home-stats-section .headline {
  font-size: 3rem;
}

.home-stats-section .stats-grid {
  grid-template-columns: 1fr;
  width: 100%;
}
}

@media (max-width: 768px) {
.home-stats-section .headline {
  font-size: 2rem !important;
}



}

.home-why-choose-section {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
padding: 100px 20px;
min-height: 100vh;
display: flex;
align-items: center;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}

.home-why-choose-section .glass-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);
}

.home-why-choose-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.home-why-choose-section .section-header {
text-align: center;
margin-bottom: 80px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards;
}

.home-why-choose-section .title {
font-size: 3.5rem;
color: white;
font-weight: 800;
margin-bottom: 20px;
position: relative;

display: inline-block;
}

.home-why-choose-section .title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;

background: white;
border-radius: 2px;
}

.home-why-choose-section .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}

.home-why-choose-section .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.home-why-choose-section .feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
text-align: center;
backdrop-filter: blur(5px);

border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}

.home-why-choose-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.home-why-choose-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;

height: 300%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}

.home-why-choose-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}

.home-why-choose-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}

.home-why-choose-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;

display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.home-why-choose-section .feature-icon i {
color: white;
font-size: 2rem;
}

.home-why-choose-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);

animation: pulse 2s infinite;
}

.home-why-choose-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}

.home-why-choose-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}

.home-why-choose-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}

.home-why-choose-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

pointer-events: none;
}

.home-why-choose-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}

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

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

@keyframes pulse {
0% {
  transform: scale(1);
  opacity: 0.8;
}
100% {
  transform: scale(1.5);
  opacity: 0;
}
}

@keyframes shine {
0% {
  transform: translate(-100%, -100%) rotate(45deg);
}
100% {
  transform: translate(100%, 100%) rotate(45deg);
}
}

@media (max-width: 992px) {
.home-why-choose-section .features-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.home-why-choose-section .features-grid {
  grid-template-columns: 1fr;
}

.home-why-choose-section .title {
  font-size: 2.5rem;
}
}

.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}

.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
animation: rotateBackground 15s infinite linear;
pointer-events: none;
}

@keyframes rotateBackground {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .left-section {
position: relative;
}

.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}

.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}

.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
border-radius: 2px;
}

.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}

.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
transition: height 0.3s ease;
}

.contact-wrapper .info-card:hover::before {
height: 100%;
}

.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}

.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}

.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}

.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.3);
}

.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}

.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}

.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}

.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}

.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}

.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}

.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}

.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}

.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}

.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.contact-wrapper .submit-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
}

.contact-wrapper .submit-button:hover::before {
left: 100%;
}

.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}

.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}

@keyframes floatAnimation {
0% {
  transform: translate(0, 0) rotate(0deg);
}
100% {
  transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}

.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}

.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}

.contact-wrapper .social-links a {
text-decoration: none;
color: white;
}
.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

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

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

.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}

.contact-wrapper .status-message.show {
transform: translateX(0);
}

@media (max-width: 1200px) {
.contact-wrapper .contact-container {
  grid-template-columns: 1fr;
  max-width: 800px;
}
}

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

.contact-wrapper .contact-header h2 {
  font-size: 2.5em;
}

.contact-wrapper .right-section {
  padding: 30px;
}
}

@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
  font-size: 2em;
}

.contact-wrapper .info-content {
  flex-direction: column;
  text-align: center;
}

.contact-wrapper .icon-box {
  margin: 0 auto;
}
}

.our-course {
min-height: 90vh;
background: linear-gradient(135deg, #4f46e5, #3b82f6, #60a5fa);
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}

.our-course .section-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px
  ),
  linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
z-index: 1;
}

.our-course .course-container {
max-width: 1200px;
width: 95%;
background: white;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
z-index: 10;
transition: transform 0.4s ease, box-shadow 0.4s ease;
overflow: hidden;
position: relative;
}

.our-course .course-container:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.our-course .course-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #4f46e5, #3b82f6, #60a5fa);
}

.our-course .course-wrapper {
display: flex;
gap: 2rem;
padding: 2rem;
align-items: center;
}

.our-course .course-wrapper .left-container {
flex: 0.8;
display: flex;
justify-content: center;
align-items: center;
padding: 0.8rem;
}

.our-course .course-wrapper .left-container img {
width: 100%;
height: auto;
max-width: 320px;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
transition: transform 0.4s ease;
}

.our-course .course-wrapper .left-container img:hover {
transform: scale(1.05);
}

.our-course .course-wrapper .right-container {
flex: 1.2;
padding: 0.8rem;
}

.our-course .course-container .right-container .course-title h3 {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.8rem;
background: linear-gradient(90deg, #4f46e5, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

.our-course .course-container .right-container .course-description p {
font-size: 1rem;
color: #64748b;
line-height: 1.5;
margin-bottom: 1.2rem;
}

.our-course .course-review {
margin: 1.2rem 0;
padding: 1rem;
background: #f8fafc;
border-radius: 16px;
text-align: left;
border: 1px solid #e2e8f0;
transition: transform 0.3s ease;
}

.our-course .course-review:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.our-course .review {
display: flex;
align-items: center;
gap: 0.8rem;
}

.our-course .rating-number {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
}

.our-course .fa-star {
color: #eab308;
font-size: 1rem;
}

.our-course .total-review {
color: #64748b;
font-size: 0.9rem;
}

.our-course .job-role {
margin: 1.2rem 0;
padding: 0.8rem 1rem;
background: #f0f7ff;
border-radius: 16px;
position: relative;
border: 1px solid #dbeafe;
transition: transform 0.3s ease;
display: flex;
align-items: center;
}

.our-course .job-role:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.our-course .job-role-label {
font-size: 0.9rem;
color: black;
font-weight: 500;
margin-right: 1rem;
white-space: nowrap;
}

.our-course .job-roles-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
flex: 1;
}

.our-course .job-role-pill {
background: #dbeafe;
color: #3b82f6;
border-radius: 50px;
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.3s ease;
}

.our-course .job-role-pill i {
font-size: 0.8rem;
}

.our-course .job-role-pill:hover {
background: #3b82f6;
color: white;
transform: translateY(-2px);
}

.our-course .job-role-icon {
width: 45px;
height: 45px;
background: #dbeafe;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #3b82f6;
font-size: 1.3rem;
margin-left: 1rem;
}

.our-course .course-info {
display: flex;
justify-content: space-between;
padding: 1rem 1.2rem;
background: #f8fafc;
border-radius: 16px;
margin: 1.2rem 0;
border: 1px solid #e2e8f0;
gap: 1rem;
}

.our-course .course-box {
display: flex;
align-items: center;
gap: 0.8rem;
flex: 1;
transition: transform 0.3s ease;
}

.our-course .course-box:hover {
transform: translateY(-5px);
}

.our-course .course-box .icon {
width: 42px;
height: 42px;
background: #e0e7ff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #4f46e5;
font-size: 1.1rem;
transition: all 0.3s ease;
}

.our-course .course-box:hover .icon {
background: #4f46e5;
color: white;
}

.our-course .course-text p {
font-size: 0.85rem;
color: #64748b;
}

.our-course .course-text span {
font-weight: 600;
color: #1e293b;
font-size: 1rem;
}

.our-course .btn-container {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}

.our-course .download-btn {
padding: 0.8rem 1.5rem;
background: #4f46e5;
color: white;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
border: none;
cursor: pointer;
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.our-course .download-btn:hover {
background: #4338ca;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);
}

.our-course .learn-btn {
padding: 0.8rem 1.5rem;
border: 2px solid #4f46e5;
color: #4f46e5;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
background: transparent;
cursor: pointer;
}

.our-course .learn-btn:hover {
background: #f5f3ff;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(79, 70, 229, 0.1);
}

@media (max-width: 992px) {
.our-course .course-wrapper {
  padding: 1.8rem;
  gap: 1.8rem;
}

.our-course .course-container .right-container .course-title h3 {
  font-size: 1.7rem;
}
}

@media (max-width: 768px) {
.our-course .course-wrapper {
  flex-direction: column;
  padding: 1.5rem;
}

.our-course .course-wrapper .left-container,
.our-course .course-wrapper .right-container {
  flex: 1;
  width: 100%;
}

.our-course .course-info {
  flex-direction: column;
  gap: 1.2rem;
}

.our-course .btn-container {
  flex-direction: column;
  gap: 0.8rem;
}

.our-course .download-btn,
.our-course .learn-btn {
  width: 100%;
  text-align: center;
}

.our-course .job-role {
  flex-direction: column;
  align-items: flex-start;
}

.our-course .job-role-label {
  margin-bottom: 0.5rem;
  margin-right: 0;
}

.our-course .job-role-icon {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  margin-left: 0;
}
}

@media (max-width: 480px) {
.our-course {
  padding: 0.8rem;
}

.our-course .course-wrapper {
  padding: 0.8rem;
}

.our-course .course-container .right-container .course-title h3 {
  font-size: 1.4rem;
}

.our-course .course-container .right-container .course-description p {
  font-size: 0.95rem;
}

.our-course .course-review,
.job-role,
.course-info {
  padding: 0.8rem;
}

.our-course .rating-number {
  font-size: 1.2rem;
}
}

.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}

.faq-section .faq-header {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}

.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}

.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}

.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}

.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}

.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}

.faq-section .faq-item.active .faq-question {
border-left-color: rgba(36, 36, 225, 1);
}

.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}

.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
font-size: 1.2em;
transition: all 0.3s ease;
}

.faq-section .faq-item.active .question-icon {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
transform: rotateY(360deg);
}

.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}

.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}

.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}

.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.03) 35%,
  rgba(11, 205, 240, 0.03) 100%
);
}

.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}

.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}

.top-bar {
 background: linear-gradient(to right, #000000, #1a1a1a);
color: white;
padding: 12px 0;
position: relative;
overflow: hidden;
}

.top-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
  45deg,
  transparent 45%,
  rgba(255, 255, 255, 0.1) 48%,
  rgba(255, 255, 255, 0.1) 52%,
  transparent 55%
);
animation: shine 3s infinite;
}

@keyframes shine {
0% {
  transform: translateX(-100%);
}
100% {
  transform: translateX(100%);
}
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}

.top-bar .contact-info {
display: flex;
justify-content: flex-end;
gap: 30px;
align-items: center;
}

.top-bar .contact-info a,
.top-bar .contact-info span {
color: white;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;

transition: all 0.3s ease;
}

.top-bar .contact-info i {
font-size: 16px;
background: rgba(255, 255, 255, 0.1);
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
}

.top-bar .contact-info a:hover i {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}

.top-bar .contact-info a:hover {
transform: translateY(-2px);
}



.services-section {
min-height: 100vh;
background: var(--gradient);
padding: 100px 20px;
position: relative;
overflow: hidden;
}

.services-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}

.services-section .container {
max-width: 1200px;
margin: 0 auto;
}

.services-section .section-title {
text-align: center;
color: white;
margin-bottom: 60px;
position: relative;
}

.services-section .title-main {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}

.services-section .title-sub {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}

.services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}

.services-section .service-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 0.8s forwards;
}

.services-section .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}

.services-section .service-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
}

.services-section .service-card:hover::before {
left: 100%;
}

.services-section .icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: transform 0.3s ease;
}

.services-section .service-card:hover .icon-wrapper {
transform: scale(1.1);
}

.services-section .icon-wrapper i {
font-size: 35px;
color: white;
position: relative;
z-index: 1;
}

.services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}

.services-section .service-description {
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 25px;
}

.services-section .learn-more {
display: inline-block;
padding: 10px 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 25px;
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.services-section .learn-more:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}

.services-section .view-all-wrapper {
margin-top: 40px;
text-align: center;
}

.services-section .view-all-wrapper .btn-modern {
display: inline-block;
padding: 15px 35px;
background: linear-gradient(45deg, #000, #000000);
border-radius: 30px;
color: white;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.services-section .view-all-wrapper .btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
background: linear-gradient(45deg, rgb(255 255 255), rgb(255 255 255));
}

.services-section .view-all-wrapper .btn-modern:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

/* Animation delays for cards */
.services-section .service-card:nth-child(1) {
animation-delay: 0.4s;
}
.services-section .service-card:nth-child(2) {
animation-delay: 0.6s;
}
.services-section .service-card:nth-child(3) {
animation-delay: 0.8s;
}
.services-section .service-card:nth-child(4) {
animation-delay: 1s;
}
.services-section .service-card:nth-child(5) {
animation-delay: 1.2s;
}
.services-section .service-card:nth-child(6) {
animation-delay: 1.4s;
}

/* Responsive Design */
@media (max-width: 768px) {
.services-section .services-section {
  padding: 60px 15px;
}

.services-section .title-main {
  font-size: 2rem;
}

.services-section .title-sub {
  font-size: 1rem;
  padding: 0 20px;
}

.services-section .services-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

.services-section .service-card {
  padding: 30px 20px;
}

.services-section .icon-wrapper {
  width: 70px;
  height: 70px;
}

.services-section .icon-wrapper i {
  font-size: 30px;
}
}
.home-stats-section {
padding: 100px 0;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}

.home-stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background: radial-gradient(
  circle at 50% 50%,
  rgba(36, 36, 225, 0.03) 0%,
  transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}

.home-stats-section .container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 80px;

position: relative;
z-index: 1;
}

.home-stats-section .text-content {
flex: 1;
position: relative;
}

.home-stats-section .glowing-line {
width: 3px;
height: 100px;
background: #000;
position: absolute;
left: -20px;

top: 0;
animation: glow 2s ease-in-out infinite;
}

.home-stats-section .headline {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
opacity: 0;

transform: translateY(30px);
animation: slideUpFade 1s forwards;
}

.home-stats-section .headline span {
display: block;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.home-stats-section .description {
font-size: 1.2rem;
color: #555;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0;

animation: slideUpFade 1s 0.3s forwards;
}

.home-stats-section .stats-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
perspective: 1000px;
}

.home-stats-section .stat-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;

transform: translateZ(0);
transition: transform 0.5s;
position: relative;
overflow: hidden;
opacity: 0;
animation: cardAppear 0.5s forwards;
}

.home-stats-section .stat-card:nth-child(1) {
animation-delay: 0.4s;
}
.home-stats-section .stat-card:nth-child(2) {
animation-delay: 0.6s;
}
.home-stats-section .stat-card:nth-child(3) {
animation-delay: 0.8s;
}

.home-stats-section .stat-card:nth-child(4) {
animation-delay: 1s;
}

.home-stats-section .stat-card:hover {
transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
}

.home-stats-section .stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;

height: 100%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(36, 36, 225, 0.1),
  transparent
);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}

.home-stats-section .stat-number {
font-size: 3.5rem;
font-weight: 800;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;

-webkit-text-fill-color: transparent;
margin-bottom: 10px;
position: relative;
display: inline-block;
}

.home-stats-section .stat-number::after {
content: "+";
font-size: 2rem;
position: absolute;
top: 0;
right: -20px;

background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.home-stats-section .stat-label {
font-size: 1.2rem;
color: #555;
font-weight: 600;
position: relative;
}

.home-stats-section .floating-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

overflow: hidden;
pointer-events: none;
}

.home-stats-section .particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;

animation: float 20s linear infinite;
}

.home-stats-section .particle:nth-child(1) {
left: 10%;
top: 20%;
animation-delay: 0s;
}
.home-stats-section .particle:nth-child(2) {
left: 30%;
top: 50%;
animation-delay: 2s;
}
.home-stats-section .particle:nth-child(3) {
left: 50%;
top: 30%;
animation-delay: 4s;
}

.home-stats-section .particle:nth-child(4) {
left: 70%;
top: 60%;
animation-delay: 6s;
}
.home-stats-section .particle:nth-child(5) {
left: 90%;
top: 40%;
animation-delay: 8s;
}

@keyframes pulse {
0%,
100% {
  transform: scale(1);
  opacity: 0.5;
}
50% {
  transform: scale(1.05);
  opacity: 0.8;
}
}

@keyframes glow {
0%,
100% {
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(36, 36, 225, 0.5);
}
50% {
  opacity: 1;
  box-shadow: 0 0 20px rgba(36, 36, 225, 0.8);
}
}

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

@keyframes cardAppear {
from {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}
to {
  opacity: 1;
  transform: translateY(0) scale(1);
}
}

@keyframes shimmer {
0% {
  transform: translateX(-100%);
}
100% {
  transform: translateX(100%);
}
}

@keyframes float {
0% {
  transform: translateY(0) rotate(0deg);
  opacity: 0;
}
50% {
  opacity: 0.5;
}
100% {
  transform: translateY(-100vh) rotate(360deg);
  opacity: 0;
}
}

.home-stats-section .typing-effect {
overflow: hidden;
border-right: 3px solid rgba(36, 36, 225, 1);
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
from {
  width: 0;
}
to {
  width: 100%;
}
}

@keyframes blink-caret {
from,
to {
  border-color: transparent;
}
50% {
  border-color: rgba(36, 36, 225, 1);
}
}

@media (max-width: 1024px) {
.home-stats-section .container {
  flex-direction: column;
  text-align: center;
}

.home-stats-section.glowing-line {
  display: none;
}

.home-stats-section .headline {
  font-size: 3rem;
}

.home-stats-section .stats-grid {
  grid-template-columns: 1fr;
  width: 100%;
}
}

.home-why-choose-section {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
padding: 100px 20px;
min-height: 100vh;
display: flex;
align-items: center;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}

.home-why-choose-section .glass-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);
}

.home-why-choose-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.home-why-choose-section .section-header {
text-align: center;
margin-bottom: 80px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards;
}

.home-why-choose-section .title {
font-size: 3.5rem;
color: white;
font-weight: 800;
margin-bottom: 20px;
position: relative;

display: inline-block;
}

.home-why-choose-section .title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;

background: white;
border-radius: 2px;
}

.home-why-choose-section .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}

.home-why-choose-section .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.home-why-choose-section .feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
text-align: center;
backdrop-filter: blur(5px);

border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}

.home-why-choose-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.home-why-choose-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;

height: 300%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}

.home-why-choose-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}

.home-why-choose-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}

.home-why-choose-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;

display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.home-why-choose-section .feature-icon i {
color: white;
font-size: 2rem;
}

.home-why-choose-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);

animation: pulse 2s infinite;
}

.home-why-choose-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}

.home-why-choose-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}

.home-why-choose-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}

.home-why-choose-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

pointer-events: none;
}

.home-why-choose-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}

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

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

@keyframes pulse {
0% {
  transform: scale(1);
  opacity: 0.8;
}
100% {
  transform: scale(1.5);
  opacity: 0;
}
}

@keyframes shine {
0% {
  transform: translate(-100%, -100%) rotate(45deg);
}
100% {
  transform: translate(100%, 100%) rotate(45deg);
}
}

@media (max-width: 992px) {
.home-why-choose-section .features-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.home-why-choose-section .features-grid {
  grid-template-columns: 1fr;
}

.home-why-choose-section .title {
  font-size: 2.5rem;
}
}

.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}

.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
animation: rotateBackground 15s infinite linear;
pointer-events: none;
}

@keyframes rotateBackground {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .left-section {
position: relative;
}

.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}

.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}

.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
border-radius: 2px;
}

.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}

.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
transition: height 0.3s ease;
}

.contact-wrapper .info-card:hover::before {
height: 100%;
}

.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}

.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}

.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}

.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.3);
}

.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}

.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}

.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}

.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}

.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}

.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}

.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}

.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}

.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}

.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.contact-wrapper .submit-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
}

.contact-wrapper .submit-button:hover::before {
left: 100%;
}

.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}

.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}

@keyframes floatAnimation {
0% {
  transform: translate(0, 0) rotate(0deg);
}
100% {
  transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}

.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}

.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}

.contact-wrapper .social-links a {
text-decoration: none;
color: white;
}
.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

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

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

.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}

.contact-wrapper .status-message.show {
transform: translateX(0);
}

@media (max-width: 1200px) {
.contact-wrapper .contact-container {
  grid-template-columns: 1fr;
  max-width: 800px;
}
}

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

.contact-wrapper .contact-header h2 {
  font-size: 2.5em;
}

.contact-wrapper .right-section {
  padding: 30px;
}
}

@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
  font-size: 2em;
}

.contact-wrapper .info-content {
  flex-direction: column;
  text-align: center;
}

.contact-wrapper .icon-box {
  margin: 0 auto;
}
}

.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}

.faq-section .faq-header {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}

.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}

.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}

.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}

.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}

.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}

.faq-section .faq-item.active .faq-question {
border-left-color: rgba(36, 36, 225, 1);
}

.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}

.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
font-size: 1.2em;
transition: all 0.3s ease;
}

.faq-section .faq-item.active .question-icon {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
transform: rotateY(360deg);
}

.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}

.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}

.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}

.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.03) 35%,
  rgba(11, 205, 240, 0.03) 100%
);
}

.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}

.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}

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

.faq-section .search-box {
position: relative;
max-width: 500px;
margin: 30px auto 0;
z-index: 2;
}

.faq-section .search-box input {
width: 100%;
padding: 15px 25px;
border-radius: 30px;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 1em;
outline: none;
transition: all 0.3s ease;
}

.faq-section .search-box input:focus {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
.faq-section .faq-container {
  grid-template-columns: 1fr !important;
  padding: 40px 20px;
}

.faq-section .faq-header {
  padding: 40px 20px;
}

.faq-section .faq-header h1 {
  font-size: 2em;
}
}

.faq-section .highlight {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.2) 35%,
  rgba(11, 205, 240, 0.2) 100%
);
padding: 2px 5px;
border-radius: 4px;
}

.footer-wrapper {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}

.footer-wrapper .footer-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px
  ),
  linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: moveGrid 15s linear infinite;
}

@keyframes moveGrid {
0% {
  transform: translate(0, 0);
}
100% {
  transform: translate(-40px, -40px);
}
}

.footer-wrapper .footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px 30px;
position: relative;
z-index: 1;
color: white;
}

.footer-wrapper .footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}

.footer-wrapper .footer-section h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
display: inline-block;
}

.footer-wrapper .footer-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: white;
transition: width 0.3s ease;
}

.footer-wrapper .footer-section:hover h3::after {
width: 100%;
}

.footer-wrapper .footer-about p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
opacity: 0.9;
}

.footer-wrapper .social-links {
display: flex;
gap: 15px;
}

.footer-wrapper .social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.footer-wrapper .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}

.footer-wrapper .social-links a:hover::before {
transform: translateY(0);
}

.footer-wrapper .social-links a i {
color: white;
font-size: 18px;
transition: all 0.3s ease;
z-index: 1;
}

.footer-wrapper .social-links a:hover i {
color: rgba(36, 36, 225, 1);
transform: scale(1.2);
}

.footer-wrapper .footer-links ul {
list-style: none;
padding: 0;
}

.footer-wrapper .footer-links li {
margin-bottom: 15px;
}

.footer-wrapper .footer-links a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
opacity: 0.9;
}

.footer-wrapper .footer-links a i {
font-size: 14px;
transition: transform 0.3s ease;
}

.footer-wrapper .footer-links a:hover {
opacity: 1;
transform: translateX(8px);
}

.footer-wrapper .footer-links a:hover i {
transform: scale(1.2);
}

.footer-wrapper .contact-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.footer-wrapper .contact-item {
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
}

.footer-wrapper .contact-item:hover {
transform: translateX(8px);
}

.footer-wrapper .contact-item i {
width: 35px;
height: 35px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}

.footer-wrapper .contact-item:hover i {
background: white;
color: rgba(16, 16, 16);
transform: rotate(360deg);
}

.footer-wrapper .divider-area {
position: relative;
padding: 20px 0;
margin: 40px 0 20px;
}

.footer-wrapper .divider-line {
width: 100%;
height: 1px;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.3),
  rgba(255, 255, 255, 0.5),
  rgba(255, 255, 255, 0.8),
  rgba(255, 255, 255, 1),
  rgba(255, 255, 255, 0.8),
  rgba(255, 255, 255, 0.5),
  rgba(255, 255, 255, 0.3),
  transparent
);
position: relative;
}

.footer-wrapper .divider-line::before,
.footer-wrapper .divider-line::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-wrapper .divider-line::before {
left: 20%;
}

.footer-wrapper .divider-line::after {
right: 20%;
}

.footer-wrapper .divider-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(36, 36, 225, 1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}

.footer-wrapper .divider-icon i {
color: white;
font-size: 16px;
}

.footer-wrapper .footer-bottom {
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}

.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
display: flex;
align-items: center;
gap: 20px;
}

.footer-wrapper .footer-bottom a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: all 0.3s ease;
}

.footer-wrapper .footer-bottom a:hover {
opacity: 1;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-wrapper .copyright-text {
position: relative;
padding-left: 25px;
}

.footer-wrapper .copyright-text::before {
content: "\f1f9";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
animation: spin 4s linear infinite;
}

@keyframes spin {
100% {
  transform: rotate(360deg);
}
}

@media (max-width: 1024px) {
.footer-wrapper .footer-content {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.footer-wrapper .footer-content {
  grid-template-columns: 1fr;
  gap: 40px;
}

.footer-wrapper .footer-section {
  text-align: center;
}

.footer-wrapper .footer-section h3::after {
  left: 50%;
  transform: translateX(-50%);
}

.footer-wrapper .social-links {
  justify-content: center;
}

.footer-wrapper .footer-links a {
  justify-content: center;
}

.footer-wrapper .contact-item {
  justify-content: center;
}

.footer-wrapper .footer-bottom {
  flex-direction: column;
  text-align: center;
}

.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
  justify-content: center;
  width: 100%;
}
}

/* Services Page Css Start */
.service-page-services-section {
min-height: 100vh;
padding: 80px 20px;
background: white;
position: relative;
overflow: hidden;
}

.service-page-services-section .bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.service-page-services-section .bg-bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
animation: float 8s ease-in-out infinite;
}

.service-page-services-section .bg-bubble:nth-child(1) {
width: 100px;
height: 100px;
left: 10%;
top: 20%;
animation-delay: 0s;
}
.service-page-services-section .bg-bubble:nth-child(2) {
width: 150px;
height: 150px;
left: 35%;
top: 70%;
animation-delay: 1s;
}
.service-page-services-section .bg-bubble:nth-child(3) {
width: 80px;
height: 80px;
left: 50%;
top: 50%;
animation-delay: 2s;
}
.service-page-services-section .bg-bubble:nth-child(4) {
width: 120px;
height: 120px;
left: 70%;
top: 30%;
animation-delay: 3s;
}
.service-page-services-section .bg-bubble:nth-child(5) {
width: 200px;
height: 200px;
left: 85%;
top: 80%;
animation-delay: 4s;
}

@keyframes float {
0% {
  transform: translateY(0) rotate(0deg);
}
50% {
  transform: translateY(-20px) rotate(180deg);
}
100% {
  transform: translateY(0) rotate(360deg);
}
}

.service-page-services-section .services-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #333;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
}

.service-page-services-section .services-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
animation: widthGrow 1s ease forwards;
}

.service-page-services-section .services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 20px;
position: relative;
z-index: 1;
}

.service-page-services-section .service-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-decoration: none;
}

.service-page-services-section .service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-page-services-section .service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 20px;
opacity: 0;
transition: all 0.5s ease;
}

.service-page-services-section .service-card:hover::before {
opacity: 1;
}

.service-page-services-section .service-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.5s ease;
}

.service-page-services-section .service-card:hover .service-icon {
transform: rotateY(360deg);
}

.service-page-services-section .service-icon i {
font-size: 35px;
color: white;
}

.service-page-services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}

.service-page-services-section .service-description {
font-size: 1rem;
line-height: 1.6;
color: #666;
}

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

@keyframes widthGrow {
from {
  width: 0;
}
to {
  width: 100px;
}
}

@media (max-width: 1024px) {
.service-page-services-section .services-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.service-page-services-section .services-grid {
  grid-template-columns: 1fr;
}
}

/* Contact Page Css Start */

.contact-page-main-section {
min-height: 80vh;
padding: 20px;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.contact-page-main-section .contact-page-wrapper {
width: 100%;
max-width: 1000px;
background: white;
border-radius: 30px;
display: flex;

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.contact-page-main-section .contact-page-wrapper::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 50%;

top: -100px;
left: -100px;
z-index: 0;
}

.contact-page-main-section .contact-page-wrapper::after {
content: "";
position: absolute;

width: 150px;
height: 150px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
bottom: -75px;
right: -75px;
z-index: 0;
}

/* फॉर्म सेक्शन अपडेट्स */
.contact-page-main-section .contact-form-section {
flex: 1;
padding: 25px;
background: white;
}

.contact-page-main-section .section-title {
font-size: 2.2em;
margin-bottom: 25px;
color: #333;
position: relative;
animation: slideIn 1s ease-out;
font-weight: 600;

background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-color: transparent;
}

.contact-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;

height: 3px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
}

/* इनपुट स्टाइल्स इम्प्रूवमेंट */
.contact-page-main-section .input-group {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
transition: all 0.3s ease;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
width: 100%;

padding: 10px;
font-size: 16px;
border: 2px solid #eee;
border-radius: 10px;
outline: none;
background: #f8f9fa;
transition: all 0.3s ease;
color: #333;
}

.contact-page-main-section .input-group input:focus,
.contact-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);

background: white;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}

.contact-page-main-section .input-group label {
position: absolute;
left: 15px;
top: 15px;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
padding: 0 5px;
background: transparent;
font-size: 14px;
}

.contact-page-main-section .input-group input:focus ~ label,
.contact-page-main-section .input-group textarea:focus ~ label,
.contact-page-main-section .input-group input:valid ~ label,
.contact-page-main-section .input-group textarea:valid ~ label {
top: -10px;
left: 10px;

font-size: 12px;
color: rgba(36, 36, 225, 1);
background: white;
}

.contact-page-main-section .input-group textarea {
min-height: 80px;
}

/* इन्फो सेक्शन अपडेट्स */
.contact-page-main-section .contact-info-section {
flex: 1;
padding: 25px;

background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
color: white;
position: relative;
overflow: hidden;
z-index: 1;
}

.contact-page-main-section .contact-info-section::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);

border-radius: 50%;
top: -150px;
right: -150px;
z-index: -1;
}

.contact-page-main-section .info-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);

padding: 15px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 15px;
transform: translateX(0);
opacity: 1;
position: relative;
z-index: 2;
}

.contact-page-main-section .info-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.contact-page-main-section .info-card h3 {
color: white;
font-size: 1.1em;
margin-bottom: 5px;
font-weight: 500;
}

.contact-page-main-section .info-card p {
color: rgba(255, 255, 255, 0.9);

font-size: 0.9em;
line-height: 1.4;
}

.contact-page-main-section .info-icon {
width: 45px;
height: 45px;
background: white;
border-radius: 15px;
display: flex;

align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 24px;
color: rgba(36, 36, 225, 1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.contact-page-main-section .info-card:hover .info-icon {
transform: rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
}

/* रेस्पोंसिव डिज़ाइन अपडेट्स */
@media (max-width: 1200px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 900px;
}
}

@media (max-width: 1024px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 800px;
}

.contact-page-main-section .section-title {
  font-size: 2em;
}
}

@media (max-width: 768px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 600px;
  flex-direction: column;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 25px;
  width: 100%;
}

.contact-page-main-section .section-title {
  font-size: 1.8em;
  margin-bottom: 20px;
}

.contact-page-main-section .input-group {
  margin-bottom: 15px;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  font-size: 14px;
}

.contact-page-main-section .info-card {
  padding: 15px;
  margin-bottom: 15px;
  flex-direction: row;
  align-items: center;
}

.contact-page-main-section .info-icon {
  width: 40px;
  height: 40px;
  font-size: 18px;
  margin-bottom: 0;

  margin-right: 15px;
}

.contact-page-main-section .social-links {
  justify-content: center;
  margin-top: 20px;
}
}

@media (max-width: 576px) {
.contact-page-main-section .contact-container {
  padding: 15px;
  min-height: auto;
}

.contact-page-main-section .contact-page-wrapper {
  border-radius: 20px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 20px;
}

.contact-page-main-section .section-title {
  font-size: 1.6em;
}

.contact-page-main-section .input-group label {
  font-size: 13px;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  padding: 8px;
  font-size: 14px;
}

.contact-page-main-section .submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

.contact-page-main-section .info-card {
  padding: 12px;
  margin-bottom: 12px;
}

.contact-page-main-section .info-card h3 {
  font-size: 1em;
}

.contact-page-main-section .info-card p {
  font-size: 0.85em;
}

.contact-page-main-section .social-icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
}
}

@media (max-width: 380px) {
.contact-page-main-section .contact-container {
  padding: 10px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 15px;
}

.contact-page-main-section .section-title {
  font-size: 1.4em;
}

.contact-page-main-section .info-icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
  margin-right: 10px;
}

.contact-page-main-section .social-links {
  gap: 10px;
}

.contact-page-main-section .social-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
}

/* टैबलेट लैंडस्केप मोड के लिए */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 900px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 30px;
}
}

/* मोबाइल लैंडस्केप मोड के लिए */
@media (max-width: 767px) and (orientation: landscape) {
.contact-page-main-section .contact-container {
  padding: 15px;
}

.contact-page-main-section .contact-page-wrapper {
  flex-direction: row;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.contact-page-main-section .info-card {
  margin-bottom: 10px;
}
}

/* हाई-डेंसिटी (रेटिना) स्क्रीन्स के लिए */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.contact-page-main-section .contact-page-wrapper {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  border-width: 1px;
}
}

/* एनिमेशन इम्प्रूवमेंट्स */
.contact-page-main-section .submit-btn {
padding: 15px 40px;

background: linear-gradient(
  45deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.contact-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(36, 36, 225, 0.3);
}

.contact-page-main-section .submit-btn:active {
transform: translateY(-1px);
}

.contact-page-main-section .btn-animation {
display: flex;
align-items: center;
justify-content: center;
}

/* सोशल आइकन्स इम्प्रूवमेंट */
.contact-page-main-section .social-links {
display: flex;
gap: 15px;

margin-top: 25px;
position: relative;
z-index: 2;
}

.contact-page-main-section .social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
display: flex;
align-items: center;

justify-content: center;
color: rgba(36, 36, 225, 1);
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-page-main-section .social-icon:hover {
transform: translateY(-5px) rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* एनिमेशन्स */
@keyframes slideIn {
from {
  transform: translateY(50px);
  opacity: 0;
}
to {
  transform: translateY(0);
  opacity: 1;
}
}

@keyframes slideInFromRight {
from {
  transform: translateX(50px);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

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

.contact-page-main-section .info-card {
animation: slideInFromRight 0.5s forwards ease-out;
animation-delay: calc(var(--card-index) * 0.1s);
}

/* Single Service Page Css Start */
.single-service-page-main-section .single-service-page-wrapper {
}

.single-service-page-main-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Hero Section */
.single-service-page-main-section .hero-section {
min-height: 100vh;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
padding: 80px 0;
position: relative;
overflow: hidden;
}

.single-service-page-main-section .hero-section::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);

border-radius: 50%;
top: -100px;
left: -100px;
}

.single-service-page-main-section .hero-section .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}

.single-service-page-main-section .hero-content {
flex: 1;
color: white;
}

.single-service-page-main-section .hero-content h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
opacity: 0;

transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}

.single-service-page-main-section .hero-content p {
font-size: 1.1em;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}

/* Stats Styles */
.single-service-page-main-section .stats-container {
display: flex;
gap: 30px;
margin-top: 40px;
}

.single-service-page-main-section .stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);

transition: transform 0.3s ease;
}

.single-service-page-main-section .stat-item:hover {
transform: translateY(-5px);
}

.single-service-page-main-section .stat-number {
font-size: 2.5em;
font-weight: 700;
color: white;
display: block;
}

.single-service-page-main-section .stat-label {
font-size: 0.9em;
color: white;
}

/* Form Styles */
.single-service-page-main-section .hero-form {
flex: 1;
max-width: 500px;

opacity: 0;
transform: translateX(50px);
animation: slideIn 0.8s 0.4s forwards;
}

.single-service-page-main-section .form-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .form-container h3 {
font-size: 1.8em;
margin-bottom: 30px;
color: #333;
}

.single-service-page-main-section .input-group {
margin-bottom: 20px;
position: relative;
}

.single-service-page-main-section .input-group input,
.single-service-page-main-section .input-group textarea {
width: 100%;

padding: 12px;
border: 2px solid #eee;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}

.single-service-page-main-section .input-group label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.3s ease;

pointer-events: none;
}

.single-service-page-main-section .input-group input:focus,
.single-service-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .input-group input:focus ~ label,
.single-service-page-main-section .input-group textarea:focus ~ label,
.single-service-page-main-section .input-group input:valid ~ label,
.single-service-page-main-section .input-group textarea:valid ~ label {
transform: translateY(-25px);
font-size: 12px;
color: rgba(36, 36, 225, 1);
}

.single-service-page-main-section .submit-btn {
width: 100%;
padding: 15px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;

cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.single-service-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

/* Service Details Section */
.single-service-page-main-section .service-details {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
perspective: 1000px;
}

.single-service-page-main-section .services-wrapper {
position: relative;
padding: 40px 0;
}

.single-service-page-main-section .service-category {
margin-bottom: 60px;
}

.single-service-page-main-section .category-title {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
position: relative;
padding-left: 20px;
}

.single-service-page-main-section .category-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);

width: 4px;
height: 25px;
background: linear-gradient(
  to bottom,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 2px;
}

.single-service-page-main-section .service-items {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0;
scroll-snap-type: x mandatory;

scrollbar-width: none; /* Firefox */
}

.single-service-page-main-section .service-items::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

.single-service-page-main-section .service-item {
min-width: 380px;
background: white;
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;

scroll-snap-align: start;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .service-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;

height: 100%;
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
transform: translateY(100%);
transition: transform 0.3s ease;
}

.single-service-page-main-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .service-item:hover::before {
transform: translateY(0);
}

.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;

background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: rgba(36, 36, 225, 1);
margin-bottom: 20px;
transition: all 0.3s ease;
}

.single-service-page-main-section .service-item:hover .service-icon {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
color: white;
transform: rotateY(360deg);
}

.single-service-page-main-section .service-content h4 {
font-size: 1.3em;
color: #333;
margin-bottom: 10px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-content p {
color: #666;
margin-bottom: 20px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-features {
list-style: none;
margin-bottom: 20px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-features li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: #666;

font-size: 0.95em;
}

.single-service-page-main-section .service-features i {
color: rgba(36, 36, 225, 1);
font-size: 14px;
}

.single-service-page-main-section .service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(36, 36, 225, 1);
text-decoration: none;

font-weight: 500;
position: relative;
z-index: 1;
transition: gap 0.3s ease;
}

.single-service-page-main-section .service-link:hover {
gap: 12px;
}

/* Navigation Arrows */
.single-service-page-main-section .service-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;

justify-content: space-between;
pointer-events: none;
}

.single-service-page-main-section .nav-button {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
display: flex;

align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.single-service-page-main-section .nav-button:hover {
background: rgba(36, 36, 225, 1);
color: white;
}

/* Process Section */
.single-service-page-main-section .process-section {
padding: 100px 0;
background: white;
}

.single-service-page-main-section .process-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
}

.single-service-page-main-section .process-timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);

width: 2px;
height: 100%;
background: linear-gradient(
  to bottom,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
}

.single-service-page-main-section .timeline-item {
position: relative;
margin-bottom: 50px;
width: 50%;
padding-right: 40px;
}

.single-service-page-main-section .timeline-item:nth-child(even) {
margin-left: auto;
padding-right: 0;
padding-left: 40px;
left: 0;
}

.single-service-page-main-section .timeline-number {
width: 50px;
height: 50px;

background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
position: absolute;
left: 100%;
transform: translateX(-50%);
}

.single-service-page-main-section
.timeline-item:nth-child(even)
.timeline-number {
left: 0;
transform: translateX(-50%);
}

/* Why Choose Us Section */
.single-service-page-main-section .why-choose-us {
padding: 100px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}

.single-service-page-main-section .why-choose-us::before {
content: "";
position: absolute;

width: 300px;
height: 300px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
border-radius: 50%;
top: -150px;
right: -150px;
}

.single-service-page-main-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}

.single-service-page-main-section .feature-card {
background: white;
padding: 35px;
border-radius: 20px;
text-align: center;
backdrop-filter: blur(5px);

border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}

.single-service-page-main-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.single-service-page-main-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;

height: 300%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}

.single-service-page-main-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}

.single-service-page-main-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}

.single-service-page-main-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;

display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.single-service-page-main-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);

animation: pulse 2s infinite;
}

.single-service-page-main-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}

.single-service-page-main-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}

.single-service-page-main-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}

.single-service-page-main-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

pointer-events: none;
}

.single-service-page-main-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}

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

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

@keyframes pulse {
0% {
  transform: scale(1);
  opacity: 0.8;
}
100% {
  transform: scale(1.5);
  opacity: 0;
}
}

@keyframes shine {
0% {
  transform: translate(-100%, -100%) rotate(45deg);
}
100% {
  transform: translate(100%, 100%) rotate(45deg);
}
}

@media (max-width: 992px) {
.single-service-page-main-section .features-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.single-service-page-main-section .features-grid {
  grid-template-columns: 1fr;
}

.single-service-page-main-section .title {
  font-size: 2.5rem;
}
}

.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}

.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: #000;
animation: rotateBackground 15s infinite linear;
pointer-events: none;
}

@keyframes rotateBackground {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .left-section {
position: relative;
}

.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}

.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}

.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
border-radius: 2px;
}

.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}

.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
transition: height 0.3s ease;
}

.contact-wrapper .info-card:hover::before {
height: 100%;
}

.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}

.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}

.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}

.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.3);
}

.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}

.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}

.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}

.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}

.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}

.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}

.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}

.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}

.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}

.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background: var(--gradient);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.contact-wrapper .submit-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
}

.contact-wrapper .submit-button:hover::before {
left: 100%;
}

.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}

.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}

@keyframes floatAnimation {
0% {
  transform: translate(0, 0) rotate(0deg);
}
100% {
  transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}

.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}

.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background:  var(--gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}

.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

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

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

.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}

.contact-wrapper .status-message.show {
transform: translateX(0);
}

@media (max-width: 1200px) {
.contact-wrapper .contact-container {
  grid-template-columns: 1fr;
  max-width: 800px;
}
}

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

.contact-wrapper .contact-header h2 {
  font-size: 2.5em;
}

.contact-wrapper .right-section {
  padding: 30px;
}
}

@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
  font-size: 2em;
}

.contact-wrapper .info-content {
  flex-direction: column;
  text-align: center;
}

.contact-wrapper .icon-box {
  margin: 0 auto;
}
}

.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}

.faq-section .faq-header {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}

.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}

.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}

.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}

.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}

.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}

.faq-section .faq-item.active .faq-question {
border-left-color: rgba(36, 36, 225, 1);
}

.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}

.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
font-size: 1.2em;
transition: all 0.3s ease;
}

.faq-section .faq-item.active .question-icon {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
transform: rotateY(360deg);
}

.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}

.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}

.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}

.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.03) 35%,
  rgba(11, 205, 240, 0.03) 100%
);
}

.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}

.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}

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

.faq-section .search-box {
position: relative;
max-width: 500px;
margin: 30px auto 0;
z-index: 2;
}

.faq-section .search-box input {
width: 100%;
padding: 15px 25px;
border-radius: 30px;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 1em;
outline: none;
transition: all 0.3s ease;
}

.faq-section .search-box input:focus {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
.faq-section .faq-container {
  grid-template-columns: 1fr;
  padding: 40px 20px;
}

.faq-section .faq-header {
  padding: 40px 20px;
}

.faq-section .faq-header h1 {
  font-size: 2em;
}
}

.faq-section .highlight {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.2) 35%,
  rgba(11, 205, 240, 0.2) 100%
);
padding: 2px 5px;
border-radius: 4px;
}

.footer-wrapper {
background:  var(--gradient);
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}

.footer-wrapper .footer-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px
  ),
  linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: moveGrid 15s linear infinite;
}

@keyframes moveGrid {
0% {
  transform: translate(0, 0);
}
100% {
  transform: translate(-40px, -40px);
}
}

.footer-wrapper .footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px 30px;
position: relative;
z-index: 1;
color: white;
}

.footer-wrapper .footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}

.footer-wrapper .footer-section h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
display: inline-block;
}

.footer-wrapper .footer-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: white;
transition: width 0.3s ease;
}

.footer-wrapper .footer-section:hover h3::after {
width: 100%;
}

.footer-wrapper .footer-about p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
opacity: 0.9;
}

.footer-wrapper .social-links {
display: flex;
gap: 15px;
}

.footer-wrapper .social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.footer-wrapper .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}

.footer-wrapper .social-links a:hover::before {
transform: translateY(0);
}

.footer-wrapper .social-links a i {
color: white;
font-size: 18px;
transition: all 0.3s ease;
z-index: 1;
}

.footer-wrapper .social-links a:hover i {
color:#00664f;
transform: scale(1.2);
}

.footer-wrapper .footer-links ul {
list-style: none;
padding: 0;
}

.footer-wrapper .footer-links li {
margin-bottom: 15px;
}

.footer-wrapper .footer-links a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
opacity: 0.9;
}

.footer-wrapper .footer-links a i {
font-size: 14px;
transition: transform 0.3s ease;
}

.footer-wrapper .footer-links a:hover {
opacity: 1;
transform: translateX(8px);
}

.footer-wrapper .footer-links a:hover i {
transform: scale(1.2);
}

.footer-wrapper .contact-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.footer-wrapper .contact-item {
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
}

.footer-wrapper .contact-item:hover {
transform: translateX(8px);
}

.footer-wrapper .contact-item i {
width: 35px;
height: 35px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
}

.footer-wrapper .contact-item:hover i {
background: white;
color: rgba(16, 16, 16);
transform: rotate(360deg);
}

.footer-wrapper .divider-area {
position: relative;
padding: 20px 0;
margin: 40px 0 20px;
}

.footer-wrapper .divider-line {
width: 100%;
height: 1px;
background: #000;
position: relative;
}

.footer-wrapper .divider-line::before,
.footer-wrapper .divider-line::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-wrapper .divider-line::before {
left: 20%;
}

.footer-wrapper .divider-line::after {
right: 20%;
}

.footer-wrapper .divider-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(36, 36, 225, 1);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}

.footer-wrapper .divider-icon i {
color: white;
font-size: 16px;
}

.footer-wrapper .footer-bottom {
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}

.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
display: flex;
align-items: center;
gap: 20px;
}

.footer-wrapper .footer-bottom a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: all 0.3s ease;
}

.footer-wrapper .footer-bottom a:hover {
opacity: 1;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-wrapper .copyright-text {
position: relative;
padding-left: 25px;
}

.footer-wrapper .copyright-text::before {
content: "\f1f9";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
animation: spin 4s linear infinite;
}

@keyframes spin {
100% {
  transform: rotate(360deg);
}
}

@media (max-width: 1024px) {
.footer-wrapper .footer-content {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.footer-wrapper .footer-content {
  grid-template-columns: 1fr;
  gap: 40px;
}

.footer-wrapper .footer-section {
  text-align: center;
}

.footer-wrapper .footer-section h3::after {
  left: 50%;
  transform: translateX(-50%);
}

.footer-wrapper .social-links {
  justify-content: center;
}

.footer-wrapper .footer-links a {
  justify-content: center;
}

.footer-wrapper .contact-item {
  justify-content: center;
}

.footer-wrapper .footer-bottom {
  flex-direction: column;
  text-align: center;
}

.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
  justify-content: center;
  width: 100%;
}
}

/* Services Page Css Start */
.service-page-services-section {
min-height: 100vh;
padding: 80px 20px;
background: white;
position: relative;
overflow: hidden;
}

.service-page-services-section .bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.service-page-services-section .bg-bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
animation: float 8s ease-in-out infinite;
}

.service-page-services-section .bg-bubble:nth-child(1) {
width: 100px;
height: 100px;
left: 10%;
top: 20%;
animation-delay: 0s;
}
.service-page-services-section .bg-bubble:nth-child(2) {
width: 150px;
height: 150px;
left: 35%;
top: 70%;
animation-delay: 1s;
}
.service-page-services-section .bg-bubble:nth-child(3) {
width: 80px;
height: 80px;
left: 50%;
top: 50%;
animation-delay: 2s;
}
.service-page-services-section .bg-bubble:nth-child(4) {
width: 120px;
height: 120px;
left: 70%;
top: 30%;
animation-delay: 3s;
}
.service-page-services-section .bg-bubble:nth-child(5) {
width: 200px;
height: 200px;
left: 85%;
top: 80%;
animation-delay: 4s;
}

@keyframes float {
0% {
  transform: translateY(0) rotate(0deg);
}
50% {
  transform: translateY(-20px) rotate(180deg);
}
100% {
  transform: translateY(0) rotate(360deg);
}
}

.service-page-services-section .services-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #333;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
}

.service-page-services-section .services-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(201 201 201));
animation: widthGrow 1s ease forwards;
}

.service-page-services-section .services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 20px;
position: relative;
z-index: 1;
}

.service-page-services-section .service-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-decoration: none;
}

.service-page-services-section .service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-page-services-section .service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgb(0 0 0 / 10%), rgb(187 192 193 / 10%));
border-radius: 20px;
opacity: 0;
transition: all 0.5s ease;
}

.service-page-services-section .service-card:hover::before {
opacity: 1;
}

.service-page-services-section .service-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.5s ease;
}

.service-page-services-section .service-card:hover .service-icon {
transform: rotateY(360deg);
}

.service-page-services-section .service-icon i {
font-size: 35px;
color: white;
}

.service-page-services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}

.service-page-services-section .service-description {
font-size: 1rem;
line-height: 1.6;
color: #666;
}

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

@keyframes widthGrow {
from {
  width: 0;
}
to {
  width: 100px;
}
}

@media (max-width: 1024px) {
.service-page-services-section .services-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.service-page-services-section .services-grid {
  grid-template-columns: 1fr;
}
}

/* Contact Page Css Start */

.contact-page-main-section {
min-height: 80vh;
padding: 20px;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.contact-page-main-section .contact-page-wrapper {
width: 100%;
max-width: 1000px;
background: white;
border-radius: 30px;
display: flex;

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.contact-page-main-section .contact-page-wrapper::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 50%;

top: -100px;
left: -100px;
z-index: 0;
}

.contact-page-main-section .contact-page-wrapper::after {
content: "";
position: absolute;

width: 150px;
height: 150px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
bottom: -75px;
right: -75px;
z-index: 0;
}

/* फॉर्म सेक्शन अपडेट्स */
.contact-page-main-section .contact-form-section {
flex: 1;
padding: 25px;
background: white;
}

.contact-page-main-section .section-title {
font-size: 2.2em;
margin-bottom: 25px;
color: #333;
position: relative;
animation: slideIn 1s ease-out;
font-weight: 600;

background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-color: transparent;
}

.contact-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;

height: 3px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
}

/* इनपुट स्टाइल्स इम्प्रूवमेंट */
.contact-page-main-section .input-group {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
transition: all 0.3s ease;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
width: 100%;

padding: 10px;
font-size: 16px;
border: 2px solid #eee;
border-radius: 10px;
outline: none;
background: #f8f9fa;
transition: all 0.3s ease;
color: #333;
}

.contact-page-main-section .input-group input:focus,
.contact-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);

background: white;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}

.contact-page-main-section .input-group label {
position: absolute;
left: 15px;
top: 15px;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
padding: 0 5px;
background: transparent;
font-size: 14px;
}

.contact-page-main-section .input-group input:focus ~ label,
.contact-page-main-section .input-group textarea:focus ~ label,
.contact-page-main-section .input-group input:valid ~ label,
.contact-page-main-section .input-group textarea:valid ~ label {
top: -10px;
left: 10px;

font-size: 12px;
color: rgba(36, 36, 225, 1);
background: white;
}

.contact-page-main-section .input-group textarea {
min-height: 80px;
}

/* Team Section Styles */
.team-section {
padding: 80px 0;
background: #f8f9fa;
}

.team-section .section-title {
text-align: center;
margin-bottom: 50px;
}

.team-section .section-title h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
color: #2d3436;
}

.team-section .section-title p {
font-size: 18px;
color: #636e72;
}

.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px;
margin: 0 auto;
max-width: 1400px;
}

.team-member {
background: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}




.team-member:hover {
transform: translateY(-10px);
}

.member-image {
position: relative;
overflow: hidden;
}

.member-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}

.member-image .social-links {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
padding: 15px 0;
display: flex;
justify-content: center;
gap: 15px;
transition: bottom 0.3s ease;
}

.team-member:hover .member-image .social-links {
bottom: 0;
}

.social-links a {
color: #ffffff;
font-size: 18px;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: background 0.3s ease;
}

.social-links a:hover {
background: var(--gradient);
}

.member-info {
padding: 25px;
text-align: center;
}

.member-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 5px;
color: #2d3436;
}

.member-info .position {
display: block;
font-size: 16px;
color: #000;
margin-bottom: 15px;
}

.member-description {
font-size: 15px;
color: #636e72;
line-height: 1.6;
}

/* Responsive Styles */
@media (max-width: 768px) {
.team-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.team-section .section-title h2 {
  font-size: 30px;
}

.member-info h3 {
  font-size: 20px;
}
}

/* इन्फो सेक्शन अपडेट्स */
.contact-page-main-section .contact-info-section {
flex: 1;
padding: 25px;

background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
color: white;
position: relative;
overflow: hidden;
z-index: 1;
}

.contact-page-main-section .contact-info-section::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);

border-radius: 50%;
top: -150px;
right: -150px;
z-index: -1;
}

.contact-page-main-section .info-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);

padding: 15px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 15px;
transform: translateX(0);
opacity: 1;
position: relative;
z-index: 2;
}

.contact-page-main-section .info-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.contact-page-main-section .info-card h3 {
color: white;
font-size: 1.1em;
margin-bottom: 5px;
font-weight: 500;
}

.contact-page-main-section .info-card p {
color: rgba(255, 255, 255, 0.9);

font-size: 0.9em;
line-height: 1.4;
}

.contact-page-main-section .info-icon {
width: 45px;
height: 45px;
background: white;
border-radius: 15px;
display: flex;

align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 24px;
color: rgba(36, 36, 225, 1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.contact-page-main-section .info-card:hover .info-icon {
transform: rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
}

/* रेस्पोंसिव डिज़ाइन अपडेट्स */
@media (max-width: 1200px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 900px;
}
}

@media (max-width: 1024px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 800px;
}

.contact-page-main-section .section-title {
  font-size: 2em;
}
}

@media (max-width: 768px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 600px;
  flex-direction: column;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 25px;
  width: 100%;
}

.contact-page-main-section .section-title {
  font-size: 1.8em;
  margin-bottom: 20px;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  font-size: 14px;
}

.contact-page-main-section .info-card {
  padding: 15px;
  margin-bottom: 15px;
  flex-direction: row;
  align-items: center;
}

.contact-page-main-section .info-icon {
  width: 40px;
  height: 40px;
  font-size: 18px;
  margin-bottom: 0;

  margin-right: 15px;
}

.contact-page-main-section .social-links {
  justify-content: center;
  margin-top: 20px;
}
}

@media (max-width: 576px) {
.contact-page-main-section .contact-container {
  padding: 15px;
  min-height: auto;
}

.contact-page-main-section .contact-page-wrapper {
  border-radius: 20px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 20px;
}

.contact-page-main-section .section-title {
  font-size: 1.6em;
}

.contact-page-main-section .input-group label {
  font-size: 13px;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  padding: 8px;
  font-size: 14px;
}

.contact-page-main-section .submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

.contact-page-main-section .info-card {
  padding: 12px;
  margin-bottom: 12px;
}

.contact-page-main-section .info-card h3 {
  font-size: 1em;
}

.contact-page-main-section .info-card p {
  font-size: 0.85em;
}

.contact-page-main-section .social-icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
}
}

@media (max-width: 380px) {
.contact-page-main-section .contact-container {
  padding: 10px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 15px;
}

.contact-page-main-section .section-title {
  font-size: 1.4em;
}

.contact-page-main-section .info-icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
  margin-right: 10px;
}

.contact-page-main-section .social-links {
  gap: 10px;
}

.contact-page-main-section .social-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
}

/* टैबलेट लैंडस्केप मोड के लिए */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 900px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 30px;
}
}

/* मोबाइल लैंडस्केप मोड के लिए */
@media (max-width: 767px) and (orientation: landscape) {
.contact-page-main-section .contact-container {
  padding: 15px;
}

.contact-page-main-section .contact-page-wrapper {
  flex-direction: row;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.contact-page-main-section .info-card {
  margin-bottom: 10px;
}
}

/* हाई-डेंसिटी (रेटिना) स्क्रीन्स के लिए */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.contact-page-main-section .contact-page-wrapper {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  border-width: 1px;
}
}

/* एनिमेशन इम्प्रूवमेंट्स */
.contact-page-main-section .submit-btn {
padding: 15px 40px;

background: linear-gradient(
  45deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.contact-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(36, 36, 225, 0.3);
}

.contact-page-main-section .submit-btn:active {
transform: translateY(-1px);
}

.contact-page-main-section .btn-animation {
display: flex;
align-items: center;
justify-content: center;
}

/* सोशल आइकन्स इम्प्रूवमेंट */
.contact-page-main-section .social-links {
display: flex;
gap: 15px;

margin-top: 25px;
position: relative;
z-index: 2;
}

.contact-page-main-section .social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
display: flex;
align-items: center;

justify-content: center;
color: rgba(36, 36, 225, 1);
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-page-main-section .social-icon:hover {
transform: translateY(-5px) rotate(360deg);
background: rgba(36, 36, 225, 1);
color: white;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* एनिमेशन्स */
@keyframes slideIn {
from {
  transform: translateY(50px);
  opacity: 0;
}
to {
  transform: translateY(0);
  opacity: 1;
}
}

@keyframes slideInFromRight {
from {
  transform: translateX(50px);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

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

.contact-page-main-section .info-card {
animation: slideInFromRight 0.5s forwards ease-out;
animation-delay: calc(var(--card-index) * 0.1s);
}

/* Single Service Page Css Start */
.single-service-page-main-section .single-service-page-wrapper {
}

.single-service-page-main-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Hero Section */
.single-service-page-main-section .hero-section {
min-height: 100vh;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
padding: 80px 0;
position: relative;
overflow: hidden;
}

.single-service-page-main-section .hero-section::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);

border-radius: 50%;
top: -100px;
left: -100px;
}

.single-service-page-main-section .hero-section .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}

.single-service-page-main-section .hero-content {
flex: 1;
color: white;
}

.single-service-page-main-section .hero-content h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
opacity: 0;

transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}

.single-service-page-main-section .hero-content p {
font-size: 1.1em;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}

/* Stats Styles */
.single-service-page-main-section .stats-container {
display: flex;
gap: 30px;
margin-top: 40px;
}

.single-service-page-main-section .stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);

transition: transform 0.3s ease;
}

.single-service-page-main-section .stat-item:hover {
transform: translateY(-5px);
}

.single-service-page-main-section .stat-number {
font-size: 2.5em;
font-weight: 700;
color: white;
display: block;
}

.single-service-page-main-section .stat-label {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.9);
}

/* Form Styles */
.single-service-page-main-section .hero-form {
flex: 1;
max-width: 500px;

opacity: 0;
transform: translateX(50px);
animation: slideIn 0.8s 0.4s forwards;
}

.single-service-page-main-section .form-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .form-container h3 {
font-size: 1.8em;
margin-bottom: 30px;
color: #333;
}

.single-service-page-main-section .input-group {
margin-bottom: 20px;
position: relative;
}

.single-service-page-main-section .input-group input,
.single-service-page-main-section .input-group textarea {
width: 100%;

padding: 12px;
border: 2px solid #eee;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}

.single-service-page-main-section .input-group label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.3s ease;

pointer-events: none;
}

.single-service-page-main-section .input-group input:focus,
.single-service-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .input-group input:focus ~ label,
.single-service-page-main-section .input-group textarea:focus ~ label,
.single-service-page-main-section .input-group input:valid ~ label,
.single-service-page-main-section .input-group textarea:valid ~ label {
transform: translateY(-25px);
font-size: 12px;
color: rgba(36, 36, 225, 1);
}

.single-service-page-main-section .submit-btn {
width: 100%;
padding: 15px;
background: var(--gradient);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;

cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.single-service-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

/* Service Details Section */
.single-service-page-main-section .service-details {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
perspective: 1000px;
}

.single-service-page-main-section .services-wrapper {
position: relative;
padding: 40px 0;
}

.single-service-page-main-section .service-category {
margin-bottom: 60px;
}

.single-service-page-main-section .category-title {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
position: relative;
padding-left: 20px;
}

.single-service-page-main-section .category-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);

width: 4px;
height: 25px;
background: linear-gradient(
  to bottom,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 2px;
}

.single-service-page-main-section .service-items {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0;
scroll-snap-type: x mandatory;

scrollbar-width: none; /* Firefox */
}

.single-service-page-main-section .service-items::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

.single-service-page-main-section .service-item {
min-width: 380px;
background: white;
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;

scroll-snap-align: start;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .service-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;

height: 100%;
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
transform: translateY(100%);
transition: transform 0.3s ease;
}

.single-service-page-main-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .service-item:hover::before {
transform: translateY(0);
}

.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;

background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: rgba(36, 36, 225, 1);
margin-bottom: 20px;
transition: all 0.3s ease;
}

.single-service-page-main-section .service-item:hover .service-icon {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
color: white;
transform: rotateY(360deg);
}

.single-service-page-main-section .service-content h4 {
font-size: 1.3em;
color: #333;
margin-bottom: 10px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-content p {
color: #666;
margin-bottom: 20px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-features {
list-style: none;
margin-bottom: 20px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-features li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: #666;

font-size: 0.95em;
}

.single-service-page-main-section .service-features i {
color: rgba(36, 36, 225, 1);
font-size: 14px;
}

.single-service-page-main-section .service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(36, 36, 225, 1);
text-decoration: none;

font-weight: 500;
position: relative;
z-index: 1;
transition: gap 0.3s ease;
}

.single-service-page-main-section .service-link:hover {
gap: 12px;
}

/* Navigation Arrows */
.single-service-page-main-section .service-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;

justify-content: space-between;
pointer-events: none;
}

.single-service-page-main-section .nav-button {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
display: flex;

align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.single-service-page-main-section .nav-button:hover {
background: rgba(36, 36, 225, 1);
color: white;
}

/* Process Section */
.single-service-page-main-section .process-section {
padding: 100px 0;
background: white;
}

.single-service-page-main-section .process-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
}

.single-service-page-main-section .process-timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);

width: 2px;
height: 100%;
background: linear-gradient(
  to bottom,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
}

.single-service-page-main-section .timeline-item {
position: relative;
margin-bottom: 50px;
width: 50%;
padding-right: 40px;
}

.single-service-page-main-section .timeline-item:nth-child(even) {
margin-left: auto;
padding-right: 0;
padding-left: 40px;
left: 0;
}

.single-service-page-main-section .timeline-number {
width: 50px;
height: 50px;

background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
position: absolute;
left: 100%;
transform: translateX(-50%);
}

.single-service-page-main-section
.timeline-item:nth-child(even)
.timeline-number {
left: 0;
transform: translateX(-50%);
}

/* Why Choose Us Section */
.single-service-page-main-section .why-choose-us {
padding: 100px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}

.single-service-page-main-section .why-choose-us::before {
content: "";
position: absolute;

width: 300px;
height: 300px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
border-radius: 50%;
top: -150px;
right: -150px;
}

.single-service-page-main-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}

.single-service-page-main-section .feature-card {
background: white;
padding: 35px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;

position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .feature-card::before {
content: "";
position: absolute;

width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
top: 0;
left: 0;
transform: translateY(100%);
transition: transform 0.3s ease;
}

.single-service-page-main-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: transparent;
}

.single-service-page-main-section .feature-card:hover::before {
transform: translateY(0);
}

.single-service-page-main-section .feature-icon {
width: 80px;
height: 80px;
background:#000;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
color: #fff;
margin: 0 auto 25px;
transition: all 0.3s ease;
}

.single-service-page-main-section .feature-card:hover .feature-icon {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
color: white;
transform: rotateY(360deg);
}

.single-service-page-main-section .feature-card h3 {
font-size: 1.4em;
margin-bottom: 15px;
color: #333;
position: relative;
z-index: 1;
}

.single-service-page-main-section .feature-card p {
color: #666;
font-size: 0.95em;
line-height: 1.6;
position: relative;
z-index: 1;
}

/* FAQ Section */
.single-service-page-main-section .faq-section {
padding: 100px 0;
background: white;
}

.single-service-page-main-section .faq-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}

.single-service-page-main-section .faq-item {
background: white;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
height: fit-content;
}

.single-service-page-main-section .faq-question {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}

.single-service-page-main-section .faq-question h3 {
font-size: 1.1em;
font-weight: 500;
flex: 1;
padding-right: 15px;
}

.single-service-page-main-section .faq-toggle {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(36, 36, 225, 1);
transition: all 0.3s ease;
flex-shrink: 0;
}

.single-service-page-main-section .faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}

.single-service-page-main-section .faq-item.active .faq-answer {
padding: 20px;
max-height: 500px;
}

.single-service-page-main-section .faq-item.active .faq-toggle {
transform: rotate(45deg);
background: rgba(36, 36, 225, 1);
color: white;
}

@media (max-width: 768px) {
.single-service-page-main-section .faq-container {
  grid-template-columns: 1fr;
}
}

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

@keyframes slideIn {
to {
  opacity: 1;
  transform: translateX(0);
}
}

/* Responsive Design */
@media (max-width: 1024px) {
.single-service-page-main-section .hero-section .container {
  flex-direction: column;
  text-align: center;
}

.single-service-page-main-section .stats-container {
  justify-content: center;
}

.single-service-page-main-section .hero-form {
  max-width: 100%;
}
}

@media (max-width: 768px) {
.single-service-page-main-section .hero-content h1 {
  font-size: 2.5em;
}

.single-service-page-main-section .process-timeline::before {
  left: 0;
}

.single-service-page-main-section .timeline-item {
  width: 100%;
  padding-left: 50px;
  padding-right: 0;
}

.single-service-page-main-section .timeline-item:nth-child(even) {
  padding-left: 50px;
}

.single-service-page-main-section .timeline-number {
  left: 0;
}

.single-service-page-main-section .features-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.single-service-page-main-section .feature-card {
  padding: 25px;
}

.single-service-page-main-section .feature-icon {
  width: 60px;
  height: 60px;
  font-size: 25px;
  margin-bottom: 20px;
}

.single-service-page-main-section .feature-card h3 {
  font-size: 1.2em;
}

.single-service-page-main-section .service-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.single-service-page-main-section .service-card {
  padding: 25px;
}

.single-service-page-main-section .service-icon {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

.single-service-page-main-section .service-card h3 {
  font-size: 1.2em;
}

.single-service-page-main-section .service-item {
  min-width: 300px;
  padding: 25px;
}

.single-service-page-main-section .category-title {
  font-size: 1.5em;
}
}

@media (max-width: 480px) {
.single-service-page-main-section .stats-container {
  flex-direction: column;
}

.single-service-page-main-section .form-container {
  padding: 20px;
}

.single-service-page-main-section .service-item {
  min-width: 260px;
  padding: 20px;
}

.single-service-page-main-section .service-icon {
  width: 50px;
  height: 50px;
  font-size: 20px;
}
}

/* About Service Section */
.single-service-page-main-section .about-service {
padding: 100px 0;
background: white;
overflow: hidden;
}

.single-service-page-main-section .about-service-content {
display: flex;
align-items: center;
gap: 50px;
}

.single-service-page-main-section .about-service-text {
flex: 1;
}

.single-service-page-main-section .service-badge {
display: inline-block;
padding: 8px 20px;

background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
color: rgba(36, 36, 225, 1);
border-radius: 30px;
font-size: 0.9em;
font-weight: 500;
margin-bottom: 20px;
animation: fadeIn 0.5s ease-out;
}

.single-service-page-main-section .about-title {
font-size: 2.8em;
line-height: 1.2;

margin-bottom: 20px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInUp 0.5s ease-out;
}

.single-service-page-main-section .about-description {
font-size: 1.1em;
color: #666;
margin-bottom: 40px;
line-height: 1.8;
}

.single-service-page-main-section .service-highlights {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 40px;
}

.single-service-page-main-section .highlight-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: white;

border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.single-service-page-main-section .highlight-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .highlight-icon {
width: 50px;
height: 50px;

background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}

.single-service-page-main-section .highlight-text h3 {
font-size: 1.2em;
margin-bottom: 5px;
color: #333;
}

.single-service-page-main-section .highlight-text p {
color: #666;
font-size: 0.95em;
}

.single-service-page-main-section .service-cta {
display: flex;
align-items: center;
gap: 40px;
margin-top: 40px;
}

.single-service-page-main-section .primary-btn {
padding: 15px 35px;
background: var(--gradient);

border-radius: 30px;
color: white;
}
/* Topbar Styles */

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}




.services-section {
min-height: 100vh;
background: #000;
padding: 100px 20px;
position: relative;
overflow: hidden;
}

.services-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}

.services-section .container {
max-width: 1200px;
margin: 0 auto;
}

.services-section .section-title {
text-align: center;
color: white;
margin-bottom: 60px;
position: relative;
}

.services-section .title-main {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 15px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}

.services-section .title-sub {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}

.services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 30px;
padding: 20px;
}

.services-section .service-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 0.8s forwards;
}

.services-section .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.15);
}

.services-section .service-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
}

.services-section .service-card:hover::before {
left: 100%;
}

.services-section .icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: transform 0.3s ease;
}

.services-section .service-card:hover .icon-wrapper {
transform: scale(1.1);
}

.services-section .icon-wrapper i {
font-size: 35px;
color: white;
position: relative;
z-index: 1;
}

.services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}

.services-section .service-description {
font-size: 0.85rem;
line-height: 1.6;
opacity: 0.9;
margin-bottom: 25px;
text-align: justify;
}

.services-section .learn-more {
display: inline-block;
padding: 10px 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 25px;
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.services-section .learn-more:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}

.services-section .view-all-wrapper {
margin-top: 40px;
text-align: center;
}

.services-section .view-all-wrapper .btn-modern {
display: inline-block;
padding: 15px 35px;
background:#FFFFFF;
border-radius: 30px;
color: #000000;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.services-section .view-all-wrapper .btn-modern:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
background: linear-gradient(45deg, rgb(255 255 255), rgb(255 255 255));
}

.services-section .view-all-wrapper .btn-modern:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

/* Animation delays for cards */
.services-section .service-card:nth-child(1) {
animation-delay: 0.4s;
}
.services-section .service-card:nth-child(2) {
animation-delay: 0.6s;
}
.services-section .service-card:nth-child(3) {
animation-delay: 0.8s;
}
.services-section .service-card:nth-child(4) {
animation-delay: 1s;
}
.services-section .service-card:nth-child(5) {
animation-delay: 1.2s;
}
.services-section .service-card:nth-child(6) {
animation-delay: 1.4s;
}

/* Responsive Design */
@media (max-width: 768px) {
.services-section .services-section {
  padding: 60px 15px;
}

.services-section .title-main {
  font-size: 2rem;
}

.services-section .title-sub {
  font-size: 1rem;
  padding: 0 20px;
}

.services-section .services-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

.services-section .service-card {
  padding: 30px 20px;
}

.services-section .icon-wrapper {
  width: 70px;
  height: 70px;
}

.services-section .icon-wrapper i {
  font-size: 30px;
}
}
.home-stats-section {
padding: 100px 0;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}

.home-stats-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background: radial-gradient(
  circle at 50% 50%,
  rgba(36, 36, 225, 0.03) 0%,
  transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}

.home-stats-section .container {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 80px;

position: relative;
z-index: 1;
}

.home-stats-section .text-content {
flex: 1;
position: relative;
}

.home-stats-section .glowing-line {
width: 3px;
height: 100px;
background: #000;
position: absolute;
left: -20px;

top: 0;
animation: glow 2s ease-in-out infinite;
}

.home-stats-section .headline {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 30px;
opacity: 0;

transform: translateY(30px);
animation: slideUpFade 1s forwards;
}

.home-stats-section .headline span {
display: inline;
background:var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.home-stats-section .description {
font-size: 1.2rem;
color: #555;
line-height: 1.6;
margin-bottom: 40px;
opacity: 0;

animation: slideUpFade 1s 0.3s forwards;
}

.home-stats-section .stats-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
perspective: 1000px;
}

.home-stats-section .stat-card {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;

transform: translateZ(0);
transition: transform 0.5s;
position: relative;
overflow: hidden;
opacity: 0;
animation: cardAppear 0.5s forwards;
}

.home-stats-section .stat-card:nth-child(1) {
animation-delay: 0.4s;
}
.home-stats-section .stat-card:nth-child(2) {
animation-delay: 0.6s;
}
.home-stats-section .stat-card:nth-child(3) {
animation-delay: 0.8s;
}

.home-stats-section .stat-card:nth-child(4) {
animation-delay: 1s;
}

.home-stats-section .stat-card:hover {
transform: translateZ(20px) rotateX(5deg) rotateY(5deg);
}

.home-stats-section .stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;

height: 100%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(36, 36, 225, 0.1),
  transparent
);
transform: translateX(-100%);
animation: shimmer 3s infinite;
}

.home-stats-section .stat-number {
font-size: 3.5rem;
font-weight: 800;
background:  var(--gradient);
-webkit-background-clip: text;

-webkit-text-fill-color: transparent;
margin-bottom: 10px;
position: relative;
display: inline-block;
}

.home-stats-section .stat-number::after {
content: "+";
font-size: 2rem;
position: absolute;
top: 0;
right: -20px;

background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.home-stats-section .stat-label {
font-size: 1.2rem;
color: #555;
font-weight: 600;
position: relative;
}

.home-stats-section .floating-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

overflow: hidden;
pointer-events: none;
}

.home-stats-section .particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;

animation: float 20s linear infinite;
}

.home-stats-section .particle:nth-child(1) {
left: 10%;
top: 20%;
animation-delay: 0s;
}
.home-stats-section .particle:nth-child(2) {
left: 30%;
top: 50%;
animation-delay: 2s;
}
.home-stats-section .particle:nth-child(3) {
left: 50%;
top: 30%;
animation-delay: 4s;
}

.home-stats-section .particle:nth-child(4) {
left: 70%;
top: 60%;
animation-delay: 6s;
}
.home-stats-section .particle:nth-child(5) {
left: 90%;
top: 40%;
animation-delay: 8s;
}

@keyframes pulse {
0%,
100% {
  transform: scale(1);
  opacity: 0.5;
}
50% {
  transform: scale(1.05);
  opacity: 0.8;
}
}

@keyframes glow {
0%,
100% {
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(36, 36, 225, 0.5);
}
50% {
  opacity: 1;
  box-shadow: 0 0 20px rgba(36, 36, 225, 0.8);
}
}

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

@keyframes cardAppear {
from {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}
to {
  opacity: 1;
  transform: translateY(0) scale(1);
}
}

@keyframes shimmer {
0% {
  transform: translateX(-100%);
}
100% {
  transform: translateX(100%);
}
}

@keyframes float {
0% {
  transform: translateY(0) rotate(0deg);
  opacity: 0;
}
50% {
  opacity: 0.5;
}
100% {
  transform: translateY(-100vh) rotate(360deg);
  opacity: 0;
}
}

.home-stats-section .typing-effect {
overflow: hidden;
border-right: 3px solid rgba(36, 36, 225, 1);
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
from {
  width: 0;
}
to {
  width: 100%;
}
}

@keyframes blink-caret {
from,
to {
  border-color: transparent;
}
50% {
  border-color: rgba(36, 36, 225, 1);
}
}

@media (max-width: 1024px) {
.home-stats-section .container {
  flex-direction: column;
  text-align: center;
}

.home-stats-section.glowing-line {
  display: none;
}

.home-stats-section .headline {
  font-size: 3rem;
}

.home-stats-section .stats-grid {
  grid-template-columns: 1fr;
  width: 100%;
}
}

.home-why-choose-section {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1) 35%,
  rgba(11, 205, 240, 1) 100%
);
padding: 100px 20px;
min-height: 100vh;
display: flex;
align-items: center;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}

.home-why-choose-section .glass-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;

backdrop-filter: blur(10px);
}

.home-why-choose-section .container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.home-why-choose-section .section-header {
text-align: center;
margin-bottom: 80px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s forwards;
}

.home-why-choose-section .title {
font-size: 3.5rem;
color: white;
font-weight: 800;
margin-bottom: 20px;
position: relative;

display: inline-block;
}

.home-why-choose-section .title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;

background: white;
border-radius: 2px;
}

.home-why-choose-section .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
}

.home-why-choose-section .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.home-why-choose-section .feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
text-align: center;
backdrop-filter: blur(5px);

border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(50px);
opacity: 0;
animation: cardSlideUp 0.8s forwards;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}

.home-why-choose-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.home-why-choose-section .feature-card::before {
content: "";
position: absolute;
top: -100%;
left: -100%;
width: 300%;

height: 300%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
animation: shine 3s infinite;
}

.home-why-choose-section .feature-card:nth-child(2) {
animation-delay: 0.2s;
}

.home-why-choose-section .feature-card:nth-child(3) {
animation-delay: 0.4s;
}

.home-why-choose-section .feature-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 20px;

display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.home-why-choose-section .icon-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);

animation: pulse 2s infinite;
}

.home-why-choose-section .feature-icon svg {
width: 40px;
height: 40px;
fill: white;
}

.home-why-choose-section .feature-title {
color: white;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}

.home-why-choose-section .feature-description {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}

.home-why-choose-section .floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;

pointer-events: none;
}

.home-why-choose-section .dot {
position: absolute;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}

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

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

@keyframes pulse {
0% {
  transform: scale(1);
  opacity: 0.8;
}
100% {
  transform: scale(1.5);
  opacity: 0;
}
}

@keyframes shine {
0% {
  transform: translate(-100%, -100%) rotate(45deg);
}
100% {
  transform: translate(100%, 100%) rotate(45deg);
}
}

@media (max-width: 992px) {
.home-why-choose-section .features-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.home-why-choose-section .features-grid {
  grid-template-columns: 1fr;
}

.home-why-choose-section .title {
  font-size: 2.5rem;
}
}

.contact-wrapper {
width: 100%;
min-height: 100vh;
background: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 20px;
}

.contact-wrapper .background-gradient {
position: absolute;
width: 150%;
height: 150%;
background: #36363652;
animation: rotateBackground 20s infinite linear;
pointer-events: none;
}

@keyframes rotateBackground {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

.contact-wrapper .contact-container {
width: 100%;
max-width: 1400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
position: relative;
z-index: 1;
padding: 40px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border-radius: 30px;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .left-section {
position: relative;
}

.contact-wrapper .contact-header {
margin-bottom: 40px;
position: relative;
}

.contact-wrapper .contact-header h2 {
font-size: 3em;
font-weight: 700;
background:linear-gradient(90deg, rgb(0 0 0) 35%, rgb(0 0 0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 15px;
position: relative;
}

.contact-wrapper .contact-header h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 4px;
background: linear-gradient(90deg, rgb(0 0 0) 35%, rgb(172 172 172) 100%);
border-radius: 2px;
}

.contact-wrapper .info-card {
background: white;
padding: 25px;
border-radius: 20px;
margin-bottom: 25px;
transform: translateY(20px);
opacity: 0;
animation: slideInUp 0.5s forwards;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}

.contact-wrapper .info-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(90deg, rgb(0 0 0) 35%, rgb(0 0 0) 100%);
transition: height 0.3s ease;
}

.contact-wrapper .info-card:hover::before {
height: 100%;
}

.contact-wrapper .info-card:hover {
transform: translateX(10px) translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.contact-wrapper .info-card:nth-child(1) {
animation-delay: 0.2s;
}
.contact-wrapper .info-card:nth-child(2) {
animation-delay: 0.4s;
}
.contact-wrapper .info-card:nth-child(3) {
animation-delay: 0.6s;
}

.contact-wrapper .info-content {
display: flex;
align-items: center;
gap: 20px;
}

.contact-wrapper .icon-box {
width: 60px;
height: 60px;
background:var(--gradient);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
color: white;
transition: all 0.3s ease;
}

.contact-wrapper .info-card:hover .icon-box {
transform: rotateY(180deg);
background: white;
color: rgb(0 0 0);
box-shadow: 0 0 20px rgb(35 35 36 / 30%);
}


.contact-wrapper .info-text h3 {
font-size: 1.2em;
color: #333;
margin-bottom: 5px;
}

.contact-wrapper .info-text p {
color: #666;
font-size: 0.95em;
}

.contact-wrapper .map-box {
margin-top: 30px;
border-radius: 20px;
overflow: hidden;
height: 250px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 1s 0.8s forwards;
}

.contact-wrapper .map-box iframe {
width: 100%;
height: 100%;
border: none;
}

.contact-wrapper .right-section {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.contact-wrapper .form-group {
margin-bottom: 25px;
position: relative;
opacity: 0;
transform: translateY(20px);
animation: slideInUp 0.5s forwards;
}

.contact-wrapper .form-group:nth-child(1) {
animation-delay: 0.3s;
}
.contact-wrapper .form-group:nth-child(2) {
animation-delay: 0.5s;
}
.contact-wrapper .form-group:nth-child(3) {
animation-delay: 0.7s;
}
.contact-wrapper .form-group:nth-child(4) {
animation-delay: 0.9s;
}

.contact-wrapper .input-field {
width: 100%;
padding: 15px 25px;
border: 2px solid #eee;
border-radius: 15px;
font-size: 1em;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}

.contact-wrapper .input-field:focus {
border-color: rgba(36, 36, 225, 1);
box-shadow: 0 0 20px rgba(36, 36, 225, 0.1);
transform: translateY(-2px);
}

.contact-wrapper textarea.input-field {
height: 150px;
resize: none;
padding-top: 12px;
}

.contact-wrapper .submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 15px;
background:  var(--gradient);
color: white;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.contact-wrapper .submit-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.contact-wrapper .submit-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.2),
  transparent
);
transition: 0.5s;
}

.contact-wrapper .submit-button:hover::before {
left: 100%;
}

.contact-wrapper .floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 0;
}

.contact-wrapper .shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1) 35%,
  rgba(11, 205, 240, 0.1) 100%
);
animation: floatAnimation 20s infinite linear;
}

@keyframes floatAnimation {
0% {
  transform: translate(0, 0) rotate(0deg);
}
100% {
  transform: translate(var(--translateX), var(--translateY)) rotate(360deg);
}
}

.contact-wrapper .social-links {
display: flex;
gap: 15px;
margin-top: 30px;
opacity: 0;
animation: fadeIn 1s 1.2s forwards;
}

.contact-wrapper .social-link {
width: 45px;
height: 45px;
border-radius: 12px;
background: var(--gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: all 0.3s ease;
}

.contact-wrapper .social-link:hover {
transform: translateY(-5px) rotate(360deg);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

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

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

.contact-wrapper .status-message {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 30px;
border-radius: 10px;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateX(150%);
transition: transform 0.3s ease;
z-index: 1000;
}

.contact-wrapper .status-message.show {
transform: translateX(0);
}

@media (max-width: 1200px) {
.contact-wrapper .contact-container {
  grid-template-columns: 1fr;
  max-width: 800px;
}
}

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

.contact-wrapper .contact-header h2 {
  font-size: 2.5em;
}

.contact-wrapper .right-section {
  padding: 30px;
}
}

@media (max-width: 480px) {
.contact-wrapper .contact-header h2 {
  font-size: 2em;
}

.contact-wrapper .info-content {
  flex-direction: column;
  text-align: center;
}

.contact-wrapper .icon-box {
  margin: 0 auto;
}
}

.faq-section {
width: 100%;
max-width: 1200px;
background: white;
border-radius: 30px;
overflow: hidden;
position: relative;
margin: 20px auto;
}

.faq-section .faq-header {
background:  var(--gradient);
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
}

.faq-section .faq-header h1 {
color: white;
font-size: 2.5em;
position: relative;
z-index: 2;
margin-bottom: 20px;
}

.faq-section .faq-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}

.faq-section .wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
}

.faq-section .faq-container {
padding: 60px 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
}

.faq-section .faq-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translateY(50px);
opacity: 0;
animation: slideIn 0.5s forwards;
}

.faq-section .faq-question {
padding: 25px 30px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
border-left: 4px solid transparent;
}

.faq-section .faq-item.active .faq-question {
border-left-color: rgb(0 0 0);
}

.faq-section .question-content {
display: flex;
align-items: center;
gap: 20px;
}

.faq-section .question-icon {
width: 40px;
height: 40px;
background: linear-gradient(90deg, rgb(0 0 0 / 10%) 35%, rgb(0 0 0 / 10%) 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: rgb(0 0 0);
font-size: 1.2em;
transition: all 0.3s ease;
}

.faq-section .faq-item.active .question-icon {
background:#000;
color: white;
transform: rotateY(360deg);
}

.faq-section .question-text {
font-weight: 600;
color: #333;
font-size: 1.1em;
}

.faq-section .toggle-icon {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}

.faq-section .faq-item.active .toggle-icon {
transform: rotate(45deg);
background: #000;
color: white;
}

.faq-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
background:rgb(0 0 0)absolute;
}

.faq-section .faq-answer-content {
padding: 0 30px 25px 94px;
color: #666;
line-height: 1.6;
}

.faq-section .faq-item.active .faq-answer {
max-height: 500px;
}

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

.faq-section .search-box {
position: relative;
max-width: 500px;
margin: 30px auto 0;
z-index: 2;
}

.faq-section .search-box input {
width: 100%;
padding: 15px 25px;
border-radius: 30px;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 1em;
outline: none;
transition: all 0.3s ease;
}

.faq-section .search-box input:focus {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
.faq-section .faq-container {
  grid-template-columns: 1fr;
  padding: 40px 20px;
}

.faq-section .faq-header {
  padding: 40px 20px;
}

.faq-section .faq-header h1 {
  font-size: 2em;
}
}

.faq-section .highlight {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.2) 35%,
  rgba(11, 205, 240, 0.2) 100%
);
padding: 2px 5px;
border-radius: 4px;
}

.footer-wrapper {
background: #000000;
font-family: "Outfit", sans-serif;
position: relative;
overflow: hidden;
}

.footer-wrapper .footer-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px
  ),
  linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
animation: moveGrid 15s linear infinite;
}

@keyframes moveGrid {
0% {
  transform: translate(0, 0);
}
100% {
  transform: translate(-40px, -40px);
}
}

.footer-wrapper .footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px 30px;
position: relative;
z-index: 1;
color: white;
}

.footer-wrapper .footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}

.footer-wrapper .footer-section h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
display: inline-block;
}

.footer-wrapper .footer-section h3::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 40px;
height: 3px;
background: white;
transition: width 0.3s ease;
}

.footer-wrapper .footer-section:hover h3::after {
width: 100%;
}

.footer-wrapper .footer-about p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
opacity: 0.9;
}

.footer-wrapper .social-links {
display: flex;
gap: 15px;
}

.footer-wrapper .social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.footer-wrapper .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
transition: transform 0.3s ease;
}

.footer-wrapper .social-links a:hover::before {
transform: translateY(0);
}

.footer-wrapper .social-links a i {
color: white;
font-size: 18px;
transition: all 0.3s ease;
z-index: 1;
}

.footer-wrapper .social-links a:hover i {
color: #00664f;
transform: scale(1.2);
}

.footer-wrapper .footer-links ul {
list-style: none;
padding: 0;
}

.footer-wrapper .footer-links li {
margin-bottom: 15px;
}

.footer-wrapper .footer-links a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
opacity: 0.9;
}

.footer-wrapper .footer-links a i {
font-size: 14px;
transition: transform 0.3s ease;
}

.footer-wrapper .footer-links a:hover {
opacity: 1;
transform: translateX(8px);
}

.footer-wrapper .footer-links a:hover i {
transform: scale(1.2);
}

.footer-wrapper .contact-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.footer-wrapper .contact-item {
display: flex;
align-items: center;
gap: 15px;
transition: all 0.3s ease;
}

.footer-wrapper .contact-item:hover {
transform: translateX(8px);
}

.footer-wrapper .contact-item i {
width: 35px;
height: 35px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.3s ease;
flex-shrink: 0;
}

.footer-wrapper .contact-item:hover i {
background: white;
color: rgb(16 16 16);
transform: rotate(360deg);
}

.footer-wrapper .divider-area {
position: relative;
padding: 20px 0;
margin: 40px 0 20px;
}

.footer-wrapper .divider-line {
width: 100%;
height: 1px;
background: linear-gradient(
  90deg,
  transparent,
  rgba(255, 255, 255, 0.3),
  rgba(255, 255, 255, 0.5),
  rgba(255, 255, 255, 0.8),
  rgba(255, 255, 255, 1),
  rgba(255, 255, 255, 0.8),
  rgba(255, 255, 255, 0.5),
  rgba(255, 255, 255, 0.3),
  transparent
);
position: relative;
}

.footer-wrapper .divider-line::before,
.footer-wrapper .divider-line::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-wrapper .divider-line::before {
left: 20%;
}

.footer-wrapper .divider-line::after {
right: 20%;
}

.footer-wrapper .divider-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--gradient);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}

.footer-wrapper .divider-icon i {
color: white;
font-size: 16px;
}

.footer-wrapper .footer-bottom {
padding: 25px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}

.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
display: flex;
align-items: center;
gap: 20px;
}

.footer-wrapper .footer-bottom a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: all 0.3s ease;
}

.footer-wrapper .footer-bottom a:hover {
opacity: 1;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-wrapper .copyright-text {
position: relative;
padding-left: 25px;
}

.footer-wrapper .copyright-text::before {
content: "\f1f9";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
left: 0;
animation: spin 4s linear infinite;
}

@keyframes spin {
100% {
  transform: rotate(360deg);
}
}

@media (max-width: 1024px) {
.footer-wrapper .footer-content {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.footer-wrapper .footer-content {
  grid-template-columns: 1fr;
  gap: 40px;
}

.footer-wrapper .footer-section {
  text-align: center;
}

.footer-wrapper .footer-section h3::after {
  left: 50%;
  transform: translateX(-50%);
}

.footer-wrapper .social-links {
  justify-content: center;
}

.footer-wrapper .footer-links a {
  justify-content: center;
}

.footer-wrapper .contact-item {
  justify-content: center;
  text-align-last: left;
  text-align: left;
}


.footer-wrapper .footer-bottom {
  flex-direction: column;
  text-align: center;
}

.footer-wrapper .footer-bottom-left,
.footer-wrapper .footer-bottom-right {
  justify-content: center;
  width: 100%;
}
}

/* Services Page Css Start */
.service-page-services-section {
min-height: 100vh;
padding: 80px 20px;
background: white;
position: relative;
overflow: hidden;
}

.service-page-services-section .bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

.service-page-services-section .bg-bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
animation: float 8s ease-in-out infinite;
}

.service-page-services-section .bg-bubble:nth-child(1) {
width: 100px;
height: 100px;
left: 10%;
top: 20%;
animation-delay: 0s;
}
.service-page-services-section .bg-bubble:nth-child(2) {
width: 150px;
height: 150px;
left: 35%;
top: 70%;
animation-delay: 1s;
}
.service-page-services-section .bg-bubble:nth-child(3) {
width: 80px;
height: 80px;
left: 50%;
top: 50%;
animation-delay: 2s;
}
.service-page-services-section .bg-bubble:nth-child(4) {
width: 120px;
height: 120px;
left: 70%;
top: 30%;
animation-delay: 3s;
}
.service-page-services-section .bg-bubble:nth-child(5) {
width: 200px;
height: 200px;
left: 85%;
top: 80%;
animation-delay: 4s;
}

@keyframes float {
0% {
  transform: translateY(0) rotate(0deg);
}
50% {
  transform: translateY(-20px) rotate(180deg);
}
100% {
  transform: translateY(0) rotate(360deg);
}
}

.service-page-services-section .services-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #333;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
}

.service-page-services-section .services-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(201 201 201));
animation: widthGrow 1s ease forwards;
}

.service-page-services-section .services-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 20px;
position: relative;
z-index: 1;
}

.service-page-services-section .service-card {
background: white;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.8s ease forwards;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-decoration: none;
}

.service-page-services-section .service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-page-services-section .service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgb(0 0 0 / 10%), rgb(187 192 193 / 10%));
border-radius: 20px;
opacity: 0;
transition: all 0.5s ease;
}

.service-page-services-section .service-card:hover::before {
opacity: 1;
}

.service-page-services-section .service-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.5s ease;
}

.service-page-services-section .service-card:hover .service-icon {
transform: rotateY(360deg);
}

.service-page-services-section .service-icon i {
font-size: 35px;
color: white;
}

.service-page-services-section .service-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
}

.service-page-services-section .service-description {
font-size: 1rem;
line-height: 1.6;
color: #666;
}

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

@keyframes widthGrow {
from {
  width: 0;
}
to {
  width: 100px;
}
}

@media (max-width: 1024px) {
.service-page-services-section .services-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.service-page-services-section .services-grid {
  grid-template-columns: 1fr;
}
}

/* Contact Page Css Start */

.contact-page-main-section {
min-height: 80vh;
padding: 20px;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.contact-page-main-section .contact-page-wrapper {
width: 100%;
max-width: 1000px;
background: white;
border-radius: 30px;
display: flex;

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}

.contact-page-main-section .contact-page-wrapper::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 50%;

top: -100px;
left: -100px;
z-index: 0;
}

.contact-page-main-section .contact-page-wrapper::after {
content: "";
position: absolute;

width: 150px;
height: 150px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 50%;
bottom: -75px;
right: -75px;
z-index: 0;
}

/* फॉर्म सेक्शन अपडेट्स */
.contact-page-main-section .contact-form-section {
flex: 1;
padding: 25px;
background: white;
}

.contact-page-main-section .section-title {
font-size: 2.2em;
margin-bottom: 25px;
color: #333;
position: relative;
animation: slideIn 1s ease-out;
font-weight: 600;

background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
-webkit-background-clip: text;
-webkit-text-color: transparent;
}

.contact-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50px;

height: 3px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(128 129 130));
}

/* इनपुट स्टाइल्स इम्प्रूवमेंट */
.contact-page-main-section .input-group {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
transition: all 0.3s ease;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
width: 100%;

padding: 10px;
font-size: 16px;
border: 2px solid #eee;
border-radius: 10px;
outline: none;
background: #f8f9fa;
transition: all 0.3s ease;
color: #333;
}

.contact-page-main-section .input-group input:focus,
.contact-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);

background: white;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}

.contact-page-main-section .input-group label {
position: absolute;
left: 15px;
top: 15px;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
padding: 0 5px;
background: transparent;
font-size: 14px;
}

.contact-page-main-section .input-group input:focus ~ label,
.contact-page-main-section .input-group textarea:focus ~ label,
.contact-page-main-section .input-group input:valid ~ label,
.contact-page-main-section .input-group textarea:valid ~ label {
top: -10px;
left: 10px;

font-size: 12px;
color: rgba(36, 36, 225, 1);
background: white;
}

.contact-page-main-section .input-group textarea {
min-height: 80px;
}

/* इन्फो सेक्शन अपडेट्स */
.contact-page-main-section .contact-info-section {
flex: 1;
padding: 25px;

background:  linear-gradient(135deg, #00664f, #00D289);
color: white;
position: relative;
overflow: hidden;
z-index: 1;
}

.contact-page-main-section .contact-info-section::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);

border-radius: 50%;
top: -150px;
right: -150px;
z-index: -1;
}

.contact-page-main-section .info-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);

padding: 15px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 15px;
transform: translateX(0);
opacity: 1;
position: relative;
z-index: 2;
}

.contact-page-main-section .info-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.contact-page-main-section .info-card h3 {
color: white;
font-size: 1.1em;
margin-bottom: 5px;
font-weight: 500;
}

.contact-page-main-section .info-card p {
color: rgba(255, 255, 255, 0.9);

font-size: 0.9em;
line-height: 1.4;
}

.contact-page-main-section .info-icon {
width: 45px;
height: 45px;
background: white;
border-radius: 15px;
display: flex;

align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 24px;
color: #00664F;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.contact-page-main-section .info-card:hover .info-icon {
transform: rotate(360deg);
background: #00664F;
color: white;
}

/* रेस्पोंसिव डिज़ाइन अपडेट्स */
@media (max-width: 1200px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 900px;
}
}

@media (max-width: 1024px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 800px;
}

.contact-page-main-section .section-title {
  font-size: 2em;
}
}

@media (max-width: 768px) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 600px;
  flex-direction: column;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 25px;
  width: 100%;
}

.contact-page-main-section .section-title {
  font-size: 1.8em;
  margin-bottom: 20px;
}

.contact-page-main-section .input-group {
  margin-bottom: 15px;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  font-size: 14px;
}

.contact-page-main-section .info-card {
  padding: 15px;
  margin-bottom: 15px;
  flex-direction: row;
  align-items: center;
}

.contact-page-main-section .info-icon {
  width: 40px;
  height: 40px;
  font-size: 18px;
  margin-bottom: 0;

  margin-right: 15px;
}

.contact-page-main-section .social-links {
  justify-content: center;
  margin-top: 20px;
}
}

@media (max-width: 576px) {
.contact-page-main-section .contact-container {
  padding: 15px;
  min-height: auto;
}

.contact-page-main-section .contact-page-wrapper {
  border-radius: 20px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 20px;
}

.contact-page-main-section .section-title {
  font-size: 1.6em;
}

.contact-page-main-section .input-group label {
  font-size: 13px;
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  padding: 8px;
  font-size: 14px;
}

.contact-page-main-section .submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

.contact-page-main-section .info-card {
  padding: 12px;
  margin-bottom: 12px;
}

.contact-page-main-section .info-card h3 {
  font-size: 1em;
}

.contact-page-main-section .info-card p {
  font-size: 0.85em;
}

.contact-page-main-section .social-icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
}
}

@media (max-width: 380px) {
.contact-page-main-section .contact-container {
  padding: 10px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 15px;
}

.contact-page-main-section .section-title {
  font-size: 1.4em;
}

.contact-page-main-section .info-icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
  margin-right: 10px;
}

.contact-page-main-section .social-links {
  gap: 10px;
}

.contact-page-main-section .social-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}
}

/* टैबलेट लैंडस्केप मोड के लिए */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.contact-page-main-section .contact-page-wrapper {
  max-width: 900px;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 30px;
}
}

/* मोबाइल लैंडस्केप मोड के लिए */
@media (max-width: 767px) and (orientation: landscape) {
.contact-page-main-section .contact-container {
  padding: 15px;
}

.contact-page-main-section .contact-page-wrapper {
  flex-direction: row;
}

.contact-page-main-section .contact-form-section,
.contact-page-main-section .contact-info-section {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.contact-page-main-section .info-card {
  margin-bottom: 10px;
}
}

/* हाई-डेंसिटी (रेटिना) स्क्रीन्स के लिए */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.contact-page-main-section .contact-page-wrapper {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.contact-page-main-section .input-group input,
.contact-page-main-section .input-group textarea {
  border-width: 1px;
}
}

/* एनिमेशन इम्प्रूवमेंट्स */
.contact-page-main-section .submit-btn {
padding: 15px 40px;

background: linear-gradient(
  45deg,
   #00664f, #00D289
);
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.contact-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(36, 36, 225, 0.3);
}

.contact-page-main-section .submit-btn:active {
transform: translateY(-1px);
}

.contact-page-main-section .btn-animation {
display: flex;
align-items: center;
justify-content: center;
}

/* सोशल आइकन्स इम्प्रूवमेंट */
.contact-page-main-section .social-links {
display: flex;
gap: 15px;

margin-top: 25px;
position: relative;
z-index: 2;
}

.contact-page-main-section .social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
display: flex;
align-items: center;

justify-content: center;
color:#00664f;
text-decoration: none;
transition: all 0.3s ease;
font-size: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-page-main-section .social-icon:hover {
transform: translateY(-5px) rotate(360deg);
background: #00664f;
color: white;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* एनिमेशन्स */
@keyframes slideIn {
from {
  transform: translateY(50px);
  opacity: 0;
}
to {
  transform: translateY(0);
  opacity: 1;
}
}

@keyframes slideInFromRight {
from {
  transform: translateX(50px);
  opacity: 0;
}
to {
  transform: translateX(0);
  opacity: 1;
}
}

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

.contact-page-main-section .info-card {
animation: slideInFromRight 0.5s forwards ease-out;
animation-delay: calc(var(--card-index) * 0.1s);
}

/* Single Service Page Css Start */
.single-service-page-main-section .single-service-page-wrapper {
}

.single-service-page-main-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Hero Section */
.single-service-page-main-section .hero-section {
min-height: 100vh;
background: #000000;
padding: 80px 0;
position: relative;
overflow: hidden;
}

.single-service-page-main-section .hero-section::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);

border-radius: 50%;
top: -100px;
left: -100px;
}

.single-service-page-main-section .hero-section .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}

.single-service-page-main-section .hero-content {
flex: 1;
color: white;
	flex-direction:column;
}

.single-service-page-main-section .hero-content h1 {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
opacity: 0;

transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}

.single-service-page-main-section .hero-content p {
font-size: 1.1em;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}

/* Stats Styles */
.single-service-page-main-section .stats-container {
display: flex;
gap: 30px;
margin-top: 40px;
}

.single-service-page-main-section .stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
backdrop-filter: blur(10px);

transition: transform 0.3s ease;
}

.single-service-page-main-section .stat-item:hover {
transform: translateY(-5px);
}

.single-service-page-main-section .stat-number {
font-size: 2.5em;
font-weight: 700;
color: white;
display: block;
}

.single-service-page-main-section .stat-label {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.9);
}

/* Form Styles */
.single-service-page-main-section .hero-form {
flex: 1;
max-width: 500px;

opacity: 0;
transform: translateX(50px);
animation: slideIn 0.8s 0.4s forwards;
}

.single-service-page-main-section .form-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .form-container h3 {
font-size: 1.8em;
margin-bottom: 30px;
color: #333;
}

.single-service-page-main-section .input-group {
margin-bottom: 20px;
position: relative;
}

.single-service-page-main-section .input-group input,
.single-service-page-main-section .input-group textarea {
width: 100%;

padding: 12px;
border: 2px solid #eee;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
}

.single-service-page-main-section .input-group label {
position: absolute;
left: 12px;
top: 12px;
color: #999;
transition: all 0.3s ease;

pointer-events: none;
}

.single-service-page-main-section .input-group input:focus,
.single-service-page-main-section .input-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .input-group input:focus ~ label,
.single-service-page-main-section .input-group textarea:focus ~ label,
.single-service-page-main-section .input-group input:valid ~ label,
.single-service-page-main-section .input-group textarea:valid ~ label {
transform: translateY(-25px);
font-size: 12px;
color: #00664f);
}

.single-service-page-main-section .submit-btn {
width: 100%;
padding: 15px;
background: var(--gradient);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;

cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.single-service-page-main-section .submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

/* Service Details Section */
.single-service-page-main-section .service-details {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
perspective: 1000px;
}

.single-service-page-main-section .services-wrapper {
position: relative;
padding: 40px 0;
}

.single-service-page-main-section .service-category {
margin-bottom: 60px;
}

.single-service-page-main-section .category-title {
font-size: 1.8em;
color: #333;
margin-bottom: 30px;
position: relative;
padding-left: 20px;
}

.single-service-page-main-section .category-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);

width: 4px;
height: 25px;
background: linear-gradient(
  to bottom,
   #00664f, #00D289
);
border-radius: 2px;
}

.single-service-page-main-section .service-items {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0;
scroll-snap-type: x mandatory;

scrollbar-width: none; /* Firefox */
}

.single-service-page-main-section .service-items::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}

.single-service-page-main-section .service-item {
min-width: 380px;
background: white;
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;

scroll-snap-align: start;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .service-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;

height: 100%;
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
transform: translateY(100%);
transition: transform 0.3s ease;
}

.single-service-page-main-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .service-item:hover::before {
transform: translateY(0);
}

.single-service-page-main-section .service-icon {
width: 60px;
height: 60px;

background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color:#00664f;
margin-bottom: 20px;
transition: all 0.3s ease;
}

.single-service-page-main-section .service-item:hover .service-icon {
background: linear-gradient(
  135deg,
  #00664f,
 #00D289
);
color: white;
transform: rotateY(360deg);
}

.single-service-page-main-section .service-content h4 {
font-size: 1.3em;
color: #333;
margin-bottom: 10px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-content p {
color: #666;
margin-bottom: 20px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-features {
list-style: none;
margin-bottom: 20px;
position: relative;
z-index: 1;
}

.single-service-page-main-section .service-features li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: #666;

font-size: 0.95em;
}

.single-service-page-main-section .service-features i {
color:#00664f;
font-size: 14px;
}

.single-service-page-main-section .service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #00664f;
text-decoration: none;

font-weight: 500;
position: relative;
z-index: 1;
transition: gap 0.3s ease;
}

.single-service-page-main-section .service-link:hover {
gap: 12px;
}

/* Navigation Arrows */
.single-service-page-main-section .service-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;

justify-content: space-between;
pointer-events: none;
}

.single-service-page-main-section .nav-button {
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
display: flex;

align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.single-service-page-main-section .nav-button:hover {
background: #00664f;
color: white;
}

/* Process Section */
.single-service-page-main-section .process-section {
padding: 100px 0;
background: white;
}

.single-service-page-main-section .process-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 40px 0;
}

.single-service-page-main-section .process-timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);

width: 2px;
height: 100%;
background: linear-gradient(
  to bottom,
  #00664f,
  #00D289
);
}

.single-service-page-main-section .timeline-item {
position: relative;
margin-bottom: 50px;
width: 50%;
padding-right: 40px;
}

.single-service-page-main-section .timeline-item:nth-child(even) {
margin-left: auto;
padding-right: 0;
padding-left: 40px;
left: 0;
}

.single-service-page-main-section .timeline-number {
width: 50px;
height: 50px;

background: linear-gradient(
  90deg,
  #00664f, #00D289
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
position: absolute;
left: 100%;
transform: translateX(-50%);
}

.single-service-page-main-section
.timeline-item:nth-child(even)
.timeline-number {
left: 0;
transform: translateX(-50%);
}

/* Why Choose Us Section */
.single-service-page-main-section .why-choose-us {
padding: 100px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}

.single-service-page-main-section .why-choose-us::before {
content: "";
position: absolute;

width: 300px;
height: 300px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
border-radius: 50%;
top: -150px;
right: -150px;
}

.single-service-page-main-section .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}

.single-service-page-main-section .feature-card {
background: white;
padding: 35px;
border-radius: 20px;
text-align: center;
transition: all 0.3s ease;

position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}

.single-service-page-main-section .feature-card::before {
content: "";
position: absolute;

width: 100%;
height: 100%;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.05),
  rgba(11, 205, 240, 0.05)
);
top: 0;
left: 0;
transform: translateY(100%);
transition: transform 0.3s ease;
}

.single-service-page-main-section .feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: transparent;
}

.single-service-page-main-section .feature-card:hover::before {
transform: translateY(0);
}

.single-service-page-main-section .feature-icon {
width: 80px;
height: 80px;
background: #000;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
color: #fff;
margin: 0 auto 25px;
transition: all 0.3s ease;
}

.single-service-page-main-section .feature-card:hover .feature-icon {
background: #000;
color: white;
transform: rotateY(360deg);
}

.single-service-page-main-section .feature-card h3 {
font-size: 1.3em;
margin-bottom: 15px;
color: #333;
position: relative;
z-index: 1;
}

.single-service-page-main-section .feature-card p {
color: #666;
font-size: 0.95em;
line-height: 1.6;
position: relative;
z-index: 1;
}

/* FAQ Section */
.single-service-page-main-section .faq-section {
padding: 100px 0;
background: white;
}

.single-service-page-main-section .faq-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}

.single-service-page-main-section .faq-item {
background: white;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
height: fit-content;
}

.single-service-page-main-section .faq-question {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}

.single-service-page-main-section .faq-question h3 {
font-size: 1.1em;
font-weight: 500;
flex: 1;
padding-right: 15px;
}

.single-service-page-main-section .faq-toggle {
width: 30px;
height: 30px;
background: rgba(36, 36, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #00664f;
transition: all 0.3s ease;
flex-shrink: 0;
}

.single-service-page-main-section .faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}

.single-service-page-main-section .faq-item.active .faq-answer {
padding: 20px;
max-height: 500px;
}

.single-service-page-main-section .faq-item.active .faq-toggle {
transform: rotate(45deg);
background:#00664f;
color: white;
}

@media (max-width: 768px) {
.single-service-page-main-section .hero-section .container {
  flex-direction: column;
  text-align: center;
}

.single-service-page-main-section .stats-container {
  justify-content: center;
}

.single-service-page-main-section .hero-form {
  max-width: 100%;
}
}

@media (max-width: 768px) {
.single-service-page-main-section .hero-content h1 {
  font-size: 2.5em;
}

.single-service-page-main-section .process-timeline::before {
  left: 0;
}

.single-service-page-main-section .timeline-item {
  width: 100%;
  padding-left: 50px;
  padding-right: 0;
}

.single-service-page-main-section .timeline-item:nth-child(even) {
  padding-left: 50px;
}

.single-service-page-main-section .timeline-number {
  left: 0;
}

.single-service-page-main-section .features-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.single-service-page-main-section .feature-card {
  padding: 25px;
}

.single-service-page-main-section .feature-icon {
  width: 60px;
  height: 60px;
  font-size: 25px;
  margin-bottom: 20px;
}

.single-service-page-main-section .feature-card h3 {
  font-size: 1.2em;
}

.single-service-page-main-section .service-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.single-service-page-main-section .service-card {
  padding: 25px;
}

.single-service-page-main-section .service-icon {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

.single-service-page-main-section .service-card h3 {
  font-size: 1.2em;
}

.single-service-page-main-section .service-item {
  min-width: 300px;
  padding: 25px;
}

.single-service-page-main-section .category-title {
  font-size: 1.5em;
}
}

@media (max-width: 480px) {
.single-service-page-main-section .stats-container {
  flex-direction: column;
}

.single-service-page-main-section .form-container {
  padding: 20px;
}

.single-service-page-main-section .service-item {
  min-width: 260px;
  padding: 20px;
}

.single-service-page-main-section .service-icon {
  width: 50px;
  height: 50px;
  font-size: 20px;
}
}

/* About Service Section */
.single-service-page-main-section .about-service {
padding: 100px 0;
background: white;
overflow: hidden;
}

.single-service-page-main-section .about-service-content {
display: flex;
align-items: center;
gap: 50px;
}

.single-service-page-main-section .about-service-text {
flex: 1;
}

.single-service-page-main-section .service-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(90deg, rgb(3 3 3), rgb(0 2 3));
color: #ffffff;
border-radius: 30px;
font-size: 0.9em;
font-weight: 500;
margin-bottom: 20px;
animation: fadeIn 0.5s ease-out;
}

.single-service-page-main-section .about-title {
font-size: 2.8em;
line-height: 1.2;

margin-bottom: 20px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInUp 0.5s ease-out;
}

.single-service-page-main-section .about-description {
font-size: 1.1em;
color: #666;
margin-bottom: 40px;
line-height: 1.8;
}

.single-service-page-main-section .service-highlights {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 40px;
}

.single-service-page-main-section .highlight-item {
display: flex;
align-items: flex-start;

gap: 20px;
padding: 20px;
background: white;

border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.single-service-page-main-section .highlight-item:hover {
transform: translateX(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .highlight-icon {
min-width: 50px;
height: 50px;
background: linear-gradient(90deg, rgb(0 0 0), rgb(1 1 1));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.single-service-page-main-section .highlight-text h3 {
font-size: 1.2em;
margin-bottom: 5px;
color: #333;
}

.single-service-page-main-section .highlight-text p {
color: #666;
font-size: 0.95em;
}

.single-service-page-main-section .service-cta {
display: flex;
align-items: center;
gap: 40px;
margin-top: 40px;
}

.single-service-page-main-section .primary-btn {
padding: 15px 35px;
background:  var(--gradient);

border-radius: 30px;
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
transition: all 0.3s ease;
}

.single-service-page-main-section .primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(36, 36, 225, 0.2);
}

.single-service-page-main-section .service-stats {
display: flex;
gap: 30px;
}

.single-service-page-main-section .stat {
text-align: center;
}

.single-service-page-main-section .stat-value {
display: block;
font-size: 2em;
font-weight: 700;
color:#00664f;
margin-bottom: 5px;
}

.single-service-page-main-section .stat-label {
color: white;
font-size: 0.9em;
}

.single-service-page-main-section .about-service-image {
flex: 1;
position: relative;
}

.single-service-page-main-section .image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .image-wrapper img {
width: 100%;
height: auto;
display: block;
transition: all 0.3s ease;
}

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

.single-service-page-main-section .experience-badge {
position: absolute;
bottom: 30px;
right: -20px;
background: white;
padding: 15px 25px;

border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .experience-badge .years {
display: block;
font-size: 1.8em;
font-weight: 700;
color: #00664f;
}

.single-service-page-main-section .experience-badge .text {
font-size: 0.9em;
color: #666;
}

.single-service-page-main-section .tech-stack {
display: flex;
gap: 15px;
margin-top: 20px;
justify-content: center;
}

.single-service-page-main-section .tech-item {
width: 45px;
height: 45px;
background: white;
border-radius: 10px;
display: flex;

align-items: center;
justify-content: center;
font-size: 24px;
color:#00664f;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.single-service-page-main-section .tech-item:hover {
transform: translateY(-5px);
color: white;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
}

@media (max-width: 1024px) {
.single-service-page-main-section .about-service-content {
  flex-direction: column;
}

.single-service-page-main-section .about-title {
  font-size: 2.3em;
}

.single-service-page-main-section .about-service-image {
  margin-top: 50px;
}
}

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

.single-service-page-main-section .service-cta {
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.single-service-page-main-section .service-stats {
  width: 100%;
  justify-content: space-around;
}
}

@media (max-width: 480px) {
.single-service-page-main-section .highlight-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.single-service-page-main-section .tech-stack {
  flex-wrap: wrap;
  justify-content: center;
}
}

.single-service-page-main-section .services-showcase {
display: grid;
grid-template-columns: 250px 1fr;
gap: 40px;
margin-top: 50px;
position: relative;
}

/* 3D Card Styles */
.single-service-page-main-section .service-display {
grid-column: 2;
height: 400px;
perspective: 1500px;
}

.single-service-page-main-section .service-card-3d {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.single-service-page-main-section .service-card-3d:hover {
transform: rotateY(180deg);
}

.single-service-page-main-section .service-card-front,
.single-service-page-main-section .service-card-back {
position: absolute;

width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 30px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .service-card-front {
background:  var(--gradient);
}

.single-service-page-main-section .service-card-back {
transform: rotateY(180deg);
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
color: white;
}

/* Navigation Styles */
.single-service-page-main-section .service-nav {
grid-column: 1;
display: flex;
flex-direction: column;
gap: 20px;
}

.single-service-page-main-section .service-nav-item {
padding: 20px;
background: white;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;

display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.service-nav-item.active {
background:#000;
color: white;
transform: translateX(20px);
}

.single-service-page-main-section .service-nav-item i {
font-size: 24px;
transition: transform 0.3s ease;
}

.single-service-page-main-section .service-nav-item:hover i {
transform: scale(1.2);
}

/* Details Panel Styles */
.single-service-page-main-section .service-details-panel {
position: absolute;
right: -300px;
top: 0;
width: 280px;
background: white;

border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .detail-section {
margin-bottom: 30px;
}

.single-service-page-main-section .tech-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}

.single-service-page-main-section .tech-badges span {
padding: 8px 15px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.1),
  rgba(11, 205, 240, 0.1)
);

border-radius: 20px;
font-size: 0.9em;
color: #00664f;
}

.single-service-page-main-section .process-steps {
margin-top: 15px;
}

.single-service-page-main-section .step {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}

.single-service-page-main-section .step-number {
width: 40px;
height: 40px;
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
border-radius: 50%;
display: flex;
align-items: center;

justify-content: center;
color: white;
font-weight: 600;
}

/* Animations */
@keyframes floatIn {
from {
  opacity: 0;
  transform: translateY(30px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

.single-service-page-main-section .service-card-3d {
animation: floatIn 0.8s ease-out forwards;
}

/* Responsive Styles */
@media (max-width: 1200px) {
.single-service-page-main-section .service-details-panel {
  position: static;
  width: 100%;
  margin-top: 30px;
}
}

@media (max-width: 768px) {
.single-service-page-main-section .services-showcase {
  grid-template-columns: 1fr;
}

.single-service-page-main-section .service-nav {
  grid-row: 2;
  flex-direction: row;
  overflow-x: auto;
  padding: 20px 0;
}

.single-service-page-main-section .service-nav-item {
  min-width: 200px;
}

.single-service-page-main-section .service-nav-item.active {
  transform: translateY(-10px);
}
}

/* What We Offer Section Styles */
.single-service-page-main-section .offer-section {
padding: 80px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
}

.single-service-page-main-section .offer-title {
text-align: center;
font-size: 2.5em;
margin-bottom: 60px;
color: #333;
position: relative;
}

.single-service-page-main-section .offer-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);

width: 80px;
height: 3px;
background: var(--gradient);
}

.single-service-page-main-section .offer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}

.single-service-page-main-section .offer-item {
position: relative;
height: 300px;
perspective: 1000px;
}

.single-service-page-main-section .offer-content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

border-radius: 20px;
background: white;
padding: 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.single-service-page-main-section .offer-item:hover .offer-content {
transform: rotateY(180deg);
}

.single-service-page-main-section .offer-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, rgb(0 0 0 / 97%), rgb(15 16 16));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
color: #ffffff;
transition: all 0.3s ease;
}



.single-service-page-main-section .offer-content h3 {
font-size: 1.3em;
color: #333;
margin-bottom: 15px;
}

.single-service-page-main-section .offer-content p {
color: #666;
margin-bottom: 20px;
font-size: 14px;
}

.single-service-page-main-section .offer-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background: linear-gradient(135deg, rgb(0 0 0), rgb(0 0 0));
border-radius: 20px;
padding: 30px;
color: white;
backface-visibility: hidden;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
}

.single-service-page-main-section .offer-hover ul {
list-style: none;
margin-bottom: 30px;
font-size: 14px;
}

.single-service-page-main-section .offer-hover ul li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
font-size: 1.1em;
}

.single-service-page-main-section .offer-hover ul li i {
font-size: 16px;
}

.single-service-page-main-section .offer-btn {
display: inline-block;
padding: 12px 30px;
background: white;
color: #00664f;
text-decoration: none;

border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
}

.single-service-page-main-section .offer-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

@keyframes iconRotate {
0% {
  transform: rotateY(0);
}
100% {
  transform: rotateY(360deg);
}
}

/* Responsive Styles */
@media (max-width: 768px) {
.single-service-page-main-section .offer-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.single-service-page-main-section .offer-item {
  height: 280px;
}

.single-service-page-main-section .offer-content {
  padding: 20px;
}

.single-service-page-main-section .offer-icon {
  width: 60px;
  height: 60px;
  font-size: 25px;
}

.single-service-page-main-section .offer-content h3 {
  font-size: 1.3em;
}
}

@media (max-width: 480px) {
.single-service-page-main-section .offer-title {
  font-size: 2em;
}

.single-service-page-main-section .offer-item {
  height: 260px;
}
}

.single-service-page-main-section .section-title {
text-align: center;
font-size: 2.5em;

margin-bottom: 50px;
color: #333;
position: relative;
}

.single-service-page-main-section .section-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;

height: 3px;
background:#000;
}

/* प्रोसेस सेक्शन अपडेट्स */
.single-service-page-main-section .process-section .section-title {
margin-bottom: 60px;
}

/* व्हाई चूज अस सेक्शन अपडेट्स */
.single-service-page-main-section .why-choose-us .section-title {
margin-bottom: 60px;
}

/* FAQ सेक्शन अपडेट्स */
.single-service-page-main-section .faq-section .section-title {
margin-bottom: 60px;
}

/* Responsive Styles */
@media (max-width: 768px) {
.single-service-page-main-section .section-title {
  font-size: 2em;
  margin-bottom: 40px;
}
}

@media (max-width: 480px) {
.single-service-page-main-section .section-title {
  font-size: 1.8em;
  margin-bottom: 30px;
}
}

/* Blog Page Css Start */

/* Blog Page Styles */
.blog-page-wrapper {
background: #f8f9fa;
}

/* Blog Hero Section */
.blog-page-wrapper .blog-hero {background: linear-gradient(135deg, rgb(5 5 5) 0%, rgb(0 0 0) 100%);padding: 100px 0 120px;position: relative;text-align: center;color: white;}


.blog-page-wrapper .blog-hero .page-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
animation: fadeInUp 1s ease;
}

.blog-page-wrapper .blog-hero .page-description {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
animation: fadeInUp 1s ease 0.2s both;
}

.blog-page-wrapper .blog-hero .hero-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: #f8f9fa;

clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* Blog Categories */
.blog-page-wrapper .blog-categories {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin: -30px 0 50px;
position: relative;
z-index: 1;
}

.blog-page-wrapper .category-btn {
padding: 10px 20px;
border: none;
background: white;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;

font-weight: 500;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.blog-page-wrapper .category-btn.active,
.blog-page-wrapper .category-btn:hover {
background:#000;

color: white;
transform: translateY(-2px);
}

/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
padding: 30px 0;
}

.blog-page-wrapper .blog-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.blog-page-wrapper .blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.blog-page-wrapper .blog-image {
position: relative;
height: 240px;
overflow: hidden;
}

.blog-page-wrapper .blog-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
}

.blog-page-wrapper .blog-card:hover .blog-image img {
transform: scale(1.1);
}

.blog-page-wrapper .blog-image .blog-categories {
position: absolute;
bottom: 15px;
left: 15px;
margin: 0;
}

.blog-page-wrapper .blog-category {
background: #000;
color: white;
padding: 5px 15px;
border-radius: 15px;
font-size: 0.8rem;
margin-right: 10px;
}

.blog-page-wrapper .blog-content {
padding: 25px;
}

.blog-page-wrapper .blog-meta {
display: flex;
gap: 20px;
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
}

.blog-page-wrapper .blog-meta i {
color:#00664f;
margin-right: 5px;
}

.blog-page-wrapper .blog-title {
font-size: 1.4rem;
margin-bottom: 15px;
line-height: 1.4;
}

.blog-page-wrapper .blog-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}

.blog-page-wrapper .blog-title a:hover {
color:#00664f;
}

.blog-page-wrapper .blog-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}

.blog-page-wrapper .read-more {
display: inline-flex;
align-items: center;
gap: 10px;
color: #00664f;
text-decoration: none;

font-weight: 500;
transition: gap 0.3s ease;
}

.blog-page-wrapper .read-more:hover {
gap: 15px;
}

/* Pagination */
.blog-page-wrapper .blog-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin: 50px 0;
}

.blog-page-wrapper .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: white;

border-radius: 50%;
text-decoration: none;
color: #333;
font-weight: 500;
transition: all 0.3s ease;
}

.blog-page-wrapper .page-numbers.current,
.blog-page-wrapper .page-numbers:hover {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1) 0%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
}

/* Newsletter Section */
.blog-page-wrapper .newsletter-section {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.05) 0%,
  rgba(11, 205, 240, 0.05) 100%
);
padding: 80px 0;
text-align: center;
}

.blog-page-wrapper .newsletter-content {
max-width: 600px;
margin: 0 auto;
}

.blog-page-wrapper .newsletter-content h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
}

.blog-page-wrapper .newsletter-form {
display: flex;
gap: 15px;
margin-top: 30px;
}

.blog-page-wrapper .newsletter-form input {
flex: 1;
padding: 15px 25px;
border: 1px solid #ddd;
border-radius: 30px;
font-size: 1rem;
}

.blog-page-wrapper .newsletter-form button {
padding: 15px 30px;
background: #000;
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: transform 0.3s ease;
}

.blog-page-wrapper .newsletter-form button:hover {
transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
.blog-hero .page-title {
  font-size: 2.5rem;
}

.blog-page-wrapper .blog-grid {
  grid-template-columns: 1fr;
}

.blog-page-wrapper .newsletter-form {
  flex-direction: column;
}

.blog-page-wrapper .newsletter-form button {
  width: 100%;
  justify-content: center;
}
}

/* Blog Page Css End */

/* About Page Css Start */

.about-page-main-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 1;
flex-direction: column;
}

/* Hero Section */
.about-page-main-page .hero-section {
background:  linear-gradient(135deg, rgb(7 7 7) 0%, rgb(0 0 0) 100%);
min-height: 30vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 4rem 0;
}

.about-page-main-page .main-title {
color: white;
font-size: 4rem;
text-align: center;
margin-bottom: 1rem;
position: relative;
}

.about-page-main-page .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.5rem;
text-align: center;
}

.about-page-main-page .floating-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.about-page-main-page .float-item {
position: absolute;
background:  var(--gradient);
border-radius: 50%;
animation: float 20s infinite linear;
}

.about-page-main-page .float-item:nth-child(1) {
width: 300px;
height: 300px;
top: -150px;
left: -150px;
animation-delay: 0s;
}

.about-page-main-page .float-item:nth-child(2) {
width: 200px;
height: 200px;
top: 50%;
right: -100px;
animation-delay: -5s;
}

.about-page-main-page .float-item:nth-child(3) {
width: 150px;
height: 150px;
bottom: -75px;
left: 50%;
animation-delay: -10s;
}

/* Story Section */
.about-page-main-page .story-section {
padding: 6rem 0;
background: white;
}

.about-page-main-page .story-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}

.about-page-main-page .story-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-page-main-page .story-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.about-page-main-page .story-image:hover img {
transform: scale(1.1);
}

.about-page-main-page .story-text h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
background:#000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Mission Section */
.about-page-main-page .mission-section {
padding: 8rem 0;
background: linear-gradient(
  135deg,
  rgba(2, 3, 129, 0.03) 0%,
  rgba(40, 116, 252, 0.03) 100%
);
position: relative;
overflow: hidden;
}

/* Background Pattern */
.about-page-main-page .mission-section::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(
    circle at 0% 0%,
    rgba(2, 3, 129, 0.05) 0%,
    transparent 50%
  ),
  radial-gradient(
    circle at 100% 100%,
    rgba(40, 116, 252, 0.05) 0%,
    transparent 50%
  );
animation: rotateBgSlow 30s linear infinite;
}

/* Enhanced Mission Cards */
.about-page-main-page .mission-card {
padding: 3rem 2rem;
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
position: relative;
z-index: 1;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}

.about-page-main-page .mission-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 2px;
background: #000;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}

.about-page-main-page .mission-card i {
font-size: 3rem;
margin-bottom: 2rem;
position: relative;
display: inline-block;
}

/* Icon Glow Effect */
.about-page-main-page .mission-card i::before {
background: #000;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 15px rgba(40, 116, 252, 0.3));
}

/* Floating Icon Background */
.about-page-main-page .mission-card i::after {
content: "";
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(
  circle,
  rgba(40, 116, 252, 0.1) 0%,
  rgba(2, 3, 129, 0.05) 50%,
  transparent 70%
);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulseIcon 3s infinite ease-in-out;
z-index: -1;
}

.about-page-main-page .mission-card h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
background:#000;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
display: inline-block;
}

.about-page-main-page .mission-card p {
color: #666;
line-height: 1.8;
font-size: 1.1rem;
position: relative;
z-index: 1;
}

/* Enhanced Hover Effects */
.about-page-main-page .mission-card:hover {
transform: translateY(-15px) scale(1.03);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(40, 116, 252, 0.1),
  inset 0 0 15px rgba(255, 255, 255, 0.5);
}

.about-page-main-page .mission-card:hover i::after {
animation: pulseIconHover 2s infinite ease-in-out;
}

/* New Animations */
@keyframes pulseIcon {
0%,
100% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.5;
}
50% {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0.8;
}
}

@keyframes pulseIconHover {
0%,
100% {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 0.7;
}
50% {
  transform: translate(-50%, -50%) scale(1.4);
  opacity: 1;
}
}

@keyframes rotateBgSlow {
0% {
  transform: rotate(0deg) scale(1);
}
50% {
  transform: rotate(180deg) scale(1.1);
}
100% {
  transform: rotate(360deg) scale(1);
}
}

/* Mission Grid Layout */
.about-page-main-page .mission-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
padding: 2rem 0;
}

/* Team Section */
.about-page-main-page .team-section {
padding: 6rem 0;
background: white;
}

.about-page-main-page .team-section h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 4rem;
background:  var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.about-page-main-page .team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.about-page-main-page .team-card {
background: white;
border-radius: 15px;
overflow: hidden;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}

.about-page-main-page .team-card:hover {
transform: translateY(-10px);
}

.about-page-main-page .team-image {
width: 100%;
height: 300px;
overflow: hidden;
}

.about-page-main-page .team-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.about-page-main-page .team-card:hover .team-image img {
transform: scale(1.1);
}

.about-page-main-page .team-card h3 {
margin: 1.5rem 0 0.5rem;
color: #333;
}

.about-page-main-page .team-card p {
color: #666;
margin-bottom: 1rem;
}

.about-page-main-page .social-links {
padding: 1rem;
}

.about-page-main-page .social-links a {
color: rgb(2, 3, 129);
margin: 0 0.5rem;
font-size: 1.2rem;
transition: color 0.3s ease;
color: white;
display: flex !important;
justify-content: center;
align-items: center;
text-decoration: none;
}

.about-page-main-page .social-links a:hover {
color: white;
}

/* Stats Section */
.about-page-main-page .stats-section {
padding: 6rem 0;
background: linear-gradient(
  135deg,
  rgb(2, 3, 129) 0%,
  rgb(40, 116, 252) 100%
);
color: white;
}

.about-page-main-page .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}

.about-page-main-page .stat-card {
text-align: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}

.about-page-main-page .stat-card:hover {
transform: translateY(-10px);
}

.about-page-main-page .stat-card h3 {
font-size: 3rem;
margin-bottom: 1rem;
}

/* Animations */
@keyframes float {
0% {
  transform: translate(0, 0) rotate(0deg);
}
50% {
  transform: translate(20px, -20px) rotate(180deg);
}
100% {
  transform: translate(0, 0) rotate(360deg);
}
}

/* Responsive Design */
@media (max-width: 1200px) {
.about-page-main-page .container {
  max-width: 95%;
}
}

@media (max-width: 992px) {
.about-page-main-page .story-content {
  grid-template-columns: 1fr;
  gap: 2rem;
}

.about-page-main-page .main-title {
  font-size: 3rem;
}
}

@media (max-width: 768px) {
.about-page-main-page .main-title {
  font-size: 2.5rem;
}

.about-page-main-page .subtitle {
  font-size: 1.2rem;
}

.about-page-main-page .mission-grid,
.about-page-main-page .team-grid,
.about-page-main-page .stats-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.about-page-main-page .story-text h2,
.about-page-main-page .mission-section h2,
.about-page-main-page .team-section h2 {
  font-size: 2rem;
}

.about-page-main-page .mission-section {
  padding: 6rem 0;
}

.about-page-main-page .mission-card {
  padding: 2.5rem 1.5rem;
}

.about-page-main-page .mission-card i {
  font-size: 2.5rem;
}

.about-page-main-page .mission-card h3 {
  font-size: 1.5rem;
}

.about-page-main-page .mission-card p {
  font-size: 1rem;
}
}

@media (max-width: 480px) {
.about-page-main-page .main-title {
  font-size: 2rem;
}

.about-page-main-page .team-image {
  height: 250px;
}
}

/* Enhanced Visual Effects */
.about-page-main-page .hero-section::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(
    circle at 20% 30%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  ),
  radial-gradient(
    circle at 80% 70%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
animation: pulseGlow 8s infinite alternate;
}

/* Glowing particles */
.about-page-main-page .particle {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
filter: blur(1px);
animation: particleFloat 15s infinite linear;
opacity: 0.6;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
  0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
}

.about-page-main-page .hero-section::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.2"/></svg>')
  center/50px 50px;
animation: rotateBg 30s linear infinite;
opacity: 0.1;
}

/* Enhanced Card Styles */
.about-page-main-page .mission-card,
.about-page-main-page .team-card,
.about-page-main-page .stat-card {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

.about-page-main-page .mission-card::before,
.about-page-main-page .team-card::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
  45deg,
  transparent,
  rgba(255, 255, 255, 0.3),
  transparent
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}

/* Enhanced Story Section */
.about-page-main-page .story-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
  135deg,
  rgba(2, 3, 129, 0.2),
  rgba(40, 116, 252, 0.2)
);
opacity: 0;
transition: opacity 0.3s ease;
}

.about-page-main-page .story-image:hover::before {
opacity: 1;
}

/* 3D Transform Effects */
.about-page-main-page .mission-card:hover,
.about-page-main-page .team-card:hover {
transform: translateY(-15px) scale(1.02) perspective(1000px) rotateX(10deg)
  rotateY(-10deg);
box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1),
  -20px -20px 60px rgba(255, 255, 255, 0.8),
  inset 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Floating Animation for Stats */
.about-page-main-page .stat-card {
animation: floatCard 6s ease-in-out infinite;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}

.about-page-main-page .stat-card:nth-child(1) {
animation-delay: 0s;
}
.about-page-main-page .stat-card:nth-child(2) {
animation-delay: -1.5s;
}
.about-page-main-page .stat-card:nth-child(3) {
animation-delay: -3s;
}
.about-page-main-page .stat-card:nth-child(4) {
animation-delay: -4.5s;
}

/* Enhanced Text Effects */
.about-page-main-page .main-title {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
animation: glowText 3s infinite alternate;
}

/* New Animations */
@keyframes pulseGlow {
0%,
100% {
  opacity: 0.5;
  transform: scale(1);
}
50% {
  opacity: 0.8;
  transform: scale(1.1);
}
}

@keyframes shimmer {
0% {
  transform: translate(-100%, -100%) rotate(45deg);
}
100% {
  transform: translate(100%, 100%) rotate(45deg);
}
}

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

@keyframes glowText {
0%,
100% {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(255, 255, 255, 0.1);
}
50% {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
    0 0 30px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2);
}
}

@keyframes rotateBg {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

/* Enhanced Mission Cards */
.about-page-main-page .mission-card i {
position: relative;
z-index: 1;
}

.about-page-main-page .mission-card i::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: radial-gradient(circle, rgba(2, 3, 129, 0.1) 0%, transparent 70%);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0.5;
}
50% {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0.8;
}
100% {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0.5;
}
}

/* Team Card Enhancements */
.about-page-main-page .team-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
  45deg,
  rgba(2, 3, 129, 0.2),
  rgba(40, 116, 252, 0.2)
);
opacity: 0;
transition: opacity 0.3s ease;
}

.about-page-main-page .team-card:hover .team-image::after {
opacity: 1;
}

.about-page-main-page .social-links a {
position: relative;
display: inline-block;
}

.about-page-main-page .social-links a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(2, 3, 129, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s ease;
}

.about-page-main-page .social-links a:hover::before {
transform: scale(1.5);
}

/* About Page Css End */

/* Projects Page Css Start */
.projects-page-main-page .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
}

/* Hero Section */
.projects-page-main-page .hero-section {
background: linear-gradient(
  135deg,
  rgb(1, 1, 1) 0%,
  rgb(0, 0, 0) 100%
);
min-height: 45vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 3rem 0;
}

.projects-page-main-page .hero-section::before {
content: "";
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(
    circle at 20% 30%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  ),
  radial-gradient(
    circle at 80% 70%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
animation: rotateBg 30s infinite linear;
}

.projects-page-main-page .main-title {
color: white;
font-size: 4rem;
text-align: center;
margin-bottom: 1rem;
}

.projects-page-main-page .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.5rem;
text-align: center;
}

/* Professional Project Section Styling */
.projects-page-main-page .projects-section {
background: linear-gradient(
  135deg,
  rgba(2, 3, 129, 0.05) 0%,
  rgba(40, 116, 252, 0.05) 100%
);
position: relative;
overflow: hidden;
padding: 5rem 0;
}

/* Refined Grid Layout */
.projects-page-main-page .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
padding: 1rem;
}

/* Floating Elements */
.projects-page-main-page .floating-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}

.projects-page-main-page .float-element {
position: absolute;
background: linear-gradient(
  135deg,
  rgba(2, 3, 129, 0.1),
  rgba(40, 116, 252, 0.1)
);
border-radius: 50%;
animation: float 20s infinite ease-in-out;
}

.projects-page-main-page .float-element:nth-child(1) {
width: 300px;
height: 300px;
top: 10%;
left: -150px;
animation-delay: 0s;
}
.projects-page-main-page .float-element:nth-child(2) {
width: 200px;
height: 200px;
top: 60%;
right: -100px;
animation-delay: -5s;
}
.projects-page-main-page .float-element:nth-child(3) {
width: 150px;
height: 150px;
bottom: 10%;
left: 50%;
animation-delay: -10s;
}

/* Modern Project Cards */
.projects-page-main-page .project-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(2, 3, 129, 0.08),
  0 0 0 1px rgba(40, 116, 252, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}

.projects-page-main-page .project-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
  135deg,
  rgba(2, 3, 129, 0.1),
  rgba(40, 116, 252, 0.1)
);
opacity: 0;
transition: opacity 0.4s ease;
}

.projects-page-main-page .project-card:hover {
transform: translateY(-12px);
box-shadow: 0 22px 40px rgba(2, 3, 129, 0.15),
  0 0 0 2px rgba(40, 116, 252, 0.1);
}

.projects-page-main-page .project-card:hover::before {
opacity: 1;
}

/* Enhanced Image Container */
.projects-page-main-page .project-image {
height: 240px;
position: relative;
overflow: hidden;
}

.projects-page-main-page .project-image img {
width: 100%;
height: auto;
transition: transform 15s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.projects-page-main-page .project-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
  to bottom,
  transparent 0%,
  rgba(2, 3, 129, 0.05) 50%,
  rgba(40, 116, 252, 0.15) 100%
);
opacity: 0;
transition: opacity 0.4s ease;
}

.projects-page-main-page .project-card:hover .project-image img {
transform: translateY(calc(-100% + 240px));
}

.projects-page-main-page .project-card:hover .project-image::after {
opacity: 1;
}

/* Refined Content Area */
.projects-page-main-page .project-content {
padding: 1.8rem;
background: transparent;
position: relative;
z-index: 1;
}

.projects-page-main-page .project-content h3 {
font-size: 1.4rem;
font-weight: 600;
color: rgb(0,0,0);
margin-bottom: 0.8rem;
transition: color 0.3s ease;
}

.projects-page-main-page .project-content p {
font-size: 0.95rem;
color: #555;
margin-bottom: 1.5rem;
line-height: 1.6;
}

/* Modern Project Links */
.projects-page-main-page .project-links {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(2, 3, 129, 0.1);
}

.projects-page-main-page .view-project {
padding: 0.6rem 1.2rem;
background: linear-gradient(135deg, rgb(0,0,0) 0%, rgb(0,0,0) 100% );
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
opacity: 0.9;
}

.projects-page-main-page .view-project:hover {
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(2, 3, 129, 0.2);
}

.projects-page-main-page .github-link {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: rgb(2, 3, 129);
background: rgba(2, 3, 129, 0.1);
transition: all 0.3s ease;
}

.projects-page-main-page .github-link:hover {
background: rgb(2, 3, 129);
color: white;
transform: rotate(360deg);
}

/* Professional Stats Section */
.projects-page-main-page .stats-section {
padding: 4rem 0;
background: white;
}

.projects-page-main-page .stats-grid {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 2rem;
padding: 0 1rem;
}

.projects-page-main-page .stat-card {
text-align: center;
padding: 2rem;
background: #f8f9fa;
border-radius: 8px;
transition: transform 0.3s ease;
flex: 1;
min-width: 200px;
max-width: 300px;
}

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

.projects-page-main-page .stat-card i {
font-size: 2rem;
color: rgb(2, 3, 129);
margin-bottom: 1rem;
}

.projects-page-main-page .stat-card h3 {
font-size: 2rem;
color: rgb(2, 3, 129);
margin-bottom: 0.5rem;
}

.projects-page-main-page .stat-card p {
color: #666;
font-size: 0.9rem;
}

/* Professional CTA Section */
.projects-page-main-page .cta-section {
background: linear-gradient(
  135deg,
  rgb(2, 3, 129) 0%,
  rgb(40, 116, 252) 100%
);
position: relative;
overflow: hidden;
padding: 6rem 0;
}

.projects-page-main-page .cta-section::before {
content: "";
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(
    circle at 0% 0%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  ),
  radial-gradient(
    circle at 100% 100%,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
animation: rotateBg 30s infinite linear;
}

.projects-page-main-page .cta-content {
position: relative;
z-index: 1;
text-align: center;
color: white;
}

.projects-page-main-page .cta-section h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.projects-page-main-page .cta-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}

.projects-page-main-page .cta-button {
background: white;
color: rgb(2, 3, 129);
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.projects-page-main-page .cta-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Enhanced Filter Buttons */
.projects-page-main-page .filter-buttons {
margin-bottom: 3rem;
}

.projects-page-main-page .filter-btn {
padding: 0.7rem 1.4rem;
background: white;
border: 1px solid rgba(2, 3, 129, 0.15);
border-radius: 25px;
font-size: 0.95rem;
font-weight: 500;
color: #000000;
transition: all 0.3s ease;
}

.projects-page-main-page .filter-btn:hover,
.projects-page-main-page .filter-btn.active {
background: linear-gradient(
  135deg,
  rgb(0,0,0) 0%,
  rgb(0,0,0) 100%
);
color: white;
border-color: transparent;
box-shadow: 0 5px 15px rgba(2, 3, 129, 0.15);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.projects-page-main-page .hero-section {
  min-height: 40vh;
  padding: 2rem 0;
}

.projects-page-main-page .project-image {
  height: 200px;
}

.projects-page-main-page .projects-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.projects-page-main-page .stats-grid {
  flex-wrap: wrap;
}

.projects-page-main-page .stat-card {
  min-width: 150px;
  flex: 0 1 calc(50% - 1rem);
}

.projects-page-main-page .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.projects-page-main-page .filter-btn {
  margin: 0.5rem;
}
}

@media (max-width: 480px) {
.projects-page-main-page .hero-section {
  min-height: 35vh;
}

.projects-page-main-page .project-image {
  height: 180px;
}

.projects-page-main-page .stat-card {
  flex: 0 1 100%;
}
}

/* Animations */
@keyframes float {
0%,
100% {
  transform: translate(0, 0) rotate(0deg);
}
50% {
  transform: translate(20px, -20px) rotate(180deg);
}
}

@keyframes rotateBg {
0% {
  transform: rotate(0deg) scale(1);
}
50% {
  transform: rotate(180deg) scale(1.1);
}
100% {
  transform: rotate(360deg) scale(1);
}
}

/* Projects Page Css End */

/* Process Timeline Styles */
.timeline-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
}

.timeline-container::after {
content: "";
position: absolute;
width: 2px;
background: #006e51;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}

.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
left: 0;
}

.timeline-item:nth-child(even) {
left: 50%;
}

.timeline-number {
position: absolute;
width: 40px;
height: 40px;
right: -20px;
background: #006e51;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
z-index: 1;
}

.timeline-item:nth-child(even) .timeline-number {
left: -20px;
}

.timeline-content {
padding: 20px;
background: #f5f5f5;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
.timeline-container::after {
  left: 31px;
}

.timeline-item {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
}

.timeline-item:nth-child(even) {
  left: 0;
}

.timeline-number {
  left: 10px;
  right: auto;
}

.timeline-item:nth-child(even) .timeline-number {
  left: 10px;
}
}

/* Custom Content Section Styles */
.custom-content-section {
padding: 60px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}

.custom-content-wrapper {
max-width: 100%;
margin: 0 auto;
position: relative;
}

.content-header {
text-align: center;
margin-bottom: 30px;
position: relative;
}

.header-line {
width: 80px;
height: 4px;
background: #000;
margin: 15px auto;
border-radius: 2px;
}

.custom-content-box {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
padding: 40px;
height: 400px;
position: relative;
overflow: hidden;
border: 1px solid rgba(36, 36, 225, 0.1);
}

.scrollable-content {
height: 100%;
overflow-y: auto;
padding-right: 20px;
}

/* Custom Scrollbar Styles */
.scrollable-content::-webkit-scrollbar {
width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

.scrollable-content::-webkit-scrollbar-thumb {
background: linear-gradient(
  to bottom,
  rgba(36, 36, 225, 0.7),
  rgba(11, 205, 240, 0.7)
);
border-radius: 4px;
transition: all 0.3s ease;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
  to bottom,
  rgba(36, 36, 225, 1),
  rgba(11, 205, 240, 1)
);
}

/* Content Styling */
.scrollable-content h3 {
color: #333;
font-size: 1.4em;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(36, 36, 225, 0.1);
}

.scrollable-content p {
color: #666;
line-height: 1.8;
margin-bottom: 20px;
}

.scrollable-content ul {
list-style: none;
padding-left: 0;
}

.scrollable-content ul li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #666;
}

.scrollable-content ul li:before {
content: "→";
position: absolute;
left: 0;
color: #00664f;
}

/* Responsive Design */
@media (max-width: 768px) {
.custom-content-box {
  padding: 25px;
  height: 350px;
}

.scrollable-content {
  padding-right: 15px;
}
}

/* Single Blog Page Styles */
.single-blog-wrapper {
background: #f8f9fa;
font-family: "Lora", serif !important;

}

.single-blog-wrapper .container {
margin: 0 auto;
padding: 0 20px;
max-width: 2000px;
}

.single-blog-wrapper .container h1{
  font-family: "Lora", serif;

}

/* Blog Hero Section */
.single-blog-wrapper .blog-hero {
background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(0 0 0) 100%);
padding: 60px 0;
color: white;
}

.single-blog-wrapper .blog-hero .container {
max-width: 1400px !important;
margin: 0 auto;
padding: 0 20px;
}

.single-blog-wrapper .post-meta {
display: flex;
gap: 20px;
margin-bottom: 20px;
font-size: 0.9rem;
}

.single-blog-wrapper .post-meta i {
margin-right: 5px;
}

.single-blog-wrapper .post-category {
background: rgba(255, 255, 255, 0.2);
padding: 5px 15px;
border-radius: 20px;
}

.single-blog-wrapper .post-title {
font-size: 2.5rem;
font-family: "Lora", serif;
  
margin-bottom: 30px;
line-height: 1.3;
}

.single-blog-wrapper .featured-image {
margin: 30px 0;
border-radius: 15px;
overflow: hidden;
}

.single-blog-wrapper .featured-image img {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
}

/* Blog Content Section */
.single-blog-wrapper .blog-content-section {
padding: 60px 0;
}

.single-blog-wrapper .content-wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
}

.single-blog-wrapper .main-content {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
font-family: "Lora", serif !important;

}

.single-blog-wrapper .post-content {
font-size: 1.1rem;
line-height: 1.8;
color: #444;
font-family: "Lora", serif !important;

}

.single-blog-wrapper .post-tags {
margin: 30px 0;
padding-top: 20px;
border-top: 1px solid #eee;
}

.single-blog-wrapper .post-tags a{
  text-decoration: none;
  background-color: #000;
  padding: 5px 10px;
  border-radius: 40px;
  color:white;
  display: inline-block;
}

.single-blog-wrapper .tag-label {
font-weight: 500;
margin-right: 10px;
}

/* Share Buttons */
.single-blog-wrapper .share-buttons {
margin: 30px 0;
padding: 20px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}

.single-blog-wrapper .share-buttons h3 {
margin-bottom: 15px;
}

.single-blog-wrapper .share-links {
display: flex;
gap: 15px;
}

.single-blog-wrapper .share-links a {
width: 40px;

height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: transform 0.3s ease;
}

.single-blog-wrapper .share-links a:hover {
transform: translateY(-3px);
}

.single-blog-wrapper .facebook {
background: #3b5998;
}
.single-blog-wrapper .twitter {
background: #1da1f2;
}
.single-blog-wrapper .linkedin {
background: #0077b5;
}
.single-blog-wrapper .whatsapp {
background: #25d366;
}

/* Author Box */
.single-blog-wrapper .author-box {
display: flex;

gap: 20px;
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
margin: 30px 0;
}

.single-blog-wrapper .author-avatar img {
border-radius: 50%;
}

.single-blog-wrapper .author-info h3 {
margin-bottom: 10px;
}

/* Related Posts */
.single-blog-wrapper .related-posts {
margin-top: 40px;
}

.single-blog-wrapper .posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}

.single-blog-wrapper .related-post-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}

.single-blog-wrapper .related-post-card:hover {
transform: translateY(-5px);
}

.single-blog-wrapper .post-thumbnail img {
width: 100%;
height: 200px;
object-fit: cover;
}

.single-blog-wrapper .post-content {
padding: 20px;
font-family: "Lora", serif !important;

}

.single-blog-wrapper .post-content h3 {
font-size: 1.1rem;
margin-bottom: 10px;
font-family: "Lora", serif !important;

}

.single-blog-wrapper .post-content h3 a {
color: #333;
text-decoration: none;
font-family: "Lora", serif !important;

}

/* Sidebar */
.single-blog-wrapper .blog-sidebar {
position: sticky;
top: 20px;
}

.single-blog-wrapper .sidebar-widget {
background: white;
padding: 25px;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.single-blog-wrapper .sidebar-widget h3 {
margin-bottom: 20px;

padding-bottom: 10px;
border-bottom: 2px solid #eee;
}

.single-blog-wrapper .categories-list {
list-style: none;
padding: 0;
}

.single-blog-wrapper .categories-list li {
margin-bottom: 10px;
}

.single-blog-wrapper .categories-list a {
color: #666;
text-decoration: none;
transition: color 0.3s ease;
}

.single-blog-wrapper .categories-list a:hover {
color: #00664f;
}

.single-blog-wrapper .recent-posts-list {
list-style: none;
padding: 0;
}

.single-blog-wrapper .recent-posts-list li {
margin-bottom: 15px;
}

.single-blog-wrapper .recent-posts-list a {
display: flex;
gap: 15px;
color: #333;
text-decoration: none;
}

.single-blog-wrapper .post-thumb img {
width: 70px;

height: 70px;
object-fit: cover;
border-radius: 8px;
}

.single-blog-wrapper .post-info h4 {
font-size: 0.9rem;
margin-bottom: 5px;
}

.single-blog-wrapper .post-date {
font-size: 0.8rem;
color: white;
}

/* Responsive Design */
@media (max-width: 992px) {
.single-blog-wrapper .content-wrapper {
  grid-template-columns: 1fr;
}

.single-blog-wrapper .posts-grid {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.single-blog-wrapper .post-title {
  font-size: 2rem;
}

.single-blog-wrapper .main-content {
  padding: 25px;
  font-family: "Lora", serif;

}

.single-blog-wrapper .posts-grid {
  grid-template-columns: 1fr;
}

.single-blog-wrapper .post-meta {
  flex-wrap: wrap;
}
}

@media (max-width: 480px) {
.single-blog-wrapper .author-box {
  flex-direction: column;
  text-align: center;
}

.single-blog-wrapper .share-links {
  justify-content: center;
}
}

/* Service Page Sidebar Styles */
.single-blog-wrapper .search-widget {
position: relative;
margin-bottom: 30px;
}

.single-blog-wrapper .search-form {
display: flex;
gap: 10px;
}

.single-blog-wrapper .search-field {
flex: 1;
padding: 12px 20px;
border: 2px solid #eee;
border-radius: 30px;
font-size: 1rem;
transition: all 0.3s ease;
}

.single-blog-wrapper .search-field:focus {
border-color: rgba(36, 36, 225, 0.5);
box-shadow: 0 0 15px rgba(36, 36, 225, 0.1);
outline: none;
}

.single-blog-wrapper .search-submit {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1) 0%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
border: none;
padding: 12px 25px;
border-radius: 30px;
cursor: pointer;
transition: transform 0.3s ease;
}

.single-blog-wrapper .search-submit:hover {
transform: translateY(-2px);
}

/* Sidebar Lead Form */
.single-blog-wrapper .sidebar-lead-form {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
padding: 25px;
border-radius: 15px;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(36, 36, 225, 0.1);
}

.single-blog-wrapper .sidebar-lead-form h3 {
font-size: 1.3rem;
margin-bottom: 20px;
text-align: center;
color: #333;
}

.single-blog-wrapper .lead-form-group {
margin-bottom: 15px;
}

.single-blog-wrapper .lead-form-group input,
.single-blog-wrapper .lead-form-group textarea {
width: 100%;

padding: 12px 15px;
border: 2px solid #eee;
border-radius: 8px;
font-size: 0.9rem;
transition: all 0.3s ease;
}

.single-blog-wrapper .lead-form-group input:focus,
.single-blog-wrapper .lead-form-group textarea:focus {
border-color: rgba(36, 36, 225, 0.5);

box-shadow: 0 0 15px rgba(36, 36, 225, 0.1);
outline: none;
}

.single-blog-wrapper .lead-form-submit {
width: 100%;
background: linear-gradient(135deg, rgb(0 0 0) 0%, rgb(0 0 0) 100%);
color: white;
border: none;
padding: 12px;

border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s ease;
}

.single-blog-wrapper .lead-form-submit:hover {
transform: translateY(-2px);
}

/* Comments Section Styles */
.single-blog-wrapper .comments-section {
margin-top: 60px;
padding: 40px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.single-blog-wrapper .comments-title {
font-size: 1.8rem;
color: #333;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #eee;
}

.single-blog-wrapper .comment-list {
list-style: none;
padding: 0;
}

.single-blog-wrapper .comment {
background: #f8f9fa;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
transition: transform 0.3s ease;
}

.single-blog-wrapper .comment:hover {
transform: translateY(-3px);
}

.comment-author {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}

.single-blog-wrapper .comment-author img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.single-blog-wrapper .comment-author .fn {
font-weight: 600;
color: #333;
font-size: 1.1rem;
}

.single-blog-wrapper .comment-metadata {
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
}

.single-blog-wrapper .comment-content {
color: #444;
line-height: 1.7;
}

.single-blog-wrapper .comment-content p {
margin-bottom: 15px;
}

.single-blog-wrapper .reply {
margin-top: 15px;
text-align: right;
}

.single-blog-wrapper .reply a {
background: white;
color: rgba(36, 36, 225, 1);
text-decoration: none;
padding: 8px 20px;
border-radius: 20px;

font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.single-blog-wrapper .reply a:hover {
background: rgba(36, 36, 225, 1);
color: white;
transform: translateY(-2px);
}

/* Comment Form */
.single-blog-wrapper .comment-respond {
background: white;
padding: 30px;

border-radius: 12px;
margin-top: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.single-blog-wrapper .comment-reply-title {
font-size: 1.5rem;
color: #333;
margin-bottom: 25px;
}

.single-blog-wrapper .comment-form {
display: grid;
gap: 20px;
}

.single-blog-wrapper .comment-form-author,
.single-blog-wrapper .comment-form-email,
.single-blog-wrapper .comment-form-url {
display: grid;
gap: 8px;
}

.single-blog-wrapper .comment-form input[type="text"],
.single-blog-wrapper .comment-form input[type="email"],
.single-blog-wrapper .comment-form input[type="url"],
.single-blog-wrapper .comment-form textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #eee;
border-radius: 8px;
transition: all 0.3s ease;
}

.single-blog-wrapper .comment-form input:focus,
.single-blog-wrapper .comment-form textarea:focus {
border-color: rgba(36, 36, 225, 0.5);
outline: none;
box-shadow: 0 0 15px rgba(36, 36, 225, 0.1);
}

.single-blog-wrapper .comment-form-comment label {
display: block;
margin-bottom: 8px;
color: #333;
}

.single-blog-wrapper .form-submit {
margin-top: 10px;
}

.single-blog-wrapper .form-submit .submit {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1) 0%,
  rgba(11, 205, 240, 1) 100%
);
color: white;

border: none;
padding: 12px 30px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: transform 0.3s ease;
}

.single-blog-wrapper .form-submit .submit:hover {
transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
.form-row {
  grid-template-columns: 1fr;
  gap: 15px;
}

.featured-image {
  height: 300px;
}

.inline-lead-form {
  padding: 20px;
}

.comments-section {
  padding: 25px;
}
}

/* Call to Action Sections */
.single-blog-wrapper .content-cta {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.05) 0%,
  rgba(11, 205, 240, 0.05) 100%
);
padding: 40px;
border-radius: 15px;
text-align: center;
margin: 40px 0;
}

.single-blog-wrapper .content-cta h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #333;
}

.single-blog-wrapper .content-cta p {
color: #666;
margin-bottom: 25px;
}

.single-blog-wrapper .cta-button {
display: inline-flex;
align-items: center;

gap: 10px;
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1) 0%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 500;
transition: transform 0.3s ease;
}

.single-blog-wrapper .cta-button:hover {
transform: translateY(-3px);
}

/* Popup Form */
.single-blog-wrapper .popup-form {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;

height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
justify-content: center;
align-items: center;
}

.single-blog-wrapper .popup-form.active {
display: flex;
}

.single-blog-wrapper .popup-content {
background: white;
padding: 40px;
border-radius: 15px;
width: 90%;
max-width: 500px;

position: relative;
}

.single-blog-wrapper .close-popup {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;

font-size: 1.5rem;
cursor: pointer;
color: #666;
}

/* Featured Image and Form Layout */
.single-blog-wrapper .featured-content-wrap {
margin: -30px auto 40px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: grid;
grid-template-columns: 1.5fr 1fr; /* Changed from 1.2fr to 1.5fr for image */
gap: 0;
min-height: 500px; /* Reduced from 600px */
}

.single-blog-wrapper .featured-image {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.single-blog-wrapper .featured-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;

object-fit: cover;
display: block;
}

/* Inline Lead Form */
.single-blog-wrapper .inline-lead-form {
padding: 35px 30px; /* Reduced padding */
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
display: flex;
flex-direction: column;
justify-content: center;

height: 100%; /* Reduced from 600px */
position: relative;
}

.single-blog-wrapper .inline-lead-form h3 {
text-align: center;
margin-bottom: 20px; /* Reduced from 30px */

color: #333;
font-size: 1.5rem; /* Reduced from 1.8rem */
position: relative;
padding-bottom: 15px; /* Reduced from 20px */
}

.single-blog-wrapper .form-row {
display: grid;
grid-template-columns: 1fr;
gap: 15px; /* Reduced from 20px */
margin-bottom: 15px; /* Reduced from 20px */
}

.single-blog-wrapper .lead-form-group input,
.single-blog-wrapper .lead-form-group select,
.single-blog-wrapper .lead-form-group textarea {
padding: 12px 15px; /* Reduced from 15px 20px */
font-size: 0.95rem;
}

.single-blog-wrapper .lead-form-group textarea {
height: 100px; /* Fixed height for textarea */
resize: none;
}

.single-blog-wrapper .lead-form-submit {
padding: 14px; /* Reduced from 18px */
font-size: 1rem; /* Reduced from 1.1rem */
margin-top: 15px; /* Reduced from 20px */
}

/* Responsive Design */
@media (max-width: 1200px) {
.single-blog-wrapper .featured-content-wrap,
.single-blog-wrapper .featured-image,
.single-blog-wrapper .inline-lead-form {
  min-height: 450px; /* Further reduced for larger screens */
}
}

@media (max-width: 992px) {
.single-blog-wrapper .featured-content-wrap {
  grid-template-columns: 1fr;
  min-height: auto;
  max-width: 600px; /* Added max-width for tablet view */
}

.single-blog-wrapper .featured-image {
  height: 350px; /* Reduced from 400px */
  min-height: auto;
}

.single-blog-wrapper .inline-lead-form {
  min-height: auto;
  padding: 30px 25px;
}
}

@media (max-width: 768px) {
.single-blog-wrapper .featured-content-wrap {
  margin: -30px auto 40px;
  max-width: 100%; /* Full width on mobile */
}

.single-blog-wrapper .featured-image {
  height: 250px; /* Reduced from 300px */
}

.single-blog-wrapper .inline-lead-form {
  padding: 25px 20px;
}
}

/* Mid-Content CTA Styles */
.single-blog-wrapper .mid-content-cta {
margin: 40px -40px;
padding: 60px 40px;
position: relative;
overflow: hidden;
background: #f8f9fa;
border-radius: 20px;
}

.single-blog-wrapper .cta-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.03) 0%,
  rgba(11, 205, 240, 0.03) 100%
);
z-index: 1;
}

.single-blog-wrapper .cta-background::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
  circle,
  rgba(255, 255, 255, 0.8) 0%,
  transparent 50%
);
animation: rotate 30s linear infinite;
}

.single-blog-wrapper .cta-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
align-items: center;
}

.single-blog-wrapper .cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #000;
padding: 8px 16px;
border-radius: 30px;
margin-bottom: 20px;
color: #fff;
font-weight: 500;
font-size: 0.9rem;
}

.single-blog-wrapper .cta-badge i {
color: #ffd700;
}

.single-blog-wrapper .mid-content-cta h3 {
font-size: 2.2rem;
color: #333;
margin-bottom: 15px;
line-height: 1.3;
background: #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.single-blog-wrapper .mid-content-cta p {
color: #666;
font-size: 1.1rem;
margin-bottom: 25px;
line-height: 1.6;
}

.single-blog-wrapper .cta-features {
list-style: none;
padding: 0;
margin-bottom: 30px;
}

.single-blog-wrapper .cta-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: #555;
font-size: 1.05rem;
}

.single-blog-wrapper .cta-features i {
color: #000;
font-size: 1.2rem;
}

.single-blog-wrapper .cta-buttons {
display: flex;
gap: 20px;
margin-top: 30px;
}

.single-blog-wrapper .primary-cta {
padding: 15px 30px;
border-radius: 40px;
background: #000;
color: white;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.2);
}

.single-blog-wrapper .btn-icon {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}

.single-blog-wrapper .primary-cta:hover .btn-icon {
transform: translateX(5px);
}

.single-blog-wrapper .secondary-cta {
padding: 15px 30px;
border-radius: 40px;
background: white;
color: #000;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
border: 2px solid rgba(36, 36, 225, 0.1);
}

.single-blog-wrapper .cta-right {
position: relative;
}

.single-blog-wrapper .cta-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.single-blog-wrapper .stat-item {
text-align: center;
}

.single-blog-wrapper .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #00664f;
margin-bottom: 5px;
background:#000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.single-blog-wrapper .stat-label {
color: #666;
font-size: 0.9rem;
}

@keyframes rotate {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}

/* Responsive Design */
@media (max-width: 992px) {
.single-blog-wrapper .cta-content {
  grid-template-columns: 1fr;
  gap: 30px;
}

.single-blog-wrapper .mid-content-cta h3 {
  font-size: 1.8rem;
}
}

@media (max-width: 768px) {
.single-blog-wrapper .mid-content-cta {
  margin: 30px -20px;
  padding: 40px 20px;
}

.single-blog-wrapper .cta-buttons {
  flex-direction: column;
}

.single-blog-wrapper .primary-cta,
.single-blog-wrapper .secondary-cta {
  width: 100%;
  justify-content: center;
  text-decoration: none;
}
}

/* FAQ Section Styles */
.single-blog-wrapper .blog-faq-section {
margin: 60px 0;
padding: 40px;
background: white;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.single-blog-wrapper .faq-header {
text-align: center;
margin-bottom: 40px;
}

.single-blog-wrapper .faq-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.1) 0%,
  rgba(11, 205, 240, 0.1) 100%
);
color:#00664f;
border-radius: 30px;
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 15px;
}

.single-blog-wrapper .faq-header h2 {
font-size: 2rem;
color: #333;
margin-bottom: 15px;
background: linear-gradient(
  135deg,
#00664f 0%,
  #0D289 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.single-blog-wrapper .faq-header p {
color: #666;
font-size: 1.1rem;
}

.single-blog-wrapper .faq-container {
max-width: 800px;
margin: 0 auto;
}

.single-blog-wrapper .faq-item {
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}

.single-blog-wrapper .faq-item:hover {
border-color: rgba(36, 36, 225, 0.2);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.single-blog-wrapper .faq-question {
width: 100%;
padding: 20px 25px;
background: white;
border: none;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}

.single-blog-wrapper .faq-question span {
font-size: 1.1rem;
font-weight: 500;
color: #333;
}

.single-blog-wrapper .faq-question i {
color: rgba(36, 36, 225, 1);
transition: transform 0.3s ease;
}

.single-blog-wrapper .faq-item.active .faq-question {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.03) 0%,
  rgba(11, 205, 240, 0.03) 100%
);
}

.single-blog-wrapper .faq-item.active .faq-question i {
transform: rotate(180deg);
}

.single-blog-wrapper .faq-answer {
padding: 0;
height: 0;
overflow: hidden;
transition: all 0.3s ease;
}

.single-blog-wrapper .faq-item.active .faq-answer {
padding: 20px 25px;
height: auto;
border-top: 1px solid #eee;
}

.single-blog-wrapper .faq-answer p {
color: #666;
line-height: 1.6;
margin: 0;
}

.single-blog-wrapper .faq-cta {
text-align: center;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #eee;
}

.single-blog-wrapper .faq-cta p {
color: #666;
margin-bottom: 15px;
}

.single-blog-wrapper .faq-contact-btn {
background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 1) 0%,
  rgba(11, 205, 240, 1) 100%
);
color: white;
border: none;
padding: 15px 30px;
border-radius: 30px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}

.single-blog-wrapper .faq-contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(36, 36, 225, 0.2);
}

/* Client Section Styles */

.home-clients-section {
padding: 80px 0;

background: linear-gradient(
  135deg,
  rgba(36, 36, 225, 0.02) 0%,
  rgba(11, 205, 240, 0.02) 100%
);

overflow: hidden;
}

.home-clients-section .section-header {
text-align: center;

margin-bottom: 50px;
}

.home-clients-section .section-badge {
display: inline-block;

padding: 8px 20px;

background:var(--gradient);

color: #FFFFFF;
border-radius: 30px;

font-weight: 500;

font-size: 0.9rem;

margin-bottom: 15px;
}

.home-clients-section .section-header h2 {
font-size: 2.5rem;

color: #333;

margin-bottom: 15px;

background: var(--gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;
}

.home-clients-section .section-header p {
color: #666;

font-size: 1.1rem;

max-width: 600px;

margin: 0 auto;
}

.home-clients-section .client-slider-container {
position: relative;

padding: 20px 0;
}

.home-clients-section .home-clients-section .client-slider {
overflow: hidden;

position: relative;

width: 100%;
}

.home-clients-section .client-track {
display: flex;

animation: slideTrack 30s linear infinite;
}

.home-clients-section .client-slide {
flex: 0 0 200px;

padding: 0 20px;
}

.home-clients-section .client-logo {
background: white;

padding: 20px;

border-radius: 10px;

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

transition: all 0.3s ease;

display: flex;

align-items: center;

justify-content: center;

height: 100px;
}

.home-clients-section .client-logo:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.home-clients-section .client-logo img {
max-width: 100%;
max-height: 60px;
object-fit: contain;
transition: all 0.3s ease;
}

.home-clients-section .client-logo:hover img {
opacity: 1;
}

@keyframes slideTrack {
0% {
  transform: translateX(0);
}

100% {
  transform: translateX(-50%);
}
}

/* Pause animation on hover */
.home-clients-section .client-slider:hover .client-track {
animation-play-state: paused;
}

/* Responsive Design */

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

.home-clients-section .section-header h2 {
  font-size: 2rem;
}

.home-clients-section .client-slide {
  flex: 0 0 150px;

  padding: 0 15px;
}

.home-clients-section .client-logo {
  height: 80px;

  padding: 15px;
}

.home-clients-section .client-logo img {
  max-height: 50px;
}
}

/* Keywords Section Styles */
.keywords-section {
background: linear-gradient(
  90deg,
  rgba(36, 36, 225, 0.03) 35%,
  rgba(11, 205, 240, 0.03) 100%
);
padding: 40px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.keywords-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
}

.keyword-category {
padding: 20px;
}

.keyword-category h4 {
color: white;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
position: relative;
padding-bottom: 10px;
}

.keyword-category h4::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: white;
}

.keyword-category ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.keyword-category ul li {
margin-bottom: 5px;
}

.keyword-category ul li a {
color: #333;
font-size: 14px;
text-decoration: none;
padding: 4px 0;
border-radius: 15px;
display: inline-block;
transition: all 0.3s ease;
border: 1px solid rgba(36, 36, 225, 0.1);
color: white;
}

.keyword-category ul li:not(:last-child) a:after {
content: "|";
margin-left: 5px;
}

/* Responsive Design */
@media (max-width: 992px) {
.keywords-wrapper {
  grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.keywords-wrapper {
  grid-template-columns: 1fr;
}

.keyword-category {
  padding: 15px;
}
}

.keyword-divider {
width: 100%;
height: 1px;
background: white;
margin: 0 20px;
}

/* Custom Content Section Styles */
.home-page-custom-content-section {
padding: 50px 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
margin: 50px 0;
position: relative;
overflow: hidden;
}

.home-page-custom-content-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(
  circle at 50% 50%,
  rgba(36, 36, 225, 0.03) 0%,
  transparent 50%
);
animation: pulse 8s ease-in-out infinite;
}

.home-page-custom-content-section .custom-content-wrapper {
max-width: 1400px;
margin: 0 auto;
height: 500px;
overflow-y: auto;
padding: 40px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(36, 36, 225, 0.1),
  inset 0 -3px 0 rgba(36, 36, 225, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(36, 36, 225, 0.1);
transition: all 0.3s ease;
position: relative;
}

.home-page-custom-content-section .custom-content-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(36, 36, 225, 0.15),
  inset 0 -3px 0 rgba(36, 36, 225, 0.2);
}

/* Gradient Border Effect */
.home-page-custom-content-section .custom-content-wrapper::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background:linear-gradient(45deg, #0000001c );
border-radius: 22px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}

.home-page-custom-content-section .custom-content-wrapper:hover::before {
opacity: 1;
}

/* Custom Scrollbar */
.home-page-custom-content-section .custom-content-wrapper::-webkit-scrollbar {
width: 8px;
}

.home-page-custom-content-section
.custom-content-wrapper::-webkit-scrollbar-track {
background: rgba(36, 36, 225, 0.05);
border-radius: 10px;
}

.home-page-custom-content-section
.custom-content-wrapper::-webkit-scrollbar-thumb {
background: #000;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.8);
}

.home-page-custom-content-section
.custom-content-wrapper::-webkit-scrollbar-thumb:hover {
background: #000;
}

/* Content Styling */
.home-page-custom-content-section .custom-content-wrapper h1,
.home-page-custom-content-section .custom-content-wrapper h2,
.home-page-custom-content-section .custom-content-wrapper h3,
.home-page-custom-content-section .custom-content-wrapper h4 {
color: #000000;
font-weight: 700;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}

.home-page-custom-content-section .custom-content-wrapper h2 {
font-size: 2.5em;
background: linear-gradient(90deg, #000000, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.home-page-custom-content-section .custom-content-wrapper h3 {
font-size: 1.8em;
margin-top: 30px;
}

.home-page-custom-content-section .custom-content-wrapper h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #000000, #000000);
border-radius: 3px;
}

.home-page-custom-content-section .custom-content-wrapper p {
color: #444;
line-height: 1.8;
margin-bottom: 20px;
font-size: 1.1em;
transition: all 0.3s ease;
}

.home-page-custom-content-section .custom-content-wrapper ul,
.home-page-custom-content-section .custom-content-wrapper ol {
margin: 20px 0;
padding-left: 20px;
}

.home-page-custom-content-section .custom-content-wrapper li {
color: #444;
margin-bottom: 12px;
position: relative;
padding-left: 25px;
line-height: 1.6;
}

.home-page-custom-content-section .custom-content-wrapper ul li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
transition: all 0.3s ease;
}

.home-page-custom-content-section .custom-content-wrapper ul li:hover::before {
transform: scale(1.5);
}

.home-page-custom-content-section .custom-content-wrapper ol {
counter-reset: item;
list-style: none;
}

.home-page-custom-content-section .custom-content-wrapper ol li {
counter-increment: item;
}

.home-page-custom-content-section .custom-content-wrapper ol li::before {
content: counter(item);
position: absolute;
left: -5px;
top: 0;
font-weight: 600;
color: #000;
font-size: 0.9em;
}

.home-page-custom-content-section .custom-content-wrapper a {
color: #000;
text-decoration: none;
position: relative;
padding-bottom: 2px;
transition: all 0.3s ease;
}

.home-page-custom-content-section .custom-content-wrapper a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, #000, #000);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}

.home-page-custom-content-section .custom-content-wrapper a:hover {
color: #000;
}

.home-page-custom-content-section .custom-content-wrapper a:hover::after {
transform: scaleX(1);
transform-origin: left;
}

/* Animation */
@keyframes pulse {
0%,
100% {
  transform: scale(1);
  opacity: 0.5;
}
50% {
  transform: scale(1.05);
  opacity: 0.8;
}
}

/* Responsive Design */
@media (max-width: 1440px) {
.home-page-custom-content-section .custom-content-wrapper {
  max-width: 1200px;
  margin: 0 20px;
}
}

@media (max-width: 768px) {
.home-page-custom-content-section .custom-content-wrapper {
  height: 400px;
  padding: 30px;
}

.home-page-custom-content-section .custom-content-wrapper h2 {
  font-size: 2em;
}

.home-page-custom-content-section .custom-content-wrapper h3 {
  font-size: 1.5em;
}
}

.carousel-section {
width: 100%;
padding: 60px 20px;
background: #ffffff;
position: relative;
overflow: hidden;
}

.carousel-section .section-title {
text-align: center;
position: relative;
z-index: 10;
}

.carousel-section .section-title h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.carousel-section .section-title p {
font-size: 1.2rem;
color: #666;
margin-bottom: 20px;
letter-spacing: 1px;
}

.carousel-section .title-decoration {
width: 80px;
height: 4px;
background: #000;
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.carousel-section .carousel-container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
position: relative;
}

.carousel-section .carousel-row {
width: 100%;
overflow: hidden;
margin: 50px 0;
position: relative;
padding: 10px 0;
}

.carousel-section .carousel-track {
display: flex;
width: fit-content;
gap: 30px;
}

.carousel-section .carousel-slide {
width: 300px;
height: 200px;
flex-shrink: 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
transform-style: preserve-3d;
perspective: 1000px;

}

.carousel-section .carousel-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 1;
}

.carousel-section .carousel-slide:hover {
transform: translateY(-15px) rotateY(5deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.carousel-section .carousel-slide:hover::before {
opacity: 1;
}

.carousel-section .carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
filter: brightness(0.95);
position: absolute;
top: 0;
left: 0;
}

.carousel-section .carousel-slide:hover img {
transform: scale(1.15);
filter: brightness(1.05);
}

/* Top row animation (left to right) */
.carousel-section .top-row .carousel-track {
animation: scrollLeft 40s linear infinite;
}

/* Bottom row animation (right to left) */
.carousel-section .bottom-row .carousel-track {
animation: scrollRight 40s linear infinite;
}

@keyframes scrollLeft {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(calc(-300px * 5 - 30px * 5));
}
}

@keyframes scrollRight {
0% {
    transform: translateX(calc(-300px * 5 - 30px * 5));
}
100% {
    transform: translateX(0);
}
}

/* Pause animation on hover */
.carousel-section .carousel-track:hover {
animation-play-state: paused;
}

/* Add decorative elements */
.carousel-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 50%);
opacity: 0.7;
z-index: 0;
}

/* Add gradient overlay for smooth edges */
.carousel-section .carousel-container::before,
.carousel-section .carousel-container::after {
content: '';
position: absolute;
top: 0;
width: 200px;
height: 100%;
z-index: 2;
pointer-events: none;
}

.carousel-section .carousel-container::before {
left: 0;
background: linear-gradient(to right, #ffffff, transparent);
}

.carousel-section .carousel-container::after {
right: 0;
background: linear-gradient(to left, #ffffff, transparent);
}

/* Add floating particles */
.carousel-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: 
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
    radial-gradient(circle at 40% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
    radial-gradient(circle at 60% 20%, rgba(0, 0, 0, 0.05) 0%, transparent 8%),
    radial-gradient(circle at 30% 80%, rgba(0, 0, 0, 0.05) 0%, transparent 8%);
background-size: 100px 100px;
background-position: 0 0, 50px 50px, 100px 100px, 150px 150px, 200px 200px;
animation: floatParticles 20s linear infinite;
z-index: 1;
}

@keyframes floatParticles {
0% {
    background-position: 0 0, 50px 50px, 100px 100px, 150px 150px, 200px 200px;
}
100% {
    background-position: 100px 100px, 150px 150px, 200px 200px, 250px 250px, 300px 300px;
}
}

/* Responsive Design */
@media (max-width: 1600px) {
.carousel-section .carousel-slide {
    width: 250px;
    height: 167px;
}

.carousel-section .section-title h1 {
    font-size: 3rem;
}
}

@media (max-width: 1200px) {
.carousel-section .carousel-slide {
    width: 200px;
    height: 133px;
}

.carousel-section .section-title h1 {
    font-size: 2.5rem;
}

.carousel-section .section-title p {
    font-size: 1rem;
}
}

@media (max-width: 768px) {
.carousel-section .carousel-slide {
    width: 150px;
    height: 100px;
}

.carousel-section .carousel-container {
    padding: 10px;
}

.carousel-section .carousel-row {
    margin: 30px 0;
}

.carousel-section .section-title h1 {
    font-size: 2rem;
}

.carousel-section .section-title p {
    font-size: 0.9rem;
}
} 



/* Enhanced Tabbed Section */
.tabbed-section {
  max-width: 1200px;
  margin: 60px auto;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  display: flex;
  overflow: hidden;
  min-height: 600px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid rgba(0,0,0,0.05);
}

.tabbed-section:hover {
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.tab-list {
  background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
  display: flex;
  flex-direction: column;
  min-width: 280px;
  padding: 40px 0;
  gap: 8px;
  box-shadow: 4px 0 20px rgba(0,0,0,0.1);
  z-index: 2;
  position: relative;
}

.tab-list::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.tab-btn {
  background: none;
  border: none;
  color: #ffffff;
  padding: 20px 32px;
  text-align: left;
  font-size: 1.1rem;
  cursor: pointer;
  border-left: 4px solid transparent;
  border-radius: 0 20px 20px 0;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  position: relative;
  z-index: 1;
  margin: 0 8px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tab-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: white;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.tab-btn:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.tab-btn.active {
  background: white;
  color: black;
  border-left: 4px solid white;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0,123,255,0.3);
  transform: translateX(4px);
}

.tab-btn.active::before {
  width: 100%;
}

.tab-btn i {
  font-size: 1.2rem;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.tab-btn:hover i,
.tab-btn.active i {
  opacity: 1;
}

.tab-content {
  flex: 1;
  padding: 48px 56px;
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.tab-panel {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  transform: translateY(20px);
}

.tab-panel.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  transform: translateY(0);
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInUp {
  from { 
    opacity: 0; 
    transform: translateY(30px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

.tab-img {
  width: 100%;
  max-width: 500px;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  object-fit: cover;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 8px;
  height: 280px;
}

.tab-img:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.tab-info {
  flex: 1;
  min-width: 100%;
  max-width: 600px;
  color: #2c3e50;
}

.tab-info h2 {
  font-size: 2.2rem;
  margin: 0 0 20px 0;
  color: #1a1a1a;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  background: linear-gradient(135deg, #1a1a1a, #007bff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tab-info h3 {
  font-size: 1.4rem;
  margin: 32px 0 16px 0;
  color: #2c3e50;
  font-weight: 600;
  position: relative;
}

.tab-info h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 2px;
}

.tab-info p {
  font-size: 1.1rem;
  color: #5a6c7d;
  margin-bottom: 20px;
  line-height: 1.7;
  font-weight: 400;
}

.tab-info ul, .tab-info ol {
  margin: 0 0 20px 24px;
  color: #5a6c7d;
  font-size: 1.05rem;
  line-height: 1.7;
}

.tab-info ul li, .tab-info ol li {
  margin-bottom: 8px;
  position: relative;
}

.tab-info ul li::before {
  content: '✓';
  position: absolute;
  left: -20px;
  color: #007bff;
  font-weight: bold;
}

.tab-info b {
  color: #1a1a1a;
  font-weight: 600;
}

.tab-info blockquote {
  border-left: 4px solid #007bff;
  margin: 24px 0;
  padding: 16px 24px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  font-style: italic;
  color: #5a6c7d;
  border-radius: 8px;
  position: relative;
}

.tab-info blockquote::before {
  content: '"';
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 2rem;
  color: #007bff;
  opacity: 0.3;
}

.tab-info .highlight {
  background: black;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

/* Mobile Responsive Design */
@media (max-width: 1200px) {
  .tabbed-section {
    max-width: 95vw;
    margin: 40px auto;
    border-radius: 20px;
  }
  
  .tab-content {
    padding: 32px 40px;
  }
  
  .tab-img {
    max-width: 400px;
    height: 240px;
  }
  
  .tab-info h2 {
    font-size: 1.9rem;
  }
}

@media (max-width: 900px) {
  .tabbed-section {
    flex-direction: column !important;
    min-height: auto;
    border-radius: 16px;
    margin: 30px auto;
  }
  
  .tab-list {
    flex-direction: row;
    min-width: 0;
    width: 100%;
    padding: 16px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #007bff #2d2d2d;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(90deg, #1a1a1a 0%, #2d2d2d 100%);
  }
  
  .tab-btn {
    flex: 1 0 auto;
    text-align: center;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 140px;
    white-space: normal;
    font-size: 1rem;
    margin: 0 4px;
    justify-content: center;
  }
  
  .tab-btn.active,
  .tab-btn:hover {
    border-left: none;
    border-bottom: 3px solid black;
    background:white;
    color:black;
    transform: translateY(-2px);
  }
  
  .tab-btn::before {
    display: none;
  }
  
  .tab-content {
    padding: 32px 24px;
  }
  
  .tab-panel {
    gap: 24px;
  }
  
  .tab-img {
    width: 100%;
    max-width: 100%;
    height: 200px;
  }
  
  .tab-info h2 {
    font-size: 1.7rem;
  }
  
  .tab-info h3 {
    font-size: 1.3rem;
  }
  
  .tab-info p {
    font-size: 1rem;
  }
}

/* Custom scrollbar for mobile tab-list */
.tab-list::-webkit-scrollbar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.tab-list::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 3px;
}

.tab-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #0056b3, #004085);
}

@media (max-width: 700px) {
  .tabbed-section {
    margin: 20px auto;
    border-radius: 12px;
  }
  
  .tab-content {
    padding: 24px 16px;
  }
  
  .tab-panel {
    flex-direction: column;
    gap: 20px;
  }
  
  .tab-img {
    width: 100%;
    max-width: 100vw;
    height: 180px;
    border-radius: 12px;
  }
  
  .tab-info h2 {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }
  
  .tab-info h3 {
    font-size: 1.2rem;
    margin: 24px 0 12px 0;
  }
  
  .tab-info p {
    font-size: 0.95rem;
    margin-bottom: 16px;
  }
  
  .tab-info ul, .tab-info ol {
    font-size: 0.95rem;
    margin-bottom: 16px;
  }
  
  .tab-btn {
    padding: 12px 16px;
    min-width: 120px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .tabbed-section {
    margin: 15px auto;
    border-radius: 8px;
  }
  
  .tab-list {
    padding: 12px;
    gap: 6px;
  }
  
  .tab-btn {
    padding: 10px 12px;
    min-width: 100px;
    font-size: 0.85rem;
    border-radius: 8px;
  }
  
  .tab-content {
    padding: 20px 12px;
  }
  
  .tab-img {
    height: 160px;
    border-radius: 8px;
  }
  
  .tab-info h2 {
    font-size: 1.3rem;
  }
  
  .tab-info h3 {
    font-size: 1.1rem;
  }
  
  .tab-info p {
    font-size: 0.9rem;
  }
}

/* Enhanced animations for better UX */
.tab-btn {
  position: relative;
  overflow: hidden;
}

.tab-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.tab-btn:active::after {
  width: 200px;
  height: 200px;
}

/* Loading animation for tab content */
.tab-panel.loading {
  opacity: 0.7;
  pointer-events: none;
}

.tab-panel.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

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

/* Ripple effect for tab buttons */
.tab-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Hover state for desktop */
.tab-btn.hover {
  transform: translateX(6px);
  box-shadow: 0 6px 20px rgba(0,123,255,0.2);
}

/* Focus states for accessibility */
.tab-btn:focus {
  outline: 2px solid black;
  outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
.tab-btn,
.tab-panel,
.tab-img,
.tab-info h2,
.tab-info h3 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced mobile experience */
@media (max-width: 900px) {
  .tab-btn:active {
    transform: scale(0.95);
  }
  
  .tab-list {
    scroll-behavior: smooth;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tab-btn {
    border: 2px solid #ffffff;
  }
  
  .tab-btn.active {
    border: 2px solid #007bff;
  }
  
  .tab-info h2 {
    -webkit-text-fill-color: #000000;
    background: none;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tab-btn,
  .tab-panel,
  .tab-img,
  .tab-info h2,
  .tab-info h3 {
    transition: none;
  }
  
  .tab-panel.active {
    animation: none;
  }
  
  .tab-btn .ripple {
    animation: none;
  }
}


.service-portfolio-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.service-portfolio-section .portfolio-header {
  text-align: center;
  margin-bottom: 60px;
  color: #1a1a1a;
}

.service-portfolio-section .portfolio-header h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  font-weight: 700;
  background: #333;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
  position: relative;
}

.service-portfolio-section .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  margin-bottom: 60px;
}

.service-portfolio-section .project-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  border: 1px solid #f0f0f0;
  position: relative;
  
}

.service-portfolio-section .project-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  border-color: #e0e0e0;
}

.service-portfolio-section .card-image-container {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: #f8f9fa;
}

.service-portfolio-section .website-screenshot {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.service-portfolio-section .website-screenshot img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Auto-scroll effect on hover - from top to bottom */
.service-portfolio-section .project-card:hover .website-screenshot img {
  transform: translateY(calc(-100% + 420px));
  filter: brightness(1.02);
}

.service-portfolio-section .card-content {
  padding: 25px;
  text-align: center;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.service-portfolio-section .view-project-btn {
  background: black;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.service-portfolio-section .view-project-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.service-portfolio-section .view-project-btn:hover::before {
  left: 100%;
}

.service-portfolio-section .view-project-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

/* Enhanced hover effects */
.service-portfolio-section .project-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 20px;
}

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

/* Smooth scroll animation for images - improved */
@keyframes smoothScrollTopToBottom {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(calc(-100% + 420px));
  }
}

.service-portfolio-section .project-card:hover .website-screenshot img {
  animation: smoothScrollTopToBottom 8s ease-in-out infinite;
}

/* Loading animation */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.service-portfolio-section .project-card {
  animation: fadeInUp 0.6s ease-out forwards;
}

.service-portfolio-section .project-card:nth-child(1) { animation-delay: 0.1s; }
.service-portfolio-section .project-card:nth-child(2) { animation-delay: 0.2s; }
.service-portfolio-section .project-card:nth-child(3) { animation-delay: 0.3s; }
.service-portfolio-section .project-card:nth-child(4) { animation-delay: 0.4s; }
.service-portfolio-section .project-card:nth-child(5) { animation-delay: 0.5s; }
.service-portfolio-section .project-card:nth-child(6) { animation-delay: 0.6s; }
.service-portfolio-section .project-card:nth-child(7) { animation-delay: 0.7s; }
.service-portfolio-section .project-card:nth-child(8) { animation-delay: 0.8s; }
.service-portfolio-section .project-card:nth-child(9) { animation-delay: 0.9s; }
.service-portfolio-section .project-card:nth-child(10) { animation-delay: 1.0s; }
.service-portfolio-section .project-card:nth-child(11) { animation-delay: 1.1s; }
.service-portfolio-section .project-card:nth-child(12) { animation-delay: 1.2s; }

/* Responsive Design */
@media (max-width: 1400px) {
  .service-portfolio-section .portfolio-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
  }
}

@media (max-width: 1100px) {
  .service-portfolio-section .portfolio-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
  }
  
  .service-portfolio-section .portfolio-header h1 {
      font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .service-portfolio-section .portfolio-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
  }
  
  .service-portfolio-section .portfolio-header h1 {
      font-size: 2.5rem;
  }
  
  .service-portfolio-section .portfolio-header p {
      font-size: 1.1rem;
  }
  
  .service-portfolio-section .card-image-container {
      height: 320px;
  }
  
  .service-portfolio-section .card-content {
      padding: 20px;
  }
}

@media (max-width: 600px) {
  .service-portfolio-section .portfolio-grid {
      grid-template-columns: 1fr;
      gap: 25px;
  }
  
  .service-portfolio-section .portfolio-header h1 {
      font-size: 2.2rem;
  }
  
  .service-portfolio-section .portfolio-header p {
      font-size: 1rem;
  }
  
  .service-portfolio-section .card-image-container {
      height: 350px;
  }
  
 
}

/* Focus states for accessibility */
.service-portfolio-section .project-card:focus-within {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

.service-portfolio-section .view-project-btn:focus {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
* {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}