* {
	margin:0;
	padding:0;
}

@font-face {
  font-family: 'Roboto'; /* Choose a name to use later in your CSS */
  src: url('roboto/Roboto-Regular.ttf') format('truetype'),
  url('roboto/Roboto-Black.ttf') format('truetype');
  font-weight: normal; /* Define weight if needed, e.g., normal, bold */
  font-style: normal; /* Define style if needed, e.g., normal, italic */
}


h1 {
	color: #ffa3c2;
	font-size:35px;
	font-weight: 800;
	font-family: 'Roboto';
}

h3 {
	color: #3f2e16;
	font-family: 'Roboto';
}

p {
	color: #3f2e16;
	font-family: 'Roboto';
}

hr {
    height: 2.5px; /* Set the thickness of the line */
    background-color: #ffa3c2; /* Set the color using background-color */
    border: none; /* Remove the default border for a solid color */
}

[data-tab-content] {
	display: none;
}

.active[data-tab-content] {
	display: block;
}

body {
	padding:0;
	margin:0;
	background-image: url("images/bg4.png");
}


.tabs {
	display: flex;
	align-items: center; 
	justify-content: space-around;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #ffa3c2;
	font-size: 20px;
	font-weight: 700;
	font-family: 'Roboto';
	margin-bottom: 5px;
	border-bottom: 5px solid #f8faf2;

	position: sticky;
	top: 0;
	z-index: 1000;   /* keeps it above content */
	max-width:100%;
}


.tab {
	cursor: pointer;
	padding: 10px;
}

.tab.active {
	color: #f8faf2;
}

.tab:hover {
	color: #ffe268;
}

.tab-content {
	margin-left: 20px;
	margin-right: 20px;
}

.content-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.text-section {
	flex: 1;
}

.image-section img {
  width: min(35vw, 400px);
  height: auto;
}

.button {
  background-color: #ffe268;
  border: none;
  border-radius: 25px;
  color: #3f2e16;

  padding: 0.6em 1.2em;   /* better scaling */
  font-size: clamp(12px, 1.6vw, 16px);
  white-space: nowrap;   /* stops text wrapping */

  cursor: pointer;
}

.text-section .button {
	max-width: 100%;
}

.menu-container .box {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.menu-container .box .menu {
	display: flex;
	flex-direction: column;
	width: 35%;
}

.menu-container .box .menu img{
	width:100%;
	padding-bottom:15px;
}


/* gallery section styling */

.gallery-container .box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.gallery-container .box .dream {
	display: flex;
	flex-direction: column;
	width: 24%;
}

.gallery-container .box .dream img{
	width:100%;
	padding-bottom:15px;
}

/* Slideshow section */
.slideshow-section {
  padding: 50px 20px 100px;
}

/* Swiper container must be relative for pagination positioning */
.slider-container.swiper {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  position: relative;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  text-align: center;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swiper-slide .image-wrapper {
	position: relative;
	display:inline-block;
}

.user-image {
  width: 100%;
  max-width: 300px;     /* bigger images */
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.description {
  line-height: 25px;
  margin-bottom: 30px;
}

/* Pagination bullets below slides */
.swiper-pagination {
  position: absolute;
  bottom: -70px;        /* adjust distance from slides */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  margin: 0 5px;
  opacity: 1;
  background: #ffe268;
}

.swiper-pagination-bullet-active {
  background: #ffa3c2;
}

/* Navigation buttons */
.swiper-button-prev,
.swiper-button-next {
  color: #ffe268;
  width:20px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: #ffa3c2;
} 

/* REVIEWS */

.review-container .box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.review-container .box .rev {
	display: flex;
	flex-direction: column;
	width: 24%;
}

.review-container .box .rev img{
	width:100%;
	padding-bottom:15px;
}

/* contact section */
.contact-section {
	padding: 50px 0 100px;
}

.contact-section .contact-form {
	max-width: 50%;
}


.contact-section .section-content {
	display: flex;
	gap:48px;
	align-items: flex-start;
	justify-content:space-between;
}

.contact-section .contact-form .form-input {
	width: 100%;
	height: 50px;
	padding: 0 12px;
	outline: none;
	margin-bottom: 16px;
	border: 2px solid;
	border-color: #ffe268;
	border-radius: 10px;
}

.contact-section .contact-form textarea.form-input {
	height: 100px;
	padding: 12px;
	resize: vertical;
}

.submit-button {
	background-color: #ffe268 ;
	color:#3f2e16;
	padding: 10px 26px;
	border-radius: 10px;
	border: 1px solid;
	border-color: #ffe268;
	border-width: 3px;
}

.submit-button:hover {
	background: transparent;
	color: #3f2e16;
	border-width: 3px;
}

@media screen and (max-width: 1024px) {
	.menu-section .menu-list {
		gap: 60px;
	}
	.menu-section .menu-list .menu-item {
		flex: 0 1 30%;;
	}
	.user-image { max-width: 220px; }
	.swiper-pagination {bottom: -40px}
}

@media screen and (max-width: 900px) {

	.menu-section .menu-list {
		gap: 60px;
	}

	.menu-section .menu-list .menu-item {
		flex: 0 1 30%;;
	}

	.menu-section .menu-list .menu-item .menu-image {
		max-width: 200px;
	}

	.contact-section .contact-form {
		max-width:100%;
	}

	.contact-section .section-content {
		align-items:center;
		flex-direction: column-reverse;
	}

	.contact-section .section-content,
	.content-container,
	.content-container .image-section{
		align-items:center;
		flex-direction: column-reverse;
		justify-content: center;
		display: flex;
	}

	.content-container .image-section img {
		width: 55%;
	}

}

@media screen and (max-width: 640px) {
	.menu-section .menu-list {
		gap:60px;
	}
	.menu-section .menu-list .menu-item {
		width: 100%;
	}
	.user-image { max-width: 250px; }
	.swiper-pagination {bottom: -30px;}
}

@media (max-width: 768px) {
    .review-container .box {
        flex-wrap: wrap;            /* allow wrapping into rows */
        flex-direction: row;        /* make sure it's a row */
        justify-content: center;    /* center the 2 columns */
    }

    .review-container .box .rev {
        width: 48%;                 /* 2 columns */
        max-width: 400px;           /* optional */
        margin-bottom: 20px;
    }

    .review-container .box .rev img {
        width: 100%;
        height: auto;
    }

   .gallery-container .box {
       flex-wrap: wrap;            /* allow wrapping into rows */
       flex-direction: row;        /* make sure it's a row */
       justify-content: center; 
       gap: 10px;   /* center the 2 columns */
   }

   .gallery-container .box .dream {
       width: 48%;                 /* 2 columns */
       margin-bottom: 20px;
   }

   .gallery-container .box .dream img {
       width: 100%;
       height: auto;
   }

   .menu-container .box {
       flex-wrap: wrap;            /* allow wrapping into rows */
       flex-direction: row;        /* make sure it's a row */
       justify-content: center; 
       gap: 10px;   /* center the 2 columns */
   }

   .menu-container .box .menu {
       width: 80%;                 /* 2 columns */
       margin-bottom: 20px;
   }

   .menu-container .box .menu img {
       width: 100%;
       height: auto;
   }

   h1 {
   	font-size: 25px;
   	/*text-align:center;*/
   }
   h3 {
   	font-size: 15px;
   	/*text-align:center;*/
   }
   p {
   	font-size: 15px;
   	text-align:justify;
   }
}




/* Extra shrinking on smaller screens */
@media (max-width: 600px) {
    .tabs .tab {
        font-size: 16px;
        padding: 6px 10px;
        align-items: center;

        p {
        	text-align:justify;
        }
    }

    .tabs .tab-logo img {
        display:none;   /* smaller logo */
    }
}

@media (max-width: 450px) {
    .tabs {
        gap: 10px;
    }

    .tabs .tab {
        font-size: 14px;
        padding: 5px 8px;
    }

    .tabs .tab-logo img {
        max-width: 90px;    /* even smaller logo */
    }
}