:root {
    --primary-blue: #00BFFF;
    /* Deep Sky Blue, liknande loggans färg */
    --dark-bg: #272727;
    /* Mörkgrå bakgrund enligt önskemål */
    --header-bg: #1a1a1a;
    /* En något mörkare färg för headern */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-bg);
    color: #f3f4f6;
    /* Gray-100 */
}

.text-c-blue {
    color: var(--primary-blue);
}

.bg-c-blue {
    background-color: var(--primary-blue);
}

.border-c-blue {
    border-color: var(--primary-blue);
}

.bg-header {
    background-color: var(--header-bg);
}

/* Anpassad klass för loggans bakgrund/färg om man inte har en PNG */
.logo-placeholder {
    /* Simulerar logotypens form och färg */
    display: inline-flex;
    align-items: center;
    font-size: 2rem;
    /* Storlek på texten som fallback */
    font-weight: 800;
}

/* En placeholder för den bifogade logotypen - använd en URL till bilden här */
.logo-image {
    height: 50px;
    /* Standardhöjd för logotyp i nav */
    width: auto;
    /* Placeholder för bilden. När ni har en länk, byt ut bakgrunden till bilden */
    background-color: transparent;
    display: inline-block;
    /* Exempel på hur loggan kan se ut som en SVG-form */
    content: url(imgs/logo-2.png);
    transform: scaleX(0.9);
    /* För att imitera den lutande stilen */
}

/* Tidslinje stil */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #374151;
    /* Gray-700 */
    transform: translateX(-50%);
}

@media (max-width: 1023px) {

    /* Under large screens */
    .timeline-line {
        left: 20px;
        transform: none;
    }

    .timeline-item:nth-child(even) .timeline-content {
        text-align: left;
    }
}

/* Stil för input och textarea (inkluderar nu select) */
.input-style {
    background-color: #374151;
    /* Gray-700 */
    color: #f3f4f6;
    border: 1px solid #4b5563;
    /* Gray-600 */
    transition: border-color 0.3s, box-shadow 0.3s;
}

.input-style:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 1px var(--primary-blue);
    outline: none;
}

/* Hover-effekt för servicekorten */
.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 191, 255, 0.1), 0 4px 6px -2px rgba(0, 191, 255, 0.05);
    /* Lätt blå skugga */
    transform: translateY(-4px);
}