/*
Theme Name: TealTrail
Theme URI: http://example.com/tealtrail
Author: SABBIR AHMAD
Description: A modern travel agency theme with GoZayaan/ShareTrip inspired design.
Version: 1.1
Text Domain: tealtrail
*/
/* Basic Reset */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f7f6; color: #333; }
a { text-decoration: none; color: inherit; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* Header */
header { background: #fff; padding: 15px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo a { font-size: 24px; font-weight: bold; color: #008080; text-decoration: none; }
.nav-links { display: flex; gap: 20px; font-weight: 500; align-items: center; }
.btn-login { background: #008080; color: #fff; padding: 8px 20px; border-radius: 20px; }

/* Hero & Search Section */
.hero { background: url('https://placehold.co/1200x300/a3d5e0/ffffff?text=Ocean+Background') no-repeat center center/cover; padding: 40px 0 60px; text-align: center; }
.search-widget { background: #fff; max-width: 1000px; margin: 0 auto; border-radius: 10px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); position: relative; top: 20px; }
.search-tabs { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.search-tabs span { cursor: pointer; font-weight: bold; color: #555; }
.search-tabs .active { color: #008080; border-bottom: 2px solid #008080; }
.search-inputs { display: flex; gap: 10px; text-align: left; }
.input-group { flex: 1; border: 1px solid #ddd; padding: 10px; border-radius: 5px; }
.input-group label { display: block; font-size: 11px; color: #777; margin-bottom: 5px; }
.input-group input { width: 100%; border: none; outline: none; font-weight: bold; }
.btn-search { background: #ffc107; color: #000; padding: 10px 40px; border: none; border-radius: 5px; font-weight: bold; font-size: 16px; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); cursor: pointer; }

/* Exclusive Offers */
.offers { margin-top: 60px; }
.offers h2 { margin-bottom: 20px; }
.offer-grid { display: flex; gap: 15px; overflow-x: auto; }
.offer-card { flex: 1; min-width: 250px; height: 120px; background: #ddd; border-radius: 10px; background-size: cover; }

/* Main Content Layout */
.main-layout { display: grid; grid-template-columns: 2.5fr 1fr; gap: 20px; margin-top: 40px; margin-bottom: 40px; }

/* Left Content: Explore Bangladesh */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.card img { width: 100%; height: 150px; object-fit: cover; }
.card-body { padding: 15px; }
.card-title { font-size: 14px; font-weight: bold; margin-bottom: 10px; height: 40px; overflow: hidden; }
.btn-details { background: #5a4fcf; color: white; padding: 5px 10px; font-size: 12px; border-radius: 3px; display: inline-block; }

/* Banner Ad */
.banner-ad { background: #000080; color: white; text-align: center; padding: 20px; border-radius: 8px; margin: 20px 0; display: flex; justify-content: space-between; align-items: center; }

/* Vlogs */
.vlog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vlog-card { height: 100px; background: #333; border-radius: 8px; position: relative; }

/* Right Sidebar */
.sidebar .widget { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.widget h3 { font-size: 16px; margin-bottom: 15px; color: #008080; }
.widget select { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; }
.btn-explore { background: #66cdaa; color: white; width: 100%; padding: 10px; border: none; border-radius: 5px; cursor: pointer; }

.hotel-item { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
.hotel-item img { width: 100%; height: 120px; border-radius: 5px; object-fit: cover; }

/* Footer */
footer { background: #1a1a2e; color: #ccc; padding: 40px 0; font-size: 14px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 20px; }
.footer-inner h4 { color: #fff; margin-bottom: 15px; }
.footer-inner ul { list-style: none; }
.footer-inner ul li { margin-bottom: 8px; }

@media (max-width: 992px) {
    .main-layout { grid-template-columns: 1fr; }
    .explore-grid { grid-template-columns: repeat(2, 1fr); }
    .vlog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .search-inputs { flex-direction: column; }
    .btn-search { position: static; transform: none; width: 100%; margin-top: 15px; }
    .search-widget { top: 0; }
    .footer-inner { grid-template-columns: 1fr; }
    .explore-grid { grid-template-columns: 1fr; }
    .banner-ad { flex-direction: column; gap: 15px; }
    .nav-links { display: none; /* simple mobile nav hide for now */ }
}