@import './color_7.css';
/*==================== GOOGLE FONTS ====================*/
@import './header.css';
@import './hero.css';
@import './about.css';
@import './blog.css';
@import './feature.css';
@import './facts.css';
@import './cta.css';
@import './contacts.css';
@import './faq.css';
@import './misc.css';
@import './portfolio.css';
@import './pricing.css';
@import './process.css';
@import './team.css';
@import './project.css';
@import './test.css';
@import './footer.css';
@import './product.css';
@import './career.css';

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700&family=Poppins:wght@400;500;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
/*==================== VARIABLES CSS ====================*/

:root {

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --sub-text:1.1rem;
    --normal-font-size: .958rem;
    --small-font-size: .813rem;
    --title-size: 2rem;
    --smaller-font-size: .75rem;
    --footer-title-size: 1.2rem;
    /* --shape-color:#f5cb13; */
    --font-family-1: 'Poppins', sans-serif;
    --font-family-2: 'Poppins', sans-serif;
    --font-family-3: 'Poppins', sans-serif;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-light: 400;
    /*========== Margins Bottom ==========*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;
    --header-height: 3rem;


    /* meter */
    --k: 0deg;




    /* bg_img */
    --bg-img-1: url('../img/bg2.jpg');



   
}




@media screen and (min-width: 968px) {
    :root {
        --big-font-size: 2.25rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.6rem;
        --h3-font-size: 1.25rem;
        --sub-text:1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
        --social-color: var(--black);
		
		
    }
}

@media screen and (min-width:1024px) {
    :root {
        --title-size: 1.8rem;
    }
}

@media screen and (max-width:750px) {
    :root {
        --title-size: 1.5rem;
    }

}





/* ========================base================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font) !important;
    font-size: var(--normal-font-size);
    overflow-x: hidden;
    min-height: 100vh;
    background-color: var(--body-bg);
}


img {
    height: 100%;
    width: 100%;
}

.avatar_img {
    height: 4rem !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-1);
}

p {
    font-family: var(--font-family-2);
}



/* ================link============ */
a {
    text-decoration: none;
    font-weight: var(--font-normal);
    /* font-size: var(--h3-font-size); */
    color: var(--link-color-def);
    position: relative;

}

a.dark {
    color: var(--link-color);
}

a:hover {
    color: var(--link-color);
}

a.border_link {
    color: var(--link-color-def);
}

a.border_link::before {
    content: '';
    position: absolute;
    bottom: -3px;
    height: 1px;
    width: 100%;
    left: 0;
    transform-origin: 100% 50%;
    background: var(--link-color-def);
    transform: scale3d(0, 1, 1);
    transition: transform .3s cubic-bezier(.7, 0, .2, 1);
}

a.border_link:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
    transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}

/* ================= margins paddings fonts====================== */
.mt-80 {
    margin-top: 80px;
}

.mt-70{
    margin-top: 70px;
}


.mt-60{
    margin-top: 60px;
}


.mt-50{
    margin-top: 50px;
}

.pt-80 {
    padding-top: 80px;
}

.pb-80 {
    padding-bottom: 80px;
}


.pt-70 {
    padding-top: 70px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-50 {
    padding-top: 50px;
}


.pt-40 {
    padding-top: 40px;
}

.pt-30 {
    padding-top: 30px;
}


.pt-20 {
    padding-top: 20px;
}


.pb-70 {
    padding-bottom: 70px;
}


.pb-10 {
    padding-bottom: 10px;
}



.pb-30 {
    padding-bottom: 30px;
}


.pb-40 {
    padding-bottom: 40px;
}


.pb-50 {
    padding-bottom: 50px;
}


.pb-60 {
    padding-bottom: 60px;
}



.mt-n10 {
    margin-top: -10rem;
}

.mb-n10 {
    margin-bottom: -10rem;
}

.mb-70 {
    margin-bottom: 70px;
}

.plr-10{
    padding-left: 10px;
    padding-right: 10px;
}

.z_index_10 {
    z-index: 10;
}

.z_index_n1 {
    z-index: -1;
}


.text_desc {
    padding-top: 10px;
    line-height: 1.8rem;
    font-size: var(--normal-font-size);
}

.text_title {
    text-transform: capitalize;
    font-size: var(--title-size);
    line-height: 3rem;
    text-align: left;
    font-weight: var(--font-semi-bold);
    /* font-family: var(--font-family-2); */
}




.big_text {
    font-size: var(--big-font-size) !important;
}

.small_text {
    font-size: var(--small-font-size) !important;
}

.small_title {
    color: var(--title-color-2) !important;
    font-size: var(--normal-font-size);
    text-transform: uppercase;
    font-weight: var(--font-semi-bold);
    position: relative;
  }

.small_title_line {
    color: var(--title-color-2);
    font-size: var(--normal-font-size);
    text-transform: uppercase;
    font-weight: var(--font-semi-bold);
    position: relative;
    padding-left: 2rem;
}

.small_title_line::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 15px;
    background: var(--first-color);
    top: 50%;
    left: -0px;
    transform: translateY(-50%);
}

.small_title.text-white::after {
    background-color: var(--white) !important;
}

.sub_title {
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi-bold);
}


.sub_text {
    font-size: var(--sub-text);
    max-width: 100%;
    /* text-align: left; */
    font-weight: var(--font-light);
    letter-spacing: .01rem;
}

.footer_text {
    line-height: 1.8rem;
    font-size: var(--normal-font-size);
}

.footer_title {
    color: var(--footer-title-color);
    font-size: var(--footer-title-size);
    font-weight: var(--font-semi-bold);
}


/* color */

.title_color .text_title,.title_color h1{
    color: var(--title-color-1);
}
.description_color .text_desc,.title_color p{
    color: var(--text-color);
}
.sub_text_color .sub_text{
    color: var(--text-color);
}
.sub_title_color .sub_title{
    color: var(--title-color-1);
}


footer .footer_text_color,footer  a{
    color: var(--footer-text-color);
}

  

/* .text_trim {
    --max-lines: 3;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
  }
  .text_trim::before {
    position: absolute;
    content: "...";
    bottom: 0;
    right: 0;
  }
  .text_trim::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1rem;
    height: 1rem;
    background: white;
  } */
.text_trim {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text_trim_4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}


.title_trim {
    /* width: 250px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title_trim_sm {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

/* ================font family=============== */
.ff_1 {
    font-family: var(--font-family-1) !important;
}

.ff_2 {
    font-family: var(--font-family-2) !important;
}

.ff_3 {
    font-family: var(--font-family-3) !important;
}

/*==========diff  color======= */
.rating_color_1 {
    color: var(--rating-1);
}

.rating_color_2 {
    color: var(--rating-2);
}

.offer_color_1 {
    color: var(--offer-1);
}

.sale_color {
    background: var(--sale-color) !important;
    color: var(--white) !important;
}

.new_color {
    background: var(--new-color) !important;
    color: var(--white) !important;
}

.default_color {
    color: var(--text-color);
}


/* .bg_dark .text_title,
.bg_dark .sub_title,
.bg_dark .sub_text,
.bg_dark .text_desc {
    color: var(--white);
} */

.text_blue {
    color: blue !important;
}

.text_green {
    color: green !important;
}

.text_yellow {
    color: yellow !important;
}

.text_orange {
    color: orange !important;
}

.text_red {
    color: red !important;
}

.text_white {
    color: #fff !important;
}




/* listing with ul */
ul.listing li {
    display: grid;
    grid-template-columns: 10% auto;
    gap: 1rem;
    margin-bottom: 1rem;

}


/* social links */
.social_links {
    display: inline-block;
    gap: 1.5rem;
    align-items: center;
    grid-template-columns: repeat(auto-fit, 1rem);
    grid-auto-flow: column;
}

.social_links a {
    font-size: var(--normal-font-size);
    margin: 0 .7rem 0 0;
    transition: all 0.4s ease;
}

.social_links a:hover {
    transform: translateY(-5px);
}

.social_links a i {
    color: var(--social-color);
}

.social_links.colored .fa-facebook-f {
    color: var(--facebook);
}

.social_links.colored .fa-instagram {
    color: var(--instagram);
}

.social_links.colored .fa-twitter {
    color: var(--twitter);
}

.social_links.colored .fa-youtube {
    color: var(--youtube);
}
.social_links.colored .bi-facebook-f {
    color: var(--facebook);
}

.social_links.colored .bi-instagram {
    color: var(--instagram);
}

.social_links.colored .bi-twitter {
    color: var(--twitter);
}

.social_links.colored .bi-youtube {
    color: var(--youtube);
}


/* ===============layout=================== */
.slider_wrapper.full_width .container,
.slider_wrapper.full_width,
.full_width {
    max-width: 100% !important;
    padding: 0 !important;
}


/* ===================underline================== */
span.underline_style_1 {
    position: relative;
}

span.underline_style_1::after {
    content: "";
    background: url('../img/underline_3.svg');
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 10px;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
}

span.under_line_style_2 {
    position: relative;
}

span.under_line_style_2::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 10px;
    left: 0;
    width: 100%;
    background-image: url('../img/line_yellow.svg');
    background-repeat: no-repeat;
    z-index: -1;
}

/* ============= selection============ */
::-moz-selection {
    color: var(--white);
    background: var(--first-color);
}

::selection {
    color: var(--white);
    background: var(--first-color);
}

/* ====================background========= */

.background_img_1 {
    background-image: var(--bg-img-1) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: auto;
    position: relative;

}

.parallax {
    background-attachment: fixed;
}

.primary_elements_color{
    background: var(--first-color) !important;
}

.primary_elements_light_color{
    background-color: var(--light-first-color) !important;
}

.bg_light {
    background: var(--background-light) !important;
}

.bg_dark {
    background: #262b32 !important;
}

.bg_1 {
    background: var(--bg-1) !important;
}



.breadcrumbs {
    background: var(--breadcrumbs-color);
}

.bg_mute {
    background: var(--mute-color) !important;
}

.mute_color {
    color: var(--mute-color) !important;
}

.text_primary_color {
    color: var(--first-color) !important;
}

.bg_yellow{
    background: #ffd427;
}
.bg_light_yellow{
    background: #fffbec;
}
.bg_red{
    background: crimson;
}
.bg_light_red{
    background: #ffe6e6;
}
.bg_green{
    background: rgb(37, 220, 20);
}
.bg_light_green{
    background: #edffec;
}
.bg_blue{
    background: rgb(13, 0, 252);
}
.bg_light_blue{
    background: #edefff;
}
.bg_orange{
    background: rgb(255, 151, 6);
}
.bg_light_orange{
    background: #fffcf8;
}


/* ==============overlay=========== */
figure.dark_overlay::before,
.dark_overlay::before {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--dark);
    opacity: 0.75;
    content: '';
}

figure.dark_overlay,
.dark_overlay {
    margin-bottom: 0;
    position: relative;
}
.dark_overlay{
    position: relative;

}

.dark_overlay.rounded::before {
    border-radius: 10px;
}



figure.light_overlay::before,
.light_overlay::before {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--black);
    opacity: 0;
    content: '';
}

figure.light_overlay,
.light_overlay {
    margin-bottom: 0;
    position: relative;
}
.light_overlay{
    position: relative;

}

.light_overlay.rounded::before {
    border-radius: 10px;
}

/*=========== image scale =========*/
.image_scale img {
    transition: all 400ms ease;
}

.image_scale:hover img {
    transform: scale(1.1);
    cursor: move;
}


/* ==================border color============ */
.border_1 {
    border-color: var(--border-1) !important;
}

.border_2 {
    border-color: var(--border-2) !important;
}



/* ============slopping=========== */
.top_slop {
    position: relative;
}

.top_slop::before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    /* background: black; */
    content: '';
    border: 1px solid transparent;
    border-right: 100vw solid var(--body-bg);
    border-bottom: 100px solid transparent;
    border-top: 0px;
    z-index: 1;
}

.top_slop.right_slop::before {
    border-right: 0;
    border-left: 100vw solid var(--body-bg);
    border-bottom: 100px solid transparent;
}

.top_slop.left_slop::before {
    border-right: 100vw solid var(--body-bg);
    border-left: 0;
    border-bottom: 100px solid transparent;
}

.bottom_slop {
    position: relative;
}

.bottom_slop::before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    content: '';
    border: 1px solid transparent;
    border-right: 100vw solid var(--body-bg);
    border-top: 70px solid transparent;
    border-bottom: 0px;
    z-index: 0;
}

.bottom_slop.right_slop::before {
    border-right: 0;
    border-left: 100vw solid var(--body-bg);
    border-top: 100px solid transparent;
}

.bottom_slop.left_slop::before {
    border-right: 100vw solid var(--body-bg);
    border-left: 0;
    border-top: 100px solid transparent;
}

.top_slop>div:first-child {
    padding-top: 80px !important;

}

.bottom_slop>div:first-child {
    padding-bottom: 80px !important;

}

/* ================= griding============== */
.auto_grid {
    display: grid !important;
    grid-template-columns: max-content auto;
}

.auto_grid_rev {
    display: grid !important;
    grid-template-columns: auto max-content;
}

.auto_grid_max {
    display: grid !important;
    grid-template-columns: max-content auto;
}

.grid_column {
    display: grid !important;
    grid-auto-flow: column;
}

.grid_center {
    place-items: center;
}

@media screen and (max-width:775px) {
    .auto_grid {
        grid-template-columns: 10% auto;
    }
}

.grid-column {
    grid-auto-flow: column;
}

.grid-row {
    grid-auto-flow: row;
}

@media screen and (min-width:575px) {
    .grid-sm-column {
        grid-auto-flow: column !important;
    }

    .grid-sm-row {
        grid-auto-flow: row !important;
    }
}

@media screen and (min-width:775px) {
    .grid-md-column {
        grid-auto-flow: column !important;
    }

    .grid-md-row {
        grid-auto-flow: row !important;
    }
}

@media screen and (min-width:992px) {
    .grid-lg-column {
        grid-auto-flow: column !important;
    }

    .grid-lg-row {
        grid-auto-flow: row !important;
    }
}

@media screen and (min-width:1200px) {
    .grid-xl-column {
        grid-auto-flow: column !important;
    }

    .grid-xl-row {
        grid-auto-flow: row !important;
    }
}

@media screen and (min-width:1400px) {
    .grid-xxl-column {
        grid-auto-flow: column !important;
    }

    .grid-xxl-row {
        grid-auto-flow: row !important;
    }
}

.wrap {
    display: block !important;
}

.wrap>* {
    display: inline-block !important;
}

.wrap.gap_1>* {
    margin: .2rem .1rem;
}

.wrap.gap_2>* {
    margin: .2rem .5rem;
}

/*=============== list border======= */
ul.list_border li{
    position: relative;
}
ul.list_border li:after{
    position: absolute;
    content: '';
    right: -0.6rem;
    background: rgba(0, 0, 0, 0.2);
    top: 50%;
    height: 1rem;
    width: .1rem;
    transform: translateY(-50%);
}
ul.list_border li:last-child::after{
    display: none;
}
address{
    word-wrap: anywhere;
}

/* =====================icon-box=============== */
.icon_box {
    display: grid !important;
    place-items: center;
    background: var(--light-first-color);
    /* border-radius: 50%; */
    margin-right: 1rem;
    color: var(--first-color);
    font-size: var(--normal-font-size);
}

.icon_box.large {
    height: 3.5rem;
    width: 3.5rem;
}

.icon_box.small {
    height: 1.4rem;
    width: 1.4rem;
    font-size: var(--smaller-font-size) !important;
}

.icon_box {
    height: 2.2rem;
    width: 2.2rem;
}

.svg_icon {
    height: 3rem !important;
}

.icon_box.icon_1,
.icon.icon_1 {
    color: var(--iconbox-color-1) !important;
    background: var(--iconbox-bg-1) !important;
}

.icon_box.icon_2,
.icon.icon_2 {
    color: var(--iconbox-color-2) !important;
    background: var(--iconbox-bg-2) !important;
}

.icon_box.icon_3,
.icon.icon_3 {
    color: var(--iconbox-color-3) !important;
    background: var(--iconbox-bg-3) !important;
}

.icon_box.icon_4,
.icon.icon_4 {
    color: var(--iconbox-color-4) !important;
    background: var(--iconbox-bg-4) !important;
}

.icon_box.icon_5,
.icon.icon_5 {
    color: var(--iconbox-color-5) !important;
    background: var(--iconbox-bg-5) !important;
}

/* =====================table============== */
.table td {
    vertical-align: middle !important;
}


/* ==========================img_section================ */
.img_section {
    position: relative;

}

.shadow,
.shadow-sm,
.shadow-lg {
    box-shadow: 0 .25rem 1.75rem rgba(30, 34, 40, .07) !important;
}

.back_show::after {
    content: '';
    position: absolute;
    top: 5%;
    height: 100%;
    left: 5%;
    width: 100%;
    background: var(--light-first-color);
    z-index: -1;
    border-radius: 10px;
    opacity: 1;
}

.card.back_show {
    height: 100%;
  }

.back_show.bg_first_color::after {
    background: var(--light-first-color);
}

.back_show.bg_1::after {
    background: var(--bg-1);
}



.back_show.left::after {
    right: 5% !important;
    left: unset;
}

.back_show.right::after {
    left: 5%;
}

.partner figure {
    padding: 0 1.5rem;
}

.partner-logo2{
    width: auto;
    height: auto;
}

.text-justify
{
    text-align: justify;
}

.lh-35
{
    line-height: 35px;
}

.lh-30
{
    line-height: 30px !important;
}

.lh-22
{
    line-height: 22px !important;
}
.product-name-color{
    color: var(--product-name-color);
}

.product-name-color:hover{
    color: var(--first-color);
}


@media screen and (min-width:1400px) {
    .partner figure {
        padding: 0 2rem !important;
        margin-bottom: 2rem;
    }
}
@media screen and (max-width:1400px) {
    .partner figure {
        padding: 0 1rem !important;
        margin-bottom: 2rem;
    }

}

@media screen and (max-width:575px) {
    .back_show::after {
        opacity: 0;
        display: none;
    }

    .shape {
        display: none;
    }
}



/* ===========================shape===================== */
.shape {
    position: absolute;
    z-index: -1;
    height: 150px;
    width: 150px;
    opacity: 0.3;
    /* border-radius: 50%; */
}

.shape.shape_2 {
    border-radius: 50%;
    background: var(--shape2);

}

.shape.shape_1 {

    background-size: .85rem .85rem;
    background-image: var(--shape1);
}

.shape.shape_3 {
    height: 10rem;
    width: 10rem;
    border-radius: 50%;
    background: var(--first-color);
    opacity: 0.1;
}

.shape.left_top {
    left: -20px;
    top: 5px;
}

.shape.left_bottom {
    left: -50px;
    bottom: -50px;
}

.shape.right_top {
    right: -50px;
    top: -50px;
}

.shape.right_bottom {
    right: -50px;
    bottom: -50px;
}

.shape.shape_1.bg_second {
    background-image: var(--shape1-second);
    background-color: transparent !important;
}

.shape.shape_1.bg_third {
    background-image: var(--shape1-third);

    background-color: transparent !important;
}

.shape.shape_1.bg_fourth {
    background-image: var(--shape1-fourth);
    background-color: transparent !important;
}

.shape.shape_2.bg_second {
    background-image: var(--shape2-second);
    background-color: transparent !important;
}

.shape.shape_2.bg_third {
    background-image: var(--shape2-third);

    background-color: transparent !important;
}

.shape.shape_2.bg_fourth {
    background-image: var(--shape2-fourth);
    background-color: transparent !important;
}


.bottom_rounded {
    content: "";
    position: absolute;
    background: transparent;
    bottom: 0px;
    height: 50px;
    width: 100%;
    box-shadow: 0 70px 0 63px var(--white);
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
    z-index: -1;
}

/* ==========================button================ */
.button {
    background: var(--first-color);
    padding: .7rem 1.2rem;
    border: 0;
    color: var(--white);
    font-weight: var(--font-semi-bold);
    transition: all 0.4s ease;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.button.btn_sm {
    padding: .5rem 1rem;
}

.button.btn_lg {
    padding: 1rem 2rem;
}

.button:hover {
    transform: translateY(-5px);
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
    color: var(--white);
}

.button.outline {
    background: transparent !important;
    color: var(--first-color);
    border: 2px solid var(--first-color);
    border-width: 2px !important;
}

.button.outline:hover {
    background: var(--first-color) !important;
    color: var(--white);
}

.button.dark {
    color: var(--title-color-1) !important;
}

.button_1 {
    background: var(--button-1-bg) !important;
    color: var(--button-1-text) !important;
    border-color: var(--button-1-bg) !important;
}

.button_3 {
    background: var(--button-3-bg) !important;
    color: var(--button-3-text) !important;
    border-color: var(--button-3-bg) !important;
}

.button_2 {
    background: var(--button-2-bg) !important;
    color: var(--button-2-text) !important;
    border-color: var(--button-2-bg) !important;
}

.button_4 {
    background: var(--button-4-bg) !important;
    color: var(--button-4-text) !important;
    border-color: var(--button-4-bg) !important;
}

.button_5 {
    background: var(--button-5-bg) !important;
    color: var(--button-5-text) !important;
    border-color: var(--button-5-bg) !important;
}

.button_6 {
    background: var(--button-6-bg) !important;
    color: var(--button-6-text) !important;
    border-color: var(--button-6-bg) !important;
}

.button.outline.button_1 {
    color: var(--button-1-bg) !important;
}

.button.outline.button_2 {
    color: var(--button-2-bg) !important;
}

.button.outline.button_3 {
    color: var(--button-3-bg) !important;
}

.button.outline.button_4 {
    color: var(--button-4-bg) !important;
}

.button.outline.button_5 {
    color: var(--button-5-bg) !important;
}

.button.outline.button_6 {
    color: var(--button-6-bg) !important;
}

.button.outline.button_1:hover {
    background: var(--button-1-bg) !important;
    color: var(--button-1-text) !important;
}

.button.outline.button_2:hover {
    background: var(--button-2-bg) !important;
    color: var(--button-2-text) !important;
}

.button.outline.button_3:hover {
    background: var(--button-3-bg) !important;
    color: var(--button-3-text) !important;
}

.button.outline.button_4:hover {
    background: var(--button-4-bg) !important;
    color: var(--button-4-text) !important;
}

.button.outline.button_5:hover {
    background: var(--button-5-bg) !important;
    color: var(--button-5-text) !important;
}

.button.outline.button_6:hover {
    background: var(--button-6-bg) !important;
    color: var(--button-6-text) !important;
}


.product_1 .button_group .button {
    height: 3rem;
    width: 3rem;
    background: var(--button-2-bg);
    color: var(--button-2-text);
    display: grid;
    place-items: center;
    padding: 0 !important;
    border-radius: 50%;
}


.button.inner_btn_align {
    min-width: 100px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: .6rem 1rem !important;
    text-align: center;
    display: inline-block;
}

/* product desc */
.product_desc nav button.nav-link,
.tab_style_1 nav button.nav-link {
    border: 0;
    padding: 0.7rem 0;
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: var(--black) !important;
    border-bottom: 2px solid var(--border-1);
}

.product_desc nav button.nav-link.active,
.tab_style_1 nav button.nav-link.active {
    border-bottom: 2px solid var(--border-2);
    color: var(--border-2) !important;
}

.product_desc nav button.nav-link:hover,
.tab_style_1 nav button.nav-link:hover {
    border-bottom: 2px solid var(--border-2);
    color: var(--border-2) !important;
}


/* =========================about================== */
.column_list {
    display: grid;
    grid-template-columns: 10% auto;
    margin-bottom: 1rem;
    /* align-items: baseline; */
    /* grid-auto-flow: column; */
}

.column_list .icon {
    /* padding: .2rem; */
    color: var(--first-color);
    margin-right: 10px;
    border-radius: 50%;
    margin-top: .3rem;
    background: var(--light-first-color);
    height: 20px;
    width: 20px;
    /* text-align: center; */
    display: grid;
    place-items: center;
}

/* =================swiper============= */
.swiper-pagination {
    padding-top: 2rem;
}

.swiper-pagination .swiper-pagination-bullet {
    background-color: var(--header-top-bg);
    transform: scale(0.8);
}

.swiper-pagination.primary .swiper-pagination-bullet {
    background-color: var(--first-color);
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--white);
    border: 2px solid var(--first-color);
    transform: scale(1.3);
}

.swiper-pagination.primary .swiper-pagination-bullet-active {
    background-color: var(--white);
    border: 2px solid var(--first-color);
    transform: scale(1.3);
}

.swiper-pagination.dark .swiper-pagination-bullet-active {
    background-color: var(--white);
    border: 2px solid var(--first-color);
}

.swiper .button_nav {
    text-align: center;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.swiper .button-prev,
.button-next {
    height: 40px;
    width: 40px;
    background: var(--swiper-nav-bg) !important;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin: 20px 5px;
    transition: 0.3s ease;
    z-index: 1;
}

.swiper.other_color .button-prev,
.swiper.other_color .button-next {
    background: var(--swiper-nav-bg-2) !important;
}

.swiper.other_color .button-prev i,
.swiper.other_color .button-next i {
    color: var(--swiper-nav-color-2) !important;
}

.swiper .button-prev:hover,
.swiper .button-next:hover {
    opacity: 0.6;
}

.swiper .button-prev i,
.swiper .button-next i {
    font-size: 16px;
    color: var(--swiper-nav-color) !important;
}

.swiper .swiper-button-disabled {
    opacity: 0.3;
}

/* =================collapsed=========== */
.quest_title a.collapsed::before {
    content: '\f107';
}

.quest_title a::before {
    content: '\f106';
}

.quest_title a {
    font-size: var(--base-font);
    font-weight: var(--font-medium);
    padding-left: 1.5rem;
    color: var(--first-color);
}

.quest_title a:hover {
    color: var(--first-color) !important;
}

.quest_title a.collapsed {
    color: var(--text-title-color);
}

.quest_title a::before {
    position: absolute;
    font-family: 'FontAwesome';
    left: 0;
    color: var(--first-color);

}



/* ====================forms============== */
.form-check-input {
    height: 1.2rem;
    width: 1.2rem;
}

.form-check-input:focus {
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--form-check-1) !important;
    border-color: var(--form-check-1) !important;
    box-shadow: none;
}




.form-select {
    padding: .8rem 1.2rem;
    color: var(--text-color-lighter);
    box-shadow: 0 0 0px 1px var(--border-1);
    border: 0;
    font-size: 0.9rem;
}

.form-select:focus {
    box-shadow: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.form-select-sm {
    width: auto;
    max-width: 100%;
    border-radius: 10px;
    padding: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 2rem;

}


input.form-control,
textarea.form-control {

    border: 1px solid transparent;
    background: var(--white);
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
    background-color: var(--input-bg);

}

input.form-control {
    height: 50px !important;
    font-size: var(--small-font-size);

}

input.form-control:focus,
textarea.form-control:focus {
    box-shadow: none;
    border-color: var(--first-color);
}

.form-floating label {
    padding: 0.8rem 0.75rem;
    color: var(--text-color);
    font-size: var(--small-font-size);
}



.input-group {
    height: auto;

}

.input-group label {
    z-index: 5;
    opacity: 1;
    padding: 0.75rem !important;

}

.input-group input:focus {

    border: 1px solid var(--border-1);
}


.input-group button {
    margin-left: -5px;
    background: var(--first-color);
    padding: 0 1.2rem;
    border: 0;
    color: var(--white);
    font-weight: var(--font-semi-bold);
    transition: all 0.4s ease;
    border-radius: 10px;
    /* z-index: 10; */
}

.input-group input {
    height: auto;
    /* border: 0; */
    outline: 0;
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
    height: 100%;
    border-radius: 10px 0 0 10px;

}
.form-floating.dark input {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-dark);
    color: var(--text-color);
}


/* =====================testimonial============== */
.testimonials .blockquote {
    font-size: 4rem;
    color: var(--text-color-lighter);
    position: absolute;
    mix-blend-mode: multiply;
    top: .3rem;
    left: auto;
    opacity: 0.2;
}

.testimonials .position{
    color: var(--text-color-lighter); 
    font-size: 14px;
}


.testimonials .testimonial_color .testimonial_box .text_desc{
    color: var(--testimonial-color);
}

.testimonials .testimonial_color .testimonial_box .sub_title{
    color: var(--testimonial-color);
}

.testimonials .testimonial_color .testimonial_box .position{
    color: var(--testimonial-color);
}



/* ========================== alert================ */

.alert_1 {
    background: rgba(var(--alert-1), 0.07);
    color: rgb(var(--alert-1));
}

.alert_2 {
    background: rgba(var(--alert-2), 0.07);
    color: rgb(var(--alert-2));
}

.alert_3 {
    background: rgba(var(--alert-3), 0.07);
    color: rgb(var(--alert-3));
}

.alert_4 {
    background: rgba(var(--alert-4), 0.07);
    color: rgb(var(--alert-4));
}

.alert_5 {
    background: rgba(var(--alert-5), 0.07);
    color: rgb(var(--alert-5));
}

.alert_6 {
    background: rgba(var(--alert-6), 0.07);
    color: rgb(var(--alert-6));
}







/* ============================ progress color================ */
.progress_color_1 {
    background: var(--progress-color-1);
}

.progress_color_2 {
    background: var(--progress-color-2);
}

.progress_color_3 {
    background: var(--progress-color-3);
}

.progress_color_4 {
    background: var(--progress-color-4);
}

.meter .style_1 .progresser.progress_color_1 .mask {
    stroke: var(--progress-color-light-1) !important;
 }
 .meter .style_1 .progresser.progress_color_1 .low {
    stroke: var(--progress-color-1) !important;
 }
 .meter .style_1 .progresser.progress_color_2 .mask {
    stroke: var(--progress-color-light-2) !important;
 }
 .meter .style_1 .progresser.progress_color_2 .low {
    stroke: var(--progress-color-2) !important;
 }
 .meter .style_1 .progresser.progress_color_3 .mask {
    stroke: var(--progress-color-light-3) !important;
 }
 .meter .style_1 .progresser.progress_color_3 .low {
    stroke: var(--progress-color-3) !important;
 }
 .meter .style_1 .progresser.progress_color_4 .mask {
    stroke: var(--progress-color-light-4) !important;
 }
 .meter .style_1 .progresser.progress_color_4 .low {
    stroke: var(--progress-color-4) !important;
 }
 .meter .style_1 .progresser .mask{
     stroke: var(--light-first-color) !important;
 }
 .meter .style_1 .progresser .low{
     stroke: var(--first-color) !important;
 }
 .meter .style_1 .progresser{
     background: none;
 }
 
 
 


/* ================pagination============== */

.pagination .page-link {
    width: 3rem;
    height: 3rem;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    display: grid;
    place-items: center;
    color: var(--pagination-color);
    background: var(--white) !important;
    border: 1px solid var(--border-1) !important;
}

.pagination .page-item:hover .page-link {
    color: var(--first-color);
    background: var(--white);
}

.pagination .page-item.active .page-link {
    color: var(--first-color);

}

.input_search {
    position: relative;
    /* padding-right: 1rem; */
}

.input_search input {
    height: 100%;
    width: 100%;
    padding: 0 2rem;
    border: 0;
    outline: 0;
    color: var(--text-color);

}

.input_search::before {
    position: absolute;
    content: '\f002';
    font-family: 'FontAwesome';
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--h3-font-size);
    color: var(--text-color);
}

.close_btn {
    cursor: pointer;
    background: var(--text-color-lighter);
    color: var(--white);

}

/* carts */
.cart_products .product_info {
    display: flex;
    gap: 1rem;
}

.cart_products .product_info figure {
    margin-bottom: 0;
}

.cart_products img {
    width: 100px;
}



/* filter */
.products_1 .filters ul li a {
    color: var(--text-color);
}

/* product page */




.product_data figure .inner_button {
    position: absolute;
    bottom: 1rem;
    right: 0;
    opacity: 0;
    transition: all 400ms ease;
}

.product_data figure .inner_button .icon {
    height: 2.7rem;
    width: 2.7rem;
    background: var(--button-2-bg);
    color: var(--button-2-text);
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.product_data figure:hover .inner_button {
    right: 1rem;

    opacity: 1;
}

.product_data .size_box div {
    background: var(--mute-color);
    color: var(--text-color);
    cursor: pointer;
}


.product_data .color_box .icon_box {
    cursor: pointer;
    border: 2px solid var(--white);
    height: 2rem;
    width: 2rem;
}

.product_data ul li {
    position: relative;
}

.product_data ul li input[type="radio"] {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    appearance: none;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.product_data .color_box input[type="radio"]:checked~div {
    /* background: var(--white) !important; */
    box-shadow: 0 0 0 4px var(--i);
}

.product_data .size_box input[type="radio"]:checked~div {
    background: var(--active-color);
    color: var(--white);
}

.p-color-1 {
    background-color: var(--p-color-1);
}

.p-color-2 {
    background-color: var(--p-color-2);
}

.p-color-3 {
    background-color: var(--p-color-3);
}

.p-color-4 {
    background-color: var(--p-color-4);
}


/* ========================sign in================== */
.see_pass {
    position: absolute;
    top: 50%;
    z-index: 50;
    right: 1rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color);
}

.side_line {
    position: relative;
    /* font-size: var(--); */
    color: var(--title-color-2);
}

.side_line::before,
.side_line::after {
    position: absolute;
    content: '';
    top: 50%;
    height: 1px;
    width: calc(50% - 2rem);
    transform: translateY(-50%);
    background: var(--border-1);
    opacity: 0.3;
}

.side_line::after {
    right: 0;
}

.side_line::before {
    left: 0;
}



.sign_in .wrapper::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--white);
    opacity: 0.5;
    z-index: -1;
}

/* =======terms=========== */
.terms .sticky_top {
    position: sticky;
    height: 100%;
    top: 0;
}



/* =============comments================ */
.comments ul.child>li {
    padding-left: 3rem;
    position: relative;
}





/* =================meter============== */

.meter .style_1 {
    height: 100px;
    width: 100%;
    overflow: hidden;
  position: relative;
}

.meter .style_1 .progresser {
    transform: rotate(180deg); 
    height:100%;
    width: 100%;
}

.meter .style_1  .content {
    position: absolute;
    bottom: -.5rem;
    left: 0;
    width: 100%;
    background: transparent;
    color: var(--title-color-1);

}

.meter .style_1 .progresser .content span {
    text-align: center;
    display: block;
    margin-top: 50px;
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);

}

.meter {
    width: 245px;
}



@media screen and (min-width:992px) {

    .comments ul.child>li::before {
        content: '\4c';
        opacity: 0.1;
        top: -2rem;
        left: 1rem;
        position: absolute;
        font-size: var(--big-font-size);
    }
}

/* ==================animation ==================*/
@keyframes top_down {
    from {
        transform: translateY(-50px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes zoom {
    from {
        transform: scale(0.3);
        opacity: 1;
    }

    to {
        transform: scale(1);
        opacity: 0;
    }
}


/* ================loader========= */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50px;
    width: 50px;
    content: '';
    transform: translate(-50%, -50%);
}

.loader div {
    animation: zoom 1.2s infinite;
    height: 100%;
    width: 100%;
    border: 4px solid var(--loader-color);

    border-radius: 100%;
}

/* ===========lightbox desc============= */
.glightbox-clean .gslide-title,
.gdesc-inner {
    color: var(--white);
}

.glightbox-clean .gslide-description {
    background: transparent;
    text-align: center;
}


/* =====================side buttons=============== */
.side_button {
    position: fixed;
    z-index: 10;
    top: 30%;
    /* left: 0; */
}

.side_button.left {
    left: 0 !important;
}

.side_button.right {
    right: 0 !important;
}

/* ================single project============== */
.single_project .swiper-slide .caption {
    display: none;
}

.single_project .swiper-slide-active .caption {
    display: block;
}

.TeamBlock .swiper-slide{
    height: auto;
}


.single_project .caption {
    position: absolute;
    height: auto;
    width: auto;
    background: var(--white);
    padding: 1rem;
    animation: faderAnim 3s forwards;
}

.single_project .caption.bottom_left {
    left: 3rem;
    bottom: 3rem;
}

.single_project .caption.bottom_right {
    right: 3rem;
    bottom: 3rem;
}

.single_project .caption.top_left {
    left: 3rem;
    top: 3rem;
}

.single_project .caption.top_right {
    right: 3rem;
    top: 3rem;
}

.single_project .caption.top_center {
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
}

.single_project .caption.bottom_center {
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
}

/* ===========================video================= */
.in_video video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
}

.in_video video.play {
    z-index: 1;
}

/* ===============================video play button =============================== */
.play_button.hide {
    visibility: hidden !important;
}

.play_button.show {
    visibility: visible;
}

.play_button {
    background: var(--first-color);
    height: 4rem;
    width: 4rem;
    font-size: var(--h2-font-size);
    border: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: var(--white);
    z-index: 3;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
    /* border: 1px solid; */
}

.play_button:hover {
    color: var(--white) !important;
}

.plyr__control--overlaid {
    height: 4rem;
    width: 4rem !important;
    display: grid !important;
    place-items: center;
}

.play_button::before,
.plyr__control--overlaid::before {
    position: absolute;
    content: '';
    top: 0;
    height: 100%;
    width: 100%;
    transform: scale(1.4);
    background-color: var(--first-color);
    z-index: -1;
    border-radius: 50%;
    animation: scale2 2s infinite;
}

.play_button::after,
.plyr__control--overlaid::after {
    position: absolute;
    content: '';
    top: 0;
    height: 100%;
    width: 100%;
    transform: scale(1.4);
    background-color: var(--first-color);
    z-index: -1;
    border-radius: 50%;
    animation: scale 3s infinite;
}

.play_button.color_2::before,
.play_button.color_2:after,
.play_button.color_2 {
    background: var(--white);
    color: var(--black);
}

.play_button.color_2:hover,
.plyr__control--overlaid:hover {
    color: var(--first-color) !important;
}

.plyr__control--overlaid,
.plyr__control--overlaid::after,
.plyr__control--overlaid::before {
    background-color: var(--white) !important;
    color: var(--black);
}

@keyframes scale {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes scale2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* ===================progress wrap==================== */

.progress-wrap {
    position: fixed;
    bottom: 40px;
    right: 40px;
    height: 40px;
    width: 40px;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    cursor: pointer;
    border-radius: 50px;

    z-index: 1000;
    display: block;
    visibility: hidden;
    background: transparent;
    opacity: 0;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: '\f062';
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
    color: var(--first-color);
    z-index: 1;
    display: block;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}



.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--first-color);
    stroke-width: 5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}


/* ================hero fader ========= */
.fader-title {
    opacity: 0;
    animation: faderAnim 2.5s infinite;
}

@keyframes faderAnim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =====key farems =========*/

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}


/*-------product------*/

.product_data .tab-content .tab-pane.video_cols iframe{
    height: 300px;
    width: 100%;
 }
 .product_data .swiper.product_video_slides iframe{
   min-height: 400px;
 }
 
 
 .product_data .holder {
     width:100%;
     height: 100%;
     position: relative;
   }
   
  .modal_frame {
     width: 100%;
     min-height: 400px
   }
   .modal_frame iframe{
     height: 100%;
     width: 100%;
   }
   
   .product_data .holder .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
   }


/* for team */
.w_10rem{
    width:10rem;
    }
    
    .w_5rem{
    width:5rem;
    }
    
   


    blockquote {
        border-left: 0.2rem solid  var(--first-color);
        padding-left: 1rem;
        font-size: 17px;
        line-height: 1.7;
        font-weight: 500;
        background: #f7f7f8;
        padding: 10px;
    }

    .text-bold{
        font-weight: bold;
    }

    .certificate_img
    {
        max-width: 600px;
        max-height: 480px;
    }


    /*----- prodcut style 2------------*/

.product_style_2 .product_thumb{
    transition: all 300ms ease;
}

.product_style_2 .product_thumb:hover{
    box-shadow: 0 .25rem 1.75rem rgba(30, 34, 40, .07);
    padding: 1rem;
}

.thumb-title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 28px;
}

.newPrice{
    color: var(--first-color);
}

.mh-45{
    min-height: 45px;
}

.mh-40{
    min-height: 40px;
}

figure.supplier:hover .overlay {
    opacity: 0.6;
  }


.supplier-title{
    color: var(--light-first-color) !important;
}

.mw-300{
    max-width: 300px;
}

.supplier-logo{
    float: left;
    padding: 0px 10px 0px 10px;
}

.supplier_data  iframe {
    height: 300px;
    width: 100%;
  }


  figure.customer{
    margin: 0px;
  }


  figure.customer:hover .overlay {
    opacity: 0.6;
    color: var(--light-first-color) !important;
  }

  figure.customer a {
    color: var(--light-first-color) !important;
  }

  .customer .button{
    padding: 5px 10px !important;
  }

  
  figure.client{
    margin: 0px;
  }


  figure.client:hover .overlay {
    opacity: 0.6;
    color: var(--light-first-color) !important;
  }

  figure.client a {
    color: var(--light-first-color) !important;
  }

  

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    list-style: none;
    background-color: none;
    border-radius: 0;
  }
  .breadcrumb-item {
    display: flex;
    color: var(--light-first-color);
  }
  .breadcrumb-item a {
    color: var(--first-color);

  }
  .breadcrumb-item a:hover {
    color: var(--main-menu-text-hover);
  }
  .breadcrumb-item+.breadcrumb-item {
    padding-left: 0.5rem;
  }
  .breadcrumb-item+.breadcrumb-item::before {
    font-family: 'FontAwesome';
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
    color: rgba(96, 105, 123, 0.35);
    content: '\f0da';
    font-size: 0.75rem;
    padding-top: 0.1rem;
  }

  .text-right {
    text-align: right !important;
  }


.three-line-trim-block{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 28px;
}


.error {
    color: var(--error);
    padding: 5px;
    font-size: 15px;
    font-style: italic;
  }

  
/*-loading spinner---------------------*/


.module-loading {
    background: #ffffffcf;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: block;
    min-height: 200px;
    max-height: 100%;
    text-align: center;
    border-radius: 10px;
}

.loading-state {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #f9f9f9f0;
    z-index: 10;
    top: 0px;
    left: 0px;
    text-align: center;;
}


.spinner-area{
    top: 35%;
    position: relative;
    display: block;
    font-weight: bold;
    color: #21262c;
}

.loading-state .spinner-area{
    top: 45%;
    position: relative;
    display: block;
    font-weight: bold;
    color: #21262c;
}

.pr-cart-item .spinner-area{
    top: 35%;
}


.la-line-scale,
.la-line-scale > div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-line-scale {
    display: block;
    font-size: 0;
    color: var(--first-color);
}

.la-line-scale > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-line-scale {
    height: 32px;
}
.la-line-scale > div {
    width: 4px;
    height: 32px;
    margin: 2px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-animation: line-scale 1.2s infinite ease;
       -moz-animation: line-scale 1.2s infinite ease;
         -o-animation: line-scale 1.2s infinite ease;
            animation: line-scale 1.2s infinite ease;
}
.la-line-scale > div:nth-child(1) {
    -webkit-animation-delay: -1.2s;
       -moz-animation-delay: -1.2s;
         -o-animation-delay: -1.2s;
            animation-delay: -1.2s;
}
.la-line-scale > div:nth-child(2) {
    -webkit-animation-delay: -1.1s;
       -moz-animation-delay: -1.1s;
         -o-animation-delay: -1.1s;
            animation-delay: -1.1s;
}
.la-line-scale > div:nth-child(3) {
    -webkit-animation-delay: -1s;
       -moz-animation-delay: -1s;
         -o-animation-delay: -1s;
            animation-delay: -1s;
}
.la-line-scale > div:nth-child(4) {
    -webkit-animation-delay: -.9s;
       -moz-animation-delay: -.9s;
         -o-animation-delay: -.9s;
            animation-delay: -.9s;
}
.la-line-scale > div:nth-child(5) {
    -webkit-animation-delay: -.8s;
       -moz-animation-delay: -.8s;
         -o-animation-delay: -.8s;
            animation-delay: -.8s;
}
.la-line-scale.la-sm {
    width: 20px;
    height: 16px;
}
.la-line-scale.la-sm > div {
    width: 2px;
    height: 16px;
    margin: 1px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale.la-2x {
    width: 80px;
    height: 64px;
}
.la-line-scale.la-2x > div {
    width: 8px;
    height: 64px;
    margin: 4px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale.la-3x {
    width: 120px;
    height: 96px;
}
.la-line-scale.la-3x > div {
    width: 12px;
    height: 96px;
    margin: 6px;
    margin-top: 0;
    margin-bottom: 0;
}





/*
 * Animation
 */
@-webkit-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@-moz-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
           -moz-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
           -moz-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@-o-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
             -o-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
             -o-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
           -moz-transform: scaleY(.4);
             -o-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
           -moz-transform: scaleY(1);
             -o-transform: scaleY(1);
                transform: scaleY(1);
    }
}



   .password-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #959ca9;
  }

  /* for scroll bar fix */
/* for scroll bar fix */
body > section {
    overflow-x: hidden;
    overflow-y: hidden;
}

div {
    /* overflow-y: hidden;
    overflow-x: hidden; */
}


 /* in chrome overflowing */
 section{
    /* overflow-x:hidden; */
   }


.top-15{
    top:15%;
}


.relative {
    position: relative;
}

.line1{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.line2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line3{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.mh-55{
    min-height: 55px;
}

.mh-97{
    min-height: 97px;
}

.mh-100{
    min-height: 100px;
}

.fs-7{
    font-size: 1.15rem !important
}


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

.fs-9{
    font-size: .9rem !important
}


.fs-10{
    font-size: .75rem !important
}

.text-capitalize{
    text-transform: capitalize;
}

.text-italic{
    font-style: italic;
}
.cur-pointer{
    cursor: pointer;
}


.in-block{
    display: inline-block;
}

.fs-14{
  font-size: 14px;
}



@media (min-width: 992px){
           
    ._5-cols-lg{
        width: 20%;
        flex: 0 0 auto;
    }
}
@media (min-width: 1200px){
    
    ._5-cols-xl{
        width: 20%;
        flex: 0 0 auto;
    }
}
@media (min-width: 1400px){
    ._5-cols-xxl{
        width: 20%;
        flex: 0 0 auto;
    }
}




@media  screen and (max-width: 990px) {
    .footer-text{
        text-align: center !important;
       }
  }


.product_cat_dummy_image{
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
    background: #f7f7f8;
    font-style: italic;
    position: relative;
    display: inline-block;
}


.meber-quote {
    font-size: 14px;
    font-style: italic;
    color: #ccc;
  }

  .center{
    text-align: center;
  }

  .justify-content-right {
    justify-content: right !important;
  }

  .justify-content-left {
    justify-content: left !important;
  }

  .col-xl-12 .column_list{
    grid-template-columns: 25px auto !important;
  }

  .sub-title-box-left {
    padding: 0px;
    padding-right: 10px;
    border-bottom: 3px solid var(--first-color);
    text-transform: uppercase;
  }

  .sub-title-box-center {
    padding: 0px 20px;
    border-bottom: 3px solid var(--first-color);
    text-transform: uppercase;
  }

  .lh-40{
    line-height: 40px !important;
  }

@media (min-width: 768px)
{
.justify-content-md-right {
  justify-content: right !important;

}

.justify-content-md-left {
    justify-content: left !important;
  
  }


}