/* CSS Variables */
:root {--primary-green: #1B4D3E;--secondary-green: #2D6A4F;--light-green: #E8F3F1;--gold: #C9A227;--gold-dark: #A68520;--white: #FFFFFF;--gray-50: #F9FAFB;--gray-100: #F3F4F6;--gray-200: #E5E7EB;--gray-600: #4B5563;--gray-700: #374151;--gray-800: #1F2937;--font-heading: 'Poppins', sans-serif;--font-body: 'Open Sans', sans-serif;--radius-sm: 0.5rem;--radius-md: 0.75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);--shadow-green: 0 4px 20px rgba(27, 77, 62, 0.15);}
/* Reset & Base */
*, *::before, *::after {box-sizing: border-box;margin: 0;padding: 0;}
html {scroll-behavior: smooth;}
body {font-family: var(--font-body);color: var(--gray-800);line-height: 1.6;background-color: var(--white);}
h1, h2, h3, h4, h5, h6 {font-family: var(--font-heading);font-weight: 700;line-height: 1.2;}
a {text-decoration: none;color: inherit;}
img {max-width: 100%;height: auto;display: block;}
/* Utility Classes */
.container {max-width: 1280px;margin: 0 auto;padding: 0 1rem;}
.hidden {display: none !important;}
/* Buttons */
.btn {display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.625rem 1.25rem;font-family: var(--font-heading);font-weight: 500;font-size: 0.875rem;border-radius: var(--radius-full);border: none;cursor: pointer;transition: all 0.3s ease;}
.btn-primary {background-color: var(--primary-green);color: var(--white);box-shadow: var(--shadow-green);}
.btn-primary:hover {background-color: var(--secondary-green);transform: translateY(-2px);box-shadow: var(--shadow-lg);}
.btn-gold {background-color: var(--gold);color: var(--white);box-shadow: var(--shadow-lg);}
.btn-gold:hover {background-color: var(--gold-dark);transform: translateY(-2px);}
.btn-outline {background-color: transparent;color: var(--white);border: 2px solid rgba(255, 255, 255, 0.3);}
.btn-outline:hover {background-color: rgba(255, 255, 255, 0.1);}
.btn-outline-green {background-color: transparent;color: var(--primary-green);border: 2px solid var(--primary-green);}
.btn-outline-green:hover {background-color: var(--primary-green);color: var(--white);}
.btn-white {background-color: var(--white);color: var(--primary-green);}
.btn-white:hover {background-color: var(--light-green);}
.btn-lg {padding: 0.875rem 2rem;font-size: 1rem;}
.btn-sm {padding: 0.5rem 1rem;font-size: 0.75rem;}
/* Badge */
.badge {display: inline-flex;align-items: center;gap: 0.25rem;padding: 0.375rem 0.75rem;font-size: 0.75rem;font-weight: 500;border-radius: var(--radius-full);background-color: rgba(201, 162, 39, 0.2);color: var(--gold);border: 1px solid rgba(201, 162, 39, 0.3);}
.badge-green {background-color: var(--light-green);color: var(--primary-green);border: none;}
.badge-white {background-color: rgba(255, 255, 255, 0.2);color: var(--white);border-color: rgba(255, 255, 255, 0.3);}
/* Announcement Bar */
.announcement-bar {background-color: var(--primary-green);color: var(--white);padding: 0.625rem 0;overflow: hidden;position: relative;z-index: 100;}
.ticker-wrapper {overflow: hidden;white-space: nowrap;}
.ticker-content {display: inline-flex;animation: ticker 30s linear infinite;}
.announcement-bar:hover .ticker-content {animation-play-state: paused;}
.ticker-item {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0 2rem;font-size: 0.875rem;font-weight: 500;}
.pulse-dot {width: 8px;height: 8px;background-color: var(--gold);border-radius: 50%;animation: pulse 2s infinite;}
@keyframes ticker {0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes pulse {0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

/* Navigation */
.navbar {z-index: 50;padding: 1rem 0;transition: all 0.3s ease;}
.navbar.scrolled {top: 0;background-color: rgba(255, 255, 255, 0.95);backdrop-filter: blur(12px);box-shadow: var(--shadow-md);padding: 0.75rem 0;}
.nav-container {max-width: 1280px;margin: 0 auto;padding: 0 1rem;display: flex;align-items: center;justify-content: space-between;}
.logo {display: flex;align-items: center;gap: 0.75rem;}
.logo-icon {width: 58px;height: 58px;background-color: var(--primary-green);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--white);box-shadow: var(--shadow-lg);transition: transform 0.3s ease;}
.logo:hover .logo-icon {transform: scale(1.05);}
.logo-text {display: flex;flex-direction: column;}
.logo-subtitle {font-size: 0.825rem;font-weight: 600;letter-spacing: 0.02em;opacity: 0.8;}
.logo-title {font-size: 0.875rem;font-weight: 700;font-family: var(--font-heading);}
.navbar.scrolled .logo-subtitle,.navbar.scrolled .logo-title {color: var(--primary-green);}
.navbar:not(.scrolled) .logo-subtitle,.navbar:not(.scrolled) .logo-title {color: var(--white);}
.nav-links {display: none;align-items: center;gap: 2rem;}
.nav-link {font-size: 0.875rem;font-weight: 500;position: relative;transition: color 0.3s ease;}
.navbar.scrolled .nav-link {color: var(--gray-700);}
.navbar.scrolled .nav-link:hover {color: var(--primary-green);}
.navbar:not(.scrolled) .nav-link {color: rgba(255, 255, 255, 0.9);}
.navbar:not(.scrolled) .nav-link:hover {color: var(--white);}
.nav-link::after {content: '';position: absolute;bottom: -4px;left: 50%;width: 0;height: 2px;background-color: var(--gold);transition: all 0.3s ease;transform: translateX(-50%);}
.nav-link:hover::after {width: 100%;}
.btn-apply {display: none;}
.mobile-menu-btn {background: none;border: none;cursor: pointer;padding: 0.5rem;color: var(--white);}
.navbar.scrolled .mobile-menu-btn {color: var(--primary-green);}
.mobile-menu {position: absolute;top: 100%;left: 1rem;right: 1rem;background-color: var(--white);border-radius: var(--radius-lg);box-shadow: var(--shadow-xl);padding: 1.5rem;margin-top: 0.5rem;animation: slideDown 0.3s ease;}
@keyframes slideDown {from {opacity: 0;transform: translateY(-10px);}
to {opacity: 1;transform: translateY(0);}
}
.mobile-nav-link {display: block;padding: 0.875rem 0;color: var(--gray-700);font-weight: 500;border-bottom: 1px solid var(--gray-100);transition: color 0.3s ease;}
.mobile-nav-link:hover {color: var(--primary-green);}
.mobile-nav-link:last-of-type {border-bottom: none;}
.mobile-apply {width: 100%;margin-top: 1rem;}

/* Hero Section */
.hero {position: relative;min-height: 100vh;display: flex;align-items: center;overflow: hidden;}
.hero-slides {position: absolute;inset: 0;}
.hero-slide {position: absolute;inset: 0;background-size: cover;background-position: top center;opacity: 0;transition: opacity 1s ease;}
.hero-slide.active {opacity: 1;}
.hero-overlay {position: absolute;inset: 0;background: linear-gradient(to right, rgba(27, 77, 62, 0.95), rgba(27, 77, 62, 0.8), transparent);}
.hero-content {position: relative;z-index: 10;max-width: 1280px;margin: 0 auto;padding: 8rem 1rem 4rem;width: 100%;}
.hero-title {font-size: 3rem;font-weight: 800;color: var(--white);margin: 1.5rem 0;line-height: 1.1;}
.hero-title .highlight {display: block;color: var(--gold);}
.hero-description {font-size: 1.125rem;color: rgba(255, 255, 255, 0.9);max-width: 600px;margin-bottom: 2rem;}
.hero-buttons {display: flex;flex-wrap: wrap;gap: 1rem;margin-bottom: 3rem;}
.slide-indicators {display: flex;gap: 0.5rem;}
.indicator {width: 2rem;height: 6px;border-radius: var(--radius-full);background-color: rgba(255, 255, 255, 0.4);border: none;cursor: pointer;transition: all 0.3s ease;}
.indicator.active {width: 3rem;background-color: var(--gold);}
.indicator:hover {background-color: rgba(255, 255, 255, 0.6);}
.hero-gradient {position: absolute;bottom: 0;left: 0;right: 0;height: 5rem;background: linear-gradient(to top, var(--primary-green), transparent);}
/* Stats Section */
.stats {padding: 4rem 0;background-color: var(--white);}
.stats-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 2rem;}
.stat-item {text-align: center;transition: transform 0.3s ease;}
.stat-item:hover {transform: translateY(-4px);}
.stat-icon {width: 64px;height: 64px;margin: 0 auto 1rem;background-color: var(--light-green);border-radius: 1rem;display: flex;align-items: center;justify-content: center;color: var(--primary-green);transition: all 0.3s ease;}
.stat-item:hover .stat-icon {background-color: var(--primary-green);color: var(--white);}
.stat-value {font-size: 2.5rem;font-weight: 800;color: var(--primary-green);font-family: var(--font-heading);line-height: 1;}
.stat-label {font-size: 0.875rem;color: var(--gray-600);font-weight: 500;margin-top: 0.25rem;}
/* Jobs Section */
.jobs {padding: 5rem 0;background-color: var(--gray-50);}
.section-header {text-align: center;margin-bottom: 3rem;}
.section-header-flex {display: flex;flex-direction: column;gap: 1rem;margin-bottom: 2rem;}
.section-title {font-size: 2.25rem;color: var(--primary-green);margin: 1rem 0;}
.section-title.text-white {color: var(--white);}
.section-description {color: var(--gray-600);max-width: 600px;margin: 0 auto;}
.section-description.text-white-80 {color: rgba(255, 255, 255, 0.8);}
.jobs-grid {display: grid;gap: 1.5rem;}
.job-card {background-color: var(--white);border-radius: var(--radius-xl);overflow: hidden;box-shadow: var(--shadow-green);transition: all 0.3s ease;}
.job-card:hover {transform: translateY(-8px);box-shadow: var(--shadow-xl);}
.job-image {position: relative;height: 12rem;overflow: hidden;}
.job-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.job-card:hover .job-image img {transform: scale(1.08);}
.job-badge {position: absolute;top: 1rem;left: 1rem;background-color: var(--gold);color: var(--white);padding: 0.25rem 0.75rem;border-radius: var(--radius-full);font-size: 0.75rem;font-weight: 600;}
.job-overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);display: flex;align-items: flex-end;justify-content: center;padding-bottom: 1.5rem;opacity: 0;transition: opacity 0.3s ease;}
.job-card:hover .job-overlay {opacity: 1;}
.job-content {padding: 1.5rem;}
.job-header {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 0.75rem;}
.job-icon {width: 48px;height: 48px;background-color: var(--light-green);border-radius: 0.75rem;display: flex;align-items: center;justify-content: center;color: var(--primary-green);}
.job-positions {text-align: right;padding:0!important;margin:0!important;}
.positions-count {font-size: 1.5rem;font-weight: 800;color: var(--primary-green);font-family: var(--font-heading);padding:0!important;margin:0!important;}
.positions-label {padding:0;margin:0;font-size: 0.95rem;color: var(--gray-600);}
.job-title {font-size: 1.25rem;color: var(--gray-800);margin-bottom: 0.5rem;transition: color 0.3s ease;}
.job-card:hover .job-title {color: var(--primary-green);}
.job-description {font-size: 0.875rem;color: var(--gray-600);margin-bottom: 1rem;}
.job-location {display: flex;align-items: center;gap: 0.25rem;font-size: 0.875rem;color: var(--gray-600);}
.job-location svg {color: var(--primary-green);}
.section-footer {text-align: center;margin-top: 3rem;}
/* Polaroid Section */
.polaroid-section {padding: 5rem 0;background-color: var(--white);overflow: hidden;}
.scroll-buttons {display: none;gap: 0.5rem;}
.scroll-btn {width: 40px;height: 40px;border-radius: 50%;border: 2px solid var(--primary-green);background-color: transparent;color: var(--primary-green);display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.3s ease;}
.scroll-btn:hover {background-color: var(--primary-green);color: var(--white);}
.polaroid-scroll {display: flex;gap: 2rem;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;padding: 1rem;padding-left: max(1rem, calc((100vw - 1280px) / 2 + 1rem));}
.polaroid-scroll::-webkit-scrollbar {display: none;}
.polaroid-card {flex-shrink: 0;width: 280px;background-color: var(--white);padding: 12px 12px 40px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);scroll-snap-align: start;transition: all 0.3s ease;cursor: pointer;}
.polaroid-card:hover {transform: rotate(0deg) scale(1.03);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);}
.polaroid-image {aspect-ratio: 3/4;overflow: hidden;margin-bottom: 1rem;}
.polaroid-image img {width: 100%;height: 100%;object-fit: cover;}
.polaroid-caption {text-align: center;}
.caption-title {font-family: var(--font-heading);font-size: 1.125rem;font-weight: 500;color: var(--gray-800);margin-bottom: 0.25rem;}
.caption-location {display: flex;align-items: center;justify-content: center;gap: 0.25rem;font-size: 0.875rem;color: var(--gray-600);}
/* Districts Section */
.districts {padding: 5rem 0;background-color: var(--primary-green);position: relative;}
.districts::after {content: '';position: absolute;inset: 0;opacity: 0.03;pointer-events: none;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");}
.districts-grid {display: grid;gap: 1.5rem;position: relative;z-index: 1;}
.district-card {position: relative;border-radius: var(--radius-xl);overflow: hidden;cursor: pointer;background-color: rgba(255, 255, 255, 0.1);backdrop-filter: blur(4px);transition: all 0.3s ease;}
.district-card:hover {background-color: rgba(255, 255, 255, 0.2);}
.district-bg {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0.3;transition: all 0.5s ease;}
.district-card:hover .district-bg {opacity: 0.5;transform: scale(1.1);}
.district-content {position: relative;padding: 1.5rem;display: flex;align-items: center;justify-content: space-between;}
.district-name {font-size: 1.25rem;font-weight: 700;color: var(--white);margin-bottom: 0.25rem;}
.district-positions {font-size: 0.875rem;color: rgba(255, 255, 255, 0.7);}
.district-arrow {width: 48px;height: 48px;background-color: var(--gold);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--white);transition: transform 0.3s ease;}
.district-card:hover .district-arrow {transform: scale(1.1);}

/* Process Section */
.process {padding: 5rem 0;background-color: var(--gray-50);}
.process-steps {display: grid;gap: 2rem;position: relative;}
.process-line {display: none;}
.process-step {text-align: center;position: relative;}
.step-number {display: none;}
.step-icon {width: 80px;height: 80px;margin: 0 auto 1.5rem;background-color: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--primary-green);box-shadow: var(--shadow-lg);transition: all 0.3s ease;}
.process-step:hover .step-icon {transform: scale(1.1);box-shadow: var(--shadow-xl);}
.step-title {font-size: 1.125rem;color: var(--gray-800);margin-bottom: 0.5rem;}
.step-description {font-size: 0.875rem;color: var(--gray-600);max-width: 280px;margin: 0 auto;}
/* Dates Section */
.dates {padding: 5rem 0;background-color: var(--white);}
.dates-grid {display: grid;gap: 1.5rem;}
.date-card {background-color: var(--gray-50);border-radius: var(--radius-xl);padding: 1.5rem;text-align: center;transition: all 0.3s ease;}
.date-card:hover {transform: translateY(-4px);box-shadow: var(--shadow-lg);}
.date-icon {width: 64px;height: 64px;margin: 0 auto 1rem;background-color: var(--primary-green);border-radius: 1rem;display: flex;align-items: center;justify-content: center;color: var(--white);transition: transform 0.3s ease;}
.date-card:hover .date-icon {transform: scale(1.1);}
.date-event {font-size: 0.875rem;color: var(--gray-600);margin-bottom: 0.25rem;}
.date-value {font-size: 1.25rem;font-weight: 700;color: var(--primary-green);font-family: var(--font-heading);}
/* About Section */
.about {padding: 5rem 0;background-color: var(--light-green);}
.about-grid {display: grid;gap: 3rem;}
.about-text {color: var(--gray-600);margin-bottom: 1.5rem;line-height: 1.8;}
.about-features {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;margin-top: 2rem;}
.feature-item {display: flex;align-items: center;gap: 0.5rem;font-size: 0.875rem;color: var(--gray-700);}
.feature-item svg {color: var(--gold);flex-shrink: 0;}
.about-images {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;}
.about-img {border-radius: var(--radius-xl);box-shadow: var(--shadow-lg);width: 100%;height: 12rem;object-fit: cover;}
.about-img-offset {margin-top: 2rem;}
.about-img-up {margin-top: -2rem;}
/* Footer */
.footer {background-color: var(--primary-green);color: var(--white);padding: 4rem 0 0;}
.footer-grid {display: grid;gap: 1rem;padding-bottom: 3rem;}
.footer-logo {display: flex;align-items: center;gap: 0.75rem;margin-bottom: 1.5rem;}
.footer-logo-icon {width: 96px;height: 96px;background-color: rgba(255, 255, 255, 0.2);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.footer-logo-text {display: flex;flex-direction: column;}
.footer-subtitle {font-size: 1.09rem;font-weight: 600;letter-spacing: 0.05em;opacity: 0.8;}
.footer-title {font-size: 1.125rem;font-weight: 700;font-family: var(--font-heading);}
.footer-description {color: rgba(255, 255, 255, 0.8);margin-bottom: 1.5rem;}
.social-links {display: flex;gap: 1rem;}
.social-link {width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--white);transition: all 0.3s ease;}
.social-link:hover {background-color: var(--gold);}
.footer-heading {font-size: 1.125rem;font-weight: 700;margin-bottom: 1.5rem;font-family: var(--font-heading);}
.footer-list {list-style: none;padding:0;}
.footer-list li {margin-bottom: 0.75rem;}
.footer-list a {color: rgba(255, 255, 255, 0.8);display: flex;align-items: center;gap: 0.5rem;transition: color 0.3s ease;}
.footer-list a:hover {color: var(--gold);}
.contact-list {list-style: none;padding:0;}
.contact-list li {display: flex;align-items: flex-start;gap: 0.75rem;margin-bottom: 1rem;color: rgba(255, 255, 255, 0.8);}
.contact-list svg {color: var(--gold);flex-shrink: 0;margin-top: 0.25rem;}
.footer-bottom {border-top: 1px solid rgba(255, 255, 255, 0.2);padding: 1.5rem 0;text-align: center;}
.footer-bottom p {color: rgba(255, 255, 255, 0.6);font-size: 0.875rem;}
/* Responsive Styles */
@media (min-width: 640px) {.container {padding: 0 1.5rem;}
.hero-title {font-size: 3.5rem;}
.stats-grid {grid-template-columns: repeat(4, 1fr);}
.jobs-grid {grid-template-columns: repeat(2, 1fr);}
.districts-grid {grid-template-columns: repeat(2, 1fr);}
.dates-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 768px) {.nav-links {display: flex;}
.btn-apply {display: inline-flex;}
.mobile-menu-btn {display: none;}
.hero-title {font-size: 4rem;}
.section-header-flex {flex-direction: row;align-items: flex-end;justify-content: space-between;}
.scroll-buttons {display: flex;}
.process-steps {grid-template-columns: repeat(5, 1fr);}
.process-line {display: block;position: absolute;top: 40px;left: 0;right: 0;height: 4px;background: linear-gradient(to right, var(--primary-green), var(--gold), var(--primary-green));z-index: 0;}
.step-number {display: flex;position: absolute;top: -20px;left: 50%;transform: translateX(-50%);width: 32px;height: 32px;background-color: var(--gold);border-radius: 50%;align-items: center;justify-content: center;color: var(--white);font-weight: 700;font-size: 0.875rem;z-index: 1;}
.dates-grid {grid-template-columns: repeat(4, 1fr);}
.about-grid {grid-template-columns: 1fr 1fr;align-items: center;}
.footer-grid {grid-template-columns: 2fr 1fr 1fr;}
}
@media (min-width: 1024px) {.container {padding: 0 2rem;}
.hero-title {font-size: 4.5rem;}
.jobs-grid {grid-template-columns: repeat(3, 1fr);}
.districts-grid {grid-template-columns: repeat(4, 1fr);}
.about-img {height: 14rem;}
}
/* Animation Classes */
@keyframes fadeIn {from {opacity: 0;}
to {opacity: 1;}
}
@keyframes slideInUp {from {opacity: 0;transform: translateY(30px);}
to {opacity: 1;transform: translateY(0);}
}
.animate-fade-in {animation: fadeIn 0.5s ease forwards;}
.animate-slide-in-up {animation: slideInUp 0.6s ease forwards;}

.nav-container {display: flex !important;align-items: center !important;width: 100%;}
/* LEFT */
.nav-left {flex: 0 0 auto;}
/* CENTER (IMPORTANT) */
.nav-center {flex: 1;display: flex !important;justify-content: center;gap: 25px;}
/* RIGHT */
.nav-right {flex: 0 0 auto;display: flex;align-items: center;gap: 15px;}

/* 🚨 OVERRIDE ANY BROKEN STYLES */
.nav-links,#navLinks {display: flex;gap: 20px;margin-left: 40px;}
/* Restore needed styles after reset */
.nav-center a {text-decoration: none;padding: 5px 10px;}

@media (max-width: 768px) {
.nav-center {display: none;}
}

	


.top-bar-content {color: var(--white);display: flex;flex-direction: column;align-items: center;gap: 0.5rem;padding:0 50px;}
@media (min-width: 640px) {.top-bar-content {flex-direction: row;justify-content: space-between;}
}	
.top-bar-contact {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 1rem;font-size: 0.875rem;}
.top-bar-contact a {display: flex;align-items: center;gap: 0.5rem;transition: color 0.3s;}
.top-bar-contact a:hover {color: var(--gold);}
.top-bar-social {display: flex;align-items: center;gap: 0.75rem;}
.social-icon {width: 2rem;height: 2rem;background: rgba(255, 255, 255, 0.1);border-radius: 9999px;display: flex;align-items: center;justify-content: center;transition: all 0.3s;}
.social-icon:hover {background: var(--gold);transform: scale(1.1);}
.social-icon svg {width: 1rem;height: 1rem;}