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

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #ffffff;
min-height: 100vh;
display: flex;
flex-direction: column;
}

/* Header Logo Image */
.header-logo-img {
    height: 40px;
    width: auto;
    display: block;
}

/* Header */

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
}

.header-logo {
font-size: 20px;
font-weight: bold;
text-decoration: none;
letter-spacing: -1px;
}

.logo-search { color: #1a73e8; }
.logo-buy { color: #ff6d00; }
.logo-sell { color: #34a853; }

/* Main Content */

.main-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 40px 20px;
padding-top: 80px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}

/* Logo */

.logo-container {
text-align: center;
margin-bottom: 30px;
}

.logo {
font-size: 48px;
font-weight: bold;
letter-spacing: -2px;
}

.tagline {
font-size: 18px;
color: #333;
font-style: italic;
margin-top: 5px;
}

/* Search Bar */

.search-container {
width: 100%;
max-width: 600px;
margin-bottom: 20px;
}

.search-wrapper {
position: relative;
width: 100%;
}

.search-bar {
width: 100%;
padding: 15px 50px 15px 25px;
border: 2px solid #999;
border-radius: 30px;
font-size: 16px;
outline: none;
transition: box-shadow 0.2s;
}

.search-bar:focus {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #1a73e8;
cursor: pointer;
}

/* Watch Link */

.watch-link {
margin-bottom: 40px;
font-size: 16px;
}

.watch-link a {
color: #1a73e8;
text-decoration: none;
font-weight: 600;
}

.watch-link a:hover {
text-decoration: underline;
}

/* Banner Container */

.banners-container {
display: flex;
width: 100%;
max-width: 600px;
height: 250px;
justify-content: center;
margin: 0 auto;
gap: 20px;
}

/* Banner */

.banner {
flex: 0 0 170px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
color: white;
padding-top: 50px;
}

.banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: skewX(-12deg);
z-index: -1;
}

.banner-search::before { background-color: #0d47a1; }
.banner-buy::before { background-color: #ff6d00; }
.banner-sell::before { background-color: #2e7d32; }

/* Banner Content */

.banner-content {
text-align: center;
padding: 0 10px;
display: flex;
flex-direction: column;
align-items: center;
}

.banner-title-link {
text-decoration: none;
color: white;
margin-bottom: 15px;
}

.banner-title {
font-size: 28px;
font-weight: bold;
}

.banner-links {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}

.banner-link {
color: rgba(255,255,255,0.9);
text-decoration: none;
font-size: 12px;
}

.banner-link:hover {
color: #ffffff;
text-decoration: underline;
}

/* Footer */

.footer {
border-top: 1px solid #ddd;
padding: 20px 40px;
color: #666;
font-size: 14px;

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

width: 100%;
}

.footer-left {
text-align: left;
}

.footer-right {
display: flex;
gap: 20px;
}

.footer-right a {
color: #666;
text-decoration: none;
}

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

/* Hidden Admin Link */

.admin-link {
color: #ddd;
font-size: 20px;
text-decoration: none;
padding: 0 5px;
transition: color 0.3s;
}

.admin-link:hover {
color: #1a73e8;
}

/* Mobile */

@media (max-width:768px){

.banners-container{
flex-direction:column;
height:auto;
max-width:300px;
gap:15px;
}

.banner{
width:100%;
height:150px;
padding-top:30px;
}

.banner::before{
transform:skewX(0deg);
}

.logo{
font-size:36px;
}

.header-logo-img {
height: 32px;
}

.footer{
flex-direction:column;
gap:10px;
text-align:center;
}

}