*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Poppins', sans-serif;
}

body{
background:#0f1c17;
color:white;
}

/* HERO SECTION */

.hero{

height:100vh;

background-image:url("../images/farmer.png");

background-size:cover;
background-position:center;

display:flex;
flex-direction:column;
justify-content:center;

padding:60px;

border-radius:20px;
margin:40px;

box-shadow:0 20px 40px rgba(0,0,0,0.4);
}


/* NAVBAR */

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

position:absolute;
top:60px;
left:80px;
right:80px;
}

.logo{
font-weight:700;
font-size:20px;
color:#FFD54F;
}

.menu a{
margin:0 15px;
text-decoration:none;
color:white;
font-size:14px;
}

.contact{

background:#FFD54F;
border:none;
padding:10px 18px;
border-radius:25px;
cursor:pointer;
font-weight:600;
}


/* HERO TEXT */

.hero-content{

max-width:600px;

}

.hero-content h3{
font-weight:300;
letter-spacing:2px;
}

.hero-content h1{

font-size:60px;
font-weight:700;
margin:20px 0;

}

.hero-content p{

font-size:14px;
opacity:0.8;
margin-bottom:30px;

}

.cta{

background:#FFD54F;
border:none;
padding:14px 28px;
border-radius:25px;
font-weight:600;
cursor:pointer;

}
/* MOBILE RESPONSIVE */

@media (max-width:768px){

.hero{
height:auto;
padding:40px 20px;
margin:10px;
}

.navbar{
flex-direction:column;
gap:10px;
top:20px;
left:20px;
right:20px;
}

.menu{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.menu a{
margin:6px;
font-size:12px;
}

.hero-content{
text-align:center;
margin-top:80px;
}

.hero-content h1{
font-size:36px;
}

.hero-content p{
font-size:13px;
}

.cta{
padding:12px 20px;
}

}
.assistant{

background:#101f1a;

padding:80px 20px;

text-align:center;

}

.assistant h2{

font-size:36px;
margin-bottom:10px;

}

.assistant p{

opacity:0.8;
margin-bottom:40px;

}

.assistant-box{

display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;

}

.assistant-box input{

padding:14px;
width:300px;
border-radius:10px;
border:none;

}

.assistant-box button{

padding:14px 20px;
background:#FFD54F;
border:none;
border-radius:10px;
cursor:pointer;

}

.response-box{

margin-top:30px;
max-width:600px;
margin-left:auto;
margin-right:auto;

background:#1c2f29;

padding:20px;

border-radius:10px;

}
.access-panel{

position:fixed;
right:20px;
top:120px;

background:#1c2f29;

padding:20px;

border-radius:10px;

display:none;

flex-direction:column;

gap:10px;

}

.access-panel button{

padding:10px;

background:#FFD54F;

border:none;

border-radius:6px;

cursor:pointer;

}
.high-contrast{

background:black;
color:yellow;

}

.high-contrast a{
color:yellow;
}
.access-panel{
display:none;
flex-direction:column;
}
#accessBtn{

background:#FFD54F;

border:none;

padding:10px 18px;

border-radius:25px;

cursor:pointer;

font-weight:600;

margin-left:10px;

}
#accessBtn:hover{

background:#f4c842;

}
.feedback{

margin-top:20px;

text-align:center;

}

.feedback button{

background:#FFD54F;

border:none;

padding:10px 18px;

margin:5px;

border-radius:8px;

cursor:pointer;

}
.chat-box{

margin-top:30px;

max-width:700px;
margin-left:auto;
margin-right:auto;

background:#1c2f29;

padding:20px;

border-radius:12px;

min-height:150px;

display:flex;
flex-direction:column;
gap:12px;

}


/* USER MESSAGE */

.user-message{

align-self:flex-end;

background:#FFD54F;
color:black;

padding:10px 14px;

border-radius:10px;

max-width:70%;

}


/* BOT MESSAGE */

.bot-message{

align-self:flex-start;

background:#2a3f38;

padding:10px 14px;

border-radius:10px;

max-width:70%;

}
.quick-actions{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

margin-bottom:20px;

}

.quick-actions button{

background:#FFD54F;

border:none;

padding:10px 16px;

border-radius:20px;

cursor:pointer;

font-size:14px;

}
#languageSelect{
background:#FFD54F;
border:none;
padding:8px 14px;
border-radius:20px;
font-weight:600;
margin-left:10px;
cursor:pointer;
}
#offlineBanner{

display:none;

background:#ff4444;

color:white;

padding:8px;

text-align:center;

font-size:14px;

}
.chat-box{
max-height:300px;
overflow-y:auto;
}
.community{

padding:60px 20px;

text-align:center;

}

.community-cards{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.card{

background:#1c2f29;

padding:20px;

border-radius:10px;

width:220px;

}
.farmer-tools{

padding:80px 20px;

text-align:center;

background:#0f1c17;

}

.farmer-tools h2{

font-size:34px;

margin-bottom:10px;

}

.farmer-tools p{

opacity:0.8;

margin-bottom:40px;

}

.tools-grid{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

}

.tool-card{

background:#1c2f29;

padding:20px;

border-radius:12px;

width:240px;

text-align:left;

box-shadow:0 10px 20px rgba(0,0,0,0.3);

}

.tool-card h3{

margin-bottom:10px;

color:#FFD54F;

}
@media(max-width:768px){

.tools-grid{

flex-direction:column;

align-items:center;

}

.tool-card{

width:90%;

}

}
.tool-btn{

margin-top:10px;

background:#FFD54F;

border:none;

padding:8px 14px;

border-radius:8px;

cursor:pointer;

font-weight:600;

}
.footer{

background:#0a1410;

padding:40px 20px;

text-align:center;

margin-top:60px;

}

.footer h3{

color:#FFD54F;

margin-bottom:10px;

}

.footer-links{

margin:15px 0;

}

.footer-links a{

margin:0 10px;

color:white;

text-decoration:none;

opacity:0.8;

}

.footer-links a:hover{

opacity:1;

}