/* Add here all your CSS customizations */

/* Top bar (language switcher + phone) — modeled on Porto's nav-top */
#header .nav-top {
    float: right;
    margin-right: 8px;
}
#header .nav-top > li.lang-switcher-top > a {
    display: inline-block;
    padding: 4px 7px;
    margin-left: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #1d3b56;
}
#header .nav-top > li.lang-switcher-top > a.active-lang {
    color: #fff;
    background-color: #1d3b56;
    border-color: #1d3b56;
}
#header .nav-top > li.phone span {
    font-size: 12px;
    font-weight: 600;
}
#header .nav-top > li.phone i {
    margin-right: 5px;
}

/* Footer credit + privacy link row */
.footer-copyright .footer-links a {
    color: #fff;
    text-decoration: underline;
}
.footer-copyright .footer-links a:hover {
    color: #ccc;
}
.footer-copyright .footer-links .text-muted {
    color: #999;
    margin: 0 4px;
}

/* Home-intro callout — brand navy skin over Porto's default #171717.
   The lighter text tones keep the template's greys readable on navy. */
.home-intro {
    background-color: #1d3b56;
}
.home-intro p span {
    color: #b9c6d4;
}
/* The cursive accent inherits the skin's navy, which is invisible on the navy
   strip (2.02:1). A light blue keeps it distinct from the white body copy and
   clears AA (5.1:1). */
.home-intro p em {
    color: #7fb3e0;
}
.home-intro .get-started a:not(.btn) {
    color: #c9d6e2;
}
.home-intro .get-started a:not(.btn):hover {
    color: #fff;
}
/* The "or" text node around the learn-more link keeps the template's #777
   (2.59:1 on navy). Match the sub-line instead (6.7:1). */
.home-intro .learn-more {
    color: #b9c6d4;
}
/* btn-primary is skinned navy, so on the navy strip the button had no shape at
   all (1.00:1 background-vs-background). Invert it: white button, navy label.
   The border needs !important because default.css sets
   .btn-primary { border-color: #1d3b56 !important }, which would otherwise
   leave a navy edge on the white pill. */
.home-intro .get-started .btn-primary {
    background-color: #fff;
    border-color: #fff !important;
    color: #1d3b56;
}
.home-intro .get-started .btn-primary:hover,
.home-intro .get-started .btn-primary:focus,
.home-intro .get-started .btn-primary:active {
    background-color: #e3ecf5;
    border-color: #e3ecf5 !important;
    color: #163050;
}

/* Hero captions below the desktop breakpoint.
   Revolution Slider writes inline top/left (from the fixed data-x/data-y) and
   an inline transform for the entry animation, both computed against its
   1170px design width — on narrow viewports that puts the captions off the
   right edge. Only !important beats those inline styles. Desktop (>= 992px)
   is deliberately untouched. Offsets use vh because the fullscreen slide box
   tracks the viewport height. */
@media (max-width: 991px) {
    .slider-container-fullscreen .tp-caption {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: center !important;
        white-space: normal !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
    .slider-container-fullscreen .top-label {
        top: 20vh !important;
        font-size: 18px !important;
        line-height: 24px !important;
    }
    .slider-container-fullscreen .main-label {
        top: 26vh !important;
        font-size: 42px !important;
        line-height: 48px !important;
    }
    .slider-container-fullscreen .bottom-label {
        top: 38vh !important;
        font-size: 16px !important;
        line-height: 22px !important;
    }
    .slider-container-fullscreen .center-caption {
        top: 48vh !important;
    }
}

@media (max-width: 767px) {
    .slider-container-fullscreen .top-label {
        top: 22vh !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }
    .slider-container-fullscreen .main-label {
        top: 28vh !important;
        font-size: 32px !important;
        line-height: 36px !important;
    }
    .slider-container-fullscreen .bottom-label {
        top: 40vh !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
    .slider-container-fullscreen .center-caption {
        top: 50vh !important;
    }
    .slider .main-button {
        font-size: 16px !important;
        line-height: 18px !important;
        padding: 14px 20px !important;
    }
}

/* Language switcher (EN/ES/PT) — legacy main-nav switcher (kept for reference) */
#mainMenu > li.lang-switcher > a {
    display: inline-block;
    padding: 6px 8px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    border-radius: 3px;
}
#mainMenu > li.lang-switcher > a.active-lang {
    color: #fff;
    background-color: #1d3b56;
    border-color: #1d3b56;
}