/*--------------------------------------------------------------
# Begin - Fluid typography template

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
--------------------------------------------------------------*/


/*@media screen and (min-width: 320px) {
    html {
        font-size: calc(16px + 6 * ((100vw - 320px) / 680)); // Minimum font size: 16px
    }
}


@media screen and (min-width: 1000px) {
    html {
       font-size: 22px; // Maximum Font size
    }
}*/

/*--------------------------------------------------------------
# End - Fluid typography template
--------------------------------------------------------------*/

:root {
    --primary-text-color: #242526;
    --giant-text-color: #2c2c2c;
    --default-font-size: 18px;
    --default-large-font-size: 24px;
    --default-small-font-size: 16px;
    --default-extra-large-font-size: 80px;
    --default-font-family: 'Poppins', sans-serif;
}

body {
    font-size: var(--default-font-size);
    font-family: var(--default-font-family);
    line-height: 1.56;
    color: var(--primary-text-color);
    font-weight: 300;
}

h2, .h2 {
    font-size: 48px;
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--primary-text-color);
}

@media (max-width: 450px) {
    h2, .h2 {
        font-size: 34px !important;
        padding-left: 2px !important;
        word-break: break-word !important;
    }
}

h3, .h3 {
    text-align: left !important;
    font-size: calc(16px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
    font-size: 1.5vw;
}

@media (max-width: 992px) {
    h3, .h3 {
        font-size: 15px;
    }
}

h5, .h5 {
    font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
    font-size: 1.3vw;
}

h6, .h6 {
    font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)))
}

.default-font-size {
    font-size: var(--default-font-size)
}

.default-font-size-small {
    font-size: var(--default-small-font-size)
}

.default-font-size-large {
    font-size: var(--default-large-font-size)
}



/*--------------------------------------------------------------
# Begin - Giant  text
--------------------------------------------------------------*/

.giant-text {
    font-size: 72px;
    line-height: 1.22;
    letter-spacing: -1px;
    color: var(--giant-text-color);
}

@media screen and (min-width: 768px) {
    .giant-text {
        font-size: 50px;
    }
}

/*--------------------------------------------------------------
# End - Giant text
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Begin - Text colors
--------------------------------------------------------------*/

.text-dart-dark-blue, .text-DartBlue {
    color: var(--dart-dark-blue) !important;
}

.text-color-Gray, .text-Gray, .text-gray {
    color: var(--gray);
}

.text-color-DarkGray, .text-color-DarkGrey, .text-DarkGray, .text-DarkGrey, .text-dark-gray, .text-dark-grey {
    color: var(--dark-gray);
}

.text-color-Regular, .text-color-regular {
    color: black;
}

.text-color-White, .text-color-white {
    color: white;
}

.text-color-LightBlue, .text-color-lightblue {
    color: var(--dart-light-blue);
}

.text-color-DarkBlue, .text-color-darkblue {
    color: var(--dart-dark-blue);
}

.text-color-Yellow, .text-color-yellow {
    color: var(--dart-yellow);
}

.text-color-Orange, .text-color-orange {
    color: var(--dart-orange);
}

.text-color-black {
    color: black;
}

/*--------------------------------------------------------------
# End - Text colors
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Begin - Font size
--------------------------------------------------------------*/

.fs-0 {
    font-size: calc(2.375rem + 1.5vw) !important;
}

@media (min-width: 1200px) {
    .fs-0 {
        font-size: 5rem !important;
    }
}

.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

@media (min-width: 1200px) {
    .fs-1 {
        font-size: 2.5rem !important;
    }
}


.fs-2 {
    font-size: calc(1.325rem + .9vw) !important;
}


@media (min-width: 1200px) {
    .fs-2 {
        font-size: 2rem !important;
    }
}

.fs-3 {
    font-size: calc(1.3rem + .6vw) !important;
}

@media (min-width: 1200px) {
    .fs-3 {
        font-size: 1.75rem !important;
    }
}

.fs-4 {
    font-size: calc(1.275rem + .3vw) !important;
}

@media (min-width: 1200px) {
    .fs-4 {
        font-size: 1.5rem !important;
    }
}

.fs-5 {
    font-size: 1.25rem !important;
}

.fs-6 {
    font-size: 1rem !important;
}

/*--------------------------------------------------------------
# End - Font size
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Begin - Font Weight
--------------------------------------------------------------*/
.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}
/*--------------------------------------------------------------
# Begin - Font Weight
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Begin - Standard font size
--------------------------------------------------------------*/

.text-size-Regular {
    font-size: var(--default-font-size) !important;
}

.text-size-Large {
    font-size: var(--default-large-font-size) !important;
}

.text-size-ExtraLarge {
    font-size: var(--default-extra-large-font-size) !important;
}

.text-size-Small {
    font-size: var(--default-small-font-size) !important;
}

/*--------------------------------------------------------------
# Begin - standard font size
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Begin - Standard text alignment
--------------------------------------------------------------*/

.text-alignment-Left {
    text-align: start;
}

.text-alignment-Center {
    text-align: center;
}

.text-alignment-Right {
    text-align: end;
}


/*--------------------------------------------------------------
# Begin - standard text alignment
--------------------------------------------------------------*/