/* =========================================
   Global Variables & Base Resets
========================================= */
:root{
  --hmw-primary:#0c2bdc;
  --hmw-dark:#0a1a6a;
  --hmw-accent:#1b47ff;
  --hmw-text:#12213a;
  --hmw-bg:#f6f8ff;
}

html { scroll-behavior:smooth; }
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  color:var(--hmw-text);
  background:var(--hmw-bg);
  overflow-x:hidden;
}

/* =========================================
   Navbar (Optimized - Duplicate Removed)
========================================= */
.navbar{
  padding:16px 0;
  background:rgba(255,255,255,0.35);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:all .35s ease, transform .25s ease;
}
.navbar.scrolled{
  padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.75);
}
.navbar.nav-hide{ transform:translateY(-120%); }
.navbar-brand img{ height:42px; }

/* Navbar Links */
.navbar .nav-link{
  padding:10px 16px;
  font-weight:500;
  color:#0b1b4d;
  position:relative;
  transition:.25s ease;
}

/* Hover underline */
.navbar .nav-link:after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%; height:2px;
  background:var(--hmw-primary);
  transition:width .25s ease;
}
.navbar .nav-link:hover:after{ width:100%; }

/* Active link (scroll spy) */
.navbar .nav-link.active{
  color:var(--hmw-primary)!important;
}
.navbar .nav-link.active:after{
  width:100%;
}

/* =========================================
   Buttons + Ripple + Glow
========================================= */
.btn{ transition: transform .12s ease, box-shadow .2s ease; }
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-gradient{
  background-image:linear-gradient(135deg, var(--hmw-primary), var(--hmw-accent));
  color:#fff!important; border:0;
  box-shadow:0 10px 24px rgba(12,43,220,.3);
}
.btn-gradient:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}
.btn-outline-primary{
  border-width:2px; font-weight:500;
}

/* Button ripple effect */
.btn-ripple{ position:relative; overflow:hidden; }
.btn-ripple .ripple{
  position:absolute; border-radius:50%;
  transform:scale(0);
  animation:ripple .6s linear;
  background:rgba(255,255,255,.45);
}
@keyframes ripple{ to{ transform:scale(4); opacity:0; } }

/* Glow Pulse Animations (Buttons + WhatsApp) */
.btn-gradient, .fab-whatsapp{
  animation:glowPulse 3.2s infinite ease-in-out;
}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 0 rgba(12,43,220,.0);}
  50%{box-shadow:0 0 18px rgba(12,43,220,.35);}
}

/* =========================================
   Sections & Headings
========================================= */
.section{ padding:60px 0; }
.section-title{
  font-weight:800; letter-spacing:-.02em;
  position:relative; display:inline-block;
  padding-bottom:6px;
}
.section-subtitle{ color:#4f5b7a; }
.hr-gradient{
  height:4px; border:0;
  background:linear-gradient(90deg, var(--hmw-primary), var(--hmw-accent));
  border-radius:6px;
}

/* Animated underline for section titles */
.section-title:after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0%; height:3px;
  background:linear-gradient(90deg, var(--hmw-primary), var(--hmw-accent));
  border-radius:3px;
  transition:width .45s ease;
}
.section-title[data-aos].aos-animate:after{ width:100%; }

/* =========================================
   Hero Section
========================================= */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 20% -10%, #1b47ff22, transparent 60%),
    linear-gradient(180deg, #fff 0%, #f5f7ff 100%);
  overflow:hidden;
}
.hero .badge{ background:#0c2bdc10; color:var(--hmw-primary); }
.hero h1{ font-weight:900; letter-spacing:-.02em; }
.hero p.lead{ color:#3b4a6b; }

/* Hero Art Panel */
.hero-art {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 30%, #ffffff, #e8ecff);
  box-shadow: 0 25px 60px rgba(20, 40, 140, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotating soft glow */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 180deg, #dbe4ff, #f0f4ff, #cdd8ff);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  animation: rotateGlow 25s linear infinite;
}
@keyframes rotateGlow {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Center logo group */
.hero-logo {
  position: relative;
  z-index: 3;
  text-align: center;
}
.hero-logo-img {
  width: 90px;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

/* Orbiting tech icons wrapper */
.tech-icons {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(240px, 50%, 380px);
  height: clamp(240px, 50%, 380px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.6s ease;
}

/* 🌊 Parallax hover effect */
.hero-art:hover .tech-icons {
  transform: translate(-50%, -50%) scale(1.05) rotate(5deg);
}

/* Common icon setup */
.tech-icons i {
  position: absolute;
  font-size: clamp(1.4rem, 1.5vw, 2rem);
  opacity: 0.9;
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: orbit 22s linear infinite;
}

/* Each icon placed in a circular orbit */
.html-icon {
  top: 0%; left: 50%;
  transform-origin: 0 150px;
  color: #e34c26;
  animation-delay: 0s;
}
.css-icon {
  top: 20%; right: 0%;
  transform-origin: -150px 0;
  color: #264de4;
  animation-delay: 3s;
}
.js-icon {
  bottom: 10%; right: 15%;
  transform-origin: -130px 0;
  color: #f0db4f;
  animation-delay: 6s;
}
.php-icon {
  bottom: 0%; left: 50%;
  transform-origin: 0 -150px;
  color: #787cb5;
  animation-delay: 9s;
}
.bootstrap-icon {
  bottom: 15%; left: 10%;
  transform-origin: 140px 0;
  color: #7952b3;
  animation-delay: 12s;
}
.react-icon {
  top: 15%; left: 10%;
  transform-origin: 100px 100px;
  color: #61dafb;
  animation-delay: 15s;
}
.wordpress-icon {
  top: 5%; right: 15%;
  transform-origin: -120px 100px;
  color: #21759b;
  animation-delay: 18s;
}

/* Orbit rotation */
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hover Glow (parallax depth effect) */
.hero-art:hover .tech-icons i {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  transform: scale(1.2);
}

/* Optional subtle pulse for icons */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ================================
   RESPONSIVE OPTIMIZATION
================================= */

/* Tablets */
@media (max-width: 992px) {
  .tech-icons {
    width: 260px;
    height: 260px;
  }
  .tech-icons i {
    font-size: 1.4rem;
  }
}

/* Mobiles – keep visible, smaller radius */
@media (max-width: 768px) {
  .tech-icons {
    width: 220px;
    height: 220px;
  }
  .tech-icons i {
    font-size: 1.2rem;
    opacity: 0.8;
  }
}

/* Very small screens – stack compact */
@media (max-width: 480px) {
  .tech-icons {
    width: 180px;
    height: 180px;
  }
  .tech-icons i {
    font-size: 1rem;
  }
}

.hero-art:hover .hero-logo-img {
  transform: scale(1.08) rotate(-3deg);
  transition: all 0.5s ease;
}


/* =========================================
   Cards & Icon Blocks
========================================= */
.card-soft{
  border:0; border-radius:22px; background:#fff;
  box-shadow:0 12px 30px rgba(12,43,220,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-soft:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(12,43,220,.12);
}
.icon-lg{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, #eef1ff, #ffffff);
  color:var(--hmw-primary);
  box-shadow:inset 0 0 0 1px #e5eaff, 0 8px 16px rgba(10,26,106,.08);
  font-size:28px;
}

/* Tilt Hover */
.tilt{
  transform-style:preserve-3d;
  transition:transform .2s ease;
}
.tilt:hover{ transform:rotateX(6deg) rotateY(6deg) translateY(-6px); }

/* Industry badges */
.badge-industry{
  background:#0c2bdc12;
  color:var(--hmw-dark);
  border:1px solid #e3e8ff;
}

/* Testimonials */
.testimonial{
  background:#fff;
  border-radius:22px;
  padding:24px;
  box-shadow:0 12px 30px rgba(12,43,220,.06);
}
.testimonial .quote{
  font-size:15px; color:#4f5b7a;
}

/* CTA Box */
.cta{
  background:
    radial-gradient(500px 200px at 80% 0%, #1b47ff1a, transparent 70%),
    linear-gradient(180deg, #ffffff, #f0f3ff);
  border-radius:26px;
  box-shadow:0 24px 60px rgba(12,43,220,.12);
}

/* =========================================
   Portfolio Cards
========================================= */
.portfolio .card img{
  border-top-left-radius:22px;
  border-top-right-radius:22px;
}
.portfolio .card .badge{
  position:absolute;
  top:14px; left:14px;
}

/* Scroll-down arrow bounce */
.scroll-down{
  position:absolute;
  left:50%; bottom:20px;
  transform:translateX(-50%);
  font-size:14px; color:#495a7b;
}
.scroll-down .arrow{
  display:block;
  animation:bounce 1.8s infinite;
}
@keyframes bounce{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(6px) }
}

/* Section Wave Divider */
.section-wave{
  display:block;width:100%;height:70px;margin-top:-1px;
  background:url('../img/wave.svg') no-repeat top center/cover;
  opacity:.9;
}

/* =========================================
   Contact / Map
========================================= */
#contact iframe{
  min-height:360px;
  width:100%;
  border:0;
}

/* =========================================
   Footer
========================================= */
footer{
  background:#0a1440;
  color:#e9edff;
}
footer a{
  color:#fff; opacity:.9;
}
footer a:hover{ opacity:1 }

/* Footer Social Icons */
.footer-social a{
  font-size:20px;
  color:#fff;
  opacity:.75;
  margin-left:10px;
  transition:opacity .2s ease, transform .2s ease;
}
.footer-social a:hover{
  opacity:1;
  transform:translateY(-3px);
}

/* =========================================
   Back To Top Button
========================================= */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:90px;
  width:46px;height:46px;
  border-radius:50%;
  border:0;cursor:pointer;
  background:var(--hmw-primary);
  color:#fff;font-size:20px;
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transform:translateY(20px);
  transition:all .35s ease;
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  z-index:1100;
}
.back-to-top.show{
  opacity:1; visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{transform:translateY(-4px);}

/* Scroll Progress Bar */
#scrollProgress{
  position:fixed;left:0;top:0;height:4px;
  width:0%;background:linear-gradient(90deg,#0c2bdc,#1b47ff);
  z-index:1200;transition:width .12s linear;
}

/* =========================================
   WhatsApp FAB (Desktop Only)
========================================= */
.fab-whatsapp{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px; height:56px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#25d366; color:#fff;
  z-index:1050;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
  transition:transform .15s ease;
}
.fab-whatsapp:hover{ transform:translateY(-3px); }

/* Tooltip bubble */
.fab-whatsapp .fab-tooltip{
  position:absolute;
  right:64px;
  bottom:8px;
  background:#0a1440;
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  opacity:0;
  transform:translateX(6px);
  pointer-events:none;
  transition:all .2s ease;
}
.fab-whatsapp:hover .fab-tooltip{
  opacity:1;
  transform:none;
}

/* Hide FAB on mobile */
@media (max-width: 768px){
  .fab-whatsapp{ display:none!important; }
}
/* =========================================
   Mobile Sticky CTA (Fixed Overflow Version)
========================================= */
.mobile-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw; /* ✅ prevents overshoot */
  overflow-x: hidden; /* ✅ safety guard */
  z-index: 1040;
  background:#ffffffee;
  backdrop-filter: blur(6px);
  box-shadow:0 -8px 24px rgba(0,0,0,.08);
}

/* Fix Bootstrap container padding overflow */
.mobile-cta .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important; /* ✅ overrides Bootstrap width */
}

/* Buttons inside CTA */
.mobile-cta .btn{
  border-radius:14px;
  width:100%;  /* ✅ ensures button never exceeds container width */
  white-space: nowrap; /* ✅ prevents wrapping that causes overflow */
}


/* =========================================
   Lazy Blur Loading
========================================= */
.blur-load{
  filter:blur(16px); opacity:.6;
  transition:all .45s ease;
}
.blur-loaded{
  filter:blur(0)!important;
  opacity:1!important;
}

/* =========================================
   Micro Interactions / Utilities
========================================= */
.magnetic{ transition: transform .1s ease; will-change: transform; }
.parallax{ transform: translateY(0); will-change: transform; }
[data-aos]{ will-change: transform, opacity; }

.badge.hot{
  background:#ffe9ec;
  color:#d90429;
  border:1px solid #ffd0d7;
}

/* =========================================
   Cookie Bar
========================================= */
.cookie-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  background:#0a1440;
  color:#e9edff;
  z-index:1300;
  box-shadow:0 -8px 24px rgba(0,0,0,.2);
  transform:translateY(110%);
  transition:transform .35s ease;
}
.cookie-bar.show{ transform:translateY(0); }
.cookie-bar a{ color:#fff; }

/* =========================================
   Custom Scrollbar (WebKit)
========================================= */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--hmw-primary), var(--hmw-accent));
  border-radius:6px;
}

/* =========================================
   Responsive
========================================= */
@media (max-width: 991px){
  .hero-art{ margin-top:24px; }
}

/* ------------------------------------
   FAQ SECTION STYLES
------------------------------------ */

/* ------------------------------------
   FAQ SECTION STYLES
------------------------------------ */
#faq {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Accordion */
#faq .accordion-button {
  background-color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
}

#faq .accordion-button:focus {
  box-shadow: none;
}

#faq .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, #0c2bdc, #5a73ff);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}

/* Accordion item */
#faq .accordion-item {
  border: none;
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
  transition: transform .3s ease;
}

#faq .accordion-item:hover {
  transform: translateY(-3px);
}

#faq .accordion-body {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
}

/* Chevron icon animation */
#faq .faq-icon {
  transition: transform 0.3s ease;
}
#faq .accordion-button[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

/* Heading Area */
#faq .faq-badge {
  background: linear-gradient(90deg, #dbe4ff, #b6c4ff);
  color: #0c2bdc !important;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 50px;
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border: none;
  box-shadow: 0 3px 8px rgba(12, 43, 220, 0.15);
  transition: all 0.3s ease;
}

#faq .faq-badge:hover {
  background: linear-gradient(90deg, #c7d4ff, #a8baff);
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(12, 43, 220, 0.25);
}

/* Title styling */
#faq .section-title {
  font-size: 1.9rem;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #0a0a23;
  font-weight: 700;
}

/* Decorative divider */
#faq .section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 15px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #0c2bdc, #5a73ff);
}


/* footer links */

.policy-link{
font-weight:500;
color:#dbdee1;
text-decoration:none;
transition:all .2s ease;
}

.policy-link:hover{
color:#0d6efd;
}

/* modal */

.policy-modal .modal-content{
border-radius:14px;
border:1px solid #e9ecef;
overflow:hidden;
}

/* smooth animation */

.modal.fade .modal-dialog{
transform:translateY(20px);
transition:transform .25s ease-out;
}

.modal.show .modal-dialog{
transform:translateY(0);
}

/* body */

.policy-body{
padding:25px 30px;
max-height:70vh;
font-size:15px;
line-height:1.7;
}

.policy-content h6{
margin-top:20px;
font-weight:600;
}

/* progress container */

.policy-progress{
position:relative;
height:6px;
background:#f1f3f5;
}

/* progress bar */

.policy-progress .progress-bar{
height:100%;
width:0%;
background:#0d6efd;
transition:width .15s linear;
}

/* percentage text */

.policy-progress .progress-text{
position:absolute;
right:10px;
top:-18px;
font-size:12px;
color:#6c757d;
}

/* mobile improvements */

@media (max-width:768px){

.policy-body{
padding:18px;
font-size:14px;
}

}


/* End of stylesheet */