@import url("responsive.css");
::selection{

background:var(--clr-primary);

color:#fff;

}

img{

user-select:none;

-webkit-user-drag:none;

}

html{

scroll-padding-top:100px;

}

button:focus-visible,
a:focus-visible,
input:focus-visible{

outline:2px solid var(--clr-primary);

outline-offset:4px;

}

body{

    font-family:var(--font-primary);

    font-weight:500;

    background:#000;

    color:#fff;

    overflow-x:hidden;

    line-height:1.5;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

button,
input,
textarea,
select{

    font:inherit;

}
h1{

    font-size:clamp(4rem,9vw,6rem);

    font-weight:700;

    line-height:.9;

    letter-spacing:-.03em;

}

h2{

    font-size:clamp(2.5rem,5vw,3.5rem);

    font-weight:700;

    line-height:1;

}

h3{

    font-size:1.75rem;

    font-weight:600;

}

p{

    font-size:1.125rem;

    font-weight:500;

    line-height:1.7;

}

/* ==========================
   LINKS
========================== */

a{
    color: inherit;
    text-decoration: none;
}

a:visited{
    color: inherit;
}

a:hover{
    color: inherit;
}

a:active{
    color: inherit;
}

ul,
ol{
    list-style: none;
    margin: 0;
    padding: 0;
}

img{
    display: block;
    max-width: 100%;
    height: auto;
}

/*CONTAINER*/
.container{

    width:min(100% - 2rem,var(--container));

    margin-inline:auto;

}

/*SECTIONS*/
section{

    padding-block:var(--section-space);

}

/*BUTTONS*/
.btn{

	font-family:var(--font-primary);
	font-size:1rem;
	letter-spacing:.08em;
	text-transform:uppercase;
    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:.25rem .25rem .25rem 1.5rem;

    border-radius:999px;

    transition:var(--transition);

    font-weight:600;

    white-space:nowrap;

}

.btn-primary{

    background:var(--clr-primary);

    color:#fff;

}

.btn-dark{

    background:#000;

    color:#fff;

}

.btn-outline{

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

}

.btn:hover{

    transform:translateY(-3px);

}

/*TYPOGRAPHY*/
h1{

    font-size:clamp(4rem,9vw,6rem);

    line-height:.9;

    font-weight:700;

}

h2{

    font-size:clamp(2rem,5vw,3rem);

    font-weight:600;

}

p{

    font-size:1.125rem;

    line-height:1.6;

}


/* ===========================
HEADER
=========================== */

.header{

    position:absolute;

    inset:0 0 auto;

    z-index:1000;

    padding-top:1rem;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

}

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

.logo{

    display:flex;

    align-items:center;

    gap:.0rem;

    font-size:1.25rem;

    font-weight:600;

}

.logo img{

    width:50px;

}

/* ===========================
NAVIGATION
=========================== */

.nav-links{

    display:flex;

    align-items:center;

    gap:2rem;

}

.nav-links a{

    position:relative;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--clr-primary);

    transition:var(--transition);

}

.nav-links a:hover::after,

.nav-links .active::after{

    width:100%;

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(0,0,0,.55),

            rgba(0,0,0,.45)

        );

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:620px;

}

.hero h1{

    margin-bottom:1.5rem;
	font-size:clamp(4.8rem,10vw,7rem);

    font-weight:700;

    text-transform:uppercase;

    line-height:.88;

    letter-spacing:-0.03em;

}

.hero p{

    margin-bottom:2.5rem;

    max-width:520px;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.btn-icon{

    width:34px;

    height:34px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:#000;

}

.menu-toggle{

    display:none;

    flex-direction:column;

    gap:5px;

}

.menu-toggle span{

    width:26px;

    height:2px;

    background:#fff;

}

/*==========================
ABOUT
==========================*/

.about{

    background:#DDDBDB;

    color:#000;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 460px;

    align-items:center;

    gap:5rem;

}

.about-content{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.about h2{

    max-width:650px;

}

.about p{

    max-width:620px;

    color:#333;

}

.about-image{

    overflow:hidden;

    border-radius:12px;

    aspect-ratio:459 / 543;

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

}

.about-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.05);

}

/*REUSABLE COMPONENTS*/
.section-tag{
	
	font-size:.9rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    color:var(--clr-primary);

}

.section-tag::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--clr-primary);

}

.about-content,
.about-image{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.about.show .about-content,
.about.show .about-image{

    opacity:1;

    transform:none;

}

/*==========================
SECTION HEADER
==========================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:2rem;

    margin-bottom:4rem;

}

.section-header h2{

    margin-top:.75rem;

}

/*==========================
SERVICES
==========================*/

.services{

    background:#000;

}

.services-grid{

    display:grid;

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

    gap:1.5rem;

}

.service-card{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    cursor:pointer;

    aspect-ratio:250 / 607;

}

.service-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.service-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    padding:2rem;

    background:

        linear-gradient(

            transparent 35%,

            rgba(0,0,0,.82)

        );

}

.service-overlay h3{

    color:#fff;

    text-align:center;

    font-size:2rem;

    line-height:1.2;

    font-weight:600;

}

.service-card:hover img{

    transform:scale(1.08);

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card{

    transition:.4s;

}

.service-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    transition:.35s;

}

.service-card:hover::after{

    border-color:var(--clr-primary);

}

.services{

opacity:0;

transform:translateY(60px);

transition:.8s ease;

}

.services.show{

opacity:1;

transform:none;

}

/*====================================
SHOP
====================================*/

.shop{

    background:#fff;

    color:#000;

}

.products-grid{

    display:grid;

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

    gap:2rem;

}

.product-card{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    transition:.35s ease;

    cursor:pointer;

    box-shadow:

        0 5px 18px rgba(0,0,0,.08);

}

.product-image{

    overflow:hidden;

    aspect-ratio:1;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s ease;

}

.product-info{

    padding:1.25rem;

}

.product-info h3{

    font-size:1.4rem;

    font-weight:600;

    margin-bottom:.6rem;

}

.product-info p{

    color:#555;

    font-size:1rem;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.12);

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-card{

    position:relative;

}

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    border-radius:12px;

    transition:.3s;

}

.product-card:hover::before{

    border-color:var(--clr-primary);

}

.product-card:active{

    transform:scale(.98);

}

.shop{

opacity:0;

transform:translateY(60px);

transition:.8s ease;

}

.shop.show{

opacity:1;

transform:none;

}

/*=========================================
BOOKING
=========================================*/

.booking{

    padding:0;

    background:#f8f8f8;

}

.booking .section-header{

    justify-content:center;

    text-align:center;
	
	color:#000000;

}

.booking .section-header p{

    max-width:650px;

    margin:1.5rem auto 0;

}

.booking-form{

    max-width:900px;

    margin:4rem auto 0;

}

.booking-grid{

    display:grid;

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

    gap:1.5rem;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:.75rem;

    font-weight:600;

    color:#222;

}

.form-group.full{

    grid-column:1/-1;

}

.booking textarea{

    resize:vertical;

}

.booking button{

    margin-top:2rem;

}

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

.cta{

    background:#fff;

    padding-bottom:80px;

}

.cta-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    padding:

        clamp(4rem,8vw,6rem)

        clamp(2rem,8vw,5rem);

    text-align:center;

    background:

        linear-gradient(

            180deg,

            #C8A96D 0%,

            #000 100%

        );

    color:#fff;

}

.cta-card::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:

        radial-gradient(

            rgba(255,255,255,.18),

            transparent

        );

    top:-250px;

    left:-150px;

    pointer-events:none;

}

.cta-card::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:

        radial-gradient(

            rgba(200,169,109,.25),

            transparent

        );

    bottom:-200px;

    right:-150px;

}

.cta-logo{

    margin-bottom:3rem;

}

.cta-logo img{

    width:min(320px,70%);

    margin:auto;

    opacity:.18;

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:700px;

    margin:auto;

}

.cta-content h2{

    font-size:clamp(2.5rem,6vw,4rem);

    line-height:1.1;

    margin-bottom:1.5rem;

}

.cta-content p{

    max-width:580px;

    margin:auto;

    margin-bottom:2.5rem;

    color:rgba(255,255,255,.82);

}

.btn-light{

    background:#fff;

    color:#000;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.cta-logo{

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

}

.btn-light:hover{

background:#f8f8f8;

transform:translateY(-4px);

}

.cta{

opacity:0;

transform:translateY(60px);

transition:.8s;

}

.cta.show{

opacity:1;

transform:none;

}

/*=============================
FOOTER
=============================*/

.footer{

    background:#000;

    color:#fff;

    padding-top:5rem;

}

.footer-grid{

    display:grid;

    grid-template-columns:

        2fr

        1fr

        1fr

        1.5fr;

    gap:3rem;

}

.footer h3{
	
	font-size:1.3rem;

    font-weight:700;

    margin-bottom:1.25rem;

    color:var(--clr-primary);

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.footer a{

    font-size:1rem;

    font-weight:500;

    transition:.3s;

}

.footer a:hover{

    color:var(--clr-primary);

}

.footer-brand p{
	
	font-size:1rem;

    font-weight:500;

    margin:1.5rem 0;

    color:#c7c7c7;

}

.social-links{

    display:flex;

    gap:1rem;

}

.social-links a{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#111;

    transition:.3s;

}

.social-links a:hover{

    background:var(--clr-primary);

    color:#fff;

    transform:translateY(-4px);

}

.newsletter{

    display:flex;

    margin-top:1rem;

}

.newsletter input{

    flex:1;

    padding:1rem;

    border:none;

    outline:none;

    background:#111;

    color:#fff;

}

.newsletter button{

    padding:1rem 1.5rem;

    background:var(--clr-primary);

    color:#fff;

}

.footer-bottom{

    margin-top:5rem;

    padding:2rem 0;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

}

.footer-bottom div{

    display:flex;

    gap:2rem;

}

.scroll-top{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border-radius:50%;

background:var(--clr-primary);

color:#fff;

opacity:0;

pointer-events:none;

transition:.3s;

z-index:999;

}

.scroll-top.show{

opacity:1;

pointer-events:auto;

}