/* @font-face {
    font-family: 'IRANSansWeb';
    src: url("https://cdn.basiscore.net/_fonts/IRANSansWeb(FaNum).eot");
    src: url("https://cdn.basiscore.net/_fonts/IRANSansWeb(FaNum).eot") format("embedded-opentype"),
        url("https://cdn.basiscore.net/_fonts/IRANSansWeb(FaNum).woff") format("woff"),
        url("https://cdn.basiscore.net/_fonts/IRANSansWeb(FaNum).ttf") format("truetype")
} */
@font-face {
  font-family: "Ubuntu";
  src: url("../font/Ubuntu-R.woff") format("woff"),
    url("../font//DimaUbuntu.ttf") format("ttf");
}
@font-face {
  font-family: "Vazir";
  src: url("../font/Vazirmatn-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Vazir";
  src: url("../font/Vazirmatn-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Vazir";
  src: url("../font/Vazirmatn-Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Vazir";
  src: url("../font/Vazirmatn-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}
html {
  scroll-behavior: smooth;
}

* {
  padding: 0;
  margin: 0;
  font-family: "Vazir";
  direction: rtl;
}
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

html,
body {
  height: 100%;
  overflow-x: hidden;
}
.clr {
  clear: both;
}
#personaltemp .main {
  padding: 20px;
}
#personaltemp .header-container {
  padding: 21px 0 50px;
  display: grid;
  grid-template-columns: 4fr 1fr;
}
#personaltemp .CooperationBtn {
  font-size: 14px;
  border: 1px solid #363434;
  padding: 20px;
  color: #363434;
  display: inline-block;
}
#personaltemp .header-menu-btn {
  padding: 20px;
  display: inline-block;
}
#personaltemp .header-logo {
  text-align: left;
}
/* .introduction-container{
      margin-top: 35px;
  } */
#personaltemp .mainImage {
  width: 100%;
}
#personaltemp .exp-introduction1 {
  display: flex;
  flex-flow: column;
  justify-content: center;
  color: #333333;
  padding-top: 51px;
}
#personaltemp .image-intro {
  position: relative;
}
#personaltemp .oimageIntro {
  position: absolute;
  left: 13px;
  top: -50px;
  z-index: -1;
}
#personaltemp .linsIntro {
  position: absolute;
  bottom: -20px;
  right: -19px;
}
#personaltemp .hi-title {
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 20px;
}
#personaltemp .intro-title {
  font-weight: 700;
  font-size: 34px;
  padding-bottom: 20px;
}
#personaltemp .bolded-exp-intro {
  font-size: 18px;
  padding-bottom: 20px;
}
#personaltemp .light-exp-intro {
  font-size: 12px;
  padding-bottom: 20px;
}
#personaltemp .social-media-intro {
  text-align: center;
  padding-top: 84px;
}
#personaltemp .social-media-intro a {
  padding-left: 31px;
}
#personaltemp .social-media-intro a:last-child {
  padding-left: 0;
}
#personaltemp .scroll-box {
  padding-top: 55px;
  text-align: center;
  color: #333333;
}
#personaltemp .scrollText {
  font-weight: 300;
  font-size: 18px;
  padding-bottom: 18px;
}
#personaltemp .intro-video {
  /* padding: 163px 0 183px; */
  padding: 163px 0 60px;
  text-align: center;
}
#personaltemp .video-title {
  padding-bottom: 60px;
  color: #333333;
  font-weight: 700;
  font-size: 20px;
}
#personaltemp .video-box {
  position: relative;
}
#personaltemp #personaltemp .video-box .videoimg {
  width: 100%;
}
#personaltemp .videoCricle {
  position: absolute;
  z-index: -1;
  bottom: -50px;
  right: 37%;
}

#personaltemp .mySlides {
  display: none;
  /* justify-content: space-between; */
  justify-content: center;
}
/* .mySlides img {
      vertical-align: middle;
      width: 30%;
  } */

#personaltemp #personaltemp .slideshow-container {
  max-width: max-content;
  position: relative;
  margin: auto;
  overflow: scroll;
}

#personaltemp .prev,
#personaltemp .next {
  cursor: pointer;
  padding: 5px;
}

#personaltemp .dot {
  cursor: pointer;
  height: 7px;
  width: 7px;
  /* margin: 0 32px; */
  background-color: #333333;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

#personaltemp .active {
  background-color: #ffffff;
  border: 3px solid #333333;
  width: 4px !important;
  height: 4px !important;
}
#personaltemp .sliderDots {
  text-align: center;
}

#personaltemp .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
#personaltemp .rectangle-box {
  width: 311px;
  height: 334px;
  margin-left: 15px;
}
#personaltemp .rectangleSlides {
  width: max-content;
}
#personaltemp .darkestBox {
  background: #333333;
  color: #ffffff;
}
#personaltemp .intro-rect-title {
  font-size: 26px;
  line-height: 30px;
  padding-bottom: 30px;
}
#personaltemp .intro-rect-exp {
  font-size: 14px;
  line-height: 16px;
}
#personaltemp .inner-box {
  padding: 70px 40px 120px 40px;
}
#personaltemp .lightestBox {
  background: #d6d6d6;
  color: #333333;
}
#personaltemp .lightBox {
  color: #333333;
  background: #d6d6d6;
}
#personaltemp .readMoreLink svg {
  padding-right: 13px;
  vertical-align: middle;
}
#personaltemp .readMoreLink {
  font-size: 12px;
}
#personaltemp .slider-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  padding-right: 20px;
  padding-left: 20px;
}
.projectsShowBox {
  padding-top: 53px;
  /* padding-top: 106px; */
  text-align: center;
}
#personaltemp .boldTitle {
  font-weight: 700;
  font-size: 20px;
  color: #333333;
  padding-bottom: 60px;
  text-align: center;
}
#personaltemp .slidertitlesbox span {
  padding: 0 5px;
  font-size: 16px;
}
#personaltemp .slidertitlesbox {
  padding-bottom: 60px;
}
/* .projects-colBpox{
      /* display: flex; */
/* grid-template-columns: 1fr 1fr 1fr; */
/* justify-content: center; */
/* } */
#personaltemp .projects-col img {
  /* padding: 0 32px 32px; */
  padding: 0 0 32px;
}
#personaltemp .proslider-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  /* padding: 60px 44px 125px 0; */
  padding: 0px 0px 75px 0;
}
/* .proreadMoreLink{
      padding-left: 50px;
  } */
#personaltemp .commentSlide {
  display: grid;
  /* grid-template-columns: 1fr 3fr; */
}
#personaltemp .profile-commentBox {
  position: relative;
  text-align: center;
}
#personaltemp .commentContent {
  color: #333333;
}
#personaltemp .commentContent p {
  padding: 10px 0;
  font-size: 14px;
}
#personaltemp .downSvg {
  float: left;
}
#personaltemp .linesCm {
  position: absolute;
  left: 31px;
  bottom: 0;
}
#personaltemp .clientNameBox {
  /* padding: 30px 0 46px; */
  text-align: center;
  padding: 24px 0 15px;
}
#personaltemp .clientNameT {
  padding-bottom: 12px;
  font-size: 18px;
}
#personaltemp .subNameC {
  font-size: 12px;
}
#personaltemp .circleCm {
  position: absolute;
  top: -41px;
  right: -5px;
}
#personaltemp .clientCommentsContainer {
  position: relative;
}
/* .comment-slider-footer{
      position: absolute;
      bottom: 0;
      left: 164px;
  } */
#personaltemp .cmNextAndPrev {
  /* padding-left: 200px; */
}
#personaltemp .contactMeContainer {
  background: #363434;
  margin-top: 66px;
  text-align: center;
}
#personaltemp .contactTitle {
  color: #ffffff;
  font-size: 18px;
  padding: 45px 0 25px;
}
#personaltemp .contactMeText {
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 80px;
  position: relative;
}
#personaltemp .contactMeButton {
  display: inline-block;
  padding: 20px 40px;
  background: #ffffff;
  font-size: 14px;
}
#personaltemp .contactMeBtn {
  padding-bottom: 80px;
}
#personaltemp .contactMeSocialMedia {
  padding-bottom: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8vw;
}
#personaltemp .contactMeSocialMedia svg {
  /* padding-left: 40px; */
}
#personaltemp .contactMeSocialMedia svg:last-child {
  padding-left: 0;
}
#personaltemp .helloImg {
  position: absolute;
  left: 23%;
  top: 11px;
}
#personaltemp .projectCounts {
  display: grid;
}
#personaltemp .count {
  font-weight: 700;
  font-size: 44px;
}
#personaltemp .projectCountImg {
  position: absolute;
  right: 12%;
}
#personaltemp .projectCountContainer {
  position: relative;
  /* padding-top: 90px; */
  /* padding-bottom: 88px; */
  padding-top: 45px;
  padding-bottom: 44px;
}
#personaltemp .projectNum {
  text-align: center;
  padding-bottom: 57px;
}
#personaltemp .projectNum p {
  padding-top: 12px;
  font-size: 20px;
}
#personaltemp .imgSubText {
  background: #333333;
  color: #ffffff;
  padding: 20px;
  width: 274px;
  height: 115px;
  position: relative;
  top: -9px;
}
#personaltemp .imgSubExp {
  padding-bottom: 52px;
  font-size: 14px;
}
#personaltemp .imgSubLinkBox {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  column-gap: 2vw;
}
#personaltemp .imgSubLinkBox svg {
  vertical-align: middle;
}
#personaltemp .weblogSlideBox {
  width: 314px;
  overflow: hidden;
  position: relative;
  margin-left: 20px;
}
#personaltemp .weblogSlideBox img {
  width: 314px;
  height: 278px;
}
/* .weblogSlider{
      display: flex;
      justify-content: space-around;
      width: max-content;
      overflow-x: scroll;
  } */
#personaltemp .weblogDateImg {
  mix-blend-mode: difference;
  position: absolute;
  color: #f9f9f9;
  font-weight: 300;
  top: 17px;
  right: 20px;
}
#personaltemp .contactMeProjectBox {
  padding-top: 109px;
  color: #333333;
}
#personaltemp .contactFormBox {
  padding-bottom: 56px;
}
#personaltemp .contactFormText {
  font-weight: 300;
  font-size: 18px;
  padding-bottom: 36px;
}
.contactFormText p {
  text-align: justify;
}
#personaltemp .contactMeInfo p {
  font-weight: 300;
  font-size: 20px;
}
#personaltemp .contactMeInfo p:first-child {
  padding-bottom: 16px;
}
#personaltemp .ContactForm {
  background-color: #333333;
  padding: 30px;
  width: 388px;
  position: relative;
}
#personaltemp .ContactForm input {
  display: block;
  background-color: #333333;
  color: #ffffff;
  border: none;
  border-bottom: solid #ffffff;
  padding: 8px;
  outline: none;
  width: 100%;
  margin: 20px 0;
}
#personaltemp .ContactForm input::placeholder {
  opacity: 1;
}
#personaltemp .ContactForm label {
  color: #ffffff;
  padding-bottom: 15px;
  padding-top: 20px;
  font-size: 14px;
}
#personaltemp .formButton {
  background-color: #ffffff;
  color: #333333;
  border: none;
  padding: 16px 40px;
  cursor: pointer;
}
#personaltemp .contactFormSec {
  display: flex;
  justify-content: end;
  padding-bottom: 50px;
}
#personaltemp .contactFormExp {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
#personaltemp .footer-container {
  display: flex;
  justify-content: space-between;
  color: #333333;
  padding-bottom: 50px;
}
#personaltemp .socialMediaFooter svg {
  padding-left: 20px;
}
#personaltemp .copyRight {
  direction: ltr;
}
#personaltemp .projects-col .pro-img img {
  /* position: relative;
      width: 325px; */
  transition: 0.3s;
}
#personaltemp .projects-col .pro-img img:hover {
  filter: brightness(50%);
}
@media (pointer: fine) {
  .projects-col .pro-img img:hover {
    filter: brightness(50%);
  }
}
/* .projects-col .pro-img:hover > .overlay{
      position: absolute;
      background-color:#000;
      opacity:0.5;
      width: 100%;
      height: 100%;
  } */
#personaltemp .overlay {
  transition: 0.5s ease;
  position: absolute;
  top: 40px;
  right: 55px;
  opacity: 0;
}
#personaltemp .pro-img:hover .overlay {
  opacity: 1;
}
#personaltemp .pro-img {
  position: relative;
}
#personaltemp .proName {
  color: #ffffff;
}
#personaltemp .overlay2 {
  color: #ffffff;
  position: absolute;
  transition: 0.5s ease;
  bottom: 70px;
  left: 51px;
  opacity: 0;
}
#personaltemp .pro-img:hover .overlay2 {
  opacity: 1;
}
#personaltemp .contacLines {
  position: absolute;
  top: -20px;
  left: -70px;
}
#personaltemp .contactCircle {
  position: absolute;
  z-index: -1;
  right: -54px;
  bottom: 65px;
}
#personaltemp .headPageContainer {
  text-align: center;
  color: #333333;
}
#personaltemp .mainTitle {
  position: relative;
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 20px;
}
#personaltemp .mainTitle img {
  position: absolute;
  top: -27px;
  left: 39%;
}
#personaltemp .secBoldTitle {
  font-weight: 700;
  font-size: 34px;
  padding-bottom: 20px;
}
#personaltemp .boldHeadExp {
  font-weight: 400;
  font-size: 18px;
}
#personaltemp .lightHeadExp {
  font-weight: 400;
  font-size: 12px;
  padding-top: 20px;
}
#personaltemp .resumeBtn a {
  font-size: 18px;
}
#personaltemp .resumeBtn {
  padding: 70px 0 35px;
}
#personaltemp .aboutMeSlide {
  display: grid;
  color: #333333;
}
#personaltemp .aboutSlideTitle {
  font-weight: 700;
  font-size: 34px;
  padding-bottom: 30px;
  text-align: center;
}
#personaltemp .aboutMeExpP {
  text-align: center;
}
#personaltemp .aboutMeSlideExp {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
#personaltemp .aboutMeSlideImg {
  text-align: center;
  padding-bottom: 34px;
}
#personaltemp .aboutSlideText {
  font-weight: 400;
  font-size: 13px;
}
#personaltemp .aboutMeslider-footer {
  margin: auto;
  justify-content: space-between;
}

#personaltemp .aboutMeSliderContainer {
  padding-bottom: 80px;
}
#personaltemp .header-menu-btn:hover {
  font-weight: bold;
}
#personaltemp .contactBox {
  padding: 32px;
  background-color: #f6f6f6;
}
#personaltemp .contactMEInfoBox {
  color: #ffffff;
  background-color: #363434;
  padding: 30px 25px;
}
#personaltemp .contactMEInfoBoxTitle {
  font-weight: 600;
  font-size: 18px;
  padding-bottom: 21px;
}
#personaltemp .contactMEInfoBox {
  color: #c9c9c9;
  font-size: 14px;
}
#personaltemp .contactDetailsBox {
  direction: ltr;
  text-align: right;
  padding: 55px 0 27px;
}
#personaltemp .contactDetailsBox:last-child {
  padding-top: 0;
}
#personaltemp .contactDetailsBox svg {
  vertical-align: middle;
  padding-left: 28px;
}
#personaltemp .contact_wrapper .contactMeSocialMedia a {
  padding-left: 32px;
}
#personaltemp .contact_wrapper .contactMeSocialMedia {
  padding-bottom: 6px;
}
#personaltemp .contactDetails {
  padding-bottom: 95px;
}
#personaltemp .formInputsBox {
  /* display: grid;
      grid-template-columns: 1fr 1fr; */
  padding-top: 25px;
}
.contactFormBigBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-right: 47px; */
}
#personaltemp .formInputsBag {
  color: #363434;
}
#personaltemp .formInputsBag p {
  padding-bottom: 10px;
  color: #8d8d8d;
  font-size: 12px;
}
#personaltemp .formInputsBag input {
  border: none;
  border-bottom: 1px solid #8d8d8d;
  background-color: transparent;
  outline: none;
  padding: 5px;
  margin-bottom: 45px;
  width: 91%;
}
#personaltemp .formInputsBag input:focus {
  border-bottom: 1px solid #363434;
}
#personaltemp .radio-title {
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 15px;
}
#personaltemp .forminput1:focus-within p {
  color: #363434;
}
#personaltemp .forminput2:focus-within p {
  color: #363434;
}
#personaltemp .forminput3:focus-within p {
  color: #363434;
}
#personaltemp .forminput4:focus-within p {
  color: #363434;
}

/* The container */
#personaltemp .radiocontainer {
  position: relative;
  padding-left: 14px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 5px;
}
#personaltemp .checkmarkSpan {
  font-size: 10px;
}

/* Hide the browser's default radio button */
#personaltemp .radiocontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

#personaltemp .checkmark {
  position: absolute;
  top: 7px;
  left: 0;
  height: 10px;
  width: 10px;
  background-color: #e0e0e0;
  border-radius: 50%;
}
#personaltemp .radiocontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

#personaltemp .radiocontainer input:checked ~ .checkmark {
  background-color: #363434;
}

#personaltemp .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

#personaltemp .radiocontainer input:checked ~ .checkmark:after {
  display: block;
}

#personaltemp .radiocontainer .checkmark:after {
  top: 0;
  left: 3px;
  border-radius: 50%;
  color: white;
  font-size: 7px;
  content: "✓";
}
#personaltemp .contact_wrapper {
  margin: 123px 0 77px;
}
#personaltemp .yourMessage {
  padding-top: 45px;
}
#personaltemp .yourMessage input {
  width: 74%;
  padding-bottom: 11px;
  font-size: 10px;
}
#personaltemp .sendFormBtn {
  background: #363434;
  cursor: pointer;
  color: #ffffff;
  padding: 20px;
  border: none;
  font-size: 14px;
  width: 100%;
}

#personaltemp .blogSearchContainer {
  position: relative;
  text-align: center;
  padding-top: 100px;
}
#personaltemp .blogSearchContainer input {
  font-size: 18px;
  padding: 17px 55px;
  border: 1px solid #363434;
  color: #363434;
  outline: none;
  padding-right: 55px;
  width: 62%;
}
#personaltemp .blogSearchContainer svg {
  position: absolute;
  bottom: 22px;
  right: 9%;
}
#personaltemp .articlesContainer {
  padding-top: 100px;
  margin: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
}
#personaltemp .articlesContainer .weblogSlider {
  padding-bottom: 31px;
}
#personaltemp .weblogSlider {
  width: max-content;
}
#personaltemp .pageNumber {
  display: inline-block;
  cursor: pointer;
  padding: 5px 9px;
  border: 1px solid #333333;
  margin: 10px;
  color: #333333;
}
#personaltemp .paginationBox {
  text-align: center;
}
#personaltemp .activePage {
  background: #333333;
  color: #ffffff;
}
#personaltemp .morePageD {
  border: none;
}
#personaltemp .paginationContainer {
  padding-bottom: 170px;
}
#personaltemp .articleTitle {
  font-weight: 700;
  font-size: 24px;
}
#personaltemp .articliSmallInfo {
  padding: 58px 0 48px;
}
#personaltemp .arSmallInfo {
  color: #777777;
  display: inline-block;
  padding-left: 15px;
  font-size: 12px;
}
#personaltemp .articleImage {
  text-align: center;
  padding-bottom: 48px;
}
#personaltemp .articleImage img {
  width: 100%;
}
#personaltemp .articleContent {
  color: #474747;
}
#personaltemp .firstParagraph {
  padding-bottom: 20px;
  font-size: 14px;
}
#personaltemp .boldPTitle {
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 35px;
}
#personaltemp .secondParagraph p {
  text-align: justify;
}
#personaltemp .secondParagraph {
  padding-bottom: 80px;
  font-size: 14px;
}
#personaltemp .borderedParagraph {
  border-right: 1px solid #dfdfdf;
  padding-right: 30px;
  margin-bottom: 30px;
  font-size: 14px;
}
#personaltemp .writersName {
  padding: 30px 0;
}
#personaltemp .lastParagraph {
  border-bottom: 1px solid #dfdfdf;
  margin-bottom: 47px;
  font-size: 14px;
}
#personaltemp .lastParagraph svg {
  padding-left: 27px;
}
#personaltemp .lastParagraph p {
  padding-bottom: 45px;
}
#personaltemp .freefotmExpBox {
  margin: auto;
  color: #333333;
  font-size: 13px;
}
#personaltemp .freeformComments {
  margin: 117px 0 112px;
}
#personaltemp .tablinks {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 12px;
  font-size: 16px;
}
#personaltemp .tabcontent {
  display: none;
  min-height: 300px;
  position: relative;
  display: none;
}
#personaltemp .contact_wrapper .contactMeSocialMedia a:last-child {
  padding-left: 0 !important;
}
#personaltemp .contact_wrapper .contactMeSocialMedia a:first-child {
  padding-right: 30 !important;
}
#personaltemp .blogHeadTitleImg {
  left: 39% !important;
}
#personaltemp .abouME-scroll-box {
  padding-bottom: 33px;
}
#personaltemp .nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

#personaltemp .navbar .menu-items {
  display: flex;
}

#personaltemp .navbar .nav-container li {
  list-style: none;
}

#personaltemp .navbar .nav-container a {
  font-size: 14px;
  padding: 19px 0px;
  display: inline-block;
  width: 127px;
  border-bottom: 0.7px solid rgba(34, 34, 34, 0.1);
}
#personaltemp .navbar .nav-container .CooperationBtn {
  border-bottom: 1px solid #363434;
  margin-top: 25px;
}
#personaltemp .navbar .nav-container .noBorder {
  border-bottom: none !important;
}

#personaltemp .navbar .nav-container a:hover {
  font-weight: bolder;
}

#personaltemp .nav-container {
  display: block;
  position: relative;
  height: 60px;
}

#personaltemp .nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  /* top: 20px;
      left: 20px; */
  z-index: 9999;
  opacity: 0;
  cursor: pointer;
  right: 20px;
}

#personaltemp .nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  /* top: 17px;
      left: 20px; */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 20px;
}

#personaltemp .nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

#personaltemp .nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

#personaltemp .nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

#personaltemp .nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

#personaltemp .navbar .menu-items {
  /* padding-top: 30px; */
  background-color: #ffffff;
  width: 133%;
  transform: translateY(-150%);
  display: flex;
  flex-direction: column;
  /* margin-left: -40px;
      padding-left: 50px; */
  transition: transform 0.5s ease-in-out;
  text-align: center;
  position: relative;
  z-index: 1;
}

#personaltemp .navbar .menu-items li {
  color: rgba(51, 51, 51, 0.6);
}
#personaltemp .navbar .menu-items li:last-child {
  margin-bottom: 28px;
}
#personaltemp .logo {
  position: absolute;
  top: 5px;
  left: -75px;
  font-size: 1.2rem;
  color: #0e2431;
  padding-left: 20px;
}

#personaltemp .nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateY(0);
}

#personaltemp
  .nav-container
  input[type="checkbox"]:checked
  ~ .hamburger-lines
  .line1 {
  transform: rotate(45deg);
}

#personaltemp
  .nav-container
  input[type="checkbox"]:checked
  ~ .hamburger-lines
  .line2 {
  transform: scaleY(0);
}

#personaltemp
  .nav-container
  input[type="checkbox"]:checked
  ~ .hamburger-lines
  .line3 {
  transform: rotate(-45deg);
}

#personaltemp .nav-container input[type="checkbox"]:checked ~ .logo {
  display: none;
}
#personaltemp #MixItUp746CD5 {
  overflow-x: hidden;
}
#personaltemp .mixitup-control-active {
  font-weight: bold;
}
#personaltemp .activeTab {
  font-weight: bold;
}
#personaltemp .blured {
  height: 100vh;
  background: transparent;
  position: fixed;
  width: 100%;
  backdrop-filter: blur(2px);
  background: rgba(34, 34, 34, 0.2);
  display: none;
  z-index: 1;
}
#personaltemp .nav-container input[type="checkbox"]:checked ~ .blured {
  display: block;
}
.videoimg {
  width: 100%;
}
.slideshow-container {
  overflow: scroll;
}
.logoLink {
  text-align: left;
  border-bottom: none !important;
}
.mainImg {
  width: 90%;
}
.image-intro {
  width: 362px;
}

/*! new new new new new */

html,
body {
  scroll-behavior: smooth;
}

.ectParagraph2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* truncate to 4 lines */
  -webkit-line-clamp: 2;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 10px;
  margin-bottom: 10px;
}

.ectParagraph2_2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* truncate to 4 lines */
  -webkit-line-clamp: 2;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.imgComment {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navbar .menu-items {
  width: 100vw !important;
}

.boldHeadExp,
.lightHeadExp {
  margin: 0 auto;
}

.boldHeadExp {
  max-width: 80%;
}

.lightHeadExp {
  max-width: 90%;
}

#personaltemp .imgSubText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}