/*
 * Project-specific overrides layered on top of the Gerow theme's vendor
 * CSS. Kept in its own file (loaded last) rather than editing style.css
 * directly, so theme updates/diffs stay clean.
 */

/* Service/course/OJS-sub-service card thumbnails (.services-thumb-two):
   real photos vary in natural aspect ratio, unlike the theme demo's
   pre-cropped stock images — force a uniform height + cover-crop so grid
   rows line up evenly instead of each card matching its own image height. */
/* Service detail page body copy (About/Features text) — justified so both
   edges line up evenly instead of the default ragged-right. */
.services-details-content {
    text-align: justify;
}
/* Service page main title (e.g. "Website Design") — dedicated class so it
   stays clearly bigger than the Key Features card headings below it,
   which are already 20px by default (.features-content-two .title in
   style.css) and were reading the same size as this heading before. */
.service-main-title {
    font-size: 36px;
}
.services-details-content .features-content-two .title {
    font-size: 20px;
}

/* How It Works (process_steps.php) — alternate background so it reads as
   its own band between the white About/Features area above and Pricing
   below, instead of blending into both. */
.how-it-works-area {
    background: var(--tg-section-background);
}

/* Site logo (header_nav.php) — cap height so a wide/tall source logo file
   doesn't blow out the nav bar. */
.header-style-two .logo img {
    max-height: 50px;
}

/* cta_block.php — make the CTA's background span the full viewport width
   instead of being boxed in by .container (the theme's original design).
   The .container now sits inside .cta-inner-wrap for text/button
   centering, so this just needs to undo the theme's card sizing. */
.cta-inner-wrap-full {
    width: 100%;
    border-radius: 0;
    padding: 70px 0;
}

/* .cta-content is still display:flex from the theme's original design,
   where it held the "Call For More Info" block side-by-side with the
   title — now that block is removed, that flex row was sitting the title
   and this new subtitle paragraph next to each other horizontally instead
   of stacking them as separate lines. Stack them. */
.cta-content {
    display: block;
}
.cta-content p {
    color: var(--tg-white);
    margin-top: 8px;
    margin-bottom: 0;
}

.services-thumb-two {
    height: 260px;
}
.services-thumb-two img {
    height: 100%;
    object-fit: cover;
}

/* Service detail sidebar: with the growing services list (~13 entries) and
   several new content sections, the main column now runs much longer than
   the sidebar — stick the sidebar so it stays visible while scrolling
   instead of ending after the first screen. align-self overrides the
   parent .row's default stretch so the sticky element isn't forced to the
   (taller) main column's full height. */
.services-sidebar-sticky {
    position: sticky;
    top: 30px;
    align-self: flex-start;
}

/* Trust badge strip on service pages (trust_badges.php) — white card +
   orange icon circle, matching the hero slider's .hero-feature-pill so
   badges don't read as a bare row of unstyled icons. */
.trust-badges-area {
    background: var(--tg-lavender);
}
.trust-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    height: 100%;
    padding: 24px 16px;
    background: var(--tg-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 20, 43, 0.06);
}
.trust-badge-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 122, 0, 0.1);
    color: var(--tg-primary-color);
    font-size: 26px;
}
.trust-badge-item .label {
    font-size: 15px;
    font-weight: 700;
    color: var(--tg-secondary-color);
}
.trust-badge-item .desc {
    font-size: 13px;
    color: var(--tg-paragraph-color);
}

/* .breadcrumb-bg (breadcrumb.php, used on every inner page: services,
   courses, OJS, about, contact, etc.) sits directly under the site header,
   which is `.transparent-header` — position:absolute, so it takes no space
   in normal flow and overlays whatever's below it instead of pushing it
   down. breadcrumb-bg kept the original theme's top padding (120px, tuned
   for a normal non-overlay header), so page titles like "Shared Hosting"
   render behind the menu bar. banner-bg-two (the Home hero, which sits
   under this same overlay header without issue) reserves 170px/150px of
   top padding to clear it — match that here instead of guessing. */
.breadcrumb-bg {
    padding-top: 170px;
}
@media (max-width: 991.98px) {
    .breadcrumb-bg {
        padding-top: 150px;
    }
}

/* Home hero slider — numbered slides matching the live WordPress site.
   Sits under the same transparent/absolute header as everything else, so
   it needs its own header clearance (see .breadcrumb-bg note above). */
.hero-slider-area {
    position: relative;
    background: var(--tg-lavender);
    padding: 190px 0 100px;
    overflow: hidden;
}
.hero-slider .swiper-slide {
    height: auto;
}
.hero-slide-number {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: var(--tg-secondary-color);
    margin-bottom: 10px;
}
.hero-slide-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--tg-secondary-color);
    margin-bottom: 20px;
    /* Matches the live site's hero, which uses its own headline font
       distinct from other headings (admin-editable, see main.php). */
    font-family: var(--tg-hero-font-family, var(--tg-heading-font-family));
}
.hero-slide-title span {
    display: block;
    color: var(--tg-primary-color);
}
.hero-slide-content > p {
    font-size: 17px;
    color: var(--tg-paragraph-color);
    max-width: 480px;
    margin-bottom: 35px;
}
.hero-slide-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 45px;
}
.hero-feature-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--tg-white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(20, 20, 43, 0.06);
}
.hero-feature-pill .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 122, 0, 0.1);
    color: var(--tg-primary-color);
    font-size: 18px;
}
.hero-feature-pill .label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tg-secondary-color);
}
.hero-slider-nav {
    display: flex;
    gap: 15px;
}
.hero-slider-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--tg-primary-color);
    border-radius: 50%;
    background: transparent;
    color: var(--tg-primary-color);
    font-size: 16px;
    line-height: 0;
    cursor: pointer;
    transition: all .3s ease;
}
.hero-slider-nav button:hover {
    background: var(--tg-primary-color);
    color: var(--tg-white);
}
.hero-slider-prev i {
    display: inline-block;
    transform: rotate(180deg);
}

/* Right-side illustration stack (assets/img/hero-slider/, pulled from the
   live site — see the note in home/index.php). The main graphic is
   self-contained (no separate background blob); the 3 floating pieces
   already include their own card/shadow, so they're positioned only, no
   added background here. Positions approximate the live site's layout;
   `overflow: visible` lets them hang past the main image's edges. */
.hero-slide-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.hero-visual-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
}
.hero-visual-float {
    position: absolute;
    z-index: 2;
    height: auto;
}
.hero-visual-float-gem {
    top: -2%;
    left: 32%;
    width: 8%;
}
.hero-visual-float-lock {
    top: 14%;
    left: 0;
    width: 22%;
}
.hero-visual-float-check {
    top: 6%;
    right: 2%;
    width: 22%;
}

@media (max-width: 991.98px) {
    .hero-slider-area {
        padding: 160px 0 70px;
    }
    .hero-slide-title {
        font-size: 36px;
    }
    .hero-slide-visual {
        margin-top: 50px;
    }
    .hero-visual-main {
        max-width: 420px;
    }
}
@media (max-width: 575.98px) {
    .hero-slide-features {
        flex-direction: column;
    }
}

/* Header dropdown menus: the template's min-width (230px) is too narrow for
   longer service names ("Official Meta WhatsApp Messaging", "AI Automation
   Tools Development"), so they were wrapping onto two lines. Widen the
   dropdown and stop the labels from wrapping so each stays on one line. */
.navbar-wrap ul li .sub-menu {
    min-width: 300px;
}
.navbar-wrap ul li .sub-menu li a {
    white-space: nowrap;
}

/* Top-bar "Offers" slider — replaces the template's static address/email/
   social-icons row. Dark bar (same tone as the template's original top bar)
   with bold white text and orange links, so the solid-orange "Get a Quote"
   button still pops at the right edge. Shows one admin-managed offer at a
   time (Swiper, already loaded site-wide for the Home hero slider), sliding
   vertically, with a stacked up/down arrow pair at the start of the row. */
.header-style-two .heder-top-wrap {
    background: var(--tg-secondary-color);
}
.offers-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-left: 25px;
}
.offers-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.offers-slider-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.offers-slider {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    overflow: hidden;
}
.offers-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.offers-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    border: none;
    background: transparent;
    color: #fff;
    opacity: .6;
    font-size: 9px;
    line-height: 0;
    cursor: pointer;
    transition: all .3s ease;
}
.offers-slider-nav:hover {
    opacity: 1;
    color: var(--tg-primary-color);
}
.offers-slider-prev i {
    display: inline-block;
    transform: rotate(180deg);
}
.offer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.offer-pill a {
    color: var(--tg-primary-color);
    text-decoration: none;
}
.offer-pill a:hover {
    color: #fff;
}
.offer-pill__trigger {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--tg-primary-color);
    cursor: pointer;
}
.offer-pill__trigger:hover {
    color: #fff;
}

/* Offer details popup, opened from the header ticker (see custom.js) */
.offer-details-modal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}
.offer-details-modal .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    padding: 8px;
}
.offer-details-modal .offer-modal-image img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    display: block;
}
.offer-details-modal .modal-body {
    padding: 30px;
}
.offer-details-modal .offer-modal-dates {
    display: inline-block;
    background: var(--tg-primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.offer-details-modal .offer-modal-title {
    margin-bottom: 12px;
}
.offer-details-modal .offer-modal-details {
    color: #666;
    margin-bottom: 20px;
}

/* Public /offers/ archive — cards reuse the theme's .services-item-two
   layout as-is; only the status badge and expired dimming are custom. */
.offer-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 12px;
}
.offer-card--expired .services-thumb-two img {
    filter: grayscale(60%);
    opacity: 0.75;
}

/* Offer detail page (/offers/{id}/) — .services-details-thumb has no
   position of its own elsewhere in the theme, so scope it here rather than
   changing the shared rule (which also backs the Services/Courses detail
   pages). */
.offer-details-thumb {
    position: relative;
}
/* .header-top-btn sits in the same flex row as the slider; without this it
   was allowed to shrink below its text's width, wrapping "Get a Quote" onto
   a second line that then overlapped itself (the template gives the anchor
   line-height:0, which only looks right on a single line). Let the slider
   (which has its own overflow:hidden) absorb all the shrinking instead. */
.offers-topbar .header-top-btn {
    flex-shrink: 0;
    /* Keep the button pinned to the right edge even when there are no active
       offers and it's the only child left in this space-between flex row
       (with a single item, space-between has nothing to push against, so
       without this it would collapse back to the left edge). */
    margin-left: auto;
}
.offers-topbar .header-top-btn a {
    white-space: nowrap;
}

/* On tablet/mobile the template hides the whole top bar (responsive.css,
   .header-style-two .heder-top-wrap { display: none } at <=991.98px) since
   it originally only held address/email/social links. Our top bar carries
   the admin-managed offer strip instead, which is worth keeping — re-show
   the bar but drop the "Get a Quote" button (it's redundant with the
   hamburger/offcanvas menu and site-wide CTAs) and shrink things to fit. */
@media (max-width: 991.98px) {
    .header-style-two .heder-top-wrap {
        display: block;
    }
    .offers-topbar {
        padding: 10px 15px;
    }
    .offers-topbar .header-top-btn {
        display: none;
    }
    .offer-pill {
        font-size: 12px;
    }
}
@media (max-width: 575.98px) {
    .offer-pill {
        font-size: 11px;
        gap: 6px;
    }
}