*{box-sizing:border-box}
body{margin:0;font-family:"Times New Roman",Times,serif;background:#fff;color:#111;line-height:1.35}
h1,h2,h3,h4,p{margin:0}
p{color:#333;font-size:14px}

.wrap{width:1100px;margin:0 auto}
.panel,.section,.card,.box{border-radius:18px}

.button,.signup.button,.send,.eventsbutton{
  border:none;border-radius:999px;
  padding:8px 14px;font-weight:900;cursor:pointer
}
.button,.signup.button{background:#FFCA28}
.send{background:#FFCA28;padding:0 18px}
.eventsbutton{background:#1565C0;color:#fff;padding:10px}
.button:hover,.signup.button:hover,.send:hover,.eventsbutton:hover{opacity:.9}

.navigationbar{
  background:#fff;padding:14px 18px;
  display:flex;justify-content:space-between;align-items:center
}
.navigationbar h1{font-size:34px;font-weight:900}
.navigationbar .links{display:flex;gap:10px}

.Page,.Active{
  text-decoration:none;color:#111;font-weight:800;
  border:2px solid #FFCA28;padding:7px 14px;border-radius:999px;
  font-size:14px;background:#fff
}
.Active{background:#FFCA28}

.topsection{background:#1565C0;color:#fff;padding:18px 0 34px}
.wrap.main{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.introduction{max-width:560px}
.introduction h2{font-size:30px;font-weight:900;margin-bottom:6px}
.introduction p{color:#eaf1ff;font-size:14px}

.top-events-wrapper{
  background:#fff;padding:15px;width:560px;color:#111;
  box-shadow:0 10px 18px rgba(0,0,0,.10);
  position:relative;top:14px
}
.top-events-title{
  color:#1565C0;font-size:20px;font-weight:900;text-align:center;margin-bottom:10px
}
.top.events{display:flex;gap:12px}

.card{
  flex:1;min-width:0;padding:10px;background:#fff;
  border:2px solid rgba(0,0,0,.06);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  display:flex;flex-direction:column
}
.description{display:flex;justify-content:space-between;font-size:11px;color:#777;margin:8px 0}
.card h4{font-size:13px;font-weight:900;margin:6px 0}
.card p{font-size:11px;color:#666;margin-bottom:10px}
.card .signup.button{margin-top:auto}

.events.image,.eventsimage{
  height:80px;background:#eaeaea;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#555;
  overflow:hidden
}
.events.image img,.eventsimage img{
  width:100%;height:100%;object-fit:cover;display:block
}

.wrap.home-main{margin:18px auto 30px;display:flex;gap:18px}
.home-left{width:55%}
.rightsection.home{width:45%}

.panel.yellow{
  background:#FFCA28;padding:10px;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
  max-width:500px;margin:0 auto
}
.neighborhoodupdates.title{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.updatesicon{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;font-size:20px
}
.neighborhoodupdates.title h3{font-size:18px;font-weight:900}
.updatesdescription{font-size:12px;color:#444;margin-top:2px}

.updates-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.update-item{
  background:#fff;border:2px solid rgba(0,0,0,.08);
  border-radius:16px;padding:10px
}
.update-item h4{font-size:13px;font-weight:900;margin-bottom:6px}
.update-item p{font-size:12px;color:#555}

.featuresgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.features-tile{
  background:#fff;border-radius:18px;padding:16px 12px;
  border:2px solid rgba(0,0,0,.08);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
  display:flex;flex-direction:column;align-items:center;text-align:center
}
.features-tile .featuresicon{
  width:42px;height:42px;border-radius:14px;background:rgba(255,202,40,.55);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:8px
}
.features-tile h4{font-size:14px;font-weight:900;margin-bottom:4px}
.features-tile p{font-size:11px;color:#777;margin-top:0}

.form.title,.recentmessages-title,.eventsform.title{
  background:#FFCA28;
  padding:12px 14px;
  font-size:24px;
  font-weight:900;
  text-align:center;
  border:2px solid #1565C0;
  border-bottom:none;
  border-radius:16px 16px 0 0;
  margin:12px 12px 0
}
.gratitudewallform,.recentmessages-box,.contactus.box,.contactform.box{
  background:#fff;
  border:2px solid #1565C0;
  border-radius:0 0 16px 16px;
  margin:0 12px 12px;
  padding:12px
}

.gratitudewallform input,.gratitudewallform textarea,.gratitudewallform select,
.contactus.box input,.contactus.box textarea,.contactus.box select,
.contactform.box input,.contactform.box textarea,.contactform.box select,
.eventslayout input,.eventslayout textarea,.eventslayout select{
  width:100%;
  padding:6px 8px;        /* ⬅ smaller height */
  border-radius:8px;      /* ⬅ slightly tighter corners */
  border:2px solid #ddd;
  outline:none;
  font-size:12px;         /* ⬅ smaller text */
  background:#fff
}

.eventslayout{
  width:1100px;margin:18px auto 30px;
  display:grid;gap:18px;align-items:start;
  grid-template-columns:320px 380px 400px;
  grid-template-rows:auto auto
}

.calender.section,.events.section,.chatbot.section,
.appreciation.form,.gratitudewall.messages{
  box-shadow:0 10px 18px rgba(0,0,0,.12)
}

.calender.section{background:#FFCA28;padding:14px}
.calender.box{
  background:#fff;padding:12px;border:2px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.10)
}
.calender.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.calender.button{
  border:none;background:#FFCA28;border-radius:12px;padding:8px 12px;font-weight:900;cursor:pointer
}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.calendar div{
  height:32px;border-radius:10px;background:#f0f0f0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;position:relative
}
.dot::after{
  content:"";width:9px;height:9px;border-radius:50%;background:#1565C0;
  position:absolute;bottom:4px
}

.events.section{background:#1565C0;padding:14px}
.eventslist{display:flex;flex-direction:column;gap:14px}
.events.section .events.section{
  background:#fff;padding:12px;border:2px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  display:flex;gap:12px;align-items:center
}
.events.section .events.section h3{color:#1565C0;font-size:15px;margin-bottom:6px}
.eventsdate{font-size:12px;color:#666;margin-top:6px}
.events.section .events.section .events.image{width:78px;height:64px;flex:0 0 auto}

.eventslayout > .eventsform.section{
  grid-column:1 / span 2;
  background:#1565C0;
  padding:10px;
  border-radius:16px
}

.events.chatbot{grid-column:3;grid-row:1 / span 2}
.chatbot.section{background:#1565C0;padding:0;overflow:hidden}
.chatbot.header{
  background:#FFCA28;padding:12px 14px;
  display:flex;gap:10px;align-items:center
}
.chatbot.header h2{font-size:18px;font-weight:900;color:#111}
.chatbot.header .chatbot{
  width:38px;height:38px;border-radius:12px;background:#fff;
  display:flex;align-items:center;justify-content:center
}
.chatbot.box{
  background:#fff;margin:12px;border-radius:18px;
  padding:12px;height:520px;overflow-y:auto
}
.chatbot.user,.chatbot.bot{
  padding:10px 12px;border-radius:14px;margin-bottom:10px;
  font-size:12px;max-width:88%
}
.chatbot.bot{background:#f3f3f3}
.chatbot.user{background:#dbeafe;margin-left:auto}
.chat-input{
  display:flex;margin:10px 12px 12px;border-radius:999px;overflow:hidden;
  background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.10)
}
.chat-input input{flex:1;border:none;padding:10px 15px;outline:none}

.gratitudewall.mainsection{
  width:1100px;margin:18px auto 30px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px;align-items:stretch
}
.appreciation.form,.gratitudewall.messages{background:#FFCA28;overflow:hidden;display:flex;flex-direction:column}
.gratitudewallform textarea{height:110px;resize:none}
.gratitudewallform .signup.button{width:100%;margin-top:12px;border-radius:6px}

#gratitudeList > div{
  border:2px solid rgba(0,0,0,.10);
  border-radius:10px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.08)
}
#gratitudeList > div strong{display:block;color:#E07A00;margin-bottom:6px}

.logo{
  position:fixed;right:22px;bottom:22px;
  width:58px;height:58px;background:#FFCA28;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 15px rgba(0,0,0,.20)
}
.logo span{
  width:44px;height:44px;background:#1565C0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:900
}

.eventslayout > .eventsform.section .eventsform.title{
  margin:0 0 12px 0;
}

.eventslayout > .eventsform.section form{
  display:flex;
  flex-direction:column;
  gap:10px;
}