/* Accessible palette: separate text accents from white-label button fills. */
:root { --basket-accent: #ff9475; --basket-action: #bd3514; }
body { background: #23262d; color: #f5f5f6; }
.text-orange,
.portfolio-sec .portfolio-foot-detail .p-num,
.portfolio-sec .cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active,
.portfolio-sec .cbp-l-filters-button .cbp-filter-item:hover { color: var(--basket-accent); }
.portfolio-sec .cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active,
.portfolio-sec .cbp-l-filters-button .cbp-filter-item:hover { border-color: var(--basket-accent); }
.btn.btn-orange, .btn.btn-blue, .btn.orange-btn, .btn.orange-and-blue-btn {
    background-color: var(--basket-action); border-color: var(--basket-action); color: #fff; font-weight: 600;
}
.btn.btn-orange:hover, .btn.btn-blue:hover, .btn.orange-btn:hover, .btn.orange-and-blue-btn:hover {
    background-color: #fff; border-color: #fff; color: #23262d;
}
.go-top, .go-top::before, .button:hover i { background-color: var(--basket-action); }
.social-icons-simple li a:hover { color: #a62e11; }
.footer-social a:hover { background-color: var(--basket-action); color: #fff; }
/* Directional shade protects copy while keeping the players bright. */
.bg-banner { background-image: linear-gradient(90deg, rgba(13,18,23,.68) 0%, rgba(13,18,23,.48) 40%, rgba(13,18,23,.08) 75%), url('../images/banner-img.jpg'); }
.navbar-top-default { background: #23262d; }
.banner-text, .banner-des, .banner-div .button { font-weight: 400; }
.app-feature p, .info { font-size: 16px; font-weight: 400; line-height: 1.75; }
.contact-section .contact-form .form-control { color: #fff; border-bottom-color: #aeb5bf; }
.contact-section .contact-form .form-control::placeholder { color: #c7cbd2; opacity: 1; }
.contact-section .contact-form .form-control:focus { border-color: var(--basket-accent); box-shadow: 0 1px 0 var(--basket-accent); }
a:focus-visible, button:focus-visible, .cbp-filter-item:focus-visible { outline: 2px solid #ffb49d; outline-offset: 5px; }
.portfolio-sec .cbp-l-grid-mosaic .cbp-caption-activeWrap { background: linear-gradient(0deg, rgba(20,24,30,.92), rgba(20,24,30,.20)); }
.reviews-sec .about-img { object-fit: cover; object-position: center; }
.company-about { font-size: 13px; line-height: 1.8; }
.orange-and-blue-btn { padding: 14px 20px; overflow-wrap: normal; word-break: normal; }
@media (max-width: 991px) {
    /* Preserve the photo-above-copy mobile composition without viewport clipping. */
    .bg-banner { height: auto; margin-top: 100px; padding: 53.125vw 0 0; background-image: url('../images/banner-img.jpg'); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; }
    .bg-banner > .container { max-width: none; }
    .bg-banner .height { position: static; width: auto; height: auto; min-height: 0; margin: 0 -15px; padding: 55px 20px; background: #bd3514; }
    .banner-div { position: static; text-align: center; width: 100%; }
    .banner-des { width: 100%; max-width: 540px; margin-left: auto; margin-right: auto; }
    .banner-heading { font-size: clamp(32px, 6vw, 48px); }
    .portfolio-sec .cbp-l-filters-button .cbp-filter-item { font-size: 14px; line-height: 1.6; margin: 6px 10px; }
    .orange-and-blue-btn { font-size: 12px; padding: 12px 14px; }
    .company-about { font-size: 12px; }
}
/* Use an opaque section tone so contrast is independent of the body beneath it. */
.bg-gray { background-color: #393c42; }
.footer-social li a:hover { background-color: var(--basket-action); color: #fff; }