/* ===================================
   GLOBAL
=================================== */

*{
    box-sizing:border-box;
}


body{

    font-family:'Segoe UI',Arial,sans-serif;

    color:#333;

    background:#fff;

}



a{

    text-decoration:none;

}





/* ===================================
   HERO
=================================== */


.hero{

    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.65)
    ),

    url("/assets/images/bg.png");


    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    min-height:520px;

    display:flex;

    align-items:center;

    color:white;

    padding:100px 0;

}



.hero h1{

    font-size:48px;

    font-weight:700;

    line-height:1.2;

}



.hero p{

    font-size:20px;

    max-width:600px;

}



.hero .btn{

    padding:12px 30px;

    border-radius:30px;

}



.hero img{

    border-radius:20px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.35);

}





/* ===================================
   TITLE SECTION
=================================== */


.page-header{

    padding:70px 0 40px;

    text-align:center;

}



.page-header h1{

    font-size:42px;

    font-weight:700;

    text-align:center;

}



.page-header p{

    text-align:center;

    font-size:18px;

    color:#666;

}





/* ===================================
   PRODUCT CARD
=================================== */


.product-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    border:none;

    box-shadow:

    0 8px 25px rgba(0,0,0,.12);

    transition:.3s;

}



.product-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.2);

}



.product-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}



.product-card .card-body{

    padding:25px;

}





/* ===================================
   GALERI PORTFOLIO
=================================== */


.project-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    height:100%;


    box-shadow:

    0 10px 30px rgba(0,0,0,.12);


    transition:.4s;

}



.project-card:hover{

    transform:translateY(-10px);


    box-shadow:

    0 20px 45px rgba(0,0,0,.2);

}



.project-image{

    position:relative;

    overflow:hidden;

    cursor:pointer;

}



.project-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}



.project-card:hover .project-image img{

    transform:scale(1.1);

}




.image-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);


    display:flex;

    justify-content:center;

    align-items:center;


    opacity:0;

    transition:.3s;

}



.project-image:hover .image-overlay{

    opacity:1;

}



.image-overlay i{

    color:white;

    font-size:45px;

}




.project-body{

    padding:25px;

    text-align:center;

}



.project-body h4{

    font-weight:700;

    text-align:center;

}



.project-info{

    margin-top:20px;

    text-align:left;

    color:#666;

    font-size:14px;

}



.project-info p{

    margin-bottom:10px;

}



.project-info i{

    margin-right:8px;

    color:#212529;

}





/* ===================================
   CTA
=================================== */


.cta{

    background:#212529;

    color:white;

    padding:70px 0;

}


.cta h2{

    font-weight:700;

}





/* ===================================
   BREADCRUMB
=================================== */


.breadcrumb{

    background:white;

    padding:15px 20px;

    border-radius:12px;


    box-shadow:

    0 5px 15px rgba(0,0,0,.05);

}





/* ===================================
   WHATSAPP FLOATING
=================================== */


.wa-floating{

    position:fixed;

    right:25px;

    bottom:25px;


    width:60px;

    height:60px;


    border-radius:50%;


    background:#25D366;

    color:white;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:30px;


    box-shadow:

    0 5px 20px rgba(0,0,0,.3);


    z-index:999;


    transition:.3s;

}



.wa-floating:hover{

    transform:scale(1.1);

    color:white;

}





/* ===================================
   MOBILE
=================================== */


@media(max-width:768px){


.hero{

    min-height:400px;

    padding:70px 0;

}



.hero h1{

    font-size:34px;

}



.hero p{

    font-size:17px;

}



.page-header h1{

    font-size:32px;

}



.product-card img,

.project-image img{

    height:220px;

}



}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}
.dashboard-header{

display:flex;
justify-content:space-between;
align-items:center;

}

.welcome-card{

background:linear-gradient(135deg,#2563eb,#4f46e5);

color:#fff;

padding:35px;

border-radius:18px;

box-shadow:0 12px 25px rgba(0,0,0,.15);

}

.stat-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px;

border-radius:18px;

color:#fff;

transition:.3s;

box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.stat-card:hover{

transform:translateY(-6px);

}

.stat-card p{

margin:0;

opacity:.9;

font-size:15px;

}

.stat-card h2{

font-size:35px;

margin-top:8px;

font-weight:700;

}

.stat-primary{

background:linear-gradient(135deg,#2563eb,#3b82f6);

}

.stat-success{

background:linear-gradient(135deg,#10b981,#22c55e);

}

.stat-warning{

background:linear-gradient(135deg,#f59e0b,#fbbf24);

}

.stat-danger{

background:linear-gradient(135deg,#ef4444,#dc2626);

}

.icon-circle{

width:65px;

height:65px;

background:rgba(255,255,255,.2);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

}

.card{

border:none;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

overflow:hidden;

}

.card-header{

background:#fff;

font-weight:700;

padding:18px;

border-bottom:1px solid #eee;

font-size:17px;

}

.table th{

background:#f8fafc;

}

.thumb-dashboard{

width:60px;

height:60px;

object-fit:cover;

border-radius:12px;

border:2px solid #eee;

}

.table tbody tr:hover{

background:#f9fbff;

}

.badge{

font-size:13px;

padding:8px 12px;

border-radius:30px;

}