:root {
--brand: #88c733;
}
.page-banner h1,
.page-banner h2 {
color: #fff;
font-size: 55px !important;
padding: 0 8%;
}
.banner-title {
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.page-banner {
min-height: 100vh;
height: clamp(300px, 50vh, 460px);
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
margin-top: 85px;
}
.page-banner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.7) 100%);
}
.page-banner .container {
position: relative;
z-index: 2;
}
.banner-subtitle {
font-weight: 500;
max-width: 800px;
color: #fff;
opacity: 1;
letter-spacing: 0.5px;
}
.partners-lead {
font-size: 1.1rem;
line-height: 1.8;
}
.partners-logo-section {
background: #d9d9d9;
}
.logos-description {
max-width: 760px;
margin-right: auto;
margin-left: auto;
font-size: 1.05rem;
line-height: 1.7;
}
.partner-logo-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.partner-logo-card {
min-height: 122px;
background: #fff;
border: 1px solid #c8c8c8;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.partner-logo-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
border-color: var(--brand);
}
.partner-logo-card img {
display: block;
max-width: 100%;
max-height: 82px;
object-fit: contain;
}
.partner-logo-card span {
color: #224272;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
}
.partner-card {
background: #fff;
border: 1px solid #eaeaea;
border-radius: 12px;
padding: 36px 28px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.partner-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
border-color: var(--brand);
}
.partner-icon {
width: 72px;
height: 72px;
margin: 0 auto 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f4f8ef;
color: #224272;
font-size: 2rem;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.partner-card:hover .partner-icon {
background: var(--brand);
color: #fff;
transform: scale(1.08);
}
.partner-card h3 {
color: #000;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 14px;
}
.partner-card p,
.partners-content .page-content {
color: #6c757d;
font-size: 1.05rem;
line-height: 1.8;
}
@media (min-width: 768px) and (max-width: 1024px) {
.page-banner {
height: 460px;
min-height: 460px !important;
padding: 0 30px !important;
}
.page-banner h1 {
max-width: 560px;
padding: 0 !important;
font-size: 40px !important;
line-height: 1.3;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.page-banner {
margin-top: 70px !important;
}
}
@media (max-width: 767.98px) {
.page-banner {
height: 300px;
min-height: 300px !important;
margin-top: 70px !important;
padding: 0 15px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.page-banner {
min-height: 500px;
}
}
@media (max-width: 991.98px) {
.page-banner {
min-height: 460px;
padding-top: 130px;
padding-bottom: 80px;
}
.page-banner h1 {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.page-banner h1 {
font-size: 32px !important;
}
.banner-subtitle {
font-size: 1rem;
line-height: 1.5;
}
.partners-intro h2,
.partners-intro .section-kicker {
text-align: center;
}
.partners-lead {
text-align: justify;
font-size: 0.95rem;
}
.partner-card {
padding: 26px 20px;
}
.partner-logo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.partner-logo-card {
min-height: 92px;
padding: 14px;
}
.partner-logo-card span {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.page-banner h1 {
font-size: 32px !important;
}
.partner-logo-grid {
grid-template-columns: 1fr;
}
}