/*------------------------------------*\
 * #IMPORTS
 * Import external stylesheets here.
\*------------------------------------*/
@import url(/css/all.css);

/*------------------------------------*\
 * #BASE STYLES & UTILITIES
 * General, non-layout specific styles.
\*------------------------------------*/
/* Custom input base styles */
.custom-input {
  background-color: #e0e0e0; /* light grey */
  height: 40px; /* reduced height */
  border: none;
  border-radius: 0; /* !important handled by direct application */
  padding: 5px 10px;
  color: #000; /* ensure text is visible */
  width: 100%; /* Ensure inputs take full width */
  box-sizing: border-box;
  display: block;
}

.custom-input:focus,
.custom-input-phone:focus {
  background-color: #e0e0e0; /* !important handled by direct application */
  outline: none;
  box-shadow: none;
}

/* General form text styling */
.form-text {
  color: var(--bg_sec);
  font-weight: lighter;
  font-size: 15px;
}

/* Login link styling (if used within the form) */
.log-in {
  color: black;
}

.log-in:hover {
  color: #000;
  text-decoration: none;
}

/*------------------------------------*\
 * #OFFICE LOCATIONS SECTION
 * Styles for the office locations display.
\*------------------------------------*/
.office-locations-container {
  margin-top: 50px;
  width: 100%;
  max-width: 1140px; /* Equivalent to Bootstrap's default .container max-width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px; /* Add some default horizontal padding */
  padding-right: 15px; /* Add some default horizontal padding */
  box-sizing: border-box; /* Include padding in element's total width */
}

.office-locations-row {
  display: flex;
  flex-wrap: wrap; /* Allows columns to wrap to the next line on smaller screens */
  margin-left: -15px; /* Counteracts column padding */
  margin-right: -15px; /* Counteracts column padding */
}

.office-card-column {
  flex: 0 0 100%; /* Default to full width on small screens (col-12) */
  max-width: 100%;
  padding-left: 15px; /* Gutter effect */
  padding-right: 15px; /* Gutter effect */
  margin-bottom: 1rem; /* Equivalent to Bootstrap's mb-4 (16px) */
  box-sizing: border-box;
}

.office-card {
  display: flex; /* h-100 to make content take full height */
  flex-direction: column;
  height: 100%; /* h-100 */
  border: 1px solid rgba(0, 0, 0, 0.125); /* Default card border */
  border-radius: 0.25rem; /* Standard border-radius for cards */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* shadow-sm */
}

.office-card-body {
  flex: 1 1 auto; /* Allows content to grow and shrink, filling available space */
  padding: 1.25rem; /* Standard card-body padding */
}

.office-card-title {
  margin-bottom: 0.75rem; /* card-title spacing */
  font-size: 1.25rem; /* h5 equivalent font size */
  font-weight: 500; /* Standard heading font weight */
}

.office-address,
.office-phone {
  margin-bottom: 1rem; /* mb-2 and mb-0 with default p margin */
  line-height: 1.5; /* Standard line height for text */
}

.office-phone {
  margin-bottom: 0; /* Ensures no extra margin at the bottom for the last paragraph */
}

.office-phone-link {
  text-decoration: none;
}

/* Specific Office Card Colors */
.nigerian-office-card {
  background-color: var(--bg);
}

.nigerian-office-card .office-card-title,
.nigerian-office-card .office-address,
.nigerian-office-card .office-phone,
.nigerian-office-card .office-phone-link {
  color: white; /* text-white */
}

.us-office-card {
  background-color: var(--bg_sec);
}

.us-office-card .office-card-title,
.us-office-card .office-address {
  color: black; /* Default text color as there was no text-white for US card */
}

/*------------------------------------*\
 * #CONTACT SECTION
 * Styles for the contact form and information.
\*------------------------------------*/
.contact-section {
  width: 100%;
  max-width: 1140px; /* Equivalent to Bootstrap's default .container max-width */
  margin-left: auto;
  margin-right: auto;
  padding-top: 25px; /* Half of my-5 + py-lg-5 */
  padding-bottom: 25px; /* Half of my-5 + py-lg-5 */
  margin-top: 80px; /* Base margin-top */
  margin-bottom: 80px; /* Base margin-bottom */
  box-sizing: border-box;
  padding-left: 15px; /* Default padding for container */
  padding-right: 15px; /* Default padding for container */
}

.contact-form-wrapper {
  display: flex;
  flex-direction: column; /* Default to column for small screens */
  width: 100%;
  border-radius: 5px;
  border-bottom-left-radius: 100px; /* !important handled by direct application */
  background-color: transparent; /* form-box property */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* contact-form property */
  height: fit-content; /* form-box property */
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  width: 100%; /* Default for small screens */
  background-color: var(--bg); /* contact-container background */
  height: fit-content; /* Base height for mobile, adjust as needed */
  box-sizing: border-box;
  padding: 15px; /* Default padding */
  justify-content: center; /* Equivalent to my-auto for vertical centering if height fixed */
  align-items: center; /* For horizontal centering of content if narrow */
  text-align: center; /* For text centering */
}

.contact-message-large {
  display: none; /* Hidden by default */
  text-align: center;
  margin-bottom: 20px; /* login-message margin */
  padding: 15px;
  /* border-radius: 8px; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  color: var(--white); /* For h1 and p */
  flex-grow: 1; /* my-auto */
  flex-direction: column;
  justify-content: center; /* Centering content vertically within its space */
  align-items: center; /* Centering content horizontally within its space */
}

.contact-message-large h1 {
  font-weight: bolder; /* font-weight-bolder */
  color: var(--white); /* text-white */
  margin: 0; /* login-message h2 margin */
  font-size: 2.5rem; /* Equivalent to h1 */
}

.contact-message-large p {
  color: var(--white); /* text-white and login-message p color */
  margin: 5px 0 0; /* login-message p margin */
  line-height: 1.5; /* paragraph */
}

.contact-logo {
  width: 25%; /* col-3 */
  max-width: 100px; /* Adjust max width as needed */
  height: auto;
  padding-top: 15px; /* py-3 */
  padding-bottom: 15px; /* py-3 */
  margin-top: 10px; /* my-2 */
  margin-bottom: 10px; /* my-2 */
}

.contact-message-small {
  display: block; /* Shown by default */
  font-weight: bolder;
  color: var(--white);
  text-align: center;
  margin-top: 15px; /* mt-3 */
  font-size: 1.25rem; /* Equivalent to h5, often used for sign-in on small screens */
}

.contact-form-panel {
  width: 100%; /* Default for small screens */
  background-color: white; /* my-acc background */
  height: 600px; /* Base height for mobile, adjust as needed */
  box-sizing: border-box;
  padding: 15px; /* Default padding for form content */
  margin-top: 15px; /* mt-3 */
  flex-grow: 1; /* my-auto */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centering content if height fixed */
}

.contact-form-content {
  color: lightgray; /* Applied directly to form */
  margin-top: 25px; /* mt-5 */
  padding-left: 15px; /* Default padding for form fields */
  padding-right: 15px; /* Default padding for form fields */
}

.form-group {
  margin-bottom: 1rem; /* Standard form group spacing */
}

.form-group label {
  color: black; /* text-dark */
  font-weight: bold; /* font-weight-bold */
  display: block; /* Ensures label is on its own line */
  margin-bottom: 0.5rem; /* Standard label spacing */
}

.phone-input-group {
  display: flex; /* d-flex */
  align-items: center;
}

.phone-input-group .country-code-select {
  width: 25%; /* col-lg-3 */
  margin-bottom: 0; /* Override mb-2 */
  border-radius: 0; /* From inline style */
}

.phone-input-group .custom-input-phone {
  width: 75%; /* col-lg-9 */
  margin-bottom: 0; /* Override mb-2 */
  border-radius: 0; /* From inline style */
  background-color: #e0e0e0; /* light grey */
  height: 40px; /* reduced height */
  border: none;
  border-radius: 0; /* !important handled by direct application */
  padding: 5px 10px;
  color: #000; /* ensure text is visible */
}

.submit-button-wrapper {
  display: flex; /* d-flex */
  justify-content: center; /* justify-content-center */
  margin-top: 1.5rem; /* Add some space above the button */
}

/*------------------------------------*\
 * #MEDIA QUERIES
 * Responsive adjustments for various screen sizes.
\*------------------------------------*/

/* Medium screens and up (md breakpoint - 768px) */
@media (min-width: 768px) {
  /* Equivalent to Bootstrap's md breakpoint */
  .office-card-column {
    flex: 0 0 50%; /* Take up half width */
    max-width: 50%;
  }
}

/* Small screens and up (sm breakpoint - 576px) */
@media (min-width: 576px) {
  .contact-form-wrapper {
    width: 100%;
  }
  .contact-info-panel {
    width: 50%; /* On small and medium, take 50% width */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
  }
  .contact-form-panel {
    width: 100%;
  }
}

/* Large screens and up (lg breakpoint - 992px) */
@media (min-width: 992px) {
  .contact-section {
    padding-top: 50px; /* py-lg-5 */
    padding-bottom: 50px; /* py-lg-5 */
    margin-top: 80px; /* my-5 */
    margin-bottom: 80px; /* my-5 */
  }
  .contact-form-wrapper {
    flex-direction: row; /* flex-lg-row */
    width: 83.333333%; /* 10/12 of 100% */
    margin-left: auto; /* justify-content-center for the inner row */
    margin-right: auto; /* justify-content-center for the inner row */
    padding-top: 0; /* py-lg-0 */
    padding-bottom: 0; /* py-lg-0 */
  }
  .contact-info-panel {
    width: 50%; /* col-lg-6 */
    height: 700px; /* contact-container height */
    padding-top: 50px; /* py-lg-5 */
    padding-bottom: 50px; /* py-lg-5 */
    justify-content: center; /* my-lg-auto for vertical alignment */
    align-items: center;
    margin-left: 0; /* Override mx-auto */
    margin-right: 0; /* Override mx-auto */
  }
  .contact-message-large {
    display: flex; /* Show on large screens */
  }
  .contact-message-small {
    display: none; /* Hidden on large screens */
  }
  .contact-form-panel {
    width: 50%; /* col-lg-6 */
    padding-top: 40px; /* py-lg-4 */
    padding-bottom: 40px; /* py-lg-4 */
    height: 700px; /* Match height of contact-info-panel */
    margin-top: 0; /* Remove mt-3 when on large screens */
    justify-content: center; /* my-auto */
  }
}

/* Max-width media queries (for smaller screens) */
@media (max-width: 991px) {
  /* For screens smaller than large */
  .phone-input-group {
    flex-direction: row; /* Stack them on smaller screens */
    gap: 0; /* Remove gap when stacked */
  }
  .phone-input-group .country-code-select,
  .phone-input-group .custom-input-phone {
    width: 100%; /* Make them full width on smaller screens */
  }
}

@media (max-width: 767.98px) {
  /* Changed from 768px to ensure it applies before md breakpoint */
  .contact-form-wrapper {
    border-radius: 0;
    border-bottom-left-radius: 0; /* Re-applied from !important */
  }
}