.logos-section {
background-color: var(--light-color);
padding: 80px 0;
position: relative;
overflow: hidden;
z-index: 1;
} .logos-section::before,
.logos-section::after {
content: "";
position: absolute;
border-radius: 50%;
z-index: -1;
}
.logos-section::before {
width: 300px;
height: 300px;
background: var(--primary-color);
opacity: 0.03;
top: -150px;
right: -100px;
}
.logos-section::after {
width: 200px;
height: 200px;
background: var(--secondary-color);
opacity: 0.03;
bottom: -100px;
left: -50px;
} .logos-container {
margin-top: 50px;
position: relative;
z-index: 2;
} .logos-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
padding: 0 15px;
}
.logos-row:last-child {
margin-bottom: 0;
} .logo-item {
width: 180px;
height: 120px;
background-color: white;
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-shadow: 0 5px 15px var(--shadow-color);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
overflow: hidden;
border: 1px solid var(--border-color);
will-change: transform, box-shadow;
backface-visibility: hidden;
transform: translateZ(0);
} .logo-item::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: var(--gradient-primary);
bottom: 0;
left: 0;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
} .logo-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.logo-item:hover::before {
transform: scaleX(1);
} .logo-item img {
max-width: 100%;
max-height: 80px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: translateZ(0);
}
.logo-item:hover img {
filter: grayscale(0%);
opacity: 1;
} .logo-item {
animation: fadeInUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
opacity: 0;
} .logos-row:nth-child(1) .logo-item:nth-child(1) {
animation-delay: 0.1s;
}
.logos-row:nth-child(1) .logo-item:nth-child(2) {
animation-delay: 0.15s;
}
.logos-row:nth-child(1) .logo-item:nth-child(3) {
animation-delay: 0.2s;
}
.logos-row:nth-child(1) .logo-item:nth-child(4) {
animation-delay: 0.25s;
}
.logos-row:nth-child(1) .logo-item:nth-child(5) {
animation-delay: 0.3s;
}
.logos-row:nth-child(2) .logo-item:nth-child(1) {
animation-delay: 0.35s;
}
.logos-row:nth-child(2) .logo-item:nth-child(2) {
animation-delay: 0.4s;
}
.logos-row:nth-child(2) .logo-item:nth-child(3) {
animation-delay: 0.45s;
}
.logos-row:nth-child(2) .logo-item:nth-child(4) {
animation-delay: 0.5s;
}
.logos-row:nth-child(2) .logo-item:nth-child(5) {
animation-delay: 0.55s;
}
.logos-row:nth-child(3) .logo-item:nth-child(1) {
animation-delay: 0.6s;
}
.logos-row:nth-child(3) .logo-item:nth-child(2) {
animation-delay: 0.65s;
}
.logos-row:nth-child(3) .logo-item:nth-child(3) {
animation-delay: 0.7s;
}
.logos-row:nth-child(3) .logo-item:nth-child(4) {
animation-delay: 0.75s;
}
.logos-row:nth-child(3) .logo-item:nth-child(5) {
animation-delay: 0.8s;
}
.logos-row:nth-child(4) .logo-item:nth-child(1) {
animation-delay: 0.85s;
}
.logos-row:nth-child(4) .logo-item:nth-child(2) {
animation-delay: 0.9s;
}
.logos-row:nth-child(4) .logo-item:nth-child(3) {
animation-delay: 0.95s;
}
.logos-row:nth-child(4) .logo-item:nth-child(4) {
animation-delay: 1s;
}
.logos-row:nth-child(4) .logo-item:nth-child(5) {
animation-delay: 1.05s;
} @media (min-width: 1400px) {
.logos-row {
gap: 40px;
}
.logo-item {
width: 200px;
height: 130px;
}
.logo-item img {
max-height: 90px;
}
} @media (max-width: 991.98px) {
.logos-section {
padding: 60px 0;
}
.logos-row {
gap: 25px;
}
.logo-item {
width: 160px;
height: 110px;
padding: 15px;
}
.logo-item img {
max-height: 70px;
}
} @media (max-width: 767.98px) {
.logos-section {
padding: 50px 0;
}
.logos-row {
gap: 20px;
margin-bottom: 30px;
}
.logo-item {
width: 140px;
height: 100px;
padding: 12px;
}
.logo-item img {
max-height: 60px;
}
.section-title {
font-size: 2rem;
}
} @media (max-width: 575.98px) {
.logos-section {
padding: 40px 0;
}
.logos-row {
gap: 15px;
margin-bottom: 20px;
}
.logo-item {
width: 120px;
height: 90px;
padding: 10px;
}
.logo-item img {
max-height: 50px;
}
.logo-item:hover {
transform: translateY(-5px);
}
.section-title {
font-size: 1.75rem;
}
.section-subtitle {
font-size: 0.95rem;
}
} @media (max-width: 400px) {
.logos-row {
gap: 10px;
}
.logo-item {
width: 100px;
height: 80px;
padding: 8px;
}
.logo-item img {
max-height: 45px;
}
} @media (prefers-color-scheme: dark) {
.logo-item {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
.logo-item img {
filter: grayscale(100%) brightness(1.2);
}
} @media (prefers-reduced-motion: reduce) {
.logo-item {
animation: none !important;
opacity: 1 !important;
transition: none !important;
}
.logo-item::before {
transition: none !important;
}
.logo-item img {
transition: none !important;
}
.logo-item:hover {
transform: none !important;
}
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}