/* ===========================
   MAIN PAGE ONLY STYLING
   =========================== */

/* ====================
   BOX-SIZING FOR ALLE
   ==================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------- BAGGRUNDSBILLEDE (det store slørede landskab) ---------- */
.background-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
    width: 100%;
    max-width: 900px;
    opacity: 0.12;
    pointer-events: none;      /* Brugeren kan ikke klikke på det */
    z-index: 0;
    user-select: none;
}

.background-logo img {
    width: 250%;
    height: auto;
    filter: blur(5px);
}

/* ---------- FORSIDE INDHOLD (container) ---------- */
.frontpage-content {
    padding: 140px 20px 100px;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---------- TEKSTBOKSEN PÅ FORSIDEN (den hvide/gennemsigtige boks) ---------- */
.intro-text {
    font-size: 1.45rem;
    line-height: 2.1;
    text-align: justify;
    color: #333;
    background: rgba(255, 255, 255, 0.95);
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    margin-top: 80px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Tilføj dette i dit eksisterende responsive stylesheet */
@media (max-width: 768px) {
    .intro-text {
        text-align: left;        /* eller center hvis du vil have centreret */
        hyphens: auto;           /* hjælper med orddeling på dansk */
        word-spacing: normal;    /* nulstiller eventuelle store mellemrum */
    }
    
    /* Hvis du vil have det pænt centreret men stadig undgå kæmpe mellemrum */
    .intro-text p {
        text-align-last: left;   /* sikrer at sidste linje også flugter pænt venstre */
    }
}

.intro-text p {
    margin-bottom: 1.8rem;
}

.intro-text strong {
    color: #000;
}

/* Overskrift inde i tekstboksen */
.intro-text h1 {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 600;
    color: #000;
}

/* Fade-in animation */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to {   
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    /* Baggrund */
    .background-logo {
        max-width: 90%;
    }
    
    .background-logo img {
        width: 150%;
        filter: blur(4px);
    }

    /* Container */
    .frontpage-content {
        padding: 80px 15px 60px;
    }

    /* Tekstboks */
    .intro-text {
        font-size: 1.2rem;
        padding: 25px 15px;
        line-height: 1.6;
        margin-top: 40px;
    }

    .intro-text h1 {
        font-size: 1.6rem;
        margin-bottom: 25px;
    }
}

/* Meget små skærme (små telefoner) */
@media (max-width: 480px) {
    .background-logo {
        display: none;
    }

    .intro-text h1 {
        font-size: 1.4rem; /* sikrer at overskriften holder sig inde i boksen */
    }
}

/* ===========================
   Shihans Billede på Contact Page
   =========================== */
   .frontpage-content {
    position: relative;        /* NYTTIGT – dette er referencen for position: absolute */
    padding: 140px 20px 100px;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    z-index: 1;
}

/* Fjern margin-top fra billedet og brug i stedet absolut positionering */
.hero-image.large-image {
    position: absolute;
    top: 480px;                /* Juster denne værdi, indtil billedet står præcis der du vil have det */
    right: 25%;                /* eller brug left: 650px; hvis du foretrækker det */
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Responsive justeringer for billedet på mindre skærme */
@media (max-width: 768px) {

    .frontpage-content {
        padding: 100px 20px 60px;  /* lidt mindre padding på mobil */
    }

    .hero-image.large-image {
        position: absolute;
        top: 330px;        /* flyt OP (mindre tal = længere op) */
        left: 65%;         /* flyt MOD HØJRE (større procent = længere mod højre) */
        transform: translateX(-50%);  /* så billedet ikke hopper for langt */
        
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        z-index: 3;
    }
}

/* Shihan billede på Founder Page */
.intro-text {
    position: relative;      /* Gør det muligt at placere ting indeni */
    background: white;
    padding: 40px;
    border-radius: 10px;
    max-width: 800px;
    margin: auto;
}

.founder-image {
    position: absolute;
    top: 20px;               /* Justér billedets lodrette placering */
    right: 20px;             /* Justér billedets vandrette placering */
}

.founder-image img {
    width: 150px;
    height: 150px;           /* Gør højde og bredde ens */
    border-radius: 50%;      /* Dette gør billedet helt rundt */
    object-fit: cover;       /* Beskærer billedet pænt inden for cirklen */
}
@media (max-width: 768px) {
    .founder-image {
        position: absolute;    /* Gør billedet til en del af normal flow på små skærme */
        margin: 0 auto 20px; /* Centrer billedet og giv lidt margin nedenunder */
        display: block;
        top:20px;
        right:5px;
    }

    .founder-image img {
        width: 80px;
        height: 80px;
    }
}