:root {
    --main-font-color: #bb005d;
    --white: #ffffff;
}

@media screen and (max-width: 1600px) {
    body {
        font-size: 0.9rem;
    }

    .home_nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 4rem;
    }

    .home_nav .dropdown-menu {
        font-size: 0.9rem !important;
    }

    .profile-picture {
        padding-top: 16rem;
        padding-bottom: 3rem !important;
    }

    .profile-main-cont {
        padding: 4rem 0;
    }
    .profile-admin {
        padding-top: 0 !important;
        padding-bottom: 3rem !important;
    }
}

@media screen and (max-width: 1200px) {
    #imgbox {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    #contentBox {
        z-index: 250;
        width: 100%;
    }

    #contentBox form {
        background: white;
        border-radius: 5px;
        z-index: 400;
    }

    #imgbox::before {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    }

    #loginLogo img {
        width: 250px;
    }
    .homeBtnOne {
        display: none;
    }
    .homeBtnTwo {
        display: block;
        z-index: 250;
    }

    .left-title-login {
        display: none;
    }

    .hero-container .hero-content .hero-logo img {
        width: 200px;
    }

    .hero-container .hero-text .display-2 {
        font-size: 3rem;
    }

    .hero-container .hero-text .display-6 {
        font-size: 1.5rem;
    }

    .hero-container .hero-text .services_button {
        margin-top: 1.5rem !important;
    }

    .hero-container .hero-text .services_button a {
        font-size: 1rem !important;
    }
}
@media screen and (max-width: 1100px) {
    .slider-id {
        height: calc(450px - 50px);
        padding-bottom: 1rem !important;
    }
    .profile-picture {
        padding-top: 12rem !important;
    }
    .profile-main-cont {
        padding: 4rem 0;
    }
    .pop-up {
        display: flex !important;
        position: absolute;
        left: -100%;
        z-index: 550;
    }
    .pop-up.pop {
        left: 0;
    }
    .overlay.pop {
        display: block;
    }
    .sidebar {
        display: none;
    }
    .navbarContainer .mobile-nav {
        display: flex !important;
        padding-inline: 1rem;
    }
    .navbarContainer {
        flex-direction: column;
        height: 100vh;
    }
    .navbarContainer .mobile-nav .home_logo {
        text-decoration: none;
    }

    .navbarContainer .mobile-nav .menu-bar img {
        width: 30px;
        cursor: pointer;
    }

    .topbar {
        background-color: #ffffff !important;
        border: none !important;
    }
    .topbar .d-flex span,
    .topbar .d-flex .p-title,
    .topbar .d-flex .fa-caret-down {
        color: #000000 !important;
    }
    .profile-admin {
        padding-top: 0 !important;
        padding-bottom: 3rem !important;
    }
    .admin-container,
    .resident-container {
        overflow-y: auto !important;
    }
}
@media screen and (max-width: 1050px) {
    .home-nav .nav_links li a {
        padding: 0 1rem;
    }
    .home-nav .menu-bar {
        display: block;
    }
    .home-nav .nav_links {
        justify-content: space-between;
        padding-inline: 2rem;
    }
    .home-nav .nav_links > li {
        display: none;
    }

    .home-topbar .topbar-profile-dropdown {
        display: none !important;
    }

    .home-nav .homebar-dropdownmenu {
        top: 100%;
        left: -60px;
    }

    .home-nav .homebar-profile-dropdown {
        display: flex !important;
    }
}
@media screen and (max-width: 870px) {
    #loginForm {
        padding-inline: 4rem !important;
    }

    .procedures-container {
        padding: 2rem;
    }
    .procedures-content > .lead {
        font-size: 1rem;
    }
    .procedures-content ul li,
    .procedures-content ol li {
        font-size: 0.9rem !important;
    }
    .signup-container .col-lg-4 .form-field .form-label {
        font-size: 0.9rem !important;
    }
    .signup-container .col-lg-4 span,
    .signup-container .col-lg-4 span a {
        font-size: 0.9rem !important;
    }

    .hero-container .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-container .hero-content .hero-text {
        text-align: center;
    }

    .home_nav {
        justify-content: space-between;
        padding: 0.3rem 1rem;
    }

    .home_nav img {
        width: 50px;
    }

    .home_logo a {
        font-size: 1.25rem;
    }

    .home_login {
        display: none;
    }

    .home_nav .nav_links li {
        display: none;
    }
    .home_nav .offcanvas .offcanvas-body .nav-link {
        font-size: 0.9rem !important;
    }

    .home_nav .offcanvas-body .proceed_btn {
        color: white;
        background-color: var(--main-font-color);
        border-radius: 10px;
        text-decoration: none;
        margin-top: 1rem;
        padding: 0.5rem 2rem;
    }

    .home_nav div:nth-child(1) {
        display: block;
    }

    .home_nav .nav_links li a {
        font-size: 0.9rem !important;
    }
    .home_nav .nav_links .profile {
        margin-right: 2rem !important;
    }

    .user-name {
        display: none;
    }

    .hero-container .hero-content .hero-logo img {
        width: 150px;
    }

    .hero-container .hero-text .display-2 {
        font-size: 2.25rem;
    }

    .hero-container .hero-text .display-6 {
        font-size: 1.25rem;
    }

    .hero-container .hero-text .services_button {
        margin-top: 1.5rem !important;
    }

    .hero-container .hero-text .services_button a {
        font-size: 1rem !important;
    }

    .about-container {
        padding: 6rem 5rem;
    }

    .about-container .lead {
        font-size: 1rem;
    }

    .demographic-container .row {
        padding: 4rem !important;
    }

    .demographic-container .row .col-lg-3 img {
        width: 60px;
    }

    .services-container {
        padding: 10rem 3rem;
    }

    .services-container .lead {
        font-size: 1rem;
        text-align: center;
    }

    .services-container .row {
        padding: 0;
        flex-direction: column !important;
    }

    .announcement-container {
        padding: 10rem 3rem;
    }

    .announcement-container .lead {
        font-size: 1rem;
        text-align: center;
    }

    .announcement-container .row {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .announcement-container .row .col-lg-4 {
        width: 100% !important;
    }
    .faqs-container {
        padding: 10rem 3rem;
    }

    .faqs-container .lead {
        font-size: 1rem;
        text-align: center;
    }

    .faqs-container .row {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .contact-container {
        padding: 4rem 0;
    }
    .contact-container .lead {
        font-size: 1rem;
        text-align: center;
    }
    .contact-container .row .col-12 {
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .form-feedback .row .col-12 .col-lg-6 {
        padding: 0 !important;
        margin: 0 !important;
    }

    footer .footer-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    footer .footer-inner .col-lg-4 {
        margin-top: 2rem;
    }
    .about-page-container-martyrs {
        flex-direction: column;
    }
    .about-page-container-martyrs .about-page-text {
        width: 300px;
        text-align: center;
        margin: 0 auto;
    }
    .about-page-image img {
        width: 300px;
    }
    .about-page-container-map {
        flex-direction: column;
    }
    .about-page-container-map .about-page-text {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }
    .about-page-container-map .about-page-text h4 {
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .about-page-container-map .about-page-image {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .about-page-container-map {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
    }
    .about-page-container-map .about-page-image img {
        width: 300px;
    }

    .announcement-content .news-title {
        font-size: 1.5rem;
        text-align: center;
    }

    .announcement-content .news-header {
        display: flex;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .announcement-content .news-header p {
        font-size: 0.8rem;
    }
}
@media screen and (max-width: 768px) {
    .complaintTypeDiv {
        display: flex !important;
        flex-direction: column !important;
    }
    .complaintForms .row .col-lg-12:nth-child(1) {
        display: flex !important;
        flex-direction: column !important;
    }
    .header-inform {
        text-align: center !important;
    }
    .address-card {
        margin-bottom: 34rem !important;
    }
    .address-card-inner {
        align-items: start !important;
    }
    .modal .modal-body .row .mb-3 {
        display: flex !important;
        flex-direction: column !important;
        word-wrap: break-word; /* This will wrap long words to the next line */
        white-space: normal;
    }
    .modal .modal-body .row .form-label {
        word-wrap: break-word; /* This will wrap long words to the next line */
        white-space: normal;
    }
    .other-staff .custom-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }
    .grid-header,
    .grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .modal-body {
        overflow-x: auto;
        white-space: nowrap;
    }
    .modal-body .d-flex {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .geodata-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .table-container-img .lead {
        text-align: center;
        font-size: 1rem;
    }

    .container-geo h3 {
        text-align: center;
    }

    .container-geo h4 {
        text-align: center;
        font-size: 1rem;
    }

    .history-row,
    .history-row.reverse {
        flex-direction: column;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .history-content,
    .history-image {
        flex-basis: 100%;
        text-align: justify;
    }

    .history-content {
        margin-top: 0;
    }

    .history-content h3 {
        text-indent: 0;
    }

    .history-full-text {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .history-full-text h3 {
        font-size: 1.25rem;
        text-indent: 0;
    }
    .history-grid {
        grid: 0;
    }
    .announcement-item .date-lg {
        display: none !important;
    }
    .announcement-item .date-sm {
        display: block !important;
    }
    .popup-image img {
        width: 95%;
    }

    .profile-picture {
        margin-top: 50rem;
        padding-bottom: 3rem !important;
    }
    .profile-admin {
        margin-top: 10rem;
        padding-bottom: 3rem !important;
    }

    .profile-main-cont {
        padding: 4rem 0;
        padding-bottom: 10rem;
    }

    .dashboard .row {
        flex-direction: column !important;
    }
    .my-profile .row .container .row .col-lg-12 .d-flex {
        flex-direction: column !important;
    }
    .my-profile .row .container .row .col-lg-12 .d-flex .opacity-0 {
        display: none;
    }
    .my-profile .row .photo-container {
        flex-direction: column;
    }
    .my-profile .row .container .row .col-lg-12 .d-flex .form-field {
        margin-left: 0 !important;
    }
    .my-profile .row .container .row {
        padding: 6rem 0;
    }

    .photo-container {
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    .sex-cont {
        align-items: start !important;
    }

    .my-profile .head {
        flex-direction: column !important;
    }
    .my-profile .head div:nth-child(2) {
        margin-top: 1rem !important;
    }
    .homeBtnTwo {
        top: 60px !important;
    }

    .my-account-info .row .container {
        padding: 1.5rem !important;
    }

    .my-account-info .row .container .d-flex {
        flex-direction: column;
    }
    .my-account-info .row .container .d-flex .form-field:nth-child(2) {
        display: none;
    }

    .form-field-resident {
        display: block !important;
        margin-left: 0 !important;
    }

    .my-account-info .row .container .d-flex .form-field {
        margin-left: 0 !important;
    }

    .my-account-info .row .head {
        flex-direction: column;
    }

    .my-account-info .row .head div:nth-child(2) {
        margin-top: 1rem !important;
    }

    .help-sidebar {
        display: none;
    }

    .help-container {
        flex-direction: column;
    }

    #help-responsive-navbar {
        display: block;
    }

    #help-responsive-navbar .help-sidebar {
        display: block;
    }

    .help-content {
        margin-top: 0 !important;
    }
    .help-container {
        padding: 1.1rem 1rem !important;
    }

    .content-help:nth-child(1) {
        border-top: 5px solid var(--main-font-color);
        border-radius: 3px;
        padding-top: 1rem;
    }

    .validate-resident .row {
        grid-template-columns: 1fr; /* Change to single column layout */
        grid-template-rows: auto auto auto auto;
    }

    .validate-resident .row div:nth-child(4) .card-body .grid-container {
        grid-template-columns: 1fr; /* Single column for ID Front and Back images */
    }

    .validate-resident .row div:nth-child(4) .id-pics-grid {
        grid-template-columns: 1fr; /* Single column for the images */
    }

    .validate-resident-inner {
        padding-inline: 0.5rem; /* Reduce padding for smaller screens */
    }

    .header-announcement {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .header-announcement .lead {
        text-align: center;
    }

    .header-announcement div:nth-child(2) {
        margin-top: 1rem;
    }

    .home-topbar div:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 600px) {
    .id-cont .head {
        flex-direction: column;
    }

    .id-cont .head button {
        margin-top: 1.5rem;
    }

    .swiper {
        height: 400px;
    }
    .swiper-slide img {
        width: 300px !important;

        height: 300px !important;
    }
    .mobile-responsive-menu {
        display: block;
        font-size: 0.8rem;
    }
    .desktop-view {
        display: none;
    }
    .topbar {
        padding-left: 1rem !important;
    }
    .topbar p {
        display: none;
    }
    .bottombar .menu {
        width: 100%;
        display: flex !important;
        justify-content: space-evenly;
    }

    .bottombar .menu > li {
        list-style-type: none;
        margin-left: 1.5rem;
    }

    .user-name-dashboard {
        display: none;
    }

    #latest-header {
        font-size: 1rem !important;
    }
    .faqs-container {
        padding-inline: 0;
    }
    .faqs-container h1 {
        font-size: 1.6rem;
        text-align: center;
    }

    .faqs-container .accordion-item {
        font-size: 1rem;
    }
    .profile-col-admin {
        padding-bottom: 2rem !important;
    }

    #validate-head-btns {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #validate-head-btns div:nth-child(2) {
        margin-top: 1rem;
    }

    .request-form form .header-file-complaint {
        flex-direction: column !important;
        justify-content: center;
        align-items: center;
    }

    .announcement-content #authorAnnouncement {
        text-align: left !important;
    }
    .announcement-content #otherDate {
        display: block !important;
        text-align: left !important;
    }
    .announcement-content #announcementDate {
        display: none !important;
        text-align: left !important;
    }

    .announcement-content .news-header {
        display: flex;
        flex-direction: column !important;
        justify-content: start !important;
        align-items: start !important;
    }
}
@media screen and (max-width: 500px) {
    .manage-announcement-head {
        flex-direction: column !important;
    }

    .manage-announcement-head a {
        margin-top: 1rem;
    }

    .requestAddress {
        white-space: wrap !important;
    }
}
@media screen and (max-width: 450px) {
    .announcement-title {
        text-align: left !important;
    }
    #latest-header span,
    #latest-transaction span {
        font-size: 0.8rem;
    }

    #latest-header i,
    #latest-transaction i {
        font-size: 1rem !important;
    }
    .btn-all {
        background-color: var(--main-font-color) !important;
        color: #fff;
        padding-inline: 0.5rem;
        padding-block: 0.2rem;
        border-radius: 0.2rem;
        margin-left: 0.25rem;
    }
    .dashboard .dashboard-table {
        padding: 0 !important;
    }
    .admin-profile .profile-picture {
        margin-top: 15rem;
    }
    .homeBtnTwo {
        top: 80px !important;
    }
    .popup-image img {
        width: 85%;
    }
    .request-form .head,
    .officials-form .head {
        flex-direction: column;
        gap: 1rem;
    }

    .request-form .head button {
        margin-top: 1.5rem;
    }
    #signup {
        padding: 3rem 0;
    }
    #loginForm {
        padding-inline: 2rem !important;
    }
    #loginLogo img {
        width: 200px;
    }

    .user-management-head {
        flex-direction: column;
    }

    .user-management-head button,
    .user-management-head a {
        margin-top: 1rem;
    }
    .bottombar {
        width: 100%;
        justify-content: center !important;
        font-size: 0.8rem;
    }

    .bottombar ul li {
        margin-left: 0 !important;
    }
}
@media screen and (max-width: 400px) {
    .image-container .image {
        width: 250px !important;
    }
}

@media screen and (max-height: 740px) {
    .hero-logo img {
        width: 300px;
    }
}

@media screen and (max-height: 730px) {
    .validate-resident-inner {
        height: calc(400px - 50px);
    }
}