@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Dosis:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Niramit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Updock&display=swap'); /*font h1 titulo*/

/*Caligrafia casamento*/
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');

/*BELLOTA*/
@import url('https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Cormorant Garamond', serif;
}

body {
    width: 100%;
    /* font-family: "Cormorant Garamond", serif; */
}

#back {
    background: rgba(0, 0, 0, 0.4) url(../assets/img/fundosala.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: darken;
    background-attachment: fixed; 
    border-width: 150px 70px 0 70px; /* Ordem: cima, direita, baixo, esquerda */
    border-style: solid;
    border-color: black;
}
.fundo_flores {
    position: fixed; /* Fixa a imagem ao fundo */
    top: 0;
    left: 50%;
    width: 100vw; /* Ocupa 100% da largura da viewport */
    height: 100dvh; /* Ocupa 100% da altura da viewport */
    z-index: -1; /* Fica atrás do conteúdo */
    max-width: 1100px;
    transform: translateX(-50%);
}
.fundo_flores img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha todo o espaço sem distorcer */
    object-position: center; /* Centraliza a imagem */
}
.logo {
    left: -20px;
    top: -40px;
    width: 230px;
}

.content-logo-index {
    position: absolute;
    top: 15px;
    right: 25px; 
    transition: 0.5s;
    /* height: 120px; */
}

.content-logo-index img{
    /* width: 120px;
    height: 120px; */

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-logo-quadrado {
    height: 130px;
    overflow: hidden;
    width: 130px;
}

.content-logo-retangulo {
    height: 141px;
    overflow: hidden;
    width: 107px;
}

.content-logo-circulo {
    height: 130px;
    overflow: hidden;
    width: 130px;
    border-radius: 50%;
}

.content-logo-formato4 {
    height: 141px;
    overflow: hidden;
    width: 107px;
    border-radius: 19%;
}

.content-logo-formato5 {
    height: 141px;
    overflow: hidden;
    width: 107px;
    border-radius: 55%;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /* height: 300px; */
    height: 400px;
}

.header-index h1{
    font-family: "Updock", cursive;
    font-size: 100px;
    font-weight: 100;
    background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent;
    position: absolute;
    top: 20px; /* Alinha o texto ao topo */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%);
}

.div-geral {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    gap: 20px;
}

.div-porta {
    min-height: 100vh;
    width: 500px;
    display: flex;
    align-items: center;
}

.div-porta img {
    height: 85%;
    width: 500px;
}

.div-btn-nov {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 100px 0;
}

.nav-index {
    background-size: cover;
    background-position: center;
    /* height: 300px;
    width: 800px; */
    height: 400px;
    width: 850px;
    display: flex;
    justify-content: center;
    align-items: start;
}

.nav-index ul {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 20px;
}

.nav-index ul li {
    list-style-type: none;
    background: -webkit-linear-gradient(98deg, #7c1b2e,#623a5c,#211018);
    background: linear-gradient(98deg, #7c1b2e,#623a5c#211018);                                                               
    /* height: 100px;
    width: 100px; */
    height: 120px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}
.nav-index ul .cor_sobre {
    background: #74796a !important;
}
.nav-index ul .cor_preceito {
    background: #454C3C !important;
}
.nav-index ul .cor_produto {
    background: #4a4665 !important;
}
.nav-index ul .cor_noticia {
    background: #69225e !important;
}
.nav-index ul .cor_oficina {
    background: #623A5C !important;
}
.nav-index ul .cor_contato {
    background: #135f58 !important;
}


.nav-index ul li a{
    font-family: "Updock", cursive;
    font-weight: 100;
    text-decoration: none;
    color: white;
    /* font-size: 21px; */
    font-size: 31px;
    /* height: 100px;
    width: 100px; */
    height: 120px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-porta {
    position: absolute;
    z-index: -1000;
    height: 100vh;
    opacity: .9;
}

/* .container-index {
    height: calc(100vh - 300px);
} */

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    /* background: -webkit-linear-gradient(98deg, #7c1b2e,#623a5c,#211018);
    background: linear-gradient(98deg, #7c1b2e,#623a5c,#211018);   */
    background-color: black;
    height: 70px;
}

.footer-copy {
    display: flex;
    gap: 30px;
}

footer p {
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
}

footer p a {
    color: white;
    text-decoration: none;
}

footer p a:hover {
    color: white;
    text-decoration: underline;
}

.footer-midias {
    display: flex;
    gap: 20px;
}

.footer-midias i {
    color: #ABAEA5;
    font-size: 25px;
    transition: 0.5s;
}

.footer-midias i:hover {
    color: #454C3C;
}

.logo-joao {
    width: 20px;
    height: 20px;
}

/*               */

.container-index {
    width: 100%;
}

.novidades-section {
    /* width: 92%; */
    width: 100%;
    margin: 0 auto;
    /* margin-top: 150px; */
}

.novidades-section h2 {
    font-family: "Updock", cursive;
    font-size: 45px;
    font-weight: 100;
    color: white;
    /* background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent; */
    margin-left: 35px;
}

.texto-com-fundo {
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.novidades-section .novidades-div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 50px;
}

.novidades-section .novidade {
    /* background: #623A5C !important; */
    border-radius: 3px;
    /* height: auto; Permite altura automática */
    min-height: 300px;
    /* min-width: 45%; */
    width: 49%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Garante espaço entre os elementos */
    padding: 10px; /* Adiciona padding para espaçamento */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos nas dimensões */
    background-size: cover;
    background-position: center;
}

.novidades-section .novidade h3,
.novidades-section .novidade p,
.novidades-section .novidade span {
    word-wrap: break-word; /* Permite quebra de palavra */
    overflow-wrap: break-word; /* Permite quebra de palavra */
    margin: 5px 0; /* Adiciona margem vertical entre os elementos */
    text-align: center; /* Centraliza o texto */
}

.novidades-section .novidade h3 {
    /* background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent; */
    color: white;
    font-family: "Updock", cursive;
    font-weight: 100;
    font-size: 42px;
    white-space: normal; /* Permite quebra de linha */
}

.novidades-section .novidade p {
    /* background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent; */
    color: white;
    font-family: "Updock", cursive;
    font-weight: 100;
    font-size: 30px;
    white-space: normal; /* Permite quebra de linha */
}

.novidades-section .novidade span {
    /* background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent; */
    color: white;
    font-family: "Updock", cursive;
    font-weight: 100;
    font-size: 21px;
    white-space: normal; /* Permite quebra de linha */
}

/* SOBRE MIM */

#back-sobre {
    background: -webkit-linear-gradient(180deg, #ABAEA5,#ABAEA5,#BBBBBB,#DCDDDF,#868487);
    background: linear-gradient(180deg, #ABAEA5, #AEAEAE, #868487, #b4b5b8, #928a8a);
    border-width: 150px 70px 0 70px; /* Ordem: cima, direita, baixo, esquerda */
    border-style: solid;
    border-color: black;
}

.container-sobre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    min-height: 100vh;
}

.texto {
    display: none; /* Por padrão, as divs ficam ocultas */
    font-size: 25px;
    padding: 20px;
    border-radius: 8px;
}

.texto.ativo {
    display: block; /* Apenas a div ativa é exibida */
}

.seta-direita, .seta-esquerda {
    cursor: pointer;
    background-color: transparent;
    border: none;
    font-size: 40px;
    color: #7c1b2e;
    transition: 0.3s ease;
    margin: 0 auto;
    display: flex;
}

.seta-direita:hover, .seta-esquerda:hover {
    color: #211018;
}

.img-sobre {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-sobre img {
    max-height: 610px;
}

.text-sobre {
    width: 53%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px 30px 20px 0;
    gap: 50px;
}

.text-sobre p {
    font-family: "Bellota", system-ui;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: justify;
    line-height: 25px;
    font-size: 27px;
    color: white;
    letter-spacing: normal;
}

.content-logo-sobremim {
    position: absolute;
    /* top: 85px;
    right: 20px;  */
    top: 15px;
    right: 25px;
    transition: 0.5s;
    /* height: 120px; */
}
/* .content-logo-sobremim:hover {
    transform: translate(2px, -2px);
} */
.content-logo-sobremim img{
    /* width: 120px;
    height: 120px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container-sobre h1 {
    font-family: "Updock", cursive;
    position: absolute;
    color: white;
    font-size: 100px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

/* PRECEITO */

#back-preceito {
    background: linear-gradient(45deg, #121212, #4b4d48, #50534d, #b7b7b7);
    border-width: 150px 70px 0 70px; /* Ordem: cima, direita, baixo, esquerda */
    border-style: solid;
    border-color: black;
}

.container-preceito {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    min-height: 100vh;
}

.img-preceito {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-preceito img {
    max-height: 700px;
}

.text-preceito {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 30px 20px 0;
    gap: 50px;
}

.text-preceito p {
    font-family: "Bellota", system-ui;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: justify;
    line-height: 25px;
    font-size: 27px;
    letter-spacing: normal;
    color: white;
    font-weight: 100;
}

.content-logo-preceito {
    position: absolute;
    /* top: 85px;
    right: 20px;  */
    top: 15px;
    right: 25px;
    transition: 0.5s;
    /* height: 120px; */
}
/* .content-logo-preceito:hover {
    transform: translate(2px, -2px);
} */
.content-logo-preceito img{
    /* width: 120px;
    height: 120px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container-preceito h1 {
    font-family: "Updock", cursive;
    position: absolute;
    color: white;
    font-size: 100px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

/* CONTATO EMAIL */

#back-contato {
    /* background: linear-gradient(45deg, #1A0D13, #211018, #3A1828, #5B1F40); */
    background: rgba(0, 0, 0, 0.4) url(../assets/img/pavao.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: darken;
    background-attachment: fixed; 
    border-width: 150px 70px 0 70px; /* Ordem: cima, direita, baixo, esquerda */
    border-style: solid;
    border-color: black;
}

.content-logo-contatoEmail {
    margin-top: 5px;
}
.content-logo-contatoEmail i {
    font-size: 25px;
    color:white;
}
.content-logo-contatoEmail a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;
}
.content-logo-contatoEmail {
    position: absolute;
    top: 0px;
    left: 10px;
    transition: 0.5s;
}

.container-contatoEmail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 20px;
}

.content-contatoEmail {
    width: 60%;
    background-color: #ffffff2e;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.13);
    border-radius: 10px;
}

.text-contatoEmail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.text-contatoEmail h1{
    font-family: "Updock", cursive;
    position: absolute;
    color: white;
    font-size: 100px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

/* .text-contatoEmail h1:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 2px;
    background: -webkit-linear-gradient(98deg, #7c1b2e,#623a5c,#211018);
    background: linear-gradient(98deg, #7c1b2e,#623a5c,#211018); 
    left: 0;
    right: 0;
    bottom: -10px;
    margin: auto;
} */

.text-contatoEmail p {
    color: white;
    font-size: 25px;
}

.content-dados {
    display: flex;
}

.content-dadosEmpresa {
    padding: 30px 20px;
    /* background: -webkit-linear-gradient(98deg, #7c1b2e,#623a5c,#211018);
    background: linear-gradient(98deg, #7c1b2e,#623a5c,#211018);  */
    border-radius: 10px 0 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    width: 38%;
}

.content-local {
    /* background-color: rgba(136, 93, 93, 0.288); */
    background-color: #00000033;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 10px;
}

.content-local i {
    color: white;
    /* background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);                        
    background: linear-gradient(60deg, #7c1b2e,#211018);   */
    background-color: #4f4647;
    padding: 10px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.content-local i:hover {
    background-color: white;
    color: var(--corIcon);
}

.content-local div h2 {
    font-family: 'Niramit', sans-serif;
    color: white;
    font-weight: 500;
    line-height: 30px;
}

.content-local div p {
    font-family: 'Niramit', sans-serif;
    color: rgb(214, 205, 205);
}

.content-inputs {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    width: 63%;
}

.inputs-one {
    display: flex;
    gap: 20px;
    width: 100%;
}

.inputs-one input{
    height: 40px;
    width: 100%;
    padding-left: 10px;
    border-color: rgba(128, 128, 128, 0.144);
    color: #605E5F;
    font-size: 17px;
    outline-color: rgba(128, 128, 128, 0.479);
}

.inputs-two {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.inputs-two input{
    height: 40px;
    width: 100%;
    padding-left: 10px;
    border-color: rgba(128, 128, 128, 0.144);
    color: #605E5F;
    font-size: 17px;
    outline-color: rgba(128, 128, 128, 0.479);
}

.inputs-two textarea{
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
    border-color: rgba(128, 128, 128, 0.144);
    color: #605E5F;
    font-size: 17px;
    outline-color: rgba(128, 128, 128, 0.479);
}

::placeholder {
   color: #605E5F;
}

.content-inputs input[type=submit] {
    /* background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);                      
    background: linear-gradient(60deg, #7c1b2e,#211018); */
    background-color: #4f4647;
    border: none;
    padding: 10px;
    width: 100px;
    border-radius: 50px;
    margin: auto;
    color: white;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    transition: 0.5s;
}

.content-inputs input[type=submit]:hover {
    background-color: rgba(90, 102, 90, 0.692);
}

/* PRODUTOS */
/* 
#back-produtos {
    background: linear-gradient(45deg, #631624, #7C1B2E, #A0223C, #C72B4E);
} */

body.categoria-perfumes {
    background: linear-gradient(180deg, #3a3b38, #868686, #DCDDDF, #e4dada);
    border-width: 150px 70px 0 70px;
    border-style: solid;
    border-color: black;
}


body.categoria-perfumes-para-casa {
    background: linear-gradient(45deg, #3B4233, #454C3C, #5A6252, #6C7464);
    border-width: 150px 70px 0 70px;
    border-style: solid;
    border-color: black;
}

body.categoria-cosmeticos {
    background: linear-gradient(to bottom, #623A5C, #7A5B78, #9B7A98, #B9A6B8);
    border-width: 150px 70px 0 70px;
    border-style: solid;
    border-color: black;
}

body.categoria-prazeres-da-alma {
    background: linear-gradient(to bottom, #623A5C, #7A5B78, #9B7A98, #B9A6B8);
    border-width: 150px 70px 0 70px;
    border-style: solid;
    border-color: black;
}

body.categoria-curas-da-alma {
    background: linear-gradient(to bottom, #623A5C, #7A5B78, #9B7A98, #B9A6B8);
    border-width: 150px 70px 0 70px;
    border-style: solid;
    border-color: black;
}

/* h2.tituloCategoria-perfumes {
    color: rgb(44, 38, 38) !important;
} */

.container-produtos {
    min-height: 100vh;
}

.container-produtos h1 {
    position: absolute;
    color: white;
    font-size: 28px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

.content-logo-produtos {
    position: absolute;
    /* top: 85px;
    right: 20px;  */
    top: 15px;
    right: 25px;
    transition: 0.5s;
    /* height: 120px; */
}
/* .content-logo-produto:hover {
    transform: translate(2px, -2px);
} */
.content-logo-produtos img{
    /* width: 120px;
    height: 120px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PRODUTO */

#back-produto {
    /* background: linear-gradient(45deg, #631624, #7C1B2E, #A0223C, #C72B4E); */
    border-width: 150px 70px 0 70px; /* Ordem: cima, direita, baixo, esquerda */
    border-style: solid;
    border-color: black;

    background: rgba(0, 0, 0, 0.4) url(../assets/img/fundofolhaProduto.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: darken;
    background-attachment: fixed;
}

.div-img-texto {
    display: flex;
    width: 100%;
    height: 480px;
}

.img-abaproduto {
    position: relative;
    background-size: cover;
    width: 65%;
    height: 480px;
    overflow: hidden; /* Impede que o conteúdo excedente apareça */
}

.texto-sobreposto {
    font-family: "Bellota", system-ui;
    /* position: absolute; Posiciona o texto sobre a imagem */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column; /* Permite que o texto se organize em coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    color: white;
    padding: 10px; /* Aumenta o padding para mais espaço */
    text-align: center; /* Centraliza o texto */
    overflow-wrap: break-word; /* Permite que o texto quebre */
    word-break: break-word; /* Quebra a linha em palavras longas */
    white-space: normal; /* Permite que o texto quebre */
    width: 40%; /* Garante que o texto ocupe toda a largura do contêiner */
    box-sizing: border-box; /* Inclui padding no cálculo da largura */
    max-height: 100%; /* Garante que o texto não exceda a altura do contêiner */
}

.texto-sobreposto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 30px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    box-sizing: border-box;
    height: 100%;
    font-size: 25px;
}

.texto-com-fundo-produto {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.container-produto {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.categoria-nav-produto ul {
    display: flex;
    /* flex-direction: column; */
    gap: 50px;
}

.categoria-nav-produto ul li {
    list-style-type: none;
    height: 150px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    background: -webkit-linear-gradient(98deg, #7c1b2e,#623a5c,#211018);
    background: linear-gradient(98deg, #7c1b2e,#623a5c#211018); 
}

.categoria-nav-produto ul li a{
    font-family: "Updock", cursive;
    font-weight: 100;
    text-decoration: none;
    color: white;
    font-size: 35px;
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilos para cada categoria */
.categoria-nav-produto ul .categoria-perfumes {
    background: #767971 !important;
}

.categoria-nav-produto ul .categoria-perfumes-para-casa {
    background: #626362 !important;
}

.categoria-nav-produto ul .categoria-cosmeticos {
    background: #896483 !important;
    display: none;
}

.categoria-nav-produto ul .categoria-prazeres-da-alma {
    background: #896483 !important;
}

.categoria-nav-produto ul .categoria-curas-da-alma {
       background: #135f58 !important
}

.container-produto {
    min-height: 100vh;
}

.container-produto h1 {
    font-family: "Updock", cursive;
    position: absolute;
    color: white;
    font-size: 100px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

.content-logo-produto {
    position: absolute;
    /* top: 85px;
    right: 20px;  */
    top: 15px;
    right: 25px;
    transition: 0.5s;
    /* height: 120px; */
}
/* .content-logo-produto:hover {
    transform: translate(2px, -2px);
} */
.content-logo-produto img{
    /* width: 120px;
    height: 120px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Produtos grid */
.product-grid {
    display: flex;
    gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    /* margin-top: 100px; */
    /* margin-left: 35px; */
    margin-bottom: 100px;
}

.product-grid h2 {
    font-family: "Updock", cursive;
    /* background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent; */
    text-transform: lowercase;
    position: absolute;
    color: white;
    font-size: 85px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

.product-grid h2::first-letter {
    text-transform: uppercase;
}

.product-grid p {
    color: #6c1c1c;
    font-size: 22px;
    margin-top: 100px;
}

.product-category {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}

.product-category h3 {
    font-family: "Updock", cursive;
    font-size: 40px;
    font-weight: 100;
}

.product-category h4 {
    font-size: 25px;
    margin-bottom: 10px;
}

.product-category button {
    height: 40px;
    width: 150px;
    cursor: pointer;
    background-color: #4f4647;
    color: white;
    font-size: 18px;
    border-radius: 3px;
    border: none;
}

.product {
    padding: 20px;
    width: 350px;
    text-align: center;
    /*height: 400px;*/
    height: 500px;
}

.product img {
    width: 100%;
    /*height: 80%;*/
    height: 100%;
    object-fit: cover;
    /* object-fit: cover; */
}

/* Estilo do Modal Produto*/
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    display: flex;
}

.modal-content-produto {
    background: linear-gradient(to bottom, #c5c3c3, #877f7f, #695467, #0c0c0c);
    margin: 0% auto;
    padding: 40px;
    width: 50%;
    /* max-width: 600px; */
    height: 600px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    overflow-y: auto;
}
.close-modal {
    position: absolute;
    top: -55px;
    right: 0px;
    cursor: pointer;
    font-size: 100px;
}

.modal-content-produto img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.modal-content-produto h3 {
    font-family: "Updock", cursive;
    font-weight: 100;
    font-size: 50px;
    background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent;
}

.modal-content-produto p {
    font-family: "Updock", cursive;
    font-weight: 100;
    word-wrap: break-word;
    text-align: center;
    font-size: 32px;
    background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent;
}

/* .modal a {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #500917;
    color: white;
    text-decoration: none;
    border-radius: 5px;
} */

.modal a {
    display: flex;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #4f4647;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Estiliza a barra de rolagem do modal */
.modal-content-produto::-webkit-scrollbar {
    width: 10px; /* Largura da barra de rolagem */
}

.modal-content-produto::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor de fundo do track da rolagem */
    border-radius: 10px;
}

.modal-content-produto::-webkit-scrollbar-thumb {
    background-color: #888; /* Cor da barra de rolagem */
    border-radius: 10px;
    border: 2px solid #f1f1f1; /* Espaço ao redor da barra */
}

.modal-content-produto::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cor da barra ao passar o mouse */
}

/* Para outros navegadores */
.modal-content-produto {
    scrollbar-width: thin; /* Firefox: largura da barra */
    scrollbar-color: #7C1B2E #888; /* Cor da barra e do track */
}

/* NOTICIAS */

.Section-instagram {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.Section-instagram div {
    max-height: 400px;
}

.Section-instagram div iframe {
    max-height: 380px;
}


#back-noticia {
    background: linear-gradient(to bottom, #623a3c80, #372d2d, #574255, #000000);
    border-width: 150px 70px 0 70px; /* Ordem: cima, direita, baixo, esquerda */
    border-style: solid;
    border-color: black;
}

.container-noticia {
    min-height: 100vh;
}

.section_feed{
    max-width: 1600px;
    margin: 0 auto;
}

.owl-item {
    width: 400px !important;
}

.section_feed .item img {
    height: 400px;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
}

.container-noticia h1 {
    font-family: "Updock", cursive;
    position: absolute;
    color: white;
    font-size: 100px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

.content-logo-noticia {
    position: absolute;
    /* top: 85px;
    right: 20px;  */
    top: 15px;
    right: 25px;
    transition: 0.5s;
    /* height: 120px; */
}

.owl-carousel {
    width: 100%;
    z-index: 1;
}

/*Section Instagram*/

.section_feed {
    padding: 85px 0;
    overflow: hidden;
}

.section-header {
    text-align: center;
    padding-bottom: 30px;
}

.section-header h2 {
    font-family: "Updock", cursive;
    font-size: 60px;
    color: white;
    font-weight: 100;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.section-header h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 80px;
    height: 3px;
    background: -webkit-linear-gradient(180deg, #060208,#271138,#3f1c5b);
    background: linear-gradient(180deg, #060208,#271138,#3f1c5b); 
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.section-header p {
    margin-bottom: 0;
    color: white;
    font-size: 18px;
}

.owl-stage {
    display: flex;
}


/* LOGIN */

#back-login {
    height: 100vh;
    background: -webkit-linear-gradient(180deg, #060208,#271138,#3f1c5b);
    background: linear-gradient(180deg, #060208,#271138,#3f1c5b); 
    display: flex;
    align-items: center;
}

.container-login {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    background: -webkit-linear-gradient(180deg, #ABAEA5,#ABAEA5,#BBBBBB,#DCDDDF,#868487);
    background: linear-gradient(180deg, #ABAEA5,#AEAEAE,#868487,#DCDDDF,#e4dada);
    margin: 0 auto;
    height: 250px;
    width: 400px;
    border-radius: 10px;
}

.container-form-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.container-login h1 {
    font-size: 45px;
    color: #7c1b2e;
}

.container-form-login input {
    height: 40px;
    width: 250px;
    padding-left: 10px;
    font-size: 19px;
    font-weight: 600;
    outline-color:  linear-gradient(60deg, #7c1b2e,#211018);
    border: none;
    border-radius: 3px;
}

.container-form-login button {
    height: 40px;
    width: 250px;
    cursor: pointer;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    color: white;
    font-size: 18px;
    border-radius: 3px;
}


.container-form-login button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.reset-password-link a {
    font-size: 20px;
}

/* RESET SENHA  */

#back-reset {
    height: 100vh;
    background: -webkit-linear-gradient(180deg, #060208,#271138,#3f1c5b);
    background: linear-gradient(180deg, #060208,#271138,#3f1c5b); 
    display: flex;
    align-items: center;
}

.container-reset-password{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    background: -webkit-linear-gradient(180deg, #ABAEA5,#ABAEA5,#BBBBBB,#DCDDDF,#868487);
    background: linear-gradient(180deg, #ABAEA5,#AEAEAE,#868487,#DCDDDF,#e4dada);
    margin: 0 auto;
    height: 250px;
    width: 400px;
    border-radius: 10px;
}

.container-form-reset {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.container-reset-password h1 {
    font-size: 45px;
    color: #7c1b2e;
}

.container-reset-password .message {
    font-size: 22px;
    color: #7c1b2e;
}

.container-reset-password a {
    font-size: 20px;
}

.container-form-reset input {
    height: 40px;
    width: 250px;
    padding-left: 10px;
    font-size: 19px;
    font-weight: 600;
    outline-color:  linear-gradient(60deg, #7c1b2e,#211018);
    border: none;
    border-radius: 3px;
}

.container-form-reset button {
    height: 40px;
    width: 250px;
    cursor: pointer;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    color: white;
    font-size: 18px;
    border-radius: 3px;
}


.container-form-reset button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

/* ADMIN */

.link-admins {
    width: 180px;
    height: 180px;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.link-admins a{
    text-decoration: none;
    color: white;
    background: linear-gradient(60deg, #7c1b2e, #211018);
    padding: 10px 10px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.link-admins a:hover{
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

#back-admin {
    color: white;
    background: -webkit-linear-gradient(180deg, #060208,#271138,#3f1c5b);
    background: linear-gradient(180deg, #060208,#271138,#3f1c5b); 
}

.container-admin h1 {
    display: flex;
    justify-content: center;
    font-size: 45px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.container-admin h2 {
    margin-left: 20px;
    font-size: 45px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.container-form-admin {
    display: flex;
    flex-direction: column;
    width: 550px;
    margin: 0 auto;
}

.container-form-admin .input-file {
    border: none;
    background-color: transparent !important;
    cursor: pointer;
}

.container-form-admin h2 {
    font-size: 25px;
    padding-bottom: 20px;
    margin: 0 auto;
}

.container-form-admin label {
    font-size: 20px;
    margin-bottom: 10px;
}

.container-form-admin input {
    height: 40px;
    border: none;
    background-color: #bbb8bd;
    padding-left: 10px;
    font-size: 23px;
    font-weight: 600;
    border-radius: 3px;
}

.container-form-admin input:focus {
    outline: 2px solid #7c1b2e;
}

.container-form-admin textarea {
    height: 80px;
    border: none;
    background-color: #bbb8bd;
    font-size: 23px;
    font-weight: 600;
    padding-left: 10px;
    border-radius: 3px;
}

.container-form-admin textarea:focus {
    outline: 2px solid #7c1b2e;
}

.container-form-admin select {
    height: 40px;
    width: 270px;
    border: none;
    background-color: #bbb8bd;
    font-size: 23px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
}

.container-form-admin select:focus {
    outline: 2px solid #7c1b2e;
}

.container-form-admin button {
    height: 40px;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: white;
    border-radius: 3px;
}

.container-form-admin button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.table-admin-container {
    width: 100%;
    overflow-x: auto; /* Habilita a rolagem horizontal */
}

.table-admin {
    width: 100%; /* Faz a tabela ocupar toda a largura disponível */
    border-collapse: collapse;
    white-space: nowrap; /* Evita quebras nas células */
}

.table-admin th, td { 
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word; /* Quebra o texto para caber na célula */
    word-break: break-word; /* Quebra o texto no meio de uma palavra se necessário */
    max-width: 150px; /* Limita a largura máxima das células para evitar esticar a tabela */
    font-size: 22px;
}

.table-admin th { 
    background-color: #0b091b; 
}
.table-admin td {
    overflow-wrap: break-word; /* Alternativa para garantir a quebra */
    white-space: normal; /* Permite que o texto ocupe várias linhas */
}

.table-admin button {
    height: 35px;
    width: 90px;
    cursor: pointer;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    color: white;
    font-size: 18px;
    border-radius: 3px;
    margin: 0 auto;
    border: none;
}

.table-admin button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.table-admin .botoes-table {
    text-align: center;
}


/* Estilos básicos para os modais */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    /* background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    text-align: center; */
    background-color: #43af42;
    margin: 0% auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
}

.modal-content button {
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    width: 80px;
    border: none;
    height: 30px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 3px;
}

.modal-content button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.modal-header {
    font-size: 35px;
    margin-bottom: 10px;
    color: #7C1B2E;
    font-weight: 600;
}

/* modal editar produto*/

.modal-content-edit {
    background: linear-gradient(180deg, #ABAEA5,#AEAEAE,#868487,#DCDDDF,#e4dada);
    margin: 0 auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
          
.modal-content-form-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-content-form-edit input{
    height: 40px;
    border: none;
    background-color: white;
    padding-left: 10px;
    font-size: 23px;
    font-weight: 600;
    border-radius: 3px;
}
.modal-content-form-edit input:focus {
    outline: 2px solid #7c1b2e;
}

.modal-content-form-edit textarea{
    height: 80px;
    border: none;
    background-color: white;
    font-size: 23px;
    font-weight: 600;
    padding-left: 10px;
    border-radius: 3px;
}
.modal-content-form-edit textarea:focus {
    outline: 2px solid #7c1b2e;
}

.modal-content-form-edit select{
    height: 40px;
    width: 270px;
    border: none;
    background-color: white;
    font-size: 23px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
}
.modal-content-form-edit select:focus {
    outline: 2px solid #7c1b2e;
}

.modal-content-form-edit button {
    height: 40px;
    width: 250px;
    cursor: pointer;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    color: white;
    font-size: 18px;
    border-radius: 3px;
    margin: 0 auto;
}

.modal-content-form-edit button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.modal-content-form-edit .input-file {
    border: none;
    background-color: transparent !important;
    cursor: pointer;
}

.modal-content-form-edit label {
    display: flex;
}

/* modal confirmaççao delete*/

.modal-content-delete {
    background-color: #ce2222;
    margin: 0% auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
}

.modal-content-delete button {
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    width: 80px;
    border: none;
    height: 30px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 3px;
}

.modal-content-delete button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.modal-content-delete .modal-header {
    font-size: 35px;
    margin-bottom: 10px;
    color: #4d212a;
    font-weight: 600;
}

/*ADDMIN NOVIDADES*/

#back-admin-novidades {
    color: white;
    background: -webkit-linear-gradient(180deg, #060208, #271138, #3f1c5b);
    background: linear-gradient(180deg, #060208, #271138, #3f1c5b);
}

.container-admin-novidades h1 {
    display: flex;
    justify-content: center;
    font-size: 45px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.container-admin-novidades h2 {
    margin-left: 20px;
    font-size: 45px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.container-form-admin-novidades {
    display: flex;
    flex-direction: column;
    width: 550px;
    margin: 0 auto;
    gap: 10px;
}

.container-form-admin-novidades h2 {
    font-size: 25px;
    padding-bottom: 20px;
    margin: 0 auto;
}

.container-form-admin-novidades label {
    font-size: 20px;
    margin-bottom: 10px;
}

.container-form-admin-novidades input {
    height: 40px;
    border: none;
    background-color: #bbb8bd;
    padding-left: 10px;
    font-size: 23px;
    font-weight: 600;
    border-radius: 3px;
}

.container-form-admin-novidades input:focus {
    outline: 2px solid #7c1b2e;
}

.container-form-admin-novidades textarea {
    height: 80px;
    border: none;
    background-color: #bbb8bd;
    font-size: 23px;
    font-weight: 600;
    padding-left: 10px;
    border-radius: 3px;
}

.container-form-admin-novidades textarea:focus {
    outline: 2px solid #7c1b2e;
}


.container-form-admin-novidades button {
    height: 40px;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: white;
    border-radius: 3px;
    margin-top: 10px;
}

.container-form-admin-novidades button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.table-admin-novidades {
    width: 100%; /* Faz a tabela ocupar toda a largura disponível */
    border-collapse: collapse;
    white-space: nowrap; /* Evita quebras nas células */
}

.table-admin-novidades th, td { 
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word; /* Quebra o texto para caber na célula */
    word-break: break-word; /* Quebra o texto no meio de uma palavra se necessário */
    max-width: 150px; /* Limita a largura máxima das células para evitar esticar a tabela */
    font-size: 22px;
}


.table-admin-novidades th { 
    background-color: #0b091b; 
}
.table-admin-novidades td {
    overflow-wrap: break-word; /* Alternativa para garantir a quebra */
    white-space: normal; /* Permite que o texto ocupe várias linhas */
    text-align: center;
}

.table-admin-novidades button {
    height: 35px;
    width: 90px;
    cursor: pointer;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    color: white;
    font-size: 18px;
    border-radius: 3px;
    margin: 0 auto;
    border: none;
}

.table-admin-novidades button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.table-admin-novidades .botoes-table {
    text-align: center;
}

/* modal confirmaççao delete*/

.modal-content-delete-novidade {
    background-color: #ce2222;
    margin: 0% auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
}

.modal-content-delete-novidade button {
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    width: 80px;
    border: none;
    height: 30px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 3px;
}

.modal-content-delete-novidade button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.modal-content-delete-novidade .modal-header {
    font-size: 35px;
    margin-bottom: 10px;
    color: #4d212a;
    font-weight: 600;
}

.modal-content-delete-novidade a{
    background: -webkit-linear-gradient(60deg, #7c1b2e, #211018);
    background: linear-gradient(60deg, #7c1b2e, #211018);
    width: 80px;
    border: none;
    height: 30px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 3px;
    text-decoration: none;
    padding: 5px 12px;
}

.div-btns-confirm-delet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


/* MODAL editar novidade*/

.modal-content-edit-novidade {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-content-edit-novidade input{
    height: 40px;
    border: none;
    background-color: white;
    padding-left: 10px;
    font-size: 23px;
    font-weight: 600;
    border-radius: 3px;
}
.modal-content-edit-novidade input:focus {
    outline: 2px solid #7c1b2e;
}

.modal-content-edit-novidade textarea{
    height: 80px;
    border: none;
    background-color: white;
    font-size: 23px;
    font-weight: 600;
    padding-left: 10px;
    border-radius: 3px;
}
.modal-content-edit-novidade textarea:focus {
    outline: 2px solid #7c1b2e;
}

.modal-content-edit-novidade button {
    height: 40px;
    width: 250px;
    cursor: pointer;
    background: -webkit-linear-gradient(60deg, #7c1b2e,#211018);
    background: linear-gradient(60deg, #7c1b2e,#211018);
    color: white;
    font-size: 18px;
    border-radius: 3px;
    margin: 0 auto;
}

.modal-content-edit-novidade button:hover {
    background: linear-gradient(45deg, #3b1e2c, #942c40, #3b1e2c);
}

.modal-content-edit-novidade label {
    display: flex;
}

.modal-content-form-edit-novidade {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Modal básico */
.modal-edit-novidade {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content-edit-novidade {
    background: linear-gradient(180deg, #ABAEA5,#AEAEAE,#868487,#DCDDDF,#e4dada);
    margin: 0 auto;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.close-edit-novidade {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-edit-novidade:hover,
.close-edit-novidade:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.button-edit-novidade {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

.button-edit-novidade:hover {
    background-color: #0056b3;
}

.modal-delete-novidade {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.close-delete-novidade {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-delete-novidade:hover,
.close-delete-novidade:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/*OFICINAS*/

#back-oficinas {
    background: linear-gradient(to bottom, #c5c3c3, #877f7f, #695467, #0c0c0c);
    border-width: 150px 70px 0 70px;
    border-style: solid;
    border-color: black;
}
.container-oficinas h2 {
    font-family: "Updock", cursive;
    position: absolute;
    color: white;
    font-size: 90px;
    font-weight: 100;
    top: 25px;
    left: 35px;
}

.container-oficinas {
    min-height: 100vh;
}

.content-logo-oficinas {
    position: absolute;
    /* top: 85px;
    right: 20px;  */
    top: 15px;
    right: 25px;
    transition: 0.5s;
}

.content-logo-oficinas img {
    /* width: 120px;
    height: 120px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oficina-grid {
    display: flex;
    gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
    /* flex-direction: column; */
    /* margin-top: 100px; */
    /* margin-left: 35px; */
    margin-bottom: 100px;
}

.oficina-category {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
}

.oficina-category h3 {
    font-family: "Updock", cursive;
    font-size: 40px;
    font-weight: 100;
}

.oficina {
    padding: 20px;
    width: 350px;
    text-align: center;
    height: 400px;
}

.oficina img {
    width: 100%;
    height: 80%;
    object-fit: cover;
}

.oficina-category button {
    height: 40px;
    width: 150px;
    cursor: pointer;
    background-color: #4f4647;
    color: white;
    font-size: 18px;
    border-radius: 3px;
    border: none;
}

.modal-content-oficina {
    scrollbar-width: thin;
    scrollbar-color: #7C1B2E #888;
}

.modal-content-oficina h3 {
    font-family: "Updock", cursive;
    font-weight: 100;
    font-size: 50px;
    background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent;
}

.modal-content-oficina p {
    font-family: "Updock", cursive;
    font-weight: 100;
    word-wrap: break-word;
    text-align: center;
    font-size: 32px;
    background-image: linear-gradient(to right, 
        #AEAEAE, 
        #97989A, 
        #FFFFFF, 
        #BBBBBB, 
        #DCDDDF, 
        #BBBBBB, 
        #FFFFFF);
    -webkit-background-clip: text;
    color: transparent;
}

.modal-content-oficina {
    background: linear-gradient(to bottom, #c5c3c3, #877f7f, #695467, #0c0c0c);
    margin: 0% auto;
    padding: 40px;
    width: 50%;
    /* max-width: 600px; */
    height: 600px;
    text-align: center;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    overflow-y: auto;
}

.modal-content-oficina img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.modal-content-oficina p {
    word-wrap: break-word;
    text-align: center;
}

/*ADMIN OFICINA*/

#back-admin-oficina {
    color: white;
    background: -webkit-linear-gradient(180deg, #060208, #271138, #3f1c5b);
    background: linear-gradient(180deg, #060208, #271138, #3f1c5b);
}

.container-admin-oficina h1 {
    display: flex;
    justify-content: center;
    font-size: 45px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.container-form-admin-oficina {
    display: flex;
    flex-direction: column;
    width: 550px;
    margin: 0 auto;
    gap: 10px;
}

.container-form-admin-oficina h2 {
    font-size: 25px;
    padding-bottom: 20px;
    margin: 0 auto;
}

.container-form-admin-oficina input {
    height: 40px;
    border: none;
    background-color: #bbb8bd;
    padding-left: 10px;
    font-size: 23px;
    font-weight: 600;
    border-radius: 3px;
}

.container-form-admin-oficina label {
    font-size: 20px;
    margin-bottom: 10px;
}

.container-form-admin-oficina textarea {
    height: 80px;
    border: none;
    background-color: #bbb8bd;
    font-size: 23px;
    font-weight: 600;
    padding-left: 10px;
    border-radius: 3px;
}

.container-form-admin-oficina .input-file {
    border: none;
    background-color: transparent !important;
    cursor: pointer;
}

.container-form-admin-oficina button {
    height: 40px;
    background: -webkit-linear-gradient(60deg, #7c1b2e, #211018);
    background: linear-gradient(60deg, #7c1b2e, #211018);
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: white;
    border-radius: 3px;
}

.container-admin-oficina h2 {
    margin-left: 20px;
    font-size: 45px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/*ADMIN IMAGENS*/

#modal-mensagem span {
    background: -webkit-linear-gradient(60deg, #7c1b2e, #211018);
    background: linear-gradient(60deg, #7c1b2e, #211018);
    width: 80px;
    border: none;
    height: 30px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    border-radius: 3px;
    padding: 6px 10px;
}

.container-admin-imagems .mensagemSucess {
    display: none;
}

.container-admin-imagems {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.container-admin-imagems h1 {
    display: flex;
    justify-content: center;
    font-size: 45px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.container-admin-imagems h2 {
    text-align: center;
    font-size: 30px;
    padding-bottom: 20px;
    margin: 0 auto;
}

.container-form-admin-imagems {
    display: flex;
    flex-direction: column;
    width: 550px;
    margin: 0 auto;
}

#back-admin-imagems {
    color: white;
    background: -webkit-linear-gradient(180deg, #060208, #271138, #3f1c5b);
    background: linear-gradient(180deg, #060208, #271138, #3f1c5b);
}

.container-form-admin-imagems button {
    height: 40px;
    background: -webkit-linear-gradient(60deg, #7c1b2e, #211018);
    background: linear-gradient(60deg, #7c1b2e, #211018);
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: white;
    border-radius: 3px;
}

.container-form-admin-imagems select {
    height: 40px;
    width: 270px;
    border: none;
    background-color: #bbb8bd;
    font-size: 23px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
}

.container-form-admin-imagems textarea {
    height: 130px;
    border: none;
    background-color: #bbb8bd;
    font-size: 23px;
    font-weight: 600;
    padding-left: 10px;
    border-radius: 3px;
}

.container-form-admin-imagems .input-file {
    border: none;
    background-color: transparent !important;
    cursor: pointer;
}

.container-form-admin-imagems input {
    height: 40px;
    border: none;
    background-color: #bbb8bd;
    padding-left: 10px;
    font-size: 23px;
    font-weight: 600;
    border-radius: 3px;
}