@import url(_default-banner.css?v15100);
@import url(_cta-module.css?v15100);
@import url(_technologies-section.css?v15100);
@import url("_clients-module.css");
@import url("_home-clients-module.css");

.default-banner-section .hero-badges {max-width: 750px;}
.default-banner-section .default-banner-main .default-banner-text p {max-width: 90%;}


/* ── PROJECTS SECTION ── */
.projects-section {padding: 80px 0; clear: both; width: 100%;}


/* Project Cards Grid */
.projects-grid {display: flex; flex-wrap: wrap; gap: 24px; /*margin-bottom: 40px;*/}

.project-card {background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; transition: box-shadow 0.25s, transform 0.25s; width: calc(33.333% - 16px);}
.project-card:hover {box-shadow: 0 8px 28px rgba(12, 35, 66, 0.10); transform: translateY(-3px); border-color: transparent;}

.project-card-top {display: flex; align-items: center; gap: 16px;}

.project-icon {width: 60px; height: 60px; min-width: 60px; background: var(--blue-10); border-radius: 12px; display: flex; align-items: center; justify-content: center;}
.project-icon figure {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.project-icon figure img {width: 32px; height: 32px; object-fit: contain; filter: invert(10%) sepia(98%) saturate(3734%) hue-rotate(216deg) brightness(75%) contrast(118%);}

.project-meta {flex: 1; min-width: 0;}
.project-title {font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 4px; font-family: var(--font-head); line-height: 1.3;}

.project-category {font-size: 13px; font-weight: 600; color: var(--blue-sky);}

.project-card > p {font-size: 14px; color: var(--muted); line-height:22px; margin: 0;}

.project-tech {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px;}
.tech-label {font-size: 14px; color: var(--global); font-weight: 600; white-space: nowrap;}
.tech-tags {display: flex; flex-wrap: wrap; gap: 6px;}
.tech-tag {font-size: 12px; color: var(--navy); border: 1px solid var(--blue-pale); border-radius: 100px; padding: 4px 12px; background: var(--blue-20); font-weight: 500; line-height: 1.4;}

.client-logos-section {padding-top: 0;}



/* ── RESPONSIVE ── */
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .projects-section {padding: 70px 0;}
  .project-card {width: calc(50% - 12px);}
}

@media screen and (max-width: 767px) and (min-width: 200px) {
  .projects-section {padding: 60px 0;}
  .projects-grid {gap: 16px;}
  .project-card {width: 100%;}
}