/* QuickCSS Main CSS */
/* Developer Yashwant Kargwal */

/* Imports Other Css in Main */
@import url(main/btn/primary-button.css);
@import url(main/btn/secondary-button.css);
@import url(main/blog/qc-base-blog.css);
@import url(main/blog/qc-blog.css);

/* Fonts Which are used in QuickCSS */
@font-face {
    /* Heading */
    font-family: Popins-bold;
    src: url(private/fonts/Poppins/Poppins-Bold.ttf);
}
@font-face {
    /* Sub Heading */
    font-family: Popins-medium;
    src: url(private/fonts/Poppins/Poppins-Medium.ttf);
}
@font-face {
    /* Body Text  */
    font-family: Roboto-regular;
    src: url(private/fonts/Roboto/Roboto-Regular.ttf);
}
@font-face {
    /* Buttons  */
    font-family: Popins-semi-bold;
    src: url(private/fonts/Poppins/Poppins-SemiBold.ttf);
}
@font-face {
    /* Small Text / Captions  */
    font-family: Roboto-small-caption;
    src: url(private/fonts/Roboto/Roboto-Light.ttf);
}

:root{
    /* Color */
    --primary-color: #026fe3; /* Buttons , link , headings , icons */
    --secondary-color: #005bb5;    /* hover states , borders , active states */
    --third-color: #48b6ff; /* Badges/tags , icons/illustrations , highlights */
    --background-color: #F8F9FA;   /* main background , cards/container , forms/inputs */

    --body-text: #333333;         /* body text colors */
    --text-color : #fff;  /* White Text COLOR*/
    --div-border-color: #E0E0E0;       /* DIVS colors for light Subtle borders */
    --white-cloud : #ebebeb; /* Color for dirty white*/
    --white : #fff; /* White color*/

    /* Fonts Size  */
    --para: 16px;

    /* Fonts Family here  */
    --font-btn: popins-semi-bold;


    --border: 1px solid var(--third-color);
    --border-normal: 2px solid var(--third-color);
    --border-bold: 3px solid var(--third-color);
    --border-bolder: 4px solid var(--third-color);
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.m-1{
    margin: 5px;
}
.mt-1{
    margin-top: 5px;
}
.mr-1{
    margin-right: 5px;
}
.mb-1{
    margin-bottom: 5px;
}
.ml-1{
    margin-left: 5px;
}
.m-2{
    margin: 7px;
}
.mt-2{
    margin-top: 7px;
}
.mr-2{
    margin-right: 7px;
}
.mb-2{
    margin-bottom: 7px;
}
.ml-2{
    margin-left: 7px;
}
.m-3{
    margin: 10px;
}
.mt-3{
    margin-top: 10px;
}
.mr-3{
    margin-right: 10px;
}
.mb-3{
    margin-bottom: 10px;
}
.ml-3{
    margin-left: 10px;
}
.m-4{
    margin: 12px;
}
.mt-4{
    margin-top: 12px;
}
.mr-4{
    margin-right: 12px;
}
.mb-4{
    margin-bottom: 12px;
}
.ml-4{
    margin-left: 12px;
}
.m-5{
    margin: 15px;
}
.mt-5{
    margin-top: 15px;
}
.mr-5{
    margin-right: 15px;
}
.mb-5{
    margin-bottom: 15px;
}
.ml-5{
    margin-left: 15px;
}