/* ======================================================
   SAVEURS BY RAPHAËL
   PREMIUM DESIGN
======================================================*/

:root{

--orange:#c88b2b;
--orange2:#e3b45d;

--black:#070707;
--black2:#101010;
--black3:#171717;

--white:#ffffff;
--text:#d7d7d7;

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

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

--radius:26px;

--transition:.35s ease;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:Poppins,sans-serif;

background:var(--black);

color:white;

overflow-x:hidden;

line-height:1.7;

}

img{

display:block;

width:100%;

}

a{

color:inherit;

text-decoration:none;

}

.container{

width:min(1280px,92%);

margin:auto;

}

.section{

padding:120px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

letter-spacing:4px;

font-size:.8rem;

color:var(--orange2);

text-transform:uppercase;

margin-bottom:12px;

}

.section-title h2{

font-family:"Playfair Display",serif;

font-size:clamp(2.4rem,5vw,4rem);

font-weight:700;

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(7,7,7,.78);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

transition:.4s;

}

.nav-container{

height:92px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:74px;

width:auto;

object-fit:contain;

}

.nav{

display:flex;

gap:42px;

}

.nav a{

position:relative;

font-size:.9rem;

font-weight:500;

letter-spacing:1px;

text-transform:uppercase;

transition:.3s;

}

.nav a:hover{

color:var(--orange2);

}

.nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--orange2);

transition:.35s;

}

.nav a:hover::after{

width:100%;

}

.btn-header{

padding:14px 30px;

border-radius:50px;

background:linear-gradient(135deg,var(--orange),var(--orange2));

font-size:.85rem;

font-weight:700;

color:#111;

transition:.35s;

}

.btn-header:hover{

transform:translateY(-4px);

box-shadow:0 20px 35px rgba(200,139,43,.3);

}

.menu-toggle{

display:none;

cursor:pointer;

}

.menu-toggle span{

display:block;

width:28px;

height:3px;

background:white;

margin:5px;

border-radius:20px;

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

background:
radial-gradient(circle at right,
rgba(200,139,43,.18),
transparent 45%),
#070707;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.88),
rgba(0,0,0,.55),
transparent);

z-index:1;

}

.hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

padding-top:90px;

}

.subtitle{

display:inline-block;

padding:8px 18px;

border:1px solid rgba(200,139,43,.35);

border-radius:40px;

color:var(--orange2);

letter-spacing:2px;

font-size:.8rem;

margin-bottom:28px;

}

.hero h1{

font-family:"Playfair Display",serif;

font-size:clamp(4rem,8vw,7rem);

line-height:.95;

margin-bottom:30px;

}

.hero h1 span{

color:var(--orange2);

font-style:italic;

font-weight:500;

}

.hero p{

max-width:560px;

color:#cfcfcf;

font-size:1.08rem;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:50px;

background:linear-gradient(135deg,var(--orange),var(--orange2));

color:#111;

font-weight:700;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(200,139,43,.35);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:50px;

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

transition:.35s;

}

.btn-secondary:hover{

background:white;

color:black;

}

.hero-image{

position:relative;

}

.hero-image img{

height:760px;

object-fit:cover;

border-radius:40px;

box-shadow:var(--shadow);

}

.hero-card{

position:absolute;

left:-50px;

bottom:40px;

width:280px;

background:rgba(18,18,18,.95);

backdrop-filter:blur(16px);

padding:28px;

border-radius:24px;

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

box-shadow:var(--shadow);

}

.hero-card h3{

font-family:"Playfair Display",serif;

font-size:1.6rem;

margin-bottom:12px;

}

.hero-card p{

margin:0;

font-size:.95rem;

color:#bfbfbf;

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

.about{

background:#0d0d0d;

position:relative;

}

.about::before{

content:"";

position:absolute;

top:0;

left:50%;

transform:translateX(-50%);

width:320px;

height:320px;

background:radial-gradient(circle,
rgba(200,139,43,.18),
transparent 70%);

filter:blur(70px);

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:2;

}

.about-images{

display:grid;

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

gap:22px;

}

.about-images img{

height:260px;

object-fit:cover;

border-radius:22px;

transition:.45s;

box-shadow:var(--shadow);

}

.about-images img:nth-child(even){

margin-top:40px;

}

.about-images img:hover{

transform:translateY(-10px) scale(1.03);

}

.about-text h3{

font-family:"Playfair Display",serif;

font-size:3rem;

line-height:1.1;

margin-bottom:28px;

}

.about-text p{

color:#bdbdbd;

margin-bottom:24px;

font-size:1.05rem;

}

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

.services{

background:#080808;

}

.cards{

display:grid;

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

gap:34px;

}

.card{

background:#121212;

border-radius:28px;

overflow:hidden;

transition:.45s;

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

box-shadow:var(--shadow);

}

.card:hover{

transform:translateY(-12px);

border-color:rgba(200,139,43,.35);

}

.card img{

height:290px;

object-fit:cover;

transition:.6s;

}

.card:hover img{

transform:scale(1.08);

}

.card-content{

padding:34px;

}

.card-content span{

display:inline-block;

color:var(--orange2);

font-size:.8rem;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:12px;

}

.card-content h3{

font-family:"Playfair Display",serif;

font-size:2rem;

margin-bottom:18px;

}

.card-content p{

color:#bfbfbf;

margin-bottom:26px;

}

.card-content a{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:600;

color:var(--orange2);

transition:.3s;

}

.card-content a:hover{

transform:translateX(8px);

}

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

.gallery{

background:#0f0f0f;

}

.gallery-grid{

display:grid;

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

gap:20px;

}

.gallery-grid img{

width:100%;

height:280px;

object-fit:cover;

border-radius:22px;

transition:.45s;

cursor:pointer;

box-shadow:var(--shadow);

}

.gallery-grid img:hover{

transform:scale(1.05);

filter:brightness(1.08);

}

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

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

grid-row:span 2;

height:580px;

}

/*================ QUOTE =================*/

.quote{

padding:140px 0;

background:

linear-gradient(rgba(0,0,0,.82),

rgba(0,0,0,.82)),

url("images/811FB510-BF1A-48FF-903A-D4C22A955559.jpg");

background-size:cover;

background-position:center;

text-align:center;

}

.quote h2{

font-family:"Playfair Display",serif;

font-size:clamp(2.4rem,5vw,4.8rem);

max-width:900px;

margin:auto;

line-height:1.15;

margin-bottom:28px;

}

.quote p{

color:#d0d0d0;

font-size:1.1rem;

max-width:650px;

margin:auto;

}
/*================ CONTACT =================*/

.contact{

background:#070707;

position:relative;

overflow:hidden;

}

.contact::before{

content:"";

position:absolute;

right:-180px;

top:-180px;

width:520px;

height:520px;

border-radius:50%;

background:radial-gradient(circle,
rgba(200,139,43,.12),
transparent 70%);

filter:blur(60px);

}

.contact-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:70px;

align-items:start;

}

.contact-info span{

display:inline-block;

color:var(--orange2);

letter-spacing:3px;

margin-bottom:14px;

text-transform:uppercase;

}

.contact-info h2{

font-family:"Playfair Display",serif;

font-size:clamp(2.8rem,5vw,4.2rem);

line-height:1.1;

margin-bottom:25px;

}

.contact-info p{

color:#bfbfbf;

font-size:1.05rem;

max-width:520px;

}

.contact-form{

background:#121212;

padding:45px;

border-radius:28px;

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

box-shadow:var(--shadow);

}

.contact-form form{

display:grid;

gap:18px;

}

.contact-form input,
.contact-form textarea,
.contact-form select{

width:100%;

padding:18px 20px;

border-radius:14px;

background:#1b1b1b;

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

color:#fff;

font-size:1rem;

font-family:Poppins,sans-serif;

transition:.3s;

outline:none;

}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

border-color:var(--orange2);

box-shadow:0 0 0 3px rgba(200,139,43,.15);

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

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

.footer{

background:#050505;

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

padding:80px 0 25px;

}

.footer-content{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

margin-bottom:45px;

}

.footer-logo img{

width:160px;

margin-bottom:20px;

}

.footer-logo h3{

font-family:"Playfair Display",serif;

font-size:2rem;

margin-bottom:12px;

}

.footer-logo p{

color:#a9a9a9;

}

.footer-links,
.footer-contact{

display:flex;

flex-direction:column;

gap:12px;

}

.footer-links h4,
.footer-contact h4{

margin-bottom:18px;

font-size:1.1rem;

color:var(--orange2);

}

.footer-links a{

transition:.3s;

}

.footer-links a:hover{

color:var(--orange2);

padding-left:8px;

}

.footer-contact p{

color:#bcbcbc;

}

.copyright{

padding-top:25px;

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

text-align:center;

color:#888;

font-size:.9rem;

}

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

@media(max-width:1100px){

.hero-grid,
.about-grid,
.contact-grid{

grid-template-columns:1fr;

}

.hero-image{

order:-1;

}

.cards{

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

}

.gallery-grid{

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

}

.gallery-grid img:nth-child(3),
.gallery-grid img:nth-child(6){

grid-row:auto;

height:280px;

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo img{

margin:auto auto 20px;

}

}

@media(max-width:768px){

.section{

padding:80px 0;

}

.nav{

display:none;

}

.menu-toggle{

display:block;

}

.hero{

padding-top:110px;

min-height:auto;

}

.hero h1{

font-size:3.2rem;

}

.hero-image img{

height:420px;

}

.hero-card{

position:relative;

left:auto;

bottom:auto;

margin-top:20px;

width:100%;

}

.cards{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:260px;

}

.contact-form{

padding:28px;

}

.btn-header{

display:none;

}

}
/*=====================================================
  ANIMATIONS
======================================================*/

.fade-up{

opacity:0;

transform:translateY(60px);

transition:1s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-60px);

transition:1s ease;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}

.fade-right{

opacity:0;

transform:translateX(60px);

transition:1s ease;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}

.zoom{

opacity:0;

transform:scale(.9);

transition:1s ease;

}

.zoom.show{

opacity:1;

transform:scale(1);

}

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

.header.scrolled{

background:rgba(5,5,5,.96);

box-shadow:0 15px 40px rgba(0,0,0,.45);

border-bottom:1px solid rgba(200,139,43,.15);

}

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

.hero-image{

overflow:hidden;

border-radius:40px;

}

.hero-image img{

transition:1.2s ease;

}

.hero-image:hover img{

transform:scale(1.05);

}

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

.card{

position:relative;

}

.card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
180deg,
transparent,
rgba(200,139,43,.05));

opacity:0;

transition:.45s;

pointer-events:none;

}

.card:hover::before{

opacity:1;

}

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

.gallery-grid img{

filter:brightness(.95);

}

.gallery-grid img:hover{

filter:brightness(1.08) saturate(1.1);

}

/*================ BUTTON EFFECT =================*/

.btn-primary,
.btn-header{

position:relative;

overflow:hidden;

}

.btn-primary::after,
.btn-header::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.8s;

}

.btn-primary:hover::after,
.btn-header:hover::after{

left:120%;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090909;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--orange),
var(--orange2));

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#f2c06b;

}

/*================ SELECTION =================*/

::selection{

background:var(--orange);

color:#000;

}

/*================ SMOOTH EFFECTS =================*/

section{

position:relative;

overflow:hidden;

}

.card,
.gallery-grid img,
.about-images img,
.hero-card,
.contact-form{

will-change:transform;

}

.social-contact{
    margin-top:30px;
}

.social-contact a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    background:#1877F2;
    color:#fff;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
}

.social-contact a:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(24,119,242,.35);
}
/*================ END =================*/