/*
 * 
 * This stylesheet contains the styles for the organization details page.
 * 
 * Styles included:
 * 
 * - .org-container: Base styles for the organization container, including padding, border radius, box shadow, and hover effects.
 * - .org-header: Styles for the header section, including text alignment, margins, background, padding, and border.
 * - .org-header h1: Styles for the header title, including margin, color, font size, font weight, and text shadow.
 * - .check-icon: Styles for the verified icon, including color and margin.
 * - .org-description: Styles for the description text, including color, margin, font size, and line height.
 * - .badge: Base styles for badges, including padding, border radius, font size, display, margin, and transition.
 * - .badge-verified: Styles for the verified badge, including background and text color.
 * - .badge-unverified: Styles for the unverified badge, including background and text color.
 * - .upcoming-demos: Styles for the upcoming demonstrations section, including margin, display, grid layout, and gap.
 * - .demo-box: Styles for individual demo boxes, including background, padding, border radius, box shadow, margin, height, display, flex direction, justify content, and hover effects.
 * - .demo-box h3: Styles for the demo box headings, including margin, text alignment, and color.
 * - .demo-box p: Styles for the demo box paragraphs, including margin.
 * - .btn: Styles for buttons, including display, background, color, padding, border radius, text decoration, transition, width, margin, and text alignment.
 * - .btn:hover: Hover styles for buttons, including background, text color, and transform.
 * - .social-medias: Styles for the social media links container, including display, flex direction, and alignment.
 * - .social-media: Styles for individual social media links, including margin.
 * - .social-media a: Styles for social media anchor tags, including margin, color, font size, and transition.
 * - .social-media a:hover: Hover styles for social media anchor tags, including color.
 * - .some-icon: Styles for icons, including font size, alignment, and vertical alignment.
 * - #upcoming-title: Styles for the upcoming title, including color, margin, font size, and text alignment.
 * - .verified-badge: Styles for the verified badge, including width, height, background image, background size, and background repeat.
 * - @font-face: Font face definition for 'Font Awesome 5 Sharp', including font family, source, weight, and style.
 * - .check-icon::before: Styles for the check icon before pseudo-element, including font family, font weight, content, margin, and color.
 * - @media (max-width: 768px): Responsive styles for screens up to 768px, including adjustments for header title font size, description font size, button padding, and demo box height.
 * - @media (max-width: 470px): Responsive styles for screens up to 470px, including adjustments for demo box flex basis.
 */

/* Base styles for the organization container */
.org-container {
  /*background: linear-gradient(135deg, var(--background) 0%, var(--background_light) 100%); /* Gradient background */
  padding: 40px; /* Updated padding for more space */
  border-radius: 12px; /* Adjusted border radius */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25); /* Enhanced shadow for depth */
  margin: 20px auto; /* Center the container */
  max-width: 800px; /* Responsive design */
  transition: transform 0.3s ease; /* Smooth transform transition */
}

.org-container:hover {
  transform: scale(1.02); /* Slightly scale up on hover */
}

/* Header styles */
.org-header {
  text-align: center; /* Centering text */
  margin-bottom: 30px; /* Increased margin for separation */
  background: var(--admin_section_title_color); /* Gradient for header */
  padding: 20px 20px 25px; /* Top/bottom and side padding */
  border-bottom: 3px solid #e0e0e0; /* Bottom border for separation */
  border-radius: 12px; /* Rounded corners for header */
  margin-top: 1em;
}

.org-header h1 {
  margin: 0; /* Remove default margin */
  color: var(--admin_section_text_color); /* Text color */
  font-size: 2.75em; /* Font size */
  font-weight: bold; /* Bold text */
  margin-bottom: 12px; /* Space below the heading */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Text shadow for depth */
}

.check-icon {
  color: #28a745; /* Green color for the verified icon */
  margin-left: 10px; /* Space between title and icon */
}

/* Description styles */
.org-description {
  color: white; /* Text color for the description */
  margin: 10px 0; /* Vertical margins for spacing */
  font-size: 1.3em; /* Font size for the description */
  line-height: 1.5; /* Line height for readability */
}

/* Badge styles */
.badge {
  padding: 5px 10px; /* Padding for badges */
  border-radius: 5px; /* Rounded corners */
  font-size: 0.9em; /* Font size for badges */
  display: inline-block; /* Inline block for layout */
  margin-top: 10px; /* Top margin for spacing */
  transition: background 0.3s ease; /* Smooth transition for background */
}

.badge-verified {
  background: #28a745; /* Green for verified badge */
  color: white; /* Text color */
}

.badge-unverified {
  background: var(--red); /* Red for unverified badge */
  color: white; /* Text color */
}

/* Upcoming demonstrations styles */
.upcoming-demos {
  margin-top: 20px; /* Top margin */
  display: grid; /* Use grid layout for responsiveness */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid columns */
  gap: 15px; /* Space between grid items */
}

/* Demo box styles */
.demo-box {
  background: #fff; /* Background color for demo boxes */
  padding: 15px; /* Padding inside demo boxes */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Shadow for demo boxes */
  margin-bottom: 15px; /* Margin below demo boxes */
  height: 200px; /* Fixed height for demo boxes */
  display: flex; /* Flexbox for vertical centering */
  flex-direction: column; /* Stack content vertically */
  justify-content: space-between; /* Space out content */
  transition: transform 0.3s ease; /* Smooth transform transition */
}

.demo-box:hover {
  transform: translateY(-5px); /* Lift effect on hover */
}

.demo-box h3 {
  margin: 0; /* Remove default margin */
  text-align: center; /* Center text */
  color: var(--header_color); /* Heading color */
}

.demo-box p {
  margin: 0; /* Remove default paragraph margins */
}

/* Button styles */
.btn {
  display: block; /* Block-level button */
  background: var(--orange); /* Background color for button */
  color: white; /* Text color for button */
  padding: 10px 15px; /* Padding inside button */
  border-radius: 5px; /* Rounded corners for button */
  text-decoration: none; /* Remove underline */
  transition: background 0.3s ease, transform 0.3s ease; /* Smooth transition for hover */
  width: auto; /* Auto width for button */
  margin: auto; /* Center button */
  text-align: center; /* Center text */
}

.btn:hover {
  background: var(--blue); /* Hover background color */
  color: var(--orange) !important; /* Hover text color */
  transform: translateY(-3px); /* Lift effect on hover */
}

/* Social media styles */
.social-medias {
  display: flex; /* Flex layout for social media links */
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center the social media links */
}

.social-media {
  margin-top: 15px; /* Top margin for spacing */
}

.social-media a {
  margin: 0 10px; /* Space between links */
  color: white; /* Icon color */
  font-size: 1.5em; /* Icon size */
  transition: color 0.3s ease; /* Smooth transition for hover */
}

.social-media a:hover {
  color: #ffdd57; /* Hover color */
}

/* Icon styles */
.some-icon {
  font-size: 150%; /* Size for icons */
  align-content: center; /* Center content */
  justify-self: center; /* Center self in grid */
  vertical-align: middle; /* Align vertically */
}

/* Upcoming title styles */
#upcoming-title {
  color: var(--header_color) !important; /* Title color */
  margin-top: 50px !important; /* Top margin */
  margin-bottom: 30px !important; /* Bottom margin */
  font-size: 1.75em !important; /* Font size for title */
  text-align: center !important; /* Center text */
}

/* Verified badge styles */
.verified-badge {
  width: 50px; /* Set width */
  height: 50px; /* Set height */
  background-image: url('/static/img/verified.svg'); /* Background image for verified badge */
  background-size: contain; /* Ensure the SVG scales correctly */
  background-repeat: no-repeat; /* Prevent repeating */
}

/* Font Awesome styles */
@font-face {
  font-family: 'Font Awesome 5 Sharp'; /* Custom font family name */
  src: url('/static/fonts/fa-sharp-solid-900.woff2') format('woff2'); /* Path to the .woff2 file */
  font-weight: 900; /* Weight for the solid icons */
  font-style: normal; /* Normal style */
}

.check-icon::before {
  font-family: 'Font Awesome 5 Sharp'; /* Match this to your font family */
  font-weight: 900; /* Font weight */
  content: '\f336'; /* Unicode for the check badge icon */
  margin-right: 8px; /* Space between icon and text */
  color: var(--green_light); /* Icon color */
}

/* Additional styles for improved responsiveness and layout */
@media (max-width: 768px) {
  .org-header h1 {
    font-size: 2em; /* Smaller font size for header on smaller screens */
  }

  .org-description {
    font-size: 1.1em; /* Smaller font size for description on smaller screens */
  }

  .btn {
    padding: 8px 12px; /* Smaller padding for buttons on smaller screens */
  }

  .demo-box {
    height: auto; /* Allow demo box to adjust height */
  }
}

@media (max-width: 470px) {
  .demo-box {
    flex-basis: revert !important; /* Revert flex basis for smaller screens */
  }
}