/* ---------- Navbar Styling ---------- */
html, body {overflow-x: hidden !important;}
#about, #services, #faq, #contact {scroll-margin-top: 50px;}
.nav-link.active {color: #00aaff !important;}
.navbar-custom {padding: 15px 0;transition: 0.3s ease;}
.navbar-custom.scrolled{padding: 7px 0;}
.scrolled {background: #07192ddb !important;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.scrolled .nav-link, .scrolled .nav-link.active{color: #fff;}
.logo-light {display: inline-block;}
.logo-dark {display: none;}
/* After scroll – show black logo */
.nav-link{color: #ffffff;}
.navbar.scrolled .logo-light {display: none;}
.navbar.scrolled .logo-dark {display: inline-block;width: 25%;}
.navbar-brand {font-size: 28px;font-weight: 700;}
.navbar-brand img{width: 25%;}
/* Hamburger Icon */
.navbar-toggler {border: none;outline: none;}
.navbar-toggler-icon {width: 28px;height: 28px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2' d='M2 4h12M2 8h12M2 12h12'/%3E%3C/svg%3E");}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");}
.navbar.scrolled .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2' d='M2 4h12M2 8h12M2 12h12'/%3E%3C/svg%3E");}
/* Cross icon black after scroll */
.navbar.scrolled .navbar-toggler:not(.collapsed) .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");}
/* ---------- Hero Section ---------- */
.hero-section {position: relative;height: 100vh;overflow: hidden;display: flex;align-items: center;}
.hero-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?auto=formafit=crop&w=1500&q=80') center center;background-size: cover;z-index: -2; animation: zoomEffect 18s ease-in-out infinite alternate;}
@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);z-index: -1;}
.feature-card {background: rgba(255,255,255,0.08);border-radius: 16px;padding: 30px;text-align: center;transition: transform 0.2s ease, background 0.3s ease;backdrop-filter: blur(8px);transform-style: preserve-3d;cursor: pointer;}
.feature-card:hover {background: rgba(255,255,255,0.15);}
.feature-card i {font-size: 40px;margin-bottom: 10px;color: #0d6efd;}
.feature-card img{width: 30%;}
/* Buttons */
.btn-main {background: #0d6efd;padding: 12px 35px;font-size: 18px;border-radius: 8px;}
/* about section  */
.feature-box {background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.08);transition: 0.3s ease-in-out;}
.feature-box:hover {background: rgba(255, 255, 255, 0.1);transform: translateY(-6px);box-shadow: 0 8px 20px rgba(0,0,0,0.3);border-color: rgba(255, 255, 255, 0.2);}
.feature-box:hover .iconWraper i{color: #ffffff;}
.feature-box:hover .iconWraper{background: #0d6efd;}
.feature-box:hover{box-shadow: 0 8px 28px 0 
color-mix(in srgb, #0d6efd 23%, transparent 80%);
transform: translateY(-5px) scale(1.03);}
.iconWraper{display: flex;align-items: center;justify-content: center;width: 56px;height: 56px;border-radius: 50%;background: #153252ba;font-size: 2rem;margin-bottom: 1rem;box-shadow: 0 3px 10px 0 color-mix(in srgb, #153252ba 15%, transparent 90%);transition: background 0.3s, color 0.3s;}
/* services section  */
.service-card {background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.08);position: relative;transition: 0.3s ease-in-out;overflow: hidden;}
/* LEFT BORDER ANIMATION */
.service-card::before {content: "";position: absolute;top: 0;left: 0;width: 4px;height: 0;background: #1da1f2;transition: height 0.35s ease-in-out;}
.service-card:hover::before {height: 100%;}
/* Hover Lift effect */
.service-card:hover {transform: translateY(-6px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);border-color: rgba(255, 255, 255, 0.2);}
/* Learn more link */
.learn-more {display: inline-flex;align-items: center;gap: 6px;font-weight: 500;transition: color 0.3s ease;}
.learn-arrow {font-size: 1rem;transition: transform 0.3s ease;}
/* Arrow moves ONLY when the whole card is hovered */
.service-card:hover .learn-arrow {transform: translateX(6px);}
/* Optional: text color change on hover */
.service-card:hover .learn-more {color: #1da1f2;}
.learn-more:hover {text-decoration: underline;}
/* Learn More link animation */
.learn-more {color: #1da1f2;text-decoration: none;font-weight: 500;margin-top: 10px;display: inline-flex;align-items: center;gap: 6px;transition: 0.3s ease;position: relative;}
.learn-more i {transition: transform 0.3s ease;}
.visnaryImg{box-shadow: 0 8px 28px 0 
 color-mix(in srgb, #0d6efd 23%, transparent 80%);}
 .dwnBrocr:hover{color: #fff;}
/* Arrow animation */
.learn-more:hover i {transform: translateX(5px);}
.serviceSapratorHeading{font-size: 3rem;}
.bg-dark-blue {background-color: #0f2238;}
.consult-box {background-color: #152b44;border: 1px solid rgba(255, 255, 255, 0.15);border-radius: 12px;color: #fff;}
.icon-box {width: 40px;height: 40px;background: rgba(255, 255, 255, 0.08);border-radius: 8px;display: flex;justify-content: center;align-items: center;font-size: 18px;}
.btn-primary {background-color: #2c90ff;border: none;}
.btn-primary:hover {background-color: #1e7ad9;}
.btn-outline-light {border-color: rgba(255, 255, 255, 0.3);color: #fff;}
.btn-outline-light:hover {background-color: rgba(255, 255, 255, 0.15);}
.faq-section {padding: 60px 18rem;background: #152b44;}
.faq-title {font-size: 32px;font-weight: 700;color: #fff;text-align: center;}
.faq-subtitle {text-align: center;margin-bottom: 40px;color: #8ca0bb;}
.accordion-item {background: #132033;border: 1px solid #1f2e43;margin-bottom: 0px;border-radius: 8px;overflow: hidden;}
.accordion-header:hover{background-color: #1c293c;}
.accordion-button {background: transparent;color: #9ecbff;font-weight: 600;padding: 30px 18px;}
.accordion-button:not(.collapsed) {background: #1b2a41;color: #4da3ff;box-shadow: none;}
.accordion-button::after {filter: brightness(0) invert(1);}
.accordion-body {background: #0f192b;color: #d0d8e5;line-height: 1.7;padding: 20px;}
.contact-wrapper {padding: 60px 4.7rem;background: #081120;color: #d8e2f3;}
.contact-wrapper .container .row .col-lg-8{z-index: 1;}
.contact-wrapper .conctFrmIconWrap i{font-size: 1.6rem; color: #279ae4;}
.contact-wrapper .conctFrmIconWrap2 i{font-size: 20px; color: #279ae4;}
.contact-wrapper .conctFrmIconWrap{display: flex;align-items: center;justify-content: center;width: 56px;height: 56px;border-radius: 16%;background: #153252ba;font-size: 2rem;margin-bottom: 1rem;box-shadow: 0 3px 10px 0 color-mix(in srgb, #153252ba 15%, transparent 90%);transition: background 0.3s, color 0.3s;}
.contact-wrapper .conctFrmIconWrap2{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 16%;background: #153252ba;color: var(--accent-color);font-size: 2rem;margin-bottom: 1rem;box-shadow: 0 3px 10px 0 color-mix(in srgb, var(--accent-color) 15%, transparent 90%);transition: background 0.3s, color 0.3s;}
.contact-card:hover .conctFrmIconWrap{background-color: #279ae4;}
.contact-card:hover .conctFrmIconWrap i{color: #ffffff;}
.contact-card .availability {font-size: 13px;display: flex;align-items: center;gap: 6px;}
.contact-card .availability:before {content: "";width: 6px;height: 6px;background: color-mix(in srgb, #10b981, #10b981 50%);border-radius: 50%;display: inline-block;}
.contact-title {font-size: 28px;font-weight: 600;text-align: center;margin-bottom: 10px;}
.contact-subtitle {text-align: center;font-size: 14px;opacity: 0.7;margin-bottom: 40px;}
.contact-card {background: #0d162b;padding: 25px;border-radius: 12px;margin-bottom: 20px;border: 1px solid #1f2942;}
.contact-card h6 {font-weight: 600;}
.contact-icon {width: 28px;height: 28px;margin-bottom: 10px;opacity: 0.85;}
.form-control,
.form-select {background: #0a1528;border: 1px solid #1f2942;color: #fff;}
.form-control:focus,
.form-select:focus {border-color: #3b82f6;box-shadow: none;background: #0a1528;color: #fff;}
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {color: #9ca3af !important;opacity: 1;}
.btn-send {background: #3b82f6;color: #fff;font-weight: 600;padding: 12px;width: 100%;border-radius: 8px;}
.btn-send:hover{border: 1px solid #3b82f6; color: #3b82f6; background: #0d162b;}
.btn-send .learn-arrow {display: inline-block;transition: transform 0.4s ease; }
.btn-send:hover .learn-arrow{transform: translateX(5px);}
.btn-expSer:hover{border: 1px solid #3b82f6; color: #3b82f6; background: transparent;}
.footer{background-color: #081120; color: #ffffff;}
.full-wh {position: absolute;top: 0px;left: 0px;bottom: 0px;width: 100%;}        
.bg-animation {position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.bg-animation {position: relative;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}

/* back to top  */
#backToTop {position: fixed;bottom: 30px;right: 30px;width: 60px;height: 60px;border-radius: 50%;background: #142437;display: flex;justify-content: center;align-items: center;cursor: pointer;box-shadow: 0 4px 12px rgba(0,0,0,0.2);z-index: 9999;opacity: 0;visibility: hidden;transition: 0.3s ease;}
#backToTop.show {opacity: 1;visibility: visible;}
#backToTop i {font-size: 28px;color: #007bff;position: absolute;}
.progress-ring__circle {stroke: #007bff;stroke-dasharray: 163;stroke-dashoffset: 163;transition: stroke-dashoffset 0.2s linear;}

/* ---------- Mobile Fixes ---------- */
@media(max-width: 991px) {
.navbar-brand{width: 70%;}
.navbar-brand img {width: 40%;}
.navbar.scrolled .logo-dark {display: inline-block;width: 40%;}
.navbar-collapse {background: #fff !important;padding: 20px;border-radius: 10px;margin-top: 10px;}
.navbar-nav .nav-link {color: #000 !important;padding: 10px 0;}
.hero-section {height: auto;padding: 160px 0 80px;}
.faq-section {padding: 60px 15px;background: #152b44;}
.feature-card{padding: 15px 0px;}
.feature-card h5{font-size: 14px;}
.contact-wrapper {padding: 60px 15px;background: #081120;color: #d8e2f3;}
}