wrappers inside Elementor flex
* columns where it sometimes resolved to 0 height. */
.amc-live .amc-live-video {
position: relative;
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: var(--amc-live-ratio, 16 / 9);
background: #000;
object-fit: contain;
z-index: 1;
}
.amc-live__title {
position: absolute;
left: 12px;
bottom: 12px;
padding: 6px 12px;
background: rgba(0, 0, 0, .55);
color: #fff;
font-size: 13px;
border-radius: 6px;
pointer-events: none;
z-index: 2;
}
.amc-live-error {
padding: 12px 16px;
background: rgba(239, 68, 68, .1);
border: 1px solid rgba(239, 68, 68, .35);
border-radius: 8px;
color: #ef4444;
font-size: 14px;
}
/* ================================================================
* WHAT'S INCLUDED — [amc_includes] shortcode
* ================================================================ */
.amc-includes {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 40px 0;
overflow-x: hidden; /* safety net against any child that overshoots */
}
.amc-includes * {
box-sizing: border-box;
max-width: 100%;
}
/* 3-column grid: pills (30%) | image (40%) | detail card (30%)
* align-items: stretch so image + detail card fill the same height.
* Pills get align-self: start below so they sit at the top.
* minmax(0, …) allows grid tracks to shrink below their content size,
* which prevents long labels in pills / titles from pushing the grid
* wider than the viewport on mobile. */
.amc-includes__columns {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
gap: 20px;
align-items: stretch;
}
/* 2-column fallback when the package has no "What's included" image —
* avoids a tall empty black box that pushed content off the screen. */
.amc-includes__columns--no-image {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Column 1 — Bullet pills (top-aligned, doesn't stretch) */
.amc-includes__bullets {
display: flex;
flex-direction: column;
gap: 8px;
align-self: start;
}
.amc-includes__pill {
display: block;
width: 100%;
text-align: left;
background: rgba(255, 255, 255, .1) !important; /* #FFFFFF1A */
border: 1px solid rgba(255, 255, 255, .1) !important; /* #FFFFFF1A */
border-radius: 30px;
padding: 14px 24px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: #fff !important;
cursor: pointer;
transition: background .35s ease, color .35s ease, border-color .35s ease;
/* Long feature labels wrap inside the pill instead of staying on
* a single line. Themes / Elementor set `white-space: nowrap` on
* button elements, so !important is required to override. */
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
min-width: 0;
height: auto !important;
}
.amc-includes__pill:hover,
.amc-includes__pill.is-active {
background: linear-gradient(90deg, #FFD400 0%, rgba(255, 212, 0, .2) 50%, rgba(255, 255, 255, .08) 100%) !important;
color: #fff !important;
border-color: rgba(255, 212, 0, .4) !important;
}
/* Column 2 — Image
* align-self: stretch overrides the grid's align-items: start so the
* image column always fills the full row height. The
![]()
is
* position: absolute so it covers the entire cell. */
.amc-includes__image {
position: relative;
border-radius: 30px;
overflow: hidden;
align-self: stretch;
min-height: 400px;
}
.amc-includes__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Column 3 — Detail card
* align-self: stretch makes it match the image column height.
* Icon at top-left, text pushed to the bottom. */
.amc-includes__detail {
position: relative;
border-radius: 30px;
padding: 24px 24px;
background: linear-gradient(225deg, #9A9A9A44 0%, #000000 50%, #9A9A9A44 100%);
display: flex;
flex-direction: column;
align-self: stretch;
margin-bottom: 60px; /* 60px shorter than image on desktop */
}
.amc-includes__detail-card {
display: none;
}
.amc-includes__detail-card.is-active {
display: flex;
flex-direction: column;
flex: 1;
justify-content: flex-end;
}
/* Icon pinned to the top-left corner, 50px gap to text below */
.amc-includes__detail-icon {
width: 40px;
height: 40px;
margin-bottom: 50px;
flex-shrink: 0;
}
.amc-includes__detail-title {
font-family: 'Montserrat', sans-serif;
font-size: 52px;
font-weight: 600;
line-height: 64px;
color: #fff;
margin: 0 0 8px;
}
.amc-includes__detail-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 32px;
color: #fff;
margin: 0 0 12px;
}
.amc-includes__detail-desc {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: rgba(255, 255, 255, .7);
margin: 0;
}
/* Action buttons row — same visual style as the pills */
.amc-includes__actions {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
justify-content: center;
}
.amc-includes__action-btn {
display: inline-flex;
align-items: center;
flex-direction: row-reverse; /* icon on the RIGHT side */
gap: 10px;
padding: 14px 24px;
background: #77D6FF1A !important;
border: 1px solid #77D6FF !important;
border-radius: 30px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
color: #77D6FF !important;
text-decoration: none;
transition: background .2s ease;
white-space: nowrap;
}
.amc-includes__action-btn:hover {
background: #77D6FF50 !important;
color: #77D6FF !important;
}
.amc-includes__action-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Responsive — stack on mobile: Image → Pills → Detail */
@media (max-width: 768px) {
.amc-includes {
padding: 24px 0;
}
.amc-includes__columns {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
/* Reorder: image first, pills second, detail third */
.amc-includes__image { order: -1; min-height: 240px; }
.amc-includes__bullets { order: 0; align-self: stretch; }
.amc-includes__detail { order: 1; min-height: 300px; margin-bottom: 0; }
/* Force long feature labels to wrap instead of pushing the pill
* wider than the viewport. */
.amc-includes__pill {
white-space: normal;
word-break: break-word;
overflow-wrap: break-word;
padding: 12px 18px;
font-size: 15px;
line-height: 22px;
}
.amc-includes__detail-title {
font-size: 32px;
line-height: 40px;
word-break: break-word;
}
.amc-includes__detail-subtitle {
font-size: 18px;
line-height: 26px;
word-break: break-word;
}
.amc-includes__detail-desc {
word-break: break-word;
}
.amc-includes__actions {
flex-direction: column;
}
.amc-includes__action-btn {
justify-content: center;
white-space: normal;
text-align: center;
}
/* Third button only (phone / tel: link) — tighter horizontal
* padding on mobile so the long label fits on one line. */
.amc-includes__action-btn--phone {
padding: 14px 5px;
}
}