/* ============================================
Reset & Base
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #e5e5e5;
background: #000;
}

header {
background: #e31777;
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 40;
border-bottom: 1px solid #eee;
}



.search-form-area {
max-width: 480px;
margin: 30px auto;
background: white;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.09);
overflow: hidden;
border: 1px solid rgba(220, 220, 230, 0.7);
}

.search-title {
background: linear-gradient(90deg, #4f46e5, #7c3aed);
color: white;
padding: 22px 24px;
font-size: 1.35rem;
font-weight: 600;
text-align: center;
letter-spacing: 0.3px;
}

.search-form-container {
padding: 28px 24px 32px;
}

.custom-select-wrapper {
position: relative;
}

.custom-select-wrapper::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #6b7280;
pointer-events: none;
}

.custom-select {
width: 100%;
padding: 14px 16px 14px 52px;
font-size: 1.05rem;
border: 1.5px solid #d1d5db;
border-radius: 10px;
background-color: #f9fafb;
color: #1f2937;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: all 0.2s ease;
}

.custom-select:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
background-color: white;
}

.custom-select:hover {
border-color: #9ca3af;
background-color: #f3f4f6;
}

p {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}


/* Location pin icon */
.custom-select-wrapper::before {
content: '';
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
background: url('https://cdn-icons-png.flaticon.com/512/684/684908.png') center / contain no-repeat;
opacity: 0.55;
pointer-events: none;
z-index: 1;
}

@media (max-width: 500px) {
.search-form-area {
margin: 40px 12px;
}
.search-title {
font-size: 1.25rem;
padding: 18px;
}
.search-form-container {
padding: 24px 18px;
}
.custom-select {
font-size: 1rem;
padding: 13px 14px 13px 48px;
}
}

.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo-area {
display: flex;
align-items: center;
gap: 12px;
color: #fff;

}

.logo-area img {
width: 55px;
height: 55px;
object-fit: contain;
}

.logo-text p:first-child {
font-size: 1.35rem;
font-weight: 700;
color: #111;
}

.logo-text p:last-child {
font-size: 0.9rem;
color: #666;
}

nav {
display: flex;
align-items: center;
gap: 30px;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: 500;
}

nav a:hover {
color: #db2777;
}

.call-btn {
background: #16a34a;
color: white;
padding: 10px 24px;
border-radius: 6px;
font-weight: bold;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.call-btn:hover {
background: #15803d;
}

.mobile-call {
display: none;
}

@media (max-width: 768px) {
nav {
display: none;
}

.mobile-call {
display: block;
}

.mobile-call a {
background: #16a34a;
color: white;
padding: 10px 16px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
}
}
/* ============================================
Common Container
============================================ */
.container {
max-width: 1280px;          /* ≈ 7xl */
margin: 0 auto;
padding: 0 1.5rem;          /* px-6 */
}

@media (min-width: 640px) {
.container {
padding: 0 2rem;          /* sm:px-8 */
}
}

/* ============================================
Gallery Section
============================================ */
.gallery-section {
background: #fb0883;
padding: 1rem 0;
position: relative;
overflow: hidden;
}

.gallery-section::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}

.gallery-section > .container {
position: relative;
z-index: 2;

}

.section-header {
text-align: center;
margin-bottom: 4rem;
}

.section-header h2 {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.025em;
color:#fff;
}

@media (min-width: 768px) {
.section-header h2 {
font-size: 3.125rem;
color:#fff;
}
}

.highlight {
color: #fb7185; /* rose-400 */
}

.section-header p {
margin-top: 1rem;
font-size: 1.125rem;
color: #d1d5db;
max-width: 32rem;
margin-left: auto;
margin-right: auto;
}

/* Gallery Grid */
.gallery-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}

@media (min-width: 640px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.gallery-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}

.gallery-card {
position: relative;
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
transition: all 0.5s ease;
}

.gallery-card:hover {
border-color: rgba(244, 63, 94, 0.5);
transform: scale(1.03);
}

.gallery-card img {
width: 100%;
height: 20rem;                /* 80 * 4 = 320px ≈ h-80 */
object-fit: cover;
transition: transform 0.7s ease;
}

@media (min-width: 768px) {
.gallery-card img {
height: 24rem;              /* h-96 */
}
}

.gallery-card:hover img {
transform: scale(1.1);
}

.overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent, transparent);
opacity: 0;
transition: opacity 0.4s ease;
display: flex;
align-items: flex-end;
padding: 1.5rem;
}

.gallery-card:hover .overlay {
opacity: 1;
}

.overlay p {
color: white;
font-weight: 600;
font-size: 1.125rem;
}

/* CTA */
.cta-center {
text-align: center;
margin-top: 3rem;
}

.whatsapp-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: #16a34a;          /* green-600 */
color: white;
font-weight: 700;
font-size: 1.25rem;
padding: 1.25rem 2.5rem;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4);
transition: all 0.3s ease;
text-decoration: none;
}

.whatsapp-btn:hover {
background: #15803d;          /* green-700 */
transform: scale(1.05);
}

.whatsapp-btn img {
width: 32px;
height: 32px;
}

/* ============================================
Services Section
============================================ */
.services-section {
padding: 4rem 0;
background: linear-gradient(to bottom, #f9fafb, #ffffff);
color: #1f2937;
}

.services-section h1,
.services-section h2 {
color: #831843;               /* pink-800 approx */
text-align: center;
}

.services-section h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
.services-section h1 {
font-size: 3.125rem;
}
}

.services-section .intro,
.services-section .description {
max-width: 56rem;
margin: 0 auto 3rem;
font-size: 1.125rem;
line-height: 1.75;
text-align: center;
color: #374151;
}

.features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 64rem;
margin: 0 auto;
}

@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
}

.feature-card {
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
border: 1px solid #f3f4f6;
text-align: center;
transition: all 0.3s ease;
}

.feature-card:hover {
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
}

.emoji {
font-size: 3.75rem;
margin-bottom: 1.5rem;
}

.feature-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #831843;
margin-bottom: 1rem;
}

.feature-card p {
color: #4b5563;
}


section {
padding: 120px 24px;
background: #ffffff;
color: #333333;
position: relative;
}

.overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(184,151,94,0.02) 0%, transparent 80%);
pointer-events: none;
}

.container {
max-width: 1320px;
margin: 0 auto;
position: relative;
z-index: 1;
}

.headline {
text-align: center;
margin-bottom: 50px;
}

.headline h2 {
color: #b8975e;
font-size: 3.2rem;
font-weight: 900;
margin-bottom: 16px;
line-height: 1.1;
letter-spacing: -0.8px;
}

.headline p {
font-size: 1.25rem;
line-height: 1.7;
color: #555555;
max-width: 720px;
margin: 0 auto;
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}

.gallery-item {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.gallery-item img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
}

.footer-text {
text-align: center;
margin-top: 50px;
font-size: 1.2rem;
color: #555555;
line-height: 1.6;
}

.connect-link {
color: #b8975e;
text-decoration: underline;
font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 992px) {
section {
padding: 90px 20px;
}
.headline h2 {
font-size: 2.6rem;
}
}

@media (max-width: 768px) {
section {
padding: 70px 16px;
}
.gallery-item img {
height: 340px;
}
}

.pricing-card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
padding: 40px 25px;
width: 320px;
text-align: center;
transition: all 0.4s ease;
border: 1px solid #ffe4f0;
position: relative;
overflow: hidden;
}

.pricing-card:hover {
transform: translateY(-15px) scale(1.03);
box-shadow: 0 20px 50px rgba(199, 21, 133, 0.15);
border-color: #c71585;
}

.pricing-card.highlighted {
border: 2px solid #c71585;
background: linear-gradient(145deg, #fff0f5, #ffffff);
transform: scale(1.08);
z-index: 10;
}

.pricing-card.highlighted:hover {
transform: translateY(-15px) scale(1.10);
}

.ribbon {
position: absolute;
top: 15px;
right: -35px;
background: #c71585;
color: white;
padding: 5px 40px;
font-size: 0.85rem;
font-weight: bold;
transform: rotate(45deg);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.pricing-card h3 {
margin-bottom: 12px;
font-size: 1.7rem;
color: #333;
font-weight: 700;
}

.subtitle {
font-size: 1.1rem;
color: #777;
margin-bottom: 20px;
font-style: italic;
}

.pricing-card .price {
font-size: 2.6rem;
color: #c71585;
font-weight: 800;
margin: 15px 0 25px;
}

.pricing-card .price span {
font-size: 1rem;
color: #888;
font-weight: normal;
}

.pricing-card ul {
list-style: none;
padding: 0;
margin: 25px 0 35px;
text-align: left;
}

.pricing-card ul li {
margin: 12px 0;
color: #555;
font-size: 1rem;
display: flex;
align-items: center;
}

.pricing-card ul li i {
margin-right: 12px;
font-size: 1.1rem;
}

.pricing-card ul li .cross {
color: #ff6b6b;
}

.pricing-card .btn {
display: inline-block;
padding: 14px 35px;
background: #c71585;
color: #fff;
text-decoration: none;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(199, 21, 133, 0.3);
}

.pricing-card .btn:hover {
background: #a8126d;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(199, 21, 133, 0.4);
}

@media (max-width: 768px) {
.pricing-card.highlighted {
transform: scale(1.02);
}
}


/* ==========================================
profile Section - Ultra Premium Look
========================================== */

.profile-section {
padding: 5rem 0;
background: linear-gradient(to bottom right, #111827, #000000, #0f172a);
color: white;
}

.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}

@media (min-width: 1024px) {
.container {
padding: 0 3rem;
}
}

/* Heading */
.section-header {
margin-bottom: 4rem;
}

.main-title {
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -0.025em;
background: linear-gradient(to right, #fbbf24, #fde047, #fbbf24);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}

@media (min-width: 768px) {
.main-title {
font-size: 4.5rem;
}
}

.subtitle {
font-size: 1.25rem;
font-weight: 300;
color: #d1d5db;
letter-spacing: 0.025em;
}

@media (min-width: 768px) {
.subtitle {
font-size: 1.5rem;
}
}

/* Masonry Grid */
.masonry-grid {
column-count: 1;
column-gap: 1.5rem;
}

@media (min-width: 640px) {
.masonry-grid {
column-count: 2;
}
}

@media (min-width: 1024px) {
.masonry-grid {
column-count: 3;
}
}

@media (min-width: 1280px) {
.masonry-grid {
column-count: 4;
}
}

.profile-item {
break-inside: avoid;
margin-bottom: 1.5rem;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(245, 158, 11, 0.12);
background: linear-gradient(to bottom, rgba(31, 41, 55, 0.4), rgba(0, 0, 0, 0.6));
backdrop-filter: blur(4px);
transition: all 0.7s ease-out;
}

.profile-item:hover {
box-shadow: 0 0 40px rgba(245, 158, 11, 0.4);
border-color: rgba(245, 158, 11, 0.5);
transform: translateY(-4px);
}

.image-wrapper {
position: relative;
overflow: hidden;
}

.profile-image {
width: 100%;
height: auto;
object-fit: cover;
display: block;
transition: transform 1s ease-out;
}

.profile-item:hover .profile-image {
transform: scale(1.1);
}

.rotate-neg .profile-image {
transform: rotate(-2deg);
}

.profile-item:hover .rotate-neg .profile-image {
transform: scale(1.1) rotate(0deg);
}

/* Services Section – Different aesthetic from gallery */
.services-section {
padding: 5rem 1rem;
background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
}

.services-container {
max-width: 1200px;
margin: 0 auto;
}

.services-header {
margin-bottom: 3.5rem;
}

.services-title {
font-size: 2.5rem;
font-weight: 800;
color: #1f2937;
margin-bottom: 1rem;
}

.services-subtitle {
font-size: 1.125rem;
color: #4b5563;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}

.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}

@media (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
}

.service-card {
background: white;
border-radius: 1.25rem;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 1px solid #e5e7eb;
}

.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.service-image-wrap {
height: auto;
overflow: hidden;
}

.service-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}

.service-card:hover .service-img {
transform: scale(1.08);
}

.service-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}

.service-name {
font-size: 1.375rem;
font-weight: 700;
color: #111827;
}

.service-desc {
font-size: 0.95rem;
color: #4b5563;
line-height: 1.6;
flex-grow: 1;
}

.service-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
}

.service-price {
font-size: 1.5rem;
font-weight: 700;
color: #ec4899;
}

.service-btn {
background: #10b981;
color: white;
padding: 0.65rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}

.service-btn:hover {
background: #059669;
transform: translateY(-2px);
}