@charset "utf-8";
* {
     box-sizing: border-box;
}
html, body {
     width: 100%;
     max-width: 100%;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
}
/* =====================================Page Active===================================== */
.pageactive {
     width: 100%;
     background: #f5f7fa;
     padding: 20px 0;
}
/* =====================================Main Layout===================================== */
.homelayout {
     width: 100%;
     max-width: 1200px;
     margin: auto;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 5px;
     flex-wrap: wrap;
     box-sizing: border-box;
     min-width: 0;
}
/* =====================================Left Content===================================== */
.pagelayout {
     width: 100%;
     max-width: 74%;
     background: #fff;
     padding: 15px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
     text-align: justify;
     box-sizing: border-box;
     overflow: hidden;
     min-width: 0;
}
.pagelayout h3 {
     margin-top: 0;
     color: #0056a3;
     border-bottom: 3px solid #0056a3;
     padding-bottom: 5px;
}
.pagelayout h4 {
     margin-top: 0;
     color: #0056a3;
     padding: 10px;
}
.pagelayout ol {
     list-style-type: decimal-leading-zero;
     padding-left: 25px;
}
.pagelayout ol li {
     margin-bottom: 8px;
}
/* =====================================Piper Layout===================================== */
.piperlayout {
     width: 25%;
     min-width: 0;
     box-sizing: border-box;
}
.sociallinks {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 5px;
}
.sidecolumn, .centercolumn {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 5px;
}
/* =====================================Small Box========================================= */
.boxsmall {
     width: 100%;
     background: white;
     border: 2px solid #ddd;
     border-radius: 8px;
     padding: 12px;
     text-align: left;
     box-sizing: border-box;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
.boxsmall a {
     text-decoration: none;
     color: #fcb900;
     font-size: 14px;
     font-weight: normal;
}
.boxsmall a:hover {
     color: #0056a3;
}
/* ======================================Big Box======================================== */
.boxbig {
     width: 100%;
     background: #0056a3;
     border: 1px solid #ddd;
     border-radius: 8px;
     box-sizing: border-box;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
.boxbig h3 {
     display: block;
     width: 100%;
     padding: 12px 0;
     color: blue;
     background: white;
     font-size: 15px;
     font-weight: normal;
     box-sizing: border-box;
     border-radius: 6px;
     text-align: center;
}
.boxbig p {
     margin: 7px 0;
}
.boxbig a {
     color: #fcb900;
     text-decoration: none;
     font-size: 14px;
}
.boxbig a:hover {
     color: white;
     padding-left: 5px;
}
/* =====================================Service Container================================ */
.service_container {
     width: 100%;
     max-width: 1200px;
     margin: 10px auto;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     gap: 5px;
     margin-top: 5px;
}
/* Card ndogo */
.card {
     flex: 1;
     background: white;
     padding: 10px;
     border-radius: 0px;
     transition: .3s ease;
     overflow: hidden;
     display: flex;
     flex-direction: column;
}
/* Card title */
.card h3 {
     color: white;
     margin-bottom: 5px;
     text-align: center;
     background: #0066cc;
     padding: 10px;
     border-radius: 1px;
     font-weight: normal;
}
/* Card image */
.card img {
     width: 100%;
     height: 200px;
     object-fit: contain;
     border-radius: 0px;
}
/*Read More kwenye kila card zifanane*/
.card .read_more {
     margin-top: auto;
}
/* Caption 
.full_caption {
     font-size: 13px;
     padding: 8px;
     margin: 0;
     color: #555;
     min-height: 40px;*/
}
/* Read more 
.read_more {
     background: #003b70;
     color: white;
     width: 100%;
     padding: 10px 15px;
     border-radius: 5px;
     display: inline-block;
     transition: background 0.3s ease, color 0.3s ease;
     text-align: center;
     overflow: hidden;
     box-sizing: border-box;
}
.read_more:hover {
     background: #0066cc;
     color: #000;
     transform: none;*/
}
/* sehemu ya juu ya folder (tab) */
.pagelayout .folder::before {
     content: "";
     position: absolute;
     top: -18px;
     left: 15px;
     width: 75px;
     height: 25px;
     background: #f4c542;
     border-radius: 8px 8px 0 0;
}
/* ====================================== Gallery ====================================== */
.gallery {
     width: 100%;
     max-width: 60%;
     min-width: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
     box-sizing: border-box;
     overflow: hidden;
}
.gallery img {
     margin-top: 5px;
     display: block;
     flex: 0 0 calc(25% - 12px);
     width: calc(25% - 12px);
     max-width: calc(25% - 12px);
     min-width: 0;
     height: 100px;
     object-fit: cover;
     border-radius: 10px;
     box-sizing: border-box;
}
@media (max-width: 600px) {
     .homelayout {
          width: 100%;
          max-width: 100%;
          padding: 0 10px;
          box-sizing: border-box;
     }
     .pagelayout {
          width: 100%;
          max-width: 100%;
          min-width: 0;
     }
     .gallery {
          width: 100%;
          max-width: 100%;
          min-width: 0;
          gap: 10px;
     }
     .gallery img {
          flex: 0 0 calc(50% - 5px);
          width: calc(50% - 5px);
          max-width: calc(50% - 5px);
          min-width: 0;
          height: 120px;
     }
}
/* ======================================LightBox===========================================1 */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;

    align-items: center;
    justify-content: center;
}

#lightboxImage {
    max-width: 50%;
    max-height: 50%;
    width: auto;
    height: auto;
    object-fit: contain;

    cursor: pointer;
}

.prev-lightbox,
.next-lightbox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    background: rgba(0, 0, 0, 0);
    color: white;
    border: none;

    font-size: 40px;
    padding: 10px 20px;
    cursor: pointer;

    z-index: 100000;
}

.prev-lightbox {
    left: 20px;
}

.next-lightbox {
    right: 20px;
}

.prev-lightbox:hover,
.next-lightbox:hover {
    background: rgba(255, 255, 255, 0.2);
}
/* =====================================Tablet============================================== */
@media(max-width:992px) {
     .homelayout {
          flex-direction: column;
     }
     .pagelayout, .piperlayout {
          width: 100%;
     }
     .service_container {
          flex-wrap: wrap;
     }
     .card {
          width: 48%;
     }
}
/* =====================================Mobile============================================== */
@media(max-width:600px) {
     .homelayout {
          width: 95%;
     }
     .service_container {
          flex-direction: column;
     }
     .card {
          width: 100%;
     }
     .card img {
          height: 180px;
     }
}