.site-header{
    background:#0b5ed7;
    color:#fff;
    padding:15px;
}

.hero{
    padding:120px 20px;
    text-align:center;
    background-size:cover;
    background-position:center;
    color:#fff;
}

.hero h2{
    font-size:42px;
    margin-bottom:10px;
}

.hero p{
    font-size:20px;
}
.services{
    padding:80px 20px;
    background:#ffffff;
}

.services-wrap{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.service-box{
    text-align:center;
    padding:30px;
    border:1px solid #eee;
    border-radius:8px;
    transition:.3s;
}

.service-box:hover{
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.service-box i{
    font-size:40px;
    color:#0b5ed7;
    margin-bottom:15px;
}
.about{
    padding:90px 20px;
    background:#f9fafc;
}

.about-wrap{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}

.about-img img{
    width:100%;
    border-radius:10px;
}

.about-content h2{
    font-size:36px;
    margin-bottom:15px;
}

.about-content p{
    font-size:18px;
    line-height:1.7;
    margin-bottom:25px;
}

.about-btn{
    display:inline-block;
    padding:12px 28px;
    background:#0b5ed7;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
}

.about-btn:hover{
    background:#084298;
}
.counter{
    padding:80px 20px;
    background:#0b5ed7;
    color:#fff;
}

.counter-wrap{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:30px;
    text-align:center;
}

.counter-number{
    font-size:48px;
    font-weight:bold;
    margin-bottom:10px;
}

.counter-box p{
    font-size:18px;
}
.portfolio{
    padding:90px 20px;
    background:#ffffff;
}

.section-title{
    text-align:center;
    font-size:36px;
    margin-bottom:40px;
}

.portfolio-wrap{
    max-width:1100px;
    margin:auto;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.portfolio-item{
    border:1px solid #eee;
    border-radius:8px;
    overflow:hidden;
    transition:.3s;
}

.portfolio-item:hover{
    box-shadow:0 12px 30px rgba(0,0,0,.1);
}

.portfolio-item img{
    width:100%;
    display:block;
}

.portfolio-item h3{
    padding:15px;
    font-size:18px;
    margin:0;
}
.contact{
    padding:90px 20px;
    background:#f9fafc;
}

.contact-wrap{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.contact-info ul{
    list-style:none;
    padding:0;
}

.contact-info li{
    margin-bottom:10px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ddd;
    border-radius:6px;
}

.contact-form button{
    padding:12px 28px;
    background:#0b5ed7;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
.site-footer{
    background:#0b5ed7;
    color:#fff;
    padding:40px 20px;
}

.footer-wrap{
    max-width:1100px;
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.footer-social a{
    color:#fff;
    margin:0 8px;
    font-size:18px;
    transition:.3s;
}

.footer-social a:hover{
    opacity:.7;
}

.footer-copy{
    font-size:14px;
    text-align:center;
}
/* =========================
   SINGLE PROJECT
=========================*/
.single-project{
    padding:90px 20px;
    background:#ffffff;
}

.single-project-wrap{
    max-width:900px;
    margin:auto;
}

.project-header{
    text-align:center;
    margin-bottom:40px;
}

.project-title{
    font-size:40px;
    margin:0;
}

.project-featured img{
    width:100%;
    border-radius:10px;
    margin-bottom:30px;
}

.project-content{
    font-size:18px;
    line-height:1.8;
}

.project-back{
    margin-top:40px;
}

.project-back a{
    text-decoration:none;
    color:#0b5ed7;
    font-weight:bold;
}
.container{
    max-width:1100px;
    margin:auto;
    padding:0 20px;
}

.hero{
    min-height:420px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}
/* =========================
   HEADER
========================= */
.site-header{
    background:#0b5ed7;
    padding:20px 0;
}

.header-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* LOGO */
.site-logo img{
    max-height:110px;   /* 🔥 এখানে বড়/ছোট কন্ট্রোল করবে */
    width:auto;
}

.site-logo h1{
    color:#fff;
    margin:0;
    font-size:36px;
}

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

.main-menu li a{
    color:#fff;
    text-decoration:none;
    font-weight:500;
}

.main-menu li a:hover{
    opacity:.8;
}

/* MOBILE */
@media (max-width:768px){
    .header-wrap{
        flex-direction:column;
        gap:15px;
    }

    .site-logo img{
        max-height:90px;
    }
}
/* =========================
   GLOBAL POLISH
========================= */
body{
    scroll-behavior:smooth;
}

section{
    position:relative;
    overflow:hidden;
}

/* =========================
   HERO WOW EFFECT
========================= */
.hero{
    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    background-size:cover;
    background-position:center;
}

.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        rgba(5,12,45,.9),
        rgba(11,94,215,.75),
        rgba(0,0,0,.85)
    );
    z-index:1;
}

.hero .container{
    position:relative;
    z-index:2;
}

.hero h2{
    font-size:64px;
    font-weight:800;
    margin-bottom:20px;
    text-shadow:0 10px 40px rgba(0,0,0,.6);
    animation:fadeUp 1.2s ease forwards;
}

.hero p{
    font-size:22px;
    opacity:.9;
    animation:fadeUp 1.6s ease forwards;
}

@keyframes fadeUp{
    from{opacity:0;transform:translateY(40px)}
    to{opacity:1;transform:translateY(0)}
}

/* =========================
   SERVICES – GLASS CARD
========================= */
.services{
    padding:120px 20px;
    background:linear-gradient(180deg,#f9fbff,#ffffff);
}

.services-wrap{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:40px;
}

.service-box{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(12px);
    border-radius:20px;
    padding:50px 30px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    transition:.5s;
}

.service-box:hover{
    transform:translateY(-15px) scale(1.03);
    box-shadow:0 40px 90px rgba(11,94,215,.25);
}

.service-box i{
    font-size:52px;
    color:#0b5ed7;
    margin-bottom:20px;
}

.service-box h3{
    font-size:22px;
    margin-bottom:12px;
}

/* =========================
   ABOUT – AGENCY STYLE
========================= */
.about{
    padding:120px 20px;
    background:#ffffff;
}

.about-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-img img{
    width:100%;
    border-radius:30px;
    box-shadow:0 40px 100px rgba(0,0,0,.2);
}

.about-content h2{
    font-size:48px;
    margin-bottom:20px;
}

.about-content p{
    font-size:18px;
    line-height:1.8;
    color:#555;
}

.about-btn{
    display:inline-block;
    margin-top:25px;
    padding:14px 38px;
    background:linear-gradient(135deg,#0b5ed7,#003cff);
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 20px 50px rgba(11,94,215,.4);
}

/* =========================
   COUNTER – POWER STRIP
========================= */
.counter{
    padding:100px 20px;
    background:linear-gradient(135deg,#0b5ed7,#002b8f);
    color:#fff;
}

.counter-wrap{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:30px;
    text-align:center;
}

.counter-number{
    font-size:60px;
    font-weight:800;
}

/* =========================
   PORTFOLIO – ELITE GRID
========================= */
.portfolio{
    padding:130px 20px;
    background:#f8faff;
}

.section-title{
    text-align:center;
    font-size:48px;
    margin-bottom:70px;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:35px;
}

.portfolio-item{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 25px 70px rgba(0,0,0,.12);
    transition:.5s;
}

.portfolio-item:hover{
    transform:scale(1.05);
}

.portfolio-item img{
    width:100%;
}

/* =========================
   CONTACT – MODERN FORM
========================= */
.contact{
    padding:120px 20px;
    background:linear-gradient(180deg,#ffffff,#f0f4ff);
}

.contact-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}

.contact-form{
    background:#fff;
    padding:50px;
    border-radius:25px;
    box-shadow:0 30px 80px rgba(0,0,0,.15);
}

.contact-form button{
    width:100%;
    padding:14px;
    background:linear-gradient(135deg,#0b5ed7,#003cff);
    color:#fff;
    border:none;
    border-radius:30px;
    font-size:16px;
    font-weight:600;
}

/* =========================
   MOBILE MAGIC
========================= */
@media(max-width:768px){
    .hero h2{font-size:42px}
    .about-wrap,
    .contact-wrap{
        grid-template-columns:1fr;
    }
}
*{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    background:#ffffff;
}

.container{
    animation:softFade .8s ease both;
}

@keyframes softFade{
    from{opacity:0;transform:translateY(15px)}
    to{opacity:1;transform:translateY(0)}
}
.service-box{
    position:relative;
    overflow:hidden;
}

.service-box::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(11,94,215,.15),
        transparent
    );
    transform:translateX(-100%);
    transition:.6s;
}

.service-box:hover::before{
    transform:translateX(100%);
}
.about-img{
    perspective:1200px;
}

.about-img img{
    transition:transform .8s ease;
}

.about-img:hover img{
    transform:rotateY(8deg) rotateX(4deg) scale(1.05);
}
.counter-number{
    position:relative;
}

.counter-number::after{
    content:'+';
    font-size:26px;
    margin-left:4px;
    opacity:.7;
}
.portfolio-item{
    position:relative;
}

.portfolio-item::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.6),
        transparent
    );
    opacity:0;
    transition:.4s;
}

.portfolio-item:hover::after{
    opacity:1;
}

.portfolio-item h3{
    position:absolute;
    bottom:20px;
    left:20px;
    color:#fff;
    opacity:0;
    transform:translateY(20px);
    transition:.4s;
}

.portfolio-item:hover h3{
    opacity:1;
    transform:translateY(0);
}
.contact-form input,
.contact-form textarea{
    transition:.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#0b5ed7;
    box-shadow:0 0 0 4px rgba(11,94,215,.15);
    outline:none;
}
/* =========================
   SCROLL REVEAL
========================= */
.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:1s cubic-bezier(.2,.8,.2,1);
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}
/* =========================
   TECH PARTICLES
========================= */
.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

.particles span{
    position:absolute;
    width:6px;
    height:6px;
    background:rgba(0,170,255,.4);
    border-radius:50%;
    animation:float 12s linear infinite;
}

@keyframes float{
    from{transform:translateY(100vh) scale(0)}
    to{transform:translateY(-10vh) scale(1)}
}
/* =========================
   GLASS HEADER
========================= */
.site-header{
    position:sticky;
    top:0;
    z-index:999;
    backdrop-filter:blur(12px);
    background:rgba(11,94,215,.75);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
/* =========================
   DARK MODE
========================= */
body.dark{
    background:#0b1020;
    color:#eaeaff;
}

body.dark section{
    background:#0b1020 !important;
}

body.dark .service-box,
body.dark .contact-form{
    background:#111a3a;
    color:#fff;
}
/* =========================
   ULTRA POLISH
========================= */
a,button{
    transition:.3s;
}

a:hover,button:hover{
    transform:translateY(-2px);
}
section::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:80px;
    background:linear-gradient(
        to right,
        rgba(11,94,215,.4),
        rgba(0,170,255,.2),
        transparent
    );
    clip-path:polygon(0 60%,10% 50%,20% 65%,30% 55%,40% 70%,50% 60%,60% 75%,70% 65%,80% 80%,90% 70%,100% 85%,100% 100%,0 100%);
    opacity:.35;
    pointer-events:none;
}
.service-box,
.about-btn,
.portfolio-item{
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}

.service-box:hover,
.about-btn:hover,
.portfolio-item:hover{
    transform:translateY(-6px) scale(1.02);
}
.service-box::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:20px;
    box-shadow:0 0 0 rgba(0,170,255,0);
    transition:.4s;
}

.service-box:hover::after{
    box-shadow:0 0 25px rgba(0,170,255,.45);
}
@keyframes gradientMove{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.hero,
.counter{
    background-size:400% 400%;
    animation:gradientMove 15s ease infinite;
}
.about-img::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:translateX(-120%);
}

.about-img:hover::after{
    animation:glassSweep 1.2s ease forwards;
}

@keyframes glassSweep{
    to{transform:translateX(120%)}
}
.hero h2,
.section-title{
    text-shadow:0 0 0 rgba(0,170,255,0);
    transition:.5s;
}

.hero h2:hover,
.section-title:hover{
    text-shadow:0 0 25px rgba(0,170,255,.45);
}
section{
    box-shadow:0 0 0 rgba(0,0,0,0);
}

section:hover{
    box-shadow:0 30px 120px rgba(0,0,0,.12);
}
@keyframes borderFlow{
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
}

.service-box,
.portfolio-item,
.contact-form{
    position:relative;
}

.service-box::before,
.portfolio-item::before,
.contact-form::before{
    content:'';
    position:absolute;
    inset:-2px;
    background:linear-gradient(
        120deg,
        #0b5ed7,
        #00bfff,
        #003cff,
        #0b5ed7
    );
    background-size:300% 300%;
    animation:borderFlow 6s linear infinite;
    opacity:.25;
    border-radius:22px;
    z-index:-1;
}
section{
    transition:filter .6s ease, transform .6s ease;
}

/* =========================
   SAFE FOCUS EFFECT (FIXED)
========================= */
section{
    transition:opacity .4s ease, transform .4s ease;
}

section:hover{
    transform:scale(1.01);
    z-index:2;
}

section:not(:hover){
    opacity:0.96;
}


section:hover{
    filter:blur(0);
    transform:scale(1.01);
    z-index:5;
}
section::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle at top,
        rgba(255,255,255,.12),
        transparent 70%
    );
    opacity:.35;
    pointer-events:none;
}
.about-btn,
.contact-form button{
    position:relative;
}

.about-btn::after,
.contact-form button::after{
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:inherit;
    background:radial-gradient(circle,rgba(0,170,255,.35),transparent 70%);
    opacity:0;
    transition:.4s;
}

.about-btn:hover::after,
.contact-form button:hover::after{
    opacity:1;
}
@keyframes aura{
    0%{box-shadow:0 0 0 rgba(11,94,215,0)}
    50%{box-shadow:0 0 120px rgba(11,94,215,.25)}
    100%{box-shadow:0 0 0 rgba(11,94,215,0)}
}

.hero:hover,
.counter:hover{
    animation:aura 3s ease infinite;
}
.hero h2,
.section-title{
    animation:breath 6s ease-in-out infinite;
}

@keyframes breath{
    0%,100%{letter-spacing:0}
    50%{letter-spacing:1.5px}
}
::selection{
    background:#0b5ed7;
    color:#fff;
}
body{
    background:
        linear-gradient(0deg, rgba(11,94,215,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,94,215,.04) 1px, transparent 1px),
        #ffffff;
    background-size:40px 40px;
}
body::after{
    content:'';
    position:fixed;
    inset:0;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(0,170,255,.015),
            rgba(0,170,255,.015) 1px,
            transparent 1px,
            transparent 6px
        );
    pointer-events:none;
    z-index:0;
}
.service-box,
.portfolio-item,
.about-img,
.contact-form{
    position:relative;
}

.service-box::before,
.portfolio-item::before,
.about-img::before,
.contact-form::before{
    content:'';
    position:absolute;
    inset:-20px;
    background:radial-gradient(
        circle at center,
        rgba(0,170,255,.15),
        transparent 60%
    );
    opacity:0;
    transition:.4s;
}

.service-box:hover::before,
.portfolio-item:hover::before,
.about-img:hover::before,
.contact-form:hover::before{
    opacity:1;
}
.section-title::after{
    content:'';
    display:block;
    width:60px;
    height:2px;
    margin:14px auto 0;
    background:linear-gradient(
        90deg,
        transparent,
        #0b5ed7,
        transparent
    );
    animation:scan 3s linear infinite;
}

@keyframes scan{
    from{background-position:0%}
    to{background-position:200%}
}
@keyframes dataFloat{
    from{transform:translateY(0)}
    to{transform:translateY(-12px)}
}

.hero::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0,170,255,.12), transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(11,94,215,.12), transparent 45%);
    animation:dataFloat 6s ease-in-out infinite alternate;
    pointer-events:none;
}
a:hover,
button:hover{
    filter:brightness(1.05);
}