:root {
--cintas-navy: #00205b;
--cintas-red: #b2122b;
--cintas-red-hover: #8e0e22;
--cintas-blue: #0077c8;
--cintas-teal: #00a9a5;
--cintas-orange: #e87722;
--cintas-yellow: #c4a000;
--cintas-light-gray: #f4f4f4;
--cintas-text: #333;
}
html {
font-size: 16px;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
color: var(--cintas-text);
overflow-x: hidden;
font-size: 1rem;
}
.container {
width: 100%;
max-width: 90rem;
margin-right: auto;
margin-left: auto;
padding-left: .9375rem;
padding-right: .9375rem;
}
.navbar .container {
margin: 0 auto;
max-width: 107.5rem;
width: 100%;
z-index: 3;
}
.container-fixed {
margin: 0 auto;
max-width: 107.5rem;
width: 100%;
padding: 0 1rem;
}
a {
text-decoration: none;
} .utility-bar {
border-bottom: 1px solid #e5e5e5;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.04em;
background-color: #d9e1e4;
}
.utility-bar a {
color: var(--cintas-navy);
padding: 0.55rem 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: color 0.3s;
}
.utility-bar a:hover {
color: var(--cintas-red);
}
.utility-bar .divider {
width: 1px;
height: 16px;
background: #ccc;
display: inline-block;
} .main-navbar {
background: #fff;
padding: 0.75rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.logo-img {
height: 52px;
width: auto;
}
.utility-bar .utility-chevron {
font-size: 0.55rem;
}
.nav-main .nav-link {
color: var(--cintas-navy) !important;
font-weight: 500;
font-size: 1.125rem;
padding: 0.5rem 1.1rem !important;
position: relative;
transition: color 0.3s;
}
.nav-main .nav-link:hover,
.nav-main .nav-link.show {
color: var(--cintas-navy) !important;
}
.nav-main .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 1.1rem;
right: 1.1rem;
height: 3px;
background: var(--cintas-red);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.nav-main .nav-link:hover::after,
.nav-main .nav-link.show::after,
.nav-main .nav-item:hover .nav-link::after {
transform: scaleX(1);
}
.nav-main .dropdown-toggle::after {
display: none;
}
.nav-main .bi-chevron-down {
font-size: 0.6rem;
margin-left: 4px;
}
.btn-contact {
background: var(--cintas-red);
color: #fff;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.06em;
padding: 1rem 1.5rem;
border: none;
border-radius: 4px;
transition: all 0.3s ease;
}
.company-hero-panel .btn.btn-contact {
display: inline-block;
width: auto;
max-width: fit-content;
margin: 30px auto 0;
}
.btn-contact:hover {
background: var(--cintas-red-hover);
color: #fff;
transform: scale(1.03);
box-shadow: 0 4px 12px rgba(178, 18, 43, 0.35);
}
.btn-red {
background: var(--cintas-red);
color: #fff;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.06em;
padding: 1rem 1.5rem;
border: none;
border-radius: 4px;
transition: all 0.3s ease;
}
.btn-red:hover {
background: var(--cintas-red-hover);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(178, 18, 43, 0.3);
}
.search-icon {
color: var(--cintas-navy);
font-size: 1.1rem;
cursor: pointer;
transition: color 0.3s;
}
.search-icon:hover {
color: var(--cintas-red);
} .dropdown-menu-cintas {
border: none;
border-radius: 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 1.5rem 2rem;
min-width: 260px;
margin-top: 0 !important;
animation: dropdownFade 0.3s ease;
}
@keyframes dropdownFade {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-menu-cintas .dropdown-header {
color: var(--cintas-navy);
font-weight: 900;
font-size: 0.85rem;
letter-spacing: 0.08em;
padding: 0 0 0.75rem;
margin-bottom: 0.25rem;
border-bottom: none;
}
.dropdown-menu-cintas .dropdown-item {
color: var(--cintas-navy);
font-size: 0.9rem;
padding: 0.45rem 0;
transition: all 0.25s;
background: transparent;
}
.dropdown-menu-cintas .dropdown-item:hover {
color: var(--cintas-red);
background: transparent;
padding-left: 8px;
} .announcement-bar {
background: var(--cintas-navy);
color: #fff;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.03em;
padding: 1rem 0;
}
.announcement-bar p {
margin: 0;
}
.announcement-bar a {
color: #fff;
font-weight: 700;
margin-left: 0.5rem;
transition: opacity 0.3s;
}
.announcement-bar a:hover {
opacity: 0.8;
color: #fff;
} .hero-section {
background: var(--cintas-navy);
min-height: 420px;
overflow: hidden;
position: relative;
background-repeat: no-repeat;
background-size: cover;
}
.hero-section:before {
content: '';
content: "";
display: block;
background: linear-gradient(90deg, #012169 0% 25%, #01216900 50% 80%, #012169);
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
.hero-content {
padding: 4rem 3rem;
display: flex;
align-items: center;
min-height: 420px;
}
.hero-accent {
display: flex;
flex-direction: column;
gap: 0;
margin-right: 1.25rem;
flex-shrink: 0;
display: none;
}
.hero-accent span {
width: 5px;
height: 28px;
display: block;
}
.hero-accent .accent-blue {
background: #0077c8;
}
.hero-accent .accent-yellow {
background: #f5c518;
}
.hero-accent .accent-red {
background: var(--cintas-red);
}
.hero-title {
font-size: clamp(2.6rem, 3.5vw, 3.375rem);
font-weight: 900;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
position: relative;
padding-left: 1rem;
}
h1.hero-title:before {
content: "";
background: linear-gradient(180deg, #0067a0 0% 25%, #09c 25% 50%, #ff7f32 50% 75%, #ba0c2f 75% 100%);
display: block;
width: 10px;
height: 100%;
position: absolute;
top: 0;
left: -1.25rem;
}
.hero-image {
height: 420px;
object-fit: cover;
width: 100%;
} .services-section {
background: var(--cintas-light-gray);
padding: 4rem 0;
}
.services-heading {
color: var(--cintas-navy);
font-weight: 900;
font-size: clamp(1.55rem, 2.2vw, 2rem);
letter-spacing: 0.03em;
text-transform: uppercase;
text-align: center;
max-width: 900px;
margin: 0 auto 2.5rem;
line-height: 1.2;
} .services-section .row>[class*="col-"] {
position: relative;
}
.service-card-flip {
perspective: 1200px;
margin-bottom: 1.5rem;
cursor: pointer;
aspect-ratio: 1 / 1;
}
.service-card-flip:hover {
z-index: 20;
}
.service-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
transform-style: preserve-3d;
will-change: transform;
}
.service-card-flip:hover .service-card-inner {
transform: rotateY(180deg) scale(1);
}
.service-card-front,
.service-card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.45s ease;
}
.service-card-flip:hover .service-card-front,
.service-card-flip:hover .service-card-back {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.service-card-back {
transform: rotateY(180deg);
background: #fff;
}
.service-card-front .card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.service-card-flip:hover .service-card-front .card-img {
transform: scale(1.1);
}
.service-card-front .card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
padding: 2.5rem 1rem 0.75rem;
z-index: 1;
}
.service-card-front .card-title-overlay {
color: #fff;
font-weight: 700;
margin: 0;
font-size: 1.25rem;
}
.service-card-front .color-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6px;
z-index: 2;
}
.bar-blue {
background: var(--cintas-blue);
}
.bar-teal {
background: var(--cintas-teal);
}
.bar-orange {
background: var(--cintas-orange);
}
.bar-red {
background: var(--cintas-red);
}
.bar-yellow {
background: var(--cintas-yellow);
} .service-card-text {
background: #fff;
padding: 1.75rem;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.service-card-text .card-title {
color: var(--cintas-navy);
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.service-card-text p {
color: #555;
line-height: 1.55;
margin-bottom: 0.75rem;
}
.service-card-text .read-more {
color: var(--cintas-navy);
font-weight: 700;
transition: color 0.3s;
text-transform: capitalize;
}
.service-card-text .read-more:hover {
color: var(--cintas-red);
} .about-section {
padding: 4rem 0;
}
.about-video-thumb {
position: relative;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
aspect-ratio: 16 / 9;
}
.about-video-thumb img {
width: 100%;
object-fit: cover;
transition: transform 0.5s ease;
aspect-ratio: 16 / 9;
}
.about-video-thumb:hover img {
transform: scale(1.05);
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.92);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.play-btn i {
color: var(--cintas-red);
font-size: 1.8rem;
margin-left: 4px;
}
.about-video-thumb:hover .play-btn {
transform: translate(-50%, -50%) scale(1.1);
background: #fff;
}
.section-title {
color: var(--cintas-navy);
font-weight: 900;
font-size: 2rem;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.about-text {
line-height: 1.4;
color: #000000;
margin-bottom: 1.5rem;
} .investor-section {
position: relative;
overflow: hidden;
min-height: 480px;
}
.investor-bg-left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 42%;
background: #fff;
z-index: 0;
}
.investor-bg-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 58%;
background: url(//aspluniform.com/wp-content/themes/alma-sourcing/assets/imgs/shareholder-card.webp) center/cover no-repeat;
z-index: 0;
}
.investor-content {
position: relative;
z-index: 1;
padding: 3.5rem 0 4rem;
}
.investor-content .section-title {
margin-bottom: 1.75rem;
}
.investor-card {
background: #fff;
border-radius: 8px;
padding: 1.75rem 2rem;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
margin-bottom: 1.25rem;
max-width: 720px;
display: flex;
gap: 1rem;
}
.investor-card .investor-icon {
width: 26px;
height: auto;
display: block;
margin-bottom: 1rem;
}
.investor-card .investor-doc-icon {
color: var(--cintas-navy);
font-size: 1.8rem;
display: block;
margin-bottom: 1rem;
line-height: 1;
}
.investor-card h5 {
color: var(--cintas-navy);
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.85rem;
font-size: 1.5rem;
}
.investor-card .investor-desc {
color: var(--cintas-navy);
margin-bottom: 1.25rem;
}
.investor-card .investor-link {
color: var(--cintas-navy);
font-weight: 700;
font-size: 0.95rem;
transition: color 0.3s;
text-transform: capitalize;
}
.investor-card .investor-link:hover {
color: var(--cintas-red);
}
.investor-btn {
margin-top: 0.5rem;
} .contact-section {
background: #f0f0f0;
padding: 4rem 0 5rem;
}
.contact-row {
position: relative;
}
.contact-form-col {
position: relative;
z-index: 2;
}
.contact-side-col {
position: relative;
z-index: 1;
padding-top: 1.5rem;
}
.contact-form-card {
background: #fff;
border-radius: 8px;
padding: 2.25rem 2.5rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.contact-form-title {
color: var(--cintas-navy);
font-weight: 900;
font-size: 1.35rem;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.contact-form-intro {
font-size: 0.9rem;
color: #666;
line-height: 1.55;
margin-bottom: 0.35rem;
}
.contact-required-note {
font-size: 0.82rem;
color: #666;
margin-bottom: 1.5rem;
}
.required-star {
color: var(--cintas-red);
}
.contact-form-card .form-label {
margin-bottom: 0.35rem;
color: #00205b;
}
.contact-form-card .form-control {
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.88rem;
padding: 0.55rem 0.75rem;
color: #333;
}
.contact-form-card .form-control::placeholder {
color: #999;
}
.contact-form-card .form-control:focus {
border-color: var(--cintas-navy);
box-shadow: 0 0 0 0.15rem rgba(0, 32, 91, 0.12);
}
.contact-checkbox-title {
font-weight: 600;
color: #444;
margin-bottom: 0.75rem;
}
.contact-checkboxes .form-check {
margin-bottom: 0.45rem;
}
.contact-form-card .form-check-label {
color: #00205b;
}
.contact-form-card .form-check-input {
border-color: #aaa;
}
.contact-form-card .form-check-input:checked {
background-color: var(--cintas-navy);
border-color: var(--cintas-navy);
}
.contact-submit-btn {
margin-top: 0.5rem;
padding: 0.7rem 2.5rem;
}
.contact-cta-row {
height: 100%;
}
.contact-cta-card {
border-radius: 12px;
padding: 2rem 1.75rem;
min-height: 200px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-cta-card-red {
background: var(--cintas-red);
}
.contact-cta-card-navy {
background: var(--cintas-navy);
}
.contact-cta-title {
color: #fff;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.contact-cta-btn {
display: inline-block;
align-self: flex-start;
background: transparent;
color: #fff;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
padding: 0.45rem 1.25rem;
border: 2px solid #fff;
border-radius: 6px;
transition: all 0.3s ease;
}
.contact-cta-btn:hover {
background: #fff;
color: var(--cintas-navy);
}
.contact-cta-card-red .contact-cta-btn:hover {
color: var(--cintas-red);
}
.contact-cta-btn-sm {
padding: 0.45rem 1.75rem;
}
.existing-service-box {
background: var(--cintas-red);
color: #fff;
padding: 1.1rem 1.5rem;
border-radius: 8px;
margin-bottom: 1.25rem;
display: flex;
align-items: baseline;
gap: 1rem;
max-width: 340px;
flex-direction: column;
}
.existing-service-box span {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.2;
flex: 1;
}
.existing-service-box .go-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 2px solid #fff;
flex-shrink: 0;
color: #fff;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.06em;
padding: 1rem 1.5rem;
border-radius: 4px;
transition: all 0.3s ease;
}
.existing-service-box .go-btn:hover {
background: #fff;
color: var(--cintas-red);
}
.contact-image {
margin-left: -4rem;
margin-top: 4rem;
}
.contact-image img {
width: 100%;
min-height: 340px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
} .site-footer {
background: #fff;
padding: 2.75rem 0 2.5rem;
}
.social-icons {
display: flex;
align-items: center;
gap: 0.65rem;
}
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--cintas-navy);
color: #fff;
font-size: 1.125rem;
transition: background 0.3s ease;
}
.social-icons a:hover {
background: var(--cintas-red);
color: #fff;
}
.footer-right {
text-align: right;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.35rem 1.75rem;
margin-bottom: 1.1rem;
}
.footer-links a {
color: var(--cintas-navy);
font-weight: 700;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--cintas-red);
}
.footer-legal {
text-align: right;
}
.footer-legal-line,
.footer-recaptcha {
color: #556677;
margin: 0;
line-height: 1.55;
}
.footer-legal-line {
font-size: 0.86rem;
margin-bottom: 0.4rem;
}
.footer-recaptcha {
font-size: 0.75rem;
}
.footer-legal a {
color: #00205b;
transition: color 0.3s;
}
.footer-legal a:hover {
color: var(--cintas-navy);
}
.privacy-choices-icon {
display: inline-block;
vertical-align: middle;
margin-left: 0.15rem;
line-height: 0;
} @media (max-width: 991.98px) {
.hero-content {
padding: 3rem 1.5rem;
min-height: auto;
}
.hero-image {
height: 300px;
}
.investor-bg-left {
width: 100%;
height: 40%;
bottom: auto;
}
.investor-bg-right {
width: 100%;
top: 40%;
height: 60%;
}
.investor-card {
max-width: 100%;
}
.contact-image {
margin-left: 0;
}
.contact-side-col {
padding-top: 0;
}
.existing-service-box {
max-width: 100%;
}
.contact-cta-title {
font-size: 1.15rem;
}
.footer-right {
text-align: left;
}
.footer-links {
justify-content: flex-start;
gap: 0.35rem 1.25rem;
}
.footer-legal {
text-align: left;
}
}
@media (max-width: 767.98px) {
.utility-bar .divider {
display: none;
}
.utility-bar a {
padding: 0.4rem 0.5rem;
font-size: 0.65rem;
}
.hero-title {
font-size: 1.4rem;
}
}
.contact-checkboxes {
column-count: 2;
}
@media (max-width: 575px) {
.contact-checkboxes {
column-count: 1;
}
} .company-breadcrumb {
background: #fff;
padding: 0.65rem 0 0.85rem;
}
.company-breadcrumb-list {
font-size: 0.8rem;
font-weight: 400;
}
.company-breadcrumb-list .breadcrumb-item,
.company-breadcrumb-list .breadcrumb-item a {
color: var(--cintas-navy);
text-decoration: none;
font-weight: bold;
}
.company-breadcrumb-list .breadcrumb-item a:hover {
color: var(--cintas-red);
}
.company-breadcrumb-list .breadcrumb-item.active {
color: var(--cintas-navy);
font-weight: 400;
}
.company-breadcrumb-list .breadcrumb-item+.breadcrumb-item::before {
content: "|";
color: var(--cintas-navy);
padding: 0 0.45rem;
float: none;
}
.company-hero {
background: #fff;
padding: 0 0 3.5rem;
overflow: visible;
}
.company-hero-wrap {
position: relative;
min-height: 360px;
}
.company-hero-media {
display: inline-block;
border-radius: .5rem;
height: calc(100% - 1.5625rem);
width: 60%;
max-width: 60rem;
position: absolute;
right: .9375rem;
overflow: hidden;
}
.company-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.company-hero-panel {
min-width: 280px;
min-height: 265px;
background: var(--cintas-navy);
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.75rem 2.5rem 0;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
height: calc(100% - 1.5625rem);
max-width: 53.75rem;
width: 52%;
position: absolute;
top: 1.5625rem;
left: .9375rem;
border-radius: .5rem;
z-index: 1;
text-align: center;
}
.company-hero-title {
color: #fff;
font-size: clamp(2.85rem, 3.8vw, 3.25rem);
font-weight: 900;
letter-spacing: 0.03em;
text-transform: uppercase;
margin: 0;
line-height: 1.12;
}
.company-hero-accent {
display: flex;
margin-top: auto;
width: calc(100% + 2.5rem);
margin-left: -2.5rem;
margin-right: 0;
}
.company-hero-accent span {
flex: 1;
height: 7px;
}
.company-hero-accent .accent-teal {
background: #0077c8;
}
.company-hero-accent .accent-blue {
background: #00a9e0;
}
.company-hero-accent .accent-orange {
background: var(--cintas-orange);
}
.company-hero-accent .accent-red {
background: var(--cintas-red);
}
.company-main {
background: #fff;
padding: 3rem 0 4rem;
}
.company-sidebar {
border-left: 1px solid #d8d8d8;
padding-left: 0;
}
.sidebar-section-label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem 1rem 1.25rem;
color: var(--cintas-navy);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 1.125rem;
position: relative;
margin: 0;
}
.sidebar-section-label i {
font-size: 0.75rem;
}
.sidebar-accordion {
display: flex;
flex-direction: column;
}
.sidebar-group {
border-left: 3px solid transparent;
margin-left: -1px;
}
.sidebar-group.is-active {
border-left-color: var(--cintas-blue);
}
.sidebar-item-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1rem 0.85rem 1.25rem;
border: none;
background: transparent;
color: var(--cintas-navy);
font-weight: 700;
text-align: left;
cursor: pointer;
transition: color 0.25s ease;
}
.sidebar-group.is-open .sidebar-item-toggle span {
font-weight: 700;
}
.sidebar-item-toggle:hover {
color: var(--cintas-red);
}
.sidebar-chevron {
font-size: 0.7rem;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.sidebar-group.is-open .sidebar-chevron {
transform: rotate(180deg);
}
.sidebar-submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-sublink {
display: block;
padding: 0.55rem 1rem 0.55rem 2rem;
color: var(--cintas-navy);
font-size: 0.9rem;
font-weight: 400;
text-decoration: none;
transition: color 0.25s ease;
}
.sidebar-sublink:hover {
color: var(--cintas-red);
}
.sidebar-link {
display: block;
padding: 0.85rem 1rem 0.85rem 1.25rem;
color: var(--cintas-navy);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
border-left: 3px solid transparent;
margin-left: -1px;
transition: color 0.25s ease;
}
.sidebar-link:hover {
color: var(--cintas-red);
}
.company-content {
padding-top: 0.25rem;
padding-left: 1rem;
}
.company-content p {
margin-bottom: 1.5rem;
}
.company-content p:last-child {
margin-bottom: 0;
}
@media (max-width: 991.98px) {
.company-hero-wrap {
min-height: auto;
padding-bottom: 1rem;
}
.company-hero-media {
margin-left: 0;
height: 240px;
border-radius: 0;
position: static;
width: 100%;
height: auto;
}
.company-hero-panel {
position: relative;
top: auto;
left: auto;
width: 100%;
min-width: 0;
min-height: 200px;
margin-top: -1rem;
margin-bottom: 1.5rem;
border-radius: 0;
padding: 2rem 1.75rem 0;
max-width: 100%;
}
.company-hero-accent {
width: calc(100% + 1.75rem);
margin-left: -1.75rem;
}
.company-content {
padding-left: 0;
padding-top: 1.5rem;
}
}
.card-hero__swatch.multi-color {
height: 20px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #0067a0;
border-radius: 0 0 .5rem .5rem;
background: -moz-linear-gradient(left, #0067a0 0%, #0067a0 25%, #0099cc 25%, #0099cc 50%, #ff7f32 50%, #ff7f32 75%, #ba0c2f 75%, #ba0c2f 100%);
background: -webkit-linear-gradient(left, #0067a0 0%, #0067a0 25%, #0099cc 25%, #0099cc 50%, #ff7f32 50%, #ff7f32 75%, #ba0c2f 75%, #ba0c2f 100%);
background: linear-gradient(to right, #0067a0 0% 25%, #09c 25% 50%, #ff7f32 50% 75%, #ba0c2f 75% 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0067a0", endColorstr="#ba0c2f", GradientType=1);
} .cintas-numbers-section {
background: #f0f0f0;
padding: 3.5rem 0 4.5rem;
}
.cintas-numbers-title {
text-align: center;
color: var(--cintas-navy);
font-weight: 900;
font-size: 1.45rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 2.25rem;
}
.cintas-numbers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.15rem;
}
.stats-card {
background: #fff;
border-radius: 8px;
padding: 1.65rem 1.15rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 155px;
}
.stats-card:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
min-height: 100%;
padding: 2.5rem 2rem;
}
.stats-card:nth-child(2) {
grid-column: 3;
grid-row: 1;
}
.stats-card:nth-child(3) {
grid-column: 4;
grid-row: 1;
}
.stats-card:nth-child(4) {
grid-column: 3;
grid-row: 2;
}
.stats-card:nth-child(5) {
grid-column: 4;
grid-row: 2;
}
.stats-card:nth-child(6) {
grid-column: 1;
grid-row: 3;
}
.stats-card:nth-child(7) {
grid-column: 2;
grid-row: 3;
}
.stats-card:nth-child(8) {
grid-column: 3 / 5;
grid-row: 3;
}
.stats-icon {
width: 52px;
height: auto;
margin-bottom: 0.85rem;
object-fit: contain;
}
.stats-icon-lg {
width: 72px;
margin-bottom: 1.25rem;
}
.stats-label {
color: var(--cintas-navy);
text-transform: uppercase;
margin: 0 0 0.35rem;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 3px;
line-height: 1.2;
}
.stats-label-sm {
font-size: 0.62rem;
max-width: 180px;
}
.stats-value {
color: var(--cintas-navy);
text-transform: uppercase;
margin: 0 0 0.35rem;
font-size: 2.75rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1.2;
}
.stats-value-xl {
font-size: clamp(2.2rem, 4vw, 4.25rem);
margin-bottom: 0.5rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1.22;
}
.stats-desc {
color: #666;
margin: 0;
max-width: 220px;
font-size: 1.125rem;
font-weight: 300;
letter-spacing: 0;
line-height: 1.56;
}
.stats-card-large .stats-desc {
max-width: 280px;
}
@media (max-width: 991.98px) {
.cintas-numbers-grid {
grid-template-columns: repeat(2, 1fr);
}
.stats-card:nth-child(1) {
grid-column: 1 / 3;
grid-row: auto;
min-height: 280px;
}
.stats-card:nth-child(2),
.stats-card:nth-child(3),
.stats-card:nth-child(4),
.stats-card:nth-child(5),
.stats-card:nth-child(6),
.stats-card:nth-child(7),
.stats-card:nth-child(8) {
grid-column: auto;
grid-row: auto;
}
.stats-card:nth-child(8) {
grid-column: 1 / 3;
}
}
@media (max-width: 575.98px) {
.cintas-numbers-grid {
grid-template-columns: 1fr;
}
.stats-card:nth-child(1),
.stats-card:nth-child(8) {
grid-column: 1;
}
} .stand-for-section {
background: #fff;
padding: 4rem 0 4.5rem;
}
.stand-for-title {
color: var(--cintas-navy);
font-weight: 900;
font-size: 1.45rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.stand-for-text {
margin: 0;
}
.stand-for-video {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
border-radius: .625rem;
box-shadow: 0 5px 20px #2b2e2f33;
}
.stand-for-video img {
width: 100%;
min-height: 340px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.stand-for-video:hover img {
transform: scale(1.03);
}
.stand-for-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
border: 1px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.12);
transition: all 0.3s ease;
pointer-events: none;
}
.stand-for-play-btn i {
color: #fff;
font-size: 2.2rem;
margin-left: 5px;
line-height: 1;
}
.stand-for-video:hover .stand-for-play-btn {
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) scale(1.08);
}
@media (max-width: 991.98px) {
.stand-for-video img {
height: 280px;
}
} .history-timeline-section {
background:
radial-gradient(circle at 15% 20%, rgba(0, 32, 91, 0.04) 0%, transparent 45%),
radial-gradient(circle at 85% 80%, rgba(178, 18, 43, 0.05) 0%, transparent 40%),
var(--cintas-light-gray);
padding: 4.5rem 0 5rem;
position: relative;
overflow: hidden;
}
.history-timeline-section::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(-45deg,
transparent,
transparent 28px,
rgba(0, 32, 91, 0.015) 28px,
rgba(0, 32, 91, 0.015) 29px);
pointer-events: none;
}
.history-timeline-section .container {
position: relative;
z-index: 1;
}
.history-timeline-header {
margin-bottom: 3rem;
}
.history-timeline-header .section-title {
margin-bottom: 0.75rem;
}
.history-timeline-lead {
margin: 0 auto;
}
.history-timeline-desktop {
position: relative;
padding: 0.5rem 0 1rem;
}
.history-timeline-axis {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
}
.history-timeline-line {
display: block;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg,
var(--cintas-navy) 0%,
var(--cintas-blue) 35%,
var(--cintas-red) 50%,
var(--cintas-blue) 65%,
var(--cintas-navy) 100%);
box-shadow: 0 0 18px rgba(0, 32, 91, 0.15);
}
.history-timeline-columns {
display: flex;
gap: 1.25rem;
position: relative;
z-index: 1;
}
.history-timeline-column {
flex: 1;
display: flex;
flex-direction: column;
min-height: 500px;
}
.history-timeline-slot {
flex: 1;
display: flex;
}
.history-timeline-slot-top {
align-items: flex-end;
padding-bottom: 1.75rem;
}
.history-timeline-slot-bottom {
align-items: flex-start;
padding-top: 1.75rem;
}
.history-timeline-marker {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.history-timeline-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 4px solid var(--cintas-red);
box-shadow: 0 0 0 6px rgba(178, 18, 43, 0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.history-timeline-column:hover .history-timeline-dot {
transform: scale(1.2);
box-shadow: 0 0 0 10px rgba(178, 18, 43, 0.18);
}
.history-timeline-year {
font-size: 0.8rem;
font-weight: 900;
letter-spacing: 0.08em;
color: var(--cintas-navy);
}
.history-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0, 32, 91, 0.08);
border: 1px solid rgba(0, 32, 91, 0.06);
transition: transform 0.35s ease, box-shadow 0.35s ease;
width: 100%;
}
.history-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(0, 32, 91, 0.14);
}
.history-card-image {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: #e8ecf2;
}
.history-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.history-card-image-vintage img {
filter: grayscale(100%) sepia(25%);
}
.history-card:hover .history-card-image img {
transform: scale(1.06);
}
.history-card-image-brand {
background: linear-gradient(135deg, var(--cintas-navy) 0%, #003d8f 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.history-card-image-brand img {
object-fit: contain;
max-height: 100%;
transform: none !important;
}
.history-card-body {
padding: 1.15rem 1.1rem 1.25rem;
text-align: center;
}
.history-card-year {
display: inline-block;
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, var(--cintas-navy), var(--cintas-red));
padding: 0.3rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.history-card-body p {
margin: 0;
}
.history-timeline-cta {
margin-top: 3rem;
}
.history-timeline-cta .btn-red {
padding: 0.95rem 2.25rem;
text-transform: uppercase;
letter-spacing: 0.08em;
} .history-timeline-mobile {
position: relative;
padding-left: 2.5rem;
}
.history-timeline-mobile::before {
content: "";
position: absolute;
left: 0.55rem;
top: 0.5rem;
bottom: 0.5rem;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, var(--cintas-navy), var(--cintas-red), var(--cintas-navy));
}
.history-card-mobile {
position: relative;
margin-bottom: 1.75rem;
}
.history-card-mobile:last-child {
margin-bottom: 0;
}
.history-timeline-mobile-marker {
position: absolute;
left: -2.5rem;
top: 1.25rem;
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
background: #fff;
border: 3px solid var(--cintas-red);
box-shadow: 0 0 0 5px rgba(178, 18, 43, 0.12);
display: flex;
align-items: center;
justify-content: center;
}
.history-timeline-mobile-marker span {
position: absolute;
left: 1.6rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.06em;
color: var(--cintas-navy);
white-space: nowrap;
}
@media (max-width: 1199.98px) {
.history-timeline-column {
min-height: 460px;
}
.history-card-body p {
font-size: 0.82rem;
}
} .code-conduct-section {
background: #fff;
}
.code-conduct-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.code-conduct-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 3rem 4rem max(1.5rem, calc((100vw - 1470px) / 2 + 12px));
max-width: 720px;
}
.code-conduct-content .section-title {
margin-bottom: 1.25rem;
}
.code-conduct-text {
margin: 0 0 1.75rem;
line-height: 1.6;
color: #333;
}
.code-conduct-content .btn-contact {
align-self: flex-start;
text-transform: uppercase;
padding: 0.9rem 2rem;
}
.code-conduct-media {
min-height: 420px;
overflow: hidden;
height: 530px;
}
.code-conduct-media img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 991.98px) {
.code-conduct-wrap {
grid-template-columns: 1fr;
min-height: auto;
}
.code-conduct-content {
padding: 3rem 1.5rem;
max-width: none;
}
.code-conduct-media {
min-height: 300px;
}
.code-conduct-media img {
min-height: 300px;
}
}
.background-light-gray {
background-color: #ebedee;
} .apparel-cta-section {
background: #2b2b2b;
padding: 4rem 0 4.5rem;
}
.apparel-cta-wrap {
position: relative;
min-height: 39.375em;
margin: 0;
}
.apparel-cta-media {
position: absolute;
left: 0;
top: 0;
width: 64%;
height: 100%;
border-radius: 8px;
overflow: hidden;
z-index: 1;
}
.apparel-cta-media img {
width: 100%;
height: 100%;
min-height: 400px;
object-fit: cover;
object-position: center top;
display: block;
}
.apparel-cta-panel {
position: absolute;
left: 46%;
right: 0;
top: 50%;
transform: translateY(-50%);
background: var(--cintas-navy);
padding: 3rem 2.75rem;
border-radius: 8px;
z-index: 2;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
max-width: 42.5em;
}
.apparel-cta-title {
color: #fff;
font-size: clamp(1.75rem, 2.2vw, 2rem);
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 1.25rem;
}
.apparel-cta-text {
color: rgba(255, 255, 255, 0.92);
margin: 0 0 1.75rem;
}
.apparel-cta-btn {
display: inline-block;
color: #fff;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1rem 1.5rem;
border: 2px solid #fff;
border-radius: 4px;
background: transparent;
transition: all 0.3s ease;
}
.apparel-cta-btn:hover {
background: #fff;
color: var(--cintas-navy);
}
@media (max-width: 991.98px) {
.apparel-cta-wrap {
min-height: auto;
display: flex;
flex-direction: column;
gap: 0;
}
.apparel-cta-media {
position: relative;
width: 100%;
max-width: none;
}
.apparel-cta-media img {
min-height: 280px;
}
.apparel-cta-panel {
position: relative;
left: auto;
right: auto;
transform: none;
width: 100%;
margin-top: -2rem;
margin-left: 1rem;
margin-right: 1rem;
padding: 2.5rem 2rem;
}
} .work-shirt-service-section {
padding: 4rem 0 4.5rem;
}
.work-shirt-service-heading {
color: var(--cintas-navy);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 3rem;
}
.work-shirt-service-grid {
margin-bottom: 2.5rem;
}
.work-shirt-service-item {
max-width: 22rem;
margin: 0 auto;
}
.work-shirt-service-icon {
width: 5.5rem;
height: 5.5rem;
object-fit: contain;
display: block;
margin: 0 auto 1.5rem;
}
.work-shirt-service-title {
color: var(--cintas-navy);
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 1rem;
text-align: center;
}
.work-shirt-service-text {
margin: 0;
}
.work-shirt-service-cta {
margin-top: 1rem;
}
.work-shirt-service-btn {
display: inline-block;
min-width: 14rem;
padding: 0.95rem 2.5rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.work-shirt-service-or-call {
color: var(--cintas-navy);
font-weight: 900;
font-size: 1.25rem;
text-transform: uppercase;
margin: 1.5rem 0 0.65rem;
}
.work-shirt-service-phone {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--cintas-navy);
font-size: 1.35rem;
font-weight: 700;
transition: color 0.3s ease;
}
.work-shirt-service-phone i {
font-size: 1.1rem;
}
.work-shirt-service-phone:hover {
color: var(--cintas-red);
} .brand-life-section {
background: #fff;
}
.brand-life-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.brand-life-media {
overflow: hidden;
}
.brand-life-media img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
object-position: center;
display: block;
}
.brand-life-content {
background: var(--cintas-navy);
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 4.5rem 4rem 3.75rem;
color: #fff;
}
.brand-life-plus {
color: #00a9e0;
font-size: 1.75rem;
font-weight: 300;
line-height: 1;
margin-bottom: 1.25rem;
}
.brand-life-title {
color: #fff;
font-size: clamp(1.65rem, 2.4vw, 2.75rem);
font-weight: 900;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.2;
margin: 0 0 1.5rem;
}
.brand-life-text {
color: rgba(255, 255, 255, 0.95);
margin: 0 0 2rem;
max-width: 34rem;
}
.brand-life-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #fff;
font-weight: 700;
font-size: 1rem;
text-transform: lowercase;
transition: opacity 0.3s ease;
}
.brand-life-link i {
font-size: 1.1rem;
font-weight: 700;
}
.brand-life-link:hover {
color: #fff;
opacity: 0.85;
}
@media (max-width: 991.98px) {
.brand-life-wrap {
grid-template-columns: 1fr;
min-height: auto;
}
.brand-life-media img {
min-height: 300px;
}
.brand-life-content {
padding: 3rem 2rem;
}
}
.cross {
position: relative;
width: 75px;
height: 75px;
color: #fff;
}
.cross::before,
.cross::after {
content: '';
position: absolute;
background-color: #007bb6;
}
.cross::before {
width: 65%;
height: 10px;
top: 20px;
left: -5;
transform-origin: left;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 10% 100%);
}
.cross::after {
width: 10px;
height: 50px;
top: 0;
left: 20px;
} .featured-resources-section {
padding: 4rem 0 4.5rem;
}
.featured-resources-heading {
color: var(--cintas-navy);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.featured-resources-tabs {
margin-bottom: 2.5rem;
border-bottom: 1px solid #dbdbdb;
}
.featured-resources-tab {
display: inline-block;
color: var(--cintas-navy);
font-size: 1.5rem;
font-weight: 700;
text-transform: uppercase;
padding-bottom: 0.65rem;
border-bottom: 4px solid var(--cintas-navy);
}
.featured-resources-grid {
margin-top: 0.5rem;
}
.video-resource-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(43, 46, 47, 0.12);
height: 100%;
display: flex;
flex-direction: column;
}
.video-resource-thumb {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
}
.video-resource-thumb img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.video-resource-thumb:hover img {
transform: scale(1.03);
}
.video-resource-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border: 1px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
pointer-events: none;
}
.video-resource-play-btn i {
color: #fff;
font-size: 1.9rem;
margin-left: 4px;
line-height: 1;
}
.video-resource-thumb:hover .video-resource-play-btn {
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) scale(1.08);
}
.video-resource-body {
padding: 1.35rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.video-resource-title {
color: var(--cintas-navy);
font-size: 1.25rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.85rem;
}
.video-resource-text {
margin-bottom: 1.25rem;
flex: 1;
}
.video-resource-link {
color: var(--cintas-navy);
align-self: flex-start;
transition: color 0.3s ease;
display: block;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: .5px;
line-height: 1.5;
text-decoration: none;
text-transform: capitalize;
}
.video-resource-link:hover {
color: var(--cintas-red);
} .shop-section {
background: #fff;
padding: 3rem 0 4.5rem;
}
.shop-tabs {
margin-bottom: 2.5rem;
border-bottom: 1px solid #dbdbdb !important;
gap: 0;
}
.shop-tabs .nav-item {
margin: 0;
}
.shop-tabs .nav-link {
color: var(--cintas-navy);
font-size: clamp(1rem, 1.8vw, 1.35rem);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border: none;
border-bottom: 4px solid transparent;
border-radius: 0;
background: transparent;
padding: 0.75rem 1.75rem 0.85rem;
margin-bottom: -1px;
transition: border-color 0.3s ease, color 0.3s ease;
}
.shop-tabs .nav-link:hover {
color: var(--cintas-navy);
border-color: transparent;
isolation: isolate;
}
.shop-tabs .nav-link.active {
color: var(--cintas-navy);
background: transparent;
border-color: transparent transparent var(--cintas-navy);
font-weight: 900;
}
.shop-tab-content {
padding-top: 0.5rem;
}
.shop-product-grid {
margin-top: 0.25rem;
}
.shop-product-card {
text-align: center;
height: 100%; margin: 0 auto;
background: #fff;
border: 1px solid #f5f4f4;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 40px -17px;
}
.shop-product-card:hover {
box-shadow: rgba(0, 0, 0, 0.2) 0px 50px 40px -7px;
}
.shop-product-image-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 280px;
margin-bottom: 1.25rem;
padding: 0 0.5rem;
}
.shop-product-image {
max-width: 100%;
max-height: 270px;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: opacity 0.25s ease;
}
.shop-product-title {
color: var(--cintas-navy);
font-size: 1.6rem;
font-weight: 400;
margin: 0 0 1rem;
padding: 0 0.5rem;
}
.shop-product-colors {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem 0.65rem;
padding: 0 0.25rem;
}
.shop-color-label {
line-height: 1.4;
font-size: .8rem;
font-weight: 700;
color: #54585a;
margin: 0 1rem 0 0;
}
.shop-color-swatches {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.shop-color-swatch {
width: 22px;
height: 22px;
padding: 0;
border: 1px solid #d1d5db;
border-radius: 50%;
background-color: var(--swatch-color, #ccc);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
.shop-color-swatch:hover {
transform: scale(1.1);
border-color: var(--cintas-navy);
}
.shop-color-swatch.active {
border-color: var(--cintas-navy);
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cintas-navy);
}
@media (max-width: 767.98px) {
.shop-tabs .nav-link {
padding: 0.65rem 1rem 0.75rem;
font-size: 0.85rem;
}
.shop-product-image-wrap {
min-height: 220px;
}
.shop-product-image {
max-height: 210px;
}
.shop-product-colors {
flex-direction: column;
gap: 0.5rem;
}
}
a.see-more-blogs {
font-size: 1.25rem;
text-align: right;
color: var(--cintas-navy);
font-weight: 600;
text-decoration: none;
text-transform: capitalize;
}
a.see-more-blogs:hover {
color: var(--cintas-red);
}
.resources-section-header {
margin-bottom: 2rem;
}
.video-resource-link:hover {
color: var(--cintas-red);
} .explore-topic-section {
background: #fff;
padding: 4rem 0 4.5rem;
}
.explore-topic-heading {
color: var(--cintas-navy);
font-size: clamp(1.65rem, 2.5vw, 2.15rem);
font-weight: 900;
letter-spacing: 0.02em;
margin-bottom: 2rem;
}
.explore-topic-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem 1rem;
border-bottom: 1px solid #dbdbdb;
padding-bottom: 0;
margin-bottom: 2.5rem;
}
.explore-topic-tab {
background: none;
border: none;
color: var(--cintas-navy);
font-size: clamp(0.72rem, 1.1vw, 0.95rem);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 1.5rem 0;
cursor: pointer;
transition: opacity 0.3s ease;
text-align: center;
flex: 1 1 auto;
min-width: 8.5rem;
}
.explore-topic-tab:hover {
opacity: 1;
}
.explore-topic-tab.active {
opacity: 1;
box-shadow: inset 0 -3px 0 var(--cintas-navy);
}
.explore-topic-tab:not(.active) {
opacity: 0.85;
}
.explore-topic-panel {
display: none;
}
.explore-topic-panel.active {
display: block;
}
.explore-topic-swiper-wrap {
position: relative;
padding: 0 2.75rem 3rem;
}
.explore-topic-swiper {
overflow: hidden;
}
.explore-topic-slide {
min-height: 320px;
}
.explore-topic-label {
display: block;
color: var(--cintas-red);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 0.85rem;
}
.explore-topic-title {
color: var(--cintas-navy);
font-size: clamp(1.75rem, 2.8vw, 2.35rem);
font-weight: 900;
line-height: 1.15;
margin-bottom: 1.25rem;
}
.explore-topic-text {
margin-bottom: 1.75rem;
max-width: 34rem;
}
.explore-topic-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.explore-topic-btn {
background: var(--cintas-navy);
color: #fff;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1rem 1.5rem;
border: none;
border-radius: 6px;
transition: all 0.3s ease;
text-decoration: none;
}
.explore-topic-btn:hover {
background: #001845;
color: #fff;
transform: translateY(-1px);
}
.explore-topic-video {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
width: 100%;
aspect-ratio: 16 / 10;
}
.explore-topic-video img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.explore-topic-video:hover img {
transform: scale(1.03);
}
.explore-topic-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
border: 1px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
pointer-events: none;
transition: all 0.3s ease;
}
.explore-topic-play-btn i {
color: #fff;
font-size: 2rem;
margin-left: 4px;
line-height: 1;
}
.explore-topic-video:hover .explore-topic-play-btn {
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) scale(1.08);
}
.explore-topic-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.25rem;
height: 2.25rem;
border: none;
background: transparent;
color: #6b7280;
font-size: 1.75rem;
line-height: 1;
padding: 0;
z-index: 2;
cursor: pointer;
transition: color 0.3s ease;
}
.explore-topic-arrow:hover {
color: var(--cintas-navy);
}
.explore-topic-arrow-prev {
left: 0;
}
.explore-topic-arrow-next {
right: 0;
}
.explore-topic-pagination {
position: relative;
margin-top: 2rem;
bottom: auto !important;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
left: 0 !important;
transform: none !important;
}
.explore-topic-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #fff;
border: 2px solid var(--cintas-navy);
opacity: 1;
margin: 0 0.35rem !important;
transition: all 0.3s ease;
}
.explore-topic-pagination .swiper-pagination-bullet-active {
background: var(--cintas-navy);
border-color: var(--cintas-navy);
}
@media (max-width: 991.98px) {
.explore-topic-nav {
justify-content: center;
}
.explore-topic-tab {
flex: 1 1 calc(50% - 0.5rem);
min-width: 0;
}
.explore-topic-swiper-wrap {
padding: 0 0 2.5rem;
}
.explore-topic-arrow {
display: none;
}
.explore-topic-content {
text-align: center;
}
.explore-topic-text {
margin-left: auto;
margin-right: auto;
}
.explore-topic-actions {
justify-content: center;
}
}
@media (max-width: 767px){
.utility-bar a span {
display: none;
}
}
@media (max-width: 991px){
.mobile-hide {
display: none!important;
}}