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

body{
background:#f6f7fb;
color:#333;
}


/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 80px;
background:white;
}

.logo{
font-weight:600;
color:#f5b400;
font-size:20px;
}

.nav-links{
display:flex;
gap:30px;
list-style:none;
}

.nav-links a{
text-decoration:none;
color:#333;
font-size:14px;
}

.login-btn{
background:#2f3d8f;
color:white;
border:none;
padding:10px 20px;
border-radius:20px;
cursor:pointer;
}


/* HERO */

.hero{
height: 420px;
background:url("https://ilonggotraveler.com/wp-content/uploads/2025/07/wp-17514551071577503857855137566166.jpg") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero h1{
color:white;
font-size:48px;
margin-bottom:10px;
color: white; /* Fill color of the text */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; 
}

.hero p{
color:white;
margin-bottom:30px;
}

.bellow-content{
color:white;
margin-bottom:30px;
color: white; /* Fill color of the text */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; 
}

.search-bar{
background:white;
display:flex;
padding:15px;
border-radius:15px;
gap:30px;
align-items:center;
}

.search-item span{
font-size:12px;
color:gray;
}

.search-item p{
font-weight:500;
color:gray;
}

.search-btn{
background:#2f3d8f;
color:white;
border:none;
padding:12px 25px;
border-radius:10px;
cursor:pointer;
}


/* WHY CHOOSE */

.why{
padding:80px;
}

.why h2{
margin-bottom:40px;
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.why-card{
background:white;
padding:20px;
border-radius:10px;
}


/* LOCATIONS */

.locations{
padding:60px 80px;
}

.section-header{
display:flex;
justify-content:space-between;
margin-bottom:30px;
}

.location-grid{
display:flex;
gap:30px;
}

.location{
text-align:center;
}

.location img{
width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin-bottom:10px;
}
/* =========================================
   ULTIMATE MOBILE RESPONSIVENESS FIX 
   ========================================= */

@media (max-width: 768px) {
    /* 1. Stop the whole screen from sliding left/right */
    body {
        overflow-x: hidden !important; 
    }

    /* 2. Fix the Navbar & Logo Overlap */
    .navbar {
        display: flex !important;
        flex-direction: row !important; /* Logo left, button right */
        justify-content: space-between !important;
        padding: 15px 20px !important;
        background-color: white !important; /* Ensures it doesn't blend into the hero */
    }
    .nav-links { 
        display: none !important; /* Hide the middle links */
    }

    /* 3. Push Hero text down so it doesn't hit the navbar */
    .hero {
        padding-top: 100px !important; 
    }
    .hero h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin-top: 10px !important;
    }

    /* 4. Fix the Search Bar */
    .search-bar {
        flex-direction: column !important;
        padding: 15px !important;
        width: 90% !important;
        margin: 0 auto !important;
    }
    .search-item {
        border-right: none !important;
        border-bottom: 1px solid #ddd !important;
        padding: 15px 0 !important;
        width: 100% !important;
    }
    .search-item:last-of-type {
        border-bottom: none !important;
    }
    .search-btn {
        width: 100% !important;
        margin-top: 15px !important;
    }

    /* 5. Fix "Why Choose" Cards (Stack them) */
    .why {
        padding: 20px !important;
    }
    .why-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    .why-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 6. Fix "Locations" Grid (Make it a swipeable row like an app!) */
    .locations {
        padding: 20px !important;
    }
    .location-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* Lets users swipe left/right to see locations */
        gap: 15px !important;
        padding-bottom: 15px !important;
    }
    .location {
        flex: 0 0 auto !important; /* Stops the circles from squishing */
    }
}