/*
Theme Name: Travel Genius
Theme URI: https://travelgenius.blog/
Author: James Whitby
Author URI: https://jameswhitbyweb.co.uk
Description: A luxury travel agency website theme designed for bespoke travel planning and experiences. Features modern design with Bootstrap 5 integration, responsive layout, and business-focused sections for honeymoons, family holidays, solo travel, and travel stories.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: travelgenius
*/

/* ==============================================
   Travel Genius Theme - Main Stylesheet
   ============================================== */

/* CSS Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* CSS Variables */
:root {
  --bs-primary-rgb: 98, 194, 208;
  --secondary-color: #f8d7da;
  --accent-pink: #ffc9d4;
  --dark-text: #2d2d2d;
  --light-bg: #fafafa;
  --white: #ffffff;
}

/* Typography & Body */
body {
  font-family: 'Poppins', sans-serif;
  color: var(--dark-text);
  line-height: 1.6;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700 !important; }

/* ==============================================
   Header & Navigation
   ============================================== */
header {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

header a:hover {color: rgb(var(--bs-primary-rgb)) !important;text-decoration: underline;}

.top-bar a {
  color: var(--white);
  text-decoration: none;
}

.top-bar a:hover {text-decoration: underline !important;}


/* ==============================================
   Hero Section
   ============================================== */
.hero {
  height: 600px;
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)),
    var(--hero-image) center/cover;
}
.cta-button {
  display: inline-block;
  background: rgb(var(--bs-primary-rgb));
  color: var(--white);
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s;
  border: none;
}
.cta-button:hover {
  background: #4fb3c1;
  transform: translateY(-2px);
}

/* ==============================================
   About Section
   ============================================== */
.about-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.about-content h2 { font-size: 42px; color: rgb(var(--bs-primary-rgb)); }
.about-content p { color: #555; line-height: 1.8; }

.xp-badge {
  background: var(--secondary-color);
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: 600;
  color: var(--dark-text);
  display: inline-block;
}

.badge-logo { height: 60px; width: auto; }

/* ==============================================
   Services & Stories Sections
   ============================================== */
.services-section, .stories-section { background: var(--light-bg); }

.services-section h2,
.why-book-section h2,
.stories-section h2,
.contact-cta h2 {
  font-size: 42px;
  color: rgb(var(--bs-primary-rgb));
}



.service-image, .story-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.read-more { color: rgb(var(--bs-primary-rgb)); text-decoration: none; font-weight: 600; }

/* ==============================================
   Why Book Section
   ============================================== */
.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgb(var(--bs-primary-rgb));
}

/* ==============================================
   Contact Section
   ============================================== */
.contact-form-section {
  background: var(--light-bg);
  border-radius: 10px;
}

.frm_form_field { margin-bottom: 20px; }
.frm_form_field label { display: block; margin-bottom: 8px; font-weight: 500; }

.submit-button {
  background: rgb(var(--bs-primary-rgb));
  color: var(--white);
  padding: 15px 40px;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 16px;
}

.submit-button:hover {
  background: #4fb3c1;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(98, 194, 208, 0.4);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--light-bg);
  border-radius: 10px;
  margin-bottom: 20px;
}

.contact-icon {
  width: 50px;
  height: 50px;
  background: rgb(var(--bs-primary-rgb));
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.contact-details h4 { font-size: 16px; margin-bottom: 5px; font-weight: 600; }
.contact-details p { margin: 0; color: #666; }
.contact-details a { color: rgb(var(--bs-primary-rgb)); text-decoration: none; font-weight: 500; }

.social-section {
  margin-top: 40px;
  padding: 30px;
 background: var(--light-bg);
  border-radius: 10px;
  text-align: center;
}

.social-links-contact a {
  width: 50px;
  height: 50px;
  background: rgb(var(--bs-primary-rgb));
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  font-size: 24px;
  transition: all 0.3s;
}

.social-links-contact a:hover { background: #4fb3c1; transform: translateY(-3px); }

/* ==============================================
   Newsletter Section
   ============================================== */
.newsletter-section {
  background: linear-gradient(135deg, rgb(var(--bs-primary-rgb)), #4fb3c1);
  color: var(--white);
}

/* ==============================================
   Footer
   ============================================== */
footer { background: var(--dark-text); color: var(--white); }
.footer-section h3 { color: rgb(var(--bs-primary-rgb)); }
.footer-section a { color: #ccc; text-decoration: none; transition: color 0.3s; }
.footer-section a:hover { color: rgb(var(--bs-primary-rgb)); }

.social-links a {
  width: 40px;
  height: 40px;
  background: rgb(var(--bs-primary-rgb));
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
}


a {color: rgb(var(--bs-primary-rgb))}
a:hover {text-decoration: none !important;}