/*==========================================
OUR PROMISE GALLERY
==========================================*/

.promise-gallery{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

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

.promise-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    height:420px;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

    transition:.5s ease;

}

/* Luxury Border */

.promise-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:3px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #ffffff 50%,
        #d97706 50%,
        #ffb347 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    z-index:5;

}

/*==========================================
IMAGE
==========================================*/

.promise-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:1s;

}

/*==========================================
OVERLAY
==========================================*/

.promise-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.92),

        rgba(0,0,0,.35),

        transparent

    );

}

.promise-overlay h3{

    color:#fff;

    font-size:28px;

    margin-bottom:12px;

    transform:translateY(80px);

    opacity:0;

    transition:.5s;

}

.promise-overlay p{

    color:#eee;

    line-height:1.8;

    transform:translateY(80px);

    opacity:0;

    transition:.65s;

}

/*==========================================
HOVER
==========================================*/

.promise-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 90px rgba(217,119,6,.30);

}

.promise-card:hover img{

    transform:scale(1.12);

}

.promise-card:hover .promise-overlay h3,

.promise-card:hover .promise-overlay p{

    transform:translateY(0);

    opacity:1;

}

/*==========================================
TOP SHINE
==========================================*/

.promise-card::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-50%;

    width:70%;

    height:300%;

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

    transform:rotate(25deg);

    transition:1s;

}

.promise-card:hover::after{

    left:130%;

}

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

.promise-card{

    animation:float 6s ease-in-out infinite;

}

.promise-card:nth-child(2){

    animation-delay:.3s;

}

.promise-card:nth-child(3){

    animation-delay:.6s;

}

.promise-card:nth-child(4){

    animation-delay:.9s;

}

.promise-card:nth-child(5){

    animation-delay:1.2s;

}

.promise-card:nth-child(6){

    animation-delay:1.5s;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/*==========================================
DESKTOP
==========================================*/

@media(min-width:1440px){

.promise-card{

height:470px;

}

}

/*==========================================
LAPTOP
==========================================*/

@media(max-width:1200px){

.promise-gallery{

grid-template-columns:repeat(2,1fr);

}

}

/*==========================================
TABLET
==========================================*/

@media(max-width:992px){

.promise-gallery{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.promise-card{

height:380px;

}

}

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

@media(max-width:768px){

.promise-gallery{

grid-template-columns:1fr;

}

.promise-card{

height:340px;

}

.promise-overlay h3{

font-size:24px;

opacity:1;

transform:none;

}

.promise-overlay p{

opacity:1;

transform:none;

}

}

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

@media(max-width:576px){

.promise-card{

height:300px;

}

.promise-overlay{

padding:20px;

}

.promise-overlay h3{

font-size:20px;

}

.promise-overlay p{

font-size:15px;

}

}