/* style.css - Full Updated Version */

:root {
    --primary-color: #0056A0;
    --secondary-color: #e4590E;
    --accent-color: #FFC107;
    --light-color: #FAF3E0;
    --dark-color: #2C2C2C;
    --light-bg: #F9F9F9;
    --ocean-blue: #1A73E8; 
    --ocean-dark: #0F5E94; 
    --sand-color: #E8D9B5;
    --text-color: #333333;
    --footer-bg: #838282;
    --header-font: 'Playfair Display', serif;
    --body-font: 'Raleway', sans-serif;
}

/* --- Global Resets & Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--body-font);
    color: var(--text-color);
    background-color: var(--light-bg);
    line-height: 1.6;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary-color);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

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

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 16px;
    border: 2px solid transparent; 
}

.primary-btn {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.primary-btn:hover {
    background-color: transparent;
    color: var(--primary-color);
}

.secondary-btn {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.secondary-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

/* --- Section Layout --- */
section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 36px;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.section-header h2:after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 15px auto 0;
}

.section-header p {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Header --- */
header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-bar {
    background-color: var(--primary-color);
    color: white;
    padding: 8px 0;
    font-size: 14px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info a {
    color: white;
    margin-right: 20px;
}

.contact-info a:hover {
    color: var(--accent-color);
}

.language-selector a {
    color: white;
    margin-left: 10px;
    opacity: 0.7;
}

.language-selector a.active,
.language-selector a:hover {
    opacity: 1;
    text-decoration: underline;
}

.main-header {
    background-color: white; 
    border-bottom: 1px solid #e1e1e1; 
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    position: relative; 
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 70px;
    width: auto;
    margin-right: 10px;
}

.logo h1 { 
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: var(--primary-color);
}
.logo-text-h1-style {
    font-size: 28px; 
    font-weight: 700; 
    margin: 0;
    color: var(--primary-color);
    font-family: var(--header-font); 
}

/* Desktop Navigation */
nav.desktop-nav {
    display: flex; 
    align-items: center;
}
nav.desktop-nav ul {
    display: flex;
    list-style: none;
    margin:0; /* Reset margin for ul */
    padding:0; /* Reset padding for ul */
}

nav.desktop-nav ul li {
    margin: 0 15px;
}

nav.desktop-nav ul li a {
    color: var(--dark-color);
    font-weight: 600;
    padding: 10px 0;
    position: relative;
}

nav.desktop-nav ul li a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

nav.desktop-nav ul li a:hover:after {
    width: 100%;
}

/* Mobile Navigation Toggle */
.mobile-nav-toggle {
    display: none; /* Hidden on desktop by default */
    cursor: pointer;
    z-index: 1005; 
}

.mobile-nav-toggle .hamburger {
    width: 25px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-nav-toggle .hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color); 
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.mobile-nav-toggle.active .hamburger span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.mobile-nav-toggle.active .hamburger span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active .hamburger span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}


/* --- Hero Section --- */
/* ... (Hero section CSS is unchanged from your last full version) ... */
/* --- START OF COPIED HERO SECTION FOR BREVITY --- */
.hero {position: relative;overflow: hidden;height: 80vh;color: white;display: flex;align-items: center;justify-content: center;text-align: center;background-color: #333;}
.video-background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
.video-background video {object-fit: cover;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.video-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 2;}
.hero-content {position: relative;z-index: 3;max-width: 800px;padding: 0 20px;}
.hero h1 {font-size: 48px;margin-bottom: 20px;color: white;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
.hero p {font-size: 20px;margin-bottom: 30px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
.hero-buttons {display: flex;justify-content: center;gap: 20px;}
.seo-welcome-text {margin-top: 25px;margin-bottom: 25px;font-size: 17px;color: #f0f0f0;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.75);max-width: 750px;margin-left: auto;margin-right: auto;line-height: 1.7;}
.seo-welcome-text p {margin-bottom: 12px;}
.seo-welcome-text p:last-child {margin-bottom: 0;}
.seo-welcome-text p strong {font-weight: 700;}
.hero.video-fallback {background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('IMG/essaouira-fallback.jpg');background-size: cover;background-position: center;}
/* --- END OF COPIED HERO SECTION --- */

/* --- Booking Section --- */
/* ... (Booking section CSS is unchanged from your last full version) ... */
/* --- START OF COPIED BOOKING SECTION FOR BREVITY --- */
.booking-section {background-color: white;padding: 60px 0; margin-top: -50px; position: relative; z-index: 10; }
.booking-container {max-width: 100%; margin: 0 auto;background: #fff;border-radius: 10px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); overflow: hidden;margin-bottom: 50px;}
.tab-controls {display: flex;border-bottom: 1px solid #eee; }
.tab-control {flex: 1;padding: 15px 20px; background: none;border: none;font-size: 18px; font-weight: 600;cursor: pointer;transition: all 0.3s ease;border-bottom: 3px solid transparent;color: #666;}
.tab-control.active {border-bottom-color: var(--primary-color);color: var(--primary-color);}
.tab-content {display: none; padding: 30px; }
.tab-content.active {display: block; }
.booking-form {display: flex;flex-wrap: wrap; justify-content: space-between;position: relative;gap: 20px; }
#transfer-booking .form-column { flex: 1; }
#transfer-booking .swap-icon-column {flex-grow: 0; flex-shrink: 0; flex-basis: 50px; display: flex;justify-content: center;align-items: center;}
#transfer-booking .form-icon { color: var(--primary-color);font-size: 24px;cursor: pointer;transition: all 0.3s ease;padding: 10px;margin-top: 25px; display: flex;align-items: center;justify-content: center;border-radius: 50%;}
#transfer-booking .form-row-split {flex-basis: 100%; display: flex;gap: 20px; align-items: flex-start; }
#transfer-booking .form-row-split .form-group {flex: 1; margin-bottom: 0; }
#transfer-booking .form-row-fullwidth { flex-basis: 100%; }
#transfer-booking .form-row-fullwidth .form-group { margin-bottom: 0; }
#trip-booking .form-column.left-column,#trip-booking .form-column.right-column {flex: 1; min-width: 270px; flex-basis: calc(50% - 10px); }
#trip-booking .swap-icon-column {display: none;}
.form-group {margin-bottom: 20px; }
.form-group label {display: block;margin-bottom: 8px; font-weight: 600;color: var(--dark-color);}
.form-group input,.form-group select {width: 100%;padding: 12px 15px; border: 1px solid #ddd;border-radius: 4px;font-size: 16px;transition: all 0.3s ease;box-sizing: border-box; }
.form-group input:focus,.form-group select:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(0, 86, 160, 0.1); }
.form-group select:required:invalid {color: #999;}
.form-group option[value=""][disabled] {display: none; }
.form-group option {color: #333; }
.contact-info-section {width: 100%; border-top: 1px solid #eee;padding-top: 20px;margin-top: 10px; flex-basis: 100%; }
.contact-info-heading {color: var(--primary-color);margin-bottom: 15px;font-weight: 600;font-size: 18px;width: 100%; }
.contact-form-row {display: flex; gap: 10pt; align-items: flex-start; width: 100%; }
.contact-form-row .form-group {flex: 1; margin-bottom: 0; }
.search-btn {flex-basis: 100%; background-color: var(--primary-color);color: white;border: none;padding: 15px;font-size: 18px;border-radius: 4px;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 1px;margin-top: 15px; }
.search-btn:hover {background-color: var(--secondary-color);}
/* --- END OF COPIED BOOKING SECTION --- */

/* ... (Vehicles, Routes, Tours, Why Us, Testimonials, CTA, Contact, Footer, Social Sidebar, Thank You, RTL sections remain the same) ... */
/* --- START OF COPIED SECTIONS FOR BREVITY --- */
.vehicles-section{background-color:white;padding:80px 0}.vehicles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;margin-top:40px}.vehicle-card{border-radius:8px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.1);transition:all .3s ease;background-color:white;height:100%;display:flex;flex-direction:column}.vehicle-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,.15)}.vehicle-image{height:220px;overflow:hidden;position:relative}.vehicle-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.vehicle-card:hover .vehicle-image img{transform:scale(1.05)}.vehicle-details{padding:25px;flex-grow:1;display:flex;flex-direction:column}.vehicle-details h3{font-size:22px;margin-bottom:15px;color:var(--primary-color);font-weight:700}.vehicle-features{list-style:none;margin-bottom:20px;padding-left:0;flex-grow:1}.vehicle-features li{margin-bottom:12px;color:#555;font-size:16px;display:flex;align-items:center}.vehicle-features li i{color:var(--primary-color);margin-right:10px;font-size:18px;width:20px;text-align:center}.vehicle-price{margin-bottom:15px}.price{font-size:18px;font-weight:700;color:var(--primary-color)}.availability{font-style:italic;color:#666;font-size:15px}.vehicle-btn{width:100%;padding:12px;text-align:center;background-color:var(--primary-color);color:white;border:2px solid var(--primary-color);border-radius:4px;font-weight:600;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;font-size:14px;margin-top:auto}.vehicle-btn:hover{background-color:transparent;color:var(--primary-color)}
.routes-section{background-color:var(--light-bg);padding:80px 0}.routes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:25px}.route-card{background-color:white;border-radius:8px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.08);transition:all .3s ease;height:100%;display:flex;flex-direction:column}.route-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,.12)}.route-header{padding:20px;border-bottom:1px solid #eee;background-color:#f9f9f9}.route-locations{display:flex;align-items:center;margin-bottom:12px}.route-from,.route-to{font-weight:700;color:var(--dark-color);font-size:16px}.route-locations i{margin:0 12px;color:var(--primary-color)}.route-price{font-size:20px;font-weight:700;color:var(--primary-color)}.route-details{padding:20px;flex-grow:1;display:flex;flex-direction:column}.route-distance{margin-bottom:15px;color:#666;display:flex;align-items:center}.route-distance i{color:var(--primary-color);margin-right:8px}.route-capacity{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.capacity-tag{background-color:#f5f5f5;padding:8px 12px;border-radius:4px;font-size:14px;display:inline-flex;align-items:center}.capacity-tag i{margin-right:6px;color:var(--primary-color)}.route-btn{width:100%;padding:12px;margin-top:auto;text-align:center;background-color:var(--primary-color);color:white;border:2px solid var(--primary-color);border-radius:4px;font-weight:600;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;font-size:14px}.route-btn:hover{background-color:transparent;color:var(--primary-color)}
.tours-section{background-color:white;padding:80px 0}.tours-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;margin-top:40px}.tour-card{border-radius:10px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.08);transition:all .3s ease;height:100%;display:flex;flex-direction:column;background-color:white}.tour-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,.15)}.tour-image{height:250px;position:relative;overflow:hidden}.tour-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.tour-card:hover .tour-image img{transform:scale(1.05)}.tour-details{padding:25px;flex-grow:1;display:flex;flex-direction:column}.tour-details h3{font-size:22px;margin-bottom:15px;color:var(--primary-color);font-family:var(--header-font)}.tour-details p{color:#555;margin-bottom:20px;line-height:1.6;flex-grow:1}.tour-features{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:25px}.tour-features span{display:inline-flex;align-items:center;background-color:#f5f5f5;padding:8px 12px;border-radius:30px;font-size:14px;color:#555}.tour-features span i{color:var(--primary-color);margin-right:6px;font-size:16px}.tour-btn{width:100%;padding:12px;text-align:center;background-color:var(--primary-color);color:white;border:2px solid var(--primary-color);border-radius:5px;font-weight:600;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px;font-size:14px;margin-top:auto}.tour-btn:hover{background-color:transparent;color:var(--primary-color)}
.why-us-section{background-color:var(--light-bg);padding:80px 0}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px}.benefit-card{background-color:white;padding:30px;border-radius:8px;text-align:center;box-shadow:0 2px 15px rgba(0,0,0,.05);transition:all .3s ease}.benefit-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px rgba(0,0,0,.1)}.benefit-icon{font-size:40px;color:var(--primary-color);margin-bottom:20px}.benefit-card h3{font-size:20px;margin-bottom:15px}.benefit-card p{color:#666}
.testimonials-section{background-color:#f9f9f9;padding:80px 0}.testimonials-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.testimonial-card{background-color:white;border-radius:8px;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,.1);border-top:4px solid var(--primary-color);transition:transform .3s ease,box-shadow .3s ease;width:100%}.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.15)}.testimonial-stars{color:#ffb900;font-size:18px;margin-bottom:10px;letter-spacing:2px}.testimonial-headline{color:var(--primary-color);font-size:20px;font-weight:600;margin-bottom:12px;font-family:var(--header-font)}.testimonial-text{color:#555;font-style:italic;margin-bottom:15px;font-size:16px;line-height:1.6}.testimonial-author{color:#777;font-weight:500;border-top:1px solid #eee;padding-top:12px;font-size:14px}
.cta-section{position:relative;padding:100px 0;color:white;text-align:center;overflow:hidden}.cta-background-slider{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.cta-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s ease-in-out}.cta-slide.active{opacity:1}.cta-section::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:2}.cta-content{position:relative;z-index:3;max-width:800px;margin:0 auto;padding:0 20px}.cta-content h2{font-size:36px;margin-bottom:20px;color:white;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.cta-content p{font-size:18px;margin-bottom:30px;color:white;opacity:.9}.cta-buttons{display:flex;justify-content:center;gap:20px}
.contact-section{position:relative;padding:80px 0;background:linear-gradient(135deg,#1E81B0 0%,#1E81B0 100%);color:white}.contact-section .section-header h2{color:white}.contact-section .section-header h2:after{background-color:white}.contact-section .section-header p{color:rgba(255,255,255,.9)}.contact-form-container{max-width:800px;margin:0 auto}.contact-form{background-color:transparent}.form-row{display:flex;flex-wrap:wrap;margin:0 -10px 20px}.contact-form .form-group{padding:0 10px;margin-bottom:0}.contact-form .form-group.half{width:50%}.contact-form .form-group.full{width:100%}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px 16px;background-color:white;border:none;border-radius:4px;font-size:16px;color:#333;font-family:var(--body-font);box-sizing:border-box}.contact-form 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='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 15px center;background-size:15px}.contact-form textarea{resize:vertical;min-height:120px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.3)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#999}.contact-form select:required:invalid{color:#999}.contact-form option[value=""][disabled]{display:none}.contact-form option{color:#333}.text-center{text-align:center}.send-btn{background-color:#ff9800;color:white;padding:14px 40px;border:none;border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.1)}.send-btn:hover{background-color:#f57c00;transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.15)}.send-btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.1)}
footer{background-color:var(--footer-bg);color:white;padding-top:70px}.footer-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px;margin-bottom:50px}.footer-column h3{color:white;margin-bottom:25px;position:relative;display:inline-block}.footer-column h3:after{content:'';position:absolute;left:0;bottom:-10px;width:40px;height:2px;background-color:var(--accent-color)}.footer-logo{display:flex;align-items:center;margin-bottom:20px}.footer-logo img{height:50px;margin-right:10px}.footer-logo h3{margin:0;color:white;position:static;display:inline}.footer-logo h3:after{display:none}.footer-column p{margin-bottom:20px;opacity:.8}.social-links{display:flex;gap:15px}.social-links a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:rgba(255,255,255,.1);border-radius:50%;color:white;transition:all .3s ease;font-size:18px}.social-links a img{width:60%;height:60%;object-fit:contain}.social-links a:hover{background-color:var(--primary-color);transform:translateY(-3px)}.footer-links{list-style:none;padding:0}.footer-links li{margin-bottom:10px}.footer-links a{color:white;opacity:.8;transition:all .3s ease}.footer-links a:hover{opacity:1;color:var(--accent-color);padding-left:5px}.footer-column .contact-info p{display:flex;align-items:center;margin-bottom:15px;opacity:.8}.footer-column .contact-info p i{margin-right:10px;color:var(--accent-color);width:18px;text-align:center}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;text-align:center;font-size:14px;opacity:.8}.payment-methods{display:flex;justify-content:center;gap:15px;margin-bottom:15px}.payment-methods img{height:30px;filter:grayscale(50%);opacity:.7}
.social-sidebar{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:999;gap:15px}.social-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background-color:#fff;color:white;border-radius:50%;transition:all .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.2);font-size:22px}.social-icon:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,.3)}.social-icon.instagram{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}.social-icon.whatsapp{background-color:#25D366}.social-icon.tripadvisor{background-color:transparent;padding:0;overflow:hidden}.social-icon.tripadvisor .tripadvisor-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.thank-you-container{text-align:center;padding:100px 20px;max-width:800px;margin:50px auto;background-color:white;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.1)}.success-icon{color:#4CAF50;font-size:64px;margin-bottom:20px}.thank-you-title{font-size:36px;margin-bottom:20px;color:var(--primary-color)}.thank-you-message{font-size:18px;margin-bottom:30px;line-height:1.6;color:#555}.back-btn{display:inline-block;padding:12px 24px;background-color:var(--primary-color);color:white;text-decoration:none;border-radius:4px;font-weight:600;transition:all .3s ease;border:2px solid var(--primary-color)}.back-btn:hover{background-color:transparent;color:var(--primary-color)}
[dir=rtl] .container{text-align:right}[dir=rtl] .vehicle-features li i,[dir=rtl] .route-distance i,[dir=rtl] .tour-features span i,[dir=rtl] .footer-column .contact-info p i{margin-right:0;margin-left:10px}[dir=rtl] .language-selector a{margin-left:0;margin-right:10px}[dir=rtl] .route-locations i{transform:scaleX(-1)}[dir=rtl] .logo img{margin-right:0;margin-left:10px}[dir=rtl] nav.desktop-nav ul li a:after{left:auto;right:0}[dir=rtl] .footer-column h3:after{left:auto;right:0}[dir=rtl] .footer-links a:hover{padding-left:0;padding-right:5px}[dir=rtl] .social-sidebar{right:auto;left:20px}[dir=rtl] .form-group select{background-position:left 15px center}
/* --- END OF COPIED SECTIONS --- */

/* --- Responsive Design --- */

/* Large Tablets & Small Laptops */
@media (max-width: 1024px) {
     #trip-booking .form-column.left-column,
     #trip-booking .form-column.right-column {
        flex-basis: calc(50% - 15px); 
    }
     .tours-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Tablets */
@media (max-width: 768px) {
    body {
        padding-bottom: 0; 
    }
    section {
        padding: 60px 0;
    }
    .section-header h2 {
        font-size: 30px;
    }
    .section-header p {
        font-size: 16px;
    }

    /* Header */
    .top-bar .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .main-header .container {
        padding: 10px 20px;
    }
    
    .logo-text-h1-style { 
        font-size: 24px; 
    }

    /* Hero */
    .hero h1 {
        font-size: 28px; 
        line-height: 1.2; 
        margin-bottom: 15px; 
    }
    .hero p { 
        font-size: 16px; 
        margin-bottom: 20px; 
    }
    .seo-welcome-text { 
        font-size: 13px; 
        line-height: 1.4; 
        margin-top: 15px; 
        margin-bottom: 15px; 
    }
    .seo-welcome-text p strong { 
        font-size: 1.05em; 
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px; 
        align-items: center;
    }
    .hero-buttons .btn { /* MODIFIED for mobile */
        padding: 10px 20px; 
        font-size: 15px;  
        width: auto; 
        min-width: 200px; 
        max-width: 90%; 
        box-sizing: border-box; 
    }

    #hero-video {
        object-position: center; 
    }

    /* Mobile Navigation Toggle and Panel */
    nav.desktop-nav { 
        display: none !important;
    }

    .mobile-nav-toggle {
        display: flex; 
    }

    nav.desktop-nav.mobile-nav-open { 
        display: flex !important; 
        flex-direction: column;
        position: fixed;
        top: 0; 
        right: 0;
        width: 280px; 
        max-width: 80%; 
        height: 100vh;
        background-color: white;
        box-shadow: -3px 0px 10px rgba(0,0,0,0.1);
        padding: 60px 20px 20px; 
        z-index: 1000; 
        transform: translateX(0%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto; 
    }
    
    nav.desktop-nav.mobile-nav-open ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    nav.desktop-nav.mobile-nav-open ul li {
        margin: 10px 0;
        width: 100%;
    }

    nav.desktop-nav.mobile-nav-open ul li a {
        padding: 12px 10px;
        display: block;
        width: 100%;
        color: var(--dark-color);
        border-bottom: 1px solid #f0f0f0;
    }
    nav.desktop-nav.mobile-nav-open ul li:last-child a {
        border-bottom: none;
    }

    nav.desktop-nav.mobile-nav-open ul li a:hover {
        background-color: #f9f9f9;
        color: var(--primary-color);
    }
    nav.desktop-nav.mobile-nav-open ul li a:after {
        display: none;
    }


    /* Booking Form Stacking (Affects BOTH tabs) */
    .booking-form {
        gap: 0px; 
    }
    
    .booking-form > .form-column,
    .booking-form > .form-row-split,
    .booking-form > .form-row-fullwidth,
    .booking-form > .contact-info-section,
    .booking-form > .search-btn {
        flex-basis: 100% !important; 
        width: 100%;
        min-width: unset;
        padding: 0 10px; 
        margin-bottom: 15px; 
    }
    .swap-icon-column { 
        display: none;
    }

    
    #transfer-booking .form-row-split {
        flex-direction: column; 
        gap: 15px; 
        padding: 0 10px; 
        margin-bottom: 15px;
    }
    #transfer-booking .form-row-split .form-group {
         width: 100%; 
         margin-bottom: 0; 
     }
     #transfer-booking .form-row-fullwidth {
        padding: 0 10px;
        margin-bottom: 15px;
     }

      #trip-booking .form-column.left-column,
      #trip-booking .form-column.right-column {
        margin-bottom: 0; 
      }


    .contact-info-section {
        margin-top: 0px; 
        padding: 20px 10px 0; 
        margin-bottom: 15px; 
    }
    .contact-form-row {
        flex-direction: column;
        gap: 15px;
    }
    .contact-form-row .form-group {
         width: 100%;
    }
     
     .search-btn {
        margin-bottom: 0;
     }

     .testimonial-card {
        width: calc(50% - 10px); 
        max-width: none;
    }

    .vehicle-image { height: 200px; }

    .routes-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

    .tours-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .tour-image { height: 220px; }
    .tour-details { padding: 20px; }
    .tour-details h3 { font-size: 20px; }
    .tour-features { gap: 8px; }
    .tour-features span { padding: 6px 10px; font-size: 13px; }

    .cta-content h2 { font-size: 28px; }
    .cta-content p { font-size: 16px; }
    .cta-buttons { flex-direction: column; align-items: center; gap: 15px; }

    .contact-section { padding: 60px 0; }
    .contact-section .section-header h2 { font-size: 30px; }
    .contact-section .section-header p { font-size: 16px; }
    .contact-form .form-row { margin: 0 -10px 0px; } 
    .contact-form .form-group.half { width: 100%; }
    .contact-form .form-group { margin-bottom: 15px; } 

    .social-sidebar {
        position: fixed;
        top: auto;
        bottom: 15px; 
        left: 0;
        right: 0;
        transform: none;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        background: rgba(255, 255, 255, 0.8); 
        padding: 8px 0;
        border-radius: 30px;
        margin: 0 20px; 
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        backdrop-filter: blur(5px); 
    }
    .social-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }

}

/* Small Mobiles */
@media (max-width: 480px) {
    .logo img { height: 50px; }
    .logo-text-h1-style { 
        font-size: 20px;
    }

    /* Hero title on small mobiles */
    .hero h1 {
        font-size: 22px; 
        line-height: 1.2; 
        margin-bottom: 10px; 
    }
    .hero p { 
        font-size: 14px; 
        margin-bottom: 15px; 
    }
    .hero-buttons .btn { /* MODIFIED for small mobiles */
        padding: 8px 15px;  
        font-size: 14px;   
        min-width: 160px; 
        max-width: 80%;
    }


    .testimonial-card {
        width: 100%; 
    }

    .vehicles-grid,
    .routes-grid,
    .tours-grid,
    .benefits-grid {
        grid-template-columns: 1fr; 
    }

    .footer-content {
        grid-template-columns: 1fr; 
        text-align: center;
    }
     .footer-column h3 {
        display: block; 
    }
     .footer-column h3:after {
        margin: 10px auto; 
    }
    .footer-logo, .social-links, .footer-column .contact-info p {
        justify-content: center;
    }
    .footer-column .contact-info p i {
       margin-left: 0; 
       margin-right: 8px; 
    }
    .payment-methods img { height: 25px; }

    .tab-content { padding: 20px 15px; }
    .booking-form > .form-column,
    .booking-form > .form-row-split,
    .booking-form > .form-row-fullwidth,
    .booking-form > .contact-info-section {
         padding: 0 5px;
     }

    .contact-form .form-group {
        padding: 0 5px;
    }
    .contact-form .form-row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .seo-welcome-text { 
        font-size: 12px; 
        line-height: 1.4;
        margin-top: 10px;     
        margin-bottom: 10px;    
    }
    .seo-welcome-text p strong { 
        font-size: 1.05em; 
    }

}