/* General body and header styling */
body {
    background-image: linear-gradient(rgba(24, 23, 23, 0.774), rgba(226, 226, 226, 0.808)), url("../assets/image/Paladium-CoverPic_New.jpg");
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-size: cover;
    background-position: center;
}

header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: transparent;
}

hr.solid {
  border-top: 2px solid #fff;
}

/* Prevent FOUC by hiding content until fully loaded */
.no-fouc {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Flexbox container to align items */
.header-container {
    display: flex;
    justify-content: space-between; /* Align items to the start and end */
    align-items: center; /* Center items vertically */
}

/* Optional: Adjust spacing between items */
.header-spacing {
    margin-right: 20px; /* Adjust space between image and heading */
}

#mainHeader {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.fade-in {
    opacity: 1;
    visibility: visible;
}

.fade-out {
    opacity: 0;
    visibility: hidden;
}

.logo-img {
    max-width: 200px;
    height: auto;
    margin-left: -120px;
}


/* Other elements styling */
.paragraph-content {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.custom-img-size {
    height: 500px;
    width: 800px;
}

.bg-faded {
    background-color: rgba(255, 255, 255, 0.8); /* Adjust the transparency as needed */
    z-index: 1; /* Ensures the text block is above the carousel */
}

.carousel-inner {
    height: 100%; /* Fill the height of the container */
}

.carousel-item {
    height: 100%; /* Ensure items fill the height of the container */
}

.my-carousel {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide any overflow */
}

.my-carousel img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.my-carousel .carousel-inner {
    height: 100%; /* Ensure the inner container fills the height */
}

.my-carousel .carousel-item {
    height: 100%; /* Ensure each carousel item fills the height */
}

.my-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images cover the carousel area */
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.col-12 {
    padding-left: 0;
    padding-right: 0;
}

#mainNavs .navbar-nav .nav-link {
    color:#ffffff;
}

/*project.hmtl */

        .my-carousel {
            position: relative;
            width: 100%;
            height: 100vh; /* Adjust height as needed */
        }
        .my-carousel img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        .carousel-caption p {
            font-size: 1.5rem;
        }

        .container-fluid {
            padding-left: 15px;
            padding-right: 15px;
        }
        
        @media (max-width: 768px) {
            .carousel-caption p {
                font-size: 1rem;
            }
            .video-container {
                padding-bottom: 75%; /* Adjust aspect ratio for smaller screens if necessary */
            }
        }

        /* Full-width video */
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            background: #000;
        }
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Full-width iframe */
        .iframe-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            background: #000;
        }
        .iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }