/* ========================================
PROJECTS HERO
========================================= */

.projects-hero {


max-width: 850px;

margin: 20px auto 70px;

text-align: center;


}

.projects-hero h1 {


margin: 0 0 20px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 34px;
line-height: 1.25;


}

.projects-hero p {


max-width: 720px;

margin: 0 auto;

color: #627D98;

font-size: 17px;

line-height: 1.7;


}

/* ========================================
PROJECTS SECTION
========================================= */

.projects-section {


margin-bottom: 80px;


}

.projects-heading {


max-width: 760px;

margin: 0 auto 38px;

text-align: center;


}

.projects-heading h2 {


margin: 0 0 14px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 30px;

line-height: 1.3;


}

.projects-heading p {


margin: 0;

color: #627D98;

font-size: 16px;

line-height: 1.6;


}

/* ========================================
PROJECT GRID
========================================= */

.projects-grid {


display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 22px;


}

/* ========================================
PROJECT CARD
========================================= */

.project-card {


overflow: hidden;

display: flex;

flex-direction: column;

background: #ffffff;

border: 1px solid #E6EDF3;

border-radius: 14px;

box-shadow: 0 4px 18px rgba(16, 42, 67, 0.06);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;


}

.project-card:hover {


transform: translateY(-5px);

border-color: #B8DDF5;

box-shadow: 0 10px 30px rgba(16, 42, 67, 0.11);


}

/* ========================================
PROJECT IMAGE
========================================= */

.project-image {


position: relative;

height: 300px;

overflow: hidden;

background: #F4F8FB;


}

.project-image img {


display: block;

width: 100%;
height: 100%;

object-fit: cover;

transition: transform 0.4s ease;


}

.project-card:hover .project-image img {


transform: scale(1.04);


}

/* ========================================
PROJECT NUMBER
========================================= */

.project-number {


position: absolute;

top: 18px;
left: 18px;

display: flex;

align-items: center;
justify-content: center;

width: 42px;
height: 42px;

background: #102A43;

border-radius: 8px;

color: #ffffff;

font-family: 'Manrope', sans-serif;

font-size: 12px;
font-weight: 700;


}

/* ========================================
PROJECT CONTENT
========================================= */

.project-content {


display: flex;

flex-direction: column;

flex: 1;

padding: 27px 28px 30px;


}

.project-content h3 {


margin: 0 0 13px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 20px;

line-height: 1.35;


}

.project-content p {


margin: 0 0 22px;

color: #486581;

font-size: 15px;

line-height: 1.6;


}

/* ========================================
PROJECT LINK
========================================= */

.project-link {


display: inline-flex;

align-items: center;

gap: 8px;

width: fit-content;

margin-top: auto;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 14px;
font-weight: 700;

text-decoration: none;

transition: color 0.2s ease;


}

.project-link span {


color: #3fa9f5;

font-size: 18px;

transition: transform 0.2s ease;


}

.project-link:hover {


color: #3fa9f5;


}

.project-link:hover span {


transform: translateX(4px);


}

/* ========================================
EMPTY STATE
========================================= */

.projects-empty {


grid-column: 1 / -1;

padding: 60px 30px;

text-align: center;

background: #F4F8FB;

border-radius: 16px;


}

.projects-empty h3 {


margin: 0 0 10px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 21px;


}

.projects-empty p {


margin: 0;

color: #627D98;

font-size: 15px;


}

/* ========================================
CTA
========================================= */

.projects-cta {


max-width: 900px;

margin: 0 auto 60px;

padding: 55px 40px;

text-align: center;

background:
    linear-gradient(
        135deg,
        #F8FBFE 0%,
        #FFFFFF 100%
    );

border: 1px solid #C9E5F7;

border-radius: 16px;


}

.projects-cta h2 {


margin: 0 0 15px;

color: #102A43;

font-family: 'Manrope', sans-serif;

font-size: 28px;

line-height: 1.3;


}

.projects-cta p {


max-width: 680px;

margin: 0 auto 28px;

color: #627D98;

font-size: 16px;

line-height: 1.7;


}

/* ========================================
CTA BUTTON
========================================= */

.projects-cta-button {


display: inline-flex;

align-items: center;
justify-content: center;

gap: 9px;

padding: 13px 24px;

background: #102A43;

border: 1px solid #102A43;

border-radius: 8px;

color: #ffffff;

font-family: 'Manrope', sans-serif;

font-size: 14px;
font-weight: 700;

text-decoration: none;

transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;


}

.projects-cta-button span {


font-size: 18px;

transition: transform 0.2s ease;


}

.projects-cta-button:hover {


background: #163B5C;

border-color: #163B5C;

transform: translateY(-2px);


}

.projects-cta-button:hover span {


transform: translateX(4px);


}

/* ========================================
TABLET
========================================= */

@media (max-width: 900px) {


.projects-grid {

    grid-template-columns: 1fr;

}


}

/* ========================================
MOBILE
========================================= */

@media (max-width: 768px) {


.projects-hero {

    margin-bottom: 50px;

}

.projects-hero h1 {

    font-size: 25px;

}

.projects-hero p {

    font-size: 15px;

}

.projects-section {

    margin-bottom: 55px;

}

.projects-heading h2 {

    font-size: 25px;

}

.projects-heading p {

    font-size: 15px;

}

.project-image {

    height: 230px;

}

.project-content {

    padding: 24px 22px 27px;

}

.project-content h3 {

    font-size: 19px;

}

.project-content p {

    font-size: 14px;

}

.projects-cta {

    padding: 40px 22px;

    margin-bottom: 40px;

}

.projects-cta h2 {

    font-size: 24px;

}

.projects-cta p {

    font-size: 14px;

}


}

@media (max-width: 480px) {


.project-image {

    height: 210px;

}

.project-number {

    top: 14px;
    left: 14px;

    width: 38px;
    height: 38px;

}


}