/* normalizing styles */

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* variables  */

:root {
    /* colors */

    --primary-color: #e2d6ff3d;
    --secondary-color: #20154e;
    --nav-bg: #f8f5ff;
    --text-color-1: #20154e;
    --text-color-2: #493082;
    --text-color-3: #493082ad;
    --text-color-4: #8372aa;
    --text-color-5: #f8f5ff;
    --text-color-6: #faaf40;
    --text-color-7: #667085;
    --text-color-8: #6941c6;

    --border-color-1: #d6bbfb;
    --border-color-2: #00a695;
    --border-color-3: #493082;
    --border-color-4: #faaf40;
    --border-color-5: #20154e;
    --border-color-6: #d4d4d8;
    --border-color-7: #d6bbfb;

    --bg-color-1: #f8f5ff;
    --bg-color-2: #f8f5ffc7;
    --bg-color-3: #493082;
    --bg-color-4: #faaf40;
    --bg-color-5: #feefec;
    --bg-color-6: #ee3f6b;
    --bg-color-7: #00a695;
    --bg-color-8: #feefec;

    --default-color: #ffffff;
}

/* fonts */
@font-face {
    font-family: "Aller-regular";
    /* src: url("/fonts/aller.regular.woff"); */
    src: url("../fonts/Aller_Std_Rg.woff");
}

@font-face {
    font-family: "Aller-bold";
    /* src: url("/fonts/aller.bold.woff"); */
    src: url("../fonts/aller.bold.woff");
}

@font-face {
    font-family: "Aller-light";
    /* src: url("/fonts/aller.light.woff"); */
    src: url("../fonts/Aller_Std_Lt.woff");
}

@font-face {
    font-family: "bangla";
    /* src: url("/fonts/aller.light.woff"); */
    src: url("../fonts/akigonj.woff");
}

body {
    /* font-family: "Aller-regular", "bangla", serif; */
    font-family: "Aller-regular", serif;
    background: var(--default-color);
    overflow-x: hidden !important;
}

.container {
    width: 75%;
    margin: auto;
}

.underline {
    height: 7px;
    background: var(--border-color-4);
}

.paragraph {
    font-size: 18px;
    font-weight: 400;
    font-family: "Aller-regular", serif;
    line-height: 28px;
    color: var(--text-color-3);
    text-align: center;
    max-width: 1256px;
}

@media only screen and (max-width: 1600px) {
    .container {
        width: 90%;
    }
}