:root {
 
  --primary: #F79B1A;
  --secondary: #F27023;
  --gradiant-primary: linear-gradient(45deg, #F79B1A, #F27023);
  --gradiant-primary2: linear-gradient(45deg, #F27023, #F79B1A);
  --gradiant-primary3: linear-gradient(to bottom, #F27023, #F79B1A);
  --gradiant-1: linear-gradient(145deg, rgba(247, 155, 26, 0.2), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  --gradiant-bottom: linear-gradient(to top, rgba(247, 155, 26, 0.2), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  --yellow: #FDB400;
  --white: #fff;
  --bg-white: #fff;
  --bg-light-blue: #EAF8FF;
  --bg-dark-blue: #D5ECFA;
  --bg-f5f5f5: #f5f5f5;
  --font-colour: #000;
  --font-secondary: #7886AF;
  --border: 1px solid #e5e5e5;
  --gradiant-dark: linear-gradient(to bottom, #18C0FF, #fff);
  --gradiant-radial: radial-gradient(circle, #031472, #221E1E);
  --gradiant-shape: radial-gradient(circle, rgba(24, 193, 255, 0.6), rgba(255, 255, 255, 0.2));
  --gradiant-light: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.05));
  --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-30: 30px;
  --font-size-36: 36px;
  --font-size-48: 48px;
  --font-size-42: 42px;
  --pad-20:20px;
  --pad-30:30px;
  --border-radius:20px;
  --radius-15:15px;
  --border-radius30:30px;
  --gap-20:20px;
  --gap-15:15px;
  --gap-40:40px;
   --shape1: url('../images/icons/banner-shape.svg');
   --shape2: url('../images/icons/shape-3.svg');
   --star-ico: url('../images/icons/star-ico.svg');
   --shield-ico: url('../images/icons/shield-check.svg');

}

@media (max-width: 1030px) {
  :root{
     --shape1: url('../images/icons/banner-shape-mb.svg');
  }
}

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




 /*  Regular */

@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir-Regular.woff2') format('woff2'),
       url('../fonts/Avenir-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;

}

 /*  Medium */

@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir-Medium.woff2') format('woff2'),
       url('../fonts/Avenir-Medium.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;

}

 /*  bold */

@font-face {
  font-family: 'Avenir';
  src: url('../fonts/AvenirArabicBlack.woff2') format('woff2'),
       url('../fonts/AvenirArabicBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;

}