/* Conen Digital: accessible colours and resilient responsive typography. */
:root {
    --conen-ink: #292337;
    --conen-purple: #514b80;
    --conen-coral: #fd7161;
    --conen-rust: #aa382e;
}
/* Keep the coral surfaces bright; use dark ink for normal-sized labels. */
.btn.btn-orange-white,
.btn.btn-orange {
    background: var(--conen-coral);
    border-color: var(--conen-coral);
    color: var(--conen-ink);
    font-weight: 600;
}
.btn.btn-hvr-white:hover,
.btn.btn-hvr-white:focus-visible {
    background: #fff !important;
    color: var(--conen-rust) !important;
    border-color: #fff;
}
.pink-and-purple-btn:hover,
.pink-and-purple-btn:focus-visible {
    background: var(--conen-coral) !important;
    color: var(--conen-ink) !important;
}
.navbar-simple .navbar-nav .nav-link.active,
.navbar-simple .navbar-nav .nav-link:hover,
.side-nav .navbar-nav .nav-link.active,
.side-nav .navbar-nav .nav-link:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #ffb8ae;
    text-underline-offset: 7px;
    text-decoration-thickness: 2px;
}
/* The lightest violet still provides AA contrast for white body copy. */
.gradient-bg1 {
    background-image: linear-gradient(135deg, #474474 40%, #66639e 100%);
}
.about-us .card-body p,
.about-us .card-body .text-black {
    color: var(--conen-ink) !important;
    line-height: 1.4;
}
.about-us .card:hover p,
.about-us .card:hover .text-black {
    color: #fff !important;
}
.about-us .card { transition: box-shadow .3s ease, transform .3s ease; }
.about-des, .feature-des { line-height: 1.65; }
.team-tittle .sub-heading { color: #fff !important; }
.name-img .name {
    color: var(--conen-rust);
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    margin: 0 !important;
}
.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(--conen-purple);
    border-color: var(--conen-purple);
    font-weight: 600;
}
.portfolio-sec .cbp-l-filters-button .cbp-filter-item {
    font-size: 13px;
    line-height: 2;
    margin-bottom: 10px;
}
/* Directional overlay protects captions without obscuring the whole photo. */
.portfolio-sec .cbp-l-grid-mosaic .cbp-caption-activeWrap {
    background: linear-gradient(0deg, rgba(25, 21, 35, .9), rgba(25, 21, 35, .48) 45%, rgba(25, 21, 35, .12));
}
.testimonial-sec .testimonial-text,
.testimonial-sec .testimonial-heading,
.testimonial-sec .testimonial-area .testimonial-carousel .testimonial-box .user-name,
.testimonial-sec .testimonial-area .testimonial-carousel .testimonial-box .icon-holder i {
    color: var(--conen-ink);
}
.testimonial-text { font-weight: 400; }
.company-about, .company-about a { color: #59545f; }
.contact-sec .contact-form .form-control {
    color: var(--conen-ink);
    border-color: #aaa5af;
}
.contact-sec .contact-form .form-control::placeholder {
    color: #625d69;
    opacity: 1;
}
.contact-sec .contact-form .form-control:focus {
    border-color: var(--conen-purple);
    box-shadow: 0 0 0 3px rgba(81, 75, 128, .18);
}
a:focus-visible, button:focus-visible, .cbp-filter-item:focus-visible {
    outline: 3px solid var(--conen-rust);
    outline-offset: 4px;
}
.gradient-bg1 a:focus-visible, header a:focus-visible { outline-color: #fff; }
@media (max-width: 767px) {
    .heading-area .banner-heading { font-size: 34px; line-height: 1.2; }
    .about-us .card-body { padding-left: 28px; padding-right: 28px; }
    .portfolio-foot-detail .pink-and-purple-btn {
        padding: 14px 16px;
        font-size: 12px;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }
    .company-about { line-height: 1.7; }
}
/* The expanded mobile menu also carries normal-sized white footer copy. */
.side-menu { background: #514b80; }
.side-menu .social-icons-simple a:hover { color: #fff !important; }
.parallax-box i, .contact-sec .contact-details ul li i { color: var(--conen-rust); }
.team-owl .owl-nav button.owl-next,
.team-owl .owl-nav button.owl-prev { color: #fff; }
.team-owl .owl-nav button.owl-next span:hover,
.team-owl .owl-nav button.owl-prev span:hover { color: var(--conen-rust); }