/* create variables in format starnex-blocks-font-size */

:root {
    font-size: 16px;
    --starnex-blocks-font-size: 1rem;
    --starnex-blocks-main-heading-fs: 5rem;
    --starnex-blocks-main-description-fs: 1.5rem;
    --starnex-blocks-h1-fs: 2.5rem;
    --starnex-blocks-h2-fs: 2rem;
    --starnex-blocks-h3-fs: 1.75rem;
    --starnex-blocks-h4-fs: 1.5rem;
    --starnex-blocks-section-padding: 104px;
    --starnex-blocks-heading-letter-spacing: 0px;
    --starnex-blocks-header-font-family: 'Poppins', sans-serif;
    --starnex-blocks-body-font-family: 'Poppins', sans-serif;
    --bottom-margin: 30px;
    --footer-title-font-size: 14px;
    --footer-title-font-weight: 700;
    --footer-title-margin-bottom: 18px;
    --footer-text-font-size: 12px;
    --footer-text-font-weight: 400;
    --footer-text-margin-bottom: 12px;

    --space-1: 10px;
    --space-2: 30px; 
    --space-3: 60px;
    --space-4: 100px;  
    --color-1: #013233;
    --color-2: #43C6AC;
    --color-3: #1B1212;
    --color-4: #E7E7E7;
    --color-4: #F6FCED;
    --color-5: #F4F4F4;
    --color-6: #353935;
    --color-7: #dc3232;
    --color-8: #F2F2F2;
    --button-height-1:45px;
    --font-size-0: 48px;
    --font-size-1: 36px;
    --font-size-2: 28px;
    --font-size-3: 22px;
    --font-size-4: 18px;
    --font-size-5: 16px;
    --font-weight-1: 400;
    --font-weight-2: 700;
}

@media screen and (max-width: 800px) {
    :root {
        --starnex-blocks-body-fs: 12px;
        --starnex-blocks-h4-fs: 16px;
        --starnex-blocks-max-width: 1200px; 
    }
}
/* for mobile under 1021 */
@media (max-width: 1020px) {
    :root {
        font-size: 12px;
        --starnex-blocks-section-padding: 40px;
        --starnex-blocks-max-width: 80%;
    }
}

@media (max-width: 768px){
    :root {
        --space-1: 10px;
        --space-2: 30px; 
        --space-3: 60px;
        --space-4: 60px;  
        /* --font-size-1: 28px;
        --font-size-2: 24px;
        --font-size-3: 18px;
        --font-size-4: 18px; */
        --font-weight-1: 400;
        --font-weight-2: 700; 

        --font-size-0: 24px;
        --font-size-1: 24px;
        --font-size-2: 18px;
        --font-size-3: 16px;
        --font-size-4: 14px;

        --button-height-1:35px;
    }
}

#wp--skip-link--target{
    margin: 0px;
    margin-top: var(--space-3);
}

.entry-content{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.wp-site-blocks .wp-block-group.has-base-background-color.is-position-sticky{
    box-shadow: 0px 4px 12px -5px rgba(0, 0, 0, 0.12);
    margin-top: 0px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


/* Footer margins */
.wp-block-create-block-starnex-footer-block{
    max-width: 100%;
    margin: 0px var(--space-2);
    margin-top: calc(var(--space-2) - var(--space-3));
}

.wp-site-blocks{
    padding-bottom: 0px;
    padding-top: 0px;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover{
    text-decoration: none;
    color: var(--color-1) !important;
}

@media (max-width: 900px) {
    .wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex{
        display: none;
    }

    .wp-block-navigation__container.is-responsive.wp-block-navigation{
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .entry-content{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }


    .wp-site-blocks .wp-block-group.has-base-background-color.is-position-sticky{
        /* margin-bottom: var(--space-3) !important; */
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .wp-site-blocks .wp-block-group.has-base-background-color.is-position-sticky .custom-logo{
        width: 100px;
    }
    
    .wp-block-navigation__responsive-container-content ul li:last-of-type{
        display: block;
    }

    /* Footer margins */
    .wp-block-create-block-starnex-footer-block{
        margin: 0px var(--space-1);
        margin-top: calc(var(--space-1) - var(--space-3));
    }
}