@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist.otf") format("opentype");
}
@font-face {
  font-family: "Lumina";
  src: url("../fonts/Lumina.otf") format("opentype");
}

/* ==========================================================================
   Peace of Mind — pomapp.com

   The homepage is one continuous scroll-scrubbed GSAP timeline (see
   assets/js/script.js). Two consequences for anyone editing this file:

   1. Many rules below set `opacity: 0` and a `transform` offset. Those are
      NOT mistakes and NOT hidden elements — they are the START state that
      GSAP animates away from as you scroll. Delete one and the element will
      simply sit there, unanimated. Search "GSAP start state" below.

   2. Sections are numbered 1-8 in scroll order and tell one story: a book
      falling open under a bright sky, and closing on a wreath in a winter
      field. The palette dries out and cools on purpose as you descend.
   ========================================================================== */

:root {
	/* Brand palette. These are the only colours the site is allowed to use. */
	--pom-violet:  #6540FB;  /* primary CTA / links */
	--pom-navy:    #0D3554;  /* headings */
	--pom-slate:   #174568;  /* body copy */
	--pom-red:     #F64747;  /* decorative shapes only */
	--pom-cream:   #FFE4C9;  /* testimonial tag background */
	--pom-olive:   #BAAB41;  /* footer / the closing winter field */
	--pom-white:   #FFFFFF;
	--pom-black:   #000000;

	/* Type */
	--pom-font-display: 'Lumina', serif;      /* headings */
	--pom-font-body:    'Geist', sans-serif;  /* everything else */

	/* Shape */
	--pom-radius-btn:   6px;
	--pom-radius-input: 10px;
	--pom-radius-card:  15px;
	--pom-radius-pill:  50px;

	--pom-shadow-card: 3px 3px 8px rgba(0, 0, 0, .35);
}


/* ---------- Reset and base ------------------------------------------------ */
*{ box-sizing: border-box; outline: none; margin: 0; padding: 0; }

svg:not(:root){ overflow: visible; }

body{
	font-family: var(--pom-font-body);
	color: var(--pom-slate);
	position: relative;
	background: url(../img/bg.svg) repeat-x center;
	overflow-x: hidden;
}

.skip-link.screen-reader-text{ display: none!important; }

main>section{
	position: relative;
	overflow: hidden;
}

/* ---------- Layout helpers ------------------------------------------------ */
.pom-flex-break{
	flex-basis: 100%;
	height: 0;
}

/* ---------- Shared components --------------------------------------------- */
.pom-btn{
	background: var(--pom-violet);
	color: var(--pom-white);
	border: none;
	border-radius: var(--pom-radius-btn);
	font-size: 24px;
	font-weight: 500;
	padding: 18px 36px;
	line-height: 1em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.pom-sec-container{
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

/* ---------- Hero sky — drifting clouds behind section 1 ------------------- */
#pom-home-clouds{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 1300px;
	overflow-x: hidden;
	background: url(../img/section-1-bg.webp?v=2) no-repeat;
	background-size: cover;
	background-position: center top;
	background-blend-mode: screen;
}


#pom-home-clouds > div {
    position: absolute;
    z-index: 1;
    aspect-ratio: 1;
    animation-fill-mode: forwards;
    background: url(../img/cloud-type-1.svg) no-repeat center / contain;
    filter: blur(2px) drop-shadow(1px 1px 4px var(--pom-white));
    opacity: 0;
}

#pom-home-clouds > div.cloud-type-2 {
	width: min(7%, 160px);
    background: url(../img/cloud-type-2.svg) no-repeat center / contain;
}



#pom-home-sec-1,
#pom-home-sec-2{
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;	
}


main>section>.pom-sec-container{
	min-height: 1110px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	overflow-x: hidden;
}

main>section>.pom-sec-container>div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}


/* ---------- Header and navigation ----------------------------------------- */
header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
	padding: 50px 15px 15px;
	z-index: 99;
	transition: all .3s ease-in;
	background: rgba(255, 255, 255, .15);
}

header.sticky{
	padding-top: 15px;
}

header>div{
	max-width: 1280px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}

#pom-logo{
	margin-right: 60px;
}

header nav{
	display: flex;
	justify-content: space-between;
	flex: 1;
}

header ul{
	display: flex;
	justify-content: space-between;
	list-style: none;
}

header ul li{
	margin-right: 40px;
}

header ul li:last-of-type{
	margin-right: 0;
}

header ul li a{
	color: var(--pom-violet);
	border: 1px solid var(--pom-violet);
	padding: 10px 20px;
	min-width: 120px;
	text-decoration: none;
	border-radius: var(--pom-radius-input);
	cursor: pointer;
	display: block;
	text-align: center;
	transition: all .3s ease-in;
}

header ul li a:hover{
	background: rgb(101, 64, 251, 0.1);
	text-decoration: none;
}

header nav>div:last-of-type ul li:last-of-type a{
	color: var(--pom-white);
	background: var(--pom-violet);
}

header nav>div:last-of-type ul li:last-of-type a:hover{
	background: transparent;
}



#pom-menu-toggler{
	display: none;
	border: 1px solid var(--pom-violet);
	border-radius: var(--pom-radius-btn);
	background: transparent url(../img/icon-menu.svg) no-repeat center / contain;
	padding: 20px;
	box-shadow: none;
	outline: none;
	cursor: pointer;
}

#pom-home-sec-1-1,
/* ---------- Section 1 — "Build, Plan, Manage For Future Legacy" ----------- */
#pom-home-sec-1-2{ width: 50% }

#pom-home-sec-1 h1{
	font-family: var(--pom-font-display);
	font-weight: 600;
	font-size: 100px;
	opacity: 0;
	transform: translateX(500px);
}

#pom-home-sec-1 h2{
	font-size: 28px;
	opacity: 0;
	transform: translateX(500px);
}

#pom-home-sec-1 .pom-cta-list{
	margin-top: 90px;
	list-style: none;
	display: flex;
	justify-content: start;
	align-items: center;
	opacity: 0;
	transform: translateY(300px);
}

#pom-home-sec-1 .pom-cta-list li:nth-child(2){
	padding: 0 18px;
}

#pom-home-sec-1 .pom-sec-container{ overflow: hidden; }

#pom-book{
	transform: scale(5) translateX(-25%);
	overflow: hidden;
}

#section-1-book-svg{
	max-width: 100%;
	overflow: hidden;
}

#section-1-book-svg>g{ overflow: hidden; }


/* ---------- Section 2 — paper planes and the sandglass -------------------- */
#pom-home-sec-2 #pom-home-planes{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(../img/section-2-path-with-plane.webp) no-repeat;
    background-position-y: 45%;
    background-position-x: 40%;
}

#pom-home-sec-2 #pom-home-planes .plane{
	position: absolute;
}

#pom-home-plane-1 img{
	width: 50px;
}

#pom-home-plane-2 img{
	width: 75px;
}

#pom-home-planes div.particle{
	position: absolute;
	z-index: 1;
	background: rgba(255, 255, 255, 0.5);
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

#pom-home-planes div.trail {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(0, 0, 0, .1);
    border-radius: 50%;
    opacity: 1;
    transform-origin: center;
}


#pom-home-sec-2{
	background: url(../img/section-2-bg.png) no-repeat bottom / 100%;
}

#pom-home-sec-2 .pom-sec-container{
	min-height: 1300px;
	align-items: start;
	padding-top: 130px;
}


#pom-sandglass{
	position: relative;
	width: 400px;
	aspect-ratio: 1;
	margin-left: 120px;
	transform: translateX(250px) rotate(90deg);
	background: url(../img/section-2-sandglass.webp?v=2) no-repeat center / contain;
}

#pom-sandglass>div{
	aspect-ratio: 1;
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: -1;
	transform-origin: center;
	opacity: 0;
}

#pom-sandglass #pom-sandglass-mic{
	width: 115px;
	background: url(../img/section-2-icon-mic.svg?v=2) no-repeat center / contain;
}

#pom-sandglass #pom-sandglass-headset{
	width: 105px;
	background: url(../img/section-2-icon-headset.svg) no-repeat center / contain;
}

#pom-sandglass #pom-sandglass-sandglass{
	z-index: 1;
	width: 130px;
	background: url(../img/section-2-icon-sandglass.svg) no-repeat center / contain;
}

#pom-sandglass #pom-sandglass-video{
	width: 88px;
	background: url(../img/section-2-icon-video.svg) no-repeat center / contain;
}

#pom-home-sec-2 #pom-paperplane-dashed{ display: none; margin-top: -100px; margin-bottom: 30px; margin-right: 0; margin-left: auto; }
#pom-home-sec-2 .pom-sec-container p{
	font-size: 28px;
	color: var(--pom-slate);
	font-weight: 600;
	max-width: 430px;
	position: relative;
	opacity: 0;
	transform: translateX(200px);
}

#pom-home-sec-2 .pom-sec-container p img{
	position: absolute;
	top: -50%;
	left: 30%;
	z-index: -1;
	width: 150px;
	animation: pulsate 4s ease-in-out infinite;
}


#pom-home-sec-2 .pom-sec-container #pom-side-photos{
	position: relative;
	width: 100%;
	aspect-ratio: 1;
}

#pom-home-sec-2 .pom-sec-container #pom-side-photos img{
	position: absolute;
	top: 50%;
	right: 0;
	opacity: 0;
	transform: scale(2.0) rotate(-45deg);
}

#pom-home-sec-2 .pom-sec-container #pom-side-photos img:last-of-type{
	right: 67%;
	top: 71%;
}






/* ---------- Section 3 — "Your families digital treasure chest" ------------ */
#pom-home-sec-3 .pom-sec-container{
	min-height: 600px;
	overflow: visible;
}

#pom-home-sec-3 #pom-home-box-particles{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}


#pom-home-box-particles div{
	position: absolute;
	z-index: 1;
	background: var(--pom-white);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	filter: blur(3px);
}

#pom-home-sec-3 h2{
	font-family: var(--pom-font-display);
	font-size: 55px;
	max-width: 500px;
	opacity: 0;
	transform: scale(0.5);
}

#pom-home-sec-3 ul{
	list-style: none;
	margin: 50px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px 100px;
}

#pom-home-sec-3 ul li{
	font-size: 28px;
	font-weight: 600;
	display: flex;
	align-items: end;
	opacity: 0;
	transform: translateY(50px);
}

#pom-home-sec-3 .pom-side-box{
	position: relative;
	margin-top: 85px;
}

#section-3-box-svg-lid-1,
#section-3-box-svg-lid-2{
	transform: translateY(-150px);
}

.section-3-box-svg-lid-trail{ transform: translateY(-400px); }




/* ---------- Section 4 — floating message / audio / video cards ------------ */
#pom-home-sec-4{
	background-image: url(../img/section-4-bg.webp?v=3);
	background-repeat: no-repeat;
	background-position: left top;
	position: relative;
	min-height: 900px;
	margin-top: -80px;
}

#pom-home-sec-4 .pom-side-posts{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
}

#pom-home-sec-4 .pom-side-posts>div{
	position: absolute;
	z-index: 1;
	transform: translateX(-50vw) scale(0);
	opacity: 0;
}

#pom-home-sec-4 .pom-side-posts>div:after{
	content: none;
	display: block;
	position: absolute;
	top: 45%;
	left: 75%;
	transform: translate(-50%, -50%);
	height: 50px;
	width: 50px;
	z-index: 1;
	background: url(../img/icon-pulse.svg) no-repeat center / contain;
	animation: pulsate 3s ease-in-out infinite;
	filter: invert(1) drop-shadow(1px 1px 1px purple);
}

#pom-home-sec-4 .pom-side-posts #pom-side-posts-audio{
	top: 0px;
	left: min(22%, 300px);
	width: min(20%, 300px);
	aspect-ratio: 0.5;
	background: url(../img/section-4-audio.webp) no-repeat center / contain;
}


#pom-home-sec-4 .pom-side-posts #pom-side-posts-message{
	top: 35%;
	left: min(80%, 900px);
	width: min(20%, 150px);
	aspect-ratio: 1;
	background: url(../img/section-4-message.webp) no-repeat center / contain;
}

#pom-home-sec-4 .pom-side-posts #pom-side-posts-video{
	top: 40%;
	left: min(60%, 700px);
	width: min(20%, 300px);
	aspect-ratio: 0.5;
	background: url(../img/section-4-video.webp) no-repeat center / contain;
}




/* ---------- Section 5 — "Chat and Track", balloon and track --------------- */
#pom-home-sec-5{
	background: url(../img/section-5-bg.webp?v=4) no-repeat bottom / 100%;
}

#pom-side-chat-track-bg{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.pom-side-chat-track-balloon{
	position: absolute;
	right: 25%;
	top: 50%;
	z-index: 1;
	width: 40px;
	height: 60px;
	background: url(../img/section-5-balloon.webp) no-repeat center / contain;
	animation: balloon 4s ease-in-out infinite;
}

#pom-side-chat-track-balloon-2{
	right: 30%;
	top: 60%;
	animation-delay: 1.3s;
}

#pom-side-chat-track-pin{
	position: absolute;
	bottom: 30px;
	left: 35%;
	width: 40px;
	height: 60px;
	z-index: 1;
	transform: translateY(-100px);
	opacity: 0;
}

#pom-side-chat-track-clouds{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

#pom-side-chat-track-clouds>img{
	position: absolute;
	z-index: 1;
	filter: drop-shadow(1px 1px 10px var(--pom-white));
	opacity: 0;
}

#pom-side-chat-track-cloud-1{
	bottom: 30%;
	left: 30%;
	transform: translateX(-300px);
}

#pom-side-chat-track-cloud-2{
	bottom: 32%;
	left: 60%;
	transform: translateX(-300px);
}

#pom-side-chat-track-cloud-3{
	bottom: 40%;
	left: 70%;
	transform: translateX(300px);
}

#pom-side-chat-track-cloud-4{
	top: 10%;
	left: 70%;
	transform: translateX(300px);
}

#pom-home-sec-5 .pom-sec-container{
	align-items: start;
}

#pom-home-sec-5 h2{
	font-size: 55px;
	font-family: var(--pom-font-display);
	margin-top: 195px;
	opacity: 0;
	transform: translateX(200px);
}

#pom-home-sec-5 p{
	max-width: 350px;
	font-size: 18px;
	color: var(--pom-navy);
	opacity: 0;
	transform: translateX(-200px);
	margin-top: 10px;
}

#pom-home-sec-5 #pom-side-chat-track{
	width: 100%;
	flex: 1;
	padding: 15px 15px 15px 0;
}

#pom-home-sec-5 #pom-side-chat{
	border-radius: var(--pom-radius-card);
	background: var(--pom-white);
	box-shadow: var(--pom-shadow-card);
	padding: 50px 15px;
	width: 100%;
	max-width: 370px;
	position: relative;
}

#pom-home-sec-5 .pom-sec-container>div:first-of-type{
	flex: 1;
}

#pom-home-sec-5 #pom-side-chat ul{
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
}

#pom-home-sec-5 #pom-side-chat ul li{
	height: 60px;
	margin-bottom: 20px;
	width: 100%;
	transform: scale(0);
}

#pom-home-sec-5 #pom-side-chat ul li:nth-child(odd){
	background: url(../img/section-5-chat-green.webp) no-repeat left / contain;
}

#pom-home-sec-5 #pom-side-chat ul li:nth-child(even){
	background: url(../img/section-5-chat-blue.webp) no-repeat right / contain;
}

#pom-home-sec-5 #pom-side-chat>img{
	position: absolute;
	z-index: 1;
}

#pom-home-sec-5 #pom-side-track{
	position: absolute;
	right: -66%;
	top: 50%;
	width: 100%;
	max-width: 350px;
	aspect-ratio: 0.4;
	z-index: -1;
	background: url(../img/section-5-navigation.webp) no-repeat center / contain;
	transform: translateY(-50%) translateX(-300px);
	opacity: 0;
}




/* ---------- Decorative circles and lines (sections 6-8) ------------------- */
.pom-shapes-bg{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.pom-shapes-bg .pom-shape-circle{
	position: absolute;
	z-index: 1;
	width: 15px;
	height: 15px;
	border-radius: var(--pom-radius-pill);
	border: 1px solid var(--pom-red);
}

.pom-shapes-bg .pom-shape-line{
	position: absolute;
	z-index: 1;
	height: 1px;
	background: var(--pom-red);
}

.pom-shapes-bg .pom-shape-line:after{
	content: '';
	position: absolute;
	top: 0;
	left: calc(100% + 20px);
	width: 50%;
	height: 1px;
	background: var(--pom-red);
}

.pom-shapes-bg .pom-shape-line.vertical:after{
	top: 20px;
	left: 0;
}


/* ---------- Section 6 — "We make it easy." security blocks ---------------- */
#pom-home-sec-6 .pom-sec-container{
	min-height: 800px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: visible;
}

#pom-home-sec-6 .pom-sec-container>div{
	flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#pom-home-sec-6 .pom-sec-container>div:last-of-type{
	justify-content: space-evenly;
}


#pom-security-block img{
	opacity: 0;
}

#pom-security-block #pom-security-block-1{
	transform: translateX(-200px);
}

#pom-security-block  #pom-security-block-2{
	transform: translateY(300px);
}

#pom-security-block #pom-security-block-3{
	transform: translateX(200px);
}


#pom-home-sec-6 p{
	font-size: 28px;
	color: var(--pom-navy);
	max-width: 560px;
	opacity: 0;
	transform: translateX(-200px);
}

#pom-home-sec-6 h2{
	font-size: 55px;
	font-family: var(--pom-font-display);
	color: var(--pom-navy);
	margin-top: 25px;
	opacity: 0;
	transform: translateX(200px);
}

#pom-home-sec-6 svg{
	transform: scale(0);
	height: 450px;
}


#pom-home-sec-6 #pom-security-block{
	display: flex;
	flex-direction: row;
}


/* ---------- Section 7 — "Follow us on social media" ----------------------- */
#pom-home-sec-7 .pom-sec-container{
	min-height: 800px;
}

#pom-home-sec-7 .pom-btn{
	background-image: url(../img/icon-instagram.svg);
	background-repeat: no-repeat;
	background-size: 40px;
	background-position-x: 18px;
	background-position-y: 50%;
	padding-left: 75px;
	padding-right: 20px;
	margin-top: 35px;
}

#pom-home-sec-7 h2{
	font-size: 55px;
	font-family: var(--pom-font-display);
	color: var(--pom-navy);
	max-width: 335px;
	transform: translateX(200px);
	opacity: 0;
}

#pom-home-sec-7 .pom-btn{
	transform: translateY(200px);
	opacity: 0;
}

#pom-home-sec-7 svg{
	transform: scale(0) rotate(45deg);
	opacity: 0;
}


/* ---------- Section 8 — "People Love PoM" testimonial carousel ------------ */
#pom-home-testimonials-particles{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transform: translateY(-300px);
}


#pom-home-testimonials-particles div{
	position: absolute;
	z-index: 1;
	background: var(--pom-white);
	width: 5px;
	height: 30px;
	filter: blur(1px);
}

#pom-home-sec-8 .pom-sec-container{
	min-height: 800px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: visible;
}


#pom-home-sec-8 h2{
	font-size: 55px;
	font-family: var(--pom-font-display);
	color: var(--pom-navy);
	width: 100%;
	text-align: center;
	margin-bottom: 0px;
	opacity: 0;
	transform: translateY(-200px);
}



#pom-home-testimonials{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	padding: 30px;
}

#pom-home-testimonials.owl-carousel.owl-drag .owl-item{
	padding: 50px 0;
	display: flex;
  justify-content: center;
  align-items: center;
}

#pom-home-testimonials.owl-carousel.owl-drag .owl-item:nth-child(even) .pom-home-testimonial{
	transform: rotate(1deg);
}

#pom-home-testimonials.owl-carousel.owl-drag .owl-item:nth-child(odd) .pom-home-testimonial{
	transform: rotate(-2deg);
}

#pom-home-testimonials .owl-nav{
	position: absolute;
	top: calc(50% - 30px);
	left: 0;
	width: 100%;
	z-index: 10000;
}

#pom-home-testimonials.owl-carousel .owl-nav button.owl-prev,
#pom-home-testimonials.owl-carousel .owl-nav button.owl-next{
	font-size: 40px;
	color: var(--pom-violet);
	font-weight: 900;
	position: absolute;
	transform: none;
	left: 0;
}

#pom-home-testimonials.owl-carousel .owl-nav button.owl-next{
	left: calc(100% - 15px);
}


.pom-home-testimonial{
	padding: 15px;
	background: var(--pom-white);
	border-radius: var(--pom-radius-card);
	box-shadow: var(--pom-shadow-card);
	max-width: 250px;
	color: var(--pom-black);
	text-align: center;
	opacity: 1;
}

.pom-home-testimonial div{
	position: relative;
	border-radius: var(--pom-radius-card);
	background: var(--pom-cream);
	width: 100%;
	aspect-ratio: 1;
}

.pom-home-testimonial div img{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}


.pom-home-testimonial h4{
	font-size: 18px;
	font-weight: 600;
	margin: 10px;
}

.pom-home-testimonial p{
	font-size: 11px;
	opacity: 0.8;
}

.pom-home-testimonial ul{
	display: flex;
	list-style: none;
	padding: 0;
	margin: 10px auto 25px;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

.pom-home-testimonial ul li{
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background: url(../img/star.webp) no-repeat center / contain;
}

.pom-home-testimonial label{
	font-size: 12px;
	color: var(--pom-slate);	
}



/* ---------- Footer — the winter field ------------------------------------- */
footer{
	position: relative;
	min-height: 1100px;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	color: var(--pom-white);
	padding-bottom: 15px;
	overflow: hidden;
}

#footer-bg-left{
	position: absolute;
	width: 50%;
	aspect-ratio: 1;
	z-index: -2;
	bottom: 35%;
	left: 0;
	transform: translate(-30%, 30%);
	background: url(../img/footer-left.webp) no-repeat bottom / 100%;
	background-position: left bottom;
}

#footer-bg-right{
	position: absolute;
	width: 50%;
	aspect-ratio: 1;
	z-index: -2;
	bottom: 35%;
	right: 0;
	transform: translate(30%, 30%);
	background: url(../img/footer-right.webp) no-repeat bottom / 100%;
	background-position: right bottom;
}

#footer-bg-middle{
	position: absolute;
	width: 100%;
	aspect-ratio: 1;
	z-index: -1;
	bottom: 0;
	transform: translateY(-20%);
	right: 0;
	background: url(../img/footer-middle.webp) no-repeat bottom / 100%;
	background-position: center bottom;
}

footer .pom-footer-container{
	display: flex;
	max-width: 1280px;
	width: 100%;
    justify-content: space-between;
    align-items: center;
}

footer .pom-footer-container>section:nth-child(2){
	text-align: center;
}

footer .pom-footer-container>section:nth-child(2)>section{
	margin-bottom: 15px;
}

footer .pom-footer-nav{
	margin: 0;
	padding: 0;
	list-style: none;
}

footer .pom-footer-nav li{
	margin-bottom: 15px;
}

footer .pom-footer-nav li a,
footer .pom-footer-container>section:nth-child(2)>section a{
	font-size: 14px;
	color: var(--pom-white);
	text-decoration: none;
	cursor: pointer;
}

footer .pom-social-links,
footer .pom-markets-links{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	text-align: center;
}

footer .pom-social-links li{
	margin-right: 20px;
}

footer .pom-social-links li:last-of-type{ margin-right: 0 }

footer .pom-social-links img{
	max-width: 28px;
}

footer .pom-markets-links li{ margin: 0 10px; }

footer .pom-copyright{
	display: flex;
	justify-content: start;
	align-items: center;
}

footer .pom-copyright img{ margin-right: 5px; }

/* ---------- Keyframes ----------------------------------------------------- */
@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1);
  }
  40% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(1.15);
  }
  80% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes balloon {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px); /* Move up by 30px */
    }
    100% {
        transform: translateY(0); /* Return to original position */
    }
}

/* ---------- Responsive — 1280 / 1024 / 768 / 480 -------------------------- */
@media (max-width: 1280px){

	.pom-sec-container,
	footer .pom-footer-container{
		padding: 0 15px;
	}

}


@media (max-width: 1024px){

	body{
		background: url(../img/bg-mobile.svg) repeat-x center/cover;
	}

	main>section>.pom-sec-container{ min-height: 800px; }

	header{ padding-top: 15px; }
	header nav{ display: none; }
	header nav.active{
		display: block;
		position: fixed;
		z-index: 999;
		top: 85px;
		right: 15px;
		width: 100%;
		max-width: 300px;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0px 0px 3px var(--pom-black);
		padding: 15px;
		border-radius: var(--pom-radius-card);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	header nav.active div{ width: 100%; }

	header nav.active ul{
		flex-direction: column;
	}

	header nav.active ul li{
		margin-right: 0;
		margin-bottom: 30px;
	}

	header nav ~ #pom-menu-toggler{
		display: block;
	}

	header nav.active ~ #pom-menu-toggler{
		background: url('../img/icon-close.svg') no-repeat center / contain;
	}

	#pom-logo img{ max-height: 50px; }

	#pom-home-sec-1-1,
	#pom-home-sec-1-2{ width: 100% }

	#pom-home-sec-1{ padding-top: 80px; }

	#pom-home-sec-1 .pom-sec-container{
		min-height: 750px;
		flex-direction: column;
		justify-content: start;
		align-content: center;
	}

	#pom-home-sec-1{ text-align: center; }
	#pom-home-sec-1 h1{ font-size: 42px; width: 100%; margin-top: 50px; }
	#pom-home-sec-1 h2{ font-size: 12px; width: 100%;  }

	.pom-btn { font-size: 11px; padding: 5px 13px; }

	#pom-home-sec-1 .pom-cta-list{ margin-top: 22px; width: 100%; justify-content: center; }
	#pom-home-sec-1 .pom-cta-list img{ max-width: 14px; }
	#pom-home-sec-1 .pom-cta-list li{  }

	#pom-home-sec-1 #pom-book{ display: inline-block; margin: 0 auto; }
	#pom-home-sec-1 #pom-book svg{ max-width: 288px; }

	#pom-home-sec-2 .pom-sec-container{
		min-height: 800px;
		flex-direction: column-reverse;
		overflow: visible;
		justify-content: start;
		align-items: center;
	}


	#pom-home-sec-2 #pom-home-planes .plane{}
	#pom-home-plane-1 img{ width: 30px; }
	#pom-home-plane-2 img{ width: 45px; }

	#pom-home-sec-2 #pom-home-planes{
		background-image: url(../img/section-2-path-with-plane-mobile.webp);
		background-size: initial;
		background-position: 30% 90%;
	}

	#pom-sandglass{	width: 180px; margin: 90px auto 0px; }

	#pom-sandglass #pom-sandglass-mic{ width: 52px; }
	#pom-sandglass #pom-sandglass-headset{ width: 48px; }
	#pom-sandglass #pom-sandglass-sandglass{ width: 58px; }
	#pom-sandglass #pom-sandglass-video{ width: 40px; }
	

	#pom-home-sec-2 #pom-paperplane-dashed{ display: block; }
	#pom-home-sec-2 .pom-sec-container p{
		font-size: 12px;
		text-align: center;
		margin: 0px auto 0;
		max-width: 210px;
	}

	#pom-home-sec-2 .pom-sec-container p img{
		display: none;
	}

	#pom-home-sec-2 .pom-sec-container #pom-side-photos{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	#pom-home-sec-2 .pom-sec-container #pom-side-photos img:first-of-type{
		top: 60px;
		right: -30px;
		width: 130px;
	}

	#pom-home-sec-2 .pom-sec-container #pom-side-photos img:last-of-type{
		width: 65px;
		top: unset;
		right: unset;
		left: 0;
		bottom: -100px;
	}

	#pom-home-sec-3 .pom-sec-container{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#pom-home-sec-3 .pom-side-box{ margin-top: 0; }
	#pom-home-sec-3 svg{ max-width: 180px; }
	#pom-home-sec-3 h2{
		font-size: 24px;
		text-align: center;
		margin-top: 80px;
	}

	#pom-home-sec-3 ul{
		gap: 15px;
		width: 100%;
		margin-top: 25px;
	}

	#pom-home-sec-3 ul li{
		font-size: 12px;
		justify-content: center;
	}

	#pom-home-sec-3 ul li img{ max-width: 24px; }

	#pom-home-sec-4{
		background-size: contain;
		background-position-y: top;
		min-height: 400px;
	}

	#pom-home-sec-4 .pom-side-posts>div:after{
		width: 30px;
		height: 30px;
	}

	#pom-home-sec-4 .pom-side-posts #pom-side-posts-audio{
		top: 100px;
    left: 150px;
    width: 85px;
    aspect-ratio: 1;
	}

	#pom-home-sec-4 .pom-side-posts #pom-side-posts-video{
		top: 30px;
    left: 200px;
    width: 70px;
    aspect-ratio: 1;
	}

	#pom-home-sec-4 .pom-side-posts #pom-side-posts-message { display: none; }

	#pom-home-sec-5 .pom-sec-container{
		flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    min-height: 550px;
	}

	#pom-home-sec-5 #pom-side-chat-track{
		width: 150px;
		padding: 0;
		margin-left: -130px;
	}

	#pom-home-sec-5 #pom-side-track{ width: 130px; }

	#pom-home-sec-5 #pom-side-chat{ padding: 15px; }
	#pom-home-sec-5 #pom-side-chat ul li{
		height: 25px;
		margin-bottom: 12px;
	}

	#pom-home-sec-5 #pom-side-chat>img{ width: 24px; }

	#pom-home-sec-5 h2{
		font-size: 24px;
		margin-top: 0;
		width: 100%;
		text-align: center;
	}

	#pom-home-sec-5 p{
		font-size: 10px;
		text-align: center;
		margin-bottom: 20px;
		max-width: 205px;
	}

	.pom-side-chat-track-balloon{ width: 12px; height: 18px; }
	#pom-side-chat-track-pin{ width: 14px; height: 20px; }


	#pom-home-sec-6{ margin-top: 0px; }
	#pom-section-home-6-bg{ display: none; }

	#pom-home-sec-6 .pom-sec-container{ justify-content: start; min-height: 700px; padding-top: 80px; }

	#pom-home-sec-6 .pom-sec-container>div{
		flex-direction: column;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	#pom-home-sec-6 p{ font-size: 10px; max-width: 204px; }
	#pom-home-sec-6 h2{ font-size: 20px; margin-top: 10px; margin-bottom: 32px;}
	#pom-home-sec-6 svg{ height: 205px; }

	#pom-security-block #pom-security-block-1{ width: 67px; }
	#pom-security-block #pom-security-block-2{
		margin-top: -120px;
		width: 70px;
	}

	#pom-security-block #pom-security-block-3{ width: 50px; }

	#pom-home-sec-7 .pom-sec-container{
		min-height: 400px;
		flex-direction: column;
		justify-content: start;
		align-items: center;
	}

	#pom-home-sec-7 h2{
		text-align: center;
		font-size: 18px;
	}

	#pom-home-sec-7 .pom-btn{
		margin: 20px auto 25px;
		padding: 8px 8px 8px 30px;
		background-size: 15px;
		background-position-x: 10px;
	}

	#pom-home-sec-7 svg{
	  max-width: 270px;
    max-height: 200px;
  }
	
	#pom-home-sec-8 .pom-sec-container{ min-height: 400px; }
	#pom-home-sec-8 h2{ font-size: 20px; }

	.pom-home-testimonial{ display: flex; align-items: center }
	.pom-home-testimonial>div{ width: 60px; height: 60px; aspect-ratio: 1; }
	.pom-home-testimonial>div>img{ max-width: 60px; }
	.pom-home-testimonial h4{ font-size:10px; margin: 4px; }
	.pom-home-testimonial p,
	.pom-home-testimonial label{ font-size: 8px; }
	.pom-home-testimonial ul { margin: 4px auto 0; }
	.pom-home-testimonial ul li{ margin: 0; width: 14px; height: 14px; }

	footer{
		min-height: 700px;
		background: var(--pom-olive);
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, var(--pom-olive) 20%);
		overflow: visible;
	}

	footer .pom-footer-container{
		flex-direction: column;
		justify-content: end;
		align-items: center;
		text-align: center;
		z-index: 10;
		min-height: 80vw;
	}

	#footer-bg-left,
	#footer-bg-right{
		display: none;
	}

	#footer-bg-middle{
		bottom: unset;
		top: 0%;
		z-index: 1;
		aspect-ratio: auto;
		min-height: 80vw;
		background-image: url(../img/footer-full.webp);
		background-size: 100%;
		background-position: top center;
	}

	.pom-markets-links li a img{ width: 150px; }

}

@media (max-width: 768px){

}

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