.ruled-section {
  background-color: #000;
  color: white;
  padding: 0 0 60px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  
}

.wrapper {
  width: 100%;
}



.ruled-line {
  position: relative;
  height: 110px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  
}

.ruled-line:nth-child(1){
  border-top: none !important;
}

.ruled-line span {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* Number styling */
.ruled-line .big-number {
  font-weight: 300;
  line-height: 1;
  font-size: 72px;
}

/* Text description */
.ruled-line .desc {
  font-size: 18px;
  opacity: 0.85;
  line-height: 1.2;
}

/* Alignment classes */
.ruled-line .left {
  text-align: left;
}

.ruled-line .right {
  margin-left: auto;
  text-align: right;
}

.ruled-line .center {
  margin: 0 auto;
  text-align: center;
}

.ruled-line .left-center {
  margin-left: 25%;
  transform: translateX(-25%);
  text-align: center;
}

.right-center {
  margin-left: 70%;
  transform: translateX(-70%);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 1921px) and (max-width: 2600px) {
.ruled-line {
  height: 180px;
}

.ruled-line .big-number {
  font-size: 72px;
}

  .ruled-line .desc {
    font-size: 20px;
  }
}

@media (min-width: 1641px) and (max-width: 1920px) {
.ruled-line {
  height: 150px;
}

.ruled-line .big-number {
  font-size: 104px;
}

.ruled-line .desc {
  font-size: 20px;
}
}

@media (min-width: 1460px) and (max-width: 1640px) {
.ruled-line {
  height: 110px;
}

.ruled-line .big-number {
  font-size: 72px;
}

  .ruled-line .desc {
    font-size: 16px;
  }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .ruled-line {
    height: 10vh;
  }

  .ruled-line span {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    /* white-space: nowrap; */
    justify-content: flex-start;
    max-width: 100%;
  }

  .ruled-line .big-number {
    font-size: 45px;
  }

  .ruled-line .desc {
    font-size: 16px;
  }

  .ruled-line .left,
  .ruled-line .right,
  .ruled-line .center,
  .ruled-line .left-center,
  .ruled-line .right-center {
    margin: 0;
    transform: none;
    text-align: left;
  }
}


/* NavBars */

.rightside-header-div p {
  position: relative;
  transition: font-size 0.3s ease, color 0.3s ease;
}

/* Common animation */
@keyframes fadeInLeftItem {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reset all relevant elements */
.header-main-div a,
.rightside-header-div p,
.rightside-header-div .lets-talk-img-div,
.rightside-header-div .nav-icon {
  opacity: 0;
  transform: none;
  animation: fadeInLeftItem 0.6s ease-out forwards;
}

/* Staggered order */
.leftside-header-div a {
  animation-delay: 0.1s;
}

.rightside-header-div .lets-talk-img-div:nth-of-type(1) {
  animation-delay: 1.3s;
  /* Services */
}

.rightside-header-div .lets-talk-img-div:nth-of-type(2) {
  animation-delay: 1.6s;

}

.rightside-header-div .lets-talk-img-div:nth-of-type(3) {
  animation-delay: 1.9s;

}

.rightside-header-div .lets-talk-img-div {
  animation-delay: 2.2s;
}

.rightside-header-div p.nav-icon {
  animation-delay: 2.5s;
}


/* Mobile NavBars */


@keyframes fadeInLeftItemMobile {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Default state: items hidden and shifted */
.mbl-toggle-div .animate-item {
  opacity: 0;
  transform: translateX(-30px);
}

/* When nav is opened, animate in items */
.mbl-toggle-div.open .animate-item {
  animation: fadeInLeftItemMobile 0.6s ease forwards;
}

/* Stagger effect for each item */
.mbl-toggle-div.open .animate-item:nth-of-type(1) {
  animation-delay: 0.1s;
}

.mbl-toggle-div.open .animate-item:nth-of-type(2) {
  animation-delay: 0.2s;
}

.mbl-toggle-div.open .animate-item:nth-of-type(3) {
  animation-delay: 0.3s;
}

.mbl-toggle-div.open .animate-item:nth-of-type(4) {
  animation-delay: 0.4s;
}

.mbl-toggle-div.open .animate-item:nth-of-type(5) {
  animation-delay: 0.5s;
}

.mbl-toggle-div.open .animate-item:nth-of-type(6) {
  animation-delay: 0.6s;
}

.mbl-toggle-div.open .animate-item:nth-of-type(7) {
  animation-delay: 0.7s;
}

.mbl-toggle-div.open .animate-item:nth-of-type(8) {
  animation-delay: 0.8s;
}

/*initial black background*/



.header-section {
  background-color: white;
  /* width: 100vw; */
}


.header-main-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  letter-spacing: 1px;
  height: 50px;
}

.rightside-header-div p:hover .services-dropdown {
  display: block;
}

.rightside-header-div {
  width: fit-content !important;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.3s ease;
  will-change: transform, width, height, padding;
  transform-origin: right center;
 
  backface-visibility: hidden;
  transform: translateZ(0);
}


/* Default state (fully grown) */
.rightside-header-div.grown {
  transform: scale(1);
  padding: 0 15px;
}

/* Scrolled state (shrunk) */
.rightside-header-div.shrunk {
  transform: scale(0.85);
  padding: 0 8px;
}

.rightside-header-div.scaled {
  transform: scale(0.9);
  padding: 0 10px;
}

.rightside-header-div p {
  position: relative;
}

.logo-div {
  overflow: hidden;
  display: inline-block;
  transition: transform 0.3s ease;
  will-change: transform;
}

.logo-img {
  width: 200px;
  opacity: 1;
  transition: width 0.5s ease, opacity 0.5s ease;
  display: block;
}

/* Add this to your CSS */
.rightside-header-div.scrolled-bg p.navItems a {
  color: white !important;
}

.navItems {
  color: black;
}

.rightside-header-div.scrolled-bg p.navItems {
  color: white;
}

.mbl-header-main-div {
  display: none;
}

.rightside-header-div p.navItems a {
  transition: color 0.3s ease;
}

.mbl-header-main-div {
  display: none;
}

.rightside-header-div.scaled p {
  font-size: 0.9em;
  /* Slightly smaller text */
  transition: font-size 0.3s ease;
}

@media (max-width: 768px) {
  .header-main-div {
    display: none;
  }

  .mbl-header-main-div {
    display: block;
    color: black;
  }

  .mbl-header-main-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 2%; */
  }

  .rightside-header-div.scaled {
    transform: scale(0.95);
  }

  .rightside-header-div.shrunk {
    transform: scale(0.9);
    padding: 0 10px;
  }
}



.text-a span,
.text-b span {
  display: inline-block;
  transform: translateY(0%);
}

.text-container {
  display: grid;
  place-items: start;
  overflow: hidden;
  color: white;
}

.text-container a {
  grid-area: 1 / 1;
  display: inline-block;
  transform: translateY(0%);
  color: white;
}


.service-btn,
.discussion-btn,
.get-started {
  position: relative;
}

.lets-talk-ani1,
.lets-talk-ani2,
.talk-ani1,
.talk-ani2,
.view-ani1,
.view-ani2,
.get-started-ani1,
.get-started-ani2 {
  overflow: hidden;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  margin: 0;
  line-height: 1.5;
  font-size: 0;
}

.lets-talk-ani1 span,
.lets-talk-ani2 span,
.talk-ani1 span,
.talk-ani2 span,
.view-ani1 span,
.view-ani2 span,
.get-started-ani1 span,
.get-started-ani2 span {
  display: inline-block;
  transform: translateY(0%);
  font-size: 16px;
  line-height: 1;
}

.lets-talk-ani2 span,
.talk-ani2 span,
.view-ani2 span,
.get-started-ani2 span {
  transform: translateY(100%);
}
.discussion-btn {
  position: relative;
}

.discussion-ani1,
.discussion-ani2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  margin: 0;
  line-height: 1;
  overflow: hidden;
  font-size: 0;
}

.discussion-ani1 span,
.discussion-ani2 span {
  display: inline-block;
  transform: translateY(0%);
  font-size: 16px;
  line-height: 1;
}

.discussion-ani2 span {
  transform: translateY(100%);
}
.large-text{
  font-size: 70px !important;
}