/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.stat-col { border-right: 1px solid #eee; padding: 20px 0; }
.stat-col.no-border { border-right: none; }
.stat-num { font-size: 4em; color: #e0e0e0; margin-bottom: 0px; font-weight:bold; transition: color 0.3s; line-height: 1; }
.stat-col:hover .stat-num { color: #efbd1a; }
.stat-label { color: #666; font-size: 14px; margin-top: 10px; }

.project-card { position: relative; border-radius: 10px; overflow: hidden; height: 300px; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.project-card .img-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; transition: transform 0.5s; }
.project-card:hover .img-bg { transform: scale(1.1); }
.project-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); padding: 15px; height: 70px; transition: all 0.4s ease; display: flex; flex-direction: column; justify-content: flex-end; }
.project-card:hover .project-overlay { height: 100%; background: rgba(0,0,0,0.85); justify-content: flex-start; padding-top: 50px; }
.project-overlay h4 { color: #fff; margin: 0; font-size: 18px; font-weight: bold; transition: margin 0.4s ease; }
.project-card:hover .project-overlay h4 { margin-bottom: 10px; }
.project-details { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease; color: #ddd; font-size: 12px; }

/* Custom Tab Pills Styling */
.nav-pills { margin-bottom: 30px !important; }
.nav-pills > li > a { 
    border-radius: 99px !important; 
    font-weight: bold !important; 
    font-size: 13px !important; 
    color: #666 !important; 
    background: transparent !important; 
    padding: 8px 20px !important; 
    margin: 0 5px !important; 
    border: none !important;
}
.nav-pills > li.active > a, .nav-pills > li > a:hover { 
    background: #efbd1a !important; 
    color: #fff !important; 
}

.project-details p { margin-bottom: 10px; line-height: 1.4; }
.project-card:hover .project-details { max-height: 200px; opacity: 1; }
.project-link { color: #fff; font-style: italic; font-weight: bold; display: inline-block; text-decoration: underline; }
.project-badge { position: absolute; top: 15px; left: 0; padding: 5px 25px 5px 10px; color: #fff; font-weight: bold; font-size: 12px; z-index: 2; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%); }
.badge-subsidi { background: #cc0000; }
.badge-komersil { background: #d4a017; color: #000; }


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}