html{
    font-size: 100%;
}
html, 
body{scroll-behavior: smooth;}

:root{
    --spacing-padding-inline: 0.25rem; /*  min-width:640px ( 40rem )*/
    --color-primary:;
    --color-secondary:;
    --color-text:;
    --color-link-color:;
    --color-background-color:;
    --color-background-color-gradiant:;
    
}

    /* Padding works only for main section  */
.main-section-padding .e-con-inner, .e-flex.e-con-boxed.e-con.e-parent .e-con-inner{
    padding-inline: calc(var(--spacing-padding-inline) * 0);
}

@media screen and (width <= 100rem) {
 .main-section-padding .e-con-inner, .e-flex.e-con-boxed.e-con.e-parent .e-con-inner{
        padding-inline: calc(var(--spacing-padding-inline) * 10);
    }
}
@media screen and (width <= 40rem) {
 .main-section-padding .e-con-inner, .e-flex.e-con-boxed.e-con.e-parent .e-con-inner{
    padding-inline: calc(var(--spacing-padding-inline) * 6);
    }
}