/* ============ Base Container ============ */
.framed-overlap {
 display: flex;
 align-items: center;
padding: 5% 0;
 max-width: 1200px;
 margin: 0 auto;
 position: relative;
}

/* ============ Shared Text Block ============ */
.framed-overlap .text-block {
 flex: 0 0 48%;
 background-color: #00263a;
 padding: 2.5rem;
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
 position: relative;
 z-index: 2;
 text-align: center;
}

.framed-overlap .text-block * {
 color: white !important;
 margin-bottom: 1rem;
}

.framed-overlap .text-block .btn {
 display: inline-block;
 padding: 0.75rem 1.5rem;
 border: none;
 background-color: #00a6ce;
 color: #fff !important;
 font-weight: bold;
 text-decoration: none;
 border-radius: 9999px;
 transition: background-color 0.3s ease;
}

.framed-overlap .text-block .btn:hover {
 background-color: #33c4e0;
}

/* ============ Shared Image Wrapper ============ */
.framed-overlap .image-wrapper {
 flex: 0 0 52%;
 position: relative;
 overflow: hidden;
 min-height: 425px;
}

.framed-overlap .image-wrapper::before {
 content: "";
 display: block;
 padding-top: 66%;
}

.framed-overlap .image-block {
 position: absolute;
 inset: 0;
 background-size: cover;
 background-position: center;
}

/* ============ Left‑Text Variant ============ */
.framed-overlap-left .text-block {
 order: 1;
 margin-right: -6%;
}

.framed-overlap-left .image-wrapper {
 order: 2;
 border-top-right-radius: 100px;
}

.framed-overlap-left .image-block {
 border-top-right-radius: 100px;
}

/* ============ Right‑Text Variant ============ */
.framed-overlap-right .text-block {
 order: 2;
 margin-left: -6%;
}

.framed-overlap-right .image-wrapper {
 order: 1;
 border-top-left-radius: 100px;
}

.framed-overlap-right .image-block {
 border-top-left-radius: 100px;
}

/* ============ Mobile Styles ============ */
@media (max-width: 768px) {
 .framed-overlap {
 flex-direction: column;
 padding: 5% 0;
 }

 .framed-overlap .text-block,
 .framed-overlap .image-wrapper {
 flex: 0 0 auto;
 width: 100%;
 margin: 0;
 }

 /* Ensure image above text on mobile */
 .framed-overlap-left .image-wrapper,
 .framed-overlap-right .image-wrapper {
 order: 1 !important;
 }
 .framed-overlap-left .text-block,
 .framed-overlap-right .text-block {
 order: 2 !important;
 }

 /* 16:9 aspect for the image */
 .framed-overlap .image-wrapper {
 aspect-ratio: 16 / 9;
 min-height: 0;
 }
 .framed-overlap .image-wrapper::before {
 display: none;
 }

 /* Maintain single corner per variant */
 .framed-overlap-left .image-block {
 border-radius: 0 60px 0 0 !important;
 }
 .framed-overlap-right .image-block {
 border-radius: 60px 0 0 0 !important;
 }

 /* Remove shadow on mobile */
 .framed-overlap .text-block {
 box-shadow: none !important;
 }
}

/* ==== Carousel “card” styling ==== */
.custom-carousel .slick-slide > div > div {
 background-color: #fff !important; /* white card */
 border-radius: 8px !important; /* rounded corners */
 overflow: hidden !important; /* crop overflow to curve */
 box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; /* subtle lift */
}
/* ==== 4) Add top/bottom padding to the text block ==== */
.custom-carousel .seImgFrame + div {
 padding-top: 1rem !important;
 padding-bottom: 1rem !important;
}
/* ==== Carousel “View More” button styling ==== */
.custom-carousel .seContentSectionLink a.btn,
.custom-carousel .seContentSectionLink a.btn-primary {
 display: inline-block !important;
 padding: 0.75rem 1.5rem !important;
 border: none !important;
 background-color: #00a6ce !important;
 color: #fff !important;
 font-weight: bold !important;
 text-decoration: none !important;
 border-radius: 9999px !important;
 transition: background-color 0.3s ease !important;
}
.custom-carousel .seContentSectionLink a.btn:hover,
.custom-carousel .seContentSectionLink a.btn-primary:hover {
 background-color: #33c4e0 !important;
}

/* hide the price when “hide-price” is present */
.hide-price .seProductPrice {
 display: none !important;
}

/* Image Styling */
.rounded-tl-br {
 border-top-left-radius: 32px;
 border-bottom-right-radius: 32px;
 border-top-right-radius: 0;
 border-bottom-left-radius: 0;
 overflow: hidden;
margin: 3rem 1rem;
}
.rounded-wide {
 display: block; /* makes margin auto work */
 width: 100%; /* fill the column exactly */
 max-width: 100%; /* never exceed it */
 aspect-ratio: 16 / 9; /* keep your pill shape */
 border-radius: 9999px;
 overflow: hidden;
 margin: 3rem auto; /* 3rem top/bottom, auto left/right */
 box-sizing: border-box; /* include any padding/border in that 100% */
}

.circular-image {
 display: block; /* makes margins work predictably */
 width: 100%; /* fill its container (or set a max-width below) */
 max-width: 300px; /* optional: cap size—adjust as needed */
 aspect-ratio: 1 / 1; /* 1:1 keeps it square */
 border-radius: 50%; /* turns that square into a circle */
 overflow: hidden; /* crop any overflow */
 margin: 0 auto; /* center it horizontally if block-level */
 box-sizing: border-box; /* include padding/border inside width */
}

/* === Flex wrapper & vertical centering for both feature sections === */
.se-feature-2col-section,
.se-feature-2col-fw-section {
 display: flex !important;
 flex-wrap: wrap !important; /* allow stacking on narrow screens */
}

/* make each column a flex item that centers its own content */
.se-feature-2col-section .content-block-column,
.se-feature-2col-fw-section .content-block-column {
 display: flex !important;
 flex-direction: column !important;
 justify-content: center !important; /* vertical center */
 flex: 1 1 100% !important; /* full width by default (stacks) */
}

/* === Desktop: side‑by‑side at equal width === */
@media (min-width: 992px) {
 .se-feature-2col-section .content-block-column,
 .se-feature-2col-fw-section .content-block-column {
 flex: 0 0 50% !important; /* each takes half the row */
 max-width: 50% !important;
 }
}

.custom-btn {
 display: inline-block;
 padding: 0.75rem 1.5rem;
 border: none;
 background-color: #00a6ce;
 color: #fff !important;
 font-weight: bold !important;
 text-decoration: none !important;
 border-radius: 9999px;
 transition: background-color 0.3s ease;
}
.custom-btn:hover {
 background-color: #33c4e0;
}

.nav-btn-rounded-tl-br {
 display: block;
 width: 300px;
 margin: 2rem auto; /* centers in parent */
 padding: 1rem 0;
 background-color: #00a6ce;
 color: #fff !important;
 font-weight: 900 !important;
 font-size: 20px;
 text-align: center;
 border: none;
 border-radius: 999px;
 overflow: hidden;
 text-decoration: none !important;
 transition: background-color 0.3s ease;
 box-sizing: border-box;
}
.nav-btn-rounded-tl-br:hover {
 background-color: #33c4e0;
}

.custom-carousel.catalogue-dark .seContentSectionLink a.btn,
.custom-carousel.catalogue-dark .seContentSectionLink a.btn-primary {
 background-color: #00263a !important;
 color: #fff !important;
}

.custom-carousel.catalogue-dark .seContentSectionLink a.btn:hover,
.custom-carousel.catalogue-dark .seContentSectionLink a.btn-primary:hover {
 background-color: #68cbdf !important;
 color: #fff !important;
}