/*
Theme Name: Portfolio Theme-BD IT HOME
Theme URI: https://bdithome.com
Author: Development By BD IT HOME
Author URI: https://bdithome.com
Description: BD IT HOME branded portfolio theme starter using Redux Framework (Theme Options: License + General + Header).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bdithome
Tags: portfolio, custom-background, custom-logo, responsive-layout
*/

:root{
  --yourco-primary:#6366F1;
  --yourco-bg:#0B0F19;
  --yourco-text:#E5E7EB;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--yourco-bg);
  color: var(--yourco-text);
}
a{color:var(--yourco-primary); text-decoration:none}
a:hover{text-decoration:underline}

.site-header{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.container{
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}
.container.boxed{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 20px;
  margin-top: 18px;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
  gap:16px;
}
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:700;
  letter-spacing:.2px;
}
.menu{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-size: 14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--yourco-primary);
  color: white;
  border: 0;
}
.btn.secondary{
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
}

.hero{
  padding: 44px 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items:center;
}
.hero-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 18px;
}
.h1{
  margin:0 0 10px;
  font-size: clamp(30px, 4vw, 48px);
  line-height:1.06;
}
.p{
  margin:0 0 18px;
  opacity:.9;
  line-height:1.6;
}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.chip{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
}


/* Header styling from Theme Settings (Redux) */
.site-header{
  background: var(--bdithome-header-bg, #fff);
  border-bottom: 1px solid var(--bdithome-header-border, rgba(0,0,0,.08));
}
.menu{
  font-size: var(--bdithome-nav-font-size, 14px);
  font-weight: var(--bdithome-nav-font-weight, 600);
}
.menu a{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--bdithome-nav-color, #111827);
  text-decoration:none;
}
.menu a:hover{
  background: var(--bdithome-nav-hover-bg, #F3F4F6);
  color: var(--bdithome-nav-hover-color, #111827);
}
.menu .current-menu-item > a,
.menu .current_page_item > a{
  background: var(--bdithome-nav-active-bg, #E5E7EB);
  color: var(--bdithome-nav-active-color, #111827);
}

.btn{
  background: var(--bdithome-btn-bg, #1D4ED8);
  color: var(--bdithome-btn-color, #fff);
  border-radius: var(--bdithome-btn-radius, 8px);
}
.btn:hover{
  background: var(--bdithome-btn-hover-bg, #1E40AF);
  color: var(--bdithome-btn-hover-color, #fff);
  text-decoration:none;
}

/* =========================
   HEADER (BD IT HOME)
   Desktop + Mobile Hamburger
   ========================= */

/* Desktop nav layout */
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
}

.bd-brand-logo{ max-height:48px; width:auto; display:block; }
.bd-brand-text{ font-weight:700; color: inherit; text-decoration:none; }

/* Desktop menu */
.bd-nav-desktop{
  display:flex;
  align-items:center;
  gap:14px;
}

.bd-nav-desktop .menu{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}

/* Hamburger hidden on desktop */
.bd-nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
}

/* Hamburger icon lines */
.bd-nav-toggle-lines{
  width:26px;
  height:2px;
  background: currentColor;
  display:block;
  position:relative;
}
.bd-nav-toggle-lines::before,
.bd-nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0;
  width:26px;
  height:2px;
  background: currentColor;
}
.bd-nav-toggle-lines::before{ top:-8px; }
.bd-nav-toggle-lines::after{ top:8px; }

/* Mobile menu panel default */
.bd-nav-mobile{
  display:none; /* JS দিয়ে toggle হবে */
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.15);
  border-radius: 14px;
}

/* ✅ Show mobile menu when JS adds .is-open */
.bd-nav-mobile.is-open{
  display:block;
}

.bd-nav-mobile .bd-mobile-menu{
  list-style:none;
  padding:0;
  margin:0 0 12px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bd-nav-mobile .bd-mobile-menu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
}

/* Mobile button full width */
.bd-mobile-btn{
  width:100%;
  justify-content:center;
}

/* ✅ Mobile rules */
@media (max-width: 900px){

  /* Desktop menu hide */
  .bd-nav-desktop{ display:none; }

  /* Hamburger show */
  .bd-nav-toggle{ display:block; }

  /* Logo left, hamburger right already by flex */
}
















































/* =========================================================
   HERO SECTION CSS (BD IT HOME)
   - Hero + Circle + Glow ring + Orbit icons + Social SVG
   ========================================================= */

/* ✅ Hero wrapper */
.bd-hero{
  position: relative;
  overflow: hidden;
}

/* ✅ Section padding */
.bd-hero .container{
  padding: 70px 0;
}

/* ✅ Desktop grid */
.bd-hero-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}

/* ---------------- LEFT (TEXT) ---------------- */
.bd-hero-small{
  font-size: 12px;
  opacity: .8;
  margin-bottom: 10px;
}
.bd-hero-title{
  margin: 0 0 14px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

/* ✅ Typewriter cursor (Hero Title) */
.bd-typing-cursor{
  display: inline-block;
  margin-left: 2px;
  opacity: 1;
  animation: bdBlink 1s steps(2, start) infinite;
}
@keyframes bdBlink{
  0%,49%{ opacity: 1; }
  50%,100%{ opacity: 0; }
}
.bd-hero-desc{
  opacity: .9;
  line-height: 1.7;
  max-width: 520px;
}
.bd-hero-actions{
  display: flex;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Buttons */
.bd-btn-primary,
.bd-btn-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  gap: 8px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  will-change: transform;
}
.bd-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.bd-btn-outline{
  border: 1px solid currentColor;
  background: transparent;
}
.bd-btn-outline:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.20);
}

/* ---------------- RIGHT (CIRCLE AREA) ---------------- */
.bd-hero-right{
  position: relative;
  min-height: 360px;
  padding-right: 90px; /* সোশ্যালের জায়গা */
}

/* ✅ Circle wrapper */
.bd-hero-circle{
  position: relative;
  width: min(300px, 72vw);
  height: min(300px, 72vw);
  border-radius: 999px;
  border: 3px solid rgba(59,130,246,.22);
  padding: 10px;
  background: rgba(255,255,255,.04);
  transform: translateX(20px);
  overflow: visible;
}

/* ✅ Circle inner image wrapper */
.bd-hero-circle-inner{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.bd-hero-circle-inner img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: contain;
  transform-origin: center;
}
.bd-hero-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  opacity: .75;
}

/* ---------------- GLOW RING (Stable) ---------------- */
.bd-hero-circle::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  background: conic-gradient(
    from 0deg,
    rgba(59,130,246,0),
    rgba(59,130,246,.95),
    rgba(59,130,246,0)
  );
  animation: bdithomeSpin 6s linear infinite;
  z-index: 1;
  filter: saturate(1.05);
}

/* ভিতরের অংশ কাট-আউট (Donut effect) */
.bd-hero-circle::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: rgba(5,8,20,1);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  z-index: 2;
}

@keyframes bdithomeSpin{ to{ transform: rotate(360deg); } }

/* ---------------- ORBIT ICONS ---------------- */
.bd-hero-orbit{
  position: absolute;
  inset: -36px;                 /* সার্কেল থেকে দূরত্ব */
  border-radius: 999px;
  animation: bdOrbitSpin 10s linear infinite;
  pointer-events: none;
  z-index: 7;
}

/* Orbit icon bubble */
.bd-orbit-icon{
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  animation: bdOrbitUnspin 10s linear infinite;
  transform: translateZ(0);
}

/* Icon glyph placeholder (আপনি চাইলে পরে SVG দেবেন) */
.bd-orbit-icon::before{
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}

/* ৪টা আইকন position */
.bd-i1{ top: 0; left: 50%; transform: translate(-50%, -50%); }
.bd-i2{ top: 50%; right: 0; transform: translate(50%, -50%); }
.bd-i3{ bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.bd-i4{ top: 50%; left: 0; transform: translate(-50%, -50%); }

/* Placeholder icons */
.bd-i1::before{ content: "🌐"; } /* Web */
.bd-i2::before{ content: "🎬"; } /* Video */
.bd-i3::before{ content: "🎙️"; } /* Vocal */
.bd-i4::before{ content: "💻"; } /* Code */

@keyframes bdOrbitSpin{ to{ transform: rotate(360deg); } }
@keyframes bdOrbitUnspin{ to{ transform: rotate(-360deg); } }

/* ---------------- SOCIAL (SVG ICONS) ---------------- */
.bd-hero-social{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  z-index: 10;
}

.bd-hero-follow{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: .75;
  margin-bottom: 6px;
  letter-spacing: .6px;
}

/* ✅ Social link bubble */
.bd-social-link{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: inherit;
  text-decoration: none;

  /* Animation feel */
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  will-change: transform;
}

/* ✅ Icon wrapper */
.bd-social-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Hover animation: lift + glow */
.bd-social-link:hover{
  transform: translateY(-3px) scale(1.06);
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  filter: drop-shadow(0 10px 22px rgba(59,130,246,.22));
}

/* ✅ Click animation */
.bd-social-link:active{
  transform: translateY(-1px) scale(0.98);
}

/* ✅ Soft pulse (always) */
.bd-social-link{
  animation: bdSocialPulse 2.6s ease-in-out infinite;
}
.bd-hero-social .bd-social-link:nth-child(2){ animation-delay: .00s; } /* fb */
.bd-hero-social .bd-social-link:nth-child(3){ animation-delay: .18s; } /* ig */
.bd-hero-social .bd-social-link:nth-child(4){ animation-delay: .36s; } /* in */

@keyframes bdSocialPulse{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.03); }
}

/* ---------------- MOBILE FIX ---------------- */
@media (max-width: 900px){

  .bd-hero-grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Text সবসময় উপরে */
  .bd-hero-left{
    position: relative;
    z-index: 20;
  }

  /* Right block নিচে + center */
  .bd-hero-right{
    min-height: auto;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;        /* circle আর social এর দূরত্ব */
    margin-top: 14px; /* button থেকে নিচে */
  }

  /* Circle ছোট + center */
  .bd-hero-circle{
    width: min(240px, 78vw);
    height: min(240px, 78vw);
    transform: none;
    margin: 0 auto;
  }

  /* Orbit আরও কাছে + icon ছোট (overlap বন্ধ) */
  .bd-hero-orbit{ inset: -18px; }
  .bd-orbit-icon{ width: 34px; height: 34px; }
  .bd-orbit-icon::before{ font-size: 25px; }

  /* Social row হবে */
  .bd-hero-social{
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .bd-hero-follow{
    writing-mode: initial;
    transform: none;
    margin: 0 10px 0 0;
  }

  /* Mobile এ pulse একটু কম */
  .bd-social-link{
    animation-duration: 3.2s;
  }
}

/* ✅ যারা animation পছন্দ করে না তাদের জন্য */
@media (prefers-reduced-motion: reduce){
  .bd-hero-circle::before,
  .bd-hero-orbit,
  .bd-orbit-icon,
  .bd-social-link{
    animation: none !important;
  }
}









































/* =========================
   ABOUT SECTION (BD IT HOME)
   ছবির মতো layout
   ========================= */

/* Scroll reveal helpers
   NOTE: Previously we kept these elements at opacity:0 until JS added .is-inview.
   If any optimizer/plugin blocks inline JS, titles could become invisible.
   Now the text is ALWAYS visible, and the slide-in animation runs when .is-inview is added.
*/
.bd-anim-left,
.bd-anim-right,
.bd-anim-line{
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}

.is-inview.bd-anim-left{ animation: bdSlideInLeft .22s ease both; }
.is-inview.bd-anim-right{ animation: bdSlideInRight .22s ease both; }
.is-inview.bd-anim-line{ animation: bdSlideInLine .22s ease both; }

@keyframes bdSlideInLeft{
  from{ opacity: 0; transform: translateX(-32px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes bdSlideInRight{
  from{ opacity: 0; transform: translateX(32px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes bdSlideInLine{
  from{ opacity: 0; transform: translateY(-10px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Underline animation */
.bd-underline{
  position: relative;
  display: inline-block;
}
.bd-underline::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  height: 2px;
  width: 0;
  border-radius: 999px;
  transition: width .22s ease;
}
.bd-underline-top::after{ background: var(--bd-about-top-underline-color); }
.bd-underline-about::after{ background: var(--bd-about-h2-underline-color); }
.is-inview.bd-underline-top::after{ width: var(--bd-about-top-underline-width); }
.is-inview.bd-underline-about::after{ width: var(--bd-about-h2-underline-width); }

.bd-about{
  padding: 64px 0;
}

.bd-about-wrap{
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.bd-about-top-title{
  color: var(--bd-about-top-color);
  font-size: var(--bd-about-top-size);
  font-weight: var(--bd-about-top-weight);
  font-family: var(--bd-about-top-font);
  letter-spacing: .3px;
  margin-bottom: var(--bd-about-top-spacing);
}

.bd-about-bubbles{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 22px;
}

.bd-about-bubble{
  position: relative;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 10px;
  line-height: 1.2;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

.bd-about-bubble span{ position: relative; z-index: 2; }

/* Rotating border ring */
.bd-about-bubble::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    rgba(0,0,0,0) 0 18%,
    var(--bd-bubble-border) 18% 32%,
    rgba(0,0,0,0) 32% 56%,
    var(--bd-bubble-border) 56% 70%,
    rgba(0,0,0,0) 70% 100%
  );
  animation: bdAboutBubbleSpin 1.35s linear infinite;
  z-index: 1;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
}

@keyframes bdAboutBubbleSpin{ to{ transform: rotate(360deg); } }

/* Bubble per-item vars */
.bd-about-b1{
  background: var(--bd-about-b1-bg);
  color: var(--bd-about-b1-text);
  font-family: var(--bd-about-b1-font);
  font-size: var(--bd-about-b1-size);
  font-weight: var(--bd-about-b1-weight);
  --bd-bubble-border: var(--bd-about-b1-border);
}
.bd-about-b2{
  background: var(--bd-about-b2-bg);
  color: var(--bd-about-b2-text);
  font-family: var(--bd-about-b2-font);
  font-size: var(--bd-about-b2-size);
  font-weight: var(--bd-about-b2-weight);
  --bd-bubble-border: var(--bd-about-b2-border);
}
.bd-about-b3{
  background: var(--bd-about-b3-bg);
  color: var(--bd-about-b3-text);
  font-family: var(--bd-about-b3-font);
  font-size: var(--bd-about-b3-size);
  font-weight: var(--bd-about-b3-weight);
  --bd-bubble-border: var(--bd-about-b3-border);
}

.bd-about-divider{
  width: var(--bd-about-divider-thickness);
  height: var(--bd-about-divider-height);
  margin: 18px auto 14px;
  background: var(--bd-about-divider-color);
  position: relative;
  overflow: hidden;
}

/* Animated highlight inside divider */
.bd-about-divider::before{
  content:"";
  position:absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0),
    var(--bd-about-divider-anim-color),
    rgba(0,0,0,0)
  );
  animation: bdAboutDividerMove 1.4s linear infinite;
  opacity: .85;
}

@keyframes bdAboutDividerMove{
  to{ transform: translateY(240%); }
}

.bd-about-title{
  margin-top: 2px;
  color: var(--bd-about-h2-color);
  font-size: var(--bd-about-h2-size);
  font-weight: var(--bd-about-h2-weight);
  font-family: var(--bd-about-h2-font);
}

.bd-about-text{
  color: var(--bd-about-para-color);
  font-size: var(--bd-about-para-size);
  font-weight: var(--bd-about-para-weight);
  font-family: var(--bd-about-para-font);
  line-height: var(--bd-about-para-lineheight);
  margin: 0 auto 18px;
  max-width: 460px;
}

.bd-about-media{
  margin: 14px auto 10px;
}

.bd-about-media img,
.bd-about-media video{
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

/* Read More নিচে line সহ */
.bd-about-readmore{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 10px;
}

.bd-about-readmore i{
  display:block;
  width: 120px;
  height: 1px;
  background: currentColor;
  opacity: .35;
}

/* ✅ Mobile */
@media (max-width: 600px){
  .bd-about{ padding: 52px 0; }
  .bd-about-wrap{ max-width: 92%; }
  .bd-about-bubbles{ flex-wrap: wrap; }
}





















































/* ===== Start Count Section (CSS) ===== */
.bd-counting{
  width: 100%;
}

.bd-count-grid{
  display: grid;
  grid-template-columns: repeat(var(--bd-count-cols-mobile, 2), minmax(0, 1fr));
  gap: var(--bd-count-gap, 32px);
  justify-items: center;
  align-items: start;
}

@media (min-width: 768px){
  .bd-count-grid{
    grid-template-columns: repeat(var(--bd-count-cols-desktop, 4), minmax(0, 1fr));
  }
}

.bd-count-item{
  text-align: center;
}

.bd-count-circle{
  width: var(--bd-count-circle, 92px);
  height: var(--bd-count-circle, 92px);
  border-radius: 999px;
  background: var(--bd-circle-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.bd-count-num{
  color: var(--bd-num-color, #111827);
  font-size: var(--bd-num-size, 26px);
  font-weight: var(--bd-num-weight, 700);
  font-family: var(--bd-num-font, 'Poppins', sans-serif);
  line-height: 1;
}

.bd-count-label{
  margin-top: 10px;
  color: var(--bd-label-color, #111827);
  font-size: var(--bd-label-size, 11px);
  font-weight: var(--bd-label-weight, 700);
  font-family: var(--bd-label-font, 'Poppins', sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* ===== End Count Section (CSS) ===== */
















































/* ===== Start My Project Section (CSS - FINAL UPDATED FULL) ===== */

.bd-myproj{
  position: relative;
  padding: 70px 0;
  background: var(--bd-myproj-bg, #0b1220);
  overflow: hidden;
}

.bd-myproj-bg{
  position:absolute; inset:0;
  background-image: var(--bd-myproj-bgimg);
  background-size: cover;
  background-position: center;
  background-attachment: var(--bd-myproj-bgattach, fixed);
  opacity: var(--bd-myproj-bgop, 0.2);
  pointer-events:none;
  transform: scale(1.05);
}

.bd-myproj .container,
.bd-myproj [class*="container"]{
  position: relative;
  z-index: 2;
}

/* Left vertical label */
.bd-myproj-side{
  position:absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.bd-myproj-side span{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  padding: 18px 10px;
  background: var(--bd-myproj-side-bg);
  color: var(--bd-myproj-side-color);
  border-radius: var(--bd-myproj-side-radius);
  font-family: var(--bd-myproj-side-font);
  font-weight: var(--bd-myproj-side-weight);
  font-size: var(--bd-myproj-side-size);
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media (max-width: 991px){
  .bd-myproj-side{ display:none; }
}

/* Tabs */
.bd-myproj-tabs{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom: 28px;
}

.bd-myproj-tab{
  position: relative;
  border: 0;
  background: var(--bd-myproj-tab-bg);
  color: var(--bd-myproj-tab-color);
  padding: 12px 26px;
  border-radius: var(--bd-myproj-tab-radius);
  font-family: var(--bd-myproj-tab-font);
  font-weight: var(--bd-myproj-tab-weight);
  font-size: var(--bd-myproj-tab-size);
  cursor:pointer;
  overflow:hidden;
  transition: transform .2s ease;
}

/* hover overlay */
.bd-myproj-tab::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bd-myproj-tab-hover-bg);
  transform: translateX(-105%);
  transition: transform .35s ease;
  z-index:0;
}

/* ✅ ensure text stays above overlay */
.bd-myproj-tab span{
  position: relative;
  z-index: 1;
}

.bd-myproj-tab:hover::before{ transform: translateX(0); }
.bd-myproj-tab:hover{ transform: translateY(-1px); }

.bd-myproj-tab.is-active{
  background: var(--bd-myproj-tab-active-bg);
  color: #062014;
}
.bd-myproj-tab.is-active::before{ display:none; }

/* Grid */
.bd-myproj-grid{
  display:grid;
  grid-template-columns: repeat(var(--bd-myproj-cols-m, 1), minmax(0,1fr));
  gap: 22px;
}
@media (min-width: 768px){
  .bd-myproj-grid{ grid-template-columns: repeat(var(--bd-myproj-cols-t, 3), minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .bd-myproj-grid{ grid-template-columns: repeat(var(--bd-myproj-cols-d, 4), minmax(0,1fr)); }
}

/* Card */
.bd-myproj-card{
  background: var(--bd-myproj-card-bg);
  border-radius: var(--bd-myproj-card-radius);
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bd-myproj-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,.35);
}
.bd-myproj-card.is-hidden{ display:none; }

.bd-myproj-title{
  margin: 14px 0 12px;
  color: #eaf1ff;
  font-size: 16px;
  font-weight: 600;
}

/* ✅ Button FIX: center + gap from card content */
.bd-myproj-btn{
  display:flex;              /* important */
  width: max-content;        /* width fits text */
  align-items:center;
  justify-content:center;

  padding: 10px 16px;
  text-decoration:none;
  background: var(--bd-myproj-btn-bg);
  color: var(--bd-myproj-btn-color);
  border-radius: var(--bd-myproj-btn-radius);
  font-family: var(--bd-myproj-btn-font);
  font-weight: var(--bd-myproj-btn-weight);
  font-size: var(--bd-myproj-btn-size);
  transition: transform .2s ease;

  margin: 16px auto 0;       /* ✅ center + space */
}

.bd-myproj-btn:hover{ transform: translateY(-1px); }

.bd-myproj-btn.is-disabled{
  display:flex;
  opacity: .55;
  cursor: not-allowed;
}

/* Screenshot wrapper */
.bd-myproj-shot{
  position: relative;
  border-radius: 14px;
  padding: var(--bd-myproj-border-w, 4px);
  overflow: hidden; /* keep border clean */
}

/* Static border */
.bd-border-static{
  background: var(--bd-myproj-border-color);
}

/* ===== Start My Project Section (Animated border FIX - only border moves) ===== */
.bd-border-anim{
  position: relative;
  background: transparent; /* wrapper won't rotate */
}

.bd-border-anim::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  background: conic-gradient(
    from 0deg,
    var(--bd-myproj-border-color),
    var(--bd-myproj-border-anim),
    var(--bd-myproj-border-color)
  );
  animation: bdBorderSpin 2.2s linear infinite;
  z-index: 0;
}

.bd-border-anim .bd-myproj-shot-inner{
  position: relative;
  z-index: 1;
}

@keyframes bdBorderSpin{
  to{ transform: rotate(1turn); }
}
/* ===== End My Project Section (Animated border FIX) ===== */

/* Screenshot inner */
.bd-myproj-shot-inner{
  overflow:hidden;
  border-radius: 12px;
  background: #0b1220;
  height: 360px;
}

/* Screenshot hover scroll */
.bd-myproj-shot-inner img{
  width:100%;
  display:block;
  transform: translateY(0);
  transition: transform var(--bd-myproj-scroll-ms, 1600ms) ease;
}

.bd-myproj-shot-inner:hover img{
  transform: translateY(var(--bd-myproj-img-shift, -60%));
}

.bd-myproj-shot-placeholder{
  height: 360px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9fb2d6;
  font-size: 14px;
  border-radius: 12px;
}

/* More button */
.bd-myproj-morewrap{
  display:flex;
  justify-content:center;
  margin-top: 26px;
}

.bd-myproj-more{
  border:0;
  background: var(--bd-myproj-tab-bg);
  color: var(--bd-myproj-tab-color);
  padding: 12px 22px;
  border-radius: var(--bd-myproj-tab-radius);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.bd-myproj-more::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bd-myproj-tab-hover-bg);
  transform: translateX(-105%);
  transition: transform .35s ease;
  z-index: 0;
}

.bd-myproj-more span{
  position: relative;
  z-index: 1;
}

.bd-myproj-more:hover::before{ transform: translateX(0); }

.bd-myproj-more[hidden]{ display:none !important; }

/* ===== End My Project Section (CSS - FINAL UPDATED FULL) ===== */





/* ===== Start My Graphics Section (CSS) ===== */

.bd-mygfx{
  position: relative;
  padding: 70px 0;
  background: var(--bd-mygfx-bg, #0b1220);
  overflow: hidden;
}

.bd-mygfx-bg{
  position:absolute; inset:0;
  background-image: var(--bd-mygfx-bgimg);
  background-size: cover;
  background-position: center;
  background-attachment: var(--bd-mygfx-bgattach, fixed);
  opacity: var(--bd-mygfx-bgop, 0.2);
  pointer-events:none;
  transform: scale(1.05);
}

.bd-mygfx .container,
.bd-mygfx [class*="container"]{
  position: relative;
  z-index: 2;
}

/* Left vertical label */
.bd-mygfx-side{
  position:absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.bd-mygfx-side span{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  padding: 18px 10px;
  background: var(--bd-mygfx-side-bg);
  color: var(--bd-mygfx-side-color);
  border-radius: var(--bd-mygfx-side-radius);
  font-family: var(--bd-mygfx-side-font);
  font-weight: var(--bd-mygfx-side-weight);
  font-size: var(--bd-mygfx-side-size);
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media (max-width: 991px){
  .bd-mygfx-side{ display:none; }
}

/* Tabs */
.bd-mygfx-tabs{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom: 28px;
}

.bd-mygfx-tab{
  position: relative;
  border: 0;
  background: var(--bd-mygfx-tab-bg);
  color: var(--bd-mygfx-tab-color);
  padding: 12px 26px;
  border-radius: var(--bd-mygfx-tab-radius);
  font-family: var(--bd-mygfx-tab-font);
  font-weight: var(--bd-mygfx-tab-weight);
  font-size: var(--bd-mygfx-tab-size);
  cursor:pointer;
  overflow:hidden;
  transition: transform .2s ease;
}

.bd-mygfx-tab::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bd-mygfx-tab-hover-bg);
  transform: translateX(-105%);
  transition: transform .35s ease;
  z-index:0;
}

.bd-mygfx-tab span{ position:relative; z-index:1; }

.bd-mygfx-tab:hover::before{ transform: translateX(0); }
.bd-mygfx-tab:hover{ transform: translateY(-1px); }

.bd-mygfx-tab.is-active{
  background: var(--bd-mygfx-tab-active-bg);
  color: #062014;
}
.bd-mygfx-tab.is-active::before{ display:none; }

/* Grid */
.bd-mygfx-grid{
  display:grid;
  grid-template-columns: repeat(var(--bd-mygfx-cols-m, 1), minmax(0,1fr));
  gap: 22px;
}
@media (min-width: 768px){
  .bd-mygfx-grid{ grid-template-columns: repeat(var(--bd-mygfx-cols-t, 3), minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .bd-mygfx-grid{ grid-template-columns: repeat(var(--bd-mygfx-cols-d, 4), minmax(0,1fr)); }
}

/* Card */
.bd-mygfx-card{
  background: var(--bd-mygfx-card-bg);
  border-radius: var(--bd-mygfx-card-radius);
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bd-mygfx-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,.35);
}
.bd-mygfx-card.is-hidden{ display:none; }

.bd-mygfx-title{
  margin: 14px 0 12px;
  color: #eaf1ff;
  font-size: 16px;
  font-weight: 600;
}

.bd-mygfx-btn{
  display:flex;
  width: max-content;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  text-decoration:none;
  border: 0;
  cursor: pointer;
  background: var(--bd-mygfx-btn-bg);
  color: var(--bd-mygfx-btn-color);
  border-radius: var(--bd-mygfx-btn-radius);
  font-family: var(--bd-mygfx-btn-font);
  font-weight: var(--bd-mygfx-btn-weight);
  font-size: var(--bd-mygfx-btn-size);
  transition: transform .2s ease;
  margin: 16px auto 0;
}

.bd-mygfx-btn:hover{ transform: translateY(-1px); }

/* Thumbnail wrapper */
.bd-mygfx-shot{
  position: relative;
  border-radius: 14px;
  padding: var(--bd-mygfx-border-w, 4px);
  overflow: hidden;
}

.bd-gfx-border-static{
  background: var(--bd-mygfx-border-color);
}

.bd-gfx-border-anim{
  position: relative;
  background: transparent;
}

.bd-gfx-border-anim::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  background: conic-gradient(
    from 0deg,
    var(--bd-mygfx-border-color),
    var(--bd-mygfx-border-anim),
    var(--bd-mygfx-border-color)
  );
  animation: bdBorderSpin 2.2s linear infinite;
  z-index: 0;
}

.bd-gfx-border-anim .bd-mygfx-shot-inner{ position:relative; z-index:1; }

.bd-mygfx-shot-inner{
  overflow:hidden;
  border-radius: 12px;
  background: #0b1220;
  height: var(--bd-mygfx-thumb-h, 360px);
}

/* ✅ Graphics thumbnail: NO scroll animation */
.bd-mygfx-shot-inner img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: none !important;
  transition: none !important;
}

.bd-mygfx-shot-placeholder{
  height: var(--bd-mygfx-thumb-h, 360px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9fb2d6;
  font-size: 14px;
  border-radius: 12px;
}

/* More button */
.bd-mygfx-morewrap{
  display:flex;
  justify-content:center;
  margin-top: 26px;
}

.bd-mygfx-more{
  border:0;
  background: var(--bd-mygfx-tab-bg);
  color: var(--bd-mygfx-tab-color);
  padding: 12px 22px;
  border-radius: var(--bd-mygfx-tab-radius);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.bd-mygfx-more::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bd-mygfx-tab-hover-bg);
  transform: translateX(-105%);
  transition: transform .35s ease;
  z-index: 0;
}

.bd-mygfx-more span{ position:relative; z-index:1; }
.bd-mygfx-more:hover::before{ transform: translateX(0); }
.bd-mygfx-more[hidden]{ display:none !important; }

/* Lightbox (Gallery) */
.bd-mygfx-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.bd-mygfx-lightbox.is-open{ display:flex; }

.bd-mygfx-lightbox__inner{
  position: relative;
  max-width: min(1100px, 94vw);
  max-height: 90vh;
}

.bd-mygfx-lightbox__img{
  width: 100%;
  height: auto;
  max-height: 86vh;
  display: block;
  border-radius: 14px;
}

.bd-mygfx-lightbox__close,
.bd-mygfx-lightbox__prev,
.bd-mygfx-lightbox__next{
  position: absolute;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.14);
  color: #fff;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.bd-mygfx-lightbox__close{ top: -14px; right: -14px; }
.bd-mygfx-lightbox__prev{ left: -18px; top: 50%; transform: translateY(-50%); }
.bd-mygfx-lightbox__next{ right: -18px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px){
  .bd-mygfx-lightbox__prev{ left: 6px; }
  .bd-mygfx-lightbox__next{ right: 6px; }
  .bd-mygfx-lightbox__close{ top: 6px; right: 6px; }
}

.bd-mygfx-lightbox__count{
  position:absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.45);
  color:#fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

/* ===== End My Graphics Section (CSS) ===== */



/* ===== Start My Video Section (CSS) ===== */

.bd-myvid{
  position: relative;
  padding: 70px 0;
  background: var(--bd-myvid-bg, #0b1220);
  overflow: hidden;
}

.bd-myvid-bg{
  position:absolute; inset:0;
  background-image: var(--bd-myvid-bgimg);
  background-size: cover;
  background-position: center;
  background-attachment: var(--bd-myvid-bgattach, fixed);
  opacity: var(--bd-myvid-bgop, 0.2);
  pointer-events:none;
  transform: scale(1.05);
}

.bd-myvid .container,
.bd-myvid [class*="container"]{
  position: relative;
  z-index: 2;
}

/* Left vertical label */
.bd-myvid-side{
  position:absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.bd-myvid-side span{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  padding: 18px 10px;
  background: var(--bd-myvid-side-bg);
  color: var(--bd-myvid-side-color);
  border-radius: var(--bd-myvid-side-radius);
  font-family: var(--bd-myvid-side-font);
  font-weight: var(--bd-myvid-side-weight);
  font-size: var(--bd-myvid-side-size);
  letter-spacing: .1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media (max-width: 991px){
  .bd-myvid-side{ display:none; }
}

/* Tabs */
.bd-myvid-tabs{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom: 28px;
}

.bd-myvid-tab{
  position: relative;
  border: 0;
  background: var(--bd-myvid-tab-bg);
  color: var(--bd-myvid-tab-color);
  padding: 12px 26px;
  border-radius: var(--bd-myvid-tab-radius);
  font-family: var(--bd-myvid-tab-font);
  font-weight: var(--bd-myvid-tab-weight);
  font-size: var(--bd-myvid-tab-size);
  cursor:pointer;
  overflow:hidden;
  transition: transform .2s ease;
}

.bd-myvid-tab::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bd-myvid-tab-hover-bg);
  transform: translateX(-105%);
  transition: transform .35s ease;
  z-index:0;
}

.bd-myvid-tab span{ position:relative; z-index:1; }

.bd-myvid-tab:hover::before{ transform: translateX(0); }
.bd-myvid-tab:hover{ transform: translateY(-1px); }

.bd-myvid-tab.is-active{
  background: var(--bd-myvid-tab-active-bg);
  color: #062014;
}
.bd-myvid-tab.is-active::before{ display:none; }

/* Grid */
.bd-myvid-grid{
  display:grid;
  grid-template-columns: repeat(var(--bd-myvid-cols-m, 1), minmax(0,1fr));
  gap: 22px;
}
@media (min-width: 768px){
  .bd-myvid-grid{ grid-template-columns: repeat(var(--bd-myvid-cols-t, 3), minmax(0,1fr)); }
}
@media (min-width: 1200px){
  .bd-myvid-grid{ grid-template-columns: repeat(var(--bd-myvid-cols-d, 4), minmax(0,1fr)); }
}

/* Card */
.bd-myvid-card{
  background: var(--bd-myvid-card-bg);
  border-radius: var(--bd-myvid-card-radius);
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bd-myvid-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,.35);
}
.bd-myvid-card.is-hidden{ display:none; }

.bd-myvid-title{
  margin: 14px 0 12px;
  color: #eaf1ff;
  font-size: 16px;
  font-weight: 600;
}

.bd-myvid-btn{
  display:flex;
  width: max-content;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  text-decoration:none;
  border: 0;
  cursor: pointer;
  background: var(--bd-myvid-btn-bg);
  color: var(--bd-myvid-btn-color);
  border-radius: var(--bd-myvid-btn-radius);
  font-family: var(--bd-myvid-btn-font);
  font-weight: var(--bd-myvid-btn-weight);
  font-size: var(--bd-myvid-btn-size);
  transition: transform .2s ease, opacity .2s ease;
  margin: 16px auto 0;
}
.bd-myvid-btn:hover{ transform: translateY(-1px); }
.bd-myvid-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.bd-myvid-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.68);
  text-align:center;
}

/* Thumbnail wrapper (Square 1080x1080 feel = 1:1 ratio) */
.bd-myvid-shot{
  position: relative;
  border-radius: 14px;
  padding: var(--bd-myvid-border-w, 4px);
  overflow: hidden;
}

.bd-vid-border-static{
  background: var(--bd-myvid-border-color);
}

.bd-vid-border-anim{
  position: relative;
  background: transparent;
}

.bd-vid-border-anim::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  background: conic-gradient(
    from 0deg,
    var(--bd-myvid-border-color),
    var(--bd-myvid-border-anim),
    var(--bd-myvid-border-color)
  );
  animation: bdBorderSpin 2.2s linear infinite;
  z-index: 0;
}

.bd-vid-border-anim .bd-myvid-shot-inner{ position:relative; z-index:1; }

.bd-myvid-shot-inner{
  overflow:hidden;
  border-radius: 12px;
  background: #0b1220;
  aspect-ratio: 1 / 1; /* ✅ Square frame */
}

.bd-myvid-shot-inner img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Placeholder */
.bd-myvid-shot-placeholder{
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9fb2d6;
  font-size: 14px;
  border-radius: 12px;
}

/* More button */
.bd-myvid-morewrap{
  display:flex;
  justify-content:center;
  margin-top: 26px;
}

.bd-myvid-more{
  border:0;
  background: var(--bd-myvid-tab-bg);
  color: var(--bd-myvid-tab-color);
  padding: 12px 22px;
  border-radius: var(--bd-myvid-tab-radius);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.bd-myvid-more::before{
  content:"";
  position:absolute; inset:0;
  background: var(--bd-myvid-tab-hover-bg);
  transform: translateX(-105%);
  transition: transform .35s ease;
  z-index: 0;
}

.bd-myvid-more span{ position:relative; z-index:1; }
.bd-myvid-more:hover::before{ transform: translateX(0); }
.bd-myvid-more[hidden]{ display:none !important; }

/* Video Modal */
.bd-myvid-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.bd-myvid-modal.is-open{ display:flex; }

.bd-myvid-modal__inner{
  position: relative;
  width: min(1100px, 94vw);
  max-height: 90vh;
}

.bd-myvid-modal__title{
  color: rgba(255,255,255,.85);
  font-size: 14px;
  margin: 0 0 10px;
  text-align: center;
}

.bd-myvid-modal__player{
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  max-height: 86vh;
  aspect-ratio: 16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bd-myvid-html5,
.bd-myvid-iframe{
  width: 100%;
  height: 100%;
  display:block;
  border: 0;
}

.bd-myvid-modal__close{
  position: absolute;
  top: -14px;
  right: -14px;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.14);
  color: #fff;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  line-height: 1;
  backdrop-filter: blur(8px);
}

@media (max-width: 600px){
  .bd-myvid-modal__close{ top: 6px; right: 6px; }
  .bd-myvid-modal__player{ aspect-ratio: 1 / 1; } /* mobile: more square feel */
}

/* ===== End My Video Section (CSS) ===== */
















































/* ===== Start Footer Section (CSS - FULL UPDATED) ===== */
.bd-footer{
  background: var(--bd-footer-bg);
  padding: 52px 0;
}

.bd-footer-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 28px;
}

.bd-footer-left{
  max-width: 520px;
}

.bd-footer-title{
  margin:0 0 10px;
  color: var(--bd-footer-title-color);
  font-family: var(--bd-footer-title-font);
  font-weight: var(--bd-footer-title-weight);
  font-size: var(--bd-footer-title-size);
  line-height: 1.15;
}

.bd-footer-desc{
  color: var(--bd-footer-desc-color);
  font-family: var(--bd-footer-desc-font);
  font-weight: var(--bd-footer-desc-weight);
  font-size: var(--bd-footer-desc-size);
  line-height: 1.6;
  margin-bottom: 14px;
}

.bd-footer-social{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bd-footer-social-item{
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--bd-footer-social-bg);
  border-radius: var(--bd-footer-social-radius);
  text-decoration:none;
  transition: transform .2s ease;
}

.bd-footer-social-item img{
  width: 16px;
  height: 16px;
  object-fit: contain;
  display:block;
}

/* Right boxes */
.bd-footer-right{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:flex-end;
}

.bd-footer-box{
  min-width: 210px;
  height: 86px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  text-decoration:none;
  background: var(--bd-footer-box-bg);
  color: var(--bd-footer-box-color);
  border-radius: var(--bd-footer-box-radius);
  font-family: var(--bd-footer-box-font);
  font-weight: var(--bd-footer-box-weight);
  font-size: var(--bd-footer-box-size);

  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .2s ease;
}

.bd-footer-box-ico{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display:block;
}

/* ===== Icon hover shake ===== */
@keyframes bdIconShake {
  0%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-2px) rotate(-6deg); }
  50%{ transform: translateY(-3px) rotate(6deg); }
  75%{ transform: translateY(-2px) rotate(-4deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

.bd-footer-social-item:hover{
  animation: bdIconShake .35s ease-in-out;
}

.bd-footer-box:hover{
  transform: translateY(-4px);
}

.bd-footer-box:hover .bd-footer-box-ico{
  animation: bdIconShake .35s ease-in-out;
}

/* ===== Mobile center ===== */
@media (max-width: 991px){
  .bd-footer-wrap{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bd-footer-left{
    max-width: 100%;
  }

  .bd-footer-social{
    justify-content: center;
  }

  .bd-footer-right{
    width:100%;
    justify-content:center;
    flex-wrap: wrap;
  }

  .bd-footer-box{
    min-width: 240px;
  }
}
/* ===== End Footer Section (CSS - FULL UPDATED) ===== */

















































/* ===== Start Photo Gallery Section (CSS) ===== */
.bd-photo-gallery{
  position: relative;
  padding: 70px 0;
  background: var(--bd-pg-bg, #2d2d2d);
  overflow: hidden;
}

.bd-photo-gallery__bg{
  position:absolute; inset:0;
  background-image: var(--bd-pg-bgimg);
  background-size: cover;
  background-position: center;
  opacity: var(--bd-pg-bgop, .35);
  pointer-events:none;
  transform: scale(1.03);
}

.bd-photo-gallery .container,
.bd-photo-gallery [class*="container"]{
  position: relative;
  z-index: 2;
}

.bd-pg-head{
  text-align:center;
  margin-bottom: 32px;
}
.bd-pg-title{
  margin: 0 0 10px;
  color: var(--bd-pg-title-color);
  font-size: var(--bd-pg-title-size);
  font-weight: var(--bd-pg-title-weight);
  font-family: var(--bd-pg-title-font);
  line-height: 1.1;
}
.bd-pg-sub{
  margin: 0;
  color: var(--bd-pg-sub-color);
  font-size: var(--bd-pg-sub-size);
  font-weight: var(--bd-pg-sub-weight);
  font-family: var(--bd-pg-sub-font);
}

/* ===== Start Photo Gallery Section (Responsive Grid) ===== */
.bd-pg-grid{
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(var(--bd-pg-cols-m, 1), minmax(0, 1fr));
}

@media (min-width: 768px){
  .bd-pg-grid{
    grid-template-columns: repeat(var(--bd-pg-cols-t, 2), minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .bd-pg-grid{
    grid-template-columns: repeat(var(--bd-pg-cols-d, 3), minmax(0, 1fr));
  }
}
/* ===== End Photo Gallery Section (Responsive Grid) ===== */


/* Frame look (not simple border) */
.bd-pg-frame{
  position: relative;
  border-radius: var(--bd-pg-frame-radius);
  padding: var(--bd-pg-frame-w);
  background: var(--bd-pg-frame-color);
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bd-pg-frame:hover{
  transform: translateY(-6px);
  box-shadow:
    0 26px 60px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(0,0,0,.06);
}

/* inner mat */
.bd-pg-mat{
  border-radius: calc(var(--bd-pg-frame-radius) - 2px);
  background: rgba(255,255,255,.92);
  padding: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    inset 0 10px 18px rgba(0,0,0,.10);
}

/* image */
.bd-pg-img{
  display:block;
  width:100%;
  height: 210px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

@media (min-width: 992px){
  .bd-pg-img{ height: 230px; }
}
/* ===== Start Photo Gallery Section (Zoom + Glass + Fade + Lightbox) ===== */

/* image cut/no-cut + zoom */
.bd-pg-img{
  height: 210px;
  object-fit: var(--bd-pg-fit, contain); /* contain = no cut */
  transform: scale(var(--bd-pg-zoom, 1));
  transition: transform .35s ease;
  background: #f6f6f6;
}

/* glass highlight on frame */
.bd-pg-frame{
  overflow: hidden;
}
.bd-pg-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,0) 45%,
    rgba(255,255,255,.12)
  );
  opacity: .45;
  pointer-events:none;
  transform: translateX(-30%);
  transition: transform .6s ease, opacity .6s ease;
}
.bd-pg-frame:hover::after{
  transform: translateX(0%);
  opacity: .65;
}

/* smooth fade-in animation */
.bd-pg-frame{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .22s ease;
}
.bd-pg-frame.is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Lightbox popup ===== */
.bd-pg-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.bd-pg-lightbox.is-open{ display:flex; }

.bd-pg-lightbox__inner{
  max-width: 95vw;
  max-height: 88vh;
  position: relative;
}

.bd-pg-lightbox__img{
  max-width: 95vw;
  max-height: 88vh;
  display:block;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: #fff;
}

.bd-pg-lightbox__close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  font-size: 22px;
  line-height: 38px;
  text-align:center;
}

.bd-pg-clickable{
  cursor: zoom-in;
}

/* ===== End Photo Gallery Section (Zoom + Glass + Fade + Lightbox) ===== */

/* ===== End Photo Gallery Section (CSS) ===== */















































/* ==========================================
   MY SERVICE (Redux-driven) - #bd-my-service
========================================== */
#bd-my-service.bd-ms{
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ✅ prevents other section overlays */
}

/* Section BG layers (color + image with opacity) */
#bd-my-service .bd-ms-bg{
  position: absolute;
  inset: 0;
  background: var(--bd-ms-section-bg);
  z-index: 0;
}
#bd-my-service .bd-ms-bg-img{
  position: absolute;
  inset: 0;
  background-image: var(--bd-ms-section-bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--bd-ms-section-bg-img-op);
  z-index: 1;
  pointer-events: none;
}

/* Container */
#bd-my-service .bd-ms-wrap{
  width: min(1200px, 92%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Heading */
#bd-my-service .bd-ms-head{
  text-align: center;
  max-width: 980px;
  margin: 0 auto 42px;
}

#bd-my-service .bd-ms-title{
  font-family: var(--bd-ms-title-font);
  font-size: var(--bd-ms-title-size);
  font-weight: var(--bd-ms-title-weight);
  color: var(--bd-ms-title-color);
  margin: 0 0 14px;
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}

#bd-my-service .bd-ms-title:after{
  content:"";
  width: var(--bd-ms-underline-width);
  height: 3px;
  background: var(--bd-ms-underline-color);
  border-radius: 999px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  opacity: var(--bd-ms-underline-on); /* 1 or 0 */
}

#bd-my-service .bd-ms-desc{
  font-family: var(--bd-ms-desc-font);
  font-size: var(--bd-ms-desc-size);
  font-weight: var(--bd-ms-desc-weight);
  color: var(--bd-ms-desc-color);
  line-height: 1.8;
  margin: 0;
}

/* Grid columns from Redux */
#bd-my-service .bd-ms-grid{
  display: grid;
  grid-template-columns: repeat(var(--bd-ms-cols-desktop), minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px){
  #bd-my-service .bd-ms-grid{
    grid-template-columns: repeat(var(--bd-ms-cols-tablet), minmax(0,1fr));
  }
}
@media (max-width: 640px){
  #bd-my-service .bd-ms-grid{
    grid-template-columns: repeat(var(--bd-ms-cols-mobile), minmax(0,1fr));
  }
  #bd-my-service .bd-ms-side{ display:none; }
}

/* Card BG layers (default rgba + default image opacity) */
#bd-my-service .bd-ms-card{
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

#bd-my-service .bd-ms-card-bg{
  position: absolute;
  inset: 0;
  background: var(--bd-ms-card-bg);
  z-index: 0;
}
#bd-my-service .bd-ms-card-bg-img{
  position: absolute;
  inset: 0;
  background-image: var(--bd-ms-card-bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--bd-ms-card-bg-img-op);
  z-index: 1;
  pointer-events: none;
}

#bd-my-service .bd-ms-card-inner{
  position: relative;
  z-index: 2;
  padding: 26px 22px;
}

/* Hover animations toggle */
#bd-my-service.bd-ms-anim .bd-ms-card{
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#bd-my-service.bd-ms-anim .bd-ms-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.42);
  border-color: rgba(34,197,94,0.35);
}
#bd-my-service.bd-ms-noanim .bd-ms-card,
#bd-my-service.bd-ms-noanim .bd-ms-card:hover{
  transform: none !important;
  transition: none !important;
}

/* ✅ Icon container always centered */
#bd-my-service .bd-ms-icon{
  width: var(--bd-ms-icon-size);
  height: var(--bd-ms-icon-size);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Image stays centered, no shifting */
#bd-my-service .bd-ms-icon img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}


#bd-my-service.bd-ms-anim .bd-ms-card:hover .bd-ms-icon{
  transform: translateY(-8px) scale(1.03);
  transition: transform .25s ease;
}

/* Card title/text typography from Redux */
#bd-my-service .bd-ms-card-title{
  text-align: center;
  margin: 0 0 14px;
  font-family: var(--bd-ms-card-title-font);
  font-size: var(--bd-ms-card-title-size);
  font-weight: var(--bd-ms-card-title-weight);
  color: var(--bd-ms-card-title-color);
}

#bd-my-service .bd-ms-list{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--bd-ms-card-text-font);
  font-size: var(--bd-ms-card-text-size);
  font-weight: var(--bd-ms-card-text-weight);
  color: var(--bd-ms-card-text-color);
}
#bd-my-service .bd-ms-list li{
  margin: 9px 0;
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
#bd-my-service .bd-ms-list li:before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #22c55e;
  font-weight: 800;
}

/* Side Label typography/bg from Redux */
#bd-my-service .bd-ms-side{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
  pointer-events: none;
}
#bd-my-service .bd-ms-side-pill{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 12px 12px;
  border-radius: 14px;
  background: var(--bd-ms-side-bg);
  color: var(--bd-ms-side-color);
  font-family: var(--bd-ms-side-font);
  font-size: var(--bd-ms-side-size);
  font-weight: var(--bd-ms-side-weight);
  letter-spacing: .14em;
  border: 1px solid rgba(255,255,255,0.10);
}
#bd-my-service .bd-ms-side-line{
  width: 2px;
  height: 84px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
}
/* ✅ My Service side label overlap fix */
#bd-my-service .bd-ms-side{
  right: -18px;          /* label টা একটু বাইরে চলে যাবে */
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* ✅ card grid এর পাশে label এর জন্য জায়গা রাখা */
#bd-my-service .bd-ms-wrap{
  padding-right: 90px;   /* label এর জায়গা */
}

@media (max-width: 640px){
  #bd-my-service .bd-ms-wrap{ padding-right: 0; }
}
/* ✅ Hide "MY SERVICES" side button/label on mobile */
@media (max-width: 767px){
  #bd-my-service .bd-ms-side{
    display: none !important;
  }

  /* mobile এ padding-right দেওয়া থাকলে সেটা কেটে দিচ্ছি */
  #bd-my-service .bd-ms-wrap{
    padding-right: 0 !important;
  }
}