:root {
  --PHN-navy: #003e6a;
  --PHN-gray: #cccccc;
  --phn-light-blue: #ebfbfc;
  --phn-white: #ffffff;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "museo-sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  background: var(--phn-light-blue);
  position: relative;
}

a {
  transition: all ease-in-out 0.4s;
}

a:hover {
  opacity: 0.8;
}

p {
  margin: 0;
  line-height: normal;
}

h1 {
  font-size: 64px;
  font-weight: 700;
  font-family: "museo-slab", serif;
  line-height: normal;
}

h2 {
  font-size: 60px;
  font-weight: 400;
  font-family: "museo-slab", serif;
  line-height: normal;
  opacity: 1;
  /* transition-delay: 2s;
  transition: opacity 2s ease-in-out; */
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 0 45px;
}

.flex {
  display: flex;
}

/* header */
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* backdrop-filter: blur(2px); */
}

.header {
  padding: 17px 45px 17px 0;
  justify-content: space-between;
  align-items: center;
  color: var(--PHN-navy);
}

.ovarlay-header {
  color: var(--phn-white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: none;
  background: #003e6a;
}

.safari-overlay .ovarlay-header {
  display: block;
}
/* .white-logo {
  opacity: 0;
} */

/* .fp-viewing-section8 .white-logo,
.fp-viewing-section9 .white-logo,
.fp-viewing-section10 .white-logo {
  animation: showText 1s 2s forwards, hideText 1s 20s forwards;
} */

/* .fp-viewing-section8 .logo,
.fp-viewing-section9 .logo,
.fp-viewing-section10 .logo {
  animation: logoFadeout 1s 1s forwards, logoFadeIn 1s 20s forwards;
} */

.menu {
  justify-content: center;
  align-items: center;
}

.social-media {
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 0 41px 0 12px;
}

.icon {
  border-radius: 99px;
  border: 1px solid var(--PHN-navy);
  padding: 5px;
  background: var(--phn-white);
}

.ovarlay-header .icon {
  border: 1px solid var(--phn-white);
}

.twitter {
  padding: 9px;
}

.linkedin {
  padding: 8px;
}

.twitter img {
  width: 18px;
  height: 18px;
}

.facebook img {
  width: 26px;
  height: 26px;
}

.share {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.ovarlay-header .share {
  color: var(--phn-white);
}

.main-pageLink {
  font-weight: 600;
  line-height: 28px;
  text-decoration: underline;
  text-decoration-color: var(--PHN-navy);
  color: var(--PHN-navy);
  padding-left: 40px;
}

.ovarlay-header .main-pageLink {
  text-decoration: underline;
  text-decoration-color: var(--phn-white);
  color: var(--phn-white);
}

/* .ovarlay-header .main-pageLink {
  text-decoration: underline;
  text-decoration-color: var(--phn-white);
  color: var(--phn-white);
} */

/* Add to any buttons */

.a2a_kit {
  display: flex;
}

.a2a_kit a {
  width: 38px;
  height: 38px;
  cursor: pointer;
}

.a2a_kit svg {
  display: none !important;
}

.a2a_default_style span {
  background-color: transparent !important;
}

.a2a_button_facebook {
  background: url("../images/facebook.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 12px;
}

.ovarlay-header .a2a_button_facebook {
  background: url("../images/whiteFacebook.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 12px;
}

.a2a_button_x {
  background: url("../images/X.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
}

.ovarlay-header .a2a_button_x {
  background: url("../images/whiteX.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
}

.a2a_button_linkedin {
  background: url("../images/linkedin.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
}

.ovarlay-header .a2a_button_linkedin {
  background: url("../images/whiteLinkedin.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
}

/* main animation */
.text-wrapper {
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  color: var(--PHN-navy);
}

.details {
  width: 50%;
}

.details span {
  font-weight: 700;
}

.details p {
  font-family: "museo-slab", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
}

.text-wrapper h4 {
  font-size: 28px;
  font-family: "museo-slab", serif;
  line-height: normal;
  font-weight: 400;
  max-width: 420px;
}

.text-wrapper h5 {
  color: var(--PHN-navy);
  font-family: "museo-slab", serif;
  font-size: 42px;
  font-weight: 700;
  line-height: normal;
}

#text-target {
  display: inline;
  background: #81dce5;
  border-radius: 8px;
  padding: 0 6px;
  margin-left: 4px;
  font-weight: 700;
}

#text-target2 {
  display: inline;
  background: #81dce5;
  border-radius: 8px;
  padding: 0 6px;
  margin-left: 4px;
  font-weight: 700;
}

.text-animation2 {
  min-height: 67px;
}

.counter-wrapper p {
  max-width: 420px;
}

.counter-section {
  display: flex;
  justify-content: flex-start;
  font-size: 80px;
  font-weight: 700;
  line-height: normal;
}

.slide4 p {
  max-width: 420px;
}

.slide5 p {
  max-width: 420px;
}

.svg-container {
  /* height: 100vh;
  width: 100vw; */
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 0.6s;
  overflow: hidden;
  will-change: transform;
}

/* hero section */
.hero {
  text-align: center;
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.hero p {
  padding-top: 26px;
  font-family: "museo-slab", serif;
  font-size: 26px;
  font-weight: 400;
  max-width: 620px;
}

/* scroll down */
.scroll-down-wrapper {
  position: absolute;
  bottom: 24px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.scroll-down-wrapper p {
  font-size: 20px;
  line-height: normal;
  color: var(--PHN-navy);
  padding-top: 0;
}

.scroll-down {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--PHN-navy);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* footer */
#footerSection {
  /* display: none; */
  min-height: 100vh;
  background: var(--phn-light-blue);
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.footer {
  background: var(--phn-light-blue);
  padding: 140px 58px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.footer-details .bold-text {
  font-size: 42px;
  font-family: "museo-slab", serif;
  font-weight: 700;
  color: var(--PHN-navy);
  line-height: normal;
  padding: 34px 0 10px 0;
}

.footer-details .normal-text {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--PHN-navy);
  max-width: 454px;
  padding-bottom: 40px;
}

.footer-details a {
  text-decoration: none;
}

.contact-btn {
  background: var(--PHN-navy);
  color: var(--phn-white);
  padding: 11px 64px;
  width: 364px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.contact-btn:hover {
  background: transparent;
  color: var(--PHN-navy);
  border: 1px solid var(--PHN-navy);
}

.sponsers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 19px;
  margin-top: 10%;
  height: 71%;
}

.card {
  height: 130px;
  padding: 22px 19px;
  border-radius: 10px;
  background: var(--phn-white);
  border: 1px solid var(--PHN-gray);
  box-shadow: 4px 12px 31.5px -2px rgba(129, 220, 229, 0.2);
}

.arrowup-wrapper {
  background: var(--PHN-navy);
  width: 76px;
  height: 76px;
  border-radius: 99px;
  align-items: center;
  justify-content: center;
  padding: 19px;
  border: none;
  cursor: pointer;
}

.arrowup-wrapper img {
  width: 38px;
  height: 38px;
}

.back-to-top {
  cursor: pointer;
}

.back-to-top p {
  text-align: center;
  color: var(--PHN-navy);
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
}

.footer-social-wrapper {
  align-items: center;
  justify-content: flex-end;
  padding: 90px 0 16px 0;
}

.footer-social {
  align-items: center;
  justify-content: center;
  gap: 19px;
  padding-right: 36px;
}

.footer-social .social-media {
  padding: 0;
  margin-bottom: 20px;
}

/* scroll down & text slide/fade up animation */
.fp-viewing-section2 .hero {
  animation: hideText 0.5s forwards;
}

.fp-viewing-section3 h2 {
  animation: hideText 0.5s forwards;
}

.fp-viewing-section4 .counter-wrapper {
  animation: hideText 0.5s;
}

.fp-viewing-section5 .slide4 {
  animation: hideText 0.5s forwards;
}

.fp-viewing-section6 .slide5 {
  animation: hideText 0.5s forwards;
}

.fp-viewing-section7 .animation-text {
  animation: hideText 0.5s forwards;
}

.fp-viewing-footer .animation-text2 {
  animation: hideText 0.5s forwards;
}

/* scroll down & text slide/fade from down and top animation */
.hero {
  animation: showText 1s forwards;
}

.fp-viewing-section2 h2 {
  animation: showText 1s forwards;
}

.fp-viewing-section3 .counter-wrapper {
  animation: showText 1s forwards;
}

.fp-viewing-section4 .slide4 {
  animation: showText 1s forwards;
}

.fp-viewing-section5 .slide5 {
  animation: showText 1s forwards;
}

.fp-viewing-section6 .animation-text {
  animation: showText 1s forwards;
}

.fp-viewing-section7 .animation-text2 {
  animation: showText 1s forwards;
}

/* scroll back & text slide from top animation */

@keyframes hideText {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#safari-message {
  display: none;
  color: green;
  font-weight: bold;
}

/* main map styles */
#path1,
#path13,
#path12,
#path25,
#path11,
#path30,
#path16,
#path3,
#path2,
#path21,
#path26,
#path43,
#path42,
#path41,
#path19,
#path22,
#path18,
#path24 {
  fill: #ffffff;
}

ellipse,
circle,
#ellipse467,
#ellipse233,
#ellipse276,
#path-melton,
#path-brimbank {
  opacity: 0;
}
#main-path,
#path47,
#path48,
#path44,
#path49,
#path45,
#path46,
#path52,
#path50,
#pie-fill,
#pie-chart,
#path51,
#path10,
#path1 {
  fill: transparent;
}

.fp-viewing-section4 ellipse,
.fp-viewing-section4 circle,
.fp-viewing-section3 ellipse,
.fp-viewing-section3 circle {
  opacity: 1;
}

.fp-viewing-section3 #ellipse1,
.fp-viewing-section3 #ellipse2,
.fp-viewing-section3 #ellipse3,
.fp-viewing-section3 #ellipse4,
.fp-viewing-section3 #ellipse5,
.fp-viewing-section3 #ellipse6,
.fp-viewing-section3 #ellipse7,
.fp-viewing-section3 #ellipse8,
.fp-viewing-section3 #ellipse9,
.fp-viewing-section3 #ellipse10,
.fp-viewing-section3 #ellipse11,
.fp-viewing-section3 #ellipse12,
.fp-viewing-section3 #ellipse13,
.fp-viewing-section3 #ellipse14,
.fp-viewing-section3 #ellipse15,
.fp-viewing-section3 #ellipse16,
.fp-viewing-section3 #ellipse17,
.fp-viewing-section3 #ellipse18,
.fp-viewing-section3 #ellipse19,
.fp-viewing-section3 #ellipse20 {
  transition-delay: 1s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse21,
.fp-viewing-section3 #ellipse22,
.fp-viewing-section3 #ellipse23,
.fp-viewing-section3 #ellipse24,
.fp-viewing-section3 #ellipse25,
.fp-viewing-section3 #ellipse26,
.fp-viewing-section3 #ellipse27,
.fp-viewing-section3 #ellipse28,
.fp-viewing-section3 #ellipse29,
.fp-viewing-section3 #ellipse30,
.fp-viewing-section3 #ellipse31,
.fp-viewing-section3 #ellipse32,
.fp-viewing-section3 #ellipse33,
.fp-viewing-section3 #ellipse34,
.fp-viewing-section3 #ellipse35,
.fp-viewing-section3 #ellipse36,
.fp-viewing-section3 #ellipse37,
.fp-viewing-section3 #ellipse38,
.fp-viewing-section3 #ellipse39,
.fp-viewing-section3 #ellipse40 {
  transition-delay: 1.5s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse41,
.fp-viewing-section3 #ellipse42,
.fp-viewing-section3 #ellipse43,
.fp-viewing-section3 #ellipse44,
.fp-viewing-section3 #ellipse45,
.fp-viewing-section3 #ellipse46,
.fp-viewing-section3 #ellipse47,
.fp-viewing-section3 #ellipse48,
.fp-viewing-section3 #ellipse49,
.fp-viewing-section3 #ellipse50,
.fp-viewing-section3 #ellipse51,
.fp-viewing-section3 #ellipse52,
.fp-viewing-section3 #ellipse53,
.fp-viewing-section3 #ellipse54,
.fp-viewing-section3 #ellipse55,
.fp-viewing-section3 #ellipse56,
.fp-viewing-section3 #ellipse57,
.fp-viewing-section3 #ellipse58,
.fp-viewing-section3 #ellipse59,
.fp-viewing-section3 #ellipse60 {
  transition-delay: 1.5s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse61,
.fp-viewing-section3 #ellipse62,
.fp-viewing-section3 #ellipse63,
.fp-viewing-section3 #ellipse64,
.fp-viewing-section3 #ellipse65,
.fp-viewing-section3 #ellipse66,
.fp-viewing-section3 #ellipse67,
.fp-viewing-section3 #ellipse68,
.fp-viewing-section3 #ellipse69,
.fp-viewing-section3 #ellipse70,
.fp-viewing-section3 #ellipse71,
.fp-viewing-section3 #ellipse72,
.fp-viewing-section3 #ellipse73,
.fp-viewing-section3 #ellipse74,
.fp-viewing-section3 #ellipse75,
.fp-viewing-section3 #ellipse76,
.fp-viewing-section3 #ellipse77,
.fp-viewing-section3 #ellipse78,
.fp-viewing-section3 #ellipse79,
.fp-viewing-section3 #ellipse80 {
  transition-delay: 0.5s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse81,
.fp-viewing-section3 #ellipse82,
.fp-viewing-section3 #ellipse83,
.fp-viewing-section3 #ellipse84,
.fp-viewing-section3 #ellipse85,
.fp-viewing-section3 #ellipse86,
.fp-viewing-section3 #ellipse87,
.fp-viewing-section3 #ellipse88,
.fp-viewing-section3 #ellipse89,
.fp-viewing-section3 #ellipse90,
.fp-viewing-section3 #ellipse91,
.fp-viewing-section3 #ellipse92,
.fp-viewing-section3 #ellipse93,
.fp-viewing-section3 #ellipse94,
.fp-viewing-section3 #ellipse95,
.fp-viewing-section3 #ellipse96,
.fp-viewing-section3 #ellipse97,
.fp-viewing-section3 #ellipse98,
.fp-viewing-section3 #ellipse99,
.fp-viewing-section3 #ellipse100 {
  transition-delay: 1s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse101,
.fp-viewing-section3 #ellipse102,
.fp-viewing-section3 #ellipse103,
.fp-viewing-section3 #ellipse104,
.fp-viewing-section3 #ellipse105,
.fp-viewing-section3 #ellipse106,
.fp-viewing-section3 #ellipse107,
.fp-viewing-section3 #ellipse108,
.fp-viewing-section3 #ellipse109,
.fp-viewing-section3 #ellipse110,
.fp-viewing-section3 #ellipse111,
.fp-viewing-section3 #ellipse112,
.fp-viewing-section3 #ellipse113,
.fp-viewing-section3 #ellipse114,
.fp-viewing-section3 #ellipse115,
.fp-viewing-section3 #ellipse116,
.fp-viewing-section3 #ellipse117,
.fp-viewing-section3 #ellipse118,
.fp-viewing-section3 #ellipse119,
.fp-viewing-section3 #ellipse120 {
  transition-delay: 1.2s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse121,
.fp-viewing-section3 #ellipse122,
.fp-viewing-section3 #ellipse123,
.fp-viewing-section3 #ellipse124,
.fp-viewing-section3 #ellipse125,
.fp-viewing-section3 #ellipse126,
.fp-viewing-section3 #ellipse127,
.fp-viewing-section3 #ellipse128,
.fp-viewing-section3 #ellipse129,
.fp-viewing-section3 #ellipse130,
.fp-viewing-section3 #ellipse131,
.fp-viewing-section3 #ellipse132,
.fp-viewing-section3 #ellipse133,
.fp-viewing-section3 #ellipse134,
.fp-viewing-section3 #ellipse135,
.fp-viewing-section3 #ellipse136,
.fp-viewing-section3 #ellipse137,
.fp-viewing-section3 #ellipse138,
.fp-viewing-section3 #ellipse139,
.fp-viewing-section3 #ellipse140 {
  transition-delay: 1.2s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse141,
.fp-viewing-section3 #ellipse142,
.fp-viewing-section3 #ellipse143,
.fp-viewing-section3 #ellipse144,
.fp-viewing-section3 #ellipse145,
.fp-viewing-section3 #ellipse146,
.fp-viewing-section3 #ellipse147,
.fp-viewing-section3 #ellipse148,
.fp-viewing-section3 #ellipse149,
.fp-viewing-section3 #ellipse150,
.fp-viewing-section3 #ellipse151,
.fp-viewing-section3 #ellipse152,
.fp-viewing-section3 #ellipse153,
.fp-viewing-section3 #ellipse154,
.fp-viewing-section3 #ellipse155,
.fp-viewing-section3 #ellipse156,
.fp-viewing-section3 #ellipse157,
.fp-viewing-section3 #ellipse158,
.fp-viewing-section3 #ellipse159,
.fp-viewing-section3 #ellipse160 {
  transition-delay: 1s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse161,
.fp-viewing-section3 #ellipse162,
.fp-viewing-section3 #ellipse163,
.fp-viewing-section3 #ellipse164,
.fp-viewing-section3 #ellipse165,
.fp-viewing-section3 #ellipse166,
.fp-viewing-section3 #ellipse167,
.fp-viewing-section3 #ellipse168,
.fp-viewing-section3 #ellipse169,
.fp-viewing-section3 #ellipse170,
.fp-viewing-section3 #ellipse171,
.fp-viewing-section3 #ellipse172,
.fp-viewing-section3 #ellipse173,
.fp-viewing-section3 #ellipse174,
.fp-viewing-section3 #ellipse175,
.fp-viewing-section3 #ellipse176,
.fp-viewing-section3 #ellipse177,
.fp-viewing-section3 #ellipse178,
.fp-viewing-section3 #ellipse179,
.fp-viewing-section3 #ellipse180 {
  transition-delay: 1s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse181,
.fp-viewing-section3 #ellipse182,
.fp-viewing-section3 #ellipse183,
.fp-viewing-section3 #ellipse184,
.fp-viewing-section3 #ellipse185,
.fp-viewing-section3 #ellipse186,
.fp-viewing-section3 #ellipse187,
.fp-viewing-section3 #ellipse188,
.fp-viewing-section3 #ellipse189,
.fp-viewing-section3 #ellipse190,
.fp-viewing-section3 #ellipse191,
.fp-viewing-section3 #ellipse192,
.fp-viewing-section3 #ellipse193,
.fp-viewing-section3 #ellipse194,
.fp-viewing-section3 #ellipse195,
.fp-viewing-section3 #ellipse196,
.fp-viewing-section3 #ellipse197,
.fp-viewing-section3 #ellipse198,
.fp-viewing-section3 #ellipse199,
.fp-viewing-section3 #ellipse200 {
  transition-delay: 0.8s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse201,
.fp-viewing-section3 #ellipse202,
.fp-viewing-section3 #ellipse203,
.fp-viewing-section3 #ellipse204,
.fp-viewing-section3 #ellipse205,
.fp-viewing-section3 #ellipse206,
.fp-viewing-section3 #ellipse207,
.fp-viewing-section3 #ellipse208,
.fp-viewing-section3 #ellipse209,
.fp-viewing-section3 #ellipse210,
.fp-viewing-section3 #ellipse211,
.fp-viewing-section3 #ellipse212,
.fp-viewing-section3 #ellipse213,
.fp-viewing-section3 #ellipse214,
.fp-viewing-section3 #ellipse215,
.fp-viewing-section3 #ellipse216,
.fp-viewing-section3 #ellipse217,
.fp-viewing-section3 #ellipse218,
.fp-viewing-section3 #ellipse219,
.fp-viewing-section3 #ellipse220 {
  transition-delay: 0.2s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse221,
.fp-viewing-section3 #ellipse222,
.fp-viewing-section3 #ellipse223,
.fp-viewing-section3 #ellipse224,
.fp-viewing-section3 #ellipse225,
.fp-viewing-section3 #ellipse226,
.fp-viewing-section3 #ellipse227,
.fp-viewing-section3 #ellipse228,
.fp-viewing-section3 #ellipse229,
.fp-viewing-section3 #ellipse230,
.fp-viewing-section3 #ellipse231,
.fp-viewing-section3 #ellipse232,
.fp-viewing-section3 #ellipse234,
.fp-viewing-section3 #ellipse235,
.fp-viewing-section3 #ellipse236,
.fp-viewing-section3 #ellipse237,
.fp-viewing-section3 #ellipse238,
.fp-viewing-section3 #ellipse239,
.fp-viewing-section3 #ellipse240 {
  transition-delay: 1.4s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse241,
.fp-viewing-section3 #ellipse242,
.fp-viewing-section3 #ellipse243,
.fp-viewing-section3 #ellipse244,
.fp-viewing-section3 #ellipse245,
.fp-viewing-section3 #ellipse246,
.fp-viewing-section3 #ellipse247,
.fp-viewing-section3 #ellipse248,
.fp-viewing-section3 #ellipse249,
.fp-viewing-section3 #ellipse250,
.fp-viewing-section3 #ellipse251,
.fp-viewing-section3 #ellipse252,
.fp-viewing-section3 #ellipse253,
.fp-viewing-section3 #ellipse254,
.fp-viewing-section3 #ellipse255,
.fp-viewing-section3 #ellipse256,
.fp-viewing-section3 #ellipse257,
.fp-viewing-section3 #ellipse258,
.fp-viewing-section3 #ellipse259,
.fp-viewing-section3 #ellipse260 {
  transition-delay: 0.6s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse261,
.fp-viewing-section3 #ellipse262,
.fp-viewing-section3 #ellipse263,
.fp-viewing-section3 #ellipse264,
.fp-viewing-section3 #ellipse265,
.fp-viewing-section3 #ellipse266,
.fp-viewing-section3 #ellipse267,
.fp-viewing-section3 #ellipse268,
.fp-viewing-section3 #ellipse269,
.fp-viewing-section3 #ellipse270,
.fp-viewing-section3 #ellipse271,
.fp-viewing-section3 #ellipse272,
.fp-viewing-section3 #ellipse273,
.fp-viewing-section3 #ellipse274,
.fp-viewing-section3 #ellipse275,
.fp-viewing-section3 #ellipse276,
.fp-viewing-section3 #ellipse277,
.fp-viewing-section3 #ellipse278,
.fp-viewing-section3 #ellipse279,
.fp-viewing-section3 #ellipse280 {
  transition-delay: 1.3s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse281,
.fp-viewing-section3 #ellipse282,
.fp-viewing-section3 #ellipse283,
.fp-viewing-section3 #ellipse284,
.fp-viewing-section3 #ellipse285,
.fp-viewing-section3 #ellipse286,
.fp-viewing-section3 #ellipse287,
.fp-viewing-section3 #ellipse288,
.fp-viewing-section3 #ellipse289,
.fp-viewing-section3 #ellipse290,
.fp-viewing-section3 #ellipse291,
.fp-viewing-section3 #ellipse292,
.fp-viewing-section3 #ellipse293,
.fp-viewing-section3 #ellipse294,
.fp-viewing-section3 #ellipse295,
.fp-viewing-section3 #ellipse296,
.fp-viewing-section3 #ellipse297,
.fp-viewing-section3 #ellipse298,
.fp-viewing-section3 #ellipse299,
.fp-viewing-section3 #ellipse300 {
  transition-delay: 1.2s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse301,
.fp-viewing-section3 #ellipse302,
.fp-viewing-section3 #ellipse303,
.fp-viewing-section3 #ellipse304,
.fp-viewing-section3 #ellipse305,
.fp-viewing-section3 #ellipse306,
.fp-viewing-section3 #ellipse307,
.fp-viewing-section3 #ellipse308,
.fp-viewing-section3 #ellipse309,
.fp-viewing-section3 #ellipse310,
.fp-viewing-section3 #ellipse311,
.fp-viewing-section3 #ellipse312,
.fp-viewing-section3 #ellipse313,
.fp-viewing-section3 #ellipse314,
.fp-viewing-section3 #ellipse315,
.fp-viewing-section3 #ellipse316,
.fp-viewing-section3 #ellipse317,
.fp-viewing-section3 #ellipse318,
.fp-viewing-section3 #ellipse319,
.fp-viewing-section3 #ellipse320 {
  transition-delay: 1.1s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse321,
.fp-viewing-section3 #ellipse322,
.fp-viewing-section3 #ellipse323,
.fp-viewing-section3 #ellipse324,
.fp-viewing-section3 #ellipse325,
.fp-viewing-section3 #ellipse326,
.fp-viewing-section3 #ellipse327,
.fp-viewing-section3 #ellipse328,
.fp-viewing-section3 #ellipse329,
.fp-viewing-section3 #ellipse330,
.fp-viewing-section3 #ellipse331,
.fp-viewing-section3 #ellipse332,
.fp-viewing-section3 #ellipse333,
.fp-viewing-section3 #ellipse334,
.fp-viewing-section3 #ellipse335,
.fp-viewing-section3 #ellipse336,
.fp-viewing-section3 #ellipse337,
.fp-viewing-section3 #ellipse338,
.fp-viewing-section3 #ellipse339,
.fp-viewing-section3 #ellipse340 {
  transition-delay: 0.8s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse341,
.fp-viewing-section3 #ellipse342,
.fp-viewing-section3 #ellipse343,
.fp-viewing-section3 #ellipse344,
.fp-viewing-section3 #ellipse345,
.fp-viewing-section3 #ellipse346,
.fp-viewing-section3 #ellipse347,
.fp-viewing-section3 #ellipse348,
.fp-viewing-section3 #ellipse349,
.fp-viewing-section3 #ellipse350,
.fp-viewing-section3 #ellipse351,
.fp-viewing-section3 #ellipse352,
.fp-viewing-section3 #ellipse353,
.fp-viewing-section3 #ellipse354,
.fp-viewing-section3 #ellipse355,
.fp-viewing-section3 #ellipse356,
.fp-viewing-section3 #ellipse357,
.fp-viewing-section3 #ellipse358,
.fp-viewing-section3 #ellipse359,
.fp-viewing-section3 #ellipse360 {
  transition-delay: 1.5s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse361,
.fp-viewing-section3 #ellipse362,
.fp-viewing-section3 #ellipse363,
.fp-viewing-section3 #ellipse364,
.fp-viewing-section3 #ellipse365,
.fp-viewing-section3 #ellipse366,
.fp-viewing-section3 #ellipse367,
.fp-viewing-section3 #ellipse368,
.fp-viewing-section3 #ellipse369,
.fp-viewing-section3 #ellipse370,
.fp-viewing-section3 #ellipse371,
.fp-viewing-section3 #ellipse372,
.fp-viewing-section3 #ellipse373,
.fp-viewing-section3 #ellipse374,
.fp-viewing-section3 #ellipse375,
.fp-viewing-section3 #ellipse376,
.fp-viewing-section3 #ellipse377,
.fp-viewing-section3 #ellipse378,
.fp-viewing-section3 #ellipse379,
.fp-viewing-section3 #ellipse380 {
  transition-delay: 1.5s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse381,
.fp-viewing-section3 #ellipse382,
.fp-viewing-section3 #ellipse383,
.fp-viewing-section3 #ellipse384,
.fp-viewing-section3 #ellipse385,
.fp-viewing-section3 #ellipse386,
.fp-viewing-section3 #ellipse387,
.fp-viewing-section3 #ellipse388,
.fp-viewing-section3 #ellipse389,
.fp-viewing-section3 #ellipse390,
.fp-viewing-section3 #ellipse391,
.fp-viewing-section3 #ellipse392,
.fp-viewing-section3 #ellipse393,
.fp-viewing-section3 #ellipse394,
.fp-viewing-section3 #ellipse395,
.fp-viewing-section3 #ellipse396,
.fp-viewing-section3 #ellipse397,
.fp-viewing-section3 #ellipse398,
.fp-viewing-section3 #ellipse399,
.fp-viewing-section3 #ellipse400 {
  transition-delay: 1s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse401,
.fp-viewing-section3 #ellipse402,
.fp-viewing-section3 #ellipse403,
.fp-viewing-section3 #ellipse404,
.fp-viewing-section3 #ellipse405,
.fp-viewing-section3 #ellipse406,
.fp-viewing-section3 #ellipse407,
.fp-viewing-section3 #ellipse408,
.fp-viewing-section3 #ellipse409,
.fp-viewing-section3 #ellipse410,
.fp-viewing-section3 #ellipse411,
.fp-viewing-section3 #ellipse412,
.fp-viewing-section3 #ellipse413,
.fp-viewing-section3 #ellipse414,
.fp-viewing-section3 #ellipse415,
.fp-viewing-section3 #ellipse416,
.fp-viewing-section3 #ellipse417,
.fp-viewing-section3 #ellipse418,
.fp-viewing-section3 #ellipse419,
.fp-viewing-section3 #ellipse420 {
  transition-delay: 0.5s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse421,
.fp-viewing-section3 #ellipse422,
.fp-viewing-section3 #ellipse423,
.fp-viewing-section3 #ellipse424,
.fp-viewing-section3 #ellipse425,
.fp-viewing-section3 #ellipse426,
.fp-viewing-section3 #ellipse427,
.fp-viewing-section3 #ellipse428,
.fp-viewing-section3 #ellipse429,
.fp-viewing-section3 #ellipse430,
.fp-viewing-section3 #ellipse431,
.fp-viewing-section3 #ellipse432,
.fp-viewing-section3 #ellipse433,
.fp-viewing-section3 #ellipse434,
.fp-viewing-section3 #ellipse435,
.fp-viewing-section3 #ellipse436,
.fp-viewing-section3 #ellipse437,
.fp-viewing-section3 #ellipse438,
.fp-viewing-section3 #ellipse439,
.fp-viewing-section3 #ellipse440 {
  transition-delay: 0.8s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse441,
.fp-viewing-section3 #ellipse442,
.fp-viewing-section3 #ellipse443,
.fp-viewing-section3 #ellipse444,
.fp-viewing-section3 #ellipse445,
.fp-viewing-section3 #ellipse446,
.fp-viewing-section3 #ellipse447,
.fp-viewing-section3 #ellipse448,
.fp-viewing-section3 #ellipse449,
.fp-viewing-section3 #ellipse450,
.fp-viewing-section3 #ellipse451,
.fp-viewing-section3 #ellipse452,
.fp-viewing-section3 #ellipse453,
.fp-viewing-section3 #ellipse454,
.fp-viewing-section3 #ellipse455 {
  transition-delay: 0.8s;
  opacity: 1;
}

.fp-viewing-section3 #ellipse456,
.fp-viewing-section3 #ellipse457,
.fp-viewing-section3 #ellipse458,
.fp-viewing-section3 #ellipse459,
.fp-viewing-section3 #ellipse460,
.fp-viewing-section3 #ellipse461,
.fp-viewing-section3 #ellipse462,
.fp-viewing-section3 #ellipse463,
.fp-viewing-section3 #ellipse464,
.fp-viewing-section3 #ellipse465,
.fp-viewing-section3 #ellipse466 {
  transition-delay: 1.5s;
}

.fp-viewing-section5 ellipse,
.fp-viewing-section5 circle {
  opacity: 0;
  fill: none;
}

.fp-viewing-section10 #path16 {
  fill: #003e6a;
}

.fp-viewing-section8 #path44 {
  fill: #ffffff;
}

/* Overlay sections */
/* .nonSafari .content-overlay */
.nonSafari .overlay9,
.nonSafari .overlay8,
.nonSafari .overlay10 {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 62, 106, 0.8);
  /* #003e6a */
  position: relative;
  opacity: 0;
}

.safari .overlay9,
.safari .overlay8,
.safari .overlay10 {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 62, 106, 1);
  position: relative;
  opacity: 0;
}

.scrollToSkip {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.scrollToSkip p {
  color: var(--phn-white);
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  font-family: "museo-sans", sans-serif;
}

.section-8 .safari-overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  opacity: 0;
  background: rgba(0, 62, 106, 1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-9 .safari-overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  opacity: 0;
  background: rgba(0, 62, 106, 1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-10 .safari-overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  opacity: 0;
  background: rgba(0, 62, 106, 1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content-overlay .title {
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "museo-slab", serif;
}

.content-overlay .sub-title {
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "museo-sans", sans-serif;
}

.content-overlay .content1,
.content-overlay .content2,
.content-overlay .content3,
.content-overlay .content4,
.content-overlay .content5,
.content-overlay .content6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  text-align: center;
  color: white;
}

.content-overlay .content1 p,
.content-overlay .content2 p,
.content-overlay .content3 p,
.content-overlay .content4 p,
.content-overlay .content5 p,
.content-overlay .content6 p {
  font-size: 35px;
  line-height: 42px;
  font-weight: 400;
  font-family: "museo-slab", serif;
  opacity: 0;
}

.content-overlay .content1 span {
  font-weight: 700;
  border-bottom: 7px solid #80dde5;
}

.content-overlay .content1 h3 {
  font-size: 58px;
  line-height: 70px;
  font-weight: 700;
  opacity: 0;
  font-family: "museo-sans", sans-serif;
}

.content-overlay .content2 p,
.content-overlay .content3 p,
.content-overlay .content4 p,
.content-overlay .content5 p,
.content-overlay .content6 p {
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  font-family: "museo-slab", serif;
  margin-bottom: 40px;
  opacity: 0;
}

.content-overlay .content2 div,
.content-overlay .content3 div,
.content-overlay .content4 div,
.content-overlay .content5 div,
.content-overlay .content6 div {
  display: flex;
  gap: 10px;
  text-align: left;
  align-items: center;
  max-width: 740px;
  opacity: 0;
}

.content-overlay .content2 div > p,
.content-overlay .content3 div > p,
.content-overlay .content4 div > p,
.content-overlay .content5 div > p,
.content-overlay .content6 div > p {
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  margin-bottom: 20px;
  opacity: 0;
  font-family: "museo-sans", sans-serif;
}

/* Keyframes for background and content */
@keyframes bgFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bgFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInText {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOutText {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes logoFadeIn {
  0% {
    display: none;
  }
  100% {
    display: block;
  }
}

@keyframes logoFadeout {
  0% {
    display: block;
  }
  100% {
    display: none;
  }
}

@media (max-width: 1024px) and (min-width: 600px) {
  .scroll-down-wrapper {
    bottom: 250px;
  }
  .scrollToSkip {
    bottom: 150px;
  }
}