/* Small CentralTab-specific tweaks without touching the template */
.ct-nav-link { letter-spacing: .06em; font-weight: 700; }
.ct-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ct-logo__text {
    color: #ffffff;
   
    letter-spacing: .02em;
    font-size: 18px;
}
@media (max-width: 767px) {
    .ct-logo__text { color: #0175AD; }
}

/*
    IMPORTANT:
    The Aeroland template uses a "reveal footer" trick:
    `.reveal-footer { position: fixed; z-index: -1; }`
    That makes the footer sit *behind* the page content and requires extra layout setup.

    For this CentralTab page we disable that behavior so the footer is part of the normal flow
    and cannot be hidden by the previous section.
*/
.footer-area-wrapper.reveal-footer {
    position: static !important;
    z-index: 1 !important;
}

/* Fix absolute `/images/...` references from the legacy template */
.addToChromeBtn { background-image: url(./images/googleChrome.png) !important; }
.addToEdgeBtn { background-image: url(./images/edge.png) !important; }
.addToFirefoxBtn { background-image: url(./images/firefox.png) !important; }

/* Screenshots / gallery */
.ct-screenshot-link {
    display: block;
}
.ct-screenshot {
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.42);
}
.ct-screenshot-link:hover .ct-screenshot {
    transform: translateY(-3px);
}

/* Template override: in style2.css the first step forces border-radius: 0px for images.
   Make sure our first (Block 1) screenshot stays rounded like the others. */
.app-showcase-process-step__one .app-showcase-process-step__media .ct-screenshot {
    border-radius: 22px !important;
}

/* Hero right-side artwork */
.ct-hero-art {
    width: 100%;
    max-width: 1170px;
    height: auto;
    border-radius: 24px;
    box-shadow: none;
    border: 0;
}

/* Hero composite (3 stacked layers) */
.ct-hero-composite {
    position: relative;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

.ct-hero-layer-a {
    display: block;
    width: 100%;
    height: auto;
}

.ct-hero-layer-b {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: auto;
    border-radius: 7px;
    z-index: 2;
    pointer-events: none;
}

.ct-hero-layer-c {
    position: absolute;
    right: 3%;
    top: 0;
    width: 19%;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

/* Hero image + copy (copy UNDER the image — no overlay) */
.ct-hero-media {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1170px;
}

.ct-hero-overlay {
    /* Normal document flow: sits under the hero image */
    position: static;
    transform: none;
    width: min(980px, 92%);
    margin: 12px auto 0;
    padding: 50px 0px 100px 0px;
    border-radius: 0;
    /* No card background/shadow: keep it simple under the image */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.ct-hero-cta {
    margin: 10px 0 14px;
}

/* Top CTA button color */
#ctaTop.btn {
    background: #FF2160 !important;
    border-color: #FF2160 !important;
    color: #ffffff !important;
}
#ctaTop.btn:hover {
    filter: brightness(1.05);
}

/* Hero (under-image) CTA button color */
#ctaHero.ht-btn {
    background: #FF2160 !important;
    border-color: #FF2160 !important;
    color: #ffffff !important;
}
#ctaHero.ht-btn:hover {
    filter: brightness(1.05);
}

.ct-hero-overlay .brand-hero-title {
    margin-bottom: 8px;
}

.ct-hero-overlay .sub-heading {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* On mobile the same layout applies; just reduce spacing a bit */
@media (max-width: 767px) {
    .ct-hero-overlay { margin-top: 14px; }
}

/* The header is absolute; add space so the hero image/text won't slide under it */
.digital-store-hero-area {
    padding-top: 100px;
}

/* In this layout the image is above the text; remove default top padding on the text block */
.digital-store-hero-area .digital-store-hero__text {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* On smaller screens, keep the hero image a bit smaller */
@media (max-width: 991px) {
    .ct-hero-art {
        max-width: 680px;
    }

    .ct-hero-composite {
        max-width: 680px;
    }

    .ct-hero-layer-b {
        width: 71%;
    }

    .ct-hero-layer-c {
        width: 22%;
        right: 1.5%;
        top: 0;
    }
}

@media (max-width: 575px) {
    .ct-hero-art {
        max-width: 94vw;
    }

    .ct-hero-composite {
        max-width: 94vw;
    }

    .ct-hero-layer-b {
        width: 70%;
    }

    .ct-hero-layer-c {
        width: 24%;
        right: 1%;
        top: 0;
    }
}

/* Card grid uses its own rounded container + shadow, so don't double-shadow the image there */
.single-digital-product__wrap .ct-screenshot {
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
.single-digital-product__wrap .ct-screenshot-link:hover .ct-screenshot {
    transform: none;
}