/* FONT IMPORT */

/* Google Fonts — two families only: Inter (headlines) + Poppins (body).
   The @import that used to live here has moved to a <link> in
   include/header.php. An @import inside a stylesheet cannot be discovered
   until that stylesheet has itself been downloaded and parsed, so the fonts
   sat one full round trip behind custom.min.css — Lighthouse measured 959ms
   of render-blocking for a 1KB file. As a <link> in the head it is fetched in
   parallel with everything else, and the preconnect above it warms the
   connection first. */

:root {
  --white: #fff;
  --black: #1b1d1c;
  --primary: #21c7f7;
  --secondary: #170c84;

  /* TYPOGRAPHY SYSTEM
     Two families only. Headlines: Inter Bold. Body: Poppins Regular. */
  --font-heading: "Inter", sans-serif;
  --font-body: "Poppins", sans-serif;

  /* One size per heading level, used sitewide so headings never disagree.
     Sized for Inter, which sets wider than the Acumin face it replaced —
     the old 7.3rem hero overflowed its column once the family changed. */
  --fs-large: 8rem;
  --fs-hero: 5rem; /* home banner h1 */
  --fs-banner: 5rem; /* inner-page banner h1 — 80px on large screens, matching the home hero, so every banner reads the same */
  --fs-h2: 2.75rem; /* every major section heading */
  --fs-h3: 1.6rem; /* sub-headings inside a section */
  --fs-h4: 1.25rem; /* card / list headings */

  --fs-body: 1rem;
  --fs-lead: 1.5rem;
  --lh-heading: 1.15;
  --lh-body: 1.9;
  --lh-lead: 1.6;
}

*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  position: relative;
  background: #f7f9f8;
  overflow-x: hidden;
  height: 100%;
  /* font-family: var(--font-body); */
}

section {
  position: relative;
  padding: 6rem 0;
}

p,
li,
span,
label,
input,
textarea,
select {
  font-family: var(--font-body);
}

p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: #0b0b0b;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* One size per level — overrides the per-section sizes further down. */
h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

.img-auto {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.img {
  perspective: none;
  overflow: hidden;
  transform-style: preserve-3d;
}

.img img {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  will-change: transform, box-shadow;
  display: block;
}

a,
button {
  text-decoration: none !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-family: var(--font-body);
}

a:hover,
button:hover {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

figure {
  margin: 0;
}

/* Cursor Start */

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  margin-left: 2px;
  margin-top: 2px;
  width: 7px;
  height: 7px;
  z-index: 10000001;
  background-color: var(--primary);
  -webkit-transition:
    width 0.3s ease-in-out,
    height 0.3s ease-in-out,
    margin 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  -o-transition:
    width 0.3s ease-in-out,
    height 0.3s ease-in-out,
    margin 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  transition:
    width 0.3s ease-in-out,
    height 0.3s ease-in-out,
    margin 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
  margin-left: -10px;
  margin-top: -10px;
  width: 30px;
  height: 30px;
  background-color: var(--primary);
  opacity: 0.3;
}

/* Cursor End */

/* PRELOADER */

body.loading {
  overflow: hidden;
  height: 100vh;
}

.preLoader {
  width: 100%;
  height: 100%;
  z-index: 1111;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: start;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 11113;
}

.preLoader .counter {
  color: var(--white);
  font-size: 15rem;
  font-family: var(--font-heading);
  font-weight: 700;
  position: absolute;
  bottom: 0rem;
  right: 5rem;
}

.preLoader .bar {
  height: 20%;
  width: 100vw;
  background-color: var(--primary);
}

/* PRELOADER */

/* GLOBAL CSS */

.themeBtn {
  background: linear-gradient(
    90deg,
    rgba(31, 63, 211, 1) 0%,
    rgba(33, 199, 247, 1) 51%
  );
  font-size: 1.325rem;
  color: var(--white);
  text-transform: uppercase;
  font-weight: 400;
  display: inline-block;
  padding: 1.4rem 3.2rem;
  line-height: normal;
  border-radius: 20pc;
}

.themeBtn:hover {
  color: white;
}

.themeBtn.borderBtn {
  background: transparent;
  border: 1px solid #fff;
  padding: 1.04em 2em;
}

/* NAV HEADER CSS */
/* NAV HEADER CSS */

header {
  background: #eef0f3;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 111;
  top: 0;
  width: 100%;
  transition: 0.3s ease-in-out;
  padding: 0rem 5rem 0rem 0rem;
}

.navbar-brand {
  margin: 0;
  padding: 1rem 11.2rem 0.8rem 8.4rem;
  background: #f7f9f8;
  clip-path: polygon(0% 0%, 100% 0%, 89% 100%, 0% 100%);
  position: relative;
}

/* .navbar-brand img{
  width: 280px;
} */

.navbar-nav {
  align-items: center;
  width: 76%;
  gap: 6rem;
}

.navbar-nav .nav-item .nav-link {
  font-size: 1.1rem;
  color: #090909;
  font-weight: 500;
  padding: 0 0;
  display: inline-block;
  position: relative;
}

.navbar-nav .nav-link:hover {
  color: var(--primary) !important;
  font-weight: 500;
}

/* Active Tab Styling */
.navbar-nav .nav-link.active {
  color: var(--primary) !important;
  font-weight: 500;
}

.navbar-nav .nav-item:has(.nav-link.active) {
  color: var(--primary);
  /* Bullet color changes */
}

body.menu-open {
  overflow: hidden;
}

.side-header {
  display: none;
}

@media (max-width: 1199px) {
  .side-menu {
    position: fixed;
    top: 0;
    left: -280px;
    /* hidden by default */
    width: 280px;
    height: 100%;
    background: #ffffff;
    padding-top: 15px;
    transition: 0.4s ease;
    z-index: 9999;
  }

  .side-menu.show {
    left: 0;
  }

  .navbar-nav {
    flex-direction: column;
    padding-left: 20px;
  }

  .navbar-nav .nav-link {
    color: #fff;
    padding: 10px 0;
  }

  .side-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .side-logo img {
    height: 79px;
  }

  .menu-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
  }
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 999;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.navbar-toggler .toggler-icon {
  display: inline-block;
  width: 30px;
  height: 22px;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.navbar-toggler .toggler-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  transition: all 0.3s ease;
}

/* Default = Hamburger */
.navbar-toggler .toggler-icon span:nth-child(1) {
  top: 0;
  transform: rotate(0);
}

.navbar-toggler .toggler-icon span:nth-child(2) {
  top: 9px;
  opacity: 1;
}

.navbar-toggler .toggler-icon span:nth-child(3) {
  top: 18px;
  transform: rotate(0);
}

/* When menu open = X */
.navbar-toggler.active .toggler-icon span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.navbar-toggler.active .toggler-icon span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.active .toggler-icon span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* !NAV HEADER CSS */

/* * MAIN HERO SLIDER CSS */
.main-slider {
  height: 100vh !important;
}

.homeSlider.swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
}

.homeSlider.swiper-container .swiper-slide {
  overflow: hidden;
}

.homeSlider .swiper-pagination {
  bottom: 8rem;
  width: fit-content;
  left: 18rem;
}

.homeSlider .swiper-pagination {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  top: -63% !important;
  left: 96% !important;
  position: relative;
  gap: 2.7rem;
}

.homeSlider .swiper-pagination-bullet {
  width: 50px;
  height: 2px;
  background: var(--white);
  position: relative;
  opacity: 1;
}

.homeSlider .swiper-pagination-bullet-active::after {
  content: attr(data-index);
  position: absolute;
  left: 0px;
  top: -34px;
  font-size: 24px;
  color: #fff;
}

.homeSlider .swiper-pagination-bullet-active {
  width: 90px;
}

.homeSlider .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /* The hero image is named HERE rather than in a data-background attribute
     applied by js/custom.min.js. It is the Largest Contentful Paint element,
     and as a JS-applied background it could not even begin downloading until
     ~1.1MB of script had been fetched and parsed — Lighthouse measured LCP at
     20.5s on mobile for an image that is only 28KB. Declared in CSS it is
     discoverable by the preload scanner, and include/header.php preloads it. */
  background-image: url("../images/Banner.webp");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}

.main-slider h1 {
  /* Was margin:0 — the lead paragraph sat flush against an 80px headline. */
  margin: 0 0 1.5rem;
  color: #fefefe;
  font-size: var(--fs-hero);
  line-height: 1;
  font-weight: 700;
  position: relative;
}

.main-slider .wl-span {
  color: var(--white);
  /* PDF p3 090126: Poppins 400, sentence case — the caps + 600 weight read as a
     different family from the body face. letter-spacing went with the caps. */
  font-weight: 400;
  /* line-height was 2.6 — ~55px of dead leading that opened a gap between this
     and "Rusk Creative". Caps carry no descender, so 1.05 is enough. */
  line-height: 1.05;
  margin: 0 0 0.35rem;
  font-size: 2.75rem;
}

.main-slider p {
  font-size: 1.6rem;
  color: white;
  line-height: 1.5;
}

.slideOne {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.main-slider .right-content {
  display: flex;
  justify-content: center;
}

.main-slider .right-content .women-img {
  position: relative;
  top: 38px;
  opacity: 0;
  transform: translateY(80px) scale(0.7);
}

.main-slider .right-content.animate .women-img {
  animation: womenImageShow 1s ease forwards;
  animation-delay: 0.8s;
}

.main-slider .right-content .women-img:before {
  position: absolute;
  content: "";
  width: 600px;
  height: 600px;
  background: linear-gradient(
    180deg,
    rgba(31, 44, 206, 1) 8%,
    rgba(32, 152, 234, 1) 48%
  );
  border-radius: 100%;
  z-index: -1;
  top: -6%;
  opacity: 0;
  transform: scale(0);
}

.main-slider .right-content.animate .women-img::before {
  animation:
    circleReveal 1s ease forwards,
    womenBoxPulse 2s infinite 1.3s;
}

@keyframes women-box {
  0% {
    box-shadow: 0 0 0 0px rgb(34 150 225);
  }

  100% {
    box-shadow: 0px 2px 0px 26px rgb(33 148 225);
  }
}

.main-slider .design-1 {
  position: absolute;
  top: 9%;
  z-index: -0;
  left: 8%;

  opacity: 0;
  transform: translateX(-120px) rotate(-20deg);
}

.main-slider .right-content.animate .design-1 {
  animation: designLeft 1s ease forwards;
  animation-delay: 1.8s;
}

.main-slider .design-2 {
  position: absolute;
  top: 29%;
  /* Was -1, which stacked this second website card BEHIND the portrait — at
     1200-1440px it was fully hidden, with only a sliver showing beside the
     chair. 0 matches .design-1: the collage paints in DOM order (portrait,
     card 1, card 2, logos), so the card now sits in front of the portrait
     while the client logos still paint on top of it. */
  z-index: 0;
  right: -0%;
  opacity: 0;
  transform: translateX(120px) rotate(20deg);
}

.main-slider .right-content.animate .design-2 {
  animation: designRight 1s ease forwards;
  animation-delay: 2.2s;
}

.main-slider .logos .logo {
  position: absolute;
  /* These tiles have no sized box — they render at their natural pixel size, so
     a larger source would blow the layout up. Pinning the width keeps every
     tile at the established 100px and lets the Travelers tile ship at 2x for
     retina. logo1/2/4 are already 100px wide, so this changes nothing for them. */
  width: 100px;
  height: auto;

  opacity: 0;
  transform: scale(0) rotate(180deg);
}

.main-slider .logos .logo:nth-child(1) {
  top: 4%;
  right: 24%;
}

.main-slider .logos .logo:nth-child(2) {
  top: 23%;
  right: 20%;
}

.main-slider .logos .logo:nth-child(3) {
  bottom: 42%;
  left: 2%;
}

.main-slider .logos .logo:nth-child(4) {
  bottom: 24%;
  left: 16%;
}

.main-slider .right-content.animate .logo:nth-child(1) {
  animation: logoPop 0.8s ease forwards;
  animation-delay: 2.8s;
}

.main-slider .right-content.animate .logo:nth-child(2) {
  animation: logoPop 0.8s ease forwards;
  animation-delay: 3.2s;
}

.main-slider .right-content.animate .logo:nth-child(3) {
  animation: logoPop 0.8s ease forwards;
  animation-delay: 3.6s;
}

.main-slider .right-content.animate .logo:nth-child(4) {
  animation: logoPop 0.8s ease forwards;
  animation-delay: 4s;
}

/* BLUE CIRCLE REVEAL */
@keyframes circleReveal {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  70% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* WOMEN IMAGE SHOW */
@keyframes womenImageShow {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.7);
  }

  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* FLOATING EFFECT */
.main-slider .right-content .women-img img {
  animation: floatWomen 4s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes floatWomen {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}

/* LEFT DESIGN */
@keyframes designLeft {
  0% {
    opacity: 0;
    transform: translateX(-120px) rotate(-20deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* RIGHT DESIGN */
@keyframes designRight {
  0% {
    opacity: 0;
    transform: translateX(120px) rotate(20deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* LOGO POP */
@keyframes logoPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* PULSE EFFECT */
@keyframes womenBoxPulse {
  0% {
    box-shadow: 0 0 0 0 rgb(34 150 225 / 70%);
  }

  70% {
    box-shadow: 0 0 0 30px rgb(34 150 225 / 0%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(34 150 225 / 0%);
  }
}

/* slide-social-icon */
.header_links {
  position: relative;
  z-index: 11;
  top: 31%;
  left: 1%;
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.header_links li:first-child {
  writing-mode: sideways-rl;
  color: #fff;
  font-size: 17px;
  font-style: italic;
  margin: 0 14px 16px 12px;
}

ul.header_links li a {
  color: #fff;
  font-size: 22px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.3s ease;
  display: grid;
  place-items: center;
}

ul.header_links li a:hover {
  color: var(--white);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #170c84b3;
  transition: all 0.3s ease;
}

ul.header_links li {
  line-height: 1;
  margin-bottom: 20px;
}

.arrow {
  animation: upDown 1.5s ease-in-out infinite;
  position: absolute;
  left: 0;
  right: 3%;
  margin: auto;
  bottom: 16%;
  text-align: center;
  width: fit-content;
  height: fit-content;
  z-index: 0;
}

.arrow i {
  height: 6.25rem;
  width: 4rem;
  display: grid;
  place-items: center;
  margin: auto;
  background-color: rgb(217 217 217 / 34%);
  border-radius: 30px;
  color: var(--white);
  font-size: 1.285rem;
  border: 2px solid var(--white);
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
    /* neeche */
  }

  100% {
    transform: translateY(0);
    /* wapas upar */
  }
}

.main-slider .top-bar {
  padding-top: 1.3rem;
}

.top-bar {
  display: flex;
}

.top-bar .call-us-btn .call-icon {
  background: var(--primary);
  animation: call-about 2s infinite;
}

@keyframes call-about {
  0% {
    box-shadow: 0 0 0 0px rgb(48 201 245 / 54%);
  }

  100% {
    box-shadow: 0 0 0 9px rgb(47 199 244 / 74%);
  }
}

.call-us-btn {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #313131;
  font-size: 16px;
  padding-left: 2.9rem;
}

@keyframes call-animation {
  0% {
    box-shadow: 0 0 0 0px rgb(1 43 101);
  }

  100% {
    box-shadow: 0 0 0 9px rgb(1 43 101 / 19%);
  }
}

.call-icon {
  background: #012b65;
  color: var(--black);
  border-radius: 50%;
  font-size: 18px;
  margin-right: 17px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  animation: call-animation 2s infinite;
}

.call-icon figure img {
  width: 25px;
  height: auto;
}

.call-text {
  display: flex;
  flex-direction: column;
  color: var(--white);

  /* padding-left: 0.9rem; */
  line-height: 1.3;
}

/* Hero sits on the blue banner — label and number both read white. */
.call-text span:first-child {
  font-size: 20px;
  color: var(--white);
}

.call-text span:last-child {
  color: var(--white);
  font-size: 24px;
  font-weight: 500;
}

.main-slider .themeBtn {
  background: var(--secondary);
  /* text-transform: capitalize; */
  padding: 1.1rem 3rem;
}

/* !MAIN HERO SLIDER CSS */
.section-1 {
  padding: 2.5rem 0;
}

.section-1 .satisfaction-slider .content {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 4rem 2rem;
}

/* .satisfaction-slider{
  padding: 0 9.2rem;
} */
.satisfaction-slider .swiper-slide-active {
  border: 1px solid #9898983d;
  border-radius: 50px;
}

.section-1 .satisfaction-slider .content h3 {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: 2px;
}

.section-2 .content {
  width: 90%;
}

.section-2 .content span {
  font-size: 1.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--secondary);
}

.section-2 .content h2 {
  font-size: var(--fs-h2);
  /* color: var(--black); */
  font-weight: 600;
  /* p is margin:0 sitewide, so the copy sat flush against the headline. */
  margin-bottom: 1.5rem;
}

.section-2 .content p {
  width: 73%;
}

.section-2 .top-bar {
  padding-top: 1.2rem;
}

.section-2 .top-bar .themeBtn {
  display: block;
  height: fit-content;
  margin-left: 1rem;
  background: var(--secondary);
  padding: 1rem 3rem;
}

.images-content {
  position: relative;
}

.images-content {
  position: relative;
}

.images-content .brillint-img,
.images-content .brillint-text {
  position: absolute;
  opacity: 0;
}

.images-content .brillint-img:nth-child(1) {
  left: 15%;
  top: -91px;
}

.images-content .brillint-img:nth-child(2) {
  top: 368px;
  left: -45%;
}

.images-content .brillint-img:nth-child(3) {
  top: 251px;
  left: -12%;
}

.images-content .img-4 {
  right: 7%;
  top: 213px;
}

.images-content .brillint-text {
  top: 84px;
  left: 60%;
  width: 36%;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #3c3c3c;
  font-weight: 300;
  margin: 0;
  font-family: var(--font-body);
}

.images-content.animate .img-1 {
  animation: slideDown 0.8s ease forwards;
}

.images-content.animate .img-2 {
  animation: slideLeft 0.8s ease forwards;
  animation-delay: 0.4s;
}

.images-content.animate .img-3 {
  animation: popIn 0.8s ease forwards;
  animation-delay: 0.8s;
}

.images-content.animate .img-4 {
  animation: popIn 0.8s ease forwards;
  animation-delay: 0.8s;
}

.images-content.animate .brillint-text {
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 1.2s;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }

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

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }

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

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

/* New Imag Shine Css End  */

/* Services Sec Css Start */
.services-sec {
  position: relative;
  padding-top: 2.5rem;
}

.services-sec:after {
  content: "";
  position: absolute;
  background: url(../images/before-ser.webp) no-repeat;
  width: 100%;
  height: 127vh;
  z-index: -1;
  right: -3%;
  top: -41%;
}

.heading-sec {
  display: flex;
  justify-content: space-between;
  padding-left: 11rem;
  padding-bottom: 3rem;
}

.heading-sec h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
}

.services-sec .container-fluid {
  /* padding-left: 7rem !important; */
}

.services-content h3 {
  font-size: var(--fs-h3);
  color: var(--white);
  padding-top: 1rem;
}

.services-content p {
  font-size: 0.925rem;
  line-height: 1.5;
  /* width: 80%; */
  color: var(--white);
}

.services-content a {
  transition: 0.3s linear;
  padding-top: 0.9rem;
  display: block;
}

.services-content a:hover img {
  filter: blur(1px);
}

.services-img {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-img img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.services-img::before {
  position: absolute;
  content: "";
  height: 250px;
  width: 220px;
  background-color: var(--primary);
  top: -0.875rem;
  left: -20px;
  border-radius: 20px 0 0 0;
  z-index: -1;
  opacity: 0;
  transition: 0.6s ease;
}

.servicesslider .services-wrapp {
  background: var(--secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.9rem 2rem;
  text-align: center;
  border-radius: 17%;
}

/* The tile is an <a> (services-loader.js links each service to its section on
   services.php) — keep it looking exactly like the old div. */
.servicesslider a.services-wrapp,
.servicesslider a.services-wrapp:hover,
.servicesslider a.services-wrapp:focus {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.servicesslider .swiper-slide {
  padding: 1rem 0 0 2rem;
}

.servicesslider .swiper-slide.swiper-slide-active .services-img::before {
  left: -12px;
  top: -12px;
  opacity: 1;
}

.services-sec .swiper-button-next figure {
  place-items: center;
  display: grid;
  font-size: 2.6rem;
  color: #000;
  font-family: var(--font-body);
}

.services-sec .swiper-button-next:hover {
  background: #170c840d;
  color: white;
}

.services-sec .swiper-button-next:after,
.services-sec .swiper-button-prev:after {
  display: none;
}

.services-sec .swiper-button-next {
  right: 10%;
  height: 7.5rem;
  border: 1px solid var(--secondary);
  /* background: rgb(235 237 239 / 72%); */
  width: 7.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  top: -84%;
  bottom: 0;
  margin: auto;
}

.services-sec .swiper-button-next figure img {
  width: 60px;
}

.servicesslider .swiper-slide:nth-child(even) {
  margin-top: 100px;
}

.section-3 {
  position: relative;
  margin-top: 4rem;
}

.section-3:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #eef0f3;
}

.section-3 .content {
  padding-left: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;

  opacity: 0;
  transform: translateX(-120px);
}

.section-3 .content h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.1;
  /* p is margin:0 sitewide, so the copy sat flush against the headline. */
  margin-bottom: 1.5rem;
}

.section-3 .web-post {
  margin-right: 4rem;

  opacity: 0;
  transform: translateX(120px);
}

.section-3 .content .themeBtn {
  display: block;
  width: fit-content;
  background: var(--secondary);
  padding: 1rem 3rem;
  margin-top: 1rem;
}

.section-3 .swiper-slide-active .content {
  animation: contentLeft 0.9s ease forwards;
  animation-delay: 0.3s;
}

.section-3 .swiper-slide-active .web-post {
  animation: imageRight 1s ease forwards;
  animation-delay: 0.6s;
}

/* =========================================
   LEFT CONTENT
========================================= */

@keyframes contentLeft {
  0% {
    opacity: 0;
    transform: translateX(-120px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================
   RIGHT IMAGE
========================================= */

@keyframes imageRight {
  0% {
    opacity: 0;
    transform: translateX(120px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.section-3 .content,
.section-3 .web-post {
  will-change: transform, opacity;
}

/* =========================================
   PAGINATION POSITION
========================================= */

.section-3 .swiper-pagination {
  position: absolute;
  top: 50% !important;
  /* right: 60px !important; */
  left: auto !important;
  transform: translateY(-50%);
  width: 30px !important;
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  left: 3% !important;
}

/* =========================================
   VERTICAL LINE
========================================= */

.section-3 .swiper-pagination::before {
  content: "";

  position: absolute;

  width: 2px;
  height: 100%;

  background: #d9d9d9;

  left: 50%;
  top: 0;

  transform: translateX(-50%);

  z-index: -1;
}

/* =========================================
   BULLETS
========================================= */

.section-3 .swiper-pagination-bullet {
  width: 18px;
  height: 18px;

  background: #d9d9d9;

  opacity: 1;

  border-radius: 100%;

  margin: 0 !important;

  transition: all 0.4s ease;

  position: relative;

  cursor: pointer;
}

/* =========================================
   ACTIVE BULLET
========================================= */

.section-3 .swiper-pagination-bullet-active {
  background: #2418b5;

  transform: scale(1.15);

  box-shadow: 0 0 0 8px rgba(36, 24, 181, 0.12);
}

.section-4 .porfolio-after {
  position: absolute;
  right: 0;
  top: 39px;
}

.section-4 h2 {
  font-size: var(--fs-h2);
  text-align: center;
  font-weight: 600;
  /* Heading carried no margin of its own, so it ran straight into the tabs. */
  margin: 0 0 2.5rem;
}

.section-15 ul,
.section-5 ul,
.section-4 ul {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap-reverse;
  padding-bottom: 4rem;
  margin: 0;
}

.section-15 ul li a,
.section-5 ul li a,
.section-4 ul li a {
  color: var(--black);
  font-size: 1.3rem;
  transition: 0.3s ease-out;
}

.section-4 ul li a:hover {
  color: var(--secondary);
}

.section-4 .content-img figure {
  margin: 1.8rem 0;
}

.section-4 .portfolio-box {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  opacity: 0;
  transform: scale(0) rotate(15deg);
}

.section-4.animate .portfolio-box:nth-child(1) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.1s;
}

.section-4.animate .portfolio-box:nth-child(2) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.2s;
}

.section-4.animate .portfolio-box:nth-child(3) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.3s;
}

.section-4.animate .portfolio-box:nth-child(4) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.4s;
}

.section-4.animate .portfolio-box:nth-child(5) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.5s;
}

.section-4.animate .portfolio-box:nth-child(6) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.6s;
}

.section-4.animate .portfolio-box:nth-child(7) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.7s;
}

.section-4.animate .portfolio-box:nth-child(8) {
  animation: jhatkaPop 0.7s ease forwards;
  animation-delay: 0.8s;
}

@keyframes jhatkaPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(15deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.15) rotate(-6deg);
  }

  70% {
    transform: scale(0.95) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.section-4 .portfolio-box img {
  width: 100%;
  transition: 0.5s ease;
}

.section-4 .portfolio-box .overlay {
  position: absolute;

  inset: 0;

  /* background: rgba(0, 0, 0, 0.65); */
  background: linear-gradient(
    90deg,
    rgba(23, 12, 132, 0.61) 0%,
    rgba(33, 199, 247, 0.39) 53%
  );
  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;

  transition: 0.5s ease;
}

.section-4 .portfolio-box .overlay span {
  width: 70px;
  height: 70px;

  border-radius: 100%;
  /* background: linear-gradient(90deg,rgba(23, 12, 132, 0.61) 0%, rgba(33, 199, 247, 0.39) 53%); */
  /* background: #2418b5; */
  background: rgba(0, 0, 0, 0.65);
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 50px;
  font-weight: 300;

  transform: scale(0);

  transition: 0.4s ease;
}

.section-4 .portfolio-box:hover .overlay {
  opacity: 1;
  visibility: visible;
}

.section-4 .portfolio-box:hover .overlay span {
  transform: scale(1);
}

.section-4 .portfolio-box:hover img {
  transform: scale(1.08);
}

.section-4 .top-bar {
  justify-content: center;
  padding-top: 2.3rem;
}

.section-4 .top-bar .themeBtn {
  padding: 1rem 3rem;
  background: var(--secondary);
}

.ul-tab {
  display: flex;
  gap: 20px;
  justify-content: center;

  padding: 0;
  margin: 0 0 50px;

  list-style: none;
}

.ul-tab li a,
.ul-tab li button {
  padding: 14px 30px;

  border-radius: 50px;

  background: #f1f1f1;

  color: #000;

  text-decoration: none;

  transition: 0.4s ease;

  display: inline-block;
}

/* Tabs that actually filter something are buttons, not links (digital-signage
   .php). Same pill, minus the styles a button brings with it. */
.ul-tab li button {
  border: 0;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}

.ul-tab li button:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.ul-tab li a:hover,
.ul-tab li button:hover {
  background: var(--secondary);
  color: #fff !important;
}

/* ACTIVE TAB */

.ul-tab li a.active,
.ul-tab li button.active {
  background: var(--secondary);
  color: #fff;
}

.youtub-link {
  position: relative;
}

.youtub-link .control-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.youtub-link .control-btn a {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: red;
  display: grid;
  place-items: center;
  animation: pulse-animation 2s infinite;
  backdrop-filter: blur(6px);
  overflow: hidden;
  background-position: center;
}

.youtub-link .control-btn a i {
  font-size: 2rem;
  color: white;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgb(238, 203, 189, 0.9);
  }

  100% {
    box-shadow: 0 0 0 20px rgb(230, 42, 42, 0.1);
  }
}

.section-15 .ser-pkg,
.section-5 .ser-pkg,
.content-img {
  display: none;
}

.section-15 .ser-pkg.active,
.section-5 .ser-pkg.active,
.content-img.active {
  display: block;
}

.section-5 {
  position: relative;
}

.section-5:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 70vh;
  background: url(../images/our-pkg-bg.webp) no-repeat;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: cover;
}

.section-5 .heading-sec {
  padding: 0;
  margin-bottom: 3rem;
  align-items: center;
}

.section-5 .heading-sec h2 {
  color: var(--white);
}

.section-5 .top-bar {
  flex-direction: column;
}

.section-5 .top-bar .themeBtn {
  padding: 1rem 3rem;
  background: var(--primary);
}

.section-5 ul {
  justify-content: start;
}

.section-5 .ul-pkg li a {
  color: var(--white);
  transition: 0.4s ease-in;
}

.ul-pkg li a.active {
  color: var(--primary);
}

.section-5 .ul-pkg li a:hover {
  color: var(--primary);
}

.section-15 .pkg-content,
.section-5 .pkg-content {
  background: linear-gradient(
    0deg,
    rgba(33, 199, 247, 1) 22%,
    rgba(30, 8, 196, 1) 95%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 2rem 2.2rem;
  text-align: center;
  border-radius: 30px;
  margin: 0;
  height: 100%;
  border: 4px solid white;
}

/* Equal vertical spacing when cards wrap to a new row */
.section-15 .ser-pkg .row,
.section-5 .ser-pkg .row {
  row-gap: 2.5rem;
}

.section-15 .pkg-content p,
.section-5 .pkg-content p {
  color: #ffffffe6;
  font-size: 0.95rem;
  line-height: 1.6;
  width: 100%;
  padding: 0 0 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid #ffffff33;
  /* Cards are already equal-height via flex + margin-top:auto on the button
     (see "Pricing: show the FULL package" below), so the description does not
     need clamping -- it was truncating longer packages mid-word. min-height
     just stops short copy from collapsing the row. */
  min-height: 3.04rem;
}

.section-15 .pkg-content p::-webkit-scrollbar,
.section-5 .pkg-content p::-webkit-scrollbar {
  width: 6px;
}

/* TRACK */
.section-15 .pkg-content p::-webkit-scrollbar-track,
.section-5 .pkg-content p::-webkit-scrollbar-track {
  background: #2d2d2d;
  border-radius: 50px;
}

/* THUMB */
.section-15 .pkg-content p::-webkit-scrollbar-thumb,
.section-5 .pkg-content p::-webkit-scrollbar-thumb {
  background: #2418b5;
  border-radius: 50px;
}

/* HOVER */
.section-15 .pkg-content p::-webkit-scrollbar-thumb:hover,
.section-5 .pkg-content p::-webkit-scrollbar-thumb:hover {
  background: #2098ea;
}

.section-15 .pkg-content h3,
.section-5 .pkg-content h3 {
  font-size: 2rem;
  padding: 0.8rem 1rem;
  border-radius: 16px;
  text-align: center;
  font-weight: 700;
  color: white;
  background: hsl(0deg 0% 100% / 14%);
  margin-bottom: 1.2rem;
  width: 100%;
  /* nowrap made any title wider than the card spill out of its pill
     ("Corporate Logo Packa|ge" at >=1440px). Wrapping keeps it inside. */
  white-space: normal;
  text-wrap: balance;
}

/* Price block */
.section-15 .pkg-price,
.section-5 .pkg-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin-bottom: 1.2rem;
}

.section-15 .pkg-price .current-price,
.section-5 .pkg-price .current-price {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.section-15 .pkg-price .old-price,
.section-5 .pkg-price .old-price {
  font-size: 1.4rem;
  color: #ffffffb3;
  text-decoration: line-through;
}

.section-15 .pkg-price .discount-badge,
.section-5 .pkg-price .discount-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e08c4;
  background: #fff;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  align-self: center;
}

/* Features list */
.section-15 .pkg-features,
.section-5 .pkg-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  width: 100%;
  text-align: left;
  /* Override the broad ".section-5 ul" rule (gap: 4rem, flex-wrap) so
     feature points stack vertically with tight, even spacing.
     nowrap prevents overflowing features from spilling into a 2nd column */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.6rem;
  /* Fixed height so cards with 10 or 19 features stay the same size */
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
  scrollbar-width: thin;
  scrollbar-color: #2418b5 #dcdcdc2b;
}

.section-15 .pkg-features::-webkit-scrollbar,
.section-5 .pkg-features::-webkit-scrollbar {
  width: 6px;
}

.section-15 .pkg-features::-webkit-scrollbar-track,
.section-5 .pkg-features::-webkit-scrollbar-track {
  background: #ffffff1a;
  border-radius: 50px;
}

.section-15 .pkg-features::-webkit-scrollbar-thumb,
.section-5 .pkg-features::-webkit-scrollbar-thumb {
  background: #ffffff80;
  border-radius: 50px;
}

.section-15 .pkg-features li,
.section-5 .pkg-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #fff;
  font-family: var(--font-body);
}

.section-15 .pkg-features li i,
.section-5 .pkg-features li i {
  color: #fff;
  font-size: 0.95rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.section-15 .pkg-content h4,
.section-5 .pkg-content h4 {
  font-size: 3.4rem;
  font-weight: 700;
  color: red;
}

.section-15 .pkg-content .themeBtn,
.section-5 .pkg-content .themeBtn {
  background: var(--secondary);
  padding: 1rem 3rem;
  margin-top: auto;
}

.section-6 {
  padding: 0;
}

.section-6 .direction-banner {
  /* Client request: this CTA reads on white, not the brand blue. Everything
     inside it was coloured for a dark ground, so the heading, the live-chat
     text and the button are re-coloured below — on white, white text and the
     flat cyan button were unreadable. The decorative corner artwork
     (left/right-direction.webp) is dark tiles, so it still reads. */
  background: var(--white);
  padding: 5rem;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.section-6 .direction-banner:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url(../images/left-direction.webp) no-repeat;
  left: -13%;
  top: -72%;
  z-index: 0;

  opacity: 0;
  transform: translateY(60px) rotate(0deg);
  transition: all 1.2s ease;
}

.section-6 .direction-banner:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 101vh;
  background: url(../images/right-direction.webp) no-repeat;
  right: -61%;
  top: -29%;
  z-index: 0;

  opacity: 0;
  transform: translateY(60px) rotate(0deg);
  transition: all 1.2s ease;
}

.section-6.animate .direction-banner:before,
.section-6.animate .direction-banner:after {
  opacity: 1;
  transform: translateY(0px) rotate(0deg);
}

.section-6.animate .direction-banner:before {
  animation: floatY 6s ease-in-out infinite;
}

.section-6.animate .direction-banner:after {
  animation: floatY 7s ease-in-out infinite;
}

@keyframes floatY {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

.section-6 .direction-banner h2 {
  font-size: var(--fs-h2);
  text-align: center;
  font-weight: 700;
  color: var(--black);
  position: relative;
  z-index: 2;
}

.section-14 .btn-style,
.section-6 .btn-style {
  display: flex;
  justify-content: center;
  gap: 3rem;
  align-items: center;
  padding-top: 1.7rem;
  position: relative;
  z-index: 2;
}

.section-14 .chat-btn,
.section-6 .chat-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* "Need Help?" was cyan and "Live Chat Now" white — both were set for the old
   blue ground and wash out on white. */
.section-6 .chat-btn p:nth-child(1) {
  color: var(--secondary);
  font-size: 1.5rem;
  line-height: 1;
}

.section-6 .chat-btn p:nth-child(2) {
  color: var(--black);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
}

.section-6 .btn-style .themeBtn {
  display: block;
  height: fit-content;
  padding: 1.2rem 3.2rem;
  /* Flat cyan carried white label text well enough on the blue ground, but not
     on white. Falls back to the site's standard blue-to-cyan button gradient. */
  font-weight: 300;
}

/* testimonial-section */
.testimonial-section {
  background: url(../images/transparent-dot.webp) no-repeat;
  background-position: center;
  background-position-y: 46px;
  background-size: contain;
  background-position-x: 74%;
}

.testimonial-section h2 {
  font-size: var(--fs-h2);
  text-align: center;
  line-height: 0.4;
  color: var(--black);
  font-weight: 600;
}

.testimonial-section p {
  font-size: 1rem;
  text-align: center;
  color: var(--black);
  padding: 1rem 4.5rem;
}

.testimonial-slide {
  padding: 2.3rem 0;
}

.testimonial-slide .swiper-slide h4 {
  padding: 1rem;
  font-size: var(--fs-h4);
  color: var(--black);
}

.testimonial-slide .swiper-slide span i {
  color: #ffc82f;
}

.testimonial-slide .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-slide .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  user-select: none;
  padding: 0;
  top: 94% !important;
}

.testimonial-slide .swiper-pagination-bullet {
  width: 30px;
  height: 4px;
  background: var(--black);
  border-radius: 2px;
  opacity: 0.9;
  transition: all 0.3s ease;
  cursor: pointer;
}

.testimonial-slide .swiper-pagination-bullet-active {
  width: 50px;
  height: 6px;
  background: var(--primary);
  opacity: 1;
  border-radius: 3px;
}

.testimonial-section.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, -3px) !important;
  left: 0;
}

.display-images-left {
  position: relative;
}

.display-images-left figure {
  position: absolute;
}

.display-images-left figure:nth-of-type(1) {
  top: 91px;
}

.display-images-left figure:nth-of-type(2) {
  top: 233px;
  right: 0;
}

.display-images-left figure:nth-of-type(3) {
  top: 420px;
}

.display-images-left figure:nth-of-type(4) {
  top: 408px;
  right: 0;
}

.display-images-right {
  position: relative;
}

.display-images-right figure {
  position: absolute;
}

.display-images-right figure:nth-of-type(1) {
  top: 129px;
  right: 101px;
}

.display-images-right figure:nth-of-type(2) {
  top: 397px;
  right: 42px;
}

.display-images-right figure:nth-of-type(3) {
  top: 257px;
}

.display-images-right figure:nth-of-type(4) {
  top: 273px;
  right: 0px;
}

.talk-heading {
  font-size: var(--fs-large);
  font-weight: 700;
  text-align: center;
  width: 100%;
  /* Was #2098ea, which is 2.95:1 against the #f7f9f8 page — under the 3:1
     WCAG minimum even for text this large, and the single reason the
     accessibility score sat at 85. #1b86d1 is the same hue a shade deeper
     and measures 3.69:1. */
  color: #1b86d1;
  /* This block lives in a bare `.container`, not a <section>, so it inherited
     none of the 6rem section padding and collided with the CTA band above and
     the footer below. */
  margin: 5rem 0 5.5rem;
}

/* The whole heading dials the office number (client request). */
.talk-heading .talk-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.talk-heading .talk-link:hover {
  transform: translateY(-4px);
}

.talk-heading .lets {
  background: linear-gradient(90deg, #2418b5, #2098ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Visible to screen readers only. Used to append the phone number to the
   "Let's Talk" link: its aria-label used to REPLACE the visible text, which
   fails WCAG 2.5.3 (Label in Name) because the accessible name no longer
   contained the words a speech-control user can actually see. Appending
   instead keeps both. */
.rc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* inner-pages */
.inner-banner {
  background-size: cover;
  padding: 17rem 0;
}

.inner-banner h1 {
  font-size: var(--fs-banner);
  letter-spacing: 4px;
  color: var(--white);
  font-weight: 700;
}

.about-banner {
  background: url(../images/about-banner.webp) no-repeat;
}

.section-7 .img-ab {
  position: relative;
}

.section-7 .img-ab .before-ab {
  position: absolute;
  left: -42px;
  top: -7px;
}

.section-13 .content,
.section-11 .content,
.section-7 .content {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.section-13 .content h2,
.section-11 .content h2,
.section-7 .content h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  /* p is margin:0 sitewide, so the copy sat flush against the headline. */
  margin-bottom: 1.5rem;
}

.section-9 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: url(../images/brand-img.webp) no-repeat var(--primary);
  padding: 5rem;
  background-size: cover;
  border-radius: 20px;
  height: 400px;
  justify-content: center;
}

.section-9 .sld-2 {
  background: url(../images/brand-2.webp) no-repeat var(--secondary);
}

.section-9 .content h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--white);
}

.section-9 .content p {
  font-size: 1.3rem;
  line-height: 1.3;
  padding: 0 1.7rem;
  color: white;
  font-weight: 400;
}

.section-10 {
  padding-top: 3rem;
}

.section-10 h2 {
  font-size: var(--fs-h2);
  text-align: center;
  font-weight: 700;
  padding-bottom: 1.5rem;
}

.section-10 .logo-slide {
  margin-bottom: 2rem;
}

.section-10 .logo-slide figure {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  padding: 3rem;
  background: white;
  box-shadow: 1px 2px 3.1px -1px #96929200;
  border-radius: 20px;
}

.services-banner {
  background: url(../images/services-banner.webp) no-repeat;
}

.section-11 .content h3 {
  font-weight: 600;
  padding-bottom: 1rem;
}

.section-11 figure {
  margin: 1.2rem;
}

.section-12 h2 {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 700;
}

.section-12 p {
  text-align: center;
  font-weight: 500;
  font-size: 1.9rem;
  padding-bottom: 4rem;
}

.section-12 .headin-para {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3.5rem;
}

.section-12 .headin-para p {
  text-align: center;
  font-weight: unset;
  font-size: 1.2rem;
  padding-bottom: 0;
  line-height: 1.6;
  width: 69%;
}

.section-7 .themeBtn,
.section-13 .themeBtn,
.section-12 .headin-para .themeBtn {
  padding: 1rem 3rem;
  margin-top: 1rem;
  background: var(--secondary);
  display: block;
  width: fit-content;
}

.section-12.webSlider .swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.section-12 .webSlider .swiper-slide {
  width: 450px;
}

.section-12 .webSlider .swiper-slide.active {
  background-position: center;
  background-size: cover;
  width: 500px;
}

.section-12 .webSlider .swiper-slide img {
  display: block;
  object-fit: cover;
}

.section-13 .aniamtion-img {
  position: relative;
  left: -20%;
}

.section-13 .aniamtion-img .animate-1 {
  position: absolute;
  left: 31%;

  z-index: -1;

  opacity: 0;
  transform: translateX(250px) rotate(-10deg) scale(0.8);
}

.section-13.animate .animate-2 {
  animation:
    womanEntry 1s ease forwards,
    floatWoman 4s ease-in-out infinite 1s;
}

.section-13.animate .animate-1 {
  animation:
    shapeEntry 1.5s ease forwards,
    shapeFloat 5s ease-in-out infinite 1.5s;
}

.section-13 .content p {
  width: 77%;
}

.section-13 .aniamtion-img .animate-2 {
  position: relative;
  z-index: 2;
}

@keyframes floatWoman {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-25px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* RIGHT SIDE ENTRY */
@keyframes shapeEntry {
  0% {
    opacity: 0;
    transform: translateX(250px) rotate(-15deg) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg) scale(1);
  }
}

/* CONTINUOUS FLOAT */
@keyframes shapeFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(3deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.bg-sec {
  background: var(--secondary);
}

.bg-sec h2,
.bg-sec p {
  color: white !important;
}

.bg-sec .content {
  padding-left: 4rem;
}

.porfolio-banner {
  background: url(../images/porfolio-banner.webp) no-repeat;
}

.section-14 {
  background: url(../images/move-banner.webp) no-repeat var(--secondary);
  background-size: cover;
  padding: 8rem;
  background-position: center;
}

.section-14 .row {
  align-items: center;
}

.section-14 .content {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.section-14 .content h2 {
  font-size: var(--fs-h2);
  color: var(--white);
  font-weight: 700;
}

.section-14 .content h2 span {
  color: var(--primary);
}

.section-14 .btn-style {
  display: flex;
  justify-content: space-evenly;
}

.section-14 .themeBtn {
  padding: 0.9rem 1.7rem;
}

.section-14 .themeBtn:nth-child(1) {
  background: var(--secondary);
  border: 2px solid #ddd6d685;
}

.section-14 .chat-btn {
  color: white;
  font-size: 1.4rem;
}

.section-14 .call-icon {
  /* background: #012b65; */
  background: linear-gradient(
    90deg,
    rgba(31, 63, 211, 1) 0%,
    rgba(33, 199, 247, 1) 51%
  ) !important;
  animation: call-change 2s infinite;
}

.section-14 .call-text span {
  color: white !important;
}

@keyframes call-change {
  0% {
    box-shadow: 0 0 0 0px rgb(220 220 220 / 54%);
  }

  100% {
    box-shadow: 0 0 0 9px rgb(155 159 164 / 19%);
  }
}

.price-banner {
  background: url(../images/price-banner.webp) no-repeat;
}

.price-banner h1 {
  visibility: visible;
}

.section-15 h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  text-align: center;
}

.section-15 .pkg-content {
  box-shadow: -1px 0px 8px 3px #ede0e0c2;
  margin-bottom: 2.6rem;
}

.contact-banner {
  background: url(../images/contact-banner.webp) no-repeat;
}

.contact-banner h1 {
  color: var(--black);
}

/* * contact-page */
/* The circles straddle the banner's bottom edge — half on the photo, half on the
   page below it. They used to be position:absolute; top:-79%, which pulled them
   almost entirely onto the photo. In flow instead: the section's own top padding
   is dropped so the row starts flush with the banner, then the row is pulled up
   by half a circle (they are 150px tall, so -75px). */
.section-tell {
  padding-top: 0;
}

.contact-sec-1 {
  margin: -75px auto 0;
  position: relative;
  z-index: 2;
}

.address-tab {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}

.address-tab a {
  color: var(--black);
  /* The email is the longest label and its column is narrow on phones — wrap it
     rather than let it run off the side of the page. */
  overflow-wrap: anywhere;
}

/* 24px is a desktop size; the labels sit two-to-a-row on phones, where that
   width spills out of the column. */
@media (max-width: 767.98px) {
  .address-tab,
  .address-tab p {
    font-size: 18px;
  }
}

@media (max-width: 575.98px) {
  .address-tab,
  .address-tab p {
    font-size: 15px;
  }
}

.address-tab p {
  font-size: 24px;
  font-weight: 700;
  padding: 10px 0;
  color: var(--black);
  text-transform: capitalize;
}

.address-tab .tel-icon {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #fff;
}

.address-tab:nth-of-type(1) .tel-icon {
  background: var(--primary);
}

.address-tab:nth-of-type(2) .tel-icon {
  background: #2081e4;
}

.address-tab:nth-of-type(3) .tel-icon {
  background: var(--secondary);
}

.address-tab .loc-tab {
  background: #000;
}

.tel-icon i {
  font-size: 3rem;
  color: #fff;
}

/* contact-form */

.contact-sec {
  padding: 0rem 0 3rem;
  background: url(../images/contact-f-bottom.png) no-repeat #f7f9f8;
  background-position: center;
  margin-bottom: -2rem;
  z-index: 0;
  position: relative;
}

.contact-sec .sec-heading {
  padding: 3rem 0 0;
}

.contact-sec:before {
  position: absolute;
  content: "";
  width: 80%;
  height: 100%;
  z-index: -3;
  background: url(../images/dot-contact.webp) no-repeat;
  left: 9%;
  top: 134px;
}

section.contact-sec h2 {
  font-size: var(--fs-h2);

  text-align: center;
  font-weight: 700;
  padding: 1rem 3.2rem 2.4rem;
}

section.contact-sec h2 span {
  color: var(--primary);
}

form.contact-form .form-control {
  outline: unset;
  box-shadow: unset;
  background-color: #ffffff;
  border: unset;
  border-radius: 10px;
  color: #100f0f !important;
  font-weight: 500;
  border: 1px solid #aba8a866;
  padding: 1.5rem;
}

form.contact-form .form-control::placeholder {
  color: #242424dc;
}

form.contact-form textarea.form-control {
  height: 190px;
}

form.contact-form button {
  border: unset;
  text-align: center;
  /*width: 240px;*/
  margin: auto;
  display: block;
  margin-top: 1.75rem;
  padding: 0.8rem 3.1rem;
}

/* ------------ */
/* Services Sec Css End  */
footer {
  background: url(../images/footer-bg.webp) no-repeat;
  /* background: #583939; */
  padding: 5rem 0 0rem;
  background-size: cover;
}

.footer-row {
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid var(--white);
  padding-bottom: 1.3rem;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.footer-logo:before {
  position: absolute;
  content: "";
  width: 2px;
  height: 72%;
  background: var(--white);
  left: 0;
  /* top: 0; */
  bottom: 0;
}

.footer-logo:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 72%;
  background: var(--white);
  right: 0;
  /* top: 0; */
  bottom: 0;
}

footer .social-icon {
  display: flex;
  padding-top: 1.3rem;
  gap: 1.9rem;
  justify-content: flex-start;
  margin-bottom: 0.7rem;
}

footer .social-icon li a {
  color: var(--white);
  width: 50px;
  height: 50px;
  border: 1px solid var(--white);
  border-radius: 100%;
  display: grid;
  place-items: center;
  transition: 0.2s ease-in;
}

footer .social-icon li a:hover {
  color: #fff;
  background: linear-gradient(
    90deg,
    rgba(31, 59, 209, 1) 0%,
    rgba(33, 199, 247, 1) 49%
  );
  border-color: transparent;
}

footer .contact-details ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

footer .contact-details h4 {
  font-size: var(--fs-h4);
  padding-bottom: 1.4rem;
  color: var(--white);
}

footer .contact-details li {
  font-size: 1.1rem;
  display: flex;
}

footer .contact-details li,
footer .contact-details a,
footer .contact-details i {
  display: flex;
  align-items: center;
  padding-right: 0.7rem;
  color: var(--white);
  line-height: 2;
  line-height: 2;
  gap: 0.7rem;
}

footer .contact-details li a:hover,
footer .contact-details li a:hover i {
  color: var(--primary);
}

footer .contact-frm,
footer .contact-details {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 100%;
}

.footer-logo p {
  font-size: 1.5rem;
  line-height: 1;
  color: white;
  font-weight: 600;
  padding-top: 1.9rem;
}

.footer-menu ul {
  display: flex;
  gap: 5rem;
  font-size: 1.2rem;
  /* Matched to the `.footer-row` border-bottom below it — same 1px solid white —
     and pulled out 15px each side to cancel the extra Bootstrap-4 column this
     nav is nested inside, so both rules start and end on the same x. */
  margin: 2rem -15px 0;
  border-top: 1px solid var(--white);
  padding: 1.3rem 15px 0;
  justify-content: center;
}

/* ==========================================================================
   FOOTER THIRD COLUMN
   Follow-us moved out of the centre logo block into the previously empty third
   column. The site links keep their own full-width row below, styled by the
   .footer-menu rule above — untouched.
   ========================================================================== */
footer .footer-connect {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 100%;
}

/* "Follow us" was styled by `.footer-logo p`; it needs its own rule now that it
   no longer sits inside .footer-logo. */
footer .footer-connect .follow-label {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--white);
  font-weight: 600;
  margin-bottom: 0;
}

footer .footer-connect .social-icon {
  padding-top: 1rem;
  gap: 1.4rem;
}

@media (max-width: 767px) {
  /* Once the columns stack there is no sibling to align against, so drop the
     bottom-alignment that would otherwise push content past the row. */
  footer .footer-connect {
    margin-top: 2rem;
    height: auto;
    justify-content: flex-start;
  }
}

.footer-menu ul li a {
  color: var(--white);
}

.footer-menu ul li a:hover {
  color: var(--primary);
}

footer .contact-frm {
  justify-content: center;
  margin-top: 3rem;
  margin-left: 3rem;
}

.contact-frm input {
  width: 80%;
  position: relative;
  padding: 0.6rem;
  border-radius: 5px;
  border: none;
}

.contact-frm input:focus {
  outline: none;
}

.contact-frm input::placeholder {
  font-weight: 500;
  font-size: 1rem;
  color: var(--black);
}

.contact-frm button {
  position: absolute;
  padding: 10px 3rem;
  border: none;
  right: 104px;
  background: linear-gradient(
    90deg,
    rgba(31, 63, 211, 1) 0%,
    rgba(33, 199, 247, 1) 51%
  );
  border-radius: 5px;
  color: white;
}

.copyright {
  padding: 1.7rem 0 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.copyright p {
  color: var(--white);
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: var(--primary);
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.85rem;
}

/* Process Section Styling */
.process-sec {
  background: var(--white);
  padding: 6rem 0;
}

.process-subtitle {
  font-size: 1.3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 1.5rem;
}

.process-sec h2 {
  font-size: var(--fs-h2);
  line-height: 1.5;
  font-weight: 600;
  color: var(--black);
  max-width: 950px;
  margin: 0 auto 4.5rem;
}

.process-row {
  margin-top: 2rem;
}

.process-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
}

.process-icon {
  color: var(--secondary);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 2rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.process-icon svg {
  width: 100%;
  height: 100%;
}

.process-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1.2rem;
  letter-spacing: 1px;
  font-family: var(--font-heading);
}

.process-desc {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555555;
  font-family: var(--font-body);
}

/* Hover effects */
.process-card:hover {
  transform: translateY(-8px);
}

.process-card:hover .process-icon {
  color: var(--primary);
  transform: scale(1.1) rotate(5deg);
}

/* Button & Link layout */
.process-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.discussBtn {
  background-color: #1e2e3d;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1.3rem 3.2rem;
  border-radius: 0px; /* Rectangular as in screenshot */
  display: inline-block;
  letter-spacing: 1px;
  border: 2px solid #1e2e3d;
  transition: all 0.3s ease;
}

.discussBtn:hover {
  background-color: transparent;
  color: #1e2e3d;
}

.packagesLink {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.packagesLink:hover {
  color: var(--primary);
}

.packagesLink .arrow-symbol {
  transition: transform 0.3s ease;
  display: inline-block;
}

.packagesLink:hover .arrow-symbol {
  transform: translateX(6px);
}

/* AUTH MODAL */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-overlay.show {
  display: flex;
}

.auth-overlay.show .auth-modal {
  animation: authEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes authEntrance {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.auth-modal {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 820px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}

.auth-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.auth-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.auth-panel {
  display: flex;
  min-height: 540px;
}

/* Brand side */
.auth-brand {
  flex: 0 0 380px;
  background: linear-gradient(135deg, #1e08c4 0%, #21c7f7 100%);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.auth-brand::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.auth-brand::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -20%;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.auth-brand-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-brand-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  margin-bottom: 1.8rem;
  color: #fff;
}

.auth-brand h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

.auth-brand p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.auth-brand-quote {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  font-style: italic;
  font-family: var(--font-body);
  line-height: 1.5;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  padding-left: 1rem;
}

/* Forms side */
.auth-forms {
  flex: 1;
  padding: 2.5rem 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.8rem;
  position: relative;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  flex-shrink: 0;
}

.auth-tab {
  flex: 1;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-body);
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

.auth-tab.active {
  color: #1e08c4;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.auth-forms-wrap {
  position: relative;
  min-height: 280px;
}

.auth-form {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(32px);
}

.auth-form.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  position: relative;
}

.auth-form.exit-left {
  opacity: 0;
  transform: translateX(-32px);
}

.auth-form-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1b1d1c;
  margin-bottom: 1.4rem;
  font-family: var(--font-heading);
}

/* Input fields */
.auth-field {
  position: relative;
  margin-bottom: 0.95rem;
}

.auth-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b0b0b0;
  display: flex;
  pointer-events: none;
  transition: color 0.25s;
}

.auth-field:focus-within .auth-field-icon {
  color: #1e08c4;
}

.auth-field input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  border: 1.5px solid #e8e8ec;
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  background: #fafafa;
  color: #1b1d1c;
}

.auth-field input:focus {
  border-color: #1e08c4;
  box-shadow: 0 0 0 3px rgba(30, 8, 196, 0.08);
  background: #fff;
}

.auth-field input::placeholder {
  color: #b0b0b0;
}

.auth-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  color: #b0b0b0;
  cursor: pointer;
  display: flex;
  border-radius: 8px;
  transition:
    color 0.2s,
    background 0.2s;
}

.auth-pw-toggle:hover {
  color: #666;
  background: #f0f0f0;
}

.auth-error {
  color: #e74c3c;
  font-size: 0.8rem;
  margin: 0.4rem 0 0.8rem;
  font-family: var(--font-body);
  min-height: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.auth-submit {
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e08c4 0%, #21c7f7 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition:
    opacity 0.25s,
    transform 0.2s;
  margin-top: 0.4rem;
}

.auth-submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.auth-submit:active {
  transform: translateY(0);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 1.2rem 0 1rem;
  color: #bbb;
  font-size: 0.78rem;
  font-family: var(--font-body);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e8e8ec;
}

.auth-divider span {
  padding: 0 0.8rem;
}

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border: 1.5px solid #e8e8ec;
  border-radius: 12px;
  background: #fff;
  color: #555;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.google-btn:hover {
  border-color: #d0d0d5;
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Responsive */
@media (max-width: 768px) {
  .auth-brand {
    display: none;
  }
  .auth-forms {
    padding: 2rem 1.5rem;
  }
  .auth-modal {
    max-width: 420px;
  }
}

/* Auth buttons in header */
.head-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.head-btn .themeBtn {
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

.user-info .user-name {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .head-btn {
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
  }
  .head-btn .themeBtn {
    font-size: 0.85rem;
    padding: 0.5rem 1.2rem;
  }
  .user-info {
    padding: 0.5rem 1.25rem;
    flex-wrap: wrap;
  }
}

/* Forgot password */
.auth-forgot-desc {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 1.2rem;
  line-height: 1.5;
  font-family: var(--font-body);
}

.auth-forgot-back {
  margin-top: 1.2rem;
  text-align: center;
}

.auth-forgot-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #888;
  font-size: 0.85rem;
  font-family: var(--font-body);
  text-decoration: none;
  transition: color 0.2s;
}

.auth-forgot-back a:hover {
  color: #1e08c4;
}

/* Remember me + forgot row */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #888;
  font-family: var(--font-body);
  cursor: pointer;
}

.auth-remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #1e08c4;
  cursor: pointer;
  margin: 0;
}

.auth-forgot {
  font-size: 0.82rem;
  color: #1e08c4;
  font-family: var(--font-body);
  text-decoration: none;
  font-weight: 500;
}

.auth-forgot:hover {
  text-decoration: underline;
}

/* Toast */
#toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
  max-width: 380px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.2rem;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 0.88rem;
  font-family: var(--font-body);
  color: #1b1d1c;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: auto;
  border-left: 4px solid;
}

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

.toast-icon {
  flex-shrink: 0;
  display: flex;
}

.toast-msg {
  flex: 1;
  line-height: 1.4;
}

.toast-success {
  border-left-color: #22c55e;
}

.toast-success .toast-icon {
  color: #22c55e;
}

.toast-error {
  border-left-color: #ef4444;
}

.toast-error .toast-icon {
  color: #ef4444;
}

.toast-info {
  border-left-color: #21c7f7;
}

.toast-info .toast-icon {
  color: #21c7f7;
}

@media (max-width: 480px) {
  #toast-container {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
  .toast {
    max-width: none;
  }
}

/* Profile dropdown */
.profile-wrap {
  position: relative;
}
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 50px;
  transition: background 0.2s;
  position: relative;
}
.profile-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
}
.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e08c4, #21c7f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-initial {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-body);
  line-height: 1;
}
.profile-chevron {
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.25s ease;
}
.profile-trigger.open .profile-chevron {
  transform: rotate(180deg);
}
.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 0.6rem;
  opacity: 0;
  transform: scale(0.92) translateY(-6px);
  pointer-events: none;
  transition: none;
  z-index: 9999;
}
.profile-dropdown.show {
  animation: ddIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: auto;
}
.profile-dropdown.hide {
  animation: ddOut 0.2s ease forwards;
  pointer-events: none;
}
@keyframes ddIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes ddOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
}
.dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
}
.dropdown-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e08c4, #21c7f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-body);
  flex-shrink: 0;
}
.dropdown-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1b1d1c;
  font-family: var(--font-body);
  line-height: 1.3;
}
.dropdown-email {
  font-size: 0.78rem;
  color: #999;
  font-family: var(--font-body);
  line-height: 1.3;
  word-break: break-all;
}
.dropdown-divider {
  height: 1px;
  background: #f0f0f2;
  margin: 0.3rem 0;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  color: #444;
  font-size: 0.88rem;
  font-family: var(--font-body);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
  opacity: 0;
  transform: translateX(-8px);
}
.profile-dropdown.show .dropdown-item {
  animation: ddItemIn 0.3s ease forwards;
}
.profile-dropdown.show .dropdown-item:nth-child(1) {
  animation-delay: 0.02s;
}
.profile-dropdown.show .dropdown-item:nth-child(2) {
  animation-delay: 0.06s;
}
.profile-dropdown.show .dropdown-item:nth-child(3) {
  animation-delay: 0.1s;
}
@keyframes ddItemIn {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.dropdown-item:hover {
  background: #f5f5f8;
  color: #1e08c4;
}
.dropdown-logout {
  color: #e74c3c;
}
.dropdown-logout:hover {
  background: #fef2f2;
  color: #c0392b;
}

@media (max-width: 1199px) {
  .profile-dropdown {
    right: auto;
    left: 1.25rem;
  }
}
.about-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 28px 24px;
  height: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  margin-bottom: 24px;
}
.about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}
.about-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.about-card p {
  margin: 0;
  color: #555;
  line-height: 1.6;
}

/* Task A8 – Fix pricing package feature-list scroll */
.section-5 .pkg-content,
.section-15 .pkg-content {
  display: flex;
  flex-direction: column;
  max-height: 560px;
}
.pkg-content .pkg-features {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 300px;
  margin-bottom: 15px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pkg-content .pkg-features::-webkit-scrollbar {
  width: 6px;
}
.pkg-content .pkg-features::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}
.pkg-content .btn-order-now,
.pkg-content .themeBtn {
  margin-top: auto;
}

.who-we-are-white .content span.mainHead,
.who-we-are-white .content h2,
.who-we-are-white .content p {
  color: #fff;
}

.eyebrow {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1e08c4;
  margin-bottom: 14px;
  line-height: 1.2;
}
.who-we-are-white .eyebrow {
  color: #21c7f7;
}

/* Pricing: show the FULL package (no inner scroll), equal-height cards */
.section-5 .pkg-content,
.section-15 .pkg-content {
  max-height: none;
  height: 100%;
}
.section-5 .pkg-content .pkg-features,
.section-15 .pkg-content .pkg-features {
  max-height: none;
  height: auto;
  overflow: visible;
}

/* Inner-banner headings: don't break words mid-letter (fixes "Condition/s") */
.inner-banner .mainHead {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Slightly smaller footer logo */
.footer-logo img {
  max-width: 350px;
  height: auto;
}

/* Video Animations portfolio: video thumbnail + play button */
.portfolio-box.is-video {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.portfolio-box.is-video video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  /* Was #0e0b2e — an opaque dark navy that the browser paints until the video
     has decoded its first frame. On clips this size that is most of the load,
     so every tile read as a dark slab. A light neutral matches the skeleton
     placeholders instead of looking like a deliberate dark wash. */
  background: #e6e9f0;
  pointer-events: none;
}
.portfolio-box.is-video .overlay.play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  /* `.section-4 .portfolio-box .overlay` also matches this element and sets
     `visibility: hidden` for the hover-only "+" overlay. This rule set opacity
     but not visibility, so the play button never actually appeared at rest —
     restore it explicitly. */
  visibility: visible;
  /* No standing tint: the artwork should read at full colour. The darkening
     is a hover affordance only (below). */
  background: transparent;
  pointer-events: none;
  transition: background 0.3s ease;
}
.portfolio-box.is-video:hover .overlay.play {
  background: rgba(14, 11, 46, 0.22);
}
.portfolio-box.is-video .overlay.play span {
  /* `.section-4 .portfolio-box .overlay span` scales the hover-only "+" badge
     to zero at rest. This badge is meant to be visible the whole time, so it
     has to opt out of that as well as out of the visibility rule above. */
  transform: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1e08c4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.portfolio-box.is-video:hover .overlay.play span {
  transform: scale(1.12);
}

/* Dedicated banners for Privacy Policy and Terms pages */
.privacy-banner {
  background: url(../images/privacy-policy-banner.webp) no-repeat center;
  background-size: cover;
}
.terms-banner {
  background: url(../images/terms-and-cnditions-banner.webp) no-repeat center;
  background-size: cover;
}

/* Smooth-scroll offset for services-page section anchors (linked from home View More) */
html {
  scroll-behavior: smooth;
}
/* Every service anchor needs the offset, not just the original five — the four
   added for the home-page service tiles were landing flush under the menu. */
#logo-design,
#illustrations,
#video-animation,
#content-writing,
#printing,
#website-design,
#social-media,
#seo,
#app-design {
  scroll-margin-top: 120px;
}

/* Our Services: smooth continuous marquee (slides duplicated in services-loader.js).
   .servicesslider is FORCED to 100% width + overflow:hidden so the wide track is
   clipped and can never cause page-wide horizontal overflow (the earlier white gap). */
.services-sec .servicesslider {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}
.services-sec .servicesslider .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: svcMarquee 40s linear infinite;
  will-change: transform;
}
.services-sec .servicesslider:hover .swiper-wrapper {
  animation-play-state: paused;
}
.services-sec .servicesslider .swiper-slide {
  flex: 0 0 auto;
  width: 320px;
}
@keyframes svcMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (max-width: 767px) {
  .services-sec .servicesslider .swiper-slide {
    width: 250px;
  }
}
/* nav arrow not needed for the auto-marquee */
.services-sec .swiper-button-next {
  display: none;
}

/* App Design section: show the two app screenshots side-by-side (not stacked) */
.section-3 .web-post-duo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.section-3 .web-post-duo img {
  width: 48%;
  max-width: 48%;
  height: auto;
}

/* Custom Logo slide: 2x2 grid of client marks, populated from the Logos
   category in Firestore by portfolio-loader.js.
   Capped width — at full column width each mark rendered ~290px and dwarfed
   the copy beside it. Each cell is a fixed 4:3 plate with object-fit:contain so
   marks of wildly different proportions line up without being cropped, the
   same treatment the portfolio Logos tab uses. */
.section-3 .web-post-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: center;
  justify-items: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.section-3 .web-post-quad img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(20, 10, 80, 0.06);
}

@media (max-width: 575px) {
  .section-3 .web-post-quad {
    max-width: 320px;
    gap: 10px;
  }
  .section-3 .web-post-quad img {
    padding: 8px;
  }
}

/* Even card heights for the WEBSITE tab only (logos & mobile apps stay uncropped) */
.section-4 .cat-website .portfolio-box a {
  display: block;
  width: 100%;
}
.section-4 .cat-website .portfolio-box img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
@media (max-width: 575px) {
  .section-4 .cat-website .portfolio-box img {
    height: 220px;
  }
}

/* Banner images must fill the full width regardless of their pixel size.
   The `background:` shorthand above resets background-size to auto — re-assert cover. */
.services-banner {
  background-size: cover !important;
  background-position: center !important;
}
.price-banner {
  background-size: cover !important;
  background-position: center !important;
}

/* ==========================================================================
   TYPOGRAPHY CONSISTENCY (client request, Aug 2026)
   Two families only — Inter for headlines, Poppins for body — and one size +
   line-height for body copy so no two sections disagree. Declared last so it
   wins over the per-section sizes defined earlier in this file.
   ========================================================================== */

/* Every content paragraph reads at the same size and rhythm. */
.section-1 .content p,
.section-2 .content p,
.section-3 .content p,
.section-4 .content p,
.section-7 .content p,
.section-9 .content p,
.section-11 .content p,
.section-13 .content p,
.section-14 .content p,
.services-content p,
.testimonial-section p,
.section-12 .headin-para p,
.about-intro .content p,
.who-we-are-white .content p,
.about-feature p,
.process-step p,
.legal-content p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-family: var(--font-body);
}

/* Services slider: centre every slide vertically.
   Swiper sizes the track to the TALLEST slide (678px — the illustrations one),
   but each slide only grows to its own content, so the eight shorter slides sat
   flush against the top of that box and read as mis-aligned.
   Column-direction flex on the slide centres its .row without touching the
   row's negative gutter margins (width:100% on the row would overflow), and
   align-items on the row centres the copy against the artwork. */
.section-3 .designSlid .swiper-wrapper {
  align-items: stretch;
}

.section-3 .designSlid .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
}

.section-3 .designSlid .swiper-slide > .row {
  align-items: center;
}

/* Client request: the service descriptions on services.php read at 23px.
   Scoped to that page's body class so the shared .content p size (1rem) still
   governs every other page.
   .headin-para is the intro under the Website Design & Development slider — it
   sits outside .content, so it needed naming explicitly to match the rest. */
.page-services .content p,
.page-services .headin-para p {
  font-size: 23px;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .page-services .content p,
  .page-services .headin-para p {
    font-size: 19px;
  }
}

/* Services slider (.designSlid) — client asked for larger copy so the slide
   doesn't read as mostly white space. Declared after the shared .content p rule
   above so it wins, and only inside .section-3 so other sections are untouched. */
.section-3 .content p {
  font-size: 1.375rem; /* 22px */
  line-height: 1.65;
  max-width: 34em;
}

@media (max-width: 991px) {
  .section-3 .content p {
    font-size: 1.15rem;
  }
}

/* Lead paragraphs (hero + section intros) share one larger size. */
.main-slider p,
.heading-sec p {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-family: var(--font-body);
}

/* Package cards keep their own compact scale, but it is the SAME on every card. */
.section-5 .pkg-content p,
.section-15 .pkg-content p {
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* Headline weight: the client asked for Inter *Bold* on headlines. */
h1,
h2,
h3,
.mainHead,
.heading-sec h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   MISSION / VISION — editorial diptych
   Was two white cards; the client rejected the white boxes (Sept 2026). The
   section is now a full-bleed band in the brand gradient with the two
   statements set as a typographic spread — vertical spine labels borrowed from
   print, a hairline divider, white type. There is no card left to dislike, and
   it answers the earlier "add colour?" note on the same section.
   ========================================================================== */
.mission-vision-sec {
  position: relative;
  overflow: hidden;
  padding: 104px 0 112px;
  /* Lighter, per client. The saturated version could not go lighter and keep
     white copy: its cyan end gave white text 1.99:1, and lightening pushed it
     further under. A pale ground with dark ink is genuinely lighter AND
     legible — 13.9:1 on headings, 7.1:1 on body. The brand ramp survives in
     the gradient itself and in the cyan accents. */
  background: linear-gradient(118deg, #e9e7fb 0%, #e6effd 46%, #e0f5ff 100%);
}

/* Reads as lit rather than flatly printed. */
.mission-vision-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    760px 420px at 88% 110%,
    rgba(33, 199, 247, 0.16),
    transparent 62%
  );
}

.mission-vision-sec .container {
  position: relative;
}

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 58px;
  align-items: start;
}

.mv-col {
  display: block;
}

/* "Our Mission" / "Our Vision": a normal horizontal heading above the
   headline (client request, Sept 2026 — it was a vertical spine label).
   Same size and weight as the site's .eyebrow so it matches the other
   section labels; the short accent rule now runs along the line. */
.mv-spine {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1e08c4;
}

.mv-spine::after {
  content: "";
  flex: 0 0 64px;
  height: 1px;
  background: linear-gradient(90deg, #1e08c4, transparent);
}

.mv-rule {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(30, 8, 196, 0.22) 16%,
    rgba(30, 8, 196, 0.22) 84%,
    transparent
  );
}

/* Sits below the section scale, as the old cards deliberately did. */
.mission-vision-sec h2 {
  margin: 0 0 20px;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: #141a3a;
}

/* The copy column shrinks to the width of its headline, and the paragraphs
   fill exactly that width, so each block of text lines up with the heading
   above it. contain:inline-size stops a paragraph's own (long, unwrapped)
   width from counting when the column works out how wide to be; without it
   the paragraph, not the heading, would decide the width. When the heading
   wraps at narrower widths it already fills the column, so the paragraphs do
   too.

   This replaces max-width: 46ch, which ended the lines well short of the
   heading. A ch value can't fix that at every width: the heading scales with
   the viewport (clamp on vw) while ch follows the paragraph's own 16px. */
.mission-vision-sec .mv-col > div {
  width: fit-content;
  max-width: 100%;
}

.mission-vision-sec p {
  margin: 0 0 16px;
  contain: inline-size;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: #454b66;
}

.mission-vision-sec p:last-child {
  margin-bottom: 0;
}

.mv-foot {
  position: relative;
  margin-top: 70px;
}

.mv-foot span {
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(30, 8, 196, 0.45),
    rgba(30, 8, 196, 0)
  );
}

@media (max-width: 991.98px) {
  .mission-vision-sec {
    padding: 72px 0 78px;
  }
  .mv-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .mv-rule {
    display: none;
  }
  .mv-foot {
    margin-top: 48px;
  }
}

@media (max-width: 575.98px) {
  .mission-vision-sec {
    padding: 56px 0 60px;
  }
  .mv-spine {
    font-size: 16px;
  }
  .mission-vision-sec p {
    font-size: 15px;
  }
}

/* Hero action row: the real phone number is wider than the old "Coming soon"
   placeholder, which pushed the button onto two lines. Keep both on one. */
.main-slider .top-bar .themeBtn,
.main-slider .call-text span {
  white-space: nowrap;
}

.main-slider .call-us-btn {
  padding-left: 1.6rem;
}

/* Tab switching (pricing + portfolio): the panel block smoothly changes
   height while tabs crossfade, so nothing below the tabs jumps. */
.tab-height-anim {
  transition: height 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Once a tab has been clicked, panels revealed by tabs must NOT replay
   their page-load entrance animations (the jhatkaPop burst on portfolio
   figures, AOS fade-ups on pricing cards) — CSS restarts them whenever a
   hidden panel becomes visible, which caused the pop/jerk on tab change.
   The crossfade handles the reveal instead. */
.tabs-interacted .content-img.active .portfolio-box,
.tabs-interacted .ser-pkg.active [data-aos] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Portfolio figures get a fixed ratio so panel heights are stable —
   image loading no longer shifts the layout after the height is
   measured/animates. */
.section-4 .portfolio-box {
  aspect-ratio: 4 / 3;
}

.section-4 .portfolio-box img,
.section-4 .portfolio-box video {
  height: 100%;
  object-fit: cover;
}

/* Mobile app artwork keeps its full aspect ratio instead of filling the shared card crop. */
.section-4 #tab-4 .portfolio-box,
.section-4 [class*="cat-mobile"] .portfolio-box {
  aspect-ratio: auto;
}

.section-4 #tab-4 .portfolio-box img,
.section-4 [class*="cat-mobile"] .portfolio-box img {
  height: auto;
  object-fit: contain;
}

/* Client logos arrive at every aspect ratio going (209x131 wordmarks through
   4167x4167 squares), so the shared 4:3 cover crop slices them apart. Contain
   them on a white plate instead: the card keeps its uniform 4:3 footprint so the
   grid stays aligned, but no logo is ever cropped.
   `#tab-1` covers the static markup that ships in the PHP before
   portfolio-loader.js swaps in the Firestore-driven `cat-logo` panel. */
.section-4 #tab-1 .portfolio-box,
.section-4 [class*="cat-logo"] .portfolio-box {
  box-sizing: border-box;
  background: #fff;
  padding: 18px;
}

.section-4 #tab-1 .portfolio-box a,
.section-4 [class*="cat-logo"] .portfolio-box a {
  display: block;
  width: 100%;
  height: 100%;
}

.section-4 #tab-1 .portfolio-box img,
.section-4 [class*="cat-logo"] .portfolio-box img {
  height: 100%;
  object-fit: contain;
}

@media (max-width: 575px) {
  .section-4 #tab-1 .portfolio-box,
  .section-4 [class*="cat-logo"] .portfolio-box {
    padding: 12px;
  }
}

/* ==========================================================================
   PRICING BANNER (client request)
   Two notes: the left side was washed grey instead of the brand blue, and the
   photo left white gaps where it didn't cover. A theme-blue background colour
   fills any uncovered area, and a left-to-right blue gradient carries the
   heading side so it reads on-brand and the text keeps its contrast.
   NOTE: the photo itself is still the low-res images/price-banner.webp — swap
   that file for a sharper one; nothing here needs to change when you do.
   ========================================================================== */
.price-banner {
  position: relative;
  /* No white can show through: the photo sits on brand blue. */
  background-color: var(--secondary);
  isolation: isolate;
}

.price-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(23, 12, 132, 0.94) 0%,
    rgba(23, 12, 132, 0.82) 34%,
    rgba(23, 12, 132, 0.35) 62%,
    rgba(23, 12, 132, 0) 82%
  );
}

/* Keep the heading above the overlay. */
.price-banner .container {
  position: relative;
  z-index: 1;
}

/* Logo Design grid (services.php): client marks arrive at different aspect
   ratios, so with no shared box the four tiles sat at different heights and the
   rows stopped lining up. Same contain-on-white plate the portfolio Logos tab
   and the home Custom Logo slide use, so all three read as one system. */
.section-11 figure {
  margin: 0 0 1.5rem;
}

.section-11 figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(20, 10, 80, 0.06);
}

@media (max-width: 575px) {
  .section-11 figure img {
    padding: 10px;
  }
}

/* Signup: first + last name share a row so the taller form still fits the
   modal without scrolling. Stacks on narrow screens. */
.auth-field-row {
  display: flex;
  gap: 12px;
}

.auth-field-row .auth-field {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 480px) {
  .auth-field-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ==========================================================================
   PAYMENT SUCCESS PAGE
   The confirmation used to sit as bare white text straight on the banner photo,
   which made it hard to read. It now sits on a card.
   ========================================================================== */
.pay-success-card {
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 22px;
  padding: 3rem 3rem 3.2rem;
  box-shadow: 0 24px 60px rgba(12, 6, 60, 0.28);
  text-align: center;
}

.pay-success-tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #1f3fd3 0%, #21c7f7 100%);
  box-shadow: 0 10px 24px rgba(31, 63, 211, 0.32);
}

.pay-success-card .mainHead {
  color: var(--black);
  font-size: 2.7rem;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.pay-success-lead {
  color: #3d4256;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 auto 1.2rem;
  max-width: 56ch;
}

.pay-success-status {
  color: #6b7086;
  font-size: 0.95rem;
  margin: 0 0 1.8rem;
}

.pay-success-btn {
  display: inline-block;
}

@media (max-width: 575px) {
  .pay-success-card {
    padding: 2.2rem 1.4rem 2.4rem;
    border-radius: 18px;
  }
  .pay-success-card .mainHead {
    font-size: 2rem;
  }
}

/* ==========================================================================
   DYNAMIC REGIONS — skeletons instead of a content swap
   The portfolio grid, the package tables, the services marquee and the home
   logo grid are all rendered from Firestore after the page loads. Each shipped
   with real static markup, so the browser painted one set of items and the
   loader replaced it with a different set a moment later — the page changed
   under the reader on every refresh.
   The static markup is still there and is still the fallback when Firestore is
   unreachable, but it stays hidden until it is actually needed. A skeleton
   holds the space in the meantime, sized to what the real content renders so
   the swap costs no layout shift.
   State lives in `data-dyn` on the region root and is driven by
   js/dynamic-region.js: loading -> ready (real content) | failed (fallback).
   ========================================================================== */

/* While loading, the zone shows only the skeleton. The section heading is real
   content, not a placeholder, so it is exempt and never flashes in.
   Both forms are needed: on the portfolio, packages and services regions the
   zone sits inside the element holding the state, but the home logo grid is a
   single <figure> carrying both, which a descendant combinator alone misses. */
:is([data-dyn="loading"] .dyn-zone, [data-dyn="loading"].dyn-zone)
  > *:not(.dyn-skeleton):not(.heading-sec):not(h2) {
  display: none !important;
}

/* Default is hidden: if `data-dyn` is ever missing, the page shows real markup
   rather than a placeholder that nothing will clear. */
.dyn-skeleton {
  display: none;
}

[data-dyn="loading"] .dyn-skeleton {
  display: block;
}

[data-dyn="ready"] .dyn-skeleton,
[data-dyn="failed"] .dyn-skeleton {
  display: none !important;
}

.rc-sk-block {
  display: block;
  border-radius: 12px;
  background: #e6e9f0;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 220px 100%;
  background-repeat: no-repeat;
  animation: rc-sk-shimmer 1.5s ease-in-out infinite;
}

/* Over the dark band behind the packages, tint up instead of down. */
.rc-sk.is-dark .rc-sk-block {
  background-color: rgba(255, 255, 255, 0.13);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

@keyframes rc-sk-shimmer {
  0% {
    background-position: -220px 0;
  }
  100% {
    background-position: calc(100% + 220px) 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-sk-block {
    animation: none;
  }
}

/* Tab pills — mirrors .ul-tab / .ul-pkg spacing so nothing jumps on swap. */
.rc-sk-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  padding-bottom: 4rem;
}

.rc-sk-pill {
  width: 120px;
  height: 44px;
  border-radius: 22px;
}

/* Portfolio cards and logo tiles share the grid's 4:3 footprint. */
.rc-sk-tile {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 30px;
}

/* Inside a Bootstrap .row the placeholder wrapper has to behave like a row
   itself, or its columns collapse into a single stack. */
.row.dyn-zone > .dyn-skeleton {
  display: none;
  width: 100%;
}

[data-dyn="loading"].row.dyn-zone > .dyn-skeleton,
[data-dyn="loading"] .row.dyn-zone > .dyn-skeleton {
  display: flex;
  flex-wrap: wrap;
}

.rc-sk-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}

.rc-sk-quad .rc-sk-tile {
  margin-bottom: 0;
  border-radius: 14px;
}

/* Package cards */
.rc-sk-card {
  padding: 2.5rem 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 30px;
}

.rc-sk-line {
  height: 14px;
  margin-bottom: 1rem;
}

.rc-sk-line.tall {
  height: 30px;
  margin-bottom: 1.6rem;
}

.rc-sk-line.w-40 {
  width: 40%;
}
.rc-sk-line.w-60 {
  width: 60%;
}
.rc-sk-line.w-70 {
  width: 70%;
}
.rc-sk-line.w-80 {
  width: 80%;
}

.rc-sk-btn {
  width: 160px;
  height: 48px;
  border-radius: 24px;
  margin-top: 1.5rem;
}

/* Services marquee — the real track is a row of round-cornered dark tiles. */
.rc-sk-marquee {
  display: flex;
  gap: 2rem;
  padding: 1rem 0 0 2rem;
  overflow: hidden;
}

.rc-sk-service {
  flex: 0 0 auto;
  width: 230px;
  padding: 2.9rem 2rem;
  border-radius: 17%;
  background: rgba(23, 12, 132, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.rc-sk-service-icon {
  width: 150px;
  height: 150px;
  border-radius: 18px;
}

.rc-sk-service .rc-sk-line {
  margin-bottom: 0;
}

/* Packages fallback — shown only when the admin-panel packages cannot be
   loaded. It replaces the old placeholder cards, which advertised zero-value
   prices for Lorem-Ipsum packages on a live commercial page. */
.pkg-unavailable {
  text-align: center;
  padding: 3rem 1rem 4rem;
  color: var(--white);
}

.pkg-unavailable p {
  color: var(--white);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  margin: 0 0 0.5rem;
}

.pkg-unavailable p:last-child {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.pkg-unavailable a {
  color: var(--white);
  text-decoration: underline;
}