/* =========================
   RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   BASE
========================= */
body{
    font-family:'Montserrat', sans-serif;
    line-height:1.8;
    color:#3b2c22;
    background:#faf5ef;
    overflow-x: clip;
}

main{
    max-width:1100px;
    margin:auto;
    padding:80px 20px;
}

section{
    margin-bottom:90px;
}

/* TYPOGRAFI */
h1, h2, h3{
    font-family: 'Montserrat', sans-serif;
    letter-spacing:0.5px;
    color: #1a2847;
}

h1{
    font-size:48px;
    font-weight:700;
    line-height:1.1;
    color: #1a2847;
    letter-spacing:0.02em;
}


h2,
h3{
    color: #1a2847;
}

h2{
    font-size:26px;
    font-weight:700;
}

h3{
    font-size:20px;
    font-weight:600;
}

p{
    font-size:16px;
    color:#5a4636;
    line-height:1.75;
}

.hero-left p,
.themes-intro p,
.about p {
    margin-bottom: 18px;
}

.hero-left p:last-of-type,
.themes-intro p:last-of-type,
.about p:last-of-type {
    margin-bottom: 0;
}

/* =========================
   HEADER
========================= */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255, 253, 249, 0.85);
    backdrop-filter:blur(10px);

    border-bottom:1px solid #eee2d3;
}

.header-inner{
    max-width:1100px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
}

/* Logo */
.branding a{
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    letter-spacing:0.5px;
    color:#3b2c22;
    text-decoration:none;
}

/* Navigation */
.main-nav ul{
    display:flex;
    gap:30px;
    list-style:none;
}

.main-nav a{
    font-size:15px;
    color:#6b4f3b;
    text-decoration:none;
    position:relative;
}

/* Smooth underline */
.main-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0%;
    height:2px;
    background:#9a7055;
    transition:0.3s;
}

.main-nav a:hover::after{
    width:100%;
}

.main-nav a.active {
    color: #3b2c22;
    font-weight: 600;
}

.main-nav a.active::after {
    width: 100%;
}

/* =========================
   BUTTONS
========================= */
.btn{
    display:inline-block;
    margin-top:10px;
    padding:5px 10px;
    background:#dfc9a8;
    color:#3b2c22;
    border-radius:3px;
    text-decoration:none;
    font-weight:500;
    font-size:12px;
    letter-spacing:0.07em;
    text-transform:uppercase;
    transition:background .2s ease;
    border:none;
    cursor:pointer;
}

.btn:hover{
    background:#cdb490;
}

/* =========================
   HERO
========================= */
.hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
    margin-bottom: 0;
    grid-template-rows: auto 1fr;
}

.hero-title {
    grid-column: 1 / -1;
    font-size: clamp(28px, 5.7vw, 66px);
    font-weight: 700;
    color: #1a2847;
    line-height: 1.08;
    margin-bottom: 16px;
    white-space: nowrap;
}

.hero-subtitle {
    display: block;
    font-size: 0.52em;
    font-style: italic;
    font-weight: 500;
    margin-top: 0.25em;
    color: #1a2847;
}

.hero-subtitle::before {
    display: none;
}

.hero-left{
    animation:fadeUp 0.8s ease;
}

.hero-right{
    height:auto;
    min-height:400px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,0.08);
    animation:fadeIn 1s ease;
}

.hero-right img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-quote {
    margin: 15px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.85);
    border-left: 4px solid #9a7055;
    border-radius: 8px;
    color: #5b3f2b;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.4;
    position: relative;
    top: -12px;
}

/* Mobile hero image - hidden by default */
.mobile-hero-image {
    display: none;
}

/* =========================
   SCROLL REVEAL
========================= */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-banner {
    margin: 100px auto;
    max-width: 1100px;
    padding: 50px 60px;
    background: #ffffff;
    color: #3b2c22;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.10);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    letter-spacing: 0.03em;
    font-size: 1.3rem;
}

.scroll-banner.visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.quote-text {
    display: block;
    font-style: italic;
}

.quote-divider {
    width: 60px;
    border: none;
    border-top: 1.5px solid #3b2c22;
    margin: 0;
}

.quote-author {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}
/* CITAT */
.quote{
    margin-top:25px;
    padding-left:15px;
    border-left:3px solid #9a7055;
    font-family: 'Montserrat', sans-serif;
    color:#6b4f3b;
}

/* =========================
   JEG TILBYDER SECTION
========================= */
.offerings {
    background: white;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 110px;
    margin-top: 0;
}

.offerings h2 {
    margin-bottom: 30px;
}

.offerings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.offering-item {
    background: #f7f2ea;
    padding: 28px;
    border-radius: 10px;
    border: 1px solid #eee2d3;
}

.offering-icon {
    display: block;
    width: 36px;
    height: 36px;
    color: #1a2847;
    stroke: #1a2847;
    margin-bottom: 14px;
}

.offering-item h3 {
    color: #1a2847;
    margin-bottom: 12px;
    font-size: 20px;
}

.offering-item p {
    font-size: 15px;
    color: #6b5744;
    line-height: 1.7;
}

@media(max-width:900px){
    .offerings-grid {
        grid-template-columns: 1fr;
    }
    
    .themes {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .themes h2 {
        grid-column: 1;
    }
    
    .themes-list {
        grid-column: 1;
    }
}

/* =========================
   CARDS
========================= */
.about,
.themes{
    background:#fffdf9;
    padding:60px 50px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* =========================
   THEMES (VENSTRE TEKST + HØJRE ITEMS)
========================= */
.themes{
    text-align:left;
    background:transparent;
    padding:12px 0 0 0;
    box-shadow:none;
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap:60px;
    row-gap:0px;
    align-items:start;
    margin-bottom:90px;
}

.themes h2 {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 36px;
}

.themes-list {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
}

.themes-intro {
    grid-column: 1;
    grid-row: 2;
    font-size: 16px;
    line-height: 1.8;
    color: #5a4636;
    margin-top: 0;
    margin-bottom: 10px;
    max-width: none;
}

.themes-list ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 11px;
    margin-top: 0;
    padding-left: 0;
}


.themes-list ul{
    list-style:none;
    margin-top:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(160px,1fr));
    gap:12px;
    margin-left:0;
    padding-left:0;
}

.themes-list li{
    background:#fffdf9;
    padding:12px 16px;
    border-radius:8px;
    text-align:center;
    transition:0.25s;
    border:1px solid #ddd2c1;
    min-height:auto;
    line-height:1.4;
    position:relative;
    cursor:pointer;
    z-index: 1;
    font-size: 15px;
}

.themes-list li:hover {
    z-index: 50;
}

.themes-list li::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    visibility: hidden;
    background: #fffdf9;
    color: #3b2c22;
    border: 1px solid #ddd2c1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    white-space: normal;
    max-width: 280px;
    width: max-content;
    word-wrap: break-word;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    z-index: 250;
}

.themes-list li:hover::after,
.themes-list li.active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(8px);
    z-index: 250;
}

.themes-list li:hover,
.themes-list li.active {
    transform:translateX(5px);
    background:#e8d8bd;
    z-index: 50;
}

/* Removed white-space: nowrap for better mobile responsiveness */

.offerings h2 {
    text-align: center;
}


/* =========================
   PRISER / OM / KONTAKT GRID
========================= */
.prices-page .prices-grid,
.about-page .about-grid,
.contact-page .contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    max-width:1100px;
    margin:auto;
    align-items: center;
    align-content:start;
}

.contact-left {
    display:flex;
    flex-direction:column;
    height:100%;
    gap: 6px;
    max-height: 100%;
}

.contact-text h2 {
    margin-bottom: 4px;
}

.contact-text p {
    margin-top: 1px;
    margin-bottom: 6px;
}

.contact-text p {
    margin-top: 0;
    margin-bottom: 12px;
}


.contact-form {
    display: grid;
    grid-gap: 8px;
    width: 100%;
}

.contact-form-section h2 {
    margin-top:0;
    margin-bottom:8px;
    font-size: 24px;
    line-height: 1.2;
}
.contact-form p {
    margin-bottom: 10px;
}


.about-page h1,
.prices-page h1,
.prices-page h2 {
    margin-bottom: 25px;
}

.about-page h2 {
    margin-bottom: 20px;
}

.about-text p,
.prices-text p {
    margin-bottom: 14px;
}

.contact-page .contact-text {
    display: grid;
    grid-template-rows: auto auto;
    gap: 24px;
}



.prices-text, .about-text, .contact-text {
    max-width:600px;
    padding-right:10px;
}

.prices-image img, .about-image img, .contact-image img {
    width:100%;
    max-width:420px;
    height:auto;
    border-radius:12px;
    box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

.prices-page .prices-grid {
    grid-template-columns: 3fr 2fr;
}

/* Kun Priser-siden */
.prices-page .prices-image {
    align-self: start;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.prices-page .prices-image img {
    max-width: 100%;
}

.prices-page .prices-image img:first-child {
    max-height: 420px;
    object-fit: cover;
    object-position: center bottom;
}

/* Kun Om-siden */
.about-page .about-image {
    align-self: start;
    margin-top: 20px;
}

.about-page .about-image img {
    object-fit: cover;
    object-position: center 70%;
    height: 600px;
    max-width: 100%;
}

.prices-text ul, .about-text ul, .contact-text ul {
    padding-left: 22px;
    margin-top: 12px;
    margin-bottom: 18px;
}

.prices-text li, .about-text li, .contact-text li {
    margin-bottom: 8px;
    line-height: 1.45;
}

.prices-page h2, .about-page h2, .contact-page h2 {
    margin-top: 25px;
}

/* Hvis der kun er én kolonne på mobil */
@media(max-width:900px){
    .prices-page .prices-grid,
    .about-page .about-grid,
    .contact-page .contact-grid {
        grid-template-columns:1fr;
    }

    .prices-text, .about-text, .contact-text {
        max-width:none;
    }

    .prices-page .prices-image {
        margin-top: 0;
    }
}

/* Ændrer farven på email og telefon links på kontakt-siden */
.contact-text a,
.prices-text a {
    color: #5b3f2b;
    text-decoration: none;
}

.contact-text a:hover,
.prices-text a:hover {
    text-decoration: underline;
    color: #3b2c22;
}

/* =========================
   FLOATING CHAT BUTTON
========================= */
.floating-chat-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    background: #1a2847;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(26, 40, 71, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    z-index: 98;
    padding: 12px;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.2;
}

.floating-chat-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(26, 40, 71, 0.4);
}

/* =========================
   FOOTER (3-KOLONNE LAYOUT)
========================= */
footer {
    background: #364556;
    color: white !important;
    padding: 60px 20px 40px;
    text-align: left;
    font-size: 15px;
}

footer, footer * {
    color: white !important;
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-section h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-section p {
    margin-bottom: 10px;
    font-size: 15px;
    color: #d0d0d0;
}

.footer-section a {
    color: white !important;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: 0.2s;
}

.footer-section a:hover {
    color: #9a7055;
    text-decoration: none;
}

.find-vej-link {
    display: inline-block !important;
    margin-top: 10px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.find-vej-link:hover {
    background: rgba(255,255,255,0.1);
    border-color: #9a7055;
}

.footer-copyright {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #aaa;
}

/* =========================
   ANIMATIONER
========================= */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* =========================
   HAMBURGER MENU (MOBILE ONLY)
========================= */
.hamburger-menu {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    gap: 5px;
    z-index: 1001;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background: #3b2c22;
    border-radius: 3px;
    transition: all 0.3s ease;
    display: block;
}

/* Hamburger animation when active */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* =========================
   RESPONSIVE - TABLET & SMALL DESKTOP (900px and below)
========================= */
@media(max-width:900px){
    /* HEADER */
    .header-inner {
        flex-wrap: wrap;
        gap: 16px;
    }

    .branding a {
        font-size: 16px;
        flex: 1 0 auto;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .main-nav li {
        width: 100%;
    }

    .main-nav a {
        font-size: 14px;
        display: block;
        padding: 8px 0;
    }

    /* BASE TYPOGRAPHY */
    h1{
        font-size:38px;
        line-height: 1.2;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 18px;
    }

    p {
        font-size: 15px;
    }

    /* HERO SECTION */
    .hero {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 40px;
    }

    .hero-title {
        margin-bottom: 16px;
    }

    .hero-right {
        min-height: 280px;
        height: auto;
    }

    /* Mobile hero image */
    .mobile-hero-image {
        display: block;
        width: 100%;
        height: 320px;
        object-fit: cover;
        object-position: center 30%;
        margin-bottom: 15px;
    }

    .hero-right {
        display: none;
    }

    .hero-quote {
        font-size: 14px;
        padding: 12px 16px;
        margin: 12px;
        top: -10px;
    }

    /* SCROLL BANNER */
    .scroll-banner {
        margin: 80px auto;
        padding: 36px 30px;
        font-size: 1.1rem;
    }

    /* OFFERINGS SECTION */
    .offerings {
        padding: 30px;
        margin-bottom: 60px;
        margin-top: 40px;
    }

    .offerings h2 {
        margin-bottom: 24px;
        font-size: 26px;
    }

    .offerings-grid {
        gap: 20px;
    }

    .offering-item {
        padding: 20px;
    }

    .offering-item .offering-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .offering-item .offering-header .offering-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .offering-item .offering-header h3 {
        margin-bottom: 0;
        min-width: 0;
        flex: 1;
    }

    .offering-item h3 {
        font-size: 18px;
    }

    .offering-item p {
        font-size: 14px;
    }

    /* THEMES SECTION */
    .themes {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
        margin-bottom: 60px;
    }

    .themes h2 {
        grid-column: 1;
        grid-row: 1;
        font-size: 28px;
        margin-bottom: 8px;
    }

    .themes-intro {
        grid-column: 1;
        grid-row: 2;
        font-size: 15px;
        margin-bottom: 16px;
        max-width: 100%;
    }

    .themes-list {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
    }

    .themes-list ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .themes-list li {
        padding: 10px 14px;
        font-size: 14px;
    }

    .themes-list li::after {
        display: block;
    }

    .themes-list li.active::after {
        display: block;
    }

    /* GRID LAYOUTS (PRICES, ABOUT, CONTACT) */
    .prices-page .prices-grid,
    .about-page .about-grid,
    .contact-page .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .prices-text, .about-text, .contact-text {
        max-width: 100%;
        padding-right: 0;
    }

    .prices-page .prices-image,
    .about-page .about-image,
    .contact-page .contact-image {
        margin-top: 0;
    }

    .prices-page .prices-image {
        margin-top: 0;
    }

    .prices-image img, .about-image img, .contact-image img {
        max-width: 85%;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .prices-page h1,
    .about-page h1,
    .contact-page h1 {
        font-size: 32px;
        white-space: normal;
        margin-bottom: 16px;
    }

    .prices-page h2,
    .about-page h2,
    .contact-page h2 {
        font-size: 22px;
        white-space: normal;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    .prices-text ul, .about-text ul {
        padding-left: 20px;
    }

    .prices-text li, .about-text li {
        font-size: 14px;
    }

    /* CONTACT FORM */
    .contact-form-section {
        padding: 16px;
        margin-left: -20px;
        width: calc(100% + 40px);
    }

    .contact-form label {
        font-size: 14px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 10px;
        font-size: 16px;
    }

    /* FAQ */
    .faq-page h1 {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .faq-item h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .faq-item p {
        font-size: 14px;
    }

    .faq-item {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .faq-cta {
        padding: 24px;
    }

    /* FOOTER */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 24px;
    }

    footer {
        padding: 40px 20px 24px;
    }

    .footer-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .footer-section p {
        font-size: 14px;
    }

    /* FLOATING BUTTON */
    .floating-chat-btn {
        width: 80px;
        height: 80px;
        font-size: 12px;
        bottom: 20px;
        right: 20px;
        padding: 10px;
    }

    /* MAIN PADDING */
    main {
        padding: 45px 16px;
    }

    section {
        margin-bottom: 60px;
    }
}

/* =========================
   RESPONSIVE - PHONES & SMALL TABLETS (max-width: 600px)
========================= */
@media(max-width: 600px){
    /* HEADER */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .header-inner {
        height: 54px; /* 🔥 samme som din menu top */
        padding: 8px 12px;
        gap: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .branding {
        width: auto;
        flex-shrink: 1;
        min-width: 0;
    }

    .branding a {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Show hamburger menu on mobile */
    .hamburger-menu {
        height: 100%;
        display: flex;
        justify-content: center;
        margin-left: auto;
    }
    

    .main-nav {
        position: fixed;
        top: 54px;
        left: 0;
        right: 0;
        background: rgba(255, 253, 249, 0.98);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #eee2d3;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        z-index: 999;
        width: 100%;
    }

    .main-nav.active {
        max-height: 300px;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 16px 0;
        list-style: none;
    }

    .main-nav li {
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }

    .main-nav li:first-child {
        border-top: none;
    }

    .main-nav a {
        font-size: 13px;
        display: block;
        padding: 14px 16px;
        text-align: center;
    }

    /* BASE TYPOGRAPHY */
    html {
        font-size: 14px;
    }

    h1 {
        font-size: 28px;
        line-height: 1.25;
    }

    h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    h3 {
        font-size: 16px;
    }

    p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* MAIN PADDING */
    main {
        padding: 70px 12px 24px;
    }

    section {
        margin-bottom: 40px;
    }

    /* HERO SECTION */
    .hero {
        gap: 24px;
        margin-bottom: 24px;
    }

    .hero-title {
        font-size: clamp(20px, 5.7vw, 66px);
        white-space: normal;
        margin-bottom: 12px;
    }
    .hero-subtitle {
        white-space: normal;
    }

    .hero-left {
        max-width: 100%;
    }

    .hero-right {
        height: auto;
        min-height: 240px;
        border-radius: 8px;
    }

    .hero-quote {
        font-size: 12px;
        padding: 10px 12px;
        margin: 10px;
        top: -8px;
        line-height: 1.3;
        border-left-width: 3px;
    }

    .scroll-banner {
        margin: 60px auto;
        padding: 30px 24px;
        font-size: 1rem;
        letter-spacing: 0.02em;
    }

    /* BUTTONS */
    .btn {
        padding: 8px 16px;
        font-size: 13px;
        margin-top: 12px;
    }

    /* OFFERINGS */
    .offerings {
        padding: 20px 16px;
        border-radius: 8px;
        margin-bottom: 40px;
        margin-top: 24px;
    }

    .offerings h2 {
        font-size: 22px;
        margin-bottom: 16px;
        text-align: center;
    }

    .offerings-grid {
        gap: 16px;
    }

    .offering-item {
        padding: 16px;
        border-radius: 8px;
    }

    .offering-item h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .offering-item p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* THEMES */
    .themes {
        grid-template-columns: 1fr;
        display: grid;
        gap: 14px;
        margin-bottom: 40px;
    }

    .themes h2 {
        grid-column: 1;
        grid-row: 1;
        font-size: 22px;
        margin-bottom: 6px;
    }

    .themes-intro {
        grid-column: 1;
        grid-row: 2;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .themes-list {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
    }

    .themes-list ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .themes-list li {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 6px;
    }

    .themes-list li:hover {
        transform: none;
        background: #e8d8bd;
    }

    /* GRID LAYOUTS */
    .prices-page h1,
    .about-page h1,
    .contact-page h1 {
        font-size: 26px;
        white-space: normal;
        margin-bottom: 12px;
    }

    .prices-page h2,
    .about-page h2,
    .contact-page h2 {
        font-size: 18px;
        white-space: normal;
        margin-top: 16px;
        margin-bottom: 10px;
    }

    .prices-text ul, .about-text ul {
        padding-left: 18px;
        margin-top: 8px;
        margin-bottom: 12px;
    }

    .prices-text li, .about-text li {
        font-size: 13px;
        margin-bottom: 6px;
    }

    /* CONTACT SECTION */
    .contact-left {
        gap: 2px;
    }

    .contact-text h2 {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .contact-text p {
        font-size: 13px;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .contact-text a {
        font-size: 13px;
    }

    .contact-form-section {
        padding: 12px;
        margin-left: 0;
        width: 100%;
        margin-top: 16px;
    }

    .contact-form {
        grid-gap: 6px;
    }

    .contact-form label {
        font-size: 13px;
        margin-bottom: 4px;
        font-weight: 600;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 10px;
        font-size: 16px;
        border-radius: 6px;
    }

    .contact-form textarea {
        resize: vertical;
        min-height: 100px;
    }

    .contact-form button.btn {
        margin-top: 8px;
    }

    /* FAQ PAGE */
    .faq-page h1 {
        font-size: 26px;
    }

    .faq-page > p {
        font-size: 13px;
        margin-bottom: 24px;
    }

    .faq-item h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .faq-item p {
        font-size: 13px;
        line-height: 1.6;
    }

    .faq-item {
        margin-bottom: 18px;
        padding-bottom: 18px;
    }

    .faq-cta {
        padding: 16px;
        margin-bottom: 24px;
    }

    .faq-cta p {
        margin-bottom: 12px;
    }

    /* FOOTER */
    footer {
        padding: 24px 12px 16px;
    }

    .footer-content {
        gap: 16px;
        margin-bottom: 16px;
    }

    .footer-section h3 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .footer-section p {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .footer-section a {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .footer-copyright {
        padding-top: 12px;
        font-size: 12px;
    }

    /* FLOATING BUTTON */
    .floating-chat-btn {
        width: 75px;
        height: 75px;
        font-size: 11px;
        bottom: 16px;
        right: 16px;
        padding: 8px;
        line-height: 1.1;
    }
}

/* =========================
   RESPONSIVE - VERY SMALL PHONES (max-width: 380px)
========================= */
@media(max-width: 380px){
    /* BASE */
    body {
        font-size: 13px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 15px;
    }

    p {
        font-size: 13px;
    }

    main {
        padding: 75px 10px;
    }

    section {
        margin-bottom: 32px;
    }

    /* HEADER */
    .header-inner {
        padding: 10px 12px;
    }

    .branding a {
        font-size: 12px;
    }

    .main-nav a {
        font-size: 12px;
    }

    /* HERO */
    .hero-title {
        margin-bottom: 10px;
    }

    .hero-right {
        height: auto;
        min-height: 200px;
    }

    .hero-quote {
        font-size: 11px;
        padding: 8px 10px;
    }

    .scroll-banner {
        margin: 40px auto;
        padding: 28px 20px;
        font-size: 0.95rem;
    }

    .btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* OFFERINGS */
    .offerings {
        padding: 16px 12px;
        margin-bottom: 32px;
        margin-top: 16px;
    }

    .offerings h2 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .offering-item {
        padding: 12px;
    }

    .offering-item h3 {
        font-size: 14px;
    }

    .offering-item p {
        font-size: 12px;
    }

    /* THEMES */
    .themes h2 {
        font-size: 18px;
    }

    .themes-intro {
        font-size: 13px;
    }

    .themes-list li {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* FLOATING BUTTON */
    .floating-chat-btn {
        width: 70px;
        height: 70px;
        font-size: 11px;
        bottom: 12px;
        right: 12px;
    }
}

/* Kontaktformular */
.contact-form-section {
    background:#f7f2ea;
    padding:10px 10px 16px;
    border-radius:12px;
    box-shadow:none;
    border: none;
    margin-top:12px;
    margin-left: -15px; /* flytter til venstre */
    width: calc(100% + 15px);
    max-width: 640px;
}

.contact-form {
    display: grid;
    grid-gap: 8px;
    max-width:100%;
    margin-top:12px;
}

.contact-form label {
    font-weight: 600;
    color: #3b2c22;
    margin-bottom: 2px;
}

.contact-form input,
.contact-form textarea {
    width:100%;
    padding: 8px 10px;
    border:1px solid #ddd2c1;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}

.contact-form button.btn {
    width:max-content;
    padding: 8px 14px;
}

.contact-page p,
.contact-text p {
    line-height: 1.2;
    margin-bottom: 4px;
}

.contact-text h2 {
    margin-bottom: 2px;
}

.contact-text p + p {
    margin-top: 1px;
    margin-bottom: 1px;
}



.contact-page .contact-grid,
.prices-page .prices-grid,
.about-page .about-grid {
    gap: 20px;
}

.contact-left {
    gap: 4px;
}

.contact-text h2 {
    margin-bottom: 4px;
}


/* =========================
   FAQ PAGE
========================= */
.faq-page {
    max-width: 1100px;
    margin: 0 auto;
}

.faq-page h1 {
    margin-bottom: 12px;
}

.faq-page > p {
    margin-bottom: 40px;
    font-size: 16px;
    color: #6b5744;
}

.faq-list {
    margin-bottom: 50px;
}

.faq-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee2d3;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h3 {
    color: #1a2847;
    margin-bottom: 12px;
}

.faq-item p {
    font-size: 16px;
    line-height: 1.8;
    color: #5a4636;
}

.faq-cta {
    text-align: center;
    padding: 40px;
    background: #f1e7da;
    border-radius: 12px;
}



.hero-right img{
    width:100%;
    height:100%;
    object-position:50% 30%; /* ← VIGTIG */
}

.faq-page h1,
.faq-item h3 {
    font-family: 'Montserrat', sans-serif;
}


@media(max-width:900px){
    /* Header menu på mobil */
    .main-nav li,
    .main-nav a {
        white-space: normal;
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 12px;
    }

    /* Typiske problemstillinger rubrikker på mobil */
    .themes {
        grid-template-columns: 1fr;
    }

    .themes-list ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* =========================
   HEADER RESPONSIVE FIX
========================= */
@media(max-width:900px){
    .site-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
    }
}

@media(max-width: 600px){
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        border-bottom: none;
    }

    .header-inner {
        margin: 0 auto;
        max-width: 1100px;
    }

    .main-nav {
        top: 54px;
        position: fixed;
        width: 100%;
        border-top: none;
        border-bottom: none;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .main-nav ul {
        padding: 10px 0;
    }

    .main-nav li {
        border-top: none;
        border-bottom: none;
        width: 100%;
    }

    .main-nav a {
        padding: 14px 16px;
        text-align: center;
        display: block;
        width: 100%;
    }

    .main-nav a::after {
        display: none;
    }
}

/* =========================
   LANDSCAPE MODE (max-height: 500px)
========================= */
@media(max-height: 500px) and (orientation: landscape){
    /* HEADER - Reduce height */
    .header-inner {
        height: 44px;
        padding: 6px 12px;
    }

    .branding a {
        font-size: 13px;
    }

    .hamburger-menu {
        height: 100%;
    }

    .hamburger-menu span {
        width: 20px;
        height: 2px;
        gap: 4px;
    }

    /* NAVIGATION - Position it correctly */
    .main-nav {
        top: 44px;
    }

    /* MAIN CONTENT - Reduce padding significantly */
    main {
        padding: 44px 12px 20px;
    }

    section {
        margin-bottom: 20px;
    }

    /* TYPOGRAPHY - Make it smaller for landscape */
    h1 {
        font-size: 20px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    p {
        font-size: 12px;
        line-height: 1.4;
    }

    /* HERO SECTION */
    .hero {
        gap: 12px;
        margin-bottom: 12px;
    }

    .hero-title {
        margin-bottom: 8px;
    }

    .hero-right {
        height: 120px;
    }

    .mobile-hero-image {
        height: 120px;
        margin-bottom: 8px;
    }

    /* BUTTONS */
    .btn {
        padding: 6px 12px;
        font-size: 12px;
        margin-top: 8px;
    }

    /* SCROLL BANNER */
    .scroll-banner {
        margin: 24px auto;
        padding: 24px 16px;
        font-size: 0.9rem;
    }

    /* OFFERINGS */
    .offerings {
        padding: 15px 12px;
        margin-bottom: 30px;
    }

    .offerings h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .offering-item {
        padding: 12px;
    }

    .offering-item p {
        font-size: 11px;
    }

    /* FLOATING BUTTON */
    .floating-chat-btn {
        width: 68px;
        height: 68px;
        font-size: 11px;
        bottom: 10px;
        right: 10px;
    }

    /* FOOTER */
    footer {
        padding: 20px 12px 12px;
    }

    .footer-content {
        gap: 12px;
        margin-bottom: 12px;
    }

    .footer-section h3 {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .footer-section p {
        font-size: 11px;
        margin-bottom: 4px;
    }
}

/* =========================
   PREMIUM DESIGN ENHANCEMENTS
========================= */

html {
    scroll-behavior: smooth;
    background: #faf5ef;
    overflow-x: clip;
}

a[href^="tel:"],
a[href^="mailto:"] {
    text-decoration: underline;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f7f2ea; }
::-webkit-scrollbar-thumb { background: #9a7055; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7a5840; }

body {
    background: #faf5ef;
}

.hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}


/* ---- Quote banner ---- */
.scroll-banner {
    background: transparent;
    box-shadow: none;
    position: relative;
    overflow: visible;
    padding: 40px 0;
    border-radius: 0;
    color: #3b2c22 !important;
    border: none;
    border-top: 1px solid #ddd0bc;
    border-bottom: 1px solid #ddd0bc;
    text-align: center;
}
.scroll-banner .quote-text {
    color: #5a4636;
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 400;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    max-width: 720px;
    margin: 0 auto;
}
.scroll-banner .quote-divider {
    border-top-color: #9a7055;
    width: 30px;
    opacity: 0.6;
    margin: 16px auto;
}
.scroll-banner .quote-author {
    color: #9a8272;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

/* ---- Hero image ---- */
.hero-right {
    box-shadow: 0 12px 32px rgba(0,0,0,0.09);
}

/* ---- Reveal animation variants ---- */
.reveal-left {
    opacity: 0; transform: translateX(-30px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0; transform: translateX(30px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
    opacity: 0; transform: scale(0.97) translateY(14px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1) translateY(0); }

/* ---- Enhanced themes list hover ---- */
.themes-list li {
    transition: transform 0.22s ease, background 0.22s ease,
                border-color 0.22s ease, box-shadow 0.22s ease;
}
.themes-list li:hover,
.themes-list li.active {
    transform: translateX(6px);
    background: linear-gradient(135deg, #e8d8bd 0%, #f5ede0 100%);
    border-color: #9a7055;
    color: #1a2847;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(200,169,126,0.22);
}

/* ---- Offering cards ---- */
.offering-item {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
}


/* ---- Page image shadow (om, priser, kontakt) ---- */
.about-image img,
.prices-image img,
.contact-image img {
    box-shadow: 0 12px 32px rgba(0,0,0,0.09);
}

/* ---- Price list ---- */
.prices-text ul {
    list-style: none;
    padding-left: 0;
}
.prices-text li {
    padding: 11px 0;
    border-bottom: 1px solid #eee2d3;
    font-size: 15px;
    color: #5a4636;
}
.prices-text li:first-child {
    border-top: 1px solid #eee2d3;
}

/* ---- Enhanced contact form ---- */
.contact-form {
    display: grid;
    gap: 14px;
}
.contact-form label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a2847;
    margin-bottom: 2px;
    display: block;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #ddd2c1;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #3b2c22;
    background: #fffdf9;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    outline: none;
    display: block;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #9a7055;
    box-shadow: 0 0 0 3px rgba(200,169,126,0.18);
}
.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

/* ---- FAQ Accordion ---- */
.faq-page .faq-list {
    border-top: 1px solid #eee2d3;
}
.faq-page .faq-item {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #eee2d3;
    cursor: pointer;
}
.faq-page .faq-item h3 {
    padding: 22px 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: color 0.22s ease;
}
.faq-page .faq-item h3::after {
    content: '+';
    font-size: 24px;
    font-weight: 300;
    color: #9a8878;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s ease;
    flex-shrink: 0;
    margin-left: 20px;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
}
.faq-page .faq-item.open h3::after {
    transform: rotate(45deg);
    color: #5a4636;
}
.faq-page .faq-item h3 { color: #1a1a1a; }
.faq-page .faq-item h3:hover { color: #5a5a5a; }
.faq-page .faq-item p {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.35s ease, padding-bottom 0.35s ease;
    opacity: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
.faq-page .faq-item.open p {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 22px;
}

/* ---- FAQ CTA box ---- */
.faq-cta {
    background: #f0e8db;
    border: 1px solid #ddd0bc;
    border-radius: 10px;
    padding: 40px 50px;
    text-align: center;
}
.faq-cta p {
    color: #5a4636;
    font-size: 16px;
    margin-bottom: 16px;
}

/* ---- Mobile / small screen overrides ---- */
@media (max-width: 768px) {
    .scroll-banner { padding: 28px 16px; }
    .scroll-banner .quote-text { font-size: 1rem; }
    .hero-right { box-shadow: 0 12px 30px rgba(0,0,0,0.10); }
    body { background: #faf5ef; }
}

/* ---- Mobile tooltip modal ---- */
.mobile-tooltip-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 380px;
    background: #fffdf9;
    color: #3b2c22;
    padding: 24px 24px 20px 24px;
    border-radius: 12px;
    border: 1px solid #ddd2c1;
    z-index: 1001;
    font-size: 15px;
    line-height: 1.65;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.mobile-tooltip-modal.visible {
    display: block;
}

.mobile-tooltip-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: #8a7060;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    touch-action: manipulation;
}

.mobile-tooltip-close:hover,
.mobile-tooltip-close:focus {
    color: #3b2c22;
}

@media (max-width: 768px) {
    .themes-list li.active::after,
    .themes-list li:hover::after {
        display: none;
    }
}

/* ---- Pris-kort ---- */
.price-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0 8px;
}

.price-card {
    background: #fffdf9;
    border: 1px solid #ddd2c1;
    border-radius: 10px;
    padding: 22px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.price-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.price-card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8a7060;
}

.price-card-price {
    font-size: 26px;
    font-weight: 700;
    color: #1a2847;
    line-height: 1.1;
}

.price-card-note {
    font-size: 12px;
    color: #6b5744;
    line-height: 1.4;
}

.price-note {
    font-size: 13px;
    color: #8a7060;
    margin-top: 8px;
    margin-bottom: 20px;
    font-style: italic;
}

@media (max-width: 600px) {
    .price-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .price-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 16px 18px;
        gap: 12px;
    }

    .price-card-info {
        flex: 1;
    }

    .price-card-price {
        font-size: 22px;
        flex-shrink: 0;
    }
}

/* ---- Tidslinje ---- */
.timeline {
    position: relative;
    padding-left: 28px;
    margin: 20px 0 28px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: #ddd2c1;
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 14px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -24px;
    top: 16px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #9a7055;
    border: 2px solid #faf5ef;
    box-shadow: 0 0 0 2px #9a7055;
    z-index: 1;
}

.timeline-content {
    background: #fffdf9;
    border: 1px solid #eee2d3;
    border-radius: 9px;
    padding: 14px 16px;
}


.timeline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.timeline-period {
    font-size: 12px;
    font-weight: 700;
    color: #9a7055;
    letter-spacing: 0.04em;
}

.timeline-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 20px;
}

.tag-terapi  { background: #e6efe6; color: #3a6b3a; }
.tag-hr      { background: #e6ecf4; color: #1a2847; }
.tag-born    { background: #f4ede6; color: #7a4020; }

.timeline-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a2847;
    margin: 0 0 3px;
    line-height: 1.4;
}

.timeline-content p {
    font-size: 13px;
    color: #6b5744;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .timeline {
        padding-left: 24px;
    }

    .timeline-dot {
        left: -20px;
        width: 11px;
        height: 11px;
    }

    .timeline-content {
        padding: 12px 14px;
    }

    .timeline-content h4 {
        font-size: 13px;
    }
}