/*
 Theme Name:   Tourm Child  
 Theme URI:    https://themeholy.com/wordpress/tourm
 Description:  This is a child theme for Tourm - WordPress Theme
 Author:       Themeholy
 Author URI:   https://themeforest.net/user/themeholy 
 Template:     tourm
 Version:      2.1.0
 Tags:         two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  tourm-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */ 

.wprs_unslider-arrow,.wprs_unslider-nav{ display:none !important }

.wptravelengine_css_v2 #tabs-container, .wte_enquiry_contact_form {
  border-radius: 10px !important;
	  margin-top: 10px !important;
}

.wte_enquiry_contact_form-wrap {
  border-radius: 10px !important;
}
.tab-content{
	  padding: 1em !important;
}

body > header > div > div > div > div.elementor-element.elementor-element-72aeb0f.e-con-full.e-flex.e-con.e-child > div > div > img
{
	  max-width: 100px !important;
}

/* --- Modern TripAdvisor Card Style --- */

/* 1. The Main Speech Bubble Box */
.wptripadvisor_t1_DIV_2 {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important; /* Very subtle border */
    border-radius: 12px !important;        /* Modern rounded corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; /* Soft, deep shadow */
    padding: 30px !important;
    margin-bottom: 20px !important;        /* Space between box and avatar */
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Hover Effect: Lifts up slightly */
.wptripadvisor_t1_DIV_2:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
    border-color: #6EC1E4 !important;      /* Gold border on hover */
}

/* 2. The Title (e.g., "Exceptional Journey") */
.wprevrevtitle {
    display: block !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;             /* Dark blue/grey */
    margin-bottom: 8px !important;
    text-transform: capitalize !important;
}

/* 3. The Review Text */
.wptripadvisor_t1_P_3 {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    font-family: "Open Sans", sans-serif !important; /* Or your site font */
}

/* 4. The "Read More" Link */
.wprs_rd_more {
    color: #6EC1E4 !important;            /* Gold Color */
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

/* 5. Author Section Container */
/* Flexbox to align Avatar and Name side-by-side */
.wptripadvisor_t1_DIV_1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px !important;
}

/* 6. The Avatar Image */
.wptripadvisor_t1_IMG_4 {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;        /* Perfect circle */
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    margin-right: 15px !important;
    float: left !important;               /* Ensures it sits left of text */
}

/* 7. The Author Name & Date */
.wptripadvisor_t1_SPAN_5 {
    display: inline-block !important;
    font-family: sans-serif !important;
    line-height: 1.4 !important;
    padding-top: 5px !important;
}

/* Author Name Styling */
.wptripadvisor_t1_SPAN_5, 
.wptripadvisor_t1_SPAN_5 strong {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Date Styling */
.wprev_showdate_T1 {
    display: block !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 2px !important;
}

/* 8. Hide the little Owl Logo inside the card (Optional - Cleaner look) */
.wptripadvisor_t1_tripadvisor_logo {
    display: none !important; 
}


/* --- CINEMATIC 600px HEIGHT (DOUBLE SIZE) --- */

/* 1. Grid Container - FORCE 600px ROWS */
#team .e-con-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* This makes every row TALL (600px) */
    grid-auto-rows: 600px !important; 
    gap: 0 !important;
    width: 100% !important;
}

/* 2. Force Children to fill the 600px space */
#team .e-con-inner > .elementor-element {
    width: 100% !important;
    height: 100% !important; /* Fill the 600px */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; 
}

/* 3. Image Styling - Tall & Sharp */
#team .elementor-widget-image {
    width: 100% !important;
    height: 100% !important;
}

#team .elementor-widget-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Fills the tall box perfectly */
    object-position: center top !important; 
}


/* 4. Text Styling - Centered in the tall box */
#team .elementor-widget-tourmsectiontitle {
    height: 100% !important;
    background-color: #faf9f6 !important;
    
    /* Scrollable just in case text is surprisingly long */
    overflow-y: auto !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centers text vertically */
}

/* Typography */
#team .sec-title {
    font-size: 28px !important; /* Larger name for larger box */
    color: #2c3e50;
    margin-bottom: 15px !important;
    text-transform: uppercase;
}

#team p {
    font-size: 15px !important; /* Slightly larger text */
    line-height: 1.8 !important;
    color: #555;
    margin-bottom: 0 !important;
}

/* 5. Mobile Layout (Keep distinct from Desktop) */
@media (max-width: 767px) {
    #team .e-con-inner {
        grid-template-columns: 1fr !important; 
        grid-auto-rows: auto !important; /* Let mobile fit content naturally */
    }
    
    /* On mobile, 600px is too tall, so we limit it to 400px */
    #team .elementor-widget-image {
        height: 400px !important; 
    }
    
    /* Reorder Logic */
    #team .e-con-inner > .elementor-element:nth-child(3) { order: 4; }
    #team .e-con-inner > .elementor-element:nth-child(4) { order: 3; }
    #team .e-con-inner > .elementor-element:nth-child(7) { order: 8; }
    #team .e-con-inner > .elementor-element:nth-child(8) { order: 7; }
    #team .e-con-inner > .elementor-element:nth-child(11) { order: 12; }
    #team .e-con-inner > .elementor-element:nth-child(12) { order: 11; }
}

/* --- DESKTOP: CINEMATIC ZIG-ZAG (600px) --- */
@media (min-width: 768px) {
    #team .e-con-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 600px !important; /* Strict height for PC */
        gap: 0 !important;
        width: 100% !important;
    }

    #team .e-con-inner > .elementor-element {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important; 
    }

    /* Desktop Image Styling */
    #team .elementor-widget-image {
        width: 100% !important;
        height: 100% !important;
    }
    
    #team .elementor-widget-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }


    /* Desktop Text Styling */
    #team .elementor-widget-tourmsectiontitle {
        height: 100% !important;
        background-color: #faf9f6 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow-y: auto !important; /* Safety scroll */
    }
}

/* --- MOBILE: CLEAN STACK (Image 1st, Text 2nd) --- */
@media (max-width: 767px) {
    #team .e-con-inner {
        display: flex !important; /* Switch to Flex for easy ordering */
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Unlock the height so NO TEXT gets cut off ("missed") */
    #team .e-con-inner > .elementor-element {
        width: 100% !important;
        height: auto !important; 
        min-height: auto !important; 
    }

    /* Mobile Images: Short & Wide */
    #team .elementor-widget-image {
        height: 350px !important; /* Good height for phone */
        width: 100% !important;
    }
    
    #team .elementor-widget-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
        filter: grayscale(0%) !important; /* Always colored on mobile */
    }

    /* Mobile Text: Auto-height (Fits all text) */
    #team .elementor-widget-tourmsectiontitle {
        height: auto !important;
        background-color: #faf9f6 !important;
    }

    /* --- THE ORDER FIX (Re-arranging the Zig-Zags) --- */
    /* By default, Elementor stacks them 1, 2, 3, 4... */
    /* We need to swap the pairs where Text comes before Image */

    /* 1. Omar (Img + Text) -> Correct by default */
    #team .e-con-inner > .elementor-element:nth-child(1) { order: 1; }
    #team .e-con-inner > .elementor-element:nth-child(2) { order: 2; }

    /* 2. Issam (Text + Img) -> SWAP NEEDED */
    #team .e-con-inner > .elementor-element:nth-child(3) { order: 4; } /* Text moves down */
    #team .e-con-inner > .elementor-element:nth-child(4) { order: 3; } /* Image moves up */

    /* 3. Mustapha (Img + Text) -> Correct by default */
    #team .e-con-inner > .elementor-element:nth-child(5) { order: 5; }
    #team .e-con-inner > .elementor-element:nth-child(6) { order: 6; }

    /* 4. Anouar (Text + Img) -> SWAP NEEDED */
    #team .e-con-inner > .elementor-element:nth-child(7) { order: 8; } /* Text moves down */
    #team .e-con-inner > .elementor-element:nth-child(8) { order: 7; } /* Image moves up */

    /* 5. Youssef 1 (Img + Text) -> Correct by default */
    #team .e-con-inner > .elementor-element:nth-child(9) { order: 9; }
    #team .e-con-inner > .elementor-element:nth-child(10) { order: 10; }

    /* 6. Youssef 2 (Text + Img) -> SWAP NEEDED */
    #team .e-con-inner > .elementor-element:nth-child(11) { order: 12; } /* Text moves down */
    #team .e-con-inner > .elementor-element:nth-child(12) { order: 11; } /* Image moves up */
}

/* Shared Typography (Both Mobile & Desktop) */
#team .sec-title {
    color: #2c3e50;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
    border-bottom: 3px solid #6EC1E4;
}

/* Adjust font sizes responsively */
@media (min-width: 768px) {
    #team .sec-title { font-size: 28px !important; }
    #team p { font-size: 15px !important; line-height: 1.8 !important; }
}
@media (max-width: 767px) {
    #team .sec-title { font-size: 24px !important; }
    #team p { font-size: 14px !important; line-height: 1.6 !important; }
}
    #team .sub-title { margin-bottom: 10px !important; }
    
    
    
    
    
    
    @media (max-width: 1024px) {
    /* 1. Reset the dropdown positioning to off-canvas */
    .elementor-element-35ce09f .elementor-nav-menu--dropdown {
        position: fixed !important;
        top: 0;
        right: -300px; /* Hidden by default off-screen */
        width: 300px;
        height: 100vh !important;
        background-color: #ffffff; /* Change to your brand color */
        z-index: 9999;
        transition: right 0.4s ease-in-out !important;
        display: block !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        padding-top: 60px;
    }

    /* 2. Slide in the menu when the toggle is active */
    .elementor-element-35ce09f .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
        right: 0 !important;
    }

    /* 3. Style the menu list items for a vertical sidebar look */
    .elementor-element-35ce09f .elementor-nav-menu--dropdown ul {
        flex-direction: column !important;
        padding: 20px !important;
    }

    .elementor-element-35ce09f .elementor-nav-menu--dropdown li {
        text-align: left !important;
        border-bottom: 1px solid #eeeeee;
    }

    /* 4. Ensure the Close button is visible and properly placed */
    .elementor-element-35ce09f .elementor-menu-toggle {
        z-index: 10000;
        position: relative;
    }

    .elementor-element-35ce09f .elementor-menu-toggle.elementor-active {
        position: fixed;
        right: 20px;
        top: 20px;
    }
    
   
    
    .elementor-nav-menu--dropdown.elementor-nav-menu__container {
     margin-top: 0px  !important; 
}
}

@media (max-width: 767px) {
    .elementor-7972 .elementor-element.elementor-element-31b38f77 {
        padding-top: 10px;
        padding-bottom: 30px;
    }
}
/* Target the toggle button container */
.elementor-menu-toggle {
    background-color: rgba(110, 193, 228, 0.1); /* Very light version of your color for the box */
    border-radius: 8px; /* Rounded corners */
    padding: 10px !important;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style the actual hamburger and close icons */
.elementor-menu-toggle i {
    color: #6EC1E4 !important; /* Your specific color */
    font-size: 24px; /* Adjust size if needed */
    transition: transform 0.3s ease;
}

/* Hover effect for interactivity */
.elementor-menu-toggle:hover {
    background-color: #6EC1E4;
}

.elementor-menu-toggle:hover i {
    color: #ffffff !important; /* Icon turns white on hover */
}

/* Animation when the menu is active/open */
.elementor-menu-toggle.elementor-active {
    background-color: #6EC1E4;
}

.elementor-menu-toggle.elementor-active i {
    color: #ffffff !important;
    transform: rotate(90deg);
}

/* 1. Sidebar Container Refinement */
.elementor-element-35ce09f .elementor-nav-menu--dropdown {
    background-color: #ffffff !important;
    padding-top: 80px !important; /* Space for the close button */
    box-shadow: -10px 0 30px rgba(0,0,0,0.05) !important;
}

/* 2. Style the Menu Items - Removing the grey boxes */
.elementor-element-35ce09f .elementor-nav-menu--dropdown .elementor-item {
    font-family: 'Playfair Display', serif; /* Or your preferred brand font */
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    padding: 15px 30px !important;
    border: none !important; /* Removes those lines from your screenshot */
    background: transparent !important; /* Removes the grey background */
    display: block;
    transition: all 0.3s ease;
}

/* 3. Modern Hover/Active State */
.elementor-element-35ce09f .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-element-35ce09f .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: #6EC1E4 !important;
    padding-left: 40px !important; /* Subtle "slide right" effect on hover */
    background-color: rgba(110, 193, 228, 0.05) !important;
}

/* 4. Revamp the Close Button (The X) */
.elementor-menu-toggle.elementor-active {
    background: transparent !important;
}

.elementor-menu-toggle.elementor-active i {
    color: #6EC1E4 !important;
    font-size: 28px !important;
    background: #ffffff;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.elementor-element-35ce09f .elementor-nav-menu--dropdown li:last-child .elementor-item {
    margin-top: 20px;
    max-width: 200px;
    background-color: #6EC1E4 !important;
    color: #fff !important;
    text-align: center;
    border-radius: 5px;
    padding: 12px !important;
}.elementor-element-35ce09f .elementor-nav-menu--dropdown li:last-child {
  border-bottom: none !important;
}

@media (min-width: 1024px) {
    #menu-1-35ce09f > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-8048 > a {
       display:  none !important;
    }
}