/**
 * [bb_gallery] — Gallery section
 * BEM stylesheet. No nesting, kebab-case, single-purpose selectors.
 *
 * Block tree:
 *   .bb-gallery
 *     .bb-gallery__row (--media-left | --media-right)
 *       .bb-section
 *         .bb-section__content
 *           .bb-section__heading
 *           .bb-section__description
 *           .bb-section__cta
 *         .bb-section__media
 *           .bb-slider [data-bb-slider]
 *             .bb-slider__slide
 *               .bb-slider__image
 *     .bb-marquee
 *       .bb-marquee__track
 *         .bb-marquee__item
 *         .bb-marquee__separator
 */

/* ----- Tokens (override at :root in your child theme to rebrand) ----- */
:root {
	--bb-color-navy:    #0a2240;
	--bb-color-yellow:  #fcd116;
	--bb-color-text:    #1a1a1a;
	--bb-color-bg:      #ffffff;
	--bb-cta-radius:    2px;
	--bb-gap:           clamp(1.5rem, 4vw, 3rem);
	--bb-section-pad-y: clamp(2rem, 6vw, 5rem);
	--bb-section-pad-x: clamp(1rem, 4vw, 3rem);
	--bb-content-max:   1280px;
}

/* ===== Section wrapper ===== */
.bb-gallery {
	background: var(--bb-color-bg);
	color: var(--bb-color-text);
}

/* ===== Row ===== */
.bb-gallery__row {
	padding: var(--bb-section-pad-y) var(--bb-section-pad-x);
}

/* ===== Inner two-column layout ===== */
.bb-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bb-gap);
	align-items: center;
	max-width: var(--bb-content-max);
	margin-inline: auto;
}

@media (min-width: 992px) {
	.bb-section {
		grid-template-columns: 1fr 1fr;
	}
	.bb-gallery__row--media-left .bb-section__media {
		order: -1;
	}
}

/* ===== Content (text side) ===== */
.bb-section__content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}
/*
.bb-section__heading {
	margin: 0;
	color: var(--bb-color-navy);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.bb-section__description {
	font-size: 1rem;
	line-height: 1.65;
}

.bb-section__description p { margin: 0 0 1rem; }
.bb-section__description p:last-child { margin-bottom: 0; }

.bb-section__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 1.5rem;
	background: var(--bb-color-yellow);
	color: var(--bb-color-navy);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.05em;
	border-radius: var(--bb-cta-radius);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bb-section__cta:hover,
.bb-section__cta:focus-visible {
	background: #ffd933;
	transform: translateY(-1px);
}

/* ===== Media (slider side) ===== */
.bb-section__media {
	min-width: 0; /* prevent grid blowout when child images are wider than the column */
}

/* ===== Slider (Slick container) ===== */
.bb-slider {
	position: relative;
	background: var(--bb-color-navy);
	padding: 1rem;
	margin-bottom: 2.5rem; /* room for dots below */
}

.bb-slider__slide {
	padding: 0 0.5rem;
}

.bb-slider__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: #d9d9d9; /* placeholder while image loads */
}

/* ----- Slick overrides (scoped to .bb-slider so we don't touch other Slick instances) ----- */
.bb-slider .slick-list  { margin: 0 -0.5rem; }
.bb-slider .slick-track { display: flex; }
.bb-slider .slick-slide { height: auto; }

.bb-slider .slick-dots                            { bottom: -1.75rem; }
.bb-slider .slick-dots li button:before           { color: var(--bb-color-yellow); opacity: 0.5; }
.bb-slider .slick-dots li.slick-active button:before { opacity: 1; }

/* ===== Slider outer-edge bleed (peek effect) =====
 * Applies on all viewports. The slider container is widened to 150% of its
 * column. Slick lays out 2 equal slides inside the wider track, so the outer
 * slide gets visually clipped at the viewport edge — the 1/3 peek effect.
 *
 *   .bb-gallery__row--media-right  → extra width pushes RIGHT (default flow,
 *                                    no offset needed).
 *
 *   .bb-gallery__row--media-left   → negative margin-left pulls the slider
 *                                    so the extra width pushes LEFT instead.
 *
 * .bb-gallery gets overflow-x: hidden so the bleed is clipped at the page
 * edge — no horizontal scrollbar appears no matter how wide the viewport.
 * ============================================================================ */
.bb-gallery {
	overflow-x: hidden;
}

.bb-gallery__row--media-right .bb-slider {
	width: 150%;
}

.bb-gallery__row--media-left .bb-slider {
	width: 150%;
	margin-left: -50%;
}

/* ===== Marquee ===== */
.bb-marquee {
	position: relative;
	overflow: hidden;
	padding: 0.875rem 0;
	background: var(--bb-color-yellow);
	border-block: 4px solid var(--bb-color-navy);
}

.bb-marquee__track {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: max-content;
	animation: bb-marquee-scroll 25s linear infinite;
}

.bb-marquee:hover .bb-marquee__track {
	animation-play-state: paused;
}

.bb-marquee__item {
	white-space: nowrap;
	color: var(--bb-color-navy);
	font-size: clamp(0.9rem, 1.4vw, 1.1rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bb-marquee__separator {
	color: var(--bb-color-navy);
	font-weight: 700;
	opacity: 0.55;
}

@keyframes bb-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* items are duplicated in markup → seamless loop */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bb-marquee__track { animation: none; }
}











h2.bb-section__heading {
    font-size: 59px;
    color: #172651;
    font-family: 'Anton';
    font-weight: 400;
    margin-top: 50px;
}
.bb-slider__image{border-radius:10px;}
a.bb-section__cta{background: #FECD06;
    border-radius: 4px;
    color: #172651;
    min-width: 180px;
    display: table;
    padding: 12px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Anton';
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1.5px;
    margin: 10px 0px 50px;}
.bb-homepage__row.bb-homepage__row--media-right{padding-bottom:0px;    padding-top: 30px;}
.bb-homepage__row.bb-homepage__row--media-left{padding-bottom:0px;    padding-top: 0px;}
.bb-homepage__row
.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.bb-section__description {
    font-size: 17px;
    color: #444444;
    line-height: 28px;
    width: 90%;
}

span.bb-marquee__item {
    color: #172651;
    font-size: 26px;
    font-family: 'Anton';
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 39px;
}
.bb-marquee{border:0px;}

.bb-slider .slick-dots {
    bottom: -1.75rem;
    display: none !important;
}
.slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}

.bb-homepage__row.bb-homepage__row--media-left .bb-section__description{    margin-left: 30px;
    margin-top: 36px;}
.bb-homepage__row.bb-homepage__row--media-left .bb-section__cta{    margin-left: 30px;}

.et_pb_row.et_pb_row_2 {
    padding-bottom: 0px;
}
.bb-slider{background:#112032!important}
.bb-marquee__track{width:100% !important; justify-content: center!important; }

.bb-gallery__row.bb-gallery__row--media-left,.bb-gallery__row.bb-gallery__row--media-right {
    padding-top: 0px; padding-bottom: 0px;
}
@media screen and (min-width: 320px) and (max-width: 993px) { 
h2.bb-section__heading{    font-size: 32px;    margin-top: 10px;}
.bb-section__description{width: 100%;}
a.bb-section__cta{margin: 10px 0px 10px;}
.bb-gallery__row.bb-gallery__row--media-right,
.bb-gallery__row.bb-gallery__row--media-left{    padding-left: 0px;
    padding-right: 0px;}
.bb-section__content{    padding: 0px 20px;}
.bb-homepage__row.bb-homepage__row--media-left .bb-section__description {
    margin-left: 0px;
}
  .bb-homepage__row.bb-homepage__row--media-left .bb-section__cta{    margin-left: 0px;}
}

@media screen and (min-width: 994px) and (max-width: 1180px) { 
h2.bb-section__heading {
    font-size: 34px;
    }
    .bb-section__description{font-size: 16px;
    color: #444444;
    line-height: 22px;}
}
/*css for 4k screen*/
@media screen and (min-width: 1600px) and (max-width:5000px) { 
    .bb-gallery .bb-gallery__row.bb-gallery__row--media-right  .bb-section__media{ position: absolute;
    right: 0;
    width: 50%;
    background: #112032;
   /* margin: 10px;*/
    top: 0;}

.bb-gallery .bb-gallery__row.bb-gallery__row--media-right,
.bb-gallery .bb-gallery__row.bb-gallery__row--media-left {
    position: relative;
    overflow: hidden;
}
  .bb-section{height:800px;}
.bb-gallery .bb-gallery__row.bb-gallery__row--media-left  .bb-section__media{ position: absolute;
    left:0;
    width: 50%;
    background: #112032;
    margin: 10px;
    top: 0;}
  .bb-gallery .bb-gallery__row.bb-gallery__row--media-left .bb-section{display:flex;}
  .bb-gallery .bb-gallery__row.bb-gallery__row--media-left .bb-section__content{margin-left:57%;}
  
  
  
  .slick-slide img{max-height:800px; object-fit:cover;}
  
}