html, body {
    height: 100%;
    margin: 0;
    font-family: "Inter", serif;
}

.bg-image {
    background-image: url('Images/imageformain.jpg'); 
    background-size: cover;
    background-position: center;
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(8, 8, 8, 0.7); */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.container {
    position: relative; /* Allow overlay to position correctly */
    z-index: 1; /* Ensure text is above the overlay */
}

h1 {
    font-size: 3rem; /* Adjusted font size for better visibility */
    font-weight: bold; /* Bold text for emphasis */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow for better legibility */
    font-family: "Inter", serif;
}

.lead {
    font-size: 1.2rem; /* Adjusted font size for the lead text */
    color: #E8F5E9; /* Light green for better contrast */
    margin-bottom: 1.5rem; /* Space below the paragraph */
}

.btn-custom {
    background-color: white; /* Bright Orange for the button */
    color: #ff8700; /* White text for button */
    border: none; /* Remove default border */
    border-radius: 50px; /* More rounded corners */
    padding: 12px 40px; /* Increased padding for a larger button */
    font-size: 1.1rem; /* Increased font size for the button text */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for button */
}

.btn-custom:hover {
    background-color: #FF6347; /* Lighter Orange on hover */
    transform: scale(1.1); /* Slightly enlarge the button on hover */
}


/* first part */

 /* Custom CSS for animations */
        /* Fade-in animation for the section */
        @keyframes fadeInSection {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Animate cards on hover */
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

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

        /* Hover effect for card images */
        .card-img-top {
            transition: transform 0.3s ease;
            height: 200px;
        }

        .card:hover .card-img-top {
            transform: scale(1.05);
        }

        /* Adding animation to the whole section */
        .animated-section {
            animation: fadeInSection 1s ease-out forwards;
        }

        /* Styling for the container and cards */
        .card-body {
            text-align: center;
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: bold;
        }

        .card-text {
            font-size: 1rem;
            color: #6c757d;
        }

        /* Utility for the hover effect */
        .hover-effect:hover {
            transform: translateY(-10px);
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* Adjust the background color and padding for the row */
        .bg-light-custom {
            background-color: #F2F1F1;
            padding: 30px;
        }





/* video part */

/* Initially hide the content with 0% opacity */
#content-left h2, #content-left p {
    opacity: 0;
    transform: translateY(20px); /* Slightly move them down to give a smooth effect */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* Apply the fade-in effect when the element is in view */
#content-left h2.fade-in, 
#content-left p.fade-in {
    opacity: 1;
    transform: translateY(0); /* Move them back to their original position */
}

/* Add delays for each element to make them appear one by one */
#header.fade-in {
    transition-delay: 0s; /* Header appears immediately */
}

#para1.fade-in {
    transition-delay: 0.3s; /* Paragraph 1 appears after a slight delay */
}

#para2.fade-in {
    transition-delay: 0.6s; /* Paragraph 2 appears after a further delay */
}

/* Basic styling for the container */
.container {
    margin-top: 50px;
    padding: 15px;
}

/* Ensure the video is responsive */
.img-fluid {
    width: 100%;
    height: auto;
    
}



        /* services part */
        h2 {
            color: darkorange;
        }

        /* Service Card Styles */
        .service-card {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(216, 3, 3, 0.1);
            transition: transform 0.3s ease;
            border-left: 5px solid orange;
            opacity: 0; /* Start with hidden cards */
            transform: translateY(50px); /* Initially positioned below */
            transition: opacity 1s ease, transform 1s ease; /* Add transition to opacity and position */
        }

        .service-card:hover {
            transform: scale(1.03);
            background-color: #f0f8ff;
        }

        .service-icon {
            font-size: 35px;
            color: #ff6347;
            margin-right: 15px;
            transition: color 0.3s ease;
        }

        .service-card:hover .service-icon {
            color: #ff4500;
        }

        .service-card h5 {
            font-size: 1.25rem;
            margin: 0;
            color: black;
        }

        .service-card p {
            font-size: 0.95rem;
            margin-top: 5px;
            color: #555;
        }

        /* CSS Animation for Slide Up */
        .service-card.show {
            opacity: 1;
            transform: translateY(0); /* Move the card to its original position */
        }

        /* Animation for Image - Slide in from left */
        .service-image {
            opacity: 0;
            transform: translateX(-50px); /* Initially positioned to the left */
            transition: opacity 1s ease, transform 1s ease; /* Add transition to opacity and position */
        }

        .service-image.show {
            opacity: 1;
            transform: translateX(0); /* Move the image to its original position */
        }



   /* Working Process Section */
   .working-process .container {
    max-width: 1200px; /* Ensures the container does not stretch beyond 1200px */
    margin: 0 auto; /* Centers the container */
    background-image: url('Images/OurWorkingProcessImg.PNG'); /* Background image path */
    background-size: cover; /* Ensures the image covers the entire container area */
    background-position: center; /* Centers the background image */
    border-radius: 15px; /* Rounds the corners of the container */
    padding: 40px 20px; /* Adds spacing inside the container */
    overflow: hidden; /* Prevents child elements from spilling outside */
}

.working-process .section-title {
    font-size: 2.5rem;
    color: orange;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-weight: bold;
}

.working-process .process-step {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    color: #333;
    box-shadow: 0 5px 15px rgba(196, 157, 157, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Initially positioned below */
    transition: opacity 1s ease, transform 1s ease; /* Add transition to opacity and position */
}

.working-process .process-step.show {
    opacity: 1;
    transform: translateY(0); /* Move the element to its original position */
}

.working-process .process-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(182, 105, 105, 0.3);
}

.working-process h4 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: black;
    font-weight: 600;
}

.working-process p {
    font-size: 0.9rem;
    color: #666;
}

@media (max-width: 768px) {
    .working-process .container {
        padding: 20px;
    }

    .working-process h4 {
        font-size: 1.1rem;
    }

    .working-process p {
        font-size: 0.8rem;
    }

    .working-process .step-number {
        font-size: 1.5rem;
    }
}



/* images part */

            /* Header Styling */
            #header-text {
                margin-top: 40px;
                font-weight: 600;
                text-align: center;
                font-size: 2.5rem;
                opacity: 0; /* Initially hidden */
                transform: translateY(-50px); /* Start off-screen */
                transition: opacity 1s ease, transform 1s ease;
            }
    
            #container1 {
                padding-top: 50px;
                padding-bottom: 50px;
                background-color: rgb(253, 243, 243);
                border-radius: 15px
            }
    
            /* Image container styling */
            .image-container {
                position: relative;
                overflow: hidden;
            }
    
            /* Styling for images */
            .image {
                width: 100%;
                height: 250px; /* Fixed height for all images */
                padding: 15px;
                object-fit: cover; /* Ensure images cover the area and do not stretch */
                border-radius: 20px;
                opacity: 0; /* Initially hidden */
                transform: scale(0.8); /* Initially scaled down */
                transition: opacity 1s ease, transform 1s ease;
            }
    
            /* Visible class will be added when the element is in the viewport */
            .image.visible {
                opacity: 1;
                transform: scale(1); /* Reset scale */
            }
    
            #header-text.visible {
                opacity: 1;
                transform: translateY(0); /* Move to normal position */
            }
    
            /* Media queries for responsiveness */
            @media screen and (max-width: 768px) {
                .col-md-3 {
                    flex: 0 0 50%;
                    max-width: 50%;
                }
            }

/* Client Feedback Section */
.client-feedback {
    background-color: white; /* Light background */
    padding: 50px 0;
}

.section-title {
    font-size: 1.8rem;
    color: #f57c00; /* Orange title color */
    margin-bottom: 20px;
}

.feedback-card {
    background-color: #EFEAEA;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 30px;
}

.client-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.feedback-content {
    margin-left: 20px;
    text-align: left;
}

.feedback-message {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin: 10px 0;
}

.client-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #d32f2f; /* Red for client name */
    text-transform: uppercase;
}

/* Carousel Controls (Now Hidden as we removed them) */
.carousel-control-prev,
.carousel-control-next {
    display: none !important; /* Hide the controls */
}

/* Carousel Inner Adjustments */
.carousel-inner {
    transition: transform 0.5s ease; /* Smooth transition for auto sliding */
}

/* Add indicator styling if you want to show carousel indicators */
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.carousel-indicators li {
    background-color: #f57c00; /* Orange indicator color */
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.carousel-indicators .active {
    background-color: #d32f2f; /* Red color for active indicator */
}

/* Responsive Design */
@media (max-width: 768px) {
    .feedback-card {
        flex-direction: column;
        text-align: center;
    }

    .client-image img {
        margin-bottom: 20px;
    }

    .feedback-content {
        margin-left: 0;
    }
}


/* footer part */

 .footer {
    background-color: #222121;
    color: #fff;
    padding: 40px 0;
    opacity: 0; /* Hidden initially */
    transform: translateY(50px); /* Slide-up effect */
    transition: all 0.8s ease-in-out;
}

.footer h5 {
    color: #ff8700;
    font-weight: bold;
}

.footer p, .footer ul li {
    color: #fff;
    font-size: 0.9rem;
    margin: 5px 0;
}

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

.footer ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer ul li a:hover {
    color: #ff8700;
}

.footer img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.footer.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Slide back to position */
}

.footer .fas {
    color: #ff8700; /* Same as the design color */
    margin-right: 10px;
    font-size: 1.2rem;
}

.pickup-text {
    color: #ff8700;
    font-size: 1.2rem;
    font-weight: bold;
}