:root {
    --text-color: #333333;
    --primary-color: #f56b00;
    --primary-hover-color: #e35a00;
    --secondary-color: #25a9d3;
    --secondary-hover-color: #3992b2;
    --dark-color: rgba(0, 0, 0, 0.8);
    --darkgrey-color: rgb(90, 81, 81);
    --mediumgrey-color: rgba(0, 0, 0, 0.5);
    --lightgrey-color: rgba(0, 0, 0, 0.18);
    --light-color: rgba(0, 0, 0, 0.08);
    --very-light-color: rgba(0, 0, 0, 0.03);
    --border-color: var(--light-color);
}

/* === Global Text === */
body {
    color: var(--text-color);
}

/* === Buttons === */
.ui.primary.button {
    background-color: var(--primary-color);
    color: white;
}

.ui.primary.button:hover, .ui.primary.button:focus {
    background-color: var(--primary-hover-color);
}

.ui.secondary.button {
    background-color: var(--secondary-color);
    color: white;
}

.ui.secondary.button:hover, .ui.secondary.button:focus {
    background-color: var(--secondary-hover-color);
}

/* === Headers === */
.ui.header {
    color: var(--text-color);
}

/* === Segments === */
.ui.segment {
    border: 1px solid var(--border-color);
    background-color: white;
}

/* === Menu === */
.ui.menu {
    background-color: white;
    border-bottom: 1px solid var(--lightgrey-color);
}

.ui.menu .item {
    color: var(--text-color);
}

.ui.menu .item:hover {
    background-color: var(--very-light-color);
}

.ui.menu .active.item {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}

/* === Labels (badges, statuses...) === */
.ui.label {
    background-color: var(--secondary-color);
    color: white;
}

.ui.label.orange {
    background-color: var(--primary-color);
}

/* === Inputs and Forms === */
.ui.input > input,
.ui.form input {
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.ui.input > input:focus,
.ui.form input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

/* === Tables === */
.ui.table {
    border: 1px solid var(--border-color);
}

.ui.table th,
.ui.table td {
    border-color: var(--border-color);
    color: var(--text-color);
}

/* === Links === */
a {
    color: var(--secondary-color);
}

a:hover {
    color: var(--secondary-hover-color);
}

/* === Content === */

section {
    padding: 5rem 0;
}

#benefits i.icon {
    font-size: 3rem;
    color: var(--primary-color);
}

#benefits .ui.header {
    margin-top: 0.5rem;
}

#benefits p {
    font-size: 1.1rem;
    line-height: 1.5;
}

#features h3 {
    font-size: 1.4rem;
}

#features .message h4, #pricing .message h4 {
    font-size: 1.25rem;
}

#features p, #pricing .message p {
    font-size: 1.2rem;
    line-height: 1.7;
}

#features .message, #pricing .message {
    padding-bottom: 2rem;
}

#features .row
{
    margin-bottom: 2rem;
}

#features .message .icon {
    color: var(--secondary-color);
}

.ui.image.screenshot {
    width: 90%;
    margin: auto;
    max-height: 300px;
    object-fit: contain;
    border: 1px solid var(--lightgrey-color);
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

#pricing .card .header {
    color: var(--secondary-color);
}

#pricing .card h3 {
    font-size: 1.8rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#pricing .card h3 > span {
    display: block;
    font-size: 1.1rem;
    color: var(--mediumgrey-color);
    font-weight: normal;
    margin-top: -0.5rem;
}

#pricing .card .bookings {
    font-size: 1.8rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#pricing .card .bookings > span {
    display: block;
    font-size: 1.1rem;
    color: var(--mediumgrey-color);
    font-weight: normal;
    margin-top: -0.5rem;
}

#pricing i.icon {
    color: var(--primary-color);
}