/* CROUSAL FREE CODES */


/* FRON CODES */
@font-face {
    font-family: 'vazir';
    src: url('font/Vazir.eot')format('eot');
    src: url('font/Vazir.ttf')format('ttf'),
    url('font/Vazir.woff')format('woff'),
    url('font/Vazir.woff2')format('woff2');
}

html {
  overflow-x: hidden;
}

body {
  direction: rtl;
  font-family: 'vazir' !important;
  overflow: hidden;
}

body.loaded {
  overflow-y: auto;
  overflow-x: hidden;
}

h5 , h3 , h2{
  font-weight: 600 !important;
}

.input-group , .form-select {
  direction: ltr;
}

td {
  text-align: center;
}

/* about site */

.about-site {
  min-height: 100vh;
}

.about-site-title > h2,.about-site-title > h1{
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  border-left: 3px rgba(0, 0, 0, 0) solid;
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(0, 0, 0) }
}

.about-site-title > h1{animation: typingH1 1.3s steps(13, end) forwards,blink-caret .5s step-end 3;}
.about-site-title > h2{animation: typingH2 3.7s steps(37, end) forwards 1.3s,blink-caret .5s step-end 10,normalWhiteSpace 0.1s forwards 5s;}

@keyframes typingH2 {
  from { max-width: 0; } to { max-width: 32ch; }
}
@keyframes typingH1 {
  from { max-width: 0; } to { max-width: 13ch; }
}
@keyframes typingP {
  from { max-width: 0; } to { max-width: 57ch; }
}
@keyframes normalWhiteSpace {
  to { white-space: normal; }
}

.about-site-image {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  object-fit: cover;
  z-index: -3;
}

.about-site::before {
  position: absolute;
  content: "";
  background: linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(255, 255, 255, 0.347),rgba(255, 255, 255, 0.809) 50%,white 70%);
  width: 100%;
  height: 100%;
  z-index: -2;
}

.about-site-div-effect {
  text-align: center;
}

.about-site-effect {
  display: inline-flex;
}

.about-site-effect.chooseTheBestWay {
  transform: translate(-120px,70px);
}

.about-site-effect.toDoList {
  transform: translate(135px,100px);
}

.about-site-effect.circle {
  transform: translate(0px,0px);
  background-color: seagreen;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.about-site-effect.square {
  transform: translate(0,-20px);
  background-color: rgb(127, 127, 127);
  height: 70px;
  width: 70px;
  border-radius: 5px;
}

.about-site-effect > .chooseTheBestWay {
  width: 200px;
}

.about-site-effect > .toDoList {
  width: 150px;
}

/* question-site */

.question-site {
  background: linear-gradient(50deg,rgba(255, 0, 0, 0.24), rgba(114, 32, 190, 0.24), rgba(0, 0, 255, 0.24), rgba(128, 0, 128, 0.24));
}

.question-site-item {
  background-color: white;
  color: black;
  width: fit-content;
}

.question-site-div {
  direction: ltr;
}

.scroll-animate.question-site-item:hover {
  transform: translate(5px,-6px);
}

/* about-working-site */

.working-site {
  position: relative;
}

.working-site::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 20px solid;
  border-color: seagreen;
  width: 900px;
  height: 900px;
  z-index: -1;
  left: -120px;
  top: -200px;
}

.about-working-site-items {
  display: inline-block;
}

.about-working-site-div:nth-of-type(2n+0) {
  color: chartreuse !important;
}

/* fields-site */

.fields-include-site-header {
  direction: ltr;
}

.fields-include-site-items {
  background-color: white;
  transition: all 0.2s;
}

.fields-include-site-items:hover {
  transform: scale(1.04,1.04);
}

.fields-include-site-items > p {
  height: 107.2px;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  overflow: hidden;
}

.carousel-inner {
  min-height: 400px;
}

/* academic-guidace-site */

.academic-guidace-site-header {
  direction: ltr;
}

/* ideas-site */

.ideas-site {
  min-height: 400px;
}

.ideas-site-item {
  background-color: #fff;
}

/* .ideas::before {
  content: '..........';
  position: absolute;
  font-size: 8pc;
  clip-path: circle(50% at 50% 50%);
  background-color: #f8f9fa;
  padding: 5px;
  height: 20pc;
  width: 20pc;
  bottom: 60px;
  right: -50px;
  z-index: -1;
}

.ideas::after {
  content: 'IIIIIIIIIIIII';
  position: absolute;
  color: #0000ff3d;
  font-size: 10pc;
  background-color: #1987547c;
  top: -40px;
  left: 0px;
  z-index: -1;
} */

/* user page */

.user-page {
  position: relative;
}

.user-page::before {
  content: '';
  position: absolute;
  clip-path: polygon(0 52%, 100% 42%, 100% 100%, 0% 100%);
  background-color: #e2e3e5;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.user-info-photo-div {
  position: relative;
  margin-bottom: 5px;
}

.user-info-photo-btn-div {
  background-color: #6c757d99;
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  top: 0;
  border-radius: 5px;
  opacity: 0;
}

.user-info-photo {
  width: 100%;
  height: 100px;
  filter: blur(1px);
  border-radius: 5px;
  object-fit: cover;
  z-index: -1;
  transition: all 0.4s;
}

.user-info-photo-div:hover > .user-info-photo-btn-div {
  opacity: 1;
}

.user-info-photo-profil {
  position: absolute;
  right: 80%;
  top: 50%;
  z-index: 1;
  border: black 2px solid;
  border-radius: 50%;
  width: 90px;
  height: 90px;
}

.user-ideas-item {
  background-color: #fff;
}

/* management */

.management-users-item , .management-ideas-item {
  background-color: #fff;
}

.management-ideas-checkbox {
  height: 2rem;
  width: 2rem;
}

.management-fields-item {
  background-color: #fff;
}

.management-fields-item > p {
  height: 3ch;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* questions page */

.questions-item {
  max-width: 70vh;
  background: linear-gradient(50deg,rgba(46, 139, 86, 0.252),rgba(46, 139, 86, 0.617));
}

.questions-item:nth-of-type(2n) {
  float: left;
}

/* academic guidace page */

/* .academic-guidace-in-real {
  position: relative;
}

.academic-guidace-in-real::before {
  content: "";
  position: absolute;
  background-color: seagreen;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 42%, 100% 52%, 100% 100%, 0% 100%);
  z-index: -1;
} */

.academic-guidace-in-real-item {
  background-color: #fff;
}

/* back to up button */

.back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1000;
  /* border-radius: 50%; */
  border: 0;
  width: 50px;
  height: 50px;
  transition: all 1s;
  opacity: 1;
  transform: translate(0,0);
}

:root{
  --pseudo-height: 0;
}

.back-to-up-scroll {
  position: absolute;
  object-fit: cover;
  content: "";
  display: flex;
  width: 100%;
  height: var(--pseudo-height);
  background-color: #009b53 !important;
  bottom: 0;
  right: 0;
}

.back-to-top > svg {
  position: relative;
  z-index: 1001;
}

.back-to-top.hidden {
  opacity: 0;
  right: -50px;
}

/* etc */

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

.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 1px;
  background-color: rgb(88, 88, 88);
  margin: 5px;
}

.scroll-animate{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 0.7s all ease;
}

.scroll-animate.active{
  transform: translateY(0);
  opacity: 1;
}

.btn-group {
  direction: ltr;
}

.form-select {
  direction: rtl;
}

.collapse-btn {
  transition: all 0.5s;
  transform: rotate(0);
}

.collapse-btn.collapsed {
  transform: rotate(180deg);
}

.loader {
  position: fixed;
  z-index: 3;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #22b570;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.loader.loaded {
  animation: opacity 1s forwards,z-index 0s forwards 1s;
}

@keyframes opacity {
  from {opacity: 1;} to { opacity: 0;}
}

@keyframes z-index {
  from {z-index: 1;} to {z-index: -1;}
}

.user-photo {
  border-radius: 50%;
}

.user-photo-content-div {
  background-color: inherit;
  border: 0;
}

.user-photo-btn-div {
  position: absolute;
  top: 2rem;
}

.user-photo-div {
  background-color: #fff;
  transition: all 1s;
}

.user-photo-div.loaded {
  background-color: #198754;
  opacity: 0;
}

.user-photo-image {
  max-width: 100vh;
  max-height: 100vh;
}

.user-photo-indicators-div {
  position: absolute;
  bottom: 2rem;
}

.user-photo-indicators {
  border: 0;
  background-color: #6c757d;
  height: 20px;
  width: 50px;
}

.user-photo-indicators:hover , .user-photo-indicators:active {
  background-color: white;
}

.drop-zone {
  max-width: 100vh;
  max-height: 100vh;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 4px dashed #198754;
  border-radius: 10px;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

.guide-photo {
  max-width: 100%;
}