/* General Page Styling */

body {
  background-color: rgba(18, 18, 26, 1) !important;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 24px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.874);
  background-position: center;
  background-repeat: repeat;
  background-size: 80%;
  overflow-x: hidden;
  z-index: 0;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-position: center;
  background-repeat: repeat;
  background-size: 80%;
  opacity: 0;
  /* Adjust the opacity as needed */
  z-index: -1;
}


/* Breadcrumb Navigation */
.breadcrumb1 {
    margin-top: 0px;
    font-size: 14px;
    color: #bbb;
    text-align: left;
    border-radius: 0px;
    opacity: 0.75;
    padding: 15px 36.5px;
    transform: translateY(-80px);

  }


  .breadcrumb1 span {
    color: #4dfe3e;
    /* Green brand color */
    text-decoration: none;
  }

  .breadcrumb1 a {
    color: white !important;
    text-decoration: none;
  }
  .breadcrumb1 img {
    margin-left: 6px;
    vertical-align: unset;
    width: 11px;
    filter: invert(1);
    transform: translateY(0.3px);
  }

  .breadcrumb1 a:hover {
    text-decoration: underline;
    opacity: 1;
  }

  @media (max-width: 500px) {
    .breadcrumb1 {
      font-size: 12px;
    }
    .breadcrumb1 img {
        margin-left: 0px;

        width: 9px;}
    
  }



.services-section {
    text-align: center;
    padding: 50px 20px;
  }

  .services-title {
position: relative; /* Ensures proper placement */
transform: translateY(-26px);
background: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
padding: 20px 0; /* Ensure padding affects only top & bottom */
text-align: center;
font-size: 35px;
  font-weight: bold;
  line-height: 34px;   
color: #4dfe3e;
width: 89vw; /* Full viewport width */
left: 0; /* Ensures it starts from the leftmost edge */
border-radius: 10px;
margin: 0px auto; /* Negative margins to prevent shifting content */
}


.faq-container {
  transform: translateY(-130px);   
  width: 90%;
  margin: auto;
  padding: 10px;

}

/* FAQ Section Styling */
.faq-section {
  background-color: #0a0c0e;
  border-radius: 10px;
  padding: 20px;
  margin-top: 0px;

}

.faq-title {
  font-size: 35px;
  font-weight: bold;
  color: #4dfe3e;
  text-align: center;
  line-height: 34px;
  margin-bottom: 20px;

}

.faq-item {
  background-color: rgb(18, 20, 26);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.3s ease;
  border: 0px solid #2ecc71;
}

.faq-item:hover {
  background-color: #4dfe3e;
  color: black;
}

.faq-arrows h4 {
  font-size: 16px;
  transition: transform 0.3s ease;
  transform: translateY(-40px);
  /* Adjust the value as needed */
  color: #4dfe3e;
  word-spacing: 20px;
  /* Adjust the value as needed */
  opacity: 0.4;
}


.faq-arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
  margin-right: 10px;
  word-spacing: 15px;
  /* Adjust the value as needed */
}
.faq-question {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  padding: 0px 25px;
  background-color: rgb(25, 28, 37);
  border-radius: 0 0 8px 8px;
  margin-top: 5px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.799)!important;}
 .faq-answer p{
  color: rgba(255, 255, 255, 0.799)!important;}
.faq-answer a {
  color: #bbb;
}

.faq-answer a:hover {
  color: #4dfe3e;
}

.faq-item.active+.faq-answer {
  max-height: 150px;
  /* Adjust as needed */
  padding: 25px 25px;
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
}

/* Contact Section */
.contact-section {
  background-color: #0a0c0e;

  color: rgba(255, 255, 255, 0.893);
  text-align: center;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 16px;
}

.faq-toggle-btn {
    cursor: pointer; /* Makes it clear the section is clickable */
font-size: 40px;
margin-right: 10px;
padding: 0 10px ;
transition: transform 0.3s ease;
position: absolute;
left: 2%; /* Moves the arrow completely to the left */
border-radius: 10px;
}
.faq-toggle-btn:hover {
background-color:  rgba(18, 18, 26, 1);
}


.faq-section.open .faq-toggle-btn {
transform: rotate(90deg); /* Rotates right arrow to point down */
}


  .faq-items {
display: none; /* Hide all items initially */
}

.faq-section.open .faq-items {
display: block; /* Show items when the section is open */
}

.faq-title a{
color: rgba(255, 255, 255, 0.911)!important;
cursor: pointer!important; /* Makes it clear the section is clickable */
text-decoration: none;
}
.faq-title a:hover{
color: #4dfe3e;
text-decoration: none; }

.faq-title a.active-title {
color: #4dfe3e !important; /* Apply color change to <a> inside .faq-title */
transition: color 0.3s ease-in-out;
}


.faq-items {
visibility: hidden; /* Start as hidden instead of display: none */
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.faq-section.open .faq-items {
visibility: visible; /* Make it visible */
opacity: 1;
}


/* Responsive Design */
@media (max-width: 768px) {
  .faq-container {
    width: 85%;
    padding: 5px;
    transform: translateY(-100px);   

  }

  .services-title, .faq-title {
    font-size: 24px;
  }

  .faq-item {
    padding: 12px;
  }

  .faq-question {
    font-size: 16px;
    line-height: 20px;

  }

  .faq-answer {
    font-size: 14px;

  }

    
    }

@media (max-width: 458px) {

    .services-title, .faq-title {
        font-size: 18.5px;
         margin-bottom: 0px;
  
      }
  .faq-container {
    width: 90%;
    padding: 5px;
  }

  .faq-section {
    padding: 16px;
  }


  .faq-item {
    padding: 10px;
  }

  .faq-question {
    font-size: 12px;
    line-height: 16px;

  }

  .faq-answer {
    font-size: 11px;
    margin-top: -1px;
  margin-bottom: 6px;
      padding: 0px 20px;

  }

  .faq-item.active+.faq-answer {
    max-height: 150px;
    /* Adjust as needed */
    padding: 20px 20px;
  }

  .faq-arrow, .faq-arrows{
    font-size: 10px;
    word-spacing: 10px;
    /* Adjust the value as needed */

  }

    .faq-toggle-btn {
font-size: 30px;
      }
}


@media (max-width: 680px) {

    .faq-arrows h4 {
      font-size: 12px;
      color: #4dfe3e;
      word-spacing: 15px;
      /* Adjust the value as needed */
      transform: translateY(-38.5px); /* Centers it */
    }
    .services-section {
      padding: 40px 15px;
    }
    .services-title {
      padding: 7px 10px; /* Increase background padding */

      width: 85%;
    }
   
    .breadcrumb1 {
    margin-top: 0px;

    color: #bbb;
    text-align: left;
    border-radius: 0px;
    opacity: 0.75;
    padding: 15px 20px;
    transform: translateY(-59px);

  }

  }



  footer {
    margin-top: -115px !important; /* Moves it up without affecting layout */
  }