/* AyR brand accent: warm orange sampled from the engineers' safety suits. */
:root {
    --ayr-orange: #f47f2c;
}

::-webkit-scrollbar-thumb,
::selection,
::-moz-selection,
.site-preloader-wrap .spinner,
.default-btn,
.header-right a.header-btn,
.main-slider .slider-btn,
.main-slider .slick-dots li.slick-active button,
.main-slider .slick-arrow,
.nav-style .slick-arrow:hover,
.carousel-dots .slick-dots li.slick-active button,
.scroll-to-top,
.exp-box,
.exp-box:before,
.service-box .service-icon,
.promo-count,
.promo-count:before,
.service-4 .service-item:hover,
.project-thumb .project-view,
.project-thumb .project-view a,
.project-info-box .p-social a,
.team-section-2 .team-content,
.skills-items .skills-item .progress .progress-bar,
.play-btn,
.icon-box span,
.pricing-tag h4,
.contact-section .contact-details li i,
.blog-item .blog-thumb .category,
.blog-content .read-more:before,
.pagination-wrap li a:hover,
.pagination-wrap li a.active,
.post-tags li a,
.blog-single-wrap .comments-area .comment-reply-link:before,
.blog-single-wrap .comment-respond .form-submit input,
.sidebar-wrap .widget-content h4:before,
.widget-content .tags li a,
.footer-social li a:hover,
.footer-header h3:after,
.subscribe-widget:before,
.subscribe-widget input[type="submit"],
.project-filter li.active:after,
.project-filter li.active:before,
.project-box .project-content,
.team-box .team-content,
.testimonial-item .quote-icon,
.contact-form .default-btn,
.footer-social li a:hover,
.footer-section .footer-widget .widget-title:after {
    background-color: var(--ayr-orange) !important;
}

.bg-yellow {
    background-color: color-mix(in srgb, var(--ayr-orange) 80%, transparent) !important;
}

.main-slider .slider-caption.medium,
.section-heading h4,
.section-heading span,
.mid-header .mid-header-right ul li .icon,
.header-menu-wrap ul li:hover > a,
.header-menu-wrap li li:hover > a,
#dl-popup-search-box .box-inner-wrap button,
.hero-content h4,
.hero-content h2 span,
.about-icon,
.list-icon li i,
.service-2 .service-icon,
.service-wrap i,
.service-wrap .overlay-icon i,
.service-4 .service-icon,
.service-4 .service-content .read-more,
.service-4 .service-item .overlay-icon i,
.nav-style .slick-arrow,
.project-content h3 a:hover,
.project-filter li.active,
.counter-content h3,
.skill-list li i,
.testi-item .ratings li i,
.testi-content .quote-icon,
.icon-box,
.info-box i,
.acc-item.active-acc h5 a,
.acc-item h5 a[aria-expanded^="true"],
.blog-content h3 a:hover,
.blog-content .read-more:hover,
.blog-single-content h2 a:hover,
.single-post-meta li i,
.author-box .social-icon li a:hover,
.post-navigation .col a:hover,
.blog-single-wrap .comments-area .comment-reply-link,
.thumb-post li a:hover,
.widget-content ul li a:hover,
.footer-icon-info a,
.footer-list li a:hover,
.footer-section .thumb-post li a:hover,
.team-social li a:hover,
.contact-info li i,
.service-item .service-icon,
.working-process .process-icon {
    color: var(--ayr-orange) !important;
}

.default-btn,
.header{ border-color: var(--ayr-orange) !important; }

.about-section .sign {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.about-section .sign img {
    order: -1;
    padding-left: 0;
}

.testi-content {
    padding-left: 0;
}

.header {
    border-bottom-color: var(--ayr-orange) !important;
}

.dl-popup-search-box .box-inner-wrap input,
.contact-form .form-control:focus,
.project-filter li.active,
.blog-single-content blockquote,
.footer-section .footer-social li a:hover,
.blog-single-wrap .comment-respond form textarea:focus,
.icon-box span {
    border-color: var(--ayr-orange) !important;
}

.section-heading h4:after,
.section-heading h4:before,
.project-box:after,
.team-box:after {
    background: var(--ayr-orange) !important;
}

.footer-section svg path,
.counter-item svg path,
.footer-icon-content svg {
    fill: var(--ayr-orange) !important;
}

/* Give the horizontal AyR mark a stronger presence in the header. */
.mid-header .header-logo {
    max-width: 330px;
}

.mid-header .header-logo img {
    display: block;
    max-width: 100%;
    width: 100%;
}

@media (max-width: 992px) {
    .mid-header .header-logo {
        max-width: 285px;
    }
}

@media (max-width: 782px) {
    .mid-header .header-logo {
        max-width: 250px;
    }
}

@media (max-width: 580px) {
    .mid-header .header-logo {
        max-width: 220px;
    }
}