.heroSection {
  height: fit-content;
  width: 100%;
  position: relative;
  align-items: center;
  min-height: 33em;
  max-height: 80vh;
}
@media screen and (max-width: 400px) {
  .heroSection {
    min-height: 25em;
  }
}
.heroSection .videoContainer {
  height: 100%;
  width: 100%;
}
.heroSection .videoContainer .videoElement {
  height: 100%;
  width: 100%;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}
.heroSection .videoContainer .imageElement {
  display: none;
  height: 100%;
  width: 100%;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}
/*@media screen and (max-width: 450px) {*/
/*  .heroSection .videoContainer .videoElement {*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    object-fit: contain;*/
/*    flex-shrink: 0;*/
/*    pointer-events: none;*/
/*    display: none;*/
/*  }*/
/*  .heroSection .videoContainer .imageElement {*/
/*    display: none;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    object-fit: contain;*/
/*    flex-shrink: 0;*/
/*    pointer-events: none;*/
/*    display: block;*/
/*  }*/
/*}*/
.heroSection .heroTextContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  color: var(--white);
}
.heroSection .heroTextContainer .heroHeadingContainer {
  width: 100%;
  margin-bottom: -1.5rem;
}
.heroSection .heroTextContainer .heroHeadingContainer .heroTitleSingleTextContainer {
  margin-bottom: -2rem;
}
.heroSection .heroTextContainer .heroHeadingContainer h1 {
  font-size: 10vmin;
  max-width: 30em;
  font-family: var(--mainHeaderFont);
  letter-spacing: 3px;
  margin: 0 auto;
  padding: 0em 10%;
  cursor: default;
  text-align: center;
}
.heroSection .heroTextContainer .heroHeadingContainer h1 .redLetter {
  color: var(--white);
  text-shadow: 1px 1px 1px var(--white);
  transition: 1s;
  font-size: 12vmin;
  text-shadow: 2px 2px 1px var(--red), -2px -2px 1px var(--red);
}
.heroSection .heroTextContainer .heroHeadingContainer h1 .secondredLetter {
  margin-left: -0.8em;
}
.heroSection .heroTextContainer .heroHeadingContainer h1 .thirdredLetter {
  margin-left: -1.75em;
}
.heroSection .heroTextContainer .heroHeadingContainer h1 .whiteLettering {
  opacity: 0;
  transition: 1s;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.heroSection .heroTextContainer .heroSubHeadingContainer {
  font-family: var(--secondaryHeaderFontFamily);
  font-size: 3vmin;
  max-width: 20em;
  margin: 0 auto;
  text-align: center;
}
.heroSection .heroTextContainer .heroSubHeadingContainer p {
  font-family: var(--paragraphFontFamily);
  cursor: default;
  text-shadow: 1px 1px 0px var(--black);
}
.heroSection .heroTextContainer .headerCTAlink {
  overflow: hidden;
  opacity: 0;
  transform: translateY(1em);
  transition: 0.5s ease-out;
}
.heroSection .heroTextContainer .headerCTAlink button {
  font-family: var(--paragraphFontFamily);
  min-width: 190px;
  min-height: 40px;
  border-radius: 20px;
  border: 3px solid var(--white);
  color: var(--white);
  background: var(--black);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.2s ease-in-out;
  padding: 0em 1.2em;
  z-index: 10;
  overflow: hidden;
}
.heroSection .heroTextContainer .headerCTAlink button span {
  position: absolute;
  margin: 0 auto;
  transition: 0.5s ease-in-out;
}
.heroSection .heroTextContainer .headerCTAlink button .display {
  opacity: 1;
}
.heroSection .heroTextContainer .headerCTAlink button .onHover {
  color: var(--red);
  transform: translateY(100%);
  opacity: 0;
}
.heroSection .heroTextContainer .headerCTAlink button:hover .display {
  transform: translateY(-100%);
  opacity: 0;
}
.heroSection .heroTextContainer .headerCTAlink button:hover .onHover {
  transform: translate(0%);
  opacity: 1;
}
.heroSection .heroTextContainer .headerCTAlink button:hover {
  background: var(--white);
}
@media screen and (max-width: 1000px) {
  .heroSection .heroTextContainer {
    padding: 0em 1em;
    text-align: center;
    top: 5%;
  }
  .heroSection .heroTextContainer .heroSubHeadingContainer p {
    font-size: 1rem;
  }
}

.ourVisionSection {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-top: 4em;
}
.ourVisionSection .CrosspageAnimationContainer {
  width: 100%;
  height: fit-content;
}
.ourVisionSection .CrosspageAnimationContainer .textContainer {
  width: 100%;
  height: fit-content;
  overflow: hidden;
}
.ourVisionSection .CrosspageAnimationContainer .textContainer .crosspageText {
  position: relative;
  font-family: "Rowdies", serif;
  color: rgb(14, 14, 14);
  font-size: 40vmin;
  text-shadow: rgba(255, 255, 255, 0.5) -1px 0, rgba(255, 255, 255, 0.3) 0 -1px, rgba(255, 255, 255, 0.5) 0 1px, rgba(255, 255, 255, 0.3) -1px -2px;
  cursor: default;
}
.ourVisionSection .visionContentContainer {
  color: var(--white);
  height: 100vh;
  display: flex;
}
.ourVisionSection .visionContentContainer .visonTextContainer {
  width: 100%;
  height: 100vh;
  padding: 0em 10%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ourVisionSection .visionContentContainer .visonTextContainer h3 {
  font-size: 5vmax;
  font-family: var(--mainHeaderFont);
  position: relative;
  width: fit-content;
  cursor: default;
  transition: 0.5s ease-out;
}
.ourVisionSection .visionContentContainer .visonTextContainer h3 span {
  text-shadow: 2px 2px 1px var(--red), -2px -2px 1px var(--red);
}
.ourVisionSection .visionContentContainer .visonTextContainer h3::after {
  position: absolute;
  left: 0;
  bottom: 10%;
  content: "";
  height: 2px;
  width: 0%;
  background-color: var(--red);
  transition: 1.5s ease-out;
}
.ourVisionSection .visionContentContainer .visonTextContainer .showUnderline::after {
  width: 100%;
}
.ourVisionSection .visionContentContainer .visonTextContainer p {
  font-family: var(--paragraphFontFamily);
  font-size: 1.2rem;
  cursor: default;
}
.ourVisionSection .visionContentContainer .visonTextContainer p span {
  font-weight: bolder;
  text-shadow: 1px 1px 1px var(--red), -1px -1px 1px var(--red);
}
.ourVisionSection .visionContentContainer .visionPhoneContainer {
  width: 100%;
  height: 100%;
}
.ourVisionSection .visionContentContainer .visionPhoneContainer .phoneListContainer {
  display: flex;
  transform: rotate(30deg);
  width: 100%;
  height: 100%;
}
.ourVisionSection .visionContentContainer .visionPhoneContainer .phoneListContainer .phoneContainer {
  height: 100%;
  width: 100%;
}
.ourVisionSection .visionContentContainer .visionPhoneContainer .phoneListContainer .phoneContainer .phoneList {
  transition-duration: 0.1s;
}
.ourVisionSection .visionContentContainer .visionPhoneContainer .phoneListContainer .phoneContainer .phoneListTwo {
  transform: translateY(-500px);
}
@media screen and (max-width: 1000px) {
  .ourVisionSection .visionContentContainer {
    flex-direction: column;
    margin-top: 10%;
  }
  .ourVisionSection .visionContentContainer .visonTextContainer {
    width: 80%;
    padding: 2em 10%;
    margin-bottom: 15%;
  }
}
@media screen and (max-width: 500px) {
  .ourVisionSection .visionContentContainer .visonTextContainer {
    width: 80%;
    padding: 2em 10%;
    margin-bottom: 5%;
  }
}
.ourVisionSection .gettingStartedContainer {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  justify-items: center;
  position: relative;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel {
  z-index: 5;
  position: absolute;
  top: 0;
  background-color: var(--semiTransparentDarkgrey);
  height: fit-content;
  margin: 0em 10%;
  padding: 5%;
  border-radius: 25px;
  border: 1px solid var(--white);
  box-shadow: 0px 0px 20px 5px var(--black), inset 0px 0px 20px 5px var(--black);
  margin-top: -10em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel h3 {
  color: var(--white);
  width: 100%;
  text-align: center;
  margin-bottom: 1em;
  font-size: 5vmax;
  font-family: var(--mainHeaderFont);
  position: relative;
  width: fit-content;
  margin: 0 auto;
  cursor: default;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel h3 span {
  text-shadow: 2px 2px 1px var(--red), -2px -2px 1px var(--red);
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .showUnderline::after {
  width: 100%;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer {
  color: var(--white);
  position: relative;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep {
  text-align: center;
  width: 100%;
  z-index: 5;
  display: flex;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .headerArrowContainer {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: baseline;
  position: relative;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .headerArrowContainer h4 {
  z-index: 5;
  font-family: var(--mainHeaderFont);
  font-size: 4vmax;
  min-width: 5em;
  text-align: left;
  cursor: default;
  text-shadow: 1px 1px 1px var(--red), -1px -1px 1px var(--red);
}
@media screen and (max-width: 1000px) {
  .ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .headerArrowContainer h4 {
    min-width: 90px;
  }
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .headerArrowContainer .arrow {
  transform: translateY(-2em) rotate(90deg) scale(0.5);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  transition: 1s ease-out;
  opacity: 0;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .headerArrowContainer .finalArrow {
  opacity: 0;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .headerArrowContainer .arrowShowing {
  transform: translateY(-0.5em) rotate(90deg) scale(0.5);
  opacity: 1;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .headerArrowContainer::before {
  content: "";
  top: 0;
  bottom: 0;
  left: -10%;
  width: 2px;
  height: 0%;
  background-color: var(--red);
  position: absolute;
  transition: 1.5s ease-out;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep .showUnderline::before {
  height: 70%;
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep p {
  z-index: 5;
  margin-bottom: 10%;
  padding-left: 1em;
  text-align: left;
  padding-top: 3%;
  cursor: default;
}
@media screen and (max-width: 1000px) {
  .ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep p {
    padding-top: 5px;
  }
}
.ourVisionSection .gettingStartedContainer .gettingStartedpanel .participationStepContainer .participationStep p a {
  text-decoration: underline;
  text-decoration-color: var(--white);
  color: var(--white);
}
.ourVisionSection .aboutUsContainer {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: right;
  justify-items: center;
  align-self: center;
  padding: 0em 3em;
}
.ourVisionSection .aboutUsContainer .aboutUsTextContainer {
  display: flex;
  flex-direction: column;
  justify-content: right;
  color: var(--white);
  width: 50%;
  align-self: center;
  margin-top: -10em;
  min-height: 40em;
}
@media screen and (max-width: 1000px) {
  .ourVisionSection .aboutUsContainer .aboutUsTextContainer {
    width: 45%;
    min-height: 45em;
  }
}
@media screen and (max-width: 750px) {
  .ourVisionSection .aboutUsContainer .aboutUsTextContainer {
    width: 60%;
    min-height: 55em;
  }
}
@media screen and (max-width: 600px) {
  .ourVisionSection .aboutUsContainer .aboutUsTextContainer {
    min-height: 100%;
    width: 80%;
  }
}
.ourVisionSection .aboutUsContainer .aboutUsTextContainer h3 {
  font-family: var(--mainHeaderFont);
  font-size: 5vmax;
  position: relative;
  width: fit-content;
  cursor: default;
}
.ourVisionSection .aboutUsContainer .aboutUsTextContainer h3 span {
  text-shadow: 2px 2px 1px var(--red), -2px -2px 1px var(--red);
}
.ourVisionSection .aboutUsContainer .aboutUsTextContainer h3::after {
  position: absolute;
  content: "";
  bottom: 10%;
  left: 0;
  height: 2px;
  width: 0%;
  background-color: var(--red);
  transition: 1.5s ease-out;
}
.ourVisionSection .aboutUsContainer .aboutUsTextContainer .showUnderline::after {
  width: 100%;
}
.ourVisionSection .aboutUsContainer .aboutUsTextContainer p {
  font-size: 1.2rem;
  font-family: var(--paragraphFontFamily);
  z-index: 5;
  max-width: 30em;
  cursor: default;
}
.ourVisionSection .aboutUsContainer .aboutUsTextContainer p span {
  text-shadow: 1px 1px 1px var(--red), -1px -1px 1px var(--red);
}
.ourVisionSection .ourServicesSection {
  width: 100%;
  margin-top: 2em;
  z-index: 10;
  background-color: var(--semiTransparentDarkgrey);
  padding: 3em 1em;
  position: relative;
  border-top: 1px solid var(--white);
}
.ourVisionSection .ourServicesSection .tabs {
  position: relative;
  display: grid;
}
.ourVisionSection .ourServicesSection .tabs [role=tablist] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
.ourVisionSection .ourServicesSection .tabs [role=tabpanel] {
  padding: 2rem;
}
.ourVisionSection .ourServicesSection .tabs .tablist {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton {
  min-width: 180px;
  min-height: 40px;
  border-radius: 20px;
  border: 3px solid var(--white);
  color: var(--white);
  background: var(--black);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.2s ease-in-out;
  overflow: hidden;
  font-family: var(--paragraphFontFamily);
  font-size: 0.8rem;
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton span {
  position: absolute;
  margin: 0 auto;
  transition: 0.5s ease-in-out;
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton .display {
  opacity: 1;
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton .onHover {
  color: var(--red);
  transform: translateY(100%);
  opacity: 0;
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton:hover .display {
  transform: translateY(-100%);
  opacity: 0;
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton:hover .onHover {
  transform: translate(0%);
  opacity: 1;
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton:hover {
  background: var(--white);
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton[aria-selected=true] {
  background: var(--red);
  box-shadow: none;
  color: var(--white);
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton[aria-selected=true]:hover span {
  color: var(--white);
}
.ourVisionSection .ourServicesSection .tabs .tablist .tabSelectionButton:focus {
  outline: 5px;
  color: var(--white);
}
.ourVisionSection .ourServicesSection .tabs .tabPanelDiv .tabPanelInfoContainer {
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}
@media screen and (max-width: 1000px) {
  .ourVisionSection .ourServicesSection .tabs .tabPanelDiv .tabPanelInfoContainer {
    grid-template-columns: 1fr;
  }
  .ourVisionSection .ourServicesSection .tabs .tabPanelDiv .tabPanelInfoContainer .tabPanelp {
    grid-row-start: 1;
  }
}
.ourVisionSection .ourServicesSection .tabs .tabPanelDiv .tabPanelInfoContainer img {
  width: 100%;
  object-fit: cover;
}
.ourVisionSection .ourServicesSection .tabs .tabPanelDiv .tabPanelInfoContainer p {
  color: var(--white);
  width: 100%;
  align-self: center;
  font-size: 1.2rem;
}

/*# sourceMappingURL=/main.77bb5cfd.css.map */