#delfis-promo {

	--section-height: 70rem; 
	--section-mini-height: 50rem;
	--section-half-height: 35rem;
	--section-big-height: 80rem;

	font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


	@media (width <= 992px) {
		--section-height: 65rem; 
	}

	.promo-section {
		min-height: var(--section-height);
	}
	.promo-section .container {
		min-height: var(--section-height);
	}
	.promo-section .img-col,
	.promo-section .text-col {
		min-height: var(--section-height);
	}
	.promo-section .full-height {
		min-height: var(--section-height);
	}
	.promo-section .img-col,
	.promo-section .text-col {
		min-height: var(--section-height);
	}

	.promo-section.big-height {
		min-height: var(--section-big-height);
		
		.container {
			min-height: var(--section-big-height);
		}
		.full-height {
			min-height: var(--section-big-height);
		}
		.img-col, .text-col {
			min-height: var(--section-big-height);
		}
	}

	.promo-section.mini-height {
		min-height: var(--section-mini-height);
		
		.container {
			min-height: var(--section-mini-height);
		}
		.full-height {
			min-height: var(--section-mini-height);
		}
		.img-col, .text-col {
			min-height: var(--section-mini-height);
		}
	}

	.promo-section.half-height {
		min-height: var(--section-half-height);
		
		.container {
			min-height: var(--section-half-height);
		}
		.full-height {
			min-height: var(--section-half-height);
		}
		.img-col, .text-col {
			min-height: var(--section-half-height);
		}
	}

	.promo-section {
		background-size: 2560px;
	}

	.promo-section.bg-light {
		background-color: #dbeefc!important;
	}
	.promo-section.bg-dark {
		background-color: hsl(221, 70%, 15%)!important;
	}


	.text-col, .text-col-short {
		font-size: 1.25rem;
		z-index: 150;
	}

	.vertical-center-stack {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.section-title {
		text-transform: uppercase!important;
		font-weight: normal;
		color: #1171b2;
	}
	.section-title.magenta {
		color: #b6228d;
	}
	.section-title.yellow {
		color: #e89c32;
	}

	.promo-section h2 {
		font-weight: 500;
	}

}

.btn-light-cyan {
	--bs-btn-color: #000;
	--bs-btn-bg: #95D9FF;
	--bs-btn-border-color: #95D9FF;
	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: #31d2f2;
	--bs-btn-hover-border-color: #25cff2;
	--bs-btn-focus-shadow-rgb: 11, 172, 204;
	--bs-btn-active-color: #000;
	--bs-btn-active-bg: #3dd5f3;
	--bs-btn-active-border-color: #25cff2;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: #95D9FF;
	--bs-btn-disabled-border-color: #95D9FF;
}

#hero.promo-section {
	background: url(./img/vsbook-delfis-hero-back-2560.jpg) center bottom no-repeat;
}
#hero-img {
	position: absolute;
	left: -6rem;
	bottom: -6.5rem;
	z-index: 50;
}
#about-img {
	position: absolute;
	right: 0;
	bottom: 0;
}
#for-who.promo-section {
	background: url(./img/vsbook-delfis-forwho-background-2560.jpg) center bottom no-repeat;
}

#for-who article p {
	padding-inline-end: 5%;
}

#for-who #forwho-img {
	position: absolute;
	left: -2.25rem;
	bottom: 0;
}

#whats-inside {
	ul.text-list {
		width: 70%;
		margin: 0 auto;

		list-style-type: none; 
		padding-left: 1.25rem;

		font-size: 1.25rem;
		line-height: 1.25;

		li {
			margin-bottom: 0.5rem;
			padding-inline-start: 2.5rem;
			padding-block: 0.5rem;

			background-image: url('./img/pearl-bullet-20.png');
			background-repeat: no-repeat;
			background-position: left center;
			background-size: 1.25rem 1.25rem;

		}
	}
}

#reasons-to-buy {
	ol.striped-list {
		width: 70%;
		margin: 0 auto;

		list-style-type: none; 
		padding-left: 1.25rem;

		font-size: 1.25rem;
		line-height: 1.25;

		li {
			margin-bottom: 1rem;
			padding-inline: 7.5%;
			padding-block: 0.5rem;

			background-image: linear-gradient(to top, #e7c9ff 0%, #dadfff 100%);
			border-radius: 0.5rem;

		}

	}
}

#bottom-slogan {
	div.narrow-text-column {
		width: 60%;
		margin: 0 auto;

		font-size: 1.25rem;
		line-height: 1.5;
	}
}

#bottom-final {

	background: url(./img/vsbook-delfis-bottom-back-2560.jpg) center center no-repeat;

	div.narrow-text-column {
		width: 60%;
		margin: 0 auto;

		font-size: 1.25rem;
		line-height: 1.5;
	}
}

.floating-picture {
	position: absolute;
	z-index: 100;
}
.floating-picture.side-elements {
	position: absolute;
	z-index: 50;
}

#inside-tortles {
	bottom: -6.0rem;
	right: 70%;
}

#inside-group-fishes {
	top: 1.5rem;
	right: 90%;
}

#inside-stray-fishes {
	top: 4.5rem;
	left: 85%;
}

#bottom-slogan-dolphin {
	bottom: 2rem;
	left: 80%;
	width: 50%;
}

#bottom-seaweeds-left {
	bottom: -2rem;
	left: 0;
	width: 25%;
}

#reasons-seaweeds-right {
	bottom: -5rem;
	right: 0;
	width: 9%;
}

#about-seaweeds-right {
	bottom: 0rem;
	right: 0;
	width: 17%;
}


@media (width <= 1920px) {
	#about-seaweeds-right {
		width: 15%;
	}

}

@media (width <= 1600px) {
	#about-seaweeds-right {
		width: 12%;
	}
	#reasons-seaweeds-right {
		width: 10%;
	}
	#hero-img {
		left: -9rem;
	}
}

@media (width <= 1400px) {
	#whats-inside ul.text-list {
		width: 82%;
	}
	#reasons-to-buy ol.striped-list {
		width: 82%;
	}
	
	#hero-img {
		left: -15rem;
	}
	#bottom-slogan {
		div.narrow-text-column {
			width: 75%;
		}
	}
	#bottom-final {
		div.narrow-text-column {
			width: 75%;
		}
	}


}
@media (width <= 1200px) {

	#delfis-promo {
		--section-height: 67.5rem;
	}
	#about-img {
		right: 0;
		top: 5em;
		width: 150%;
	}
			
	#whats-inside ul.text-list {
		width: 97%;
	}
	#reasons-to-buy ol.striped-list {
		width: 97%;
	}
	#hero-img {
		left: -20rem;
	}
	#for-who #forwho-img {
		left: -2.5rem;
		bottom: -3.5rem;
	}
	#bottom-slogan {
		div.narrow-text-column {
			width: 90%;
		}
	}

	#bottom-final {
		div.narrow-text-column {
			width: 90%;
		}
	}

	#bottom-seaweeds-left {
		bottom: -2rem;
		left: 0;
		width: 18%;
	}
	#bottom-slogan-dolphin {
		bottom: -1rem;
		left: 85%;
		width: 40%;
	}

	#inside-group-fishes {
		top: -2.5rem;
		right: 90%;
	}

	#inside-stray-fishes {
		top: -2.5rem;
		left: 85%;
	}


}
@media (width <= 992px) {

	#delfis-promo {
		--section-height: 40rem;
		--section-big-height: 70rem;
	}

	#whats-inside ul.text-list {
		width: 100%;
	}
	#reasons-to-buy ol.striped-list {
		width: 100%;
	}

	#bottom-slogan {
		div.narrow-text-column {
			width: 100%;
		}
	}
	#bottom-final {
		div.narrow-text-column {
			width: 100%;
		}
	}

	#hero-img {
		left: -2%;
		bottom: -3rem;
		width: 110%;
	}
	#about-img {
		right: 30%;
		top: 3em;
		width: 100%;
		bottom: unset;
		left: unset;
	}

	#for-who.promo-section {
		background-image: radial-gradient(  farthest-corner circle at 85% 50% in hsl, hsl(42 70% 98%) 20%, hsl(276 35% 83%) 75% 100% );
	}
	#for-who #forwho-img {
		left: -10%;
		bottom: -2rem;
		width: 130%;
	}

	#bottom-seaweeds-left {
		bottom: -2rem;
		left: 0;
		width: 15%;
	}



}
@media (width <= 768px) {

	#delfis-promo {
		--section-height: 38rem;
		--section-big-height: 70rem;
	}

	#delfis-promo .text-col, 
	#delfis-promo .text-col-short {
		font-size: 1.0625rem;
	}

	#delfis-promo #about-what .img-col {
		--section-height: 10rem;
	}


	#delfis-promo #whats-inside {
		ul.text-list {
			font-size: 1.0625rem;
		}
	}
	#delfis-promo #reasons-to-buy {
		ol.striped-list {
			font-size: 1.0625rem;
		}
	}
	#delfis-promo #bottom-slogan {
		div.narrow-text-column {
			font-size: 1.0625rem;
		}
	}
	#delfis-promo #bottom-final {
		div.narrow-text-column {
			font-size: 1.0625rem;
		}
	}

	#hero article {
		--bs-bg-opacity: 0.5;
	}

	#hero-img {
		left: -10%;
		bottom: -2.5rem;
		width: 113%;
	}
	#about-img {
		right: 80%;
		top: 1rem;
		width: 80%;
	}
	#delfis-promo #for-who {
		--section-big-height: 68rem;
	}
	#for-who #forwho-img {
		left: -20%;
		bottom: 0;
		width: 160%;
	}
	#bottom-logo-block img {
		width: 20%;
	}

	#about-seaweeds-right {
		width: 15%;
	}
	#reasons-seaweeds-right {
		width: 15%;
	}
	#bottom-seaweeds-left {
		bottom: -2rem;
		left: 0;
		width: 18%;
	}
	#bottom-slogan-dolphin {
		bottom: -1rem;
		left: 70%;
		width: 65%;
	}
	
}
@media (width <= 576px) {

	#delfis-promo {
		--section-height: 36rem;
		--section-big-height: 64rem;
	}

	#hero-img {
		left: -10%;
		bottom: -3rem;
		width: 120%;
	}

	#delfis-promo #hero-text-col {
		padding-inline: 0!important;
		margin-block: 0!important;
		justify-content: start;
	}

	#delfis-promo #hero-text-col article {
		padding-inline: 1.5rem!important;
		padding-block: 4rem!important;
		margin-top: 0!important;
		border-radius: 0!important;
		background-color: transparent!important;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 85%, rgba(0, 0, 0, 0) 100%);
	}

	#delfis-promo #for-who {
		--section-big-height: 66rem;
	}
	#bottom-seaweeds-left {
		bottom: -1.5rem;
		left: 0;
		width: 14%;
	}

	#delfis-promo #bottom-final .text-col {
		background-color: transparent!important;
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0) 100%);
	}

	#delfis-promo #bottom-final .narrow-text-column {
		background-color: transparent!important;
		border-radius: 0!important;
	}

	#inside-group-fishes {
		top: -4.5rem;
		right: 75%;
	}

	#inside-stray-fishes {
		top: -4.0rem;
		left: 80%;
	}

	#inside-tortles {
		bottom: -4.0rem;
		right: 75%;
	}


}

@media (width <= 420px) {

	#delfis-promo {
		--section-height: 30rem;
		--section-big-height: 58rem;
	}

	#hero-img {
		left: -17%;
		bottom: -2rem;
		width: 130%;
	}

	#delfis-promo #for-who {
		--section-big-height: 64rem;
	}


}






.gradient001 {
	background-image: linear-gradient(120deg, #bcd5fd 0%, #dbeefc 100%);
}
.gradient002 {
	background-image: linear-gradient(120deg, #c3d7fc 0%, #ddf3ff 100%);
}
.gradient003 {
	background-image: linear-gradient(120deg, #bcd5fd 0%, #dbeefc 100%);
}
.gradient005 {
	background: radial-gradient(ellipse at 50% 25%,#ddf4ff, #bbebfe, #8acbfc);
}
.gradient006 {
	background: radial-gradient(ellipse at 50% 25%,#e1f6ff, #c0edff, #bad5ff);
}
.gradient010 {
	background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
} 
.gradient016 {
	background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
} 
.gradient019 {
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
} 
.gradient030 {
	background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
} 
.gradient143 {
	background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
} 
.gradient094 {
	background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}