/*
Theme Name: Cardiff City BNI
Theme URI: https://bnicardiffcity.co.uk
Version: 1.0
Description: Website for a Professional Business Networking Group in Cardiff.
Author: GD Graphics Ltd
Author URI: https://gdgraphics.co.uk
template: bb-theme
*/

/* Add your custom styles here... */ 

  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap');

body {
font-family: Open Sans, sans-serif;
	    font-size: 18px;
}

.rotatedpic {
transform: rotate(5deg);
}

.fl-node-5cda9a4c320cc > .fl-col-content {
    background-color: rgba(29,28,42,0.0)!important;
    border-style: solid !important;
    border:none !important;
    }

.bnicontactform  input[type="text"],
input[type="email"],
.bnicontactform textarea {
padding: 12px 20px;
font-size: 16px;
color: #3e3e3e !important;
background-color: #8DC9E8 !important;
border: 1px solid #fcfcfc;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #3e3e3e !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #3e3e3e !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #3e3e3e !important;
}

input[type="submit"] {
	background-color: #8DC9E8 !important;
	border: 1px solid #fcfcfc;
	padding:15px;
	font-size:16px;
	font-weight:800;
	color: #3e3e3e !important;
}
input[type="submit"]:hover {
    background-color: #428bca;
	color:#ffffff;
}

/********* Trusted Professionals *************/

.mtp-header {
    color: #fff;
    padding: 48px 40px 40px;
    position: relative;
    overflow: hidden;
  }
  .mtp-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
  }
  .mtp-header-inner { max-width: 860px; margin: 0 auto; }
  .mtp-badge {
    display: inline-block;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
    margin-bottom: 18px;
  }
  .mtp-header h1 {
	  font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .mtp-header p {
    color: #fff;
    font-size: 18px;
  }
 
  /* ── Wrapper ── */
  .mtp-wrap { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }
 
  /* ── Contents list ── */
  .mtp-contents {
    padding: 32px 36px;
    margin-bottom: 56px;
  }
  .mtp-contents h2 {
	font-family: "Open Sans", sans-serif;
  font-weight: 700;
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--dark);
  }
  .mtp-contents ol {
    column-count: 2;
    column-gap: 40px;
    padding-left: 18px;
  }
  @media (max-width: 600px) {
    .mtp-contents ol { column-count: 1; }
    .mtp-contents { padding: 24px 20px; }
  }
  .mtp-contents li {
    margin-bottom: 8px;
    break-inside: avoid;
  }
  .mtp-contents li a {
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: color 0.2s;
  }

 
  /* ── Section divider ── */
  .mtp-divider {
    height: 1px;
    margin: 48px 0;
    position: relative;
  }
  .mtp-divider::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 48px; height: 3px;
    top: -1px;
  }
 
  /* ── Service entry ── */
  .mtp-service { scroll-margin-top: 24px; }
  .mtp-service h3 {
	  font-family: "Open Sans", sans-serif;
  font-weight: 700;
    font-size: 28px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #8DC9E8;
    display: inline-block;
  }
  .mtp-service p { margin-bottom: 12px; }
  .mtp-service p:last-child { margin-bottom: 0; }
  .mtp-service ul {
    margin: 10px 0 12px 20px;
  }
  .mtp-service ul li { margin-bottom: 5px; }
 
  /* Back-to-top link */
  .mtp-back {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.5px;
  }

  .mtp-back::before { content: '↑ '; }

 /* Contact link */
  .mtp-contact {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.5px;
  }

  .mtp-contact::after { content: '  \00BB'; }
 
  /* ── Footer ── */
  .mtp-footer {
    color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 24px 20px;
    margin-top: 0;
  }