body{
    margin:0;
    font-family:Arial;
    text-align:center;
    background:#fff
}

.logo{
    margin:20px auto;
    width:200px;
    padding:12px;
    background:#d7261e;
    color:#fff;
    border-radius:30px
}

/* ✅ SLIDER FIX */
.slider{
    width:100%;
    height:260px;              /* 👈 yahin se size control hoga */
    position:relative;
    overflow:hidden
}

.slides{
    width:100%;
    height:100%;
    position:relative
}

.slides img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition:opacity 1s ease-in-out
}

.slides img.active{
    opacity:1
}

/* TEXT */
.welcome{
    color:#888;
    margin:20px
}
header img{
        width:100%;
        max-width:658px; /* same banner size */
        height:auto;
        display:block;
        margin:auto;
    }

    .detail-box{
        padding:20px;
    }

    .detail-box img{
        width:90%;
        max-width:300px;
        margin:8px 0;
        border-radius:8px;
    }

    h2{margin:10px 0 5px}
    h3{margin:0 0 15px;color:green}

    .back{
        padding:10px 20px;
        border:none;
        background:#000;
        color:#fff;
        border-radius:5px;
        cursor:pointer;
    }
/* SERVICES */
.services{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    padding:20px
}

.card{
    border-radius:20px;
    overflow:hidden;
    background:#eee;
    cursor:pointer;
    transition:.4s;
    padding:15px;
}


.card img{
    width:100%;
    height:160px;      /* 👈 box height yahin se control */
    object-fit:cover;
    border-radius:12px;
}


.card button{
    width:100%;
    border:none;
    padding:12px;
    background:none
}

.card:hover{
    transform:scale(1.05);
    box-shadow:0 10px 17px rgba(0,0,0,.2);
}

/* DETAIL PAGE */
.detail-box{
    padding:20px;
    animation:fade .6s
}

.detail-box img{
    width:90%;
    max-width:400px;
    border-radius:20px
}

.back{
    padding:10px 20px;
    background:#d7261e;
    color:#fff;
    border:none;
    border-radius:20px
}

/* ANIMATION */
@keyframes fade{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

/* 📱 MOBILE ADJUST */
@media(max-width:600px){
    .slider{
        height:220px
    }
}
/* HEADER LOGO CENTER */
.header{
    padding:15px 0;
    text-align:center;
}

.logo-img{
    width:151px;          /* 👈 size yahan se control */
    max-width:90%;
    height:auto;
    display:block;
    margin:0 auto;
    animation:fade .8s ease;
}
/* FOOTER */
.footer{
    background:#000;
    color:#fff;
    padding:20px 10px;
    text-align:center;
    margin-top:30px;
}

.footer-name{
    font-size:18px;
    font-weight:bold;
    margin-bottom:6px;
}

.footer-address{
    font-size:14px;
    line-height:1.5;
    opacity:0.9;
}

.footer-phone{
    margin-top:8px;
    font-size:15px;
    font-weight:600;
}
/* SPLASH SCREEN */
.splash-body{
    margin:0;
    height:100vh;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.splash-container{
    text-align:center;
    color:#000;
    animation:fadeIn 1.2s ease;
}

.splash-logo{
    width:188px;
    margin-bottom:20px;
    animation:logoPop 1.5s ease infinite alternate;
}

.splash-title{
    font-size:28px;
    margin:10px 0;
}

.splash-tag{
    font-size:14px;
    color:#000;
    margin-bottom:30px;
}

.more-btn{
    padding:12px 40px;
    font-size:16px;
    border:none;
    border-radius:30px;
    background:#d7261e;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.more-btn:hover{
    transform:scale(1.1);
    box-shadow:0 0 20px rgba(215,38,30,0.8);
}

/* ANIMATIONS */
@keyframes logoPop{
    from{transform:scale(1)}
    to{transform:scale(1.08)}
}

@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}