/* ===== BB TEXT ===== */
@font-face {
	font-family: "BB Text";
	src: url("fonts/BB-Text/bb-text_regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "BB Text";
	src: url("fonts/BB-Text/bb-text_semibold.woff2") format("woff2");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

/* ===== BB DISPLAY ===== */
@font-face {
	font-family: "BB Display";
	src: url("fonts/BB-Display/bb-display_light.woff2") format("woff2");
	font-style: normal;
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "BB Display";
	src: url("fonts/BB-Display/bb-display_regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "BB Display";
	src: url("fonts/BB-Display/bb-display_medium.woff2") format("woff2");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "BB Display";
	src: url("fonts/BB-Display/bb-display_semibold.woff2") format("woff2");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "BB Display";
	src: url("fonts/BB-Display/bb-display_bold.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

/* ===== BB ICONS ===== */
@font-face {
	font-family: "BB Icons";
	src: url("fonts/BB-Icons/bb-icons_regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: "BB Icons";
	src: url("fonts/BB-Icons/bb-icons_semibold.woff2") format("woff2");
	font-style: normal;
	font-weight: 600;
	font-display: block;
}

/* ===== SOCIAL ICON ===== */
@font-face {
	font-family: "Social Icon";
	src: url("fonts/Social-Icon/social-media-font.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

/* ===== BB MONO ===== */
@font-face {
	font-family: "BB Mono";
	src: url("fonts/BB-Mono/bb-mono_regular.woff") format("woff");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "BB Mono";
	src: url("fonts/BB-Mono/bb-mono_semibold.woff2") format("woff2");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

/* ===== KOHINOOR BANGLA ===== */
@font-face {
	font-family: "Kohinoor Bangla";
	src: url("fonts/Kohinoor-Bangla/kohinoor-bangla_light.woff2") format("woff2");
	font-style: normal;
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "Kohinoor Bangla";
	src: url("fonts/Kohinoor-Bangla/kohinoor-bangla_regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Kohinoor Bangla";
	src: url("fonts/Kohinoor-Bangla/kohinoor-bangla_medium.woff2") format("woff2");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Kohinoor Bangla";
	src: url("fonts/Kohinoor-Bangla/kohinoor-bangla_semibold.woff2") format("woff2");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Kohinoor Bangla";
	src: url("fonts/Kohinoor-Bangla/kohinoor-bangla_bold.woff2") format("woff2");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}








html[lang="bn"] body,
html[lang="bn"] body * {
    font-family: "Kohinoor Bangla", sans-serif;
}








/* Global typography variables and responsive utility classes */
:root {
    /* Font families */
    --font-text: "BB Text";
    --font-display: "BB Display";

    /* Font weights */
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* 12 */
    --f12-size: 12px;
    --f12-spacing: -0.01em;
    --f12-height: 1.3333334;

    /* 14 */
    --f14-size: 14px;
    --f14-spacing: -0.016em;
    --f14-height: 1.42857144;

    /* 17 - button, subtitle and others */
    --f17-size: 17px;
    --f17-spacing: -0.022em;
    --f17-height: 1.1764706;

    /* 17 - body text only */
    --f17-height-body: 1.52941177;

    /* 19 */
    --f19-size: 19px;
    --f19-spacing: -0.024em;
    --f19-height: 1.2631579;

    /* 21 */
    --f21-size: 21px;
    --f21-spacing: 0.024em;
    --f21-height: 1.14285715;

    /* 22 */
    --f22-size: 22px;
    --f22-spacing: 0.024em;
    --f22-height: 1.0909091;

    /* 24 */
    --f24-size: 24px;
    --f24-spacing: 0.02em;
    --f24-height: 1.166667;

    /* 28 */
    --f28-size: 28px;
    --f28-spacing: 0.016em;
    --f28-height: 1.14285715;

    /* 30 */
    --f30-size: 30px;
    --f30-spacing: 0.01em;
    --f30-height: 1.133334;

    /* 32 */
    --f32-size: 32px;
    --f32-spacing: 0.01em;
    --f32-height: 1.1251;

    /* 36 */
    --f36-size: 36px;
    --f36-spacing: 0.024em;
    --f36-height: 1.14285715;

    /* 40 */
    --f40-size: 40px;
    --f40-spacing: -0.005em;
    --f40-height: 1.101;

    /* 48 */
    --f48-size: 48px;
    --f48-spacing: -0.0012em;
    --f48-height: 1.0833334;

    /* 56 */
    --f56-size: 56px;
    --f56-spacing: -0.016em;
    --f56-height: 1.14285715;

    /* 64 */
    --f64-size: 64px;
    --f64-spacing: -0.016em;
    --f64-height: 1.06251;

    /* 72 */
    --f72-size: 72px;
    --f72-spacing: -0.022em;
    --f72-height: 1.055556;

    /* 80 */
    --f80-size: 80px;
    --f80-spacing: -0.024em;
    --f80-height: 1.05;
}


/* ========================================
   TYPOGRAPHY CLASSES
======================================== */

.f12r {
    font-family: var(--font-text);
    font-weight: var(--fw-regular);
    font-size: var(--f12-size);
    letter-spacing: var(--f12-spacing);
    line-height: var(--f12-height);
}

.f14r {
    font-family: var(--font-text);
    font-weight: var(--fw-regular);
    font-size: var(--f14-size);
    letter-spacing: var(--f14-spacing);
    line-height: var(--f14-height);
}


/* 17px regular - buttons, subtitles and others */
.f17r,
.f17r-m {
    font-family: var(--font-text);
    font-weight: var(--fw-regular);
    font-size: var(--f17-size);
    letter-spacing: var(--f17-spacing);
    line-height: var(--f17-height);
}


/* 17px body text */
.f17b {
    font-family: var(--font-text);
    font-weight: var(--fw-regular);
    font-size: var(--f17-size);
    letter-spacing: var(--f17-spacing);
    line-height: var(--f17-height-body);
}


.f19r {
    font-family: var(--font-text);
    font-weight: var(--fw-regular);
    font-size: var(--f19-size);
    letter-spacing: var(--f19-spacing);
    line-height: var(--f19-height);
}

.f21s,
.f21s-m {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f21-size);
    letter-spacing: var(--f21-spacing);
    line-height: var(--f21-height);
}

.f22s {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f22-size);
    letter-spacing: var(--f22-spacing);
    line-height: var(--f22-height);
}

.f24s {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f24-size);
    letter-spacing: var(--f24-spacing);
    line-height: var(--f24-height);
}

.f28s,
.f28s-m {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f28-size);
    letter-spacing: var(--f28-spacing);
    line-height: var(--f28-height);
}

.f30s {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f30-size);
    letter-spacing: var(--f30-spacing);
    line-height: var(--f30-height);
}

.f32s,
.f32s-m {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f32-size);
    letter-spacing: var(--f32-spacing);
    line-height: var(--f32-height);
}

.f36s {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f36-size);
    letter-spacing: var(--f36-spacing);
    line-height: var(--f36-height);
}

.f40s {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f40-size);
    letter-spacing: var(--f40-spacing);
    line-height: var(--f40-height);
}

.f48s,
.f48s-m {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f48-size);
    letter-spacing: var(--f48-spacing);
    line-height: var(--f48-height);
}

.f56s,
.f56s-m {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f56-size);
    letter-spacing: var(--f56-spacing);
    line-height: var(--f56-height);
}

.f64s,
.f64s-t-m {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f64-size);
    letter-spacing: var(--f64-spacing);
    line-height: var(--f64-height);
}

.f72s {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f72-size);
    letter-spacing: var(--f72-spacing);
    line-height: var(--f72-height);
}

.f80s {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--f80-size);
    letter-spacing: var(--f80-spacing);
    line-height: var(--f80-height);
}

.f80b,
.f80b-t-m,
.f80b-l-t-m {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--f80-size);
    letter-spacing: var(--f80-spacing);
    line-height: var(--f80-height);
}


/* ========================================
   TABLET
======================================== */

@media only screen and (max-width: 1024px) {

    .f32s-m {
        font-size: var(--f28-size);
        letter-spacing: var(--f28-spacing);
        line-height: var(--f28-height);
    }

    .f48s-m {
        font-size: var(--f40-size);
        letter-spacing: var(--f40-spacing);
        line-height: var(--f40-height);
    }

    .f56s-m {
        font-size: var(--f48-size);
        letter-spacing: var(--f48-spacing);
        line-height: var(--f48-height);
    }

    .f64s-t-m {
        font-size: var(--f56-size);
        letter-spacing: var(--f56-spacing);
        line-height: var(--f56-height);
    }

    .f80b-t-m {
        font-size: var(--f64-size);
        letter-spacing: var(--f64-spacing);
        line-height: var(--f64-height);
    }

    .f80b-l-t-m {
        font-size: var(--f72-size);
        letter-spacing: var(--f72-spacing);
        line-height: var(--f72-height);
    }
}


/* ========================================
   MOBILE
======================================== */

@media only screen and (max-width: 767px) {

    .f17r-m {
        font-size: var(--f14-size);
        letter-spacing: var(--f14-spacing);
        line-height: var(--f14-height);
    }

    .f21s-m {
        font-family: var(--font-text);
        font-size: var(--f19-size);
        letter-spacing: var(--f19-spacing);
        line-height: var(--f19-height);
    }

    .f28s-m,
    .f32s-m {
        font-size: var(--f24-size);
        letter-spacing: var(--f24-spacing);
        line-height: var(--f24-height);
    }

    .f48s-m {
        font-size: var(--f36-size);
        letter-spacing: var(--f36-spacing);
        line-height: var(--f36-height);
    }

    .f56s-m {
        font-size: var(--f40-size);
        letter-spacing: var(--f40-spacing);
        line-height: var(--f40-height);
    }

    .f64s-t-m {
        font-size: var(--f48-size);
        letter-spacing: var(--f48-spacing);
        line-height: var(--f48-height);
    }

    .f80b-t-m,
    .f80b-l-t-m {
        font-size: var(--f56-size);
        letter-spacing: var(--f56-spacing);
        line-height: var(--f56-height);
    }
}