/* =========================================================
   FAQ EXPANSION / ACCORDION
========================================================= */

#FaqAccordion {
    overflow: hidden;
    transition: max-height 0.8s ease-in-out;
}

/* Hide after 5th item by default */
#FaqAccordion:not(.show-all) .accordion-item:nth-of-type(n+6) {
    display: none;
}

/* Reveal animation */
#FaqAccordion.show-all .accordion-item {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    animation: faqSlideIn 0.45s ease-out forwards;
}

/* Stagger effect */
#FaqAccordion.show-all .accordion-item:nth-of-type(6) { animation-delay: .05s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(7) { animation-delay: .1s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(8) { animation-delay: .15s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(9) { animation-delay: .2s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(10) { animation-delay: .25s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(11) { animation-delay: .3s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(12) { animation-delay: .35s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(13) { animation-delay: .4s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(14) { animation-delay: .45s; }
#FaqAccordion.show-all .accordion-item:nth-of-type(15) { animation-delay: .5s; }

@keyframes faqSlideIn {
    from { opacity: 0; transform: translateY(25px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Show more button */
.show-more-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-weight: 600;
    margin-top: 15px;
    padding: 0;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.show-more-btn:hover {
    color: #0056b3;
}

/* =========================================================
   NAVIGATION / DROPDOWN MENUS
========================================================= */

.others-option {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.navbar-nav .dropdown {
    position: relative;
}

.navbar-nav .dropdown-menu-custom {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #ffffff;
    border-radius: 6px;
    padding: 12px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 999;
}

/* Show dropdown */
.navbar-nav .dropdown:hover .dropdown-menu-custom,
.navbar-nav .dropdown.show .dropdown-menu-custom {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown links */
.dropdown-menu-custom a,
.navbar-nav .dropdown .dropdown-menu-custom a {
    display: block;
    padding: 15px 22px !important;
    color: #0d1820 !important;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: .2s;
}

.dropdown-menu-custom a:hover,
.navbar-nav .dropdown .dropdown-menu-custom a:hover {
    background: rgba(0,167,91,0.12) !important;
    color: #00a75b !important;
}

/* Tailwind override */
.text-[13px] { display: none; }

/* Mobile dropdown */
@media(max-width: 991px) {
    .navbar-nav .dropdown-menu-custom {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 10px;
        display: none !important;
    }

    .navbar-nav .dropdown.mobile-open .dropdown-menu-custom {
        display: block !important;
    }

    .navbar-nav .dropdown > .nav-link {
        position: relative;
    }

    .navbar-nav .dropdown > .nav-link::after {
        content: "▾";
        float: right;
        margin-left: 6px;
        font-size: 14px;
        transition: .3s;
    }

    .navbar-nav .dropdown.mobile-open > .nav-link::after {
        transform: rotate(180deg);
    }
}

/* =========================================================
   ANIMATIONS: PULSE / TYPEWRITER
========================================================= */

.pulse {
    display: inline-block;
    animation: pulseStrong 2.5s ease-in-out infinite;
}

@keyframes pulseStrong {
    0% { opacity:1; transform:scale(1); }
    50% { opacity:.6; transform:scale(1.1); }
    100% { opacity:1; transform:scale(1); }
}

.reload-link {
    color:#00b894;
    font-weight:600;
    text-decoration:underline;
    transition:color .3s ease;
}
.reload-link:hover {
    color:#00916e;
    text-decoration:none;
}

.typewriter {
    display: inline-block;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #007bff;
    animation: typing 8s steps(37,end) infinite, blinkCursor .75s step-end infinite;
}

@keyframes typing {
    0% { width:0ch; }
    40% { width:37ch; }
    60% { width:37ch; }
    100% { width:0ch; }
}

@keyframes blinkCursor { 50% { border-color: transparent; } }

/* =========================================================
   CONTACT BACKGROUND IMAGE
========================================================= */

.let-contact-area-with-bg-image::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.55);
    z-index:-1;
}

#contact.let-contact-area-with-bg-image {
    background-image:url('http://mortgages.thelogicbox.com/assets/img/_template1/let-contact-bg-2.jpg') !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
}

 

/* =========================================================
   SCROLL REVEAL ANIMATIONS
========================================================= */

.reveal,
.reveal-left,
.reveal-right,
.reveal-up,
.reveal-card {
    opacity:0;
    transform:translateY(40px);
    transition:opacity .65s ease-out, transform .65s ease-out;
    will-change:opacity,transform;
}

.reveal-left { transform:translateX(-50px); }
.reveal-right { transform:translateX(50px); }
.reveal-up { transform:translateY(50px); }

.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-up.in-view,
.reveal-card.in-view {
    opacity:1;
    transform:translateX(0) translateY(0);
}

.reveal-card {
    transform:translateY(40px) scale(.96);
}

.reveal-card.in-view {
    transform:translateY(0) scale(1);
}

/* =========================================================
   PARALLAX BACKGROUND
========================================================= */

.parallax-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    will-change: background-position;
}


/* =========================================================
   subscribe nwsltter BACKGROUND
========================================================= */

.subscribe-style-area {
    background-image: url("../img/homepage-img/subscribe-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* --- ALWAYS SHOW STICKY NAV STYLE ON DESKTOP --- */
@media (min-width: 992px) {

    .main-navbar,
    .navbar-style-two,
    .navbar-style-two .navbar {
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* make phone number always visible */
    .main-navbar .others-option .call-btn {
        color: #0d1820 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* make APPLY NOW always green like sticky version */
    .main-navbar .sign-up {
        background: #00a75b !important;
        color: #fff !important;
        border-radius: 6px !important;
        padding: 10px 22px !important;
        font-weight: 600 !important;
    }

    /* Latest News link always visible */
    .main-navbar .log-in {
        color: #0d1820 !important;
        opacity: 1 !important;
    }
}

/* keep original mobile nav untouched */


/* === FINAL FIX: FUN FACT CARD LAYOUT === */
.fun-fact-style-card {
    display: block !important;      /* STOP being flex */
    padding: 26px 30px;
    border-radius: 14px;
    background: #fff;
    margin-bottom: 22px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.fun-fact-style-card.bg-E5F9F4 {
    background-color: #E5F9F4 !important;
}

/* Force proper row layout INSIDE the card */
.fun-fact-style-card .d-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* BIG GREEN NUMBER (left side) */
.fun-fact-style-card h3 {
    margin: 0;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: #00C195;
    white-space: nowrap;
}

/* LABEL TEXT (right side) */
.fun-fact-style-card .ms-2 {
    margin-left: 14px !important;
}

.fun-fact-style-card p {
    margin: 0;
    color: #0d1820;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
}
/* FORCE NAVBAR LOOK CONSISTENT ON EVERY PAGE */
@media (min-width: 992px) {

    .main-navbar .navbar.navbar-style-two {
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Ensure left-aligned logo, center nav, right controls */
    .navbar-nav {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .main-navbar .others-option {
        margin-left: 0 !important;
    }
}

