@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Gotu&family=Great+Vibes&display=swap');

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

body {
overflow-x: hidden;
font-size: 1rem; 
}

/* === DESKTOP > 1024px === */

/* NAVIGATION */
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: transparent;
z-index: 100;
transition: background-color 0.5s ease;
}

.main-nav--colored {
background-color: rgba(233, 185, 176, 0.9);
height: auto;
}

.main-nav__title {
display: flex;
align-items: center;
height: 90px;
background-color: white;
}

.main-nav__logo {
display: flex;
justify-content: center;
width: 100%;
font-family: 'Great Vibes', cursive;
font-size: 45px;
color: #c4985c;
}
/* MENU */
.main-nav__menu {
height: 90px;
border-bottom: 1px solid white;
margin: 0 3%;
}

.menu__links {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.menu__item {
margin: 0 1%;
font-family: 'Gotu', sans-serif;
font-weight: bold;
transition: 0.5s;
}

.menu__item a {
text-transform: uppercase;
text-decoration: none;
color: white;
font-size: 1rem;
}

.menu__item--active {
padding: 5px 10px 5px;
background-color: #c4985c;
border-radius: 2px;
}

.hamburger {
display: none; 
font-size: 2.5rem;
cursor: pointer;
color: #c4985c;
}

/* SECTION */
.section {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
padding-top: 5px;
}

/* HOME SECTION */
.section--home {
padding-top: 0;
}

.slider {
width: 100vw;
height: 90vh;
margin: 10.5vh 2vw 0vh 2vw;
background-image: url(imges/foto1.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
animation-name: slider-anim;
animation-duration: 17s;
animation-iteration-count: infinite;
background-color: #e9b9b0;
}

@keyframes slider-anim {
0% {
background-image: url(imges/foto1.webp);
background-position: center top;
}
33% {
background-image: url(imges/foto2.webp);
background-position: center top;
}
64% {
background-image: url(imges/foto3.webp);
background-position: center top;
}
100% {
background-image: url(imges/foto1.webp);
background-position: center top;
}
}

/* SECTION TITLE */
.section__title {
font-family: 'Cinzel Decorative', serif;
font-size: 25px;
color: #c4985c;
text-align: center;
margin-bottom: 15px;
}

.section__content {
width: 60vw;
text-align: justify;
font-size: 1.2rem; 
}

.adornment {
width: 150px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.adornment img {
width: 100%;
height: auto; 
object-fit: contain;
}

/* SERVICES SECTION */
.service-container {
display: flex;
flex-wrap: wrap;
width: 90vw;
justify-content: center;
}

.service-tile {
width: 35vw;
margin: 1vw;
padding: 2vw 2vw 3vw 4vw;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
position: relative;
}

.service-tile__title {
font-family: 'Cinzel Decorative', serif;
font-size: 21px; 
text-align: center;
}

.service-tile__content ul {
list-style: none; 
padding-left: 0; 
margin-bottom: 2px; 
}
.service-tile__content li {
margin-bottom: 0.5rem; 
}

.service-tile__separator {
width: 7vw;
height: 0.4vh;
background-color: #c4985c;
margin: 0.5vw auto 1vw auto;
}

.service-tile__arrow {
display: flex;
justify-content: end;
width: 100%;
margin-right: 5px;
}

.service-tile__arrow img {
width: 24px;
margin: 2px;
transform: translateX(0);
transition: transform 0.3s ease;
}

.service-tile:hover .service-tile__arrow img {
transform: translateX(0.5vw);
}

/* GALLERY SECTION */
.gallery-section__background {
height: auto;
}
.gallery-container {
width: 85vw;
}

.gallery {
list-style-type: none;
padding: 1vw;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5vw;
justify-items: center;
}

.gallery__item {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid transparent;
}

.gallery__item:hover {
transform: scale(1.03);
box-shadow: 0 0 10px 10px rgba(196, 152, 92, 0.7); /* fluffy golden shadow */
border: 0.5px solid rgba(209, 149, 65, 0.5);
}

.gallery__item:hover img {
transform: scale(1.03);
}

/* POPUP */
.popup {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: calc(100% - 7vh);
background-color: rgba(233, 185, 176, 0.4);
backdrop-filter: blur(6px);
z-index: 50;
top: 7vh;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup:not(.hidden) {
opacity: 1;
visibility: visible;
}

.popup__img {
max-width: 90%;
max-height: 90vh;
border: 4px solid white;
box-shadow: 0 0 0 5px rgba(196, 152, 92, 0.8);
object-fit: cover;
}

.popup__close {
position: absolute;
top: 150px;
right: 25%;
transform: translateX(50%);
font-size: 25px;
font-weight: bold;
color: white;
cursor: pointer;
background-color: #e9b9b0;
border-radius: 4px;
border: 2px solid white;
width: 40px;
height: 40px;
text-align: center;
line-height: 15px;
transition: background-color 0.3s ease;
}

.popup__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
border: 2px solid white;
font-size: 30px;
font-weight: bold;
width: 50px;
height: 50px;
text-align: center;
line-height: 25px;
color: white;
cursor: pointer;
background-color: #e9b9b0;
transition: background-color 0.3s ease;
}

.popup__arrow--left {
left: 20%;
}
.popup__arrow--right {
right: 20%;
}
.popup__arrow:hover,
.popup__close:hover {
background-color: #c4985c;
}

/* CONTACT */
.contact-container {
display: flex;
width: 90vw;
justify-content: space-around;
padding-bottom: 5vw;
}

.contact-container__left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Great Vibes', cursive;
font-size: 60px;
color: #c4985c;
width: 40%;
margin-right: 0;
}

.contact-container__greeting {
font-size: 1.5rem;
font-family: 'Cinzel Decorative', serif;
margin-bottom: 2vh;
}

.contact-container__details {
text-align: center;
font-size: 1.5rem;
font-family: 'Cinzel Decorative', serif;
color: #c4985c;
}

.contact-container__right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40%;
}

.contact-form {
display: flex;
flex-direction: column;
width: 100%;
}

.contact-form label {
font-family: 'Cinzel Decorative', serif;
margin-top: 0.5vw;
font-size: 1.2rem;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 1vw;
margin-bottom: 0.5vw;
border-radius: 5px;
border: 1px solid #c4985c;
outline: none;
transition: outline 0.3s ease;
font-size: 1.1rem;}

.contact-form input {
height: 3vh;
}
.contact-form textarea {
height: 15vw;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
outline: 2px solid #c4985c;
}

.contact-form__button {
display: flex;
justify-content: center;
width: 10vw;
align-self: flex-start;
padding: 1vh;
background-color: #c4985c;
color: white;
border: none;
border-radius: 5px;
margin-top: 1vw;
cursor: pointer;
transition: background-color 0.3s ease;
}

.contact-form__button:hover {
background-color: #a87d46;
}

/* FOOTER */
.footer {
display: flex;
justify-content: space-around;
background-color: rgba(233, 185, 176, 0.8);
color: white;
padding: 1vw 5vw;
align-items: flex-start;
}

.footer__title {
font-family: 'Cinzel Decorative', serif;
font-size: 1.3rem; 
color: #c4985c;
margin-bottom: 0.5rem;
}
.footer__address p,
.footer__email p,
.footer__phone p {
font-size: 1.2rem;
line-height: 1.5rem;
color: white; 
}

.footer__icons {
display: flex;
margin-top: 0.2rem;
}

.footer__icons a {
margin-right: 1vw;
font-size: 3vh;
color: white;
}

/* AUTHOR INFO */
.author-info {
display: flex;
justify-content: space-between;
margin: 3vw 5vw 2vw 5vw;
border-top: 1px solid rgb(196, 152, 92);
}

.author-info a {
color: #e9b9b0;
text-decoration: none;
font-size: 1.2rem; 
}

/* SCROLL TO TOP */
.scroll-to-top {
position: fixed;
width: 200px;
height: 200px;
bottom: 50px;
right: 0;
z-index: 100;
}

.scroll-to-top__button {
position: absolute;
display: flex;
width: 50px;
height: 50px;
justify-content: center;
align-items: center;
box-shadow: 0 0 0 4px white, 0 0 0px 5px #c4985c;
border-radius: 50%;
background-color: rgba(233, 185, 176, 0.9);
right: 30px;
cursor: pointer;
border: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0.5s;
}

.scroll-to-top.visible .scroll-to-top__button {
opacity: 1;
visibility: visible;
}

.scroll-to-top__button img {
width: 25px;
height: 25px;
padding: 0;
transform: translateY(-5px) rotate(270deg);
animation: moveUpDown 1.5s infinite;
object-fit: cover;
}

@keyframes moveUpDown {
0% {
transform: translateY(-5px) rotate(270deg);
}
50% {
transform: translateY(5px) rotate(270deg);
}
100% {
transform: translateY(-5px) rotate(270deg);
}
}

/* === MEDIA QUERIES === */

/* LARGE TABLET (max-width: 1024px) */
@media (max-width: 1024px) {
.section {
margin-bottom: 1vw;
}
.gallery {
grid-template-columns: repeat(3, 1fr);
gap: 2vw;
}
.popup__close {
top: 100px;
}
.popup__arrow--left {
left: 5%;
}
.popup__arrow--right {
right: 5%;
}
}
@media (max-width:900px){
.service-container {
flex-direction: column;
align-items: center;
width: 100%;
}
.service-tile {
width: 80%; 
margin: 10px 0; 
padding: 15px;
}
}
/* SMALL TABLET / LARGE PHONE (max-width: 768px) */
@media (max-width: 768px) {
.main-nav__title {
position: sticky;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: auto;
padding: 0.5rem 0;
top: 0;
}

.main-nav__logo {
font-size: 30px;
margin-bottom: 0.5rem;
}

/* Hamburger centered below the logo */
.hamburger {
display: block;
font-size: 2.5rem;
cursor: pointer;
color: #c4985c;
margin-bottom: 0.5rem; 
}

/* Hiding the normal menu */
.main-nav__menu {
display: none;
flex-direction: column;
width: 100%;
background-color: rgba(233, 185, 176, 0.9); 
top: calc(100%); 
left: 0;
z-index: 99; 
margin: 0;
padding: 1rem 0;
height: auto;
min-height: 40vh; 
}

/* Menu visible after clicking the hamburger */
.main-nav__menu.active {
display: flex;
}

.menu__links {
flex-direction: column;
align-items: center;
}

.menu__item {
margin: 10px 0;
}

.menu__item a {
font-size: 17px;
}

/* Other mobile styles remain unchanged */
.slider {
margin-top: 12vh;
background-color: #e9b9b0;
}
.section {
margin-bottom: 12vw;
}
.service-tile {
width: 80%; 
margin: 10px 0; 
padding: 15px;
}
.section__content {
width: 100%;
font-size: 16px;
margin-bottom: 20px;
text-align: justify;
}
.section--about {
padding: 0 20px 20px 20px;
text-align: center;
}
.gallery {
grid-template-columns: repeat(2, 1fr);
gap: 3vw;
padding: 0;
}
.contact-container {
flex-direction: column;
width: 90vw;
}
.contact-container__left {
width: 100%;
margin-bottom: 5vw;
}
.contact-container__right {
width: 100%;
}
.contact-form__button {
width: 30vw;
}
.footer {
flex-direction: column;
padding: 5vw;
text-align: center;
}
.footer > div {
width: 100%;
margin-bottom: 5vw;
}
.footer__icons {
justify-content: center;
}
.scroll-to-top__button {
right: 20px;
}
}

/* SMALL PHONE (max-width: 564px) */
@media (max-width: 564px) {
/* Service tiles in column */
.service-container {
flex-direction: column;
align-items: center;
width: 100%;
}

.service-tile {
width: 90%; 
margin: 10px 0; 
padding: 15px;
}

.service-tile__title {
font-size: 18px;
margin-bottom: 10px;
}

.service-tile__separator {
width: 50%; 
margin: 10px auto;
}

.service-tile__content {
font-size: 14px;
line-height: 1.5;
}

.service-tile__arrow {
bottom: 10px;
right: 10px;
}

.service-tile__arrow img {
width: 24px;
}
}

/* SMALL PHONE (max-width: 480px) */
@media (max-width: 480px) {
.main-nav {
height: auto;
}
.gallery {
grid-template-columns: 1fr;
gap: 4vw;
}
.contact-form__button {
width: 40vw;
}
.popup__close {
top: 50px;
right: 50px;
transform: none;
}
.popup__arrow--left {
left: 10px;
}
.popup__arrow--right {
right: 10px;
}

/* Tile container in one column */
.service-container {
flex-direction: column;
align-items: center;
width: 90vw;
}

/* Single tile - full container width */
.service-tile {
width: 90%;
margin: 1vw 0;
padding: 2vw;
}

/* Tile header */
.service-tile__title {
font-size: 18px;
text-align: center;
margin-bottom: 1vh; 
}

/* Separator */
.service-tile__separator {
width: 20%;
margin: 0.5vw auto 1vw auto;
}

/* Tile content */
.service-tile__content {
font-size: 1rem;
line-height: 1.5rem;
text-align: left;
margin-top: 0.5vh;
}

/* Arrow in tile */
.service-tile__arrow {
bottom: 1vw;
right: 1vw;
}

.service-tile__arrow img {
width: 24px;
}
.section--about {
padding: 5vw 5vw 5vw 5vw; 
}

.section__title {
font-size: 24px; 
}

.section__content {
width: 100%; 
font-size: 1rem; 
margin-bottom: 2vh; 
text-align: justify;
}
}