/* Theme Name: IQRA Theme
Theme URI: https://mssoftpc.com
Version: 1.3 */

*{
    scroll-behavior: smooth;
}

.lottie-animation-container {
    background-color: var(--lottie-animation-container-background-color);
    height: var(--lottie-animation-container-height);
    margin: 0 auto;
    overflow: hidden;
    width: var(--lottie-animation-container-width)
}

.page-enter-active,
.page-leave-active {
    transition: opacity .3s
}

.page-enter-from,
.page-leave-to {
    opacity: 0
}

.layout-enter-active,
.layout-leave-active {
    transition: opacity .3s
}

.layout-enter,
.layout-leave-active {
    opacity: 0
}

:root {
    --color-1: #fff;
    --color-2: #000;
    --color-3: #a4dbe8;
    --color-4: #bde9c9;
    --color-5: #decde7;
    --color-6: #f8e08e;
    --color-7: #f4f4f4;
    --color-8: #595959;
    --color-9: #dadada;
    --color-10: #268095;
    --color-11: #e8f6f9;
    --header-height: 8rem;
    --color-background: var(--color-1);
    --color-text: var(--color-2);
    --color-btn-background: var(--color-2);
    --color-btn-text: var(--color-1);
    --space: 4rem;
    --fluid: 62.5%;
    --pattern-1: url(/_nuxt/cta-pattern-1.17f55d70.svg);
    --pattern-2: url(/_nuxt/cta-pattern-2.e38bb168.svg);
    --pattern: var(--pattern-1);
    --transition: cubic-bezier(1, 0, 0, 1);
    --transition-2: cubic-bezier(.215, .61, .355, 1);
    --grid-max: 100vw;
    --grid-gap: 2rem;
    --grid-rgap: 2rem;
    --grid-ext: 1.5rem;
    --font: "IBMPlexSans", "Arial";
    --prestafont: "Prestafont", "Arial"
}

@media (min-width:576px) {
    :root {
        --space: 6rem;
        --header-height: 8.5rem;
        --grid-rgap: 2.5rem
    }
}

@media (min-width:768px) {
    :root {
        --space: 8rem;
        --grid-ext: 3rem
    }
}

@media (min-width:1025px) {
    :root {
        --space: 9rem;
        --grid-max: 160rem;
        --grid-gap: 3rem;
        --grid-rgap: 4.5rem;
        --grid-ext: 6rem
    }
}

@media (min-width:1200px) {
    :root {
        --space: 10rem;
        --grid-ext: 8rem
    }
}

@media (min-width:1600px) {
    :root {
        --fluid: 0.6vw;
        --grid-ext: 10.5rem
    }
}

.quick-access {
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .3);
    display: none;
    left: 0;
    padding: 2rem var(--grid-ext);
    position: fixed;
    top: 0;
    transform: translateY(-100%);
    width: 100%;
    z-index: 1000000
}

.quick-access:focus-within {
    display: block;
    transform: translate(0)
}

.quick-access ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

@media (min-width:768px) {
    .quick-access ul {
        flex-direction: row
    }
}

.quick-access ul li {
    margin: .5rem 3rem .5rem 0
}


/*documentation*/
.documentation li{
    margin-left: 30px;
    list-style: octal !important;
}
.documentation li ul{
    margin-left: 50px;
}

/*code style*/

pre{
background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
    
}