.close,
.item .name,
.modal-text p:last-child {
  font-weight: 700;
}
#nav-animated-content li:nth-child(odd),
.navbar-body {
  animation: 1s forwards dropAndCenter;
}
* {
  padding: 0;
  margin: 0;
}
.flexBetween {
  display: flex;
  justify-content: space-around;
  align-items: center;
  row-gap: 10px;
}
#navbar-box {
  padding: 20px 0;
  background: 0 0;
  backdrop-filter: blur(5px);
  width: 100%;
  position: fixed;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  z-index: 3000;
  top: 0;
}
.nav-logo {
  /* margin-left: 12em; */
}
.nav-menu-icon {
  position: relative;
  width: 3rem;
  height: 3rem;
  /* margin-right: 1.8rem; */
}
.nav-menu-icon > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  height: 100%;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.static-menu-gif {
  background-image: url("../assets/Icons/Animated Icons/menu-static.gif");
  width: 100%;
}
.animated-menu-gif {
  background-image: url("../assets/Icons/Animated Icons/menu.gif");
  display: none;
  width: 100%;
}
.static-cross-gif {
  background-image: url("../assets/Icons/Animated Icons/cross-static.gif");
  width: 100%;
}
.animated-cross-gif {
  background-image: url("../assets/Icons/Animated Icons/cross.gif");
  display: none;
  width: 100%;
}
.hidden,
.nav-menu-icon:hover .static-cross-gif,
.nav-menu-icon:hover .static-menu-gif {
  display: none;
  width: 100%;
}
.nav-menu-icon:hover .animated-cross-gif,
.nav-menu-icon:hover .animated-menu-gif {
  display: block;
  width: 100%;
}
#nav-content-body a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s;
}
#nav-content-body a:hover {
  color: #00f;
}
.navbar-body {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 3000;
  background-color: #17e5e5c7;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
}
@keyframes moveToCenter {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}
#nav-animated-content li {
  opacity: 0;
  transform: translateY(-50px) translateX(-50%);
  color: #000;
  font-size: 28px;
  padding: 30px 0;
  transition: transform 0.5s, opacity 0.5s;
  line-height: 18px;
  text-align: justify;
  text-align-last: center;
}
#nav-animated-content li:nth-child(2n) {
  animation: 1s 0.5s forwards dropAndCenter;
}
#nav-animated-content ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: -180px;
}
#nav-animated-content li:hover {
  color: #000;
  display: inline-block;
  width: 13rem;
  transform: translateY(-45px) translateX(50%) translateX(-1rem);
  font-style: italic;
}
#nav-animated-content li:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.navbar-content-icons {
  width: 2rem;
  /* margin-right: 20px; */
}
.nav-log-image {
  width: 8rem;
  aspect-ratio: auto;
}
.nav-right-icon-position {
  /* width: 15% !important; */
}
.margin-top-main-page {
  margin-top: 85px;
}
.iframe_yotube_size {
  width: 100%;
  height: 60vh;
}

@media screen and (max-width: 968px) {
  .nav-menu-icon > div {
  margin-left: -1em;
  }
  .nav-logo {
    /* margin-left: 5em; */
  }

}


@media screen and (max-width: 576px) {

  .nav-logo {
    /* margin-left: .6em; */
  }
}

@media screen and (max-width: 480px) {
  .iframe_yotube_size {
    width: 100%;
    height: 30vh;
  }
}
.fade-in-top {
  -webkit-animation: 2.2s ease-in-out 0.38s fade-in-top;
  animation: 2.2s ease-in-out 0.38s fade-in-top;
}
@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
.fade-in-bottom {
  -webkit-animation: 0.6s ease-in-out 2.6s both fade-in-bottom;
  animation: 0.6s ease-in-out 2.6s both fade-in-bottom;
}
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

.modal {
  display: none; /* Hide the modal by default */
  position: fixed;
  z-index: 99999; /* Ensure modal is on top of other elements */
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

body.modal-open {
  overflow: hidden; /* Hide main scrollbar */
}

.modal-content {
  background-color: #ffffff63;
  padding: 40px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;

}

.close {
  color: #000000;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 35px;
  cursor: pointer;
  padding-top: 4px;
}

.close:focus,
.close:hover {
  color: #000;
  text-decoration: none;
}

.modal-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-top: 1%;

}

.modal-text p {
  margin-bottom: 15px;
  text-align: justify;
  
}
@media (max-width: 768px) {
  .modal-content {
    width: 100%;
    border-radius: 0;
    margin: 15% auto;
    top: 0;
    left: 0;
    transform: none;
  }
}













.logos__marquee {
  display: flex;
  overflow-x: hidden;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 1;
  height: 40%;
}
.marquee__logos {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1rem;
  min-width: 100%;
  animation: 20s linear infinite loop;
}
.marquee__logos img {
  display: block;
  margin-inline: 2rem;
  object-fit: contain;
  mix-blend-mode: multiply;
  aspect-ratio: 6/4;
}
@keyframes loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.container_team {
  margin: 9em auto;
  height: 100px;
  padding: 120px;
  display: flex;
  justify-content: center;
  align-items: end;
}
@media screen and (max-width:1100px) {
  .container_team {
  margin: 15em auto;
  }
}
#slide_team {
  margin-top: 50px;
}
.item {
  width: 200px;
  height: 300px;
  background-position: 50% 50%;
  display: inline-block;
  transition: 0.5s;
  background-size: cover;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translate(0, -50%);
}
.item:first-child,
.item:nth-child(2),
.left-card {
  display: none;
}
.item:nth-child(3) {
  left: 45%;
  transform: translate(-30%, -50%) scale(1.8);
}
.item:nth-child(4) {
  left: calc(50% + 260px);
  opacity: 0.5;
}
.item:nth-child(5) {
  left: calc(50% + 480px);
  opacity: 0.5;

}
.item:nth-child(n + 6) {
  left: calc(50% + 720px);
  opacity: 0;
}
.item .content {
  position: relative;
  top: 50%;
  left: 100px;
  width: 100px;
  text-align: left;
  padding: 0;
  color: #eee;
  transform: translate(0, -50%);
  display: none;
  font-family: system-ui;
}
.item:nth-child(2) .content {
  display: block;
}
.item .name {
  font-size: 324px;
  opacity: 0;
  animation: 1s ease-in-out forwards showcontent;
}
.item .des {
  margin: 20px 0;
  opacity: 0;
  animation: 1s ease-in-out 0.3s forwards showcontent;
}
.item button {
  padding: 10px 20px;
  border: none;
  opacity: 0;
  animation: 1s ease-in-out 0.6s forwards showcontent;
}
@keyframes showcontent {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}
.buttons_team {
  position: relative;
  bottom: 30px;
  text-align: center;
  width: 100%;
  transform: translate(38%, -200%);
}
.buttons_team button {
  width: 50px;
  height: 50px;
  border-radius: 10%;
  border: 1px solid #555;
  transition: 0.5s;
  background-color: #000;
}
.buttons_team button:hover {
  background-color: #fff;
  color: #000;
}
.left-card {
  position: absolute;
  left: 0;
  top: 30%;
  transform: translateX(40%);
  width: 28em;
  background-color: #E1E8ED;
  backdrop-filter: blur(50%);
  box-shadow: 0 10px 10px #F5F8FA;
  border-radius: 20px;
  padding: 3em;
}
.left-card .content {
  color: #333;
}
.left-card .content .name {
  font-size: 18px;
  font-weight: 600;
  color: #302c2c;
  text-shadow: #262323;
}
.left-card .content .des {
  color: #0F4D19;
  text-align: justify;
  padding-top: 8px;
}
@media (max-width: 1120px) {
  .left-card {
    transform: translateX(-5%);
  }
}
@media (max-width: 900px) {
  .left-card {
    transform: translateX(-5%);
  }
  .item:nth-child(3) {
    left: 55%;
    transform: translate(-30%, -50%) scale(1.6);
  }
}
@media (max-width: 560px) {
  .left-card {
    transform: translate(0);
    top: 25%;
    width: 23.5em;

    border-radius: 20px;
    background-color: #E1E8ED;
    backdrop-filter: blur(50%);
    box-shadow: 0 10px 10px #F5F8FA;
    padding: 3em;
    display: none;
  }
  .item:nth-child(3) {
    left: 40%;
    transform: translate(-30%, -25%) scale(1.4);
  }
  .buttons_team {
    display: flex;
    transform: translate(38%, -400%);
  }
}
.buttons_team > #prev > .arrow_button_team {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  z-index: 2;
  width: 50%;
  filter: invert(100%);
}
.buttons_team > #next > .arrow_button_team {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 50%;
  filter: invert(100%);
}
.buttons_team > #next:hover > .arrow_button_team,
.buttons_team > #prev:hover > .arrow_button_team {
  filter: none;
}




.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end);
}


@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}



/* Styles for the visionary team section */
.visionary-team {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  transform: translateY(-30px);
  animation: fadeIn 0.5s ease-in-out;
}

.visionary-team__title {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
}

.visionary-team__subtitle {
  font-style: italic;
  font-size: 18px;
  color: #E1E8ED;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}

.visionary-team__description {
  font-size: 16px;
  line-height: 1.6;
  color: #9FAFCA;
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.visionary-team {
  animation: fadeIn 0.5s ease-in-out;
}

@media (max-width: 768px) {
  .visionary-team {
    padding: 20px;
  }
}


/* Footer Section Styles */
.visionary-team-footer {
  padding: 30px;
  border-radius: 8px;
  margin: 0 auto;
  max-width: 1200px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Add shadow for depth */
}


.visionary-team__description-footer {
  line-height: 1.6; /* Adjust line height for better readability */
}

.visionary-team__description-footer > div {
  margin-bottom: 20px; /* Add margin between paragraphs */
}

.visionary-team__description-footer strong {
  color: #ffffff; /* Adjust text color of strong elements */
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to content */
.visionary-team__content-footer {
  animation: fadeIn 0.5s ease-in-out;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .visionary-team-footer {
    padding: 20px;
  }
}









.margin__top_product_title {
  margin-top: -2rem !important;
  font-size: 2.2rem !important;
}

.text_alignment_product_desc{
  padding: 3px; 
  text-align:justify;
}















.blur-effect {
  padding: 80px 0;
  background: 0 0;
  backdrop-filter: blur(5px);
  width: 100%;
  position: fixed;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  z-index: 3000;
  top: 0;
}






.width__home__main{
  width: 77% !important;
}


@media only screen and (max-width: 600px) {

  .width__home__main{
    width: 100% !important;
  }
  
}














.container__modal {
  height: 100%;
  width: 100%;
  padding: 2rem 0;
  display: grid;
  place-content: center;
  
  .cards {    
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem;
    pointer-events: none;
  }
  
  .card {
    max-width: 15rem;
    color: #ffffffda;
    padding: 1.5rem;
    background-color: #202022;
    
    pointer-events: auto;
    
    transform: scale(1);
    opacity: 1;
    transition: all 150ms ease-in-out; 
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    
    display: flex;
    flex-direction: column;
    
    .card-title {
      position: relative;
      
      &::before {
        content: "";
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        box-shadow: inset 0 0 3px #bb86fc;
        background-color: transparent;
        
        position: absolute;
        right: 0;
      }
    }

    @media (max-width: 768px) {
      .cards {
        grid-template-columns: repeat(2, 1fr); /* Switch to 1 column on smaller screens */
      }
    }
    
    .date {
      color: #bb86fc;
      font-size: 0.85rem;
      margin-bottom: 1.5rem;
    }
    
    .description {
      font-size: 0.9rem;
    }
    
    &:nth-child(even) {
      transform: translateY(8px);
    }
    
    &:nth-child(n) {
      transform: rotate(-5deg);
    }
  }


}



.cards:hover > .card:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 10;
}
.cards:hover > .card:not(:hover) {
  opacity: 0.5;
}