/*:root {*/
/*  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #43e97b 100%);*/
/*  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);*/
/*  --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);*/
/*  --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);*/
/*  --grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
/*  --muted: #6b7280;*/
/*  --card-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);*/
/*  --text-primary: #2d3748;*/
/*  --text-secondary: #718096;*/
/*  --glass-bg: rgba(255, 255, 255, 0.15);*/
/*  --glass-border: rgba(255, 255, 255, 0.2);*/
/*  --text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);*/
/*  --secondary-blue: #e7f3ff;*/
/*  --border-light: #e5e7eb;*/
/*  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);*/
/*  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1);*/
/*  --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.25);*/
/*  --primary-blue: #3b82f6;*/
/*  --primary-purple: #667eea;*/
/*  --primary-green: #43e97b;*/
/*  --primary-orange: #f59e0b;*/
/*  --primary-red: #ef4444;*/
/*  --bg-light: #f8fafc;*/
/*  --bg-white: #ffffff;*/
/*  --accent-orange: #f59e0b;*/
/*  --text-dark: #1f2937;*/
/*  --text-gray: #6b7280;*/
/*  --text-white: #fff;*/
/*  --bg-white: #ffffff;*/
/*  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);*/
/*  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);*/
/*  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);*/
/*  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);*/
/*  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);*/
/*  --border-radius: 16px;*/
/*}*/
* {
  padding: 0;
  margin: 0;
}
/*#main-navbar {*/
  /* transition: all 0.3s ease-in-out; */
/*  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);*/
/*  padding: 10px 0;*/
/*}*/
/*.navbar.fixed-top {*/
/*  background: rgba(255, 255, 255, 0.1);*/
/*  backdrop-filter: blur(20px);*/
/*  -webkit-backdrop-filter: blur(20px);*/
/*  border-bottom: 1px solid rgba(255, 255, 255, 0.2);*/
/*  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
/*}*/

/*#main-navbar .nav-link {*/
/*  color: #fff;*/
/*}*/

/*#main-navbar.scrolled {*/
/*  background: rgba(255, 255, 255, 0.95);*/
/*  backdrop-filter: blur(25px);*/
/*  -webkit-backdrop-filter: blur(25px);*/
/*  border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
/*  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);*/
/*  padding: 0.75rem 0;*/
/*}*/

/*#main-navbar.scrolled .nav-link {*/
/*  color: #000;*/
/*}*/
/*#main-navbar.scrolled .nav-link:hover {*/
/*  color: rgb(102, 126, 234);*/
/*  transform: translateY(-2px);*/
/*}*/
/*#main-navbar.scrolled .jsa-nav-link::before {*/
/*  background-color: #fff;*/
/*}*/
/*.logo-scrolled {*/
/*  display: none;*/
/*}*/

/*#main-navbar.scrolled .logo-default {*/
/*  display: none;*/
/*}*/

/*#main-navbar.scrolled .logo-scrolled {*/
/*  display: inline-block;*/
/*}*/
/*section {*/
/*  overflow: hidden;*/
/*}*/
/*.nav-menus {*/
/*  gap: 15px;*/
/*}*/
/*.jsa-nav-link {*/
/*  font-weight: 600;*/
/*  font-size: 1rem;*/
/*  padding: 0.75rem 1.5rem;*/
/*  margin: 0 0.2rem;*/
/*  border-radius: 50px;*/
/*  position: relative;*/
/*  transition: all 0.3s ease;*/
/*  text-decoration: none;*/
/*  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);*/
/*}*/
/*.jsa-nav-link:hover {*/
/*  color: white;*/
/*  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);*/
/*  transform: translateY(-2px);*/
/*}*/
/* .jsa-nav-link:hover {
  color: #667eea !important;
  transform: translateY(-2px);
} */

/*.jsa-nav-link::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  background: rgba(255, 255, 255, 0.1);*/
/*  border-radius: 50px;*/
/*  opacity: 0;*/
/*  transition: all 0.3s ease;*/
/*  z-index: -1;*/
/*}*/
/*.jsa-nav-link:hover::before {*/
/*  opacity: 1;*/
/*  transform: scale(1.05);*/
/*}*/
/*#main-navbar.scrolled .jsa-nav-link::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: inherit;*/
/*  bottom: 0;*/
/*  left: 50%;*/
/*  width: 0;*/
/*  height: 2px;*/
/*  background: linear-gradient(135deg, #667eea, #764ba2);*/
/*  transition: all 0.3s ease;*/
/*  transform: translateX(-50%);*/
/*}*/

/*#main-navbar.scrolled .jsa-nav-link:hover::before {*/
/*  width: 100%;*/
/*}*/
/*.jsa-dropdown {*/
/*  position: relative;*/
/*}*/

/*.jsa-dropdown-menu {*/
/*  background: rgba(255, 255, 255, 0.95);*/
/*  backdrop-filter: blur(20px);*/
/*  border: 1px solid rgba(255, 255, 255, 0.2);*/
/*  border-radius: 20px;*/
/*  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);*/
/*  padding: 1rem 0;*/
  /* margin-top: 0.5rem; */
/*  min-width: 280px;*/
/*  transform: translateY(-10px);*/
/*  opacity: 0;*/
/*  visibility: hidden;*/
/*  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
/*}*/

/*.jsa-dropdown:hover .jsa-dropdown-menu {*/
/*  transform: translateY(0);*/
/*  opacity: 1;*/
/*  visibility: visible;*/
/*}*/

/*.jsa-dropdown-item {*/
/*  padding: 0.8rem 1.5rem;*/
/*  color: #2c3e50;*/
/*  text-decoration: none;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  gap: 0.8rem;*/
/*  font-weight: 500;*/
/*  transition: all 0.3s ease;*/
/*  border-radius: 0;*/
/*}*/

/*.jsa-dropdown-item:hover {*/
/*  background: linear-gradient(135deg, #667eea10, #764ba210);*/
/*  color: #667eea;*/
/*  transform: translateX(5px);*/
/*}*/

/*.jsa-dropdown-item i {*/
/*  width: 20px;*/
/*  text-align: center;*/
/*  font-size: 1.1rem;*/
/*  color: #667eea;*/
/*}*/
/*.jsa-mega-menu {*/
/*  position: absolute;*/
/*  top: 100%;*/
/*  left: 0;*/
/*  right: 0;*/
/*  background: rgba(255, 255, 255, 0.98);*/
/*  backdrop-filter: blur(20px);*/
/*  border-radius: 0 0 25px 25px;*/
/*  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);*/
/*  padding: 2rem 0;*/
/*  transform: translateY(-20px);*/
/*  opacity: 0;*/
/*  visibility: hidden;*/
/*  transition: all 0.4s ease;*/
/*  z-index: 1000;*/
/*}*/

/*.jsa-nav-link.dropdown-toggle:hover .jsa-mega-menu {*/
/*  transform: translateY(0);*/
/*  opacity: 1;*/
/*  visibility: visible;*/
/*}*/

/*.jsa-mega-menu-item {*/
/*  padding: 1rem;*/
/*  border-radius: 15px;*/
/*  transition: all 0.3s ease;*/
/*  text-decoration: none;*/
/*  color: #2c3e50;*/
/*}*/

/*.jsa-mega-menu-item:hover {*/
/*  background: linear-gradient(135deg, #667eea10, #764ba210);*/
/*  transform: translateY(-2px);*/
/*  color: #667eea;*/
/*}*/

/*.jsa-mega-menu-icon {*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  background: linear-gradient(135deg, #667eea, #764ba2);*/
/*  border-radius: 15px;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  color: white;*/
/*  font-size: 1.3rem;*/
/*  margin-bottom: 1rem;*/
/*}*/

/*.jsa-mega-menu-title {*/
/*  font-weight: 700;*/
/*  font-size: 1.1rem;*/
/*  margin-bottom: 0.5rem;*/
/*}*/

/*.jsa-mega-menu-desc {*/
/*  font-size: 0.9rem;*/
/*  color: #6c757d;*/
/*  line-height: 1.4;*/
/*}*/

/*.jsa-dropdown-divider {*/
/*  margin: 0.5rem 1rem;*/
/*  border-color: rgba(102, 126, 234, 0.2);*/
/*}*/
/*.jsa-cta-btn {*/
/*  background: linear-gradient(135deg, #fbbf24, #f59e0b);*/
/*  border: none;*/
/*  color: white;*/
/*  font-weight: 700;*/
/*  padding: 0.8rem 2rem;*/
/*  border-radius: 50px;*/
/*  transition: all 0.3s ease;*/
/*  text-decoration: none;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 0.5rem;*/
/*  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);*/
/*}*/

/*.jsa-cta-btn:hover {*/
/*  background: linear-gradient(135deg, #667eea, #764ba2);*/
/*  transform: translateY(-3px);*/
/*  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);*/
/*  color: white;*/
/*}*/
/*.jsa-navbar-toggler {*/
/*  border: none;*/
/*  padding: 0.5rem;*/
/*  background: linear-gradient(135deg, #667eea, #764ba2);*/
/*  border-radius: 10px;*/
/*}*/

/*.jsa-navbar-toggler:focus {*/
/*  box-shadow: none;*/
/*}*/

/*.jsa-navbar-toggler-icon {*/
/*  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");*/
/*}*/
/*.jsa-dropdown:hover > .dropdown-menu,*/
/*.jsa-dropdown:hover > .jsa-mega-menu {*/
/*  display: block;*/
/*  transform: translateY(0) !important;*/
/*  opacity: 1 !important;*/
/*  visibility: visible !important;*/
/*}*/
/*.home-main #main-navbar .jsa-nav-link {*/
/*  color: #000;*/
/*}*/
/*.home-main .jsa-nav-link::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  bottom: 0px;*/
/*  top: inherit;*/
/*  left: 50%;*/
/*  width: 0px;*/
/*  height: 2px;*/
/*  transform: translateX(-50%);*/
/*  background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162));*/
/*  transition: 0.3s;*/
/*}*/
/*.home-main .jsa-nav-link:hover::before {*/
/*  width: 100%;*/
/*}*/
/*.home-main #main-navbar .jsa-nav-link:hover {*/
/*  color: rgb(102, 126, 234);*/
/*  transform: translateY(-2px);*/
/*}*/
/* About Us Hero */
.about-hero {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  min-height: 90vh;
  padding: 70px 20px;
  position: relative;
  overflow: hidden;
}

.about-hero .bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-hero .shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  animation: float 20s infinite ease-in-out;
}

.about-hero .shape:nth-child(1) {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.about-hero .shape:nth-child(2) {
  width: 200px;
  height: 200px;
  top: 60%;
  right: 10%;
  animation-delay: -5s;
}

.about-hero .shape:nth-child(3) {
  width: 150px;
  height: 150px;
  bottom: 20%;
  left: 15%;
  animation-delay: -10s;
}

.about-hero .shape:nth-child(4) {
  width: 250px;
  height: 250px;
  top: 30%;
  right: 30%;
  animation-delay: -15s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-30px) rotate(120deg) scale(1.1);
    opacity: 0.5;
  }
  66% {
    transform: translateY(20px) rotate(240deg) scale(0.9);
    opacity: 0.4;
  }
}

.about-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://www.transparenttextures.com/patterns/cubes.png");
  opacity: 0.1;
  z-index: -1;
}

.about-hero h1 {
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
}

.about-hero p {
  max-width: 750px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
}
/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid white;
  border-radius: 20px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.scroll-indicator::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-down 1.5s infinite;
}
@keyframes scroll-down {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 20px);
    opacity: 0;
  }
}
.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  animation: fadeInUp 1s ease-out 0.6s both;
}

.btn-primary-cta {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.btn-primary-cta::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.6s ease;
}

.btn-primary-cta:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  color: white;
}

.btn-primary-cta:hover::before {
  left: 100%;
}

.btn-secondary-cta {
  background: white;
  color: #6366f1;
  border: 2px solid white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-secondary-cta:hover {
  background: transparent;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
#blog-list-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.filter-box {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 28px;
}
.filter-btn {
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(99, 102, 241, 0.12);
  background: #fff;
  color: var(--muted);
  font-weight: 600;
  transition: all 0.22s;
  cursor: pointer;
}
.filter-btn.active {
  background: var(--grad);
  color: #fff;
  border: none;
}
.card-blog {
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  box-shadow: var(--card-shadow);
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-thumb {
  height: 220px;
  background-size: cover;
  background-position: center;
}
.card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cat-pill {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(102, 126, 234, 0.9);
  max-width: max-content;
}
.post-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}
.post-excerpt {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: auto;
}
.meta-row {
  font-size: 0.88rem;
  color: var(--muted);
}
.read-btn {
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  border: none;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
}
.blog-cta-section {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  background-size: 200% 200%;
  animation: subtleGradient 25s ease infinite;
  padding: 5rem 0;
  overflow: hidden;
}

@keyframes subtleGradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Background overlay with subtle animation */
.blog-cta-section .bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.blog-cta-section .bg-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  animation: subtleShimmer 20s ease infinite;
}

@keyframes subtleShimmer {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

.blog-cta-section .container {
  position: relative;
  z-index: 2;
}
.blog-cta-section .display-5 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}

.blog-cta-section .display-5::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.blog-cta-section .lead {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Buttons Container */
.blog-cta-section .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Button Base Styles */
.blog-cta-section .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.5px;
}

.blog-cta-section .btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* Primary Button (Light) */
.blog-cta-section .btn-light {
  background: rgba(255, 255, 255, 0.95);
  color: #2c3e50;
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.blog-cta-section .btn-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s ease;
}

.blog-cta-section .btn-light:hover::before {
  left: 100%;
}

.blog-cta-section .btn-light:hover {
  transform: translateY(-3px) scale(1.02);
  background: white;
  color: #667eea;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Secondary Button (Outline) */
.blog-cta-section .btn-outline-light {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

.blog-cta-section .btn-outline-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-cta-section .btn-outline-light:hover::before {
  opacity: 1;
}

.blog-cta-section .btn-outline-light:hover {
  transform: translateY(-3px) scale(1.02);
  background: rgba(255, 255, 255, 0.95);
  color: #2c3e50;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

/* Button Icons */
.blog-cta-section .btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.blog-cta-section .btn:hover i {
  transform: scale(1.1);
}

.blog-cta-section .btn-light:hover i {
  color: #667eea;
}

/* Active/Focus States */
.blog-cta-section .btn:active {
  transform: translateY(-1px) scale(0.98);
}

.blog-cta-section .btn:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Animation Classes */
.blog-cta-section .animate-in {
  opacity: 0;
  transform: translateY(30px);
  animation: smoothFadeIn 0.8s ease forwards;
}

@keyframes smoothFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blog-cta-section .stagger-1 {
  animation-delay: 0.2s;
}
.blog-cta-section .stagger-2 {
  animation-delay: 0.4s;
}
.blog-cta-section .stagger-3 {
  animation-delay: 0.6s;
}

/* Subtle floating elements for background */
.blog-cta-section .floating-decoration {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  animation: gentleFloat 20s ease-in-out infinite;
  pointer-events: none;
}

.blog-cta-section .floating-decoration:nth-child(2) {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.blog-cta-section .floating-decoration:nth-child(3) {
  width: 60px;
  height: 60px;
  top: 70%;
  right: 15%;
  animation-delay: 7s;
}

.blog-cta-section .floating-decoration:nth-child(4) {
  width: 80px;
  height: 80px;
  bottom: 20%;
  left: 20%;
  animation-delay: 14s;
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-30px) rotate(180deg);
    opacity: 0.6;
  }
}

/* Ripple Animation for JavaScript */
@keyframes ripple {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-cta-section {
    padding: 4rem 0;
  }

  .blog-cta-section .display-5 {
    font-size: 2rem;
  }

  .blog-cta-section .lead {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }

  .blog-cta-section .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .blog-cta-section .btn {
    min-width: 250px;
  }
}

@media (max-width: 480px) {
  .blog-cta-section {
    padding: 3rem 0;
  }

  .blog-cta-section .container {
    padding: 0 1rem;
  }

  .blog-cta-section .display-5 {
    font-size: 1.8rem;
  }

  .blog-cta-section .lead {
    font-size: 1rem;
  }

  .blog-cta-section .btn {
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    min-width: 220px;
  }
}

/* Footer */

/*.footer {*/
/*  background: linear-gradient(135deg, #1a202c, #2d3748);*/
/*  color: white;*/
/*  padding-top: 80px;*/
/*  position: relative;*/
/*}*/

/*.footer h5 {*/
/*  font-weight: 700;*/
/*  margin-bottom: 20px;*/
/*}*/

/*.footer a {*/
/*  color: rgba(255, 255, 255, 0.7);*/
/*  text-decoration: none;*/
/*  display: block;*/
/*  margin-bottom: 8px;*/
/*  transition: 0.3s;*/
/*}*/

/*.footer a:hover {*/
/*  color: #667eea;*/
/*  transform: translateX(6px);*/
/*}*/

/*.social-icons a {*/
/*  width: 40px;*/
/*  height: 40px;*/
/*  border-radius: 50%;*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  background: rgba(255, 255, 255, 0.1);*/
/*  margin-right: 10px;*/
/*  color: white;*/
/*  transition: 0.3s;*/
/*}*/

/*.social-icons a:hover {*/
/*  background: #764ba2;*/
/*  transform: translateY(-3px);*/
/*}*/

/*.footer-bottom {*/
/*  border-top: 1px solid rgba(255, 255, 255, 0.2);*/
/*  text-align: center;*/
/*  margin-top: 40px;*/
/*  padding: 20px 0;*/
/*  font-size: 0.9rem;*/
/*  color: rgba(255, 255, 255, 0.6);*/
/*}*/
