/* =========================================
   RESET
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#f5f1ea;
    color:#111;
    overflow-x:hidden;
}



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

.najel-banner{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;
    align-items:center;

    padding:0 7%;

    background:
    linear-gradient(
    135deg,
    #f7f1e9,
    #efe4d6
    );
}

/* OVERLAY */

.najel-banner-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(
    circle at top right,
    rgba(255,255,255,.5),
    transparent 35%
    );
}

/* GLOW */

.najel-banner-glow{

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

    background:#d8b99c;

    filter:blur(180px);

    opacity:.22;

    right:-250px;
    top:-250px;
}

/* CONTENT */

.najel-banner-content{

    position:relative;

    z-index:5;

    max-width:1200px;
}

.najel-banner-content span{

    display:block;

    margin-bottom:24px;

    font-size:12px;

    letter-spacing:5px;

    color:#9d7c63;
}

.najel-banner-content h1{

    font-family:
    'Cormorant Garamond',serif;

    font-size:
    clamp(78px,6vw,120px);

    line-height:.84;

    letter-spacing:-4px;

    margin-bottom:34px;

    width:max-content;
}

.najel-banner-content p{

    max-width:520px;

    line-height:2;

    font-size:16px;

    color:#666;

    margin-bottom:42px;
}

/* BUTTON */

.najel-banner-content a{

    width:210px;
    height:68px;

    border-radius:100px;

    background:#111;

    color:#fff;

    text-decoration:none;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.45s;
}

.najel-banner-content a:hover{

    transform:translateY(-5px);

    background:#9d7c63;
}

/* FLOATING */

.najel-floating{

    position:absolute;

    z-index:4;

    background:#fff;

    border-radius:34px;

    padding:20px;

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

    animation:
    floating 5s ease-in-out infinite;
}

.najel-floating img{

    width:100%;
    height:100%;

    object-fit:contain;
}

.najel-float-1{

    width:280px;
    height:380px;

    right:14%;
    top:18%;
}

.najel-float-2{

    width:240px;
    height:320px;

    right:4%;
    bottom:16%;

    animation-delay:1s;
}

.najel-float-3{

    width:210px;
    height:290px;

    right:30%;
    bottom:10%;

    animation-delay:2s;
}

@keyframes floating{

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

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

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



/* =========================================
   PRODUCTS
========================================= */

.najel-products{

    position:relative;

    padding:220px 7%;

    overflow:hidden;
}

/* BG TEXT */

.najel-bg-text{

    position:absolute;

    top:40px;
    left:-20px;

    font-family:
    'Cormorant Garamond',serif;

    font-size:280px;

    line-height:.8;

    opacity:.03;

    letter-spacing:-12px;

    pointer-events:none;
}

/* GRID */

.products-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:34px;
}

/* CARD */

.najel-product-card{

    position:relative;

    background:#fff;

    border-radius:34px;

    overflow:hidden;

    cursor:pointer;

    display:flex;
    flex-direction:column;

    min-height:760px;

    box-shadow:
    0 25px 70px rgba(0,0,0,.06);

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

.najel-product-card:hover{

    transform:
    translateY(-12px);

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

/* IMAGE */

.najel-product-image{

    position:relative;

    width:100%;

    height:420px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:#fff;
}

.najel-product-image img{

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    transition:
    transform .8s ease;
}

.najel-product-card:hover
.najel-product-image img{

    transform:scale(1.04);
}

/* CONTENT */

.najel-product-content{

    padding:34px;

    flex:1;
}

.najel-product-content span{

    display:block;

    margin-bottom:16px;

    font-size:11px;

    letter-spacing:4px;

    color:#a17f66;
}

.najel-product-content h3{

    font-family:
    'Cormorant Garamond',serif;

    font-size:34px;

    line-height:.95;

    margin-bottom:18px;

    letter-spacing:-1px;
}

.najel-product-content p{

    line-height:1.9;

    color:#666;

    font-size:14px;
}



/* =========================================
   POPUP
========================================= */

.najel-popup{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.75);

    z-index:9999;

    display:flex;

    align-items:flex-start;
    justify-content:center;

    padding:
    140px 40px 40px;

    overflow-y:auto;

    opacity:0;
    visibility:hidden;

    transition:.45s;
}

.najel-popup.active{

    opacity:1;
    visibility:visible;
}

/* BOX */

.najel-popup-box{

    position:relative;

    width:100%;
    max-width:1200px;

    background:#fff;

    border-radius:36px;

    overflow:hidden;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    transform:
    translateY(60px);

    transition:.55s;
}

.najel-popup.active
.najel-popup-box{

    transform:
    translateY(0);
}

/* IMAGE */

.najel-popup-image{

    position:relative;

    height:760px;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:50px;
}

.najel-popup-image img{

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    display:block;
}

/* CONTENT */

.najel-popup-content{

    padding:90px;
}

.najel-popup-content span{

    display:block;

    margin-bottom:24px;

    font-size:12px;

    letter-spacing:5px;

    color:#a17f66;
}

.najel-popup-content h2{

    font-family:
    'Cormorant Garamond',serif;

    font-size:88px;

    line-height:.88;

    margin-bottom:30px;
}

.najel-popup-content p{

    line-height:2;

    color:#666;

    font-size:16px;
}

/* CLOSE */

.najel-popup-close{

    position:absolute;

    top:25px;
    right:25px;

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    background:#111;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    z-index:5;
}



/* =========================================
   REVEAL
========================================= */

.hide-item{

    opacity:0;

    transform:translateY(80px);

    transition:1s;
}

.show-item{

    opacity:1;

    transform:translateY(0);
}



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

@media(max-width:1600px){

    .products-grid{

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

@media(max-width:1200px){

    .products-grid{

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

    .najel-bg-text{

        font-size:180px;
    }

    .najel-floating{

        display:none;
    }

    .najel-banner-content h1{

        font-size:92px;
    }

    .najel-popup-box{

        grid-template-columns:1fr;
    }

    .najel-popup-image{

        height:420px;

        padding:30px;
    }

    .najel-popup-content{

        padding:50px;
    }

    .najel-popup-content h2{

        font-size:58px;
    }
}

@media(max-width:768px){

    .najel-products,
    .najel-banner{

        padding-left:20px;
        padding-right:20px;
    }

    .products-grid{

        grid-template-columns:1fr;

        gap:24px;
    }

    .najel-product-image{

        height:300px;

        padding:15px;
    }

    .najel-product-card{

        min-height:auto;
    }

    .najel-product-content{

        padding:26px;
    }

    .najel-product-content h3{

        font-size:30px;
    }

    .najel-bg-text{

        font-size:100px;

        left:-10px;
    }

    .najel-banner-content h1{

        font-size:58px;
    }

    /* POPUP MOBIL FIX */

    .najel-popup{

        padding:
        95px 14px 30px;

        align-items:flex-start;
    }

    .najel-popup-box{

        border-radius:28px;

        margin-top:25px;
    }

    .najel-popup-content{

        padding:35px;
    }

    .najel-popup-content h2{

        font-size:42px;

        line-height:.95;
    }

    .najel-popup-image{

        height:340px;

        padding:25px;
    }

    .najel-popup-close{

        top:18px;
        right:18px;

        width:52px;
        height:52px;

        font-size:24px;
    }
}

html,
body{
    scroll-behavior:auto !important;
}






/* =========================================
   NAJEL HERO MOBILE HEIGHT FIX
========================================= */

@media(max-width:768px){

    .najel-banner{

        min-height:62vh !important;

        padding:
        120px 20px 70px !important;

        align-items:flex-start !important;
    }

    .najel-banner-content{

        max-width:100% !important;
    }

    .najel-banner-content h1{

        font-size:52px !important;

        line-height:.95 !important;

        letter-spacing:-2px !important;

        margin-bottom:22px !important;

        width:100% !important;
    }

    .najel-banner-content p{

        font-size:15px !important;

        line-height:1.9 !important;

        margin-bottom:0 !important;

        max-width:100% !important;
    }

    .najel-banner-content span{

        margin-bottom:18px !important;

        font-size:10px !important;

        letter-spacing:4px !important;
    }

}
/* =========================================
   NAJEL HERO TITLE DOWN
========================================= */

@media(max-width:768px){

    .najel-banner-content{

        padding-top:40px !important;
    }

}