/* =========================================================
TRUEVISORY REALTY
PREMIUM LIGHT HEADER
========================================================= */

:root{

--primary:#FF6F00;
--secondary:#1f493d;

--dark:#1e293b;
--text:#475569;

--white:#ffffff;
--light:#f8fafc;

--border:#e5e7eb;

--shadow:
0 10px 40px rgba(15,23,42,0.06);

}

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

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

body{

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

background:#fff;

overflow-x:hidden;

color:var(--dark);

}

a{
text-decoration:none;
}

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

.tv-header{

position:fixed;

top:18px;
left:0;

width:100%;

z-index:99999;

padding:0 18px;

transition:0.35s ease;

}

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

.tv-header.scrolled{

top:10px;

}

.tv-header.scrolled .tv-header-wrapper{

height:76px;

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

box-shadow:
0 10px 35px rgba(15,23,42,0.08);

}

/* =========================================================
WRAPPER
========================================================= */

.tv-header-wrapper{

height:84px;

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

backdrop-filter:
blur(18px);

-webkit-backdrop-filter:
blur(18px);

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

border-radius:26px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 28px;

transition:0.35s ease;

box-shadow:var(--shadow);

}

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

.tv-logo{

display:flex;

align-items:center;

}

.tv-logo img{

height:54px;

object-fit:contain;

transition:0.3s ease;

}

.tv-logo:hover img{

transform:scale(1.03);

}

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

.tv-navbar{

display:flex;

align-items:center;

}

.tv-navbar ul{

display:flex;

align-items:center;

gap:34px;

list-style:none;

margin:0;
padding:0;

}

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

.tv-navbar ul li{

position:relative;

}

.tv-navbar ul li a{

position:relative;

font-size:15px;

font-weight:500;

letter-spacing:0.2px;

color:var(--dark);

transition:0.3s ease;

padding:6px 0;

}

/* HOVER */

.tv-navbar ul li a:hover{

color:var(--secondary);

}

/* UNDERLINE */

.tv-navbar ul li a::after{

content:"";

position:absolute;

left:0;
bottom:-4px;

width:0%;

height:2px;

border-radius:30px;

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

transition:0.35s ease;

}

.tv-navbar ul li a:hover::after{

width:100%;

}

/* ACTIVE MENU */

.tv-navbar ul li.active a{

color:var(--secondary);

font-weight:600;

}

.tv-navbar ul li.active a::after{

width:100%;

}

/* =========================================================
RIGHT AREA
========================================================= */

.tv-header-right{

display:flex;

align-items:center;

gap:14px;

}

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

.tv-call-btn{

height:48px;

padding:0 18px;

border-radius:16px;

background:#fff;

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

display:flex;

align-items:center;

gap:10px;

font-size:14px;

font-weight:500;

color:var(--dark);

transition:0.3s ease;

box-shadow:
0 4px 18px rgba(15,23,42,0.03);

}

.tv-call-btn i{

width:30px;
height:30px;

border-radius:10px;

background:#fff5ef;

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

color:var(--primary);

font-size:13px;

}

.tv-call-btn:hover{

transform:translateY(-2px);

box-shadow:
0 12px 28px rgba(15,23,42,0.08);

}

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

.tv-enquiry-btn{

height:50px;

padding:0 26px;

border:none;

outline:none;

cursor:pointer;

border-radius:18px;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#fff;

font-size:14px;

font-weight:600;

letter-spacing:0.3px;

transition:0.35s ease;

box-shadow:
0 14px 28px rgba(255,111,0,0.18);

}

.tv-enquiry-btn:hover{

transform:
translateY(-3px);

box-shadow:
0 18px 38px rgba(255,111,0,0.25);

}

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

.tv-mobile-toggle{

display:none;

width:50px;
height:50px;

border-radius:16px;

background:#fff;

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

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

cursor:pointer;

font-size:18px;

color:var(--dark);

transition:0.3s ease;

}

.tv-mobile-toggle:hover{

background:#f8fafc;

}

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

.tv-mobile-menu{

position:fixed;

top:0;
right:-100%;

width:320px;
height:100vh;

background:#fff;

z-index:999999;

padding:90px 28px;

transition:0.4s ease;

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

}

.tv-mobile-menu.active{

right:0;

}

.tv-mobile-menu ul{

list-style:none;

padding:0;
margin:0;

}

.tv-mobile-menu ul li{

margin-bottom:22px;

}

.tv-mobile-menu ul li a{

font-size:17px;

font-weight:500;

color:var(--dark);

}

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

.tv-menu-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,0.45);

backdrop-filter:blur(3px);

z-index:99999;

opacity:0;
visibility:hidden;

transition:0.3s ease;

}

.tv-menu-overlay.active{

opacity:1;
visibility:visible;

}

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

@media(max-width:1100px){

.tv-navbar{
display:none;
}

.tv-call-btn{
display:none;
}

.tv-mobile-toggle{
display:flex;
}

}

@media(max-width:768px){

.tv-header{

top:12px;

padding:0 12px;

}

.tv-header-wrapper{

height:76px;

padding:0 18px;

border-radius:20px;

}

.tv-logo img{

height:46px;

}

.tv-enquiry-btn{

height:46px;

padding:0 18px;

font-size:13px;

}

}

@media(max-width:576px){

.tv-enquiry-btn{
display:none;
}

.tv-mobile-menu{

width:100%;

}

}