/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: black; /* Ensures the text color is black everywhere */
}

/* Navbar Logo Styling */
.navbar-brand {
    display: flex;
    justify-content: center; /* Center the logo */
    align-items: center; /* Vertically align the logo */
}

.navbar-brand img {
    height: 120px; /* Set the desired height */
    width: auto;  /* Maintain aspect ratio */
    max-width: 100%; /* Prevent from exceeding container width */
    transition: transform 0.3s ease; /* Smooth zoom effect */
}


/* Navbar Text (Links and Logo) */
.navbar .navbar-brand, 
.navbar .navbar-nav .nav-link {
    color: black !important;  /* Set text color to black */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Navbar Link Hover Effect */
.navbar .navbar-nav .nav-link:hover {
    color: #f39c12; /* Change color on hover */
}

/* Optional: Navbar Background Color */
.navbar {
    background-color: white; /* Set the navbar background to white */
    border-bottom: 1px solid #ddd; /* Optional: Add a subtle bottom border */
}


/* Hover effect for logo */
.navbar-brand img:hover {
    transform: scale(1.1); /* Optional zoom effect */
}

/* Mobile View: Logo responsive sizing */
@media (max-width: 767px) {
    .navbar-brand img {
        height: 50px; /* Smaller logo on mobile */
    }
}
/* Hero Section */
.hero {
    height: 70vh;
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
/* General Styling for the Intro Section */
.intro {
    text-align: center;
    padding: 5rem 1rem; /* Adjust padding for spacing */
    background-color: #f8f9fa; /* Light background for contrast */
}

/* Typing Animation for the Title */
.intro h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    overflow: hidden; /* Hide overflowing text */
    white-space: nowrap; /* Prevent text from wrapping */
    width: 0; /* Start with 0 width */
    animation: typing 4s steps(40) 1s forwards, blink 0.75s step-end infinite; /* Typing and blinking cursor animation */
}

/* Typing Animation */
@keyframes typing {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* Blinking Cursor Effect */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* Typing Animation for the Paragraph */
.intro p {
    font-size: 1.2rem;
    color: #6c757d;
    margin-top: 1.5rem;
    opacity: 0; /* Initially hidden */
    animation: fadeInText 4s ease 4.5s forwards; /* Fade-in effect after a delay */
}

/* Fade-in Animation for Paragraph */
@keyframes fadeInText {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* Animation for the h1 */
.hero h1 {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Added shadow for readability */
    animation: slideInFromLeft 3s ease-out forwards; /* Animation for sliding in from the left */
}

/* Animation for the p tag */
.hero p {
    font-size: 1.5rem;
    margin-top: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Added shadow for readability */
    animation: slideInFromRight 3s ease-out 0.5s forwards; /* Animation for sliding in from the right */
}

/* Animation for the button */
.hero .btn {
    font-size: 1.2rem;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 25px;
    background-color: #f39c12;
    border: none;
    transition: background-color 0.3s ease;
    animation: slideInFromBottom 2s ease-out 1s forwards; /* Animation for sliding in from the bottom */
}

/* Keyframes for sliding in from the left */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%); /* Start off-screen to the left */
        opacity: 0; /* Start with opacity 0 */
    }
    100% {
        transform: translateX(0); /* Move to the normal position */
        opacity: 1; /* Fully visible */
    }
}

/* Keyframes for sliding in from the right */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%); /* Start off-screen to the right */
        opacity: 0; /* Start with opacity 0 */
    }
    100% {
        transform: translateX(0); /* Move to the normal position */
        opacity: 1; /* Fully visible */
    }
}

/* Keyframes for sliding in from the bottom */
@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%); /* Start off-screen at the bottom */
        opacity: 0; /* Start with opacity 0 */
    }
    100% {
        transform: translateY(0); /* Move to the normal position */
        opacity: 1; /* Fully visible */
    }
}

/* Hover effect for button */
.hero .btn:hover {
    background-color: blue; /* Darken button color on hover */
}


/* Button hover effect */
.hero .btn:hover {
    background-color: blue;
}

/* Mobile View: Adjust hero for smaller screens */
@media (max-width: 767px) {
    .hero {
        height: 40vh;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.2rem;
    }

    .hero .btn {
        font-size: 1rem;
        padding: 8px 25px;
    }
}

/* Section Styling: Intro, What We Offer, CTA */
.intro, .what-we-offer, .cta {
    padding: 3rem 1rem;
    text-align: center;
}

/* Subheading styles for intro, what we offer, and cta sections */
.intro h2, .what-we-offer h2, .cta h3 {
    font-size: 2rem;
    font-weight: bold;
    color: black;
    text-align: center;
    transition: transform 0.5s ease-in-out;
}

/* Paragraph styles for these sections */
.intro p, .what-we-offer p, .cta p {
    font-size: 1.2rem;
    color: black; /* Subtle gray text */
}

/* What We Offer Section */
.what-we-offer h2, .what-we-offer p {
    margin: 0;
    padding: 0;
    text-align: center;
    opacity: 0; /* Initially hidden for animation */
    transform: translateY(30px); /* Start position slightly lower */
    transition: opacity 1s ease, transform 1s ease; /* Smooth transition for opacity and movement */
}

/* Animation for Heading */
.what-we-offer h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* Animation for Paragraph */
.what-we-offer p {
    font-size: 1.2rem;
    color: black;
    margin-bottom: 2rem;
}

/* Keyframes for the animation to slide in and fade in */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px); /* Start slightly below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Move to normal position */
    }
}

/* Delayed Animation for Heading and Paragraph */
.what-we-offer h2 {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.5s; /* Slight delay to stagger animation */
}

.what-we-offer p {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1s; /* Paragraph will come after heading */
}


/* Styling for offer images inside the What We Offer section */
.what-we-offer .offer-image {
    width: 300px; /* Set fixed width for images */
    height: 200px; /* Fixed height */
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for box */
    margin: 10px; /* Adds spacing between images */
    opacity: 0; /* Initially hidden for animation */
    transform: translateY(50px); /* Start from slightly below */
    transition: transform 3s ease, opacity 3s ease; /* Smooth transition for hover */
    animation: fadeInUp 3s ease-out forwards; /* Animation for fade and upward movement */
}

/* 1-by-1 Staggered Animation (each one comes after the other) */
.what-we-offer .offer-image:nth-child(1) {
    animation-delay: 0s;
}

.what-we-offer .offer-image:nth-child(2) {
    animation-delay: 1s;
}

.what-we-offer .offer-image:nth-child(3) {
    animation-delay: 2s;
}

.what-we-offer .offer-image:nth-child(4) {
    animation-delay: 3s;
}

/* 2-by-2 Staggered Animation (pairs of images come in together) */
.what-we-offer .offer-image:nth-child(odd) {
    animation-delay: 0s; /* Odd images start first */
}

.what-we-offer .offer-image:nth-child(even) {
    animation-delay: 2s; /* Even images start after the odd images */
}

/* Image styling */
.what-we-offer .offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
    transition: transform 3s ease; /* Smooth zoom effect */
}

/* Hover effects for the image box and zoom effect */
.what-we-offer .offer-image:hover img {
    transform: scale(1.1); /* Image zoom effect */
    transition: transform 3s ease; /* Smooth transition for hover */
}

/* Hover effect for the image box */
.what-we-offer .offer-image:hover {
    transform: translateY(-10px); /* Moves the image box up */
}
/* Hover effect for text inside image box */
.what-we-offer .offer-image:hover h3 {
    opacity: 1; /* Text becomes visible */
    transform: translate(-50%, -50%) translateY(-10px); /* Text moves up */
}

/* Animation for fade and upward movement */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px); /* Start slightly below */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Move to the normal position */
    }
}

/* Mobile View Adjustments */
@media (max-width: 767px) {
    .what-we-offer .container {
        flex-direction: column; /* Stack images vertically */
        align-items: center;
    }

    .what-we-offer .offer-image {
        width: 90%; /* Make images responsive for mobile */
        margin-bottom: 1rem; /* Adds space between images */
    }

    .what-we-offer .offer-image h3 {
        font-size: 1.2rem; /* Adjust text size on mobile */
    }
}


/* Footer Section */
footer {
    background-color: white !important;  /* Force the white background */
    color: black;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid #ddd; /* Optional: Add a subtle border at the top */
    box-sizing: border-box;  /* Ensure padding doesn’t affect layout */
}

/* Footer Buttons */
.footer-buttons {
    margin-bottom: 1.5rem;
}

.footer-buttons .btn-link {
    text-decoration: none;
    margin: 0 10px;
    font-size: 1.1rem;
}

.footer-buttons .btn-link:hover {
    color: #f39c12; /* Hover effect on buttons */
}

/* Footer Icons */
.footer-icons a {
    color: white;
    font-size: 1.5rem;
    margin: 0 15px;
}

.footer-icons a:hover {
    color: #f39c12; /* Hover effect on icons */
}

/* Optional: Styling for Address Information */
footer p {
    font-size: 1rem;
    margin-top: 1.5rem;
}

/* Container for the social media icons */
.social-media-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Adds space between icons */
    margin-top: 2rem;
}

/* Styling individual icon link */
.social-icon {
    font-size: 1.8rem; /* Icon size */
    color: #555; /* Default color for icons */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover transition */
}

/* Hover effect for icons */
.social-icon:hover {
    color: #f39c12; /* Icon color on hover */
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Tooltip for icon hover (showing the name of social media) */
.social-icon[title] {
    position: relative;
}

.social-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 5px;
    font-size: 0.9rem;
    border-radius: 3px;
    white-space: nowrap;
}



/* Mobile View Adjustments for Footer */
@media (max-width: 767px) {
    footer {
        padding: 15px 0; /* Adjust footer padding for mobile */
    }
}