/* styles.css */

/* Body background color */
body {
    background-color: #f8f9fa; /* Light gray */
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Set minimum height of the body to full viewport height */
}

/* Header background color */
header {
    background-color: #0d3153; /* Dark gray */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center items */
    justify-content: space-between;
}

/* Header text color */
header h1, header p {
    color: #ffffff; /* White */
}

/* Navigation link color */
nav a {
    color: #ffffff; /* White */
}

/* Navigation link hover color */
nav a:hover {
    color: #f8f9fa; /* Light gray */
}

.navbar-nav .nav-link:hover {
    background-color: #003d80; /* Even darker blue on hover */
    color: #fff !important; /* Keep text white on hover */
}

/* Main content background color */
main {
    background-color: #ffffff; /* White */
    margin-bottom: 50px
}

/* Footer background color */
footer {
    background-color: #0d3153; /* Dark gray */
    max-height: 50px;
}

/* Footer text color */
footer p {
    color: #ffffff; /* White */
}

/* Button background color */
.btn-primary {
    background-color: #0d3153; /* Blue */
    border-color: #0d3153; /* Blue */
}

/* Button text color */
.btn-primary:hover {
    background-color: #1a85f8; /* Darker blue */
    border-color: #1a85f8; /* Darker blue */
}

/* Flag button color */
#toggleLanguage {
    color: #0d3153; /* Blue */
}

/* Flag button hover color */
#toggleLanguage:hover {
    color: #0056b3; /* Darker blue */
}

/* Custom CSS */

.company-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.company-logo img {
    width: 100%;
    max-width: 100px; /* Adjust max-width as needed */
    height: auto;
    border-radius: 50%; /* Make the logo circular */
}

.experience {
    margin-bottom: 30px; /* Add space between experiences */
}

.experience-details {
    padding: 20px;
    background-color: #f8f9fa; /* Light gray background color */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

.experience-details h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0d3153; /* Dark text color */
    margin-bottom: 10px; /* Increase spacing below heading */
}

.experience-details p {
    color: #6c757d; /* Darker text color */
    margin-bottom: 0.5rem;
}

/* Custom CSS */

/* Custom CSS */

/* Custom CSS */

.company-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.company-logo-container .company-logo {
    margin-bottom: 5px; /* Adjust spacing between logo and label */
}

/* Custom CSS */
.about-subsection {
    margin-bottom: 20px; /* Add spacing between subsections */
}

/* Custom CSS */

.experience-details h3 {
    font-size: 1.25rem; /* Reduce the size of the title */
}

.experience-details ul {
    list-style-type: none;
    padding: 0;
}

.experience-details ul li {
    position: relative;
    padding-left: 20px;
    font-size: 1rem; /* Set the font size of list items */
    color: #6c757d; /* Set the text color of list items */
}

.experience-details ul li:before {
    content: "\2022"; /* Bullet point */
    position: absolute;
    left: 0;
    color: #0d3153; /* Bullet color */
}

/* Custom CSS */

.separator {
    height: 2px; /* Adjust the height of the separator */
    width: 50%; /* Adjust the width of the separator */
    background-color: #0d3153; /* Adjust the color of the separator */
    margin: 20px auto; /* Center the separator horizontally and add spacing */
}

/* Custom CSS */

.section-title {
    font-size: 24px; /* Adjust the font size of the title */
    color: #0d3153; /* Adjust the color of the title */
    margin-bottom: 20px; /* Add spacing below the title */
}

.photo {
    width: 150px;
    height: 150px;
    padding: 20px;
    border-radius: 50%;
    background-color: #ddd; /* Light gray background for placeholder */
}

.photo-hidden {
    width: 150px;
    height: 150px;
    padding: 20px;
    border-radius: 50%;
    background-color: #0d3153; /* Light gray background for placeholder */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.container-footer {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.container-title {
    max-width: 800px;
    margin: 0;
    padding: 20px;
    flex-grow: 1; /* Title takes remaining space */
    text-align: center;
}

.container-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container-header-global {
    max-width: 1000px;
    margin: 0 auto;
    display: table-column;
}


.skills-page {
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #0d3153; /* Blue color for title */
}

.skill-category {
    margin-bottom: 30px;
}

.skill-category h3 {
    margin-bottom: 15px;
    font-size: 24px; /* Larger font size for category titles */
    color: #333; /* Dark text color for category titles */
}

.skill-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.skill-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 8px 16px;
    background-color: #f0f0f0; /* Light gray background */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    font-size: 16px; /* Font size */
    color: #fff; /* Text color */
}

.contact-page {
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
}

.card {
    background-color: #fff; /* White background for card */
    border: none; /* No border */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.card-body {
    padding: 30px; /* Padding for card body */
}

.contact-info {
    margin-bottom: 20px; /* Bottom margin for contact info */
}

.contact-info strong {
    color: #0d3153; /* Blue color for strong text */
}

.contact-icons {
    text-align: center; /* Center icons horizontally */
    margin-bottom: 30px;
}

.contact-icons a {
    color: #0056b3; /* Blue color for icon links */
    margin: 0 10px; /* Margin between icons */
    font-size: 50px; /* Icon size */
    transition: color 0.3s; /* Smooth color transition on hover */
}

.contact-icons a:hover {
    color: #007bff; /* Darker blue color on hover */
    text-decoration: none; /* Remove default underline on hover */
}