body {
    margin:0;
    font-family:'Quicksand', sans-serif;
    background: url('bilder/bakgrund.jpg') no-repeat center center fixed;
    background-size: cover;
    color:#333;
}

/* Kort */
.card {
    background: rgba(200,230,200,0.85);
    border-radius:20px;
    padding:20px;
    margin:1px auto 30px auto;
    max-width:700px;
    box-shadow:0 3px 12px rgba(0,0,0,0.1);
}

/* Header */
.hero {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:10px 20px;
}
.hero-container { display:flex; align-items:center; gap:10px; }
.hero img.logo { width:80px; height:80px; border-radius:50%; object-fit:cover; }
.hero-text h1 { font-size:2rem; margin:0; color:white; }
.hero-text .tagline { font-size:1rem; color:white; }

/* Om oss och trädgårdsdesign */
.about-content,
.service-content {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:20px;
    justify-content:space-between;
}
.about-img,
.service-img {
    width:250px;
    border-radius:15px;
    box-shadow:0 3px 12px rgba(0,0,0,0.1);
}

/* Kontakt */
.contact form { display:flex; flex-direction:column; gap:10px; }
.contact input,
.contact textarea {
    padding:8px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:0.95rem;
}
.contact textarea { height:80px; }
.contact .btn.send {
    background:#4caf50;
    color:white;
    border:none;
    padding:10px;
    border-radius:15px;
    cursor:pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.contact .btn.send:hover {
    transform: scale(1.05);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* Footer */
footer {
    text-align:center;
    padding:20px;
    color:#555;
    font-size:0.9rem;
}

/* Responsivt */
@media(max-width:768px){
    .hero-container { flex-direction:column; text-align:center; }
    .hero img.logo { width:60px; height:60px; margin-bottom:10px; }
    .hero-text h1{ font-size:1.5rem; }
    .hero-text .tagline{ font-size:0.9rem; }

    .card { margin:20px 15px; padding:20px; }

    .about-content,
    .service-content {
        flex-direction:column;
        text-align:center;
    }

    .about-img,
    .service-img {
        width:80%;
        max-width:250px;
    }
}

/* =============================== */
/*  GEEKYFARMERS BILDSPEL          */
/* =============================== */

.gf-slider-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 420px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.gf-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.gf-slide.active {
    opacity: 1;
}

/* =============================== */
/*  SOCIALA MEDIER – REN VERSION   */
/* =============================== */

.social-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* TEXT | INSTAGRAM */
    grid-template-rows: auto auto; /* TEXT/INSTAGRAM + YOUTUBE */
    gap: 20px;
    align-items: start;
}

/* TEXT – vänster */
.social-header {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* INSTAGRAM – höger */
.social-instagram {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

/* YOUTUBE – under texten */
.social-youtube {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

/* Styling för media */
.social-instagram blockquote,
.social-youtube iframe {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    background: #fff;
}

.social-youtube iframe {
    height: 250px;
}

/* MOBIL */
@media (max-width: 768px) {
    .social-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .social-header {
        grid-column: 1;
        grid-row: 1;
        text-align: center;
    }

    .social-instagram {
        grid-column: 1;
        grid-row: 2;
    }

    .social-youtube {
        grid-column: 1;
        grid-row: 3;
    }
}

/* Instagram extra styling */
.instagram-media {
    background: white;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}