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

body {
  font-family: 'Inter', sans-serif;
}

header.main-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff66c4 100%);
  border-bottom: none;
  padding: 6px 50px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

header.main-header:hover {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}

/* Improved logo visibility */
.logo {
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.logo img {
  max-height: 60px; /* Slightly reduced for better proportion */
  transition: all 0.3s ease;
  filter: none; /* Removed drop-shadow for cleaner look */
}

.logo:hover {
  transform: scale(1.03);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.logo:hover img {
  transform: rotate(-2deg);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  padding: 20px 0;
}

.main-nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  position: relative;
  padding: 8px 0;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.main-nav ul li a {
  position: relative;
  text-decoration: none;
  color: #fff; /* Adjust this if needed */
  transition: all 0.3s ease;
}

.main-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #afe8ff;
  transition: width 0.3s ease;
}

.main-nav ul li a:hover {
  color: #afe8ff;
  transform: translateY(-2px);
}

.main-nav ul li a:hover::after {
  width: 100%;
}

/* Active state - underline always visible */
.main-nav ul li a.active {
  color: #afe8ff;
}

.main-nav ul li a.active::after {
  width: 100%;
}


.book-demo-btn {
  padding: 8px 24px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.book-demo-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  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 15px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}


@media (min-width: 769px) {
  .menu-toggle {
    display: none;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
  }
}


/* mobile toggle */
/* Show hamburger only on small screens */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 0.5rem;
    margin-right: -40PX;
  }

  .menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #eeedef;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
  }

  /* X Animation */
  .menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
  }

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

  .menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #361c3d;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: max-height 0.4s ease, opacity 0.3s ease;
  }

  .main-nav.open {
    max-height: 500px; /* adjust as needed */
    opacity: 1;
  }

  .main-nav ul {
    flex-direction: column;
    padding: 1rem;
  }

  .book-demo-btn {
    display: none;
  }

  .logo {
    margin-left: -30px;
  }

  .logo img {
    max-height: 40px; /* Slightly reduced for better proportion */
  }
}





/* FOOTER FOR ALL */
/* COMPACT FOOTER STYLES */
.modern-footer {
  background: linear-gradient(135deg, #2b2a41 0%, #2a1b3d 100%);
  color: white;
  padding: 2.5rem 1.5rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}

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

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo .logo {
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 12px;
  border-radius: 6px;
  display: inline-block;
}

.footer-logo .logo img {
  max-height: 60px;
}

.footer-btn {
  padding: 0.6rem 1.4rem;
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-block;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

.footer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.footer-middle {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.link-column h4 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-weight: 500;
  color: rgb(207, 199, 206);
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.4px;
}

.link-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-column ul li {
  margin-bottom: 0.6rem;
}

.link-column ul li a {
  color: rgba(212, 212, 212, 0.7);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  font-weight: 300;
}

.link-column ul li a:hover {
  color: white;
}

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

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

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  text-decoration: none; /* removes underline */
}


.social-icons a:hover {
  background: linear-gradient(to right, #667eea, #764ba2);
}

.copyright {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.link-column p {
  font-family: 'Inter', sans-serif;
  color: #79798d;
  line-height: 1.5;
  font-size: 0.85rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modern-footer {
    padding: 2rem 1rem 1rem;
  }
  
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.5rem;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  
  .link-column h4 {
    margin-bottom: 0.8rem;
    font-size: 0.98rem;
    letter-spacing: -0.1px;
  }
  
  .link-column ul li {
    margin-bottom: 0.5rem;
    
  }

  .link-column ul li a {
    font-size: 0.85rem;
  }
  
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .social-icons {
    align-self: flex-start;
  }

  .social-icons a {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
}

.link-column p {
  font-size: 0.79rem;
}

.footer-logo .logo {
  margin-left: 10px;
  
}

}

/* Footer caption */
/* Footer Caption Styles */
.footer-caption {
  flex: 1;
  padding: 0 1.5rem;
  text-align: center;
}

.footer-caption p {
  font-size: 1.3rem;
  color: rgba(201, 200, 222, 0.85);
  line-height: 1.5;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  letter-spacing: -0.5px;
  max-width: 500px;
  margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .footer-caption {
    padding: 1rem 0;
    order: 2;
    width: 100%;
  }
  
  .footer-caption p {
    font-size: 0.88rem;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .footer-caption p {
    font-size: 0.85rem;
    line-height: 1.4;
  }
}


/* BACK TOP THE TOP ALL PAGES */
/* Back to Top Button Styles */
#backToTop {
  position: fixed;
  bottom: 30px;
  left: 10px;
  background: #ff66c4;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}

#backToTop:hover {
  background: #555;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}

/* 🔹 Mobile adjustments */
@media (max-width: 600px) {
  #backToTop {
    width: 40px;
    height: 40px;
    font-size: 18px;
    bottom: 20px;
    left: 10px;
  }
}


/* CONTACT STICKY ICON */
/* Contact Widget Styles */
.contact-widget {
  position: fixed;
  bottom: 30px;
  right: 10px;
  z-index: 1000;
}

#contactToggle {
  background: #ff66c4;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-origin: center;
}

#contactToggle:hover {
  background: #ff33b1;
  transform: rotate(12deg) scale(1.1);
  box-shadow: 0 6px 15px rgba(255, 102, 196, 0.4);
}




#contactToggle:active {
  transform: scale(0.9);
}

.contact-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  bottom: 70px;
  right: 0;
  background: #ec00a2;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.contact-menu a {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f0f0f0;
  font-size: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Staggered slide-in effect for menu items */
.contact-menu a {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
}

.contact-menu.show a {
  opacity: 1;
  transform: translateX(0);
}

.contact-menu.show a:nth-child(1) { transition-delay: 0.1s; }
.contact-menu.show a:nth-child(2) { transition-delay: 0.2s; }
.contact-menu.show a:nth-child(3) { transition-delay: 0.3s; }
.contact-menu.show a:nth-child(4) { transition-delay: 0.4s; }

.contact-menu a:hover {
  background: #ff66c4;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(255, 102, 196, 0.3);
}

/* Ripple effect on click */
.contact-menu a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.contact-menu a:active::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

.contact-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Bounce animation when menu appears */
@keyframes bounce {
  0% { transform: translateY(20px); }
  50% { transform: translateY(-8px); }
  70% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

.contact-menu.show {
  animation: bounce 0.6s ease;
}

/* Shake animation for attention */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-8px); }
  30%, 60%, 90% { transform: translateX(8px); }
}

#contactToggle.shake {
  animation: shake 0.8s ease;
}

/* 🔹 Mobile-friendly adjustments */
@media (max-width: 600px) {
  #contactToggle {
    width: 45px;
    height: 45px;
    font-size: 22px;
    
  }

  .contact-menu a {
    font-size: 19px;
    padding: 6px 10px;
  }
  
  /* Reduce animation intensity on mobile */
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  
  .contact-menu a:hover {
    transform: translateY(-2px);
  }

.contact-widget {
 
  bottom: 20px;
  right: 10px;
  
}

}




/* ===PAGE HEADERS FOR ALL PAGES */
/* Page Header Section */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #ff66c4 100%);
  padding: 3rem 1.5rem;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
  z-index: 0;
}

.page-header .container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
}

.breadcrumb a {
  color: white;
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.breadcrumb a:hover {
  color: #afe8ff;
  text-decoration: underline;
}

.breadcrumb span {
  color: rgba(255,255,255,0.7);
  font-family: 'Inter', sans-serif;
}

/* Responsive */
@media (max-width: 768px) {
  .page-header {
    padding: 2rem 1rem;
  }
  
  .page-header h1 {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }
  
  .breadcrumb {
    font-size: 0.85rem;
    gap: 0.4rem;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .breadcrumb {
    font-size: 0.8rem;
  }
}


/* ==========HOME PAGE BEGINS=========== */
/* HERO SECTION */

.modern-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #fcf7f7 100%);
  font-family: 'Poppins', sans-serif;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
}

.modern-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(63,81,181,0.08) 0%, rgba(0,0,0,0) 70%);
  z-index: 0;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  width: 100%;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-text h1 {
  font-size: 3.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;

  line-height: 1.1;
  letter-spacing: -1.9px;
  font-family: 'Poppins', sans-serif;
}

  .gradient-text {
  background: linear-gradient(to right, #23235b, #b40087);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.hero-text .subtitle {
  font-size: 0.95rem;
  margin-bottom: 2rem;
  color: #4a4a6a;
  max-width: 500px;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.8rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

.primary-btn {
  background-color: #263977;
  color: white;
  box-shadow: 0 4px 6px rgba(63, 81, 181, 0.2);
}

.primary-btn:hover {
  background-color: #2c3da5;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(63, 81, 181, 0.3);
}

.secondary-btn {
  background-color: transparent;
  color: #3f51b5;
  border: 1px solid #3f51b5;
}

.secondary-btn:hover {
  background-color: rgba(63, 81, 181, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.trust-badges {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.badge-item {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #443869;
  background: rgba(255, 240, 255, 0.97);
  padding: 0.5rem 0.9rem;
  border-radius: 2rem;
  backdrop-filter: blur(4px);
}

.check-icon {
  width: 16px;
  height: 16px;
  fill: #3f51b5;
  margin-right: 0.5rem;
}

.hero-visual {
  position: relative;
  text-align: center;
  perspective: 1000px;
}

.hero-image {
  max-width: 120%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.hero-visual:hover .hero-image {
  transform: rotateY(-5deg) rotateX(2deg) scale(1.02);
}


/* Responsive */
@media (max-width: 768px) {
  .modern-hero {
    padding: 3rem 1rem;
    min-height: auto;
  }
  
  .hero-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  
  .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .hero-text .subtitle {
    margin-bottom: 1.5rem;
  }
  
  .cta-buttons {
    justify-content: center;
  }
  
  .trust-badges {
    justify-content: center;
  }
  
  .features-section {
    padding: 3rem 1rem;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero-text h1 {
    font-size: 2rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .primary-btn,
  .secondary-btn {
    width: 100%;
  }
  
  .trust-badges {
    gap: 0.8rem;
  }
  
  .badge-item {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

.hero-image {
  max-width: 100%;
}

}


/* FEATURES SECTION */
.features-section {
  padding: 5rem 1.5rem;
  background-color: #1a192a;
  position: relative;
}

.features-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.feature-item {
  background: white;
  padding: 1.8rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* reveal on scroll */
.feature-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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


.feature-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.feature-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.feature-icon {
  font-size: 1.9rem;
  color: #e801be;
  margin-right: 1rem;
  min-width: 2rem;
}

.feature-item h3 {
  font-size: 1.2rem;
  margin: 0;
  font-weight: 400;
  color: #272751;
  font-family: 'Poppins', sans-serif;
}

.feature-item p {
  margin: 0;
  font-size: 0.85rem;
  color: #606274;
  line-height: 1.5;
}

@media (max-width: 768px) {

  .feature-item p {
    font-size: 0.83rem;
  }

  .feature-item h3 {
    font-size: 1.2rem;
  }

}


/* IMAGE SECTION */
.image-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background: linear-gradient(to right, #cdcdf1, #c279af);
    padding-bottom: 0px;
  }

  .image-section img {
    max-width: 62%;
    height: auto;
   
  }

  @media (max-width: 768px) {

      .image-section img {
    max-width: 100%;

  }

  .image-section {
    padding-top: 60px;
  }

  }

  /* CLEAN DASHBOARD RICH TOOLS SECTION */
  
.dashboard-highlight {
 background: radial-gradient(circle at center, #f6f7ff 0%, #f7d8ee 100%);

  padding: 5rem 1.5rem;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  border-top: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

.dashboard-highlight::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
 
  z-index: 0;
}

.dashboard-highlight .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.dashboard-highlight h2 {
  font-size: 2rem;
  color: #404064;
  margin-bottom: 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin: 0 auto 15px;
}

.dashboard-highlight p {
  font-size: 0.95rem;
  color: #6f6f93;
  line-height: 1.7;
  margin: 0 auto 2rem;
  max-width: 700px;
}

/* BUTTON STYLES */
.highlight-button-wrapper {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  margin-top: 1.5rem;
  width: 100%;
}

.highlight-btn {
  display: inline-flex; /* Changed to inline-flex for better centering */
  padding: 0.85rem 2.5rem;
  background: linear-gradient(to right, #23235b, #b40087);
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  letter-spacing: 0.5px;
  text-align: center; /* Ensures text stays centered */
  margin-top: -20px;
}

.highlight-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
  background: linear-gradient(135deg, #ff7b7b 0%, #ff5757 100%);
}


/* Animation Effects */
.dashboard-highlight {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-highlight.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-highlight {
    padding: 3.5rem 1rem;
  }
  
  .dashboard-highlight h2 {
    font-size: 1.5rem;
    margin-bottom: 1.3rem;
  }
  
  .dashboard-highlight p {
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: -0.5rem;
  }
  
  .highlight-btn {
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .dashboard-highlight h2 {
    font-size: 1.3rem;
  }
  
  .dashboard-highlight p {
    font-size: 0.85rem;
  }
  
  .highlight-btn {
    padding: 0.7rem 1.8rem;
    font-size: 0.85rem;
    
  }
}


/* 3 MODULES SECTION */
/* Container and Section */
#showcase-management {
  padding: 40px 20px;
  background: linear-gradient(to bottom, #3c273b, #202639);
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

#showcase-management .container {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Section Header */
#showcase-management .section-header {
  text-align: center;
  margin-bottom: 40px;
}

#showcase-management .section-header h2 {
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
  color: #ded7f4;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.6px;
  text-align: center;

}

#showcase-management .section-header p {
  font-size: 1.2rem;
  color: #e6e6e6;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  font-size: 0.93rem;
  font-family: 'Inter', sans-serif;
  text-align: center;
}

/* Desktop layout: 2 columns */
#showcase-management .columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;    /* ensure equal-height rows */
  justify-items: stretch;
}

/* If the last item is alone on its row (e.g. 3rd card),
   place it in the RIGHT column (prevents blank on the right).
   Do NOT apply this when it's the only card (single-item layout). */
#showcase-management .column:nth-child(odd):last-child:not(:first-child) {
  grid-column: 2 / 3;
  justify-self: stretch;
}

/* Each card */
#showcase-management .column {
  background-color: #fff;
  padding: 25px 20px 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}


/* Hidden by default card */
#showcase-management .column {
  background-color: #fff;
  padding: 25px 20px 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  
  opacity: 0;                  /* start invisible */
  transform: translateY(30px); /* start slightly below */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Initial hidden state */
#showcase-management .column {
  opacity: 0;
  transform: scale(0.8); /* smaller to start */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Revealed zoom effect */
#showcase-management .column.reveal {
  opacity: 1;
  transform: scale(1);
}


/* Images */
#showcase-management .column-image {
  max-width: 1940px;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 25px;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
 
}

#showcase-management .column-image:hover {
  transform: scale(1.05);
}


/* Headings & text */
#showcase-management .column h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #ec44ab;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.6px;
}

#showcase-management .column p {
  color: #68707c;
  margin-bottom: 20px;
  font-size: 0.89rem;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
  margin-top: -10px;
}

/* Lists */
#showcase-management .column ul {
  color: #6e6b81;
  line-height: 1.6;
  padding-left: 20px;
  text-align: left;
  margin: 0;
  list-style-type: disc;
  font-size: 0.8rem;
  width: 100%;
  max-width: 320px;
  font-family: 'Inter', sans-serif;
}

/* Mobile: stack into single column */
@media (max-width: 768px) {
  #showcase-management .columns {
    grid-template-columns: 1fr;
  }

  /* Remove the special right-column rule on mobile */
  #showcase-management .column:nth-child(odd):last-child:not(:first-child) {
    grid-column: auto;
    justify-self: stretch;
  }

#showcase-management .section-header h2 {
  font-size: 1.5rem;

}

#showcase-management .section-header p {

  font-size: 0.85rem;
  
}

}


/* FEATURES SECTION */

/* Section (outer) */
.two-column-section {
  background: linear-gradient(135deg, #f6f7ff 0%, #f7d8ee 100%);
  padding: 80px 0px;
  position: relative;
  overflow: hidden;
}

/* Animated background elements */
.two-column-section::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  z-index: 0;
}

.two-column-section::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(198, 25, 153, 0.05);
  border-radius: 50%;
  z-index: 0;
}

/* Inner container with different color from section */
.inner-container {
  max-width: 1300px;
  margin: 0 auto;
  background: #f9f9ff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
  position: relative;
  z-index: 1;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.8s 0.2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

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

/* Columns layout */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Left image column */
.image-column {
  background-image: url('../images/office.jpg'); /* change path as needed */
  background-size: cover;
  background-position: center;
  min-height: 420px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.08);
}

.image-column:hover {
  transform: perspective(1000px) rotateY(0deg) scale(1.02);
  box-shadow: 16px 16px 32px rgba(0, 0, 0, 0.12);
}

/* Animated overlay for image */
.image-column::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.12));
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.image-column:hover::before {
  opacity: 0.2;
}

/* Floating elements inside image */
.image-column::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  pointer-events: none;
  transition: all 0.5s ease;
}

.image-column:hover::after {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Right content column */
.content-column { 
  padding: 10px 12px;
  position: relative;
}

.subheader {
  color: #c51599;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  position: relative;
}

.subheader::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #c51599, #f7d8ee);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.content-column:hover .subheader::after {
  width: 60px;
}

.content-column h2 {
  margin: 10px 0 20px;
  font-size: 2.1rem;
  color: #4d4572;
  line-height: 1.2;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: -1px;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.lead {
  color: #616174;
  font-size: 0.87rem;
  margin-bottom: 28px;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  position: relative;
}

/* Stats */
.stats {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.stat {
  position: relative;
  padding-left: 20px;

  /* Hidden by default for scroll animation */
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease-out;
}

/* Reveal state */
.stat.reveal {
  opacity: 1;
  transform: translateX(0);
}


.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  height: 40px;
  width: 4px;
  background: linear-gradient(to bottom, #b62596, #263977);
  border-radius: 2px;
}

.stat h3 {
  margin: 0;
  font-size: 1.7rem;
  color: #b62596;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.5px;
  font-weight: 400;
  background: linear-gradient(to right, #b62596, #263977);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.stat p {
  margin: 6px 0 0;
  color: #343471;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s ease;
  font-family: 'Poppins', sans-serif;
  margin-top: -1px;
  letter-spacing: -0.2px;
}


.stat:hover p {
  color: #413a5c;
}

/* CTA */
.highlight-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #263977, #3a4fa0);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(38, 57, 119, 0.15);
  border: none;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.5px;
}

.highlight-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: 0.5s;
}

.highlight-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(38, 57, 119, 0.25);
}

.highlight-btn:hover::before {
  left: 100%;
}

.highlight-btn i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.highlight-btn:hover i {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 900px) {
  .columns { 
    grid-template-columns: 1fr; 
    gap: 30px;
  }
  
  .image-column { 
    min-height: 280px;
    order: -1;
    transform: none;
    margin-bottom: -20px;
  }
  
  .image-column:hover {
    transform: none;
  }
  
  .stats { 
    gap: 20px;
    justify-content: space-between;
  }
  
  .inner-container {
    padding: 30px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 0px;
  }

.subheader {
  margin-top: -40px;
  font-size: 0.85rem;
}

.content-column h2 {
  margin: 10px 0 20px;
  font-size: 1.5rem;
  margin-top: -4px;
}

.lead {

  font-size: 0.85rem;
}

.stat h3 {
  font-size: 1.5rem;
}

.two-column-section {

  padding: 80px 20px;

}

.stat p {
  font-size: 0.8rem;

}

}


/* Additional floating elements */
.floating-element {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(20px);
  z-index: 0;
}

.floating-element:nth-child(1) {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 5%;
  animation: float 8s ease-in-out infinite;
}

.floating-element:nth-child(2) {
  width: 150px;
  height: 150px;
  bottom: 10%;
  right: 5%;
  animation: float 10s ease-in-out infinite reverse;
}

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


/* DEEP FINANCIAL INSIGHTS */

#daily-performance.section-daily-performance {
  display: flex;
  gap: 40px;
  padding: 90px 20px;
  align-items: center;
  background-color: #251d38;
  position: relative;
  overflow: hidden;
}

/* Animated gradient background overlay */
#daily-performance.section-daily-performance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(98, 0, 234, 0.08) 0%, 
    rgba(224, 44, 191, 0.05) 50%, 
    rgba(0, 212, 255, 0.03) 100%);
  z-index: 0;
  animation: gradientShift 12s ease infinite alternate;
  background-size: 200% 200%;
}

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

/* Floating particles */
#daily-performance.section-daily-performance::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(224, 44, 191, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(98, 0, 234, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  animation: particleMove 60s linear infinite;
}

@keyframes particleMove {
  from { background-position: 0 0; }
  to { background-position: 100px 100px; }
}

.container-daily-columns {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.daily-image-column {
  flex: 1;
  min-height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  box-shadow: 
    15px 15px 30px rgba(0, 0, 0, 0.3),
    -5px -5px 15px rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.daily-image-column:hover {
  transform: perspective(1000px) rotateY(0deg) scale(1.02);
  box-shadow: 
    20px 20px 40px rgba(0, 0, 0, 0.4),
    -8px -8px 20px rgba(255, 255, 255, 0.08);
}

.daily-image-column img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  max-height: 400px;
  transition: transform 0.6s ease;
}

.daily-image-column:hover img {
  transform: scale(1.03);
}

/* Dashboard UI overlay effect */
.daily-image-column::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(135deg, rgba(98, 0, 234, 0.1) 0%, rgba(224, 44, 191, 0.05) 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="10" y="15" width="80" height="10" rx="2" fill="rgba(255,255,255,0.1)"/><rect x="10" y="35" width="60" height="10" rx="2" fill="rgba(255,255,255,0.08)"/><rect x="10" y="55" width="40" height="10" rx="2" fill="rgba(255,255,255,0.06)"/><rect x="10" y="75" width="70" height="10" rx="2" fill="rgba(255,255,255,0.04)"/></svg>');
  background-size: cover, 100px 100px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.daily-content-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  transform: translateX(20px);
  opacity: 0;
  animation: slideInFade 0.8s 0.3s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideInFade {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.daily-subheader {
  color: #e02cbf;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1.2px;
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}

.daily-subheader::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #e02cbf, #6200ea);
  transition: width 0.3s ease;
}

.daily-content-column:hover .daily-subheader::after {
  width: 60px;
}

.daily-header {
  font-size: 1.7rem;
  margin-bottom: 1rem;
  color: #d6d5f3;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.7px;
  font-weight: 500;
  margin-top: -5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.daily-description {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  color: #b3b8cc;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
  position: relative;
}

/* Enhanced list items */
.daily-performance-points {
  list-style: none;
  padding-left: 0;
  color: #b1b0ca;
  font-size: 0.85rem;
}

.daily-performance-points li {
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  color: #b1b0ca;
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.daily-performance-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(to bottom, #e02cbf, #6200ea);
  transition: width 0.3s ease;
}

.daily-performance-points li:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(5px);
  color: #d6d5f3;
}

.daily-performance-points li:hover::before {
  width: 5px;
}

.daily-performance-points li i {
  color: #e02cbf;
  margin-right: 8px;
  min-width: 18px;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.daily-performance-points li:hover i {
  transform: scale(1.2);
}

/* Responsive - stack columns on small screens */
@media (max-width: 768px) {
  #daily-performance.section-daily-performance,
  .container-daily-columns {
    flex-direction: column;
  }

  .daily-image-column {
    min-height: 200px;
    margin-bottom: 20px;
    transform: none !important;
  }

  .daily-content-column {
    padding: 0;
    transform: translateY(20px) !important;
    animation: mobileSlideInFade 0.8s 0.3s forwards cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes mobileSlideInFade {
    to {
      transform: translateY(0) !important;
      opacity: 1;
    }
  }

  #daily-performance.section-daily-performance {
    padding: 40px 20px;
  }

   .daily-image-column {
    min-height: 200px;
    margin-bottom: 20px;
  }

  .daily-content-column {
    padding: 0;
  }

  .daily-subheader {
    font-size: 0.8rem;
  }

  .daily-header {
    font-size: 1.4rem;
    margin-top: -10px;
  }

  .daily-description {
    font-size: 0.86rem;
    line-height: 1.4;
  }

  .daily-performance-points {
    font-size: 0.8rem;
  }

  #daily-performance.section-daily-performance {
    padding: 40px 20px;
  }

}


/* RECEIPTS AND INVOICES SECTION */

/* INVOICING & RECEIPT SECTION - MATCHING STYLE */
.section-invoicing-receipt {
  background: linear-gradient(135deg, #f9f9ff 0%, #f7c9e7 100%);
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

/* Animated background elements */
.section-invoicing-receipt::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: rgba(198, 25, 153, 0.05);
  border-radius: 50%;
  z-index: 0;
  animation: float 15s ease-in-out infinite alternate;
}

.section-invoicing-receipt::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: rgba(38, 57, 119, 0.05);
  border-radius: 50%;
  z-index: 0;
  animation: float 12s ease-in-out infinite alternate-reverse;
}

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

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  position: relative;
  z-index: 1;

}

.section-subheader {
  display: inline-block;
  color: #b62596;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: rgba(182, 37, 150, 0.1);
  border-radius: 50px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

.section-header-title {
  font-size: 1.8rem;
  color: #413a5c;
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  position: relative;
  display: inline-block;
  letter-spacing: -0.7px;
  
}

.section-header-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #b62596, #263977);
  border-radius: 2px;
}

.invoicing-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Initial hidden state */
.invoicing-column {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  text-align: center;

  /* animation start state */
  opacity: 0;
  transform: scale(0.85);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease;
}

/* Revealed zoom state */
.invoicing-column.reveal {
  opacity: 1;
  transform: scale(1);
}


.invoicing-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  border-color: rgba(182, 37, 150, 0.1);
}

.invoicing-image {
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

.invoicing-column:hover .invoicing-image {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.invoicing-column-header {
  font-size: 1.3rem;
  color: #e33ca6;
  margin: 0 0 12px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.6px;
}

.invoicing-column-description {
  color: #72728c;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
  font-family: 'Inter', sans-serif;
  padding-left: 70px;
  padding-right: 70px ;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 30px;
    margin-top: 40px;
  }
  
  .section-header-title {
    font-size: 1.5rem;
  }
  
  .invoicing-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  max-width: 400px;
  }
  
  .invoicing-column {
    padding: 25px;
  }

.invoicing-image {
  
  max-width: 620px;
}

.section-invoicing-receipt {
 
  padding: 80px 10px;
 
}

.invoicing-column {
  padding: 0px;
  padding-bottom: 30px;

}

.invoicing-column-header {
  font-size: 1.19rem;
}

.invoicing-column-description {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 0.83rem;
  line-height: 1.6;
}

}


/* WEBSITE + BERTSUITE OFFER */
/* Outer Section */
#bertsuiteOfferSection {
  background: linear-gradient(135deg, #f6f7ff 0%, #f7d8ee 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

#bertsuiteOfferSection::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  z-index: 0;
}

#bertsuiteOfferSection::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(198, 25, 153, 0.05);
  border-radius: 50%;
  z-index: 0;
}

/* Inner Container */
#bertsuiteOfferContainer {
  max-width: 1300px;
  margin: 0 auto;
  background: #f9f9ff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
  position: relative;
  z-index: 1;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.8s 0.2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

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

/* Grid Layout */
#bertsuiteOfferGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Left Image Column */
#bertsuiteOfferImage {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.08);
}

#bertsuiteOfferImage img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

#bertsuiteOfferImage:hover {
  transform: perspective(1000px) rotateY(0deg) scale(1.02);
  box-shadow: 16px 16px 32px rgba(0, 0, 0, 0.12);
}

/* Overlay Effect */
#bertsuiteOfferImage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.12));
  pointer-events: none;
  transition: opacity 0.5s ease;
  border-radius: 12px;
}

#bertsuiteOfferImage:hover::before {
  opacity: 0.2;
}

/* Floating Frame */
#bertsuiteOfferImage::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  pointer-events: none;
  transition: all 0.5s ease;
}

#bertsuiteOfferImage:hover::after {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Right Content */
#bertsuiteOfferContent {
  padding: 10px 12px;
  position: relative;
}

#bertsuiteOfferSubheader {
  color: #c51599;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.98rem;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  position: relative;
}

#bertsuiteOfferSubheader::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #c51599, #f7d8ee);
  border-radius: 3px;
  transition: width 0.3s ease;
}

#bertsuiteOfferContent:hover #bertsuiteOfferSubheader::after {
  width: 60px;
}

#bertsuiteOfferMainHeader {
  margin: 10px 0 20px;
  font-size: 1.8rem;
  color: #4d4572;
  line-height: 1.2;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: -1px;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

#bertsuiteOfferDescription {
  color: #616174;
  font-size: 0.9rem;
  margin-bottom: 28px;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

/* Bullet Points */
#bertsuiteOfferPoints {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

#bertsuiteOfferPoints li {
  margin-bottom: 0.8rem;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  color: #343471;
  font-family: 'Poppins', sans-serif;
}

#bertsuiteOfferPoints li i {
  color: #28a745;
  margin-right: 10px;
  font-size: 1rem;
}

/* Button Styling */
#bertsuiteOfferButton {
  background: #1f3b6d;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 10px rgba(197, 21, 153, 0.2);
}

#bertsuiteOfferButton:hover {
  background: #a50f7e;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #bertsuiteOfferGrid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: left;
  }

  #bertsuiteOfferImage {
    transform: none;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.06);
  }

  #bertsuiteOfferImage::after {
    display: none;
  }

  #bertsuiteOfferContent {
    padding: 0;
  }

  #bertsuiteOfferSubheader {
    font-size: 0.85rem;
    letter-spacing: 1px;
  }

  #bertsuiteOfferMainHeader {
    font-size: 1.4rem;
    line-height: 1.3;
    margin-top: -6px;
  }

  #bertsuiteOfferDescription {
    font-size: 0.82rem;
    margin-bottom: 20px;
  }

  #bertsuiteOfferPoints li {
    font-size: 0.78rem;
  }

  #bertsuiteOfferButton {
    padding: 10px 20px;
    font-size: 0.85rem;
  }

  #bertsuiteOfferSection {
    padding-left: 10px;
    padding-right: 10px;
  }

  #bertsuiteOfferContainer {
    padding-left: 20px;
    padding-right: 20px;
  }
}



/* CTA LAST SECTION - ENHANCED WITH BACKGROUND EFFECTS */
#contact-cta {
  text-align: center;
  margin-top: 0px;
  padding: 60px 20px;
  background: linear-gradient(135deg, #1e112f 0%, #2a1a42 100%);
  position: relative;
  overflow: hidden;
}

/* Animated gradient mesh background */
#contact-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 75% 25%, rgba(224, 44, 191, 0.08) 0%, transparent 25%),
    radial-gradient(circle at 25% 75%, rgba(98, 0, 234, 0.08) 0%, transparent 25%);
  z-index: 0;
  animation: gradientPulse 15s ease infinite alternate;
}

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

/* Floating elements effect */
#contact-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e02cbf' opacity='0.08' d='M45,-78C58.3,-70.3,69,-58.2,76.3,-44.1C83.6,-30,87.5,-13.9,86.5,1.6C85.6,17.1,79.8,34.2,68.8,47.1C57.8,60,41.6,68.7,24.4,75.8C7.2,82.8,-11,88.2,-26.8,83.9C-42.6,79.6,-56,65.6,-66.2,50.2C-76.4,34.8,-83.4,17.9,-83.8,0.4C-84.2,-17.2,-78,-34.4,-67.2,-48.4C-56.4,-62.4,-41,-73.2,-25.8,-80.1C-10.6,-87,4.4,-90.1,19.2,-86.6C34,-83.1,48.6,-73.1,45,-78Z' transform='translate(100 100)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236200ea' opacity='0.08' d='M42.7,-75.1C55.2,-68.9,65.1,-57.4,73.1,-44.3C81.1,-31.2,87.2,-16.6,87.1,-0.1C87,16.5,80.8,32.9,70.4,45.6C60,58.2,45.5,67,30.4,73.3C15.3,79.6,-0.5,83.3,-14.3,79.3C-28.1,75.3,-39.9,63.5,-51.3,50.7C-62.7,37.9,-73.7,24,-77.6,8.1C-81.5,-7.8,-78.3,-25.7,-68.9,-39.7C-59.5,-53.7,-44,-63.8,-28.5,-68.9C-13,-74,2.5,-74.1,17.8,-70.8C33.1,-67.5,48.1,-60.8,42.7,-75.1Z' transform='translate(100 100)'/%3E%3C/svg%3E");
  background-size: 300px 300px, 250px 250px;
  background-position: 10% 20%, 90% 80%;
  background-repeat: no-repeat;
  z-index: 0;
  animation: floatBackground 25s linear infinite;
}

@keyframes floatBackground {
  0% { background-position: 10% 20%, 90% 80%; }
  50% { background-position: 15% 25%, 85% 75%; }
  100% { background-position: 10% 20%, 90% 80%; }
}

/* Content container - maintains all your original font settings */
#contact-cta h2 {
  font-size: 2rem;
  margin-bottom: 12px;
  color: #ded6f3;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: -0.7px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: 40px;
}

#contact-cta p {
  font-size: 1rem;
  margin-bottom: 24px;
  color: #cfcbe1;
  font-family: 'Inter', sans-serif;
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Enhanced button with your original font settings */
#contact-cta .cta-button {
  background-color: #e02cbf;
  color: white;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(224, 44, 191, 0.4);
  transition: all 0.3s ease;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 1;
  border: none;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

#contact-cta .cta-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-cta .cta-button:hover,
#contact-cta .cta-button:focus {
  background-color: #bf2395;
  box-shadow: 0 6px 18px rgba(191, 35, 149, 0.6);
  outline: none;
  transform: translateY(-2px);
}

#contact-cta .cta-button:hover::before {
  left: 100%;
}

/* Responsive - maintains all font sizes */
@media (max-width: 768px) {
  #contact-cta {
    padding: 50px 20px;
  }
  
  #contact-cta p {
    font-size: 0.85rem;
  }

#contact-cta h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}

}



/* ===========CONTACT US PAGE STARTS */

/* Side-Icon Contact Us Section */
.contact-us {
  background: linear-gradient(135deg, #ffffff 0%, #f8f5ff 100%);
  padding: 1.5rem 1rem;
  font-family: 'Inter', sans-serif;
}

.contact-container {
  max-width: 1000px; /* Slightly narrower for better side-by-side layout */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Animated Contact Boxes - Slower Version */
.contact-box {
  background: white;
  padding: 1rem;
  border-radius: 0.6rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1); /* Slower and bouncier */
  border: 1px solid rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  opacity: 0;
  transform: translateX(-80px) scale(0.9); /* Bigger starting offset */
  filter: blur(2px); /* Slight initial blur for smoother appearance */
}

/* Staggered animations with longer delays */
.contact-box:nth-child(1) {
  transition-delay: 0.3s;
}
.contact-box:nth-child(2) {
  transition-delay: 0.6s;
}
.contact-box:nth-child(3) {
  transition-delay: 0.9s;
}

.contact-box.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.contact-box:hover {
  transform: translateX(5px) scale(1.03) !important; /* Slight right movement on hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.contact-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

.contact-box .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
}

.contact-content {
  flex: 1;
}

.contact-box h3 {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: #2a2a4a;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

.contact-box p {
  font-size: 0.82rem;
  color: #5a5a7a;
  margin: 0;
  line-height: 1.3;
}

/* Mobile Optimized */
@media (max-width: 768px) {
  .contact-us {
    padding: 1.2rem 0.8rem;
  }
  
  .contact-container {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  
  .contact-box {
    padding: 0.8rem;
    gap: 0.8rem;
  }
  
  .contact-box .icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  
  .contact-box h3 {
    font-size: 0.9rem;
  }
  
  .contact-box p {
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  .contact-box {
    padding: 0.7rem;
    gap: 0.7rem;
  }
  
  .contact-box .icon {
    width: 34px;
    height: 34px;
  }
}


/* Form & FAQS SECTION */

.form-faq-section {
  background: #f9f9ff;
  padding: 2rem 1rem;
  font-family: 'Inter', sans-serif;
}

.form-faq-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Dark Mode Contact Form Styles */
.contact-form {
  background: #1a1a2e; /* Dark navy background */
  padding: 1.8rem 2.5rem;
  border-radius: 0.6rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid #2a2a4a;
}

.contact-form h2 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: #e0e0ff;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: -0.3px;
}

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

.form-group label {
  display: block;
  font-size: 0.86rem;
  margin-bottom: 0.4rem;
  color: #b8b8d0;
  font-weight: 400;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.7rem;
  background: #252545;
  border: 1px solid #3a3a5a;
  border-radius: 0.4rem;
  font-size: 0.86rem;
  color: #e0e0ff;
  font-family: 'Inter', sans-serif;
  transition: all 0.25s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #6a6a8a;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  background: #2d2d5d;
}

.form-group textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-form button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  margin-top: 0.6rem;
  letter-spacing: 0.5px;
}

.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #6d83ee 0%, #7f52b0 100%);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contact-form {
    padding: 1.5rem 1.8rem;
  }
  
  .contact-form h2 {
    font-size: 1.3rem;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 0.65rem;
  }
}

@media (max-width: 480px) {
  .contact-form {
    padding: 1.3rem 1.2rem;
  }
  
  .contact-form button {
    padding: 0.75rem;
  }
}

/* FAQ Section Styles */
.faq-section {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.faq-section h2 {
  font-size: 1.3rem;
  margin-bottom: 1.4rem;
  color: #2a2a4a;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

/* FAQ Animation Styles */
.faq {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f8;
  transition: all 0.3s ease;
  transform-origin: left center;
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

.faq:hover {
  transform: scale(1.02) translateY(0) !important;
  border-left-color: #667eea;
  background-color: rgba(102, 126, 234, 0.03);
  padding-left: 0.75rem;
}

/* Stagger delays for each FAQ item */
.faq:nth-child(1).visible { transition-delay: 0.1s; }
.faq:nth-child(2).visible { transition-delay: 0.2s; }
.faq:nth-child(3).visible { transition-delay: 0.3s; }
.faq:nth-child(4).visible { transition-delay: 0.4s; }
.faq:nth-child(5).visible { transition-delay: 0.5s; }
.faq:nth-child(6).visible { transition-delay: 0.6s; }
.faq:nth-child(7).visible { transition-delay: 0.7s; }
.faq:nth-child(8).visible { transition-delay: 0.8s; }

.faq:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.faq h4 {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #3a3a5a;
  font-weight: 500;
}

.faq p {
  font-size: 0.82rem;
  color: #5a5a7a;
  line-height: 1.5;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-faq-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .contact-form,
  .faq-section {
    padding: 1.2rem;
  }
  
  .contact-form h2,
  .faq-section h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
  
  .form-group {
    margin-bottom: 0.8rem;
  }
  
  .form-group label {
    font-size: 0.82rem;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 0.5rem;
    font-size: 0.82rem;
  }
  
  .faq h4 {
    font-size: 0.88rem;
  }
  
  .faq p {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .form-faq-section {
    padding: 1.5rem 0.8rem;
  }
  
  .contact-form button {
    padding: 0.6rem;
  }
}


/* =================FEATURES PAGE START=============== */

/* WELCOME SECTION */
.bsfw-section {
  padding: 60px 20px;
  background: #f9f9fb;
  font-family: 'Inter', sans-serif;
}

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

.bsfw-grid {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.bsfw-image-col {
  flex: 1 1 45%;
  position: relative;
}

.bsfw-image {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  object-fit: cover;
}

/* Small box below image */
.bsfw-simplicity-box {
  margin-top: 16px;
  display: inline-flex;
  flex-direction: column;     /* stack icon above text */
  align-items: center;        /* center horizontally */
  background: #ea47ab;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 10px;
  padding: 12px 20px;         /* a bit more vertical padding */
  box-shadow: 0 4px 10px rgba(106, 13, 173, 0.4);
  width: fit-content;         /* shrink to content width */
  font-family: 'Poppins', sans-serif;
  margin-top: -70px;
}

/* reveal part */
/* Initial state: hidden and slightly below */
.bsfw-simplicity-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active state: visible and in place */
.bsfw-simplicity-box.visible {
  opacity: 1;
  transform: translateY(0);
}

.bsfw-simplicity-icon {
  margin-right: 0;            /* remove right margin */
  margin-bottom: 6px;         /* add bottom margin to separate from text */
  font-size: 3rem;          /* slightly bigger icon */
}

.bsfw-simplicity-box i {
  font-size: 3rem;
}

/* Content column */
.bsfw-content-col {
  flex: 1 1 50%;
  color: #3a3a59;
}

.bsfw-subheader {
  text-transform: uppercase;
  color: #ea47ab;
  font-weight: 500;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.bsfw-header {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 20px;
  color: #504d6d;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.9px;
  line-height: 1.2;
}

.bsfw-description {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 550px;
  color: #6d6d7b;
  font-family: 'Inter', sans-serif;
}

.bsfw-advantages-list {
  list-style: none; /* removes default bullets */
  padding-left: 0;  /* removes left padding */
  font-size: 0.88rem;
  color: #5f5f6d;
  max-width: 600px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  margin-top: -10px;
  font-weight: 300;
}

.bsfw-advantages-list li {
  margin-bottom: 9px;
}

.bsfw-advantages-list li i {
  color: #e743ab; /* pink accent */
  min-width: 20px;
  font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .bsfw-grid {
    flex-direction: column;
  }
  
  .bsfw-image-col,
  .bsfw-content-col {
    flex: 1 1 100%;
  }

  .bsfw-subheader {
    font-size: 0.9rem;
  }
  
  .bsfw-header {
    font-size: 1.6rem;
  }

  .bsfw-advantages-list {
    font-size: 0.84rem;
  }

  .bsfw-advantages-list li {
    margin-bottom: 9px;
  }

  .bsfw-advantages-list li i {
    font-size: 1rem;
  }

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

.bsfw-simplicity-box {
  font-size: 0.8rem;
}

.bsfw-simplicity-box i {
  font-size: 2rem;
}


}


/* MODULE FULL FEATURES */
/* ====== BERTSUITE MODULES (bert-) ====== */
.bert-modules-section {
  background-color: #251d38;
  padding: 90px 20px;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* gradient overlay */
.bert-modules-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(98, 0, 234, 0.08) 0%,
    rgba(224, 44, 191, 0.05) 50%,
    rgba(0, 212, 255, 0.03) 100%);
  z-index: 0;
  animation: bertGradientShift 12s ease infinite alternate;
  background-size: 200% 200%;
}

/* floating particle overlay */
.bert-modules-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(224,44,191,0.10) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(98,0,234,0.10) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  animation: bertParticleMove 60s linear infinite;
}

/* keyframes */
@keyframes bertGradientShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes bertParticleMove {
  from { background-position: 0 0; }
  to   { background-position: 100px 100px; }
}

/* main container */
.bert-modules-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}

/* headings */
.bert-modules-subheader {
  color: #e02cbf;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1.2px;
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}
.bert-modules-subheader::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #e02cbf, #6200ea);
  transition: width .25s ease;
}

.bert-modules-header {
  font-size: 1.7rem;
  margin-top: 6px;
  margin-bottom: 24px;
  color: #d6d5f3;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -0.7px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* grid */
.bert-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 36px;
  align-items: start;
}

/* module card */
.bert-module-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 22px;
  text-align: left;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

.bert-module-box:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(224,44,191,0.22);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}

/* icon container and icon styling */
.bert-module-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 12px;
  border: 2px dotted #e02cbf;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e460cc;
  font-size: 1.8rem;
  transition: transform 0.6s ease, color 0.3s ease, border-color 0.3s ease;
  user-select: none;
  cursor: default;
}

.bert-module-box:hover .bert-module-icon {
  transform: rotate(360deg) scale(1.1);
  color: #e7d6ff;
  border-color: #6200ea;
}

/* title, description */
.bert-module-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #d6d5f3;
  margin-bottom: 8px;
  line-height: 1.1;
  font-family: 'Poppins', sans-serif;
}

.bert-module-description {
  font-size: 0.88rem;
  color: #b3b8cc;
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

/* points */
.bert-module-points {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: auto; /* push points to bottom if card grows */
  font-size: 0.85rem;
  color: #b1b0ca;
}

.bert-module-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  transition: background .22s ease, transform .22s ease, color .22s ease;
  position: relative;
}

.bert-module-points li:hover {
  background: rgba(255,255,255,0.04);
  transform: translateX(4px);
  color: #d6d5f3;
}

.bert-module-points li i {
  color: #e02cbf;
  min-width: 16px;
  font-size: 0.95rem;
  transition: transform .22s ease;
}

.bert-module-points li:hover i {
  transform: scale(1.15);
}

/* responsive tweaks */
@media (max-width: 768px) {
  .bert-modules-section {
    padding: 48px 16px;
   }

  .bert-modules-header { 
    font-size: 1.4rem; 
    margin-bottom: 18px;
   }

  .bert-modules-subheader { 
    font-size: 0.8rem;
   }

  .bert-module-box { 
    padding: 16px; 
    min-height: auto;
   }

  .bert-module-title { 
    font-size: 1.03rem; }

  .bert-module-description { 
    font-size: 0.86rem;
    margin-bottom: 10px;
   }

  .bert-module-points { 
    font-size: 0.82rem;
   }

  .bert-module-points li { 
    margin-bottom: 6px;
    padding: 6px 8px; 
  }
}


/* INSTALLATION SECTION */

.bert-installation-section {
  background: radial-gradient(circle at center, #f0f4f9 0%, #fbcbf2 80%);
  padding: 80px 20px;
  font-family: 'Inter', sans-serif;
  color: #2c2c2c; /* Dark text */
  position: relative;
  overflow: hidden;
}

.bert-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 40px 24px;
  background-color: #ffffff; /* Slightly lighter container */
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* Two column layout */
.bert-installation-columns {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Left image column */
.bert-installation-image {
  flex: 1 1 400px;
  max-width: 500px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;

}

.bert-installation-image img {
  width: 70%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

.bert-installation-image:hover {
  transform: scale(1.03);
}

/* Right text column */
.bert-installation-content {
  flex: 1 1 350px;
  max-width: 600px;
  text-align: left;
  color: #2c2c2c;
}

/* Subheader */
.bert-installation-subheader {
  color: #ff46bb; /* Purple shade */
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 8px;
  letter-spacing: 1.2px;
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
}

.bert-installation-subheader::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 2px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

/* Header */
.bert-installation-header {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 24px;
  line-height: 1.2;
  color: #4c4e66;
  text-shadow: none;
  letter-spacing: -0.4px;
}

/* Points list */
.bert-installation-points {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: #555555;
  
}

.bert-installation-points li {
  position: relative;
  margin-bottom: 24px; /* more space for explanation */
  padding-left: 6px;
  list-style: none;
  
}

.bert-installation-points li i {
  color: #e02cbf;
  font-size: 1.8rem;
  min-width: 24px;
  margin-right: 8px;
  vertical-align: middle;
  transition: color 0.3s ease;
}

/* Initially hide list items and move them down */
.bert-installation-points li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* When the 'visible' class is added, fade in and move up */
.bert-installation-points li.visible {
  opacity: 1;
  transform: translateY(0);
}


.bert-installation-points li:hover i {
  color: #6200ea;
}

/* Explanation text styling */
.bert-installation-explanation {
  margin: 6px 0 0 32px; 
  font-size: 0.87rem;
  color: #7a7a7a;
  font-style: normal;
  line-height: 1.4;
  font-weight: 400;
  margin-left: 47px;

}

/* Responsive */
@media (max-width: 768px) {
  .bert-installation-columns {
    flex-direction: column;
    gap: 30px;
  }

  .bert-installation-image, 
  .bert-installation-content {
    max-width: 100%;
    flex: none;
  }

  .bert-installation-header {
    font-size: 1.4rem;
  }

  .bert-installation-points {
    font-size: 0.95rem;
  }

.bert-installation-explanation {

  font-size: 0.83rem;

}

}


/* ===========SUPORT PAGE STARTS=========== */

.bert-faq-section {
  background: linear-gradient(135deg, #f9fafc 0%, #f0f2ff 100%);
  padding: 60px 20px;
  font-family: 'Inter', sans-serif;
  color: #222;
  position: relative;
  overflow: hidden;
}

/* Subtle diagonal grid pattern (static) */
.bert-faq-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to right, rgba(224, 211, 248, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(224, 211, 248, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  z-index: 0;
}

.bert-faq-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 1;
}

/* ===== FAQ HEADER ENHANCEMENT ===== */
.bert-faq-header {
  font-family: 'Poppins', sans-serif;
  font-size: 2.1rem;
  margin-bottom: 30px;
  font-weight: 600;
  color: #51485f;
  text-align: center;
  letter-spacing: -0.8px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.bert-faq-header::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #e0d7f8, #6200ea, #e0d7f8);
  background-size: 200% 100%;
  border-radius: 3px;
  animation: gradientFlow 3s ease infinite;
}

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

/* ===== FAQ ITEM ENHANCEMENTS ===== */
.bert-faq-list {
  border-top: 2px solid #e0d7f8;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(98, 0, 234, 0.08);
  overflow: hidden;
}

.bert-faq-item {
  border-bottom: 1px solid #eee;
  padding: 0;
  transition: background 0.3s ease;
}

/* Active item glow */
.bert-faq-item.active {
  background: rgba(98, 0, 234, 0.03);
  border-left: 3px solid #6200ea;
}

.bert-faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #554963;
  padding: 20px 24px;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.bert-faq-question:hover {
  color: #6200ea;
  background: rgba(98, 0, 234, 0.03);
}

.bert-faq-question[aria-expanded="true"] {
  color: #6200ea;
  font-weight: 600;
}

/* Plus/Minus icon animation */
.bert-faq-icon {
  font-weight: 700;
  font-size: 1.3rem;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  user-select: none;
  color: #888;
}

.bert-faq-question[aria-expanded="true"] .bert-faq-icon {
  transform: rotate(45deg);
  color: #6200ea;
}

/* Answer reveal effect */
.bert-faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: 
    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    padding 0.3s ease;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #555;
  padding: 0 24px;
  margin-top: 0;
  border-left: 3px solid transparent;
}

.bert-faq-answer.active {
  opacity: 1;
  margin-top: 0;
  padding: 0 24px 24px 24px;
  border-left-color: #6200ea;
  padding-top: 0px;
  padding-bottom: 140px;
  
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 768px) {
  .bert-faq-section {
    padding: 40px 12px;
  }

  .bert-faq-header {
    font-size: 1.6rem;
    margin-bottom: 24px;
  }

  .bert-faq-question {
    font-size: 0.95rem;
    padding: 9px 20px;
  }

  .bert-faq-answer {
    font-size: 0.85rem;
    padding: 0 20px 20px 20px !important;
  }
}


/* =======ABOUT US PAGE STARTS====== */
/* About Us Section - Matching Modern Hero Style */
.about-us {
  background: radial-gradient(circle at center, #ffffff 0%, #fcf7f7 100%);
  font-family: 'Poppins', sans-serif;
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}


.about-us::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(63,81,181,0.08) 0%, rgba(0,0,0,0) 70%);
  z-index: 0;
}

/* Inner Container */
.about-inner {
  background-color: #f6e0ec; /* subtle pink background */
  padding: 2.5rem 2rem;
  border-radius: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
 padding-bottom: 0px;
}

.about-inner .hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Hero Text */
.about-inner .hero-text h4 {
  font-size: 18px;
  color: #ff66c4;
  margin-bottom: 10px;
  text-transform: none;
  letter-spacing: 1px;
  font-weight: 400;
}

.about-inner .hero-text h1 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -1.9px;
}

.about-inner .hero-text .subtitle {
  font-size: 0.95rem;
  margin-bottom: 2rem;
  color: #4a4a6a;
  max-width: 500px;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}

/* Hero Image */
.about-inner .hero-visual {
  position: relative;
  text-align: center;
  perspective: 1000px;
}

.about-inner .hero-image {
  max-width: 80%;
  height: auto;
  border-radius: 1rem;
  box-shadow: none; /* 🚀 Removed shadow */
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  padding-bottom: 0px;
  margin-bottom: -6px;
}

.about-inner .hero-visual:hover .hero-image {
  transform: rotateY(-5deg) rotateX(2deg) scale(1.02);
}


.hero-visual {
  padding-bottom: 0px;
}

/* Responsive */
@media (max-width: 768px) {
  .about-inner {
    padding: 2rem 0.9rem;
     padding-bottom: 0px;
  }

  .about-inner .hero-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .about-inner .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about-inner .hero-text .subtitle {
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .about-inner .hero-text h1 {
    font-size: 1.7rem;
  }

  .about-inner .hero-image {
    max-width: 100%;
  }
}


/*BERTSUITE GOALS  */
/* BertSuite Goals Section - Redesigned */
.bertsuite-goals {
background: #1a1a2e;
  font-family: 'Poppins', sans-serif;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  padding-left: 120px;
  padding-right: 120px;
}

/* Animated background elements */
.bertsuite-goals::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  z-index: 0;
}

.bertsuite-goals::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(198, 25, 153, 0.05);
  border-radius: 50%;
  z-index: 0;
}

/* Inner container */
.bertsuite-goals .inner-container {
  max-width: 1200px;
  margin: 0 auto;
  background: #f9f9ff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
  position: relative;
  z-index: 1;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.8s 0.2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

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

.bertsuite-goals .section-title {
  text-align: center;
  font-size: 2.1rem;
  font-weight: 500;
  color: #d9d7e3;
  margin-bottom: 2.5rem;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  letter-spacing: -0.5px;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.goal-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.goal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #c51599, #3a4fa0);
}

.goal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(38, 57, 119, 0.15);
}

.goal-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #b62596, #263977);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.goal-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: #4d4572;
}

.goal-card p {
  font-size: 0.85rem;
  color: #616174;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}



/* Responsive: Stack on smaller screens */
@media (max-width: 992px) {
  .goals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .bertsuite-stats {
    gap: 20px;
  }

.bertsuite-goals {
  padding-left: 20px;
  padding-right: 20px;
}

}

@media (max-width: 576px) {
  .goals-grid {
    grid-template-columns: 1fr;
  }
  
  .bertsuite-goals .inner-container {
    padding: 30px 20px;
  }
  
  .bertsuite-goals .section-title {
    font-size: 1.8rem;
  }
  
  .bertsuite-stat h3 {
    font-size: 1.5rem;
  }
  
  .bertsuite-stat p {
    font-size: 0.85rem;
  }
  
  .bertsuite-stats {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
}