/* ========================================
   Landing Page - Mobile Overrides
   ======================================== */

@media (max-width: 768px) {

    /* --- Carousel / Hero Banner --- */
    .landing-page .carousel,
    .landing-page .carousel .item {
        height: 320px;
    }

    .landing-page .carousel-caption,
    .landing-page .carousel-caption.blank {
        top: 50px;
        left: 5%;
    }

    .landing-page .carousel-caption.blank {
        color: #2f4050 !important;
    }

    .landing-page .carousel-caption h1 {
        font-size: 22px;
    }

    .landing-page .carousel-caption p {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .landing-page .carousel-caption .btn {
        font-size: 12px;
        padding: 8px 14px;
    }

    .landing-page .header-back {
        height: 320px;
    }

    .landing-page .carousel-indicators {
        padding-right: 0;
    }

    .landing-page .carousel-control {
        display: none;
    }

    /* --- Navy line --- */
    .landing-page .navy-line {
        margin: 15px auto 0;
    }

    /* --- Sections - tighten vertical spacing --- */
    .landing-page section.features,
    .landing-page section.pricing,
    .landing-page section.gray-section,
    .landing-page section.navy-section,
    .landing-page section.cta-banner {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .landing-page .features-block [class*="col-"] {
        padding-top: 15px !important;
    }

    .landing-page .features-block {
        margin-top: 20px;
    }

    .landing-page .features-text {
        margin-top: 0;
    }

    .landing-page .features h1,
    .landing-page .gray-section h1 {
        font-size: 24px;
    }

    /* --- Why Cloud images --- */
    .landing-page .features-block img {
        max-width: 70%;
        margin: 0 auto;
    }

    /* --- Pricing cards --- */
    .landing-page .pricing-plan {
        margin: 15px 10px 0 10px;
    }

    .landing-page .pricing .row > [class*="col-"]:nth-child(2) .pricing-plan {
        margin-top: 35px;
    }

    /* --- Testimonials --- */
    .landing-page .testimonials h1 {
        font-size: 24px;
    }

    /* --- Contact section --- */
    .landing-page .contact [class*="col-"] {
        margin-bottom: 15px;
    }

    /* --- Navbar --- */
    .landing-page .navbar .navbar-header {
        display: block;
        float: none;
    }

    .landing-page .navbar .navbar-header .navbar-toggle {
        background-color: #ffffff;
        padding: 9px 10px;
        border: none;
    }

    .landing-page .navbar-default {
        background-color: #fff;
        border-color: #fff;
        padding: 15px 0;
    }

    .landing-page .navbar-wrapper .navbar {
        padding-top: 0;
        padding-bottom: 5px;
        border-bottom: 1px solid #e7eaec;
        border-radius: 0;
        padding-left: 15px;
        padding-right: 5px;
    }

    .landing-page .navbar .navbar-brand {
        margin-top: 6px;
        border-radius: 5px;
        font-size: 12px;
        padding: 10px;
        height: auto;
    }

    .landing-page .navbar-default .nav li a {
        color: #676a6c;
    }

    .landing-page .navbar-default .nav li a:hover {
        color: #76be2c;
    }

    .landing-page .navbar-default .navbar-nav > .active > a,
    .landing-page .navbar-default .navbar-nav > .active > a:hover {
        color: inherit;
    }

    .landing-page .navbar-default .navbar-nav > .active > a:focus {
        background: transparent;
        color: inherit;
    }

    .landing-page .nav > li > a {
        padding: 25px 10px 15px 10px;
    }

    .landing-page .navbar-nav > li > a {
        padding: 20px 10px;
    }
}