/*
    Created on : Jun 28, 2024 04:44:00 am
    Author     : hashan.athurugiriya@ebeyonds.com
*/


:root {
     /* Color Styles */
	--color-blue-breeze: #BCDAE7;
	--color-blush-beige: #EEC4B4;
	--color-crimson-sunburn: #C30248;
	--color-absolute-black: #000000;
	--color-modern-gray: #D9D8D6;
	--color-white: #FFFFFF;
	--color-off-white: #F4F0E3;
	--color-dorsett-blue: #B3D9DA;
	--color-vibrant-gold: #A58C51;
	--color-black: #222222;
	--color-yellow-metal: #76663F;
	--color-dark-dorsett-blue: #7EB4B6;
    /* Neutrals */
	--color-modern-gray-dark-62: #515150;
	--color-modern-gray-dark-37: #878785;
	--color-modern-gray-dark-12: #BDBDBB;
	--color-modern-gray-light-62: #F0F0EF;
	--color-black-shade-1: #ACACAC;
	--color-primary : var(--color-dorsett-blue);
	--color-secondary: var(--color-vibrant-gold);
	--color-tertiary: var(--color-off-white);
	--localization-color: var(--color-absolute-black);
	/* Hover Colors*/
	--color-off-white-hover: #CFC9B7;
	
    /* Font Styles */
	--font-raleway: "Raleway", sans-serif;
	--font-optima-regular: "Optima Regular", sans-serif;
	--font-optima-bold: "Optima Bold", sans-serif;
	--font-primary: var(--font-optima-regular);
	--font-secondary: var(--font-raleway);
	--button-font-family: var(--font-optima-regular);
    /* Margins */
	--default-margin: 0 0 24px 0;
	--intro-section-gap: 56px;
	--intro-section-margin: 50px;
  /*------------------------------------

            Common Properties
    
    ------------------------------------*/
    /* Typography Styles */
	--number-body-font-size: 1.6rem;
	--number-body-font-line-height: 150%;
	--number-header-height: 71px;
	--slogan-large-font-size: 4.8rem;
	--slogan-small-font-size: 2.8rem;
	--heading-1-font-size: 3.5rem;
	--heading-1-font-family: var(--font-primary);
	--heading-1-line-height: 120%;
	--heading-1-font-weight: 400;
	--heading-1-margin: 0 0 24px 0;
	--heading-2-font-size: 2.8rem;
	--heading-2-font-family: var(--font-primary);
	--heading-2-line-height: 120%;
	--heading-2-font-weight: 400;
	--heading-2-margin: 0 0 24px 0;
	--heading-3-font-size: 2.4rem;
	--heading-3-font-family: var(--font-primary);
	--heading-3-line-height: 120%;
	--heading-3-font-weight: 400;
	--heading-3-margin: 0 0 24px 0;
	--heading-4-font-size: 2.2rem;
	--heading-4-font-family: var(--font-primary);
	--heading-4-line-height: 120%;
	--heading-4-font-weight: 400;
	--heading-4-margin: 0 0 24px 0;
	--heading-5-font-size: 2rem;
	--heading-5-font-family: var(--font-primary);
	--heading-5-line-height: 120%;
	--heading-5-font-weight: 400;
	--heading-5-margin: 0 0 24px 0;
	--heading-6-font-size: 1.8rem;
	--heading-6-font-family: var(--font-primary);
	--heading-6-line-height: 120%;
	--heading-6-font-weight: 400;
	--heading-6-margin: 0 0 24px 0;
	--list-item-spacing: 8px;
    /* Buttons */
	--button-padding: 12px 24px;
    /* Gaps */
	--section-gap: 96px;
	--breadcrumb-margin: 40px;
	--css-grid-between-gap: 45px;
	--intro-section-gap: 56px;
    /* Paddings */
	--content-wrapper-padding: 0px;
    /* Tables */
	--table-header-background-color: var(--color-blush-beige);
	--table-header-font-color: var(--color-absolute-black);
	--table-header-padding: 19px 72px 16px 72px;
    /* Header */
	--header-top-navigation-font-family: var(--font-raleway);
	--header-top-navigation-font-weight: 400;
	--header-top-navigation-font-size: 1.2rem;
	--header-top-navigation-line-height: 120%;
	--header-top-navigation-font-family: var(--font-raleway);
	--header-top-navigation-font-weight: 500;
	--header-top-navigation-font-size: 1.7rem;
	--header-top-navigation-line-height: 120%;
	--main-navigation-font-family: var(--font-raleway);
    /* Header */
	--default-transition-duration: 0.4s;
	--default-transition-timing-function: ease;
	--breadcrumb-margin-top: 25px;
}


@media(min-width:768px){

    :root {
    	--heading-1-font-size: 5rem;
    	--heading-2-font-size: 4rem;
    	--heading-3-font-size: 3.2rem;
    	--heading-4-font-size: 2.4rem;
    	--heading-5-font-size: 2rem;
    	--heading-6-font-size: 1.8rem;
    	--section-gap: 136px;
    	--number-header-height: 115px;
    	--css-grid-between-gap: 45px;
    	--breadcrumb-margin-top: 48px;
    	--intro-section-gap: 56px;
    	--intro-section-margin: 60px;
    }
}



@media(min-width:1024px){
    :root {
    	--section-gap: 160px;
    	--breadcrumb-margin-top: 40px;
    	--css-grid-between-gap: 65px;
    }
}


@media(min-width:1200px){
    :root{
        --intro-section-margin: 72px;
        --css-grid-between-gap: 100px;
    }
}

@media(min-width:1366px){
    :root {
		--css-grid-between-gap: 100px;
		--heading-1-font-size: 6rem;
		--heading-2-font-size: 5rem;
		--heading-3-font-size: 3.2rem;
		--heading-4-font-size: 2.4rem;
		--heading-5-font-size: 2rem;
		--heading-6-font-size: 1.8rem;
		--intro-section-gap: 64px;
		--section-gap: 183px;
		--breadcrumb-margin-top: 48px;
		--intro-section-gap: 64px;
	}
}