*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{

background:#fafafa;

}

.container{

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

}

/* TOPBAR */

.topbar{

background:#171822;
padding:12px 0;
color:#fff;

}

.top-flex{

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

}

.left{

display:flex;
gap:30px;

}

.left a{

color:#fff;
text-decoration:none;
font-size:15px;

}

.left i{

color:#f6b313;
margin-right:8px;

}

.right{

display:flex;
gap:12px;

}

.right a{

width:42px;
height:42px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid rgba(255,255,255,.15);
border-radius:12px;
color:white;
transition:.4s;

}

.right a:hover{

background:#f6b313;
color:#000;

}

/* NAVBAR */

.navbar{

background:white;
position:sticky;
top:0;
z-index:999;
box-shadow:0 10px 35px rgba(0,0,0,.06);

}

.nav{

display:flex;
justify-content:space-between;
align-items:center;
padding:25px 0;

}

.logo{

display:flex;
align-items:center;
gap:18px;

}

.logo img{

width:150px;

}

.logo h2{

font-size:36px;
font-weight:700;

}

.logo span{

color:#666;
letter-spacing:2px;
font-size:15px;

}

nav ul{

display:flex;
gap:45px;
list-style:none;

}

nav a{

text-decoration:none;
font-size:18px;
font-weight:600;
color:#222;
padding:14px 22px;
border-radius:40px;
transition:.4s;

}

nav a:hover,
nav .active{

background:#fff6df;
color:#d89b00;

}

.call-btn{

display:flex;
align-items:center;
gap:18px;
padding:14px 26px;
border:2px solid #f6b313;
border-radius:60px;
transition:.4s;
cursor:pointer;

}

.call-btn i{

width:55px;
height:55px;
background:#f6b313;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
font-size:22px;

}

.call-btn:hover{

transform:translateY(-5px);
box-shadow:0 18px 35px rgba(246,179,19,.35);

}

.call-btn small{

color:#888;

}

.call-btn h4{

font-size:24px;

}

.menu-btn{

display:none;
font-size:28px;
cursor:pointer;

}

/* MOBILE */

@media(max-width:992px){

nav{

position:absolute;
left:0;
top:100%;
width:100%;
background:white;
display:none;

}

nav.active{

display:block;

}

nav ul{

flex-direction:column;
padding:20px;

}

.call-btn{

display:none;

}

.menu-btn{

display:block;

}

.logo h2{

font-size:24px;

}

.logo img{

width:80px;

}

}

@media(max-width:600px){

.left{

display:none;

}

.top-flex{

justify-content:center;

}

.logo span{

display:none;

}

.logo h2{

font-size:20px;

}

}

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

.hero{

padding:120px 0;
position:relative;
overflow:hidden;
background:#fff;

}

/* Background Glow */

.hero::before{

content:"";
position:absolute;
right:-250px;
top:-120px;

width:600px;
height:600px;

background:radial-gradient(circle,
rgba(255,191,0,.28),
transparent 70%);

pointer-events:none;

}

.hero::after{

content:"";
position:absolute;

left:-250px;
bottom:-250px;

width:550px;
height:550px;

background:radial-gradient(circle,
rgba(255,191,0,.15),
transparent 70%);

pointer-events:none;

}

.hero-wrapper{

display:flex;
justify-content:space-between;
align-items:center;
gap:80px;

position:relative;
z-index:5;

}

/* LEFT */

.hero-left{

flex:1;

}

.hero-tag{

display:inline-block;

background:#fff5dc;
color:#d89b00;

padding:10px 22px;

border-radius:40px;

font-weight:600;

margin-bottom:25px;

}

.hero-left h1{

font-size:72px;

line-height:78px;

font-weight:800;

color:#111;

margin-bottom:30px;

}

.hero-left p{

max-width:560px;

font-size:20px;

line-height:38px;

color:#666;

margin-bottom:40px;

}

/* Buttons */

.hero-btns{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.btn-primary{

background:#f6b313;

padding:18px 42px;

border-radius:50px;

text-decoration:none;

font-weight:600;

color:#111;

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(246,179,19,.45);

}

.btn-outline{

border:2px solid #f6b313;

padding:18px 42px;

border-radius:50px;

text-decoration:none;

font-weight:600;

color:#f6b313;

transition:.35s;

}

.btn-outline:hover{

background:#f6b313;

color:#111;

transform:translateY(-6px);

}

/* RIGHT */

.hero-right{

flex:1;
display:flex;
justify-content:center;

}

.contact-card{

width:100%;
max-width:620px;

background:white;

padding:50px;

border-radius:30px;

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

transition:.4s;

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(246,179,19,.25);

}

.contact-card h2{

font-size:40px;

margin-bottom:35px;

}

.contact-item{

margin-bottom:28px;

}

.contact-item span{

display:block;

color:#999;

margin-bottom:8px;

font-size:15px;

}

.contact-item h4{

font-size:24px;

color:#111;

}

/*==============================
 Responsive
==============================*/

@media(max-width:992px){

.hero{

padding:80px 0;

}

.hero-wrapper{

flex-direction:column;

text-align:center;

}

.hero-left p{

margin:auto;
margin-bottom:40px;

}

.hero-btns{

justify-content:center;

}

.hero-left h1{

font-size:52px;

line-height:58px;

}

.contact-card{

margin-top:40px;

}

}

@media(max-width:600px){

.hero{

padding:60px 0;

}

.hero-left h1{

font-size:40px;

line-height:46px;

}

.hero-left p{

font-size:16px;

line-height:28px;

}

.contact-card{

padding:30px;

}

.contact-card h2{

font-size:30px;

}

.contact-item h4{

font-size:18px;

}

.btn-primary,
.btn-outline{

width:100%;

text-align:center;

}

}



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

.floating-buttons{

position:fixed;

right:25px;

bottom:30px;

display:flex;

flex-direction:column;

gap:15px;

z-index:9999;

}

.float{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:24px;

text-decoration:none;

color:#fff;

transition:.35s;

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

}

.whatsapp{

background:#25D366;

}

.call{

background:#f6b313;

color:#111;

}

.float:hover{

transform:translateY(-8px) scale(1.08);

}


/*=========================
Footer
=========================*/

.footer{

margin-top:120px;

background:#171822;

color:white;

padding:80px 0 0;

}

.footer-grid{

display:grid;

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

gap:50px;

}

.footer-logo{

width:120px;

margin-bottom:20px;

}

.footer h3{

margin-bottom:20px;

}

.footer h4{

margin-bottom:20px;

color:#f6b313;

}

.footer p{

line-height:32px;

color:#ccc;

}

.footer ul{

list-style:none;

}

.footer li{

margin-bottom:15px;

}

.footer a{

text-decoration:none;

color:#ddd;

transition:.3s;

}

.footer a:hover{

color:#f6b313;

padding-left:6px;

}

.social{

display:flex;

gap:12px;

margin-top:20px;

}

.social a{

width:45px;

height:45px;

background:#262836;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

transition:.3s;

}

.social a:hover{

background:#f6b313;

color:#111;

}

.copyright{

margin-top:60px;

padding:25px;

text-align:center;

background:#101117;

font-size:15px;

color:#aaa;

}


/*=========================
Responsive
=========================*/

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social{

justify-content:center;

}

.floating-buttons{

right:15px;

bottom:20px;

}

}


.booking-section{
padding:80px 7%;
background:#fff;
}

.section-title{
text-align:center;
margin-bottom:50px;
}

.section-title span{
display:inline-block;
padding:10px 20px;
background:#FFF4D8;
border-radius:50px;
color:#D89B00;
font-weight:600;
margin-bottom:20px;
}

.section-title h2{
font-size:36px;
font-weight:800;
line-height:1.2;
margin-bottom:20px;
}

.section-title p{
max-width:840px;
margin:auto;
color:#666;
font-size:18px;
}

.booking-wrapper{
display:grid;
grid-template-columns:320px 1fr;
gap:35px;
align-items:start;
}

.contact-boxes{
display:flex;
flex-direction:column;
gap:20px;
}

.info-box{
display:flex;
gap:15px;
padding:28px;
background:#fff;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
}

.info-box:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(245,179,18,.18);
}

.icon{
width:60px;
height:60px;
background:#FFF4D8;
border-radius:18px;
display:flex;
justify-content:center;
align-items:center;
color:#D89B00;
font-size:22px;
}

.booking-form{
padding:30px;
background:#fff;
border-radius:18px;
box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.booking-form h2{
font-size:32px;
margin-bottom:15px;
}

.booking-form p{
color:#666;
margin-bottom:25px;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:20px;
}

.grid input,
textarea{
width:100%;
padding:16px;
border:1px solid #ddd;
border-radius:14px;
font-size:16px;
outline:none;
transition:.3s;
}

.grid input:focus,
textarea:focus{
border-color:#f6b313;
box-shadow:0 0 0 4px rgba(246,179,19,.12);
}

textarea{
resize:none;
margin-bottom:20px;
}

.booking-form button{
padding:18px 40px;
background:#f6b313;
border:none;
border-radius:50px;
font-size:18px;
font-weight:700;
cursor:pointer;
transition:.3s;
}

.booking-form button:hover{
transform:translateY(-5px);
box-shadow:0 18px 40px rgba(246,179,19,.4);
}

@media(max-width:992px){
.booking-wrapper{
grid-template-columns:1fr;
}

.grid{
grid-template-columns:1fr;
}

.section-title h2{
font-size:40px;
}
}


/*=========================
LOCATION SECTION
==========================*/

.location-section{

padding:100px 0;

background:#fff;

position:relative;

overflow:hidden;

}

/* Glow */

.location-section::before{

content:"";

position:absolute;

right:-220px;

top:-120px;

width:450px;

height:450px;

background:radial-gradient(circle,
rgba(246,179,19,.18),
transparent 70%);

}

.section-heading{

text-align:center;

margin-bottom:55px;

}

.section-tag{

display:inline-block;

padding:10px 24px;

background:#FFF5DD;

border-radius:40px;

color:#C58B00;

font-weight:600;

letter-spacing:1px;

margin-bottom:20px;

}

.section-heading h2{

font-size:58px;

font-weight:800;

color:#101828;

margin-bottom:20px;

}

.section-heading p{

max-width:760px;

margin:auto;

font-size:19px;

line-height:34px;

color:#667085;

}

.map-box{

width:100%;

height:520px;

border-radius:28px;

overflow:hidden;

box-shadow:0 18px 45px rgba(0,0,0,.10);

transition:.4s;

}

.map-box:hover{

transform:translateY(-8px);

box-shadow:0 30px 60px rgba(246,179,19,.22);

}

.map-box iframe{

width:100%;

height:100%;

border:0;

}

/* Mobile */

@media(max-width:992px){

.section-heading h2{

font-size:42px;

}

.map-box{

height:420px;

}

}

@media(max-width:576px){

.location-section{

padding:70px 20px;

}

.section-heading h2{

font-size:32px;

}

.section-heading p{

font-size:16px;

line-height:28px;

}

.map-box{

height:320px;

border-radius:20px;

}

}