/* Footer */ 

/* Social Media Icons */

.social-icons i { 
    font-size: 1.5em;
    margin: 6px;
    color: var(--secondary-color);
    transition: color 0.3s ease;
  }
  
  .social-icons i:hover  {
    color: var(--accent-color); /* Replace this with your accent color */
  }
  
  .icon-1-5x {
    font-size: 1.5em;
  }
    
  /* General Footer Styling */
  
  .footer-background {
    background-color: var(--primary-color); /* or use another variable/color defined in your CSS */
  }
  
  .footer-logo {
    max-width: 50px; /* Limit the maximum width */
    height: auto;    /* Maintain the aspect ratio */
  }
  
  .footer {
    padding: 20px 0;
    background-color: var(--primary-color); /* Light gray background color */
    border-top: 1px solid var(--primary-color); /* Slight border at the top */
    border-bottom: 1px solid var(--primary-color); /* Adjust color and thickness as needed */
  }
  
  /* Flexbox container adjustments */
  .footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Logo Styling */
  .footer img {
    max-width: 50px; /* Limit logo size */
    height: auto;
    width: 50px;
    height: 50px;
  }
  
  /* Hyperlink Styling */
  .footer a {
    color: var(--accent-color); /* Bootstrap primary blue color */
    text-decoration: none;
    font-size: 16px;
    margin-right: 15px; /* Space between links */
  }
  
  .footer a:hover {
    color: var(--accent-color); /* Darker blue on hover */
    text-decoration: underline;
  }
  
  /* Social Icon Styling */
  .social-icon {
    width: 24px; /* Icon width */
    height: 24px; /* Icon height */
    margin-left: 10px; /* Space between social icons */
  }
  
  /* Adjusting layout for smaller screens */
  @media (max-width: 768px) {
    .footer .container {
        flex-direction: column;
        text-align: center;
    }
  
    .footer a {
        display: inline-block;
        margin: 10px 0;
    }
  
    .social-icon {
        margin: 10px 5px;
    }


  }

  /* FAQ */

    .faq {
      width: 100%;
      border-top: 1px solid var(--secondary-color);
  }
  .faq-item {
      border-bottom: 1px solid var(--secondary-color);
      padding: 20px 0;
  }
  .faq-question {
      cursor: pointer;
      font-weight: bold;
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--secondary-color); /* Initially grey */
      transition: color 0.3s ease; /* Smooth color transition */
  }
  .faq-question:hover {
      color: var(--accent-color); /* Turn blue on hover */
  }
  .faq-question.active {
      color: var(--accent-color); /* Stay blue when selected */
  }
  .faq-answer {
      max-height: 0; /* Initially hidden */
      overflow: hidden; /* Hide content overflow */
      padding: 0 10px; /* Padding for aesthetics */
      transition: max-height 0.4s ease, padding 0.4s ease; /* Smooth transition for height and padding */
  }
  .faq-answer.open {
      max-height: 1000px; /* Large value to accommodate large answers */
      padding: 20px 10px; /* Add padding when open */
  }
  .faq-icon i {
      transition: transform 0.4s ease; /* Smooth transition for rotation */
  }
  .faq-icon.rotate i {
      transform: rotate(180deg); /* Rotate the icon when open */
  }