@charset "utf-8";
/* CSS Document */

*{margin:0px; padding:0px;}

/*HEADER*/
#Header {background-size:cover; background-position:center; background-image:url("../images/snatched gradient.png"); width:100%; height: 125px; background-repeat: no-repeat;}
#Header img {width:150px; align-content:center; display: block; margin: 0 auto; padding:30px 0px 0px 0px;}
.Exclusive {height:30px; width:100%; text-align:center; display:block; background-color:#FFEDA4;}
.Exclusive h1 {font-size:16pt; font-family: "Playfair Display", serif; font-optical-sizing: auto; font-weight:800; font-style: normal;}

/*SCROLL BAR*/
.ticker-container {width: 100%; overflow: hidden; white-space: nowrap; background-color: #FFC93F; padding: 10px 0;}
.ticker-text {display: inline-block; padding-left: 100%; animation: scroll-left 60s linear infinite; font-family: "Playfair Display", serif; font-size: 16px; font-weight: 600;}
@keyframes scroll-left {0% {transform: translateX(0%);}100% {transform: translateX(-100%);}}

/*HERO*/
#Hero {background-image: url("../images/Hero.png"); background-position:center; background-size:cover; height:313px; display: flex; justify-content: space-evenly; align-items: center; text-align: center; padding: 20px 0;}
#Hero div {flex: 1;}
.Plan h2 {font-family: "Ysabeau", sans-serif; margin:0 0 10px 0;}
.Plan img {width:50px; display: block; margin: 0 auto;}
.Explore h2 {font-family: "Ysabeau", sans-serif; margin:0 0 10px 0;}
.Explore img {width:50px; display: block; margin: 0 auto;}
.Start h2 {font-family: "Ysabeau", sans-serif; margin:0 0 10px 0;}
.Start img {width:50px; display: block; margin: 0 auto;}
.hero-button {background-color: rgba(255, 255, 255, 0.8); padding: 30px 20px; border-radius: 16px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 180px; min-height: 120px; margin: 0 auto;}
.hero-button:hover {background-color: rgba(255, 255, 255, 1); transform: scale(1.05);}

/*FAMILY SECTION*/
#Family {width:100%; background-image:url("../images/sand.png"); background-size:cover; background-position:center; background-repeat: no-repeat; height:600px; display: flex; justify-content: center; align-items: center;}
.family-wrapper {position: relative; display: inline-block;}
.family-wrapper img {height:450px; width:auto; display:block;}
.kid-image {border-radius: 20px;}
.family-button {position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 12px; cursor: pointer; text-decoration: none; color: black; font-family: "Ysabeau", sans-serif; font-weight:700; transition: background-color 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.2);}
.family-button:hover {background-color: rgba(255, 255, 255, 1); transform: translate(-50%, -50%) scale(1.05);}

/*SOCIALS/MAILING/FAQ*/
#Email {background-image:url("../images/bigger email section.png"); width:100%; height:200px; background-size:cover; display: flex; justify-content: space-evenly; align-items: center; text-align: center;}
#Email div {flex:1;}
.mailing img {width:75px; height:auto;display: block; margin: 0 auto;}
.mailing h1 {font-family: "Ysabeau", sans-serif; margin:0 0 10px 0; padding-top:10px; transition: color 0.3s ease;}
.mailing h1:hover {color:white;}
.faq img {width:100px; height:auto;display: block; margin: 0 auto;}
.faq h1 {font-family: "Ysabeau", sans-serif; margin:0 0 10px 0; transition: color 0.3s ease;}
.faq h1:hover {color:white;}
.socials img {width:125px; height:auto;display: block; margin: 0 auto;}
.socials h1 {font-family: "Ysabeau", sans-serif; margin:0 0 10px 0; padding-top:10px; transition: color 0.3s ease;}
.socials h1:hover {color:white;}
.mailing img {transition: transform 0.3s ease;}
.faq img {transition: transform 0.3s ease;}
.socials img {transition: transform 0.3s ease;}
.mailing img:hover {transform: scale(1.1);}
.faq img:hover {transform: scale(1.1);}
.socials img:hover {transform: scale(1.1);}

/*FOOTER*/
footer {height:auto; width:100%; background-color:#FFC93C;}
footer h1 {font-family: "Playfair Display", serif; font-size:14px; text-align:center; color:black; padding-top:10px;}
footer h2 {font-family: "Playfair Display", serif; font-size:14px; text-align:center; color:black;}
footer h3 {font-family: "Playfair Display", serif; font-size:14px; text-align:center; color:black; padding-bottom:10px;}

/*JAVASCRIPT*/
.popup-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 9999; font-family: "Ysabeau", sans-serif;}
.popup-box {background-color: #fff; padding: 30px 20px; border-radius: 12px; text-align: center; width: 90%; max-width: 400px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
.popup-box p {font-family: "Playfair Display", serif;}
.popup-box input {width: 80%; padding: 10px; margin: 10px 0; border-radius: 6px; border: 1px solid #ccc; font-family: "Playfair Display", serif;}
.popup-box button {margin: 5px; padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer; background-color: #ffc93f; font-weight: bold; font-family: "Ysabeau", sans-serif;}
.close-btn {background-color: #ccc; font-family: "Ysabeau", sans-serif;}

/*RESPONSIVE BREAKPOINTS*/
/*LAPTOP*/
@media screen and (max-width: 1024px) 
{
 	 #Hero {flex-direction: row; flex-wrap: wrap; height: auto;}
  	.hero-button {width: 140px;}
  	.family-button {left: 90%; font-size: 14px;}
}

/*IPAD*/
@media screen and (max-width: 768px) 
{
  	#Hero {flex-direction: column; gap: 20px;}
  	.hero-button {width: 90%; max-width: 250px;}
  	.family-button {left: 85%;font-size: 13px;}
  	#Email {flex-direction: column; background-image:url("../images/email mobile.png"); background-size:cover; background-position:center;width:100%; height: 400px; background-repeat: no-repeat;}
	#Email {flex-direction: column; height: auto; padding: 20px 0;}
  	#Email div {margin-bottom: 20px;}
}

/*MOBILE*/
@media screen and (max-width: 480px)
{
	#Header {background-image: url("../images/Hero for mobile.png"); background-size:cover; background-position:center;width:100%; height: 125px; background-repeat: no-repeat;}
	#Header img {width: 100px;padding-top: 20px;}
	.hero-button {width: 90%;padding: 15px;}
	.family-button {left: 80%;font-size: 12px;padding: 10px;}
	.mailing img, .faq img, .socials img {max-width: 45px;}
	.mailing h1, .faq h1,.socials h1 {font-size: 14px;}
}