@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@font-face {
  font-family: "Druk-Medium";
  src: url("https://db.onlinewebfonts.com/t/1cf15ee1bec64b0239f6b9f760647da9.eot");
  src: url("https://db.onlinewebfonts.com/t/1cf15ee1bec64b0239f6b9f760647da9.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/1cf15ee1bec64b0239f6b9f760647da9.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/1cf15ee1bec64b0239f6b9f760647da9.woff")format("woff"), url("https://db.onlinewebfonts.com/t/1cf15ee1bec64b0239f6b9f760647da9.ttf")format("truetype"), url("https://db.onlinewebfonts.com/t/1cf15ee1bec64b0239f6b9f760647da9.svg#Druk-Medium")format("svg");
}
html, body {
  font-family: "Inter", sans-serif;
  color: #080b11;
  scroll-behavior: smooth;
}
nav {
  transition: .4s;
  border-bottom: solid rgba(0,0,0,.1) 1px;
}
nav.shrink {
  box-shadow: 0 0 6px rgba(0, 0, 0, .25);
  background-color: #fff;
  padding-top: 4px!important;
  padding-bottom: 4px!important;
}
nav .logo {
  height: 40px;
  transition: .4s;
}
nav.shrink .logo {
  height: 30px;
}

h1, h2, h3, h4, h5 {
  font-family: "Druk-Medium";
}
header {
  padding-top: 140px;
}
@media screen and (min-width:1400px) {
  .display-1 {
    font-size: 6rem;
  }
  header .display-1 {
    font-size: 8rem;
  }
}
p {
  color: #676f7e;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.text-black {
  color: #080b11 !important;
}
.videoContainer {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.videoContainer video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.digital {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.digital video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
  filter: brightness(.25);
}
.project {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.project video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.carousel-title {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.carousel-item.active .carousel-title {
  opacity: 1;
  transform: scale(1);
}
.carousel-item:not(.active) .carousel-title {
  opacity: 0;
  transform: scale(0.85);
}
@media (min-width: 992px) {
  /* Target the .show class that your JavaScript adds, instead of :hover */
  .dropdown .dropdown-menu.show {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100% !important;
    /* Trigger the animation */
    animation: slideDown 0.3s ease-out forwards;
  }
}

/* Slide down animation */
@keyframes slideDown {
  0% {
    opacity: 0;
    /* Use translateY with !important to override Bootstrap's Popper.js */
    transform: translateY(-15px) !important; 
  }
  100% {
    opacity: 1;
    transform: translateY(0) !important;
  }
}
.textEffect span {
  color: #c4c4c4;
  transition: color 0.5s ease-out; /* Makes the color transition smooth */
}
.num {
  background-color: #676f7e;
  color: #fff;
  height: 32px;
  width: 32px;
}
.arrow {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  font-weight: bold;
  background-color: transparent;
  border: solid #676f7e 1px !important;
  transition: .2s;
}
.arrow:hover {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  font-weight: bold;
  background-color: #080b11;
  color: #fff;
  border: solid #080b11 1px !important;
}
.listBox li {
  padding-left: 30px;
  position: relative;
}
.listBox li::before {
  position: absolute;
  top: 2px;
  left: 0;
  font-family: "bootstrap-icons" !important;
  content: "\F26A";
  font-size: 20px;
}
.darkBox {
  background-color: rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}
.projectParent {
  position: relative;
  z-index: 1;
}
.projectParent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background-color: #f3f3f3;
  z-index: -1;
}
.color {
  color: #ffde00;
}

.color2 {
  color: #e27000;
}

.topBanner {
  background-image: url("images/bg1.webp");
  background-size: cover;
  background-position: right bottom;
}

.headerBox {
  background-color: rgba(255,255,255,.1);
  border: solid rgba(255,255,255,.25) 1px;
}

.bullets {
  padding-left: 30px;
}

.bullets p {
  position: relative;
}

.bullets p::before {
  position: absolute;
  top: 2px;
  left: -30px;
  font-family: "bootstrap-icons" !important;
  content: "\F26A";
  font-size: 20px;
  color: #ffde00;
}
.bullets p:not(:last-child)::after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: rgba(255,255,255,.25);
  position: absolute;
  bottom: -8px;
  left: 0;
}

.circleNum {
  background-color: #fff;  
  height: 44px;
  width: 44px;
  border-radius: 50%;
  border: solid #fff 1px;
  transition: .4s;
  position: relative;
  z-index: 1;
}

.circleNum p {
  color: #080b11!important;
  transition: .4s;
}
.circleNum:hover p {
  color: #fff!important;
}

.circleNum:hover {
  background-color: #fd840d;
  height: 44px;
  width: 44px;
  border-radius: 50%;
  border: solid #fd840d 1px;
}
.circleDesc {
  color: #fff;
  opacity: .5;
  transition: .4s;
}
.circleNum:hover ~ .circleDesc {
  opacity: 1;
}

.steps {
  position: relative;
  z-index: 1;
}

.steps:not(:last-child)::after {
  content: "";
  height: 1px;
  width: 160px;
  position: absolute;
  top: 22px;
  left: 20px;
  z-index: -1;
  background-color: #fff;
  opacity: .25;
  
}

.tooltipStyle {
  --bs-tooltip-bg: #fff!important;
  --bs-tooltip-color: #080b11!important;
}

.btn {
  background-color: #fd840d;
  color: #fff;
  transition: .4s;
}
.btn:hover {
  background-color: #e27000;
  color: #fff;
}

.diagonal-slash {
  position: relative;
  z-index: 1;
}

.diagonal-slash::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) skewY(-10deg);
  height: 10px;
  width: 102%;
  background-color: red;
}

.marquee-container {
  overflow: hidden;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-loop 20s linear infinite;
}

.marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* We use a fixed width or let it size naturally, 
     but ensure it doesn't stretch to 100% of the screen */
  padding-right: 3rem; 
}

@keyframes marquee-loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    /* Moves by exactly one group width out of four */
    transform: translateX(-25%); 
  }
}

.heading-title {
            font-weight: 800;
            letter-spacing: -1px;
            font-size: 3rem;
        }
        /* Timeline styling */
        .step-container {
            position: relative;
        }
        /* Connecting line for desktop screens */
        @media (min-width: 992px) {
            .step-container::before {
                content: '';
                position: absolute;
                top: 70px; /* Aligns with the center of the 90px circles */
                left: 12.5%;
                width: 75%;
                height: 1px;
                background-color: #e0e0e0;
                z-index: 1;
            }
        }
        .step-box {
            position: relative;
            z-index: 2;
        }
        .icon-circle {
            width: 90px;
            height: 90px;
            border: 1px solid #e0e0e0;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            position: relative;
            box-shadow: 0 4px 12px rgba(0,0,0,0.02);
        }
        .icon-circle i {
            font-size: 2rem;
            color: #fd840d; /* Royal blue accents */
        }
        .step-number {
            width: 32px;
            height: 32px;
            background-color: #fd840d;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 600;
            margin: -12px auto 15px auto;
            position: relative;
            z-index: 3;
        }
        .step-title {
            font-weight: 700;
            font-size: 1.15rem;
            margin-bottom: 8px;
        }
        .step-text {
            font-size: 0.95rem;
            color: #666;
            line-height: 1.6;
        }
        /* Bottom Highlight Box */
        .highlight-box {
            background-color: #fff;
            border: 1px solid #eaeaea;
            border-radius: 12px;
            max-width: 500px;
            margin: 0 auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
        }
        .sparkle-icon {
            width: 45px;
            height: 45px;
            background-color: #eff6ff;
            color: #fd840d;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

.learnMore {
  text-decoration: none;
  line-height: 1rem;
  color: #fd840d;
}

.learnMore i {
  margin-left: 6px;
  transition: .2s ease-in-out;
}
.learnMore:hover i {
  margin-left: 20px;
}

.contact {
 position: relative;
 z-index: 1;
}

.contact video {
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 object-fit: cover;
 object-position: center center;
 height: 100%;
 width: 100%;
  filter: brightness(.25);
}

.contact .form-floating .form-control, .form-floating select {
  background-color: transparent;
  color: #080b11;
  border: solid rgba(0,0,0,.5) 1px;
}

 .contact .form-floating label {
  opacity: .75;
  color: #080b11;
}

footer {
  color: #fff;
  background-color: #000;
}

footer img {
  filter: brightness(0) invert();
}

footer a {
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  transition: .4s;
}
footer a:hover {
  color: #fff;
  text-decoration: underline;
  letter-spacing: 1px;
  text-underline-offset: 6px!important;
}


/* Container for the entire carousel */
.multi-carousel-container {
  cursor: grab;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

/* Cursor styles for dragging */
.multi-carousel-container.dragging,
#multiCarousel.dragging {
  cursor: grabbing;
}

/* Wrapper for all slides */
.multi-carousel-inner {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Individual slide */
.multi-carousel-item,
.clone {
  box-sizing: border-box;
  flex: 0 0 33.333333%;
  padding: 0 5px;
  position: relative; /* Essential for item-number positioning */
}

/* Control buttons */
.multi-carousel-control-prev,
.multi-carousel-control-next {
  align-items: center;
  background-color: #fd840d;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  position: absolute;
  text-decoration: none;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
  width: 40px;
  z-index: 10;
  opacity: .5;
  transition: .4s;
}

.multi-carousel-control-prev:hover,
.multi-carousel-control-next:hover {
  background-color: #fd840d;
  opacity: 1;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  height: 16px;
}

.multi-carousel-control-prev {
  left: 1.5rem;
}

.multi-carousel-control-next {
  right: 1.5rem;
}


/* Carousel cursor styling */
#multiCarousel {
  cursor: grab;
  touch-action: pan-y;
}

/* Disable text selection during drag */
#multiCarousel.dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* Responsive adjustments for screens smaller than 720px (45em) */
@media (max-width: 45em) {
  .multi-carousel-item,
  .clone {
    flex: 0 0 100%;
  }
  }

.sticky-wrapper { 
          height: 300vh; 
          
      
      }
        
        .sticky-slider {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
        }
        .wrap {
            height: 100%;
            width: 400%; 
            display: flex;
            /* Reduced transition for snappier response */
            transition: transform 0.3s ease-out; 
        }
        .box { 
            height: 100vh; 
            width: 25%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 3rem;
        }

.form-floating > .form-control:focus ~ label::after {
    background-color: transparent!important; 
}

.service-block{
      display:none;
      margin-top:1.25rem;
    }
    .service-block.active{
      display:block;
    }
    .divider{
      height:1px;
      background:var(--line);
      margin:1.35rem 0;
    }
    .form-floating > #project_notes.form-control:focus::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.5;
}
    .summary-box{
      position:sticky;
      top:48px;
    }
    .price{
      font-size:2.6rem;
      font-weight:900;
      line-height:1;
    }
    .line-item{
      display:flex;
      justify-content:space-between;
      gap:16px;
      padding:11px 0;
      border-bottom:1px solid var(--line);
      font-size:.98rem;
    }
    .line-item:last-child{
      border-bottom:0;
    }
    .chip{
      display:inline-block;
      border:1px solid var(--line);
      border-radius:999px;
      padding:.35rem .7rem;
      font-size:.78rem;
      color:#e2e2e2;
      margin:.15rem .35rem .15rem 0;
    }
    .check-meta{
      display:block;
      color:var(--muted);
      margin-top:2px;
      font-size:.92rem;
    }

.border-secondary {
  border-color: rgba(255,255,255,.25)!important;
}

/*.dropdown-menu img {
  object-fit: cover;
  object-position: center center;
  height: 200px;
  width: 100%;
}*/

@media screen and (max-width:576px) {
 .servicesContainer .rounded-4 {
  border: solid rgba(0,0,0,.1) 1px;
} 
  .topBanner {
    background-position: left center;
  }
  .dropdown-menu img {
    object-fit: cover!important;
    object-position: center center;
    height: 100px!important;
    width: 100%;
  }
  .dropdown-menu p {
    font-size: 14px!important;
  }
  }



.dropdown-menu a {
  transition: .4s
}

.dropdown-menu a img {
  transition: .4s
}

.dropdown-menu a:hover {
  box-shadow: 0 8px 8px rgba(0,0,0,.25);
  filter: brightness(1.2);
  transition: .4s
}

.dropdown-menu a:hover img {
  filter: brightness(1.2);
  transition: .4s
}

.block-copy {
  font-size: 13px;
  font-style: italic;
}

/* Container hiding the scrollbar and defining the width */
.marquee-container {
  overflow: hidden;
  user-select: none;
  display: flex;
  width: 100%;
}

/* The element animating left to right */
.marquee-content {
  flex-shrink: 0;
  min-width: 100%;
  animation: scroll-marquee 20s linear infinite;
}

/* Pause animation on hover */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

/* Define the image sizes uniformly if needed */
.marquee-content img {
  
}

/* Keyframes for the seamless translation */
@keyframes scroll-marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(calc(-50% - 0.75rem)); /* Adjust based on your gap (gap-4 is 1.5rem, halved is 0.75rem) */
  }
}

.nav-link:focus-visible {
  outline: 0;
  box-shadow: none;
}