/********** Template CSS **********/
:root {
    --primary: #7BDB4C;
    --secondary: #FDBE33;
    --light: #F4F6F8;
    --dark: #040F28;
}

.pt-6 {
    padding-top: 90px;
}

.pb-6 {
    padding-bottom: 90px;
}

.py-6 {
    padding-top: 90px;
    padding-bottom: 90px;
}

.btn {
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
    transition: .5s;
}

.btn::after {
    position: absolute;
    content: "";
    width: 0;
    height: 5px;
    bottom: -1px;
    left: 50%;
    background: var(--primary);
    transition: .5s;
}

.btn.btn-primary::after {
    background: var(--dark);
}

.btn:hover::after,
.btn.active::after {
    width: 50%;
    left: 25%;
}

.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.back-to-top {
    position: fixed;
    display: none;
    left: 50%;
    bottom: 0;
    margin-left: -22px;
    border-radius: 0;
    z-index: 99;
}

.bg-dark-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: -o-repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
    margin-left: 3rem; /* Matches ms-5 */
    padding: 1.5rem; /* Matches p-4 */
}

.bg-light-radial {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: -o-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
    background-size: 3px 3px;
}

.navbar-dark .navbar-nav .nav-link {
    position: relative;
    padding: 35px 15px;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--light);
    outline: none;
    transition: .5s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link  {
        margin-left: 0;
        padding: 10px 0;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 15, 40, .7);
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h4 {
        font-size: 18px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

@media only screen and (max-width: 768px) {
    .img-fluid-fixed {
        width: 100%; /* Adjust width to 100% for mobile devices */
        height: auto; /* Reset height to auto for mobile devices */
        max-height: 450px; /* Optionally set a max-height for mobile devices */
    }
}

.page-header {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(4, 15, 40, .7), rgba(4, 15, 40, .7)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.service-item .service-icon {
    margin-top: -50px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

.service-item .service-icon i {
    transition: .2s;
}

.service-item:hover .service-icon i {
    font-size: 60px;
}

.portfolio-item {
    margin-bottom: 60px;
}

.portfolio-title {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 120px;
    padding: 0 30px;
    right: 30px;
    left: 30px;
    bottom: -60px;
    background: #FFFFFF;
    z-index: 3;
}

.portfolio-btn {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    font-size: 120px;
    line-height: 0;
    transition: .1s;
    transition-delay: .3s;
    z-index: 2;
    opacity: 0;
}

.portfolio-item:hover .portfolio-btn {
    opacity: 1;
}

.portfolio-box::before,
.portfolio-box::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    transition: .5s;
    z-index: 1;
    background: rgba(4, 15, 40, .7);
}

.portfolio-box::before {
    left: 0;
}

.portfolio-box::after {
    right: 0;
}

.portfolio-item:hover .portfolio-box::before {
    left: 0;
    width: 50%;
}

.portfolio-item:hover .portfolio-box::after {
    right: 0;
    width: 50%;
}

@media (min-width: 992px) {
    .testimonial,
    .contact-form {
        margin-left: -90px;
    }
}

@media (min-width: 992px) {
    .footer::after {
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        top: 0;
        left: 50%;
        background: var(--primary)
    }
}

.footer-shape::before {
    position: absolute;
    content: "";
    width: 80px;
    height: 100%;
    top: 0;
    left: -40px;
    background: var(--primary);
    transform: skew(40deg);
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #2E2E2E;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#2E521C, #8FFF58);
    border-radius: 5px;
}

/* Success message styling */
#submitSuccessMessage {
    background-color: #363636 !important; /* Dark background */
    font-weight: bold !important;
    color: #fff !important; /* White text color */
    border-color: #7BDB4C !important; /* Green border */
    width: auto; /* Adjust width as needed, auto for content width or specific px/em/% value */
    max-width: 50%; /* Example max-width, adjust based on your button size */
    margin: 10px auto; /* Centering the box */
    display: block; /* Ensure it's a block element for margin auto to work */
    text-align: center; /* Center the text inside the box */
}

#submitSuccessMessage .fas.fa-check-circle {
    color: #7BDB4C !important; /* Keep the green checkmark */
    margin-right: 5px; /* Adjust spacing next to the icon if needed */
}

.center-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    align-content: center;
}

@media (max-width: 600px) { /* Responsive adjustments for screens up to 600px wide */
    .center-container {
        padding: 20px; /* Adds padding around the content */
        box-sizing: border-box; /* Includes padding in the width calculation */
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        align-content: center;
    }
}

/* Custom style to ensure vertical and horizontal centering on mobile */
.center-container-mobile {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%; /* Take full width to ensure centering within the parent */
    height: 50px; /* Optional: Adjust height as needed */
}

/* Ensuring text is visible against the dark background */
/* .center-container-mobile p {
    color: white; /* White color for text */
/* } */

.image-container img {
    width: 100%;
    height: auto;
    min-height: 400px;
    object-fit: cover;
}

/* Styles for the about section image */
.about-image {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    max-height: 500px; /* Cap for desktop */
    display: block; /* Center alignment */
    margin: 0 auto; /* Center horizontally */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow from original */
    object-fit: cover; /* Ensure no distortion */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bg-dark-radial {
        margin-left: 0 !important; /* Remove margin for full width */
        padding: 1rem !important; /* Consistent padding */
        width: 100%; /* Ensure container takes full width */
        box-sizing: border-box; /* Include padding in width */
    }

    .about-image {
        width: 100%; /* Full width of parent container */
        max-height: none; /* Remove cap for mobile */
        min-height: 400px; /* Ensure it’s large enough */
        height: auto; /* Maintain aspect ratio */
        margin: 0 auto; /* Explicitly center */
        display: block; /* Ensure block-level centering */
    }

    .col-lg-5 {
        padding-bottom: 1.5rem !important; /* Adjust spacing */
        padding-left: 0; /* Remove left padding for full width */
        padding-right: 0; /* Remove right padding for full width */
    }
}

/* Desktop reinforcement */
@media (min-width: 769px) {
    .bg-dark-radial {
        margin-left: 3rem; /* Ensure ms-5 equivalence */
        padding: 1.5rem; /* Ensure p-4 equivalence */
    }

    .about-image {
        max-height: 500px; /* Original desktop cap */
        width: auto; /* Natural width up to container */
    }
}

/* Additions for Services section */
.image-container {
    display: flex; /* Enable flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%; /* Full width of parent */
    padding: 1.5rem; /* Matches p-4 */
}

.service-image {
    width: 100%; /* Full width of the container */
    min-width: 300px; /* Minimum width */
    height: auto; /* Maintain aspect ratio */
    min-height: 300px; /* Minimum height */
    max-height: 400px; /* Cap for desktop, matches original inline style */
    display: block; /* Ensure block-level behavior */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
    object-fit: cover; /* Ensure no distortion */
}

/* Mobile adjustments for Services section */
@media (max-width: 768px) {
    .image-container {
        margin-left: 0 !important; /* Remove margin for full width */
        padding: 1rem !important; /* Consistent padding */
        width: 100%; /* Ensure container takes full width */
        box-sizing: border-box; /* Include padding in width */
        display: flex; /* Keep flexbox for centering */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        overflow: hidden; /* Prevent image overflow */
    }

    .service-image {
        width: 100% !important; /* Full width of parent container */
        max-width: 100% !important; /* Prevent exceeding container width */
        min-width: 0; /* Allow shrinking below 300px if container is smaller */
        max-height: none !important; /* Remove cap for mobile */
        min-height: 300px !important; /* Minimum height */
        height: auto !important; /* Maintain aspect ratio */
        margin: 0 !important; /* Remove margins for flex centering */
        display: block !important; /* Ensure block-level behavior */
    }

    .col-lg-4,
    .col-md-6 {
        padding-bottom: 1.5rem !important; /* Adjust spacing */
        padding-left: 0 !important; /* Remove left padding for full width */
        padding-right: 0 !important; /* Remove right padding for full width */
    }
}

/* Desktop reinforcement for Services section */
@media (min-width: 769px) {
    .service-image {
        max-height: 400px !important; /* Original desktop cap */
        width: auto !important; /* Natural width up to container */
        min-width: 300px !important; /* Minimum width */
        min-height: 300px !important; /* Minimum height */
    }
}

/* Fix for overlapping images at specific breakpoints */
@media (max-width: 1600px) {
    .row.g-5 {
        display: flex;
        flex-wrap: wrap; /* Ensure items wrap to new rows */
        justify-content: center; /* Center items */
    }

    .col-lg-4,
    .col-md-6 {
        flex: 0 0 100%; /* Force full width on smaller screens */
        max-width: 100%; /* Ensure full width */
        margin-bottom: 2rem; /* Add spacing between stacked items */
    }

    .service-image {
        min-width: 0; /* Allow shrinking below 300px */
        max-width: 100%; /* Fit within container */
        width: 100%; /* Full width of parent */
    }
}