@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,100;1,300&display=swap);

/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
 /*
 * ===================================================================
 * CSS for FAQ Section
 * Extracted and organized from app.css
 * ===================================================================
*/

/* --- General FAQ Section Styles --- */

.get-started-btn {
    background-color: red;
    color: white;
    padding: 10px 24px;
    text-decoration: none;
    border-radius: 22px;
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    text-align: center;
    padding: 7px 58px;
  }

  @media (max-width: 768px) {
    .get-started-btn {
      font-size: 16px;
      padding: 8px 20px;
    }
  }

  @media (max-width: 480px) {
    .get-started-btn {
      font-size: 14px;
      padding: 6px 16px;
      display: block;
      width: 100%;
    }
  }

#bonus-text {
  font-size: 36px;
}
@media (max-width: 768px) {
  #bonus-text {
    font-size: 19px;
  }

   #bonus-desc {
 font-size: 14px !important;
 }
}

/* Inforgraphic Cards */

.ux-flexbox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
}

.ux-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 30%;
    align-items: baseline;
    height: 300px;
    border-radius: 20px;
}

.ux-card-number {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin: 10px 0px;
    border-radius: 0px 50px 50px 0px;
    color: white;
    text-shadow: 0px 3px 5px black;
    font-weight: 500;
    font-size: 20px;
    position: relative;
}

.ux-card-text {
    
    text-align: center;
    font-weight: 300;
    padding: 0 20px;

}

.ux-card-number::before {
    content: '';
    width: 34px;
    height: 90px;
    position: absolute;
    left: -33px;
    top: 0px;
    border-radius: 50px 0px 0px 50px;
    z-index: -1;
    background: -moz-linear-gradient(bottom, #95B7A2, #AED2BC);
}

.ux-card-number::after {
    content: '';
    width: 25px;
    height: 40px;
    position: absolute;
    left: -25px;
    bottom: -40px;
    border-radius: 50px 0px 0px 50px;
    z-index: -1;
}

.ux-flex-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10px auto;
}

img.ux-card-img {
    width: 30%;
}

/* GREEN CARD */

.ux-card-green {
    background: #f9fbfa;
    box-shadow: 4px 4px 4px #AED2BC;
}

.ux-card-number-green {
    background: linear-gradient(to left, #FCFCFC, #AED2BC);
    box-shadow: 0px 2px 2px #AED2BC;
}

.ux-card-number-green::before {
    background: #AED2BC;
}

.ux-card-number-green::after {
    background: #95b7a2;
}

/* BLUE CARD */

.ux-card-blue {
    background: #f7ffff;
    box-shadow: 4px 8px 1px #92E8EB;
}

.ux-card-number-blue {
    background: linear-gradient(to left, #FDFFFE, #92E8EB);
    box-shadow: 0px 2px 2px #92E8EB;
}

.ux-card-number-blue::before {
    background: #92E8EB;
}

.ux-card-number-blue::after {
    background: #71bdbf;
}

/* ORANGE CARD */

.ux-card-orange {
    background: #fdf8f3;
    box-shadow: 4px -2px 1px #ff2e39;
}

.ux-card-number-orange {
    background: linear-gradient(to left, #FDFFFE, #ff2e39);
    box-shadow: 0px 2px 2px #ff2e39;
}

.ux-card-number-orange::before {
    background: #ff2e39;
}

.ux-card-number-orange::after {
    background: #ff2e39;
}

/* RESPONSIVE */

@media only screen and (max-width: 800px) {
    .ux-card {
        width: 35%;
        margin-top: 20px;
    }

    img.ux-card-img {
        width: 30%;
    }
}

@media only screen and (max-width: 500px) {
    .ux-card {
        width: 70%;
    }
}

/* ===== New Styling for Card-Based FAQ List (with new class) ===== */

.faq--cardlist {
    margin-top: 40px;
    padding-bottom: 20px;
}

.faq--cardlist .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
}

.faq--cardlist .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.faq--cardlist .card-title a {
    display: block;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 12px;
    font-size: 18px;
    color: #333;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.faq--cardlist .card-title a:hover {
    background-color: #ff2e39;
    color: #fff;
}

/* Optional: Responsive adjustments */
@media screen and (max-width: 767px) {
    .faq--cardlist .card-title a {
        font-size: 16px;
        padding: 16px;
    }
}

/* ===== Accordion-Only FAQ Styling (Scoped with .faq--accordion) ===== */

.faq--accordion .accordion-item {
    margin: 10px 0;
    border-top: 1px dashed #ff2e39;
    border-bottom: none; /* ❌ removed bottom border */
    border-left: 0;
    border-right: 0;
}

.faq--accordion .accordion-header {
    padding: 0 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.faq--accordion .accordion-button {
    position: relative;
    background-color: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #7d7d95;
    box-shadow: none;
    padding-left: 0;
    padding-right: 32px;
    border: none;
    border-radius: 0;
}

/* Icon styling */
.faq--accordion .accordion-button i {
    color: #ff2e39;
    position: absolute;
    right: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: transform 0.3s ease;
    line-height: 1;
}

/* Toggle icon content */
.faq--accordion .accordion-button.collapsed i::before {
    content: "\f067"; /* plus */
}

.faq--accordion .accordion-button:not(.collapsed) {
    color: #ff2e39;
}

.faq--accordion .accordion-button:not(.collapsed) i::before {
    content: "\f068"; /* minus */
}

/* Hide Bootstrap default arrow */
.faq--accordion .accordion-button::after {
    display: none;
}

.faq--accordion .accordion-body {
    padding: 1.5rem;
}
/* FAQ Title */
.faqIntroTitle {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

/* FAQ Intro Content */
.faqIntroContent {
    font-style: italic;
    font-weight: 300;
    font-size: 20px;
    margin-bottom: 36px;
    text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 1199px) {
    .faqIntroTitle {
        font-size: 2.2rem;
    }

    .faqIntroContent {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .faqIntroTitle {
        font-size: 1.8rem;
    }

    .faqIntroContent {
        font-size: 14px;
    }
}