/* ============================================================
   SAVINGS SAVY — RESPONSIVE FIXES
   Append this file AFTER home.css (and style.css) in your HTML.
   Usage:  <link rel="stylesheet" href="/css/home-responsive-fixes.css" />
   ============================================================ */


/* ----------------------------------------------------------
   1. GLOBAL — images & iframes never overflow their container
   ---------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}
iframe {
    max-width: 100%;
}


/* ----------------------------------------------------------
   2. NAVBAR — collapse cleanly on mobile
   ---------------------------------------------------------- */

/* Remove fixed pixel heights so the bar wraps naturally */
@media (max-width: 767px) {
    nav {
        height: auto !important;
        min-height: 50px;
    }
    nav.smaller {
        height: auto !important;
    }

    /* Logo size on mobile */
    nav .navbar-brand {
        width: 160px !important;
        height: 55px !important;
        background-size: 120px !important;
        margin-top: 0 !important;
        line-height: 55px !important;
    }
    nav.smaller > .container-fluid .navbar-brand {
        width: 160px !important;
    }

    /* Collapsed menu items stack vertically */
    .navbar-default .navbar-nav > li {
        padding: 6px 15px !important;
    }
    .navbar-default .navbar-nav > li > a {
        font-size: 14px !important;
    }

    /* Sign-in button inside collapsed menu */
    .navbar-collapse .login-btn {
        margin: 8px 15px 12px;
        border-radius: 25px;
        display: inline-block;
    }

    /* Hamburger button positioning */
    .navbar-toggle {
        margin-top: 8px;
        margin-right: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    nav {
        height: auto !important;
        min-height: 60px;
    }
    nav.smaller {
        height: auto !important;
    }
    /* Keep logo a sensible size on tablet */
    nav .navbar-brand {
        width: 160px !important;
        height: 60px !important;
        background-size: 120px !important;
        margin-top: 0 !important;
        line-height: 60px !important;
    }
    .navbar-default .navbar-nav > li {
        padding: 10px 5px !important;
    }
    .navbar-default .navbar-nav > li > a {
        font-size: 13px !important;
    }
    nav .navbar-right {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }
}


/* ----------------------------------------------------------
   3. BANNER — readable text & sensible height on small screens
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #banner {
        min-height: 0 !important;
        padding-top: 90px !important;  /* clear fixed navbar */
        padding-bottom: 40px;
    }

    #banner .heading2 {
        font-size: 28px !important;
        line-height: 32px !important;
    }
    #banner .heading3 {
        font-size: 15px !important;
        line-height: 20px !important;
        padding-top: 10px !important;
    }
    #banner .heading {
        font-size: 17px !important;
        line-height: 22px !important;
        padding-top: 15px !important;
    }
    #banner .start-btn {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #banner {
        padding-top: 140px !important;
    }
    #banner .heading2 {
        font-size: 36px !important;
        line-height: 40px !important;
    }
}


/* ----------------------------------------------------------
   4. WELCOME SECTION — buttons stack on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #welcome {
        padding-top: 40px !important;
        padding-bottom: 20px;
    }
    .wel-head {
        font-size: 22px !important;
    }
    .wel-subhead {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    /* Stack 'Our Team' and 'Happy Investors' buttons vertically */
    .more1,
    .more2 {
        display: block !important;
        text-align: center;
        margin: 8px auto !important;
        width: 80%;
    }
}


/* ----------------------------------------------------------
   5. POWER-SIP CALCULATOR — responsive video & calc panel
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #power-sip {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }
    .power-sip-head {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .power-sip-subhead {
        font-size: 16px !important;
        line-height: 20px !important;
        padding-bottom: 15px !important;
    }

    /* Make YouTube embed fully fluid */
    #power-sip .video {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    #power-sip .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    /* Calculator card full width */
    #sip-calc {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .calc-body {
        padding: 15px !important;
    }
    .calc-head {
        font-size: 18px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #power-sip .video {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    #power-sip .video iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100% !important;
        height: 100% !important;
    }
}


/* ----------------------------------------------------------
   6. BENEFITS OF SIP — reduce padding on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #benefits-sip {
        min-height: 0 !important;
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
    .benefits-sip-head {
        font-size: 22px !important;
    }
    #benefits-sip .para {
        padding: 10px 15px !important;  /* was 80px */
    }
    .benefits-numbers {
        font-size: 16px !important;
    }
}


/* ----------------------------------------------------------
   7. SERVICES SECTION — cards stack evenly
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #services {
        min-height: 0 !important;
        padding-top: 30px !important;
    }
    .services-heading {
        font-size: 22px !important;
        line-height: 30px !important;
        margin-bottom: 30px !important;
    }
    .service-temp {
        min-height: 0 !important;
        margin-bottom: 25px;
    }
    .service-temp-text {
        min-height: 0 !important;
    }
}


/* ----------------------------------------------------------
   8. REASON TO INVEST — feature cards responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .reason-invest {
        padding-top: 40px !important;
        padding-bottom: 30px !important;
        background-attachment: scroll !important; /* fixed bg causes perf issues on mobile */
    }
    .reason-invest-head {
        font-size: 22px !important;
        line-height: 26px !important;
    }
    .reason-invest-head p {
        font-size: 14px !important;
        margin-bottom: 25px !important;
    }
    .reason-invest .features {
        padding: 30px 0 !important;
        margin-bottom: 15px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .reason-invest {
        background-attachment: scroll !important;
    }
}


/* ----------------------------------------------------------
   9. FINNAPP — scale down large fonts, fix background on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #finnapp {
        /* Show only the gradient background on mobile; phone mockup image would overflow */
        background-image: url(/images/finnapp-bg.jpg) !important;
        background-position: center !important;
        background-size: cover !important;
        min-height: 0 !important;
        padding-top: 40px !important;
        padding-bottom: 40px;
    }
    .finnapp-head {
        font-size: 24px !important;
        line-height: 28px !important;
        padding-top: 10px !important;
    }
    .finnapp-subhead {
        font-size: 26px !important;
        line-height: 30px !important;
    }
    .finnapp-para1 {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    /* App store buttons side by side */
    #finnapp .col-xs-12.text-left img {
        max-width: 140px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #finnapp {
        min-height: 500px !important;
        background-position: 110%, center !important;
    }
    .finnapp-head   { font-size: 26px !important; line-height: 30px !important; }
    .finnapp-subhead { font-size: 30px !important; line-height: 34px !important; }
}


/* ----------------------------------------------------------
   10. FEEDBACK / TESTIMONIALS — prevent caption overflow
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #feedback {
        min-height: 0 !important;
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }
    .feedback-head {
        font-size: 22px !important;
    }
    #feedback .carousel-inner > .item {
        min-height: 0 !important;
    }
    .testimonial-txt {
        font-size: 15px !important;
        line-height: 22px !important;
    }
    .testimonial-txt p {
        padding: 10px 10px !important; /* was 40px sides */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        font-size: 14px !important;
        line-height: 22px !important;
    }
    #feedback .carousel-caption {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .testimonial-txt {
        font-size: 17px !important;
    }
    .testimonial-txt p {
        padding: 15px 20px !important;
    }
}


/* ----------------------------------------------------------
   11. SOLUTIONS / LEARN SECTION — tile blocks & bottom strip
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #solutions-plan {
        min-height: 0 !important;
        padding-top: 30px !important;
    }
    .solutions-plan-head {
        font-size: 20px !important;
        line-height: 26px !important;
        margin-bottom: 25px !important;
    }
    /* Give tiles a fixed height that works on small screens */
    #solutions-plan .tile-block {
        height: 120px !important;
    }
    /* Bottom blue strip: stack text + button vertically */
    #solutions-plan .lastblue-strip {
        font-size: 14px !important;
        line-height: 22px !important;
        text-align: center !important;
        padding: 12px 10px !important;
    }
    #solutions-plan .lastblue-strip .start-btn {
        float: none !important;
        display: block;
        margin: 10px auto 0 !important;
        padding: 8px 20px !important;
    }
    /* Give each goal card bottom breathing room */
    #solutions-plan .goal {
        margin-bottom: 20px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #solutions-plan .lastblue-strip {
        font-size: 14px !important;
        line-height: 28px !important;
    }
    #solutions-plan .tile-block {
        height: 130px !important;
    }
}


/* ----------------------------------------------------------
   12. CONTACT / FOOTER — columns stack, iframe height adapts
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .contact {
        min-height: 0 !important;
    }
    .contact .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .contact-companyname {
        margin-top: 30px !important;
        font-size: 17px !important;
    }
    /* Footer navigation list */
    ul.list-ftr {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    /* Contact form iframe: auto height via wrapper trick */
    .contact iframe {
        height: 320px !important;
    }
    /* Owner details wrap to single column */
    .owner-details .col-xs-12 {
        margin-bottom: 6px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .contact .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    ul.list-ftr {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}


/* ----------------------------------------------------------
   13. SIP CALCULATOR INPUTS — full-width on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #sip-calc input[type="number"] {
        width: 100% !important;
    }
    /* Amount result row */
    #sip-calc .amount {
        text-align: left !important;
    }
}


/* ----------------------------------------------------------
   14. MISCELLANEOUS SMALL-SCREEN FIXES
   ---------------------------------------------------------- */

/* Prevent the fixed floating tab from covering content on mobile */
@media (max-width: 767px) {
    .mfsahihai {
        display: none !important;
    }
    .t1 {
        display: none !important;
    }
}

/* Benefits icons + text alignment */
@media (max-width: 480px) {
    #benefits-sip .col-xs-2 {
        padding-right: 5px;
    }
    #benefits-sip .col-xs-10 {
        padding-left: 5px;
    }
    .benefits-numbers {
        font-size: 14px !important;
        line-height: 22px !important;
    }
}

/* Services section — prevent text overflowing card on sm screens */
@media (min-width: 768px) and (max-width: 991px) {
    .service-temp {
        min-height: 0 !important;
        margin-bottom: 20px;
    }
    .service-temp-text {
        min-height: 0 !important;
    }
}

/* General: all section headings scale down a notch on mobile */
@media (max-width: 767px) {
    .reason-invest-head,
    .benefits-sip-head,
    .feedback-head,
    .solutions-plan-head,
    .services-heading,
    .wel-head {
        word-break: break-word;
    }
}