/*=========================
COLLECTION
=========================*/

.collections{

    padding:20px 7%;

    background:#f8f5f0;

}

.container{

    max-width:1400px;

    margin:auto;

}

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

/*==============================
      LUXURY TITLE
===============================*/

.section-title{

    position:relative;

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.title-icon{

    width:75px;

    height:75px;

    margin:auto;

    border:1px solid rgba(198,169,107,.5);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#c7a25e;

    font-size:30px;

    margin-bottom:35px;

    position:relative;

}

.title-icon::after{

    content:"";

    position:absolute;

    width:95px;

    height:95px;

    border-radius:50%;

    border:1px solid rgba(198,169,107,.15);

}

.title-top{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    margin-bottom:40px;

}

.title-top span{

    width:120px;

    height:1px;

    background:#d6b277;

    opacity:.5;

}

.title-top p{

    color:#c7a25e;

    letter-spacing:8px;

    font-size:15px;

    margin:0;

}
.section-title h2{

    font-size:78px;

    line-height:1.15;

    color:#1f1f1f;

    font-weight:700;

    margin-bottom:45px;

}

.section-title h2 span{

    background:linear-gradient(

            90deg,

            #9f7226,

            #dcb56a,

            #b9862d

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.title-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

}

.title-divider span{

    width:180px;

    height:1px;

    background:#d6b277;

}

.title-divider i{

    color:#c7a25e;

    font-size:18px;

    font-style:normal;

}

.diamond{

    color:#c7a25e;

    font-size:18px;

    margin-bottom:25px;

}

.section-desc{

    font-size:23px;

    color:#707070;

    line-height:2.2;

}
/*==============================
        BACKGROUND
===============================*/


.luxury-title{

    position:relative;

    padding:30px 20px 100px;

    text-align:center;

    overflow:hidden;

}

.luxury-title::before{

    content:"";

    position:absolute;

    inset:0;

    background:

            radial-gradient(circle at top,

            rgba(214,178,119,.12),

            transparent 55%);

    pointer-events:none;

}

.circle{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    border:1px solid rgba(214,178,119,.45);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#d6b277;

    position:relative;

    animation:floatIcon 4s ease-in-out infinite;

}

.circle::after{

    content:"";

    position:absolute;

    inset:-10px;

    border-radius:50%;

    border:1px solid rgba(214,178,119,.15);

}
.mini-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin:35px 0;

    letter-spacing:8px;

    font-size:15px;

    color:#c7a25e;

}

.mini-title span{

    width:110px;

    height:1px;

    background:#d6b277;

}

.luxury-title h2{

    font-size:82px;

    line-height:1.15;

    font-weight:700;

    color:#202020;

    margin-bottom:35px;

    text-shadow:

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

}

.luxury-title h2 span{

    background:linear-gradient(

            90deg,

            #9d6b1f,

            #f0d59f,

            #9d6b1f

    );

    background-size:300%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:goldMove 5s linear infinite;

}
.gold-line{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

    color:#c7a25e;

}

.gold-line span{

    width:180px;

    height:1px;

    background:linear-gradient(to right,

    transparent,

    #d6b277,

    transparent);

}

.luxury-title p{

    font-size:22px;

    line-height:2.2;

    color:#666;

    max-width:750px;

    margin:auto;

}

@keyframes goldMove{

    0%{

        background-position:0;

    }

    100%{

        background-position:300%;

    }

}

@keyframes floatIcon{

    50%{

        transform:translateY(-8px);

    }

}


.collection-grid{

    display:grid;

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

    gap:30px;

}

.collection-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    cursor:pointer;

    height:400px;

    background:#fff;

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

    transition:.45s;

}

.collection-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}
/*====================================
        CARD OVERLAY
====================================*/

.collection-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
            to top,
            rgba(0,0,0,.88) 5%,
            rgba(0,0,0,.35) 45%,
            rgba(0,0,0,0) 80%
    );
    opacity:0;
    transition:.5s ease;
    z-index:1;
}

.collection-card:hover::before{
    opacity:1;
}

/*==============================*/

.overlay{

    position:absolute;

    left:35px;

    right:35px;

    bottom:-120px;

    z-index:2;

    transition:.55s ease;

}

.collection-card:hover .overlay{

    bottom:35px;

}

/*==============================*/

.overlay span{

    display:inline-block;

    color:#D7B87A;

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:15px;
    margin-top: 100px;

}

.overlay h3{

    color:#fff;

    font-size:34px;

    margin-bottom:18px;

    font-weight:600;

}

.overlay a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 30px;

    border:1px solid rgba(255,255,255,.65);

    border-radius:40px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

    backdrop-filter:blur(10px);

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

}

.overlay a:hover{

    background:#D7B87A;

    border-color:#D7B87A;

    color:#111;

}

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

.collection-card:hover{

    transform:translateY(-12px);

    box-shadow:
            0 25px 60px rgba(0,0,0,.18);

}

.collection-card:hover img{

    transform:scale(1.12);

}

/*====================================
        GOLD SHINE
====================================*/

.collection-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:40%;

    height:260%;

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

    transform:rotate(25deg);

    transition:1s;

    z-index:3;

}

.collection-card:hover::after{

    left:150%;

}

/*====================================
        GOLD BORDER
====================================*/

.collection-card{

    border:1px solid rgba(198,169,107,.15);

}

.collection-card:hover{

    border-color:#D7B87A;

}
/*======================================
        FLOAT ANIMATION
=======================================*/

@keyframes floatingCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

.collection-card{

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

}

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

    animation-delay:.5s;

}

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

    animation-delay:1s;

}

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

    animation-delay:1.5s;

}

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

.collection-card img{

    transition:transform .9s ease,
    filter .6s ease;

}

.collection-card:hover img{

    transform:scale(1.12);

    filter:brightness(.92);

}

/*======================================
        SHADOW
=======================================*/

.collection-card{

    transition:
            transform .45s ease,
            box-shadow .45s ease;

}

.collection-card:hover{

    transform:translateY(-14px);

    box-shadow:
            0 25px 60px rgba(0,0,0,.15),
            0 12px 30px rgba(198,169,107,.18);

}

/*======================================
        TITLE EFFECT
=======================================*/

.overlay h3{

    transform:translateY(25px);

    opacity:0;

    transition:.45s;

}

.overlay span{

    transform:translateY(15px);

    opacity:0;

    transition:.45s;

}

.overlay a{

    transform:translateY(20px);

    opacity:0;

    transition:.45s;

}

.collection-card:hover .overlay span{

    opacity:1;

    transform:translateY(0);

}

.collection-card:hover .overlay h3{

    opacity:1;

    transform:translateY(0);

    transition-delay:.08s;

}

.collection-card:hover .overlay a{

    opacity:1;

    transform:translateY(0);

    transition-delay:.16s;

}

/*======================================
        GOLD LINE
=======================================*/

.overlay h3::after{

    content:"";

    display:block;

    width:0;

    height:2px;

    background:#D7B87A;

    margin-top:12px;

    transition:.45s;

}

.collection-card:hover .overlay h3::after{

    width:65px;

}
/*======================================
        RESPONSIVE
=======================================*/

@media(max-width:1200px){

    .collection-grid{

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

    }

}

@media(max-width:768px){

    .collections{

        padding:90px 20px;

    }

    .section-title h2{

        font-size:36px;

    }

    .collection-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .collection-card{

        height:420px;

    }

    .overlay{

        left:25px;

        right:25px;

    }

    .overlay h3{

        font-size:28px;

    }

}

@media(max-width:480px){

    .collection-card{

        height:360px;

    }

    .section-title h2{

        font-size:30px;

    }

    .section-title p{

        font-size:15px;

    }

    .overlay{

        bottom:20px !important;

    }

    .overlay h3{

        font-size:24px;

    }

    .overlay a{

        padding:10px 22px;

        font-size:14px;

    }

}