/* =========================================================
GLOBAL NAVBAR
========================================================= */

nav{

position:fixed;
top:0;
left:0;
width:100%;

padding:16px 5%;

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

z-index:1000;

background:rgba(4,8,18,0.78);

backdrop-filter:blur(20px);

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

transition:0.4s;

}

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

.logo-link{

display:flex;
align-items:center;

text-decoration:none;

z-index:10001;

}

.logo-area{

display:flex;
align-items:center;

min-width:300px;

}

.logo-area img{

height:140px;
width:auto;

display:block;

object-fit:contain;

transition:0.4s;

filter:
drop-shadow(0 5px 15px rgba(0,0,0,0.35));

}

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

.nav-links{

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

gap:34px;

flex:1;

margin-left:20px;

}

.nav-links a{

text-decoration:none;
color:#fff;

font-size:11px;
letter-spacing:3px;
text-transform:uppercase;

position:relative;

font-weight:500;

transition:0.4s;

}

.nav-links a::after{

content:'';

position:absolute;

left:0;
bottom:-10px;

width:0%;
height:1.5px;

background:#C8A96B;

transition:0.4s;

}

.nav-links a:hover{

color:#E8D3A2;

}

.nav-links a:hover::after{

width:100%;

}

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

.nav-btn{

padding:14px 28px;

background:
linear-gradient(
135deg,
#C8A96B,
#FFF1C7
);

text-decoration:none;

color:#040B16;

font-size:11px;
font-weight:700;

letter-spacing:3px;
text-transform:uppercase;

border-radius:40px;

transition:0.45s;

white-space:nowrap;

}

.nav-btn:hover{

transform:translateY(-4px);

box-shadow:
0 12px 28px rgba(200,169,107,0.35);

}

/* =========================================================
PREMIUM HAMBURGER
========================================================= */

.hamburger{

display:none;

flex-direction:column;

justify-content:center;

align-items:center;

gap:6px;

cursor:pointer;

z-index:10001;

width:52px;
height:52px;

border-radius:50%;

background:
linear-gradient(
135deg,
rgba(255,241,199,0.15),
rgba(200,169,107,0.12)
);

border:
1px solid rgba(200,169,107,0.28);

backdrop-filter:blur(12px);

box-shadow:
0 8px 22px rgba(0,0,0,0.28);

transition:0.4s;

}

.hamburger:hover{

transform:scale(1.05);

box-shadow:
0 12px 28px rgba(200,169,107,0.22);

}

.hamburger span{

width:24px;
height:2px;

border-radius:20px;

background:
linear-gradient(
135deg,
#FFF1C7,
#C8A96B
);

box-shadow:
0 0 10px rgba(200,169,107,0.5);

transition:0.4s;

}

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

.mobile-menu{

position:fixed;

top:0;
right:-100%;

width:100%;
height:100vh;

background:
linear-gradient(
135deg,
#040B16,
#071120
);

display:flex;
flex-direction:column;

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

gap:34px;

transition:0.55s cubic-bezier(.77,0,.18,1);

z-index:10000;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

color:white;

text-decoration:none;

font-size:18px;

letter-spacing:4px;
text-transform:uppercase;

transition:0.4s;

}

.mobile-menu a:hover{

color:#E8D3A2;

}

.mobile-close{

position:absolute;

top:26px;
right:30px;

font-size:42px;

cursor:pointer;

color:#FFF1C7;

transition:0.4s;

}

.mobile-close:hover{

transform:rotate(90deg);

}

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

footer{

padding:100px 7% 40px;

background:
linear-gradient(
to bottom,
#050816,
#02040b
);

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

}

.footer-grid{

display:grid;

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

gap:60px;

margin-bottom:70px;

}

.footer-brand img{

height:125px;

width:auto;

object-fit:contain;

margin-bottom:25px;

filter:
drop-shadow(0 5px 15px rgba(0,0,0,0.35));

}

.footer-column h3{

font-family:'Cormorant Garamond',serif;

font-size:1.6rem;

margin-bottom:25px;

color:#E8D3A2;

}

.footer-column a,
.footer-brand p{

display:block;

text-decoration:none;

color:#D6D6D6;

margin-bottom:14px;

line-height:1.9;

font-size:14px;

}

.footer-column a{

transition:0.4s;

}

.footer-column a:hover{

color:#E8D3A2;

padding-left:6px;

}

.footer-column a i{

margin-right:10px;

color:#C8A96B;

min-width:18px;

}

.footer-socials{

display:flex;

gap:14px;

margin-top:28px;

}

.footer-socials a{

width:48px;
height:48px;

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

border-radius:50%;

background:
rgba(255,255,255,0.04);

color:white;

border:
1px solid rgba(255,255,255,0.08);

transition:0.4s;

}

.footer-socials a:hover{

background:
linear-gradient(
135deg,
#FFF1C7,
#C8A96B
);

color:#040B16;

transform:translateY(-5px);

}

.footer-bottom{

padding-top:30px;

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

display:flex;
justify-content:space-between;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom p{

font-size:12px;

color:#bfbfbf;

}

/* =========================================================
PREMIUM FLOATING BUTTONS
========================================================= */

.floating-buttons{

position:fixed;

left:18px;
bottom:18px;

display:flex;
flex-direction:column;

gap:14px;

z-index:99999;

}

.float-call,
.float-whatsapp{

width:64px;
height:64px;

border-radius:50%;

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

font-size:24px;

text-decoration:none;

backdrop-filter:blur(14px);

transition:0.45s cubic-bezier(.2,.9,.3,1);

border:
1px solid rgba(255,255,255,0.14);

}

/* CALL */

.float-call{

background:
linear-gradient(
135deg,
#FFF1C7,
#C8A96B
);

color:#071120;

box-shadow:
0 12px 35px rgba(200,169,107,0.35);

}

/* WHATSAPP */

.float-whatsapp{

background:
linear-gradient(
135deg,
#25D366,
#7DFFAE
);

color:white;

box-shadow:
0 12px 35px rgba(37,211,102,0.35);

}

.float-call:hover,
.float-whatsapp:hover{

transform:
translateY(-6px)
scale(1.08);

}

/* =========================================================
GLOBAL RESPONSIVE FIXES
========================================================= */

html,
body{

overflow-x:hidden;

}

img{

max-width:100%;
height:auto;

}

section{

width:100%;
overflow:hidden;

}

/* =========================================================
LARGE TABLETS
========================================================= */

@media(max-width:1200px){

.logo-area img{

height:130px;

width:auto;

max-width:300px;

object-fit:contain;

}

.footer-grid{

grid-template-columns:1fr 1fr;

gap:45px;

}

.nav-links{

gap:24px;

}

}

/* =========================================================
TABLETS
========================================================= */

@media(max-width:992px){

nav{

padding:14px 24px;

}

.logo-area img{

height:140px;

width:auto;

max-width:280px;

object-fit:contain;

}

.nav-links{

gap:18px;

}

.nav-links a{

font-size:10px;

letter-spacing:2px;

}

}

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

@media(max-width:768px){

nav{

padding:14px 18px;

}

/* HIDE DESKTOP */

.nav-links,
.nav-btn{

display:none;

}

/* SHOW HAMBURGER */

.hamburger{

display:flex !important;

width:54px;
height:54px;

flex-shrink:0;

}
.footer-brand img{

height:130px;

width:auto;

object-fit:contain;

}

/* LOGO */

.logo-area{

min-width:auto;

}

.logo-area img{

height:130px;

width:auto;

max-width:260px;

object-fit:contain;

}

/* FOOTER */

footer{

padding:80px 5% 40px;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

/* FLOATING */

.floating-buttons{

left:14px;
bottom:14px;

}

.float-call,
.float-whatsapp{

width:58px;
height:58px;

font-size:22px;

}

}

/* =========================================================
SMALL PHONES
========================================================= */

@media(max-width:480px){

nav{

padding:12px 16px;

}

.logo-area{

min-width:auto;

}

.logo-area img{

height:120px;

width:auto;

max-width:230px;

object-fit:contain;

}

.hamburger{

width:50px;
height:50px;

flex-shrink:0;

}

.hamburger span{

width:22px;

}

.mobile-menu a{

font-size:16px;

letter-spacing:3px;

}

.footer-brand img{

height:120px;

width:auto;

object-fit:contain;

}

}