/* Custom color accents from screenshot */
:root {
    --brand-orange: #ff9900;
    --brand-orange-hover: #e08800;
    --brand-bg: #fffaf4;
}

body.bg-light-custom {
    background-color: var(--brand-bg);
}
.btn-warning-custom a {
    color: #000;
    font-weight: 500;
    text-decoration: none;
}
.text-warning-custom {
    color: var(--brand-orange) !important;
}
button.btn.btn-outline-warning-custom.rounded-pill.px-4.fw-bold a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
}
.btn-warning-custom {
    background: linear-gradient(135deg, #ffb347, #ffcc33);
    background-color: var(--brand-orange);
    border: none;
}

.btn-warning-custom:hover {
    background-color: var(--brand-orange-hover);
    transform: translateY(-1px);
}

.btn-outline-warning-custom {
    border-row-color: var(--brand-orange);
    border: 2px solid var(--brand-orange);
    color: var(--brand-orange);
}

.btn-outline-warning-custom:hover {
    background-color: var(--brand-orange);
    color: white;
}

/* Enhancing standard elements */
.fw-extrabold {
    font-weight: 800;
}

.fw-bold.text-warning-emphasis img {
    width: 100%;
    border-radius: 18px;
}
a.navbar-brand.fw-bold.text-warning-custom.fs-3 img {
    width: 140px;
}
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 3rem rgba(255, 153, 0, 0.075) !important;
}

/* Customizing Bootstrap default accordion active states */
.accordion-button:not(.collapsed) {
    background-color: #fff4e6;
    color: var(--brand-orange-hover);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(255, 153, 0, 0.2);
}
/* Styling to match image details perfectly */
.why-choose-section {
    background-color: #fbfcff; /* Soft, almost-white background */
    font-family: 'Inter', -apple-system, sans-serif;
}

.fw-extrabold {
    font-weight: 800;
}

.text-dark-custom {
    color: #111625;
}

.text-orange-custom {
    color: #fcae1d; /* Vibrant yellow-orange from the image text */
}

.text-muted-custom {
    color: #626875;
    font-size: 0.95rem;
    line-height: 1.6;
}

.max-w-700 {
    max-width: 700px;
}

.letter-spacing-1 {
    letter-spacing: 0.5px;
}

.fs-custom-tag {
    font-size: 0.75rem !important;
}

/* Card exact layout styling */
.feature-card-exact {
    background: #ffffff;
    border-radius: 28px; /* Clean soft-rounded borders */
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-shadow: 0 10px 40px rgba(225, 230, 240, 0.4); /* Subtle cloud shadow layout */
    transition: transform 0.3s ease;
}

.feature-card-exact:hover {
    transform: translateY(-5px);
}

/* Orange Icon Box with Glow Effect */
.icon-box-orange {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #ffaa00, #ff8800);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    /* This makes the soft orange glow shadow beneath the icon */
    box-shadow: 0 12px 24px rgba(255, 136, 0, 0.35); 
}

.icon-box-orange svg {
    width: 28px;
    height: 28px;
}

/* Custom Orange Bullet Points */
.custom-orange-bullets li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #4a505e;
    font-weight: 500;
}

.custom-orange-bullets li::before {
    content: "•";
    color: #fcae1d; /* Matching orange color dots */
    font-size: 1.3rem;
    position: absolute;
    left: 0;
    top: -4px;
}

/* Subtle decorative blur blob layout element in background image */
.bg-blur-circle {
    position: absolute;
    width: 140px;
    height: 140px;
    background: #e2d9ff;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
    top: 25%;
    left: 25%;
    z-index: 0;
}