@import url('https://use.typekit.net/oxx1uci.css');

/* start blog css for https://blog.storagely.io/ -- 03 sep 2025 */

  :root {

    /* color variables */
    --st-primary: #0C445F;
    --st-secondary: #F05323;
    --st-tertiary: #F68D58;
    --st-neutral: #595D61;
    --st-light: #FFFFFF;
    --st-dark: #1A2228;
    --heading-color: var(--st-primary); /* alternative color for headings, this can be a variable or a custom hex code */
    --body-font-color: var(--st-neutral);
    --body-line-height: 1.6; /* should match brizy */
    --icon-color: var(--st-secondary);
    --footer-color: #0C445F; /* alternative color for footer, this can be a variable or a custom hex code */

    /* define your imported fonts as variables with fallbacks */
    --ff-heading: 'neulis-sans', sans-serif;
    --ff-body: 'neulis-sans', sans-serif;

    /* button variables */
    --btn-padding: 10px 20px;
    --btn-font-size: 1rem;
    --btn-font-weight: 700;
    --btn-letter-spacing: 0rem;
    --btn-text-transform: capitalize;
    --btn-font-family: 'neulis-sans', sans-serif;

    /* primary button */
    --btn-secondary-bg-color: var(--st-secondary);
    --btn-secondary-font-color: var(--st-light);
    --btn-secondary-border-color: var(--st-secondary);
    /* primary button hover */
    --btn-secondary-hover-bg-color: var(--st-tertiary);
    --btn-secondary-hover-font-color: var(--st-light);
    --btn-secondary-hover-border-color: var(--st-tertiary);

    /* secondary button */
    --btn-primary-bg-color: var(--st-tertiary);
    --btn-primary-font-color: var(--st-light);
    --btn-primary-border-color: var(--st-tertiary);
    /* secondary button hover */
    --btn-primary-hover-bg-color: var(--st-secondary);
    --btn-primary-hover-font-color: var(--st-light);
    --btn-primary-hover-border-color: var(--st-secondary);

    /* other variables */
    --st-radius: 30px;

    /* nav font variables */
    --nav-font-family: 'Lato', sans-serif;


    /* logo variables */

    --logo-height: auto;
    --logo-width: 10rem;

    /* 1rem = 16px (multiples of 16)
        example: 
            2rem = ~32px
            0.625 = ~10px

        use this calculator for px to rem conversions if you need help:
        https://nekocalc.com/px-to-rem-converter
    */

    /* font variables */

    /* define the min(mobile) heading size and the max(desktop) heading size based on mockup */
    --h1-max-size: 3.4em;
    --h1-min-size: 2.625rem;

    --h1-font-weight: 700;

    --h2-max-size: 2.813rem;
    --h2-min-size: 2.5rem;

    --h2-font-weight: 700;

    --h3-max-size: 2.25rem;
    --h3-min-size: 2rem;

    --h3-font-weight: 700;

    --h4-max-size: 1.875rem;
    --h4-min-size: 1.625rem;

    --h4-font-weight: 500;

    --h5-max-size: 1.438rem;
    --h5-min-size: 1.25rem;

    --h5-font-weight: 500;

    --h6-max-size: 1.125rem;
    --h6-min-size: 1rem;

    --h6-font-weight: 700;

    --fs-p: 1.125rem;
    --fs-md: 0.813rem;
    --fs-sm: 0.5rem; /* typically used in "width" and "depth" */

    --body-font-weight: 400;

    /* can stop editing here unless making element specific adjustments*/

    /* clamp variables */
    --fs-h1: clamp(var(--h1-min-size), 2vw + 2.35rem, var(--h1-max-size));
    --fs-h2: clamp(var(--h2-min-size), 2vw + 2.35rem, var(--h2-max-size));
    --fs-h3: clamp(var(--h3-min-size), 2vw + 2.35rem, var(--h3-max-size));
    --fs-h4: clamp(var(--h4-min-size), 2vw + 2.35rem, var(--h4-max-size));
    --fs-h5: clamp(var(--h5-min-size), 2vw + 2.35rem, var(--h5-max-size));
    --fs-h6: clamp(var(--h6-min-size), 2vw + 2.35rem, var(--h6-max-size));

}

.brand--theme__wrapper {
background-color:#fff !important;
}


body,p,ul,ol,li{
    font-size: var(--fs-p) !important;
    color: var(--body-font-color) !important;
    font-family: var(--ff-body) !important;
    line-height: var(--body-line-height) !important;
    font-weight: var(--body-font-weight) !important;
}

h1{
    font-size: var(--fs-h2) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
    font-weight: var(--h1-font-weight) !important;
}
h2{
    font-size: var(--fs-h3) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
    font-weight: var(--h2-font-weight) !important;

}
h3, h3 a {
    font-size: var(--fs-h4) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
    font-weight: var(--h3-font-weight) !important;

}
h4{
    font-size: var(--fs-h5) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    text-transform: capitalize;
    font-weight: var(--h4-font-weight) !important;

}
h5{
    font-size: var(--fs-h6) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    font-weight: var(--h5-font-weight) !important;
    text-transform: capitalize;
    letter-spacing: 0.019rem !important;

}
h6{
    font-size: var(--fs-h6) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-body) !important;
    line-height: 1.5 !important;
    font-weight: var(--h6-font-weight) !important;

}
i{
    font-size: var(--btn-font-size) !important;
    color: var(--icon-color) !important;
}
li {
    margin-bottom: 10px;
}
/* overwrite body bg color */

.rentContent{
    background-color: #ffffff !important;
}

.location_about_left_col h1 {
    font-size: var(--fs-h3) !important;
    font-weight: var(--h3-font-weight) !important;
    text-align: left;
}

.step2Sec1{
    background-color: #ffffff !important;
}



/* MMI css */
.footer-logo img {
	height: 45px;
	width: auto;
}
.elementor-button {
    border-radius: 30px !important;
    background: #F05323 !important;
    font-size: var( --btn-font-size ) !important;
    font-weight: var( --btn-font-weight ) !important;
    font-family: var( --btn-font-family ) !important;
    padding: var(--btn-padding) !important;
    text-decoration: none !important;
}
.elementor-button:hover {
    background: #F68D58 !important;
}
a.elementor-post__read-more {
    color: #F05323 !important;
    font-weight: var( --btn-font-weight ) !important;
    font-weight: var( --btn-font-weight ) !important;
}
.elementor-post__badge {
    background: #F05323 !important;
    font-family: var( --btn-font-family ) !important;
}

/* //END blog css for https://blog.storagely.io/ -- 03 sep 2025 */