/* Start custom CSS for html, class: .elementor-element-2949123 *//* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Poppins:wght@300;400;500&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.about-luxury{
position:relative;
min-height:55vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
background:#0a0a0a;
}
/* Background */
.about-bg{
position:absolute;
inset:0;
background-image:url("YOUR-IMAGE.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
transform:scale(1.05);
}
/* Dark Overlay */
.about-overlay{
position:absolute;
inset:0;
background:
linear-gradient(rgba(0,0,0,.75),
rgba(0,0,0,.75));
}
/* Content */
.about-content{
position:relative;
z-index:10;
max-width:900px;
text-align:center;
padding:40px;
}
/* Subtitle */
.about-subtitle{
display:block;
color:#c9a13d;
letter-spacing:6px;
text-transform:uppercase;
font-size:13px;
margin-bottom:20px;
}
/* Heading */
.about-content h2{
font-family:'Cormorant Garamond',serif;
font-size:92px;
line-height:1;
color:#fff;
font-weight:400;
}
.about-content h2 span{
color:#c9a13d;
font-style:italic;
}
/* Gold Line */
.gold-line{
width:60px;
height:2px;
background:#c9a13d;
margin:35px auto;
}
/* Responsive */
@media(max-width:1024px){
.about-content h2{
font-size:70px;
}
.about-content p{
font-size:16px;
}
}
@media(max-width:768px){
.about-luxury{
min-height:80vh;
}
.about-content{
padding:20px;
}
.about-content h2{
font-size:48px;
line-height:1.15;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5c28d41 *//*==========================
CONTACT INFO
===========================*/
.contact-info{
background:#f8f6f2;
padding:60px 0;
}
.contact-container{
width:100%;
max-width:1450px;
margin:auto;
padding:0 120px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:26px;
}
/* Card */
.contact-card{
background:#fff;
border:1px solid #eeeeee;
padding:42px 30px;
text-align:center;
position:relative;
transition:.45s ease;
overflow:hidden;
opacity:0;
transform:translateY(60px);
}
/* Animation */
.contact-card:nth-child(1){
animation:fadeUp .8s ease forwards;
animation-delay:.2s;
}
.contact-card:nth-child(2){
animation:fadeUp .8s ease forwards;
animation-delay:.4s;
}
.contact-card:nth-child(3){
animation:fadeUp .8s ease forwards;
animation-delay:.6s;
}
.contact-card:nth-child(4){
animation:fadeUp .8s ease forwards;
animation-delay:.8s;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(60px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* Gold Line */
.contact-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:2px;
background:#caa343;
transform:scaleX(0);
transform-origin:left;
transition:.4s;
}
/* Hover */
.contact-card:hover{
border-color:#caa343;
transform:translateY(-14px);
box-shadow:0 25px 60px rgba(0,0,0,.08);
}
.contact-card:hover::before{
transform:scaleX(1);
}
/* Icon */
.contact-icon{
width:50px;
height:50px;
margin:0 auto 28px;
border:1px solid #caa343;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:#caa343;
transition:.4s;
}
.contact-card:hover .contact-icon{
background:#caa343;
color:#fff;
}
/* Heading */
.contact-card h3{
font-family:"Cormorant Garamond",serif;
font-size:19px;
font-weight:500;
color:#1b2235;
margin-bottom:20px;
}
/* Text */
.contact-card p{
font-family:"Jost",sans-serif;
font-size:15px;
line-height:1.8;
color:#666;
margin:0;
}
/* Responsive */
@media(max-width:1200px){
.contact-container{
grid-template-columns:repeat(2,1fr);
padding:0 40px;
}
}
@media(max-width:768px){
.contact-container{
grid-template-columns:1fr;
padding:0 20px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4018516 *//*==============================
Google Font
===============================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Jost',sans-serif;
background:#ffffff;
color:#24304b;
}
img{
max-width:100%;
display:block;
}
a{
text-decoration:none;
}
.container{
width:1280px;
max-width:80%;
margin:auto;
}
/*==============================
Section
===============================*/
.contact-section{
padding:90px 0;
}
.contact-section .container{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:65px;
align-items:flex-start;
}
/*==============================
Left Side
===============================*/
.sub-title{
display:block;
color:#c8a448;
letter-spacing:6px;
font-size:12px;
margin-bottom:18px;
text-transform:uppercase;
}
.left-column h1{
font-family:'Cormorant Garamond',serif;
font-size:66px;
line-height:1.05;
font-weight:400;
color:#10284d;
margin-bottom:30px;
}
.gold-line{
width:48px;
height:2px;
background:#c8a448;
margin-bottom:45px;
}
/*==============================
Form
===============================*/
.row{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:22px;
}
.field{
display:flex;
flex-direction:column;
}
.field label{
font-size:11px;
letter-spacing:3px;
color:#68728c;
margin-bottom:10px;
text-transform:uppercase;
}
.field input,
.field select,
.field textarea{
border:1px solid #e5e8ef;
background:#fff;
font-family:'Jost',sans-serif;
padding:17px 18px;
font-size:16px;
color:#2d3d5d;
outline:none;
transition:.35s;
}
.field textarea{
resize:none;
height:145px;
}
.field input::placeholder,
.field textarea::placeholder{
color:#b8bcc7;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
border-color:#c7a74c;
box-shadow:0 0 0 4px rgba(199,167,76,.12);
}
/*==============================
Button
===============================*/
button{
margin-top:28px;
border:none;
background:#c7a74c;
color:#fff;
padding:18px 42px;
font-size:14px;
letter-spacing:2px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:12px;
transition:.35s;
}
button:hover{
background:#0e2b50;
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,.15);
}
button i{
transition:.35s;
}
button:hover i{
transform:translateX(5px);
}
/*==============================
Right Side
===============================*/
.right-column{
display:flex;
flex-direction:column;
gap:30px;
}
/*==============================
Location Card
===============================*/
.location-card{
background:#f7f3e8;
border:1px solid #ece4cf;
height:290px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transition:.4s;
}
.location-card:hover{
transform:translateY(-6px);
box-shadow:0 25px 45px rgba(0,0,0,.08);
}
.location-card .icon{
font-size:38px;
color:#c8a448;
margin-bottom:20px;
}
.location-card h3{
font-family:'Cormorant Garamond',serif;
font-size:42px;
font-weight:400;
color:#13284a;
margin-bottom:8px;
}
.location-card p{
color:#9da5ba;
font-size:18px;
}
/*==============================
Image
===============================*/
.image-card{
overflow:hidden;
}
.image-card img{
width:100%;
transition:1.2s;
}
.image-card:hover img{
transform:scale(1.08);
}
/*==============================
Social Card
===============================*/
.social-card{
border:1px solid #eceef3;
padding:40px;
transition:.4s;
}
.social-card:hover{
box-shadow:0 20px 45px rgba(0,0,0,.08);
}
.social-card h2{
font-family:'Cormorant Garamond',serif;
font-size:42px;
font-weight:400;
color:#13284a;
margin-bottom:22px;
}
.icons{
display:flex;
gap:18px;
margin-bottom:25px;
}
.icons a{
width:42px;
height:42px;
border:1px solid #d7dbe5;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#7f889d;
transition:.35s;
}
.icons a:hover{
background:#c7a74c;
color:#fff;
border-color:#c7a74c;
transform:translateY(-4px);
}
.social-card p{
color:#8d94a8;
line-height:1.9;
font-size:17px;
}
/*==============================
Responsive
===============================*/
@media(max-width:1100px){
.contact-section .container{
grid-template-columns:1fr;
gap:55px;
}
.left-column h1{
font-size:52px;
}
}
@media(max-width:768px){
.row{
grid-template-columns:1fr;
}
.left-column h1{
font-size:42px;
}
.location-card{
height:240px;
}
.social-card{
padding:30px;
}
button{
width:100%;
justify-content:center;
}
}/* End custom CSS */