header {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    position: fixed;
    top: 0px;
    z-index: 10;
    background-color: #fff;
    transition: 0.2s;

    .header-content {
        width: 100%;
        max-width: 1700px;
        padding: 0px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    * {
        transition: 0.2s;
    }

    .logo-and-menu {
        display: flex;
        align-items: center;
        gap: 130px;

        .logo-container {
            display: flex;
            align-items: center;

            a {
                display: flex;
                align-items: center;
            }
            .logo {
                width: 380px;
            }
            .logo-other-color {
                display: none;
            }
        }

        .menu {
            display: flex;
            justify-content: space-around;
            width: 670px;

            li {
                list-style-type: none;
                
                a {
                    text-decoration: none;
                    color: #353535;
                    font-family: Inter;
                    font-weight: 500;
                    font-size: 21px;
                }
            }
        }
    }

    .button-contact {
        background-color: #005053;
        width: 330px;
        height: 70px;
        border-radius: 30px;
        font-weight: 600;
        font-size: 24px;
        color: #fff;
        border: 0px;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rectangle-lines {
        position: absolute;
        top: 80px;
        left: 160px;

        &:before, &:after{
            content: "";
            position: absolute;
            display: block;
            width: 2px;
            height: 75px;
            background-color: #C9C7C7;
            rotate: -30deg;
            top: -65px;
        } 
        &:before {
            left: 390px;
        }
        &:after {
            left: 1220px;
        }
    }

    .mobile-menu-container, .hamburger-menu-content {
        display: none;
    }
}

@media (max-width: 1850px) {
    header {
        .logo-and-menu {
            .menu {
                width: 700px;
            }
        }
        .rectangle-lines {
            &:after {
                left: 1180px;
            }
        }
    }
}

@media (max-width: 1800px) {
    header {
        .rectangle-lines {
            left: 150px;

            &:after {
                left: 1175px;
            }
        }
    }
}

@media (max-width: 1750px) {
    header {
        .rectangle-lines {
            left: 200px;

            &:after {
                left: 1175px;
            }
        }
    }
}

@media (max-width: 1700px) {
    header {
        .logo-and-menu {
            .menu {
                width: 650px;
            }
        }
        .rectangle-lines {
            left: 210px;

            &:after {
                left: 1105px;
            }
        }
    }
}

@media (max-width: 1600px) {
    header {
        .logo-and-menu {
            .menu {
                width: 550px;
            }
        }
        .rectangle-lines {
            &:after {
                left: 1065px;
            }
        }
    }
}

@media (max-width: 1500px) {
    header {
        .logo-and-menu {
            .menu {
                width: 500px;
                gap: 50px;
            }
            .logo-container {
                .logo {
                    width: 290px;
                }
            }
        }
        .rectangle-lines {
            left: 40px;

            &:after {
                left: 1005px;
            }
        }
    }
}

@media (max-width: 1366px) {
    header {
        height: 80px;

        .logo-and-menu {
            gap: 100px;

            .logo-container {
                .logo {
                    width: 290px;
                }
            }
            .menu {
                width: 470px;

                li {
                    a {
                        font-size: 16px;
                    }
                }
            }
        }

        .button-contact {
            width: 250px;
            height: 55px;
            font-size: 18px;
        }

        .rectangle-lines {
            left: 0px;
            &:before, &:after{
                width: 2px;
                height: 55px;
            } 

            &:after {
                left: 930px;
            }
        }
    }
}

@media (max-width: 1250px) {
    header {
        .logo-and-menu {
            gap: 50px;
        }
        
        .rectangle-lines {
            left: -40px;

            &:after {
                left: 900px;
            }
        }
    }
}

@media (max-width: 1150px) {
    header {
        .logo-and-menu {
            gap: 40px;

            .menu {
                width: 400px;
                gap: 0px;
            }
        }

        .rectangle-lines {
            &::after {
                left: 805px;
            }
        }
    }
}

@media (max-width: 1100px) {
    header {
        .button-contact {
            max-width: 200px;
        }
    }
}

@media (max-width: 1024px) {
    header {
        height: 65px;

        .rectangle-lines {
            display: none;
        }
        .logo-and-menu {
            .logo-container {
                .logo {
                    max-width: 230px;
                    height: auto;
                }
            }

            .menu {
                display: none;
            }
        }

        .button-contact {
            max-width: 230px;
            height: 50px;
            margin-right: 70px;
        }

        .mobile-menu-container {
            display: flex;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 25px;
            height: 25px;

            .hamburger-menu-button {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 5px;

                .hamburger-span {
                    width: 100%;
                    height: 3px;
                    background-color: #005053;
                    border-radius: 3px;

                    &.first-span.active-span {
                        transform: rotate(45deg);
                        transform-origin: top left;
                        margin-left: 5px;
                    }
                    &.second-span.active-span {
                        transform: scale(0);
                    }
                    &.third-span.active-span {
                        transform: rotate(-45deg);
                        transform-origin: bottom left;
                        margin-top: 1px;
                        margin-left: 5px;
                    }
                }
            }
        }

        .hamburger-menu-content {
            width: 330px;
            position: absolute;
            background: #FFFFFF99;
            backdrop-filter: blur(10px);
            height: 280px;
            right: 0px;
            top: 65px;
            border-radius: 0px 0px 30px 30px;
            transition: 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-origin: top;
            transform: scaleY(0);

            &.active-content {
                transform: none;
            }

            .menu {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 50px;

                li {
                    list-style-type: none;

                    a {
                        font-weight: 500;
                        font-size: 21px;
                        line-height: 100%;
                        letter-spacing: 0%;
                        text-align: center;
                        text-decoration: none;
                        color: #005053;
                    }
                } 
            }
            .button-contact {
                display: none;
            }
        }
    }
}

@media (max-width: 768px) {
    header {
        border-radius: 0px;
        
        .button-contact {
            display: none;
        }
        .mobile-menu-container {
            z-index: 1;
        }
        .hamburger-menu-content {
            flex-direction: column;
            gap: 50px;
            height: 400px;
            width: 100%;
            top: 0px;
            left: 0px;
            padding-top: 50px;

            .button-contact {
                display: block;
                margin: 0px;
                text-decoration: none;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}