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

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

body{
font-family:Arial, Helvetica, sans-serif;
color:#333;
line-height:1.6;
background:#ffffff;
}

h1,h2,h3{
margin-bottom:15px;
}

a{
text-decoration:none;
}

/* ================================
HEADER
================================ */

header{
background:#0b1f3a;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
flex-wrap:wrap;
}

.logo img{
height:55px;
}

/* NAVIGATION */

nav{
display:flex;
align-items:center;
}

nav a{
color:white;
margin-left:18px;
font-weight:500;
}

nav a:hover{
color:#d4af37;
}

/* ================================
DROPDOWN MENU
================================ */

.dropdown{
position:relative;
display:inline-block;
}

.dropdown-content{
display:none;
position:absolute;
background:white;
min-width:200px;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
z-index:10;
}

.dropdown-content a{
color:#333;
padding:10px 15px;
display:block;
}

.dropdown-content a:hover{
background:#f2f2f2;
}

.dropdown:hover .dropdown-content{
display:block;
}

/* ================================
MOBILE MENU BUTTON
================================ */

.menu-toggle{
display:none;
font-size:30px;
color:white;
cursor:pointer;
}

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

.hero{
position:relative;
height:600px;
overflow:hidden;
}

.slide{
position:absolute;
width:100%;
height:600px;
object-fit:cover;
display:none;
}

/* HERO TEXT */

.hero-text{
position:absolute;
top:50%;
left:10%;
transform:translateY(-50%);
background:rgba(0,0,0,0.55);
padding:25px;
border-radius:6px;
max-width:520px;
color:white;
z-index:2;
}

.hero-text h1{
font-size:52px;
color:#d4af37;
margin-bottom:10px;
}

.hero-text p{
font-size:18px;
}

/* ================================
PAGE BANNERS
================================ */

.banner{
position:relative;
height:420px;
overflow:hidden;
}

.banner img{
width:100%;
height:420px;
object-fit:cover;
}

/* BANNER TEXT */

.banner-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,0.55);
padding:25px 40px;
border-radius:6px;
text-align:center;
color:white;
}

.banner-text h1{
font-size:46px;
color:#d4af37;
}

.banner-text p{
font-size:18px;
}

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

.services{
padding:80px 40px;
text-align:center;
}

.service-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
margin-top:40px;
}

.service-card{
width:280px;
background:white;
border-radius:6px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.service-card img{
width:100%;
height:200px;
object-fit:cover;
}

.service-card h3{
margin:15px;
color:#0b1f3a;
}

.service-card p{
padding:0 15px 20px 15px;
}

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

.stats{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
padding:80px 40px;
background:#f3f4f7;
text-align:center;
}

.stat{
margin:20px;
}

.stat h2{
font-size:46px;
color:#0b1f3a;
}

.stat p{
font-size:16px;
}

/* ================================
IMAGE SECTION
================================ */

.london{
position:relative;
height:350px;
overflow:hidden;
}

.london img{
width:100%;
height:350px;
object-fit:cover;
}

.london .banner-text{
background:rgba(0,0,0,0.55);
}

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

footer{
background:#0b1f3a;
color:white;
text-align:center;
padding:40px 20px;
}

footer a{
color:#d4af37;
margin:8px;
display:inline-block;
}

footer a:hover{
text-decoration:underline;
}

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

@media (max-width:768px){

/* HEADER */

header{
flex-direction:column;
align-items:flex-start;
}

.menu-toggle{
display:block;
}

nav{
display:none;
flex-direction:column;
width:100%;
background:#0b1f3a;
padding:10px;
}

nav a{
display:block;
margin:8px 0;
}

/* DROPDOWN MOBILE */

.dropdown-content{
position:relative;
background:#12294b;
box-shadow:none;
}

.dropdown-content a{
color:white;
}

/* HERO MOBILE */

.hero{
height:400px;
}

.slide{
height:400px;
}

.hero-text{
left:50%;
top:50%;
transform:translate(-50%,-50%);
max-width:90%;
text-align:center;
background:rgba(0,0,0,0.65);
padding:20px;
}

.hero-text h1{
font-size:28px;
}

.hero-text p{
font-size:15px;
}

/* BANNER MOBILE */

.banner{
height:250px;
}

.banner img{
height:250px;
}

.banner-text{
width:90%;
padding:15px;
background:rgba(0,0,0,0.65);
}

.banner-text h1{
font-size:26px;
}

.banner-text p{
font-size:14px;
}

/* SERVICES MOBILE */

.services{
padding:50px 20px;
}

.service-grid{
flex-direction:column;
align-items:center;
}

.service-card{
width:90%;
}

/* STATS MOBILE */

.stats{
flex-direction:column;
gap:30px;
}

}