:root {
    --toastify-color-info: #3498db;
    --toastify-color-success: #07bc0c;
    --toastify-color-warning: #f1c40f;
    --toastify-color-error: #e74c3c;
    --toastify-icon-color-info: var(--toastify-color-info);
    --toastify-icon-color-success: var(--toastify-color-success);
    --toastify-icon-color-warning: var(--toastify-color-warning);
    --toastify-icon-color-error: var(--toastify-color-error);
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
}

:root {
    --colorBlue: #4582ff;
    --colorBlack: #0f2239;
    --paraColor: #636363;
    --colorWhite: #fff;
    --paraFont: "Rubik", sans-serif;
    --headingFont: "Montserrat", sans-serif;
}

.mt_95 {
    margin-top: 40px;
}



.containerdiv {
 font-size: 2.2rem;   
    color: #02569B;
     width: 500px;
  
    margin: 20px auto ;
border-bottom: dashed 1px #02569B;
    text-align: center;

}



.containerdiv2 {
 font-size: 2.2rem;   
    color: #02569B;
     width: 500px;
  
       margin: 20px auto ;
border-bottom: dashed 1px #02569B;
    text-align: center;
}




.containerdiv3 {
 font-size: 35px;   
    color: #02569B;
     width: 500px;
  
    margin: 20px auto ;
border-bottom: dashed 1px #02569B;
    text-align: center;

}



.containerdiv4 {
 font-size: 35px;
 color: #02569B;
 width: 500px;
 margin: 32px auto;
 border-bottom: dashed 1px #02569B;
 text-align: center;
}




.container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

.iconimg {
    width: 95px;
    height: 95px;
    margin-top: 3px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}



@media (min-width: 768px) {
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

}


@media (max-width: 768px) {
   
.containerdiv {
        width: fit-content;
 font-size: 1.6rem;   
    color: #02569B;

}

.containerdiv2 {
        width: fit-content;
 font-size: 1.6rem;   
    color: #02569B;

}

.containerdiv3 {
        width: fit-content;
 font-size: 1.6rem;   
    color: #02569B;

}

.containerdiv4 {
        width: fit-content;
        font-size: 1.4rem;
        color: #02569B;
}

}

@media (min-width: 992px) {
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

.m-auto {
    margin: auto !important;
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

.tf__heading_area {
    text-align: center;
}

.mb_15 {
    margin-bottom: 15px;
}

.tf__single_category {
    position: relative;
    margin-top: 25px;
}

h5 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

h5 {
    font-size: 1.25rem;
}

h5 {
    margin: 0;
    padding: 0;
    color: var(--colorBlack);
    font-family: var(--headingFont);
}

.tf__heading_area h5 {
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--colorBlue);
    font-family: var(--paraFont);
    position: relative;
    display: inline-block;
}

.tf__heading_area h5::after,
.tf__heading_area h5::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background: var(--colorBlue);
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.tf__heading_area h5::before {
    left: auto;
    right: -20px;
}

h2 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

h2 {
    font-size: calc(1.325rem + .9vw);
}

@media (min-width: 1200px) {
    h2 {
        font-size: 2rem;
    }
}

h2 {
    margin: 0;
    padding: 0;
    color: var(--colorBlack);
    font-family: var(--headingFont);
}

.tf__heading_area h2 {
    font-size: 38px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.tf__single_category_icon {
    width: 80px;
    height: 80px;
    background: var(--colorBlue);
    line-height: 100px;
    text-align: center;
    color: var(--colorWhite);
    font-size: 40px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    transition: all .3s linear;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.tf__single_category.blue .tf__single_category_icon {
    background: #4582ff;
}

.tf__single_category:hover .tf__single_category_icon {
    background: var(--colorWhite) !important;
}

.tf__single_category.blue:hover .tf__single_category_icon {
    color: #4582ff;
}

.tf__single_category_text {
    background: rgba(243, 247, 251, 0.178);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    margin-left: 50px;
    padding: 10px 50px 10px 54px;
    position: relative;
    border-radius: 5px;
    border-left: 3px solid var(--colorBlue);
    overflow: hidden;
    transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    -o-transform: skewX(-10deg);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.tf__single_category.blue .tf__single_category_text {
    border-color: #4582ff;
}

.tf__single_category_text:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #f3f7fb;
    top: 0;
    left: 0;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.tf__single_category:hover .tf__single_category_text::after {
    opacity: .85;
}

.tf__single_category.blue:hover .tf__single_category_text::after {
    background: #4582ff;
}

.tf__single_category.orange .tf__single_category_icon {
    background: #ff7f46;
}

.tf__single_category.orange:hover .tf__single_category_icon {
    color: #ff7f46;
}

.tf__single_category.orange .tf__single_category_text {
    border-color: #ff7f46;
}

.tf__single_category.orange:hover .tf__single_category_text::after {
    background: #ff7f46;
}

.tf__single_category.red .tf__single_category_icon {
    background: #E9AF00;
}

.tf__single_category.red:hover .tf__single_category_icon {
    color: #E9AF00;
}

.tf__single_category.red .tf__single_category_text {
    border-color: #E9AF00;

}

.tf__single_category.red:hover .tf__single_category_text::after {
    background: #E9AF00;

}

.h3-style::after {

    color: #E9AF00;
    transition: color 0.3s ease;
}

.tf__single_category.red:hover .h3-style::after {
    color: #000;
}




.tf__single_category.gray .tf__single_category_icon {
    background: #4582ff;
}

.tf__single_category.gray:hover .tf__single_category_icon {
    color: #4582ff;
}

.tf__single_category.gray .tf__single_category_text {
    border-color: #4582ff;
}

.tf__single_category.gray:hover .tf__single_category_text::after {
    background: #4582ff;
}

.tf__single_category.light_blue .tf__single_category_icon {
    background: #ff7f46;
}

.tf__single_category.light_blue:hover .tf__single_category_icon {
    color: #ff7f46;
}

.tf__single_category.light_blue .tf__single_category_text {
    border-color: #ff7f46;
}

.tf__single_category.light_blue:hover .tf__single_category_text::after {
    background: #ff7f46;
}

.tf__single_category.green .tf__single_category_icon {
    background: #E9AF00;
}

.tf__single_category.green:hover .tf__single_category_icon {
    color: #E9AF00;
}

.tf__single_category.green .tf__single_category_text {
    border-color: #E9AF00;
}

.tf__single_category.green:hover .tf__single_category_text::after {
    background: #E9AF00;
}

.fa {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro");
    font-weight: var(--fa-style, 900);
}

.fa {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-feature-settings: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.fa-pen-ruler:before,
.fa-pencil-ruler:before {
    content: "\f5ae";
}

h3 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

h3 {
    font-size: calc(1.3rem + .6vw);
}

@media (min-width: 1200px) {
    h3 {
        font-size: 1.75rem;
    }
}

h3 {
    margin: 0;
    padding: 0;
    color: var(--colorBlack);
    font-family: var(--headingFont);
}

.tf__single_category_text h3 {
    font-size: 22px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.tf__single_category_text h3 {
    position: relative;
    z-index: 1;
    transition: all .3s linear;
    transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    -o-transform: skewX(10deg);
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

p {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.tf__single_category_text p {
    position: relative;
    z-index: 1;
    transition: all .3s linear;
    transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -ms-transform: skewX(10deg);
    -o-transform: skewX(10deg);
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.tf__single_category_text p {
    padding-left: 8px;
}

.fa-car-bus:before {
    content: "\f85a";
}

.fa-book:before {
    content: "\f02d";
}

.fa-pen-paintbrush:before,
.fa-pencil-paintbrush:before {
    content: "\f618";
}

.fa-palette:before {
    content: "\f53f";
}

.fa-analytics:before,
.fa-chart-mixed:before {
    content: "\f643";
}


/* MOBILE VIEW DESIGN */
@media (max-width: 767px) {

    .tf__single_category {
        display: flex ;
        width: 100% ;
        margin-bottom: 15px;
        padding: 20px;
        border-radius: 12px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
}

    .tf__single_category_icon {
        flex: 0 0 80px;
        margin-right: 15px;
    }

    .tf__single_category_icon img {
        width: 70px !important;
        height: 70px !important;
    }

    .tf__single_category_text h3 {
        font-size: 22px !important;
        margin: 0;
    }

    .tf__single_category_text p {
        font-size: 14px !important;
        margin: 0;
        line-height: 18px;
    }

    .col-xl-4,
    .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .iconimg10 {
        width: 100%;
        display: block;
        margin: 20px auto 0;
    }
}