.elementor-335 .elementor-element.elementor-element-f142e04:not(.elementor-motion-effects-element-type-background), .elementor-335 .elementor-element.elementor-element-f142e04 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #F5DD8773 0%, #FFFFFF 100%);}.elementor-335 .elementor-element.elementor-element-f142e04{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-120px;margin-bottom:0px;padding:190px 0px 80px 0px;}.elementor-335 .elementor-element.elementor-element-f142e04 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-335 .elementor-element.elementor-element-814895e.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-335 .elementor-element.elementor-element-814895e.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-335 .elementor-element.elementor-element-5efed8e{--display:flex;}.elementor-335 .elementor-element.elementor-element-0c0f20c{--display:flex;}@media(max-width:1024px){.elementor-335 .elementor-element.elementor-element-f142e04{margin-top:-105px;margin-bottom:0px;padding:180px 0px 60px 0px;}}@media(max-width:767px){.elementor-335 .elementor-element.elementor-element-f142e04{padding:90px 0px 60px 0px;}}/* Start custom CSS for html, class: .elementor-element-9683448 *//* =========================================
   1. CONTACT PAGE HERO
   ========================================= */

.contact-hero {
    position: relative;
    height: 50vh; /* Shorter than the home page hero */
    /* Using your desert image as the background */
    background: url('https://toursrus.ma/wp-content/uploads/2026/02/upscalemedia-transformed-1-scaled.jpeg') center/cover no-repeat fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFFFFF;
}

/* Dark Overlay (Essential for reading text over photos) */
.contact-hero .hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* 40% darkness */
    z-index: 1;
}

/* The Content */
.contact-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 0 20px;
    animation: fadeInDown 1s ease-out;
}

/* Typography */
.hero-subtitle {
    display: block;
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #C5A059; /* Gold */
    margin-bottom: 15px;
    font-weight: 700;
}

.contact-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.contact-hero p {
    font-size: 1.1rem;
    color: #F0F0F0; /* Soft White */
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
}

.gold-text {
    color: #C5A059;
}

/* Animation */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .contact-hero { height: 45vh; }
    .contact-hero h1 { font-size: 2.2rem; }
    .contact-hero p { font-size: 1rem; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4d4a056 *//* =========================================
   UNIFIED CONTACT SECTION (GOLD & MODERN)
   ========================================= */

.unified-contact-section {
    padding: 100px 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.contact-split-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Balanced split */
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- LEFT SIDE: INFO STYLING --- */
.contact-side-info {
    animation: fadeInSlideLeft 1s ease-out;
}

.tag-gold {
    color: #C5A059;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 10px;
}

.contact-side-info h2 {
    font-size: 3rem;
    color: #333;
    line-height: 1.1;
    margin-bottom: 20px;
}

.gold-line-short {
    width: 60px;
    height: 4px;
    background: #C5A059;
    border-radius: 2px;
    margin-bottom: 30px;
}

.side-desc {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* Vertical Info Cards */
.vertical-info-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.mini-info-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mini-icon {
    width: 50px;
    height: 50px;
    background: #FFF9F0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: 0.3s;
}

.mini-info-card:hover .mini-icon {
    background: #C5A059;
    color: #FFF;
    transform: rotate(-10deg);
}

.mini-text h4 {
    font-size: 1.1rem;
    color: #222;
    margin: 0 0 5px 0;
}

.mini-text p, .mini-text a {
    color: #777;
    text-decoration: none;
    font-size: 1rem;
    margin: 0;
}

.status-green {
    display: inline-block;
    background: #E6F4EA;
    color: #1E8E3E;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-top: 5px;
}

/* --- RIGHT SIDE: FORM CARD --- */
.form-inner-card {
    background: #FFFFFF;
    padding: 60px;
    border-radius: 40px;
    border: 1px solid rgba(197, 160, 89, 0.2);
    box-shadow: 0 30px 70px rgba(197, 160, 89, 0.08);
    position: relative;
    animation: fadeInSlideRight 1s ease-out;
}

.form-tag {
    color: #C5A059;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
}

.form-inner-card h3 {
    font-size: 2.2rem;
    margin: 10px 0 40px 0;
    color: #333;
}

/* Targeting CF7 Inputs specifically */
.sahara-cf7-wrapper input:not([type="submit"]),
.sahara-cf7-wrapper select,
.sahara-cf7-wrapper textarea {
    width: 100%;
    padding: 18px 0; /* Modern underline style */
    background: transparent;
    border: none;
    border-bottom: 2px solid #EEE;
    font-size: 1rem;
    color: #333;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.sahara-cf7-wrapper input:focus,
.sahara-cf7-wrapper textarea:focus {
    outline: none;
    border-bottom-color: #C5A059;
}

/* Submit Button */
.sahara-cf7-wrapper input[type="submit"] {
    width: 100%;
    background: #C5A059;
    color: #FFF;
    padding: 20px;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.2);
}

.sahara-cf7-wrapper input[type="submit"]:hover {
    background: #333;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Social Buttons Row */
.side-socials { margin-top: 50px; }
.side-socials span { font-weight: 700; color: #333; margin-bottom: 15px; display: block; }

.social-icons-row { display: flex; gap: 12px; }
.social-icons-row a {
    width: 45px; height: 45px; background: #f8f8f8;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #333; text-decoration: none;
    font-weight: 800; font-size: 0.75rem; transition: 0.3s;
}

.social-icons-row a:hover {
    background: #C5A059; color: #FFF; transform: translateY(-3px);
}

/* --- ANIMATIONS --- */
@keyframes fadeInSlideLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInSlideRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- RESPONSIVENESS --- */
@media (max-width: 991px) {
    .contact-split-wrapper { grid-template-columns: 1fr; gap: 60px; text-align: center; }
    .gold-line-short { margin: 15px auto 30px auto; }
    .mini-info-card { flex-direction: column; }
    .social-icons-row { justify-content: center; }
    .form-inner-card { padding: 40px 20px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-968ce27 *//* =========================================
   3. MAP SECTION
   ========================================= */

.map-section {
    padding: 0 0 100px 0; /* Padding bottom only */
    background-color: #FFFFFF;
}

/* Header Styling */
.map-header {
    text-align: center;
    margin-bottom: 40px;
}

.map-header h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.map-header p {
    color: #888;
    font-size: 1.1rem;
}

/* The Map Container */
.map-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden; /* Cuts the sharp corners of the iframe */
    background: #FFFFFF;
    padding: 10px; /* Creates a white border effect */
    border: 1px solid #EAEAEA;
    
    /* The "Floating" Shadow */
    box-shadow: 0 20px 50px rgba(197, 160, 89, 0.15); 
}

.map-frame iframe {
    border-radius: 15px; /* Rounds the map itself */
    display: block;
    width: 100%;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .map-frame iframe {
        height: 300px; /* Shorter map on mobile */
    }
    
    .map-header h2 {
        font-size: 1.8rem;
    }
}/* End custom CSS */