@charset "utf-8";
/* CSS Document */

.navbar-B20.scrolled {
	top: 72px !important; /* add space for promo strip */
}
	
/* top gallery */
.studio-gallery img {
	border-radius: 12px;
	box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.2);
}

/* Container bounds control */
.marquee-container {
  white-space: nowrap;
	background-color: #00a9e0 !important;
}

/* Scroll engine utilizing standard keyframes */
.marquee-content {
  animation: scroll-left 20s linear infinite;
}

/* Pause function when users hover over content */
.marquee-content:hover {
  animation-play-state: paused;
}

/* Ensure tracks maintain full footprint layout */
.marquee-track {
  flex-shrink: 0;
  min-width: 100%;
}

/* Transition calculation based on element width transformation */
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.campaign-banner-wrap{
  position:sticky;top:0;z-index:1100;
  background:#1e2530;
  overflow:hidden;
  transition:max-height .4s ease,opacity .4s ease;
  max-height:140px;
}
.campaign-banner-wrap.dismissed{max-height:0;opacity:0;pointer-events:none}
.campaign-carousel{position:relative}
.campaign-text-slide{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:12px;
  background:#00A9E0;
  padding:11px 52px 11px 20px;
  min-height:56px;
  font-family:inherit;font-size:14px;color:#fff;
  text-align:center;
}
.campaign-pill{
  background:rgba(255,255,255,.2);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 11px;border-radius:20px;white-space:nowrap;
}
.campaign-msg{color:rgba(255,255,255,.92);font-weight:500;font-size:18px;}
.campaign-msg strong{color:#fff;font-weight:700}
.campaign-cta{
  background:#fff;color:#00A9E0;
  font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:5px 16px;border-radius:20px;white-space:nowrap;
  text-decoration:none;transition:background .2s;flex-shrink:0;
}
.campaign-cta:hover{background:#d4f0fa;color:#00A9E0}
.campaign-img{
  width:100%;display:block;
  height:110px;object-fit:cover;object-position:center 22%;
}
.campaign-img-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:60px;
  background:linear-gradient(to right,transparent 50%,rgba(0,0,0,.4) 100%);
  pointer-events:none;
}
.campaign-img-btn{
  background:#00A9E0;color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:8px 20px;border-radius:20px;pointer-events:none;
}
.campaign-dots{
  position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:2;
}
.campaign-dots button{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.35);border:none;padding:0;cursor:pointer;
  opacity:1;
}
.campaign-dots button.active{background:#fff}
.campaign-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:rgba(255,255,255,.55);
  font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;z-index:3;
}
.campaign-close:hover{color:#fff}
/* Adjust Bootstrap navbar sticky-top offset when banner visible */
.navbar-B20{transition:top .4s ease}

/* ── Studio USP block (above Top10 + form) ──────────────── */
.studio-usp-block{
  background:linear-gradient(135deg,#2e3440 0%,#1e2530 100%);
  padding:40px;border-radius:10px !important;
  margin-bottom:0;
}
.studio-usp-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#00A9E0;margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.studio-usp-eyebrow::before{content:'';width:22px;height:2px;background:#00A9E0}
.studio-usp-block h2{
  font-size:50px !important;font-weight:900;
  color:#fff !important;line-height:1;text-transform:uppercase;
  letter-spacing:-1px;margin-bottom:14px;
}
.studio-usp-block h2 em{color:#00A9E0;font-style:normal}
.studio-usp-block .usp-sub{
  font-size:15px;font-weight:600;color:rgba(255,255,255,.75);
  margin-bottom:12px;
}
.studio-usp-block .usp-body{
  font-size:13px;color:rgba(255,255,255,.55);line-height:1.3;margin-bottom:24px;
}
.studio-kpis{display:flex;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.kpi-item .kv{
  font-size:38px;font-weight:900;color:#00A9E0;line-height:1;
  font-family:inherit;
}
.kpi-item .kl{
  font-size:10px;color:rgba(255,255,255,.38);text-transform:uppercase;
  letter-spacing:1.2px;margin-top:2px;
}
/* Page anchor nav buttons */
.studio-page-nav{
  display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}
.studio-page-nav a{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;padding:9px 12px;
  color:rgba(255,255,255,.65);
  font-size:12px;font-weight:600;
  text-decoration:none;
  transition:background .18s,border-color .18s,color .18s;
}
.studio-page-nav a:hover{
  background:rgba(0,169,224,.12);
  border-color:rgba(0,169,224,.3);
  color:#fff;
}
.pnav-ic{
  width:22px;height:22px;border-radius:5px;
  background:rgba(0,169,224,.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pnav-ic svg{width:11px;height:11px;fill:#00A9E0}
.pnav-full{grid-column:1/-1}

/* ── Campaign section block ─────────────────────────────── */
.campaign-section{
  background:#1e2530;
  padding:36px 0;
}
.campaign-tag-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#00A9E0;color:#fff;
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:3px 12px;border-radius:3px;margin-bottom:10px;
}
.campaign-section h3{
  font-size:28px;font-weight:900;text-transform:uppercase;
  color:#fff;line-height:1.05;margin-bottom:8px;
}
.campaign-section h3 em{color:#00A9E0;font-style:normal}
.campaign-section .camp-body{color:rgba(255,255,255,.55);font-size:13px;line-height:1.65;margin-bottom:14px}
.campaign-section .camp-exp{color:rgba(255,255,255,.22);font-size:11px;margin-top:8px}
.camp-creative{
  border-radius:10px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  transition:transform .25s;
}
.camp-creative:hover{transform:scale(1.02)}
.camp-creative img{width:100%;display:block}

/* ── Owner bio quote ────────────────────────────────────── */
.owner-quote{
  border-left:3px solid #00A9E0;
  padding:12px 16px;
  background:rgba(0,169,224,.07);
  border-radius:0 6px 6px 0;
  font-style:italic;
  color:#444;
  font-size:14px;
  line-height:1.7;
  margin:16px 0;
}

/* ── Trust strip ─────────────────────────────────────────── */
.trust-strip{
  background:#eaf6fc;
  border-top:1px solid #c5e8f5;
  border-bottom:1px solid #c5e8f5;
  padding:12px 0;
}
.trust-item{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:#2e3440;
  padding:4px 0;
}
.trust-dot{
  width:24px;height:24px;border-radius:50%;
  background:#00A9E0;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.trust-dot svg{width:12px;height:12px;fill:#fff}

/* ── Testimonials rating stars ──────────────────────────── */
.testimonial-stars{color:#00A9E0;font-size:14px;margin-bottom:8px}

/* ── Video section dark bg ──────────────────────────────── */
.video-section-dark{background:#2e3440;padding:48px 0}
.video-wrap{border-radius:10px;overflow:hidden;background:#0d1520}
.video-wrap video{width:100%;display:block}
.video-caption{padding:12px 16px;background:#0d1520}
.video-caption strong{font-size:14px;font-weight:700;text-transform:uppercase;color:#fff;display:block;margin-bottom:2px}
.video-caption span{font-size:12px;color:rgba(255,255,255,.38)}

/* ── FAQ accordion ──────────────────────────────────────── */
.studio-faq .accordion-button{font-weight:700;font-size:15px}
.studio-faq .accordion-button:not(.collapsed){
  background:#eaf6fc;color:#00A9E0;
}
.studio-faq .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(0,169,224,.25)}


/* Form Section */
.studio-contact h1 {
  font-size: 50px !important;
  font-weight: 900;
  color: #fff !important;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin-bottom: 14px;
}

.studio-contact p {
  color: #272e39 !important;
  font-weight: 600;
  margin-bottom: 12px;
}

.card {
  border: none;
  padding: 10px 30px;
  background-color: #ccc !important;
  color: #ffffff;
  transition: all .2s ease-in-out;
}


.accordion-body-text {
  color: #333 !important;
	background-color: #fff !important;
	padding: 25px;
}

/* ── Responsive tweaks ──────────────────────────────────── */
@media(max-width:767px){
  .studio-usp-block{padding:28px 20px}
  .studio-usp-block h2{font-size:32px}
  .studio-page-nav{grid-template-columns:1fr}
  .campaign-text-slide{font-size:13px;padding:10px 44px 10px 16px}
  .studio-kpis{gap:16px}
  .kpi-item .kv{font-size:30px}
}