/*======================
GOOGLE FONTS
======================*/

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

/*======================
CSS VARIABLES
======================*/

:root{

--bg:#060606;
--bg-light:#101010;
--card:#171717;

--gold:#C6A15B;
--gold-light:#E6C98A;

--white:#ffffff;
--gray:#cfcfcf;
--gray-dark:#8f8f8f;

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

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

}

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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:var(--bg);

color:var(--white);

overflow-x:hidden;

line-height:1.7;

}

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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:20px;

}

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

::selection{

background:var(--gold);

color:black;

}

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

section{

padding:120px 8%;

}

.container{

max-width:1280px;

margin:auto;

}

h1,h2,h3{

font-family:'Cormorant Garamond',serif;

font-weight:600;

letter-spacing:1px;

}

p{

color:var(--gray);

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 8%;

display:flex;

justify-content:space-between;

align-items:center;

z-index:9999;

transition:.4s;

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

backdrop-filter:blur(15px);

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

}

/* Sticky Header */

header.sticky{

background:#080808;

padding:16px 8%;

box-shadow:var(--shadow);

}

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

.logo{

font-size:34px;

font-family:'Cormorant Garamond',serif;

font-weight:700;

letter-spacing:3px;

color:white;

cursor:pointer;

transition:.3s;

}

.logo:hover{

color:var(--gold);

}

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

nav ul{

display:flex;

list-style:none;

gap:45px;

}

nav ul li{

position:relative;

}

nav ul li a{

color:white;

font-size:15px;

font-weight:500;

transition:.35s;

letter-spacing:.5px;

}

nav ul li a:hover{

color:var(--gold);

}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}

nav ul li a:hover::after{

width:100%;

}

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

.menu-btn{

display:none;

font-size:28px;

color:white;

cursor:pointer;

}

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

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

overflow:hidden;

background:

linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.72)),

url("images/hero.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

}

/* Gold Glow */

.hero::before{

content:"";

position:absolute;

width:600px;

height:600px;

background:radial-gradient(circle,
rgba(198,161,91,.18),
transparent 70%);

filter:blur(40px);

top:-120px;

right:-180px;

}

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

.hero-content{

position:relative;

z-index:5;

max-width:950px;

padding:20px;

}

.hero h1{

font-size:92px;

line-height:1;

letter-spacing:4px;

margin-bottom:25px;

}

.hero p{

font-size:18px;

letter-spacing:2px;

color:var(--gold-light);

margin-bottom:45px;

text-transform:uppercase;

}

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

.btn{

display:inline-block;

padding:16px 42px;

border:2px solid var(--gold);

color:var(--gold);

font-size:15px;

font-weight:500;
letter-spacing:1px;

transition:.35s;

position:relative;

overflow:hidden;

}

.btn:hover{

background:var(--gold);

color:black;

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(198,161,91,.35);

}
/*====================================================
PART 2
ABOUT + SERVICES
====================================================*/

/*======================
SECTION TITLES
======================*/

section h2{

font-size:58px;

text-align:center;

margin-bottom:20px;

color:var(--white);

position:relative;

}

section h2::after{

content:"";

width:80px;

height:3px;

background:var(--gold);

display:block;

margin:20px auto 0;

border-radius:10px;

}

.section-text{

max-width:760px;

margin:0 auto 70px;

text-align:center;

font-size:17px;

line-height:1.9;

color:var(--gray);

}

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

.about{

background:#0a0a0a;

position:relative;

overflow:hidden;

}

.about::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:radial-gradient(circle,
rgba(198,161,91,.08),
transparent 70%);

left:-220px;

bottom:-220px;

filter:blur(50px);

}

.about .container{

position:relative;

z-index:2;

}

.about p{

max-width:900px;

margin:auto;

text-align:center;

font-size:18px;

line-height:2;

color:var(--gray);

}

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

.services{

background:var(--bg);

position:relative;

overflow:hidden;

}

.services::before{

content:"";

position:absolute;

top:-250px;

right:-180px;

width:550px;

height:550px;

background:radial-gradient(circle,
rgba(198,161,91,.08),
transparent 70%);

filter:blur(60px);

}

.service-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

margin-top:60px;

}

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

.card{

display:flex;

flex-direction:column;

background:linear-gradient(
180deg,
rgba(28,28,28,.95),
rgba(14,14,14,.98)
);

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

border-radius:18px;

padding:40px;

min-height:320px;

text-decoration:none;

transition:.45s;

cursor:pointer;

position:relative;

overflow:hidden;

box-shadow:var(--shadow);

}

/* Gold Border Animation */

.card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:3px;

background:linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);

transition:.7s;

}

.card:hover::before{

left:100%;

}

.card:hover{

transform:translateY(-12px);

border-color:rgba(198,161,91,.35);

box-shadow:
0 15px 45px rgba(0,0,0,.45),
0 0 25px rgba(198,161,91,.12);

}

/*======================
ICON PLACEHOLDER
======================*/

.icon{

width:74px;

height:74px;

border:2px solid rgba(198,161,91,.45);

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:30px;

transition:.4s;

background:rgba(198,161,91,.04);

}

.card:hover .icon{

background:var(--gold);

transform:rotate(6deg);

}

.icon i{

font-size:32px;

color:var(--gold);

transition:.35s;

}

.card:hover .icon i{

color:black;

}

/*======================
CARD TITLE
======================*/

.card h3{

font-size:34px;

color:white;

margin-bottom:18px;

line-height:1.2;

transition:.3s;

}

.card:hover h3{

color:var(--gold-light);

}

/*======================
CARD TEXT
======================*/

.card p{

font-size:15px;

line-height:1.9;

color:var(--gray);

margin-top:auto;

}

/*======================
CLICK INDICATOR
======================*/

.card::after{

content:"→";

position:absolute;

right:35px;

bottom:30px;

font-size:28px;

color:rgba(198,161,91,.25);

transition:.4s;

}

.card:hover::after{

right:28px;

color:var(--gold);

}

/*======================
CARD ACTIVE
======================*/

.card:active{

transform:scale(.98);

}

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

.card:hover{

background:linear-gradient(
180deg,
rgba(36,36,36,.98),
rgba(18,18,18,1)
);

}/*====================================================
PART 3
PORTFOLIO + CONTACT + FOOTER
====================================================*/

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

.portfolio{

background:#090909;

position:relative;

overflow:hidden;

}

.portfolio::before{

content:"";

position:absolute;

left:-220px;

top:120px;

width:520px;

height:520px;

background:radial-gradient(circle,
rgba(198,161,91,.08),
transparent 70%);

filter:blur(80px);

}

.gallery{

position:relative;

z-index:2;

display:grid;

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

gap:25px;

margin-top:60px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:18px;

cursor:pointer;

background:#111;

box-shadow:var(--shadow);

}

.gallery-item img{

width:100%;

height:340px;

object-fit:cover;

transition:.7s ease;

display:block;

}

/* Overlay */

.gallery-item::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
180deg,
transparent,
rgba(0,0,0,.65)
);

opacity:0;

transition:.4s;

z-index:1;

}

/* Gold Border */

.gallery-item::after{

content:"";

position:absolute;

inset:0;

border:2px solid transparent;

transition:.4s;

border-radius:18px;

z-index:2;

}

.gallery-item:hover::before{

opacity:1;

}

.gallery-item:hover::after{

border-color:var(--gold);

}

.gallery-item:hover img{

transform:scale(1.12);

}

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

.contact{

background:#060606;

position:relative;

overflow:hidden;

}

.contact::before{

content:"";

position:absolute;

right:-200px;

bottom:-180px;

width:550px;

height:550px;

background:radial-gradient(circle,
rgba(198,161,91,.08),
transparent 70%);

filter:blur(70px);

}

.contact form{

position:relative;

z-index:2;

max-width:760px;

margin:60px auto 0;

display:flex;

flex-direction:column;

gap:22px;

}

.contact input,
.contact textarea{

width:100%;

padding:18px 22px;

background:#111;

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

border-radius:12px;

color:white;

font-size:15px;

font-family:Poppins,sans-serif;

transition:.35s;

}

.contact textarea{

resize:none;

min-height:180px;

}

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

outline:none;

border-color:var(--gold);

background:#151515;

box-shadow:0 0 18px rgba(198,161,91,.15);

}

.contact button{

align-self:flex-start;

padding:16px 42px;

background:transparent;

border:2px solid var(--gold);

color:var(--gold);

font-size:15px;

cursor:pointer;

border-radius:6px;

transition:.35s;

font-weight:500;

letter-spacing:1px;

}

.contact button:hover{

background:var(--gold);

color:#000;

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(198,161,91,.35);

}

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

footer{

background:#040404;

padding:90px 8% 40px;

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

text-align:center;

}

.footer-content{

max-width:900px;

margin:auto;

}

.footer-content h2{

font-size:46px;

margin-bottom:20px;

color:white;

}

.footer-content p{

color:var(--gray-dark);

line-height:1.8;

margin-bottom:20px;

}

/*======================
SOCIAL ICONS
======================*/

.social-links{

display:flex;

justify-content:center;

gap:18px;

margin:35px 0;

}

.social-links a{

width:52px;

height:52px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#111;

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

color:var(--gold);

font-size:20px;

transition:.35s;

}

.social-links a:hover{

background:var(--gold);

color:black;

transform:translateY(-6px);

box-shadow:0 10px 20px rgba(198,161,91,.35);

}

/*======================
COPYRIGHT
======================*/

.copyright{

margin-top:35px;

font-size:14px;

letter-spacing:.5px;

color:#777;

}

/*======================
FADE ANIMATION
======================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hero-content,
.card,
.gallery-item,
.contact form{

animation:fadeUp 1s ease both;

}/*====================================================
PART 4
RESPONSIVE + UTILITIES + FINAL POLISH
====================================================*/

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

@media (max-width:1200px){

.hero h1{
font-size:72px;
}

section{
padding:100px 6%;
}

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

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

}

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

@media (max-width:992px){

header{
padding:18px 5%;
}

.logo{
font-size:28px;
}

nav ul{
gap:25px;
}

.hero{
background-attachment:scroll;
}

.hero h1{
font-size:60px;
}

.hero p{
font-size:16px;
letter-spacing:1px;
}

section h2{
font-size:46px;
}

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

.service-grid{
grid-template-columns:1fr;
}

.card{
min-height:280px;
}

}

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

@media (max-width:768px){

header{
padding:16px 20px;
}

.menu-btn{
display:block;
z-index:10001;
}

nav{
position:fixed;
top:0;
right:-100%;
width:270px;
height:100vh;
background:#0d0d0d;
display:flex;
justify-content:center;
align-items:center;
transition:.4s;
box-shadow:-10px 0 30px rgba(0,0,0,.5);
}

nav.active{
right:0;
}

nav ul{
flex-direction:column;
gap:35px;
}

nav ul li a{
font-size:18px;
}

.hero{
padding:0 20px;
}

.hero h1{
font-size:46px;
letter-spacing:2px;
}

.hero p{
font-size:14px;
line-height:2;
}

.btn{
padding:14px 30px;
}

section{
padding:80px 20px;
}

section h2{
font-size:38px;
}

.section-text{
font-size:15px;
}

.gallery{
grid-template-columns:1fr;
}

.gallery-item img{
height:260px;
}

.contact form{
margin-top:40px;
}

.contact button{
width:100%;
text-align:center;
}

.footer-content h2{
font-size:34px;
}

.social-links{
gap:12px;
}

.social-links a{
width:46px;
height:46px;
font-size:18px;
}

}

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

@media (max-width:480px){

.logo{
font-size:22px;
}

.hero h1{
font-size:36px;
}

.hero p{
font-size:13px;
}

.card{
padding:30px;
}

.card h3{
font-size:28px;
}

.icon{
width:64px;
height:64px;
}

.gallery-item img{
height:220px;
}

}

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

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*======================
IMAGE EFFECTS
======================*/

img{

user-select:none;

-webkit-user-drag:none;

}

/*======================
UTILITY CLASSES
======================*/

.text-center{

text-align:center;

}

.mt-1{
margin-top:10px;
}

.mt-2{
margin-top:20px;
}

.mt-3{
margin-top:30px;
}

.mt-4{
margin-top:40px;
}

.mb-1{
margin-bottom:10px;
}

.mb-2{
margin-bottom:20px;
}

.mb-3{
margin-bottom:30px;
}

.mb-4{
margin-bottom:40px;
}

/*======================
SMOOTH TRANSITIONS
======================*/

a,
button,
.card,
.gallery-item,
.icon,
input,
textarea{

transition:.35s ease;

}

/*======================
REMOVE BLUE TAP
======================*/

*{

-webkit-tap-highlight-color:transparent;

}

/*======================
END OF FILE
======================*/