/* css/index-page.css */

/* Hero Section - Specific styles for the index page */
.hero { 
    /* REQUESTED FIX: Background image not loading. Changed path to absolute path from site root for robustness. 
       If the image is still not loading, please verify that 'bg.webp' is located directly inside the 'images' folder 
       and that the 'images' folder is in the same directory as the 'css' folder and 'index.html'. */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/bg.webp') center bottom/cover; 
    height: 90vh; 
    display: flex; 
    align-items: center; 
    color: var(--white); 
}
.hero-content { 
    max-width: 700px; 
    position: relative;
    z-index: 1;
    /* NEW: Push content to the right side in the Hero section */
    margin-left: auto; 
    margin-right: 0;
    
    /* Align text and buttons to the right */
    text-align: right; 
}
.hero h1 { 
    font-family: 'Great Vibes', cursive;
    font-size: 4.5rem; 
    margin-bottom: 20px; 
    /* MODIFIED: Set to Yellow/Orange accent color */
    color: var(--accent-orange); 
    line-height: 1.1; 
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); 
}
.hero p { 
    font-size: 1.125rem; 
    margin-bottom: 30px; 
    max-width: 600px; 
    /* MODIFIED: Set to white color */
    color: var(--white); 
    /* Max width for the text box */
    margin-left: auto; 
    margin-right: 0;
}
.hero-btns { 
    display: flex; 
    gap: 20px; 
    margin-top: 30px; 
    /* Align buttons to the right */
    justify-content: flex-end;
}
/* REQUESTED CHANGE: Fix Book Now button hover fading */
.hero-btns .btn:hover {
    opacity: 1; /* Prevent excessive fading, ensure full visibility */
    filter: brightness(0.8); /* Slightly darken for visual feedback */
}
.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}
/* REQUESTED CHANGE: Our Services button hover background should be white */
.btn-outline:hover {
    background: var(--white); /* White background */
    color: var(--primary); /* Dark text */
    border-color: var(--white);
}

/* Features Section - Spacing and padding for cards modified */
.features .section-title {
    margin-bottom: 50px; /* DECREASED: Smaller margin above cards (from 80px to 50px) */
}

.features-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 40px; /* Increased card spacing */
}
.feature-card { 
    background: var(--white); 
    border-radius: 10px; 
    padding: 45px 30px; /* Slightly larger inner padding */
    text-align: center; 
    box-shadow: var(--shadow); 
    transition: var(--transition); 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
}
.feature-card:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 5px; 
    background: var(--primary); 
    transform: scaleX(0); 
    transform-origin: left; 
    transition: var(--transition); 
    z-index: -1; 
}
.feature-card:hover:before { 
    transform: scaleX(1); 
}
.feature-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); 
}
.feature-icon { 
    width: 80px; 
    height: 80px; 
    /* MODIFIED: Background color set to the requested light cream color (#F8F7F4 estimate) */
    background: #F8F7F4; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 25px; 
    font-size: 32px; 
    color: var(--primary); 
    transition: var(--transition); 
}
.feature-card:hover .feature-icon { 
    background: var(--primary); 
    color: var(--white); 
}
.feature-card h3 { 
    font-size: 1.5rem; 
    margin-bottom: 15px; 
    /* MODIFIED: Set to orange color */
    color: var(--accent-orange); 
}

/* About Section */
.about-content { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 50px; 
    align-items: center; 
}
.about-image { 
    position: relative; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
}
.about-image img { 
    width: 100%; 
    display: block; 
    transition: var(--transition); 
}
.about-image:hover img { 
    transform: scale(1.05); 
}
.about-text h2 { 
    font-size: 2.375rem; 
    margin-bottom: 25px; 
}
.about-text p { 
    margin-bottom: 20px; 
    font-size: 1rem; 
}
.about-features { 
    margin: 30px 0; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}
.about-feature { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.about-feature i { 
    color: var(--primary); 
    font-size: 24px; 
    min-width: 30px; 
}
.about-feature h4 {
    font-size: 1.1rem;
    margin-bottom: 3px;
}
.about-feature p {
    font-size: 0.9rem;
    margin-bottom: 0;
    color: #666;
}

/* Services Section - NEW CARD LAYOUT WITHOUT PRICES */
.services {
    background-color: var(--light);
}
.services-grid { 
    display: grid; 
    /* MODIFIED: 4-column layout (approx. 10 cards) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px; 
    margin-top: 30px; /* NEW: Spacing between intro text and cards */
}
.service-card { 
    background: var(--white); 
    border-radius: 10px; 
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); 
    /* REMOVED: transition: var(--transition); for card hover animation */
    text-align: center;
    padding: 25px; /* Slightly smaller padding for a more compact look */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.service-card:hover { 
    /* REMOVED: transform: translateY(-5px); */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); /* Hover effect removed */
}
.service-icon-wrapper {
    /* OUTER CIRCLE: Brown circle removed */
    position: relative;
    width: auto; /* Automatic width */
    height: auto; /* Automatic height */
    background-color: transparent; /* MODIFIED: Transparent background */
    border: none; /* No border */
    border-radius: 0; /* No circle */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: none; /* No shadow */
    /* REMOVED: transition: all 0.3s ease; */
    overflow: hidden; 
}

/* REMOVED: Inner, lighter circle behind the image */
.service-icon-wrapper::before {
    content: none;
}

/* NEW: Style for IMG elements instead of icons */
.service-icon-wrapper img {
    position: relative;
    z-index: 2; 
    width: 80px; /* MODIFIED: Larger size (from 60px to 80px) */
    height: 80px; /* MODIFIED: Larger size (from 60px to 80px) */
    object-fit: contain;
    /* REMOVED: transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
    /* MODIFIED: Color filter completely removed */
    filter: none; 
    background-color: transparent; /* MODIFIED: Transparent background */
}

/* NEW: Add icon animation on card hover - REMOVED */
.service-card:hover .service-icon-wrapper {
    background-color: transparent; /* Hover: Remains transparent */
    box-shadow: none; /* No shadow */
}
.service-card:hover .service-icon-wrapper img {
    transform: none; /* No rotation */
    filter: none; /* Color remains original */
}

/* Style for Font Awesome icons (e.g., Magic Facial) if still used */
.service-icon-wrapper i {
    font-size: 2.5rem; /* MODIFIED: Larger icon (from 2rem to 2.5rem) */
    color: var(--primary); /* Brown icon */
    /* REMOVED: transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}
.service-card:hover .service-icon-wrapper i {
    transform: none; /* No rotation */
}

.service-content { 
    padding: 0; 
    text-align: center;
}
.service-content h3 { 
    font-size: 1.25rem; 
    margin-bottom: 5px; 
    color: var(--primary);
}
.service-content .duration {
    font-size: 0.9rem;
    color: var(--accent-orange);
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}
.service-content p { 
    margin-bottom: 0; 
    color: #666; 
    font-size: 0.95rem;
}

/* Testimonials Section - WITH NEW VISUAL STYLES */
.testimonials { 
    background: linear-gradient(rgba(44, 44, 44, 0.9), rgba(44, 44, 44, 0.9)), url('images/testimonials-bg.jpg') center/cover fixed; 
    color: var(--white); 
    text-align: center; 
}
.testimonials .section-title h2 { 
    color: var(--white); 
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem;
    font-weight: 400;
}
.testimonials .section-title h2:after {
    background: var(--accent-orange);
}
.testimonials .section-title p { 
    color: var(--accent); 
}
.testimonials-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 40px; 
    margin-top: 50px; 
}
.testimonial-card { 
    background: rgba(255, 255, 255, 0.05); /* Very dark, translucent background */
    border-radius: 15px; 
    padding: 40px; 
    text-align: left; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.testimonial-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.testimonial-header { 
    display: flex; 
    align-items: center; 
    margin-bottom: 25px; 
}
.testimonial-avatar { 
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    overflow: hidden; 
    margin-right: 20px; 
    border: 3px solid var(--accent-orange); /* Orange border */
    flex-shrink: 0;
}
.testimonial-avatar img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.testimonial-info h4 { 
    color: var(--white); 
    margin-bottom: 5px; 
    font-size: 1.25rem;
}
.testimonial-rating { 
    color: var(--accent-orange); /* Orange stars */
    font-size: 1rem;
}
.testimonial-content p { 
    font-style: italic; 
    line-height: 1.8; 
    color: #ccc; /* Lighter text */
    margin-bottom: 0;
    position: relative;
}
.testimonial-content p:before {
    content: "\f10d"; /* Opening quote icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 2rem;
    color: var(--accent-orange);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    left: -10px;
    line-height: 1;
}

/* Booking Section - REMOVED */
.booking { display: none; }


/* Responsive adjustments for Index Page */
@media (max-width: 992px) {
    .hero {
        justify-content: center; /* Center alignment in mobile view */
    }
    .hero-content {
        text-align: center;
        padding: 0 20px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-btns {
        justify-content: center;
    }
    .hero h1 { font-size: 3.5rem; }
    .about-content { grid-template-columns: 1fr; } 
    .about-image { margin-bottom: 30px; }
    .services-grid { 
        /* Reverted to 2-column layout in mobile view if minmax(250px, 1fr) is not enough */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        justify-content: center; /* Center alignment if fewer cards are in a row */
    } 
}
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .hero-btns { flex-direction: column; gap: 10px; }
    .hero-btns .btn { width: 100%; text-align: center; }
    .testimonial-card { padding: 30px 20px; }
    
    /* Set services-grid to 1 column in mobile view for better readability, if necessary */
    .services-grid {
        grid-template-columns: 1fr;
    }
}