@media (min-width: 992px) {
    .header-menu ul li.hover_items:hover > .mega-menu {
        display: block;
    }

    header.ModalHeader .header-menu ul li:hover a.menu-nav {
        color: var(--color-white);
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
        width: 100%;
        margin: 0 auto;
    }

    section.calender-sec .container {
        max-width: 1488px;
    }

    header.custome-header .container {
        max-width: 1500px;
    }

    footer .container {
        max-width: 1450px;
    }

    section.goverment-sec.container-1200 .container {
        max-width: 1350px;
    }
 
}

@media (max-width: 1600px) {
    :root {
        --fs-40: 35px;
        --lh-44px: 40px;
        --fs--22: 18px;
        --fs--18: 16px;
        --fs--17: 16px;
    }

    .footer-five-items {
        gap: 50px;
    }

    .inner_footer {
        gap: 80px;
    }

    footer {
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    section.video-banner {
        height: 780px;
    }

    section.councilvideo-sec {
        padding: 100px 0px;
    }

    .council-links {
        min-height: 215px;
    }

    section.towncouncil-sec {
        padding: 100px 0px;
    }

    .town-link {
        max-width: 360px;
    }

    .grid-flash {
        gap: 30px;
    }

    .flashinside-grid {
        max-width: 375px;
    }

    .newflash-holder {
        padding-bottom: 50px;
    }

    section.newflash-sec .universal-anchor {
        padding-top: 50px;
    }

    .about-data {
        max-width: 95%;
        margin-left: auto;
    }

    .calender-container .day span {
        font-size: 16px;
        letter-spacing: -0.349px;
    }

    .calender-container .day {
        padding: 10px 0px;
    }

    .day-name {
        font-size: 16px;
    }

    .vetrens-day {
        font-size: 20px;
    }

    .cumunity-data {
        padding-left: 40px;
    }

    .inner_footer {
        max-width: 965px;
    }

    .grid-image .container img {
        max-width: 200px;
    }

    .tab-grid .grid-goverment-right {
        gap: 40px;
    }

    .data-insideholder {
        gap: 20px;
    }

    section.goverment-sec.grid-secs .grid-tablinks {
        padding-top: 40px;
    }

    .grid-twomain {
        gap: 10px;
    }

    .grid-goverment-right.gaping-data {
        gap: 30px;
    }

    .calnder-datas .two-five {
        padding-bottom: 20px;
    }

    .form-calender,
    .listweek {
        padding-top: 30px;
    }

    .grid-moredetails {
        padding-top: 40px;
    }

    .grid-moredetails {
        gap: 30px;
    }

    .reda-more {
        margin-bottom: 20px;
    }

    .image-grid {
        height: 200px;
    }
       .towncouncil-sec.dark-remove .grid-towncouncildata img{
        max-width: 200px;
    }
  .mai-listing-data-flow {
    /* background-color: #F5F5F5; */
 
    width: 100%;
    margin-left: 75px;
    margin-top: 25px;
    padding: 20px;
}
.mai-listing-data-flow .two-five{
    margin-bottom: 10px;
}
.date-now span.month{
    font-size: 25px;
    margin-bottom: 15px;
}
.date-now span.number{
    font-size: 40px;
}
  .goverment-sec.main-slider  .main-img-slider{
    margin: 50px 0px;
  }
  .grid-towncouncildata{
    max-width: 1200px;
  }

  .calnder-datas{
    padding-top: 40px;
  }
 .main-titles-flow h3{
    font-size: 18px;
 }
 .calender-sec.bg-color .main-header{
    padding-bottom: 20px;
 }
 .calender-sec.bg-color .main-header h3{
    margin-bottom: 0px;
 }
 .main-list-data ul li{
    gap: 60px;
 }
 .main-list-data ul li .event-name h4{
    font-size: 20px;
 }
 .alldtata{
    gap: 60px;
 }
 .main-list-data ul li .event-name h4{
    margin-bottom: 15px;
 }

 .main-ul h3.title{
    margin-bottom: 15px;
 }

.table-cover.full-list{
    padding-left: 10px;
    padding-right: 10px;
}
.table-data{
    padding-top: 10px ;
    padding-left: 10px ;
    padding-bottom: 10px ;
}
.tree span{
    font-size: 13px ;
}
.table-data{
    width: 82%;
}
.category-list{
    width: 20%;
}
.tree li{
    margin: 5px 0px;
}
.goverment-sec.flow-me .towncouncil-sec{
    padding: 0px;
}
.custom-marquee{
    padding: 8px 0px;
}
}

@media (max-width: 1400px) {
    :root {
        --fs-40: 30px;
        --fs-25: 19px;
        --lh-32: 25px;
        --lh-44px: 35px;
        --fs--22: 16px;
        --lh-30: 22px;
    }

    section.video-banner {
        height: 645px;
    }

    .header-menu {
        max-width: 850px;
    }

    .inner_footer {
        gap: 30px;
    }

    footer {
        padding-top: 70px;
    }

    .header-logo img {
        max-width: 300px;
    }

    .header-menu ul li a.menu-nav {
        padding: 14px;
    }

    .svg-image {
        max-width: 500px;
    }

    .header-logo {
        padding: 10px 0px;
    }

    .footer-logo {
        max-width: 200px;
        margin: 0 auto;
        width: 100%;
    }

    .social-icons {
        padding-top: 20px;
    }

    section.councilvideo-sec {
        padding: 80px 0px;
    }

    .councilvideomain {
        gap: 20px;
    }

    .image-icons {
        height: 50px;
        max-width: 50px;
        margin: 0 auto;
    }

    .council-links {
        min-height: 175px;
    }

    .grid-council {
        gap: 30px;
    }

    section.mayormessage-sec {
        padding: 50px 0px;
    }

    .mayor-container {
        max-width: 600px;
    }

    .four-zero {
        padding-bottom: 15px;
    }

    li,
    p {
        font-size: 16px;
    }

    section.mayormessage-sec p {
        font-size: 16px;
        line-height: 22px;
    }

    .video-holder {
        padding-top: 20px;
    }

    section.towncouncil-sec {
        padding: 80px 0px;
    }

    section.newflash-sec {
        padding: 60px 0px;
    }

    .newflash-holder {
        padding-bottom: 40px;
    }

    .flashinside-grid {
        max-width: 345px;
        padding: 20px;
    }

    li,
    p {
        font-size: 16px;
        line-height: 28px;
    }

    .universal-anchor a {
        font-size: 16px;
        padding: 8px 40px;
    }

    section.newflash-sec .universal-anchor {
        padding-top: 30px;
    }

    .about-data .universal-anchor {
        padding-top: 20px;
    }

    section.about-sec {
        padding: 60px 0px;
    }

    .about-image {
        margin: 0 auto;
    }

    .about-data {
        max-width: 625px;
        padding-top: 30px;
        margin: 0 auto;
    }

    .town-link {
        max-width: 320px;
    }

    .calender-container .day {
        padding: 5px 0px;
        border-right: 1px solid #d9d9d9;
        border-top: 1px solid #d9d9d9;
    }

    .calender-container .day span {
        font-size: 15px;
    }

    .calender-container {
        max-width: 400px;
        margin-top: -63px;
    }

    .calender-container .buttons-container .label-container,
    .calender-container .prev-button,
    .calender-container .next-button {
        font-size: initial;
    }

    .calender-container .day {
        font-size: 15px !important;
    }

    .calnder-link a,
    .view-all a {
        font-size: 16px;
        padding: 6px 20px;
    }

    .calender-container .buttons-container {
        padding: 10px 10px;
    }

    .cumunity-data {
        padding-bottom: 30px;
    }

    .datae-appointment {
        padding: 10px;
        max-width: 250px;
    }

    .vetrens-day {
        font-size: 16px;
        padding-top: 4px;
    }

    .day-name {
        font-size: 14px;
        padding-bottom: 4px;
    }

    section.calender-sec {
        padding: 60px 0px;
    }

    .cumunity-data {
        padding-left: 40px;
    }

    .left-sidedata p,
    .grid-goverment-right p a,
    .grid-pdf a span,
    ul.grid-datalists li,
    ul.list-link li a {
        font-size: 15px;
        line-height: 25px;
    }

    .left-sidedata .council-title,
    ul.grid-datalists {
        padding: 10px;
    }

    .back-top a {
        font-size: 15px;
    }

    .inner_footer a,
    footer p {
        font-size: 15px;
        margin-bottom: 5px;
        line-height: normal;
    }

    .back-top {
        padding-bottom: 30px;
    }

    .data-playstore {
        max-width: 350px;
    }

    .inner_footer {
        max-width: 75%;
    }

    .grid-image .container img {
        max-width: 150px;
    }

    .calender-container span.month-label,
    .calender-container span.year-label {
        font-size: 20px;
    }

    .tab-grid .grid-goverment-right {
        gap: 20px;
    }

    .grid-tablinks {
        gap: 20px;
    }

    .tab-grid .lines-data::after {
        right: -34px;
    }

    .data-insideholder {
        gap: 10px;
    }

    .tablistss ul li a {
        font-size: 15px;
        line-height: normal;
    }

    .tablistss ul {
        gap: 5px;
        padding-top: 10px;
    }

    .univers-input input,
    .univers-input select,
    .button-data {
        height: 40px;
        padding: 0px 10px;
    }

    .univers-input input,
    .univers-input select,
    .univers-input input::-webkit-input-placeholder {
        font-size: 15px;
    }

    .form-dataholder {
        padding-top: 20px;
    }

    .bg-holder {
        margin-top: 0px;
        padding: 10px;
    }

    section.goverment-sec.grid-secs .grid-tablinks {
        padding-top: 20px;
    }

    .form-calender,
    .listweek {
        padding-top: 20px;
    }

    ul.week-listdata {
        margin-bottom: 20px;
    }

    .grid-calnderevents {
        padding-top: 20px;
    }

    .grid-calnderevents {
        gap: 10px;
    }

    .grid-calnderevents a {
        font-size: 14px;
    }

    .grid-moredetails {
        padding-top: 20px;
        gap: 20px;
    }

    .form-dataa button {
        margin-top: 20px;
    }

    .read-data .two-zero {
        margin-bottom: 20px;
    }

    .two-zero.bordernesa {
        margin-bottom: 20px;
    }

    .upload-images p {
        font-size: 15px;
        line-height: normal;
    }

    .shiping-data .two-five {
        padding-bottom: 20px;
    }

    .form-input {
        margin-bottom: 20px;
    }

    .profile-data {
        padding-top: 40px;
    }

    .grid-ceks label {
        font-size: 14px;
    }

    .holder-shiping {
        padding: 10px;
    }

    .profile-images {
        margin-top: 10px;
    }

    .mega-menu {
        top: 53px;
    }

    .image-grid {
        height: 200px;
    }

    .gallery-grid {
        gap: 10px;
    }

    .custome-header.ModalHeader .mega-menu {
        top: 53px;
    }

    header.ModalHeader .header-logo {
        max-width: 201px;
    }
           .towncouncil-sec.dark-remove .grid-towncouncildata img{
        max-width: 180px;
    }
       .goverment-sec.main-slider  .main-img-slider{
        margin: 30px 0px;
    }
    .goverment-sec.main-slider .full-img{
        max-width: 800px;
    }
    .grid-towncouncildata{
        max-width: 1000px;
    }
      .calnder-datas{
    padding-top: 30px;
  }
   .main-list-data ul li{
    gap: 50px;
 }
 .calender-sec.bg-color .main-header h3{
    font-size: 22px;
 }
 .main-list-data ul li .main-titles p{
    padding-bottom: 10px;
 }


 .main-list-data ul li p{
    font-size: 15px;
    line-height: 22px;
 }
 .main-list-data ul li .main-img{
    max-width: 160px;
 }
 .main-list-data ul li .date,
 .main-titles-flow{
    height: 200px;
 }
.goverment-sec.flow-me .towncouncil-sec{
padding: 0px;
}
    .category-list {
        width: 25%;
    }

    .marquee-track span{
        font-size: 18px;
    }
}

@media (max-width: 1199px) {
    :root {
        --fs-40: 25px;
        --fs--16: 14px;
    }

    .header-menu ul li a.menu-nav {
        padding: 16px 3px;
    }

    .header-menu ul {
        justify-content: end;
        gap: 10px;
    }

    header .header-grid {
        display: flex;
    }

    header .header-logo img {
        max-width: 258px;
        width: 100%;
    }

    header .main-header {
        background-color: var(--color-white);
    }

    header ul {
        margin-bottom: 0;
    }

    header .header-menu {
        display: grid;
        align-items: center;
    }

    header .header-logo {
        padding-top: 0;
        padding-bottom: 0;
        display: grid;
        align-items: center;
    }

    header .header-menu {
        margin-left: auto;
        margin-right: 0;
    }

    header .header-menu ul li a.menu-nav {
        color: #0c3579;
    }

    header .header-menu ul li:hover a.menu-nav {
        color: var(--color-white);
    }

    .big-logo {
        display: none;
    }

    .small-logo {
        display: block;
    }

    .items-img {
        margin-bottom: 5px;
    }

    .svg-image {
        max-width: 500px;
    }

    section.councilvideo-sec {
        padding: 50px 0px;
    }

    .grid-council {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    section.towncouncil-sec {
        padding: 50px 0px;
    }

    section.newflash-sec {
        padding: 50px 0px;
    }

    .newflash-holder {
        padding-bottom: 30px;
    }

    .cumunity-data {
        padding-left: 40px;
    }

    .lines-data::after {
        display: none;
    }

    .gridfaq-data .universal-anchor a {
        padding: 6px 20px;
    }

    .conact-side .two-five {
        padding-bottom: 10px;
    }

    .conact-side {
        padding-top: 30px;
    }

    ul.grid-datalists {
        gap: 10px;
    }

    .grid-goverment-right .grid-pdf {
        padding-top: 0px;
    }

    .calender-container span.month-label,
    .calender-container span.year-label {
        font-size: 18px;
    }

    section.goverment-sec.width-full .grid-data {
        max-width: 100%;
    }

    section.goverment-sec.width-full .agenda-minutes {
        padding-bottom: 30px;
    }

    .calender-container.mini-calender {
        margin-bottom: 30px;
    }

    .calnder-events {
        max-width: 100%;
        margin: 0 auto;
    }

    .univers-input label {
        font-size: 14px;
        line-height: 20px;
    }

    .mega-menu {
        top: 55px;
    }

    .profile-holder {
        top: 38px;
    }

    .gallery-grid {
        padding-top: 30px;
    }

    .custome-header.ModalHeader .mega-menu {
        top: 55px;
    }
    .document-center {
        padding-bottom: 30px;
    }
    section.data-flow .grid-towncouncildata{
        padding-top: 0px;
    }
    .mai-listing-data-flow{
        margin-left: 30px;
    }
    .main-list-data ul li .date{
        gap: 10px;
    }
    .date-now span.number{
        font-size: 35px;
    }
.date-now span.month{
        font-size: 25px;
        margin-bottom: 10px;
    }
    .main-list-data ul li .list-number{
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .main-list-data ul li{
        margin-bottom: 10px;
    }
    .main-list-data a{
        margin-top: 5px;
    }
        .goverment-sec.main-slider .full-img{
        max-width: 700px;
    }
    .main-list-data ul li .list-number{
        max-width: 100px;
    }
  
    .main-list-data ul li .event-name h4{
        margin-bottom: 10px;
    }
    .main-list-data ul li .date{
        height: 200px;
    }
    .main-titles-flow h3{
        font-size: 16px;
        line-height: 24px;
    }
    .main-list-data ul li .main-img{
        max-width: 105px;
    }
    .main-titles-flow h3{
        margin-bottom: 5px;
    }
.main-list-data ul{
    margin-bottom: 25px;
}

    .tree span {
        font-size: 14px;
        line-height: normal;
    }

.custom-marquee{
    padding: 5px 0px;
}
 
}

@media (max-width: 1100px) {
    .header-menu ul li a.menu-nav {
        padding: 16px 2px;
    }
}

@media (max-width: 991px) {
    header .header-menu {
        display: none;
        height: 75vh;
        overflow: scroll;
        max-width: 991px;
    }

    .header-menu ul li,
    .header-menu ul {
        width: 100%;
    }

    .header-menu ul li:hover a.menu-nav {
        background: transparent;
        border: none;
    }

    .mega-menu {
        position: static;
    }

    li.hover_items {
        position: relative;
    }

    li.hover_items::after {
        position: absolute;
        height: 20px;
        width: 16px;
        right: 2%;
        background-color: #0c3579;
        content: "";
        top: 0;
        clip-path: polygon(50% 100%, 0 54%, 100% 53%);
    }

    .menu-buton {
        display: block;
    }

    .header-flex {
        display: grid;
        align-items: center;
        row-gap: 10px;
        justify-content: center;
    }

    .header-flex p {
        display: block;
        width: 100%;
        text-align: center;
    }

    .input-group-text svg {
        width: 20px;
    }

    .header-flex {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header .header-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-menu {
        position: fixed;
        top: 155px;
        background-color: white;
        left: 0;
        width: 100%;
        max-width: 100%;
    }

    .footer-five-items {
        display: grid;
    }

    .social-icons {
        padding-left: 0;
        padding-top: 15px;
    }

    .header-menu ul {
        display: block;
        justify-content: flex-start;
        gap: 10px;
    }

    .header-menu {
        position: fixed;
        top: 155px;
        background-color: #ffffffed;
        left: 0;
        width: 100%;
        max-width: 100%;
        backdrop-filter: blur(6px);
    }

    header .header-logo,
    header.ModalHeader .header-logo {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    header .header-logo,
    header.ModalHeader .header-logo {
        padding: 0px !important;
    }

    .main-header {
        padding: 10px 0px !important;
    }

    .header-menu {
        top: 165px;
    }

    header.ModalHeader .header-menu {
        display: none;
    }

    span.menuShow {
        display: block;
        width: 12px;
        height: 12px;
        background-color: transparent;
        position: absolute;
        right: 20px;
        top: 40%;
        border-left: 2px solid black;
        border-bottom: 2px solid black;
        transform: rotate(-45deg);
    }

    .hover_items {
        position: relative;
    }

    .header-menu ul li.hover_items:hover > .mega-menu {
        display: none;
        opacity: 1;
        position: static;
    }

    .footer-logo {
        max-width: 200px;
        margin: 0 auto;
        text-align: center;
    }

    header .header-menu ul li a.menu-nav {
        max-width: fit-content;
        display: inline-block;
        padding: 0px;
    }

    .town-link {
        max-width: 325px;
    }

    a.read-more {
        font-size: 16px;
    }

    .cumunity-data {
        padding-left: 0px;
    }

    .inner_footer {
        max-width: 100%;
    }

    .grid-image .container img {
        max-width: 100px;
    }

    .header-menu {
        position: static;
    }

    header .header-grid {
        flex-direction: column;
        gap: 20px;
    }

    .grid-logomobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .header-menu ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .date.side {
        max-width: 100%;
        padding-top: 30px;
    }

    header.ModalHeader .main-header {
        padding: 10px 0px;
    }

    section.goverment-sec .table-holder .table-data .table-20 {
        font-size: 17px;
    }

    section.goverment-sec .table-holder .table-data td,
    section.goverment-sec .table-holder .noraml-link,
    section.goverment-sec .table-holder .button-link,
    .anchor-data a {
        font-size: 15px;
    }

    header .header-menu ul li:hover a.menu-nav {
        color: #153c7e;
    }
    .main-list-btn {
        margin-top: 15px;
    }
    .towncouncil-sec{
        margin-top: 0px !important;
    }
    .mai-listing-data-flow{
        margin-left: 0px;
    }
    /* .date-now span.month{
        font-size: 12px;
    } */
        /* font-size: 18px;
        margin-top: 0px;
    }  .date-now span.number{ */
  
    .main-list-data a{
        font-size: 16px;
    }
           .goverment-sec.main-slider .full-img{
        max-width: 600px;
    }
    .goverment-sec.main-slider .main-img-slider{
        margin-bottom: 0px;
        margin-top: 10px;
    }
        section.goverment-sec ul.step-list li ul {
            margin-left: 15px;
            padding: 5px 0px;
        }
        .main-list-data ul li{
            flex-direction: column;
            gap: 10px;
        }
        .main-titles-flow{
            max-width: 100%;
        }
        .main-list-data a{
            margin-top: 0px;
        }
        .main-list-data ul li .date{
            max-width: 100%;
            width: 100%;
            display: none;
        }
           .main-list-data a{
            margin: 0px;
           }
        .main-list-data a:last-child,
        .calender-sec.bg-color .main-header h3:last-child{
            display: none;
        }
        .calender-sec.bg-color .main-header{
            padding-top: 0px;
        }
        .main-list-data ul.data-flowli .date{
            display: block;
        }
          .main-header .mobile{
        display: block !important;
    }
    ul.data-flow{
        display: block;
    }
    .main-list-data  ul.data-flow li .date{
        display: flex;
    }
      .calender-sec.bg-color .main-header.desktopvew{
        display: flex;
        padding-top: 0px;
      }
      .calender-sec.bg-color .main-header.desktopvew h3{
display: block;
margin-bottom: 5px;
      }
      section.calender-sec{
        padding-bottom: 30px;
      }
      .alldtata{
        flex-direction: column;
        gap: 20px;
      }
      .alldtata{
        gap: 20px;
      }

    section.calender-sec.bg-color  .main-ul a{
        display: block !important;
      }
       .main-ul{
    width: 100%;
}
.main-list-data ul li .event-name h4{
    margin-bottom: 10px;
}
.main-list-data ul.data-flow li .date,
.main-titles-flow{
    height: auto;
}
.main-list-data ul li .main-img{
    max-width: 150px;
}
.main-list-data ul li .main-img{
    padding-top: 0px;
}
.main-titles-flow h3{
    padding-top: 0px;
}
.main-list-data ul{
    margin-bottom: 15px;
}
.main-titles .full-contents{
    height: auto;
}
.main-titles-flow{
    flex-direction: column;
}
.main-list-data ul li .main-img{
    max-width: 100%;
    width: 100%;
}

   .town-link {
        max-width: 313px;
    }
    .table-cover.full-list{
        flex-direction: column;
        padding: 10px;
    }
    .table-data{
        width: 100%;
        padding: 0px;
    }
    .category-list{
        width: 100%;
        border: none;
    }
}

@media (max-width: 767px) {
    .login-button {
        justify-content: center;
    }

    .header-menu {
        top: 194px;
    }

    .inner_footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    section.about-sec {
        padding: 40px 0px;
    }

    .calender-container {
        margin-top: 30px;
    }

    .grid-oppoinment {
        justify-content: center;
    }

    .datae-appointment {
        margin: 0 auto;
    }

    .cumunity-data {
        text-align: center;
        margin: 0 auto;
    }

    section.calender-sec {
        background-size: 150px;
    }

    .calender-container button.next-button::after,
    .calender-container button.prev-button::after {
        background-size: 20px;
    }

    .grid-pdf a span {
        font-size: 16px;
    }

    .image-book {
        margin: 0 auto;
    }

    header .header-logo,
    header.ModalHeader .header-logo {
        max-width: 200px;
    }

    .tab-grid {
        gap: 30px;
    }

    section.goverment-sec.grid-secs .title-here {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .univers-input.grid-checkbox {
        margin-bottom: 20px;
    }

    .calnder-datas .two-five {
        padding-bottom: 15px;
    }

    .grid-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    section.accountsetting-sec {
        padding: 40px 0px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custome-modal .modal-header {
        top: 0;
        right: 0;
    }
    .mai-listing-data-flow{
        margin-top: 0px;
    }

    .main-titles-flow h3{
        font-size: 16px;
        margin-bottom: 5px;
    }
  .date-now span.month{
    font-size: 20px;
  }
  .date-now span.number{
    font-size: 30px;
  }
   .alldtata{
    gap: 30px;
 }
 section.towncouncil-sec .grid-towncouncildata .col-md-3 {
    width: 100%;
    margin: 0 auto;

}
.grid-towncouncildata a,
section.towncouncil-sec .grid-towncouncildata .col-md-3 a {
    width: 100%;
    max-width: 100%;
}
.grid-towncouncildata a .town-holder,
section.towncouncil-sec .grid-towncouncildata .town-holder{
    max-width: 100%;
    width: 100%;
}

.button-container  {
    padding: 0px;
}
.row.button-plan{
    gap: 15px;
    padding: 8px 0px;
}
}


@media (max-width: 575px) {
    :root {
        --fs--16: 14px;
    }

    .header-items {
        display: grid;
        gap: 10px;
    }

    section.video-banner {
        height: 850px;
    }

    .sub-footer {
        display: grid;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        max-width: 150px;
        width: 100%;
    }

    .agendas-items {
        max-width: 100%;
        width: calc(90% / 2);
    }

    .svg-image {
        max-width: 360px;
    }

    section.mayormessage-sec {
        padding: 40px 0px;
    }

    .tab-grid {
        gap: 20px;
        flex-direction: column-reverse;
    }

    .profile-holder {
        top: 34px;
    }

    .gallery-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .image-grid {
        height: 240px;
    }
    .comment time {
        margin-top: 15px;
    }
    .comment {
        margin-left: 0px;
    }
    .main-list-data ul li .list-number{
        max-width: 90px;
    }
    .main-list-data ul li .date{
        gap: 8px;
    }
    .mai-listing-data-flow{
        padding: 10px;
    }
    .main-list-data ul li p{
        line-height: normal;
    }
    .main-click{
        padding-top: 10px;
    }

   .calender-sec.bg-color .cumunity-data {
        margin-bottom: 20px;
    }
  
   .calender-sec.bg-color  .calender-container{
        margin-top: 20px;
    }
    .date-num{
        padding: 8px;
        max-width: 60px;
    }
    .date-num span.date
{
    font-size: 22px;
}
.date-num .month{
    margin-bottom: 0px;
}
.main-list-data ul li .event-name h4{
    font-size: 18px;
}
   .alldtata{
    gap: 20px;
 }

 .civic-popup{
    width: 60% !important;
 }
 .event-content {
    flex-direction: column;
    gap: 15px;
}
.event-details-card{
    padding: 10px;
}
div#fcPopup strong {
    padding: 13px;
    padding-left: 0px;
    padding-top: 8px;
    padding-bottom: 8px;
}
section.towncouncil-sec p {
    line-height: 28px !important;
    font-size: 16px !important;
}
div#fcPopup .cp-body span {
    line-height: 25px !important;
}
button.btn.btn-primary.search-table-button {
    max-width: 100%;
}
}

@media (max-width: 475px) {
    :root {
        --fs--16: 14px;
    }

    .header-items {
        display: grid;
        gap: 10px;
    }

    section.video-banner {
        height: 850px;
    }

    .sub-footer {
        display: grid;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        max-width: 150px;
        width: 100%;
    }

    .agendas-items {
        max-width: 100%;
        width: calc(90% / 2);
    }

    .svg-image {
        max-width: 360px;
    }

    section.mayormessage-sec {
        padding: 40px 0px;
    }

    .tab-grid {
        gap: 20px;
        flex-direction: column-reverse;
    }

    .profile-holder {
        top: 34px;
    }

    .gallery-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .image-grid {
        height: 240px;
    }
    .comment time {
        margin-top: 15px;
    }
    .comment {
        margin-left: 0px;
    }
    .main-titles-flow{
        flex-direction: column;
        gap: 10px;
    }
    .main-list-data ul li{
        padding-top: 0px;
    }
    .calender-sec.bg-color .main-header{
        padding-top: 0px !important;
    }
  

}