@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: 65px;
    }

    .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: 280px;
    }

}


@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: 15px;
    }

    .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: 74px;
    }

    .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: 250px;
    }

    .gallery-grid {
        gap: 10px;
    }

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

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





}

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


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

    .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: 30px;
    }

    .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;
    }

}

@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;
    }

}

@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;
    }

}

@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: 400px;
    }
}