#PageMain { margin-top: 0px; }
#PageFooter { margin-top: -30px; }

.sePage .sePageLayout .sePageMain .bordered-bottom::after {
 display: block;
 position: absolute;
 left: 0;
 background-color: #00263A;
 width: 100%;
 height: 3px;
 content: '';
 margin-top: 30px;
}

.center-image {
 display: flex;
 justify-content: center;
}

.center-text {
padding-top: 50px;
text-align: left;
}

.flex-item {
 display: flex;
 align-items: center;
}

.new-section {
padding-top: 100px;
}


@media screen and (max-width: 600px) {
 div.large-banner {
 display: none;
 }
}

@media screen and (max-width: 600px) {
 div.desktop {
 display: none;
 }
}
@media screen and (min-width: 600px) {
 div.mobile {
 display: none;
 }
}

.col-xs-12.content-block-column.desktop {
 padding: 0px;
}

.col-xs-12.w-block.customContentBlock {
 padding: 0px;
}

/* IMAGE OVERLAY */
.se-section-image-overlay .editContent,
.se-section-image-overlay .content-block-column {
 position: relative;
}

.se-section-image-overlay .content-block-column::before {
 content: '';
 background-color: rgba(0,0,0,0.10);
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
}
.bff-image-container {
 max-width: 600px;
 margin-left: 150px;
 padding: 50px;
}

.bff-image {
 max-width: 100%;
 display: block;
 margin: 0;
}

@media (max-width: 600px) {
 .bff-image-container {
 margin: 0 auto;
 padding: 10px;
max-width: 300px;
 }
}

/* ==== 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 */
 transition: transform 0.2s ease !important; /* add transition */
 margin-top: 5px !important; /* add small top margin to prevent clipping */
}

/* Add hover effect to carousel cards */
.custom-carousel .slick-slide > div > div:hover {
 transform: scale(1.02) !important;
}

/* ==== 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;
 margin: -1% auto 2% auto !important;
 padding: 0.75rem 3.5rem !important;
 border: none !important;
 background-color: #ffa400 !important;
 color: #00263a !important;
 font-weight: bold !important;
 font-size: clamp(14px, 3.2vw, 18px) !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: #00a6ce !important;
 color: #00263a !important;
}

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

/* Unified Image Link Hover Styling */
.inline-hover-img,
.nav-grid-4 img,
.nav-grid-3 img {
 transition: transform 0.2s ease;
 display: block;
}
.inline-hover-img:hover,
.nav-grid-4 img:hover,
.nav-grid-3 img:hover {
 transform: scale(1.02);
}
/* 4-column Grid (scales to 2 on mobile) */
.nav-grid-4 {
 display: grid;
 grid-template-columns: repeat(4, 0.67fr);
 gap: 2%;
 padding: 1% 0;
}
.nav-grid-4 a {
 display: block;
 text-decoration: none;
}
.nav-grid-4 img {
 width: 100%;
 height: auto;
 display: block;
}
/* 3-column Grid (scales to 2 on mobile) */
.nav-grid-3 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2%;
 padding: 1% 0;
}
.nav-grid-3 a {
 display: block;
 text-decoration: none;
}
.nav-grid-3 img {
 width: 100%;
 height: auto;
 display: block;
}

/* 3-column Grid that STAYS 3 across (even on mobile) */
.nav-grid-3-fixed {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2%;
 padding: 1% 0;
}
.nav-grid-3-fixed a {
 display: block;
 text-decoration: none;
}
.nav-grid-3-fixed img {
 width: 100%;
 height: auto;
 display: block;
}

/* Mobile: both grids switch to 2 columns */
@media (max-width: 768px) {
 .nav-grid-4,
 .nav-grid-3 {
 grid-template-columns: repeat(2, 1fr);
 }
}
/* ============ 2-column Grid ============ */
/* 2-column layout that centers items vertically */
.nav-grid-2 {
 display: flex;
 justify-content: center;
 align-items: center; /* THIS vertically centers the shorter image */
 gap: 2%;
 padding: 1% 0;
}

/* Images stay responsive */
.nav-grid-2 img {
 max-width: 100%;
 height: auto;
 display: block;
}

/* Mobile: stack into a single centered column */
@media (max-width: 768px) {
 .nav-grid-2 {
 flex-direction: column;
 }
}