/*======================================================
LUXESTATE
Luxury Real Estate Website

Author : ChatGPT
Version : 1.0
======================================================*/



/*======================================================
GOOGLE FONT
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&display=swap');

 

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

:root{

--primary:#C9A96E;
--primary-dark:#b89048;

--white:#ffffff;

--black:#0b0b0b;

--dark:#111111;

--dark-2:#181818;

--dark-3:#202020;

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

--text:#BDBDBD;

--radius:22px;

--transition:.45s cubic-bezier(.4,0,.2,1);

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

--container:1320px;

}



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

*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

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

background:var(--black);

color:var(--white);

overflow-x:hidden;

line-height:1.7;

}



img{

display:block;

max-width:100%;

}



a{

text-decoration:none;

color:inherit;

}



button{

font-family:inherit;

}



ul{

list-style:none;

}



input,
button,
textarea,
select{

outline:none;

border:none;

background:none;

font-family:inherit;

}



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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}



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

.container{

width:min(var(--container),92%);

margin:auto;

}



section{

padding:120px 0;

position:relative;

}



.section-title{

text-align:center;

margin-bottom:70px;

}



.section-title span{

display:inline-block;

font-size:14px;

text-transform:uppercase;

letter-spacing:3px;

color:var(--primary);

margin-bottom:15px;

font-weight:600;

}



.section-title h2{

font-size:56px;

font-weight:700;

line-height:1.1;

margin-bottom:18px;

}



.section-title p{

width:650px;

max-width:100%;

margin:auto;

color:var(--text);

font-size:18px;

}



/*======================================================
BUTTONS
======================================================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px 36px;

border-radius:60px;

cursor:pointer;

transition:var(--transition);

font-weight:600;

font-size:16px;

}



.btn-primary{

background:var(--primary);

color:#111;

}



.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 18px 40px rgba(201,169,110,.35);

}



.btn-outline{

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

color:#fff;

backdrop-filter:blur(15px);

}



.btn-outline:hover{

background:#fff;

color:#111;

}



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

.glass{

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

backdrop-filter:blur(20px);

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

box-shadow:var(--shadow);

}



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

::selection{

background:var(--primary);

color:#111;

}



/*======================================================
BACKGROUND GLOW
======================================================*/

body::before{

content:"";

position:fixed;

width:500px;

height:500px;

left:-150px;

top:-150px;

background:radial-gradient(var(--primary),transparent 70%);

opacity:.07;

pointer-events:none;

z-index:-1;

}



body::after{

content:"";

position:fixed;

width:500px;

height:500px;

right:-150px;

bottom:-150px;

background:radial-gradient(#ffffff,transparent 70%);

opacity:.03;

pointer-events:none;

z-index:-1;

}



/*======================================================
LOADER
======================================================*/

.loader{

position:fixed;

inset:0;

background:#0b0b0b;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}



.loader-logo{

font-size:46px;

font-weight:800;

letter-spacing:2px;

color:var(--primary);

}



/*======================================================
CUSTOM CURSOR
======================================================*/

.cursor{

width:22px;

height:22px;

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

border-radius:50%;

position:fixed;

left:0;

top:0;

pointer-events:none;

transform:translate(-50%,-50%);

z-index:9999;

transition:

transform .15s linear,

width .25s,

height .25s,

background .25s;

}

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

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

padding:20px 0;

transition:.4s ease;

}

.header.scrolled{

padding:12px 0;

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

backdrop-filter:blur(20px);

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

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:32px;

font-weight:800;

letter-spacing:1px;

color:#fff;

}

.logo span{

color:var(--primary);

}

.nav-menu{

display:flex;

align-items:center;

gap:40px;

}

.nav-menu li{

position:relative;

}

.nav-menu a{

font-size:16px;

font-weight:500;

transition:.35s;

}

.nav-menu a:hover{

color:var(--primary);

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.35s;

}

.nav-menu a:hover::after{

width:100%;

}

.nav-btn{

padding:14px 28px;

background:var(--primary);

color:#111;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.nav-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(201,169,110,.35);

}

.menu-toggle{

display:none;

font-size:32px;

cursor:pointer;

}





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

.hero{

min-height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

padding-top:120px;

}

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

right:-200px;

top:-150px;

background:radial-gradient(var(--primary),transparent 70%);

opacity:.08;

pointer-events:none;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(90deg,

rgba(8,8,8,.95),

rgba(8,8,8,.45));

z-index:1;

}

.hero-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

position:relative;

z-index:5;

}

.hero-left{

max-width:620px;

}

.hero-subtitle{

display:inline-block;

padding:10px 20px;

border-radius:50px;

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

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

backdrop-filter:blur(20px);

color:var(--primary);

margin-bottom:25px;

letter-spacing:2px;

font-size:13px;

text-transform:uppercase;

}

.hero-left h1{

font-size:76px;

line-height:1.05;

margin-bottom:30px;

font-weight:800;

}

.hero-left h1 span{

display:block;

color:var(--primary);

}

.hero-left p{

font-size:19px;

color:var(--text);

line-height:34px;

margin-bottom:40px;

max-width:550px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

flex-wrap:wrap;

}





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

.hero-stats{

display:flex;

gap:60px;

flex-wrap:wrap;

}

.hero-stats div{

position:relative;

}

.hero-stats div:not(:last-child)::after{

content:"";

position:absolute;

right:-30px;

top:10px;

height:50px;

width:1px;

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

}

.hero-stats h2{

font-size:42px;

color:var(--primary);

margin-bottom:8px;

}

.hero-stats p{

font-size:15px;

margin:0;

color:#999;

}





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

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.hero-image{

width:100%;

max-width:560px;

height:700px;

border-radius:35px;

overflow:hidden;

position:relative;

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

}

.hero-image::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(0,0,0,.45),

transparent

);

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

transition:1.2s;

}

.hero-image:hover img{

transform:scale(1.08);

}





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

.price-card{

position:absolute;

left:-40px;

bottom:60px;

padding:24px 30px;

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

backdrop-filter:blur(20px);

border-radius:22px;

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

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

animation:floatCard 4s ease-in-out infinite;

}

.price-card h3{

font-size:34px;

color:var(--primary);

margin-bottom:8px;

}

.price-card p{

color:#ddd;

line-height:28px;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}





/*==================================================
SCROLL DOWN
==================================================*/

.scroll-down{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

z-index:5;

}

.scroll-down span{

display:block;

width:2px;

height:70px;

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

position:relative;

overflow:hidden;

}

.scroll-down span::after{

content:"";

position:absolute;

left:0;

top:-40px;

width:100%;

height:40px;

background:var(--primary);

animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

0%{

top:-40px;

}

100%{

top:80px;

}

}





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

@media(max-width:991px){

.hero-wrapper{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.hero-left{

max-width:100%;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.price-card{

left:50%;

transform:translateX(-50%);

bottom:-20px;

}

.nav-menu{

display:none;

}

.menu-toggle{

display:block;

}

}





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

@media(max-width:768px){

.hero{

padding-top:150px;

}

.hero-left h1{

font-size:52px;

}

.hero-image{

height:500px;

}

.hero-stats{

gap:25px;

}

.hero-stats h2{

font-size:32px;

}

.section-title h2{

font-size:38px;

}

.btn{

width:100%;

}

}

/*==================================================
PROPERTY SEARCH
==================================================*/

.search-section{

margin-top:-80px;

padding:0 0 120px;

position:relative;

z-index:20;

}

.search-box{

display:grid;

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

gap:20px;

padding:35px;

border-radius:28px;

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

backdrop-filter:blur(25px);

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

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

}

.search-item{

display:flex;

flex-direction:column;

}

.search-item label{

font-size:14px;

color:var(--text);

margin-bottom:12px;

font-weight:500;

}

.search-item select{

height:60px;

padding:0 18px;

border-radius:16px;

background:#1b1b1b;

color:#fff;

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

transition:var(--transition);

cursor:pointer;

}

.search-item select:hover{

border-color:var(--primary);

}

.search-item select:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(201,169,110,.15);

}

.search-btn{

height:60px;

border-radius:16px;

background:var(--primary);

font-size:16px;

font-weight:700;

color:#111;

cursor:pointer;

transition:var(--transition);

display:flex;

justify-content:center;

align-items:center;

gap:10px;

}

.search-btn:hover{

transform:translateY(-5px);

box-shadow:0 18px 40px rgba(201,169,110,.35);

}





/*==================================================
FEATURED PROPERTIES
==================================================*/
/* 
.featured{

background:#0d0d0d;

}

.property-grid{

display:grid;

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

gap:35px;

}

.property-card{

background:#151515;

border-radius:28px;

overflow:hidden;

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

transition:.45s;

position:relative;

}

.property-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

180deg,

transparent,

rgba(201,169,110,.08)

);

opacity:0;

transition:.4s;

pointer-events:none;

}

.property-card:hover{

transform:translateY(-15px);

box-shadow:0 35px 70px rgba(0,0,0,.4);

border-color:rgba(201,169,110,.25);

}

.property-card:hover::before{

opacity:1;

} */



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

.property-grid{

display:grid;

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

gap:30px;

}

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

.card{

position:relative;

height:480px;

overflow:hidden;

border-radius:24px;

cursor:pointer;

background:#000;

transition:.45s;

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

}

.card:hover{

transform:translateY(-10px);

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

}

.card img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.card:hover img{

transform:scale(1.12);

}

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

.overlay{

position:absolute;

inset:0;

background:linear-gradient(to top,

rgba(0,0,0,.95),

rgba(0,0,0,.35),

transparent);

transition:.5s;

}

.card:hover .overlay{

background:linear-gradient(to top,

rgba(0,0,0,.95),

rgba(0,0,0,.60),

rgba(0,0,0,.20));

}

/*=========================
GRADIENT BORDER
=========================*/

.card::before{

content:"";

position:absolute;

inset:0;

padding:2px;

border-radius:24px;

background:linear-gradient(135deg,

transparent,

rgba(255,255,255,.6),

transparent);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.5s;

}

.card:hover::before{

opacity:1;

}

/*=========================
BADGE
=========================*/

.badge{

position:absolute;

top:18px;

left:18px;

padding:8px 16px;

border-radius:30px;

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

backdrop-filter:blur(20px);

color:#fff;

font-size:13px;

z-index:2;

}

/*=========================
HEART
=========================*/

.wishlist{

position:absolute;

top:18px;

right:18px;

width:45px;

height:45px;

display:grid;

place-items:center;

border-radius:50%;

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

backdrop-filter:blur(15px);

color:#fff;

font-size:18px;

z-index:2;

transition:.4s;

}

.wishlist:hover{

background:#c9a96e;

}

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

.card-content{

position:absolute;

left:0;

bottom:-120px;

width:100%;

padding:25px;

color:#fff;

transition:.5s;

}

.card:hover .card-content{

bottom:0;

}

.location{

font-size:14px;

margin-bottom:12px;

opacity:.9;

}

.card-content h3{

font-size:28px;

margin-bottom:15px;

}

.price{

font-size:30px;

font-weight:700;

color:#ffb400;

margin-bottom:18px;

}

.features{

display:flex;

justify-content:space-between;

font-size:14px;

padding-top:15px;

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

margin-bottom:22px;

}

.card-btn{

display:inline-block;

padding:12px 22px;

border-radius:40px;

background:#fff;

color:#111;

text-decoration:none;

font-weight:600;

transition:.4s;

}

.card-btn:hover{

background:#ffb400;

}

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

@media(max-width:1200px){

.property-grid{

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

}

}

@media(max-width:992px){

.hero-content h1{

font-size:48px;

}

.property-grid{

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

}

}

@media(max-width:600px){

.property-grid{

grid-template-columns:1fr;

}

.hero{

height:60vh;

}

.hero-content h1{

font-size:36px;

}

nav ul{

display:none;

}

}


/*==================================================
PROPERTY IMAGE
==================================================*/

.property-image{

position:relative;

overflow:hidden;

height:280px;

}

.property-image img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.property-card:hover img{

transform:scale(1.12);

}

.property-image::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(0,0,0,.75),

transparent

);

opacity:.7;

}





/*==================================================
BADGE
==================================================*/

.property-badge{

position:absolute;

top:20px;

left:20px;

padding:10px 18px;

background:rgba(201,169,110,.95);

color:#111;

border-radius:50px;

font-size:13px;

font-weight:700;

z-index:3;

}





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

.property-content{

padding:28px;

}

.property-content span{

display:inline-block;

color:var(--primary);

margin-bottom:12px;

font-size:14px;

letter-spacing:1px;

}

.property-content h3{

font-size:28px;

margin-bottom:20px;

transition:.35s;

}

.property-card:hover h3{

color:var(--primary);

}





/*==================================================
PROPERTY INFO
==================================================*/

.property-info{

display:grid;

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

gap:15px;

padding:22px 0;

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

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

margin-bottom:25px;

}

.property-info div{

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:14px;

color:var(--text);

}

.property-info i{

font-size:22px;

color:var(--primary);

}





/*==================================================
BOTTOM
==================================================*/

.property-bottom{

display:flex;

justify-content:space-between;

align-items:center;

}

.property-bottom h4{

font-size:30px;

color:var(--primary);

}

.property-bottom a{

display:flex;

align-items:center;

gap:8px;

font-weight:600;

transition:.35s;

}

.property-bottom a:hover{

color:var(--primary);

transform:translateX(5px);

}





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

.property-card:hover{

background:#191919;

}

.property-card:hover .property-image::before{

content:"";

position:absolute;

inset:0;

background:radial-gradient(

circle,

rgba(201,169,110,.12),

transparent 70%

);

z-index:2;

}





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

@media(max-width:1100px){

.property-grid{

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

}

.search-box{

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

}

}

@media(max-width:768px){

.search-section{

margin-top:40px;

}

.search-box{

grid-template-columns:1fr;

padding:25px;

}

.property-grid{

grid-template-columns:1fr;

}

.property-content h3{

font-size:24px;

}

.property-info{

grid-template-columns:1fr;

gap:20px;

}

}

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

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

.about-company{

padding:120px 0;

background:#111;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-images{

position:relative;

height:650px;

}

.about-image{

overflow:hidden;

border-radius:25px;

position:absolute;

box-shadow:0 25px 50px rgba(0,0,0,.35);

}

.about-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.8s;

}

.about-image:hover img{

transform:scale(1.08);

}

.image-main{

width:75%;

height:470px;

left:0;

top:0;

}

.image-small{

width:52%;

height:290px;

right:0;

bottom:0;

border:8px solid #111;

}

.experience-box{

position:absolute;

left:40px;

bottom:120px;

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

backdrop-filter:blur(20px);

padding:25px 35px;

border-radius:20px;

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

}

.experience-box h2{

font-size:50px;

color:var(--primary);

margin-bottom:8px;

}

.about-content h2{

font-size:52px;

margin:20px 0;

line-height:1.2;

}

.about-content p{

color:#bdbdbd;

line-height:32px;

margin-bottom:35px;

}

.section-subtitle{

color:var(--primary);

text-transform:uppercase;

letter-spacing:2px;

font-size:13px;

}

.about-list{

display:grid;

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

gap:18px;

margin-bottom:40px;

}

.about-item{

padding:18px;

border-radius:15px;

background:#191919;

transition:.35s;

}

.about-item:hover{

background:#202020;

transform:translateX(8px);

}

.about-btn{

display:inline-block;

padding:18px 34px;

border-radius:50px;

background:var(--primary);

color:#111;

font-weight:700;

transition:.35s;

}

.about-btn:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(212,175,55,.3);

}

@media(max-width:991px){

.about-grid{

grid-template-columns:1fr;

}

.about-images{

height:520px;

}

.about-content{

text-align:center;

}

.about-list{

grid-template-columns:1fr;

}

}

@media(max-width:767px){

.about-images{

height:400px;

}

.image-main{

width:100%;

height:250px;

}

.image-small{

display:none;

}

.experience-box{

left:20px;

bottom:20px;

}

.about-content h2{

font-size:36px;

}

}


/*==================================================
STATISTICS CSS
==================================================*/

.stats{
    background:#0b0b0b;
    padding:90px 0;
    position:relative;
    overflow:hidden;
}


.stats::before{

    content:"";
    position:absolute;
    left:-200px;
    top:-200px;
    width:500px;
    height:500px;

    background:radial-gradient(
        rgba(201,169,110,.15),
        transparent 70%
    );

    pointer-events:none;

}



.stats-grid{

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

}



.stat-card{

    background:#151515;
    border-radius:24px;
    padding:45px 25px;

    text-align:center;

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

    transition:.45s;

    position:relative;
    overflow:hidden;

}



.stat-card::before{

    content:"";

    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transition:.45s;

}



.stat-card:hover{

    transform:translateY(-12px);

    background:#1b1b1b;

    border-color:rgba(201,169,110,.2);

}



.stat-card:hover::before{

    transform:scaleX(1);

}



.stat-card h2{

    font-size:54px;

    color:var(--primary);

    margin-bottom:12px;

    font-weight:800;

}



.stat-card p{

    font-size:16px;

    color:var(--text);

}



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


@media(max-width:1100px){

    .stats-grid{

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

    }

}



@media(max-width:768px){

    .stats{

        padding:70px 0;

    }


    .stats-grid{

        grid-template-columns:1fr;

        gap:20px;

    }


    .stat-card{

        padding:35px 20px;

    }


    .stat-card h2{

        font-size:42px;

    }

}

/*==================================================
LUXURY COLLECTION
==================================================*/

.luxury-collection{

background:#0f0f0f;

position:relative;

overflow:hidden;

}

.luxury-collection::before{

content:"";

position:absolute;

width:600px;

height:600px;

right:-250px;

top:-250px;

background:radial-gradient(rgba(201,169,110,.12),transparent 70%);

pointer-events:none;

}

.collection-grid{

display:grid;

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

gap:35px;

}

.collection-card{

position:relative;

height:560px;

border-radius:28px;

overflow:hidden;

cursor:pointer;

box-shadow:0 25px 70px rgba(0,0,0,.35);

}

.collection-card img{

width:100%;

height:100%;

object-fit:cover;

transition:1.2s cubic-bezier(.2,.8,.2,1);

}

.collection-card:hover img{

transform:scale(1.12);

}





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

.collection-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:35px;

background:linear-gradient(

180deg,

transparent 20%,

rgba(0,0,0,.92)

);

transition:.45s;

}

.collection-overlay::before{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:0;

background:linear-gradient(

180deg,

transparent,

rgba(201,169,110,.22)

);

transition:.55s;

z-index:0;

}

.collection-card:hover .collection-overlay::before{

height:100%;

}





.collection-overlay>*{

position:relative;

z-index:2;

}





.collection-overlay span{

color:var(--primary);

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:12px;

}





.collection-overlay h3{

font-size:34px;

margin-bottom:18px;

transform:translateY(20px);

opacity:.9;

transition:.45s;

}





.collection-card:hover h3{

transform:translateY(0);

}





.collection-overlay a{

display:inline-flex;

align-items:center;

gap:10px;

width:max-content;

padding:14px 26px;

border-radius:50px;

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

backdrop-filter:blur(15px);

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

transition:.35s;

}





.collection-overlay a:hover{

background:var(--primary);

color:#111;

}





.collection-overlay i{

transition:.35s;

}





.collection-overlay a:hover i{

transform:translateX(6px);

}





/*==================================================
WHY US
==================================================*/

.why-us{

background:#111;

}


.why-grid{

display:grid;

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

gap:30px;

}


.why-card{

background:#171717;

padding:45px 30px;

border-radius:26px;

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

text-align:center;

transition:.45s;

position:relative;

overflow:hidden;

}

.why-card::before{

content:"";

position:absolute;

left:50%;

top:0;

width:0;

height:4px;

background:var(--primary);

transform:translateX(-50%);

transition:.4s;

}





.why-card:hover::before{

width:100%;

}





.why-card:hover{

transform:translateY(-12px);

border-color:rgba(201,169,110,.25);

background:#1d1d1d;

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

}





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

.why-icon{

width:90px;

height:90px;

margin:0 auto 25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(201,169,110,.10);

border:1px solid rgba(201,169,110,.25);

transition:.45s;

}





.why-card:hover .why-icon{

transform:rotateY(180deg);

background:var(--primary);

}





.why-icon i{

font-size:40px;

color:var(--primary);

transition:.45s;

}





.why-card:hover .why-icon i{

color:#111;

}





.why-card h3{

font-size:24px;

margin-bottom:18px;

}





.why-card p{

color:var(--text);

line-height:30px;

}





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

@media(max-width:1100px){

.collection-grid{

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

}

.why-grid{

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

}

}





@media(max-width:768px){

.collection-grid{

grid-template-columns:1fr;

}

.collection-card{

height:420px;

}

.collection-overlay h3{

font-size:28px;

}

.why-grid{

grid-template-columns:1fr;

}

.why-card{

padding:35px 25px;

}

}

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

.gallery{

background:#0b0b0b;

overflow:hidden;

}

.gallery-track{

display:flex;

gap:30px;

padding:20px 5%;

overflow-x:auto;

scrollbar-width:none;

}

.gallery-track::-webkit-scrollbar{

display:none;

}

.gallery-track img{

width:420px;

height:520px;

flex-shrink:0;

object-fit:cover;

border-radius:30px;

transition:.7s;

cursor:pointer;

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

}

.gallery-track img:hover{

transform:scale(.96);

filter:brightness(1.08);

}





/*==================================================
AGENTS
==================================================*/

.agents{

background:#111;

}

.agents-grid{

display:grid;

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

gap:35px;

}

.agent-card{

background:#171717;

border-radius:28px;

overflow:hidden;

text-align:center;

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

transition:.45s;

position:relative;

}

.agent-card:hover{

transform:translateY(-12px);

border-color:rgba(201,169,110,.25);

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

}

.agent-card img{

width:100%;

height:420px;

object-fit:cover;

transition:1s;

}

.agent-card:hover img{

transform:scale(1.08);

}





.agent-card h3{

font-size:28px;

margin:25px 0 8px;

}

.agent-card span{

display:block;

color:var(--primary);

margin-bottom:25px;

font-size:15px;

}





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

.agent-social{

display:flex;

justify-content:center;

gap:15px;

padding-bottom:30px;

}

.agent-social a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#202020;

transition:.35s;

}

.agent-social a:hover{

background:var(--primary);

color:#111;

transform:translateY(-5px);

}





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

@media(max-width:1100px){

.agents-grid{

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

}

}

@media(max-width:768px){

.gallery-track{

padding:10px;

gap:20px;

}

.gallery-track img{

width:300px;

height:400px;

}

.agents-grid{

grid-template-columns:1fr;

}

.agent-card img{

height:360px;

}

}

/*==================================================
TESTIMONIALS
==================================================*/

.testimonials{

background:#0b0b0b;

overflow:hidden;

}

.testimonialSwiper{

padding:20px 10px 70px;

}

.testimonial-card{

background:#171717;

border-radius:28px;

padding:45px;

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

transition:.4s;

height:100%;

}

.testimonial-card:hover{

transform:translateY(-10px);

border-color:rgba(201,169,110,.25);

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

}

.testimonial-card p{

font-size:18px;

line-height:34px;

color:var(--text);

margin-bottom:35px;

}

.client{

display:flex;

align-items:center;

gap:18px;

}

.client img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

border:3px solid var(--primary);

}

.client h4{

font-size:20px;

margin-bottom:5px;

}

.client span{

font-size:15px;

color:var(--primary);

}

.swiper-pagination-bullet{

background:#555;

opacity:1;

}

.swiper-pagination-bullet-active{

background:var(--primary);

}





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

.faq{

background:#111;

}

.faq-list{

max-width:900px;

margin:auto;

}

.faq-list details{

background:#171717;

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

border-radius:18px;

margin-bottom:20px;

padding:22px 28px;

transition:.35s;

}

.faq-list details:hover{

border-color:rgba(201,169,110,.25);

}

.faq-list summary{

cursor:pointer;

font-size:20px;

font-weight:600;

list-style:none;

position:relative;

padding-right:30px;

}

.faq-list summary::-webkit-details-marker{

display:none;

}

.faq-list summary::after{

content:"+";

position:absolute;

right:0;

top:0;

font-size:28px;

color:var(--primary);

transition:.35s;

}

.faq-list details[open] summary::after{

transform:rotate(45deg);

}

.faq-list p{

padding-top:20px;

color:var(--text);

line-height:30px;

}





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

.cta{

background:#0b0b0b;

}

.cta-box{

background:linear-gradient(135deg,#1b1b1b,#141414);

padding:90px 50px;

border-radius:35px;

text-align:center;

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

position:relative;

overflow:hidden;

}

.cta-box::before{

content:"";

position:absolute;

width:450px;

height:450px;

right:-180px;

top:-180px;

background:radial-gradient(rgba(201,169,110,.18),transparent 70%);

pointer-events:none;

}

.cta-box h2{

font-size:56px;

margin-bottom:20px;

}

.cta-box p{

font-size:19px;

color:var(--text);

margin-bottom:40px;

}





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

.footer{

background:#080808;

padding:90px 0 30px;

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

}

.footer-grid{

display:grid;

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

gap:60px;

margin-bottom:60px;

}

.footer h3{

font-size:36px;

margin-bottom:18px;

}

.footer h4{

margin-bottom:20px;

font-size:22px;

}

.footer p,

.footer li{

color:var(--text);

line-height:32px;

}

.footer ul li{

margin-bottom:10px;

}

.footer a{

transition:.35s;

}

.footer a:hover{

color:var(--primary);

padding-left:6px;

}

.copyright{

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

padding-top:30px;

text-align:center;

color:#888;

}





/*==================================================
BACK TO TOP
==================================================*/

.back-top{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border-radius:50%;

background:var(--primary);

color:#111;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

cursor:pointer;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

z-index:999;

}

.back-top.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.back-top:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(201,169,110,.35);

}





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

@media(max-width:991px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.cta-box{

padding:70px 30px;

}

.cta-box h2{

font-size:40px;

}

}

@media(max-width:768px){

.testimonial-card{

padding:30px;

}

.testimonial-card p{

font-size:16px;

line-height:30px;

}

.client img{

width:60px;

height:60px;

}

.faq-list summary{

font-size:18px;

}

.cta-box h2{

font-size:34px;

}

.cta-box p{

font-size:16px;

}

.back-top{

right:18px;

bottom:18px;

}

}