@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');
:root {
  --primaryColor: #000000;
  --helperColor: #0275d8;
  --lightHelper: #0275d8;
  --bgProject:#400b5015;
  --hrColor: #e8eef3;
  --middleColor: #3d3d3d;
  --transparentColor: rgba(0, 0, 0, 0.699);
  --shadow: rgba(189, 188, 188, 0.514);
  --whatsappColor: #5cb85c;
  --white: #ffff;
  --blue: #1877F2;
  --green: #25D366;
  --gray: #f8f8f8;
  --container-width: 1340px;
  --header-height: 200px;
  --facebook-color: #41BEE9;
  --instegram-color: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --radius-md: 10px;
  --radius-lg: 16px;
  --border-medium: 2px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 24px;
  --space-xl: 30px;

  --shadow-right: 4px 0 10px var(--shadow-color);
  --shadow-sm: 0px 4px 6px var(--shadow-color);
  --shadow-md: 0 5px 12px var(--shadow-color);
  --shadow-lg: 0 10px 25px var(--shadow-color);

  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 38px;
}

/* =============================================
   Selection
  
============================================= */

*::selection {
  background-color: #0275d8;
  color: #ffffff;
}

.blue-hero *::selection,
.footer *::selection,
.contact-section *::selection {
  background-color: #ffffff;
  color: #0275d8;
}


.m-top {
  margin-top: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "El Messiri", sans-serif;
}

a {
  text-decoration: none;
}

#projects,
#skills-slider,
.none {
  display: none !important;
}

ul {
  list-style: none;
}

.container-width {
  max-width: 1000px !important;
  margin-inline: auto !important;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-auto {
  margin-inline: auto !important;
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background-color: var(--primaryColor);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--lightHelper);
  background-image: linear-gradient(0deg, var(--lightHelper) 0%, var(--helperColor) 100%);
  border-radius: 5px;
}