/*
RESET FROM https://www.joshwcomeau.com/css/custom-css-reset/
*/
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

*{
  scroll-behavior: smooth;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

ul li { list-style-type: none; }

body {
	margin: 0;
	line-height: normal;
  }
  
  :root {
	/* fonts */
	--body-sm-600: Inter;
	--display-md-500: Manrope;
	--font-almarai: Almarai;
  --font-manrope: "Manrope", sans-serif;
  --font-inter: "Inter", sans-serif;
  
	/* font sizes */
	--body-sm-600-size: 13px;
	--body-md-600-size: 15px;
	--text-md-semibold-size: 16px;
	--font-size-30xl: 49px;
	--font-size-10xl: 29px;
	--font-size-h2-clamp: clamp(25px, 4vw, 29px); /* h2 */
	--font-size-20xl: 39px;
	--font-size-h1-clamp: clamp(35px, 4vw, 42px); /* h1 */
	--font-size-xl: 20px;
	--font-size-4xl: 23px;
	--font-size-12xl: 31px;
	--text-sm-medium-size: 14px;
	--font-size-mini-7: 14.7px;
	--display-md-500-size: 42px;
	--font-size-3xs: 10px;
	--label-lg-400-size: 11px;
  
	/* Colors */
	--surface-01: #fff;
	--color-gainsboro-100: #e8e8e8;
	--color-gainsboro-200: #e4e4e4;
	--border-02: #e2e2e2;
	--border-01: #e0e0e0;
	--gray-50: #f9fafb;
	--surface-03: #f9f9f9;
	--surface-02: #f5f5f5;
	--gray-200: #eaecf0;
	--color-whitesmoke-100: #ececec;
	--color-whitesmoke-200: #ebebeb;
	--color-whitesmoke-300: #eaeaea;
	--text-secondry: #5e5e5e;
	--color-darkslateblue-100: #7a54a6;
	--text-brand: #552d80;
	--text-primary: #222;
	--color-gray-100: rgba(34, 34, 34, 0.8);
	--color-gray-200: rgba(34, 34, 34, 0.7);
	--brand-secondry: #ffd25a;
	--color-black: #000;
	--color-silver-100: #c9c9c9;
	--color-silver-200: rgba(201, 201, 201, 0.09);
	--brand-primary-hover: #360968;
	--surface-05: #d0d0d0;
	--gray-500: #667085;
	--gray-700: #344154;

  --title-color: #222; 

  /* EMERALD COLORS */
  --emerald-text-accent: #46733F;
  --emerald-section-background: #108140;
  
	/* Gaps */
	--gap-5xl: 24px;
	--gap-9xl: 28px;
	--gap-base: 16px;
	--gap-6xs: 7px;
	--gap-lgi: 19px;
	--gap-mid: 17px;
	--gap-15xl: 34px;
	--gap-7xl: 26px;
	--gap-xl: 20px;
	--gap-9xs: 4px;
	--gap-20xl: 39px;
	--gap-4xl: 23px;
	--gap-3xl: 22px;
	--gap-xs: 12px;
  
	/* Paddings */
	--padding-2xs: 11px;
	--padding-12xl: 31px;
	--padding-xl: 20px;
	--padding-12xs: 1px;
	--padding-xs: 12px;
	--padding-13xl: 32px;
	--padding-8xs: 5px;
	--padding-3xl: 22px;
	--padding-5xl: 24px;
	--padding-7xs: 6px;
	--padding-5xs: 8px;
	--padding-39xl: 58px;
	--padding-19xl: 38px;
	--padding-45xl: 64px;
	--padding-30xl: 49px;
	--padding-51xl: 70px;
	--padding-48xl: 67px;
	--padding-14xl: 33px;
	--padding-16xl: 35px;
	--padding-6xs-5: 6.5px;
	--padding-9xs-5: 3.5px;
	--padding-6xs: 7px;
	--padding-71xl: 90px;
	--padding-base: 16px;
	--padding-mini: 15px;
	--padding-4xs: 9px;
	--padding-10xs-4: 2.4px;
	--padding-8xl: 27px;
	--padding-9xl: 28px;
	--padding-46xl: 65px;
	--padding-sm: 14px;
	--padding-59xl-2: 78.2px;
	--padding-22xl-5: 41.5px;
	--padding-33xl: 52px;
	--padding-37xl: 56px;
	--padding-4xl: 23px;
  }
  /* Figma Styles of your File */
:root {
    /* Colors */
    --1: linear-gradient(
      180deg,
      rgba(244, 234, 255, 1) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    --rang: linear-gradient(
      -18.1deg,
      rgba(194, 168, 222, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
    --flowkit-purple: #7b61ff;
    --flowkit-charcoal: #222222;
    --flowkit-red: #fc5555;
    --flowkit-green: #29cc6a;
    --flowkit-blue: #0099ff;
    --flowkit-white: #ffffff;
  
    /* Fonts */
    --display-lg-300-font-family: Manrope-Light, sans-serif;
    --display-lg-300-font-size: 46px;
    --display-lg-300-line-height: 120%;
    --display-lg-300-font-weight: 300;
    --display-lg-300-font-style: normal;
    --display-lg-400-font-family: Manrope-Regular, sans-serif;
    --display-lg-400-font-size: 46px;
    --display-lg-400-line-height: 120%;
    --display-lg-400-font-weight: 400;
    --display-lg-400-font-style: normal;
    --display-lg-500-font-family: Manrope-Medium, sans-serif;
    --display-lg-500-font-size: 46px;
    --display-lg-500-line-height: 120%;
    --display-lg-500-font-weight: 500;
    --display-lg-500-font-style: normal;
    --display-lg-600-font-family: Manrope-SemiBold, sans-serif;
    --display-lg-600-font-size: 46px;
    --display-lg-600-line-height: 120%;
    --display-lg-600-font-weight: 600;
    --display-lg-600-font-style: normal;
    --display-md-300-font-family: Manrope-Light, sans-serif;
    --display-md-300-font-size: 42px;
    --display-md-300-line-height: 120%;
    --display-md-300-font-weight: 300;
    --display-md-300-font-style: normal;
    --display-md-400-font-family: Manrope-Regular, sans-serif;
    --display-md-400-font-size: 42px;
    --display-md-400-line-height: 120%;
    --display-md-400-font-weight: 400;
    --display-md-400-font-style: normal;
    --display-md-500-font-family: Manrope-Medium, sans-serif;
    --display-md-500-font-size: 42px;
    --display-md-500-line-height: 120%;
    --display-md-500-font-weight: 500;
    --display-md-500-font-style: normal;
    --display-md-600-font-family: Manrope-SemiBold, sans-serif;
    --display-md-600-font-size: 42px;
    --display-md-600-line-height: 120%;
    --display-md-600-font-weight: 600;
    --display-md-600-font-style: normal;
    --display-sm-300-font-family: Manrope-Light, sans-serif;
    --display-sm-300-font-size: 36px;
    --display-sm-300-line-height: 120%;
    --display-sm-300-font-weight: 300;
    --display-sm-300-font-style: normal;
    --display-sm-400-font-family: Manrope-Light, sans-serif;
    --display-sm-400-font-size: 36px;
    --display-sm-400-line-height: 120%;
    --display-sm-400-font-weight: 300;
    --display-sm-400-font-style: normal;
    --display-sm-500-font-family: Manrope-Medium, sans-serif;
    --display-sm-500-font-size: 36px;
    --display-sm-500-line-height: 120%;
    --display-sm-500-font-weight: 500;
    --display-sm-500-font-style: normal;
    --display-sm-600-font-family: Manrope-SemiBold, sans-serif;
    --display-sm-600-font-size: 36px;
    --display-sm-600-line-height: 120%;
    --display-sm-600-font-weight: 600;
    --display-sm-600-font-style: normal;
    --headline-lg-300-font-family: Manrope-Light, sans-serif;
    --headline-lg-300-font-size: 32px;
    --headline-lg-300-line-height: 120%;
    --headline-lg-300-font-weight: 300;
    --headline-lg-300-font-style: normal;
    --headline-lg-400-font-family: Manrope-Regular, sans-serif;
    --headline-lg-400-font-size: 32px;
    --headline-lg-400-line-height: 120%;
    --headline-lg-400-font-weight: 400;
    --headline-lg-400-font-style: normal;
    --headline-lg-500-font-family: Manrope-Medium, sans-serif;
    --headline-lg-500-font-size: 32px;
    --headline-lg-500-line-height: 120%;
    --headline-lg-500-font-weight: 500;
    --headline-lg-500-font-style: normal;
    --headline-lg-600-font-family: Manrope-SemiBold, sans-serif;
    --headline-lg-600-font-size: 32px;
    --headline-lg-600-line-height: 120%;
    --headline-lg-600-font-weight: 600;
    --headline-lg-600-font-style: normal;
    --headline-md-300-font-family: Manrope-Light, sans-serif;
    --headline-md-300-font-size: 29px;
    --headline-md-300-line-height: 120%;
    --headline-md-300-font-weight: 300;
    --headline-md-300-font-style: normal;
    --headline-md-400-font-family: Manrope-Regular, sans-serif;
    --headline-md-400-font-size: 29px;
    --headline-md-400-line-height: 120%;
    --headline-md-400-font-weight: 400;
    --headline-md-400-font-style: normal;
    --headline-md-500-font-family: Manrope-Medium, sans-serif;
    --headline-md-500-font-size: 29px;
    --headline-md-500-line-height: 120%;
    --headline-md-500-font-weight: 500;
    --headline-md-500-font-style: normal;
    --headline-md-600-font-family: Manrope-SemiBold, sans-serif;
    --headline-md-600-font-size: 29px;
    --headline-md-600-line-height: 120%;
    --headline-md-600-font-weight: 600;
    --headline-md-600-font-style: normal;
    --headline-sm-300-font-family: Manrope-Light, sans-serif;
    --headline-sm-300-font-size: 25px;
    --headline-sm-300-line-height: 120%;
    --headline-sm-300-font-weight: 300;
    --headline-sm-300-font-style: normal;
    --headline-sm-400-font-family: Manrope-Regular, sans-serif;
    --headline-sm-400-font-size: 25px;
    --headline-sm-400-line-height: 120%;
    --headline-sm-400-font-weight: 400;
    --headline-sm-400-font-style: normal;
    --headline-sm-500-font-family: Manrope-Medium, sans-serif;
    --headline-sm-500-font-size: 25px;
    --headline-sm-500-line-height: 120%;
    --headline-sm-500-font-weight: 500;
    --headline-sm-500-font-style: normal;
    --headline-sm-600-font-family: Manrope-SemiBold, sans-serif;
    --headline-sm-600-font-size: 25px;
    --headline-sm-600-line-height: 120%;
    --headline-sm-600-font-weight: 600;
    --headline-sm-600-font-style: normal;
    --body-lg-300-font-family: Inter-Light, sans-serif;
    --body-lg-300-font-size: 16px;
    --body-lg-300-line-height: 140%;
    --body-lg-300-font-weight: 300;
    --body-lg-300-font-style: normal;
    --body-lg-400-font-family: Inter-Regular, sans-serif;
    --body-lg-400-font-size: 16px;
    --body-lg-400-line-height: 140%;
    --body-lg-400-font-weight: 400;
    --body-lg-400-font-style: normal;
    --body-lg-500-font-family: Inter-Medium, sans-serif;
    --body-lg-500-font-size: 16px;
    --body-lg-500-line-height: 140%;
    --body-lg-500-font-weight: 500;
    --body-lg-500-font-style: normal;
    --body-lg-600-font-family: Inter-SemiBold, sans-serif;
    --body-lg-600-font-size: 16px;
    --body-lg-600-line-height: 140%;
    --body-lg-600-font-weight: 600;
    --body-lg-600-font-style: normal;
    --body-md-300-font-family: Inter-Light, sans-serif;
    --body-md-300-font-size: 15px;
    --body-md-300-line-height: 140%;
    --body-md-300-font-weight: 300;
    --body-md-300-font-style: normal;
    --body-md-400-font-family: Inter-Regular, sans-serif;
    --body-md-400-font-size: 15px;
    --body-md-400-line-height: 140%;
    --body-md-400-font-weight: 400;
    --body-md-400-font-style: normal;
    --body-md-500-font-family: Inter-Medium, sans-serif;
    --body-md-500-font-size: 15px;
    --body-md-500-line-height: 140%;
    --body-md-500-font-weight: 500;
    --body-md-500-font-style: normal;
    --body-md-600-font-family: Inter-SemiBold, sans-serif;
    --body-md-600-font-size: 15px;
    --body-md-600-line-height: 140%;
    --body-md-600-font-weight: 600;
    --body-md-600-font-style: normal;
    --body-sm-300-font-family: Inter-Light, sans-serif;
    --body-sm-300-font-size: 13px;
    --body-sm-300-line-height: 140%;
    --body-sm-300-font-weight: 300;
    --body-sm-300-font-style: normal;
    --body-sm-400-font-family: Inter-Regular, sans-serif;
    --body-sm-400-font-size: 13px;
    --body-sm-400-line-height: 140%;
    --body-sm-400-font-weight: 400;
    --body-sm-400-font-style: normal;
    --body-sm-500-font-family: Inter-Medium, sans-serif;
    --body-sm-500-font-size: 13px;
    --body-sm-500-line-height: 140%;
    --body-sm-500-font-weight: 500;
    --body-sm-500-font-style: normal;
    --body-sm-600-font-family: Inter-SemiBold, sans-serif;
    --body-sm-600-font-size: 13px;
    --body-sm-600-line-height: 140%;
    --body-sm-600-font-weight: 600;
    --body-sm-600-font-style: normal;
    --title-lg-300-font-family: Inter-Light, sans-serif;
    --title-lg-300-font-size: 23px;
    --title-lg-300-line-height: 140%;
    --title-lg-300-font-weight: 300;
    --title-lg-300-font-style: normal;
    --title-lg-400-font-family: Inter-Regular, sans-serif;
    --title-lg-400-font-size: 23px;
    --title-lg-400-line-height: 140%;
    --title-lg-400-font-weight: 400;
    --title-lg-400-font-style: normal;
    --title-lg-500-font-family: Inter-Medium, sans-serif;
    --title-lg-500-font-size: 23px;
    --title-lg-500-line-height: 140%;
    --title-lg-500-font-weight: 500;
    --title-lg-500-font-style: normal;
    --title-lg-600-font-family: Inter-SemiBold, sans-serif;
    --title-lg-600-font-size: 23px;
    --title-lg-600-line-height: 140%;
    --title-lg-600-font-weight: 600;
    --title-lg-600-font-style: normal;
    --title-md-300-font-family: Inter-Light, sans-serif;
    --title-md-300-font-size: 20px;
    --title-md-300-line-height: 140%;
    --title-md-300-font-weight: 300;
    --title-md-300-font-style: normal;
    --title-md-400-font-family: Inter-Regular, sans-serif;
    --title-md-400-font-size: 20px;
    --title-md-400-line-height: 140%;
    --title-md-400-font-weight: 400;
    --title-md-400-font-style: normal;
    --title-md-500-font-family: Inter-Medium, sans-serif;
    --title-md-500-font-size: 20px;
    --title-md-500-line-height: 140%;
    --title-md-500-font-weight: 500;
    --title-md-500-font-style: normal;
    --title-md-600-font-family: Inter-SemiBold, sans-serif;
    --title-md-600-font-size: 20px;
    --title-md-600-line-height: 140%;
    --title-md-600-font-weight: 600;
    --title-md-600-font-style: normal;
    --title-sm-300-font-family: Inter-Light, sans-serif;
    --title-sm-300-font-size: 18px;
    --title-sm-300-line-height: 140%;
    --title-sm-300-font-weight: 300;
    --title-sm-300-font-style: normal;
    --title-sm-400-font-family: Inter-Regular, sans-serif;
    --title-sm-400-font-size: 18px;
    --title-sm-400-line-height: 140%;
    --title-sm-400-font-weight: 400;
    --title-sm-400-font-style: normal;
    --title-sm-500-font-family: Inter-Medium, sans-serif;
    --title-sm-500-font-size: 18px;
    --title-sm-500-line-height: 140%;
    --title-sm-500-font-weight: 500;
    --title-sm-500-font-style: normal;
    --title-sm-600-font-family: Inter-SemiBold, sans-serif;
    --title-sm-600-font-size: 18px;
    --title-sm-600-line-height: 140%;
    --title-sm-600-font-weight: 600;
    --title-sm-600-font-style: normal;
    --label-lg-400-font-family: Inter-Regular, sans-serif;
    --label-lg-400-font-size: 11px;
    --label-lg-400-line-height: 140%;
    --label-lg-400-font-weight: 400;
    --label-lg-400-font-style: normal;
    --label-lg-500-font-family: Inter-Medium, sans-serif;
    --label-lg-500-font-size: 11px;
    --label-lg-500-line-height: 140%;
    --label-lg-500-font-weight: 500;
    --label-lg-500-font-style: normal;
    --label-lg-600-font-family: Inter-SemiBold, sans-serif;
    --label-lg-600-font-size: 11px;
    --label-lg-600-line-height: 140%;
    --label-lg-600-font-weight: 600;
    --label-lg-600-font-style: normal;
    --label-md-400-font-family: Inter-Regular, sans-serif;
    --label-md-400-font-size: 10px;
    --label-md-400-line-height: 140%;
    --label-md-400-font-weight: 400;
    --label-md-400-font-style: normal;
    --label-md-500-font-family: Inter-Medium, sans-serif;
    --label-md-500-font-size: 10px;
    --label-md-500-line-height: 140%;
    --label-md-500-font-weight: 500;
    --label-md-500-font-style: normal;
    --label-md-600-font-family: Inter-SemiBold, sans-serif;
    --label-md-600-font-size: 10px;
    --label-md-600-line-height: 140%;
    --label-md-600-font-weight: 600;
    --label-md-600-font-style: normal;
    --label-sm-400-font-family: Inter-Regular, sans-serif;
    --label-sm-400-font-size: 9px;
    --label-sm-400-line-height: 140%;
    --label-sm-400-font-weight: 400;
    --label-sm-400-font-style: normal;
    --label-sm-500-font-family: Inter-Medium, sans-serif;
    --label-sm-500-font-size: 9px;
    --label-sm-500-line-height: 140%;
    --label-sm-500-font-weight: 500;
    --label-sm-500-font-style: normal;
    --label-sm-600-font-family: Inter-SemiBold, sans-serif;
    --label-sm-600-font-size: 9px;
    --label-sm-600-line-height: 140%;
    --label-sm-600-font-weight: 600;
    --label-sm-600-font-style: normal;
  
    /* Effects */
    --1-box-shadow: 0px 4px 6.2px 0px rgba(202, 202, 202, 0.25);

    --width-mobile: 90vw;
    --max-width: 1200px;

  }
  
/* ---------------------------------------------------------------------------------- */
/* ----------------------------------- HELPERS CSS ---------------------------------- */
/* ---------------------------------------------------------------------------------- */
.overflowHidden{overflow:hidden;}
.flex{display:flex;}
.grid{display:grid;}
.gap05{gap:0.5rem;}
.gap1{gap:1rem;}
.gap15{gap:1.5rem;}
.gap2{gap:2rem;}
.gap3{gap:3rem;}
.gap4{gap:4rem;}
.gap5{gap:5rem;}
.gap6{gap:6rem;}
.column{flex-direction:column;}
.row{flex-direction: row;}
.alignCenter{align-items:center;}
.alignEnd{align-items:flex-end;}
.justifyBetween{justify-content:space-between;}
.justifyCenter{justify-content:center;}
.justifyAround{justify-content:space-around;}		

.textCenter{text-align: center;}
/* img */
.cover{object-fit: cover;}
.height100{height:100%;}	
/* position */
.absolute{position:absolute;}
.relative{position:relative;}

@media(max-width:800px){
    .md-absolute{position:absolute;}
    .md-relative{position:relative;}
    .md-alignBaseline{align-items: baseline;}
}

/* all of these are 100% on mobile */
.width20{width: 20%;} 
.width25{width: 25%;} 
.width30{width: 30%;} 
.width35{width: 35%;} 
/*.half{width: 50%;} */
.width40{width: 40%;} 
.width45{width: 45%;} 
.width50{width: 50%;} 
.width55{width: 55%;} 
.width60{width: 60%;} 
.width80{width: 80%;}
.width85{width: 85%;}
.width90{width: 90%;}
.width33{width:33%;}


/* only for tablet/desktop */
@media(min-width:800px){
  .max10ch{max-width: 10ch;}
  .max15ch{max-width: 15ch;}
  .max20ch{max-width: 20ch;}
  .max25ch{max-width: 25ch;}
  .max30ch{max-width: 30ch;}
  .max35ch{max-width: 35ch;}
  .max40ch{max-width: 44ch;}
  .max45ch{max-width: 45ch;}
  .max50ch{max-width: 50ch;}
  .max55ch{max-width: 55ch;}
  .max60ch{max-width: 60ch;}
  .max65ch{max-width: 65ch;}
  .max70ch{max-width: 70ch;}
  .max75ch{max-width: 75ch;}
  .max80ch{max-width: 80ch;}
  .max90ch{max-width: 90ch;}
  .max100ch{max-width: 100ch;}
}

.showOnlyPc, .showOnlyTablet, .showOnlyMobile,  .showTabletMobile{    display: none;}
@media(min-width:800px){  .showOnlyPc{ display: flex; }  }
@media(max-width:800px) and (min-width:600px){  .showOnlyTablet{  display: flex;  }}
@media(max-width:800px){  .showTabletMobile{  display: flex;  }  }
@media(max-width:600px){   .showOnlyMobile{  display: flex; }}

.showOnlyPcBlock, .showOnlyTabletBlock, .showOnlyMobileBlock,  .showTabletMobileBlock{   display: none;  }
@media(min-width:800px){ .showOnlyPcBlock{ display: block; }  }
@media(max-width:800px) and (min-width:600px){ .showOnlyTabletBlock{  display: block;  }  }
@media(max-width:800px){ .showTabletMobileBlock{  display: block;  }  }
@media(max-width:600px){ .showOnlyMobileBlock{  display: block; }  }


@media(max-width:800px){
  .md-full{
        width: 100% !important;
        max-width: 100% !important;
    }    
    .md-80{ width: 85vw !important;  margin-inline: auto !important;  }
    .md-90{width:90% !important;margin-inline: auto;}
    .md-95{width:95%;}
    .md-column{ flex-direction: column !important; }
    .md-column-reverse{ flex-direction: column-reverse !important; }
    .md-justifyCenter{ justify-content: center; }
    .md-gap05{gap: 05rem;}
    .md-gap1{gap: 1rem;}
    .md-gap2{gap: 2rem;}
    .md-gap3{gap: 3rem;}
}


@media(max-width:800px){.width20,.width25,.width30,.width33,.width35,.width40,.half,.width60,.width45,.width50,.width55,
.width80,.width85,.width90{width: 100%;} }


/* grid */
.grid-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-5{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

@media(max-width:1000px){
  .grid-2, .grid-3,  .grid-4, .grid-5{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }    
}

@media(max-width:800px){
  .grid-2, .grid-3,  .grid-4, .grid-5{
    display: grid;
    grid-template-columns: 1fr;
  }    
}

.container{
    width: var(--width-mobile, 90vw);
    margin-inline: auto;
    max-width: var(--max-width, 1200px); 
}

.containerFull{
    max-width: 1400px;
    width: 100%;
    margin-inline: auto;
}	

.white{color: var(--surface-01);}

/* PADDING - MARGIN */

/* General Padding */
.p0 { padding: 0; }
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p40 { padding: 40px; }
.p50 { padding: 50px; }
.p60 { padding: 60px; }
.p70 { padding: 70px; }
.p80 { padding: 80px; }
.p90 { padding: 90px; }
.p100 { padding: 100px; }

/* Padding Top */
.pt0 { padding-top: 0; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }

/* Padding Bottom */
.pb0 { padding-bottom: 0; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }

/* Padding Left */
.pl0 { padding-left: 0; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl90 { padding-left: 90px; }
.pl100 { padding-left: 100px; }

/* Padding Right */
.pr0 { padding-right: 0; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr70 { padding-right: 70px; }
.pr80 { padding-right: 80px; }
.pr90 { padding-right: 90px; }
.pr100 { padding-right: 100px; }

/* General Margin */
.m0 { margin: 0; }
.m10 { margin: 10px; }
.m20 { margin: 20px; }
.m30 { margin: 30px; }
.m40 { margin: 40px; }
.m50 { margin: 50px; }
.m60 { margin: 60px; }
.m70 { margin: 70px; }
.m80 { margin: 80px; }
.m90 { margin: 90px; }
.m100 { margin: 100px; }

/* Margin Top */
.mt0 { margin-top: 0; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt90 { margin-top: 90px; }
.mt100 { margin-top: 100px; }

/* Margin Bottom */
.mb0 { margin-bottom: 0; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

/* Margin Left */
.ml0 { margin-left: 0; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }
.ml60 { margin-left: 60px; }
.ml70 { margin-left: 70px; }
.ml80 { margin-left: 80px; }
.ml90 { margin-left: 90px; }
.ml100 { margin-left: 100px; }

/* Margin Right */
.mr0 { margin-right: 0; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }
.mr70 { margin-right: 70px; }
.mr80 { margin-right: 80px; }
.mr90 { margin-right: 90px; }
.mr100 { margin-right: 100px; }


/* MAIN ELEMENTS */
h1{
    font-family: var(--font-inter);
    font-size: var(--font-size-h1-clamp);
    line-height: 121.035%; /* 47.204px */
    font-weight: 400;
    color: var( --title-color);
}

h2{
    font-family: var(--font-inter);
    font-size: var(--font-size-h2-clamp);
    line-height: 121.035%; /* 47.204px */
    font-weight: 400;
    color: var( --title-color);
}

p{
  color: var(--title-color, #222);
	font-size: 15px;
	font-family: var(--font-inter);
	font-weight: 400;
	line-height: 21px;
}


/* fn */

.fnPurple {
  color:#552d80;
}

.fnManrope {
	font-family: Manrope;
}

/* FONT BOLD */ 

.fnBold6 {
	font-weight: 600;
}

.fnBold5 {
	font-weight: 500;
}

.fnBold4 {
	font-weight: 400;
}

.fnBold3 {
	font-weight: 300;
}

.fnBold2 {
	font-weight: 200;
}

.fnBold1 {
	font-weight: 100;
}

.op5 {
  opacity: 0.5;
}

.op6 {
  opacity: 0.6;
}

.op7 {
  opacity: 0.7;
}

.op8 {
  opacity: 0.8;
}

.op8 {
  opacity: 0.9;
}