/* =========================================
   Variables & Base Styles
========================================= */
:root {
    --primary-color: #c5a059;
    --primary-hover: #b08d4a;
    --dark-color: #2c2523;
    --light-bg: #f9f6f0;
    --white: #ffffff;
    --text-dark: #333333;
    --text-muted: #666666;
    --whatsapp-color: #25D366;
    --font-main: 'Tajawal', sans-serif;
    --transition: all 0.3s ease;
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-main);
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; max-width: 100%; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.section { padding: 80px 0; }
.bg-light { background-color: var(--light-bg); }
.text-center { text-align: center; }
.w-100 { width: 100%; display: block; text-align: center; }
.mt-20 { margin-top: 20px; }

/* =========================================
   Typography & Titles
========================================= */
.section-subtitle {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px;
    position: relative;
}
.section-title { font-size: 2.2rem; color: var(--dark-color); font-weight: 800; margin-bottom: 20px; }
.section-desc { color: var(--text-muted); max-width: 600px; margin: 0 auto 40px; }

/* =========================================
   Buttons
========================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 28px; border-radius: 50px; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: var(--transition); border: none; font-family: var(--font-main);
    text-align: center;
}
.btn-primary { background-color: var(--primary-color); color: var(--white); box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3); }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(197, 160, 89, 0.4); }
.btn-outline { background-color: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-outline:hover { background-color: var(--white); color: var(--dark-color); }
.btn-large { padding: 15px 35px; font-size: 1.1rem; }

/* =========================================
   Top Bar
========================================= */
.top-bar { background-color: var(--dark-color); color: #ccc; padding: 8px 0; font-size: 0.85rem; }
.top-bar-content { display: flex; justify-content: space-between; align-items: center; }
.top-info { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.top-info span { display: flex; align-items: center; gap: 5px; }
.top-info i { color: var(--primary-color); }
.top-info a { color: #ccc; transition: var(--transition); }
.top-info a:hover { color: var(--primary-color); }
.live-time { background: rgba(197, 160, 89, 0.2); padding: 4px 12px; border-radius: 50px; font-weight: 600; }
.live-time i { animation: pulse 1.5s infinite; }
.top-social { display: flex; gap: 15px; }
.top-social a { color: #ccc; transition: var(--transition); }
.top-social a:hover { color: var(--primary-color); }

/* =========================================
   Header & Navigation
========================================= */
.header { position: fixed; top: 35px; left: 0; width: 100%; z-index: 1000; transition: var(--transition); padding: 20px 0; }
.header.scrolled { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); padding: 10px 0; box-shadow: var(--shadow-sm); top: 0; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo-img { height: 60px; transition: var(--transition); }
.header.scrolled .logo-img { height: 50px; }
.nav-list { display: flex; gap: 20px; }
.nav-link { color: var(--white); font-weight: 500; font-size: 1rem; position: relative; transition: var(--transition); }
.header.scrolled .nav-link { color: var(--dark-color); }
.nav-link::after { content: ''; position: absolute; bottom: -5px; right: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover, .nav-link.active { color: var(--primary-color); }
.nav-toggle, .nav-close { display: none; cursor: pointer; font-size: 1.5rem; }

/* =========================================
   Hero Section
========================================== */
.hero {
    height: 100vh;
    min-height: 750px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: #1a1514;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoomVideo 25s infinite alternate;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(26, 21, 20, 0.85) 0%,
        rgba(44, 37, 35, 0.5) 50%,
        rgba(26, 21, 20, 0.9) 100%
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    max-width: 850px;
    margin-top: -60px;
    padding: 0 20px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(197, 160, 89, 0.15);
    border: 1px solid rgba(197, 160, 89, 0.5);
    color: #c5a059;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.hero-badge i {
    color: #f1c40f;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #c5a059;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    letter-spacing: -1px;
}

.hero-description {
    font-size: 1.25rem;
    margin-bottom: 45px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 60px;
}

.btn-primary {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border: none;
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.4);
    transition: all 0.4s ease;
}
.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(197, 160, 89, 0.6);
}
.btn-outline {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}
.btn-outline:hover {
    background: #ffffff;
    color: #1a1514;
    border-color: #ffffff;
    transform: translateY(-4px);
}

.booking-widget-container {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    z-index: 10;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: 4px solid #c5a059;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    padding: 25px 30px;
    display: flex;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    transition: transform 0.3s ease;
}
.glass-effect:hover {
    transform: translateY(-5px);
}

.booking-widget .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
}
.booking-widget label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2c2523;
    display: flex;
    align-items: center;
    gap: 5px;
}
.booking-widget label i {
    color: #c5a059;
}
.booking-widget input,
.booking-widget select {
    padding: 12px 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95rem;
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    color: #333;
    width: 100%;
}
.booking-widget input:focus,
.booking-widget select:focus {
    border-color: #c5a059;
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.15);
    background: #ffffff;
}

.btn-widget {
    padding: 12px 30px;
    height: 48px;
    white-space: nowrap;
    font-size: 1rem;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    z-index: 3;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.scroll-down:hover {
    opacity: 1;
}

@keyframes zoomVideo {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-15px) translateX(-50%); }
    60% { transform: translateY(-7px) translateX(-50%); }
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   Hero Booking Widget - Premium Design
========================================== */
.booking-widget-container {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.booking-widget-header {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(26, 21, 20, 0.95), rgba(44, 37, 35, 0.95));
    backdrop-filter: blur(20px);
    padding: 18px 25px;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
.booking-widget-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.15), transparent 70%);
    pointer-events: none;
}

.booking-header-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
    position: relative;
    z-index: 2;
}

.booking-header-text {
    flex: 1;
    position: relative;
    z-index: 2;
}
.booking-header-text h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 3px;
    line-height: 1.2;
}
.booking-header-text p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    font-weight: 500;
}

.booking-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.2), rgba(37, 211, 102, 0.1));
    border: 1px solid rgba(37, 211, 102, 0.4);
    color: #25D366;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}
.booking-header-badge i {
    font-size: 0.7rem;
    animation: pulseBolt 1.5s ease-in-out infinite;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    padding: 25px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 15px;
    align-items: end;
    position: relative;
    transition: transform 0.3s ease;
}
.glass-effect:hover {
    transform: translateY(-3px);
}

.booking-widget .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
    min-width: 0;
}

.booking-widget label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #2c2523;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.booking-widget label i {
    color: #c5a059;
    font-size: 0.85rem;
}
.booking-widget label span {
    color: #2c2523;
}

.booking-widget .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.booking-widget input,
.booking-widget select {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    background: #fafafa;
    transition: all 0.3s ease;
    color: #2c2523;
    cursor: pointer;
}
.booking-widget input:hover,
.booking-widget select:hover {
    border-color: rgba(197, 160, 89, 0.4);
    background: #ffffff;
}
.booking-widget input:focus,
.booking-widget select:focus {
    border-color: #c5a059;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.15);
}

.booking-widget select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a059' stroke-width='2.5'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 14px;
    padding-left: 38px;
}

.btn-widget {
    padding: 12px 26px;
    height: 48px;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 800;
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    border: none;
    cursor: pointer;
    color: #ffffff;
    font-family: 'Tajawal', sans-serif;
}
.btn-widget:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55) !important;
}
.btn-widget i {
    font-size: 1.1rem;
}

.booking-info-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 25px;
    background: rgba(26, 21, 20, 0.9);
    backdrop-filter: blur(15px);
    border-radius: 0 0 20px 20px;
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-top: 1px solid rgba(197, 160, 89, 0.15);
    margin-top: -1px;
    flex-wrap: wrap;
}

.booking-info-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.3s ease;
}
.booking-info-item i {
    color: #c5a059;
    font-size: 0.85rem;
}
.booking-info-item:hover {
    color: #c5a059;
    transform: translateY(-2px);
}

.booking-info-divider {
    width: 1px;
    height: 18px;
    background: rgba(197, 160, 89, 0.3);
}

.stats-section {
    padding-top: 140px !important;
}

@keyframes pulseBolt {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* =========================================
   Stats Section - Premium Dark Design
========================================== */
.stats-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #1a1514 0%, #2c2523 50%, #1a1514 100%);
    overflow: hidden;
    isolation: isolate;
}

.stats-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.04;
    background-image: 
        radial-gradient(circle at 20% 30%, #c5a059 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, #c5a059 1px, transparent 1px),
        linear-gradient(45deg, transparent 49%, #c5a059 49%, #c5a059 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #c5a059 49%, #c5a059 51%, transparent 51%);
    background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
    background-position: 0 0, 30px 30px, 0 0, 0 0;
}

.stats-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: 0.25;
}
.stats-glow-1 {
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #c5a059, transparent 70%);
    animation: floatGlow 8s ease-in-out infinite;
}
.stats-glow-2 {
    bottom: -100px;
    left: -100px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #8b6f3d, transparent 70%);
    animation: floatGlow 10s ease-in-out infinite reverse;
}

.stats-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 2;
}
.stats-subtitle {
    display: inline-block;
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
    padding: 0 40px;
}
.stats-subtitle::before,
.stats-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c5a059);
    transform: translateY(-50%);
}
.stats-subtitle::before { right: 0; }
.stats-subtitle::after { left: 0; transform: translateY(-50%) scaleX(-1); }

.stats-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.stat-item {
    position: relative;
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    overflow: hidden;
    cursor: pointer;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(197, 160, 89, 0.15),
        transparent
    );
    transition: left 0.7s ease;
}
.stat-item:hover::before {
    left: 100%;
}

.stat-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
    transition: width 0.5s ease;
}
.stat-item:hover::after {
    width: 80%;
}

.stat-item:hover {
    transform: translateY(-12px);
    border-color: rgba(197, 160, 89, 0.5);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(197, 160, 89, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.stat-icon-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(197, 160, 89, 0.4);
    border-radius: 50%;
    animation: rotateCircle 20s linear infinite;
}
.stat-item:hover .stat-icon-wrapper::before {
    border-color: rgba(197, 160, 89, 0.8);
    animation-duration: 8s;
}

.stat-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.2), transparent 70%);
    border-radius: 50%;
    transition: all 0.5s ease;
}
.stat-item:hover .stat-icon-bg {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.4), transparent 70%);
}

.stat-icon-wrapper i {
    position: relative;
    z-index: 2;
    font-size: 2rem;
    color: #c5a059;
    transition: all 0.5s ease;
}
.stat-item:hover .stat-icon-wrapper i {
    transform: scale(1.15) rotateY(360deg);
    color: #f1c40f;
    text-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
}

.stat-content {
    position: relative;
    z-index: 2;
}

.stat-content h3 {
    display: inline-block;
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin: 0;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    transition: all 0.5s ease;
}

.stat-plus {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    color: #c5a059;
    margin-right: 2px;
    transition: all 0.5s ease;
    vertical-align: super;
}

.stat-item:hover .stat-content h3 {
    color: #c5a059;
    text-shadow: 0 0 30px rgba(197, 160, 89, 0.5);
}
.stat-item:hover .stat-plus {
    color: #f1c40f;
    transform: scale(1.2);
}

.stat-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    margin: 10px 0 0;
    letter-spacing: 1px;
    transition: all 0.5s ease;
}
.stat-item:hover .stat-content p {
    color: #ffffff;
}

@media (min-width: 993px) {
    .stat-item:not(:last-child)::before {
    }
    .stats-grid .stat-item:not(:last-child) .stat-content::after {
        content: '';
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 60%;
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(197, 160, 89, 0.3),
            transparent
        );
    }
}

@keyframes rotateCircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.1); }
}

.stats-section .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.stats-section .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.stat-item:nth-child(1) { transition-delay: 0.1s; }
.stat-item:nth-child(2) { transition-delay: 0.2s; }
.stat-item:nth-child(3) { transition-delay: 0.3s; }
.stat-item:nth-child(4) { transition-delay: 0.4s; }

/* =========================================
   About Section - Premium Redesign
========================================== */
.about {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(180deg, #f9f6f0 0%, #ffffff 100%);
    overflow: hidden;
    isolation: isolate;
}

.about-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
    opacity: 0.03;
    background-image: 
        radial-gradient(circle, #c5a059 1.5px, transparent 1.5px);
    background-size: 40px 40px;
}

.about-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
}
.about-glow-1 {
    top: -50px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.15), transparent 70%);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.about-images {
    position: relative;
    height: 600px;
}

.about-img-main {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 70%;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    z-index: 2;
}
.about-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.about-img-main:hover img {
    transform: scale(1.08);
}
.img-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(197, 160, 89, 0.2));
    pointer-events: none;
}

.about-img-secondary {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 55%;
    height: 55%;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    border: 6px solid #ffffff;
    z-index: 3;
}
.about-img-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.about-img-secondary:hover img {
    transform: scale(1.08);
}

.about-img-tertiary {
    position: absolute;
    top: 15%;
    left: 0;
    width: 30%;
    height: 30%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 5px solid #ffffff;
    z-index: 4;
}
.about-img-tertiary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.about-img-tertiary:hover img {
    transform: scale(1.1);
}

.floating-rating-card {
    position: absolute;
    bottom: 30%;
    right: -20px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff;
    padding: 18px 25px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    z-index: 5;
    animation: floatCard 3s ease-in-out infinite;
    border-right: 4px solid #c5a059;
}

.rating-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
}

.rating-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rating-number {
    font-size: 1.6rem;
    font-weight: 900;
    color: #2c2523;
    line-height: 1;
}
.rating-stars {
    color: #f1c40f;
    font-size: 0.75rem;
    display: flex;
    gap: 2px;
}
.rating-label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
}

.about-deco-circle {
    position: absolute;
    top: -30px;
    left: 10%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(197, 160, 89, 0.3);
    border-radius: 50%;
    z-index: 1;
    animation: rotateCircle 25s linear infinite;
}
.about-deco-circle::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 1px dashed rgba(197, 160, 89, 0.5);
    border-radius: 50%;
}

.about-deco-dots {
    position: absolute;
    bottom: 5%;
    right: 10%;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(circle, #c5a059 2px, transparent 2px);
    background-size: 15px 15px;
    opacity: 0.3;
    z-index: 1;
}

.about-text {
    position: relative;
}

.about-subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.about-line {
    display: inline-block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #c5a059, transparent);
}

.section-subtitle {
    display: inline-block;
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 25px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}

.about-lead {
    font-size: 1.15rem;
    color: #2c2523;
    font-weight: 600;
    line-height: 1.9;
    margin-bottom: 18px;
    padding-right: 20px;
    border-right: 4px solid #c5a059;
}

.about-desc {
    font-size: 1.02rem;
    color: #666;
    line-height: 1.9;
    margin-bottom: 35px;
}

.about-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px;
    background: #ffffff;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #c5a059, #b08d4a);
    transition: height 0.4s ease;
}
.feature-card:hover::before {
    height: 100%;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.15);
    border-color: rgba(197, 160, 89, 0.2);
}

.feature-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(197, 160, 89, 0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
}
.feature-icon i {
    font-size: 1.2rem;
    color: #c5a059;
    transition: all 0.4s ease;
}
.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    transform: rotate(-8deg) scale(1.1);
}
.feature-card:hover .feature-icon i {
    color: #ffffff;
    transform: scale(1.1);
}

.feature-text h4 {
    font-size: 0.98rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 4px;
}
.feature-text p {
    font-size: 0.82rem;
    color: #888;
    margin: 0;
    line-height: 1.5;
}

.about-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 25px;
    border-top: 1px dashed rgba(197, 160, 89, 0.3);
}

.about-footer .btn {
    padding: 15px 35px;
    font-size: 1rem;
}

.about-signature {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}
.sig-text {
    font-family: 'Tajawal', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: #2c2523;
    letter-spacing: -1px;
}
.sig-sub {
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: #c5a059;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 4px;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.about .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.about .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.about-features-grid .feature-card:nth-child(1) { transition-delay: 0.1s; }
.about-features-grid .feature-card:nth-child(2) { transition-delay: 0.2s; }
.about-features-grid .feature-card:nth-child(3) { transition-delay: 0.3s; }
.about-features-grid .feature-card:nth-child(4) { transition-delay: 0.4s; }

/* =========================================
   Rooms Section - Premium Design
========================================== */
.rooms {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f9f6f0 100%);
    overflow: hidden;
    isolation: isolate;
}

.rooms-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.025;
    background-image: radial-gradient(circle, #c5a059 1.5px, transparent 1.5px);
    background-size: 50px 50px;
}

.rooms-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
}
.rooms-glow-1 {
    top: 10%;
    right: -150px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.15), transparent 70%);
}
.rooms-glow-2 {
    bottom: 10%;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 111, 61, 0.12), transparent 70%);
}

.rooms-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.rooms-line {
    display: inline-block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
}
.section-subtitle {
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}
.section-desc {
    color: #666;
    max-width: 650px;
    margin: 0 auto 50px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.rooms-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 50px;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}

.filter-btn i {
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: rgba(197, 160, 89, 0.5);
    color: #c5a059;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15);
}

.filter-btn.active {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.35);
    transform: translateY(-2px);
}
.filter-btn.active i {
    transform: scale(1.1);
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.room-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.room-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    border-color: rgba(197, 160, 89, 0.2);
}

.room-card.featured {
    border: 2px solid rgba(197, 160, 89, 0.3);
}
.room-card.featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
    z-index: 3;
}

.room-img-wrapper {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.room-img {
    width: 100%;
    height: 100%;
    position: relative;
}

.room-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.room-card:hover .room-img img {
    transform: scale(1.12);
}

.room-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 30%,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
}

.room-availability {
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2c2523;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.room-availability .dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulseDot 2s infinite;
}

.room-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.best-seller {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
}
.premium-badge {
    background: linear-gradient(135deg, #2c2523, #1a1514);
    color: #c5a059;
    border: 1px solid rgba(197, 160, 89, 0.3);
}
.new-badge {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
}
.room-badge i {
    font-size: 0.7rem;
}

.quick-view-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    color: #c5a059;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    z-index: 4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.room-card:hover .quick-view-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.quick-view-btn:hover {
    background: #c5a059;
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.1) rotate(90deg);
}

.room-price-tag {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 14px;
    z-index: 3;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-align: center;
    border-bottom: 3px solid #c5a059;
    min-width: 100px;
}
.price-label {
    display: block;
    font-size: 0.65rem;
    color: #888;
    font-weight: 600;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}
.price-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}
.price-number {
    font-size: 1.3rem;
    font-weight: 900;
    color: #2c2523;
    line-height: 1;
}
.price-currency {
    font-size: 0.75rem;
    color: #c5a059;
    font-weight: 700;
}
.price-unit {
    display: block;
    font-size: 0.65rem;
    color: #999;
    margin-top: 2px;
}

.room-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.room-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.8rem;
}
.room-rating .stars {
    color: #f1c40f;
    display: flex;
    gap: 2px;
    font-size: 0.75rem;
}
.rating-score {
    font-weight: 800;
    color: #2c2523;
    font-size: 0.9rem;
}
.rating-count {
    color: #999;
    font-size: 0.75rem;
}

.room-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 10px;
    line-height: 1.3;
}
.room-desc {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

.room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(197, 160, 89, 0.08);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2c2523;
}
.meta-item i {
    color: #c5a059;
    font-size: 0.85rem;
}

.room-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}
.room-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #555;
    font-weight: 500;
}
.room-features li i {
    color: #c5a059;
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.room-cta {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.room-cta .btn {
    flex: 1;
    padding: 12px 15px;
    font-size: 0.92rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.room-cta .btn-primary {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3);
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.room-cta .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(197, 160, 89, 0.5);
}

.btn-details {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(197, 160, 89, 0.1);
    border: 1.5px solid rgba(197, 160, 89, 0.2);
    color: #c5a059;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.btn-details:hover {
    background: #c5a059;
    color: #ffffff;
    transform: rotate(15deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
}

.rooms-cta-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 60px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.08), rgba(197, 160, 89, 0.03));
    border-radius: 20px;
    border: 1px dashed rgba(197, 160, 89, 0.3);
}
.rooms-cta-footer p {
    margin: 0;
    color: #2c2523;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rooms-cta-footer p i {
    color: #c5a059;
    font-size: 1.1rem;
}
.btn-outline-dark {
    background: transparent;
    color: #2c2523;
    border: 2px solid #2c2523;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.btn-outline-dark:hover {
    background: #2c2523;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(44, 37, 35, 0.25);
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.rooms .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.rooms .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.rooms-grid .room-card:nth-child(1) { transition-delay: 0.1s; }
.rooms-grid .room-card:nth-child(2) { transition-delay: 0.2s; }
.rooms-grid .room-card:nth-child(3) { transition-delay: 0.3s; }
.rooms-grid .room-card:nth-child(4) { transition-delay: 0.4s; }

/* =========================================
   Services Section - Premium Dark Design
========================================== */
.services {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg, #1a1514 0%, #2c2523 50%, #1a1514 100%);
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
}

.services-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.03;
    background-image: 
        radial-gradient(circle at 20% 30%, #c5a059 1.5px, transparent 1.5px),
        radial-gradient(circle at 80% 70%, #c5a059 1.5px, transparent 1.5px),
        linear-gradient(45deg, transparent 49%, #c5a059 49%, #c5a059 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #c5a059 49%, #c5a059 51%, transparent 51%);
    background-size: 70px 70px, 70px 70px, 70px 70px, 70px 70px;
}

.services-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    opacity: 0.2;
}
.services-glow-1 {
    top: -100px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #c5a059, transparent 70%);
    animation: floatGlow 9s ease-in-out infinite;
}
.services-glow-2 {
    bottom: -150px;
    right: -150px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #8b6f3d, transparent 70%);
    animation: floatGlow 11s ease-in-out infinite reverse;
}

.services-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.services-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
}
.services .section-subtitle {
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.services .section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}
.services .highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.services .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}
.services .section-desc {
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto 60px;
    font-size: 1.05rem;
    line-height: 1.9;
}

.featured-service {
    display: flex;
    align-items: center;
    gap: 30px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.12), rgba(197, 160, 89, 0.04));
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 24px;
    padding: 35px 40px;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
}
.featured-service::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.15), transparent 70%);
    pointer-events: none;
}
.featured-service:hover {
    border-color: rgba(197, 160, 89, 0.5);
    box-shadow: 0 20px 50px rgba(197, 160, 89, 0.15);
    transform: translateY(-5px);
}

.featured-service-icon {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.featured-service-icon i {
    font-size: 2.5rem;
    color: #c5a059;
    z-index: 2;
    transition: all 0.5s ease;
}
.featured-service:hover .featured-service-icon i {
    transform: scale(1.15) rotateY(360deg);
    color: #f1c40f;
    text-shadow: 0 0 25px rgba(241, 196, 15, 0.6);
}
.icon-rings {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(197, 160, 89, 0.4);
    animation: rotateCircle 20s linear infinite;
}
.icon-rings::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(197, 160, 89, 0.3);
}
.featured-service:hover .icon-rings {
    border-color: rgba(197, 160, 89, 0.8);
    animation-duration: 8s;
}

.featured-service-content {
    flex: 1;
    text-align: right;
}
.featured-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(197, 160, 89, 0.15);
    color: #c5a059;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 12px;
    border: 1px solid rgba(197, 160, 89, 0.3);
}
.featured-label i {
    color: #f1c40f;
}
.featured-service-content h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}
.featured-service-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

.featured-service-cta {
    flex-shrink: 0;
}
.featured-service-cta .btn {
    padding: 14px 30px;
    font-size: 1rem;
    white-space: nowrap;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.service-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: 20px;
    padding: 35px 28px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(197, 160, 89, 0.12),
        transparent
    );
    transition: left 0.8s ease;
    pointer-events: none;
}
.service-card:hover::before {
    left: 100%;
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
    transition: width 0.5s ease;
}
.service-card:hover::after {
    width: 85%;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(197, 160, 89, 0.5);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(197, 160, 89, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.service-number {
    position: absolute;
    top: 20px;
    left: 25px;
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(197, 160, 89, 0.15);
    line-height: 1;
    transition: all 0.5s ease;
    font-family: 'Tajawal', sans-serif;
    letter-spacing: -2px;
}
.service-card:hover .service-number {
    color: rgba(197, 160, 89, 0.4);
    transform: scale(1.1) translateY(-5px);
}

.service-icon-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.service-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.2), transparent 70%);
    border-radius: 50%;
    transition: all 0.5s ease;
}
.service-card:hover .service-icon-bg {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.4), transparent 70%);
}
.service-icon-wrapper i {
    position: relative;
    z-index: 2;
    font-size: 1.8rem;
    color: #c5a059;
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
}
.service-card:hover .service-icon-wrapper i {
    transform: scale(1.15) rotateY(360deg);
    color: #f1c40f;
    text-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
}

.service-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    transition: color 0.4s ease;
    position: relative;
    z-index: 2;
}
.service-card:hover .service-title {
    color: #c5a059;
}

.service-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    margin-bottom: 20px;
    flex: 1;
    position: relative;
    z-index: 2;
    transition: color 0.4s ease;
}
.service-card:hover .service-desc {
    color: rgba(255, 255, 255, 0.8);
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c5a059;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    position: relative;
    z-index: 2;
    padding: 8px 0;
    border-top: 1px dashed rgba(197, 160, 89, 0.2);
    margin-top: auto;
    padding-top: 15px;
}
.service-link i {
    transition: transform 0.4s ease;
    font-size: 0.75rem;
}
.service-card:hover .service-link {
    gap: 12px;
    color: #f1c40f;
}
.service-card:hover .service-link i {
    transform: translateX(-5px);
}

.services-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 70px;
    padding: 30px 45px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.08), rgba(197, 160, 89, 0.02));
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
}
.services-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: center;
    min-width: 180px;
}
.services-stat-item i {
    font-size: 2rem;
    color: #c5a059;
    transition: all 0.4s ease;
}
.services-stat-item:hover i {
    transform: scale(1.15) rotateY(360deg);
    color: #f1c40f;
}
.services-stat-item > div {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-top: 3px;
}
.services-stat-divider {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(197, 160, 89, 0.4), transparent);
}

.services .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.services .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.services-grid .service-card:nth-child(1) { transition-delay: 0.05s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.15s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.2s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.25s; }
.services-grid .service-card:nth-child(6) { transition-delay: 0.3s; }
.services-grid .service-card:nth-child(7) { transition-delay: 0.35s; }
.services-grid .service-card:nth-child(8) { transition-delay: 0.4s; }

/* =========================================
   Gallery Section - Premium Design
========================================== */
.gallery {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(180deg, #f9f6f0 0%, #ffffff 100%);
    overflow: hidden;
    isolation: isolate;
}

.gallery-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: -1;
    opacity: 0.03;
    background-image: radial-gradient(circle, #c5a059 1.5px, transparent 1.5px);
    background-size: 45px 45px;
}

.gallery-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
}
.gallery-glow-1 {
    top: 10%;
    left: -150px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.12), transparent 70%);
}

.gallery-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.gallery-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
}
.gallery .section-subtitle {
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.gallery .section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.gallery .highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.gallery .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}
.gallery .section-desc {
    color: #666;
    max-width: 650px;
    margin: 0 auto 50px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.gallery-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 50px;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.filter-btn i {
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.filter-btn:hover {
    border-color: rgba(197, 160, 89, 0.5);
    color: #c5a059;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15);
}
.filter-btn.active {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.35);
    transform: translateY(-2px);
}
.filter-btn.active i {
    transform: scale(1.1);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 20px;
    margin-bottom: 60px;
}

.gallery-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    grid-column: span 1;
    grid-row: span 1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.gallery-item-large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.gallery-item-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.gallery-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.5, 0, 0, 1);
}
.gallery-item:hover .gallery-img-wrapper img {
    transform: scale(1.15);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 40%,
        rgba(26, 21, 20, 0.85) 100%
    );
    opacity: 0.7;
    transition: opacity 0.5s ease;
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
    background: linear-gradient(
        180deg,
        rgba(197, 160, 89, 0.3) 0%,
        rgba(26, 21, 20, 0.5) 40%,
        rgba(26, 21, 20, 0.95) 100%
    );
}

.gallery-hover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    z-index: 3;
}
.gallery-item:hover .gallery-hover-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-icon {
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-size: 1.4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}
.gallery-item:hover .gallery-icon {
    background: #c5a059;
    color: #ffffff;
    transform: rotate(90deg);
}

.gallery-info {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 25px 20px 20px;
    z-index: 3;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
}
.gallery-item:hover .gallery-info {
    transform: translateY(0);
    opacity: 1;
}

.gallery-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(197, 160, 89, 0.95);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 10px;
    backdrop-filter: blur(10px);
}
.gallery-tag i {
    font-size: 0.7rem;
}

.gallery-info h4 {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.gallery-item-large .gallery-info h4 {
    font-size: 1.5rem;
}

.gallery-cta-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.08), rgba(197, 160, 89, 0.02));
    border-radius: 20px;
    border: 1px dashed rgba(197, 160, 89, 0.3);
}
.gallery-cta-footer p {
    margin: 0;
    color: #2c2523;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gallery-cta-footer p i {
    color: #c5a059;
    font-size: 1.2rem;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    padding: 30px;
}
.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 11, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.lightbox-content {
    position: relative;
    max-width: 1100px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-image-wrapper {
    position: relative;
    width: 100%;
    max-height: 75vh;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    border: 3px solid rgba(197, 160, 89, 0.3);
}
.lightbox-image-wrapper img {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    display: block;
    background: #1a1514;
}

.lightbox-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    padding: 0 10px;
}
.lightbox-info h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lightbox-info h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #c5a059, #b08d4a);
    border-radius: 2px;
}

.lightbox-counter {
    background: rgba(197, 160, 89, 0.15);
    border: 1px solid rgba(197, 160, 89, 0.4);
    color: #c5a059;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.lightbox-close:hover {
    background: #c5a059;
    border-color: #c5a059;
    transform: rotate(90deg) scale(1.1);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.lightbox-nav:hover {
    background: #c5a059;
    border-color: #c5a059;
    transform: translateY(-50%) scale(1.1);
}
.lightbox-prev {
    right: 30px;
}
.lightbox-next {
    left: 30px;
}

.gallery .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.gallery .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.gallery-grid .gallery-item:nth-child(1) { transition-delay: 0.05s; }
.gallery-grid .gallery-item:nth-child(2) { transition-delay: 0.1s; }
.gallery-grid .gallery-item:nth-child(3) { transition-delay: 0.15s; }
.gallery-grid .gallery-item:nth-child(4) { transition-delay: 0.2s; }
.gallery-grid .gallery-item:nth-child(5) { transition-delay: 0.25s; }
.gallery-grid .gallery-item:nth-child(6) { transition-delay: 0.3s; }
.gallery-grid .gallery-item:nth-child(7) { transition-delay: 0.35s; }
.gallery-grid .gallery-item:nth-child(8) { transition-delay: 0.4s; }

/* =========================================
   Testimonials Section - NEW Grid Design
========================================== */
.testimonials-new {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg, #1a1514 0%, #2c2523 50%, #1a1514 100%);
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
}

.tn-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.03;
    background-image: 
        radial-gradient(circle at 25% 25%, #c5a059 1.5px, transparent 1.5px),
        radial-gradient(circle at 75% 75%, #c5a059 1.5px, transparent 1.5px);
    background-size: 60px 60px;
}

.tn-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    opacity: 0.2;
}
.tn-glow-1 {
    top: -100px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #c5a059, transparent 70%);
    animation: tnFloatGlow 10s ease-in-out infinite;
}
.tn-glow-2 {
    bottom: -150px;
    left: -150px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #8b6f3d, transparent 70%);
    animation: tnFloatGlow 12s ease-in-out infinite reverse;
}

.tn-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.tn-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
}
.testimonials-new .section-subtitle {
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.testimonials-new .section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.testimonials-new .highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.testimonials-new .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}
.testimonials-new .section-desc {
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto 60px;
    font-size: 1.05rem;
    line-height: 1.9;
}

.tn-overview {
    display: grid;
    grid-template-columns: auto 1px 1fr;
    gap: 45px;
    align-items: center;
    padding: 40px 50px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(197, 160, 89, 0.03));
    border: 1px solid rgba(197, 160, 89, 0.25);
    border-radius: 28px;
    margin-bottom: 60px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.tn-overview::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.15), transparent 70%);
    pointer-events: none;
}

.tn-overview-score {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 2;
}

.tn-score-circle {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}
.tn-score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.tn-score-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
}
.tn-score-progress {
    fill: none;
    stroke: url(#tnGradient);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: tnScoreFill 2s cubic-bezier(0.5, 0, 0, 1) forwards;
}
.tn-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.tn-score-number {
    font-size: 2.2rem;
    font-weight: 900;
    color: #c5a059;
    line-height: 1;
    letter-spacing: -2px;
}
.tn-score-max {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
}

.tn-score-info h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}
.tn-score-stars {
    color: #f1c40f;
    font-size: 1rem;
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}
.tn-score-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
}
.tn-score-info p strong {
    color: #c5a059;
    font-weight: 800;
}

.tn-overview-divider {
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(197, 160, 89, 0.4), transparent);
}

.tn-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}
.tn-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    cursor: default;
}
.tn-stat:hover {
    background: rgba(197, 160, 89, 0.08);
    transform: translateY(-3px);
}
.tn-stat-icon {
    width: 42px;
    height: 42px;
    background: rgba(197, 160, 89, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-size: 1rem;
    flex-shrink: 0;
}
.tn-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tn-stat-value {
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}
.tn-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.tn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 60px;
}

.tn-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 32px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    cursor: pointer;
}
.tn-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 0;
    background: var(--card-accent, #c5a059);
    transition: height 0.5s cubic-bezier(0.5, 0, 0, 1);
    border-radius: 0 22px 22px 0;
    z-index: 3;
}
.tn-card:hover::before {
    height: 100%;
}
.tn-card:hover {
    transform: translateY(-8px);
    border-color: var(--card-accent, #c5a059);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(197, 160, 89, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.tn-card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--card-accent, #c5a059), transparent 70%);
    opacity: 0;
    filter: blur(40px);
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.tn-card:hover .tn-card-glow {
    opacity: 0.15;
}

.tn-quote-mark {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 3.5rem;
    color: rgba(197, 160, 89, 0.08);
    line-height: 1;
    font-family: 'Tajawal', sans-serif;
    pointer-events: none;
    transition: all 0.5s ease;
}
.tn-card:hover .tn-quote-mark {
    color: rgba(197, 160, 89, 0.15);
    transform: scale(1.1) rotate(-5deg);
}

.tn-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.tn-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--card-accent, #c5a059), rgba(0, 0, 0, 0.2));
    border-radius: 18px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -1px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
}
.tn-card:hover .tn-avatar {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.tn-client {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tn-client h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}
.tn-role {
    font-size: 0.78rem;
    color: var(--card-accent, #c5a059);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.tn-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    margin-top: 2px;
}
.tn-location img {
    width: 18px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.tn-verified {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 50%;
    color: #22c55e;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.4s ease;
}
.tn-card:hover .tn-verified {
    background: #22c55e;
    color: #ffffff;
    transform: scale(1.1) rotate(360deg);
}

.tn-stars {
    display: flex;
    gap: 4px;
    color: #f1c40f;
    font-size: 0.95rem;
    position: relative;
    z-index: 2;
}

.tn-text {
    font-size: 0.98rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    position: relative;
    z-index: 2;
    font-weight: 400;
    padding-right: 15px;
    border-right: 2px solid rgba(197, 160, 89, 0.3);
}
.tn-text::before {
    content: '"';
    font-size: 1.5rem;
    color: var(--card-accent, #c5a059);
    font-weight: 900;
    margin-left: 3px;
    line-height: 0;
    vertical-align: -8px;
}
.tn-text::after {
    content: '"';
    font-size: 1.5rem;
    color: var(--card-accent, #c5a059);
    font-weight: 900;
    line-height: 0;
    vertical-align: -8px;
}

.tn-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px dashed rgba(197, 160, 89, 0.2);
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
.tn-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}
.tn-footer-item i {
    color: var(--card-accent, #c5a059);
    font-size: 0.8rem;
}

.tn-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    padding: 30px 40px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.08), rgba(197, 160, 89, 0.02));
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 22px;
}

.tn-stats-item {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    transition: all 0.4s ease;
}
.tn-stats-item:hover {
    transform: translateY(-4px);
}
.tn-stats-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.2), rgba(197, 160, 89, 0.05));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.tn-stats-item:hover .tn-stats-icon {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
    transform: rotate(-8deg);
}
.tn-stats-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tn-stats-number {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tn-stats-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.tn-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 40px 45px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(197, 160, 89, 0.05));
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}
.tn-cta::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.2), transparent 70%);
    pointer-events: none;
}

.tn-cta-content {
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    z-index: 2;
}
.tn-cta-icon {
    position: relative;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 12px 30px rgba(197, 160, 89, 0.4);
    animation: tnHeartBeat 2s ease-in-out infinite;
}
.tn-cta-text h3 {
    font-size: 1.3rem;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 6px;
}
.tn-cta-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}
.tn-cta .btn {
    position: relative;
    z-index: 2;
    padding: 15px 32px;
    font-size: 1rem;
    white-space: nowrap;
}

@keyframes tnFloatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -40px) scale(1.1); }
}
@keyframes tnScoreFill {
    to { stroke-dashoffset: 22; }
}
@keyframes tnHeartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.08); }
    50% { transform: scale(1); }
    75% { transform: scale(1.05); }
}

.testimonials-new .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.testimonials-new .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.tn-grid .tn-card:nth-child(1) { transition-delay: 0.05s; }
.tn-grid .tn-card:nth-child(2) { transition-delay: 0.15s; }
.tn-grid .tn-card:nth-child(3) { transition-delay: 0.25s; }
.tn-grid .tn-card:nth-child(4) { transition-delay: 0.35s; }

/* =========================================
   FAQ Section - Simple & Clean Design
========================================== */
.faq-simple {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(180deg, #f9f6f0 0%, #ffffff 100%);
}

.faq-simple-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.faq-simple-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
}
.faq-simple .section-subtitle {
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.faq-simple .section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.faq-simple .highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.faq-simple .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}
.faq-simple .section-desc {
    color: #666;
    max-width: 700px;
    margin: 0 auto 60px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.faq-simple-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.faq-simple-card {
    display: flex;
    gap: 18px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    padding: 25px;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    position: relative;
    overflow: hidden;
}

.faq-simple-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #c5a059, #b08d4a);
    transition: height 0.4s cubic-bezier(0.5, 0, 0, 1);
    border-radius: 0 18px 18px 0;
}
.faq-simple-card:hover::before {
    height: 100%;
}

.faq-simple-card:hover {
    border-color: rgba(197, 160, 89, 0.3);
    box-shadow: 0 12px 35px rgba(197, 160, 89, 0.12);
    transform: translateY(-4px);
    background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%);
}

.faq-simple-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(197, 160, 89, 0.05));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.faq-simple-icon i {
    font-size: 1.2rem;
    color: #c5a059;
    transition: all 0.4s ease;
}
.faq-simple-card:hover .faq-simple-icon {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.35);
}
.faq-simple-card:hover .faq-simple-icon i {
    color: #ffffff;
}

.faq-simple-content {
    flex: 1;
    min-width: 0;
}

.faq-simple-question {
    font-size: 1.02rem;
    font-weight: 800;
    color: #2c2523;
    margin: 0 0 10px;
    line-height: 1.5;
    position: relative;
    padding-bottom: 10px;
}
.faq-simple-question::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #c5a059, transparent);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.faq-simple-card:hover .faq-simple-question::after {
    width: 60px;
}

.faq-simple-answer {
    font-size: 0.92rem;
    line-height: 1.85;
    color: #666;
    margin: 0;
}
.faq-simple-answer strong {
    color: #c5a059;
    font-weight: 800;
    background: linear-gradient(180deg, transparent 60%, rgba(197, 160, 89, 0.2) 60%);
    padding: 0 3px;
}

.faq-simple-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 40px 45px;
    background: linear-gradient(135deg, #1a1514 0%, #2c2523 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.faq-simple-cta::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.2), transparent 70%);
    pointer-events: none;
}

.faq-simple-cta-content {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 2;
}

.faq-simple-cta-icon {
    position: relative;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.35);
}

.faq-simple-cta-text h3 {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 6px;
}
.faq-simple-cta-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.6;
}

.faq-simple-cta .btn {
    position: relative;
    z-index: 2;
    padding: 14px 28px;
    white-space: nowrap;
    font-size: 1rem;
}

/* =========================================
   About Madinah Section - Premium Design
========================================== */
.madinah {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f9f6f0 100%);
    overflow: hidden;
    isolation: isolate;
}

.madinah-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: -1;
    opacity: 0.03;
    background-image: radial-gradient(circle, #c5a059 1.5px, transparent 1.5px);
    background-size: 45px 45px;
}

.madinah-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
}
.madinah-glow-1 {
    top: 15%;
    left: -150px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.15), transparent 70%);
}
.madinah-glow-2 {
    bottom: 10%;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 111, 61, 0.12), transparent 70%);
}

.madinah-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.madinah-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
}
.madinah .section-subtitle {
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.madinah .section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.madinah .highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.madinah .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}
.madinah .section-desc {
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.madinah-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 50px;
}
.madinah-filter .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.madinah-filter .filter-btn i {
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.madinah-filter .filter-btn:hover {
    border-color: rgba(197, 160, 89, 0.5);
    color: #c5a059;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15);
}
.madinah-filter .filter-btn.active {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.35);
    transform: translateY(-2px);
}

.madinah-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.landmark-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}
.landmark-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    border-color: rgba(197, 160, 89, 0.2);
}

.landmark-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.landmark-img {
    width: 100%;
    height: 100%;
    position: relative;
}
.landmark-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.landmark-card:hover .landmark-img img {
    transform: scale(1.12);
}

.landmark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
}

.landmark-distance-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    backdrop-filter: blur(10px);
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.landmark-distance-badge i {
    font-size: 0.7rem;
}
.landmark-distance-badge.near {
    background: rgba(34, 197, 94, 0.9);
}
.landmark-distance-badge.medium {
    background: rgba(197, 160, 89, 0.9);
}
.landmark-distance-badge.far {
    background: rgba(231, 76, 60, 0.9);
}

.landmark-time-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2c2523;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.landmark-time-badge i {
    color: #c5a059;
    font-size: 0.75rem;
}

.landmark-category-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
    z-index: 3;
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.5);
    border: 3px solid #ffffff;
    transition: all 0.5s cubic-bezier(0.5, 0, 0, 1);
}
.landmark-card:hover .landmark-category-icon {
    transform: rotate(-8deg) scale(1.1);
    box-shadow: 0 12px 30px rgba(197, 160, 89, 0.6);
}

.landmark-info {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.landmark-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.landmark-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #2c2523;
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

.landmark-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(241, 196, 15, 0.15);
    color: #d4a017;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    flex-shrink: 0;
}
.landmark-rating i {
    font-size: 0.75rem;
}

.landmark-desc {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 15px;
    flex: 1;
}

.landmark-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.landmark-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(197, 160, 89, 0.08);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2c2523;
}
.landmark-meta .meta-item i {
    color: #c5a059;
    font-size: 0.75rem;
}

.landmark-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
.landmark-actions .btn-map-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 15px;
    background: rgba(197, 160, 89, 0.1);
    color: #c5a059;
    border: 1.5px solid rgba(197, 160, 89, 0.25);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.landmark-actions .btn-map-link:hover {
    background: rgba(197, 160, 89, 0.2);
    border-color: rgba(197, 160, 89, 0.5);
    transform: translateY(-2px);
}
.landmark-actions .btn-plan-trip {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 15px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    box-shadow: 0 6px 20px rgba(197, 160, 89, 0.3);
}
.landmark-actions .btn-plan-trip:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(197, 160, 89, 0.5);
}

.madinah-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 45px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.08), rgba(197, 160, 89, 0.02));
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.madinah-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: center;
    min-width: 180px;
}
.madinah-stat-item i {
    font-size: 2rem;
    color: #c5a059;
    transition: all 0.4s ease;
}
.madinah-stat-item:hover i {
    transform: scale(1.15) rotateY(360deg);
    color: #f1c40f;
}
.madinah-stat-item > div {
    display: flex;
    flex-direction: column;
    text-align: right;
}
.madinah-stats .stat-value {
    font-size: 1.4rem;
    font-weight: 900;
    color: #2c2523;
    line-height: 1.1;
}
.madinah-stats .stat-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 600;
    margin-top: 3px;
}
.madinah-stat-divider {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, rgba(197, 160, 89, 0.4), transparent);
}

.madinah-cta-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 40px 45px;
    background: linear-gradient(135deg, #1a1514 0%, #2c2523 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.madinah-cta-footer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.2), transparent 70%);
    pointer-events: none;
}

.cta-content-wrapper {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 2;
}

.cta-icon-wrapper {
    position: relative;
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.35);
}
.cta-icon-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 25px;
    border: 2px solid rgba(197, 160, 89, 0.4);
    animation: ctaPulse 2s ease-in-out infinite;
}

.cta-text-content h3 {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 6px;
}
.cta-text-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.6;
    max-width: 550px;
}

.madinah-cta-footer .btn {
    position: relative;
    z-index: 2;
    padding: 14px 28px;
    white-space: nowrap;
    font-size: 1rem;
}

@keyframes ctaPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.08); }
}

.madinah .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.madinah .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.madinah-grid .landmark-card:nth-child(1) { transition-delay: 0.05s; }
.madinah-grid .landmark-card:nth-child(2) { transition-delay: 0.1s; }
.madinah-grid .landmark-card:nth-child(3) { transition-delay: 0.15s; }
.madinah-grid .landmark-card:nth-child(4) { transition-delay: 0.2s; }
.madinah-grid .landmark-card:nth-child(5) { transition-delay: 0.25s; }
.madinah-grid .landmark-card:nth-child(6) { transition-delay: 0.3s; }

/* =========================================
   Contact Section - Premium Design
========================================== */
.contact {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f9f6f0 100%);
    overflow: hidden;
    isolation: isolate;
}

.contact-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    z-index: -1;
    opacity: 0.03;
    background-image: radial-gradient(circle, #c5a059 1.5px, transparent 1.5px);
    background-size: 45px 45px;
}

.contact-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
}
.contact-glow-1 {
    top: 10%;
    right: -150px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.15), transparent 70%);
}
.contact-glow-2 {
    bottom: 10%;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 111, 61, 0.12), transparent 70%);
}

.contact-subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.contact-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c5a059, transparent);
}
.contact .section-subtitle {
    color: #c5a059;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.contact .section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}
.contact .highlight-text {
    position: relative;
    color: #c5a059;
    display: inline-block;
    z-index: 1;
}
.contact .highlight-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 100%;
    height: 12px;
    background: rgba(197, 160, 89, 0.2);
    z-index: -1;
    transform: skewX(-12deg);
}
.contact .section-desc {
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.quick-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.quick-contact-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 25px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}
.quick-contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #c5a059, #b08d4a);
    transition: height 0.4s ease;
}
.quick-contact-card:hover::before {
    height: 100%;
}
.quick-contact-card:hover {
    transform: translateY(-5px);
    border-color: rgba(197, 160, 89, 0.3);
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.15);
}

.quick-icon {
    position: relative;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(197, 160, 89, 0.05));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
}
.quick-icon i {
    font-size: 1.4rem;
    color: #c5a059;
    transition: all 0.4s ease;
}
.quick-contact-card:hover .quick-icon {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    transform: rotate(-8deg) scale(1.08);
}
.quick-contact-card:hover .quick-icon i {
    color: #ffffff;
}

.quick-icon-rings {
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 1.5px dashed rgba(197, 160, 89, 0.4);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.quick-contact-card:hover .quick-icon-rings {
    opacity: 1;
    animation: rotateCircle 15s linear infinite;
}

.quick-icon.whatsapp-icon {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(37, 211, 102, 0.05));
}
.quick-icon.whatsapp-icon i {
    color: #25D366;
}
.quick-contact-card:hover .quick-icon.whatsapp-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.quick-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.quick-label {
    font-size: 0.82rem;
    color: #888;
    font-weight: 600;
}
.quick-value {
    font-size: 1rem;
    color: #2c2523;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.quick-arrow {
    color: rgba(197, 160, 89, 0.4);
    font-size: 0.9rem;
    transition: all 0.4s ease;
}
.quick-contact-card:hover .quick-arrow {
    color: #c5a059;
    transform: translateX(-5px);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.form-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}
.form-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.08), transparent 70%);
    pointer-events: none;
}

.form-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(197, 160, 89, 0.3);
    position: relative;
    z-index: 2;
}
.form-header h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2c2523;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.form-header h3 i {
    color: #c5a059;
}
.form-header p {
    color: #666;
    font-size: 0.92rem;
    margin: 0;
}

.contact-form {
    position: relative;
    z-index: 2;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}
.contact-form label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2c2523;
    margin-bottom: 8px;
}
.required {
    color: #e74c3c;
    font-weight: 800;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrapper i {
    position: absolute;
    right: 18px;
    color: #c5a059;
    font-size: 0.95rem;
    pointer-events: none;
    transition: all 0.3s ease;
}
.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: 14px 48px 14px 18px;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95rem;
    color: #2c2523;
    background: #fafafa;
    transition: all 0.3s ease;
    outline: none;
    resize: vertical;
}
.input-wrapper textarea {
    padding-top: 14px;
    min-height: 120px;
}
.input-wrapper textarea + i,
.input-wrapper i.textarea-icon {
    top: 18px;
}
.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-color: #c5a059;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.12);
}
.input-wrapper input:focus ~ i,
.input-wrapper select:focus ~ i,
.input-wrapper textarea:focus ~ i {
    color: #b08d4a;
    transform: scale(1.1);
}
.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
    color: #aaa;
    font-size: 0.9rem;
}
.input-wrapper select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a059' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 16px;
    padding-left: 45px;
}

.btn-submit {
    width: 100%;
    padding: 16px 30px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3) !important;
}
.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5) !important;
}

.contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(197, 160, 89, 0.3);
    margin-bottom: 25px;
    position: relative;
}
.hotel-logo-mini {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.3rem;
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.35);
    flex-shrink: 0;
}
.info-card-header h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #2c2523;
    margin: 0;
    line-height: 1.2;
}
.info-card-header p {
    font-size: 0.78rem;
    color: #c5a059;
    margin: 3px 0 0;
    font-weight: 600;
    letter-spacing: 1px;
}
.live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: auto;
    white-space: nowrap;
}
.live-dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulseDot 2s infinite;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}
.info-list li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.info-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(197, 160, 89, 0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
}
.info-icon i {
    color: #c5a059;
    font-size: 1rem;
    transition: all 0.4s ease;
}
.info-list li:hover .info-icon {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    transform: scale(1.08) rotate(-8deg);
}
.info-list li:hover .info-icon i {
    color: #ffffff;
}

.info-content h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #c5a059;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-content p {
    font-size: 0.92rem;
    color: #2c2523;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}
.info-content p strong {
    color: #c5a059;
    font-weight: 800;
}

.live-time-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1a1514, #2c2523);
    border-radius: 15px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.live-time-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.2), transparent 70%);
}
.live-time-card > i {
    font-size: 1.6rem;
    color: #c5a059;
    position: relative;
    z-index: 2;
    animation: tickTock 2s ease-in-out infinite;
}
.live-time-card > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 2;
}
.live-time-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}
.live-time-value {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    font-family: 'Tajawal', monospace;
}

.info-social {
    padding-top: 20px;
    border-top: 1px dashed rgba(197, 160, 89, 0.3);
}
.social-title {
    display: block;
    font-size: 0.85rem;
    color: #666;
    font-weight: 700;
    margin-bottom: 12px;
}
.social-icons {
    display: flex;
    gap: 10px;
}
.social-link {
    width: 42px;
    height: 42px;
    background: rgba(197, 160, 89, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    text-decoration: none;
}
.social-link:hover {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
    transform: translateY(-4px) rotate(-8deg);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
}

.map-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}
.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: #fafafa;
    gap: 10px;
    flex-wrap: wrap;
}
.map-header h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #2c2523;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-header h4 i {
    color: #c5a059;
}
.map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #c5a059;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 6px 12px;
    background: rgba(197, 160, 89, 0.1);
    border-radius: 50px;
}
.map-link:hover {
    background: #c5a059;
    color: #ffffff;
    transform: translateY(-2px);
}
.map-link i {
    font-size: 0.7rem;
}
.map-container {
    flex: 1;
    min-height: 240px;
    position: relative;
    background: #f0f0f0;
}
.map-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(15%) contrast(1.05);
    transition: filter 0.5s ease;
}
.map-card:hover .map-container iframe {
    filter: grayscale(0%) contrast(1);
}

.contact-cta-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 40px 45px;
    background: linear-gradient(135deg, #1a1514 0%, #2c2523 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.contact-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.2), transparent 70%);
    pointer-events: none;
}
.contact-cta-banner::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.1), transparent 70%);
    pointer-events: none;
}

.cta-banner-content {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 2;
}

.cta-banner-icon {
    position: relative;
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.35);
}
.cta-icon-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 25px;
    border: 2px solid rgba(197, 160, 89, 0.4);
    animation: ctaPulse 2s ease-in-out infinite;
}

.cta-banner-text h3 {
    font-size: 1.4rem;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 6px;
}
.cta-banner-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.6;
}

.cta-banner-actions {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.cta-banner-actions .btn {
    padding: 14px 26px;
    font-size: 0.95rem;
    white-space: nowrap;
}
.btn-outline-light {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-outline-light:hover {
    background: #ffffff;
    color: #2c2523;
    border-color: #ffffff;
    transform: translateY(-3px);
}

@keyframes tickTock {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
}

.contact .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s cubic-bezier(0.5, 0, 0, 1);
}
.contact .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.quick-contact-cards .quick-contact-card:nth-child(1) { transition-delay: 0.05s; }
.quick-contact-cards .quick-contact-card:nth-child(2) { transition-delay: 0.1s; }
.quick-contact-cards .quick-contact-card:nth-child(3) { transition-delay: 0.15s; }

/* =========================================
   Footer - Premium Design
========================================== */
.footer {
    position: relative;
    background: linear-gradient(135deg, #0f0c0b 0%, #1a1514 50%, #0f0c0b 100%);
    color: #ccc;
    overflow: hidden;
    isolation: isolate;
}

.footer-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.03;
    background-image: 
        radial-gradient(circle at 25% 25%, #c5a059 1.5px, transparent 1.5px),
        radial-gradient(circle at 75% 75%, #c5a059 1.5px, transparent 1.5px),
        linear-gradient(45deg, transparent 49%, #c5a059 49%, #c5a059 51%, transparent 51%);
    background-size: 60px 60px, 60px 60px, 60px 60px;
}

.footer-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    opacity: 0.15;
}
.footer-glow-1 {
    top: -100px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #c5a059, transparent 70%);
}
.footer-glow-2 {
    bottom: -150px;
    left: -150px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #8b6f3d, transparent 70%);
}

.footer-top-bar {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    padding: 22px 0;
    backdrop-filter: blur(10px);
}
.footer-top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.footer-top-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.footer-top-logo {
    height: 55px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: all 0.4s ease;
}
.footer-top-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}
.footer-top-brand h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}
.footer-top-brand span {
    font-size: 0.72rem;
    color: #c5a059;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-top: 3px;
}
.footer-top-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(197, 160, 89, 0.12);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 8px 16px;
    border-radius: 50px;
}
.footer-top-rating i {
    color: #f1c40f;
    font-size: 0.9rem;
}
.footer-top-rating span {
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
}
.footer-top-rating small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-weight: 600;
}

.footer-top-social {
    display: flex;
    align-items: center;
    gap: 10px;
}
.social-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 5px;
}
.footer-social-link {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.footer-social-link:hover {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-color: #c5a059;
    color: #ffffff;
    transform: translateY(-4px) rotate(-8deg);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
}

.footer-newsletter {
    padding: 40px 0;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.08), rgba(197, 160, 89, 0.02));
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    position: relative;
    overflow: hidden;
}
.footer-newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.12), transparent 70%);
    pointer-events: none;
}
.newsletter-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.newsletter-icon {
    position: relative;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 12px 30px rgba(197, 160, 89, 0.35);
}
.newsletter-icon-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 24px;
    border: 2px solid rgba(197, 160, 89, 0.4);
    animation: ctaPulse 2s ease-in-out infinite;
}
.newsletter-text h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}
.newsletter-text p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    margin: 0;
}
.newsletter-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.newsletter-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.newsletter-input-wrapper i {
    position: absolute;
    right: 15px;
    color: #c5a059;
    font-size: 0.85rem;
    pointer-events: none;
}
.newsletter-input-wrapper input {
    padding: 13px 42px 13px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(197, 160, 89, 0.2);
    border-radius: 50px;
    color: #ffffff;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.4s ease;
    min-width: 190px;
}
.newsletter-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.newsletter-input-wrapper input:focus {
    border-color: #c5a059;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.15);
}
.btn-newsletter {
    padding: 13px 28px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    white-space: nowrap;
}
.btn-newsletter:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5);
}

.footer-main {
    padding: 60px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 45px;
}

.footer-column {
    position: relative;
}

.footer-title {
    position: relative;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #c5a059, transparent);
    border-radius: 2px;
}
.title-line {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #c5a059, #b08d4a);
    border-radius: 2px;
    flex-shrink: 0;
}

.footer-about-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    line-height: 1.9;
    margin-bottom: 22px;
}

.footer-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}
.footer-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.footer-feature i {
    color: #c5a059;
    font-size: 0.9rem;
}
.footer-feature:hover {
    color: #ffffff;
    transform: translateX(-5px);
}

.footer-payment-methods {
    padding-top: 20px;
    border-top: 1px dashed rgba(197, 160, 89, 0.2);
}
.payment-label {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.payment-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.payment-icon {
    width: 50px;
    height: 34px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    cursor: pointer;
}
.payment-icon:hover {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
    border-color: #c5a059;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(197, 160, 89, 0.35);
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-list li a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.5, 0, 0, 1);
    padding: 4px 0;
    position: relative;
}
.footer-list li a i {
    font-size: 0.65rem;
    color: #c5a059;
    transition: all 0.35s ease;
    opacity: 0.6;
}
.footer-list li a:hover {
    color: #c5a059;
    padding-right: 8px;
}
.footer-list li a:hover i {
    opacity: 1;
    transform: translateX(-3px);
}

.footer-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.footer-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 160, 89, 0.12);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.footer-contact-card:hover {
    background: rgba(197, 160, 89, 0.08);
    border-color: rgba(197, 160, 89, 0.4);
    transform: translateX(-5px);
}
.footer-contact-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.15), rgba(197, 160, 89, 0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.4s ease;
}
.footer-contact-card:hover .footer-contact-icon {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
    transform: rotate(-8deg);
}
.footer-contact-icon.whatsapp-icon {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(37, 211, 102, 0.05));
    color: #25D366;
}
.footer-contact-card:hover .footer-contact-icon.whatsapp-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #ffffff;
}
.footer-contact-content h5 {
    font-size: 0.75rem;
    color: #c5a059;
    margin: 0 0 2px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-contact-content p {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
}

.footer-live-time {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(197, 160, 89, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 12px;
}
.footer-live-time > i {
    font-size: 1.3rem;
    color: #c5a059;
    animation: tickTock 2s ease-in-out infinite;
}
.footer-live-time > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.footer-live-time .time-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}
.footer-live-time .time-value {
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 1.5px;
    font-variant-numeric: tabular-nums;
}

.footer-bottom-bar {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(197, 160, 89, 0.15);
    padding: 22px 0;
}
.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.footer-bottom-right p,
.footer-bottom-left p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    margin: 0;
    font-weight: 500;
}
.footer-bottom-right span#currentYear {
    color: #c5a059;
    font-weight: 800;
}
.footer-bottom-center {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    background: rgba(197, 160, 89, 0.06);
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 50px;
}
.footer-bottom-logo {
    height: 28px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.footer-bottom-divider {
    color: rgba(197, 160, 89, 0.5);
    font-weight: 300;
}
.footer-bottom-tagline {
    color: #c5a059;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.footer-bottom-left a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.3s ease;
}
.footer-bottom-left a:hover {
    color: #c5a059;
}
.dot-divider {
    color: rgba(197, 160, 89, 0.4);
    font-size: 0.7rem;
}
.developer-link {
    color: #c5a059 !important;
    font-weight: 800 !important;
    background: linear-gradient(90deg, #c5a059, #f1c40f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}
.developer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, #c5a059, #f1c40f);
    transition: width 0.4s ease;
}
.developer-link:hover::after {
    width: 100%;
}

.footer-saudi-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 0;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(197, 160, 89, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    font-weight: 600;
}
.saudi-flag {
    width: 24px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.back-to-top {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 15px 40px rgba(197, 160, 89, 0.6);
}
.back-to-top:active {
    transform: translateY(-2px) scale(1.05);
}
.back-to-top-rings {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(197, 160, 89, 0.4);
    animation: ctaPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

/* =========================================
   Floating WhatsApp & Animations
========================================= */
.whatsapp-float { position: fixed; bottom: 30px; left: 30px; width: 60px; height: 60px; background-color: var(--whatsapp-color); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); z-index: 1000; transition: var(--transition); }
.whatsapp-float:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6); color: var(--white); }

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-20px) translateX(-50%); } 60% { transform: translateY(-10px) translateX(-50%); } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* =========================================
   RESPONSIVE DESIGN - ALL DEVICES
========================================= */

/* Very Large Screens (1400px+) */
@media (max-width: 1400px) {
    .container { max-width: 1200px; }
    .hero-title { font-size: 4.2rem; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 2.6rem; }
    .tn-overview { gap: 35px; padding: 35px 40px; }
    .footer-grid { gap: 35px; }
}

/* Large Tablets & Small Laptops (1200px) */
@media (max-width: 1200px) {
    .container { width: 92%; }
    .hero-title { font-size: 3.8rem; }
    .hero-description { font-size: 1.15rem; }
    .glass-effect { padding: 22px 25px; gap: 12px; }
    .booking-widget label { font-size: 0.72rem; }
    .booking-widget input, .booking-widget select { padding: 11px 13px; font-size: 0.85rem; }
    .stats-grid { gap: 20px; }
    .stat-content h3 { font-size: 2.6rem; }
    .stat-plus { font-size: 1.7rem; }
    .about-grid { gap: 60px; }
    .about-images { height: 540px; }
    .rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .services-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
    .tn-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .tn-overview { grid-template-columns: 1fr; gap: 30px; padding: 30px; }
    .tn-overview-divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(197, 160, 89, 0.4), transparent); }
    .tn-overview-score { justify-content: center; }
    .tn-overview-stats { grid-template-columns: repeat(4, 1fr); }
    .quick-contact-cards { gap: 15px; }
    .contact-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 30px; }
    .footer-top-bar .container { flex-wrap: wrap; }
    .madinah-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

/* Tablets Landscape (1100px) */
@media (max-width: 1100px) {
    .container { width: 92%; }
    .hero-title { font-size: 3.2rem; }
    .hero-description { font-size: 1.1rem; }
    .glass-effect { grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
    .btn-widget { grid-column: 1 / -1; width: 100%; }
    .booking-info-bar { gap: 12px; padding: 12px 15px; }
    .booking-info-item { font-size: 0.72rem; }
    .stats-section { padding-top: 80px !important; }
    .stats-title { font-size: 2.2rem; }
    .about-grid { gap: 50px; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 2.4rem; }
    .about-lead { font-size: 1.05rem; }
    .rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .featured-service { flex-direction: column; text-align: center; padding: 30px; }
    .featured-service-content { text-align: center; }
    .featured-service-cta { width: 100%; }
    .featured-service-cta .btn { width: 100%; }
    .services-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; gap: 15px; }
    .gallery-item-large { grid-column: span 2; grid-row: span 2; }
    .tn-grid { grid-template-columns: 1fr 1fr; }
    .tn-stats-row { grid-template-columns: repeat(4, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .quick-contact-cards { grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .contact-cta-banner { grid-template-columns: 1fr; text-align: center; padding: 35px 30px; }
    .cta-banner-content { flex-direction: column; text-align: center; }
    .cta-banner-actions { justify-content: center; flex-wrap: wrap; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
    .newsletter-content { grid-template-columns: auto 1fr; gap: 20px; }
    .newsletter-form { grid-column: 1 / -1; width: 100%; justify-content: center; }
    .newsletter-input-wrapper input { min-width: 220px; }
    .madinah-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .madinah-cta-footer { grid-template-columns: 1fr; text-align: center; padding: 35px 30px; }
    .cta-content-wrapper { flex-direction: column; text-align: center; }
    .madinah-cta-footer .btn { justify-self: center; }
}

/* Tablets Portrait (992px) */
@media (max-width: 992px) {
    .container { width: 94%; }
    .hero { min-height: 720px; }
    .hero-title { font-size: 3rem; }
    .hero-description { font-size: 1.05rem; }
    .hero-badge { font-size: 0.82rem; padding: 7px 16px; }
    .about-grid { grid-template-columns: 1fr; gap: 60px; }
    .about-images { height: 500px; max-width: 550px; margin: 0 auto; width: 100%; }
    .about-text { text-align: center; }
    .about-subtitle-wrapper { justify-content: center; }
    .about-lead { border-right: none; border-bottom: 3px solid #c5a059; padding: 0 0 15px; text-align: center; }
    .about-footer { flex-direction: column; gap: 20px; }
    .about-signature { align-items: center; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .stats-title { font-size: 2rem; }
    .stat-content h3 { font-size: 2.5rem; }
    .stat-plus { font-size: 1.6rem; }
    .stat-icon-wrapper { width: 80px; height: 80px; }
    .stat-icon-wrapper i { font-size: 1.7rem; }
    .rooms { padding: 90px 0; }
    .rooms-grid { grid-template-columns: repeat(2, 1fr); }
    .room-img-wrapper { height: 240px; }
    .services { padding: 90px 0; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .services-stats { padding: 25px; }
    .services-stat-divider { display: none; }
    .services-stat-item { min-width: 45%; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-new { padding: 90px 0; }
    .tn-grid { grid-template-columns: 1fr; }
    .tn-overview-stats { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .tn-stats-row { grid-template-columns: repeat(2, 1fr); gap: 25px; padding: 25px; }
    .tn-cta { grid-template-columns: 1fr; text-align: center; padding: 35px 30px; }
    .tn-cta-content { flex-direction: column; text-align: center; }
    .tn-cta .btn { justify-self: center; width: 100%; }
    .faq-simple { padding: 90px 0; }
    .faq-simple .section-title { font-size: 2.4rem; }
    .faq-simple-grid { grid-template-columns: 1fr; gap: 15px; }
    .faq-simple-cta { grid-template-columns: 1fr; text-align: center; padding: 35px 30px; }
    .faq-simple-cta-content { flex-direction: column; text-align: center; }
    .faq-simple-cta .btn { justify-self: center; width: 100%; }
    .madinah { padding: 90px 0; }
    .madinah-stats { padding: 25px; }
    .madinah-stat-divider { display: none; }
    .madinah-stat-item { min-width: 45%; }
    .quick-contact-cards { grid-template-columns: 1fr; }
    .contact-cta-banner { padding: 30px 22px; }
    .footer-top-bar .container { text-align: center; justify-content: center; }
    .footer-top-left { justify-content: center; }
    .footer-top-social { justify-content: center; }
}

/* Small Tablets & Large Phones (768px) */
@media (max-width: 768px) {
    .container { width: 92%; }
    .section { padding: 60px 0; }
    .top-bar { display: none; }
    .header { top: 0; }
    .nav-toggle { display: block; color: var(--white); }
    .header.scrolled .nav-toggle { color: var(--dark-color); }
    .navbar { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: var(--dark-color); display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 1001; overflow-y: auto; }
    .navbar.active { right: 0; }
    .nav-list { flex-direction: column; text-align: center; gap: 20px; padding: 80px 20px 40px; }
    .nav-link { color: var(--white) !important; font-size: 1.3rem; }
    .nav-close { display: block; position: absolute; top: 30px; right: 30px; color: var(--white); font-size: 1.8rem; }
    .logo-img { height: 48px; }
    .header.scrolled .logo-img { height: 42px; }
    .nav-actions .btn { padding: 10px 18px; font-size: 0.85rem; }
    .hero { min-height: 640px; height: auto; padding: 120px 0 80px; }
    .hero-title { font-size: 2.4rem; letter-spacing: -0.5px; }
    .hero-subtitle { font-size: 0.9rem; letter-spacing: 2px; }
    .hero-description { font-size: 1rem; margin-bottom: 35px; }
    .hero-badge { font-size: 0.75rem; padding: 6px 14px; margin-bottom: 18px; }
    .hero-buttons { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 40px; }
    .hero-buttons .btn { width: 100%; max-width: 320px; padding: 14px 22px; font-size: 0.95rem; }
    .hero-content { margin-top: 0; padding: 0 15px; }
    .booking-widget-container { position: relative; bottom: 0; margin-top: -30px; padding: 0 12px; }
    .booking-widget-header { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
    .booking-header-icon { width: 42px; height: 42px; font-size: 1.1rem; }
    .booking-header-text h3 { font-size: 1rem; }
    .booking-header-text p { font-size: 0.75rem; }
    .booking-header-badge { width: 100%; justify-content: center; }
    .glass-effect { grid-template-columns: 1fr; gap: 12px; padding: 18px; border-radius: 0 0 18px 18px; }
    .booking-widget label { font-size: 0.72rem; }
    .booking-widget input, .booking-widget select { padding: 11px 14px; font-size: 0.85rem; }
    .btn-widget { padding: 14px 20px; height: 50px; font-size: 0.92rem; }
    .booking-info-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 15px; border-radius: 0 0 18px 18px; }
    .booking-info-divider { display: none; }
    .booking-info-item { font-size: 0.7rem; flex-basis: 45%; justify-content: center; }
    .scroll-down { display: none; }
    .stats-section { padding: 70px 0 60px !important; }
    .stats-header { margin-bottom: 45px; }
    .stats-title { font-size: 1.7rem; }
    .stats-subtitle { font-size: 0.85rem; letter-spacing: 2px; padding: 0 30px; }
    .stats-grid { grid-template-columns: 1fr; gap: 15px; }
    .stat-item { padding: 28px 20px; display: flex; align-items: center; gap: 20px; text-align: right; }
    .stat-icon-wrapper { margin: 0; flex-shrink: 0; width: 68px; height: 68px; }
    .stat-icon-wrapper i { font-size: 1.5rem; }
    .stat-icon-bg { width: 55px; height: 55px; }
    .stat-content { text-align: right; }
    .stat-content h3 { font-size: 2rem; }
    .stat-plus { font-size: 1.3rem; }
    .stat-content p { font-size: 0.85rem; margin-top: 5px; }
    .about { padding: 70px 0; }
    .about-images { height: 420px; }
    .about-img-main { width: 78%; height: 65%; }
    .about-img-secondary { width: 58%; height: 52%; }
    .about-img-tertiary { width: 32%; height: 32%; }
    .floating-rating-card { padding: 12px 18px; right: 10px; bottom: 25%; }
    .rating-number { font-size: 1.3rem; }
    .rating-icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .rating-label { font-size: 0.65rem; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 1.9rem; }
    .section-desc, .faq-simple .section-desc, .madinah .section-desc, .contact .section-desc, .services .section-desc, .gallery .section-desc, .testimonials-new .section-desc, .rooms .section-desc { font-size: 0.95rem; margin-bottom: 35px; }
    .about-features-grid { grid-template-columns: 1fr; }
    .about-deco-dots { display: none; }
    .rooms { padding: 70px 0; }
    .rooms-filter, .gallery-filter, .madinah-filter, .faq-filter { gap: 8px; margin-bottom: 35px; }
    .filter-btn, .madinah-filter .filter-btn, .faq-filter .filter-btn { padding: 9px 16px; font-size: 0.82rem; }
    .filter-btn i, .madinah-filter .filter-btn i, .faq-filter .filter-btn i { font-size: 0.78rem; }
    .rooms-grid { grid-template-columns: 1fr; gap: 20px; }
    .room-img-wrapper { height: 250px; }
    .rooms-cta-footer { flex-direction: column; text-align: center; padding: 25px 20px; }
    .services { padding: 70px 0; }
    .featured-service { padding: 25px 20px; margin-bottom: 40px; }
    .featured-service-icon { width: 70px; height: 70px; }
    .featured-service-icon i { font-size: 2rem; }
    .featured-service-content h3 { font-size: 1.3rem; }
    .featured-service-content p { font-size: 0.9rem; }
    .services-grid { grid-template-columns: 1fr; gap: 20px; }
    .service-card { padding: 30px 25px; }
    .services-stats { flex-direction: column; gap: 20px; padding: 25px 20px; margin-top: 50px; }
    .services-stat-item { width: 100%; justify-content: flex-start; min-width: auto; }
    .gallery { padding: 70px 0; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 12px; }
    .gallery-item-large { grid-column: span 2; grid-row: span 2; }
    .gallery-info { padding: 15px 12px 12px; }
    .gallery-info h4 { font-size: 0.95rem; }
    .gallery-item-large .gallery-info h4 { font-size: 1.15rem; }
    .gallery-tag { font-size: 0.68rem; padding: 4px 10px; }
    .gallery-icon { width: 50px; height: 50px; font-size: 1.1rem; }
    .gallery-cta-footer { flex-direction: column; text-align: center; padding: 25px 20px; }
    .lightbox { padding: 15px; }
    .lightbox-nav { width: 45px; height: 45px; font-size: 1rem; }
    .lightbox-prev { right: 15px; }
    .lightbox-next { left: 15px; }
    .lightbox-close { width: 45px; height: 45px; top: 15px; right: 15px; font-size: 1.1rem; }
    .lightbox-info { flex-direction: column; gap: 10px; text-align: center; }
    .lightbox-info h3 { font-size: 1rem; }
    .lightbox-counter { font-size: 0.75rem; }
    .testimonials-new { padding: 70px 0; }
    .tn-overview { padding: 25px 20px; margin-bottom: 40px; }
    .tn-score-circle { width: 100px; height: 100px; }
    .tn-score-number { font-size: 1.7rem; }
    .tn-score-max { font-size: 0.75rem; }
    .tn-score-info h3 { font-size: 1rem; }
    .tn-score-info p { font-size: 0.78rem; }
    .tn-score-stars { font-size: 0.85rem; }
    .tn-overview-stats { gap: 10px; }
    .tn-stat { padding: 10px 8px; gap: 10px; }
    .tn-stat-icon { width: 36px; height: 36px; font-size: 0.85rem; }
    .tn-stat-value { font-size: 1rem; }
    .tn-stat-label { font-size: 0.7rem; }
    .tn-card { padding: 25px 22px; gap: 15px; }
    .tn-quote-mark { font-size: 2.5rem; top: 18px; left: 18px; }
    .tn-avatar { width: 52px; height: 52px; font-size: 1rem; border-radius: 15px; }
    .tn-client h4 { font-size: 1rem; }
    .tn-role { font-size: 0.72rem; }
    .tn-location { font-size: 0.7rem; }
    .tn-text { font-size: 0.92rem; padding-right: 12px; }
    .tn-verified { width: 28px; height: 28px; font-size: 0.8rem; }
    .tn-stats-row { grid-template-columns: 1fr; gap: 20px; padding: 25px 20px; }
    .tn-stats-item { justify-content: flex-start; padding: 10px; }
    .tn-cta { padding: 30px 22px; }
    .tn-cta-icon { width: 55px; height: 55px; font-size: 1.3rem; }
    .tn-cta-text h3 { font-size: 1.1rem; }
    .tn-cta-text p { font-size: 0.82rem; }
    .faq-simple { padding: 70px 0; }
    .faq-simple-card { padding: 20px; gap: 14px; }
    .faq-simple-icon { width: 42px; height: 42px; border-radius: 12px; }
    .faq-simple-icon i { font-size: 1rem; }
    .faq-simple-question { font-size: 0.95rem; }
    .faq-simple-answer { font-size: 0.88rem; }
    .faq-simple-cta { padding: 30px 22px; }
    .faq-simple-cta-icon { width: 58px; height: 58px; font-size: 1.3rem; }
    .faq-simple-cta-text h3 { font-size: 1.15rem; }
    .faq-simple-cta-text p { font-size: 0.85rem; }
    .madinah { padding: 70px 0; }
    .madinah-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
    .landmark-img-wrapper { height: 210px; }
    .landmark-info { padding: 22px; }
    .landmark-actions { flex-direction: column; }
    .madinah-stats { flex-direction: column; gap: 20px; padding: 25px 20px; }
    .madinah-stat-item { width: 100%; justify-content: flex-start; min-width: auto; }
    .madinah-cta-footer { padding: 30px 22px; }
    .cta-icon-wrapper { width: 60px; height: 60px; font-size: 1.5rem; }
    .cta-text-content h3 { font-size: 1.15rem; }
    .cta-text-content p { font-size: 0.85rem; }
    .madinah-cta-footer .btn { width: 100%; }
    .contact { padding: 70px 0; }
    .quick-contact-cards { gap: 15px; margin-bottom: 40px; }
    .quick-contact-card { padding: 18px 20px; }
    .quick-icon { width: 48px; height: 48px; }
    .quick-icon i { font-size: 1.2rem; }
    .quick-value { font-size: 0.9rem; }
    .form-card { padding: 28px 22px; }
    .form-header h3 { font-size: 1.2rem; }
    .form-header p { font-size: 0.85rem; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .info-card { padding: 25px 22px; }
    .info-card-header { flex-direction: column; text-align: center; gap: 12px; }
    .live-status { margin-right: 0; }
    .map-card { min-height: 320px; }
    .map-header { flex-direction: column; text-align: center; gap: 10px; }
    .cta-banner-icon { width: 60px; height: 60px; font-size: 1.5rem; }
    .cta-banner-text h3 { font-size: 1.15rem; }
    .cta-banner-text p { font-size: 0.85rem; }
    .cta-banner-actions { flex-direction: column; }
    .cta-banner-actions .btn { width: 100%; justify-content: center; }
    .footer-top-content { flex-direction: column; text-align: center; }
    .footer-top-left { justify-content: center; flex-direction: column; }
    .footer-top-social { justify-content: center; }
    .footer-newsletter { padding: 30px 0; }
    .newsletter-content { grid-template-columns: 1fr; text-align: center; }
    .newsletter-icon { margin: 0 auto; width: 60px; height: 60px; font-size: 1.4rem; }
    .newsletter-form { flex-direction: column; width: 100%; }
    .newsletter-input-wrapper, .newsletter-input-wrapper input { width: 100%; min-width: 100%; }
    .btn-newsletter { width: 100%; justify-content: center; }
    .footer-main { padding: 45px 0 30px; }
    .footer-grid { grid-template-columns: 1fr; gap: 35px; text-align: center; }
    .footer-title { justify-content: center; }
    .footer-title::after { right: 50%; transform: translateX(50%); }
    .footer-about-text { text-align: center; }
    .footer-feature { justify-content: center; }
    .footer-feature:hover { transform: translateY(-3px); }
    .payment-icons { justify-content: center; }
    .footer-list li a { justify-content: center; }
    .footer-contact-card { justify-content: center; }
    .footer-contact-card:hover { transform: translateY(-3px); }
    .footer-contact-content { text-align: right; }
    .footer-live-time { justify-content: center; }
    .footer-bottom-content { flex-direction: column; gap: 15px; text-align: center; }
    .footer-bottom-left { justify-content: center; }
    .footer-bottom-center { order: -1; }
    .back-to-top { bottom: 90px; right: 20px; width: 48px; height: 48px; font-size: 1rem; }
    .whatsapp-float { width: 55px; height: 55px; font-size: 1.7rem; bottom: 25px; left: 20px; }
}

/* Large Phones (576px) */
@media (max-width: 576px) {
    .container { width: 94%; }
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 0.82rem; }
    .hero-description { font-size: 0.92rem; line-height: 1.7; }
    .hero { min-height: 600px; padding: 100px 0 60px; }
    .booking-widget-container { padding: 0 10px; margin-top: -20px; }
    .booking-widget-header { padding: 12px 14px; }
    .booking-header-icon { width: 38px; height: 38px; font-size: 1rem; }
    .booking-header-text h3 { font-size: 0.92rem; }
    .booking-header-text p { font-size: 0.7rem; }
    .glass-effect { padding: 15px; }
    .booking-info-item { font-size: 0.65rem; }
    .stats-title { font-size: 1.5rem; }
    .stat-item { padding: 22px 16px; gap: 15px; }
    .stat-icon-wrapper { width: 60px; height: 60px; }
    .stat-icon-wrapper i { font-size: 1.3rem; }
    .stat-icon-bg { width: 48px; height: 48px; }
    .stat-content h3 { font-size: 1.75rem; }
    .stat-plus { font-size: 1.1rem; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 1.6rem; }
    .section-subtitle, .faq-simple .section-subtitle, .madinah .section-subtitle, .contact .section-subtitle, .services .section-subtitle, .gallery .section-subtitle, .testimonials-new .section-subtitle, .rooms .section-subtitle { font-size: 0.8rem; letter-spacing: 2px; }
    .section-desc, .faq-simple .section-desc, .madinah .section-desc, .contact .section-desc, .services .section-desc, .gallery .section-desc, .testimonials-new .section-desc, .rooms .section-desc { font-size: 0.88rem; }
    .about { padding: 55px 0; }
    .about-images { height: 380px; }
    .about-deco-circle { width: 70px; height: 70px; top: -15px; }
    .floating-rating-card { right: 5px; padding: 10px 15px; }
    .rating-stars { font-size: 0.65rem; }
    .about-lead { font-size: 0.95rem; }
    .about-desc { font-size: 0.88rem; }
    .rooms { padding: 55px 0; }
    .room-info { padding: 20px; }
    .room-title { font-size: 1.15rem; }
    .room-desc { font-size: 0.85rem; }
    .room-features { grid-template-columns: 1fr 1fr; }
    .room-features li { font-size: 0.75rem; }
    .room-meta { gap: 6px; }
    .meta-item { font-size: 0.72rem; padding: 5px 10px; }
    .services { padding: 55px 0; }
    .featured-service-content h3 { font-size: 1.1rem; }
    .featured-service-content p { font-size: 0.85rem; }
    .service-number { font-size: 2rem; top: 15px; left: 20px; }
    .service-icon-wrapper { width: 60px; height: 60px; margin-bottom: 20px; }
    .service-icon-wrapper i { font-size: 1.5rem; }
    .service-title { font-size: 1.05rem; }
    .service-desc { font-size: 0.82rem; }
    .services-stat-item i { font-size: 1.6rem; }
    .stat-value { font-size: 1.2rem; }
    .stat-label { font-size: 0.75rem; }
    .gallery { padding: 55px 0; }
    .gallery-grid { grid-auto-rows: 150px; gap: 10px; }
    .gallery-info h4 { font-size: 0.85rem; }
    .gallery-item-large .gallery-info h4 { font-size: 1rem; }
    .gallery-tag { font-size: 0.62rem; padding: 3px 8px; }
    .gallery-tag i { font-size: 0.6rem; }
    .gallery-icon { width: 42px; height: 42px; font-size: 0.95rem; }
    .testimonials-new { padding: 55px 0; }
    .tn-overview { padding: 22px 18px; }
    .tn-score-circle { width: 85px; height: 85px; }
    .tn-score-number { font-size: 1.4rem; }
    .tn-overview-stats { grid-template-columns: 1fr; }
    .tn-stat { justify-content: flex-start; background: rgba(197, 160, 89, 0.05); border-radius: 10px; }
    .tn-card { padding: 22px 18px; }
    .tn-card-header { gap: 12px; }
    .tn-avatar { width: 46px; height: 46px; font-size: 0.9rem; border-radius: 13px; }
    .tn-client h4 { font-size: 0.95rem; }
    .tn-text { font-size: 0.88rem; }
    .tn-card-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tn-footer-item { font-size: 0.72rem; }
    .tn-stats-number { font-size: 1.15rem; }
    .tn-stats-label { font-size: 0.72rem; }
    .faq-simple { padding: 55px 0; }
    .faq-simple-card { padding: 18px 15px; gap: 12px; flex-direction: column; text-align: center; }
    .faq-simple-icon { margin: 0 auto; width: 46px; height: 46px; }
    .faq-simple-question { font-size: 0.92rem; padding-bottom: 8px; }
    .faq-simple-question::after { right: 50%; transform: translateX(50%); }
    .faq-simple-answer { font-size: 0.85rem; }
    .faq-simple-cta-text h3 { font-size: 1.05rem; }
    .madinah { padding: 55px 0; }
    .landmark-img-wrapper { height: 190px; }
    .landmark-category-icon { width: 48px; height: 48px; font-size: 1.2rem; }
    .landmark-distance-badge, .landmark-time-badge { font-size: 0.7rem; padding: 5px 10px; }
    .landmark-title { font-size: 1.05rem; }
    .landmark-desc { font-size: 0.85rem; }
    .landmark-rating { font-size: 0.72rem; padding: 3px 8px; }
    .madinah-stats .stat-value { font-size: 1.2rem; }
    .madinah-stats .stat-label { font-size: 0.75rem; }
    .contact { padding: 55px 0; }
    .form-card { padding: 22px 18px; }
    .form-header h3 { font-size: 1.05rem; }
    .input-wrapper input, .input-wrapper select, .input-wrapper textarea { padding: 12px 42px 12px 15px; font-size: 0.88rem; }
    .btn-submit { padding: 14px 20px; font-size: 0.9rem; }
    .info-card { padding: 22px 18px; }
    .hotel-logo-mini { width: 42px; height: 42px; font-size: 1.1rem; }
    .info-card-header h3 { font-size: 1rem; }
    .info-icon { width: 38px; height: 38px; }
    .info-icon i { font-size: 0.9rem; }
    .info-content h4 { font-size: 0.78rem; }
    .info-content p { font-size: 0.85rem; }
    .live-time-card { padding: 15px 18px; }
    .live-time-card > i { font-size: 1.3rem; }
    .live-time-value { font-size: 1.1rem; }
    .social-link { width: 38px; height: 38px; font-size: 0.9rem; }
    .footer-top-logo { height: 45px; }
    .footer-top-brand h3 { font-size: 1rem; }
    .footer-top-rating { padding: 6px 12px; font-size: 0.78rem; }
    .footer-social-link { width: 38px; height: 38px; font-size: 0.9rem; }
    .newsletter-text h4 { font-size: 1.05rem; }
    .newsletter-text p { font-size: 0.82rem; }
    .footer-title { font-size: 1rem; }
    .footer-about-text { font-size: 0.85rem; }
    .footer-feature { font-size: 0.8rem; }
    .footer-list li a { font-size: 0.83rem; }
    .footer-contact-content h5 { font-size: 0.7rem; }
    .footer-contact-content p { font-size: 0.78rem; }
    .footer-live-time .time-value { font-size: 0.95rem; }
    .footer-bottom-right p, .footer-bottom-left p, .footer-bottom-left a { font-size: 0.75rem; }
    .footer-bottom-tagline { font-size: 0.75rem; }
    .footer-bottom-logo { height: 24px; }
    .back-to-top { bottom: 85px; right: 15px; width: 44px; height: 44px; font-size: 0.95rem; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 1.5rem; bottom: 20px; left: 15px; }
}

/* Small Phones (480px) */
@media (max-width: 480px) {
    .container { width: 94%; }
    .hero { min-height: 580px; padding: 90px 0 50px; }
    .hero-title { font-size: 1.75rem; }
    .hero-description { font-size: 0.88rem; }
    .hero-badge { font-size: 0.7rem; padding: 5px 12px; }
    .hero-buttons .btn { padding: 12px 18px; font-size: 0.88rem; max-width: 280px; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 1.45rem; }
    .stats-title { font-size: 1.35rem; }
    .stat-content h3 { font-size: 1.6rem; }
    .stat-icon-wrapper { width: 55px; height: 55px; }
    .stat-icon-wrapper i { font-size: 1.2rem; }
    .stat-content p { font-size: 0.78rem; }
    .about-images { height: 340px; }
    .floating-rating-card { padding: 8px 12px; gap: 10px; }
    .rating-icon { width: 36px; height: 36px; font-size: 1rem; }
    .rating-number { font-size: 1.15rem; }
    .rating-label { font-size: 0.6rem; }
    .about-lead { font-size: 0.9rem; }
    .about-desc { font-size: 0.85rem; }
    .feature-text h4 { font-size: 0.9rem; }
    .feature-text p { font-size: 0.78rem; }
    .room-price-tag { padding: 6px 12px; min-width: 90px; }
    .price-number { font-size: 1.15rem; }
    .price-label { font-size: 0.6rem; }
    .price-unit { font-size: 0.6rem; }
    .room-title { font-size: 1.05rem; }
    .room-desc { font-size: 0.82rem; }
    .room-rating .stars { font-size: 0.7rem; }
    .rating-score { font-size: 0.82rem; }
    .rating-count { font-size: 0.7rem; }
    .room-features li { font-size: 0.72rem; }
    .meta-item { font-size: 0.68rem; padding: 4px 8px; }
    .room-cta .btn { padding: 10px 12px; font-size: 0.85rem; }
    .btn-details { width: 40px; height: 40px; font-size: 1rem; }
    .service-card { padding: 25px 20px; }
    .service-icon-wrapper { width: 55px; height: 55px; }
    .service-icon-wrapper i { font-size: 1.4rem; }
    .service-title { font-size: 1rem; }
    .service-desc { font-size: 0.8rem; }
    .gallery-grid { grid-auto-rows: 135px; gap: 8px; }
    .gallery-icon { width: 38px; height: 38px; font-size: 0.9rem; }
    .gallery-info h4 { font-size: 0.78rem; }
    .gallery-item-large .gallery-info h4 { font-size: 0.92rem; }
    .lightbox { padding: 10px; }
    .lightbox-nav { width: 40px; height: 40px; font-size: 0.9rem; }
    .lightbox-close { width: 40px; height: 40px; font-size: 1rem; }
    .tn-card { padding: 20px 15px; }
    .tn-avatar { width: 42px; height: 42px; font-size: 0.85rem; }
    .tn-client h4 { font-size: 0.88rem; }
    .tn-role { font-size: 0.68rem; }
    .tn-location { font-size: 0.65rem; }
    .tn-text { font-size: 0.84rem; }
    .tn-stars { font-size: 0.85rem; }
    .tn-verified { width: 26px; height: 26px; font-size: 0.75rem; }
    .faq-simple-card { padding: 15px 12px; }
    .faq-simple-icon { width: 42px; height: 42px; }
    .faq-simple-icon i { font-size: 0.95rem; }
    .faq-simple-question { font-size: 0.88rem; }
    .faq-simple-answer { font-size: 0.82rem; }
    .faq-simple-cta-icon { width: 52px; height: 52px; font-size: 1.2rem; }
    .landmark-img-wrapper { height: 175px; }
    .landmark-category-icon { width: 42px; height: 42px; font-size: 1.05rem; }
    .landmark-title { font-size: 0.95rem; }
    .landmark-desc { font-size: 0.82rem; }
    .landmark-actions .btn-map-link, .landmark-actions .btn-plan-trip { padding: 9px 12px; font-size: 0.78rem; }
    .form-card { padding: 20px 15px; }
    .form-header h3 { font-size: 1rem; }
    .input-wrapper input, .input-wrapper select, .input-wrapper textarea { padding: 11px 38px 11px 12px; font-size: 0.85rem; }
    .input-wrapper i { right: 14px; font-size: 0.85rem; }
    .info-card { padding: 20px 15px; }
    .info-card-header h3 { font-size: 0.92rem; }
    .info-icon { width: 36px; height: 36px; }
    .info-icon i { font-size: 0.85rem; }
    .info-content h4 { font-size: 0.72rem; }
    .info-content p { font-size: 0.82rem; }
    .quick-contact-card { padding: 15px 16px; gap: 12px; }
    .quick-icon { width: 44px; height: 44px; }
    .quick-icon i { font-size: 1.1rem; }
    .quick-value { font-size: 0.85rem; }
    .quick-label { font-size: 0.75rem; }
    .footer-top-logo { height: 40px; }
    .footer-social-link { width: 36px; height: 36px; font-size: 0.85rem; }
    .btn-newsletter { padding: 12px 20px; font-size: 0.85rem; }
    .newsletter-input-wrapper input { padding: 12px 38px 12px 15px; font-size: 0.85rem; }
    .footer-bottom-center { padding: 6px 15px; gap: 8px; }
    .footer-bottom-tagline { font-size: 0.7rem; }
    .back-to-top { bottom: 80px; right: 12px; width: 42px; height: 42px; font-size: 0.9rem; }
    .whatsapp-float { width: 48px; height: 48px; font-size: 1.4rem; bottom: 18px; left: 12px; }
}

/* Extra Small Phones (360px) */
@media (max-width: 360px) {
    .container { width: 96%; }
    .hero-title { font-size: 1.55rem; }
    .hero-description { font-size: 0.82rem; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 1.3rem; }
    .stats-title { font-size: 1.2rem; }
    .stat-content h3 { font-size: 1.45rem; }
    .stat-icon-wrapper { width: 50px; height: 50px; }
    .stat-icon-wrapper i { font-size: 1.1rem; }
    .about-images { height: 300px; }
    .floating-rating-card { padding: 6px 10px; gap: 8px; right: 0; }
    .rating-icon { width: 30px; height: 30px; font-size: 0.9rem; }
    .rating-number { font-size: 1rem; }
    .rating-label { display: none; }
    .room-img-wrapper { height: 200px; }
    .room-title { font-size: 0.98rem; }
    .room-desc { font-size: 0.78rem; }
    .room-features { grid-template-columns: 1fr; }
    .room-features li { font-size: 0.7rem; }
    .gallery-grid { grid-auto-rows: 120px; gap: 6px; }
    .gallery-icon { width: 34px; height: 34px; font-size: 0.8rem; }
    .gallery-info h4 { font-size: 0.7rem; }
    .gallery-item-large .gallery-info h4 { font-size: 0.85rem; }
    .gallery-tag { display: none; }
    .tn-card { padding: 18px 12px; }
    .tn-avatar { width: 38px; height: 38px; font-size: 0.78rem; border-radius: 11px; }
    .tn-client h4 { font-size: 0.82rem; }
    .tn-text { font-size: 0.78rem; }
    .faq-simple-card { padding: 12px 10px; }
    .faq-simple-question { font-size: 0.82rem; }
    .faq-simple-answer { font-size: 0.78rem; }
    .landmark-img-wrapper { height: 160px; }
    .landmark-title { font-size: 0.88rem; }
    .landmark-desc { font-size: 0.78rem; }
    .form-card { padding: 18px 12px; }
    .input-wrapper input, .input-wrapper select, .input-wrapper textarea { padding: 10px 36px 10px 10px; font-size: 0.82rem; }
    .quick-icon { width: 40px; height: 40px; }
    .quick-value { font-size: 0.8rem; }
    .back-to-top { bottom: 75px; right: 10px; width: 38px; height: 38px; font-size: 0.85rem; }
    .whatsapp-float { width: 44px; height: 44px; font-size: 1.3rem; bottom: 15px; left: 10px; }
}

/* Very Small Phones (320px) */
@media (max-width: 320px) {
    .hero-title { font-size: 1.4rem; }
    .hero-subtitle { font-size: 0.72rem; letter-spacing: 1px; }
    .hero-description { font-size: 0.78rem; }
    .hero-buttons .btn { padding: 11px 14px; font-size: 0.82rem; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 1.2rem; }
    .stat-item { padding: 18px 12px; gap: 12px; }
    .stat-content h3 { font-size: 1.3rem; }
    .stat-icon-wrapper { width: 45px; height: 45px; }
    .about-images { height: 270px; }
    .rooms-grid .room-card { border-radius: 18px; }
    .service-card { padding: 20px 15px; }
    .gallery-grid { grid-auto-rows: 110px; }
    .tn-card { padding: 15px 10px; }
    .tn-text { font-size: 0.75rem; }
    .faq-simple-question { font-size: 0.78rem; }
    .faq-simple-answer { font-size: 0.75rem; }
}

/* Landscape Mode for Phones */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: 100vh; padding: 80px 0 40px; height: auto; }
    .hero-title { font-size: 1.8rem; }
    .hero-description { display: none; }
    .hero-buttons { margin-bottom: 20px; }
    .hero-badge { margin-bottom: 10px; }
    .booking-widget-container { position: relative; margin-top: 20px; }
    .navbar { padding-top: 60px; }
    .nav-list { gap: 15px; }
    .nav-link { font-size: 1rem; }
}

/* Foldable Devices */
@media (max-width: 280px) {
    .container { width: 98%; }
    .hero-title { font-size: 1.2rem; }
    .hero-description { font-size: 0.72rem; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .services .section-title, .gallery .section-title, .testimonials-new .section-title, .rooms .section-title { font-size: 1.1rem; }
    .stat-content h3 { font-size: 1.15rem; }
    .btn { padding: 10px 16px; font-size: 0.85rem; }
    .gallery-grid { grid-auto-rows: 100px; }
}

/* Print Styles */
@media print {
    .header, .top-bar, .whatsapp-float, .back-to-top, .booking-widget-container, .scroll-down, .hero-video-container { display: none !important; }
    body { color: #000; background: #fff; }
    .section { padding: 20px 0; page-break-inside: avoid; }
    a { color: #000; text-decoration: underline; }
    .tn-card, .room-card, .service-card, .faq-simple-card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-video { display: none; }
    .hero { background: url('images/hero-bg.jpg') center/cover no-repeat; }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body { background-color: #1a1514; color: #e0e0e0; }
    .section-title, .faq-simple .section-title, .madinah .section-title, .contact .section-title, .rooms .section-title, .gallery .section-title { color: #ffffff; }
    .section-desc, .faq-simple .section-desc, .madinah .section-desc, .contact .section-desc, .rooms .section-desc, .gallery .section-desc { color: #b0b0b0; }
    .rooms, .gallery, .faq-simple, .madinah, .contact, .about { background: linear-gradient(180deg, #1a1514 0%, #0f0c0b 100%); }
    .room-card, .faq-simple-card, .form-card, .info-card, .map-card, .landmark-card { background: #2c2523; border-color: rgba(197, 160, 89, 0.2); }
    .room-title, .faq-simple-question, .landmark-title, .form-header h3, .info-card-header h3 { color: #ffffff; }
    .room-desc, .faq-simple-answer, .landmark-desc, .info-content p { color: #b0b0b0; }
    .input-wrapper input, .input-wrapper select, .input-wrapper textarea, .booking-widget input, .booking-widget select { background: #1a1514; color: #ffffff; border-color: rgba(255,255,255,0.1); }
    .footer { background: linear-gradient(135deg, #050403 0%, #0f0c0b 50%, #050403 100%); }
}

/* =========================================
   Footer Company & Chairman Section (NEW)
========================================== */
.footer-company-section {
    position: relative;
    padding: 50px 0;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.06), rgba(197, 160, 89, 0.02));
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    overflow: hidden;
}
.footer-company-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background: radial-gradient(circle at right, rgba(197, 160, 89, 0.1), transparent 70%);
    pointer-events: none;
}
.footer-company-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 350px;
    height: 100%;
    background: radial-gradient(circle at left, rgba(197, 160, 89, 0.08), transparent 70%);
    pointer-events: none;
}

.company-info-wrapper {
    display: grid;
    grid-template-columns: 1.3fr 1px 1fr;
    gap: 45px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Company Info Card (Right Side) */
.company-info-card {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.company-logo-area {
    display: flex;
    align-items: center;
    gap: 20px;
}

.company-logo {
    height: 70px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: all 0.4s ease;
}
.company-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

.company-name h3 {
    font-size: 1.5rem;
    font-weight: 900;
    color: #c5a059;
    margin: 0 0 4px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.company-name p {
    font-size: 0.95rem;
    color: #ffffff;
    margin: 0 0 5px;
    font-weight: 600;
}
.company-name span {
    font-size: 0.7rem;
    color: rgba(197, 160, 89, 0.7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
}

.company-divider {
    height: 2px;
    background: linear-gradient(90deg, rgba(197, 160, 89, 0.6), transparent);
    border-radius: 2px;
    position: relative;
}
.company-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #c5a059;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.6);
}

/* Chairman Info */
.chairman-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chairman-label {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.chairman-name-ar {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.5px;
}
.chairman-name-ar::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 22px;
    background: linear-gradient(180deg, #c5a059, #b08d4a);
    border-radius: 2px;
    margin-left: 10px;
    vertical-align: middle;
}

.chairman-title-en {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 15px;
    margin-top: 5px;
}
.chairman-title-en span {
    font-size: 0.7rem;
    color: #c5a059;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.chairman-title-en strong {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 800;
    letter-spacing: 1px;
}

/* Center Divider */
.company-info-divider {
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(197, 160, 89, 0.5), transparent);
    position: relative;
}
.company-info-divider::before {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #c5a059;
    font-size: 1rem;
    background: #1a1514;
    padding: 12px 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
}

/* Company Contact Info (Left Side) */
.company-contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.company-contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
    position: relative;
    overflow: hidden;
}
.company-contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #c5a059, #b08d4a);
    transition: height 0.4s ease;
    border-radius: 0 14px 14px 0;
}
.company-contact-item:hover::before {
    height: 100%;
}
.company-contact-item:hover {
    background: rgba(197, 160, 89, 0.08);
    border-color: rgba(197, 160, 89, 0.4);
    transform: translateX(-6px);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.15);
}

.company-contact-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(197, 160, 89, 0.2), rgba(197, 160, 89, 0.05));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.company-contact-item:hover .company-contact-icon {
    background: linear-gradient(135deg, #c5a059, #b08d4a);
    color: #ffffff;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4);
}

.company-contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.company-contact-label {
    font-size: 0.72rem;
    color: #c5a059;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.company-contact-value {
    font-size: 0.92rem;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}
.company-contact-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* =========================================
   Responsive - Company Section
========================================== */
@media (max-width: 1100px) {
    .company-info-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .company-info-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(197, 160, 89, 0.5), transparent);
    }
    .company-info-divider::before {
        padding: 8px 12px;
        top: 50%;
    }
    .company-info-card {
        text-align: center;
        align-items: center;
    }
    .company-logo-area {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .company-divider {
        width: 60%;
        background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.6), transparent);
    }
    .company-divider::before {
        right: 50%;
        transform: translate(50%, -50%);
    }
    .chairman-info {
        align-items: center;
        text-align: center;
    }
    .chairman-name-ar::before {
        display: none;
    }
    .chairman-title-en {
        padding-right: 0;
        align-items: center;
    }
    .company-contact-info {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-company-section {
        padding: 35px 0;
    }
    .company-name h3 {
        font-size: 1.25rem;
    }
    .company-name p {
        font-size: 0.85rem;
    }
    .company-name span {
        font-size: 0.62rem;
        letter-spacing: 1px;
    }
    .company-logo {
        height: 55px;
    }
    .chairman-label {
        font-size: 0.75rem;
    }
    .chairman-name-ar {
        font-size: 1.15rem;
    }
    .chairman-title-en span {
        font-size: 0.62rem;
    }
    .chairman-title-en strong {
        font-size: 0.88rem;
    }
    .company-contact-item {
        padding: 12px 15px;
        gap: 12px;
    }
    .company-contact-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .company-contact-value {
        font-size: 0.85rem;
    }
    .company-contact-label {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .footer-company-section {
        padding: 25px 0;
    }
    .company-name h3 {
        font-size: 1.1rem;
    }
    .company-name p {
        font-size: 0.78rem;
    }
    .company-name span {
        font-size: 0.58rem;
    }
    .company-logo {
        height: 48px;
    }
    .chairman-name-ar {
        font-size: 1rem;
    }
    .chairman-title-en strong {
        font-size: 0.78rem;
        letter-spacing: 0.5px;
    }
    .chairman-title-en span {
        font-size: 0.58rem;
        letter-spacing: 1.5px;
    }
    .company-contact-item {
        padding: 10px 12px;
        gap: 10px;
    }
    .company-contact-icon {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .company-contact-value {
        font-size: 0.78rem;
    }
    .company-contact-sub {
        font-size: 0.68rem;
    }
}