/* HEADER */
.sePage .sePageMain { margin-top: 0px; }

/* FOOTER */ 
.sePageFooter { margin-top: 0px; } 

/* MARGIN */
.sePageContent .sePageSection.se-section-padding-b-22 {
 padding-bottom: 22px;
}

/* HERO */
.sePage .sePageLayout .sePageMain .se-hp-hero .content-block-column {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 position: relative;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 z-index: 1;
 padding: 14% 10%;
}

.sePage .sePageLayout .sePageMain .se-hp-hero::after {
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 z-index: 0;
 background-color: rgba(0, 0, 0, 0.25);
 padding: 0;
 width: 100%;
 content: '';
}

.sePage .sePageLayout .sePageMain .se-hp-hero {
 position: relative;
 overflow: hidden;
}

.sePage .sePageLayout .se-hp-hero h1,
.sePage .sePageLayout .se-hp-hero h2 {
 margin: 22px auto 7px;
}

.sePage .sePageLayout .se-hp-hero p {
 margin: 0px auto 18px;
 font-size: 20px;
}

/* SHOP LINKS */
.se-shop-links .block-bg-img {
 padding: 60px 15px;
}

.se-shop-links .content-block-column::before {
 content: '';
 background-color: rgba(0, 0, 0, 0.25);
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
}

.se-shop-links .editContent, .se-shop-links .content-block-column {
 position: relative;
}

.sePageContent .sePageSection.se-shop-links {
 margin-bottom: 0px;
}

.se-shop-links .col-margin-bottom {
 margin-bottom: 30px;
}

.sePage .sePageLayout .se-shop-links h3 {
 margin-top: 22px;
}

.seResponsive .se-shop-links .content-block-column .btn {
 margin-bottom: 22px;
}

/************************************/
/* Cycle Therapy specific CSS. */
/************************************/

 .video-container {
 position: relative;
 width: 100%; /* Make the container take up the full width */
 padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
 height: 0;
 overflow: hidden;
 }

 .video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }

/* Remove the underline from links on the main page. The main reason is for the links on the images. Stops them from showing an ugly underline */ 
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

.ct_mp_info_container { 
 display: flex;
 flex-direction: column;
 width: 100%;
}

.ct_mp_info_row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 /* border: 1px solid #ddd; */ /* Optional for visualization */
 margin: 0 10px 20px; /* Optional spacing between rows */

}

.ct_mp_info_left-column {
 text-align: center;
 padding: 20px;
 flex: 1; /* Equal width for both columns */

}

.ct_mp_info_right-column {
 flex: 1; /* Equal width for both columns */
text-align: center;
 /* background-color: #eee; */ /* Placeholder background color */
 /* height: 0; Initial height for aspect ratio */
 /* padding-bottom: 100%; Aspect ratio for image */

}

.ct_mp_info_right-column img {
/*
position: absolute;
 top: 0;
 left: 0;

 width: 100%;
 height: 100%;
*/
 /* object-fit: cover; Image fills placeholder while maintaining aspect ratio */

}

@media screen and (max-width: 600px) {
 .ct_mp_info_container { flex-wrap: wrap; }
.ct_mp_info_row { flex-basis: 100%; }
.ct_grid_item { padding-bottom: .625rem; }
.ct_full_screen { display:none; }
.ct_small_screen { display:block; }
}

@media screen and (min-width: 601px) {
.ct_full_screen { display:block; }
.ct_small_screen { display:none; }
}

hr {
 border-top: 2px solid #00B8DC;
}


/**********************************************************/
/** Main Page Grid Styles ****************************/
/** Mar 26, 2025 TC ***********************************/
/**********************************************************/

/* Grid container styles */
.grid-container_main_page {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto minmax(0, 1fr);
 margin: 0;
 gap: 8px;
}

/* Default styles for grid items (cells) */
.grid-item_main_page {
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 box-sizing: border-box;
 font-size: 2rem;
 position: relative;
 overflow: hidden;
 padding: 0;
}

/* Image styles within grid items */
.grid-item_main_page img {
 max-width: 100%;
 height: auto;
 display: block;
 transition: filter 0.4s ease;
}

/* Link styles within grid items */
.grid-item_main_page a {
 text-decoration: none;
 color: blue;
}

/* Styles for the title row */
.title-row_main_page {
 grid-column: 1 / 4;
 border: none;
 padding: 30px;
 font-size: 8rem;
 font-weight: bold;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-family: 'VTFRedzone', sans-serif;
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
 background-color: #00B8DC;
 
}

/* Styles for the text overlay on images */
.grid-item_main_page span {
 position: absolute;
 bottom: 10%;
 left: 10%;
 color: white;
 background-color: rgba(0, 0, 0, 0.3);
 padding: 5px 20px;
 z-index: 1;
 font-size: 1.2em;
 box-sizing: border-box;
 width: 80%;
 text-align: left;
 transition: background-color 0.4s ease;
}

/* Media query for smaller screens (e.g., mobile - 768px and below) */
@media (max-width: 768px) {
 .grid-container_main_page {
 grid-template-columns: 1fr;
 grid-template-rows: auto;
 margin-left: 0;
 margin-right: 0;
 gap: 0;
 }

 .grid-item_main_page {
 padding: 0;
 font-size: 1rem;
 }

 .title-row_main_page {
 grid-column: 1 / 2;
 font-size: 1.5rem;
 margin-bottom: 8px; /* Keep padding-bottom here for all screens */
 }

 .grid-item_main_page span {
 font-size: 1.5rem;
 }

 .grid-item_main_page {
 padding-bottom: 8px;
 }

 .grid-container_main_page > .grid-item_main_page:last-child {
 padding-bottom: 0;
 }
}

/* Media query for large screens (up to 1200px) */
@media (max-width: 1200px) {
 .grid-item_main_page {
 font-size: 1.2rem;
 }

 .title-row_main_page {
 font-size: 6rem;
 }
}

/* Apply hover effect to the image inside the hovered grid item */
.grid-item_main_page:hover img {
 opacity: 0.7;
}

.grid-item_main_page:hover span {
 background-color: rgba(0, 184, 220, 1);
 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
 transition: box-shadow 0.4s ease;
 filter: none;
}

/* Remove bottom padding from the last 3 items */
@media (min-width: 769px) {
 .grid-container_main_page {
 & > .grid-item_main_page:nth-last-child(-n+3) {
 padding-bottom: 0;
 }
 }
}


/* Base styles (for desktop and default behavior - screen width > 768px) */
.video-section {
 position: relative;
 width: 100%;
 height: 100vh; /* Default: Full viewport height for larger screens */
 overflow: hidden; /* Ensures video cropping works correctly */
 background-color: #000; /* Fallback background color if video doesn't load or doesn't cover */
}

.video-background-container {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%; /* Will take up the full 100vh of .video-section */
 z-index: 1; /* Behind the text overlay */
}

/* iframe styling for desktop (applies when screen width is > 768px) */
/* This is a robust "cover" method for a 16:9 video filling a 100vh container. */
.video-background-container iframe {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); /* Centers the video */
 pointer-events: none; /* Disables interaction with the video */

 /* Ensure the 16:9 video always covers the 100vh parent container.
 It checks both width (100vw) and height (100vh) scenarios to guarantee coverage. */
 width: 100vw; /* Default width based on viewport */
 height: 56.25vw; /* 16:9 aspect ratio based on viewport width */
 min-height: 100%; /* If 56.25vw is too short for 100% of parent's height, expand height */
 min-width: 177.77vh; /* If 100vw is too narrow for 100% of parent's width AND parent is 100vh, expand width */
 /* 177.77vh is (16/9) * 100vh */
}

.content-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 z-index: 2; /* In front of the video */
}

.centered-text {
 color: #FFFFFF;
 font-size: 4.5rem;
 font-weight: bold;
 text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* --- Media Queries for Responsive Adjustments (for screens <= 768px) --- */

@media screen and (max-width: 768px) {
 .video-section {
 /* On smaller screens, make the .video-section container itself maintain a 16:9 aspect ratio.
 This means the background area will perfectly match the video's visible area. */
 height: 0; /* Reset explicit height to allow padding-bottom to define height */
 padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) relative to its width */
 }

 .video-background-container iframe {
 /* For smaller screens, when the parent container (.video-background-container)
 already has the exact 16:9 aspect ratio, the iframe simply needs to fill it. */
 width: 100%;
 height: 100%;
 top: 0; /* Reset top/left positioning for a direct fill */
 left: 0;
 transform: none; /* Remove centering transform */
 min-width: unset; /* Remove min properties as they are not needed for exact fill */
 min-height: unset;
 }

 .centered-text {
 font-size: 2.5rem; /* Adjust font size for better readability on smaller screens */
 }
}

@media screen and (max-width: 480px) {
 .centered-text {
 font-size: 2rem; /* Further reduce font size for very small screens */
 }
}

.background-div {
 width: 100%; /* Full width of the available screen space */
 height: 600px; /* You can adjust this height as needed, or set a min-height */
 background-image: url('https://www.sefiles.net/merchant/6399/images/site/TKCheckpoint2026.jpg'); /* Replace with your image URL */
 background-size: cover; /* This makes the image cover the entire div, resizing responsively */
 background-position: center; /* Centers the image within the div */
 background-repeat: no-repeat; /* Prevents the image from repeating */
 color: white; /* For demonstration, making text visible on the background */
 display: flex; /* To center the content if any */
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 padding: 20px; /* Add some padding for content */
 box-sizing: border-box; /* Include padding in the width/height */
}

/* Optional: Media query for very small screens if you need more specific adjustments */
@media (max-width: 768px) {
 .background-div {
 height: 300px; /* Adjust height for smaller screens */
 font-size: 0.9em;
 }
}

.background-image-container-XTR {
 background-image: url('https://www.sefiles.net/merchant/6399/images/site/NewDi2XTRDrivetrain.jpg'); /* Replace with the actual path to your image */
 background-size: contain; /* Ensures the entire image is visible within the div */
 background-repeat: no-repeat; /* Prevents the image from repeating */
 background-position: center; /* Centers the image within the div */
 width: 800px; /* Set this to the actual width of your image */
 height: 600px; /* Set this to the actual height of your image */
}