/* NOTE : only copy the section builder css */

/* start : HTML structure *//*
<section class="section-builder">
	<div class="section-bg"></div><!-- added when section has a background otherwise removed -->
	<div class="section-block row">
		<div class="col"></div>
		<div class="col"></div>
	</div>
</section>
*//* end : HTML structure */

/** ## start | section builder v1a ## **/

/* start | section */
.section-builder { position: relative; z-index: 5; margin-block: var(--SectionVerticalSpace, 75px); }
.section-builder:has(.section-bg:not([data-bgcolor="none"])) { margin-block: 0; padding-block: var(--SectionVerticalSpace, 75px); }
/* end | section */

/* start | section block */
.section-block { position: relative; z-index: 5; }
.section-block > div:only-child { margin-inline: auto; }
.section-block img { display: block; }
.section-block iframe { max-width: 100%; }

@media only screen and (max-width: 575px) {
	.section-block.row { gap: 20px; }
	.section-block.row > * { width: 100%; }
	.section-block img { margin-inline: auto; }
}
/* end | section block */

/* start | section bg */
.section-bg { position: absolute; z-index: -5; left: 50%; top: 0; width: 100vw; height: 100%; transform: translatex(-50%); }
.section-bg img { width: 100%; height: 100%; object-fit: cover; }
.section-bg iframe { position: absolute; z-index: -5; width: 100%; height: 100%; }

[data-bg-color="light-1"] { background-color: var(--BgLight-1); }
[data-bg-color="light-2"] { background-color: var(--BgLight-2); }
[data-bg-color="dark-1"] { background-color: var(--BgDark-1); }
[data-bg-color="dark-2"] { background-color: var(--BgDark-2); }
[data-bg-overlay]:before { content: ''; position: absolute; z-index: 5; inset: 0; opacity: var(--OverlayOpacity, 0.5); }
[data-bg-overlay="light-1"]:before { background-color: var(--BgLight-1, #fff); }
[data-bg-overlay="light-2"]:before { background-color: var(--BgLight-2); }
[data-bg-overlay="dark-1"]:before { background-color: var(--BgDark-1, #000); }
[data-bg-overlay="dark-2"]:before { background-color: var(--BgDark-2); }
/* end | section bg */

/* start | text color regarding bg */
.section-builder:has([data-bg-color="light-1"]),
.section-builder:has([data-bg-color="light-2"]),
.section-builder:has([data-bg-overlay="light-1"]),
.section-builder:has([data-bg-overlay="light-2"]) { color: var(--TextDark, #000); }

.section-builder:has([data-bg-color="dark-1"]),
.section-builder:has([data-bg-color="dark-2"]),
.section-builder:has([data-bg-overlay="dark-1"]),
.section-builder:has([data-bg-overlay="dark-2"]) { color: var(--TextLight), #fff; }
/* end | text color regarding bg */

/* start | image text button combo */
.img-text-btn,
.text-btn { display: flex; flex-wrap: wrap; flex-direction: column; height: 100%; }
.text-holder { flex-grow: 1; }

.btn-holder { display: flex; flex-wrap: wrap; margin-top: var(--BtnMarginTop, 20px); column-gap: var(--BtnColumnGap, calc(var(--bootstrapPadding) * 2)); row-gap: var(--BtnRowGap, calc(var(--bootstrapPadding) * 2)); }
/* end | image text button combo */

[data-align="left"] { text-align: left; }
[data-align="center"] { text-align: center; }
[data-align="right"] { text-align: right; }

[data-align="left"] .btn-holder { justify-content: flex-start; }
[data-align="center"] .btn-holder { justify-content: center; }
[data-align="right"] .btn-holder { justify-content: flex-end; }

[data-align="left"] img { margin-inline: 0 auto; }
[data-align="center"] img { margin-inline: auto; }
[data-align="right"] img { margin-inline: auto 0; }

/* start | section slider */
.section-slider { text-align: center; }
.section-slider img { margin-inline: auto; }
.section-slider .btn-holder { justify-content: center; }
.section-slider:has(.slick-arrow) .slick-list { margin: 0 50px; }
.section-slider .slick-track { display: flex; }
.section-slider .slick-slide { float: none; height: unset; margin-inline: var(--bootstrapPadding); }
.section-slider .slick-arrow { position: absolute; z-index: 5; top: 50%; transform: translate(0,-50%); cursor: pointer; }
.section-slider .slick-prev { left: 0; }
.section-slider .slick-next { right: 0; }
/* end | section slider */

/** ## end | section builder ## **/



/** ## start | section bulder set-up : this is to be added on main.css or dev.css ## **/
.section-builder {
	--SectionVerticalSpace: var(--Space75);
	--BgLight-1: var(--SampleLightBg1);
	--BgLight-2: var(--SampleLightBg2);
	--BgDark-1: var(--SampleDarkBg1);
	--BgDark-2: var(--SampleDarkBg1);
	--OverlayOpacity: var(--SampleOverlayOpacity);
	--TextLight: var(--SampleLightTextColor);
	--TextDark: var(--SampleDarkTextColor);
	--BtnMarginTop: var(--SampleBtnMarginTop);
	--BtnColumnGap: var(--SampleBtnColumnGap);
	--BtnRowGap: var(--SampleBtnRowGap);
}
/** ## end | section bulder set-up ## **/


/* Media Queries
================================================== */
/* ## min width ## */
@media only screen and (min-width: 481px) {
}

@media only screen and (min-width: 576px) { /* .col-sm- */
}

@media only screen and (min-width: 768px) { /* .col-md- */
}

@media only screen and (min-width: 992px) { /* .col-lg- */
}

@media only screen and (min-width: 1200px) { /* .col-xl- */
}

@media only screen and (min-width: 1400px) { /* .col-xxl- */
}

@media only screen and (min-width: 1700px) {
}

/* ## max width & min+max width ## */
@media only screen and (max-width: 1699px) {
}

@media only screen and (min-width: 1400px) and (max-width: 1699px) {
}

@media only screen and (max-width: 1399px) {
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
}

@media only screen and (max-width: 1199px) {
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

@media only screen and (max-width: 991px) {
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
}

@media only screen and (max-width: 767px) {
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
}

@media only screen and (max-width: 575px) { /* .col- */
}

@media only screen and (min-width: 481px) and (max-width: 575px) {
}

@media only screen and (max-width: 480px){
}

/* ## for print ## */
@media print {
}

/* no CSS beyond this point */