/* =====================
    FONTS & BASE STYLES
===================== */
body {
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    line-height: 1.7;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1rem;
    color: #0a0a23;
    /* text-align: left; -- REVERTED: Removed this, headings will align based on parent or default */
}

h1 {
    font-size: 2.25rem;
}

h5 {
    font-size: 1.125rem;
    font-weight: 600;
}

/* =====================
    BUTTONS
===================== */
.btn-collection {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    border-radius: 50px;
    font-weight: 500;
    font-size: 1rem;
    padding: 10px 20px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    white-space: nowrap;
}

.btn-collection:hover {
    color: #d2ab68;
    border-color: #d2ab68;
}

.btn-send {
    margin: 0 auto;
    padding: 5px 20px;
    border-radius: 5px;
    font-weight: 500;
}

/* Base style for the Contact Us and Learn More buttons (btn-outline-dark) */
.btn-outline-dark {
    border-radius: 8px; /* Slightly curved edges */

    background-color: transparent; /* Ensure background is transparent */
    color: #d2ab68;           /* Gold text */
    border-color: #d2ab68;    /* Gold border */

    transition: all 0.3s ease; /* Smooth transition for hover effects */

    letter-spacing: 1px;    /* Shared letter-spacing */
    font-size: 0.85rem;     /* Shared font-size */
}

/* Hover effect for the Contact Us and Learn More buttons */
.btn-outline-dark:hover {
    background-color: transparent; /* Ensure background stays transparent on hover */
    color: #0a0a23;           /* Black text on hover */
    border-color: #0a0a23;    /* Black border on hover */

    box-shadow: none;         /* Remove any default Bootstrap shadow on hover */
}

/* =====================
    FORM CONTROLS (NEWLY ADDED SECTION)
===================== */
.form-control {
    border-color: #d2ab68; /* Gold border color */
    border-width: 1px; /* Ensure border is visible */
    border-style: solid;
    border-radius: 8px; /* Matching the button's slightly curved edges */
    color: #0a0a23; /* Dark text color for input */
    padding: 0.75rem 1rem; /* Adjust padding for a consistent look */
    background-color: #fff; /* Ensure background is white */
}

.form-control:focus {
    border-color: #d2ab68; /* Keep gold border on focus */
    box-shadow: 0 0 0 0.25rem rgba(210, 171, 104, 0.25); /* Subtle gold glow on focus */
    outline: 0; /* Remove default outline */
}

.form-control::placeholder {
    color: #555; /* Darker placeholder text */
    opacity: 0.8; /* Slightly transparent */
}


/* =====================
    CONTACT SECTION (This refers to the text block for phone/email)
===================== */
.contact-text {
    position: absolute;
    bottom: 5%;
    color: white;
    z-index: 2;
    font-size: 2.25rem;
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    line-height: 1;
    font-family: 'Playfair Display', serif;
}
.contact-text span {
    -webkit-text-stroke: 0.6px white;
    color: transparent;
}

/* =====================
    NAVIGATION & HEADER
===================== */
.navbar-mobile {
    display: none;
}
.navbar-mini {
    position: absolute;
    z-index: 10;
    width: 100%;
    background-color: transparent;
}
.navbar-mini div div {
    width: 95vw;
    padding: 4px 40px; /* Thinner height */
    background-color: #d2ab68;
    color: white;
    border-radius: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Spread items */
    gap: 30px;
}

.navbar-mini .nav-link {
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    flex: 1;
    text-align: center;
}

/* =====================
    FOOTER
===================== */
.footer-social-links {
    flex-direction: column;
}

/* =====================
    OWL CAROUSEL - HERO SECTION
===================== */
.header-carousel {
    position: relative;
    height: 100vh; /* Reinstated full viewport height */
    overflow: hidden; /* Hide any overflow if content exceeds height */
}

.header-carousel .owl-carousel,
.header-carousel .owl-stage-outer,
.header-carousel .owl-stage,
.header-carousel .owl-item,
.header-carousel .owl-carousel-item {
    height: 100%; /* Make elements fill parents height */
    width: 100%;
}

.header-carousel .owl-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make the image cover the rectangular container seamlessly */
    display: block;
}

/* Testimonials carousel (keep as is, for context) */
.testimonial-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.testimonial-item { /* This selector is left in case it's used elsewhere, but not for testimonial-card */
    margin-bottom: 0;
    padding-bottom: 0;
}

.testimonial-carousel .owl-nav { /* This specific rule is for Owl Carousel, but won't apply without it */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #d2ab68;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 5%;
    z-index: 2;
}

/* =====================
    ABOUT SECTION REFINEMENTS (Original provided text styles, no new classes)
===================== */
.about-text h5 {
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: 1rem;
    /* text-align: left; -- REVERTED: Removed this */
}

.about-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 500;
    color: #0a0a23;
    margin-bottom: 1.5rem;
    /* text-align: left; -- REVERTED: Removed this */
}

.about-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #0a0a23;
    margin-bottom: 1.5rem;
    /* text-align: left; -- REVERTED: Removed this */
}

.about-text p {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 400;
    color: #333;
    margin-bottom: 1.2rem;
    max-width: 640px;
    /* text-align: left; -- REVERTED: Removed this */
}

.about-text {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
}

/* ==== ABOUT SECTION IMAGES - Essential for proper sizing and alignment ==== */
.about-image {
    width: 100%; /* Make the image take 100% width of its parent column */
    max-width: 400px; /* Default max-width for mobile and general (original value) */
    height: auto; /* Ensure height scales proportionally */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    object-position: top center; /* Focuses the top part of the image, centered horizontally */
    border-radius: 8px !important; /* Maintains the rounded corners */
    display: block; /* Important for horizontal alignment */
    /* Removed global margin: 0 auto; as alignment will be controlled by flex parent or media queries */
}

/* =====================
    GALLERY SECTION TYPOGRAPHY
===================== */
.gallery-section h5 {
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #6c757d; /* Changed from #d2ab68 to match original screenshot */
    text-transform: uppercase;
    margin-bottom: 1rem;
    /* text-align: left; -- REVERTED: Removed this */
}

.gallery-section h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 500;
    color: #0a0a23;
    margin-bottom: 1.5rem;
    text-transform: none !important;
    /* text-align: left; -- REVERTED: Removed this */
}

/* ==== GALLERY IMAGES ROUNDED CORNERS ==== */
.gallery-item-flex img {
    border-radius: 8px !important; /* This will override Bootstrap's default .rounded value */
}

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

/* Rules for larger screens (desktop/tablet) */
@media (min-width: 768px) {
    /* If you still need padding between the image and text columns,
       and the text column is now the LAST one on desktop (image first),
       you should target #about-us .col-md-6:last-child for padding-left.
       If the image column is first and text is second (left-to-right),
       then this padding-right is for the *first* column (image) if it aligns right.
       Let's assume you want space *after* the image and *before* the text.
    */
    #about-us .col-md-6:first-child { /* This targets the image column (if image is first) or text column (if text is first) */
        padding-right: 3rem; /* Add space to the right of the first column on desktop */
    }

    /* Corrected: .about-image sizing specifically for desktop */
    .about-image {
        max-width: 500px; /* Adjusted desktop max-width to make image a bit smaller */
        height: auto; /* Ensure height scales proportionally (important after 100% height issue) */
    }
}

@media (max-width: 1024px) {
    .gallery-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .style-month-img {
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    .btn-collection {
        display: none;
    }
    .style-month-img-div {
        height: auto;
    }
    .testimonial-carousel .owl-item img { /* This rule will be overridden by .testimonial-card img */
        width: 200px;
        height: 200px;
    }
    .testimonial-carousel .owl-dots { /* This rule will not apply as testimonial-carousel is not Owl Carousel */
        display: none;
    }

    /* Responsive adjustments for .about-image on smaller screens (e.g., mobile) */
    .about-image {
        width: 100% !important; /* Force to full width of parent */
        max-width: 100% !important; /* Ensure it doesn't exceed 100% */
        margin: 0 !important; /* Remove any centering margins on mobile */
        height: auto; /* Ensure height scales proportionally on mobile */
    }

    /* Keeping original .about-text alignment for mobile (which was left) */
    .about-text {
        padding-top: 2rem !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Explicitly ensuring headings also remain left-aligned on mobile */
    #about-us h2 {
        text-align: left; /* Explicitly keep left alignment for h2 in about section on mobile */
    }

    /* NEW: Reduce border-radius for gallery images on mobile */
    .gallery-item-flex img {
        border-radius: 4px !important; /* Reduced curvature. You can try 0px for sharp corners. */
    }

    /* Testimonials — MOBILE ADJUSTMENTS (General Testimonial section responsive rules) */
    #testimonials h1 {
        font-size: 1.75rem;
        text-align: center; /* REVERTED: Testimonials h1 centered on mobile */
    }

    #testimonials h5 {
        font-size: 1rem;
        text-align: center; /* REVERTED: Testimonials h5 centered on mobile */
    }

    .testimonial-card { /* Adjust card padding for smaller screens if needed */
        padding: 1.5rem 1rem; /* Smaller padding on mobile */
        min-height: 380px; /* Adjust min-height for mobile if content allows */
    }

    .testimonial-card h6 {
        font-size: 1rem; /* Smaller name font size on mobile */
        text-align: center; /* Keep testimonial card name centered on mobile */
    }
}

@media (max-width: 910px) {
    .nav-title {
        display: none;
    }
    .navbar-mobile {
        display: flex;
    }
    .navbar-mini {
        display: none;
    }
    .footer-social-links {
        flex-direction: row;
    }
    .hide-text {
        display: none !important;
    }
    .show-text {
        display: block;
    }
    .testimonial-carousel .owl-nav {
        justify-content: space-between;
        width: 100%;
    }
}


/* Global SEO-only content hiding */
.seo-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =====================
    NAVBAR FONT FIX — MATCH "VIEW COLLECTION" BUTTON
===================== */
.navbar-mini .nav-link,
.navbar-mobile .nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* =====================
    ENLARGE ELAN LOGO AT PAGE TOP
===================== */
.nav-title img {
    width: 160px !important; /* Adjust size as needed */
    max-width: 100%;
    height: auto;
}
/* =====================
    PHONE CLICK SIZING (Final - black text + icon)
===================== */
#phone-click {
    position: fixed;
    right: 20px;
    bottom: 25px;
    z-index: 99;
    background-color: #d2ab68;
    color: black;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    max-width: fit-content;
    border: none;
    transition: all 0.3s ease;
}

#phone-click i {
    font-size: 18px;
    margin-right: 8px;
    color: black;
    transition: color 0.3s ease;
}

#phone-click .phone-text {
    font-size: 1.25rem;
    color: black;
    transition: color 0.3s ease;
}

#phone-click:hover {
    background-color: #e6c98d;
}

#phone-click:hover i,
#phone-click:hover .phone-text {
    color: black;
}

/* ==== OUR BEST SERVICES STYLING (MATCH ABOUT US) ==== */

/* Existing services-one__single and services-one__img img rules are good if present */

/* Add this rule to make the card images consistently rounded */
.card-img-top.rounded { /* Specificity for Bootstrap's rounded class on card images */
    border-radius: 8px !important;
}

/* Enhance the hover effect for the entire service card */
.card.hover-shadow:hover {
    transform: translateY(-5px); /* Lifts the card slightly */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Makes the shadow more pronounced */
    transition: all 0.3s ease; /* Smooth transition for the effect */
}
/* =====================
    TESTIMONIALS SECTION STYLING (FINAL)
===================== */

#testimonials h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    font-weight: 500;
    color: #0a0a23;
    text-align: center; /* REVERTED: Testimonials h1 centered */
}

#testimonials h5 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    color: #d2ab68;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center; /* REVERTED: Testimonials h5 centered */
    margin-bottom: 1rem;
}

/* This is the key styling for your testimonial cards */
.testimonial-card { /* New class added to HTML for precise targeting */
    width: 320px; /* Fixed width as per your preference */
    box-sizing: border-box; /* Ensure padding/border are included in width */

    /* Flexbox for equal height and vertical alignment */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Aligns content to the top */

    /* Ensure cards don't shrink and maintain their width in the flex container */
    flex-shrink: 0;

    /* Consistent height - adjust this value for the tallest testimonial content */
    min-height: 420px; /* Adjust this value as needed to fit all content without overflow. */

    /* Standard padding, background, border-radius, shadow */
    padding: 1.5rem; /* This comes from p-4, but making it explicit for clarity */
    background-color: #fff; /* From bg-white */
    border-radius: 8px; /* From rounded */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* From shadow */
}

/* Styles for the small profile images within testimonial cards */
.testimonial-card img {
    width: 60px; /* Forces images to be 60px wide */
    height: 60px; /* Forces images to be 60px high */
    object-fit: cover; /* Ensures images fill the 60x60 space */
    border-radius: 50%; /* Makes them perfectly circular */
    margin: 0 auto 1rem; /* Centers image horizontally, adds bottom margin */
    display: block; /* Important for margin: auto to work */
}

/* Aligning the name and text within the cards */
.testimonial-card h6 {
    margin-top: 0; /* Remove default top margin if any */
    margin-bottom: 1rem; /* Consistent spacing below name */
    text-align: center; /* Keep testimonial card name centered as it's a sub-element */
}

.testimonial-card p {
    flex-grow: 1; /* Allows the paragraph to take up all remaining vertical space */
    margin-bottom: 0; /* Remove default paragraph bottom margin */
    text-align: left; /* Align testimonial text to the left */
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333;
}

/* HIDE SCROLLBAR (Keeping this here as it's part of testimonials styling) */
#testimonials .d-flex.overflow-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#testimonials .d-flex.overflow-auto::-webkit-scrollbar {
    display: none;
}

/* =====================
    TESTIMONIALS — MOBILE ADJUSTMENTS (General Testimonial section responsive rules)
===================== */
@media (max-width: 768px) {
    #testimonials h1 {
        font-size: 1.75rem;
        text-align: center; /* REVERTED: Testimonials h1 centered on mobile */
    }

    #testimonials h5 {
        font-size: 1rem;
        text-align: center; /* REVERTED: Testimonials h5 centered on mobile */
    }

    .testimonial-card { /* Adjust card padding for smaller screens if needed */
        padding: 1.5rem 1rem; /* Smaller padding on mobile */
        min-height: 380px; /* Adjust min-height for mobile if content allows */
    }

    .testimonial-card h6 {
        font-size: 1rem; /* Smaller name font size on mobile */
        text-align: center; /* Keep testimonial card name centered on mobile */
    }
}