:root {

  --primary-color: #1c1c1c;

  --border-color: #2b2b2b;

  --secondary-color: #24a0ed;

}

body {

  font-family: "Roboto", sans-serif;

  background-color: var(--primary-color);

  color: white;

  margin: 0;

  padding: 0;

  height: 100%;

}

.navbar {

  background-color: var(--primary-color);

}

.nav-link,

.btn {

  font-weight: 700;

  font-size: 16px;

}

a {

  text-decoration: none;

}

.logo {

  position: absolute;

  top: 20px;

  left: 20px;

}

.nav-logo{

  width: 80px;

}

@media (max-width: 576px) {

  .nav-logo {

    width: 65px;

  }



}

/* Resgiter section start */



.card {

  padding: 30px;

  border-radius: 16px;

  border: 1px solid var(--border-color);

  background-color: var(--primary-color) !important;

  width: 350px;

  cursor: pointer;

  transition: background-color 0.3s ease, color 0.3s ease;

}



.card:hover {

  border: 1px solid #ffffff;

}



.radio-card {

  cursor: pointer;

}



.radio-card h5 {

  color: #b4b4b4;

  font-weight: 400;

  font-size: 14px;

}



/* Add this part for active card */

.card.active {

  background: rgb(33, 2, 28);

  background: linear-gradient(

    0deg,

    rgba(33, 2, 28, 1) 0%,

    #4eb0ed 0%,

    #4eb0ed 68%

  );

}



.btn-primary {

  background-color: var(--secondary-color);

  border: 0px;

  padding: 8px 16px;

}



.btn-light {

  background-color: var(--primary-color);

  border: 1px solid var(--border-color) !important;

  border-radius: 14px;

  padding: 16px 32px;

}



.btn-light:hover {

  color: black !important;

}



/* register section end  */



/* signup and signin section start  */

.signup-card {

  width: 100%;

  max-width: 457px;

  padding: 40px;

  background-color: var(--primary-color);

  border-radius: 10px;

  border: 1px solid var(--border-color);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.signup-card h2 {

  color: white;

  font-size: 24px;

}



.signup-card p {

  color: #aaa;

  font-size: 14px;

}

.signup-card form span {

  color: #5d5d5d;

}

.form-control {

  background-color: var(--primary-color);

  border: 1px solid #444;

  border-radius: 10px;

  padding: 10px 16px;

  color: white;

}

.form-control::placeholder {

  color: #ada2a2;

}

.form-control:focus {

  box-shadow: none;

  color: white;

  background-color: #2c2c2c;

  border: 1px solid #444;

}



.form-check-label {

  color: #aaa;

}

.signup-btn {

  padding: 12px 16px;

  border-radius: 10px;

}



.btn-light {

  color: black;

}



.btn-light img {

  vertical-align: middle;

}



hr {

  border-top: 1px solid var(--border-color);

}



.link-primary {

  color: #007bff;

}

/* signup and signin section end  */



/* features section start  */

.features-section {

  background-color: var(--secondary-color);

}

.features-section p {

  font-weight: 700;

  font-size: 16px;

  color: var(--primary-color);

}

.features-section img {

  width: 140px; /* Default width for larger screens */

}



@media (max-width: 768px) {

  .features-section img {

    width: 80px; /* Smaller logos for mobile screens */

  }

}

/* features section end  */



/* search section start  */

.icon-circle {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background-color: #7d7d7d80;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  border: 1px solid #909090;

  font-size: 40px;

}

.icon-circle .fa-microphone,

.icon-circle .fa-quote-left,

.icon-circle .fa-edit {

  font-size: 22.5px;

  color: #909090;

}

.search-container {

  background-color: #7d7d7d80;

  height: 349px;

  border-radius: 40px;

  color: #fff;

  border: 1px solid #909090;

}

.search-bar {

  background-color: transparent;

  outline: none;

  border: 0px;

  margin: 30px 20px;

}

.search-bar:focus {

  outline: none;

  box-shadow: none;

  background-color: transparent;

  border: 0px;

}

.search-container {

  width: 100%;

}

.search-icon-btn {

  border: none;

  border-radius: 50px;

  padding: 11px 18px;

}



.badge-custom {

  background-color: white;

  color: black;

  border: 1px solid #b4b4b4;

  font-size: 16px;

  padding: 8px 24px;

  border-radius: 100px;

  font-weight: 500;

}





.speak-text {

  font-size: 24px;

  margin-bottom: 20px;

}



.mic-animation {

  position: relative;

  display: inline-block;

  animation: pulse 1.5s infinite;

}



/* Keyframes for the pulse effect */

@keyframes pulse {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.2);

  }

  100% {

    transform: scale(1);

  }

}



.modal-content {

  border-radius: 20px;

  background-color: #2b2b2b !important;

  padding: 30px;

  animation: modalFadeIn 0.5s ease;

  border: 1px solid #373c48;

}

.modal-body{
  scrollbar-color: #9F9F9F #2C2C2C;
  scrollbar-width: thin;
}

.modal-header.customborder, .modal-footer.justify-content-center {
    border-color: #333;
}

.modal-body h5, .modal-body h6{
  color: #fff;
}

.modal-body p, .modal-body li, .modal-body b, .modal-body th, .modal-body td{
  color: #909090;
}

@keyframes modalFadeIn {

  0% {

    opacity: 0;

    transform: translateY(-100px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}





@media (max-width: 576px) {

  .keyword img {

    width: 230px;

  }



}







/* For tablet screens (768px and below) */

@media (max-width: 768px) {

  .badge-custom {

    padding: 8px 10px;

  }

}



/* For mobile screens (576px and below) */

@media (max-width: 576px) {

  .badge-custom {

    padding: 8px 10px;

    font-size: 12px;

  }



}



/* search section end  */



/* faq section start  */

.faq-section {

  background-color: #1b1b1b;

  color: white;

  padding: 40px 0;

  text-align: center;

}



.faq-section h1 {

  font-size: 40px;

  font-weight: 700;

  margin-bottom: 40px;

}

.tab-buttons {

  margin-bottom: 80px !important;

}



.tab-buttons button {

  border-radius: 100px;

  padding: 8px 32px;

  font-size: 16px;

  font-weight: 400;

  border: 1px solid #484848;

}



.tab-buttons .active {

  background-color: var(--secondary-color);

  color: white;

}

.faq-item .question{

  font-size: 18px;

}

.faq-item .answer{

  font-size: 14px;

  color: #909090;

}

.faq-container{

  border: 1px solid var(--border-color);

  border-radius: 10px;

}

/* For tablet screens (768px and below) */

@media (max-width: 768px) {

  .faq-section h1 {

    font-size: 25px;

  }

  .tab-buttons button {

    padding: 8px 20px;

  }

}



/* For mobile screens (576px and below) */

@media (max-width: 576px) {

  .faq-section h1 {

    font-size: 20px;

  }

  .tab-buttons button {

    padding: 8px 17px;

    font-size: 10px;

  }



}

/* faq section end  */



/* looking for section start */

.looking-section .card {

    background-color: #202020;

    color: #fff;

    border-radius: 10px;

    padding: 20px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    max-width: 433px;

  }

  .looking-section .card-title {

    font-weight: 700;

    font-size: 20px;

  }

  .looking-section .card-text {

    color: #909090;

    font-weight: 400;

    font-size: 16px;    

  }

  .looking-section  h6{

    font-size: 14px;

    font-weight: 400;

    color: #FFFFFF;

  }

  .looking-section .card:hover {

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

  }

/* looking for section end */



 /* footer section start  */

 footer {

    background-color: #202020;

    color: #fff;

    padding: 40px 0px  0px 0px;

  }

  .footer-title {

    font-weight: bold;

    margin-bottom: 15px;

  }

  .newsletter-input {

    border-radius: 25px;

    padding: 10px;

    /* width: 70%; */

    border: none;

    outline: none;

  }

  .newsletter-btn {

    border-radius: 25px;

    padding: 10px 14px;

    background-color: #3498db;

    color: white;

    border: none;

    cursor: pointer;

  }

  .social-icons .fa-instagram,

  .social-icons .fa-twitter,

  .social-icons .fa-linkedin {

    font-size: 30px;

    margin-right: 15px;

    color: white;

  }

  .footer-links a {

    display: block;

    color: #ccc;

    text-decoration: none;

    margin-bottom: 8px;

  }

  .footer-links a:hover {

    color: #fff;

  }

  .footer-bottom {

    text-align: center;

    padding: 10px 0;

    border-top: 1px solid #9870B5;

    margin-top: 20px;

  }

  @media (max-width: 768px) {

    .footer-title {

      text-align: center;

    }

    .social-icons {

      text-align: center;

    }

   

  }

@media (max-width: 576px) {

  .newsletter-btn {

    padding: 10px 7px;

  }

}