/********** Template CSS **********/
:root {
    --primary: #1a4dab;
    --secondary: #1a4dab;
    --light: #F4F7FE;
    --dark: #14183E;
}
body {
  font-family: "Inter", sans-serif;
}

.text-justify {
  text-align: justify;
}




/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Heading ***/
h1,
h2,
h3,
.fw-bold {
    font-weight: 700 !important;
}

h4,
h5,
h6,
.fw-medium {
    font-weight: 500 !important;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}


/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: .5s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Add shadow when navbar is scrolled and visible */
.sticky-top.bg-primary {
    box-shadow: 0 2px 20px rgba(26, 77, 171, 0.15) !important;
}

.navbar {
    padding: 11px 0 !important;
    height: 75px;
    background: white;
}

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 0;
    color: #333 !important;
    outline: none;
    transition: color 0.3s ease;
}

/* Override Bootstrap's navbar-dark default white text */
.navbar-dark .navbar-nav .nav-link {
    color: #333 !important;
}

/* Black hamburger for .navbar-dark */
.navbar-dark .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary) !important;
}

/* Ensure active and hover states work on navbar-dark too */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary) !important;
}

/* Keep navbar links dark even when scrolled and bg-primary is added */
.sticky-top.bg-primary .navbar-nav .nav-link {
    color: #333 !important;
}

.sticky-top.bg-primary .navbar-nav .nav-link:hover,
.sticky-top.bg-primary .navbar-nav .nav-link.active {
    color: var(--primary) !important;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;

}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        padding: 0 15px;
        background: white;
    }

    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 15px 10px;
        font-size: 1.05rem;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Hero Header ***/
.hero-header {
    margin-top: -75px;
    background-color: white;
    padding-top: 2rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.hero-header .container {
    padding-top: 2rem !important;
}

.hero-header .row {
    padding-top: 1.5rem !important;
}

.hero-header .btn-primary {
    margin-top: 1rem;
}

.hero-header h1 {
    margin-bottom: 1rem;
}

.hero-header p {
    margin-bottom: 0.5rem;
}

.hero-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}

svg {
  position: relative;
  top: 50%;
  left: 0; /* reset centering */
  transform: none; /* remove translate */
  margin-left: 100px; /* now works */
}
.thevoid svg {
    width: 1800px;   /* bigger size */
    height: auto;   /* keep proportions */
    max-width: 100%; /* responsive */
    animation: pulse 6s infinite ease-in-out; /* optional breathing effect */
}

svg g {
  transform-origin: center;
  transform-box: fill-box;
}

#a {
  animation: clockwise 8s linear infinite;

}

#b {
  animation: clockwise 10s linear infinite;
}

#d {
  animation: clockwise 12s linear infinite;
}

#f {
  animation: clockwise 9s linear infinite;
}

#c {
  animation: anticlockwise 9s linear infinite;
}

#e {
  animation: anticlockwise 11s linear infinite;
}


/* for 0 to 360deg rotation */
@keyframes clockwise {
  from {
    transform: rotatez(0deg);

  }

  to {
    transform: rotatez(360deg);
  }
}

/* for 0 to -360deg rotation */
@keyframes anticlockwise {
  from {
    transform: rotatez(0deg);

  }

  to {
    transform: rotatez(-360deg);
  }
}

/* for smart-phone */
@media only screen and (max-width: 600px) {
  svg {
    width: fit-content;
    margin: 10px auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.05);
    }
}


/*** Section Title ***/
.section-title::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 4px;
    bottom: 0;
    left: 0;
    background: var(--dark);
}

.section-title::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    bottom: 0;
    left: 50px;
    background: var(--dark);
}

.section-title.text-center::before {
    left: 50%;
    margin-left: -25px;
}

.section-title.text-center::after {
    left: 50%;
    margin-left: 25px;
}

.section-title h6::before,
.section-title h6::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    top: 2px;
    left: 0;
    background: rgba(33, 66, 177, .5);
}

.section-title h6::after {
    top: 5px;
    left: 3px;
}


/*** Section Divider ***/
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 77, 171, 0.2) 20%, rgba(26, 77, 171, 0.2) 80%, transparent);
    margin: 1rem auto;
    max-width: 80%;
    position: relative;
}

.section-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(26, 77, 171, 0.1);
}

@media (max-width: 767.98px) {
    .section-divider {
        margin: 2rem auto;
        max-width: 70%;
    }

    /* Mobile hero optimizations */
    .hero-header {
        padding-top: 1.5rem !important;
        padding-bottom: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .hero-header .container {
        padding-top: 1.5rem !important;
    }

    .hero-header .row {
        padding-top: 1.5rem !important;
    }

    .hero-header h1 {
        font-size: 2rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem !important;
    }

    .hero-header p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .hero-header .btn-primary {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Center buttons on mobile */
    .hero-header .d-flex {
        justify-content: center !important;
    }

    /* Mobile About section */
    #about {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    #about h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Mobile Solutions section */
    #solutions {
        margin-top: 2rem !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    #solutions .container {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    #solutions h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Center Solutions section button on mobile */
    #solutions .col-lg-5 {
        text-align: center !important;
    }

    #solutions .btn.btn-sm {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Mobile CTA section */
    .cta-luxe-newsletter {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Center CTA content on mobile */
    .cta-luxe-newsletter .col-md-7 {
        text-align: center !important;
    }
}

/*** About ***/
#about {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.about-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-img::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(26, 77, 171, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Improve About section readability */
#about p {
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

#about .btn-sm-square {
    box-shadow: 0 2px 8px rgba(26, 77, 171, 0.2);
}


/*** Service ***/
#solutions {
    margin-top: 2rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

#solutions .container {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.service-item {
    position: relative;
    padding: 45px 30px;
    background: #FFFFFF;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(26, 77, 171, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.service-item:hover {
    background: var(--primary);
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(26, 77, 171, 0.25);
    border-color: var(--primary);
}

.service-item .service-icon {
    margin: 0 auto 20px auto;
    width: 90px;
    height: 90px;
    color: var(--primary);
    background: var(--light);
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(26, 77, 171, 0.1);
}

.service-item:hover .service-icon {
    background: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.service-item h5,
.service-item p {
    transition: .5s;
}

.service-item:hover h5,
.service-item:hover p {
    color: #FFFFFF;
}

.service-item a.btn {
    position: relative;
    display: flex;
    color: var(--primary);
    transition: .5s;
    z-index: 1;
}

.service-item:hover a.btn {
    color: var(--primary);
}

.service-item a.btn::before {
    position: absolute;
    content: "";
    width: 35px;
    height: 35px;
    top: 0;
    left: 0;
    border-radius: 35px;
    background: var(--light);
    transition: .5s;
    z-index: -1;
}

.service-item:hover a.btn::before {
    width: 100%;
    background: var(--light);
}


/*** Feature ***/
.feature {
    background: url(../img/bg-hero.png) center center no-repeat;
    background-size: cover;
}


/*** Newsletter ***/


@media (min-width: 992px) {
    .newsletter .container {
        max-width: 100% !important;
    }

    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .newsletter .newsletter-text  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}


/*** Case Study ***/
.case-item img {
    transition: .5s;
}
  
.case-item:hover img {
    transform: scale(1.2);
}
  
.case-overlay {
    position: absolute;
    padding: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(rgba(20, 24, 62, 0), var(--dark));
    z-index: 1;
}

.case-overlay small {
    display: inline-block;
    padding: 3px 15px;
    color: #FFFFFF;
    background: rgba(20, 24, 62, .7);
    border-radius: 25px;
    margin-bottom: 15px;
}

.case-overlay span.btn:hover {
    color: var(--primary);
    background: #FFFFFF;
    border-color: #FFFFFF;
}


/*** FAQs ***/
.accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
}

.accordion .accordion-button {
    background: var(--light);
    border-radius: 2px;
}

.accordion .accordion-button:not(.collapsed) {
    color: #FFFFFF;
    background: var(--primary);
    box-shadow: none;
}

.accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion .accordion-body {
    padding: 15px 0 0 0;
}


/*** Testimonial ***/
.testimonial-carousel {
    position: relative;
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 40px;
    height: 100%;
    top: calc(50% - 50px);
    left: -21px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin: 5px 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #FFFFFF;
    border: 1px solid var(--primary);
    border-radius: 40px;
    font-size: 18px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    color: #FFFFFF;
}

.testimonial-carousel .owl-dots {
    margin-top: 35px;
    margin-left: 3rem;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 15px;
    height: 15px;
    background: #FFFFFF;
    border: 1px solid var(--primary);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 30px;
    background: var(--primary);
}




/*** Footer ***/
.footer {
    background-size: contain;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(256, 256, 256, .1);
    border-radius: 40px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    color: rgba(255,255,255,.5);
    font-weight: normal;
    transition: .3s;
}

.footer .btn.btn-link:hover {
    color: #FFFFFF;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 14px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: rgba(255,255,255,.5);
}

.footer .copyright a:hover {
    color: #FFFFFF;
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.timeline {
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
  width: 80%;
  border-left: 3px solid #0d6efd; 
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 30px;
}

.timeline-dot {
  position: absolute;
  top: 0;
  left: -9px;
  width: 18px;
  height: 18px;
  background: #0d6efd;
  border-radius: 50%;
  box-shadow: 0 0 10px #0d6efd;
}

.timeline-content {
  background: #fff;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}






/* Premium CTA background */
.cta-luxe-newsletter {
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(26,77,171,.12), transparent 70%),
    radial-gradient(1000px 600px at 85% 120%, rgba(26,77,171,.08), transparent 70%),
    linear-gradient(180deg, #F8FAFF 0%, #F4F7FE 100%);
  position: relative;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Enhanced mobile CTA experience */
@media (max-width: 991.98px) {
  .cta-luxe-newsletter {
    background:
      radial-gradient(800px 500px at 50% 0%, rgba(26,77,171,.15), transparent 60%),
      radial-gradient(600px 400px at 50% 100%, rgba(26,77,171,.10), transparent 60%),
      linear-gradient(135deg, #F8FAFF 0%, #F4F7FE 50%, #F8FAFF 100%);
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .cta-luxe-newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(45deg, rgba(26,77,171,.03) 0px, rgba(26,77,171,.03) 2px, transparent 2px, transparent 10px),
      repeating-linear-gradient(-45deg, rgba(26,77,171,.03) 0px, rgba(26,77,171,.03) 2px, transparent 2px, transparent 10px);
    pointer-events: none;
    opacity: 0.5;
  }
}

/* subtle background pattern */
.cta-luxe-bg::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(20,24,62,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,24,62,.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(70% 70% at 30% 20%, #000 60%, transparent 100%);
  pointer-events: none;
}

/* Tilt image card */
.tilt-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(20,24,62,.15);
  transform: perspective(1000px) rotateY(0deg);
  transition: transform .4s ease;
}
.tilt-card:hover { transform: perspective(1000px) rotateY(6deg); }

/* Shine effect */
.shine {
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
}
.tilt-card:hover .shine {
  animation: shine-move 1.2s forwards;
}
@keyframes shine-move {
  100% { left: 125%; }
}

/* Badge */
.badge-soft-primary {
  display:inline-block;
  padding:.45rem .9rem;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(26,77,171,.08);
  border: 1px solid rgba(26,77,171,.18);
  font-weight:600; font-size:.85rem;
  backdrop-filter: blur(2px);
}

/* Button premium feel */
.btn-xl { padding: 0.95rem 1.4rem; font-weight: 600; }
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26,77,171,.25); }


/* Footer Luxe */
.footer-luxe {
  background: #0f111a;
}

.footer-luxe h5 {
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.3px;
}

.footer-luxe .col-lg-4,
.footer-luxe .col-lg-2,
.footer-luxe .col-lg-3 {
  margin-bottom: 2rem;
}

/* Footer logo with background */
.footer-luxe img {
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1rem;
}

.footer-luxe img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26, 77, 171, 0.4);
}

.footer-link {
  color: rgba(255,255,255,.6);
  display: block;
  margin-bottom: .5rem;
  transition: color .2s ease;
  text-decoration: none;
}
.footer-link:hover {
  color: #fff;
}

.btn-social {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.6);
  transition: all .3s ease;
}
.btn-social:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}


/* ===== Luxe Contact Section ===== */
.py-7 { padding-top: 6rem; padding-bottom: 6rem; }
.btn-xl { padding: .95rem 1.4rem; font-weight: 600; }
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,24,62,.12); }

.badge-soft-primary{
  display:inline-block; padding:.45rem .9rem; border-radius:999px;
  color: var(--primary); background: rgba(26,77,171,.08); border:1px solid rgba(26,77,171,.18);
  font-weight:600; font-size:.85rem; backdrop-filter: blur(2px);
}

.contact-luxe-section{
  position: relative;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(26,77,171,.12), transparent 60%),
    radial-gradient(1000px 600px at 100% 120%, rgba(26,77,171,.08), transparent 60%),
    linear-gradient(180deg,#F8FAFF 0%,#F4F7FE 100%);
}

/* Subtle grid mask */
.contact-luxe-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(20,24,62,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,24,62,.04) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image: radial-gradient(70% 70% at 30% 20%, #000 60%, transparent 100%);
}

/* Glass form card */
.glassy{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(20,24,62,.08);
  border-radius: 20px;
}
.shadow-soft-2 { box-shadow: 0 22px 60px rgba(20,24,62,.12); }

/* Inputs with icons */
.with-icon,
.with-icon-textarea { position: relative; }
.icon-input{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; opacity: .6; font-size: 1rem;
}
.with-icon-textarea .icon-input{ top: 20px; transform: none; }

.control-clean.form-control{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(20,24,62,.12);
  border-radius: 14px;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.control-clean.form-control:focus{
  background: #fff;
  border-color: rgba(26,77,171,.45);
  box-shadow: 0 0 0 .2rem rgba(26,77,171,.15);
}

/* Tilt card + shine */
.tilt-card{
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(20,24,62,.15);
  transform: perspective(1000px) rotateY(0deg);
  transition: transform .45s ease;
  height: 100%;
}
.tilt-card:hover{ transform: perspective(1000px) rotateY(6deg); }
.shine{
  position: absolute; top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
}
.tilt-card:hover .shine{ animation: shine-move 1.2s forwards; }
@keyframes shine-move { 100% { left: 125%; } }

/* Chips */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  background: rgba(26,77,171,.08); color:#1f2937; border:1px solid rgba(26,77,171,.15);
}

/* Live indicator */
.spark-dot{
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #7cf 0%, #1a4dab 40%, #0a3c8e 100%);
  box-shadow: 0 0 0 0 rgba(26,77,171,.45);
  animation: ping 2s infinite;
}
@keyframes ping{
  0% { box-shadow: 0 0 0 0 rgba(26,77,171,.45); }
  70%{ box-shadow: 0 0 0 12px rgba(26,77,171,0); }
  100%{ box-shadow: 0 0 0 0 rgba(26,77,171,0); }
}

/* Footer helpers (if not already defined) */
.footer-luxe { background:#0f111a; }
.footer-link { color: rgba(255,255,255,.6); text-decoration:none; }
.footer-link:hover { color:#fff; }


:root{
      --co-ink:#14183e;
      --co-primary:#1a4dab;
      --radius-lg:22px;
      --radius-md:18px;
    }

    html{scroll-behavior:auto}
    body{background:#ffffff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}

    /* ===== Responsive shell ===== */
    .contact-viewport{
      min-height:calc(100vh - 140px);
      display:flex;align-items:center;padding:32px 0;
    }

    /* Card (glass) */
    .card-glass{
      background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.86));
      backdrop-filter:saturate(140%) blur(10px);
      border:1px solid rgba(20,24,62,.10);
      border-radius:var(--radius-lg);
      box-shadow:0 24px 60px rgba(20,24,62,.10), 0 2px 0 rgba(20,24,62,.03) inset;
    }
    .card-glass.edge{position:relative}
    .card-glass.edge::before{
      content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;
      background:linear-gradient(135deg,rgba(26,77,171,.35),rgba(255,255,255,.0));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite: exclude; pointer-events:none;
    }

    /* Typography scales with screen size */
    .form-title{
      color:var(--co-ink);
      letter-spacing:.2px;margin-bottom:.25rem;font-weight:700;
      font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
      line-height:1.15;
    }
    .form-sub{color:#606778;font-size:clamp(.95rem,.9rem + .3vw,1.05rem)}
    .mini{font-size:.875rem;color:#6b7280}

    /* Inputs */
    .control-clean.form-control,.control-clean.form-select{
      background:#fff;border:1px solid rgba(20,24,62,.14);
      border-radius:14px;padding-top:.85rem;padding-bottom:.85rem;color:#1b1f33
    }
    .form-floating>label{color:#7a86a2}
    .control-clean:focus{
      background:#fff;border-color:rgba(26,77,171,.55);
      box-shadow:0 0 0 .2rem rgba(26,77,171,.16)
    }

    /* Visual side */
    .visual-panel{
      position:relative;overflow:hidden;border-radius:var(--radius-md);min-height:100%;
      background:#f5f7fc;border:1px solid rgba(20,24,62,.06)
    }
    .visual-panel img{width:100%;height:100%;object-fit:cover;transform:scale(1.015)}
    .visual-gradient{
      position:absolute;inset:0;
      background:linear-gradient(90deg,rgba(255,255,255,.95) 0%, rgba(255,255,255,.0) 35%);
    }

    .icon-bullet{
      width:36px;height:36px;border-radius:50%;
      display:inline-flex;align-items:center;justify-content:center;
      background:rgba(26,77,171,.10);color:#1a4dab;flex:0 0 36px
    }

    .btn-primary{background:linear-gradient(135deg,#1a4dab,#2b66df);border:none}
    .btn-primary:focus{box-shadow:0 0 0 .2rem rgba(26,77,171,.25)}
    .lift{transition:transform .25s ease, box-shadow .25s ease}
    .lift:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(26,77,171,.18)}

    /* ===== Extra responsiveness ===== */
    /* Large desktop: gently widen and soften */
    @media (min-width: 1400px){
      .contact-viewport .container{max-width:1140px}
      .card-glass{border-radius:26px}
    }

    /* Tablet & down: stack nicely, tighten paddings, make buttons full width */
    @media (max-width: 991.98px){
      .contact-viewport{min-height:unset;padding:20px 0}
      .card-glass{border-radius:18px}
      .visual-panel{margin-top:16px}
      .form-floating>.form-control{padding-top:.85rem;padding-bottom:.85rem}
      .navbar-brand img{width:108px;height:auto}
      #submitBtn{width:100%}
      .d-lg-flex.justify-content-between.align-items-center{flex-direction:column;align-items:stretch}
    }

    /* Small phones: reduce gaps, shrink radii, prevent overflow */
    @media (max-width: 575.98px){
      .contact-viewport{padding:16px 0}
      .card-glass{border-radius:14px}
      .icon-bullet{width:32px;height:32px}
      .mini{font-size:.82rem}
      .row.g-4{--bs-gutter-y:1rem;--bs-gutter-x:1rem}
      .row.g-0>[class^="col-"]{min-width:0}
      .form-sub{margin-bottom:1rem}
    }

    /* Super narrow (<=360px): micro adjustments */
    @media (max-width: 360px){
      .navbar-brand img{width:96px}
      .form-title{font-size:1.35rem}
      .form-floating>label{font-size:.875rem}
    }

    /* Footer polish on mobile */
    .footer-luxe .footer-link{color:#fff;text-decoration:none}
    .footer-luxe .footer-link:hover{text-decoration:underline}
    @media (max-width: 767.98px){
      .footer-luxe .btn-social{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0}
      .footer-luxe h5{font-size:1.05rem}
    }

    /* Ensure images never overflow */
    img{max-width:100%;height:auto}

/* ===== Scroll Animations ===== */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger effect for service cards */
.service-item.fade-in-up {
    transition-delay: calc(var(--card-index, 0) * 0.1s);
}