@import url('./utilities/helper.css');
@import url('./components/nav.css');
@import url('./components/footer.css');
@import url('./components/notification.css');
@import url('./components/banner.css');
@import url('https://cdn.jsdelivr.net/npm/intl-tel-input@25.2.1/build/css/intlTelInput.css');

body::-webkit-scrollbar {
  display: none;
  scroll-behavior: smooth;
}

.about-us-page section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: Poppins;
  font-weight: 400;
  text-align: center;
  padding: 3em 0;
}

.about-us-page .image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-us-page section:where(.hero-section, .info-section, .team-info, .roles-info, .office-info) {
  background: white;
}

.about-us-page .highlight {
  color: var(--primary-color);
}

.about-us-page .highlight.bold {
  font-weight: 500;
}

.about-us-page section > div.container {
  max-width: 1280px;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  gap: 2em;
  width: 90%;
}

section.hero-section {
  padding-bottom: 6em;
}

.hero-section .container .info {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 3em;
}

.hero-section .info h1 {
  font-size: 3.5em;
  color: #D9D9D9;
  line-height: 121%;
  font-weight: 400;
  max-width: 22ch;
  white-space: wrap;
}

.hero-section .info .info-paragraph {
  line-height: 168%;
  font-size: 1em;
  color: #727272;
  white-space: wrap;
  max-width: 75ch;
}

@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-section .scroll-content {
  position: relative;
  width: 70%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  display: flex;
}

.hero-section .scroll-content .image-container {
  position: absolute;
  width: 100%;
  border-radius: 14px;
  opacity: 0;
  animation: fade 88s infinite ease-in-out;
  display: flex;
  overflow: hidden;
  height: 100%;
}

.hero-section .scroll-content .image-container:nth-child(1) { animation-delay: 0s; opacity: 1; }
.hero-section .scroll-content .image-container:nth-child(2) { animation-delay: 8s; }
.hero-section .scroll-content .image-container:nth-child(3) { animation-delay: 16s; }
.hero-section .scroll-content .image-container:nth-child(4) { animation-delay: 24s; }
.hero-section .scroll-content .image-container:nth-child(5) { animation-delay: 32s; }
.hero-section .scroll-content .image-container:nth-child(6) { animation-delay: 40s; }
.hero-section .scroll-content .image-container:nth-child(7) { animation-delay: 48s; }
.hero-section .scroll-content .image-container:nth-child(8) { animation-delay: 56s; }
.hero-section .scroll-content .image-container:nth-child(9) { animation-delay: 64s; }
.hero-section .scroll-content .image-container:nth-child(10) { animation-delay: 72s; }
.hero-section .scroll-content .image-container:nth-child(11) { animation-delay: 80s; }

.hero-info-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 70%;
}

.hero-info-container .info-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  color: #605F5F;
  line-height: 152%;
  text-align: center;
  border: 1.2px solid #EAEAEA;
  border-radius: 8px;
  box-shadow: 0px 4px 4px 0px #0000000D;
  padding: 1.5em 2em;
  background: white;
  flex: 0 1 calc(calc(100% / 3) - 1.5em);
}

.hero-info-container .info-content > p:nth-child(1) {
  font-size: 1.8em;
}

.hero-info-container .info-content > p:nth-child(2) {
  font-size: 1.1em;
}

.about-us hr.separation {
  all: unset;
  width: 100%;
  background: #E3E3E3;
  height: 1px;
  display: block;
}

.info-section h2 {
  color: #605F5F;
  font-size: 1.8em;
  font-weight: 400;
  max-width: 25ch;
  white-space: wrap;
}

/* Timeline Section starts */
section.timeline {
  padding: 0;
}

.timeline_component {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.timeline_progress {
  z-index: -2;
  background-color: #D9D9D9;
  width: 3px;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.timeline_progress-bar {
  z-index: -1;
  background-color: #B2DFBA;
  width: 3px;
  height: 50vh;
  position: fixed;
  inset: 0 auto 50vh;
}

.timeline_item {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 180px 1fr;
  grid-auto-columns: 1fr;
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
  position: relative;
}

.timeline_item:last-child {
  padding-bottom: 0;
}

.timeline_left {
  text-align: right;
  justify-content: flex-end;
  align-items: stretch;
}

.timeline_date-text {
  color: #605F5F;
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.52;
  position: sticky;
  top: 50vh;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.timeline-image-container {
  display: flex;
  width: 65%;
  justify-content: space-between;
}

.timeline-image-container img {
  display: flex;
  width: 50%;
  object-fit: contain;
  border: 1px solid #CFCFCF;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-radius: 9px;
  max-width: 200px;
}

.timeline-image-container img:nth-child(1) {
  transform: rotate(6.54deg) translateX(10px);
}

.timeline-image-container img:nth-child(2) {
  transform: rotate(-3.55deg) translateX(-10px);
  z-index: -1;
}

.timeline_centre {
  justify-content: center;
  display: flex;
}

.mobile-view-timeline-item-heading{
  display: none;
}
.timeline_circle {
  background-color: #B2DFBA;
  border-radius: 100%;
  width: 15px;
  min-width: 15px;
  max-width: 15px;
  height: 15px;
  min-height: 15px;
  max-height: 15px;
  position: sticky;
  top: 50vh;
  box-shadow: 0px 0px 12.9px 0px #00000040;
}

.margin-bottom-xlarge {
  margin-bottom: 25px;
}

.timeline_text {
  color: #605F5F;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.52;
  text-align: left;
}

.overlay-fade-bottom {
  background-image: linear-gradient(to top, white, #0a0a0a00);
  /* height: 80px; */
  position: absolute;
  inset: auto 0% 0%;
}

.overlay-fade-top {
  background-image: linear-gradient(to bottom, white, #0a0a0a00);
  height: 80px;
  position: absolute;
  inset: 0% 0% auto;
}


.timeline_left,
.timeline_right {
  transition: opacity 0.3s ease-in-out;
}

.timeline{
  padding: 0em !important;
}

.about-us-page section.info-section.timeline-extra {
  font-size: 1.25em;
  color: #605F5F;
  padding-top: 3em;
}


/* =============================== */

.info-section.artist h2 {
  color: #D9D9D9;
  font-size: 3.7em;
}


.team-component {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6em;
  width: 85%;
  color: #605F5F;
  line-height: 152%;
}

.team-component .team {
  width: calc(calc(100% / 3) - 4em);
}

.team-component .image-container {
  width: 100%;
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1.2;
}

.team-component .image-container img {
  object-fit: cover;
}

.team-component .name {
  margin-top: 1em;
  font-size: 1.15em;
}

.team-component .designation {
  margin-top: 0.2em;
  font-size: 0.95em;
}

.role-component {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4em;
  width: 95%;
  color: #605F5F;
}

.role-component .role {
  text-align: left;
  line-height: 152%;
  color: #605F5F;
  position: relative;
  padding: 0.5em 0;
  padding-left: 2em;
  display: flex;
  flex-direction: column;
}

.role-component .role::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 3px;
  background: #4E9459BA;
  border-radius: 20px;
  top: 0;
  left: 0;
}

.role-component .role-info {
  font-weight: 400;
  font-size: 1.5em;
  margin-bottom: 0.3em;
}

.role-component .perks {
  margin-top: 1em;
  height: 100%;
}

.role-component ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.role-component ul > li::before {
  content: "- ";
  margin-right: 5px;
}

.role-component .apply-now {
  margin-top: 1.5em;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--primary-color);
}

.role-component .apply-now svg {
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease-in-out;
}

.role-component .apply-now:hover svg {
  opacity: 1;
  transform: translateX(0px);
}

section.office-info {
  padding-bottom: 9em;
}

.office-info .scroll-container {
  width: 95%;
  height: 100%;
  aspect-ratio: 4 / 1;
}

.office-info .scroll-content {
  width: 100%;
  display: flex;
  gap: 1.5em;
  overflow: hidden;
  height: 100%;
  position: relative;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 5%,
    rgba(0, 0, 0, 1) 95%,
    rgba(0, 0, 0, 0)
  );
}

@keyframes scrollLeft {
  to {
    left: calc(0% - calc(100% / 3));
  }
}

.office-info .image-container {
  flex: 1 0 calc(100% / 3);
  aspect-ratio: 1.3 / 1;
  height: 100%;
  display: flex;
  overflow: hidden;
  background-color: red;
  border-radius: 14px;
  position: absolute;
  left: max(calc(calc(100% / 3) * 8), 100%);
  animation-name: scrollLeft;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.office-info .image-container.item1 {
  animation-delay: calc(60s / 8 * (8 - 1) * -1);
}

.office-info .image-container.item2 {
  animation-delay: calc(60s / 8 * (8 - 2) * -1);
}

.office-info .image-container.item3 {
  animation-delay: calc(60s / 8 * (8 - 3) * -1);
}

.office-info .image-container.item4 {
  animation-delay: calc(60s / 8 * (8 - 4) * -1);
}

.office-info .image-container.item5 {
  animation-delay: calc(60s / 8 * (8 - 5) * -1);
}

.office-info .image-container.item6 {
  animation-delay: calc(60s / 8 * (8 - 6) * -1);
}

.office-info .image-container.item7 {
  animation-delay: calc(60s / 8 * (8 - 7) * -1);
}

.office-info .image-container.item8 {
  animation-delay: calc(60s / 8 * (8 - 8) * -1);
}

.office-info .image-container > img {
  object-fit: cover;
  object-position: center;
}

/* ========================== */
.about-us-page section.info-section{
  padding-top: 8em;

}

.info-section .info {
  width: 90%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
}

.scroll-content .image-container img{
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* ================= */

.about-us-page section.office-info .container {
  flex-direction: row;
}

.mySwiper{
  margin-top: 2em;
}

.swiper-slide img{
  width: 100%;
}

.office-info img{
  aspect-ratio: 3/2;
  border-radius: 14px;
  object-fit: fill;
}

.mySwiper{
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 5%,
    rgba(0, 0, 0, 1) 95%,
    rgba(0, 0, 0, 0)
  );
}


/* ============================================= */


@media(max-width: 576px){
  .hero-info-container{
    flex-direction: column;
    gap: 1em;
  }
  .role-component{
    grid-template-columns: 1fr;
  }
  .team-component{
    gap: 2em;
    width: 90%;
    justify-content: space-between;
    
  }
  .about-us-page section > div.container{
    width: 100%;
  }
  .hero-section .info h1{
    font-size: 2em;
  }
  .hero-section .container .info{
    width: 90%;
  }
  .hero-section .scroll-content{
    width: 100%;
  }
  .hero-info-container .info-content{
    width: 85%;
  }
  .team-component .name{
    font-size: 1em;
  }
  .team-component .designation{
    font-size: 0.8em;
  }
  .role-component .role{
    width: 90%;
  }
  .hero-info-container .info-content > p{
    margin: 0 auto;
  }
  .info-section.artist h2{
    font-size: 2em;
  }
  .about-us-page section{
    padding: 2em 0;
  }

  .timeline {
    width: 90% !important;
    margin: 0 auto !important;
  }

  .timeline_item {
    grid-template-columns: 1fr 3px 1fr; 
  }

  .timeline_left {
    display: none; 
  }

  .timeline_progress{
    left: 6px;
  }

  .timeline_right {
    grid-column: 1 / -1; 
    text-align: left; 
    padding-left: 0.5em; 
    opacity: 0.25;
    transition: opacity 0.3s ease-in-out;
  }
  
  .timeline_text{
    margin: 0 1.5em;
  }
  .timeline_item {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
  }

  .timeline_centre{
    left: -6px;
  }
  .mobile-view-timeline-item-heading{
    display: inline-block;
    font-size: 1.5em;
    font-weight: 500;
    margin: 0 1.1em;
    margin-bottom: 0.5em;
  }

  .role-component .apply-now svg {
    opacity: 1;
    transform: translateX(0);
  }

  .mySwiper {
    mask-image: none;
  }
  .team-component .team{
    width: 45%;
    margin: 0 auto;
  }
}