.wrapper{
  display: flex;
  padding-top: 10px;
  direction: rtl;
}
.wrapper .static-txt{
  font-size: 18px;
  font-weight: 400;
  
}
.wrapper .dynamic-txts{
  margin-left: 15px;
  height: 60px;
  line-height: 40px;
  overflow: hidden;
  position: relative;
  top:-30px;
}
.dynamic-txts li{
  list-style: none;
  font-size: 18px;
  position: relative;
  top: 0;
  animation: slide 12s steps(4) infinite;
}
@keyframes slide {
  100%{
    top: -360px;
  }
}
.font-myfont{
   font-family: "Peshang_Des_3_Bold";
  src: url("../dist/myfont/Peshang_Des_3_Bold.ttf");
}
.dynamic-txts li span{
  position: relative;
  margin: 5px 0;
  line-height: 90px;
}
.dynamic-txts li span::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-right: 2px solid #FC6D6D;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing {
  40%, 60%{
    right: calc(100% + 30px);
  }
  100%{
    right: 0;
  }
}


/* new port */
  .text-icon::after {
    content: '|';
    animation: blink-caret 0.75s infinite;
}

@keyframes blink-caret {
    50% {
        opacity: 0;
    }
}
html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
}
/* Define the styles for your styled section */
.styled-section {
    background-color: #f3f3f3; /* Change to your desired background color */
    padding: 40px 0; /* Adjust padding as needed */
    text-align: center; /* Align text to the center */
}

.styled-section h2 {
    font-size: 2rem; /* Adjust the font size */
    color: #333; /* Set the color of the title */
    margin-bottom: 20px; /* Add space between title and text */
}

.styled-section p {
    font-size: 1.2rem; /* Adjust the font size */
    color: #666; /* Set the color of the text */
}
body {
    margin: 0;
    padding: 0;
}
*{
  margin: 0;
  padding: 0;
}
.body-overlay {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    background-size: cover;
}