.brand-lockup{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-lockup .brand-icon{
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
}

.brand-lockup .brand-icon img{
    width: 100%;
    height: 100%;
    display: block;
}

/* Premium visual system: consistent depth and crisp large imagery. */
.page-single-image figure,
.about-image figure,
.testimonial-img figure,
.faq-image figure,
.why-choose-img figure,
.service-solution-img figure,
.service-growth-image figure,
.approach-img figure,
.project-item figure,
.features-item-image figure,
.sidebar-cta-image figure{
    overflow: hidden;
    background: #211c2c;
}

.page-single-image img,
.about-image img,
.testimonial-img img,
.faq-image img,
.why-choose-img img,
.service-solution-img img,
.service-growth-image img,
.approach-img img,
.project-item img,
.features-item-image img,
.sidebar-cta-image img{
    filter: saturate(0.94) contrast(1.04);
    transition: transform 0.7s cubic-bezier(.2,.7,.2,1), filter 0.7s ease;
}

.page-single-image:hover img,
.about-image:hover img,
.testimonial-img:hover img,
.faq-image:hover img,
.why-choose-img:hover img,
.service-solution-img:hover img,
.service-growth-image:hover img,
.approach-img:hover img,
.project-item:hover img,
.features-item-image:hover img{
    transform: scale(1.025);
    filter: saturate(1.03) contrast(1.06);
}

.features-item-image img,
.approach-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.features-item-image figure{
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.approach-img figure{
    border-radius: 16px;
}

/* SEO interface artwork stays transparent inside decorative cards. */
.features-item-image figure,
.approach-img figure,
.service-solution-img figure{
    background: transparent;
    box-shadow: none;
}

.features-item-image img,
.approach-img img,
.service-solution-img img{
    filter: none;
    object-fit: contain;
}

.features-item-image:hover img,
.approach-img:hover img,
.service-solution-img:hover img{
    filter: none;
}

.feature-box-1 .features-item-image img{
    min-height: 330px;
}

.feature-box-2 .features-item-image img,
.feature-box-3 .features-item-image img{
    min-height: 245px;
}

.approach-img img{
    max-height: 270px;
}

.service-solution-img img{
    aspect-ratio: 1 / .58;
    padding: 8px;
}

.service-sidebar-art{
    display: grid !important;
    place-items: center;
    min-height: 210px;
    margin: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(231, 157, 66, .22), transparent 34%),
        radial-gradient(circle at 64% 40%, rgba(114, 93, 167, .25), transparent 44%);
}

.service-sidebar-art img{
    width: 96px !important;
    height: 96px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
}

.seo-growth-proof{
    min-height: 467px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 30px;
    padding: 38px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(114,93,167,.24), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.seo-proof-product{
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 30px;
}

.google-g{
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: conic-gradient(#4285f4 0 25%, #34a853 0 45%, #fbbc04 0 70%, #ea4335 0);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    box-shadow: inset 0 0 0 7px #211c2c;
}

.seo-proof-metric{
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.5;
}

.seo-proof-value{
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.05em;
    margin: 7px 0 24px;
    background: linear-gradient(90deg, #E79D42, #9A7290, #725DA7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.seo-proof-chart{
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 92px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.seo-proof-chart span{
    flex: 1;
    min-height: 8px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #9B7AC1, #E79D42);
    opacity: .88;
}

.seo-growth-proof p{
    margin: 20px 0 0;
    color: rgba(255,255,255,.56);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 767px){
    .feature-box-1 .features-item-image img,
    .feature-box-2 .features-item-image img,
    .feature-box-3 .features-item-image img{
        min-height: 0;
    }

    .seo-growth-proof{
        min-height: 390px;
        padding: 30px;
    }
}

.brand-lockup .brand-text{
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-lockup .brand-name{
    font-size: 24px;
    font-weight: 700;
    color: var(--white-color);
    letter-spacing: -0.02em;
    line-height: 1.1em;
}

.brand-lockup .brand-tagline{
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent-color);
    margin-top: 5px;
}

.brand-lockup-footer .brand-icon{
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
}

.brand-lockup-footer .brand-name{
    font-size: 26px;
}

header .nav-menu-wrapper > ul > li > a.active{
    color: var(--accent-color);
}

/* ---------- 2. Secondary button ------------------------------------- */

.btn-outline{
    position: relative;
    display: inline-block;
    background: transparent;
    border: 1px solid var(--dark-divider-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-transform: capitalize;
    padding: 17px 32px;
    transition: all 0.4s ease-in-out;
}

.btn-outline:hover{
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.cta-box-btn{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

/* ---------- 3. Forms -------------------------------------------------- */

.contact-form label{
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.contact-form .form-control{
    width: 100%;
}

.contact-form .form-control:focus{
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.03);
}

.contact-form .form-control::placeholder{
    color: rgba(255, 255, 255, 0.35);
}

.contact-form select.form-control,
.contact-form .form-select-control{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23E79D42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 46px;
    cursor: pointer;
}

.contact-form select.form-control option{
    background: #181422;
    color: #ffffff;
}

.contact-form .form-group.has-error .form-control{
    border-color: var(--error-color);
}

.contact-form .help-block{
    font-size: 12px;
    color: var(--error-color);
    margin-top: 8px;
    min-height: 1px;
}

.contact-form .form-note{
    font-size: 13px;
    line-height: 1.6em;
    color: rgba(255, 255, 255, 0.45);
    margin: 18px 0 0;
}

.hp-field{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.btn-default.is-loading{
    opacity: 0.7;
    pointer-events: none;
}

/* ---------- 4. Inline form alerts ------------------------------------ */

.form-alert{
    display: none;
    align-items: flex-start;
    gap: 14px;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 26px;
}

.form-alert.is-visible{
    display: flex;
    animation: formAlertIn 0.4s ease;
}

@keyframes formAlertIn{
    from{ opacity: 0; transform: translateY(-8px); }
    to{ opacity: 1; transform: translateY(0); }
}

.form-alert p{
    margin: 0;
    font-size: 15px;
    line-height: 1.6em;
}

.form-alert-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    font-size: 13px;
    color: #ffffff;
}

.form-alert-success{
    background: rgba(120, 200, 140, 0.12);
    border: 1px solid rgba(120, 200, 140, 0.35);
}

.form-alert-success .form-alert-icon{
    background: #4caf7d;
}

.form-alert-error{
    background: rgba(230, 87, 87, 0.12);
    border: 1px solid rgba(230, 87, 87, 0.35);
}

.form-alert-error .form-alert-icon{
    background: var(--error-color);
}

/* ---------- 5. Success popup ----------------------------------------- */

.form-popup{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.form-popup.is-open{
    display: flex;
}

.form-popup-overlay{
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 16, 0.78);
    backdrop-filter: blur(6px);
}

.form-popup-inner{
    position: relative;
    max-width: 520px;
    width: 100%;
    text-align: center;
    background: #201b2c;
    border: 1px solid var(--dark-divider-color);
    border-radius: 24px;
    padding: 46px 40px 40px;
    animation: popupIn 0.35s ease;
}

@keyframes popupIn{
    from{ opacity: 0; transform: translateY(18px) scale(0.97); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}

.form-popup-icon{
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    background: linear-gradient(to right, var(--accent-color), var(--accent-secondary-color));
}

.form-popup-inner h3{
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--white-color);
}

.form-popup-inner p{
    font-size: 16px;
    line-height: 1.65em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 28px;
}

body.popup-open{
    overflow: hidden;
}

/* ---------- 6. Advertise & Collaborate block -------------------------- */

.advertise-collaborate{
    padding: 100px 0;
}

.advertise-box{
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 24px;
    padding: 60px;
    overflow: hidden;
}

.advertise-box::before{
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(114, 93, 167, 0.35) 0%, rgba(24, 20, 34, 0) 70%);
    pointer-events: none;
}

.advertise-content{
    padding-right: 30px;
}

.advertise-content p{
    font-size: 16px;
    line-height: 1.75em;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 30px;
}

.advertise-contact a{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 500;
    color: var(--white-color);
    border: 1px solid var(--dark-divider-color);
    border-radius: 100px;
    padding: 14px 26px;
    transition: all 0.3s ease-in-out;
}

.advertise-contact a:hover{
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.advertise-contact img{
    width: 20px;
}

.advertise-form{
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 40px;
}

.advertise-form .section-title{
    margin-bottom: 30px;
}

.advertise-form .section-title h2{
    font-size: 32px;
}

/* ---------- 7. Generic content sections ------------------------------- */

.section-lead{
    font-size: 18px;
    line-height: 1.75em;
    color: rgba(255, 255, 255, 0.72);
}

.content-block{
    padding: 100px 0;
}

.content-block-sm{
    padding: 70px 0;
}

/* Insight / honesty callout */
.insight-box{
    position: relative;
    border: 1px solid var(--divider-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    padding: 34px 36px;
}

.insight-box h3{
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--white-color);
}

.insight-box p{
    font-size: 16px;
    line-height: 1.75em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.insight-box p + p{
    margin-top: 14px;
}

/* Numbered plan / timeline */
.plan-timeline{
    display: grid;
    gap: 22px;
}

.plan-item{
    display: flex;
    gap: 26px;
    align-items: flex-start;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    padding: 30px 34px;
    transition: all 0.35s ease-in-out;
}

.plan-item:hover{
    border-color: rgba(231, 157, 66, 0.5);
    transform: translateY(-4px);
}

.plan-item-no{
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(to right, var(--accent-secondary-color), var(--accent-color));
}

.plan-item-content h3{
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--white-color);
}

.plan-item-content p{
    font-size: 16px;
    line-height: 1.75em;
    color: rgba(255, 255, 255, 0.68);
    margin: 0;
}

.plan-item-meta{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-color);
    margin-bottom: 10px;
}

/* Stats strip */
.stat-strip{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-item{
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    padding: 34px 30px;
    text-align: center;
}

.stat-item h2{
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(to right, var(--accent-color), var(--accent-secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-item p{
    font-size: 15px;
    line-height: 1.6em;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

/* Checklist */
.check-list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.check-list li{
    position: relative;
    padding-left: 34px;
    font-size: 16px;
    line-height: 1.7em;
    color: rgba(255, 255, 255, 0.72);
}

.check-list li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--accent-secondary-color);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none'%3E%3Cpath d='M1 5l3.4 3.4L11 1.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 9px;
}

/* Two column feature cards */
.info-card{
    height: 100%;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    padding: 36px 34px;
    transition: all 0.35s ease-in-out;
}

.info-card:hover{
    border-color: rgba(231, 157, 66, 0.5);
    transform: translateY(-5px);
}

.info-card .icon-box{
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 24px;
}

.info-card .icon-box img{
    width: 28px;
}

.info-card h3{
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--white-color);
}

.info-card p{
    font-size: 15px;
    line-height: 1.75em;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
}

.info-card p + p{
    margin-top: 12px;
}

/* Comparison table */
.compare-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--divider-color);
    border-radius: 18px;
    overflow: hidden;
}

.compare-table th,
.compare-table td{
    padding: 18px 24px;
    font-size: 15px;
    line-height: 1.6em;
    text-align: left;
    border-bottom: 1px solid var(--divider-color);
    color: rgba(255, 255, 255, 0.72);
    vertical-align: top;
}

.compare-table th{
    background: rgba(255, 255, 255, 0.04);
    color: var(--white-color);
    font-weight: 600;
}

.compare-table tr:last-child td{
    border-bottom: none;
}

/* ---------- 8. Footer extras ------------------------------------------ */

.footer-contact-item p{
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
    text-align: right;
}

.footer-contact-list{
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.footer-contact-list li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.6em;
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact-list li img{
    width: 18px;
    margin-top: 3px;
}

.footer-contact-list li a{
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact-list li a:hover{
    color: var(--accent-color);
}

.footer-hours{
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 22px;
}

.footer-cta-btn{
    padding: 15px 46px 15px 24px;
    font-size: 14px;
}

/* e-mail addresses must never be capitalised by the theme */
.footer-contact-list a,
.footer-contact-item h2 a,
.advertise-contact a,
.sidebar-cta-contact a,
.contact-item-content p a{
    text-transform: none;
}

.footer-copyright-text{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-legal-links{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-legal-links a{
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-legal-links a:hover{
    color: var(--accent-color);
}

.footer-disclaimer{
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--divider-color);
}

.footer-disclaimer p{
    font-size: 13px;
    line-height: 1.7em;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* ---------- 9. Legal pages -------------------------------------------- */

.legal-page{
    padding: 100px 0;
}

.legal-content{
    border: 1px solid var(--divider-color);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    padding: 56px 60px;
}

.legal-content .legal-updated{
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-color);
    margin-bottom: 30px;
}

.legal-content h2{
    font-size: 26px;
    font-weight: 600;
    margin: 44px 0 16px;
    color: var(--white-color);
}

.legal-content h2:first-of-type{
    margin-top: 0;
}

.legal-content h3{
    font-size: 19px;
    font-weight: 600;
    margin: 26px 0 12px;
    color: var(--white-color);
}

.legal-content p,
.legal-content li{
    font-size: 16px;
    line-height: 1.8em;
    color: rgba(255, 255, 255, 0.7);
}

.legal-content p{
    margin-bottom: 16px;
}

.legal-content ul{
    margin: 0 0 22px;
    padding-left: 22px;
}

.legal-content li{
    margin-bottom: 10px;
}

.legal-content a{
    color: var(--accent-color);
}

.legal-summary{
    border: 1px solid var(--divider-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    padding: 24px 28px;
    margin-bottom: 34px;
}

.legal-summary p{
    margin: 0;
}

/* ---------- 10. Service page sidebar ---------------------------------- */

.page-category-list ul li a.active{
    color: var(--accent-color);
}

.sidebar-cta-logo .brand-lockup .brand-name{
    font-size: 22px;
}

/* ---------- 11. Responsive -------------------------------------------- */

@media only screen and (max-width: 1200px){
    .advertise-box{ padding: 44px; }
    .advertise-content{ padding-right: 0; margin-bottom: 40px; }
}

@media only screen and (max-width: 991px){
    .stat-strip{ grid-template-columns: repeat(2, 1fr); }
    .advertise-collaborate{ padding: 70px 0; }
    .content-block{ padding: 70px 0; }
    .legal-page{ padding: 70px 0; }
    .legal-content{ padding: 40px 34px; }
    .footer-contact-item p{ text-align: left; }
}

@media only screen and (max-width: 767px){
    .brand-lockup .brand-name{ font-size: 21px; }
    .brand-lockup .brand-icon{ width: 40px; height: 40px; flex: 0 0 40px; }
    .stat-strip{ grid-template-columns: 1fr; }
    .advertise-box{ padding: 30px 22px; }
    .advertise-form{ padding: 26px 20px; }
    .plan-item{ flex-direction: column; gap: 18px; padding: 26px 22px; }
    .form-popup-inner{ padding: 36px 24px 30px; }
    .cta-box-btn{ flex-direction: column; }
    .cta-box-btn .btn-default,
    .cta-box-btn .btn-outline{ width: 100%; text-align: center; }
    .compare-table th,
    .compare-table td{ padding: 14px 16px; font-size: 14px; }
}

/* ---------- 12. Toned-down decorations ------------------------------- */
/* The base theme floats cartoon robot mascots over the hero, the
   why-choose section and the CTA box. For a consulting brand we keep
   the motion but swap them for soft gradient orbs. Delete this block
   to bring the original illustrations back. */

.hero-content::before,
.hero-content::after,
.why-choose-us::before,
.why-choose-us::after,
.cta-box::before,
.cta-box::after,
.what-we-do-body-image{
    background-image: none !important;
}

.hero-content::before,
.hero-content::after,
.why-choose-us::before,
.why-choose-us::after,
.cta-box::before,
.cta-box::after{
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.55;
}

.hero-content::before,
.why-choose-us::before,
.cta-box::before{
    background: radial-gradient(circle, rgba(231, 157, 66, 0.55) 0%, rgba(24, 20, 34, 0) 70%) !important;
}

.hero-content::after,
.why-choose-us::after,
.cta-box::after{
    background: radial-gradient(circle, rgba(114, 93, 167, 0.55) 0%, rgba(24, 20, 34, 0) 70%) !important;
}

/* ---------- 13. No people photos: initials, badges, fact boxes -------- */

/* Testimonial avatar is the first letter of the name */
.testimonial-body .author-image .author-initial{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-secondary-color), var(--accent-color));
}

/* Hero badge without headshots */
.hero-sub-heading .hero-badge-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
    background: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(231, 157, 66, 0.18);
}

/* Fact box replacing the team photo cluster */
.facts-box{
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.facts-box .facts-box-item{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 16px;
    border-left: 2px solid rgba(255, 255, 255, 0.45);
}

.facts-box .facts-box-item strong{
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
}

.facts-box .facts-box-item span{
    font-size: 13px;
    line-height: 1.5em;
    color: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 767px){
    .facts-box{ gap: 18px; }
}


/* ---------- 14. Service cards, buttons and navigation ---------------- */

/* Equal-height cards everywhere the grid is used, not just on the
   services page, with the "View details" link pinned to the bottom. */
.our-services .services-item,
.page-services .services-item,
.content-block-sm .services-item{
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    border: 1px solid var(--divider-color);
    border-radius: 30px;
    background: var(--secondary-color) url('service-item-bg.png') no-repeat top left;
    transition: all 0.35s ease-in-out;
}

.our-services .services-item:hover,
.page-services .services-item:hover,
.content-block-sm .services-item:hover{
    border-color: rgba(231, 157, 66, 0.45);
    transform: translateY(-6px);
}

.services-item .services-item-content{
    flex: 1 1 auto;
}

.services-item-content h3{
    margin-bottom: 14px;
}

.services-item-content p{
    line-height: 1.7em;
    color: rgba(255, 255, 255, 0.68);
}

.services-item-link{
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

.services-item-link a{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
}

.services-item-link a i{
    font-size: 12px;
    transition: transform 0.3s ease-in-out;
}

.services-item-link a:hover{
    color: var(--accent-color);
}

.services-item-link a:hover i{
    transform: translateX(5px);
}

/* Buttons sitting on one baseline wherever two of them are paired */
.hero-btn,
.cta-box-btn,
.error-page-btn,
.about-us-btn,
.why-choose-btn{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.hero-btn,
.cta-box-btn,
.error-page-btn{
    justify-content: center;
}

.hero-btn .btn-default,
.cta-box-btn .btn-default,
.error-page-btn .btn-default,
.hero-btn .btn-outline,
.cta-box-btn .btn-outline,
.error-page-btn .btn-outline{
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    line-height: 1em;
}

.btn-outline{
    padding: 17px 32px;
}

/* Active menu item must stay light — Bootstrap paints .nav-link.active dark */
.main-menu ul li a.nav-link.active,
.main-menu .nav-menu-wrapper > ul > li > a.nav-link.active,
.slicknav_nav a.nav-link.active{
    color: var(--accent-color) !important;
}

body.page-about .about-skill-box,
body.page-about .expert-team-box{
    animation: none !important;
}

body.page-about .about-image figure,
body.page-about .about-image figure img{
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}