/* === logo / base === */
/* cutom buttons */
.btn-maroon{
    background-color: #9e1415 ;
    color: white !important;
}
.btn-maroon:hover{
    background-color: #7a0d0d ;
    color: white !important;
}


.btn-navyblue{
    background-color: #111551 ;
    color: white !important;
}
.btn-navyblue:hover{
    background-color: #0c0f3c ;
    color: white !important;
}

.text-maroon{
    color: #7a0d0d !important;

}

.text-navyblue{
    color: #111551 !important;
}

.bg-yellow{
    background-color: #e5d23d;
}

.bg-maroon{
    background-color: #7a0d0d;

}

.bg-navyblue{
    background-color: #111551;

}
 body {
        font-family: 'Poppins', sans-serif;
        background-color: #F5F5FF !important;
    }
._breadcrumb {
    background-image: url("../banners/breadcrumb_banner.png");
    background-size: cover;       /* fill height + width */
    background-repeat: no-repeat;
    background-position: center;

    width: 100%;
    min-height: 150px;            /* ensures a visible height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


._breadcrumb h2 {
    color: white;
    text-shadow: 
        -2px -2px 0 rgb(255, 255, 255),
         2px -2px 0 rgb(255, 255, 255),
        -2px  2px 0 rgb(255, 255, 255),
         2px  2px 0 rgb(255, 255, 255);
    font-weight: bold;
    margin: 0; /* remove extra spacing */
}

._breadcrumb p {
    color: white;
   
}


._breadcrumb h2 {
    color: white;
    text-shadow: 
        -2px -2px 0 rgb(255, 255, 255),
         2px -2px 0 rgb(255, 255, 255),
        -2px  2px 0 rgb(255, 255, 255),
         2px  2px 0 rgb(255, 255, 255); /* creates a fake stroke */
    font-weight: bold;
}

._history{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* Base lines */
.custom-toggler {
    border: none;
    background: transparent;
    padding: 0.25rem;
}

.toggler-icon {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #7a0d0d; /* change color */
    transition: all 0.3s ease-in-out;
}

/* When button is active (Bootstrap adds .collapsed toggle) */
.custom-toggler:not(.collapsed) .toggler-icon:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.custom-toggler:not(.collapsed) .toggler-icon:nth-child(2) {
    opacity: 0;
}

.custom-toggler:not(.collapsed) .toggler-icon:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.card{
    border: 0px !important;
    border-radius: 0px !important;
}

    .text-justify-custom {
      text-align: justify;
    }
.contact-topbar{
    background-color: #111551;
    color: white;
    font-size: 14px;
}
.logo-text small {
    font-size: 16px;
    border-bottom: 2px solid #111551;
    padding-bottom: 2px;
    display: inline-block;
}
.logo-text strong { font-size: 24px; }

.navbar { padding: 20px 0; }
.container-fluid { width: 95% !important; }
.container { width: 80% !important; }

.logo-text { color: #111551; font-family: Cambria, serif; }

.navbar-nav li a { font-weight: bold; color: #111551; font-size: 90%;}
.navbar-nav li a:hover { color: #9e1415; }
.navbar-nav .nav-link.active { color: #9e1415 !important; }

/* === TOP-LEVEL dropdowns ONLY (scoped) ===
   Use direct-child selector so nested menus are NOT affected. */
.navbar .nav-item > .dropdown-menu {
    border: none;
    border-top: 3px solid #9e1415;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    border-radius: 0;
    margin-top: 0;
    top: 75px !important;       /* push the main dropdown below the navbar box */
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    padding: .5rem 0;
    min-width: 0;               /* dynamic width: let content define width */
    white-space: nowrap;        /* keep items in single line unless very long */
    z-index: 1040;
}

/* main dropdown items */
.navbar .dropdown-item {
    padding: 10px 20px;
    background: transparent;
}
.navbar .dropdown-item:hover { background: #f0f0f0; }

/* === SUBMENU (second-level) positioning & style === */
.dropdown-submenu { position: relative; }

/* Place submenu to the RIGHT of parent and align at its top */
.dropdown-submenu > .dropdown-menu {
     border: none;
    border-top: 3px solid #9e1415;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    border-radius: 0;
    top: 0 !important;          /* align with top of the parent list item */
    left: 100% !important;      /* place on the right edge of parent */
    margin-left: 0;
    margin-top: 0;
    min-width: 12rem;           /* reasonable default; content can grow */
    white-space: nowrap;
    z-index: 1060;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* small caret spacing */
.navbar-nav .fa-angle-down { margin-left: 6px; font-size: 10px; }
/* rotate caret when parent has .show (nice-to-have) */
.dropdown-submenu .dropdown-toggle[aria-expanded="true"] .fa-angle-down,
.nav-item .nav-link[aria-expanded="true"] .fa-angle-down {
    transform: rotate(180deg);
}

/* Make sure nested .show behaves well */
.dropdown-menu.show { display: block; }

.carousel-caption-top {
    top: 20px;              /* Move down from the top edge */
    bottom: auto;           /* Disable default bottom position */
    transform: none;        /* Remove centering transform */
    /* background: rgba(0, 0, 0, 0.4); Optional: semi-transparent background */
    /* padding: 10px 15px; */
    border-radius: 5px;
  
}


.lord-icon-size{
    width: 100px;
        height: 100px;
}

.general-services{
    border-bottom: 4px solid #111551 !important;
}


/* barangays */
.barangays-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.barangay-card {
    flex: 0 1 180px;  /* responsive width, but not fixed height */
    text-align: center;
}

.barangay-card img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 10px;
    transition: transform 0.2s;
}

.barangay-card img:hover {
    transform: scale(1.05);
}

.barangay-card p {
    margin-top: 8px;
    font-weight: bold;
}



 /* Initial hidden state */
    .card {
        opacity: 0;
        transform: scale(0.8);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    /* Pop-in effect */
    .card.show {
        opacity: 1;
        transform: scale(1);
        animation: pop 0.4s ease;
    }

    @keyframes pop {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }
        60% {
            transform: scale(1.05);
            opacity: 1;
        }
        100% {
            transform: scale(1);
        }
    }
 

    /* Make card body sections uniform */
    .card-body {
        display: flex;
        flex-direction: column;
    }

    /* Force equal height for title + description sections */
    .card-title {
        min-height: 3rem; /* adjust depending on text */
    }

    .card-body p {
        /*min-height: 4rem; */
        text-align: justify;
  text-justify: inter-word;
    }

    /* Push button to bottom */
    .card-body .btn {
        margin-top: auto;
    }
.btn-a{
    text-decoration: none;
    color: #111551;
}
footer li a{
    text-decoration: none;
    color: gray;
}
footer li a:hover{
    text-decoration: underline;
    color: #111551;
}

/*for logo*/
 .symbol-row {
      padding: 15px 0;
    
    }
    .symbol-title {
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 5px; /* spacing when stacked */
    }
    .symbol-desc {
      color: #333;
    }
/* For small screens */
@media (max-width: 504px) {
    p{
        font-size: 13px;
    }
     .container {
    max-width: 90% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .logo-text small {
    font-size: 12px; /* smaller text */
  }
  .logo-text strong {
    font-size: 18px; /* smaller bold text */
  }

  .logo-head{
    height: 50px;
  }
}
@media (max-width: 405px) {
    p{
        font-size: 13px;
    }
    .container {
    max-width: 90% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .logo-text small {
    font-size: 12px; /* smaller text */
  }
  .logo-text strong {
    font-size: 14px; /* smaller bold text */
  }

  .logo-head{
    height: 40px;
  }
}
@media (max-width: 327px) {
    p{
        font-size: 13px;
    }
    .container {
    max-width: 90% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .logo-text small {
    display: none;
  }
  .logo-text strong {
    display: none;
  }

  .logo-head{
    height: 60px;
  }
}