/* ProVenture Custom Design Elements */
/* Original design components created for ProVenture Digital Agency */

/* ========================================
   0. HEADER WORDMARK
   ======================================== */

.header .logoslogan .pv-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    transform: translateY(1px);
    text-align: center;
    white-space: nowrap;
    min-width: max-content;
}

.header .logoslogan > a:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.header .logoslogan .pv-wordmark-main {
    font-family: "Inter", sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #17b8f4 !important;
    -webkit-text-stroke: 0.7px currentColor;
    text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;
    line-height: 0.92;
}

.header .logoslogan .pv-wordmark-sub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    font-family: "Inter", sans-serif;
    font-size: clamp(0.4rem, 0.52vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1;
}

.header .logoslogan .pv-wordmark-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
}

.bg-white-active .header .logoslogan .pv-wordmark-sub {
    color: rgba(24, 37, 51, 0.74) !important;
}

.shownav .header .logoslogan .pv-wordmark-sub {
    color: rgba(255, 255, 255, 0.82) !important;
}

@media screen and (max-width: 767px) {
    .header .logoslogan > a:first-child {
        max-width: none;
    }

    .header .logoslogan .pv-wordmark {
        gap: 2px;
    }

    .header .logoslogan .pv-wordmark-main {
        font-size: 0.92rem;
        letter-spacing: 0;
    }

    .header .logoslogan .pv-wordmark-sub {
        gap: 0.24rem;
        font-size: 0.34rem;
        letter-spacing: 0.16em;
    }

    .header .logoslogan .pv-wordmark-dot {
        width: 3px;
        height: 3px;
    }
}

html,
body,
body button,
body input,
body textarea,
body select,
body option,
body label,
body a,
body p,
body span,
body li,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body small,
body strong,
body blockquote,
body figcaption {
    font-family: "Inter", sans-serif !important;
}

:root {
    --space-xxs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.5rem;
    --space-xxl: 5rem;
    --heading-lh-tight: 1.12;
    --heading-lh-normal: 1.22;
    --body-lh: 1.65;
    --text-max: 66ch;
}

@media (max-width: 991.98px) {
    :root {
        --space-xl: 2.5rem;
        --space-xxl: 3.5rem;
    }
}

main.main section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

main.main h1,
main.main .h1 {
    font-size: clamp(2rem, 3.8vw, 3.7rem);
    line-height: var(--heading-lh-tight);
    letter-spacing: -0.015em;
}

main.main h2,
main.main .h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.8rem);
    line-height: var(--heading-lh-normal);
    letter-spacing: -0.01em;
}

main.main h3,
main.main .h3 {
    font-size: clamp(1.15rem, 2vw, 1.9rem);
    line-height: var(--heading-lh-normal);
}

main.main p,
main.main li {
    line-height: var(--body-lh);
}

.servicecards .servicecard p,
.servicecards .servicecard .catlist {
    max-width: var(--text-max);
}

.servicecards .servicecard .catlist li {
    line-height: 1.58;
}

.btn,
.btn-outline,
.pv-btn-primary {
    border-radius: 999px !important;
    min-height: 44px;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

.btn-outline {
    border-width: 2px !important;
}

.pagelink.lnk,
.pagelink.btn {
    font-weight: 700;
}

footer .footer-wrapper {
    gap: var(--space-lg);
}

footer .address .footer-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

footer .contactlinks li:first-child a {
    font-size: 1.05rem;
    font-weight: 700;
}

/* Social Icons — Global sizing */
.socialicons {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.socialicons .sociallink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    color: currentColor;
    text-decoration: none;
    transition: all 0.25s ease;
}

.socialicons .sociallink .svg,
.socialicons .sociallink svg {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
}

footer .socialicons .sociallink {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.02);
}

footer .socialicons .sociallink:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}

.mainnav-cta .socialicons .sociallink {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.mainnav-cta .socialicons .sociallink:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

footer .copyright {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

footer .legalinfobar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    align-items: center;
}

footer .legalinfolinks {
    opacity: 0.94;
}

.header-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-logo svg {
    display: none !important;
}

.header-logo .header-logo-img {
    display: block;
    width: 58px;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 991.9px) {
    .header-logo .header-logo-img {
        width: 44px;
    }
}

/* ========================================
   1. CUSTOM ANIMATED GRADIENT BACKGROUND
   ======================================== */

.pv-gradient-bg {
    position: relative;
    background: linear-gradient(135deg, #0099cc 0%, #00ACDF 25%, #182533 75%, #1C1E20 100%);
    background-size: 400% 400%;
    animation: pvGradientShift 15s ease infinite;
}

@keyframes pvGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ========================================
   2. CUSTOM CARD DESIGN WITH GLASSMORPHISM
   ======================================== */

.pv-glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px;
    box-shadow: 0 8px 32px 0 rgba(0, 172, 223, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pv-glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(0, 172, 223, 0.25);
    border-color: rgba(0, 172, 223, 0.4);
}

/* ========================================
   3. CUSTOM ANIMATED UNDERLINE
   ======================================== */

.pv-animated-link {
    position: relative;
    display: inline-block;
    color: #00ACDF;
    text-decoration: none;
    font-weight: 500;
}

.pv-animated-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background: linear-gradient(90deg, #00ACDF, #0099cc);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translateX(-50%);
}

.pv-animated-link:hover::after {
    width: 100%;
}

.pv-animated-link:hover {
    color: #0099cc;
}

/* ========================================
   4. CUSTOM BUTTON STYLES
   ======================================== */

.pv-btn-primary {
    position: relative;
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(135deg, #00ACDF 0%, #0099cc 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 172, 223, 0.3);
}

.pv-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.pv-btn-primary:hover::before {
    left: 100%;
}

.pv-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 172, 223, 0.4);
}

.pv-btn-primary:active {
    transform: translateY(0);
}

/* ========================================
   5. CUSTOM FLOATING ANIMATION
   ======================================== */

.pv-float {
    animation: pvFloat 3s ease-in-out infinite;
}

@keyframes pvFloat {

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

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

.pv-float-slow {
    animation: pvFloatSlow 6s ease-in-out infinite;
}

@keyframes pvFloatSlow {

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

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

/* ========================================
   6. CUSTOM PULSE ANIMATION
   ======================================== */

.pv-pulse {
    animation: pvPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pvPulse {

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

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* ========================================
   7. CUSTOM GRID PATTERN BACKGROUND
   ======================================== */

.pv-grid-bg {
    background-image:
        linear-gradient(rgba(0, 172, 223, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 172, 223, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    position: relative;
}

.pv-grid-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(28, 30, 32, 0.8) 100%);
    pointer-events: none;
}

/* ========================================
   8. CUSTOM SECTION DIVIDER
   ======================================== */

.pv-divider {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ACDF, transparent);
    margin: 60px 0;
}

.pv-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #00ACDF;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 172, 223, 0.5);
}

/* ========================================
   9. CUSTOM STATS COUNTER
   ======================================== */

.pv-stat-box {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, rgba(0, 172, 223, 0.1) 0%, rgba(0, 153, 204, 0.1) 100%);
    border-radius: 15px;
    border: 2px solid rgba(0, 172, 223, 0.2);
    transition: all 0.3s ease;
}

.pv-stat-box:hover {
    border-color: #00ACDF;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 172, 223, 0.2);
}

.pv-stat-number {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, #00ACDF, #0099cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.pv-stat-label {
    font-size: 16px;
    color: #666;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   10. CUSTOM LOADING ANIMATION
   ======================================== */

.pv-loader {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 172, 223, 0.1);
    border-top-color: #00ACDF;
    border-radius: 50%;
    animation: pvSpin 1s linear infinite;
}

@keyframes pvSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   11. CUSTOM TOOLTIP
   ======================================== */

.pv-tooltip {
    position: relative;
    display: inline-block;
}

.pv-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: #1C1E20;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pv-tooltip::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    border: 6px solid transparent;
    border-top-color: #1C1E20;
    opacity: 0;
    transition: all 0.3s ease;
}

.pv-tooltip:hover::after,
.pv-tooltip:hover::before {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* ========================================
   12. CUSTOM SCROLL INDICATOR
   ======================================== */

.pv-scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #00ACDF, #0099cc);
    z-index: 9999;
    transition: width 0.1s ease;
}

/* ========================================
   13. RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 768px) {
    .pv-glass-card {
        padding: 20px;
    }

    .pv-stat-number {
        font-size: 36px;
    }

    .pv-btn-primary {
        padding: 14px 30px;
        font-size: 14px;
    }
}

/* ========================================
   14. CUSTOM FOCUS STATES (Accessibility)
   ======================================== */

.pv-btn-primary:focus,
.pv-animated-link:focus {
    outline: 3px solid rgba(0, 172, 223, 0.5);
    outline-offset: 3px;
}

/* ========================================
   15. PRINT STYLES
   ======================================== */

@media print {

    .pv-gradient-bg,
    .pv-glass-card,
    .pv-float,
    .pv-pulse {
        animation: none !important;
        background: #fff !important;
    }
}

/* ========================================
   16. FOOTER FIXES (Force Standard Layout)
   ======================================== */

/* Fix for footer appearing at top or scrolling issues */
footer.footer {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Ensure main content doesn't have unnecessary margin from JS */
main.main {
    margin-bottom: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    background: #fff;
    /* Ensure content covers anything behind */
}

/* Ensure page wrapper behaves correctly */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.main {
    flex: 1;
}

/* Mobile bottom navigation */
.pv-mobile-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  display: none;
  padding: 6px;
}

.pv-mobile-nav .pv-mobile-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.pv-mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #243242;
  text-decoration: none;
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}

.pv-mobile-nav a svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.pv-mobile-nav a.active,
.pv-mobile-nav a:active,
.pv-mobile-nav a:focus {
  background: #f3f4f6;
  color: #e53935;
  outline: none;
}

@media (max-width: 991.98px) {
  .pv-mobile-nav { display: block; }
  body { padding-bottom: 90px; }
}

@media (min-width: 992px) {
  .pv-mobile-nav { display: none; }
}

/* Projects page hero should not use sticky legacy hero behavior */
.projects-hero {
  padding: clamp(170px, 18vw, 250px) 0 clamp(40px, 5vw, 72px);
}

.projects-hero h1 {
  margin: 0 0 18px;
  color: #fff;
}

.projects-hero .intro {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(18px, 2vw, 30px);
  line-height: 1.35;
}

.projects-hero-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.projects-hero-cta .btn {
  min-width: 220px;
  text-align: center;
}

.projects-hero .projects-btn-primary {
  background: #1fb6ea;
  border: 1px solid #1fb6ea;
  color: #ffffff;
  font-weight: 700;
}

.projects-hero .projects-btn-primary:hover,
.projects-hero .projects-btn-primary:focus {
  background: #149fce;
  border-color: #149fce;
  color: #ffffff;
}

.projects-coming {
  padding: clamp(54px, 6vw, 86px) 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.projects-main {
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: 18px;
  padding: clamp(24px, 3.4vw, 42px);
  box-shadow: 0 14px 30px rgba(11, 25, 45, 0.06);
}

.projects-coming-lead {
  max-width: 65ch;
}

.projects-coming-list {
  margin: 24px 0 0;
  padding-left: 22px;
}

.projects-coming-list li {
  margin-bottom: 10px;
}

.projects-coming-cta {
  margin: 28px 0 0;
}

.projects-panel {
  background: linear-gradient(145deg, #0e2238, #1b3551 56%, #17304a);
  border-radius: 18px;
  padding: clamp(24px, 3.4vw, 36px);
  color: #fff;
  box-shadow: 0 16px 34px rgba(10, 22, 41, 0.25);
}

.projects-panel h3 {
  margin: 0 0 12px;
  color: #fff;
}

.projects-panel p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

.projects-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.projects-panel-list li {
  margin-bottom: 10px;
  padding-left: 14px;
  border-left: 2px solid rgba(31, 182, 234, 0.85);
  color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 991.98px) {
  .projects-hero {
    padding-top: 190px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .projects-main,
  .projects-panel {
    border-radius: 14px;
  }
}