
:root {
    /* ================= Body ================= */

    /*--body_font_family: "Poppins", sans-serif;*/
    --body_font_family: 'Poppins';
    
    --body_font_size: 18px;
    --body_line_height: 1.2;
    --body_color: #000000;
    --body_bg_color: #f06e0636;

    /* ================= Paragraph ================= */

    /*--pera_font_family: "Poppins", sans-serif;*/
    --pera_font_family:'Poppins';
    --peraSize: 18px;
    --pera_line_height: 1.5;

    --peraColor1: #000000;
    --peraColor2: #ffffff;
    --peraColor3: #321104;
    --peraColor4: #f06e06;
    --peraColor5: #444444;
    --peraColor6: #6aa539;

    /* ================= Headings ================= */

    /*font-family: "Kaushan Script", cursive;*/

    /*--heading_font_family: "Montserrat", sans-serif;*/
    /*--heading_font_family1: "Sofadi One", system-ui;*/

    --heading_font_family: 'Montserrat';
    --heading_font_family1: 'Sofadi One';    

    --h1_size: 48px;
    --h2_size: 40px;
    --h3_size: 36px;
    --h4_size: 30px;
    --h5_size: 24px;
    --h6_size: 18px;

    --heading_line_height: 1.3;

    --headingColor1: #000000;
    --headingColor2: #ffffff;
    --headingColor3: #321104;
    --headingColor4: #f06e06;
    --headingColor5: #6aa539;

    /* ================= Buttons ================= */

    --button_font_family: "Poppins", sans-serif;
    --button_size: 16px;
    --button_line_height: 1;

    --buttonColor1: #000000;
    --buttonColor2: #ffffff;
    --buttonColor3: #321104;

    --button_bg1: #000000;
    --button_bg2: #ffffff;
    --button_bg3: #321104;
    --button_bg4: #f06e06;
    --button_bg5: #321104;

    --buttonHover_bg1: #000000;
    --buttonHover_bg2: #ffffff;
    --buttonHover_bg3: #6c2805;
    --buttonHover_bg4: #e06b2f;
    --buttonHover_bg5: #321104;

    /* ================= Background Color ================= */

    --bgColor1: #000000;
    --bgColor2: #ffffff;

    --bgColor3: #321104;
    --bgColor4: #f06e06;
    --bgColor5: #6aa539;

    --transition: all 0.2s ease;

    --gap50: 50px;
    --gap40: 40px;
    --gap30: 30px;
    --gap25: 25px;
    --gap20: 20px;
    --gap15: 15px;
    --gap10: 10px;

    --activeColor: #e06b2f;

    --hoverColor1: #000000;
    --hoverColor2: #ffffff;
    --hoverColor3: #321104;
    --hoverColor4: #f06e06;

    --container_width: 1630px;

    --box_shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

    --customSize18: 18px;
    --customSize16: 16px;

    /* ================= Header Color ================= */

    --header_menu_color1: #000000;
    --header_menu_color2: #ffffff;
    --header_menu_color3: #321104;
    --header_menu_color4: #f06e06;

    --header_menu_hover1: #000000;
    --header_menu_hover2: #ffffff;
    --header_menu_hover3: #321104;
    --header_menu_hover4: #f06e06;

    --header_bg1: #000000;
    --header_bg2: #ffffff;
    --header_bg3: #321104;
    --header_bg4: #f06e06;
}

/*============*/

/*html {
scroll-behavior: smooth;
}
*/

body {
    font-family: var(--body_font_family);
    font-size: var(--body_font_size);
    line-height: var(--body_line_height);
    color: var(--body_color);
    /*    background-color: var(--body_bg_color);*/
    background-color: #efeff1;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: var(--container_width);
    width: 100%;
    margin: auto;
    padding: 0 15px;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

/* Paragraph */

p,
label {
    font-family: var(--pera_font_family);
    font-size: var(--peraSize);
    line-height: calc(var(--peraSize) * var(--pera_line_height));
    /*line-height: var(--pera_line_height);*/
    color: var(--peraColor5);
    font-weight: 400;
    margin-bottom: 15px;
    overflow-wrap: break-word;
}

label {
    margin-bottom: 5px;
}

li,
input,
textarea,
option,
select {
    font-family: var(--pera_font_family);
    font-size: var(--peraSize);
    /*line-height: calc(var(--peraSize) * var(--pera_line_height));*/
    line-height: var(--pera_line_height);
    color: var(--peraColor1);
    font-weight: 400;
}

option,
select {
    outline: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 7px 40px 7px 12px;
    border: 1px solid #ddd;
    background: url("../images/icons/select_arrow.png") no-repeat right 10px center;
    background-size: 20px;
}

li {
    font-size: var(--peraSize);
    line-height: calc(var(--peraSize) * var(--pera_line_height));
}

li:last-child {
    margin-bottom: 0;
}

p:last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading_font_family);
    color: var(--headingColor3);
    line-height: var(--heading_line_height);
    text-transform: capitalize;
    margin-bottom: 15px;
    overflow-wrap: break-word;
    font-weight: 700;
}

h1 {
    font-size: var(--h1_size);
}
h2 {
    font-size: var(--h2_size);
}
h3 {
    font-size: var(--h3_size);
}
h4 {
    font-size: var(--h4_size);
}
h5 {
    font-size: var(--h5_size);
}
h6 {
    font-size: var(--h6_size);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

a:focus-visible,
a:focus,
img:focus-visible,
img:focus {
    outline: none;
}

a:hover {
    /*color: var(--primary-color);*/
}

.btn_box {
    margin-top: 15px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.custom_btn {
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: capitalize;
    border: none;
    padding: 14px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    text-align: center;

    font-size: var(--button_size);
    font-family: var(--button_font_family);
    background-color: var(--button_bg5);
    color: var(--buttonColor2);
    line-height: var(--button_line_height);
}

.custom_btn:hover {
    background-color: var(--button_bg4);
    color: var(--buttonColor2);
}

.custom_btn1 {
    background-color: var(--button_bg4);
    color: var(--buttonColor2);
}

.custom_btn1:hover {
    background-color: var(--buttonHover_bg5);
    color: var(--buttonColor2);
}

.custom_btn2 {
    background-color: var(--button_bg2);
    color: var(--buttonColor3);
}

.custom_btn2:hover {
    background-color: var(--buttonHover_bg4);
    background-color: var(--buttonHover_bg5);
    color: var(--buttonColor2);
}

.custom_btn img {
    width: 11px;
    display: inline-block;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(175deg) brightness(105%)
    contrast(102%);
}

.custom_btn.custom_btn1 img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(175deg) brightness(105%)
    contrast(102%);
}

.custom_btn.custom_btn2 img {
    filter: none;
}


.custom_btn:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(4228%) hue-rotate(183deg) brightness(111%)
    contrast(103%);
}

.custom_space_100 {
    padding: 80px 0;
}

.custom_pb_space_100 {
    padding-bottom: 80px;
}
.custom_pt_space_100 {
    padding-top: 80px;
}

.custom_space_50 {
    padding: 50px 0;
}
.custom_pb_space_50 {
    padding-bottom: 50px;
}
.custom_pt_space_50 {
    padding-top: 50px;
}

/*.pt_50 {padding-top: 50px;}*/




.margin_100{margin: 80px 0;}
.mb_100{margin-bottom: 80px;}
.mt_100{margin-top: 80px;}



.custom_heading {
    margin-bottom: 35px;
    text-align: center;
}
.custom_heading p {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-transform: capitalize;
}

.custom_heading h2 {
    display: inline-block;
    align-items: center;
    text-transform: capitalize;
    margin-bottom: 10px;
    width: 100%;
}

.custom_heading h2 span {
    color: var(--headingColor5);
    font-family: var(--heading_font_family1);
    font-size: calc(var(--h1_size) + 5px);
    border-bottom: 2px solid currentColor;
}
/* top to bottom css End */

#scrollTopBtn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 99;
    background: linear-gradient(135deg, #e06b2f, #f08d3f);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    font-size: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
    transition: var(--transition);
    display: none;
}

#scrollTopBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

#scrollTopBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* top to bottom css End */
.innertopbanner {
    padding-top: 30px ;
}

.innertopbanner_breadcrumb {
    padding: 13px 15px;
    border-radius: 0;
    background: #f5f5f5;
    background: #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.innertopbanner_breadcrumb li {
    font-size: var(--customSize16);
    color: var(--hoverColor3);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
}
.innertopbanner_breadcrumb li:first-child a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.innertopbanner_breadcrumb li:first-child a::before {
    content: "";
    background: url(../images/icons/home_icon.png);
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 5px;
    margin-top: -3px;
}

.innertopbanner_breadcrumb li a {
    color: var(--peraColor4);
    text-decoration: none;
}

.innertopbanner_breadcrumb li a:hover {
    color: var(--hoverColor1);
}

.innertopbanner_breadcrumb li:first-child a:hover::before {
    filter: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(7475%) hue-rotate(349deg) brightness(104%)
    contrast(105%);
}

.innertopbanner_breadcrumb li + li:before {
    padding: 0 3px;
    content: "/\00a0";
    color: var(--peraColor1);
    font-size: 13px;
    font-weight: 500;
}

/* Breadcrum End*/

.slick-slide {
    margin: 0 15px; /* left-right gap */
}

.slick-list {
    margin: 0 -15px; /* extra outer space remove karne ke liye */
}

.product_wrapper {
    /*   padding-left: 25px;
    padding-right: 25px;*/
}

.slick-next,
.slick-prev {
    font-size: 0;
    width: 45px;
    height: 45px;
    z-index: 9;
    background-color: #fff;
    border-radius: 45px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.slick-next {
    background-image: url(../images/icons/btn_arrow1.png);
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    right: 0;
}

.slick-prev {
    background-image: url(../images/icons/btn_arrow1.png);
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    left: 0;
}

.slick-next:focus,
.slick-next:hover {
    background-image: url(../images/icons/btn_arrow1_white.png);
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bgColor4);
}

.slick-prev:focus,
.slick-prev:hover {
    background-image: url(../images/icons/btn_arrow1_white.png);
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bgColor4);
}

.slick-next:before,
.slick-prev:before {
    font-size: 0;
    display: none;
}

.slick-prev.slick-disabled {
    display: none;
}

/* Slick Slider dots start */

.slick-dots {
    bottom: -40px;
    line-height: 0;
}

.slick-dots li {
    height: 15px;
    width: 15px;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 50px;
}
.slick-dots li.slick-active {
    background-color: var(--bgColor4);
    border: 2px solid var(--bgColor4);
}
.slick-dots li button {
    display: none;
}
.slick-dots li button:before {
    display: none;
}

.slick-dotted.slick-slider {
    margin-bottom: 40px;
}

/* Slick Slider dots End */

/* Separator Start */

.heading_separator {
    width: 120px;
    height: 4px;
    background: #ffffff;
    margin: 18px auto;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.heading_separator span {
    position: absolute;
    left: -40px;
    top: 0;
    width: 40px;
    height: 100%;
    background: #ff7a00;
    border-radius: 50px;
    animation: lineMove 2s infinite linear;
}

@keyframes lineMove {
    0% {
        left: -40px;
    }
    100% {
        left: 120px;
    }
}
/* Separator End */

.inner_comman_bg {
    background-image: url(../images/bg8.1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
}



input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder  {
  font-size: 16px;
  text-transform: capitalize;
}

input:focus::placeholder,
textarea:focus::placeholder{
    opacity:0.5;
    transition: 0.2s all;
}


/* ===== Scrollbar CSS Start ===== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #f06e06 #f5f5f5;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: #f5f5f5;
}

*::-webkit-scrollbar-thumb {
    background-color: #f06e06;
    border-radius: 10px;
    border: 2px solid #ffffff;
}

/* ===== Scrollbar CSS End ===== */

/*================( Comman Css End )==================*/
/*================( Comman Css End )==================*/
/*================( Comman Css End )==================*/

@media only screen and (max-width: 1500px) {
    :root {
        --h1_size: 40px;
        --h2_size: 40px;
        --h3_size: 36px;
        --h4_size: 24px;
        --h5_size: 20px;
        --h6_size: 18px;
    }

    .custom_space_100 {padding: 50px 0;}        
    .custom_pb_space_100 {padding-bottom: 50px;}        
    .custom_pt_space_100 {padding-top: 50px;}


    .margin_100{margin: 50px 0;}
    .mb_100{margin-bottom: 50px;}
    .mt_100{margin-top: 50px;}


    .slick-slide {margin: 0 7px;}    
    .slick-list {margin: 0 -7px;}

}

@media only screen and (max-width: 768px) {
    :root {
        --h1_size: 30px;
        --h2_size: 30px;
        --h3_size: 26px;
        --h4_size: 22px;
        --h5_size: 20px;
        --h6_size: 18px;

        --gap50: 15px;
        --gap40: 15px;
        --gap30: 15px;
        --gap25: 15px;
        --gap20: 15px;

        --customSize18: 16px;
        --customSize16: 16px;

        --button_size: 14px;
        --button_line_height: 1.2;

        --peraSize: 16px;
        --pera_line_height: 1.5;

        --body_font_size: 16px;
    }

    .custom_space_100 {padding: 30px 0;}        
    .custom_pb_space_100 {padding-bottom: 30px;}        
    .custom_pt_space_100 {padding-top: 30px;}

    .custom_space_50 {padding: 30px 0;}    
    .custom_pb_space_50 {padding-bottom: 30px;}        
    .custom_pt_space_50 {padding-top: 30px;}


    .margin_100{margin: 30px 0;}
    .mb_100{margin-bottom: 30px;}
    .mt_100{margin-top: 30px;}

    /*.pt_50 {padding-top: 30px;}*/


    .btn_box {margin-top: 15px;}        
    .custom_btn {padding: 10px 15px;}
    #scrollTopBtn {width: 40px;height: 40px;}
    .innertopbanner_breadcrumb {padding: 8px 15px;}
    .innertopbanner {padding-top: 15px;}
    
    .custom_heading{margin-bottom: 25px;}


}

@media only screen and (max-width: 576px) {
    :root {
        --h1_size: 26px;
        --h2_size: 26px;
    }

    #scrollTopBtn {
        bottom: 35px;
        right: 10px;
        width: 34px;
        height: 34px;
    }
}
