/*==========================
Google Fonts
===========================*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

/*==========================
Root
===========================*/

:root{

--bg:#F7F4EF;
--white:#ffffff;
--primary:#B7A48B;
--primary-dark:#9E8A71;
--text:#4A433D;
--light-text:#7E756C;
--border:#E8DED2;

--radius:28px;

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

--transition:.4s ease;

}


/*==========================
Reset
===========================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Montserrat',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
overflow-x:hidden;

}

img{

width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}


/*==========================
Container
===========================*/

.container{

width:min(1280px,92%);
margin:auto;

}


/*==========================
Heading
===========================*/

h1,h2,h3{

font-family:'Cormorant Garamond',serif;
font-weight:500;
letter-spacing:.5px;
color:#403933;

}

h1{

font-size:78px;
line-height:1;

}

h2{

font-size:58px;
line-height:1.1;

}

h3{

font-size:30px;

}

p{

color:var(--light-text);
font-size:15px;

}


/*==========================
Button
===========================*/

.btn{

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

padding:15px 36px;

background:var(--primary);

color:#fff;

border-radius:50px;

font-size:14px;
font-weight:500;

transition:var(--transition);

}

.btn:hover{

background:var(--primary-dark);
transform:translateY(-3px);

}


/*==========================
Header
===========================*/

header{

position:fixed;

top:25px;
left:50%;

transform:translateX(-50%);

width:min(1280px,92%);

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

backdrop-filter:blur(20px);

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

border-radius:50px;

z-index:999;

box-shadow:0 10px 40px rgba(0,0,0,.06);

}


.nav{

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

padding:18px 35px;

}

.logo{

font-family:'Cormorant Garamond',serif;

font-size:32px;

color:var(--text);

}

.logo span{

color:var(--primary);

}

nav ul{

display:flex;
gap:35px;

}

nav a{

font-size:14px;

color:#555;

transition:.3s;

}

nav a:hover{

color:var(--primary);

}


/*==========================
Hero
===========================*/

.hero{

padding:180px 0 120px;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1.1fr;

gap:60px;

align-items:center;

}

.hero-left{

display:flex;

flex-direction:column;

gap:35px;

}

.small-image{

width:250px;

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

}

.main-content p{

margin:30px 0;

max-width:520px;

}

.hero-right{

position:relative;

}

.hero-right img{

height:700px;

object-fit:cover;

border-radius:40px;

box-shadow:var(--shadow);

}


/*==========================
Floating Card
===========================*/

.floating-card{

position:absolute;

bottom:40px;
left:-70px;

width:320px;

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

backdrop-filter:blur(18px);

padding:35px;

border-radius:30px;

box-shadow:var(--shadow);

}

.floating-card h3{

margin-bottom:15px;

}

.floating-card p{

font-size:14px;

}


/*==========================
Section
===========================*/

section{

padding:100px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title p{

margin-top:15px;

}


/*==========================
Hover Animation
===========================*/

img{

transition:.6s;

}

.small-image:hover img,
.hero-right:hover img{

transform:scale(1.05);

}

/*==================================================
STATISTICS SECTION
==================================================*/

.stats{

padding:60px 0 120px;

}

.stats .container{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.stat-card{

background:var(--white);

padding:50px 40px;

border-radius:30px;

text-align:center;

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card h2{

font-size:72px;

font-family:'Cormorant Garamond',serif;

font-weight:600;

color:var(--primary);

margin-bottom:10px;

}

.stat-card p{

font-size:15px;

letter-spacing:.3px;

}




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

.about{

padding:140px 0;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.about-grid img{

height:650px;

object-fit:cover;

border-radius:35px;

box-shadow:var(--shadow);

transition:.5s;

}

.about-grid img:hover{

transform:scale(1.03);

}

.about h2{

margin-bottom:25px;

}

.about p{

font-size:16px;

margin-bottom:40px;

max-width:520px;

}

.about .btn{

margin-top:10px;

}




/*==================================================
PORTFOLIO SECTION
==================================================*/

.portfolio{

padding:130px 0;

}

.portfolio-grid{

display:grid;

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

gap:28px;

}

.portfolio-card{

background:#fff;

border-radius:30px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

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

}

.portfolio-card:hover{

transform:translateY(-12px);

}

.portfolio-card img{

height:360px;

object-fit:cover;

transition:.7s;

}

.portfolio-card:hover img{

transform:scale(1.08);

}

.portfolio-card h3{

padding:25px;

font-size:28px;

text-align:center;

}




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

.portfolio-card{

position:relative;

}

.portfolio-card::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:120px;

background:linear-gradient(
to top,
rgba(0,0,0,.35),
transparent
);

opacity:0;

transition:.4s;

}

.portfolio-card:hover::after{

opacity:1;

}




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

.portfolio-card img,
.about img{

transition:.7s ease;

}

.portfolio-card:hover img,
.about-grid:hover img{

transform:scale(1.06);

}




/*==================================================
SECTION DIVIDER
==================================================*/

.section-title{

position:relative;

padding-bottom:25px;

}

.section-title::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:90px;

height:2px;

background:var(--primary);

border-radius:20px;

}




/*==================================================
CARD ANIMATION
==================================================*/

.stat-card,
.portfolio-card{

opacity:1;

transition:.45s;

}

.stat-card:hover,
.portfolio-card:hover{

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

}




/*==================================================
SOFT BACKGROUND
==================================================*/

.about{

background:#FBF9F5;

}

.portfolio{

background:var(--bg);

}

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

.services{
    padding:120px 0;
    background:#FBF8F4;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.service{
    background:#fff;
    border:1px solid var(--border);
    border-radius:30px;
    padding:45px 35px;
    transition:var(--transition);
    box-shadow:0 15px 45px rgba(0,0,0,.05);
}

.service:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.service h3{
    margin-bottom:18px;
    font-size:32px;
}

.service p{
    font-size:15px;
    line-height:1.8;
}

.service::before{
    content:"";
    width:55px;
    height:3px;
    background:var(--primary);
    display:block;
    margin-bottom:22px;
    border-radius:10px;
}


/*==========================================
PROCESS
==========================================*/

.process{
    padding:130px 0;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.process-grid div{
    position:relative;
    background:#fff;
    border-radius:30px;
    padding:45px;
    border:1px solid var(--border);
    text-align:center;
    transition:.4s;
}

.process-grid div:hover{
    transform:translateY(-10px);
}

.process-grid span{
    display:inline-flex;
    width:80px;
    height:80px;
    border-radius:50%;
    justify-content:center;
    align-items:center;
    background:var(--primary);
    color:#fff;
    font-size:28px;
    font-family:'Cormorant Garamond',serif;
    margin-bottom:25px;
}

.process-grid h3{
    font-size:30px;
}


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

.contact{
    padding:60px;
}

.contact .container{
    background:#fff;
    border-radius:40px;
    padding:50px;
    text-align:center;
    border:1px solid var(--border);
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.contact h2{
    font-size:64px;
    margin-bottom:25px;
}

.contact p{
    max-width:650px;
    margin:auto;
    margin-bottom:40px;
    font-size:17px;
}

.contact .btn{
    padding:18px 45px;
}


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

footer{
    padding:35px 0;
    border-top:1px solid var(--border);
    background:#F4F0EA;
}

footer .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

footer p{
    font-size:14px;
}

.footer-links{
    display:flex;
    gap:25px;
}

.footer-links a{
    color:var(--text);
    font-size:14px;
    transition:.3s;
}

.footer-links a:hover{
    color:var(--primary);
}


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

.btn,
.service,
.stat-card,
.process-grid div,
.portfolio-card,
.about img{
    transition:all .4s ease;
}


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

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:10px;
}

::-webkit-scrollbar-track{
    background:#EFE8DF;
}

/*==========================================
LUXURY ANIMATIONS
==========================================*/

@keyframes fadeUp{

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

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes zoomIn{

0%{
opacity:0;
transform:scale(.9);
}

100%{
opacity:1;
transform:scale(1);
}

}

.hero-left{
animation:fadeUp 1s ease;
}

.hero-right{
animation:zoomIn 1.2s ease;
}

.stat-card,
.service,
.portfolio-card,
.process-grid div{

animation:fadeUp .8s ease both;

}


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

.hero-right img,
.about img,
.portfolio-card img{

aspect-ratio:4/5;

object-fit:cover;

}

.small-image img{

aspect-ratio:1;

object-fit:cover;

}


/*==========================================
TABLET
==========================================*/

@media(max-width:1200px){

.hero-grid,
.about-grid{

grid-template-columns:1fr;

}

.hero-right{

margin-top:40px;

}

.floating-card{

left:20px;
bottom:20px;

}

.service-grid{

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

}

.portfolio-grid{

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

}

.process-grid{

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

}

.stats .container{

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

}

h1{

font-size:62px;

}

h2{

font-size:50px;

}

}



/*==========================================
992px
==========================================*/

@media(max-width:992px){

header{

top: 8px;

width: 96%;

}

.nav{

/* padding:10px 15px; */
padding: 2px 4px;
}

nav ul{

gap:18px;

}

.hero{

padding-top:150px;

}

.hero-right img{

height:550px;

}

.contact .container{

padding:60px;

}

.contact h2{

font-size:50px;

}

}



/*==========================================
768px
==========================================*/

@media(max-width:768px){

.nav{

flex-wrap:wrap;

gap:2px;

justify-content:center;

}

nav{

width:100%;

}

nav ul{

justify-content:center;

flex-wrap:wrap;

}

.hero{

padding-top:170px;

}

.hero-grid{

gap:50px;

}

.hero-left{

text-align:center;

align-items:center;

}

.main-content p{

margin:auto;
margin-top:20px;
margin-bottom:30px;

}

.hero-right img{

height:450px;

}

.small-image{

width:200px;

}

.floating-card{

position:relative;

left:auto;
bottom:auto;

width:100%;

margin-top:20px;

}

.about-grid{

gap:50px;

}

.about{

text-align:center;

}

.about p{

margin:auto;

margin-top:20px;
margin-bottom:30px;

}

.stats .container{

grid-template-columns:1fr;

}

.service-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr;

}

footer .container{

flex-direction:column;

gap:20px;

text-align:center;

}

}



/*==========================================
576px
==========================================*/

@media(max-width:576px){

.container{

width:92%;

}

header{

border-radius:25px;

}

.logo{

font-size:26px;

}

nav ul{

gap:15px;

}

nav a{

font-size:13px;

}

.btn{

padding:14px 28px;

font-size:13px;

}

h1{

font-size:44px;

}

h2{

font-size:38px;

}

h3{

font-size:26px;

}

.hero{

padding-top:135px;

}

.hero-right img{

height:360px;

border-radius:25px;

}

.small-image{

width:200px;
 border-radius: 50%;
 object-fit: cover;
}



.about img{

height:420px;

}

.portfolio-card img{

height:280px;

}

.contact .container{

padding:40px 25px;

}

.contact h2{

font-size:40px;

}

.contact p{

font-size:15px;

}

.section-title{

margin-bottom:45px;

}

section{

padding:70px 0;

}

}



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

.service:hover,
.stat-card:hover,
.process-grid div:hover,
.portfolio-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(0,0,0,.10);

}



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

::selection{

background:var(--primary);

color:#fff;

}



/*==========================================
FOCUS
==========================================*/

input:focus,
textarea:focus,
button:focus{

outline:none;

}



/*==========================================
END
==========================================*/

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

.product-hero{

padding:180px 0 120px;

background:#F7F4EF;

}

.breadcrumb{

display:flex;
gap:12px;

font-size:14px;

margin-bottom:50px;

color:#8B837B;

}

.breadcrumb a{

color:#8B837B;

}

.product-hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}

.subtitle{

display:inline-block;

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

color:#A68B6A;

margin-bottom:25px;

}

.hero-content h1{

font-size:78px;

line-height:1;

margin-bottom:30px;

}

.hero-content p{

max-width:520px;

font-size:16px;

line-height:1.9;

margin-bottom:40px;

}

.hero-image{

overflow:hidden;

border-radius:40px;

box-shadow:0 30px 80px rgba(0,0,0,.08);

}

.hero-image img{

height:700px;

width:100%;

object-fit:cover;

transition:.6s;

}

.hero-image:hover img{

transform:scale(1.08);

}


/*=========================================
CATEGORY
=========================================*/

.product-category{

padding:1px 0;

}

.category-grid{

display:grid;

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

gap:25px;

margin-top:70px;

}

.category-card{

background:#fff;

border-radius:30px;

padding:35px 20px;

text-align:center;

border:1px solid #ECE5DA;

transition:.4s;

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

}

.category-card img{

width:100%;

height:auto;

object-fit:contain;

margin:auto;

margin-bottom:20px;

}

.category-card h3{

font-size:22px;

font-weight:500;

}

.category-card:hover{

transform:translateY(-8px);

background:#B7A48B;

color:#fff;

}

.category-card:hover h3{

color:#fff;

}

.category-card.active{

background:#B7A48B;

}

.category-card.active h3{

color:#fff;

}


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

.products{

padding:130px 0;

background:#FBF9F6;

}

.product-grid{

display:grid;

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

gap:35px;

margin-top:80px;

}

.product-card{

background:#fff;

border-radius:32px;

overflow:hidden;

border:1px solid #E9E1D6;

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

transition:.45s;

}

.product-card:hover{

transform:translateY(-10px);

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

}

.product-image{

overflow:hidden;

}

.product-image img{

width:100%;

height:340px;

object-fit:cover;

transition:.7s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-content{

padding:30px;

}

.product-category{

display:inline-block;

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#A79074;

margin-bottom:15px;

}

.product-content h3{

font-size:34px;

margin-bottom:15px;

line-height:1.2;

}

.product-content p{

font-size:15px;

line-height:1.8;

margin-bottom:30px;

color:#777;

}

.product-btn{

display:inline-flex;

align-items:center;

gap:12px;

font-size:14px;

font-weight:600;

color:#B59A77;

transition:.3s;

}

.product-btn::after{

content:"→";

transition:.3s;

}

.product-btn:hover{

letter-spacing:.8px;

}

.product-btn:hover::after{

transform:translateX(8px);

}


/*=========================================
IMAGE OVERLAY
=========================================*/

.product-image{

position:relative;

}

.product-image::after{

content:"";

position:absolute;

left:0;
right:0;
bottom:0;

height:120px;

background:linear-gradient(
to top,
rgba(0,0,0,.28),
transparent);

opacity:0;

transition:.4s;

}

.product-card:hover .product-image::after{

opacity:1;

}


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

@media(max-width:1200px){

.product-grid{

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

}

.category-grid{

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

}

}

@media(max-width:992px){

.product-hero-grid{

grid-template-columns:1fr;

}

.hero-image img{

height:500px;

}

.product-grid{

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

}

}

@media(max-width:768px){

.category-grid{

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

}

.product-grid{

grid-template-columns:1fr;

}

.hero-content{

text-align:center;

}

.hero-content p{

margin:auto;

margin-bottom:35px;

}

.hero-content h1{

font-size:55px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:42px;

}

.category-card{

padding:25px 15px;

}

.product-content{

padding:22px;

}

.product-content h3{

font-size:28px;

}

.hero-image img{

height:360px;

}

}

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

.contact-hero{
    padding:180px 0 120px;
    background:#F8F5F0;
    position:relative;
    overflow:hidden;
}

.contact-hero::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-120px;
    width:420px;
    height:420px;
    background:#EEE6DA;
    border-radius:50%;
}

.contact-hero::after{
    content:"";
    position:absolute;
    bottom:-120px;
    left:-100px;
    width:300px;
    height:300px;
    background:#F1EBE2;
    border-radius:50%;
}

.contact-hero .container{
    position:relative;
    z-index:2;
}

.breadcrumb{
    margin-bottom:60px;
    font-size:14px;
    color:#8A8178;
}

.breadcrumb a{
    color:#8A8178;
    text-decoration:none;
}

.breadcrumb span{
    margin:0 10px;
}

.contact-hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.hero-content .subtitle{
    display:inline-block;
    letter-spacing:4px;
    color:#B08B5A;
    font-size:13px;
    margin-bottom:20px;
}

.hero-content h1{
    font-family:'Cormorant Garamond',serif;
    font-size:72px;
    line-height:1.05;
    color:#2C241F;
    margin-bottom:25px;
}

.hero-content p{
    font-size:17px;
    line-height:1.9;
    color:#68615B;
    margin-bottom:35px;
    max-width:560px;
}

.hero-image img{
    width:100%;
    height:720px;
    object-fit:cover;
    border-radius:35px;
    box-shadow:0 30px 70px rgba(0,0,0,.08);
    transition:.5s;
}

.hero-image img:hover{
    transform:scale(1.03);
}



/*======================================
CONTACT INFO
======================================*/

.contact-info{
    padding:120px 0;
    background:#fff;
}

.section-title{
    text-align:center;
    max-width:760px;
    margin:auto;
}

.section-title .subtitle{
    display:inline-block;
    letter-spacing:4px;
    color:#B08B5A;
    font-size:13px;
    margin-bottom:18px;
}

.section-title h2{
    font-family:'Cormorant Garamond',serif;
    font-size:58px;
    color:#2C241F;
    margin-bottom:20px;
}

.section-title p{
    font-size:17px;
    color:#68615B;
    line-height:1.8;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:70px;
}

.contact-card{
    background:#FDFBF8;
    border:1px solid #EEE5D9;
    padding:45px 30px;
    border-radius:28px;
    text-align:center;
    transition:.4s;
}

.contact-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.contact-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:25px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.contact-icon img{
    width:38px;
}

.contact-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:32px;
    margin-bottom:18px;
    color:#2C241F;
}

.contact-card p{
    line-height:1.9;
    color:#68615B;
    font-size:15px;
}

/*======================================
CONTACT FORM
======================================*/

.contact-section{
    padding:130px 0;
    background:#FBF8F3;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.contact-left .subtitle{
    display:inline-block;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:13px;
    color:#B08B5A;
    margin-bottom:18px;
}

.contact-left h2{
    font-family:'Cormorant Garamond',serif;
    font-size:60px;
    line-height:1.08;
    color:#2C241F;
    margin-bottom:25px;
}

.contact-left p{
    font-size:17px;
    line-height:1.9;
    color:#68615B;
    margin-bottom:35px;
}

.contact-feature{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:15px;
    font-size:16px;
    color:#4F4742;
}

.feature-item img{
    width:22px;
    height:22px;
}



/*======================================
FORM
======================================*/

.contact-right{
    background:#fff;
    padding:50px;
    border-radius:30px;
    box-shadow:0 25px 60px rgba(0,0,0,.06);
}

.contact-right form{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.input-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.contact-right input,
.contact-right textarea{

    width:100%;
    padding:18px 22px;
    border:1px solid #E6DDD2;
    border-radius:16px;
    background:#fff;
    font-size:15px;
    font-family:'Montserrat',sans-serif;
    transition:.35s;
    outline:none;

}

.contact-right textarea{
    resize:none;
}

.contact-right input:focus,
.contact-right textarea:focus{

    border-color:#B79B78;
    box-shadow:0 0 0 4px rgba(183,155,120,.12);

}

.contact-right .btn{

    width:220px;
    padding:18px;
    border:none;
    border-radius:50px;
    background:#B79B78;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.35s;

}

.contact-right .btn:hover{

    background:#9E8463;
    transform:translateY(-3px);

}



/*======================================
STUDIO SECTION
======================================*/

.studio-section{

    padding:130px 0;
    background:#fff;

}

.studio-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;

}

.studio-image{

    position:relative;

}

.studio-image img{

    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:35px;
    display:block;
    box-shadow:0 30px 70px rgba(0,0,0,.08);
    transition:.5s;

}

.studio-image img:hover{

    transform:scale(1.03);

}

.studio-image::before{

    content:"";
    position:absolute;
    top:-20px;
    left:-20px;
    width:180px;
    height:180px;
    border:2px solid #D8C5A8;
    border-radius:28px;
    z-index:-1;

}

.studio-image::after{

    content:"";
    position:absolute;
    bottom:-20px;
    right:-20px;
    width:140px;
    height:140px;
    background:#EFE5D8;
    border-radius:28px;
    z-index:-1;

}

.studio-content .subtitle{

    display:inline-block;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:13px;
    color:#B08B5A;
    margin-bottom:18px;

}

.studio-content h2{

    font-family:'Cormorant Garamond',serif;
    font-size:58px;
    line-height:1.1;
    color:#2C241F;
    margin-bottom:25px;

}

.studio-content p{

    font-size:17px;
    line-height:1.9;
    color:#68615B;
    margin-bottom:35px;

}

.studio-content .btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 40px;
    border-radius:50px;
    background:#B79B78;
    color:#fff;
    text-decoration:none;
    transition:.35s;

}

.studio-content .btn:hover{

    background:#9E8463;
    transform:translateY(-3px);

}

/*======================================
WORKING HOURS
======================================*/

.working-hours{
    padding:120px 0;
    background:#FBF8F3;
}

.working-hours .container{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.hours-card{
    background:#FFFFFF;
    border:1px solid #ECE3D8;
    border-radius:25px;
    padding:35px 45px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:.35s ease;
    box-shadow:0 15px 40px rgba(0,0,0,.04);
}

.hours-card:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 55px rgba(0,0,0,.08);
}

.hours-card h2{
    font-family:'Cormorant Garamond',serif;
    font-size:34px;
    color:#2C241F;
    margin-bottom:8px;
}

.hours-card p{
    font-size:15px;
    color:#7A726A;
}

.hours-card span{
    font-size:18px;
    font-weight:600;
    color:#B08B5A;
}



/*======================================
GOOGLE MAP
======================================*/

.map-section{
    padding:130px 0;
    background:#FFFFFF;
}

.map-box{
    margin-top:60px;
    border-radius:35px;
    overflow:hidden;
    box-shadow:0 25px 70px rgba(0,0,0,.08);
}

.map-box iframe{
    width:100%;
    height:520px;
    border:0;
    display:block;
}



/*======================================
FAQ
======================================*/

.faq-section{
    padding:130px 0;
    background:#F8F5F0;
}

.faq-wrapper{
    max-width:950px;
    margin:70px auto 0;
}

.faq-item{
    background:#FFFFFF;
    border:1px solid #ECE3D8;
    border-radius:24px;
    padding:35px 40px;
    margin-bottom:25px;
    transition:.35s;
    box-shadow:0 12px 35px rgba(0,0,0,.04);
}

.faq-item:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 50px rgba(0,0,0,.08);
}

.faq-item h3{
    font-family:'Cormorant Garamond',serif;
    font-size:32px;
    color:#2C241F;
    margin-bottom:18px;
}

.faq-item p{
    font-size:16px;
    line-height:1.9;
    color:#6E6862;
}



/*======================================
FAQ ICON
======================================*/

.faq-item{
    position:relative;
    padding-right:90px;
}

.faq-item::after{
    content:"+";
    position:absolute;
    right:35px;
    top:35px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#F5EEE5;
    color:#B08B5A;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:300;
    transition:.35s;
}

.faq-item:hover::after{
    background:#B08B5A;
    color:#FFFFFF;
}
/*======================================
CONTACT CTA
======================================*/

.contact-cta{
    padding:130px 0;
    background:#FFFFFF;
}

.cta-box{
    background:linear-gradient(135deg,#B79B78,#A98A67);
    border-radius:40px;
    padding:90px 80px;
    text-align:center;
    color:#FFFFFF;
    overflow:hidden;
    position:relative;
}

.cta-box::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.cta-box::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    right:-80px;
    bottom:-80px;
}

.cta-box span{
    display:block;
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:13px;
    margin-bottom:20px;
}

.cta-box h2{
    font-family:'Cormorant Garamond',serif;
    font-size:62px;
    line-height:1.1;
    margin-bottom:25px;
}

.cta-box p{
    max-width:720px;
    margin:0 auto 40px;
    font-size:17px;
    line-height:1.9;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.cta-buttons .btn{
    padding:18px 42px;
    border-radius:50px;
    background:#FFFFFF;
    color:#2C241F;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.cta-buttons .btn:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.cta-buttons .btn-outline{
    background:transparent;
    border:2px solid rgba(255,255,255,.6);
    color:#FFFFFF;
}

.cta-buttons .btn-outline:hover{
    background:#FFFFFF;
    color:#2C241F;
}



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

footer{
    background:#2C241F;
    color:#FFFFFF;
    padding:35px 0;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.footer-bottom p{
    margin:0;
    font-size:15px;
    color:rgba(255,255,255,.75);
}



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

.contact-card,
.hours-card,
.faq-item,
.cta-box,
.hero-image img,
.studio-image img{
    transition:all .4s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.contact-hero,
.contact-info,
.contact-section,
.studio-section,
.working-hours,
.map-section,
.faq-section,
.contact-cta{

    animation:fadeUp .8s ease both;

}



/*======================================
TABLET
======================================*/

@media(max-width:991px){

.contact-hero-grid,
.contact-wrapper,
.studio-grid{

grid-template-columns:1fr;
gap:50px;

}

.contact-grid{

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

}

.hero-content h1{

font-size:56px;

}

.section-title h2,
.contact-left h2,
.studio-content h2,
.cta-box h2{

font-size:48px;

}

.hero-image img,
.studio-image img{

height:550px;

}

.hours-card{

flex-direction:column;
align-items:flex-start;
gap:15px;

}

.footer-bottom{

justify-content:center;
text-align:center;

}

}



/*======================================
MOBILE
======================================*/

@media(max-width:767px){

.contact-hero{

padding:140px 0 90px;

}

.hero-content h1{

font-size:42px;

}

.section-title h2,
.contact-left h2,
.studio-content h2,
.cta-box h2{

font-size:36px;

}

.contact-grid{

grid-template-columns:1fr;

}

.input-group{

grid-template-columns:1fr;

}

.contact-right{

padding:35px 25px;

}

.hero-image img,
.studio-image img{

height:420px;

}

.cta-box{

padding:60px 30px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons .btn{

width:100%;
text-align:center;

}

.hours-card{

padding:30px;

}

.faq-item{

padding:30px 25px;
padding-right:70px;

}

.faq-item::after{

right:20px;
top:25px;

}

.map-box iframe{

height:350px;

}

.footer-bottom{

flex-direction:column;

}

}



/*======================================
SMALL MOBILE
======================================*/

@media(max-width:480px){

.hero-content h1{

font-size:34px;

}

.section-title h2{

font-size:32px;

}

.contact-card{

padding:35px 25px;

}

.contact-icon{

width:70px;
height:70px;

}

.contact-icon img{

width:32px;

}

.contact-card h3{

font-size:28px;

}

.cta-box h2{

font-size:30px;

}

}

/* Footer */

footer{
    background:#1d1d1d;
    color:#fff;
    padding:70px 0 20px;
}

.footer-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.footer-box h3{
    font-size:22px;
    margin-bottom:20px;
    font-family:'Cormorant Garamond', serif;
    color:#d9b46b;
}

.footer-box p{
    color:#d7d7d7;
    line-height:1.8;
    margin-bottom:12px;
    font-size:15px;
}

.footer-menu{
    list-style:none;
    padding:0;
}

.footer-menu li{
    margin-bottom:12px;
}

.footer-menu a,
.footer-social a{
    color:#d7d7d7;
    text-decoration:none;
    transition:.3s;
}

.footer-menu a:hover,
.footer-social a:hover{
    color:#d9b46b;
}

.footer-social{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-bottom{
    margin-top:50px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
}

.footer-bottom p{
    color:#bbb;
    font-size:14px;
}

/* Responsive */

@media(max-width:992px){

.footer-container{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.footer-container{
grid-template-columns:1fr;
text-align:center;
}

.footer-social{
align-items:center;
}

}

.footer-brand{
    font-family:'Cormorant Garamond', serif;
    font-size:20px;
    font-weight:600;
    color:#d9b46b;
    text-decoration:none;
    transition:.3s;
}

.footer-brand:hover{
    color:#ffffff;
}


.portfolio .section-title::after{
    bottom:15px;
}

/* Space between underline and cards */
.portfolio-grid,
.service-grid,
.process-grid{
    margin-top:20px;
}

.contact-cta .cta-box p{
    color:#ffffff !important;
}