/* Custom Mobile Enhancements for Sculpt Space */

@media only screen and (max-width: 767px) {
    
    /* 1. Fixed Header on Mobile */
    body {
        padding-top: 80px; /* Offset for fixed header */
    }

    .main-header {
        position: fixed !important;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 999;
        background: #000000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    .main-header.fixed-header {
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

    /* 2. Banner Enhancements */
    .banner-section .content-box h2 {
        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
        animation: fadeInLeft 1s ease;
    }

    .banner-section .content-box .text {
        animation: fadeInLeft 1.2s ease;
    }

    .banner-section .content-box .link-box {
        animation: fadeInUp 1.5s ease;
    }

    /* 3. Section Beautification */
    .sec-title .float-text {
        font-size: 48px !important;
        opacity: 0.1;
        top: -10px !important;
    }

    .about-section .image-box {
        padding: 20px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        margin-bottom: 30px;
    }

    /* 4. Card Enhancements (Services & Projects) */
    .service-block .inner-box {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        background: #fff;
        margin: 15px 5px;
    }

    .service-block .inner-box:active {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }

    .project-block .image-box {
        border-radius: 15px;
        overflow: hidden;
        margin: 10px;
    }

    /* 5. Fun Fact Counters */
    .fact-counter .count-box {
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 30px 20px !important;
        margin-bottom: 20px;
        border: 1px solid rgba(255,255,255,0.1);
    }

    /* 6. Back to Top Button */
    .scroll-to-top {
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 24px;
        background: #ff8a00 !important;
        border-radius: 50%;
        box-shadow: 0 5px 15px rgba(255, 138, 0, 0.4);
        bottom: 30px !important;
        right: 20px !important;
        animation: bounce 2s infinite;
    }

    /* 7. General Spacing */
    section {
       /* padding: 30px 0 !important; */
    }

    .sec-title {
        margin-bottom: 50px !important;
    }

    .banner-section .slide-item:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 1;
    }
    
    .banner-section .auto-container {
        position: relative;
        z-index: 2;
    }
}

/* New Animations */
html {
    scroll-behavior: smooth;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}