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



:root {
  --header-height: 80px;
  --footer-height: 60px;
    font-family: "Open sans";
}



.container {
  display: grid;
  height: 100vh;
  width: 100vw;
  position: fixed;
  padding: 0;
  margin: 0;
}


.navbar {
  display: inline-flex;
  position: fixed;
  width: 100vw;
  height: var(--header-height);
  justify-content: space-between;
  align-items: center;
  top: 0;
  background: white; /* Ensure navbar is visible */
  z-index: 1000; /* Ensure navbar is above other content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar-logo {
  padding-left: 100px;
}

.nav-links {
  text-decoration: none;
  color: black;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 80px 20px 0;
  list-style-type: none;
  font-family: "Open sans";
}

.nav-links a {
  pointer-events: auto;
}
.nav-links:hover {
  color: #724f9f;
}

.active {
  color: #724f9f; /* Purple color */
  font-weight: 700;
  /* text-decoration: underline;  Underline on hover/focus */
}

.accordion-container {
  flex: 1;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-y: auto;
  scrollbar-width: none;
  top: var(--header-height);
  bottom: var(--footer-height);
}

.accordion-item {
  display: flex;
  flex-direction: row;
  max-height: 100%;
  overflow: hidden;
}

.accordion-content a {
  color: #2771e8;
  text-decoration: none;
  font-weight: 600;
}

.accordion-content a:hover {
  text-decoration: 0.5px underline #171718;
  transition: 0.3s ease;
}
details {
  flex: 1;
  /* transition: 0.5s ease; */
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  border-right: none;
  border-left: none;
  margin: 0;
  min-width: 0;
}


details[open] {
  flex: 8;
}

details:not([open]) {
  flex: 0.35;
}

details[open] summary {
  display: none;
}


summary {
  color: white;
  padding: 20px;
  font-size: 24px;
  text-align: center;
  outline: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-content {
  padding-top: 25px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  overflow-y: auto;
  scrollbar-width: none;
  /* width: 70%;
  ma */
  /* padding: 100px 300px 100px 300px; */
  height: 100vh;
  /* position: relative; */
}

.accordion-content h1 {
  color: #724f9f;
  font-family: "Bree Serif", serif;
  margin-top: 48px;
  font-weight: 400;
  font-size: 48px;
}

.accordion-content p {
  text-align: justify;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  font-family: "Open Sans";
  font-size: 16px;
  line-height: 1.4em;
  color: #161616;
  width: 100%;
}

/* .accordion-icon{
    width:24px;
    height: 12px;
    margin-bottom: 20px;

} */
/* accordion arrow icon */
.fa-chevron-right:before {
  /* content: "\f054"; */
  padding: 19px 0px;
  display: inline-flex;
  margin-right: 8px;
}


#platform-content p {
  width: 63%;
}


details:nth-child(odd) summary {
  background-color: #724f9f;
  color: white;
  font-family: "Bree Serif";
}

details:nth-child(even) summary {
  background-color: #fbcf22;
  color: #161616;
  font-family: "Bree Serif";
}

.footer {
  display: flex;
  position: fixed;
  background-color: black;
  height: var(--footer-height);
  justify-content: center;
  align-items: center;
  bottom: 0;
  width: 100vw;
  z-index: 1000; /* Ensure footer is above other content */
}
.footer-links {
  text-decoration: none;
  display: inline-flex;
  color: white;
  justify-content: space-evenly;
  font-family: "Open sans";
  /* gap: 300px; */
  padding: 10px 10px 10px 10px;
  list-style-type: none;
}
/* home page */
.grid-image-container {
  width: 100%;
  max-width: 100vw;
  margin: auto;
}

 

.home-container {
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
}
.home {
  margin-top: var(--header-height);
  margin: var(--header-height) auto 0 auto;
  color: black;
  width: 752px;
}

.home h1 {
  color: #724f9f;
  padding-bottom: 12px;
  font-size: 48px;
  font-family: "Bree Serif";
  font-weight: 400;
  text-align: center;
}
.home p {
  text-align: center;
  font-size: 16px;
  font-family: "Open Sans";
}
.home .letter-four {
  font-size: 64px;
  color: #fbcf22;
}

.paragraph-links {
  color: #5484ff;
  text-decoration: none;
}

.paragraph-links:hover {
  color: #000510;
  text-decoration: 0.5px underline #171718;
  transition: 0.3s ease;
}
/* about page */
/* commitment accordion content*/
.accordion-commitment-subcontent {
  margin-top: 16px;
}



.accordion-commitment-subcontent h3 {
  font-family: "Open sans";
}
/* purple and yellow box content in commitmnet accordion */
#inclusion-commitment-content {
  background-color: #724f9f;
  padding: 24px;
  color: #ffffff;
  border-radius: 8px;
  font-family: "Open Sans";
}

#inclusion-commitment-content p {
  color: #ffffff;
  padding-top: 16px;
}

#partnership-commitment-content {
  background-color: #fbcf22;
  padding: 24px;
  color: #161616;
  border-radius: 8px;
}


#partnership-commitment-content p {
  padding-top: 16px;
}


/* sustainability accordion content */
#sustainability-content {
  align-items: center;
}

#sustainability-content h1 {
  font-size: 48px;
  text-align: left;
}

#sustainability-content p {
  align-items: center;
  text-align: auto;
  width: auto;
}
/* investor accordion content */
/* #investor-content {
  padding: 100px 300px 100px 52px;
} */

#investor-content h1 {
  text-align: center;
}
/* products */
#platform-content {
  display: flex;
  padding: auto;
}

 
#portal-content p {
  padding-top: 0px;
}
 

.portal-video-text {
  display: inline-flex;
  gap: 24px;
  /* width: 752.28px; */
  /* height: 200px; */
  margin-bottom: 10px;
  margin-top: 10px;
  /* align-items: center; */
  /* justify-content: center; */
}

/* styling contact us button for products and services  */
.custom-button {
  display: inline-flex;
  white-space: nowrap;
  text-decoration: none;
  width: 170px;
  height: 56px;
  color: #161616 !important;
  background-color: #fbcf22;
  font-size: 18px;
  padding: 16px;
  align-items: center;
  font-family: "Open Sans", sans-serif;
  border-radius: 8px;
  margin-top: 40px;
  gap: 8px;
  font-weight: 600;
}
/* .map-link{
  color: #0066cc !important;
  text-decoration: none !important;
} */
.text-link:hover{
 
  text-decoration: underline !important;
}


.mail-doodle {
  width: 41.85px;
  height: 28px;
}

.yellow-block-platform {
  width: 400px;
  height: 104px;
  margin-right: -300px;
  background-color: #fbcf22;
}

.purple-block-platform {
  width: 400px;
  height: 104px;
  left: 0;
  background-color: #724f9f;
}

/* restroom accordion content */
.washroom-content h4 {
  font-family: "Open Sans";
  font-size: 24px;
  font-weight: 600;
}

#restroom-content p{
  width: 88%;
}
 
.washroom-content p {
  padding-top: 8px;
}
 

.washroom-content {
  margin-bottom: 20px;
  position: relative;
}

.washroom-content::before {
  content: "";
  position: absolute;
  top: 5%;
  left: -25px;
  width: 4px;
  height: 95%;
  background-color: #724f9f;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-left: 5px solid #724f9f;
}

/* Lift accordion content */
.location h4 {
  font-family: "Open Sans" sans-serif;
  font-size: 24px;
  font-weight: 600;
}

.lift-content {
  margin-bottom: 20px;
  position: relative;
}
.lift-content h4 {
  font-family: "Open Sans";
  font-size: 24px;
  font-weight: 600;
}
.lift-content p {
  padding-top: 8px;
}
.lift-content::before {
  content: "";
  position: absolute;
  top: 6%;
  left: -25px;
  width: 4px;
  height: 93%;
  background-color: #fbcf22;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-left: 5px solid #fbcf22;
}

/* Evidences */
/* nudge theory accordion content */
.ntheory-evidences-content {
  margin-top: 20px;
  position: relative;
}
.ntheory-content p{
  width: 93%;
}
/* .ntheory-evidences-content::before {
  content: "";
  position: absolute;
  top: 2%;
  left: -25px;
  width: 4px;
  height: 100%;
  background-color: #fbcf22;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-left: 5px solid #fbcf22;
} */

/* e-paper acccordion content */

#e-paper-content p{
  width:99%;
  padding-top: 8px;
}
.e-paper-timeline::before {
  content: "";
  position: absolute;
  top: 3%;
  left: -40px;
  width: 2px;
  height: 94%;
  background-color: #724f9f;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-left: 4px solid #724f9f;
}
.e-paper-timeline {
  position: relative;
  width: auto;
  padding: 20px 0;
}
.e-paper-timeline h4 {
  font-family: "Open sans";
  font-size: 24px;
  font-weight: 600;
}
.e-paper-timeline-line {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background-color: #724f9f;
  transform: translateX(-50%);
}

.e-paper-timeline-item {
  position: relative;
  /* display: flex; */
  align-items: center;
  padding: 10px 0px;
}

.e-paper-circle {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fbcf22;
  border: 5px solid #724f9f;
  border-radius: 50%;
  margin: 0;
  left: -52px;
  bottom: 90px;
}

/* message crafting accordion content */
#message-crafting-content p{
  width:98%;
}
.message-crafting-message-container {
  display: flex;
  text-align: justify;
  font-family: "Open Sans";
  font-size: 16px;
  line-height: auto;
  justify-content: space-evenly;
}
.message-crafting-image-text-box {
  text-align: justify;
  font-family: "Open Sans" !important;
  font-size: 16px;
  line-height: auto;
  padding-top: 24px;
  display: flex;
}

.message-crafting-image-text li{
  padding-top: 10px;
}
 

#message-crafting-container h3 {
  color: #724f9f;
  font-family: "Open Sans";
  font-weight: 600;
  font-size: 24px;
  padding-top: 24px;
}

.message-crafting-message-box h4 {
  font-family: "Open Sans";
  font-size: 16px;
  font-weight: 400;
  padding: 20px 0;
}

.message-crafting-message-box img {
  width: 100%;
  height: 215px;

}

.message-crafting-image-text ol {
  font-family: "Open Sans";
  font-size: 16px;
  line-height: auto;
}

.message-crafting-ordered-list {
  font-family: "Open Sans" sans-serif;
  font-size: 16px;
  line-height: auto;
}
.list::marker {
  font-size: 8px;
}

 
.message-crafting-ordered-list ol li::marker {
  font-weight: bold;
}
 
.message-crafting-image-text {
  flex: 1;
}
 

/* services */
/* host accordion content */
.host-image-button {
  display: flex;
  justify-content: space-between;
}
.service-img .host{

  width: 473px;
  height: 358px;
  margin-top:40px;
  right:0;
 

}
/* audience accordion  */
#audience-image-button {
  display: flex;
}

#sponsor-image-button {
  display: flex;
  justify-content: space-between;
}

.contact-us-container {
  margin-top: var(--header-height);
}
.contact-us-container h1 {
  display: flex;
  color: #724f9f;
  font-family: "Bree serif";
  font-size: 64px;
  padding-top: 30px;
  font-weight: 400;
  justify-content: center;
  align-items: center;
}
.contact-us {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
  gap: 9%;
}

.address-email-container {
  display: inline-flex;
  gap: 16px;
  padding-top: 24px;
  width: 479px;
  font-family: "Open Sans";
  align-items: center;
}

.location-mail-container {
  display: flex;
  flex-direction: column;
  /* width: 440px;
  height: 176px; */
}

.email-ids {
  /* margin-top: 24px; */
  display: flex;
  flex-direction: column;
}

.carousel-container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;

 
  gap: 20px;
  margin-top: 60px;
}
 

.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
}

.carousel-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: scroll-left 20s linear infinite;
}

 
.carousel-track-reverse {
  animation: scroll-right 20s linear infinite;
}
 


.carousel-track-reverse {
  animation: scroll-right 20s linear infinite;
}

.carousel-track img {
  width: 262px;
  height: 150px;
  border-radius: 8px;
  object-fit: cover;
}

/* Left to Right Scrolling */
@keyframes scroll-right {
  from {
    transform: translateX(-30%);
  }
  to {
    transform: translateX(0%);
  }
}

/* Right to Left Scrolling */
@keyframes scroll-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-30%);
  }
}

.product-img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100vw;
  left: -228px;
}

.product-img img {
  width: 100%;
  max-width: 800px;
  height: auto;
  transform: translateY(-10px);
  position: relative;
  z-index: 2;
}

/* Borders */
.product-img::before,
.product-img::after {
  content: "";
  position: absolute;
  width: 45%;
  height: 15vh;
  z-index: 1;
}

 
.product-img::before {
  left: -9px;
  top: 57%;
  background-color: #fbcf22;
}
 

.product-img::after {
  right: -282px;
  top: 15%;
  background-color: #724f9f;
  width: 65% !important;
}

/* animation of accordions */
.delayed-fade {
  opacity: 0;
  animation: fadeIn1 1.3s ease-in-out forwards;
}

@keyframes fadeIn1 {
  0% {
    opacity: 0;
    transform: translateX(-2px);
  }
  50% {
    opacity: 0.9;
    transform: translateX(0px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
    transform: translateX(-2px);
  }
  50% {
    opacity: 0.9;
    transform: translateX(0px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.message-crafting-list li {
  font-family: "Open Sans";
  padding-top: 8px;
  margin-left: 3%;
}

.message-crafting-ordered-list li {
  font-family: "Open Sans";
  padding-top: 8px;
  margin-left: 3%;
}

 
.message-crafting-image-text ol li::marker {
  font-weight: bold;
}
 

details summary {
  cursor: pointer;
  transition: transform 0.9s ease-in-out;
}

.service-sponsor-audience-img {
  flex-direction: column;
}
/* scroll icon */
/* #scroll-icon {
    position: fixed;
    bottom: 120px; /* Adjusted to be above the footer */
/* right: 20px;
    width: 40px;
    height: 40px;
    background-color: #3498db;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    z-index: 1000;
    transition: background-color 0.3s ease;
  }
 
  #scroll-icon:hover {
    background-color: #2980b9;
  }  */

/* evidence page messages*/
.square {
  position: relative;
  width: 364px;
  height: 208px;
  border: 1.5px solid #461d7a;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #724f9f;
  font-size: 16px;
  font-family: "Open Sans";
  text-align: center;
}

.content p {
  /* position: absolute; */
  z-index: 1;
  color: #461d7a;
  text-align: center;
  width: 324px;
  margin-bottom: -8px;
}

.circle {
  width: 12px;
  height: 12px;
  margin: 6px;
  background-color: white;
  border-radius: 50%;
  border: 1.5px solid #724f9f;
  position: absolute;
}

.top-left {
  top: 0;
  left: 0;
}

.top-right {
  top: 0;
  right: 0;
}
.bottom-left {
  bottom: 0;
  left: 0;
}

.bottom-right {
  bottom: 0;
  right: 0;
}


/* About -Investor accordion*/
/* .Investor-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    justify-content: center;
    grid-auto-flow: row;
    margin: 30px 0px;
} */

/* Hamburger Icon */
.hamburger {
  font-size: 30px;
  cursor: pointer;
  color: #161616;
  margin-right: 20px;
  background: none;
  border: none;
  display: none;
}


.hamburger-sidebar{
  font-size: 30px;
  cursor: pointer;
  color: #161616;
  position: absolute;
  left: 77%;
  top: 2.5%;
}


/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  right: -300px;

  width: 185px;
  height: 100vh;
  background-color: white;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  transition: left 0.3s ease-in-out;
  overflow-y: auto;
  z-index: 1000;
}


.sidebar.open {
  right: 0;
}

/* .investor-wrapper-mobile{
  display: none !important;
} */


/* for medium devices /desktop */
 /* for medium devices /desktop */
 @media screen and (min-width: 768px) {
   
  .accordion-content {
    padding-top: 25px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: none;
    height: 100vh;
 
  }
  .footer-links {
 
    gap: 283px;
    padding: 10px 10px 10px 10px;
 
 
  }
 
  .beeimage {
    width: 100%;
    /* height: 327px; */
    margin-left: -236px !important;
    padding-top: 30px;
  }
 
  .tree-sustainability{
   
    width: auto;
    height: auto;
    margin-top: 19px;
    margin-bottom: 16px;
 
  }
 
  /* investor */
  /* .Investor-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(470px, 1fr));
   
    justify-content: center;
    align-items: start;
  } */
  .box1 {
    grid-column: 2;
    grid-row: 1;
    width: 69%;
    min-height: 504px;

    padding: 25px 50px 25px 25px;
    right: 9%;
  }
 
  .box2 {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    padding-top: 50px;
    /* left: 206px; */
    bottom: 54%;
    padding: 12px;
  }
  .box2 .box-heading {
    text-align: left;
  }
 
  .box3 {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: auto;
    /* right: 52px; */
    padding: 25px;
  }
 
  .box4 {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    /* min-height: 459px; */
    /* bottom: 319px; */
    /* left:143px; */
    padding: 25px;
  }
 
  .box5 {
    grid-column: 2;
    grid-row: 3;
    width: 60%;
    height: auto;
    justify-self: start;
    padding: 25px;
    position: relative;
    border-bottom: 0 !important;
    top: 9px;
  }
 
  .box {
    position: relative;
    background: white;
    /* border: 3.5px solid black; */
    border-right: none;
    border-left: none;
    border-top: none;
    text-align: center;
  }
 
  .right-border {
    position: absolute;
    width: 3px;
    /* background-color: black; */
    right: 0;
    border-radius: 5px;
  }
 
  .top-border {
    top: 0;
    height: 40%;
    border-radius: 5px;
  }
 
  .bottom-border {
    bottom: 0px;
    /* height: 40%; */
    border-radius: 5px;
  }
 
  .left-border {
    position: absolute;
    width: 3px;
    background-color: black;
    left: 0px;
    top: 38%;
    height: 63%;
    border-radius: 0px;
  }
 
  .small-image {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    /* border-radius: 50%; */
    /* border: 2px solid black; */
    background-color: white;
  }
 
  .box-number {
    /* left: 5px; */
    /* font-size: 70px; */
 
    /* top: 85px; */
    font-family: "Open sans";
    font-weight: 600;
    color: #724f9f;
    font-size: 100px
  }
 
  .box1 .box-number {
    text-align: right;
  }
 
  .box1 .left-border {
    top: 38%;
    height: 62.5%;
 left:1px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
 
  .box1 .box-heading-number {
    display: flex;
    justify-content: space-between;
    /* height: 100px; */
  }
  .box-heading-number .box-heading {
    font-family: "Open Sans";
    /* width: 274px; */
    display: inline-block;
    text-align: start;
    font-size: 25px;
    font-weight: 600;
  }
  .box1 .box-heading {
    align-self: flex-end;
  }
 
  .box2 {
    grid-column: 1;
    grid-row: 2;
    /* width:58.7%; */
    height: auto;
    position: relative;
    text-align: center;
    padding-top: 50px;
    /* left: 206px; */
    bottom: 54%;
    padding: 20px;

  }
 
  .box2 .left-border-top {
    position: absolute;
    left: 0;
    top: -25px;
    width: 3px;
    height: 41%;
    background-color: black;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
 
  .box2 .left-border-bottom {
    position: absolute;
    left: 0;
    top: 269px;
    width: 3px;
    height: 41%;
 
    background-color: black;
    border-radius: 5px;
  }
 
  .box2 .small-image {
    position: absolute;
    left: -39px;
    top: 47%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    /* border-radius: 50%; */
    background-color: white;
  }
 
  .box2::before,
  .box2::after {
    content: "";
    position: absolute;
    top: -25px;
    width: 35%;
    height: 3px;
    /* background-color: black; */
  }
 
  .box2::before {
    border-bottom-right-radius: 5px;
    left: 1px;
    border-top-right-radius: 5px;
  }
 
  .box2::after {
    right: -3px;
    border-bottom-left-radius: 5px;
 
    border-top-left-radius: 5px;
  }
 
  .box2 .box-number {
    position: absolute;
    top: -92px;
    left: 80%;
    transform: translateX(-50%);
    font-size: 116px;
    font-weight: bold;
    color: #724f9f;
  }
 
  .box2 .bottom-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: black;
  }
  .box2::before, .box2::after{
   top: -25px !important;
  }
  .box3 .left-border {
    border-radius: 0;
    top: 43px;
    height: 23.9%;
    left: -0.9%;
  }
 
  .box3 .bottom-border {
    border-radius: 0px;
    height: 92%;
  }
 
  .box3 .left-border-bottom {
    position: absolute;
    left: 0;
    top: 346px;
 
    width: 3px;
    height: 35%;
 
    background-color: black;
    border-radius: 5px;
  }
 
  .box3 .top-border-left {
    position: absolute;
    top: 39px;
    left: -4px;
    width: 26%;

    height: 3.5px;
    background-color: black;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
 
  .box3 .top-border-right {
    position: absolute;
    top: 39px;
 
    right: 0;
    width: 54%;
    height: 3px;
    background-color: black;
    border-radius: 5px;
  }
 
  .box3 .left-bottom-border {
    position: absolute;
    top: 211px;
    left: -2px;
    width: 3px;
    height: 60.9%;
 
    /* background-color: black; */
    /* border-radius: 5px; */
  }
 
  .box3 .right-border {
    position: absolute;
    top: 39px;
    right: 0;
    width: 3px;
    /* height: 93%; */
    background-color: black;
    border-radius: 0px;
  }
  .box3 .box-number {
    margin-right: 170px;
    margin-top: -49px;
  }
 
  .box3 .box-heading {
    left: 57px;
    text-align: end;
    position: relative;
    top: -51px;
  }
  .box3 .paragraph {
    position: relative;
    bottom: 50px;
  }
  .box3 .small-image {
    position: static !important;
    top: 0 !important;
    right: 0 !important;
    height: 60px;
    /* border-radius: 50%; */
    transform: none;
    background-color: white;
  }
 
  .box3 .investor-paragraphs {
    margin-top: -40px;
  }
 
  /* 4 */
 
  .box4 .left-border-top {
    position: absolute;
    left: 0;
    top: -7px;
    width: 3px;
    height: 38%;
    background-color: black;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
 
  .box4 .left-border-bottom {
    position: absolute;
    left: 0;
    top: 280px;
    width: 3px;
    height: 39%;
    background-color: black;
    border-radius: 5px;
  }
 
  .box4 .small-image {
    position: absolute;
    left: -43px;
    /* left: -22px; */
    top: 50%;
 
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    /* border-radius: 50%; */
    background-color: white;
  }
 
  .box4::before,
  .box4::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 19%;
 
    height: 3px;
    /* background-color: black; */
  }
 
  .box4::before {
    left: 0;
    width: 8%;
  }
 
  .box4::after {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    right: -3px;
        width: 22%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
 
  .box4 .box-number {
    position: absolute;
    top: -74px;
    right: 6% !important;
    top: -15% !important;
    transform: translateX(-50%);
    color: #724f9f;
  }
 
  .box4 .bottom-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: black;
  }
 
  .box4 .box-heading-number .box-heading {
    /* width: 203px; */
  }
  .box4 .box-heading {
    margin-top: -65px;
    margin-left: 36px;
  }
 
  .box5 .left-border {
    position: absolute;
    left: -54px;
    top: 28px;
    width: 3px;
    height: 68.1%;
    background-color: black;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
 
  .box5 .top-border-left {
    position: absolute;
    top: 28px;
    left: -54px;
    width: 22%;
    width: 18%;
    height: 3px;
    background-color: black;
    /* border-radius: 5px; */
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
 
  .box5 .top-border-right {
    position: absolute;
    top: 0px;
    right: 0;
    width: 10%;
    height: 3px;
    background-color: black;
    border-radius: 5px;
  }
 
  .box5 .right-border-top {
    position: absolute;
    top: 0px;
    right: 0;
    width: 3px;
    height: 30%;
    background-color: black;
    border-radius: 5px;
  }
 
  .box5 .right-border-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3px;
    height: 36%;
    /* background-color: black; */
    border-radius: 5px;
  }

 
  .box5 .small-image {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    /* border-radius: 50%; */
    background-color: white;
  }
  .box5 .box-number {
    margin-left: 247px;
    margin-top: -90px;
  }
 
  /* .box5 .box-heading {
    position: relative;
    top: -16px;
    left: -31px;
  } */
  .box5 .first-para {
    margin-top: -22px;
    position: relative;
    right: 54px;
    max-width: 327px;
  }
 
  .box5 .first-para {
    grid-column: span 1;
  }
  .box5 p {
    grid-column: span 2;
  }
  .box p {
    padding: 0px;
  }
  .first-para2 {
    width: 742px;
    position: absolute;
    left: -383px;
    top: 135px;
  }
 
  .box5 {
    position: relative;
  }
 
  .investor-paragraphs {
    margin-top: 15px;
  }
  .we-invite {
    background-color: #724f9f;
    color: #ffffff;
    border-radius: 8px;
    /* margin-top: 202px; */
    /* width: 741px; */
    top:3rem;
    /* left: -382px; */

    position: absolute;
    right: 19px;
  }
  .we-invite p {
    color: #ffffff;
    padding: 25px;
    text-align: center;
  }
 
  #copyrights {
    display: none; /* footer link for mobile */
  }
}

/* Responsive styling for mobile devices */
@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .desktop-links {
    display: none !important;
  }

     .contact-us-mobile{
    display: block !important;
  }

#restroom-container .accordion-item{
  bottom: 6.4vh;
}
  details {
    /* flex: 1; */
    /* transition: 0.5s ease; */
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    border-right: none;
    border-left: none;
    margin: 0;
    min-width: 0;
    bottom: 60px;
  }
  details.odd summary {
    background-color: #724f9f;  /* Color for odd items */
    color: white;
  }

  details.even summary {
    background-color: #fbcf22;  /* Color for even items */
    color: #161616;
  }


  .sidebar ul li {
    width: 100%;
    text-align: center; /* Centers the text inside the li */
  }

  .sidebar ul li a {
    border-bottom: 1.5px solid #e1e1e1; /* Border at the bottom */
    padding: 20px 0 20px 0;
  }

  .sidebar ul li:first-child a {
    border-top: 1.5px solid #e1e1e1; /* Border at the top of the first link */
  }

  .sidebar.active {
    right: 0;
  }

 
    /* applying overlay for the background-content */
  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
    backdrop-filter: blur(5px); /* Blur effect */
    visibility: hidden; /* Initially hidden */
    z-index: 999; /* Positioned below the sidebar */
    transition: visibility 0.3s ease; /* Smooth transition for visibility */
    display: block !important;
  }
 
  .navbar-logo {
    padding-left: 20px;
    align-items: center;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 20px;
    align-items: flex-start;
    padding: 20px 0;
  }
 
  .active {
    color: #724f9f; /* Remove the #724F9F color for mobile */
  }
 
  /* When the 'open' class is added to nav-links, slide it into view */
 
  /* Stack accordion items vertically on mobile */
  .accordion-container {
    position: fixed;
    bottom: 0; /* Stick to the bottom */
    left: 0;
    width: 100%;
    z-index: 1; /* Make sure it stays on top */
    background-color: #fff; /* Ensure it stands out */
    display: flex;
    flex-direction: column;
  }
 
  .accordion-item {
    display: flex;
    flex-direction: column;
  }
 
  /* Expand the header on mobile */
  .accordion-header {
    padding: 15px;
    font-size: 18px;
    background-color: #f1f1f1;
  }
 
  /* Initially show the content on mobile (you can adjust this) */
  .accordion-content {
    display: block;
  }
 
  .footer-links {
    gap: 0; /* Remove large gap for mobile */
  }
 
  /* Hide the footer desktop links  on mobile */
  .footer-links.footer-desktop {
    display: none;
  }
  .copyright-list{
    display: block !important;
  }
 
  /* Show the Copyright link on mobile */
  #copyrights {
    color: #fff;
    font-weight: 400;
  }
 
  .accordion-header {
    font-size: 24px;
  }
  .accordion-header .fa-chevron-right:before {
    margin-left: 20px;
 
    transform: rotate(-90deg);
  }
  details[open] {
    flex: 3;
  }
  .accordion-content {
    padding: 15px;
  }
 
  .accordion-content h1 {
    margin-top: 75px;
    font-size: 32px;
    padding-top: 0;
  }
  .navbar {
    height: 80px;
  }
  .mobile-beeimage {
    display: block;
  }
  .desktop-beeimage {
    display: none;
  }
 
  .accordion-container {
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
  }
 
  .accordion-item {
    flex-direction: column;
    width: 100%;
  }
 
  details {
    width: 100%;
    flex: none;
    height: auto;
  }
 
  details[open] {
    flex: 5;
    width: 100%;
  }
 
  details:not([open]) {
    flex: none;
    width: 100%;
  }
 
  .accordion-item .accordion-content {
    padding: 10px;
    /* height: calc(100vh - 110px - var(--header-height) - var(--footer-height)); */
    height: 70vh ;
  }
 
  summary {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    height: 60px;
  }
 
  /* About Page  */
  .text-container {
    display: flex;
    flex-direction: column;
  }
 
  p:first-of-type {
    order: 0;
  }
 
  .beeimage {
    order: 1;
  }
 
  p:not(:first-of-type) {
    order: 2;
  }
  /* sustainability accordion mobile */
  #sustainability-content h1 {
    font-size: 27px;
    text-align: left;
  }
  #sustainability-content p {
    align-items: center;
    text-align: auto;
    width: 100%;
  }
 
 
  p:first-of-type {
    order: 0;
  }
  .tree-sustainability{
    order: 1;
    width: 80%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 16px;
 
  }
 
  p:not(:first-of-type) {
    order: 2;
  }
  /* investor accordion */
 /* investor accordion */
 /* #investor-content {
  padding: 0 15px;
} */
 
#investor-content h1 {
  text-align: left;
  margin-top: 78px;
}
.box {
  padding: 15px;
  /* border: 3.5px solid #161616; */
  margin: 35px 0;
}
.box-heading {
  font-family: "Open Sans";
  /* color: #724f9f; */
  font-size: 20px;
  font-weight: bold;
  display: block;
}
.box1 {
  grid-column: 2;
  grid-row: 1;
  /* width: 380px; */
  height: auto;
  padding:15px;
  border: 3px solid #161616;
  border-top: none;
  border-left: none;
  position: relative;
}
 
.box1 .left-border {
  position: absolute;
      top: 9.5%;
      height: 90.7%;
    
      width: 2.5px;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  left: 0;
}

.box1 .top-border {
  position: absolute;
  height: 2.5px;
  left: 41px;

  width: 93.5%;

  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  top: -2px;
}

.box1 .box-number {
  align-self: center;
  left: -3px;
  font-size: 77px;
  position: absolute;
  top: -43px;
  font-family: "Open sans";
  font-weight: 600;
  color: #724f9f;
}

.box1 .box-heading {
  font-family: "Open Sans";
  /* color: #724f9f; */
  font-size: 20px;
  font-weight: bold;
  margin-left: 25px;
  margin-top: -15px;
  width: 90%;
  display: block;
}

.box1 .small-image{
  bottom: -9px;
}
 



/* box 2 investor */
.box2 {
  grid-column: 2;
  grid-row: 1;

  /* width: 380px; */
  height: auto;
 

  padding: 15px;
  border: 3px solid #161616;
  border-top: none;
  border-left: none;
  position: relative;
}

.box2 .left-border , .box4 .left-border {
  position: absolute;
  top: 1px;
  height: 100%;
  left: 0px;
  width: 2.5px;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px
}

.box2 .top-border , .box4 .top-border {
  position: absolute;
      height: 2.5px;
      left: 0px;
      width: 74%;
      background-color: #161616;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      top: -1px;

 
}
 

.box2 .box-number, .box4 .box-number{
  font-family: 'Open Sans';
  font-size: 77px;
  color: #724f9f;
  font-weight: 700;
  position: absolute;

  right: 13%;
  top: -8%;
}
 

/* box 3 investor */
.box3 {
  grid-column: 2;
  grid-row: 1;

  padding: 15px;
  /* border: 3px solid #161616; */
  border-top: none;
  border-left: none;
  position: relative;
}

 
.box3 .left-border {
  position: absolute;
      top: 55px;
      height: 85.5%;

      left: 0px;
      width: 2.5px;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.box3 .top-border {
  position: absolute;
      height: 2.5px;
      left: 62px;

      background-color: #161616;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      top: -1px;
 
}

.box3 .box-number {
  align-self: center;
  left: 5px;
  font-size: 77px;
  position: absolute;
  top: -43px;
  font-family: "Open sans";
  font-weight: 600;
  color: #724f9f;
}

.box3 .box-heading {
  font-family: "Open Sans";
  /* color: #724f9f; */
  font-size: 20px;
  font-weight: bold;
  margin-left: 47px;
  margin-top: -15px;
  width: 90%;
  display: block;
}

 
.box4 {
  grid-column: 2;
  grid-row: 1;
  /* width: 380px; */
  height: auto;
  padding: 15px;
  border: 3px solid #161616;
  border-top: none;
  border-left: none;
  position: relative;
}


.box4::after , .box2::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 10%;
  height: 2.5px;
  right: -2px;
  background-color: #161616;
}

 
 
 
 
.box5 .left-border {
  position: absolute;
  top: 28px;
  width: 3px;
  height: 68.1%;

      width: 2.5px;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.box5 .top-border {
  position: absolute;
  height: 2.5px;
  left: 41px;
  width: 86.2% !important;
  /* background-color: #161616; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  top: -2px;
}

.box5 .box-number {
  align-self: center;
 left: 56%;
        font-size: 77px;
        position: absolute;
        top: 36%;
  font-family: "Open sans";
  font-weight: 600;
  color: #724f9f;
}

.box5 .box-heading{
  position: absolute;
  right: 12px;
  top: 11px;
}
.content-image img{
  width: 95%;
    padding: 25px;
}

/* .investor-wrapper-desktop{
display: none;
} */
/* .investor-wrapper-mobile{
display: block !important;
} */
.investor-paragraphs {
width: 100%;
text-align: justify;
position: relative;
}

/* Container for dynamically styling last three lines */
.last-lines {
display: flex;
flex-direction: column;
position: relative;
}

/* Make last 3 lines gradually shorter */
.box1 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
}

/* Automatically adjust the width of last three lines */
.box1 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box1 .last-lines p:nth-last-child(3) { width: 85%; }
.box1 .last-lines p:nth-last-child(2) { width: 70%;         padding-top: 0;
}
.box1 .last-lines p:nth-last-child(1) { width: 55%; }

/* Small image positioning */
.box1 .small-image {
width: 84px;
      height: auto;
      position: absolute;
      right: 0;
      bottom: 0;
}
.box2 .last-lines{
align-items: end;
width: 100%;
display: flex
;
flex-direction: column;
position: relative;


}
/* Make last 3 lines gradually shorter */
.box2 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
padding-top: 10px;
}
/* Automatically adjust the width of last three lines */
.box2 .last-lines p::before {
content: "";
display: block;
height: 0;
}

 
.box2 .last-lines p:nth-child(1) {                 padding-top: 5px;
 

width: 69%;
}
.box2 .last-lines p:nth-child(2) { width: 70%;         padding-top: 0;
}

/* Small image positioning */
.box2 .small-image {
width: 84px;
height: auto;
position: absolute;
left: -10px;
bottom: 136px;
}
 
 

/* Make last 3 lines gradually shorter */
.box3 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
}

/* Automatically adjust the width of last three lines */
.box3 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box3 .last-lines p:nth-last-child(3) { width: 85%; }
.box3 .last-lines p:nth-last-child(2) { width: 70%;         padding-top: 0;
}
.box1 .last-lines p:nth-last-child(1) { width: 55%; }

/* Small image positioning */
.box3 .small-image {
width: 84px;
      height: auto;
      position: absolute;
      right: 0;
      bottom: 0;
}

.box4 .last-lines{
align-items: end;
width: 100%;
display: flex
;
flex-direction: column;
position: relative;

}
/* Make last 3 lines gradually shorter */
.box4 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
padding-top: 10px;
}

/* Automatically adjust the width of last three lines */
.box4 .last-lines p::before {
content: "";
display: block;
height: 0;
}

 
.box4 .last-lines p:nth-child(1) {                 padding-top: 5px;
 

width: 75%;
}
.box4 .last-lines p:nth-child(2) { width: 70%;         padding-top: 0;
}

/* Small image positioning */
.box4 .small-image {
width: 84px;
height: auto;
position: absolute;
left: -10px;
bottom: 21px;
}
.box4 .last-lines{
align-items: end;
width: 100%;
display: flex
;
flex-direction: column;
position: relative;

 
}
 
.box5 {
grid-column: 2;
grid-row: 1;
/* width: 380px; */
height: auto;


}

.box5 {
grid-column: 2;
grid-row: 1;
width: 380px;
height: 433px;
padding: 25px 25px 25px 25px;
border: 3px solid #161616;
border-top: none;
border-left: none;
position: relative;
}
.box5 .investor-paragraphs{
top:12px;
}
.box5 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
}

/* Automatically adjust the width of last three lines */
.box5 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box5 .last-lines p:nth-last-child(3) { width: 85%; }
.box5 .last-lines p:nth-last-child(2) { width: 70%;         padding-top: 0;
}
.box5 .last-lines p:nth-last-child(1) { width: 55%; }

/* Small image positioning */
.box5 .small-image {
width: 84px;
      height: auto;
      position: absolute;
      right: 0;
      bottom: 0;
}

.we-invite{
background: #724f9f;
padding: 7px 15px;
bottom: 25px;
position: relative;
top:3rem;



}
.we-invite p{
color: white;
text-align: center;

padding: 10px;
}
 
 
 
 
 



  /* products */
  /* platform accordion */

  #platform-content{
    padding: 15px;
    height: 82vh;
    overflow-x: hidden;
  }
  #platform-content p {
    width: 100%;
  }

  
  
  #platform-content .custom-button{
    position: absolute;
    bottom: -34%;
    margin-top: 0;
    right: 33%;
  }

  .product-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    left: -19px;
}
  .product-img img {
    height: auto;
    transform: translateY(-10px);
    position: relative;
    z-index: 2;
    width: 75%;
  }
   
  .product-img::before, .product-img::after {
    content: "";
    position: absolute;
    width: 48%;
    height: 6vh;
    z-index: 1;
}


.product-img::before {
  left: -19px;
  top: 57%;
  background-color: #fbcf22;
}


.product-img::after {
  right: 0;
  top: 15%;
  background-color: #724f9f;
  width: 33% !important;
}
  /* portal accordion */

  #portal-content{
    height: 82vh;

  }

  .portal-video-text {
    display: flex;
    flex-direction: column;
    height: auto;

   
  }
 
  .portal-video-text video{
    order: 2;
  }
 
  .portal-video-text p{
    order: 1;
  }
 

    
  
  
  .portal-video-text video{
    order: 2;
  }

  .portal-video-text p{
    order: 1;
  }
  #portal-content .custom-button{
    position: absolute;
    right: 33%;
    margin-top: 0;
  }

  /* services */
  /* .contact-us-services-mobile{    
  } */

  .service-img{
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
  }
  .service-img .host{
    margin-top: 0 !important;
  }

  

  #services-host-contact-button img{
    margin-top: 0 !important;
  }
  /* location page */
  #restroom-content{
    height: 82vh !important;

 
  }
 

 
  .washroom-content p {
    margin-left: 10px;
 
  }
  .washroom-content h4 {
    margin-left: 10px;
  }
/* .washroom-content::before {


  } */

  #lift-content{
    height: 82vh !important;
  }
  
  
  .washroom-content:nth-child(odd) p {
    margin-left: 14px;

  }
  .washroom-content:nth-child(even) p {
    margin-right: 14px;
    

  }
  .washroom-content:nth-child(odd) h4 {
    margin-left: 14px;
    
  }
  .washroom-content:nth-child(even) h4 {
    margin-right: 14px;
    text-align: right;
    
  }
  .washroom-content:nth-child(odd)::before { 
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 1px;
  height: 100%;
  background-color: #724f9f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* border-left: 5px solid #724f9f; */
  /* border-radius: 5px; */
}

.washroom-content:nth-child(even)::before { 
  content: "";
  position: absolute;
  top: 0;
  left: 99%;
  width: 1px;
  height: 100%;
  background-color: #724f9f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}


.lift-content{
  display: flex;
  flex-direction: column;
}

 


.lift-content:nth-child(odd)::before{

  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 1px;
  height: 100%;
  background-color: #fbcf22;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* border-left: 5px solid #724f9f; */
  /* border-radius: 5px; */
}

.lift-content p {
  margin-left: 14px;
}
.lift-content-h3 {
  display: none !important;
}
.lift-content h4 {
  margin-left: 14px;
}
 
 
.lift-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 1px;
  height: 100%;
  background-color: #fbcf22;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* border-left: 5px solid #724f9f; */
  /* border-radius: 5px; */
}

.lift-content:nth-child(even)::before{
  content: "";
  position: absolute;
  top: 0;
  left: 99%;
  width: 1px;
  height: 100%;
  background-color: #fbcf22;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* border-left: 5px solid #724f9f; */
  /* border-radius: 5px; */
}
.lift-content:nth-child(odd) p {
  margin-left: 14px;
}
.lift-content:nth-child(even) p {
  margin-right: 14px;
}
.lift-content-h3 {
  display: none !important;
}

.lift-content:nth-child(odd) h4 {
  margin-left: 14px;
  
}
.lift-content:nth-child(even) h4 {
  margin-right: 14px;
  text-align: right;
}





#lift-content img{
  width: 100% !important;
  height: auto !important;
  order: 0;
}

 
/* evidences */
/* ntheory accordion */

.square{
  width: 100%;
}
 

 


/* evidences */
/* ntheory accordion */

#nudge-theory-content{
  height: 80vh !important;
}


#nudge-theory-content img{
  width: 100% !important;
  height: auto !important;
}





 
.ntheory-content p{
  margin-left: 10px;
}
 
/* e-paper-accordion */
 

 

 


.ntheory-content p{
  margin-left: 11px;
}

/* e-paper-accordion */

#e-paper-content{
  height: 80vh !important;

}


#e-paper-content img{
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

 
.e-paper-paragraph::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -3px;

}
.e-paper-paragraph {
  position: relative;
}



.e-paper-timeline-item:nth-child(even)::after{
  content: "";
  position: absolute;
  top: 10px;
  right: -3px;

  width: 5px;
  height: 95%;
  background-color: #724f9f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

 
.e-paper-paragraph p{
  margin-left: 12px;
}
 
.e-paper-paragraph h4{
  margin-left: 12px;
}
/* message-crafting accordion */
 
#message-crafting-content{
  height: 75vh !important;
}
.e-paper-timeline-item:nth-child(odd)::before{
  content: "";
  position: absolute;
  top: 10px;
  left: -3px !important;
  width: 5px;
  height: 95%;
  background-color: #724f9f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.e-paper-timeline-item:nth-child(odd) p{
  margin-left: 14px;
} 
.e-paper-timeline-item:nth-child(even) p{
  margin-right: 14px;
} 

.e-paper-timeline-item:nth-child(odd) h4{
  margin-left: 14px;
  text-align: left !important;
} 

.e-paper-timeline-item:nth-child(even) h4{
  margin-right: 14px;
  text-align: right;
} 
/* message-crafting accordion */


.message-crafting-list li {
  font-family: "Open Sans";
  padding-top: 8px;
  margin-left: 18px;

}
.message-crafting-message-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: justify;
  font-family: "Open Sans";
  font-size: 16px;
}

.message-crafting-image-text-box{
  display: flex;
  flex-direction: column;
}
.message-crafting-image-text{
  margin-left: 5px !important;
}

 
.message-crafting-image-text li{
  margin-left: 15px;

}
.message-crafting-ordered-list li{
  margin-left: 15px !important;
  margin-top: 10px;
  text-align: justify;
}

.message-crafting-ordered-list{
  margin-left: 5px !important;
}

 

/* contact page */
.contact-us {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-left: -52px;
  width: 100%;
}




.contact-us-container h1 {
  display: flex;
  color: #724f9f;
  font-family: "Open sans";
  font-size: 20px;
  /* padding-top: 30px; */
  font-weight: bold;
  justify-content: center;
  align-items: center;
  margin-right: 85px;

 
 
}
 
 
.location-mail-container {
  display: flex;
  flex-direction: column;
 
 
}
 






/* .location-mail-container {
  display: flex;
  flex-direction: column;


} */


.address-email-container{
  font-size: 16px !important;
  margin-left: 100px !important;
}

 

.contact-us-image-text{
  display: grid;
  /* grid-template-rows: auto auto; */
}

 
.contact-us-image-text img{
  order: 0;
}
 
}
 
 /* Ipad (Landscape) */
 @media only screen and (max-width: 1024px) and (orientation: landscape) {
  /* #purpose-content {
      padding: 105px calc(42vw - 340px) 60px calc(53vw - 375px);
      max-width: 865px;
 
  } */
  /* #commitment-content{
      padding:100px calc(65vw - 616px) 100px calc(66vw - 548px);
    } */
    #sustainability-content{
      align-items: start;
      padding: 100px calc(62vw - 612px) 100px calc(6vw - 618px)
      ;
    }
    /* #investor-content{
      padding:98px calc(45vw - 616px) 100px calc(50vw - 664px);
    } */
    details:not([open]) {
      flex:0.5
    }
    .nav-links{
      padding:20px 38px 20px 30px;
    }
    .beeimage{
      margin-left:-167px !important;
    }
    .box1 {
      width: 94%;
      min-height: 504px;
      right: 10%;
      /* width:397px !important; */
    }
  
    .box2{
      /* width: 311px  !important; */
      grid-column: 1;
        grid-row: 2;
        width: 68.7%;
        height: auto;
        position: relative;
        text-align: center;
        padding-top: 50px;
        left: 206px;
        bottom: 67.2%;
        padding: 20px;
      left: 22.9% !important;
    }

    .box4{
   
      /* width: 357px !important; */
   
      left: 89px !important;
 
    }
    .box1 .left-border {
     top: 34.7% !important;
     height: 65.5%;
    }
    .box2::before, .box2::after{
      top: 30px !important;
 
    }
    .box2 .left-border-top{
      top:30px;
    }
    .box2 .left-border-bottom{
      top: 310px;
    }
    .box2 .box-number{
      font-size: 100px;
      top: -50px;
    }
    .box3 {
      width: 100%;
      right:35px;
     
    }
    .box3 .right-border{
      top: 25px;
      height: 96%;
    }
    .box3 .top-border{
   
  top: 25px !important;
    }
    .box3 .left-border{
      top: 28px;
      height: 15.6%;
    }
    .box3 .top-border-left{
      width: 19%;
    }
    .box3 .left-bottom-border{
      top: 166px;
      left: -2px;
      width: 3px;
      height: 72.9%;
    }
    .box3 .box-number{
      margin-right:140px;
    }
    .box4{
      left:107px !important;
      bottom: 427px;
      min-height: 555px;
    }
    .box4::before, .box4::after {
      content: "";
      position: absolute;
      top: 0px;
    }
    .box4::after{
      right: -3px !important;
      width:8% !important;
 
    }
    .box4 .box-heading{
      margin-left:75px;
    }
    .box4 .left-border-bottom {
      position: absolute;
      left: 1px;
      top: 337px;
    }
    .box5{
      width: 86%;

    }
    .box5 .box-number{
      margin-left:212px;
    }

    .first-para2 {
 
      left: -419px !important;
    }
    .box5 .left-border{
      left: -37px;
      height: 60.1%;
    
    }
    .box5 .top-border-left{
      top: 0px;
      left: -11%;
    }
   .box5 .first-para{
            right: 31px;
        position: relative;

   }
 /* .we-invite{
  width: 758px;
 } */
 .product-img{
  left:-207px;
 }
    .product-img::before, .product-img::after{
      height: 7vh;
    }
 #platform-content{
  padding:  calc(45vw - 352px) 180px calc(50vw - 321px) !important;
 }
 .footer-links{
  gap:0 !important;
 }
 #host-content{
  padding: calc(45vw - 352px) 124px calc(50vw - 321px);
 }
 #sponsor-content{
  padding: calc(45vw - 352px) 136px calc(50vw - 321px);
 }
 #audience-content{
  padding: calc(43vw - 352px) 83px calc(50vw - 279px);
 
}
 #n4g-content{
  padding: calc(43vw - 352px) 83px calc(50vw - 279px);
 
}
#audience-content .service-img{
  width: 80% !important;
  height: auto !important;
}
#restroom-content{
  padding: calc(45vw - 352px) 172px calc(50vw - 321px);
}
#lift-content{
  padding: calc(45vw - 352px) 125px calc(50vw - 321px);
}
#nudge-theory-content{
  padding: calc(45vw - 352px) 172px calc(50vw - 321px);
}
#e-paper-content{
  padding: calc(45vw - 352px) 172px calc(50vw - 321px);
}
#e-paper-content img{
  width: 100% !important;
}
#message-crafting-content{
  padding: calc(45vw - 352px) 110px calc(50vw - 321px);
}
#message-crafting-content .square{
 width: 100% !important;
}
#portal-content{
  padding: calc(42vw - 352px) 110px calc(50vw - 321px);
}

}
 
/* @media (min-aspect-ratio: 16/9) {
 .footer-links{
  gap: 0 !important;
 }
} */
 
/* Ipad landscape */
 
/* @media only screen and (device-width: 1024px) and (device-height: 1366px) and (orientation: landscape) {
  .footer-links{
      gap: 0 !important;
     }
      .beeimage{
        margin-left: -151px !important
      }
      .product-img{
        left: -200px;
      }
      .product-img::before {
        left: -9px;
    
      }
      .product-img::before, .product-img::after {
       
        height: 12vh;
      }
} */

/* desktop */
@media (min-width: 1200px) {
  /* .footer-links {
   
    gap: 300px;
    padding: 10px 10px 10px 10px;
 
  } */
  .accordion-content{
    height:100vh ;
    /* width: 70%; */
    margin: 0 auto;
      padding: 100px calc(45vw - 538px) 100px calc(50vw - 532px);
  }
  /* #purpose-content{
      padding: 100px calc(45vw - 538px) 100px calc(50vw - 532px);
  } */
   
/* #commitment-content{
  padding:100px calc(45vw - 473px) 100px calc(50vw - 590px);
} */
#sustainability-content{
  padding: 80px 0px;
}
#sustainability-content .text-container{
    padding: 0 10% 4% 10%;
  }
/* #investor-content{
  padding:98px calc(45vw - 666px) 100px calc(50vw - 706px);
} */
 /* .accordion-content{
  padding:  100px calc(45vw - 538px) 100px calc(50vw - 532px);
 } */
 
 #portal-content{
  padding:94px calc(45vw - 319px) 100px calc(50vw - 596px);
 }
 #sponsor-content{
  padding:100px calc(45vw - 478px) 100px calc(50vw - 594px);
 }
 #audience-content{
  padding:100px calc(45vw - 390px) 100px calc(50vw - 651px);
 }
 #lift-content{
  padding: 100px calc(45vw - 360px) 100px calc(50vw - 593px);
 }
 #e-paper-content{
  padding: 100px calc(45vw - 422px) 100px calc(50vw - 595px);
 }
 #message-crafting-content{
  padding: 100px calc(51vw - 454px) 100px calc(42vw - 506px);
 }
 .box1 .left-border{
  top: 36%;
  height: 64%;
 }
 .box2{
  left:196px
 }
 .box2::before, .box2::after{
  top:-24px;
 }
 .box1 .left-border-bottom{
  top:283px;
 }
 .box3 .left-border{
  top: 42px;
  height: 25%;
 }
 .box2 .left-border-bottom{
  top:283px;
 }
 .box4{
  width: 69.4%;
  min-height: 459px;
  bottom: 329px;
  left: 131px;
 }
 .box3 .left-bottom-border{
  top: 221px;
  left: -2px;
  width: 3px;
  height: 60.6%;

 }
 .box5 .left-border{
  height: 61%;
 }
 .box5 .box-number {
  margin-left: 221px;
 }
 /* .footer-links{
  gap:0 !important;
 } */
}
.message-crafting-image-text{
  margin-left: 31px;

}

/* details {

  transition: transform 0.3s ease;
}

details[open] {
  transform: translateX(9px); 
} */

/* details {
  transition: transform 0.4s ease-in-out;
}

details[open] {
  transform: translateX(9px); 
} */

@media screen and (min-width:1440px) {
  .box1 .left-border {
    top: 38%;
    left: 1px;
    height: 62.1%;
  }
  .box2 {
    left:206px;
  }
  .box2::after {
    right: -3px;
  }
  .box2 .left-border-bottom {
    top: 271px;
    height: 38%;
  }
  .box2 .box-heading {
    margin-top: 30px;
}
  .box3 .box-number {
    margin-right: 145px;
  }

  .box3 .box-heading {
    left: 104px;
    top: -55px;
  }
  .box3 .left-bottom-border {
    top: 200px;
   
    height: 63%;
  }
  .box3 .left-border {

    height: 19.7%;
  }
  .box4 {
    width: 69.5%;
    left: 140px;
  }
  .box4::after {

    right: -3px;
  }

  .box5 .left-border {
    height: 60.5%;
  }
}








/* Responsive styling for mobile devices */
@media screen and (min-width: 320px) and (max-width: 768px) {
  #nudge-logo{
    width: 70%;
  }
  .fa-bars:before, .fa-navicon:before{
    font-size: 70%;
  }
  .hamburger {
    display: block;
  }
  .desktop-links {
    display: none !important;
  }

  details {
    /* flex: 1; */
    /* transition: 0.5s ease; */
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    border-right: none;
    border-left: none;
    margin: 0;
    min-width: 0;
    bottom: 60px;
  }
  details.odd summary {
    background-color: #724f9f;  /* Color for odd items */
    color: white;
  }

  details.even summary {
    background-color: #fbcf22;  /* Color for even items */
    color: #161616;
  }


  .sidebar ul li {
    width: 100%;
    text-align: center; /* Centers the text inside the li */
  }

  .sidebar ul li a {
    border-bottom: 1.5px solid #e1e1e1; /* Border at the bottom */
    padding: 20px 0 20px 0;
  }

  .sidebar ul li:first-child a {
    border-top: 1.5px solid #e1e1e1; /* Border at the top of the first link */
  }

  .sidebar.active {
    right: 0;
  }

  #e-paper-content p{
    width: 92%;
    
  }
 
    /* applying overlay for the background-content */
  #overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
    backdrop-filter: blur(5px); /* Blur effect */
    visibility: hidden; /* Initially hidden */
    z-index: 999; /* Positioned below the sidebar */
    transition: visibility 0.3s ease; /* Smooth transition for visibility */
  }

  .navbar-logo {
    padding-left: 20px;
    align-items: center;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: 20px;
    align-items: center;
    padding: 20px 0;
  }

  .active {
    color: #724f9f; /* Remove the #724F9F color for mobile */
  }

  /* When the 'open' class is added to nav-links, slide it into view */

  /* Stack accordion items vertically on mobile */
  .accordion-container {
    position: fixed;
    bottom: 0; /* Stick to the bottom */
    left: 0;
    width: 100%;
    z-index: 1; /* Make sure it stays on top */
    background-color: #fff; /* Ensure it stands out */
    display: flex;
    flex-direction: column;
  }

  .accordion-item {
    display: flex;
    flex-direction: column;
  }

  /* Expand the header on mobile */
  .accordion-header {
    padding: 15px;
    font-size: 18px;
    background-color: #f1f1f1;
  }

  /* Initially show the content on mobile (you can adjust this) */
  .accordion-content {
    display: block;
  }

  .restroom-img-container{
    display: flex;
    flex-direction: column !important;
  }

    .restroom-img-container img{
    width: 100% !important;
    height: 100% !important ;
  }
  .restrooms-mobilepara {

    width: 100% !important;
  }
  .lift-content p{
    width:92%;
  }
  .footer{
    height: 7vh !important;
  }
  .footer-links {
    gap: 0; /* Remove large gap for mobile */
  }

  /* Hide the footer desktop links  on mobile */
  .footer-links.footer-desktop {
    display: none;
  }
  .copyright-list{
    display: block !important;
  }

  /* Show the Copyright link on mobile */
  #copyrights {
    color: #fff;
    font-weight: 400;
  }

  .accordion-header {
    font-size: 22px;
  }
  .accordion-header .fa-chevron-right:before {
    margin-left: 20px;

    transform: rotate(-90deg);
  }
  details[open] {
    flex: 3;
  }
  .accordion-content {
    padding: 15px;
  }

  .accordion-content h1 {
    margin-top: 75px;
    font-size: 32px;
    padding-top: 0;
  }
  .navbar {
    height: 80px;
  }
  .mobile-beeimage {
    display: block;
  }
  .desktop-beeimage {
    display: none;
  }

  .accordion-container {
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
  }

  .accordion-item {
    flex-direction: column;
    width: 100%;
    bottom: 7vh;
  }

  details {
    width: 100%;
    flex: none;
    height: auto;
  }

  details[open] {
    flex: 5;
    width: 100%;
  }

  details:not([open]) {
    flex: none;
    width: 100%;
  }

  .accordion-item .accordion-content {
    padding: 10px;
    height: calc(100vh - 10vh - var(--header-height) - var(--footer-height));
  }

  summary {
    writing-mode: horizontal-tb;
    transform: rotate(0deg);
    height: 6vh;
  }

  /* About Page  */
  .text-container {
    display: flex;
    flex-direction: column;
  }

  p:first-of-type {
    order: 0;
  }

  .beeimage {
    order: 1;
  }

  p:not(:first-of-type) {
    order: 2;
  }
  /* sustainability accordion mobile */
  #sustainability-content h1 {
    font-size: 27px;
    text-align: left;
  }
  #sustainability-content p {
    align-items: center;
    text-align: auto;
    width: 100%;
  }
 

  p:first-of-type {
    order: 0;
  }
  .tree-sustainability{
    order: 1;
    width: 100% !important;
    height: auto;
    margin-top: 15px;
    margin-bottom: 16px;


  }

  p:not(:first-of-type) {
    order: 2;
  }
  /* investor accordion */
 /* investor accordion */
 /* #investor-content {
  padding: 0 15px;
} */

#investor-content h1 {
  text-align: left;
  margin-top: 48px;
}
.box {
  /* padding: 25px 25px 25px 25px; */
  /* border: 3px solid #161616; */
  margin: 35px 0;
}
.box-heading {
  font-family: "Open Sans";
  /* color: #724f9f; */
  font-size: 20px;
  font-weight: bold;
  display: block;
  padding-top: 17px;
}
.box1 {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  /* padding: 25px 25px 25px 25px; */
  border: 3px solid #161616;
  border-top: none;
  border-left: none;
  position: relative;
}

.box1 .left-border {
  position: absolute;
      top: 9.5%;
      height: 90.7%;
      left: 0px;
      width: 2.5px;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.box1 .top-border {
  width: 94.3%;
  position: absolute;
  height: 2.5px;
  right: 0;
  /* width: 100%; */
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  top: 0px;
}


.box1 .box-number {
  align-self: center;
  left: -5px;
  font-size: 77px;
  position: absolute;
  top: -20px;
  font-family: "Open sans";
  font-weight: 600;
  color: #724f9f;
}

.box1 .box-heading {
  font-family: "Open Sans";
  /* color: #724f9f; */
  font-size: 20px;
  font-weight: bold;
  margin-left: 25px;
  margin-top: -15px;
  width: 90%;
  display: block;
}

/* box 2 investor */
.box2 {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
top:1rem;
  padding: 15px;
  border: 3px solid #161616;
  border-top: none;
  border-left: none;
  position: relative;
}

.box2 .left-border , .box4 .left-border {
  position: absolute;
  top: 1px;
  height: 100%;
  left: 0px;
  width: 2.5px;
  /* background-color: #161616; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px
}

.box2 .top-border , .box4 .top-border {
  position: absolute;
      height: 2.5px;
      left: 0px;
      width: 71%;
      background-color: #161616;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      top: 0px;

}

.box2 .box-number, .box4 .box-number{
  font-family: 'Open Sans';
  font-size: 77px;
  color: #724f9f;
  font-weight: 700;
  position: absolute;
  right: 13%;
  top: -6%;
}

/* box 3 investor */
.box3 {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  padding: 25px 25px 25px 25px;
  border: 3px solid #161616;
  border-top: none;
  border-left: none;
  position: relative;
   top:2rem;
}

.box3 .left-border {
  position: absolute;
            top: 9%;
        height: 91%;
      left: 0px;
      width: 2.5px;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.box3 .top-border {
  position: absolute;
      height: 2.5px;
      left: 62px;
      width:85%;
      background-color: #161616;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      top: -1px;
 
}

.box3 .box-number {
  align-self: center;
  left: 5px;
  font-size: 77px;
  position: absolute;
          top: -4%;

  font-family: "Open sans";
  font-weight: 600;
  color: #724f9f;
}

.box3 .box-heading {
  font-family: "Open Sans";
  /* color: #724f9f; */
  font-size: 20px;
  font-weight: bold;
  /* margin-left: 47px; */
  margin-top: -15px;
  width: 90%;
  display: block;
}

.box4 {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;

  padding: 25px 25px 25px 25px;
  border: 3px solid #161616;
  border-top: none;
  border-left: none;
  position: relative;
   top:3rem;
}

.box4::after , .box2::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 10%;
  height: 2.5px;
  right: -2px;
  background-color: #161616;
}


.box-5{
   top:3rem;
}

.box5 .left-border {
  position: absolute;
              top: 10%;
        height: 90%;
      left: 0px;
      width: 2.5px;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.box5 .top-border {
  position: absolute;
  height: 2.5px;
  left: 44.5px;
  width: 89.2%;
  background-color: #161616;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  top: 0px;
}




.box5 .box-number {
  align-self: center;
  left: -3px;
  font-size: 77px;
  position: absolute;
  top: 0;
  font-family: "Open sans";
  font-weight: 600;
  color: #724f9f;
}

.box5 .box-heading{
  position: absolute;
  right: 12px;
  top: 11px;
}


/* .investor-wrapper-desktop{
display: none;
} */
/* .investor-wrapper-mobile{
display: block !important;
} */
.investor-paragraphs {
width: 100%;
text-align: justify;
position: relative;
}



/* Container for dynamically styling last three lines */
.last-lines {
display: flex;
flex-direction: column;
position: relative;
}

/* Make last 3 lines gradually shorter */
.box1 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
}

/* Automatically adjust the width of last three lines */
.box1 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box1 .last-lines p:nth-last-child(3) { width: 85%; }
.box1 .last-lines p:nth-last-child(2) { width: 70%;         padding-top: 0;
}
.box1 .last-lines p:nth-last-child(1) { width: 55%; }

/* Small image positioning */
.box1 .small-image {
        width: 60px;
        height: auto;
        position: absolute;
        right: 0;
               top: 25%;

}

.box2 .last-lines{
align-items: end;
width: 100%;
display: flex
;
flex-direction: column;
position: relative;

}
/* Make last 3 lines gradually shorter */
.box2 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
padding-top: 10px;
}

/* Automatically adjust the width of last three lines */
.box2 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box2 .last-lines p:nth-child(1) {                 padding-top: 5px;

width: 69%;
}
.box2 .last-lines p:nth-child(2) { width: 70%;         padding-top: 0;
}


/* Small image positioning */
.box2 .small-image {
width: 55px;
height: auto;
position: absolute;
        left: 0%;
        top: 62%;

}


/* Make last 3 lines gradually shorter */
.box3 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
}

/* Automatically adjust the width of last three lines */
.box3 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box3 .last-lines p:nth-last-child(3) { width: 85%; }
.box3 .last-lines p:nth-last-child(2) { width: 70%;         padding-top: 0;
}
.box1 .last-lines p:nth-last-child(1) { width: 55%; }

/* Small image positioning */
.box3 .small-image {
width: 84px;
      height: auto;
      position: absolute;
      right: 0;
      bottom: 0;
}


.box4 .last-lines{
align-items: end;
width: 100%;
display: flex
;
flex-direction: column;
position: relative;

}
/* Make last 3 lines gradually shorter */
.box4 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
padding-top: 10px;
}

/* Automatically adjust the width of last three lines */
.box4 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box4 .last-lines p:nth-child(1) {                 padding-top: 5px;

width: 75%;
}
.box4 .last-lines p:nth-child(2) { width: 70%;         padding-top: 0;
}


/* Small image positioning */
.box4 .small-image {
  width: 77px;
  height: auto;
  position: absolute;
  left: -24px;
  bottom: 28px;
}
.box4 .last-lines{
align-items: end;
width: 100%;
display: flex
;
flex-direction: column;
position: relative;
       

}

.box5 {
grid-column: 2;
grid-row: 1;
width: 100%;
height: auto;
padding: 25px 25px 25px 25px;
border: 3px solid #161616;
border-top: none;
border-left: none;
position: relative;
 top: 4rem;
}
.box5 .investor-paragraphs{
top:20px;
}
.box5 .last-lines p {
display: block;
text-align: left;
line-height: 1.5;
width: 100%;
}

/* Automatically adjust the width of last three lines */
.box5 .last-lines p::before {
content: "";
display: block;
height: 0;
}

.box5 .last-lines p:nth-last-child(3) { width: 85%; }
.box5 .last-lines p:nth-last-child(2) { width: 70%;         padding-top: 0;
}
.box5 .last-lines p:nth-last-child(1) { width: 55%; }

/* Small image positioning */
.box5 .small-image {
width: 84px;
      height: auto;
      position: absolute;
      right: 0;
      bottom: 0;
}

.we-invite{
background: #724f9f;
padding: 7px 15px;
bottom: 25px;
position: relative;
/* top:3rem; */

}
.we-invite p{
color: white;
text-align: center;

}



  /* products */
  /* platform accordion */

  #platform-content{
    padding: 15px;
    /* height: calc(100vh - 0px - var(--header-height) - var(--footer-height)); */
    overflow-x: hidden;
    height: 82vh !important;
  }
  #platform-content p {
    width: 100%;
  }
  #platform-content .custom-button{
    /* position: absolute;
    bottom: -93%;
    margin-top: 0;
    right: 33%; */
    display: none;
  }

  .product-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    left: -14px;
}
  .product-img img {
    height: auto;
    transform: translateY(-10px);
    position: relative;
    z-index: 2;
    width: 75%;
  }
   
  .product-img::before, .product-img::after {
    content: "";
    position: absolute;
    width: 48%;
    height: 6vh;
    z-index: 1;
}

.product-img::before {
  left: -19px;
  top: 46%;
  background-color: #fbcf22;
}

.product-img::after {
  right: 0;
  top: 15%;
  background-color: #724f9f;
  width: 33% !important;
}
  /* portal accordion */
  #portal-content{
    height: 82vh;

  }

  .portal-video-text {
    display: flex;
    flex-direction: column;
    height: auto;
    
  }
   .contact-us-mobile{
    display: block !important;
  }

  .contact-us-desk {
    display: none !important;
  }
 

  
 .second-portal-img {
  order:2;
  width: 90% !important;
 }

 .portal-img{
  margin: 0 auto;
  width: auto;
  height: auto;
 }
  .portal-video-text p{
    order: 1;
  }
  #portal-content .custom-button{
    position: absolute;
    right: 33%;
    margin-top: 0;
  }

  /* services */
  .contact-us-services-mobile{    
    display: none; /*  hiding the contact us button for service page */
  }
  .host-image-button{
flex-direction: column;
  }

  .service-img{
    width: 95% !important;
    height: auto !important;
    margin-top: 0 !important;
  }
  .service-img .host{
    margin-top: 0 !important;
  }
  
  #services-host-contact-button img{
    margin-top: 0 !important;
  }
  /* location page */
  #restroom-content{
    height: calc(100vh - 0px - var(--header-height) - var(--footer-height));

  }

  #lift-content{
    height: calc(100vh - 0px - var(--header-height) - var(--footer-height));
  }
  
  
  .washroom-content:nth-child(odd) p {
    margin-left: 14px;

  }
  .washroom-content:nth-child(even) p {
    margin-right: 14px;
    

  }
  .washroom-content:nth-child(odd) h4 {
    margin-left: 14px;
    
  }
  .washroom-content:nth-child(even) h4 {
    margin-right: 14px;
    text-align: right;
    
  }
  .washroom-content:nth-child(odd)::before { 
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 1px;
  height: 100%;
  background-color: #724f9f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* border-left: 5px solid #724f9f; */
  /* border-radius: 5px; */
}

.washroom-content:nth-child(even)::after{
  content: "";
  position: absolute;
  top: 10px;
  right: -3px;
  width: 1px;
  height: 95%;
  /* background-color: #724f9f; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}


.lift-content{
  display: flex;
  flex-direction: column;
}

.lift-content:nth-child(odd)::before{
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 1px;
  height: 100%;
  background-color: #fbcf22;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* border-left: 5px solid #724f9f; */
  /* border-radius: 5px; */
}
.lift-content:nth-child(even)::after{
  content: "";
  position: absolute;
  top: 0px;
  right: -3px;
  width: 1px;
  height: 100%;
  /* background-color: #fbcf22; */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* border-left: 5px solid #724f9f; */
  /* border-radius: 5px; */
}
.lift-content:nth-child(odd) p {
  margin-left: 14px;
}
.lift-content:nth-child(even) p {
  margin-right: 14px;
}
.lift-content-h3 {
  display: none !important;
}

.lift-content:nth-child(odd) h4 {
  margin-left: 14px;
  
}
.lift-content:nth-child(even) h4 {
  margin-right: 14px;
  text-align: right;
}




#lift-content img{
  width: 100% !important;
  height: auto !important;
  order: 0;
}

/* evidences */
/* ntheory accordion */

#nudge-theory-content{
  height: calc(100vh - 61px - var(--header-height) - var(--footer-height));
}

#nudge-theory-content img{
  width: 100% !important;
  height: auto !important;
}



.ntheory-content p{
  margin-left: 11px;
}

/* e-paper-accordion */

#e-paper-content{
  height: calc(100vh - 61px - var(--header-height) - var(--footer-height));

}

#e-paper-content img{
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
.e-paper-paragraph {
  position: relative;
}



.e-paper-timeline-item:nth-child(even)::after{
  content: "";
  position: absolute;
  top: 10px;
  right: -3px;
  width: 5px;
  height: 95%;
  background-color: #724f9f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.e-paper-timeline-item:nth-child(odd)::before{
  content: "";
  position: absolute;
  top: 10px;
  left: -3px !important;
  width: 5px;
  height: 95%;
  background-color: #724f9f;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.e-paper-timeline-item:nth-child(odd) p{
  margin-left: 14px;
} 
.e-paper-timeline-item:nth-child(even) p{
  margin-right: 14px;
} 

.e-paper-timeline-item:nth-child(odd) h4{
  margin-left: 14px;
  text-align: left !important;
} 

.e-paper-timeline-item:nth-child(even) h4{
  margin-right: 14px;
  text-align: right;
} 
/* message-crafting accordion */

#message-crafting-content{
  height: 75vh !important;

}
.message-crafting-list li {
  font-family: "Open Sans";
  padding-top: 8px;
  margin-left: 18px;
}
.message-crafting-message-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: justify;
  font-family: "Open Sans";
  font-size: 16px;
  justify-content: space-around;
}

.message-crafting-image-text-box{
  display: flex;
  flex-direction: column;
}
.message-crafting-image-text-box img{

    width: 266px;
    height: auto;
    
    margin-left: 15%;
}

.message-crafting-image-text li{
  margin-left: 10px;
  margin-top: 10px;
}
.message-crafting-ordered-list li{
  margin-left: 10px;
}

/* contact page */
.contact-us {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-left: -52px;
  width: 100%;
}


.contact-us-container h1 {
  display: flex;
  color: #724f9f;
  font-family: "Open sans";
  font-size: 20px;
  /* padding-top: 30px; */
  font-weight: bold;
  justify-content: center;
  align-items: center;
  margin-right: 85px;


}


.location-mail-container {
  display: flex;
  flex-direction: column;


}

.address-email-container{
  font-size: 16px !important;
  margin-left: 100px !important;
}

.contact-us-image-text{
  display: grid;
  /* grid-template-rows: auto auto; */
}

/* h1 {
  order: 1;
} */

.contact-us-image-text img{
  order: 0;
}

}


/* .box1 .left-border{
  top: 36%;
  height: 64%;
 }
 .box2{
  left:196px
 }
 .box2::before, .box2::after{
  top:-24px;
 }
 .box1 .left-border-bottom{
  top:283px;
 }
 .box3 .left-border{
  top: 42px;
  height: 25%;
 }
 .box2 .left-border-bottom{
  top:283px;
 }
 .box4{
  width: 69.4%;
  min-height: 459px;
  bottom: 329px;
  left: 131px;
 }
 .box3 .left-bottom-border{
  top: 221px;
  left: -2px;
  width: 3px;
  height: 60.6%;

 }
 .box5 .left-border{
  height: 61%;
 }
 .box5 .box-number {
  margin-left: 221px;
 }
  */ /* Ipad (portrait) */
 @media only screen and (min-width: 768px) and (max-width: 1024px)  {
  #purpose-content {
      padding: 30px;
 
  } 
  #commitment-content{
      padding: 30px;
    }
    #sustainability-content{
      align-items: start;
      /* padding: 100px calc(62vw - 612px) 100px calc(6vw - 618px) */
      ;
    }
    #investor-content{padding: 30px;
    }
    details:not([open]) {
      flex:0.4
    }
    .nav-links{
      padding:20px 38px 20px 30px;
    }
    .beeimage{
      margin-left:-2% !important;
    }
    .box1 {
      width: 100%;
      min-height: auto;
      right: 0;
      /* width:397px !important; */
    }
  
    .box2{
      /* width: 311px  !important; */
      grid-column: 1;
        grid-row: 2;
        /* width: 68.7%; */
        height: auto;
        position: relative;
        text-align: center;
        padding-top: 50px;
        /* left: 206px; */
        bottom: 67.2%;
        padding: 20px;
      /* left: 22.9% !important; */
    }

   
    .box1 .left-border {
             top: 17.7% !important;
        height: 82.5%;
    }
    .box2::before, .box2::after{
      top: 0px !important;
 
    }
    .box2 .left-border-top{
      top:0px;
    }
    /* .box2 .left-border-bottom{
      top: 310px;
    } */
    .box2 .box-number{
      font-size: 100px;
      top: -50px;
    }
    .box3 {
     top:6rem;
    }
    /* .box3 .right-border{
      top: 25px;
      height: 96%;
    } */
    .box3 .top-border{
   
  top: -36px !important;
    }
    .box3 .left-border{
      top: 28px;
      height: 91.6%;
    }
    .box3 .top-border-left{
      width: 19%;
    }
    .box3 .left-bottom-border{
      top: 166px;
      left: -2px;
      width: 3px;
      height: 72.9%;
    }
    .box3 .box-number{
      margin-right:140px;
    }
    .box4{
    top:6rem
    }
    .box4::before, .box4::after {
      content: "";
      position: absolute;
      top: -3px;
    }
    .box4::after{
      right: -3px !important;
      width:8% !important;
 
    }
    .box4 .box-heading{
      margin-left:75px;
    }
    .box4 .left-border-bottom {
      position: absolute;
      left: 0px;
      /* top: 337px; */
    }

    .box4 .top-border{
      width: 82%;
    }
    .box5{
      width: 100%;
      top:7rem;
      border: none;

    }
    .box5 .box-number{
             right: -33%;
        top: 6%;
    }

    .first-para2 {
 
      left: -419px !important;
    }
    .box5 .left-border{
      left: 0px;
      top:0px;
      height: 32.1%;
    
    }
    .box5 .top-border-left{
      top: 0px;
      left: 0px;
    }
   .box5 .first-para{
            right: 31px;
        position: relative;

   }
 .we-invite{
  /* width: 758px; */
  top:2rem;
 }
 .product-img{
  left:-207px;
 }
    .product-img::before, .product-img::after{
      height: 7vh;
    }
 #platform-content{
  padding:  calc(45vw - 352px) 180px calc(50vw - 321px) !important;
 }
 .footer-links{
  gap:0 !important;
 }
 #host-content{
  padding: calc(45vw - 352px) 124px calc(50vw - 321px);
 }
 #sponsor-content{
  padding: calc(45vw - 352px) 136px calc(50vw - 321px);
 }
 #audience-content{
  padding: calc(45vw - 352px) 83px calc(50vw - 279px);
 
}
#audience-content .service-img{
  width: 80% !important;
  height: auto !important;
}
#restroom-content{
    padding: calc(24vw - 371px) 54px calc(50vw - 314px);
}
#lift-content{
  padding: calc(45vw - 352px) 125px calc(50vw - 321px);
}
#nudge-theory-content{
  padding: calc(45vw - 352px) 172px calc(50vw - 321px);
}
#e-paper-content{
  padding: calc(45vw - 352px) 172px calc(50vw - 321px);
}
#e-paper-content img{
  width: 100% !important;
}
#message-crafting-content{
  padding: calc(45vw - 352px) 110px calc(50vw - 321px);
}
#message-crafting-content .square{
 width: 100% !important;
}
#portal-content{
  padding: calc(45vw - 352px) 110px calc(50vw - 321px);
}

}
 
/* 
#restroom-content{
  padding: calc(45vw - 352px) 172px calc(50vw - 321px);
} */

/* investor page */
  .layout {
  position: relative;
  width: 100%;
  /* max-width: 949.02px;   
  min-width: 530px;       */
  margin: 0 auto;
}

.layoutImage {
    width: 100%;
  /* max-width: 1600px;   
  min-width: 630px;    */
aspect-ratio: 949.02/ 1480;             
  height: auto;          
  display: block;
}

  .overlayBox {
    position: absolute;
    background: rgba(255, 255, 255, 0); /* light bg for readability */
    padding: 10px;
    /* border-radius: 6px; */
    font-size: clamp(12px, 2vw, 16px);  /* responsive font size */
    line-height: 1.4;
  }

  /* Position boxes using percentage (relative to layout size) */
  .boxOne { padding: 0;    top: 5%;left: 52%;width: 36.45%;}
  .boxTwo { top: 14%; left: 17%; width: 30%; }
  .boxThree { top: 40%; left: 55%; width: 35%; }
  .boxFour { top: 55%; left: 15%; width: 40%; }
  .boxFive { top: 75%; left: 55%; width: 35%; }
  .boxFive1 {top: 75%; left: 55%; width: 35%;}
  .boxFive2 {    top: 80%;
    /* left: 55%; */
    left: -142%;
    width: 240%;}
@media (max-width: 1028px) {
  .layoutImage {
    width: 100%;
   aspect-ratio: 539 / 1162;
  }
}
/* e-paper benefits image description for screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

details[open] .accordion-icon {
  transform: rotate(90deg);
}

/* Smooth transition for the rotation */
.accordion-icon {
  transition: transform 0.3s ease;
  margin-left: 8px; /* Add some spacing */
}