/* General Styles */

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-image: url('https://itvisionsolutions.com/wp-content/uploads/2024/11/Demo-BG-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

.container {
  width: 90%;
  max-width: 1200px;
  height: 75%;
  background: rgba(51, 51, 51, 0.6); /* Gray background with transparency */
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: visible; /* Allow dropdowns to extend outside the container */
}

/* Section 1 */
.first-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  height: auto;
}

.logo img {
  height: 50px;
}
.top-left-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000; /* Ensure it stays on top */
}

.top-left-logo img {
  width: 150px; /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
  cursor: pointer; /* Add a pointer cursor for better UX */
}

/* Hover effect for social media icons */
  .social-icons img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.2s ease; /* Smooth scaling transition */
  }

  .social-icons img:hover {
    transform: scale(1.5); /* Scale the icon by 1.5 times */
  }

/* Main Menu */
.main-menu {
  background-color: #0066cc; /* Blue background for the main menu */
  color: white;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Ensure items wrap to the next line */
  height: 40px; /* Fixed height for the menu bar */
  padding: 0 10px;
  overflow: hidden;
}

/* Highlighted Main Menu Item */
.menu-item {
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 11px; /* Adjust to desired size */
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: nowrap; /* Prevent text wrapping inside items */
  position: relative; /* Ensures dropdowns align relative to parent */
}

.menu-item span {
  font-size: 0.4rem; /* Adjust size to make it subtle */
  color: white; /* Match the text color of the menu */
  margin-left: 5px; /* Space between text and the arrow */
  font-weight: normal; /* Make the symbol more noticeable */
}

.menu-item:hover {
  background-color: #004d99; /* Darker blue on hover for main menu */
  color: white;
}

.menu-item.active {
  background-color: #ffcc00; /* Highlight color for selected main menu item */
  color: black; /* Contrast text color */
}

/* Submenu */
.sub-menu {
  background-color: #333333; /* Dark gray background for submenu */
  color: white; /* Text color for submenu */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 40px; /* Fixed height for submenu to match main menu */
  padding: 0 10px;
  overflow: visible;
  z-index: 100;
}

.sub-menu .menu-item {
  font-size: 11px; /* Adjust to desired size */
  background-color: #333333; /* Matches submenu background */
  color: white; /* Text color for submenu items */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sub-menu .menu-item:hover,
.sub-menu .menu-item.active {
  background-color: #ff9900; /* Highlight color for submenu */
  color: white;
}

/* Dropdown Styling */
.dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: #444444; /* Dark background for dropdown */
  color: white; /* Ensure text is visible */
  min-width: 150px;
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow for dropdown */
  z-index: 1000;
  top: 100%; /* Position directly below the parent menu item */
  left: 0; /* Align with the parent menu item */
  padding: 5px 0; /* Add spacing between dropdown items */
}

/* Dropdown Items */
.dropdown-content .menu-item {
  font-size: 11px; /* Adjust to desired size */
  background-color: transparent; /* Transparent background for items */
  color: white; /* Text color for dropdown items */
  padding: 10px 15px; /* Adjust padding for better readability */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover Effect for Dropdown Items */
.dropdown-content .menu-item:hover {
  background-color: #555555; /* Slightly lighter gray on hover */
  color: white; /* Ensure contrast is maintained */
}

/* Nested Dropdown Styling */
.dropdown-content .menu-item:hover > .dropdown-content {
  display: block; /* Show nested dropdown on hover */
  visibility: visible;
  top: 0; /* Align nested dropdown vertically with the parent */
  left: 100%; /* Position nested dropdown to the right of the parent */
}

/* Responsive Styling */
@media (max-width: 768px) {
  .main-menu, .sub-menu {
    height: auto; /* Adjust height for wrapping on smaller screens */
  }
}

/* Home and YouTube Icons */
.home-icon, .youtube-icon, .flowchart-icon {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-icon {
  top: 90px;
  left: 20px;
}

.youtube-icon {
  bottom: 20px;
  right: 20px;
}

.flowchart-icon {
  top: 150px;
  left: 20px;
}

.home-icon img, .youtube-icon img, .flowchart-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.home-icon img:hover, .youtube-icon img:hover, .flowchart-icon img:hover {
  transform: scale(1.2);
}

.home-icon span, .youtube-icon span, .flowchart-icon span {
  font-size: 1rem;
  color: #fff;
}
.dashboard-container {
  flex-grow: 1; /* Takes up remaining space in the container */
  background-color: rgba(0, 0, 0, 0.7); /* Optional: Darker gray background */
  border-radius: 10px; /* Matches the container's rounded corners */
  padding: 0; /* Optional: Add spacing inside the dashboard */
  overflow: hidden; /* Prevent scrolling within the container */
}
.dashboard-iframe {
  width: 100%;
  height: 100%;
  border: none; /* Removes the default iframe border */
}
.popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  z-index: 1000;
}

.popup-content {
  background: white;
  padding: 15px;
  border-radius: 10px;
  display: flex; /* Flexbox for side-by-side layout */
  flex-direction: row; /* Ensure image and text are in a row */
  align-items: flex-start; /* Align content to the top */
  justify-content: space-between; /* Space between image and text */
  max-width: 80%; /* Ensure the popup doesn't exceed 80% of the screen width */
  max-height: 80%; /* Ensure the popup doesn't exceed 80% of the screen height */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
  overflow: hidden; /* Prevent overflow */
  position: relative; /* Position close button correctly */
}

.popup-content img {
  max-height: 70vh; /* Scale the image to fit within 70% of the viewport height */
  width: auto; /* Maintain aspect ratio */
  margin-right: 20px; /* Add space between the image and text */
  flex-shrink: 0; /* Prevent image from shrinking */
}

.popup-content p {
  text-align: justify; /* Justify text for better readability */
  flex-grow: 1; /* Allow the text area to occupy available space */
  margin: 0; /* Remove default margin */
  max-width: 200px; /* Set a fixed maximum width for the text area */
  width: 200px; /* Set a fixed width for consistency */
  overflow-wrap: break-word; /* Ensure long words break correctly */
  word-wrap: break-word; /* Alternative for older browsers */
}

.close-btn {
  position: fixed; /* Fixed to the screen */
  top: 10px; /* Position from the top of the screen */
  right: 10px; /* Position from the right of the screen */
  font-size: 30px; /* Increase font size */
  cursor: pointer; /* Show pointer on hover */
  background: rgba(0, 0, 0, 0.5); /* Red background with 80% opacity */
  border: 2px solid rgba(255, 255, 255, 0.8); /* White border for the circle */
  color: white; /* White text */
  font-weight: bold;
  z-index: 1100; /* Ensure it stays above other elements */
  border-radius: 50%; /* Make it circular */
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for a 3D effect */
  transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth transitions */
}

/* Custom style for flowchart popup */
.popup-container.flowchart-style .popup-content {
  display: flex;
  flex-direction: column; /* Stack content vertically */
  text-align: center; /* Center-align text and image */
  align-items: center; /* Center content horizontally */
  width: auto; /* Ensure the container width is auto to fit content */
  max-width: 80%; /* Limit container width to 80% of the screen width */
  box-sizing: border-box; /* Include padding in width/height calculations */
  padding: 20px; /* Optional padding for spacing */
}

.popup-container.flowchart-style .popup-content p {
  order: -1; /* Move text above the image */
  margin-bottom: 10px; /* Add spacing between text and image */
  word-wrap: break-word; /* Ensure text wraps within the container */
  width: 100%; /* Ensure the text takes full width */
  max-width: none; /* Remove any max-width restriction */
}

.popup-container.flowchart-style .popup-content img {
  order: 0; /* Image stays in its default order */
  width: 100%; /* Image takes full width */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure image doesn't overflow the container */
  object-fit: contain; /* Ensure the image does not stretch, just fits inside */
}

.popup-content img {
  pointer-events: none; /* Disable interactions */
  user-select: none; /* Prevent selection */
  cursor: not-allowed; /* Show a "no" symbol on hover */
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow clicks to pass through */
  z-index: 9999;
}









.presentation-icon, .video-icon, .app-icon {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 10px;
}

.presentation-icon img, .video-icon img, .app-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.presentation-icon img:hover, .video-icon img:hover, .app-icon img:hover {
  transform: scale(1.2);
}

.presentation-icon {
  top: 210px; /* Position below the Home button */
  left: 20px;
}

.video-icon {
  top: 270px;
  left: 20px;
}

.app-icon {
  top: 330px;
  left: 20px;
}

/* Presentation Slideshow Popup */
.presentation-popup {
  display: none; /* Initially hidden */
  position: fixed; /* Fullscreen overlay */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Below the close button */
}

.slides-container {
  background: white; /* White container */
  padding: 15px; /* Padding inside the container */
  border-radius: 10px; /* Rounded corners */
  max-width: 80%; /* Maximum width of the container */
  max-height: 80%; /* Maximum height of the container */
  display: flex; /* Flex layout */
  flex-direction: column; /* Column layout */
  align-items: center; /* Center items */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  position: relative; /* Relative to allow child positioning */
}

.slide-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 5px;
  margin-bottom: 10px;
}

.slide-text {
  text-align: justify;
  font-size: 1rem;
  color: #333;
  max-width: 80%;
}

/* Updated Navigation Buttons */
.nav-btn {
  position: absolute;
  top: 50%; /* Vertically centered */
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  color: white;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  z-index: 1100; /* Ensure they stay above the container */
}

.nav-btn:hover {
  background: white;
  color: black;
  transform: scale(1.1); /* Slight zoom on hover */
}

.nav-btn.prev {
  left: -30px; /* Positioned outside the left side of the container */
}

.nav-btn.next {
  right: -30px; /* Positioned outside the right side of the container */
}

/* Updated Close Button */
.close-slideshow-btn {
  position: absolute;
  top: -20px; /* Positioned above the container */
  right: -20px; /* Positioned outside the container */
  font-size: 30px;
  cursor: pointer;
  color: white;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  z-index: 1100;
}

.close-slideshow-btn:hover {
  background: white;
  color: black;
}
/* App Slideshow Popup */
.app-popup {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.slides-container {
  background: white;
  padding: 15px;
  border-radius: 10px;
  max-width: 80%;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

.slide-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 5px;
  margin-bottom: 10px;
}

.slide-text {
  text-align: justify;
  font-size: 1rem;
  color: #333;
  max-width: 80%;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.nav-btn:hover {
  background: white;
  color: black;
}

.nav-btn.prev {
  left: 10px;
}

.nav-btn.next {
  right: 10px;
}

/* Close Button Positioned Outside */
.close-slideshow-btn {
  position: fixed; /* Fixed position relative to the screen */
  top: 10px; /* Top of the screen */
  right: 10px; /* Right of the screen */
  font-size: 30px; /* Larger font size for visibility */
  cursor: pointer; /* Pointer cursor on hover */
  color: white; /* White text color */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  border-radius: 50%; /* Circular button */
  border: 2px solid rgba(255, 255, 255, 0.8); /* White border */
  width: 40px; /* Width of the button */
  height: 40px; /* Height of the button */
  display: flex; /* Center content inside */
  justify-content: center;
  align-items: center;
  z-index: 1100; /* Ensure it stays above other elements */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for 3D effect */
  transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth transitions */
}

.close-slideshow-btn:hover {
  background: white; /* Change background on hover */
  color: black; /* Change text color on hover */
}

/* Video Popup */
.video-popup {
  display: none; /* Initially hidden */
  position: fixed; /* Fullscreen overlay */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Below the close button */
}

.video-container {
  background: white; /* White container */
  padding: 15px; /* Padding inside the container */
  border-radius: 10px; /* Rounded corners */
  width: 90%; /* Adjusted to take more horizontal space */
  height: 90%; /* Adjusted to take more vertical space */
  max-width: 800px; /* Cap the width for very large screens */
  max-height: 80vh; /* Cap the height for large screens */
  display: flex; /* Flex layout */
  flex-direction: column; /* Column layout */
  align-items: center; /* Center items */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow */
  position: relative; /* Relative to allow child positioning */
  overflow: hidden; /* Prevent overflow */
}

.video-iframe {
  width: 100%; /* Full width of the container */
  height: 100%; /* Full height of the container */
  max-width: 85vw; /* Limit width to 85% of the viewport */
  max-height: 75vh; /* Limit height to 75% of the viewport */
  border-radius: 5px;
  border: none;
  object-fit: contain; /* Keep aspect ratio without cropping */
}

.video-text {
  text-align: justify;
  font-size: 1rem;
  color: #333;
  max-width: 80%;
  margin-top: 10px; /* Add space between the video and text */
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav-btn:hover {
  background: white;
  color: black;
  transform: translateY(-50%) scale(1.1); /* Maintain position but scale up */
}

.nav-btn.prev {
  left: 10px;
}

.nav-btn.next {
  right: 10px;
}


/* Close Button Positioned Outside */
.close-video-btn {
  position: fixed; /* Fixed position relative to the screen */
  top: 10px; /* Top of the screen */
  right: 10px; /* Right of the screen */
  font-size: 30px; /* Larger font size for visibility */
  cursor: pointer; /* Pointer cursor on hover */
  color: white; /* White text color */
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  border-radius: 50%; /* Circular button */
  border: 2px solid rgba(255, 255, 255, 0.8); /* White border */
  width: 40px; /* Width of the button */
  height: 40px; /* Height of the button */
  display: flex; /* Center content inside */
  justify-content: center;
  align-items: center;
  z-index: 1100; /* Ensure it stays above other elements */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for 3D effect */
  transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth transitions */
}

.close-video-btn:hover {
  background: white; /* Change background on hover */
  color: black; /* Change text color on hover */
}

/* Welcome Screen Styling */
.welcome-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.96); /* Dimmed overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  text-align: center;
  color: white;
  padding: 20px; /* Add padding around the content to prevent edge-to-edge text */
  box-sizing: border-box; /* Ensure padding is included in width/height calculations */
}

/* Welcome Message Container */
.welcome-overlay {
  max-width: 800px; /* Limit text width */
  margin: 40px auto; /* Add top and bottom margins for spacing */
  text-align: center;
}

/* Welcome Message Styling */
.welcome-overlay h1 {
  font-size: 2.5rem; /* Larger heading */
  margin-bottom: 20px; /* Add spacing below the heading */
}

.welcome-overlay p {
  font-size: 1.2rem; /* Subheading size */
  color: #ddd; /* Subtle contrast for the paragraph */
  margin-top: 20px; /* Add spacing above the paragraph */
  margin-bottom: 20px; /* Add spacing below the paragraph */
}