/* Custom styles for SquadHub */

body {
  font-family: 'Inter', sans-serif; /* Apply Inter font globally */
}

.top-nav {
  background-color: #fff;
}


/* Apply consistent max-width and centering to nav-wrapper, hero-container, and future sections */
.nav-wrapper /*, .other-section, .another-section */ {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 25px;
  background-color: #fff;
}

/* Set the height of the navigation bar */
nav {
    height: 100px; /* Example height, adjust as needed */
    line-height: 100px; /* Match height to ensure vertical centering */
}

/* Style for the logo within the navbar */
.nav-wrapper .brand-logo img {
  height: 60px; /* Set the logo height */
  /*padding: 10px; /* Add padding around the logo */
  width: auto; /* Maintain the aspect ratio of the logo */
  vertical-align: middle; /* Ensure vertical alignment */
  margin-bottom: 5px; /* Fine-tune vertical positioning */
}

/* Ensure nav links are properly aligned */
.nav-wrapper ul {
  line-height: 100px; /* Match the nav height */
}

.nav-wrapper ul li {
  line-height: 100px; /* Match the nav height */
}

.nav-wrapper a {
  color: #000;
  line-height: 100px; /* Match the nav height */
}

/* Keep your existing responsive adjustments */
@media screen and (max-width: 992px) {
  .nav-wrapper .brand-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.hero-wrapper {
  background: linear-gradient(135deg, #3949ab 0%, #283593 100%);
}


/* Style for h1 in hero */
.hero-container h1 {
  text-align: center;
  padding-bottom: 15px;
  width: 95%; /* H1 will take up 95% of its parent container */
  margin-left: auto; /* Center h1 horizontally */
  margin-right: auto; /* Center h1 horizontally */
  color: #fff;
}

.hero-container p {
  color: #fff;
}

/* Style for the responsive image */
.hero-container img {
  margin-bottom: 20px; /* Adds margin to the bottom of the element */
}

/* Centering the CTA button inside the hero container */
.hero-container a.waves-effect {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

/* Responsive adjustments for smaller devices */
@media (max-width: 768px) {
  .hero-container h1 {
    font-size: 3.2rem; /* Adjust H1 font size for mobile devices */
  }

  /* Other responsive adjustments can be added here if necessary */
}

#bm {
  max-width: 1200px;
  margin: 40px auto 40px auto;
  background-color: #fff;
  border-radius: 12px; /* Adjust the value as needed */
}

#getStartedBtn {
    background-color: #fff; /* or any other color you prefer */
    color: #1a237e; /* indigo darken-4 color */
    font-size: 1.15rem; /* Flow text size for button text */
    font-weight: 400; /* Normal weight for better readability */
    line-height: 1.6; /* Improved line height for flow text */
}

/* Custom styles for the Overview section */
.overview-section {
  background-color: #fff; /* White background */
  padding: 50px 0; /* Top and bottom padding */
}


.overview-section .card {
  border-radius: 16px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Card shadow */
}

.overview-section .card-title {
  color: #333; /* Card title color */
  font-size: 1.2rem; /* Card title size */
  margin-bottom: 15px; /* Space below title */
}

.overview-section .card-content {
  padding-top: 24px; /* Padding inside card */
  padding-bottom: 24px; /* Padding inside card */
}

/* You may add media queries for responsive adjustments */
@media screen and (max-width: 992px) {
  .overview-section .card {
  margin-bottom: 20px; /* Space between cards when they stack */
  }
}

.overview-section .overview-icon {
  width: 48px; /* Example size, adjust as needed */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 24px; /* Space below the icon */
}

.squadhub-pro-row {
  padding-bottom: 40px;
}

/* Video section styling */

.video-wrapper {
  background-color: rgba(57, 73, 171, 0.1); /* Pale blue that complements the hero-wrapper gradient */
}

.standalone-video-container /*, .other-section, .another-section */ {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
  padding-bottom: 20px;
 /* background-color: rgba(57, 73, 171, 0.1); /* Pale blue that complements the hero-wrapper gradient */
}

.video-section {
  max-width: 1200px;
  margin: 40px auto; /* Center the video section and add top and bottom margin */
  position: relative; /* Ensures that the absolute positioning is relative to this container */
}

.video-container {
  position: relative;
  overflow: hidden; /* Ensures the rounded corners are respected */
  border-radius: 15px; /* Rounds the corners of the video container */
}

.responsive-video {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures the video covers the whole area */
  border-radius: 15px; /* Apply border-radius here if the video itself needs rounding */
}

.video-title,
.video-subtitle {
  position: absolute; /* Absolutely position the text over the video */
  left: 50%;
  transform: translateX(-50%); /* Center the text block */
  bottom: 10%; /* Position the text from the bottom of the video container */
  color: #fff; /* White color for text */
  z-index: 10; /* Ensure the text is above the video */
}

/* Adjust the bottom percentage value as necessary */
.video-title {
  bottom: 14%; /* Increase this percentage to move the title up and create more space */
  font-size: 2.5rem;
  margin-bottom: 1rem; /* Add margin to push the subtitle down */
}

.video-subtitle {
  bottom: 8%; /* Adjust this value if you need to move the subtitle up or down */
  font-size: 1.5rem;
}


/* Combined Section for Service Pros and PMC */
.combined-section {
  background-color: #fff; /* White background */
  padding: 70px 0; /* Consistent vertical padding */
}

.combined-section .content-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto; /* Center the content container */
  flex-wrap: wrap; /* Ensure the content wraps on smaller screens */
}

.combined-section .text-cards {
  flex: 1; /* Distribute space evenly */
  margin: 0 1rem; /* Space on the sides for breathing room */
}

.combined-section .card {
  border-radius: 16px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Card shadow */
  margin-bottom: 1rem; /* Space between cards */
  padding: 24px; /* Padding inside card */
  background: #fff; /* White background for the card */
}

.combined-section .section-title {
  color: #333; /* Section title color */
  font-size: 2rem; /* Section title size */
  margin-bottom: 2rem; /* Space below the section title */
}

.combined-section .feature-title {
  color: #333; /* Card title color */
  font-size: 1.5rem; /* Card title size */
  margin-bottom: 1rem; /* Space below title */
}

.combined-section .feature-description {
  color: #666; /* Description text color */
  font-size: 1rem; /* Description text size */
}

.combined-section .button-group {
  text-align: center; /* Center the buttons in the card */
  margin-top: 70px; /* Space above the button group */
}

/* Responsive adjustments */
@media screen and (max-width: 992px) {
  .combined-section .content-container {
    flex-direction: column;
    align-items: center;
  }

  .combined-section .text-cards {
    width: auto; /* Full width on smaller screens */
    margin-bottom: 2rem; /* Space between the Service Pros and PMC sections on smaller screens */
  }

  .combined-section .button-group {
    flex-direction: column;
    gap: 1rem; /* Space between buttons when they stack */
  }
}

@media screen and (max-width: 768px) {
  .combined-section {
    padding: 2rem 0; /* Smaller padding on very small screens */
  }

  .combined-section .card {
    padding: 1rem; /* Smaller padding inside card on very small screens */
  }
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #3949ab 0%, #283593 100%);
  padding: 50px 0; /* Adjust padding as needed */
}

.cta-section .container {
  display: flex;
  flex-direction: column; /* Stack children vertically by default */
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.cta-section .cta-content {
  display: flex;
  flex-direction: column; /* Stack children vertically by default */
  align-items: center; /* Center align items for mobile */
  gap: 2rem; /* Space between text and form */
}

.cta-section .cta-text {
  width: 100%;
  color: #fff;
}

.cta-section .cta-form {
  width: 100%;
  background: #f9f9f9; /* Light background for the form */
  padding: 2rem; /* Padding inside the form */
  border-radius: 8px; /* Rounded corners for the form */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Style for the submit button */
.cta-section button {
  background-color: #211c52; /* Custom button color */
  color: #fff;
  width: 100%; /* Full-width button for mobile */
}

/* Style for the icon inside the button */
.cta-section button i {
  margin-left: 0.5rem;
}

/* Responsive adjustments for larger screens */
@media (min-width: 992px) {
  .cta-section .container {
    flex-direction: row; /* Set back to row for larger screens */
    justify-content: space-between;
    padding: 2rem;
  }

  .cta-section .cta-content {
    flex-direction: row; /* Set back to row for larger screens */
    align-items: center; /* Align items to center vertically */
    text-align: left; /* Align text to the left for larger screens */
  }

  .cta-section .cta-text,
  .cta-section .cta-form {
    flex: 1; /* Both take equal space */
    max-width: 45%; /* Limit width to 45% */
  }

  .cta-section button {
    width: auto; /* Auto width for button */
  }
}

.invalid {
  /* Add your desired styles for invalid form fields */
  border-color: red;
}


/*end CTA section*/

/* Footer Styles */
.site-footer {
  background-color: #1a1a1a; /* Dark background color */
  color: #fff; /* White text color */
  padding: 2rem 0; /* Padding at the top and bottom */
}

.footer-container {
  display: flex;
  flex-wrap: wrap; /* Ensures the footer content stacks on smaller screens */
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem; /* Padding on the sides */
}

.footer-container > div {
  /* Set a minimum width for flex items to wrap properly */
  min-width: 300px;
  flex: 1;
  padding: 1rem; /* Space inside each footer item */
  margin-bottom: 2rem; /* Space between footer items when they stack */
}

/* Footer items heading styles */
.site-footer h4 {
  margin-bottom: 1rem; /* Space below the title */
}


/*.social-icons visible {
  display: flex;
  justify-content: flex-start; /* Align icons to the start */
  /*gap: 0.5rem; /* Space between icons */
/*}*/


/* Social icons hidden */
.social-icons {
  visibility: hidden;
}

.social-link {
  color: #fff; /* Icon color */
  font-size: 1.5rem; /* Icon size */
}

.social-link:hover {
  color: #007bff; /* Icon hover color */
}

/* Footer navigation styles */
.footer-navigation ul {
  list-style: none; /* Removes default list styling */
  margin: 0; /* Resets default margin */
}

.footer-navigation li {
  margin-bottom: 0.5rem; /* Space between list items */
}

/* Footer subscription form */
.footer-subscribe form {
  display: flex;
  gap: 0.5rem; /* Space between the input and button */
  flex-wrap: wrap; /* Allows form items to wrap */
}

.footer-subscribe input,
.footer-subscribe button {
  flex-grow: 1;
  margin-bottom: 0.5rem; /* Space below the input/button when wrapped */
}

.footer-subscribe button {
  background-color: #007bff; /* Button background color */
  border: none;
  cursor: pointer;
}

#signupForm input[type="email"] {
  background-color: #f9f9f9;
  color: #000;
  padding-left: 10px;
  border-radius: 4px; /* Adjust this value to change the radius of the corners */
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Footer legal section */
.footer-legal {
  background-color: #101010; /* Slightly darker background for legal section */
  color: #666;               /* Lighter text color */
  text-align: center;
  padding: 1rem 0;          /* Padding at the top and bottom */
  margin-top: 2rem;         /* Adds space between the main footer and the legal section */
}

/* Footer legal links */
.footer-legal a {
  color: #666;               /* Match the text color */
  text-decoration: none;     /* Remove underline */
}

.footer-legal a:hover {
  text-decoration: underline; /* Optional hover effect */
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .footer-container {
    justify-content: center;
  }

  .footer-container > div,
  .social-icons {
    width: 100%; /* Full width for smaller screens */
    justify-content: center; /* Center align the content for smaller screens */
    text-align: center;
  }

  .footer-subscribe form {
    flex-direction: column;
  }

  .footer-subscribe button {
    width: auto; /* Button width is determined by content size */
  }
}

/* Footer Navigation List Items Color */
.footer-navigation a {
  color: #fff; /* White color for links */
}
/*end footer styles*/

/* PMC Section */
.PMC {
  background-image: url('../img/multifamily-4k.jpg'); /* Replace with the correct file path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*height: 100vh; /* Full viewport height might need adjustment on mobile */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  text-align: center;
}

/* PMC Section */
.PMC .content-container {
  max-width: 1200px;
  width: 100%;
  padding: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.PMC .feature {
  background: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.pmc-hero-button {
  padding-bottom: 30px;
  padding-top: 30px;
}

/* Responsive adjustments for smaller devices */
@media (max-width: 768px) {
  .PMC {
    height: auto; /* Adjust height for mobile devices */
    padding: 60px 0; /* Add top and bottom padding to avoid overlap */
  }

  .PMC .feature {
    padding: 1rem; /* Adjust padding inside the feature card for smaller screens */
  }

  .pmc-hero-button {
    padding-bottom: 20px; /* Adjust button spacing */
    padding-top: 20px;
  }

  .PMC h1 {
    font-size: 3.2rem; /* Adjust H1 font size for mobile devices */
  }
}




/* Removed redundant and overridden rules */


/* How it works styles */
.hiw-hero-wrapper {
  background: linear-gradient(135deg, #3949ab 0%, #283593 100%);
}

.hiw-hero-container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 15px 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.hiw-hero-text {
  flex-basis: 50%; /* Each takes up 50% width */
  max-width: 50%; /* Limiting max width to 50% for two columns */
  display: flex; /* Enables flexbox for vertical centering */
  flex-direction: column; /* Stack children vertically */
  justify-content: center; /* Center content vertically */
  text-align: center; /* Center text horizontally */
  padding-right: 20px; /* Add padding to the right side */
  color: white;
}

.hiw-hero-video {
  flex-basis: 50%;
  display: flex;
  justify-content: center; /* Center video horizontally */
  align-items: center; /* Align video vertically */
  padding-left: 20px; /* Add padding to the left side */
}

.hiw-hero-video .responsive-video {
  width: 100%; /* Video takes the full width of its container */
  max-width: 100%; /* Limits the video size to not exceed the container */
  height: auto; /* Maintain aspect ratio */
}

/* Responsive adjustments for smaller devices */
@media (max-width: 768px) {
  .hiw-hero-text,
  .hiw-hero-video {
    flex-basis: 100%; /* Each takes full width on small screens */
    max-width: 100%; /* Full width for small screens */
    padding-right: 0; /* Remove right padding on mobile */
    padding-left: 0; /* Remove left padding on mobile */
  }

  .hiw-hero-container {
    flex-direction: column;        /* Stack children vertically */
    align-items: center;          /* Center them horizontally */
  }
}


/* How cards */
.how-wrapper {
  background-color: rgba(57, 73, 171, 0.1); /* Full width background color - pale blue */
  padding: 2rem 0; /* Padding for the section */
}

.how-wrapper .container {
  /*background-color: rgb(255, 246, 234); /* Full width background color */
  max-width: 1200px; /* Max width as specified */
  margin: 0 auto; /* Center the container */
}

.how-cards {
  display: flex;
  overflow-x: auto; /* Allows horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
  gap: 1rem; /* Space between cards */
  padding: 0 1rem; /* Padding on the sides for aesthetics */
}

.how-cards .card-panel {
  max-width: 400px; /* Maximum width for each card */
  flex: 0 0 auto; /* Do not grow or shrink the card, but allow it to be flex basis auto */
  background: #f9f9f9; /* Light background for the card */
  padding: 2rem; /* Padding inside card */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  /* Add other styles as needed */
}

/* Custom list with indigo bullets */
.how-cards li {
  list-style: none; /* Remove default list-style */
  position: relative; /* Position relative to allow absolute positioning of pseudo-elements */
  padding-left: 1.5em; /* Make space for the custom bullet */
}

.how-cards li::before {
  content: ''; /* Necessary for the pseudo-element to display */
  position: absolute; /* Absolute position the bullet to the left of the content */
  top: 0.9em; /* Adjust vertical position to align with the text */
  left: 0; /* Align with the left edge of the list item */
  height: 0.5em; /* Bullet size */
  width: 0.5em; /* Bullet size */
  background-color: #1a237e; /* Indigo darken-4 color */
  border-radius: 50%; /* Make it round */
}

.how-button-group {
  padding: 60px 0px 25px 0px;
}

.how-wrapper h2 {
  margin-bottom: 2rem; /* Space below the section title */
}

/* Style adjustments for mobile responsiveness */
@media (max-width: 992px) {
  .how-cards .card-panel {
    max-width: 100%; /* Make cards take full width on smaller screens */
    min-width: 300px; /* Minimum width for each card to maintain readability */
  }
  .how-button-group {
    padding: 20px 0px 25px 0px;
  }

}

@media (max-width: 768px) {
  /* Show pagination dots only on mobile */
  .pagination-dots {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  .dot {
    width: 8px;
    height: 8px;
    background-color: #bbb;
    border-radius: 50%;
    margin: 0 0.25rem;
  }

  .dot.active {
    background-color: #1a237e;
  }
}




/* FAQ Styles */
.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 35px 0 65px 0;
}

.faq-container h2 {
  text-align: center;
}

.faq-container p {
  text-align: center;
  margin-bottom: 2rem;
}

.collapsible {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow like the cards */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Ensures inner elements adhere to border radius */
}

.collapsible-header {
  display: flex;
  justify-content: space-between; /* Aligns items to the start and end of the container */
  padding: 1em; /* Same padding as cards */
  font-weight: bold;
  cursor: pointer;
  background: #f9f9f9; /* Light background like the cards */
  color: #333;
  border-bottom: 1px solid #ccc; /* A line to separate items */
}

.collapsible-body {
  padding: 20px;
  background: #fff; /* White background for the answer body */
  color: #666;
  border-bottom: 1px solid #ccc; /* Consistent with header */
}

.material-icons {
  float: right; /* Ensures icon is on the right */
}



/* Pros Hero Section Styles */
.pros-hero-wrapper {
  background: linear-gradient(135deg, #3949ab 0%, #283593 100%);
}

.pros-hero-container {
  max-width: 1200px;
  margin: 0 auto; /* Centers the container */
}

.pros-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* Vertically centers the flex items */
  justify-content: space-between; /* Places space between the text and image */
  padding-top: 30px;
  padding-bottom: 40px;
}

.pros-hero-text {
  flex: 1; /* Allows text to grow and shrink as needed */
  text-align: center;
  color: white;
}

.pros-hero-image {
  flex-shrink: 0; /* Prevents the image container from shrinking */
  margin-bottom: 20px;
}

.pros-hero-image img {
  width: 100%; /* Makes the image responsive */
  height: auto; /* Maintains aspect ratio */
  max-width: 600px; /* Maximum size of the image */
}

.pros-hero-wrapper .pros-hero-button {
    margin-top: 20px; /* Adds space above the button */
  margin-bottom: 20px; /* Adds space below the button */
}


/* Responsive adjustments */
@media (max-width: 992px) {
  .pros-hero-content {
    flex-direction: column;
    text-align: center;
  }
}


@media (max-width: 992px) {
  .pros-hero-text {
    margin-right: 0; /* Removes the margin on smaller screens */
    margin-bottom: 2rem; /* Adds space below the text container on smaller screens */
  }

  .pros-hero-image {
    width: 80%; /* Adjust image width on smaller screens */
    margin-left: auto; /* Center the image */
    margin-right: auto; /* Center the image */
  }
}



/*pale blue banner section*/
.banner-wrapper {
  background-color: rgba(57, 73, 171, 0.1); /* Pale blue that complements the hero-wrapper gradient */
  margin: 0; /*add some space aboue and below the banner between sections. In the case, the top margin was set to 0 to avoid white sppace between the tan hero background*/
  padding: 40px 0; /* Adds some padding above and below the text */
  text-align: center; /* Centers the text horizontally */
}

.banner-container {
  margin: 0 auto; /* Centers the container */
  max-width: 1200px; /* Sets the max width */
  padding: 25px 0px; /* Adds padding to ensure content doesn't touch the sides */
}

.banner-container h2 {
  color: #3949ab; /* Sets the text color to match the hero-wrapper background color */
  margin: 0; /* Removes default margin */
  padding: 0; /* Ensures no extra space around the H2 */
  line-height: 1.2; /* Adjust line height for better readability */
}


/*Pros Detail Section*/

.text-center {
  text-align: center;
}

/* Continue with the rest of your .pros-detail styles */

.pros-detail {
  width: 100vw; /* Ensures the wrapper is the full width of the viewport */
  margin-bottom: 40px; /* Adds space below the section */
  /* Other styles remain unchanged */
}


.container {
  max-width: 1200px; /* Sets the container width */
  margin: 0 auto; /* Centers the container */
  padding-top: 20px; /* Provides padding within the container */
}

.pros-detail-content {
  /* Remove text-align: center; if it is not needed for other elements */
  margin: auto;
  max-width: 80%;
}

.pros-detail .custom-bullet-list {
  list-style-type: none; /* Ensures no default list style */
  padding: 0; /* Removes padding to allow for centering */
  margin: 0 auto; /* Centers the list */
  display: table; /* Centers the list without specifying a width */
}

.pros-detail .custom-bullet-list li {
  position: relative;
  display: block; /* Ensures full width for custom bullet positioning */
  padding-left: 1.5em; /* Adjust as needed for space for the bullet */
  text-align: left; /* Aligns text to the left */
  margin-bottom: 0.5em; /* Adjust as needed for space between list items */
  font-size: 1.3rem; /* Adjust the value to match the .flow-text size or to your preference */
  /* Other styles remain unchanged */
}

.pros-detail .custom-bullet-list li::before {
  content: ''; /* Necessary for the pseudo-element */
  position: absolute;
  left: 0; /* Position the bullet within the padding area */
  width: 10px; /* Size of the bullet */
  height: 10px; /* Size of the bullet */
  background-color: #007bff; /* Color of the bullet */
  border-radius: 50%; /* Makes the bullet round */
  margin-left: -5px; /* Adjust if necessary to align with the start of the text */
  top: 0; /* Align with the top of the li element */
  transform: translateY(0.5em); /* Adjust as needed to align with the first line of text */
}


/* SquadHub cards section */
.squadhub-pro {
  background-color: #fff; /* Background color for the whole section */
}

.squadhub-pro .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
  width: auto;
  padding: 15px;
}

.squadhub-pro .card-panel {
  flex: 0 1 calc(50% - 20px); /* flex-grow, flex-shrink, flex-basis */
  background-color: #123456; /* Dark background color for cards */
  color: #ffffff; /* Light text color for readability */
  border-radius: 10px; /* Rounded corners for the card */
  overflow: hidden; /* Clips the children to the card's border radius */
  padding: 0 !important; /* Override Materialize padding and remove it */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* This will push the image to the bottom */
}

/* Make card content grow to use available space and control the alignment */
.squadhub-pro .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.squadhub-pro .card-content .card-title {
  margin: 15px 15px 15px 15px; /* Consistent margin around the title */

}

.squadhub-pro .card-content .flow-text {
  margin: 0 15px 15px; /* Increased bottom margin for spacing under <p> */
}

.squadhub-pro .card-content .card-img {
  width: 100%; /* Image takes the full width of the container */
  height: auto; /* Height is set automatically to maintain aspect ratio */
  align-self: flex-end; /* Aligns the image at the end of the flex container */
  margin-top: auto; /* Pushes the image to the bottom */
  border-bottom-left-radius: 10px; /* Match the border-radius of the card-panel */
  border-bottom-right-radius: 10px;
}

/* Media queries to handle stacking on smaller screens */
@media (max-width: 768px) {
  .squadhub-pro .card-panel {
    flex-basis: 100%; /* Cards take full width on small screens */
  }

  .squadhub-pro .card-content {
    padding: 15px; /* Maintain padding on small screens */
  }
}


/* Specific styles for the second row of cards */
.squadhub-pro-row .container.four-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
  width: auto;
  padding: 15px;
}

.squadhub-pro-row .card-panel.four-cards {
  flex: 1 0 calc(25% - 20px); /* Adjust the basis for four cards per row */
  /*margin: 10px;*/
  background-color: #3949ab;
  color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
  text-align: left; /* Ensure text is left-aligned */
}

.squadhub-pro-row .card-panel.four-cards .fa-solid {
  width: auto; /* Allows the icon to scale based on its aspect ratio, though this might not be necessary for Font Awesome icons */
  max-width: 80px; /* Limits the size of the icon */
  margin-top: 15px; /* Adds space above the icon */
  margin-bottom: 15px;
  align-self: flex-start; /* Aligns the icon to the left of the flex container */
  padding: 5px 0 0 15px; /* Adds padding to the top and left of the icon */
  font-size: 3rem; /* Example to control the size of the icon, adjust as needed */
}

.squadhub-pro-row .card-panel.four-cards .text-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text to the left */
}

.squadhub-pro-row .card-panel.four-cards h4 {
  font-size: 1.5rem; /* Adjust the font size as needed */
  margin: 0; /* Remove margin for the title */
  white-space: normal; /* Allow text to wrap */
}


/* For mobile devices */
@media (max-width: 768px) {
  .squadhub-pro-row .card-panel.four-cards {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* For tablets and small desktops - two cards per row */
@media (min-width: 769px) and (max-width: 991px) {
  .squadhub-pro-row .card-panel.four-cards {
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* For larger desktops - four cards per row */
@media (min-width: 992px) {
  .squadhub-pro-row .card-panel.four-cards {
    flex-basis: calc(25% - 20px);
    max-width: calc(25% - 20px);
  }
}


/* About page and carousel */

.about-hero-text {
  flex: 1; /* Allows text to grow and shrink as needed */
  text-align: center;
  padding-bottom: 20px;
  color: #fff; 
}

.about-standalone-video-wrapper {
  background-color: rgba(57, 73, 171, 0.1); /* Pale blue that complements the hero-wrapper gradient */
  padding: 25px 0 20px 0;
}

.about-standalone-video-container /*, .other-section, .another-section */ {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 20px;
  /*background-color: rgba(57, 73, 171, 0.1); /* Pale blue that complements the hero-wrapper gradient */
}

.carousel-container {
  position: relative;
  width: 90%; /* Responsive width */
  max-width: 1200px; /* Limit maximum width */
  margin: 0 auto; /* Center the carousel */
  overflow: hidden; /* Ensure child elements are clipped */
  border-radius: 15px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
  /*padding: 50px 0 90px; /* Top: 10px, Bottom: 30px */
  background-color: #f9f9f9; /* Optional background color */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.carousel-item {
  min-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 15px; /* Add the same border-radius here */
}


.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.carousel-button-prev {
  left: 10px;
}

.carousel-button-next {
  right: 10px;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
}

.indicator.active {
  background-color: white;
}

/*Contact page styles */

.contact-hero-wrapper {
  background-color: rgba(57, 73, 171, 0.1); /* Pale blue that complements the hero-wrapper gradient */
  padding: 25px 0 20px 0;
}

/* .contact-hero-text: half-width on desktop */
.contact-hero-text {
  flex-basis: 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-right: 20px;
  color: #3949ab;
}

/* For smaller screens, stack the text full-width */
@media (max-width: 768px) {
  
  .contact-hero-text {
    flex-basis: 100%;             /* Full width on mobile */
    max-width: 100%;              /* Remove the 50% constraint */
    padding-right: 0;             /* No extra padding on the right */
    margin-bottom: 20px;          /* Some spacing below if there’s more content */
  }

  .contact-hero-text h1 {
    font-size: 2rem;              /* Adjust heading size on mobile */
    margin-bottom: 0.75rem;       /* Space below heading */
  }

  .contact-hero-text .flow-text {
    font-size: 1rem;              /* Adjust paragraph size */
    line-height: 1.4;             /* Improve readability */
  }
}

/* Continue with other specific styles for .card-content, .card-title, .flow-text, etc. */



/* Add other styles as needed */



/* Responsive adjustments for the icons */
@media screen and (max-width: 992px) {
  .overview-section .overview-icon {
      width: 36px; /* Smaller size on mobile */
  }
}


/* Responsive */
.responsive-img {
  max-width: 100%;
  height: auto;
}