@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap");


:root {
 
  --primary: #0DAFAF;
  --secondary: #00ACD4;
  --shape-secondary: #E9F7FF;
  --primary-opacity-11: rgba(13, 175, 175, 0.11);
  --secondary-opacity-11:  rgba(81, 177, 228, 0.11);
  --red-opacity-11: rgba(213, 57, 80, 0.11);
  --green-opacity-11: rgba(0, 171, 83, 0.11);
  --yellow-opacity-11: rgba(231, 179, 22, 0.11);
  --border-primary: 1px solid #0DAFAF;
  --stroke-primary: 1px solid #EFEFEF;
  --text-stroke: #F0FFFF;
  --font-600: 600;
  --font-900: 900;
  --font-size-22: 22px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-16: 16px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-48: 48px;
  --font-size-42: 42px;
  --pad-20:20px;
  --border-radius:20px;
  --gap-20:20px;
  --gap-10:10px;
  --light-green: #E8FFFF;
  --white: #fff;
  --bg:#fff;
  --bg-white: #fff;
  --bg-light: #fcfcfc;
  --grey: #D9D9D9;
  --bg-white-90: rgba(255, 255, 255, 0.96);
  --bg-white-30: rgba(255, 255, 255, 0.3);
  --bg-white-70: rgba(255, 255, 255, 0.7);
  --bg-white-10: rgba(255, 255, 255, 0.1);
  --bg-secondary: #29CAC2;
  --bg-dark: #151A33;
  --black: #000;
  --bg-black-90: rgba(0, 0, 0, 0.90);
  --font-colour: #151A33;
  --font-colour-white: #fff;
  --bg-primary: #EAFAF9;
  --bg-blur: rgba(0, 0, 0, 0.7);
  --brd-colour: #F4F4F4;
  --brd-colour2: #EFEFEF;
  --brd-white: #fff;
  --brd-colour3: rgba(239, 239, 239, 0.2);
  --blue: #00ACD4;
  --font-secondary: #7886AF;
  --font-colour-nav: #7886AF;
  --story-border: rgba(120, 134, 175, 0.20);
  --white-opecity-8: rgba(255, 255, 255, 0.08);
  --red:#D53951;
  --green:#00AB52;
  --orange:#FF9D00;
  --switch-bg: #314256;
  --btn-not-active: #ABB2C7;
  --white-50: rgba(255, 255, 255, 0.5);
  --bg-light-blue:#E3F4F8;
  --gradiant-rose: linear-gradient(to bottom, #FFFFFF, #FB0E66);
  --gradiant-violet: linear-gradient(to bottom, #FFFFFF, #4F46E5);
  --gradiant-blue: linear-gradient( 45deg, #14B8A6, #06B6D4, #3B82F6);
  --green-gradiant: linear-gradient(to bottom, #fff, #00AB52);
  --gradiant-main: linear-gradient(to bottom, #fff, #0DB2B2);
  --gradiant-second: linear-gradient(to bottom, #fff, #51B0E4);
  --secondary-font: "Baloo 2", sans-serif;
  --body-bg: url('../images/bg-image.webp');
  --inner-bg: url('../images/icons/inner-bgm.svg');
  --footer-bg: url('../images/footer-shape.webp');
  --gradiant-circle: linear-gradient(to right, var(--white), var(--primary));

}


@media (max-width: 767px) {
  :root{
     --font-size-48: 34px;
     --font-size-42: 30px;
     --font-size-32: 28px;
     --font-size-20: 20px;
     --font-size-24: 22px;
     --font-size-28: 24px;
  }
}


@media (max-width: 480px) {
  :root{
     --font-size-48: 24px;
     --font-size-32: 24px;
     --font-size-20: 16px;
     --font-size-24: 18px;
     --font-size-28: 24px;
     --font-size-18: 15px;
     --font-size-16: 14px;
     --pad-20:12px;
     --border-radius:10px;
     --gap-20:12px;
  }
}



 /*  Regular */

@font-face {
  font-family: 'Lina-Round';
  src: url('../fonts/Linaround-Regular.woff') format('woff'),
       url('../fonts/Linaround-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;

}

 /*  Medium */

@font-face {
  font-family: 'Lina-Round';
  src: url('../fonts/Linaround-Medium.woff') format('woff'),
       url('../fonts/Linaround-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;

}

 /*  bold */

@font-face {
  font-family: 'Lina-Round';
  src: url('../fonts/Linaround-Bold.woff') format('woff'),
       url('../fonts/Linaround-Bold.otf') format('opentype');
  font-weight: 900;
  font-style: normal;

}

 /*  Light */

@font-face {
  font-family: 'Lina-Round';
  src: url('../fonts/Linaround-Light.woff') format('woff'),
       url('../fonts/Linaround-Light.otf') format('opentype');
  font-weight: 100;
  font-style: normal;

}