/************************************ Center Two Section *********************************/
.op_homepage_center_two_container_slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
}

.op_homepage_center_two_container_list {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.op_homepage_center_two_container_item {
  min-width: 100%;
  box-sizing: border-box;
  /* flex-shrink: 0; */
  padding: 10px;
}

.op_homepage_center_two_container_item img {
  width: 100%;
  display: block;
  border-radius: 20px;
}
.op_homepage_center_two_heading {
  position: absolute;
  bottom: 0;
  z-index: 1;
  background: var(--color-primary-white);
  padding: 25px 40px 16px;
  border-radius: 20px 20px 0 0;
}
section.op_homepage_center_two_container {
  background: var(--color-primary-white);
  background-image: url(/wp-content/uploads/2025/04/Repeat-Grid-10.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.op_homepage_center_two_container_tabs_nav_link {
  padding: 22px;
  background: var(--color-primary-white);
  border-radius: 10px;
  border: 1px solid #dfeef4;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: all 0.3s ease;
}
.op_homepage_center_two_container_tabs_nav {
  justify-content: center;
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-inline: 3rem;
}
.op_homepage_center_two_container_tabs_nav_icon {
  padding: 24px;
  border-radius: 50%;
  width: 88px;
  height: 88px;
  background: #fff5ef;
}
.op_homepage_center_two_container_tabs_nav_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.op_homepage_center_two_container_tabs_nav_title svg {
  transform: translateX(-10px);
  transition: transform 0.3s ease;
}
.op_homepage_center_two_container_tabs_nav_link.active,
.op_homepage_center_two_container_tabs_nav_link:hover {
  background: var(--color-secondary-500);
}
.op_homepage_center_two_container_tabs_nav_link.active p,
.op_homepage_center_two_container_tabs_nav_link:hover p {
  color: var(--color-primary-white);
}
.op_homepage_center_two_container_tabs_nav_link.active svg,
.op_homepage_center_two_container_tabs_nav_link:hover svg {
  transform: translateX(0);
}
.op_homepage_center_two_container_tabs_nav_link.active
  .op_homepage_center_two_container_tabs_nav_title
  svg
  path,
.op_homepage_center_two_container_tabs_nav_link:hover
  .op_homepage_center_two_container_tabs_nav_title
  svg
  path {
  stroke: var(--color-primary-white);
}
.op_homepage_center_two_container_tabs_pane {
  width: 60%;
  margin: 20px auto;
}
/************************************ Center Section *********************************/
.op_homepage_activities_container_two {
  background: var(--color-primary-500);
  background-image: url(/wp-content/uploads/2025/04/Group-65920-1.png);
  background-position: center;
  background-size: cover;
}
.op_upcoming_activities_container_two {
  display: grid;
  grid-template-columns: 1.7fr 3.4fr;
  gap: 80px;
}
.op_upcoming_activities_holder {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 25px;
  margin-left: 70px;
}
.op_upcoming_activities_single_holder {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 10px;
  transition: none;
}
.op_upcoming_activities_img {
  width: 100%;
}
.op_upcoming_activities_img img {
  object-fit: cover;
  width: 100%;
  border-radius: 4px;
  height: 230px;
}
.op_upcoming_activities_title {
  padding: 20px 15px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.op_upcoming_activities_title h4 {
  font-family: "Dancing Script";
  margin-bottom: 0;
}
.op_upcoming_activities_single_holder:is(:nth-child(2), :nth-child(4)) {
  transform: translateY(15px);
}
.op_upcoming_activities_container_two .op_h2_heading {
  width: 75%;
}
/************************************ Center Section *********************************/
.op_homepage_center_data_bg {
  margin-top: 25px;
  position: relative;
  display: grid;
  grid-template-columns: 2.4fr 3fr;
  gap: 50px;
  align-items: center;
}
.op_homepage_center_data_bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% - 10%);
  background: #e8f7ee;
  background-image: url(/wp-content/uploads/2025/04/Mask-Group-37.png);
  background-position: center;
  background-size: cover;
  z-index: -1;
  bottom: 5%;
}
.op_homepage_center_content_holder {
  padding: 6rem 0;
}
/* .op_homepage_center_img_holder {
	transform: scale(1.3) translateX(40px);
} */
.op_homepage_center_img_holder img {
  border-radius: 10px;
}
.op_homepage_center_other_centers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 30px;
  margin-block: 20px;
}
.op_homepage_center_single_center {
  border-radius: 40px 10px 10px 40px;
  background: #fff;
  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  position: relative;
  margin-block: 35px;
}
.op_homepage_center_single_center_img img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* position: absolute;
	top: -20px; */
}
.op_homepage_center_single_center_img {
  position: absolute;
}
.op_homepage_center_single_center_title a {
  display: flex;
  padding-block: 25px;
  align-items: center;
  gap: 20px;
  padding-left: 9rem;
  padding-right: 2rem;
  justify-content: space-between;
  transition: all 0.3s ease;
}
.op_homepage_center_single_center_title a svg {
  transform: translateX(-10px);
  transition: transform 0.3s ease;
  width: 10px;
  height: 16px;
}
.op_homepage_center_single_center_title {
  border-radius: 40px 10px 10px 40px;
  transition: 300ms ease-in-out;
}
.op_homepage_center_single_center_title:hover a svg {
  transform: translateX(0);
}
.op_homepage_center_single_center_title:hover {
  background: var(--color-secondary-500);
}
.op_homepage_center_single_center_title:hover a p {
  color: var(--color-primary-white);
}
.op_homepage_center_single_center_title:hover a svg path {
  stroke: var(--color-primary-white);
}
.op_homepage_center_single_center_title {
  flex-grow: 1;
}
/************************************ Banner Section *********************************/
section.op_banner_container {
  position: relative;
  background: var(--color-primary-500);
  margin-top: -111px;
}
.op_banner_1 .op_video_container video,
.op_banner_1 .op_video_container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* border-radius: 30px 30px 0px 0px; */
}
.op_banner_1 .op_hero_content {
  width: 30rem;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="464" height="501" viewBox="0 0 464 501" fill="none"><path d="M10.0781 0.200958L453.701 28.7776C455.015 28.7776 456.316 29.0363 457.53 29.5391C458.744 30.0419 459.847 30.7789 460.776 31.7079C461.705 32.6369 462.442 33.7398 462.945 34.9537C463.447 36.1675 463.706 37.4685 463.706 38.7823L423.279 490.434C423.279 493.088 422.225 495.632 420.349 497.509C418.472 499.385 415.928 500.439 413.274 500.439H44.1118C38.586 500.439 34.1066 490.434 34.1066 490.434L0.0729218 10.2057C0.0729218 7.55229 1.12704 5.00754 3.00338 3.13128C4.87972 1.25503 7.42458 0.200958 10.0781 0.200958Z" fill="%23CC5411"/></svg>');
  background-position: center center;
  background-size: contain;
  padding: 70px 60px 8rem 60px;
  position: relative;
  background-repeat: no-repeat;
}
.op_banner_1 .op_hero_content::after {
  content: "";
  position: absolute;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="41" viewBox="0 0 40 41" fill="none"><path d="M30.5671 9.69651L27.6076 8.60498C26.4238 8.16853 25.3487 7.48052 24.4565 6.5884C23.5644 5.69628 22.8763 4.62127 22.4399 3.43752L21.3483 0.478115C21.3283 0.423805 21.2921 0.376934 21.2446 0.343835C21.1971 0.310736 21.1406 0.292999 21.0827 0.292999C21.0248 0.292999 20.9683 0.310736 20.9208 0.343835C20.8733 0.376934 20.8371 0.423805 20.817 0.478115L19.7255 3.43752C19.2889 4.62123 18.6009 5.69621 17.7087 6.58832C16.8166 7.48044 15.7415 8.16847 14.5578 8.60498L11.6012 9.69651C11.5469 9.71655 11.5001 9.75275 11.467 9.80024C11.4339 9.84773 11.4161 9.90423 11.4161 9.96212C11.4161 10.02 11.4339 10.0765 11.467 10.124C11.5001 10.1715 11.5469 10.2077 11.6012 10.2278L14.5608 11.3193C15.7445 11.7558 16.8196 12.4438 17.7117 13.3359C18.6039 14.228 19.2919 15.303 19.7285 16.4867L20.82 19.4461C20.8401 19.5005 20.8763 19.5473 20.9238 19.5804C20.9713 19.6135 21.0278 19.6313 21.0857 19.6313C21.1436 19.6313 21.2001 19.6135 21.2476 19.5804C21.2951 19.5473 21.3313 19.5005 21.3513 19.4461L22.4429 16.4867C22.8794 15.303 23.5675 14.228 24.4596 13.3359C25.3518 12.4438 26.4268 11.7558 27.6106 11.3193L30.5701 10.2278C30.6244 10.2077 30.6713 10.1715 30.7044 10.124C30.7375 10.0765 30.7552 10.02 30.7552 9.96212C30.7552 9.90423 30.7375 9.84773 30.7044 9.80024C30.6713 9.75275 30.6244 9.71655 30.5701 9.69651H30.5671Z" fill="%23F9E747"/><path d="M39.8285 35.5177L38.4278 35.0007C37.8668 34.7938 37.3573 34.4679 36.9344 34.0453C36.5116 33.6227 36.1855 33.1134 35.9785 32.5527L35.4613 31.1527C35.4519 31.1268 35.4348 31.1044 35.4122 31.0886C35.3896 31.0728 35.3628 31.0643 35.3352 31.0643C35.3077 31.0643 35.2808 31.0728 35.2582 31.0886C35.2357 31.1044 35.2185 31.1268 35.2091 31.1527L34.6919 32.5527C34.485 33.1135 34.1589 33.6227 33.736 34.0453C33.3132 34.468 32.8037 34.7939 32.2426 35.0007L30.8419 35.5177C30.816 35.527 30.7936 35.5442 30.7778 35.5667C30.7619 35.5893 30.7534 35.6161 30.7534 35.6437C30.7534 35.6712 30.7619 35.6981 30.7778 35.7206C30.7936 35.7432 30.816 35.7603 30.8419 35.7697L32.2426 36.2867C32.8039 36.4935 33.3137 36.8195 33.7367 37.2423C34.1597 37.6651 34.486 38.1746 34.6929 38.7357L35.2101 40.1357C35.2195 40.1616 35.2367 40.184 35.2592 40.1998C35.2818 40.2156 35.3087 40.2241 35.3362 40.2241C35.3638 40.2241 35.3907 40.2156 35.4132 40.1998C35.4358 40.184 35.4529 40.1616 35.4623 40.1357L35.9795 38.7357C36.1865 38.1746 36.5127 37.6651 36.9357 37.2423C37.3587 36.8195 37.8685 36.4935 38.4298 36.2867L39.8305 35.7697C39.8565 35.7603 39.8789 35.7432 39.8947 35.7206C39.9105 35.6981 39.919 35.6712 39.919 35.6437C39.919 35.6161 39.9105 35.5893 39.8947 35.5667C39.8789 35.5442 39.8565 35.527 39.8305 35.5177H39.8285Z" fill="%23F9E747"/><path d="M12.2772 32.6354L10.5123 31.9851C9.80636 31.7248 9.16529 31.3146 8.63328 30.7826C8.10126 30.2506 7.69097 29.6095 7.43069 28.9036L6.78035 27.1388C6.76836 27.1064 6.74673 27.0784 6.71838 27.0587C6.69003 27.039 6.65631 27.0284 6.62176 27.0284C6.58721 27.0284 6.5535 27.039 6.52515 27.0587C6.49679 27.0784 6.47517 27.1064 6.46318 27.1388L5.81284 28.9036C5.55256 29.6095 5.14226 30.2506 4.61025 30.7826C4.07824 31.3146 3.43716 31.7248 2.73124 31.9851L0.96732 32.6354C0.934919 32.6474 0.906967 32.669 0.887227 32.6974C0.867486 32.7257 0.856903 32.7594 0.856903 32.794C0.856903 32.8285 0.867486 32.8623 0.887227 32.8906C0.906967 32.919 0.934919 32.9406 0.96732 32.9526L2.73224 33.6029C3.43816 33.8631 4.07924 34.2734 4.61125 34.8054C5.14326 35.3374 5.55356 35.9785 5.81384 36.6843L6.46418 38.4492C6.47617 38.4816 6.49779 38.5095 6.52615 38.5293C6.5545 38.549 6.58821 38.5596 6.62276 38.5596C6.65731 38.5596 6.69103 38.549 6.71938 38.5293C6.74773 38.5095 6.76936 38.4816 6.78135 38.4492L7.43169 36.6843C7.69197 35.9785 8.10226 35.3374 8.63428 34.8054C9.16629 34.2734 9.80736 33.8631 10.5133 33.6029L12.2782 32.9526C12.3106 32.9406 12.3386 32.919 12.3583 32.8906C12.378 32.8623 12.3886 32.8285 12.3886 32.794C12.3886 32.7594 12.378 32.7257 12.3583 32.6974C12.3386 32.669 12.3096 32.6474 12.2772 32.6354Z" fill="%23F9E747"/></svg>');
  width: 40px;
  height: 40px;
  top: 20px;
  left: 20px;
}
.op_video_container {
  width: 100%;
  height: 850px;
}
.op_heading_search_container {
  position: absolute;
  text-align: start;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: start;
}
.op_banner_1 .op_banner_text_sm {
  font-size: var(--fs-16);
  margin-top: 20px;
}
.op_banner_1 .op_banner_text {
  font-size: var(--p-size);
}
.op_banner_1 .op_banner_head {
  font-size: var(--h1-homepage);
  font-weight: 700;
  line-height: 60px;
}
section.op_banner_container.op_banner_1::before {
  content: "";
  position: absolute;
  width: 100%;
  /* border-radius: 30px 30px 0px 0px; */
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
}
form.op_search_form {
  max-width: 48%;
  margin: auto;
}
.op_banner_1 #op_search_btn {
  width: 150px;
  justify-content: center;
}
/* .op_search_input_group {
	align-items: center;
} */
.op_banner_1 .op_search_input_group input {
  padding: 13px 10px 12px 50px;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.op_banner_1 .op_search_input_group svg {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  left: 15px;
  align-content: center;
  height: 100%;
}
.op_banner_1 img.op_mobile_banner_image {
  display: none;
}
/************************************ Banner Section Ends *********************************/
/************************************ Banner Section Two Starts *********************************/
.op_banner_2 .op_video_container video,
.op_banner_2 .op_video_container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 30px 30px 0px 0px;
}
.op_banner_2 .op_hero_content {
  width: 100%;
}
.op_video_container {
  width: 100%;
  height: 750px;
}
.op_banner_2 .op_heading_search_container {
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op_banner_2 .op_banner_text {
  font-size: var(--p-heading);
  margin-top: 20px;
}
.op_banner_head {
  font-size: 62px;
  font-style: normal;
  font-weight: 700;
  line-height: 74px;
}
section.op_banner_container.op_banner_2::before {
  content: "";
  position: absolute;
  width: 100%;
  border-radius: 30px 30px 0px 0px;
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
}
.form.op_search_form {
  max-width: 48%;
  margin: auto;
}
#op_search_btn {
  width: 150px;
  justify-content: center;
  display: flex;
  border-radius: 0 10px 10px 0;
  /* align-content: center; */
  align-items: center;
  cursor: pointer;
  background-color: var(--color-primary-500);
  color: var(--color-primary-white);
}
/* .op_search_input_group {
	align-items: center;
} */
.op_banner_2 .op_search_input_group input {
  padding: 13px 10px 12px 50px;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.op_banner_2 .op_search_input_group svg {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  left: 15px;
  align-content: center;
  height: 100%;
}
.op_banner_2 img.op_mobile_banner_image {
  display: none;
}
/************************************ Banner Section Two Ends *********************************/
/************************************ Banner Section Three *********************************/
/* Toggle Switch */
.toggle_switch {
  position: absolute;
  top: 50%; /* Adjust position */
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 2px;
  cursor: pointer !important;
  z-index: 10;
}

.toggle_input {
  display: none;
}

.toggle_label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0;
  cursor: pointer !important;
}

.toggle_icon {
  /* width: 24px;
	height: 24px; */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 6px 9px;
  cursor: pointer !important;
}

/* Toggle Circle */
.toggle_label::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
  z-index: 0;
  cursor: pointer !important;
}

/* Move the toggle circle */
.toggle_input:checked + .toggle_label::after {
  transform: translateX(36px);
}

/* Highlight the active icon */
.toggle_input:not(:checked) + .toggle_label .video-icon {
  color: black;
}

.toggle_input:checked + .toggle_label .image-icon {
  color: black;
}
.op_video_container video,
.op_video_container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* border-radius: 30px 30px 0px 0px; */
}
.op_banner_head_rotate {
  display: flex;
  flex-direction: column;
  height: 90px;
  overflow: hidden;
  gap: 10px;
  position: relative;
}
.op_banner_head_rotate span {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: rotateText 10s infinite;
}
/* Adding delay to each span */
.op_banner_head span:nth-child(1) {
  animation-delay: 0s;
}

.op_banner_head span:nth-child(2) {
  animation-delay: 4s;
}

.op_banner_head span:nth-child(3) {
  animation-delay: 8s;
}

/* Keyframes for rotation */
@keyframes rotateText {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
.op_hero_content {
  width: 100%;
}
.op_video_container {
  width: 100%;
  height: 700px;
}
.op_heading_search_container {
  position: absolute;
  text-align: start;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: start;
}
.op_banner_text {
  font-size: var(--p-heading);
  margin-top: 20px;
}
.op_banner_head {
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 74px;
}
section.op_banner_container::before {
  content: "";
  position: absolute;
  width: 100%;
  /* border-radius: 30px 30px 0px 0px; */
  /* background: rgba(0, 0, 0, 0.3); */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 4.99%,
    rgba(23, 31, 31, 0.5) 32.25%,
    rgba(0, 0, 0, 0.3) 47.26%,
    rgba(0, 0, 0, 0.3) 61.71%,
    rgba(0, 0, 0, 0.2) 80.06%,
    rgba(0, 0, 0, 0.1) 99.71%
  );
  height: 100%;
}
form.op_search_form {
  max-width: 48%;
  /* margin: auto; */
}
#op_search_btn {
  width: 150px;
  justify-content: center;
}
/* .op_search_input_group {
	align-items: center;
} */
.op_search_input_group input {
  padding: 13px 10px 12px 50px;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}
.op_search_input_group svg {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  left: 15px;
  align-content: center;
  height: 100%;
}
img.op_mobile_banner_image {
  display: none;
}
/************************************ Banner Section Three Ends *********************************/
/************************************ Banner cards *********************************/
section.op_banner_cards_container {
  margin-top: -50px;
  z-index: 1;
  position: relative;
}
.op_banner_cards_holder {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.op_banner_single_card_container {
  border-radius: 10px;
  background-color: var(--color-primary-darkblue);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease-in-out, 0.4s ease-in-out;
  -webkit-transition: color 0.4s ease-in-out, 0.4s ease-in-out;
}
h6.op_banner_single_card_title {
  font-size: var(--fs-20);
  color: var(--color-primary-500);
}
a.op_banner_single_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  position: relative;
  z-index: 1;
}
a.op_banner_single_card img {
  object-fit: contain;
  width: auto;
}
.op_banner_single_card_image {
  position: absolute;
  width: 70%;
  height: 100%;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: end;
  justify-content: end;
}
.op_banner_single_card_container:before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 0px 37px 0px 0px;
  opacity: 0;
  background: var(--color-secondary-500);
  mix-blend-mode: multiply;
  bottom: 0;
  left: 0;
  transition: color 0.4s ease-in-out, 0.4s ease-in-out;
  -webkit-transition: color 0.4s ease-in-out, 0.4s ease-in-out;
  z-index: 0;
}
.op_banner_single_card_container:hover::before {
  opacity: 0.1;
}
.op_banner_single_card_container:hover {
  box-shadow: 0px 14px 16px 0px rgba(0, 0, 0, 0.25);
  transform: translateY(-10px);
}
.op_banner_single_card_container:is(:nth-child(2), :nth-child(5), :nth-child(6))
  .op_banner_single_card_image {
  /* width: 100%; */
}

/************************************ Banner cards Ends *********************************/
/************************************ Upcoming Events two *********************************/
section.op_homepage_upcoming_events_container_two {
  background: url(/wp-content/uploads/2025/04/Upcoming_events.webp);
  background-size: cover;
  background-position: top center;
  position: relative;
  padding-left: 7vw;
  padding-right: 15px;
}
section.op_homepage_upcoming_events_container_two::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-primary-500);
  opacity: 0.8;
  top: 0;
  left: 0;
  z-index: 0;
}
.op_upcoming_events_container_two {
  display: grid;
  grid-template-columns: 1.2fr 3.5fr;
  z-index: 1;
  position: relative;
  gap: 40px;
}
a.op_homepage_upcoming_events_container_two_btn {
  color: var(--color-primary-white);
  font-size: var(--fs-20);
  font-weight: 700;
  text-decoration-line: underline;
  text-underline-position: from-font;
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 50px;
}
.op_homepage_upcoming_events_container_two_icon {
  position: relative;
  right: 10px;
}
.op_upcoming_events_cards_slider_two_navigation {
  display: flex;
  gap: 15px;
}
.op_event_slide_two {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 340px;
  flex-shrink: 1;
  border-radius: 10px;
  background: #fff;
  padding: 15px 5px;
}
.op_event_slide_two_other_detail {
  padding: 0 15px;
}
.op_event_slide_two_title_date {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 0 10px;
}
.op_event_slide_two_img img {
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
}
.op_event_slide_two_date {
  display: flex;
  flex-direction: column;
  width: 75px;
  height: 75px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-secondary-500);
  color: var(--color-primary-white);
  font-size: var(--fs-16);
  line-height: normal;
}
.op_event_slide_two_title {
  font-size: var(--fs-20);
}
.op_upcoming_events_two_cards_mobile_slider {
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  min-height: 0;
  min-width: 0;
  z-index: 0;
}
.op_upcoming_events_cards_holder_two {
  display: grid;
}
.op_op_container_heading_btn {
  margin-top: 70px;
}
.op_event_slide_two_date span {
  font-size: var(--h6-size);
  font-weight: 800;
  line-height: normal;
}
/************************************ Help You section *********************************/
.op_help_you_cards_container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 25px;
}
.op_help_you_cards_single_card_holder {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
}
.op_help_you_card_icon {
  height: 130px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  position: relative;
}
.op_help_you_card_icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/wp-content/uploads/2025/04/help-card.png);
  left: 0;
  top: 0;
  border-radius: 10px 10px 0 0;
  z-index: -1;
  opacity: 0.02;
}
.op_help_you_card_icon svg {
  width: 56px;
  height: 56px;
}
.op_help_you_card_title {
  background: #fff5ef;
  padding: 16px 10px 16px 18px;
  border-radius: 0 0 10px 10px;
}
.op_help_you_know_more {
  display: flex;
  gap: 10px;
  align-items: center;
}
.op_help_you_know_more svg {
  width: 32px;
  height: 32px;
}
a.op_help_you_card_anchor {
  color: var(--color-primary-500);
  font-weight: 500;
  text-decoration-line: underline;
  text-underline-position: from-font;
  font-size: var(--fs-16);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.op_help_you_card_title_icon {
  transform: translateX(-94px);
  transition: transform 0.3s ease-in-out;
}
p.op_help_you_card_title_data {
  font-size: var(--p-size);
  font-weight: 600;
  color: var(--color-primary-500);
  min-height: 60px;
  width: 100%;
  transition: width 0.3s ease;
}
.op_help_you_card_title:hover {
  padding-right: 20px;
  transition: padding-right 0.2s ease-in-out;
}
.op_help_you_card_title:hover a.op_help_you_card_anchor {
  visibility: visible;
  opacity: 1;
}
.op_help_you_card_title:hover .op_help_you_card_title_icon {
  transform: translateX(0);
}
.op_help_you_card_title:hover p.op_help_you_card_title_data {
  width: 80%;
}
/************************************ Announcement Section *********************************/
.op_announcement_container {
  position: sticky;
  top: 0;
  z-index: 2;
}
.op_announcement_container.header_announcement_sticky img.op_icon_img {
  width: 40px;
  height: 40px;
}
.op_announcement_container.header_announcement_sticky .announcement_container {
  padding: 0 8px;
}
.announcement_container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  gap: 16px;
}
p.op_announcement_heading {
  font-size: 16px;
}
.op_announcement_container.header_announcement_sticky
  p.op_announcement_heading {
  font-size: 14px;
}
.announcement_icon {
  position: relative;
}
.announcement_icon span {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding: 6px;
  z-index: 1;
}

.announcement_icon::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  left: -3px;
  z-index: 0;
  top: -3px;
}
.announcement_icon::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  left: -6px;
  z-index: 0;
  top: -6px;
}
span.op_pipe_icon {
  width: 1px;
  height: 26px;
  background: rgba(0, 0, 0, 0.3);
}
.op_view_all_announcement {
  color: var(--color-primary-500);
  /* font-weight: 400; */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  font-size: 14px;
}
img.op_icon_img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  right: -15px;
  position: relative;
}
/************************************ Announcement Section Ends *********************************/

/************************************ Activities of the Season *********************************/
a.op_activity_link svg {
  transform: translateX(-14px);
  transition: transform 0.3s ease;
}
a.op_activity_link.active svg {
  transform: translateX(0px);
}
a.op_activity_link.active svg path {
  stroke: var(--color-primary-white);
}
section.op_homepage_season_activities_container {
  padding-top: 80px;
  padding-bottom: 100px;
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.4) 0.21%,
    rgba(0, 0, 0, 0) 99.81%
  );
  min-height: 80vh;
}
.op_h2_heading h2 {
  font-size: var(--h2-homepage);
  line-height: 1.2;
}
.op_activities_content {
  position: relative;
  background-size: cover;
  background-position: center center;
  transition: background 0.5s ease-in-out;
}
.op_activities_container {
  max-width: 450px;
}
.op_activities_links {
  position: relative;
}

.op_activity_link {
  display: flex;
  background: var(--color-primary-white);
  padding: 28px 38px;
  margin-bottom: 6px;
  border-radius: 10px;
  transition: background 0.3s;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: var(--h6-size);
}

.op_activity_link:hover,
.op_activity_link.active {
  background: var(--color-secondary-500);
  color: var(--color-primary-white);
}

.op_activities_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
  transition: background 0.5s ease-in-out;
  z-index: -1;
}
.activities_description p {
  color: var(--color-primary-white);
  font-size: var(--fs-16);
}

/************************************ Activities of the Season Ends *********************************/

/************************************ Sidebar Navigation Section *********************************/
section.op_homepage_sidebar_nav_container {
  position: fixed;
  top: 50%;
  right: 0;
  background: #fff;
  border-radius: 8px 0 0 8px;
  width: 92px;
  z-index: 4;
  transform: translateY(-50%);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.16));
}
.op_single_sidebar_option {
  padding: 16px 15px;
}
a.op_sidebar_nav_link {
  color: var(--color-primary-blue);
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
a.op_sidebar_nav_link svg {
  width: 30px;
  height: 30px;
}
.op_single_sidebar_option:nth-child(2) {
  border-top: 1px solid #94b1de;
  border-bottom: 1px solid #94b1de;
}
/************************************ Sidebar Navigation Section Ends *********************************/

/************************************ News and Updates Section *********************************/
.op_homepage_container {
  padding-top: 60px;
  padding-bottom: 80px;
}
.op_homepage_news_updates_container {
  background: #dcf1fc;
  padding-left: 7vw;
}
.op_new_updates_slider_nav_list {
  display: flex;
  gap: 30px;
  padding-right: 7vw;
}
.op_new_updates_category_slider {
  border-bottom: 1px solid #b8cee2;
}
.op_new_updates_slider_navigation {
  display: flex;
  gap: 20px;
  align-items: center;
}
span.op_new_updates_filter_btn {
  font-size: var(--p-size);
  /* transition: all 0.3s ease-in-out; */
}
/* span.op_new_updates_filter_btn.active,
span.op_new_updates_filter_btn:hover {
	color: var(--color-primary-white);
	background: var(--color-primary-green);
	cursor: pointer;
} */
.op_new_updates_department_tab.active_news,
.op_new_updates_department_tab:hover {
  color: var(--color-primary-white);
  background: var(--color-primary-green);
  cursor: pointer;
}
.swiper-slide.op_new_updates_department_tab {
  width: auto;
  padding: 8px 20px;
  border-radius: 6px 6px 0px 0px;
  transition: all 0.3s ease-in-out;
}
.swiper.op_new_updates_category_slider {
  height: 100%;
  width: 80%;
  margin: 0;
}
.op_news_update_swipper_nav_view_all {
  display: flex;
  justify-content: space-between;
  padding-right: 7vw;
  align-items: center;
}
.skeleton-container {
  display: grid;
  gap: 40px;
  display: none;
  grid-template-columns: repeat(4, 1fr);
}
.loading .skeleton-loader {
  display: block;
}
.skeleton-card {
  height: 250px;
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.5s infinite linear;
  border-radius: 6px 6px 0px 0px;
}
.swiper-button-disabled {
  opacity: 0.4;
  cursor: no-drop;
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/************************************ News and Updates Section Ends *********************************/

/************************************ Service Center Section *********************************/
.op_homepage_service_center_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 45px;
}
.op_homepage_service_center_container .service_center_heading_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.op_service_group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 40px;
}
.op_service_group_mobile {
  display: none;
}
.op_service_icon_heading {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}
.service_center_heading_container h2 {
  width: 70%;
  margin: 20px auto;
}
.op_single_service a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 25px 32px;
  background: var(--color-primary-darkblue);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  gap: 20px;
}
.op_single_service a:hover .op_service_hover_icon,
.op_single_connect_link:hover .op_service_hover_icon {
  right: 0;
}
.op_service_hover_icon {
  position: absolute;
  width: 32px;
  height: 100%;
  top: 0;
  right: -35px;
  display: flex;
  align-items: center;
  background: var(--color-primary-500);
  border-radius: 0px 6px 6px 0px;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.op_single_service svg {
  width: 48px;
  height: 54px;
}
a.op_single_service_link {
  font-size: var(--p-heading);
}
.op_homepage_service_center_container .op_service_hover_icon svg {
  width: 10px;
  height: 16px;
  flex-shrink: 0;
}
span.op_service_sub_heading {
  letter-spacing: 1.54px;
}
/************************************ Service Center Section Ends *********************************/

/************************************ Join Us Section *********************************/
.op_join_us_card_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
}
.op_join_us_single_card {
  border-radius: 10px;
  background: linear-gradient(
    314deg,
    #e2eeff 0%,
    #eff5ff 26.69%,
    #daf1fc 49.43%,
    #e7f0fb 78.6%,
    #e6f3ff 98.86%
  );
  display: flex;
  gap: 25px;
  position: relative;
  margin-left: 70px;
}
.op_join_us_single_card::before {
  content: "";
  position: absolute;
  background: url(/wp-content/uploads/2025/02/Join-us-background.png) no-repeat;
  background-size: contain;
  width: 190px;
  height: 60px;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 10px;
}
.op_join_us_single_card::after {
  content: "";
  position: absolute;
  background: url(/wp-content/uploads/2025/02/Join-us-right-background.png)
    no-repeat;
  background-size: contain;
  width: 90px;
  height: 126px;
  top: 0;
  right: 0;
  border-radius: 0 10px 0 0;
}
.op_join_us_img_holder {
  width: 300px;
  margin-left: -70px;
}
.op_join_us_img_holder img {
  object-fit: cover;
}
.op_join_us_data_holder {
  padding: 20px 45px 30px 0;
}
.op_join_us_data_holder h6 {
  font-family: var(--main-font);
  line-height: 1.4;
}
/************************************ Join Us Section Ends *********************************/

/************************************ Mayor's Section *********************************/
.op_mayor_container {
  display: grid;
  grid-template-columns: 3fr 0.8fr;
  gap: 60px;
}
.op_mayor_data {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  padding-right: 60px;
  border-right: 1px solid var(--bs-body-color);
}
.op_mayor_profile {
  width: 310px;
}
.op_mayor_profile img {
  border-radius: 20px;
}
.op_mayor_signature {
  width: 200px;
}
.op_mayor_contact {
  display: flex;
  justify-content: space-between;
}
.op_mayor_sidebar_links_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
a.op_mayor_sidebar_link {
  display: flex;
  justify-content: space-between;
}
.op_mayor_sidebar {
  display: flex;
  flex-direction: column;
}
.op_mayor_sidebar > img {
  border-radius: 10px;
  background: #d9d9d9;
  margin-bottom: 12px;
}
/************************************ Mayor's Section Ends *********************************/

/************************************ Upcoming Events Section *********************************/
section.op_homepage_upcoming_events_container {
  background: url(/wp-content/uploads/2025/02/Calendar-Background.png) repeat-x;
  background-size: contain;
  /* background-position: center center; */
  background-repeat: repeat;
}
.op_homepage_upcoming_events_fe_container .op_upcoming_events_calendar_container {
  position: sticky;
  top: 8rem;
}
.op_upcoming_events_calendar_container .widget_tribe-widget-events-month {
  position: sticky;
  top: 170px;
  margin: 0;
}
.op_upcoming_events_data_calendar_container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
}
.op_homepage_upcoming_events_fe_container .op_upcoming_events_data_calendar_container{
  align-items: flex-start;
}
.op_upcoming_events_calendar_container button:before {
  content: none !important;
  background: none;
}
.op_upcoming_events_calendar_container
  .tribe-events-calendar-month-mobile-events__mobile-day {
  display: none !important;
}
.op_upcoming_events_calendar_container
  .tribe-events-widget-events-month__view-more {
  display: none;
}
.op_upcoming_events_calendar_container button:is(:hover, :focus, :active) svg {
  transform: none;
}
.op_upcoming_events_calendar_container {
  --tec-spacer-1: 0;
  --tec-spacer-2: 0;
  --tec-spacer-4: 24px;
  --tec-spacer-3: 0;
  --tec-spacer-5: 0px;
  --tec-grid-gutter-page-small: 0;
  --tec-border-radius-default: 10px;
  --tec-color-icon-secondary: var(--color-primary-darkblue);
  --tec-font-size-0: 12px;
  --tec-font-size-3: 16px;
  --tec-color-text-day-of-week-month: var(--bs-body-color);
  --tec-color-text-primary: #292929;
  --tec-color-accent-primary: #fff;
  --tec-color-accent-primary-week-event-hover: var(--color-secondary-blue);
}
.op_upcoming_events_calendar_container .tribe-events-widget-events-month {
  background: linear-gradient(270deg, #e3f1ff 3.4%, #eaf0ff 100%);
  padding-top: 30px;
}
.op_upcoming_events_container > .op_op_container_heading_btn {
  margin-bottom: 20px;
  align-items: center;
}
.op_upcoming_events_calendar_container
  .tribe-common.tribe-events.tribe-events-widget.tribe-events-view--shortcode
  .tribe-events-c-top-bar__nav-list {
  justify-content: center;
  gap: 20px;
  margin-bottom: 14px;
}
.op_upcoming_events_calendar_container
  li.tribe-events-c-top-bar__nav-list-date {
  font-size: var(--fs-20);
  font-weight: 400;
  text-transform: uppercase;
}
.op_upcoming_events_calendar_container
  span.tribe-events-calendar-month__header-column-title-mobile {
  display: none;
  visibility: hidden;
}
.op_upcoming_events_calendar_container
  span.tribe-events-calendar-month__header-column-title-desktop {
  display: block !important;
  visibility: visible !important;
}
.op_upcoming_events_calendar_container .tribe-events-calendar-month header {
  background: #d7def4;
  border-radius: 50px;
  padding: 13px 0;
  margin-bottom: 16px;
}
.op_upcoming_events_calendar_container .tribe-events-calendar-month__day {
  background: var(--color-primary-white);
  min-width: 56px;
  min-height: 56px !important;
}
.op_upcoming_events_calendar_container .tribe-events-calendar-month__week {
  --tec-border-radius-default: 4px;
  gap: 3px;
  margin-bottom: 5px;
}
.op_upcoming_events_calendar_container
  .tribe-events
  .tribe-events-calendar-month__day-cell--mobile {
  justify-content: center;
}
.op_upcoming_events_calendar_container
  .tribe-events
  .tribe-events-calendar-month__day-cell--mobile
  em {
  position: absolute;
  z-index: -1;
  width: 80%;
  height: 80%;
  background-color: #a9f8d8;
}
.op_upcoming_events_cards_holder {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 46px;
}
.op_upcoming_events_calendar_container
  .tribe-events-calendar-month__week:first-child
  .tribe-events-calendar-month__day:first-child {
  border-radius: 20px 0 0 0;
}
.op_upcoming_events_calendar_container
  .tribe-events-calendar-month__week:first-child
  .tribe-events-calendar-month__day:last-child {
  border-radius: 0 20px 0 0;
}
.op_upcoming_events_calendar_container
  .tribe-events-calendar-month__week:last-child
  .tribe-events-calendar-month__day:first-child {
  border-radius: 0 0 0 20px;
}
.op_upcoming_events_calendar_container
  .tribe-events-calendar-month__week:last-child
  .tribe-events-calendar-month__day:last-child {
  border-radius: 0 0 20px 0;
}
.op_upcoming_events_data_calendar_container_mobile {
  display: none;
}
/************************************ Upcoming Events Section Ends *********************************/

/************************************ Connect with your City Section Ends *********************************/
.op_connect_city_container {
  border-radius: 20px;
  background: linear-gradient(
    134deg,
    #effff7 0%,
    #fff7fc 49.21%,
    #eaf5ff 98.62%
  );
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.op_connect_city_container::before {
  content: "";
  position: absolute;
  background: url(/wp-content/uploads/2025/02/Connect-City-Left.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 310px;
  top: 0;
  left: 0;
  border-radius: 0 0 0 10px;
}
.op_connect_city_container::after {
  content: "";
  position: absolute;
  background: url(/wp-content/uploads/2025/02/Connect-City-Right.png) no-repeat;
  background-size: contain;
  width: 520px;
  height: 410px;
  bottom: 0;
  right: 0;
  border-radius: 0 0 0 10px;
}
.op_connect_city_cards_conatiainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1028px;
  margin: 40px auto;
}
.op_connect_city_single_card a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 30px 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border-radius: 6px;
  background: #fff5bb;
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.1);
  align-items: center;
  gap: 20px;
  font-size: var(--p-size);
  text-align: center;
  z-index: 1;
}
.op_connect_city_single_card > a > svg {
  width: 55px;
  height: 55px;
}
/************************************ Connect with your City Section Ends *********************************/

/************************************ Local Attractions Section Ends *********************************/
.op_location_attraction_cards_conatiainer {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(6, 1fr);
  gap: 35px;
  margin: 3rem 0;
}
.op_location_link_single_card a {
  display: flex;
  padding: 18px 28px 28px;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-primary-500);
  background: var(--color-primary-white);
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.08);
  width: 100%;
  height: 100%;
  gap: 15px;
  font-size: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.op_location_link_hover_icon {
  position: absolute;
  width: 100%;
  height: 30px;
  bottom: -32px;
  background: var(--color-primary-500);
  transition: all 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.op_location_link_single_card a:hover .op_location_link_hover_icon {
  bottom: 0;
}
section.op_homepage_location_attraction_container {
  padding-block: 90px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  position: relative;
}
section.op_homepage_location_attraction_container::before {
  content: "";
  position: absolute;
  width: 100%;
  background: url(/wp-content/uploads/2025/02/Local-Attractions-Clouds.png);
  background-position: top;
  background-repeat: no-repeat;
  height: 300px;
  left: 0;
  top: 24px;
  z-index: 1;
}
section.op_homepage_location_attraction_container::after {
  content: "";
  position: absolute;
  width: 100%;
  background: url(/wp-content/uploads/2025/02/Rectangle-11040.png);
  background-position: top;
  background-repeat: no-repeat;
  height: 330px;
  left: 0;
  top: 0;
}
.op_location_attraction_map_container {
  text-align: center;
  padding-top: 6rem;
  padding-bottom: 8rem;
}
.op_location_attraction_map_container img {
  width: 380px;
  border-radius: 10px;
}
.op_location_attraction_container {
  z-index: 1;
  position: relative;
}
/************************************ Local Attractions Section Ends *********************************/

/************************************ Department Portal Section *********************************/
section.op_homepage_portal_container {
  padding-left: 5vw;
  padding-right: 5vw;
}
.op_portal_container {
  padding: 3vw 7vw;
  border-radius: 40px;
  background: url(/wp-content/uploads/2025/02/Department-Portal.png);
  position: relative;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 20px;
}
.op_portal_container::before {
  content: "";
  position: absolute;
  border-radius: 40px;
  background: rgba(26, 43, 93, 0.9);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
.op_portal_content_container {
  padding-right: 7rem;
}
section.op_homepage_portal_container p.op_department_desc {
  margin: 28px 0 45px;
}
a.op_single_department_page_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #6787ba;
  font-size: var(--p-heading);
  color: var(--color-primary-white);
  position: relative;
  padding-left: 20px;
}
a.op_single_department_page_link::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 0;
  font-size: var(--p-heading);
  background: var(--color-primary-green);
  border-radius: 50px;
}
.op_department_links_container ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
li.op_department_portal_links_list::marker {
  color: var(--color-primary-green);
  font-size: var(--p-heading);
}
.op_banner_btn_mobile {
  display: none;
}
/************************************ Department Portal Section Ends *********************************/
/************************************ Activity Three Section *********************************/

.op_homepage_activities_container_three {
  display: grid;
  grid-template-columns: 350px 630px;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(15, 20, 34, 0.53) 27.83%,
      rgba(0, 0, 0, 0) 53.02%,
      rgba(51, 89, 109, 0.54) 79.55%,
      rgba(0, 1, 1, 0.6) 100%
    ),
    url("/wp-content/uploads/2025/05/activity_three_img.webp");
  justify-content: space-between;
  align-items: flex-start;
  background-attachment: fixed;
}

.op_homepage_activities_container_three h2 {
  color: var(--color-secondary-500);
}

.op_homepage_activities_container_three h4 {
  font-family: "Dancing Script";
  color: var(--color-primary-white);
  margin-top: 1rem;
}

.op_activities_content_three {
  position: sticky;
  top: 8rem;
}

.op_activities_links_three {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem;
  position: relative;
  top: 1.5rem;
}

.op_activity_link_three {
  position: relative;
  z-index: 1;
}

.op_activity_link_three a {
  padding: 2rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
  background-color: var(--color-primary-white);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.op_activity_link_three a:hover::before,
.op_activity_link_three a:hover::after {
  opacity: 1;
}

.op_activity_link_three a:before {
  content: "";
  position: absolute;
  background-color: var(--color-primary-500);
  width: 86px;
  height: 86px;
  right: -1.5rem;
  top: -1.5rem;
  border-radius: 100vw;
  opacity: 0;
  transition: 300ms ease-in-out;
}

.op_activity_link_three a:after {
  content: "";
  position: absolute;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.7173 2.15266C21.7449 1.47199 21.285 0.884498 20.6485 0.727209C20.5576 0.704667 20.4631 0.690958 20.3658 0.687017L6.28015 0.116066C5.50227 0.0845353 4.84604 0.689641 4.81451 1.46752C4.78308 2.2455 5.38809 2.90163 6.16596 2.93316L16.8511 3.36628L0.710052 18.2498C0.137682 18.7775 0.101513 19.6694 0.629308 20.2418C1.1571 20.8142 2.04894 20.8503 2.62131 20.3225L18.7624 5.43903L18.3292 16.1241C18.2977 16.902 18.9028 17.5582 19.6807 17.5898C20.4586 17.6213 21.1148 17.0162 21.1463 16.2383L21.7173 2.15266Z" fill="white"/></svg>');
  right: 1rem;
  top: 1rem;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transition: 300ms ease-in-out;
}

.op_activity_link_three:before {
  content: "";
  position: absolute;
  background: linear-gradient(
    45deg,
    #f33575 0%,
    #c931c7 18.4%,
    #4a57e5 38.1%,
    #24c0d2 59.8%,
    #fbb040 81.2%,
    #85be46 100%
  );
  right: -10px;
  bottom: -10px;
  top: 10px;
  left: 10px;
  border-radius: 10px;
  z-index: -1;
}

.op_activity_link_three:nth-child(odd) {
  top: -1.5rem;
  left: -1rem;
}

.op_activity_link_three:nth-child(4n - 1) {
  left: -4rem;
}

.op_activity_link_three:nth-child(4n) {
  left: -2rem;
}

.op_activity_link_three span {
  font-size: var(--p-heading);
}

.op_program_guide_container {
  background-color: var(--color-primary-500);
  border-radius: 10px;
  max-width: 250px;
  margin-top: 5rem;
}

.op_program_guide_container > a > img {
  border-radius: 10px;
}

.op_program_guide_container > a p {
  color: var(--color-primary-white);
}

.op_program_guide_container > a:after {
  content: "";
  position: absolute;
  background-color: var(--color-primary-white);
  top: 4px;
  right: -4px;
  left: 4px;
  bottom: -4px;
  z-index: -1;
  border-radius: 10px;
}

/************************************ Activity Three Section Ends *********************************/
/************************************ Rental Facilities Section *********************************/

.op_rental_facilities_main {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: 2.75rem;
}

.op_rental_facilities_main ul li.nav-link {
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-radius: 10px;
  padding: 0;
  padding-block: 1rem;
  padding-right: 1rem;
  font-size: var(--p-heading);
  position: relative;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, padding 300ms ease-in-out;
}

.op_rental_facilities_main ul li.nav-link.active {
  background-color: var(--color-secondary-500);
  color: var(--color-primary-white);
  padding-inline: 1rem;
  box-shadow: 5px 5px 0px var(--color-primary-500);
}

.op_rental_facilities_main ul li.nav-link.active svg {
  fill: var(--color-primary-white);
}

.op_rental_facilities_main ul li.nav-link.active svg g {
  opacity: 1;
}

.op_rental_facilities_main ul li.nav-link.active svg g path {
  stroke: var(--color-primary-white);
}

.op_rental_facilities_main ul li.nav-link.active svg path {
  stroke-opacity: 1;
}

.op_rental_facilities_main ul li.nav-link:not(.active):after {
  /* content: ''; */
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #d9d9d9;
  bottom: -8px;
}

.op_rental_facilities_tab-content {
  background-image: url("/wp-content/uploads/2025/05/community_center_border_svg.svg");
  background-color: #694105;
  padding: 2.5rem;
  border-radius: 30px;
}

.op_rental_facilities_tab {
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  gap: 1.5rem;
}

.op_rental_facilities_tab_data :is(h3, p, a) {
  color: var(--color-primary-white);
}

.op_rental_facilities_tab_data h3 {
  margin-bottom: 20px;
}

.op_rental_facilities_tab_data > p {
  margin-bottom: 0;
}

.op_rental_facilities_tab_data {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.op_rental_facilities_tab_data > a {
  margin-top: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-underline-position: from-font;
}

.op_rental_facilities_tab_data ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
  color: var(--color-primary-white);
  display: grid;
  gap: 10px;
}

.op_rental_facilities_tab_data hr {
  background-color: #a27635;
  margin-block: 2rem;
  opacity: 1;
}

.op_rental_facilities_tab_img img {
  border-radius: 10px;
}

/************************************ Rental Facilities Section Ends *********************************/
/************************************ Help Center Section *********************************/
.op_help_center_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  overflow: hidden;
  --m-negative: 25px;
}

.op_help_center_inner_container {
  margin-left: calc(var(--m-negative) * -1);
}

.op_help_center_img {
  max-width: 25%;
  background: #e2f5ff;
  text-align: center;
  border-radius: 10px 10px 0px 10px;
  aspect-ratio: 1;
  align-content: center;
  position: relative;
  bottom: calc(var(--m-negative) * -1);
  right: calc(var(--m-negative) * -1);
}

.op_help_center_content {
  max-width: 75%;
  margin-left: auto;
  background-color: #50b447;
  padding: 1rem 1rem 1rem 2rem;
  border-radius: 10px;
  font-weight: 700;
}

.op_help_center_content p {
  font-size: var(--p-heading);
  color: var(--color-primary-white);
  min-height: 55px;
}

.op_help_center_content a {
  font-size: var(--p-size);
  color: var(--color-primary-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-underline-position: from-font;
}

/************************************ Help Center Section Ends *********************************/

/************************************ Media Queries *********************************/
@media (min-width: 1920px) {
  /* .op_video_container {
		height: 750px;
	} */
  .op_activities_container {
    max-width: 500px;
  }
  .op_activity_link {
    padding: 32px 40px;
  }
  .op_single_service svg {
    width: 56px;
    height: 62px;
  }
  .op_mayor_container {
    grid-template-columns: 3fr 1fr;
    gap: 70px;
  }
  .op_mayor_data {
    gap: 60px;
    padding-right: 70px;
  }
  .op_mayor_profile {
    width: auto;
  }
  .op_mayor_signature {
    width: auto;
  }
  a.op_mayor_sidebar_link {
    font-size: 20px;
  }
  .op_join_us_data_holder h6 {
    width: 80%;
  }
  .op_homepage_container {
    padding-top: 70px;
    padding-bottom: 90px;
  }
  section.op_homepage_season_activities_container {
    padding-top: 6rem;
    padding-bottom: 7rem;
  }
  section.op_homepage_portal_container p.op_department_desc {
    width: 80%;
  }
  .op_single_service a {
    padding: 25px 50px 25px 32px;
    gap: 30px;
  }
  .op_location_link_single_card a {
    font-size: var(--fs-20);
  }
  .op_upcoming_events_data_calendar_container {
    gap: 9rem;
  }
  .op_upcoming_events_container_two {
    grid-template-columns: 1fr 3.5fr;
  }
  .op_rental_facilities_main {
    gap: 3.75rem;
  }
  .op_rental_facilities_tab-content {
    padding: 3.5rem;
  }
  .op_rental_facilities_tab_data h3 {
    margin-bottom: 30px;
  }
}

@media (max-width: 1580px) {
  .op_video_container {
    height: 770px;
  }
  .op_banner_head {
    font-size: var(--h1-homepage);
    line-height: 54px;
  }
  .op_hero_content, .op_banner_1 .op_hero_content {
    width: 28rem;
    padding: 70px 60px 7rem 60px;
  }
  .op_homepage_center_data_bg {
    grid-template-columns: 2fr 3fr;
    gap: 40px;
  }
  .op_homepage_center_other_centers {
    gap: 5px 20px;
  }
  .op_homepage_center_single_center {
    margin-block: 28px;
  }
  .op_homepage_center_data_bg {
    margin-top: 0;
  }
  .op_upcoming_activities_container_two {
    grid-template-columns: 2fr 3fr;
    gap: 30px;
  }
  .op_upcoming_activities_holder {
    margin-left: 0;
    gap: 25px 20px;
  }
  .op_help_you_cards_container {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}
@media (max-width: 1450px) {
  .op_service_group {
    gap: 30px 30px;
  }
  .op_service_hover_icon {
    width: 28px;
  }
  .op_homepage_service_center_container .op_service_hover_icon svg {
    width: 8px;
    height: 14px;
  }
  .op_location_link_single_card a {
    font-size: 14px;
  }
  .op_location_attraction_map_container img {
    width: 340px;
  }
  .op_location_attraction_map_container {
    padding-top: 5rem;
    padding-bottom: 6rem;
  }
  span.op_service_sub_heading {
    font-size: 12px;
  }
  .op_single_service svg {
    width: 42px;
    height: 48px;
  }
  .op_service_icon_heading {
    width: 70px;
    height: 70px;
  }
  .op_mayor_data {
    gap: 40px;
    padding-right: 50px;
  }
  .op_mayor_container {
    gap: 50px;
  }
  .op_mayor_profile {
    width: 290px;
  }
  .op_connect_city_single_card > a > svg {
    width: 48px;
    height: 48px;
  }
  .op_connect_city_cards_conatiainer {
    max-width: 880px;
  }
  a.op_single_location_link > svg {
    width: 28px;
    height: 22px;
  }
  .op_location_link_hover_icon {
    height: 28px;
  }
  .op_location_link_hover_icon > svg {
    width: 18px;
    height: 16px;
  }
  a.op_single_department_page_link > svg {
    width: 14px;
    height: 14px;
  }
  .op_upcoming_events_cards_holder {
    gap: 36px 40px;
  }
  .op_upcoming_events_data_calendar_container {
    gap: 5rem;
  }
}
@media (max-width: 1366px) {
  section.op_homepage_sidebar_nav_container {
    width: 84px;
  }
  a.op_sidebar_nav_link {
    font-size: 12px;
  }
  a.op_sidebar_nav_link svg {
    width: 26px;
    height: 26px;
  }
  .op_banner_head {
    font-size: var(--h1-homepage);
    line-height: 54px;
  }
  .op_video_container {
    height: 680px;
  }
  .op_banner_text {
    margin-top: 15px;
  }
  form.op_search_form {
    max-width: 44%;
  }
  section.op_banner_container {
    margin-top: -93px;
  }
  .op_search_form input {
    font-size: 14px;
  }
  .op_search_input_group svg {
    width: 18px;
  }
  .op_new_updates_slider_navigation
    :is(.op_new_updates_slider_button_prev, .op_new_updates_slider_button_next)
    svg {
    width: 40px;
    height: 40px;
  }
  p.op_announcement_heading {
    font-size: 14px;
  }
  .op_view_all_announcement {
    font-size: 12px;
  }
  .announcement_container {
    padding: 10px;
  }
  .service_center_heading_container a {
    margin-top: 10px !important;
  }
  .op_service_icon_heading {
    width: 64px;
    height: 64px;
  }
  section.op_homepage_news_updates_container .op_h2_heading {
    margin-bottom: 15px;
  }
  .op_connect_city_cards_conatiainer {
    gap: 32px;
  }
  .op_connect_city_container {
    padding: 3rem 0;
  }
  section.op_homepage_location_attraction_container {
    padding-block: 80px;
  }
  .op_location_attraction_map_container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .op_location_link_single_card a {
    font-size: 13px;
  }
  .op_location_attraction_map_container img {
    width: 310px;
  }
  .op_location_link_hover_icon {
    height: 24px;
  }
  .op_location_link_hover_icon > svg {
    width: 16px;
    height: 14px;
  }
  .op_portal_container {
    padding: 3vw 6vw;
  }
  .op_upcoming_events_calendar_container .tribe-events-calendar-month__day {
    min-width: 47px;
    min-height: 47px !important;
  }
  .op_upcoming_events_calendar_container {
    --tec-spacer-4: 22px;
    --tec-font-size-0: 12px;
    --tec-font-size-3: 14px;
  }
}
@media (max-width: 1280px) {
  .op_location_link_single_card a {
    padding: 18px 22px 28px;
  }
  section.op_homepage_season_activities_container {
    padding-top: 70px;
    padding-bottom: 80px;
    min-height: 600px;
  }
  .op_homepage_container {
    padding-top: 55px;
    padding-bottom: 75px;
  }
  .op_mayor_profile {
    width: 270px;
  }
  .new_slider_date {
    margin-bottom: 10px !important;
  }
  .news_slider_title {
    margin-bottom: 14px !important;
  }
  .font14 {
    font-size: 12px !important;
  }
  .op_video_container {
    /* height: 550px; */
  }
}
@media (max-width: 1200px) {
  .op_homepage_service_center_container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
    position: relative;
    padding-bottom: 120px !important;
  }
  .op_homepage_service_center_container .service_center_heading_container {
    grid-area: 1 / span 2;
  }
  .service_center_heading_container h2 {
    width: auto;
    margin: 10px auto;
  }
  .op_homepage_container {
    padding-top: 50px;
    padding-bottom: 65px;
  }
  .op_single_service a {
    gap: 14px;
  }
  .op_service_icon_heading {
    width: 60px;
    height: 50px;
  }
  .service_center_heading_container a {
    position: absolute;
    bottom: 50px;
  }
  .swiper.op_new_updates_category_slider {
    width: 90%;
  }
  .op_mayor_sidebar {
    display: none;
  }
  .op_mayor_container {
    grid-template-columns: 1fr;
  }
  .op_mayor_data {
    padding-right: 70px;
    border-right: none;
  }
  .op_mayor_profile {
    width: 280px;
  }
  .op_mayor_contact {
    justify-content: flex-start;
    gap: 20px;
  }
  .op_location_link_single_card a {
    padding: 18px 18px 28px;
  }
  section.op_banner_container {
    margin-top: -112px;
  }
  .op_hero_content {
    margin-top: 4rem;
  }
  .op_help_you_cards_container {
    grid-template-columns: repeat(3, 1fr);
  }
  p.op_help_you_card_title_data {
    min-height: 40px;
  }
  .op_help_you_card_title_icon {
    transform: translateX(-86px);
  }
  .op_homepage_center_single_center_title a {
    padding-left: 7rem;
  }
  .op_homepage_center_single_center_img img {
    width: 100px;
    height: 100px;
  }
  .op_homepage_center_data_bg {
    grid-template-columns: 1.75fr 3fr;
  }
  .op_homepage_center_two_container_tabs_nav_link {
    min-width: 210px;
  }
  .op_homepage_center_two_container_tabs_nav_icon {
    width: 68px;
    height: 68px;
    padding: 16px;
  }
  .op_homepage_center_two_container_tabs_nav {
    justify-content: start;
    overflow-x: auto;
  }
  .op_rental_facilities_main {
    grid-template-columns: auto;
  }
  a.op_banner_single_card {
    min-height: 130px;
  }
  .op_banner_single_card_image {
    width: 40%;
  }
  .op_homepage_activities_container_three {
    grid-template-columns: 350px 590px;
  }
  .op_rental_facilities_main ul {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-bottom: 1rem;
  }
  .op_rental_facilities_main ul li.nav-link,
  .op_rental_facilities_main ul li.nav-link.active {
    padding: 0.5rem 0.75rem;
  }
  .op_rental_facilities_main ul li.nav-link.active svg {
    rotate: 90deg;
  }
  .op_rental_facilities_main ul li.nav-link svg {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 1180px) {
  .op_join_us_card_container {
    gap: 55px;
    padding: 0 30px;
  }
  .op_join_us_single_card {
    flex-direction: column;
    margin-left: 0;
    gap: 20px;
  }
  .op_join_us_img_holder {
    width: 280px;
    margin-left: 0;
  }
  .op_join_us_data_holder {
    padding: 0 25px 25px;
  }
  .op_join_us_data_holder h6 {
    width: 80%;
  }
  .op_service_hover_icon {
    width: 40px;
    height: auto;
    bottom: 30px;
    right: 6px;
    background: none;
    border-radius: 0;
    top: initial;
  }
  .op_service_hover_icon > svg {
    width: 20px;
    height: 18px;
  }
  .op_service_hover_icon > svg > path {
    stroke: var(--color-primary-green);
  }
  .op_location_link_hover_icon {
    bottom: 0;
  }
  .op_connect_city_single_card .op_service_hover_icon {
    display: none;
  }
  form.op_search_form {
    max-width: 60%;
  }
  .op_upcoming_events_calendar_container {
    --tec-spacer-4: 22px;
    --tec-font-size-0: 10px;
    --tec-font-size-3: 14px;
  }
  .op_upcoming_events_calendar_container .tribe-events-calendar-month__day {
    min-width: 40px;
    min-height: 40px !important;
  }
  .event_content_div {
    padding: 25px 20px;
  }
  .op_upcoming_events_data_calendar_container {
    gap: 4rem;
  }
  .op_upcoming_events_cards_holder {
    gap: 2rem 1.5rem;
  }
  .op_activities_content_three {
    position: static;
    display: grid;
  }
  .op_program_guide_container {
    grid-area: 1/2;
    margin-top: 0;
  }
  .op_homepage_activities_container_three {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .op_activities_links_three {
    top: 0;
    grid-template-columns: repeat(3, 1fr);
  }

  .op_activity_link_three:nth-child(odd),
  .op_activity_link_three:nth-child(4n - 1),
  .op_activity_link_three:nth-child(4n) {
    inset: auto;
  }
}

@media (max-width: 1024px) {
  .op_location_attraction_cards_conatiainer {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 30px;
  }
  .op_homepage_container {
    padding-top: 50px;
    padding-bottom: 55px;
  }
  .op_connect_city_cards_conatiainer {
    max-width: 640px;
    grid-template-columns: repeat(2, 1fr);
  }
  .op_upcoming_events_cards_holder {
    grid-template-columns: repeat(1, 1fr);
  }
  .op_upcoming_events_calendar_container {
    display: none;
  }
  .op_upcoming_events_data_calendar_container {
    grid-template-columns: 1fr;
  }
  .op_upcoming_events_cards_holder {
    display: none;
  }
  .op_upcoming_events_data_calendar_container_mobile {
    display: block;
  }
  section.op_homepage_upcoming_events_container {
    padding-right: 0;
  }
  .op_upcoming_events_container > .op_op_container_heading_btn {
    padding-right: 7vw;
  }
  .op_upcoming_events_cards_slider_navigation {
    display: flex;
    gap: 15px;
    padding-right: 7vw;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .op_upcoming_events_cards_button_prev svg,
  .op_upcoming_events_cards_button_next svg {
    width: 40px;
    height: 40px;
  }
  .event_content_heading {
    min-height: 48px;
  }
  .op_upcoming_activities_container_two {
    grid-template-columns: 1fr;
  }
  .op_op_container_heading_btn {
    margin-top: 0;
  }
  .op_homepage_activities_container_two .op_banner_btn {
    display: none;
  }
  .op_banner_btn.op_banner_btn_mobile {
    display: block;
    text-align: center;
  }
  .op_activities_links_three {
    gap: 4rem;
  }
  .op_help_center_container{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 880px) {
  .op_homepage_container {
    padding-top: 40px;
    padding-bottom: 45px;
  }
  .op_mayor_data {
    padding-right: 0;
  }
  .op_mayor_profile {
    width: 250px;
  }
  .op_mayor_signature {
    width: 150px;
  }
  section.op_homepage_portal_container {
    display: none;
  }
  .op_join_us_data_holder h6 {
    width: 100%;
  }
  .swiper.op_new_updates_category_slider {
    width: 75%;
  }
  .op_activity_link {
    padding: 22px 32px;
    margin-bottom: 8px;
  }
  .op_single_service a {
    padding: 20px 26px;
  }
  .op_single_service svg {
    width: 36px;
    height: 40px;
  }
  .op_homepage_service_center_container {
    padding-bottom: 110px !important;
  }
  .announcement_container {
    padding: 6px;
  }
  .op_homepage_center_data_bg {
    grid-template-columns: 1fr;
    padding-block: 2rem;
    margin-block: 2rem;
  }
  .op_homepage_center_img_holder img {
    height: 270px;
    object-fit: cover;
    width: 100%;
    object-position: top;
  }
  .op_homepage_center_content_holder {
    padding: 0;
  }
  .op_homepage_center_data_bg::before {
    bottom: auto;
    height: 100%;
  }
  .op_discover_swiper_container {
    display: block;
  }
  .op_discover_swiper_buttons {
    position: static;
    justify-content: center;
    gap: 1rem;
  }
  .op_banner_cards_holder {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 788px) {
  .service_center_heading_container a {
    bottom: 40px;
  }
  .op_mayor_contact {
    display: block;
  }
  .op_join_us_img_holder {
    width: 100%;
  }
  form.op_search_form {
    max-width: 70%;
  }
  .op_mayor_contact {
    display: block;
  }
  .op_activities_container {
    max-width: 360px;
  }
  .op_activities_links {
    position: relative;
    padding: 3rem 0;
  }
}
@media (max-width: 520px) {
  section.op_banner_container {
    margin-top: -105px;
  }
  .op_banner_1 img.op_mobile_banner_image, .op_banner_2 img.op_mobile_banner_image, img.op_mobile_banner_image {
    display: block;
  }
  .op_service_group {
    display: none;
  }
  .op_h2_heading h2 {
    text-align: center;
  }
  .op_homepage_service_center_container .service_center_heading_container {
    grid-area: 1 / span 1;
  }
  .op_service_group_mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
  }
  .op_homepage_service_center_container {
    grid-template-columns: repeat(1, 1fr);
  }
  .service_center_heading_container h2 {
    width: 80%;
  }
  .op_heading_search_container {
    justify-content: center;
  }
  .op_hero_content, .op_banner_1 .op_hero_content {
    width: 23rem;
    padding: 40px 40px 2rem 55px;
  }
  .op_video_container video {
    display: none;
  }
  .op_banner_head {
    font-size: 30px;
    line-height: 1.35;
  }
  .op_banner_text {
    font-size: 16px;
  }
  form.op_search_form {
    max-width: 85%;
  }
  .op_video_container {
    height: 650px;
  }
  .op_hero_content::after {
    width: 25px;
    height: 25px;
    background-size: contain;
  }
  section.op_banner_container::before {
    background: rgba(0, 0, 0, 0.4);
  }
  section.op_homepage_sidebar_nav_container {
    display: none;
  }
  .op_banner_text_sm {
    margin-top: 10px;
  }
  #op_search_btn {
    width: auto;
    padding-inline: 10px;
  }
  .announcement_icon::after {
    width: 28px;
    height: 28px;
    left: -4px;
    top: 0px;
  }
  .announcement_icon::before {
    width: 20px;
    height: 20px;
    left: 0;
    top: 4px;
  }
  .announcement_icon span {
    width: 20px;
    height: 20px;
    padding: 4px;
    top: 4px;
  }
  .announcement_container {
    align-items: flex-start;
    justify-content: space-between;
  }
  .announcement_container {
    gap: 0;
  }
  span.op_pipe_icon {
    display: none;
  }
  p.op_announcement_heading {
    font-size: 12px;
    margin: 0 12px !important;
    width: 75%;
  }
  .op_help_you_cards_container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .op_single_service a {
    padding: 12px;
  }
  .op_single_service svg {
    width: 32px;
    height: 32px;
  }
  .op_service_hover_icon {
    bottom: 16px;
  }
  .op_homepage_service_center_container .op_service_hover_icon svg {
    width: 10px;
  }
  .op_homepage_service_center_container {
    gap: 10px;
  }
  .op_homepage_news_updates_container {
    padding-left: 14px;
  }
  .swiper-slide.op_new_updates_department_tab {
    padding: 8px 14px;
    border-radius: 6px;
  }
  .op_new_updates_slider_nav_list {
    gap: 20px;
    padding-right: 14px;
  }
  .new_slider_date {
    font-size: 24px;
  }
  .news_slider_title {
    font-size: 18px;
  }
  .font14 {
    font-size: 14px !important;
  }
  .op_mayor_profile {
    width: 100%;
    text-align: center;
  }
  .op_mayor_profile img {
    width: 240px;
  }
  .op_mayor_data {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .op_mayor_signature {
    width: 185px;
  }
  section.op_homepage_mayor_container {
    position: relative;
    padding-top: 100px;
    overflow: hidden;
  }
  section.op_homepage_mayor_container .op_h2_heading h2 {
    position: absolute;
    top: 38px;
    width: 100%;
  }
  .op_veiw_calendar_btn {
    text-align: center;
  }
  .op_upcoming_events_container .op_op_container_heading_btn {
    flex-direction: column;
    gap: 15px;
  }
  section.op_homepage_upcoming_events_container {
    background-size: unset;
    position: relative;
    padding-bottom: 110px;
  }
  .op_join_us_card_container {
    gap: 22px;
    padding: 0;
  }
  /* .op_join_us_single_card p {
		display: none;
	} */
  .op_join_us_card_container {
    grid-template-columns: 1fr;
  }
  .op_join_us_img_holder img {
    width: 100%;
  }
  .op_join_us_data_holder {
    padding: 25px 20px;
  }
  .op_join_us_data_holder h6 {
    font-size: 14px;
  }
  .op_join_us_single_card {
    gap: 0;
    overflow: hidden;
  }
  section.op_homepage_season_activities_container {
    padding-top: 55px;
    padding-bottom: 45px;
    min-height: auto;
    background: linear-gradient(
      178deg,
      rgba(0, 0, 0, 0.6) 1.14%,
      rgba(0, 0, 0, 0) 96.84%
    );
  }
  .op_activities_container {
    max-width: 100%;
    text-align: center;
  }
  section.op_homepage_season_activities_container .op_h2_heading h2 {
    width: 80%;
    margin: auto;
  }
  /* .op_activity_link:hover,
	.op_activity_link.active {
		background: #f9e747;
	} */
  .op_activity_link {
    font-size: 20px;
    padding: 24px 25px;
  }
  .op_activities_links {
    position: relative;
    padding: 6rem 0 1rem;
  }
  .op_announcement_container.header_announcement_sticky
    p.op_announcement_heading {
    font-size: 12px;
  }
  .op_announcement_container.header_announcement_sticky
    .announcement_container {
    padding: 6px;
  }
  .op_homepage_connect_city_container {
    padding-left: 0;
    padding-right: 0;
  }
  .op_connect_city_cards_conatiainer {
    max-width: 370px;
    gap: 17px;
  }
  .op_connect_city_single_card a {
    padding: 14px 20px 50px;
    justify-content: start;
  }
  .op_connect_city_single_card .op_service_hover_icon {
    display: flex;
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 100%;
  }
  .op_location_attraction_cards_conatiainer {
    gap: 17px 12px;
  }
  .op_location_link_single_card a {
    padding: 20px 11px 36px;
    gap: 20px;
  }
  .op_location_attraction_cards_conatiainer {
    margin: 1rem 0 1.5rem;
  }
  .op_location_attraction_map_container {
    padding-top: 7rem;
    padding-bottom: 0rem;
  }
  .op_location_attraction_map_container img {
    width: 260px;
  }
  section.op_homepage_location_attraction_container {
    padding-block: 65px;
  }
  .op_upcoming_events_cards_holder {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }
  .event_content_div::after {
    width: 80px;
    height: 60px;
  }
  .op_upcoming_events_container > .op_op_container_heading_btn {
    padding-right: 14px;
    margin-bottom: 10px;
  }
  .op_upcoming_events_container > .op_op_container_heading_btn > a {
    position: absolute;
    bottom: 40px;
  }
  .op_upcoming_events_cards_slider_navigation {
    padding-right: 14px;
    margin-bottom: 0px;
  }
  .op_upcoming_events_cards_button_prev svg,
  .op_upcoming_events_cards_button_next svg {
    width: 35px;
    height: 35px;
  }
  .op_upcoming_events_cards_slider_navigation {
    justify-content: center;
  }
  .op_homepage_center_other_centers {
    grid-template-columns: 1fr;
  }
  .op_help_you_card_icon {
    height: 85px;
    padding-left: 16px;
  }
  .op_help_you_card_icon svg {
    width: 42px;
    height: 42px;
  }
  .op_help_you_card_title {
    padding: 14px 10px 14px 16px;
  }
  .op_help_you_card_title_icon {
    transform: none;
  }
  .op_help_you_know_more svg {
    width: 26px;
    height: 26px;
  }
  a.op_help_you_card_anchor {
    visibility: visible;
    opacity: 1;
  }
  .op_homepage_center_two_heading {
    padding: 20px 20px 16px;
  }
  .op_homepage_center_two_container_tabs_nav {
    margin-inline: 1rem;
  }
  .op_homepage_center_two_container_tabs_nav_icon {
    width: 48px;
    height: 48px;
    padding: 10px;
  }
  .op_homepage_center_two_container_tabs_nav_link
    .op_homepage_center_two_container_tabs_nav_icon
    svg {
    width: 28px;
    height: 28px;
  }
  .op_homepage_center_two_container_tabs_nav_link {
    min-width: 192px;
    padding: 14px;
  }
  .op_homepage_center_two_container_tabs_pane {
    width: 80%;
  }
  .op_upcoming_activities_img img {
    height: 90px;
  }
  .op_upcoming_activities_title {
    padding: 14px 12px 4px;
  }
  .op_upcoming_activities_title img {
    width: 35px;
  }
  .op_homepage_discover_container {
    min-height: 950px;
  }
  .op_newsroom_cards .op_newsroom_link span {
    width: 100%;
    opacity: 1;
    padding-right: 0.75rem;
  }
  .op_upcoming_events_container_two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .op_upcoming_events_data_calendar_container_two {
    margin-block: 2rem;
  }
  .op_upcoming_events_cards_slider_two_navigation,
  a.op_homepage_upcoming_events_container_two_btn {
    justify-content: center;
  }
  .op_event_slide_two {
    width: auto;
  }
  .op_event_slide_two_date {
    width: 55px;
    height: 55px;
  }
  section.op_homepage_upcoming_events_container_two {
    padding-inline: 14px;
  }
  .op_upcoming_activities_container_two .op_h2_heading {
    width: 100%;
  }
  .op_homepage_activities_container_two .op_homepage_center_description p {
    text-align: center;
  }
  .op_homepage_upcoming_events_container_two_icon {
    text-align: center;
    right: auto;
  }
  .op_activities_links_three {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .op_activities_content_three {
    text-align: center;
  }
  .op_activities_content_three {
    display: block;
  }
  .op_program_guide_container {
    margin-top: 2rem;
    margin-inline: auto;
  }
  .op_banner_cards_holder {
    grid-template-columns: repeat(2, 1fr);
  }
  .op_rental_facilities_tab-content {
    padding: 1rem;
  }
  .op_rental_facilities_tab {
    grid-template-columns: 1fr;
  }
  .op_rental_facilities_tab_img {
    grid-row: 1;
  }
  .op_rental_facilities_tab_data > a {
    margin-top: 1rem;
  }
  .op_rental_facilities_tab_data hr {
    margin-block: 1.5rem;
  }
  .op_rental_facilities_main {
    gap: 1.75rem;
  }
  .op_help_center_container{
    --m-negative: 16px;
  }
  .op_help_center_img img{
    width: 55%;
  }
  .op_help_center_content{
    padding: 1rem;
  }
}

@media (max-width: 400px) {
  p.op_announcement_heading {
    font-size: 10px;
    margin: 0 5px !important;
  }
  .op_view_all_announcement {
    font-size: 10px;
  }
  .op_announcement_container.header_announcement_sticky
    p.op_announcement_heading {
    font-size: 10px;
  }
  /* .op_join_us_single_card p {
		display: block;
	} */
}
@media (max-width: 340px) {
  .op_join_us_card_container {
    grid-template-columns: 1fr;
  }
  a.op_single_service_link {
    font-size: var(--p-size);
  }
  .op_service_hover_icon {
    width: 30px;
  }
  .op_connect_city_cards_conatiainer {
    max-width: 290px;
    gap: 14px;
  }
  .op_service_hover_icon > svg {
    width: 14px;
    height: 14px;
  }
  .op_connect_city_single_card > a > svg {
    width: 40px;
    height: 40px;
  }
  .op_connect_city_single_card a {
    padding: 14px 12px 40px;
    justify-content: start;
  }
}