@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500&display=swap');

.main-left div:has(iframe) {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.main-left div:has(iframe) + p {
  margin-top: 2rem !important;
}

.paycheck-trends {
  position: relative;
  padding:0px 20px 0px 0px;
  font-family: 'Work Sans', sans-serif;
  overflow: hidden;
   background-color:#000;
 
}
.pad-right{
  padding:2rem 0;
}
.top-section{
  background-color:#000;
}
.image-left img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures full coverage without distortion */
  border-radius: 8px;
}

.image-right-top {
  max-height: 309px; /* adjust as needed */

}
.btm-logos{
  margin-left:-4rem;
}
@media (max-width: 1199.98px) { /* tablets and below */
  .btm-logos {
    margin-left: 0;
    justify-content: center !important;
    padding-left: 0.5rem; /* optional slight padding */
  }
}

@media (max-width: 575.98px) { /* mobile */
  .btm-logos {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem; /* add breathing space between logos */
  }
  .btm-logos img {
    max-width: 80px; /* optional — scale down logos on small screens */
    height: auto;
  }
}
@media (max-width: 1199.98px) and (min-width: 768px) {
  .col-md-7.pad-right {
    flex: 0 0 auto;       /* allow auto width */
    width: auto !important; /* let it shrink to content */
    margin-left: auto;
    margin-right: auto;
    align-items: center !important;
    text-align: center;
    padding-right: 0 !important;
  }

  .pad-right .btm-logos {
    justify-content: center !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}
/* Right section layout */
.paycheck-trends .col-md-6.d-flex {
  min-height: 100%;
}

/* Top image box */
.image-right-top {
  max-width: 100%;
  max-height: 309px; /* limit height */
  width: auto;
  margin-top: auto;
}

.image-right-top img {
  
  height: auto;
  object-fit: contain;
  display: block;
}

/* Logos */
.logos {
  gap: 1rem;
  margin-top: 1rem;
}

.logos img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

/* Optional: control fluid stretch on large screens */
@media (min-width: 992px) {
  .container-fluid {
    /*max-width: 1400px;*/
    margin: 0 auto;
  }
  /* .image-left {
    max-width: 100%;
  }
  .col-lg-5.image-column {
    width: 100% !important;
  }*/
}
@media (min-width: 879px) and (max-width: 990px) {
  .image-left img {
    width: 50%!important; /* adjust as needed (80–90% works well) */
    margin: 0 auto;
    display: block;
  }
}


@media (min-width: 991px) and (max-width: 1050px) {
  .image-left {
    display: flex;
    justify-content: center!important;
  }
  .col-lg-5 {
        
        width: 39%!important;
    }
  .image-right-top img{ max-height: 200px;}
  .logos img{max-height:40px;}
}
.mid-data-container{
 background-color:#00ECC2;
  background-size: cover;
  padding:20px;
}
.mid-data {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 20px 20px 20px 40px;
  font-family: 'Work Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  flex-direction: column;
}
.mid-data-date{
  font-family: 'Work Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
}
.mid-data::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;              /* space from top */
  bottom: 20px;           /* space from bottom */
  width: 2px;             /* thickness */
  background-color: #fff; /* line color */
  border-radius: 2px;     /* optional: softer edges */
}
@media (max-width: 767.98px) {
  .logos {
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* second section */
.paycheck-content {
  /*padding: 40px 0;*/
  font-family: 'Work Sans', sans-serif;
}



.main-left .block {
  margin-bottom: 40px;
  margin-top:20px;
  margin-left: 5px;
}
.main-left p{
  font-size: 20px;
}
.block-title {
  font-size: 40px;
  font-weight: 600!important;
  margin-bottom: 10px;
  font-family: 'Work Sans', sans-serif;
  text-transform: none!important;
}

.block-desc {
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
  padding:5px;
}

.chart-img {
  width: 100%;
  height: auto;
  background: #f0f2f5;
  border: 1px solid #ddd;
}

.source {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}



.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #0073aa;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
 
}
.chart-container {
  position: relative!important;
  width: 100%!important;
  height: 650px!important;
}

@media (max-width: 768px) {
  .chart-container {
    height: 400px; /* or smaller if needed */
  }
}
#chart-container1,
#chart-container2,
#chart-container3,
#chart-container4,
#chart-container5,
#chart-container6 {
  width: 100%;
  overflow-x: hidden; /* Avoid page-level horizontal scroll */
}

[id^="chart"] {
  max-width: 100% !important;
  height: auto; /* Let the height shrink responsively */
}



.section-divider {
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0; /* eliminate extra vertical whitespace */
}

.divider-line {
  display: block;
  width: 100%;
  height: 5px;
  margin: 0 auto;
  padding: 0;
}


@media (max-width: 768px) {
  
  .separator-line {
    width: 100%; /* Make separator full width on mobile */
  }
  .powered-by {
    justify-content: flex-start;
  }
}
.bottom-line-img_bt {
  position: absolute;
  top: 68px;   /* Move it above the section by 60px */
  left: 0;
  height: auto;
  z-index: 1;

}
.centered-image-section {
  background-color: #000;       
  position: relative;
  margin: 0 auto;                    /* Center the section horizontally */
  padding: 20px 0px;                /* Vertical and side padding */
  text-align: center;   
  height:300px;             /* Center image inside */
}
.centered-image-section-btm {
        
  position: relative;
  margin: 0 auto;                    /* Center the section horizontally */
  padding: 20px 0px;                /* Vertical and side padding */
  text-align: center;   
  height:300px;             /* Center image inside */
}
/* Section Title with Underline */
.library-title {
  font-weight: 600;
  font-size: 30px;
  color: #333;
  border-bottom: 3px solid #00ECC2; /* custom color underline */
  display: block;
  padding-bottom: 6px;
  text-transform: uppercase;
}

/* Card Image Placeholder */
.library-image {
  width: 100%;
  /*height: 200px;
  background-color: #d9d9d9; */
}

/* Text Styling */
.library-text {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  max-width: 250px;
  margin: 0 auto;
  font-family: 'Work Sans', sans-serif;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  /*.library-image {
    height: 180px;
  }*/
}

@media (max-width: 767px) {
  /*.library-image {
    height: 160px;
  }*/
  .library-text {
    font-size: 1.25rem;
  }
}

@media (max-width: 575px) {
  .library-text {
    max-width: 100%;
  }
}
.library-title sup {
  font-size: 0.5em; 
  vertical-align: super; 
}