/* --- BASE STYLES --- */
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: 'Segoe UI', 'Montserrat', Arial, sans-serif;
background: linear-gradient(135deg, #f8fafc 0%, #fbeee6 100%);
color: #2d2d2d;
}
img {
max-width: 100%;
height: auto;
display: block;
}
header {
background: #fff;
box-shadow: 0 2px 12px #e7d7c7;
padding: 1.5em 0;
text-align: center;
}
header img {
height: 12vw;
max-height: 152px;
min-height: 64px;
vertical-align: middle;
margin-right: 2vw;
}
header h1 {
display: inline-block;
vertical-align: middle;
margin: 0;
font-size: 2.5em;
letter-spacing: 2px;
color: #e07a5f;
font-family: 'Pacifico', cursive, sans-serif;
}
header nav {
background: rgba(255, 245, 235, 0.95);
box-shadow: 0 2px 12px #e07a5f22;
border-radius: 0 0 18px 18px;
padding: 0.7em 1.5em;
display: flex;
justify-content: center;
gap: 2em;
margin-bottom: 1em;
}
header nav a {
color: #e07a5f;
font-weight: 600;
text-decoration: none;
font-size: 1.1em;
padding: 0.3em 0.7em;
border-radius: 8px;
transition: background 0.2s, color 0.2s;
}
header nav a:hover,
header nav a:focus {
background: #e07a5f;
color: #fff;
}
footer {
background: #fbeee6;
text-align: center;
padding: 1.2em 0 0.7em 0;
color: #888;
font-size: 1em;
margin-top: 2em;
border-top: 1px solid #f9c46b;
}

/* --- BOUQUET CARDS --- */
.bouquet-card {
background: #fbeee6;
border-radius: 16px;
box-shadow: 0 2px 12px #e7d7c7;
padding: 1.2em 1em;
min-width: 220px;
max-width: 240px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
transition: transform 0.2s, box-shadow 0.2s;
margin: 0 0.5em;
position: relative;
}
.bouquet-card:hover {
transform: translateY(-12px) scale(1.05);
z-index: 2;
box-shadow: 0 8px 24px #e07a5f33;
}
.bouquet-card img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 12px;
margin-bottom: 0.8em;
background: #fff;
display: block;
max-height: 180px;
}
.bouquet-card h4,
.bouquet-card p,
.bouquet-card .price {
width: 100%;
text-align: center;
margin: 0.2em 0;
overflow-wrap: break-word;
}


/* --- MOBILE FRIENDLY CARDS --- */
@media (max-width: 700px) {
.bouquet-carousel {
overflow-x: auto;
max-width: 100vw;
padding: 0.5em 0;
display: flex;
align-items: stretch;
}
.bouquets {
display: flex;
flex-wrap: nowrap;
gap: 1em;
width: 100vw;
min-width: unset;
max-width: 100vw;
align-items: stretch;
}
.bouquet-card {
min-width: 240px;
max-width: 80vw;
width: 80vw;
margin: 0.7em 0.2em;
padding: 1em 0.7em 1.2em 0.7em;
font-size: 1em;
box-shadow: 0 2px 8px #e7d7c7;
box-sizing: border-box;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: auto;
}
.bouquet-card img {
width: 100%;
max-width: 100%;
height: 110px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 0.7em;
display: block;
}
.bouquet-card h4 {
font-size: 1.15em;
margin: 0.3em 0 0.2em 0;
color: #3d405b;
text-align: center;
word-break: break-word;
white-space: normal;
}
.bouquet-card p {
color: #555;
font-size: 0.98em;
margin-bottom: 0.5em;
text-align: center;
word-break: break-word;
white-space: normal;
}
.bouquet-card .price {
color: #e07a5f;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
}

/* 2. Prevent text from wrapping vertically in a narrow column */
@media (max-width: 700px) {
.bouquet-card h4,
.bouquet-card p,
.bouquet-card .price {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
}

/* 3. Make carousel arrows smaller and less intrusive on mobile */
@media (max-width: 700px) {
.carousel-arrow {
width: 36px;
height: 36px;
font-size: 1.3em;
margin: 0 0.2em;
top: 45%;
background: #fff;
border: 2px solid #e07a5f;
color: #e07a5f;
box-shadow: 0 2px 8px #e07a5f33;
z-index: 2;
}
}

/* 4. Add horizontal padding to the carousel so first/last card isn't cut off */
@media (max-width: 700px) {
.bouquet-carousel {
padding-left: 1vw;
padding-right: 1vw;
}
}

/* 5. Optional: Add a subtle background to the carousel area for separation */
@media (max-width: 700px) {
.bouquet-carousel-wrapper {
background: linear-gradient(90deg, #fff8f3 60%, #fbeee6 100%);
border-radius: 18px;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-bottom: 1em;
}
}

/* 6. On very small screens, make cards fill most of the width */
@media (max-width: 500px) {
.bouquet-card {
min-width: 90vw;
max-width: 98vw;
width: 98vw;
padding: 0.7em 0.2em;
font-size: 0.98em;
}
.bouquet-card img {
height: 90px;
max-height: 100px;
}
}

/* 7. Hide the ugly scrollbars on mobile */
.bouquet-carousel::-webkit-scrollbar,
.bouquets::-webkit-scrollbar {
display: none;
}
.bouquet-carousel,
.bouquets {
-ms-overflow-style: none;
scrollbar-width: none;
}

/* --- END FIX --- */

/* --- HERO SECTION --- */
.hero-text {
max-width: 420px;
margin-right: 2em;
flex: 1 1 320px;
}
.hero-text p {
font-size: 1.15em;
color: #555;
margin-bottom: 1.5em;
}
.hero-text button {
background: linear-gradient(90deg, #e07a5f 0%, #f9c46b 100%);
color: #fff;
border: none;
border-radius: 24px;
padding: 0.8em 2em;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
box-shadow: 0 2px 8px #e7d7c7;
transition: background 0.2s, transform 0.2s;
}
.hero-text button:hover {
background: linear-gradient(90deg, #f9c46b 0%, #e07a5f 100%);
transform: scale(1.05);
}
.hero-img {
max-width: 320px;
width: 40vw;
min-width: 220px;
margin-top: 1em;
flex: 1 1 220px;
}
.hero-img img {
width: 100%;
border-radius: 18px;
box-shadow: 0 4px 24px #e7d7c7;
}

/* --- FEATURED SECTION --- */
.featured {
background: #fff;
padding: 2.5em 1em;
text-align: center;
}
.featured h3 {
font-size: 1.7em;
color: #e07a5f;
margin-bottom: 1.2em;
letter-spacing: 1px;
}
.bouquets {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2em;
}
.bouquet-card {
background: #fbeee6;
border-radius: 16px;
box-shadow: 0 2px 12px #e7d7c7;
padding: 1.2em 1em;
width: 100%;
max-width: 220px;
min-width: 180px;
transition: transform 0.2s;
flex: 1 1 180px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.bouquet-card:hover {
transform: translateY(-6px) scale(1.03);
}
.bouquet-card img {
width: 100%;
object-fit: cover;
border-radius: 12px;
display: block;
}
.bouquet-card h4 {
margin: 0.3em 0 0.2em 0;
color: #3d405b;
font-size: 1.15em;
}
.bouquet-card p {
color: #555;
font-size: 0.98em;
margin-bottom: 0.5em;
}
.bouquet-card .price {
color: #e07a5f;
font-weight: bold;
font-size: 1.1em;
}

/* --- Carousel Arrows --- */
/* Hide arrows by default */
.carousel-arrow {
background: #fff;
border: 2px solid #e07a5f;
color: #e07a5f;
border-radius: 50%;
width: 44px;
height: 44px;
font-size: 2em;
cursor: pointer;
margin: 0 1em;
box-shadow: 0 2px 8px #e07a5f33;
display: none;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.carousel-arrow:hover,
.carousel-arrow:focus {
background: #e07a5f;
color: #fff;
border-color: #f9c46b;
box-shadow: 0 4px 16px #e07a5f33;
}

/* Show arrows only on smaller screens */
@media (max-width: 1498px) {
.carousel-arrow {
display: flex;
}
}

/* --- Responsive --- */
@media (max-width: 900px) {
.bouquet-card {
min-width: 160px;
max-width: 180px;
padding: 1em 0.5em;
}
.bouquet-card img {
max-height: 120px;
margin-bottom: 0.6em;
}
.carousel-arrow {
width: 38px;
height: 38px;
font-size: 1.5em;
margin: 0 0.5em;
}
}
@media (max-width: 600px) {
.bouquet-card {
min-width: 120px;
max-width: 95vw;
margin: 0.7em 0.2em;
padding: 0.7em 0.3em;
font-size: 1em;
box-shadow: 0 2px 8px #e7d7c7;
}
.bouquet-card img {
max-height: 80px;
width: auto;
margin-bottom: 0.5em;
}
.bouquets {
gap: 0.5em;
}

}

/* Hide scrollbar for a cleaner look */
.bouquet-carousel::-webkit-scrollbar,
.bouquets::-webkit-scrollbar {
display: none;
}
.bouquet-carousel,
.bouquets {
-ms-overflow-style: none;
scrollbar-width: none;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
.featured {
padding: 2em 0.5em;
}
}
@media (max-width: 900px) {
.hero {
flex-direction: column;
text-align: center;
}
.hero-text {
margin-right: 0;
margin-bottom: 2em;
}
header img {
height: 96px;
margin-right: 12px;
}
header h1 {
font-size: 2em;
}
.hero-img {
width: 100%;
max-width: 320px;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.featured {
padding: 1em 0.2em;
}
.bouquet-card {
max-width: 100%;
margin: 0.5em 0;
}
header img {
height: 64px;
margin-right: 8px;
}
nav a {
margin: 0 0.5em;
font-size: 1em;
}
}

@media (max-width: 700px) {
.services-cards {
flex-direction: column;
align-items: center;
gap: 1.2em;
}
.service-card {
width: 92vw;
max-width: 340px;
min-width: 0;
margin: 0.7em auto;
padding: 1em 0.5em;
box-sizing: border-box;
}
.service-card .service-img {
width: 100%;
aspect-ratio: 4/3;
height: 110px;
object-fit: cover;
border-radius: 0 0 18px 18px;
margin-bottom: 1.2em;
display: block;
background: #fff;
}
}
@media (max-width: 600px) {
.service-card {
min-width: 0 !important;
max-width: 98vw !important;
padding: 0.7em 0.2em !important;
}
.service-img {
min-height: 100px !important;
max-height: 180px !important;
}
}

/* --- LOGO ABOVE TITLE --- */
header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2em 0 1em 0;
}

.logo-title {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 0.5em;
}

.site-logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.3em;
width: 120px;
max-width: 95vw;
height: auto;
}

header h1 {
margin: 0;
font-size: 2.2em;
color: #e07a5f;
text-align: center;
font-family: 'Pacifico', cursive, sans-serif;
}

/* Responsive adjustments */
@media (max-width: 600px) {
.site-logo {
width: 70px;
margin-bottom: 0.2em;
}
header h1 {
font-size: 1.7em;
}
}

/* Remove any margin or float on header img if present */
header img {
margin: 0 auto 0.3em auto !important;
display: block !important;
float: none !important;
}

/* --- BEST SELLERS BLOCK --- */
.best-sellers-block {
max-width: 1100px;
margin: 3em auto 2em auto;
padding: 0 1em;
background: linear-gradient(120deg, #fff8f3 60%, #fbeee6 100%);
}
.best-sellers-content {
display: flex;
align-items: center;
background: #fff8f3;
border-radius: 24px;
box-shadow: 0 8px 32px #e07a5f22;
padding: 2em 1.5em;
gap: 2em;
}
.best-sellers-img {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 2px 12px #e07a5f22;
}
.best-sellers-text {
flex: 1;
text-align: left;
}
.best-sellers-text h2 {
font-family: 'Pacifico', cursive, sans-serif;
color: #e07a5f;
font-size: 2em;
margin-bottom: 0.5em;
}
.best-sellers-text p {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.15em;
color: #3d405b;
margin-bottom: 1.2em;
}
.best-sellers-btn {
display: inline-block;
background: linear-gradient(90deg, #e07a5f 0%, #f9c46b 100%);
color: #fff;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
border: none;
border-radius: 24px;
padding: 0.8em 2em;
font-size: 1.1em;
text-decoration: none;
box-shadow: 0 2px 8px #e7d7c7;
transition: background 0.2s, transform 0.2s;
}
.best-sellers-btn:hover {
background: linear-gradient(90deg, #f9c46b 0%, #e07a5f 100%);
transform: scale(1.05);
}

/* --- AFTER SERVICES BLOCK --- */
.after-services-block {
max-width: 1100px;
margin: 2em auto 3em auto;
padding: 0 1em;
text-align: center;
background: linear-gradient(120deg, #fff8f3 60%, #fbeee6 100%);
}
.after-services-content {
background: #fff8f3;
border-radius: 24px;
box-shadow: 0 8px 32px #e07a5f22;
padding: 2em 1.5em;
}
.after-services-content h2 {
font-family: 'Pacifico', cursive, sans-serif;
color: #e07a5f;
font-size: 2em;
margin-bottom: 0.5em;
}
.after-services-content p {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.15em;
color: #3d405b;
margin-bottom: 1.2em;
}
.after-services-btn {
display: inline-block;
background: linear-gradient(90deg, #e07a5f 0%, #f9c46b 100%);
color: #fff;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
border: none;
border-radius: 24px;
padding: 0.8em 2em;
font-size: 1.1em;
text-decoration: none;
box-shadow: 0 2px 8px #e7d7c7;
transition: background 0.2s, transform 0.2s;
}
.after-services-btn:hover {
background: linear-gradient(90deg, #f9c46b 0%, #e07a5f 100%);
transform: scale(1.05);
}

/* --- FRESH BOUQUETS BLOCK --- */
.fresh-bouquets-block {
max-width: 1100px;
margin: 3em auto 2em auto;
padding: 0 1em;
background: linear-gradient(120deg, #fff8f3 60%, #fbeee6 100%);
}
.fresh-bouquets-content {
display: flex;
align-items: center;
background: #fff8f3;
border-radius: 24px;
box-shadow: 0 8px 32px #e07a5f22;
padding: 2em 1.5em;
gap: 2em;
}
.fresh-bouquets-img {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 2px 12px #e07a5f22;
}
.fresh-bouquets-text {
flex: 1;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0.5em 0.5em 0.5em 0;
}
.fresh-bouquets-text h2 {
font-family: 'Pacifico', cursive, sans-serif;
color: #e07a5f;
font-size: 2em;
margin-bottom: 0.5em;
}
.fresh-bouquets-text p {
font-size: 1.18em;
line-height: 1.7;
margin-bottom: 0;
color: #3d405b;
}
.fresh-bouquets-btn {
display: inline-block;
background: linear-gradient(90deg, #e07a5f 0%, #f9c46b 100%);
color: #fff;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
border: none;
border-radius: 24px;
padding: 0.8em 2em;
font-size: 1.1em;
text-decoration: none;
box-shadow: 0 2px 8px #e7d7c7;
transition: background 0.2s, transform 0.2s;
}
.fresh-bouquets-btn:hover {
background: linear-gradient(90deg, #f9c46b 0%, #e07a5f 100%);
transform: scale(1.05);
}
.fresh-bouquets-divider {
width: 90px;
max-width: 60%;
margin: 0.5em auto 0.5em auto;
display: block;
}
@media (max-width: 700px) {
.fresh-bouquets-divider {
width: 80px;
margin: 1em auto;
}
}

/* Responsive for mobile */
@media (max-width: 700px) {
.fresh-bouquets-content,
.best-sellers-content,
.services-cards {
flex-direction: column !important;
align-items: center !important;
gap: 1.2em !important;
padding: 1em 0.5em !important;
}

.fresh-bouquets-img,
.best-sellers-img,
.service-img {
width: 100% !important;
height: auto !important;
max-width: 320px !important;
margin-bottom: 1em !important;
border-radius: 14px !important;
}

.fresh-bouquets-text,
.best-sellers-text {
text-align: center !important;
}

.bouquet-card {
max-width: 95vw !important;
margin: 1em auto !important;
}

.bouquet-card img {
max-width: 100% !important;
height: auto !important;
}

.services-section {
padding: 1em 0.5em !important;
}

.service-card {
width: 100% !important;
margin-bottom: 1.5em !important;
}
}

/* Increase bouquet-divider size */
.bouquet-divider {
height: 38px;
width: auto;
display: block;
margin: 0.4em auto 0.4em auto;
object-fit: contain !important;
background: transparent !important;
border-radius: 0 !important;
max-width: 100%;
padding-top: 2px;
padding-bottom: 2px;
}

/* Increase logo size on all pages */
.site-logo {
width: 150px;
max-width: 90vw;
height: auto;
margin-bottom: 0.5em;
}

/* --- ABOUT PAGE STYLES --- */
body.about-page {
margin: 0;
font-family: 'Montserrat', Arial, sans-serif;
background: linear-gradient(135deg, #fff8f3 0%, #f9e7d7 100%);
color: #3d405b;
}

.about-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2em;
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px #f3e6d7;
padding: 2em 2em 2em 2em;
margin-bottom: 2em;
}

.about-hero-text {
flex: 2;
}

.about-hero-text h2 {
font-family: 'Pacifico', cursive;
color: #e07a5f;
font-size: 2.2em;
margin-bottom: 0.5em;
letter-spacing: 1px;
}

.about-hero-text p {
font-size: 1.18em;
line-height: 1.7;
margin: 0;
}

.about-hero-img {
flex: 1;
min-width: 220px;
text-align: center;
}

.about-hero-img img {
width: 100%;
max-width: 260px;
border-radius: 14px;
box-shadow: 0 2px 12px #e7d7c7;
}

.about-details {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2em;
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px #f3e6d7;
padding: 2em;
margin-bottom: 2em;
}

.about-details-img {
flex: 1;
min-width: 220px;
text-align: center;
}

.about-details-img img {
width: 100%;
max-width: 240px;
border-radius: 14px;
box-shadow: 0 2px 12px #e7d7c7;
}

.about-details-text {
flex: 2;
}

.about-details-text h3,
.about-delivery h3 {
font-family: 'Pacifico', cursive;
color: #e07a5f;
font-size: 1.7em;
margin-bottom: 0.5em;
letter-spacing: 1px;
}

.about-details-text p {
font-size: 1.13em;
line-height: 1.7;
margin-bottom: 0.7em;
}

.about-delivery {
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px #f3e6d7;
padding: 2em;
margin-bottom: 2em;
}

.about-delivery-content {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2em;
}

.about-delivery-content > div {
flex: 1;
}

.about-delivery-img img {
width: 100%;
max-width: 180px;
border-radius: 14px;
box-shadow: 0 2px 12px #e7d7c7;
}

/* Animations */
@keyframes fadein {
from { opacity: 0; transform: translateY(30px);}
to { opacity: 1; transform: translateY(0);}
}
@keyframes slidein-left {
from { opacity: 0; transform: translateX(-40px);}
to { opacity: 1; transform: translateX(0);}
}
@keyframes slidein-right {
from { opacity: 0; transform: translateX(40px);}
to { opacity: 1; transform: translateX(0);}
}

.animate-fadein {
animation: fadein 1.2s cubic-bezier(.4,0,.2,1) both;
}
.animate-slidein-left {
animation: slidein-left 1.2s cubic-bezier(.4,0,.2,1) both;
}
.animate-slidein-right {
animation: slidein-right 1.2s cubic-bezier(.4,0,.2,1) both;
}

/* Responsive */
@media (max-width: 900px) {
.about-hero,
.about-details,
.about-delivery-content {
gap: 1.5em;
padding: 1.2em;
}
.about-hero-img img,
.about-details-img img,
.about-delivery-img img {
max-width: 90vw;
}
}

/* --- MOBILE FRIENDLY STYLES --- */
@media (max-width: 700px) {
body {
font-size: 1em;
padding: 0;
margin: 0;
}
header {
flex-direction: column;
align-items: center;
padding: 0.5em 0;
}
.logo-title {
flex-direction: column;
align-items: center;
text-align: center;
}
.site-logo {
width: 60px;
height: auto;
margin-bottom: 0.3em;
}
nav {
display: flex;
flex-direction: column;
gap: 0.5em;
align-items: center;
margin-top: 0.5em;
}
nav a {
font-size: 1.1em;
padding: 0.4em 0.8em;
}
.fresh-bouquets-block,
.best-sellers-block,
.after-services-block {
padding: 0.5em 0.2em;
}
.fresh-bouquets-content,
.best-sellers-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.fresh-bouquets-img,
.best-sellers-img {
width: 90vw;
max-width: 320px;
height: auto;
margin-bottom: 0.7em;
}
.bouquet-carousel-wrapper {
padding: 0.2em 0;
}
.bouquet-carousel {
overflow-x: auto;
scroll-behavior: smooth;
width: 100vw;
max-width: 100vw;
}
.bouquets {
flex-wrap: nowrap;
gap: 0.7em;
}
.bouquet-card {
min-width: 140px;
max-width: 80vw;
margin: 0 0.3em;
padding: 0.5em 0.2em;
font-size: 1em;
}
.bouquet-card img {
max-height: 70px;
width: auto;
}
.carousel-arrow {
font-size: 1.5em;
padding: 0.2em 0.5em;
top: 40%;
}
.services-section {
padding: 0.5em 0.2em;
}
.services-cards {
flex-direction: column;
align-items: center;
gap: 1em;
}
.service-card {
width: 90vw;
max-width: 340px;
margin: 0 auto;
padding: 0.7em 0.3em;
font-size: 1em;
}
.service-img {
max-width: 90vw;
height: auto;
}
.after-services-block {
text-align: center;
padding: 1em 0.2em;
}
footer {
font-size: 0.95em;
padding: 0.7em 0.2em;
text-align: center;
}
}

/* --- MOBILE FIX: Featured Bouquets & Services Cards --- */
@media (max-width: 700px) {
.bouquet-carousel {
overflow-x: auto;
max-width: 100vw;
padding: 0.5em 0;
}
.bouquets {
display: flex;
flex-wrap: nowrap;
gap: 0.7em;
width: 100vw;
min-width: unset;
max-width: 100vw;
}
.bouquet-card {
min-width: 220px;
max-width: 92vw;
width: 92vw;
margin: 0.7em 0.2em;
padding: 0.7em 0.3em;
font-size: 1em;
box-shadow: 0 2px 8px #e7d7c7;
box-sizing: border-box;
border-radius: 16px;
}
.bouquet-card img {
max-width: 100%;
width: 100%;
height: auto;
max-height: 120px;
border-radius: 12px;
margin-bottom: 0.5em;
object-fit: cover;
}

}

/* Keep menu horizontal on mobile */
@media (max-width: 700px) {
nav {
display: flex !important;
flex-direction: row !important;
gap: 1em !important;
align-items: center !important;
margin-top: 0.5em !important;
justify-content: center !important;
}
nav a {
font-size: 1.1em !important;
padding: 0.4em 0.8em !important;
margin: 0 0.3em !important;
}
}

/* --- Fix bouquet card width on mobile --- */
@media (max-width: 700px) {
.bouquet-carousel {
overflow-x: auto;
flex-wrap: nowrap;
}
.bouquets {
display: flex;
flex-wrap: nowrap;
}
.bouquet-card {
min-width: 220px;
max-width: 90vw;
width: 90vw;
margin: 0 0.5em;
}
}

/* --- FEATURED BOUQUETS SLIDER --- */
.featured-bouquets {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 32px #e07a5f22;
  padding: 2.5em 1em;
  margin: 2em auto;
  max-width: 1100px;
  text-align: center;
}
.featured-bouquets h2 {
  color: #e07a5f;
  font-family: 'Pacifico', cursive, sans-serif;
  font-size: 2em;
  margin-bottom: 1.2em;
  letter-spacing: 1px;
}
.bouquet-slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  position: relative;
}
.bouquet-arrow {
  background: #fff;
  border: 2px solid #e07a5f;
  color: #e07a5f;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 2em;
  cursor: pointer;
  box-shadow: 0 2px 8px #e07a5f33;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  outline: none;
  z-index: 2;
}
.bouquet-arrow:hover,
.bouquet-arrow:focus {
  background: #e07a5f;
  color: #fff;
  border-color: #f9c46b;
  box-shadow: 0 4px 16px #e07a5f33;
}
.bouquet-slider {
  display: flex;
  gap: 2em;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1em 0;
  width: 100%;
  max-width: 900px;
  scrollbar-width: none;
}
.bouquet-slider::-webkit-scrollbar {
  display: none;
}
.bouquet-card {
  background: #fbeee6;
  border-radius: 18px;
  box-shadow: 0 2px 12px #e7d7c7;
  min-width: 260px;
  max-width: 260px;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s cubic-bezier(.23,1.01,.32,1), box-shadow 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding-bottom: 1em;
}
.bouquet-card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 8px 32px #e07a5f44;
  z-index: 2;
}
.bouquet-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  background: #fff;
  transition: filter 0.3s;
}
.bouquet-card:hover img {
  filter: brightness(0.95) saturate(1.1);
}
.bouquet-info {
  padding: 1em 0.7em 0 0.7em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bouquet-info h4 {
  margin: 0.5em 0 0.2em 0;
  color: #3d405b;
  font-size: 1.18em;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.bouquet-info p {
  color: #555;
  font-size: 1em;
  margin-bottom: 0.5em;
}

/* Responsive */
@media (max-width: 900px) {
  .bouquet-slider {
    gap: 1em;
    max-width: 98vw;
  }
  .bouquet-card {
    min-width: 220px;
    max-width: 220px;
    flex: 0 0 220px;
  }
  .bouquet-card img {
    height: 120px;
  }
}
@media (max-width: 600px) {
  .featured-bouquets {
    padding: 1em 0.2em;
  }
  .bouquet-slider {
    gap: 0.7em;
    padding: 0.5em 0;
  }
  .bouquet-card {
    min-width: 170px;
    max-width: 170px;
    flex: 0 0 170px;
    padding-bottom: 0.5em;
  }
  .bouquet-card img {
    height: 80px;
  }
  .bouquet-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.3em;
  }
}

/* --- What Can We Do (Service Cards) --- */
.services-section {
  width: 100%;
  padding: 2em 0 1em 0;
  background: none;
  text-align: center;
}
.services-title {
  font-family: 'Pacifico', cursive;
  color: #e07a5f;
  font-size: 2em;
  margin-bottom: 1.2em;
  letter-spacing: 1px;
}
.services-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em;
  padding: 0 1em;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}
.service-card {
  background: #fff8f3;
  border-radius: 1.2em;
  box-shadow: 0 4px 24px #e07a5f18;
  width: 100%;
  max-width: 220px;
  min-width: 0;
  margin: 0;
  padding: 1.1em 1em 1.2em 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: box-shadow 0.2s, transform 0.2s;
  border: none;
  overflow: visible;
  position: relative;
}
.service-card:hover,
.service-card:focus-within {
  box-shadow: 0 8px 32px #e07a5f33;
  transform: translateY(-4px) scale(1.04);
  z-index: 2;
}
.service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0.7em;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px #e07a5f22;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7em;
  color: #e07a5f;
  margin-left: auto;
  margin-right: auto;
  animation: floaticon 2.5s infinite cubic-bezier(.4,0,.2,1);
  transition: box-shadow 0.2s, transform 0.2s;
}
.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
  animation: wiggle 0.6s;
  box-shadow: 0 4px 16px #f9c46b44;
  transform: scale(1.13) rotate(-7deg);
}
@keyframes wiggle {
  0% { transform: rotate(0deg);}
  20% { transform: rotate(-10deg);}
  40% { transform: rotate(10deg);}
  60% { transform: rotate(-8deg);}
  80% { transform: rotate(8deg);}
  100% { transform: rotate(0deg);}
}
@keyframes floaticon {
  0%, 100% { transform: translateY(0);}
  50% { transform: translateY(-7px);}
}
.service-img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 4/3;
  margin-bottom: 0.8em;
  border-radius: 0.7em;
  box-shadow: 0 1px 6px #e07a5f11;
  object-fit: cover;
  background: #fff;
  display: block;
  transition: filter 0.3s, box-shadow 0.3s;
}
.service-card:hover .service-img,
.service-card:focus-within .service-img {
  filter: brightness(0.97) saturate(1.1);
  box-shadow: 0 6px 18px #e07a5f22;
}
.service-card h3 {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 1.08em;
  font-weight: 700;
  color: #e07a5f;
  margin: 0.2em 0 0.1em 0;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
}

/* Responsive: stack cards, shrink, keep images visible, never hug edges */
@media (max-width: 900px) {
  .services-cards {
    gap: 1.2em;
    padding: 0 0.5em;
  }
  .service-card {
    max-width: 320px;
    min-width: 0;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .services-cards {
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 0 0.2em;
  }
  .service-card {
    max-width: 98vw;
    border-radius: 0.7em;
    padding: 0.8em 0.3em 1em 0.3em;
  }
  .service-img {
    max-width: 96vw;
    border-radius: 0.5em;
  }
  .service-card h3 {
    font-size: 1em;
  }
}