
:root {
    --primary: #0E2A46;
    --white: #fff;
    --font-colour:#000;
    --secondary:#00B0F0;
    --bg-light:#B7E7F9;
    --bg-white:#fff;
    --size-40:40px;
    --size-36:36px;
    --size-30:30px;
    --size-24:24px;
    --size-20:20px;
    --size-18:18px;
    --size-16:16px;
    --pad-20:20px;
    --pad-10:10px;
    --radius-10:10px;
    --gap-20:20px;
    --gap-10:10px;
    --border:1px solid #e8e8e8;
    --border-secondary:1px solid #00B0F0;
    --f5f5f5: #f5f5f5;
    --grey: #DADADA;
    --check-mark: url('../images/icons/checkmark-circle-g.svg');
    --check-mark-check: url('../images/icons/checkmark-circle.svg');
    --red: #ec3d5a;
    --green: #4CD964;
    --orange: #F6921E;
    --blue: #00B0F0;
    --yellow: #FFD400;
    --gradiant1: linear-gradient(5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(0, 176, 240, 0.2));
    --gradiant-red: linear-gradient(5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(236, 61, 90, 0.2));
    --gradiant-green: linear-gradient(5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(0, 171, 83, 0.4));
    --gradiant-green2: linear-gradient(-5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(0, 171, 83, 0.4));
    --green-11: rgba(0, 171, 83, 0.11);
    --gradiant-blue: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(0, 176, 240, 0.3));
    --blue-11:rgba(0, 176, 240, 0.11);
    --red-11: rgba(236, 61, 90, 0.11);
    --bg-primary: rgba(14, 42, 70, 0.8);
    --light-orange: linear-gradient(-5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), #fff6eb);
    --light-red: linear-gradient(-5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), #fff2f4);
    --light-blue: linear-gradient(-5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), #f2fcff);
    --light-green: linear-gradient(-5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), #f0fcf2);
    --light-yellow: linear-gradient(-5deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), #fefae6);

  }



  @media (max-width: 480px) {
    :root{ 
      --gap-20:12px;
      --pad-20:12px;
      --gap-10:6px;
      --pad-10:6px;
    }

  }
 