.font,
main section.banner h2,
main section.zPattern h2 {
    font-family: "Playfair Display", serif
}

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

a {
    text-decoration: none;
    color: inherit
}

.btn {
    padding: 5px 30px;
    background-color: #3e8fbc;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid #3e8fbc
}

.btn-alternate,
header div.buttons span.langs {
    border-radius: 5px;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: 500
}

.btn-alternate {
    color: #fff;
    border: 1px solid #111
}

body {
    font-family: Poppins, sans-serif
}

header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    padding: 25px 10%;
    background-color: #eef7f7;
    z-index: 100
}

header a.logo {
    width: 200px;
    height: auto
}

footer div a.dark-logo img,
header a.logo img {
    width: 100%;
    height: auto
}

header img.open-menu,
main section.tabList div.tab div.text p {
    display: none
}

header nav.main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px
}

header nav.main a {
    font-size: 14px;
    font-weight: 400;
    padding: 5px 10px
}

header div.buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    position: relative
}

header div.buttons span.langs {
    border: 1px solid #111;
    position: relative
}

header div.buttons span.dropdownLangs {
    position: absolute;
    top: 30px;
    right: 0;
    display: none;
    flex-direction: column;
    background-color: #fff;
    padding: 5px 30px;
    border-radius: 5px;
    border: 1px solid #111;
    font-size: 14px;
    font-weight: 500
}

header div.buttons span.dropdownLangs:hover,
header div.buttons span.langs:hover+span.dropdownLangs {
    display: flex
}

header div.buttons span.langs::after {
    content: "";
    position: absolute;
    border: 1px solid #111;
    border-top: none;
    border-left: none;
    width: 5px;
    height: 5px;
    display: block;
    right: 10px;
    top: 45%;
    transform: translateY(-50%) rotate(45deg)
}

main section.article article,
main section:not(.slider, .zPattern, .filler-title) {
    padding: 50px 10%
}

main section.slider {
    display: flex;
    flex-direction: column;
    align-items: center
}

main section.slider div.item {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-position: center;
    background-size: cover;
    position: relative;
    padding: 200px 10%
}

main section.slider div.item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    left: 0;
    top: 0
}

main section.slider div.item h1,
main section.slider div.item h2 {
    font-size: 46px;
    width: 40%;
    color: #fff;
    position: relative
}

main section.slider form.contact_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    background-color: #3e8fbc;
    padding: 25px 75px;
    border-radius: 5px;
    transform: translateY(-70%);
    z-index: 99
}

main section.contact-form form.contact_form h2,
main section.lead_form form.lead_form h2,
main section.slider form.contact_form h2 {
    font-size: 36px;
    color: #fff;
    font-weight: 400
}

main section.contact-form form.contact_form div,
main section.lead_form form.lead_form div,
main section.slider form.contact_form div {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1%
}

main section.lead_form form.lead_form div input,
main section.slider form.contact_form div input {
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
    text-align: center;
    min-width: 19%;
    min-height: 30px;
    outline: 0
}

main section form label {
    min-width: 19%;
}

main section.lead_form form.lead_form div select,
main section.slider form.contact_form div select {
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    font-family: inherit;
    width: 100%;
    min-height: 30px;
    text-align-last: center;
    color: #333;
    border-radius: 5px;
    outline: none;
    border: none;
    padding: 5px 15px;
}

main section.lead_form form.lead_form div button,
main section.slider form.contact_form div button {
    min-width: 19%;
    min-height: 30px;
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    background-color: green;
    color: #fff
}

main section.services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 0
}

main section.blog h2,
main section.gallery h1,
main section.gallery h2,
main section.services h2.font,
section.faq h1,
section.faq h2 {
    font-size: 44px;
    color: #3e8fbc;
    font-weight: 400
}

main section.services div.serviceList {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 25px;
    padding: 50px 10%
}

main section.services div.serviceList div.item {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(178, 178, 191, .2) 0 7px 29px 0;
    border-radius: 10px;
    overflow: hidden
}

main section.services div.serviceList div.item img {
    width: 100%;
    height: 275px;
    object-fit: cover
}

main section.services div.serviceList div.item div.text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background-color: #eef7f7;
    padding: 15px
}

main section.services div.serviceList div.item div.text h3 {
    font-weight: 400;
    font-size: 20px
}

main section.services div.serviceList div.item div.text p {
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    max-width: 250px;
    height: 75px
}

main section.zPattern {
    padding: 100px 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #eef7f7
}

main section.zPattern h2::first-line {
    font-family: Poppins, sans-serif;
    font-size: 50px
}

main section.zPattern h2 {
    width: 50%;
    font-size: 70px;
    font-weight: 400;
    text-align: center
}

main section.zPattern h2 span {
    font-size: 60px;
    font-weight: 600;
    display: block
}

main section.zPattern div {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px
}

main section.zPattern div p {
    font-size: 14px;
    line-height: 1.5em;
    font-weight: 300
}

main section.zPattern div a {
    padding: 5px 35px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #111
}

main section.tabList {
    display: flex;
    flex-direction: row;
    gap: 25px
}

main section.tabList div.tab,
main section.tabList div.tab div.text,
section.faq {
    flex-direction: column;
    display: flex;
    gap: 25px
}

main section.tabList div.tab div.container {
    min-width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 20px
}

main section.tabList div.tab.active div.container {
    min-width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 50px
}

main section.tabList div.tab div.container img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background-color: #3e8fbc;
    padding: 10px;
    cursor: pointer;
    border-radius: 20px
}

main section.tabList div.tab div.container div.line {
    height: 2px;
    width: 30%;
    background-color: #3e8fbc;
    transition: width .5s
}

main section.tabList div.tab.active div.container div.line {
    width: 60%
}

main section.tabList div.tab div.text h3 {
    width: 80%;
    font-size: 20px;
    font-weight: 600;
    text-align: center
}

main section.tabList div.tab.active div.text h3 {
    width: 50%;
    text-align: center
}

main section.tabList div.tab.active div.text p {
    display: flex;
    width: 100%
}

main section.banner {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #3e8fbc;
    padding: 40px 70px;
    border-radius: 5px;
    margin: 0 auto
}

main section.banner h2 {
    width: 70%;
    font-size: 44px;
    color: #fff;
    letter-spacing: 3px;
    display: block;
    line-height: 1em;
    font-weight: 300
}

main section.banner h2::first-line {
    font-size: 30px;
    font-family: Poppins, sans-serif
}

main section.banner a {
    padding: 10px 50px;
    background-color: #ff0;
    border-radius: 5px;
    font-size: 20px;
    text-align: center;
    line-height: 1.5em
}

main section.testimonials,
main section.testimonials div.list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 25px
}

main section.testimonials div.item {
    width: 20%;
    min-height: 400px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    transition-duration: .5s
}

main section.article figure img,
main section.gallery section.lightGallery picture img,
main section.testimonials div.item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

main section.testimonials div.item::after {
    content: "";
    position: absolute;
    background-color: #3c92de;
    opacity: .4;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition-duration: .5s
}

main section.testimonials div.item:hover::after {
    opacity: 0;
    transition-duration: .5s
}

section.faq {
    padding: 50px 10%;
    justify-content: center;
    align-items: center
}

section.faq div.faq-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 50px;
    background-color: #eef7f7;
    gap: 25px;
    border-radius: 5px
}

section.faq div.faq-container details summary {
    cursor: pointer;
    font-weight: 400;
    position: relative;
    list-style: none;
    font-size: 28px;
    border-bottom: 1px solid #3c92de;
    padding-bottom: 10px
}

section.faq div.faq-container details summary::-webkit-details-marker {
    display: none
}

section.faq div.faq-container summary::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-80%) rotate(45deg);
    width: 10px;
    height: 10px;
    border: solid #444;
    border-width: 0 2px 2px 0;
    transition: transform .3s
}

section.faq div.faq-container details[open] summary::after {
    transform: translateY(-50%) rotate(-135deg)
}

section.faq div.faq-container details p {
    font-size: 14px;
    padding-top: 10px;
    font-weight: 400
}

main section.pageHeader {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 250px 10% 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: flex-end;
    position: relative
}

main section.pageHeader::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 90%;
    background: #fff;
    background: linear-gradient(90deg, #fff 0, rgba(87, 199, 133, 0) 100%)
}

main section.pageHeader h1,
main section.pageHeader h2 {
    font-size: 50px;
    color: #3c92de;
    position: relative
}

main section.text {
    padding: 50px 10%;
    display: flex;
    flex-direction: column;
    gap: 20px
}

main section.article article p,
main section.text p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5em;
    color: #111
}

main section.text div h3 {
    font-size: 26px;
    font-weight: 600
}

main section.text div p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em
}

main section.contact {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 50px 10%
}

main section.filler-title div.contact h3 {
    font-size: 24px;
    font-weight: 600
}

main section.filler-title div.contact p {
    cursor: pointer;
    font-size: 18px;
    font-weight: 400
}

main section.contact-form form.contact_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    background-color: #3e8fbc;
    padding: 25px 75px;
    border-radius: 5px;
    z-index: 99
}

main section.contact-form form.contact_form div input,
main section.contact-form form.contact_form div select,
main section.contact-form form.contact_form textarea {
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
    text-align: center;
    min-width: 19%;
    min-height: 30px;
    outline: 0;
    font-family: inherit;
    flex: 1;
    resize: none
}

main section.contact-form form.contact_form textarea {
    width: 100%;
    min-height: 250px;
    border: none;
    outline: 0;
    border-radius: 5px
}

main section.contact-form form.contact_form button {
    min-width: 19%;
    min-height: 30px;
    padding: 5px 15px;
    border-radius: 5px;
    border: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    background-color: #fff;
    color: #3c92de
}

main section.lead_form form.lead_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    background-color: #3e8fbc;
    padding: 25px 75px;
    border-radius: 5px
}

main section.lead_form form.lead_form div label {
    min-width: 19%
}

main section.lead_form form.lead_form div label select {
    width: 100%
}

main section.blog,
main section.gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px
}

main section.blog div.list {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 25px
}

main section.blog div.list+div.list {
    border-top: 1px solid #3e8fbc;
    padding-top: 50px
}

main section.blog div.list h3 {
    width: 100%;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.5em
}

main section.blog div.list p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5em;
    color: #999
}

main section.article {
    padding: 0
}

main section.article figure {
    width: 100%;
    height: 400px
}

main section.article article h1 {
    font-size: 40px;
    color: #3c92de
}

main section.article article h2 {
    font-size: 32px;
    color: #3c92de
}

main section.article article h3 {
    font-size: 26px;
    color: #3c92de
}

main section.gallery section.lightGallery {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px 1.33%
}

footer,
footer div span {
    flex-direction: row;
    display: flex
}

main section.gallery section.lightGallery picture {
    width: 24%;
    height: 300px;
    display: block;
    cursor: pointer
}

footer {
    background-color: #171918;
    justify-content: space-between;
    align-items: center;
    padding: 50px 10%;
    position: relative
}

footer div,
footer nav div {
    display: flex;
    flex-direction: column
}

footer div a.dark-logo {
    width: 300px;
    height: auto
}

footer div span {
    justify-content: flex-start;
    gap: 25px
}

footer div span img {
    width: 18px;
    height: 18px
}

footer nav {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

footer nav div a,
footer nav div p {
    color: #fff;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5em
}

footer a.puisoft {
    position: absolute;
    right: 10px;
    bottom: 10px
}

footer a.puisoft img {
    filter: invert(1);
    width: 40px;
    height: auto
}

@media screen and (max-width:500px) {
    header {
        padding: 20px 5%;
        gap: 25px
    }

    header nav.main {
        display: none
    }

    header a.logo {
        width: 35%
    }

    header div.buttons {
        gap: 10px
    }

    header div.buttons span.langs {
        font-size: 10px
    }

    header div.buttons a.btn {
        padding: 5px 30px
    }

    header div.buttons span.dropdownLangs {
        top: 25px;
        padding: 0 30px;
        font-size: 10px
    }

    header nav.main.active {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 99;
        background-color: #eef7f7;
        padding: 20px;
        gap: 20px;
        border-radius: 0 0 10px 10px
    }

    header img.open-menu {
        display: flex;
        width: 40px;
        height: 30px;
        z-index: 99
    }

    main section.slider form.contact_form {
        transform: translateY(-35%);
        padding: 25px 60px
    }

    main section.slider form.contact_form div {
        flex-direction: column;
        gap: 15px
    }

    main section.slider form.contact_form h2 {
        font-size: 20px
    }

    main section.slider form.contact_form div select {
        padding: 5px 40px
    }

    main section.slider form.contact_form div button {
        padding: 5px 45px;
        font-size: 12px
    }

    main section.services div.serviceList div.item {
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
        box-shadow: rgba(178, 178, 191, .2) 0 7px 29px 0;
        border-radius: 10px;
        overflow: hidden
    }

    footer nav,
    main section.gallery section.lightGallery picture,
    main section.lead_form form.lead_form div input,
    main section.lead_form form.lead_form div label,
    main section.lead_form form.lead_form div select,
    main section.slider form.contact_form div input,
    main section.slider form.contact_form div select,
    main section.zPattern h2 {
        width: 100%
    }

    main section.lead_form {
        padding: 50px 5%
    }

    main section.lead_form form.lead_form {
        padding: 25px
    }

    main section.lead_form form.lead_form h2,
    main section.tabList div.tab.active div.text p,
    main section.zPattern div p {
        text-align: center
    }

    main section.lead_form form.lead_form div {
        flex-direction: column;
        width: 100%;
        gap: 15px
    }

    main section.gallery section.lightGallery,
    main section.tabList,
    main section.tabList div.tab div.container,
    main section.zPattern {
        flex-direction: column
    }

    main section.zPattern {
        justify-content: space-between;
        gap: 20px
    }

    main section.zPattern div {
        width: 100%;
        align-items: center
    }

    main section.zPattern div a {
        width: 50%
    }

    main section.contact,
    main section.tabList div.tab.active div.container {
        flex-direction: column;
        gap: 25px
    }

    main section.tabList div.tab div.container div.line,
    main section.tabList div.tab.active div.container div.line {
        height: 30px;
        width: 2px
    }

    main section.tabList div.tab div.text {
        align-items: center
    }

    main section.tabList div.tab div.text h3 {
        width: 80%
    }

    main section.tabList div.tab div.text p {
        font-size: 14px;
        color: #111;
        line-height: 1.5em;
        font-weight: 300
    }

    main section.banner {
        flex-direction: column;
        gap: 25px;
        margin: 0;
        width: 100%;
        padding: 50px 5%
    }

    main section.banner h2 {
        width: 100%;
        text-align: center;
        line-height: 1.2em
    }

    main section.banner a {
        font-size: 18px;
        padding: 10px 70px
    }

    main section.testimonials {
        overflow-x: scroll;
        width: 100%
    }

    main section.testimonials div.list {
        width: max-content;
        justify-content: flex-start
    }

    main section.testimonials div.item {
        width: 200px;
        height: 400px
    }

    section.faq {
        padding: 50px 5% !important
    }

    section.faq div.faq-container {
        padding: 30px
    }

    section.faq div.faq-container details summary {
        font-size: 14px;
        padding-right: 25px
    }

    section.faq div.faq-container summary::after {
        width: 5px;
        height: 5px;
        right: 0
    }

    section.faq div.faq-container details p {
        font-size: 12px;
        font-weight: 300;
        line-height: 1.5em
    }

    main section.contact-form form.contact_form {
        padding: 25px 20px
    }

    main section.contact-form form.contact_form div {
        flex-direction: column;
        gap: 10px
    }

    main section.contact-form form.contact_form div input,
    main section.contact-form form.contact_form div select,
    main section.contact-form form.contact_form textarea {
        width: 100%;
        font-size: 10px
    }

    main section.contact-form form.contact_form h2 {
        font-size: 26px
    }

    main section.contact-form form.contact_form button {
        font-size: 12px
    }

    main section.article article h1 {
        font-size: 32px
    }

    main section.blog div.list {
        align-items: flex-start
    }

    main section form label {
        width: 100%;
        min-width: 100%;
    }

    footer {
        flex-direction: column;
        gap: 25px;
        padding-bottom: 100px
    }
}