/* ==========================================================================
   Premier Brands — layout overrides (July 2026, v3)
   1) Full-width site layout (+ menu alignment, CSS carousel arrows)
   2) Full-width auto-scrolling hero carousel (yellow panel removed,
      welcome text as one larger block below the carousel)
   3) 50th-anniversary section: gray band, logo + intro on the left,
      CEO quote on the right
   4) Hairline rules between copy blocks
   These rules only override existing styles; no content or imagery changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) FULL-WIDTH LAYOUT
   The Zakra theme caps every container at 1170px; Elementor caps section
   content at 1140px. Lift both so the page spans the full viewport.
   -------------------------------------------------------------------------- */
.zak-main-header .zak-container,
.zak-content .zak-container,
.zak-footer .zak-container {
    max-width: 100%;
    box-sizing: border-box;
}

.zak-main-header .zak-container,
.zak-footer .zak-container {
    padding-left: 48px;
    padding-right: 48px;
}

.zak-content .zak-container {
    padding-left: 0;
    padding-right: 0;
}

/* Elementor inner content: true full width, so the colored section
   backgrounds bleed all the way to both screen edges */
.elementor-77 .elementor-section .elementor-container {
    max-width: 100%;
}

/* Keep all top-level menu items on one baseline (items with dropdown
   carets sat higher than plain items in Safari/Firefox) */
.zak-primary-nav .zak-primary-menu {
    align-items: center;
}

.zak-primary-nav .zak-primary-menu > li {
    display: flex;
    align-items: center;
}

.zak-primary-nav .zak-primary-menu > li > a {
    display: inline-flex;
    align-items: center;
}

/* The eicons icon font is missing on the server (404), so carousel
   arrows rendered as broken-glyph boxes. Draw the chevrons in pure CSS
   instead — applies to every carousel on the page. */
.elementor-swiper-button .eicon-chevron-left::before,
.elementor-swiper-button .eicon-chevron-right::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.elementor-swiper-button .eicon-chevron-left::before {
    transform: rotate(-135deg);
    margin-left: 5px;
}

.elementor-swiper-button .eicon-chevron-right::before {
    transform: rotate(45deg);
    margin-right: 5px;
}

/* --------------------------------------------------------------------------
   2) HERO — FULL-WIDTH AUTO-SCROLLING CAROUSEL
   The carousel auto-advances every 5s (Elementor autoplay setting; a
   fallback script in index.html covers browsers that block Elementor's
   loader, e.g. when the file is opened directly from disk).
   Carousel first at 100% width, welcome text below it as one block.
   -------------------------------------------------------------------------- */
/* Let the carousel escape the content cap and touch both screen edges */
.elementor-77 .elementor-element.elementor-element-e27ca03 > .elementor-container {
    max-width: 100%;
    flex-wrap: wrap;
}

/* Carousel column: full width, shown first */
.elementor-77 .elementor-element.elementor-element-a1229b7 {
    width: 100%;
    order: -1;
}

/* Welcome-text column: full width, below the carousel, no yellow */
.elementor-77 .elementor-element.elementor-element-60c0b0b {
    width: 100%;
}

.elementor-77 .elementor-element.elementor-element-60c0b0b:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap,
.elementor-77 .elementor-element.elementor-element-60c0b0b > .elementor-widget-wrap > .elementor-background-slideshow {
    background-color: transparent;
    background-image: none;
}

/* Pfizer-style banner height; images crop to fill (no imagery changes) */
.elementor-77 .elementor-element.elementor-element-a2ec49c .swiper-slide-image {
    width: 100%;
    height: clamp(360px, 62vh, 640px);
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .elementor-77 .elementor-element.elementor-element-a2ec49c .swiper-slide-image {
        height: 300px;
    }
}

/* Welcome area: one larger text block on the left, team photo filling
   the right side to the screen edge */
@media (min-width: 1025px) {
    .elementor-77 .elementor-element.elementor-element-60c0b0b > .elementor-widget-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: stretch;
    }

    .elementor-77 .elementor-element.elementor-element-85c8fc0,
    .elementor-77 .elementor-element.elementor-element-971da7a {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
    }

    .pb-welcome-photo {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

.pb-welcome-photo {
    display: flex;
}

.pb-welcome-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1024px) {
    .pb-welcome-photo {
        margin: 4px 6vw 36px 6vw;
    }

    .pb-welcome-photo img {
        height: auto;
    }
}

/* Welcome text: one larger text block (both paragraphs together) */
.elementor-77 .elementor-element.elementor-element-85c8fc0 > .elementor-widget-container {
    margin: 0;
    padding: 48px 6vw 8px 6vw;
    max-width: 1280px;
    font-size: 20px;
    line-height: 1.75;
}

/* Contact Us button: left-aligned with the welcome text so it reads as
   part of the copy block instead of floating in the middle of the page */
.elementor-77 .elementor-element.elementor-element-971da7a.elementor-align-left .elementor-button-wrapper {
    text-align: left;
}

.elementor-77 .elementor-element.elementor-element-971da7a > .elementor-widget-container {
    margin: 0;
    padding: 12px 6vw 44px 6vw;
}

/* The two 30px spacers in the old yellow panel are no longer needed */
.elementor-77 .elementor-element.elementor-element-e0a0cdb,
.elementor-77 .elementor-element.elementor-element-8c9f223 {
    display: none;
}

/* --------------------------------------------------------------------------
   3) 50TH-ANNIVERSARY SECTION — GRAY BAND, LOGO + INTRO LEFT, QUOTE RIGHT
   A subtle gray background separates this block from the hero area.
   Left column: 50-years logo, heading, intro copy, "A word from…" lead-in.
   Right column: Steven Corsun's quote, vertically centered.
   -------------------------------------------------------------------------- */
.elementor-77 .elementor-element.elementor-element-821e658 {
    position: relative;
    background-color: #f6f7f8;
    padding: 60px 0;
}

.elementor-77 .elementor-element.elementor-element-821e658 > .elementor-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: repeat(4, auto);
    column-gap: 5vw;
    align-items: start;
    padding-left: 4vw;
    padding-right: 4vw;
    box-sizing: border-box;
}

/* Dissolve the old Elementor column wrappers so their contents become
   direct grid items we can place freely */
.elementor-77 .elementor-element.elementor-element-d730bfe,
.elementor-77 .elementor-element.elementor-element-d730bfe > .elementor-widget-wrap,
.elementor-77 .elementor-element.elementor-element-70ad73f,
.elementor-77 .elementor-element.elementor-element-70ad73f > .elementor-widget-wrap,
.elementor-77 .elementor-element.elementor-element-b1228c3,
.elementor-77 .elementor-element.elementor-element-b1228c3 > .elementor-widget-container {
    display: contents !important;
}

/* Left column, top: the 50-years logo */
.elementor-77 .elementor-element.elementor-element-d9fec05 {
    grid-column: 1;
    width: auto;
    max-width: none;
    text-align: left;
}

.elementor-77 .elementor-element.elementor-element-d9fec05 > .elementor-widget-container {
    margin: 0;
    padding: 0 0 28px 0;
}

.elementor-77 .elementor-element.elementor-element-d9fec05 img {
    width: auto;
    max-width: 260px;
    border-radius: 0;
}

/* Left column: heading and intro copy */
.elementor-77 .elementor-element.elementor-element-b1228c3 > .elementor-widget-container > h3,
.elementor-77 .elementor-element.elementor-element-b1228c3 > .elementor-widget-container > p {
    grid-column: 1;
}

.elementor-77 .elementor-element.elementor-element-b1228c3 > .elementor-widget-container > h3 {
    font-size: 28px;
    margin: 0 0 18px 0;
}

/* Right column: the CEO quote */
.elementor-77 .elementor-element.elementor-element-b1228c3 > .elementor-widget-container > blockquote {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    margin: 0;
}

/* Stack everything on tablets/phones */
@media (max-width: 1024px) {
    .elementor-77 .elementor-element.elementor-element-821e658 {
        padding: 40px 0;
    }
    .elementor-77 .elementor-element.elementor-element-821e658 > .elementor-container {
        display: block;
        padding-left: 6vw;
        padding-right: 6vw;
    }
    .elementor-77 .elementor-element.elementor-element-b1228c3 > .elementor-widget-container > blockquote {
        margin-top: 24px;
    }
}

/* --------------------------------------------------------------------------
   4) HAIRLINE RULES BETWEEN COPY BLOCKS
   A divider above the 50th-anniversary band, and one centered in each
   white gap between the brand sections.
   -------------------------------------------------------------------------- */
.elementor-77 .elementor-element.elementor-element-821e658::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1720px, 95vw);
    border-top: 1px solid #e4e4e7;
}

/* The empty white spacer sections between the brand blocks */
.elementor-77 .elementor-element.elementor-element-7c935a7,
.elementor-77 .elementor-element.elementor-element-0e63830,
.elementor-77 .elementor-element.elementor-element-ca4eb84,
.elementor-77 .elementor-element.elementor-element-7d7d99a {
    position: relative;
}

.elementor-77 .elementor-element.elementor-element-7c935a7::before,
.elementor-77 .elementor-element.elementor-element-0e63830::before,
.elementor-77 .elementor-element.elementor-element-ca4eb84::before,
.elementor-77 .elementor-element.elementor-element-7d7d99a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1720px, 95vw);
    border-top: 1px solid #e4e4e7;
}