/* =========================================================
   SecureID Print Ltd Homepage
   ========================================================= */

:root {
    --home-navy: #020d22;
    --home-gold: #d4a017;
    --home-gold-hover: #bd8c10;
    --home-heading: #111827;
    --home-text: #5d6677;
    --home-border: #e1e5eb;
    --home-light: #f7f8fa;
    --home-white: #ffffff;
}


/* Shared
--------------------------------------------------------- */

.home-section {
    padding: 5rem 0;
}

.section-heading {
    max-width: 780px;
    margin-bottom: 2.5rem;
}

.section-heading.text-center {
    margin-right: auto;
    margin-left: auto;
}

.section-heading h2,
.home-feature-copy h2,
.home-paxton-copy h2,
.organisation-panel h2,
.faq-introduction h2 {
    margin-bottom: 1rem;
    color: var(--home-heading);
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.section-heading p,
.home-feature-copy p,
.home-paxton-copy p,
.organisation-panel p,
.faq-introduction p {
    color: var(--home-text);
    font-size: 0.98rem;
    line-height: 1.75;
}

.section-eyebrow {
    display: inline-block;
    margin-bottom: 0.65rem;
    color: var(--home-gold);
    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.btn-brand,
.btn-gold {
    color: var(--home-navy);
    background-color: var(--home-gold);
    border-color: var(--home-gold);
    font-weight: 700;
}

.btn-brand:hover,
.btn-brand:focus,
.btn-gold:hover,
.btn-gold:focus {
    color: var(--home-navy);
    background-color: var(--home-gold-hover);
    border-color: var(--home-gold-hover);
}


/* Hero
--------------------------------------------------------- */

.home-hero {

    position: relative;
    overflow: hidden;
    padding: 4rem 0;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(26, 92, 180, .28) 0%,
            rgba(2,13,34,0) 42%
        ),

        radial-gradient(
            circle at 20% 90%,
            rgba(212,160,23,.08) 0%,
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #020D22 0%,
            #082246 45%,
            #123C72 100%
        );

}

.home-hero-content h1{
    color:#ffffff;
}

.home-hero-content h1 span{
    color:#ffffff;
}

.home-hero-lead{
    color:#D8E3EF;
}

.home-hero-features li{
    color:#ffffff;
}

.home-hero-features i{
    color:#D4A017;
}

.home-hero-features,
.home-check-list,
.home-paxton-copy ul {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hero-features li,
.home-check-list li,
.home-paxton-copy li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #fff;
    font-size: 0.9rem;
}

.home-hero-features i,
.home-check-list i,
.home-paxton-copy li i {
    color: var(--home-gold);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.home-hero-media {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.home-hero-image {
    display: block;
    width: 100%;
    max-width: 520px;
    max-height: 380px;
    margin: 0 auto 1rem;
    object-fit: contain;
}

.home-hero-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: 0.8rem;
    box-shadow: 0 12px 30px rgba(2, 13, 34, 0.06);
}

.home-hero-trust > div {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 76px;
    padding: 0.8rem;
}

.home-hero-trust > div:nth-child(odd) {
    border-right: 1px solid var(--home-border);
}

.home-hero-trust > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--home-border);
}

.home-hero-trust i {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--home-navy);
    background-color: var(--home-light);
    border-radius: 50%;
}

.home-hero-trust span {
    display: flex;
    flex-direction: column;
    color: #747d8b;
    font-size: 0.68rem;
}

.home-hero-trust strong {
    color: #202938;
    font-size: 0.8rem;
}


/* Popular products
--------------------------------------------------------- */

.popular-products {
    background-color: var(--home-light);
}

.home-product-card {
    display: flex;
    height: 100%;
    flex-direction: column;
    padding: 1rem;
    color: inherit;
    background-color: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: 0.75rem;
    text-align: center;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.home-product-card:hover {
    color: inherit;
    border-color: rgba(212, 160, 23, 0.65);
    box-shadow: 0 14px 30px rgba(2, 13, 34, 0.08);
    transform: translateY(-4px);
}

.home-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    margin-bottom: 1rem;
}

.home-product-image img {
    display: block;
    width: 100%;
    max-width: 115px;
    max-height: 115px;
    object-fit: contain;
}

.home-product-card h3 {
    margin-bottom: 0.4rem;
    color: var(--home-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.home-product-card p {
    flex-grow: 1;
    margin-bottom: 0.9rem;
    color: var(--home-text);
    font-size: 0.76rem;
    line-height: 1.5;
}

.home-card-link {
    color: var(--home-gold-hover);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}


/* Feature sections
--------------------------------------------------------- */

.home-feature-section {
    background-color: #ffffff;
}

.home-feature-image,
.hearing-loss-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-feature-image img,
.hearing-loss-image img {
    display: block;
    width: 100%;
    max-width: 560px;
    max-height: 450px;
    object-fit: contain;
}

.home-benefit-grid {
    margin-top: 1.5rem;
}

.home-benefit {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--home-light);
    border: 1px solid var(--home-border);
    border-radius: 0.65rem;
}

.home-benefit > i {
    color: var(--home-gold);
    font-size: 1.2rem;
}

.home-benefit div {
    display: flex;
    flex-direction: column;
}

.home-benefit strong {
    color: var(--home-heading);
    font-size: 0.86rem;
}

.home-benefit span {
    color: var(--home-text);
    font-size: 0.73rem;
}


/* Paxton
--------------------------------------------------------- */

.home-paxton-section {
    padding: 5rem 0;
    color: #ffffff;
    background: #78BE20;
}

.home-paxton-copy h2 {
    color: #ffffff;
}

.home-paxton-copy p,
.home-paxton-copy li {
    color: #d2dae7;
}

.home-paxton-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-paxton-image img {
    display: block;
    width: 100%;
    max-width: 560px;
    max-height: 430px;
    object-fit: contain;
}


/* =========================================================
   Business trust strip
   ========================================================= */

.business-trust-strip {
    width: 100%;
    padding: 1.5rem 0;
    color: #ffffff;
    background-color: #000000;
}

.business-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 68px;
}

.business-trust-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    color: #ffffff;
    font-size: 2.55rem;
    line-height: 1;
}

.business-trust-pound {
    font-size: 3rem;
    font-weight: 800;
    font-family: Arial, Helvetica, sans-serif;
}

.business-trust-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.business-trust-text strong {
    margin-bottom: 0.35rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.business-trust-text span {
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 400;
    white-space: nowrap;
}


/* Smaller desktop
--------------------------------------------------------- */

@media (max-width: 1199.98px) {

    .business-trust-strip {
        padding: 1.25rem 0;
    }

    .business-trust-item {
        gap: 0.75rem;
    }

    .business-trust-icon {
        width: 42px;
        font-size: 2.1rem;
    }

    .business-trust-pound {
        font-size: 2.5rem;
    }

    .business-trust-text strong {
        font-size: 0.88rem;
    }

    .business-trust-text span {
        font-size: 0.8rem;
    }

}


/* Tablet
--------------------------------------------------------- */

@media (max-width: 991.98px) {

    .business-trust-item {
        justify-content: flex-start;
        max-width: 260px;
        margin-right: auto;
        margin-left: auto;
    }

}


/* Mobile
--------------------------------------------------------- */

@media (max-width: 575.98px) {

    .business-trust-strip {
        padding: 1rem 0;
    }

    .business-trust-item {
        justify-content: flex-start;
        min-height: 54px;
    }

    .business-trust-icon {
        width: 38px;
        font-size: 1.85rem;
    }

    .business-trust-pound {
        font-size: 2.15rem;
    }

    .business-trust-text strong {
        margin-bottom: 0.15rem;
        font-size: 0.84rem;
    }

    .business-trust-text span {
        font-size: 0.76rem;
    }

}


/* Hearing loss
--------------------------------------------------------- */

.hearing-loss-section {
    background:
        linear-gradient(
            110deg,
            #f9fbfd 0%,
            #f2f6fa 100%
        );
}


/* Organisation accounts
--------------------------------------------------------- */

.organisation-section {
    background-color: #ffffff;
}

.organisation-panel {
    padding: 2.5rem;
    background-color: var(--home-light);
    border: 1px solid var(--home-border);
    border-radius: 1rem;
}

.organisation-benefits {
    margin-top: 1.5rem;
}

.organisation-benefits > div > div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #354052;
    font-size: 0.84rem;
}

.organisation-benefits i {
    color: var(--home-gold);
}

.organisation-types {
    padding: 1.5rem;
    background-color: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: 0.75rem;
}

.organisation-types h3 {
    margin-bottom: 1rem;
    color: var(--home-heading);
    font-size: 1rem;
    font-weight: 700;
}

.organisation-types ul {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    padding-left: 1.1rem;
    color: var(--home-text);
    font-size: 0.82rem;
}


/* Process
--------------------------------------------------------- */

.order-process-section {
    background-color: var(--home-light);
}

.process-card {
    position: relative;
    height: 100%;
    padding: 1.5rem 1.2rem;
    background-color: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: 0.75rem;
    text-align: center;
}

.process-card > span {
    position: absolute;
    top: 0.65rem;
    right: 0.8rem;
    color: rgba(2, 13, 34, 0.12);
    font-size: 2rem;
    font-weight: 800;
}

.process-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--home-gold);
    background-color: var(--home-light);
    border-radius: 50%;
    font-size: 1.2rem;
}

.process-card h3 {
    color: var(--home-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.process-card p {
    margin: 0;
    color: var(--home-text);
    font-size: 0.78rem;
    line-height: 1.55;
}


/* Why choose
--------------------------------------------------------- */

.why-choose-section {
    background-color: #ffffff;
}

.why-card {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--home-border);
    border-radius: 0.75rem;
}

.why-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    color: var(--home-gold);
    background-color: var(--home-light);
    border-radius: 50%;
    font-size: 1.2rem;
}

.why-card h3 {
    margin-bottom: 0.55rem;
    color: var(--home-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.why-card p {
    margin: 0;
    color: var(--home-text);
    font-size: 0.8rem;
    line-height: 1.6;
}


/* Reviews
--------------------------------------------------------- */

.reviews-section {
    background-color: var(--home-light);
}

.review-card {
    height: 100%;
    padding: 1.5rem;
    background-color: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: 0.75rem;
}

.review-stars {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 1rem;
    color: var(--home-gold);
}

.review-card blockquote {
    margin-bottom: 1.25rem;
    color: #3f4858;
    font-size: 0.9rem;
    line-height: 1.7;
}

.review-card footer {
    display: flex;
    flex-direction: column;
}

.review-card footer strong {
    color: var(--home-heading);
    font-size: 0.82rem;
}

.review-card footer span {
    color: var(--home-text);
    font-size: 0.7rem;
}


/* FAQ
--------------------------------------------------------- */

.home-faq-section {
    background-color: #ffffff;
}

.faq-introduction {
    position: sticky;
    top: 1.5rem;
}

.home-faq .accordion-item {
    border-color: var(--home-border);
}

.home-faq .accordion-button {
    color: var(--home-heading);
    font-size: 0.9rem;
    font-weight: 650;
    box-shadow: none;
}

.home-faq .accordion-button:not(.collapsed) {
    color: var(--home-navy);
    background-color: var(--home-light);
}

.home-faq .accordion-button:focus {
    border-color: var(--home-gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 160, 23, 0.15);
}

.home-faq .accordion-body {
    color: var(--home-text);
    font-size: 0.86rem;
    line-height: 1.7;
}


/* Guides
--------------------------------------------------------- */

.latest-guides-section {
    background-color: var(--home-light);
}

.guide-card {
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--home-border);
    border-radius: 0.75rem;
}

.guide-card > a img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.guide-card-body {
    padding: 1.25rem;
}

.guide-card-body > span {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: var(--home-gold-hover);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.guide-card h3 {
    margin-bottom: 0.65rem;
    font-size: 1rem;
    font-weight: 700;
}

.guide-card h3 a {
    color: var(--home-heading);
    text-decoration: none;
}

.guide-card p {
    color: var(--home-text);
    font-size: 0.8rem;
    line-height: 1.6;
}


/* Tablet
--------------------------------------------------------- */

@media (max-width: 991.98px) {

    .home-section,
    .home-paxton-section {
        padding: 4rem 0;
    }

    .home-hero {
        padding: 2.5rem 0;
        text-align: center;
    }

    .home-hero-lead {
        margin-right: auto;
        margin-left: auto;
    }

    .home-hero-features {
        width: fit-content;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .home-hero-actions {
        justify-content: center;
    }

    .home-hero-media {
        margin-top: 1rem;
    }

    .home-paxton-copy {
        text-align: center;
    }

    .home-paxton-copy ul {
        width: fit-content;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .home-paxton-copy .d-flex {
        justify-content: center;
    }

    .faq-introduction {
        position: static;
    }

}


/* Mobile
--------------------------------------------------------- */

@media (max-width: 767.98px) {

    .home-section,
    .home-paxton-section {
        padding: 3.25rem 0;
    }

    .home-hero-content h1 {
        font-size: 2.65rem;
    }

    .home-hero-actions {
        display: grid;
    }

    .home-hero-actions .btn {
        width: 100%;
    }

    .home-product-image {
        height: 105px;
    }

    .home-product-image img {
        max-width: 92px;
        max-height: 92px;
    }

    .organisation-panel {
        padding: 1.5rem;
    }

}


/* Small mobile
--------------------------------------------------------- */

@media (max-width: 575.98px) {

    .home-hero {
        padding: 2rem 0;
    }

    .home-hero-content h1 {
        font-size: 2.25rem;
    }

    .home-hero-trust > div {
        flex-direction: column;
        justify-content: center;
        min-height: 100px;
        text-align: center;
    }

    .home-product-card {
        padding: 0.8rem;
    }

    .home-product-card h3 {
        font-size: 0.84rem;
    }

    .home-product-card p {
        font-size: 0.68rem;
    }

    .section-heading h2,
    .home-feature-copy h2,
    .home-paxton-copy h2,
    .organisation-panel h2,
    .faq-introduction h2 {
        font-size: 1.8rem;
    }

}