/*
 * Styles added during the Laravel conversion: the hero slider that replaced
 * Slider Revolution, and form feedback that Contact Form 7 used to provide.
 */

/* Hero slider — sits behind the transparent header like the theme's .rev_slider_wrapper did. */
/* The pull-up goes on the inner track (as the WordPress theme did): the section stays in flow,
   the slider slides up behind the transparent header, and the section shrinks by the same amount. */
.hero-slider { display: block; width: 100%; position: relative; }
.hero-slider__track { width: 100%; overflow: hidden; }

/* On the home page the header floats over the slider (a negative margin on the slider is ignored here,
   so the header is taken out of the flow instead). The slide's own top padding keeps text clear of it. */
@media (min-width: 992px) {
    .home .top-bar-area { position: absolute; top: 0; left: 0; width: 100%; }
    .home .mainmenu-area { position: absolute; top: 51px; left: 0; width: 100%; }
    .home .mainmenu-area.stricky-fixed { position: fixed; top: 0; }
}
.elementor-widget-wrap:has(> .elementor-widget-slider_revolution) { padding: 0 !important; }
.hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    height: 900px;
    background-size: cover;
    background-position: center;
}
.hero-slide__overlay { position: absolute; inset: 0; background: rgba(27, 48, 83, 0.8); }
.hero-slide .container { position: relative; z-index: 1; padding-top: 140px; }
.hero-slide__content { max-width: 664px; }
.hero-slide__title {
    margin: 0 0 30px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 55px;
    font-weight: 700;
    line-height: 70px;
    letter-spacing: 1px;
}
.hero-slide__text {
    max-width: 580px;
    margin: 0 0 40px;
    color: #f3f3f3;
    font-family: 'Hind', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 1px;
}
.hero-btn {
    display: inline-block;
    margin: 0 15px 10px 0;
    padding: 12px 28px;
    border: 2px solid #fff;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}
.hero-btn:hover, .hero-btn:focus { color: #fff; }
.hero-btn--outline:hover { background: #45c4e9; border-color: rgba(69, 196, 233, 0.75); }
.hero-btn--solid { background: #45c4e9; border-color: #45c4e9; }
.hero-btn--solid:hover { background: transparent; }
.hero-slider .owl-nav button.owl-prev,
.hero-slider .owl-nav button.owl-next,
.hero-slider .owl-nav .owl-prev,
.hero-slider .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    color: #fff;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    opacity: 0.75;
    transition: opacity 0.3s;
}
.hero-slider .owl-nav .owl-prev { left: 20px; }
.hero-slider .owl-nav .owl-next { right: 20px; }
.hero-slider .owl-nav .owl-prev:hover,
.hero-slider .owl-nav .owl-next:hover { opacity: 1; }
.hero-slider .owl-dots { position: absolute; bottom: 30px; width: 100%; text-align: center; }
.hero-slider .owl-dots .owl-dot span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: #999;
}
.hero-slider .owl-dots .owl-dot.active span { background: #fff; border-color: #000; }

@media (min-width: 1025px) { .hero-slider .owl-dots { display: none; } }
@media (max-width: 1240px) { .hero-slide { height: 768px; } }
@media (max-width: 991px) {
    /* Phones and tablets: the header sits above the slider as usual, so no extra room is needed.
       The slide content is kept inside the screen — Bootstrap's container is full width here. */
    .hero-slide .container { padding-top: 0; padding-left: 20px; padding-right: 20px; }
    .hero-slide__content { max-width: 100%; }
    .hero-slide__title { overflow-wrap: break-word; }
    .hero-btn { margin-right: 10px; padding: 10px 18px; font-size: 13px; }
}
@media (max-width: 1024px) {
    .hero-slide { height: 640px; }
    .hero-slider .owl-nav { display: none; }
}
@media (max-width: 778px) {
    .hero-slide { height: 560px; }
    .hero-slide__title { font-size: 40px; line-height: 50px; }
}
@media (max-width: 480px) {
    .hero-slide { height: 520px; }
    .hero-slide__title { font-size: 30px; line-height: 40px; }
    .hero-slide__text { font-size: 17px; }
}

/*
 * Main menu: ⌄ on dropdown items, and the mega menu (a top-level item whose sub-items are columns).
 * The mega panel is the item's direct <ul>, so the theme's hover and mobile toggle work unchanged.
 */
@media (min-width: 768px) {
    .main-menu .navigation > li.dropdown > a:after {
        content: "\f107";
        margin-left: 6px;
        font-family: FontAwesome;
        font-weight: normal;
    }

    /* The panel spans the whole white menu bar rather than hanging off its menu item. */
    .mainmenu-area .mainmenu-bg { position: relative; }
    .mainmenu-area .main-menu,
    .main-menu .navigation { position: static; }
    .main-menu .navigation > li.dropdown { position: relative; }
    .main-menu .navigation > li.mega-menu-item { position: static; }

    .main-menu .navigation > li > ul.mega-menu {
        display: flex;
        flex-wrap: wrap;
        left: 0;
        right: 0;
        width: auto;
        padding: 30px 15px 20px;
        background: #ffffff;
        border-top: 3px solid #45c4e9;
        border-bottom: 0;
        box-shadow: 0 15px 30px rgba(27, 48, 83, 0.15);
    }
    .main-menu .navigation > li > ul.mega-menu > li.mega-menu__col {
        display: block;
        flex: 1 1 0;
        float: none;
        clear: none;
        width: auto;
        min-width: 170px;
        padding: 0 20px 10px;
        border-bottom: 0;
    }
    .main-menu .navigation .mega-menu .mega-menu__title {
        display: block;
        float: none;
        width: auto;
        margin: 0 0 10px;
        padding: 0 0 12px;
        border-bottom: 1px solid #f0f0f0;
        background: none;
        color: #45c4e9;
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        text-transform: none;
    }
    .main-menu .navigation .mega-menu .mega-menu__title:before { content: none; }
    .main-menu .navigation .mega-menu a.mega-menu__title:hover { color: #1b3053; background: none; }

    .main-menu .navigation .mega-menu__links { margin: 0; padding: 0; list-style: none; }
    .main-menu .navigation .mega-menu__links li { display: block; float: none; width: auto; }
    .main-menu .navigation .mega-menu .mega-menu__links a {
        display: block;
        padding: 7px 0;
        background: none;
        color: #555555;
        font-family: 'Hind', sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        text-transform: none;
        transition: color 0.3s ease, padding-left 0.3s ease;
    }
    .main-menu .navigation .mega-menu .mega-menu__links a:hover,
    .main-menu .navigation .mega-menu .mega-menu__links li.current > a {
        padding-left: 5px;
        color: #45c4e9;
    }
}

/* "Business Setup ⌄" is long: tighten the top-level spacing so search and "Get a Quote" stay on the same row. */
@media (min-width: 1200px) {
    .main-menu .navigation > li > a { padding-left: 11px; padding-right: 11px; }
}

/* Phone menu: the theme hides third-level lists, but a mega menu's columns must show once it's opened. */
@media (max-width: 767px) {
    .main-menu .navbar-collapse .mega-menu .mega-menu__title {
        display: block;
        padding: 10px 10px 6px;
        background: #36b4d9;
        color: #ffffff;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }
    .main-menu .navbar-collapse .mega-menu .mega-menu__links { display: block !important; margin: 0; padding: 0; list-style: none; }
    .main-menu .navbar-collapse .mega-menu .mega-menu__links li { display: block; float: none; width: 100%; border-top: 1px solid #36b4d9; }
    .main-menu .navbar-collapse .mega-menu .mega-menu__links a {
        display: block;
        padding: 8px 10px 8px 25px !important;
        background: #45c4e9;
        color: #222222;
        font-size: 14px;
        text-transform: none;
    }
    .main-menu .navbar-collapse .mega-menu .mega-menu__links a:hover { background: #222222; color: #ffffff !important; }
}

/* Teerma logo is about 3:1 — 60px tall plus 15px padding keeps the menu bar at its 90px height. */
.mainmenu-area .logo { padding-top: 15px; padding-bottom: 15px; }
.mainmenu-area .logo img { height: 60px; width: auto; max-width: 100%; }
.footer-logo img { height: 70px; width: auto; max-width: 100%; }

/* Home page with the slider hidden: the transparent top bar needs a background of its own. */
.no-hero .top-bar-area { background: #1b3053; }

/* Home page: welcome block — photo on the left, text and Mission/Vision slider on the right */
.teerma-welcome { padding: 0; background: #f4f4f4; }
.teerma-welcome__grid { display: block; }
.teerma-welcome__media { min-height: 320px; background-size: cover; background-position: center; }
/* min-width:0 — a flex item defaults to min-width:auto and would refuse to shrink, pushing the row wider than the page. */
.teerma-welcome__body { padding: 60px 30px; min-width: 0; }
/* Own two-column layout — Bootstrap's row/col overflows inside this flex area. */
.teerma-welcome__inner { display: flex; flex-wrap: wrap; gap: 40px; min-width: 0; }
.teerma-welcome__col { flex: 1 1 100%; min-width: 0; }
@media (min-width: 992px) {
    /* Widths in fr-style flex so the 40px gap is accounted for; percentages overflowed the row. */
    .teerma-welcome__col { flex: 1 1 0; }
    .teerma-welcome__col--side { flex: 0 0 360px; }
}
@media (min-width: 1400px) {
    .teerma-welcome__col--side { flex: 0 0 420px; }
}
.teerma-welcome__text h2 {
    margin: 0 0 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 46px;
    color: #1b3053;
}
.teerma-panels { position: relative; padding: 30px; background: #ffffff; }
.teerma-panels__item h3 { margin: 0 0 12px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: #1b3053; }
.teerma-panels__item p { margin-bottom: 14px; }
.teerma-panels__item p:last-child { margin-bottom: 0; }
.teerma-panels .owl-nav { margin-top: 18px; }
.teerma-panels .owl-nav button.owl-prev,
.teerma-panels .owl-nav button.owl-next,
.teerma-panels .owl-nav .owl-prev,
.teerma-panels .owl-nav .owl-next {
    margin-right: 18px;
    color: #1b3053;
    font-size: 22px;
    line-height: 1;
    transition: color 0.3s;
}
.teerma-panels .owl-nav .owl-prev:hover,
.teerma-panels .owl-nav .owl-next:hover { color: #45c4e9; }

@media (min-width: 992px) {
    .teerma-welcome__grid { display: flex; align-items: stretch; }
    .teerma-welcome__media { flex: 0 0 28%; min-height: 560px; }
    .teerma-welcome__body { flex: 1 1 auto; padding: 80px 50px; }
}

/* Home page: welcome text, mission and the businesses-guided figure */
.teerma-welcome__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #45c4e9;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.teerma-welcome__text p { margin-bottom: 18px; }
.teerma-welcome .thm-btn { margin-top: 10px; }
.teerma-stat {
    margin-bottom: 30px;
    padding: 30px;
    background: #45c4e9;
    color: #ffffff;
    text-align: center;
}
.teerma-stat strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1;
}
.teerma-stat span { font-size: 17px; }
.teerma-mission { padding: 30px; background: #f7f7f7; border-left: 3px solid #45c4e9; }
.teerma-mission h3 { margin: 0 0 12px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: #1b3053; }
.teerma-mission p { margin-bottom: 14px; }
.teerma-mission p:last-child { margin-bottom: 0; }

/* Home page: "What we do" — intro with a photo, then the service cards */
.teerma-services { background: #ffffff; }
.teerma-services__intro { margin-bottom: 50px; }
.teerma-services__media { position: relative; }
.teerma-services__media img { width: 100%; height: auto; display: block; }
.teerma-services__badge {
    position: absolute;
    right: 0;
    bottom: -20px;
    padding: 22px 26px;
    background: #45c4e9;
    color: #ffffff;
    text-align: center;
}
.teerma-services__badge strong { display: block; font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 700; line-height: 1; }
.teerma-services__badge span { font-size: 14px; line-height: 18px; }
.teerma-services__lead { padding-top: 10px; }
.teerma-services__lead h2 {
    margin: 0 0 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 44px;
    color: #1b3053;
}
.teerma-services__points { margin: 22px 0 28px; padding: 0; list-style: none; }
.teerma-services__points li { position: relative; margin-bottom: 12px; padding-left: 28px; }
.teerma-services__points li i { position: absolute; top: 6px; left: 0; color: #45c4e9; }
@media (min-width: 992px) { .teerma-services__lead { padding-left: 30px; } }
.teerma-service-card {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 35px 30px;
    background: #ffffff;
    border: 1px solid #ededed;
    transition: all 0.3s ease-in-out;
}
.teerma-service-card:hover { border-color: #45c4e9; box-shadow: 0 15px 30px rgba(27, 48, 83, 0.1); transform: translateY(-4px); }
.teerma-service-card__icon span { color: #45c4e9; font-size: 44px; line-height: 1; }
.teerma-service-card h3 { margin: 20px 0 12px; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 600; line-height: 28px; }
.teerma-service-card h3 a { color: #1b3053; }
.teerma-service-card:hover h3 a { color: #45c4e9; }
.teerma-service-card p { margin-bottom: 15px; }
.teerma-service-card__more { color: #45c4e9; font-weight: 600; }
.teerma-service-card__more i { margin-left: 5px; }
@media (min-width: 992px) { .teerma-services .row { display: flex; flex-wrap: wrap; } }

/* Business setup pages and packages */
/* The theme centres .sec-title p and gives links the section's own colour — override both here. */
.jurisdiction .sec-title p.jurisdiction__lead { margin-top: 15px; font-size: 18px; line-height: 28px; color: #1b3053; text-align: left; }
.jurisdiction p, .jurisdiction p.jurisdiction__note { text-align: left; }
.jurisdiction a { color: #45c4e9; }
.jurisdiction a:hover { color: #1b3053; }
.jurisdiction .thm-btn, .jurisdiction .thm-btn:hover { color: #ffffff; }
.jurisdiction__heading { margin: 35px 0 15px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: #1b3053; }
.jurisdiction__list { margin: 0 0 10px; padding: 0; list-style: none; }
.jurisdiction__list li { position: relative; margin-bottom: 12px; padding-left: 28px; line-height: 26px; }
.jurisdiction__list li i { position: absolute; top: 6px; left: 0; color: #45c4e9; }
.jurisdiction__note { margin-top: 15px; font-size: 15px; color: #797979; }
.jurisdiction__cta { margin-top: 40px; padding: 35px 30px; background: #f7f7f7; border-left: 3px solid #45c4e9; }
.jurisdiction__cta h3 { margin: 0 0 12px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: #1b3053; }
.jurisdiction__links { margin: 0; padding: 0; list-style: none; }
.jurisdiction__links li { border-bottom: 1px solid #f0f0f0; }
.jurisdiction__links li:last-child { border-bottom: 0; }
.jurisdiction__links a { display: block; padding: 10px 0; color: #555555; }
.jurisdiction__links a:hover { color: #45c4e9; }
.jurisdiction__links i { margin-right: 8px; color: #45c4e9; }

.teerma-package {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 35px 30px;
    background: #ffffff;
    border: 1px solid #ededed;
    transition: all 0.3s ease-in-out;
}
.teerma-package:hover { border-color: #45c4e9; box-shadow: 0 15px 30px rgba(27, 48, 83, 0.1); }
.teerma-package h3 { margin: 0 0 10px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: #1b3053; }
.teerma-package__price { margin-bottom: 18px; }
.teerma-package__price span { display: block; font-size: 14px; color: #797979; }
.teerma-package__price strong { color: #45c4e9; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; }
.teerma-package ul { margin: 18px 0 25px; padding: 0; list-style: none; }
.teerma-package li { position: relative; margin-bottom: 10px; padding-left: 26px; }
.teerma-package li i { position: absolute; top: 6px; left: 0; color: #45c4e9; }
.teerma-package__note { margin-top: 20px; font-size: 14px; color: #797979; text-align: center; }
@media (min-width: 992px) { .packages-page .row { display: flex; flex-wrap: wrap; } }

/* Home page: cost calculator */
.cost-calculator { background: #1b3053; }
.cost-calculator .sec-title h1, .cost-calculator .sec-title p { color: #ffffff; }
.cost-calculator .sec-title p { max-width: 720px; margin: 15px auto 0; opacity: 0.85; }
.cost-calculator__form { padding: 35px 30px 25px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.cost-calculator__form label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
}
.cost-calculator__field {
    width: 100%;
    height: 48px;
    margin-bottom: 22px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: #ffffff;
    color: #222222;
    font-size: 15px;
}
.cost-calculator__field:focus { border-color: #45c4e9; outline: none; }
.cost-calculator__hint { margin: -14px 0 18px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.cost-calculator__note { margin: 5px 0 0; color: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 20px; }
.cost-calculator__result { padding: 35px 30px; background: #ffffff; }
.cost-calculator__result h3 { margin: 0 0 20px; font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: #1b3053; }
.cost-calculator__lines { margin: 0 0 15px; padding: 0; list-style: none; }
.cost-calculator__lines li { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
.cost-calculator__lines b { color: #1b3053; white-space: nowrap; }
.cost-calculator__total { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 20px; padding-top: 12px; }
.cost-calculator__total span { font-family: 'Poppins', sans-serif; font-weight: 600; color: #1b3053; }
.cost-calculator__total strong { color: #45c4e9; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; text-align: right; }
.cost-calculator__quote input { width: 100%; height: 46px; margin-bottom: 12px; padding: 0 14px; border: 1px solid #e6e6e6; background: #f7f7f7; font-size: 15px; }
.cost-calculator__quote input:focus { border-color: #45c4e9; outline: none; }
.cost-calculator__quote button { width: 100%; border: 0; }

/* Forms */
.form-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-response { margin: 15px 0 0; padding: 10px 15px; border: 2px solid; font-size: 15px; line-height: 1.5; }
.form-response--success { border-color: #46b450; color: #46b450; }
.form-response--error { border-color: #dc3232; color: #dc3232; }
.wpcf7-not-valid-tip { display: block; margin: -10px 0 10px; color: #dc3232; font-size: 14px; }
.wpcf7-form-control-wrap { position: relative; display: block; }