/* ================= GLOBAL ================= */
* {
  box-sizing: border-box;
  font-family: "Segoe UI", system-ui, sans-serif;
}

html, body {
  margin: 0;
}

/* 🔥 STICKY FOOTER CORE */
body {
  background: #f6f7fb;
  display: flex;
  flex-direction: column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}

/* main will push footer down */
main {
  flex: 1;
}
/* ================= OVERLAY ================= */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.08);     /* subtle SaaS dim */
  backdrop-filter:blur(2px);
  display:none;
  z-index:1000;
}
.nav-overlay.show{
  display:block;
}

/* ================= NAV BAR ================= */
nav{
  background:#ffffff;
  border-bottom:1px solid #e6e8f0;
}

.nav-container{
  max-width:1100px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

nav img{
  width:100px;
}

/* ================= DESKTOP MENU ================= */
.menu{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
  position:static;
  z-index:2000;
}

.menu li{
  list-style:none;
}

.menu a{
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  color:#374151;
  position:relative;
}

.menu a:hover{
  color:#6b4ce6;
}

/* hide sidebar header on desktop */
.menu-header{
  display:none;
}

/* ================= HAMBURGER ================= */
.hamburger{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  background:#f4f2ff;
  color:#6b4ce6;
  font-size:20px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
/* ✅ FINAL MOBILE NAV OVERLAY (CLICK SAFE) */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  display: none;
  opacity:0;
  pointer-events:none;
  transition:.3s ease;
  z-index: 1500;
}

.nav-overlay.show{
  display: block;
  opacity:1;
  pointer-events:auto;
}

/* ================= NAV ================= */
nav{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
}

.nav-container{
  max-width:1100px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.menu{
  z-index:2000;
}

nav img{
  width:100px;
}

/* ================= DESKTOP MENU ================= */
.menu{
  list-style:none;
  display:flex;
  gap:20px;
  margin:0;
  padding:0;
  position:static;
}

.menu li{
  list-style:none;
}

.menu a{
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  color:#374151;
}

.menu a:hover{
  color:#6b4ce6;
}

/* hide sidebar header on desktop */
.menu-header{
  display:none;
}

/* ================= HAMBURGER ================= */
.hamburger{
  display:none;
  width:40px;
  height:40px;
  border-radius:10px;
  background:#f4f5fb;
  font-size:22px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

/* ================= MOBILE SIDEBAR ================= */
 @media (max-width:1050px){

  .hamburger{
    display:flex;
    width:42px;
    height:42px;
    border-radius:12px;
    background:#f4f2ff;
    color:#6b4ce6;
    font-size:20px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative;
    z-index:3000;
    transition:.25s ease;
  }

  .hamburger:hover{
    background:#6b4ce6;
    color:#fff;
  }

  .menu-header .menu-title img{
    display:none;
  }

  /* 🔥 SIDEBAR */
  .menu{
    position:fixed;
    top:0;
    right:-70%;
    width:70%; /* ✅ 70% WIDTH */
    height:100vh;
    background:#ffffff;
    padding:22px 18px 26px;
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:right .45s cubic-bezier(.22,.61,.36,1);
    border-left:1px solid #ecebfd;
    box-shadow:-14px 0 36px rgba(0,0,0,.12);
    z-index:2000;
  }

  .menu.show{
    right:0;
  }

  /* show header only on mobile */
  .menu-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
  }

  .menu-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:#6b4ce6;
    font-size:16px;
  }

  .menu-title img{
    width:26px;
  }

  .close-btn{
    width:38px;
    height:38px;
    border:none;
    border-radius:12px;
    background:#f4f2ff;
    color:#6b4ce6;
    font-size:18px;
    cursor:pointer;
    transition:.25s ease;
  }

  .close-btn:hover{
    background:#6b4ce6;
    color:#ffffff;
    transform:rotate(90deg);
  }

  /* ================= MENU ITEMS (VISIBLE STYLE) ================= */
  .menu a{
    display:flex;
    align-items:center;
    padding:16px 18px;
    border-radius:18px;
    font-size:15px;
    font-weight:600;
    color:#1f2937;
    background:#ffffff;
    border:1px solid #e9e9f5;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    transition:.25s ease;
  }

  .menu a:hover{
    background:rgba(107,76,230,.08);
    color:#6b4ce6;
    transform:translateX(4px);
  }

  .menu a.active{
    background:rgba(107,76,230,.14);
    color:#6b4ce6;
    font-weight:700;
    border-color:#dcd6ff;
  }

  /* remove default divider look */
  .menu li:not(:last-child) a{
    border-bottom:none;
  }

  /* close button hidden by default */
  .close-btn{
    display:none;
  }

  .nav-overlay{
    z-index:1000;
  }

  .menu{
    z-index:2000;
  }
}


/* ================= TOOLS SECTION ================= */
.tools-section {
  padding: 25px 20px;
}

/* FILTER BAR */
.filter-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 auto 40px;
}

.filter-bar button {
  border: 1px solid #dde2ee;
  background: #ffffff;
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.filter-bar button:hover {
  background: #f2f4f9;
  transform: translateY(-2px);
}

.filter-bar button.active {
  background: linear-gradient(135deg, #0f0f0f, #2b2b2b);
  color: #fff;
}

.tools{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:24px;

  max-width:1600px;   /* ⭐ more side pressure */
  margin:0 auto;
  padding:0 12px;     /* ⭐ side gap কম */
  justify-items:center;
}

.card{
  width:100%;
  max-width:360px;
}


.card {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  gap: 16px;
  text-decoration: none;
  color: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon-inner{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}


/* TEXT */
.card h3 {
  margin: 0;
  font-size: 17px;
}

.card p {
  margin-top: 6px;
  font-size: 14px;
  color: #666;
}

/* ALL BUTTON */
.all-btn {
  margin: 50px auto;
  display: flex;
  align-items: center;
  padding: 16px 42px;
  background: #673de6;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

/* ================= FOOTER (FINAL & FIXED) ================= */
.site-footer {
  background: #2b2e34;
  border-top: 1px solid #3a3d44;
  padding: 28px 10px;
}

.footer-inner {
  max-width: 1100px;
  margin: auto;
  text-align: center;
  font-size: 13px;
  color: #ffffff;
}

.footer-links {
  margin-bottom: 8px;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 6px;
  font-weight: 500;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links span {
  color: #d1d1d1;
}

.footer-copy {
  font-size: 12.5px;
  color: #ffffff;
}

.footer-brand {
  font-weight: 500;
}
.footer-brand{
  color: white;
}
/* ================= ICON BASE ================= */

/* ================= ICON BASE ================= */

.icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  position:relative;
  overflow:hidden;

  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

  transition: 
    transform .35s cubic-bezier(.4,2,.6,1),
    box-shadow .35s ease;
}

/* ICON IMAGE */
.icon img{
  width:28px;
  height:28px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  transform:scale(.9);
  transition: transform .35s cubic-bezier(.4,2,.6,1);
}

/* Light reflection layer */
.icon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%);
  opacity:0;
  transition: opacity .35s ease;
}

/* ================= DESKTOP HOVER ================= */

@media (hover:hover){
  .card:hover .icon{
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
  }

  .card:hover .icon img{
    transform: scale(1);
  }

  .card:hover .icon::before{
    opacity:1;
  }
}

.card:active .icon{
  animation: mobilePop .45s cubic-bezier(.4,2,.6,1);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

@keyframes mobilePop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.15); }
  100%{ transform: scale(1.05); }
}

.card:active .icon img{
  transform: scale(1.15);
}

.card:active .icon::before{
  opacity:1;
}

/* Subtle card press */
.card{
  transition: transform .15s ease;
}

.card:active{
  transform: scale(.97);
}



/* ===== ENTERPRISE SEARCH (FINAL TUNED) ===== */
.calculator-search-premium{
  width:100%;
  display:flex;
  justify-content:center;
  margin:40px 0 48px;
}

/* OUTER SHELL — width control here */
.search-shell{
  width:100%;
  max-width:720px;   /* ✅ widened for professional feel */
  padding:2px;
  border-radius:22px;
  background:linear-gradient(
    135deg,
    rgba(107,76,230,.28),
    rgba(107,76,230,.06)
  );
}

/* INNER FIELD */
.search-field{
  position:relative;
  display:flex;
  align-items:center;
  height:60px;
  background:#ffffff;
  border-radius:20px;
  padding:0 22px;
  box-shadow:
    0 22px 50px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition:all .25s ease;
}

.search-field:focus-within{
  box-shadow:
    0 30px 70px rgba(107,76,230,.22),
    inset 0 1px 0 rgba(255,255,255,1);
  transform:translateY(-1px);
}

/* SVG ICON */
.search-icon{
  position:absolute;
  left:22px;
  width:18px;
  height:18px;
  fill:#9aa0b4;
  transition:fill .25s ease;
}

.search-field:focus-within .search-icon{
  fill:#6b4ce6;
}

/* INPUT */
.search-field input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:16px;
  font-weight:500;     /* ✅ perfect weight */
  color:#1f2937;
  padding-left:46px;   /* icon spacing */
}

.search-field input::placeholder{
  color:#9aa0b4;
  font-weight:400;
}

/* KEYBOARD HINT (optional future use) */
.kbd{
  font-size:12px;
  padding:6px 10px;
  border-radius:8px;
  background:#f4f5fb;
  color:#6b7280;
  border:1px solid #e6e8f0;
  font-weight:500;
}

/* LARGE DESKTOP POLISH */
@media (min-width:1400px){
  .search-shell{
    max-width:760px;
  }
}

/* MOBILE */
@media(max-width:600px){
  .search-shell{
    max-width:100%;
  }
  .search-field{
    height:56px;
    border-radius:18px;
    padding:0 18px;
  }
  .kbd{
    display:none;
  }
}






.age { background:#ff6b6b; }
.percentage { background: #0099ff; }
.bcalculator{ background: #628141;}
.bmicalculator {background: #5B23FF;}
.emicalculator {background: #FA8112;}
.loancalculator{background: #BBCB2E;}
.unitcalculator {background: #FF9D00;}
.scientific {background: #740A03;}
.salary {background: #000080;}
.discount {background: #982598;}
.inflation {background: #40513B;}
.taxcalculator{background: #8C00FF;}
.vatcalculator{background: #715A5A;}
.mortgage {background: #8ecae6;}
.CalorieCalculator { background: #1abc9c;}
.CompoundCalculator {background: #f4b41a;}
.simpleintarestCalculator{background: #ffa781;}
.salestax {background: #b8df10;}
.Investment-Calculator {background: #fb8500;}
.Date-Calculator {background: #bc6c25;}
.Time-zone-calculator {background: #db5461;}
.Password-generator {background: #fca311;}
.Random-number-genarator {background: #ef233c;}
.Electricity-Calculator {background: #679436;}
.Gas-Mileage-Calculator {background:  #284b63;}
.Fual-cost-calculator {background: #23b5d3;}
.Due-Date-Calculator {background: #f87060;}
.Pregnancy-Calculator {background: #8d99ae;}
.Water-Intake-Calculator {background: #2d232e;}
.Protein-Calculator {background: #ef8354;}
.TDEE-Calculator {background: #d62828;}
.Ideal-Weight-Calculator{background: #723d46;}
.Body-fat-calculator{background: #fe5f55;}
.Sleep-length {background:#9E1C60;}
.Square-Footage-Calculator {background: #BBCB2E;} 
.IELTS-Score-Calculator {background: #D25353;}
.RFM-Calculator {background: #85409D;}
.Ponderal-Index-Calculator {background: #93BD57;}
.FFMI-Calculator {background: #EEA727;}
.Draw-Length-Calculator {background: #005F02;}
.BAI-Calculator {background: #FF5B5B;}
.ABSI-Calculator {background:#740A03 ;}
.Binary-calculator {background: #1A2CA3;}
.bmr-calculator {background: #f892b6;}
.Tip-calculator {background: #896C6C;}
.Bra-size-calculator {background: #FF3F7F;}
.Half-Life-Calculator {background: #641C34;}
.gpa-calculator {background: #FDA769;}
.Budget-Calculator {background: #374955;}
.kW-HP-Converter {background: #694ADC;}
.Hours-calculator {background: #065510;}
.Ratio-calculator {background: #65582D;}
.Root-calculator {background: #90421D;}
.Roi-calculator {background: #1A1E0C;}
.Data-Unit-Converter {background: #BB1D24;}
.Day-of-the-Week-Calculator {background: #95CAD8;}
.Time-Duration-Calculator {background: #F93B0B;}
.Confidence-Interval-Calculator {background: #364F45;}
.Sample-Size-Calculator {background: #804C14;}
.Z-Score-Calculator {background: #382169;}
.Present-value-calculator {background: #370A0C;}
.Future-values-calculator {background: #3D45AA;}
.Break-Even-Calculator {background: #AA2B1D;}
.Profit-margin-calculator {background: #FFA239;}
.Commission-calculator {background: #018790;}
.GST-Calculator {background: #0C2C55;}
.sip-calculator {background: #764F51;}
.Fraction-Calculator {background: #576A8F;}
.log-calculator {background: #008BFF;}
.Exponent-Calculator {background: #362F4F;}
.Mean-Median-Mode-Calculator {background: #FA5C5C;}
.Avarage-calculator {background: #E37434;}
.Big-number-calculator {background: #0099e5;}
.Standard-Deviation-Calculator {background: #ff4c4c;}
.Rounded-number {background: #34bf49;}
.Roman-Numeral-Converter {background: #ffb900;}
.Download-upload-Time-Calculator {background: #FF6D1F;}
.Website-bandwidth-calculator {background: #8CA9FF;}
.Prime-Numbers-Checker {background: #43334C;}
.Increase-and-Decrease-Calculator {background: #2845D6;}
.Composite-number-checker {background: #628141;}
.Unit-Rate-Calculator {background: #9E2A3A;}
.Fraction-Calculator {background: #412B6B;}
.Cube-Calculator {background: #6A1E55;}
.Fraction-to-Percentage-Converter {background: #FF6500;}
.Even-or-Odd-calculator {background: #E19898;}
.Number-to-words {background: #5C5470;}
.Hex-rgb {background: #03C988;}
.rgb-hax {background: #D21312;}
.text-repiter {background: #6D67E4;}
.URL-Decoder-Encoder {background: #BF4646;}
.Find-and-Replace {background: #BBCB2E;}
.text-sorter {background: #f5ca0d;}
.Remove-duplicate-word {background: #DE1A58;}
.remove-duplicate-line {background: #00B7B5;}
.Word-Counter {background: #1B211A;}
.Text-to-lowercase {background: #E2852E;}
.Text-to-Uppercase {background: #234C6A;}
.Text-Reverser {background: #452829;}
.Coin-Flip {background: #6E8CFB;}
.Tic-Tac-Toe {background: #C3110C;}
.Rock-paper {background: #EEA727;}
.Virtual-dice-ruller {background: #434E78;}
.love-calculator {background: #663de6;}
.color-picker {background: #ff4064;}
.Decision-Maker {background: #4285F4;}
.Spin-the-wheel {background: #E4405F;}
.yes-or-no-generator {background: #25D366;}
.Random-text-Genarator {background: #FF4800;}
.Oracle {background: #07C160;}
.random-color-generator {background: #FF5959;}
.love-massage-genarator {background: #E11A6A;}
.yes-no-wheel {background: #0AC4E0;}
.Random-county-Genarator {background: #9a5bff;}
.username-generator {background: #FF9B51;}
.Random-verb-Genarator {background: #839705;}
.Random-Sentence-Generator {background: #7AB2B2;}
.Random-noun-Genarator {background: #982598;}
.Random-Emoji-Genarator {background: #740A03;}
.Random-number-genarator {background: #DDAED3 ;}
.random-name-generator {background: #574964;}
.Number-Picker-Wheel {background: #36656B;}
.random-word-generator {background: #FE7F2D;}
.True-and-dare {background: #E83C91;}
.A-Z-Picker-Wheel {background: #473472;}

/* ===== FOOTER WRAPPER ===== */
.pro-footer{
  position:relative;
  background:linear-gradient(145deg,#0f172a,#111827,#0b1120);
  color:#cbd5e1;
  padding:80px 20px 35px;
  overflow:hidden;
}

/* Subtle glow background effect */
.pro-footer::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(124,58,237,.15),transparent 70%);
  top:-150px;
  left:-150px;
  pointer-events:none;
}

.footer-container{
  position:relative;
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:50px;
  z-index:2;
}

/* ===== BRAND ===== */
.footer-logo{
  font-size:24px;
  font-weight:700;
  letter-spacing:.5px;
  color:#ffffff;
  margin-bottom:18px;
}

.footer-desc{
  font-size:14px;
  line-height:1.8;
  color:#94a3b8;
  max-width:320px;
}

/* ===== COLUMN TITLE ===== */
.footer-col h4{
  font-size:15px;
  font-weight:600;
  margin-bottom:18px;
  color:#ffffff;
  position:relative;
}

/* Elegant underline */
.footer-col h4::after{
  content:"";
  display:block;
  width:30px;
  height:2px;
  background:linear-gradient(90deg,#7c3aed,#a855f7);
  margin-top:8px;
  border-radius:4px;
}

/* ===== LINKS ===== */
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-col ul li{
  margin-bottom:12px;
}

.footer-col ul li a{
  position:relative;
  text-decoration:none;
  color:#94a3b8;
  font-size:14px;
  transition:.3s ease;
}

/* Smooth hover animation */
.footer-col ul li a::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  transform:translateY(-50%) scaleX(0);
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a855f7;
  transition:.3s ease;
}

.footer-col ul li a:hover{
  color:#ffffff;
  padding-left:12px;
}

.footer-col ul li a:hover::before{
  transform:translateY(-50%) scaleX(1);
}

/* ===== BOTTOM BAR ===== */
.footer-bottom{
  margin-top:60px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;
  font-size:13px;
  color:#64748b;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width:768px){

  .pro-footer{
    padding:60px 20px 30px;
  }

  .footer-container{
    grid-template-columns:1fr;
    gap:40px;
    text-align:left;
  }

  .footer-col{
    transform:none !important;
  }

  .footer-logo{
    font-size:20px;
  }

  .footer-desc{
    font-size:14px;
    line-height:1.8;
  }

  .footer-col h4{
    margin-bottom:15px;
  }

  .footer-col ul li{
    margin-bottom:12px;
  }

  .footer-bottom{
    margin-top:50px;
    padding-top:25px;
    font-size:12px;
  }

}
@media (max-width:1150px){

  .footer-container{
    grid-template-columns:1fr !important;
    gap:50px;
    text-align:left;
  }

  .footer-col{
    transform:none !important;
  }

  .footer-desc{
    max-width:100%;
  }

}


/* =====================================
   MOBILE (768px and below)
   CENTER ALIGN
===================================== */

@media (max-width:768px){

  .pro-footer{
    padding:60px 20px 30px;
  }

  .footer-container{
    text-align:center;
    gap:40px;
  }

  .footer-desc{
    margin:0 auto;
  }

  .footer-logo{
    font-size:20px;
  }

  .footer-bottom{
    font-size:12px;
    margin-top:50px;
  }

}
@media (max-width:768px){

  .footer-col h4::after{
    margin:8px auto 0;
  }

}
.footer-col h4::after{
  display:block;
  width:30px;
}



.btn{
  transition: box-shadow .25s ease, transform .15s ease;
}

.btn:hover{
  box-shadow:
    0 0 0 3px rgba(109,76,255,.35),
    0 0 22px rgba(109,76,255,.6) !important;
}





#scrollTopBtn{
  position:fixed;
  right:30px;
  bottom:85px;
  width:60px;
  height:60px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(25px) scale(.9);
  transition:all .6s cubic-bezier(.16,1,.3,1);
  z-index:9999;
  overflow:visible;
  outline:none;
}

#scrollTopBtn:focus{
  outline:none;
}

#scrollTopBtn.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* Dynamic glow (will be updated via JS) */
#scrollTopBtn.dynamic-glow{
  box-shadow:
    0 0 0 rgba(124,58,237,0),
    0 20px 60px rgba(124,58,237,0.25),
    inset 0 0 25px rgba(255,255,255,0.4);
}

/* Hover lift */
#scrollTopBtn:hover{
  transform:translateY(-8px) scale(1.1);
}

/* =====================================
   PERFECT CENTER ICON
===================================== */

#scrollTopBtn svg.arrow{
  width:26px;
  height:26px;
  stroke:#7c3aed;
  stroke-width:3.5; /* Bold */
  fill:none;
  z-index:2;
}

/* =====================================
   PERFECT PROGRESS RING
===================================== */

.progress-ring{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  pointer-events:none;
}

.progress-ring circle{
  fill:none;
  stroke-width:4;
}

.progress-ring .bg{
  stroke:rgba(124,58,237,0.15);
}

.progress-ring .progress{
  stroke:#a78bfa;
  stroke-linecap:round;
  transition:stroke-dashoffset .2s linear;
}

/* Mobile */
@media(max-width:768px){
  #scrollTopBtn{
    width:64px;
    height:64px;
    right:20px;
    bottom:75px;
  }
}


.digicalx-why {
  position: relative;
  padding: 120px 20px;
  background: radial-gradient(circle at top left, #1e1b3a, #0f0c29);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Animated Background Blur */
.bg-blur {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(168,85,247,0.35), transparent 70%);
  top: -200px;
  right: -200px;
  filter: blur(100px);
  animation: floatBlur 10s ease-in-out infinite alternate;
}

@keyframes floatBlur {
  from { transform: translateY(0px); }
  to { transform: translateY(50px); }
}

.container {
  max-width: 1200px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.section-header h2 {
  font-size: 44px;
  color: #fff;
  margin-bottom: 15px;
}

.section-header p {
  color: rgba(255,255,255,0.7);
  font-size: 18px;
}

/* Counter */
.counter-wrapper {
  display: flex;
  justify-content: center;
  gap: 70px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}

.counter-box h3 {
  font-size: 40px;
  background: linear-gradient(45deg, #a855f7, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.counter-box p {
  color: rgba(255,255,255,0.7);
}

/* Grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  perspective: 1200px;
}

/* Card */
.why-card {
  position: relative;
  padding: 40px 35px;
  border-radius: 26px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 15px 50px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

.card-glow {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: radial-gradient(circle at var(--x) var(--y), rgba(168,85,247,0.3), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.why-card:hover .card-glow {
  opacity: 1;
}

/* Icon */
.icon-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.icon {
  font-size: 28px;
  line-height: 60px;
  text-align: center;
}

.icon-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(168,85,247,0.4);
  animation: pulseRing 2.5s infinite ease-in-out;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.6; }
}

.why-card h3 {
  color: #fff;
  margin-bottom: 12px;
}

.why-card p {
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 992px) {
  .why-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
}








.glx-section{
  position:relative;
  padding:100px 20px;
  background:radial-gradient(circle at 30% 30%,#2a1b6e,#140f2d 60%);
  overflow:hidden;
}

/* Noise Layer */
.glx-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.04) 0px, transparent 1px);
  opacity:0.05;
  pointer-events:none;
}

/* ================= CONTAINER ================= */

.glx-container{
  max-width:1300px;
  margin:auto;
  text-align:center;
  position:relative;
  z-index:2;
}

/* ================= HEADER ================= */

.glx-badge{
  display:inline-block;
  padding:8px 18px;
  font-size:13px;
  border-radius:30px;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(12px);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.25);
  margin-bottom:20px;
}

.glx-header h2{
  font-size:38px;
  font-weight:600;
  color:#ffffff;
  margin-bottom:15px;
}

.glx-header p{
  color:rgba(255,255,255,0.85);
  font-size:16px;
  margin-bottom:70px;
}

/* ================= GRID ================= */

/* Desktop → 4 Column */
.glx-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px;
  justify-items:center;
  perspective:1200px;
}

/* ================= CARD ================= */

.glx-card{
  position:relative;

  width:100%;
  max-width:300px;
  height:220px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:35px 25px;
  border-radius:28px;

  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,0.35);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.4);

  transition:transform .2s ease, box-shadow .4s ease;
  transform-style:preserve-3d;

  overflow:hidden;
  opacity:0;
  transform:translateY(60px);
}

/* Glow Effect */
.glx-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
      circle at var(--gx,50%) var(--gy,50%),
      rgba(140,82,255,0.6),
      transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

/* Highlight Effect */
.glx-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(
      circle at var(--gx,50%) var(--gy,50%),
      rgba(255,255,255,0.4),
      transparent 40%);
  mix-blend-mode:overlay;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

/* Hover */
.glx-card:hover{
  box-shadow:
    0 35px 90px rgba(140,82,255,.45),
    0 0 60px rgba(140,82,255,.35),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

.glx-card:hover::before,
.glx-card:hover::after{
  opacity:1;
}

/* ================= TEXT ================= */

.glx-card h3{
  font-size:38px;
  font-weight:600;
  color:#ffffff;
  margin-bottom:10px;
  letter-spacing:1px;
}

.glx-card p{
  font-size:15px;
  color:#ffffff;
  opacity:.95;
}

/* ================= REVEAL ================= */

.fade-up.active{
  opacity:1;
  transform:translateY(0);
  transition:1s cubic-bezier(.22,1,.36,1);
}

/* ================= TABLET ================= */
/* ================= TABLET FIX ================= */

@media(max-width:1024px){

  .glx-grid{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
  }

  .glx-card{
    max-width:100%;   /* remove fixed limit */
    width:100%;       /* full grid column width */
  }
}

/* ================= MOBILE ================= */

@media(max-width:600px){

  .glx-section{
    padding:70px 15px;
  }

  .glx-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  .glx-card{
    width:100%;
    max-width:100%;
    height:200px;
  }

  .glx-card h3{
    font-size:32px;
  }

  .glx-card p{
    font-size:14px;
  }
}