| | |
| | @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200;300;400;500;600;700;800;900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); |
| |
|
| | :root { |
| | --primary-color: #0EA5A5; |
| | --primary-light: rgba(14, 165, 165, 0.1); |
| | --primary-dark: #088585; |
| | --primary-gradient: linear-gradient(135deg, #0EA5A5, #088585); |
| | --secondary-color: #FF9A3C; |
| | --secondary-light: rgba(255, 154, 60, 0.1); |
| | --text-dark: #1d2b36; |
| | --text-medium: #3a4f5f; |
| | --text-light: #607d94; |
| | --background-light: #f8f9fa; |
| | --border-color: #e1e5ea; |
| | --danger-color: #e3342f; |
| | --success-color: #38c172; |
| | --warning-color: #f7b731; |
| | --info-color: #3490dc; |
| | --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
| | --header-gradient: linear-gradient(120deg, #0EA5A5, #088585); |
| | --sidebar-gradient: linear-gradient(180deg, #1d2b36, #2d3a45); |
| | --border-radius: 10px; |
| | --transition-speed: 0.3s; |
| | } |
| |
|
| | |
| | body { |
| | direction: rtl; |
| | text-align: right; |
| | font-family: 'Almarai', 'Tajawal', 'Cairo', sans-serif; |
| | color: var(--text-dark); |
| | background-color: #fafafa; |
| | |
| | -webkit-font-smoothing: antialiased; |
| | -moz-osx-font-smoothing: grayscale; |
| | text-rendering: optimizeLegibility; |
| | } |
| |
|
| | |
| | h1, h2, h3, h4, h5, h6 { |
| | font-family: 'Almarai', 'Tajawal', 'Cairo', sans-serif; |
| | color: var(--text-dark); |
| | font-weight: 700; |
| | line-height: 1.4; |
| | margin-bottom: 0.75rem; |
| | } |
| |
|
| | |
| | .main-title { |
| | background: var(--primary-gradient); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | font-size: 2.25rem; |
| | font-weight: 800; |
| | text-align: center; |
| | margin: 1.5rem 0; |
| | padding: 0.5rem; |
| | position: relative; |
| | } |
| |
|
| | .main-title::after { |
| | content: ""; |
| | position: absolute; |
| | bottom: -5px; |
| | left: 30%; |
| | right: 30%; |
| | height: 3px; |
| | background: var(--primary-gradient); |
| | border-radius: 3px; |
| | } |
| |
|
| | |
| | .header-container { |
| | display: flex; |
| | flex-direction: row; |
| | justify-content: space-between; |
| | align-items: center; |
| | padding: 1rem 1.5rem; |
| | background: var(--header-gradient); |
| | border-radius: var(--border-radius); |
| | margin-bottom: 1.5rem; |
| | box-shadow: var(--card-shadow); |
| | color: white; |
| | } |
| |
|
| | .header-title { |
| | margin-right: 1.25rem; |
| | } |
| |
|
| | .header-title h1 { |
| | margin: 0; |
| | font-size: 1.75rem; |
| | color: white; |
| | font-weight: 800; |
| | } |
| |
|
| | .header-title p { |
| | margin: 0.25rem 0 0 0; |
| | font-size: 0.9rem; |
| | color: rgba(255, 255, 255, 0.8); |
| | font-weight: 400; |
| | } |
| |
|
| | .header-info { |
| | display: flex; |
| | align-items: center; |
| | } |
| |
|
| | .date-box { |
| | display: flex; |
| | background-color: rgba(255, 255, 255, 0.2); |
| | border: 1px solid rgba(255, 255, 255, 0.3); |
| | color: white; |
| | border-radius: 8px; |
| | padding: 0.5rem 0.75rem; |
| | margin-left: 1rem; |
| | box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
| | backdrop-filter: blur(5px); |
| | } |
| |
|
| | .date-day { |
| | font-size: 1.75rem; |
| | font-weight: bold; |
| | margin-left: 0.5rem; |
| | line-height: 1; |
| | } |
| |
|
| | .date-info { |
| | display: flex; |
| | flex-direction: column; |
| | font-size: 0.8rem; |
| | } |
| |
|
| | .date-month { |
| | font-weight: bold; |
| | line-height: 1.2; |
| | } |
| |
|
| | .date-year { |
| | line-height: 1; |
| | } |
| |
|
| | |
| | .nav-menu { |
| | background-color: white; |
| | border-radius: var(--border-radius); |
| | padding: 0.5rem; |
| | box-shadow: var(--card-shadow); |
| | margin: 1rem 0; |
| | } |
| |
|
| | .nav-menu ul { |
| | display: flex; |
| | list-style: none; |
| | padding: 0; |
| | margin: 0; |
| | justify-content: flex-end; |
| | flex-wrap: wrap; |
| | } |
| |
|
| | .nav-menu li { |
| | margin: 0.25rem; |
| | } |
| |
|
| | .nav-menu a { |
| | display: flex; |
| | align-items: center; |
| | color: var(--text-medium); |
| | text-decoration: none; |
| | padding: 0.5rem 0.75rem; |
| | border-radius: 6px; |
| | transition: all var(--transition-speed); |
| | font-weight: 500; |
| | border: 1px solid transparent; |
| | } |
| |
|
| | .nav-menu a:hover { |
| | background-color: var(--primary-light); |
| | color: var(--primary-color); |
| | border-color: var(--primary-color); |
| | transform: translateY(-2px); |
| | } |
| |
|
| | .nav-icon { |
| | margin-left: 0.5rem; |
| | font-size: 1.25rem; |
| | } |
| |
|
| | |
| | .module-title { |
| | color: var(--text-dark); |
| | font-size: 1.75rem; |
| | margin-bottom: 1.25rem; |
| | border-right: 4px solid var(--primary-color); |
| | padding-right: 0.75rem; |
| | position: relative; |
| | } |
| |
|
| | |
| | .info-card { |
| | background-color: white; |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | margin-bottom: 1.25rem; |
| | box-shadow: var(--card-shadow); |
| | border-top: 4px solid var(--primary-color); |
| | transition: transform var(--transition-speed); |
| | } |
| |
|
| | .info-card:hover { |
| | transform: translateY(-5px); |
| | } |
| |
|
| | .info-card h3 { |
| | color: var(--text-dark); |
| | margin-top: 0; |
| | margin-bottom: 0.75rem; |
| | font-weight: 700; |
| | } |
| |
|
| | .info-card p { |
| | color: var(--text-medium); |
| | margin: 0; |
| | line-height: 1.6; |
| | } |
| |
|
| | |
| | .dataframe { |
| | width: 100%; |
| | border-collapse: separate; |
| | border-spacing: 0; |
| | margin-bottom: 1.5rem; |
| | border-radius: var(--border-radius); |
| | overflow: hidden; |
| | box-shadow: var(--card-shadow); |
| | } |
| |
|
| | .dataframe th { |
| | background-color: var(--primary-color); |
| | color: white; |
| | text-align: right; |
| | padding: 0.75rem 1rem; |
| | font-weight: 600; |
| | border: none; |
| | } |
| |
|
| | .dataframe td { |
| | padding: 0.75rem 1rem; |
| | border-bottom: 1px solid var(--border-color); |
| | text-align: right; |
| | background-color: white; |
| | } |
| |
|
| | .dataframe tr:last-child td { |
| | border-bottom: none; |
| | } |
| |
|
| | .dataframe tr:nth-child(even) td { |
| | background-color: rgba(248, 249, 250, 0.7); |
| | } |
| |
|
| | .dataframe tr:hover td { |
| | background-color: var(--primary-light); |
| | } |
| |
|
| | |
| | button, .stButton>button { |
| | background: var(--primary-gradient); |
| | color: white; |
| | border: none; |
| | border-radius: 6px; |
| | padding: 0.6rem 1.25rem; |
| | cursor: pointer; |
| | transition: all var(--transition-speed); |
| | font-weight: 600; |
| | font-size: 0.95rem; |
| | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| | display: inline-flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| |
|
| | button:hover, .stButton>button:hover { |
| | background: var(--primary-dark); |
| | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); |
| | transform: translateY(-2px); |
| | } |
| |
|
| | button:active, .stButton>button:active { |
| | transform: translateY(0); |
| | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| | } |
| |
|
| | |
| | .btn-secondary, .stButton.secondary>button { |
| | background: white; |
| | color: var(--primary-color); |
| | border: 1px solid var(--primary-color); |
| | } |
| |
|
| | .btn-secondary:hover, .stButton.secondary>button:hover { |
| | background: var(--primary-light); |
| | } |
| |
|
| | |
| | .plot-container { |
| | background-color: white; |
| | border-radius: var(--border-radius); |
| | padding: 1rem; |
| | margin: 1.25rem 0; |
| | box-shadow: var(--card-shadow); |
| | } |
| |
|
| | |
| | .innovation-card { |
| | background-color: white; |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | margin-bottom: 1.25rem; |
| | border-right: 4px solid var(--primary-color); |
| | box-shadow: var(--card-shadow); |
| | transition: transform var(--transition-speed); |
| | } |
| |
|
| | .innovation-card:hover { |
| | transform: translateY(-5px); |
| | } |
| |
|
| | .innovation-icon { |
| | font-size: 2rem; |
| | margin-bottom: 0.75rem; |
| | background: var(--primary-gradient); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| |
|
| | .innovation-card h3 { |
| | color: var(--text-dark); |
| | margin-bottom: 0.75rem; |
| | font-weight: 700; |
| | } |
| |
|
| | .innovation-card p { |
| | color: var(--text-medium); |
| | font-size: 0.95rem; |
| | line-height: 1.6; |
| | } |
| |
|
| | |
| | .team-section { |
| | display: flex; |
| | flex-wrap: wrap; |
| | justify-content: center; |
| | gap: 1.5rem; |
| | margin: 2rem 0; |
| | } |
| |
|
| | .team-member { |
| | text-align: center; |
| | margin-bottom: 1.25rem; |
| | background-color: white; |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | box-shadow: var(--card-shadow); |
| | transition: transform var(--transition-speed); |
| | width: 230px; |
| | } |
| |
|
| | .team-member:hover { |
| | transform: translateY(-5px); |
| | } |
| |
|
| | .team-member h3 { |
| | color: var(--text-dark); |
| | margin-bottom: 0.3rem; |
| | font-size: 1.1rem; |
| | font-weight: 700; |
| | } |
| |
|
| | .team-member h4 { |
| | color: var(--primary-color); |
| | margin-top: 0; |
| | margin-bottom: 0.75rem; |
| | font-size: 0.9rem; |
| | } |
| |
|
| | .team-member p { |
| | color: var(--text-medium); |
| | font-size: 0.85rem; |
| | line-height: 1.5; |
| | } |
| |
|
| | .avatar { |
| | background: var(--primary-gradient); |
| | color: white; |
| | width: 90px; |
| | height: 90px; |
| | border-radius: 50%; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | margin: 0 auto 1rem auto; |
| | font-size: 2rem; |
| | font-weight: 700; |
| | box-shadow: 0 5px 15px rgba(14, 165, 165, 0.3); |
| | } |
| |
|
| | |
| | .footer { |
| | text-align: center; |
| | color: var(--text-light); |
| | font-size: 0.85rem; |
| | margin-top: 2rem; |
| | margin-bottom: 1rem; |
| | padding: 1rem; |
| | border-top: 1px solid var(--border-color); |
| | } |
| |
|
| | |
| | .alert { |
| | padding: 1rem 1.25rem; |
| | border-radius: var(--border-radius); |
| | margin-bottom: 1rem; |
| | position: relative; |
| | border-right: 4px solid; |
| | } |
| |
|
| | .alert-icon { |
| | margin-left: 0.5rem; |
| | font-size: 1.25rem; |
| | } |
| |
|
| | .alert-info { |
| | background-color: rgba(52, 144, 220, 0.1); |
| | color: var(--info-color); |
| | border-right-color: var(--info-color); |
| | } |
| |
|
| | .alert-success { |
| | background-color: rgba(56, 193, 114, 0.1); |
| | color: var(--success-color); |
| | border-right-color: var(--success-color); |
| | } |
| |
|
| | .alert-warning { |
| | background-color: rgba(247, 183, 49, 0.1); |
| | color: var(--warning-color); |
| | border-right-color: var(--warning-color); |
| | } |
| |
|
| | .alert-danger { |
| | background-color: rgba(227, 52, 47, 0.1); |
| | color: var(--danger-color); |
| | border-right-color: var(--danger-color); |
| | } |
| |
|
| | |
| | .stTabs [data-baseweb="tab-list"] { |
| | gap: 1px; |
| | background-color: var(--background-light); |
| | border-radius: var(--border-radius); |
| | padding: 0.3rem; |
| | } |
| |
|
| | .stTabs [data-baseweb="tab"] { |
| | height: 50px; |
| | white-space: pre-wrap; |
| | background-color: white; |
| | border-radius: 6px; |
| | gap: 1px; |
| | padding: 0.6rem 1rem; |
| | font-family: 'Almarai', 'Tajawal', sans-serif; |
| | font-weight: 500; |
| | transition: all var(--transition-speed); |
| | } |
| |
|
| | .stTabs [aria-selected="true"] { |
| | background: var(--primary-gradient) !important; |
| | color: white !important; |
| | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| | } |
| |
|
| | |
| | input, textarea, .stTextInput>div>div>input, .stNumberInput>div>div>input { |
| | direction: rtl; |
| | text-align: right; |
| | font-family: 'Almarai', 'Tajawal', sans-serif; |
| | font-size: 0.95rem; |
| | padding: 0.6rem 0.75rem; |
| | border-radius: 6px; |
| | border: 1px solid var(--border-color); |
| | transition: border-color var(--transition-speed); |
| | } |
| |
|
| | input:focus, textarea:focus, .stTextInput>div>div>input:focus, .stNumberInput>div>div>input:focus { |
| | outline: none; |
| | border-color: var(--primary-color); |
| | box-shadow: 0 0 0 1px var(--primary-light); |
| | } |
| |
|
| | |
| | .stSelectbox [data-baseweb="select"] { |
| | direction: rtl; |
| | text-align: right; |
| | font-family: 'Almarai', 'Tajawal', sans-serif; |
| | } |
| |
|
| | |
| | @media (max-width: 992px) { |
| | .main-title { |
| | font-size: 1.75rem; |
| | } |
| | |
| | .header-container { |
| | padding: 1rem; |
| | } |
| | |
| | .header-title h1 { |
| | font-size: 1.5rem; |
| | } |
| | } |
| |
|
| | @media (max-width: 768px) { |
| | .header-container { |
| | flex-direction: column; |
| | align-items: flex-start; |
| | } |
| | |
| | .header-info { |
| | margin-top: 1rem; |
| | width: 100%; |
| | justify-content: flex-start; |
| | } |
| | |
| | .nav-menu ul { |
| | flex-wrap: wrap; |
| | justify-content: flex-start; |
| | } |
| | |
| | .nav-menu li { |
| | margin-bottom: 0.5rem; |
| | margin-left: 0.5rem; |
| | width: calc(50% - 1rem); |
| | } |
| | |
| | .module-title { |
| | font-size: 1.5rem; |
| | } |
| | |
| | .main-title { |
| | font-size: 1.4rem; |
| | } |
| | |
| | .innovation-card, .info-card { |
| | margin-bottom: 1rem; |
| | padding: 1rem; |
| | } |
| | |
| | .dataframe { |
| | display: block; |
| | overflow-x: auto; |
| | } |
| | |
| | .team-member { |
| | width: 100%; |
| | } |
| | } |
| |
|
| | @media (max-width: 480px) { |
| | .main-title { |
| | font-size: 1.25rem; |
| | } |
| | |
| | .header-title h1 { |
| | font-size: 1.25rem; |
| | } |
| | |
| | .nav-menu li { |
| | width: 100%; |
| | margin-left: 0; |
| | } |
| | } |
| |
|
| | |
| | @media only screen and (max-width: 375px) { |
| | .nav-menu { |
| | margin: 0.5rem 0; |
| | } |
| | |
| | button, .stButton>button { |
| | padding: 0.5rem 0.75rem; |
| | font-size: 0.9rem; |
| | } |
| | |
| | .module-title, .info-card h3, .innovation-card h3 { |
| | font-size: 1.1rem; |
| | } |
| | } |
| |
|
| | |
| | .icon { |
| | font-size: 1.1rem; |
| | margin-left: 0.5rem; |
| | } |
| |
|
| | |
| | .bg-light { |
| | background-color: var(--background-light); |
| | } |
| |
|
| | .card { |
| | background: white; |
| | border-radius: var(--border-radius); |
| | box-shadow: var(--card-shadow); |
| | padding: 1.25rem; |
| | margin-bottom: 1.25rem; |
| | } |
| |
|
| | |
| | .about-system { |
| | margin: 2rem 0; |
| | background: white; |
| | border-radius: var(--border-radius); |
| | box-shadow: var(--card-shadow); |
| | padding: 1.5rem; |
| | } |
| |
|
| | .about-system h2 { |
| | color: var(--primary-color); |
| | margin-bottom: 1rem; |
| | padding-bottom: 0.5rem; |
| | border-bottom: 2px solid var(--primary-light); |
| | } |
| |
|
| | .about-system p { |
| | line-height: 1.6; |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .about-system ul { |
| | padding-right: 1.5rem; |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .about-system li { |
| | margin-bottom: 0.5rem; |
| | line-height: 1.6; |
| | } |
| |
|
| | |
| | .progress { |
| | height: 0.5rem; |
| | overflow: hidden; |
| | background-color: var(--background-light); |
| | border-radius: 0.25rem; |
| | margin: 0.5rem 0 1rem 0; |
| | } |
| |
|
| | .progress-bar { |
| | height: 100%; |
| | border-radius: 0.25rem; |
| | background: var(--primary-gradient); |
| | } |
| |
|
| | |
| | .countdown-timer { |
| | display: flex; |
| | justify-content: center; |
| | gap: 1rem; |
| | margin: 1.5rem 0; |
| | } |
| |
|
| | .time-block { |
| | background: white; |
| | border-radius: var(--border-radius); |
| | padding: 0.75rem 1rem; |
| | text-align: center; |
| | min-width: 80px; |
| | box-shadow: var(--card-shadow); |
| | } |
| |
|
| | .time-value { |
| | font-size: 1.75rem; |
| | font-weight: 700; |
| | color: var(--primary-color); |
| | line-height: 1; |
| | } |
| |
|
| | .time-label { |
| | font-size: 0.8rem; |
| | color: var(--text-medium); |
| | margin-top: 0.25rem; |
| | } |
| |
|
| | |
| | .settings-form { |
| | background: white; |
| | border-radius: var(--border-radius); |
| | padding: 1.5rem; |
| | box-shadow: var(--card-shadow); |
| | } |
| |
|
| | .settings-group { |
| | margin-bottom: 1.5rem; |
| | } |
| |
|
| | .settings-group h3 { |
| | font-size: 1.2rem; |
| | margin-bottom: 1rem; |
| | padding-bottom: 0.5rem; |
| | border-bottom: 1px solid var(--border-color); |
| | } |
| |
|
| | .settings-item { |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .settings-item label { |
| | display: block; |
| | margin-bottom: 0.5rem; |
| | font-weight: 500; |
| | } |
| |
|
| | |
| | .pricing-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
| | gap: 1.25rem; |
| | margin: 1.5rem 0; |
| | } |
| |
|
| | .price-card { |
| | background: white; |
| | border-radius: var(--border-radius); |
| | padding: 1.25rem; |
| | box-shadow: var(--card-shadow); |
| | display: flex; |
| | flex-direction: column; |
| | } |
| |
|
| | .price-header { |
| | margin-bottom: 1rem; |
| | padding-bottom: 0.5rem; |
| | border-bottom: 1px solid var(--border-color); |
| | } |
| |
|
| | .price-value { |
| | font-size: 1.5rem; |
| | font-weight: 700; |
| | color: var(--primary-color); |
| | margin: 0.5rem 0; |
| | } |
| |
|
| | .price-details { |
| | flex-grow: 1; |
| | } |
| |
|
| | .price-details ul { |
| | padding-right: 1.25rem; |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .price-details li { |
| | margin-bottom: 0.5rem; |
| | line-height: 1.5; |
| | } |
| |
|
| | .price-footer { |
| | margin-top: auto; |
| | padding-top: 1rem; |
| | } |
| |
|
| | |
| | .colored-icon { |
| | background: var(--primary-gradient); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| |
|
| | |
| | .logo { |
| | display: flex; |
| | align-items: center; |
| | } |
| |
|
| | .logo-text { |
| | font-weight: 800; |
| | font-size: 1.25rem; |
| | margin-right: 0.5rem; |
| | background: var(--primary-gradient); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| |
|
| | |
| | .bold { |
| | font-weight: 700; |
| | } |
| |
|
| | |
| | .mermaid { |
| | margin: 1.5rem 0; |
| | } |
| |
|
| | |
| | .stSidebar { |
| | background-color: white; |
| | box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05); |
| | } |
| |
|
| | [data-testid="stSidebarContent"] { |
| | background: var(--sidebar-gradient); |
| | } |
| |
|
| | |
| | .dashboard-card { |
| | background: white; |
| | border-radius: var(--border-radius); |
| | padding: 1rem; |
| | box-shadow: var(--card-shadow); |
| | height: 100%; |
| | position: relative; |
| | overflow: hidden; |
| | } |
| |
|
| | .dashboard-card::before { |
| | content: ""; |
| | position: absolute; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | height: 4px; |
| | background: var(--primary-gradient); |
| | } |
| |
|
| | .dashboard-value { |
| | font-size: 2rem; |
| | font-weight: 800; |
| | color: var(--primary-color); |
| | margin: 0.5rem 0; |
| | } |
| |
|
| | .dashboard-title { |
| | color: var(--text-medium); |
| | font-size: 0.9rem; |
| | margin-bottom: 0.5rem; |
| | font-weight: 600; |
| | } |
| |
|
| | .dashboard-change { |
| | font-size: 0.8rem; |
| | display: flex; |
| | align-items: center; |
| | } |
| |
|
| | .change-up { |
| | color: var(--success-color); |
| | } |
| |
|
| | .change-down { |
| | color: var(--danger-color); |
| | } |
| |
|
| | |
| | .company-info { |
| | text-align: center; |
| | background: white; |
| | padding: 1rem; |
| | border-radius: var(--border-radius); |
| | margin: 1.5rem 0; |
| | box-shadow: var(--card-shadow); |
| | } |
| |
|
| | .company-logo { |
| | max-width: 150px; |
| | margin: 0 auto 1rem auto; |
| | } |
| |
|
| | .company-name { |
| | font-size: 1.2rem; |
| | font-weight: 700; |
| | color: var(--text-dark); |
| | margin-bottom: 0.5rem; |
| | } |
| |
|
| | .company-slogan { |
| | font-size: 0.9rem; |
| | color: var(--text-medium); |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .company-contact { |
| | display: flex; |
| | justify-content: center; |
| | gap: 1rem; |
| | margin-top: 1rem; |
| | } |
| |
|
| | .contact-item { |
| | display: flex; |
| | align-items: center; |
| | font-size: 0.85rem; |
| | color: var(--text-medium); |
| | } |
| |
|
| | .contact-icon { |
| | margin-left: 0.3rem; |
| | } |
