@font-face {
  font-family: Euclid;
  src: url("/static/media/Euclid%20Circular%20A%20Regular.d54600880dc63db716f2.ttf");
  font-display: swap;
}
@font-face {
  font-family: EuclidBold;
  src: url("/static/media/Euclid%20Circular%20A%20Bold.b4788f2f8f64a74fe6d6.ttf");
  font-display: swap;
}

@font-face {
  font-family: EuclidLight;
  src: url("/static/media/Euclid%20Circular%20A%20Light.29f6c14f6218727ca4be.ttf");
  font-display: swap;
}
@font-face {
  font-family: EuclidMedium;
  src: url("/static/media/Euclid%20Circular%20A%20Medium.a5befbfcb71cd093cc56.ttf");
  font-display: swap;
}
@font-face {
  font-family: EuclidSemiBold;
  src: url("/static/media/Euclid%20Circular%20A%20SemiBold.ae11344face2a74d2042.ttf");
  font-display: swap;
}

body {
  margin: 0;
  font-family: Euclid;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.pointer {
  cursor: pointer;
}
.all-know-more {
  color: #0047ff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
  background-color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.all-know-more:hover {
  text-shadow: 2px -1px 27px rgba(0, 71, 255, 0.64);
}
.test-seclection-blue::selection {
  background-color: #1c39bb;
  color: #fff;
}
.test-seclection-white::selection {
  background-color: #fff;
  color: #1c39bb;
}

/*custom curser styles*/
/* CustomCursor.css */
.custom-cursor {
  position: fixed;
  width: 90px;
  height: 90px;
  background-color: #0047ff;
  border-radius: 50%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  text-align: center;
  z-index: 9999;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, opacity, font-size; /* Include font-size if scaling text */
  text-rendering: optimizeLegibility;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* border: 1px solid #008e2f; */
}

/* HoverComponent.css */
.hover-component {
  display: inline-block;
  position: relative;
}

.hover-component img {
  display: block;
}

.hide-default-cursor {
  cursor: none; /* Hide the default cursor */
}

/* Additional styles */
a {
  text-decoration: none;
  color: #222222;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

@media screen and (max-width: 1024px) {
  .custom-cursor {
    display: none;
  }
}

:root {
  --card-height: 40vw;
  --card-margin: 4vw;
  --card-top-offset: 40px;
  --numcards: 6;
  /* --outline-width: 0px; */
}

#cards {
  /* padding-bottom: calc(var(--numcards) * var(--card-top-offset)); */
  /* Make place at bottom, as items will slide to that position*/
  margin-bottom: 4vw;
  margin-bottom: var(--card-margin);
  /* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
}

.card {
  position: sticky;
  top: 0;
  padding-top: 40px;
  padding-top: var(--card-top-offset);
  transform-origin: 50% 0%;
  will-change: transform;
}

/** DEBUG **/

#debug {
  position: fixed;
  top: 1em;
  left: 1em;
}

#debug::after {
  content: " Show Debug";
  margin-left: 1.5em;
  color: white;
  white-space: nowrap;
}

#debug:checked ~ main {
  --outline-width: 1px;
}

.stack-scroll {
  width: 85vw;
  /* min-height: 100vh; */
  margin: 0 auto;
}

#cards {
  list-style: none;
  outline: calc(var(--outline-width) * 10) solid blue;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 40vw);
  grid-template-rows: repeat(var(--numcards), var(--card-height));
  gap: 4vw;
  grid-gap: 4vw;
  grid-gap: var(--card-margin);
  gap: var(--card-margin);
}

.card {
  /* outline: var(--outline-width) solid hotpink;
	 */
  /* background-color: pink; */

  /* justify-content: center; */
  /* align-items: center; */
}

.card__content {
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
  /* background: rgb(255, 255, 255); */
  color: rgb(10, 5, 7);
  border-radius: 62px;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60vh;
  /* display: grid;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	align-items: stretch; */
  outline: var(--outline-width) solid lime;
}

.card-img-box {
  width: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: aquamarine; */
  /* padding: 30px; */
}

.card-img-cover {
  width: 80%;
  height: 26rem;
  margin: 0 auto;
  border-radius: 40px;
  /* background-color: green; */
}

.card-img-cover > img {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  object-fit: contain;
}
.loading {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: loading 1.5s infinite;
}
@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

#card_1 {
  /* border-radius: 62px; */
  /* background-color: red; */
  /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
}

.card-content-box {
  width: 65%;
  padding: 30px;
  /* background-color: aqua; */
}

.card-content-box > h1 {
  color: #fff;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.card-content-box > h3 {
  color: rgba(255, 255, 255, 0.79);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
}

.card-content-box > p {
  color: #fff;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  /* 39.38px */
}

.content1 {
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.15);
}

.content1 > p {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.learn-more {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  -webkit-user-select: none;
          user-select: none;
}

/* .card__content>div {
	grid-area: text;
	width: 80%;
	place-self: center;
	text-align: left;
	display: grid;
	gap: 1em;
	place-items: start;
} */

/* .card__content>figure {
	grid-area: img;
	overflow: hidden;
}

.card__content>figure>img {
	width: 80%;
	height: 80%;
	object-fit: cover;
} */

h1 {
  font-weight: 300;
  font-size: 3.5em;
}

h2 {
  font-weight: 300;
  font-size: 2.5em;
}

p {
  font-weight: 300;
  line-height: 1.42;
}

.btn {
  background: rgb(188 87 36);
  color: rgb(255 255 255);
  text-decoration: none;
  display: inline-block;
  padding: 0.5em;
  border-radius: 0.25em;
}

.stack-scroll-container {
  background-color: #0d0225;
  margin-top: -21px;
}

/* mobile stack scroll */

.mobile-stack-scroll {
  display: none;
  width: 100%;
  margin-top: -21px;
  background-color: #0d0225;
}

.mobile-stack-card {
  /* position: sticky;
  top: 12%; */
  width: 90%;
  margin: 0 auto;
  margin-bottom: 30px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(274deg, #003362 -89.14%, #81497b 128.53%);
  /* background: yellow; */
}

.mobile-card-stack-img-box {
  width: 175px;
  height: 190px;
}

.mobile-card-stack-img-box > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mobile-card-stack-title {
  color: #f8f9fa;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 117.5%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
}

.mobile-stack-domain {
  color: #e3f2fd;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.2px;
}

.mobile-card-stack-para > p {
  color: #e3f2fd;
  /* color: #f9fafd; */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 179%;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.1px;
}

.mobile-card-stack-learn-more {
  margin-top: 20px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
  color: #ffffff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-card-stack-learn-more:hover {
  background: linear-gradient(135deg, #00acc1 0%, #00838f 100%);
  box-shadow: 0 6px 20px rgba(0, 188, 212, 0.5);
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}

.mobile-card-stack-learn-more:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 188, 212, 0.4);
}

.mobile-card-stack-para {
  border-radius: 8px;
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.15);
  padding: 0rem 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .stack-scroll {
    display: none;
  }

  .stack-scroll-container {
    /* margin-top: 20px; */
  }

  .mobile-stack-scroll {
    display: block;
  }
  .hide-on-mobile {
    display: none;
  }
}

.career-hero-section {
  min-width: 100%;
  /* min-height: 100vh; */
  /* padding-block: 10rem; */
  display: flex;
  align-items: center;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 60%,
    rgba(13, 2, 37, 1) 100%
  );
  color: #fff;
}

.fixed {
  position: fixed;
}
.career-title-section {
  height: 100%;
  width: 50%;
}
.career-info-section {
  height: 100%;
  width: 50%;
  font-size: 2rem;
  margin-top: 7%;
}
.career-info-section-heading {
  font-size: 2rem;
  font-family: EuclidMedium;
}
.career-hero-contents {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 6rem 5rem;
  min-width: 100%;
  box-sizing: border-box;
  /* margin: 0rem 5rem; */
  /* padding-top: 6rem; */
}

.career-title {
  font-size: 7.5rem;
  font-weight: 800;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.career-hero-info {
  font-size: 1rem;
  color: #fff6;
  padding: 1.5rem 0rem;
  line-height: 1.5rem;
}

.career-headings {
  font-size: 4rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.opportunities-container {
  padding: 0 5rem;
  /* margin: 0px 200px; */
}
.careers-exp {
  width: 100%;
  display: flex;
  align-items: center;
}
.line-style {
  width: 100%;
  border: 1px solid #cadbea;
}

.opportunity-items {
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-arrow {
  min-width: 30px;
  min-height: 30px;
  border: 1px solid #6b6084;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.opportunity-titles {
  font-size: 1.5vw;
  font-weight: 600;
  padding: 1rem 0rem;
}
.career-hiring-process {
  margin-left: 6rem;
}
.career-hiring-data-container {
  display: flex;
  overflow: hidden; /* Prevent content from overflowing */
}
.career-hiring-data-container::-webkit-scrollbar {
  display: none;
}
.career-hiring-data-container > div {
  /* min-width: 40rem; */
  min-width: 30vw;
}
.career-hiring-item-num {
  font-size: 4rem;
  color: #0047ff;
}
.career-hiring-item-title {
  font-family: EuclidSemibold;
  font-size: 1.5rem;
  color: #0d0225;
  margin-top: 1rem;
}
.career-hiring-item-des {
  /* font-family: EuclidSemibold; */
  font-size: 1.25rem;
  color: #6b6084;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  text-overflow:ellipsis;
}
.life-at-stacia {
  margin: 0rem 6rem;
}

.Life-Img {
  border-radius: 5%;
  width: 100%;
  height: 100%;
  /* max-width: 52px;
    max-height: 52.5px; */
}

.Life-Img2 {
  border-radius: 30px;
  /* max-width: 27.5rem;
    max-height: 27.5rem; */
}

.Life-Img3 {
  border-radius: 30px;
  /* max-width: 27.5rem;
    max-height: 27.5rem; */
}

.Life-Img4 {
  border-radius: 30px;
  /* max-width: 56rem;
    max-height: 24rem; */
}
.image-layout-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  grid-gap: 1rem;
  gap: 1rem;
}
.img-container1 {
  grid-column: 1/2;
  grid-row: 1 / span 2;
}
.img-container2 {
  grid-column: 1 / 2;
  grid-row: 1 / span 1;
}
.img-container3 {
  grid-column: 1 / 2;
  grid-row: 2 / span 1;
}
.img-container4 {
  grid-column: 2 / 3;
  grid-row: 2 / span 1;
}
/* .career-image-box-full {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
    margin-top: 40px;
  }

  .career-image-box-left {
    width: 50%;
    height: 100%;
    overflow: hidden;
  }

  .career-image-box-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
  }

  .career-image-box-left > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .career-image-box-right {
    width: 50%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .career-image-box {
    border-radius: 30px;
  }

  .career-image-box > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .case-col-span {
    grid-column: span 2;
  } */
.career-hiring-data-mob-container {
  display: none;
}
.culture-titles {
  font-size: 40px;
  font-weight: 600;
  margin: 60px 0px;
}
.mobile-culture-titles {
  margin: 2rem 0rem;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.culture-contents {
  width: 800px;
  font-size: 1.1rem;
  color: #6b6084;
  line-height: 2.5rem;
}
.mobile-culture-contents {
  width: 100%;
  text-align: justify;
  text-justify: inter-word;
  line-height: 2rem;
}

.career-seperator {
  height: 42px;
  width: 2px;
  background: #cadbea;
  margin: 0px 30px;
}

.job-description {
  color: #6b6084;
  line-height: 180%;
  font-size: 16px;
  margin: 20px 0px;
}

.responsibility-title {
  color: #212529;
  font-size: 1.5rem;
  font-weight: 500px;
  line-height: 32px;
  margin: 12px 0px;
}

.responsibility-list {
  color: #6b6084;
  line-height: 32px;
  font-size: 16px;
  margin: 0.25rem 0rem;
}

.job-details {
  color: #6b6084;
  margin: 0px 10px;
  font-weight: 500;
  font-size: 16px;
}

.career-apply {
  /* color: #c6c6c6; */
  color: #0047ff;
  font-weight: 700;
  font-size: 20px;
  margin: 50px 0px;
  cursor: pointer;
}

.application-overlay {
  border: 1px solid black;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0009;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.application-box {
  background-color: white;
  height: 75%;
  width: 45%;
  opacity: 1;
  padding: 0px 50px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  margin: 2px;
  border-radius: 30px;
}

.application-job-title {
  font-size: 30px;
  margin-top: 60px;
  margin-bottom: 30px;
  font-weight: 700;
}

.application-info {
  color: #6b6084;
  font-size: 20px;
}

.application-title {
  font-size: 22px;
  color: #0d0225;
  font-weight: 600;
}

.application-question {
  font-size: 20px;
  color: #0d0225;
  margin-top: 40px;
  margin-bottom: 30px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="radio"],
input[type="checkbox"],
input[type="date"] {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid #cadbea;
}

input:focus {
  outline: none;
}

.input-overlay {
  width: 100%;
  height: 150px;
  border: 1px solid #cadbea;
  position: relative;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-file::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  border: none;
  border-radius: 10px;
}

.file-logo {
  z-index: 5;
  display: flex;
  justify-self: center;
  position: absolute;
}

.application-btn {
  height: 40px;
  width: 150px;
  margin-left: 20px;
  border-radius: 5px;
}

.application-scroll::-webkit-scrollbar {
  width: 5px;
}

.application-scroll {
  height: 55%;
  overflow-x: hidden;
  overflow-y: auto;
}

.application-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

.application-scroll::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 10px;
}

.application-option {
  margin: 0px 10px;
  color: #6b6084;
  font-size: 16px;
}
.our-cultures-mobile {
  display: none;
}

@media screen and (min-width: 800px) and (max-width: 1600px) {
  .career-hero-info {
    width: 600px;
  }
  /* 
    .Life-Img1 {
      border-radius: 15px;
      width: 645px;
      height: 540px;
    }

    .Life-Img2 {
      border-radius: 15px;
      width: 345px;
      height: 280px;
    }

    .Life-Img3 {
      border-radius: 15px;
      width: 345px;
      height: 280px;
    }

    .Life-Img4 {
      border-radius: 15px;
      width: 700px;
      height: 250px;
    } */

  .culture-contents {
    width: 600px;
  }

  .application-job-title {
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .application-question {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="radio"],
  input[type="checkbox"],
  input[type="date"] {
    width: 100%;
    height: 35px;
  }

  .input-overlay {
    height: 80px;
  }
}
@media screen and (max-width: 1024px) {
  .image-layout-container {
    display: flex;
    flex-direction: column;
  }
  .Life-Img1 .Life-Img2 .Life-Img3 .Life-Img4 {
    width: 200px;
  }
  .our-cultures {
    display: none;
  }
  .our-cultures-mobile {
    display: block;
  }
  /* .life-at-stacia {
      display: none;
      max-width: 100%;
    } */
  /* .career-hero-section {
      display: none;
    } */
  /* .image-layout-container {
      flex-direction: column;
    } */
  .career-hero-section {
    min-height: 0;
    padding-block: 6rem;
  }
  .career-title {
    font-size: 2rem;
  }
  .career-hero-contents {
    display: flex;
    flex-direction: column;
  }
  .career-hero-info {
    width: 100%;
  }
  .career-title-section {
    height: 100%;
    width: 100%;
  }
  .career-info-section {
    height: 100%;
    width: 100%;
  }
  .career-headings {
    font-size: 1.5rem;
    width: 100%;
    text-align: center;
    margin: 1rem 0rem;
  }
  .life-at-stacia {
    margin: 0rem 2rem;
  }
  .opportunities-container {
    padding: 1.2rem;
  }
  .career-hero-contents {
    padding: 1.5rem;
    /* margin: 0rem 5rem; */
    /* padding-top: 6rem; */
  }
  .careers-exp {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  .opportunity-titles {
    font-size: 1.25rem;
    font-weight: 600;
  }
  .career-info-section-heading {
    font-size: 1.5rem;
  }
  .career-hero-info {
    font-size: 1rem;
  }
  .responsibility-list,
  .job-description {
    font-size: 1rem;
  }
  .responsibility-title {
    font-size: 1.25rem;
  }
  .career-seperator {
    display: none;
  }
  .career-hiring-illustrate {
    width: 100%;
  }
  .career-hiring-illustrate > img {
    width: 5rem;
    object-fit: cover;
  }
  .career-hiring-data-container > div {
    /* min-width: 40rem; */
    min-width: 90%;
  }
  .career-hiring-process {
    margin-left: 1.5rem;
  }
  .career-hiring-data-mob-container {
    display: flex;
    column-gap: 1rem;
    overflow-x: auto;
  }
  .career-hiring-data-mob-container > div {
    min-width: 90%;
  }
  .career-hiring-data-container {
    display: none;
  }
  .career-hiring-item-title {
    font-size: 1.5rem;
  }
  .career-hiring-item-des {
    font-size: 1rem;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in;
  }
  50% {
    transform: rotate(180deg);
    animation-timing-function: ease-out;
  }
  100% {
    transform: rotate(360deg);
    animation-timing-function: ease-in;
  }
}

.plus-icon.spin {
  animation: spin 2s linear infinite;
}
.illustrate-style {
  width: 48rem;
  height: 23rem;
}
.illustrate-text {
  font-size: 1.5rem;
  padding: 0.5rem;
}
@media screen and (max-width: 1024px) {
  .illustrate-style {
    width: 100%;
  }
  .illustrate-text {
    font-size: 0.75rem;
    padding: 0.5rem;
    text-align: center;
  }
}

.star-container {
  position: absolute;
  right: 0;
  bottom: 70%;
  -webkit-user-select: none;
          user-select: none;
}

@keyframes blink-star {
  0% {
    transform: scale(0); /* Start at scale 0 */
    opacity: 0; /* Hidden initially */
  }
  50% {
    transform: scale(1.5); /* Scale up to 1.5 */
    opacity: 1; /* Fully visible */
  }
  100% {
    transform: scale(0); /* Back to scale 0 */
    opacity: 0; /* Hidden again */
  }
}

.star-container img {
  animation: blink-star 3s ease-in-out infinite; /* Animation duration and loop */
  transform-origin: center center; /* Ensure the scaling happens from the center */
}
.Star-container-1 img {
  animation: blink-star 3s ease-in-out infinite; /* Animation duration and loop */
  transform-origin: center center; /* Ensure the scaling happens from the center */
}
/* hero */

.texts {
  margin: 0 120px;
  /* position: relative; */
  /* width: fit-content; */
}


/*  style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.8 }} */
/* .scroll-snap-container {
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-snap-section {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #fff;
} */
/* .scroll-snap-container {
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
section {
  height: 100vh;
  scroll-snap-align: start;
  overflow-y: hidden;
} */

.home {
  width: 100%;
  min-height: 100vh;
  /* min-height: 100dvh; */
  /* height: 100%; */
  display: flex;
  align-items: center;
  background-color: #0d0225;
  position: relative;
  /* border: 10px solid white; */
  /* scroll-snap-align: start; */
}

.homeSection {
  width: 100%;
  height: 100%;
  color: #fff;
  position: relative;
  /* border: 10px solid white; */
}

.heroText,
.changing-word {
  font-size: 7vw;
  font-weight: 800;
}

.heroText {
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  letter-spacing: 1px;
  -webkit-user-select: none;
          user-select: none;
}

/* .changingText {
  margin-top: 20px;
  color: #0047ff;
  text-transform: capitalize;
  font-weight: bolder;
  overflow: hidden;
  height: 9vh;
  letter-spacing: 5px;
  position: relative;
}
.changing-word {
  font-size: 5vw;
}
.changingText > .changing-word {
  height: 10vh;
  font-weight: bolder;
  animation: float 20s infinite alternate;
} */
.changingText {
  position: relative;
  /* Positioning context for absolute children */
  overflow: hidden;
  /* Hide overflow to maintain clean animation */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.changing-word {
  /* height: 20px; Match this with changingText height */
  display: flex;
  /* font-size: 7vw; */
  color: #0047ff;
  align-items: center;
  /* Center text vertically */
  -webkit-user-select: none;
          user-select: none;
}

/* products */

.productPage {
  background-color: #0d0225;
}

.products {
  width: 90%;
  margin: 0 auto;
}

.product {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.productName {
  font-size: 20px;
}

.card {
  position: sticky;
  top: 12%;
  padding-top: calc(var(--index) * var(--cardTopPadding));
  color: aliceblue;
}

.card-body {
  width: 100%;
  display: flex;
  box-shadow: 0px 32px 95px 0px rgba(0, 0, 0, 0.08);
  border-bottom: 30px;
}

.card-body>.home-pro-image {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-pro-image2 {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
}

.home-pro-image2>img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.home-pro-details {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 30px;
}

.home-pro-title {
  color: #fff;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.home-pro-box {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  padding: 15px;
}

#card1 .card-body {
  border-radius: 62px;
  background: linear-gradient(259deg, #cb2b5e -8.27%, #773987 86.58%);
  box-shadow: 0px 32px 95px 0px rgba(0, 0, 0, 0.08);
}

#card2 .card-body {
  border-radius: 62px;
  background: linear-gradient(259deg, #2a35b3 4.78%, #1485cb 94.3%);
  box-shadow: 0px 32px 95px 0px rgba(0, 0, 0, 0.08);
}

#card3 .card-body {
  border-radius: 62px;
  background: linear-gradient(259deg, #7aa00c -8.27%, #fcdf00 86.58%);
  box-shadow: 0px 32px 95px 0px rgba(0, 0, 0, 0.08);
}

#card4 .card-body {
  border-radius: 62px;
  background: linear-gradient(259deg, #003362 -8.27%, #81497b 95.27%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card-body {
  height: var(--cardHeight);
}

/* clients */

.clientWrapper {
  padding: 6.5vh 0vh;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 4rem;
  /* background-color: #dd5341; */
}

.clients {
  height: 100%;
  width: 90%;
  margin: 0 auto;
}

.clientText {
  -webkit-text-stroke: 1px;
  letter-spacing: 2px;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  color: #6b6084;
}

.allClients {
  height: 180px;
  display: flex;
  align-items: center;
}

.clientPara {
  width: 70%;
  text-align: center;
  color: #6b6084;
  margin-top: 50px;
  font-size: 18px;
  line-height: 30px;
}

.client-marquee {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}

.client-marquee:hover {
  filter: grayscale(0%);
}

/*  */

.one {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 60px;
}

.line {
  width: 100%;
  display: flex;
  justify-content: center;
}

.line1 {
  width: 85%;
  height: 1px;
  background-color: #e0e0e0;
}

/* our services */
/* 
.ourServices {
    background-color: #68c7c1;
    min-height: 100vh;
    width: 100%;
}

.ourServicesLeft {
    width: 50%;
    height: 100%;
    background-color: #6B6084;
}

.ourServicesRight {
    width: 50%;
    height: 100%;
    background-color: #dd5341;
} */

.service-display {
  width: 100%;
  min-height: calc(100vh-80px);
}

.service-display1 {
  width: 90%;
  margin: 0 auto;
  /* min-height: 90vh; */
  display: flex;
  column-gap: 5rem;
  align-items: center;
  /* background-color: #003362; */
}

.our-service-display-title {
  /* color: #e0e0e0; */
  color: #6b6084;
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0px 5%;
  margin-bottom: 20px;
  font-family: EuclidSemibold;
}

.service-left {
  width: 50%;
  height: 100%;
  /* min-height: 100vh; */
  /* background-color: #81497B; */
  position: relative;
  /* display: flex;
    justify-content: center;
    align-items: center;     */
  margin-top: 5%;
}

.service-img-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.service-img-box>img {
  width: 80%;
  height: 29rem;
  max-height: 100%;
  object-fit: cover;
}

.service-right {
  width: 50%;
  /* background-color: #0047FF; */
  height: 100%;
  margin-top: 5%;
  /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

.service-text-box {
  /* border-bottom: 1px solid #0D022566; */
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color: #003362; */
  /* position: relative; */
  justify-content: center;
  gap: 20px;
}

.box-line {
  width: 100%;
  height: 1px;
  position: relative;
  background-color: #0d022566;
}

.box-line1 {
  width: 100%;
  height: 1px;
  position: relative;
  background-color: #0d022566;
}

.box-line::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #0d0225;
  transition: 0.5s ease-in-out;
  animation: line 5s linear infinite;
  transform: scaleX(0);
  transform-origin: left;
}

/* .service-text-box::after {
    content: '';
    position: absolute;
    border-bottom: 2px solid red;   
    height: 100%;
    width: 100%;
} */

/* .service-text {
  color: #0d0225;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin-left: 40px;
}

.service-text1 {
  color: #bcbcbc;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
} */
.service-text {
  color: #0d0225;
  font-size: 1.5vw;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  margin-left: 40px;
  -webkit-user-select: none;
          user-select: none;
}

.service-text1 {
  color: #bcbcbc;
  font-size: 1.3vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

@keyframes line {
  0% {
    transform: scaleX(0);
  }

  50% {
    transform: scaleX(0.6);
  }

  75% {
    transform: scaleX(0.8);
  }

  100% {
    transform: scaleX(1);
  }
}

@media (max-width: 1024px) {
  .home {
    min-height: 0;
    padding-block: 4.5rem;
    padding-top: 80px;
    /* background-color: #003362; */
  }

  .texts {
    margin: auto;
  }

  .clientWrapper {
    min-height: 100%;
    padding-block: 3rem;
  }

  .heroText,
  .changingText {
    font-size: 7vw;
    margin-left: 20px;
    margin-top: 20px;
  }

  .one {}

  .clientText {
    font-size: 16px;
  }

  .client-marquee {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .one {
    height: 100%;
  }

  .line1 {
    display: none;
  }

  .marquee-margin {
    /* background-color: #003362; */
  }

  .clientPara {
    width: 100%;
    font-size: 14px;
    text-align: start;
  }

  .service-display1 {
    flex-direction: column;
    width: 100%;
    row-gap: 50px;
  }

  .our-service-display-title {
    font-size: 24px;
  }

  .service-left {
    margin-top: 0px;
    width: 100%;
    height: 100%;
  }

  .service-right {
    width: 90%;
    margin: 0 auto;
  }

  .service-text1 {
    font-size: 14px;
  }

  .service-text {
    font-size: 16px;
  }

  .service-img-box>img {
    width: 100%;
    height: 100%;
  }

  .service-img-box {
    padding: 0rem 1.5rem;
    box-sizing: border-box;
  }
}

.loading {
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* .changingText {
  margin-top: 20px;
  color: #0047ff;
  text-transform: capitalize;
  font-size: 25px;
  font-weight: bolder;
  overflow: hidden;
  height: 75px;
  letter-spacing: 5px;
  position: relative;
}
.changing-word {
  font-size: 5vw;
}
.changingText > .changing-word {
  height: 75px;
  font-weight: bolder;
  animation: float 10s infinite alternate;
} */

/* @keyframes float {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-12vh);
  }
  20% {
    transform: translateY(-22vh);
  }
  30% {
    transform: translateY(-33vh);
  }
  40% {
    transform: translateY(-44vh);
  }
  50% {
    transform: translateY(-53vh);
  }
  60% {
    transform: translateY(-64vh);
  }
  70% {
    transform: translateY(-74vh);
  }
  80% {
    transform: translateY(-83vh);
  }
  90% {
    transform: translateY(-92vh);
  }
  100% {
    transform: translateY(-104vh);
  }
} */
@media screen and (min-width: 1650px) {
  .clientWrapper {
    padding: 8vh 0vh;
  }
}



/* toggle button */

/* .toggle-container {
  display: flex;
  width: 200px;
 
  border-radius: 25px;
  padding: 0.5rem;
  cursor: pointer; 
  position: relative;

}

.toggle-option{
  flex: 1;
text-align: center;
padding: 1rem;
border-radius: 25px;
color: #81497b;
font-weight: 500;
transition: all 0.3s ease;

}

.toggle-option .active {

  background-color: #81497b;
  color: white;
} */

/* Base styles for the container and h1 */
.toggle-title-container-home {
  min-height: 10vh;
  min-width: 100%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 0;
  font-family: EuclidMedium, sans-serif;
  border-top: none;
}

.toggle-title-header-home {
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  margin: 0;
  animation: fadeIn 1s ease-in-out;
  padding-bottom: 10px;
  font-size: 2.8rem;
  /* Base size */
}

/* Fade-in animation keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

/* ===============================
   MEDIA QUERIES FOR RESPONSIVENESS
   =============================== */

/* 320px — Small Mobile */
@media (max-width: 320px) {
  .toggle-title-container-home {
    padding: 10px;
    min-height: 8vh;
  }

  .toggle-title-header-home {
    font-size: 1.2rem;
    line-height: 1.2;
    padding-bottom: 4px;
  }
}

/*  768px — Tablet / Large Mobile */
@media (min-width: 321px) and (max-width: 768px) {
  .toggle-title-container-home {
    padding: 14px;
    min-height: 8.5vh;
  }

  .toggle-title-header-home {
    font-size: 1.8rem;
    line-height: 1.3;
    padding-bottom: 6px;
  }
}

/*  1024px — Small Laptop / iPad Pro */
@media (min-width: 769px) and (max-width: 1024px) {
  .toggle-title-container-home {
    padding: 16px;
    min-height: 9vh;
  }

  .toggle-title-header-home {
    font-size: 2.2rem;
    line-height: 1.4;
    padding-bottom: 8px;
  }
}

/* 1440px — Standard Laptop / Desktop */
@media (min-width: 1025px) and (max-width: 1440px) {
  .toggle-title-container-home {
    padding: 20px;
    min-height: 10vh;
  }

  .toggle-title-header-home {
    font-size: 2.8rem;
    line-height: 1.4;
    padding-bottom: 10px;
  }
}

/*  1920px — Large Desktop / Widescreen */
@media (min-width: 1441px) and (max-width: 1920px) {
  .toggle-title-container-home {
    padding: 24px;
    min-height: 10vh;
  }

  .toggle-title-header-home {
    font-size: 3.2rem;
    line-height: 1.4;
    padding-bottom: 12px;
  }
}

/*  Ultra-wide (Above 1920px) */
@media (min-width: 1921px) {
  .toggle-title-header-home {
    font-size: 3.6rem;
    line-height: 1.5;
  }
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  /* border: 2px solid white; */
}
.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
  /* border: 2px solid white; */
}
.top-container > div {
  font-size: 2.5rem;
  color: #515152;
  font-weight: 600;
}

.popup-content {
  border-radius: 10px;
  color: black;
  height: 78%;
  width: 81%;
  padding: 20px 70px;
  background: linear-gradient(
    0deg,
    rgba(6, 1, 18, 0.97) 0%,
    rgba(63, 63, 63, 0.97) 74.22%
  );
  position: relative;
  /* border: 2px solid white; */
}
.boxes {
  display: flex;
  justify-content: space-between;
  height: 75%;
  width: 100%;
  margin-bottom: 20px;
}
.buttons {
  width: 100%;
  height: 12%;
  display: flex;
  justify-content: space-around;
}

.button1,
.button2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  border-radius: 15px;
}
.button1 {
  width: 35%;
  color: #c368ff;
  cursor: pointer;
  border: 2px solid gray;
}
.button2 {
  width: 35%;
  background-color: #c368ff;
  color: white;
}
.col1,
.col2,
.col3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 33%;
  height: 100%;
}
.col2 {
  /* background: white; */
  border-radius: 15px;
  /* padding: 10px; */
}
.box-heading{
  font-size: 0.875rem;
  font-weight: bold;
}
.projects,
.services,
.products,
.achievements {
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: white;
  padding: 0.5rem;
  border-radius: 15px;
}
.projects {
  height: 52%;
  width: 100%;  
}
.project-img {
  position: absolute;
  height: 100%;
  width: 100%;
}

.services {
  height: 48%;
  width: 100%;
}
.products {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; 
}

.close-btn1 {
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  height: 100%;
  cursor: pointer;
}
.achievements {
  height: 39%;
  width: 100%;
  /* background-image: url("../assets/popup/pic-4.png"); */
  background-size: cover;
  background-position: center;
}
.news {
  position: relative;
  color: white;
  height: 60%;
  width: 100%;
  border-radius: 15px;
  padding: 2px;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(6, 1, 18, 0.97) 0%,
    rgba(63, 63, 63, 0.97) 74.22%
  );
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* margin-top:px; */
}
.news-content {
  padding: 10px;
  width: 100%;
  background: linear-gradient(
    0deg,
    rgba(6, 1, 18, 0.97) 0%,
    rgba(63, 63, 63, 0.97) 74.22%
  );
  border-radius: 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden; /* Contain the carousel slide */
}

/* Animated border using ::before */
.news::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    270deg,
    #5000ff,
    #ff4400,
    #6c1ca1,
    #ff4400,
    #5000ff
  );
  background-size: 400%;
  z-index: -1;
  animation: gradientBorder 15s linear infinite;
  border-radius: 15px;
}

/* Content inside news remains above */
.news > * {
  position: relative;
  z-index: 2;
}

@keyframes gradientBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 400% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



.news-content > div {
  font-size: 1.5rem;
  color: white;
  padding: 15px;
}
body.no-scroll {
  overflow: hidden;
}

/* Carousel styles */
.news-carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Match news-content width */
  height: 85%; /* Adjusted to fit within news-content */
  position: relative;
  overflow: hidden; /* Contain the slide */
  /* border: 2px solid white; */
}

div.Typewriter{
  width: 42%;
  /* background-color: red; */
}

.go-button {
  display: flex;
  justify-content: end;
  align-items: center;
  background-color: none;
  color: black;
  /* border: 2px solid white; */
  height: 20%;
  cursor: pointer;
}
.go-button a:hover{
  cursor: pointer;
}
.news-content > div {
  font-size: 1.5rem;
  color: white;
  padding: 10px;
}
body.no-scroll {
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  /* Match container height */
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  text-wrap: wrap;
  height: 100%;
  width: 100%;
  /* border: 2px solid red; */
}

.news-content1{
   font-size: 1.5rem;
  color: white;
  padding: 4px;
  width: 80%;
  height: 40%;
  text-wrap: wrap;
  /* border: 2px solid white;  */

}
.news-content2 {
  font-size: 1.5rem;
  color: white;
  padding: 4px;
  width: 80%;
  height: 50%;
  text-wrap: wrap;
  /* border: 2px solid white;  */
}

.typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  /* border-right: .15em solid orange;  */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  /* letter-spacing: .15em; */
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
  width: 100%;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

.project-carousel-container {
  position: relative;
  height: 100%; /* height of one slide */
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

.project-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  color: white;
}

.project-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.project-details {
  display: flex;
  justify-content: center;
  position: absolute;
  /* bottom: 15%; */
  /* top: 10%; */
  width: 100%;
  height: 23%;
  padding: 12px;
  z-index: 2;
  flex-direction: column;
  border-radius: 0 0 8px 8px;
  /* border: 2px solid white; */
  background: linear-gradient(180deg, rgba(13, 2, 37, 0) 63.96%, #0d0225 100%);
}

.project-title {
  font-weight: bold;
  font-size: 0.6rem;
  margin: 0;
}


.products-carousel-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 2px solid blue; */
}

.products-slide {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: end;
  flex-direction: row;
  /* align-items: center; */
  width: 100%;
  height: 100%;
  /* border: 2px solid red; */
}

.products-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.products-details {
  padding: 15px;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  z-index: 2;
  /* border: 2px solid white; */
  background: linear-gradient(180deg, rgba(13, 2, 37, 0) 63.96%, #0d0225 100%);
}

.products-title {
  font-weight: bold;
  font-size: 0.6rem;
  margin: 0;
}


.achievements-carousel-container {
  position: relative;
  height: 100%; /* height of one slide */
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  /* border: 2px solid red; */
}

.achievements-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  color: white;
  /* border: 2px solid blue; */
}

.achievements-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.achievements-details {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 8px 8px;
  /* border: 2px solid white; */
  background: linear-gradient(180deg, rgba(13, 2, 37, 0) 63.96%, #0d0225 100%);
}

.achievements-title {
  font-weight: bold;
  font-size: 0.6rem;
  margin: 0;
}


@media (min-width: 1536px) and (max-width:1920px) {
  div.Typewriter{
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) and (max-width:1535px) {
  div.Typewriter{
    font-size: 1.2rem;
  }
}
/* Mobile responsive */
.mobile-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  /* border: 2px solid white; */
}
.mobile-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
  /* border: 2px solid white; */
}
.mobile-top-container > div {
  font-size: 2.5rem;
  color: #515152;
  font-weight: 600;
}

.mobile-col1{
    height: 75%;
    width: 100%;
    /* border: 2px solid violet; */
}
.mobile-col2{
    width: 100%;
    /* border: 2px solid white; */
    border-radius: 15px;
}

.mobile-description {
  display: flex;
  width: auto;
}

.mobile-projects {
  height: 40%;
  width: 100%;
  /* border: 2px solid yellow; */
  margin-bottom: 5px;
}


/* products */
.mobile-products {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60%;
}

.mobile-services {
  height: 23%;
  width: 100%;
  margin-top: 15px;
}

.mobile-achievements {
  height: 25%;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.mobile-news {
  position: relative;
  color: white;
  height: 80%;
  width: 100%;
  border-radius: 15px;
  padding: 2px;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(6, 1, 18, 0.97) 0%,
    rgba(63, 63, 63, 0.97) 74.22%
  );
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* margin-top:px; */
}
.mobile-news-content {
  padding: 5px 2px ;
  width: 100%;
  background: linear-gradient(
    0deg,
    rgba(6, 1, 18, 0.97) 0%,
    rgba(63, 63, 63, 0.97) 74.22%
  );
  border-radius: 12px;   
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden; /* Contain the carousel slide */
  /* border: 2px solid yellow; */
}

/* Animated border using ::before */
.mobile-news::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    270deg,
    #5000ff,
    #ff4400,
    #6c1ca1,
    #ff4400,
    #5000ff
  );
  background-size: 400%;
  z-index: -1;
  animation: gradientBorder 15s linear infinite;
  border-radius: 15px;
}

/* Content inside box5 remains above */
.mobile-news > * {
  position: relative;
  z-index: 2;
}

@keyframes gradientBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 400% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.mobile-go-button {
  display: flex;
  justify-content: center;
  background-color: none;
  color: black;
  /* border: 2px solid white; */
  height: 7%;
}

.mobile-news-content > div {
  color: white;
  padding: 8px;
}
body.no-scroll {
  overflow: hidden;
}

/* Carousel styles */
.mobile-carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Match box5-content width */
  height: 80%; /* Adjusted to fit within box5-content */
  position: relative;
  overflow: hidden; /* Contain the slide */
  font-size: 8px;
  /* border: 2px solid red; */
}

.mobile-carousel-slide {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* Match container width */
  height: 100%; /* Match container height */
  position: absolute;
  left: 0px;
  /* border: 2px solid blue; */
}


.mobile-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.mobile-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8%;
}
.mobile-top-container > div {
  font-size: 1.5rem;
  color: #515152;
  font-weight: 600;
}

.mobile-popup-content-1 {
  border-radius: 10px;
  color: black;
  height: 90%;
  width: 88%;
  padding: 20px 1rem;
  background: linear-gradient(
    0deg,
    rgba(6, 1, 18, 0.97) 0%,
    rgba(63, 63, 63, 0.97) 74.22%
  );
  position: relative;
  /* border: 2px solid red; */
}
.mobile-boxes {
  display: flex;
  justify-content: space-between;
  height: 75%;
  width: 100%;
  margin-bottom: 10px;
  /* border: 2px solid red; */
  flex-wrap: wrap;
}
.mobile-buttons {
  width: 100%;
  height: 18%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: small;
  /* border: 2px solid white; */
}

.mobile-button1,
.mobile-button2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: small;
  border-radius: 15px;
  height: 40%;
  margin: 5px;
  width: 80%;
}
.mobile-button1 {
  width: 80%;
  color: #c368ff;
  cursor: pointer;
  border: 2px solid gray;
}
.mobile-button2 {
  width: 80%;
  background-color: #c368ff;
  color: white;
}
.mobile-col1{
    width: 55%;
    height: 75%;
}
.mobile-col2{
    width: 42%;
    height: 75%;
}

.mobile-col2 {
  /* background: white; */
  border-radius: 15px;
}
.mobile-description {
  display: flex;
  width: auto;
}
.mobile-projects,
.mobile-services,
.mobile-products,
.mobile-achievements {
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: white;
  border-radius: 15px;
}
.mobile-news {
  position: relative;
  color: white;
  height: 74%;
  width: 100%;
  border-radius: 15px;
  padding: 2px;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(6, 1, 18, 0.97) 0%,
    rgba(63, 63, 63, 0.97) 74.22%
  );
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 10px;
}


/* Animated border using ::before */
.mobile-news::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    270deg,
    #5000ff,
    #ff4400,
    #6c1ca1,
    #ff4400,
    #5000ff
  );
  background-size: 400%;
  z-index: -1;
  animation: gradientBorder 15s linear infinite;
  border-radius: 15px;
}

/* Content inside box5 remains above */
.mobile-news > * {
  position: relative;
  z-index: 2;
}

@keyframes gradientBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 400% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.mobile-go-button {
  display: flex;
  justify-content: end;
  align-items: center;
  background-color: none;
  color: black;
}
.mobile-go-button button {
  background: none;
  border: 2px solid #565656;
  font-weight: bold;
  width: 10%;
  height: 25px;
}
.mobile-news-content > div {
  color: white;
  /* padding: 15px; */
}
body.no-scroll {
  overflow: hidden;
}





.mobile-news-content1{
    width: 100%;
    height: 48%;
    /* font-size: 1.5rem; */
    
}
.mobile-news-content2{
    width: 100%;
    height: 48%;
    text-wrap: wrap;
    /* font-size: 1rem; */
    /* border: 2px solid white; */
}

.mobile-mobile-mobile-mobile-typewriter {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  /* border-right: .15em solid orange;  */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  /* letter-spacing: .15em; */
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

.mobile-project-carousel-container {
  position: relative;
  height: 100%; /* height of one slide */
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}

.mobile-project-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  color: white;
}

.mobile-project-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mobile-project-details {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 12px;
  font-size: 12px;
      z-index: 2;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 8px 8px;
  /* border: 2px solid white; */
  background: linear-gradient(180deg, rgba(13, 2, 37, 0) 63.96%, #0d0225 100%);
}

.mobile-project-title {
  font-weight: bold;
  font-size: 8px;
  margin: 0;
}

.mobile-project-description {
  font-size: 10px;
  margin: 4px 0 0 0;
  opacity: 0.9;
}

.mobile-horizontal-carousel-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 2px solid blue; */
}

.mobile-horizontal-slide {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: end;
  flex-direction: row;
  /* align-items: center; */
  width: 100%;
  height: 100%;
  /* border: 2px solid red; */
}

.mobile-horizontal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mobile-horizontal-details {
  height: 35%;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  z-index: 2;
  /* border: 2px solid red; */
  background: linear-gradient(180deg, rgba(13, 2, 37, 0) 63.96%, #0d0225 100%);
  font-size: 12px;
  padding: 5px;
}

.mobile-horizontal-title {
  font-weight: bold;
  font-size: 8px;
  margin: 0;
}

.mobile-horizontal-description {
  font-size: 10px;
  opacity: 0.9;
  margin-top: 5px;
}

.mobile-acheivements-carousel-container {
  position: relative;
  height: 100%; /* height of one slide */
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  /* border: 2px solid red; */
}

.mobile-acheivements-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  color: white;
  /* border: 2px solid blue; */
}

.mobile-acheivements-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mobile-acheivements-details {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 12px;
  /* background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); */
  z-index: 2;
  display: flex;
  flex-direction: column;
  font-size: 9px;
  border-radius: 0 0 8px 8px;
  /* border: 2px solid white; */
  background: linear-gradient(180deg, rgba(13, 2, 37, 0) 63.96%, #0d0225 100%);
}

.mobile-acheivements-title {
  font-weight: bold;
  font-size: 7px;
  margin: 0;
}

.mobile-acheivements-description {
  font-size: 10px;
  margin: 4px 0 0 0;
  opacity: 0.9;
}

@media (min-width: 320px) and (max-width:480px) {
  div.Typewriter{
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
  /* background-color: red; */
}
}



/* .nav-container {
  background: #0d0225;
  width: 100%;
  height: 80px;
  color: white;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  box-shadow: 0px 0px 1px;
} */
.nav-container {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  /* color: white; */

  /* Background color with 70% opacity */
  background-color: rgba(4, 0, 15, 0.7);

  /* Backdrop blur effect */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);

 
  /* box-shadow: 0px 4px 4px 0px #0E002D; */

  /* Text color */
  color: #fff;
}

.form-container {
  position: fixed;
  top: 0;
  left: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(13, 2, 37, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  width: "70%";
  min-height: "80%";
  inset: 0;
  margin: "auto";
  position: "relative";
  border-radius: "1rem";
  padding: "3rem 5rem";
  box-sizing: "border-box";
}

.glow-logo {
  filter: drop-shadow(0 0 8px rgba(0, 195, 255, 0.8)) drop-shadow(0 0 16px rgba(0, 195, 255, 0.5));
  transition: filter 0.3s ease-in-out;
}

.navbar {
  transition: transform 0.3s ease;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.navbar.hide {
  transform: translateY(-100%);
}

.navbar.show {
  transform: translateY(0);
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-right {
  display: flex;
  align-items: center;
}

.contact-us-nav {
  font-style: EuclidMeium;
  font-size: 1.1rem;
  background-color: #0047ff;
  padding: 10px 20px;
  border-radius: 0.6rem;
  color: #fff;
  cursor:pointer;
}

.contact-us-nav-true {
  display: none;
}

.nav-items-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0px 80px;
}

.nav-items,
.dropdown-name,
.nav-whats-new-item {
  font-size: 16px;
  letter-spacing: 1px;
  opacity: 1;
  padding: 30px 10px;
  overflow: hidden;
  transition: color 0.3s ease, opacity 0.3s ease, font-weight 0.3s ease;
}

.nav-items:hover,
.nav-item-active {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 1;
  color: #0047ff;
}

.nav-items.active,
.dropdown-name.active {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0.3;
  color: #fff !important;
  /* White text for active page */
}

.nav-whats-new-item.nav-item-active {
  opacity: 1;
  font-weight: 600;
  color: #0047ff;
}

a {
  text-decoration: none;
  color: white;
}

.nav-items:hover {
  cursor: pointer;
}

.nav-item-whatsnew {
  width: 178px;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 10px;
  background-color: #0047ff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 10px;
}

.nav-whatsnew-comp {
  position: absolute;
  width: 100%;
  z-index: 1000;
  /* transition: top 0.3s ease; */
}

.nav-whatsnew-comp-style0 {
  top: 46%;
}

.nav-whatsnew-comp-style1 {
  top: 0;
}

.dropdown {
  position: relative;
  cursor: pointer;
}

.dropdown-links {
  background-color: #fff;
  flex-direction: column;
  position: absolute;
  margin-top: 20px;
  border-radius: 15px;
  padding: 10px 0px;
  display: none;
  z-index: 999;
  width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.res-drop-down-container {
  position: absolute;
  top: 40px;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  width: 10rem;
  border-radius: 10px;
  border: 1px solid #0001;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-links.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.res-drop-down-container-item {
  padding: 0.5rem;
  color: #000;
}

.res-drop-down-container-item:hover {
  border-left: 3px solid #0047ff;
}

.drop-items {
  color: #0d0225;
  font-size: 16px;
  letter-spacing: 1px;
  margin: 0px 10px;
  padding: 10px;
  position: relative;
}

.drop-items:hover::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-left: 4px solid #0047ff;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.drop-items:hover {
  background-color: #eaeffc;
  border-radius: 4px;
}

.mobile-nav {
  margin-right: 20px;
  display: none;
}

.whats-new {
  position: absolute;
  top: 43px;
  height: 460px;
  width: 100%;
  background-color: #fff;
  display: flex;
  left: 0;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.whats-new-left {
  width: 25%;
  min-height: 60vh;
  display: flex;
}

.whats-new-links {
  width: 70%;
  margin: 0 auto;
  margin-top: 30px;
}

.whats-new-link {
  color: #000;
  font-size: 1.25rem;
  font-style: normal;
  font-family: EuclidMedium;
  line-height: normal;
  border-bottom: 1px solid #cadbea;
  padding: 25px 0px;
  cursor: pointer;
}

.whats-new-link:hover,
.whats-new-link.active {
  color: #0047ff;
}

.whats-new-link-active-start {
  width: 1rem;
  transform: scale(0);
  object-fit: contain;
  transition: all 0.3s;
  margin-left: 0.5rem;
}

.whats-new-link:hover .whats-new-link-active-start {
  transform: scale(1);
}

.whats-new-link.active .whats-new-link-active-start {
  transform: scale(1);
}

.whats-new-right {
  width: 73%;
  height: 480px;
  padding: 1.5rem;
  box-sizing: border-box;
}

.whats-new-box {
  background-color: pink;
  border-radius: 20px;
}

.whats-new-right-grid-container {
  width: 100%;
  /* height: 410px; */
  height: 380px;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.whats-new-right-grid-container>div:nth-child(1) {
  grid-row: 1 / span 2;
}

.whats-new-right-grid-container>div:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.whats-new-right-grid-container>div:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.whats-new-grid-item {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  box-sizing: border-box;
  position: relative;
}

.whats-new-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(13, 2, 37);
  background: linear-gradient(180deg,
      rgba(13, 2, 37, 0.20211834733893552) 50%,
      rgba(13, 2, 37, 1) 100%);
  border-radius: inherit;
}

.whats-new-grid-item-des {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.whats-new-grid-left {
  grid-row: 1 / span 3;
}

.row-span {
  grid-row: 1/3;
}

.whats-new-grid-left {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.whats-new-grid-left>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.whats-new-grid-top {
  width: 100%;
  background-color: brown;
  border-radius: 20px;
}

.whats-new-grid-top>img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.whats-new-grid-bottom {
  width: 100%;
  background-color: red;
  border-radius: 20px;
}

.whats-new-grid-bottom>img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.logo-rotate {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.logo-rotate::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: sweep 2s infinite;
}

@keyframes sweep {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}



@media (max-width: 1024px) {
  .nav-container {
    height: 70px;
  }

  .mobile-nav {
    display: block;
  }

  .nav-logo {
    width: 140px;
    height: 30px;
  }

  .nav-items-container {
    margin: 0px 20px;
  }

  .nav-items {
    display: none;
  }

  .dropdown {
    display: none;
  }

  .nav-item-whatsnew {
    display: none;
  }

  .nav-right>div {
    display: none;
  }

  .nav-right>img {
    width: 25px;
    height: 25px;
  }

  .mobile-whatsnew {
    display: none;
  }

  .nav-container {
    display: none;
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}
body.no-scroll {
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.whats-new-subcat-container {
  width: 25%;
  box-sizing: border-box;
  padding: 1.5rem;
  height: 428px;
  border-right: 1px solid #e5e5e5;
  animation: slideIn 0.5s ease-out forwards;
}

.whats-new-item-holder {
  display: flex;
  position: relative;
  width: 100%;
  height: 95%;
  box-sizing: border-box;
}

.whats-new-subcat-item-container {
  overflow-y: auto;
  padding: 1rem 1.5rem;
  width: 100%;
  height: 350px;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  position: relative;
  margin-top: 1rem;
}

.whats-new-subcat-item-container::-webkit-scrollbar {
  display: none;
}

.whats-new-subcat-item-container > div {
  border-bottom: 1px solid #cadbea;
  align-items: center;
  display: flex;
  column-gap: 1rem;
}

.whats-new-subcat-item {
  font-family: EuclidMedium;
  font-size: 1.25rem;
  color: #151f43;
  padding: 1.3rem 0rem;
}

.whats-new-subcat-item.subcat-active {
  color: #0047ff;
}

.whats-new-dot {
  width: 8px;
  height: 8px;
  background-color: #d9d9d9;
  border-radius: 50%;
  margin: 0.5rem 0rem;
}

.whats-new-dot.whats-new-dot-active {
  background-color: #0047ff;
}

.whats-new-dot-container {
  width: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.whats-new-items-heading {
  color: #d9d9d9;
  padding: 0.5rem 1rem 0rem 1rem;
  font-family: EuclidMedium;
  font-size: 18px;
  margin-left: 2rem;
}

.arrow-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 399px;
  pointer-events: none;
}

.arrow-wrapper span {
  pointer-events: auto;
}

.arrow-wrapper .arrow-up {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 2rem;
  color: black;
  z-index: 10;
}

.arrow-wrapper .arrow-down {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: black;
  z-index: 10;
}

@media (max-width: 768px) {
  .arrow-wrapper .arrow-up,
  .arrow-wrapper .arrow-down {
    font-size: 1rem;
  }

  .whats-new-subcat-container {
    display: none; /* Hide on mobile, consistent with navbar.css */
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.NavProductComp-container {
  position: absolute;
  top: 100%;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  height: 460px;
  border-bottom: 1px solid #e5e5e5;
}

.navProComp-container {
  width: 100%;
  height: 460px;
  display: flex;
  box-shadow: 4px 4px 10px rgb(0, 0, 0, 0.1);
}

.navProComp-dept-container,
.navProComp-mainCat-container,
.navProComp-subCat-container {
  width: 25%;
  box-sizing: border-box;
  padding: 1.5rem;
  height: 428px;
  border-right: 1px solid #e5e5e5;
}

.navProComp-mainCat-container {
  border-right: 1px solid #e5e5e5;
  animation: slideIn 0.5s ease-out forwards;
}

.navProComp-mainCat-item-container,
.navProComp-subCat-item-container {
  overflow-y: auto;
  padding: 1rem 1.5rem;
  width: 100%;
  height: 350px;
  -ms-overflow-style: none;
  /*IE and Edge */
  scrollbar-width: none;
  /*Firefox */
  position: relative;
  margin-top: 1rem;

}

.navProComp-mainCat-item-container>div,
.navProComp-subCat-item-container>div {
  border-bottom: 1px solid #cadbea;
  align-items: center;
  display: flex;
  column-gap: 1rem;
}

.navProComp-mainCat-item-container::-webkit-scrollbar,
.navProComp-subCat-item-container::-webkit-scrollbar {
  display: none;
}

.navProComp-products-container {
  box-sizing: border-box;
  width: 25%;
}

.navProComp-mainCat-item,
.navProComp-dept-item {
  font-family: EuclidMedium;
  font-size: 1.25rem;
  color: #151f43;
  padding: 1.3rem 0rem;
}

.navProComp-mainCat-item.mainCat-active,
.navProComp-dept-item.mainCat-active {
  color: #0047ff;
}


.navproComp-item-holder {
  display: flex;
  position: relative;
  width: 100%;
  height: 95%;
  box-sizing: border-box;
}

.navProComp-dot {
  width: 8px;
  height: 8px;
  background-color: #d9d9d9;
  border-radius: 50%;
  margin: 0.5rem 0rem;
}

.navProComp-dot.navProComp-dot-active {
  background-color: #0047ff;
}

.navProComp-dot-active {
  display: flex;
}

.navProComp-dot-container {
  width: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.navprocomp-items-heading {
  color: #d9d9d9;
  padding: 0.5rem 1rem 0rem 1rem;
  font-family: EuclidMedium;
  font-size: 18px;
  margin-left: 2rem;
}

.navProComp-subCat-container {
  animation: slideIn 0.5s ease-out forwards;
}

.arrow-wrapper .arrow-up {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 2rem;
  color: black;
  z-index: 10;
  box-shadow: 5px black;
  /* border: 2px solid black; */
}

.arrow-wrapper .arrow-down {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: black;
  z-index: 10;

}

.navProComp-products-holder {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  column-gap: 1rem;
  padding: 2rem;
}

.navProComp-products-holder>div>div {
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  background: #f5f8ff;
  border-radius: 0.5rem;
}

.navProComp-products-holder>div {
  width: 100%;
}

.navProComp-products-img {
  width: 100%;
  box-sizing: border-box;
}

.navProComp-products-img>img {
  object-fit: contain;
  width: 100%;
  height: 15rem;
  box-sizing: border-box;
}

.navProComp-products-title {
  padding: 0.5rem 0rem;
  font-family: EuclidSemibold;
}

.navProComp-category-card {
  box-sizing: border-box;
  width: 100%;
}

.navProComp-products-des {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.navProComp-products-more {
  color: #0047ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0.25rem;
  padding: 0rem 1.5rem;
  padding-bottom: 1rem;
  font-family: EuclidMedium;
}

@media (max-width: 768px) {

  .arrow-wrapper .arrow-up,
  .arrow-wrapper .arrow-down {
    font-size: 1rem;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }

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

body {
  overflow-y: auto !important;
}

body.dropdown-open {
  overflow-y: auto !important;
}

body.no-scroll {
  overflow: hidden !important;
  height: 100vh;
  position: relative;
}

/* Add this to style the arrow wrapper */
.arrow-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 399px;
  pointer-events: none;
  /* Prevent interference with scrolling */
}

.arrow-wrapper span {
  pointer-events: auto;
  /* Ensure arrows are clickable */
}
.about-drop-down-container {
  display: flex;
  column-gap: 1rem;
  padding: 2rem;
  width: 100%;
  box-sizing: border-box;
  /* max-height: 460px; */
  height: 460px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 4px 4px 10px rgb(0, 0, 0, 0.2);
}
.about-dd-main-title-container,
.about-dd-sub-title-container {
  width: 25%;
  border-right: 1px solid #e5e5e5;
  position: relative;
}
.about-dd-sub-title-container{
  animation: slideIn 0.5s ease-out forwards;

}
.about-dd-sub-title-holder {
  overflow-y: auto;
  width: 90%;
}
.about-dd-sub-title-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #d9d9d9;
}
.about-dd-sub-title-dot-active {
  background: #0047ff;
}
.about-dd-sub-title-container {
  display: flex;

  /* align-items: center; */
}
.about-dd-su-title-dot-container {
  width: 3rem;
  position: relative;
  height: 100%;
}
.about-dd-su-title-dot-container > div {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about-dd-sub-title-holder::-webkit-scrollbar {
  display: none;
}
.about-dd-main-title {
  width: 80%;
  border-bottom: 1px solid #e5e5e5;
  padding: 1.3rem 0.5rem;
  font-family: EuclidMedium;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.about-dd-main-title.about-dd-main-title-active {
  color: #0047ff;
  font-family: EuclidSemibold;
}
.about-dd-info-section {
  padding: 2rem;
  width: 50%;
  box-sizing: border-box;
  height: 100%;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}
.about-dd-info-cotain {
  width: 100%;
  height: 20rem;
  background: #f5f8ff;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem;
  box-sizing: border-box;
}
.about-dd-info-cotain > img {
  width: 100%;
  object-fit: contain;
}
.about-dd-founder-info-container {
  display: flex;
  background-color: #f5f8ff;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 1rem;
}
.about-dd-founder-info-container > div {
  width: 35%;
  margin-right: 1rem;
  border-right: 1px solid #0047ff;
}
.about-dd-founder-info-des {
  color: #6b6084;
  box-sizing: border-box;
  font-size: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.about-dd-founder-info-container > div > img {
  width: 100%;
  object-fit: cover;
}
.arrow-wrapper .arrow-up {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: #0047ff;
  z-index: 10;
}
.arrow-wrapper .arrow-down {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  color: #0047ff;
  z-index: 10;
}

body.no-scroll{
  overflow: hidden !important;
  height: 100vh;
  position: relative;
}
@keyframes slideIn {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.advertisement {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  height: 70px;
  background-color: #c7105e;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-family: "Segoe UI", sans-serif;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 998; /* Lower than dropdowns (1000) but below navbar (999) */
  outline: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

} 

.star {
  padding: 10px;
}

.ad-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  /* border: 2px solid red; */
}

.ad-carousel {
  position: relative;
  overflow: hidden;
  width: auto;
  height: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 2px solid white; */
}

.ad-slider {
  display: flex;
  transition: transform 0.6s ease-in-out;
  height: 100%;
  /* border: 2px solid black; */
  width: 100%;
}

.ad-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.view-details {
  color: white;
  text-decoration: underline;
  font-weight: bold;
  margin-left: 6px;
}

.view-details:hover {
  cursor: pointer;
}

.close {
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  width: 50px; /* Optional: define width to avoid layout shift */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* Ensure it stays above the content */
}


.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  height: 100%;
  cursor: pointer;
}

/* Optional: Add background SVG waves */
.advertisement::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/static/media/wave-line.66b39b7a45712d0176f9.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #c7105e;
  opacity: 0.2;
  z-index: 0;
}

.advertisement > * {
  position: relative;
  z-index: 1;
}


@media (min-width: 320px) and (max-width: 480px) {
  .advertisement {
    /* border: 2px solid blue; */
    width: 100%;
  }
  .ad-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 10px;
  text-wrap: wrap;
}
}
/* ============================================================= */
/* LEAD MODAL THREE - MODULAR CSS */
/* ============================================================= */

/* ============================================================= */
/* MODAL OVERLAY & BASE STRUCTURE */
/* ============================================================= */
.LeadModalThree_overlay__VWf1k {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 1rem;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  width: 100vw;
  height: 100vh;
}

.LeadModalThree_content__2XBKU {
  background: #ffffff;
  border-radius: 24px;
  width: 85%;
  max-width: 1100px;
  max-height: 90vh;
  /* box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4); */
  display: flex;
  flex-direction: column;
  position: relative;
  /* border: 1px solid rgba(255, 255, 255, 0.15); */
  overflow: hidden;
}

/* ============================================================= */
/* CLOSE BUTTON */
/* ============================================================= */
.LeadModalThree_closeButton__19JaR {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  font-size: 1.5rem;
  color: #2c3e50;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.LeadModalThree_closeButton__19JaR:hover {
  color: #e74c3c;
  background: #ffffff;
}

/* ============================================================= */
/* MODAL CONTAINER */
/* ============================================================= */
.LeadModalThree_container__pFL0Z {
  display: flex;
  height: 100%;
  /* min-height: 650px; */
  min-height: 680px;
  /* min-height: 90vh; */
  width: 100%;
}

/* ============================================================= */
/* LEFT SIDE - BRAND SECTION */
/* ============================================================= */
.LeadModalThree_leftSide__RXp6s {
  flex: 1 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d0225 0%, #2d1b69 100%);
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}

.LeadModalThree_brandSection__omPm9 {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  gap: 1rem;
  z-index: 1;
}

.LeadModalThree_itemImageSection__LLcAq {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.LeadModalThree_itemImageContainer__ECuRm {
  width: 100%;
  height: 100%;
}

.LeadModalThree_itemImage__-B01u {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1);
}

.LeadModalThree_itemInfo__HbCSF {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  padding: 2.5rem;
  position: relative;
  z-index: 2;
}

.LeadModalThree_itemInfo__HbCSF::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(13, 2, 37, 0.1) 0%,
    rgba(45, 27, 105, 0.05) 50%,
    rgba(198, 141, 252, 0.08) 100%
  );
  border-radius: 20px;
  z-index: -1;
}

.LeadModalThree_itemInfo__HbCSF h4 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: #ffffff;
  line-height: 1.3;
  text-align: center;
}

.LeadModalThree_itemDescription__cAJql {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* ============================================================= */
/* RIGHT SIDE - FORM SECTION */
/* ============================================================= */
.LeadModalThree_rightSide__KX0HT {
  flex: 1.2 1;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.LeadModalThree_formSection__P97ry {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.LeadModalThree_logoContainer__GEO3- {
  margin-bottom: 1rem;
  text-align: center;
}

.LeadModalThree_companyLogo__qhKJV {
  height: 18px;
  width: auto;
}

.LeadModalThree_formIntro__SOtyB {
  margin-bottom: 1rem;
}

.LeadModalThree_formIntro__SOtyB h3 {
  margin: 0.75rem 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0d0225;
  background: linear-gradient(135deg, #0d0225, #0047ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
}

.LeadModalThree_modalDescription__AuLXF {
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
  font-size: 1rem;
  text-align: left;
}

/* ============================================================= */
/* PROGRESS BAR */
/* ============================================================= */
.LeadModalThree_progressSection__yB\+cq {
  margin-bottom: 1rem;
}

.LeadModalThree_progressContainer__jIUmt {
  width: 100%;
  height: 6px;
  background: #f1f3f4;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.LeadModalThree_progressFill__2sAZL {
  height: 100%;
  background: linear-gradient(135deg, #0047ff, #c68dfc);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.LeadModalThree_progressText__uEls1 {
  text-align: center;
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

/* ============================================================= */
/* LEAD FORM STYLES */
/* ============================================================= */
/* .leadForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
} */

.LeadModalThree_formStep__CMxoJ {
  position: relative;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem !important;
  padding: 0.25rem 0 !important;
}

.LeadModalThree_stepHeader__TvVI7 {
  margin-top: 10px !important;
}

.LeadModalThree_stepTitle__TgW5t {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #0d0225;
  line-height: 1.3;
}

.LeadModalThree_fieldContainer__j8xdH {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.LeadModalThree_fieldContainer__j8xdH.LeadModalThree_lastStep__ecxrs {
  flex-direction: column;
  align-items: stretch;
}

.LeadModalThree_stepField__YLqLb {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Combined Fields */
.LeadModalThree_combinedFields__O5n-R {
  display: flex;
  flex-direction: column;
  gap: 1rem !important;
  width: 100%;
}

.LeadModalThree_phoneFieldContainer__3MFP4,
.LeadModalThree_messageFieldContainer__187II {
  width: 100%;
}

/* Input Fields */
.LeadModalThree_singleFieldInput__jQxV8 {
  padding: 0.6rem 0;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: inherit;
  color: #0d0225;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #0047ff !important;
  background: transparent;
  width: 100%;
}

.LeadModalThree_singleFieldInput__jQxV8.LeadModalThree_textarea__GlEfc {
  border: 2px solid #0047ff !important;
  border-radius: 12px;
  padding: 1rem;
  resize: vertical;
  min-height: 80px;
}

.LeadModalThree_textarea__GlEfc {
  border: 2px solid #0047ff !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  min-height: 80px;
  resize: vertical;
}

.LeadModalThree_singleFieldInput__jQxV8:focus {
  outline: none;
  background: #ffffff;
}

.LeadModalThree_singleFieldInput__jQxV8.LeadModalThree_error__Z\+Za\+ {
  border-bottom-color: #e74c3c;
}

.LeadModalThree_singleFieldInput__jQxV8.LeadModalThree_error__Z\+Za\+.LeadModalThree_textarea__GlEfc {
  border-color: #e74c3c;
}

/* Phone Input */
.LeadModalThree_phoneInputContainer__9v4oV {
  width: 100%;
}

.LeadModalThree_phoneInputField__IiG11 {
  width: 100%;
  padding: 1rem 0;
  font-size: 1rem;
  border: none;
  border-bottom: 2px solid #0047ff;
  background: transparent;
}

.LeadModalThree_phoneInputField__IiG11:focus {
  outline: none;
  background: #ffffff;
}

.LeadModalThree_phoneInputField__IiG11.LeadModalThree_error__Z\+Za\+ {
  border-bottom-color: #e74c3c;
}

/* Error Messages */
.LeadModalThree_errorMessage__P5rym {
  color: #e74c3c;
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ============================================================= */
/* ARROW NAVIGATION */
/* ============================================================= */
.LeadModalThree_prevArrow__gYBS5 {
  position: absolute;
  top: -15px; /* moves arrow above the text */
  left: -5px;
  background: none;
  border: none;
  color: #2c3e50;
  padding: 0;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.3s ease;
  z-index: 10;
}

.LeadModalThree_prevArrow__gYBS5:hover {
  color: #0047ff;
  opacity: 1;
  transform: translateX(-2px);
}

.LeadModalThree_nextArrowWrapper__lNL0q {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.LeadModalThree_nextArrow__F77YM {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-color: #0047ff;
  color: white;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 71, 255, 0.3);
}

.LeadModalThree_nextArrow__F77YM:hover:not(:disabled) {
  background-color: #1a5aff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 71, 255, 0.4);
}

.LeadModalThree_nextArrow__F77YM:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  background-color: #ccc;
}

/* Submit Button */
.LeadModalThree_submitWrapper__aV6Lp {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

.LeadModalThree_submitButton__S7wPh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #4caf50;
  color: white;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
  min-width: 200px;
}

.LeadModalThree_submitButton__S7wPh:hover:not(:disabled) {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.LeadModalThree_submitButton__S7wPh:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.LeadModalThree_submitSpinner__-hndm {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: LeadModalThree_spin__0WO-a 1s linear infinite;
}

@keyframes LeadModalThree_spin__0WO-a {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================= */
/* SOCIAL SECTION */
/* ============================================================= */
.LeadModalThree_socialSection__Ry1w1 {
  margin-top: auto;
  padding-top: 1rem;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.LeadModalThree_socialSection__Ry1w1 h5 {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0d0225;
  text-align: center;
}

.LeadModalThree_contactSocials__Y7QOD {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.LeadModalThree_socialIconContainer__6TQVX {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #350b91;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.LeadModalThree_socialIconContainer__6TQVX:hover {
  background: #c68dfc;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 25px rgba(198, 141, 252, 0.4);
}

.LeadModalThree_socialIcon__H4rLU {
  color: white;
  font-size: 1rem;
}

/* ============================================================= */
/* THANK YOU CARD */
/* ============================================================= */
.LeadModalThree_thankYouCard__7Jwjs {
  /* flex: 1; */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
  height: 100% !important;
  padding: 0 !important;
}

.LeadModalThree_thankYouContent__D0-Oc {
  max-width: 380px !important;
  width: 100%;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; */
}

.LeadModalThree_successIcon__Z89EW {
  /* width: 120px; */
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.LeadModalThree_thankYouTitle__F4pBy {
  font-size: 2rem;
  font-weight: 700;
  color: #0d0225;
  margin: 0;
  background: linear-gradient(135deg, #0d0225, #0047ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.LeadModalThree_thankYouMessage__qwtHb {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 1rem;
  text-align: center;
  max-width: 380px;
}

.LeadModalThree_contactOptions__HS1cP {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  /* max-width: 320px; */
}

.LeadModalThree_contactOption__p6w\+x {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  width: 100%;
}

.LeadModalThree_contactOption__p6w\+x:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: #0047ff;
}

.LeadModalThree_contactIcon__PI6RY {
  font-size: 1.5rem;
  color: #0047ff;
  flex-shrink: 0;
}

.LeadModalThree_contactInfo__egOzA {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1;
}

.LeadModalThree_contactLabel__wWIkQ {
  font-size: 0.9rem;
  color: #6c757d;
  margin: 0 0 0.25rem 0;
  font-weight: 500;
}

.LeadModalThree_contactValue__5kt8m {
  font-size: 1.1rem;
  color: #0d0225;
  margin: 0;
  font-weight: 600;
}

/* Thank You Social */
.LeadModalThree_thankYouSocialSection__H\+JC3 {
  width: 100%;
  text-align: center;
}

.LeadModalThree_thankYouDivider__pG-ln {
  position: relative;
  margin: 1rem 0;
  text-align: center;
}

.LeadModalThree_thankYouDivider__pG-ln::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e9ecef;
}

.LeadModalThree_thankYouDividerText__rJiWp {
  background: white;
  padding: 0 1rem;
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.LeadModalThree_thankYouSocialIcons__67CGM {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

.LeadModalThree_thankYouSocialLink__NyDOq {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d0225, #2d1b69);
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(13, 2, 37, 0.2);
}

.LeadModalThree_thankYouSocialLink__NyDOq:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(13, 2, 37, 0.3);
}

.LeadModalThree_thankYouSocialIcon__hpV7P {
  font-size: 1.2rem;
}

.LeadModalThree_thankYouSocialText__TbKE\+ {
  color: #6c757d;
  font-size: 0.95rem;
  margin: 0;
  font-weight: 500;
}

/* ============================================================= */
/* RESPONSIVE STYLES */
/* ============================================================= */

/* Tablet + Mobile (≤1024px) */
@media (max-width: 1024px) {
  .LeadModalThree_overlay__VWf1k {
    align-items: flex-start;
    padding: 1rem;
    overflow-y: auto;
  }

  .LeadModalThree_content__2XBKU {
    width: 95%;
    height: 90vh;
    max-height: 90vh;
    overflow-y: auto;
    margin: 2rem 0;
  }

  .LeadModalThree_container__pFL0Z {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }

  .LeadModalThree_leftSide__RXp6s {
    min-height: 400px;
    border-radius: 0;
  }

  .LeadModalThree_rightSide__KX0HT {
    padding: 2rem 1.5rem;
    overflow: visible;
  }

  .LeadModalThree_brandSection__omPm9 {
    padding: 1.5rem;
  }

  .LeadModalThree_itemInfo__HbCSF {
    padding: 1.5rem;
  }

  .LeadModalThree_itemInfo__HbCSF h4 {
    font-size: 1.5rem;
  }

  .LeadModalThree_itemDescription__cAJql {
    font-size: 1rem;
  }
}

/* Medium Mobile (≤768px) */
@media (max-width: 768px) {
  .LeadModalThree_content__2XBKU {
    width: 98%;
    border-radius: 20px;
  }

  .LeadModalThree_leftSide__RXp6s,
  .LeadModalThree_rightSide__KX0HT {
    padding: 1.75rem 1.5rem;
  }

  .LeadModalThree_formIntro__SOtyB h3 {
    font-size: 1.6rem;
  }

  .LeadModalThree_stepTitle__TgW5t {
    font-size: 1rem;
  }

  .LeadModalThree_thankYouTitle__F4pBy {
    font-size: 1.75rem;
  }

  .LeadModalThree_itemInfo__HbCSF {
    padding: 1.25rem;
  }

  .LeadModalThree_itemInfo__HbCSF h4 {
    font-size: 1.3rem;
  }

  .LeadModalThree_itemDescription__cAJql {
    font-size: 0.95rem;
  }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
  .LeadModalThree_overlay__VWf1k {
    padding: 0.5rem;
  }

  .LeadModalThree_content__2XBKU {
    width: 100%;
    border-radius: 18px;
    max-height: 95vh;
  }

  .LeadModalThree_leftSide__RXp6s,
  .LeadModalThree_rightSide__KX0HT {
    padding: 1.5rem 1.25rem;
  }

  .LeadModalThree_closeButton__19JaR {
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }

  .LeadModalThree_brandSection__omPm9 {
    padding: 1rem;
  }

  .LeadModalThree_itemInfo__HbCSF {
    padding: 1rem;
  }

  .LeadModalThree_itemInfo__HbCSF h4 {
    font-size: 1.2rem;
  }

  .LeadModalThree_itemDescription__cAJql {
    font-size: 0.9rem;
  }

  .LeadModalThree_stepTitle__TgW5t {
    font-size: 1rem;
  }

  .LeadModalThree_singleFieldInput__jQxV8 {
    padding: 0.875rem 0;
    font-size: 0.95rem;
  }

  .LeadModalThree_nextArrow__F77YM {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }

  .LeadModalThree_prevArrow__gYBS5 {
    font-size: 1.2rem;
  }

  .LeadModalThree_submitButton__S7wPh {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    min-width: 160px;
  }

  .LeadModalThree_fieldContainer__j8xdH {
    gap: 10px;
  }
}

/* Large Desktop (≥1440px) */
@media (min-width: 1440px) {
  .LeadModalThree_content__2XBKU {
    max-width: 1200px;
    min-height: 650px;
  }

  .LeadModalThree_container__pFL0Z {
    min-height: 650px;
  }

  .LeadModalThree_rightSide__KX0HT {
    padding: 2.5rem 3rem;
  }

  .LeadModalThree_formSection__P97ry {
    justify-content: center;
  }

  .LeadModalThree_singleFieldInput__jQxV8 {
    padding: 1.125rem 0;
    font-size: 1rem;
  }

  .LeadModalThree_itemInfo__HbCSF h4 {
    font-size: 1.6rem;
  }

  .LeadModalThree_itemDescription__cAJql {
    font-size: 1.05rem;
  }
}

/* ============================================================= */
/* ACCESSIBILITY & PERFORMANCE */
/* ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .LeadModalThree_content__2XBKU,
  .LeadModalThree_closeButton__19JaR,
  .LeadModalThree_singleFieldInput__jQxV8,
  .LeadModalThree_socialIconContainer__6TQVX,
  .LeadModalThree_contactOption__p6w\+x,
  .LeadModalThree_nextArrow__F77YM,
  .LeadModalThree_prevArrow__gYBS5,
  .LeadModalThree_submitButton__S7wPh {
    transition: none;
  }

  .LeadModalThree_submitSpinner__-hndm {
    animation: none;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .LeadModalThree_nextArrow__F77YM:hover,
  .LeadModalThree_prevArrow__gYBS5:hover,
  .LeadModalThree_submitButton__S7wPh:hover,
  .LeadModalThree_socialIconContainer__6TQVX:hover,
  .LeadModalThree_contactOption__p6w\+x:hover,
  .LeadModalThree_thankYouSocialLink__NyDOq:hover {
    transform: none;
  }
}

/* Backdrop filter fallback */
@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .LeadModalThree_itemInfo__HbCSF {
    background: linear-gradient(
      135deg,
      rgba(13, 2, 37, 0.85) 0%,
      rgba(45, 27, 105, 0.8) 100%
    );
  }
}

/* Body lock when modal open */
.LeadModalThree_bodyLock__3h2Yq {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.LeadModalThree_lottie-wrapper__KG9si {
  width: 70px; /* base size on large screens */
  height: 70px;
}

@media (max-width: 1024px) {
  /* laptop */
  .LeadModalThree_lottie-wrapper__KG9si {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  /* tablets */
  .LeadModalThree_lottie-wrapper__KG9si {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  /* small mobile */
  .LeadModalThree_lottie-wrapper__KG9si {
    width: 40px;
    height: 40px;
  }
}

.LeadModalThree_lottie-wrapper__KG9si canvas,
.LeadModalThree_lottie-wrapper__KG9si svg {
  width: 100% !important;
  height: 100% !important;
}

/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
}

.PhoneInputCountryIcon {
	width: calc(1em * 1.5);
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: 1em;
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: 1em;
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: rgba(0,0,0,0.1);
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 1px rgba(0,0,0,0.5),
		inset 0 0 0 1px rgba(0,0,0,0.5);
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: 0.8;
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: 0.65;
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: 0.35em;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: 0.3em;
	width: var(--PhoneInputCountrySelectArrow-width);
	height: 0.3em;
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: 0.35em;
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: currentColor;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: 1px;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: 1px;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: rotate(45deg);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: 0.45;
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: #03b2cb;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 1px #03b2cb,
		inset 0 0 0 1px #03b2cb;
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: #03b2cb;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.footer-contaier {
  margin: 0rem 5rem;
  margin-bottom: 40px;
}
.footer-tabs {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 18px;
  margin-top: 100px;
  width: 100%;
}
.footer-nav-tabs {
  width: 40%;
  display: flex;
  justify-content: space-between;
}
.footer-grey-tabs {
  color: #6B6084;
  margin-top: 30px;
  font-weight: 400;
  cursor: pointer;
   transition: color 0.3s ease;
}
.footer-grey-tabs:hover{
  color: #0047FF;
}
.location{
  color: #6B6084;
}
.footer-grey-tabs-child {
  color: #6B6084;
  font-weight: 400;
  cursor: pointer;

}
.footer-grey-tabs-child:hover{
  color: #0047FF;

}
.footer-gradient-text {
  background: linear-gradient(
    to right,
    #C4D7E6 0,
    #8501FF 0%,
    #FF6D03,
    49%,
    #DA06FF 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 1.25rem;
}
.footer-others {
  /* margin: 0px 32px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 120px;
  color: #6B6084;
  font-size: 18px;
  font-weight: 500;
}
.footer-icons {
  display: flex;
  align-items: center;
}
.footer-icon-container {
  height: 2rem;
  width: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6B6084;
  padding: 0px;
  overflow: hidden;
}
.footer-insta-icon {
  color: #6B6084;
  font-size: 22px;
  transition: all 0.3s;
}
.footer-twitter-icon,
.footer-linkedin-icon,
.footer-facebook-icon {
  color: #6B6084;
  font-size: 18px;
  transition: all 0.3s;

}
.sitemap {
  font-size: 18px;
 color: #316FF6;
}
.sitemap:hover {
  color: #316FF6;
}







.footer-insta-icon:hover {
  color: #fff;
  background: #833AB4;
  background: linear-gradient(to right, #833AB4, #FD1D1D, #FCB045);
  border-radius: 3px;
  height: 2rem;
  width: 2rem;
  padding: 5px;
   border-radius: 0.3rem;
  /* color: transparent;
  background-clip: text; */
}
.footer-twitter-icon:hover {
  color: #FFFFFF;
  background-color:black;
  color: white;
  padding: 5px;
height: 2rem;
  width: 2rem;
   border-radius: 0.3rem;
}
.footer-facebook-icon:hover {
  background-color: #316FF6;
  padding: 5px;
  color: white;
  height: 2rem;
  width: 2rem;
   border-radius: 0.3rem;
}
.footer-linkedin-icon:hover {
  background-color: #316FF6;
  padding: 5px;
  color: white;
  height: 1.9rem;
  overflow: hidden;
  width: 2rem;
   border-radius: 0.3rem;
}
/* mobile footer styles */
.mobile-footer {
  display: none;
  row-gap: 30px;
  margin-bottom: 5%;
  margin-top: 40px;
}
.keep-text {
  color: #0D0225;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.contact-us-btn {
  width: 160px;
  height: 40px;
  border-radius: 8px;
  background: #0047FF;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-top: 20px;
}
.start-conversation {
  /* background: linear-gradient(to right, #833AB4, #FD1D1D, #FCB045); */
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.contact-mails {
  background: linear-gradient(
    to bottom,
    #C4D7E6 0,
    #8501FF 0%,
    #FF6D03,
    49%,
    #DA06FF 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 16px;
  font-weight: 600;
}
.footer-accordion {
  padding: 10px;
}
.foo-line {
  width: 100%;
  height: 1px;
  background-color: #E0E0E0;
}
.footer-accordion-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-accordion-top > p {
  color: #0D0225;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.socialLinks {
  display: flex;
  gap: 20px;
  width: 90%;
  margin: 0 auto;
}
.terms {
  color: #6B6084;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.dot {
  width: 6px;
  height: 6px;
  background-color: #D9D9D9;
  border-radius: 10px;
}
.copy-rights {
  color: #6B6084;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-left: 20px;
}
.privacypolicy{
  padding-left: 19px;
}
@media (min-width: 1025px) and (max-width: 1366px) {
  .footer-container {
    margin: 0rem 3rem; /* Reduce side margins */
    margin-bottom: 30px;
  }

  .footer-tabs {
    font-size: 16px; /* Smaller font size */
    margin-top: 80px; /* Reduce top margin */
  }

  .footer-nav-tabs {
    width: 45%; /* Slightly wider for better spacing */
    justify-content: space-around; /* More even spacing */
  }

  .footer-grey-tabs {
    margin-top: 25px;
    font-size: 14px; /* Smaller font size */
  }

  .footer-grey-tabs-child {
    font-size: 14px;
  }

  .footer-gradient-text {
    font-size: 1.1rem; /* Slightly smaller gradient text */
  }

  .footer-others {
    margin-top: 100px; /* Reduce top margin */
    font-size: 12.5px; /* Smaller font size */
  }

  .footer-icon-container {
    height: 1.8rem; /* Smaller icons */
    width: 1.8rem;
  }

  .footer-insta-icon {
    font-size: 20px; /* Adjust icon size */
  }

  .footer-twitter-icon,
  .footer-linkedin-icon,
  .footer-facebook-icon {
    font-size: 16px; /* Adjust icon size */
  }

  .footer-insta-icon:hover,
  .footer-twitter-icon:hover,
  .footer-facebook-icon:hover,
  .footer-linkedin-icon:hover {
    height: 1.8rem; /* Match container size on hover */
    width: 1.8rem;
  }

  .sitemap {
    font-size: 12.5px;
    padding-right: 50px; /* Slightly smaller font size */
  }
  .privacypolicy{
    padding-left: 0px;
  }

}
.mbfooter-links {
  color: #6B6084;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-left: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .footer-contaier {
    display: none;
  }
  .mobile-footer {
    display: flex;
    flex-direction: column;
  }
}
/* Base styles for the contact form */
.contact-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  height: 100vh;
  background-color: rgb(13, 2, 37, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-content {
  background-color: #fff;
  padding: 3rem 5rem;
  box-sizing: border-box;
  width: 80%;
  max-width: 95%;
  border-radius: 2rem;
  min-height: 70%;
  max-height: 90%;
  overflow-y: auto;
}
.contact-form-container {
  display: flex;
  align-items: center;
}
.contact-form-image-container {
  width: 40%;
  display: flex;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* justify-content: center; */
}
.contact-form-content-container {
  width: 60%;
  overflow-y: auto;
  /* Hide scrollbar for Firefox */
  scrollbar-width: none;
  /* Hide scrollbar for IE/Edge */
  -ms-overflow-style: none;
}
.contact-socials {
  display: flex;
  column-gap: 1.5rem;
  margin-top: 2rem;
  /* justify-content: center; */
}
.contact-second-title {
  font-family: EuclidSemiBold;
  font-size: 1.5rem;
  color: #0047FF;
  padding: 1rem 0rem;
}
.contact-main-title {
  font-family: EuclidSemiBold;
  font-size: 2.5rem;
  color: #000;
}
.contact-content::-webkit-scrollbar {
  display: none;
}
.input-container {
  /* width: 100%; */
  display: flex;
  column-gap: 1rem;
  margin: 1rem 0rem;
}
.PhoneInputInput {
  border: none;
  font-family: EuclidMedium;
}
.PhoneInputInput::placeholder {
  font-family: EuclidMedium;
  color: #C8C8C9;
  /* font-size: 1rem; */
}
.mobile-container {
  width: 100%;
  border: 1px solid #CADBEA;
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  display: flex;
  align-items: center;
}
.organization-container {
  width: 100%;
  height: 3rem;
  border: 1px solid #CADBEA;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 0.5rem;
  position: relative;
}
.org-text {
  font-family: EuclidMedium;
  color: #C8C8C9;
}
.org-options {
  position: absolute;
  top: 120%;
  left: 0;
  background-color: #fff;
  border: 1px solid #E5E5E5;
  width: 100%;
  border-radius: 10px;
  z-index: 999;
}
.contact-org-inp {
  font-family: EuclidMedium;
  outline: none;
  box-sizing: border-box;
  width: 100%;
  border: none;
}
.org-options > p {
  padding: 0.5rem;
  /* border-bottom: 1px solid #E5E5E5; */
}
.org-options > p:hover {
  border-left: 3px solid #0047FF;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  transition: 0.2s ease-in;
}
.input-container > input {
  min-width: 50%;
}
.input-container > div {
  width: 50%;
}
.input-field {
  width: 100%;
  border: 1px solid #CADBEA;
  padding: 1.5rem 1rem;
  font-family: EuclidMedium;
  outline: none;
  box-sizing: border-box;
}
.org-text-selected {
  font-family: EuclidMedium;
  color: #000;
}
.PhoneInput {
  border: none;
  outline: none;
  padding: 10px;
  font-size: 16px;
}
.PhoneInput::placeholder,
.input-field::placeholder,
.message-area::placeholder,
.contact-org-inp::placeholder,
.job-org-inp::placeholder {
  font-family: EuclidMedium;
  color: #C8C8C9;
  font-size: 1remn;
  background-color: transparent;
}
.contact-org-inp {
  background-color: transparent !important;
  background: transparent !important;
  outline: none !important;
  border: none !important;
}

.message-area {
  margin-bottom: 1rem;
  height: 30vh;
  border: 1px solid #CADBEA;
  padding: 1rem;
  width: 100%;
  resize: none;
  outline: none;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: EuclidMedium;
}
body.no-scroll {
  overflow: auto;
  height: auto;
  position: static;
}
.submit-style {
  padding: 1rem 7rem;
  background-color: #0047FF;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: EuclidMedium;
  cursor: pointer;
}
.error-message {
  color: red;
}

/* :white_check_mark: Mobile View (320px to 480px) */
@media screen and (min-width: 320px) and (max-width: 480px) {
  /* Layout Adjustments */
  .contact-form-container {
    flex-direction: column;
    min-height: auto;
  }
  .contact-overlay {
    top: 30px;
  }

  .contact-form-image-container {
    display: none;
  }

  .contact-form-content-container {
    width: 100%;
    padding: 1rem;
    overflow-y: auto;
  }

  .contact-content {
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 1rem;
    max-height: 100vh;
    border-radius: 0;
  }

  /* Typography */
  .contact-main-title {
    margin-top: 30px;
    font-size: 1rem;
  }

  .contact-second-title {
    font-size: 0.875rem;
    padding: 0.25rem 0;
  }

  /* Input Layout */
  .input-container {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    margin: 1rem 0;
  }

  .input-container > div {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    width: 100%;
  }

  .input-field {
    padding: 0.5rem;
    font-size: 0.875rem;
    height: 2.5rem;
  }

  .mobile-container,
  .organization-container {
    height: 2.5rem;
  }

  .message-area {
    height: 120px;
    padding: 0.5rem;
    font-size: 0.875rem;
  }

  /* Submit Button */
  .submit-style {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    width: 100%;
  }

  /* Social Icons */
  .contact-socials {
    column-gap: 1rem;
    margin-top: 1rem;
  }

  .footer-icon-container {
    width: 32px;
    height: 32px;
  }

  .footer-facebook-icon,
  .footer-linkedin-icon,
  .footer-twitter-icon,
  .footer-insta-icon {
    font-size: 1rem;
  }

  .error-message {
    position: static;
    font-size: 0.75rem;
    color: red;
    margin-top: 0.25rem;
    padding-left: 0.25rem;
  }

  /* Prevent body from being locked during scroll */
  body.no-scroll {
    overflow: auto;
    height: auto;
    position: static;
  }
}

/* Tablet view (481px to 1024px) */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  .contact-overlay {
    top: 50px;
    overflow: hidden;
  }
  .contact-form-container {
    flex-direction: column;
    min-height: auto;
  }

  .contact-form-image-container {
    display: none;
  }

  .contact-form-content-container {
    width: 100%;
    padding: 1.5rem;
    overflow-y: auto;
  }

  .contact-content {
    width: 90%;
    max-width: 700px;
    padding: 1.5rem;
    max-height: 90vh;
  }

  .contact-main-title {
    font-size: 1.75rem;
  }

  .contact-second-title {
    font-size: 1rem;
    padding: 0.5rem 0;
  }

  .input-container {
    flex-direction: column;
    row-gap: 1.5rem;
    margin: 1rem 0;
  }

  .input-container > div {
    width: 100%;
    height: 4rem;
  }

  .input-field {
    padding: 0.75rem;
    font-size: 1rem;
    height: 3rem;
  }

  .mobile-container,
  .organization-container {
    height: 2rem;
  }

  .message-area {
    height: 150px;
    padding: 1rem;
    font-size: 1rem;
  }

  .submit-style {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    width: 100%;
  }

  .contact-socials {
    column-gap: 1.25rem;
    margin-top: 1.5rem;
  }

  .error-message {
    font-size: 0.875rem;
    bottom: 0rem;
  }

  body.no-scroll {
    overflow: auto;
    height: auto;
    position: static;
  }
}

/* Laptop view (1024px and up) */

@media screen and (min-width: 1025px) {
  .contact-form-container {
    flex-direction: row;
    overflow: hidden;
  }

  .contact-form-image-container {
    display: flex;
    width: 60%;
    /* width: 40%; */
    padding-right: 60px;
    padding-top: 50px;
  }

  .contact-form-content-container {
    width: 30%;
    /* width: 57%; */
    padding: 4rem 0rem;
  }

  .contact-content {
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    padding: 0;
  }

  .input-container {
    flex-direction: row;
    column-gap: 1.5rem;
    margin: 1.5rem 0;
  }

  .input-field {
    height: 3rem;
  }

  .message-area {
    height: 180px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .submit-style {
    width: auto;
  }

  body.no-scroll {
    overflow: hidden;
    height: 100vh;
    position: fixed;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .contact-form-container {
    flex-direction: row;
    padding: 10px;
    overflow: hidden;
  }

  .contact-form-image-container {
    display: flex;
    width: 35%;
    padding-right: 2rem;
    padding-top: 2rem;
  }

  .contact-form-content-container {
    width: 65%; /* Slightly increased to accommodate content */
    padding: 3rem 1rem; /* Reduced padding for better fit */
  }

  .contact-content {
    width: 90vw; /* Slightly less than full viewport width */
    height: 90vh; /* Slightly less than full viewport height */
    padding: 1rem;
    max-width: 1200px; /* Cap width for better readability */
  }

  .contact-main-title {
    font-size: 2rem; /* Slightly smaller for better fit */
  }

  .contact-second-title {
    font-size: 1.25rem; /* Adjusted for proportionality */
    padding: 0.75rem 0;
  }

  .input-container {
    flex-direction: row;
    column-gap: 1rem; /* Reduced gap for tighter layout */
    margin: 1.25rem 0;
  }

  .input-field {
    height: 2.75rem; /* Slightly smaller input fields */
    padding: 0.75rem;
    font-size: 0.95rem; /* Adjusted font size */
  }

  .mobile-container,
  .organization-container {
    height: 2.75rem; /* Match input field height */
  }

  .message-area {
    height: 160px; /* Slightly smaller textarea */
    padding: 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
  }

  .submit-style {
    padding: 0.75rem 5rem; /* Adjusted button size */
    font-size: 0.95rem;
  }

  .contact-socials {
    column-gap: 1.25rem;
    margin-top: 1.5rem;
  }

  .error-message {
    font-size: 0.85rem; /* Slightly smaller error message */
  }

  body.no-scroll {
    overflow: hidden;
    height: 100vh;
    position: fixed;
  }
}
@media (min-width: 1000px) and (max-width: 1300px) {
  .contact-form-container {
    flex-direction: row;
    padding: 8px;
    overflow: hidden;
  }

  .contact-form-image-container {
    display: flex;
    width: 32%;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
  }

  .contact-form-content-container {
    width: 68%;
    padding: 1.5rem 1rem;
  }

  .contact-content {
    width: 95vw;
    height: 88vh;
    padding: 1rem;
    max-width: 1100px;
  }

  .contact-main-title {
    font-size: 1.75rem;
  }

  .contact-second-title {
    font-size: 1.1rem;
    padding: 0.5rem 0;
  }

  .input-container {
    flex-direction: row;
    column-gap: 0.75rem;
    margin: 1rem 0;
  }

  .input-field {
    height: 2.5rem;
    padding: 0.65rem;
    font-size: 0.9rem;
  }

  .mobile-container,
  .organization-container {
    height: 2.5rem;
  }

  .message-area {
    height: 140px;
    padding: 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }

  .submit-style {
    padding: 0.65rem 4rem;
    font-size: 0.9rem;
  }

  .contact-socials {
    column-gap: 1rem;
    margin-top: 1.25rem;
  }

  .error-message {
    font-size: 0.8rem;
  }

  body.no-scroll {
    overflow: hidden;
    height: 100vh;
    position: fixed;
  }
}
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: 9999;
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, 9999);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: 320px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: max(16px, env(safe-area-inset-top));
  top: var(--toastify-toast-top);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: max(16px, env(safe-area-inset-left));
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: max(16px, env(safe-area-inset-bottom));
  bottom: var(--toastify-toast-bottom);
  right: max(16px, env(safe-area-inset-right));
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: auto;
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: 64px;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 6px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  max-height: var(--toastify-toast-max-height);
  font-family: sans-serif;
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1 1;
}
.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: #121212;
  background: var(--toastify-color-dark);
  color: #fff;
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: #fff;
  background: var(--toastify-color-light);
  color: #757575;
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: #fff;
  color: var(--toastify-text-color-info);
  background: #3498db;
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: #fff;
  color: var(--toastify-text-color-success);
  background: #07bc0c;
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: #fff;
  color: var(--toastify-text-color-warning);
  background: #f1c40f;
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: #fff;
  color: var(--toastify-text-color-error);
  background: #e74c3c;
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: #bb86fc;
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: #3498db;
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: #07bc0c;
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: #f1c40f;
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: #e74c3c;
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: rgba(255, 255, 255, 0.7);
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: auto;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: 0;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: 6px;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: 6px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: 0.2;
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: #e0e0e0;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: #616161;
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.product_container {
  width: 100%;
  position: relative;

  /* background-color: #0d0225; */
  /* min-height: calc(100vh - 30vh); */
  /* background-color: aquamarine; */
}

.p-section {
  position: sticky;
  top: 0px;
  /* top: 80px; */
  z-index: 1;
  width: 100%;
  height: 100vh;
  /* background-color: #fff; */
  background-color: #f9f6ff;
  overflow: hidden;
  padding: 2rem 0rem;
  box-sizing: border-box;
}

.product_section {
  height: 100vh;
  /* background-color: #0d0225; */
  background: rgb(49, 8, 139);
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 5rem;
  box-sizing: border-box;
  z-index: 2;
}

.product_text {
  font-size: 5vw;
  font-weight: 600;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.product_description {
  width: 100%;
  /* background-color: red; */
  display: flex;
  /* justify-content: flex-end; */
}

.product_description>p {
  line-height: 1.8rem;
  /* line-height: 2rem; */
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  /* color: #fff; */
  /* margin-left: 50%; */
  width: 60%;
  /* background-color: aqua; */
}

.product_description>p>div {
  color: #fff;
  font-size: 1.5rem;
  font-family: EuclidMedium;
  margin-left: none;
  margin-bottom: 1.25rem;
  font-weight: 500;
  margin-top: 2rem;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.5;
}

/* product 1 */

.p-top {
  width: 100%;
  /* margin: 0 auto; */
  /* background-color: antiquewhite; */
  min-height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.p-top>.p-name {
  font-size: 5rem;
  font-weight: 900;
}

.p-top>p {
  text-align: center;
  line-height: 30px;
  width: 70%;
  color: #6b6084;
  font-size: 20px;
}

.learn-more-btn {
  color: #0047ff;
  font-size: 20px;
  font-weight: 700;
  /* margin-top: 30px; */
}

.p-bottom {
  width: 100%;
  /* margin: 0 auto; */
  background-color: #f9f7ff;
  min-height: 65vh;
}

.p-mask {
  width: 100%;
  /* min-height: 45vh; */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.p-mask::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-image: url(../assets/onedrill.png); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.product-name {
  font-size: 10vw;
  text-transform: uppercase;
  font-weight: 900;
  color: #0d02250f;
  z-index: 1;
  -webkit-user-select: none;
          user-select: none;
}

/* product 2 */

.pro2 {
  background-color: #f9f7ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p1 {
  width: 90%;
  margin: 0 auto;
  text-wrap: nowrap;
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
}

.pro2-left {
  width: 50%;
  /* background-color: antiquewhite; */
}

.pname {
  font-size: 2.5rem;
  font-weight: 700;
  -webkit-text-stroke: 1px;
  color: #0d0225;
}

.pro2-container {
  display: flex;
  align-items: center;
  /* background-color: #0d0225; */
  width: 90%;
  /* column-gap: 60px; */
  margin: 0 auto;
  justify-content: space-between;
}

.pro2-left>p {
  font-size: 20px;
  line-height: 40px;
  color: #6b6084;
}

.pro2-right {
  /* width: 50%;
    height: 100%; */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* background-color: #6B6084; */
  position: relative;
}

/* product 3 */

.pro3 {
  /* background-color: #F3EDFF; */
  display: flex;
  flex-direction: column;
  /* position: sticky;
  top: 100; */
}

.pro3-right {
  width: 50%;
  height: 100%;
  /* background-color: #6B6084; */
  position: relative;
  display: flex;
  justify-content: center;
}

.pro3-right-img {
  width: 80%;
  height: 50vh;
}

.pro-comp-des {
  color: #6b6084;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slice {
  position: absolute;
  font-size: 8vw;
  font-weight: 900;
  color: #0d02250f;
  text-transform: uppercase;
  -webkit-user-select: none;
          user-select: none;
}

/* @media (min-width: 1024px) {
    .product-name{
        font-size: 12rem;
    }
} */

/* mobile product designs */

.mobile-product {
  display: none;
}

.mobile-product-section1 {
  min-height: calc(100vh - 1rem);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* background-color: #0047ff; */
}

.mobile-product-title {
  color: #0d0225;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.mobile-overview--title {
  color: #0d0225;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.mobile-product-overview>p {
  color: #6b6084;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 179%;
}

.mobile-product-card {
  min-height: calc(100vh - 1rem);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  z-index: 1;
  top: 11.5%;
  background-color: #fff;
}

.mb-product-card-title {
  color: rgba(13, 2, 37, 0.06);
  font-size: 7vw;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.mb-pro-img-box {
  /* background-color: #0047FF; */
  height: 25vh;
  width: 80%;
  margin: 0 auto;
}

.mb-pro-img-box>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pro-head {
  color: #0d0225;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  margin-left: 20px;
}

.pro-para {
  width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro-para>p {
  color: #6b6084;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 179%;
}

.mb-pro-read-more {
  border-radius: 6px;
  background: #0047ff;
  width: 90%;
  margin: 0 auto;
  height: 40px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1024px) {
  /* .product_container {
    display: none;
  } */

  .mobile-product {
    display: block;
  }

  /* .product_description > p {
    height: 100%;
  } */
  .mobile-product-section1 {
    min-height: 100%;
  }

  .product_section {
    height: 37rem;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
  }

  .product_description>p {
    font-size: 1rem;
    /* margin-left: 50%; */
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* background-color: aqua; */
  }

  .product_description>p>div {
    font-size: 1.25rem;
    margin-bottom: 0rem;
  }

  .mob-hidden {
    display: none;
  }
}
/* sideBar.css - cleaned & mobile-friendly sidebar panel + overlay fixes */

/* Base sidebar container (fixed at top so it overlays content when opened) */
.sidebar-container {
  display: none;
  color: #000;
  z-index: 99999;
  /* base z-index; increased when shown */
  padding: 1rem;
  transition: transform 0.28s ease, background-color 0.28s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  background-color: white;
  width: 100%;
  /* allow dropdown section to scroll separately */
}

/* When hidden — slide up out of view */
.sidebar-container.hide {
  transform: translateY(-100%);


}

/* When visible: make it cover the viewport and stay above content */
.sidebar-container.show {
  transform: translateY(0);
  /* height: 100vh;              */
  /* full viewport height when visible */
  max-height: 100vh;
  overflow: hidden;
  /* inner area will scroll, not the body */
  z-index: 200000;
  /* ensure it sits above other layers */
}

/* Prevent background page scroll when this class added to body */
.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
  position: relative !important;
  touch-action: none !important;
}

/* Header area (logo + icons) - first child inside .sidebar-container */
.sidebar-container>div:first-child {
  z-index: 200010;
  position: relative;
  display: block;
}

/* Dropdown/main nav content area - second child of container */
.sidebar-container>div:nth-child(2) {
  display: none;
  /* default hidden; shown when showDropdown true by JS */
  max-height: calc(100vh - 72px);
  /* leave room for header; adjust 72px as needed */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* smooth scrolling on iOS */
  background: #fff;
  padding-bottom: 2rem;
}

/* Make dropdown visible when container is visible and JS shows the inner div */
.sidebar-container.show>div:nth-child(2) {
  display: block;
}

/* Remove default scrollbar visual on desktop where desired */
.side-bar-item-containers::-webkit-scrollbar,
.sidebar-container>div:nth-child(2)::-webkit-scrollbar {
  display: none;
}

/* Individual item styles */
.side-bar-item-containers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.side-bar-items {
  padding: 20px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #0d0225;
}

.sub-side-bar-items {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0d0225;
  box-sizing: border-box;
}

/* thin horizontal separator between groups */
.horizontal-line {
  border-top: 1px solid #E0E0E0;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* small arrow rotation helper */
.arrow {
  transform: rotate(90deg);
}

/* Top header logo sizing adjustments for mobile */
@media screen and (max-width: 475px) {
  .nav-logo1 {
    width: 140px;
    height: 30px;
  }

  .nav-logo-text1 {
    font-size: 10px;
  }
}

/* Show sidebar container on tablet/mobile breakpoints */
@media screen and (max-width: 1024px) {
  .sidebar-container {
    display: block;
  }

  /* make the header area compact */
  .sidebar-container>div:first-child {
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
  }

  /* ensure the dropdown content uses full width and full height below header */
  .sidebar-container>div:nth-child(2) {
    width: 100%;
    max-height: calc(100vh - 64px);
    /* tweak 64px to match your header size */
  }

  /* style nav items for touch targets */
  .side-bar-items {
    padding: 14px 16px;
    font-size: 16px;
  }

  .sub-side-bar-items {
    padding: 13px 16px 16px 36px;
    font-size: 16px;
  }
}

/* Desktop behaviour - keep the sidebar visually small (you already hide it on desktop) */
@media screen and (min-width: 1025px) {
  .sidebar-container {
    display: none !important;
  }
}
/* mobileLeadModal.css - Mobile-first styles with logo image top */

/* overlay */
.mlm-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(13, 2, 37, 0.6) !important;
    z-index: 300000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0.5rem;
}

/* panel */
.mlm-panel {
    width: 100%;
    max-width: 920px;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    position: relative;
    display: flex;
    align-items: stretch;
}

/* close */
.mlm-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #1b1b2b;
}

/* inner layout */
.mlm-inner {
    display: flex;
    flex: 1 1;
    min-height: 0;
}

/* left image area */
.mlm-left {
    width: 40%;
    background: linear-gradient(135deg, #0d0225 0%, #2d1b69 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 1rem; */
}

.mlm-left-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) contrast(1.05);
}

/* right content */
.mlm-right {
    width: 60%;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    box-sizing: border-box;
}

/* top logo image (replaces text logo) */
.mlm-top-logo {
    text-align: center;
    margin-bottom: 6px;
}

.mlm-top-logo-img {
    height: 20px;
    width: auto;
    display: inline-block;
}

/* headings */
.mlm-title {
    margin: 6px 0 0;
    font-size: 18px;
    color: #0d0225;
    font-weight: 700;
    font-family: EuclidMedium;
    font-style: normal;
}

.mlm-sub {
    margin: 6px 0 8px;
    color: #6b7082;
    font-size: 13px;
}

/* progress */
.mlm-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
}

.mlm-progress {
    flex: 1 1;
    height: 6px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
}

.mlm-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #1e6bff, #b27dff);
    transition: width .35s ease;
}

.mlm-step-text {
    font-size: 12px;
    color: #999;
}

/* form */
.mlm-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mlm-label {
    font-weight: 600;
    color: #1b1b2b;
    font-size: 13px;
    margin-top: 6px;
}

.mlm-input {
    border: none;
    border-bottom: 2px solid #0047FF;
    padding: 10px 6px;
    font-size: 15px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
}

.mlm-textarea {
    border: 2px solid #0047FF;
    border-radius: 8px;
    padding: 10px;
    min-height: 80px;
    resize: vertical;
}

/* phone */
.mlm-phone {
    width: 100%;
    box-sizing: border-box;
}

/* errors */
.mlm-error {
    border-color: #e74c3c !important;
}

.mlm-error-msg {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 6px;
}

/* actions */
.mlm-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 12px;
}

.mlm-btn {
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mlm-btn.primary {
    background: #0047FF;
    color: white;
    box-shadow: 0 8px 20px rgba(0, 71, 255, 0.18);
}

.mlm-btn.ghost {
    background: transparent;
    border: 1px solid #ccc;
    color: #333;
}

/* small screens: stack and make left image smaller */
@media (max-width: 520px) {
    .mlm-panel {
        border-radius: 10px;
        width: 100%;
        height: 100%;
    }

    .mlm-inner {
        flex-direction: column;
    }

    .mlm-left {
        width: 100%;
        height: 32%;
        padding: 8px;
    }

    .mlm-right {
        width: 100%;
        padding: 12px;
    }

    .mlm-top-logo-img {
        height: 18px;
    }

    .mlm-title {
        font-size: 16px;
    }
}

/* body lock fallback */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none !important;
}
.project-page-hero-section {
  width: 100%;
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 5vw;
  font-weight: 600;
}

.project-page-hero-section>div {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}

.project-page-content-container {
  display: flex;
  padding: 3rem;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
  position: relative;
  /* Ensure the parent provides a positioning context */
  overflow: visible;
  /* Prevent overflow from interfering with sticky */
}

.service-page-main-dots-container {
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.service-page-dept-container {
  display: flex;
  column-gap: 0.5rem;
  position: relative;
  margin-right: 3rem;
  transition: all 0.25s linear;
}

.service-page-dept-name {
  position: absolute;
  left: 2.5rem;
  font-family: EuclidSemibold;
  color: #0047ff;
  padding: 1rem;
  border-radius: 2rem;
  background-color: #ebf1ff;
  transform: translate(0%, -50%);
  white-space: nowrap;
}

.service-page-main-dots {
  width: 14px;
  height: 14px;
  background-color: #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.service-page-main-dots.service-page-main-dots-active {
  background-color: #0047ff;
}

.department-section {
  width: 100%;
  min-height: 100vh;
}

.project-item-tab {
  font-size: 20px;
  font-family: EuclidMedium;
  padding: 0.75rem 1.5rem;
  background: #f5f5f5;
  border-radius: 0.5rem;
  transition: all 0.3s;
  min-width: -moz-fit-content;
  min-width: fit-content;
  cursor: pointer;
  border: none;
  margin-right: 10px;
}

.project-item-tab.project-item-tab-active {
  color: #0047ff;
  background: #E5E5E5;
}

.product-dep-name {
  font-family: EuclidSemibold;
  font-style: normal;
  font-size: 2rem;
  color: #C5C3C9;
  padding: 15px 30px;
  border-bottom: 2px solid lightgray;
}

.department-separator {
  border: none;
  border-top: 1px solid #E5E5E5;
  margin: 1rem 0;
}

.mobile-navigation-tabs {
  display: none;

}

.mobile-navigation-tabs>div {
  padding: 10px 14px;
  border-radius: 5px;
  color: #0d0225;
  background-color: #f5f5f5;
  font-size: 18px;
  font-family: EuclidSemibold;
}

.active-service-mob-tab {
  color: #0047ff;
  background-color: #ebf1ff;
}

.category-buttons-container {
  display: flex;
  padding: 1.5rem;
  column-gap: 6px;
  overflow-x: hidden;

  z-index: 1;
  background: #fff;
}



.category-buttons-container::-webkit-scrollbar {
  display: none;
}

/* @media screen and (max-width: 1024px) {
  .project-page-hero-section {
    height: 37rem;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .project-item-tab{
    font-size: 10px;
    font-family: EuclidMedium;
    padding:2px;
    background: #f5f5f5;
    border-radius: 5px;
    transition: all 0.3s;
    min-width: -moz-fit-content;
    min-width: fit-content;
    cursor: pointer;
    border: none;
    margin-right: 5px;
    height: 26px;
  }

  .project-page-content-container {
    padding: 1.5rem;
  }

  .service-page-main-dots-container {
    display: none;
  }

  .mobile-navigation-tabs {
    display: flex;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 1;
    background: #fff;
    transform: translateY(-100%);
    overflow: hidden;
  }
  /* .mobile-navigation-tabs::-webkit-scrollbar-button{
    display: none
  }; 

  .product-dep-name {
    display: none;
  }
} */
/* ====== Mobile-first overrides for very small phones (<= 320px) ====== */
@media (max-width: 320px) {
  .project-page-hero-section {
    height: 60vh;
    font-size: 8vw;
    /* slightly larger relative text for tiny screens */
    padding: 1rem;
    text-align: center;
  }

  .project-page-content-container {
    flex-direction: column;
    padding: 1rem;
    align-items: stretch;
    min-height: auto;
  }

  .service-page-main-dots-container {
    display: none;
    /* hide vertical dots on tiny screens */
    position: static;
    top: auto;
    transform: none;
  }

  .service-page-dept-container {
    margin-right: 0;
    padding: 0.5rem 0;
  }

  .service-page-dept-name {
    left: 1rem;
    transform: translate(0%, -40%);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .mobile-navigation-tabs {
    display: block;
    width: 100%;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .category-buttons-container {
    padding: 0.5rem;
    overflow-x: auto;
    column-gap: 6px;
  }

  .project-item-tab {
    font-size: 14px;
    padding: 0.5rem 0.9rem;
  }

  .product-dep-name {
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
  }
}

/* ====== Small phones & large small screens (321px - 767px) ====== */
@media (min-width: 321px) and (max-width: 767px) {
  .project-page-hero-section {
    height: 65vh;
    font-size: 7.5vw;
    padding: 1.25rem;
    text-align: center;
  }

  .project-page-content-container {
    flex-direction: column;
    padding: 1.5rem;
    align-items: stretch;
  }

  .service-page-main-dots-container {
    display: flex;
    position: static;
    /* remove sticky for better UX */
    transform: none;
    margin: 0.5rem 0;
    width: auto;
    flex-direction: row;
    column-gap: 0.5rem;
  }

  .service-page-main-dots {
    width: 12px;
    height: 12px;
  }

  .service-page-dept-name {
    left: 1.25rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
  }

  .mobile-navigation-tabs {
    display: block;
  }

  .category-buttons-container {
    overflow-x: auto;
    padding: 1rem;
  }

  .product-dep-name {
    font-size: 1.5rem;
    padding: 1rem 1.25rem;
  }

  .project-item-tab {
    font-size: 15px;
    padding: 0.6rem 1rem;
  }
}

/* ====== Tablet (768px - 1023px) ====== */
@media (min-width: 768px) and (max-width: 1023px) {
  .project-page-hero-section {
    height: 75vh;
    font-size: 5.5vw;
    padding: 2rem;
    text-align: left;
  }

  .project-page-content-container {
    flex-direction: row;
    padding: 2rem;
    align-items: flex-start;
  }

  .service-page-main-dots-container {
    display: flex;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    width: 4.5rem;
  }

  .service-page-main-dots {
    width: 13px;
    height: 13px;
  }

  .service-page-dept-name {
    left: 2rem;
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
  }

  .mobile-navigation-tabs {
    display: none;
    /* hide mobile tabs on tablet - use desktop layout */
  }

  .category-buttons-container {
    padding: 1.25rem;
    overflow-x: auto;
  }

  .product-dep-name {
    font-size: 1.75rem;
    padding: 1rem 1.5rem;
  }

  .project-item-tab {
    font-size: 16px;
    padding: 0.7rem 1.2rem;
  }
}

/* ====== Desktop (1024px - 1919px) ====== */
@media (min-width: 1024px) and (max-width: 1919px) {
  .project-page-hero-section {
    height: 100vh;
    font-size: 5vw;
    /* original */
    padding: 3rem;
    text-align: left;
  }

  .project-page-content-container {
    flex-direction: row;
    padding: 3rem;
    align-items: flex-start;
    min-height: 100vh;
  }

  .service-page-main-dots-container {
    display: flex;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    width: 5rem;
  }

  .service-page-main-dots {
    width: 14px;
    height: 14px;
  }

  .service-page-dept-container {
    margin-right: 3rem;
  }

  .service-page-dept-name {
    left: 2.5rem;
    padding: 1rem;
    font-size: 1rem;
  }

  .mobile-navigation-tabs {
    display: none;
  }

  .category-buttons-container {
    padding: 1.5rem;
    overflow-x: hidden;
  }

  .product-dep-name {
    font-size: 2rem;
    padding: 15px 30px;
  }

  .project-item-tab {
    font-size: 20px;
    padding: 0.75rem 1.5rem;
  }
}

/* ====== Ultra-wide / Large displays (>= 1920px) ====== */
@media (min-width: 1920px) {
  .project-page-hero-section {
    height: 100vh;
    font-size: 3.6rem;
    /* larger absolute size for big screens */
    padding: 4rem;
  }

  .project-page-content-container {
    padding: 4rem 6rem;
    /* max-width: 1400px; */
    /* margin: 0 auto; */
  }

  .service-page-main-dots-container {
    width: 5.5rem;
    top: 50%;
  }

  .service-page-main-dots {
    width: 16px;
    height: 16px;
  }

  .service-page-dept-name {
    left: 3rem;
    padding: 1.1rem 1.4rem;
    font-size: 1.15rem;
  }

  .product-dep-name {
    font-size: 2.25rem;
    padding: 20px 40px;
  }

  .project-item-tab {
    font-size: 22px;
    padding: 0.9rem 1.75rem;
  }
}

/* Utility improvements that help responsiveness across breakpoints */
.category-buttons-container {
  -webkit-overflow-scrolling: touch;
  /* smooth scrolling on mobile */
}

/* Make scrollbar hidden only where you intended it */
.category-buttons-container::-webkit-scrollbar {
  height: 6px;
}

/* For accessibility: ensure focus outlines on interactive items */
.project-item-tab:focus,
.service-page-main-dots:focus {
  outline: 2px solid #0047ff;
  outline-offset: 2px;
}


/* @media screen and (max-width: 1024px) {
  .project-page-hero-section {
    height: 37rem;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .project-item-tab {
    font-size: 0.8rem;
    font-family: EuclidMedium;
    padding: 5px;
    background: #F5F5F5;
    border-radius: 5px;
    transition: all 0.3s;
    min-width: -moz-fit-content;
    min-width: fit-content;
    cursor: pointer;
    border: none;
    margin-right: 0px;
    height: 26px;
  }

  .project-page-content-container {
    padding: 1.5rem;
  }

  .service-page-main-dots-container {
    display: none;
  }

  .mobile-navigation-tabs {
    display: flex;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 1;
    background: #fff;
    transform: translateY(-100%);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mobile-navigation-tabs::-webkit-scrollbar {
    display: none;
  }

 
  .product-dep-name {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .category-buttons-container {
    display: flex;
    padding: 0;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 1;
    background: #fff;

  }


} */
.reusable-art-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3rem;
  gap: 3rem;
  padding: 3rem 5rem;
}
.reusable-art-card {
  width: 100%;
}
.reusable-art-img-container {
  width: 100%;
  border-radius: 1rem;
}
.reusable-art-img-container > img {
  aspect-ratio: 16/9;
}
.reusable-art-title {
  font-family: EuclidSemiBold;
  font-size: 1.75rem;
  text-align-last: left;
}
.reusable-art-des {
  color: #6b6084;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1rem 0 0 0;
  font-size: 1.25rem;
  font-family: EuclidMedium;
}
.reusable-art-content-container {
  padding: 1rem 0rem;
}
.reusable-art-know-more {
  color: #0047ff;
  font-weight: 600;
  padding: 0.5rem 0rem;
  width: -moz-fit-content;
  width: fit-content;
}
.reusable-art-know-more:hover {
  color: #fff;
  background-color: #0047ff;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5rem;
  border-radius: 5px;
}
.reusable-art-img-container {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.all-know-more {
  display: flex;
  align-items: center;

}

/* know more */
/* 
 .reusable-art-img-container {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  cursor: none;
}
.reusable-art-img-container img {
  aspect-ratio: 16/9;
  width: 100%;
  display: block;
  border-radius: 1rem;
}

.know-more-circle {
    position: absolute;
  width: 80px;
  height: 80px;
  background-color: #0047ff;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  opacity: 1;
  transition: transform 0.1s linear;
  pointer-events: none;
}

.reusable-art-img-container:hover .know-more-circle {
  opacity: 1;
}
 */


 /* dyamic css */
 

@media screen and (max-width: 1024px) {
  .reusable-art-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    gap: 1rem;
    padding: 1rem;
  }
  .reusable-art-title {
    font-size: 16px;
  }
  .reusable-art-des {
    font-size: 14px;
  }
}

.service-hero-container {
  height: 100vh;
  /* background-color: #0d0225; */
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
  color: white;
  padding: 0rem 5rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 
.service-hero-secton {
  display: flex;
  justify-content: space-between;
  padding-top: 100px;
  margin: 0px 80px;
} */

.service-hero-section {
  width: 100%;
  /* background-color: #0047ff; */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-title {
  font-size: 5vw;
  font-weight: 600;
  width: 100%;
  -webkit-text-stroke: 2px;
  letter-spacing: 1px;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.service-overview-title {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 500;
  margin-top: 2rem;
  /* margin-left: 50%; */
  font-family: EuclidMedium;
  -webkit-user-select: none;
          user-select: none;
  line-height: 1.5;
}

.service-section1-content-box {
  width: 60%;
  height: 100%;
}
.service-cat-des {
  margin-top: 20px;
  font-size: 1.25rem;
  display: -webkit-box;
  /* -webkit-line-clamp: 5; */
  color: rgba(255, 255, 255, 0.6);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;  
  line-height: 2rem;
  
}
.service-section-left {
  width: 100%;
  height: 100%;
  /* background-color: green; */
}
.service-page-content-container {
  display: flex;
  padding: 5rem;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
}
.service-page-main-dots-container {
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;  
  /* margin-top: 30vh; */
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.service-page-dept-container {
  display: flex;
  column-gap: 0.5rem;
  position: relative;
  margin-right: 3rem;
  /* transition: linear 0.25s; */
  transition: all 0.25s linear;
}
.service-page-dept-name {
  position: absolute;
  left: 2.5rem;
  font-family: EuclidSemibold;
  color: #0047ff;
  padding: 1rem;
  border-radius: 2rem;
  background-color: #ebf1ff;
  transform: translate(0%, -50%);
  white-space: nowrap;
}
.all-service-dept-title {
  font-family: EuclidSemibold;
  font-size: 2rem;
  color: #dcd9e3;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 1rem 0rem;
}
.service-page-main-dots {
  width: 14px;
  height: 14px;
  background-color: #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.service-page-main-dots.service-page-main-dots-active {
  background-color: #0047ff;
  /* transform: scale(1.2); */
}
.service-section-left > p {
  color: rgba(255, 255, 255, 0.6);
  /* font-size: 1.1rem; */
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
  width: 60%;
}

.service-section-right {
  width: 40%;
  height: 100%;
  /* background-color: #6b6084; */
  display: flex;
  justify-content: center;
}

.service-section-right-imgbox {
  width: 400px;
  height: 400px;
  /* background-color: aqua; */
}

.service-section-right-imgbox > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-hero-content {
  width: 1022px;
  opacity: 0.6;
  font-size: 20px;
  line-height: 179%;
}

.service-hero-img {
  margin-right: 80px;
  margin-top: 120px;
}

/* .all-services {
  min-height: 100vh;
  width: 90%;
  margin: 0 auto;
} */

.component-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.component-map-container {
  width: 40%;
  margin: 83px 0px;
}

.component-image-container {
  width: 800px;
  height: 520px;
  object-fit: cover;
  border-radius: 25px;
}

.component-title {
  font-size: 40px;
  line-height: 160%;
  font-weight: 600;
  margin: 30px 0px;
}

.component-heading {
  color: #6b6084;
  font-size: 22px;
  line-height: 180%;
  line-break: 1.5px;
  width: 790px;
}

.component-btn {
  height: 48px;
  width: 261px;
  display: flex;
  align-items: center;
  color: #0047ff;
  margin: 40px 0px;
}

.feature-btn {
  justify-content: end;
}

.feature-image-container {
  margin-top: 100px;
  border-radius: 21px;
  width: 100%;
  height: 520px;
}

.component-btn:hover {
  color: white;
  background: #0047ff;
  justify-content: center;
  border-radius: 10px;
}
.mobile-navigation-tabs {
  display: none;
 
  

}
.mobile-navigation-tabs > div {
  padding: 10px 14px;
  border-radius: 5px;
  color: #0d0225;
  background-color: #f5f5f5;
  font-size: 18px;
  font-family: EuclidSemibold;
}
.active-service-mob-tab {
  color: #0047ff;
  background-color: #ebf1ff;
}

@media (max-width: 1024px) {
  .service-hero-container {
    /* padding: 30px; */
    height: 37rem;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .service-title {
    font-size: 28px;
    -webkit-text-stroke: 1px;
    line-height: normal;
  }

  .service-overview-title {
    font-size: 18px;
  }

  .service-hero-section {
    width: 100%;
    min-height: 100%;
  }

  .service-section1-content-box {
    flex-direction: column-reverse;
    /* gap: 40px; */
    /* margin-top: 50px; */
  }
  .service-section1-content-box {
    width: 100%;
  }
  .service-section-right {
    width: 90%;
    /* background-color: #0047ff; */
  }

  .service-section-left {
    width: 100%;
  }

  .service-section-left > p {
    color: rgba(255, 255, 255, 0.6);
    /* font-size: 14px; */
    font-style: normal;
    font-weight: 400;
    width: 100%;
  }
  .service-section-right-imgbox {
    display: none;
  }
  .service-section-left > p,
  .service-overview-title {
    margin-left: none;
  }
  .service-page-main-dots-container {
    display: none;
  }
  .service-page-content-container {
    /* display: flex; */
    padding: 1.5rem;
    /* justify-content: flex-start; */
    /* align-items: start; */
  }
  .mobile-navigation-tabs {
    display: flex;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 1;
    background: #fff;
    transform: translateY(-100%);
  }
  .all-service-dept-title {
    display: none;
  }
}

/* @media screen and (min-width: 800px) and (max-width: 1600px) {

  .service-hero-container {
    height: 650px;
  }

  .service-hero-content {
    width: 800px;
    line-height: 150%;
  }

  .service-title {
    font-size: 100px;
  }

  .service-hero-secton {
    padding-top: 50px;
  }

  .service-hero-img {
    width: 350px;
  }

  .component-image-container {
    width: 650px;
    height: 420px;
  }

  .component-heading {
    width: 590px;
  }
} */

.all-service-box {
  /* background-color: aquamarine; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  width: 100%;
  /* margin: 0rem auto; */
  flex-wrap: wrap;
  grid-gap: 40px;
  gap: 40px;
}

.service-card {
  /* background-color: green; */
  min-height: 430px;
}

.service-card-img-box {
  width: 100%;
  /* height: 380px; */
  border-radius: 21px;
  overflow: hidden;
}

.service-card-img-box > img {
  width: 100%;
  height: 100%;
  border-radius: 21px;
  object-fit: contain;
  aspect-ratio: 1.64 / 1;
  transition: 0.3s ease-in-out;
  margin-top: 10px;
}
.service-card-img-box > img:hover {
  transform: scale(1.2);
}
.service-content-box {
  margin-top: 30px;
}

/* Mobile devices (up to 768px) */
@media (max-width: 768px) {
  .all-service-box {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px;
  }

  .service-card {
    min-height: 300px;
  }

  .service-card-img-box {
    height: 200px;
  }
}

/* Tablet devices (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .all-service-box {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 15px;
  }

  .service-card {
    min-height: 350px;
  }

  .service-card-img-box {
    height: 250px;
  }
}

/* @media (max-width: 1024px) {
  .all-service-box {
    display: flex;
    flex-direction: column;
    row-gap: 0px;
    margin: 0rem auto;
  }

  .service-card {
    width: 100%;
    margin-bottom: 0px;
  }

  .service-card-img-box {
    width: 100%; */
     /* height: 210px; */
  /* }
} */

/* Laptop and above (1025px and up) */
@media (min-width: 1025px) {
  .all-service-box {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 20px;
  }

  .service-card {
    min-height: 430px;
  }

  .service-card-img-box {
    height: 380px;
  }
}

.all-services {
  /* min-height: 100vh; */
  width: 100%;
  /* margin: 5rem 0%; */
  display: flex;
  flex-direction: column;
  row-gap: 40px;
  margin-bottom: 3rem;
}

.feature-service {
  width: 90%;
  min-height: 430px;
  margin: 0px auto;
  display: flex;
  margin-top: 40px;
  flex-direction: column;
  justify-content: space-between;
}

.feature-service-img-box {
  width: 100%;
  height: 380px;
  border-radius: 21px;
}

.feature-service-img-box > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 21px;
}

.feature-content {
  margin-top: 20px;
}

.feature-title {
  color: #0d0225;
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
}

.feature-para {
  color: #6b6084;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 137%;
  margin-top: 15px;
  /* width: 70%; */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.know-more {
  color: #0047ff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
  background-color: transparent;
  -webkit-user-select: none;
          user-select: none;
  display: flex;
  align-items: flex-end;
  padding-top: 1rem;
  cursor: pointer;
}
.know-more:hover {
  text-shadow: 2px -1px 27px rgba(0, 71, 255, 0.64);
}

.feature-service-grid {
  width: 90%;
  background-color: #0047ff;
  height: 400px;
  margin: 0 auto;
}

.know-more-mobile {
  display: none;
}

@media (max-width: 1024px) {
  .feature-service {
    /* background-color: #0047FF; */
  }

  .feature-title {
    color: #0d0225;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 159.8%;
  }

  .feature-service-img-box {
    width: 100%;
    height: 210px;
  }

  .feature-first-title > .know-more {
    display: none;
  }

  .feature-para {
    /* background-color: #0047FF; */
    width: 100%;
    font-size: 14px;
  }

  .know-more {
    font-size: 14px;
  }

  .know-more-mobile {
    display: block;
    color: #0047ff;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 30px;
  }
}

.product-details {
  width: 100%;
  min-height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
}

.product-details2 {
  margin: 0 auto;
  /* margin-top: 30px; */
  width: 90%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.single-product-name {
  font-size: 5vw;
  font-weight: 600;
  color: #fff;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 15px;
  margin-bottom: 10px;
}

.product-category {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 1rem;
  margin-bottom: 1rem;
}

.rotate-text {
  width: 90%;
  margin: 0 auto;
}

.desc {
  line-height: 30px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}

.product-3d-img {
  width: 90%;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.split-screen-carousel {
  width: 90%;
  margin: 0 auto;
}

.split {
  min-height: 50vh;
  display: flex;
}

.text-area {
  width: 40%;
  display: flex;
  padding: 0px 30px;
  flex-direction: column;
  justify-content: space-between;
}

.image-area {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  border-radius: 19px;
  background: rgba(13, 2, 37, 0.04);
}

.image-area > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.paras > p:nth-child(1) {
  font-weight: 900;
  color: #0d0225;
  font-size: 22px;
}

.paras > p {
  color: #6b6084;
  line-height: 30px;
}

.skip {
  color: #0047ff;
}

.full-desc {
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

.pro-title {
  font-size: 28px;
  font-weight: 900;
}

.prodesc {
  margin-top: 15px;
  font-size: 18px;
  line-height: 30px;
  padding-bottom: 10%;
  color: #6b6084;
  width: 60%;
}

.single-pro-overview {
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 1rem;
  margin-bottom: 1rem;
}

.single-pro-container {
  width: 100%;
  display: flex;
}

.single-pro-container2 {
  width: 50%;
}
.single-pro-container2 > p {
  color: rgba(255, 255, 255, 0.6);
  /* color: #fff; */
  font-size: 20px;
  line-height: 0.9cm;
}
.mobile-rotate-text {
  color: rgba(13, 2, 37, 0.2);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: end;
}
.remaining-products-card-container {
  display: flex;
  gap: 2rem;
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  margin-bottom: 5rem;
  padding: 0 1rem;
}
.remaining-products-card-container::-webkit-scrollbar {
  display: none;
}
.single-product-card {
  width: 300px;
  flex: 0 0 auto;
}
.single-product-card-img-container {
  width: 100%;
  height: 20rem;
}
.single-product-card-title {
  font-family: EuclidSemiBold;
  font-size: 1.5rem;
  margin-top: 1.5rem;
}
.single-product-card-des {
  color: #6b6084;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 2rem;
}
.remaining-products-card-container-holder {
  padding: 0rem 5rem;
}
.single-other-service-title {
  font-size: 3rem;
  color: #dcd9e3;
  font-family: EuclidSemiBold;
  padding-bottom: 5rem;
}

/* product container page */
.cat-product_container {
  width: 100%;
  position: relative;
}
.cat-product_section {
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.cat-p-section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 5rem;
  box-sizing: border-box;
}
.cat-product_text {
  font-size: 5vw;
  font-weight: 600;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}
.cat-product_description {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.cat-product_description > p {
  line-height: 1.8rem;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 50%;
}
.cat-product_description > p > div {
  color: #fff;
  font-size: 1.5rem;
  font-family: EuclidMedium;
  margin-left: none;
  margin-bottom: 1.25rem;
}

.product-category-main-container {
  box-sizing: border-box;
  /* padding: 0rem 5rem; */
  width: 100%;
}
.product-categoryPage-container {
  display: flex;
  column-gap: 1rem;
  align-items: flex-start;
  margin: 3rem 0rem;
}
.product-category-img-container {
  width: 35%;
  overflow: hidden;
}
.product-category-content-container {
  width: 65%;
  padding-top: 2rem;
  border-top: 2px solid #cadbea;
}
.product-category-content-container > p {
  width: 70%;
  margin-top: 20px;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-category-img-container > img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  transition: 0.3s ease;
}
.product-category-img-container > img:hover {
  transform: scale(1.2);
}
.category-title {
  padding-top: 3rem;
  font-size: 2rem;
  font-family: EuclidSemiBold;
  color: #dcd9e3;
}
.product-category-content-title {
  font-size: 2.5rem;
  font-family: EuclidMedium;
}
.product-category-productName-container {
  width: 60%;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 1rem 0rem;
}
.product-category-productName-container > div {
  padding: 0.5rem 1rem;
  background-color: #f5f5f5;
  border-radius: 5px;
  color: #000;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.product-category-productName-container > div:hover {
  background-color: #e8eeff;
  color: #0047ff;
}
.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-box img {
  width: 40%;
  min-height: 40vh;
  padding: 25px;
}
.mobile-navigation-tabs {
  display: none;
 
  

}

.active-service-mob-tab {
  color: #0047ff;
  background-color: #ebf1ff;
}

/* Tablet (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .product-details {
    min-height: calc(100vh - 70px);
  }

  .single-product-name {
    font-size: 36px;
  }
  .service-page-main-dots-container {
    display: none;
  }
  .product-category {
    font-size: 18px;
  }
  .mobile-navigation-tabs {
    display: flex;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 1;
    background: #fff;
    transform: translateY(-100%);
  }


  .single-pro-overview {
    font-size: 24px;
  }

  .desc {
    font-size: 16px;
  }

  .single-pro-container2 {
    width: 70%;
  }

  .mobile-rotate-text {
    font-size: 16px;
  }

  .pro-title {
    font-size: 20px;
  }

  .prodesc {
    font-size: 16px;
    width: 80%;
  }

  .split {
    flex-direction: column;
  }

  .image-area {
    width: 100%;
  }

  .img-box img {
    width: 60%;
    height: auto;
  }

  .text-area {
    width: 100%;
    padding: 0 20px;
  }

  .paras > p:nth-child(1) {
    font-size: 18px;
    margin-top: 20px;
  }

  .paras > p {
    font-size: 16px;
  }

  .remaining-products-card-container {
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .single-product-card {
    min-width: 250px;
  }

  .remaining-products-card-container-holder {
    padding: 0 2rem;
  }

  .single-other-service-title {
    font-size: 2rem;
    padding-bottom: 3rem;
  }

  .product-categoryPage-container {
    flex-direction: column;
  }

  .product-category-img-container,
  .product-category-content-container {
    width: 100%;
  }

  .product-category-content-container {
    padding-top: 1.5rem;
  }

  .product-category-main-container {
    padding: 0 2rem;
  }

  .single-product-card-img-container {
    height: 15rem;
  }

  .product-category-content-title {
    font-size: 1.8rem;
  }

  .category-title {
    padding-top: 2rem;
    font-size: 1.5rem;
  }

  .cat-p-section {
    height: 500px;
    padding: 2rem;
  }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
  .product-details {
    min-height: calc(100vh - 70px);
  }

  .single-product-name {
    font-size: 28px;
    font-weight: 600;
  }

  .service-page-main-dots-container {
    display: none;
  }
  
  .service-page-content-container {
    display: block;
    padding: 0;    
    width: 100%;
  }
  .mobile-navigation-tabs {
    display: flex;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 1;
    background: #fff;
    transform: translateY(-100%);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
 

  .single-product-card-des {
    -webkit-line-clamp: 3;
    max-width: 70%;
    line-height: 1.5em;
    font-size: 10px;
    margin-left: 45px;
  }

  .product-category {
    font-size: 14px;
  }

  .single-pro-overview {
    font-size: 18px;
  }

  .desc {
    font-size: 14px;
    line-height: 179%;
  }

  .single-pro-container {
    justify-content: flex-start;
  }

  .single-pro-container2 {
    width: 100%;
  }

  .mobile-rotate-text {
    text-align: center;
    font-size: 14px;
  }

  .pro-title {
    font-size: 16px;
    margin-top: 32px;
  }

  .prodesc {
    font-size: 14px;
    width: 100%;
  }

  .split {
    flex-direction: column;
  }

  .image-area {
    width: 100%;
  }

  .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .text-area {
    width: 100%;
    padding: 0;
  }

  .paras > p:nth-child(1) {
    font-size: 16px;
    margin-top: 15px;
  }

  .paras > p {
    font-size: 14px;
  }

  .skip {
    display: none;
  }

  .remaining-products-card-container {
    gap: 1rem;
    padding: 0 0.5rem;
  }

  .single-product-card {
    min-width: 300px;
    
  }

  .remaining-products-card-container-holder {
    padding: 1.5rem;
    
  }

  .single-other-service-title {
    font-size: 1.5rem;
    margin: 1rem 0;
    padding-bottom: 0.5rem;
  }

  .product-categoryPage-container {
    flex-direction: column;
    margin: 1.5rem 0;
  }

  .product-category-img-container,
  .product-category-productName-container {
    width: 100%;
  }

  .product-category-content-container {
    width: 100%;
    padding-top: 1rem;
    border-top: none;
  }

  .product-category-main-container {
    padding: 0 1.5rem;
  }

  .single-product-card-img-container {
    width: 100%;
    height: auto;
  }

  .single-product-card-img-container > img {
    aspect-ratio: 16/9;
  }

  .product-category-content-title {
    font-size: 1.5rem;
  }

  .category-title {
    padding-top: 1.5rem;
    font-size: 1.2rem;
  }

  .cat-product_description {
    display: none;
  }

  .cat-p-section {
    top: 80px;
    height: 400px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .single-product-card-title {
    font-size: 20px;
    padding-left: 45px;
  }

  .product-category-content-container > p {
    width: 100%;
  }
}

/* Laptop and above (1025px and up) */
@media (min-width: 1025px) {
  .remaining-products-card-container {
    gap: 2rem;
    padding: 0 1rem;
  }

  .single-product-card {
    width: 300px;
  }

  .remaining-products-card-container-holder {
    padding: 0 5rem;
  }

  .single-other-service-title {
    font-size: 3rem;
    padding-bottom: 0;
  }
}
.suggestion-casestudys-container-1 {
  margin: 0 auto;
  position: relative;
  padding: 2rem 8rem;
  background: #ffffff;
}

.suggestion-casestudys-title-1 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #dcd9e3;
  font-family: EuclidSemiBold;
  margin-bottom: 2rem;
  padding: 2rem 0;
  text-align: left;
}

.header-with-arrows-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-controls {
  display: flex;
  gap: 1rem;
}

.carousel-arrow {
  width: 3rem;
  height: 3rem;
  border: 1px solid #6b6084;
  background: transparent;
  color: #6b6084;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-arrow:hover {
  border-color: #000;
  color: #000;
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #6b6084;
  color: #6b6084;
}

.suggestion-casestudys-scroll-wrapper-1 {
  position: relative;
}

.suggestion-casestudys-scroll-1 {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.suggestion-casestudys-scroll-1::-webkit-scrollbar {
  display: none;
}

.suggestion-casestudy-card-1 {
  min-width: 209px;
  height: 344px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  background: #fff;
}

.suggestion-casestudy-card-1:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.suggestion-casestudy-card-1:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 10%;
  height: 80%;
  width: 2px;
  background: #d1d5db;
}

.suggestion-casestudy-card-1 img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 12px 12px 0 0;
}

.suggestion-casestudy-card-1 .content-1 {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.suggestion-casestudy-card-1 h3 {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  font-family: EuclidSemiBold, sans-serif;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggestion-casestudy-card-1 p {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.4;
}


.suggestion-casestudy-know-more-1 {
  font-size: 0.9rem;
  color: #0047ff;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.3s ease;
  padding-bottom: 20px;
}

.suggestion-casestudy-know-more-1:hover {
  color: #002b99;
}

.suggestion-casestudys-empty-1 {
  padding: 1rem;
  color: #888;
}

/* Mobile (≤320px) */
@media (max-width: 320px) {
  .suggestion-casestudys-container-1 {
    padding: 1rem;
  }

   .suggestion-casestudys-container-1 h2  {
    font-size: 1.25rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    text-align: left;
  }

  .header-with-arrows-1 {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .carousel-controls {
    gap: 0.5rem;
    padding-bottom: 14%;
  }

  .carousel-arrow {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  .suggestion-casestudys-scroll-1 {
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .suggestion-casestudy-card-1 {
    min-width: 100%;
    scroll-snap-align: center;
    height: auto;
  }

  .suggestion-casestudy-card-1 img {
    height: 140px;
  }

  .suggestion-casestudy-card-1 .content-1 {
    padding: 1rem;
    gap: 1rem;
  }

  .suggestion-casestudy-card-1 h3 {
    font-size: 0.95rem;
  }

  .suggestion-casestudy-card-1 p {
    font-size: 0.75rem;
  }

  .suggestion-casestudy-know-more-1 {
    font-size: 0.85rem;
  }
}






.suggestion-casestudy-card-1 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.suggestion-casestudy-card-1 .content-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 1rem;
  gap: 1rem;
  background-color: #ffffff;
}

.suggestion-casestudy-card-1 h3 {
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

.suggestion-casestudy-card-1 p {
  margin: 0;
}




.suggestion-casestudy-card-1 {
  min-width: 209px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  background: #fff;
}

.suggestion-casestudy-card-1 img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: 12px 12px 0 0;
}

.suggestion-casestudy-card-1 .content-1 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  gap: 0.3rem;
  background-color: #ffffff;
  overflow: hidden;
  padding-top: 30px;
}

.suggestion-casestudy-card-1 h3 {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  font-family: EuclidSemiBold, sans-serif;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggestion-casestudy-card-1 p {
  padding-top: 0px;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggestion-casestudy-know-more-1 {
  font-size: 0.9rem;
  color: #0047ff;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.3s ease;
}

.knowmore{
  color: #0047ff;
}
.suggestion-casestudys-container-2{
  margin: 0 auto;
  position: relative;
  padding: 2rem 8rem;
  background: #ffffff;
}

.suggestion-casestudys-title-2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #dcd9e3;
  font-family: EuclidSemiBold;
  margin-bottom: 2rem;
  padding: 2rem 0;
  text-align: left;
}

.header-with-arrows-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-controls {
  display: flex;
  gap: 1rem;
}

.carousel-arrow {
  width: 3rem;
  height: 3rem;
  border: 1px solid #6b6084;
  background: transparent;
  color: #6b6084;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.carousel-arrow:hover {
  border-color: #000;
  color: #000;
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #6b6084;
  color: #6b6084;
}

.suggestion-casestudys-scroll-wrapper-2 {
  position: relative;
}

.suggestion-casestudys-scroll-2 {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.suggestion-casestudys-scroll-2::-webkit-scrollbar {
  display: none;
}

.suggestion-casestudy-card-2 {
  min-width: 380px;
  height: 344px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  background: #fff;
}

.suggestion-casestudy-card-2:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.suggestion-casestudy-card-2:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 10%;
  height: 80%;
  width: 2px;
  background: #d1d5db;
}

.suggestion-casestudy-card-2 img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.suggestion-casestudy-card-2 .content-2 {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.suggestion-casestudy-card-2 h3 {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  font-family: EuclidSemiBold, sans-serif;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggestion-casestudy-card-2 p {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.4;
}


.suggestion-casestudy-know-more-2 {
  font-size: 0.9rem;
  color: #0047ff;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.3s ease;
  padding-bottom: 20px;
}

.suggestion-casestudy-know-more-2:hover {
  color: #002b99;
}

.suggestion-casestudys-empty-2 {
  padding: 1rem;
  color: #888;
}

/* Mobile (≤320px) */
@media (max-width: 320px) {
  .suggestion-casestudys-container-2 {
    padding: 1rem;
  }

   .suggestion-casestudys-container-2 h2  {
    font-size: 1.25rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    text-align: left;
  }

  .header-with-arrows-2 {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .carousel-controls {
    gap: 0.5rem;
    padding-bottom: 14%;
  }

  .carousel-arrow {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  .suggestion-casestudys-scroll-2 {
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .suggestion-casestudy-card-2 {
    min-width: 100%;
    scroll-snap-align: center;
    height: auto;
  }

  .suggestion-casestudy-card-2 img {
    height: 140px;
  }

  .suggestion-casestudy-card-2 .content-2 {
    padding: 1rem;
    gap: 1rem;
  }

  .suggestion-casestudy-card-2 h3 {
    font-size: 0.95rem;
  }

  .suggestion-casestudy-card-2 p {
    font-size: 0.75rem;
  }

  .suggestion-casestudy-know-more-2 {
    font-size: 0.85rem;
  }
}






.suggestion-casestudy-card-2 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.suggestion-casestudy-card-2 .content-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 1rem;
  gap: 1rem;
  background-color: #ffffff;
}

.suggestion-casestudy-card-2 h3 {
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
}

.suggestion-casestudy-card-2 p {
  margin: 0;
}




.suggestion-casestudy-card-2 {
  min-width: 380px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  background: #fff;
}

.suggestion-casestudy-card-2 img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.suggestion-casestudy-card-2 .content-2 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  gap: 0.3rem;
  background-color: #ffffff;
  overflow: hidden;
  padding-top: 30px;
}

.suggestion-casestudy-card-2 h3 {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  font-family: EuclidSemiBold, sans-serif;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggestion-casestudy-card-2 p {
  padding-top: 0px;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggestion-casestudy-know-more-2 {
  font-size: 0.9rem;
  color: #0047ff;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  transition: color 0.3s ease;
}

.knowmore{
  color: #0047ff;
}
/* Product Inquiry Modal Styles */

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

/* Modal Container */
.modal-container {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Header */
.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"dots\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"%23ffffff\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url%28%23dots%29\"/></svg>");
  pointer-events: none;
}

.modal-title {
  position: relative;
  z-index: 1;
  flex: 1 1;
  margin-right: 20px;
}

.modal-title h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.modal-title p {
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.4;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.modal-close-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.modal-close-btn span {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

/* Modal Content */
.modal-content {
  padding: 0;
  max-height: calc(90vh - 100px);
  overflow-y: auto;
}

/* Form Styles */
.inquiry-form {
  padding: 30px;
}

/* Form Sections */
.form-section {
  margin-bottom: 35px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
  display: inline-block;
}

/* Form Rows */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

/* Form Groups */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #ffffff;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #adb5bd;
  font-style: italic;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

/* Submit Status */
.submit-status {
  margin: 20px 0;
  padding: 15px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.submit-status.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.submit-status.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-icon {
  font-size: 1.2rem;
  font-weight: bold;
}

.success-message,
.error-message {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.btn-primary,
.btn-secondary {
  padding: 12px 30px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f8f9fa;
  color: #6c757d;
  border: 2px solid #e9ecef;
}

.btn-secondary:hover:not(:disabled) {
  background: #e9ecef;
  transform: translateY(-1px);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Responsive Design */

/* Large Screens (1200px and up) */
@media (min-width: 1200px) {
  .modal-container {
    max-width: 900px;
  }
  
  .modal-title h2 {
    font-size: 2rem;
  }
  
  .modal-title p {
    font-size: 1.1rem;
  }
  
  .inquiry-form {
    padding: 40px;
  }
  
  .section-title {
    font-size: 1.4rem;
  }
}

/* Desktop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .modal-container {
    max-width: 800px;
  }
  
  .modal-header {
    padding: 25px 30px;
  }
  
  .modal-title h2 {
    font-size: 1.7rem;
  }
  
  .inquiry-form {
    padding: 35px;
  }
}

/* Tablet Landscape (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .modal-overlay {
    padding: 15px;
  }
  
  .modal-container {
    max-width: 100%;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 20px 25px;
  }
  
  .modal-title h2 {
    font-size: 1.5rem;
  }
  
  .modal-title p {
    font-size: 0.95rem;
  }
  
  .inquiry-form {
    padding: 25px;
  }
  
  .form-row {
    gap: 15px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 14px;
    font-size: 0.95rem;
  }
}

/* Tablet Portrait (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .modal-overlay {
    padding: 10px;
  }
  
  .modal-container {
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .modal-title {
    margin-right: 0;
  }
  
  .modal-title h2 {
    font-size: 1.4rem;
  }
  
  .modal-title p {
    font-size: 0.9rem;
  }
  
  .modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  
  .inquiry-form {
    padding: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .section-title {
    font-size: 1.2rem;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 14px 20px;
  }
}

/* Mobile Large (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  .modal-overlay {
    padding: 8px;
  }
  
  .modal-container {
    max-height: 98vh;
  }
  
  .modal-header {
    padding: 15px;
  }
  
  .modal-title h2 {
    font-size: 1.3rem;
  }
  
  .modal-title p {
    font-size: 0.85rem;
  }
  
  .modal-close-btn {
    width: 35px;
    height: 35px;
    top: 12px;
    right: 12px;
  }
  
  .modal-close-btn span {
    font-size: 1.3rem;
  }
  
  .inquiry-form {
    padding: 15px;
  }
  
  .form-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
  }
  
  .section-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  
  .form-group textarea {
    min-height: 80px;
  }
}

/* Mobile Medium (400px to 479px) */
@media (min-width: 400px) and (max-width: 479px) {
  .modal-overlay {
    padding: 5px;
  }
  
  .modal-container {
    border-radius: 15px;
  }
  
  .modal-header {
    padding: 12px;
  }
  
  .modal-title h2 {
    font-size: 1.2rem;
  }
  
  .modal-title p {
    font-size: 0.8rem;
  }
  
  .modal-close-btn {
    width: 32px;
    height: 32px;
    top: 10px;
    right: 10px;
  }
  
  .modal-close-btn span {
    font-size: 1.2rem;
  }
  
  .inquiry-form {
    padding: 12px;
  }
  
  .form-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  
  .section-title {
    font-size: 1rem;
    margin-bottom: 12px;
  }
  
  .form-group {
    margin-bottom: 12px;
  }
  
  .form-group label {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  
  .form-group textarea {
    min-height: 70px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
}

/* Mobile Small (360px to 399px) */
@media (min-width: 360px) and (max-width: 399px) {
  .modal-overlay {
    padding: 3px;
  }
  
  .modal-container {
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 10px;
  }
  
  .modal-title h2 {
    font-size: 1.1rem;
  }
  
  .modal-title p {
    font-size: 0.75rem;
  }
  
  .modal-close-btn {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
  }
  
  .modal-close-btn span {
    font-size: 1.1rem;
  }
  
  .inquiry-form {
    padding: 10px;
  }
  
  .form-section {
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
  
  .section-title {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
  
  .form-group {
    margin-bottom: 10px;
  }
  
  .form-group label {
    font-size: 0.85rem;
    margin-bottom: 5px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 7px 8px;
    font-size: 0.8rem;
  }
  
  .form-group textarea {
    min-height: 60px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

/* Mobile Extra Small (320px to 359px) */
@media (min-width: 320px) and (max-width: 359px) {
  .modal-overlay {
    padding: 2px;
  }
  
  .modal-container {
    border-radius: 10px;
  }
  
  .modal-header {
    padding: 8px;
  }
  
  .modal-title h2 {
    font-size: 1rem;
  }
  
  .modal-title p {
    font-size: 0.7rem;
  }
  
  .modal-close-btn {
    width: 28px;
    height: 28px;
    top: 6px;
    right: 6px;
  }
  
  .modal-close-btn span {
    font-size: 1rem;
  }
  
  .inquiry-form {
    padding: 8px;
  }
  
  .form-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
  }
  
  .section-title {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
  
  .form-group {
    margin-bottom: 8px;
  }
  
  .form-group label {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 6px 7px;
    font-size: 0.75rem;
  }
  
  .form-group textarea {
    min-height: 50px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* Very Small Screens (below 320px) */
@media (max-width: 319px) {
  .modal-overlay {
    padding: 1px;
  }
  
  .modal-container {
    border-radius: 8px;
  }
  
  .modal-header {
    padding: 6px;
  }
  
  .modal-title h2 {
    font-size: 0.9rem;
  }
  
  .modal-title p {
    font-size: 0.65rem;
  }
  
  .modal-close-btn {
    width: 25px;
    height: 25px;
    top: 4px;
    right: 4px;
  }
  
  .modal-close-btn span {
    font-size: 0.9rem;
  }
  
  .inquiry-form {
    padding: 6px;
  }
  
  .form-section {
    margin-bottom: 12px;
    padding-bottom: 8px;
  }
  
  .section-title {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }
  
  .form-group {
    margin-bottom: 6px;
  }
  
  .form-group label {
    font-size: 0.75rem;
    margin-bottom: 3px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 5px 6px;
    font-size: 0.7rem;
  }
  
  .form-group textarea {
    min-height: 40px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}

/* Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .modal-container {
    max-height: 95vh;
  }
  
  .modal-content {
    max-height: calc(95vh - 80px);
  }
  
  .inquiry-form {
    padding: 15px;
  }
  
  .form-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .modal-container {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .modal-container {
    background: #2d2d2d;
    color: #ffffff;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    background: #3d3d3d;
    border-color: #555;
    color: #ffffff;
  }
  
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: #888;
  }
  
  .section-title {
    color: #ffffff;
  }
  
  .form-group label {
    color: #ffffff;
  }
  
  .form-section {
    border-bottom-color: #555;
  }
  
  .form-actions {
    border-top-color: #555;
  }
  
  .btn-secondary {
    background: #3d3d3d;
    color: #ffffff;
    border-color: #555;
  }
  
  .btn-secondary:hover:not(:disabled) {
    background: #555;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .modal-container,
  .btn-primary,
  .btn-secondary,
  .form-group input,
  .form-group select,
  .form-group textarea {
    transition: none;
  }
  
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
  
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    transform: none;
  }
  
  .spinner {
    animation: none;
  }
}

/* Print Styles */
@media print {
  .modal-overlay {
    display: none;
  }
}

/* Accessibility Improvements */
@media (prefers-contrast: high) {
  .modal-container {
    border: 2px solid #000;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    border-width: 2px;
  }
  
  .btn-primary,
  .btn-secondary {
    border: 2px solid #000;
  }
}

/* Focus Visible for Better Accessibility */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
  
  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.95);
  }
  
  .modal-close-btn:hover {
    transform: none;
  }
  
  .modal-close-btn:active {
    transform: scale(0.9);
  }
}

/* Know More Section Styles */

.know-more-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
}

.know-more-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grain\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"%23ffffff\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url%28%23grain%29\"/></svg>");
  pointer-events: none;
}

.know-more-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 60px;
  gap: 60px;
  align-items: center;
}

/* Content Section */
.know-more-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.know-more-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.know-more-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  line-height: 1.2;
  background: #31088f;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.know-more-description {
  font-size: 1.2rem;
  color: #6c757d;
  line-height: 1.6;
  margin: 0;
}

.know-more-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  gap: 15px;
  margin-top: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(102, 126, 234, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
}

.feature-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: #000;
}

.feature-text {
  font-weight: 600;
  color: #6c757d;
  font-size: 0.95rem;
}

/* Actions Section */
.know-more-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.know-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 30px;
  border: none;
  border-radius: 15px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  min-height: 60px;
}

.know-more-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.know-more-btn:hover::before {
  left: 100%;
}

.know-more-btn.primary {
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  background: linear-gradient(135deg, rgba(49, 8, 139, 1) 0%, rgba(13, 2, 37, 1) 80%, rgba(13, 2, 37, 1) 100%);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.know-more-btn.primary:hover {
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
  transform: translateY(-3px);
}

.know-more-btn.secondary {
  background: #ffffff;
  color: rgba(49, 8, 139, 1);
  border: 2px solid rgba(13, 2, 37, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.know-more-btn.secondary:hover {
  background: rgba(49, 8, 139, 1);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  transform: translateY(-3px);
}

.btn-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.btn-text {
  /* flex: 1; */
  text-align: center;
}

.btn-arrow {
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.know-more-btn:hover .btn-arrow {
  transform: translateX(5px);
}

/* Visual Section */
.know-more-visual {
  position: relative;
  height: 500px;
}

.visual-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-preview {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.product-preview:hover {
  transform: scale(1.05);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-preview:hover .product-image {
  transform: scale(1.1);
}

.product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #ffffff;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.product-preview:hover .product-overlay {
  transform: translateY(0);
}

.overlay-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.overlay-content p {
  font-size: 1rem;
  margin: 0;
  opacity: 0.9;
}

/* Floating Elements */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.floating-element {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c3e50;
  animation: float 3s ease-in-out infinite;
}

.floating-element span:first-child {
  font-size: 1.5rem;
}

.element-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.element-2 {
  top: 20%;
  right: 15%;
  animation-delay: 0.5s;
}

.element-3 {
  bottom: 30%;
  left: 5%;
  animation-delay: 1s;
}

.element-4 {
  bottom: 15%;
  right: 10%;
  animation-delay: 1.5s;
}

.element-5 {
  top: 20%;
  right: 6%;
  animation-delay: 0.5s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Responsive Design */

/* Large Screens (1200px and up) */
@media (min-width: 1200px) {
  .know-more-section {
    padding: 100px 0;
  }

  .know-more-container {
    max-width: 1600px;
    padding: 0 40px;
    gap: 80px;
  }

  .know-more-title {
    font-size: 3rem;
  }

  .know-more-description {
    font-size: 1.3rem;
  }

  .know-more-visual {
    height: 600px;
  }

  .product-preview {
    width: 350px;
    height: 350px;
  }
}

/* Desktop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .know-more-container {
    gap: 50px;
  }

  .know-more-title {
    font-size: 2.2rem;
  }

  .know-more-description {
    font-size: 1.1rem;
  }

  .know-more-visual {
    height: 450px;
  }

  .product-preview {
    width: 280px;
    height: 280px;
  }
}

/* Tablet Landscape (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .know-more-section {
    padding: 60px 0;
  }

  .know-more-container {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 25px;
  }

  .know-more-title {
    font-size: 2rem;
    text-align: center;
  }

  .know-more-description {
    font-size: 1rem;
    text-align: center;
  }

  .know-more-features {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
    margin: 0 auto;
  }

  .know-more-actions {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .know-more-btn {
    flex: 1 1;
    max-width: 250px;
  }

  .know-more-visual {
    height: 400px;
  }

  .product-preview {
    width: 250px;
    height: 250px;
  }
}

/* Tablet Portrait (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .know-more-section {
    padding: 50px 0;
  }

  .know-more-container {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 0 20px;
  }

  .know-more-title {
    font-size: 1.8rem;
    text-align: center;
  }

  .know-more-description {
    font-size: 0.95rem;
    text-align: center;
  }

  .know-more-features {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
  }

  .feature-item {
    padding: 10px 14px;
  }

  .know-more-actions {
    flex-direction: column;
    gap: 15px;
  }

  .know-more-btn {
    padding: 14px 25px;
    font-size: 1rem;
    min-height: 55px;
  }

  .know-more-visual {
    height: 350px;
  }

  .product-preview {
    width: 220px;
    height: 220px;
  }

  .floating-element {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .floating-element span:first-child {
    font-size: 1.2rem;
  }
}

/* Mobile Large (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  .know-more-section {
    padding: 40px 0;
  }

  .know-more-container {
    gap: 30px;
    padding: 0 15px;
  }

  .know-more-title {
    font-size: 1.6rem;
  }

  .know-more-description {
    font-size: 0.9rem;
  }

  .know-more-features {
    gap: 10px;
  }

  .feature-item {
    padding: 8px 12px;
  }

  .feature-icon {
    font-size: 1.3rem;
  }

  .feature-text {
    font-size: 0.9rem;
  }

  .know-more-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
    min-height: 50px;
  }

  .know-more-visual {
    height: 300px;
  }

  .product-preview {
    width: 200px;
    height: 200px;
  }

  .floating-element {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .floating-element span:first-child {
    font-size: 1.1rem;
  }
}

/* Mobile Medium (400px to 479px) */
@media (min-width: 400px) and (max-width: 479px) {
  .know-more-section {
    padding: 35px 0;
  }

  .know-more-container {
    gap: 25px;
    padding: 0 12px;
  }

  .know-more-title {
    font-size: 1.4rem;
  }

  .know-more-description {
    font-size: 0.85rem;
  }

  .know-more-features {
    gap: 8px;
  }

  .feature-item {
    padding: 6px 10px;
  }

  .feature-icon {
    font-size: 1.2rem;
  }

  .feature-text {
    font-size: 0.85rem;
  }

  .know-more-btn {
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 45px;
  }

  .know-more-visual {
    height: 250px;
  }

  .product-preview {
    width: 180px;
    height: 180px;
  }

  .floating-element {
    padding: 5px 8px;
    font-size: 0.7rem;
  }

  .floating-element span:first-child {
    font-size: 1rem;
  }
}

/* Mobile Small (360px to 399px) */
@media (min-width: 360px) and (max-width: 399px) {
  .know-more-section {
    padding: 30px 0;
  }

  .know-more-container {
    gap: 20px;
    padding: 0 10px;
  }

  .know-more-title {
    font-size: 1.2rem;
  }

  .know-more-description {
    font-size: 0.8rem;
  }

  .know-more-features {
    gap: 6px;
  }

  .feature-item {
    padding: 5px 8px;
  }

  .feature-icon {
    font-size: 1.1rem;
  }

  .feature-text {
    font-size: 0.8rem;
  }

  .know-more-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    min-height: 40px;
  }

  .know-more-visual {
    height: 220px;
  }

  .product-preview {
    width: 160px;
    height: 160px;
  }

  .floating-element {
    padding: 4px 6px;
    font-size: 0.65rem;
  }

  .floating-element span:first-child {
    font-size: 0.9rem;
  }
}

/* Mobile Extra Small (320px to 359px) */
@media (min-width: 320px) and (max-width: 359px) {
  .know-more-section {
    padding: 25px 0;
  }

  .know-more-container {
    gap: 18px;
    padding: 0 8px;
  }

  .know-more-title {
    font-size: 1.1rem;
  }

  .know-more-description {
    font-size: 0.75rem;
  }

  .know-more-features {
    gap: 5px;
  }

  .feature-item {
    padding: 4px 6px;
  }

  .feature-icon {
    font-size: 1rem;
  }

  .feature-text {
    font-size: 0.75rem;
  }

  .know-more-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-height: 35px;
  }

  .know-more-visual {
    height: 200px;
  }

  .product-preview {
    width: 140px;
    height: 140px;
  }

  .floating-element {
    padding: 3px 5px;
    font-size: 0.6rem;
  }

  .floating-element span:first-child {
    font-size: 0.8rem;
  }
}

/* Very Small Screens (below 320px) */
@media (max-width: 319px) {
  .know-more-section {
    padding: 20px 0;
  }

  .know-more-container {
    gap: 15px;
    padding: 0 6px;
  }

  .know-more-title {
    font-size: 1rem;
  }

  .know-more-description {
    font-size: 0.7rem;
  }

  .know-more-features {
    gap: 4px;
  }

  .feature-item {
    padding: 3px 5px;
  }

  .feature-icon {
    font-size: 0.9rem;
  }

  .feature-text {
    font-size: 0.7rem;
  }

  .know-more-btn {
    padding: 5px 10px;
    font-size: 0.75rem;
    min-height: 30px;
  }

  .know-more-visual {
    height: 180px;
  }

  .product-preview {
    width: 120px;
    height: 120px;
  }

  .floating-element {
    padding: 2px 4px;
    font-size: 0.55rem;
  }

  .floating-element span:first-child {
    font-size: 0.7rem;
  }
}

/* Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .know-more-section {
    padding: 30px 0;
  }

  .know-more-container {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .know-more-visual {
    height: 300px;
  }

  .product-preview {
    width: 200px;
    height: 200px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .product-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .know-more-section {
    /* background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); */
  }

  .know-more-title {
    color: #ffffff;
  }

  .know-more-description {
    color: #b0b0b0;
  }

  .feature-item {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.2);
    color: #ffffff;
  }

  .feature-item:hover {
    background: rgba(102, 126, 234, 0.1);
  }

  .floating-element {
    background: rgba(255, 255, 255, 0.1);
    color: #6c757d;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

  .know-more-btn,
  .feature-item,
  .product-preview,
  .floating-element {
    transition: none;
  }

  .know-more-btn:hover {
    transform: none;
  }

  .feature-item:hover {
    transform: none;
  }

  .product-preview:hover {
    transform: none;
  }

  .floating-element {
    animation: none;
  }
}

/* Print Styles */
@media print {
  .know-more-section {
    display: none;
  }
}

/* Accessibility Improvements */
@media (prefers-contrast: high) {
  .know-more-btn {
    border: 2px solid #000;
  }

  .feature-item {
    border: 2px solid #000;
  }

  .floating-element {
    border: 2px solid #000;
  }
}

/* Focus Visible for Better Accessibility */
.know-more-btn:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .know-more-btn:hover {
    transform: none;
  }

  .know-more-btn:active {
    transform: scale(0.95);
  }

  .feature-item:hover {
    transform: none;
  }

  .feature-item:active {
    transform: scale(0.98);
  }

  .product-preview:hover {
    transform: none;
  }
}
.case-study-section1 {
  width: 100%;
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
}

.case-study-section-overlay {
  width: 90%;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.case-study-title1 {
  color: #fff;
  font-size: 120px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.case-study-content-container {
  display: flex;
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 2rem 0;
}

.case-study-main-dots-container {
  position: sticky;
  top: 100px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: -moz-fit-content;
  height: fit-content;
  margin-right: 2rem;
}

.case-study-dept-container {
  display: flex;
  align-items: center;
  position: relative;
  margin: 10px 0;
}

.case-study-main-dots {
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.case-study-main-dots-active {
  background-color: #0047ff;
}

.case-study-dept-name {
  position: absolute;
  left: 20px;
  background-color: #fff;
  color: #000;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.case-study-category-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  /* color: #000; */
  color: #dcd9e3;
  border-bottom: 2px solid lightgrey;
  padding-bottom: 20px;
  padding-left: 30px;

}

.mobile-navigation-tabs {
  display: none;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 1rem 0;
  background-color: #f8f8f8;
}

.mobile-navigation-tabs > div {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  border-radius: 20px;
  transition: background-color 0.3s, color 0.3s;
}

.active-service-mob-tab {
  background-color: #0047ff;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .case-study-title1 {
    font-size: 2rem;
  }
  .case-study-section1 {
    width: 100%;
    height: 37rem;
  }
  .case-study-section-overlay {
    width: 90%;
    min-height: 37rem;
  }
  .mobile-navigation-tabs {
    display: block;
    position: sticky;
    top: 60px;
  }
  /* .mobile-navigation-tabs {
    display: flex  ;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 1;
    background: #fff;
    transform: translateY(-100%);
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  } */
  .case-study-main-dots-container {
    display: none;
  }
  .case-study-content-container {
    flex-direction: column;
    width: 100%;
  }
  .case-study-category-title {
    font-size: 1.5rem;
    margin-left: 30px;
  }
}
.specific-service-section1 {
  min-height: calc(100vh - 109px);
  width: 100%;
  background-color: #0d0225;
}

.specific-service-overlay {
  width: 90%;
  min-height: calc(100vh - 109px);
  margin: 0 auto;
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  padding-bottom: 5%;
  padding-top: 1%;
}

.specific-service-title {
  color: #fff;
  font-size: 120px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.specific-service-overview {
  color: #fff;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.specific-service-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 179%;
}

.get-a-free-quote {
  border-radius: 10px;
  background: #0047ff;
  width: 280px;
  padding: 12px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 30px;
}

.specific-service-content {
  width: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.specific-service-content-left {
  width: 60%;
}

.specific-service-content-right {
  width: 30%;
  /* background-color: #0047FF; */
}

.specific-service-content-img-box {
  width: 100%;
  height: 100%;
}

.specific-service-content-img-box>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.specific-service-section2 {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  padding-bottom: 10%;
  /* background-color: #0047FF; */
}

.what-we-do-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
  justify-content: space-between;
  /* row-gap: 80px; */
  grid-column-gap: 11rem;
  column-gap: 11rem;
}

.whatwedo {
  color: #0d0225;
  font-size: 3.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding: 80px 0px;
  -webkit-user-select: none;
          user-select: none;
}

.what-we-do-box {
  padding: 5rem 3rem;
  transition: background-color 0.2s ease;
  /* transition: ; */
}

.what-we-do-box:hover {
  background-color: #f8faff;
}

.what-title {
  color: #0d0225;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.what-para>p {
  color: #6b6084;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 20px;
}

.free-quote {
  color: #0047ff;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* what we do accordion for mobile */

.accordion-title {
  color: #0d0225;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.what-we-accordion-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-para>p {
  color: #6b6084;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 179%;
  padding-top: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.what-we-do-accordion-container {
  display: none;
}

.accordion-btn {
  border-radius: 6px;
  background: #0047ff;
  width: 140px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1024px) {

  /* .specific-service-content {
        flex-direction: column-reverse;
        padding: 30px;
    }

    .specific-service-overlay {
        width: 100%;
    }

    .specific-service-content-left {
        width: 100%;
    }

    .specific-service-content-right {
        width: 100%;
    }

    .specific-service-title {
        font-size: 4rem;
    } */
  .service-cat-des {
    font-size: 1rem;
  }

  .get-a-free-quote {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .whatwedo {
    font-size: 30px;
    padding: 1.5rem 0px;
    margin-top: 2rem;
  }

  .what-we-do-grid {
    display: none;
    margin-top: 60px;
    flex-direction: column;
  }

  .what-we-do-box {
    width: 100%;
  }

  .specific-service-section2 {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding-bottom: 0%;
    /* background-color: #0047FF; */
  }

  .what-we-do-accordion-container {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    margin-top: 0px;
  }
}
/* Articles Intro Section */
.article-section1 {
  width: 100%;
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
}

.article-section-overlay {
  width: 90%;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.article-title1 {
  color: #fff;
  font-size: 5vw;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

/* Article Content Container */
.article-page-content-container {
  display: flex;
  padding: 5rem;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
}

/* Dot Navigation */
.article-page-main-dots-container {
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.article-page-dept-container {
  display: flex;
  column-gap: 0.5rem;
  position: relative;
  margin-right: 3rem;
  transition: all 0.25s linear;
}

.article-page-main-dots {
  width: 14px;
  height: 14px;
  background-color: #D9D9D9;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.article-page-main-dots-active {
  background-color: #0047FF;
}

.article-page-dept-name {
  position: absolute;
  left: 2.5rem;
  font-family: EuclidSemibold;
  color: #0047FF;
  padding: 1rem;
  border-radius: 2rem;
  background-color: #EBF1FF;
  transform: translate(0%, -50%);
  white-space: nowrap;
}

/* Mobile Navigation Tabs */
.mobile-navigation-tabs {
  display: none;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 1rem 0;
  background-color: #F8F8F8;
  position: sticky;
  top: 0;
  z-index: 11;
}

.mobile-navigation-tabs > div {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.active-service-mob-tab {
  background-color: #0047FF;
  color: #fff;
}

/* HR Styling */
.custom-hr-container {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}

.custom-hr-label {
  font-family: EuclidSemibold;
  font-size: 2rem;
  color: #DCD9E3;
  border-bottom: 1px solid #E5E5E5;
  width: 100%;
}

.custom-hr {
  border: 0;
  border-top: 1px solid #E5E5E5;
  margin: 0;
}

/* Article Grid */
.article-grid {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.article-card {
  min-height: 380px;
  border-radius: 20px;
}

.article-card:nth-child(6n + 1) {
  min-height: 600px;
}

.article-card:nth-child(6n + 4) {
  grid-row: span 2;
}

.article-card:nth-child(6n + 6) {
  grid-column: span 2;
  min-height: 480px;
}

.article-img-box {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.article-img-box::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.19);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 20px;
}

.article-img-box > img {
  width: 80%;
  height: 60%;
  object-fit: cover;
  border-radius: 20px;
  z-index: 5;
}

.article-card-top {
  z-index: 5;
  display: flex;
  width: 90%;
  position: absolute;
  align-items: center;
  justify-content: space-between;
  top: 20px;
}

.article-tag {
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 3px 10px;
  color: #fff;
}

/* Department Title */
.all-article-dept-title {
  font-family: EuclidSemibold;
  font-size: 2rem;
  color: #DCD9E3;
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 1rem;
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
  .article-title1 {
    font-size: 2rem;
  }
  .article-section1 {
    width: 100%;
    height: 37rem;
  }
  .article-section-overlay {
    min-height: 37rem;
  }
  .mobile-navigation-tabs {
    display: flex;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 3;
    background: #fff;
  }
  .article-page-main-dots-container {
    display: none;
  }
  .article-page-content-container {
    padding: 1.5rem;
  }
  .all-article-dept-title {
    font-family: EuclidSemibold;
    font-size: 2rem;
    color: #DCD9E3;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 1rem;
  }
}

@media screen and (min-width: 1025px) {
  .article-section-all-departments {
    display: block;
  }
  .article-section-single-department {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .custom-hr-label {
    font-size: 1.5rem;
  }
}/* Articles Intro Section */
.article-section1 {
  width: 100%;
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
}

.article-section-overlay {
  width: 90%;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.article-title1 {
  color: #fff;
  font-size: 5vw;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

/* Article Content Container */
.article-page-content-container {
  display: flex;
  padding: 5rem;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100vh;
}

/* Dot Navigation */
.article-page-main-dots-container {
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.article-page-dept-container {
  display: flex;
  column-gap: 0.5rem;
  position: relative;
  margin-right: 3rem;
  transition: all 0.25s linear;
}

.article-page-main-dots {
  width: 14px;
  height: 14px;
  background-color: #D9D9D9;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.article-page-main-dots-active {
  background-color: #0047FF;
}

.article-page-dept-name {
  position: absolute;
  left: 2.5rem;
  font-family: EuclidSemibold;
  color: #0047FF;
  padding: 1rem;
  border-radius: 2rem;
  background-color: #EBF1FF;
  transform: translate(0%, -50%);
  white-space: nowrap;
}

/* Mobile Navigation Tabs */
.mobile-navigation-tabs {
  display: none;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 1rem 0;
  background-color: #F8F8F8;
  position: sticky;
  top: 0;
  z-index: 11;
}

.mobile-navigation-tabs > div {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.active-service-mob-tab {
  background-color: #0047FF;
  color: #fff;
}

/* HR Styling */
.custom-hr-container {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}

.custom-hr-label {
  font-family: EuclidSemibold;
  font-size: 2rem;
  color: #DCD9E3;
  border-bottom: 1px solid #E5E5E5;
  width: 100%;
}

.custom-hr {
  border: 0;
  border-top: 1px solid #E5E5E5;
  margin: 0;
}

/* Article Grid */
.article-grid {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.article-card {
  min-height: 380px;
  border-radius: 20px;
}

.article-card:nth-child(6n + 1) {
  min-height: 600px;
}

.article-card:nth-child(6n + 4) {
  grid-row: span 2;
}

.article-card:nth-child(6n + 6) {
  grid-column: span 2;
  min-height: 480px;
}

.article-img-box {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.article-img-box::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.19);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border-radius: 20px;
}

.article-img-box > img {
  width: 80%;
  height: 60%;
  object-fit: cover;
  border-radius: 20px;
  z-index: 5;
}

.article-card-top {
  z-index: 5;
  display: flex;
  width: 90%;
  position: absolute;
  align-items: center;
  justify-content: space-between;
  top: 20px;
}

.article-tag {
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 3px 10px;
  color: #fff;
}

/* Department Title */
.all-article-dept-title {
  font-family: EuclidSemibold;
  font-size: 2rem;
  color: #DCD9E3;
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 1rem;
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
  .article-title1 {
    font-size: 2rem;
  }
  .article-section1 {
    width: 100%;
    height: 37rem;
  }
  .article-section-overlay {
    min-height: 37rem;
  }
  .mobile-navigation-tabs {
    display: flex;
    padding: 1.5rem;
    column-gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 80px;
    z-index: 3;
    background: #fff;
  }
  .article-page-main-dots-container {
    display: none;
  }
  .article-page-content-container {
    padding: 1.5rem;
  }
  .all-article-dept-title {
    font-family: EuclidSemibold;
    font-size: 2rem;
    color: #DCD9E3;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 1rem;
  }
}

@media screen and (min-width: 1025px) {
  .article-section-all-departments {
    display: block;
  }
  .article-section-single-department {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .custom-hr-label {
    font-size: 1.5rem;
  }
}
.container {
  background-color: #0d0225;
  height: 100vh;
  color: #fff;
}
.not-found-box {
  color: white;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.number-style {
  font-size: 16rem;
  font-weight: 800;
}
.style-oops {
  font-size: 3rem;
  font-weight: 600;
}
.home-button {
  background-color: #0047ff;
  border: none;
  border-radius: 5px;
  color: #fff;
  padding: 10px 15px;
}
.warning-text {
  margin: 20px;
  font-size: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .number-style {
    font-size: 4rem;
    font-weight: 600;
  }
  .image-container {
    width: 150px;
  }
  .style-oops {
    font-size: 2rem;
    font-weight: 600;
  }

  .warning-text {
    margin: 15px;
    font-size: 0.75rem;
  }
}

.single-article-section {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
}

.single-article-section-overlay {
  width: 90%;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.single-article-title {
  color: #fff;
  font-size: clamp(2rem, 5vw, 5rem);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.single-article-heading-card-container {
  /* width: 100%;
  min-height: calc(100vh - 109px); */
  width: 100%;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.single-article-heading-card-container::after {
  content: "";
  position: absolute;
  height: 30%;
  width: 100%;
  background: linear-gradient(to top, #000000, transparent);
}

.single-article-heading {
  font-size: 3rem;
  /* font-size: clamp(2rem, 5vw, 5rem); */
  font-family: EuclidSemiBold;
  padding: 4rem;
  color: #fff;
  position: relative;
  z-index: 1;
  /* background: linear-gradient(to bottom, #0d022500, #0d0225cc); */
}

.single-article-main-title {
  font-family: EuclidSemiBold;
  font-size: 2rem;
}

.single-article-content-card-container {
  padding-left: 16rem;
  padding-right: 16rem;
  padding-top: 1rem;
}

.single-article-main-content-container {
  display: flex;
  column-gap: 7rem;
  padding: 3rem 0rem;
}

.single-article-main-content-content,
.single-article-layout-2-content-container {
  width: 100%;
}

.single-article-main-content-image,
.single-article-layout-2-image-contain {
  width: 50%;
}

.single-article-main-content-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.single-article-main-content-content-title {
  font-family: EuclidSemiBold;
  font-size: 2rem;
}

.single-article-layout-2 {
  display: flex;
  align-items: center;
  column-gap: 7rem;
}

.single-article-layout-2-image-container {
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.single-article-layout-2-image-container>img {
  width: 80%;
  object-fit: cover;
  border-radius: 10rem 0rem 10rem 0rem;
}

.single-article-layout-2-content-title {
  font-family: EuclidSemiBold;
  font-size: 2rem;
}

.single-article-layout-2-content-des {
  color: #6b6084;
}

.single-article-layout3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 7rem;
  gap: 7rem;
  padding: 5rem 0rem;
}

.single-article-layout3-num {
  color: #0047ff;
  font-size: 5rem;
}

.single-article-layout3-title {
  font-family: EuclidSemiBold;
  font-size: 2rem;
}

.single-article-layout4 {
  display: flex;
  align-items: center;
  column-gap: 7rem;
  flex-wrap: wrap;
}

.single-article-layout4>p,
.single-article-layout4>div {
  width: 50%;
  font-size: 18px;
  padding: 10px 0px;
  color: #6b6084;
  font-family: EuclidMedium;
  line-height: 35px;
}

.single-article-layout4-title {
  font-family: EuclidSemiBold;
  font-size: 1.5rem;
  margin: 2rem 0rem;
  padding: 0.5rem 1rem;
  position: relative;
}

.single-article-layout4-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 10px;
  background-color: #0047ff;
  border-radius: 5px;
}

.single-article-layout5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.single-article-layout5-title {
  font-family: EuclidSemiBold;
  font-size: 3rem;
  margin: 2rem 0rem;
  color: #dcd9e3;
}

.single-article-layout5-heading {
  font-family: EuclidSemiBold;
  font-size: 1rem;
}

.single-article-layout5-des {
  font-size: 18px;
  padding: 10px 0px;
  color: #6b6084;
  font-family: EuclidMedium;
  line-height: 35px;
  margin-top: 1rem;
}

/* Tablet Screens */
@media screen and (max-width: 1024px) {

  .single-article-title,
  .single-article-heading {
    font-size: 2rem;
    text-align: center;
  }

  .single-article-content-card-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .single-article-main-title {
    font-size: 1.5rem;
  }

  .single-article-main-content-container {
    flex-direction: column;
    gap: 2rem;
  }

  .single-article-main-content-content,
  .single-article-layout-2-content-container,
  .single-article-main-content-image,
  .single-article-layout-2-image-contain {
    width: 100%;
    box-sizing: border-box;
  }

  .single-article-layout-2 {
    flex-direction: column;
  }

  .single-article-layout3 {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 0;
  }

  .single-article-layout4 {
    flex-direction: column;
  }

  .single-article-layout4>p,
  .single-article-layout4>div {
    width: 100%;
    font-size: 14px;
    line-height: 30px;
  }

  .single-article-layout5 {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }

  .single-article-main-content-content-title,
  .single-article-layout-2-content-title,
  .single-article-layout3-title,
  .single-article-layout4-title {
    font-size: 1.5rem;
  }

  .single-article-layout3-num,
  .single-article-layout5-title {
    font-size: 2rem;
  }

  .single-article-layout-2-image-container {
    display: block;
  }

  .single-article-layout-2-image-container>img {
    width: 100%;
    object-fit: cover;
    border-radius: 0;
  }
}

/* Mobile Screens */
@media screen and (max-width: 600px) {

  .single-article-title,
  .single-article-heading {
    font-size: 1.5rem;
    text-align: center;
  }

  .single-article-main-title {
    font-size: 1.25rem;
  }

  .single-article-main-content-container {
    column-gap: 2rem;
    padding: 1rem 0;
  }

  .single-article-main-content-content-title,
  .single-article-layout-2-content-title,
  .single-article-layout3-title,
  .single-article-layout4-title {
    font-size: 1.25rem;
  }

  .single-article-layout3-num,
  .single-article-layout5-title {
    font-size: 1.5rem;
  }

  .single-article-layout5-heading {
    font-size: 0.9rem;
  }

  .single-article-layout5-des {
    font-size: 14px;
    line-height: 28px;
  }

  .single-article-layout-2-image-container>img {
    border-radius: 1rem;
  }
}
  .audio-container {
    width: 100%;
    margin: auto;
    /* padding: 1rem 10rem; */
    font-family: Arial, sans-serif;

  }

  .audio-title {
    opacity: 0.5;
    margin: 20px;
    padding: auto;
    font-size: 20px;
    padding: 10px 1px;
    font-size: bold;
    font-family: EuclidSemiBold;


  }

  /* default-audio-3 dots */

  .audio::-webkit-media-controls-mute-button,
  .audio::-webkit-media-controls-overflow-button {
    display: none !important;
  }


  .header-section {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    margin-bottom: 10px;
    gap: 200px;
  }


  .publisher-section {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .logo-container {
    width: 50px;
    height: 50px;
    margin-left: 20px;
  }

  .logo {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .publisher-info {
    display: flex;
    flex-direction: column;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #1e1e1e;
    font-family: EuclidSemiBold;
  }

  .subtitle {
    font-size: 14px;
    color: rgb(99, 64, 64);
  }


  .topics {
    font-size: 14px;

    margin-left: 20px;
    font-family: EuclidMedium;
  }

  .topic {
    margin-left: 5px;
    opacity: 0.8;
  }

  .topic span {
    color: #0047FF;
  }

  .topic-head {
    /* color: #0047FF; */
    color: #000;

  }


  .subscribe-button {
    background-color: #0047FF;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-family: EuclidSemiBold;
  }

  .subscribe-button:hover {
    background-color: #033872;
  }


  .details {
    font-size: 14px;
    color: #6B6084;
    margin-top: 5px;
    font-family: EuclidMedium;
  }



  .audio-title {
    font-family: EuclidSemiBold;
    opacity: 0.4;

  }

  .audio-controls {
    display: flex;
    align-items: center;
    gap: 10px;

  }

  .icon-button {
    background: none;
    border: none;
    cursor: pointer;
    color: #007bff;
  }

  .icon-button:hover {
    color: #0056b3;
  }

  .audio-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    background: none;
    border: none;
  }

  .audio {
    width: 100%;
    height: 30px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
  }

  .audio::-webkit-media-controls-panel {
    background: white;
  }

  .audio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  @media (max-width: 768px) {
    .header-section {
      flex-direction: column;
      align-items: flex-start;
    }

    .icons {
      display: none;
      margin: auto;

    }

    .subscribe-button {
      margin-top: 10px;
      width: 100%;
      margin-left: 2px;
    }

    .topics {
      margin-top: 5px;
    }

    .details {
      margin-top: 5px;
    }

    .audio-section {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      position: relative;
    }

    .audio {
      width: 100%;
    }

    .audio-controls {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }
  }



  @media (max-width: 480px) {

    .publisher-section {
      flex-direction: row;
      align-items: center;
    }

    .header-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
    }

    .topics {
      font-size: 12px;
    }

    .title {
      font-size: 14px;
    }

    .subtitle {
      font-size: 12px;
    }


    .audio-section {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      position: relative;
    }

    .audio {
      width: 90%;
    }

    .audio-controls {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }
  }
/* Container for the suggested case studies section */
.suggestion-casestudys-container-4 {
  margin: 0 auto;
  position: relative;
  padding: 2rem 8rem;
  background: #ffffff; /* From Other Case Studies */
}

/* Heading style */
.suggestion-casestudys-container-4 h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #DCD9E3; /* From Other Case Studies */
  font-family: EuclidSemiBold; /* From Other Case Studies */
  margin-bottom: 2rem;
  padding: 2rem 0;
  text-align: left;
}

/* Scrollable container wrapper for positioning arrows */
.suggestion-casestudys-scroll-wrapper-4 {
  position: relative;
}

/* Scrollable container for cards */
.suggestion-casestudys-scroll-4 {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 1.5rem;
  padding-bottom: 1rem;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  /* background-color: red; */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.suggestion-casestudys-scroll-4::-webkit-scrollbar {
  display: none;
}

/* Individual card styling */
.suggestion-casestudy-card-4 {
  min-width: 309px;
  height: 380px;

  border-radius: 12px; /* From Other Case Studies */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* From Other Case Studies */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* From Other Case Studies */
  position: relative;
}

/* Add vertical separator between cards, except for the last one */
.suggestion-casestudy-card-4:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px; /* Center in the 24px gap */
  top: 10%;
  height: 80%;
  width: 1px;
  background: #E5E7EB; /* Gray-200 */
}

.carousel-arrow-4 {
  width: 3rem;
  height: 3rem;
  border: 1px solid #6B6084;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  color: #6B6084;
  font-size: 1.5rem;
}
.carousel-controls-4 {
  display: flex;
  gap: 1rem;
}
.carousel-arrow-4:hover {
  border-color: #000;
  color: #000;
}

.carousel-arrow-4:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #6B6084;
  color: #6B6084;
}

/* Hover effect for cards */
.suggestion-casestudy-card-4:hover {
  transform: translateY(-6px); /* From Other Case Studies */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* From Other Case Studies */
}
.content-4 p a {
  display: inline;
  text-decoration: underline;
  color: blue; /* Adjust color as needed */
}
/* Card image styling */
.suggestion-casestudy-card-4 img {
  width: 120%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px 12px 0 0; /* From Other Case Studies */
}

/* Card content styling */
.suggestion-casestudy-card-4 .content {
  padding: 1.25rem; /* From Other Case Studies */
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* From Other Case Studies */
}

/* Card title styling */
.suggestion-casestudy-card-4 h3 {
  font-size: 1rem; /* From Other Case Studies */
  font-weight: 600;
  color: black; /* From Other Case Studies */
  font-family: EuclidSemiBold; /* From Other Case Studies */
  margin: 0;
  line-height: 1.3;
}

/* Card description styling */
.suggestion-casestudy-card-4 p {
  font-size: 0.9rem; /* From Other Case Studies */
  line-height: 1.5;
  color: #4A4A4A; /* From Other Case Studies */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Know more" link styling */
.suggestion-casestudy-card-4 a {
  color: #0047FF; /* From Other Case Studies */
  font-size: 0.95rem; /* From Other Case Studies */
  font-weight: 600;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease; /* From Other Case Studies */
  display: inline-block;
  margin-top: 0.5rem;
}

/* Hover effect for "Know more" link */
.suggestion-casestudy-card-4 a:hover {
  text-decoration: none; /* From Other Case Studies */
}
/* Header section with title and arrows */
.header-with-arrows-4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Container for the arrows */
.arrow-controls-4 {
  display: flex;
  gap: 10px;
  /* Space between the arrows */
}

/* Adjust arrow positioning for this layout */
.arrow-4 {
  position: relative; /* Override the absolute positioning used previously */
  top: auto;
  transform: none; /* Remove the translateY transform */
}

/* Ensure arrows remain circular and styled as before */
.arrow-left-4,
.arrow-right-4 {
  left: auto;
  right: auto;
}
/* No case studies message */
.suggestion-casestudys-scroll-4 p {
  font-size: 0.8rem;
  color: #4B5563; /* Gray-600 */
  text-align: left;
  width: 100%;
  padding: 0rem 0;
}

/* Mobile (≤767px) - Show only one card */
@media screen and (max-width: 767px) {
  .suggestion-casestudys-container-4 {
    padding: 1rem;
    max-width: 720px;
  }

  .suggestion-casestudys-container-4 h2 {
    font-size: 1.5rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
  }

  .header-with-arrows-4 {
    position: relative;
  }

  .carousel-controls-4 {
    gap: 0.5rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-arrow-4 {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
    border: 2px solid #6B6084;
  }

  .suggestion-casestudys-scroll-4 {
    gap: 1rem;
    padding-bottom: 0.5rem;
  }

  .suggestion-casestudy-card-4 {
    min-width: calc(100% - 2rem); /* Show 1 card */
    height: 340px;
    border-radius: 8px;
  }

  .suggestion-casestudy-card-4:not(:last-child)::after {
    display: none; /* No separator for single card */
  }

  .suggestion-casestudy-card-4 img {
    height: 150px;
    border-radius: 8px 8px 0 0;
  }

  .suggestion-casestudy-card-4 .content {
    padding: 1rem;
    gap: 0.5rem;
  }

  .suggestion-casestudy-card-4 h3 {
    font-size: 0.9rem;
  }

  .suggestion-casestudy-card-4 p {
    font-size: 0.8rem;
  }

  .suggestion-casestudy-card-4 a {
    font-size: 0.85rem;
  }

  .suggestion-casestudys-scroll-4 p {
    font-size: 0.75rem;
    padding: 0.5rem 0;
  }
}

/* Tablet and Small Laptop (768px–1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .suggestion-casestudys-container-4 {
    padding: 1.5rem 3rem;
    max-width: 960px;
  }

  .suggestion-casestudys-container-4 h2 {
    font-size: 2rem;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
  }

  .header-with-arrows-4 {
    position: relative;
  }

  .carousel-controls-4 {
    gap: 0.75rem;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .carousel-arrow-4 {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.3rem;
    border: 2px solid #6B6084;
  }

  .suggestion-casestudys-scroll-4 {
    gap: 1.25rem;
    padding-bottom: 0.75rem;
  }

  .suggestion-casestudy-card-4 {
    min-width: calc((100% - 2.5rem) / 3); /* Show ~3 cards */
    height: 360px;
    border-radius: 10px;
  }

  .suggestion-casestudy-card-4:not(:last-child)::after {
    right: -10px;
    width: 1px;
  }

  .suggestion-casestudy-card-4 img {
    height: 160px;
    border-radius: 10px 10px 0 0;
  }

  .suggestion-casestudy-card-4 .content {
    padding: 1.1rem;
    gap: 0.5rem;
  }

  .suggestion-casestudy-card-4 h3 {
    font-size: 0.95rem;
  }

  .suggestion-casestudy-card-4 p {
    font-size: 0.85rem;
  }

  .suggestion-casestudy-card-4 a {
    font-size: 0.9rem;
  }

  .suggestion-casestudys-scroll-4 p {
    font-size: 0.8rem;
    padding: 0.75rem 0;
  }
}

/* Laptop (1025px–1366px) */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .suggestion-casestudys-container-4 {
    padding: 2rem 5rem;
    max-width: 1100px;
    background: #fff;
  }

  .suggestion-casestudys-container-4 h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #DCD9E3;
    font-family: EuclidSemiBold, sans-serif;
    margin-bottom: 2rem;
    padding: 1.75rem 0;
    text-align: left;
  }

  .header-with-arrows-4 {
    position: static;
  }

  .carousel-controls-4 {
    gap: 1rem;
    position: static;
  }

  .carousel-arrow-4 {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    border: 1px solid #6B6084;
  }

  .suggestion-casestudys-scroll-4 {
    gap: 1.5rem;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .suggestion-casestudy-card-4 {
    min-width: calc((100% - 4.5rem) / 4); /* Show ~4 cards */
    height: 380px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    scroll-snap-align: start;
  }

  .suggestion-casestudy-card-4:not(:last-child)::after {
    right: -12px;
    width: 1px;
  }

  .suggestion-casestudy-card-4 img {
    height: 170px;
    border-radius: 12px 12px 0 0;
  }

  .suggestion-casestudy-card-4 .content {
    padding: 1.25rem;
    gap: 0.5rem;
  }

  .suggestion-casestudy-card-4 h3 {
    font-size: 1rem;
    font-weight: 600;
    color: black;
    font-family: EuclidSemiBold, sans-serif;
    line-height: 1.3;
  }

  .suggestion-casestudy-card-4 p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4A4A4A;
  }

  .suggestion-casestudy-card-4 a {
    font-size: 0.95rem;
    color: #0047FF;
    font-weight: 600;
  }

  .suggestion-casestudys-scroll-4 p {
    font-size: 0.8rem;
    padding: 1rem 0;
  }
}












.suggestion-casestudy-card-4 {
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  max-width: 200px;
}
.suggestion-casestudy-card-4 img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}
.suggestion-casestudy-card-4 .content-4 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem;
  background-color: #ffffff;
  height: 100%;
}
.suggestion-casestudy-card-4 h3 {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  margin: 0 0 0.3rem 0;
  line-height: 1.3;
  font-family: EuclidSemiBold, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.suggestion-casestudy-card-4 p {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.2;
  margin: 0 0 auto 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
/* Align Know more to bottom */
.suggestion-casestudy-know-more-4 {
  font-size: 0.9rem;
  color: #0047ff;
  font-weight: 500;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.3s ease;
}
.suggestion-casestudy-know-more-4:hover {
  text-decoration: none;
}
/*temp5 css*/
.temp5-project_container {
  width: 100%;
}

.temp5-project_section {
  background-color: #0d0225;
  display: flex;
  align-items: center;
  justify-content: center;
}

.temp4-project_section {
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.temp5-p-section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 5rem;
  box-sizing: border-box;
}

.temp5-project_text {
  font-size: 5vw;
  font-weight: 600;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.para-temp-styles {
  font-size: 18px;
  line-height: 35px;
  color: #6b6084;
  font-family: EuclidMedium;
  padding: 16px;
}

.head-temp-style {
  padding: 1rem 0rem;
  color: #0d0225;
  font-size: 2.5rem;
  font-family: EuclidSemibold;
}
.head-temp-style {
  padding: 1rem 0rem;
  color: #0d0225;
  font-size: 2.5rem;
  font-family: EuclidSemibold;
}
.head-temp-style1 {
  padding: 1rem 0rem;
  color: #0d0225;
  font-size: 2rem;
  font-family: EuclidSemibold;
}

.head2-temp-style {
  color: #0d0225;
  font-size: 2rem;
  font-family: EuclidSemibold;
  padding-bottom: 0.5rem;
}

.head3-temp-style {
  color: #0d0225;
  font-size: 1.75rem;
  font-family: EuclidSemibold;
}

.head4-temp-style {
  color: #0d0225;
  font-size: 1.5rem;
  font-family: EuclidMedium;
}

.temp1-hero-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol {
  padding-left: 2rem;

}

.temp5-banner-img {
  width: 100%;
  min-height: 100vh ;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  
}

.temp5-banner-img::after {
  position: absolute;
  height: 30%;
  width: 100%;
}

.temp5-img-text {
  font-size: 4rem;
  font-family: EuclidSemiBold;
  padding: 4rem;
  color: #fff;
  background: linear-gradient(to top, #000000, transparent);
  position: relative;
  z-index: 1;
}

.test-selection-white::selection {
  background-color: #fff;
  color: #1c39bb;
}

.temp2-hero-img-text {
  position: absolute;
  inset: 0;
  padding: 5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 6rem;
  font-family: EuclidMedium;
}

.temp5-title {
  font-weight: 600;
  font-size: 2.5rem;
  padding: 1.8rem 0 1.5rem 0;
  line-height: 100%;
}

.temp5-topic {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.6rem;
  color: #0047FF;
}

.temp5-topic>span {
  color: #6b6084;
}

.temp5-sec1-title {
  padding: 2rem 0rem;
  color: #0d0225;
  font-size: 3rem;
  font-family: EuclidSemibold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.temp5-content-container {
  padding: 2rem 10rem;
  box-sizing: border-box;
}

.temp5-sec1-container {
  display: flex;
  justify-content: space-between;
  /* gap: 5rem; */
}

.temp5-sec1-content {
  width: 55%;
  background: #f8f8f8;
  border-radius: 1rem;
  padding: 1.5rem;
  box-sizing: border-box;
}

.temp5-sec1-content>div {
  color: #0d0225;
  font-size: 1.75rem;
  padding-bottom: 0.5rem;
  font-family: EuclidSemibold;
}

.temp5-sec1-content>p {
  color: #6b6084;
  font-size: 1.25rem;
  line-height: 170%;
}

.temp5-sec1-img {
  width: 40%;
}

.temp5-sec1-img>img {
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.mid-container {
  margin-bottom: 25px;
}

.temp4-sec2 {
  display: flex;
  padding-top: 2rem;
}

.no-padding>img {
  display: block;
  border-radius: 0.5rem;
  margin-left: -10rem;
}

.temp4-sec2-img>img {
  width: 115%;
}

.second-image>img {
  position: relative;
  top: 15rem;
  left: 3rem;
  width: 80%;
  border-top-left-radius: 40%;
  border-top-right-radius: 5%;
  border-bottom-right-radius: 40%;
  border-bottom-left-radius: 5%;
}

.text-mid-container {
  flex: 1 1;
  /* Takes up 50% width */
  max-width: 50%;
  padding-top: 8rem;
}

.temp4-sec2-list-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns */
  grid-template-rows: 1fr 1fr;
  /* Two rows */
  grid-gap: 4rem;
  gap: 4rem;
}

.temp5-sec2-list-container {
  margin: 2rem 0rem;
  display: flex;
  column-gap: 3rem;
}

.temp5-sec2-list-num {
  color: #0047ff;
  font-size: 5rem;
}

.temp5-sec2-list-title {
  color: #0d0225;
  font-size: 1.25rem;
  padding-bottom: 0.5rem;
  font-family: EuclidSemibold;
}

.temp5-sec3-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 2rem 0 2rem 0;
  /* text-align: justify; */
  grid-column-gap: 2rem;
  column-gap: 2rem;
}

.temp5-sec3-subtitle {
  font-size: 1.25rem;
  font-family: EuclidSemibold;
  padding: 1rem 0 1rem 0;
  color: #0d0225;
}

.temp5-sec4-title {
  border-left: 8px solid #0047ff;
  padding-left: 1rem;
  color: #0d0225;
  font-weight: 600;
  font-size: 2rem;
  font-family: EuclidSemibold;
  margin: 2rem 0;
}

.temp5-sec4-mid {
  padding-top: 1.5rem;
}

.temp5-sec4-heading {
  font-weight: 600;
  font-size: 2.6rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.temp5-sec4-subheading {
  font-weight: 600;
  font-size: 1.5rem;
  padding-bottom: 1rem;
}

.temp5-sec4-para {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 180%;
  color: #6B6084;
}

.temp5-sec4-img>img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  aspect-ratio: 752 / 447;
}

.temp4-sec4-img>img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  aspect-ratio: 591 / 549;
}

/* temp1 css */
.temp1-banner-img {
  width: 100%;
  min-height: calc(100vh - 109px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  /* align-items: flex-end; */
}

.temp1-banner-img::after {
  position: absolute;
  height: 30%;
  width: 100%;
}

.temp1-img-text {
  font-size: 4rem;
  font-family: EuclidSemiBold;
  padding: 4rem;
  color: #fff;
  display: flex;
  align-items: center;
  z-index: 1;
}

.temp1-content-container {
  padding: 2rem 10rem;
  box-sizing: border-box;
}

.temp1-title {
  font-weight: 600;
  font-size: 2.5rem;
  padding: 1.8rem 0 1.5rem 0;
  line-height: 100%;
}

.temp1-topic,
.temp2-topic {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.6rem;
  color: #0047FF;
}

.temp1-topic>span,
.temp2-topic>span {
  color: #6b6084;
}

.temp1-sec1-container,
.temp2-section1-container {
  padding-top: 1.5rem;
}

.temp1-sec1-img>img,
.temp2-section1-img>img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1500 / 900;
  border-radius: 1rem;
}

.head-temp1-style {
  padding: 1rem 0rem;
  color: #0d0225;
  font-size: 1.8rem;
  font-family: EuclidSemibold;
}

.temp1-sec3-subtitle {
  font-size: 1.25rem;
  font-family: EuclidSemibold;
  padding-top: 1rem;
  color: #0d0225;
}

/*temp2css*/
.temp2-title1 {
  font-weight: 600;
  font-size: 40px;
  padding: 1.8rem 0 1.5rem 0;
  line-height: 150%;
}

.temp2-content1 {
  font-weight: 600;
  font-size: 22px;
}

.temp2-content1>span {
  font-weight: 400;
  line-height: 170%;
}

.head2-title {
  padding: 1.5rem 0 1.5rem 0;
  line-height: 169%;
}

/* .para-content{
  margin: 0;
  padding-bottom: 1.5rem;
} */
/* temp4 css */
.temp3-sec1-title {
  border-left: 8px solid #0047ff;
  padding-left: 1rem;
  color: #0d0225;
  font-weight: 600;
  font-size: 2rem;
  font-family: EuclidSemibold;
  margin: 2.5rem 0 0 1rem;
}

.name {
  font-weight: 600;
  font-size: 2rem;
  padding-top: 2.2rem;
  margin: 0;
}

.designation {
  font-weight: 400;
  font-size: 2rem;
  padding: 1rem 0 1rem 0;
  margin: 0;
}

.temp2-points {
  margin: 1rem 0;
  padding: 0 0 0 2.5rem;
}

.temp-margin {
  margin: 1rem 0;
}

/* .temp1-sec3-container > ul{
  margin: 1rem 0;
  padding: 0 0 0 2.5rem;
} */

@media screen and (max-width: 1024px) {
  .temp5-p-section {
    position: sticky;
    top: 80px;
    z-index: 1;
    width: 100%;
    height: 600px;
    overflow: hidden;
    padding: 1.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .temp5-banner-img,
  .temp1-banner-img {
    min-height: 0;
  }

  .temp5-img-text,
  .temp1-img-text {
    font-size: 1.5rem;
    text-align: center;
  }

  .temp2-hero-img-text {
    font-size: 1.5rem;
  }

  .temp2-hero-img-text {
    padding: 1.5rem;
  }

  .temp5-content-container {
    padding: 1.5rem;
    box-sizing: border-box;
  }

  .temp1-content-container {
    padding: 1.5rem;
    box-sizing: border-box;
  }

  .para-temp-styles,
  .para-temp-styles1,
  .temp5-sec4-para {
    font-size: 0.9rem;
    line-height: 30px;
    color: #6b6084;
    padding: 10px;
  }

  .head-temp-style {
    padding: 1rem 0rem;
    color: #0d0225;
    font-size: 1.5rem;
    font-family: EuclidSemibold;
  }

  .head-temp1-style {
    font-size: 1.2rem;
  }

  .temp5-title,
  .temp1-title,
  .temp2-title1 {
    font-size: 1.5rem;
  }

  .temp2-content1 {
    font-size: 0.8rem;
  }

  .temp4-sec2 {
    display: inline-block;
  }

  .temp5-sec1-container {
    display: flex;
    flex-direction: column;
  }

  .temp5-sec1-content {
    width: 100%;
    background: #f8f8f8;
    border-radius: 1rem;
    /* padding: 1.5rem; */
    box-sizing: border-box;
  }

  .temp5-sec1-content>div,
  .temp5-sec2-list-title {
    color: #0d0225;
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
    font-family: EuclidSemibold;
  }

  .temp5-sec1-content>p {
    color: #6b6084;
    font-size: 1rem;
  }

  .temp5-sec1-img {
    width: 100%;
  }

  .temp5-sec2-list-num {
    font-size: 2rem;
  }

  .temp5-sec2-list-container {
    display: flex;
    column-gap: 1.5rem;
  }

  .temp1-sec3-subtitle {
    padding: 0 0 1rem 0;
  }

  .temp5-sec3-container {
    display: flex;
    flex-direction: column;
  }

  .temp5-sec4-heading {
    font-size: 1.7rem;
  }

  .temp5-sec4-title {
    font-size: 1.25rem;
  }

  .temp5-sec4-subheading {
    font-size: 1rem;
  }

  .temp5-topic,
  .temp1-topic,
  .temp2-topic {
    font-size: 1rem;
  }

  .temp5-sec1-title {
    font-size: 1.3rem;
    line-height: 170%;
    /* display: flex;
    align-items: center;
    justify-content: center; */
  }

  .mid-container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .no-padding>img {
    width: 100%;
    /* display: inline; */
    margin-left: 0;
    border-radius: 0;
    /* padding-left: 0; */
  }

  .temp4-sec2-img2>img {
    display: flex;
  }

  .second-image>img {
    width: 100%;
    margin-left: -3rem;
    top: 0;
    border-radius: 0;
  }

  .temp4-sec2-list-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .temp4-sec4-img>img {
    width: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    aspect-ratio: 752 / 447;
  }

  .text-mid-container {
    flex: 0 1;
    /* Takes up 50% width */
    max-width: 100%;
    padding-top: 2rem;
  }

  .temp3-sec1-title {
    font-size: 1rem;
    border-left: 4px solid #0047ff;
  }

  .name,
  .designation {
    font-size: 1rem;
  }

  .head2-temp-style {
    font-size: 1.3rem;
    padding-bottom: 0.5rem;
  }

  .head3-temp-style {
    font-size: 1.25rem;
  }

  .head4-temp-style {
    font-size: 1.15rem;
  }
}

@media screen and (max-width: 300px) {
  .temp1-img-text {
    font-size: 1rem;
  }
}
/* Container for the suggested case studies section */
.suggestion-casestudys-container-3 {
  margin: 0 auto;
  position: relative;
  padding: 2rem 8rem;
  background: #ffffff; /* From Other Case Studies */
}

/* Heading style */
.suggestion-casestudys-container-3 h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #dcd9e3; /* From Other Case Studies */
  font-family: EuclidSemiBold; /* From Other Case Studies */
  margin-bottom: -2rem;
  padding: 2rem 0;
  text-align: left;
}

/* Scrollable container wrapper for positioning arrows */
.suggestion-casestudys-scroll-wrapper-3 {
  position: relative;
}

/* Scrollable container for cards */
.suggestion-casestudys-scroll-3 {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 1.5rem;
  padding-bottom: 1rem;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  /* background-color: red; */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.suggestion-casestudys-scroll-3::-webkit-scrollbar {
  display: none;
}

/* Individual card styling */
.suggestion-casestudy-card-3 {
  min-width: 209px;
  height: 380px;
  border-radius: 12px; /* From Other Case Studies */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* From Other Case Studies */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* From Other Case Studies */
  position: relative;
}

/* Add vertical separator between cards, except for the last one */
.suggestion-casestudy-card-3:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px; /* Center in the 24px gap */
  top: 10%;
  height: 80%;
  width: 1px;
  background: #e5e7eb; /* Gray-200 */
}

.carousel-arrow-3 {
  width: 3rem;
  height: 3rem;
  border: 1px solid #6b6084;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  color: #6b6084;
  font-size: 1.5rem;
}
.carousel-controls-3 {
  display: flex;
  gap: 1rem;
}
.carousel-arrow-3:hover {
  border-color: #000;
  color: #000;
}

.carousel-arrow-3:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #6b6084;
  color: #6b6084;
}

/* Hover effect for cards */
.suggestion-casestudy-card-3:hover {
  transform: translateY(-6px); /* From Other Case Studies */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* From Other Case Studies */
}
.content-3 p a {
  display: inline;
  text-decoration: underline;
  color: blue; /* Adjust color as needed */
}
/* Card image styling */
.suggestion-casestudy-card-3 img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px 12px 0 0; /* From Other Case Studies */
}

/* Card content styling */
.suggestion-casestudy-card-3 .content-3 {
  padding: 1.25rem; /* From Other Case Studies */
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* From Other Case Studies */
}

/* Card title styling */
.suggestion-casestudy-card-3 h3 {
  font-size: 1rem; /* From Other Case Studies */
  font-weight: 600;
  color: black; /* From Other Case Studies */
  font-family: EuclidSemiBold; /* From Other Case Studies */
  margin: 0;
  line-height: 1.3;

  padding-top: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card description styling */
.suggestion-casestudy-card-3 p {
  font-size: 0.9rem; /* From Other Case Studies */
  line-height: 1.5;
  color: #4a4a4a; /* From Other Case Studies */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Know more" link styling */
.suggestion-casestudy-card-3 a {
  color: #0047ff; /* From Other Case Studies */
  font-size: 0.95rem; /* From Other Case Studies */
  font-weight: 600;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease; /* From Other Case Studies */
  display: inline-block;
  margin-top: 0.5rem;
}

/* Hover effect for "Know more" link */
.suggestion-casestudy-card-3 a:hover {
  text-decoration: none; /* From Other Case Studies */
}



.suggestion-casestudy-card-3 {
  min-width: 209px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.suggestion-casestudy-card-3 img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.suggestion-casestudy-card-3 .content-3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem;
  background-color: #ffffff;
  height: 100%;
}

.suggestion-casestudy-card-3 h3 {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  margin: 0 0 0.3rem 0;
  line-height: 1.3;
  font-family: EuclidSemiBold, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.suggestion-casestudy-card-3 p {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.2;
  margin: 0 0 auto 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

/* Align Know more to bottom */
.suggestion-casestudy-know-more-3 {
  font-size: 0.9rem;
  color: #0047ff;
  font-weight: 500;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.3s ease;
}

.suggestion-casestudy-know-more-3:hover {
  text-decoration: none;
}




/* Header section with title and arrows */
.header-with-arrows-3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Container for the arrows */
.arrow-controls-3 {
  display: flex;
  gap: 10px;
  /* Space between the arrows */
}

/* Adjust arrow positioning for this layout */
.arrow-3 {
  position: relative; /* Override the absolute positioning used previously */
  top: auto;
  transform: none; /* Remove the translateY transform */
}

/* Ensure arrows remain circular and styled as before */
.arrow-left-3,
.arrow-right-3 {
  left: auto;
  right: auto;
}
/* No case studies message */
.suggestion-casestudys-scroll-3 p {
  font-size: 0.8rem;
  color: #4b5563; /* Gray-600 */
  text-align: left;
  width: 100%;
  padding: 0rem 0;
}
@media (max-width:320px) {
  .carousel-controls-3 {
    padding-top: 10%;
  }
}
@media  (max-width: 479px) {
  .suggestion-casestudys-container-3 {
    padding: 1rem 1rem;
    width: 100%;
    max-width: 320px;
    
  }
  .suggestion-casestudys-container-3 h2 {
    font-size: 1.2rem;
    padding: 0.75rem 0;
    /* padding-top: 37px; */
    background-color: #ffffff;
  }
  .suggestion-casestudy-card-3 {
    min-width: 100%;
  }
  .suggestion-casestudy-card-3:not(:last-child)::after {
    display: none;
  }
  .suggestion-casestudy-card-3 img {
    height: 200px;
  }
  .arrow {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    padding: 0.5rem;
  }
  .arrow-left {
    left: -12px;
  }
  .arrow-right {
    right: -12px;
  }
}
@media (min-width: 320px){
  .suggestion-casestudys-container-3 h2 {
  margin-bottom: 1rem;
  }
}


/* Medium mobile devices (480px and up) */
@media (min-width: 480px) and (max-width: 639px) {
  .suggestion-casestudys-container-3 {
    padding: 1rem 1.5rem;
    max-width: 460px;
  }
  .suggestion-casestudys-container-3 h2 {
    font-size: 1.75rem;
    padding: 1rem 0;
  }
  .suggestion-casestudy-card-3 {
    min-width: 100%;
  }
  .suggestion-casestudy-card-3:not(:last-child)::after {
    display: none;
  }
  .suggestion-casestudy-card-3 img {
    height: 250px;
  }
  .arrow-3 {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
  .arrow-left-3 {
    left: -16px;
  }
  .arrow-right-3 {
    right: -16px;
  }
}

/* Phablets and small tablets (640px and up) */
@media (min-width: 640px) and (max-width: 767px) {
  .suggestion-casestudys-container-3 {
    padding: 1.5rem 2rem;
    max-width: 600px;
  }
  .suggestion-casestudys-container-3 h2 {
    font-size: 2rem;
    padding: 1rem 0;
  }
  .suggestion-casestudy-card-3 {
    min-width: 280px;
  }
  .suggestion-casestudy-card-3:not(:last-child)::after {
    right: -12px;
  }
  .suggestion-casestudy-card-3 img {
    height: 280px;
  }
  .arrow-3 {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
}

/* Tablets (768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
  .suggestion-casestudys-container-3 {
    padding: 1.5rem 3rem;
    max-width: 740px; /* Fits ~2 cards (2 * 350px + 1 * 24px + padding) */
  }
  .suggestion-casestudys-container-3 h2 {
    font-size: 2.25rem;
    padding: 1.5rem 0;
  }
  .suggestion-casestudy-card-3 {
    min-width: 350px;
  }
  .suggestion-casestudy-card-3 img {
    height: 300px;
  }
}

/* Tablets and small laptops (1024px and up) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .suggestion-casestudys-container-3 {
    padding: 2rem 4rem;
    max-width: 980px; /* Fits ~2-3 cards (2 * 397px + 2 * 24px + padding) */
  }
  .suggestion-casestudys-container-3 h2 {
    font-size: 2.5rem;
    padding: 1.5rem 0;
  }
  .suggestion-casestudy-card-3 {
    min-width: 397px;
  }
  .suggestion-casestudy-card-3 img {
    height: 320px;
  }
}

/* Laptops and desktops (1280px and up) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .suggestion-casestudys-container-3 {
    padding: 2rem 6rem;
    max-width: 1220px; /* Fits ~3 cards (3 * 397px + 2 * 24px + padding) */
  }
  .suggestion-casestudys-container-3 h2 {
    font-size: 2.5rem;
    padding: 2rem 0;
  }
  .suggestion-casestudy-card-3 {
    min-width: 397px;
  }
  .suggestion-casestudy-card-3 img {
    height: 350px;
  }
}


.suggestion-casestudy-card-3 {
    display: flex;
    flex-direction: column;
    height: 100%; /* Only if needed, or ensure equal height via parent */

  min-width: 209px;
  height: 350px;
  
}

.suggestion-casestudy-card-3 .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    height: 100%;
}

.suggestion-casestudy-card-3 a {
    color: #0047ff;
    font-size: 0.95rem;
    font-weight: 600;
    transition: -webkit-text-decoration 0.2s ease;
    transition: text-decoration 0.2s ease;
    transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
    display: inline-block;
    margin-top: auto;
}

/* Match case study card size and content to article card style */
.suggestion-casestudy-card-3 {
  min-width: 330px;
  height: auto;
}

.suggestion-casestudy-card-3 img {
  height: 200px;
}

.suggestion-casestudy-card-3 h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.suggestion-casestudy-card-3 p {
  font-size: 0.85rem;
  color: #6b7280; /* Tailwind Gray-500 or adjust to match articles */
  line-height: 1.4;
}

/* Main Section Styles */
.single-casestudy-section {
  width: 100%;
  min-height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
}

.single-casestudy-section-overlay {
  width: 90%;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.single-casestudy-title {
  color: #fff;
  font-size: 5vw;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: EuclidSemiBold;
}

.single-casestudy-heading-card-container {
  /* width: 100%;
  min-height: calc(100vh - 109px); */
  width: 100%;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.single-casestudy-heading-card-container::after {
  content: "";
  position: absolute;
  height: 30%;
  width: 100%;
  background: linear-gradient(to top, #000000, transparent);
  bottom: 0;
}

.single-casestudy-heading {
  font-size: 3rem;
  font-family: EuclidSemiBold;
  padding: 4rem;
  color: #fff;
  position: relative;
  z-index: 1;
  /* background: linear-gradient(to bottom, #0d022500, #0d0225cc); */
}

/* Content Container */
.single-casestudy-content-container {
  padding-left: 16rem;
  padding-right: 16rem;
  padding-top: 1rem;
}

.single-casestudy-layout1-title {
  font-family: EuclidSemiBold;
  font-size: 2rem;
  line-height: 1.5;
  padding-top: 20px;
  padding-bottom: 20px;
}

.single-casestudy-layout1-des {
  font-size: 18px;
  padding: 10px 0px;
  color: #6b6084;
  font-family: EuclidMedium;
  line-height: 35px;
}

.single-casestudy-layout1-img-content-container {
  display: flex;
  column-gap: 2rem;
  padding: 1rem 0rem;
  align-items: center;
}

.single-casestudy-layout1-img-content-container>div {
  width: 70%;
}

.single-casestudy-layout1-img-content-container>p {
  width: 30%;
}

.test-seclection-blue-img-cont {
  color: #6b6084;
  font-family: EuclidMedium;
  line-height: 35px;
  font-size: 18px;
  margin-bottom: 15px;
}

.background {
  font-family: EuclidSemiBold;
  font-size: 2rem;
  padding: 30px 0px;
}

/* Layout 2 (Gallery) */
.single-casestudy-layout2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.single-casestudy-layout2>*:nth-child(4) {
  grid-column: span 3;
}

.single-casestudy-layout2-title {
  font-family: EuclidSemiBold;
  font-size: 2rem;
  margin: 3rem 0rem;
}

/* Layout 3 (Challenges/Conclusion) */
.single-casestudy-layout3 {
  align-items: center;
  column-gap: 1.5rem;
  padding: 3rem 0rem;
}

.single-casestudy-layout3>*:nth-child(1) {
  width: 100%;
}

.single-casestudy-layout3>*:nth-child(2) {
  width: 30%;
}

.conclusion {
  width: 100%;
}

.single-casestudy-layout3-title {
  font-family: EuclidSemiBold;
  font-size: 2rem;
}

.test-seclection-blue-challenge {
  color: #6b6084;
  font-family: EuclidMedium;
  font-size: 18px;
  margin-top: 1rem;
  line-height: 35px;
}

/* Layout 4 (Other Sections) */
.single-casestudy-layout4 {
  padding: 1rem 7.5rem;
}

.single-casestudy-layout4-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  gap: 2rem;
}

.single-casestudy-layout4-title {
  font-family: EuclidSemiBold;
  font-size: 3rem;
  color: #dcd9e3;
  margin-bottom: 2rem;
}

/* Salient Features */
.salient-features {
  font-size: 1rem;
  line-height: 2.0;
  padding: 20px 0px;
}

.salient-features h2 {
  font-size: 2rem;
  font-family: EuclidSemiBold;
}

.salient-features ul {
  font-size: 18px;
  padding-left: 20px;
  color: #6b6084;
  font-family: EuclidMedium;
  margin-left: 20px;
}

/* Problem Statement */
.problem-statement-para1 {
  font-size: 18px;
  color: #6b6084;
  font-family: EuclidMedium;
  padding: 10px 0px;
  line-height: 35px;
}

.problem-statement-para2 {
  color: #6b6084;
  font-family: EuclidMedium;
  line-height: 2.5;
  margin-left: 40px;
  padding: 20px 0px;
}

.highlight {
  font-size: 1.25rem;
  font-family: EuclidSemiBold;
  color: #6b6084;
}

/* Development Process */
.development-process h2 {
  font-family: EuclidSemiBold;
  font-size: 2rem;
}

.development-process h3 {
  font-size: 1.5rem;
  font-family: EuclidSemiBold;
  padding: 20px 0px;
}

.development-process p {
  font-size: 18px;
  line-height: 35px;
  color: #6b6084;
  font-family: EuclidMedium;
  padding: 16px;
}

/* Challenges Faced */
.Challenges-Faced {
  line-height: 1.5;
}

.Challenges-Faced h2 {
  font-size: 2rem;
  font-family: EuclidSemiBold;
  padding: 20px 0px;
}

.Challenges-Faced p {
  font-size: 18px;
  color: #6b6084;
  font-family: EuclidMedium;
  padding: 10px;
}

.Challenges-Faced li {
  font-size: 18px;
  margin-left: 40px;
  color: #6b6084;
  font-family: EuclidMedium;
  line-height: 35px;
  padding: 16px 0px;
}

/* Impact and Benefits */
.impact-benefits {
  padding: 10px;
}

.impact-benefits h2 {
  font-size: 2rem;
  padding: 5px;
  font-family: EuclidSemiBold;
}

.impact-benefits li {
  font-size: 18px;
  line-height: 1.5;
  color: #6b6084;
  font-family: EuclidMedium;
  padding: 15px;
  margin-left: 20px;
}

/* List Items */
.li-text {
  font-size: 18px;
  line-height: 35px;
  color: #6b6084;
  font-family: EuclidMedium;
  padding: 16px;
}

/* Help Button */
.help-button {
  position: fixed;
  bottom: 100px;
  padding: 12px 18px;
  background-color: white;
  color: black;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  font-size: 17px;
  font-family: EuclidSemiBold;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  transform: translateX(-50%);
  left: 50%;
}

/* Help Section */
.help-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.help-container {
  width: 100%;
  max-width: 1000px;
  background: white;
  border-radius: 50px;
  display: flex;
  padding: 2rem;
  position: relative;
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.15);
}

.help-sidebar {
  flex: 1 1;
  padding-right: 2rem;
  border-right: 1px solid #ddd;
}

.help-sidebar img {
  position: relative;
  top: 18px;
}

.help-sidebar h2 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 1.2rem;
  left: 40px;
  bottom: 16px;
  display: grid;
  position: relative;
  font-family: EuclidSemiBold;
}

.help-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.help-tabs button {
  margin-right: 10px;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid #dcdcdc;
  background: white;
  font-size: 14px;
  cursor: pointer;
  font-family: EuclidMedium;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.help-tabs button.active,
.help-tabs button:hover {
  background: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

.help-links {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  font-size: 16px;
  width: 100%;
}

.help-links li {
  margin: 8px 0;
  cursor: pointer;
  padding: 20px 0px;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  font-family: EuclidMedium;
  color: #0d0d0d;
  transition: color 0.3s;
}

.help-links li.active,
.help-links li:hover {
  color: #0d6efd;
}

.help-card-section {
  flex: 1.2 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.help-card {
  max-width: 500px;
  text-align: center;
  padding: 1.5rem;
  border-radius: 20px;
  background: #f9f9f9;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  animation: slideIn 0.4s ease-in-out;
  transition: transform 0.3s;
}

.help-card:hover {
  transform: scale(1.02);
}

.help-card img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
  height: 200px;
  object-fit: cover;
}

.help-card h3 {
  font-size: 18px;
  margin-bottom: 0.5rem;
  color: #0d0d0d;
  font-family: EuclidSemiBold;
}

.help-card p {
  font-size: 14px;
  color: #444;
  margin-bottom: 1rem;
  font-family: EuclidMedium;
}

.help-card a {
  font-weight: bold;
  font-size: 14px;
  color: #0d6efd;
  text-decoration: none;
  display: flex;
  justify-content: flex-end;
  font-family: EuclidMedium;
}

.help-close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000;
}

.help-close-btn:hover {
  color: red;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* Other Case Studies */
.other-case-studies {
  padding: 2rem 8rem;
  background: #fff;
}

.other-case-studies h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #dcd9e3;
  font-family: EuclidSemiBold;
  margin-bottom: 2rem;
}

.other-case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.other-case-study-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 0px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.other-case-study-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.other-case-study-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.other-case-study-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.other-case-study-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: black;
  font-family: EuclidSemiBold;
  margin: 0;
  line-height: 1.3;
}

.other-case-study-content p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4a4a4a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.know-more-link {
  color: #0047ff;
  font-size: 0.95rem;
  font-weight: 600;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
}

.know-more-link:hover {
  text-decoration: none;
}

/* Responsive Styles (max-width: 1024px) */
@media screen and (max-width: 1024px) {

  .single-casestudy-title,
  .single-casestudy-heading {
    font-size: 2rem;
    text-align: center;
  }

  .single-casestudy-content-container {
    padding: 1.5rem;
  }

  .single-casestudy-layout1-img-content-container {
    display: flex;
    flex-direction: column;
  }

  .single-casestudy-layout3>*:nth-child(1),
  .single-casestudy-layout3>*:nth-child(2),
  .single-casestudy-layout1-img-content-container>div,
  .single-casestudy-layout1-img-content-container>p {
    width: 100%;
  }

  .single-casestudy-layout2-title {
    font-size: 1.5rem;
    margin: 1.5rem 0rem;
  }

  .single-casestudy-layout3 {
    display: flex;
    flex-direction: column;
  }

  .single-casestudy-layout4-grid-container {
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
  }

  .single-casestudy-layout4 {
    padding: 1.5rem;
  }

  .single-casestudy-layout4-grid-container>div {
    min-width: 100%;
  }

  .single-casestudy-layout4-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .single-casestudy-layout2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
  }

  .single-casestudy-layout2>*:nth-child(4) {
    grid-column: span 2;
  }

  .single-casestudy-layout1-title {
    font-size: 2rem;
  }

  /* Help Section */
  .help-container {
    width: 100%;
    padding: 1rem;
    margin-top: 100px;
    border-radius: 20px;
    max-height: 70vh;
    overflow-y: auto;
    flex-direction: column;
  }

  .help-sidebar {
    padding-right: 0;
    margin-bottom: 1rem;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .help-sidebar h2 {
    font-size: 20px;
    left: 0;
    bottom: 2px;
    text-align: center;
  }

  .help-tabs {
    justify-content: center;
  }

  .help-tabs button {
    font-size: 12px;
    padding: 6px 10px;
    margin-bottom: 6px;
  }

  .help-links {
    font-size: 14px;
    width: 100%;
  }

  .help-links li {
    padding: 12px 0;
  }

  .help-card {
    max-width: 100%;
    padding: 1rem;
  }

  .help-card img {
    height: 150px;
  }

  .help-card h3 {
    font-size: 16px;
  }

  .help-card p,
  .help-card a {
    font-size: 12px;
  }

  .help-close-btn {
    font-size: 24px;
    top: 10px;
    right: 15px;
  }

  /* Other Case Studies */
  .other-case-studies {
    padding: 1rem 1.5rem;
  }

  .other-case-studies h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

/* Responsive Styles (max-width: 320px) */
@media screen and (max-width: 320px) {

  .single-casestudy-title,
  .single-casestudy-heading {
    font-size: 1.5rem;
    padding: 1rem;
  }
  

  .single-casestudy-section-overlay {
    width: 95%;
  }

  .single-casestudy-content-container {
    padding: 1rem;
  }

  .single-casestudy-layout1-title {
    font-size: 1.25rem;
  }

  .single-casestudy-layout2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .single-casestudy-layout2-title {
    font-size: 1.25rem;
    margin: 1rem 0;
  }

  .single-casestudy-layout3 {
    padding: 1rem 0;
  }

  .single-casestudy-layout3-title {
    font-size: 1.25rem;
  }

  .single-casestudy-layout4 {
    padding: 1rem;
  }

  .single-casestudy-layout4-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .single-casestudy-layout1-des {
    font-size: 1rem;
    line-height: 30px;
  }

  .test-seclection-blue-img-cont {
    font-size: 1rem;
    line-height: 30px;
  }

  .single-casestudy-layout4-grid-container {
    gap: 1rem;
  }

  .single-casestudy-heading-card-container {
    min-height: 50vh;
  }

  .salient-features {
    line-height: 2;
    padding: 20px 0px;
  }

  .salient-features h2 {
    font-size: 1.25rem;
    font-family: EuclidSemiBold;
  }

  .salient-features ul {
    font-size: 1rem;
    padding-left: 20px;
    color: #6b6084;
    margin-left: 20px;
  }

  .problem-statement-para1 {
    font-size: 1rem;
    color: #6b6084;
    line-height: 30px;
  }

  .problem-statement-para2 {
    font-size: 1rem;
    line-height: 30px;
    margin-left: 40px;
    padding: 20px 0px;
    color: #6b6084;
  }

  .highlight {
    font-size: 1rem;
    font-family: EuclidSemiBold;
    color: #6b6084;
  }

  .test-seclection-blue-challenge {
    font-size: 1rem;
  }

  .development-process h2 {
    font-family: EuclidSemiBold;
    font-size: 1.25rem;
  }

  .development-process h3 {
    font-size: 1.25rem;
    font-family: EuclidSemiBold;
    padding: 20px 0px;
  }

  .development-process p {
    font-size: 1rem;
    line-height: 30px;
    color: #6b6084;
    padding: 10px;
  }

  .li-text {
    font-size: 1rem;
    line-height: 30px;
    color: #6b6084;
    padding: 10px;
  }

  .Challenges-Faced {
    line-height: 1.5;
  }

  .Challenges-Faced h2 {
    font-size: 1.25rem;
    font-family: EuclidSemiBold;
    padding: 20px 0px;
  }

  .Challenges-Faced p {
    font-size: 1rem;
    color: #6b6084;
    line-height: 30px;
    padding: 10px;
  }

  .Challenges-Faced li {
    font-size: 1rem;
    margin-left: 40px;
    color: #6b6084;
    padding: 10px 0px;
  }

  .impact-benefits {
    padding: 10px;
  }

  .impact-benefits h2 {
    font-size: 1.25rem;
    padding: 5px;
    font-family: EuclidSemiBold;
  }

  .impact-benefits li {
    font-size: 1rem;
    line-height: 30px;
    color: #6b6084;
    padding: 15px;
    margin-left: 20px;
  }

  /* Help Button */
  .help-button {
    font-size: 14px;
    padding: 10px 14px;
    gap: 6px;
    bottom: 80px;
  }

  /* Help Section */
  .help-container {
    flex-direction: column;
    padding: 0.5rem;
    margin-top: 80px;
    border-radius: 20px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .help-sidebar h2 {
    font-size: 18px;
  }

  .help-tabs {
    justify-content: center;
  }

  .help-tabs button {
    font-size: 10px;
    padding: 5px 8px;
  }

  .help-links {
    font-size: 12px;
  }

  .help-links li {
    padding: 10px 0;
  }

  .help-card {
    padding: 0.75rem;
  }

  .help-card img {
    height: 120px;
  }

  .help-card h3 {
    font-size: 14px;
  }

  .help-card p,
  .help-card a {
    font-size: 10px;
  }

  .help-close-btn {
    font-size: 20px;
    top: 8px;
    right: 10px;
  }

  /* Other Case Studies */
  .other-case-studies {
    padding: 1rem;
  }

  .other-case-studies h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .other-case-studies-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .other-case-study-card img {
    height: 150px;
  }

  .other-case-study-content {
    padding: 0.75rem;
  }

  .other-case-study-content h3 {
    font-size: 1rem;
  }

  .other-case-study-content p {
    font-size: 0.8rem;
  }

  .know-more-link {
    font-size: 0.75rem;
  }
}
/* Container for the suggested case studies section */
.suggestion-casestudys-container {
  margin: 0 auto;
  position: relative;
  padding: -1rem 8rem;
  background: #ffffff; /* From Other Case Studies */
}

/* Heading style */
.suggestion-casestudys-container h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #dcd9e3; /* From Other Case Studies */
  font-family: EuclidSemiBold; /* From Other Case Studies */
  margin-bottom: -2rem;
  padding: 2rem 0;
  text-align: left;
}

/* Scrollable container wrapper for positioning arrows */
.suggestion-casestudys-scroll-wrapper {
  position: relative;
}

/* Scrollable container for cards */
.suggestion-casestudys-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 1.5rem;
  padding-bottom: 1rem;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  /* background-color: red; */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.suggestion-casestudys-scroll::-webkit-scrollbar {
  display: none;
}

/* Individual card styling */
.suggestion-casestudy-card {
  min-width: 380px;
  height: 380px;
  border-radius: 12px; /* From Other Case Studies */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* From Other Case Studies */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* From Other Case Studies */
  position: relative;
}

/* Add vertical separator between cards, except for the last one */
.suggestion-casestudy-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px; /* Center in the 24px gap */
  top: 10%;
  height: 80%;
  width: 1px;
  background: #e5e7eb; /* Gray-200 */
}

.carousel-arrow {
  width: 3rem;
  height: 3rem;
  border: 1px solid #6b6084;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  color: #6b6084;
  font-size: 1.5rem;
}
.carousel-controls {
  display: flex;
  gap: 1rem;
}
.carousel-arrow:hover {
  border-color: #000;
  color: #000;
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #6b6084;
  color: #6b6084;
}

/* Hover effect for cards */
.suggestion-casestudy-card:hover {
  transform: translateY(-6px); /* From Other Case Studies */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* From Other Case Studies */
}
.content p a {
  display: inline;
  text-decoration: underline;
  color: blue; /* Adjust color as needed */
}
/* Card image styling */
.suggestion-casestudy-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px 12px 0 0; /* From Other Case Studies */
}

/* Card content styling */
.suggestion-casestudy-card .content {
  padding: 1.25rem; /* From Other Case Studies */
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* From Other Case Studies */
}

/* Card title styling */
.suggestion-casestudy-card h3 {
  font-size: 1rem; /* From Other Case Studies */
  font-weight: 600;
  color: black; /* From Other Case Studies */
  font-family: EuclidSemiBold; /* From Other Case Studies */
  margin: 0;
  line-height: 1.3;

  padding-top: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card description styling */
.suggestion-casestudy-card p {
  font-size: 0.9rem; /* From Other Case Studies */
  line-height: 1.5;
  color: #4a4a4a; /* From Other Case Studies */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Know more" link styling */
.suggestion-casestudy-card a {
  color: #0047ff; /* From Other Case Studies */
  font-size: 0.95rem; /* From Other Case Studies */
  font-weight: 600;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease; /* From Other Case Studies */
  display: inline-block;
  margin-top: 0.5rem;
}

/* Hover effect for "Know more" link */
.suggestion-casestudy-card a:hover {
  text-decoration: none; /* From Other Case Studies */
}



.suggestion-casestudy-card-1 {
  min-width: 380px;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.suggestion-casestudy-card-1 img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  border-radius: 12px 12px 0 0;
}

.suggestion-casestudy-card-1 .content-1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem;
  background-color: #ffffff;
  height: 100%;
}

.suggestion-casestudy-card-1 h3 {
  font-size: 1rem;
  font-weight: 600;
  color: black;
  margin: 0 0 0.3rem 0;
  line-height: 1.3;
  font-family: EuclidSemiBold, sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.suggestion-casestudy-card-1 p {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.2;
  margin: 0 0 auto 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

/* Align Know more to bottom */
.suggestion-casestudy-know-more-1 {
  font-size: 0.9rem;
  color: #0047ff;
  font-weight: 500;
  text-decoration: none;
  margin-top: 0.5rem;
  transition: color 0.3s ease;
}

.suggestion-casestudy-know-more-1:hover {
  text-decoration: none;
}




/* Header section with title and arrows */
.header-with-arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Container for the arrows */
.arrow-controls {
  display: flex;
  gap: 10px;
  /* Space between the arrows */
}

/* Adjust arrow positioning for this layout */
.arrow {
  position: relative; /* Override the absolute positioning used previously */
  top: auto;
  transform: none; /* Remove the translateY transform */
}

/* Ensure arrows remain circular and styled as before */
.arrow-left,
.arrow-right {
  left: auto;
  right: auto;
}
/* No case studies message */
.suggestion-casestudys-scroll p {
  font-size: 0.8rem;
  color: #4b5563; /* Gray-600 */
  text-align: left;
  width: 100%;
  padding: 0rem 0;
}
@media (max-width:320px) {
  .carousel-controls {
    padding-top: 10%;
  }
}
@media  (max-width: 479px) {
  .suggestion-casestudys-container {
    padding: 1rem 1rem;
    width: 100%;
    max-width: 320px;
    
  }
  .suggestion-casestudys-container h2 {
    font-size: 1.2rem;
    padding: 0.75rem 0;
    /* padding-top: 37px; */
    background-color: #ffffff;
  }
  .suggestion-casestudy-card {
    min-width: 100%;
  }
  .suggestion-casestudy-card:not(:last-child)::after {
    display: none;
  }
  .suggestion-casestudy-card img {
    height: 200px;
  }
  .arrow {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    padding: 0.5rem;
  }
  .arrow-left {
    left: -12px;
  }
  .arrow-right {
    right: -12px;
  }
}
@media (min-width: 320px){
  .suggestion-casestudys-container h2 {
  margin-bottom: 1rem;
  }
}


/* Medium mobile devices (480px and up) */
@media (min-width: 480px) and (max-width: 639px) {
  .suggestion-casestudys-container {
    padding: 1rem 1.5rem;
    max-width: 460px;
  }
  .suggestion-casestudys-container h2 {
    font-size: 1.75rem;
    padding: 1rem 0;
  }
  .suggestion-casestudy-card {
    min-width: 100%;
  }
  .suggestion-casestudy-card:not(:last-child)::after {
    display: none;
  }
  .suggestion-casestudy-card img {
    height: 250px;
  }
  .arrow {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
  .arrow-left {
    left: -16px;
  }
  .arrow-right {
    right: -16px;
  }
}

/* Phablets and small tablets (640px and up) */
@media (min-width: 640px) and (max-width: 767px) {
  .suggestion-casestudys-container {
    padding: 1.5rem 2rem;
    max-width: 600px;
  }
  .suggestion-casestudys-container h2 {
    font-size: 2rem;
    padding: 1rem 0;
  }
  .suggestion-casestudy-card {
    min-width: 280px;
  }
  .suggestion-casestudy-card:not(:last-child)::after {
    right: -12px;
  }
  .suggestion-casestudy-card img {
    height: 280px;
  }
  .arrow {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }
}

/* Tablets (768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
  .suggestion-casestudys-container {
    padding: 1.5rem 3rem;
    max-width: 740px; /* Fits ~2 cards (2 * 350px + 1 * 24px + padding) */
  }
  .suggestion-casestudys-container h2 {
    font-size: 2.25rem;
    padding: 1.5rem 0;
  }
  .suggestion-casestudy-card {
    min-width: 350px;
  }
  .suggestion-casestudy-card img {
    height: 300px;
  }
}

/* Tablets and small laptops (1024px and up) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .suggestion-casestudys-container {
    padding: 2rem 4rem;
    max-width: 980px; /* Fits ~2-3 cards (2 * 397px + 2 * 24px + padding) */
  }
  .suggestion-casestudys-container h2 {
    font-size: 2.5rem;
    padding: 1.5rem 0;
  }
  .suggestion-casestudy-card {
    min-width: 397px;
  }
  .suggestion-casestudy-card img {
    height: 320px;
  }
}

/* Laptops and desktops (1280px and up) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .suggestion-casestudys-container {
    padding: 2rem 6rem;
    max-width: 1220px; /* Fits ~3 cards (3 * 397px + 2 * 24px + padding) */
  }
  .suggestion-casestudys-container h2 {
    font-size: 2.5rem;
    padding: 2rem 0;
  }
  .suggestion-casestudy-card {
    min-width: 397px;
  }
  .suggestion-casestudy-card img {
    height: 350px;
  }
}


.suggestion-casestudy-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Only if needed, or ensure equal height via parent */

  min-width: 380px;
  height: 350px;
  
}

.suggestion-casestudy-card .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    height: 100%;
}

.suggestion-casestudy-card a {
    color: #0047ff;
    font-size: 0.95rem;
    font-weight: 600;
    transition: -webkit-text-decoration 0.2s ease;
    transition: text-decoration 0.2s ease;
    transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
    display: inline-block;
    margin-top: auto;
}


/* Match case study card size and content to article card style */
.suggestion-casestudy-card {
  min-width: 380px;
  height: auto;
}

.suggestion-casestudy-card img {
  height: 200px;
}

.suggestion-casestudy-card h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.suggestion-casestudy-card p {
  font-size: 0.85rem;
  color: #6b7280; /* Tailwind Gray-500 or adjust to match articles */
  line-height: 1.4;
}
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  filter: drop-shadow(0px 4px 4px #0d0255);
}

.progress-border {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 5px; /* Add padding for thicker border */
  display: flex;
  justify-content: center;
  align-items: center;
  background: conic-gradient(#0d0225 0%, #ccc 0%); /* Initial gradient */
  transition: background 0.3s ease;
}

.arrow {
  font-size: 24px;
  color: #ff5733; /* Set to orange similar to your image */
  font-weight: bold;
  background: white; /* Make sure the background inside the circle is white */
  border-radius: 50%;
  padding: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.each-service-hero-section {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
}
.each-service-title {
  font-size: 5vw;
  font-weight: 600;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  text-align: center;
}
.each-service-container {
  padding: 14.25rem 4.5rem;
}
.each-service-section1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 11.25rem;
  column-gap: 11.25rem;
  align-items: center;
}
.each-service-section1-img {
  width: 100%;
}
.each-service-section1-img > img {
  object-fit: cover;
  aspect-ratio: 1.4952/1;
  width: 100%;
}
.each-service-howWeDo-step {
  min-width: 18rem;
}
.each-service-section1-content > div,
.each-service-howWeDo-step-title {
  font-size: 30px;
  color: #0d0225;
  font-family: EuclidMedium;
}
.each-service-section1-content > p,
.each-service-howWeDo-step-des,
.each-service-howWeDo-des {
  font-size: 20px;
  color: #0d0225;
  font-family: Euclid;
  margin-bottom: 2rem;
}
.each-service-howWeDo-step-des {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.each-service-howWeDo-section {
  margin: 4rem 0rem;
  /* position: sticky;
  top: 160px; */
}
.each-service-howWeDo-step-container {
  display: flex;
  column-gap: 6rem;
}
.each-service-howWeDo-step-container > div {
  width: 30%;
  min-width: 18rem;
}
.each-service-howWeDo-step-container::-webkit-scrollbar {
  display: none;
}
/* .no-scrollbar::-webkit-scrollbar{
  display: none;
} */
.each-service-howWeDo-step-icon {
  background-color: #607d8b;
  width: 4rem;
  height: 4rem;
  margin: 1rem 0rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.each-service-howWeDo-title {
  font-size: 36px;
  color: #0d0225;
  font-family: EuclidSemibold;
  margin-bottom: 2rem;
}
.each-service-card-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 10rem 0rem;
  grid-column-gap: 2rem;
  column-gap: 2rem;
}
.each-service-card > div {
  width: 100%;
}
.each-service-card > div > img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.5643;
}
.each-service-whyus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2rem;
  column-gap: 2rem;
}
.each-service-whyus-grid > div {
  width: 80%;
  margin: 3rem 0rem;
}
.each-service-whyus-num {
  color: #0047ff;
  font-size: 4rem;
}
.each-service-whyus-title {
  color: #0d0225;
  font-size: 24px;
  font-family: EuclidMedium;
}
.each-service-whyus-des {
  font-size: 20px;
  color: #6b6084;
}
.each-service-whyus-section-title {
  font-family: EuclidSemibold;
  color: #0d0225;
  font-size: 2.25rem;
}
.each-service-howWeDo-section-mob {
  display: none;
}

/* scroll card container */

.howWeDo-container{    
  height: "47vh";
  position: sticky;
  top: 80px;
  margin-bottom:100px ;
  overflow: auto;               /* Enables scrolling */
  scrollbar-width: none;        /* Hides scrollbar in Firefox */
  -ms-overflow-style: none;     /* Hides scrollbar in IE and Edge */
}
.howWeDo-container::-webkit-scrollbar {
  display: none;
}



@media screen and  (max-width: 768px) {
  /*change this */
  .each-service-hero-section {
    height: 37rem;
  }
  .each-service-howWeDo-section {
    display: none;
  }
  .each-service-howWeDo-section-mob {
    display: block;
    margin-top: 2rem;
  }
  .each-service-hero-section {
    /* padding: 1.5rem;*/
    box-sizing: border-box;
  }
  .each-service-container {
    padding: 3.5rem 1.5rem;
  }
  .each-service-section1 {
    display: flex;
    flex-direction: column-reverse;
    /* grid-template-columns: 1fr 1fr; */
    column-gap: 11.25rem;
    align-items: center;
  }
  .each-service-section1-content > p,
  .each-service-howWeDo-step-des,
  .each-service-howWeDo-des {
    font-size: 1rem;
    color: #6b6084;
    font-family: Euclid;
    margin-bottom: 1rem;
  }
  .each-service-section1-content > div,
  .each-service-howWeDo-step-title {
    font-size: 24px;
    color: #0d0225;
    font-family: EuclidMedium;
  }
  .each-service-howWeDo-title,
  .each-service-whyus-section-title {
    font-size: 24px;
    color: #0d0225;
    font-family: EuclidSemibold;
    margin-bottom: 0rem;
  }
  .each-service-howWeDo-section {
    margin: 3.5rem 0rem;
  }
  .each-service-card-section {
    display: grid;
    grid-template-columns: 1fr;
    margin: 3.5rem 0rem;
    grid-column-gap: 2rem;
    column-gap: 2rem;
  }
  .each-service-whyus-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 2rem;
    column-gap: 2rem;
  }
  .each-service-whyus-grid > div {
    width: 100%;
    margin: 1rem 0rem;
  }
  .each-service-whyus-des {
    font-size: 1rem;
  }
  .each-service-whyus-title {
    font-size: 20px;
  }
  .no-scrollbar::-webkit-scrollbar{
    display: none;
  }
}


/* BentoCarousel.css - full stylesheet for the carousel */

:root {
  --transition: 700ms;
  --fade: 300ms;
  --delay: 100ms;
  --card-max-w: 680px;
  --card-pad: 28px;
}

/* overall section height equals number of slides */
.ser-car-section {
  height: calc(100vh * 1);
  height: calc(100vh * var(--total-slides, 1));
  position: relative;
  overflow: visible;
}

/* sticky viewport container */
.ser-car-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #0f172a;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* each page is full-viewport and absolutely positioned */
.ser-car-page {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* slides are non-interactive unless card allows it */
}

/* slides move with transform; tuned for performance */
.ser-car-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 700ms ease-in-out;
  transition: transform var(--transition) ease-in-out;
  will-change: transform;
  pointer-events: none;
}

/* card styling */
.ser-car-card {
  width: min(680px, 90vw);
  width: min(var(--card-max-w), 90vw);
  background: rgba(0,0,0,0.4);
  border-radius: 24px;
  padding: 28px;
  padding: var(--card-pad);
  color: white;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
  border: 4px solid rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  transition: opacity var(--fade) ease-out, transform var(--fade) ease-out;
  pointer-events: auto; /* allow interactions inside the card */
}
.ser-car-card.ser-car-active {
  opacity: 1;
  transform: scale(1);
  transition-delay: 100ms;
  transition-delay: var(--delay);
}

/* media inside card */
.ser-car-img {
  width: 100%;
  max-height: 210px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ser-car-title { font-size: clamp(24px,5vw,36px); font-weight:800; margin:12px 0 4px; }
.ser-car-desc  { font-size: clamp(16px,3vw,18px); font-weight:300; margin:6px 0; }
.ser-car-footer{ margin-top:18px; font-family:monospace; font-size:clamp(16px,2.5vw,20px); }

/* DOTS - default hidden with fade/scale animation; become interactive when visible */
.ser-car-dots {
  position: fixed;
  right: clamp(10px,3vw,24px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: clamp(8px,1.5vw,12px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms ease;
  transform-origin: center right;
}

/* visible / hidden classes toggled from JS */
.ser-car-dots.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.ser-car-dots.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.96);
}

/* dot button */
.ser-car-dot {
  width: clamp(10px,1.5vw,12px);
  height: clamp(10px,1.5vw,12px);
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  transition: all .25s ease;
}
.ser-car-dot:hover { background: rgba(255,255,255,0.9); }
.ser-car-active-dot { background:white; transform:scale(1.4); box-shadow:0 0 10px white; }

/* spacer keeps normal flow after the sticky section */
.ser-car-spacer {
  height: calc(100vh * (1 - 1));
  height: calc(100vh * (var(--total-slides, 1) - 1));
  pointer-events: none;
}

/* responsive tweaks */
@media (max-width:768px) {
  :root { --card-pad: 20px; }
  .ser-car-img { max-height:160px; }
  .ser-car-dots { right: 12px; gap: 10px; }
  .ser-car-dot { width: 10px; height: 10px; }
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ser-car-slide { transition: none !important; }
  .ser-car-card { transition: none !important; }
}

.steps-container-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: #0d0225; */
  background: white;
  /* background: #f8f9fa; */
  min-height: 70vh;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.steps-container {
  font-family: Arial, sans-serif;
  background: linear-gradient(0deg, rgba(49, 8, 139, 1) 0%, rgba(13, 2, 37, 1) 80%, rgba(13, 2, 37, 1) 100%);
  /* background: linear-gradient(to bottom, #1e3a8a, #6d28d9, #a21caf); */
  /* background: #f8f9fa; */
  color: white;
  padding: 40px 20px;
  height: 70vh;
  width: 60%;
  text-align: center;
  border-radius: 5%;
  overflow: auto;
  /* Hide scrollbar (cross-browser) */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE & Edge */
}

.steps-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.steps-container2 {
  font-family: Arial, sans-serif;
  /* background: linear-gradient(to bottom, #1e3a8a, #6d28d9, #a21caf); */
  /* background: #f8f9fa; */
  /* color: white; */
  padding: 40px 20px;
  min-height: 100vh;
  width: 35%;
  text-align: center;
  border-radius: 2%;
  gap: 20px;
}

/* Department side panel */
.dept-panel {
  background: #ffffff;
  border: 1px solid #e9ecf2;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
  text-align: left
}

.dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f6f8ff;
  border: 1px solid #e3e7ff;
  color: #2b2b6d;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700
}

.dept-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #31088F;
  /* background: #34d399; */
  display: inline-block
}

.dept-name {
  font-size: 12px
}

.dept-heading {
  margin: 14px 0 6px 0;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  font-family: EuclidBold;
  font-style: normal;
}

.dept-desc {
  color: #4b5563;
  font-size: 14px;
  margin: 0 0 14px 0;
  font-weight: 500;
  line-height: 1.4;
  font-family: EuclidMedium;
}

.dept-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 14px
}

.meta-item {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column
}

.meta-label {
  font-size: 11px;
  color: #6b7280
}

.meta-value {
  font-size: 16px;
  font-weight: 800;
  color: #111827
}

.roles-title {
  margin: 8px 0;
  color: #111827;
  font-size: 16px
}

/* Grid layout for roles */
.roles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Base styles for role-pill */
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f0f0;
  color: #333;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  /* Indicates clickability */
  transition: all 0.3s ease;
  /* Smooth transition for hover and active states */
}

/* Hover state */
.role-pill:hover {
  background-color: #e0e0e0;
  /* Slightly darker gray for hover */
  color: #333;
  /* Maintain text color */
}

/* Active (selected) state */
.role-pill.active {
  background-color: #007bff;
  /* Primary color for active state (e.g., blue) */
  color: #fff;
  /* White text for contrast */
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
  /* Subtle shadow for emphasis */
}


.role-icon {
  color: #06b6d4
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 0 auto;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #6b48ff;
  border: 2px solid #6b48ff;
  background: #f0eaff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto 10px;
}

.number1 {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #52a2f7;
  border: 2px solid #52a2f7;
  background: #f0eaff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto 10px;
}

.label {
  display: block;
  font-size: 14px;
  color: #666;
}

.roles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.role {
  /* background: #e0e0e0; */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
}

.content-clt h2 {
  font-size: 1.25rem;
  font-style: normal;
  margin-bottom: 15px;
  color: #333;
  text-align: left;
  font-family: EuclidSemibold;
}

.content-clt ul {
  /* list-style-type: disc; */
  font-family: EuclidMedium;
  font-size: 0.8rem;
  padding-left: 20px;
  margin-bottom: 15px;
}

.content-clt li {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

.content-clt p {
  font-size: 14px;
  color: #666;
  background: #e6f3ff;
  padding: 10px;
  border-radius: 5px;
  font-family: EuclidMedium;
}

@media (max-width: 991px) {
  .steps-container-wrapper {
    flex-direction: column;
    align-items: stretch
  }

  .steps-container {
    width: 100%;
    height: auto;
    border-radius: 16px
  }

  .steps-container2 {
    width: 100%;
    min-height: auto;
    padding-top: 24px
  }
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}

h2 {
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 40px;
  font-style: italic;
}

.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* dotted line connector */
/* .steps::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    background: transparent;
    border-left: 2px dotted rgba(255, 255, 255, 0.5);
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 0;
} */

.step-card {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  width: 100%;
  max-width: 500px;

  margin: 40px 0;
  position: relative;
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.6s ease-out;
  z-index: 1;
}

.step-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.step-card.left {
  flex-direction: row;
  margin-left: 10%;
}

.step-card.right {
  flex-direction: row-reverse;
  margin-right: 10%;
}

.step-icon {
  /* background: #34d399; */
  /* background: #A2DCEA; */
  /* background: #a2dfd9; */
  background: #007bff;
  color: white;
  font-size: 2.5rem;
  /* border-radius: 50%; */
  /* border-radius: 65% 35% 45% 55% / 60% 40% 60% 40%; */
  transition: all 0.5s ease;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  z-index: 2;
  position: absolute;
  top: 8%;
  border-radius: 65% 35% 45% 55% / 60% 40% 60% 40%;

  /* Optional: Box Shadow for depth */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

  /* --- Continuous Effect: Morphing & Color Shift --- */
  animation:
    morph 6s ease-in-out infinite both alternate,
    /* Slower duration for subtle morphing */
    colorShift 15s ease infinite alternate;
  /* Gradient shift animation */
}

/* --- Keyframes for the Morphing Shape (border-radius) --- */
@keyframes morph {
  0% {
    /* Initial shape state */
    border-radius: 65% 35% 45% 55% / 60% 40% 60% 40%;
  }

  33% {
    /* First morph state */
    border-radius: 42% 58% 70% 30% / 41% 70% 30% 59%;
  }

  66% {
    /* Second morph state */
    border-radius: 75% 25% 65% 35% / 55% 58% 42% 45%;
  }

  100% {
    /* Returns to or near the initial state (or a fourth distinct state) */
    border-radius: 30% 70% 55% 45% / 70% 30% 45% 55%;
  }
}

/* --- Keyframes for the Color Shift (background-position) --- */
@keyframes colorShift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* --- Optional: Ensure the text remains centered during morphing --- */
.break-message {
  /* ... other styles ... */
  /* This flexbox setup on the parent should keep the text centered */
}

/* BreakBlob.css */
/* .container {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.centered-text {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #eaeaea;
  font-size: 1.7rem;
  font-family: 'Segoe UI', Arial, sans-serif;
  z-index: 2;
  font-weight: 400;
} */

.step-content {
  /* background: #4c1d95; */
  background: #4C18A5;

  padding: 20px;
  border-radius: 12px;
  /* text-align: left; */
  position: relative;
  flex: 1 1;
}

.step-content.first-step {
  justify-items: right;
  /* text-align: left   */
}

.step-content.second-step {
  justify-items: left;
  /* text-align: right */
}

.step-number {
  background: #fbbf24;
  color: black;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: absolute;


}

.one-step {
  top: -15px;
  left: -15px;
}

.two-step {
  top: -15px;
  left: 510px;
}

h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5
}

.step-title-clt {
  margin: 0 0 10px;
  font-size: 1.2rem;
  width: 70%;
  text-align: left;
}

.step-des-clt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  width: 70%;
  text-align: left;
}

.spacer-desc {
  flex: 1 1;
  margin-top: 30px;
  padding: 8%;

  color: #6c757d;
  background-color: #f9f9f9;
  /* Light background to contrast with the left panel */
  border: 1px solid #e0e0e0;
  /* Subtle divider line */
  overflow-y: auto;
  /* Scroll if content overflows */
  max-height: calc(100vh - 40px);
  /* Adjust based on viewport height */
  border-radius: 8px;
}

.role-description {
  /* list-style-type: disc; */
  /* Bullet points for list items */
  padding-left: 20px;
  /* Indent for bullet points */
  margin: 0;
  /* Remove default margin */
  color: #333;
  /* Dark text for readability */
  font-size: 1.3rem;
  font-weight: 500;
  /* font-family: EulicMedium; */
  /* Consistent font size */
  line-height: 1.5;
  /* Improved readability */
}

.role-description li {
  margin-bottom: 10px;
  /* Space between list items */
  word-wrap: break-word;
  /* Ensure long text wraps */
}

.role-description li:last-child {
  margin-bottom: 0;
  /* Remove margin from the last item */
}

.svg-container {
  position: absolute;
  top: -90px;
  width: 120px;
  height: 120px;
  z-index: 0;
}

.svg-container.left {
  right: 300px;
}

.svg-container.right {
  left: 300px;
}

.decorative-img.none {
  display: none;
}

.decorative-img {
  width: 100%;
  height: 90%;
  object-fit: contain;
}

.phone-img {
  width: 20%;
  height: 30%;
  object-fit: contain;
}
.about-hero {
  width: 100%;
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-section-holder {
  padding: 5rem 8.75rem;
}

.about-section-title {
  color: #0047ff;
  font-family: EuclidSemibold;
  padding: 2rem 0rem;
  font-size: 1.25rem;
}

.about-hero-text {
  font-size: 5vw;
  font-weight: 600;
  color: #fff;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.about-section1-container,
.about-section2-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-column-gap: 5rem;
  column-gap: 5rem;
}

#about-us {
  padding: 5rem 0rem;
}

.about-section1-left-title {
  font-family: EuclidSemibold;
  font-size: 3rem;
}

.about-section1-left-title-item-container {
  display: flex;
  column-gap: 2rem;
  margin-top: 2rem;
}

.about-section1-left-title-item>div {
  color: #0047ff;
  font-family: EuclidBold;
  font-size: 3rem;
}

.about-section1-left-title-item>p {
  font-size: 20px;
  font-family: EuclidMedium;
}

.about-section1-right-text,
.about-section2-text {
  font-size: 1.25rem;
  color: #6b6084;
}

.about-section2-container {
  margin: 5rem 0rem;
}

.about-section2-heading {
  font-size: 2rem;
  font-family: EuclidSemibold;
}

.about-section2-img-container {
  width: 80%;
  margin: 0 auto;
}

.about-section2-img-container>img {
  width: 100%;
  object-fit: cover;
  /* aspect-ratio: 1; */
  aspect-ratio: 16/9;
  border-radius: 1.2rem;
}

.about-section3-container {
  display: flex;
  column-gap: 3rem;

  /* position: relative;
  overflow: auto; */
}

.about-section3-dot-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  gap: 1rem;
  bottom: 50%;
  top: 50%;
  height: 100%;

  /* background: red; */
}

.about-section3-dots {
  width: 15px;
  height: 15px;
  background-color: #0001;
  border-radius: 50%;
}

.about-section3-dots.about-active-dot {
  background-color: #0047ff;
}

.about-section3-info-container {
  display: flex;
  column-gap: 5rem;
  align-items: center;
  margin: 5rem 0rem;
  min-height: calc(100vh - 300px);
}

/* .about-sect-3-img {
  width: 35rem;
} */
.about-sect-3-img>img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 1.2rem;
}

.about-section3-achivment-card {
  padding: 1rem;
  background-color: #f5f8ff;
  border-radius: 6px;
}

.about-section3-achivment-container {
  width: 35%;
  margin: 0rem 2rem;
}

.about-section3-info-container {
  position: sticky;
  top: 160px;
  background: #fff;
}

.about-section3-year {
  font-size: 6rem;
  font-family: EuclidSemibold;
}

.about-section3-title {
  font-size: 2.25rem;
  font-family: EuclidSemibold;
}

.about-section3-des {
  font-size: 1.25rem;
  color: #6b6084;
  width: 70%;
}

.about-section3-achivment-title {
  font-size: 1.25rem;
  font-family: EuclidSemibold;
}

.about-section3-achivment-des {
  font-size: 1rem;
  color: #6b6084;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-section3-content-container {
  width: 75%;
}

.about-section4-container {
  display: flex;
  align-items: center;
  column-gap: 5rem;
  margin: 7rem 0rem;
}

.about-section4-container>div {
  width: 50%;
}

.about-section4-container>div>img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  border-radius: 1.2rem;
}

.about-section4-heading {
  font-size: 2rem;
  font-family: EuclidSemibold;
  width: 70%;
}

.about-section4-des {
  font-size: 1.25rem;
  color: #6b6084;
  width: 80%;
}

.about-section5-container {
  display: flex;
  column-gap: 5rem;
  align-items: center;
  margin: 7rem 0rem;
}

.about-section5-container>div {
  width: 50%;
}

.about-section5-container>div>img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  border-radius: 1.2rem;
}

.about-section5-heading {
  font-size: 2rem;
  font-family: EuclidSemibold;
  width: 80%;
}

.about-section5-des {
  font-size: 1.25rem;
  color: #6b6084;
  width: 90%;
}

.about-section6-container {
  margin: 10rem 0rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  column-gap: 5rem;
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(49, 8, 139, 1) 0%, rgba(13, 2, 37, 1) 80%, rgba(13, 2, 37, 1) 100%);

}

.about-section6-container>div {
  width: inherit;
}

.about-section6-img-container {
  display: flex;
  justify-content: center;


  /* background-color: #000088; */
}

.about-section6-title {
  font-family: EuclidSemibold;
  font-size: 3rem;
  padding: 1rem 2rem;
  color: #fff;
}

.about-section6-des {
  font-size: 1.25rem;
  color: #6b6084;
}

.about-whyus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2rem;
  column-gap: 2rem;
}

.about-whyus-grid>div {
  width: 80%;
  margin: 3rem 0rem;
}

.about-whyus-num {
  color: #0047ff;
  font-size: 4rem;
}

.about-whyus-title {
  color: #0d0225;
  font-size: 24px;
  font-family: EuclidMedium;
}

.about-whyus-des {
  font-size: 20px;
  color: #6b6084;
}

.about-whyus-section-title {
  font-family: EuclidSemibold;
  color: #0d0225;
  font-size: 2.25rem;
}

.about-section7-container {
  display: flex;
  align-items: center;
  margin: 7rem 0rem;
}

.about-section7-container>div {
  width: 50%;
}

.about-section7-container>div>img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  border-radius: 1.2rem;
}

.about-section7-heading {
  font-size: 2rem;
  font-family: EuclidSemibold;
  width: 70%;
}

.about-section7-des {
  font-size: 1.5rem;
  font-family: EuclidMedium;
  width: 80%;
}

.about-section7-blue-square {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #0047ff;
}

.about-section7-blue-square-container {
  display: flex;
  align-items: baseline;
  column-gap: 2rem;
}

.about-section8-main-des-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.about-section8-main-des-container>p {
  width: 80%;
  font-size: 1.25rem;
  color: #6B6084;
  padding-top: 1rem;
  max-width: 70%;
}


.about-section8-container-title {
  font-family: EuclidSemibold;
  color: #0D0225;
  font-size: 2.25rem;
}

.about-section8-items-container {
  display: flex;
  align-items: center;
  column-gap: 5rem;
  overflow-x: auto;
  margin: 2rem 0rem;
  scroll-snap-type: x mandatory;
  /* Enable snap scrolling */
  scrollbar-width: none;
}

.about-section8-items-container::-webkit-scrollbar {
  display: none;
}

.about-section8-items-img>img {
  width: 20rem;
  object-fit: cover;
  aspect-ratio: 1;
}

.about-section8-item-card {
  display: flex;
  align-items: center;
  min-width: 77vw;
  /* height: 400px; */
  /* background-color: red; */
  background-color: #f8faff;
  flex: 0 0 100%;
  /* Each card takes full width of the container */
  scroll-snap-align: start;
}

.about-section8-item-content {
  padding: 3rem;
  box-sizing: border-box;
  height: 100%;
}

.about-section8-item-content>div {
  font-family: EuclidSemibold;
  font-size: 1.5rem;
  color: #0D0225;
}

.about-section8-item-content>p {
  /* font-family: EuclidSemibold; */
  font-size: 1.25rem;
  color: #6B6084;
}

.about-section8-btn-container {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

.about-section8-btn-container>div,
.about-section8-mob-btn-container>div {
  width: 3rem;
  height: 3rem;
  border: 1px solid #6B6084;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.about-section8-mob-btn-container {
  display: none;
}

.about-section9-container {
  margin: 10rem 0rem;
}

.about-section9-title {
  font-family: EuclidSemibold;
  font-size: 2.25rem;
  padding: 1rem 0rem;
  text-align: center;
}

.about-section9-des {
  font-size: 1.25rem;
  color: #6b6084;
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.about-section9-item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  margin: 4rem 0rem;
}

.about-section9-item {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  height: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.about-section9-icon-contaienr {
  padding: 0.5rem;
  background: #000088;
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.about-section9-icon {
  font-size: 1rem;
  color: #fff;
  background: #000088;
  transition: all 0.3s;
}

.about-section9-item-name {
  font-size: 1.25rem;
  color: #000088;
  font-family: EuclidSemibold;
  transition: all 0.3s;
}

.about-section9-item:hover {
  background: #000088;
}

.about-section9-item:hover .about-section9-icon-contaienr {
  background: #fff;
}

.about-section9-item:hover .about-section9-item-name {
  color: #fff;
}

.about-section9-item:hover .about-section9-icon {
  background: #fff;
  color: #000088;
}

.about-section10-lead-card {
  display: flex;
  margin: 3rem 0rem;
  column-gap: 3rem;
}

.about-section10-lead-card-content>.name {
  font-family: EuclidMedium;
  font-size: 1.5rem;
}

.about-section10-lead-card-content>.role {
  color: #0047ff;
  font-size: 2rem;
  font-family: EuclidSemibold;
  padding: 1rem 0 1rem 0;
}

.about-section10-lead-card-content>.description {
  color: #6b6084;
  font-size: 1.25rem;
  width: 60%;
}

/* Container for the Meet Our Team section */
/* Container for the Meet Our Team section */
.about-section11-container {
  padding-bottom: 5rem;
}

.about-section11-title {
  text-align: center;
  font-family: EuclidSemibold;
  font-size: 2.25rem;
  color: #0D0225;
}

.about-section11-des {
  font-size: 1.25rem;
  color: #6B6084;
  text-align: center;
  width: 50%;
  margin: 1.5rem auto;
}

.about-section4-des {
  font-size: 1.25rem;
  color: #6B6084;
  width: 100%;

}

/* .about-team-marquee-desk {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

.about-team-marquee {
  display: flex;
  width: max-content;
  width: 500%;
  animation: scroll 150s linear infinite;
  will-change: transform;
} */

.about-team-marquee-desk {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.about-team-marquee {
  display: flex;
  width: max-content;
  animation: marquee-left 150s linear infinite;
  will-change: transform;
}

/* .about-team-marquee {
   will-change: transform;
} */

.marquee-content {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0;
}

.about-team-marquee-desk:hover .about-team-marquee {
  animation-play-state: paused;
}

/* @keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% / 5 * 4));
  }
} */

@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}



.about-team-card {
  margin: 0 0.7rem;
  width: 20rem;
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  height: 25rem;
  transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
}


.about-team-card:hover {
  background-color: #F8FAFF;
  padding: 1rem;
  width: 30rem;
  box-sizing: border-box;
  z-index: 10;
  overflow: hidden;
}


.about-team-img {
  width: 100%;
  transition: width 0.3s ease;
}

.about-team-img>img {
  object-fit: contain;
  width: 100%;
  border-radius: 0.1rem;
  aspect-ratio: 185 / 220;
}

.about-team-card:hover .about-team-img {
  width: 8rem;
}


.about-team-name,
.about-team-role,
.about-team-des {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  word-break: break-word;
  white-space: normal;
}

.about-team-card:hover .about-team-name,
.about-team-card:hover .about-team-role,
.about-team-card:hover .about-team-des {
  opacity: 1;
  visibility: visible;
}

.about-team-name {
  font-family: EuclidMedium;
  font-size: 1.25rem;
  margin-top: 0.5rem;
}

.about-team-role {
  font-family: EuclidSemibold;
  font-size: 1.5rem;
  color: #0047FF;
  margin-top: 0.3rem;
}

.about-team-des {
  font-size: 0.9rem;
  color: #6B6084;
  margin-top: 0.5rem;
  max-height: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}


.about-team-marquee-mob {
  display: none;
}

@media screen and (max-width: 1024px) {
  .about-team-marquee-desk {
    display: none;
  }

  .about-team-marquee-mob {
    display: flex;
    overflow-x: auto;
    margin-top: 2rem;
  }

  .about-team-marquee-mob::-webkit-scrollbar {
    display: none;
  }

  .about-team-card.about-team-card-active {
    background-color: #f8faff;
    padding: 0.5rem;
    min-width: 90%;
    border-radius: 0.5rem;
    box-sizing: border-box;
  }

  .about-team-card-active .about-team-img {
    width: 8rem;
    /* Adjust this width as needed */
  }

  .about-team-card-active .about-team-img>img {
    width: 63%;
    object-fit: cover;
    aspect-ratio: 185 / 220;
  }

  .about-team-card {
    margin: 0rem 0.5rem;
    height: 25rem;
    min-width: 20rem;
    position: relative;
    pad: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    /* animation: scroll 5s linear;
    white-space: nowrap; */
  }

  .about-hero {
    height: 37rem;
  }

  .about-section-holder {
    padding: 2rem 1.5rem;
  }

  .career-hiring-data-desk {
    display: none;
  }

  .about-section-title {
    color: #0047ff;
    font-family: EuclidSemibold;
    padding: 0.75rem 0rem;
    font-size: 1.25rem;
  }

  .about-section1-container,
  .about-section4-container {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }

  .about-section1-left-title {
    font-size: 2rem;
  }

  .about-section1-left-title-item>div {
    font-size: 2rem;
  }

  .about-section1-right-text,
  .about-section2-text,
  .about-section3-des,
  .about-section3-achivment-des,
  .about-section4-des,
  .about-section5-des,
  .about-whyus-des,
  .about-whyus-des,
  .about-section9-des {
    font-size: 14px;
    padding: 20px 0px;
  }

  .about-section4-des,
  .about-section9-des {
    width: 100%;
  }

  .about-section2-container,
  .about-section5-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
  }

  .about-section2-img-container,
  .about-section5-des {
    width: 100%;
  }

  .about-section2-heading,
  .about-section5-heading,
  .about-whyus-section-title {
    font-size: 1.5rem;
  }

  .about-section3-dot-container {
    display: flex;
    flex-direction: row;
    position: sticky;
    top: 80px;
    background-color: #fff;
    display: none;
  }

  .about-section3-container {
    display: flex;
    flex-direction: column;
  }

  .about-section3-year {
    font-size: 2.5rem;
  }

  .about-section3-info-container {
    display: flex;
    flex-direction: column-reverse;
  }

  .about-section3-achivment-container {
    width: 100%;
  }

  .about-section3-title {
    font-size: 1.5rem;
  }

  .about-section3-content-container,
  .about-section3-des,
  .about-whyus-des {
    width: 100%;
  }

  .about-section3-achivment-title {
    font-size: 1.25rem;
  }

  .about-section4-container>div,
  .about-section5-container>div {
    width: 100%;
  }

  .about-section4-heading,
  .about-section6-title {
    font-size: 1.5rem;
  }

  .about-section4-container,
  .about-section5-container {
    margin: 1rem 0rem;
  }

  .about-section6-container {
    display: flex;
    flex-direction: column;
    margin: 3rem 0rem;
  }

  .about-section6-img-container {
    display: flex;
    justify-content: flex-start;
  }

  .about-whyus-grid {
    display: flex;
    flex-direction: column;
  }

  .about-whyus-grid>div {
    width: 100%;
    margin: 1rem 0rem;
  }

  .about-section7-container {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    /* align-items: center; */
    margin: 1rem 0rem;
  }

  .about-section7-container>div {
    width: 100%;
  }

  .about-section7-des {
    font-size: 1.25rem;
  }

  .about-section8-container {
    margin: 3rem 0rem;
  }

  .about-section8-container-title,
  .about-section9-title {
    font-size: 1.5rem;
  }

  .about-section8-btn-container {
    display: none;
  }

  .about-section8-main-des-container {
    display: block;
  }

  .about-section8-main-des-container>p {
    width: 100%;
    font-size: 1rem;
    color: #6b6084;
  }

  .about-section8-items-container {
    display: flex;
    align-items: center;
    column-gap: 5rem;
    overflow-x: auto;
    margin: 2rem 0rem;
  }

  .about-section8-items-container::-webkit-scrollbar {
    display: none;
  }

  .about-section8-items-img {
    width: 100%;
  }

  .about-section8-items-img>img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/10;
  }

  .about-section8-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
    background-color: #f8faff;
    padding: 0.5rem;
    box-sizing: border-box;
  }

  .about-section8-item-content {
    padding: 0rem;
    box-sizing: border-box;
    height: 100%;
  }

  .about-section8-item-content>div {
    font-family: EuclidSemibold;
    font-size: 1.25rem;
    margin-top: 1rem;
    color: #0d0225;
  }

  .about-section8-item-content>p {
    /* font-family: EuclidSemibold; */
    font-size: 1rem;
    color: #6b6084;
  }

  .about-section8-mob-btn-container {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
  }

  .about-section9-container {
    margin: 3rem 0rem;
  }

  .about-section9-item-name {
    font-size: 1.25rem;
    padding: 0.5rem 0rem;
  }

  .about-section9-item-container {
    /* display: flex;
    flex-direction: column; */
    grid-template-columns: repeat(2, 1fr);
  }

  .about-section10-lead-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .about-section10-lead-img {
    width: 100%;
  }

  .about-section10-lead-img>img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/3;
  }

  .about-section4-heading.partner-section {
    width: 100%;
  }

  .about-section10-lead-card-content>.name {
    font-size: 1.25rem;
  }

  .about-section10-lead-card-content>.role {
    font-size: 1.5rem;
  }

  .about-section10-lead-card-content>.description {
    font-size: 1rem;
    width: 100%;
  }

  .about-section11-title {
    font-size: 1.5rem;
  }

  .about-section11-des {
    width: 100%;
    font-size: 1rem;
    padding: 0rem 1.5rem;
    box-sizing: border-box;
  }
}

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

  .about-section1-left-title {
    font-family: EuclidSemibold;
    font-size: 30px;
  }

  .about-section1-left-title-item-container {
    display: flex;
    column-gap: 1rem;
    margin-top: 2rem;

  }

  .about-section1-left-title-item>div {
    color: #0047ff;
    font-family: EuclidBold;
    font-size: 20px;
  }

  .about-section1-left-title-item>p {
    font-size: 20px;
    font-family: EuclidMedium;
  }

  .about-section10-lead-img>img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/3;
  }

  .pad-about {
    padding: 0.5rem;
    justify-content: center;
  }

  #about-us {
    padding: 2rem 0rem;
  }

  .about-section9-item-name {
    font-size: 10px;
    color: #000088;
    font-family: EuclidSemibold;
    transition: all 0.3s;
  }

  .about-section9-icon {
    font-size: 1.25rem;
    color: #fff;
    background: #000088;
    transition: all 0.3s;
  }
}


@media screen and (max-width: 1600px) {
  .about-section10-lead-card-content>.name {
    padding-top: 0;
  }

}
.events-hero {
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
  color: white;
  padding: 0rem 5rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.events-hero > div {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 5vw;
  font-weight: 600;
}
.events-container {
  padding: 6rem;
  display: flex;
  flex-direction: column;
  row-gap: 100px;
}
.event-card {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 2.76; /* Replace with desired ratio */
  width: 100%;
  border-radius: 1rem;
  box-sizing: border-box;
  padding: 2rem;
  position: sticky;
  top: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 1rem;
}
.event-card::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(13, 2, 37);
  background: linear-gradient(
    90deg,
    rgba(13, 2, 37, 1) 0%,
    rgba(13, 2, 37, 0) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: inherit;
}
.event-card > div {
  position: relative;
  z-index: 1;
}
.event-title {
  font-size: 1.75vw;
  font-family: EuclidSemibold;
  color: white;
}
.event-des {
  color: #fff;
  font-size: 1.25rem;
  width: 40%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-btn-container {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  padding: 0.75rem 0rem;
}
.event-btn-container > div {
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  padding: 0.75rem 1rem;
  color: #fff;
  border-radius: 0.5rem;
  font-size: 18px;
}
.event-btn-container > .event-register {
  background: #0047ff;
  border: 1px solid #0047ff;
}

/*single event styles*/
.single-event-container {
  padding: 5rem;
  box-sizing: border-box;
}
.single-event-title {
  font-family: EuclidSemibold;
  font-size: 40px;
}
.single-event-details-container {
  display: flex;
  column-gap: 1.5rem;
  align-items: center;
  margin: 2.5rem 0rem;
}
.single-event-details-container > div {
  display: flex;
  column-gap: 0.75rem;
  align-items: center;
  color: #6b6084;
}
.single-event-content-container {
  display: flex;
  column-gap: 3rem;
}
.single-event-text {
  width: 70%;
}
.single-event-text > p {
  color: #6b6084;
  font-size: 1.25rem;
}
.single-event-img {
  width: 30%;
}
.single-event-img > img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1.667;
}
.events-mob-container {
  display: none;
  padding: 1.5rem;
  box-sizing: border-box;
}
.events-mob-img {
  width: 100%;
  border-radius: 0.5rem;
}
.events-mob-img > img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: inherit;
}
.events-mob-title {
  font-size: 1.5rem;
  font-family: EuclidSemibold;
  color: #0d0225;
  padding-top: 1rem;
  font-weight: 600;
}
.events-mob-des {
  color: #6b6084;
  padding-top: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  line-height: 179%;
}
.event-mob-btn-container {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  margin: 1rem 0rem;
}
.event-mob-register {
  background: #0047ff;
  color: #fff;
  display: flex;
  column-gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #0047ff;
  font-size: 12px;
}
.event-mob-view {
  color: #0d0225;
  border: 1px solid #0d0225;
  display: flex;
  column-gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border-radius: 10px;
  font-size: 12px;
}
.event-mob-view >span {
  position: relative;
  bottom: 0.1em;
}
.event-mob-register >span {
  position: relative;
  bottom: 0.1em;
}
@media screen and (max-width: 1024px) {
  .events-hero {
    height: 37rem;
  }
  .events-container {
    display: none;
  }
  .events-mob-container {
    display: block;
  }
  .single-event-container {
    padding: 1.5rem;
    box-sizing: border-box;
  }
  .single-event-details-container {
    margin: 1rem 0rem;
  }
  .single-event-details-container,
  .single-event-content-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1rem;
  }
  .single-event-text,
  .single-event-img {
    width: 100%;
  }
  .single-event-img > img {
    aspect-ratio: 4/3;
  }
  .single-event-title {
    font-size: 1.5rem;
  }
}

.job-form {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgb(13, 2, 37, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-input{
  width: 100%;
  height: 47px;
  border-radius: 10px;
  border: 1px solid #C8C8C9;
}
.error-span {
  color: red;
  font-size: 0.9rem;
  margin-top: 4px;
  display: block;
  margin-left: 10px;
}
/*  selecgt job input */
.job-role-input{
  width: 100%;
  height: 45px;
}
.job-form-inner {
  background-color: #fff;
  padding: 2rem;
  width: 40%;
  border-radius: 2rem;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}
.job-form-content-container {
  width: 100%;
}
.job-form-title {
  font-family: EuclidMedium;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.job-input-container {
  display: flex;
  column-gap: 1rem;
  box-sizing: border-box;
}
.job-input-holder {
  width: 50%;
  margin-top: 1rem;
}
.job-input-holder > input,
.job-input-holde > PhoneInput {
  min-width: 100%;
  box-sizing: border-box;
  height: 3rem;
  padding: 0rem 1rem;
  font-family: EuclidMedium;
}
.job-input-holder > input::placeholder,
.role-input-holder > input::placeholder,
.job-role-input::placeholder {
  font-family: EuclidMedium;
  color: #C8C8C9;
}
.job-input-holder-phone {
  width: 100%;
  border: 1px solid #CADBEA;
  border-radius: 10px;
  padding: 0rem 0.5rem;
  height: 3rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.job-input-holder-phone > PhoneInput {
  border: none;
  font-family: EuclidMedium;
  box-sizing: border-box;
}
.job-domain {
  margin: 1rem 0rem;
  position: relative;
}
.job-domain-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #0001;
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.role-option {
  padding: 0.25rem 0rem;
  cursor: pointer;
  width: 100%;
}
.role-option:hover {
  border-left: 3px solid #0047FF;
  padding-left: 0.5rem;
  transition: 0.2s ease-in;
}
.resume-container {
  width: 100%;
  /* height: 10rem; */
  border: 1px dashed #CADBEA;
  display: block;
  border-radius: 15px;
  margin: 0.5rem 0rem;
}
.resume-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0rem;
}
.resume-box > div {
  text-align: center;
}
.resume-box > button {
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #C5D6FF;
  padding: 0.5rem 1rem;
  border: 2px solid #0047FF;
  border-radius: 5px;
  color: #0047FF;
  font-family: EuclidMedium;
}
.job-btn-container {
  display: flex;
  justify-content: flex-end;
  column-gap: 0.5rem;
}
.job-btn-container > button {
  padding: 0.5rem 1.75rem;
  border-radius: 5px;
}
.job-cancel {
  background-color: #fff;
  color: #6B6084;
  border: 2px solid #6B6084;
  font-family: EuclidMedium;
}
.job-submit {
  border: 2px solid #0047FF;
  background-color: #0047FF;
  color: #fff;
  font-family: EuclidMedium;
}
@media screen and (max-width: 1024px) {
  .job-form-inner {
    width: 85%;
    padding: 1rem;
    overflow-y: auto;
  }
  .job-form-title {
    font-size: 1.5rem;
  }
}










.event-form-que-container {
  width: 100%;
  padding: 3rem;
  border-bottom: 1px solid #9e9aa8;
  box-sizing: border-box;
}
.eventform-btn-container {
  padding: 2rem 3rem;
  display: flex;
  justify-content: flex-end;
  column-gap: 0.5rem;
}
.event-form-progress-container {
  display: flex;
  column-gap: 1rem;
  align-items: center;
}
.event-form-progress-background {
  width: 100%;
  height: 5px;
  border-radius: 2px;
  background: #9e9aa8;
}
.event-form-progress {
  height: 5px;
  background: #0d0225;
  border-radius: 2px;
}
.event-form-close-btn {
  width: 10rem;
  height: 3rem;
  border-radius: 0.5rem;
  border: 1px solid #6b6084;
  background-color: #fff;
  color: #6b6084;
  font-family: EuclidMedium;
  font-size: 1.1rem;
}
.event-form-next-btn {
  background-color: #0047ff;
  color: #fff;
  width: 10rem;
  height: 3rem;
  border-radius: 0.5rem;
  border: 1px solid #0047ff;
  font-family: EuclidMedium;
  font-size: 1.1rem;
}
.event-form-title {
  font-family: EuclidSemibold;
  font-size: 1.9rem;
}
.event-form-des {
  color: #6b6084;
  font-size: 1.25rem;
}
.event-form-question-heading {
  margin: 1rem 0rem;
  font-size: 1.25rem;
  color: #0d0225;
  font-family: EuclidMedium;
}
.event-form-question {
  margin: 1rem 0rem;
  font-size: 1.25rem;
  color: #0d0225;
}
.event-form-input-field {
  min-height: 3rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  font-family: EuclidMedium;
}
.event-form-input-field::placeholder {
  font-family: EuclidMedium;
}

.news-hero {
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
  color: white;
  padding: 0rem 5rem;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-hero>div {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 7vw;
  font-weight: 600;
}
.videoLink{
  color: black;
}
.videoLink:hover{
  cursor: pointer;
  color: #0047ff;
}

.news-container {
  padding: 5rem;
}

.news-container-title {
  color: black;
  font-size: 40px;
  font-style: EuclidMedium;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 1rem;
}

.news-container-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  align-items: center;
  gap: 4rem;
  width: 100%;

}

.news-container-top1 {
  width: 50%;



}

.news-container-top1>img {

  width: 100%;
  height: auto;
  object-fit: cover;

}

.news-container-top2>h1 {
  font-size: 2.25rem;
  font-family: EuclidSemibold;
}



.news-container-top3 {


  color: #0047ff;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
  background-color: transparent;
  -webkit-user-select: none;
          user-select: none;
  display: flex;
  align-items:flex-end;
}

.news-container-top3:hover {
  text-shadow: 2px -1px 27px rgba(0, 71, 255, 0.64);
}

.news-tab-container {
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
  background: #fff;
  padding: 1.5rem 0rem;
  z-index: 1;
  position: sticky;
  top: 0px;
  transition: transform 0.3s ease;
}

.news-tab-container.move-up {
  transform: translateY(0);
}

.news-tab-container.move-down {
  transform: translateY(0px);
  /* transform: translateY(80px); */
}

.news-tab {
  padding: 0.75rem 1rem;
  background: #f5f5f5;
  border-radius: 5px;
  font-family: EuclidMedium;
  cursor: pointer;
}

.news-tab.news-tab-active {
  color: #0047ff;
  background: #e6edff;
}

.news-cards-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 1.75rem;
  column-gap: 1.75rem;
  grid-row-gap: 2.5rem;
  row-gap: 2.5rem;
}

.news-feature-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 1.75rem;
  column-gap: 1.75rem;
  grid-row-gap: 2.5rem;
  row-gap: 2.5rem;
}

.news-card-item-img {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
}

.news-card-item-video>video {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  overflow: hidden;
  padding: 2rem;

}

.news-card-item-img>img {
  object-fit: cover;
  width: 100%;
  border-radius: inherit;
  transition: all 0.3s;
  aspect-ratio: 0.833;
}

.news-card-item-img>img:hover {
  transform: scale(1.2);
}

.news-card-item-title {
  font-family: EuclidMedium;
  font-size: 1.25rem;
  padding: 1rem 0rem;
}

.news-card-item-detail {
  font-family: EuclidMedium;
  font-size: 1.25rem;
  padding: 2rem;

}

.news-card-item-date {
  color: #6b6084;
}

.news-achivement-container {
  display: flex;
  justify-content: space-between;
  margin: 5rem auto;
  border-bottom: 1px solid #e5e5e5;
}

.news-achive-img {
  width: 20rem;
}

.news-achive-img>img {
  width: 20rem;
  object-fit: cover;
}

.news-chive-content {
  width: 40%;
}

.news-chive-content>div {
  font-size: 2.25rem;
  color: #0d0225;
  font-family: EuclidSemibold;
}

.news-chive-content>p {
  font-size: 1.25rem;
  color: #6b6084;
}

@media screen and (max-width: 1024px) {
  .news-container {
    padding: 1.5rem;
  }

  .news-tab-container {
    width: 100%;
    display: flex;
    overflow-x: auto;
  }

  .news-tab {
    max-width: 100%;
  }

  .news-cards-container {
    display: flex;
    overflow-x: auto;
  }

  .news-feature-container {
    display: flex;
    overflow-x: auto;
  }

  .news-cards-container>div {
    min-width: 80%;
  }

  .news-card-item-title {
    font-family: EuclidMedium;
    font-size: 1.25rem;
    padding: 0.5rem 0rem;
  }

  .news-card-item-detail {
    font-family: EuclidMedium;
    font-size: 1.25rem;
    padding: 0.5rem 0rem;
  }

  .news-card-item-img {
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .news-tab-container::-webkit-scrollbar,
  .news-cards-container::-webkit-scrollbar,
  .news-feature-container::-webkit-scrollbar {
    display: none;
  }

  .news-hero {
    height: 37rem;
  }

  .news-tab-container.move-up {
    transform: none;
  }

  .news-tab-container.move-down {
    transform: none;
  }
}

/* Styles for 320px Mobile Screens */
@media screen and (max-width: 320px) {
  .news-container {
    padding: 1rem;
  }

  .news-container-title {
    font-size: 20px;
  }

  .news-container-top {
    /* flex-wrap: wrap; */
    display: none;

  }
  .news-container-top1>img {
    display: none;

  }
  .news-container-top2{
   display: none;
  }
  .news-container-top2>h1 {
    display: none;
  }
  .news-hero {
    height: 25rem;
    padding: 0 2rem;
  }

  .news-hero>div {
    font-size: 10vw;
  }

  .news-tab-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 1rem 0;
  }

  .news-tab {
    font-size: 0.9rem;
    padding: 0.5rem;
  }

  .news-cards-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .news-card-item-title,
  .news-card-item-detail {
    font-size: 1rem;
    padding: 0.5rem 0;
  }

  .news-achivement-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .news-achive-img,
  .news-chive-content {
    width: 100%;
  }
}

/* Styles for 1920px Desktop Screens */
@media screen and (min-width: 1920px) {
  .news-container {
    padding: 8rem;
  }

  .news-hero {
    height: 100vh;
    padding: 0 10rem;
  }

  .news-hero>div {
    font-size: 5vw;
  }

  .news-tab-container {
    /* justify-content: center; */
    padding: 2rem 0;
  }

  .news-tab {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }

  .news-cards-container {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2rem;
    row-gap: 3rem;
  }

  .news-card-item-title,
  .news-card-item-detail {
    font-size: 1.5rem;
  }

  .news-achivement-container {
    margin: 8rem auto;
  }

  .news-achive-img {
    width: 25rem;
  }

  .news-chive-content {
    width: 50%;
    font-size: 2.5rem;
  }
}
  .leader-hero-container {
    width: 100%;
    position: relative;
    height: 100vh;
    background: rgb(49, 8, 139);
    background: linear-gradient(0deg,
        rgba(49, 8, 139, 1) 0%,
        rgba(13, 2, 37, 1) 80%,
        rgba(13, 2, 37, 1) 100%);
    padding: 0rem 5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .leader-hero-img-container {
    height: 100%;
    display: flex;
    align-items: flex-end;
  }

  .leader-hero-name {
    width: 60%;
  }

  .leader-hero-name>div,
  .leader-hero-name>p {
    width: 100%;
    text-align: center;
    padding-top: 2.5rem;
  }

  .leader-hero-name>div {
    color: #fff;
    font-size: 6rem;
    font-weight: 600;
  }

  .leader-hero-name>p {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    line-height: 0rem;
  }

  .leader-content-container {
    display: flex;
    padding: 5rem;
    box-sizing: border-box;
  }

  .leader-content-container>div {
    width: 50%;
  }

  .leader-content-container>div>div {
    width: 70%;
  }

  .leader-content-container>div>p {
    color: #6b6084;
    font-size: 1.25rem;
  }

  .leader-profile-container {
    display: flex;
    column-gap: 1rem;
  }

  .leader-profile-img {
    width: 8rem;
  }

  .leader-profile-img>img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .leader-profile-name {
    font-size: 1.25rem;
    font-family: EuclidMedium;
  }

  .leader-profile-role {
    font-family: EuclidSemibold;
    font-size: 1.5rem;
    color: #0047ff;
  }

  .leader-profile-line {
    font-family: EuclidSemibold;
    padding: 20px 0px;
    font-size: 1.75rem;
  }
  .downloadicon-txt{
    font-family: EuclidSemibold;
    color: #6b6084;
    font-size: 1.25rem;
    /* padding: 6px 0px; */

  }

  .leader-carousel-container {
    padding: 5rem;
  }

  .leader-info-container {
    position: sticky;
    top: 100px;
    height: -moz-fit-content;
    height: fit-content;
  }

  .leader-icons {
    display: flex;
    column-gap: 1.25rem;
    margin-top: 1rem;
  }

  .leader-icon-container {
    height: 2rem;
    width: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6b6084;
  }
  .leader-hero-img-container>div {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .leader-hero-img-container>div>img {
    width: 70vh;
    object-fit: cover;
    aspect-ratio: 4 / 4;
  }

  @media screen and (max-width: 320px) {
    .leader-hero-img-container>div>img {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 4 / 4;
    }
  }

  @media screen and (max-width: 1024px) {
    .leader-hero-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0rem 1.5rem;
      box-sizing: border-box;
    }

    .leader-hero-name {
      margin-top: 3rem;
    }

    .leader-hero-name>div {
      font-size: 1.75rem;
    }

    .leader-hero-name>p {
      font-size: 1rem;
      line-height: normal;
      padding-top: 1rem;
    }

    .leader-hero-img-container>div {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }

    .leader-hero-img-container>div>img {
      width: 100%;
      
    }

    .leader-info-container {
      position: static;
      top: 0;
      height: auto;
    }

    .leader-content-container {
      display: flex;
      flex-direction: column;
      padding: 1.5rem;
    }

    .leader-content-container>div {
      width: 100%;
    }

    .leader-content-container>div>div {
      width: 100%;
    }

    .leader-profile-container {
      display: flex;
      flex-direction: column;
    }

    .leader-profile-line {
      font-family: EuclidSemibold;
      font-size: 2rem;
    }

    .leader-carousel-container {
      padding: 2rem 1.5em;
    }

    .leader-content-container>div>p {
      font-size: 1rem;
    }
  }
.mediakit-hero-section {
  width: 100%;
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(0deg,
      rgba(49, 8, 139, 1) 0%,
      rgba(13, 2, 37, 1) 80%,
      rgba(13, 2, 37, 1) 100%);
  padding: 0rem 5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-buttons {
  display: flex;
  gap: 10px;
  margin: 8px 0 15px;
  font-family: EuclidMedium;
}

.option-btn {
  padding: 6px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-family: EuclidMedium;
}

.option-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.option-btn:hover {
  border-color: #007bff;
}

.download-btn {
  margin-top: 10px;
  padding: 8px 20px;
  background: #0d0225;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.download-btn:hover {
  background: #007bff;
}

.mediakit-hero-section>div {
  font-size: 5vw;
  font-weight: 600;
  color: white;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.media-container {
  padding: 0rem 5rem;
}

.media-logos-container {
  display: flex;
  column-gap: 1rem;
  margin-bottom: 3rem;
  /* margin: 3rem 0rem; */
}

.media-logo-content-container {
  width: 60%;
  border-top: 1px solid #cadbea;
}

.media-logo-img {
  width: 40%;
  background: #f5f5f5;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-logo-img>img {
  width: 80%;
}

.media-section-heading {
  padding: 3rem 0rem;
  color: #dcd9e3;
  font-family: EuclidSemibold;
  font-size: 2.25rem;
}

.media-logo-content-container {
  width: 80%;
  padding: 2rem 0rem;
}

.media-logo-title {
  font-family: EuclidMedium;
  font-size: 2.75rem;
}

.media-logo-des {
  font-size: 1.25rem;
  color: #6b6084;
  margin: 1rem 0rem;
  width: 60%;
}

.media-logo-format-title {
  font-family: EuclidSemibold;
  font-size: 1.25rem;
}

.media-logo-format-container {
  display: flex;
  column-gap: 1rem;
  margin: 1rem 0rem;
}

.media-logo-format-container>div {
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border-radius: 5px;
  font-size: 1.25rem;
  transition: all 0.3s;
}

.media-logo-format-container>div:hover {
  color: #0047ff;
}

.media-leader-card {
  width: 25%;
}

.media-leader-contet-container {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  box-sizing: border-box;
  column-gap: 1rem;
}

.media-leader-img {
  width: 100%;
  background: #f5f5f5;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}

.media-leader-img>img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.media-leader-card-name {
  font-size: 1.5rem;
  font-family: EuclidMedium;
}

.media-leader-card-role {
  color: #0047ff;
  font-size: 1.25rem;
  font-family: EuclidSemibold;
}

.media-leader-card-container {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  margin-bottom: 6rem;
}

.media-leader-download-bg {
  min-width: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 5px;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .mediakit-hero-section {
    height: 37rem;
  }

  .media-container {
    padding: 0rem 1.5rem;
  }

  .media-logos-container {
    display: flex;
    flex-direction: column;
  }

  .media-logo-content-container {
    width: 100%;
    /* padding: 1rem 0rem; */
  }

  .media-section-heading {
    padding: 1.5rem 0rem;
    text-align: center;
    font-size: 1.5rem;
  }

  .media-logo-title {
    font-size: 1.5rem;
    padding: 1rem 0rem;
  }

  .media-logo-des {
    width: 100%;
  }

  .media-logo-des,
  .media-logo-format-title,
  .media-logo-format-container>div {
    font-size: 1rem;
  }

  .media-logo-format-container>div {
    padding: 0.5rem 0.75rem;
  }

  .media-logo-img {
    width: 100%;
    height: 11rem;
    margin-bottom: 2rem;
  }

  .media-leader-card-container {
    display: flex;
    flex-direction: column;
  }

  .media-leader-card {
    width: 100%;
  }

  .media-leader-card-name {
    font-size: 1.25rem;
  }

  .media-leader-contet-container {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }
}
.partners-hero {
  width: 100%;
  height: 100vh;
  background: rgb(49, 8, 139);
  background: linear-gradient(
    0deg,
    rgba(49, 8, 139, 1) 0%,
    rgba(13, 2, 37, 1) 80%,
    rgba(13, 2, 37, 1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
  color: #fff;
  font-weight: 600;
}
.partners-container {
  padding: 7rem 5rem;
  box-sizing: border-box;
}
.partner-title {
  color: #0047ff;
  font-family: EuclidSemibold;
  font-size: 1.25rem;
  padding: 1rem 0rem;
}
.partner-heading {
  font-family: EuclidSemibold;
  font-size: 2rem;
  width: 70%;
}
.partner-des {
  color: #6b6084;
  width: 70%;
  font-size: 1.25rem;
  margin-top: 1rem;
}
/* .partners-detail-container{
   display: flex;
  row-gap: 5rem;
  overflow-x: auto;
  margin: 5rem 0rem;
} */
.partners-img-container {
  display: flex;
  column-gap: 5rem;
  overflow-x: auto;
  margin: 5rem 0rem;
}
.partners-img-container > div {
  width: 32%;
}
.partners-img-container > div > img {
  width: 100%;
  object-fit: cover;
}
.partner-data-card {
  display: flex;
  justify-content: space-between;
  margin: 3rem 0rem;
  padding: 1rem;
  border-bottom: 1px solid #e5e5e5;
}
.partner-data-card-content > div {
  font-family: EuclidSemibold;
  font-size: 36px;
}
.partner-data-card-content > p {
  width: 80%;
  color: #6b6084;
  font-size: 20px ;
  margin: 1.2rem 0;
  /* padding: 1rem; */
}
.partner-data-card-img {
  width: 35%;
}
.partner-data-card-img > img {
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .partners-hero {
    height: 37rem;
  }
  .partners-container {
    padding: 2rem 1.55rem;
    box-sizing: border-box;
  }
  .partner-heading {
    width: 100%;
    font-size: 1.25rem;
  }
  .partner-des {
    width: 100%;
    font-size: 1rem;
  }
  .partners-img-container {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    width: 100%;
  }
  .partners-img-container > div {
    width: 100%;
  }
  .partner-data-card {
    display: flex;
    flex-direction: column;
  }
  .partner-data-card-img {
    width: 100%;
  }
  .partner-data-card-content > div {
    font-size: 1.5rem;
  }
  .partner-data-card-content > p {
    font-size: 1rem;
    width: 100%;
  }
}

/* Apply a global box-sizing rule for better layout control */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}

/* Container for the live event section */
.live-event {
    width: 100%;

    /* allows the container to grow if needed */
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

/* Container for the top event type buttons */
.all-btn-evt {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 1rem 0;
}

/* Styling for event type buttons */
/* .all-btn {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1rem;
    text-align: center;
    background-color: white;
    color: black;
    
    border: 0px;
    border-right: 1px solid #B9BCC7;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-size: 20px;
    font-family: EuclidMedium;
}

.all-btn:hover {
    background-color: #0047ff;
    color: white;
    transform: scale(1.05);
} */

/* Container for event status buttons */
.cnt-btn-evt {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    font-size: 20px;
}

/* Styling for event status buttons */
.cnt-btn {
    flex: 1 1;
    min-width: 80px;
    padding: 0.5rem 1rem;
    text-align: center;
    background-color: #f5f5f5;
    color: black;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 7px;
    font-family: EuclidMedium;
    
}

.cnt-btn:hover {
    background-color: #e0e0e0;
    color: #0047ff;
    transform: scale(1.05);
}

/* Styling for the event card */
.event-card {
    width: 100%;
    max-width: 100%;
    height: 50%;
    /* prevents the card from getting too wide */
    margin: 2rem auto;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid;
    /* background-color: white; */
    /* transition: all 0.3s ease-in-out; */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.past-event-card {
    width: 30%;
    margin: 10px;
    background-color: #f8f8f8;
    overflow: hidden;
}

.event-image {
    background-size: cover;
    background-position: center;
    height: 200px;
}

.event-details {
    padding: 15px;
}

.learn-more-btn {
    border: none;
    color: #6B6084;
    background: #F8FAFF;
    padding: 10px 20px;
    cursor: pointer;
}
.privacy-container {
    margin:5px 90px;
     display: flex;
     flex-direction: column;
     align-items: center;
    
     font-family: Arial, sans-serif;
   }
   .privacy-content {
     width: 100%;
     background-color: #ffffff;
     padding: 30px;           
     margin:0 20%;
   }
   .privacy-title {
     font-size: 28px;
       font-family: EuclidBold;
       font-style: none;
     font-weight: bold;
     color: #333;
     text-align: center;
     /* margin-bottom: 20px; */
     margin-top: 50px;
     margin-bottom: 20px;
  

   }
   .last-updated {
     font-size: 14px;
     color: #666;
     text-align: center;
     margin-bottom: 20px;
   }
   .section {
     margin-bottom: 30px;
   }
   .section h2 {
     font-size: 22px;
     font-weight: 600;
     color: #333;
     margin-bottom: 15px;
   }
   .section p {
     font-size: 16px;
     color: #444;
     line-height: 1.6;
     margin-bottom: 15px;
   }
   .section ul {
     list-style-type: disc;
     padding-left: 30px;
     margin-top: 10px;
   }
   .section ul li {
     font-size: 16px;
     color: #444;
     line-height: 1.6;
     margin-bottom: 8px;
   }
   .bold {
     font-weight: bold;
   }
   @media (max-width: 600px) {
     .privacy-container {
       padding: 20px 10px;
     }
     .privacy-content {
       padding: 20px;
     }
     .privacy-title {
       font-size: 24px;
     }
     .section h2 {
       font-size: 20px;
     }
     .section p, .section ul li {
       font-size: 14px;
     }
   }

   @media (min-width: 320px) and (max-width: 425px) {
     .privacy-container {
       padding: 20px 10px;
       margin-top: 70px;
       margin-right: 0px;
       margin-left: 0px;
     }
     .privacy-content {
       padding: 20px;
     }
    }
.sitemap-page-container {
    padding: 40px 20px;
    background-color: #F5F5F5;
    min-height: 100vh;
  }
  
  .sitemap-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* Allow horizontal scrolling if content overflows */
  }
  
  .sitemap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .sitemap-breadcrumb {
    font-size: 14px;
    color: #666;
  }
  
  .breadcrumb-home {
    cursor: pointer;
    color: #007BFF;
  
  }
  
  .breadcrumb-home:hover {
    text-decoration: underline;
  }
  
  .sitemap-close-button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
  }
  
  .sitemap-close-button:hover {
    color: #000;
  }
  
  .sitemap-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    justify-content: center;
  
    display: flex;
  }
  
  .sitemap-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
    grid-gap: 20px;
    gap: 20px; /* Reduced gap to prevent overflow */
    width: 100%; /* Ensure it doesn't exceed the wrapper */
  }
  
  .sitemap-section {
    min-width: 200px; /* Reduced min-width to fit better */
    margin-bottom: 20px;
  }
  
  .sitemap-section-content {
    margin-top: 10px;
  }
  
  .sitemap-link {
    font-size: 16px;
    color: #007BFF;
    cursor: pointer;
    margin: 5px 0;
    display: block;
  }
  
  .sitemap-link:hover {
    text-decoration: underline;
  }
  
  .sitemap-link-bold {
    font-weight: 600;
    color: #333;
  }
  .pk{
  /* display: flex; */
  position: relative;
  top: 1500px;
  right: 800px;
  
  }
  
  .sitemap-section-subheader {
    margin-top: 15px;
  }
  
  .sitemap-nested-level-1 {
    margin-left: 20px;
  }
  
  .sitemap-nested-level-2 {
    margin-left: 20px;
  }
  
  .sitemap-nested-level-3 {
    margin-left: 20px;
  }
  
  .sitemap-no-data {
    font-size: 14px;
    color: #999;
    margin: 10px 0;
  }
  
  .sitemap-search {
    margin: 20px 0;
  }
  
  .sitemap-search-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  
  .sitemap-search-input:focus {
    outline: none;
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  }
  .whatsnew{
    color: #007BFF;
  
  }
  .competition-con{
   color: #333;
    display: flex;
    position: relative;
    bottom: 163px;
    gap: 80px;
    left: 200px;
  }
.industries-hero {
  /* background: linear-gradient(135deg, #1f1b2e 0%, #2b2b6d 50%, #6b21a8 100%); */
  padding: 80px 20px 40px 20px;
  /* color: #ffffff; */
}

.industries-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.industries-hero h1 {
  margin: 0 0 10px 0;
  font-size: 40px;
  font-weight: 800;
}

.industries-hero p {
  margin: 0 auto 24px auto;
  max-width: 760px;
  opacity: 0.9;
}

.clt-title-section{
  color: #6B6084;
  /* color: #6B6084; */
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: EuclidSemibold;
  margin: 0 0 20px 0;
}

.industries-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.industry-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid black;
  background: rgba(255, 255, 255, 0.08);
  /* color: #ffffff; */
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.industry-pill:hover {
  transform: translateY(-2px);
}

.industry-pill.active {
  background: #31088b;
  color: #ffffff;
  border-color: #ffffff;
}

.pill-icon {
  font-size: 18px;
}

.pill-text {
  font-weight: 600;
  font-size: 14px;
}

.industries-grid-section {
  padding: 50px 20px;
  /* background: #f7f8fb; */
}

.industries-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 18px;
  gap: 18px;
}

.industry-card {
  background: #ffffff;
  border: 1px solid #e9ecf2;
  border-radius: 16px;
  padding: 18px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(43, 43, 109, 0.12);
  border-color: #dbe1ee;
}

.industry-card.selected {
  /* border-color: #6b21a8; */
  box-shadow: 0 14px 26px rgba(107, 33, 168, 0.18);
}

.industry-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.industry-icon {
  font-size: 24px;
  padding: 0.3rem;
  background: #31088b;
  color: #ffffff;
  border-radius: 30%;

}

.industry-title {
  font-weight: 700;
  font-size: 18px;
  color: #1f2937;
}

.industry-desc {
  color: #4b5563;
  font-size: 14px;
  margin: 0 0 14px 0;
}

.industry-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f4f6fb;
  color: #0047ff;
  border: 1px solid #e4e8f3;
  cursor: pointer;
  font-weight: 600;
}

.btn-link:hover {
  background: #eaf0ff;
  border-color: #d7e1ff;
}

/* .industries-roadmap {
  background: #ffffff;
  padding: 50px 20px;
}

.industries-roadmap-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.roadmap-heading {
  text-align: center;
  margin: 0 0 22px 0;
  font-size: 28px;
  color: #1f2937;
}

.industry-roadmap-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

.industry-roadmap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 16px;
  position: relative;
}

.industry-roadmap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #6b21a8);
  border-radius: 2px;
}

.industry-step {
  position: relative;
  background: #f6f8ff;
  border: 1px solid #e3e7ff;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
}

.step-badge {
  position: absolute;
  top: 5px;
  left: 16px;
  background: #31088b;
  
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 3px 8px rgba(107, 33, 168, 0.25);
}

.step-body {
  padding-top: 8px;
}

.step-title {
  font-weight: 700;
  color: #1f2937;
  font-size: 16px;
  margin: 0;
}

.step-desc {
  color: #4b5563;
  font-size: 14px;
  margin: 6px 0 0 0;
} */

.industries-roadmap {
  padding: 40px 20px;
  background-color: #f9f9f9;
}

.roadmap-heading {
  text-align: center;
  margin-bottom: 30px;
}

.industry-roadmap-scroll {
  overflow-x: auto;
}

.industry-roadmap {
  display: flex;
  gap: 20px;
  padding: 20px 0;
}

.industry-step {
  min-width: 200px;
  text-align: center;
}

.step-badge {
  background-color: #0052cc;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.step-body .step-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.step-desc {
  font-size: 0.9rem;
  color: #666;
}

.forge-section {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}


/* Actions */
.industries-actions {
  background: #ffffff;
  padding: 24px 20px;
  border-top: 1px solid #eef1f7;
  border-bottom: 1px solid #eef1f7;
}

.industries-actions-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e9ecf2;
  background: #f6f8ff;
  color: #0047ff;
  font-weight: 700;
  cursor: pointer;
}

.action-btn:hover {
  background: #eef2ff;
}

.action-btn.primary {
  background: #31088b;
  /* background: #6b21a8; */
  color: #ffffff;
  border-color:
    #6b21a8;
}

.action-btn.primary:hover {
  filter: brightness(1.05);
}

/* Stats */
/* .industries-stats {
  background: #f7f8fb;
  padding: 26px 20px;
}

.industries-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat-card {
  background: #ffffff;
  border: 1px solid #e9ecf2;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #1f2937;
}

.stat-key {
  margin-top: 6px;
  font-size: 13px;
  color: #4b5563;
} */

.industries-stats {
  background: #f7f8fb;
  padding: 26px 20px;
  width: 80%;
  margin: auto;
}

.industries-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.stat-card {
  background: #ffffff;
  border: 1px solid #e9ecf2;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #1f2937;
}

.stat-key {
  margin-top: 6px;
  font-size: 13px;
  color: #4b5563;
}

/* FAQ */
.industries-faq {
  background: #ffffff;
  padding: 46px 20px;
}

.industries-faq-inner {
  max-width: 900px;
  margin: 0 auto;
}

.faq-heading {
  text-align: center;
  color: #6B6084;
  /* color: #6B6084; */
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: EuclidSemibold;
  margin: 0 0 20px 0;
}

.faq-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.faq-item {
  border: 1px solid #e9ecf2;
  border-radius: 14px;
  background: #f8f9ff;
  overflow: hidden;
  cursor: pointer;
}

.faq-q {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #2b2b6d;
}

.faq-a {
  padding: 0 16px 12px 16px;
  overflow: hidden;
}

.faq-a p {
  margin: 0;
  color: #4b5563;
}

.faq-arrow {
  transition: transform .2s ease;
}

.faq-arrow.rot {
  transform: rotate(90deg);
}

@media (max-width: 991px) {
  .industries-hero {
    padding: 60px 16px 30px 16px;
  }

  .industries-hero h1 {
    font-size: 32px;
  }

  .industry-roadmap::before {
    top: 28px;
  }
}

@media (max-width: 767px) {
  .industries-hero h1 {
    font-size: 26px;
  }

  .industry-roadmap {
    grid-auto-columns: minmax(240px, 80%);
  }
}

@media (max-width: 479px) {
  .industry-roadmap {
    grid-auto-columns: 90%;
  }
}


.indus-bld-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
  color: #172b4d;
}

.indus-bld-header {
  text-align: center;
  margin-bottom: 60px;
}

.indus-bld-header .small-text {
  color: #0052cc;
  font-weight: 500;
}

.indus-bld-header h2 {
  font-size: 28px;
  font-weight: 700;
}

.indus-bld-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 80px;
  gap: 40px;
}

.indus-bld-section.reverse {
  flex-direction: row-reverse;
}

.indus-bld-text {
  flex: 1 1;
}

.indus-bld-text h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
}

.indus-bld-text p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.indus-bld-text a {
  color: #0052cc;
  text-decoration: none;
  font-weight: 500;
}

.indus-bld-image {
  flex: 1 1;
  text-align: center;
}

.indus-bld-image img {
  max-width: 100%;
  height: auto;
}

.indus-bld-quote {
  background: #31088B;
  width: 80%;
  margin: auto;
  /* background: #253858; */
  color: white;
  padding: 40px;
  border-radius: 10px;
  margin-bottom: 80px;
  text-align: center;
}

.indus-bld-quote blockquote {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.indus-bld-examples h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.indus-bld-examples h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}
.industries-row-section {
  padding: 60px 20px;
  background: #ffffff;
  color: #172b4d;
}

.industries-row-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 48px;
  gap: 48px;
}

/* Row container */
.industry-row {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 24px;
  /* border: 1px solid #e9ecf2;
  border-radius: 16px; */
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  background: #ffffff;
}

/* Hover & selected effect */
.industry-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(43, 43, 109, 0.12);
  /* border-color: #dbe1ee; */
}

.industry-card.selected {
  box-shadow: 0 14px 26px rgba(107, 33, 168, 0.18);
  /* border-color: #6b21a8; */
}

/* Alternate sides */
.industry-row.reverse {
  flex-direction: row-reverse;
}

/* Image */
.industry-image-wrap {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
}

.industry-image {
  width: 320px;
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
  object-fit: cover;
  border: 1px solid #eef1f7;
  background: #fff;
  padding: 6px;
}

/* Text section */
.industry-content {
  flex: 1 1 55%;
}

.industry-row-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1f2937;
}

.industry-row-desc {
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Buttons */
.industry-row-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #31088b;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-link:hover {
  background: #4e1cb2;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f4f6fb;
  color: #0047ff;
  border: 1px solid #e4e8f3;
  cursor: pointer;
  font-weight: 600;
}

.btn-outline:hover {
  background: #eaf0ff;
}
.btn-outline1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f4f6fb;
  color: #0047ff;
  border: 1px solid #e4e8f3;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-outline1:hover {
  background: #eaf0ff;
  border-color: #d7e1ff;
}

/* Responsive */
@media (max-width: 991px) {
  .industry-row {
    gap: 18px;
  }

  .industry-image {
    width: 260px;
  }
}

@media (max-width: 767px) {
  .industry-row {
    flex-direction: column;
    text-align: center;
  }

  .industry-row.reverse {
    flex-direction: column;
  }

  .industry-image {
    width: 70%;
    max-width: 420px;
  }

  .industry-row-actions {
    justify-content: center;
  }
}

/* Client Visit Page Styles */

.client-visit-page {
  min-height: 100vh;
  background: #ffffff;
}

/* Welcome Section */
.welcome-section {
  padding: 100px 0;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  /* background: linear-gradient(to bottom, #2a1e5c, #6b21a8); */
  background: linear-gradient(0deg, rgba(49, 8, 139, 1) 0%, rgba(13, 2, 37, 1) 80%, rgba(13, 2, 37, 1) 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* .welcome-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
} */

.welcome-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 80px;
  gap: 80px;
  align-items: center;
}

.welcome-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.welcome-text {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.welcome-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.welcome-subtitle {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.4;
  font-weight: 500;
}

.welcome-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.6;
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.welcome-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 18px 35px;
  border: none;
  border-radius: 15px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  min-height: 65px;
}

.welcome-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.welcome-btn:hover::before {
  left: 100%;
}

.welcome-btn.primary {
  background: #ffffff;
  color: #0047ff;
  /* color: #667eea; */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.welcome-btn.primary:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

.welcome-btn.secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.welcome-btn.secondary:hover {
  background: #ffffff;
  color: #667eea;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.btn-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.btn-text {
  /* flex: 1; */
  text-align: center;
}

.btn-arrow-clt {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s ease;
  transform: translateX(5px) rotate(-90deg);
}

.btn-arrow-idt {
  font-size: 1.4rem;
  line-height: 1;

  transition: transform 0.3s ease;
  transform: translateX(0px) rotate(-45deg);
}

.welcome-btn:hover .btn-arrow-idt {
  transform: translateX(8px) rotate(-90deg);
}

/* Welcome Visual */
.welcome-visual {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-cards {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 25px;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  animation: float 4s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-card .card-icon {
  font-size: 2rem;
  line-height: 1;
}

.floating-card .card-text {
  font-size: 1.1rem;
  text-align: center;
}

.card-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.card-2 {
  top: 20%;
  right: 15%;
  animation-delay: 1s;
}

.card-3 {
  bottom: 30%;
  left: 5%;
  animation-delay: 2s;
}

.card-4 {
  bottom: 15%;
  right: 10%;
  animation-delay: 3s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

/* Roadmap Section */
.roadmap-section {
  padding: 100px 0;
  background: #f8f9fa;
  position: relative;
}

.roadmap-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.roadmap-header {
  text-align: center;
  /* margin-bottom: 80px; */
}

.roadmap-title {
  color: #6B6084;
  /* color: #6B6084; */
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: EuclidSemibold;
  margin: 0 0 20px 0;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  background: #6b6084;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

}

.roadmap-subtitle {
  font-size: 1.3rem;
  color: #6c757d;
  margin: 0 0 40px 0;
  max-width: 95%;
  margin: 0 auto 40px auto;
  line-height: 1.6;
  text-align: center;
}

/* Department Selector */
.department-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.dept-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 25px;
  background: #ffffff;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-width: 140px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.dept-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s;
}

.dept-btn:hover::before {
  left: 100%;
}

.dept-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--dept-color);
}

.dept-btn.active {
  background: linear-gradient(135deg, var(--dept-color) 0%, var(--dept-color) 100%);
  color: #ffffff;
  border-color: var(--dept-color);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.dept-btn.active::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.dept-icon {
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.dept-btn:hover .dept-icon {
  transform: scale(1.1);
}

.dept-name {

  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  font-family: EuclidMedium;
  text-align: center;
  line-height: 1.2;
}

.dept-btn.active .dept-name {
  color: #ffffff;
}


/* Why Choose Us Section */
.why-choose-section {
  padding: 100px 0;
  background: #ffffff;
}

.why-choose-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.why-choose-header {
  text-align: center;
  margin-bottom: 80px;
}

.why-choose-title {
  color: #6B6084;
  /* color: #6B6084; */
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: EuclidSemibold;
  /* color: #2c3e50; */
  margin: 0 0 20px 0;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  background: #6b6084;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.why-choose-subtitle {
  font-size: 1.3rem;
  color: #6c757d;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 30px;
  gap: 30px;
}

.why-choose-card {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #f1f3f4;
}

.why-choose-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 15px 0;
}

.card-description {
  font-size: 1rem;
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
}

/* CTA Section */
.cta-section {
  padding: 100px 0;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  background: linear-gradient(135deg, rgba(49, 8, 139, 1) 0%, rgba(13, 2, 37, 1) 80%, rgba(13, 2, 37, 1) 100%);
  position: relative;
  overflow: hidden;
}

/* .cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
  pointer-events: none;
} */

.cta-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.cta-content {
  text-align: center;
  color: #ffffff;
}

.cta-title {
  /* color: #6B6084; */
  /* color: #6B6084; */
  font-size: 60px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: EuclidSemibold;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cta-description {
  font-size: 1.3rem;
  margin: 0 0 40px 0;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 20px 40px;
  background: #ffffff;
  color: #0047ff;
  /* color: #667eea; */
  border: none;
  border-radius: 15px;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.cta-button .btn-icon {
  font-size: 1.5rem;
}

.cta-button .btn-text {
  font-weight: 600;
}

.cta-button .btn-arrow {
  font-size: 1.4rem;
  transition: transform 0.3s ease;
  transform: translateX(5px) rotate(-90deg);
}

.cta-button:hover .btn-arrow {
  transform: translateX(5px);
}

/* Responsive Design */

/* Large Screens (1200px and up) */
@media (min-width: 1200px) {

  .welcome-container,
  .roadmap-container,
  .why-choose-container,
  .cta-container {
    max-width: 1600px;
    padding: 0 40px;
  }

  .welcome-title {
    font-size: 4rem;
  }

  .welcome-subtitle {
    font-size: 1.7rem;
  }

  .welcome-description {
    font-size: 1.4rem;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 3.5rem;
  }

  .why-choose-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Roadmap design matching the reference image with alternating layout */
.roadmap-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
}

.roadmap-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom,
      #e0e0e0 0px,
      #e0e0e0 8px,
      transparent 8px,
      transparent 16px);
  transform: translateX(-50%);
}

.roadmap-timeline::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #667eea;
  transform: translateX(-50%);
  z-index: 1;
}

.roadmap-step {
  position: relative;
  background: #f0f8ff;
  border: 2px solid #667eea;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.roadmap-step:nth-child(odd) {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.roadmap-step:nth-child(even) {
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}

.roadmap-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.roadmap-step.active {
  border-color: #ff6b35;
  background: #fff5f0;
}

.roadmap-step.completed {
  border-color: #28a745;
  background: #f0fff4;
}

.step-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6b35;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  z-index: 3;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.roadmap-step.active .step-number {
  background: #ff6b35;
}

.roadmap-step.completed .step-number {
  background: #28a745;
}

.step-line {
  display: none;
}

/* .step-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
} */

.step-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-align: left;
  display: block;
  color: #667eea;
}

.step-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  text-align: left;
  line-height: 1.3;
}

.step-description {
  font-size: 1rem;
  color: #6c757d;
  margin: 0;
  line-height: 1.6;
  text-align: left;
}

.step-duration {
  display: none;
}

.step-details {
  display: none;
}

.detail-item {
  display: none;
}

/* Desktop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .welcome-container {
    gap: 60px;
  }

  .welcome-title {
    font-size: 3rem;
  }

  .welcome-subtitle {
    font-size: 1.3rem;
  }

  .welcome-description {
    font-size: 1.1rem;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 2.5rem;
  }

  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet Landscape (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .welcome-section {
    padding: 80px 0;
    min-height: auto;
  }

  .welcome-container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .welcome-title {
    font-size: 2.5rem;
  }

  .welcome-subtitle {
    font-size: 1.2rem;
  }

  .welcome-description {
    font-size: 1rem;
  }

  .welcome-actions {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .welcome-btn {
    flex: 1 1;
    max-width: 250px;
  }

  .welcome-visual {
    height: 400px;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 80px 0;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 2.2rem;
  }

  .roadmap-timeline {
    max-width: 900px;
    gap: 35px;
  }

  .roadmap-step {
    padding: 22px;
    width: 48%;
  }

  .step-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .step-title {
    font-size: 1.2rem;
  }

  .step-description {
    font-size: 0.95rem;
  }

  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .why-choose-card {
    padding: 30px 25px;
  }

  .department-selector {
    gap: 12px;
  }

  .dept-btn {
    padding: 15px 20px;
    min-width: 120px;
  }

  .dept-icon {
    font-size: 1.5rem;
  }

  .dept-name {
    font-size: 0.8rem;
  }
}

/* Tablet Portrait (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .welcome-section {
    padding: 60px 0;
  }

  .welcome-container {
    gap: 40px;
    padding: 0 25px;
  }

  .welcome-title {
    font-size: 2.2rem;
  }

  .welcome-subtitle {
    font-size: 1.1rem;
  }

  .welcome-description {
    font-size: 0.95rem;
  }

  .welcome-actions {
    flex-direction: column;
    gap: 15px;
  }

  .welcome-btn {
    padding: 16px 30px;
    font-size: 1.1rem;
    min-height: 60px;
  }

  .welcome-visual {
    height: 350px;
  }

  .floating-card {
    padding: 15px 20px;
    font-size: 0.9rem;
  }

  .floating-card .card-icon {
    font-size: 1.5rem;
  }

  .floating-card .card-text {
    font-size: 1rem;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 60px 0;
  }

  .roadmap-container,
  .why-choose-container,
  .cta-container {
    padding: 0 25px;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 2rem;
  }

  .roadmap-subtitle,
  .why-choose-subtitle,
  .cta-description {
    font-size: 1.1rem;
  }

  .roadmap-timeline {
    max-width: 800px;
    gap: 30px;
  }

  .roadmap-step {
    padding: 20px;
    width: 50%;
  }

  .step-number {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .step-title {
    font-size: 1.1rem;
  }

  .step-description {
    font-size: 0.9rem;
  }

  .why-choose-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-choose-card {
    padding: 25px 20px;
  }

  .cta-button {
    padding: 18px 35px;
    font-size: 1.2rem;
  }

  .department-selector {
    gap: 10px;
  }

  .dept-btn {
    padding: 12px 16px;
    min-width: 100px;
  }

  .dept-icon {
    font-size: 1.3rem;
  }

  .dept-name {
    font-size: 0.75rem;
  }
}

/* Mobile Large (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  .welcome-section {
    padding: 50px 0;
  }

  .welcome-container {
    gap: 30px;
    padding: 0 20px;
  }

  .welcome-title {
    font-size: 1.8rem;
  }

  .welcome-subtitle {
    font-size: 1rem;
  }

  .welcome-description {
    font-size: 0.9rem;
  }

  .welcome-btn {
    padding: 14px 25px;
    font-size: 1rem;
    min-height: 55px;
  }

  .welcome-visual {
    height: 300px;
  }

  .floating-card {
    padding: 12px 16px;
    font-size: 0.8rem;
  }

  .floating-card .card-icon {
    font-size: 1.3rem;
  }

  .floating-card .card-text {
    font-size: 0.9rem;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 50px 0;
  }

  .roadmap-container,
  .why-choose-container,
  .cta-container {
    padding: 0 20px;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 1.8rem;
  }

  .roadmap-subtitle,
  .why-choose-subtitle,
  .cta-description {
    font-size: 1rem;
  }

  .roadmap-timeline {
    max-width: 700px;
    gap: 25px;
  }

  .roadmap-step {
    padding: 18px;
    width: 52%;
  }

  .step-number {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }

  .step-title {
    font-size: 1rem;
  }

  .step-description {
    font-size: 0.85rem;
  }

  .why-choose-card {
    padding: 20px 15px;
  }

  .card-icon {
    font-size: 2.5rem;
  }

  .card-title {
    font-size: 1.3rem;
  }

  .card-description {
    font-size: 0.9rem;
  }

  .cta-button {
    padding: 16px 30px;
    font-size: 1.1rem;
  }

  .department-selector {
    gap: 8px;
  }

  .dept-btn {
    padding: 10px 12px;
    min-width: 80px;
  }

  .dept-icon {
    font-size: 1.2rem;
  }

  .dept-name {
    font-size: 0.7rem;
  }
}

/* Mobile Medium (400px to 479px) */
@media (min-width: 400px) and (max-width: 479px) {
  .welcome-section {
    padding: 40px 0;
  }

  .welcome-container {
    gap: 25px;
    padding: 0 15px;
  }

  .welcome-title {
    font-size: 1.6rem;
  }

  .welcome-subtitle {
    font-size: 0.95rem;
  }

  .welcome-description {
    font-size: 0.85rem;
  }

  .welcome-btn {
    padding: 12px 20px;
    font-size: 0.95rem;
    min-height: 50px;
  }

  .welcome-visual {
    height: 250px;
  }

  .floating-card {
    padding: 10px 14px;
    font-size: 0.75rem;
  }

  .floating-card .card-icon {
    font-size: 1.2rem;
  }

  .floating-card .card-text {
    font-size: 0.8rem;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 40px 0;
  }

  .roadmap-container,
  .why-choose-container,
  .cta-container {
    padding: 0 15px;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 1.6rem;
  }

  .roadmap-subtitle,
  .why-choose-subtitle,
  .cta-description {
    font-size: 0.95rem;
  }

  .roadmap-timeline {
    max-width: 600px;
    gap: 20px;
  }

  .roadmap-step {
    padding: 16px;
    width: 55%;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .step-title {
    font-size: 0.95rem;
  }

  .step-description {
    font-size: 0.8rem;
  }

  .why-choose-card {
    padding: 18px 12px;
  }

  .card-icon {
    font-size: 2rem;
  }

  .card-title {
    font-size: 1.2rem;
  }

  .card-description {
    font-size: 0.85rem;
  }

  .cta-button {
    padding: 14px 25px;
    font-size: 1rem;
  }

  .department-selector {
    gap: 6px;
  }

  .dept-btn {
    padding: 8px 10px;
    min-width: 70px;
  }

  .dept-icon {
    font-size: 1.1rem;
  }

  .dept-name {
    font-size: 0.65rem;
  }
}

/* Mobile Small (360px to 399px) - Stack vertically */
@media (min-width: 360px) and (max-width: 399px) {
  .roadmap-timeline {
    max-width: 350px;
    gap: 20px;
  }

  .roadmap-step {
    padding: 15px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .roadmap-step:nth-child(odd),
  .roadmap-step:nth-child(even) {
    margin: 0 auto;
    text-align: center;
  }

  .step-number {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .step-icon {
    text-align: center;
  }

  .step-title {
    font-size: 1rem;
    text-align: center;
  }

  .step-description {
    font-size: 0.8rem;
    text-align: center;
  }
}

/* Mobile Extra Small (320px to 359px) - Stack vertically */
@media (min-width: 320px) and (max-width: 359px) {
  .welcome-section {
    padding: 35px 0;
  }

  .welcome-container {
    gap: 20px;
    padding: 0 12px;
  }

  .welcome-title {
    font-size: 1.4rem;
  }

  .welcome-subtitle {
    font-size: 0.9rem;
  }

  .welcome-description {
    font-size: 0.8rem;
  }

  .welcome-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
    min-height: 45px;
  }

  .welcome-visual {
    height: 220px;
  }

  .floating-card {
    padding: 8px 12px;
    font-size: 0.7rem;
  }

  .floating-card .card-icon {
    font-size: 1.1rem;
  }

  .floating-card .card-text {
    font-size: 0.75rem;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 35px 0;
  }

  .roadmap-container,
  .why-choose-container,
  .cta-container {
    padding: 0 12px;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 1.4rem;
  }

  .roadmap-subtitle,
  .why-choose-subtitle,
  .cta-description {
    font-size: 0.9rem;
  }

  .roadmap-timeline {
    max-width: 320px;
    gap: 18px;
  }

  .roadmap-step {
    padding: 12px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .roadmap-step:nth-child(odd),
  .roadmap-step:nth-child(even) {
    margin: 0 auto;
    text-align: center;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .step-icon {
    text-align: center;
  }

  .step-title {
    font-size: 0.9rem;
    text-align: center;
  }

  .step-description {
    font-size: 0.75rem;
    text-align: center;
  }

  .why-choose-card {
    padding: 15px 10px;
  }

  .card-icon {
    font-size: 1.8rem;
  }

  .card-title {
    font-size: 1.1rem;
  }

  .card-description {
    font-size: 0.8rem;
  }

  .cta-button {
    padding: 12px 20px;
    font-size: 0.95rem;
  }

  .department-selector {
    gap: 5px;
  }

  .dept-btn {
    padding: 6px 8px;
    min-width: 60px;
  }

  .dept-icon {
    font-size: 1rem;
  }

  .dept-name {
    font-size: 0.6rem;
  }
}

/* Mobile Extra Small (320px to 359px) */
@media (min-width: 320px) and (max-width: 359px) {
  .welcome-section {
    padding: 30px 0;
  }

  .welcome-container {
    gap: 18px;
    padding: 0 10px;
  }

  .welcome-title {
    font-size: 1.2rem;
  }

  .welcome-subtitle {
    font-size: 0.85rem;
  }

  .welcome-description {
    font-size: 0.75rem;
  }

  .welcome-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    min-height: 40px;
  }

  .welcome-visual {
    height: 200px;
  }

  .floating-card {
    padding: 6px 10px;
    font-size: 0.65rem;
  }

  .floating-card .card-icon {
    font-size: 1rem;
  }

  .floating-card .card-text {
    font-size: 0.7rem;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 30px 0;
  }

  .roadmap-container,
  .why-choose-container,
  .cta-container {
    padding: 0 10px;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 1.2rem;
  }

  .roadmap-subtitle,
  .why-choose-subtitle,
  .cta-description {
    font-size: 0.85rem;
  }

  .roadmap-timeline {
    max-width: 450px;
    gap: 15px;
  }

  .roadmap-step {
    padding: 12px;
    width: 65%;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  .step-title {
    font-size: 0.85rem;
  }

  .step-description {
    font-size: 0.7rem;
  }

  .why-choose-card {
    padding: 12px 8px;
  }

  .card-icon {
    font-size: 1.5rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-description {
    font-size: 0.75rem;
  }

  .cta-button {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  .department-selector {
    gap: 4px;
  }

  .dept-btn {
    padding: 5px 6px;
    min-width: 50px;
  }

  .dept-icon {
    font-size: 0.9rem;
  }

  .dept-name {
    font-size: 0.55rem;
  }
}

/* Very Small Screens (below 320px) */
@media (max-width: 319px) {
  .welcome-section {
    padding: 25px 0;
  }

  .welcome-container {
    gap: 15px;
    padding: 0 8px;
  }

  .welcome-title {
    font-size: 1.1rem;
  }

  .welcome-subtitle {
    font-size: 0.8rem;
  }

  .welcome-description {
    font-size: 0.7rem;
  }

  .welcome-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    min-height: 35px;
  }

  .welcome-visual {
    height: 180px;
  }

  .floating-card {
    padding: 5px 8px;
    font-size: 0.6rem;
  }

  .floating-card .card-icon {
    font-size: 0.9rem;
  }

  .floating-card .card-text {
    font-size: 0.65rem;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 25px 0;
  }

  .roadmap-container,
  .why-choose-container,
  .cta-container {
    padding: 0 8px;
  }

  .roadmap-title,
  .why-choose-title,
  .cta-title {
    font-size: 1.1rem;
  }

  .roadmap-subtitle,
  .why-choose-subtitle,
  .cta-description {
    font-size: 0.8rem;
  }

  .roadmap-timeline {
    max-width: 300px;
    gap: 15px;
  }

  .roadmap-step {
    padding: 10px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .roadmap-step:nth-child(odd),
  .roadmap-step:nth-child(even) {
    margin: 0 auto;
    text-align: center;
  }

  .step-number {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

  .step-icon {
    text-align: center;
  }

  .step-title {
    font-size: 0.85rem;
    text-align: center;
  }

  .step-description {
    font-size: 0.7rem;
    text-align: center;
  }

  .why-choose-card {
    padding: 10px 6px;
  }

  .card-icon {
    font-size: 1.3rem;
  }

  .card-title {
    font-size: 0.9rem;
  }

  .card-description {
    font-size: 0.7rem;
  }

  .cta-button {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .department-selector {
    gap: 3px;
  }

  .dept-btn {
    padding: 4px 5px;
    min-width: 45px;
  }

  .dept-icon {
    font-size: 0.8rem;
  }

  .dept-name {
    font-size: 0.5rem;
  }
}

/* Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .welcome-section {
    padding: 40px 0;
    min-height: auto;
  }

  .welcome-container {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .welcome-visual {
    height: 300px;
  }

  .roadmap-section,
  .why-choose-section,
  .cta-section {
    padding: 40px 0;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  .welcome-section,
  .cta-section {
    background-attachment: fixed;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {


  .roadmap-step,
  .why-choose-card {
    /* background: #2d2d2d; */
    /* color: #ffffff; */
    border-color: #404040;
  }



  .step-description,
  .card-description {
    color: #b0b0b0;
  }

  .detail-item {
    /* background: #3d3d3d; */
    /* color: #ffffff; */
    border-color: #555;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

  .welcome-btn,
  .cta-button,
  .roadmap-step,
  .why-choose-card,
  .floating-card {
    transition: none;
  }

  .welcome-btn:hover,
  .cta-button:hover {
    transform: none;
  }

  .roadmap-step:hover {
    transform: none;
  }

  .why-choose-card:hover {
    transform: none;
  }

  .floating-card {
    animation: none;
  }
}

/* Print Styles */
@media print {

  .welcome-section,
  .cta-section {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .welcome-title,
  .cta-title {
    color: #000000 !important;
  }

  .floating-card {
    display: none;
  }
}

/* Accessibility Improvements */
@media (prefers-contrast: high) {

  .welcome-btn,
  .cta-button {
    border: 2px solid #000;
  }

  .roadmap-step,
  .why-choose-card {
    border: 2px solid #000;
  }

  .floating-card {
    border: 2px solid #000;
  }
}

/* Focus Visible for Better Accessibility */
.welcome-btn:focus-visible,
.cta-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

  .welcome-btn:hover,
  .cta-button:hover {
    transform: none;
  }

  .welcome-btn:active,
  .cta-button:active {
    transform: scale(0.95);
  }

  .roadmap-step:hover {
    transform: none;
  }

  .roadmap-step:active {
    transform: scale(0.98);
  }

  .why-choose-card:hover {
    transform: none;
  }

  .why-choose-card:active {
    transform: scale(0.98);
  }
}

.email-form {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1rem;
  background-color: #F8F9FA;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: black;
}

.form-group input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.submit-button {
  padding: 0.8rem;
  background-color: #28A745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.submit-button:hover {
  background-color: #218838;
}

.error-message {
  color: red;
  font-size: 0.9rem;
}

.success-message {
  color: green;
  font-size: 0.9rem;
}

.inquiry-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}
/* Client Inquiry Modal Styles */

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

/* Modal Container */
.modal-container {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Header */
.modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 30px 35px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"dots\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1\" fill=\"%23ffffff\" opacity=\"0.1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url%28%23dots%29\"/></svg>");
  pointer-events: none;
}

.modal-title {
  position: relative;
  z-index: 1;
  flex: 1 1;
  margin-right: 20px;
}

.modal-title h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.modal-title p {
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.4;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.modal-close-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.modal-close-btn span {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
}

/* Modal Content */
.modal-content {
  padding: 0;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
}

/* Form Styles */
.inquiry-form {
  padding: 35px;
}

/* Form Sections */
.form-section {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 25px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #667eea;
  display: inline-block;
}

/* Form Rows */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 25px;
  gap: 25px;
  margin-bottom: 25px;
}

/* Form Groups */
.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #ffffff;
  box-sizing: border-box;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-1px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #adb5bd;
  font-style: italic;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

/* Submit Status */
.submit-status {
  margin: 25px 0;
  padding: 18px 25px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}

.submit-status.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.submit-status.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-icon {
  font-size: 1.3rem;
  font-weight: bold;
}

.success-message,
.error-message {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #e9ecef;
}

.btn-primary,
.btn-secondary {
  padding: 14px 35px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f8f9fa;
  color: #6c757d;
  border: 2px solid #e9ecef;
}

.btn-secondary:hover:not(:disabled) {
  background: #e9ecef;
  transform: translateY(-1px);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Spinner */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Responsive Design */

/* Large Screens (1200px and up) */
@media (min-width: 1200px) {
  .modal-container {
    max-width: 1000px;
  }
  
  .modal-title h2 {
    font-size: 2.2rem;
  }
  
  .modal-title p {
    font-size: 1.2rem;
  }
  
  .inquiry-form {
    padding: 40px;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
}

/* Desktop (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .modal-container {
    max-width: 900px;
  }
  
  .modal-header {
    padding: 25px 30px;
  }
  
  .modal-title h2 {
    font-size: 1.8rem;
  }
  
  .inquiry-form {
    padding: 30px;
  }
}

/* Tablet Landscape (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .modal-overlay {
    padding: 15px;
  }
  
  .modal-container {
    max-width: 100%;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 20px 25px;
  }
  
  .modal-title h2 {
    font-size: 1.6rem;
  }
  
  .modal-title p {
    font-size: 1rem;
  }
  
  .inquiry-form {
    padding: 25px;
  }
  
  .form-row {
    gap: 20px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 16px;
    font-size: 0.95rem;
  }
}

/* Tablet Portrait (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .modal-overlay {
    padding: 10px;
  }
  
  .modal-container {
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .modal-title {
    margin-right: 0;
  }
  
  .modal-title h2 {
    font-size: 1.5rem;
  }
  
  .modal-title p {
    font-size: 0.95rem;
  }
  
  .modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
  }
  
  .inquiry-form {
    padding: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 15px;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 16px 25px;
  }
}

/* Mobile Large (480px to 575px) */
@media (min-width: 480px) and (max-width: 575px) {
  .modal-overlay {
    padding: 8px;
  }
  
  .modal-container {
    max-height: 98vh;
  }
  
  .modal-header {
    padding: 15px;
  }
  
  .modal-title h2 {
    font-size: 1.4rem;
  }
  
  .modal-title p {
    font-size: 0.9rem;
  }
  
  .modal-close-btn {
    width: 40px;
    height: 40px;
    top: 12px;
    right: 12px;
  }
  
  .modal-close-btn span {
    font-size: 1.5rem;
  }
  
  .inquiry-form {
    padding: 15px;
  }
  
  .form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
  }
  
  .section-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px;
    font-size: 0.95rem;
  }
  
  .form-group textarea {
    min-height: 100px;
  }
}

/* Mobile Medium (400px to 479px) */
@media (min-width: 400px) and (max-width: 479px) {
  .modal-overlay {
    padding: 5px;
  }
  
  .modal-container {
    border-radius: 15px;
  }
  
  .modal-header {
    padding: 12px;
  }
  
  .modal-title h2 {
    font-size: 1.3rem;
  }
  
  .modal-title p {
    font-size: 0.85rem;
  }
  
  .modal-close-btn {
    width: 38px;
    height: 38px;
    top: 10px;
    right: 10px;
  }
  
  .modal-close-btn span {
    font-size: 1.4rem;
  }
  
  .inquiry-form {
    padding: 12px;
  }
  
  .form-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
  }
  
  .section-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    font-size: 0.95rem;
    margin-bottom: 8px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  
  .form-group textarea {
    min-height: 80px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 12px 20px;
    font-size: 0.95rem;
  }
}

/* Mobile Small (360px to 399px) */
@media (min-width: 360px) and (max-width: 399px) {
  .modal-overlay {
    padding: 3px;
  }
  
  .modal-container {
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 10px;
  }
  
  .modal-title h2 {
    font-size: 1.2rem;
  }
  
  .modal-title p {
    font-size: 0.8rem;
  }
  
  .modal-close-btn {
    width: 35px;
    height: 35px;
    top: 8px;
    right: 8px;
  }
  
  .modal-close-btn span {
    font-size: 1.3rem;
  }
  
  .inquiry-form {
    padding: 10px;
  }
  
  .form-section {
    margin-bottom: 20px;
    padding-bottom: 12px;
  }
  
  .section-title {
    font-size: 1rem;
    margin-bottom: 12px;
  }
  
  .form-group {
    margin-bottom: 12px;
  }
  
  .form-group label {
    font-size: 0.9rem;
    margin-bottom: 6px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  
  .form-group textarea {
    min-height: 70px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

/* Mobile Extra Small (320px to 359px) */
@media (min-width: 320px) and (max-width: 359px) {
  .modal-overlay {
    padding: 2px;
  }
  
  .modal-container {
    border-radius: 10px;
  }
  
  .modal-header {
    padding: 8px;
  }
  
  .modal-title h2 {
    font-size: 1.1rem;
  }
  
  .modal-title p {
    font-size: 0.75rem;
  }
  
  .modal-close-btn {
    width: 32px;
    height: 32px;
    top: 6px;
    right: 6px;
  }
  
  .modal-close-btn span {
    font-size: 1.2rem;
  }
  
  .inquiry-form {
    padding: 8px;
  }
  
  .form-section {
    margin-bottom: 18px;
    padding-bottom: 10px;
  }
  
  .section-title {
    font-size: 0.95rem;
    margin-bottom: 10px;
  }
  
  .form-group {
    margin-bottom: 10px;
  }
  
  .form-group label {
    font-size: 0.85rem;
    margin-bottom: 5px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 7px 9px;
    font-size: 0.8rem;
  }
  
  .form-group textarea {
    min-height: 60px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}

/* Very Small Screens (below 320px) */
@media (max-width: 319px) {
  .modal-overlay {
    padding: 1px;
  }
  
  .modal-container {
    border-radius: 8px;
  }
  
  .modal-header {
    padding: 6px;
  }
  
  .modal-title h2 {
    font-size: 1rem;
  }
  
  .modal-title p {
    font-size: 0.7rem;
  }
  
  .modal-close-btn {
    width: 30px;
    height: 30px;
    top: 4px;
    right: 4px;
  }
  
  .modal-close-btn span {
    font-size: 1.1rem;
  }
  
  .inquiry-form {
    padding: 6px;
  }
  
  .form-section {
    margin-bottom: 15px;
    padding-bottom: 8px;
  }
  
  .section-title {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
  
  .form-group {
    margin-bottom: 8px;
  }
  
  .form-group label {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 6px 8px;
    font-size: 0.75rem;
  }
  
  .form-group textarea {
    min-height: 50px;
  }
  
  .btn-primary,
  .btn-secondary {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* Landscape Orientation Adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .modal-container {
    max-height: 95vh;
  }
  
  .modal-content {
    max-height: calc(95vh - 100px);
  }
  
  .inquiry-form {
    padding: 15px;
  }
  
  .form-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .modal-container {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .modal-container {
    background: #2d2d2d;
    color: #ffffff;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    background: #3d3d3d;
    border-color: #555;
    color: #ffffff;
  }
  
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: #888;
  }
  
  .section-title {
    color: #ffffff;
  }
  
  .form-group label {
    color: #ffffff;
  }
  
  .form-section {
    border-bottom-color: #555;
  }
  
  .form-actions {
    border-top-color: #555;
  }
  
  .btn-secondary {
    background: #3d3d3d;
    color: #ffffff;
    border-color: #555;
  }
  
  .btn-secondary:hover:not(:disabled) {
    background: #555;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .modal-container,
  .btn-primary,
  .btn-secondary,
  .form-group input,
  .form-group select,
  .form-group textarea {
    transition: none;
  }
  
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
  
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    transform: none;
  }
  
  .spinner {
    animation: none;
  }
}

/* Print Styles */
@media print {
  .modal-overlay {
    display: none;
  }
}

/* Accessibility Improvements */
@media (prefers-contrast: high) {
  .modal-container {
    border: 2px solid #000;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    border-width: 2px;
  }
  
  .btn-primary,
  .btn-secondary {
    border: 2px solid #000;
  }
}

/* Focus Visible for Better Accessibility */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
  
  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.95);
  }
  
  .modal-close-btn:hover {
    transform: none;
  }
  
  .modal-close-btn:active {
    transform: scale(0.9);
  }
}

.hero-container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 20% 20%, #0b0b0b, #000);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.8);
}

/* Center wrapper */
.hero-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 10;
    flex-wrap: wrap;
}

/* 6 Years Logo Animation */
.hero-logo {
    height: clamp(90px, 14vw, 170px);
    width: auto;
    opacity: 0;
    transform: translateX(-60px) scale(0.95);
    animation: fadeSlideInLeft 1.2s ease-out forwards;
}

/* STACIA Text Animation */
.hero-title {
    height: clamp(50px, 10vw, 130px);
    width: auto;
    opacity: 0;
    transform: translateX(60px) scale(0.95);
    animation: fadeSlideInRight 1.2s ease-out 1s forwards;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
}

/* Animations */
@keyframes fadeSlideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-80px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes fadeSlideInRight {
    0% {
        opacity: 0;
        transform: translateX(80px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Optional shimmer glow on STACIA */
.hero-title:hover {
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.45));
    transition: all 0.5s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-logo,
    .hero-title {
        transform: none;
        animation: none;
        opacity: 1;
    }
}
.spec-ind-page {
  background: #f6f8fb;
  color: #0b1220;
  font-family: Inter, system-ui, sans-serif;
}

/* CONTAINER */
.spec-ind-container {
  max-width: 1140px;
  margin: 28px auto;
  padding: 0 20px 48px;
}

/* HERO */
.spec-ind-hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-gap: 24px;
  gap: 24px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  align-items: center;
}
.spec-ind-hero-icon {
  font-size: 36px;
  color: #0f62fe;
  background: #eef6ff;
  border-radius: 8px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spec-ind-hero-title {
  font-size: 1.6rem;
  margin: 0;
}
.spec-ind-hero-desc {
  color: #475569;
  margin-top: 10px;
  line-height: 1.5;
}
.spec-ind-cta-row {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* BUTTONS */
.spec-ind-btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
}
.spec-ind-btn-primary {
  background: linear-gradient(180deg, #0f62fe, #0b56df);
  color: #fff;
}
.spec-ind-btn-ghost {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #0b1220;
}
.spec-ind-btn-small {
  font-size: 0.85rem;
  padding: 6px 10px;
}

/* STATS */
.spec-ind-stats {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}
.spec-ind-stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  flex: 1 1;
}
.spec-ind-stat-title {
  color: #64748b;
  font-size: 0.9rem;
}
.spec-ind-stat-value {
  font-weight: 700;
  margin-top: 6px;
}

/* MAIN SECTIONS */
.spec-ind-sections {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: 20px;
  gap: 20px;
  margin-top: 20px;
}
.spec-ind-heading {
  margin: 0 0 6px;
  font-size: 1.1rem;
}
.spec-ind-muted {
  color: #475569;
}
.spec-ind-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  gap: 14px;
}
.spec-ind-bullets {
  padding-left: 1.2rem;
  color: #334155;
}

/* PROJECTS */
.spec-ind-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 10px;
}
.spec-ind-project-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.spec-ind-project-thumb {
  width: 80px;
  height: 54px;
  background: #eef2ff;
  border-radius: 6px;
}
.spec-ind-project-name {
  font-weight: 600;
}

/* CASE STUDIES */
.spec-ind-cases {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 10px;
}
.spec-ind-case-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}
.spec-ind-case-main h4 {
  margin: 0 0 4px;
}
.spec-ind-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.spec-ind-pill {
  background: #eef2ff;
  border-radius: 14px;
  padding: 4px 8px;
  font-size: 0.85rem;
}

/* FAQ */
.spec-ind-faqs {
  margin-top: 10px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.spec-ind-faq-item {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.spec-ind-faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

/* RIGHT PANEL */
.spec-ind-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spec-ind-panel {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.spec-ind-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spec-ind-service-pill {
  background: #f3f6ff;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}
.spec-ind-related {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spec-ind-related-row {
  display: flex;
  gap: 8px;
  cursor: pointer;
  align-items: center;
}
.spec-ind-related-row img {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: #f3f6ff;
}
.spec-ind-related-title {
  font-weight: 700;
}

/* NOT FOUND */
.spec-ind-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.spec-ind-not-found {
  background: #fff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .spec-ind-hero {
    grid-template-columns: 1fr;
  }
  .spec-ind-sections {
    grid-template-columns: 1fr;
  }
  .spec-ind-two-col {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .spec-ind-projects {
    grid-template-columns: 1fr;
  }
  .spec-ind-btn {
    padding: 8px 10px;
  }
}


/*# sourceMappingURL=main.98ea4cb3.css.map*/