body {
    background-color: #555450; /* Dark background */
    color: #ffffff; /* White text */
    font-family: Arial, sans-serif;
}

/* Ensure all text elements are white */
h1, h2, h3, h4, h5, h6, p, span, div, a {
    color: #ffffff !important;
}
/* General Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(100px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .animate-fade-in {
            animation: fadeInUp 1s ease-in-out;
        }
        .slide-in-left {
            animation: slideInLeft 1s ease-in-out;
        }
        .slide-in-right {
            animation: slideInRight 1s ease-in-out;
        }

        /* Sticky 3D Navbar */
        .navbar {
            background: linear-gradient(5deg, red, #00c6ff);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            transform: perspective(500px) rotateX(5deg);
            transition: transform 0.3s ease;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .navbar:hover {
            transform: perspective(500px) rotateX(0deg);
        }
        .navbar-brand img {
            transition: transform 0.3s ease;
        }
        .navbar-brand img:hover {
            transform: scale(1.1) rotate(5deg);
        }
        .nav-link {
            color: white !important;
            transition: color 0.3s ease;
        }
        .nav-link:hover {
            color: #ffdd57 !important;
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(to right, #f8f9fa, #e9ecef);
            padding: 80px 0;
        }
        .hero-section h1 {
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
            
        .hero-content {
            background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Shadow effect */
            border-radius: 8px; /* Slightly smaller radius than parent */
            padding: 20px;
        }
        /* Services Section */
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        /* About and Contact Section */
        .about-contact-section {
            padding: 60px 0;
            background-color: #f8f9fa;
        }

        /* Footer with 4-Color Linear Gradient and 2 Columns */
        .footer {
            background: linear-gradient(45deg, #343a40, #6c757d, #dc3545, #ffc107);
            color: white;
            padding: 30px 0;
            box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.3);
            transform: perspective(500px) rotateX(-5deg);
            transition: transform 0.3s ease;
        }
        .footer:hover {
            transform: perspective(500px) rotateX(0deg);
        }
        .footer .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .footer .left-column {
            flex: 1;
        }
        .footer .right-column {
            flex: 1;
            text-align: right;
        }
        .footer-logo {
            height: 40px;
            border: 1px solid white;
            border-radius: 10px;
            transition: transform 0.3s ease;
        }
        .footer-logo:hover {
            transform: scale(1.1);
        }
        .logo {
    
    height: 60px;
    width: 100px !important;
    border: 1px solid white;
    
}


        /* WhatsApp Popup Button */
        .whatsapp-btn {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: #25D366;
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transition: transform 0.3s ease;
        }
        .whatsapp-btn:hover {
            transform: scale(1.1);
            color: white;
            text-decoration: none;
        }

        /* Apply Online Button */
        .apply-online-btn {
            background: linear-gradient(135deg, #dc3545, #ff6b6b);
            border: none;
            padding: 10px 20px;
            font-size: 1.1rem;
            border-radius: 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        .apply-online-btn:hover {
            transform: scale(1.05);
        }
    /* Fixed Button on Right Middle */
    #openModalBtn {
        position: fixed;
        right: 20px; /* Distance from right */
        top: 50%;
        transform: translateY(-50%);
        z-index: 999999999 !important; /* SUPER high z-index */
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease-in-out;
        background: red;
        color: white;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-weight: bold;
        cursor: pointer;
        pointer-events: auto; /* Ensures button remains clickable */
        isolation: isolate; /* Prevents it from being hidden */
        opacity: 0.7;
    }

    /* Prevents other elements from overlapping */
    body, html {
        position: relative;
        z-index: 1; /* Ensures other elements stay below */
    }

    /* Fixes z-index stacking issue */
    * {
        position: relative;
        z-index: 1;
    }

    /* Hover Effect */
    #openModalBtn:hover {
        background: linear-gradient(to right, darkred 50%, lightgray 50%);
        transform: translateY(-50%) scale(1.1);
    }

    /* Slide-in Animation */
    @keyframes slide-in-right {
        from {
            transform: translateX(100px) translateY(-50%);
            opacity: 0;
        }
        to {
            transform: translateX(0) translateY(-50%);
            opacity: 1;
        }
    }

    .slide-in-right {
        animation: slide-in-right 0.5s ease-out;
    }

    /* Icon Styling */
    #openModalBtn i {
        margin-right: 5px;
        color: green; /* Adjust icon color */
    }    
    
.ftr {
    width: 100vw; 
    height: 100vh; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background: linear-gradient(to right, darkgreen, black);
}