/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* Make the Inquire Now Sidebar Compact on Scroll -- PMM*/

/* Custom Elementor-Style Divider */
.elementor-divider {
    display: flex;
    justify-content: center; /* Aligns the divider towards the left */
    margin: 80px 0 20px 0px; /* Adds top and left spacing */
}

.elementor-divider-line {
    width: 20%; /* The divider should be 25% of the full width */
    height: 4px; /* Thickness */
    background: linear-gradient(to right, #fa8128, #ff4500); /* Fire gradient */
    border-radius: 2px; /* Slightly rounded edges */
}


.blueframe {
    position: relative;
	border-radius: 5px;
    padding: 16px;
    padding-left: 50px;
    background-color: #3B3664;
    color: white;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
    margin: 15px 0px 15px 0px;
}

.blueframe::before {
    content: "\f0eb";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px; /* Set the icon size to 100px */
}
.blueframe h2 {
	color: white !important;
}

.blueframe h3 {
	color: white !important;
}

.blueframe a {
    color: white;
	font-weight: bold;
    text-decoration: underline;
}

.blueframe a:hover {
    text-decoration: none;
}

.iconlistp {
	 display: flex !important;
    align-items: center !important;
    justify-content: center !important;
	margin: 0 auto;
	
}
h1.entry-title {
	display: none;
	
}
.inquirehead,
.elementor-4458 .elementor-element.elementor-element-fdbb877 .elementor-heading-title {
    transition: opacity 0.5s ease-in-out;
}

.stickysidebar.hide-heading .inquirehead,
.stickysidebar.hide-heading .elementor-4458 .elementor-element.elementor-element-fdbb877 .elementor-heading-title {
    display: none !important; /* Using !important to ensure no other styles override this */
}

@media only screen and (min-width: 1025px) {
/* Apply Custom Color to Header Menu on Team Building Activities Page -- PMM */
body.page-id-4841 #headermenu a,
body.page-id-3664 #headermenu a {
    color: white;
	}}

/* Change Color of Burger Icon Header on 2 Pages */

body.page-id-3664 .elementor-4381 .elementor-element.elementor-element-4ed89c65 div.elementor-menu-toggle,
body.page-id-4841 .elementor-4381 .elementor-element.elementor-element-4ed89c65 div.elementor-menu-toggle{
	color: white !important;
}

/* Change background color of dropdown menus and submenus */
body.page-id-4841 header.sticky-header.elementor-sticky--effects #headermenu .sub-menu,
body.page-id-3664 header.sticky-header.elementor-sticky--effects #headermenu .sub-menu,
body.page-id-4841 header.sticky-header.elementor-sticky--effects #headermenu .sub-menu a,
body.page-id-3664 header.sticky-header.elementor-sticky--effects #headermenu .sub-menu a {
    background-color: #3b3664 !important;
    color: #FFF !important; /* This will change the text color in dropdown to white. Adjust if necessary. */
}

/* Change the background color of dropdown menus and submenus for page IDs 4841 and 3664 */
body.page-id-4841 #headermenu .sub-menu, 
body.page-id-4841 #headermenu .sub-menu a,
body.page-id-3664 #headermenu .sub-menu, 
body.page-id-3664 #headermenu .sub-menu a {
    background-color: #3b366 !important;
    color: #FFF; /* This will change the text color in the dropdown to white. Adjust if necessary. */
}

/* Change Menu Color to Dark Blue */
body.page-id-4841 header.sticky-header.elementor-sticky--effects #headermenu a,
body.page-id-3664 header.sticky-header.elementor-sticky--effects #headermenu a {
    color: #3b3664;
}


/* Hover Grow Effect on Boxes and Columns with Link - PMM */
.hover-grow {
  display: inline-block;
    transition: transform 0.2s ease-in-out;
}

@media only screen and (min-width: 1025px) {
/* Applying the hover effect - PMM */
.hover-grow:hover {
  transform: scale(1.05);
	}}

@media only screen and (min-width: 1025px) {

	.mobileonly {
		display: none !Important;
		
	}
	}

.mobileonly a  {
		color: yellow !important;
	}

.mobileonly a::before {
    content: "\f0e0" !important; /* Unicode for Font Awesome envelope */
    font-family: "Font Awesome 6 Free"; /* FontAwesome 6 */
    font-weight: 900; /* Ensures solid style */
    margin-right: 8px; /* Adjust spacing */
    color: yellow; /* Match text color */
}

/* Set the CSS class for the grow effect container - PMM */

.elementor-section[link], .elementor-column[link] > .elementor-widget-wrap, .e-con[link], .e-container[link] {
    cursor: pointer;
}

.contentpost h2, .contentpost h3 {
  font-size: 26px;
  font-weight: 500;
  padding-top: 25px;
	
}

/* Add spacing below unordered and ordered lists */
.contentpost ul,
.contentpost ol {
  margin-bottom: 20px; /* Adjust as needed */
}

/*Sticky Logo on scroll - PMM */
.logo-sticky {
    display: none; /* hide the sticky logo initially */
}
.logo-default {
    display: block; /* show the default logo initially */
}
.elementor-sticky--effects .logo-sticky {
    display: block; /* show the sticky logo when header is sticky */
}
.elementor-sticky--effects .logo-default {
    display: none; /* hide the default logo when header is sticky */
}

/* Color change Header Menu on Scroll - PMM */

.menu-sticky {
    display: none; /* hide the sticky logo initially */
}
.menu-default {
    display: block; /* show the default logo initially */
}
.elementor-sticky--effects .menu-sticky {
    display: block; /* show the sticky logo when header is sticky */
}
.elementor-sticky--effects .menu-default {
    display: none; /* hide the default logo when header is sticky */
}

.src-sticky {
    display: none; /* hide the sticky logo initially */
}
.src-default {
    display: block; /* show the default logo initially */
}
.elementor-sticky--effects .src-sticky {
    display: block; /* show the sticky logo when header is sticky */
}
.elementor-sticky--effects .src-default {
    display: none; /* hide the default logo when header is sticky */
}

.btn-sticky {
    display: none; /* hide the sticky logo initially */
}
.btn-default {
    display: block; /* show the default logo initially */
}
.elementor-sticky--effects .btn-sticky {
    display: block; /* show the sticky logo when header is sticky */
}
.elementor-sticky--effects .btn-default {
    display: none; /* hide the default logo when header is sticky */
}

/*
.custom-gallery {
    max-height: 600px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-in-out;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent);
    mask-image: linear-gradient(to bottom, black 85%, transparent);
}

.unfolded {
    max-height: 2000px;
    -webkit-mask-image: none;
    mask-image: none;
}


.custom-toggle-btn {
    background-image: linear-gradient(135deg, var(--e-global-color-d49ac81) 0%, var(--e-global-color-332724a) 60%);
    border: none;
    padding: 2% 5%;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
	font-weight: 500;
	font-family: "Inter", sans-serif;
    transition: background-image 0.2s;
}

.custom-toggle-btn:hover {
    background-image: linear-gradient(-45deg, var(--e-global-color-d49ac81) 0%, var(--e-global-color-332724a) 60%);
}
*/

/* Styles for desktop and larger devices */
.custom-gallery {
    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent);
    mask-image: linear-gradient(to bottom, black 85%, transparent);
}

.unfolded {
    max-height: 2000px;  
    -webkit-mask-image: none;
    mask-image: none;
}

/* Mobile styles */
@media (max-width: 768px) {
    .parent-section {
        min-height: auto; 
        transition: max-height 0.5s ease-in-out; /* Smooth transition */
    }

        .custom-gallery.unfolded {
        max-height: 100%; /* Adjust this as necessary to fit the entire content on mobile when unfolded */
    }
}

.custom-toggle-btn {
    background-image: linear-gradient(135deg, var(--e-global-color-d49ac81) 0%, var(--e-global-color-332724a) 60%);
    border: none;
    padding: 2% 5%;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
	font-weight: 500;
	font-family: "Inter", sans-serif;
    transition: background-image 0.2s;
}

.custom-toggle-btn:hover {
    background-image: linear-gradient(-45deg, var(--e-global-color-d49ac81) 0%, var(--e-global-color-332724a) 60%);
}

@media (min-width: 1920px) {
.custom-sticky-section-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 2%;
    width: 100%;
    max-width: 250px; 
    margin-left: 2%;
    transition: all 0.4s ease;
    z-index: 99;
}}

@media (min-width: 2560px) {
.custom-sticky-section-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 2%;
    width: 100%;
    max-width: 250px; 
    margin-left: 10%;
    transition: all 0.4s ease;
    z-index: 99;
}}

/* Style the search form in the menu */
.search-menu-item form {
    display: none;
}

/* Show the search form only on mobile devices */
@media (max-width: 768px) {
    .search-menu-item form {
        display: flex;
        padding: 10px;
    }

    .search-menu-item input[type="search"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .search-menu-item input[type="submit"] {
        padding: 8px 12px;
        background-color: #0073aa; /* Adjust the button color as needed */
        color: #fff;
        border: none;
        cursor: pointer;
    }
}

/* Apply a blue background to .header-hero on devices with a max width of 768px */
@media only screen and (max-width: 768px) {
    .header-hero {
        background-color: #3B3664; /* Blue color */
    }
}

/* Initial Container Style */
.sticky-fly-container {
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth easing function */
    position: relative;
}

/* Sticky Fly Style */
.sticky-fly {
    position: fixed;
    bottom: 20px;
    right: 5%;
    width: 200px; /* Ensure the width is fixed when sticky */
    max-width: 250px; /* Prevent any unwanted stretching */
    z-index: 1000;
    transform: translateY(0);
    opacity: 1;
}

/* Add a slight fade and slide effect */
.sticky-fly-container:not(.sticky-fly) {
    transform: translateY(0);
    opacity: 1;
}

.sticky-fly {
    transform: translateY(20px); /* Slight downward slide effect */
    opacity: 0.95;               /* Slight fade effect */
}


/* Hide the heading when the box flies down */
.sticky-fly .eventname {
    text-align: center;
	font-size: 18px !important;
}

.sticky-fly h3 {
	font-size: 20px !important;
}

.sticky-fly .inquirehead {
	display: none;
	
}
.sticky-fly .inquiretitle {
	display: none;
}

.inquireshort {
	display: none;
}

.sticky-fly .inquireshort {
	display: block;
}

/*Event Gallery */

.event-gallery {
    position: relative;
    width: 100%;
    height: 450px; /* Adjust as needed */
	border-radius: 10px;
    overflow: hidden;
    background: transparent;
}

.event-gallery .gallery-item {
    position: absolute;
    width: 100%;
    height: 100%;
	border-radius: 10px;
    opacity: 0; /* Start hidden */
    transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

.event-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .event-gallery {
        height: 250px; /* Reduced height for mobile screens */
    }

    .event-gallery .gallery-item img {
        object-fit: cover; /* Show the full image while maintaining its aspect ratio */
        border-radius: 8px; /* Optional: add rounded corners for a modern look */
    }
}

/*Teambuilding Heading Mobile Prefix */

.hdprefix {
    font-size: 14px;
    font-weight: 400;
    color: #fa8128;
}

.hdprefix::after {
    content: "";
    display: block;
}

}

/*Dynamic Post Grid*/
/* Grid Container */
.custom-post-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 column layout */
    gap: 20px; /* Space between cards */
    max-width: 600px; /* Optional: Limit the width of the grid */
    margin: 25px auto; /* Center the grid with a top/bottom margin */
}

/* Ensure Cards Have Proper Margin and Padding */
.post-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 5px; /* Add padding inside each card */
}

/* Add Extra Margin at the Bottom of Each Card (If Needed) */
.post-card:not(:last-child) {
    margin-bottom: 20px;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Make the whole card clickable */
.post-card a.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 16px; /* Add padding for the content inside the clickable link */
    height: 100%;
    width: 100%;
}

/* Post Image Styles */
.post-image img {
    width: 100%; /* Ensure image is full width */
    height: auto;
    display: block;
}

/* Post Content Styles */
.post-content {
    text-align: center;
    padding: 16px 0;
}

/* Post Title Styles */
.post-title {
    font-size: 1.2em;
    margin-bottom: 12px;
    color: #333;
}

/* Button Styles */
.gradient-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #FFC44C, #FF7C22);
    border-radius: 8px;
    text-align: center;
    margin-top: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Remove hover effect from button since card is clickable */
.gradient-button:hover {
    background: linear-gradient(135deg, #FFB83E, #FF7015);
}

/* Grid Container HOMEPAGE TEAMBUILDINGS*/
/* Grid Container */
.custom-event-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 25px auto;
}

/* Event Card */
.event-card {
    border: 1px solid #fa8128;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Badge */
.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fa8128;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 8px;
    z-index: 10;
}

/* Event Image */
.event-image {
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: auto;
    display: block;
	transition: filter 0.3s ease, transform 0.3s ease;
}

/* Brighten Effect on Hover */
.event-card:hover .event-image img {
    filter: brightness(1.2); /* Brighten the image */
    transform: scale(1.05);  /* Slight zoom effect */
}

/* Event Content */
.event-content {
    padding: 20px;
    text-align: center;
}

/* Event Title */
.event-title {
    font-size: 1.5em;
    margin-bottom: 15px;
}

/* Event Details */
.event-details {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

/* Detail Box - Elegant Style */
.detail-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg, #FF7C22, #FFC44C);
    padding: 6px 10px; /* Reduced padding */
    border-radius: 20px; /* More rounded corners */
    font-size: 0.85em; /* Slightly smaller font size */
    color: #fff;
    min-width: 70px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Detail Box Hover Effect */
.detail-box:hover {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Detail Icons */
.detail-box i {
    font-size: 1.4em; /* Slightly larger icon */
    color: #fff;
    margin-bottom: 2px; /* Reduced spacing below icon */
}

/* Detail Text */
.detail-box span {
    font-weight: 600;
    line-height: 1.2;
}


/* Event Description */
.event-description {
    font-size: 1em;
    margin-bottom: 15px;
    color: #555;
}

/* Event Price */
.event-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #fa8128;
}

/* Sub Text */
.sub-text {
    font-size: 1em;
    color: #3B3664;
    font-weight: bold;
}

/* Button Container */
.teambuildings-button-container {
    text-align: center;
    margin-top: 30px;
}

/* Button Styles */
.teambuildings-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    color: #fff !important; /* Force white text color */
    background: linear-gradient(135deg, #FF7C22, #FFC44C);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Button Hover Effect */
.teambuildings-button:hover {
    background-color: #3B3664;
    transform: translateY(-3px);
}


/* Tab Buttons Container auf den Teambuilding Seiten */
/* --- Tab Buttons Styling --- */
.teambuilding-tabs .tab-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.teambuilding-tabs .tab-button {
    padding: 10px 20px;
    background: linear-gradient(135deg, #fa8128, #ffb347);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.teambuilding-tabs .tab-button:hover,
.teambuilding-tabs .tab-button.active {
    background: linear-gradient(135deg, #ff8c00, #ff6500);
    transform: translateY(-3px);
}

/* --- Tab Content Grid Layout --- */
.teambuilding-tabs .tab-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Event Card Styling --- */
.teambuilding-tabs .teambuilding-card {
    flex: 0 1 calc(50% - 20px); /* Two cards per row with a gap of 20px */
    box-sizing: border-box;
    border: 1px solid #fa8128;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 20px;
}

/* Ensure Images Fit Within Cards */
.teambuilding-tabs .teambuilding-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Event Content Styling --- */
.teambuilding-tabs .event-content {
    padding: 15px;
    text-align: center;
}

.teambuilding-tabs .event-title {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
    color: #3B3664;
}

.teambuilding-tabs .event-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 15px;
}

/* --- Event Details Styling --- */
.teambuilding-tabs .event-details {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.teambuilding-tabs .detail-box {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fa8128, #ffb347);
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
}

/* --- Price Styling --- */
.teambuilding-tabs .event-price {
    font-size: 18px;
    font-weight: bold;
    color: #fa8128;
    margin-top: 10px;
}

/* --- Full-width Fix for Parent Container --- */
.teambuilding-tabs {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Responsive: 1 Card Per Row on Mobile --- */
@media (max-width: 767px) {
    .teambuilding-tabs .teambuilding-card {
        flex: 0 1 100%; /* One card per row */
    }

    .teambuilding-tabs .event-title {
        font-size: 20px;
    }

    .teambuilding-tabs .event-description {
        font-size: 14px;
    }
}

/* Teamevent Archive Grid */

/* Outer grid container: 3 columns on desktop, 2 on tablets, 1 on mobile */
.teamevents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 1024px) {
  .teamevents-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .teamevents-grid {
    grid-template-columns: 1fr;
  }
}

/* Card wrapper */
.teamevents-card {
  display: block;
  text-decoration: none;
  color: inherit;
  
  position: relative; /* for badges */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;

  /* Box shadow and smooth hover transition */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.teamevents-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Badges */
.badge-left {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #fa8128 0%, #ff4500 100%); 
  color: #fff;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  
  /* Pulsating animation */
  animation: badge-pulse 2s ease-in-out infinite;
}

/* Keyframes for the pulsating animation */
@keyframes badge-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(255, 69, 0, 0.4);
  }
  50% {
    transform: scale(1.1); /* Slightly enlarge */
    box-shadow: 0 0 12px rgba(255, 69, 0, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(255, 69, 0, 0.4);
  }
}

.badge-right {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #4caf50CC; /* or your brand color */
  color: #fff;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Image at top */
.teamevents-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Card content area */
.teamevents-content {
  padding: 15px;
}

.teamevents-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 24px !important;
}

/* Ensure the description keeps the same color on hover */
.teamevents-description {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.4;
  color: #333 !important; /* Default color */
}

.teamevents-card:hover .teamevents-description {
  color: #333 !important; /* Force no color change on hover */
}

/* Orange detail boxes in one row */
.teamevents-details {
  display: flex;
  justify-content: space-between; /* across in a single row */
  gap: 5px;
  margin-bottom: 12px;
}

.detail-box {
  flex: 0 0 33%;
  background-color: #FF8C00;
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 8px 0;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Price + "Mehr erfahren" link in the center */
.teamevents-price,
.teamevents-readmore {
  text-align: center;
}

/* Bold/orange price */
.teamevents-price {
  font-weight: 500;
  color: #FF8C00;
  font-size: 1.1em;
  margin-bottom: 10px;
}

/* "Mehr erfahren" link with no background */
.teamevents-button {
  text-decoration: none;
  margin-top: 10px;
  font-weight: 600;
  color: #3B3664 !important;
  transition: color 0.2s ease;
}

/* Hover color for link */
.teamevents-button:hover {
  color: #FFA540; /* hover color */
}

/* Space between posts in the related post grid */
.custom-post-grid .teamevents-card {
    margin-bottom: 20px; /* Adjust as needed */
}

/* Ensure last card does not add extra margin */
.custom-post-grid .teamevents-card:last-child {
    margin-bottom: 0;
}

/* Ensure parent flex container makes columns equal height */
.colmn1, 
.colmn2 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Makes all inner columns the same height */
  gap: 20px; /* Adds space between columns */
}

/* Inner columns with unique backgrounds, padding, and border */
.cl1, .cl2, .cl3, .cl4 {
  flex: 1 1 50%; /* Each column takes 50% width */
  padding: 20px; /* Add spacing inside */
  border: 2px solid; /* Border same color as background */
  border-radius: 6px; /* Soft rounded corners */
}

/* Unique background colors + border colors */
.cl1 {
  background-color: rgba(240, 248, 255, 0.8); /* Light blue */
  border-color: rgba(240, 248, 255, 1);
}
.cl2 {
  background-color: rgba(250, 235, 215, 0.8); /* Light beige */
  border-color: rgba(250, 235, 215, 1);
}
.cl3 {
  background-color: rgba(224, 255, 255, 0.8); /* Light cyan */
  border-color: rgba(224, 255, 255, 1);
}
.cl4 {
  background-color: rgba(255, 239, 213, 0.8); /* Light peach */
  border-color: rgba(255, 239, 213, 1);
}

/* Responsive: Stack columns on mobile */
@media (max-width: 768px) {
  .cl1, .cl2, .cl3, .cl4 {
    flex: 1 1 100%; /* Each column takes full width on mobile */
  }
}