@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  font-family: "Poppins", sans-serif;
}

:root {
  --main-color: #033a80;
  --bg-color: #fff;
  --text-color: #0f0c29;
  --hover: hsl(260, 100%, 51%);
  --big-font: 3.2rem;
  --medium-font: 1.8rem;
  --p-font: 0.941rem;
}

section {
  padding: 50px 10%;
}

body.active {
  --text-color: #fff;
  --bg-color: #0f0c27;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}



.heading {
  text-align: center;
}

.heading h2 {
  font-size: 30px;
}

.heading span {
  font-size: var(--p-font);
  color: rgb(2, 166, 70);
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-color);
  padding: 13px 10%;
  transition: 0.2s;
  box-shadow: -3px -3px 7px #ffffff73,
    2px 2px 5px rgba(94, 104, 121, 0.288);
}

header.shadow {
  box-shadow: 0 0 4px rgb(14 55 54 / 15%);
}

.logo {
  font-size: 1.61rem;
  font-weight: 600;
  color: var(--text-color);
}

.logo span {
  font-size: 1.61rem;
  font-weight: 600;
  color: crimson;
}

.navbar {
  display: flex;
}

.navbar a {
  font-size: 1rem;
  padding: 10px 20px;
  color: var(--text-color);
  font-weight: 500;
}

.navbar a:hover {
  color: var(--hover);
}

#menu-icon {
  font-size: 24px;
  cursor: pointer;
  z-index: 10001;
  display: none;
}

#darkmode {
  font-size: 22px;
  cursor: pointer;
}

.icon-container {
 font-size: 20px;
 cursor: pointer;
 margin-top: -5px;
 margin-left: 10px; /* Add some margin on the left side */
 margin-right: 10px; /* Add some margin on the right side */
}


.home {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.2fr 1fr 1fr;
  align-items: center;
  gap: 1rem;
}

.home-img {
  order: 3;
}

.home-img img {
  width: 100%;
}

.home-text span {
  font-size: var(--medium-font);
  font-weight: 500;
}

.home-text h1 {
  font-size: var(--big-font);
  line-height: 1.15;
  margin-bottom: 15px;
}

.home-text h2 {
  font-size: 1.1rem;
  font-weight: 400;
}

.home-text p {
  font-size: var(--p-font);
  font-weight: 400;
  margin: 0.7rem 0 1rem;
}

.social {
  display: flex;
  flex-direction: column;
}

.social a {
  margin-bottom: 1rem;
  font-size: 22px;
  color: var(--text-color);
}

.social a:hover {
  color: var(--hover);
}

.btn {
  display: inline-block;
  background: var(--main-color);
  color: #fff;
  padding: 0.7rem 1.3rem;
  border-radius: 0.5rem;
}

.btn:hover {
  background: var(--hover);
}

.about-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.about-text1 p {
 font-size: var(--p-font);
 font-weight:400;
 text-align: justify;
 width: 90%;
}

.about-text1 span {
 font-size: 16px;
 font-weight: bold;
 color:green;
}


.about-text2 p {
  font-size: var(--p-font);
  font-weight: 400;
  text-align: justify;
}

.about-text2 span{
 font-size: 16px;
 font-weight: bold;
 color:green;
}



.scroll-1_2::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}

.scroll-1_2::-webkit-scrollbar-thumb {
 border-radius: 20px;
 background: #888;
}

.container_2 * {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 color: rgb(255, 246, 246);
}

.container_2 {
 display: flex;
 overflow-x: scroll;
 padding: 24px;
 width: 300px;
 scroll-snap-type: x mandatory;
 scroll-padding-top: 24px;
 border-radius: 8px;
 gap: 20px;
}

.container_2 .card_2 {
 flex: 0 0 100%;
 overflow: hidden;
 border-radius: 8px;
 background-color: #140814;
 scroll-snap-align: start;
}

.card_2 .card__image_2 {
 flex: 1;
 height: 120px;
}

.card_2:nth-child(1) .card__image_2 {
 background-image: linear-gradient(
     to right top,
     #051937, 
     #004d7a, 
     #008793, 
     #00bf72, 
     #a8eb12
 );
}

.card_2:nth-child(2) .card__image_2 {
 background-image: linear-gradient(
   to right top, 
   #dc09a5, 
   #ce00b4, 
   #ba00c5, 
   #9c00d8, 
   #6f12eb
 );
}

.card_2:nth-child(3) .card__image_2 {
 background-image: linear-gradient(
   to right top, 
   #dc1009, 
   #e55f00, 
   #e49200, 
   #dac000, 
   #c7eb12
 );
}

.card_2:nth-child(4) .card__image_2 {
 background-image: linear-gradient(
     to right top,
     #051937, 
     #004d7a, 
     #008793, 
     #00bf72, 
     #a8eb12
 );
}

.card_2:nth-child(5) .card__image_2 {
 background-image: linear-gradient(
   to right top, 
   #dc09a5, 
   #ce00b4, 
   #ba00c5, 
   #9c00d8, 
   #6f12eb
 );
}

.card_2:nth-child(6) .card__image_2 {
 background-image: linear-gradient(
   to right top, 
   #dc1009, 
   #e55f00, 
   #e49200, 
   #dac000, 
   #c7eb12
 );
}

.card_2 .card__content_2 {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 20px;
}

.card_2 .card__content_2 .card__title_2 {
 font-size: 20px;
 color: #fff;
 text-transform: capitalize;
}

.card_2 .card__content_2 .card__describe_2 {
 color: #fff;
 font-size: 15px;
 text-align: left;
}

.card_2:hover{
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.548);
}









.card-container {
 display: flex;
 gap: 10px; /* Adjust the gap between cards as needed */
 justify-content: space-between; /* Distribute cards horizontally with space between */
 margin-bottom: -15px;
}
.card {
 background: #3a1436;
 position: relative;
 max-width: 150px;
 height: 350px;
 border-radius: 5px;
 padding: 1rem;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 gap: 7.5px;
 transition: 0.5s ease;
 color: white;
}

.card::after {
 content: "";
 position: absolute;
 inset: 0;
 background:var(--main-color);
 opacity: 0.5;
 transition: 0.3s ease;
}

.card:hover::after {
 opacity: 0.25;
}

.cardHeader {
 text-transform: uppercase;
 position: relative;
 width: max-content;
 font-weight: bold;
 transition: all 0.5s ease;
 bottom: 20px;
 font-size: 15px;
}
.cardHeader::after {
 content: "";
 width: calc(100% + 1rem);
 height: 2.5px;
 transform: translateX(calc(-100% - 1rem));
 background: aqua;
 bottom: -10px;
 left: 0;
 position: absolute;
 opacity: 0;
}

.details {
 z-index: 2;
 display: flex;
 flex-direction: column;
 gap: 5px;
 transform: translateY(95%);
 transition: all 0.5s ease;
}

.cardText{
 font-size: 14px;
}

.button {
 background-color: aqua;
 color: black;
 padding: 2.5px 5px;
 width: max-content;
 border-radius: 2.5px;
 cursor: pointer;
}

.button:hover {
 background-color: rgba(0, 255, 255, 0.466);
 color: white;
}
.card:hover .details {
 transform: translateY(0%);
 transition-delay: 0.5s;
}
.card:hover .cardHeader::after {
 transform: translateX(-1rem);
 transition: 0.5s ease;
 opacity: 1;
}
.card:hover {
 transform: scale(1.1);
 border-radius: 15px;
}



.information {
  margin: 1rem 0 1.4rem;
}

.information .info-box {
  display: flex;
  align-items: center;
  margin-bottom: 1.4rem;
}

.information .info-box .bx {
  font-size: 22px;
}

.information .info-box span {
  font-weight: 400;
  margin-left: 15px;
  margin-right: 15px;
}

.skills-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
  margin-top: 4rem;
}

.skills-img img {
  width: 80%;
  padding-left: 4rem;
  object-position: center;
}

.bars-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1rem;
}

.bars-box h3,
span {
  font-size: 1.1rem;
  font-weight: 500;
}

.light-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background: hsla(260, 100%, 44%, 0.4);
  border-radius: 0.5rem;
}

.percent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.5rem;
  background: var(--main-color);
  border-radius: 0.5rem;
}

.html-bar {
  width: 0%;
}

.css-bar {
  width: 84%;
}

.js-bar {
  width: 74%;
}

.react-bar {
  width: 80%;
}

.services-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.services-box {
  padding: 20px;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 0.5rem;
  border-bottom: 2px solid var(--main-color);
  box-shadow: 0 2px 7px rgb(14 55 54 / 15%);
  background-color: #3a1436;
}



.services-box:hover {
  background-color:  #490843;
}

.services-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.7rem 0 0.4rem;
  color: #fff;
}



.services-box .bx {
  padding-top: 2rem;
  font-size: 54px;
  color: var(--main-color);
}

.services-box:hover .bx {
  color: #22cf91;
}

.services-box a {
  color: var(--main-color);
  font-size: var(--p-font);
  font-weight: 500;
}

.services-box:hover a {
  color: #8b8a8f;
}


.bims-services-container {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 1rem;
 margin-top: 2rem;
}

.bims-services-text1 p {
font-size: var(--p-font);
font-weight:400;
text-align: justify;
width: 90%;
}

.bims-services-text1 span {
font-size: 16px;
font-weight: bold;
color:green;
}


.bims-services-text2 p {
 font-size: var(--p-font);
 font-weight: 400;
 text-align: justify;
}

.bims-services-text2 span{
font-size: 16px;
font-weight: bold;
color:green;
}



.contact-form {
  display: grid;
  place-items: center;
  margin-top: 2rem;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  width: 650px;
}

form input,
textarea {
  padding: 15px;
  border-radius: 0.5rem;
  width: 100%;
  border: none;
  outline: none;
  background: hsla(260, 100%, 44%, 0.1);
  margin-bottom: 1rem;
  color: var(--text-color);
}

form input::placeholder,
textarea::placeholder {
  color: var(--text-color);
}

form textarea {
  resize: none;
  height: 200px;
}

.contact-button {
  width: 160px;
  cursor: pointer;
  background: #2768d9;
  color: #fff;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 35%;
}

.contact-button:hover {
  background: var(--hover);
}

.footer {
  display: grid;
  place-items: center;
  padding: 20px;
  color: #000;
}

.footer h2 {
  font-size: 1.5rem;
  margin-bottom: 1.6rem;
  color: var(--text-color)
}

.footer-social a i {
  color: rgb(10, 26, 208);
  font-size: 25px;
  margin-left: 10px;
  text-align: center;
  line-height: 40px;
  background-color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.copyright {
  padding: 20px;
  background: var(--main-color);
  text-align: center;
  color: #fff;
}

.copyright a {
  color: #22cf91;
}

/* For Mobile */
@media (max-width: 991px) {
  header {
    padding: 18px 4%;
  }

  section {
    padding: 50px 4%;
  }
}

@media (max-width: 881px) {
  :root {
    --big-font: 2.7rem;
    --medium-font: 1.4rem;
  }
}

@media (max-width: 768px) {
  :root {
    --big-font: 2.4rem;
    --medium-font: 1.2rem;
  }

  header {
    padding: 11px 4%;
  }

  #menu-icon {
    display: initial;
    color: var(--text-color);
  }

  header .navbar {
    position: absolute;
    top: -500px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
    transition: 0.2s ease;
    text-align: center;
  }

  .navbar.active {
    top: 100%;
  }

  .navbar a {
    padding: 1.5rem;
    display: block;
    background: var(--bg-color);
  }

  #darkmode {
    position: absolute;
    top: 1.4rem;
    right: 2rem;
  }

  .scroll-down {
    display: none;
  }

  .home {
    grid-template-columns: 0.5fr 3fr;
  }

  .home-text {
    grid-column: 1/3;
    padding-left: 1.4rem;
  }

  .home-img {
    order: initial;
  }

  .about-container {
    grid-template-columns: 1fr;
  }

  .about-img {
    display: flex;
    justify-content: center;
  }

  .skills-container {
    grid-template-columns: 1fr;
  }

  .skills-img img {
    padding-left: 0;
  }

  .skills-img {
    padding-top: 2rem;
    display: flex;
    justify-content: center;
  }

  .contact-form form {
    width: 300px;
  }

  .contact-button {
    margin-left: 25%;
  }
}

@media (max-width: 340px) {
  :root {
    --big-font: 1.7rem;
    --medium-font: 1.1rem;
  }

  .home-text span {
    font-size: 1rem;
  }

  .home-text h2 {
    font-size: 0.9rem;
    font-weight: 500;
  }

  .information .info-box span {
    font-size: 1rem;
  }

  .contact-form form {
    width: 300px;
  }

  .contact-button {
    margin-left: 25%;
  }
}

.login-box {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 370px;
 height: 435px;
 padding: 47px;
 padding-bottom: 57px;
 transform: translate(-50%, -50%);
 background: var(--bg-color);
 box-sizing: border-box;
 box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
 border-radius: 30px;
 border-bottom: 2px solid var(--main-color);
}

.login-box h2 {
 margin: 10px 0 30px;
 padding: 0;
 /* color: #fff; */
 text-align: center;
}

.login-box .user-box {
 position: relative;
}

.login-box .user-box input {  
opacity: 1;
 font-size: 15px;
 border-bottom: 1px solid #fff;
 display: block;
 border: none;
 width: 95%;
 padding: 13px 18px;
 margin: 15px 15px 0 0;
 font-size: 14px;
 border-radius: 100px;
 background: hsla(260, 100%, 44%, 0.1);
 /* color: #fff; */
 animation: bounce 1s;
 -webkit-appearance: none;
}

.login-box .user-box label {
 position: absolute;
 opacity: 5px;
 top: 0;
 left: 17px;
 font-size: 13px;;
 padding: 10px 0;
 font-size: 16px;
 /* color: #fff; */
 pointer-events: none;
 transition: .5s;
}

.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
 top: -28px;
 left: 0;
 color: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
 font-size: 12px;
}

.login-box form .login-btn {
 position: relative;
 display: inline-block;
 background: var(--main-color) !important;
 color: #fff;
 padding: 16px !important;
 font-size: 13px;
 text-decoration: none;
 text-transform: uppercase;
 overflow: hidden;
 transition: .5s;
 margin-top: 15px;
 margin-left: 4px;
 letter-spacing: 2px;
 border-radius: 30px;
 width: 270px;
 text-align: center;
}

.login-box .login-btn:hover {
 background: var(--hover) !important;
 color: rgb(255, 255, 255);
 padding: 16px !important;
 cursor: pointer;
 transition: all 0.4s ease;
 border-radius: 30px;
 
}



.login-box a span {
 position: absolute;
 display: block;
}


/* Initially hide the pop-up */
.popup {
display: none;
position: fixed;
/* top: 15%; */
left: 68%;
width: 26%;
height: 58%;
/* background: var(--main-color); */
z-index: 1000;
border-radius: 8px;
}

.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.close {
    position: absolute;
    top: -215px;
    right: -164px;
    font-size: 42px;
    cursor: pointer;
    /* padding: 10px; */
    /* width: 20px; */
    /* height: 30px; */
    z-index: 2000;
}




/* Style for the popup container */
.bims-services-popup {
 display: none; /* Hidden by default, will show when triggered */
 position: fixed;
 top: 15%; /* Centers vertically from the top */
 left: 50%; /* Centers horizontally */
 transform: translateX(-50%); /* Ensures it is perfectly centered */
 width: 60%; /* Sets the width of the popup */
 height: 66.5%; /* Set a fixed height */
 background-color: #979aaa ; /* You can replace --hover with a color */
 z-index: 1000; /* Ensures it sits on top of other content */
 border-radius: 8px; /* Rounded corners */
 padding: 10px; /* Adds internal padding */
 overflow-y: auto; /* Allows scrolling for long content */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Soft shadow for the popup */
 padding-bottom: -10px;
}

.bims-services-button-popup {

 display: none; /* Hidden by default, will show when triggered */
 position: fixed;
 top: 15%; /* Centers vertically from the top */
 left: 50%; /* Centers horizontally */
 transform: translateX(-50%); /* Ensures it is perfectly centered */
 width: 60%; /* Sets the width of the popup */
 height: 66.5%; /* Set a fixed height */
 background: var(--bg-color); /* You can replace --hover with a color */
 z-index: 1000; /* Ensures it sits on top of other content */
 border-radius: 8px; /* Rounded corners */
 padding: 10px; /* Adds internal padding */
 overflow-y: auto; /* Allows scrolling for long content */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Soft shadow for the popup */
 padding-bottom: -10px;


}

/* Centering the content inside the popup */
.bims-services-popup-content {
 position: relative;
 top: 10%; /* Space from the top of the popup */
 left: 50%;
 transform: translateX(-50%); /* Ensures the content is centered inside */
}

/* Close button style */
.bims-services-close {
 position: absolute;
 top: -30px; /* Adjusted for better alignment */
 right: 10px; /* Moves the close button to the top-right */
 font-size: 30px;
 cursor: pointer;
 padding: 10px;
 color: white;
 background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
 border-radius: 50%;
 border: none;
 width: 35px;
 height: 35px;
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Close button hover effect */
.bims-services-close:hover {
 background-color: rgba(0, 0, 0, 0.8); /* Darker shade when hovering */
}

/* Style for content within the popup (e.g., images, paragraphs) */
.bims-services-popup img {
 width: 100%;
 height: auto;
 border-radius: 20px;
 margin-top: -5.6%;

 
}

/* Make sure the content text is readable */
.bims-services-popup p {
 font-size: 16px;
 line-height: 1.6;
 color: #333;
 margin-bottom: 10px;
}


/* Style for the BIMS Resident Services popup container */
.bims-resident-services-popup {
 display: none; /* Hidden by default */
 position: fixed;
 top: 15%; /* Centers vertically */
 left: 50%; /* Centers horizontally */
 transform: translateX(-50%); /* Perfect centering */
 width: 60%; /* Width of the popup */
 height: 66.5%; /* Set height */
 background-color: #979aaa; /* Popup background color */
 z-index: 1000; /* On top of other content */
 border-radius: 8px; /* Rounded corners */
 padding: 10px;
 overflow-y: auto; /* Allows scrolling for content */
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Soft shadow */
 padding-bottom: -10px;
}

/* Centering content inside BIMS Resident Services popup */
.bims-resident-services-popup .bims-resident-services-popup-content {
 position: relative;
 top: 10%; /* Space from the top */
 left: 50%;
 transform: translateX(-50%);
}

/* Close button style for the BIMS Resident Services popup */
.bims-resident-services-popup .bims-resident-services-close {
 position: absolute;
 top: -30px;
 right: 10px;
 font-size: 30px;
 cursor: pointer;
 padding: 10px;
 color: white;
 background-color: rgba(0, 0, 0, 0.6);
 border-radius: 50%;
 border: none;
 width: 35px;
 height: 35px;
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Contact form styling inside the popup */
.bims-resident-services-popup form {
 display: flex;
 flex-direction: column;
 width: 100%;
}

/* Input fields styling inside the BIMS Resident Services popup */
.bims-resident-services-popup input,
.bims-resident-services-popup textarea,
.bims-resident-services-popup .input {
 padding: 15px;
 border-radius: 0.5rem;
 width: 100%;
 border: none;
 outline: none;
 background: hsla(260, 100%, 44%, 0.1);
 margin-bottom: 1rem;
 color: var(--text-color);
}

/* Styling for the submit button inside the popup */
.bims-resident-services-popup .contact-button {
 width: 160px;
 cursor: pointer;
 background: #2768d9;
 color: #fff;
 justify-content: center;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-left: 35%;
}

/* Hover effect for the contact button */
.bims-resident-services-popup .contact-button:hover {
 background: var(--hover);
}

.step-container {
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 20px;
 margin-top: 5%;
 width: 100%;
 font-size: var(--p-font);

}
.step {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 10px;
 border-right: 2px solid var(--main-color);
padding-right: 20px;
 margin: 0 10px;
 font-size: 16px;
 width: 280px;
 height: 100px;
}


.profile-container {
  width: 100%;
  max-width: 1500px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: 1fr;  /* Start with 1 column */
  gap: 2rem;
}

/* Profile Section */
.profile-section {
  display: flex;
  flex-wrap: wrap;  /* Allow items to wrap within a row */
  justify-content: center;  /* Center all items */
  margin-bottom: 40px;
}

.profile-section.councilors {
  grid-column: 1; /* Barangay Councilors in the first row */
}

.profile-section.sk-councilors {
  grid-column: 1; /* SK Councilors in the second row */
}

/* Profile Card */
.profile-section .profile-card {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 10px;
  width: 200px;  /* Width of each card */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-section .profile-card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.profile-section .profile-card h2 {
  font-size: 1.2rem;
  margin-bottom: 5px;
  font-weight: bold;
}

.profile-section .profile-card p {
  font-size: 1rem;
  color: #777;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .profile-container {
      grid-template-columns: 1fr 1fr;  /* 2 columns for small screen */
  }

  .profile-section .profile-card {
      width: 100%;
      max-width: 300px;
  }
}



.bims-services-community-services-container {
  width: 100%;
  margin: 20px auto;
}

.bims-services-community-services-calendar {
 
  padding: 20px;
  border-radius: 0.5rem;
  border-bottom: 2px solid var(--main-color);
  box-shadow: 0 2px 7px rgb(14 55 54 / 15%);
  background-color: var(--main-color);
  
}

.bims-services-community-services-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#month-year {
  font-size: 1.5em;
  font-weight: bold;
}

.bims-services-community-services-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.day {
  padding: 15px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}

.day:hover {
  background:var(--hover);
}

.event {
  background-color: #45a049;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9em;
}

.bims-services-community-services-event-details {
  margin-top: 30px;
 
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.event-details h2 {
  margin-bottom: 15px;
  font-size: 1.5em;
}



.bims-services-barangay-environmental-services-container {
  width: 100%;

  margin: 40px auto;
}

.bims-services-barangay-environmental-services-container-postsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}


/* Post Card Styling */
.barangay-environmental-services-post-card {
  background-color: white !important;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.barangay-environmental-services-post-card:hover {
  transform: translateY(-10px);
}

.post-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.barangay-environmental-services-postCard-postContent {
  padding: 20px;
}

.barangay-environmental-services-postCard-postContent-postTitle {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #333;
}

.barangay-environmental-services-postCard-postContent-postExcerpt {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}

.read-more {
  display: inline-block;
  font-size: 1rem;
  color: #4CAF50;
  text-decoration: none;
  padding: 10px 15px;
  border: 2px solid #4CAF50;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.read-more:hover {
  background-color: #4CAF50;
  color: white;
}


        /* Hide/Show sections */
        .additional-fields {
          display: none;
      }