/*
Theme Name: Better-Birmingham
Theme URI: https://1stfold.com/
Author: Rameez
Author URI: https://www.linkedin.com/in/connectwithrameez/
Description: A custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{font-size: 20px; color: #000; line-height: 24px; padding: 0; margin: 0; font-family: "Poppins", sans-serif;}
a{text-decoration: none; color: #000;}
a:hover{color:#AB248D;}
.container{ max-width: 1200px; margin: 0 auto;}
.site-header{ padding: 20px 0;}
.link-btn svg{width:inherit!important;}
.menu {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.menu li {
  display: inline-block;
  margin: 0 20px;
  font-size:22px; font-weight:400;
}
.menu li:first-child {margin-left:0px;}
.menu li:last-child {margin-right:0px;}
.current-menu-item a {color:#C01A80; font-weight:bold;}

.menu li.btn a{ padding: 10px 23px; background: #F37624; color: #fff;}
.menu li.btn a:hover{background: #000;}
.banner-main h1{position:relative; padding-bottom:37px;}
.banner-main h1:after{content: ""; position: absolute; left: 50%; bottom: 0; height: 6px; width: 65%; background: #C01A80; transform: translateX(-50%); transform: translateX(-50%) scaleX(0); transform-origin: center; animation: lineExpand 2s ease forwards;}

@keyframes lineExpand{
    from{
        transform: translateX(-50%) scaleX(0);
    }
    to{
        transform: translateX(-50%) scaleX(1);
    }
}

.banner-main h2{position:relative; padding-bottom:20px; z-index: 1;}
.banner-main h2:after{content: ""; position: absolute; right: 40%; bottom: 0; width: 151px; height: 19px; background-image: url('https://betterbirmingham.co.uk/wp-content/uploads/2026/05/bursh-line.svg'); background-repeat: no-repeat; background-position: center; transform: translateX(50%); z-index: -1;  transform: translateX(50%) scaleX(0);
    transform-origin: left center;
    animation: brushReveal 4s ease forwards;  animation-delay: 1s;}
@keyframes brushReveal{
    from{
        transform: translateX(50%) scaleX(0);
        opacity: 0;
    }
    to{
        transform: translateX(50%) scaleX(1);
        opacity: 1;
    }
}


/* Basic toggle button styling */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001; /* Ensure above menu */
}

.menu-toggle .bar {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #000;
  margin: 5px 0;
  transition: 0.4s;
}

.flex-box{ display: flex; align-items: center; justify-content: space-between;}
.copy-right-box{ font-size: 14px; color: #000; font-weight: 400; padding: 20px 0; margin: 20px 0 0; border-top: 1px solid #DADADA; text-align: center; display:flex; justify-content:space-between;}

.footer-nav-box{ display: flex; align-items: center; justify-content: space-between;}
.footer-menu{ padding: 0; margin: 0;}
.footer-menu li{ list-style: none; display: inline-block; margin-right: 40px;}
.footer-menu li:last-child{margin-right:0;}
.list-style-perp ul{padding: 0; margin: 0 0 0 20px; position:relative;}
.list-style-perp ul::after{position:absolute; left:-18px; top:0; content:""; height:100%; width:1px; background:#DADADA;}
.list-style-perp.sm ul::after{ left:-15px;}
.list-style-perp ul li{
    list-style: square;
	position: relative;
    z-index: 10;
	margin-bottom:12px;
}
.list-style-perp ul li:last-child{margin-bottom:0;}
.list-style-perp ul li::marker{color:#C01A80;}
.list-style-perp.orange ul li::marker{color:#F3931F;}
.commentary-acc details[open] .e-n-accordion-item-title{background-color:#C01A80!important;border-radius: 20px 20px 0 0;}
.wpcf7 .col-6{float:left; width:48%; margin:0 1%; margin-bottom:20px;}
.wpcf7 .col-12{width:100%; margin-bottom:20px;}
.wpcf7 .col-12:last-child{margin-bottom:0;}
.wpcf7 label{
	width:100%;
	display:block;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    font-weight: 600;
}
.wpcf7 input,.wpcf7 textarea{
    width: 100%;
    padding: 7px 20px;
    border-radius: 6px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.30);
    font-size: 12px;
    line-height: 24px;
    color: #fff;
    font-weight: 400;
	margin-top:6px;
}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{font-size: 12px;
    line-height: 24px;
    color: #fff;
    font-weight: 400;}
.wpcf7 textarea{height:100px;}
.wpcf7 p{padding:0; margin:0;}
.wpcf7 input[type="submit"]{
    background:url(/wp-content/uploads/2026/05/submit-bg.png)no-repeat top right #F3931F;
    font-size: 18px;
    line-height: 35px;
	font-weight:700;
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 3px 25px 2px 12px;
    max-width: 248px;
    margin: 0 auto;
    display: block;
	cursor:pointer;
}
.wpcf7 input[type="submit"]:hover{background:url(/wp-content/uploads/2026/05/submit-bg-hov.png)no-repeat top right #fff; color:#C01A80;}
.wpcf7-not-valid-tip {color: #fff;}
.site-footer{margin-top:80px;}
.footer-nav a{ font-size:18px; font-weight:400; color:#000;}
.footer-nav a:hover{color:#F3931F;}
.footer-social-box a:hover svg path{fill:#C01A80;}
.wpcf7-response-output{
    font-size: 16px;
    text-align: center;
}

.title-bot-right-line h2:after{content: ""; position: absolute; left: 0%; right:auto; bottom: 0; width: 151px; height: 19px; background-image: url('https://betterbirmingham.co.uk/wp-content/uploads/2026/05/bursh-line.svg'); background-repeat: no-repeat; background-position: center; transform: translateX(50%); z-index: -1;  transform: translateX(50%) scaleX(0);
    transform-origin: left center; z-index:1;
    animation: brushReveal2 4s ease forwards;  animation-delay: 1s;}
.title-bot-center-line h2:after{content: ""; position: absolute; right:50%; bottom: 0; width: 151px; height: 19px; background-image: url('https://betterbirmingham.co.uk/wp-content/uploads/2026/05/bursh-line.svg'); background-repeat: no-repeat; background-position: center; transform: translateX(50%); z-index: -1;  transform: translateX(50%) scaleX(0);
    transform-origin: left center; z-index:1;
    animation: brushReveal 4s ease forwards;  animation-delay: 1s;}
@keyframes brushReveal2{
    from{
        transform: translateX(0%) scaleX(0);
        opacity: 0;
    }
    to{
        transform: translateX(0%) scaleX(1);
        opacity: 1;
    }
}

.site-header.sticky-header{
      position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 99%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding:0.5%;
}
.logged-in .site-header.sticky-header{top:32px;}
.site-header.sticky-header img{
    max-width: 150px;
    height: auto;
}
.powered-by a{color:#F3931F;}
.powered-by a:hover{color:#000;}
.coun-link:hover p.elementor-icon-box-description{color:#fff!important;}
ul.wards-list{
	list-style: circle;
    padding: 0;
    margin: 0 auto;
    max-width: 1100px;
    display: grid;
    grid-template-rows: repeat(24, auto);
    grid-auto-flow: column;
}
ul.wards-list li{margin-bottom: 10px;}
ul.wards-list li:hover {color: #C01A80;}
@media (max-width:1200px) {
.site-header {padding: 20px;}
.site-footer {
    margin-top: 40px;
	padding:0 20px;
}
}
@media (max-width:1024px) {
	.site-header.sticky-header{
		position: relative;}
	.footer-menu li {margin-right: 20px;}
	.footer-nav a {font-size: 16px;}
	.copy-right-box {font-size: 12px;}
	.footer-logo img{ max-width:150px;}
.menu-toggle {display: block; margin:0 auto; margin-right:0;}
.nav-box{ width:100%;}

  .main-navigation .menu {
    display: none;
    flex-direction: column;
  }

  .main-navigation .menu.active {
    display: flex;
  }
	.menu-toggle {
    display: block;
  }

  .main-navigation .menu {
    display: none;
    flex-direction: column;
    background: #fff; /* Optional: background for dropdown */
    position: absolute;
    top: 125px; /* adjust based on header height */
    right: 0;
    left: 0;
    z-index: 1000;
  }

  .main-navigation .menu.active {
    display: flex;
  }

  /* Transform hamburger to cross when active */
  .menu-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(7px, 6px);
  }

  .menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
	#primary-menu li a {
        padding: 15px;
        display: block;
		font-size: 14px;border-bottom: 1px solid #c4c4c4;}
	.footer{ padding:30px 10px;}
#primary-menu li ul {
    position: relative;
    top: auto;
    left: 0;
    width: 100%;
}
	.arrow-down{ float:right;}
	.sub-menu {
    display: none;
  }

  .sub-menu.open {
    display: block!important;
  }

  .arrow-down {
    cursor: pointer;
    display: inline-block;
  }
	.arrow-down.active img {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.banner-main h1 {padding-bottom: 20px;}
.menu li:first-child { margin-left: 20px;}
}
@media (max-width:767px) {
ul.wards-list {
        grid-template-rows: none;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
    }
ul.wards-list li{
	margin: 0 5px 3px 5px;
	padding-right:5px;
	}
.footer-nav-box {
    display: block;
    text-align: center;
}
.banner-main h1 { padding-bottom: 10px; }
.footer-menu li {margin-right: 8px;}
.footer-nav a {font-size: 12px;}
.copy-right-box {
    font-size: 10px;
    padding: 10px 0;
    margin: 10px 0 0;
    display: block;
}
}