/* Slider Container */
#sync-container {
    max-width: 1170px;
    margin: 50px auto;
    padding: 0 15px;
}

/* Header Quote Button */
.btn-quote {
    background-color: #e1bd85; /* Gold/Beige */
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 30px; /* Pill shape */
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;

    /* Absolute positioning to align with .menu-bars */
    position: absolute;
    right: 80px; /* 15px (menu-bars right) + 50px (menu-bars width) + 15px gap */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;

    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-quote:hover {
    background-color: #d4aa6e;
    box-shadow: 0 5px 15px rgba(225, 189, 133, 0.4);
}

/* 1. Main Image Slider (#sync1) */
#sync1 .item {
    overflow: hidden;
    position: relative;
    line-height: 0;
}

#sync1 .item img {
    width: 100%;
    height: 500px; /* Fixed height as requested */
    display: block;
}

#sync1 .owl-wrapper-outer {
    margin-bottom: 0 !important;
}

/* Hide control elements that might cause spacing */
#sync1 .owl-controls {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* 2. Navigation Slider Container */
.nav-container {
    position: relative;
    background: #fcfcfc; /* Light background for the strip */
    border-bottom: 1px solid #e1bd85;
    margin-top: -25px; /* Aggressive negative margin */
    padding: 0 50px; /* Space for arrows */
    z-index: 20;
}

/* Navigation Slider (#sync2) */
#sync2 .item {
    text-align: center;
    cursor: pointer;
    padding: 20px 0;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: #898989;
    border-right: 1px solid #eee; /* Separator */
}

/* Active State for Nav */
#sync2 .synced .item {
    color: #333; /* Darker text for active */
}

#sync2 .item:hover {
    color: #e1bd85;
}

/* Custom Navigation Arrows */
.custom-nav-prev, .custom-nav-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    background: #fff;
    border: 1px solid #eee;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #898989;
    font-size: 20px;
    z-index: 10;
    transition: all 0.3s ease;
}

.custom-nav-prev { left: 0; border-right: none; }
.custom-nav-next { right: 0; border-left: none; }

.custom-nav-prev:hover, .custom-nav-next:hover {
    color: #e1bd85;
    background: #f9f9f9;
}

/* =========================================
   Gallery Slider Styles
   ========================================= */

#gallery-sync-container {
    max-width: 1170px;
    margin: 50px auto;
    padding: 0;
    /* Clean look without heavy borders */
    background: transparent;
}

#gallery-sync1 .item {
    overflow: hidden;
    position: relative;
    line-height: 0;
    margin: 0;
    padding: 0;
}

#gallery-sync1 .item img {
    width: 100%;
    height: 400px; /* Reduced slightly for proportion */
    object-fit: cover;
    display: block;
}

#gallery-sync1 .owl-wrapper-outer {
    margin-bottom: 0 !important;
}

/* Gallery Thumbnails */
#gallery-sync2 {
    padding: 0;
    margin-top: 10px; /* Gap between main and thumbs */
    background: transparent; /* Clean background */
    position: relative;
    z-index: 20;
}

#gallery-sync2 .item {
    padding: 0 5px; /* Spacing between thumbs */
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
}

#gallery-sync2 .item img {
    width: 100%;
    height: 80px; /* Smaller thumbnail height */
    object-fit: cover;
    border: none;
    display: block;
}

/* Active Thumbnail */
#gallery-sync2 .synced .item {
    opacity: 1;
}

#gallery-sync2 .synced .item img {
    /* Optional: active border if desired, or just opacity change */
    /* border: 2px solid #e1bd85; */
}

#gallery-sync2 .item:hover {
    opacity: 1;
}

/* Gallery Navigation Arrows (Overlay on Main Image) */
.gallery-nav-prev, .gallery-nav-next {
    position: absolute;
    top: 40%; /* Vertically centered on the main image part approx */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 50; /* Ensure above image */
    transition: all 0.3s ease;
}

.gallery-nav-prev { left: 20px; }
.gallery-nav-next { right: 20px; }

.gallery-nav-prev:hover, .gallery-nav-next:hover {
    background: #e1bd85;
    border-color: #e1bd85;
    color: #fff;
}

/* Responsive Gallery */
@media (max-width: 991px) {
    #gallery-sync1 .item img { height: 400px; }
    .gallery-nav-prev, .gallery-nav-next { top: 35%; } /* Adjust arrow position */
}

@media (max-width: 767px) {
    #gallery-sync1 .item img { height: 300px; }
    #gallery-sync2 .item img { height: 60px; }
    .gallery-nav-prev, .gallery-nav-next {
        width: 30px;
        height: 30px;
        font-size: 14px;
        top: 35%;
    }
}

@media (max-width: 480px) {
    #gallery-sync1 .item img { height: 200px; }
}

/* 3. Description Area */
#desc-container {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    max-width: 100%;
    margin: 0 auto;
}

#desc-container p {
    font-family: 'Hind', sans-serif; /* Matching site font */
    font-size: 16px;
    color: #666;
    font-style: italic;
    line-height: 1.6;
}

/* =========================================
   Responsive Styles
   ========================================= */

/* Tablet & Mobile (max-width: 991px) */
@media (max-width: 991px) {
    #sync1 .item img {
        height: 400px; /* Slightly smaller for tablets */
    }
}

/* Mobile Landscape & Portrait (max-width: 767px) */
@media (max-width: 767px) {
    #sync1 .item img {
        height: 300px; /* Smaller height for mobile */
    }

    .nav-container {
        padding: 0 35px; /* Reduce arrow space */
        margin-top: -15px; /* Adjust overlap */
    }

    .custom-nav-prev, .custom-nav-next {
        width: 35px;
        font-size: 16px;
    }

    #sync2 .item {
        font-size: 12px; /* Smaller text */
        padding: 15px 0;
    }

    #desc-container {
        padding: 20px 15px;
    }

    #desc-container p {
        font-size: 14px;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    #sync1 .item img {
        height: 250px; /* Even smaller for phones */
    }

    /* Optional: Hide arrows on very small screens if needed,
       but currently keeping them smaller */
    .custom-nav-prev, .custom-nav-next {
        width: 30px;
        font-size: 14px;
    }

    .nav-container {
        padding: 0 30px;
    }
}

/* =========================================
   About Us Section Improvements
   ========================================= */

.section-about {
    padding: 80px 0;
    background-color: #fff;
}

.about-text {
    /* Padding for desktop to separate from image */
    padding-left: 40px;
}

/* Typography Enhancements */
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #2a2a2a;
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: #e1bd85; /* Brand Gold */
}

.sub-title {
    font-family: 'Hind', sans-serif;
    font-size: 18px;
    font-weight: 600; /* Slightly bolder */
    color: #444;
    margin-bottom: 15px;
    line-height: 1.4;
}

.about-text p {
    font-family: 'Hind', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20px; /* Separator for paragraphs */
    text-align: justify; /* Cleaner block text */
}

.about-text b, .about-text strong {
    color: #333;
    font-weight: 600;
}

/* Feature Box for highlights */
.highlight-box {
    background-color: #fdfaf6; /* Very light beige/gold tint */
    border-left: 4px solid #e1bd85;
    padding: 20px 25px;
    margin: 30px 0;
    border-radius: 0 4px 4px 0;
}

.highlight-box p {
    margin-bottom: 5px;
    color: #444;
    font-style: italic;
    font-size: 16px;
}

.highlight-box span {
    color: #e1bd85;
    font-weight: 700;
}

/* Utilities */
.mt-30 { margin-top: 30px; }
.mt-50 { margin-top: 50px; }
.mb-30 { margin-bottom: 30px; }

/* Image Styling */
.about-img-wrapper {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

.about-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.about-img-wrapper:hover img {
    transform: scale(1.03); /* Subtle zoom effect */
}

/* Owl Carousel styling override for this section if needed */
.owl-single .owl-item img {
    border-radius: 4px;
}


/* Responsive Styles for About Section */
@media (max-width: 991px) {
    .section-about {
        padding: 50px 0;
    }

    .about-text {
        padding-left: 0;
        margin-top: 40px; /* Space between image and text on stack */
    }

    .row.reverse-layout {
        display: flex;
        flex-direction: column-reverse;
    }

    .row.reverse-layout .col-md-6 {
        width: 100%;
    }
}