@font-face {
  font-family: "AvenirNext-Regular";
  src: url("./webFonts/AvenirNextProRegular/font.woff2") format("woff2"),
       url("./webFonts/AvenirNextProRegular/font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AvenirNext-Medium";
  src: url("./webFonts/AvenirNextProRegular/font.woff2") format("woff2"),
       url("./webFonts/AvenirNextProRegular/font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AvenirNext-DemiBold";
  src: url("./webFonts/AvenirNextProDemi/font.woff2") format("woff2"),
       url("./webFonts/AvenirNextProDemi/font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AvenirNext-Bold";
  src: url("./webFonts/AvenirNextProBold/font.woff2") format("woff2"),
       url("./webFonts/AvenirNextProBold/font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* About Us specific styles */
.sl-StepList + a.ui-PrimaryLink {
  display: none;
}

section[data-section="a-global-company"],
section[data-section="a-global-company"] .ns-Content {
  margin-bottom: 80px;
}
@media (min-width: 768px) {
  section[data-section="a-global-company"],
  section[data-section="a-global-company"] .ns-Content {
    margin-bottom: 80px;
  }
}

/* Step List Styling */
.sl-StepList {
  display: grid;
  gap: 15px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .sl-StepList {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

.sl-StepList_descending {
  transform: perspective(1000px) rotateX(5deg);
}

.sl-StepListItem {
  position: relative;
  width: 100%;
}

.sl-StepListItem img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

/* Primary Link Styling */
.ui-PrimaryLink {
  display: inline-block;
  padding: 15px 30px;
  background-color: #48dbac;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-family: "AvenirNext-DemiBold", sans-serif;
  font-size: 1rem;
  margin-top: 25px;
  transition: background-color 0.3s ease;
}

.ui-PrimaryLink:hover {
  background-color: #189970;
}

.ui-PrimaryLink.visible {
  display: inline-block;
}

/* Paper Plane Animation Styles */
.ns-PaperPlaneHomeSVG {
  position: absolute;
  top: 180%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2000px;
  height: 1404px;
  z-index: -1;
}

@media (min-width: 768px) {
  .ns-PaperPlaneHomeSVG {
    top: 200%;
  }
}

#Plane-2-Line {
  stroke-dasharray: 3825.504638671875;
  stroke-dashoffset: 3825.504638671875;
}

.animate #Plane-2-Line {
  animation: drawLocationPlanePath 4s ease both;
}

#movingDiv {
  position: absolute;
  offset-path: path("M0,0 C58.1831678,109.939833 191.566748,239.448946 370.046875,297.890625 C698.046875,405.291214 1473.88281,402.78125 1470.86042,731.710938 C1467.82031,1060.64063 1099.10156,982.945313 759.898438,1043.57812 C420.695312,1104.21094 61.1278037,1328.01376 0,1402");
  opacity: 0;
  top: 0;
  left: 0;
  width: 47px;
  height: 47px;
  transform: translateY(-5px) rotate(-30deg);
  background-image: url("./Plane2.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  --locationPlaneOffsetStart: 20%;
  --locationPlaneOffsetEnd: 80%;
  --locationPlaneOffsetEnd2: 10%;
}

@media (min-width: 768px) {
  #movingDiv {
    --locationPlaneOffsetStart: 0%;
    --locationPlaneOffsetEnd: 100%;
    --locationPlaneOffsetEnd2: 10%;
  }
}

.animate #movingDiv {
  transition: 0.3s opacity;
  opacity: 1;
  animation: animateHomeLocationPlane 4s ease, animateHomeLocationPlaneEnd 2s 4s ease-in-out forwards;
}

@keyframes drawLocationPlanePath {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes animateHomeLocationPlane {
  0% {
    offset-distance: var(--locationPlaneOffsetStart);
  }
  100% {
    offset-distance: var(--locationPlaneOffsetEnd);
  }
}

@keyframes animateHomeLocationPlaneEnd {
  0% {
    offset-distance: var(--locationPlaneOffsetStart);
  }
  100% {
    offset-distance: var(--locationPlaneOffsetEnd2);
  }
}

/* Shriya Location Cards Scroller */
.ic-ShriyaLocationCardsScroller {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ic-ShriyaLocationCardsScroller-track {
  display: flex;
  gap: 15px;
  animation: scrollCards 60s linear infinite;
  width: fit-content;
  padding: 0 20px;
}

.ic-ShriyaLocationCardsScroller:hover .ic-ShriyaLocationCardsScroller-track {
  animation-play-state: paused;
}

@keyframes scrollCards {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ns-LocationCard {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 200px;
  height: 300px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  border: 1px solid #e8e8e8;
}

.ns-LocationCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ns-LocationHeader {
  padding: 16px 16px 12px 16px;
}

.ns-LocationName {
  font-family: "AvenirNext-Bold", sans-serif;
  font-size: 0.875rem;
  font-weight: bold;
  color: #282828;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.ns-LocationCountry {
  font-family: "AvenirNext-Regular", sans-serif;
  font-size: 0.75rem;
  color: #666;
  opacity: 0.8;
  line-height: 1.2;
}

.ns-LocationVacancies {
  padding: 0 16px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ns-VacanciesCount {
  display: inline-block;
  background: #48dbac;
  color: white;
  font-family: "AvenirNext-DemiBold", sans-serif;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 12px;
  width: fit-content;
  font-weight: 600;
}

.ns-ViewOfficeBtn {
  background: transparent;
  border: 1px solid #48dbac;
  color: #48dbac;
  font-family: "AvenirNext-Regular", sans-serif;
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
}

.ns-ViewOfficeBtn:hover {
  background: #48dbac;
  color: white;
}

.ns-LocationSkyline {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 16px 16px 16px;
  overflow: hidden;
  min-height: 100px;
}

.ns-LocationSkyline img {
  width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  object-position: bottom;
  opacity: 0.6;
}

/* Bottom section for "View all opportunities" */
.ns-ViewAllOpportunities {
  text-align: center;
  margin-top: 40px;
}

.ns-ViewAllOpportunities a {
  color: #48dbac;
  font-family: "AvenirNext-DemiBold", sans-serif;
  font-size: 1.125rem;
  text-decoration: none;
  border-bottom: 2px solid #48dbac;
  padding-bottom: 2px;
  transition: color 0.3s ease;
}

.ns-ViewAllOpportunities a:hover {
  color: #189970;
  border-bottom-color: #189970;
}

/* Location card duplicate set for infinite scroll */
.ic-ShriyaLocationCardsScroller-track .ns-LocationCard:nth-child(n+13) {
  /* Second set of cards for seamless loop */
}

/* SVG Animate class for intersection observer */
.svg-Animate {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.svg-Animate.animate {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ns-LocationCard {
    width: 250px;
    height: 300px;
  }

  .ic-ShriyaLocationCardsScroller-track {
    gap: 15px;
  }
}