/* global styles */
*,
::after,
::before {
  box-sizing: border-box;
}
/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap");

html {
  font-size: 100%;
} /*16px*/

:root {
  /* 'אתרים: happyhues, coolers */
  /* אתרים: color shade generator - shadoworld */
  /* colors */
  --primary-100: #f3f2fd;
  --primary-200: #f3f7fd;
  --primary-300: #f7f1fa;
  --primary-400: #837dff;
  --primary-500: #645cff;
  --primary-600: #504acc;
  --primary-700: #3c3799;
  --primary-800: #282566;
  --primary-900: #141233;

  /* ספריות: bootstrap , tailwindcss */
  /* grey */
  --grey-50: #f8fafc;
  --grey-100: #f1f5f9;
  --grey-200: #e2e8f0;
  --grey-300: #cbd5e1;
  --grey-400: #94a3b8;
  --grey-500: #64748b;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1e293b;
  --grey-900: #0f172a;
  --grey: #685f7c;
  /* rest of the colors */
  --black: #222;
  --white: #fff;
  /* מהבוסטראפ לאלרט וכו*/
  --red-light: #f8d7da;
  --red-dark: #842029;
  --green-light: #d1e7dd;
  --green-dark: #0f5132;

  /* fonts  */
  --headingFont: "Roboto", sans-serif;
  --bodyFont: "Nunito", sans-serif;
  --small-text: 0.875rem;
  --extra-small-text: 0.7em;

  /* rest of the vars */
  --backgroundColor: var(--grey-50);
  --textColor: var(--grey-900);
  --borderRadius: 0.25rem;
  --letterSpacing: 1px;
  --transition: 0.3s ease-in-out all;
  --max-width: 1120px;
  /* depends on the project(exmp: for forms): */
  --fixed-width: 600px;

  /* box shadow - tailwindcss*/
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* fonts size from type scale */
/* html and link on top that is from the font too */
body {
  /* background: var(--backgroundColor);
  font-family: var(--bodyFont); */
  /* font-weight: 400; */
  line-height: 1.75;
  color: var(--textColor);
  /* i can add global padding */
}

a {
  text-decoration: none;
  color: var(--primary-500);
}

ul {
  list-style-type: none;
  padding: 0;
}

/* if i have logo or somthing i need to add :not, or i can add img class and change that to .img */
img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* buttons */

.my-btn {
  cursor: pointer;
  color: var(--primary-500);
  background: transparent;
  border: 1px solid;
  border-color: var(--primary-500);
  border-radius: var(--borderRadius);
  letter-spacing: var(--letterSpacing);
  padding: 0.375rem 0.75rem;
  box-shadow: var(--shadow-1);
  transition: var(--transition);
  text-transform: capitalize;
  display: inline-block;

  /* might change to display: block - depend on situation- i think when i want to control btn from container */
}
.my-btn:hover {
  background: var(--primary-700);
  box-shadow: var(--shadow-3);
  border-color: transparent;
}

/* for-forms */
.btn-block {
  width: 100%;
}

/* form */

::placeholder {
  font-family: inherit;
  color: var(--grey-400);
}

/*=== title==== */

.title {
  text-align: center;
}

/* הקו!! */
.title-underline {
  background: var(--primary-500);
  width: 7rem;
  height: 0.25rem;
  margin: 0 auto;
  margin-top: -1rem;
}

/* global bootstrap class i styeled */
.card-header {
  /* background-color: var(--primary-100); */
  background: linear-gradient(
    var(--primary-100),
    var(--primary-200),
    var(--primary-300)
  );
}

/* .text-muted { */
/* in the bootstrap css changed value from:#6c757d to:#a29dff */
/* } */

/* .text-primary { */
/* in the bootstrap css changed value from:#0d6efd to:#645cff */
/* } */

/* <!-- %%%%%%%==============♥ first cards section : portrait , work exp♥=========%%%%%%%% --> */

/* <!-- =====the card with portrait ====--> */
/* .portrait-h2 {
  position: relative;
} */

.pic {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  /* outline: 1px solid rgb(202, 200, 200); */
  /* border: 10px solid var(--primary-100); */
  /* margin: 0.3rem 1rem 1rem 2rem;
  position: absolute;
  top: 0;
  left: 0; */
}
.pic-and-text {
  display: grid;
  grid-template-columns: 150px auto;
}
.pic-and-text h2 {
  transform: translateX(-50px);
}

/* =======WORK-EXPERIENCE section card(this btn in the contact too=========== */
.my-btn-ex {
  width: 100px;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

/* ======education====== */

/* ======testimonails======== */