:root {
  --border-color: #ffffff25;
}
  /* GLOBAL STYLE */
body.menu-open{
    overflow: hidden;
}
.scene * {
    overflow: visible !important;
}
.footer * {
    border-color: var(--border-color) !important;
}
a.text-link {
  text-decoration: none !important;
}
p {
	text-wrap: pretty !important;
}

.z-1 {
  z-index: 1 !important;
}

/* === GLOBAL HEADER === */
.desktop-menu .dropdown-container {
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}
.desktop-menu .has-dropdown:hover .dropdown-container {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}
.desktop-menu .nav-link a {
  transition: color 0.3s ease-in-out;
}
.desktop-menu .nav-link:hover a, 
.desktop-menu .nav-link:hover a div p {
    color: #ffffff;
}
.desktop-menu .menu-dropdown:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.1));
}
.desktop-menu .menu-dropdown:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.desktop-menu .menu-dropdown {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 -2px 0 rgba(255, 255, 255, 0), inset 0 0 30px 5px rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}
/* = MOBILE NAVIGATION = */
.mobile-menu{
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out;
    z-index: 999999;
    height: 100vh;
    height: 100dvh;
}
.mobile-navigation {
    height: calc(100vh - 185px);
    height: calc(100dvh - 185px);
}
.mobile-menu.open{
    transform: translateX(0%);
}
.mobile-menu .dropdown-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.mobile-nav-link .dropdown img {
    transition: transform .3s ease;
}
.mobile-nav-link.open .dropdown img {
    transform: rotate(180deg);
}
/* === END GLOBAL HEADER === */

/* === ACCORDION CONTAINER === */
.accordion,
.accordion-item {
  border-color: var(--border-color) !important;
}

.accordion-header {
    cursor: pointer;
    position: relative;
    font-weight: 600;
}

.accordion-item .accordion-header p {
  transition: color 0.3s ease-in-out;
}

.accordion-icon {
    transition: all 0.35s ease-in-out;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background-image: linear-gradient(176deg, #000000 60%, #131313 100%);
}

.accordion-item:hover .accordion-header p,
.accordion-item.active .accordion-header p {
  color: #ffffff;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}
/* === END ACCORDION CONTAINER === */

/* === TEXT GRADIENT === */
.text-gradient-silver {
    background: linear-gradient(to bottom right, #fff 30%, #ffffff80);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Cascadia Services */
.text-gradient-red {
    background: linear-gradient(to bottom right, #FF7777 30%, #9b3a3a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.text-gradient-blue {
    background: linear-gradient(to bottom right, #7A9DFA 30%, #3a4a9b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-mint {
    background: linear-gradient(to bottom right, #7AFAB4 30%, #3a9b6a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-indigo {
    background: linear-gradient(to bottom right, #7B84CA 30%, #3a3a9b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-violet {
    background: linear-gradient(to bottom right, #C17AFB 30%, #6a3a9b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(to bottom right, #A179FB 30%, #4a3a9b);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-gold {
    background: linear-gradient(to bottom right, #F9E07D 30%, #9b8a3a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-orange {
    background: linear-gradient(to bottom right, #FBB17F 30%, #9b5a3a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-green {
    background: linear-gradient(to bottom right, #9ECC78 30%, #4a9b3a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-rose {
    background: linear-gradient(to bottom right, #FB79B1 30%, #9b3a6a);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Zoho Apps */
.text-gradient-bigin {
/*     background: linear-gradient(to bottom right, #F58220 30%, #FFB266); */
    background: linear-gradient(to bottom right, #4CAF50 30%, #8BCF8F);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-bookings {
    background: linear-gradient(to bottom right, #00A79D 30%, #66D1C9);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-crm {
    background: linear-gradient(to bottom right, #0066CC 30%, #66A3FF);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-forms {
    background: linear-gradient(to bottom right, #4CAF50 30%, #8BCF8F);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-routeiq {
    background: linear-gradient(to bottom right, #7B3FA1 30%, #B07FCC);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-salesiq {
    background: linear-gradient(to bottom right, #E53935 30%, #F28C8A);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-sign {
    background: linear-gradient(to bottom right, #3F51B5 30%, #8796E0);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.text-gradient-thrive {
    background: linear-gradient(to bottom right, #FBC02D 30%, #FFD966);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.text-gradient-thrive {}
/* === END TEXT GRADIENT === */


/* === CUSTOM CTA === */
.primary-button {
  position: relative;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease-in-out;
}
.primary-button::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	bottom: 0px;
	right: 9px;
	border-left: 10px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 10px solid transparent;
	border-top: 10px solid #ffffff;
	transform: rotate(90deg);
	transition: border-top 0.3s ease-in-out;
}
.primary-button:hover::after {
    border-top: 10px solid #000000;
}
.primary-button:hover p {
    color: #000000;
}
.primary-button:hover {
    background: #ffffff;
}
/* === END CUSTOM CTA === */

/* === GLASS CARD === */
.glass-card {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -2px 0 rgba(255, 255, 255, 0),
        inset 0 0 50px 5px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
  transition: all 0.35s ease-in-out;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
}
/* === END GLASS CARD === */

/* === CARD WITH SHINE BORDER === */
.card {
  background-color: #0000004D !important;
  position: relative !important;
  transition: all 0.3s ease-in-out !important;
  transition-delay: 0.25s !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: inset 0 0 0 0 rgba(51, 50, 50, 0.5);
  background-color: transparent;
  background-image: linear-gradient(176deg, #0000006B 0%, #0000008F 100%);
}
.card:hover {
  border-color: #ffffff40 !important;
  box-shadow: inset -40px -40px 50px -25px rgba(51, 50, 50, 0.5);
}

.shine-border::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 25%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(143, 143, 143, 0.67) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 3;
    border: 0;
    transition: all 0.5s ease;
}
.shine-border::before {
    top: 0px;
    left: 0;
}
.card.shine-border:hover::before {
    top: 0px;
    width: 100%;
}
.shine-border::after {
    bottom: 0;
    right: 0;
}
.shine-border.top::after {
	display: none;
}
.shine-border.top.center::before {
	top: 0px;
    left: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(225 225, 225, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
.shine-border.bottom::before {
	display: none;
}
/* === END SHINE BORDER === */

/* === ANGULAR GRADIENT === */
.angular-grnt-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
    filter: blur(1px);
    height: auto;
    animation: flicker 6s infinite;
}

.angular-grnt-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent 0%, #000000 60%, #000000 100%);
    pointer-events: none;
}
.angular-grnt-wrapper.vertical {
    width: 200%;
    justify-content: space-betwen;
    gap: 0%;
    position: absolute;
    display: block !important;
}
.vertical .angular-grnt {
    margin-top: 0px !important;
    width: 100%;
    height: 1000px;
    background: 
        linear-gradient(to bottom, #000 0%, #ffffff 100%), /* Changed to vertical */
        conic-gradient(
            from 0deg, /* Adjusted starting angle for vertical effect */
            #ffffff 0%,
            #000000 28%
        );
    background-blend-mode: multiply;
}

.vertical .angular-grnt {
    transform: scaleY(-1) scaleX(-1);
}

.angular-grnt {
  margin-top: -225px;
  width: 50%;
  height: 450px;
  background: 
      linear-gradient(to right, #000 0%, #ddd 100%),
      conic-gradient(
          from 90.01deg,
          #ffffff 0%,
          #000000 40%
      );
  background-blend-mode: multiply;
}

.angular-grnt.right {
  transform: scaleX(-1);
}


@keyframes flicker {
    0%, 100% { opacity: 1; filter: blur(1px) brightness(1); }
    2% { opacity: 0.9; filter: blur(1px) brightness(0.95); }
    4% { opacity: 1; filter: blur(1px) brightness(1); }
    6% { opacity: 0.5; filter: blur(1px) brightness(0.9); }
    8% { opacity: 1; filter: blur(1px) brightness(1); }
    10% { opacity: 0.6; filter: blur(1px) brightness(0.98); }
    12% { opacity: 1; filter: blur(1px) brightness(1); }
    18% { opacity: 0.5; filter: blur(1px) brightness(0.92); }
    20% { opacity: 1; filter: blur(1px) brightness(1); }
    25% { opacity: 0.6; filter: blur(1px) brightness(0.96); }
    30% { opacity: 1; filter: blur(1px) brightness(1); }
}


@media screen and (max-width: 1023px) {
  .vertical .angular-grnt.right {
      margin-right: 1px !important;
  }
  .angular-grnt.right {
      margin-right: 1px !important;
  }
}
/* === END ANGULAR GRADIENT === */

/* === FADE BOTTOM === */
.fade-bottom {
    background: linear-gradient(180deg, #1D1D1D14 65%, #000000 100%) !important;
}
/* === END FADE BOTTOM === */


/* === 3D SCENE ON HERO SECTION === */
.scene {
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
    perspective: 1000px;
    position: relative;
}
.scene:has(.innerpages) {
    height: 200px;
    position: relative;
}


/* Central sphere */
.center-sphere {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    border-radius: 100px !important;
    transform-style: preserve-3d;

    background: radial-gradient(circle at 30% 30%, #424242, #1b1b1b);
    border-radius: 0;
    border: 1px solid #ffffff20;
    box-shadow: 0 0 40px #ffffff20, inset -20px -20px 40px rgba(0, 0, 0, 0.3);

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: centerFloatRotate 10s ease-in-out infinite;
}

.center-sphere img {
    width: 100px;
    height: 100px;
    transform: translateZ(20px);
}

/* Central sphere innerpages */
.center-sphere.innerpages {
	width: 95%;
	top: 50%;
	left: 50%;
}

.center-sphere.innerpages img {
    width: 100% !important;
    height: auto !important;
    transform: translateZ(20px);
    border: 1px solid #ffffff25;
}

/* 3D system */
.system-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

@keyframes centerFloatRotate {
    0% {
        transform:
            translate(-50%, -50%)
            rotateX(8deg)
            rotateY(-10deg)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            rotateX(-8deg)
            rotateY(10deg)
            scale(1.03);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotateX(8deg)
            rotateY(-10deg)
            scale(1);
    }
}


/* Triangle container */
.triangle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

/* Space triangles */
.triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;

    --x: 0px;
    --y: 0px;
    --z: 0px;
    --rx: 0deg;
    --ry: 0deg;

    animation: floatSpace linear infinite;
    background-color: transparent !important;
    overflow: unset;
}

/* Space drift animation (compressed) */
@keyframes floatSpace {
    0% {
        transform:
            translate3d(var(--x), var(--y), var(--z))
            rotateX(var(--rx))
            rotateY(var(--ry));
        opacity: 0.75;
    }

    50% {
        transform:
            translate3d(
                calc(var(--x) + 15px),
                calc(var(--y) - 10px),
                calc(var(--z) + 20px)
            )
            rotateX(calc(var(--rx) + 120deg))
            rotateY(calc(var(--ry) + 120deg));
        opacity: 1;
    }

    100% {
        transform:
            translate3d(var(--x), var(--y), var(--z))
            rotateX(calc(var(--rx) + 240deg))
            rotateY(calc(var(--ry) + 240deg));
        opacity: 0.75;
    }
}

/* Triangle positions (compressed spread) */
.triangle:nth-child(1)  { --x: -160px; --y: -60px;  --z: -120px; --rx: 20deg;  --ry: 40deg;  animation-duration: 18s; }
.triangle:nth-child(2)  { --x: 130px;  --y: -100px; --z: -200px; --rx: 60deg;  --ry: 120deg; animation-duration: 22s; }
.triangle:nth-child(3)  { --x: -100px; --y: 90px;   --z: -60px;  --rx: 90deg;  --ry: 10deg;  animation-duration: 20s; }
.triangle:nth-child(4)  { --x: 170px;  --y: 45px;   --z: -180px; --rx: 30deg;  --ry: 200deg; animation-duration: 26s; }
.triangle:nth-child(5)  { --x: -45px;  --y: -140px; --z: -250px; --rx: 120deg; --ry: 70deg;  animation-duration: 24s; }
.triangle:nth-child(6)  { --x: 75px;   --y: 130px;  --z: -90px;  --rx: 40deg;  --ry: 300deg; animation-duration: 21s; }
.triangle:nth-child(7)  { --x: -180px; --y: 30px;   --z: -220px; --rx: 200deg; --ry: 90deg;  animation-duration: 28s; }
.triangle:nth-child(8)  { --x: 45px;   --y: -180px; --z: -140px; --rx: 10deg;  --ry: 160deg; animation-duration: 23s; }
.triangle:nth-child(9)  { --x: 140px;  --y: 140px;  --z: -300px; --rx: 320deg; --ry: 30deg;  animation-duration: 30s; }
.triangle:nth-child(10) { --x: -120px; --y: 110px;  --z: -100px; --rx: 70deg;  --ry: 250deg; animation-duration: 19s; }

/* Triangle colors */
.triangle:nth-child(1)  { --color: #FA767A; }
.triangle:nth-child(2)  { --color: #7A30FA; }
.triangle:nth-child(3)  { --color: #7AFAB4; }
.triangle:nth-child(4)  { --color: #7B8ACA; }
.triangle:nth-child(5)  { --color: #CA7AFF; }
.triangle:nth-child(6)  { --color: #A47FB8; }
.triangle:nth-child(7)  { --color: #F9E870; }
.triangle:nth-child(8)  { --color: #FFB17F; }
.triangle:nth-child(9)  { --color: #9ECC78; }
.triangle:nth-child(10) { --color: #FB79B1; }

/* Triangle shape */
.triangle-shape {
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-bottom: 35px solid var(--color);
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.4));
    animation: glowPulse 6s ease-in-out infinite;
    transition: filter 0.3s ease-in-out;
    background-color: transparent !important;
    overflow: unset;
}

/* Glow breathing */
@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(255,255,255,0.3));
    }
    50% {
        filter: drop-shadow(0 0 28px rgba(255,255,255,0.8));
    }
}

.triangle:hover .triangle-shape {
    filter: drop-shadow(0 0 25px rgba(255,255,255,0.9));
}

/* Connection lines */
.connection-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    animation: centerFloatRotate 10s ease-in-out infinite;
    top: 50%;
    left: 50%;
}

.line {
    position: absolute;
    width: 150px;
    height: 2px;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, #ffffff50 0%, transparent 100%);
    opacity: 0.3;
    transform-origin: left center;
    z-index: 0;
}

.line:nth-child(1)  { transform: rotate(0deg); }
.line:nth-child(2)  { transform: rotate(36deg); }
.line:nth-child(3)  { transform: rotate(72deg); }
.line:nth-child(4)  { transform: rotate(108deg); }
.line:nth-child(5)  { transform: rotate(144deg); }
.line:nth-child(6)  { transform: rotate(180deg); }
.line:nth-child(7)  { transform: rotate(216deg); }
.line:nth-child(8)  { transform: rotate(252deg); }
.line:nth-child(9)  { transform: rotate(288deg); }
.line:nth-child(10) { transform: rotate(324deg); }

/* Mobile adjustments */
@media screen and (max-width: 767px) {
    .scene {
        height: 200px;
    }

    .center-sphere {
        width: 100px;
        height: 100px;
    }

    .center-sphere img {
        width: 80px;
        height: 80px;
    }

    .triangle-shape {
        border-left: 25px solid transparent;
        border-bottom: 25px solid var(--color);
    }
  
    /* Extra compression for space triangles */
    .triangle:nth-child(1)  { --x: -90px;  --y: -40px; }
    .triangle:nth-child(2)  { --x: 80px;   --y: -70px; }
    .triangle:nth-child(3)  { --x: -60px;  --y: 60px; }
    .triangle:nth-child(4)  { --x: 95px;   --y: 30px; }
    .triangle:nth-child(5)  { --x: -30px;  --y: -90px; }

    .triangle:nth-child(6)  { --x: 45px;   --y: 85px; }
    .triangle:nth-child(7)  { --x: -100px; --y: 20px; }
    .triangle:nth-child(8)  { --x: 30px;   --y: -110px; }
    .triangle:nth-child(9)  { --x: 85px;   --y: 85px; }
    .triangle:nth-child(10) { --x: -70px;  --y: 70px; }

    /* Slightly calmer motion on mobile */
    .triangle {
        animation-duration: calc(var(--duration, 22s) + 6s);
    }
    .center-sphere {
        animation-duration: 14s;
    }
}
/* === END 3D SCENE ON HERO SECTION === */


/* === LOGO CAROUSEL SECTION === */
.logo-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
}

.logo {
    flex: 0 0 auto;
    padding: 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    max-height: 70px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.logo img:hover {
    opacity: 1;
}

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

.logo-carousel:hover .logo-track {
    animation-play-state: paused;
}

.logo-carousel::before,
.logo-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-carousel::before {
    left: 0;
    background: linear-gradient(to right, #000, transparent);
}

.logo-carousel::after {
    right: 0;
    background: linear-gradient(to left, #000, transparent);
}
/* === END LOGO CAROUSEL SECTION === */

/* === TESTIMONIAL SLIDER === */
.testimonial-container {
    background-color: transparent;
    background-image: radial-gradient(at top center, #222222BF 0%, #00000000 35%);
    position: relative;
}
.testimonial-container::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 50%;
    height: 1px;
    width: 25%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(143, 143, 143, 0.67) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 3;
    border: 0;
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(225 225, 225, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
.testimonial-slider{
    overflow:hidden;
    position:relative;
}

.testimonial-track{
    display:flex;
    transition:transform 0.6s ease;
    overflow: unset;
}

.testimonial{
    min-width:100%;
    flex:0 0 100%;
}

.testimonial-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:20px;
}

.testimonial-dots .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#666;
    cursor:pointer;
}

.testimonial-dots .dot.active{
    background:#fff;
}
/* === END TESTIMONIAL SLIDER === */

/* === CONTACT FORM FIELDS === */
.input-wrapper {
  position: relative;
}


.contact-form input,
.contact-form textarea {
	transition: all 0.3s ease-in-out !important;
    transition-delay: 0.25s !important;
    border-color: #ffffff20;
}

.contact-form .input-wrapper:has(input)::before,
.contact-form .input-wrapper:has(textarea)::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 25%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.0) 0%, rgba(143, 143, 143, 0.67) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 3;
    border: 0;
    transition: all 0.5s ease;
    top: 0px;
    left: 0;
}
.contact-form input:hover,
.contact-form textarea:hover {
	border-color: #ffffff40 !important;
}
.contact-form .input-wrapper:has(input):hover::before,
.contact-form .input-wrapper:has(textarea):hover::before {
    width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus {
    box-shadow: inset -20px -20px 50px 0 rgb(51 50 50 / 50%);
	outline: none;
	border-color: #ffffff40 !important;
}

.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form textarea:-webkit-autofill,
.contact-form textarea:-webkit-autofill:focus {
	border-color: #ffffff40 !important;
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow:
		0 0 0 1px #00000000 inset,
		0 0 0 1000px #000000 inset !important;

	background-color: transparent !important;
	background-clip: padding-box !important;

	appearance: none;
	-webkit-appearance: none;

	transition: background-color 9999s ease-in-out 0s;
}
/* === END CONTACT FORM FIELDS === */


/* === CTA SECTION === */
.cta-section {
    border-color: var(--border-color);
}
/* === END CTA SECTION === */

/* === SERVICES CARD === */
.services-card-content {
  overflow: hidden;
  max-height: calc(25px * 4); /* ~4 lines collapsed */

  /* different speeds for open vs close */
  transition: max-height 0.4s ease;
}

.services-card.is-expanded .services-card-content {
  transition: max-height 0.3s ease;
}

.card-toggle {
  cursor: pointer;
  user-select: none;
}
/* === END SERVICES CARD === */


/* === GLOBAL FOOTER === */
.footer,
.footer-top, 
.footer-body,
.social-icon {
  border-color: var(--border-color);
}