@media only screen and (max-width: 700px) {
	:root {
		--large-content-width: 300px;
	}
}

body {
	background-color: var(--black-color);
}

/* SECURITY - UPDATED FOR OVERLAY */

#security {
	background: rgba(0, 0, 0, 70%);
    backdrop-filter: blur(50px);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	color: var(--white-color);
	z-index: 99999; /* Very high z-index to cover everything */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Hide security overlay when verified */
#security.verified {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#security-content {
	display: flex;
	align-items: center;
	flex-direction: column;
}

#security-content img {
	width: 150px;
}

#security-content h4 {
	font-size: 14px;
	width: 175px;
	text-align: center;
	margin-top: 75px;
}

#security-buttons {
	margin-top: 65px;
	width: 250px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#security-buttons .primary-button-alt {
	width: 115px;
}

#disallowed-content {
	display: none;
	align-items: center;
	flex-direction: column;
}

#disallowed-content-logo {
	width: 150px;
}

#disallowed-content h4 {
	font-size: 14px;
	width: 175px;
	text-align: center;
	margin-top: 75px;
}

#disallowed-content .icon-button {
	border-color: var(--white-color);
	transform: rotate(180deg);
	margin-top: 65px;
}

@media only screen and (max-height: 568px) {
	#security-content img {
		display: none;
	}

	#security-content h4 {
		margin-top: 0px;
	}

	#disallowed-content-logo {
		display: none;
	}

	#disallowed-content h4 {
		margin-top: 0px;
	}
}
/* HOME TOP */
#home-top {
	/* background-color: var(--black-color); */
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	/* z-index: -3; */
	
}

.video-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}

.video-background video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
}


/* Default – desktop */
#hero-video-desktop {
    display: block;
}
#hero-video-mobile,
#hero-video-portrait {
    display: none;
}

/* hero 2  section */

#hero2-content h1{
width: 315px;
height: 267px;
opacity: 1;
font-family: Montserrat;
font-weight: 100;
font-style: Thin;
font-size: 64.89px;
line-height: 97%;
letter-spacing: 0%;
margin-bottom: -30px;
}
.hero2-description{
	width: 315px;
height: 248px;
}
#hero2-content p{
	font-family: Montserrat;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 130%;
letter-spacing: 0%;
margin-bottom: 1rem;
}
#hero2-content .pink-color{
	color: #FB0366;

}
#static-hero2{
    width: 100%;
    height: 2000px;
    background-color: var(--white-color);
 
}
#static-hero2 video{
position: sticky;
    top: -100px;
    object-position: center;
	margin: 0 auto;

}
#how-it-works-button {
    position: absolute;
    /* top: 27px; */
    left: 50.7%;
    transform: translateX(-50%);
    /* bottom: 41px; */
    margin-top: -46px;
}
#hero2-content{
    position: relative;
	margin-top: -950px;
    background: #FFD4E280;
    backdrop-filter: blur(44.44582748413086px);
    width: 435.569px;
    height: 600px;
    border-radius: 27.56px;
    color: black;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
	align-items: center;

}
@media (min-width: 1920px) {
#static-hero2 video {
 margin: 0 auto !important;
        object-position: center;
        width: 100%;
        background-color: rgb(255, 255, 255);
}	
#static-hero2 video{
 height: 1040px;
}
}
/* Portrait smartphones */
@media (max-width: 1279px) and (orientation: portrait) {
    #hero-video-desktop { display: none; }
    #hero-video-mobile { display: none; }
    #hero-video-portrait { display: block; }
	
}

/* Landscape smartphones */
@media (max-width: 768px) and (orientation: landscape) {
    #hero-video-desktop { display: none; }
    #hero-video-mobile { display: block; }
    #hero-video-portrait { display: none; }
	  /* .video-background video {
    object-fit: cover;
    width: 100%;
    height: 100%;
  } */

  /* #home-top {
    height: 100vh;
  }
  .video-background video {
    width: 100%;
    height: calc(var(--vh) * 100);
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
} */
}


/* Portrait tablets (iPad etc.) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    #hero-video-desktop { display: none; }
    #hero-video-mobile { display: none; }
    #hero-video-portrait { display: block; }
}

/* Landscape tablets */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    #hero-video-desktop { display: block; }
    #hero-video-mobile { display: none; }
    #hero-video-portrait { display: none; }
}

#home-top-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	z-index: 2;
}

#home-top-content img {
	/*margin-top: -100px;*/
}

#home-top-scroll-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	position: absolute;
	bottom: 100px;
}

#home-top-scroll {
	height: 195px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#home-top-scroll::before {
	content: '';
	position: absolute;
	left: calc(50% - 50px);
	right: 0;
	width: calc(100% - var(--tiny-padding));
	height: 125px;
	width: 100px;
	border-radius: var(--large-border-radius);
	/* box-shadow: inset 0px 0px 18px 30px var(--black-color); */
	pointer-events: none;
	background-color: transparent;
	z-index: 1;
}

@keyframes scrollArrowBounce {
	0% {
		transform: translateY(85px);
	}

	100% {
		transform: translateY(0px);
	}
}

#home-top-scroll img {
	animation: scrollArrowBounce 1.25s linear 0.5s infinite;
}

#home-top-scroll-container p {
	text-transform: uppercase;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 400;
	margin-top: 0px;
}

#fader-1 {
	transform: rotate(180deg);


}

#home-top-lines {
	margin-top: calc(100vh - 245px) !important;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#home-top-lines span {
	display: block;
	background-color: var(--white-color);
	width: 22.5px;
	height: 2px;
}

#fader-2 {
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 35%,
		rgba(0, 0, 0, 0) 100%
	);
}

@media only screen and (max-height: 568px) {
	#home-top {
		padding: 75px;
	}

	#fader-1 {
		display: none;
	}

	#home-top {
		height: auto;
	}

	#home-top-content img {
		margin-top: 0px;
	}

	#home-top-scroll-container {
		position: static;
		margin-top: 60px;
	}

	#home-top-lines {
		margin-top: 272px;
	}
}

/* HERO 1 SECTION */

#hero-1 {
	margin-bottom: -5px !important;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--white-color);
    display: flex;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(var(--secondary-layer-blur));

}

#hero-1 .hero-1-img {
	margin-top: -270px;
	/* margin-left: -1150px;
	width: 2350px; */
	transform: rotate(-13.5deg);
	/* make visibility hidden */
	visibility: hidden;
}

#hero-1-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#hero-1-left {
	width: 100%;
}

#hero-1-left-title {
	border-radius: var(--large-border-radius);
	padding: 44px;
	width: 890px ;
opacity: 1;
border-radius: 27.56px;
border: 2px solid white;

}

#hero-1-left-title-wrapper{
	width: 890px;
/* height: 290px; */
opacity: 1;
border-radius: 27.56px;
padding-left: 16px;
}
#hero-1-left-title h1 {
	font-weight: 100;
	line-height: 105%;
	width:336px;
	font-size: 64px !important;
}
.hero-almost-right{
	color: #FF62A1;
font-family: Montserrat;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 130%;
letter-spacing: 0%;

}
#hero-1-left-title-wrapper {
    position: relative;
    display: inline-block;
    padding: 16px; 
}

#hero-1-left-description {
	border-radius: var(--large-border-radius);
	margin-top: 41px;
	width: 540px;
padding-left: 17px;
}

#hero-1-left-description p {
	font-weight: 200;
	font-size: 15px;
	letter-spacing: 0.5px;
	font-family: Montserrat;
font-weight: 200;
font-style: Regular;
font-size: 14px;
line-height: 130%;
letter-spacing: 0%;
margin-bottom: 20px;
color: #FFFFFFB2;

}
p.hero-almost-right{
	color: #FF62A1  !important;
font-weight: 500 !important;
font-style: Medium;
font-size: 14px;
line-height: 130%;
letter-spacing: 0%;

}
#hero-1-left-description strong {
	font-weight: 350;
}

#hero-1-lines-right {
	width: calc(var(--large-content-width) - 415px);
	height: 385px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

#hero-1-lines-bottom {
	width: 100%;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	margin-top: 10px;
}
.secA-webm-div{
	    width: 902px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		background: transparent !important;
		top: 861px !important;

}
.secA-webm-div .primary-button-wrapper{
	margin-left: 0 !important;
	margin-top: 35px;
}
.secA-webm-div img{
	   -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
	position: absolute;
	z-index: 1;
	right: 10px;
	background: transparent !important;
	width: 400px;
height: 687px;
    bottom: 29px;
opacity: 1;

}
.primary-button p.hero-1-button{
	background-color: transparent !important;
	color: #ff00c8 !important;
	    width: 62px !important;
    height: 62px !important;
    padding: 0 !important;
    border: none !important;
	justify-content: center;
	align-items: center;
	display: flex;
}


 .change-img {
  background-color: #ffffff;
  position: absolute;
  top: -418px;
  right: 69px;
  z-index: 3;

  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    backdrop-filter 0.25s ease;
}

.change-img:hover {
  background: #ffffff33;
  backdrop-filter: blur(30px);
  transform: scale(1.22); /* 76 / 62 ≈ 1.22 */
}


.secA-webm-div .change-img p{
	font-family: Montserrat;
font-weight: 400;
font-style: Regular;
font-size: 32px;
line-height: 147%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;

}

.blurred-line {
	height: 11px;
	border-radius: 100px;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(var(--primary-layer-blur));

}

#hero-1 #extra-playful-button {
	margin-right: -465px;
}
	.mobile-secA-video{
		display: none;
	}
	.desktop-secA-video{
		display: flex;
	}

.secA-webm-div{
	height: 106px;
}


/* sticky element uses the variable */
.secA-webm-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
z-index: 2;
  top: 984px;

}
.change-img:hover, button.change-img:hover {
   background: #FFFFFF33 !important;
    padding: 0 !important;

}
.change-img.clicked {
    background-color: rgba(255, 255, 255, 0.2) !important;  
    transition: all 0.2s ease;
}


.secA-webm-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -200px;
  height: 106px;
}
@media only screen and (max-width: 1024px) {

	.primary-button {
        margin-left: 0;
    }
	#hero-1 #extra-playful-button{
		       left: 50%;
    transform: translateX(-50%);
	}
	.mobile-secA-video{
		display: flex;
	}
	.desktop-secA-video{
		display: none;
	}

}
@media only screen and (max-width: 992px) {
#hero-1 #extra-playful-button{
	        margin-top: 544px;
}
}
@media only screen and (max-width: 700px) {
	#hero-1-left-title h1 {
		font-size: 55px;
	}
}

@media only screen and (max-height: 568px) {
	#hero-1-content {
		position: relative;
	}

}
/* HERO 2 SECTION */

#hero-2 {
	background-color: var(--black-color);
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-top: 125px;
	height: 1500px;

}

#hero-2-white-block {
	height: 600px;
}

#hero-2 img {
	width: 1350px;
	transform: rotate(-17deg);
	margin-top: -900px;
	display: none;
}

#hero-2-white-block-blurred {
	width: 450px;
	height: 700px;
	background-color: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(var(--primary-layer-blur));
	border-radius: var(--large-border-radius);
	margin-top: -565px;
	margin-right: -335px;
	position: relative;
    z-index: 1;
}

#hero-2-white-block-2 {
	width: 450px;
	height: 700px;
	border-radius: var(--large-border-radius);
	background-color: var(--white-color);
	margin-top: -700px;
	margin-right: -335px;
}

#hero-2-white-block-blurred hr {
	display: none;
}

#hero-2-content {
	position: sticky;
	top: 15px;
	margin-top: -650px;
	height: 550px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--large-content-width);
	z-index: 1;
}

#hero-2-lines-left {
	width: 300px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

#hero-2-content-right {
	width: 450px;
	height: 100%;
	padding: 35px;
}

#hero-2-content-right h1 {
font-family: Montserrat;
font-weight: 100;
font-style: Thin;
font-size: 64.89px;
line-height: 97%;
letter-spacing: 0%;

}
.hero2-almost-right{
	color: #FB0366 !important;
}
#hero-2-content-right p {
	font-size: 15px;
	letter-spacing: 0.5px;
	line-height: 130%;
	padding-left: 10px;
	padding-right: 50px;
	margin-top: 25px;
	color:  rgba(0, 0, 0, 1);

}
#hero-2 .blurred-line{
	display: none;
}
#hero-2-content-right strong {
	font-weight: 350;
}

#hero-2 #how-it-works-button {
	margin-right: -365px;
    margin-top: 52px;
	position: relative;
	z-index: 1;
}
	#hero-2 {
  position: relative;
}

/* Wrapper starts from LEFT */
.hero2-slider-wrap {
  position: absolute;
  right: 0;             /* START FROM RIGHT */
  left: auto;
  top: 38%;
  transform: translateY(-50%);
  width: 100%;
  overflow: hidden;
  z-index: 0;
  padding: 20px 0;
}

.hero2-slide .mobile-webm{
display: none;
}

@media only screen and (max-width: 786px) {
.hero2-slide .desktop-webm{
display: none;
}
.hero2-slide .mobile-webm{
display: block;
}
.hero2-slide{
	width: 206px;
}
    #hero-2 #how-it-works-button {
        margin-top: 82px;
    }
    #hero-2 #how-it-works-button {
        margin-top: 59px !important;
    }
	    #hero-2 #how-it-works-button::after {
     
        height: 100px;
    }
}
/* Moving track */
.hero2-slider-track {
  display: flex;
  gap: 40px;
  will-change: transform;
  cursor: grab;
}

/* Each video */
.hero2-slide {
width: 400px;
height: 687px;

  flex-shrink: 0;
}

.hero2-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.hero2-slider-track:active {
  cursor: grabbing;
}

/* Mobile */

@media only screen and (min-height: 1170px) {
.secA-webm-div {
    top: 874px  !important;
}
}
@media only screen and (max-width: 1279px) {

	#hero-2-white-block {
		display: none;
	}

	#hero-2 img {
		display: none;
	}

	#hero-2-white-block-blurred {
		width: 100%;
		height: 1850px;
		background-color: var(--white-color);
		backdrop-filter: none;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
		margin-top: -125px;
		margin-right: 0px;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	#hero-2-white-block-blurred hr {
		display: block;
		background-color: var(--black-color);
		margin-top: var(--divider-line-margin-top);
	}

	#hero-2-content {
		position: sticky;
		top: 85px;
		margin-top: -1625px;
		height: 550px;
		width: 425px;
	}

	#hero-2-lines-left {
		display: none;
	}

	#hero-2-content-right {
		width: 100%;
		padding: 0;
	}

	#hero-2-content-right h1 {
		font-size: 72px;
		line-height: 100%;
		color: var(--red-color);
	}

	#hero-2-content-right p {
		font-weight: 400;
		font-size: 15px;
		padding-left: 0px;
		padding-right: 100px;
	}

	#hero-2-content-right strong {
		font-weight: 400;
		color: var(--red-color);
	}

	#hero-2 #how-it-works-button {
		margin: 0px;
		margin-top: 0px;
		margin-left: 40px;
	}

	#hero-2 #how-it-works-button:after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 600px;
	}
	#hero-2 {
    background-color: white;
	}
	#hero-1 #extra-playful-button:after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 600px;
	}
	#static-hero2{
		height: 1530px;
	}
	#hero-1{
		height: 1600px;
	}
	#hero-1-content{
	position: sticky;
	}
}

@media only screen and (max-width: 700px) {
	#hero-2-content {
		width: var(--large-content-width);
	}

	#hero-2-content-right h1 {
		hyphens: manual;
	}

	#hero-2 #how-it-works-button {
		margin-top: 50px;
	}

	#hero-2-content {
		margin-top: -1675px;
		top: 50px;
	}

	#hero-2-content-right p {
		padding-right: 0px;
	}
		#how-it-works-button{
		left: 51.5%;
	}
}

@media only screen and (max-height: 568px) {
	#hero-2-content {
		top: 0px;
		position: relative;
	}
}

/* HOW IT WORKS */

#how-it-works {
	background-color: var(--black-color);
	height: 2200px;
	margin-top: -1030px;
}

#how-it-works #hiw-background-img {
	position: sticky;
	top: 0;
	width: 100%;
	height: 1000px;
	object-fit: cover;
	object-position: center;
	border-top-left-radius: var(--larger-border-radius);
	border-top-right-radius: var(--larger-border-radius);
}

#how-it-works #hiw-background-img-mobile {
	display: none;
}

#how-it-works-content {
	position: relative;
	margin-top: -1000px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	padding: 65px;
}

#how-it-works-content hr {
	background-color: var(--white-color);
}

#how-it-works-middle {
	width: var(--large-content-width);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 240px;
}

#self-design-container,
#gift-container {
	width: 370px;
	height: 400px;
	background-color: rgba(0, 0, 0, .5);
	backdrop-filter: blur(var(--secondary-layer-blur));
	padding: 35px;
	color: var(--white-color);
	border-radius: var(--large-border-radius);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	transition: background-color var(--primary-transition-time),
		transform var(--primary-transition-time),
		height var(--primary-transition-time),
		margin-bottom var(--primary-transition-time);
}

#self-design-exit,
#gift-exit {
	width: 50px;
	height: 50px;
	background-color: transparent;
	outline: none;
	border: none;
	display: none;
	align-items: center;
	justify-content: center;
	margin-bottom: -95px;
	cursor: pointer;
	border-radius: var(--large-border-radius);
}

#self-design-exit img,
#gift-exit img {
	width: 15px;
	height: 15px;
}

#self-design-container ol{
	list-style-type: decimal-leading-zero;
	display: none;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
	height: 140px;
	width: 250px;
	padding-right: 50px;
}

#gift-container ol {
	list-style-type: decimal-leading-zero;
	display: none;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
	height: 190px;
	width: 250px;
	padding-right: 50px;
}


#self-design-container li,
#gift-container li {
	font-size: 14px;
	font-weight: 300;
	list-style-position: outside;
	padding-left: 10px;
}

#self-design-container h2,
#gift-container h2 {
	font-size: 58px;
	font-weight: 200;
	line-height: 100%;
}

#self-design-container .primary-button-alt p,
#gift-container .primary-button-alt p {
	font-weight: 500;
}

#self-design-container h2 {
	padding-right: 20px;
}

.hiw-container-active {
	background-color: rgba(0, 0, 0, 0.5) !important;
	transform: translateY(-50px);
}

#self-design-container.hiw-container-active {
	height: 425px;
}

#gift-container.hiw-container-active {
	height: 450px;
}

.hiw-container-active h2 {
	font-size: 32px !important;
}

.hiw-container-active ol {
	display: flex !important;
}

.hiw-container-active #self-design-exit,
.hiw-container-active #gift-exit {
	display: flex !important;
}
@media only screen and (max-width: 1920px) {

.examples-column-11, .examples-column-12, .examples-column-13, .examples-column-14 {
	display: none;
}

}
@media only screen and (max-width: 1279px) {
	#how-it-works {
		margin-top: -575px;
		height: 2700px;
		background-color: var(--white-color);
	}
.examples-column-10, .examples-column-9 {
	display: none;
}
	#how-it-works #hiw-background-img-mobile {
		display: block;
		position: sticky;
		top: 0;
		width: 100%;
		height: 1350px;
		object-fit: cover;
		object-position: center;
		border-top-left-radius: var(--large-border-radius);
		border-top-right-radius: var(--large-border-radius);
	}

	#how-it-works #hiw-background-img {
		display: none;
	}

	#how-it-works-content {
		margin-top: -1350px;
	}

	#how-it-works-middle {
		width: 425px;
		flex-direction: column;
	}

	#self-design-container,
	#gift-container {
		width: 100%;
		height: 375px;
	}

	#self-design-container {
		margin-bottom: 35px;
	}

	#self-design-container h2,
	#gift-container h2 {
		padding-right: 100px;
		font-size: 48px;
		font-weight: 140;
	}

	#how-it-works-middle .primary-button-alt {
		transform: scale(1.1);
	}

	.hiw-container-active {
		align-items: center !important;
		height: 500px !important;
		transform: none;
	}

	#self-design-container.hiw-container-active {
		margin-bottom: 65px;
		height: 450px !important;
	}

	#self-design-container ol,
	#gift-container ol {
		height: 150px;
		width: 200px;
		padding-right: 0px;
	}

	#gift-container ol {
		height: 215px;
	}

	#self-design-container li,
	#gift-container li {
		font-size: 15px;
		font-weight: 400;
	}

	.hiw-container-active h2 {
		text-align: center;
		padding: 0px 25px !important;
	}
}

@media only screen and (max-width: 700px) {
	#how-it-works {
		height: 2000px;
	}
.examples-column-8, .examples-column-7, .examples-column-6, .examples-column-5 {
	display: none;
}
	#how-it-works #hiw-background-img-mobile {
		position: sticky;
		height: 1200px;
	}

	#how-it-works-content {
		margin-top: -1190px;
	}

	#how-it-works-middle {
		width: var(--large-content-width);
		margin-top: 100px;
	}

	#how-it-works-middle .primary-button-alt {
		transform: scale(1);
		width: 100%;
	}

	#self-design-container ol,
	#gift-container ol {
		width: 175px;
	}

	#self-design-container h2,
	#gift-container h2 {
		padding-right: 0px;
	}

	.hiw-container-active h2 {
		text-align: center;
		padding: 0px 0px !important;
		font-size: 28px !important;
	}
}

/* EXAMPLE SECTION */

#example-section {
	position: relative;
	border-top-left-radius: var(--larger-border-radius);
	border-top-right-radius: var(--larger-border-radius);
	margin-top: -1265px;
	width: 100%;
	height: 2500px;
	background-color: var(--black-color);
	color: var(--white-color);
	display: flex;
	align-items: center;
	flex-direction: column;
}

#example-section hr {
	background-color: var(--white-color);
	margin-top: var(--divider-line-margin-top);
	margin-bottom: 50px;
}

#example-content {
	position: sticky;
	top: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: var(--black-color);
box-shadow: 0 35px 80px 40px var(--black-color);
		width: 150%;
	text-align: center;
}

#example-content h2 {
	font-weight: 200;
	font-size: 35px;
	width: 600px;
	margin-top: 31px;
}

#example-content p {
	margin-top: 15px;
	width: 350px;
}

#examples-container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 350px;
	overflow: visible;
}

.examples-column {
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	flex-shrink: 0;
}

.examples-column-adjusted {
	padding-bottom: 250px;
}

.examples-column img {
	width: 175px;
	height: 225px;
	object-fit: cover;
	margin-bottom: 25px;
	border-radius: var(--large-border-radius);
}

.examples-img-adjusted {
	margin-top: 50px;
}

#fader-4 {
	margin-top: -300px;
	position: relative;
}

@media only screen and (max-width: 1279px) {
	#example-section {
		border-top-left-radius: var(--large-border-radius);
		border-top-right-radius: var(--large-border-radius);
		margin-top: -1375px;
	}

	#example-content {
		height: 150px;
		top: -30px;
box-shadow: 0 75px 107px 40px var(--black-color);
width: 150%;

	}

	#example-section hr {
		margin-bottom: 50px;
	}

	#example-content h2 {
		width: 450px;
		text-align: center;
		margin-top: 80px;
	}

	#example-content p {
		font-size: 15px;
	}

	#examples-container {
		margin-top: 150px;
	}

	.examples-column {
		width: 155px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}

	.examples-column-adjusted {
		padding-bottom: 225px;
	}

	.examples-column img {
		width: 135px;
		height: 175px;
	}

	.examples-img-adjusted {
		margin-top: 35px;
	}
}

@media only screen and (max-width: 700px) {	
	#example-section {
		margin-top: -825px;
	}

	#example-content h2 {
		margin-top: 150px;
	}

	#example-section hr {
		margin-bottom: 0px;
	}

	#example-content p {
		width: 270px;
	}
}

/* VIDEO SECTION */

#video-section {
	background-color: var(--black-color);
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 2000px;
	margin-top: -100px;
}

#video-section video {
	width:100%;
	/*width: calc(1920px * 0.575);
	height: calc(1080px * 0.575);
	margin-top: 35px;*/
	border-radius: var(--larger-border-radius);
	z-index: 2;
}

#video-section #white-background {
	width: 100%;
	height: 2000px;
	/*background-color: var(--white-color);*/
	margin-top: -250px;
	position:relative
}

#test{width:100%; margin-top: -250px; height:300vw; }

#download-app-button {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-left: 10px;
	margin-top: -1300px;
}
@media only screen and (min-width: 100px) {
	#video-section {
		margin-top: -950px;
	}	
}
@media only screen and (min-width: 700px) {
	#fader-4 {
		margin-top: -100px;
	}
	#video-section {
        margin-top: -750px;
	}
	#video-section video {
		width: calc(1920px * 0.375);
		height: calc(1080px * 0.375);
	}
	
}
@media only screen and (min-width: 1279px) {
	#video-section video {
		width: calc(1920px * 0.575);
		height: calc(1080px * 0.575);
		margin-top: 50px;
	}
	#video-section {
		margin-top: -250px;		
	}	
	#download-app-button {
		margin-top: -1200px;
	}
}

@media only screen and (max-width: 1279px) {
	#video-section video {
		object-fit: cover;
		margin-top:50px;
		border-radius: var(--large-border-radius);
	}

	#download-app-button {
		position: relative;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-left: 12px;
		margin-top: -1300px;
	}
	#video-section #white-background{
		height: 2000px ;
	}
}

/* BENEFITS */

#benefits {
	position: relative;
	width: 100%;
	height: 2500px;
	backdrop-filter: blur(var(--secondary-layer-blur));
	height: 100vh;
	margin-top: 175px;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-bottom: 1100px;
}

#benefits hr {
	background-color: var(--white-color);
	margin-top: var(--divider-line-margin-top);
}

#benefits-content {
	margin-top: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--large-content-width);
	height: 700px;
	flex-shrink: 0;
}

#benefits-lines-left,
#benefits-lines-right {
	width: 175px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

#benefits-middle {
	width: 385px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

#benefits-middle-top {
	width: 100%;
	height: 550px;
	background-color: var(--white-color);
	border-radius: var(--large-border-radius);
	padding: 50px var(--small-padding);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
}

#benefits-middle-top h2 {
	font-weight: 200;
	font-size: 35px;
}

#benefits-middle-top p {
	font-weight: 400;
	margin-top: -25px;
}

#benefits-middle-top .benefits-circle {
	width: 5px;
	height: 5px;
	border: 1px solid var(--black-color);
	border-radius: 50%;
}

#benefits-middle .primary-button-wrapper {
	margin: 0;
}



@media only screen and (max-width: 1279px) {
	#benefits {
		backdrop-filter: none;
        /* background-color: rgba(225, 225, 225, 0.9); */
		border-top-left-radius: var(--large-border-radius);
		border-top-right-radius: var(--large-border-radius);
		height: 1500px;
	}
#benefits-middle-top{
background-color: transparent;

}
#benefits{
	backdrop-filter: blur(var(--primary-layer-blur));
    -webkit-backdrop-filter: blur(var(--primary-layer-blur)); 
    background: rgba(0, 0, 0, 62%); 
}
	#benefits hr {
		margin-top: var(--divider-line-margin-top);
		border: 1px solid var(--white-color);
	}

	#benefits-content {
		width: 500px;
		height: 1300px;
	}

	#benefits-lines-left,
	#benefits-lines-right {
		display: none;
	}

	#benefits-middle {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}
	#benefits-middle-top .benefits-circle {
		border: 1px solid var(--white-color);
	}
	#benefits-middle-top {
		top: 25px;
		color: white;
	}

	#benefits-middle-top h2 {
		font-size: 40px;
		color: white;
	}

	#benefits-middle-top p {
		font-size: 15px;
	}

	#benefits-middle .primary-button-wrapper {
		margin: 0;
		margin-top: -750px;
	}

	#special-deals-button:after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 200px;
		background-color: var(--white-color);
	}
}

@media only screen and (max-width: 700px) {
	#benefits-content {
		width: 385px;
	}
	#hero-1-top {
		top: 20px;
	}
	#hero-1-top{
		transform: translateY(-65%);
		
	}
	#hero-1-left-title {
		padding: 0;
	}

}

@media only screen and (max-height: 568px) {
	#benefits-middle-top {
		position: relative;
		top: 0px;
	}
}

/* SPECIAL DEALS */

#special-deals {
	position: sticky;
	top: -150px;
	height: 650px;
	background-color: var(--black-color);
	border-top-left-radius: var(--larger-border-radius);
	border-top-right-radius: var(--larger-border-radius);
	margin-top: calc(-1 * var(--larger-border-radius) - 35px);
	color: var(--white-color);
	display: flex;
	align-items: center;
	flex-direction: column;
}

#special-deals hr {
	background-color: var(--white-color);
	margin-top: var(--divider-line-margin-top);
}

#special-deals-content {
	width: var(--large-content-width);
	margin-top: 150px;
	padding-right: 150px;
}

#special-deals-content h1 {
	font-weight: 100;
	line-height: 100%;
}

#special-deals-content p {
	padding-left: 235px;
	margin-top: -45px;
}

@media only screen and (max-width: 1279px) {
	#special-deals {
		border-top-left-radius: var(--large-border-radius);
		border-top-right-radius: var(--large-border-radius);
		margin-top: -485px;
		height: 600px;
		top: -100px;
	}

	#special-deals-content {
		width: 425px;
		padding-right: 0px;
	}

	#special-deals-content p {
		padding-left: 0;
		margin-top: 0px;
		font-size: 15px;
		font-weight: 280;
		margin-top: 35px;
	}
	#special-deals-button:after{
				background-color: transparent;

	}

}

@media only screen and (max-width: 700px) {
	#special-deals-content {
		width: var(--large-content-width);
	}
	#how-it-works-button {
		margin-top: -260px !important
	}
}

@media only screen and (max-height: 568px) {
	#special-deals {
		position: relative;
		top: 0px;
		height: 365px;
	}

	#special-deals-content {
		margin-top: 100px;
	}
}

/* EMAIL SECTION */

#email-section {
	background-position-y: 50%;
    background-size: cover;
    background-image: url(assets/images/gradient1.png);
	position: sticky;
	top: 325px;
	background-color: var(--blue-color);
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 450px;
}

#email-section-content {
	margin-top: 50px;
}

#pricing-button-content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: -250px;
	margin-bottom: 250px;
}

#pricing-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: var(--large-content-width);
	margin-left: 50px;
}
@media only screen and (max-width: 1279px) {
	#hero-1 .hero-1-img {
		margin-top: 0;
		margin-left: -0;
		width: 1500px;
		transform: rotate(-90deg);
	}
	

	#hero-1-top {
		width: 100%;
	}

	#hero-1-left {
		width: 100%;
	}

	#hero-1-left-title h1 {
		font-size: 65px;
		width: 400px;
	}

	#hero-1-left-description p {
		font-size: 14px;
	}

	#hero-1-lines-right {
		display: none;
	}

	#hero-1-lines-bottom {
		display: none;
	}

	#hero-1 #extra-playful-button {
		margin: 0;
		margin-top: -30px;
		margin-right: -35px;
	}
	.secA-webm-div img {
		bottom: -9px;
		right: -75px;
	}
	.secA-webm-div {
        flex-direction: column;
        align-items: self-end;
    }
	#hero-1-left-title-wrapper{
		  width: 426px ;
	}
	#hero-1-left-description {
    margin-top: 40px;
	}

#hero-1-left-title{
	border: none;
padding: 0;
}
#hero-1-left-title-wrapper{
		padding-left: 0;
}
#hero-1 #extra-playful-button{
	        margin-top: 544px;
}
    .secA-webm-div img {
        left: 50%;
    transform: translateX(-50%);
	margin-bottom: 5rem;
    }
	.secA-webm-div{
		top: 1500px !important;
	}
	.change-img {
    top: -456px;
    right: 50px;
}

	#hero-1 #extra-playful-button{
		left: 50% !important;
        transform: translateX(-50%);
		left: 50% !important;
   margin-right: 0;
           margin-right: 63px;
		   z-index: 1;
	}
	#hero-1-left-description{
		padding-left: 0;

		width: 429px;
	}

	#hero-1-left-title h1 {
		font-size: 72px;
	}
	    .change-img {
        top: -464px;
        right: 4px;
    }
	/* #hero-1{
		height: 2000px;
	} */
	.hero2-slider-wrap {
	z-index: 1;
	    top: 72%;
	}
#hero-2{
	overflow: auto;
}
    #hero-2 #how-it-works-button {

        margin-top: 46px;
      
    }
	.hero2-slider-wrap{
		z-index: 1 !important;
	top: 69% !important;
	}
	#hero-2{
		    height: 1491px;
			overflow: auto;
	}
	    #hero-2 #how-it-works-button {
        margin-top: 982px;
    }
}

@media only screen and (min-width: 1280px) {
	.special-deals-button-mobile{
	display: none;
	}
}

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

	.special-deals-button-desktop {
		display: block;
	}
	.special-deals-button-mobile {
		position: relative;
		z-index: 10;
		/*display: flex;*/
		display: none;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-left: 0;
		margin-top: 0;
		top: -805px;
	}
	#special-deals-button .primary-button-wrapper {
		margin-left: 0;
	}
	#pricing-button{
		margin-left: 0 ;
		margin: 0 auto;
	}
	#email-section-content {
		margin-top: 35px;
	}

	#email-section .primary-input-wrapper {
		width: 425px;
	}

	#pricing-button-content {
		margin-bottom: 150px;
		margin-top: -525px;
	}
	:root {
		--small-content-width: 330px;
		/* --large-content-width: -1px !important; */
		--small-padding: 60px;
		--tiny-padding: 30px;
	}
	.secA-webm-div {
		z-index: 4;
		width: auto !important;
	}
	    .change-img {
        top: -451px;
        right: 33px;
    }
	#static-hero2 {
		display: flex;
		align-items: center;
		flex-direction: column;
        height: 2000px;
	    position: relative;
		top: -369px;
    }
	
	#hero2-content {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
     order: 1;
    position: static;
    margin-top: 0;
    background: transparent;
    backdrop-filter: none;
    width: 435.569px;
    height: 680.910px;
    border-radius: 27.56px;
    color: black;
    left: 50%;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 0 auto; */
	padding-top: 125px;
	}
	#static-hero2 hr{
		margin-top: 70px !important;
	}
	#static-hero2 video{
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
		width: 1579px;
		z-index:0;
		margin-top:-100px
	}

	#how-it-works-button {
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		margin-top: -500px;
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 3;
		order: 2;
		
	}
    #how-it-works {
             margin-top: -505px;
	}
	#hero2-content h1{
		z-index:1;
		color: #FB0366;

	}
	#hero2-content{
		margin-top: -30px;
		width: 395px;
		height: auto;
		z-index: 1;
	}
	#hero2-content h1, .hero2-description{
		width: auto;
		height: auto;
	}
	    #hero-1 {
        height: 1900px;
    }
	    #how-it-works {
        margin-top: -1605px;
    }
	    #static-hero2 {
        height: 2550px;
		}
}

@media only screen and (max-width: 700px) {
	#how-it-works {
		 margin-top: -605px;
	}
	#email-section .primary-input-wrapper {
		width: var(--large-content-width);
	}

	#email-section {
		top: 400px;
	}

	#pricing-button-content {
		margin-top: -200px;
	}

	#hero-1 {
        height: 1400px;
    }
	#static-hero2 video{

	margin-top:0px
}

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

	#hero-1-left-description{
			width: 100% !important;
	
	}

	#hero-1-left-description{
		margin-top: -10px;
	}
	.secA-webm-div{
		top: -6%;
	}

	    #example-content h2 {
			/* margin-top: 0 !important; */
			margin-top: 110px;

		}
		#special-deals-content{
			margin-top: 90px;
		}

	    #hero-1 {
        height: 1800px;
    }
	    #hero2-content {
        width: 300px;
		}
		
		#how-it-works {
        margin-top: -1735px;
    }
	    #static-hero2 {
        height: 2500px;
    }
}
@media only screen and (max-height: 568px) {
	#email-section {
		position: relative;
		top: 0px;
	}
}
#img-looping-mobile, #static-hero2-video-mobile{
	display: none;
}

@media only screen and (max-width:700px) {
	#img-looping-mobile{
	display: block;
}
#static-hero2-video-mobile{
	display: block;
	width:700px !important
}

#img-looping, #static-hero2-video{
	display: none;
}
#how-it-works-button{
	left: 15px;
}
header #menu-button {
	z-index: 1!important;
}
.secA-webm-div img{
width: 302px;
height: 517px;
}
#hero-1-left-title{
	width: auto;
}
#hero-1-left-description{
	width: 300px  !important;
}
#hero-1-left{
    display: flex;
    flex-direction: column;
    align-items: center;
	width: 333px;
	margin: 0 auto;
}
    #hero-1-left-title-wrapper{
        width: auto;
		padding: 0;
		top: -50px;
    }

	#hero-1-left-title h1 {
        width: auto;
    }
	.change-img {
    position: absolute;
    top: -149px;
    right: 33px;
    z-index: 3;
	}
}
@media only screen and (max-width: 375px) {
    #hero2-content {
        width: 300px;
    }
}
@media only screen and (min-width: 1920px) {

    #static-hero2 video {
        height: 1100px;
        width: 100%;
    }
	#static-hero2 {
    width: 100%;
    height: 2500px;
}
#how-it-works {
    margin-top: -1430px;
}
}

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

    #hero2-content {
        margin-top: -1177px;
    }
    #static-hero2 video {
        height: 1100px;
    }
    #static-hero2 {
        height: 2800px;
    }
}
/* banner additional */


.video-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(var(--scroll-parallax));
    transition: transform 0.05s linear;
}
#home-top-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#home-top-content img {
  will-change: transform;
  transition: transform 0.05s linear;
}

#home-top-scroll-container {
  position: absolute;
  bottom: 40px;
}
.video-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.video-background video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

@media (max-width: 1279px) {
	#email-section {
		background-position-y: 80%;
		background-image: url(assets/images/gradient1_small.png);
	}
}
@media (max-width: 700px) {
	#home-top-lines {
    margin-top: calc(100vh - 200px) !important;
	}
    #hero-1 {
        position: relative;
        z-index: 3;
    }
	    #static-hero2 {
        z-index: 4;
    }
	    #how-it-works {
        z-index: 5;
        position: relative;
    }
	    #example-section {
        z-index: 6;
    }
    #video-section {   
        z-index: 7;
    }
	    #download-app-button {
        z-index: 8;
    }
	    #benefits {
        z-index: 9;
    }

	    #special-deals {

        z-index: 11;
    }
	    #email-section {
        z-index: 12;
    }
	    #pricing-button-content {
        z-index: 13;
    }

}
/* =========================
   HERO 1 – FIXED
========================= */

#hero-1 {
	position: relative;
	min-height: 100svh; /* ✅ mobile-safe viewport */
	overflow: hidden;
}

@supports not (height: 100svh) {
	#hero-1 {
		min-height: 100vh;
	}
}

/* Background image */
.hero-1-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Video background safety */
.video-background {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
}

.video-background video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ✅ LOCK hero content position */
#hero-1-content {
	top: 50%;
	left: 0;
	margin-top:380px;
	width: auto;
	pointer-events: auto;
}

 #fader-3 {
	display: none !important;
}

/* =========================
   HERO 1 – MOBILE
========================= */
@media (max-width: 700px) {
    #hero-1 {
        overflow: visible; /* allow sticky to work */
    }

    #hero-1-content {
        position: sticky;
        top: 350px;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        margin: 370px auto 0 auto; /* mobile-specific margin */
        padding: 0 15px;
        z-index: 2;
    }

    #hero-1-top {
        flex-direction: column;
        align-items: center;
    }

    #fader-3 {
		display: block!important;
        z-index: 3;
		margin-top: -200px;
        height: 867px !important;
    }
	.secA-webm-div {
        top: 1300px !important;
    }

	#hero2-content h1{
		margin-bottom: 45px;
	}
}

/* =========================
   HERO 1 – TABLET
========================= */
@media (min-width: 701px) and (max-width: 1279px) {
    #hero-1 {
        overflow: visible; /* allow sticky to work */
    }

    #hero-1-content {
        position: sticky;
        top: 100px;          /* tablet-specific top */
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        margin: 100px auto 0 auto; /* tablet-specific margin */
        padding: 0 15px;
        z-index: 2;
    }

    #hero-1-top {
        flex-direction: column;
        align-items: center;
    }

    #fader-3 {
		display: block!important;
        z-index: 3;
		margin-top: 100px;
        height: 867px !important;
    }

	#hero2-content h1{
		margin-bottom: 45px;
	}
}

@media (min-width: 1280px) {
	#img-looping {
		right: -10px;
	}
}