*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:#eef3f8;
}

/* Header */

header{
    background:linear-gradient(135deg,#003366,#0066cc);
    color:#fff;
    text-align:center;
    padding:25px;
}

header h1{
    font-size:34px;
    margin-bottom:10px;
}

header h2{
    color:#ffeb3b;
    margin-bottom:10px;
}

header p{
    font-size:17px;
}

/* Menu */

nav{
    background:#0056b3;
    text-align:center;
    padding:15px;
}

nav a{
    color:#fff;
    text-decoration:none;
    margin:0 15px;
    font-weight:bold;
    transition:.3s;
}

nav a:hover{
    color:#ffeb3b;
}

/* Title */

.page-title{
    text-align:center;
    padding:30px;
}

.page-title h2{
    color:#003366;
    font-size:32px;
}

.page-title p{
    color:#555;
    margin-top:10px;
}

/* Gallery */

.gallery{

    width:95%;

    margin:30px auto;

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

    gap:25px;

}

/* Card */

.card{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    transition:all .45s ease;

    cursor:pointer;

}

/* Hover */

.card:hover{
    transform:translateY(-10px) scale(1.05);
    box-shadow:0 20px 45px rgba(0,123,255,.45);
}

/* Image */

.image-box{
    height:320px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#ffffff;
    transition:.4s;
}

.image-box img{
    width:auto;
    height:100%;
    max-width:100%;
    object-fit:contain;
    transition:transform .5s ease;
}

/* Image Hover */

.card:hover{
    transform:translateY(-10px) scale(1.05);
    box-shadow:0 20px 45px rgba(0,123,255,.45);
    border:2px solid #00c6ff;
}

/* Card Body */

.card-body{

    padding:18px;

    text-align:center;

    transition:.4s;

}

.card-body h3{

    color:#003366;

    margin-bottom:8px;

    font-size:22px;

    transition:.4s;

}

.card-body p{

    color:#444;

    font-size:16px;

    transition:.4s;

}

/* Text Hover */

.card:hover .card-body h3,

.card:hover .card-body p{

    color:#ffffff;

}

/* Footer */

footer{

    margin-top:40px;

    background:#003366;

    color:#fff;

    text-align:center;

    padding:25px;

}

footer p{

    margin:5px 0;

}

/* Mobile */

@media(max-width:768px){

.gallery{

    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

}

.image-box{

    height:240px;

}

header h1{

    font-size:24px;

}

.page-title h2{

    font-size:24px;

}

nav a{

    display:inline-block;

    margin:8px;

}

}
/* ================= Hover Color ================= */

.card:hover .image-box{
    background:linear-gradient(135deg,#00c6ff,#6a11cb);
}

.card:hover .card-body{
    background:linear-gradient(135deg,#00c6ff,#6a11cb);
}

.card:hover .card-body h3,
.card:hover .card-body p{
    color:#ffffff;
}