@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
    
  OPEX Management Consultancy Service

	About:  Empowering students, professionals, and organizations through Lean, Risk, and Continuity—delivered via training, advisory, and strategic execution.

	We’re a principle-led management consultancy specializing in Lean Six Sigma, Business Continuity, and Integrated Risk Solutions—delivered through structured training, strategic implementation, and value-driven advisory.

	Whether you're a student, professional, or enterprise leader, our programs foster advancement through measurable results, practical application, and transformation-ready thinking.

	From certification training and feasibility analysis to safety-aligned optimization and technical strategy—we equip learners and leaders to navigate complexity with confidence and purpose.
	
	Author: Ricardo Pablo Rabang. Principal Consultant, ricardo.rabang@opex.ph

	Developer: Cross-Functional Advisor | Strategic Design & Technical Oversight, tech@opex.ph

	responsive.css

───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* Breakpoint: Extra Small (XS) - Mobile portrait (≤ 480px)
   Purpose: Create a compact, stacked layout for small mobile devices, with content centered and constrained.
*/
@media (max-width: 480px) {
  /* Strategic CTA — center-align for mobile clarity and emotional resonance
   This button invites users into a guided assessment journey.
   On small screens, centering ensures focus, warmth, and ease of engagement. */
  #assessment-button {
    display: block;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 2rem; /* creates vertical space */
    margin-left: auto;
    text-align: center;
  }

  /* 1. Hero container grid: stacks content vertically, aligns perfectly with header. */
  .main-content.section-1-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem var(--container-padding);
    /*width: calc(100% - (var(--container-padding) * 2) + 0.5rem);*/
    width: calc(100% - (var(--container-padding-2) * 2) + 0.5rem);
    max-width: 1280px;
    margin: 0 auto;
  }

  /* 2. Hero child columns: ensure they take full width in stacked layout. */
  .main-content.section-1-grid > div {
    width: 100%;
  }

  /* 3. Right-side hero column: Lift the content further for rhythm. */
  .main-content.section-1-grid > div:last-child {
    margin-top: -1.8rem;  
  }

  /* 4. Hero headline & 5. Hero subhead: centrally aligned text. */
  .main-content .main-head,
  .main-content .main-sub-head {
    text-align: center;
  }

  /* Carousel Alignment: Ensures the carousel spans the full width of the hero block. */
  .carousel-container {
    width: 100%;
    margin: 0 auto;
    left: auto;
    right: auto;
    position: relative;
    box-sizing: border-box;
  }

  /* 6. Caption container: default padding for carousel captions. */
  .carousel-caption {
    padding: 1rem;
  }

  /* 7. Caption headline text: smaller font for extra small screens. */
  .caption-headline {
    font-size: 1rem;
    text-align: center;
  }

  /* 8. Caption paragraph text: even smaller font for extra small screens. */
  .caption-paragraph {
    font-size: 0.75rem;
    text-align: center;
  }
  
  /* Carousel indicators: Centered and with reduced gap for small screens. */
  .carousel-indicators {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /*gap: 4px;*/
    gap: 2px;
    z-index: 20;
    /*max-width: none;*/
    /*max-width: calc(100% - (var(--container-padding-3) * 2));*/
    max-width: calc(100% - (var(--container-padding-2) * 2));
  }

  /* 9. Generic column container: stacks columns vertically. */
  .columns {
    flex-direction: column;
  }

  /* 10. Left & 11. Right column content: full width in stacked layout. */
  .column-left,
  .column-right {
    width: 100%;
  }

  /* 12. Consent layout container: stacks content vertically for easy reading. */
  .consent-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  /* 13. Consent button group: stacks buttons vertically. */
  .consent-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  /* 14. Thumbnail preview visibility: ensure it's hidden on small screens. */
  .carousel-indicator-preview {
    display: none;
  }

  /* 15. Thumbnail size: default size for mobile. */
  .carousel-indicator-thumb {
    height: 50px;
    max-width: 90px;
    margin-bottom: 0.25rem;
  }
}

/* Breakpoint: Small (SM) - Mobile landscape and small tablets (481px–767px)
   Purpose: Maintain a stacked layout with slightly increased spacing and font sizes for readability.
*/
@media (min-width: 481px) and (max-width: 767px) {

  /* Strategic CTA — maintain centered alignment for small devices.
   Ensures visual clarity and emotional focus in compact layouts. */
  #assessment-button {
    display: block;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 2rem; /* creates vertical space */
    margin-left: auto;
    text-align: center;
  }

  /* 1. Hero container grid: increase spacing. */
  .main-content.section-1-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem var(--container-padding);
    /*width: calc(100% - (var(--container-padding) * 2) + 0.5rem);*/
    width: calc(100% - (var(--container-padding-2) * 2) + 0.5rem);
    max-width: 1280px;
    margin: 0 auto;
  }

  /* 2. Hero child columns: ensure they take full width in stacked layout. */
  .main-content.section-1-grid > div {
    width: 100%;
  }

  /* 3. Right-side hero column: Lift the content further for rhythm. */
  .main-content.section-1-grid > div:last-child {
    margin-top: -1.8rem;  
  }

  /* Hero headline & subhead: Centered text for small screens. */
  .main-content .main-head,
  .main-content .main-sub-head {
    text-align: center;
  }

  /* 6. Caption container: increase padding. */
  .carousel-caption {
    padding: 1.5rem;
  }

  /* 7. Caption headline text: increase font size. */
  .caption-headline {
    font-size: 1.4rem;
  }

  /* 8. Caption paragraph text: increase font size. */
  .caption-paragraph {
    font-size: 1rem;
  }

  /* 14. Thumbnail preview visibility: ensure it's hidden on these screens. */
  .carousel-indicator-preview {
    display: none;
  }

  /* 15. Thumbnail size: increase size for better visibility. */
  .carousel-indicator-thumb {
    height: 60px;
    max-width: 100px;
  }

  /* Carousel Alignment: Align with the overall content block. */
  .carousel-container {
    width: 100%;
    margin: 0 auto;
    left: auto;
    right: auto;
    position: relative;
    box-sizing: border-box;
  }

  /* Carousel indicators: Centered and with reduced gap for small screens. */
  .carousel-indicators {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /*gap: 4px;*/
    gap: 2px;
    z-index: 20;
    /*max-width: none;*/
    /*max-width: calc(100% - (var(--container-padding-3) * 2));*/
    max-width: calc(100% - (var(--container-padding-2) * 2));
  }
}

/* Breakpoint: Medium (MD) - Tablets and small laptops (768px–1023px)
   Purpose: Continue the stacked layout with further increased spacing and font sizes.
*/
@media (min-width: 768px) and (max-width: 1023px) {
  /* Strategic CTA — center-align for clarity and emotional resonance
     This button invites users into a guided assessment journey.
     On small screens, centering ensures focus, warmth, and ease of engagement. */ 
  #assessment-button {
    display: block;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 2rem; /* creates vertical space */
    margin-left: auto;
    text-align: center;
  }

  /* 1. Hero container grid: increase spacing for tablets. */
  .main-content.section-1-grid {
  /* Updated: 25/10/01 — stacked layout for MD */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  gap: 2rem;
  padding: 2rem 0;
  /*width: calc(100% - (var(--container-padding) * 2) + 0.5rem); */
  width: calc(100% - (var(--container-padding-2) * 2) + 0.5rem);
  max-width: 1280px;
  margin: 0 auto;
}

  /* Hero headline & subhead: Centered text for small screens. */
  .main-content .main-head,
  .main-content .main-sub-head {
    text-align: center;
  }

  /* 6. Caption container: increase padding. */
  .carousel-caption {
    padding: 2rem;
  }

  /* 7. Caption headline text: increase font size. */
  .caption-headline {
    font-size: 1.6rem;
  }

  /* 8. Caption paragraph text: increase font size. */
  .caption-paragraph {
    font-size: 1.1rem;
  }

  /* 9. Generic column container: increase gap. */
  .columns {
    gap: 2rem;
  }

  /* 12. Consent layout container: increase gap. */
  .consent-content {
    gap: 1.5rem;
  }

  /* 13. Consent button group: transition to a horizontal layout. */
  .consent-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }

  /* 14. Thumbnail preview visibility: ensure it's hidden on these screens. */
  .carousel-indicator-preview {
    display: none;
  }

  /* 15. Thumbnail size: increase size. */
  .carousel-indicator-thumb {
    height: 70px;
    margin-bottom: 0.5rem;
  }

  /* Carousel Alignment: Align with the overall content block. */
  .carousel-container {
    width: 100%;
    margin: 0 auto;
    left: auto;
    right: auto;
    position: relative;
    box-sizing: border-box;
  }

  /* Carousel indicators: Centered and with reduced gap for small screens. */
  .carousel-indicators {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /*gap: 4px;*/
    gap: 2px;
    z-index: 20;
    /*max-width: none;*/
    /*max-width: calc(100% - (var(--container-padding-3) * 2));*/
    max-width: calc(100% - (var(--container-padding-2) * 2));
  }
}

/* Breakpoint: Large (LG) - Standard desktops and large tablets (1024px–1279px)
   Purpose: Transition to a standard vertical order (carousel above text), but keep the overall stacked layout.
*/
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 1. Hero container grid: change to standard column order and increase spacing. */
 .main-content.section-1-grid {
  /* Updated: 25/10/01 — stacked layout for LG */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  gap: 2rem;
  padding: 2rem 0;
  /*width: calc(100% - (var(--container-padding) * 2) + 0.5rem); */
  width: calc(100% - (var(--container-padding-2) * 2) + 0.5rem);
  max-width: 1280px;
  margin: 0 auto;
}


  /* Hero headline & subhead: Centered text for small screens. */
  .main-content .main-head,
  .main-content .main-sub-head {
    text-align: center;
  }

  /* Strategic CTA — center-align for clarity and emotional resonance
   This button invites users into a guided assessment journey.
   On small screens, centering ensures focus, warmth, and ease of engagement. */ 
  #assessment-button {
    display: block;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 2rem; /* creates vertical space */
    margin-left: auto;
    text-align: center;
  }

  /* 6. Caption container: increase padding. */
  .carousel-caption {
    padding: 2.5rem;
  }

  /* 7. Caption headline text: increase font size. */
  .caption-headline {
    font-size: 1.8rem;
  }

  /* 8. Caption paragraph text: increase font size. */
  .caption-paragraph {
    font-size: 1.2rem;
  }

  /* 9. Generic column container: increase gap. */
  .columns {
    gap: 2.5rem;
  }

  /* 12. Consent layout container: increase gap. */
  .consent-content {
    gap: 2rem;
  }

  /* 14. Thumbnail preview visibility: ensure it's hidden on these screens. */
  .carousel-indicator-preview {
    display: none;
  }

  /* 15. Thumbnail size: increase size. */
  .carousel-indicator-thumb {
    height: 75px;
    max-width: 110px;
  }

  /* Carousel Alignment: Align with the overall content block. */
  .carousel-container {
    width: 100%;
    margin: 0 auto;
    left: auto;
    right: auto;
    position: relative;
    box-sizing: border-box;
  }

  /* Carousel indicators: Centered and with reduced gap for small screens. */
  .carousel-indicators {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    z-index: 20;
    max-width: none;
  }
}

/* Breakpoint: Extra Large (XL) - Wide desktops and landscape tablets (1280px–1599px)
   Purpose: Transition to a full two-column horizontal layout. The left column contains the
            text and the right column contains the carousel.
*/
@media (min-width: 1280px) and (max-width: 1599px) {
  /* 1. Hero container grid: Transition to a two-column row layout. */
  .main-content.section-1-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
    padding: 3rem 6rem;
    max-width: 1280px;
    margin: 0 auto;
  }

  /* 2. Hero child columns: Define the proportional width for each column. */
  .main-content.section-1-grid > div {
    flex: 1;
    max-width: 48%;    
  }

  /* 3. Right-side hero column: Apply negative margin to lift the carousel. */
  .main-content.section-1-grid > div:last-child {
    margin-top: -3.5rem;
  }

  /* 4. Hero headline & 5. Hero subhead: Left align text for the desktop layout. */
  /* 7. Caption headline & 8. Caption paragraph: Left align text. */
  .main-content .main-head,
  .main-content .main-sub-head,
  .caption-headline,
  .caption-paragraph {
    text-align: left;
  }

  /* Buttons below hero text: Left align the button on large screens. */
  .standard-button {
      text-align: left;
  }

  /* 6. Caption container: Increase padding. */
  .carousel-caption {
    padding: 3rem;
  }

  /* 7. Caption headline text: Increase font size. */
  .caption-headline {
    font-size: 2rem;
  }

  /* 8. Caption paragraph text: Increase font size. */
  .caption-paragraph {
    font-size: 1.25rem;
  }

  /* 9. Generic column container: Transition to a two-column row layout for better desktop presentation. */
  .columns {
    display: flex;
    flex-direction: row;
    gap: 3rem;
  }

  /* 10. Left & 11. Right column content: Set widths for the two-column layout. */
  .column-left,
  .column-right {
    width: 48%;
  }

  /* 12. Consent layout container: Ensures two-column row layout for the consent modal. */
  .consent-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: nowrap;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }

  /* 13. Consent button group: Left align and increase gap. */
  .consent-buttons {
    justify-content: flex-start;
    gap: 1.25rem;
  }

  /* 14. Thumbnail preview visibility: Make visible for desktop. */
  .carousel-indicator-preview {
    display: block;
  }

  /* 15. Thumbnail size: Increase size. */
  .carousel-indicator-thumb {
    height: 80px;
  }

  /* Carousel container: Ensure it fills its parent flex item. */
  .carousel-container {
    width: 100%;
    left: auto;
    right: auto;
    position: relative;
    box-sizing: border-box;
  }

  /* Carousel indicators: Centered and with a higher z-index to be clickable. */
  .carousel-indicators {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 20;
  }
}

/* Breakpoint: Ultra Wide (XXL) - 4K monitors and ultra-wide desktops (≥ 1600px)
   Purpose: Maintain the two-column layout with expanded spacing and further refined visual rhythm
            for extra-large screens.
*/
@media (min-width: 1600px) {
  /* 1. Hero container grid: Further increase spacing and padding. */
  .main-content.section-1-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
    padding: 4rem 8rem;
    max-width: 1600px;
    margin: 0 auto;
  }

  /* 2. Hero child columns: Define the proportional width for each column. */
  .main-content.section-1-grid > div {
    flex: 1;
    max-width: 48%;
  }

  /* 3. Right-side hero column: Lift the content further for rhythm. */
  .main-content.section-1-grid > div:last-child {
    margin-top: -4rem;
  }

  /* 6. Caption container: Increase padding. */
  .carousel-caption {
    padding: 4rem;
  }

  /* 7. Caption headline text: Increase font size. */
  .caption-headline {
    font-size: 2.25rem;
  }

  /* 8. Caption paragraph text: Increase font size. */
  .caption-paragraph {
    font-size: 1.35rem;
  }

  /* 9. Generic column container: Increase gap. */
  .columns {
    gap: 4rem;
  }

  /* 13. Consent button group: Increase gap. */
  .consent-buttons {
    gap: 1.5rem;
  }

  /* 14. Thumbnail preview visibility: Make visible for desktop. */
  .carousel-indicator-preview {
    display: block;
  }

  /* 15. Thumbnail size: Increase size. */
  .carousel-indicator-thumb {
    height: 85px;
    max-width: 120px;
  }

  /* Ensure carousel remains within its parent's flow. */
  .carousel-container {
    width: 100%;
    left: auto;
    right: auto;
    position: relative;
    box-sizing: border-box;
  }
  
  /* Carousel indicators: Centered and with a higher z-index to be clickable. */
  .carousel-indicators {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 20;
  }
}