@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: 'Poppins', 'Heebo', Arial, sans-serif;
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #E42320;
  --white-color: #ffffff;
  --text-color: #4b4b4b;
  --black-color: #000;
}


html {
  scroll-behavior: smooth;
}

/* preloader */

.preloader-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999 !important;
}



.final-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  opacity: 0;
}

.final-line {
  opacity: 0;
  margin: 0.5rem 0;
}

.final-line.first {
  font-size: 1.4rem;
  font-weight: 400;
}

.final-line.middle {
  font-size: 4rem;
  font-weight: 700;
}

.final-line.last {
  font-size: 1.1rem;
  font-weight: 400;
  color: #ccc;
}

.main-site {
  display: none;
  padding: 2rem;
  background: white;
  color: #070707;
  text-align: center;
}

/* header section */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-navbar {
  padding-left: 4rem;
  padding-right: 4rem;
}

.logo {
  display: flex;
}

.logo-img {
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 8rem;
}

.logo-text {
  font-weight: bold;
  font-style: normal;
  color: #333;
}

.connect-link {
  font-weight: 500;
  font-style: normal;
  top: 1rem;
  padding: 20px;
  color: rgb(0, 0, 0);
  text-decoration: none;
}

.connect-link:hover {
  color: var(--primary-color);
}
.header-icons i{
  font-size: 1.2rem;
  color: rgb(98, 98, 98);
}

/* hero section */
.bg-banner {
  background: url('../images/Digi\ Banner002.png') no-repeat center center/cover;
  height: 100vh;
}

.hero-section {
  display: flex;
  align-items: center;
  height: 70vh;
}

.tagline {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 10px;
  color: var(--text-color);
}

.headline {
  font-weight: 600;
  font-style: normal;
  font-size: 62px;
  margin-top: 15px;
  line-height: 1.3;
  color: #000;
}

.headline span {
  color: var(--primary-color);
}

/* floating widget */


.widget-wrapper {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  transition: all 0.4s ease-in-out;
  width: auto;
}

.widget-wrapper.expand {
  bottom: 80px;
  width: 90%;
  max-width: 700px;
}

.widget-toggle {
  background-color: #ffffff54;
  backdrop-filter: blur(10px);
  color: #161616f3;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.274);
  transition: opacity 0.3s ease;
}

/* white glow applied once after first scroll to highlight the toggle */
.widget-toggle.glow {
  box-shadow: 0 0 8px 6px rgba(255, 255, 255, 0.637), 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  transition: box-shadow .35s ease-in-out;
}

.widget-wrapper.expand .widget-toggle {
  opacity: 0;
  pointer-events: none;
}

.widget-toggle i {
  color: #000000;
  padding: 15px;
  border-radius: 30%;
  transition: transform 0.3s ease;
}

.widget-wrapper.expand .widget-toggle i {
  transform: rotate(90deg);
}

.widget-box {
  background-color: #ffffff54;
  backdrop-filter: blur(10px);
  color: #000000;
  border-radius: 24px;
  padding: 2rem;
  z-index: 9998;
  transform: scale(0);
  transform-origin: bottom center;
  transition: transform 0.4s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.129);
}

.widget-box.show {
  transform: scale(1);
}

.widget-box.hide {
  display: none !important;
}

.widget-box h5 {
  font-weight: 100;
  font-size: 1.7rem;
}

.option-btn {
  background: transparent;
  border: none;
  color: #000000;
  text-align: left;
  padding: 12px 0;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.option-btn.active,
.option-btn:hover {
  color: rgb(255, 255, 255);
}

.nav-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.circle-btn,
.continue-btn {
  background-color: #ffffff1e;
  backdrop-filter: blur(10px);
  color: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 0.6rem 1.5rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* Hide the continue button on the first selection step (step2). We still keep the element present for ARIA and JS
       but visually hide it so selection immediately proceeds to step3 when a main option is clicked. */
#step2 .continue-btn {
  display: none !important;
}

.circle-btn {
  padding: 0.8rem;
}

.form-control {
  background-color: #ffffff1e;
  backdrop-filter: blur(10px);
  border: 0.5px solid #33333338;
  color: white;
  margin-bottom: 1.5rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
}

.form-control::placeholder {
  color: #000000;
}

.hide {
  display: none;
}

#serviceOptions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  #serviceOptions {
    grid-template-columns: 1fr 1fr;
  }

  #serviceOptions .option-btn {
    padding-left: 1rem;
  }
}

@media (max-width: 468px) {
  /* .bg-banner {
    height: 150vh;

  } */
  .section-navbar {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
}
.logo-img {
  width: 4rem !important;
}
.hero-section{
  align-items: end;
  padding-left: 2rem !important;
}
.header-icons i{
  font-size: 1rem;
}
.selection-summary {
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  padding: .7rem .5rem;
  align-items: flex-start !important;

}
.sel-sep{
  display: none;
}
.selection-summary .sel-service {
    color: #181818;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    width: 100%;

}
.selection-summary .sel-main{
  width: 100%;
}
.widget-box {
  padding: 1rem;
}
.form-control{
  margin-bottom: .3rem;
  font-size: .8rem;
  padding: .5rem;
}
.widget-step h5{
  font-size: 1.2rem;
}
.circle-btn, .continue-btn {
  padding: .5rem 1rem;
  font-size: .8rem;
}
#image-carousel{
  padding-top: 3rem !important;
  height: 500px !important;
}
}

@media (max-width: 768px) {
  .bg-banner {
    background: url('../images/Tab-Banner.png') no-repeat center center/cover;
    
  }
  .section-navbar {
  padding-left: 2rem;
  padding-right: 2rem;
}
.logo-img {
  width: 6rem;
  padding-top: 0;
}
}

/* summary banner on the final form showing the user's selections */
.selection-summary {
  background: rgba(255, 255, 255, 0.06);
  color: #303030da;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: 600;
}

.selection-summary .sel-main {
  color: #181818;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.selection-summary .sel-service {
  color: #1b1b1b;
}

/* Work Section */
.work-section {
  background-color: black;
  /* border-radius: 25px; */
  /* padding: 2rem; */
  /* margin-bottom: 2rem; */
  padding-top: 1rem;
}

.work-content {
  /* background-color: var(--primary-color); */
  /* border-radius: 15px; */
  padding: 1rem;
  padding-top: 3rem;
  /* position: relative; */
}

.work-title {
  /* font-family: "Poppins", sans-serif; */
  font-size: 2.2rem;
  font-weight: 700;
  text-align: justify;
  margin-bottom: 1.5rem;
  /* padding: 0 1rem; */
  color: #777777;
}

/* Marquee wrapper with fade edges */
.marquee-wrapper {
  /* position: relative; */
  overflow: hidden;
  padding: 3rem 0;
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: flex;
  animation: scroll-marquee 10s linear infinite;
}

.marquee-content span {
  margin-right: 4rem;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-color);
  /* font-family: 'Poppins', sans-serif; */
}



/* Responsive font size */
@media (max-width: 768px) {
  .work-title {
    font-size: 1.8rem;
    text-align: left;
  }

  .marquee-content span {
    font-size: 1rem;
    margin-right: 2rem;
  }
}

@keyframes scroll-marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* .digital-section styles removed because section deleted from HTML */



/* Responsive Design */

@media (max-width:990px) {
  .headline {
    font-size: 3.4rem;
  }
}

@media (max-width:850px) {
  .headline {
    font-size: 3.4rem;
  }

  .parallax-icon {
    display: none;
  }
}


@media (max-width: 768px) {
 

  .logo-text {
    display: none;
  }

  .headline {
    font-size: 2.8rem;
  }
}

@media (max-width: 560px) {
  .headline {
    font-size: 2.5rem;
  }

  .tagline {
    font-size: .7rem;
  }
}

@media (max-width: 480px) {
  .headline {
    font-size: 2.2rem;
  }
}

@media (max-width: 415px) {
  .headline {
    font-size: 2rem;
  }

  .work-title {
    font-size: 1.4rem;
    text-align: left;
  }

  .marquee-content span {
    font-size: .8rem;
    margin-right: 2rem;
  }

  .digital-section h2 {
    font-size: 1.8rem;
  }

  .digital-item-number {
    font-size: 1.8rem;
  }

  .digital-item-text {
    font-size: 1.2rem;
  }
}

@media (max-width: 383px) {
  .headline {
    font-size: 1.8rem;
    margin-top: 2rem;
  }
}


.carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.button-carousel {
  display: none !important;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 10px;
  background: #fff;
  z-index: 10;
}

.carousel-indicators li {
  margin: 0 15px;
  cursor: pointer;
  color: #000;
  font-weight: bold;
  font-size: 1.1rem;
  transition: color 0.3s;
}

.carousel-indicators li.active {
  color: var(--primary-color);
  text-decoration: underline;
}

.carousel-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.8s ease;
}

.carousel-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 80px;
}

.carousel-slide .text {
  flex: 1;
  padding-right: 40px;
}

.carousel-slide .text h2 {
  color: var(--primary-color);
  margin-bottom: 23px;
  font-size: 2.5rem;
}

.carousel-slide .text p {
  color: #000;
  margin-bottom: 20px;
  text-align: justify;
  font-size: 1.2rem;
  max-width: 600px;
}

.carousel-slide .text a {
  display: inline-block;
  padding: 10px 20px;
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.carousel-slide .image {
  flex: 1;
  text-align: center;
}

.carousel-slide .image img {
  max-width: 80%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .carousel-slide {
    flex-direction: column;
    padding: 20px;
    text-align: center;
  }

  .carousel-slide .text {
    padding-right: 0;
  }

  .carousel-slide .image img {
    max-width: 60%;
    max-height: 50vh;
  }
}

@media (max-width: 500px) {
  .carousel-slide .text h2 {

    margin-bottom: 23px;
    font-size: 2rem;
  }

  .carousel-slide .text p {
    font-size: 1rem;
  }

  .carousel-indicators li {
    font-weight: bold;
    font-size: .8rem;
  }

}

.approach-section {
  padding-top: 1.5rem !important;
  margin-top: 2rem;
}

.sticky {
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  place-items: center;
  background-color: #fff;
  overflow: hidden;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.sticky__box {
  position: relative;
  grid-column: 2/12;
  height: fit-content;
  padding: 40px;
  box-sizing: border-box;
}

.sticky__box-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  transform: translate(-50%, -50%);
  background-color: var(--primary-color);

}

.sticky p {
  position: relative;
  color: #414040ee;
  font-size: 3rem;
  line-height: 1.375;
  font-weight: 600;
  z-index: 10;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section,
.sticky {
  scroll-snap-align: start;
}


/* image scroll zoom */

@keyframes zoom-in {
  0% {
    transform: scale(0.7) translateZ(-800px);
    opacity: 0;
    filter: blur(6px);
  }

  50% {
    transform: scale(1) translateZ(0px);
    opacity: 1;
    filter: blur(0px);
  }

  100% {
    transform: scale(1.2) translateZ(600px);
    opacity: 0;
    filter: blur(6px);
  }
}

@media (max-width: 699px) {
  .sticky p {

    font-size: 2rem;
    line-height: 1.175;
    font-weight: 600;
    z-index: 10;

  }

}

/* .scroll-wrapper {
  height: 1500vh;
  
  position: relative;
} */

/* .stuck-grid {
  position: sticky;
  background: #000;
  top: 0;
  height: 150vh;
  perspective: 1000px;
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 37svh);
  place-items: center;
  overflow: clip;
  z-index: 2;
}

.grid-item {
  transform-style: preserve-3d;
}

.grid-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
}

@supports (animation-timeline: scroll()) {
  .grid-item {
    animation: zoom-in linear both;
    animation-timeline: scroll(root block);
    animation-duration: 1s;
    
    will-change: transform, opacity, filter;
  }

  .grid-item:nth-of-type(1) {
    animation-range: 0% 50%;
  }

  .grid-item:nth-of-type(2) {
    animation-range: 10% 60%;
  }

  .grid-item:nth-of-type(3) {
    animation-range: 20% 70%;
  }

  .grid-item:nth-of-type(4) {
    animation-range: 30% 80%;
  }

  .grid-item:nth-of-type(5) {
    animation-range: 40% 90%;
  }

  .grid-item:nth-of-type(6) {
    animation-range: 50% 100%;
  }

  .grid-item:nth-of-type(7) {
    animation-range: 60% 110%;
  }

  .grid-item:nth-of-type(8) {
    animation-range: 65% 115%;
  }

  .grid-item:nth-of-type(9) {
    animation-range: 70% 120%;
  }

  .grid-item:nth-of-type(10) {
    animation-range: 75% 125%;
  }

  .grid-item:nth-of-type(11) {
    animation-range: 80% 130%;
  }

  .grid-item:nth-of-type(12) {
    animation-range: 85% 175%;
  } */


  /* Grid placement pattern */
  /* .grid-item:nth-of-type(1),
  .grid-item:nth-of-type(4),
  .grid-item:nth-of-type(7),
  .grid-item:nth-of-type(10) {
    grid-area: 2 / 2 / span 1 / span 2; */
    /* center */
  /* } */

  /* .grid-item:nth-of-type(2),
  .grid-item:nth-of-type(5),
  .grid-item:nth-of-type(8),
  .grid-item:nth-of-type(11) {
    grid-area: 2 / 1 / span 1 / span 1;
    left
  } */

  /* .grid-item:nth-of-type(3),
  .grid-item:nth-of-type(6),
  .grid-item:nth-of-type(9),
  .grid-item:nth-of-type(12) {
    grid-area: 2 / 4 / span 1 / span 1;
    right
  } */

  /* Responsive grid override */
  /* @media (max-width: 768px) {
    .stuck-grid {
      grid-template-rows: repeat(4, 35svh);
      height: 100vh;
    }

    .grid-item {
      grid-area: 2 / 1 / span 1 / span 2;
    }
  }
} */



/* .next-section {
  min-height: 30vh;
  background: linear-gradient(280deg, #000 70%, #131212);
  margin: 0;
  z-index: 1;
}

.next-section h3 {
  color: #4b4b4b;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem;
  font-size: 3rem; */
  /* font-family: "Proza Libre", Sans-serif; */

/* }

.line {
  overflow: hidden;
  display: block;
  opacity: 0;
  transform: translateY(30px);
}

@media (max-width: 768px) {
  .next-section h3 {

    padding: 4rem;
    font-size: 2rem;
    text-align: justify;

  }
}

@media (max-width: 500px) {
  .next-section h3 {

    padding: 4rem;
    font-size: 1.7rem;
    text-align: justify;

  }
}

@media (max-width: 395px) {
  .next-section h3 {

    padding: 4rem;
    font-size: 1.5rem;
    text-align: justify;

  }
}
 */



.magic-section {
  position: relative;
  height: 100vh;
  background: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}




.magic-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  /* font-family: 'Poppins', sans-serif; */
  padding: 0 2rem;
}

.magic-overlay .pre-text,
.magic-overlay .post-text {
  font-size: 1.2rem;
  color: #ccc;
  /* opacity: 0; */
}

.magic-overlay .magic-word {
  font-size: 6rem;
  font-weight: 700;
  color: white;
  /* opacity: 0; */
}

@media (max-width: 768px) {
  .magic-overlay .magic-word {
    font-size: 3.5rem;
  }
}

/* second service section */
:root {
  --accent: #ff2a2a;
  --accent-20: #ff2a2a33;
  --accent-40: #ff2a2a66;
  --ink: #f3f3f3;
  --muted: #b9b9b9;
  --bg0: #0c0e0c;
  --bg1: #0f1311;
  --card: #121615;
  --card-bd: #1f2422;
}

/* html, body { height: 100%; } */
body {
  overflow-x: hidden;
}

.svc {
  min-height: 100vh;
  padding: 10vh 4vw 14vh;
  color: var(--ink);
  background-color: #000;
}

.svc__wrap {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 5vw;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

/* Left wheel column (sticky) */
.wheelBox {
  position: sticky;
  top: 12vh;
}

.wheel {
  position: relative;
  width: min(42vw, 560px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #0b0d0c 0%, #0b0d0c 55%, transparent 56%), radial-gradient(60% 60% at 50% 50%, var(--accent-20), transparent 60%);
  box-shadow: 0 0 0 1px #000 inset, 0 40px 120px #000 inset;
  isolation: isolate;
  transform: rotate(var(--wheelRot, 0deg));
}

/* SVG ring */
.ring {
  position: absolute;
  inset: 0;
}

.ring svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ring .track {
  stroke: #24302c;
  opacity: .6;
}

.ring .active {
  stroke: var(--accent);
  filter: drop-shadow(0 0 18px var(--accent-40));
}

.ring,
.center,
.badge {
  will-change: transform;
}

/* badges around the circle */
.badges {
  position: absolute;
  inset: 0;
  --rRing: 370%;
  display: none;
}

.badge {
  position: absolute;
  left: 50%;
  top: 50%;
  /* size-aware variables */
  --badgeSize: 58px;
  --badgeRadius: calc(var(--badgeSize) / 2);
  width: var(--badgeSize);
  height: var(--badgeSize);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #202422;
  color: #bfc8c5;
  font-weight: 800;
  letter-spacing: .5px;
  border: 1px solid #2a2f2d;
  /* place badge outside the circle so its inner edge touches the ring */
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(calc(var(--rRing) + var(--badgeRadius))) rotate(calc(-1 * var(--angle))) rotate(calc(-1 * var(--wheelRot, 0deg)));
  transition: transform 1s cubic-bezier(.22, .61, .36, 1), background .3s, color .3s, box-shadow .3s, border-color .3s;
}

.badge.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.badge__content {
  display: inline-block;
  transform: rotate(calc(1 * var(--wheelRot, 0deg)));
  will-change: transform;
}

.badge--current {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 30px var(--accent-20), 0 0 0 6px #ffffff0d inset;
  border-color: #ffffff33;
  /* enlarge via variable so position stays tangent to the ring */
  --badgeSize: 64px;
  font-size: 1.1rem;
}

/* Fixed overlay badge pinned to the right side */
#badgeFixed {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--wheelRot, 0deg))) translate(calc(var(--rRing) + var(--badgeRadius)));
  z-index: 2;
  pointer-events: none;
  transition: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* center content */
.center {
  position: absolute;
  inset: 10% 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.6rem 1.8rem;
  gap: .2rem;
  background: transparent;
  transform: rotate(calc(-1 * var(--wheelRot, 0deg)));
  transform-origin: 50% 50%;
}

.center .icon {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 60% at 50% 50%, #171b19, #0f1211);
  border: 1px solid #202725;
  box-shadow: 0 6px 22px #0008;
}

.center .icon svg {
  width: 40px;
  height: 40px;
  stroke: var(--accent);
}

.center h2 {
  margin: .6rem 0 0;
  font-size: 2.2rem;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
}

.center p {
  margin: .4rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  text-align: center;
}

/* Right list */
.svcList {
  display: grid;
  gap: 24px;
}

.card {
  background: linear-gradient(180deg, #151918, #111413);
  border: 1px solid var(--card-bd);
  border-radius: 22px;
  padding: 22px 22px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: center;
  box-shadow: 0 10px 28px #0006;
  height: 40vh;
  opacity: .3;
  transform: translateY(80px);
}

.card .ico {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #141816;
  border: 1px solid #1f2422;
}

.card .ico svg {
  width: 40px;
  height: 40px;
  stroke: var(--accent);
}

.card .ico img {
  width: 60px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
}

.card p {
  margin: 0 0 14px;
  color: var(--muted);
}

.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chips span {
  background: #181d1b;
  border: 1px solid #262d2b;
  color: #e7bbbb;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
}

/* Large faint number inside cards */
.card {
  position: relative;
  overflow: hidden;
}

.card .cardNum {
  position: absolute;
  right: 10px;
  bottom: -14px;
  font-size: clamp(60px, 16vw, 160px);
  font-weight: 900;
  color: #ffffff08;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Helpers */
.divide {
  height: 18vh;
}

@media (max-width: 1100px) {
  .svc__wrap {
    grid-template-columns: 1fr;
  }

  .wheelBox {
    display: none;
  }

  .wheel {
    width: min(88vw, 560px);
    margin: 0 auto;
  }

  .center {
    justify-items: center;
    text-align: center;
  }
}

/* Contact section - responsive revisions */
.contact-section-main {
  background: #0d0d0d;
  color: rgb(255, 255, 255);
}

.contact-section {
  position: relative;
  background-color: #000;
  /* Use min-height so small devices can grow naturally */
  min-height: 40vh;
  padding: 6rem 1.5rem 4rem;
  display: block;
}
.contact-row{
  flex-direction: row;
  display: flex;
  gap: 4rem;
  justify-content: center;
}

/* Large faint background title: use responsive sizing */
.contact-title {
  font-size: clamp(4rem, 18vw, 18rem);
  font-weight: bold;
  color: rgba(255, 255, 255, 0.05);
  text-align: center;
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: 0.9;
}

/* Utility: keep content above the faint title */
.contact-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1rem;
}

.get {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Flexible columns that wrap on small screens */


.contact-card {
  background: rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}


.contact-card:hover {
  border: 1px solid red;
  transition: 0.3s;
}

.contact-card:hover span,
.contact-card:focus span {
  transition: 0.3s;
  transform: scale(1.8);

}

/* Make form elements stretch to full width and increase tap targets */
.contact-form input,
.contact-form textarea {
  background: rgba(255, 255, 255, 0.062);
  backdrop-filter: blur(15px);
  border: none;
  border-radius: 8px;
  color: white;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #ccc;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border: 1px solid red;
  box-shadow: none;
  background-color: transparent;
}

.submit-btn {
  background: rgba(255, 255, 255, 0.85);
  color: black;
  font-weight: bold;
  border-radius: 8px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  cursor: pointer;
}

.submit-btn:hover {
  background: red;
  color: white;
  transition: 0.3s;
}

/* Responsive tweaks */
@media (max-width: 1200px) {
  .contact-inner {
    gap: 1.5rem;
    padding: 1rem;
  }

  .get {
    font-size: 1.8rem;
  }

  .contact-title {
    top: -1.5rem;
  }
}

@media (max-width: 992px) {
  .contact-section {
    padding-top: 5.5rem;
    min-height: 55vh;
  }

  .contact-inner {
    gap: 1rem;
  }

  .contact-card {
    padding: 14px;
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding-top: 4rem;
    min-height: auto;
  }

  .contact-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
  }

  .contact-card {
    align-items: stretch;
    text-align: left;
  }

  .get {
    font-size: 1.6rem;
  }

  .contact-title {
    position: absolute;
    top: 1rem;
    opacity: 0.9;
  }
}

@media (max-width: 480px) {
  .contact-section {
    padding: 3rem 1rem 3rem;
  }

  .contact-inner {
    padding: 0;
    gap: 0.75rem;
  }

  .contact-card {
    padding: 12px;
  }

  .get {
    font-size: 1.25rem;
  }

  .contact-title {
    font-size: clamp(2rem, 28vw, 5rem);
    top: 0.2rem;
  }

  .contact-form textarea {
    min-height: 120px;
  }
  .contact-row{
    gap: .7rem;
  }

  .divide {
    display: none;
  }

  .work-title {
    padding: 0;
  }

  .work-section {
    padding: .2rem;
  }

  .svc {
    padding: 0;
  }

  .marquee-wrapper {
    padding: 0;
  }

  .magic-section {
    height: 80vh;
  }

  .magic-overlay .post-text {
    font-size: 1rem;
    padding-top: 1rem;
  }

  .widget-wrapper {
    width: max-content;
  }

  .widget-toggle {
    font-size: .9rem;
    padding: .2rem .8rem;
  }

  .widget-toggle i {
    padding: 8px;
  }

  .connect-link {
    font-size: .8rem;
  }


  .hero-section {
    height: 40vh;
  }

  /* .bg-banner {
    height: 70vh;
  } */

  .card .cardNum {
    font-size: 6rem;
  }

  .card {
    height: 45vh;
  }

  .chips span {
    font-size: .8rem;
    padding: 4px 8px;
  }

  .card h3 {
    font-size: 1.1rem;
  }

  .card p {
    font-size: .9rem;
  }

  .final-line.middle {
    font-size: 1.5rem;
  }

  .final-line.first {
    font-size: 1rem;
  }

  .final-line.last {
    font-size: .8rem;
  }
}


.work-title.char-reveal {
  display: inline-block;
  /* keep full words intact on narrow viewports */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: manual;
}

.work-title.char-reveal .word {
  display: inline-block;
  white-space: nowrap;
}

.work-title.char-reveal .char {
  opacity: 0.18;
  display: inline-block;
  will-change: opacity, color, transform;
}




#image-carousel {
  position: relative;
  height: 600px;
  top: 50%;
  /* transform: translateY(-50%); */
  overflow: hidden;
  background: #000;
  /* margin-top: 15rem; */
}
#image-carousel div {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
}
#image-carousel div img {
  width: 400px;
  transition: width 1s;
}
#image-carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#image-carousel div.hideLeft img {
  width: 200px;
}
#image-carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#image-carousel div.hideRight img {
  width: 200px;
}
#image-carousel div.prev {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
}
#image-carousel div.prev img {
  width: 300px;
}
#image-carousel div.prevLeftSecond {
  z-index: 4;
  left: 15%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#image-carousel div.prevLeftSecond img {
  width: 200px;
}
#image-carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
}
#image-carousel div.next {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
}
#image-carousel div.next img {
  width: 300px;
}
#image-carousel div.nextRightSecond {
  z-index: 4;
  left: 85%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#image-carousel div.nextRightSecond img {
  width: 200px;
}

.buttons {
  /* position: fixed; */
  left: 50%;
  /* transform: translateX(-50%); */
  /* bottom: 10px; */
   color: rgba(255, 255, 255, 0.752) !important;
}

.dots {
  /* position: fixed; */
  left: 50%;
  /* transform: translateX(-50%); */
  /* bottom: 10px; */
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 50;
  background: #000000;
  align-items: center;
}
.dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  /* background: #000000; */
  padding: 0;
  cursor: pointer;
}
.dots button.active {
  background: #333;
}


/* WhatsApp Contact Form Overlay CSS */
#whatsappFormOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  backdrop-filter: blur(7px);
}

.whatsapp-form-overlay-bg {
  position: relative;
  width: 100%; 
  /* height: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Override the base floating widget styles when used as the WhatsApp overlay
   The base .widget-wrapper places the widget near the bottom center; when
   used as an overlay we want a full-screen centered container instead. */
/* .widget-wrapper.whatsapp-form-overlay-bg {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000; 
  transform: none !important;
} */

/* Make the WhatsApp widget box a comfortable, centered panel (not the tiny floating widget) */
/* #whatsappWidgetBox {
  width: 100%;
  max-width: 480px;
  margin: 16px;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
} */

/* overlay show/hide states for smooth transition */
#whatsappFormOverlay.show {
  display: block;
  animation: overlayFadeIn 300ms ease;
}

#whatsappFormOverlay.hide {
  animation: overlayFadeOut 300ms ease forwards;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes overlayFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.whatsapp-form {
  padding: 2rem 2.5rem;

}

/* make widget-box transitions apply in the overlay too (renamed to -2) */
#whatsappWidgetBox-2 {
  transform: scale(0);
  transform-origin: center;
  transition: transform 320ms ease-in-out, opacity 240ms ease-in-out;
  opacity: 0;
}

/* reveal when JS adds the show-2 class */
#whatsappWidgetBox-2.show-2 {
  transform: scale(1);
  opacity: 1;
}

.whatsapp-form h3 {
  margin-bottom: 1.4rem;
  text-align: center;
}

.whatsapp-form label {
  display: block;
  margin-bottom: 0.75rem;
}

/* .whatsapp-form input,
.whatsapp-form textarea {
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 1rem;
} */

.whatsapp-form textarea {
  margin-bottom: 1rem;
  resize: vertical;
}

.whatsapp-submit {
  width: 100%;
  /* background: #25d366; */
  /* color: #fff; */
  border: none;
  padding: 0.7rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.whatsapp-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #888;
}

.whatsapp-close:hover {
  color: #000;
}

/* floating close button style positioned on top-left of the widget */
.close-top {
  position: absolute;
  top: -18px;
  left: -18px;
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: none;
  cursor: pointer;
  z-index: 10001;
}

.close-top:focus { outline: none; }

/* Widget */
.widget-wrapper-2 {
  position: fixed;
  /* bottom: 20px; */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  transition: all 0.4s ease-in-out;
  width: 30%;
  height: 100%;
}

.widget-wrapper-2.expand-2 {
  bottom: 80px;
  width: 90%;
  max-width: 700px;
}

.widget-toggle-2 {
  background-color: #ffffff54;
  backdrop-filter: blur(10px);
  color: #161616f3;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.274);
  transition: opacity 0.3s ease;
}

/* white glow applied once after first scroll to highlight the toggle */
.widget-toggle-2.glow-2 {
  box-shadow: 0 0 8px 6px rgba(255, 255, 255, 0.637), 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  transition: box-shadow .35s ease-in-out;
}

.widget-wrapper-2.expand-2 .widget-toggle-2 {
  opacity: 0;
  pointer-events: none;
}

.widget-toggle-2 i {
  color: #000000;
  padding: 15px;
  border-radius: 30%;
  transition: transform 0.3s ease;
}

.widget-wrapper-2.expand-2 .widget-toggle-2 i {
  transform: rotate(90deg);
}

.widget-box-2 {
  background-color: #ffffff54;
  backdrop-filter: blur(10px);
  color: #000000;
  border-radius: 24px;
  padding: 1rem;
  z-index: 9998;
  transform: scale(0);
  transform-origin: bottom center;
  transition: transform 0.4s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.129);
}

.widget-box-2.show-2 {
  transform: scale(1);
}

.widget-box-2.hide-2 {
  display: none !important;
}

.widget-box-2 h5 {
  font-weight: 100;
  font-size: 2rem;
  display: flex;
  justify-content: center;
}

.option-btn-2 {
  background: transparent;
  border: none;
  color: #000000;
  text-align: left;
  padding: 12px 0;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.option-btn-2.active,
.option-btn-2:hover {
  color: rgb(255, 255, 255);
}

.nav-controls-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.circle-btn-2,
.continue-btn-2 {
  background-color: #ffffff1e;
  backdrop-filter: blur(10px);
  color: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 0.6rem 1.5rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* Hide the continue button on the first selection step (step2). We still keep the element present for ARIA and JS
       but visually hide it so selection immediately proceeds to step3 when a main option is clicked. */
#step2-2 .continue-btn-2 {
  display: none !important;
}

.circle-btn-2 {
  padding: 0.8rem;
}

.form-control-2 {
  background-color: #ffffff1e;
  backdrop-filter: blur(10px);
  border: 0.5px solid #33333338;
  color: white;
  margin-bottom: 1.5rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
}

.form-control-2::placeholder {
  color: #000000;
}

.hide-2 {
  display: none;
}

/* When WhatsApp overlay is open, hide the original floating widget to avoid conflicts */
body.whatsapp-open .widget-wrapper,
body.whatsapp-open .widget-box {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure the renamed widget box has reveal styles */
.widget-box-2 {
  transform: scale(0);
  opacity: 0;
  transition: transform 320ms ease-in-out, opacity 240ms ease-in-out;
}
.widget-box-2.show-2 {
  transform: scale(1);
  opacity: 1;
}



@media (max-width: 1200px) {
  .widget-wrapper-2{
    width: 50%;
  }
}
@media (max-width: 768px) {
  .widget-wrapper-2{
    width: 70%;
  }
}

@media (max-width:567px){
  .widget-wrapper-2{
    width: 80%;
  }
}

@media (max-width: 468px){
  .widget-wrapper-2{
    width: 93%;
  }
}

.nav-links{
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: black;
}

.nav-links:hover{
  color: red;
  transition: 0.3s;
  transform: scale(1.1);
}