* {
    margin: 0;
    padding: 0;
}

input:invalid {
    outline: none !important;
}

/* * {
    border: 1px solid red;
} */

/* =========== */

body,
.mantine-Header-root {
    background-color: f2f4f6 !important;
}

.mantine-Navbar-root {
    background-color: 1f2937 !important;
}

.mantine-Anchor-root {
    color: fff !important;
}

.nav-list-items {
    padding: 1rem;
    color: fff !important;
    text-decoration: none;
    list-style: none;
}

.nav-list-items:hover {
    color: f2f4f6 !important;
    background-color: 374151 !important;
}

.mantine-Navbar-root a:-webkit-any-link {
    text-decoration: none;
    color: f2f4f6 !important;
}

.mantine-Navbar-root ::marker {
    display: none;
}


/* =========== */

/* SETTINGS */
.header{
    position: sticky;
    top: 0; 
}

.navbar{
    background-color: #1f2937;
    padding: 0;
    margin: 0;
}
/* =========== */

.logo{
    width: 180px;
    float: right;
    margin-right: 30px;
}

.logoLC{
    width: 100px;
}

.capaEmpresa {
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.3), 
            rgba(0, 0, 0, 0.3)
        ),
        url(../static/crop.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.capaLogin {
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.3), 
            rgba(0, 0, 0, 0.3)
        ),
        url(../static/crop.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
}

.iphones{
    background-image: url(../static/Presentation.png);
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


.settingsBox{
    width: 350px;
    border: none;
}

.innerBox{
    width: 400px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.cartBox{
    width: 320px;
    height: 170px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    display: flex; /* Adiciona esta linha */
    align-items: center; /* Adiciona esta linha */
    justify-content: center; /* Adiciona esta linha */
}

.cartPicture{
    width: 110px;
    height: 140px;
    border-radius: 20px;
    object-fit: cover;
    margin-left: 5px;
    margin-right: 10px;
}

.cartBody{
    margin-left: 30px;
}

.reviewBox{
    padding: 15px;
    width: 320px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.commentBox{
    padding: 15px;
    width: 320px;
    height: 200px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.variantBox{
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.miniBox{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.setupBox{
    width: 300px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* LOGIN */
.caixaLogin{
    margin-right: 0px;
}
.esqueciSenha {
    margin-right: 40px;
}

/* REGISTRO */
.caixaRegistro{
    align-self: center;
    opacity: 85%;
}

.textBox{
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fundoTela{
    background-image: url(../static/fundo.png);
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh; /* Adicione esta linha */
}

.fundoTela2{
    background-image: url(../static/background.png);
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh; /* Adicione esta linha */
}

/* .fundoTela3{
    background-color: #f9f9f9;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
} */

/* .leaflet-tooltip {
    width: 150px !important;
} */

.settingsCape {
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center bottom !important;
    height: 90px;
    align-items: center !important;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 1000; /* Keep it on top */
    /* Assuming full width on extra small devices */
    width: 100%;
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .settingsCape {
        visibility: hidden;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .settingsCape {
        width: 83.3333%; /* 10 out of 12 columns */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .settingsCape {
        width: 83.3333%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .settingsCape {
        width: 83.3333%;
    }
}

/* .settingsCape{
    opacity: 1;
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center bottom !important;
    height: 120px;
    align-items: center !important;
    margin: 0;
    padding: 0;
} */

/* CSS DOS PRODUTOS */
.imagem{
    height: 200px;
}

.cardText{
    margin-top:10px;
    margin-bottom: 20px;
}

.cardSize{
    width: 16rem;
}

.cardSize2{
    width: 15rem;
    margin-left: 10px;
    margin-right: 10px;
    height:270px; 
    border-radius:20px;
}

.miniCardText{
    margin-bottom:25px;
    margin-left: -5px;
}


/* IMAGENS DO PRODUTO */
.large-image {
    width: 400px; /* Adjust the max-width for smaller screens */
    height: auto; /* Maintain aspect ratio */
}

.image-stack {
    display: flex;
    justify-content: center;
    gap: 15px;
}
/* ================== */

@media (max-width: 800px)  {
    .innerBox {
        width: 21rem;
        margin-top: -120px;
    }
    .fundoTela2{
        display: none !important;
    }
}

@media (max-width: 450px) {

    /* LOGIN ================================= */
    /* .fundoTela2{
        display: none !important;
    } */

    .capaLogin {
        display: none !important;
    }

    .caixaLogin {
        margin-right: 0px !important;
        margin-left: 0px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: -150px !important;
    }

    .inputFields {
        width: 21rem;
        margin-left: auto !important;
        margin-right: auto !important; 
    }

    .botaoLogin{
        width: 21rem;
    }

    .esqueciSenha {
        margin-top: 10px;
        justify-content: center !important;
        margin-right: 0px !important;
    }
     /* ========================================= */

    .capaEmpresa {
        background-size: 250%;
    }

    .iphones {
        height: 300px !important;
    }

    .homeText {
        font-size: 28px !important;
        text-align: center !important;
    }

    .homeButton {
        justify-content: center !important;
    }

    .homeSmallText {
        text-align: center !important;
        justify-content: center !important;
    }

    .homeBlock {
        margin-top: -5px !important;
        margin-bottom: 10px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        justify-content: center !important;
    }

    .homeHr {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .footerLogos {
        justify-content: center !important;
        margin-left: auto !important;
    }

    .settingsBox {
        width: 20rem;
    }

    .innerBox {
        width: 21rem;
        margin-top: -120px;
    }

    .setupBox {
        width: 20rem;
    }

    .textBox {
        width: 20rem;
    }

    .fundoTela{
        min-height: calc(100vh + 100px);
    }

    .imagem{
        height: 150px;
    }
    .cardText{
        margin-top:5px;
    }

    .cardSize{
        width: 10rem;
    }

    .cardSize2{
        width: 10rem;
        margin-left: 10px;
        margin-right: 10px;
        height:245px; 
        border-radius:10px;
    }

    .miniCardButton{
        width: 100%;
    }

    .miniCardText{
        margin-bottom:25px;
        margin-right: -55px;
        font-size: 9px;
    }
    
    .miniCardName{
        font-size: 11px;
    }

    /* IMAGENS DO PRODUTO */

    .large-image {
        width: 224px; /* Adjust the width for smaller screens */
        height: 400px; /* Fixed height */
        object-fit: cover; /* Scale the image to maintain aspect ratio without cropping */
        object-position: center; /* Center the image within the element */
    }
    

    .small-image {
        width: calc((20rem - 2 * 15px) / 3);
        height: auto;
    }

    .image-stack {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .image-container {
        flex-direction: column;
    }
    /* ================== */

}