/* ═══════════════════════════════════════════════════════════════
   Al Tower Tours — Main Stylesheet
   Premium Tourism Website with Sky Blue Gradient Theme
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary-50: #f0f9ff; --primary-100: #e0f2fe; --primary-200: #bae6fd;
    --primary-300: #7dd3fc; --primary-400: #38bdf8; --primary-500: #0ea5e9;
    --primary-600: #0284c7; --primary-700: #0369a1; --primary-800: #075985;
    --primary-900: #0c4a6e;
    --gradient-primary: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    --gradient-hero: linear-gradient(135deg, #0ea5e9 0%, #0369a1 50%, #0c4a6e 100%);
    --gradient-text: linear-gradient(135deg, #0ea5e9, #0284c7);
    --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    --bg-body: #f8fafc; --bg-surface: #ffffff; --bg-surface-2: #f1f5f9; --bg-surface-3: #e2e8f0;
    --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --text-inverse: #ffffff;
    --text-link: #0ea5e9;
    --border-color: #e2e8f0; --border-primary: rgba(14,165,233,0.3);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 50px -12px rgba(0,0,0,0.15);
    --shadow-glow: 0 0 30px rgba(14,165,233,0.3);
    --shadow-card: 0 4px 20px rgba(0,0,0,0.06);
    --glass-bg: rgba(255,255,255,0.7); --glass-border: rgba(255,255,255,0.3); --glass-blur: 20px;
    --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
    --header-height: 80px; --container-max: 1200px; --section-padding: 100px 0;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; color:var(--text-primary);
    background:var(--bg-body); overflow-x:hidden; -webkit-font-smoothing:antialiased;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}
h1,h2,h3,h4,h5,h6 { font-family:'Poppins',sans-serif; font-weight:700; line-height:1.2; color:var(--text-primary); }
a { text-decoration:none; color:var(--text-link); transition:color var(--transition-fast); }
a:hover { color:var(--primary-700); }
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
button,input,select,textarea { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }

.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 20px; }
.section { padding:var(--section-padding); position:relative; }
.section-header { text-align:center; margin-bottom:60px; }
.section-badge {
    display:inline-flex; align-items:center; gap:8px; padding:8px 20px; background:var(--primary-50);
    border:1px solid var(--border-primary); border-radius:var(--radius-full); font-size:14px;
    font-weight:600; color:var(--primary-600); margin-bottom:16px; letter-spacing:0.5px; text-transform:uppercase;
}
.section-title { font-size:42px; font-weight:800; margin-bottom:16px; letter-spacing:-0.02em; }
.section-title .gradient-text, .gradient-text {
    background:var(--gradient-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-subtitle { font-size:18px; color:var(--text-secondary); max-width:600px; margin:0 auto; line-height:1.7; }

/* Buttons */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 32px;
    border-radius:var(--radius-full); font-family:'Poppins',sans-serif; font-weight:600; font-size:15px;
    transition:all var(--transition-normal); position:relative; overflow:hidden; border:none; cursor:pointer;
}
.btn-primary { background:var(--gradient-primary); color:var(--text-inverse); box-shadow:0 4px 15px rgba(14,165,233,0.35); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(14,165,233,0.45); color:var(--text-inverse); }
.btn-outline { background:transparent; color:var(--primary-500); border:2px solid var(--primary-500); }
.btn-outline:hover { background:var(--primary-500); color:var(--text-inverse); transform:translateY(-2px); }
.btn-white { background:var(--bg-surface); color:var(--primary-600); box-shadow:var(--shadow-md); }
.btn-white:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); color:var(--primary-700); }
.btn-sm { padding:10px 24px; font-size:14px; }
.btn-lg { padding:18px 40px; font-size:17px; }