/* Global Styles */
body, h1, h2, p, a, .navbar, .nav-link, .btn, .section-divider, .card, .social-icons, input, textarea {
    transition: background-color 0.2s, color 0.2s !important; /* Smooth transition for theme changes */
}

/* Global Styles for Section Divider */
.section-divider {
    width: 90%; /* Adjust the width as needed */
    margin: 80px auto; /* Provides vertical margin and centers horizontally */
    padding: 0; /* Remove vertical padding to make it thinner */
    height: 1px; /* Adjust the height to make it thinner (e.g., 2 pixels) */
    background-color: #000; /* Default color */
    transition: background-color 0.2s; /* Smooth transition for color changes */
}

/* Global styling for all section headers */
h1 {
    color: #0077b5; /* Replace with the desired color */
}


/* Heading Divider */
.heading-divider {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heading-divider::before,
.heading-divider::after {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: #000; /* Divider color */
}

.heading-divider::before {
    margin-right: 10px;
}

.heading-divider::after {
    margin-left: 10px;
}

.heading-divider h1 {
    padding: 0 10px;
    background: #FFF; /* Background color for the heading text */
}

@media (max-width: 768px) {
    .heading-divider::before,
    .heading-divider::after {
        height: 1px;
    }
    .heading-divider h1 {
        padding: 0 20px; /* Increase padding for smaller screens */
    }
}

/* Navbar Link Hover */
.navbar-nav .nav-link:hover {
    color: #0077b5 !important; /* Change text color on hover */
    transition: color 0.2s; /* Smooth transition for color change */
}


/* Navbar Link Styles with Divider */
.navbar-nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0 15px; /* Adjust padding as needed */
    position: relative; /* Needed for the divider */
}

.navbar-nav .nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    height: 100%; /* Full height of the navbar */
    width: 1px; /* Width of the divider */
    right: 0; /* Position on the right */
    background-color: black; /* Set the divider color to black */
    opacity: 0.6; /* Slight transparency for a softer effect */
}

.navbar-nav .nav-link {
    color: #000000; /* Black text */
    transition: color 0.2s; /* Smooth transition for hover color change */
}


/* Dropdown Menu */
.dropdown-menu {
    background-color: #f8f9fa; /* Light background for the dropdown */
    border-radius: 5px;
    border: 1px solid #ddd; /* Light border */
}

.dropdown-menu .dropdown-item {
    color: #000; /* Black text */
    padding: 10px 20px; /* Padding inside dropdown items */
}



/* General Dropdown Menu Styles */
.dropdown-menu {
    background-color: #f8f9fa; /* Light background for the dropdown */
    border-radius: 5px;
    border: 1px solid #ddd; /* Light border */
}

/* Dropdown Items */
.dropdown-menu .dropdown-item {
    color: #000; /* Black text */
    padding: 10px 20px; /* Padding inside dropdown items */
}

.dropdown-menu .dropdown-item:hover {
    background-color: #0077b5; /* Blue background on hover */
    color: white; /* White text on hover */
}








/* Custom Text Selection Styles */
::selection {
    background-color: black; /* Black background when text is selected */
    color: white; /* White text when selected */
}

/* For Firefox */
::-moz-selection {
    background-color: black; /* Black background for Firefox */
    color: white; /* White text for Firefox */
}



/* Buttons */
.btn, .btn-success {
    background-color: #ffffff; /* White buttons */
    color: #000000; /* Black text for buttons */
    border: 1px solid #000000; /* Black border for buttons */
    border-radius: 10px; /* Rounded corners for buttons */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* Smooth transition */
}

.btn:hover, .btn-success:hover {
    background-color: black; /* Black buttons on hover */
    color: white; /* White text on hover */
}

.btn:active, .btn-success:active {
    background-color: black !important; /* Black buttons when active */
    color: white !important; /* White text when active */
    border-color: white !important; /* White border when active */
}

.btn:focus {
    color: white; /* Black text for focused button */
    border-color: black; /* Black border for focused button */
    box-shadow: none;
    outline: none;
}

/* Navbar */
.navbar {
    transition: background-color 0.2s;
    background-color: white; /* White background */
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 100%; /* Full height for vertical centering */
    padding: 10px 0;
    color: #000000; /* Black text */
}

.navbar-nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0 15px; /* Adjust padding as needed */
}

.navbar .navbar-brand {
    color: black; /* Black text for the navbar brand */
    font-size: 1.75rem;
}

/* Hero Section Styles */
.bgimage {
    height: 100vh;
    background: url(images/analytics.jpg) center/cover no-repeat;
    position: relative;
}

@media (max-width: 768px) {
    .bgimage {
        background-size: cover;
        background-position: center;
    }
}

@media (max-width: 576px) {
    .bgimage {
        background-size: contain;
        background-position: center;
        height: auto; /* To make it adjust with the content */
        min-height: 50vh; /* Set a minimum height for small devices */
    }
}


/* Hero Text */
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem; /* Larger for impact */
    margin-bottom: 20px;
    color: black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Light shadow for subtle depth */
}

/* Hero Title */
.hero_title {
    font-size: 4rem; /* Slightly smaller for cleaner look */
    margin-bottom: 15px;
    font-weight: 700; /* Bold but not too heavy */
    color: #0077b5;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

/* Hero Description */
.hero_desc {
    font-size: 2rem; /* Moderate size for readability */
    font-weight: 400; /* Regular weight */
    color: #555; /* Softer grey for contrast */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Lighter shadow */
    font-style: italic;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-text {
        font-size: 3rem; /* Adjusted for mobile */
    }
    .hero_title {
        font-size: 3.2rem;
    }
    .hero_desc {
        font-size: 1.5rem;
    }
}




/* Styling for the navbar brand */
.navbar-brand {
    color: #0077b5 !important; /* Blue color for the brand */
}





/* About Section */
.imageAboutPage {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .imageAboutPage {
        margin-bottom: 20px;
    }
    .about-text {
        padding-top: 20px;
    }
}


/* General Section Styles */
section {
    margin-top: 50px; /* Increased margin for larger spacing above */
    margin-bottom: 50px; /* Increased margin for larger spacing below */
}


/* General Styles */
#Services {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.service-card {
    background-color: white;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.service-icon {
    font-size: 3rem;
    color: #0077b5;
    margin-bottom: 15px;
}

/* Button Styles */
.btn-outline-primary {
    border-color: #0077b5;
    color: #0077b5;
    transition: background-color 0.3s, color 0.3s;
}

.btn-outline-primary:hover {
    background-color: #0077b5;
    color: white;
}




/* Services Section Styles */
.servicesText.card {
    min-height: 300px;
    color: white;
    background-color: black;
    border: 1px solid #ccc;
    border-radius: 10%;
}

.servicesIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    height: 100px;
}

/* Section Heading Styles */
.heading-divider h1 {
    background-color: transparent; /* Ensure the heading background is transparent */
}


/* Navbar */
.navbar-nav .nav-link {
    color: #000; /* Default black text */
}

.navbar-nav .nav-link:hover {
    color: #0077b5 !important; /* Change text color on hover */
}





/* Portfolio Section */
.portfolioContent.card {
    min-height: 450px;
    cursor: pointer;
    color: white;
    background-color: black;
    border: 1px solid white;
    border-radius: 10%;
    overflow: hidden;
}

.card-title, .card-text {
    text-align: center;
}

.card-body {
    padding: 15px;
}

.card-title {
    margin-bottom: 10px;
}

.card-text {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .portfolioContent.card {
        min-height: auto;
        max-height: 350px;
    }

    .card-body {
        padding: 10px;
    }

    .card-title {
        margin-bottom: 5px;
    }

    .card-text {
        margin-bottom: 5px;
    }
}

/* Hover Effect for Links and Buttons in Contact Section */
#contact a:hover, #contact button:hover {
    background-color: #0077b5; /* Blue background on hover */
    color: white; /* White text on hover */
    border-color: #0077b5 !important; /* Optional: border color change on hover */
}



/* Footer Styles */
#footer {
    background-color: black;
    text-align: center;
    color: lightslategrey;
    transition: background-color 0.2s ease-in-out;
}

.btn, .btn-success {
    background-color: #333333;
    color: white;
    border: 1px solid #ffffff;
}

.btn:hover, .btn-success:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

.btn:active, .btn-success:active {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}



/* Review Card Styling */
.review-card {
    position: relative; /* Ensure positioning works for the author */
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: left; /* Align text to the left by default */
    min-height: 175px; /* Ensure the card has a consistent height */
    padding-bottom: 40px; /* Increase padding to account for the author's position */
}

/* Reviewer Author Styling */
.review-author {
    position: absolute;
    bottom: 20px; /* Increase bottom space */
    right: 20px;  /* Increase right space */
    font-style: italic; /* Italicize the text */
    color: #0077b5; /* Blue color */
    font-weight: 600; /* Slightly bolder for emphasis */
}





/* Footer Styles */
#footer {
    background-color: white; /* White footer background */
    text-align: center;
    color: black;
    padding: 20px 0; /* Spacing inside the footer */
    position: relative;
    width: 100%; /* Full width */
}

#footer a {
    color: black;
    text-decoration: none;
    margin: 0 10px; /* Spacing between links */
}

#footer a:hover {
    color: #0077b5;
    text-decoration: underline;
}

#footer p {
    margin: 0; /* Remove margin from footer text */
}

/* Page End Gradient */
.page-end-indicator {
    height: 300px;
    background: linear-gradient(to bottom, white, grey);
    transition: background 0.4s ease-in-out;
}