/*=========================================
ALFA REALTY
Premium Luxury Theme
White • Navy • Gold
==========================================*/

:root{

--primary:#0F2D52;
--secondary:#C9A227;
--gold:#D4AF37;
--lightgold:#F4E7B5;
--white:#ffffff;
--bg:#f8f9fb;
--text:#333333;
--gray:#666666;
--shadow:0 15px 35px rgba(0,0,0,.08);
--radius:12px;
--transition:.35s ease;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:var(--white);
color:var(--text);
line-height:1.7;

}

img{

width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1250px;
margin:auto;

}

/*========================
Typography
=========================*/

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title h2{

font-family:'Playfair Display',serif;
font-size:42px;
color:var(--primary);
margin-bottom:15px;

}

.section-title p{

max-width:700px;
margin:auto;
color:#666;

}

/*========================
Buttons
=========================*/

.btn{

display:inline-block;
padding:15px 35px;
background:linear-gradient(135deg,var(--gold),#f5d76e);
color:#fff;
font-weight:600;
border-radius:50px;
transition:.35s;

}

.btn:hover{

transform:translateY(-4px);
box-shadow:0 15px 35px rgba(212,175,55,.35);

}

.btn-outline{

display:inline-block;
padding:15px 35px;
border:2px solid var(--gold);
color:var(--primary);
font-weight:600;
border-radius:50px;
transition:.35s;

}

.btn-outline:hover{

background:var(--gold);
color:#fff;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
z-index:999;
box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.navbar{

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

}

.logo img{

height:68px;
width:auto;

}

nav ul{

display:flex;
gap:40px;

}

nav ul li a{

font-weight:500;
color:var(--primary);
transition:.3s;

}

nav ul li a:hover{

color:var(--gold);

}

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

.hero{

padding-top:160px;
padding-bottom:120px;
background:
linear-gradient(135deg,#ffffff,#faf8f1);

}

.hero-grid{

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

}

.hero-left h5{

letter-spacing:3px;
color:var(--gold);
margin-bottom:18px;

}

.hero-left h1{

font-family:'Playfair Display',serif;
font-size:68px;
color:var(--primary);
margin-bottom:10px;

}

.hero-left h2{

font-size:38px;
font-weight:600;
line-height:1.3;
margin-bottom:25px;

}

.hero-left h2 span{

display:block;
color:var(--gold);

}

.hero-left p{

font-size:18px;
color:#666;
margin-bottom:40px;

}

.hero-buttons{

display:flex;
gap:20px;

}

.hero-right{

position:relative;

}

.hero-right img{

border-radius:18px;
box-shadow:var(--shadow);

}

/* Decorative Frame */

.hero-right::before{

content:'';
position:absolute;
width:100%;
height:100%;
border:4px solid var(--gold);
top:25px;
left:25px;
border-radius:18px;
z-index:-1;

}

/*========================
Floating WhatsApp
=========================*/

.whatsapp{

position:fixed;
right:30px;
bottom:30px;

width:65px;
height:65px;

border-radius:50%;

background:#25D366;

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

font-size:30px;

color:#fff;

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

transition:.35s;

z-index:999;

}

.whatsapp:hover{

transform:scale(1.1);

}

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

section{

padding:110px 0;

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

.about{
background:#ffffff;
}

.about-grid{

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

}

.about img{

border-radius:18px;
box-shadow:var(--shadow);

}

.about h3{

font-size:34px;
font-family:'Playfair Display',serif;
color:var(--primary);
margin-bottom:20px;

}

.about p{

font-size:17px;
color:#666;
margin-bottom:35px;

}

.features{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}

.features div{

background:#fff;
padding:18px 22px;

border-left:4px solid var(--gold);

box-shadow:0 8px 25px rgba(0,0,0,.06);

border-radius:10px;

transition:.35s;

font-weight:500;

}

.features div:hover{

transform:translateY(-8px);

}

.features i{

color:var(--gold);
margin-right:10px;

}

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

.services{

background:#f8f9fb;

}

.service-grid{

display:grid;

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

gap:30px;

}

.card{

background:#fff;

padding:45px 30px;

text-align:center;

border-radius:18px;

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

transition:.4s;

border-top:4px solid transparent;

}

.card:hover{

transform:translateY(-15px);

border-color:var(--gold);

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

}

.card i{

font-size:55px;

color:var(--gold);

margin-bottom:25px;

}

.card h3{

font-size:24px;

color:var(--primary);

margin-bottom:15px;

}

.card p{

color:#777;

}

/*====================================================
PROPERTY SECTION
====================================================*/

.properties{

background:#fff;

}

.property-grid{

display:grid;

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

gap:30px;

}

.property{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.4s;

}

.property:hover{

transform:translateY(-12px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.property img{

height:260px;

object-fit:cover;

transition:.4s;

}

.property:hover img{

transform:scale(1.08);

}

.property h3{

padding:22px 20px 10px;

font-size:22px;

color:var(--primary);

}

.property p{

padding:0 20px 25px;

color:#777;

}

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

.contact{

background:#f8f9fb;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.contact h3{

font-size:34px;

font-family:'Playfair Display',serif;

color:var(--primary);

margin-bottom:25px;

}

.contact p{

margin-bottom:18px;

font-size:17px;

color:#555;

}

.contact i{

color:var(--gold);

width:35px;

font-size:18px;

}

.contact iframe{

width:100%;

height:520px;

border:none;

border-radius:18px;

box-shadow:var(--shadow);

}

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

footer{

background:var(--primary);

padding:35px 0;

text-align:center;

}

footer p{

color:#fff;

font-size:15px;

letter-spacing:1px;

}

/*====================================================
PREMIUM GOLD LINE
====================================================*/

.section-title h2{

position:relative;

display:inline-block;

padding-bottom:15px;

}

.section-title h2::after{

content:"";

position:absolute;

left:50%;

transform:translateX(-50%);

bottom:0;

width:90px;

height:4px;

background:linear-gradient(to right,#d4af37,#f7dc6f);

border-radius:10px;

}

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

.about img,
.hero img,
.property img{

transition:.45s;

}

.about img:hover,
.hero img:hover{

transform:scale(1.02);

}

/*====================================================
GOLD HOVER LINKS
====================================================*/

a{

transition:.35s;

}

a:hover{

color:var(--gold);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#efefef;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--gold),#b68d1b);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#a67c00;

}

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

::selection{

background:var(--gold);

color:#fff;

}
/*==================================================
PREMIUM EFFECTS
==================================================*/

.shadow{
box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.rounded{
border-radius:18px;
}

.gold-text{
color:var(--gold);
}

.blue-text{
color:var(--primary);
}

.text-center{
text-align:center;
}

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

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

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

/*==================================================
SECTION ANIMATION
==================================================*/

section{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(40px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

/*==================================================
HERO TEXT ANIMATION
==================================================*/

.hero-left h1{

animation:slideLeft 1s ease;

}

.hero-left h2{

animation:slideLeft 1.2s ease;

}

.hero-left p{

animation:slideLeft 1.4s ease;

}

.hero-buttons{

animation:slideLeft 1.6s ease;

}

@keyframes slideLeft{

0%{

opacity:0;
transform:translateX(-60px);

}

100%{

opacity:1;
transform:translateX(0);

}

}

/*==================================================
IMAGE ANIMATION
==================================================*/

.hero-right{

animation:slideRight 1.5s ease;

}

@keyframes slideRight{

0%{

opacity:0;
transform:translateX(60px);

}

100%{

opacity:1;
transform:translateX(0);

}

}

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

.card,
.property,
.features div{

cursor:pointer;
position:relative;
overflow:hidden;

}

.card::before,
.property::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent);

transition:.7s;

}

.card:hover::before,
.property:hover::before{

left:120%;

}

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

.btn{

position:relative;
overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

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

transform:skewX(-25deg);

transition:.6s;

}

.btn:hover::before{

left:130%;

}

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

header{

transition:.35s;

}

header:hover{

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

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

.property{

overflow:hidden;

}

.property img{

transition:.6s;

}

.property:hover img{

transform:scale(1.12);

}

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

.about img{

transition:.5s;

}

.about img:hover{

transform:rotate(.5deg) scale(1.03);

}

/*==================================================
GLOW EFFECT
==================================================*/

.btn:hover{

box-shadow:

0 10px 25px rgba(212,175,55,.25),

0 0 35px rgba(212,175,55,.20);

}

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

.social{

display:flex;
gap:15px;
margin-top:20px;

}

.social a{

width:45px;
height:45px;

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

background:#fff;

border-radius:50%;

color:var(--primary);

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

transition:.35s;

}

.social a:hover{

background:var(--gold);

color:#fff;

transform:translateY(-6px);

}

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

.loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#fff;

display:flex;

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

z-index:99999;

}

.loader::after{

content:"";

width:70px;
height:70px;

border:5px solid #eee;

border-top:5px solid var(--gold);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.top{

position:fixed;

bottom:110px;

right:30px;

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:#fff;

border-radius:50%;

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

transition:.35s;

cursor:pointer;

}

.top:hover{

background:var(--gold);

transform:translateY(-6px);

}

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

input,
textarea{

width:100%;

padding:16px;

border:1px solid #ddd;

border-radius:8px;

outline:none;

margin-bottom:18px;

font-size:15px;

transition:.3s;

font-family:Poppins,sans-serif;

}

input:focus,
textarea:focus{

border-color:var(--gold);

box-shadow:0 0 0 4px rgba(212,175,55,.15);

}

textarea{

height:160px;
resize:none;

}

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

.glass{

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

backdrop-filter:blur(14px);

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

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

}

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