/* reboot styles   */
@import "./loader.css";

@font-face {
    font-family: 'cairo';
    src: url(../assets/fonts/Cairo-Regular.ttf), local('Cairo-Regular'), format('ttf');
    font-display: swap;
    font-weight: 100 400;
}

@font-face {
    font-family: 'cairo';
    src: url(../assets/fonts/Cairo-Medium.ttf), local('Cairo-Regular'), format('ttf');
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'cairo';
    src: url(../assets/fonts/Cairo-SemiBold.ttf), local('Cairo-SemiBold'), format('ttf');
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: 'cairo';
    src: url(../assets/fonts/Cairo-Bold.ttf), local('Cairo-Bold'), format('ttf');
    font-display: swap;
    font-weight: 700;
}

@font-face {
    font-family: 'cairo';
    src: url(../assets/fonts/Cairo-ExtraBold.ttf), local('Cairo-Bold'), format('ttf');
    font-display: swap;
    font-weight: 800;
}

@font-face {
    font-family: 'cairo';
    src: url(../assets/fonts/Cairo-Black.ttf), local('Cairo-Bold'), format('ttf');
    font-display: swap;
    font-weight: 900;
}


@font-face {
    font-family: "Rajdhani";
    src: url(../assets/fonts/Rajdhani-SemiBold.ttf), format("ttf");
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Janna LT";
    src: url(../assets/fonts/Janna-LT-Bold.ttf), format("ttf");
    font-display: swap;
    font-style: normal;
}


@font-face {
    font-family: 'rubik-semibold';
    src: url(../assets/fonts/Rubik-SemiBold.ttf), local('Rubik-SemiBold'), format('ttf');
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'rubik-medium';
    src: url(../assets/fonts/Rubik-Medium.ttf), local('Rubik-SemiBold'), format('ttf');
    font-display: swap;
    font-style: normal;
}
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 60px;
}

:root {
  --primary-color: #3DA5FF;
  --secondary-color: #c45;
  /* --hover-color:;
  --focus-color:; */
  --header-h: 65px;
  --stroke:#DAE1EA;
}
/* Basic Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
    direction: rtl;
    text-align: start;
    font-family: "cairo";
    font-weight: 500;
    scrollbar-width: unset;
}
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
}
li a{
  color: inherit !important;
}
/* Remove default margin and padding on body */
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
label {
  margin-bottom: 0;
  /* Improve readability for long text */
  overflow-wrap: break-word;
}
/* Make images easier to work with */
img,
svg {
  /* max-width: 100%; */
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove default button styles */
button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* Remove anchor text decoration */
a {
  text-decoration: none;
  color: inherit;
}

/* Remove outline on focus for non-keyboard users */
:focus:not(:focus-visible) {
  outline: none;
}


/* Remove default table spacing */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default form field styles */
input,
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Remove default fieldset styles */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Remove default legend styles */
.img-fill {
        width: 100%;
        height: 100%;
}
legend {
  padding: 0;
}
 
.pic-blueBorder {
  width: 3rem; 
  height: 3rem;
  border-radius: 50%;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-header .profile-pic {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    border: 3px solid #5E5E5E;
    margin-right: -15px;
}
/* .main-header .profile-pic::before {
  content: "";
  position: absolute;
 top: -2px;
 width: 3.2rem;
 height: 3.2rem;
  border-right: 4px solid #ebebeb;
  border-top: 4px solid #ebebeb;
  border-radius: 50%;
} */


.g-5 {
  gap: 0.5em;
}