/**
 * Stylesheet for: hotel-website-development.php
 * Extracted from internal style tags
 */

:root {
                --htl-primary: #cca352;
                --htl-primary-hover: #b38a39;
                --htl-dark: #0d1e26;
                --htl-dark-card: #142a35;
                --htl-accent: #d97736;
                --htl-bg-light: #fbfaf8;
                --htl-bg-warm: #f4efe6;
                --htl-text: #2a3337;
                --htl-text-muted: #5a666d;
                --htl-border: #e6e2da;
                --fstart-gold: #c69c6d;
                --fnd-gold: #cca352;
            }

            /* Hero Banner */
            .htl-hero-section {
                position: relative;
                background: linear-gradient(135deg, rgba(13, 30, 38, 0.95) 0%, rgba(20, 42, 53, 0.92) 100%), url('assets/images/background/contact-page-bg.jpg') center/cover no-repeat;
                padding: 170px 0 95px;
                color: #ffffff;
                overflow: hidden;
            }

            .htl-hero-section::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -20%;
                width: 650px;
                height: 650px;
                background: radial-gradient(circle, rgba(204, 163, 82, 0.2) 0%, transparent 70%);
                border-radius: 50%;
                pointer-events: none;
            }

            .htl-hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(204, 163, 82, 0.15);
                border: 1px solid rgba(204, 163, 82, 0.4);
                color: var(--htl-primary);
                font-size: 13px;
                font-weight: 700;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                padding: 8px 18px;
                border-radius: 50px;
                margin-bottom: 22px;
            }

            .htl-hero-title {
                font-size: 52px;
                font-weight: 700;
                line-height: 1.2;
                color: #ffffff;
                margin-bottom: 20px;
                letter-spacing: -0.5px;
            }

            .htl-hero-title span {
                color: var(--htl-primary);
            }

            .htl-hero-lead {
                font-size: 20px;
                line-height: 1.6;
                color: #d2dee4;
                max-width: 780px;
                margin-bottom: 35px;
                font-weight: 400;
            }

            .htl-hero-pills {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                margin-bottom: 40px;
            }

            .htl-hero-pill {
                background: rgba(255, 255, 255, 0.08);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.15);
                padding: 8px 18px;
                border-radius: 50px;
                font-size: 13.5px;
                color: #f1f5f3;
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }

            .htl-hero-pill i {
                color: var(--htl-primary);
            }

            .htl-hero-btns {
                display: flex;
                align-items: center;
                gap: 16px;
                flex-wrap: wrap;
            }

            /* Standardized 50px Buttons */
            .btn,
            .htl-btn-primary,
            .htl-btn-outline,
            .htl-btn-whatsapp {
                border-radius: 50px !important;
            }

            .htl-btn-primary {
                background: var(--htl-primary);
                color: #0d1e26 !important;
                font-weight: 700;
                font-size: 15px;
                padding: 14px 34px;
                border-radius: 50px;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                box-shadow: 0 10px 25px rgba(204, 163, 82, 0.35);
                border: none;
                text-decoration: none;
            }

            .htl-btn-primary:hover {
                background: #ffffff;
                color: #0d1e26 !important;
                transform: translateY(-3px);
                box-shadow: 0 14px 30px rgba(204, 163, 82, 0.45);
            }

            .htl-btn-outline {
                background: transparent;
                color: #ffffff !important;
                font-weight: 600;
                font-size: 15px;
                padding: 13px 30px;
                border-radius: 50px;
                border: 1.5px solid rgba(255, 255, 255, 0.35);
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                text-decoration: none;
            }

            .htl-btn-outline:hover {
                border-color: var(--htl-primary);
                color: var(--htl-primary) !important;
                background: rgba(204, 163, 82, 0.08);
                transform: translateY(-3px);
            }

            .htl-btn-whatsapp {
                background: #25d366;
                color: #ffffff !important;
                font-weight: 700;
                font-size: 15px;
                padding: 14px 32px;
                border-radius: 50px;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                transition: all 0.3s ease;
                text-decoration: none;
                box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
            }

            .htl-btn-whatsapp:hover {
                background: #1eb857;
                transform: translateY(-3px);
                box-shadow: 0 14px 30px rgba(37, 211, 102, 0.4);
            }

            /* Breadcrumb */
            ul.breadcrumb {
                column-gap: 10px;
                padding: 25px 0 10px 0;
                font-size: 13px !important;
                margin-bottom: 0;
                background: transparent;
            }

            ul.breadcrumb li a {
                color: rgba(255, 255, 255, 0.7);
                text-decoration: none;
                transition: color 0.2s ease;
            }

            ul.breadcrumb li a:hover {
                color: var(--fstart-gold);
            }

            ul.breadcrumb li span {
                color: var(--fnd-gold);
                font-weight: 600;
            }

            /* Global Section Styles */
            .htl-section {
                padding: 95px 0;
                position: relative;
            }

            .htl-section-bg-light {
                background-color: var(--htl-bg-light);
            }

            .htl-section-bg-warm {
                background-color: var(--htl-bg-warm);
            }

            .htl-section-bg-dark {
                background-color: var(--htl-dark);
                color: #ffffff;
            }

            .htl-sec-tag {
                display: inline-block;
                color: var(--htl-primary);
                font-size: 13px;
                font-weight: 800;
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 12px;
            }

            .htl-sec-heading {
                font-size: 38px;
                font-weight: 700;
                color: #111827;
                line-height: 1.25;
                margin-bottom: 16px;
            }

            .htl-section-bg-dark .htl-sec-heading {
                color: #ffffff;
            }

            .htl-sec-desc {
                font-size: 16px;
                line-height: 1.7;
                color: var(--htl-text-muted);
                max-width: 680px;
                margin: 0 auto;
            }

            .htl-section-bg-dark .htl-sec-desc {
                color: #cbd5e1;
            }

            /* 02. About Cards Grid */
            .htl-about-card {
                background: #ffffff;
                border: 1px solid var(--htl-border);
                border-radius: 16px;
                padding: 36px 30px;
                height: 100%;
                transition: all 0.35s ease;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
            }

            .htl-about-card:hover {
                transform: translateY(-7px);
                border-color: var(--htl-primary);
                box-shadow: 0 16px 35px rgba(204, 163, 82, 0.12);
            }

            .htl-card-icon {
                width: 64px;
                height: 64px;
                border-radius: 14px;
                background: rgba(204, 163, 82, 0.12);
                color: var(--htl-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26px;
                margin-bottom: 22px;
                transition: all 0.3s ease;
            }

            .htl-about-card:hover .htl-card-icon {
                background: var(--htl-primary);
                color: #0d1e26;
                transform: scale(1.06);
            }

            .htl-about-card h3,
            .htl-about-card h4 {
                font-size: 20px;
                font-weight: 700;
                color: #111827;
                margin-bottom: 12px;
            }

            .htl-about-card p {
                font-size: 14.5px;
                line-height: 1.65;
                color: var(--htl-text-muted);
                margin: 0;
            }

            /* 03. Services Grid */
            .htl-service-item {
                background: #ffffff;
                border: 1px solid #e2e8ec;
                border-radius: 14px;
                padding: 30px 24px;
                transition: all 0.3s ease;
                height: 100%;
                display: flex;
                flex-direction: column;
                position: relative;
                overflow: hidden;
            }

            .htl-service-item::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 4px;
                height: 100%;
                background: var(--htl-primary);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .htl-service-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
                border-color: rgba(204, 163, 82, 0.4);
            }

            .htl-service-item:hover::before {
                opacity: 1;
            }

            .htl-srv-top {
                display: flex;
                align-items: center;
                gap: 16px;
                margin-bottom: 16px;
            }

            .htl-srv-icon {
                width: 52px;
                height: 52px;
                border-radius: 12px;
                background: #faf6ed;
                color: #cca352;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22px;
                flex-shrink: 0;
            }

            .htl-service-item h4 {
                font-size: 18.5px;
                font-weight: 700;
                color: #111827;
                margin: 0;
            }

            .htl-service-item p {
                font-size: 14px;
                line-height: 1.6;
                color: #55605c;
                margin: 0;
                flex-grow: 1;
            }

            /* 04. Features Grid */
            .htl-feature-box {
                background: #ffffff;
                border: 1px solid #ebe6dc;
                border-radius: 12px;
                padding: 22px 20px;
                display: flex;
                align-items: flex-start;
                gap: 16px;
                transition: all 0.25s ease;
                height: 100%;
            }

            .htl-feature-box:hover {
                border-color: var(--htl-primary);
                background: #fdfbf7;
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
            }

            .htl-ft-icon {
                width: 44px;
                height: 44px;
                background: rgba(204, 163, 82, 0.15);
                color: var(--htl-primary);
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                flex-shrink: 0;
            }

            .htl-ft-text h5 {
                font-size: 16.5px;
                font-weight: 700;
                color: #111827;
                margin-bottom: 6px;
            }

            .htl-ft-text p {
                font-size: 13.5px;
                color: var(--htl-text-muted);
                line-height: 1.55;
                margin: 0;
            }

            /* 05. Booking & Payment Engine */
            .htl-booking-wrapper {
                background: #ffffff;
                border: 1px solid var(--htl-border);
                border-radius: 20px;
                padding: 45px 40px;
                box-shadow: 0 10px 35px rgba(0, 0, 0, 0.03);
            }

            .htl-book-card {
                background: #fbf9f5;
                border: 1px solid #ede7db;
                border-radius: 14px;
                padding: 22px;
                margin-bottom: 18px;
                transition: all 0.3s ease;
            }

            .htl-book-card:hover {
                background: #ffffff;
                border-color: var(--htl-primary);
                transform: translateX(4px);
            }

            .htl-book-card h5 {
                font-size: 17px;
                font-weight: 700;
                color: #111827;
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 8px;
            }

            .htl-book-card h5 i {
                color: var(--htl-primary);
            }

            .htl-book-card p {
                font-size: 14px;
                color: var(--htl-text-muted);
                margin: 0;
                line-height: 1.55;
            }

            /* 06. Admin Panel Section */
            .htl-admin-card {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: 14px;
                padding: 26px 22px;
                transition: all 0.3s ease;
                height: 100%;
            }

            .htl-admin-card:hover {
                background: rgba(255, 255, 255, 0.09);
                border-color: var(--htl-primary);
                transform: translateY(-4px);
            }

            .htl-admin-card i {
                font-size: 24px;
                color: var(--htl-primary);
                margin-bottom: 14px;
                display: inline-block;
            }

            .htl-admin-card h4 {
                font-size: 17px;
                font-weight: 700;
                color: #ffffff;
                margin-bottom: 8px;
            }

            .htl-admin-card p {
                font-size: 13.5px;
                color: #cbd5e1;
                margin: 0;
                line-height: 1.5;
            }

            /* 07. SEO & Performance */
            .htl-seo-box {
                background: #ffffff;
                border: 1px solid var(--htl-border);
                border-radius: 14px;
                padding: 26px 20px;
                display: flex;
                align-items: flex-start;
                gap: 15px;
                transition: all 0.3s ease;
                height: 100%;
            }

            .htl-seo-box:hover {
                border-color: var(--htl-primary);
                transform: translateY(-4px);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            }

            .htl-seo-icon {
                width: 48px;
                height: 48px;
                background: #fdf5e6;
                color: #cca352;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                flex-shrink: 0;
            }

            .htl-seo-info h5 {
                font-size: 16.5px;
                font-weight: 700;
                color: #111827;
                margin-bottom: 6px;
            }

            .htl-seo-info p {
                font-size: 13.5px;
                color: var(--htl-text-muted);
                margin: 0;
                line-height: 1.55;
            }

            /* 08. Why Hire Me */
            .htl-why-item {
                display: flex;
                align-items: flex-start;
                gap: 18px;
                margin-bottom: 24px;
                background: #ffffff;
                border: 1px solid var(--htl-border);
                border-radius: 12px;
                padding: 20px;
                transition: all 0.3s ease;
            }

            .htl-why-item:hover {
                border-color: var(--htl-primary);
                box-shadow: 0 8px 22px rgba(204, 163, 82, 0.1);
                transform: translateX(4px);
            }

            .htl-why-icon {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: rgba(204, 163, 82, 0.15);
                color: var(--htl-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 17px;
                flex-shrink: 0;
            }

            .htl-why-info h5 {
                font-size: 17px;
                font-weight: 700;
                color: #111827;
                margin-bottom: 5px;
            }

            .htl-why-info p {
                font-size: 14px;
                color: var(--htl-text-muted);
                margin: 0;
                line-height: 1.6;
            }

            /* 09. Process Roadmap */
            .htl-process-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 24px;
                position: relative;
            }

            @media (max-width: 991px) {
                .htl-process-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 575px) {
                .htl-process-grid {
                    grid-template-columns: 1fr;
                }
            }

            .htl-process-card {
                background: #ffffff;
                border: 1px solid var(--htl-border);
                border-radius: 16px;
                padding: 30px 22px;
                position: relative;
                transition: all 0.3s ease;
                height: 100%;
            }

            .htl-process-card:hover {
                border-color: var(--htl-primary);
                transform: translateY(-6px);
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
            }

            .htl-step-badge {
                width: 42px;
                height: 42px;
                background: var(--htl-primary);
                color: #0d1e26;
                font-size: 16px;
                font-weight: 800;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 18px;
            }

            .htl-process-card h4 {
                font-size: 17.5px;
                font-weight: 700;
                color: #111827;
                margin-bottom: 10px;
            }

            .htl-process-card p {
                font-size: 13.5px;
                color: var(--htl-text-muted);
                margin: 0;
                line-height: 1.55;
            }

            /* Portfolio Showcase */
            .htl-portfolio-card {
                background: #ffffff;
                border: 1px solid var(--htl-border);
                border-radius: 14px;
                overflow: hidden;
                transition: all 0.35s ease;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .htl-portfolio-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
                border-color: var(--htl-primary);
            }

            .htl-portfolio-banner {
                height: 200px;
                background: linear-gradient(135deg, #10242e 0%, #1e4557 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                position: relative;
                padding: 20px;
                text-align: center;
            }

            .htl-portfolio-banner i {
                font-size: 48px;
                color: var(--htl-primary);
                opacity: 0.85;
            }

            .htl-portfolio-body {
                padding: 24px;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
            }

            .htl-portfolio-tag {
                color: var(--htl-primary);
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: 8px;
            }

            .htl-portfolio-body h4 {
                font-size: 19px;
                font-weight: 700;
                color: #111827;
                margin-bottom: 10px;
            }

            .htl-portfolio-body p {
                font-size: 14px;
                color: var(--htl-text-muted);
                line-height: 1.6;
                margin-bottom: 18px;
                flex-grow: 1;
            }

            .htl-portfolio-features {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-bottom: 18px;
            }

            .htl-portfolio-badge {
                background: #f4efe6;
                color: #3b4443;
                font-size: 12px;
                padding: 4px 10px;
                border-radius: 6px;
                font-weight: 500;
            }

            /* FAQ Accordion */
            .htl-faq-item {
                background: #ffffff;
                border: 1px solid var(--htl-border);
                border-radius: 12px;
                margin-bottom: 16px;
                overflow: hidden;
                transition: all 0.3s ease;
            }

            .htl-faq-item:hover {
                border-color: var(--htl-primary);
            }

            .htl-faq-header {
                padding: 20px 24px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 17px;
                font-weight: 700;
                color: #111827;
                user-select: none;
            }

            .htl-faq-header i {
                color: var(--htl-primary);
                transition: transform 0.3s ease;
            }

            .htl-faq-body {
                padding: 0 24px 22px;
                font-size: 14.5px;
                line-height: 1.65;
                color: var(--htl-text-muted);
                display: none;
            }

            .htl-faq-item.active {
                border-color: var(--htl-primary);
                box-shadow: 0 6px 20px rgba(204, 163, 82, 0.08);
            }

            .htl-faq-item.active .htl-faq-header {
                color: #0d1e26;
            }

            .htl-faq-item.active .htl-faq-header i {
                transform: rotate(180deg);
            }

            .htl-faq-item.active .htl-faq-body {
                display: block;
            }

            /* 10. Final CTA Section */
            .htl-final-cta {
                padding: 100px 0;
                background: linear-gradient(135deg, #0d1e26 0%, #173543 100%);
                color: #ffffff;
                text-align: center;
                position: relative;
                overflow: hidden;
            }

            .htl-final-cta::after {
                content: '';
                position: absolute;
                bottom: -50%;
                left: 50%;
                transform: translateX(-50%);
                width: 800px;
                height: 800px;
                background: radial-gradient(circle, rgba(204, 163, 82, 0.12) 0%, transparent 70%);
                border-radius: 50%;
                pointer-events: none;
            }

            .htl-final-cta h2 {
                font-size: 44px;
                font-weight: 800;
                color: #ffffff;
                margin-bottom: 20px;
            }

            .htl-final-cta p {
                font-size: 19px;
                line-height: 1.6;
                color: #d2dee4;
                max-width: 680px;
                margin: 0 auto 36px;
            }

            .htl-cta-btns {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 16px;
                flex-wrap: wrap;
                position: relative;
                z-index: 2;
            }

            @media (max-width: 768px) {
                .htl-hero-title {
                    font-size: 36px;
                }

                .htl-hero-lead {
                    font-size: 17px;
                }

                .htl-sec-heading {
                    font-size: 28px;
                }

                .htl-final-cta h2 {
                    font-size: 32px;
                }

                .htl-booking-wrapper {
                    padding: 25px 20px;
                }
            }