/*
Table of Contents:
------------------------------------
00. Base & Utility Styles
01. Typography
02. Common Elements & Components
03. Header
04. Footer
05. Page Specific Styles
    05.1. Homepage
    05.2. Pricing Page
    05.3. Business Page
    05.4. 404 Page
    05.5. Blog (Archive & Single)
06. Modals & Popups
07. Forms
08. Animations & Effects
09. Third-Party Overrides
10. Media Queries
Refactored by TRIPA Inc. 
------------------------------------
*/

/* 00. Base & Utility Styles ------------------------------------ */
html,
body:not(.post-template-default.single-post) {
    overflow-x: hidden !important; /* Keep !important for library override */
}

body.position-fixed {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

ul,
ol {
    list-style: none !important; /* Keep !important for library override */
    padding-left: 0 !important; /* Keep !important for library override */
    margin-left: 0 !important; /* Keep !important for library override */
}

.font-w600 {
    font-weight: 600;
}

.text-green {
    color: #7AB794;
}

a.text-green:hover,
a.text-green:visited {
    color: #7AB794; /* Redundant, already covered by .text-green if linked */
}

/* Helper for scrollable content */
.scroll-overflow {
    height: 380px;
    overflow-y: auto; /* Changed to auto for better UX */
}

.scroll-overflow::-webkit-scrollbar {
    width: 5px;
}

/* Transform utilities - consider if these are still needed or if Elementor handles this */
.transform-z-70 {
    transform: translateZ(70px) scale(0.8) !important;
}

.transform-z-80 {
    transform: translateZ(80px) scale(0.8) !important;
}

.transform-z-90 {
    transform: translateZ(90px) scale(0.8) !important;
}

.transform-z-100 {
    transform: translateZ(100px) scale(0.8) !important;
}

/* 01. Typography ------------------------------------ */
/* No specific refactoring needed here based on the original provided */

/* 02. Common Elements & Components ------------------------------------ */

/* Custom list styling */
.custom-list-style,
.custom-list-style ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

body.single-post .single-blog-item .entry-content ul li,
.custom-list-style ul li {
    padding-left: 30px;
    position: relative;
}

body.single-post .single-blog-item .entry-content ul li:before,
.custom-list-style ul li::before {
    content: '';
    position: absolute;
    left: 4px; /* Adjusted from original to allow different left for single-post */
    top: 12px;
    width: 12px;
    height: 12px;
    background: #7AB794;
    border-radius: 50%;
}

body.single-post .single-blog-item .entry-content ul li:before {
    left: 9px;
    top: 10px;
    width: 7px;
    height: 7px;
}

.custom-list-style ul li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 20px;
    height: 20px;
    background: rgba(122, 183, 148, 0.24);
    border-radius: 50%;
}

body.single-post .single-blog-item .entry-content ol {
    list-style: auto !important;
    padding-left: 20px !important;
}

/* Primary Button Styles (DRY Principle) */
.btn_primary {
    cursor: pointer;
    background-color: #7AB794 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 5px;
    padding: 10px 25px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn_primary:hover {
    color: #fff !important;
}

.btn_primary:focus {
    box-shadow: none !important;
}

/* This is a new class to harmonize shared header button styles (shape, font, padding) */
.btn-header-action {
    border-radius: 5px; /* Consistent rounded corners */
    font-weight: 700 !important; /* Consistent bold text */
    padding: 10px 20px !important; /* Consistent padding for all action buttons */
    /* margin: 0 10px; -- We're managing spacing via `gap` in `.header-action-buttons` now */
    transition: .3s ease all;
    display: flex; /* For centering text */
    justify-content: center; /* For centering text */
    align-items: center; /* For vertical alignment */
    text-decoration: none; /* Ensure no underline on links */
    white-space: nowrap; /* Prevent text wrapping inside buttons */
}

/* Specific Button Styles (Leveraging .btn_primary) */
/* This is where 'CONTACT' and 'BUSINESS' would fit using common classes */
.btn_contact { /* CONTACT button - Dark Blue */
    background-color: #384259;
    border: 1px solid #384259;
    color: #fff !important;
    /* Ensure it inherits shape from .btn-header-action by having .btn-header-action class in HTML */
}

.btn_register { /* LOGIN button - Green */
    background-color: #7AB794; /* Match the exact green from the LOGIN button in the screenshot */
    border: 1px solid #7AB794;
    color: #fff !important;
    /* Ensure it inherits shape from .btn-header-action by having .btn-header-action class in HTML */
}

.btn_business { /* BUSINESS button - Purple */
    background-color: #954A89;
    border: 1px solid #954A89;
    color: #fff !important;
    /* Ensure it inherits shape from .btn-header-action by having .btn-header-action class in HTML */
}

/* Styles for header specific buttons */
.btn_contact,
.btn_register {
    /* Combined shared styles */
    color: #fff !important;
    margin-right: 10px !important; /* Keep !important for specific override */
    display: flex; /* For centering text on mobile */
    justify-content: center; /* For centering text on mobile */
    align-items: center; /* For vertical alignment */
}

/* Green bordered and green background buttons */
.btn_border_green a,
.btn_bg_green a {
    border: 1px solid #7AB794;
    border-radius: 5px;
    box-shadow: 0px 0px 3px rgba(122, 183, 148, 0.1);
    font-weight: 700 !important;
    padding: 10px 20px !important;
    margin: 0 10px;
    transition: .3s ease all;
}

.btn_bg_green a {
    background: #7AB794 !important;
    color: #FFFFFF !important;
}

.btn_border_green a {
    color: #7AB794 !important;
}

/* Hover effects for intertwined (action) buttons (if still used) */
.btn_contact { /* CONTACT button - Dark Blue */
    background-color: #384259;
    border: 1px solid #384259;
    color: #fff !important;
    /* Ensure it inherits shape from .btn-header-action by having .btn-header-action class in HTML */
}

.btn_register { /* LOGIN button - Green */
    background-color: #7AB794; /* Match the exact green from the LOGIN button in the screenshot */
    border: 1px solid #7AB794;
    color: #fff !important;
    /* Ensure it inherits shape from .btn-header-action by having .btn-header-action class in HTML */
}

.btn_business { /* BUSINESS button - Purple */
    background-color: #954A89;
    border: 1px solid #954A89;
    color: #fff !important;
    /* Ensure it inherits shape from .btn-header-action by having .btn-header-action class in HTML */
}

/* 03. Header ------------------------------------ */
.main-header {
    background: #ffffff;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    z-index: 999 !important;
    box-shadow: none; /* Reset default to allow sticky to apply shadow */
}

.main-header > .elementor-container {
    width: 100% !important;
    /* Added to ensure consistent alignment and spacing of header elements */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute space between logo/menu and buttons */
}

/* Base styles for all main navigation menu items */
.main-header #menu-main-header-menu > li > a {
    padding: 10px 15px; /* Adjust as needed for desired spacing between links */
    transition: color 0.3s ease, font-weight 0.3s ease;
    text-decoration: none; /* Ensure no default underline */
    color: #384259; /* Default menu item color */
    font-weight: 500; /* Default font weight */
}

/* Hover effect for all menu items */
.main-header #menu-main-header-menu > li > a:hover {
    color: #7AB794; /* Green on hover */
}

/* Modernizing and Bolding parent menu items with dropdowns, like "ABOUT" */
.main-header #menu-main-header-menu > li.menu-item-has-children > a {
    font-weight: 700; /* Bolding "ABOUT" and similar parent items */
}

/* Specific active/selected style for menu items (e.g., when on that page) */
.main-header #menu-main-header-menu > li.menuSelected > a,
.main-header #menu-main-header-menu > li.current-menu-item > a,
.main-header #menu-main-header-menu > li.current-menu-ancestor > a {
    color: #7AB794 !important; /* Ensure it stays green when active */
    font-weight: 700 !important; /* Ensure it stays bold when active */
    position: relative;
}

/* Modernizing the ABOUT underline/circle effect for active/selected items */
.main-header #menu-main-header-menu > li.menuSelected > a::after,
.main-header #menu-main-header-menu > li.current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Adjust as needed for vertical position */
    left: 50%;
    transform: translateX(-50%);
    width: 20px; /* Width of the underline */
    height: 3px; /* Height of the underline */
    background-color: #7AB794; /* Color of the underline */
    border-radius: 2px; /* Slightly rounded corners for the underline */
    opacity: 1; /* Always visible when active */
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* If the green circle is desired instead of an underline on active, uncomment this and remove the above `::after` rule: */
/*
.main-header #menu-main-header-menu > li.menuSelected > a::after,
.main-header #menu-main-header-menu > li.current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: -10px; // Adjust as needed
    left: 50%;
    transform: translateX(-50%);
    width: 15px; // Diameter of the circle
    height: 15px; // Diameter of the circle
    background-color: rgba(122, 183, 148, 0.2); // Light green background for the circle
    border-radius: 50%;
    opacity: 1;
    transition: all 0.3s ease;
    z-index: -1; // Keep it behind the text
}
*/

.main-header.ekit-sticky--up {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
    transition: .3s all !important;
}

.main-header.ekit-sticky--up.shadowHeader {
    box-shadow: none;
    transition: .3s all !important;
}

/* Combining redundant header background styles */
body .main-header,
body .main-header.ekit-sticky--up.shadowHeader,
body .main-header.ekit-sticky--up {
    background-color: #fff !important;
    transition: .3s all !important;
}

body .main-header:not(.shadowHeader) {
    background: #fff; /* This seems to be a fallback if shadowHeader is not present */
}

/* Offcanvas and ElementsKit specific transitions */
.elementor-widget-elementskit-header-offcanvas .ekit-wid-con .ekit-sidebar-widget {
    -webkit-transition: all .2s cubic-bezier(.9,.03,0,.96) .3s !important;
    transition: all .2s cubic-bezier(.9,.03,0,.96) .3s !important;
}

.elementor-widget-elementskit-header-offcanvas .ekit-wid-con .ekit-sidebar-group .ekit-overlay {
    -webkit-transition: all .2s ease-in .4s !important;
    transition: all .2s ease-in .4s !important;
    background-color: rgba(0,0,0,.2) !important;
}

.elementor-widget-elementskit-header-offcanvas .ekit-wid-con .ekit-sidebar-group.ekit_isActive .ekit-overlay {
    -webkit-transition: all .3s ease-out 0s !important;
    transition: all .3s ease-out 0s !important;
}

.elementor-widget-elementskit-header-offcanvas .ekit-wid-con .ekit-sidebar-group.ekit_isActive .ekit-sidebar-widget {
    -webkit-transition: all .4s cubic-bezier(.9,.03,0,.96) .2s !important;
    transition: all .4s cubic-bezier(.9,.03,0,.96) .2s !important;
}

.elementor-widget-elementskit-header-offcanvas .ekit-wid-con .ekit-sidebar-group.ekit_isActive .ekit_sidebar-widget-container {
    -webkit-transition: all .5s ease-out .6s !important;
    transition: all .5s ease-out .6s !important;
}

.ekit-nav-menu--overlay {
    background-color: transparent !important;
}

.ekit-nav-menu--overlay.active {
    background-color: rgba(51,51,51,.5) !important;
}

/* Styles for the main navigation menu container */
.elementskit-navbar-nav-default .elementskit-navbar-nav {
    height: auto !important;
    display: flex; /* Make menu items a flex container */
    align-items: center; /* Vertically align menu items */
    margin-right: 20px; /* Space before the action buttons group */
}

/* Specific style for green background menu item (if it's a menu item) */
.main-header #menu-main-header-menu > li.menuSelected.btn_bg_green > a {
    color: #fff !important;
}

/* Language switcher alignment */
.cpel-switcher__icon {
    padding-left: 7px;
}

.cpel-switcher__list .cpel-switcher__lang a,
.cpel-switcher__nav .cpel-switcher__toggle a {
    color: #333 !important;
}

.cpel-switcher--aspect-ratio-43 .cpel-switcher__flag img {
    width: 18px !important;
    border-radius: 50% !important;
    height: 18px !important;
}

.ekit-template-content-header {
    height: 70px;
}

/* New container for action buttons to manage their alignment and spacing */
.header-action-buttons {
    display: flex;
    align-items: center; /* Align LOGIN, BUSINESS, and CONTACT buttons vertically */
    gap: 15px; /* Spacing between these action buttons */
}

/* Adjustments for buttons within the action buttons group */
.header-action-buttons .btn-header-action {
    margin: 0; /* Override any default margins from .btn-header-action if necessary */
}


/* Media Queries for Header */

@media screen and (min-width: 992px) {
    /* Ensure desktop menu items are aligned and spaced */
    #ekit-megamenu-main-menu-deutsch,
    #ekit-megamenu-main-header-menu {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Align menu to the right */
    }

    #menu-main-header-menu-1 { /* Assuming this is a common desktop menu ID */
        align-items: center;
    }

    #menu-main-header-menu-1 li a.active {
        font-weight: 700 !important;
    }
}

/* Tablet and Mobile adjustments for Header */
@media screen and (max-width: 767px) {
    .main-header > .elementor-container {
        flex-wrap: wrap; /* Allow header elements to wrap if space is tight */
        justify-content: center; /* Center header elements when wrapped */
        padding-top: 10px; /* Add some top padding */
        padding-bottom: 10px; /* Add some bottom padding */
    }

    .elementskit-navbar-nav-default .elementskit-navbar-nav {
        margin-right: 0; /* Remove desktop-specific margin */
        justify-content: center; /* Center main menu items */
        width: 100%; /* Take full width */
        margin-top: 10px; /* Space between logo/brand and menu */
    }

    .main-header #menu-main-header-menu > li > a {
        padding: 8px 10px; /* Adjust menu item padding for mobile */
        font-size: 15px; /* Adjust menu item font size for mobile */
    }

    /* Hide the modern underline/circle effect on mobile for simplicity */
    .main-header #menu-main-header-menu > li.menuSelected > a::after,
    .main-header #menu-main-header-menu > li.current-menu-ancestor > a::after {
        content: none;
    }

    /* Adjust the new header action buttons group for mobile */
    .header-action-buttons {
        gap: 10px; /* Reduce gap between action buttons on mobile */
        flex-wrap: wrap; /* Allow buttons to wrap if too many */
        justify-content: center; /* Center buttons if they wrap */
        width: 100%; /* Take full width */
        margin-top: 10px; /* Add some space above buttons if they wrap */
    }

    /* Adjust specific button styles for mobile */
    .btn_contact,
    .btn_register,
    .btn_business { /* Assuming .btn_business is used for the BUSINESS button */
        width: auto !important; /* Allow buttons to size based on content on mobile */
        min-width: 100px; /* Optional: set a minimum width if needed */
        margin: 5px !important; /* Adjust margins for mobile spacing */
        padding: 8px 15px !important; /* Slightly smaller padding for mobile */
        font-size: 14px; /* Smaller font size for mobile */
    }
}

/* Very Extra Small Mobile Device adjustments for Header */
@media screen and (max-width: 420px) {
    .header-action-buttons {
        flex-direction: column; /* Stack buttons vertically on very small screens */
        gap: 8px; /* Smaller gap when stacked */
    }

    /* Adjusted selector: Removed .btn_bg_green from here if it's not applicable to CONTACT/BUSINESS header buttons */
    /* Ensure .btn_contact, .btn_register, .btn_business correctly inherit from .btn-header-action */
    .btn_contact,
    .btn_register,
    .btn_business { /* Now explicitly listing the actual header action buttons */
        width: 100% !important; /* Make buttons full width when stacked */
        margin: 0 !important; /* Remove individual margins when stacked */
    }
}


/* 04. Footer ------------------------------------ */
/* No specific footer styles provided in the original section */

/* 05. Page Specific Styles ------------------------------------ */

/* 05.1. Homepage */
.team-title-reverse,
.team-title-reverse .ekit-wid-con,
.team-title-reverse .elementor-widget-container,
.team-title-reverse .profile-card {
    height: 100%;
}

.team-title-reverse .profile-card .profile-body {
    display: flex;
    flex-direction: column-reverse;
}

.team-title-reverse .modal-dialog .modal-body {
    display: block !important;
}

.team-title-reverse .modal-dialog .modal-body .ekit-team-modal-img {
    margin: 0 auto;
}

.team-title-reverse .modal-dialog .modal-body .ekit-team-modal-info.has-img {
    padding-left: 0;
    margin-top: 30px;
    max-width: 100%;
}

.team-title-reverse .modal-dialog .modal-body .ekit-team-modal-title,
.team-title-reverse .modal-dialog .modal-body .ekit-team-modal-position {
    text-align: center;
}

.team-title-reverse .profile-header {
    height: 225px !important;
    object-fit: cover;
    object-position: center center;
}

/* Common icon box divider styles */
.center-divide .elementor-icon-box-icon {
    position: relative;
}

.center-divide .elementor-icon-box-icon:before {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    border-bottom: 1px dashed #384259;
    width: 100%;
}

.center-divide .elementor-icon-box-icon:after {
    content: '';
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    position: absolute;
    left: calc(50% - 9px);
    bottom: -33px;
    background: #7AB794;
    border-radius: 150px;
    box-shadow: 0 0 0px 7px rgba(122, 183, 148, 0.24);
}

/* Team Section */
.team_section .main-team-swiper {
    padding: 20px 10px;
}

.team_section .main-team-swiper .team_item {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 20px 10px;
    border-radius: 10px;
    transition: all .4s ease;
    position: relative;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 10px 0;
}

.team_section .main-team-swiper .swiper-slide {
    height: auto !important;
}

.team_item ul.social_links {
    margin-top: auto;
}

.team_section .main-team-swiper .team_item .member_img {
    padding-top: 100%;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.team_section .main-team-swiper .team_item .member_img img {
    top: 0;
    left: 0;
    position: absolute;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.team_section .main-team-swiper .team_item .social_links li a {
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    background-color: #a1a1a1;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    transition: .3s ease all;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
}

.team_section .main-team-swiper .team_item .social_links li a:hover {
    background-color: #3b5998;
}

.team_section .main-team-swiper .team_item .social_links li a i {
    color: #fff;
}

.team-swiper-pagination {
    display: block;
    text-align: center;
    padding: 20px 0;
}

.swiper-pagination-bullet,
.team-swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px;
}

.team-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #7AB794;
}

/* About Us Page */
.mission-box {
    transition: .3s ease all;
    height: 100%;
}

.mission-box .elementor-widget-container {
    height: 100%;
}

.mission-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(162, 182, 212, .3);
}

.custom-grid.elementor-section .elementor-container {
    flex-wrap: wrap;
}

/* 05.2. Pricing Page */
.pricing-items ul.elementor-icon-list-items li.elementor-icon-list-item {
    display: flex;
    align-items: flex-start; /* Changed from start to flex-start for better alignment */
}

.pricing-items ul.elementor-icon-list-items li.elementor-icon-list-item .elementor-icon-list-icon {
    margin-top: 7px;
}

/* 05.3. Business Page */
.divide_icons_list .elementor-icon-box-content {
    margin-bottom: 30px !important;
}

/* 05.4. 404 Page */
.error-404.not-found {
    padding: 80px 0;
}

.error-404.not-found > .container {
    max-width: 1140px;
}

.error-404.not-found .btn_primary {
    /* Combined with general .btn_primary for DRY */
    display: block;
    width: fit-content;
    margin-top: 30px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 15px; /* Specific padding for 404 button */
    background: #384259; /* Specific background for 404 button */
    border: #384259; /* Specific border for 404 button */
}

.content-not-found-title {
    font-size: 54px;
}

.btn-content-not-found { /* This seems to be an alternative to .btn_primary on 404 */
    border: 1px solid var(--e-global-color-secondary);
    background: var(--e-global-color-secondary);
    border-radius: 5px;
    display: inline-block;
    padding: 10px 25px;
    text-decoration: none;
}

/* 05.5. Blog (Archive & Single) */
body.blog .container {
    max-width: 1140px;
}

/* Blog Page Background Elements - DRYing up redundant `::after` and `::before` */
.blog-page-decoration:after,
.blog-page-decoration:before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Specific background image for before pseudo-element */
.blog-page-decoration:before {
    width: 119px;
    height: 221px;
    right: 0;
    top: 50%;
    background-image: url('https://tripa.ai/coaching/wp-content/uploads/2022/11/freepik-Plant-inject-34-1.svg');
}

/* Specific background image for after pseudo-element */
.blog-page-decoration:after {
    width: 67px;
    height: 234px;
    top: 40%;
    left: 0;
    background-image: url('https://tripa.ai/coaching/wp-content/uploads/2022/11/Group-2.svg');
    background-repeat: repeat space;
}

/* Applying blog page decoration to relevant sections */
body.single-post .ekit-template-content-footer,
body.single-post .blog-detail-page,
body.blog .blogs-archive-page {
    position: relative; /* Ensure pseudo-elements are positioned relative to these */
}

body.single-post .ekit-template-content-footer:before {
    top: -100%;
}
body.single-post .ekit-template-content-footer:after {
    top: -100%;
}

.blog-detail-page {
    padding: 80px 0;
}

header.py-100 {
    padding: 80px 0;
    background-color: rgba(122, 183, 148, 0.2);
}

header.py-100 h1 {
    font-weight: 700;
}

.post-grids {
    padding: 80px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}

.blog-pagination {
    display: flex;
    justify-content: center;
}

.blog-pagination .pagination .nav-links .page-numbers {
    padding: 5px 10px;
    transition: .3s all;
    margin: 0 4px;
    background-color: transparent;
    border: 2px solid #7AB794;
    color: #384259;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
}

.blog-pagination .pagination .nav-links .page-numbers:hover,
.blog-pagination .pagination .nav-links .page-numbers.current {
    background-color: #7AB794;
}

.post-grids .archive-blog-item {
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px rgba(159, 159, 159, 0.3);
    text-decoration: none;
    transition: .5s all;
}

.post-grids .archive-blog-item:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 25px rgba(159, 159, 159, 0.3);
}

.post-grids .archive-blog-item .post-thumbnail {
    position: relative;
    padding-top: 55%;
    overflow: hidden;
}

.post-grids .archive-blog-item .post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
}

.post-grids .archive-blog-item .entry-content {
    padding: 20px;
    margin-top: 0;
    color: #384259;
}

.post-grids .archive-blog-item .entry-content .read-more-btn {
    margin-top: 10px;
    display: inline-block;
    position: relative;
    color: #7AB794;
    font-weight: 600;
}

.post-grids .archive-blog-item .entry-content .read-more-btn::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #7AB794;
    transition: .5s all;
}

.post-grids .archive-blog-item:hover .entry-content .read-more-btn::before {
    width: 100%;
}

.archive-post-title,
.post-grids .archive-blog-item .entry-content .read-more-btn,
.post-grids .archive-blog-item .entry-content .entry-title {
    font-weight: 600;
}

.post-grids .archive-blog-item .entry-content p {
    margin: 0;
}

.post-grids .archive-blog-item .entry-content .post-data-autor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #384259;
}

.post-grids .entry-content a {
    color: #384259;
}

.post-grids .entry-content h1 {
    font-size: 30px;
}

/* Single Blog Page */
.author-details {
    margin: 15px 0;
}

.author-details .author-name {
    font-weight: 600;
    font-size: 18px;
}

.author-details .author-description {
    margin-top: 5px;
}

.author-details .author-img {
    width: 45px;
    display: inline-block;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 10px;
}

.entry-meta span.dot {
    position: relative;
    width: 5px;
    height: 5px;
    display: inline-block;
    background: #7AB794;
    border-radius: 100%;
    vertical-align: middle;
    margin: 0 5px 0 8px;
}

.blog-detail-page .entry-header h1.entry-title {
    font-weight: 600;
}

.blog-detail-page .single-blog-item .post-thumbnail img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.blog-detail-page .single-blog-item .tag-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; /* Changed to flex-start */
    margin-bottom: 0;
}

.blog-detail-page .single-blog-item .tag-list .tag-item:first-child .tag-item-link {
    margin-left: 0;
}

.blog-detail-page .single-blog-item .tag-list .tag-item:last-child .tag-item-link {
    margin-right: 0;
}

.blog-detail-page .single-blog-item .tag-list .tag-item .tag-item-link {
    text-decoration: none;
    text-transform: capitalize;
    margin: 0 5px 5px;
    color: #384259;
    border: 1px solid var(--e-global-color-secondary);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 14px;
    transition: .3s ease all;
    position: relative;
    display: inline-block;
}

.blog-detail-page .single-blog-item .tag-list .tag-item .tag-item-link:hover {
    background-color: var(--e-global-color-secondary);
    color: #fff;
}

.blog-detail-page .blog-detail-sidebar {
    position: relative;
    padding: 20px;
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 10%);
    border-radius: 8px;
    position: sticky;
    top: 100px;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li {
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a {
    text-decoration: none;
    display: flex;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a .recent-post-image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 90px;
    margin-right: 15px;
    height: 90px;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a .recent-post-image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a .recent-post-content h4.recent-post-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--e-global-color-primary);
    transition: .3s all;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a:hover .recent-post-content h4.recent-post-title {
    color: var(--e-global-color-secondary);
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a .recent-post-content span.post-author-details i,
.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a .recent-post-content span.post-published-date i {
    font-size: 14px;
    margin-right: 5px;
}

.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a .recent-post-content span.post-author-details,
.blog-detail-page .blog-detail-sidebar .recent-posts-section ul#recentPosts li a .recent-post-content span.post-published-date {
    font-size: 14px;
    color: var(--e-global-color-primary);
}

/* 06. Modals & Popups ------------------------------------ */
.modal-body {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.modal-body .right-content {
    width: 60%;
}

.modal-body .left-content {
    width: 40%;
}

.modal-body .right-content,
.modal-body .left-content {
    position: relative;
    padding: 30px;
}

.modal-body .left-content .modal-logo {
    width: 30%;
}

.modal-body .left-content .modal-img-element {
    width: 40%;
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 0;
}

.modal-body .left-content .modal-img-element-two {
    position: absolute;
    bottom: 0;
    right: 40px;
    z-index: 0;
}

.modal-body button.btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
    padding: 0;
    background: transparent;
    color: #616161;
    font-size: 30px;
    display: flex;
    align-items: center;
}

body.modal-open {
    padding-right: 0 !important; /* Specific override for modal-open state */
}

.modal.team-modal {
    padding-right: 0 !important;
}

/* Team Modal specific styles */
.team-modal .modal-body .member_img {
    padding-top: 40%;
    border-radius: 0;
    display: block;
    margin-bottom: 30px;
}
.team-modal .modal-body .member_img img {
    object-fit: contain;
}
.team-modal .modal-body {
    text-align: center;
}
.team-modal .modal-body .social_links li a {
    margin: 0;
}
.team-modal .modal-body .member-name {
    font-size: 24px;
    font-weight: 700;
}
.team-modal .modal-body .member-designation {
    font-size: 16px;
}
.team-modal .modal-body .member-description {
    text-align: left;
    margin-top: 15px;
}
.team-title-reverse .ekit-wid-con .ekit-team-modal {
    position: fixed !important;
}

/* 07. Forms ------------------------------------ */
.request-a-demo-popup-form .wpcf7-acceptance label,
.wpcf7-acceptance {
    color: #828282;
    font-size: 15px;
    font-weight: 400;
}

.wpcf7-acceptance .wpcf7-list-item {
    margin-left: 0;
}

.contact-us-form .text-right {
    text-align: right;
}

.contact-us-form .text-right .wpcf7-spinner {
    position: absolute;
}

.request-a-demo-popup-form label {
    font-weight: 700;
}

.request-a-demo-popup-form input.wpcf7-submit,
.contact-us-form input.wpcf7-submit {
    /* Combined with .btn_primary for DRY */
    /* Remove redundant styles as .btn_primary should cover these */
}

.germen_contact_form span.wpcf7-form-control.wpcf7-acceptance label input {
    margin-right: 10px;
}

.germen_contact_form span.wpcf7-form-control.wpcf7-acceptance label {
    display: flex;
}

.wpcf7-checkbox .wpcf7-list-item.first.last {
    margin-left: 0;
}

.submitting .wpcf7-submit {
    pointer-events: none !important;
    opacity: 0.7;
}

.cust-loader p {
    display: inline-block;
    position: relative;
}

.cust-loader .wpcf7-spinner {
    position: absolute;
    display: flex;
    top: calc(50% - 12px);
    left: calc(50% - 34px);
}

.wpcf7 .wpcf7-submit:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* 08. Animations & Effects ------------------------------------ */
/* Mouse Animation */
.mouse-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    visibility: hidden;
}

.cursor-outer {
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 2px solid #7ab794;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999999;
    opacity: 1;
    -webkit-transition: all 0.08s ease-out;
    transition: all 0.08s ease-out;
}

.cursor-inner {
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    z-index: 999999;
    background-color: #7ab794;
    -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-outer.cursor-hover {
    opacity: 0;
}

.cursor-inner.cursor-hover {
    margin-left: -30px;
    margin-top: -30px;
    width: 60px;
    height: 60px;
    background-color: #7ab794;
    opacity: 0.2;
}

.ekit-wid-con .ekit-video-gallery.ekit_play_on .video-link:hover::before {
    content: none !important;
}

/* 09. Third-Party Overrides ------------------------------------ */
.custom-saperator .ekit-wid-con .elementskit-clients-slider .elementskit-client-slider-item.log-separator::after {
    content: "";
    background: transparent;
    border-right: 2px dotted #384259;
}

#iubenda-cs-banner .iubenda-cs-opt-group .iubenda-cs-opt-group-consent button.iubenda-cs-reject-btn {
    background-color: #954a89 !important;
    color: white !important;
}

#iubenda-cs-banner .iubenda-cs-opt-group .iubenda-cs-opt-group-consent button.iubenda-cs-accept-btn {
    background-color: #7ab794 !important;
    color: #ffffff !important;
}

#iubenda-cs-banner .iubenda-cs-opt-group-custom .iubenda-cs-customize-btn {
    background-color: #2c2c2c !important;
    color: #ffffff !important;
}

/* This class seems to hide primary background buttons */
.btn-d-none .btn_primary-bg {
    display: none;
}

/* This ensures the text color for the register button link is white, specifically for ElementsKit menu */
.elementskit-navbar-nav-default .elementskit-navbar-nav > li.btn_register > a {
    color: #fff !important;
}

.elementor-1608 .elementor-element.elementor-element-42bd183 .testimonial-content .el-text-al {
    /* Incomplete selector, consider if this is still needed */
    /* Based on its nature, it might be an Elementor-generated specific class.
       If it's not causing issues or needed for a specific layout, it can remain
       as a placeholder or be removed if it's dead code. */
}

.list-align-self-center .elementor-icon-box-title > span:first-child {
    display: block;
    text-align: center;
}

.list-align-self-center .elementor-icon-box-title > span > span:first-child {
    float: left;
}

body.page-general-terms-conditions .p-flex ol,
body.page-general-terms-conditions .p-flex ul {
    list-style: none !important; /* Keep !important */
    padding-left: 30px !important; /* Keep !important */
}
body.page-general-terms-conditions .p-flex ul > li {
    margin: 10px 0;
}
body.page-general-terms-conditions .p-flex ul ul {
    padding-left: 30px !important;
    /* list-style: disc !important; - commented out in original */
}
body.page-general-terms-conditions .p-flex p {
    margin-bottom: 0;
}
body.page-general-terms-conditions .p-flex ul li > strong,
body.page-general-terms-conditions .p-flex p > strong {
    font-size: 22px;
}

/* 10. Media Queries ------------------------------------ */

@media screen and (min-width: 992px) {
    .error-404.not-found h1 {
        font-size: 60px;
    }

    #ekit-megamenu-main-menu-deutsch,
    #ekit-megamenu-main-header-menu {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Changed to flex-end for consistency */
    }

    #menu-main-header-menu-1 {
        align-items: center;
    }

    #menu-main-header-menu-1 li a.active {
        font-weight: 700 !important;
    }

    .mouse-cursor {
        visibility: visible; /* Make visible only on desktop */
    }
}

@media screen and (max-width: 1199px) {
    /* No specific rules for this breakpoint in original, keeping it */
}

/* Tablet */
@media screen and (max-width: 991px) {
    .request-a-demo-popup-form .elementor-container div.elementor-column.elementor-top-column {
        width: 100% !important;
    }

    .custom-grid.elementor-section .elementor-container > .elementor-column {
        width: 50%;
    }
}

@media screen and (max-width: 936px) and (min-width: 768px) {
    .list-align-self-center .elementor-icon-box-title > span:first-child {
        display: block;
        text-align: left;
    }

    .list-align-self-center .elementor-icon-box-title > span > span:first-child {
        float: unset;
    }

    .list-align-self-center .elementor-icon-box-title > span > span:nth-child(2) {
        display: block;
    }
}

/* Small Device (Mobile Portrait to Tablet Landscape) */
@media screen and (max-width: 767px) {
    .error-404.not-found h1 {
        text-align: center;
    }

    .error-404.not-found .btn_primary {
        margin: 30px auto;
    }

    .error-404.not-found {
        padding: 50px 20px;
    }

    .elementor-widget-aavatto-popup-modal .modal-body {
        display: block;
    }

    .elementor-widget-aavatto-popup-modal .modal-body .left-content .modal-img-element-two,
    .elementor-widget-aavatto-popup-modal .modal-body .left-content .modal-animation,
    .elementor-widget-aavatto-popup-modal .modal-body .left-content .modal-img-element {
        display: none;
    }

    .elementor-widget-aavatto-popup-modal .modal-body .right-content,
    .elementor-widget-aavatto-popup-modal .modal-body .left-content {
        width: 100%;
    }

    /* Harmonized header button styles for mobile */
    /* Updated selector: removed .btn_bg_green as it's not applicable for header buttons */
    .btn_contact,
    .btn_register,
    .btn_business { /* Add .btn_business here if you create it above */
        width: auto !important; /* Allow buttons to size based on content or flexbox */
        min-width: 100px; /* Optional: set a minimum width if needed */
        margin: 5px !important; /* Adjust margins for mobile spacing */
        padding: 8px 15px !important; /* Slightly smaller padding for mobile */
        font-size: 14px; /* Smaller font size for mobile */
    }

    /* Adjust the new header action buttons group for mobile */
    .header-action-buttons {
        gap: 10px; /* Reduce gap between action buttons on mobile */
        flex-wrap: wrap; /* Allow buttons to wrap if too many */
        justify-content: center; /* Center buttons if they wrap */
        width: 100%; /* Take full width */
        margin-top: 10px; /* Add some space above buttons if they wrap */
    }

    /* Refactored .center-divide for mobile */
    .center-divide .elementor-icon-box-wrapper {
        display: flex !important;
        align-items: center; /* Changed from space-evenly to center, adjust as needed */
        padding-left: 80px; /* This padding provides space for the vertical line and dot */
        position: relative; /* For positioning pseudo-elements */
    }

    .center-divide .elementor-icon-box-wrapper:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        border-left: 1px dashed #384259;
    }

    .center-divide .elementor-icon-box-wrapper .elementor-icon-box-icon {
        margin: 0;
        position: relative; /* For positioning the dot */
        left: -60px; /* Adjust to align dot with line */
    }

    .center-divide .elementor-icon-box-wrapper .elementor-icon-box-content {
        display: inline-flex;
        margin-left: 30px; /* Space between icon and text */
        text-align: left;
    }

    .divide_icons_list .elementor-column.elementor-col-20:first-child .center-divide .elementor-icon-box-wrapper:before,
    .divide_icons_list .elementor-column.elementor-col-25:first-child .center-divide .elementor-icon-box-wrapper:before {
        top: 50%;
    }

    .divide_icons_list .elementor-column.elementor-col-20:last-child .center-divide .elementor-icon-box-wrapper:before,
    .divide_icons_list .elementor-column.elementor-col-25:last-child .center-divide .elementor-icon-box-wrapper:before {
        bottom: 90%;
    }

    .center-divide .elementor-icon-box-wrapper .elementor-icon-box-icon::before {
        content: none; /* Remove horizontal line */
    }

    .center-divide .elementor-icon-box-icon:after {
        left: -85% !important; /* Adjust dot position for vertical layout */
        top: calc(50% - 9px) !important;
        bottom: 0 !important;
    }

    .sm-parallax-none .elementor-widget-container {
        transform: none !important;
    }

    /* These are likely used for other buttons, not the harmonized header ones */
    .btn_border_green a,
    .btn_bg_green a {
        width: 100%;
        justify-content: center;
    }

    .btn_bg_green a {
        margin: 0 auto;
    }

    .play-btn .video-content .ekit-video-popup-btn {
        margin: 0 auto;
        justify-content: center;
    }
}

/* Mobile Device (max-width: 640px) */
@media screen and (max-width: 640px) {
    .main-header.elementor-section > .elementor-container.elementor-column-gap-default {
        justify-content: space-between;
    }

    .content-not-found-title {
        font-size: 36px;
    }

    .team-title-reverse .profile-header {
        height: 300px !important;
    }

    .sm-w-80 .btn_primary {
        width: 80%;
    }

    .list-align-self-center .elementor-icon-box-title > span:first-child {
        display: block;
        text-align: left;
    }

    .list-align-self-center .elementor-icon-box-title > span > span:first-child {
        float: unset;
    }

    .list-align-self-center .elementor-icon-box-title > span > span:nth-child(2) {
        display: block;
    }

    /* Further refactoring for center-divide on smaller mobiles */
    .center-divide .elementor-icon-box-wrapper {
        display: flex !important;
        align-items: flex-start !important; /* Changed from self-start to flex-start */
        padding-left: 0 !important;
        flex-direction: column !important;
    }

    .divide_icons_list .elementor-column.elementor-col-20:first-child .center-divide .elementor-icon-box-wrapper:before,
    .divide_icons_list .elementor-column.elementor-col-25:first-child .center-divide .elementor-icon-box-wrapper:before {
        top: 10% !important;
    }

    .center-divide .elementor-icon-box-icon:after {
        left: -74% !important;
        top: calc(31% - 9px) !important;
    }

    .center-divide .elementor-icon-box-title {
        padding-left: 42px;
    }

    .center-divide .elementor-widget-container .elementor-icon-box-wrapper .elementor-icon-box-icon {
        margin-left: 70px !important;
    }

    .custom-grid.elementor-section .elementor-container > .elementor-column {
        width: 100%;
    }
}

/* Extra Small Mobile Device (max-width: 480px) */
@media screen and (max-width: 480px) {
    /* Extra-small mobile: stack grids, adjust fonts, collapse menus */
    .post-grids {
        grid-template-columns: 1fr !important; /* Force single column for blog posts */
        /* Assuming --spacing-lg is defined elsewhere or use a specific pixel value */
        /* If --spacing-lg is not defined globally, consider defining it or using a hardcoded value */
        grid-gap: 30px !important; /* Using a pixel value if --spacing-lg isn't defined */
    }

    .content-not-found-title {
        font-size: 28px !important; /* Smaller font for 404 page title */
    }

    .team_section .team_item {
        /* Assuming --spacing-md is defined elsewhere or use a specific pixel value */
        /* If --spacing-md is not defined globally, consider defining it or using a hardcoded value */
        padding: 15px !important; /* Adjust padding for team items */
    }

    .main-header {
        padding: 8px !important; /* Smaller padding for the main header */
    }

    .custom-grid.elementor-section .elementor-container > .elementor-column {
        width: 100% !important; /* Ensure custom grids stack vertically */
    }
}

/* Very Extra Small Mobile Device (max-width: 420px) */
@media screen and (max-width: 420px) {
    /* Add any further, more granular adjustments for very small screens here */
    /* Example: Tweak header buttons or font sizes if they become too cramped */
    /* Updated selector: removed .btn_bg_green as it's not applicable for header buttons */
    .btn_contact,
    .btn_register,
    .btn_business {
        width: 100% !important; /* Make buttons full width when stacked */
        padding: 8px 15px !important; /* Reduce button padding slightly */
        margin: 0 !important; /* Remove individual margins when stacked as they are now flex-direction: column */
    }

    .header-action-buttons {
        flex-direction: column; /* Stack buttons vertically on very small screens */
        gap: 8px; /* Smaller gap when stacked */
    }

    .main-header .elementor-container {
        flex-wrap: wrap; /* Allow header elements to wrap if space is tight */
        justify-content: center; /* Center header elements */
    }
    .main-header .ekit-menu-nav li {
        margin: 0 5px; /* Reduce menu item spacing */
    }
}