/*

Theme Name: Rossett Dental
 Author: Roodee
Version: 1.5

*/ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); /* Import Font Awesome */ /* Variables */ :root {/* Colour Palette */ --font-color: #656565; --brand-green: #121d52; --dark-green: #10205c; --brand-red: #d5002c; --light-grey: rgba(17, 17, 17, 0.05); /* Utilities */ --transition: all .3s ease-in-out;}
/* Global Layout & Styles */ * {box-sizing: border-box;}
body {margin: 0 auto; font-family: "Lato", serif; font-size: 16px; line-height: 26px;}
/* Typography & Elements */ h1, h2, h3, h4, h5, h6 {font-family: "Lato", serif; color: #111d51; font-weight: 200; margin: 0; text-transform: uppercase;}
h1 {font-size: 40px; line-height: 50px;}
h2 {font-size: 25px; line-height: 35px;}
h3 {font-size: 25px; line-height: 35px; margin-bottom: 30px;}
h3 a {color: #111d51 !important;}
h6 {font-size: 14px; line-height: 24px;}
p {margin: 15px 0; font-weight: 400; font-size: 20px; line-height: 30px; color: var(--font-color);}
p a {color: var(--font-color); text-decoration: none; font-weight: bold; opacity: 1; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #dddddd;}
p a:hover {color: #10205c;}
ul li {margin: 15px 0; font-weight: 400; font-size: 20px; line-height: 26px; color: var(--font-color);}
ul {padding-bottom: 10px;}
.first-sentence {font-weight: bolder; font-size: 28px !important;}
.photo-credit {font-size: 12px; font-style: italic; margin-top: -20px;}
.blue-text {color: #90a0ff !important;}
.red-text {color: #d5002c; font-weight: 800;}
.quote {padding: 0px 40px 0px 40px; border-left: #5ebba7 10px solid; margin-top: 40px; display: block;}
.quote p {font-style: italic; color: #5ebba7; font-size: 25px; line-height: 35px;}
.name {text-align: right; font-style: normal !important; color: var(--font-color) !important; font-size: 20px !important;}
 .btn {padding: 15px 40px; border: none; cursor: pointer; background: var(--brand-green); color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; transition: var(--transition);}
.btn:hover {background: var(--dark-green); color: #fff !important;}
.caption {display: block; width: 100%; height: auto; text-align: center; margin-bottom: 30px;}
.caption p {font-size: 0.8em; font-style: italic;}
.no-gap {margin-top: -100px !important;}
/* Site Header */ #site-header {background-color: #000; display: flex; align-items: center; padding: 30px 100px;}
#site-header img {max-width: 220px; height: auto;}
.phone {text-decoration: none; font-size: 21px; color: white; text-align: center; flex: 1;}
/* === Slide Setup === */ .slide {min-height: 75vh; display: flex !important; align-items: center; padding: 120px 0; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
/* === Slide Block inside Bootstrap Container === */ .slide-block {background-color: rgba(0, 0, 0, 0.3); padding: 40px; max-width: 60%; /* ✅ Up to 50% of Bootstrap container */ margin-left: auto; /* ✅ Push it to the right inside the container */ text-align: left; display: flex; flex-direction: column; align-items: flex-start;}
/* === Text Styles === */ .slide h2 {color: #fff; font-size: 40px; line-height: 50px; margin-bottom: 0; text-shadow: 0 0 6px #000; text-transform: uppercase;}
.slide p {color: #fff; text-shadow: 2px 2px 60px #000; margin-bottom: 20px; font-size: 20px;}
/* === CTA Button === */ .cta {display: flex; justify-content: space-between; align-items: center; background-color: #FFD700; color: #fff; padding: 12px 20px; font-weight: bold; font-size: 16px; text-decoration: none; width: 100%; max-width: 400px; text-transform: uppercase; border: none; box-sizing: border-box; transition: transform .5s ease !important;}
.cta:hover {transform: scale(1.05);}
.cta-text {flex: 1; text-align: left; color: #fff;}
.cta-icon {border: 2px solid #fff; border-radius: 50%; width: 26px; height: 26px; line-height: 24px; text-align: center; font-size: 14px; color: #fff; margin-left: 10px; flex-shrink: 0;}
/* === Slide Backgrounds === */ .slide-one {background-image: url('http://rossett.onourserver.co.uk/wp-content/uploads/2026/03/reception.jpg');}
.slide-two {background-image: url('http://rossett.onourserver.co.uk/wp-content/uploads/2025/06/home-page-hero-002.jpg');}
/* === Remove Dots and Arrows === */ .slider .slick-dots, .slider .slick-dots li button, .slider .slick-dots .slick-active button, .r-arrow, .l-arrow {display: none !important;}
/* === Optional: Hide mobile versions === */ .slide-one-mobile, .slide-two-mobile {display: none;}
/* === Black Band Section === */ .black-band {background-color: #000; width: 100%; padding: 40px 0;}
.band-content {display: flex; align-items: center; justify-content: center; gap: 10%; /* spacing between CTA and phone */ flex-wrap: wrap; /* allows responsiveness on smaller screens */}
/* Reuse existing CTA styles */ .black-band .cta {display: flex; justify-content: space-between; align-items: center; background-color: #FFD700; color: #fff; padding: 12px 20px; font-weight: bold; font-size: 16px; text-decoration: none; max-width: 300px; text-transform: uppercase; border: none; box-sizing: border-box; transition: transform .5s ease;}
.black-band .cta:hover   {transform: scale(1.1);}
.black-band .cta-text {flex: 1; text-align: left; color: #fff;}
.black-band .cta-icon {border: 2px solid #fff; border-radius: 50%; width: 26px; height: 26px; line-height: 24px; text-align: center; font-size: 14px; color: #fff; margin-left: 10px; flex-shrink: 0;}
/* Phone Number and Underline */ .phone-wrap {display: inline-block; text-align: left; position: relative; color: #fff; font-size: 20px; font-weight: bold;}
.phone-number {display: inline-block; position: relative; z-index: 1; padding-bottom: 5px !important;}
.phone-underline {display: block; height: 3px; background-color: #FFD700; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 0;}
/* === Section Wrapper === */ .two-column-section {padding: 60px 0;}
/* === Remove Bootstrap gutters inside image grid === */ .image-grid .row {margin-left: 0; margin-right: 0;}
/* === Image and CTA Styling === */ .image-link {display: block; text-decoration: none; transition: transform .5s ease !important;}
.image-link:hover {transform: scale(1.1);}
.image-wrapper {display: flex; flex-direction: column;}
.grid-img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin-bottom: -30px !important; border: none !important; padding: 0;}
.image-cta {background-color: #FFD700; text-align: center; padding: 10px 0; font-weight: bold; text-transform: uppercase; color: #fff; font-size: 16px; margin-top: 0;}
/* === Content Column === */ .content-col h2 {margin-bottom: 0;}
.spacer-20 {height: 20px;}
.spacer-10 {height: 10px;}
.content-col p {font-size: 16px; line-height: 1.6;}
/* === CTA Styling === */ .cta {display: flex; justify-content: space-between; align-items: center; background-color: #FFD700; color: #fff; padding: 12px 20px; font-weight: bold; font-size: 16px; text-decoration: none; max-width: 400px; text-transform: uppercase; border: none; box-sizing: border-box; transition: background 0.3s;}
.cta:hover {background-color: #e6c200;}
.cta-icon {border: 2px solid #fff; border-radius: 50%; width: 26px; height: 26px; line-height: 24px; text-align: center; font-size: 14px; color: #fff; margin-left: 10px; flex-shrink: 0;}
.cta-full {width: 100%; max-width: 400px;}
.equal-grid-section {padding: 60px 0;}
/* Shared Grid Block */ .grid-block {width: 100%; aspect-ratio: 4 / 3; position: relative; overflow: hidden; margin-bottom: 20px;}
/* For image blocks: image stretches to fit the block */ .grid-img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* For the grey text block */ .grey-content {background-color: #505050; height: calc(100% - 20px); /* ← breaks aspect-ratio behavior */}
/* Ensure internal content fits and doesn't stretch the block */ .text-content {position: absolute; /* ✅ Pin inside the aspect-ratio container */ top: 0; left: 0; right: 0; bottom: 0; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}
.text-content h3 {font-size: 20px; margin-bottom: 10px; color: #fff;}
.white-line {height: 1px; background-color: #fff; margin-bottom: 10px;}
.text-content p {font-size: 14px; line-height: 1.4; margin: 0; color: #fff;}
.staff-section {background-color: #2b2b2b; width: 100%; padding: 60px 0;}
.grey-section {background-color: #efefef; width: 100%; padding: 80px 0;}
.grey-section h2, .grey-section p, .grey-section ul li {color: #656565;}
/* Team carousel (scoped) */
.home-team {background-color: #2b2b2b;}
.home-team .team-carousel{position:relative; overflow:hidden; width:100%;}
.home-team .team-track{display:flex; transition:transform .5s ease; will-change:transform;}
.home-team .team-card{flex:0 0 33.3333%; box-sizing:border-box; padding:12px;}
@media (max-width: 991.98px){ .home-team .team-card{flex-basis:50%;} }
@media (max-width: 575.98px){ .home-team .team-card{flex-basis:100%;} }

/* Keep your existing .staff-card / .staff-img / .staff-info styles.
   Only ensure images don’t overflow if missing in theme: */
.home-team .staff-img{width:100%; height:auto; display:block;}
.staff-card {margin: 0px 0px 15px 0px; transition: transform .5s ease !important;}
.staff-card:hover {transform: scale(1.1);}
/* Dots */
.home-team .team-dots{display:flex; justify-content:center; gap:8px; margin-top:12px;}
.home-team .team-dot{  -webkit-appearance:none;
  appearance:none;
  display:inline-block;
  box-sizing:border-box;
  width:10px;
  height:10px;
  aspect-ratio:1 / 1;
  padding:0;
  line-height:0;
  border-radius:50%;
  border:1px solid #fff;
  background:transparent;
  opacity:.4;
  cursor:pointer;}
.home-team .team-dot.is-active{background: #fff; opacity:1;}
.home-team .team-dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.staff-img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;}
.staff-info {background-color: #FFD700; text-align: center; padding: 15px;}
.staff-info h4 {color: #fff; font-size: 18px; margin-bottom: 5px; text-transform: uppercase;}
.staff-info p {color: #fff; font-size: 14px; margin: 0;}
.text-white {color: #fff;}
.text-center {text-align: center}
.contact-map-section {background-color: #2b2b2b;}
.contact-form {max-width: 100%;}
.form-left,   .form-right {width: 48%;}
.form-left input, .form-right textarea {width: 100%; padding: 10px; margin-bottom: 10px; border: none; font-size: 14px; box-sizing: border-box;}
.form-right textarea {height: 134px; resize: none;}
.form-footer {margin-top: 20px;}
.privacy-policy input {margin-right: 5px;}
.privacy-policy a {color: #fff;}
/* Match map height to left column */ .map-embed-wrapper {width: 100%; height: 100%;}
.map-embed-wrapper iframe {width: 100%; height: 100%; min-height: 100%; border: 0; display: block;}
/* New items */ .green-outlined-box {width: 100%; height: auto; border: #5ebba7 1px solid; padding: 30px; margin-bottom: 30px;}
.green-outlined-box img {margin-bottom : 20px; max-width: 100%; width: auto;}
.grey-outlined-box {width: 100%; height: auto; border: #ccc 1px solid; padding: 30px; margin-bottom: 30px;}
.grey-outlined-box img {margin-bottom : 20px; max-width: 100%; width: auto;}
.based-at-the-bluecoat {max-width: 200px !important; height: auto;}
.based-at-the-bluecoat img {margin-bottom : 20px; max-height: 200px; width: auto;}
.grey-outlined-box a {text-decoration: none !important;}
.responsive-images-container {display: block; width: 100%; height: auto; overflow: hidden;}
.responsive-images-container img {display: block; width: 100%; height: auto; overflow: hidden;}
.left-align {text-align: left;}
.room-pricing {width: 100%; max-width: 900px; margin: 0 auto 30px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); font-weight: 400; font-size: 20px; line-height: 30px; color: var(--font-color);}
.pricing-table {width: 100%; border-collapse: collapse;}
.pricing-table th, .pricing-table td {padding: 12px 15px; text-align: left; border: 1px solid #ddd;}
.pricing-table th {background-color: #5ebba7; color: #fff; font-weight: bold;}
.pricing-table tr:nth-child(even) {background-color: #f2f2f2;}
.pricing-table tr:hover {background-color: #e6f7ff;}
/* Style the table to make it invisible */ .invisible-table {border: none; border-collapse: collapse; /* Collapse the borders for a cleaner look */ width: 100%; /* Optional: Make the table take up the full width */}
/* Remove borders and spacing */ .invisible-table td {border: none; padding: 0px; /* Adjust padding as needed */ text-align: left; /* Align text to the left */}
/* video hero */ .full-video {width: 100%; height: 80vh; z-index: -999 !important; overflow: hidden; background-position: center!important; background-repeat: no-repeat!important; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important;}
.full-video-src {width: auto; height: auto; min-width: 100%; min-height: 100%;}
.half-height-video {width: 100%; height: 50vh; z-index: -999 !important; overflow: hidden; background-position: center!important; background-repeat: no-repeat!important; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important;}
.half-height-video-src {width: auto; height: auto; min-width: 100%; min-height: 50%;}
.video-content {position: absolute; margin-top: -50vh; width: 100%; height: 50vh; display: flex; justify-content: center; align-items: center; text-align: center; background: rgba(0,0,0,0.3); color: #fff;}
.video-content h2 {color: #fff; font-size: 60px; line-height: 70px; margin-bottom: 30px;}
/* Cards */ .card {display: block; align-items: stretch; margin-bottom: 30px; height: 420px; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; text-decoration: none; transition: all .2s ease-in-out; box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);}
.card:hover {box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3); transform: scale(1.02);}
.card:hover .card-inner {background: rgba(0,0,0,0.4)}
.card-inner {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; height: 100%; background-color: rgba(0,0,0,0.2); transition: all .2s ease-in-out;}
.card h2 {font-size: 38px; line-height: 48px; color: #fff; margin-bottom: 30px;}
.red-block {background: #d5002c; color: #fff; padding: 5%;}
.red-block h3, .red-block p, .red-block p strong {color: #fff;}
.red-block p a {color: #fff;}
.red-block svg {width: 40px !important; height: auto; display: inline-block; fill: white; margin-right: 20px; transition: var(--transition);}
.green-block {background: #65B95B; color: #fff; padding: 5%;}
.green-block h3, .green-block p, .green-block p strong {color: #fff;}
.green-block p a {color: #fff;}
.green-block svg {width: 40px !important; height: auto; display: inline-block; fill: white; margin-right: 20px; transition: var(--transition);}
.space-above {margin-top: 50px;}
.grey-block {background: #e6e6e6; padding: 5%;}
.grey-block svg {display: inline-block; fill: black; margin-right: 20px; transition: var(--transition);}
.grey-block svg:hover {fill: var(--brand-green)}
.grey-block p {display: inline-block;}
.red {color: #d5002c;}
.spacing {margin-top: 40px !important;}
.booking-block {background: #e6e6e6; padding: 5%; margin: 30px 0px; text-align: center;}
.booking-block-btn {background: #d5002c; color: #fff; padding: 2% 5%; display: inline-block; text-align: center; margin-top: 15px; text-decoration: none;}
.booking-block-btn:hover {background: #10205c; color: #fff !important;}
.green {color: #65B95B;}
/* Content Layout */ 
img {width: 100%; height: auto;}
#page-main {margin: 60px 0;}
#page-intro {padding-top: 60px; text-align: center;}
#page-banner {background-color: var(--light-grey); padding: 60px 0 30px 0;}
#card-grid {padding-bottom: 60px;}
#page-banner .card {background-position: center center; background-size: cover; height: 320px; box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);}
#page-banner .card h2 {font-size: 24px; line-height: 34px;}
#page-banner .card:hover {transform: scale(1.05); box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);}
.center {text-align: center; display: block; margin-left: auto; margin-right: auto;}
.block-left {display: inline-block; width: 43%; height: auto; margin-right: 7%;}
.block-right {display: inline-block; width: 43%; height: auto; margin-left: 7%;}
   table {width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 10px 14px;
    text-align: left;
    vertical-align: middle;
  }

  th {
    background-color: #f0f4f8;
    font-weight: bold;
    color: #2b4b6f;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  tr:hover {
    background-color: #eef6ff;
  }

  td:first-child {
    font-weight: bold;
    width: 30%;
  }
#cms {padding: 60px 0;text-align: left;}
#cms .row {align-items: center; padding-bottom: 50px;}
#cms img {max-width: 100%; height: auto; margin: 0 auto;}
#cms h2 {margin-bottom: 30px;}
.styled-content img {max-width: 100%; height: auto; margin: 0 auto;}
.med-centred {display: block; width: 40%; height: auto; margin: 30px auto;}
@keyframes slideInLeft {from {transform: translateX(-100%); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
@keyframes slideInRight {from {transform: translateX(100%); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
.slide-in-left {animation: slideInLeft 1s ease-out forwards;}
.slide-in-right {animation: slideInRight 1s ease-out forwards;}
.hidden {opacity: 0;}
#blue-banner {margin: 0px; background: #ffda39; color: #10205c; padding: 50px 0px;}
#blue-banner h3 {color: #10205c; margin-bottom: 30px; text-align: center;}
#blue-banner p {color: #10205c; font-size: 22px; text-align: center;}
#blue-banner ul.paw-list {list-style: none; /* Remove default bullets */ padding: 0;}
#blue-banner ul.paw-list li {color: #10205c; font-size: 18px; line-height: 21px; padding-left: 30px; /* Add space for the paw icon */ position: relative;}
#blue-banner ul.paw-list li::before {content: "\f1b0"; /* Unicode for Font Awesome paw icon */ font-family: "Font Awesome 6 Free"; /* Specify the Font Awesome font family */ font-weight: 900; /* Use the solid version of the icon */ color: #10205c; /* Icon color */ position: absolute; left: 0; /* Position the icon to the left of the text */ top: 50%; transform: translateY(-50%); font-size: 16px; /* Adjust the icon size if needed */}
#bands {margin-top: 40px; margin-bottom: 40px;}
#bands img {width: 100px; height: auto; transition: transform .5s ease;}
#bands img:hover {transform: scale(1.1);}
#bands h3, #bands p {color: #fff;}
#bands h3 {margin-bottom: 0px !important;}
#bands .container {margin-top:-15px; padding: 40px 0px;}
.red-band {background: #e4211f;}
.yellow-band {background: #ffda39;}
.yellow-band h3, .yellow-band p {color: #10205c !important;}
.green-band {background: #5ebba7;}
.red-band .row, .yellow-band .row, .green-band .row {display: flex;align-items: center; /* Centers items vertically */}
#bands .row p a {text-decoration: none !important;}
.triangle {display: block; width: 40px; height: auto; margin: 30px auto; opacity: 0.5;}
.callout-inner {padding: 60px 0; display: flex; align-items: center; height: 100%; background: rgba(0, 0, 0, 0.3);}
#callout h2 {font-size: 38px; line-height: 48px; color: #fff; margin-bottom: 30px;}
.news-header {margin-top: 50px;}
.news {margin: 50px 0px 0px 0px;}
.news h3 a {text-decoration: none;}
.news img {width: 100%; height: auto; margin: 0px !important; padding: 0px !important;}
.news-item {display: flex; align-items: center; margin: 0px auto 30px auto; width: 80%;}
.news .r-arrow, .news .l-arrow {fill: #656565; cursor: pointer; position: absolute; z-index: 300; transition: all .2s ease-in-out; width: 32px; height: 32px;}
.news .l-arrow {left: 50px; top: 35%;}
.news .r-arrow {right: 60px; top: 35%;}
.news .r-arrow:hover {transform: translateX(10px);}
.news .l-arrow:hover {transform: translateX(-10px);}
/* Site Footer */ /* Container for the form elements */ .newsletter {border: #ccc solid 1px; padding: 50px; margin-top: 50px;}
.newsletter-form {display: flex; /* Align items horizontally */ align-items: center; /* Align items vertically */ gap: 10px !important; /* Space between items */}
/* Styling for the input fields */ .form-input {padding: 10px; border: 1px solid #ccc; font-size: 16px; box-sizing: border-box; flex: 1; /* Allow inputs to grow and take equal space */ width: 400px; /* Ensure a minimum width for inputs */ margin: 0px 15px 15px 0px;}
/* Placeholder styling */ .form-input::placeholder {color: #aaa;}
.form-input:focus::placeholder {color: transparent;}
.newsletter-btn {padding: 12px 40px; border: none; background: #ffda39; color: #10205c; font-size: 16px;}
.skyline {display: block; margin: 100px 0 0 0; padding: 0px; width: 100%; height: auto;}
#site-footer {padding: 60px 0; background: #000;}
.logo-footer {max-width: 200px; height: auto; margin-bottom: 20px;}
#site-footer h3 {color: #fff; font-size: 16px; margin-bottom: 15px; font-weight: bold;}
#site-footer p {color: #fff; font-size: 14px; line-height: 18px; font-weight: 100 !important;}
#site-footer p a {color: #fff; text-decoration: none !important;}
#site-footer ul {margin: 0; padding: 0; list-style: none; color: #fff;}
#site-footer ul li {font-size: 14px; line-height: 7px; margin-bottom: 0px;color: #fff !important;}
#site-footer ul li a {color: #fff !important; text-decoration: none; transition: var(--transition);}
#site-footer ul li a:hover {color: var(--dark-green);}
.accred {max-width: 75px; display: inline-block;}
.accred img {width: 100%; height: auto;}
.copyright {border-top: 1px #fff solid; padding-top: 30px; margin-top: 50px;}
.copyright p {font-size: 12px;}
.social {display: flex; margin-left: 17px;}
.social svg {fill: #fff; margin-right: 15px; transition: transform .5s ease;}
.social svg:hover {fill: #fff; transform: scale(1.1);}
.stories-social {margin: -20px 0px 30px 0px; display: flex; /* Enables flexbox layout */ width: 100%; justify-content: center !important; /* Centers items horizontally */ align-items: center !important; /* Centers items vertically (optional, if needed) */ gap: 10px; /* Optional: Adds space between the SVGs */}
.stories-social a {display: inline-block; /* Ensures anchors behave as inline-block for proper spacing */}
.stories-social svg {fill: #10205c; transition: transform .5s ease;}
.stories-social svg:hover {fill: #10205c; transform: scale(1.1);}
#page-hero {min-height: 20vh; background-position: center; background-repeat: no-repeat; background-size: cover !important; -webkit-background-size: cover !important; -moz-background-size: cover !important;}
#page-hero h1, #page-hero p {color: #fff;}
.hero-inner {min-height: 20vh; display: flex; text-align: center; justify-content: center; align-items: center;}
.generic {background-color: #10205c;}
.generic h1 {font-size: 40px;}
.hero-inner-coloured {min-height: 20vh;display: flex;text-align: left;justify-content: center;align-items: center; padding: 20px 0px;}
.hero-inner-coloured img {width: 100px; height: auto; display: block; margin: 0px auto;}
.almshouses {background-color: #5ebba7;;}
.charity-hub {background-color: #e4211f;}
.grant-giving {background-color: #ffda39; text-align: center;}
.grant-giving h1, .grant-giving p {color: #10205c !important; text-align: center;}
.hero-inner-coloured  h1 {font-size: 40px; line-height: 45px; margin-bottom: -10px;}
#page-hero .col-md-8 .row {display: flex; align-items: center; /* Centers items vertically */}
/* Form Styles */ label {font-weight: 600; margin-bottom: 10px;}
.wpcf7-list-item {margin: 0 !important;}
/* Blog  Layout */ .news-card {padding: 60px 0; border-bottom: 1px solid var(--light-grey);}
.news-card .btn {margin-top: 30px !important; display: inline-block;}
.date {color: rgba(17, 17, 17, 0.6);}
.news-card a {text-decoration: none;}
.post-img {display: block; width: 100%; height: 280px; background-repeat: no-repeat; background-position: center center; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);}
.post img {display: block; width: 70%; height: auto; margin: 30px auto;}
.sidebar {border-left: 1px solid var(--light-grey); padding: 0 30px; list-style: none;}
.sidebar ul {list-style: none !important; margin: 0; padding: 0;}
.sidebar ul li {padding: 5px 0;}
.sidebar a {color: var(--font-color); text-decoration: none; transition: var(--transition);}
.sidebar a:hover {color: var(--brand-green);}
.mid-aligned-content {display: block; width: 100%; max-width: 800px; height: auto; margin: 0px auto;}
.mid-aligned-content h2 {margin-top: 50px;}
/* Responsive Images */ .img-micro{display: block; width: 100%; max-width: 75px; height: auto; margin: 30px auto 30px auto;}
.img-sm{display: block; width: 100%; max-width: 300px; height: auto; margin: 30px auto 30px auto;}
.img-md{display: block; width: 100%; max-width: 500px; height: auto; margin: 30px auto 30px auto;}
.img-lg{display: block; width: 100%; max-width: 800px; height: auto; margin: 30px auto 30px auto;}
.img-full {display: block; width: 100%; height: auto; margin: 20px auto;}
.img-micro img, .img-sm img, .img-md img, .img-lg img, .img-full  img {width: 100%; height: auto;}
.accordion-menu a {display: block; padding: 10px 15px;}
.drop-down a {min-width: 90px;}
.drop-down-menu {display: block;margin-bottom: 5px;}
.menu-title {cursor: pointer;}
.menu-title {display:block;padding: 10px 15px;font-size: 20px;}
.activate {display: none; position: absolute; cursor: pointer; width: 100%; height: auto; margin: 0 0 0 -15px; opacity: 0;}
/* Skin */ .accordion-menu a, .drop-down-menu {background: #ffda39;}
.accordion-menu a:hover, .drop-down-menu:hover {background: #ffda39;}
.drop-down a {background: #fff;}
.drop-down a:hover {background: #fff;}
.accordion-menu  {background: #fff;}
:checked ~ .menu-title {background: #ffda39;}
.drop-down {max-height: 0;overflow: hidden;}
.drop-down p {color: #10205c; padding: 10px 15px;}
.drop-down p a {color: #10205c; display: inline; margin: 0px; padding: 0px;}
.drop-down p a:hover {color: #10205c; background: #87b46f;}
.menu-title {color: #10205c;}
.drop-down a {background: #ffda39;}
.activate:checked ~ .drop-down {max-height:600px;}
.drop-down, .menu a, .drop-down-menu {-webkit-transform: translateZ(0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
/* Responsive Breakpoints */ @media (max-width: 1200px) {.site-menu ul, #topbar ul {font-size: 13px; font-weight: 100;}
.form-input {width: 300px; /* Ensure a minimum width for inputs */}
@media (max-width: 992px) {#topbar {display: none;}
.cta-grant {}
  .site-menu {background-color: var(--brand-green); position: fixed; height: 100vh; width: 50%; top: 94px; right: 0; padding: 60px 60px 120px 60px; transform: translateX(100%); overflow-y: auto; z-index: 99999;}
  .site-menu ul {flex-direction: column; align-items: flex-start;}
  .site-menu ul li {margin: 10px 0; margin-right: 0;}
  .site-menu ul li a {color: #fff;}
 .site-menu ul li a:hover {color: #B7B7B7;}
.menu-grant {background: #ffda39; display: block;}
.menu-grant a {color: #10205c !important; padding: 0px 10px 0px 10px;}
.desktop {display: none;}
.mobile {display: block;}
#site-footer {text-align: center;}
.site-logo {margin-bottom: 0px !important;}
#site-footer h3 {margin-top: 30px;margin-bottom: 0px !important;}
.copyright {display: none;}
.parent {background-image: url('https://www.warrenwoodkennelsandcattery.co.uk/wp-content/uploads/2025/01/lower-slider-mobile.jpg'); /* Replace with mobile image */ justify-content: center; /* Center content horizontally */ align-items: flex-end; /* Align content at the bottom */}
            /* Make the child div full width and positioned at the bottom 40% */             .child {width: 100%; /* Full width on mobile */ height: 40%; /* Takes up bottom 40% of parent */}
.parent .credit {left: 50%; transform: translateX(-50%); /* Center horizontally */ text-align: center; bottom: 0px;}
.generic h1 {font-size: 30px;}
.form-input {width:100%; /* Ensure a minimum width for inputs */}
.news-item {display: block; width: 80%;}
.news-item h3 {margin-top: 20px;}
.news .l-arrow, .news .r-arrow {display: none !important;}
.news .slick-dots {list-style: none; width: 100%; display: flex; justify-content: center; position: absolute; margin-top: -40px; z-index: 300;}
.news .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 10px; height: 10px; padding: 5px; margin: 0 10px; border-radius: 50%; cursor: pointer; color: transparent; border: 0; outline: none; background: #656565; transition: all .2s ease-in-out; text-align: center;}
}
@media (min-width: 992px) {}
@media (max-width: 768px) {#site-header {flex-direction: column; align-items: center; padding: 30px 0;}
  #site-header img {margin: 0 auto 20px auto; /* center logo and add spacing below */}
  .phone {text-align: left; align-self: flex-start; margin-left: 30px; width: 100%; font-size: 16px;}
.slide-one-mobile {background: url('http://rossett.onourserver.co.uk/wp-content/uploads/2025/08/reception-supplied-mob.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.slide-two-mobile {background: url('http://rossett.onourserver.co.uk/wp-content/uploads/2025/06/slide-two-mobile.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.slide-one, .slide-two {display: none;}
.slide {padding: 0; align-items: flex-end; /* align content at bottom of slide */ min-height: 100vh; /* make full height on mobile */}
  .slide-block {max-width: 80%; margin: 0 auto 40px auto; /* center + bottom margin */ padding: 30px 20px; background-color: rgba(0, 0, 0, 0.4); /* keep semi-transparent */ text-align: center; align-items: center;}
  .slide h2 {font-size: 26px; line-height: 34px; text-align: center;}
  .slide p {font-size: 16px; text-align: center; margin-top: 15px; margin-bottom: 20px;}
  .cta {font-size: 16px; max-width: 100%; justify-content: space-between; padding: 12px 16px;}
  .cta-text {text-align: left; font-size: 16px;}
  .cta-icon {width: 26px; height: 26px; font-size: 14px; line-height: 24px;}
  .form-left,   .form-right {width: 100%;}
.band-content {flex-direction: column; align-items: center; text-align: center; gap: 0;}
  .black-band .cta {margin-bottom: 15px; /* ✅ Space between CTA and phone */}
  .phone-wrap {display: inline-block; text-align: center;}
  .phone-number {display: inline-block; position: relative; z-index: 1; padding-bottom: 2px;}
  .phone-underline {display: block; height: 3px; background-color: #FFD700; width: 100%; max-width: 150px; /* ✅ Optional: limit line width */ margin: 0 auto; position: relative; top: -2px; /* Slight vertical alignment if needed */}
.hero-inner-coloured img {width: 60px; margin: 10px auto 20px auto;}
.hero-inner-coloured {text-align: center;}
  .video-content h2,   .full-video-src {display: none;}
  .site-menu {top: 72px; width: 100%;}
  h1 {font-size: 32px; line-height: 42px;}
  .card-tall {height: 420px;}
.invisible-table {display: block; /* Make the table a block element on mobile */}
  .invisible-table td {display: block; /* Make each <td> block-level on mobile */ width: 100%; /* Make each cell take up the full width */ padding: 0; /* Adjust padding for readability */}
  .invisible-table tr {display: block; /* Stack each row vertically on mobile */ margin-bottom: 10px; /* Add space between rows */}
  #cms {text-align: center;}
  #cms img {margin-top: 30px;}
  .news-card h2 {margin-top: 30px;}
.card h2 {font-size: 30px; line-height: 40px;}
  .sidebar {display: none;}
.drop-down p {font-size: 14px; line-height: 16px; margin: 0px 20px 10px 20px; padding: 0px;}
.block-left, .block-right {display: block; width: 100%; float: none; margin-left: 0px; margin-right: 0px;}
.social {justify-content: center; margin-left: 0px;}
}
}

/* === Meet The Team template styles === */
#meet-team-hero{min-height:50vh;display:grid;grid-template-columns:1fr 1fr;width:100%}
#meet-team-hero .hero-left{
  background:#2b2b2b;
  display:flex;
  align-items:center;      /* vertical centring */
}
#meet-team-hero .hero-left .hero-content{
  max-width: 80%;
  padding:40px 0% 0px 20%;
}
#meet-team-hero .hero-left h2, #meet-team-hero .hero-left h1,
#meet-team-hero .hero-left p,
#meet-team-hero .hero-left .cta{
  color:#fff;
  text-align:left;
}
#meet-team-hero .hero-left h2{color:#fff;margin-bottom:10px}
#meet-team-hero .hero-left p{color:#fff;margin:10px 0 20px 0}
#meet-team-hero .hero-right{background-position:center;background-repeat:no-repeat;background-size:cover}
@media (max-width:768px){
  #meet-team-hero{grid-template-columns:1fr;min-height:100vh}
  #meet-team-hero .hero-right{min-height:45vh}
#meet-team-hero .hero-left .hero-content{
  max-width: 100%;
  padding:40px 0px;
}

}

.section-white{background:#fff;padding:60px 0}
.section-team{background:#f2f2f2;padding:60px 0}

/* === End Meet The Team template styles === */