/* Modern design and responsive styles */
:root {
  --primary-color: #9926f0;
  --secondary-color: #6c757d;
  --dark-color: #212529;
  --light-color: #f8f9fa;
  --transition: all 0.3s ease-in-out;
}

/* Base styles */
body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
}

/* Enhanced Navigation */
.navbar {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: var(--transition);
}

/* Modern Buttons */
.btn {
  border-radius: 30px;
  padding: 0.8rem 2rem;
  transition: var(--transition);
}

.btn-primary {
  background-color: var(--primary-color);
  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(153, 38, 240, 0.3);
}

/* Enhanced Cards */
.card {
  border: none;
  border-radius: 15px;
  transition: var(--transition);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

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

/* Responsive improvements */
@media (max-width: 768px) {
  .display-3 {
    font-size: 2.5rem;
  }
  
  .lead {
    font-size: 1rem;
  }
  
  .navbar-brand img {
    max-width: 120px;
  }
}

/* Video box styles */
.video-box {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Loading animation */
.strain {
  width: 55px;
  height: 1px;
  background-color: #FFFFFF;
  position: relative;
  margin: 0px auto;
  margin-top: 28px;
  margin-bottom: 28px;
  -webkit-animation-name: rotate-strain;
  animation-name: rotate-strain;
  -webkit-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.strain:before {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  left: 0;
  margin-top: -9px;
  margin-left: -9px;
  -webkit-animation-name: strain-size-left;
  animation-name: strain-size-left;
  -webkit-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.strain:after {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(153, 38, 240, 0.95);
  right: 0;
  margin-top: -9px;
  margin-right: -9px;
  -webkit-animation-name: strain-size-right;
  animation-name: strain-size-right;
  -webkit-animation-duration: 1.7s;
  animation-duration: 1.7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

/* Animation delays for multiple strains */
.strain:nth-child(1), .strain:nth-child(1):before, .strain:nth-child(1):after { animation-delay: 0.15s; }
.strain:nth-child(2), .strain:nth-child(2):before, .strain:nth-child(2):after { animation-delay: 0.3s; }
.strain:nth-child(3), .strain:nth-child(3):before, .strain:nth-child(3):after { animation-delay: 0.45s; }
.strain:nth-child(4), .strain:nth-child(4):before, .strain:nth-child(4):after { animation-delay: 0.6s; }
.strain:nth-child(5), .strain:nth-child(5):before, .strain:nth-child(5):after { animation-delay: 0.75s; }
.strain:nth-child(6), .strain:nth-child(6):before, .strain:nth-child(6):after { animation-delay: 0.9s; }
.strain:nth-child(7), .strain:nth-child(7):before, .strain:nth-child(7):after { animation-delay: 1.05s; }
.strain:nth-child(8), .strain:nth-child(8):before, .strain:nth-child(8):after { animation-delay: 1.2s; }
.strain:nth-child(9), .strain:nth-child(9):before, .strain:nth-child(9):after { animation-delay: 1.35s; }
.strain:nth-child(10), .strain:nth-child(10):before, .strain:nth-child(10):after { animation-delay: 1.5s; }
.strain:nth-child(11), .strain:nth-child(11):before, .strain:nth-child(11):after { animation-delay: 1.65s; }
.strain:nth-child(12), .strain:nth-child(12):before, .strain:nth-child(12):after { animation-delay: 1.8s; }

/* Keyframe Animations */
@keyframes rotate-strain {
  0% { width: 155px; }
  25% { width: 0; }
  50% { width: 155px; }
  75% { width: 0; }
  100% { width: 155px; }
}

@keyframes strain-size-left {
  0% { transform: scale(1) translateX(0px); }
  25% { transform: scale(0.5); }
  50% { transform: scale(1) translateX(155px); }
  75% { transform: scale(1.5); }
  100% { transform: scale(1) translateX(0px); }
}

@keyframes strain-size-right {
  0% { transform: scale(1) translateX(0px); }
  25% { transform: scale(1.5); }
  50% { transform: scale(1) translateX(-155px); }
  75% { transform: scale(0.5); }
  100% { transform: scale(1) translateX(0px); }
}

/* Enhanced testimonials */
.testimonials__card {
  /* background: linear-gradient(145deg, var(--primary-color), #7b1fa2); */
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}

/* Improved FAQ section */
.accordion-button:not(.collapsed) {
  background-color: var(--primary-color);
  color: white;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

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

/* Performance optimizations */
img {
  max-width: 100%;
  height: auto;
}

/* Preload critical fonts */
@font-face {
  font-family: 'Poppins';
  font-display: swap;
  src: local('Poppins');
}