/* Comment Section Container */
.comment-section {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
/* Header for Comment Section */
.comment-section h3 {
font-size: 24px;
margin-bottom: 10px;
color: #333;
}
/* Textarea Styling */
textarea {
width: 85%;
height: 120px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 15px;
font-size: 16px;
resize: vertical;
outline: none;
transition: border-color 0.3s ease;
}
textarea:focus {
border-color: #66afe9;
}
/* Emoji Picker Styling */
.emoji-picker {
margin-top: 10px;
margin-bottom: 10px;
}
.emoji-picker button {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 5px;
font-size: 18px;
margin: 2px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.emoji-picker button:hover {
background-color: #ddd;
}
/* Submit Button Styling */
.comment-section button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.comment-section button:hover {
background-color: #0056b3;
}
/* Auto-save Message */
.auto-save-message {
margin-top: 10px;
font-size: 14px;
color: #888;
}
/* Comment List Styling */
.comment-list {
margin-top: 20px;
}
.comment-item {
background-color: #f9f9f9;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.comment-item h4 {
font-size: 18px;
color: #333;
}
.comment-item p {
font-size: 16px;
color: #555;
}
/* Responsive Design */
@media (max-width: 600px) {
.comment-section {
padding: 15px;
}
.comment-section h3 {
font-size: 20px;
}
textarea {
height: 80px;
}
}
/* Seminars Section */
.seminars {
margin-top: 40px;
text-align: center;
}
.seminars button {
padding: 10px 20px;
background-color: #008CBA;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.seminars button:hover {
background-color: #007B9E;
}
/* Social Links Section */
.social-links {
margin-top: 40px;
text-align: center;
}
.social-links a {
margin: 0 15px;
font-size: 18px;
text-decoration: none;
color: #333;
display: inline-block;
}
.social-links a:hover {
color: #4CAF50;
}
.social-links img {
display: block; /* Ensures the image and text stack vertically */
margin: 0 auto; /* Centers the image */
}
.social-links img:hover {
transform: scale(1.1); /* Slight zoom effect on hover */
transition: transform 0.3s ease-in-out;
}
.quick-find {
padding: 30px 20px;
background: #5a5263;
text-align: center;
}
.quick-find h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
.button-grid,
.quick-links {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.button,
.quick-links a {
padding: 10px 20px;
background: # #dfccccfb;
color: white;
border-radius: 5px;
text-decoration: none;
font-size: 1rem;
display: inline-block;
}
.button:hover,
.quick-links a:hover {
background-color: #a01a95;
}
.text-semi-strong {
font-weight: bold;
color: #343a40;
}
/* 11. FOOTER RAW */
.footer {
background-color: #333;
color: white;
padding: 40px 20px;
}
.footer .footer-links {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
}
.footer a {
color: white;
transition: color 0.3s;
}
.footer a:hover {
color: #dfccccfb;
}
.footer .footer-note {
text-align: center;
font-size: 11px;
}
.footer h3 {
font-size: 18px;
margin-bottom: 10px;
}
.footer ul li {
margin-bottom: 10px;
}