@charset "utf-8";
/* CSS Document */

html, body {
    padding: 0;
    margin: 0;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    box-sizing: border-box;
}

.style-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.style-nav {
    background-color: white; /* Ensures menu background is white */
    text-align: center;
    padding: 10px 0;
}

.style-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.style-nav ul li {
    display: inline-block;
}

.style-nav ul li a {
    text-decoration: none;
    color: black; /* Changes text color to black */
    text-transform: uppercase;
    font-size: 20px;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

.style-nav ul li a:hover {
    color: FFFFFF;
}

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #FFFFFF;
    text-align: center;
}
.carousel-inner img {
    width: 100%;
    height: 500px;  /* Matches carousel container height */
    object-fit: contain; /* Ensures images fit inside without being cropped */
    background-color: white; /* Adds a background for images that don't fully fill */
}
.carousel-control-prev, .carousel-control-next {
    width: 50px;  
    height: 50px;  
    background-color: white;  /* Black box for visibility */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; /* Centers the arrows vertically */
    transform: translateY(-50%); /* Ensures exact centering */
}

.carousel-control-prev {
    left: 10px; /* Moves left arrow inside the carousel */
}

.carousel-control-next {
    right: 10px; /* Moves right arrow inside the carousel */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(1); /* Makes arrows white */
}

.carousel-indicators {
    display: none !important;
}
/* Specific styles for the custom carousel */
.custom-carousel {
    width: 700px; /* Set fixed width */
    margin: 20px auto; /* Center the carousel */
}

.custom-carousel .carousel-inner {
    width: 100%;
    height: 500px; /* Set fixed height */
    overflow: hidden;
}

.custom-carousel .carousel-inner img {
    width: 100%;
    height: 500px;
    object-fit: cover; /* Ensures images scale properly */
}

/* Adjust navigation arrows */
.custom-carousel .carousel-control-next-icon {
    background-color: black; /* Makes arrows visible */
    border-radius: 5px;
}

/* Hide the default indicators (dots/numbers) */
/* Styles specific to this carousel only */
.custom-carousel {
    width: 700px; /* Fixed width */
    margin: 20px auto; /* Centering */
    overflow: hidden; /* Prevents images from overflowing */
}

.custom-carousel .carousel-inner {
    width: 100%;
    height: 500px; /* Fixed height */
    display: flex;
    align-items: center;
    overflow: hidden;
}

.custom-carousel .carousel-item {
    width: 100%;
    height: 100%;
}

.custom-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the whole image fits inside without cutting off */
}

/* Styles specific to the portfolio carousel */
/* General Styles for the Carousel */
/* General Styles for the Carousel */
.custom-portfolio-carousel {
    width: 700px; /* Fixed width */
    height: 500px; /* Fixed height */
    margin: 20px auto; /* Centers the carousel */
    overflow: hidden; /* Prevents images from overflowing */
}

.custom-portfolio-carousel .carousel-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.custom-portfolio-carousel .carousel-item {
    width: 100%;
    height: 100%;
}

.custom-portfolio-carousel .carousel-item img {
    width: 100%; /* Forces the image to scale to 100% of the container */
    height: 100%; /* Forces the height to fill the container */
    object-fit: contain; /* Ensures the image fits inside without being cropped */
}

/* Adjust navigation arrows */
.custom-portfolio-carousel .carousel-control-prev, 
.custom-portfolio-carousel .carousel-control-next {
    width: 50px;  
    height: 50px;  
    background-color: white;  /* Black box for visibility */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; /* Centers the arrows vertically */
    transform: translateY(-50%); /* Ensures exact centering */
}

.custom-portfolio-carousel .carousel-control-prev {
    left: 10px; /* Moves left arrow inside the carousel */
}

.custom-portfolio-carousel .carousel-control-next {
    right: 10px; /* Moves right arrow inside the carousel */
}

.custom-portfolio-carousel .carousel-control-prev-icon, 
.custom-portfolio-carousel .carousel-control-next-icon {
    filter: invert(1); /* Makes arrows white */
}

.carousel-indicators {
    display: none !important; /* Hides default indicators (dots/numbers) */
}


/* Ensure the carousel is 700px wide and images scale properly */
#imageCarousel {
    width: 700px;  /* Set the fixed width for the carousel */
    height: 500px; /* Fixed height for the carousel */
    margin: 20px auto; /* Center the carousel horizontally */
    overflow: hidden; /* Hide any overflowing images */
}

#imageCarousel .carousel-inner {
    width: 100%;
    height: 100%;  /* Use 100% of the carousel's height */
    position: relative;  /* Ensures proper positioning of the carousel items */
}

#imageCarousel .carousel-item {
    width: 100%;
    height: 100%; /* Ensure the carousel items take full height */
}

#imageCarousel .carousel-item img {
    width: 100%; /* Force images to stretch to 100% of the container width */
    height: 100%; /* Force images to stretch to 100% of the container height */
    object-fit: contain; /* Make sure the image fits inside without being cropped */
}

/* Controls for the carousel */
#imageCarousel .carousel-control-prev, 
#imageCarousel .carousel-control-next {
    width: 50px;  
    height: 50px;  
    background-color: white; /* Visible controls */
    border-radius: 50%; /* Circular shape */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
}

#imageCarousel .carousel-control-prev {
    left: 10px;
}

#imageCarousel .carousel-control-next {
    right: 10px;
}

#imageCarousel .carousel-control-prev-icon, 
#imageCarousel .carousel-control-next-icon {
    filter: invert(1); /* White arrows */
}

.carousel-indicators {
    display: none !important; /* Hide the default carousel indicators (dots) */
}

.thanks-container {
    display: flex;
    align-items: center; /* Centers the items vertically */
    gap: 15px; /* Adjust the gap between the image and text */
}

.thanks-image {
    width: 40%; /* Adjust this percentage to control the image size */
    max-width: 200px; /* Optional, if you want to limit the maximum size */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Reduced margin to bring the text closer to the image */
}

.about-text {
    max-width: 60%; /* Optional, if you want to limit the text width */
    text-align: left;
}

.horizontal-layout {
    display: flex;
    justify-content: space-between; /* Distribute space between the divs */
    align-items: center; /* Vertically align the items */
    gap: 20px; /* Adjust the gap between the divs */
}

.left-box {
    width: 30%; /* Controls the width of the image container */
}

.thanks-image {
    width: 100%; /* Makes the image fill the container */
    height: auto;
}

.middle-box {
    width: 40%; /* Controls the width of the text container */
    text-align: left;
}

.right-box {
    width: 30%; /* Empty div to take up space on the right */
}

/* Optional: If you want the text and image to be responsive */
@media (max-width: 768px) {
    .horizontal-layout {
        flex-direction: column; /* Stacks the items vertically on smaller screens */
    }

    .left-box,
    .middle-box,
    .right-box {
        width: 100%; /* Make each div take up full width on smaller screens */
        margin-bottom: 20px; /* Optional, to add space between sections */
    }
}

/* Style for the social media icons container */
.social-links {
    margin-top: 10px;
    display: flex;
    gap: 20px; /* Space between icons */
    justify-content: flex-start; /* Align icons to the left */
}

/* Styling for the individual icons */
.social-links a img {
    width: 30px; /* Icon size */
    height: auto;
}

/* Contact button styling */
.contact-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
    display: inline-block;
}

.contact-button:hover {
    background-color: #2980b9;
}

//* Text area on the right */
.about-text {
    width: 50%; /* Adjust the width to suit your layout */
    color: black; /* Set text color to dark black */
    text-align: left;
    background: none; /* Ensure the background is transparent */
    padding: 20px;
    border-radius: 10px;
    box-shadow: none; /* Remove any potential shadow or blur on the text box */
    border: none; /* Remove any border that could be present */
}
.carousel-caption {
    background: transparent !important; /* Ensures the background is transparent */
    color: white;
    padding: 10px;
    font-size: 16px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
    border-radius: 5px;
}