/* Everything that is global comes in here */
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  font-family: 'inter';
}

.d-flex-align-center {
  display: flex;
  align-items: center;
}

.d-none {
  display: none;
}

.d-flex {
  display: flex;
}

.no-scroll {
  overflow: hidden;
}

.with-100-percent-max-width-422px{
  width: 100%;
  max-width: 422px;
}

.cursor-pointer {
  cursor: pointer;
}

.pointer-none {
  pointer-events: none;
}

a {
  text-decoration: none;
}

:root {
  /* color */
  --light-gray-placeholder: #d1d1d1;
  --light-gray-bg: #f6f7f8;
  --primary-color-gray: #2a3647;
  --primary-color-dark-gray: #091931;
  --primary-color-gray-hover: ;
  --blue: #29abe2;
  --light-blue: #29abe2;
  --gray-a-links: #a8a8a8;
  --red: #ff001f;

  /* gap */
  --form-gap: 32px;
  --button-gap: clamp(10px, 5px + 1.5625vw, 35px);
  --input-gap: 20px;

  /* shadow */
  --box-shadow: 0px 0px 14px 3px #0000000a;
  --box-shadow-sidebar: 0px 0px 4px 0px #0000001a;
  --box-shadow-header: 0 4px 10px #00000026;
  --box-shadow-button: 0px 4px 4px 0px #00000040;

  /* padding */
  --padding-header: 80px;

  /* border */
  --border-radius: 30px;
  --border-radius: 20px;
  --border-radius-buttons: 8px;
  --border-radius-input-fields: 10px;
  --border-input-fields: 1px solid #d1d1d1;
  --border-buttons-gray: 1px solid #2a3647;
  --border-buttons-dark-gray: 1px solid #091931;
  --border-buttons-blue: 1px solid #29abe2;

  /* font-size */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-12-16: clamp(12px, 11.2px + 0.25vw, 16px);
  --font-size-14-16: clamp(14px, 13.6px + 0.125vw, 16px);
  --font-size-16-19: clamp(16px, 15.4px + 0.1875vw, 19px);
  --font-size-20: 20px;
  --font-size-21: 21px;
  --font-size-14-20:clamp(16px, 15.2px + 0.25vw, 20px);
  --font-size-16-20: clamp(16px, 15.2px + 0.25vw, 20px);
  --font-size-16-21: clamp(16px, 15px + 0.3125vw, 21px);
  --font-size-18-21: clamp(18px, 17.4px + 0.1875vw, 21px);
  --font-size-16-23: clamp(16px, 14.6px + 0.4375vw, 23px);

  /*font size for to do, in progress, Await feedback, done*/
  --font-size-27-20: clamp(20px, 28.4px + -0.4375vw, 27px);
  --font-size-27: 27px;
  --font-size-20-27: clamp(20px, 18.6px + 0.4375vw, 27px);
  --font-size-30: 30px;
  --font-size-36: 36px;
  --font-size-36-47: clamp(36px, 33.8px + 0.6875vw, 47px);
  --font-size-47: 47px;
  --font-size-36-61: clamp(32px, 26.2px + 1.8125vw, 61px);
  --font-size-47-61: clamp(47px, 44.2px + 0.875vw, 61px);
  --font-size-43-64: clamp(43px, 38.8px + 1.3125vw, 64px);
  --font-size-47-64: clamp(47px, 43.6px + 1.0625vw, 64px);

  /* responsive size new */
  --font-size-37-61:clamp(37px, 32.2px + 1.5vw, 61px);
  --font-size-47-20:clamp(20px, 34.4px + -0.75vw, 32px);
  
  /* font weight */
  --font-weight-700: 700;
  --font-weight-500: 500;
  --font-weight-400: 400;

  /* transition */
  --transition-75ms: 75ms;
  --transition-125ms: 125ms;
  --transition-hover-effect: all 100ms ease-in-out;
  --transition-animations-overlay: all 1s ease;

  /* animation */
  --animation-opacity-overlay: fadeIn 1s ease-in-out forwards 1s;
  --animation-logo-overlay: logoAnimation 0.7s ease forwards 1s;
  --animation-logo-overlay-responsive: backgroundAnimationResponsive 0.8s ease forwards 1s;

  /* width */
  --width-64-100:clamp(64px, 56.8px + 2.25vw, 100px);


  /* hover-scale */
  --scale-hover: 1.01;

  /* margin left main */
  --margin-left-main: 328px;
  --margin-left-main-responsive:20px;

  /* padding top main */
  --padding-top-main: clamp(95px, 76px + 5.9375vw, 190px);

  /* main container width */
  --main-container-width: 1014px;

  /* scollbar-width-thin */
  --scollbar-width-thin: 4px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-color-gray);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  cursor: grab;
}

::-webkit-scrollbar-thumb:active {
  cursor: grabbing;
}