:root {
    --main-text-black: #1d1d1f;
    --main-text-white: #fff !important;
    --main-background-gray: #FAFAFA;
    --footer-background: #f5f5f7;
    --footer-link-color: #424245;
    --footer-text-color: #6e6e73;
    --global-color-261ff69: #BF3FA4;
}
body {
    font-family: 'Barlow', sans-serif !important;
    background: var(--main-background-gray);
}
main {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
main p {
    font-size: 20px;
    line-height: 1.3;
}
main li {
    /* list-style: none; */
    /* text-transform: capitalize; */
    font-size: 20px;
    margin: 10px;
}
.banner {
    width: 100%;
    height: 500px;
}
.banner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.description,
.contact {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
}
.offer {
    margin-top: 24px;
}
.offer,
.pros {
    display: inline-flex;
    flex-direction: row;
    gap: 20px;
}
.offer-img > img,
.pros-img > img {
    max-width: 100%;
    border-radius: 24px;
}
.offer-content,
.pros-content {
    width: 100%;
}
.offer-content h2,
.pros-content h2 {
    margin: 0;
}
.pros {
    float: right;
}
.models,
.partnership {
    display: inline-flex;
    flex-direction: column;
    margin-top: 5px;
}
.top-line, .bottom-line {
    border-top-color: #959595;
    border-width: 1px;
    border-style: solid;
}
.top-line {
    margin-bottom: 30px;
}
.bottom-line {
    margin-top: 30px;
}
.button-link a {
    color: var(--global-color-261ff69);
    font-family: "barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
}
.button-link a:hover {
    color: #844C82;
    
}
.button-link a p {
    font-size: 32px !important;
    background: #ffffff !important;
    font-weight: 100 !important;
    width: fit-content;
    margin: auto;
    padding: 11px;
    border-radius: 24px;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #fff;
}
/* Animacja fade-in dla div-ów offer i pros */
.description, .offer, .models, .pros, .partnership, .contact, .button-container {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.description.show, .offer.show, .models.show, .pros.show, .partnership.show, .contact.show, .button-container.show {
    opacity: 1;
    transform: translateY(0);
}

/* Stylizacja dla urządzeń mobilnych o szerokości maksymalnie 768px */
@media (max-width: 768px) {
    main {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .banner {
        height: 300px;
    }

    .offer,
    .pros {
        flex-direction: column;
        height: auto;
    }

    .offer-img > img,
    .pros-img > img {
        width: 100%;
        height: auto;
    }

    .offer-content,
    .pros-content {
        width: 100%;
    }

    .offer-content h2,
    .pros-content h2 {
        font-size: 24px;
    }

    .models-content ul li,
    .offer-content ul li,
    .pros-content ul li {
        font-size: 18px;
        margin: 8px;
    }

    .button-link a p {
        font-size: 24px !important;
        padding: 8px;
        border-radius: 20px;
    }

    .models,
    .partnership {
        margin-top: 20px;
    }

    .description,
    .contact {
        align-items: flex-start;
        margin-top: 10px;
    }

    .partnership-content h2 {
        font-size: 24px;
    }
}

/* Stylizacja dla urządzeń mobilnych o szerokości maksymalnie 480px */
@media (max-width: 480px) {
    .banner {
        height: 200px;
    }

    main p {
        font-size: 18px;
        line-height: 1.2;
    }

    main li {
        font-size: 16px;
        margin: 6px;
    }

    .offer-content h2,
    .pros-content h2 {
        font-size: 20px;
    }

    .models-content ul li,
    .offer-content ul li,
    .pros-content ul li {
        font-size: 16px;
        margin: 6px;
    }

    .button-link a p {
        font-size: 20px !important;
        padding: 6px;
        border-radius: 16px;
    }

    .description,
    .contact {
        align-items: flex-start;
        margin-top: 10px;
    }
}