/*------------------------------------*\
  #IMPORTS
  * Import external stylesheets here.
\*------------------------------------*/
@import url(/css/all.css?v=10); /* Imports a global or utility stylesheet. */

/*------------------------------------*\
  #HEADER SECTION STYLES
  * Styles related to the main header area of the page.
\*------------------------------------*/

/* Header Section: Full-width and height hero section. */
.nclex-header {
  width: 100%; /* Ensures the header spans the full width of its parent. */
  height: fit-content; /* Sets the header height to 100% of the viewport height. */
  /* Applies a linear gradient overlay on top of a background image. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('/photos/womeninlib.jpg');
  background-repeat: no-repeat; /* Prevents the background image from repeating. */
  background-size: cover; /* Scales the background image to cover the entire container. */
  background-position: 65% 20%; /* Positions the background image. */
  display: flex; /* Enables Flexbox for content alignment. */
  flex-direction: column; /* Stacks header content vertically. */
  justify-content: center; /* Centers content horizontally within the flex container. */
  align-items: center; /* Centers content vertically within the flex container. */
  box-sizing: border-box; /* Ensures padding is included in the element's total width and height. */
}

/* Media query for header adjustments on smaller screens. */

/* Header Content Container: Limits content width and applies padding. */
.nclex-header-container {
  width: 100%; /* Ensures the container takes full width up to its max-width. */
  max-width: 1140px; /* Sets a maximum width for the content, similar to a standard container. */
  margin-left: auto; /* Centers the container horizontally. */
  margin-right: auto; /* Centers the container horizontally. */
  padding-top: 50px; /* Adds vertical padding to the top. */
  padding-bottom: 50px; /* Adds vertical padding to the bottom. */
  box-sizing: border-box; /* Includes padding in the element's total size. */
  padding-left: 15px; /* Adds default horizontal padding. */
  padding-right: 15px; /* Adds default horizontal padding. */
}

/* Content Wrapper: Defines layout for main content within the header. */
.nclex-content-wrapper {
  display: flex; /* Enables Flexbox for content arrangement. */
  flex-direction: column; /* Stacks content elements vertically. */
  justify-content: center; /* Centers content horizontally. */
  align-items: center; /* Centers content vertically. */
  width: 100%; /* Ensures the wrapper takes full available width. */
  text-align: center; /* Centers all text within this wrapper. */
  color: var(--white); /* Sets text color to a predefined white variable. */
}

/*------------------------------------*\
  #HEADER TITLES
  * Styles for different title sizes in the header.
\*------------------------------------*/

/* Large Header Title: Hidden by default, displayed on large screens. */
.nclex-title-large {
  display: none; /* Hides the title on smaller screens. */
  width: 100%; /* Ensures the title takes full width when displayed. */
  margin-top: 15rem; /* Adds significant top margin for spacing. */
  flex-direction: column; /* Stacks content inside vertically. */
  justify-content: center; /* Centers content horizontally. */
  align-items: center; /* Centers content vertically. */
  text-align: center; /* Ensures text is centered. */
  color: var(--white); /* Sets text color to white. */
}

/* Media query to display large title on screens 992px and wider. */
@media (min-width: 992px) {
  .nclex-title-large {
    display: flex; /* Displays the title as a flex container. */
  }
}

/* Styling for the H1 within the large header title. */
.nclex-title-large h1 {
  font-weight: bolder; /* Makes the font extra bold. */
  font-size: 60px; /* Sets a large font size. */
  line-height: 1.2; /* Adjusts line height for better readability of large text. */
  margin: 0; /* Removes default margin for H1. */
}

/* Small Header Title: Displayed by default, hidden on large screens. */
.nclex-title-small {
  display: flex; /* Displays the title as a flex container by default. */
  width: 100%; /* Ensures the title takes full width. */
  margin-top: 15rem; /* Adds significant top margin. */
  flex-direction: column; /* Stacks content inside vertically. */
  justify-content: center; /* Centers content horizontally. */
  align-items: center; /* Centers content vertically. */
  text-align: center; /* Ensures text is centered. */
  color: var(--white); /* Sets text color to white. */
}

/* Media query to hide small title on screens 992px and wider. */
@media (min-width: 992px) {
  .nclex-title-small {
    display: none; /* Hides the small title on large screens. */
  }
}

/* Styling for the H4 within the small header title. */
.nclex-title-small h4 {
  font-weight: bolder; /* Makes the font extra bold. */
  font-size: 30px; /* Sets a moderate font size. */
  line-height: 1.2; /* Adjusts line height for better readability. */
  margin: 0; /* Removes default margin for H4. */
}

/* Special styling for a specific text segment, likely a highlighted word. */
.nclex-better {
  color: var(--bg_sec); /* Sets text color to a secondary background color variable. */
}

/*------------------------------------*\
  #HEADER DESCRIPTION AND BUTTON
  * Styles for the descriptive text and call-to-action button in the header.
\*------------------------------------*/

/* Description Wrapper: Contains introductory text. */
.nclex-description-wrapper {
  width: 100%; /* Full width by default for smaller screens. */
  margin-top: 15px; /* Adds top margin. */
  color: var(--white); /* Sets text color to white. */
  margin-left: auto; /* Centers the wrapper horizontally. */
  margin-right: auto; /* Centers the wrapper horizontally. */
  text-align: center; /* Centers text within the wrapper. */
  box-sizing: border-box; /* Includes padding in the element's total size. */
  padding-left: 15px; /* Adds horizontal padding to prevent text from touching edges. */
  padding-right: 15px; /* Adds horizontal padding. */
}

/* Media query to adjust description wrapper width on large screens. */
@media (min-width: 992px) {
  .nclex-header {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('/photos/womeninlib.jpg');
    width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    /* background-position:20% 20%; */
    background-position: 40% 60%;
  }

  .nclex-description-wrapper {
    width: 66.666667%; /* Sets width to 2/3 of its parent on large screens. */
  }
}

/* Styling for paragraphs within the description wrapper. */
.nclex-description-wrapper p {
  margin-bottom: 1rem; /* Standard spacing after paragraphs. */
  line-height: 1.5; /* Sets line height for readability. */
}

/* Button Box: Container for the main call-to-action button. */
.nclex-button-box {
  height: 30px; /* Sets a fixed height for the button container. */
  width: 55%; /* Default width for smaller screens. */
  margin-left: auto; /* Centers the button box horizontally. */
  margin-right: auto; /* Centers the button box horizontally. */
  margin-top: 1.5rem; /* Adds space above the button. */
  display: flex; /* Enables Flexbox for button alignment. */
  justify-content: center; /* Centers the button horizontally within its box. */
  align-items: center; /* Vertically aligns the button within its box. */
}

/* Media query to adjust button box width on small-medium screens. */
@media (min-width: 576px) {
  .nclex-button-box {
    width: 100%; /* Makes the button box full width of its parent. */
  }
}

/* Media query to adjust button box width on large screens. */
@media (min-width: 992px) {
  .nclex-button-box {
    width: 30%; /* Sets button box to 30% width on large screens. */
  }
}

/* Main Call-to-Action Button Styling. */
.nclex-button {
  background-color: var(--bg_sec); /* Sets button background color to a secondary variable. */
  border-radius: 15px; /* Applies a rounded border to the button. */
  padding: 10px 20px; /* Adds internal padding to the button. */
  font-weight: bolder; /* Makes button text extra bold. */
  color: black; /* Sets button text color to black. */
  text-decoration: none; /* Removes underline from the link. */
  display: flex; /* Enables Flexbox for centering button text. */
  justify-content: center; /* Centers text horizontally within the button. */
  align-items: center; /* Centers text vertically within the button. */
  height: 40px; /* Sets a fixed height for the button. */
  box-sizing: border-box; /* Includes padding in the button's total size. */
  width: 100%; /* Button takes full width of its parent by default. */
}

/* Media query to adjust button width on large screens. */
@media (min-width: 992px) {
  .nclex-button {
    width: 100%; /* Ensures the button takes full width of its constrained parent. */
  }
}

/*------------------------------------*\
  #FEATURES SECTION
  * Styles for the section showcasing product features.
\*------------------------------------*/

/* Features Section: Full width container for feature content. */
.nclex-features-section {
  width: 100%; /* Ensures the section spans the full width. */
  box-sizing: border-box; /* Includes padding in the element's total size. */
  padding-top: 20px; /* Adds vertical padding. */
  padding-bottom: 20px; /* Adds vertical padding. */
}

/* Features Container: Limits content width within the features section. */
.nclex-features-container {
  max-width: 1140px; /* Sets a maximum width for the content. */
  margin-left: auto; /* Centers the container horizontally. */
  margin-right: auto; /* Centers the container horizontally. */
  padding-left: 15px; /* Adds default horizontal padding. */
  padding-right: 15px; /* Adds default horizontal padding. */
}

/* Feature Row Layout: Defines how feature items are arranged. */
.feature-row {
  display: flex; /* Enables Flexbox for item arrangement. */
  flex-direction: column; /* Stacks items vertically by default (mobile-first). */
  justify-content: center; /* Centers content horizontally within the row. */
  align-items: center; /* Centers content vertically within the row. */
  padding-top: 50px; /* Adds vertical padding to the row. */
  padding-bottom: 50px; /* Adds vertical padding. */
  width: 100%; /* Ensures the row takes full available width. */
}

/* Media query for desktop layout of feature rows. */
@media (min-width: 992px) {
  .feature-row {
    flex-direction: row; /* Arranges items horizontally on desktop. */
    text-align: left; /* Aligns text to the left on desktop. */
    justify-content: space-around; /* Distributes space evenly around items. */
  }
}

/* Feature Row with Reverse Order on Large Screens. */
.feature-row.reverse-on-large {
  flex-direction: column-reverse; /* Displays content before image on small screens. */
}

/* Media query to reverse order back on large screens (image before content). */
@media (min-width: 992px) {
  .feature-row.reverse-on-large {
    flex-direction: row; /* Image then content on large screens. */
  }
}

/* Feature Row with Grey Background. */
.feature-row.grey-background {
  background-color: rgb(234, 234, 234); /* Sets a light grey background color. */
  margin: 0; /* Removes default margins. */
  padding: 50px 0; /* Adds vertical padding. */
}

/*------------------------------------*\
  #FEATURE COLUMNS AND CONTENT BLOCKS
  * Styles for individual content and image blocks within feature rows.
\*------------------------------------*/

/* Common styles for all feature content and image columns. */
.feature-content-left,
.feature-content-right,
.feature-image-left,
.feature-image-right {
  width: 100%; /* Full width by default for mobile screens. */
  box-sizing: border-box; /* Includes padding in the element's total size. */
  padding-left: 15px; /* Adds horizontal padding. */
  padding-right: 15px; /* Adds horizontal padding. */
}

/* Left Content Column (e.g., Pricing and Affordability). */
.feature-content-left {
  margin-top: 1.5rem; /* Adds top margin for spacing. */
}

/* Media query to adjust left content column width on large screens. */
@media (min-width: 992px) {
  .feature-content-left {
    width: 40%; /* Sets width to 40% on large screens. */
  }
}

/* Right Content Column (e.g., Sponsorship, 8 NCLEX Sections, 2000+ Qbank). */
.feature-content-right {
  margin-top: 1.5rem; /* Adds top margin for spacing. */
}

/* Media query to adjust right content column width on large screens. */
@media (min-width: 992px) {
  .feature-content-right {
    width: 33.333333%; /* Sets default width to 1/3 on large screens. */
  }
}

/* Specific adjustment for the 2000+ Qbank content's width on large screens. */
.feature-row:nth-child(6) .feature-content-right {
  @media (min-width: 992px) {
    width: 41.666667%; /* Sets width to 5/12 on large screens for this specific row. */
  }
}

/* Applies top margin on small screens and a larger one on large screens. */
.top-margin-on-small {
  margin-top: 15px; /* Default top margin on smaller screens. */
}

/* Media query for larger top margin on large screens. */
@media (min-width: 992px) {
  .top-margin-on-small {
    margin-top: 50px; /* Applies a larger top margin on large screens. */
  }
}

/* Left Image Column. */
.feature-image-left {
  margin-right: 1.5rem; /* Adds right margin for spacing from content. */
}

/* Media queries to adjust left image column width based on specific rows on large screens. */
@media (min-width: 992px) {
  .feature-image-left {
    width: 58.333333%; /* Default width for left image (e.g., first row). */
  }
  .feature-row:nth-child(2) .feature-image-left,
  .feature-row:nth-child(3) .feature-image-left {
    width: 50%; /* Sets width to 1/2 for specific rows (e.g., Sponsorship, Mobile-Friendly). */
  }
  .feature-row:nth-child(4) .feature-image-left,
  .feature-row:nth-child(5) .feature-image-left {
    width: 66.666667%; /* Sets width to 2/3 for specific rows (e.g., 8 NCLEX Sections, Comprehensive Review). */
  }
  .feature-row:nth-child(6) .feature-image-left {
    width: 58.333333%; /* Sets width to 5/12 for the Qbank image. */
  }
}

/* Right Image Column. */
@media (min-width: 992px) {
  .feature-image-right {
    width: 58.333333%; /* Default width for right image. */
  }
  .feature-row:nth-child(3) .feature-image-right {
    width: 50%; /* Sets width to 1/2 for specific rows (e.g., Mobile-Friendly). */
  }
  .feature-row:nth-child(5) .feature-image-right {
    width: 66.666667%; /* Sets width to 2/3 for specific rows (e.g., Comprehensive Review). */
  }
}

/* General Feature Image Styling. */
.feature-image {
  max-width: 100%; /* Ensures image does not overflow its container. */
  height: auto; /* Maintains aspect ratio. */
  display: block; /* Removes extra space below the image, useful for block-level images. */
}

/*------------------------------------*\
  #TEXT STYLING
  * Styles for various text elements within the features section.
\*------------------------------------*/

/* General Feature Title Styling (for H2, H3, H1 where applicable). */
.feature-title {
  font-weight: bolder; /* Makes the title text extra bold. */
  margin-bottom: 1rem; /* Standard spacing below the title. */
  color: var(--primary-text-color); /* Sets title color to a primary text variable. */
  font-size: 2rem; /* Default font size for feature titles. */
}

/* Large Screen Feature Title: Hidden on small, shown on large. */
.feature-title-large {
  display: none; /* Hides on small screens. */
  font-weight: bolder; /* Makes text extra bold. */
  margin-bottom: 1rem; /* Standard spacing. */
  color: var(--primary-text-color); /* Sets text color. */
  font-size: 2rem; /* Larger font for desktop. */
  line-height: 1.2; /* Adjusts line height for multi-line titles. */
}

/* Media query to display large feature title on screens 992px and wider. */
@media (min-width: 992px) {
  .feature-title-large {
    display: block; /* Displays the title as a block element. */
  }
}

/* Small Screen Feature Title: Shown on small, hidden on large. */
.feature-title-small {
  display: block; /* Displays on small screens. */
  font-weight: bolder; /* Makes text extra bold. */
  margin-bottom: 1rem; /* Standard spacing. */
  color: var(--primary-text-color); /* Sets text color. */
  font-size: 1.5rem; /* Smaller font for mobile. */
}

/* Media query to hide small feature title on screens 992px and wider. */
@media (min-width: 992px) {
  .feature-title-small {
    display: none; /* Hides on large screens. */
  }
}

/* General Feature Description Styling for paragraphs. */
.feature-description {
  line-height: 1.5; /* Sets line height for readability. */
  margin-bottom: 1rem; /* Standard spacing after paragraphs. */
  color: var(--primary-text-color); /* Sets text color. */
}

/* Styling for description specifically containing price information. */
.feature-price-description {
  line-height: 1.5; /* Sets line height. */
  margin-bottom: 1rem; /* Standard spacing. */
  color: var(--primary-text-color); /* Sets text color. */
  margin-top: 2rem; /* Adds significant top margin. */
}

/* Highlights specific price text (e.g., "$99"). */
.price-highlight {
  font-weight: bolder; /* Makes the price text extra bold. */
  font-size: 80px; /* Sets a very large font size for the price. */
  line-height: 1; /* Adjusts line height to prevent text cutoff. */
  display: inline-block; /* Allows vertical-align to work and better control of line-height. */
  vertical-align: middle; /* Vertically aligns the price with surrounding text. */
}

/* Styling for individual benefit items, often accompanied by an icon. */
.feature-benefit-item {
  line-height: 1.5; /* Sets line height. */
  margin-bottom: 0.5rem; /* Closer spacing for list-like items. */
  color: var(--primary-text-color); /* Sets text color. */
  display: flex; /* Enables Flexbox for icon and text alignment. */
  align-items: flex-start; /* Aligns text to the top of the icon. */
  text-align: left; /* Ensures text alignment is left. */
}

/* Media query to remove centering margins for benefit items on desktop. */
@media (min-width: 992px) {
  .feature-benefit-item {
    margin-left: 0; /* Removes left margin. */
    margin-right: 0; /* Removes right margin. */
  }
}

/* Styling for the checkmark icon in benefit items. */
.benefit-icon {
  color: green; /* Sets the icon color to green. */
  margin-right: 8px; /* Adds spacing between icon and text. */
  font-size: 1.1em; /* Makes the icon slightly larger than the text. */
  flex-shrink: 0; /* Prevents the icon from shrinking. */
  margin-top: 0.2em; /* Small vertical adjustment for alignment. */
}

/* Styling for a short, impactful tagline. */
.feature-tagline {
  font-weight: bolder; /* Makes the tagline text extra bold. */
  font-size: 1.25rem; /* Sets a moderate font size. */
  margin-top: 1rem; /* Adds space above the tagline. */
  color: var(--primary-text-color); /* Sets text color. */
}

/*------------------------------------*\
  #LINKS AND BUTTONS
  * Styles for interactive elements like links and buttons.
\*------------------------------------*/

/* Link with no underline by default. */
.link-no-underline {
  text-decoration: none; /* Removes the underline from the link. */
  color: var(--primary-text-color); /* Sets link color to primary text color. */
  font-weight: bold; /* Makes the link text bold. */
}

/* Underline link on hover. */
.link-no-underline:hover {
  text-decoration: underline; /* Adds underline on hover. */
}

/* "More Info" Button Styling. */
.more-info-button {
  background-color: var(--bg); /* Sets background color, assuming a dark background. */
  color: var(--white); /* Sets text color to white. */
  text-decoration: none; /* Removes underline. */
  padding: 10px 20px; /* Adds internal padding. */
  margin-top: 10px; /* Adds top margin for spacing. */
  display: flex; /* Enables Flexbox for content alignment within the button. */
  justify-content: center; /* Centers content horizontally within the button. */
  align-items: center; /* Centers content vertically within the button. */
  width: 100%; /* Full width by default on smaller screens. */
  max-width: 250px; /* Limits the maximum width of the button. */
  border-radius: 5px; /* Applies slight border radius. */
  box-sizing: border-box; /* Includes padding in the button's total size. */
  font-weight: bold; /* Makes button text bold. */
}

/* Media query to adjust "More Info" button width and margin on large screens. */
@media (min-width: 992px) {
  .more-info-button {
    width: 50%; /* Sets width to 50% of its parent on large screens. */
    margin-top: 0; /* Removes top margin on large screens. */
    min-width: 180px; /* Ensures a minimum width for the button on desktop. */
  }
}

/* Hover effect for the "More Info" button. */
.more-info-button:hover {
  opacity: 0.9; /* Slightly reduces opacity on hover. */
  text-decoration: none; /* Ensures no underline on hover. */
}

/* Spacing for an icon placed after text. */
.icon-after-text {
  margin-left: 5px; /* Adds left margin to separate icon from text. */
}

/*------------------------------------*\
  #ACCESSIBILITY (AOS)
  * This section clarifies the purpose of AOS attributes.
\*------------------------------------*/

/*
  * The `data-aos` attributes are used by an external JavaScript library
  * called AOS (Animate On Scroll). These attributes themselves do not
  * require any specific CSS rules to be present here.
  *
  * To make AOS work, you would typically:
  * 1. Include the AOS CSS file in your HTML <head>.
  * 2. Include the AOS JavaScript file before your closing </body> tag.
  * 3. Initialize AOS in your JavaScript, often with `AOS.init();`.
  *
  * If you are not using the AOS library, these attributes can be safely removed
  * from your HTML.
*/