.elementor-1485 .elementor-element.elementor-element-5cf67ee{--display:flex;}/* Start custom CSS for html, class: .elementor-element-f8de1b9 *//*==================================================
LUXURY JEWELLERY CASE STUDY
PART 1
Graphic Room Studio
==================================================*/

/*==========================
ROOT
==========================*/

:root{

    --primary:#C9A227;
    --primary-light:#E4C96A;

    --dark:#090909;
    --dark-2:#111111;
    --card:#171717;

    --white:#ffffff;
    --text:#bdbdbd;

    --border:rgba(255,255,255,.08);

    --radius:24px;

    --transition:.45s ease;

}

/*==========================
CONTAINER
==========================*/

.container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding-left:40px;

    padding-right:40px;

}

@media(max-width:768px){

.container{

    padding-left:20px;

    padding-right:20px;

}

}

/*==========================
COMMON
==========================*/

section{

    position:relative;

    overflow:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

.section-title{

    max-width:750px;

    margin:0 auto 70px;

    text-align:center;

}

.section-title span{

    color:var(--primary);

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

}

.section-title h2{

    color:#fff;

    font-size:52px;

    margin:18px 0;

}

.section-title p{

    color:var(--text);

    line-height:1.9;

}

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

.lj-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

    radial-gradient(circle at top right,
    rgba(201,162,39,.18),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(255,255,255,.04),
    transparent 35%),

    #090909;

}

.lj-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(0,0,0,.25),

    rgba(0,0,0,.75)

    );

}

.lj-hero-content{

    position:relative;

    z-index:2;

    max-width:720px;

}

.lj-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:60px;

    border:1px solid rgba(201,162,39,.35);

    color:var(--primary);

    backdrop-filter:blur(15px);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:12px;

}

.lj-badge::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}

.lj-hero h1{

    color:#fff;

    font-size:76px;

    line-height:1.05;

    margin:30px 0 20px;

}

.lj-hero h1 span{

    color:var(--primary);

    display:block;

}

.lj-hero p{

    color:var(--text);

    font-size:18px;

    line-height:2;

    max-width:650px;

}

/*==========================
BUTTONS
==========================*/

.lj-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

    flex-wrap:wrap;

}

.lj-btn{

    background:var(--primary);

    color:#111;

    padding:18px 42px;

    border-radius:60px;

    font-weight:700;

    transition:var(--transition);

}

.lj-btn:hover{

    background:var(--primary-light);

    transform:translateY(-6px);

}

.lj-btn-outline{

    color:#fff;

    padding:18px 42px;

    border-radius:60px;

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

    transition:var(--transition);

}

.lj-btn-outline:hover{

    background:#fff;

    color:#111;

}

/*==========================
SCROLL
==========================*/

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-down span{

    width:28px;

    height:48px;

    border:2px solid rgba(255,255,255,.2);

    border-radius:30px;

    display:block;

    position:relative;

}

.scroll-down span::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--primary);

    position:absolute;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

0%{

opacity:0;

transform:translate(-50%,0);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:translate(-50%,16px);

}

}

/*==========================
OVERVIEW
==========================*/

.lj-overview{

    padding:120px 0;

    background:#101010;

}

.overview-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

}

.overview-left h2{

    color:#fff;

    font-size:56px;

    line-height:1.2;

    margin-bottom:25px;

}

.overview-left p{

    color:var(--text);

    line-height:2;

}

.overview-right{

    display:grid;

    gap:25px;

}

.info-card{

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

    border:1px solid var(--border);

    border-radius:22px;

    padding:35px;

    transition:var(--transition);

}

.info-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,162,39,.35);

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.info-card h4{

    color:var(--primary);

    margin-bottom:15px;

    font-size:18px;

}

.info-card p,

.info-card li{

    color:#d5d5d5;

    line-height:1.8;

}

.info-card ul{

    padding-left:18px;

}

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

@media(max-width:992px){

.lj-hero h1{

    font-size:58px;

}

.overview-grid{

    grid-template-columns:1fr;

}

.section-title h2{

    font-size:42px;

}

}

@media(max-width:768px){

.lj-hero{

    min-height:90vh;

}

.lj-hero h1{

    font-size:40px;

}

.lj-hero p{

    font-size:16px;

}

.overview-left h2{

    font-size:36px;

}

.lj-buttons{

    flex-direction:column;

}

.lj-btn,

.lj-btn-outline{

    width:100%;

    text-align:center;

}

}

/*==================================================
PART 2
SHOWCASE + BRAND STORY + GALLERY
==================================================*/


/*=================================
SHOWCASE
=================================*/

.lj-showcase{

    padding:140px 0;

    background:#0d0d0d;

}

.lj-showcase .container{

    max-width:1380px;

}

.lj-showcase img{

    width:100%;

    border-radius:32px;

    overflow:hidden;

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

    box-shadow:
    0 35px 90px rgba(0,0,0,.55);

    transition:.55s ease;

}

.lj-showcase img:hover{

    transform:scale(1.015);

    box-shadow:
    0 45px 120px rgba(201,162,39,.18);

}



/*=================================
BRAND STORY
=================================*/

.brand-story{

    padding:140px 0;

    background:#101010;

}

.story-wrapper{

    max-width:920px;

    margin:auto;

    text-align:center;

}

.story-wrapper span{

    display:inline-block;

    color:var(--primary);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

    margin-bottom:20px;

}

.story-wrapper h2{

    color:#fff;

    font-size:58px;

    line-height:1.2;

    margin-bottom:30px;

}

.story-wrapper p{

    color:var(--text);

    font-size:18px;

    line-height:2.1;

}



/*=================================
GALLERY
=================================*/

.lj-gallery{

    padding:140px 0;

    background:#090909;

}

.gallery-title{

    text-align:center;

    margin-bottom:70px;

}

.gallery-title span{

    display:inline-block;

    color:var(--primary);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

    margin-bottom:18px;

}

.gallery-title h2{

    color:#fff;

    font-size:54px;

}



/*=================================
GRID
=================================*/

.gallery-grid{

    display:grid;

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

    gap:35px;

}



/*=================================
IMAGES
=================================*/

.gallery-grid img{

    width:100%;

    display:block;

    border-radius:26px;

    overflow:hidden;

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

    transition:.45s ease;

    cursor:pointer;

    box-shadow:

    0 18px 45px rgba(0,0,0,.45);

}



/*=================================
MASONRY LOOK
=================================*/

.gallery-grid img:nth-child(2){

    margin-top:80px;

}

.gallery-grid img:nth-child(5){

    margin-top:80px;

}



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

.gallery-grid img:hover{

    transform:

    translateY(-12px)

    scale(1.02);

    border-color:rgba(201,162,39,.45);

    box-shadow:

    0 40px 90px rgba(201,162,39,.18);

}



/*=================================
PREMIUM DIVIDER
=================================*/

.lj-gallery::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    background:

    linear-gradient(

    to right,

    transparent,

    var(--primary),

    transparent

    );

    margin:100px auto 0;

}



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

@media(max-width:992px){

.story-wrapper h2{

    font-size:46px;

}

.gallery-title h2{

    font-size:42px;

}

}



@media(max-width:768px){

.lj-showcase,

.brand-story,

.lj-gallery{

    padding:90px 0;

}

.story-wrapper h2{

    font-size:34px;

}

.story-wrapper p{

    font-size:16px;

}

.gallery-title h2{

    font-size:34px;

}

.gallery-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.gallery-grid img:nth-child(2),

.gallery-grid img:nth-child(5){

    margin-top:0;

}

}

/*==================================================
PART 3
COLOR PALETTE + TYPOGRAPHY +
LOGO + PACKAGING + SOCIAL
==================================================*/


/*=========================================
COLOR PALETTE
=========================================*/

.lj-colors{

    padding:140px 0;

    background:#111;

}

.color-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.color-card{

    position:relative;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

    border-radius:28px;

    padding:45px 30px;

    overflow:hidden;

    transition:.45s;

}

.color-card:hover{

    transform:translateY(-10px);

    border-color:rgba(201,162,39,.45);

    box-shadow:0 25px 60px rgba(201,162,39,.12);

}

.color-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    margin:0 auto 25px;

    border:5px solid rgba(255,255,255,.08);

}

.gold{

    background:#C9A227;

}

.burgundy{

    background:#5D0F1D;

}

.black{

    background:#111111;

}

.white{

    background:#ffffff;

}

.color-card h3{

    text-align:center;

    color:#fff;

    margin-bottom:10px;

    font-size:22px;

}

.color-card p{

    text-align:center;

    color:#bdbdbd;

    letter-spacing:2px;

}



/*=========================================
TYPOGRAPHY
=========================================*/

.lj-typography{

    padding:140px 0;

    background:#0d0d0d;

}

.lj-typography .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.type-left span{

    color:var(--primary);

    letter-spacing:4px;

    text-transform:uppercase;

}

.type-left h2{

    color:#fff;

    font-size:56px;

    margin:18px 0;

}

.type-left p{

    color:var(--text);

    line-height:2;

}

.type-right{

    display:grid;

    gap:30px;

}

.font-box{

    background:#181818;

    padding:40px;

    border-radius:24px;

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

    transition:.45s;

}

.font-box:hover{

    transform:translateY(-10px);

    border-color:rgba(201,162,39,.35);

}

.font-box h1{

    color:var(--primary);

    font-size:78px;

    margin-bottom:18px;

}

.font-box h3{

    color:#fff;

    margin-bottom:12px;

}

.font-box p{

    color:var(--text);

}



/*=========================================
LOGO SHOWCASE
=========================================*/

.logo-showcase{

    padding:140px 0;

    background:#101010;

}

.logo-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.logo-grid img{

    width:100%;

    border-radius:28px;

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

    transition:.45s;

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

}

.logo-grid img:hover{

    transform:scale(1.02);

    box-shadow:0 35px 80px rgba(201,162,39,.15);

}



/*=========================================
PACKAGING
=========================================*/

.packaging-section{

    padding:140px 0;

    background:#090909;

}

.package-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.package-grid img{

    width:100%;

    border-radius:28px;

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

    transition:.45s;

}

.package-grid img:hover{

    transform:translateY(-10px);

    border-color:rgba(201,162,39,.40);

    box-shadow:0 35px 80px rgba(201,162,39,.15);

}



/*=========================================
SOCIAL MEDIA
=========================================*/

.social-showcase{

    padding:140px 0;

    background:#111;

}

.social-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.social-grid img{

    width:100%;

    border-radius:24px;

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

    transition:.45s;

}

.social-grid img:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 30px 70px rgba(201,162,39,.15);

}



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

@media(max-width:992px){

.color-grid{

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

}

.lj-typography .container{

    grid-template-columns:1fr;

}

.logo-grid{

    grid-template-columns:1fr;

}

.package-grid{

    grid-template-columns:1fr;

}

.social-grid{

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

}

}

@media(max-width:768px){

.lj-colors,
.lj-typography,
.logo-showcase,
.packaging-section,
.social-showcase{

    padding:90px 0;

}

.color-grid,
.social-grid{

    grid-template-columns:1fr;

}

.type-left h2{

    font-size:36px;

}

.font-box{

    padding:30px;

}

.font-box h1{

    font-size:60px;

}

}

/*==================================================
PART 4
RESULT + NEXT PROJECT + CTA + FINAL RESPONSIVE
==================================================*/


/*=================================
PROJECT RESULT
=================================*/

.project-result{

    padding:140px 0;

    background:#0b0b0b;

    position:relative;

}

.project-result::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-220px;

    right:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(201,162,39,.15),
    transparent 70%);

    pointer-events:none;

}

.result-content{

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.result-content span{

    display:inline-block;

    color:var(--primary);

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.result-content h2{

    color:#fff;

    font-size:58px;

    line-height:1.2;

    margin-bottom:30px;

}

.result-content p{

    color:var(--text);

    font-size:18px;

    line-height:2;

}



/*=================================
NEXT PROJECT
=================================*/

.next-project{

    padding:120px 0;

    background:#101010;

}

.next-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:60px;

    border-radius:28px;

    background:linear-gradient(135deg,#181818,#111);

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

    transition:.45s;

}

.next-wrapper:hover{

    transform:translateY(-8px);

    border-color:rgba(201,162,39,.35);

}

.next-wrapper span{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:3px;

}

.next-wrapper h2{

    color:#fff;

    font-size:42px;

    margin-top:12px;

}

.next-wrapper a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:60px;

    border-radius:60px;

    background:var(--primary);

    color:#111;

    font-weight:700;

    transition:.4s;

}

.next-wrapper a:hover{

    background:#fff;

    transform:translateY(-5px);

}



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

.luxury-cta{

    padding:170px 0;

    background:

    radial-gradient(circle at top,
    rgba(201,162,39,.12),
    transparent 40%),

    #090909;

    text-align:center;

}

.luxury-cta h2{

    color:#fff;

    font-size:64px;

    max-width:900px;

    margin:auto;

    line-height:1.15;

}

.luxury-cta p{

    max-width:720px;

    margin:35px auto 50px;

    color:var(--text);

    line-height:2;

    font-size:18px;

}

.luxury-cta a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:240px;

    height:65px;

    border-radius:60px;

    background:var(--primary);

    color:#111;

    font-weight:700;

    transition:.45s;

    box-shadow:

    0 20px 45px

    rgba(201,162,39,.25);

}

.luxury-cta a:hover{

    transform:

    translateY(-8px)

    scale(1.04);

    background:#fff;

}



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

.gallery-grid img,
.logo-grid img,
.package-grid img,
.social-grid img,
.lj-showcase img{

    transition:.45s ease;

}

.gallery-grid img:hover,
.logo-grid img:hover,
.package-grid img:hover,
.social-grid img:hover,
.lj-showcase img:hover{

    filter:brightness(1.05);

}



/*=================================
SMOOTH SCROLL
=================================*/

html{

    scroll-behavior:smooth;

}



/*=================================
SCROLLBAR
=================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#0b0b0b;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

    var(--primary),

    #8d6b07

    );

    border-radius:20px;

}



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

@media(max-width:992px){

.result-content h2{

    font-size:44px;

}

.next-wrapper{

    flex-direction:column;

    text-align:center;

}

.next-wrapper h2{

    font-size:34px;

}

.luxury-cta h2{

    font-size:46px;

}

}

@media(max-width:768px){

.project-result,
.next-project,
.luxury-cta{

    padding:90px 0;

}

.result-content h2{

    font-size:32px;

}

.luxury-cta h2{

    font-size:34px;

}

.luxury-cta p{

    font-size:16px;

}

.next-wrapper{

    padding:35px 25px;

}

.next-wrapper a{

    width:100%;

    max-width:260px;

}

}/* End custom CSS */