/* ==================== */
/*  HOME PAGE OVERRIDES */
/* ==================== */

.home-intro-container 
{
  display: flex; /* Switch to "flexible layout manager" mode. */
  flex-direction: row; /* Container elements will be kept in a row. */
  width: 100%; /* Take up all width space of parent. */  
}

.home-intro-left-column 
{  
  flex: 1; /* Take up as much, and equal, amount of space as possible. */
  background-color: var(--color-light-gray);
  padding: var(--default-element-spacing);  
}

.home-intro-right-column 
{
  flex: 1; /* Take up as much, and equal, amount of space as possible. */
  padding: var(--default-element-spacing);
}

.home-contact-form label 
{  
  font-family: var(--font-base);
  font-size: var(--font-size-paragraph);
  color: var(--font-color);  
  display: block; /* Each label will use entire "line"/width as its own line. */
  margin-bottom: var(--space-s);
}

.home-contact-form input 
{  
  font-family: var(--font-base);
  font-size: var(--font-size-paragraph); 
  color: var(--font-color);  
  display: block; /* Each input area will use entire "line"/width as its own line. */
  width: 100%; /* Take up all width space of parent. */  
}

.home-contact-form textarea 
{  
  font-family: var(--font-base);
  font-size: var(--font-size-paragraph);
  color: var(--font-color);  
  display: block; /* The text area will use entire "line"/width as its own line. */
  width: 100%; /* Take up all width space of parent. */
  resize: none; /* Not allowed to resize. */  
  height: 5rem; /* Fixed, readable height. */
  overflow-y: auto; /* Vertical scroll when content overflows. */
  overflow-x: hidden; /* Horizontal scroll hidden/disabled. */  
}

.home-elfsight-google-reviews-widget
{
  padding-bottom: var(--default-element-spacing);
}

.home-tutoring-benefits-text 
{
  padding: var(--default-element-spacing);
}

/* ================================ */
/*  SMALL-SCREEN / MOBILE OVERRIDES */
/* ================================ */
/* Everything below adjusts this page's layout for small screens (phones).
   Desktop styling above remains the default; these rules only apply when triggered. */

@media (max-width: 767px) /* One px below the 768px iPad Mini / tablet standard — phones get mobile, tablets & up keep desktop. */
{
  .home-intro-container
  {
    flex-direction: column; /* On small screens, switch to stack the two "intro" columns vertically. */
  }
}