@import url(fonts.css);

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  direction: rtl;
  width: 100%;
  font-family: 'Yakan', Helvetica, Arial, sans-serif;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, #efefef 5px, #efefef 2px);
  background-color: #eee;
}

/* Nav Bar */
nav {
  background-color: #0F66DD;
  width: 100%;
  height: 60px;
  margin: auto;
  position: relative;
  direction: rtl;
  font-family: 'Yakan';
  z-index: 200;
}

.main_nav_dropdown {
  background-color: #0a4faf;
}

.dropdown_menu {
  width: 100px;
  text-align: center;
  padding: 5px 0px;
  background-color: #0a4faf;
  box-shadow: 0px 20px 49px rgba(0, 0, 0, 0.67);
  position: absolute;
  display: none;
  border-radius: 10px;
}

/* Show the dropdown menu when hovering over the parent list item */
.main_nav_dropdown:hover .dropdown_menu {
  display: block;
}

.main_nav_dropdown .dropdown_menu li {
  margin: 0px;
  width: 100%;
}

.main_nav_dropdown .dropdown_menu li a {
  padding: 0;
  line-height: 30px;
}

nav ul {
  margin-bottom: 0;
}

#bc1,
#bc2,
.btn {
  display: none;
  position: relative;
  left: 5%;
  top: -100%;
}

nav label {
  margin-bottom: 0 !important;
}

nav label.logo {
  float: right;
  font-size: 25px;
  padding: 0 5%;
  color: royalblue;
  line-height: 60px;
  font-weight: 800;
  margin-bottom: 0;
  height: 60px;
}

nav label.logo img {
  position: relative;
  height: 100%;
  padding: 5px 0;
}

nav ul {
  float: right;
}

nav ul li {
  display: inline-block;
  list-style: none;
}

nav ul li a {
  color: #d4d2d2;
  text-decoration: none;
  padding: 0 15px;
  font-size: 14px;
  line-height: 60px;
  display: block;
}

nav ul li a:hover {
  background-color: royalblue;
  color: white;
}

.search-icon {
  float: left;
  position: relative;
  left: 5%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: #d4d2d2;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
}

.search-box {
  position: absolute;
  float: left;
  background-color: royalblue;
  left: 5%;
  top: -65px;
  width: 300px;
  height: 60px;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.17s ease;
}

.search-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: royalblue;
  margin: -20px 0 0;
}

nav form {
  width: 100%;
  height: 38px;
  right: 0;
  background-color: royalblue;
  display: flex;
  overflow: hidden;
  padding: 2px;
  border-radius: 4px;
}

.search {
  width: 95%;
  background-color: royalblue;
  color: white;
  padding: 0 10px;
  font-size: 14px;
  border: 0;
  outline: none;
}

.search::placeholder {
  color: white;
}

.sub {
  font-size: 14px;
  padding: 0 10px;
  border: 0;
  background-color: white;
  color: royalblue;
  border-radius: 4px;
  cursor: pointer;
}

#bc2:checked~.search-box {
  top: 60px;
}

@media (max-width:1052px) {
  nav {
    width: 100%;
  }

  nav ul {
    position: fixed;
    width: 300px;
    background-color: #0F66DD;
    height: calc(100% - 60px);
    text-align: center;
    transition: all 0.5s;
    top: 60px;
    right: -800px;
    overflow: scroll;
  }

  nav ul li {
    display: block;
    padding: 5px 0;
  }

  nav ul li a {
    color: white;
  }

  nav ul li a:hover {
    color: black;
  }

  nav label.logo {
    position: absolute;
    width: 100%;
    text-align: center;
  }

  .btn {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    top: 10px;
    right: 5%;
    color: #d4d2d2;
    font-size: 25px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    z-index: 20;
  }

  #bc1:checked~ul {
    right: 0px;
  }
}

@media (max-width:652px) {
  nav ul {
    width: 100%;
  }
}

/* .bottom-nav ul{
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  right: 50%;
  top: 50%;
  transform: translateX(50%) translateY(-50%);
  width: 100%;
}

.bottom-nav ul .right{
  position: relative;
  width: 50%;
  float: right;
}

.bottom-nav ul li{
  display: inline-block;
  position: relative;
  margin: 0 20px;
  color: #ffffff;
  font-size: 20px;
}
.bottom-nav ul .left{
  position: relative;
  width: 50%;
  float: left;
  height: 100%;
}

.bottom-nav ul .left li{
  position: relative;
  float: left;
  width: 100%;
}

.bottom-nav ul .left li a{
  display: block;
  position: relative;
  width: 100%;
}
.bottom-nav ul .left li i{
  position: relative;
  float: left;
  font-size: 30px;
  color: #ffffff;
}

.bottom-nav ul .left li input{
  position: relative;
  background-color: #2b255a00;
  border: none;
  width: 90%;
  border-radius: 5px;
  color: #ffffff;
  display: none;
}

.bottom-nav ul .right.hide{
  display: none;
}

.bottom-nav ul .left.search{
  position: relative;
  width: 100%;
  float: left;
}

.bottom-nav ul .left.search li input{
  display: inline-block;
} */

/* Nav Bar End */

main {
  width: 100%;
  height: 94vh;
  position: relative;
  background-color: #0F66DD;
}

.slider {
  position: relative;
  width: 100%;
  height: 94vh;
  overflow: hidden;
}

.slider::-webkit-scrollbar {
  width: 0;
}

.slider iframe {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
}

.flash-down {
  position: absolute;
  font-size: 50px;
  color: #ffffff;
  bottom: 0%;
  z-index: 1000000;
  text-align: center;
  right: 50%;
  transform: translateX(50%);
}

.flash-down:hover {
  color: #003349;
}

.flash-down.section1:hover {
  color: #003349;
}

.main-section {
  padding: 0 15%;
  font-family: 'Yakan';
  padding-bottom: 30px;
}

.container-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Horizontally center the boxes */
  align-items: center;
  /* Vertically center the items within the boxes */
}

.box {
  flex: 1;
  /* Each box will take an equal portion of the container */
  display: flex;
  flex-direction: column;
  /* Stack content vertically within each box */
  justify-content: center;
  /* Horizontally center text within each box */
  align-items: center;
  /* Center items vertically within each box */
  /* Add other styling as needed */
  margin: 5px;
  /* Optional margin between boxes */
  font-family: 'Yakan';
  background: #ffffff !important;
  padding: 10px;
  border-radius: 15px;
  padding-top: 0;
  box-shadow: 0px 0px 5px 0px #ddd;
}

.box:last-of-type {
  background: none;
  box-shadow: none;
}

.box img {
  border-radius: 10px;
  width: 100%;
  height: 200px;
  /* Add other image styling as needed */
}

.box h3 {
  margin-bottom: 20px;
  font-size: 16px;
  height: 47px;
}

.box h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 25px;
  color: unset;
  width: auto;
}

.box a {
  box-sizing: border-box;
  position: relative;
  width: calc(100% + 20px);
  text-decoration: none;
}

.box a h4 {
  text-align: center;
  width: 100%;
  margin: 20px 0;
  padding: 10px;
  background: #0F66DD;
  color: #fff;
}

.box hr {
  color: black;
  border-top: 2px solid black;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #bbb;
}

.box h5,
.box h6 {
  color: rgb(117, 117, 117);
  padding: 10px;
  height: 60px;
  font-size: 14px;
}

.box h5 a,
.box h6 a {
  color: unset;
  width: auto;
}

.box h5.gray {
  background-color: #eee;
  padding: 10px;
}

.box h5.gray a {
  color: unset;
  width: auto;
}

.box h5.gray .text-container a,
.box a h4 .text-container a,
.box h5 .text-container a,
.box h6 .text-container a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: unset;
  width: auto;
}


/* Main End */
/* Main End */
/* Main End */

/* section1 */
/* section1 */
/* section1 */

.section1 {
  position: relative;
  width: 100%;
  height: 49vh;
  background-color: #0F66DD;
  border-top: 10px solid #ddd;
  padding-top: 20px;
  padding: 0 15%;
  font-family: 'Yakan';
}

.section1 .right {
  position: relative;
  float: right;
  width: 50%;
  height: 100%;
}

/* Tabs */
/* Tabs */
/* Tabs */

/**
 * Tabs
 */

.tabs {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  color: #000000;
  margin-top: 2%;
  font-weight: 400;
  height: 37vh;
  width: 100%;
  z-index: 1111;
  padding-left: 40px;
  padding-top: 50px;
}

.tabs label {
  box-sizing: border-box;
  position: relative;
  order: 1;
  display: block;
  padding: .7rem 0;
  margin: 0;
  cursor: pointer;
  width: 25%;
  background: #488ff3ad;
  font-size: 12px;
  transition: background ease 0.2s;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 1px solid #b4b5b586;
  border-bottom: none;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  color: #ffffff;
  text-align: center;
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  display: none;
  padding: 1rem;
  background: rgb(255, 255, 255);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  text-align: right;
  overflow: hidden;
}

.tabs input[type=radio] {
  display: none;
}

.tabs input[type=radio]:checked+label {
  background: rgb(255, 255, 255);
  color: #000000;
}

.tabs input[type=radio]:checked+label+.tab {
  display: block;
}


.tab ul {
  position: relative;
  display: inline-block;
  padding-right: 0;
  width: 90%;
  height: 100%;
  margin-bottom: 0;
  float: right;
}

.tab a {
  position: relative;
  width: 8%;
  height: 100%;
  display: inline-block;
  background-color: #0F66DD;
  border-radius: 10px;
  text-align: center;
  margin-right: 2%;
}

.tab a.t-green {
  background-color: rgb(248, 51, 51);
}

.tab a.half {
  position: relative;
  width: 8%;
  height: 50%;
  display: inline-block;
  background-color: #0F66DD;
  border-radius: 10px;
  text-align: center;
  margin-right: 2%;
}

.tab a p {
  position: absolute;
  /* Use absolute positioning for better centering */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  margin: 0;
  /* Remove default paragraph margins */
  color: #fff;
  writing-mode: vertical-lr;
}

.tab ul li {
  list-style: none;
  display: inline-block;
  position: relative;
  width: 100%;
  height: 32%;
  overflow: hidden;
}

.tab ul div.div-tab {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  display: inline-block;
  float: right;
  left: 0;
  cursor: pointer;
  width: 25%;
  transition: all .5s linear;
}

.tab ul div.div-tab img {
  position: relative;
  width: 100%;
  height: 100%;
}



.tab ul hr {
  margin: 5px 0;
}

.tab ul li p {
  color: #434343bb;
  font-size: 12px;
  margin: 0;
}

.tab ul li span {
  box-sizing: border-box;
  position: relative !important;
  width: 75%;
  height: 100%;
  display: inline-block !important;
  transition: all .5s linear;
  color: #000000;
  padding-right: 5px;
  font-size: 13px;
  overflow: hidden;
  border-bottom: 1px solid #0F66DD;
}

.tab ul li span a.t-btn {
  position: relative;
  width: 50px;
  height: 20px;
  color: #fff;
  margin-top: 5px;
}

/* Tabs End */
/* Tabs End */
/* Tabs End */



.section1 .left {
  float: left;
  width: 50%;
  height: 100%;
}


/* Product Highlight Books */

.pd-highlights-row,
.pd-dashed-border-row {
  width: 100%;
  float: right;
  margin: auto;
  font-size: 20px;
}

.pd-highlights-row,
.pd-dashed-border-row h2 {
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 960px) {

  .pd-highlights-row,
  .pd-dashed-border-row {
    margin-bottom: 30px;
  }
}

.col-sm-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  text-align: right;
}

.pd-highlights-col {
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .pd-highlights-col {
    width: 100%;
    margin: auto;
  }
}

.field--name-field-title {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.field--name-field-title {
  color: rgb(248, 51, 51);
}

.field--name-field-title h2 {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  display: inline-block;
  position: relative;
  padding: 0;
  margin-bottom: 10px;
  background-color: white;
  padding: 0 10px;
  border-radius: 5px;

}

@media (min-width: 768px) {
  .field--name-field-title h2 {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
  }
}

.field--name-field-title h2:after,
.field--name-field-title h2:before {
  content: '';
  display: block;
  width: 940px;
  height: 1px;
  background: #003349;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.field--name-field-title h2:before {
  right: 100%;
}

.field--name-field-title h2:after {
  left: 100%;
}

.field--name-field-title h2:after,
.field--name-field-title h2:before {
  background: rgb(255, 255, 255);
}

@media (min-width: 768px) {

  .field--name-field-product-highlights .highlights-always-visible>.field--item,
  .field--name-field-product-highlights .highlights-hidden>.field--item {
    width: 50%;
    float: right;
  }
}

.field--name-field-product-highlights .highlights-always-visible .field--item:nth-child(2n+1),
.field--name-field-product-highlights .highlights-hidden .field--item:nth-child(2n) {
  clear: both;
}

.field--name-field-product-highlights .pd-row {
  margin-right: -15px;
  margin-left: -15px;
}

.field--name-field-product-highlights .highlights-always-visible>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal,
.field--name-field-product-highlights .highlights-hidden>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal {
  position: relative;
  padding: 5px 40px;
  color: #ffffff;

  overflow: hidden;
  font-size: 12px;
}

.field--name-field-product-highlights .highlights-always-visible>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:before,
.field--name-field-product-highlights .highlights-hidden>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:before {
  content: '';
  display: block;
  position: absolute;
  top: 7px;
  right: 15px;
  width: 17px;
  height: 17px;
  border: 2px solid #003349;
  border-radius: 100%;
}

.field--name-field-product-highlights .highlights-always-visible>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:after,
.field--name-field-product-highlights .highlights-hidden>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  right: 22px;
  width: 4px;
  height: 10px;
  border: solid #003349;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.field--name-field-product-highlights .highlights-always-visible>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:before,
.field--name-field-product-highlights .highlights-hidden>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:before {
  border: 2px solid rgb(6, 174, 128);
}

.field--name-field-product-highlights .highlights-always-visible>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:after,
.field--name-field-product-highlights .highlights-hidden>.field--item .taxonomy-term--type-product-highlights.taxonomy-term--view-mode-minimal:after {
  border-color: rgb(6, 174, 128);
}

/* Product Highlight */


/* book shelf */
/* book shelf */
/* book shelf */

.shelf_img {
  margin-top: -22px !important;
  width: 100%;
  float: left;
}

.book::after,
.book::before,
.book img,
.book {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.books {
  vertical-align: middle;
  padding: 0 !important;
  padding-right: 40px !important;
  position: relative;
  padding-top: 50px !important;
}

.list-inline {
  padding-left: 0;
  list-style: none;
  text-align: center;
  padding-right: 50px;
  position: relative;
  padding-top: 7em;
}

.list-inline>li {
  display: inline-block;
  margin-right: 2em;
}

.list-inline>li:first-child {
  margin-right: 0;
}

.list-inline>li:last-child {
  margin-left: 2rem;
}

.book {
  position: relative;
  border-bottom: 1px dotted black;
  cursor: pointer;
  display: block;
  width: 110px;
  height: 150px;
  background: white;
  z-index: 1;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 9px 20px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: box-shadow 0.3s linear;
}

.book img {
  width: inherit;
  height: inherit;
  transform-origin: 0 50%;
  transform: rotateY(0);
  transition: all 0.45s ease;
}

.book:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 9px 20px 0 rgba(0, 0, 0, 0.45);
}

.book:hover img {
  transform: rotateY(-25deg);
  box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.2);
}

.book::after,
.book::before {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  position: absolute;
  z-index: -1;
  top: 0;
  background: white;
  border: 1px solid #d9d9d9;
}

.book::before {
  left: -3px;
}

.book::after {
  left: -6px;
}

.book .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.book:hover .tooltiptext {
  visibility: visible;
}

/* book shelf end */
/* book shelf end */
/* book shelf end */

/* Section1 End */
/* Section1 End */
/* Section1 End */

/* Section 2 */

.section2 {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 47vh;
  font-family: 'Yakan';
  background-color: #0F66DD;
}

.border-arrow {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, #efefef 5px, #efefef 2px);
  background-color: #eee;
}

.section2::before,
.section2::after {
  background-color: #0F66DD;
}


:root {
  --background-dark: #2d3548;
  --text-light: rgba(255, 255, 255, 0.6);
  --text-lighter: rgba(255, 255, 255, 0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --width-container: 1350px;
}

.hero-section {
  position: relative;
  align-items: flex-start;
  background: transparent;
  display: flex;
  min-height: 65%;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: 3%;
}

.hero-section.sec2 {
  min-height: 30%;
  padding-bottom: 2%;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  margin-left: 15%;
  margin-right: 15%;
  width: 100%;
}

@media(min-width: 540px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media(min-width: 540px) {
  .card-grid.grid2 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media(min-width: 960px) {
  .card-grid.grid2 {
    grid-template-columns: repeat(11, 1fr);
  }
}

.card {
  list-style: none;
  position: relative;
  height: 250px;
  text-align: right;
  margin: 10px 0;
}

.card.card2 {
  height: 100px;
}

@media only screen and (max-width: 540px) {
  .card.card2 {
    height: 200px;
  }
}

.card:before {
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background {
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition:
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background {
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover>.card:not(:hover) .card__background {
  filter: brightness(0.5) saturate(.5) contrast(1) blur(7px);
}

.card__content {
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
  width: 100%;
}

.card__category {
  color: var(--text-light);
  font-size: 16px;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

.card__heading {
  color: var(--text-lighter);
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
  word-spacing: 100vw;
}


.tooltip {
  width: auto;
  /* Adjust width as needed */
  text-align: center;
  padding: 3px 2px;
  /* Adjust padding as needed */
  border-radius: 6px;
  position: absolute;
  top: 0;
  /* Adjust distance from card */
  transition: opacity 0.3s;
}

.card:hover .tooltip {
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(50%);
  width: 70%;
  text-align: center;
  background-color: #fff !important;
  color: #000 !important;
  font-family: 'IranSans';
  font-size: 10px;
}


/* Section 2 End */

/* Section 3 */
/* Section 3 */
/* Section 3 */

.section3 {
  width: 100%;
  height: 55vh;
  direction: rtl;
  padding-top: 40px;
  background-color: #0F66DD;
}

.tgju-copyright-fix,
.tgju-copyright {
  visibility: hidden;
}

.section3 a {
  text-align: center;
}

.section3 a i {
  position: relative;
  color: #0F66DD;
  font-size: 40px;
  right: 50%;
  transform: translateX(50%);
}

.section3 .charts {
  position: relative;
  width: 100%;
  padding: 0 15%;
  height: 100%;
}

.section3 .charts .box-right {
  position: relative;
  width: 50%;
  float: right;
  padding-left: 20px;
  height: 100%;
}

.section3 .charts .box-left {
  position: relative;
  width: 50%;
  float: left;
  padding-right: 20px;
}

.tab-content .tab-pane::-webkit-scrollbar {
  display: none;
}

.site-footer {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  bottom: 0 !important;
  top: 100%;
  padding: 45px 0 20px;
  background-image: repeating-linear-gradient(135deg, rgba(37, 37, 37, 0.5), rgba(54, 54, 54, 0.5) 1px, #111 5px, #111 2px);
  background-color: #171718;
  font-size: 15px;
  line-height: 24px;
  color: #737373;
  font-family: "Yakan";
  direction: rtl;
}

footer .container {
  box-sizing: border-box;
  position: relative;
  width: 100% !important;
  padding-right: 15% !important;
  padding-left: 15% !important;
  font-family: 'Yakan';
}

.site-footer hr {
  border-top-color: #bbb;
  opacity: 0.5
}

.site-footer hr.small {
  margin: 20px 0
}

.site-footer h6 {
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 5px;
  letter-spacing: 2px;
  font-family: 'Yakan';
}

.site-footer a {
  color: #737373;
}

.site-footer a:hover {
  color: #3366cc;
  text-decoration: none;
}

.footer-links {
  padding-left: 0;
  list-style: none
}

.footer-links li {
  display: block
}

.footer-links a {
  color: #737373
}

.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
  color: #3366cc;
  text-decoration: none;
}

.footer-links.inline li {
  display: inline-block
}

.site-footer .social-icons {
  text-align: right
}

.site-footer .social-icons a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-left: 6px;
  margin-right: 0;
  border-radius: 100%;
  background-color: #33353d
}

.copyright-text {
  margin: 0
}

@media (max-width:991px) {
  .site-footer [class^=col-] {
    margin-bottom: 30px
  }
}

@media (max-width:767px) {
  .site-footer {
    padding-bottom: 0
  }

  .site-footer .copyright-text,
  .site-footer .social-icons {
    text-align: center
  }
}

.social-icons {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

.social-icons li {
  display: inline-block;
  margin-bottom: 4px
}

.social-icons li.title {
  margin-right: 15px;
  text-transform: uppercase;
  color: #96a2b2;
  font-weight: 700;
  font-size: 13px
}

.social-icons a {
  background-color: #eceeef;
  color: #818a91;
  font-size: 16px;
  display: inline-block;
  line-height: 44px;
  width: 44px;
  height: 44px;
  text-align: center;
  margin-right: 8px;
  border-radius: 100%;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear
}

.social-icons a:active,
.social-icons a:focus,
.social-icons a:hover {
  color: #fff;
  background-color: #29aafe
}

.social-icons.size-sm a {
  line-height: 34px;
  height: 34px;
  width: 34px;
  font-size: 14px
}

.social-icons a.facebook:hover {
  background-color: #3b5998
}

.social-icons a.twitter:hover {
  background-color: #00aced
}

.social-icons a.linkedin:hover {
  background-color: #007bb6
}

.social-icons a.dribbble:hover {
  background-color: #ea4c89
}

@media (max-width:767px) {
  .social-icons li.title {
    display: block;
    margin-right: 0;
    font-weight: 600
  }
}

footer .container .col-md-5,
footer .container .col-md-2 {
  float: right;
}

footer .container .col-md-3 {
  position: relative;
  float: left;
}

/*****
Custom Pure CSS vertical carousel animation https://codepen.io/aija/pen/xvXWoK
*****/
*,
*::before,
*::after {
  box-sizing: border-box;
}

.cursor-pointer {
  cursor: pointer;
}

.vs-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.vs-wrapper {
  position: relative;
  width: 100%;
  max-width: 330px;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.vs-carousel {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.vs-carousel__item {
  position: relative;
  width: 100%;
  display: none;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s;
  padding: 0 12px;
}

.vs-carousel__item-head {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  margin-right: -45px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #d7f7fc;
}

.vs-carousel__item-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin-left: 25px;
  padding-bottom: 0.5rem;
  padding: 0 10px 0 10px;
  background-color: transparent;
  line-height: 1;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.09);
  overflow: hidden;
}

.vs-carousel__item-body img {
  background-size: contain;
  border-radius: 10px;
  border: 3px solid #ffffff;
  width: 100%;
}

.vs-carousel__item-title {
  font-size: 16px;
  font-weight: bold;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
}

.vs-carousel__item-description {
  font-size: 12px;
  padding-bottom: 0.5rem;
}

.vs-previous {
  display: flex;
  align-items: center;
  transform: scale(0.7);
  visibility: visible;
  opacity: 0.4;
  will-change: transform, opacity;
  animation-name: vs-carousel-animate-vertical-previous, vs-carousel-animate-vertical-remove;
  animation-delay: 0s, 0.5s;
  animation-duration: 0.5s, 3s;
  animation-timing-function: linear;
}

@keyframes vs-carousel-animate-vertical-previous {
  0% {
    transform: translateY(100%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(0.7);
    opacity: 0.4;
  }
}

@keyframes vs-carousel-animate-vertical-remove {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 0;
  }
}

.vs-active {
  display: flex;
  align-items: center;
  transform: scale(1);
  visibility: visible;
  opacity: 1;
  will-change: transform, opacity;
  animation: vs-carousel-animate-vertical-active 0.5s linear;
}

@keyframes vs-carousel-animate-vertical-active {
  0% {
    transform: translateY(100%) scale(0.7);
    opacity: 0.4;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.vs-next {
  display: flex;
  align-items: center;
  transform: scale(0.7);
  visibility: visible;
  opacity: 0.4;
  will-change: transform, opacity;
  animation: vs-carousel-animate-vertical-next 0.5s linear;
}

@keyframes vs-carousel-animate-vertical-next {
  0% {
    transform: translateY(100%) scale(0.5);
    opacity: 0;
  }

  100% {
    transform: translateY(0) scale(0.7);
    opacity: 0.4;
  }
}

.vs-previous-reverse {
  display: flex;
  align-items: center;
  transform: scale(0.7);
  visibility: visible;
  opacity: 0.4;
  will-change: transform, opacity;
  animation-name: vs-carousel-animate-vertical-previous-reverse, vs-carousel-animate-vertical-remove-reverse;
  animation-delay: 0s, 0.5s;
  animation-duration: 0.5s, 3s;
  animation-timing-function: linear;
}

@keyframes vs-carousel-animate-vertical-previous-reverse {
  0% {
    transform: translateY(-100%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(0.7);
    opacity: 0.4;
  }
}

@keyframes vs-carousel-animate-vertical-remove-reverse {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 0;
  }
}

.vs-active-reverse {
  display: flex;
  align-items: center;
  transform: scale(1);
  visibility: visible;
  opacity: 1;
  will-change: transform, opacity;
  animation: vs-carousel-animate-vertical-active-reverse 0.5s linear;
}

@keyframes vs-carousel-animate-vertical-active-reverse {
  0% {
    transform: translateY(-100%) scale(0.7);
    opacity: 0.4;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.vs-next-reverse {
  display: flex;
  align-items: center;
  transform: scale(0.7);
  visibility: visible;
  opacity: 0.4;
  will-change: transform, opacity;
  animation: vs-carousel-animate-vertical-next-reverse 0.5s linear;
}

@keyframes vs-carousel-animate-vertical-next-reverse {
  0% {
    transform: translateY(-100%) scale(0.5);
    opacity: 0;
  }

  100% {
    transform: translateY(0) scale(0.7);
    opacity: 0.4;
  }
}

/* ‌Bottom Main End */
/* ‌Bottom Main End */
/* ‌Bottom Main End */

.carousel {
  position: relative;
  width: 100%;
  height: 550px;
  background-color: rgb(236, 234, 234);
  overflow: hidden;
}

.carousel iframe {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
}




/* Tabs Bottom for chart */

.badge {
  background-color: #777;
}

.nav-tabs {
  float: left;
  border-bottom: 0;
  position: relative;
  width: 100%;
  z-index: 2;
  border-bottom: 0 !important;
}

.nav-tabs li {
  float: none;
  margin: 0;
}

.nav-tabs li a {
  margin-right: 0;
  border: 0;
  border-radius: 0;
  background-color: #333;
}

.nav-tabs li a:hover {
  background-color: #444;
}

.nav-tabs .glyphicon {
  color: #fff;
}

.nav-tabs .active .glyphicon {
  color: #333;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  border: 0;
}

.tab-content {
  position: relative;
  box-sizing: border-box;
  z-index: 1;
}

.tab-content .tab-pane {
  display: none;
  background-color: #fff;
  padding: .5rem;
  overflow-y: auto;
  border-radius: 10px;
  border-top-left-radius: 0;
}

.tab-content .active {
  display: block;
  position: relative;
  height: 41vh !important;
}

.list-group {
  width: 100%;
}

.list-group .list-group-item {
  height: 70px;
}

.list-group .list-group-item h4,
.list-group .list-group-item span {
  line-height: 11px;
}

.nav-tabs>li>a {
  background-color: rgb(227, 225, 225);
  color: #000000;
  font-family: 'IranSans';
}


/*  bhoechie tab */
/*  bhoechie tab */
/*  bhoechie tab */
/*  bhoechie tab */

.container-t {
  box-sizing: border-box;
  background: #FFFFFF;
  position: relative;
  width: 100%;
  height: 90%;
  margin: 0 auto;

  box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5);
  border-radius: 10px;
}

.container-t .logo {
  float: right;
  margin-right: 12px;
  margin-top: 12px;
  font-family: "IranSans", sans-serif;
  color: #0F66DD;
  font-weight: 900;
  font-size: 1.5em;
  letter-spacing: 1px;
}

.container-t .CTA {
  width: 80px;
  height: 40px;
  right: -20px;
  bottom: 0;
  margin-bottom: 90px;
  position: absolute;
  z-index: 1;
  background: #0F66DD;
  font-size: 1em;
  transform: rotate(-90deg);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.container-t .CTA h1 {
  color: #FFFFFF;
  margin-top: 10px;
  margin-left: 9px;
}

.container-t .CTA:hover {
  background: #0F66DD;
}

.container-t .leftbox {
  float: right;
  top: -5%;
  right: -5%;
  position: absolute;
  width: 110%;
  height: 25%;
  background: #3dbdf07e;
  box-shadow: 3px 3px 10px rgba(119, 119, 119, 0.5);
  z-index: 200;
}

.container-t nav {
  background-color: unset;
  color: unset;
}

.container-t nav a {
  list-style: none;
  padding: 5px 85px;
  color: #FFFFFF;
  font-size: 1.1em;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  width: 10%;
  text-decoration: none;
  width: 100px;
  height: 100px;
}

.container-t nav a::before {
  content: attr(data-tooltip);
  position: RELATIVE;
  color: #e5e5e5;
  border-radius: 10px;
  DISPLAY: INLINE-BLOCK;
  width: 90px;
  RIGHT: 50%;
  transform: translateX(50%);
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  text-shadow: 1px 1px 1px #0000003d;
}

.container-t a:hover::before {
  opacity: 1;
}

.container-t nav a i {
  color: #FFFFFF;
  font-size: 0.7em;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 20px;
}

.container-t nav a:hover i {
  color: #000000;
  font-size: .9em;
  cursor: pointer;
  background-color: #ffffffe3;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.container-t .active {
  color: #000000;
}

.container-t a.active i {
  transition: all 0.3s ease-in-out;
  color: #000000;
  border-radius: 50%;
  background-color: #ffffff8e;
}

.container-t .rightbox {
  float: left;
  width: 100%;
  height: 100%;
}

.container-t .profile,
.container-t .payment,
.container-t .subscription,
.container-t .privacy,
.container-t .settings {
  transition: opacity 0.5s ease-in;
  position: absolute;
  width: 100%;
  padding: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 191;
  /* Default z-index for tabs */
}

.container-t .profile.noshow,
.container-t .payment.noshow,
.container-t .subscription.noshow,
.container-t .privacy.noshow,
.container-t .settings.noshow {
  z-index: 190;
  /* Set z-index to a lower value for elements with noshow class */
  opacity: 0;
  pointer-events: none;
  /* Disable pointer events for hidden elements */
}


.container-t .profile video,
.container-t .payment video,
.container-t .subscription video,
.container-t .privacy video,
.container-t .settings video,
.container-t .profile img,
.container-t .payment img,
.container-t .subscription img,
.container-t .privacy img,
.container-t .settings img {
  position: relative;
  display: inline-block;
  width: 100%;
  z-index: 190;
}

.container-t h1 {
  font-family: "IranSans", sans-serif;
  color: #0F66DD;
  font-size: 1em !important;
  margin-top: 40px !important;
  margin-bottom: 35px !important;
}

.container-t h2 {
  color: #777777;
  font-family: "Roboto", sans-serif;
  width: 80%;
  text-transform: uppercase;
  font-size: 8px !important;
  letter-spacing: 1px;
  margin-left: 2px;
}

.container-t p {
  border-width: 1px !important;
  border-style: solid;
  border-image: linear-gradient(to right, #3FB6A8, rgba(126, 211, 134, 0.5)) 1 0%;
  border-top: 0;
  width: 80%;
  font-family: "IranSans", sans-serif;
  font-size: 0.7em !important;
  padding: 7px 0;
  color: #070707;
}

p.media-title {
  text-align: center;
  font-size: 16px !important;
  color: black;
  font-family: 'Yakan';
  font-weight: 600;
  width: 100% !important;
  margin: 0 !important;
  padding-top: 15px;
}

.container-t span {
  font-size: 0.5em !important;
  color: #777777;
}

.container-t .btn {
  float: right;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  border: none;
  color: #0F66DD;
}

.container-t .btn:hover {
  text-decoration: underline;
  font-weight: 900;
}

.container-t input {
  border: 1px solid #dddddd;
  font-family: "Roboto", sans-serif;
  padding: 2px;
  margin: 0;
}

.container-t .privacy h2 {
  margin-top: 25px;
}

.container-t .settings h2 {
  margin-top: 25px;
}

.container-t .noshow {
  opacity: 0;
}

.container-t .rightbox a {
  position: absolute;
  float: left;
  top: 95%;
  left: 3%;
  z-index: 200;
  font-family: 'Yakan';
  background-color: #0F66DD;
  border-radius: 5px;
  color: #fff;
  padding: 5px 10px;
}


#showarrow {
  position: absolute;
  width: 70px;
  height: 50px;
  color: white;
  top: 30px;
  left: 20px;
  text-align: center;
  line-height: 5px;
  font-size: 10px;
  text-decoration: none;
}

#showarrow i {
  text-align: center;
  position: relative;
  font-size: 24px;
  line-height: 5px;
}

.tgju-widget {
  display: block !important;
  transition: all .3s ease;
  width: 450px;
  float: left;
  left: 0;
  height: 30px;
  position: absolute !important;
  z-index: 100000;
}

.marquee-row .tgju-widget-item {
  padding: 5px 23px !important;
}