:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --accent:#6ea8fe;
  --accent2:#7ee787;
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

/* Base */
body{
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(110,168,254,.18), transparent 55%),
    radial-gradient(1000px 600px at 80% 20%, rgba(126,231,135,.12), transparent 60%),
    var(--bg);
  color:var(--text);
}
img{max-width:100%;height:auto}
.section-modern{ padding: 72px 0; }
.section-dark{
  background: rgba(255,255,255,.02);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
@media (max-width: 991px){
  .section-modern{ padding: 56px 0; }
}

.section-title h2{
  color: var(--text);
  font-weight: 800;
  letter-spacing: .5px;
}
.section-title p{ color: var(--muted); }

/* Glass card */
.card-glass,
.glass-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

/* Buttons */
.btn-modern{
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Hero CTA */
.hero-cta{ margin-top: 18px; }
.hero-cta .btn{
  min-width: 200px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
@media (max-width: 575px){
  .hero-cta .btn{ width: 100%; }
}

/* About info */
.info-list{ list-style:none; padding:0; margin:0; }
.info-list li{
  padding:8px 0;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.info-list i{ color: var(--accent); margin-top:3px; }

/* Stats */
.stat-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding: 18px;
  box-shadow: var(--shadow);
  height: 100%;
}
.stat-card i{ font-size: 28px; color: var(--accent); }
.stat-card p{ margin: 8px 0 0; color: var(--muted); }

/* =========================
   ✅ SKILLS VISIBILITY FIX
========================= */
.skills .section-title h2,
.skills .section-title p{
  color: rgba(245, 248, 255, .96) !important;
}
.skills .section-title p{
  color: rgba(245, 248, 255, .78) !important;
  font-weight: 600;
}
.skills .progress{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.skills .progress .skill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color: rgba(245,248,255,.96) !important;
  font-weight: 800 !important;
  font-size: 14px;
}
.skills .progress .skill .val{
  color: rgba(245,248,255,.90) !important;
  font-weight: 900 !important;
}
.skills .progress-bar-wrap{
  background: rgba(255,255,255,.14) !important;
  border-radius: 999px;
  height: 10px !important;
  overflow:hidden;
}
.skills .progress-bar{
  height: 10px !important;
  border-radius: 999px;
  background: linear-gradient(90deg, #39b6ff, #4cff7b) !important;
}


/* =======================
   ✅ SERVICES (Pro Cards)
======================= */
.services-grid{ margin-top: 10px; }

.service-card{
  position: relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  padding: 18px 16px;
  border-radius: 18px;
  text-decoration:none;
  color: inherit;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(650px 220px at 20% 10%, rgba(255,255,255,.12), transparent 55%);
  pointer-events:none;
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.service-icon{
  width:54px;height:54px;
  border-radius: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.service-icon i{ font-size:22px; }
.service-title{ margin:0; font-weight:900; font-size:1.05rem; }
.service-desc{ margin:6px 0 0; opacity:.85; line-height:1.6; font-size:.95rem; }

@media (max-width: 575.98px){
  .service-card{ padding:16px 14px; border-radius:16px; }
  .service-title{ font-size:1rem; }
}

/* =========================
   ✅ TESTIMONIALS SAME SIZE
========================= */
.testimonial-wrap{ margin-top: 14px; }

.testimonialsSwiper .swiper-slide{
  height:auto;
  display:flex;
}

.testimonial-card-pro{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);

  min-height: 280px;
}

/* head */
.t-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.t-avatar{
  width:70px;height:70px;
  border-radius: 18px;
  overflow:hidden;
  flex:0 0 auto;
  border: 1px solid rgba(255,255,255,.14);
}
.t-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* meta */
.t-name{ margin:0; font-size: 1.05rem; font-weight: 900; }
.t-email{
  margin:4px 0 0;
  opacity:.75;
  font-size:.92rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.t-stars{ margin-top:6px; opacity:.95; }

/* quote clamp */
.t-quote{ margin-top:14px; padding-top:10px; border-top:1px solid rgba(255,255,255,.10); }
.t-quote p{
  margin:0;
  line-height:1.7;
  opacity:.9;

  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.t-foot{ margin-top:14px; opacity:.75; font-size:.9rem; }

/* swiper UI */
.testimonialsSwiper{ padding-bottom: 40px; }
.testimonials .swiper-pagination-bullet{ opacity:.35; }
.testimonials .swiper-pagination-bullet-active{ opacity:1; }

@media (max-width: 575.98px){
  .testimonial-card-pro{ padding:16px; border-radius:16px; }
}

/* =========================
   Footer
========================= */
.footer-modern{
  padding: 22px 0;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
.footer-modern a{ color: var(--accent); }

/* =========================
   ✅ PRINT (Resume PDF)
   Footer show/hide control
========================= */

/* ✅ IMPORTANT:
   print এ footer hide রাখলে PDF clean হয়,
   কিন্তু তুমি চাইলে footer show করবো।
   নিচে "display:block" দিলাম, তাই PDF তে footer show হবে।
*/
@media print{
  body{background:#fff !important;color:#000 !important}
  #header,.mobile-nav-toggle,#hero,#about,#facts,#skills,#business-skills,
  #portfolio,#services,#testimonials,#contact,.elfsight-app-e552903a-f2fc-4a3b-91a6-42e1947c68a5{display:none !important}

  #resume{display:block !important}
  #footer{display:block !important} /* ✅ footer NOW visible in print */

  .glass-card,.timeline-box{background:#fff !important;border:1px solid #ddd !important;backdrop-filter:none !important}
  a:link,a:visited{text-decoration:none !important;color:#000 !important}
}
/* ==============================
   ✅ RESUME (PRO + UNIQUE) v3
   Scope: #resume only
================================ */
#resume{
  position:relative;
  scroll-margin-top:80px;
}

/* theme variables */
#resume[data-theme="dark"]{
  --r-bg: transparent;
  --r-card: rgba(255,255,255,.06);
  --r-card2: rgba(255,255,255,.035);
  --r-border: rgba(255,255,255,.10);
  --r-text: #eaf0ff;
  --r-muted: rgba(234,240,255,.72);
  --r-shadow: 0 18px 50px rgba(0,0,0,.35);
}
#resume[data-theme="light"]{
  --r-bg: #fff;
  --r-card: rgba(0,0,0,.035);
  --r-card2: rgba(0,0,0,.02);
  --r-border: rgba(0,0,0,.12);
  --r-text: #0b1220;
  --r-muted: rgba(11,18,32,.68);
  --r-shadow: 0 18px 50px rgba(0,0,0,.12);
}

/* section title (resume only) */
#resume .section-title h2{
  font-weight: 900;
  letter-spacing:.3px;
}
#resume .section-subtitle{
  color: var(--r-muted);
  font-weight:700;
}

/* glass base used by your resume */
#resume .glass-card{
  background: var(--r-card);
  border: 1px solid var(--r-border);
  border-radius: 18px;
  box-shadow: var(--r-shadow);
  backdrop-filter: blur(10px);
  color: var(--r-text);
}

/* =======================
   TOPBAR (unique header)
======================= */
#resume .resume-topbar{
  padding: 18px;
  position: relative;
  overflow: hidden;
}
#resume .resume-topbar::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(110,168,254,.25), transparent 60%),
    radial-gradient(900px 260px at 90% 25%, rgba(126,231,135,.16), transparent 60%);
  pointer-events:none;
  opacity:.95;
}
#resume .resume-topbar > *{
  position: relative;
  z-index: 1;
}

/* avatar */
#resume .resume-avatar{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--r-border);
  background: var(--r-card2);
}
#resume .resume-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* name + subtitle */
#resume .resume-top-name{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}
#resume .resume-top-sub{
  color: var(--r-muted);
  font-weight: 700;
  margin-top: 4px;
}

/* topbar buttons nicer */
#resume .btn-modern{
  border-radius: 14px !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
}
#resume .btn-outline-light{
  border-color: var(--r-border) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--r-text) !important;
}
#resume[data-theme="light"] .btn-outline-light{
  background: rgba(0,0,0,.03) !important;
}

/* =======================
   counters (same size)
======================= */
#resume .resume-stat{
  border-radius: 16px;
  padding: 12px 10px;
  border: 1px solid var(--r-border);
  background: var(--r-card2);
  text-align: center;
}
#resume .resume-stat-num{
  font-size: 22px;
  font-weight: 900;
  letter-spacing:.2px;
}
#resume .resume-stat-label{
  margin-top: 2px;
  color: var(--r-muted);
  font-weight: 800;
  font-size: 13px;
}

/* =======================
   cards / headings
======================= */
#resume .resume-card{
  padding: 18px;
}
#resume .resume-heading{
  font-weight: 900;
  margin: 0;
  letter-spacing: .2px;
}
#resume .resume-text{
  color: var(--r-muted);
  line-height: 1.75;
}

/* pills */
#resume .resume-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top: 14px;
}
#resume .resume-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  background: var(--r-card2);
  border: 1px solid var(--r-border);
  font-weight: 800;
  color: var(--r-text);
  min-width:0;
}
#resume .resume-pill i{ opacity:.95; }
@media (max-width: 575px){
  #resume .resume-grid{ grid-template-columns: 1fr; }
}

/* =======================
   timeline (premium)
======================= */
#resume .timeline{
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
}
#resume .timeline::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(255,255,255,.14);
}
#resume[data-theme="light"] .timeline::before{
  background: rgba(0,0,0,.12);
}

/* item */
#resume .timeline-item{
  position: relative;
  margin: 14px 0;
}
#resume .timeline-dot{
  position:absolute;
  left: 1px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(13,110,253,1), rgba(20,184,166,1));
  box-shadow: 0 0 0 6px rgba(13,110,253,.18);
}
#resume[data-theme="light"] .timeline-dot{
  box-shadow: 0 0 0 6px rgba(13,110,253,.14);
}

#resume .timeline-box{
  border-radius: 16px;
  padding: 14px 14px;
  background: var(--r-card2);
  border: 1px solid var(--r-border);
}
#resume .timeline-box h4{
  font-weight: 900;
  margin: 0 0 6px;
}

/* meta badges */
#resume .timeline-meta{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
#resume .badge-soft{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: var(--r-text);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--r-border);
}
#resume[data-theme="light"] .badge-soft{
  background: rgba(0,0,0,.03);
}

#resume .timeline-org{
  font-weight: 800;
  color: var(--r-text);
  opacity: .92;
  margin: 0 0 6px;
}
#resume .timeline-desc{
  margin: 0;
  color: var(--r-muted);
  line-height: 1.7;
}

/* lists */
#resume .timeline-list{
  margin: 10px 0 0;
  padding-left: 18px;
}
#resume .timeline-list li{
  margin: 6px 0;
  color: var(--r-muted);
  line-height: 1.6;
}

/* =======================
   certifications
======================= */
#resume .resume-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(13,110,253,.16);
  border: 1px solid rgba(13,110,253,.35);
  color: var(--r-text);
}
#resume .cert-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
#resume .cert-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--r-card2);
  border: 1px solid var(--r-border);
  font-weight: 800;
  color: var(--r-text);
}
#resume .cert-item i{ margin-top:2px; opacity:.95; }
@media (max-width: 575px){
  #resume .cert-grid{ grid-template-columns: 1fr; }
}

/* CTA buttons */
#resume .resume-cta .btn{
  border-radius: 14px;
  font-weight: 900;
}

/* =======================
   PRINT (PDF)
======================= */
@media print{
  body{ background:#fff !important; color:#000 !important; }
  #header,.mobile-nav-toggle,#hero,#about,#facts,#skills,#business-skills,
  #portfolio,#services,#testimonials,#contact,.elfsight-app-e552903a-f2fc-4a3b-91a6-42e1947c68a5{ display:none !important; }

  #resume{ display:block !important; }
  #footer{ display:block !important; } /* footer visible */

  #resume .glass-card,
  #resume .timeline-box,
  #resume .resume-stat,
  #resume .resume-pill,
  #resume .cert-item{
    background:#fff !important;
    border:1px solid #ddd !important;
    box-shadow:none !important;
    color:#000 !important;
  }
  #resume .btn{ display:none !important; }
  #resume .timeline::before{ background:#ddd !important; }
  #resume .timeline-dot{ background:#333 !important; box-shadow:none !important; }
}

/* =========================
   ✅ FIX: Office Address Clear Visibility
========================= */
.office-address{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);

  color: rgba(234,240,255,.95);   /* readable */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;

  backdrop-filter: blur(6px);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.office-address .label{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-weight: 800;
  color: rgba(234,240,255,.98);
}

.office-address .label i{
  color: var(--accent);
  font-size: 14px;
}

.office-address .text{
  margin-top: 4px;
  color: rgba(234,240,255,.88);
  font-weight: 650;
}

/* If address is missing */
.office-address.is-empty{
  opacity: .85;
}

/* =========================
   ✅ PORTFOLIO FIX (ALL SAME SIZE)
========================= */

#portfolio .portfolio-container{
  display: flex;
  flex-wrap: wrap;
}

/* ✅ Each bootstrap column becomes flex so inner card can stretch */
#portfolio .portfolio-item{
  display: flex;
}

/* ✅ Card full height inside column */
#portfolio .portfolio-card{
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
}

#portfolio .portfolio-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
}

/* ✅ SAME image size */
#portfolio .portfolio-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* ✅ best solution */
  overflow: hidden;
  background: rgba(255,255,255,.05);
}

#portfolio .portfolio-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
}

#portfolio .portfolio-card:hover .portfolio-media img{
  transform: scale(1.06);
}

/* overlay */
#portfolio .portfolio-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background: rgba(0,0,0,.45);
  opacity:0;
  transition: opacity .2s ease;
}

#portfolio .portfolio-card:hover .portfolio-overlay{
  opacity:1;
}

#portfolio .btn-icon{
  width:46px;
  height:46px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  text-decoration:none;
}

/* ✅ SAME text area height */
#portfolio .portfolio-info{
  flex: 1;                 /* ✅ makes all cards equal height */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 18px;
  min-height: 120px;
}

/* title clamp */
#portfolio .portfolio-title{
  margin:0;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* desc clamp */
#portfolio .portfolio-desc{
  margin:0;
  opacity:.85;
  line-height: 1.55;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ✅ Responsive */
@media (max-width: 575px){
  #portfolio .portfolio-media{
    aspect-ratio: 4 / 3;  /* ✅ mobile better */
  }
}