/* Conen Digital: accessible colour roles, preserving the original lime/blush palette. */
:root { --conen-ink: #263119; --conen-green: #395511; --conen-pink: #8c2053; --conen-orange: #803a13; }
.text-green, .news-item .news-title:hover { color: var(--conen-green); }
.text-pink, .testimonial-team .owl-item.center .team-name,
.team-section .image-holder:hover ~ .team-name { color: var(--conen-pink); }
.text-orange, .text-yellow { color: var(--conen-orange); }
.text-grey { color: #595959; }
.btn.btn-green, .about .box, .about .box .btn-trans { color: var(--conen-ink); }
.about .box .btn-trans { border-color: var(--conen-ink); }
.btn.btn-green:hover, .btn.btn-green:focus-visible { background: var(--conen-pink) !important; border-color: var(--conen-pink); color: #fff !important; }
.about .box .btn-trans:hover { background: #fff !important; color: var(--conen-ink) !important; }
.about .box p, .feature-item p, .slider-area p, .para { font-weight: 400; }
.side-menu { background: #962457; }
.side-nav .navbar-nav .nav-item .nav-link span { opacity: 1; }
.side-nav .navbar-nav .nav-link:hover span,
.side-nav .navbar-nav .nav-link.active span { color: #fff; }
.social-icons-simple li a:hover { color: var(--conen-ink); }
.sidemenu_btn span, .header-appear .sidemenu_btn span { background: #263119; }
/* Text over portfolio imagery receives its own backing, without dimming the photo. */
.single-work .image-overlay { background: rgba(28, 31, 26, .88); padding: 18px 24px; border-radius: 4px; }
a:focus-visible, .contact-sec .contact-form .form-control:focus-visible { outline: 3px solid var(--conen-pink); outline-offset: 4px; }
.contact-sec .contact-form .form-control { border-bottom-color: #706566; color: #2f2f2f; }
.contact-sec .contact-form .form-control::placeholder { opacity: 1; }
.team-section .image-holder img { object-fit: cover; }
.banner-image img { width: 100%; height: auto; }
@media (min-width: 768px) {
 .slider-area p { width: 85%; max-width: 470px; }
 .slider-area h1 { font-size: clamp(38px, 4.2vw, 64px); }
 .slider-area h1 span.js-rotating { font-size: clamp(30px, 3.2vw, 48px); }
}
@media (max-width: 767px) {
 .slider-area { height: auto; min-height: 100vh; padding-bottom: 32px; }
 .slider-area h1 { margin-top: 126px; font-size: 36px; }
 .slider-area h1 span.js-rotating { font-size: 28px; }
 .slider-area p, .para, .contact-sec .contact-details .text { font-size: 16px; line-height: 1.55; }
 .contact-sec .contact-details ul li span { padding-right: 10px; white-space: nowrap; }
}