/*==================================================================
  [ Table of Contents ]
  
  1.  Global & Root Styles
  2.  Utility Classes
  3.  Grid System
  4.  Topbar & Navbar
  5.  Page-Specific Body & Backgrounds
  6.  Hero Carousel (index.html)
  7.  Page Sections & Cards
  8.  Footer
  9.  Components (Modal, Scroll-to-Top)
  10. Responsive Media Queries
==================================================================*/

/* 1. Global & Root Styles
/*----------------------------------------------------------------*/
/**
 * CSS Custom Properties (Variables)
 * Defines the color scheme and design tokens used throughout the stylesheet.
 * These variables make it easy to maintain consistent theming and enable quick design changes.
 */
:root {
  --primary-color: #ac0909;      /* Main brand color - used for highlights, buttons, and accents */
  --secondary-color: #66ccff;    /* Secondary accent color - used for complementary elements */
  --text-light: #000000;         /* Light text color - used on dark backgrounds */
  --text-dark: #000000;          /* Dark text color - used on light backgrounds */
  --bg-dark-1: #ffffff;          /* Primary dark background color */
  --bg-dark-2: #ffffff;          /* Secondary dark background color - slightly lighter than primary */
  --bg-light-1: #ffffff;         /* Primary light background color */
  --border-color-dark: #333333;  /* Dark border color for UI elements */
}

/**
 * Page Fade-in Animation
 * Creates a smooth entrance effect when the page loads.
 * Applied to the body element for a polished user experience.
 */
@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

/**
 * Body Element Styles
 * Sets the default typography, background, and layout properties for the entire page.
 * Includes the fade-in animation for smooth page transitions.
 */
body {
  background-color: var(--bg-dark-1);  /* Use primary dark background */
  color: #ccddee;                       /* Light blue-gray text color for readability on dark background */
  font-family: 'Segoe UI', sans-serif;  /* Clean, modern sans-serif font */
  margin: 0;                           /* Remove default browser margin */
  overflow-x: hidden;                  /* Prevent horizontal scrollbar */
  animation: fadeInPage 0.5s ease-in-out; /* Apply smooth fade-in effect */
}

/**
 * HTML Element Styles
 * Configures smooth scrolling behavior and padding for anchor links.
 * The scroll-padding-top ensures content isn't hidden under fixed headers.
 */
html {
  scroll-behavior: smooth;              /* Enable smooth scrolling for anchor links */
  scroll-padding-top: 100px;           /* Add padding to account for fixed navbar height */
}

/**
 * Link Styles
 * Removes default underline and adds smooth color transition for all anchor elements.
 */
a {
  text-decoration: none;               /* Remove default underline */
  transition: color 0.3s ease;         /* Smooth color transition on hover */
}

/**
 * Heading Elements
 * Removes default top margin from all heading levels (h1-h6) for consistent spacing.
 */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;                       /* Remove default top margin */
}

/**
 * Image Styles
 * Ensures images are responsive and maintain aspect ratio.
 */
img {
  max-width: 100%;                     /* Make images responsive */
  height: auto;                        /* Maintain aspect ratio */
}

/**
 * List Styles
 * Removes default list styling (bullets and padding) for cleaner design.
 */
ul {
  list-style: none;                    /* Remove bullet points */
  padding: 0;                          /* Remove default padding */
  margin: 0;                           /* Remove default margin */
}

/* 2. Utility Classes
/*----------------------------------------------------------------*/
/**
 * Text Alignment Utilities
 * Provides quick alignment options for text content.
 */
.text-center { text-align: center; }   /* Center align text */
.text-start { text-align: left; }      /* Left align text */
.text-end { text-align: right; }       /* Right align text */

/**
 * Text Color Utilities
 * Quick classes for applying common text colors.
 */
.text-light { color: var(--text-light) !important; }    /* Force light text color */
.text-secondary { color: var(--text-light) !important; } /* Alias for light text color */

/**
 * Typography Utilities
 * Common typography modifiers.
 */
.fw-bold { font-weight: bold; }        /* Apply bold font weight */

/**
 * Border & Shadow Utilities
 * Quick classes for rounded corners and shadows.
 */
.rounded-circle { border-radius: 50%; } /* Create circular elements */
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); } /* Apply subtle shadow */

/**
 * Padding Utilities
 * Bootstrap-inspired padding classes for consistent spacing.
 */
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }     /* Vertical padding: 3rem top and bottom */
.pt-5 { padding-top: 3rem; }                           /* Top padding: 3rem */
.pb-4 { padding-bottom: 1.5rem; }                      /* Bottom padding: 1.5rem */
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; } /* Horizontal padding: 1.5rem left and right */

/**
 * Margin Utilities
 * Bootstrap-inspired margin classes for consistent spacing.
 */
.mt-3 { margin-top: 1rem; }         /* Top margin: 1rem */
.mt-5 { margin-top: 3rem; }         /* Top margin: 3rem */
.mb-3 { margin-bottom: 1rem; }      /* Bottom margin: 1rem */
.mb-4 { margin-bottom: 1.5rem; }    /* Bottom margin: 1.5rem */
.mb-5 { margin-bottom: 3rem; }      /* Bottom margin: 3rem */
.ms-3 { margin-left: 1rem; }        /* Left margin: 1rem */

/* 3. Grid System (Flexbox-based)
/*----------------------------------------------------------------*/
/**
 * Container Classes
 * Provides the base wrapper for the grid system with responsive width constraints.
 */
.container, 
.container-fluid {
  width: 100%;                       /* Full width by default */
  padding-right: 1.5rem;             /* Right padding for content spacing */
  padding-left: 1.5rem;              /* Left padding for content spacing */
  margin-right: auto;                /* Center container horizontally */
  margin-left: auto;                 /* Center container horizontally */
}

/**
 * Fixed-width Container
 * Limits maximum width for larger screens while maintaining responsiveness.
 */
.container {
  max-width: 1320px;                 /* Maximum width for large screens */
}

/**
 * Row Class
 * Creates a flex container for grid columns with negative margins to offset column padding.
 */
.row {
  display: flex;                      /* Enable flexbox layout */
  flex-wrap: wrap;                    /* Allow items to wrap to next line */
  margin-top: -1rem;                  /* Negative margin to counter column top margin */
  margin-right: -0.75rem;             /* Negative margin to counter column right padding */
  margin-left: -0.75rem;              /* Negative margin to counter column left padding */
}

/**
 * Column Base Styles
 * Applies to all direct children of .row elements.
 * Sets up consistent padding and box-sizing for grid columns.
 */
.row > * {
  box-sizing: border-box;             /* Include padding in width calculations */
  flex-shrink: 0;                     /* Prevent columns from shrinking */
  width: 100%;                        /* Full width by default */
  max-width: 100%;                    /* Prevent overflow */
  padding-right: 0.75rem;             /* Right padding for column spacing */
  padding-left: 0.75rem;              /* Left padding for column spacing */
  margin-top: 1rem;                   /* Top margin for row spacing */
}

/**
 * Column Width Classes
 * Defines specific column widths based on a 12-column grid system.
 */
.col-2 { flex: 0 0 auto; width: 16.666667%; }  /* 2/12 = 1/6 of container width */
.col-4 { flex: 0 0 auto; width: 33.333333%; }  /* 4/12 = 1/3 of container width */
.col-5 { flex: 0 0 auto; width: 41.666667%; }  /* 5/12 of container width */
.col-6 { flex: 0 0 auto; width: 50%; }         /* 6/12 = 1/2 of container width */
.col-7 { flex: 0 0 auto; width: 58.333333%; }  /* 7/12 of container width */

/**
 * Flexbox Alignment Utilities
 * Classes for controlling flex item alignment and justification.
 */
.align-items-center { align-items: center; }           /* Vertically center flex items */
.justify-content-center { justify-content: center; }   /* Horizontally center flex items */
.justify-content-between { justify-content: space-between; } /* Distribute space between items */
.justify-content-end { justify-content: flex-end; }    /* Align items to the end */
.d-flex { display: flex; }                            /* Enable flexbox display */

/* 4. Topbar & Navbar
/*----------------------------------------------------------------*/
/**
 * Topbar Styles
 * The top navigation bar containing contact information and secondary links.
 * Features a dark background with subtle border for visual separation.
 */
.topbar {
  background: var(--bg-dark-2);      /* Use secondary dark background */
  color: var(--text-light);           /* Light text for contrast */
  padding: 0.4rem 2rem;              /* Vertical and horizontal padding */
  display: flex;                      /* Flexbox layout for alignment */
  gap: 2rem;                          /* Space between flex items */
  align-items: center;                /* Vertically center items */
  font-size: 0.9rem;                  /* Slightly smaller font size */
  border-bottom: 1px solid var(--border-color-dark); /* Bottom border for separation */
}

/**
 * Topbar Info Items
 * Individual contact information items within the topbar.
 */
.topbar .info-item {
  display: flex;                      /* Flex layout for icon + text */
  align-items: center;                /* Vertically center content */
  gap: 0.4rem;                        /* Small space between icon and text */
}

/**
 * Topbar Link Styles
 * Styling for links within the topbar area.
 */
.topbar a {
  color: var(--text-light);           /* Light text color */
}

/**
 * Topbar Link Hover State
 * Interactive state for topbar links.
 */
.topbar a:hover {
  text-decoration: underline;          /* Add underline on hover */
  color: var(--primary-color);        /* Change to primary brand color */
}

/**
 * Main Navbar Styles
 * The primary navigation header that remains fixed at the top of the page.
 * Features a semi-transparent background with backdrop blur for modern glass effect.
 */
.navbar {
  position: sticky;                   /* Stick to top when scrolling */
  top: 0;                             /* Position at top of viewport */
  z-index: 1030;                      /* Ensure navbar stays above other content */
  background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent black background */
  backdrop-filter: blur(4px);         /* Modern glass morphism effect */
  padding: 1rem 2rem;                 /* Comfortable padding */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* Subtle shadow for depth */
}

/**
 * Navbar Brand Styles
 * Logo and brand name styling in the navbar.
 */
.navbar-brand {
  font-size: 1.8rem;                  /* Large font for brand prominence */
  color: var(--text-light) !important; /* Force light text color */
  font-weight: bold;                  /* Bold font weight for emphasis */
}

/**
 * Navbar Logo Image
 * Specific styling for the logo image within the navbar brand.
 */
.navbar-brand-logo {
  height: 50px;                       /* Fixed height for logo */
}

/**
 * Logo Container
 * Wrapper for the logo with background and padding.
 */
.navbar-brand-logo-wrapper {
  background: rgb(255, 255, 255);                   /* Black background for logo container */
  padding: 5px;                       /* Small padding around logo */
  border-radius: 4px;                 /* Slightly rounded corners */
  display: flex;                      /* Flex container for alignment */
}

/**
 * Brand Name Styling
 * Specific styling for the text brand name.
 */
.navbar-brand-name {
  color: var(--primary-color);        /* Use primary brand color */
  font-weight: bold;                  /* Bold font weight */
  font-size: 2.5rem;                  /* Large font size for prominence */
}

/**
 * Mobile Menu Toggle Button
 * Hamburger menu button for mobile navigation (hidden on desktop).
 */
.navbar-toggler {
  background: none;                   /* Transparent background */
  border: none;                       /* No border */
  font-size: 1.5rem;                  /* Large icon size */
  color: var(--primary-color);        /* Use primary brand color */
  display: none;                      /* Hidden on desktop, shown on mobile */
  cursor: pointer;                    /* Pointer cursor to indicate interactivity */
}

/**
 * Hamburger Icon
 * Styling for the hamburger menu icon.
 */
.navbar-toggler-icon {
  color: #fff;                        /* White color for icon */
}

/**
 * Navbar Collapse Container
 * Container for navigation links that collapses on mobile devices.
 */
.navbar-collapse {
  display: flex;                      /* Flex layout for desktop */
  align-items: center;                /* Vertically center items */
  flex-grow: 1;                       /* Take up available space */
}

/**
 * Navigation List
 * Container for the main navigation links.
 */
.navbar-nav {
  display: flex;                      /* Horizontal layout on desktop */
  align-items: center;                /* Vertically center navigation items */
}

/**
 * Navigation Links
 * Individual navigation menu items with hover effects and underline animation.
 */
.nav-link {
  color: #ac0909;                     /* Light blue-gray text color */
  margin: 0 1rem;                     /* Horizontal spacing between links */
  position: relative;                 /* Position for pseudo-element */
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
  padding: 0.5rem 0;                  /* Vertical padding for larger click area */
  will-change: transform;             /* Optimize for animation performance */
}

/**
 * Navigation Link Hover State
 * Interactive effects when hovering over navigation links.
 */
.nav-link:hover {
  color: var(--primary-color);        /* Change to primary brand color */
  transform: scale(1.05);             /* Slight scale effect for emphasis */
}

/**
 * Active Navigation Link
 * Styling for the currently active navigation link.
 */
.nav-link.active {
  color: var(--text-light) !important; /* Force light text color for active state */
}

/**
 * Navigation Link Underline Animation
 * Creates an animated underline effect on hover using CSS pseudo-elements.
 */
.nav-link::after {
  content: "";                        /* Empty content for pseudo-element */
  position: absolute;                 /* Position relative to link */
  width: 100%;                        /* Full width of link */
  height: 2px;                        /* Thin underline */
  bottom: -5px;                       /* Position below link */
  left: 0;                            /* Start from left edge */
  background: var(--primary-color);   /* Use primary brand color */
  transform: scaleX(0);               /* Initially hidden (scaled to 0 width) */
  transform-origin: left;             /* Animate from left to right */
  transition: transform 0.3s ease;    /* Smooth transition */
}

/**
 * Navigation Link Hover Underline
 * Shows the underline animation when hovering over navigation links.
 */
.nav-link:hover::after {
  transform: scaleX(1);               /* Scale to full width on hover */
}

/**
 * Search Button
 * Circular search button in the navbar.
 */
.btn-search {
  width: 40px;                        /* Fixed width */
  height: 40px;                       /* Fixed height (creates circle) */
  background: var(--text-light);      /* Light background */
  color: var(--text-dark);            /* Dark text for contrast */
  border: none;                       /* No border */
  border-radius: 50%;                 /* Perfect circle shape */
  display: flex;                      /* Flex layout to center icon */
  align-items: center;                /* Vertically center icon */
  justify-content: center;            /* Horizontally center icon */
  transition: background 0.3s ease;   /* Smooth background transition */
  margin-left: 1rem;                  /* Space from navigation links */
  cursor: pointer;                    /* Pointer cursor to indicate interactivity */
}

/**
 * Search Button Hover State
 * Interactive effect for the search button.
 */
.btn-search:hover {
  background: var(--primary-color);   /* Change to primary brand color on hover */
}

/* 5. Page-Specific Body & Backgrounds
/*----------------------------------------------------------------*/
/**
 * Page Background Image
 * Fixed background image that covers the entire viewport.
 */
.page-background-image {
  position: fixed;                    /* Fixed position relative to viewport */
  top: 0;                             /* Start from top */
  left: 0;                            /* Start from left */
  width: 100%;                        /* Full width */
  height: 100%;                       /* Full height */
  object-fit: cover;                   /* Cover entire area without distortion */
  z-index: -1;                        /* Place behind all content */
}

/**
 * Page Content Wrapper
 * Container for page content with optional overlay for better text readability.
 */
.page-content-wrapper {
  position: relative;                 /* Position for z-index stacking */
  z-index: 1;                         /* Above background image */
  background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay for text readability */
}

/* 6. Hero Carousel (index.html)
/*----------------------------------------------------------------*/
/**
 * Carousel Container
 * Main container for the hero image carousel with overflow control.
 */
.carousel {
  position: relative;                 /* Position for child elements */
  overflow: hidden;                   /* Hide content that extends beyond container */
}

/**
 * Carousel Inner Container
 * Container for carousel slides with fixed height for consistency.
 */
.carousel-inner {
  position: relative;                 /* Position for absolute slide positioning */
  width: 100%;                        /* Full width */
  height: 75vh;                       /* 75% of viewport height */
}

/**
 * Carousel Slide Item
 * Individual slides within the carousel with fade transition effects.
 */
.carousel-item {
  position: absolute;                 /* Stack all slides on top of each other */
  top: 0;                             /* Align to top */
  left: 0;                            /* Align to left */
  width: 100%;                        /* Full width */
  height: 100%;                       /* Full height */
  display: flex;                      /* Flex layout for content positioning */
  align-items: flex-end;              /* Align content to bottom */
  justify-content: flex-start;        /* Align content to left */
  
  /* Animation Properties */
  opacity: 0;                         /* Initially transparent */
  visibility: hidden;                 /* Initially hidden */
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Smooth fade transition */
  will-change: opacity, visibility;    /* Optimize for animation performance */
}

/**
 * Active Carousel Slide
 * The currently visible slide in the carousel.
 */
.carousel-item.active {
  opacity: 1;                         /* Fully opaque */
  visibility: visible;                /* Visible to user */
  z-index: 2;                         /* Bring to front of slide stack */
}

/**
 * Carousel Background Image
 * Background image for each carousel slide.
 */
.carousel-background-img {
  position: absolute;                 /* Cover entire slide area */
  top: 0;                             /* Align to top */
  left: 0;                            /* Align to left */
  width: 100%;                        /* Full width */
  height: 100%;                       /* Full height */
  object-fit: cover;                  /* Cover without distortion */
  z-index: 1;                         /* Behind caption content */
}

/**
 * Carousel Caption
 * Text content overlay on carousel slides with animations.
 */
.carousel-caption {
  position: relative;                 /* Position for z-index stacking */
  padding: 3rem 5rem;                 /* Generous padding for readability */
  color: var(--text-light);           /* Light text for contrast */
  z-index: 2;                         /* Above background image */
  max-width: 50%;                     /* Limit width for readability */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Text shadow for readability on images */
}

/**
 * Carousel Caption Heading
 * Main heading within carousel caption with fade-in animation.
 */
.carousel-caption h2 {
  animation: fadeInDown 1s;           /* Fade in from top animation */
  color: var(--text-light);           /* Light text color */
  font-weight: bold;                  /* Bold font weight */
  font-size: 2.5rem;                  /* Large font size for emphasis */
}

/**
 * Carousel Caption Paragraph
 * Supporting text within carousel caption with staggered animation.
 */
.carousel-caption p {
  animation: fadeInUp 1s .5s both;    /* Fade in from bottom with delay */
  color: #aaddff;                     /* Light blue text color */
  font-size: 1.25rem;                 /* Larger than body text */
}

/**
 * Carousel Caption Button
 * Call-to-action button within carousel caption with delayed animation.
 */
.carousel-caption .btn {
  animation: fadeInUp 1.3s both;      /* Fade in from bottom with longer delay */
  color: #000;                        /* Dark text for contrast */
  background: #3399ff;                /* Blue background */
  border: none;                       /* No border */
}

/**
 * Carousel Navigation Controls
 * Previous and next navigation buttons for the carousel.
 */
.carousel-control-prev,
.carousel-control-next {
  position: absolute;                 /* Position within carousel */
  top: 0;                             /* Full height */
  bottom: 0;                          /* Full height */
  z-index: 3;                         /* Above slide content */
  display: flex;                      /* Flex layout to center icons */
  align-items: center;                /* Vertically center icons */
  justify-content: center;            /* Horizontally center icons */
  width: 5%;                          /* 5% of carousel width */
  padding: 0;                         /* No padding */
  color: #fff;                        /* White color for visibility */
  text-align: center;                 /* Center align content */
  background: none;                   /* Transparent background */
  border: 0;                          /* No border */
  opacity: 0.5;                       /* Semi-transparent */
  transition: opacity 0.15s ease;     /* Smooth opacity transition */
  cursor: pointer;                    /* Pointer cursor to indicate interactivity */
}

/**
 * Previous Button Position
 * Position the previous button on the left side.
 */
.carousel-control-prev { left: 0; }   /* Align to left edge */

/**
 * Next Button Position
 * Position the next button on the right side.
 */
.carousel-control-next { right: 0; }  /* Align to right edge */

/**
 * Carousel Control Hover State
 * Interactive effect for navigation buttons.
 */
.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 0.9;                       /* Become more opaque on hover */
}

/**
 * Carousel Control Icons
 * Styling for the SVG icons within navigation buttons.
 */
.carousel-control-prev svg,
.carousel-control-next svg {
    width: 2rem;                      /* Icon width */
    height: 2rem;                     /* Icon height */
}

/**
 * Carousel Indicators
 * Position indicators showing current slide and total slides.
 */
.carousel-indicators {
  position: absolute;                 /* Position within carousel */
  right: 0;                           /* Full width */
  bottom: 10px;                       /* Position near bottom */
  left: 0;                            /* Full width */
  z-index: 3;                         /* Above slide content */
  display: flex;                      /* Horizontal layout */
  justify-content: center;            /* Center indicators */
  padding: 0;                         /* No padding */
  margin: 1rem 15%;                   /* Vertical margin, horizontal centering */
}

/**
 * Carousel Indicator Buttons
 * Individual indicator buttons for slide navigation.
 */
.carousel-indicators button {
  box-sizing: content-box;            /* Include padding in dimensions */
  flex: 0 1 auto;                     /* Don't grow, can shrink */
  width: 30px;                        /* Indicator width */
  height: 3px;                        /* Indicator height */
  padding: 0;                         /* No padding */
  margin: 0 3px;                      /* Small spacing between indicators */
  text-indent: -999px;                /* Hide text offscreen */
  cursor: pointer;                    /* Pointer cursor to indicate interactivity */
  background-color: #fff;             /* White background */
  background-clip: padding-box;       /* Background within padding */
  border: 0;                          /* No border */
  border-top: 10px solid transparent; /* Transparent top border for spacing */
  border-bottom: 10px solid transparent; /* Transparent bottom border for spacing */
  opacity: 0.5;                       /* Semi-transparent */
  transition: opacity 0.6s ease;      /* Smooth opacity transition */
}

/**
 * Active Carousel Indicator
 * The indicator for the currently active slide.
 */
.carousel-indicators button.active {
  opacity: 1;                         /* Fully opaque for active state */
}

/* 7. Page Sections & Cards
/*----------------------------------------------------------------*/
/**
 * Base Button Styles
 * Foundation styling for all buttons with consistent appearance and transitions.
 */
.btn {
  display: inline-block;               /* Allow margin/padding, respect text-align */
  font-weight: 400;                   /* Normal font weight */
  line-height: 1.5;                   /* Comfortable line height */
  color: #212529;                     /* Dark text color */
  text-align: center;                 /* Center text */
  vertical-align: middle;             /* Align with middle of text */
  cursor: pointer;                    /* Pointer cursor to indicate interactivity */
  user-select: none;                  /* Prevent text selection */
  background-color: transparent;      /* Transparent background */
  border: 1px solid transparent;      /* Transparent border */
  padding: 0.375rem 0.75rem;          /* Comfortable padding */
  font-size: 1rem;                    /* Standard font size */
  border-radius: 0.25rem;             /* Slightly rounded corners */
  /* Enhanced transition for all buttons */
  transition: all .2s ease-in-out;    /* Smooth transition for all properties */
  will-change: transform, box-shadow; /* Optimize for animation performance */
}

/**
 * Button Hover State
 * Interactive effect for all buttons with elevation and shadow.
 */
.btn:hover {
    transform: translateY(-2px);      /* Lift button slightly */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Add shadow for depth */
}

/**
 * Large Button Variant
 * Larger button size for primary calls-to-action.
 */
.btn-lg {
  padding: 0.5rem 1rem;               /* Larger padding */
  font-size: 1.25rem;                 /* Larger font size */
  border-radius: 0.3rem;              /* Slightly more rounded corners */
}

/**
 * Primary Button Style
 * Main call-to-action button with gradient background.
 */
.btn-primary {
  color: #fff;                        /* White text for contrast */
  background-image: linear-gradient(to top, #ac0909, #c82a2a); /* Red gradient */
  border-color: var(--primary-color); /* Border matching primary color */
}

/**
 * Outline Info Button
 * Secondary button style with outlined appearance.
 */
.btn-outline-info {
  color: #0dcaf0;                     /* Cyan text color */
  border-color: #0dcaf0;              /* Cyan border color */
}

/**
 * Outline Info Button Hover
 * Interactive state for outline info button.
 */
.btn-outline-info:hover {
  color: #000;                        /* Dark text on hover */
  background-color: #0dcaf0;          /* Cyan background on hover */
  border-color: #0dcaf0;              /* Maintain cyan border */
}

/**
 * Form Control Styles
 * Standard styling for form inputs and textareas.
 */
.form-control {
  display: block;                      /* Block level element */
  width: 100%;                        /* Full width of container */
  padding: 0.375rem 0.75rem;          /* Comfortable padding */
  font-size: 1rem;                    /* Standard font size */
  font-weight: 400;                   /* Normal font weight */
  line-height: 1.5;                   /* Comfortable line height */
  color: #212529;                     /* Dark text color */
  background-color: #fff;             /* White background */
  background-clip: padding-box;       /* Background within padding */
  border: 1px solid #ced4da;           /* Light gray border */
  appearance: none;                   /* Remove default styling */
  border-radius: 0.25rem;             /* Slightly rounded corners */
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; /* Smooth transitions */
}

/**
 * About Section
 * Introduction section about the organization or service.
 */
#about-section {
  background-color: var(--bg-dark-1);  /* Use primary dark background */
}

/**
 * About Section Image
 * Profile or featured image in the about section.
 */
.about-img {
  width: 280px;                       /* Fixed width */
  height: 280px;                      /* Fixed height (creates square) */
  object-fit: cover;                  /* Cover area without distortion */
  border: 5px solid var(--primary-color); /* Primary color border for emphasis */
}

/**
 * About Section Heading
 * Main heading in the about section.
 */
#about-section h2 {
  color: var(--primary-color);        /* Use primary brand color */
}

/**
 * Feature Section
 * Section highlighting key features or services.
 */
#feature-section {
  background-color: var(--bg-light-1);  /* Use light background */
}

/**
 * Feature Section Item Heading
 * Heading for individual feature items.
 */
.feature-section-item h2 { 
  color: var(--primary-color);        /* Use primary brand color */
}

/**
 * Feature Section Item Text
 * Description text for feature items.
 */
.feature-section-item p { 
  color: var(--text-dark);            /* Use dark text for readability on light background */
}

/**
 * Feature Section Image
 * Icon or image representing a feature.
 */
.feature-section-item img {
  border: 4px solid var(--primary-color); /* Primary color border */
  padding: 4px;                       /* Small padding inside border */
  width: 140px;                       /* Fixed width */
  height: 140px;                      /* Fixed height (creates square) */
  object-fit: cover;                  /* Cover area without distortion */
}

/**
 * Background Showcase Section
 * Section with video background for visual impact.
 */
#background-showcase {
  position: relative;                 /* Position for absolute children */
  min-height: 500px;                 /* Minimum height for visibility */
  overflow: hidden;                   /* Hide video overflow */
  display: flex;                      /* Flex layout for content centering */
  align-items: center;                /* Vertically center content */
  justify-content: center;            /* Horizontally center content */
}

/**
 * Video Background
 * Background video that covers the showcase section.
 */
.video-bg {
  position: absolute;                 /* Cover entire section */
  top: 50%;                          /* Center vertically */
  left: 50%;                         /* Center horizontally */
  min-width: 100%;                    /* Minimum full width */
  min-height: 100%;                   /* Minimum full height */
  width: auto;                        /* Auto width to maintain aspect ratio */
  height: auto;                       /* Auto height to maintain aspect ratio */
  z-index: -1;                        /* Behind content */
  transform: translateX(-50%) translateY(-50%); /* Perfect centering */
  object-fit: cover;                  /* Cover without distortion */
}

/**
 * Video Overlay Content
 * Content displayed over the video background.
 */
.video-overlay-content {
  z-index: 1;                         /* Above video background */
  padding: 3rem 2rem;                 /* Generous padding */
  color: white;                       /* White text for video contrast */
  max-width: 800px;                   /* Limit width for readability */
  margin: auto;                       /* Center horizontally */
  text-align: center;                 /* Center text */
}

/**
 * Video Overlay Heading
 * Main heading over video background.
 */
.video-overlay-content h1 {
  color: #fcfeff;                     /* Nearly white text */
  font-weight: bold;                  /* Bold font weight */
}

/**
 * Video Overlay Text
 * Supporting text over video background.
 */
.video-overlay-content p {
  font-size: 1.2rem;                  /* Larger than body text */
}

/**
 * Fun Learning Section
 * Educational or engaging content section.
 */
#fun-learning {
  background-color: var(--bg-light-1);  /* Use light background */
  color: var(--text-dark);            /* Use dark text for readability */
  padding: 5rem 2rem;                 /* Generous padding */
}

/**
 * Fun Learning Section Heading
 * Main heading for the fun learning section.
 */
#fun-learning h2 {
  color: var(--primary-color);        /* Use primary brand color */
}

/**
 * Fun Learning Image
 * Educational or engaging imagery.
 */
.fun-learning-img {
  border-color: var(--primary-color) !important; /* Force primary color border */
  border-width: 3px !important;       /* Force 3px border width */
  border-style: solid;                /* Solid border style */
  max-width: 300px;                   /* Limit maximum width */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transitions */
  will-change: transform, box-shadow; /* Optimize for animation performance */
}

/**
 * Fun Learning Image Hover
 * Interactive effect for fun learning images.
 */
.fun-learning-img-hover {
  transform: scale(1.05);              /* Slight scale effect */
  box-shadow: 0 0 20px #3399ff;       /* Blue glow effect */
}

/**
 * Teacher Section
 * Section showcasing teachers or team members.
 */
#teacher-section {
  padding: 80px 40px;                 /* Generous padding */
  background-color: var(--bg-dark-1);  /* Use primary dark background */
}

/**
 * Teacher Section Heading
 * Main heading for the teacher section.
 */
#teacher-section h2 {
  color: var(--primary-color);        /* Use primary brand color */
  font-weight: bold;                  /* Bold font weight */
}

/**
 * Teacher Card
 * Individual teacher profile card with hover effects.
 */
.teacher-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transitions */
  background: rgb(255, 255, 255);                  /* Black background */
  padding: 1.5rem;                    /* Comfortable padding */
  border-radius: 0.25rem;             /* Slightly rounded corners */
  will-change: transform, box-shadow; /* Optimize for animation performance */
  transform: translateZ(0);           /* Hardware acceleration for smooth animation */
}

/**
 * Teacher Card Hover
 * Interactive effect for teacher cards.
 */
.teacher-card:hover {
  transform: translateY(-12px);       /* Lift card significantly */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); /* Dramatic shadow for depth */
}

/**
 * Teacher Profile Image
 * Profile photo of teachers or team members.
 */
.teacher-img {
  width: 140px;                       /* Fixed width */
  height: 140px;                      /* Fixed height (creates square) */
  object-fit: cover;                  /* Cover area without distortion */
  border-color: var(--primary-color) !important; /* Force primary color border */
  border-width: 4px;                  /* Border width */
  border-style: solid;                /* Solid border style */
  transition: transform 0.3s ease;    /* Smooth hover transition */
}

/**
 * Teacher Card Image Hover
 * Interactive effect for teacher profile images.
 */
.teacher-card:hover .teacher-img {
  transform: scale(1.05);              /* Slight scale effect on hover */
}

/**
 * Teacher Card Name
 * Name heading within teacher cards.
 */
.teacher-card h4 {
  color: var(--primary-color);        /* Use primary brand color */
}

/**
 * Shop Section
 * E-commerce or product showcase section.
 */
.shop-section {
  padding: 5rem 0;                     /* Vertical padding only */
  color: var(--text-light);           /* Light text color */
}

/**
 * Shop Section Title
 * Main heading for the shop section.
 */
.shop-section .section-title {
  text-align: center;                 /* Center the heading */
  margin-bottom: 3rem;                /* Space below heading */
  font-size: 2.5rem;                  /* Large font size */
  color: var(--text-light);           /* Light text color */
}

/**
 * Shop Product Card
 * Individual product card with glass morphism effect.
 */
.shop-card {
  background: rgba(0, 0, 0, 0.7);     /* Semi-transparent black background */
  backdrop-filter: blur(5px);          /* Modern glass morphism effect */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  border-radius: 1rem;                /* Rounded corners */
  padding: 2rem;                      /* Generous padding */
  text-align: center;                 /* Center text content */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover transitions */
  will-change: transform, box-shadow; /* Optimize for animation performance */
  transform: translateZ(0);           /* Hardware acceleration */
}

/**
 * Shop Card Hover
 * Interactive effect for product cards.
 */
.shop-card:hover {
  transform: translateY(-10px);       /* Lift card on hover */
  box-shadow: 0 10px 20px rgba(0,0,0,0.4); /* Enhanced shadow for depth */
}

/**
 * Shop Product Image
 * Product image within shop cards.
 */
.shop-card img {
  width: 100%;                        /* Full width of card */
  height: 200px;                      /* Fixed height */
  object-fit: cover;                  /* Cover without distortion */
  border-radius: 0.5rem;              /* Rounded corners */
  margin-bottom: 1.5rem;             /* Space below image */
}

/**
 * Shop Product Title
 * Product name or title within shop cards.
 */
.shop-card h5 {
  font-size: 1.5rem;                  /* Larger than body text */
  color: var(--primary-color);        /* Use primary brand color */
  margin-bottom: 0.5rem;             /* Small space below title */
}

/**
 * Shop Card Button
 * Call-to-action button within shop cards.
 */
.shop-card .btn {
  background-color: var(--primary-color); /* Primary brand background */
  color: var(--text-light);           /* Light text for contrast */
  padding: 0.5rem 2rem;               /* Horizontal emphasis */
  border-radius: 50px;               /* Pill shape */
}

/**
 * Contact Area
 * Contact information and form section.
 */
.contact-area {
  padding: 7rem 2rem 5rem;            /* Generous padding */
  position: relative;                 /* Position for absolute children */
  z-index: 1;                         /* Stacking context */
}

/**
 * Contact Info Card
 * Individual contact information cards with glass effect.
 */
.contact-info {
  background: rgba(0, 0, 0, 0.3);     /* Semi-transparent background */
  border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  border-radius: 1rem;                /* Rounded corners */
  padding: 1rem;                      /* Comfortable padding */
  text-align: center;                 /* Center text content */
  transition: transform 0.3s ease;    /* Smooth hover transition */
  height: 100%;                       /* Full height for consistency */
  backdrop-filter: blur(4px);         /* Glass morphism effect */
  will-change: transform, box-shadow; /* Optimize for animation */
  transform: translateZ(0);           /* Hardware acceleration */
}

/**
 * Contact Info Hover
 * Interactive effect for contact information cards.
 */
.contact-info:hover {
  transform: translateY(-5px);         /* Lift card slightly */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* Subtle glow effect */
}

/**
 * Contact Info Icon
 * Icons representing different contact methods.
 */
.contact-info-icon i {
  font-size: 2rem;                    /* Large icon size */
  color: #fff;                        /* White color */
  margin-bottom: 1rem;               /* Space below icon */
}

/**
 * Contact Info Heading
 * Contact method titles.
 */
.contact-info h5 { 
  color: #fff;                        /* White text */
}

/**
 * Contact Info Links
 * Clickable contact information (email, phone, etc.).
 */
.contact-info a { 
  color: #fff;                        /* White text */
}

/**
 * Contact Image Container
 * Container for contact section imagery.
 */
.contact-img img {
  border-radius: 1rem;                /* Rounded corners */
  border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  background: rgba(255, 255, 255, 0.05); /* Very light background */
}

/**
 * Contact Form
 * Contact form container and styling.
 */
.contact-form {
  position: relative;                 /* Position for background text */
  z-index: 1;                         /* Above background elements */
}

/**
 * Contact Form Header
 * Heading section for the contact form.
 */
.contact-form-header h1 {
  color: #fff;                        /* White text */
  margin-bottom: 1.5rem;             /* Space below heading */
  position: relative;                 /* Position for z-index */
  z-index: 2;                         /* Above background text */
}

/**
 * Contact Form Element
 * The actual form element.
 */
.contact-form form {
  position: relative;                 /* Position for z-index */
  z-index: 2;                         /* Above background text */
}

/**
 * Contact Form Inputs
 * Input fields within the contact form with glass effect.
 */
.contact-form .form-control {
  background: rgba(0, 0, 0, 0.3);     /* Semi-transparent background */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  color: #fff;                        /* White text */
  backdrop-filter: blur(3px);         /* Glass morphism effect */
}

/**
 * Contact Form Placeholder
 * Placeholder text styling for form inputs.
 */
.contact-form .form-control::placeholder {
  color: #ccc;                        /* Light gray placeholder text */
}

/**
 * Contact Form Input Focus
 * Styling for focused form inputs.
 */
.contact-form .form-control:focus {
  background: rgba(0, 0, 0, 0.5);     /* Darker background on focus */
  border-color: #fff;                 /* White border on focus */
  box-shadow: none;                   /* Remove default focus shadow */
  color: #fff;                        /* Ensure white text */
}

/**
 * Contact Form Submit Button
 * Submit button for the contact form.
 */
.contact-form .theme-btn {
  background-color: #fff;             /* White background */
  color: #000;                        /* Black text for contrast */
  border: none;                       /* No border */
  padding: 0.6rem 1.5rem;             /* Comfortable padding */
  border-radius: 5px;                 /* Slightly rounded corners */
  margin-top: 1rem;                   /* Space above button */
}

/**
 * Contact Form Background Text
 * Decorative background text effect.
 */
.contact-form-background-text {
  position: absolute;                 /* Position within form */
  top: 50%;                          /* Center vertically */
  left: 50%;                         /* Center horizontally */
  transform: translate(-50%, -50%);   /* Perfect centering */
  font-size: clamp(3rem, 12vw, 6.5rem); /* Responsive font size */
  font-weight: 800;                   /* Very bold font weight */
  color: rgba(255, 255, 255, 0.08);  /* Very subtle white text */
  z-index: 1;                         /* Behind form content */
  pointer-events: none;               /* Ignore mouse events */
  line-height: 1;                     /* Tight line height */
  white-space: nowrap;               /* Prevent text wrapping */
}

/**
 * Map Container
 * Container for embedded maps with styling.
 */
.map-container {
  border-radius: 1rem;                /* Rounded corners */
  overflow: hidden;                   /* Hide map overflow */
  border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  background: rgba(0, 0, 0, 0.3);     /* Semi-transparent background */
  backdrop-filter: blur(3px);         /* Glass morphism effect */
}

/**
 * Map Iframe
 * Embedded map iframe styling.
 */
.map-container iframe {
  width: 100%;                        /* Full width of container */
  height: 400px;                      /* Fixed height */
  border: 0;                          /* Remove default border */
}

/**
 * Books Section
 * Section showcasing books or publications.
 */
.books-section {
  padding: 5rem 0;                    /* Vertical padding only */
  background-color: transparent;      /* Transparent background */
}

/**
 * Books Section Heading
 * Main heading for the books section.
 */
.books-section h2 {
  color: var(--text-light);           /* Light text color */
}

/**
 * Book Card
 * Individual book showcase card with hover effects.
 */
.book-card {
  background: #111;                    /* Dark gray background */
  border: 2px solid var(--secondary-color); /* Secondary color border */
  box-shadow: 0 0 10px rgba(51, 153, 255, 0.3); /* Subtle blue glow */
  padding: 1.5rem;                    /* Comfortable padding */
  border-radius: 1rem;                /* Rounded corners */
  text-align: center;                 /* Center text content */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transitions */
  will-change: transform, box-shadow; /* Optimize for animation */
  transform: translateZ(0);           /* Hardware acceleration */
}

/**
 * Book Card Hover
 * Interactive effect for book cards.
 */
.book-card:hover {
  transform: translateY(-8px) scale(1.03); /* Lift and scale slightly */
  box-shadow: 0 0 20px rgba(51, 153, 255, 0.6); /* Enhanced blue glow */
}

/**
 * Book Cover Image
 * Book cover images within book cards.
 */
.book-card img {
  max-width: 100%;                    /* Responsive width */
  height: 220px;                      /* Fixed height */
  object-fit: cover;                  /* Cover without distortion */
  border-radius: 10px;                /* Rounded corners */
  margin-bottom: 1rem;               /* Space below image */
  border: 1px solid #444;             /* Subtle border */
}

/**
 * Book Title
 * Book title within book cards.
 */
.book-card h5 {
  color: var(--secondary-color);      /* Use secondary color */
  font-weight: bold;                  /* Bold font weight */
}

/**
 * Book Card Button
 * Call-to-action button within book cards.
 */
.book-card .btn {
  background-color: var(--secondary-color); /* Secondary color background */
  color: #000;                        /* Black text for contrast */
  border: none;                       /* No border */
  margin-top: 1rem;                   /* Space above button */
  padding: 0.5rem 1.2rem;             /* Comfortable padding */
  border-radius: 25px;               /* Pill shape */
}

/**
 * Background Section
 * Full-screen section with background image.
 */
.background-section {
  background-repeat: no-repeat;       /* Don't repeat background image */
  background-position: center center;  /* Center background image */
  background-size: cover;             /* Cover entire area */
  height: 100vh;                      /* Full viewport height */
  width: 100%;                        /* Full width */
  position: relative;                 /* Position for absolute children */
  display: flex;                      /* Flex layout for content */
  align-items: center;               /* Vertically center content */
}

/**
 * Section Background Image
 * Background image for full-screen sections.
 */
.section-background-image {
  position: absolute;                 /* Cover entire section */
  top: 0;                             /* Start from top */
  left: 0;                            /* Start from left */
  width: 100%;                        /* Full width */
  height: 100%;                       /* Full height */
  object-fit: cover;                  /* Cover without distortion */
  z-index: 1;                         /* Behind content */
}

/**
 * Content Overlay
 * Text content overlay on background images.
 */
.content-overlay {
  position: relative;                 /* Changed from absolute for better layout */
  z-index: 2;                         /* Above background image */
  bottom: auto;                       /* Reset positioning */
  left: auto;                         /* Reset positioning */
  color: #ffffff;                     /* White text for contrast */
  text-shadow: 1px 1px 4px #000;     /* Text shadow for readability */
  padding: 2rem;                      /* Add padding for spacing */
  margin-left: 5%;                    /* Re-apply margin for positioning */
}

/**
 * Content Overlay Heading
 * Main heading within content overlay.
 */
.content-overlay h1 {
  font-size: 2.4rem;                  /* Large font size */
  margin-bottom: 1.2rem;             /* Space below heading */
  color: #ffffff;                     /* White text */
  font-weight: bold;                  /* Bold font weight */
}

/**
 * Content Overlay Button
 * Call-to-action button within content overlay.
 */
.content-overlay .btn {
  background-color: #ffffff;          /* White background */
  color: #000;                        /* Black text for contrast */
  padding: 0.6rem 1.5rem;             /* Comfortable padding */
  border: none;                       /* No border */
  border-radius: 30px;               /* Pill shape */
  font-weight: 600;                   /* Semi-bold font weight */
  transition: background 0.3s ease;   /* Smooth background transition */
}

/**
 * Content Overlay Button Hover
 * Interactive effect for content overlay buttons.
 */
.content-overlay .btn:hover {
  background-color: #44bbee;          /* Blue background on hover */
}

/* 8. Footer
/*----------------------------------------------------------------*/
/**
 * Footer Section
 * Main footer area with site information and links.
 */
.footer-section {
  background: linear-gradient(to right, #ffffff, #f8f8f8); /* Light gradient background */
  border-top: 1px solid var(--text-dark); /* Top border for separation */
  color: var(--text-dark);            /* Dark text for readability */
  padding: 3rem 1.5rem;               /* Generous padding */
}

/**
 * Footer Headings
 * Section headings within the footer.
 */
.footer-section h5,
.footer-section h6 {
  color: var(--primary-color);        /* Use primary brand color */
  text-transform: uppercase;          /* Uppercase for emphasis */
}

/**
 * Footer Paragraph Text
 * Body text within the footer.
 */
.footer-section p {
  font-size: 0.95rem;                 /* Slightly smaller than body text */
  color: var(--text-dark);            /* Dark text color */
}

/**
 * Footer List Items
 * List items within footer sections.
 */
.footer-section ul li {
  line-height: 1.8;                   /* Comfortable line height */
  font-size: 0.95rem;                 /* Slightly smaller than body text */
}

/**
 * Footer Links
 * Links within the footer.
 */
.footer-section ul a {
  color: var(--text-dark);            /* Dark text color */
}

/**
 * Footer Link Hover
 * Interactive effect for footer links.
 */
.footer-section ul a:hover {
  color: var(--secondary-color);      /* Change to secondary color on hover */
}

/**
 * Footer Contact Links
 * Special styling for contact information links.
 */
.footer-contact-link {
  color: var(--secondary-color) !important; /* Force secondary color */
}

/**
 * Social Media Icons
 * Social media icon styling within footer.
 */
.social-icon {
  color: var(--text-dark);            /* Dark text color */
  font-size: 1.2rem;                  /* Larger than body text */
  transition: transform 0.2s ease-in-out; /* Smooth scale transition */
}

/**
 * Social Icon Hover
 * Interactive effect for social media icons.
 */
.social-icon:hover {
  color: var(--secondary-color) !important; /* Change to secondary color */
  transform: scale(1.2);              /* Scale up on hover */
}

/**
 * Footer Bottom
 * Bottom section of the footer with copyright information.
 */
.footer-bottom {
  border-top: 1px solid var(--text-dark); /* Top border for separation */
  padding-top: 1.5rem;                /* Space above */
  font-size: 0.9rem;                  /* Smaller font size */
  color: var(--text-dark);            /* Dark text color */
  text-align: center;                 /* Center text */
  margin-top: 3rem;                   /* Space above */
}

/* 9. Components (Modal, Scroll-to-Top)
/*----------------------------------------------------------------*/
/**
 * Modal Component
 * Popup dialog component for displaying content overlays.
 */
.modal {
  position: fixed;                     /* Fixed position relative to viewport */
  top: 0;                             /* Start from top */
  left: 0;                            /* Start from left */
  z-index: 1055;                      /* High z-index to appear above all content */
  display: none;                      /* Hidden by default */
  width: 100%;                        /* Full width */
  height: 100%;                       /* Full height */
  overflow-x: hidden;                 /* Hide horizontal overflow */
  overflow-y: auto;                   /* Allow vertical scrolling if needed */
  outline: 0;                         /* Remove outline */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
}

/**
 * Active Modal
 * Modal that is currently visible.
 */
.modal.show {
  display: block;                     /* Show modal */
}

/**
 * Modal Dialog
 * Container for modal content with animation.
 */
.modal-dialog {
  position: relative;                 /* Position for animation */
  width: auto;                        /* Auto width */
  margin: 0.5rem;                     /* Small margin */
  pointer-events: none;                /* Ignore mouse events (handled by overlay) */
  max-width: 500px;                   /* Maximum width */
  transition: transform .3s ease-out; /* Smooth slide-down animation */
  transform: translateY(-50px);        /* Start position (above viewport) */
}

/**
 * Active Modal Dialog
 * Modal dialog when modal is shown.
 */
.modal.show .modal-dialog {
  transform: none;                    /* Reset to normal position */
}

/**
 * Centered Modal Dialog
 * Modal dialog that is centered vertically.
 */
.modal-dialog-centered {
  display: flex;                      /* Flex layout for centering */
  align-items: center;                /* Vertically center */
  min-height: calc(100% - 1rem);      /* Minimum height with margin */
  margin: auto;                       /* Center horizontally */
}

/**
 * Modal Content
 * The actual content area of the modal.
 */
.modal-content {
  position: relative;                 /* Position for child elements */
  display: flex;                      /* Flex layout */
  flex-direction: column;             /* Vertical layout */
  width: 100%;                        /* Full width of dialog */
  pointer-events: auto;               /* Enable mouse events */
  background-color: #fff;             /* White background */
  background-clip: padding-box;       /* Background within padding */
  border: 1px solid rgba(0,0,0,.2);   /* Subtle border */
  border-radius: 0.3rem;             /* Slightly rounded corners */
  outline: 0;                         /* Remove outline */
  padding: 1rem;                      /* Comfortable padding */
}

/**
 * Scroll-to-Top Button
 * Floating button that appears when scrolling down for quick navigation.
 */
.scroll-top {
  position: fixed;                     /* Fixed position relative to viewport */
  bottom: 30px;                       /* Position from bottom */
  right: 30px;                        /* Position from right */
  background-color: var(--text-light); /* Light background */
  color: var(--text-dark);            /* Dark text for contrast */
  border: none;                       /* No border */
  padding: 10px 12px;                 /* Square padding */
  border-radius: 50%;                 /* Perfect circle */
  display: none;                      /* Hidden by default */
  z-index: 999;                       /* High z-index to appear above content */
  font-size: 20px;                    /* Large icon size */
  cursor: pointer;                    /* Pointer cursor to indicate interactivity */
  box-shadow: 0 0 12px var(--secondary-color); /* Subtle glow effect */
}

/**
 * Visible Scroll-to-Top Button
 * Scroll-to-top button that becomes visible when needed.
 */
.scroll-top.show {
  display: block;                     /* Show button */
}

/* 10. Responsive Media Queries
/*----------------------------------------------------------------*/
/**
 * Large Desktop to Tablet Breakpoint
 * Styles for screens smaller than 1200px (tablets and smaller desktops).
 * Primarily enables mobile navigation menu.
 */
@media (max-width: 1199.98px) {
  /* Show mobile menu toggle button */
  .navbar-toggler {
    display: block;                   /* Show hamburger menu */
  }
  
  /* Hide desktop navigation */
  .navbar-collapse {
    display: none;                     /* Hide by default */
    width: 100%;                      /* Full width when shown */
    flex-direction: column;            /* Vertical layout */
    align-items: flex-start;          /* Align to left */
    position: absolute;               /* Position below navbar */
    top: 100%;                        /* Below navbar */
    left: 0;                          /* Start from left */
    background-color: rgba(0, 0, 0, 0.95); /* Semi-transparent background */
    padding: 1rem 2rem;               /* Comfortable padding */
  }
  
  /* Show mobile navigation when active */
  .navbar-collapse.active {
    display: flex;                     /* Show mobile menu */
  }
  
  /* Mobile navigation layout */
  .navbar-nav {
    flex-direction: column;           /* Vertical layout */
    align-items: flex-start;          /* Align to left */
    width: 100%;                      /* Full width */
  }
  
  /* Mobile navigation items */
  .nav-item {
    width: 100%;                      /* Full width */
  }
  
  /* Mobile navigation links */
  .nav-link {
    margin: 0.5rem 0;                 /* Vertical spacing */
  }
  
  /* Mobile search button */
  .navbar .btn-search {
    margin: 1rem 0 0 0;               /* Position below navigation */
  }
}

/**
 * Tablet Breakpoint
 * Styles for screens 768px and wider (tablets and desktops).
 * Adds responsive column classes for tablet layouts.
 */
@media (min-width: 768px) {
  /* Responsive column classes for medium screens */
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }  /* 2/12 = 1/6 of container */
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }  /* 4/12 = 1/3 of container */
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }  /* 5/12 of container */
  .col-md-6 { flex: 0 0 auto; width: 50%; }         /* 6/12 = 1/2 of container */
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }  /* 7/12 of container */
  
  /* Flex order utilities for medium screens */
  .order-md-1 { order: 1; }           /* First in order */
  .order-md-2 { order: 2; }           /* Second in order */
  
  /* Margin utilities for medium screens */
  .mb-md-0 { margin-bottom: 0 !important; } /* Remove bottom margin */
}

/**
 * Desktop Breakpoint
 * Styles for screens 992px and wider (desktops).
 * Adds responsive column classes for desktop layouts.
 */
@media (min-width: 992px) {
  /* Responsive column classes for large screens */
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }  /* 4/12 = 1/3 of container */
  .col-lg-6 { flex: 0 0 auto; width: 50%; }         /* 6/12 = 1/2 of container */
}

/**
 * Tablet and Smaller Breakpoint
 * Styles for screens smaller than 992px (tablets and mobile).
 * Adjusts layout for smaller screens.
 */
@media (max-width: 991.98px) {
  /* Topbar layout adjustment */
  .topbar {
    flex-wrap: wrap;                  /* Allow wrapping */
    justify-content: center;          /* Center content */
    padding: 0.5rem 1rem;            /* Reduce padding */
    gap: 1rem;                       /* Reduce spacing */
  }
  
  /* Navbar padding adjustment */
  .navbar {
    padding: 1rem;                    /* Reduce padding */
  }
  
  /* Carousel text size adjustment */
  .carousel-caption h2 {
    font-size: 2rem;                  /* Reduce heading size */
  }
  .carousel-caption p {
    font-size: 1rem;                  /* Reduce text size */
  }
  
  /* Contact form layout adjustment */
  .contact-area .row.align-items-center {
    flex-direction: column;           /* Stack vertically */
  }
}

/**
 * Mobile Breakpoint
 * Styles for screens smaller than 768px (mobile devices).
 * Makes significant layout adjustments for mobile screens.
 */
@media (max-width: 767.98px) {
  /* Hide carousel caption on mobile */
  .carousel-caption {
    display: none;                    /* Hide text overlay */
  }
  
  /* Footer layout adjustment */
  .footer-section .row > * {
    text-align: center;               /* Center all footer content */
  }
  
  /* Social icons centering */
  .social-icons {
    justify-content: center;          /* Center social icons */
  }
  
  /* Content overlay text size adjustment */
  .content-overlay h1 {
    font-size: 1.8rem;                /* Reduce heading size */
  }
}

/* Shared background for About + Feature sections */
.shared-bg {
  background: url("") center/cover no-repeat fixed;
  position: relative;
}
.shared-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255, 255, 255); /* overlay for readability */
}
.shared-bg .container {
  position: relative;
  z-index: 1;
}