/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
/**

* AALayer, © 2017
* All Rights Reserved
* www.aalayer.com
  -
* Template: lowendhost
* For any issue or question contact our support.

**/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');
body {
    font-family: 'Montserrat', sans-serif !important;
    background-color: #E7E7E7 !important;
    margin-right: 0px !important;
  }
  html {
    font-family: 'Montserrat', sans-serif !important;
  }
  #main-body {
      padding-top: 45px !important;
      padding-bottom: 35px !important;
      background: #E7E7E7 !important;
  }
  .container {
    padding-right: 19px;
    padding-left: 19px;
  }
  ::-moz-selection { background: #64A76C; color: white}
  ::selection { background: #64A76C; color: white;}
  ::-webkit-scrollbar {
    width: 11px;
    background-color: #E7E7E7;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #64A76C;
    border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #72B67B;
    border-radius: 10px;
  }
  #order-standard_cart .view-cart-items-header {
    background-color: #64A76C;
  }
  a {color: #919393;
  background-color: transparent;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  border-radius: 1px;}
  a:hover, a:active {
    color: #64A76C;
    outline: 0;
    text-decoration: none !important;
  }
  .navbar {
  border-bottom-color: transparent !important;
  }
  .navbar-default {
      background-color: #0F0F0F;
      border:0;
      border-radius: 0;
      border-bottom: 0;
  }
  .navbar-default .navbar-brand {
      color: #9d9d9d
  }
  .navbar-default .navbar-brand:focus,
  .navbar-default .navbar-brand:hover {
      color: #fff;
      background-color: transparent
  }
  .navbar-default .navbar-text {
      color: #9d9d9d
  }
  .navbar-default .navbar-nav>li>a {
      
      font-size: 14px !important;
      text-transform: uppercase;
      padding-top: 27px;
      padding-bottom: 27px;
      color: #A4A4A4;
      padding-left: 16px;
      padding-right: 16px;
      top: 0%;
      transition: all 0.1s ease-out;
      border-bottom: 1px solid transparent;
      font-weight: 300;
  }
  .navbar-default .navbar-nav>li>a:focus,
  .navbar-default .navbar-nav>li>a:hover {
      border-color: #E7E7E7;
      background-color: transparent;
      color: #D8D8D8;
  }
  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:focus,
  .navbar-default .navbar-nav>.active>a:hover {
      color: white;
      background-color: #64A76C;
      border-bottom-color: transparent;
  }
  .navbar-default .navbar-nav>.disabled>a,
  .navbar-default .navbar-nav>.disabled>a:focus,
  .navbar-default .navbar-nav>.disabled>a:hover {
      color: #ccc;
      background-color: transparent
  }
  .navbar-default .navbar-toggle {
      border-color: #333
  }
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    color: #fff;
    background-color: #64A76C;
    border: 0;
  }
  .navbar-default .navbar-toggle .icon-bar {
      background-color: #fff
  }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
     border-color: #101010
  }
  .navbar-default .navbar-nav>.open>a,
  .navbar-default .navbar-nav>.open>a:focus,
  .navbar-default .navbar-nav>.open>a:hover {
    color: #fff;
    background-color: transparent !important;
  }
  @media (max-width: 750px) {
      .navbar-default .navbar-nav .open .dropdown-menu>.dropdown-header {
          border-color: #080808
      }
      .navbar-default .navbar-nav .open .dropdown-menu .divider {
          background-color: #080808
      }
      .navbar-default .navbar-nav .open .dropdown-menu>li>a {
          color: #9d9d9d;
      }
      .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
      .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
          color: #fff;
          background-color: black;
      }
      .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
      .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,
      .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {
          color: #fff !important;
          background-color: #080808
      }
      .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
      .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,
      .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover {
          color: #444;
          background-color: transparent
      }
  }
  .navbar-default .navbar-link {
      color: #9d9d9d
  }
  .navbar-default .navbar-link:hover {
      color: #fff
  }
  .navbar-default .btn-link {
      color: #9d9d9d
  }
  .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      display: none;
      float: left;
      min-width: 160px;
      padding: 5px 0;
      margin: 2px 0 0;
      font-size: 14px;
      text-align: left;
      list-style: none;
      background-color: rgba(0,0,0,0.9);
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, .15);
      border-radius: 4px;
      -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
  }
  .dropdown-menu>li>a {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: 300;
      line-height: 1.32857143;
      color: #9d9d9d;
      white-space: nowrap;
      padding-top: 9px;
      padding-bottom: 9px;
  }
  .dropdown-menu>li>a:focus,
  .dropdown-menu>li>a:hover {
      text-decoration: none;
      color: #fff !important;
      background-color: transparent !important;
  }
  .dropdown-menu>.active>a,
  .dropdown-menu>.active>a:focus,
  .dropdown-menu>.active>a:hover {
      color: #fff;
      text-decoration: none;
      background-color: #337ab7 !important;
      outline: 0
  }
  .nav-divider {
    border-color: #2B2B2B !important;
    color: #2B2B2B !important;
    background-color: #2B2B2B !important;
  }
  .nav-divider:hover {
    border-color: #2B2B2B !important;
    color: #2B2B2B !important;
    background-color: #2B2B2B !important;
  }
  #header {
    background-color: rgba(0,0,0,0.9) !important;
    border-radius: 0 !important;
  }
  #top-nav {
    background-color: transparent !important;
  }
  .header-lined h1 {
    color: #64A76C !important;
  }
  .list-group-item .active {
    background-color: #64A76C !important;
  }
  div.sidebar .list-group-item-selected {
      background-color: #64A76C !important;
      color: #64A76C;
  }
  .navbar-main li.account {
    background-color: transparent!important;
  }
  a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
      border-top: 1px solid transparent !important;
      background-color: #64A76C !important;
      border-bottom: 1px solid transparent !important;
  }
  .dataTables_wrapper .dataTables_info
  {
    background-color: #64A76C !important;
  }
  .home-shortcuts {
    background-color: #64A76C !important;
  }
  .home-shortcuts li, .home-shortcuts li:first-child {
    border-color: #F1F1F1
  }
  #order-boxes .fields-container {
    border-top-color: #64A76C !important;
    border-bottom-color: #64A76C !important;
  }
  #order-boxes .fields-container .field-row:nth-child(even) {
    background-color: #EEEEEE !important;
  }
  #order-boxes .fields-container .field-row:nth-child(odd) {
    background-color: #FFF9F8 !important;
  }
  #order-boxes table.styled tr th {
    background-color: #64A76C !important;
  }
  #order-boxes table.styled tr.carttablesummary td {
    background-color: #FFF4F2 !important;
  }
  .alert-info {
    background-color: rgba(232, 102, 76, 0.8) !important;
    color: white !important;
  }
  .form-control {
    min-height: 40px;
  }
  .form-control:focus, .form-control:active {
    border-color: transparent !important;
    box-shadow: 0 0px 0px rgba(255, 255, 255, 0.8) inset, 0 0 4px rgba(255, 255, 255, 0.8) !important;
  }
  .lehlogo {
    max-width: 255px !important;
    margin-top: 2px;
  }
  .btn-info, .btn-default{
  background-color: transparent !important;
  color: #64A76C;
  border: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #64A76C;
  }
  ul.top-nav>li.primary-action>a.btn {
    background-color: #64A76C !important;
  }
  ul.top-nav>li>a:hover {
      color: #fff !important;
  }
  .btn-info:hover, .btn-info:focus, .btn-default:hover, .btn-default:focus, .btn-primary:hover, .btn-primary:focus {
    background-color: #64A76C !important;
    border-color: transparent;
    color: white;
  }
  .btn-warning, .btn-primary {
    background-color: #64A76C;
    color: white;
    border-color: transparent;
  }
  .btn-warning:hover, .btn-warning:focus, .btn-primary:hover, .btn-primary:focus {
    background-color: #72B67B !important;
    border-color: #64A76C !important;
  }
  .footer {
    background-color: rgba(0,0,0,0.9);
  }
  .footer .container {
    padding: 40px 2px 40px 20px;
  }
  .footer .flogo {
    max-width: 72%;
    padding-bottom: 5px;
  }
  .footer .col-md-3 li{
    font-size: 16px;
    list-style: none;
    margin-top: 12px;
  }
  .footer .col-md-3 li a {
    color: #6A6AA6;
    transition: all .2s ease;
  }
  .footer .col-md-3 li a:hover {
    padding-left: 4px;
    color: #72B67B;
    transition: all .2s ease;
  }
  .footer .col-md-2 {
    padding-right: 18px;
    padding-left: 18px;
  }
  .footer .col-md-2 .fa {
    font-size: 36px;
    margin-right: 8px;
    margin-top: 4px;
    opacity: 0.6;
  }
  .footer .col-md-2 .fa:hover {
    color: #72B67B;
    opacity: 1;
  }
  .footer .col-md-2 .fa-facebook-square:hover {
    color: #3b5998;
  }
  .footer .col-md-2 .fa-twitter-square:hover {
    color: #1da1f2;
  }
  .footer .col-md-2 .fa-google-plus-square:hover {
    color: #dd4b39;
  }
  .footer .col-md-2 .fa-instagram:hover {
    color: #f56040;
  }
  .footer .col-md-2 .fa-youtube-square:hover {
    color: #cd201f;
  }
  .footer .col-md-2 .fa-linkedin-square:hover {
    color: #00a0dc;
  }
  .footer .col-md-4 p {
  color: #6F6F6F;
  }
  blockquote {
    border-color: #64A76C;
  }
  .logincontainer {
    background-color: white;
    padding: 40px 60px 40px 60px;
    border-radius: 4px;
  }
  section#home-banner {
    background-image: url('../img/main.jpg');
    background-color: transparent !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 110px !important;
    padding-bottom: 90px !important;
  }
  div.header-lined h1 {
    font-weight: bold !important;
  }
  @media (max-width: 767px) {
    body {
      max-width: 98% !important;
    }
  }

/* --- Homepage Product Boxes (Bootstrap 3 friendly) --- */
.homepage-products .hp-col {
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px;
}

.homepage-products .hp-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  padding: 15px;
  width: 100%;
}

.homepage-products .hp-inner {
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homepage-products .hp-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.homepage-products .hp-card-body h5 {
  font-weight: 600;
  margin: 0 0 6px;
}

.homepage-products .hp-card-aside {
  flex: 0 0 auto;
  min-width: 140px;
  text-align: right;
}

.homepage-products .hp-card:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transform: translateY(-2px);
  transition: all .18s ease;
}

@media (max-width: 767px) {
  .homepage-products .hp-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .homepage-products .hp-card-aside {
    width: 100%;
    text-align: left;
    margin-top: 10px;
  }
  .homepage-products .hp-card-aside .btn {
    width: 100%;
  }
}
.hp-badge{
  display:inline-block;
  background:#64A76C;
  color:#fff;
  font-size:11px;
  line-height:1;
  padding:4px 6px;
  border-radius:3px;
  margin-right:6px;
  vertical-align:middle;
}

/* Homepage product grid */
.homepage-products .hp-col{
  display:flex;
  margin-bottom:20px;
}

/* Card with vertical stacking */
.homepage-products .hp-card{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:6px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  padding:20px;
  width:100%;
  height:190px;                 /* fixed equal height */
  display:flex;
  flex-direction:column;        /* stack text then button */
  justify-content:space-between;/* push button to bottom */
  transition:all .18s ease;
}
.homepage-products .hp-card:hover{
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transform:translateY(-2px);
}

/* Text block */
.homepage-products .hp-card-body{
  flex:1 1 auto;
}
.homepage-products .hp-card-body h5{
  font-weight:600;
  margin-bottom:8px;
}
.homepage-products .hp-card-body p{
  color:#666;
  margin-bottom:0;
  font-size:13px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:3;         /* trim if needed */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Button block */
.homepage-products .hp-card-footer{
  margin-top:12px;
  text-align:center;
}
.homepage-products .hp-card-footer .btn{
  width:100%;
}

/* Kill any older side-by-side rules if still present */
.homepage-products .hp-inner,
.homepage-products .hp-card-aside{ display:block !important; }

/* Match all green buttons to brand colour */
.btn-success,
.btn-success:active,
.btn-success:focus {
  background-color: #64A76C !important;
  border-color: #64A76C !important;
  color: #fff !important;
}

.btn-success:hover {
  background-color: #72B67B !important;
  border-color: #72B67B !important;
  color: #fff !important;
}
/* Style full-width box */
.hp-card-wide {
  text-align: center;
  height: auto; /* let it expand naturally */
}
.hp-card-wide .hp-card-body p {
  max-width: none;
  margin: 0;
  text-align: center;
}
.hp-card-wide .hp-card-body {
  padding: 15px 20px;
}
/* RSS Marquee (aligned with site container) */
.rss-marquee-wrap{
  background:#64A76C;
  color:#fff;
  border-radius:4px;
  overflow:hidden;
  padding:8px 0;                 /* bar height */
  margin:15px 0;                 /* space above/below */
}

.rss-marquee{
  display:inline-block;
  white-space:nowrap;
  padding:0 16px;                /* inner left/right padding */
  animation:rss-scroll 25s linear infinite;
}

.rss-marquee a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  margin-right:40px;
}
.rss-marquee a:hover{ text-decoration:underline; }

/* Pause on hover (nice touch) */
.rss-marquee-wrap:hover .rss-marquee{
  animation-play-state:paused;
}

@keyframes rss-scroll{
  0%   { transform:translateX(100%); }
  100% { transform:translateX(-100%); }
}
/* === Get in touch band =================================================== */
.contact-cta{
  background: linear-gradient(135deg,#64A76C 0%, #4F9660 50%, #3E8550 100%);
  color:#fff;
  border-radius:8px;
  padding:40px 0;
  margin:25px 0 10px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.contact-cta--inset{           /* for Option C (inside a card) */
  margin:0;
  border-radius:6px;
}
.contact-cta__title{
  font-weight:700;
  letter-spacing:.5px;
  margin:0 0 12px;
  text-transform:uppercase;
}
.contact-cta__lead{
  margin:6px auto;
  max-width:920px;
  opacity:.95;
}

/* Hours strip */
.contact-hours{
  background:#fff;
  color:#222;
  border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  margin:22px auto 14px;
  padding:14px 16px;
  max-width:1050px;
  text-align:left;
}
.contact-hours__icon{
  float:left;
  width:56px; height:56px; border-radius:50%;
  background:#EAF4EC; color:#64A76C;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin:8px 16px 8px 6px;
}
.contact-hours__grid{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
}
.contact-hours__grid > div{ min-width:110px; }
.contact-hours__grid span{
  display:block; font-size:12px; text-transform:uppercase;
  color:#7a7a7a; letter-spacing:.4px;
}
.contact-hours__grid strong{ font-size:13px; }

/* Actions */
.btn-contact{
  min-width:220px; padding:10px 18px; border-radius:999px;
  margin:10px 8px 0; font-weight:600;
}
.btn-outline-light{
  background:transparent; border:1px solid rgba(255,255,255,.85);
  color:#fff !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus{
  background:#fff !important; color:#3a3a3a !important;
}

/* Small screens */
@media (max-width: 767px){
  .contact-cta{ padding:28px 0; }
  .contact-hours__icon{ display:none; }
  .contact-hours{ text-align:center; }
  .contact-hours__grid{ justify-content:center; gap:12px 22px; }
}

/* === FIX: restore white cards after the Get in touch band ================= */

/* Ensure each product card remains white even after the green band */
.homepage-products .hp-card {
  background: #ffffff !important;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Reset anything odd that a preceding section might pass down */
.contact-cta + .container,
.contact-cta + .container .row.homepage-products {
  background: transparent !important;
  display: block !important;   /* avoid any unexpected flex inheritance */
}

/* Give the band breathing room from the grid below */
.contact-cta {
  margin-bottom: 40px;
}
/* FIX: keep product cards white and align section after contact band */
.homepage-products .hp-card {
  background: #ffffff !important;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Make the band a regular full-width card inside the row */
.homepage-products .hp-col > .contact-cta {
  width: 100%;
}

/* Pleasant space between the band and the grid below */
.contact-cta { margin-bottom: 40px; }

/* Ensure product cards stay white */
.row.homepage-products .hp-card {
  background: #fff !important;
}
/* Clear the floated clock icon so content below re-centres */
.contact-hours::after {
  content: "";
  display: block;
  clear: both;
}

/* (Belt & braces) make sure the buttons row starts on a new line and centres */
.contact-cta__actions {
  clear: both;
  text-align: center;
}
/* Always clear the icon float to keep buttons centred */
.contact-hours::after {
  content: "";
  display: block;
  clear: both;
}

/* Ensure the icon aligns properly and doesn’t reserve ghost space */
.contact-hours__icon {
  float: left;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EAF4EC;
  color: #64A76C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 8px 16px 8px 6px;
}

/* Centre-align the button block properly */
.contact-cta__actions {
  clear: both;
  text-align: center;
  margin-top: 20px;
}
/* === Footer link colour fix === */
.footer a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.footer a:hover,
.footer a:focus {
  color: #72B67B !important; /* your brand green hover */
  text-decoration: none !important;
}

/* Top alert banner */
.netcrit-banner{
  position:fixed; top:0; left:0; right:0;
  background:#c9302c; color:#fff;
  z-index:2000; box-shadow:0 2px 6px rgba(0,0,0,.2);
  padding:8px 12px; font-size:14px;
}

/* Use a CSS variable for exact push-down height */
body.netcrit-shift{ padding-top: var(--netcrit-h, 0px); }

/* In case your theme gives #header a top margin, zero it while banner is on */
body.netcrit-shift #header{ margin-top:0 !important; }

.netcrit-banner a{ color:#fff; text-decoration:underline; }
.netcrit-banner .netcrit-close{
  float:right; font-size:18px; line-height:1;
  margin-left:10px; color:#fff; opacity:.9;
  background:transparent; border:0; cursor:pointer;
}
.netcrit-banner .netcrit-close:hover{ opacity:1; }

@media (max-width:767px){
  .netcrit-banner{ font-size:13px; padding:8px 10px; }
}
/* --- About / Who We Are hero --- */
.about-hero {
  position: relative;
  padding: 40px 0 20px;
}
.about-hero .container {
  /* centres content with your global container width */
}
.about-hero__row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 18px;
}

/* Card-style wrapper around content for subtle separation */
.about-hero .col-sm-7,
.about-hero .col-sm-5 {
  margin-bottom: 20px;
}
.about-hero__image-wrap {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 16px;
}
.about-hero__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Title with brand underline */
.about-hero__title {
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  position: relative;
}
.about-hero__title:after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: #64A76C; /* brand green */
  margin: 10px 0 0;
  border-radius: 2px;
}

/* Body text */
.about-hero__lead {
  font-size: 16px;
  margin: 14px 0 6px;
}
.about-hero__copy {
  margin: 6px 0 10px;
}

/* Feature bullets */
.about-hero__bullets {
  margin: 12px 0 18px;
}
.about-hero__bullets li {
  margin: 6px 0;
  line-height: 1.5;
}
.about-hero__bullets i {
  color: #64A76C;
  margin-right: 8px;
}

/* Actions */
.about-hero__actions .btn {
  min-width: 180px;
  margin-right: 8px;
}
.about-hero__link {
  color: #64A76C !important;
}
.about-hero__link:hover {
  text-decoration: underline;
}

/* Responsive: stack nicely on mobiles and centre content */
@media (max-width: 767px) {
  .about-hero__row {
    display: block;
  }
  .about-hero__image-wrap {
    margin-bottom: 16px;
  }
  .about-hero__actions .btn {
    width: 100%;
    margin: 6px 0;
  }
  .about-hero__title {
    text-align: center;
  }
  .about-hero__title:after {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Managed card spacing tidy-up */
.managed-card {
  display: flex;
  align-items: stretch;         /* make both sides same height */
  justify-content: space-between;
  gap: 0;                       /* kill any gap between columns */
}

/* Content spacing (slightly tighter now the chip has gone) */
.managed-content {
  padding: 36px 46px;           /* was 40/50; adjust to taste */
  max-width: 600px;
}

/* Image side – no padding/margins, image fills completely */
.managed-image {
  flex-shrink: 0;
  width: 45%;
  margin: 0;
  padding: 0;                   /* ensure no padding */
  background: none;             /* remove subtle gradient if you had it */
  display: flex;                /* so the img can stretch fully */
}

.managed-image img {
  display: block;               /* remove inline gaps */
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fill area neatly */
  border-radius: 0 14px 14px 0; /* match card corners on the right */
}

/* Responsive: stack neatly with correct corners */
@media (max-width: 991px) {
  .managed-card {
    flex-direction: column;
    text-align: center;
  }

  .managed-content {
    padding: 28px 24px;
    max-width: 100%;
  }

  .managed-image {
    width: 100%;
    order: 2;                   /* keep image below text; change to 0 to put it above */
  }

  .managed-image img {
    border-radius: 0 0 14px 14px; /* rounded bottom corners on mobile */
    height: 240px;                /* optional fixed height; remove if you want auto */
  }
}
/* --- Managed Solution Section (shared styling) --- */
.managed-solution {
  padding: 40px 0;
}

.managed-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: #f8f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  gap: 0;
}

.managed-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.managed-content {
  flex: 1;
  padding: 36px 46px;
  max-width: 600px;
}

.managed-content h3 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #222;
}

.managed-content p {
  color: #555;
  margin-bottom: 25px;
  font-size: 1rem;
  line-height: 1.6;
}

.managed-image {
  flex-shrink: 0;
  width: 45%;
  margin: 0;
  padding: 0;
  display: flex;
}

.managed-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 14px 14px 0;
}

/* Reversed layout (image on left) */
.managed-card.reverse {
  flex-direction: row-reverse;
}

.managed-card.reverse .managed-image img {
  border-radius: 14px 0 0 14px;
}

/* Responsive layout */
@media (max-width: 991px) {
  .managed-card,
  .managed-card.reverse {
    flex-direction: column;
    text-align: center;
  }

  .managed-content {
    padding: 28px 24px;
    max-width: 100%;
  }

  .managed-image {
    width: 100%;
  }

  .managed-image img {
    border-radius: 0 0 14px 14px;
    height: 240px;
  }
}

/* --- Managed blocks: flat, no white card background --- */
.managed-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep spacing tidy */
.managed-solution { padding: 24px 0; }

/* Let the image look like the hero element with rounded corners */
.managed-image img {
  border-radius: 12px !important;     /* same radius on both sides */
}

/* Optional: a subtle divider between sections */
.managed-solution + .managed-solution {
  margin-top: 24px;
  border-top: 0;                       /* ensure no border if you had one */
}
/* === 24/7 Support CTA ===================================================== */
.support-cta {
  margin: 28px 0 32px;
}
.support-cta__wrap {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  padding: 22px 24px;
}

/* header */
.support-cta__head {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px dashed #e9e9e9;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.support-cta__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #64A76C, #4f9660);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(100,167,108,.25);
  font-size: 20px;
}
.support-cta__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: .2px;
}
.support-cta__subtitle {
  margin: 4px 0 0;
  color: #666;
  font-size: 14px;
}

/* quick facts */
.support-cta__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 10px 0 6px;
}
.support-cta__meta-item {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f8faf8;
  border: 1px solid #eef2ee;
  border-radius: 10px;
  padding: 12px 14px;
}
.support-cta__meta-item i {
  color: #64A76C;
  font-size: 18px;
  flex: 0 0 18px;
}
.support-cta__meta-item strong {
  display: block;
  line-height: 1.2;
}
.support-cta__meta-item span {
  color: #666;
  font-size: 13px;
}

/* note + buttons */
.support-cta__note {
  color: #555;
  font-size: 14px;
  margin: 6px 0 12px;
}
.support-cta__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.support-cta__outline {
  border: 1px solid #64A76C !important;
  color: #64A76C !important;
  background: transparent !important;
}
.support-cta__outline:hover {
  background: #64A76C !important;
  color: #fff !important;
}

/* mobile */
@media (max-width: 767px) {
  .support-cta__wrap { padding: 18px; }
  .support-cta__meta { grid-template-columns: 1fr; }
  .support-cta__actions { flex-direction: column; }
  .support-cta__actions .btn { width: 100%; }
}
/* === Managed Services CTA (image left, content right) ===================== */
.ms-cta { margin: 26px 0 18px; }
.ms-cta__wrap {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 18px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  padding: 18px;
}

/* reverse = media left, content right */
.ms-cta--reverse .ms-cta__media { order: 0; }
.ms-cta--reverse .ms-cta__content { order: 1; text-align: right; }

/* media */
.ms-cta__media {
  border-radius: 10px;
  overflow: hidden;
  align-self: stretch;
  background: #f6f7f7;
}
.ms-cta__media img {
  width: 100%; height: 100%;
  display: block; object-fit: cover;
}

/* header */
.ms-cta__head {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px dashed #e9e9e9;
  padding-bottom: 12px; margin-bottom: 12px;
}
.ms-cta__head--right { justify-content: flex-end; }
.ms-cta__icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg,#64A76C,#4f9660);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(100,167,108,.25); font-size: 18px;
}
.ms-cta__title { margin: 0; font-weight: 700; letter-spacing: .2px; }
.ms-cta__subtitle { margin: 4px 0 0; color: #666; font-size: 14px; }

/* chips */
.ms-cta__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 8px;
}
.ms-cta__chips--right { justify-content: flex-end; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f4f8f4; border: 1px solid #e6eee6;
  color: #2d2d2d; padding: 6px 10px;
  border-radius: 999px; font-size: 13px;
}
.ms-chip i { color: #64A76C; }

/* copy + actions */
.ms-cta__blurb { color: #555; margin: 8px 0 12px; }
.ms-cta__blurb--right { text-align: right; }

.ms-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-cta__actions--right { justify-content: flex-end; }
.ms-cta__outline {
  border: 1px solid #64A76C !important;
  color: #64A76C !important;
  background: transparent !important;
}
.ms-cta__outline:hover {
  background: #64A76C !important;
  color: #fff !important;
}

/* responsive */
@media (max-width: 991px) {
  .ms-cta__wrap {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .ms-cta--reverse .ms-cta__content { text-align: left; }
  .ms-cta__head--right { justify-content: flex-start; }
  .ms-cta__chips--right { justify-content: flex-start; }
  .ms-cta__blurb--right { text-align: left; }
  .ms-cta__actions--right { justify-content: flex-start; }
  .ms-cta__media img { height: 240px; object-fit: cover; }
}
/* --- FIX: Managed Services card alignment & spacing ---------------------- */
/* Make both columns align along the middle; give the image the same height span */
.ms-cta__wrap{
  grid-template-columns: 46% 54%;   /* a touch more space for text on the right */
  align-items: center;               /* vertically center image + content */
}

/* Center the right-side content block vertically and tidy inner spacing */
.ms-cta__content{
  padding: 18px 22px;                /* a little tighter than before */
  display: flex;
  flex-direction: column;
  justify-content: center;           /* vertical centering */
}

/* Header: remove divider and keep a compact right-aligned row */
.ms-cta__head{
  gap: 12px;
  border: 0;                         /* remove dashed line that pulled things down */
  padding: 0;
  margin: 0 0 8px;
}
.ms-cta__head--right{
  flex-direction: row-reverse;       /* icon sits on the far right of the heading */
  text-align: right;
}

/* Title/subtitle tighter, better line-height */
.ms-cta__title{
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
.ms-cta__subtitle{
  margin: 6px 0 0;
}

/* Chips & blurb right-aligned */
.ms-cta__chips{ margin: 10px 0 8px; }
.ms-cta__chips--right{ justify-content: flex-end; }
.ms-cta__blurb--right{ text-align: right; margin: 6px 0 14px; }

/* Buttons right-aligned */
.ms-cta__actions--right{ justify-content: flex-end; }

/* Image: stretch nicely, no cropping weirdness, same vertical span as content */
.ms-cta__media{ align-self: stretch; }
.ms-cta__media img{
  height: 100%;
  min-height: 220px;                 /* ensures presence when text is short */
  object-fit: cover;
  border-radius: 10px;
}

/* Optional: if the round icon feels like it “pushes” the header, you can shrink it slightly
.ms-cta__icon{ width:42px; height:42px; font-size:16px; }
*/

/* Mobile keeps the comfortable stack you had */
@media (max-width: 991px){
  .ms-cta__wrap{ grid-template-columns: 1fr; }
  .ms-cta__content{ padding: 16px 16px; }
  .ms-cta__head--right{ flex-direction: row; text-align: left; }
  .ms-cta__chips--right{ justify-content: flex-start; }
  .ms-cta__blurb--right{ text-align: left; }
  .ms-cta__actions--right{ justify-content: flex-start; }
  .ms-cta__media img{ height: 240px; }
}
/* --- FIX: Managed Services text alignment (left side content) ------------ */
.ms-cta--reverse .ms-cta__content {
  text-align: left !important;
  align-items: flex-start !important;
}

.ms-cta--reverse .ms-cta__head--right {
  flex-direction: row;                 /* keep icon before title */
  justify-content: flex-start;
  text-align: left;
}

.ms-cta--reverse .ms-cta__chips--right {
  justify-content: flex-start !important;
}

.ms-cta--reverse .ms-cta__blurb--right {
  text-align: left !important;
}

.ms-cta--reverse .ms-cta__actions--right {
  justify-content: flex-start !important;
}

/* Optional: move the green icon to the left of the heading text */
.ms-cta--reverse .ms-cta__icon {
  order: -1;                           /* icon before text */
  margin-right: 10px;
  margin-left: 0;
}

/* ===== Modern Hero (dark, layered) ===================== */
:root{
  --nc-accent: #64A76C;           /* your brand green */
  --nc-hero-from:#0d1f33;
  --nc-hero-to:#14395c;
  --nc-hero-ink:#dfe7f1;
}
/* === Netcom Hero - Full-width fix and layout improvements === */

/* ===========================
   CLOUD HERO (top banner)
   =========================== */

/* Colors (tweak if you need) */
:root{
  --brand: #64A76C;
  --hero-fg: #EAF3EF;
  --hero-dim: rgba(234,243,239,.85);
  --hero-chip-bg: rgba(255,255,255,.08);
  --hero-chip-bd: rgba(255,255,255,.20);
  --hero-bg-a:#0c2c42;
  --hero-bg-b:#0b2241;
}

/* Section wrapper */
.cloud-hero{
  color: var(--hero-fg);
  background: radial-gradient(1100px 600px at 25% 30%, #123c58 0%, transparent 60%),
              linear-gradient(90deg, var(--hero-bg-a), var(--hero-bg-b));
  padding: 44px 0 56px;
}

/* Content container */
.cloud-hero .wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 26px;
}

/* Two-column layout */
.cloud-hero .grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;   /* text : image */
  align-items: center;
  gap: 56px;
}

/* Small “kicker” line above the headline */
.cloud-hero .kicker{
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .85;
  color: var(--hero-dim);
  margin: 2px 0 14px;
}

/* Big headline — primary line + accent line */
.cloud-hero .title{
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 10px;
  font-size: clamp(30px, 3.8vw, 46px);  /* matches the “first image” scale */
}
.cloud-hero .title .accent{
  display: block;                 /* put the green line on its own row */
  color: var(--brand);
}

/* Supporting sentence under headline */
.cloud-hero .lede{
  margin: 14px 0 20px;
  color: var(--hero-dim);
  font-size: 16px;
  line-height: 1.65;
}

/* CTA buttons row */
.cloud-hero .cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 16px;
}
.cloud-hero .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 9px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cloud-hero .btn:active{ transform: translateY(1px); }

.cloud-hero .btn--primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px rgba(100,167,108,.28);
}
.cloud-hero .btn--primary:hover{
  background: #72B67B;
}

.cloud-hero .btn--ghost{
  background: transparent;
  color: var(--hero-fg);
  border-color: var(--hero-chip-bd);
}
.cloud-hero .btn--ghost:hover{
  background: var(--hero-chip-bg);
}

/* Feature chips (UK-only, Free migrations, Secure DNS & WHOIS, …) */
.cloud-hero .chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 6px;
}
.cloud-hero .chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 999px;
  background: var(--hero-chip-bg);
  border: 1px solid var(--hero-chip-bd);
  color: var(--hero-fg);
}
.cloud-hero .chip i{ opacity: .9; }

/* ===========================
   RIGHT-SIDE ART / CUTTLEFISH
   =========================== */

.cloud-hero .art{
  display: flex;
  justify-content: flex-end;      /* keep panel aligned to the right */
}

.cloud-hero .art-card{
  width: min(560px, 100%);
  aspect-ratio: 16 / 10;
  background: radial-gradient(900px 520px at 30% 15%, #12263d 0%, #0a1730 60%),
              #0a1730;
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cloud-hero .art-card img{
  width: 82%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.35));
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 1100px){
  .cloud-hero .grid{ gap: 40px; }
  .cloud-hero .art-card{ width: min(520px, 100%); }
}

@media (max-width: 992px){
  .cloud-hero{ padding: 34px 0 40px; }
  .cloud-hero .grid{
    grid-template-columns: 1fr;
  }
  .cloud-hero .art{
    justify-content: center;      /* centre the cuttlefish on mobile */
  }
  .cloud-hero .art-card{
    width: min(520px, 92vw);
  }
  .cloud-hero .cta{ justify-content: flex-start; }
}

@media (max-width: 540px){
  .cloud-hero .title{ font-size: clamp(28px, 8vw, 36px); }
  .cloud-hero .btn{ width: 100%; justify-content: center; }
}