/* Bootstrap sets :root{scroll-behavior:smooth}. That fights GSAP ScrollTrigger's
   own scroll measurements — pins land at stale/incorrect positions and jump
   because the browser is still easing toward a scroll target ScrollTrigger has
   already measured against. GSAP's docs explicitly call this out; disable it. */
:root {
  scroll-behavior: auto !important;
}

.contact_input {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background-color: #183969;
  color: white;
  padding: 10px 15px;
  border: none;
  outline: none;
  font-size: 15px;
}

.contact_input::placeholder,
.contact_textarea::placeholder {
  color: white;
  text-transform: uppercase;
  font-size: 15px;
}

.contact_textarea {
  width: 100%;
  height: 200px;
  border-radius: 10px 15px;
  background-color: #183969;
  color: white;
  resize: none;
  padding: 10px;
  border: none;
  outline: none;
  font-size: 15px;
}

.contact_submit {
  width: 110px;
  height: 40px;
  border-radius: 30px;
  background-color: #183969;
  color: white;
  outline: none;
  border: none;
}

.social_icons {
  color: #183969;
  font-size: 25px;
}

.social_icons i,
.social_icons a {
  color: #183969;
  font-size: 25px;
}

.social_icons h5 {
  color: black;
  font-size: 16px;
  font-weight: 400;
  padding-top:8px;
}

.newsBg {
  background-image: url("../image/NEWSBG.png");
  background-size: 100% 100%;
  padding: 30px 0;
  color: white;
}

.contactSectionShade {
  background-image: url("../image/shadw 2 (2).png");
  background-size: 100% 300px;
  background-repeat: no-repeat;
  padding-top: 120px;
  box-shadow: -1px 25px 10px 0px rgba(0, 16, 30, 0.75) inset;
  -webkit-box-shadow: -1px 25px 10px 0px rgba(0, 16, 30, 0.75) inset;
  -moz-box-shadow: -1px 25px 10px 0px rgba(0, 16, 30, 0.75) inset;
}

.newsShape {
  width: 800px;
  height: 800px;
  object-fit: contain;
  position: absolute;
  right: -50px;
  bottom: -50px;
}

.bottom_slider {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.gradientBtn {
  min-width: 100px;
  height: 50px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 30px;
  border-radius: 50px;
  background: linear-gradient(90deg,
      #243b7a 0%,
      #2b4c8f 55%,
      #355fa8 100%);
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(58, 110, 220, 0.35);
  text-decoration: none;
  transition: 0.3s ease-in-out;
  text-transform: uppercase;
  font-family: "Brandon Grotesque light";
  letter-spacing: 2px;
}

.gradientBtn:hover {
  color: white;
  transform: translateY(-5px);
}

.footer {
  width: 100%;
  min-height: 100px;
  /* background-color: #000; */
  background-image: url("../image/FOOTER.jpg");
  background-size: cover;
  /* background: radial-gradient(circle at top right,
      #3f6fa3 0%,
      #1e3556 35%,
      #0b1a2d 50%,
      #070f1c 100%); */
  display: flex;
  justify-content: center;
  align-items: center;
}


.contact_gradient {
  background-color: #ffffff;
  background-image: linear-gradient(180deg,
      #0f1f3f 0%,
      #2f4f7f 35%,
      #6f8fb2 60%,
      rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 260px;
  /* THIS controls the height */
  padding-top: 100px;
  padding-bottom: 100px;
}

.footer .container {
  position: relative;
  z-index: 10;
}

.footer_white_bar {
  width: 100%;
  height: 1px;
  background-color: white;
}

.max700 {
  max-width: 700px;
}

.max900 {
  max-width: 900px;
}

.footer_logo {
  width: 250px;
}

.NewGradient {
  background:
    radial-gradient(ellipse at bottom right,
      #bad8f0 0%,
      #cde0f1 35%,
      rgba(255, 255, 255, 0.85) 60%,
      #ffffff 100%);
}

.white_bar {
  width: 100%;
  height: 1px;
  background-color: silver;
  margin-bottom: 20px;
}

.footer p,
.footer a {
  color: white;
  text-decoration: none;
  font-weight: 200;
}

.contactIcons {
  font-size: 22px;
  color: white;
}

.sg_btn {
  width: 250px;
  height: 40px;
  border-radius: 30px;
  background-color: #183969;
  background: linear-gradient(90deg,
      #243b7a 0%,
      #2b4c8f 55%,
      #355fa8 100%);
  color: white;
  outline: none;
  border: none;
  font-size: 13px;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news_slider_wrap {
  padding-left: 20px;
  overflow: hidden;
}

/* .news-slider-wrapper {
  padding-left: 200px;
  transition: padding 0.4s ease;
} */

.news_slider_wrap.no-offset,
.project_slider_wrap.no-offset,
.marketing_slider_wrap.no-offset,
.creative_slider_wrap.no-offset {
  padding-left: 0px;
}

@media (min-width: 768px) {

  .NewsPadding {
    padding-left: 8%;
  }

  .news_slider_wrap,
  .marketing_slider_wrap,
  .project_slider_wrap,
  .creative_slider_wrap {
    padding-left: 200px;
    transition: padding 0.4s ease;
  }
}

@media (min-width: 1400px) {

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 90%;
  }
}

#news-slider .splide__list {
  gap: 0 !important;
}

#news-slider .splide__slide {
  padding: 0;
  margin: 0;
}

.news_slider_box,
.project_slider_box,
.marketing_slider_box {
  width: 100%;
  height: 450px;
  overflow: hidden;
  position: relative;
  color: white;
}

.project_slider_box,
.news_slider_box {
  width: 50vw;
  min-width: 50vw;
  height: 450px;
}

.project_slider_box img,
.marketing_slider_box img {
  width: 100%;
  height: 410px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.project_slider_box p,
.marketing_slider_box p {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 5px;
  letter-spacing: 2px;
}

/* BLACK OVERLAY */
.news_slider_box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* SHOW OVERLAY ON HOVER */
.news_slider_box:hover::after {
  opacity: 1;
}

/* IMAGE */
.news_slider_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* IMAGE ZOOM */
.news_slider_box:hover img {
  transform: scale(1.1);
}

/* TITLE */
.news_slider_box span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  opacity: 0;
  z-index: 2;
  /* ABOVE OVERLAY */
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
}

/* SHOW TITLE ON HOVER */
.news_slider_box:hover span {
  opacity: 1;
  transform: translateY(0);
}

.rounded-edge {
  width: 100%;
  height: 90vh;
  aspect-ratio: 3/2;
  clip-path: ellipse(55% 100% at 50% 100%);
  background-image: url(../image/computer-4795762_1920.jpg);
  background-attachment: fixed;
  background-size: cover;
  padding: 150px 0;
  display: flex;
  align-items: center;
  position: relative;
  transition: clip-path 0.5s ease-out;
  margin-top: 100px;
}

.digitalbg,
.transformingBG {
  width: 100%;
  min-height: 500px;
  padding: 100px 0;
  background-image: url(../image/Digital\ BG.png);
  background-size: cover;
  background-attachment: fixed;
}

.transformingBG {
  background-image: url(../image/herobg.png);
  overflow: hidden;
  position: relative;
}

/* ===== textfadeinblock ===== */
#textfadeinblock {
  min-height: 150vh;
  display: flex;
  align-items: center;
  padding: 240px 0 120px; /* padding-top doubled from 120px */
  background-image: none;
  background-color: #011222;
  isolation: isolate;
}

#textfadeinblock .container {
  width: 100%;
  position: relative;
  z-index: 2;
}

#textfadeinblock .bubble {
  z-index: 0;
}

#textfadeinblock .circleShape {
  z-index: 1;
}

#textfadeinblock .row {
  row-gap: 300px;
}

#textfadeinblock .textblurbump {
  will-change: opacity, transform, filter;
}

.circleShape {
  width: 400px;
  height: 400px;
  position: absolute;
  left: -100px;
  top: -100px;
  scale: 1.8;
}

.hexaImage {
  width: 200px;
  height: 200px;
}

.slide-box {
  /* Scales with viewport width above the 1199px breakpoint below, so the
     circles keep taking up roughly the same share of the screen on large
     desktop monitors instead of shrinking relative to it — keeping ~3
     visible together at the start on any screen size. Floor matches the
     previous fixed 300px; raise the vw value or the cap to make circles
     bigger sooner / larger on very wide screens. */
  width: clamp(300px, 22vw, 620px);
  height: clamp(300px, 22vw, 620px);
  /* border: 1px solid red; */
}

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

.fa-arrow-right {
  color: white;
  font-size: 25px;
}

.gradient-bg {
  min-height: 50vh;
  padding-top: 100px;
  padding-bottom: 100px;
  background: linear-gradient(to bottom,
      #020b1f 0%,
      #0b1c3a 20%,
      #1f3c6e 30%,
      #6fa3c7 40%,
      #eaedef 50%,
      #ffffff 100%);
}

/* ===== circleupbox polish ===== */
#circleupbox {
  overflow: hidden;
}

#circleupbox h2 {
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.35;
}

#circleupbox p {
  font-size: clamp(0.9rem, 0.8rem + 0.6vw, 1.1rem);
  line-height: 1.7;
}

#circleupbox .container {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 6rem !important;
  padding-bottom: 4rem;
}

/* ===== circleupbox rising circle ===== */
.cu-circle-wrap {
  position: relative;
  width: 100%;
  /*
    Container = 80vw tall.
    Circle base = 200vw, center at y=100vw (below container).
    Scale 0.5 → top of visible arc at 50vw (30vw of arc shows).
    Scale 1.0 → top at 0 (80% of full semicircle shows).
  */
  height: 80vw;
  overflow: hidden;
  margin-top: 1.5rem;
}

.cu-circle {
  position: absolute;
  width: 200vw;
  height: 200vw;
  border-radius: 50%;
  left: 50%;
  top: 0;
  /* background-attachment: fixed keeps the image static relative to the viewport
     while the circle grows — revealing the image like an expanding mask */
  background: url('../image/pexels-caio-56759.jpg') center / cover no-repeat fixed;
  will-change: transform;
}

/* ===== circlemoving section ===== */
#circlemoving {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Double .gradient-bg's 100px padding-bottom (ID specificity overrides it). */
  padding-bottom: 200px;
}

.circlemoving-pin {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.circle-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.circle-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  opacity: 0;
  will-change: transform, opacity;
}

.circlemoving-content {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(30px);
  will-change: opacity, filter, transform;
  margin-top: 4rem !important;
}

.circlemoving-content > div
{
    padding-top:40px;
}

@media (max-width: 1199px) {
  .slide-box {
    width: 220px;
    height: 220px;
  }
}

@media (max-width: 768px) {
  .slide-box {
    width: 140px;
    height: 140px;
  }

  .circle-track {
    gap: 0.75rem;
  }

  .fa-arrow-right {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .rounded-edge {
    width: 100%;
    height: 700px;
    aspect-ratio: 3/2;
    clip-path: ellipse(55% 100% at 50% 100%);
    background-size: cover;
    padding: 150px 0;
    display: flex;
    align-items: center;
  }

  .NewsPadding {
    padding-left: 20px;
  }

  .contactSectionShade {
    padding-top: 50px;
  }

  .hexaImage {
    width: 150px;
    height: 150px;
  }

  .project_slider_box,
  .news_slider_box {
    width: 100vw !important;
    min-width: 100vw !important;
    height: 500px;
  }

}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.scroll-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 15px 30px;
  border: 2px solid white;
  background: transparent;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  animation: fadeIn 5s ease-in-out;
}

.scroll-btn:hover {
  background: white;
  color: black;
}

.hidden-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-in-out;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}




#horizontal-scoll-work-detail {
  width: 100%;
  /* padding: 150px 0; */
  display: flex;
  align-items: center;
  position: relative;
  /* z-index:100; */
  min-height: 90vh;
  /* background-color: red; */
}

.horizontal-work-detail {
  padding-top: 100px;
  display: flex;
  gap: 10px;
  min-height: 450px;
}


.horizontal-scoll-wrapper-work-detail {
  overflow: hidden;
  min-height: 550px;
  padding-top: 80px;
  width: 100%;
  /* border: 1px solid red; */
}


.horizontal-work-detail {
  display: flex;
  gap: 10px;
  min-height: 450px;
}







.horizontal-work-detail {
  display: flex;
  gap: 20px;
}

.project_slider_box {
  /* min-width: 350px; */
  height: 450px;
  flex-shrink: 0;
}

.horizontal-scoll-wrapper-work-detail {
  overflow: hidden;
  width: 100%;
}

#horizontal-scoll-work-detail {
  /* min-height: 100vh; */
  width: 100%;
  position: relative;
}

.horizontal-scroll-section {
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.horizontal-scoll-wrapper-work-detail {
  width: 100%;
  overflow: hidden;
}