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

:root {
    /* font weight */
    --regular: 400;
    --medium: 500;
    --semiBold: 600;
    --bold: 700;
    --primary_color: #FD853A;
    --secondary_color: #ffffff;

    /* color */
    --color1: #ffffff;
    --color2: #171717;
    --color3: #2B2A2A;
    --color4: #FD853A;
    --color5: #646464;
    --color6: rgba(196, 196, 196, 0.06);
    --color7: #868686;
    --color8: #F7F7F7;
    --color9: #545454;
    --color10: #000000;
    --color11: #F8F8F8;
    --color12: #FD6F00;
    --color13: #EBEBEB;
    --color14: #121212;
    --color15: #333333;
    --color16: #DDDDDD;
    --color17: #555555;


    --overlay1: rgba(0, 0, 0, .6);

    --shadow1: 0 1px 0 0 var(--color13);
    --shadow2: 0 0 3px 0 var(--color13);

    --section_title_color: var(--color1);
    --section_description_color: var(--color7);
    --btn_color: var(--color1);



    /* start header variable */
    --header_bg_color: var(--color2);
    --sidebar_bg_color: var(--color2);
    --sidebar_menu_color: var(--color1);
    --sidebar_overlay_color: var(--overlay1);
    --sidebar_menu_border_color: var(--color3);
    /* end header variable */

    /* start hero banner variable */
    --hero_btn_color: var(--color2);
    --hero_btn_border_color: var(--color2);

    --hero_title_color: var(--color2);
    --hero_title_highlighted_color: var(--color4);

    --hero_qoute_lead_text_color: var(--color5);
    --hero_exprience_highlighted_text_color: var(--color2);
    /* end hero banner variable */

    /* start service variable */
    --service_section_bg_color: var(--color2);
    --service_section_title_color: var(--color1);
    --service_section_description_color: var(--color7);

    --service_card_bg_color: var(--color6);
    --service_card_title_color: var(--color1);
    --service_card_description_color: var(--color7);
    /* end service variable */

    /* start featured products variable */
    --featured_product_section_bg_color: var(--color2);

    --featured_product_card_title_color: var(--color1);
    --featured_product_card_regular_price_color: var(--color4);
    --featured_product_card_compare_price_color: var(--color7);

    --featured_product_card_btn_color: var(--color1);
    --featured_product_card_btn_bg_color: var(--color4);
    --featured_product_card_btn_border_color: var(--color1);
    /* end featured products variable */

    /* start working process variable */
    --working_process_container_bg_color: var(--color8);
    --working_process_section_title_color: var(--color2);
    --working_process_section_description_color: var(--color7);

    --working_process_step_card_title_color: var(--color2);
    --working_process_step_card_description_color: var(--color7);
    /* end working process variable */

    /* start public cheers for us variable */
    --public_cheers_section_bg_color: var(--color2);
    --public_cheers_section_title_color: var(--color1);
    --public_cheers_section_description_color: var(--color7);

    --public_cheers_card_title_color: var(--color1);
    --public_cheers_card_lead_text_color: var(--color7);
    /* end public cheers for us variable */

    /* start portfolio variable */
    --portfolio_section_bg_color: var(--color1);
    --portfolio_section_title_color: var(--color2);
    --portfolio_section_description_color: var(--color7);

    --portfolio_filter_btn_bg_color: var(--color11);
    --portfolio_filter_btn_text_color: var(--color10);
    --portfolio_filter_btn_border_color: var(--color9);
    --portfolio_active_filter_btn_bg_color: var(--color4);
    --portfolio_active_filter_btn_text_color: var(--color1);

    --portfolio_card_title_color: var(--color12);
    --portfolio_card_sub_title_color: var(--color2);
    /* end portfolio variable */

    /* start resume variable */
    --resume_section_bg_color: var(--color1);
    --resume_section_title_color: var(--color2);
    --resume_section_description_color: var(--color7);
    --resume_skill_common_title_color: var(--color2);

    --resume_skill_bg_color: var(--color8);
    --resume_skill_text_color: var(--color2);
    --resume_skill_text_left_border_color: var(--color4);
    --resume_qualification_counter_bg_color: var(--color4);
    --resume_qualification_counter_text_color: var(--color1);

    --resume_qualification_duration_bg_color: var(--color1);
    --resume_qualification_duration_border_color: var(--color13);
    --resume_qualification_duration_text_color: var(--color2);

    --resume_background_summery_card_title_color: var(--color2);
    --resume_background_summery_card_sub_title_color: var(--color4);
    --resume_background_summery_card_description_color: var(--color7);
    /* end resume variable */

    /* start contact variable */
    --contact_section_bg_color: var(--color1);
    --contact_section_title_color: var(--color2);
    --contact_section_description_color: var(--color7);
    --contact_area_bg_color: var(--color8);

    --contact_input_label_text_color: var(--color2);
    --contact_input_text_color: var(--color7);
    --contact_input_bg_color: var(--color1);
    --contact_input_border_color: var(--color13);

    --contact_submit_btn_text_color: var(--color1);
    --contact_submit_btn_bg_color: var(--color4);
    /* end contact variable */

    /* start footer variable */
    --footer_section_bg_color: var(--color2);
    --footer_section_title_color: var(--color1);
    --footer_section_lead_text_color: var(--color7);
    --footer_section_input_border_color: var(--color1);
    /* end footer variable */


    /* start product page variable */
    --product_page_title_color: var(--color2);

    --product_page_price_text_color: var(--color7);
    --product_page_lead_text_color: var(--color7);

    --product_page_contact_us_btn_text_color: var(--color2);
    --product_page_contact_us_btn_bg_color: var(--color1);
    --product_page_contact_us_btn_border_color: var(--color2);
    --product_page_follow_us_title_color: var(--color2);

    --product_page_option_title_color: var(--color14);
    --product_page_option_text_color: var(--color7);
    --product_page_option_bg_color: var(--color1);
    --product_page_option_border_color: var(--color7);

    --product_page_active_option_text_color: var(--color1);
    --product_page_active_option_bg_color: var(--color14);
    --product_page_active_option_border_color: var(--color14);

    --product_page_disabled_btn_bg_color: var(--color13);
    --product_page_disabled_btn_text_color: var(--color2);
    --product_page_disabled_btn_border_color: var(--color16);
    /* end product page variable */



    /* start products page variable */
    --products_page_breadcrumb_title_color: var(--color2);
    --products_page_card_title_color: var(--color2);

    --products_page_card_btn_color: var(--color2);
    --products_page_card_btn_bg_color: var(--color1);
    --products_page_card_btn_border_color: var(--color2);

    --products_page_filter_btn_text_color: var(--color14);
    --products_page_filter_sidebar_bg_color: var(--color1);
    --products_page_filter_sidebar_overlay_color: var(--overlay1);
    --products_page_filter_heading_bg_color: var(--color1);
    --products_page_filter_title_color: var(--color2);
    --products_page_filter_heading_shadow: var(--shadow1);

    --products_page_checkbox_label_text_color: var(--color7);
    --products_page_checkbox_checkmark_color: var(--color1);
    --products_page_checkbox_border_color: var(--color16);
    --products_page_checkbox_bg_color: var(--color1);
    --products_page_checkbox_checked_bg_color: var(--color4);
    --products_page_checkbox_checked_border_color: var(--color4);

    --products_page_sort_btn_text_color: var(--color2);
    --products_page_sort_btn_border_color: var(--color13);
    --products_page_sort_menus_bg_color: var(--color1);
    --products_page_sort_menus_box_shadow: var(--shadow2);
    --products_page_sort_menu_text_color: var(--color7);

    --applied_filter_bar_bg_color: var(--color8);
    --applied_filter_bar_lead_text_color: var(--color15);
    --applied_filter_bar_counter_color: var(--color4);
    --applied_filter_bar_clear_btn_bg_color: var(--color4);
    --applied_filter_bar_clear_btn_text_color: var(--color1);
    --applied_filter_bar_border_color: var(--color16);
    /* end products page variable */

    /* start contact form modal variable  */
    --contact_modal_overlay_color: var(--overlay1);
    --contact_modal_box_bg_color: var(--color8);
    --contact_modal_heading_text_color: var(--color2);
    /* end contact form modal variable  */

    /* start empty cart variable  */
    --empty_cart_title_color:var(--color15);
    --empty_cart_description_color:var(--color17);
    --empty_cart_btn_bg_color:var(--primary_color);
    --empty_cart_btn_text_color:var(--secondary_color);
    /* end empty cart variable  */


    

    /* font size */
    --fs_12: 12px;
    --fs_13: 13px;
    --fs_14: 14px;
    --fs_15: 15px;
    --fs_16: 16px;
    --fs_17: 17px;
    --fs_18: 18px;
    --fs_19: 19px;
    --fs_20: 20px;
    --fs_22: 22px;
    --fs_24: 24px;
    --fs_26: 26px;
    --fs_28: 28px;
    --fs_30: 30px;

}

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-style: normal;
    font-optical-sizing: auto;
}

html {
    scroll-behavior: smooth;
}

.header_container {
    max-width: 1400px;
    width: 100%;
    padding: 0px 20px;
    margin: 0 auto;
}

.container {
    max-width: 1332px;
    width: 100%;
    padding: 0px 16px;
    margin: 0 auto;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    overflow-x: hidden;
}

p,
li,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
input::placeholder {
    font-family: "Poppins", sans-serif;
}

::selection {
    background-color: #6BAD0D;
    color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: "Playfair", sans-serif;
}


/* font weight */
.fw_regular {
    font-weight: var(--regular);
}

.fw_medium {
    font-weight: var(--medium);
}

.fw_semi_bold {
    font-weight: var(--semiBold);
}

.fw_bold {
    font-weight: var(--bold);
}

/* font size */
.fs_12 {
    font-size: var(--fs_12);
}

.fs_12 {
    font-size: var(--fs_12);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    display: inline-block;
}

button {
    border: none;
    outline: none;
    background-color: transparent;
}

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

/* start flex */
.flex {
    display: flex;
}

.flex_row.flex_sm_row,
.flex_row {
    flex-direction: row;
}

.flex_column.flex_sm_column,
.flex_column {
    flex-direction: column;
}

.flex.items_center {
    align-items: center;
}

.flex.justify_start {
    justify-content: start;
}

.flex.justify_center {
    justify-content: center;
}

.flex.justify_end {
    justify-content: end;
}

.flex.justify_between {
    justify-content: space-between;
}

.flex.justify_around {
    justify-content: space-around;
}

.flex.wrap {
    flex-wrap: wrap;
}

.flex.no_wrap {
    flex-wrap: wrap;
}

.flex.gap_2 {
    gap: 2px;
}

.flex.gap_5 {
    gap: 5px;
}

.flex.gap_6 {
    gap: 6px;
}

.flex.gap_8 {
    gap: 8px;
}

.flex.gap_10 {
    gap: 10px;
}

.flex.gap_12 {
    gap: 12px;
}

.flex.gap_16 {
    gap: 16px;
}

.flex.gap_20 {
    gap: 20px
}

.flex.gap_24 {
    gap: 24px
}

.flex.gap_30 {
    gap: 30px;
}

.flex.gap_32 {
    gap: 32px;
}

.flex.gap_40 {
    gap: 40px;
}

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


/* section */
.section_heading {
    max-width: 262px;
    width: 100%;
    margin: auto;
}

.section_title {
    font-size: 28px;
    line-height: 28px;
    font-weight: 600;
    color: var(--section_title_color);
}

.section_description_text {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: var(--section_description_color);
    text-align: center;
}

@media(min-width:768px) {

    .section_heading {
        max-width: 370px;
    }

    .section_title {
        font-size: 38px;
        line-height: 38px;
    }

    .section_description_text {
        font-size: 14px;
        line-height: 22px;
    }
}

/* end flex */
@media (min-width:1024px) {
    .pointer {
        cursor: pointer;
    }

    .section_heading {
        max-width: 500px;
    }

    .section_title {
        font-size: 48px;
        line-height: 48px;
    }
}


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

.section {
    opacity: 0;
    /* Start invisible so the animation brings it in */
    transform: translateY(50px);
    /* Start offset to create movement on load */
}

/* GSAP animation scroll */
.gsap_scroll {
    opacity: 0;
}

.icon{
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background-color: #000;
}
.icon_sm {
    width: 14px;
    height: 14px;
    scale: 1;
}
.icon_md {
    width: 18px;
    height: 18px;
    scale: 1.25;
}
.icon_lg{
    width: 21px;
    height: 21px;
    scale: 1.5;
}