/*-----------------------------------------------------------------------------------
    Template Name: Polite - Political HTML Template 
    Description: This is html5 template
    Author: power-boosts
    Version: 1.0.3


-----------------------------------------------------------------------------------
    
    [Table of contents] 
	
    1. Template default css
    2. Header area
    3. Search / #search
    4. Main menu
    5. Slider area
    6. service area
    7. Events area
    8. Counter area
    9. Team area
    10. Timeline area
    11. Latest news
    12. Contact area
    13. Footer area
    14. Scrollup
    15. Home page two
    16. Gallery
    17. About page
    18. Breadcrumbs area 
    19. Events details page
    20. Event details
    21. Team page
    22. Blog page
    23. Blog siderbar
    24. Blog details
    25. Contact page
    26. Donate page
    27. Events page
    
    
    
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  1. Template default css
/*----------------------------------------*/
/* Google Fonts */

@import 'https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,500,600,700';
/* Marco Martins campaign type: Oswald (condensed bold statement) + Nunito Sans (body) */
@import 'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Nunito+Sans:wght@400;500;600;700;800&display=swap';

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}
.row {
	margin-right: calc(var(--bs-gutter-x) * -.6);
	margin-left: calc(var(--bs-gutter-x) * -.6);
}
.row > * {
	padding-right: calc(var(--bs-gutter-x) * .6);
	padding-left: calc(var(--bs-gutter-x) * .6);
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	padding-right: var(--bs-gutter-x,.90rem);
	padding-left: var(--bs-gutter-x,.90rem);
}
:root {
    scroll-behavior: unset;
    /* Marco Martins campaign brand palette — BLUE + RED, the hex values Shirley
       supplied with the 2026-09 brochure markup (blue #1d2858, red #af1f2d).
       These REPLACED the green+black scheme; if you find #8ec541 anywhere it is
       a leftover.

       NOTE: the variable names are historical and do NOT describe their values.
       They are kept because 200+ rules reference them. Read them as:
         --mm-primary / --mm-cyan-deep  = campaign BLUE (+ darker hover blue)
         --mm-azure / --mm-primary-dark / --mm-ink = campaign blue-black ink
         --mm-accent / --mm-accent-dark = campaign RED (+ darker hover red)
         --mm-green-bright*             = alias of RED, the old "fill" colour

       THE CONTRAST RULE INVERTED WITH THIS CHANGE. The old green was LIGHT, so
       every green fill carried BLACK text. Blue and red are both DARK, so every
       brand fill now carries WHITE text ("reverse type", in Shirley's markup):
         blue + white = 14.03:1 PASS   |  blue + black = 1.35:1 FAIL
         red  + white =  6.87:1 PASS   |  red  + black = 2.75:1 FAIL
         blue text on white = 14.03:1  |  red text on white = 6.87:1
       Never put black text on a blue or red fill, and never put red on blue
       (2.04:1) — that pairing is why the markup says red buttons sit on white. */
    --mm-primary: #1d2858;        /* campaign blue - primary */
    --mm-primary-dark: #12193a;   /* deeper blue - dark sections */
    --mm-azure: #1d2858;          /* campaign blue (alias) */
    --mm-cyan-deep: #172048;      /* deeper blue for hover on blue */
    --mm-accent: #af1f2d;         /* campaign red - solid CTAs, white text */
    --mm-accent-dark: #8f1924;    /* deeper red hover */
    --mm-ink: #12193a;            /* blue-black body ink */
    /* Alias kept so the 34 rules naming "green" keep working. It is RED now:
       these are the solid brand fills, and they carry WHITE text. */
    --mm-green-bright: #af1f2d;
    --mm-green-bright-dark: #8f1924;
}

html,
body {
    height: 100%;
    font-size: 14px;
}
.floatleft {
    float: left
}
.floatright {
    float: right
}
.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px
}
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px
}
.aligncenter {
    display: block;
    margin: 0 auto 15px
}
a:focus {
    outline: 0px solid
}
img {
    max-width: 100%;
    height: auto
}
.fix {
    overflow: hidden
}
p {
    margin: 0 0 15px;
    line-height: 24px;
    color: #333;
}
p:last-child {
    margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    font-family: 'Raleway', sans-serif;
}
a {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-decoration: none;
}
a:hover {
    color: var(--mm-primary-dark);
    text-decoration: none;
}
a:active,
a:hover {
    outline: 0 none;
}
a:focus,
a:hover {
    text-decoration: none;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0
}
.clear {
    clear: both
}
body {
    font-family: 'Raleway', sans-serif;
    color: #333333;
    background: #fff none repeat scroll 0 0;
}
.vbox-close {
    right: 15px;
    font-size: 40px;
}
.vbox-next {
    right: 35px;
}
/*************************
    Padding top
*************************/

.ptb-80 {
    padding: 80px 0;
}
.ptb-95 {
    padding: 95px 0;
}
.ptb-70 {
    padding: 70px 0;
}
.ptb-120 {
    padding: 120px 0;
}
.ptb-140 {
    padding: 140px 0;
}
.pt-80 {
    padding-top: 80px;
}
.pt-160 {
    padding-top: 160px;
}
.pt-120 {
    padding-top: 120px;
}
.pb-115 {
    padding-bottom: 115px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-160 {
    padding-bottom: 160px;
}
.pb-30 {
    padding-bottom: 30px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pb-70 {
    padding-bottom: 70px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pb-90 {
    padding-bottom: 90px;
}
.pb-100 {
    padding-bottom: 100px;
}
.mb-80 {
    margin-bottom: 80px;
}
.mb-50 {
    margin-bottom: 50px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mtb-20 {
    margin: 20px 0;
}
/*************************
    bg-color
*************************/

.bg-black {
    background-color: #2b2c31;
}
.bg-gray {
    background-color: #f6f6f6;
}
.bg-gray-2 {
    background-color: #9A9A98;
}
.bg-white {
    background-color: #fff;
}
/*----- 2. Header area ------*/

.header-area {
    display: block;
}
.header-area .logo {
  padding: 33px 0 0;
  transition: all 0.3s ease 0s;
}
.header-area .header-search {
    padding: 39px 0 37px;
    transition: all 0.3s ease 0s;
}
.header-button > a {
    background-color: var(--mm-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 13px 35px;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
.header-button > a:hover {
    background-color: #333;
}
.header-button.floatright {
    margin-left: 45px;
}
/*----------------------------------------
    3. Search / #search
----------------------------------------*/

.header-search .search {
    color: #333333;
    cursor: pointer;
    font-size: 17px;
    padding: 15px 0 15px 35px;
}
.search-top {
    margin-left: 10px;
}
#search {
    padding-top: 0;
    position: relative;
    width: auto;
    z-index: 99999;
}
#search input {
    border: 1px solid #ddd;
    border-radius: 0;
    color: #333;
    font-size: 14px;
    height: 38px;
    margin-right: 35px;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#search:hover input {
    opacity: 1;
    padding: 10px 16px;
    width: 260px;
}
.header-search .form-control:focus {
    border-color: #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0 none;
}
/*------   header top    -*/

.header-top {
    background-color: #f6f6f6;
    padding: 15px 0;
}
.header-social li {
    display: inline-block;
}
.header-social li {
    display: inline-block;
    padding-left: 20px;
}
.header-social li:first-child {
    padding-left: 0px;
}
.header-social li a {
    color: #333;
    font-size: 15px;
}
.header-social li a:hover {
    color: var(--mm-primary);
}
.header-top-info ul li {
    float: left;
    padding-right: 20px;
}
.header-top-info ul li a {
    color: #333;
}
.header-top-info ul li a:hover {
    color: var(--mm-primary);
}
.header-top-info ul li a i {
    padding-right: 10px;
    font-size: 15px;
    color: #333;
}
/*----------------------------------------
    4. Main menu
----------------------------------------*/

.main-menu ul li {
    float: left;
    margin-left: 50px;
    padding: 40px 0 38px;
    position: relative;
    transition: all 0.3s ease 0s;
}
.main-menu ul li a {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
}
a.menu-icon i {
    color: #333;
    font-size: 13px;
    padding-left: 4px;
}
.main-menu ul li ul.submenu-mainmenu li {
    float: inherit;
    margin-left: 0;
    padding: 0px 0 15px;
}
.main-menu ul li ul.submenu-mainmenu li:last-child {
    padding: 0 0 0px;
}
.header-bottom.stick-h2.stick {
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4);
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    transition: all .3s ease 0s;
}
/*--- Dropdown menu --*/

.main-menu ul li ul.submenu-mainmenu {
    background-color: #fff;
    border-top: 1px solid var(--mm-primary);
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    font-weight: 500;
    left: 0;
    margin: 0;
    padding: 30px 22px;
    position: absolute;
    text-align: left;
    top: 100%;
    -webkit-transform-origin: center top 0;
    -ms-transform-origin: center top 0;
    transform-origin: center top 0;
    -webkit-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
    width: 200px;
    z-index: -99;
    -webkit-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    visibility: hidden;
}
.main-menu ul li:hover ul.submenu-mainmenu {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    visibility: visible;
    z-index: 99999;
}
.main-menu ul li:hover a {
    color: var(--mm-primary);
}
.main-menu ul li:hover ul li a {
    color: #333;
}
.main-menu ul li ul li a {
    font-weight: 500;
    text-transform: capitalize;
    display: block;
}
.main-menu ul li:hover ul li a:hover {
    color: var(--mm-primary);
}
/*--- Mega menu --------*/

.main-menu nav ul li ul {
    padding: 30px 22px;
}
.main-menu nav ul li .mega-menu ul {
    float: left;
    width: 50%;
}
.main-menu nav ul li .mega-menu li {
    margin-left: 0;
    padding: 0;
    width: 100%;
    padding-bottom: 15px;
}
.main-menu nav ul li .mega-menu li:last-child {
    padding-bottom: 0px;
}
.main-menu nav ul li .mega-menu ul li a {
    color: #333;
    display: block;
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
}
.main-menu nav ul li .mega-menu {
    background: #fff none repeat scroll 0 0;
    border-top: 1px solid var(--mm-primary);
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    transform: scaleY(0);
    transform-origin: 0 0 0;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    z-index: 99999;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    font-weight: 500;
    width: 470px;
}
.main-menu nav ul li:hover .mega-menu {
    opacity: 1;
    transform: scaleY(1);
    visibility: visible;
}
.main-menu nav ul li .mega-menu li a.mega-menu-title {
    border-bottom: 1px solid #333;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    text-transform: uppercase;
    width: 170px;
}
.stick-h2.stick.header-area .main-menu ul li ul.mega-menu li {
    padding: 0;
}
.main-menu nav ul li .mega-menu.shortcode ul {
    float: left;
    width: 33.333%;
}
.home-2.stick-h2.stick .main-menu ul li .mega-menu ul li {
    padding: 0px 0 15px;
}
.home-2.stick-h2.stick .main-menu ul li .mega-menu ul li:last-child {
    padding: 0px 0 0px;
}
.main-menu nav ul li .mega-menu.shortcode2 {
    width: 900px;
    margin-left: -101px;
}
.main-menu nav ul li .mega-menu.shortcode2 ul {
    float: left;
    width: 25%;
}
.an-si .preview-2 .nivo-controlNav {
    bottom: 0;
    left: 49%;
    position: absolute;
    z-index: 91;
}
/*---------------------------------------
    5. Slider area
----------------------------------------*/

.slide-all {
    display: inline-block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
h3.title5 {
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: 'Lora', serif;
}
h3.title5.moment {
    color: #fff;
}
h1.title6 {
    color: #fff;
    font-size: 65px;
    font-weight: 700;
    font-family: 'Lora', serif;
}
a.min1 {
    border: 1px solid #fff;
    color: #fff;
    font-family: "Lora", serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
}
a.min1:hover {
    color: #fff;
    border: 1px solid var(--mm-primary);
    background-color: var(--mm-primary);
}
.layer-3 {
    margin-top: 38px;
}
.slider-main-area:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9;
    background-color: #000;
    opacity: .1;
}
.slider-main-area {
    position: relative;
    clear: both;
}
.nivo-caption {
    z-index: 999;
}
.nivo-directionNav a {
    z-index: 99999;
}
.nivo-controlNav {
    display: none;
}
/*----------------------------------------
   6. service area
----------------------------------------*/

.btn-icon > p {
    margin-bottom: 0;
}
.section-title > h1 {
    color: #333333;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    line-height: 28px;
}
.support-area .section-title > h1 {
    color: #fff;
    text-transform: capitalize;
}
.support-area .section-title > h1::before {
    right: 42%;
    width: 70px;
}
.support-area .section-title > h1::after {
    left: 42%;
    width: 70px;
}
.section-title > h1::before {
    background: #ddd none repeat scroll 0 0;
    bottom: -37px;
    content: "";
    height: 1px;
    position: absolute;
    right: 39%;
    width: 101px;
}
.section-title > h1::after {
    background: #eaeaea none repeat scroll 0 0;
    bottom: -37px;
    content: "";
    height: 1px;
    left: 39%;
    position: absolute;
    width: 101px;
}
.what-icon i {
    color: #ddd;
    margin-top: 9px;
    font-size: 14px;
}
.what-icon {
    margin-bottom: 20px;
}
.what-top > p {
    padding: 0 25%;
}
.what-top > p {
    color: #333;
    font-size: 13px;
    line-height: 24px;
    padding: 0 25%;
    margin-bottom: 0;
}
.what-bottom {
    margin-top: 30px;
}
.then-icon > a {
    background-color: #fff;
    border-radius: 100%;
    color: #a7a7a7;
    display: inline-block;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 60px;
}
.btn-icon {
    background-color: #F6F6F6;
    display: inline-block;
    padding: 15px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.what-bottom:hover .btn-icon {
    background-color: var(--mm-primary);
}
.what-bottom:hover a,
.what-bottom:hover h3 {
    color: var(--mm-primary);
}
.mission-text > h3 {
    color: #333;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 28px;
    position: relative;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.mission-text > h3::before {
    background: #ccc none repeat scroll 0 0;
    bottom: -22px;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 50px;
}
.what-bottom:hover h3::before {
    background: var(--mm-primary) none repeat scroll 0 0;
}
.what-bottom > p {
    color: #333;
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 0;
    margin-top: 10px;
    padding: 0 29px;
}
.what-bottom.decrease {
    margin-top: 45px;
}
/*----------------------------------------
    Support area
----------------------------------------*/

.support-area {
    position: relative;
}
.support-area {
    background-image: url("img/bg-img/bg1.jpg");
}
.support-area::after {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
.support-all {
    position: relative;
    z-index: 999;
}
.support-all > h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 38px;
}
.support-all > p {
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    font-weight: 500;
    padding: 0 164px;
}
.support-text {
    margin-top: 50px;
}
.donet-dollar li {
    display: inline-block;
    margin: 0 10px;
}
.support-all .donet-dollar a {
    border: 1px solid #fff;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 44px;
    text-transform: uppercase;
}
.support-text a {
    background-color: var(--mm-primary);
    border: 1px solid var(--mm-primary);
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 30px;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
}
.support-all .support-text a:hover {
    border: 1px solid #fff;
    color: #333;
    background-color: #fff;
}
.support-all .donet-dollar a:hover {
    border: 1px solid var(--mm-primary);
    background-color: var(--mm-primary);
}
/*----------------------------------------
    7. Events area
----------------------------------------*/

.president .col-md-4 {
    width: 100%;
}
.president.indicator-style.owl-carousel .owl-nav button.owl-prev {
    right: 103%;
}
.president.indicator-style.owl-carousel .owl-nav button {
    top: 50%;
    transform: translateY(-50%);
}
.president.indicator-style.owl-carousel:hover .owl-nav button {
    opacity: 1;
}
.what-top > p.up {
    padding: 0 27%;
}
span.published i {
    color: var(--mm-primary);
    font-size: 15px;
    padding-right: 13px;
}
span.published {
    color: var(--mm-primary);
    font-size: 15px;
    font-weight: 500;
}
.event-text > h3 {
    margin: 0px 0 5px;
}
.event-text > h3 a {
    color: #333;
    font-size: 18px;
    font-weight: 600;
}
.event-text > h3 a:hover {
    color: var(--mm-primary);
}
span.published2 i {
    color: #909090;
    font-size: 12px;
    padding-right: 6px;
}
.published2.comment-left {
    border-left: 2px solid #909090;
    padding-left: 11px;
}
.published2,
.published2 a {
    margin-right: 11px;
    color: #333;
    font-size: 12px;
}
.published2 a:hover {
    color: var(--mm-primary);
}
.event-text > p {
    font-size: 13px;
    line-height: 24px;
    margin-top: 15px;
}
.event-text > a {
    color: #333;
    font-size: 13px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.event-text > a:hover {
    color: var(--mm-primary);
}
.president {
    display: block;
    margin-bottom: 30px;
}
.event-icon > a {
    background-color: #333333;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    height: 40px;
    line-height: 41px;
    text-align: center;
    text-transform: uppercase;
    width: 152px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.event-icon > a:hover {
    background-color: var(--mm-primary);
}
.event-icon > a i {
    padding-left: 16px;
    font-size: 14px;
}
.two-hover {
    display: block;
}
.event-img {
    overflow: hidden;
}
.event-img img {
    overflow: hidden;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100%;
}
.two-hover:hover .event-img img,
.event-text-img-all:hover .event-img img {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
/*----------------------------------------
    8. Counter area
----------------------------------------*/

.counter-all {
    display: block;
    width: 100%;
}
.counter-top {
    display: inline-block;
    float: left;
    text-align: center;
    width: 50%;
}
.counter-bottom {
    display: inline-block;
    margin-left: 15px;
    margin-top: 0px;
    width: 45%;
}
.counter-next h2 {
    color: #333;
    font-size: 14px;
    margin-bottom: 8px;
}
.counter-top {
    position: relative;
}
.counter-top::before {
    background: #b5b5b5 none repeat scroll 0 0;
    content: "";
    height: 2px;
    position: absolute;
    right: 0;
    top: 37px;
    -webkit-transform: rotate(-62deg);
    -ms-transform: rotate(-62deg);
    transform: rotate(-62deg);
    width: 61px;
}
.cnt-one {
    color: #333;
    font-size: 40px;
    font-weight: 500;
}
/*----------------------------------------
    9. Team area
----------------------------------------*/

.meet-area {
    background-color: #f6f6f6;
}
.meet-all {
    border: 1px solid #ddd;
    margin-bottom: 1px;
    position: relative;
}
.meet-text-all {
    bottom: -24%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    left: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    width: 100%;
    z-index: 9999;
}
.meet-all:hover .meet-text-all {
    bottom: 87px;
    opacity: 1;
}
.meet-icon-all {
    bottom: -30px;
    box-sizing: border-box;
    left: 0;
    opacity: 0;
    padding: 10px 0 4px;
    position: absolute;
    transition: all 0.3s ease-out 0s;
    width: 100%;
    z-index: 9;
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
}
.meet-all:hover .meet-icon-all {
    bottom: 0px;
    opacity: 1;
}
.product-content {
    background-color: #fff;
}
.meet-img,
.meet-img-four {
    position: relative;
    overflow: hidden;
}
.meet-img > a::before,
.meet-img-four > a::before {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    visibility: hidden;
    width: 100%;
    z-index: 1;
}
.meet-all:hover a::before,
.meet-all-four:hover a::before {
    opacity: 0.3;
    visibility: visible;
}
.meet-img a img {
    -webkit-filter: grayscale(100%);
    /* Chrome, Safari, Opera */
    
    filter: grayscale(100%);
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.meet-all:hover .meet-img a img {
    -webkit-filter: grayscale(0%);
    /* Chrome, Safari, Opera */
    
    filter: grayscale(0%);
}
.product-content {
    padding: 19px 0 15px;
}
.product-content > h3 {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
}
.product-content > p {
    font-size: 13px;
    margin: 0;
}
.meet-text > h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.meet-text > p {
    color: #fff;
    font-size: 13px;
}
.meet-icon {
    text-align: center;
    display: inline-block;
}
.meet-icon ul li {
    float: left;
}
.meet-icon ul li a {
    display: inline-block;
    height: 32px;
    width: 32px;
    line-height: 32px;
    text-align: center;
    margin-left: 10px;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    background-color: transparent;
}
.meet-icon ul li a:hover {
    background-color: #fff;
    color: var(--mm-primary);
}
.slider-active .col-md-3 {
    width: 100%;
    position: relative;
}
.slider-active.indicator-style.owl-carousel .owl-nav button.owl-prev {
    right: 102.5%;
}
.indicator-style.owl-carousel .owl-nav button {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #aaa;
    border-radius: 100%;
    color: #aaa;
    font-size: 18px;
    height: 44px;
    line-height: 37px;
    opacity: 0;
    position: absolute;
    right: -76px;
    text-align: center;
    top: 50%;
    transition: all 0.9s ease 0s;
    width: 44px;
    transform: translateY(-50%);
}
.slider-active.indicator-style.owl-carousel:hover .owl-nav button {
    opacity: 1;
}
.indicator-style.owl-carousel .owl-nav button:hover {
    color: var(--mm-primary);
    border: 1px solid var(--mm-primary);
}
.owl-carousel .owl-controls {
    margin-top: 0;
}

/*----------------------------------------
    10. Timeline area
----------------------------------------*/

.what-top.line {
    margin-bottom: 36px;
}
.timeline-area {
    background-color: #f6f6f6;
}
.timeline-wraper {
    width: 100%;
    position: relative;
}
.timeline-wraper::before {
    background: #dedede none repeat scroll 0 0;
    content: "";
    height: 95%;
    left: 50%;
    margin-left: -0.5px;
    position: absolute;
    top: 0;
    width: 1px;
}
.sin-timeline {
    float: right;
    z-index: 9;
    position: relative;
}
.sin-timeline:hover {
    z-index: 8;
}
.sin-timeline:nth-child(2n) {
    margin-top: 259px;
    margin-bottom: 70px;
}
.sin-timeline::before {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d2d2d2;
    border-radius: 50px;
    content: "";
    height: 11px;
    left: -6px;
    position: absolute;
    right: auto;
    top: 89px;
    width: 11px;
}
.sin-timeline:hover::before {
    border: 1px solid var(--mm-primary);
    background: var(--mm-primary);
}
.sin-timeline:nth-child(2n)::before {
    right: -6px;
    left: auto;
}
.sin-timeline::after {
    background: var(--mm-primary) none repeat scroll 0 0;
    bottom: 51%;
    content: "";
    height: 10000%;
    left: -0.5px;
    opacity: 0;
    position: absolute;
    width: 1px;
}
.sin-timeline:nth-child(2n)::after {
    left: auto;
    right: -0.5px;
}
.sin-timeline:hover::after {
    opacity: 1;
}
.timeline-date {
    color: #727272;
    display: block;
    font-size: 15px;
    letter-spacing: 0.3px;
    line-height: 14px;
    position: absolute;
    top: 87px;
}
.sin-timeline:hover .timeline-date {
    color: var(--mm-primary);
}
.timeline-content {
    border: 1px solid #e7e7e7;
    display: block;
    width: 100%;
}
.sin-timeline:nth-child(2n) .timeline-content {} .sin-timeline:nth-child(2n+1) .timeline-content {} .sin-timeline:nth-child(2n) .timeline-date {
    right: -100px;
}
.sin-timeline:nth-child(2n+1) .timeline-date {
    left: -100px;
}
.timeline-img {
    display: block;
    float: left;
    position: relative;
    width: 220px;
}
.timeline-img::before {
    border-color: transparent #333 transparent transparent;
    border-style: solid;
    border-width: 9px;
    content: "";
    height: 0;
    left: -18px;
    position: absolute;
    top: 84px;
}
.sin-timeline:nth-child(2n) .timeline-img::before {
    right: -18px;
    left: auto;
    border-left: 9px solid #333;
    border-right: 9px solid transparent;
}
.timeline-text > h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 19px;
}
.timeline-text > h3 a {
    color: #333333;
}
.timeline-text {
    overflow: hidden;
    padding: 20px 20px 19px;
    text-align: center;
}
.sin-timeline:nth-child(2n) .timeline-img {
    float: right;
}
.sin-timeline:nth-child(2n) {
    padding-right: 35px;
}
.sin-timeline:nth-child(2n+1) {
    padding-left: 35px;
}
.timeline-text > p {
    color: #727272;
    line-height: 24px;
    font-size: 13px;
}
.timeline-text a.read-more {
    color: #333333;
    font-size: 13px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.timeline-text a.read-more:hover {
    color: var(--mm-primary);
}
.timeline-img > img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.sin-timeline:hover .timeline-img > img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.read-icon {
    bottom: 0;
    display: inline-block;
    left: 47%;
    position: absolute;
    z-index: 999;
}
.re-icon {
    display: block;
    margin-left: 30px;
    font-size: 13px;
    color: #666;
}
.read-icon > a {
    color: #666;
    font-size: 13px;
}
/*----------------------------------------
    11. Latest news
----------------------------------------*/

.blog-container-inner {
    position: relative;
}
.visual-inner {
    padding-top: 20px;
}
.campaign-two .visual-inner {
    border: 1px solid #ddd;
    padding-top: 12px;
}
.home-2-blog {
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 10px;
}
.campaign-two .blog-meta {
    border-top: 1px solid #ddd;
    margin: 0;
    padding: 12px 20px 12px 20px;
}
.campaign-area .blog-container-inner .post-thumb a.tb-publish,
.campaign-area .blog-container-inner .post-format-area a.tb-publish,
.blog-area .blog-container-inner .post-thumb a.tb-publish,
.blog-area .blog-container-inner .post-format-area a.tb-publish,
.blog-two-area .blog-container-inner .post-thumb a.tb-publish,
.blog-two-area .blog-container-inner .post-format-area a.tb-publish,
.blog-two-details-area .blog-container-inner .post-format-area a.tb-publish,
.donate-top .blog-container-inner .post-format-area a.tb-publish {
    background: #636363 none repeat scroll 0 0;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    font-size: 18px;
    height: 48px;
    line-height: 48px;
    position: absolute;
    right: 8px;
    text-align: center;
    text-transform: uppercase;
    top: 8px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 48px;
}
.blog-title > a {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.team-area,
.team-details-area {
    clear: both;
}
.post-thumb img {
    width: 100%;
}
.post-for2 > img {
    width: 100%;
}
h3.blog-title {
    margin-bottom: 0;
}
.blog-meta {
    margin: 12px 0 8px;
}
.published3,
.published4 {
    color: #333;
    font-size: 12px;
}
.published3 i,
.published4 i {
    margin-right: 9px;
}
.blog-meta > span.published3 {
    padding-right: 11px;
}
.published4 {
    float: right;
}
.blog-content > p {
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 12px;
    margin-top: 10px;
}
.readmore > a {
    color: #333;
    font-size: 13px;
}
.blog-container-inner:hover .readmore a {
    padding-left: 37px;
}
.post-format-area {
    height: 262px;
}
.campaign-bottom {
    margin-top: 10px;
}
.blog-title > a:hover {
    color: var(--mm-primary);
}
.blog-container-inner:hover .post-format-area a.tb-publish,
.blog-container-inner:hover .post-thumb a.tb-publish {
    background-color: var(--mm-primary);
}
/*----------------------------------------
    12. Contact area
----------------------------------------*/

.subscribe-area.subscribe-contact {
    width: 100%;
    background-color: inherit;
}
.contact-area {
    background-color: #f6f6f6;
    float: left;
    width: 100%;
}
.di-na {
	margin: 0 0 20px;
}
.tnm-textarea {
	margin: 0 0 20px;
}
.all-contact-text .di-na input[type="text"],
.all-contact-text .tnm-textarea textarea,
.all-contact-text .di-na input[type="submit"],
.all-contact-text .di-na input[type="email"] {
    background-color: #fff;
    border: inherit;
    border-radius: 0px;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    height: 44px;
    outline: medium none;
    padding: 0 13px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100%;
    color: #333;
    font-size: 13px;
}
.all-contact-text .di-na input[type="submit"] {
    background-color: #333333;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
}
.all-contact-text .di-na input[type="submit"]:hover {
    background-color: var(--mm-primary);
}
.all-contact-text .tnm-textarea textarea {
    height: 172px;
    padding: 23px 20px;
}
/*----- Map ---*/

#hastech {
    height: 360px;
    width: 100%;
}
/*----------------------------------------
    13. Footer area
----------------------------------------*/

.social-area {
    background-color: #2a2a2a;
    clear: both;
}
.social-icon li {
    float: left;
}
.social-icon li a {
    color: #eee;
    font-size: 18px;
    display: inline-block;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    background-color: #404040;
    border-radius: 50%;
    margin-left: 20px;
}
.footer-top {
    padding: 30px 0;
}
.footer-social li {
    display: inline;
}
.footer-social li a {
    color: #fff;
    font-size: 18px;
    margin-right: 30px;
}
.footer-social li a:hover {
    color: var(--mm-primary);
}
/*----- Footer middle ------*/

.copyright-text.text-center > p {
    color: #fff;
    margin-bottom: 0;
    text-transform: capitalize;
    font-size: 13px;
}
.footer-top-left,
.footer-middle-right,
.footer-bottom-right {
    display: block;
    overflow: hidden;
}
.footer-top-left > p,
.footer-middle-right > p,
.footer-bottom-right > p {
    float: left;
}
.footer-middle {
    background-color: #333333;
}
.middle-text > h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 38px;
}
.middle-mgn > p {
    color: #fff;
    font-size: 13px;
    line-height: 24px;
    margin-bottom: 20px;
}
.footer-top-left,
.footer-middle-right,
.footer-bottom-right {
    color: #eee;
    font-size: 13px;
    margin-bottom: 10px;
}
.footer-icon {
  margin-bottom: 21px;
}
.footer-top-left p,
.footer-middle-right p,
.footer-bottom-right p {
    color: #ccc;
    font-size: 13px;
    margin-bottom: 0;
    margin-right: 14px;
}
.footer-top-left > a,
.footer-middle-right a,
.footer-bottom-right a {
    color: #fff;
}
.footer-top-left > a:hover,
.footer-middle-right a:hover,
.footer-bottom-right a:hover {
    color: var(--mm-primary);
}
.img-both {
    float: left;
    display: inline-block;
}
.text-both {
    padding-left: 125px;
}
.img-text-both {
    border-bottom: 1px solid #3f3f3f;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.img-text-both:last-child {
    border-bottom: none;
}
.text-both > p {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
}
.middle-text .published3 {
    color: #fff;
}
.twitter-one a {
    color: var(--mm-primary);
    float: left;
    font-size: 13px;
    margin: 0 15px 5px 0;
}
.twitter-one > p {
    color: #fff;
    font-size: 13px;
    margin-bottom: 6px;
}
.twitter-one > p a {
    color: #fff;
    font-weight: 600;
}
.img-one > a {
    display: inline-block;
    float: left;
    margin-bottom: 11px;
    margin-right: 11px;
}
.img-one.mgn-none > a {
    margin-right: 0;
}
.img-text-both.last-both {
    margin-bottom: 0;
    padding-bottom: 0;
}
.img-one {
    position: relative;
}
.img-one:hover a {
    opacity: 0.5;
    visibility: visible;
}
.twitter-one > p.cat1 {
    display: block;
    float: left;
    overflow: hidden;
    width: 100%;
    margin-bottom: 13px;
}
/*----- Footer bottom -------*/

.footer-menu a {
    color: #fff;
    font-size: 10px;
    margin-left: 28px;
    text-transform: uppercase;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.footer-menu a.active {
    color: var(--mm-primary);
}
.footer-menu a:hover {
    color: var(--mm-primary);
}
.footer-menu li {
    float: left;
}
.copyright-text.floatright > p {
    color: #fff;
    font-size: 12px;
    margin-bottom: 0;
}
.copyright-text > p a {
    color: #fff;
}
.copyright-text > p a:hover {
    text-decoration: underline;
}
.footer-bottom-all {
    display: block;
    overflow: hidden;
    padding: 15px 0 12px;
}
/*............. 14. Scrollup   ................*/

#toTop {
    text-align: center;
    bottom: 35px;
    cursor: pointer;
    display: none;
    position: fixed;
    right: 12px;
    z-index: 9999;
}
#toTop i {
    background-color: #7f7f7f;
    height: 40px;
    width: 40px;
    color: #fff;
    line-height: 40px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
#toTop i:hover {
    background-color: var(--mm-primary);
    color: #fff;
}
.attachment-blog-list {
    width: 100%;
}
/*----------------------------------------
    15. Home page two
----------------------------------------*/
/*---- Header ----*/

.header-area.home-2 {
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    left: 0;
    padding: 0 55px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99999;
}
.home-2.stick-h2.stick {
    background: #000000 none repeat scroll 0 0;
    position: fixed;
    top: 0;
    z-index: 999999;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
}
.home-2 .main-menu ul li a {
    color: #fff;
}
.home-2 .main-menu ul li a i {
    color: #fff;
}
.home-2 .main-menu ul li:hover a {
    color: var(--mm-primary);
}
.home-2 .main-menu ul li:hover ul li a {
    color: #333;
}
.home-2 .main-menu ul li:hover ul li a:hover {
    color: var(--mm-primary);
}
.home-2 .header-search .search {
    color: #fff;
    cursor: pointer;
    font-size: 17px;
}
.slide-all.home-2 {
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
}
.main-slider.home-2 {
    position: relative;
}
.main-slider.home-2::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
h1.title6.hm2 {
    font-size: 60px;
    text-transform: uppercase;
    font-weight: normal;
}
h3.title5.hm2 {
    color: #fff;
    margin-top: 30px;
    letter-spacing: 1px;
}
h1.title6.hm2.try {
    margin-bottom: 13px;
    letter-spacing: 4px;
}
.layer-3.hm2 {
    margin-top: 56px;
}
a.min1.hm2 {
    padding: 13px 30px;
}
/*--- Question area ---*/

.video-area {
    clear: both;
}
.sauget-accordion .panel-heading {
    border: medium none;
    border-radius: 0;
    padding: 0;
}
.sauget-accordion .panel-heading h4 {
    margin: 0;
}
.sauget-accordion .panel-heading h4 a {
    background: var(--mm-primary) none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    padding: 18px 0 18px 57px;
    position: relative;
}
.sauget-accordion .panel-heading h4 a.collapsed {
    background-color: #f1f1f1;
    color: #333;
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    padding: 18px 0 18px 57px;
    box-shadow: none;
}
.panel-group .panel + .panel {
    margin-top: 10px;
}
.panel {
    border: none;
    box-shadow: none;
}
.panel-body {
    border: 1px solid #f1f2f3 !important;
    border-radius: 0;
    box-shadow: none;
    margin-top: 10px;
    padding: 23px 30px 25px;
}
.faq-accordion .panel-title a.collapsed::before,
.faq-accordion .panel-title a::before {
	background-color: #fff;
	border-radius: 100%;
	color: #333;
	content: "\f067";
	font-family: FontAwesome;
	font-size: 16px;
	height: 27px;
	left: 20px;
	line-height: 28px;
	position: absolute;
	text-align: center;
	top: 13px;
	width: 27px;
}
.faq-accordion .active .panel-title a.collapsed::before {
    background-color: #fff;
	content: "\f068";
}
.faq-accordion .panel-title a::before {
	background-color: #fff;
	content: "\f068";
}
.panel-group {
    margin-bottom: 0;
}
.progress-bar-text {
    margin-bottom: 65px;
}
.progress-bar-text > h3 {
    color: #333;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 26px;
}
.progress-bar-text p.big {
    color: #333;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 18px;
}
.progress-bar-text > p {
    font-size: 13px;
    font-weight: 400;
}
.skill .progress {
    background-color: #f0f0f0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 5px;
    margin-bottom: 54px;
    overflow: visible;
    position: relative;
}
.skill .progress .lead {
    color: #333;
    font-size: 13px;
    font-weight: 400;
    left: 0;
    position: absolute;
    top: -23px;
    z-index: 99;
}
.skill .progress-bar {
    overflow: inherit;
    position: relative;
    display: block;
    background: var(--mm-primary) none repeat scroll 0 0;
}
.skill .progress-bar > span {
    color: #333;
    float: right;
    font-size: 13px;
    margin-right: -4px;
    margin-top: -27px;
    padding: 0 5px;
    position: relative;
}
.progress-bar-area {
    overflow: hidden;
}
.progress.an-rs:last-child {
    margin-bottom: 0;
}
/*---- Video ------*/

.video-img > img {
    width: 100%;
}
.overlay {
    position: relative;
}
.overlay::before {
    background-color: #000;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.1;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.video-icon,
.video-icon4 {
    display: inline-block;
    position: absolute;
    top: 50%;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 99;
}
a.video-popup {
    font-size: 36px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-color: #6e7071;
    display: inline-block;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
a.video-popup:hover {
    background-color: #fff;
    color: var(--mm-primary);
}
a.video-popup i {
    line-height: 80px;
}
.video-all {
    display: block;
    margin-top: 32px;
}
/*--- Tab ---*/

.tab-pane > img {
    width: 100%;
}
.tab-area {
    display: block;
    overflow: hidden;
}
.tab_all {
    position: relative;
}
.cat-name-container {
    position: absolute;
    right: -65px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 99;
}
.nav-tabs {
    border-bottom: none;
}
.nav.nav-tabs.three-tab > li {
    float: none;
    margin-bottom: 40px;
}
.nav.nav-tabs.three-tab > li:last-child {
    margin-bottom: 0;
}
.nav.nav-tabs.three-tab img {
    border-radius: 100%;
    display: inline-block;
    height: 128px;
    width: 128px;
}
.nav.nav-tabs.three-tab > li.active > a,
.nav.nav-tabs.three-tab > li.active > a:focus,
.nav.nav-tabs.three-tab > li.active > a:hover {
    background-color: inherit;
}
.nav > li > a:focus,
.nav > li > a:hover {
    background-color: inherit;
}
.nav.nav-tabs.three-tab > li.active a {} .nav.nav-tabs.three-tab > li a {
    border: medium none;
    padding: 0;
    text-transform: uppercase;
}
.cat-name-container ul li a img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    border: 8px solid #fff;
}
.nav.nav-tabs.three-tab > li.active > a img,
.nav.nav-tabs.three-tab > li.active > a img:focus,
.nav.nav-tabs.three-tab > li.active > a img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    border: 8px solid var(--mm-primary);
}
.tab-right-sidebar > h1 {
    color: #333;
    font-size: 36px;
    font-weight: 600;
    line-height: 27px;
    margin-bottom: 50px;
}
.tab-single > h3 {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    line-height: 11px;
    margin-bottom: 22px;
}
.published3 a,
.published4 a {
    color: #333;
}
.published3 a:hover,
.published4 a:hover {
    color: var(--mm-primary);
}
.event-sidebar-2 .post-details a,
.event-two .event-two-text a {
    color: #333;
    transition: all .3s ease 0s;
}
.event-sidebar-2 .post-details a:hover,
.event-two .event-two-text a:hover {
    color: var(--mm-primary);
}
.tab-single > p {
    font-size: 13px;
    font-weight: normal;
    padding-right: 330px;
}
.tab-area .col-md-6.tab-left {
    padding: 0;
}
.tab-area .col-md-6.tab-right {
    padding: 0;
}
.tab-right-sidebar {
    background: rgba(0, 0, 0, 0) url("img/bg-img/bg2.jpg") no-repeat scroll center center / cover;
    padding: 104px 0 84px 100px;
}
.tab-single {
    margin-bottom: 50px;
}
.tab-single:last-child {
    margin-bottom: 0px;
}
.timeline-area.none-bg {
    background-color: transparent;
}
/*---- Team ----*/

.slider-active5.indicator-style.owl-carousel:hover .owl-nav button {
    opacity: 1;
}
.slider-active5.indicator-style.owl-carousel .owl-nav button.owl-prev {
    right: 101.5%;
}
.slider-active5.indicator-style.owl-carousel .owl-nav button {
    top: 53%;
}
/*---- Events ------*/

.event-date-2 {
    background-color: var(--mm-primary);
    display: inline-block;
    float: left;
    margin-top: -53px;
    padding: 8px 24px 18px;
    position: relative;
    z-index: 9999;
}
.event-date-2 .tb-publish2 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.event-date-2 .tb-publish {
    color: #fff;
    display: block;
    font-size: 25px;
    font-weight: bold;
}
.event-two-date .published3,
.event-two-date .published4 {
    font-size: 14px;
}
.event-two-date .blog-meta {
    padding-left: 99px;
}
.event-two-text {
    float: left;
    margin-top: 30px;
}
.event-sidebar-2 .categori-list1 {
    margin-top: 0;
}
.event-sidebar-2 .categori-list-img a img {
    border-radius: inherit;
    height: inherit;
    width: inherit;
}
.event-sidebar-2 .categori-list-img {
    position: relative;
}
.categori-list-one.mrg-nn {
    margin-bottom: 0;
}
.event-sidebar-2 .event-date {
    bottom: 0;
    left: 0;
    right: inherit;
    top: inherit;
}
.event-sidebar-2 .post-details {
    padding: 0;
}
.event-sidebar-2 .post-details > h3 {
    font-size: 15px;
}
.event-sidebar-2 .post-details > p {
    margin-bottom: 0;
}
.latest-news-left {
    display: inline-block;
    float: left;
    padding-right: 20px;
}
.latest-news-all {
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: 15px;
    overflow: hidden;
    padding-bottom: 20px;
}
.event-two-text > h3 {
    color: #333;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 20px;
}
.event-two-text > p {
    font-size: 13px;
}
.latest-news > h3 {
    color: #333;
    font-size: 24px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 40px;
}
.latest-news-right > p {
    color: #333;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 9px;
}
.news span {
    color: #333;
    font-size: 12px;
    font-weight: normal;
}
.news span.news-left {
    padding-right: 18px;
}
.latest-news > a {
    color: #333333;
    font-size: 13px;
}
.latest-news > a:hover {
    color: var(--mm-primary);
}
.latest-news input.form-control2,
.map-input-contact-area input.form-control2 {
    background-color: inherit;
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    color: #555;
    font-size: 13px;
    height: 40px;
    outline: medium none;
    padding: 0 15px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100%;
    margin-bottom: 20px;
}
.latest-news textarea.form-control2,
.map-input-contact-area textarea.form-control2 {
    background-color: inherit;
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    color: #555;
    font-size: 13px;
    height: 210px;
    margin-bottom: 20px;
    outline: medium none;
    padding: 15px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100%;
}
.contact-form input::-webkit-input-placeholder {
    /* Chrome */
    
    color: #555;
    opacity: 1;
}
.contact-form input::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #555;
    opacity: 1;
}
.contact-form textarea::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #555;
    opacity: 1;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--mm-primary);
}
button.submit {
    background-color: var(--mm-primary);
    border: inherit;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 12px 20px;
    text-transform: uppercase;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
button.submit:hover {
    background-color: #333;
}
button.submit i {
    font-size: 14px;
    padding-left: 12px;
}
/*---- Subscribe ----*/

.subscribe-nn-pb .subscribe {
    padding-top: 0;
}
.subscribe-area {
    background-color: #f6f6f6;
    overflow: hidden;
}
.subscribe-area.subscribe-bg-none {
    background-color: inherit;
}
.subscribe-area .col-md-6 {
    padding: 0;
}
.subscribe-area .overlay::before {
    opacity: 0.7;
}
.subscribe-text > h3 {
    color: #333;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 36px;
}
.mc-form input {
    background-color: inherit;
    border: 1px solid #999;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    height: 50px;
    margin-bottom: 20px;
    outline: medium none;
    padding: 0 20px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 568px;
    margin-right: 30px;
}
.subscribe-nn-pb .mc-form input {
    margin-bottom: 0;
}
.subscribe-area button.submit {
    border-radius: 0px;
}
.mc-form input::-webkit-input-placeholder {
    /* Chrome */
    
    color: #333;
    opacity: 1;
}
.mc-form input::-moz-placeholder {
    /* Firefox 19+ */
    
    color: #333;
    opacity: 1;
}
.mc-form button.submit {
    padding: 14px 20px;
    font-size: 14px;
}
.subscribe {
    padding-top: 179px;
}
.subscribe.second-subscribe {
    padding-top: 0;
}
.header-left-home-3 .header-search {
    padding: 45px 0;
}
.header-left-home-3 {
    width: 80%;
}
.header-icon li {
    display: inline-block;
}
.header-icon li a {
    font-size: 16px;
    color: #333;
}
.header-icon li a:hover {
    color: var(--mm-primary);
}
.header-icon li {
    display: inline-block;
    padding-left: 27px;
}
.header-right-home-3 .search i {
    font-size: 17px;
    padding: 10px;
    border: 1px solid #909090;
    color: #333333;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    cursor: pointer;
}
.header-right-home-3 .search i:hover {
    border: 1px solid var(--mm-primary);
    color: var(--mm-primary);
}
.header-icon {
    margin-right: 12px;
    padding-top: 9px;
}
.header-right-home-3 {
    padding-top: 36px;
}
.header-right-home-3 #search input {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    margin-right: 55px;
}
.header-right-home-3 .search {
    padding-left: 18px;
}
.header-left-home-3 .header-button > a {
    background-color: transparent;
    border: 1px solid var(--mm-primary);
    color: var(--mm-primary);
    padding: 9px 13px;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.header-left-home-3 .header-button > a:hover {
    background-color: var(--mm-primary);
    border: 1px solid var(--mm-primary);
    color: #fff;
}
h1.title6.hm2 span {
    color: var(--mm-primary);
}
.home-3 p.title5.hm2 {
    font-size: 15px;
    font-weight: normal;
    padding: 12px 0 0px;
    color: #fff;
}
.home-3 h1.title6.hm2.try {
    margin-bottom: 14px;
}
.banner-text i {
    float: right;
    font-size: 17px;
    color: #fff;
    margin-top: 2px;
}
.banner-text > h3 {
    color: #fff;
    display: inline-block;
    float: left;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
    text-transform: uppercase;
}
.single-banner {
    position: relative;
}
.banner-text {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    bottom: 0;
    left: 0;
    padding: 21px 20px;
    position: absolute;
    width: 100%;
}
.offer-icon {
    float: left;
    margin-right: 30px;
}
.offer-text {
    overflow: hidden;
}
.offer-icon i {
    font-size: 36px;
    color: var(--mm-primary);
}
.offer-text > h3 {
    color: #333333;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 32px;
    position: relative;
}
.offer-text > h3::before {
    background: #eaeaea none repeat scroll 0 0;
    bottom: -19px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 50px;
}
.offer-text > p {
    font-size: 13px;
    margin-bottom: 0;
}
.counter-area2 {
    position: relative;
}
.counter-bottom2 {
    z-index: 99;
    position: relative;
}
.counter.cnt-two {
    color: #333;
    font-size: 50px;
    font-weight: 500;
    font-family: "Lora", sans-serif;
}
.counter-next2 > h2 {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
}
.counter-next2 {
    margin-top: 18px;
}
.counter-area2 {
    padding: 100px 0 104px;
    background-color: #f6f6f6;
}
.meet-area3.meet-area-two .meet-icon-all {
    border: inherit;
}
.meet-area3.meet-area-two .meet-icon-all::before {
    border: 1px solid #fff;
    content: "";
    height: 145px;
    left: 11px;
    position: absolute;
    top: 11px;
    width: 292px;
    z-index: -9999;
}
.meet-area3.meet-area-two .meet-all:hover .meet-icon-all {
    bottom: 39px;
}
.meet-area3 .slider-active2.indicator-style.owl-carousel .owl-nav button {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.meet-area3.meet-area-two {
    margin-top: inherit;
}
/*-------- 16. Gallery ---------*/

.gallery-area {
    background-color: #f6f6f6;
}
.hover-style {
    display: block;
    position: relative;
}
.hover-style::before {
    background: #000 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.4s ease-in-out 0s;
}
.hover-style:hover::before {
    opacity: 0.8;
}
.no-gutte .gallery {
    margin: 0;
    padding: 0;
}
.gallery-title {
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out 0s;
    z-index: 2;
}
.gallery:hover .gallery-title {
    opacity: 1;
}
.gallery.hover-style img {
    width: 100%;
}
.gallery-title > h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    text-transform: capitalize;
}
.gallery-title > a {
    border: 1px solid #ddd;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 5px 10px;
    text-transform: capitalize;
    font-size: 13px;
    margin-top: 5px;
    transition: all .3s ease 0s;
}
.gallery-title > a:hover {
    border: 1px solid var(--mm-primary);
    color: #fff;
    background-color: var(--mm-primary);
}
.gallery-menu button::before {
    background: var(--mm-primary) none repeat scroll 0 0;
    bottom: -8px;
    content: "";
    height: 2px;
    position: absolute;
    transform: scaleX(0);
    transition: all 0.3s ease 0s;
    width: 100%;
}
.gallery-menu button:hover::before,
.gallery-menu button.active::before {
    transform: scaleX(1);
}
.gallery-menu button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    font-weight: 600;
    margin: 0 15px;
    padding: 0;
    position: relative;
    text-transform: uppercase;
}
/*--- Events ----*/

.event-img3 {
    display: inline-block;
    float: left;
    padding-right: 30px;
    position: relative;
}
.event-text-img {
    background-color: #fff;
    padding: 20px 15px;
}
.event-area-three .visual-inner {
    margin-top: 0;
}
.event-area-three .published3 i,
.event-area-three .published4 i {
    color: var(--mm-primary);
}
.event-area-three .blog-meta {
    margin: 16px 0 12px;
}
.event-text-img {
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 20px 15px 36px;
}
.home-3 .event-text-img {
    padding: 20px 15px 47px;
}
.home-3 .event-text-img .readmore > a::before {
    bottom: 85px;
}
.event-date {
    background-color: var(--mm-primary);
    color: #fff;
    padding: 3px 18px 8px;
    position: absolute;
    right: 19px;
    text-align: center;
    top: -10px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.tb-publish {
    display: block;
    font-size: 20px;
    font-weight: bold;
}
.tb-publish2 {
    font-size: 13px;
    font-weight: 600;
}
.event-mrg2 {
    margin-bottom: 30px;
}
.event-text-img:hover .event-date {
    background-color: #333333;
}
.event-text-img:hover .visual-inner .blog-title > a,
.event-text-img:hover .readmore > a {
    color: var(--mm-primary);
}
.event-text-img:hover .readmore > a {
    padding-left: 30px;
}
.event-text-img:hover .readmore > a::before {
    opacity: 1;
}
.event-text-img .readmore > a::before {
    bottom: 74px;
    left: 291px;
}
.event-text-img .readmore > a.an::before {
    bottom: 44px;
}
.home-3 .event-text-img .readmore > a.an::before {
    bottom: 55px;
}
.what-top.event3 {
    padding-bottom: 13px;
}
.event-text-img:hover .post-format-area a.tb-publish,
.blog-container-inner:hover .post-thumb a.tb-publish {
    background-color: var(--mm-primary);
}
.home-3 .meet-icon ul li:first-child {
    margin-left: 0;
}
.home-3 .meet-icon ul li {
    margin-left: 10px;
}
.home-3 .meet-icon ul li a {
    margin-left: 0px;
}
.banner-img > img {
    width: 100%;
}
.event-img3 > img {
    width: 100%;
}
.about-one > h3 {
    color: #333;
    font-size: 22px;
    font-weight: 600;
}
.about-one > p {
    color: #333;
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 5px;
    padding-right: 75px;
    text-align: justify;
}
.about-one > a {
    background-color: #333;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
    padding: 12px 14px;
    border-radius: 5px;
}
.about-one > a {
    background-color: #333;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
    margin-top: 31px;
    padding: 12px 14px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.about-one > a:hover {
    background-color: var(--mm-primary);
}
.what-bottom.what-hm-4:hover .then-icon > a,
.what-bottom.only-color:hover .then-icon > a {
    border: 1px solid var(--mm-primary);
    color: #fff;
    background-color: var(--mm-primary);
    transition: all .4s ease 0s;
}
.what-bottom.what-hm-4 {
    margin-bottom: 43px;
}
.support-area-four .col-md-6 {
    padding: 0;
}
.support-four-img > img {
    width: 100%;
}
.support-four-img {
    position: relative;
}
.support-four-img::before,
.reformation-area::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.2;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
.reformation-area {
    background: rgba(0, 0, 0, 0) url("img/bg-img/bg5.jpg") no-repeat scroll center bottom / cover;
    position: relative;
}
.reformation-text {
    padding-bottom: 85px;
    padding-top: 124px;
    position: relative;
    z-index: 9;
}
.reformation-text > h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 600;
}
.reformation-text > p {
    color: #fff;
    font-size: 14px;
    margin: 23px 0 24px;
}
.reformation-text > a {
    background-color: var(--mm-primary);
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    padding: 16px 22px;
    text-transform: uppercase;
}
.video-border4 {
    position: relative;
    z-index: 9;
}
.video-right4 {
    -webkit-transform: translateY(23.5%);
    -ms-transform: translateY(23.5%);
    transform: translateY(23.5%);
}
/*-- Events --*/

.timer.timer-four span {
    display: inline-block;
    position: inherit;
    width: 24%;
}
.timer span.cdown::before {
    content: inherit;
}
.event-area-four-top {
    position: relative;
}
.timer.timer-four {
    position: inherit;
}
.event-four-text {
    bottom: 0;
    left: 20px;
    position: absolute;
    z-index: 99;
}
.event-area-four-top::before {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
.event-four-text > p {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
}
.event-four-text > p i {
    font-size: 14px;
    padding-right: 10px;
}
.event-four-all {
    background-color: #f6f6f6;
}
.slider-active4 .col-md-4 {
    width: 100%;
}
.slider-active4.indicator-style.owl-carousel:hover .owl-nav button {
    opacity: 1;
}
.slider-active4.indicator-style.owl-carousel .owl-nav button.owl-prev {
    right: 103%;
}
.slider-active4.indicator-style.owl-carousel .owl-nav button {
    right: -88px;
    top: 49%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*--- Team ---*/

.meet-area-h4 {
    background-image: url("img/bg-img/bg6.jpg");
    position: relative;
}
.meet-area-h4 .what-top.meet {
    position: relative;
    z-index: 999;
}
.meet-area-h4::after {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
.meet-all-four {
    position: relative;
}
.product-content-four {
    display: block;
    text-align: center;
}
.meet-icon-all-four {
    height: 100%;
    opacity: 0;
    position: absolute;
    right: -35px;
    top: 0;
    transition: all 0.3s ease 0s;
    z-index: 999;
    background-color: var(--mm-primary);
}
.meet-all-four:hover .meet-icon-all-four {
    opacity: 1;
    right: 0;
}
.meet-icon-four > ul {
    padding-top: 70px;
}
.product-content-four > h3 {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.product-content-four > p {
    color: #727272;
    font-size: 13px;
}
.product-content-four {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color #f0f0f0 #f0f0f0;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    box-sizing: border-box;
    padding: 29px 0 11px;
    transition: all 0.3s ease-out 0s;
    width: 100%;
}
.meet-icon-four li:last-child {
    padding-bottom: 0;
}
.meet-icon-four a {
    color: #fff;
    display: inline-block;
    font-size: 14px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    transition: all .3s ease 0s;
}
.meet-icon-four a:hover {
    color: var(--mm-primary);
    background-color: #fff;
}
.meet-all-four:hover h3 {
    color: var(--mm-primary);
}
.meet-area-img-4 {
    margin-top: -80px;
    position: relative;
    z-index: 999;
}
.slider-active5 .col-md-3 {
    width: 100%;
}
.event-text-img-four .event-img3 {
    z-index: 99;
    padding-right: 25px;
}
.visual-inner-four {
    background-color: #fff;
    margin-left: 201px;
    padding: 65px 20px 69px 0;
    -webkit-transform: translateY(-5%);
    -ms-transform: translateY(-5%);
    transform: translateY(-5%);
    z-index: 9;
}
.blog-title-four > a {
    font-size: 18px;
    color: #333;
    font-weight: 600;
}
.blog-meta-four > span.published3-four {
    border-right: 2px solid #aaa;
    padding-right: 11px;
}
.published3-four,
.published4-four {
    color: #333;
    font-size: 12px;
}
.published3-four i {
    margin-right: 9px;
}
.published4-four {
    margin-left: 11px;
}
.readmore-four a {
    color: #333;
    font-size: 13px;
    display: inline-block;
    margin-top: 5px;
}
.blog-meta-four {
    margin: 12px 0 12px;
}
.home-4 .event-text-img-four a.tb-publish {
    background: #636363 none repeat scroll 0 0;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    font-size: 18px;
    height: 48px;
    line-height: 48px;
    position: absolute;
    left: 10px;
    text-align: center;
    top: 10px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 48px;
}
.loadmore {
    display: block;
    margin-top: 20px;
    text-align: center;
}
.loadmore span::after {
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    font-size: 14px;
    margin-left: 15px;
}
.loadmore span {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 37px;
    padding: 2px 23px 1px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all .3s ease-in 0s;
    transition: all .3s ease-in 0s;
    background-color: var(--mm-primary);
}
.loadmore span a {
    color: #fff;
}
.loadmore span:hover {
    background-color: #333;
}
.what-top.event3.even4 {
    padding-bottom: 43px;
}
.event-text-img-four:hover .event-img3 a.tb-publish {
    background-color: var(--mm-primary);
}
.support-four-img {
    background: rgba(0, 0, 0, 0) url("img/banner/45.jpg") no-repeat scroll 0 0 / 100% 100%;
    padding: 277px 0;
}
.meet-img-four > a {
    display: block;
}
/* intelligent-header */

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}
.intelligent-header {
    background-color: #fff;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 999999;
}
.header-space {
    height: 111px;
}
/*---------------  17. About page  ----------------*/

.overflow-about {
    float: left;
    width: 100%;
}
.about-bg {
    background: rgba(0, 0, 0, 0) url("img/bg-img/bg7.jpg") no-repeat scroll center bottom / cover;
    float: left;
    position: relative;
    width: 100%;
}
.about-bg::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
/*---------------  18. Breadcrumbs area  ----------------*/

.breadcrumbs-area {
    background-color: #f6f6f6;
}
.breadcrumbs {
    position: relative;
    z-index: 99;
}
h2.page-title {
    color: #fff;
    font-size: 44px;
    font-weight: 600;
    text-transform: capitalize;
}
.breadcrumbs li {
    display: inline-block;
}
.breadcrumbs > ul li {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    margin: 8px 0 0;
}
.breadcrumbs > ul li a {
    color: var(--mm-primary);
    padding-right: 22px;
    position: relative;
}
.breadcrumbs ul li a.active::after {
    background: var(--mm-primary) none repeat scroll 0 0;
}
.breadcrumbs ul li a::after {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 2px;
    position: absolute;
    right: 1px;
    top: 8px;
    -webkit-transform: rotate(-62deg);
    -ms-transform: rotate(-62deg);
    transform: rotate(-62deg);
    width: 14px;
}
.video-area.what-about {
    float: left;
    width: 100%;
}
.meet-about {
    margin-bottom: 186px;
}
.meet-about .meet-all {
    margin-bottom: 1px;
}
.issues-bg {
    background: rgba(0, 0, 0, 0) url("img/bg-img/bg8.jpg") no-repeat scroll center bottom / cover;
    float: left;
    position: relative;
    width: 100%;
}
.issues-bg::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.25;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
.product-tab-menu {
    padding: 45px 0;
}
.product-tab-menu > li {
    display: inline-block;
    padding-right: 48px;
}
.product-tab-menu li a {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    position: relative;
}
.product-tab-menu li a:hover {
    color: var(--mm-primary);
}
.product-tab-menu li.active a {
    color: var(--mm-primary);
}
.issues-area {
    clear: both;
}
.issues-top {
    background-color: #111111;
}
.issue-bottom .visual-inner {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: -moz-use-text-color #f0f0f0 #f0f0f0;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    padding: 22px 15px 25px;
    margin-top: 0;
}
.issue-bottom .blog-meta,
.issues-area-list .blog-meta {
    margin: 12px 0 10px;
}
.issue-bottom .readmore > a::before {
    bottom: 33px;
    left: 15px;
    width: 24px;
}
.issues-mrg-30 {
    margin: 30px 0;
}
.issue-bottom .loadmore {
    margin-top: 40px;
}
.product-tab-menu li.active a::after {
    background: #ffffff none repeat scroll 0 0;
    bottom: -58px;
    content: "";
    height: 12px;
    position: absolute;
    right: 64px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    width: 12px;
}
.blog-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.issues-area-list .post-thumb {
    display: inline-block;
    float: left;
    padding-right: 30px;
}
.issues-area-list .visual-inner {
    margin-top: 0;
    padding-top: 22px;
}
.issues-area-list .readmore > a::before {
    bottom: 112px;
    left: 400px;
}
.issues-area-list .blog-container-inner {
    display: block;
    overflow: hidden;
}
.issues-area-list .blog-container-inner {
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
    padding-bottom: 30px;
}
.issues-categoris > h3 {
    border-bottom: 1px solid #ddd;
    color: var(--mm-primary);
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 20px;
}
.cat-one a {
    color: #333;
    display: block;
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 22px;
    margin-left: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.cat-one a:hover {
    color: var(--mm-primary);
}
.cat-one li {
    position: relative;
}
.categori-list a:hover {
    color: var(--mm-primary);
}
.cat-one li::after {
    content: "\f178";
    left: 0;
    position: absolute;
    top: 0;
    font-family: fontawesome;
    color: var(--mm-primary);
}
.categori-list-img {} .categori-list-img a img {
    border-radius: 100%;
    height: 100px;
    width: 100px;
}
.categori-list-one {
    display: block;
    overflow: hidden;
    margin-bottom: 30px;
}
.categori-list-img {
    display: block;
    float: left;
    padding-right: 30px;
}
.post-details {
    padding: 27px 0 0;
}
.post-details > p {
    color: #333333;
    font-size: 13px;
    font-weight: normal;
}
.categori-list li {
    display: inline-block;
}
.categori-list a {
    border: 1px solid #bbb;
    color: #444;
    display: inline-block;
    font-size: 13px;
    margin-bottom: 10px;
    margin-right: 6px;
    padding: 6px 13px;
    transition: all 0.3s ease 0s;
}
.categori-list a:hover {
    background-color: var(--mm-primary);
    border: 1px solid var(--mm-primary);
    color: #fff !important;
}
.blog-two2 .event-sidebar-2 {
    margin-top: 28px;
}
.issues-top2 {
    margin-bottom: 35px;
}
.issues-top3 {
    margin-bottom: 38px;
}
.cat-one {
    margin-top: 26px;
}
.categori-list1 {
    margin-top: 30px;
}
.pages li {
    display: inline-block;
}
.pages a {
    background-color: transparent;
    color: #333;
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
    height: 25px;
    line-height: 22px;
    margin-right: 12px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 25px;
}
.pages li.current a,
.pages a:hover {
    background-color: var(--mm-primary);
    color: #fff;
}
.pages li.current a {
    margin-left: 16px;
}
.pages li.cut a {
    background-color: transparent;
    border-radius: transparent;
    color: #333;
    font-size: 14px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.pages li.cut a:hover {
    color: var(--mm-primary);
}
.pages li {
    color: #333;
    display: inline-block;
    font-size: 13px;
    text-align: center;
    text-transform: capitalize;
}
.issues-area-list {
    clear: both;
}
.categori-list {
    margin-top: 30px;
}
.blog-two2 .categori-list-img {
    padding-right: 12px;
}
.blog-two2 .event-date {
    padding: 2px 10px 8px;
}
.issues-details-top h1 {
    color: #333;
    font-size: 24px;
    font-weight: 600;
}
.issues-details-top > h3 {
    color: #333;
    font-size: 14px;
    font-weight: 600;
}
h3.details-one {
    margin: 30px 0 16px;
}
.issues-details-top > p {
    font-size: 13px;
    font-weight: normal;
}
.issues-details-title > h3 {
    color: var(--mm-primary);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
}
.issues-bottom > h3 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin: 22px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.issues-bottom > h3 a {
    color: #333;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.issues-bottom > h3 a:hover {
    color: var(--mm-primary);
}
.issues-details-top > img {
    margin: 12px 0 34px;
}
h3.details-two {
    margin-bottom: 17px;
}
h3.details-three {
    margin: 29px 0 15px;
}
.issues-details-bottom {
    margin-top: 75px;
}
.blog-meta.tnm,
.blog-meta.tnm {
    margin: 0;
}
.events-two-ara {
    clear: both;
}
.issues-bg9 {
    background: rgba(0, 0, 0, 0) url("img/bg-img/bg9.jpg") no-repeat scroll center bottom / cover;
    float: left;
    position: relative;
    width: 100%;
}
.issues-bg9::before {
    background: #000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
.event-text {
    display: block;
    padding: 20px 20px 22px;
    border: 1px solid #ddd;
    margin-bottom: 1px;
}
.event-select {
    display: inline-block;
    float: right;
}
.event-text > span {
    font-size: 13px;
    font-weight: normal;
}
.event-select .chosen-container {
    background-color: #efefef;
    border: medium none;
    border-radius: 3px;
    font-family: "Raleway", sans-serif;
    margin: 0;
    padding: 6px 14px;
}
.chosen-container .chosen-single {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #333;
    font-size: 11px;
    font-weight: normal;
    height: 20px;
    line-height: 20px;
    padding: 0;
    text-transform: capitalize;
}
.chosen-container-active.chosen-with-drop .chosen-single {
    background-image: none;
    border: medium none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.chosen-container .chosen-single div b::before {
    content: "";
    font-family: FontAwesome;
    font-size: 11px;
    margin-left: 5px;
}
.chosen-container .chosen-drop {
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    font-family: "Raleway", sans-serif;
    margin-top: 10px;
    width: 140px;
}
.chosen-container .chosen-drop ul li {
    margin: 0;
    padding: 10px 5px 10px 10px;
}
.chosen-container .chosen-drop ul li.highlighted {
    background: var(--mm-primary);
}
.event-two-head {
    border: 1px solid #efefef;
    border-radius: 5px;
    display: block;
    float: left;
    padding: 6px 20px;
    width: 100%;
}
.events-two-ara .blog-meta {
    margin: 7px 0 12px;
}
.events-two-ara .published3 i,
.events-two-ara .published4 i {
    color: var(--mm-primary);
}
.all-event-two {
    display: block;
    overflow: hidden;
}
.events-two-ara .pages {
    float: right;
}
.events-two-ara .pages li.cut a {
    margin-left: 8px;
    margin-right: 0;
    width: 11px;
}
/*---------------   19. Events details page   ----------------*/

.owl-carousel .owl-dots button.owl-dot {
    margin: 0 7px;
}
.owl-carousel .owl-dots button.owl-dot span {
    height: 7px;
    opacity: 1;
    width: 20px;
    border-radius: 20px;
    display: inline-block;
}
.events-details-ara {
    clear: both;
}
#googleMap {
    width: 100%;
    height: 330px;
}
.events-details-text h1 {
    color: #333;
    font-size: 24px;
    font-weight: 600;
    margin: 26px 0 14px;
}
.events-details-text > p {
    font-size: 13px;
    margin-bottom: 25px;
}
.feature-item li {
    font-size: 13px;
    line-height: 24px;
}
.feature-item > p {
    font-size: 13px;
    margin: 25px 0 0;
}
.feature-item {
    margin-top: 24px;
}
.event-list li i {
    color: var(--mm-primary);
    font-size: 14px;
    padding-right: 10px;
}
.event-list span {
    color: #333333;
    font-size: 13px;
    font-weight: 600;
    padding-right: 5px;
}
.event-list li,
.event-list li a {
    color: #333333;
    font-size: 13px;
    font-weight: normal;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-bottom: 24px;
}
.event-list li a:hover {
    color: var(--mm-primary);
}
.event-list {
    padding: 28px 20px 16px;
    border: 1px solid #ddd;
}
.event-list li i.ex {
    padding-left: 3px;
}
/*---------------   20. Event details   ----------------*/

.timer.timer-details span {
    color: #fff;
    display: inline-block;
    padding: 9px 26px 9px;
}
.timer.timer-details span p {
    color: #fff;
}
.timer.timer-details > div {
    background-color: var(--mm-primary);
    display: block;
    width: 100%;
}
.timer.timer-details {
    bottom: inherit;
    position: inherit;
    right: inherit;
    text-align: center;
    width: 100%;
}
.event-details-slider .owl-dots {
    bottom: 10px;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    text-align: center;
}
.event-details-slider .owl-dots .owl-dot span {
    background: #fff none repeat scroll 0 0;
    border: medium none transparent;
    opacity: 1;
}
.event-details-slider .owl-dots .owl-dot.active span,
.event-details-slider .owl-dots .owl-controls.clickable .owl-page:hover span {
    background: var(--mm-primary) none repeat scroll 0 0;
}

.event-details-slider .owl-dots .owl-dot span:hover {
    background: var(--mm-primary) none repeat scroll 0 0;
}

.event-details-slider {
    margin-top: 40px;
}
/*---------------  21. Team page   ----------------*/

.team-area .meet-all {
    margin-bottom: 30px;
}
.team-bg {
    position: relative;
    clear: both;
}
.team-area .meet-icon-all {
    bottom: -10%;
}
.team-area .loadmore {
    margin-top: 10px;
}
.team-mrg {
    margin: 30px 0;
}
/*--- 26. Team details page   ---*/

.team-details-text h1 {
    color: #333;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
}
.team-details-text > h3 {
    color: var(--mm-primary);
    font-size: 18px;
    font-weight: normal;
    margin: 14px 0 20px;
}
.team-details-text > p {
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 28px;
}
.team-details-text > p span {
    color: #333;
}
.team-icon > ul {
    float: right;
}
.team-icon li {
    display: inline-block;
}
.team-icon a {
    color: #9a9a9a;
    font-size: 18px;
    padding-left: 30px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.team-icon a:hover {
    color: var(--mm-primary);
}
.team-icon {
    display: block;
    overflow: hidden;
    position: relative;
}
.team-icon::before {
    background: #eaeaea none repeat scroll 0 0;
    bottom: 12px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 451px;
}
.team-details-top .event-list {
    border: medium none;
    margin-top: 27px;
    padding: 0;
}
.team-details-text > p.stone {
    margin-bottom: 24px;
}
.three-tab2 .col-md-3 {
    width: 100%;
}
.three-tab2 .meet-all:hover .product-content {
    opacity: 1;
}
.three-tab2 {
    margin-top: 30px;
}
.three-tab2.indicator-style.owl-carousel:hover .owl-nav button {
    opacity: 1;
}
.three-tab2.indicator-style.owl-carousel .owl-nav button.owl-prev {
    right: 101.5%;
}
.three-tab2.indicator-style.owl-carousel .owl-nav button {
    top: 49%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.team-details-top .event-list li i.ex {
    padding-left: 0;
}
.team-details-area a.meet-all6 .meet-img img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.team-details-area a.meet-all6:hover .meet-img img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.meet-all6 {
    border: 1px solid #f0f0f0;
    display: block;
    margin-bottom: 1px;
}
.tab-img2 {
    display: inline-block;
    float: left;
    margin-right: 40px;
    overflow: hidden;
    width: 470px;
}
/*---------------  22. Blog page   ----------------*/

.blog-area {
    clear: both;
}
.Blog-bg {
    clear: both;
    position: relative;
}
.blog-mrg {
    margin: 30px 0;
}
.blog-area .loadmore {
    margin-top: 40px;
}
/*---------------  23. Blog siderbar ----------------*/

.blog-two-area {
    clear: both;
}
.blog-two-mrg {
    margin: 40px 0;
}
.blog-two-area .pages {
    float: right;
    margin-top: 35px;
}
.blog-two-area .pages li.cut a {
    margin-right: 0;
    padding-left: 11px;
    width: 0;
}
/*---------------  24. Blog details  ----------------*/

.blog-share {
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    display: block;
    overflow: hidden;
    padding: 33px 0 9px;
}
.blog-share > p {
    display: inline-block;
    float: left;
    padding-right: 27px;
}
.blog-share > ul {
    display: inline-block;
    float: left;
    padding-top: 3px;
}
.blog-share li {
    float: left;
}
.blog-two-details-area h3.blog-title {
    color: #333;
    font-size: 24px;
    font-weight: 600;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.blog-two-details-area .blog-content {
    margin-top: 20px;
}
.blog-two-details-area {
    clear: both;
    position: relative;
}
p.blog-paragraph {
    margin-bottom: 0;
    margin-top: 12px;
}
.blog-tag > p i,
.blog-share > p i,
.blog-comment > p i,
.blog-input > p i {
    color: #333;
    font-size: 14px;
    padding-right: 12px;
}
span.tag {
    color: #333;
    font-size: 15px;
    font-weight: 600;
}
.blog-tag > p {
    color: #333;
    font-size: 13px;
    font-weight: normal;
    padding: 18px 0 7px;
}
.blog-tag > p span.vidos2 {
    color: var(--mm-primary);
}
.blog-share a {
    font-size: 14px;
    padding-right: 25px;
    color: #646464;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.blog-share a:hover {
    color: var(--mm-primary);
}
.blog-comment > p,
.blog-input > p {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    padding: 34px 0 10px;
}
.blog-top > img {
    display: inline-block;
    float: left;
}
.blog-img-details {
    padding-left: 123px;
}
.blog-title > h3 {
    color: #333;
    display: inline-block;
    float: left;
    font-size: 13px;
    font-weight: 600;
}
.blog-title {
    display: block;
    overflow: hidden;
}
.blog-reply-all .blog-title > a,
.blog-reply-all2 .blog-title > a {
    background-color: #fff;
    color: var(--mm-primary);
    float: right;
    font-size: 13px;
    font-weight: normal;
    padding: 4px 20px 6px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.blog-reply-all .blog-title > a:hover,
.blog-reply-all2 .blog-title > a:hover {
    background-color: var(--mm-primary);
    color: #fff !important;
}
.blog-img-details > span {
    color: #333;
    display: block;
    font-size: 13px;
    font-weight: normal;
    margin: 0 0 12px;
}
.blog-img-details > p {
    font-size: 13px;
    font-weight: normal;
}
.blog-img-details > p.p-border {
    border-bottom: 1px solid #fff;
    padding-bottom: 25px;
}
.blog-reply-all,
.blog-reply-all2 {
    background-color: #f0f0f0;
    display: block;
    padding: 40px 30px;
}
.blog-top-mrg {
    margin-left: 123px;
    margin-top: 30px;
}
.blog-reply-all2 {
    margin-top: 30px;
}
.blog-img-details > p {
    margin-bottom: 0;
}
.blog-two-details-area .blog-meta {
    margin: 15px 0 21px;
}
.blog-comment {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 30px;
}
.blog-input {
    padding: 20px 0 0;
}
.blog-from input,
.blog-from textarea {
    border: 1px solid #e2e2e2;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 13px;
    height: 44px;
    padding: 0 20px;
}
.blog-from textarea {
    height: 295px;
    padding: 20px;
    margin-top: 30px;
}
.blog-from button.submit {
    margin-top: 30px;
}
.blog-two-details-area .issues-details-bottom {
    border-top: 1px solid #eaeaea;
    margin-top: 0;
    padding-top: 27px;
}
.blog-two-details-area .blog-meta {
    margin: 5px 0 0;
}
.blog-from input:focus,
.blog-from textarea:focus {
    border-color: var(--mm-primary);
    -webkit-box-shadow: none;
    box-shadow: none;
}
/*---------------  25. Contact page  ----------------*/

.map-area {
    float: left;
    width: 100%;
}
/*--------------- 26. Donate page  ----------------*/

.donate-area {
    clear: both;
}
.donate-sidebar {
    margin-top: 40px;
}
.donate-bg {
    position: relative;
    clear: both;
    background-color: #f6f6f6;
}
.donate-sidebar-top > h1,
.donate-sidebar-bottom > h1 {
    color: var(--mm-primary);
    font-size: 22px;
    font-weight: 600;
}
.donate-sidebar-top > p {
    color: #333;
    font-size: 13px;
    font-weight: normal;
    margin: 13px 0 26px;
}
.donate-sidebar-top li {
    display: inline-block;
    margin-right: 15px;
}
.donate-sidebar-top a {
    background-color: #a1a1a1;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 25px;
    transition: all 0.3s ease 0s;
}
.donate-sidebar-top a:hover {
    background-color: var(--mm-primary);
}
.donate-sidebar-bottom input,
.donate-sidebar-bottom select {
    border: 1px solid #e2e2e2;
    color: #333;
    font-size: 13px;
    height: 44px;
    margin-bottom: 20px;
    padding: 0 20px;
    width: 100%;
    border-radius: 5px;
}
.donate-sidebar-bottom > h1 {
    margin: 35px 0 20px;
}
.donate-sidebar-bottom button.submit {
    margin-top: 10px;
}
.donate-text > p {
    font-size: 13px;
    font-weight: normal;
    color: #333;
}
.donate-text > p span {
    color: var(--mm-primary);
}
.donate-text > p.p-bold {
    font-weight: 600;
    margin: 14px 0 12px;
}
.donate-text > h1 {
    color: var(--mm-primary);
    font-size: 22px;
    font-weight: 600;
    text-transform: capitalize;
}
/*--------------- 27. Events page ----------------*/

.calender-title h1 {
    color: var(--mm-primary);
    font-size: 24px;
    font-weight: 600;
}
.calender-title > p {
    color: #333;
    font-size: 15px;
    font-weight: normal;
    margin: 10px 0 36px;
}
.calender-title > p span {
    color: var(--mm-primary);
}
.fc button {
    border: medium none;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    padding: 10px 15px;
    text-transform: capitalize;
    -webkit-box-sizing: none;
    -moz-box-sizing: none;
    box-sizing: none;
    height: inherit;
}
.fc-state-default.fc button {
    background-color: var(--mm-primary);
}
.fc-state-default {
    background-color: var(--mm-primary);
    background-image: none;
    background-repeat: none;
    border-color: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    text-shadow: none;
}
.fc-state-active {
    background-color: #333333;
}
.events-two-ara .fc th {
    border: 1px solid #dddddd;
    padding: 0;
    vertical-align: top;
}
.events-two-ara .fc th {
    padding: 15px 20px;
}
.fc-day-header.fc-widget-header.fc-mon > span {
    color: #333;
    font-size: 15px;
    font-weight: 600;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    color: #727272;
    float: right;
    font-size: 16px;
    font-weight: normal;
    margin-right: 10px;
    margin-top: 2px;
}
.fc-event,
.fc-event-dot {
    background-color: #6a6a6a;
}
.fc-event {
    border: 1px solid #c3c3c3;
    font-size: 13px;
}
.fc-title {
    white-space: normal;
}
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable.fc-resizable {
    margin: 0 3px 3px;
}
.fc-toolbar {
    margin-bottom: 30px;
    text-align: center;
}
.fc-center > h2 {
    color: #333;
    font-size: 36px;
    font-weight: 600;
}
.fc-content {
    padding: 10px 5px;
}
.event-area-four-top img {
    width: 100%;
}
.tab-left,
.tab-right {
    padding: 0;
}
.di-na.res-sub {
    margin-top: 32px;
}
.reformation-text > a:hover {
    background-color: #333;
}
.home-2.stick-h2.stick.header-area .logo, .header-area .stick .logo {
  padding: 25px 0 0;
}
.home-2.stick-h2.stick.header-area .header-search,
.header-area .stick .header-search {
    padding: 31px 0;
}
.home-2.stick-h2.stick .main-menu ul li,
.stick .main-menu ul li {
    padding: 33px 0 32px;
}
.home-2.stick-h2.stick .main-menu ul li ul li {
    padding: 0px 0 15px;
}
.home-2.stick-h2.stick .main-menu ul li ul li:last-child {
    padding: 0px 0 0px;
}
.home-4 .stick-h2.stick.header-area .logo {
    padding: 17px 0 12px;
}
.home-4 .stick-h2.stick.header-area .main-menu ul li {
    padding: 37px 0 32px;
}
.home-4 .stick-h2.stick.header-area .main-menu ul li ul li {
    padding: 0px 0 15px;
}
.home-4 .stick-h2.stick.header-area .main-menu ul li ul li:last-child {
    padding: 0px 0 0px;
}
.home-4 .stick-h2.stick.header-area .header-search {
    padding: 32px 0;
}
.elements-area {
    background-color: #333;
    clear: both;
}
.elements-area h2.page-title {
    text-transform: capitalize;
}
.elements-area2.mb-80 {
    margin-bottom: 186px;
}
.elements-area2 .meet-all {
    margin-bottom: 1px;
}
.elements3 {
    padding-top: 80px;
}
.elements4 {
    padding-bottom: 80px;
}
.timeline-text > h3 a:hover {
    color: var(--mm-primary);
}
.read-icon > a:hover {
    color: var(--mm-primary);
}
.blog-title-four > a:hover {
    color: var(--mm-primary);
}
.readmore-four a:hover {
    color: var(--mm-primary);
}
.youtube-area{
    clear: both;
    position: relative;
}
.youtube-text {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
}
.height-100vh {
  height: 100vh;
}
.youtube-area h3.title5 {
  color: #fff;
}
.youtube-area a.min1 {
  display: inline-block;
  margin-top: 8px;
}
.youtube-area{
    background: rgba(0, 0, 0, 0) url("img/bg-img/youtube-bg.png") no-repeat scroll center bottom / cover ;
}

/*-------- 28. Coming soon ----------*/
.comming-soon-wrap,
.subscribe-area-2 {
    position: relative;
    z-index: 99;
}
.comming-soon-area {
    padding: 60px 0;
}
.overlay {
    position: relative;
}
.overlay::before {
    background-color: #000;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 9;
}
.comming-soon-top h3 {
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 8px;
	line-height: 1;
	margin: 58px 0 41px;
}
.comming-soon-top > p {
    color: #fff;
    font-size: 16px;
    width: 66%;
    margin: 0 auto;
}
.comming-soon-top {
    margin: 0 0 54px;
}
.mc-news {
    display: none;
}
.subscribe-area-2 > h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 3px;
    margin: 0 0 14px;
}
.subscribe-form-2 form {
    position: relative;
}
.subscribe-form-2 form input {
    background: transparent;
    border: 1px solid #edf0e6;
    color: #fff;
    font-size: 14px;
    height: 55px;
    padding: 2px 146px 2px 40px;
    width: 100%;
    font-weight: 300;
    border-radius: 50px;
}
.subscribe-form-2 form input::-moz-placeholder {
    color: #fff !important;
    opacity: 1;
}
.subscribe-form-2 form input::-webkit-input-placeholder {
    color: #fff !important;
    opacity: 1;
}
.clear-2 {
    position: absolute;
    top: 0;
    right: 0;
}
.subscribe-form-2 form .clear-2 input {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    border-radius: 50px;
    color: #e0e0e0;
    cursor: pointer;
    font-weight: 700;
    padding: 2px 40px 2px 30px;
    width: auto;
}
.subscribe-form-2 form .clear-2:hover input {
    color: #8f9495;
}
.subscribe-form-2 form .clear-2::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 35px;
    position: absolute;
    top: 10px;
    transition: all 0.3s ease 0s;
    width: 2px;
    left: 0;
}
.time_circles > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1 0 25%;
    position: static;
    width: 25% !important;
    z-index: 99;
}

.DateCountdown .time_circles > div {
    margin-top: 78px;
}

.bg-img {
	background-position: center center;
	background-size: cover;
}
.height-100vh-2 {
	min-height: 100vh;
}
.mt-110 {
	margin-top: 110px;
}
/**
 *	Titles (Days, Hours, etc)
 **/

.DateCountdown .time_circles > div > h4 {
    color: #fff;
    font-size: 18px !important;
    font-weight: 400;
    margin: 89px 0 0;
    order: 2;
    padding: 0;
    text-align: center;
    text-transform: capitalize;
}


/**
 *	Time numbers, ie: 12
 **/

.DateCountdown .time_circles > div > span {
    color: #fff;
    display: block;
    font-size: 60px !important;
    font-weight: 400;
    line-height: 47px !important;
    margin-top: 16px;
    text-align: center;
    width: 100%;
}
.time_circles {
    display: flex;
    flex-wrap: wrap;
}
.time_circles canvas {
    width: 100% !important;
    height: auto !important;
    position: absolute;
    left: 0;
    top: 0;
}

.mfp-bg {
	z-index: 9999999;
}
.mfp-wrap {
	z-index: 9999999;
}
.subscribe.blog-subscribe.mrg-zero {
	padding: 0px;
}

button {
    border: none;
}

/*==========================================================================
   Marco Martins — Typography refinements (loaded last to win the cascade)
   Fraunces (display serif) + Nunito Sans (body), larger & tidier sizing
==========================================================================*/
html,
body {
    font-size: 17.5px;
}
body,
p,
li,
a,
span,
input,
textarea,
select,
button,
label,
td,
th,
blockquote,
.header-top-info,
.footer-content p {
    font-family: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}
p {
    font-size: 1.0625rem;     /* ~18.6px */
    line-height: 1.7;
    color: #3a3a3a;
    letter-spacing: 0.1px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    letter-spacing: -0.2px;
    line-height: 1.2;
    color: var(--mm-ink);
}
h1 { font-weight: 600; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }

/* Section intro heading + lead text a touch larger */
.section-title h1 {
    font-size: 2.25rem;       /* ~36px */
}
.section-title p,
.what-top p,
.about-content p {
    font-size: 1.0625rem;     /* ~17px lead */
    line-height: 1.75;
}

/* Nav + buttons: keep sans, nudge up from 13px for legibility */
.mainmenu ul li a {
    font-size: 0.9375rem;     /* ~15px */
    letter-spacing: 0.2px;
}
.header-button > a {
    font-size: 0.875rem;      /* ~14px */
    letter-spacing: 0.4px;
}
/* Header CTA row: Updates · Volunteer · Donate.
   Deliberately NOT three identical buttons — three equal-weight CTAs compete
   and none reads as the ask. Donate stays the solid bright-green primary; the
   other two are outlined so they read as available, not urgent.
   The wrap is a plain left-to-right flex row, so the buttons appear in source
   order: Updates, Volunteer, Donate. Donate is last so it lands rightmost —
   nearest the eye's resting point on a left-to-right header, and next to the
   nav it outranks. Do NOT add `row-reverse`: the wrap is inside a floated
   parent, and reversing it puts Donate on the far left. */
.mm-donate-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
/* The base .header-button > a padding (13px 35px) was sized for ONE button.
   Three at that width overflow the header and collide with the nav, so the
   CTA row runs tighter. Keep the vertical padding so all three stay the same
   height as before. */
.mm-donate-wrap > a {
    padding: 13px 18px;
    white-space: nowrap;
}
.header-button > a.mm-donate-btn {
    background-color: var(--mm-green-bright);
    color: #ffffff;
    font-weight: 700;
}
.header-button > a.mm-donate-btn:hover,
.header-button > a.mm-donate-btn:focus {
    background-color: var(--mm-accent-dark);
    color: #fff;
}
/* Secondary CTAs. Outlined in brand RED on the white header (red text on white
   is 6.87:1), lifting to a solid red fill with WHITE text on hover — red and
   white is 6.87:1, red and black only 2.75:1, so reverse type is the only
   correct pairing here. */
.header-button > a.mm-cta-btn {
    background-color: transparent;
    border: 1px solid var(--mm-green-bright);
    color: var(--mm-green-bright);
    font-weight: 600;
}
.header-button > a.mm-cta-btn:hover,
.header-button > a.mm-cta-btn:focus {
    background-color: var(--mm-green-bright);
    color: #ffffff;
}
/* Below 768px the whole .header-bottom is hidden and the azure MENU bar
   becomes the header, so the desktop donate button cannot be shown there.
   The mobile donate CTA is .mm-mobile-donate, pinned into the MENU bar
   next to the search icon — see the mobile header rules further down. */
.header-top-info ul li a {
    font-size: 0.9375rem;
}

/* Cards / service boxes body text */
.service-content p,
.event-content p,
.blog-content p,
.timeline-content p {
    font-size: 1rem;
    line-height: 1.65;
}

/* Keep the big display serif hero using Fraunces too */
.slider-main-area .title6 {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
}
.slider-main-area .title5 {
    font-family: 'Nunito Sans', sans-serif;
    letter-spacing: 2px;
    font-weight: 700;
}

/*==========================================================================
   Marco Martins — Custom hero
==========================================================================*/
.mm-hero {
    position: relative;
    background: linear-gradient(135deg, #0b1024 0%, #152045 55%, #1d2858 100%);
    padding: 78px 0 0;
    overflow: hidden;
}
/* decorative angled band + dots for visual interest */
.mm-hero::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -140px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}
.mm-hero::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: 60px;
    width: 240px;
    height: 240px;
    background-image: radial-gradient(rgba(255,255,255,0.16) 2px, transparent 2px);
    background-size: 20px 20px;
    opacity: 0.5;
    pointer-events: none;
}
.mm-hero-row {
    min-height: 580px;
    position: relative;
    z-index: 2;
}
.mm-hero-copy {
    padding-bottom: 56px;
}
.mm-eyebrow {
    display: inline-block;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--mm-green-bright);
    padding: 6px 18px;
    border-radius: 4px;
    margin-bottom: 22px;
}
.mm-hero .mm-eyebrow {
    color: #ffffff;
    background: var(--mm-green-bright);
}
.mm-hero-name {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 5rem;
    line-height: 0.98;
    color: #fff;
    margin: 0 0 18px;
    letter-spacing: 0px;
    text-transform: uppercase;
}
.mm-hero-name-2 {
    display: block;
    /* The hero ground is brand BLUE, so red here would be 2.04:1 — the pairing
       the markup explicitly avoids. White reads at 14.03:1 and matches the
       "reverse type" treatment used on the printed material. */
    color: #ffffff;
    opacity: 1;
    font-weight: 600;
    white-space: nowrap;
    /* "FOR DAVENPORT" is 3 characters longer than the line above it, so it
       gets a narrower face and a fluid size to stay inside the copy column
       instead of running under the photo. */
    font-family: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
    font-stretch: condensed;
    font-size: clamp(2.6rem, 4.6vw, 4.15rem);
    letter-spacing: -0.5px;
    width: fit-content;
    padding-bottom: 10px;
    border-bottom: 6px solid var(--mm-green-bright);
}
.mm-hero-tagline {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.mm-hero-lead {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
    max-width: 30em;
    margin-bottom: 34px;
}
.mm-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.mm-btn {
    display: inline-block;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 15px 34px;
    border-radius: 4px;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
.mm-btn-primary {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.mm-btn-primary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--mm-azure);
    transform: translateY(-2px);
}
.mm-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}
.mm-btn-ghost:hover {
    border-color: #fff;
    background: #fff;
    color: var(--mm-azure);
}
.mm-btn-accent {
    background: var(--mm-green-bright);
    color: #ffffff;
    border-color: var(--mm-green-bright);
}
.mm-btn-accent:hover {
    background: var(--mm-green-bright-dark);
    border-color: var(--mm-green-bright-dark);
    color: #ffffff;
    transform: translateY(-2px);
}
/* Hero photo */
.mm-hero-media {
    position: relative;
    text-align: right;
    align-self: flex-end;
}
.mm-hero-photo-wrap {
    position: relative;
    display: inline-block;
}
.mm-hero-photo-wrap img {
    position: relative;
    z-index: 2;
    max-height: 620px;
    width: auto;
}
/* soft base glow so cut-out photo sits on the color block */
.mm-hero-photo-wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.38), rgba(0,0,0,0));
    z-index: 1;
    pointer-events: none;
}
.mm-vote-badge {
    position: absolute;
    top: 20px;
    left: -14px;
    z-index: 3;
    background: var(--mm-green-bright);
    color: #ffffff;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    transform: rotate(-8deg);
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    border: 3px solid #fff;
}
.mm-vote-badge-top {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mm-vote-badge-bottom {
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.1;
    margin-top: 2px;
    text-transform: uppercase;
}
/* Marquee — two identical groups, seamless -50% loop */
.mm-marquee {
    background: var(--mm-green-bright);
    overflow: hidden;
    padding: 12px 0;
    position: relative;
    z-index: 4;
}
.mm-marquee-track {
    display: flex;
    width: max-content;
    animation: mm-marquee 40s linear infinite;
}
.mm-marquee-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    padding-right: 0;
}
.mm-marquee-group span {
    /* Red band: WHITE text, 6.87:1. Blue here was 2.04:1 and failed. */
    color: #ffffff;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0 20px;
}
.mm-marquee-group .mm-dot {
    padding: 0;
    opacity: 0.55;
}
@keyframes mm-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}
@media (max-width: 1199px) {
    /* fluid so "FOR DAVENPORT" scales down instead of clipping */
    .mm-hero-name { font-size: clamp(3rem, 6.5vw, 4.5rem); }
    .mm-hero-name-2 { font-size: clamp(2.4rem, 5.4vw, 3.7rem); }
}
@media (max-width: 991px) {
    .mm-hero-name { font-size: clamp(3rem, 8vw, 4rem); }
    .mm-hero-name-2 { font-size: clamp(2.3rem, 6.8vw, 3.4rem); }
    .mm-hero-media { margin-top: 20px; }
    .mm-hero-photo-wrap img { max-height: 460px; }
}
@media (max-width: 767px) {
    .mm-hero { padding-top: 44px; }
    /* fluid size so "FOR DAVENPORT" never overflows narrow screens */
    .mm-hero-name { font-size: clamp(2.5rem, 12vw, 3.5rem); }
    .mm-hero-name-2 { font-size: clamp(2rem, 9.6vw, 2.9rem); }
    .mm-hero-copy { text-align: center; padding-bottom: 30px; }
    /* fit-content + centred so the red rule sits under the centred text */
    .mm-hero-name-2 { margin-left: auto; margin-right: auto; }
    .mm-hero-cta { justify-content: center; }
    .mm-eyebrow { margin-top: 0; }
    .mm-hero-media { text-align: center; }
    /* Mobile order (client request): name -> photo -> tagline/lead/buttons.
       display:contents lets the copy column's two blocks reorder at row level
       alongside the media column. */
    .mm-hero-row { display: flex; flex-direction: column; min-height: 0; }
    .mm-hero-copy { display: contents; }
    .mm-hero-name-block { order: 1; }
    .mm-hero-media { order: 2; margin-top: 18px; margin-bottom: 6px; }
    .mm-hero-rest { order: 3; text-align: center; padding-bottom: 30px; }
    /* padding-bottom moved to .mm-hero-rest so it doesn't sit under the name */
    .mm-hero-copy { padding-bottom: 0; }
}
@media (min-width: 768px) {
    /* Desktop unchanged: name-block and rest stack normally within the column */
    .mm-hero-rest { margin-top: 0; }
}
@media (max-width: 400px) {
    .mm-hero-name { font-size: clamp(2.1rem, 11vw, 2.8rem); }
}

/*==========================================================================
   Marco Martins — Shared section heading + About
==========================================================================*/
.mm-section-heading {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.15;
    color: var(--mm-ink);
    letter-spacing: -0.5px;
    margin: 8px 0 22px;
}
.mm-about {
    padding: 90px 0;
    background: #fff;
}
/* About image cluster: large family photo + 2 stacked candids */
.mm-about-cluster {
    position: relative;
    display: flex;
    gap: 14px;
}
.mm-about-cluster::before {
    content: "";
    position: absolute;
    left: -16px;
    top: -16px;
    width: 110px;
    height: 110px;
    border: 4px solid var(--mm-accent);
    border-radius: 10px;
    z-index: 0;
}
.mm-about-main {
    flex: 1 1 62%;
    position: relative;
    z-index: 1;
}
.mm-about-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.14);
}
.mm-about-stack {
    flex: 1 1 38%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mm-about-stack img {
    width: 100%;
    height: calc(50% - 7px);
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.mm-about-copy {
    padding-left: 30px;
}
.mm-about-copy p {
    color: #444;
}
.mm-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid #e6e8eb;
}
.mm-stat {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 130px;
}
.mm-stat-num {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1;
    color: var(--mm-primary-dark);
    white-space: nowrap;
}
.mm-stat-unit {
    font-size: 1.125rem;
    font-weight: 600;
}
.mm-stat-label {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #6a6a6a;
    margin-top: 8px;
}
@media (max-width: 991px) {
    .mm-about-copy { padding-left: 15px; }
    .mm-section-heading { font-size: 2rem; }
}
@media (max-width: 767px) {
    .mm-about { padding: 60px 0; }
    .mm-about-copy { padding-left: 0; margin-top: 40px; }
    .mm-stats { gap: 22px; }
    .mm-stat { flex: 1 1 40%; }
}

/*==========================================================================
   Marco Martins — Priorities (blue block, click-to-expand accordion)
==========================================================================*/
.mm-priorities {
    padding: 84px 0;
    background: linear-gradient(150deg, #1d2858 0%, #151d40 55%, #0b1024 100%);
    position: relative;
}
.mm-section-intro {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
}
.mm-intro-light {
    color: rgba(255,255,255,0.92);
}
.mm-intro-light strong { color: #a9d95f; }
/* eyebrow variants */
.mm-eyebrow-orange {
    background: var(--mm-green-bright);
    color: #ffffff;
}
/* Accordion grid: 2 columns on desktop */
.mm-priorities-accordion {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}
.mm-pri {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    align-self: start;
}
.mm-pri[data-open="true"] {
    border-color: var(--mm-accent);
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}
.mm-pri-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}
.mm-pri-head:hover {
    background: #f5f8f1;
}
/* Bold-by-default: dark icon tile, always prominent */
.mm-pri-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--mm-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    transition: background 0.2s ease;
}
.mm-pri[data-open="true"] .mm-pri-icon {
    background: var(--mm-azure);
}
.mm-pri-title {
    flex: 1 1 auto;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mm-ink);
    line-height: 1.1;
}
.mm-pri-toggle {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(142,197,65,0.12);
    color: var(--mm-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: all 0.25s ease;
}
.mm-pri[data-open="true"] .mm-pri-toggle {
    background: var(--mm-accent);
    color: #fff;
    transform: rotate(135deg);
}
.mm-pri-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.mm-pri-body p {
    padding: 0 22px 22px 90px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}
.mm-pri-body ul {
    padding: 0 22px 22px 90px;
    margin: 0;
    list-style: none;
}
.mm-pri-body ul li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.55;
    color: #555;
}
.mm-pri-body ul li:last-child {
    margin-bottom: 0;
}
.mm-pri-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mm-primary);
}
@media (max-width: 767px) {
    .mm-priorities { padding: 56px 0; }
    .mm-priorities-accordion { grid-template-columns: 1fr; }
    .mm-pri-body p { padding-left: 22px; }
    .mm-pri-body ul { padding-left: 22px; }
}

/*==========================================================================
   Marco Martins — Community gallery
==========================================================================*/
.mm-community {
    padding: 90px 0;
    background: #fff;
}
.mm-gallery-carousel {
    margin-top: 40px;
    /* Owl's stage is far wider than the viewport; clip it here or the whole
       page scrolls sideways. Padding leaves room for the nav arrows. */
    position: relative;
    overflow: hidden;
    padding: 0 22px;
}
/* Pre-init: hide all but the first slide so the markup doesn't flash as a stack */
.mm-gallery-carousel:not(.owl-loaded) .mm-gallery-item:not(:first-child) {
    display: none;
}
.mm-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: block;
    cursor: zoom-in;
}
.mm-gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.mm-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.mm-gallery-item:hover img {
    transform: scale(1.06);
}
.mm-gallery-item:hover::after {
    opacity: 1;
}
/* Hover hint */
.mm-gallery-hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translate(-50%, 10px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    color: var(--mm-azure);
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.mm-gallery-item:hover .mm-gallery-hint,
.mm-gallery-item:focus-visible .mm-gallery-hint {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Owl nav + dots, brand-styled */
.mm-gallery-carousel .owl-nav button.owl-prev,
.mm-gallery-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--mm-azure);
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    font-size: 1.5rem;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
.mm-gallery-carousel .owl-nav button.owl-prev { left: 0; }
.mm-gallery-carousel .owl-nav button.owl-next { right: 0; }
.mm-gallery-carousel .owl-nav button.owl-prev:hover,
.mm-gallery-carousel .owl-nav button.owl-next:hover {
    background: var(--mm-primary);
    color: #fff;
}
.mm-gallery-carousel .owl-dots {
    margin-top: 22px;
    text-align: center;
}
.mm-gallery-carousel .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 0 4px;
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    display: inline-block;
    transition: background 0.2s ease, width 0.2s ease;
}
.mm-gallery-carousel .owl-dots .owl-dot.active span {
    width: 26px;
    border-radius: 999px;
    background: var(--mm-primary);
}
@media (max-width: 991px) {
    .mm-gallery-item img { height: 230px; }
}
@media (max-width: 575px) {
    .mm-gallery-item img { height: 260px; }
    .mm-community { padding: 60px 0; }
    /* Touch devices have no hover — keep the hint visible */
    .mm-gallery-hint {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/*==========================================================================
   Marco Martins — Get involved
==========================================================================*/
.mm-getinvolved {
    padding: 90px 0;
    background: linear-gradient(135deg, #1d2858 0%, #0b1024 100%);
    position: relative;
    overflow: hidden;
}
.mm-eyebrow-light {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.mm-heading-light {
    color: #fff;
}
.mm-getinvolved-intro {
    color: rgba(255,255,255,0.92);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 8px;
}
/* Five CTAs (the PDF's list), so five columns on wide desktop rather than
   leaving a lone orphan card on a second row. */
.mm-involve-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px;
}
/* Six cards. Three across on desktop (two tidy rows); below ~1100px the cards
   get too narrow for "Request a lawn sign" to sit on one line, so drop to two. */
@media (max-width: 1199px) {
    .mm-involve-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* All cards in accent red */
.mm-involve-card {
    background: var(--mm-green-bright);
    border: 2px solid var(--mm-green-bright);
    border-radius: 12px;
    padding: 34px 20px;
    text-align: center;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.mm-involve-card:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.mm-involve-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    /* Black on the green card; flips to white-on-green when the card inverts */
    /* White glyph on the red card; the translucent disc darkens the red
       slightly but the mark stays well clear of the 3:1 non-text minimum. */
    color: #ffffff;
    background: rgba(255,255,255,0.16);
    transition: all 0.25s ease;
}
.mm-involve-card:hover .mm-involve-icon {
    /* Card is WHITE on hover, so the disc goes brand blue with a white glyph. */
    background: var(--mm-primary);
    color: #ffffff;
}
.mm-involve-label {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Red card carries WHITE text (6.87:1); blue on red is 2.04:1 and fails. */
    color: #ffffff;
    transition: color 0.25s ease;
}
/* The card inverts to a WHITE fill on hover, so the label must flip back to
   brand blue there (14.03:1) — white-on-white would vanish. */
.mm-involve-card:hover .mm-involve-label {
    color: var(--mm-primary);
}
@media (max-width: 767px) {
    .mm-getinvolved { padding: 60px 0; }
    /* minmax(0,…) so a long label like "Request a lawn sign" can't push its
       column wider than its neighbour — plain 1fr floors at min-content. */
    .mm-involve-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/*==========================================================================
   Marco Martins — Endorsements
==========================================================================*/
.mm-endorse {
    padding: 90px 0;
    background: #f6f8f2;
}
.mm-endorse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 40px;
}
.mm-quote {
    position: relative;
    background: #fff;
    border: 1px solid #e2e6da;
    border-radius: 12px;
    padding: 40px 30px 30px;
    margin: 0;
}
.mm-quote-mark {
    position: absolute;
    top: 6px;
    left: 24px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--mm-primary);
    opacity: 0.25;
}
.mm-quote blockquote {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--mm-ink);
    margin: 10px 0 24px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}
.mm-quote figcaption {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e8ece0;
    padding-top: 16px;
}
.mm-quote-name {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--mm-primary-dark);
}
.mm-quote-role {
    font-size: 0.875rem;
    color: #777;
    margin-top: 2px;
}
@media (max-width: 991px) {
    .mm-endorse-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
    .mm-endorse { padding: 60px 0; }
}

/*==========================================================================
   Marco Martins — Contact
==========================================================================*/
.mm-contact {
    padding: 90px 0;
    background: #fff;
}
.mm-contact-lead {
    font-size: 1.125rem;
    color: #555;
    margin-bottom: 28px;
}
.mm-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mm-contact-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
/* Centered variant — used where the contact details stand alone (no form column) */
.mm-contact-list-center {
    display: inline-block;
    max-width: 100%;
    text-align: left;
}
.mm-contact-list-center li:last-child {
    margin-bottom: 0;
}
/* Let long values (email address) wrap instead of forcing page-wide overflow on narrow phones */
.mm-contact-list-center a {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.mm-contact-ic {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(142,197,65,0.10);
    color: var(--mm-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.mm-contact-k {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;   /* 4.83:1 on white; #999 was 2.85:1 and failed AA */
    margin-bottom: 2px;
}
.mm-contact-list a,
.mm-contact-v {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mm-ink);
}
.mm-contact-list a:hover {
    color: var(--mm-primary-dark);
}
.mm-contact-card {
    background: #f6f8f2;
    border: 1px solid #e2e6da;
    border-radius: 14px;
    padding: 36px 34px;
}
.mm-contact-card h3 {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 22px;
    color: var(--mm-ink);
}
.mm-field-row {
    display: flex;
    gap: 14px;
}
.mm-contact-form input,
.mm-contact-form textarea {
    width: 100%;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    padding: 13px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    margin-bottom: 14px;
    background: #fff;
    color: var(--mm-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mm-contact-form input:focus,
.mm-contact-form textarea:focus {
    outline: none;
    border-color: var(--mm-primary);
    box-shadow: 0 0 0 3px rgba(142,197,65,0.15);
}
.mm-contact-form textarea {
    resize: vertical;
}
.mm-contact-form .mm-btn {
    width: 100%;
    margin-top: 4px;
}
@media (max-width: 767px) {
    .mm-contact { padding: 60px 0; }
    .mm-contact-card { margin-top: 34px; }
    .mm-field-row { flex-direction: column; gap: 0; }
}

/*==========================================================================
   Marco Martins — Footer
==========================================================================*/
.mm-footer {
    background: #0b0b0b;
    color: #dfe6d4;
    padding: 64px 0 0;
}
.mm-footer-top {
    padding-bottom: 40px;
}
.mm-footer h4 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}
.mm-footer-wordmark {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.875rem;
    color: #fff;
    display: block;
    margin-bottom: 10px;
}
.mm-footer-tag {
    color: #c2cfb2;
    font-size: 1rem;
    max-width: 24em;
    margin-bottom: 20px;
}
.mm-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    margin-right: 10px;
    transition: all 0.25s ease;
}
.mm-footer-social a:hover {
    background: var(--mm-primary);
    color: #fff;
    transform: translateY(-3px);
}
.mm-footer-contact,
.mm-footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mm-footer-contact li,
.mm-footer-nav li {
    margin-bottom: 12px;
    color: #dfe6d4;
    font-size: 0.9875rem;
}
.mm-footer-contact li i {
    color: var(--mm-primary);
    margin-right: 10px;
    width: 16px;
    text-align: center;
}
.mm-footer-contact a,
.mm-footer-nav a {
    color: #dfe6d4;
    transition: color 0.2s ease;
}
.mm-footer-contact a:hover,
.mm-footer-nav a:hover {
    color: #fff;
}
.mm-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 22px 0;
    text-align: center;
}
.mm-footer-bottom p {
    margin: 0;
    color: #b6bcd0;   /* blue-grey on near-black, 8.2:1 */
    font-size: 0.875rem;
}
@media (max-width: 767px) {
    .mm-footer { padding-top: 48px; }
    .mm-footer-top > div { margin-bottom: 30px; }
}


/*==========================================================================
   Marco Martins — Logo wordmark
==========================================================================*/
.mm-logo {
    display: inline-block;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    color: var(--mm-ink);
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: nowrap;
}
.mm-logo:hover {
    color: var(--mm-primary-dark);
}
.mm-logo-dot {
    color: var(--mm-primary);
}

/*==========================================================================
   Marco Martins — Scroll reveal motion (subtle, respects reduced-motion)
==========================================================================*/
.mm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}
.mm-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .mm-reveal { opacity: 1; transform: none; transition: none; }
    .mm-marquee-track { animation: none; }
}

/*==========================================================================
   Marco Martins — Desktop header: everything on ONE line, thinner
==========================================================================*/
/* One-line desktop header only at >=1200px (enough room for all items).
   Below 1200px we use the mobile hamburger (see overrides further down). */
@media (min-width: 1200px) {
    .header-bottom .col-lg-12 {
        display: flex;
        align-items: center;
        gap: 22px;
    }
    /* Logo on the left, thinner top/bottom padding */
    .header-area .logo {
        padding: 0;
        margin-right: auto;      /* pushes nav/search/button to the right */
        float: none;
    }
    /* Nav inline, not floated, no wrapping */
    .header-bottom .main-menu {
        float: none;
        order: 2;
    }
    .header-bottom .main-menu nav > ul {
        display: flex;
        align-items: center;
        margin: 0;
        flex-wrap: nowrap;
    }
    .header-bottom .main-menu ul li {
        white-space: nowrap;
    }
    .header-bottom .main-menu ul li a {
        padding: 20px 0;         /* controls header height */
    }
    /* Search + button group on the far right */
    .header-bottom .header-search {
        float: none;
        order: 3;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 0;
        white-space: nowrap;
    }
    .header-bottom .header-search #search {
        float: none;
    }
    /* hide the empty search text input; keep just the icon */
    .header-bottom .header-search .form-control {
        display: none;
    }
    .header-button.floatright {
        margin-left: 0;
        float: none;
    }
    .header-bottom .header-button > a {
        white-space: nowrap;
    }
    .header-bottom {
        padding: 6px 0;
    }
}
/* Between 992px and 1199px: hide the desktop nav row, use the hamburger */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-bottom {
        display: none;
    }
    .mobile-menu-area.d-block.d-lg-none {
        display: block !important;
    }
}

/*==========================================================================
   Marco Martins — Mobile header refinements
   Thinner top bar, hide logo on mobile, search next to hamburger,
   remove leftover template red accents.
==========================================================================*/
/* Search icon only appears on mobile (base: hidden on desktop) */
.mm-mobile-search { display: none; }
/* Mobile donate CTA — the desktop header button lives in .header-bottom,
   which is display:none below 768px, so mobile needs its own control. This
   one is pinned into the azure MENU bar left of the hamburger. Hidden on
   desktop, where the orange header button already covers it. */
.mm-mobile-donate { display: none; }
.mobile-menu-area {
    position: relative;
    background: var(--mm-azure) !important;   /* was template red */
}
@media (max-width: 1199px) {
    /* Thinner top contact bar */
    .header-top {
        padding: 7px 0;
    }
    .header-top-info ul li a {
        font-size: 0.875rem;
    }
    /* Hide the whole white header-bottom (logo + search box + button) on mobile.
       The azure MENU bar becomes the mobile header. */
    .header-bottom {
        display: none;
    }
    /* Search icon lives inside the MENU (mean) bar, left of the hamburger */
    .mm-mobile-search {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 52px;
        height: 56px;
        width: 44px;
        color: #fff;
        font-size: 1.25rem;
        z-index: 999;
        cursor: pointer;
    }
    .mm-mobile-search:hover { color: var(--mm-accent); }
    /* Wordmark at the LEFT of the MENU bar (main.js prepends it). Absolutely
       positioned so it does not affect the bar's height or push the pill and
       hamburger, which are themselves absolutely positioned from the right. */
    .mm-mobile-logo {
        display: block;
        position: absolute;
        /* Same reason as the donate pill: a fixed top offset, so the mark stays
           in the header strip when the menu expands the bar. */
        top: 13px;
        /* 0, not a positive inset: .mean-bar sits inside a padded container, so
           its own left edge is already indented ~87px from the viewport. Adding
           16px on top pushed the mark into the donate pill. */
        left: 0;
        z-index: 1000;
        line-height: 0;
    }
    .mm-mobile-logo img {
        display: block;
        /* Sized to the gap between the bar's left edge and the donate pill.
           At 390px that gap is ~75px, and the pill/hamburger are pinned from
           the right, so this is the binding constraint on the narrowest common
           phone. Verify at 320px if the pill copy ever gets longer. */
        width: 68px;
        height: auto;
        max-width: none;
    }

    /* Donate pill in the MENU bar, left of the hamburger. main.js moves this
       element inside .mean-bar on load, so `right` is measured from the bar's
       own right edge — the same edge the hamburger is pinned to — and stays
       correct at every container width. */
    .mm-mobile-donate {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        /* Pinned to the TOP of the bar, not centred on it. When the menu opens,
           .mean-bar grows to hold the nav list; `top:50%` then re-centres this
           pill on the tall bar and it floats over the menu items. A fixed
           offset keeps it in the header strip where it belongs. */
        top: 14px;
        right: 58px;
        z-index: 1000;
        padding: 7px 16px;
        border-radius: 999px;
        background: var(--mm-accent);
        color: #fff;
        font-family: 'Oswald', 'Arial Narrow', sans-serif;
        font-weight: 600;
        font-size: 0.8125rem;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }
    .mm-mobile-donate:hover,
    .mm-mobile-donate:focus {
        background: var(--mm-accent-dark);
        color: #fff;
    }
}
/* Very small phones: keep the pill clear of the ~54px hamburger */
@media (max-width: 359px) {
    .mm-mobile-donate {
        padding: 6px 11px;
        font-size: 0.75rem;
        right: 60px;
    }
}

/* Mobile hero action row — Donate + Volunteer directly above the
   "Candidate — Toronto Ward 9" eyebrow.
   WHY IT EXISTS: below 768px the menu bar has room only for the logo, the
   donate pill and the hamburger, so Volunteer is reachable only by opening the
   menu — which people do not do. On a phone this is the first thing on the
   page, so the two asks are visible without a tap.
   Mobile ONLY: from 768px up the menu-bar CTA row covers it, and from 1200px
   the desktop header does. Showing it there as well would be a third copy of
   the same two buttons on one screen. */
.mm-hero-actions { display: none; }

@media (max-width: 767px) {
    .mm-hero-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 18px;
        /* The hero column is text-align:center on mobile, which leaves the flex
           row shrink-wrapped and floating in the middle. width:100% makes the
           two buttons span the same width as the eyebrow below them. */
        width: 100%;
    }
    .mm-hero-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1 1 0;          /* two equal buttons across the width */
        padding: 12px 14px;
        border: 1px solid var(--mm-green-bright);
        border-radius: 999px;
        background: transparent;
        color: var(--mm-green-bright);
        font-family: 'Oswald', 'Arial Narrow', sans-serif;
        font-weight: 600;
        font-size: 0.875rem;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
        /* 44px min target — Apple's HIG minimum for a comfortable tap. */
        min-height: 44px;
    }
    /* Donate is the money ask, so it is the solid one. The red fill carries
       WHITE text (6.87:1); black on it would be 2.75:1 and fail. */
    .mm-hero-action-donate {
        background: var(--mm-green-bright);
        color: #ffffff;
        border-color: var(--mm-green-bright);
    }
    .mm-hero-action-donate:hover,
    .mm-hero-action-donate:focus {
        background: var(--mm-green-bright-dark);
        color: #ffffff;
    }
    .mm-hero-action:not(.mm-hero-action-donate):hover,
    .mm-hero-action:not(.mm-hero-action-donate):focus {
        background: var(--mm-green-bright);
        color: #ffffff;
    }
}

/* Same row on the six secondary pages, which have no hero. Two differences
   from the hero version: it sits on the LIGHT page background, so the outlined
   button uses --mm-accent-dark (MEASURED 5.72:1 on #f4f7ef, and 6.19:1 for
   white on its filled hover state). Not --mm-accent, which is only 3.90:1 and
   fails the 4.5:1 text threshold, and certainly not the bright green, which is
   1.90:1 there. The row is centred to match the eyebrow/heading above it.
   The page a button points AT omits that button (no "Donate" on donate.html),
   so a single remaining button is centred rather than stretched full width. */
@media (max-width: 767px) {
    .mm-page-actions {
        justify-content: center;
        margin-bottom: 20px;
    }
    .mm-page-actions .mm-hero-action {
        flex: 0 1 auto;
        min-width: 132px;
        border-color: var(--mm-accent-dark);
        color: var(--mm-accent-dark);
    }
    .mm-page-actions .mm-hero-action-donate {
        background: var(--mm-green-bright);
        border-color: var(--mm-green-bright);
        color: #ffffff;
    }
    .mm-page-actions .mm-hero-action:not(.mm-hero-action-donate):hover,
    .mm-page-actions .mm-hero-action:not(.mm-hero-action-donate):focus {
        background: var(--mm-accent-dark);
        color: #fff;
    }
}

/* Tablet / small-laptop CTA row in the menu bar.
   THE PROBLEM THIS SOLVES: `.header-bottom` (the whole desktop header, with the
   Updates/Volunteer/Donate buttons) is display:none at max-width 1199px. That
   band is not just phones — it covers iPad landscape (1024) and any laptop
   browser window that is not maximised, so those visitors saw NO CTA buttons at
   all, only a hamburger. Marco reported exactly this.
   Donate already had .mm-mobile-donate in the bar. This row gives Updates and
   Volunteer the same treatment, but only from 768px up, where there is room
   beside the logo and pill. Below 768px the bar is too narrow for five items,
   so those two stay in the hamburger nav (which lists them). */
.mm-bar-ctas { display: none; }

@media (min-width: 768px) and (max-width: 1199px) {
    .mm-bar-ctas {
        display: flex;
        align-items: center;
        gap: 8px;
        position: absolute;
        top: 12px;
        /* Clears the donate pill, which is pinned at right:58px and is ~99px
           wide, plus the hamburger to its right. */
        right: 172px;
        z-index: 1000;
    }
    .mm-bar-cta {
        display: inline-block;
        padding: 7px 15px;
        border: 1px solid var(--mm-green-bright);
        border-radius: 999px;
        color: var(--mm-green-bright);
        background: transparent;
        font-family: 'Oswald', 'Arial Narrow', sans-serif;
        font-weight: 600;
        font-size: 0.8125rem;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }
    /* Red fill takes WHITE text — black on it is ~2.75:1 and fails. */
    .mm-bar-cta:hover,
    .mm-bar-cta:focus {
        background: var(--mm-green-bright);
        color: #ffffff;
    }
}

/* Recolor meanmenu bar + reveal to brand (kill template red/dark) */
.mean-container .mean-bar {
    background: var(--mm-azure) !important;
    padding: 4px 0;
    min-height: 48px;
    position: relative;
}
.mean-container a.meanmenu-reveal {
    color: #fff !important;
    padding: 13px 16px 14px;
}
.mean-container a.meanmenu-reveal span {
    background: #fff !important;
}
.mean-container .mean-nav {
    background: var(--mm-azure) !important;
    margin-top: 0;
}
.mean-container .mean-nav ul li,
.mean-container .mean-nav ul li a {
    background: var(--mm-azure) !important;
    border-top-color: rgba(255,255,255,0.14) !important;
    color: #fff !important;
}
.mean-container .mean-nav ul li a:hover {
    background: #1a1a1a !important;
    color: #a9d95f !important;
}
.mean-container .mean-nav ul li a.mean-expand {
    background: rgba(255,255,255,0.08) !important;
}
/* Footer "Built with CivicOne" link. The footer is near-black, where brand
   blue measures 1.4:1 — legible only as white. */
.mm-footer-bottom a {
    color: #ffffff;
    font-weight: 600;
}
.mm-footer-bottom a:hover {
    color: #fff;
}

/*==========================================================================
   Marco Martins — Form pages (donate / request a sign / volunteer / stay connected)
==========================================================================*/
.mm-formpage {
    padding: 80px 0 90px;
    background: #f6f8f2;
}
.mm-formpage .mm-section-heading {
    margin-top: 6px;
}
.mm-formpage .mm-section-intro {
    margin: 14px auto 0;
    max-width: 640px;
}
.mm-form-embed {
    margin-top: 40px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.08);
    overflow: hidden;
}
.mm-form-embed iframe {
    display: block;
    width: 100%;
    border: 0;
}
/* Cap the frame to about one screen and let the form scroll INSIDE it.
   CivicOne sends no submit signal, so we can't shrink the frame after
   submit; without a cap the post-submit thank-you renders at the top of a
   tall frame and a scrolled-down mobile user sees only the empty lower
   half. Capping height keeps the whole frame within one screen, so the
   thank-you is always visible. The per-iframe inline height is overridden
   here. */
.mm-form-embed:not(.mm-form-embed-auto) iframe {
    height: 80vh !important;
    min-height: 520px;
    max-height: 760px;
}
/* Opt out of the cap for forms sized by civicone:resize postMessages.
   EVERY embedded CivicOne form sends these, not just the donation one:
   FormPage calls useEmbedAutoResize(isEmbed) unconditionally. An earlier note
   here said "the donation form only" — that was wrong, and it is why all five
   form pages now use this class.
   Those frames are sized by js/civicone-embed.js to their exact content
   height via the inline style attribute, so they never scroll internally and
   the post-submit thank-you shrinks the frame instead of stranding it in dead
   space. Deliberately no height/!important here — that would override the
   inline height the resize listener sets. */
.mm-form-embed-auto iframe {
    min-height: 640px;
    max-height: none;
    transition: height 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .mm-form-embed-auto iframe { transition: none; }
}
.mm-form-note {
    margin-top: 18px;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #616b58;
}
.mm-form-back {
    margin-top: 22px;
    text-align: center;
}
.mm-form-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.875rem;
    color: var(--mm-azure);
    transition: color 0.2s ease;
}
.mm-form-back a:hover {
    color: var(--mm-primary);
}
@media (max-width: 767px) {
    .mm-formpage { padding: 56px 0 64px; }
    /* responsive.css pins .container to a fixed 300px/450px on mobile, which
       squeezes an embedded form into ~63% of a phone screen. Form pages carry
       nothing but the form, so let their container use the full width. */
    .mm-formpage .container {
        width: auto !important;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
    .mm-form-embed { margin-top: 28px; }
}

/*==========================================================================
   Marco Martins — In the news
==========================================================================*/
.mm-news {
    padding: 90px 0;
    background: #f6f8f2;
}
.mm-news-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
/* Below ~1200px three cards get too cramped for the headlines, so drop to
   two across; the single-column mobile rule further down still applies. */
@media (max-width: 1199px) {
    .mm-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mm-news-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    padding: 30px 30px 26px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mm-news-card:hover {
    border-color: var(--mm-primary);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    transform: translateY(-3px);
}
.mm-news-outlet {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mm-primary);
}
.mm-news-headline {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 1.3125rem;
    line-height: 1.3;
    color: var(--mm-ink);
}
.mm-news-date {
    font-size: 0.9375rem;
    color: #667;
}
.mm-news-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--mm-azure);
    transition: color 0.2s ease, gap 0.2s ease;
}
.mm-news-card:hover .mm-news-link {
    color: var(--mm-primary);
    gap: 10px;
}
@media (max-width: 767px) {
    .mm-news { padding: 60px 0; }
    .mm-news-grid { grid-template-columns: 1fr; gap: 18px; }
}

/*----------------------------------------*/
/*  Marco Martins — single-photo about cluster
/*----------------------------------------*/
/* The about section uses one portrait (not a 3-photo cluster), so the
   main photo takes the full width and keeps a portrait-friendly aspect. */
.mm-about-cluster.mm-about-single .mm-about-main {
    flex: 1 1 100%;
}
/* The rink photo is a 2:3 portrait — match it so nothing is cropped away
   (a 4:5 box would cut ~17%, losing the trees and the base of the net). */
.mm-about-cluster.mm-about-single .mm-about-main img {
    /* No aspect-ratio or max-height: let the 2:3 photo set its own box so
       object-fit: cover has nothing to crop. */
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    object-fit: contain;
}

/*----------------------------------------*/
/*  Marco Martins — the rink (video section)
/*----------------------------------------*/
.mm-rink {
    padding: 100px 0;
    background: #f6f8f2;
}
.mm-rink-row {
    margin-top: 46px;
}
.mm-rink-video {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0,0,0,0.20);
    background: var(--mm-ink);
    /* Matches the 576x1024 encode so the poster never letterboxes. The video
       is object-fit:cover, so a ratio that disagrees with the file CROPS it --
       810/1066 against this 9:16 source cut ~13% off each side, and Marco is
       centred in frame. Re-check this if the video is ever re-cropped. */
    aspect-ratio: 576 / 1024;
    max-height: 660px;
    margin: 0 auto;
}
.mm-rink-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--mm-ink);
}
.mm-rink-copy {
    padding-left: 34px;
}
.mm-rink-quote {
    margin: 0 0 22px;
    padding: 0 0 0 20px;
    border-left: 4px solid var(--mm-accent);
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--mm-azure);
}
.mm-rink-copy p {
    margin-bottom: 16px;
    line-height: 1.7;
}
.mm-rink-copy .mm-btn {
    margin-top: 12px;
}
@media (max-width: 991px) {
    .mm-rink-copy {
        padding-left: 0;
        margin-top: 34px;
    }
    .mm-rink-video {
        max-width: 420px;
    }
}
@media (max-width: 767px) {
    .mm-rink { padding: 60px 0; }
    .mm-rink-quote { font-size: 1.3rem; }
}

/*----------------------------------------*/
/*  Marco Martins — priority summary line
/*----------------------------------------*/
.mm-pri-summary {
    margin: 0 0 14px;
    font-weight: 600;
    color: var(--mm-azure);
    line-height: 1.6;
}

/*----------------------------------------*/
/*  Marco Martins — neighbourhood action plan
/*----------------------------------------*/
.mm-hoods {
    padding: 100px 0;
    background: #fff;
}
.mm-hood-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.mm-hood {
    padding: 28px 26px;
    background: #f6f8f2;
    border: 1px solid #e2e6da;
    border-top: 4px solid var(--mm-accent);
    border-radius: 10px;
}
.mm-hood-title {
    margin: 0 0 16px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--mm-azure);
}
.mm-hood-list {
    margin: 0;
    padding-left: 20px;
    /* main.css resets list-style on ul, so restore it here */
    list-style: disc outside;
}
.mm-hood-list li::marker { color: var(--mm-accent); }
.mm-hood-list li {
    margin-bottom: 10px;
    line-height: 1.65;
    color: #333;
}
.mm-hood-list li:last-child { margin-bottom: 0; }
.mm-wardwide {
    margin-top: 34px;
    padding: 32px 34px;
    background: var(--mm-azure);
    border-radius: 12px;
}
.mm-wardwide-title {
    margin: 0 0 18px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    color: #fff;
}
.mm-wardwide-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 30px;
}
.mm-wardwide-list li {
    position: relative;
    padding-left: 26px;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
}
.mm-wardwide-list li::before {
    content: "\f00c";
    font-family: 'FontAwesome';
    position: absolute;
    left: 0;
    top: 1px;
    color: #a9d95f;
}
@media (max-width: 991px) {
    .mm-hood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-wardwide-list { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .mm-hoods { padding: 60px 0; }
    .mm-hood-grid { grid-template-columns: 1fr; gap: 18px; }
    .mm-wardwide { padding: 26px 22px; }
}

/*----------------------------------------*/
/*  Marco Martins — first 100 days
/*----------------------------------------*/
.mm-days {
    padding: 100px 0;
    background: linear-gradient(150deg, #1d2858 0%, #151d40 55%, #0b1024 100%);
}
.mm-day-list {
    margin: 46px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.mm-day {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
}
.mm-day-num {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mm-green-bright);
    color: #ffffff;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}
.mm-day-text {
    line-height: 1.65;
    color: rgba(255,255,255,0.94);
}
@media (max-width: 991px) {
    .mm-day-list { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .mm-days { padding: 60px 0; }
    .mm-day { padding: 18px 18px; gap: 14px; }
}

/* Five-across CTA row: tighten padding and label size so the longest label
   ("Share your Ward 9 concern") stays readable in a narrower column. */
@media (min-width: 1200px) {
    .mm-involve-card { padding: 28px 14px; gap: 13px; }
    .mm-involve-icon { width: 58px; height: 58px; font-size: 1.4rem; }
    .mm-involve-label { font-size: 0.98rem; letter-spacing: 0.2px; }
}

/* Header social row — right-aligned in the header-top bar. Only Instagram is
   live; Facebook/X are commented out in the markup until those accounts exist. */
.header-social ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.header-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--mm-azure);
    background: rgba(142,197,65,0.09);
    transition: color 0.2s ease, background 0.2s ease;
}
.header-social li a .fa { font-size: 15px; }
.header-social li a:hover {
    background: var(--mm-primary);
    color: #fff;
}

/*----------------------------------------*/
/*  Marco Martins — community photos under the video row
/*  Two photos of different ratios (4:3 landscape flooding shot, 2:3 portrait
/*  family shot) sharing one row, so a fixed row height + object-fit crops
/*  them to match rather than letting the portrait tower over the landscape.
/*----------------------------------------*/
.mm-rink-photos {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 22px;
    align-items: start;
}
.mm-rink-photo {
    margin: 0;
}
.mm-rink-photo img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}
/* Keep Marco (left of frame) and the faces in view when cropping */
.mm-rink-photo:first-child img { object-position: center 45%; }
.mm-rink-photo:last-child img { object-position: center 32%; }
.mm-rink-photo figcaption {
    margin-top: 10px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #616b58;
}
@media (max-width: 767px) {
    .mm-rink-photos {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 28px;
    }
    .mm-rink-photo img { height: 260px; }
}

/* Footer "Proud to call Davenport home." line (from the flyer). The footer is
   near-black, where brand red is only 2.86:1 — this line is set in white and
   the red stays on the wordmark above it, which is artwork, not body text. */
.mm-footer-proud {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #ffffff;
}

/*----------------------------------------
    Updates & events page (updates.html)
-----------------------------------------*/
/* Events are rendered by js/events.js from the CivicOne public API. The
   states (loading / empty / error) share .mm-events-state so all three read
   the same way and the list never collapses to a bare gap. */
.mm-updates-subhead {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--mm-ink);
    margin: 48px 0 20px;
}
.mm-events-state {
    margin: 0;
    padding: 28px 24px;
    background: #f6f8f3;
    border: 1px dashed #c8d4b6;
    border-radius: 4px;
    color: #4a5340;
    font-size: 1rem;
    text-align: center;
}
.mm-events-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mm-event {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.mm-event:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.09);
    transform: translateY(-2px);
}
/* Date block: the red fill carries WHITE text (6.87:1). Never black here —
   black on this red measures ~2.75:1 and fails. */
.mm-event-date {
    flex: 0 0 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 8px;
    background: var(--mm-green-bright);
    color: #ffffff;
    border-radius: 4px;
    text-align: center;
}
.mm-event-weekday {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.mm-event-day {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
}
.mm-event-time {
    font-size: 0.8125rem;
    font-weight: 600;
}
.mm-event-body {
    flex: 1 1 auto;
    min-width: 0;   /* lets long titles wrap instead of stretching the row */
}
.mm-event-title {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mm-ink);
    margin: 0 0 6px;
}
.mm-event-place {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    color: #5c6652;
}
.mm-event-place .fa { color: var(--mm-accent); margin-right: 2px; }
.mm-event-desc {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4a5340;
}
/* Deep green + white (7.3:1) — the bright green is reserved for the date
   block, so the button stays distinct from it. */
.mm-event-rsvp {
    display: inline-block;
    padding: 9px 22px;
    background: var(--mm-accent);
    color: #fff;
    border-radius: 4px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: background 0.25s ease;
}
.mm-event-rsvp:hover,
.mm-event-rsvp:focus {
    background: var(--mm-accent-dark);
    color: #fff;
}
.mm-updates-signup { margin-top: 56px; }
.mm-updates-signup .mm-updates-subhead { margin-bottom: 12px; }
/* Short-form embeds. The newsletter form is a SINGLE email field, and the
   shared `.mm-form-embed-auto iframe` floor of 640px — sized for the
   multi-field forms (volunteer, donate, lawn sign) — left ~300px of empty
   white box under its Subscribe button. js/civicone-embed.js already sizes
   each frame to its real content via postMessage (this one asks for ~245px);
   this just lowers the CSS floor out of that message's way.
   Applied to updates.html AND connect.html, which embed the SAME newsletter
   form. Add this class to any future short embed rather than lowering the
   shared floor, which the longer forms still rely on. */
.mm-form-embed-short iframe {
    /* 260px, not 220: the form posts an early 160px (pre-layout) before the
       real ~245px, and on some loads only that first message arrives. The
       floor therefore has to be a correct resting height on its own, not just
       a collapse guard — 260 fits the whole form with a little slack. When the
       245px message does arrive it is below this floor, so the frame simply
       stays at 260 rather than jumping. */
    min-height: 260px;
}
/* `.mm-formpage .mm-section-intro` centres itself with `margin: 14px auto 0`
   and a 640px cap — correct for the centred page header at the top, but it
   indents this left-aligned block away from the heading above it. Reset it so
   the sign-up copy shares the same left edge as everything else on the page. */
.mm-updates-signup .mm-section-intro {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

@media (max-width: 575px) {
    /* Stack the date block above the details; a 104px column plus text is
       too tight to read on a narrow phone. */
    .mm-event {
        flex-direction: column;
        gap: 14px;
    }
    .mm-event-date {
        flex: 0 0 auto;
        flex-direction: row;
        gap: 8px;
        align-self: flex-start;
        padding: 8px 14px;
    }
    .mm-event-day { font-size: 1.0625rem; }
    .mm-updates-subhead { font-size: 1.5rem; }
}

/*----------------------------------------
    Brand marks (supplied artwork, 2026-08-22)
-----------------------------------------*/
/* The supplied PNGs are solid #8ec640 — the brand green — on transparency.
   That is 9.26:1 on the black footer (fine) but only 2.04:1 on the white
   header, so the header uses an INK-recoloured copy of the same wordmark
   (18.88:1) rather than the green one. Same rule as the rest of the site:
   bright green never carries a light background. */

/* VOTE mark above the footer wordmark. alt="" in the markup because the
   wordmark immediately below already announces the name. */
.mm-footer-vote {
    display: block;
    width: 132px;
    height: auto;
    margin-bottom: 14px;
}

/* Header wordmark: replaces the text logo with the supplied artwork. The <a>
   keeps its accessible name from the img alt, so the link is still announced
   as "Marco Martins".
   Sized by WIDTH, not height. The artwork stacks MARCO over MARTINS, so
   constraining its height shrinks each line to roughly half — at height:46px
   the mark came out 38px wide and read as smaller than the 13px nav beside
   it. Width sizing lets it hold the left of the header the way the old
   single-line text logo did. */
/* The header row (.col-lg-12) is a FLEX container, so .logo is a flex item and
   shrinks to its content. With the text logo that was harmless; with an image
   the item collapsed to ~38px and the global `img { max-width: 100% }` squeezed
   the artwork down to match. `flex: 0 0 auto` stops the shrink so the mark can
   hold its declared width. */
.logo,
.mm-logo {
    flex: 0 0 auto;
}
.mm-logo-img {
    display: block;
    width: 148px;
    max-width: none;   /* beat the global img { max-width: 100% } */
    height: auto;
}

/* Mobile bar wordmark. .header-bottom (and the desktop logo with it) is
   display:none below 768px, so the menu bar had no branding at all. js/main.js
   prepends this into .mean-bar next to the donate pill.
   Uses the GREEN artwork, not the ink one: the bar is black, where green is
   9.26:1 and the ink mark would be invisible. Hidden on desktop, where the
   header logo already covers it. */
/* Desktop-only hide. This MUST be a min-width query, not a bare rule: it sits
   AFTER the mobile styles in the file, so an unconditional `display:none` here
   would override them at every width and the bar logo would never appear. */
@media (min-width: 1200px) {
    .mm-mobile-logo { display: none; }
}

@media (max-width: 991px) {
    .mm-logo-img { width: 132px; }
    .mm-footer-vote { width: 116px; }
}
@media (max-width: 767px) {
    .mm-logo-img { width: 118px; }
    .mm-footer-vote { width: 108px; }
}

/*----------------------------------------
    Contribution rebate box (donate.html)
-----------------------------------------*/
/* Sits ABOVE the donation form on purpose: a contributor should know the
   rebate exists BEFORE choosing an amount, not after paying.
   Contrast, all measured against the white card:
     heading #111111        18.88:1
     body    #3f4a36         9.36:1
     link    --mm-accent-dark 6.19:1  (NOT --mm-accent, only 4.22:1)
     table header = white on brand red, 6.87:1 (black there is 2.75:1) */
.mm-rebate {
    margin-top: 40px;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-left: 4px solid var(--mm-green-bright);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.mm-rebate-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mm-ink);
}
.mm-rebate-title .fa {
    color: var(--mm-accent-dark);
    font-size: 1.125rem;
    flex: 0 0 auto;
}
.mm-rebate-lead {
    margin: 0 0 18px;
    font-size: 1rem;
    line-height: 1.65;
    color: #3f4a36;
}
.mm-rebate-lead strong { color: var(--mm-ink); }
/* The table can be wider than a phone; let IT scroll rather than the page. */
.mm-rebate-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 18px;
}
.mm-rebate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.mm-rebate-caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 8px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #5c6652;
}
.mm-rebate-caption strong { color: #3f4a36; }
.mm-rebate-table th {
    background: var(--mm-green-bright);
    color: #ffffff;        /* red fill: white text, 6.87:1 */
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: left;
    padding: 9px 14px;
    white-space: nowrap;
}
.mm-rebate-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #e6eade;
    color: #3f4a36;
    white-space: nowrap;
}
.mm-rebate-table tbody tr:nth-child(even) { background: #f6f8f2; }
.mm-rebate-table tbody tr:last-child td {
    border-bottom: 0;
    font-weight: 700;
    color: var(--mm-ink);
}
.mm-rebate-notes {
    margin: 0 0 16px;
    /* The template applies a global `ul { list-style: none }` reset, so the
       markers must be restored explicitly — without this the four points read
       as one run-on paragraph. */
    list-style: disc outside;
    padding-left: 22px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #3f4a36;
}
.mm-rebate-notes li { margin-bottom: 7px; }
.mm-rebate-notes li:last-child { margin-bottom: 0; }
.mm-rebate-source {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #e6eade;
    font-size: 0.875rem;
    color: #5c6652;
}
.mm-rebate-source a {
    color: var(--mm-accent-dark);
    font-weight: 600;
    text-decoration: underline;
}
.mm-rebate-source a:hover,
.mm-rebate-source a:focus { color: var(--mm-ink); }
.mm-rebate-source .fa { font-size: 0.75rem; }

@media (max-width: 575px) {
    .mm-rebate { padding: 20px 14px; }
    .mm-rebate-title { font-size: 1.1875rem; }
    .mm-rebate-lead,
    .mm-rebate-notes { font-size: 0.9375rem; }
    /* Fit BOTH columns on a phone rather than relying on a horizontal swipe
       nobody can see is available. The cells are short ("$1,200", "$641.67"),
       so tighter padding and a slightly smaller face is enough; the wrapper
       keeps overflow-x as a fallback if a longer label is ever added. */
    .mm-rebate-table { font-size: 0.875rem; }
    .mm-rebate-table th,
    .mm-rebate-table td { padding: 8px 8px; }
    .mm-rebate-table th:last-child,
    .mm-rebate-table td:last-child { text-align: right; }
}

/*==========================================================================
  About Marco (about-marco.html)
  A prose page reusing .mm-formpage's shell, so it inherits the same padding,
  background and heading treatment as the five form pages.
==========================================================================*/
.mm-bio {
    margin-top: 40px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.08);
    padding: 40px 44px;
}
.mm-bio p {
    margin: 0 0 20px;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #2c3a1c;
}
.mm-bio p:first-child {
    /* Lead paragraph: slightly larger, and the only one that gets the green
       rule, so the eye lands on it before the career detail below. */
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--mm-ink);
    padding-bottom: 22px;
    border-bottom: 3px solid var(--mm-green-bright);
}
.mm-bio p:last-child { margin-bottom: 0; }

.mm-bio-cta {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.mm-bio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 12px 26px;
    border-radius: 4px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9375rem;
    /* Outline button on the light page background: black text and border. */
    color: var(--mm-ink);
    border: 2px solid var(--mm-ink);
    background: transparent;
    transition: all 0.2s ease;
}
.mm-bio-btn:hover,
.mm-bio-btn:focus {
    background: var(--mm-ink);
    color: #fff;
}
/* The brand red is dark (red + black text = 2.75:1, FAIL), so a solid red
   fill carries WHITE text -- the same pairing as the printed material. */
.mm-bio-btn-primary {
    background: var(--mm-green-bright);
    border-color: var(--mm-green-bright);
    color: #ffffff;
}
.mm-bio-btn-primary:hover,
.mm-bio-btn-primary:focus {
    background: var(--mm-cyan-deep);
    border-color: var(--mm-cyan-deep);
    color: var(--mm-ink);
}
@media (max-width: 767px) {
    .mm-bio { padding: 28px 22px; margin-top: 30px; }
    .mm-bio p { font-size: 1rem; line-height: 1.7; }
    .mm-bio p:first-child { font-size: 1.0625rem; }
    .mm-bio-btn { width: 100%; }
}

/*==========================================================================
  Endorsements (#endorsements) + pop-up
  Cards open one shared dialog. Brand rule applies: blue and red are dark, so
  anything on them is WHITE text.
  The section ships with `hidden` on it — see the comment in index.html.
==========================================================================*/
.mm-endorse {
    padding: 90px 0 100px;
    background: #f6f7fb;
}
.mm-endorse-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}
.mm-endorse-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 20px 24px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mm-endorse-card:hover,
.mm-endorse-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(29,40,88,0.16);
    border-color: var(--mm-primary);
}
.mm-endorse-photo img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.mm-endorse-name {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--mm-primary);
}
.mm-endorse-role {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #4b5563;
}
.mm-endorse-more {
    margin-top: 4px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.8125rem;
    color: var(--mm-accent);   /* red on white = 6.87:1 */
}

/* Pop-up ---------------------------------------------------------------- */
.mm-endorse-modal[hidden] { display: none; }
.mm-endorse-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mm-endorse-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11,16,36,0.72);
}
.mm-endorse-modal-panel {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 40px 40px 32px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.mm-endorse-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
}
.mm-endorse-modal-close:hover,
.mm-endorse-modal-close:focus-visible { color: var(--mm-accent); }
.mm-endorse-modal-quote {
    margin: 0 0 26px;
    padding: 0 0 0 20px;
    border-left: 4px solid var(--mm-accent);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--mm-ink);
}
.mm-endorse-modal-who {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid #e6e8eb;
    padding-top: 20px;
}
.mm-endorse-modal-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.mm-endorse-modal-name {
    display: block;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--mm-primary);
}
.mm-endorse-modal-role {
    display: block;
    font-size: 0.9375rem;
    color: #4b5563;
}
/* Stop the page scrolling behind an open dialog. */
body.mm-modal-open { overflow: hidden; }

@media (max-width: 991px) {
    .mm-endorse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .mm-endorse { padding: 60px 0 68px; }
    .mm-endorse-grid { grid-template-columns: 1fr; gap: 16px; }
    .mm-endorse-modal { padding: 16px; }
    .mm-endorse-modal-panel { padding: 34px 22px 24px; }
    .mm-endorse-modal-quote { font-size: 1.0625rem; }
}

/* Stat callout inside a priority panel (the property-tax figure on
   Affordability). Blue fill, so WHITE text — 14.03:1. */
.mm-pri-stat {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 20px 22px;
    background: var(--mm-primary);
    border-radius: 8px;
}
.mm-pri-stat-num {
    flex: 0 0 auto;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1;
    color: #ffffff;
}
.mm-pri-stat-unit { font-size: 1.5rem; }
/* `.mm-pri-body p` (0,2,0) already colours paragraphs in this panel #555, so a
   single class loses. Scope it the same way to win on specificity. */
.mm-pri-body .mm-pri-stat-label {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #ffffff;
}
@media (max-width: 767px) {
    .mm-pri-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; }
    .mm-pri-stat-num { font-size: 2.25rem; }
}

/*==========================================================================
  Email capture pop-up (#mm-popup)
  Blue header band + the CivicOne newsletter form. Brand rule: the band is
  blue, so everything on it is WHITE (14.03:1).
==========================================================================*/
.mm-popup[hidden] { display: none; }
.mm-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mm-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11,16,36,0.74);
}
.mm-popup-panel {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.38);
    /* Clip the header's square corners to the panel radius. */
    overflow-x: hidden;
}
.mm-popup-head {
    background: linear-gradient(135deg, #1d2858 0%, #12193a 100%);
    padding: 30px 32px 26px;
    text-align: center;
}
.mm-popup-mark {
    width: 104px;
    height: auto;
    margin: 0 auto 14px;
    display: block;
}
.mm-popup-title {
    margin: 0 0 8px;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #ffffff;
}
.mm-popup-sub {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #ffffff;
    opacity: 0.92;
}
.mm-popup-body { padding: 8px 20px 18px; }
/* The form sits directly on white inside the panel — the card border and
   shadow that .mm-form-embed carries elsewhere would be a box in a box. */
.mm-popup-body .mm-form-embed {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.mm-popup-close {
    position: absolute;
    /* Inside the header band, clear of the panel's 12px corner radius. */
    top: 12px;
    right: 16px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    font-size: 1.9rem;
    line-height: 1;
    color: #ffffff;      /* sits on the blue header */
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.85;
}
.mm-popup-close:hover,
.mm-popup-close:focus-visible { opacity: 1; }

@media (max-width: 767px) {
    .mm-popup { padding: 14px; }
    .mm-popup-head { padding: 24px 22px 20px; }
    .mm-popup-title { font-size: 1.3rem; }
    .mm-popup-mark { width: 88px; }
    .mm-popup-body { padding: 6px 12px 14px; }
}

/* "Stay connected" buttons (Shirley's markup 26). They open the email pop-up
   rather than navigating, so they are <button>, not <a>. Red fill, white
   text — 6.87:1. */
.mm-stay-row {
    margin-top: 40px;
    text-align: center;
}
.mm-stay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 13px 34px;
    border: 0;
    border-radius: 4px;
    background: var(--mm-accent);
    color: #ffffff;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.mm-stay-btn:hover,
.mm-stay-btn:focus-visible {
    background: var(--mm-accent-dark);
    transform: translateY(-2px);
}
@media (max-width: 767px) {
    .mm-stay-row { margin-top: 30px; }
    .mm-stay-btn { width: 100%; }
}