/* INSTALLATION PORTFOLIO - MODERN CLEAN */
.install-portfolio-page { padding-top:24px; padding-bottom:36px; }
.install-portfolio-page h1.maintitle { margin-bottom:18px; color:#173b60; font-family:'Sarabun',Tahoma,sans-serif; }

.install-portfolio-page #nav { margin:18px 0 26px; }
.install-portfolio-page #nav ul { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.install-portfolio-page #nav ul li { margin:0; padding:0; }
.install-portfolio-page #nav ul li a {
 display:inline-block; padding:9px 20px; border:1px solid #d8e5f1; border-radius:24px;
 background:#fff; color:#315875; font-family:'Sarabun',Tahoma,sans-serif; font-size:14px;
 line-height:1.5; text-decoration:none; box-shadow:0 2px 7px rgba(31,73,112,.05);
 transition:all .2s ease;
}
.install-portfolio-page #nav ul li a:hover,
.install-portfolio-page #nav ul li a.selected {
 border-color:#0787c9; background:#0787c9; color:#fff;
 box-shadow:0 4px 12px rgba(7,135,201,.18);
}

/* Keep the original Isotope layout and item widths */
.install-portfolio-page .boxthreecolumns { box-sizing:border-box; padding:0 10px 20px; }
.install-portfolio-page .boxcontainer {
 overflow:hidden; box-sizing:border-box; height:100%; padding:0 0 14px;
 border:1px solid #e2eaf2; border-radius:13px; background:#fff;
 box-shadow:0 4px 15px rgba(28,58,87,.07); text-align:center;
 transition:transform .2s ease, box-shadow .2s ease;
}
.install-portfolio-page .boxcontainer:hover {
 transform:translateY(-4px); box-shadow:0 9px 22px rgba(28,58,87,.12);
}
.install-portfolio-page .boxcontainer > a:first-child {
 display:block; overflow:hidden; width:100%; background:#f7fafd;
}
.install-portfolio-page .boxcontainer > a:first-child img {
 display:block; width:100%; height:190px; object-fit:cover; border:0;
 transition:transform .3s ease, opacity .3s ease;
}
.install-portfolio-page .boxcontainer:hover > a:first-child img { transform:scale(1.035); }

.install-portfolio-page .boxcontainer h1 {
 min-height:42px; margin:0 12px; padding:13px 5px 8px;
 border-bottom:1px solid #edf1f5; font-family:'Sarabun',Tahoma,sans-serif;
 font-size:15px; font-weight:600; line-height:1.5;
}
.install-portfolio-page .boxcontainer h1 a { color:#0878b9; text-decoration:none; }
.install-portfolio-page .boxcontainer h1 a:hover { color:#075b91; }
.install-portfolio-page .boxcontainer p {
 margin:10px 12px 0; color:#63778a; font-family:'Sarabun',Tahoma,sans-serif;
 font-size:13px; line-height:1.6;
}

.install-portfolio-page .c12 h1.maintitle[align="right"] { font-family:'Sarabun',Tahoma,sans-serif; }
.install-portfolio-page .c12 h1.maintitle[align="right"] span { font-size:14px; font-weight:400; }
.install-portfolio-page .c12 h1.maintitle[align="right"] a { color:#0787c9; text-decoration:none; }
.install-portfolio-page .c12 h1.maintitle[align="right"] a:hover { color:#075b91; text-decoration:underline; }

@media screen and (max-width:900px) {
 .install-portfolio-page .boxcontainer > a:first-child img { height:170px; }
}
@media screen and (max-width:600px) {
 .install-portfolio-page { padding-top:16px; }
 .install-portfolio-page #nav ul { gap:7px; }
 .install-portfolio-page #nav ul li a { padding:8px 14px; font-size:13px; }
 .install-portfolio-page .boxcontainer > a:first-child img { height:180px; }
 .install-portfolio-page .boxcontainer h1 { font-size:14px; }
}