/*
Theme Name: WTechni Master Edition
Author: Gemini
Description: Exact layout and grid matching wtechni.com
Version: 10.0
*/

/* 1. Core Reset & Typography */
body { 
    font-family: 'Hind', sans-serif; 
    background-color: #ffffff; 
    color: #333; 
    margin: 0; 
    -webkit-font-smoothing: antialiased;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 15px; }

/* 2. Header & Nav */
header { 
    background: #fff; 
    border-bottom: 1px solid #eee; 
    padding: 10px 0; 
    position: sticky; 
    top: 0; 
    z-index: 1000;
}
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo a { font-size: 28px; font-weight: 700; color: #d32f2f; text-decoration: none; display: flex; align-items: center; gap: 10px; }
nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
nav ul li a { text-decoration: none; color: #4b7a0d; font-weight: 600; font-size: 17px; }

/* 3. Hero Section (Image + Welcome Text) */
.hero-section { background: #fff; padding: 40px 0; border-bottom: 1px solid #eee; }
.hero-flex { display: flex; align-items: center; gap: 40px; }
.hero-left { flex: 1; text-align: center; }
.hero-left img { width: 100%; max-width: 480px; height: auto; }
.hero-right { flex: 1.2; }
.hero-right h1 { color: #006400; font-size: 40px; margin: 0 0 15px; font-weight: 700; line-height: 1.2; }
.hero-right p { font-size: 18px; line-height: 1.6; color: #555; margin-bottom: 25px; }
.hero-btn { background: #fff5ba; color: #4b7a0d; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-weight: 700; border: 1px solid #e6db99; display: inline-block; }

/* 4. Section Dividers (The -Title- look) */
.section-divider { 
    text-align: center; 
    color: #008000; 
    font-size: 30px; 
    font-weight: 700; 
    margin: 50px 0 30px; 
}

/* 5. The Amazing Grid & Main Layout */
.main-layout { display: flex; gap: 30px; margin-top: 20px; }
.content-area { flex: 3; }
.sidebar { flex: 1; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 50px; }
.post-card { background: #fff; display: flex; flex-direction: column; }
.post-thumb { overflow: hidden; aspect-ratio: 16/9; border-radius: 4px; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.post-card:hover .post-thumb img { transform: scale(1.1); }

.post-info h3 { font-size: 17px; margin: 12px 0; line-height: 1.4; font-weight: 600; }
.post-info h3 a { color: #d32f2f; text-decoration: none; }

/* 6. Join Telegram Floating Button */
.join-tg-fixed {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #c00;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px 0 0 5px;
    font-weight: 700;
    text-decoration: none;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* 7. Responsive Fixes */
@media (max-width: 768px) {
    .hero-flex { flex-direction: column; text-align: center; }
    .post-grid { grid-template-columns: 1fr; }
    .main-layout { flex-direction: column; }
    .hero-right h1 { font-size: 30px; }
    .hero-left img { max-width: 320px; }
}