*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Segoe UI', sans-serif;
    background:#f5f8fc;
    color:#222;
}

/* HEADER */
header{
    background:#002b5b;
    padding:15px 0;
    position:sticky;
    top:0;
    z-index:1000;
}

.container{
    width:90%;
    margin:auto;
}

.logo{
    color:#fff;
    font-size:26px;
    font-weight:bold;
}

nav{
    float:right;
}

nav a{
    color:#fff;
    margin:0 15px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

nav a:hover{
    color:#00d4ff;
}

/* HERO SLIDER */
.slider{
    position:relative;
    height:90vh;
    overflow:hidden;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    opacity:0;
    animation:slide 15s infinite;
}

.slide:nth-child(1){background-image:url('/images/banner1.jpg');animation-delay:0s;}
.slide:nth-child(2){background-image:url('/images/banner2.jpg');animation-delay:5s;}
.slide:nth-child(3){background-image:url('/images/banner3.jpg');animation-delay:10s;}
.slide:nth-child(4){background-image:url('/images/banner4.jpg');animation-delay:15s;}

@keyframes slide{
    0%{opacity:0;}
    10%{opacity:1;}
    30%{opacity:1;}
    40%{opacity:0;}
    100%{opacity:0;}
}

.hero-text{
    position:absolute;
    top:18%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    text-align:center;
    z-index:10;
}

.hero-text h1{
    font-size:55px;
    animation:fadeUp 1s ease;
}

.hero-text p{
    font-size:22px;
    margin-top:10px;
}

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

/* SECTIONS */
.section{
    padding:20px 0;
    text-align:center;
}

.section h2{
    color:#002b5b;
    margin-bottom:30px;
}

.cards{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
}

.card{
    background:#fff;
    width:280px;
    padding:25px;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.4s;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

/* FOOTER */
footer{
    background:#001d3d;
    color:#fff;
    text-align:center;
    padding:30px 0;
}

/* WHATSAPP BUTTON */
.whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#25D366;
    color:white;
    width:55px;
    height:55px;
    border-radius:50%;
    text-align:center;
    line-height:55px;
    font-size:28px;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(0,0,0,.3);
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

/* MOBILE */
@media(max-width:768px){
    nav{
        float:none;
        margin-top:10px;
    }
    nav a{
        display:inline-block;
        margin:8px;
    }
    .hero-text h1{
        font-size:32px;
    }
}

/* ===== SERVICES GRID (3 PER ROW) ===== */

.service-grid{
    width:90%;
    margin:40px auto 0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

/* BOX */
.service-box{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:all .35s ease;
    text-align:center;
}

.service-box:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

/* IMAGE WRAP (auto size magic) */
.img-wrap{
    width:100%;
    height:200px;
    overflow:hidden;
    background:#eee;
}

.img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover; /* 🔥 auto crop সুন্দরভাবে */
    transition:transform .5s ease;
}

.service-box:hover img{
    transform:scale(1.08);
}

.service-box h3{
    padding:18px 12px 22px;
    font-size:18px;
    color:#222;
    font-weight:600;
}

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

@media(max-width:992px){
    .service-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:576px){
    .service-grid{
        grid-template-columns:1fr;
    }
}

/* ===== ABOUT PAGE ===== */

.about-wrapper{
    width:90%;
    margin:60px auto;
}

.about-block{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    background:#e9dfd2; /* beige corporate */
    padding:20px;
    margin-bottom:40px;
    border-radius:10px;
}

/* reverse layout */
.about-block.reverse{
    flex-direction:row-reverse;
}

.about-text{
    flex:1;
}

.about-text h2{
    color:#2b2b2b;
    margin-bottom:15px;
    font-size:26px;
}

.about-text p{
    color:#555;
    line-height:1.7;
}

.about-img{
    flex:1;
}

.about-img img{
    width:100%;
    height:260px;
    object-fit:cover; /* auto perfect fit */
    border-radius:6px;
}

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

@media(max-width:768px){
    .about-block,
    .about-block.reverse{
        flex-direction:column;
        text-align:center;
    }

    .about-img img{
        height:220px;
    }
}

/* ===== CONTACT TOP ===== */

.contact-top{
    width:90%;
    margin:60px auto 30px;
    text-align:center;
}

.contact-title{
    font-size:32px;
    color:#123b63;
    margin-bottom:30px;
}

/* GRID */
.contact-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

/* BOX */
.contact-box{
    background:#fff;
    padding:30px 25px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
    text-align:left;
}

.contact-box:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.contact-box h3{
    
/* ===== CAREER HERO ===== */

.career-hero{
    padding:80px 5%;
    background:#f7f7f7;
}

.career-hero-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:40px;
}

/* LEFT */

.career-left h1{
    font-size:52px;
    line-height:1.15;
    color:#111;
    margin-bottom:20px;
}

.career-left p{
    color:#666;
    line-height:1.7;
    max-width:520px;
    margin-bottom:30px;
}

.career-btn{
    display:inline-block;
    background:#111;
    color:#fff;
    padding:14px 26px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.career-btn:hover{
    background:#123b63;
}

/* RIGHT IMAGE GRID */

.career-right{
    position:relative;
    height:420px;
}

/* image base */

.career-right img{
    object-fit:cover;
    position:absolute;
}

/* big top */

.img-big-top{
    width:230px;
    height:170px;
    border-radius:30px;
    top:0;
    left:80px;
}

/* tall right */

.img-tall{
    width:190px;
    height:320px;
    border-radius:100px;
    right:0;
    top:40px;
}

/* small circle */

.img-small{
    width:110px;
    height:110px;
    border-radius:50%;
    bottom:20px;
    left:40px;
}

/* oval */

.img-small-oval{
    width:130px;
    height:170px;
    border-radius:80px;
    bottom:0;
    left:180px;
}

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

@media(max-width:768px){

    .career-hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .career-left h1{
        font-size:36px;
    }

    .career-right{
        height:380px;
        margin-top:40px;
    }
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}