@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
  
  :root {
    --color-primary: #3c3e41;
    --color-secondary: #f7f7f1;
    --color-highlight: #a4afb6;
    --color-alt: #b2b2b2;
    --color-dark: 3c3e41;
    --color-light: #ffffff;
    --color-black: #3c3e41;
    --color-white: #f7f7f1;
    --color-grey: #a5a5a5;
    --color-lightgrey: #f2f2f2;

    --media-tablet: 1200px;
    --media-mobile: 790px;

    --header-logo-height: 100px;
    --header-logo-height-mobile: 80px;

    --footer-logo-height: 80px;
    --footer-logo-height-mobile:70px;

    --social-logo-size: 30px;
    --social-logo-size-mobile: 30px;

    --sizes-xxs: 5px;
    --sizes-xs: 10px;
    --sizes-sm: 20px;
    --sizes-md: 35px;
    --sizes-lg: 50px;
    --sizes-xl: 80px;
    --sizes-xxl: 160px;
      
    --s-sizes-xxs: 200px;
    --s-sizes-xs: 300px;
    --s-sizes-sm: 450px;
    --s-sizes-md: 550px;
    --s-sizes-lg: 650px;
    --s-sizes-xl: 750px;
    --s-sizes-xxl: 950px;

    --title-font-name: "DM+Sans", sans-serif;;
    --paragraph-font-name: "DM+Sans", sans-serif;;
    --highlight-font-name: cursive, sans-serif;

    --overlay-opacity: 0.9;
    --overlay-backgroundcolour: #3c3e41;

    --bg-fade-start: 0;
    --bg-fade-end: 1;
    --bg-fade-time: 0.5s;
    --bg-translate-y-start: 0;
    --bg-translate-y-end: 0;
    --bg-translate-y-time: 0s;

    --con-fade-start: 0;
    --con-fade-end: 1;
    --con-fade-time: 1.2s;
    --con-translate-y-start: 100px;
    --con-translate-y-end: 0;
    --con-translate-y-time: 0.8s;

    --h0_font_size: 70px;
    --h0_font_weight: 400;
    --h0_line_height: 75px;
    --h0_font_size_mobile: 50px;
    --h0_font_weight_mobile: 400;
    --h0_line_height_mobile: 76px;

    --h1_font_size: 60px;
    --h1_font_weight: 300;
    --h1_line_height: 65px;
    --h1_font_size_mobile: 35px;
    --h1_font_weight_mobile: 300px;
    --h1_line_height_mobile: 40px;

    --h2_font_size: 30px;
    --h2_font_weight: 300;
    --h2_line_height: 39px;
    --h2_font_size_mobile: 30px;
    --h2_font_weight_mobile: 300px;
    --h2_line_height_mobile: 37px;

    --h3_font_size: 20px;
    --h3_font_weight: 400;
    --h3_line_height: 28px;
    --h3_font_size_mobile: 18px;
    --h3_font_weight_mobile: 300px;
    --h3_line_height_mobile: 30px;
    
    --h4_font_size: 18px;
    --h4_font_weight: 400px;
    --h4_line_height: 22px;
    --h4_font_size_mobile: 20px;
    --h4_font_weight_mobile: 500;
    --h4_line_height_mobile: 25px;

    --h5_font_size: 18px;
    --h5_font_weight: 400px;
    --h5_line_height: 23px;
    --h5_font_size_mobile: 18px;
    --h5_font_weight_mobile: 500;
    --h5_line_height_mobile: 23px;

    --h6_font_size: 16px;
    --h6_font_weight: 400px;
    --h6_line_height: 20px;
    --h6_font_size_mobile: 16px;
    --h6_font_weight_mobile: 400;
    --h6_line_height_mobile: 20px;

    --h7_font_size: 15px;
    --h7_font_weight: 400px;
    --h7_line_height: 20px;
    --h7_font_size_mobile: 15px;
    --h7_font_weight_mobile: 400;
    --h7_line_height_mobile: 20px;

    --p_font_size: 18px;
    --p_font_weight: 300;
    --p_line_height: 26px;
    --p_font_size_mobile: 16px;
    --p_font_weight_mobile: 400;
    --p_line_height_mobile: 23px;

    --slider-icon-arrow-width: ;

    --slider-scrollbar-color: #a4afb6;
    --slider-scrollrail-colour: #f2f2f2;
    --slider-scrollrail-opacity: 1;
    --slider-navigationdots-color: #a4afb6;
    --slider-navigationdot-active-colour: #a4afb6;
    --slider-navigationdot-opacity: 0.5;

    --slider-scrollrail-colour-rgba: rgba(242, 242, 242, 1);
    --slider-navigationdots-color-rgba: rgba(164, 175, 182, 0.5);

    --slider-scrollbar-color-dark: #a4afb6;
    --slider-scrollrail-colour-dark: #f2f2f2;
    --slider-scrollrail-opacity-dark: 0.3;
    --slider-navigationdots-color-dark: #a4afb6;
    --slider-navigationdot-active-colour-dark: #a4afb6;
    --slider-navigationdot-opacity-dark: 0.5;

    --slider-scrollrail-colour-rgba-dark: rgba(242, 242, 242, 0.3);
    --slider-navigationdots-color-rgba-dark: rgba(164, 175, 182, 0.5);

    --slider-scrollbar-color-highlight: #f7f7f1;
    --slider-scrollrail-colour-highlight: #f7f7f1;
    --slider-scrollrail-opacity-highlight: 0.2;
    --slider-navigationdots-color-highlight: #f7f7f1;
    --slider-navigationdot-active-colour-highlight: #f7f7f1;
    --slider-navigationdot-opacity-highlight: 0.2;

    --slider-scrollrail-colour-rgba-highlight: rgba(247, 247, 241, 0.2);
    --slider-navigationdots-color-rgba-highlight: rgba(247, 247, 241, 0.2);

    --slider-scrollbar-color-light: #a4afb6;
    --slider-scrollrail-colour-light: #f7f7f1;
    --slider-scrollrail-opacity-light: 0.3;
    --slider-navigationdots-color-light: 3c3e41;
    --slider-navigationdot-active-colour-light: 3c3e41;
    --slider-navigationdot-opacity-light: 0.2;

    --slider-scrollrail-colour-rgba-light: rgba(247, 247, 241, 0.3);
    --slider-navigationdots-color-rgba-light: rgba(60, 62, 65, 0.2);

    --button_1_background_colour: #a4afb6;
    --button_1_text_colour: #f7f7f1;
    --button_1_outline_colour: #a4afb6;
    --button_1_outline_thickness: 1px;
    --button_1_opacity: 1;
    --button_1_background_colour_hover: transparent;
    --button_1_text_colour_hover: #a4afb6;
    --button_1_outline_thickness_hover: 1px;
    --button_1_outline_colour_hover: #a4afb6;
    --button_1_opacity_hover: 1;
    --button_1_border_radius: 50px;

    --button_1_dark_background_colour: #f7f7f1;
    --button_1_dark_text_colour: #f7f7f1;
    --button_1_dark_outline_colour: #a4afb6;
    --button_1_dark_outline_thickness: 1px;
    --button_1_dark_opacity: 1;
    --button_1_dark_background_colour_hover: #f7f7f1;
    --button_1_dark_text_colour_hover: #f7f7f1;
    --button_1_dark_outline_thickness_hover: 1px;
    --button_1_dark_outline_colour_hover: #a4afb6;
    --button_1_dark_opacity_hover: 1;
    --button_1_dark_border_radius: 50px;

    --button_1_highlight_background_colour: #f7f7f1;
    --button_1_highlight_text_colour: #a4afb6;
    --button_1_highlight_outline_colour: #f7f7f1;
    --button_1_highlight_outline_thickness: 1px;
    --button_1_highlight_opacity: 1;
    --button_1_highlight_background_colour_hover: #a4afb6;
    --button_1_highlight_text_colour_hover: #f7f7f1;
    --button_1_highlight_outline_thickness_hover: 1px;
    --button_1_highlight_outline_colour_hover: #f7f7f1;
    --button_1_highlight_opacity_hover: 1;
    --button_1_highlight_border_radius: 50px;

    --button_1_light_background_colour: #a4afb6;
    --button_1_light_text_colour: #f7f7f1;
    --button_1_light_outline_colour: #a4afb6;
    --button_1_light_outline_thickness: 1px;
    --button_1_light_opacity: 1;
    --button_1_light_background_colour_hover: transparent;
    --button_1_light_text_colour_hover: #a4afb6;
    --button_1_light_outline_thickness_hover: 1px;
    --button_1_light_outline_colour_hover: #a4afb6;
    --button_1_light_opacity_hover: 1;
    --button_1_light_border_radius: 50px;

    --button_2_background_colour: transparent;
    --button_2_text_colour: #a4afb6;
    --button_2_outline_colour: #a4afb6;
    --button_2_outline_thickness: 1px;
    --button_2_opacity: 1;
    --button_2_background_colour_hover: #a4afb6;
    --button_2_text_colour_hover: #f7f7f1;
    --button_2_outline_thickness_hover: 1px;
    --button_2_outline_colour_hover: #a4afb6;
    --button_2_opacity_hover: 1;
    --button_2_border_radius: 100px;

    --button_2_dark_background_colour: transparent;
    --button_2_dark_text_colour: #a4afb6;
    --button_2_dark_outline_colour: #a4afb6;
    --button_2_dark_outline_thickness: 1px;
    --button_2_dark_opacity: 1;
    --button_2_dark_background_colour_hover: #a4afb6;
    --button_2_dark_text_colour_hover: #f7f7f1;
    --button_2_dark_outline_thickness_hover: 1px;
    --button_2_dark_outline_colour_hover: #a4afb6;
    --button_2_dark_opacity_hover: 1;
    --button_2_dark_border_radius: 50px;

    --button_2_highlight_background_colour: transparent;
    --button_2_highlight_text_colour: #f7f7f1;
    --button_2_highlight_outline_colour: #f7f7f1;
    --button_2_highlight_outline_thickness: 1px;
    --button_2_highlight_opacity: 1;
    --button_2_highlight_background_colour_hover: #f7f7f1;
    --button_2_highlight_text_colour_hover: #a4afb6;
    --button_2_highlight_outline_thickness_hover: 1px;
    --button_2_highlight_outline_colour_hover: #f7f7f1;
    --button_2_highlight_opacity_hover: 1;
    --button_2_highlight_border_radius: 50px;

    --button_2_light_background_colour: transparent;
    --button_2_light_text_colour: #a4afb6;
    --button_2_light_outline_colour: #a4afb6;
    --button_2_light_outline_thickness: 1px;
    --button_2_light_opacity: 1;
    --button_2_light_background_colour_hover: #a4afb6;
    --button_2_light_text_colour_hover: #f7f7f1;
    --button_2_light_outline_thickness_hover: 1px;
    --button_2_light_outline_colour_hover: #a4afb6;
    --button_2_light_opacity_hover: 1;
    --button_2_light_border_radius: 50px;

    
    --button_3_background_colour: #a4afb6;
    --button_3_text_colour: 3c3e41;
    --button_3_outline_colour: transparent;
    --button_3_outline_thickness: 1px;
    --button_3_opacity: 1;
    --button_3_background_colour_hover: transparent;
    --button_3_text_colour_hover: #a4afb6;
    --button_3_outline_thickness_hover: 1px;
    --button_3_outline_colour_hover: #a4afb6;
    --button_3_opacity_hover: 1;
    --button_3_border_radius: 0px;

    --button_3_dark_background_colour: #a4afb6;
    --button_3_dark_text_colour: #f7f7f1;
    --button_3_dark_outline_colour: #a4afb6;
    --button_3_dark_outline_thickness: 1px;
    --button_3_dark_opacity: 1;
    --button_3_dark_background_colour_hover: transparent;
    --button_3_dark_text_colour_hover: #a4afb6;
    --button_3_dark_outline_thickness_hover: 1px;
    --button_3_dark_outline_colour_hover: #a4afb6;
    --button_3_dark_opacity_hover: 1;
    --button_3_dark_border_radius: 0px;

    --button_3_highlight_background_colour: #a4afb6;
    --button_3_highlight_text_colour: #f7f7f1;
    --button_3_highlight_outline_colour: #f7f7f1;
    --button_3_highlight_outline_thickness: 1px;
    --button_3_highlight_opacity: 1;
    --button_3_highlight_background_colour_hover: transparent;
    --button_3_highlight_text_colour_hover: #f7f7f1;
    --button_3_highlight_outline_thickness_hover: 1px;
    --button_3_highlight_outline_colour_hover: #f7f7f1;
    --button_3_highlight_opacity_hover: 1;
    --button_3_highlight_border_radius: 0px;

    --button_3_light_background_colour: #a4afb6;
    --button_3_light_text_colour: #f7f7f1;
    --button_3_light_outline_colour: transparent;
    --button_3_light_outline_thickness: 1px;
    --button_3_light_opacity: 1;
    --button_3_light_background_colour_hover: transparent;
    --button_3_light_text_colour_hover: #a4afb6;
    --button_3_light_outline_thickness_hover: 1px;
    --button_3_light_outline_colour_hover: #a4afb6;
    --button_3_light_opacity_hover: 1;
    --button_3_light_border_radius: 0px;

    --button_4_background_colour: transparent;
    --button_4_text_colour: #3c3e41;
    --button_4_outline_colour: #a4afb6;
    --button_4_outline_thickness: 1px;
    --button_4_opacity: 1;
    --button_4_background_colour_hover: #a4afb6;
    --button_4_text_colour_hover: #f7f7f1;
    --button_4_outline_thickness_hover: 1px;
    --button_4_outline_colour_hover: transparent;
    --button_4_opacity_hover: 1;
    --button_4_border_radius: 0px;

    --button_4_dark_background_colour: transparent;
    --button_4_dark_text_colour: #a4afb6;
    --button_4_dark_outline_colour: #a4afb6;
    --button_4_dark_outline_thickness: 1px;
    --button_4_dark_opacity: 1;
    --button_4_dark_background_colour_hover: #a4afb6;
    --button_4_dark_text_colour_hover: #f7f7f1;
    --button_4_dark_outline_thickness_hover: 1px;
    --button_4_dark_outline_colour_hover: #a4afb6;
    --button_4_dark_opacity_hover: 1;
    --button_4_dark_border_radius: 0px;

    --button_4_highlight_background_colour: transparent;
    --button_4_highlight_text_colour: #f7f7f1;
    --button_4_highlight_outline_colour: #f7f7f1;
    --button_4_highlight_outline_thickness: 1px;
    --button_4_highlight_opacity: 1;
    --button_4_highlight_background_colour_hover: #f7f7f1;
    --button_4_highlight_text_colour_hover: #a4afb6;
    --button_4_highlight_outline_thickness_hover: 1px;
    --button_4_highlight_outline_colour_hover: #f7f7f1;
    --button_4_highlight_opacity_hover: 1;
    --button_4_highlight_border_radius: 0px;

    --button_4_light_background_colour: transparent;
    --button_4_light_text_colour: #a4afb6;
    --button_4_light_outline_colour: #a4afb6;
    --button_4_light_outline_thickness: 1px;
    --button_4_light_opacity: 1;
    --button_4_light_background_colour_hover: #a4afb6;
    --button_4_light_text_colour_hover: #f7f7f1;
    --button_4_light_outline_thickness_hover: 1px;
    --button_4_light_outline_colour_hover: transparent;
    --button_4_light_opacity_hover: 1;
    --button_4_light_border_radius: 0px;
    
    --button_5_background_colour: transparent;
    --button_5_text_colour: #a4afb6;
    --button_5_outline_colour: #3c3e41;
    --button_5_outline_thickness: 0px;
    --button_5_opacity: 1;
    --button_5_background_colour_hover: transparent;
    --button_5_text_colour_hover: #a4afb6;
    --button_5_outline_thickness_hover: 0px;
    --button_5_outline_colour_hover: transparent;
    --button_5_opacity_hover: 1;
    --button_5_border_radius: 50px;

    --button_5_dark_background_colour: transparent;
    --button_5_dark_text_colour: #3c3e41;
    --button_5_dark_outline_colour: transparent;
    --button_5_dark_outline_thickness: 1px;
    --button_5_dark_opacity: 1;
    --button_5_dark_background_colour_hover: transparent;
    --button_5_dark_text_colour_hover: #f7f7f1;
    --button_5_dark_outline_thickness_hover: 1px;
    --button_5_dark_outline_colour_hover: transparent;
    --button_5_dark_opacity_hover: 1;
    --button_5_dark_border_radius: 50px;

    --button_5_highlight_background_colour: transparent;
    --button_5_highlight_text_colour: #f7f7f1;
    --button_5_highlight_outline_colour: transparent;
    --button_5_highlight_outline_thickness: 1px;
    --button_5_highlight_opacity: 1;
    --button_5_highlight_background_colour_hover: transparent;
    --button_5_highlight_text_colour_hover: #f7f7f1;
    --button_5_highlight_outline_thickness_hover: 1px;
    --button_5_highlight_outline_colour_hover: transparent;
    --button_5_highlight_opacity_hover: 1;
    --button_5_highlight_border_radius: 50px;

    --button_5_light_background_colour: transparent;
    --button_5_light_text_colour: #3c3e41;
    --button_5_light_outline_colour: transparent;
    --button_5_light_outline_thickness: 1px;
    --button_5_light_opacity: 1;
    --button_5_light_background_colour_hover: transparent;
    --button_5_light_text_colour_hover: #3c3e41;
    --button_5_light_outline_thickness_hover: 1px;
    --button_5_light_outline_colour_hover: transparent;
    --button_5_light_opacity_hover: 1;
    --button_5_light_border_radius: 50px;

    --button_6_background_colour: transparent;
    --button_6_text_colour: 3c3e41;
    --button_6_outline_colour: transparent;
    --button_6_outline_thickness: 1px;
    --button_6_opacity: 1;
    --button_6_background_colour_hover: transparent;
    --button_6_text_colour_hover: #3c3e41;
    --button_6_outline_thickness_hover: 1px;
    --button_6_outline_colour_hover: transparent;
    --button_6_opacity_hover: 0.7;
    --button_6_border_radius: 50px;

    --button_6_dark_background_colour: transparent;
    --button_6_dark_text_colour: #f7f7f1;
    --button_6_dark_outline_colour: transparent;
    --button_6_dark_outline_thickness: 1px;
    --button_6_dark_opacity: 1;
    --button_6_dark_background_colour_hover: transparent;
    --button_6_dark_text_colour_hover: #f7f7f1;
    --button_6_dark_outline_thickness_hover: 1px;
    --button_6_dark_outline_colour_hover: transparent;
    --button_6_dark_opacity_hover: 0.7;
    --button_6_dark_border_radius: 50px;

    --button_6_highlight_background_colour: transparent;
    --button_6_highlight_text_colour: #f7f7f1;
    --button_6_highlight_outline_colour: transparent;
    --button_6_highlight_outline_thickness: 1px;
    --button_6_highlight_opacity: 1;
    --button_6_highlight_background_colour_hover: transparent;
    --button_6_highlight_text_colour_hover: #f7f7f1;
    --button_6_highlight_outline_thickness_hover: 1px;
    --button_6_highlight_outline_colour_hover: transparent;
    --button_6_highlight_opacity_hover: 0.7;
    --button_6_highlight_border_radius: 50px;

    --button_6_light_background_colour: transparent;
    --button_6_light_text_colour: 3c3e41;
    --button_6_light_outline_colour: transparent;
    --button_6_light_outline_thickness: 1px;
    --button_6_light_opacity: 1;
    --button_6_light_background_colour_hover: transparent;
    --button_6_light_text_colour_hover: #3c3e41;
    --button_6_light_outline_thickness_hover: 1px;
    --button_6_light_outline_colour_hover: transparent;
    --button_6_light_opacity_hover: 0.7;
    --button_6_light_border_radius: 50px;
  }