/* Root color Variables */
:root {
  --color-white: rgb(209, 211, 212);
  --color-yellow: rgb(253, 185, 19);
  --color-orange: rgb(243, 112, 33);
  --color-red: rgb(186, 31, 46);
  --color-purple: rgb(129, 42, 132);
  --color-blue: rgb(43, 46, 140);
}
.quadrado {
    display :none;
}
/* Fonts */
/* Regular */
@font-face {
  font-family: "MontserratRegular";
  src: url("../assessts/fonts/Montserrat-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "MyriadProRegular";
  src: url("../assessts/fonts/MyriadPro-Regular_2.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Medium */
@font-face {
  font-family: "MontserratMedium";
  src: url("../assessts/fonts/Montserrat-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: bold;
}
/* Variable font  */
@font-face {
  font-family: "MontserratVariableFont";
  src: url("../assessts/fonts/Montserrat-VariableFont_wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Light  */
@font-face {
  font-family: "PoppinsLight";
  src: url("../assessts/fonts/Poppins-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: "MontserratRegular";
}

body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  box-sizing: border-box;
  touch-action: manipulation;
}

a {
  text-decoration: none;
  font-size: 18px;
}
.registration-page .right-section a {
  text-decoration: none;
  font-size: 16px;
}

a.phonecontainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  gap: 10px;
}
a img.phone {
  width: 30px;
  height: 30px;
}
/* Popup Overlay */
.admissionpopup {
  position: fixed;
  bottom: 0;
  left: 0;
  /*width: 100%;*/
  /*height: 100%;*/
  /*background-color: rgba(0, 0, 0, 0.5);*/
  /* Semi-transparent background */
  display: flex;
  justify-content: left;
  align-items: end;
  z-index: 1;
  visibility: hidden;
  /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show the popup */
.admissionpopup.active {
  visibility: visible;
  opacity: 1;
  z-index: 1000;
}

/* Popup Content */
.admissionpopup-content {
  position: relative;
  text-align: center;
}

.admissionpopup-content img {
  max-width: 95%;
  height: auto;
}

/* Close Button */
.admissionpopup-content #close-popup {
  position: absolute;
  top: -20px;
  right: 0px;
  background-color: var(--color-yellow);
  color: white;
  border: none;
  border-radius: 50%;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.admissionpopup-content #close-popup:hover {
  background-color: var(--color-red);
}

.admissions-inquiry {
  text-align: center;
  font-family: "MontserratRegular";
  width: 100%;
  height: auto;
  font-size: 100%;
  padding: 2px;
  position: relative;
}

.admissions-inquiry center {
  padding: 6px;
}

.admissions-inquiry::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, transparent, rgba(186, 31, 46, 0.2) 30%, rgba(186, 31, 46, 0.6) 50%, rgba(186, 31, 46, 0.2) 70%, transparent);
  margin: 0 auto;
  border-radius: 1px;
}

.contact-link {
  color: var(--color-red);
  text-decoration: none;
  font-size: 100%;
}

.contact-link:hover {
  color: var(--color-red);
  text-decoration: underline;
}

/* Header Style Start (Left logo, right menus, book preschool tour button) */
@media (max-width: 450px) {
  .admissions-inquiry {
    font-size: 70%;
  }
}

@media (max-width: 350px) {
  .admissions-inquiry {
    font-size: 60%;
  }
}

@media only screen and (max-width: 768px) {
  .award-text {
      font-size: 10px;
      width: 100%;
      margin: 10px 0 !important;
  }
  .award-text img {
      width: 50px !important;
  }
  .nav-item.why {
     margin-left: 0px; 
  }
  .nav-item.blog {
      margin-left: -50px;
  }
}

.header {
  width: 100%;
  height: 15%;
  /*padding-top: 2%;*/
  position: absolute;
  /* top: 0; */
  left: 0;
  z-index: 1;
  display: flex;
  background-color: #fff;
  /* border: 1px solid black; */
}

.header a {
  text-decoration: none;
  color: var(--color-blue);
}

.logo {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 3%;
}

.logo img {
  /*width: 25%;*/
  width: 45%;
}

/* Right menu section */
/*.right-section {*/
/*  height: fit-content;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  justify-content: center;*/
/*  align-items: flex-end;*/
/*  margin-right: 2%;*/
/*  margin-top: 3%;*/
  /* border: 1px solid black; */
/*}*/
.right-section {
  height: fit-content;
  display: flex;
/*  flex-direction: column;*/
  justify-content: space-around;
  align-items: flex-end;
  margin-right: 2%;
  margin-top: 4%;
  gap: 120px;
  /* border: 1px solid black; */
}
/* .registration-page .right-section {
  margin-top: 1%;

} */
/* Right menu section */
/* .right-section-registration {
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-right: 2%;
  margin-top: auto;
} */

.nav-item {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.nav-text {
  position: absolute;
  right: 40px;
  white-space: nowrap;
  opacity: 0.3;
  transition: opacity 0.5s ease;
  color: var(--color-blue);
}
.nav-text.navlink-active {
  opacity: 1;
  font-weight: bold;
}
/* Book Pre School Tour button */
/* .book {
  position: absolute;
  right: 2%;
  bottom: 55%;
  color: #fff;
  width: 200px;
  height: 30px;
  background-color: var(--color-blue);
  border-radius: 50px;
  font-family: "MontserratRegular";
  padding: 5px;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 0.5%;
} */
.book {
  position: absolute;
  /* margin-right: 1%; */
  right: 2%;
  bottom: 50%;
  color: #fff !important;
  width: 200px;
  height: 22px;
  background-color: var(--color-blue);
  border-radius: 50px;
  font-family: "MontserratRegular";
  padding: 7px 2px 2px 2px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 0.5%;
  text-align: center;
}

.registration-page .book {
  position: absolute;
   margin-right: 0%; 
  right: 2%;
/*  bottom: 42%;*/
  color: #fff !important;
  width: 169px;
  height: 32px;
  background-color: var(--color-blue);
  border-radius: 50px;
  font-family: "MontserratRegular";
  padding: 7px 22px;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  /* margin-bottom: 0.5%; */
}

/* Book Pre School Tour button */
.registration {
  position: absolute;
  right: 2%;
  bottom: 62%;
  color: #fff;
  width: 200px;
  height: 22px;
  background-color: var(--color-blue);
  color: white !important;
  border-radius: 50px;
  font-family: "MontserratRegular";
  text-align: center;
  align-items: center;
  padding-top: 7px;
  border: none;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  /* margin-bottom: 0.5%; */
}
/* .right-section:hover .nav-text {
  opacity: 0.3;
} */

.nav-item:hover .nav-text {
  opacity: 1;
}

.nav-item:nth-child(1) {
  background-color: var(--color-yellow);
}
.nav-item:nth-child(2) {
  background-color: var(--color-orange);
}
.nav-item:nth-child(3) {
  background-color: var(--color-red);
}
.nav-item:nth-child(4) {
  background-color: var(--color-purple);
}
.nav-item:nth-child(5) {
  background-color: var(--color-blue);
}
.nav-item:nth-child(6) {
  background-color: var(--color-white);
}

/* Header Style Ends here (Left logo, right menus, book preschool tour button) */

.container {
  position: relative;
  height: 100%;
  width: 100vw;
  overflow: hidden;
}


/* Video Screen Styling starts here */
.screen {
  position: fixed;
  height: 90vh;
  width: 100%;
  margin-top: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  -webkit-transition: transform 1.8s ease;
  -moz-transition: transform 1.8s ease;
  transition: transform 1.8s ease;
  top: 0;
  will-change: transform;
}

.screen1 {
  transform: translateY(0);
  position: relative;
  overflow: hidden;
}

.semi-circle {
  width: 130%;
  height: 100%;
  border-radius: 50% 50% 0% 0%;
  position: absolute;
  top: 20%;
  left: -15%;
  background-color: var(--color-white);
  overflow: hidden;
}

.video {
  /* Positioning the video absolutely */
  position: absolute;
  /* Align to top */
  top: -32%;
  height: auto;
  /* Center horizontally */
  left: 6%;
  width: 80%;
  /* Ensure it's behind any other content */
  z-index: 0;
}

/* 
 * Common across all screens.
 */

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 50;
  margin-top: 2%;
  text-align: center;
}

.screen-title {
  background-color: #fff;
  border-radius: 45px;
  font-family: "MontserratRegular";
  padding: 10px 15px;
  border: none;
  font-size: 16px;
  font-weight: 800;
}

.screen2 .screen-title {
  color: var(--color-yellow);
}
.screen3 .screen-title {
  color: var(--color-orange);
}
.screen4 .screen-title {
  color: var(--color-red);
}
.screen5 .screen-title {
  color: var(--color-purple);
}
.screen6 .screen-title {
  color: var(--color-blue);
}

.screen5 .content .key-facts-three {
  margin-top: 20px;
}

.screen-title-l2 {
  font-size: 30px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 50px;
  margin-bottom: 0;
  text-transform: uppercase;
}
.screen-description {
  font-size: 16px;
  line-height: 25px;
  width: 55%;
  margin: auto;
  margin-top: 1%;
}
.link {
  cursor: pointer;
}
/* 
  ========= Screen 2 What we do ==========
 */

.screen2 .semi-circle {
  background-color: var(--color-yellow);
}

.screen2 .values-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 2%;
}

.screen2 .values-container p {
  font-family: "MontserratRegular", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.screen2 .values-container .values {
  display: flex;
  justify-content: center;
  /* Adjust spacing between circles */
  gap: 20%;
}

.screen2 .values-container .values .value {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.screen2 .values-container .values .letter-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--circle-color, yellow);
  /* Set circle background color */
  font-family: "MontserratBold", sans-serif;
  font-size: 25px;
  color: white;
  border: 1px solid var(--color-white);
}
.screen2 .values-containe p:nth-child(1) {
  font-size: 18px;
}
.screen2 .values-container .values .value:nth-child(1) .letter-circle {
  background-color: var(--color-yellow);
}

.screen2 .values-container .values .value:nth-child(2) .letter-circle {
  background-color: var(--color-orange);
}
.screen2 .values-container .values .value:nth-child(3) .letter-circle {
  background-color: var(--color-red);
}
.screen2 .values-container .values .value:nth-child(4) .letter-circle {
  background-color: var(--color-purple);
}
.screen2 .values-container .values .value:nth-child(5) .letter-circle {
  background-color: var(--color-blue);
}

/* 
  ========= Screen 2 How we do it ==========
 */

.screen3 .semi-circle {
  background-color: var(--color-orange);
}

.circular-keys {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 50%;
  margin: auto;
  margin-top: 4%;
}

.circles-container-infra,
.circles-container {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 20px;
}

.circular-item img {
  /* display: block; */
  /* object-fit: cover; */
  /* width: 100%; */
}

.circular-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background-color: lightgray;
  margin: 0 10px;
  transition: transform 0.9s ease, opacity 0.3s;
  position: relative;
  overflow: hidden;
}

.circular-item:not(.active) img {
  display: none;
}

.circular-item.active {
  transform: scale(1.2); /* Active circle scaling */
  opacity: 1; /* Fully visible */
  overflow: hidden;
}

.circular-item:not(.active) {
  width: 30px; /* Inactive circle size */
  height: 30px; /* Inactive circle size */
}

.circular-item:not(.active) h3,
.circular-item:not(.active) p {
  display: none; /* Hide text content in inactive circles */
  overflow: hidden;
}

.circular-item:nth-child(1) {
  background-color: var(--color-yellow);
}
.circular-item:nth-child(2) {
  background-color: var(--color-red);
}
.circular-item:nth-child(3) {
  background-color: var(--color-purple);
}
.circular-item:nth-child(4) {
  background-color: var(--color-blue);
}
.circular-item:nth-child(5) {
  background-color: var(--color-yellow);
}

.circles-container-infra .circular-item:nth-child(4) {
  background-color: var(--color-orange);
}
.circles-container-infra .circular-item:nth-child(6) {
  background-color: var(--color-red);
}

.circles-container-infra .circular-item:nth-child(7) {
  background-color: var(--color-purple);
}
.circles-container-infra .circular-item:nth-child(8) {
  background-color: var(--color-orange);
}

.nav-button {
  cursor: pointer;
}

.nav-button.left,
.nav-button.right {
  -webkit-user-select: none;
  user-select: none;
}

.left {
  display: flex;
  justify-content: right;
  margin-right: 30px;
}
.right {
  display: flex;
  justify-content: left;
  margin-left: 30px;
}

.circular-item h3 {
  font-family: "MontserratRegular", sans-serif;
  font-size: 11px;
  overflow: auto;
  text-transform: uppercase;
  width: 70%;
  text-align: center;
  margin-top: 20%;
  font-weight: 600;
  line-height: 14px;
}

.circular-item p {
  font-size: 10px;
  font-family: "MontserratRegular", sans-serif;
  overflow: auto;
  width: 80%;
  line-height: 12px;
  margin-top: -2px;
  text-align: center;
  max-height: 100px;
}

.nav-button img {
  width: 13%;
}

/* 
  ========= Screen 4 How we do it ==========
 */

.screen4 .semi-circle {
  background-color: var(--color-red);
}
img.circles_home {
  width: 20%;
}

/* 
  ========= Screen 5 How we do it ==========
 */
.screen5 .semi-circle {
  background-color: var(--color-purple);
}
.nav-item.why {
  margin-left: -40px;
}

.nav-item.blog {
  margin-left: -50px;
}
.key-facts-three-change {
  display: flex;
  font-size: 1.3rem;
  gap: 250px;
  margin-top: 45px;
  justify-content: space-evenly; /* Center the items */
}
.key-facts-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  gap: 20px;
  margin-top: 70px;
  justify-content: center; /* Center the items */
}

.key-facts-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 50px;
  margin-top: 50px; /* Adjust spacing as needed */
  justify-content: center; /* Center the items */
}

.fact-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.fact-item img {
  width: 70px; /* Adjust this for the desired image size */
  height: auto;
  margin-right: 20px;
}
.fact-item-change img {
  width: 450px; /* Adjust this for the desired image size */
  height: auto;
  margin-right: 20px;
  border-radius: 20px;
}

.fact-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  white-space: nowrap;
  width: 100%;
}

.fact-text p {
  margin: 0;

  text-align: left;
}

.fact-text p:first-child {
  font-weight: bold;
  text-align: left;
}

.fact-text > p:nth-child(2) {
  text-align: left;
  margin-left: 0px;
}

/* 
  ========= Screen 6 How we do it ==========
 */

.screen6 .semi-circle {
  background-color: var(--color-blue);
}

.screen6 .circular-keys-2 .circles-container-infra img {
  margin: -10px;
  width: 450px;
}

/* .circular-keys-2 .circles-container-infra  */
/* 
  ========= Screen 7 How we do it ==========
 */

.screen7 .semi-circle {
  background-color: var(--color-white);
}

.other-logos-container {
  width: 50%;
  margin: auto;
  display: flex;
  justify-content: center;
  margin-top: 3%;
}
.other-logos-container img {
  width: 200px;
  height: auto;
}

.other-logos-one {
  /* border: 1px solid #000; */
  width: 100%; /* Full width to allow centering */
  max-width: 700px; /*Adjust max-width as needed*/
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 50px;
  justify-content: center; /* Centers the grid content */
  align-items: center;
}

.other-logos-one img:nth-child(1),
.other-logos-one img:nth-child(3) {
  width: 100px;
}
.other-logos-one img:nth-child(1) {
  margin-left: 50%;
}
.other-logos-one img:nth-child(2) {
  width: 250px;
}
.connect-us-container {
  text-align: center;
  margin-top: 3%;
  font-family: "MontserratRegular";
  color: rgb(43, 46, 140);
}

.connect-us-container > p {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: bold;
}

.connect-us-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px; /* Gap between each icon-content pair */
  margin-top: 2%;
}

.connect-us-icons div {
  display: flex;
  align-items: center;
  gap: 10px; /* Gap between icon and text */
}

.connect-us-icons p {
  font-size: 12px; /* Other content text size */
  text-transform: none; /* No uppercase for other paragraphs */
  font-weight: bold;
  text-align: left;
}

.connect-us-icons img {
  width: 30px; /* Icon size */
  height: 30px;
}
.connect-us-icons a {
  text-decoration: none;
  color: var(--color-blue);
}
.circular-item img {
  display: block;
  object-fit: cover;
  width: 200%;
}

.connect-us-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin-top: 3%;
  font-family: "MontserratRegular";
  color: rgb(43, 46, 140);
}

.connect-us-container > p {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 800;
}

/* * next button  */
#nextButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  width: 70px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  z-index: 100;
}
/* * prev button  */
#prevButton {
  position: fixed;
  bottom: 320px;
  right: 20px;
  padding: 10px 20px;
  width: 70px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  z-index: 100;
  transform: rotate(180deg);
}

#dot-navigation {

    position: fixed;

    top: 75%;

    right: 70px;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.dot {

    width: 12px;

    height: 12px;

    background-color: gray;

    border-radius: 50%;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.3s ease;

}



.dot.active {

    background-color: white;

    transform: scale(1.3);

}

.quadrado {

  animation: crescendo 1.5s alternate infinite ease-in;

}



@keyframes crescendo {

/*   0%   {transform: scale(.8);} */

  100% {transform: scale(1.1);}

}
/*******************************************************
 *             OUR STORY                               *
 *******************************************************/

.our-story-semi-circle-1,
.our-story-semi-circle-2,
.our-story-semi-circle-3,
.our-story-semi-circle-4,
.our-story-semi-circle-5,
.our-story-semi-circle-6 {
  width: 130%;
  height: 100%;
  border-radius: 50% 50% 0% 0%;
  position: absolute;
  top: 20%;
  left: -15%;
  overflow: hidden;
}

.our-story-semi-circle-1 {
  background-color: var(--color-yellow);
}
.our-story-semi-circle-2 {
  background-color: var(--color-orange);
}
.our-story-semi-circle-3 {
  background-color: var(--color-red);
}
.our-story-semi-circle-4 {
  background-color: var(--color-purple);
}
.our-story-semi-circle-5 {
  background-color: var(--color-blue);
}
.our-story-semi-circle-6 {
  background-color: var(--color-white);
}

/*******************************************************
 *             Our story screen 1                     *
 *******************************************************/
.our-story-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 50;
  margin-top: 2%;
  text-align: center;
  position: relative;
}

.our-story-content button {
  color: var(--color-yellow);
  background-color: #fff;
  border-radius: 50px;
  font-family: "MontserratRegular";
  padding: 10px;
  border: none;
  font-size: 16px;
  font-weight: 800;
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin: 5% auto;
  gap: 20px;
  padding: 5%;
}

.img-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
  padding: 10px;
  box-sizing: border-box;
}

.img-container img {
  width: 100%;
  max-width: 80px;
  height: auto;
  margin-bottom: 10px;
}

.img-container > div p {
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
  font-family: "MontserratRegular";
}

.img-container > div:nth-child(4) img {
  max-width: 150px;
}

.img-container > div:nth-child(1) p {
  color: var(--color-orange);
}
.img-container > div:nth-child(2) p {
  color: var(--color-red);
}
.img-container > div:nth-child(3) p {
  color: var(--color-purple);
}
.img-container > div:nth-child(4) p {
  color: var(--color-blue);
}
/*******************************************************
 *             Our story screen 2                      *
 *******************************************************/

.our-story-2 > .our-story-semi-circle-2 > .our-story-content > button {
  color: var(--color-orange);
}
.our-story-2 > .our-story-semi-circle-2 > .our-story-content p:nth-child(1) {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.our-story-2 > .our-story-semi-circle-2 > .our-story-content p:nth-child(2) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 25px;
  width: 45%;
  margin: auto;
  margin-top: 1%;
}

/*******************************************************
 *             Our story screen 3                      *
 *******************************************************/
.our-story-3 > .our-story-semi-circle-3 > .our-story-content > button {
  color: var(--color-red);
}

.our-story-3 > .our-story-semi-circle-3 > .our-story-content p:nth-child(1) {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.our-story-3 > .our-story-semi-circle-3 > .our-story-content p:nth-child(2) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 20px;
  width: 45%;
  margin: auto;
  margin-top: 1%;
}

.our-story-3 > .our-story-semi-circle-3 > .our-story-content p:nth-child(3) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 25px;
  width: 45%;
  margin: auto;
}

.our-story-after-values {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 25px;
  width: 45%;
  margin: auto;
}

.our-story-values-list {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.our-story-values-list div {
  font-family: "MontserratRegular";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  padding: 10px;
  font-size: 12px;
  border: 1px solid #fff;
  margin: 5px 0;
}

.our-story-values-list div:nth-child(1) {
  background-color: var(--color-yellow);
}

.our-story-values-list div:nth-child(2) {
  background-color: var(--color-orange);
}

.our-story-values-list div:nth-child(3) {
  background-color: var(--color-red);
}

.our-story-values-list div:nth-child(4) {
  background-color: var(--color-purple);
}

.our-story-values-list div:nth-child(5) {
  background-color: var(--color-blue);
}

.our-story-founder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-image {
  width: 120px;
  height: auto;
  margin-right: 20px;
}

#founder-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
}

#founder-text p:nth-child(1) {
  font-size: 14px !important;
  text-transform: none;
  letter-spacing: normal;
}
#founder-text p:nth-child(2) {
  font-size: 14px;
  text-align: left;
  width: 100%;
}

/*******************************************************
 *             Our story screen 4                      *
 *******************************************************/
.our-story-semi-circle-4 > .our-story-content > button {
  color: var(--color-purple);
}
.our-story-semi-circle-4 > .our-story-content p:nth-child(1) {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.our-story-semi-circle-4 > .our-story-content p:nth-child(2) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 25px;
  width: 30%;
  margin: auto;
  margin-top: 1%;
}

.our-story-image-container {
  position: absolute;
  bottom: 18%;
  left: -35%;
  height: auto;
  z-index: 50;
}

.semicircle-image {
  position: relative;
  left: 50%;
  width: 25%;
  height: auto;
}

/*******************************************************
 *             Our story screen 5                      *
 *******************************************************/

.our-story-semi-circle-5 > .our-story-content > button {
  color: var(--color-blue);
}
.our-story-semi-circle-5 > .our-story-content p:nth-child(1) {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.our-story-semi-circle-5 > .our-story-content p:nth-child(2) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 25px;
  width: 45%;
  margin: auto;
  margin-top: 1%;
}

.team-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  height: 350px;
  margin-bottom: 10%;
}

.team-container-2 {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 2%;
  /* border: 1px solid black; */
}

.team-member {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.team-member.left {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.team-member.right {
  justify-content: flex-end;
  /* border: 1px solid black; */
  /* margin-top: -15px; */
}

.team-member img {
  width: 150px;
  height: auto;
  margin: 0 20px;
}

.team-text-container {
  max-width: 500px;
  font-family: "MontserratRegular";
  font-size: 10px;
  margin-top: 1%;
}
.team-member.left .team-text-container {
  text-align: left;
}
.team-member.right .team-text-container {
  text-align: right;
}
.team-text-container p {
  margin: 5px 0;
}

.team-text-container p:nth-child(1) {
  font-weight: bold;
  font-size: 12px;
}

.team-text-container p:nth-child(2) {
  font-size: 12px;
  margin-top: -1px;
}

.team-text-container p:nth-child(3) {
  font-size: 11px;
  line-height: 15px;
}

/*******************************************************
 *                                                     *
 *            WHY US  COMMON STYLES                   *
 *                                                     *
 *******************************************************/
/* .why-us-1 {
  transform: translateY(100%);
} */

.why-us-1 .semi-circle {
  background-color: var(--color-orange);
}
.why-us-2 .semi-circle {
  background-color: var(--color-red);
}
.why-us-3 .semi-circle {
  background-color: var(--color-purple);
}
.why-us-4 .semi-circle {
  background-color: var(--color-blue);
}
.why-us-5 .semi-circle {
  background-color: var(--color-yellow);
}
.why-us-6 .semi-circle {
  background-color: var(--color-orange);
}
.why-us-semi-circle-7 {
  background-color: var(--color-white);
}

.why-us-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* border: 1px solid #000; */
  z-index: 50;
  margin-top: 2%;
  text-align: center;
}

.why-us-content button {
  background-color: #fff;
  border-radius: 50px;
  font-family: "MontserratRegular";
  padding: 10px;
  border: none;
  font-size: 16px;
  font-weight: 800;
}
/*******************************************************
 *                                                     *
 *            WHY US Screen 1                           *
 *                                                     *
 *******************************************************/

.why-us-1 .screen-title {
  color: var(--color-orange);
}
.why-us-img-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Set 3 items per row */
  gap: 20px; /* Space between each item */
  width: 50%;
  margin: 4% auto;
  justify-items: center; /* Center items within each cell */
  align-items: start;
  box-sizing: border-box;
  /* border: 1px solid black; */
}

.why-us-2 .screen-title {
  color: var(--color-red);
  margin-top: 50px;
}

.why-us-img-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  height: 170px;
  /* border: 1px solid black; */
}

.why-us-img-container img {
  max-width: 80px;
  height: auto;
  margin-bottom: 10px;
}

.why-us-img-container > div p {
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
  font-family: "MontserratRegular";
}

/* Custom colors for each item’s text */
.why-us-img-container > div:nth-child(1) p {
  color: var(--color-blue);
}
.why-us-img-container > div:nth-child(2) p {
  color: var(--color-blue);
}
.why-us-img-container > div:nth-child(3) p {
  color: var(--color-blue);
}
.why-us-img-container > div:nth-child(4) p {
  color: var(--color-blue);
}
.why-us-img-container > div:nth-child(5) p {
  color: var(--color-blue);
}
.why-us-img-container > div:nth-child(6) p {
  color: var(--color-blue);
}
.why-us-img-container > div:nth-child(6) img {
  max-width: 110px;
}

/*******************************************************
 *                                                     *
 *            WHY US Screen 2                           *
 *                                                     *
 *******************************************************/
.why-us-semi-circle-2 .why-us-content button {
  color: var(--color-red);
  margin-top: 1%;
}

.why-us-semi-circle-2 .why-us-content p:nth-child(1) {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.why-us-semi-circle-2 .why-us-content p:nth-child(2) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 20px;
  width: 35%;
  margin: auto;
  margin-top: 1%;
}

/*******************************************************
 *                                                     *
 *            WHY US Screen 3                           *
 *                                                     *
 *******************************************************/

.why-us-3 .screen-title {
  color: var(--color-purple);
  font-size: 14px;
  text-transform: uppercase;
}
.why-us-3 .screen-title-l2 {
  line-height: 35px;
  font-size: 25px;
}

.why-us-values-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1px;
  /* border: 1px solid black; */
  margin-top: 2%;
  /* padding: 10px; */
}

.why-us-3 .screen-description {
  font-size: 14px;
  line-height: 20px;
}

.why-us-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 120px;
  text-align: center;
  height: 150px;
  /* border: 1px solid black; */
}

.why-us-value:first-child {
  line-height: 150px;
}
.why-us-value:last-child {
  line-height: 150px;
}

.why-us-letter-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: gray;
  font-family: "MontserratBold", sans-serif;
  font-size: 25px;
  color: white;
  border: 1px solid var(--color-white);
  margin-bottom: 10px;
}

.why-us-value:nth-child(2) .why-us-letter-circle {
  background-color: rgb(48, 126, 144);
}
.why-us-value:nth-child(3) .why-us-letter-circle {
  background-color: rgb(142, 88, 160);
}
.why-us-value:nth-child(4) .why-us-letter-circle {
  background-color: rgb(253, 202, 48);
}
.why-us-value:nth-child(5) .why-us-letter-circle {
  background-color: rgb(236, 77, 79);
}
.why-us-value:nth-child(6) .why-us-letter-circle {
  background-color: rgb(24, 174, 83);
}
.why-us-value:nth-child(7) .why-us-letter-circle {
  background-color: rgb(171, 121, 94);
}
.why-us-value:nth-child(8) .why-us-letter-circle {
  background-color: rgb(28, 144, 129);
}
.why-us-value:nth-child(8) .why-us-letter-circle {
  background-color: rgb(234, 65, 149);
}
.why-us-value:nth-child(8) .why-us-letter-circle {
  background-color: rgb(28, 81, 159);
}

/* Style for "THE" and "WAY" */
.why-us-text {
  font-family: "MontserratBold", sans-serif;
  font-size: 14px !important;
  /* margin-bottom: 10px; */
  text-align: center;
}

.why-us-value p {
  font-family: "MontserratRegular";
  font-size: 12px;
  /* line-height: 20px; */
  width: 55%;
  margin: auto;
  margin-top: 0%;
}

.why-us-last-p {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 20px;
  width: 55%;
  margin: auto;
  margin-top: 1%;
}

/*******************************************************
 *            WHY US Screen 4                           *
 *******************************************************/
.why-us-4 .screen-title {
  color: var(--color-blue);
}

.why-us-4 .screen-description {
  margin-top: -12px;
  font-size: 16px;
}

.why-us-semi-circle-4 .why-us-content p:nth-child(1) {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.why-us-semi-circle-4 .why-us-content p:nth-child(2) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 20px;
  width: 55%;
  margin: auto;
  margin-top: 1%;
}

.why-us-semi-circle-4 .why-us-content p:nth-child(3) {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  text-transform: uppercase;
  margin-top: 1%;
}
.why-us-semi-circle-4 .why-us-content p:nth-child(4) {
  font-family: "MontserratRegular";
  font-size: 14px;
  line-height: 20px;
  width: 55%;
  margin: auto;
}

/* icons  */
.why-us-image-container-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  /* border: 1px solid var(--color-white); */
}

.why-us-image-container-4-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1%;
  gap: 20px;
}

.why-us-item-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 550px; /* Adjust based on design */
  text-align: center;
  /* border: 1px solid var(--color-white); */
}

.why-us-item-4 img {
  width: 50px; /* Size of the icon */
  height: auto;
  margin-bottom: 15px;
}

.why-us-text-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* Space between paragraphs */
}

.why-us-title-4 {
  font-weight: bold;
  font-size: 16px;
  /* margin-bottom: 5px; */
  font-family: "MontserratBold", sans-serif; /* Adjust as needed */
  margin-top: 0;
  margin-bottom: 0;
}

.why-us-text-4 p {
  font-size: 13px;
  font-family: "MontserratRegular", sans-serif; /* Adjust as needed */
  line-height: 1.4;
}
.why-us-text-4 p.screen-description {
  margin-top: 20px;
}

/*******************************************************
 *                                                     *
 *            WHY US Screen 5                           *
 *                                                     *
 *******************************************************/

.why-us-5 .screen-title {
  color: var(--color-yellow);
}
.why-us-5 .screen-title-l2 {
  font-size: 12px;
}
.why-us-5 .screen-description {
  font-size: 11px;
}
.why-us-image-container-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 items per row */
  justify-items: center;
  align-items: start;
  text-align: center;
  width: 72%;
  margin: auto;
}

.why-us-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-us-item img {
  /* Set a fixed size for the images */
  width: 100px;
  height: auto;
  margin-bottom: 5px;
  margin-top: -5px;
}

.why-us-item .why-us-title {
  font-weight: bold;
  font-size: 11px;
  margin: 0px;
  font-family: "MontserratMedium";
}

.why-us-description {
  font-size: 11px;
  font-family: "MontserratRegular", sans-serif;
}

/*******************************************************
 *                                                     *
 *            WHY US Screen 6                          *
 *                                                     *
 *******************************************************/

.why-us-6 .screen-title {
  color: var(--color-orange);
}
.why-us-6 .screen-description {
  padding: 0px 20px;
  font-size: 16px;
  line-height: 20px;
}

/* Screen 6 */

.why-us-6 .semi-circle .content .screen-title-l2 {
  margin-top: -0.2%;
  font-size: 22px;
  line-height: 30px;
}

.why-us-6 .growth-mindset-image-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-direction: row;
  max-width: 500px;
  margin: auto;
  gap: 40px;
  /* border: 1px solid black; */
  justify-content: center;
  align-items: center;
  margin-top: 2%;
}
.why-us-6 .growth-mindset-image-container img {
  width: 100%;
  margin: auto;
}

/*******************************************************
 *                                                     *
 *            WHY US Screen 7                           *
 *                                                     *
 *******************************************************/

/*******************************************************
 *                                                     *
 *            PROGRAMS                      *
 *                                                     *
 *******************************************************/

.programme-1 .semi-circle {
  background-color: var(--color-red);
}

.programme-2 .semi-circle {
  background-color: var(--color-purple);
}

.programme-3 .semi-circle {
  background-color: var(--color-blue);
}

.programme-4 .semi-circle {
  background-color: var(--color-yellow);
}

.programme-5 .semi-circle {
  background-color: var(--color-orange);
}

.programme-6 .semi-circle {
  background-color: var(--color-red);
}

.programme-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 50;
  margin-top: 2%;
  text-align: center;
}

.programme-content button {
  background-color: #fff;
  border-radius: 50px;
  font-family: "MontserratRegular";
  padding: 10px 25px;
  border: none;
  font-size: 16px !important;
  font-weight: 800;
  font-weight: bold;
}

.programme-1 .semi-circle .programme-content button {
  color: var(--color-red);
}
.programme-2 .semi-circle .programme-content button {
  color: var(--color-purple);
}
.programme-3 .semi-circle .programme-content button {
  color: var(--color-blue);
}
.programme-4 .semi-circle .programme-content button {
  color: var(--color-yellow);
}
.programme-5 .semi-circle .programme-content button {
  color: var(--color-orange);
}
.programme-6 .semi-circle .programme-content button {
  color: var(--color-red);
}
.programme-content div > img.kids-icon {
  width: 170px;
}
.programme-content .programme-title {
  font-weight: 400;
  margin-top: 50px;
}

.description-text {
  font-size: 16px;
  margin-top: 0px;
  line-height: 30px;
}

/*******************************************************
 *                                                     *
 *            PROGRAMMES Screen 1                      *
 *                                                     *
 *******************************************************/

.semi-circle .programme-content .programme-img-container {
  display: flex;
  justify-content: center;
  width: 70%;
  margin: 2% auto;
  justify-items: center;
  align-items: start;
  box-sizing: border-box;
}
.semi-circle .programme-content .programme-img-container > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0px 20px;
}
.semi-circle .programme-content .programme-img-container img {
  width: 80px;
  height: 80px;
}

.semi-circle .programme-content .programme-img-container p {
  font-size: 16px;
}

.semi-circle .programme-content .programme-img-container div:nth-child(1) p {
  color: var(--color-yellow);
}
.semi-circle .programme-content .programme-img-container div:nth-child(2) p {
  color: var(--color-orange);
}
.semi-circle .programme-content .programme-img-container div:nth-child(3) p {
  color: var(--color-blue);
}
.semi-circle .programme-content .programme-img-container div:nth-child(4) p {
  color: var(--color-white);
}
.semi-circle .programme-content .programme-img-container div:nth-child(5) p {
  color: var(--color-yellow);
}

/*******************************************************
 *            PROGRAMMES Screen 2,3,4,5                *
 *******************************************************/

.programme-2 .programme-title {
  margin-top: 4%;
  font-size: 26px;
  font-weight: bold;
}
.programme-2 .programme-title2 {
  margin-top: -0.7%;
  font-size: 16px;
}
.programme-2 .description-text {
  width: 70%;
  margin: auto;
}
.programme-3 .programme-title {
  margin-top: 4%;
  font-size: 26px;
  font-weight: bold;
}
.programme-3 .programme-title2 {
  margin-top: -0.7%;
  font-size: 16px;
}
.programme-3 .description-text {
  width: 70%;
  margin: auto;
}
.programme-4 .programme-title {
  margin-top: 4%;
  font-size: 26px;
  font-weight: bold;
}
.programme-4 .programme-title2 {
  margin-top: -0.7%;
  font-size: 16px;
}
.programme-4 .description-text {
  width: 70%;
  margin: auto;
}
.programme-5 .programme-title {
  margin-top: 4%;
  font-size: 26px;
  font-weight: bold;
}
.programme-5 .programme-title2 {
  margin-top: -0.7%;
  font-size: 16px;
}
.programme-5 .description-text {
  width: 70%;
  margin: auto;
}
.programme-6 .programme-title {
  margin-top: 4%;
  font-size: 26px;
  font-weight: bold;
}
.programme-6 .programme-title2 {
  margin-top: -0.7%;
  font-size: 16px;
}
.programme-6 .description-text {
  width: 70%;
  margin: auto;
}

/* 
 * Admission
 */

.admission-1 .semi-circle {
  background-color: var(--color-purple);
}
.admission-2 .semi-circle {
  background-color: var(--color-blue);
}
.admission-3 .semi-circle {
  background-color: var(--color-blue);
}
.admission-4 .semi-circle {
  background-color: var(--color-yellow);
}

.admission-5 .semi-circle,
.admission-6 .semi-circle {
  background-color: var(--color-blue);
}

/* button color  */
.admission-1 .semi-circle .admission-content button {
  color: var(--color-purple);
}
.admission-2 .semi-circle .admission-content button {
  color: var(--color-blue);
}
.admission-4 .semi-circle .admission-content button {
  color: var(--color-yellow);
}

.admission-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 50;
  margin-top: 2%;
  text-align: center;
}

.admission-content button {
  background-color: #fff;
  border-radius: 50px;
  font-family: "MontserratRegular";
  padding: 10px;
  border: none;
  font-size: 16px;
  font-weight: 800;
}

/*******************************************************
 *                                                     *
 *            ADMISSIONS Screen 1                           *
 *                                                     *
 *******************************************************/

.admission-img-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 50%;
  margin: 4% auto;
  justify-items: center;
  align-items: start;
  box-sizing: border-box;
}

.admission-img-container > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

.admission-img-container img {
  max-width: 80px;
  height: auto;
  margin-bottom: 10px;
}
.admission-img-container > div:first-child img {
  max-width: 100px;
}
.admission-img-container > div:nth-child(2) img {
  max-width: 65px;
}
.admission-img-container > div:nth-child(3) img {
  max-width: 80px;
}

.admission-img-container > div p {
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
  font-family: "MontserratRegular";
}

/* Custom colors for each item’s text */
.admission-img-container > div:nth-child(1) p {
  color: var(--color-yellow);
}
.admission-img-container > div:nth-child(2) p {
  color: var(--color-orange);
}
.admission-img-container > div:nth-child(3) p {
  color: var(--color-white);
}
.admission-img-container > div:nth-child(4) p {
  color: var(--color-yellow);
}

/*******************************************************
 *                                                     *
 *            ADMISSIONS Screen 2                           *
 *                                                     *
 *******************************************************/

.admission-semi-circle-2 .admission-content p {
  font-family: "MontserratRegular";
}

.admission-semi-circle-2 .admission-content img {
  max-width: 200px;
  padding: 15px 0px;
}
.admission-arrow-img {
  width: 100px;
  height: auto;
  /* border: 1px solid red; */
  margin-top: -10px !important;
}
/*******************************************************
 *                                                     *
 *            ADMISSIONS Screen 3                           *
 *                                                     *
 *******************************************************/

.admission-semi-circle-3 .admission-content {
  margin: auto;
}

.admission-semi-circle-3 .admission-content img {
  max-width: 200px;
  padding: 15px 0px;
  margin-top: -30px;
}

.admission-semi-circle-3 .admission-content p {
  font-family: "MontserratRegular";
}

/*******************************************************
 *                                                     *
 *            ADMISSIONS Screen 4                          *
 *                                                     *
 *******************************************************/

.semi-circle .admission-content p {
  font-family: "MontserratRegular";
}

.semi-circle .small-text:first-child {
  margin-bottom: -20px;
}

.semi-circle .large-text {
  font-weight: bold;
  font-size: 26px;
  letter-spacing: 2px;
  line-height: 40px;
  padding: 5px 0px;
}
.semi-circle .small-text:last-child {
  margin-top: -20px;
}

/*******************************************************
 *                                                     *
 *            ADMISSIONS Screen 5                      *
 *                                                     *
 *******************************************************/

/*******************************************************
 *                                                     *
 *            ADMISSIONS Screen 6                      *
 *                                                     *
 *******************************************************/

.admission-semi-circle-6 .admission-content {
  position: relative;
}

/* 
  Pre School Tour
 */

.preschool-tour .semi-circle {
  background-color: #a9a9cc;
}

.preschool-tour-form {
  font-family: "MontserratRegular";
  width: 35%;
  margin: auto;
  background-color: var(--color-blue);
  margin-top: 2%;
  padding: 10px;
  border-radius: 20px;
  font-size: 24px;
}

label {
  font-family: "MontserratRegular";
  font-size: 20px;
  width: 30%;
  margin-right: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#admission-booking-form p,
#booking-form p {
  font-family: "MontserratRegular";
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
  text-align: center;
  margin-top: 1%;
  margin-bottom: 2%;
}

form {
  width: 80%;
  margin: auto;
  /*display: flex;*/
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

#registrationForm2{
  align-items: unset;
}

.form-field {
  display: flex;
  justify-content: flex-start;
}

.form-field input,
.form-field select {
  width: 90%;
  outline: none;
  border: none;
  border-radius: 15px;
  font-size: 16px;
  padding: 10px 5px;
  font-family: "MontserratRegular";
  border: 4px solid #2b2e8c;
}

.error {
  border: 1px solid var(--color-orange) !important;
}
.age-inputs {
  display: flex;
  width: 51%;
  justify-content: space-between;
  gap: 5px;
  padding: none;
}
.age-inputs input {
  width: 45%;
  margin: 0px;
  border-radius: 10px;
}

.form-field button {
  background-color: var(--color-red);
  color: var(--color-white);
  border-radius: 25px;
  border: none;
  font-size: 16px;
  font-family: "MontserratRegular";
  padding: 10px 25px;
  margin-top: 1%;
  text-align: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
}

#form-field-container button {
  font-size: 15px;
  margin-top: 0%;
}

#location-container #back-button {
  background-color: var(--color-red);
  color: var(--color-white);
  border-radius: 25px;
  border: none;
  font-size: 15px;
  font-family: "MontserratRegular";
  padding: 9px 25px;
  text-align: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
}

#submit-button {
  width: 78%;
  text-align: center;
  margin-left: 34%;
  margin-bottom: 1%;
}
/*******************************************************
 *                                                     *
 *            REGISTRATION Screen                      *
 *                                                     *
 *******************************************************/
/* Form styles */

/* Burger Menu Style */
.hamburger-menu {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 70px;
  margin-right: 2%;
}

/* Icon style */
#nav-icon1 {
  width: 60px;
  height: 40px;
  position: relative;
  margin: 12px;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  border-radius: 10px;
  opacity: 1;
  transition: all 0.25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  background: var(--color-blue);
  top: 0;
}

#nav-icon1 span:nth-child(2) {
  background: var(--color-orange);
  top: 18px;
}

#nav-icon1 span:nth-child(3) {
  background: var(--color-red);
  top: 36px;
}

/* Menu open animation */
#nav-icon1.open span:nth-child(1) {
  background: var(--color-blue);
  top: 18px;
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
}

#nav-icon1.open span:nth-child(3) {
  background: var(--color-orange);
  top: 18px;
  transform: rotate(-135deg);
}

/* Menu Visibility (Initially Hidden) */
.right-section-registration {
  display: none;
  position: absolute;
  top: 70px;
  /* Adjust as needed */
  right: 0;
  background-color: white;
  width: 200px;
  /* Adjust as needed */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.right-section-registration .nav-item {
  padding: 10px;
  text-align: center;
  margin: 6px;
}

.right-section-registration .nav-text {
  font-size: 16px;
  color: var(--color-blue);
  opacity: 0.7;
  cursor: pointer;
  left: 120%;
}

.nav-open {
  display: block;
  align-items: end;
}
.schedule-normal{

  height: 65vh !important;
  /* overflow-y: clip !important; */
}

/* Apply scrolling to the registration page */
html.registration-page,
body.registration-page {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}
.registration-page .registration {
  height: 30px;
}
.registration-page .form-page {
  font-family: "MontserratRegular";
  width: 100%;
  height: auto !important;
  /* margin-top: 1%; */
  /* padding: 20px; */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.registration-page .schedule-page {
  font-family: "MontserratRegular";
  width: 100%;
   height: 80vh !important; 
/*  height: 60vh !important;*/
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.registration-page .form-content {
  /* height: 100vh; */
  height: 70vh;
  background-color: var(--color-blue);
  color: white;
  /* padding: 85px; */
  /* padding: 50px 0px 0px 0px; */
  padding: 2%;
  width: 80%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* max-height: 80vh; */
  overflow-y: auto;
  scroll-behavior: smooth;
  /* padding-right: 15px; */
}
.schedule-page .form-content {
  height: 100vh;
  background-color: var(--color-blue);
  color: white;
  padding: 90px 500px;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* max-height: 100vh; */
  overflow-y: auto;
  scroll-behavior: smooth;
}
.registration-page .form-content::-webkit-scrollbar {
  width: 10px;
}

.registration-page .form-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.registration-page .form-content::-webkit-scrollbar-track {
  background: transparent;
}
.registration-page .semi-circle {
  top: 30%;
}
.form-content h2 {
  font-weight: 800;
  /* margin-bottom: 3.5rem; */
}

.registration-header {
  display: flex;
  justify-content: flex-start;
  font-size: 14px;
  /* margin-bottom: 10px; */
}

select.modal-input {
  height: 38px;
  font-size: 14px;
  padding: 3px 5px;
  border: 1px solid #ccc;
  border-radius: 12px;
  box-sizing: border-box;
}

.modal-label {
  font-family: "MontserratRegular";
  display: inline-block;
  width: 70px;
  font-size: 20px !important;
  text-align: right;
  margin-right: 10px;
  font-weight: bold;
}

.modal-input {
  font-family: "MontserratRegular";
  display: inline-block;
  width: 100%;
  padding: 5px;
  height: 38px;
  border: none;
  border-radius: 12px;
}

.modal-input:focus {
  outline: none;
  box-shadow: none;
}

.modal-form-group {
  display: flex;
  align-items: baseline;
  margin-bottom: 15px;
  width: 100%;
}

.modal-form-group label {
  width: 25%;
  /* color: black; */
  /* margin-bottom: 10px; */
}

.modal-next-submit {
  font-family: "MontserratRegular";
  background-color: var(--color-red);
  font-size: 16px;
  text-align: center;
  color: white;
  border: none;
  padding: 10px 25px;
  cursor: pointer;
  border-radius: 25px;
  margin: 4px auto 0;
  display: block;
}
.modal-submit {
  font-family: "MontserratRegular";
  background-color: var(--color-red);
  font-size: 16px;
  text-align: center;
  color: white;
  border: none;
  padding: 10px 25px;
  cursor: pointer;
  border-radius: 25px;
  margin: 4px 0 0;
  display: block;
}
.form-normal {

  /* height: 110% !important;

  padding: 0px 268px !important;

  overflow-y: hidden !important;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0) !important; */
  /* height: 235% !important; */
  height: fit-content !important;
  padding: 0px 268px !important;
  /* overflow-y: hidden !important; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0) !important;

}
/*  slot booking css laptop */
.time-slot:hover {
  cursor: pointer;
}

.time-slot.selected {
  background-color: var(--color-blue);
  color: white;
}

.time-slot.booked {
  background-color: gray;
  color: white;
  cursor: not-allowed;
  font-size: 0.8rem;
}


.booking-container {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* max-width: 500px; */
  max-width: 85%;
  width: 90%;
  text-align: center;
}

h1 {
  font-size: 1.5rem;
  color: #007bff;
  margin-bottom: 10px;
}

.date-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin: 20px 0; */
}

.nav-button {
  /*background: #007bff;*/
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.dates {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dates::-webkit-scrollbar {
  display: none;
}

.date {
  background: #f1f1f1;
  color: black;
  padding: 10px;
  border-radius: 10px;
  width: 160px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  cursor: pointer;
}

.date.active {
  background: var(--color-blue);
  color: #fff;
}

.time-selection {
  margin-top: 20px;
  color: black;
}

.time-options {
  /* display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 10px; */
    display: flex;
    /* justify-content: center; */
    gap: 22%;
    margin-bottom: 10px;
    font-size: 12px;
    align-items: center;
}

.time-options label {
  /* cursor: pointer;
  font-size: 10px; */
  cursor: pointer;
  font-size: 12px;
  display: flex;
  gap: 10px;
}

.timezone {
  font-size: 13.7px;
  color: black;
  background-color: #bdbdbd;
  padding: 10px;
  border-radius: 7px
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 10px;
  /* gap: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr)); */
}

.time-slot {
  background: #f1f1f1;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  font-size: 0.8rem;
}



@media screen and (max-width: 1024px) {
  .book {
    right: 22%;
  }

  .schedule-page .form-content {
    padding: 90px 300px;
  }
  .form-normal {
    padding: 0px 0px !important;
     /*height: 169% !important */
  }

  /* slot booking css mobile */

  .booking-container {
    max-width: 292px;
    width: 120% !important;
  }
  .form-normal form {
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center !important;
  }

}
@media (max-width: 450px) {
  .admissions-inquiry {
      font-size: 70%;
    }
}@media (max-width: 350px) {
  .admissions-inquiry {
      font-size: 60%;
    }
}
@media screen and (max-width: 768px) {
  .registration-page .form-content {
    /* padding: 17% 17%; */
    /* padding: 11% 8%; */
    padding: 15% 10%;

  }
}

@media (max-width: 768px) {
  .date {
    width: 50px;
    height: 50px;
    font-size: 0.7rem;
  }

  .time-slots {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
  .time-options {
    gap: 7%;
  }
  .registration-page .form-content {
    max-height: 77vh;
  }
}

@media (max-width: 480px) {
  .nav-button {
    padding: 5px;
    font-size: 0.8rem;
  }

  h1 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.8rem;
  }

  .date {
    width: 95px;
    height: 58px;
  }

  .time-slots {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  }
}
.registration-page .form-content {
  transition: background-color 0.3s ease;
}

.modal-input::placeholder {
  color: #6c757d; /* Match the color of your type="text" placeholder */
  opacity: 1; /* Ensures consistent opacity across browsers */
}

/* Specific styling for date input placeholders */
/* Default color for the date input (acts like a placeholder) */
.modal-input[type="date"] {
  color: #6c757d; /* Default color */
}

/* Placeholder-like styling for WebKit browsers */
.modal-input[type="date"]::-webkit-datetime-edit {
  color: #6c757d;
}

/* Style for month, day, and year fields when no date is selected */
.modal-input[type="date"]::-webkit-datetime-edit-month-field,
.modal-input[type="date"]::-webkit-datetime-edit-day-field,
.modal-input[type="date"]::-webkit-datetime-edit-year-field {
  color: #6c757d;
}

/* When a valid date is entered or selected */
.modal-input[type="date"]:focus,
.modal-input[type="date"]:valid {
  color: black; /* Selected date color */
}



#location, #current-grade {
  color: #6c757d; 
  border: 1px solid #ced4da; 
  background-color: #f8f9fa;
  font-size: 1rem; 
  width: 61%;
  margin-top: 3px;
}

/* Style the placeholder for the select dropdown */
#location option, #current-grade option {
  color: #6c757d; 
}

#location:focus, #current-grade:focus {
  color: #6c757d; 
}

/* Change text color for valid selections */
.modal-input:not(:placeholder-shown),
#location:focus, 
#current-grade:focus, 
#location:valid, 
#current-grade:valid {
  color: black; /* Text color after typing or selecting */
}

.tele-link{
  text-decoration: none;
}
/*******************************************************
 *                                                     *
 *            CONTACT US COMMON STYLES                 *
 *                                                     *
 *******************************************************/

.contact-us-1 .semi-circle {
  background-color: var(--color-blue);
}

.contact-us-1 .semi-circle .screen-title {
  color: var(--color-blue);
}

/*******************************************************
 *                                                     *
 *            CONTACT US SCREEN1 STYLES                 *
 *                                                     *
 *******************************************************/

/* Container styling */
.contact-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1%;
}

/* Row for email and mobile items */
.contact-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  width: 100%;
}

/* Email item styling */
.email-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-top: 1.5%; */
  gap: 10px;
}

.email-item img {
  width: 25px;
  height: 25px;
}
.email-item a {
  margin-left: 0;
  font-family: "MontserratRegular";
  font-size: 12px !important;
  line-height: 18px !important;
}

/* Mobile item styling */
.mobile-item {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Minimal space between icon and text for mobile */
}

.mobile-item img {
  width: 25px;
  height: 25px;
}
.mobile-item p {
  margin-left: 0;
  font-family: "MontserratRegular";
  font-size: 12px;
  line-height: 18px;
}

/* Address item styling with reduced spacing */
.address-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto;
  white-space: nowrap;
  margin-top: 1.5%;
}

.address-item img {
  width: 25px;
  height: 25px;
}

.address-item p {
  margin-left: 0;
  font-size: 12px;
  line-height: 18px;
}

/* Map item styling */
.map-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5.5%;
}

.map-item img {
  width: 500px;
  height: auto;
}
.small-text {
  font-size: 18px;
}

.admission-content > .letter-circle {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;
  width: 240px;
  border: 1px solid var(--color-red);
  border-radius: 50%;
  padding: 20px;
  background-color: var(--color-red);
  box-sizing: border-box;
  color: var(--color-white);
  font-family: "MontserratRegular";
  font-weight: 800;
  line-height: 30px;
}

.preschool-tour .resemi-circle {
  background-color: var(--color-white);
}

/* carousal  */

.why-us-carousal {
  width: 35%;
  margin: auto;
  margin-top: 2%;
  position: relative;
}

.why-us-carousal-left,
.why-us-carousal-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}

.why-us-carousal-left {
  left: 0px;
}

.why-us-carousal-right {
  right: 0px;
}

.why-us-carousal-left img,
.why-us-carousal-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.why-us-carousal-outer-container {
  overflow: hidden;
  width: 75%;
  margin: auto;
}

.why-us-carousal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: auto;
  gap: 10px;
  width: calc(100% * 5);
  transition: transform 1.5s ease;
}

.why-us-carousal-item {
  text-align: center;
  background-color: #f0f0f0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  align-items: center;
}

.why-us-carousal-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.why-us-carousal-item p {
  margin-top: 10px;
  font-size: 10px;
  font-weight: bold;
}

.why-us-carousal-container div:nth-child(1) {
  background-color: var(--color-yellow);
}
.why-us-carousal-container div:nth-child(2) {
  background-color: var(--color-orange);
}

.why-us-carousal-container div:nth-child(3) {
  background-color: var(--color-red);
}
.why-us-carousal-container div:nth-child(4) {
  background-color: var(--color-purple);
}
.why-us-carousal-container div:nth-child(5) {
  background-color: var(--color-yellow);
}
.why-us-carousal-container div:nth-child(6) {
  background-color: var(--color-orange);
}

.why-us-carousal-container div:nth-child(7) {
  background-color: var(--color-red);
}
.why-us-carousal-container div:nth-child(8) {
  background-color: var(--color-purple);
}
.why-us-carousal-container div:nth-child(9) {
  background-color: var(--color-yellow);
}
.why-us-carousal-container div:nth-child(10) {
  background-color: var(--color-orange);
}

.why-us-carousal-container div:nth-child(11) {
  background-color: var(--color-red);
}
.why-us-carousal-container div:nth-child(12) {
  background-color: var(--color-purple);
}
.why-us-carousal-container div:nth-child(13) {
  background-color: var(--color-yellow);
}
.why-us-carousal-container div:nth-child(14) {
  background-color: var(--color-orange);
}

.why-us-carousal-container div:nth-child(15) {
  background-color: var(--color-red);
}
.why-us-carousal-container div:nth-child(16) {
  background-color: var(--color-purple);
}

.why-us-carousal-container div:nth-child(17) {
  background-color: var(--color-yellow);
}
.why-us-carousal-container div:nth-child(18) {
  background-color: var(--color-orange);
}

.why-us-carousal-container div:nth-child(19) {
  background-color: var(--color-red);
}
.why-us-carousal-container div:nth-child(20) {
  background-color: var(--color-purple);
}

#our-story-purpose,
#our-story-mission,
#our-story-philosophy,
#our-story-team,
#why-us-mind-model,
#why-us-curriculum,
#why-us-infrastructure,
#why-us-enrichment,
#why-us-growth-mindset,
#why-us-partnerships,
#programme-toddler,
#programme-playgroup,
#programme-nursery,
#programme-jrkg,
#programme-srkg,
#admission-process,
#eligibility-criterion,
#fee-structure,
#apply-for-admission,
#letter-circle {
  cursor: pointer;
}

/* Modal css  */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,   0, 0, 0.5);
  align-items: center;
  padding-top: 40px;
}

.modal-image-box {
  position: relative;
  border: 5px solid white;
  margin: auto;
  border-radius: 10px;
}

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 80vw;
  border-radius: 10px;
}
.modal-image-item {
  cursor: pointer;
}

/* Loader Css  */
/* Add this to your CSS file */
.loader {
  position: fixed;
  left: 45%;
  top: 40%;
  transform: translate(-50%, -50%);
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  z-index: 9999; /* Ensure it is above other elements */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.main-content {
  display: none; /* Hide the main content initially */
}

/* color change to white in big red circle  */
.admission-4 .semi-circle .admission-content .letter-circle {
  color: white;
}
/* color change to white in button in tour form   */
#submit-button button {
  margin-top: 17px;
  color: white;
}

/* POPUP  */
/* Popup container within the semi-circle */

.popup {
  position: fixed;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  /* -webkit-transition: transform 1.8s ease; */
  /* -moz-transition: transform 1.8s ease; */
  /* transition: transform 1.8s ease; */
  top: 0;
  /* will-change: transform; */
}

.popup-semi-circle {
  width: 130%;
  height: 100%;
  border-radius: 50% 50% 0% 0%;
  position: absolute;
  top: 20%;
  left: -15%;
  background-color: var(--color-blue);
}

#popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* transition: opacity 0.3s ease, visibility 0.3s ease; */
  margin: auto;
  visibility: hidden;
}

/* Popup content centered in the semi-circle */
#popup-content {
  position: relative;
}

/* Popup image styling */
#popup-image {
  max-width: 60%;
  cursor: pointer;
  margin: -10px auto;
  display: block;
}

/* Close button styling */
#close-popup {
  position: absolute;
  top: 0px;
  right: 190px;
  color: gray;
  background-color: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  border: none;
}
.hamburger {
  display: none; /* Show hamburger on mobile */
}
@media (max-width: 768px) {
  .hamburger {
    display: flex; /* Show hamburger on mobile */
  }
  .hamburger img {
    margin-right: 10px;
    width: 30px;
    margin-top: -10px;
    }

  .nav-item {
    margin: 15px 0; /* Vertical spacing */
  } 
  .right-section {
    display: none; /* Hide desktop nav by default on mobile */
    position: fixed;
    top: 13%;
    gap: 8px;
    right: 0;
    width: 170px; /* Width of mobile menu */
    height: auto; /* Full height */
    background-color: #fff; /* Background color */
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 10px 10px; /* Space for header and content */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    align-items: baseline;
  }

  .right-section.active {
    display: flex; /* Show when toggled */
  }

  .nav-item {
    margin: 15px 0;
    width: 100%; /* Full width for better spacing */
    justify-content: flex-start; /* Align text left */
  }

  .nav-text {
    position: static; /* Remove absolute positioning in mobile */
    right: auto;
    opacity: 1; /* Always visible in mobile menu */
    font-size: 16px;
  }

  .book {
    margin-top: 20px; /* Space above book button on mobile */
  }

  /* Hamburger animation */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0; /* Hide middle line */
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

}
/* Show popup */
#popup.active {
  visibility: visible;
  opacity: 1;
}

.copyright-item {
  background: #0000 !important;
  font-size: 14px !important;
  margin-top: 30px;
}

.contact-us-copyright-item {
    font-size: 14px !important;
    background: #0000 !important;
    color: white !important;
    margin-top: 15px !important;
}