/**
* LOGO SLIDER - Slick Carousel Styles
* File: themes/custom/elixir2/css/logo-slider.css
*/
/* ====================================================================
SLICK CAROUSEL CDN - Add to or libraries.yml
==================================================================== */
/*
*/
/* ====================================================================
LOGO SLIDER SECTION
==================================================================== */
/* Hide all items before Slick loads */
.logo-slider:not(.slick-initialized) .logo-item {
display: none !important;
}
/* Show only first logo while loading */
.logo-slider:not(.slick-initialized) .logo-item:first-child {
display: flex !important;
}
.logo-slider-section {
padding: 3rem 2rem;
overflow: hidden;
}
.logo-slider-heading {
text-align: center;
font-size: 2rem;
margin: 0 0 2rem 0;
}
.logo-slider {
margin: 0 2rem;
}
/* ====================================================================
INDIVIDUAL LOGO ITEM
==================================================================== */
.logo-item {
padding: 1.5rem 3rem; /* Increased from 1rem - more space between logos */
display: flex !important;
align-items: center;
justify-content: center;
outline: none;
}
/* Logo Link Wrapper */
.logo-link {
display: block;
text-decoration: none;
transition: all 0.3s ease;
}
.logo-link:hover {
text-decoration: none;
}
.logo-item img {
max-width: 100%;
max-height: 80px;
width: auto;
height: auto;
display: block;
margin: 0 auto;
transition: all 0.3s ease;
}
/* Hover effects on link */
.logo-link:hover img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
/* Focus state for accessibility */
.logo-link:focus {
outline: 2px solid #f47d20;
outline-offset: 4px;
border-radius: 4px;
}
.logo-link:focus img {
filter: grayscale(0%);
opacity: 1;
}
/* ====================================================================
SLICK NAVIGATION ARROWS
==================================================================== */
.logo-slider .slick-prev,
.logo-slider .slick-next {
width: 50px;
height: 50px;
z-index: 10;
}
.logo-slider .slick-prev {
left: -60px;
}
.logo-slider .slick-next {
right: -60px;
}
.logo-slider .slick-prev:before,
.logo-slider .slick-next:before {
font-size: 50px;
color: #056482;
opacity: 0.75;
}
.logo-slider .slick-prev:hover:before,
.logo-slider .slick-next:hover:before {
opacity: 1;
}
/* ====================================================================
SLICK DOTS
==================================================================== */
.logo-slider .slick-dots {
bottom: -45px;
}
.logo-slider .slick-dots li button:before {
font-size: 12px;
color: #1e3a5f;
}
.logo-slider .slick-dots li.slick-active button:before {
color: #f47d20;
}
/* ====================================================================
FIND MORE BUTTON
==================================================================== */
.logo-slider-button-wrapper {
text-align: center;
margin-top: 4rem;
margin-bottom: 0rem;
}
.logo-slider-button {
display: inline-block;
background-color: #023452;
color: #ffffff;
font-weight: 600;
padding: 0.5rem 1.5rem;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
.logo-slider-button:hover {
background-color: #f47d20;
color: #ffffff;
}
.logo-slider-button:focus {
outline: 3px solid #f47d20;
outline-offset: 3px;
}
/* ====================================================================
RESPONSIVE DESIGN
==================================================================== */
@media (max-width: 1024px) {
.logo-slider .slick-prev {
left: -20px;
}
.logo-slider .slick-next {
right: -20px;
}
.logo-item{
padding: 2rem;
}
}
/* Tablet and below */
@media (max-width: 991px) {
.logo-slider .slick-prev {
left: -40px;
}
.logo-slider .slick-next {
right: -40px;
}
}
/* Mobile */
@media (max-width: 767px) {
.logo-slider{
margin: 0 1rem;
}
.logo-slider-section {
padding: 3rem 0rem;
}
.logo-slider-heading {
margin-bottom: 2rem;
}
.logo-item img {
max-height: 60px;
}
.logo-slider .slick-prev {
left: 0;
}
.logo-slider .slick-next {
right: 0;
}
.logo-slider-button-wrapper {
margin-top: 3rem;
}
.logo-slider-button {
font-size: 1.1rem;
padding: 0.875rem 2.5rem;
}
}