/*

 * FuelGuard Certificates Widget Styles

 */



@import url('https://fonts.googleapis.com/css?family=Montserrat');



.fg-certificates {

    padding: 10px 0;

}



.certificates-grid {

    display: grid;

    gap: 16px;

}



.fg-cert-card {

    background: #ffffff;

    border-radius: 12px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

    padding: 16px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.fg-cert-thumb {

    width: 100%;

    max-width: 140px;

    height: 100px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.fg-cert-thumb img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.fg-cert-title {

    font-weight: 700;

    margin-bottom: 4px;

}



.fg-cert-sub {

    color: #6c757d;

    font-size: 0.9em;

    margin-bottom: 12px;

}



.fg-cert-button {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 8px;

    background: #0d6efd;

    color: #ffffff;

    text-decoration: none;

    transition: background 0.2s ease;

}



.fg-cert-button:hover {

    background: #0b5ed7;

}



/* 3D Thumbnail (image fully visible) */

.fg-thumb {

    width: 100%;

    height: 180px;

    margin-bottom: 12px;

    perspective: 1000px;

}



.fg-thumb a {

    position: relative;

    display: block;

    width: 100%;

    height: 100%;

    transform-style: preserve-3d;

    transition: all 0.5s;

    background-size: 0, contain;

    background-position: center;

    background-repeat: no-repeat, no-repeat;

}



.fg-thumb:hover a {

    transform: rotateX(80deg);

    transform-origin: bottom;

}



.fg-thumb a:after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 50px;

    background: inherit;

    background-size: contain, contain;

    background-position: bottom;

    background-repeat: no-repeat, no-repeat;

    transform: rotateX(90deg);

    transform-origin: bottom;

}



.fg-thumb a span {

    color: #fff;

    text-transform: uppercase;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    font: bold 12px/36px Montserrat, sans-serif;

    text-align: center;

    transform: rotateX(-89.99deg);

    transform-origin: top;

    z-index: 1;

}



.fg-thumb a:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);

    transition: all 0.5s;

    opacity: 0.15;

    transform: rotateX(95deg) translateZ(-80px) scale(0.75);

    transform-origin: bottom;

}



.fg-thumb:hover a:before {

    opacity: 1;

    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);

    transform: rotateX(0) translateZ(-60px) scale(0.85);

}