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

.hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    margin-top: 0;
    margin-bottom: 55px;
}

.hero-img {
    display: block;

    width: 100%;
    height: 420px;

    object-fit: cover;
    object-position: center;

    border-radius: 0;
}

/* ========================================
COMMON
========================================= */

.section-label {
display: inline-block;


margin-bottom: 10px;

color: #3fa9f5;

font-family: 'Manrope', sans-serif;
font-size: 12px;
font-weight: 700;

letter-spacing: 1.8px;
text-transform: uppercase;


}

/* ========================================
INTRO
========================================= */

.intro {
max-width: 850px;


margin: 0 auto 75px;

text-align: center;


}

.intro h1 {
margin: 0 0 22px;


color: #102A43;

font-family: 'Manrope', sans-serif;
font-size: 34px;
line-height: 1.25;


}

.intro p {
max-width: 760px;


margin: 0 auto 12px;

color: #486581;

font-size: 17px;
line-height: 1.7;


}

/* ========================================
SECTION HEADING
========================================= */

.section-heading {
max-width: 760px;


margin: 0 auto 38px;

text-align: center;


}

.section-heading h2 {
margin: 0 0 14px;


color: #102A43;

font-family: 'Manrope', sans-serif;
font-size: 30px;
line-height: 1.3;


}

.section-heading p {
margin: 0;


color: #627D98;

font-size: 16px;
line-height: 1.6;


}

/* ========================================
SERVICES
========================================= */

.services {
margin-bottom: 80px;
}

.services-grid {
display: grid;


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

gap: 22px;


}

/* ========================================
SERVICE CARD
========================================= */

.service-card {
position: relative;


display: flex;
gap: 24px;

padding: 30px;

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;


}

.service-card:hover {
transform: translateY(-5px);


border-color: #B8DDF5;

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


}

/* ========================================
FEATURED CARD
========================================= */

.service-card-featured {
background:
linear-gradient(
135deg,
#F8FBFE 0%,
#FFFFFF 100%
);


border-color: #C9E5F7;


}

/* ========================================
SERVICE NUMBER
========================================= */

.service-number {
flex: 0 0 auto;


width: 44px;
height: 44px;

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

border-radius: 8px;

background: #102A43;

color: #ffffff;

font-family: 'Manrope', sans-serif;
font-size: 14px;
font-weight: 700;


}

/* ========================================
SERVICE CONTENT
========================================= */

.service-content {
flex: 1;
}

.service-content h3 {
margin: 0 0 13px;


color: #102A43;

font-family: 'Manrope', sans-serif;
font-size: 20px;
line-height: 1.35;


}

.service-content p {
margin: 0 0 11px;


color: #486581;

font-size: 15px;
line-height: 1.6;


}

/* ========================================
SERVICE LIST
========================================= */

.service-content ul {
margin: 18px 0 0;
padding: 0;


list-style: none;


}

.service-content li {
position: relative;


margin-bottom: 8px;
padding-left: 18px;

color: #334E68;

font-size: 14px;
line-height: 1.5;


}

.service-content li::before {
content: "";


position: absolute;

left: 0;
top: 8px;

width: 6px;
height: 6px;

border-radius: 50%;

background: #3fa9f5;


}

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

.projects {
    margin-bottom: 80px;
}

.projects-list {
display: flex;
flex-direction: column;
gap: 22px;
}

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

.project-card {
display: grid;
grid-template-columns: 42% 1fr;

overflow: hidden;

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(-4px);

border-color: #B8DDF5;

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


}

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

.project-image {


min-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 CONTENT
========================================= */

.project-content {


display: flex;
flex-direction: column;

justify-content: center;

padding: 38px 40px;


}

.project-number {


display: inline-block;

margin-bottom: 12px;

color: #3fa9f5;

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

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

letter-spacing: 1.5px;


}

.project-content h3 {


margin: 0 0 15px;

color: #102A43;

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

font-size: 22px;

line-height: 1.35;


}

.project-content p {


max-width: 600px;

margin: 0 0 22px;

color: #486581;

font-size: 15px;

line-height: 1.65;


}

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

.project-link {


display: inline-flex;

align-items: center;

gap: 8px;

width: fit-content;

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);
}

/* ========================================
PROJECTS MORE
========================================= */

.projects-more {


display: flex;

justify-content: center;

margin-top: 32px;


}

.projects-more-button {


display: inline-flex;

align-items: center;

gap: 10px;

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-more-button span {


font-size: 18px;

transition: transform 0.2s ease;


}

.projects-more-button:hover {


background: #163B5C;

border-color: #163B5C;

transform: translateY(-2px);


}

.projects-more-button:hover span {


transform: translateX(4px);


}

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

@media (max-width: 768px) {


.projects {

    margin-bottom: 55px;

}

.project-card {

    grid-template-columns: 1fr;

}

.project-image {

    height: 230px;
    min-height: 0;

}

.project-content {

    padding: 25px 22px 28px;

}

.project-content h3 {

    font-size: 19px;

}

.project-content p {

    font-size: 14px;

}
}


/* ========================================
APPROACH
========================================= */

.approach {
margin-bottom: 80px;


padding: 55px 35px;

background: #F4F8FB;

border-radius: 16px;


}

.approach-grid {
display: grid;


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

gap: 30px;


}

.approach-item {
position: relative;
}

.approach-item > span {
display: block;


margin-bottom: 12px;

color: #3fa9f5;

font-family: 'Manrope', sans-serif;
font-size: 13px;
font-weight: 700;

letter-spacing: 1px;


}

.approach-item h3 {
margin: 0 0 9px;


color: #102A43;

font-family: 'Manrope', sans-serif;
font-size: 17px;


}

.approach-item p {
margin: 0;


color: #627D98;

font-size: 14px;
line-height: 1.55;


}

/* ========================================
DOCUMENTATION
========================================= */

.documentation {
max-width: 800px;


margin: 0 auto 75px;

text-align: center;


}

.documentation h2 {
margin: 0 0 15px;


color: #102A43;

font-family: 'Manrope', sans-serif;
font-size: 28px;


}

.documentation p {
margin: 0;


color: #627D98;

font-size: 16px;
line-height: 1.7;


}

/* ========================================
CLIENTS
========================================= */

.clients {
max-width: 900px;


margin: 0 auto 50px;

text-align: center;


}

.clients h2 {
margin: 0 0 28px;


color: #102A43;

font-family: 'Manrope', sans-serif;
font-size: 28px;


}

.clients-list {
display: flex;


flex-wrap: wrap;

justify-content: center;

gap: 12px;


}

.clients-list div {
padding: 11px 18px;


background: #ffffff;

border: 1px solid #D9E2EC;
border-radius: 7px;

color: #334E68;

font-size: 14px;

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


}

.clients-list div:hover {
background: #F4F8FB;


border-color: #9CCCE9;


}

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

@media (max-width: 900px) {


.services-grid {
    grid-template-columns: 1fr;
}

.approach-grid {
    grid-template-columns: repeat(2, 1fr);
}


}

@media (max-width: 768px) {


.hero {
    margin-bottom: 35px;
}

.hero-img {
    height: 220px;

    border-radius: 8px;
}

.intro {
    margin-bottom: 55px;
}

.intro h1 {
    font-size: 25px;
}

.intro p {
    font-size: 15px;
}

.section-heading h2 {
    font-size: 25px;
}

.service-card {
    padding: 22px;

    gap: 16px;
}

.service-content h3 {
    font-size: 18px;
}

.approach {
    padding: 35px 22px;
}

.approach-grid {
    grid-template-columns: 1fr;
    gap: 25px;
}

.documentation h2,
.clients h2 {
    font-size: 24px;
}


}

@media (max-width: 480px) {


.service-card {
    display: block;
}

.service-number {
    margin-bottom: 18px;
}

.clients-list {
    flex-direction: column;
    align-items: stretch;
}


}