/*
 Theme Name:     Child Theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
@font-face {
    font-family: 'YekanBakh';
    src: url('../child-theme/assets/fonts/YekanBakh-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'YekanBakh';
    src: url('../child-theme/assets/fonts/YekanBakh-Fat.ttf') format('truetype');
    font-weight: 800; /* You can adjust this value */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'YekanBakh';
    src: url('../child-theme/assets/fonts/YekanBakh-Hairline.ttf') format('truetype');
    font-weight: 100; /* You can adjust this value */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'YekanBakh';
    src: url('../child-theme/assets/fonts/YekanBakh-Heavy.ttf') format('truetype');
    font-weight: 900; /* You can adjust this value */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'YekanBakh';
    src: url('../child-theme/assets/fonts/YekanBakh-Light.ttf') format('truetype');
    font-weight: 400; /* You can adjust this value */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'YekanBakh';
    src: url('../child-theme/assets/fonts/YekanBakh-Medium.ttf') format('truetype');
    font-weight: 500; /* You can adjust this value */
    font-style: normal;
  }
  
  @font-face {
    font-family: 'YekanBakh';
    src: url('../child-theme/assets/fonts/YekanBakh-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  
   
  
  body {
  font-family: 'YekanBakh';
  }
  
  h1, h2, h4, h5, th, button, label, a, optgroup, td{
    font-family: "YekanBakh" !important;
    color: #2c2f34;
  }
  
  h1, h2, h3, h4{line-height: normal;}
  
  h3 {
    font-family: "YekanBakh" !important;
    color: #505560f0;
  }
  p {
    font-family: "YekanBakh" !important;
    color: #282828;
    font-size: 1.2em;
    direction: rtl;
    line-height: 2em;
    word-spacing: normal !important;
  }
  span {
    font-family: "YekanBakh" !important;
    color: #282828;
    word-spacing: normal !important;
  }

.myIcons{
  font-family: FontAwesome !important;
  font-weight: 900 !important;
  color: #00D084;
}

.container-price{
    text-align: center;
    margin-bottom: 15px;
}  
.price{
  color: #0088cc;
  font-weight: bolder;
  font-size: x-large;
  padding: 5px;
}


.container-order-btn{
    text-align: center;
    margin-bottom: 5px;
}



/* Style Hover button */
  
.hover-button {
  border-radius: 10px;
  border: none;
  color: white;
  padding: 3px 73px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s;
  font-size: x-large;
  }
  
  .hover-button:before {
    content: '';
    position: absolute;
    top: 0;
    right: -200%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    transition: all 0.4s;
    display: block;
    transform: skewX(-20deg);
  }
  
  .hover-button:hover:before {
    right: 120%;
    transition-duration: 0.7s; /* Adjust speed here */
  }


  /* Style Hover background BOX */
  .hover-box {
    position: relative;
    overflow: hidden;
    /* Additional styling can be added here if needed */
  }
  
  .hover-box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start from the right */
    width: 50%; /* Make the light narrower */
    height: 100%;
    /* Use a gradient or a solid color for a more beautiful effect */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    display: block;
    transform: skewX(-20deg);
    animation: slideLeft 3s linear infinite; /* Animation name, duration, timing function, iteration count */
  }
  
  @keyframes slideLeft {
    from {
      left: 100%; /* Start from the right */
    }
    to {
      left: -1050%; /* End at the left, adjusting for the narrower light */
    }
  }
  

  /* Style Hover text BOX */
  .hover-text {
    position: relative;
    overflow: hidden;
    background-color: blueviolet;
    color: white;
    padding: 6px;
    border-radius: 10px;
  }
  
  .hover-text:before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start from the right */
    width: 50%; /* Make the light narrower */
    height: 100%;
    /* Use a gradient or a solid color for a more beautiful effect */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    display: block;
    transform: skewX(-20deg);
    animation: slideLeft 3s linear infinite; /* Animation name, duration, timing function, iteration count */
  }
  
  @keyframes slideLeft {
    from {
      left: 100%; /* Start from the right */
    }
    to {
      left: -1050%; /* End at the left, adjusting for the narrower light */
    }
  }
  
  


  /* Style buttons */
  .price-button{
    background-color: #0088cc;
    font-size: x-large;
    font-weight: 600;
  }

  .contact-button{
    border-radius: 20px;
    border: none;
    text-align: center;
    background-color: #04608e;
    margin: auto !important;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    max-width: 200px;
  }

  @media screen and (min-width: 980px) {
    .contact-button{ 
      margin-left: 20px !important;
      margin-right: -10px !important;
    }
  }

  .contact-button p {
    color: white;
    font-weight: 500;
    font-size: medium;
  }

  .contact-button a {
    color: white;
    font-weight: 500;
    font-size: large;
    text-align: center;
  }

 

  
  /* Start CUSTOMIZE last post sidebar in divi */
  #divi-sidebar-last-post {
    position: relative; /* Relative positioning for the container */
  }
  
  #divi-sidebar-last-post h2{
    font-size: large;
    text-align:right;  
    border-bottom: 1px solid lightgray;
    margin-bottom: 5px;
    padding: 10px;
  }
  #divi-sidebar-last-post{
    margin-bottom: 0px !important;
    border: 1px solid;
    padding: 10px;
    border-radius: 10px;
    border-color: lightgray;
  }
  
  #divi-sidebar-last-post ul {
    padding-left: 0; /* Removes padding from the ul if it exists */
    direction: rtl;
    font-weight: bold;
  }
  
  #divi-sidebar-last-post li {
    position: relative; /* Relative positioning for the li */
    list-style-type: none; /* Removes the default list style */
    padding-right: 30px; /* Space for the circle on the right */
    direction: rtl; /* For right-to-left languages */
  }
  
  #divi-sidebar-last-post li:before {
    content: ''; /* Necessary for pseudo-elements */
    position: absolute; /* Absolute positioning relative to the li */
    right: 1px; /* Aligns the circle to the right edge */
    top: 50%; /* Centers the circle vertically */
    transform: translateY(-50%); /* Centers the circle */
    width: 10px; /* Circle width */
    height: 10px; /* Circle height */
    background-color: #0088cc; /* Default circle color */
    border-radius: 50%; /* Makes it round */
    transition: background-color 0.2s ease-in-out; /* Smooth transition for hover */
  }
  
  #divi-sidebar-last-post li:after {
    content: '';
    position: absolute;
    margin-top: -5px;
    margin-bottom: -5px;
    right: 5px; /* Align with the circle */
    top: 0;
    bottom: 0;
    width: 2px; /* Line thickness */
    background-color: lightgray; /* Default line color */
    z-index: -1; /* Places the line behind the li elements */
    transition: background-color 0.2s ease-in-out; /* Smooth transition for hover */
  }
  
  /* Adjusts the top position of the line to start from the first li */
  #divi-sidebar-last-post li:first-child:after {
    top: 50%; /* Starts from the middle of the first circle */
  }
  
  #divi-sidebar-last-post li:last-child:after {
    bottom: 50%;
  }
  
  /* Hover effect for circle and line */
  #divi-sidebar-last-post li:hover:before,
  #divi-sidebar-last-post li:hover:after {
    background-color: coral; /* Changes color to orange on hover */
  }
  #divi-sidebar-last-post li a:hover {
    transition: .5s;
    color: coral;
  
  }
  
  .widget_block{
  margin-bottom: 5px !important;
  }
  /* End CUSTOMIZE last post sidebar in divi */

  
  
  


/* main menu style background */
#main-header {

    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

  #top-menu a  {
    font-size: large;
  }







  .et_pb_button_module_wrapper .et_pb_button {
    background-color: #0088cc; /* Telegram blue */
    color: #ffffff; /* white text */
    padding: 10px 20px; /* spacing */
    border-radius: 4px; /* rounded corners */
    font-size: 16px;
    text-align: center; /* center align text */
    
  }
  

 
/* Start style meta in post title */
#my-post-content .et_pb_row_0 {
  
  width: 90%;
  direction: rtl; /* For right-to-left languages */
  justify-content: space-between;
  text-align: center; /* Center text within the element */
}

.author-name {
  order: 3; /* Change order as needed */
}

.date {
  order: 2; /* Change order as needed */
}

.category {
  order: 1; /* This item will stay in its original position */
}

/* Add Icons to the Divi Blog and Post Meta */
.main-meta-box {
  display: flex; /* Use flexbox layout */
  flex-wrap: wrap; /* Allow the items to wrap as needed */
  gap: 10px; /* Optional: adds some space between the spans */
  justify-content: center; /* Center items horizontally */
  text-align: center; /* Center text inside the items */
  width: 100%; 
  
}

.main-meta-box span {color: white;}

.info-line{
  color: white;
}

.author-icon::before, .date-icon::before, .category-icon::before {
  font-family: 'ETmodules';
  content: ""; /* You'll insert the respective content code for each icon here */
  color: #2a2f36;
}

.author-icon::before {
  color: white;
  font-size: larger;
  content: "\270E"; /* Example content code for an author icon */
}

.date-icon::before {
  color: white;

  padding-right: 15px;
  content: "\e023"; /* Example content code for a date icon */
}

.category-icon::before {
  color: white;
  padding-right: 15px;
  content: "\e07c"; /* Example content code for a category icon */
}

 

/* Increase font size of icons */
.author-icon {
  padding-left: 3px;
  font-size: 20px; /* Adjust size as needed */
}

.date-icon {
  padding-left: 3px;
  padding-top: 5px;
 }

/* Move text up by 5px */
#text-author {
  position: relative;
  bottom: 3px; 
}

#text-date {
  position: relative;
  bottom: 0px; 
}
#text-category {
  position: relative;
  bottom: 0px; 
}

/* End style meta in post title */



/* padding box in blog grid */

.et_pb_column .et_pb_blog_grid .column.size-1of2{
        padding: 10px;
}

.et_pb_column .et_pb_blog_grid .column.size-1of1 .et_pb_post {
    margin-bottom: 15px !important;
    margin-top: 15px !important;
}

.et_blog_grid_equal_height article {
  margin-bottom: 20px !important; 
}


/* Style alignment of text in blog */
@media (min-width: 479px) {  /* Targets desktops and tablets (min-width of 768px) */
  .custom-post-align {
    text-align: justify;
	direction: rtl;
  }
}

@media (max-width: 479px) {  /* Targets phones (max-width of 767px) */
  .custom-post-align {
    text-align: right;
	direction: rtl;
  }
}