/* Mobile styles */


.mobile-page {
    display: flex;
    flex-direction: column;
    
    align-items: center;
}

.mobile-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.mobile-logo {
    max-width: 20%; /* Adjust as needed */
    align-items: center;
}

.mobile-navigation {
    text-align: center;
    flex-grow: 1;
}

.mobile-navigation a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
  /*     display: block; */
  /*     padding: 0px 0; */
}

.mobile-navigation a.active {
  color: #007bff; /* Change the color to indicate active page */
  font-weight: bold;
  /* You can add more styles like background-color, border, etc., as needed */
}

.mobile-heading-and-photo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-about-me-photo {
    width: 80px; /* Adjust the size as needed */
    height: auto;
    transform: scaleX(-1); /* Flips the image horizontally */
    opacity: 0.7;
}

.mobile-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:20px; /* Space between images */
    /* Add any additional styling like padding or margins as needed */
}

.mobile-image-grid img {
    width: 200px; /* Makes images responsive */
    height: auto; /* Maintains aspect ratio */
}

.mobile-divider {
    width: 100%; /* Ensure divider takes full width */
    border-bottom: 2px solid black; /* Divider style */
}

.mobile-content {
    padding: 10px;
    overflow-y: auto; /* Vertical scroll */
    position: relative; /* Needed for absolute positioning of the footer */
    padding-bottom: 60px; /* Space for the footer */
    width: 90%;
}

.mobile-footer {
    font-size: 14px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px; /* Adjust as needed */
    background-color: #f1f1f1; /* Example background color */
    border-top: 2px solid black;
    text-align: center;   
}

    /* Hide desktop-specific elements */
    .sidebar, .content, /* other desktop classes */ {
        display: none;
    }


/* General Styles */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  color: #333; /* Default text color */
  display: flex;
  justify-content: space-between; /* Align sidebars and content */
  overflow: hidden;
}

.sub-heading {
    font-size: 20px; /* Adjust your base font size + 2px */
}


/* Sidebar shared styles */
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Left Sidebar Styles */
.sidebar.left {
  position: fixed;
  width: 250px;
  height: 100%;
  background-color: #ffffff; /* White background */
  padding: 20px;
  box-sizing: border-box;
  border-right: 2px solid black; /* Vertical black line */
}

/* Right Sidebar Styles */
.sidebar.right {
  position: fixed;
  width: 250px;
  display: flex;
  flex-direction: column;  
  height: 100%; /* Ensures full height */
  background-color: #ffffff;
  padding: 0px;
  box-sizing: border-box;
  border-left: 2px solid black;
  right: 0;
  justify-content: center;
}

.sidebar.right > *:not(.sidebar-footer) {
  flex-grow: 1;
}


/* Right Sidebar Footer */
.sidebar-footer {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

/* Right Sidebar Footer Text Styles */
.sidebar-footer-text {
  text-align: center;
  font-size: 14px; /* Same as the address lines */
  padding-top: 10px; /* Space before each line */
  margin: 0; Resetting default margins */
}

.logo {
  width: 100%;
  margin-bottom: 20px;
}

.navigation {
  text-align: center;
}

/* Navigation Styles */
.navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding: 10px 0; /* Padding on top and bottom of the navigation */
}

.navigation ul li {
    margin: 10px 0; /* Equal margin above and below each list item */
}

.navigation ul li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: bold; /* Assuming links are bold as per previous discussion */
    display: block; /* Makes the entire area of the list item clickable */
    padding: 0px 0; /* Padding above and below the link text */
}

.navigation ul li a.active {
  color: #007bff; /* Change the color to indicate active page */
  font-weight: bold;
  /* You can add more styles like background-color, border, etc., as needed */
}

/* Contact Styles */
.contact {
  text-align: center;
  font-size: 14px;
}

.contact p {
  margin: 0;
  padding: 5px 0; /* Half-line space */
}

.contact p.name {
  font-weight: bold;
  font-size: 22px; /* Larger font size for name */
  padding-bottom: 10px; /* Space after name */
}

.contact p.email-web, .contact p.address, .contact p.company-info {
  line-height: 1.2;
  padding-top: 10px; /* Space before address and company info */
}

.whatsapp-prompt {
    font-style: italic; /* Makes the text italic */
    font-size: 0.9em; /* Makes the font smaller than the surrounding text */
    display: flex; /* Aligns the logo and text nicely */
    align-items: center; /* Centers the items vertically */
    justify-content: center; /* Horizontally centers the content in the sidebar */
    margin-top: 10px; /* Adds some space above the phrase */
}

/* Content Area Styles */
/* Common styles for all content backgrounds */
.content {
  margin-left: 270px; /* Adjust this value if your sidebar width is different */
  margin-right: 270px; /* Adjust if you have a right sidebar */
  padding: 20px; /* Add padding for spacing around the text */
  overflow: auto;  
}


.content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 270px;
  right: 270px;
  bottom: 0;
  background-size: cover; /* This will ensure the image fits within the content area */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
  z-index: -1;
}

.inline-image {
  float: left; /* or 'right' depending on the desired alignment */
  margin-right: 10px; /* space between the image and the text */
  width: 80px; /* set your desired width */
  height: auto; /* maintain aspect ratio */
}

/* Home Page */
.content-home::before {
  background-image: url('pix/background_home.png');
  opacity: 0.8;
}


/* About Me Page */
.content-about-me::before {
  background-image: url('pix/background_aboutme.png');
}


.about-me-photo {
    position: absolute;
    top: -10px;  /* Adjust as needed */
    right: 300px; /* Adjust based on your layout and padding */
    width: 150px; /* Adjust the size as needed */
    height: auto;
    transform: scaleX(-1); /* Flips the image horizontally */
    z-index: 2; /* Ensures the image is above the background */
    opacity: 0.7;
}

/* My Expertise */
.content-my-expertise::before {
  background-image: url('pix/background_myexpertise.png');
}

/* Tools&Tech */
.content-tools-and-tech::before {
  background-image: url('pix/background_toolsandtech.png');
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:60px; /* Space between images */
    /* Add any additional styling like padding or margins as needed */
}

.image-grid img {
    width: 100%; /* Makes images responsive */
    height: auto; /* Maintains aspect ratio */
}

/* Detailed Bio */
.content-detailed-bio::before {
  background-image: url('pix/background_detailedbio.png');
}