@media (min-width: 1280px) {
    #back-button {
        display: none !important;
    }
}

@media (max-width: 1280px) {
    #x-btn {
        display: none;
    }

    header {
        .navbar-toggler {
            align-items: center;
            display: flex !important;

            .toggler {
                font-size: 30px;
                width: 40px;
            }

            .navbar-menu {
                display: block !important;
                position: absolute;
                top: 200px;
                right: 0;
                background-color: #80b1b3;
                z-index: 1;

                ul {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    border: 2px solid #b96262;

                    .fa-caret-down {
                        font-size: 30px;
                        transform: rotate(90deg);
                    }

                    li {
                        width: 100%;
                        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
                        text-align: end;

                        a {
                            font-weight: 400;
                        }

                        a:hover {
                            background-color: unset;
                        }

                        .selected:active,
                        .selected:focus {
                            background-color: #b96262;
                            border-radius: 0px;
                        }

                        .category-list {
                            display: flex !important;
                            position: absolute;
                            top: 0%;
                            right: 165px;
                            width: 50vw;
                        }

                        .guest {
                            right: 158px;
                        }
                    }
                }
            }
        }

        .navbar-menu {
            display: none;
        }
    }
}

@media (max-width:1024px) {
    .to-product-top {
        display: none !important;
    }
}

@media (max-width:840px) {
    .policiesContent {
        width: auto;
    }
}

@media (min-width:1025px) and (max-width: 1280px) {
    .focused::before {
        top: 50px;
        right: 25px;
        background-color: rgb(0 0 0 / 35%) !important;
    }

    .user-focused::before {
        top: 67px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    header {
        position: unset;

        .nav-search input {
            width: 35vw !important;
        }

        .user {

            .admin,
            p,
            form {
                margin: 0 7px !important;
            }
        }

        .nav-search button {
            background-color: #5c5c5c;
            border: none;
            border-radius: 10px;
            padding: 0px 10px;
            font-size: 20px;
            margin-left: 5px;
        }
    }
}

@media (min-width: 769px) {
    .nav-search-btn {
        display: none;
    }
}

@media (min-width: 546px) and (max-width: 1280px) {
    .title h1 {
        font-size: 2.5em;
    }
}

@media (min-width:546px) and (max-width: 1024px) {
    .focused-glass::before {
        top: 50px;
        right: 62px;
    }

    .focused::before {
        top: 50px;
        right: 25px;
    }

    .user-focused::before {
        top: 68px;
    }
}

@media (min-width: 546px) and (max-width: 768px) {
    .navbar-menu form input {
        width: 200px;
    }
}

@media (min-width: 376px) and (max-width: 1280px) {
    .navbar-toggler .navbar-menu {
        top: 137px !important;
    }
}

@media (min-width:376px) and (max-width:768px) {
    .user-focused-glass.focused-glass::before {
        top: 68px;
    }
}

@media (max-width: 375px) {
    .navbar-toggler .user-navbar-menu {
        top: 137px !important;
    }
}

@media (min-width: 320px) and (max-width: 1280px) {

    .focused-glass::before,
    .focused::before {
        position: absolute;
        content: '';
        background-color: rgb(0 0 0 / 35%);
        height: 40px;
        border-radius: 7px;
        z-index: -1;
    }

    .focused::before {
        width: 37px;
    }

    .focused-glass::before {
        width: 39px;
    }
}

@media (min-width: 320px) and (max-width: 1024px) {
    section .container {
        margin: 0 auto !important;
    }
}

@media (min-width: 320px) and (max-width: 768px) {
    header {
        position: unset;

        .nav-search {
            display: none;
        }

        .navbar-toggler .nav-search-btn {
            font-size: 27px;
            padding: 3px;
            margin-right: 10px;
        }

        .navbar-menu form {
            display: flex;
            justify-content: center;
            margin: 10px 5px;
            opacity: 0.8;

            input {
                width: 230px !important;
                height: 30px;
                border-radius: 10px;
                font-size: 16px;
                background-color: #5c5c5c;
                color: #ffffff;
                border: none;
                outline: none;
                padding: 0 7px;
            }

            input::placeholder {
                color: black;
            }

            button {
                background-color: #5c5c5c;
                border: none;
                border-radius: 10px;
                padding: 0px 10px;
                font-size: 20px;
                margin-left: 5px;
            }
        }
    }

    .category-title {
        text-align: center;
    }
}

@media (min-width: 320px) and (max-width: 545px) {
    .bot-nav {
        flex-flow: row wrap;

        .navbar-toggler {
            .navbar-menu {
                left: 0;

                li {
                    text-align: start !important;

                    a {
                        display: flex;
                        align-items: center;

                        i {
                            transform: none !important;
                            order: 1;
                            margin: 0 10px;
                        }
                    }

                    .category-list {
                        position: relative !important;
                        left: 0 !important;
                        border: unset;
                        width: unset;
                        background-color: #55a7ab;
                    }
                }
            }

            .focused-glass::before {
                top: 50px;
                right: 63px;
            }

            .focused::before {
                top: 50px;
                right: 25px;
            }

            .user-focused::before,
            .user-focused-glass::before {
                top: 68px;
            }

            .nav-bar .user form {
                margin: 0 10px !important;
            }
        }
    }

    section .container .title {
        margin-top: 0px;

        h1 {
            font-size: 1.5em;
        }
    }

    footer .bot-nav .footer-wrapper {
        flex-direction: column;
        align-items: center;

        .socials {
            order: -1;
        }
    }
}

@media (min-width: 320px) and (max-width: 481px) {
    .focused-glass::before {
        right: 48px !important;
    }

    .focused::before {
        right: 11px !important;
    }
}

@media (min-width: 320px) and (max-width: 375px) {
    header .bot-nav .nav-bar .user {
        align-items: center;

        .admin {
            position: relative;
            top: 38px;
            left: 70px;
        }

        .admin,
        form {
            margin: 0 !important;
        }

        p {
            margin: 0 5px 0 0 !important;
            font-size: 20px;
        }
    }

    .navbar-toggler .guest-nav {
        top: 137px !important;
    }
}

@media (min-width: 320px) and (max-width: 359px) {

    .user-focused::before,
    .user-focused-glass::before {
        top: 68px !important;
    }
}