@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

  :root{
    --dark: #0A0D16;
    --dark-2: #12162A;
    --on-dark: #EDEFF7;
    --on-dark-soft: #9AA1C0;
    --bg: #F5F4F1;
    --surface: #FFFFFF;
    --ink: #12141C;
    --ink-soft: #5B6072;
    --muted: #90939F;
    --line: #E4E2DC;
    --line-dark: #232840;
    --accent: #3F51D9;
    --accent-bright: #6C7BFF;
    --accent-soft: #E9EBFB;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; padding:0;
    background: var(--bg);
    color: var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{ text-decoration:none; color:inherit; }
  button{ font-family:inherit; border-radius: 10px; }
  ::selection{ background: var(--accent); color:#fff; }

  .wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
  section{ padding: 128px 0; }
  h2{
    font-family:'Space Grotesk', sans-serif;
    font-size: clamp(30px, 3.6vw, 44px);
    letter-spacing:-0.02em; line-height:1.1;
    margin:0 0 16px; max-width:16ch;
  }
  .lede{ color:var(--ink-soft); font-size:16.5px; max-width:50ch; line-height:1.65; margin:0; }
  .head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap; }

  @media (max-width:700px){ .wrap{ padding:0 24px; } section{ padding:88px 0; } }

  /* ============ NAV ============ */
  .navbar{
    position:sticky; top:0; z-index:60;
    background: rgba(245,244,241,0.85);
    backdrop-filter: blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{ max-width:1280px; margin:0 auto; padding:0 40px; height:80px; display:flex; align-items:center; gap:44px; }

  .logo{ display:flex; align-items:baseline; gap:2px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:20px; letter-spacing:-0.01em; white-space:nowrap; }

  .logo{
    height: 55px;
    width: 150px;
  }

  .logo {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .logo .mark{ width:8px; height:8px; background:var(--accent); border-radius:2px; display:inline-block; margin-right:9px; transform:translateY(-1px); }
  .logo .it{ color:var(--accent); }
  .nav-links{ list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0; flex:1; }
  .nav-links > li{ position:relative; }
  .nav-link, .nav-toggle{ position:relative; display:flex; align-items:center; gap:6px; padding:8px 15px; font-size:14px; font-weight:500; color:var(--ink-soft); background:none; border:none; cursor:pointer; }
  .nav-link::after, .nav-toggle::after{
    content:''; position:absolute; left:15px; right:15px; bottom:2px; height:1px; background:var(--accent);
    transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
  }
  .nav-link:hover, .nav-toggle:hover, .nav-toggle.open{ color:var(--ink); }
  .nav-link:hover::after, .nav-toggle:hover::after, .nav-toggle.open::after{ transform:scaleX(1); }
  .nav-toggle svg{ width:10px; height:10px; transition:transform .2s ease; }
  .nav-toggle.open svg{ transform:rotate(180deg); }
  .cta-btn{ white-space:nowrap; background:var(--ink); color:#fff; font-size:13.5px; font-weight:600; padding:12px 22px; border-radius:2px; transition:background .15s ease; }
  .cta-btn:hover{ background:var(--accent); }
  .hamburger{ display:none; background:none; border:none; cursor:pointer; width:30px; height:30px; flex-direction:column; justify-content:center; gap:5px; }
  .hamburger span{ height:1.5px; background:var(--ink); }
  .hamburger span:nth-child(1){ width:20px; } .hamburger span:nth-child(2){ width:20px; } .hamburger span:nth-child(3){ width:12px; align-self:flex-end; }
  .hamburger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); width:20px; }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); width:20px; align-self:flex-start; }

  .dropdown{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); width:460px; background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 60px rgba(10,13,22,0.14); padding:10px; opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; }
  .dropdown.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .dropdown-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
  .dropdown-item{ display:block; padding:12px; transition:background .12s ease; }
  .dropdown-item:hover{ background:var(--accent-soft); }
  .dropdown-item .name{ font-size:13.5px; font-weight:600; margin-bottom:2px; }
  .dropdown-item .desc{ font-size:12px; color:var(--muted); line-height:1.4; }
  .dropdown-foot{ border-top:1px solid var(--line); margin-top:6px; padding:10px 12px 4px; }
  .dropdown-foot a{ font-size:13px; font-weight:600; color:var(--accent); }

  .mobile-panel {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;

    background: var(--bg);
    z-index: 59;

    padding: 8px 24px 32px;

    /* Maximum height */
    max-height: calc(100vh - 80px);

    /* Content বেশি হলে শুধু এখানে scroll হবে */
    overflow-y: auto;

    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.mobile-panel {
    scrollbar-width: thin;
}

.mobile-panel::-webkit-scrollbar {
    width: 5px;
}

.mobile-panel::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
}

.mobile-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 900px) {.nav-links,.cta-btn {display: none;}.hamburger {display: flex;}.mobile-panel {display: block;}}


  .m-link{ display:flex; justify-content:space-between; align-items:center; padding:18px 4px; font-size:16px; font-weight:600; border-bottom:1px solid var(--line); }
  .m-link svg{ width:11px; height:11px; color:var(--muted); transition:transform .2s ease; }
  .m-link.open svg{ transform:rotate(180deg); }
  .m-sub{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
  .m-sub.open{ max-height:400px; }
  .m-sub-item{ display:block; padding:12px 4px 12px 14px; font-size:14px; color:var(--ink-soft); border-bottom:1px solid var(--line); }
  .m-cta{ display:block; text-align:center; margin-top:24px; background:var(--ink); color:#fff; font-weight:600; font-size:15px; padding:16px; }
  @media (max-width:900px){ .nav-links, .cta-btn{ display:none; } .hamburger{ display:flex; } .mobile-panel{ display:block; } }

  /* ============ HERO (dark) ============ */
  .hero{
    background: var(--dark);
    color: var(--on-dark);
    position:relative;
    overflow:hidden;
    padding: 150px 0 0;
  }
  .hero-bg{ position:absolute; inset:0; opacity:0.5; pointer-events:none; }
  .hero-inner{ position:relative; max-width:1280px; margin:0 auto; padding:0 40px; }
  .hero-eyebrow{ font-size:14px; color:var(--on-dark-soft); margin:0 0 28px; opacity:0; animation:riseIn .7s ease forwards; }
  .hero h1{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size: clamp(40px, 6.2vw, 84px);
    line-height:1.02; letter-spacing:-0.03em;
    margin:0 0 34px; max-width:16ch;
  }
  .hero h1 span{ display:block; overflow:hidden; }
  .hero h1 em{ display:inline-block; font-style:normal; opacity:0; transform:translateY(100%); animation:riseIn .7s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
  .hero p{ font-size:17.5px; color:var(--on-dark-soft); max-width:44ch; line-height:1.65; margin:0 0 40px; opacity:0; animation:riseIn .7s ease forwards; animation-delay:.5s; }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:100px; opacity:0; animation:riseIn .7s ease forwards; animation-delay:.62s; }
  .btn-primary{ background:#fff; color:var(--dark); font-size:14.5px; font-weight:600; padding:15px 26px; transition:background .15s ease; }
  .btn-primary:hover{ background:var(--accent-bright); color:#fff; }
  .btn-secondary{ border:1px solid rgba(237,239,247,0.22); color:#fff; font-size:14.5px; font-weight:600; padding:15px 26px; transition:border-color .15s ease; }
  .btn-secondary:hover{ border-color:#fff; }

  .hero-foot{ border-top:1px solid var(--line-dark); position:relative; padding:26px 0; }
  .hero-foot .wrap{ display:flex; justify-content:space-between; color:var(--on-dark-soft); font-size:12.5px; }
 
  
  

        .section-wrapper {
            max-width: 1280px;
            margin: 0 auto;
            padding: 128px 40px;
        }

        @media (max-width: 700px){ 
            .wrap, .nav-inner, .section-wrapper { 
            padding: 0 24px; 
            } 
            section { 
            padding: 88px 0; 
            } 
        }

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

        .section-badge {
            display: inline-block;
            background: var(--accent-light);
            border: 1px solid var(--accent-medium);
            color: var(--accent);
            padding: 8px 22px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: clamp(28px, 5vw, 50px);
            font-weight: 800;
            line-height: 1.15;
            margin-bottom: 16px;
            color: var(--surface);
        }

        .section-title span {
            color: var(--accent);
        }

        .section-subtitle {
            font-size: clamp(15px, 2vw, 18px);
            color: var(--text-secondary);
            max-width: 580px;
            margin: 0 auto;
            line-height: 1.7;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
        }

        .card {
            background: var(--secondary);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
            z-index: 2;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(34, 50, 74, 0.12), 0 0 0 1px rgba(6, 182, 212, 0.15);
            border-color: rgba(6, 182, 212, 0.2);
        }

        .card:hover::before {
            transform: scaleX(1);
        }

        .card-image-wrapper {
            position: relative;
            width: 100%;
            height: 210px;
            overflow: hidden;
        }

        .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .card:hover .card-image {
            transform: scale(1.08);
        }

        .card-image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: linear-gradient(to top, var(--secondary), transparent);
        }

        .card-icon-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: var(--surface);
            box-shadow: 0 8px 24px rgba(34, 50, 74, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover .card-icon-badge {
            transform: scale(1.1) rotate(-5deg);
            box-shadow: 0 12px 32px rgba(34, 50, 74, 0.35);
        }

        .card-body {
            padding: 28px;
        }

        .card-tag {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: 8px;
            margin-bottom: 16px;
            background: var(--surface);
            color: var(--primary);
        }

        .card-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 12px;
            line-height: 1.3;
            color: var(--surface);
        }

        .card-description {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .card-features {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .feature-chip {
            font-size: 12px;
            font-weight: 500;
            padding: 5px 12px;
            border-radius: 8px;
            background: var(--accent-light);
            border: 1px solid rgba(6, 182, 212, 0.15);
            color: var(--surface);
            transition: all 0.3s ease;
        }

        .card:hover .feature-chip {
            background: var(--accent-medium);
        }

        /* Responsive Breakpoints */
        @media (max-width: 1200px) {
            .card-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
        }

        @media (max-width: 640px) {
            .section-wrapper {
                padding: 40px 16px 60px;
            }

            .section-header {
                margin-bottom: 40px;
            }

            .card-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .card-image-wrapper {
                height: 200px;
            }

            .card-body {
                padding: 24px;
            }
        }

        /* Fade-in animation on load */
        .card {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.6s ease forwards;
        }

        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }
        .card:nth-child(4) { animation-delay: 0.4s; }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Decorative background elements */
        .bg-decoration {
            position: fixed;
            pointer-events: none;
            z-index: -1;
        }

        .bg-circle-1 {
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
            top: -200px;
            right: -200px;
        }

        .bg-circle-2 {
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(34, 50, 74, 0.04) 0%, transparent 70%);
            bottom: -150px;
            left: -150px;
        }

        .bg-grid {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(rgba(34, 50, 74, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(34, 50, 74, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: -1;
        }




   




  /* ============ MARQUEE ============ */
  .marquee-band{ background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; padding: 34px 0; }
  .marquee-track{ display:flex; width:max-content; gap:64px; animation: scrollX 26s linear infinite; }
  .marquee-track span{ font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; color:var(--muted); white-space:nowrap; transition:color .15s ease; }
  .marquee-track span:hover{ color:var(--ink); }
  @keyframes scrollX{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ============ SOLUTIONS (editorial list) ============ */
  .service-row{
    display:grid; grid-template-columns: 60px 1fr 340px; align-items:center;
    gap:32px; padding:34px 0; border-top:1px solid var(--line);
    transition:background .2s ease;
  }
  .services-list .service-row:last-child{ border-bottom:1px solid var(--line); }
  .service-row:hover{ background: var(--surface); }
  .service-index{ font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--muted); }
  .service-name{ font-family:'Space Grotesk',sans-serif; font-size: clamp(20px,2.4vw,28px); font-weight:600; letter-spacing:-0.01em; transition: color .2s ease, transform .2s ease; }
  .service-row:hover .service-name{ color:var(--accent); transform:translateX(6px); }
  .service-desc{ font-size:13.5px; color:var(--muted); line-height:1.55; text-align:right; }
  @media (max-width:800px){ .service-row{ grid-template-columns: 34px 1fr; } .service-desc{ display:none; } }

  /* ============ INDUSTRIES ============ */
  .industries-row{ display:grid; grid-template-columns: 0.9fr 1.6fr; gap:40px; align-items:start; }
  .tag-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  .tag{ border:1px solid var(--line); border-radius:999px; padding:13px 22px; font-size:14px; font-weight:500; color:var(--ink-soft); transition:border-color .15s ease, color .15s ease, background .15s ease; }
  .tag:hover{ border-color:var(--accent); color:var(--ink); background:var(--accent-soft); }
  @media (max-width:800px){ .industries-row{ grid-template-columns:1fr; } }

  /* ============ WORK (dark, editorial) ============ */
  .work-section{ background:var(--dark); color:var(--on-dark); }
  .work-section h2{ color:#fff; }
  .work-section .lede{ color:var(--on-dark-soft); }
  .work-case{ display:grid; grid-template-columns: 1.2fr 1fr; gap:48px; align-items:center; padding:56px 0; border-top:1px solid var(--line-dark); }
  .work-list .work-case:last-child{ border-bottom:1px solid var(--line-dark); }
  .work-thumb{ aspect-ratio:16/10; border-radius:2px; overflow:hidden; position:relative; background:var(--dark-2); }
  .work-thumb svg{ width:100%; height:100%; }
  .work-tag{ font-size:12.5px; font-weight:600; color:var(--accent-bright); display:block; margin-bottom:12px; }
  .work-case h3{ font-family:'Space Grotesk',sans-serif; font-size:clamp(22px,2.6vw,30px); margin:0 0 12px; letter-spacing:-0.01em; }
  .work-case p{ font-size:14.5px; color:var(--on-dark-soft); line-height:1.6; max-width:40ch; margin:0 0 22px; }
  .work-link{ font-size:13.5px; font-weight:600; color:#fff; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:3px; }
  @media (max-width:800px){ .work-case{ grid-template-columns:1fr; } }

  /* ============ WHY ============ */
  /* ============ WHY ============ */
  .why-wrapper {
    max-width: 1200px; 
    margin: 0 auto;    
    padding: 0 20px;
  }

  .why-strip{ 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 1px; 
    background: var(--line); 
    border-top: 1px solid var(--line); 
    border-bottom: 1px solid var(--line); 
  }

  .why-item{ 
    background: var(--bg); 
    padding: 36px 30px; 
  }

  .why-icon{ 
    width: 26px; 
    height: 26px; 
    color: var(--accent); 
    margin-bottom: 22px; 
  }

  .why-item h3{ 
    font-size: 22px; 
    font-weight: 600; 
    margin: 0 0 8px; 
  }

  .why-item p{ 
    font-size: 13px; 
    color: var(--muted); 
    line-height: 1.55; 
    margin: 0; 
  }

  @media (max-width: 800px){ 
    .why-strip{ 
      grid-template-columns: 1fr 1fr; 
    } 
  }

  /* ============ PROCESS ============ */
  .process-track{ display:flex; position:relative; }
  .process-track::before{ content:''; position:absolute; top:21px; left:0; right:0; height:1px; background:var(--line); }
  .process-step{ flex:1; position:relative; padding-right:24px; }
  .process-num{ width:42px; height:42px; border-radius:50%; background:var(--bg); border:1.5px solid var(--accent); color:var(--accent); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; margin-bottom:24px; position:relative; z-index:1; }
  .process-step h3{ font-size:15.5px; font-weight:600; margin:0 0 7px; }
  .process-step p{ font-size:13px; color:var(--muted); line-height:1.5; margin:0; }
  @media (max-width:900px){ .process-track{ flex-direction:column; gap:32px; } .process-track::before{ display:none; } }

  /* ============ TESTIMONIAL ============ */
  .testimonial-wrap{ position:relative; max-width:760px; margin:0 auto; text-align:center; }
  .quote-mark{ font-family:'Space Grotesk',sans-serif; font-size:120px; color:var(--accent-soft); line-height:1; margin-bottom:-46px; }
  .testimonial-wrap blockquote{ font-family:'Space Grotesk',sans-serif; font-size:clamp(22px,2.8vw,30px); line-height:1.42; letter-spacing:-0.01em; margin:0 0 30px; }
  .who-row{ display:flex; align-items:center; justify-content:center; gap:12px; }
  .avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; }
  .who-text{ text-align:left; }
  .who-text .name{ font-size:14px; font-weight:600; }
  .who-text .co{ font-size:12.5px; color:var(--muted); }

  /* ============ FINAL CTA (dark) ============ */
  .final-cta{ background:var(--dark); color:#fff; text-align:left; }
  .final-cta .wrap{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
  .final-cta h2{ color:#fff; font-size:clamp(34px,5vw,64px); max-width:14ch; margin:0; }
  .final-link{ display:inline-flex; align-items:center; gap:14px; font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:600; color:#fff; border-bottom:1px solid rgba(255,255,255,0.35); padding-bottom:6px; white-space:nowrap; transition:border-color .15s ease, gap .15s ease; }
  .final-link:hover{ border-color:#fff; gap:20px; }
  .final-link svg{ width:18px; height:18px; }

  /* ============ FOOTER (dark) ============ */
  footer{ background:var(--dark); color:var(--on-dark-soft); padding:80px 0 0; }
  .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-dark); }
  .footer-brand .logo{ margin-bottom:16px; color:#fff; }
  .footer-brand .logo .it{ color:var(--accent-bright); }
  .footer-brand p{ font-size:13.5px; line-height:1.6; max-width:32ch; }
  .footer-col h4{ font-size:12.5px; font-weight:600; margin:0 0 18px; color:#fff; }
  .footer-col a{ display:block; font-size:13.5px; margin-bottom:13px; transition:color .15s ease; }
  .footer-col a:hover{ color:#fff; }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:12px; font-size:12.5px; }
  .footer-legal{ display:flex; gap:20px; }
  .footer-legal a:hover{ color:#fff; }
  .footer-word{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(60px,14vw,180px); letter-spacing:-0.03em; color:var(--line-dark); text-align:center; padding:0 0 20px; user-select:none; }
  @media (max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; } }

  .logo-footer{
    max-height: 150px;
    max-width: 150px;

  }

.form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; 
    padding: 20px;
    width: 100%;
}

/* Form Container */
.form-container {
    background: #ffffff;
    width: 100%;
    max-width: 650px;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Header */
.form-header {
    margin-bottom: 30px;
    text-align: center;
}

.form-header h2 {
    font-size: 28px;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-header p {
    font-size: 14px;
    color: #666;
}

/* Form Row for Grid Layout */
.form-row {
    display: flex;
    gap: 20px;
}

.form-row .input-group {
    flex: 1;
}

/* Input Groups */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    margin-bottom: 8px;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background-color: #f9f9f9;
    outline: none;
    transition: all 0.3s ease;
}

/* Focus Effects */
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: #667eea;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* Placeholder Styling */
::placeholder {
    color: #aaa;
    opacity: 1;
}

/* Textarea Resize */
.input-group textarea {
    resize: vertical;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.submit-btn:hover {
    opacity: 0.95;
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0);
}

/* Responsive Design for smaller screens */
@media (max-width: 576px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-container {
        padding: 20px;
    }
}

    .message {
    display: flex;
    justify-content: flex-end; 
    margin: 10px 0;
    font-family: Arial, sans-serif;
    }

    .user-message .message-content {
        background-color: #0084ff; 
        color: #ffffff;
        padding: 10px 15px;
        border-radius: 15px 15px 0 15px; 
        max-width: 70%;
        word-wrap: break-word;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .text-right{
        text-align: right;
    }
    .text-right:hover{
        color: blue;
        word-spacing: 1px;
        transition:border-color .15s ease, gap .15s ease;
    }

    .text-danger{
        color: red;
        font-size: 12px;
    }




    /* Service and Solutions  */
    /* =================================================_
   Service / Solution Detail Template Styles
   ================================================= */

.service-detail-wrapper {
    max-width: 900px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    font-family: inherit; /* আপনার মেইন সাইটের ফন্ট ইনহেরিট করবে */
}

/* 1. Banner Section */
.service-banner {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.service-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2. Title Section */
.service-header {
    padding: 30px 40px 10px 40px;
}

.service-title {
    font-size: 30px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.3;
}

/* 3. Technologies Section (Badges) */
.service-technologies {
    padding: 10px 40px 20px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid #eaeaea;
}

.tech-tag {
    background-color: #eef2f7;
    color: #34495e;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    display: inline-block;
}