html {
    scroll-behavior: smooth;
}

body {
    font-family: "Arial Narrow", sans-serif !important;;
	font-size: 16px;
    margin: 0;
    padding: 0;
	overflow-x: hidden;
    background-color: black; /* Default background color */
    color: white; /* Text color for better contrast */
}

/* Default Navbar Styles */
header {
    background-color: transparent; /* Transparent background for the hero section */
    color: white; /* Default text color */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Transparent Background for Mobile View in Hero Section */
@media (max-width: 992px) {
    header {
        background-color: transparent; /* Transparent background for mobile view */
        color: white; /* Keep text white for better readability */
        box-shadow: none; /* No shadow in hero section */
    }
}

/* Activated Navbar Background */
header.active {
    background-color: rgba(0, 0, 0, 0.9); /* Dark transparent background */
    color: white; /* Text color in activated state */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Optional shadow for depth */
}

/* Navbar Scrolled Background */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.9); /* Light background on scroll */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Adjust Navbar Links on Scroll */
header.scrolled .navbar-nav .nav-link {
    color: #333;
    border-bottom: 2px solid #333;
}

header.scrolled .navbar-nav .nav-link:hover {
    color: #999;
    border-bottom: 2px solid #999;
}

/* Highlight Active Links */
.nav-link.active {
    color: white; /* Default active link color */
    border-bottom: 2px solid white; /* Highlight with bottom border */
}

/* Active Links in Scrolled Mode */
header.scrolled .nav-link.active {
    color: #999; /* New font color in scroll mode */
    border-bottom: 2px solid #999; /* Bottom border in scroll mode */
}

/* Adjustments for Navbar in Mobile View */
.navbar-nav .nav-item .nav-link {
    color: #fff;
    font-size: 16px;
    padding: 10px 15px; /* Reduced padding */
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.navbar-nav .nav-item .nav-link:hover {
    color: #fff;
    border-bottom: 2px solid #fff;
}

/* Responsive Logo Styling */
.responsive-logo {
    width: auto;
    height: auto;
    max-width: 400px; /* Default logo size */
}

@media (max-width: 768px) {
    .responsive-logo {
        max-width: 200px; /* Smaller logo size for screens narrower than 768px */
    }
}

.logo-container {
    flex: 0 0 auto;
    margin-right: auto;
}

.logo-container img {
    width: 100%;
    height: auto;
}

/* Navbar Toggler - Default State */
.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler-icon {
    width: 30px;
    height: 3px;
    background-color: #fff; /* Default menu button color */
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

/* Navbar Toggler (Cross Button - Menu Open) */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-color: transparent; /* Remove background for cross */
	background-color: #333; /* Darker menu button for visibility */
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before,
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    background-color: #fff; /* Ensure cross (close button) visibility */
    transform: rotate(45deg); /* Create the cross */
    top: 0;
}

/* Menu Button Color in Scrolled State */
header.scrolled .navbar-toggler-icon {
    background-color: #333; /* Darker menu button for visibility */
}

header.scrolled .navbar-toggler-icon::before,
header.scrolled .navbar-toggler-icon::after {
    background-color: #333; /* Darker bars for scrolled mode */
}

/* Menu Button Cross (Close State) for Active Header */
header.active .navbar-toggler-icon {
    background-color: #333; /* Ensure menu button is visible */
}

header.active .navbar-toggler-icon::before,
header.active .navbar-toggler-icon::after {
    background-color: #fff; /* Ensure cross (close button) visibility */
}

/* Adjustments for Menu Button Lines */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    width: 100%;
    height: 3px;
    background-color: #fff; /* Default bar color */
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Navbar Toggler Active State */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(45deg);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before,
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    transform: rotate(90deg);
    top: 0;
}

/* Menu Button Active State Color */
header.active .navbar-toggler-icon {
    background-color: #fff; /* Keep menu button visible on activation */
}

header.active .navbar-toggler-icon::before,
header.active .navbar-toggler-icon::after {
    background-color: #fff; /* Keep bars visible on activation */
}

/*------------------------------------*/

.fade-in-section {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
	opacity: 1;
	transform: none;
}

.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/*.hero video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}*/
.hero .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    padding-top: 20%;
}

#hero {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.hero-top {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: black;
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.video-layered {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-layered video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Blurred filler behind the main video */
.video-background {
  object-fit: cover;
  filter: blur(10px) brightness(0.9);
  transform: scale(1.1);
  z-index: 0;
}

/* Foreground video with full visibility, no crop */
.video-foreground {
  object-fit: cover;
  z-index: 1;
}

/* Thumbnail Slider */
        .thumbnail-slider {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100vw;
            background: rgba(0, 0, 0, 0.8);
            padding: 0;
            z-index: 10;
        }

        /* Thumbnail Styling */
        .thumbnail {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        .thumbnail img {
            width: 100vm;
            height: auto;
            /*border-radius: 5px;*/
            transition: opacity 0.3s ease-in-out;
        }
		
	    .swiper	{
			padding: 0px !important;
		}
		
        /* Caption Styling */
        .caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            padding: 8px 10px;
            text-align: center;
            border-radius: 0 0 5px 5px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
@media screen and (max-width: 1024px) {
    .caption {
        font-size: 18px;
    }
	.swiper-slide .description-sm {
        font-size: 10px;
    }
}

@media screen and (max-width: 768px) {
    .caption {
        font-size: 16px;
    }
	.swiper-slide .description-sm {
        font-size: 10px;
    }
}

@media screen and (max-width: 480px) {
    .caption {
        font-size: 14px;
    }
	.swiper-slide .description-sm {
        display: none;
    }
	
}

@media screen and (max-width: 320px) {
    .caption {
        font-size: 12px;
    }
}


        /* Show caption on hover */
        .swiper-slide:hover .caption {
            opacity: 1;
            visibility: visible;
        }

        /* Bootstrap Compatible Navigation */
        .swiper-button-prev,
        .swiper-button-next {
            color: white !important;
            font-size: 24px;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .swiper-button-prev::after,
        .swiper-button-next::after {
            font-size: 30px;
        }

        /* Hide pagination dots */
        .swiper-pagination {
            display: none !important;
        }

/* About section */

.about {
    padding: 50px;
    text-align: left; /* Keep content aligned to the left */
    background-color: #f0f0f0; /* Light gray background */
    background-image: url('../images/cp-bg.png'); /* Replace with your image URL */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

/* Center the title only when not in responsive mode */
.about h1, .about h2, .about h3 { /* Adjust for different heading levels if applicable */
    text-align: center; /* Center align the title */
    margin-bottom: 20px;
}
.about img {
    display: inline-block; /* Default setting for images */
    margin: 0; /* No automatic centering for larger screens */
	border: 1px solid #999; /* Black border with 5px width */
	padding: 5px;
	border-radius: 5px;
}
.teambg {
	background-color: #f0f0f0; /* Light gray background */
	padding: 30px 5px;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.teambg2 {
	background-color: #b9d3cb; /* Light gray background */
	padding: 10px 5px;
	border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* Responsive adjustment to revert the title alignment */
@media (max-width: 768px) {
    .about h1, .about h2, .about h3 {
        text-align: left; /* Revert to left alignment in smaller screens */
    }
	.about img {
        display: block; /* Allows proper centering */
        margin: 10px auto; /* Centers images horizontally */
    }
}

/* Certificates section */
.certificates {
    padding: 50px 0;
    text-align: center;
    background-color: #e0e0e0; /* Light gray background */
}

/* Certificate gallery */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the gallery items */
    align-items: center; /* Align items vertically for consistency */
    gap: 20px; /* Adds spacing between items */
    margin: 20px auto; /* Center the gallery and add spacing around it */
}

.gallery img {
    padding: 10px;
    margin: 10px;	
    width: 100%;
    max-width: 300px; /* Keep consistent size for images */
    cursor: pointer;
    border: 1px solid #999; /* Slightly thicker border for clarity */
    border-radius: 5px; /* Rounded corners for a smoother look */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

.gallery img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add a stronger shadow on hover */
}

/* Certificate Modal image styling */
.modal-body img {
    max-width: 90%; /* Keep the image smaller for smaller screens */
    max-height: 65vh; /* Ensure it fits within the viewport */
    height: auto; /* Maintain the aspect ratio */
    display: block;
    margin: auto; /* Center the image horizontally and vertically */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a soft shadow */
}

/* Awards section */
.awards {
    padding: 50px 0;
    text-align: center; /* Keep content centered */
    background-color: #f0f0f0; /* Light gray background */
    background-image: url('../images/cp-bg.png'); /* Replace with your image URL */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    justify-content: center; /* Center modal content horizontally */
    align-items: center; /* Center modal content vertically */
}

/* -- ProjectSectionStyle -- */

.projects {
    padding: 50px 10px;
    text-align: center; 
    justify-content: center; /* Center the grid horizontally */
    background-color: #e0e0e0; /* Slightly darker gray background */
}

.projects .container {
    max-width: 100vw;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 20px; /* Spacing between items */
    justify-content: center; /* Centers the grid items */
}

.projects h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.projects p {
    margin-bottom: 30px;
    color: #333;
}

.filters {
    text-align: center;
    margin-bottom: 20px;
}

.filter-button {
    padding: 10px 20px;
    margin: 5px;
    background: linear-gradient(135deg, #556b2f, #6b8e23); /* Olive gradient */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.filter-button:hover {
    background: linear-gradient(135deg, #6b8e23, #8fbc8f); /* Darker olive gradient */
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.controls {
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#searchInput {
    width: 50%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#sortSelect {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f0f0f0;
    cursor: pointer;
}

button:hover {
    background-color: #ddd;
}
/* Style for the professional title */
#galleryTitle {
	font-size: 1.8em;
	color: #343a40; /* Neutral and professional color */
	font-weight: bold;
	text-transform: uppercase; /* Adds emphasis */
	margin-bottom: 10px; /* Spacing for clean look */
	text-align: center; /* Center-align for a polished layout */
}

/* Style for the counter display */
#counter {
	font-size: 2.5em;
	color: #6c757d; /* Flashy and engaging */
	font-weight: bold;
	text-align: center;
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Ensure proper spacing between items */
    justify-content: center; /* Aligns grid items to the center */
}

.gallery-item {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    /*max-width: 266px; /* Sets a consistent item width */
    margin: 10px auto; /* Center-align items */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0; /* Flat edges for the images */
}

.gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures the image fills without distortion */
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05); /* Zoom effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Shadow for hover effect */
}

.description-sm {
    text-align: center;
    font-size: 14px;
    padding: 8px;
    background-color: #f0f0f0;
    color: #888; /* Text color for descriptions */
}

/* Modal styles */
.project-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}
.project-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
/* Base styles for the carousel */
.carousel {
    position: relative;
    width: 100%; /* Ensure the carousel takes up full available width */
    max-width: 800px; /* Restrict the maximum width for larger screens */
    margin: auto; /* Centers the carousel horizontally */
    display: flex;
    flex-direction: column; /* Vertical stacking (title, image, description) */
    align-items: center; /* Centers elements horizontally */
    justify-content: center; /* Centers content vertically */
    overflow: hidden; /* Prevents content overflow */
    text-align: center;
    padding: 0 10px; /* Adds padding to prevent edge touching */
    box-sizing: border-box; /* Includes padding in dimensions */
}

/* Title styling */
.carousel-title {
    color: white;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    width: 100%;
    text-align: center; /* Centers the title */
}

/* Image styling */
.carousel img {
    width: 100%; /* Forces the image to always fit the container width */
    max-width: 100%; /* Prevents image from exceeding parent size */
    max-height: 80vh; /* Restricts image height based on viewport */
    object-fit: contain; /* Ensures the image doesn't crop */
    margin: auto;
    display: block;
}

/* Description styling */
.carousel-description {
    color: white;
    font-size: 16px;
    margin-top: 10px;
    width: 100%;
    text-align: center; /* Centers description text */
}

/* Close button styling */
.project-close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10; /* Ensures the close button stays above other elements */
}

/* Navigation arrows */
.navigation {
    position: absolute;
    top: 50%; /* Centers the arrows vertically relative to the carousel */
    width: 100%; /* Ensures arrows are placed relative to the carousel width */
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10; /* Keeps the arrows above all elements */
    box-sizing: border-box;
    padding: 0 10px; /* Prevents arrows from going off-screen */
}

.prev, .next {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better visibility */
    border-radius: 50%; /* Circular controls */
    cursor: pointer;
    user-select: none;
    z-index: 10; /* Keeps the controls clickable */
}

.prev {
    left: 10px; /* Keeps the left arrow inside bounds */
}

.next {
    right: 10px; /* Keeps the right arrow inside bounds */
}

.prev i, .next i {
    font-size: 24px;
    color: white;
    transition: color 0.3s;
}

.prev:hover i, .next:hover i {
    color: #ccc; /* Adds hover effect */
}

/* RESPONSIVENESS */

/* For screens smaller than 800px */
@media (max-width: 800px) {
    .carousel {
        padding: 0 15px; /* Adds more padding to prevent edge overlap */
    }

    .carousel img {
        max-height: 70vh; /* Adjusts image height to prevent overflow */
        width: 100%; /* Ensures the image fits within its container */
    }

    .carousel-title {
        font-size: 20px; /* Scales down the title size */
    }

    .carousel-description {
        font-size: 14px; /* Adjusts the description size */
    }

    .prev, .next {
        width: 35px; /* Reduces control size for smaller screens */
        height: 35px;
    }

    .prev i, .next i {
        font-size: 18px; /* Reduces arrow icon size */
    }
}

/* For screens smaller than 500px */
@media (max-width: 500px) {
    .carousel img {
        max-height: 60vh; /* Reduces image height further for small screens */
        width: 100%; /* Keeps proportional scaling */
    }

    .carousel-title {
        font-size: 16px; /* Scales down the title size further */
    }

    .carousel-description {
        font-size: 12px; /* Reduces the description size */
    }

    .prev, .next {
        width: 30px; /* Reduces control size for ultra-small screens */
        height: 30px;
    }

    .prev i, .next i {
        font-size: 14px; /* Reduces arrow icon size further */
    }
}


/*-- Services section --*/

.services {
    padding: 50px;
    text-align: left; /* Keep content aligned left */
    background-color: #d0d0d0; /* Darker gray background */
    background-image: url('../images/cp-bg.png'); /* Replace with your image URL */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    
}
/* Center the title only when not in responsive mode */
.services h1, .services h2, .services h3 { /* Adjust for different heading levels if applicable */
    text-align: center; /* Center align the title */
    margin-bottom: 20px;
}
.services img {
    display: inline-block; /* Default setting for images */
    margin: 0; /* No automatic centering for larger screens */
	border: 1px solid #999; /* Black border with 5px width */
	padding: 5px;
	border-radius: 5px;
}
/* Responsive adjustment to revert the title alignment */
@media (max-width: 768px) {
    .services h1, .services h2, .services h3 {
        text-align: left; /* Revert to left alignment in smaller screens */
    }
	.services img {
        display: block; /* Allows proper centering */
        margin: 10px auto; /* Centers images horizontally */
    }
}

/*-- Contact section --*/

.contact {
    padding: 50px 0;
    text-align: center;
    background-color: #c0c0c0; /* Even darker gray background */
}
.contact-form .form-group label {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left; /* Align the label to the left */
    display: block; /* Ensure the label behaves like a block element */
}
.form-group label {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.form-group #captcha {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

.form-group #captcha:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.contact .company-info {
    text-align: left; /* Align text to the left for professional appearance */
    margin-bottom: 20px; /* Add space between company info and map */
    background-color: #fff; /* White background */
    padding: 15px; /* Add padding for spacing */
    border-radius: 4px; /* Rounded corners */
}

.contact .company-info h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.contact .company-info p {
    margin: 0;
    line-height: 1.6;
    color: #555; /* Subtle text color for readability */
}

.contact .company-info a {
    color: #007bff; /* Match Bootstrap's blue for links */
    text-decoration: none;
}

.contact .company-info a:hover {
    text-decoration: underline; /* Add underline on hover for links */
}

footer {
    padding: 20px 0;
    text-align: center;
    background-color: #d3d3d3; /* Light gray background for the footer */
    color: black; /* Black text for better contrast in the footer */
}

#devco {
    color: #007bff; /* Inherits the text color of the parent element */
    text-decoration: none; /* Removes the underline from the link */
}

#devco:hover {
    color: #999999; /* Change to your desired color on hover (example: blue) */
}


@media (max-width: 768px) {
    .hero .hero-content {
        padding-top: 30%;
    }

    .about, .projects, .services, .contact {
        padding: 30px;
    }

    .projects .project {
        margin-bottom: 20px;
    }
}