@font-face {
  font-family: my-font;
  src: url(../fonts/Courgette-Regular.ttf);
}
@font-face {
  font-family: font-secondary;
  src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf);
}
@font-face {
  font-family: my-font;
  src: url(../fonts/Courgette-Regular.ttf);
}
@font-face {
  font-family: font-secondary;
  src: url(../fonts/PlayfairDisplay-VariableFont_wght.ttf);
}
.about-head {
  font-family: my-font;
  font-size: 50px;
}

.main-6, .education {
  font-family: my-font;
  font-size: 25px;
}

.foot, .about-body {
  font-family: my-font;
  font-size: 15px;
}

.about {
  font-family: my-font;
  font-size: 30px;
}

.bi-behance, .bi-telegram, .bi-google, .bi-twitter, .bi-facebook {
  position: absolute;
  bottom: -6px;
  left: 2px;
}

.about-head {
  color: #F8B850;
  font-family: font-secondary;
}

.colorgradient1 {
  color: #f14d8d;
}

.colorgradient2 {
  color: #F59166;
}

.colorgradient3 {
  color: #F8B850;
}

.color-main {
  color: #333333;
}

.color-secondry {
  color: #CDCAC6;
}

/********about*************/
.about {
  font-family: font-secondary;
}

.letter-spacing {
  letter-spacing: -6px;
}

.rotate {
  position: relative;
}

.bi-square-fill {
  position: absolute;
  font-size: 25px;
  transform: rotate(45deg);
  left: -17px;
}

.square {
  font-size: 15px;
  color: #f14d8d;
  z-index: 10 !important;
  left: -12px;
  bottom: 10px;
}

.about-img {
  position: relative;
}

.img-box {
  position: absolute;
  width: 315.833px;
  height: 261.979px;
  top: 70px;
  left: 75px;
}

.back-box {
  width: 315.833px;
  height: 261.979px;
}

.yasi {
  font-size: 25px;
  color: #f14d8d;
  font-family: font-secondary;
}

.yasi-job {
  font-size: 25px;
  color: #F59166;
  font-family: font-secondary;
}

.yasi-about {
  font-size: 15px;
  color: #CDCAC6;
  font-family: my-font;
}

.about-box {
  border: 2px solid rgba(189, 189, 189, 0.1);
}

.square-icon {
  width: 10px;
  height: 10px;
}

.about-title {
  font-size: 15px;
  color: #F59166;
  font-weight: bolder;
}

.about-des {
  font-size: 15px;
  color: #F8B850;
}

.sosial-media {
  position: relative;
  left: 20px;
  width: 35px;
  height: 35px;
  background-color: #CDCAC6;
  cursor: pointer;
}

/******* skils ********/
.under-border {
  width: 300px;
}

.progress-bar {
  background-color: #F8B850;
  padding: 30px;
}

.skill-item {
  font-family: my-font;
  color: #f14d8d;
}

.progress {
  height: 5px !important;
  transition: 1s;
}

/******* servises********/
.service-card {
  border: 2px solid #f14d8d;
  box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.2);
  font-family: my-font;
}

.service-icon {
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  transform: rotate(45deg);
}
.service-icon i {
  position: absolute;
  transform: rotate(-45deg);
  right: 13px;
  bottom: 5px;
  font-size: 25px;
}

/**********resume***********/
.resume {
  border-left: 4px double #f14d8d;
  height: auto;
}

.bi-mortarboard-fill {
  color: #F59166;
  font-size: 50px;
}

.education {
  color: #F8B850;
}

.resume-img {
  width: 25px;
  height: 23px;
  left: -15px;
}

.resume-year {
  color: #F59166;
}

.education-card {
  color: #F8B850;
}

.education-title {
  font-weight: bold;
  color: #F59166;
  font-family: font-secondary;
}

.bi-briefcase-fill {
  color: #F59166;
  font-size: 50px;
}

.download-resume {
  font-family: my-font;
  box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.2);
}

/*********Fun facts*******/
.main-6 {
  background-image: url(../../img/facts.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #F59166;
}

.card {
  background-color: #333333;
  font-family: my-font;
  box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.card-footer {
  background-color: black;
}

.footer {
  color: #F59166 !important;
}

.card-title {
  color: #f14d8d;
  font-family: font-secondary;
}

.card-text {
  color: #F8B850;
}

.date-comment {
  color: #CDCAC6;
}

.card:hover .card-img-top {
  transform: scale(1.1);
  transition: 0.5s;
}