/*===== Banner =====*/

.about-banner{
position:relative;
height:650px;
overflow:hidden;
border-radius:0 0 50px 50px;
}

.about-banner img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.banner-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.75),
rgba(0,0,0,.2)
);
z-index:1;
}

.banner-content{
position:absolute;
bottom:80px;
right:8%;
z-index:2;
color:#fff;
max-width:600px;
}

.banner-content h1{
font-size:60px;
margin-bottom:15px;
font-weight:700;
}

.banner-content p{
font-size:20px;
opacity:.9;
}


/*===== About =====*/

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

.studio-hero{

position:relative;
height:100vh;
overflow:hidden;

}

.studio-hero img{

width:100%;
height:100%;
object-fit:cover;
display:block;

}

.studio-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.82),
rgba(0,0,0,.25)
);

z-index:1;

}

.studio-content{

position:absolute;

bottom:10%;
right:8%;

z-index:2;

max-width:700px;

color:#fff;

}

.hero-mini{

display:inline-block;

margin-bottom:20px;

letter-spacing:5px;

font-size:14px;

color:#d6b98c;

}

.studio-content h1{

font-size:75px;

line-height:1.2;

margin-bottom:25px;

font-weight:700;

}

.studio-content p{

font-size:20px;

line-height:2;

color:rgba(255,255,255,.82);

max-width:550px;

}







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

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

.contact-luxury{

padding:150px 0 100px;

}


.contact-head{

text-align:center;

margin-bottom:80px;

}

.contact-head span{

display:block;

color:#d4b37b;

letter-spacing:4px;

font-size:13px;

margin-bottom:12px;

}

.contact-head h2{

font-size:58px;

margin-bottom:15px;

color:#f0d7a2;

}

.contact-head p{

max-width:700px;

margin:auto;

color:#999;

line-height:2;

}



/* کارت ها */

.contact-grid{

display:grid;

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

gap:35px;

}



.contact-card{

position:relative;

padding:85px 35px 40px;

text-align:center;

border-radius:35px;

overflow:visible;

background:
linear-gradient(
180deg,
rgba(212,179,123,.15),
#0f0f0f 45%,
#050505
);

border:1px solid rgba(212,179,123,.18);

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

transition:.45s;

}


.contact-card:hover{

transform:translateY(-10px);

border-color:#d4b37b;

box-shadow:
0 0 30px rgba(212,179,123,.15),
0 25px 70px rgba(0,0,0,.5);

}



/* آیکون */

.contact-icon{

position:absolute;

left:50%;

top:0;

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

width:95px;

height:95px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

background:
linear-gradient(
145deg,
#ecd7ad,
#9c7946
);

border:6px solid #101010;

box-shadow:
0 0 40px rgba(212,179,123,.4);

z-index:5;

}

.contact-icon i{

color:#fff;

}



/* متن */

.contact-card h4{

margin-top:15px;

margin-bottom:25px;

font-size:32px;

color:#f0d7a2;

}

.contact-links{

display:flex;

flex-direction:column;

gap:15px;

}

.contact-links a,
.contact-links span{

text-decoration:none;

font-size:18px;

color:#ddd;

transition:.3s;

}

.contact-links a:hover{

color:#d4b37b;

}



/* دکمه */

.main-btn{

display:inline-block;

margin-top:30px;

padding:14px 35px;

border-radius:50px;

text-decoration:none;

color:#fff;

font-weight:700;

background:
linear-gradient(
90deg,
#8e7348,
#d8be8f
);

box-shadow:
0 10px 30px rgba(212,179,123,.3);

transition:.4s;

}

.main-btn:hover{

transform:translateY(-4px);

color:#fff;

}



/* موبایل */

@media(max-width:991px){

.contact-grid{

grid-template-columns:1fr;

gap:65px;

padding:0 20px;

}

.contact-card{

max-width:340px;

margin:auto;

}

}


@media(max-width:768px){

.contact-head h2{

font-size:40px;

}

.contact-icon{

width:90px;

height:90px;

font-size:30px;

}

}






/*================ MAP LUXURY ================*/

.map-section{
padding:80px 0 120px;
}


.map-box{

position:relative;

overflow:hidden;

border-radius:35px;

background:
linear-gradient(
180deg,
rgba(212,179,123,.12),
#0b0b0b
);

border:1px solid rgba(212,179,123,.12);

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

}



/* هدر */

.map-header{

padding:55px 40px 35px;

text-align:center;

position:relative;

}


.map-header:after{

content:"";

position:absolute;

left:50%;
bottom:0;

transform:translateX(-50%);

width:140px;
height:2px;

background:
linear-gradient(
90deg,
transparent,
#d4b37b,
transparent
);

}


.map-header i{

width:95px;
height:95px;

display:flex;

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

margin:0 auto 25px;

border-radius:50%;

font-size:38px;

background:
linear-gradient(
145deg,
#ecd7ad,
#a37d4b
);

color:#fff;

box-shadow:
0 0 45px rgba(212,179,123,.35);

border:6px solid #111;

}



.map-header h3{

font-size:52px;

color:#f0d7a2;

margin-bottom:10px;

font-weight:700;

}


.map-header p{

font-size:20px;

color:#b8b8b8;

margin:0;

}



/* نقشه */

.map-frame{

height:540px;

overflow:hidden;

position:relative;

}


.map-frame iframe{

width:100%;
height:100%;
border:0;

}



/* دکمه مسیریابی */

.route-btn{

position:absolute;

bottom:25px;

left:25px;

z-index:10;

display:flex;

align-items:center;

gap:10px;

padding:16px 28px;

border-radius:60px;

text-decoration:none;

font-size:15px;

font-weight:700;

color:#fff;

background:
linear-gradient(
90deg,
#8f7348,
#d9be8e
);

box-shadow:
0 15px 35px rgba(212,179,123,.35);

transition:.4s;

}


.route-btn:hover{

transform:translateY(-4px);

color:#fff;

box-shadow:
0 20px 45px rgba(212,179,123,.45);

}


.route-btn i{

font-size:18px;

}



/* موبایل */

@media(max-width:768px){

.map-header{

padding:45px 20px 30px;

}

.map-header h3{

font-size:34px;

line-height:1.6;

}

.map-header p{

font-size:15px;

}

.map-header i{

width:80px;
height:80px;

font-size:30px;

}

.map-frame{

height:380px;

}

.route-btn{

left:50%;

transform:translateX(-50%);

bottom:15px;

padding:13px 25px;

}

}