/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #050505; /* globalne tło */
    color: #f5f5f5;
}

/* Header */
.header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: #050505;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 12vh;
    padding: 0 15vw;
}

.logo {
    flex: 0 0 55%; /* proporcja taka jak hero-content */
    display: flex;
    align-items: center;

}

/* Logo */
.logo img {
    height: 10vh;
    width: auto;
}

/* Grupa separator + nav */
.nav-group {
    flex: 0 0 44%; /* proporcja taka jak hero-image */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 0;
}

/* Separator */
.separator {
    height: 9vh;
    width: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
}

/* Navigation */
.nav ul {
    list-style: none;
    display: flex;
    gap: clamp(2rem, 2rem + 0.234vw, 5rem);
}

.nav a {
    text-decoration: none;
    color: #f5f5f5;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.3vw, 4rem);
    transition: color 0.3s ease;
}

.nav a:hover {
    color: #ddd;
}

/* Dolna kreska */
.header-bottom-line {
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
    margin: 0 0.5vw;
}

/* --- HERO SECTION --- */
.hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: space-between; /* zamiast space-around */
    padding: 0 15vw;
    position: relative;
}

.hero-content {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 6em;
    gap: 3rem;
}

.hero-content h1 {
    font-size: clamp(2rem, 3.5vw, 10rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

.cta-btn {
    display: inline-block;
    background: #eb5436;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    padding: clamp(1rem, 2vh, 10rem) clamp(2.5rem, 4vw, 12rem);
    border-radius: clamp(30px, 1.5em, 140px);
    font-size: clamp(0.9rem, 2vw, 4rem);
    text-decoration: none;
    transition: background 0.3s ease;
    width: auto;
    align-self: flex-start;
    margin-left: 1.5em;
}

.cta-btn:hover {
    background: #d13f24;
}

/* Hero separator */
.hero-separator {
    width: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
    height: 57vh; /* zostawiamy jak chcesz */
}

/* Hero image */
.hero-image {
    flex: 0 0 44%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
}

.hero-image img {
    width: 100%;
    max-height: 65vh;
    object-fit: cover;
}

/* Dolna kreska w hero (taka jak w headerze) */
.hero-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0.5vw;      /* taki sam margines jak w headerze */
    right: 0.5vw;
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
}

/* Trusted Section */
.trusted {
    position: relative;
    padding: 5vh 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    height: 12vh;
}

.trusted-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem; /* Odstęp między tekstem, separatorem i logami */
    width: 100%;
}

/* Tekst */
.trusted-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    color: #ffffff;
    font-size: clamp(1rem, 2vw, 10rem);
}

/* Separator */
.trusted-separator {
    height: 9vh;
    width: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
}

/* Loga */
.trusted-logos {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 2rem + 0.234vw, 5rem);
}

.trusted-logos img {
    max-height: 6vh;
    width: auto;
}

/* Dolna kreska */
.trusted-bottom-line {
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
    margin: 0 0.5vw;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* --- AboutHeader (tylko tytuł "O nas") --- */
.aboutHeader {
    position: relative;
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
}

.aboutHeader-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 10rem);
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    padding: 0 4.5em 0 0;
}

/* --- AboutWiktor wyrównany do AboutMateusz --- */
.aboutWiktor {
    position: relative;
    background: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50vh; /* taka sama wysokość jak Mateusz */
}

.aboutWiktor-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    padding: 0 15vw;
    height: 100%; /* dzieci dopasowane do sekcji */
}

.aboutWiktor-image {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eb5436;
    border: solid white clamp(1px, 0.1vw, 12px);
}

.aboutWiktor-image img {
    max-height: 40vh; /* dopasowane do Mateusz */
    width: auto;
    object-fit: contain;
}

.aboutWiktor-separator {
    width: clamp(1px, 0.1vw, 12px);
    height: 47vh; /* jak Mateusz */
    background: #f5f5f5;
}

/* Wspólny kontener na imię + opis */
.about-text-inner {
    display: flex;
    flex-direction: column;
}

.aboutWiktor-text {
    flex: 1;
    display: flex;
    align-items: center;
}

.aboutWiktor-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 4rem);
    color: #ffffff;
    line-height: 1.6;
}

/* Paragraf z imieniem */
.aboutWiktor-text p.about-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 6rem);
    color: #eb5436;
    margin-bottom: 1rem;
}

.aboutWiktor-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0.5vw;
    right: 0.5vw;
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
}

/* --- aboutMateusz SECTION --- */
.aboutMateusz {
    position: relative;
    background: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50vh;
}

/* Kontener */
.aboutMateusz-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    padding: 0 15vw;
    height: 100%;
}

/* Tekst po lewej */
.aboutMateusz-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}
.aboutMateusz-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 4rem);
    color: #ffffff;
    line-height: 1.6;
}

.aboutMateusz-text p.about-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 6rem);
    color: #eb5436;
    margin-bottom: 1rem;
}

/* Separator pionowy */
.aboutMateusz-separator {
    width: clamp(1px, 0.1vw, 12px);
    height: 47vh;
    background: #f5f5f5;
}

/* Zdjęcie po prawej */
.aboutMateusz-image {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eb5436;
    border: solid white clamp(1px, 0.1vw, 12px);
}
.aboutMateusz-image img {
    max-height: 40vh;
    width: auto;
    object-fit: contain;
}

/* Dolna linia */
.aboutMateusz-bottom-line {
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
    margin: 0 0.5vw;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* --- Portfolio Section --- */
.portfolio {
    position: relative;
    background: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8vh 15vw;
    height: 110vh;
}

.portfolio-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 10rem);
    font-weight: 900;
    color: #ffffff;
    align-self: flex-start;
    margin: 0 0 4vh 8vw;
}


.portfolio-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
}

/* Left: images */
.portfolio-images {
    position: relative;
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.portfolio-img {
    position: absolute;
    max-height: 60vh;
    object-fit: contain;
    transition: transform 0.3s ease;
    border: solid white clamp(1px, 0.2vw, 12px);
}

.portfolio-img.center {
    z-index: 3;
    transform: rotate(0deg);
}

.portfolio-img.left {
    z-index: 2;
    transform: rotate(-8deg) translateX(-30%);
}

.portfolio-img.right {
    z-index: 2;
    transform: rotate(8deg) translateX(30%);
}

/* Right: text blocks */
.portfolio-texts {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 2.5vh, 10rem);
}

.portfolio-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: clamp(1.2rem, 2vw, 7rem);
    margin-bottom: clamp(0.5rem, 1vh, 4rem);
    text-align: center;
}

.portfolio-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    color: #ffffff;
    font-size: clamp(0.9rem, 1.3vw, 4rem);
    line-height: 1.6;
    margin-bottom: clamp(1rem, 1.5vh, 7rem);
}

.portfolio-line {
    width: 100%;
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
}

/* Dolna linia */
.portfolio-bottom-line {
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
    margin: 0 0.5vw;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* --- CTA Section --- */
.cta-section {
    position: relative;
    background: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vh 15vw;
    text-align: center;
    height: 70vh;
}

.cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.cta-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 10rem);
    color: #ffffff;
    line-height: 1.3;
}

.cta-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: clamp(1rem, 1.5vw, 5rem);
    color: #ffffff;
    line-height: 1.6;
    max-width: 25vw;
}

.cta-btn-alt {
    background-color: #eb5436;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    padding: clamp(1rem, 2vh, 10rem) clamp(2.5rem, 4vw, 12rem);
    border-radius: clamp(30px, 2em, 140px);
    align-self: center;
    font-size: clamp(0.9rem, 2vw, 4rem);
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.cta-btn-alt:hover {
    background: #ffffff;
    color: #050505;
}

.cta-bottom-line {
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
    margin: 4vh 0.5vw 0 0.5vw;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* --- Contact Section --- */
.contact {
    position: relative;
    background: #050505;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8vh 15vw;
    height: 100vh;
    text-align: center;
}

.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 10rem);
    color: #ffffff;
}

.contact-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: clamp(1rem, 1.2vw, 4rem);
    color: #ffffff;
    margin-bottom: 2rem;
}

.send-status {
    font-size: clamp(1rem, 1.2vw, 4rem);
}

.contact-form {
    background: #eb5436;
    padding: 1rem clamp(1rem, 1vw, 4rem) 0 clamp(1rem, 1vw, 4rem);
    border-radius: clamp(15px, 1em, 180px);
    width: 45%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 2.5rem);
}

.contact-form label {
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    color: #ffffff;
    text-align: left;
    font-size: clamp(1rem, 1.2vw, 4rem);
}

.contact-form input,
.contact-form textarea {
    background: transparent;
    border: none;
    border-bottom: solid white clamp(1px, 0.1vw, 12px);
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: clamp(1rem, 1.2vw, 4rem);
    padding: 0.1rem 0;
    outline: none;
}

.contact-form textarea {
    height: clamp(100px, 45%, 160vh);
    resize: none;
}

.contact-btn {
    background-color: #eb5436;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    padding: clamp(1rem, 2vh, 10rem) clamp(7rem, 6vw, 20rem);
    border-radius: clamp(15px, 1em, 180px);
    align-self: center;
    border: none;
    margin-top: 4vh;
    font-size: clamp(0.9rem, 2vw, 4rem);
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    background: #d13f24;
    color: #ffffff;
}

.contact-bottom-line {
    height: clamp(1px, 0.1vw, 12px);
    background: #f5f5f5;
    margin: 4vh 0.5vw 0 0.5vw;
    width: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Footer */
.footer {
    background-color: #050505;
    padding: 3rem 15vw;
    height: 10vh;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.footer-left, .footer-center, .footer-right {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: clamp(1rem, 1.2vw, 4rem);
}

.footer-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.footer-right a {
    color: #ffffff;
    margin-left: 1rem;
    font-size: clamp(1.2rem, 1.5vw, 4rem);
    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: #eb5436;
}