.projects-component {
width: 100%;
box-sizing: border-box;
}
.projects-component .projects-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
flex-direction: column;
}
.projects-component .project-card {
position: relative;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 16 / 11;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
cursor: pointer;
flex: 1 1 100%;
}
.projects-component .card-image {
width: 100%;
height: 100%;
}
.projects-component .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.25);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.projects-component .project-card:hover .card-image img {
transform: scale(1);
}
.projects-component .card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(47, 145, 99, 0) 44.12%,
#2f9163 100%
);
padding: 24px 24px 40px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
}
.projects-component .card-power {
font-weight: 600;
font-size: 28px;
line-height: 120%;
color: #fff;
margin-bottom: 16px;
}
.projects-component .card-name {
font-weight: 600;
font-size: 26px;
line-height: 120%;
color: #fff;
text-align: start;
margin-bottom: 16px;
}
.projects-component .card-name span:before {
display: none;
}
.projects-component .card-location {
display: flex;
align-items: center;
font-weight: 400;
font-size: 18px;
line-height: 150%;
color: #fff;
gap: 6px;
}
.projects-component .icon-geo {
flex-shrink: 0;
}
.projects-component .btn-container {
text-align: center;
}
@media (min-width: 768px) {
.projects-component .projects-grid {
flex-direction: row;
}
.projects-component .project-card {
aspect-ratio: 16 / 10;
flex: 1 1 calc(50% - 12px);
}
.projects-component .card-power {
font-size: 20px;
}
.projects-component .card-name {
font-size: 24px;
}
}
@media (min-width: 993px) {
.projects-component .card-power {
font-size: 28px;
}
.projects-component .card-name {
font-size: 28px;
}
.projects-component .project-card {
flex: 1 1 calc(50% - 12px);
}
}
@media (min-width: 1440px) {
.projects-component .projects-grid .project-card:nth-child(4n + 1) {
flex: 1 1 calc(57% - 12px);
}
.projects-component .projects-grid .project-card:nth-child(4n + 2) {
flex: 1 1 calc(43% - 12px);
}
.projects-component .projects-grid .project-card:nth-child(4n + 3) {
flex: 1 1 calc(43% - 12px);
}
.projects-component .projects-grid .project-card:nth-child(4n + 4) {
flex: 1 1 calc(57% - 12px);
}
}
.projects-component .project-card {
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
z-index 0s linear 0s,
box-shadow 0.5s ease;
z-index: 1;
}
.projects-component .card-close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
border: none;
color: #fff;
opacity: 0;
pointer-events: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 15;
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.projects-component .card-close-btn:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
.projects-component .card-close-btn svg {
width: 20px;
height: 20px;
}
.projects-component .project-card.is-expanded {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
width: 64vw;
max-width: 1100px;
height: auto;
aspect-ratio: 16 / 11;
z-index: 9999;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
cursor: default;
transition:
top 0s,
left 0s,
position 0s,
width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s ease;
}
@media (min-width: 768px) {
.projects-component .project-card.is-expanded {
width: 72vw;
}
}
@media (min-width: 992px) {
.projects-component .project-card.is-expanded {
width: 64vw;
}
}
@media (min-width: 1920px) {
.projects-component .project-card.is-expanded {
width: 82vw;
}
}
.projects-component .project-card.is-expanded .card-image img {
transform: scale(1);
}
.projects-component .project-card.is-expanded .card-close-btn {
opacity: 1;
pointer-events: auto;
top: 8px;
right: 8px;
}
.projects-grid:has(.is-expanded)::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 9998;
animation: fadeInBg 0.4s ease forwards;
}
@keyframes fadeInBg {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.projects-grid:has(.is-expanded) .project-card:not(.is-expanded) {
pointer-events: none;
}
@media (max-width: 767px) {
.projects-component .project-card.is-expanded {
width: 92vw;
aspect-ratio: 16 / 12;
}
}:root {
--text-muted: #727382;
--star-active: #a8b5dd;
--star-inactive: #a8b5dd;
--grad-1: linear-gradient(135deg, #0d1336 0%, #51587b 45%, #717b9f 100%);
--grad-2: linear-gradient(135deg, #717b9f 0%, #99add7 45%, #87b0c3 100%);
--grad-3: linear-gradient(135deg, #87b0c3 0%, #76b3b1 45%, #38b888 100%);
}
.text-muted {
color: var(--text-muted) !important;
font-weight: 400;
font-size: 18px;
line-height: 150%;
}
.text-content {
font-weight: 500;
font-size: 18px;
line-height: 150%;
color: #4c4c57;
}
.list-item {
display: inline-flex !important;
flex-direction: column;
gap: 5px;
}
@media (min-width: 992px) {
.wrapper-block {
position: relative;
}
.disclaimer-wrapper {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
.main-title {
position: absolute;
text-align: start;
}
.partner-card-col.partner-card-1 {
margin-top: 252px;
}
.partner-card-col.partner-card-2 {
margin-top: 150px;
}
.partner-card-col.partner-card-3 {
margin-top: 0;
}
}
.partner-card .text-volume {
line-height: 1.5;
margin-bottom: 1rem;
}
@media (min-width: 992px) {
.partner-card {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
}
.title-content {
font-weight: 600;
font-size: 22px;
line-height: 120%;
}
.benefits ul li {
display: flex;
align-items: center;
}
.check-icon {
display: flex;
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 0;
}
.check-icon svg {
width: 100%;
height: 100%;
}
@media (max-width: 767.98px), (min-width: 992px) {
.benefits ul {
display: inline-block;
text-align: left;
}
}
.level-badge {
width: 250px;
height: 90px;
border-radius: 50px;
background: #fff;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0 !important;
z-index: 1;
border: none;
}
.level-badge::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 60px;
padding: 10px;
background: var(--grad-1);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
pointer-events: none;
}
.gradient-border-1::before {
background: var(--grad-1);
}
.gradient-border-2::before {
background: var(--grad-2);
}
.gradient-border-3::before {
background: var(--grad-3);
}
.level-num {
font-weight: 600;
font-size: 36px;
line-height: 120%;
}
.level-label {
font-weight: 400;
font-size: 18px;
line-height: 150%;
}
.stars {
font-size: 1.8rem;
display: flex;
gap: 4px;
}
.stars i.bi-star {
color: var(--star-inactive);
}
.stars i.bi-star-fill.active {
color: var(--star-active);
}
.disclaimer-box {
border: 1px solid #abdfc7 !important;
border-radius: 4px;
padding: 8px 16px;
box-shadow: 0 0 2px 0 rgba(168, 181, 221, 0.7);
background: #f5fbf8;
}
.disclamer-text {
font-weight: 700;
font-size: 16px;
line-height: 150%;
}