/* Logo Container and Size Overrides - Add this CSS file after your main stylesheet */

/* Increase the width of the logo container div (more reasonable) */
.cs_main_header_left {
    width: 280px !important;
    min-width: 280px !important;
    flex: 0 0 280px !important;
}

/* Make the logo itself slightly larger (not too much) */
.cs_main_header_left .cs_site_branding img {
    transform: scale(0.8) !important;
    transform-origin: center !important;
}

/* Responsive container widths (smaller, more reasonable) */
@media (min-width: 1601px) {
  .cs_main_header_left {
    width: 320px !important;
    min-width: 320px !important;
    flex: 0 0 320px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: scale(0.5) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1600px) {
  .cs_main_header_left {
    width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: scale(0.5) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .cs_main_header_left {
    width: 260px !important;
    min-width: 260px !important;
    flex: 0 0 260px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: scale(0.5) !important;
    /* max-height: 60px !important; */
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cs_main_header_left {
    width: 230px !important;
    min-width: 230px !important;
    flex: 0 0 230px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: scale(0.5) !important;
    /* max-height: 55px !important; */
  }
}

/* For smaller screens, use natural size with height constraints instead of scaling */
@media (min-width: 576px) and (max-width: 767px) {
  .cs_main_header_left {
    width: 200px !important;
    min-width: 200px !important;
    flex: 0 0 200px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: none !important;
    height: 50px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 575px) {
  .cs_main_header_left {
    width: 180px !important;
    min-width: 180px !important;
    flex: 0 0 180px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: none !important;
    height: 45px !important;
    width: auto !important;
    max-width: 170px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px) {
  .cs_main_header_left {
    width: 160px !important;
    min-width: 160px !important;
    flex: 0 0 160px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: none !important;
    height: 60px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 360px) {
  .cs_main_header_left {
    width: 140px !important;
    min-width: 140px !important;
    flex: 0 0 140px !important;
  }
  .cs_main_header_left .cs_site_branding img {
    transform: none !important;
    height: 38px !important;
    width: auto !important;
    max-width: 130px !important;
    object-fit: contain !important;
  }
}

/* Alternative approach: Use overflow hidden on container to prevent logo from breaking out */
.cs_main_header_left {
    overflow: hidden !important;
}

.cs_main_header_left .cs_site_branding {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.cs_main_header{
    background-color: white;
}

.cs_footer_contact a{
  text-decoration: none;
}

/* Change title color to white on hover */
.cs_iconbox:hover .cs_iconbox_title {
    color: #fff;
    transition: color 0.3s ease;
}

.cs_iconbox_title{
  color: #000 !important;
}

.cs_hero.cs_style_1 {
  position: relative; /* Ensure overlay positioning works */
  z-index: 0; /* Base layer */
}

.cs_card.cs_style_3.cs_gray_bg.position-relative {
  background-color: #e6e6e8 !important;
}


.cs_footer {
  position: relative;
  background: url("assets/img/mockups/team-of-helpline-operators-with-headsets-consultin-2025-03-18-17-37-38-utc.jpg") no-repeat center center/cover;
  color: #fff;
}

.cs_footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0, 34, 97);
  opacity: 0.85; /* adjust overlay strength */
  z-index: 0;
}

.cs_footer > * {
  position: relative;
  z-index: 1;
}