:root {
    --main: #272727;
    --main1: #191919;
    --main2: #292929;
    --main3: #212121;
    --background: #313131;
    --detail: #393939;
    --textc: #ececec;
    --ripple: rgba(255, 255, 255, 0.534);
    --pdf: #292929;
    --speccolor: #588434;
    --btn: #272727;
}

.darkmode{
    --main: #e2e2e2;      
    --main1: #cccccc;     
    --main2: #d0d0d0;    
    --main3: #b0b0b0;     
    --pdf: #f5f5f5;
    --background: #fffFFF;
    --ripple: rgba(126, 126, 126, 0.534);
    --detail: #f5f5f5;  
    --textc: #1c1c1c;      
    --speccolor: #588434;  
    --btn: #eeeeee;
}
a{
    text-decoration: none;
    color: var(--textc);
}
img{
    width: 100%;
    margin: 0; 
    padding: 0; 
    display: block; 
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    letter-spacing: 0.7px;
}

html, body {
    min-height: 100vh;
    background-color: var(--background);
    display: grid;
    overflow: visible; 
}


html {
    overflow-y: scroll;
}

.page-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
    flex: 1;
}

header{
    padding: 0;
    height: 100px;
}

main{
    flex: 1;
    gap: 40px;
}

main, section, footer, header{
    display: grid;
    place-items: center;
}



/* Viktiga baskomponenter */
.btn{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: var(--textc);    
}
.ripple {
    pointer-events: none;
    position: absolute;
    border-radius: 50%;
    background-color: var(--ripple);
    transform: scale(0);
    animation: ripple 0.6s linear forwards;
}
.btn1{
    padding: 7px 11px;
    border: 1px solid rgb(42, 132, 223);
    border-radius: 5px;
    color: rgb(42, 132, 223);
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 300ms;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn1:hover{
    border: 1px solid rgb(42, 132, 223);
    background-color: rgb(42, 132, 223);
    border-radius: 5px;
    color: #ececec;
    font-size: 0.9rem;
    font-weight: bold;
}
/* Viktiga baskomponenter */



/* contContainerHeader / Bild med beskrivning */
.rdImg img{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: none;
    
}
.rdImg{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.19);
    border-radius: 0.5rem;
}
#h1rd{
    padding-top: 3%;
}
.imgtitle{
    background-color: var(--main2);
    border: 1px solid #727272;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: none;
    padding: 0.8%;
    text-align: left;
    font-style: italic;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--textc);
}
#learnmoretext{
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    color: rgb(42, 132, 223);
}
#pLearn{
    text-decoration: underline;
    font-style: normal;
}
#learnFont{
    font-size: 0.9rem;
}
.mainText{
    color: var(--textc);
    text-align: center;
    width: 100%;
}
/* contContainerHeader / Bild med beskrivning */

#mailcon{
    color: rgb(42, 132, 223);
    text-decoration: underline;
    transition: all 300ms;
}
#mailcon:hover{
    color: rgb(32, 93, 153);
}

/* Nav menyn */
.darkMode, .hamMenu{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.line{
    width: 2px;
    height: 2.5rem;
    background-color: #727272;
    margin: 5px;
}
.navMenu{
    background-color: var(--main);
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between; 
    flex-direction: row-reverse;
    align-items: center; 
    position: fixed;
    top: 1%;
    left: auto;
    border: 1.5px solid #727272;
    z-index: 1000; 

}
.imgBox {
  display: flex; 
  align-items: center; 
}
.imgBox a {
  display: inline-block; /* Gör länken lika stor som innehållet */
}
.imgBox img {
  display: block; 
  width: 100%;
  height: auto; 
}
#UL {
    display: none; 
}
#UL.show {
    display: flex; 
}
#UL li a {
  display: flex; 
  align-items: center; 
  text-decoration: none; 
}
#UL li {
  list-style: none;
}
#close {
    display: none; /* "close"-ikonen är dold som standard */
    font-size: 2rem;
}
.unorderedList{
    display: flex;
    width: 100%;
    cursor: auto
}
li {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 3.5%;
    border-left: 1px solid #727272;
    color: var(--textc);
    display: flex;  
    justify-content: space-between;  
    align-items: center; 
}
#adaptogens, #synergy, #covid {
    display: none; 
    display: flex;  
    justify-content:start;
    align-items: center;
    border-bottom: 1px solid #727272;
    
}
#fontIcon{
    font-size: 0.8rem;
}
#fontIcon2{
    font-size: 1.3rem;
}
#adaptogens, #synergy, #covid{
    display: none;
}
.rotated {
    transform: rotate(90deg);
    transition: transform 0.3s ease; 
}
a #ad, #co, #sy{
    border-bottom: none;
    width: 100%;
    justify-content:left;
    gap: 0.5rem;
}
#Li2{
    border-bottom: none;
}
/* Nav menyn */



/* Bild + Knappar / home */
#contactbtn, #aboutbtn{
    color: var(--textc);
    border: 1px solid var(--textc);
    padding: 0.7rem 1.275rem;
    font-size: 0.925rem;
    font-weight: 500;
}
#contactbtn:hover, #aboutbtn:hover{
    color: #ececec; 
    border: 1px solid rgb(42, 132, 223);

}
.btnContainer{
    padding-left: 3%;
    display: flex;
    gap: 10px;
}
#headerAb:hover, #headerCn:hover{
    opacity: 0.9;  
}
/* Bild + Knappar / home */



/* Researched topics element */
.adapImg {
    position: relative;
    text-align: center;
    object-fit: cover;
    border: 1px solid #727272;
    border-radius: 0.4rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
.adapImg img{
    object-fit: cover;

    aspect-ratio: 1/0.6; 
}
.adapImg{
    overflow: hidden;
}
.adapImg button:hover{
    background-color: var(--btn);
}
.adapImg button {
    cursor: pointer;
    overflow: hidden;
    color: var(--textc);
    padding: 14px 18px;
    border: 1px solid #727272;
    border-radius: 5px;
    color: var(--textc);
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}
.headerRes{
    width: 100%;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    color: var(--textc);
}
.text-overlay-res {
    padding-left: 10px;
    position: absolute;
    display: flex;
    top: 11.5%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    color: #ececec;
    letter-spacing: 0.5rem;
    width: 100%;
    text-align: left;
    font-size: 1.75rem;
    font-weight: 400;
    border-radius: 4px;
    text-align: center;
    font-family: "Courier Prime", serif;
    color: #ececec;
}
#atext{
    text-shadow: 1.25px 1.25px 0 #000000, 2.5px 2.5px 0 #eeeb07;
}
#ctext{
    text-shadow: 1.25px 1.25px 0 #000000, 2.5px 2.5px 0 #b13030;
}
#stext{
    text-shadow: 1.25px 1.25px 0 #000000, 2.5px 2.5px 0 #3d1bad;
}

.contContainerRes{
    margin-top: 40px;
}
/* Researched topics element */



/* ABOUT */
.maincontent2{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
}
/* ABOUT */



/* Phytomeds priorities */
.containerHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.containerHeader i{
    font-size: 2rem;
}
/* Phytomeds priorities */



/* Presentations */
#lastA{
    grid-column: 1/2;
    grid-row: 2/2;
}
#lastB{
    grid-column: 2/3;
    grid-row: 2/2;
}
#lastC{
    grid-column: 1/3;
    grid-row: 3/3;
}
#lastD{
    grid-column: 1/3;
    grid-row: 4/4;
}
#lastE{
    grid-column: 1/3;
    grid-row: 5/5;
}
#opdf:hover{
    text-decoration: underline;
}
#opdf{
    font-weight: 500;
    display: block;
}
.pdfcF{
    background-color: var(--pdf);
    display: flex;
    gap: 8px;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #727272;
}
.files{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: space-between;
    color: var(--textc);
    height: 100%;
    width: 100%;
}
.mainimgbox {
    width: 100%;
    display: block;
    padding-top: 10px;
}

#presentations{
    gap: 1rem;
}
#mainimg {
    border-radius: 8px;
    border: 1px solid #727272;
    display: block;
    object-fit: cover;
    width: 100%;
}
.image-wrapper {
    position: relative; 
}
#ptext{
    text-shadow: 1.25px 1.25px 0 #000000, 2.5px 2.5px 0 #eac3c7;
    top: 90%;
}
.text-overlay-res h2{
    text-align: left;
}
.text-overlay {
    position: absolute;
    top: 50%; /* Centrerar texten vertikalt */
    left: 50%; /* Centrerar texten horisontellt */
    transform: translate(-50%, -50%); /* Justerar för att centrera exakt */
    color: var(--textc);
    font-size: 1.5rem;
    font-weight: bold;
    background-color: var(--main3); /* Halvtransparent bakgrund */
    border: 1px solid #727272;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}
/* Presentations */



/* alla pdf element */
.pdf{
    width: 90%;
    color: var(--textc);
    border-radius: 8px;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.pdfimg{
    width: 3rem;
    background-color: var(--main3);
    padding: 8px;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
#pdf{
    font-size: 1.2rem;
}
.pdfc{
    background-color: var(--pdf);
    display: flex;
    width: 200px;
    gap: 8px;
    border-radius: 0.5rem;
    border: 1px solid #727272;
}
.pdftext, .pdftextF{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 10px;
}
/* alla pdf element */



/* Footer */
#info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--textc);
    position: relative;
    cursor: pointer;
}
.call, .mail, .person{
    display: flex;
    align-items: center;
    gap: 5px;
}
.person{
    gap: 2px;
}
.call i, .mail i, .person i{
    padding-top: 4px;
    font-size: 1rem;
}
.ikoncontact{
    font-size: 1.25rem !important;
}
.info, h4{
    font-size: 1rem;
    color: var(--textc);
}
#callHover, #mailHover, #addressClick{
    transition: all 200ms;
    display: block;
    color: rgb(42, 132, 223);
    text-decoration: underline;
}
#callHover:hover, #mailHover:hover, #addressClick:hover{
    text-decoration: underline;
    color: rgb(42, 132, 223);
}
.addressClick{
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 4px;
}

/* Footer */



/* Contact page */
#form-response{
    background-color: var(--main);
    color: var(--textc);
}
/* notifikation */
.success { 
    position: relative;
    width: 300px;
    background-color: #404040;
    color: #ececec;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 9999;
}
.notifikation{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2rem;
    font-weight: bold;
}
#notfont{
    font-size: 1.75rem;
}
#mesnot {
    font-size: 0.8rem;
    padding: 0 3px;
}
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: rgb(42, 132, 223);
    transform-origin: left;
    transform: scaleX(0); 
    transition: transform 10s linear; 
}

.toast-container {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 99999;
  display: none;
}
/* notifikation */

.contactForm{
    width: 94%;
    color: var(--textc);
}
.contactInputs {
    display: flex;
    flex-direction: column; 
    gap: 15px; 
    width: 100%;
    padding: 2rem;
}
.input-container {
    position: relative;
}
.input-field {
    width: 100%;
    border: 1.5px solid #727272;
    color: var(--textc);
    border-radius: 4px;
    outline: none;
    background: var(--main);
}
/* aktiv i input*/
.input-field:focus {
    border: 1.5px solid rgb(42, 132, 223);
}
/* flytande text input */
.floating-label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.9rem;
    padding-left: 3px;
    color: var(--textc);
    background-color: var(--main);
    transition: all 0.15s ease-in-out;
    pointer-events: none; 
}
/* flytande label aktiv */
.input-field:focus + .floating-label,
.input-field:not(:placeholder-shown) + .floating-label {
    top: -6px;
    left: 10px;
    font-size: 12px;
    padding: 0px 3px 0px 3px;
    color: rgb(42, 132, 223);
}
/* message container */
#message{
    height: 20vh;
    resize: none;
}
/* aktiv input */
.input-field:focus + .floating-label, .input-field:not(:placeholder-shown):focus + .floating-label {
    color: rgb(42, 132, 223);
}
/* färg när användaren skrivit färdigt */
.input-field:valid:not(:focus) + .floating-label,
.input-field:not(:placeholder-shown):not(:focus) + .floating-label {
    color: var(--textc);
}
.infoContact{
    display: none;
}
.contact-button-container{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    height: 40px;
}
/* Contact page */



/* Från olika sidor spec: adaptogens, covid, synergy .html */
.suff{
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.link-item-adap{
    border: 1px solid #727272;
    display: flex;
    padding: 5px;
    align-items: center;
    width: 100%;
    gap: 3px;

    justify-content: space-between;
    border-radius: 5px;
}
.img-box-adap img{
    border-radius: 5px;
    border: 1px solid #727272;
}

.link-item-sp{
    border: 1px solid #727272;
    display: flex;
    padding: 5px;
    align-items: center;
    width: 100%;
    gap: 3px;

    justify-content: space-between;
    border-radius: 5px;
}
.link-item-adap button{
    color:var(--textc);
    border: 1px solid #727272;
}
/* Från olika sidor spec: adaptogens, covid, synergy .html */




@media (min-width: 300px){

    footer, nav, main{
        width: 100%;
    }

    /* nav meny */
    #RT{
        display: flex;
    }
    #RTReal{
        display: none;
    } 
    #fontHam{
        font-size: 2rem;
    }
    #fontDark{
        font-size: 1.65rem;
    }
    .navMenu{
        padding: 0.3rem;
        width: 94%;
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        justify-content: space-between; 
    }
    #homePage{
        width: 50vw;
    }
    .btnCont{
        display: flex;
        align-items: center;
    }
    .imgBox{
        width: 55%;
    }
    #li1, #li2, li{
        border: none;
        border-radius: 0;
    }
    li{
        font-size: 0.85rem;
        font-weight: 500;
        border-bottom: 1px solid #727272;
        border-radius: 3px 3px 0px 0px;
    }
    .unorderedList{
        grid-column: 1/3;
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 0;
        border-radius: 0;
        padding: 5px;
    }
    #theme-switch, .line{
        display: none;
    }
    /* nav meny */



    /* header */
    header{
        position: fixed;
        width: 100%;
        z-index: 10000;
        top: 0%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #headerAb{
        width: 45vw;
    }
    #headerCn{
        width: 30%;
    }
    /* header */



    /* Contactcontainer */
    .contactContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: var(--main);
    
        border-radius: 8px;
        border: 1px solid #727272;
    }
    .contactInputs {
        padding: 0.75rem;
    }
    .reset{
        color: #f34949;
        border: 1px solid #f34949;
    }
    .reset:hover{
        background-color: #f34949;
        border: 1px solid #f34949;
        color: #ececec;
    }
    .input-field {
        padding: 10px;
        font-size: 0.9rem;
    }
    /* Contactcontainer */



    /* footer */
    footer{
        padding-top: 40px;
    }
    .footer{
        display: grid;
        flex-direction: column;
        
        background-color: var(--main);
        width: 94%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 3%;
        border: 1px solid #727272;
        border-bottom: none;
        row-gap: 1rem;
        color: var(--textc);
    }
    .headerText{
        display: flex;
        align-items: center;
    }
    #contactHeader{
        gap: 5px;
    }
    .copyright{
        text-align: center;
        font-size: 0.7rem;
    }
    /* footer */



    /* Header med bild */
    .img1{
        mask-image: linear-gradient(
            rgb(0, 0, 0) 0%,
            rgb(0 0 0 / 0.7) 60%,
            rgb(0 0 0 / 0.3) 70%,
            rgb(0 0 0 / 0) 100%
        );
        -webkit-mask-image: linear-gradient(
            rgb(0, 0, 0) 0%,
            rgb(0 0 0 / 0.7) 30%,
            rgb(0 0 0 / 0.3) 60%,
            rgb(0 0 0 / 0) 100%
        );
        height: 100%;
        object-fit: cover;
    }
    .imgBox1{
        width: 100%;
    }
    .btnContainer{
        padding-bottom: 0.5rem
    }
    /* Header med bild */



    /* phytomed priorities */
    .containerText{
        font-size: 0.8rem;
        padding: 1%;  
    }
    .contContainerAb{
        display: flex;
        flex-direction: column ;
        gap: 0.8rem;    
        align-items: center;
        justify-items: center;
        background-color: var(--main);
        width: 94%;
        border: 1.5px solid #727272;
        margin-top: 130px;
        padding: 2rem 2rem;
        border-radius: 8px;
    }
    .contContainerAb #pcont{  
        color: var(--textc);
        font-size: 1rem;
        font-weight: 500;
    }
    /* phytomed priorities */



    /* Header Phytomed specializing */
    .contContainerHeader{
        display: grid;
        background-color: var(--main);
        width: 94%;
        border: 1.5px solid #727272;
        box-sizing: border-box;
        padding: 3%;
        border-radius: 8px;
    }
    .mainContainer{
        background-color: var(--background);
        padding: 2%;
        color: var(--textc);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom: 0.15rem solid #bbbbbb;
        width: 90%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.19);
    }

    /* Header Phytomed specializing */



    /* Researched Topics */
    .img-box-adap{
        width: 100%;
    }
    .containerAdaptogens{
        margin-top: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        color: var(--textc);
        place-items: center;
        background-color: var(--main);
        width: 94%;
        padding: 2rem;
        border: 1.5px solid #727272;
        border-radius: 8px;
    }
    .containerSynergy{
        margin-top: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        color: var(--textc);
        place-items: center;
        background-color: var(--main);
        width: 94%;
        padding: 1.3rem;
        border: 1.5px solid #727272;
        border-radius: 8px;
    }
    /* Researched Topics */




    /* researched topics med imgs */
    .adapImg button p {
        transform: translateX(0%);
        transition: all 300ms ;
    }
    .adapImg button .ikon {
        transform: translateX(0px); /* Startposition för ikonen */
    }
    .adapImg button:hover .ikon {
        opacity: 1; /* Gör ikonen synlig vid hover */
        transform: translateX(0); /* Glider in till sin slutposition */
    }
    .adapImg button:hover p{
        transform: translateX(0px);
    }
    .adapImg button{
        padding: 5px 3px;
    }
    .contContainerRes{
        display: grid;
        grid-template-rows: 7vh 1fr 1fr 1fr 2vh;
        gap: 2rem;
        place-items: center;
        background-color: var(--main);
        width: 94%;
        border: 1.5px solid #727272;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        margin-top: 130px;
        border-radius: 8px;
    }
    .contContainerRes #pcontx{  
        color: var(--textc);
        font-weight: 500;
    }
    .adapImg{
        width: 90%;
        display: block;   
    }
    /* researched topics med imgs */



    /* ABOUT */
    .contContainerAbout{
        display: flex;
        flex-direction: column;
        color: var(--textc);
        gap: 2rem;
        place-items: center;
        background-color: var(--main);
        padding: 2rem;
        border: 1.5px solid #727272;
        border-radius: 8px;
        margin-top: 130px;
        width: 94%;
    }
    .imgboxAB{
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
        width: 100%;
        background-color: var(--main3);
        padding: 1rem;
        border: 1px solid #727272;
        border-radius: 8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
    }
    .link-container, .timeline-container{
        gap: 1rem;
    }
    .imgboxAB img{
        border-radius: 3px;
    }
    .imghistory{
        display: grid;
        gap: 1rem;
    }
    .table{
        display: flex;
        width: 100%;
        background-color: var(--main3);
        padding: 1rem;
        justify-content: space-between;
    }
    .maincontentAB{
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }
    .text-container{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }
    /*ABOUT  */
    
    

    /* Selected Publications */
    .imgbox{
        width: 90%;
        overflow: hidden;
        object-fit: cover;
        display: block;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
        border-radius: 0.5rem;
    }
    .imgbox img{
        aspect-ratio: 1/0.9;
        object-fit: cover;
        display: block;
        width: 100%;
    }
    .contContainerSP{
        display: grid;
        color: var(--textc);
        flex-direction: column;
        gap: 1rem;
        place-items: center;
        background-color: var(--main);
        width: 94%;
        padding: 3%;
        border: 1.5px solid #727272;
        border-radius: 8px;
    }
    .contContainerPP{
        display: grid;
        color: var(--textc);
        gap: 1rem;
        place-items: center;
        background-color: var(--main);
        width: 94%;
        padding: 3%;
        border: 1.5px solid #727272;
        border-radius: 8px;
    }
    .mainimgbox {
        padding:0;
    }
    #pres{
        border-bottom: 2px solid transparent;
    }
    #LU{
        text-align: center;
    }
    /* Selected Publications */

    .construction h1{
        font-size: 1rem;
    }

    /* PDF element */
    #opdf{
        font-size: 0.8rem;
    }
    #pdf{
        font-size: 1rem;
    }
    .pdfimg{
        width: 2.7rem;
    }
    .pdftextF{
        align-items: center;
    }
    #ptext{
        font-size: 1.2rem;
    }
    /* PDF element */

}

@media (min-width: 320px) {
    #ptext{
        font-size: 1.25rem;
    }
    #aboutbtn, #contactbtn{
        padding: 6px 10px;
    }
}

@media (min-width: 375px) {
    #ptext{
        font-size: 1.55rem;
    }

    .adapImg button{
        padding: 7px 11px;
    }

    #aboutbtn, #contactbtn{
        padding: 7px 11px;
    }

}


@media (min-width: 480px) {
    .contContainerHeader, .contactForm, .contContainerSP, .contContainerPP, .contContainerAbout, .containerAdaptogens, .contContainerAb, .containerSynergy, .footer{
        width: 85%;
    }
    .navMenu{
        width: 85%;
        grid-gap: 1rem;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        justify-content: space-between; 
    }
    .contContainerRes{
        grid-template-rows: 7vh 1fr 1fr 1fr 2vh;
        width: 85%;
    }

    #aboutbtn, #contactbtn{
        padding: 8px 13px;
    }

    .text-overlay-res{
        font-size: 1.9rem;
        padding-left: 2px;
    }

    #ptext{
        padding-left: 8px;
        font-size: 1.8rem;
    }

    #homePage{
        width: 38vw;
    }

    .pdfimg{
        width: 3rem;
    }


    #opdf{
        font-size: 0.875rem;
    }

    #pdf{
        font-size: 1.2rem;
    }

    .btnContainer{
        padding-left: 8%;
        color: var(--main);
    }

    #headerAb{
        width: 35vw;
    }
    
    #headerCn{
        width: 25%;
    }

    .containerText{
        font-size: 0.9rem;
        padding: 1%;  
    }

    .containerHeader{
        font-size: 1.2rem;
    }

    .adapImg h2 {
        font-size: 2rem;
    }

    .contContainerAb #pcont, .contContainerRes #pcontx{  
        font-size: 1.5rem;
    }

    .img1{
        height: 45vh;
        object-fit: cover;
    }
    
    li{
        font-size: 0.925rem;
    }

    .construction h1{
        font-size: 1.2rem;
    }
}

@media (min-width: 600px){
    .imgboxAB{
        width: 80%;
    }

    header{
        height: 130px;
    }
}

@media (min-width: 768px){

    .navMenu, .contactForm, .contContainerSP, .contContainerPP, .contContainerAbout, .contContainerHeader, .contContainerAb, .containerAdaptogens, .containerSynergy{
        width: 76%;
    }
    .footer{
        width: 76%;

        display: grid;
        grid-template-columns: 1fr 1fr;
        
        background-color: var(--main);
        row-gap: 1rem;
        padding-bottom: 10px;
    }
    .contContainerRes{
        grid-template-rows: 7vh 1fr 1fr 1fr 2vh;
        width: 76%;
    }

    #flop{
        font-size: 1.5rem;
    }

    .adapImg button {
        font-size: 0.9rem;
        padding: 0.7rem 0.85rem;
    }

    #homePage{
        width: 30vw;
    }

    #aboutbtn, #contactbtn{
        padding: 0.7rem 1.275rem;
    }

    .contContainerPP .imgbox{
        width: 70%;
    }




    .imgboxAB{
        width: 70%;
    }

    .contContainerSP{
        padding-bottom: 20px;
    }

    .btnContainer{
        padding-left: 12%;
    }

    #headerAb{
        width: 25vw;
    }
    
    #headerCn{
        width: 17%;
    }

    .contContainerAbout{
        padding: 2rem;
    }

    .containerText{
        font-size: 0.9rem;
        padding: 1%;
    }

    .text-overlay-res, #ptext {
        font-size: 3rem;
        padding-left: 10px;
    }

    .containerHeader{
        font-size: 1.2rem;
    }

    .adapImg h2 {
        font-size: 2rem;
    }

    .contContainer #pcont{  
        font-size: 1.5rem;
    }

    .img1{
        height: 35vh;
        object-fit: cover;
    }
    .copyright{
        grid-row: 2/2;
        grid-column: 1/4 ;
    }

    li{
        font-size: 1rem;
    } 
}

@media (min-width:1024px){

    .contContainerAb, .contContainerRes, .navMenu, .footer, .contactForm, .contContainerPP, .contContainerAbout, .containerAdaptogens, .containerSynergy{
        width: 94%;
    }
    .contactContainer {
        display: grid;
        grid-template-columns: 1.5fr 4fr;
        justify-content: center;
        align-items: center;
        width: 100%; 
        background-color: var(--main);
        border-radius: 8px;
        border: 1px solid #727272;
    }
    .contContainerRes{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 7vh 1fr;
        gap: 0.8rem;
        padding-bottom: 2rem ;
    }
    .contContainerAb{
        display: flex;
        flex-direction: row;
        gap: 0.8rem;
        margin: 0;
    }

    .contContainerPP .imgbox{
        width: 35%;
    }

    .adapImg button {
        font-size: 0.85rem;
        padding: 0.5rem 0.5rem;
    }

    #pres:hover{
        border-bottom: 2px solid rgb(42, 132, 223);
    }

    .imgBox {
        width: 25%; 
    }
    
    
    #homePage {
        width: 100%; 
    }
    

    .mainContainer h3{
        font-size: 1.2rem;
    }

    .imgboxAB{
        width: 100%;
    }

    .text-container{
        font-size: 0.875rem;
        gap: 0.3rem;
    }

    footer{
        padding-top: 40px;
    }
    .contactInputs {
        padding: 1.5rem;
    }
    .files{
        padding: 0;
    
    }

    .text-overlay-res, #ptext {
        font-size: 1.75rem; 
    }

    .dropdowndiv{
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    #LU{
        text-align: left;
    }

    .headerRes #info{
        display: none;
    }

    .adapImg{
        grid-row: 2/2;
    }

    #extratext{
        display: block;
    }

    .pcont{  
        font-size: 1.5rem;
        color: var(--textc);
        font-weight: 500;
    }

    .contContainerAb #pcont, .contContainerRes #pcont, .pcont{  
        font-size: 1.06rem;
    }

    .contContainerRes #pcontx, .pcontx{  
        font-size: 1.75rem;
        font-weight: bold;
        color: var(--textc);    
    }

    
    .contContainerRes {  
        margin: 0;
    }

    #cov{
        font-size: 1rem;
    }

    .containerSynergy{
        padding: 2rem 5rem;
    }

    .headingText{
        grid-row: 1/1;
        grid-column: 1/4;
    }

    .headingText #info{
        display: none;
    }

    #mc1{
        grid-row: 2/2;
    }
    
    #mc2{
        grid-row: 3/3;
    }
    
    #mc3{
        grid-row: 4/4;
    }


    .headerRes{
        grid-row: 1/1;
        grid-column: 1/1;
    }

    #researched-text{
        grid-row: 1/1;
        grid-column: 1/4;
        font-size: 2rem;
    }
    
    .maincontentAB{
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    header{
        position:static;
    }

    #theme-switch, .line{
        display: block;
    }

    .footer{
        padding: 1%;
        padding-bottom: 10px;
    }

    .section-head{
        display: flex;
        padding: 0% 3% 0% 3%;
        align-items: center;
    }

    .img1 {
        mask-image: radial-gradient(
                circle, 
                rgba(0, 0, 0, 1) 70%, 
                rgba(0, 0, 0, 0.5) 85%, 
                rgba(0, 0, 0, 0) 100%
            ),
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.5) 50%,
                rgba(0, 0, 0, 0) 100%
            );
        -webkit-mask-image: radial-gradient(
                circle, 
                rgba(0, 0, 0, 1) 40%, 
                rgba(0, 0, 0, 0.5) 85%, 
                rgba(0, 0, 0, 0) 100%
            ),
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.5) 60%,
                rgba(0, 0, 0, 0) 100%
            );
        mask-composite: intersect;
        -webkit-mask-composite: destination-in;
        height: 100%;
        object-fit: cover;
        border-radius: 1rem;
    }
    .imgBox1 {
        position: relative; 
    }
    
    .btnContainer {
        position: absolute; 
        bottom: 10px; 
        left: 10px; 
        z-index: 2; 
    }
    
    .btnContainer{
        padding: 0;
        width: 100%;
    }

    #headerAb{
        width: 20vw;
    }
    
    #headerCn{
        width: 20%;
    }

    .navMenu{
        background-color: var(--main);
        padding: 0.5rem;
        grid-gap: 0;
        border-radius: 8px;
        display: flex;
        align-items: center; 
        position: static;
        top: 1%;
        border: 1.5px solid #727272;
        z-index: 1000; 
    }

    .contContainerHeader{
        margin: 0;
    } 
    
    #UL {
        display: flex;
        width: 100%;
    }
    
    #UL.show {
        display: none;
    }
    
    #fontIcon{
        display: none;
    }

    .contContainerPP{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        
    }
    
    #close {
        display: none; 
        font-size: 2rem;
    }
    
    .unorderedList{
        display: flex;
        flex-direction: row;
        width: 100%;
        border: 0;
        border-radius: 0;
        padding: 5px;
    
    }

    ul {
        position: relative;
        cursor: pointer;

        color: var(--textc);
        display: flex;  
        align-items: center; 
    }
    

    #li1{
        border-radius: 0;
    }
    
    li, .dropdowndiv{

        font-size: 0.78rem;
        padding: 15px 10px;
        font-weight: 500;
        border-left: none;
        opacity: 0.5;
        border-bottom: 2px solid transparent;
        transition: all 200ms;
    } 

    #Li2{
        border-bottom: 2px solid transparent;
    }

    li:hover, #Li2:hover, .dropdowndiv:hover{
        border-bottom: 2px solid rgb(42, 132, 223);
        opacity: 1;
        background-color: var(--background);
        color: rgb(42, 132, 223);
    }

    #RT{
        display: none;
    }

    #RTReal{
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .btnCont{
        display: none;
    }

    .infoContact{
        display: grid;
        justify-content: center;
        align-items: center;
        
        background-color: var(--main);
        width: 94%;
        padding: 0% 0% 0% 10%;
        row-gap: 2rem;
        color: var(--textc);
    }

    .contContainerSP{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 7vh 1fr 7vh;
        color: var(--textc);
        flex-direction: column;
        gap: 1rem;
        place-items: center;
        background-color: var(--main);
        width: 94%;
        padding: 0% 3% 2% 3%;
        border: 1.5px solid #727272;
        border-radius: 8px;
    }

    #imgbox1{
        grid-row: 2/2;
    }

    #imgbox2{
        grid-row: 2/2;
    }

    #SPh1{
        grid-column: 1/3;
    }

    .pdf{
        grid-column: 1/3;
    }

    .pdf{
        flex-direction: row;
        padding: 0;
    }

    .imgbox{
        width: 85%;
    }

    .maincontent2{
        flex-direction: row;
        gap: 1rem;
    }

    
}


@media (min-width: 1200px){

    .imgBox {
        width: 25%; /* Gör så att imgBox tar upp hela bredden på sin förälder */
    }

    .adapImg button{
        padding: 7px 11px;
        font-size: 0.865rem;
    }


    #callHover, #mailHover, #addressClick{
        color: var(--textc);
        text-decoration: none;
    }

    .imgboxAB{
        width: 95%;
    }
    
    .contContainerAb, .contContainerRes, .navMenu, .footer, .contactForm, .contContainerSP, .contContainerPP, .contContainerAbout, .containerAdaptogens, .containerSynergy{
        width: 82%;
    }

    .contContainerPP .imgbox{
        width: 30%;
    }

    .section-head{
        padding: 0% 9% 0% 9%;
        align-items: center;
    }

    #headerAb{
        width: 13vw;
    }
    
    #headerCn{
        width: 18%;
    }

    .contContainerHeader{
        padding: 1.2%;
        margin: 0;
    } 

    .adapImg button p {
        transform: translateX(15%);
        transition: all 300ms ;
    }
    
    .adapImg button .ikon {
        opacity: 0; 
        transform: translateX(-20px); 
        transition: transform 300ms ease, opacity 300ms ease;
    }
    
    .adapImg button:hover .ikon {
        opacity: 1; 
        transform: translateX(0);
    }
    
    .adapImg button:hover p{
        transform: translateX(3px);
    }

    #containersynergy, #containeradaptogens{
        font-size: 18.5px;
    }
}



@media (min-width: 1440px){

    .imgBox {
        width: 20%; /* Gör så att imgBox tar upp hela bredden på sin förälder */
    }

    .contContainerPP .imgbox{
        width: 30%;
    }

    .adapImg button{
        padding: 7px 10px;
        font-size: 0.875rem;
    }

    .contContainerAb #pcont, .contContainerRes #pcont, .pcont{  
        font-size: 1.1rem;
    }

    .section-head{
        padding: 0% 16% 0% 16%;
    }

    .contContainerAb, .contContainerRes, .navMenu, .footer, .contactForm, .contContainerSP, .contContainerPP, .contContainerAbout, .containerAdaptogens, .containerSynergy{
        width: 68%;
    }


    .construction h1{
        font-size: 2rem;
    }

    #headerAb{
        width: 13vw;
    }
    
    #headerCn{
        width: 20%;
    }

    .mainContainer h3{
        font-size: 1.3rem;
    }

    .mainContainer p{
        font-size: 1rem;
    }

    li, #li1, .dropdowndiv{
        font-size: 0.85rem;
        font-weight: 500;
    }

    #opdf{
        font-size: 1rem;
    }
    .text-overlay-res, #ptext {
        font-size: 2rem; 
    }
}


@media (min-width: 1600px){
    li, #li1, .dropdowndiv{
        font-size: 0.94rem;
        font-weight: 500;
    }

    .text-container{
        font-size: 1rem;
        gap: 0.6rem;
    }
}

#learnMore{
    width: 100%;
}



.construction{
    background-color: #272727;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    z-index: 9999999999999999999999999999999;
    left: 0;
    top: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.construction h1{
    z-index: 100;
    color: rgb(160, 144, 0);
}
.construction h1 p{
    font-size: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    color: #ececec;
}
.construction i{
    font-size: 15rem;
    z-index: 1;

    color: rgb(160, 144, 0);
}


.contactInputs{
    position: relative;
}


@media (min-width: 1750px){


    main, footer, header{
        width: 1750px;
    }
}
  
@keyframes ripple{
    to{
      transform: scale(2.5);
      opacity: 0;
    }
}

section{
    width: 100%;
}

.desc{
    background-color: var(--main3);
    color: var(--textc);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1rem;
}


.desc #pdesc{
    width: 100%;
    min-height: 2rem;
    max-height: 2rem;
}
.descont{
    display: flex;
    justify-content: end;
    padding-top: 1rem;
}

.imgboxabout{
    width: 100%;
    object-fit: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
.imgboxabout img{
    width: 100%;
    aspect-ratio: 16/6.5;
    object-fit: cover;
}