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

/* -------------------------NAV BAR CSS---------------------------- */
/* Navbar Styling */
.navbar {
  display: flex;
  justify-content: space-between; /* Distribute logo and links */
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1F2833;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  color: white;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: background 0.3s ease-in-out;
}
/* Keeping logo in its position */
#logo {
  font-size: 3rem;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  text-shadow: 3px 3px 6px rgba(132, 234, 244, 0.5);
  margin-right: auto; /* Ensures logo stays on the left */
}
/* Aligning the navigation links to the right */
.nav-links {
  display: flex;
  list-style: none;
  margin-left: auto; /* Pushes nav links to the right */
}
.nav-links a {
  text-decoration: none;
  color: #C5C6C7;
  font-size: 1.2rem;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  transition: all 0.4s ease-in-out;
  display: inline-block;
  padding: 0 20px; /* Optional: Adjust padding for better spacing between links */
}
nav a {
  position: relative;
  font-size: 1.1em;
  color: #333;
  text-decoration: none;
  padding: 1px 20px;
  transition: .5s;
}
nav a:hover {
  color: #0ef;
}
nav a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-bottom: 2px solid #0ef;
  border-radius: 15px;
  transform: scale(0) translateY(50px);
  opacity: 0;
  transition: .5s;
}
nav a:hover span {
  transform: scale(1) translateY(0);
  opacity: 1;
}
/* Media query for responsiveness */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Hide nav-links by default on smaller screens */
  }
  .nav-links.active {
    display: flex; /* Show nav-links when the hamburger is clicked */
    flex-direction: column; /* Stack items vertically */
  }
  .nav-links a {
    padding: 1rem;
    font-size: 1.5rem;
  }
}
  /* Highlight 3D Hover Effect */
  .nav-links a::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffeb3b, #4caf50);
    border-radius: 20px;
    transition: width 0.4s ease-in-out, left 0.4s ease-in-out;
  }
  .nav-links a:hover {
    color: #66FCF1;
    text-shadow: 0 0 8px rgba(255, 235, 59, 0.7), 0 0 20px rgba(76, 175, 80, 0.7);
  }
  /* Link Sparkle Effect */
  .nav-links a::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffeb3b, transparent);
    top: 50%;
    left: -20px;
    opacity: 0;
    animation: sparkle 1s ease infinite;
  }
  .nav-links a:hover::after {
    left: calc(100% + 10px);
    opacity: 1;
  }
  /* 3D Hamburger Menu */
  .hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
  }

  .hamburger .line {
    width: 30px;
    height: 4px;
    background-color: white;
    margin: 5px 0;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
  }
  .hamburger:hover .line {
    transform: scale(1.2);
    background: #ffeb3b;
  }
  /* Responsive Design */
  @media screen and (max-width: 768px) {
    .nav-links {
      display: none;
      flex-direction: column;
      background: rgba(0, 0, 0, 0.9);
      position: absolute;
      top: 80px;
      right: 0;
      width: 100%;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
      padding: 1rem 0;
    }
    .nav-links.active {
      display: flex;
    }
    .nav-links li {
      margin: 1.5rem 0;
    }
    .hamburger {
      display: flex;
    }
  }
  
/*---------------------------Body Css----------------------------------  */
  /* Body Styling */
  body {
    font-family: 'Poppins', sans-serif;
    background-color: #0B0C10;
    color: #C5C6C7;
    padding-top: 100px;
  }
  

/*---------------------------------CARDS CSS------------------------ */
  /* Cards Container */
  .cards-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 3rem auto;
    padding: 2rem;
    max-width: 1200px;
  }
  
  /* Card Styling */
  .card {
    background: #1F2833;
    border: 1px solid #45A29E;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    width: 300px;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
  }
  
  .card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
  }
  
  /* Card Hover Effect */
  .card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(-45deg);
    transition: opacity 0.5s ease;
    opacity: 0;
    z-index: 0;
  }
  
  .card:hover::before {
    opacity: 1;
  }
  
  /* Card Content */
  .card h2 {
    font-size: 1.8rem;
    color: #66FCF1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
  }
  
  .card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #C5C6C7;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
  }
  
  /* Button Styling */
  .card button {
    background: linear-gradient(90deg, #66FCF1, #45A29E);
    border: none;
    color: #0B0C10;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    position: relative;
  }
  
  .card button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  .card button:active {
    transform: scale(0.95);
  }
  
  /* Animations */
  @keyframes slideIn {
    0% {
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .cards-container .card {
    animation: slideIn 1s ease forwards;
  }
  
  .cards-container .card:nth-child(1) {
    animation-delay: 0.3s;
  }
  
  .cards-container .card:nth-child(2) {
    animation-delay: 0.6s;
  }


/*-------------------------------FOOTER CSS-------------------------------*/
 /* General Footer Styling */
 .footer {
  background-color: #2D2F3E;
  color: #B1B8C1;
  padding: 4rem 2rem;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  margin-top: 3rem;
}

/* Footer Container */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* About Section */
.footer-about {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.footer-about h3 {
  font-size: 1.8rem;
  color: #66FCF1;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer-about p {
  font-size: 1rem;
  line-height: 1.6;
  color: #B1B8C1;
}

/* Content Alignment */
.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-links {
  flex: 1;
  max-width: 300px;
  text-align: left;
}

.footer-links h3 {
  font-size: 1.5rem;
  color: #66FCF1;
  margin-bottom: 1rem;
}

.footer-links form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links input,
.footer-links textarea {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  background-color: #3E4050;
  color: #B1B8C1;
}

.footer-links input::placeholder,
.footer-links textarea::placeholder {
  color: #B1B8C1;
}

.footer-links button {
  padding: 0.8rem;
  background-color: #45A29E;
  color: #FFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.footer-links button:hover {
  background-color: #66FCF1;
}

/* Social Media Section */
.footer-social {
  flex: 1;
  text-align: center;
}

.footer-social h3 {
  font-size: 1.5rem;
  color: #66FCF1;
}

.footer-social .social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.footer-social .icon {
  font-size: 2rem;
  color: #66FCF1;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social .icon:hover {
  color: #45A29E;
  transform: scale(1.2) rotate(10deg);
}

/* Footer Bottom Section */
.footer-bottom {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
}

  


/* Symbols Section */
.symbols-section {
    width: 100%;
    background: linear-gradient(90deg, #1F2833, #0B0C10); /* Gradient for section */
    padding: 1rem 0; /* Spacing for better separation */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
    border-bottom: 2px solid #1F2833; /* Bottom border to define separation */
  }
  
  /* Sliding Arithmetic Symbols */
  .sliding-symbols {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    height: 3rem;
  }
  
  .sliding-symbols .symbols-wrapper {
    display: flex;
    animation: slide-infinite 10s linear infinite;
    width: max-content; /* Ensures the container adjusts to its content */
  }
  
  .sliding-symbols .symbol {
    font-size: 2rem;
    font-weight: bold;
    color: #66FCF1;
    margin: 0 2rem; /* Spacing between symbols */
    opacity: 0.9;
    white-space: nowrap;
  }
  
  /* Keyframes for Seamless Animation */
  @keyframes slide-infinite {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  /* Hover Effect for Symbols */
  .sliding-symbols .symbol:hover {
    color: #45A29E;
    opacity: 1;
    transform: scale(1.2);
    transition: transform 0.3s ease, color 0.3s ease;
  }
  
  .form-response {
    margin-top: 0.5rem;
    font-size: 0.9rem;
  }
  

/*---------------------------CAROSAL EFFECT CSS--------------------------*/
/* Carousel Container */
.carousel-container {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  border: 2px solid #ddd;
  border-radius: 10px;
  height: 200px; /* Adjust for quote size */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Carousel */
.carousel {
  display: flex;
  transition: transform 1s ease-in-out;
  width: 100%;
}
/* Quote Slide */
.quote-slide {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
/* Quote Text */
.quote {
  font-size: 1.5rem;
  font-style: italic;
  color: #333;
  margin-bottom: 10px;
}
/* Author Text */
.author {
  font-size: 1.2rem;
  font-weight: bold;
  color: #555;
}


  /* Navigation bar */
  .navbar {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
  }

 
/* Aimated heading */ 
  .animated-sentence {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if necessary */
    justify-content: left;
    gap: 0px; /* Add space between words */
  }
  
  .letter {
    font-size: 30px;
    font-weight: bold;
    color: #66FCF1;
    position: relative;
    animation: drop-and-rise 10s ease-in-out infinite;
    opacity: 0; /* Start invisible */
  }
  
  /* Add spacing between words */
  .space {
    width: 20px; /* Adjust this to control word spacing */
  }
  
  /* Animations */
  @keyframes drop-and-rise {
    0% {
      transform: translateY(-100px);
      opacity: 0;
    }
    20% {
      transform: translateY(0);
      opacity: 1;
    }
    80% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-100px);
      opacity: 0;
    }
  }
  
  /* Delay for each letter */
  .letter:nth-child(1) { animation-delay: 0s; }
  .letter:nth-child(2) { animation-delay: 0.1s; }
  .letter:nth-child(3) { animation-delay: 0.2s; }
  .letter:nth-child(4) { animation-delay: 0.3s; }
  .letter:nth-child(5) { animation-delay: 0.4s; }
  .letter:nth-child(6) { animation-delay: 0.5s; }
  .letter:nth-child(7) { animation-delay: 0.6s; }
  .letter:nth-child(8) { animation-delay: 0.7s; } /* Space */
  .letter:nth-child(9) { animation-delay: 0.8s; }
  .letter:nth-child(10) { animation-delay: 0.9s; }
  .letter:nth-child(11) { animation-delay: 1s; } /* Space */
  .letter:nth-child(12) { animation-delay: 1.1s; }
  .letter:nth-child(13) { animation-delay: 1.2s; }
  .letter:nth-child(14) { animation-delay: 1.3s; }
  .letter:nth-child(15) { animation-delay: 1.4s; }
  .letter:nth-child(16) { animation-delay: 1.5s; }
  .letter:nth-child(17) { animation-delay: 1.6s; }
  .letter:nth-child(18) { animation-delay: 1.7s; }
  .letter:nth-child(19) { animation-delay: 1.8s; }
  .letter:nth-child(20) { animation-delay: 1.9s; }
  .letter:nth-child(21) { animation-delay: 2s; }
  .letter:nth-child(22) { animation-delay: 2.1s; }
  .letter:nth-child(23) { animation-delay: 2.2s; }
  .letter:nth-child(24) { animation-delay: 2.3s; }
  .letter:nth-child(25) { animation-delay: 2.4s; }
  .letter:nth-child(26) { animation-delay:2.5s; }
  



/*---------------------------- DROPDOWN CARDS CSS----------------------- */
/* Container Styling */
.custom-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 3rem auto;
  padding: 2rem;
  max-width: 1200px;
  position: relative;
}

/* Card Styling */
.custom-card {
  background: #1F2833;
  border: 1px solid #45A29E;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  width: 300px;
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
 /* Default z-index for the card */
}

.custom-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}

/* Header and Text Styling */
.custom-card h2 {
  font-size: 1.8rem;
  color: #66FCF1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 1rem;
}

.custom-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #C5C6C7;
  margin-bottom: 2rem;
}
a{
  color: #C5C6C7;
}
/* Button Styling */
.custom-button {
  background: linear-gradient(90deg, #66FCF1, #45A29E);
  border: none;
  color: #0B0C10;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-button:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.custom-button:active {
  transform: scale(0.95);
}

/* Dropdown Styling */
.custom-dropdown {
  display: none;
  position: absolute;
  background: #1F2833;
  border: 1px solid #45A29E;
  border-radius: 10px;
  width: 90%;
  max-height: 150px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem;
 /* Higher z-index to ensure it's in front of everything */
}

/* Dropdown Options */
.custom-option {
  color: #C5C6C7;
  padding: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.custom-option:hover {
  background: #45A29E;
  color: #0B0C10;
}

.c1, .c2{
  position: relative;
  z-index: 0;
}
.cc1, .cc2{
  position: relative;
  z-index: 100;
}
.cc3, .cc4{
  position: relative;
  z-index: 50;
}




html, body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
  scroll-behavior: smooth;
}
.footer-top-line {
  width: 100%; /* Full width of the screen */
  height: 3px; /* Thickness of the line */
  background-color: #45A29E; /* Line color */
  margin: 0 auto; /* Center alignment */
  margin-bottom: 1rem; /* Space below the line */
  position: relative; /* Needed for the smoke to position properly */
  animation: moveLine 3s linear infinite; /* 3-second right-to-left movement */
}

.footer-top-line::after {
  content: ''; /* Empty content for the pseudo-element */
  position: absolute;
  top: 50%;
  left: 0; /* Start the golden smoke from the left side */
  width: 150%; /* Make the smoke trail wider than the line */
  height: 10px; /* Reduced height for the smoke effect */
  background: radial-gradient(circle, rgba(255, 223, 0, 0.8) 15%, transparent 80%); /* Golden smoke */
  opacity: 0; /* Initially invisible */
  transform: translateY(-50%);
  animation: trailEffect 3s linear infinite; /* 3-second animation for the smoke */
}

@keyframes moveLine {
  0% {
    transform: translateX(100%); /* Start from the right */
  }
  100% {
    transform: translateX(-100%); /* Move to the left */
  }
}

@keyframes trailEffect {
  0% {
    left: 0; /* Start at the left side of the line */
    opacity: 1; /* Fully visible at the start */
    transform: translateY(-50%) scaleX(0.8); /* Small scale for the smoke at the start */
  }
  50% {
    left: 10%; /* Smoke moves slightly left with the line */
    opacity: 0.6; /* Fade out slightly */
    transform: translateY(-50%) scaleX(1); /* Expand the smoke */
  }
  100% {
    left: 100%; /* Smoke will move to the left end of the line */
    opacity: 0; /* Fade out completely */
  }
}



.calculators-heading {
  text-align: center;
  margin-bottom: 2rem; /* Space below the heading */
}

.calculators-heading h2 {
  font-size: 3rem;
  color: transparent;
  background: linear-gradient(90deg, #45A29E, #66FCF1, #1F2833); /* Gradient color */
  background-clip: text; /* Ensures the gradient is applied only to the text */
  -webkit-background-clip: text; /* For Safari support */
  font-weight: bold;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(72, 161, 173, 0.5), 0 0 15px rgba(72, 161, 173, 0.5);
  animation: textAnimation 3s ease-in-out infinite; /* Animation to make the text dynamic */
}

/* Keyframes for text animation */
@keyframes textAnimation {
  0% {
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(72, 161, 173, 0.5), 0 0 15px rgba(72, 161, 173, 0.5);
  }
  50% {
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), 0 0 20px rgba(72, 161, 173, 0.7), 0 0 30px rgba(72, 161, 173, 0.7);
  }
  100% {
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(72, 161, 173, 0.5), 0 0 15px rgba(72, 161, 173, 0.5);
  }
}