/*
Theme Name: Bin Zafar Tours
Theme URI: https://binzafartours.com
Author: Your Name
Description: A custom, fast, SEO-friendly theme for Hajj and Umrah services.
Version: 1.0.4
Text Domain: binzafar
*/

/* STREAMING_CHUNK:Defining color variables and fonts... */
:root {
--primary-color: #004d40;
--secondary-color: #d4af37;
--text-dark: #222222;
--bg-light: #f8f9fa;
--font-main: 'Inter', sans-serif;
--font-heading: 'Playfair Display', serif;
--transition: all 0.3s ease-in-out;
}

/* STREAMING_CHUNK:Styling basic HTML elements... */
body {
font-family: var(--font-main);
color: var(--text-dark);
margin: 0;
background-color: var(--bg-light);
line-height: 1.6;
}

h1, h2, h3 {
font-family: var(--font-heading);
color: var(--primary-color);
margin-top: 0;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* STREAMING_CHUNK:Styling the header and navigation... */
.site-header {
background-color: #ffffff;
padding: 20px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 1000;
}

.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}

.site-title a {
font-size: 28px;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}

.main-navigation ul {
list-style: none;
display: flex;
gap: 30px;
margin: 0;
padding: 0;
}

.main-navigation a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: var(--transition);
}

.main-navigation a:hover {
color: var(--secondary-color);
}

/* STREAMING_CHUNK:Styling the Hero section with Makkah background... */
.hero-section {
background-color: var(--primary-color);
background-image: linear-gradient(rgba(0, 77, 64, 0.85), rgba(0, 77, 64, 0.85)), url('https://images.unsplash.com/photo-1565552643952-b8845271778c?q=80&w=2000&auto=format&fit=crop');
background-size: cover;
background-position: center;
color: #ffffff;
text-align: center;
padding: 120px 20px;
}

.hero-title {
color: var(--secondary-color);
font-size: 3.5em;
margin-bottom: 20px;
}

.hero-section p {
font-size: 1.2em;
max-width: 700px;
margin: 0 auto 30px;
color: #ffffff;
}

/* STREAMING_CHUNK:Styling interactive buttons... */
.btn {
display: inline-block;
padding: 15px 35px;
background-color: var(--secondary-color);
color: #ffffff !important;
text-decoration: none;
font-weight: 600;
border-radius: 30px;
transition: var(--transition);
border: none;
cursor: pointer;
}

.btn:hover {
background-color: #bfa136;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* STREAMING_CHUNK:Styling the mobile-responsive service grid... */
.services-section, .packages-section {
padding: 80px 0;
}

.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}

/* STREAMING_CHUNK:Styling the interactive hover cards... */
.service-card {
background: #ffffff;
padding: 40px 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
transition: var(--transition);
border-top: 4px solid transparent;
}

.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-top-color: var(--secondary-color);
}

.site-footer {
background-color: var(--primary-color);
color: #ffffff;
text-align: center;
padding: 40px 0 20px;
margin-top: auto;
}