/* Locations Page Styles */
body { margin:0; font-family:Arial, sans-serif; background:#f4f4f4; }

header { background:#222; padding:15px 30px; color:#fff; display:flex; justify-content:space-between; align-items:center; }
header .logo { font-size:22px; font-weight:bold; }
header nav a { color:#fff; margin-left:20px; text-decoration:none; font-size:15px; }
header nav a.active { border-bottom:2px solid #ffcc00; }
header nav a:hover { opacity:0.7; }

.locations-section { padding:60px 20px; text-align:center; }
.locations-section h1 { font-size:32px; margin-bottom:30px; }

.loc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; max-width:1100px; margin:auto; }
.loc-box { background:#fff; padding:25px; border-radius:10px; box-shadow:0 0 8px rgba(0,0,0,0.1); font-size:16px; font-weight:500; }
.loc-box:hover { transform:scale(1.03); transition:0.3s; background:#fffae6; }

footer { background:#222; text-align:center; color:#fff; padding:12px; margin-top:40px; font-size:14px; }

/* Top Header Bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #444;
    color: #fff;
    padding: 5px 20px;
    font-size: 14px;
}

.top-bar .contact-info {
    text-align: center;
    flex: 1;
}

.top-bar .social-icons {
    display: flex;
    gap: 15px;
}

.top-bar .social-icons a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.top-bar .social-icons a.facebook:hover {
    color: #3b5998;
}

.top-bar .social-icons a.instagram:hover {
    color: #e1306c;
}

.top-bar .social-icons a.youtube:hover {
    color: #ff0000;
}

/* Logo */
header .logo img {
    width: 50px;       /* Change size as per your design */
    height: 50px;      /* Or remove height to auto-adjust */
    border-radius: 50%; /* Remove this if you don't want round image */
    object-fit: cover;
}
.logo {
    display: flex;
    align-items: center;   /* Vertically align image & text */
    gap: 10px;             /* Space between image and text */
    font-size: 20px;
    font-weight: bold;
}

/* Adjust logo image size */
.logo img {
    height: 45px;
    width: 45px;
    object-fit: cover;
    border-radius: 50%;  /* Remove if you don't want a round image */
}