@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

 :root {

    /* nord theme color pallet */
     --nord0: #2e3440;
     --nord1: #3b4252;
     --nord2: #434c5e;
     --nord3: #4c566a;
     --nord4: #d8dee9;
     --nord5: #e5e9f0;
     --nord6: #eceff4;
     --nord7: #8fbcbb;
     --nord8: #88c0d0;
     --nord9: #81a1c1;
     --nord10: #5e81ac;
     --nord11: #bf616a;
     --nord12: #d08770;
     --nord13: #ebcb8b;
     --nord14: #a3be8c;
     --nord15: #b48ead;
     --white: #ffffff;
     --fs-base: 1rem;
     --fs-1: 2rem;
     --fs-2: 1.8rem;
     --fs-3: 1.5rem;
     --fs-4: 1.2rem;
     --fs-5: 1rem;
     --py: .5rem;
}
 .theme-light {
     --background-primary: var(--nord5);
     --background-secondary: var(--nord6);
     --background-tertiary: var(--white);
     --action-primary: var(--nord4);
     --action-secondary: var(--nord6);
     --foreground-primary: var(--nord1);
     --foreground-secondary: var(--nord2);
     --foreground-tertiary: var(--nord3);
     --accent: var(--nord10);
}
 .theme-dark {
     --background-primary: var(--nord0);
     --background-secondary: var(--nord1);
     --background-tertiary: var(--nord2);
     --action-primary: var(--nord9);
     --action-secondary: var(--nord1);
     --foreground-primary: var(--nord4);
     --foreground-secondary: var(--nord5);
     --foreground-tertiary: var(--nord6);
     --accent: var(--nord10);
}
 .theme-dark .custom-btn-primary:hover{
     color: var(--background-primary);
}
 .theme-dark .blog-topic{
     background: var(--action-primary);
     color: var(--foreground-primary);
}
 .theme-dark .blog-topic:hover{
     background: var(--foreground-primary);
     color: var(--action-primary);
}
 .theme-dark .load-more:hover{
     color: var(--white);
}
 .theme-dark .aside .h2{
     color: var(--foreground-primary);
}
/* global setter */
 *, *::before, *::after{
     box-sizing: border-box;
     word-wrap: break-word;
     margin: 0;
     padding: 0;
}
 a{
     text-decoration: none;
}
 li{
     list-style: none;
}
 img, button{
     display: block;
}
 a, span{
     display: inline-block;
}
 button{
     font: inherit;
     border: none;
     background: none;
     cursor: pointer;
}
 html{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
     font-size: var(--fs-base);
     line-height: 1.8;
}

html::-webkit-scrollbar {
  display: none;
}

 body{
     position: relative;
     min-height: 100vh;
    background: #eceff4bd;
 }

 :focus{
     outline-offset: 4px;
}

/* custom base style */
 .h1,.h2,.h3,.h4{
     display: block;
     color: var(--foreground-primary);
}
 :is(.h1,.h2,.h3,.h4):hover{
     color: var(--foreground-primary);
}
 .h1{
     font-size: var(--fs-1);
     font-family: "Vazirmatn", sans-serif;
     font-weight: 900;
}
 .h2{
     font-size: var(--fs-2);
     font-family: "Vazirmatn", sans-serif;
     font-weight: 700;
}
 .h3{
     font-size: var(--fs-3);
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
}
 .h4{
     font-size: var(--fs-4);
     font-family: "Vazirmatn", sans-serif;
     font-weight: normal;
}
 .text.sm{
     font-size: var(--fs-4);
}
 .text-tiny{
     font-size: var(--fs-5);
}
/* Helpers */
 .d-ltr{
     direction: ltr !important;
}
 .d-rtl{
     direction: rtl !important;
 }

 .bg-1{
     background: var(--nord0);
 }
 .bg-2{
     background: #D22222;;
 }
 .bg-3{
     background: #73C319;
 }
 .bg-4{
     background: var(--nord12);
 }
 .bg-5{
     background: var(--nord13);
 }
 .bg-6{
     background: var(--nord14);
 }
 .bg-7{
     background: #696B6C;
 }
 .bg-8{
     background: #696B6C;
 }
 .bg-9{
     background: #F66B0E;
 }
 .txt-light{
     color: var(--nord6);
 }
 .txt-soft-light{
     color: var(--nord5);
 }
 .text-dark{
     color: var(--nord0);
 }
 .text-soft-dark{
     color: var(--nord1);
 }
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

 .t-left{
     text-align: left !important;
}
 .t-right{
     text-align: right !important;
}
 .t-star-right *{
     text-align: right;
 }
 .border-bottom{
     border-color: var(--nord6) !important;
 }
 .custom-btn{
     min-width: 10rem;
     border-radius: 100px;
     font-family: "Vazirmatn", sans-serif;
}
 .custom-btn-primary{
     background: var(--accent);
     color: var(--white);
     padding: 0.6875rem 1.1875rem;
     border: 3px solid transparent;
}
 .custom-btn-primary:hover{
     background: var(--foreground-secondary);
     color: var(--action-primary);
}
 .custom-btn-secondary{
     background: var(--action-secondary);
     color: var(--foreground-secondary);
     padding: 0.6875rem 1.1875rem;
     border: 3px solid var(--foreground-tertiary);
}
 .custom-btn-secondary:hover{
     border-color: var(--accent);
     color: var(--foreground-secondary);
}
/* custom css */
 header{
     /* background-color: var(--background-primary); */
}
 header .flex-wrapper{
     display: none;
}
 header .desktop-nav{
     display: none;
}
 nav ul{
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
}
 .theme-btn-mobile, .nav-menu-btn, .nav-close-btn{
     width: 40px;
     height: 40px;
     font-size: 25px;
}
 .theme-btn-mobile, .nav-menu-btn, .nav-close-btn{
    --ionicon-stroke-width: 43px;
    font-size: 42px;
 }
 :is(.theme-btn-mobile, .nav-menu-btn, .nav-close-btn):hover{
     background: var(--accent);
     color: var(--white);
}
 .theme-btn-mobile ion-icon {
     display: none;
}
 .navbar{
     padding: 0;
 }
 .navbar .navbar-brand h1{
     font-size: 2rem;
     font-family: "Vazirmatn", sans-serif;
     font-weight: 700;
     /* color: var(--foreground-primary); */
     padding-top: 9px;
}
 .desktop-nav{
     padding-left: 0;
}
 .desktop-nav .nav-item .nav-link{
     font-family: "Vazirmatn", sans-serif;
     font-weight: 700;
     font-size: 1.1rem;
     /* color: var(--foreground-secondary); */
}
 .mobile-nav{
     position: fixed;
     inset: 0;
     background: var(--background-primary);
     padding: 70px 20px;
     overflow: auto;
     overscroll-behavior: contain;
     transform: translateX(100%);
     visibility: hidden;
     transition: 0.5s cubic-bezier(1, 0, 0.30, 0.70);
     z-index: 10;
}
 .mobile-nav.active{
     transform: translateX(0);
     visibility: visible;
}
 .nav-close-btn{
     position: absolute;
     top: 20px;
     left: 20px;
}
 .mobile-nav .wrapper{
     padding-bottom: 1.25rem;
     margin-bottom: 1.25rem;
     border-bottom: 1px solid var(--action-primary);
}
 .mobile-nav .nav-title{
     margin-bottom: 1rem;
}
 .mobile-nav .nav-item{
     margin-bottom: 0.5rem;
}
 .mobile-nav .nav-link{
     font-size: var(--fs-3);
     color: var(--foreground-tertiary);
}
 .mobile-nav .nav-link:hover{
     color: var(--accent);
}

 .user-icon{
  color: var(--nord0);
  font-size: 20px;
  --ionicon-stroke-width: 35px;
 }

 /* Search */

.search{
     /* background: var(--background-secondary); */
     transition: 0.25s ease;
}
.search-card{
     position: relative;
     padding-left: 0;
     padding-right: 0;
}
.search-name .h1{
    font-size: 1.8rem;
    color: var(--foreground-primary);
}
 .search-input input{
     border-top: 1px solid var(--foreground-tertiary);
     border-bottom: 1px solid var(--foreground-tertiary);
     border-left: 1px solid var(--foreground-tertiary);
     border-right: 0;
     background: var(--background-tertiary);
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
      font-size: 22px;
      padding: 5px 14px;
     color: var(--foreground-secondary);
}
 .search-input input:focus{
     box-shadow: none;
     outline: none;
     border-top: 1px solid var(--foreground-tertiary);
     border-bottom: 1px solid var(--foreground-tertiary);
     background: var(--background-tertiary);
     padding: 0.5rem 1rem;
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
     color: var(--foreground-secondary);
     z-index: 1;
}
 .search-input button{
     color: var(--foreground-primary);
     background: var(--background-tertiary);
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
     border-left: none ;
    padding: 1px 14px 0 8px;
    border-top: 1px solid var(--foreground-tertiary);
    border-bottom: 1px solid var(--foreground-tertiary);
    border-right: 1px solid var(--foreground-tertiary);
    font-size: 19px;
}
 .search-input button:hover{
     color: var(--foreground-primary);
     background: var(--background-tertiary);
}

 .search-input ion-icon{
    --ionicon-stroke-width: 40px;
    color: var(--foreground-primary);
    padding-top: 5px;
    font-size: 31px;
    padding-right: 9px;
 }

 .btn-clear{
     padding: 0 2px !important;
     display: none;
 }
 .btn-clear.show{
     display: block;
 }
 .btn-clear ion-icon{
     padding-right: 0;
     padding-top: 8px;
 }
 .search-input .search-dropdown-button{
     position: relative;
}
 .search-input .search-dropdown-button::after{
     display: inline-block;
     margin-left: .255em;
     vertical-align: .255em;
     content: "";
     border-top: .3em solid;
     border-right: .3em solid transparent;
     border-bottom: 0;
     border-left: .3em solid transparent;
     margin-left: 7px;
}
 .search-input .search-dropdown-menu{
     position: absolute;
     z-index: 10;
     border: 1px solid var(--action-primary);
     border-radius: 0;
     background: var(--background-tertiary);
     line-height: 1.7rem;
     padding: 10px 15px;
     display: none;
}
 .search-input .search-dropdown-item{
     display: block;
     width: 100%;
     padding: 10px 4px;
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
     color: var(--foreground-tertiary) !important;
     text-align: left;
     white-space: nowrap;
     border-bottom: 1px solid var(--background-secondary);
}
 .search-input .search-dropdown-item:last-child{
     border-bottom: none;
 }
 .search-input .search-dropdown-item:hover{
     cursor: pointer;
}
 .search-input .search-dropdown-menu.show{
     display: block;
     inset: 0px auto auto 0px;
     margin-top: 7px;
     transform: translate(0px, 45px);
     position: absolute;
}
 .search-autocomplete-menu{
  line-height: 1.7rem;
  padding: 0;
  margin-bottom: 0;
 }
 .search-autocomplete {
  position: absolute;
  z-index: 10;
  border: 1px solid var(--action-primary);
  border-radius: 0;
  background: var(--background-tertiary);
  width: 100%;
  display: none;
  max-height: 509px;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.search-autocomplete::-webkit-scrollbar {
  display: none;
}


 .search-autocomplete.show{
  display: block;
  inset: 0px auto auto 0px;
  margin-top: 7px;
  transform: translate(0px, 45px);
  position: absolute;
 }
 .search-autocomplete-item{
  display: block;
  width: 100%;
  padding: 10px 4px;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  color: var(--foreground-tertiary) !important;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--background-secondary);
  padding: 14px 22px;
 }
 .t-star-right .search-autocomplete-item{
     text-align: right;
 }
 .search-autocomplete-item:last-child{
     border-bottom: none;
 }
 .search-autocomplete-item b{
     font-family: "Vazirmatn", sans-serif;
     font-weight: 700;
 }
 .search-autocomplete-item:hover {
  background-color: var(--action-secondary);
 }
 .search-autocomplete-item.active {
  background-color: var(--action-primary);
 }

 .search-header-menu{
  margin-bottom: 0;
  padding: 0;
  height: 41px;
  overflow-y: hidden;
  transition: all .5s;
 }
 .search-header-menu.show{
     height: 249px;
 }
.search-header-menu .search-header-item a{
    font-family: "Vazirmatn", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    /* color: var(--foreground-secondary); */
    padding: 15px 0;
}
.search-header-menu .search-header-item.active{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.search-header-menu .search-header-item{
    text-align: center;
    padding: 0 22px;
}

.search-header-toggle{
    position: relative;
    border-left: 1px solid var(--foreground-tertiary) !important;
    height: 39px;
    padding-top: 10px;
    padding-left: 14px;
    background: var(--background-secondary);
    padding-right: 15px;
    margin: 0 !important;
    cursor: pointer;
}

.search-subheader-menu{
    margin-bottom: 0;
    padding-left: 0;
    height: 52px;
    overflow-y: hidden;
    transition: all 0.5s;
    padding-top: 10px;
}
 .search-subheader-menu.show{
     height: 235px;
 }
.search-subheader-menu .search-subheader-item a{
    font-family: "Vazirmatn", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    /* color: var(--foreground-secondary); */
    padding: 10px 0;
}
.search-subheader-menu .search-subheader-item.active a{
    text-decoration: underline;
}

.search-subheader-menu .search-subheader-item{
    display: flex;
    justify-content: start;
    text-align: center;
    padding: 1px 0;
    border-bottom: 1px solid var(--background-primary);
}

.search-subheader-menu .search-subheader-item:last-child{
    border-bottom: none;
}

.search-subheader-menu .search-subheader-item:first-child{
    margin-left: 0;
}
.search-subheader-toggle{
    position: relative;
    padding-top: 10px;
    padding-left: 14px;
    padding-right: 15px;
    margin: 0 !important;
    cursor: pointer;
}
.search-subheader-toggle ion-icon{
    color: var(--background-tertiary);
    font-size: 20px;
}

.line-separator{
    height: 16px;
    width: 1px;
    background: var(--background-secondary);
}


.search-subheader-mobile-toggle{
    position: relative;
    padding-top: 10px;
    padding-left: 14px;
    margin: 0 !important;
    cursor: pointer;
    padding-top: 13px;
}
.search-subheader-mobile-toggle ion-icon{
    color: var(--background-tertiary);
    font-size: 20px;
}

.search-header-mobile-container{
  border-bottom: 1px solid #8a8888;
}

 .search-header-mobile-menu{
  margin-bottom: 0;
  padding: 0;
  overflow-y: hidden;
  transition: all .5s;
  padding: 10px 0;
 }
.search-header-mobile-menu .search-header-mobile-item a{
    font-family: "Vazirmatn", sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    /* color: var(--foreground-secondary); */
}

.search-header-mobile-menu .search-header-mobile-item{
    text-align: center;
    padding: 0 22px;
}

.search-header-mobile-menu .search-header-mobile-item:first-child{
    padding-left: 0;
}

.search-subheader-mobile-menu{
  height: 0;
  overflow-y: hidden;
}

.search-subheader-mobile-menu.show{
    height: auto;
}

.search-subheader-mobile-group {
  font-size: 0.9rem;
  margin-top: 0.3rem;
  padding: 0.4rem 0;
  color: #f7f9fb;
}

.search-subheader-mobile-group > .search-subheader-mobile-dropdown {
  display: none;
  height: 0;
}

.search-subheader-mobile-group-active > .search-subheader-mobile-dropdown {
  height: auto !important;
  display: block !important;
}

.search-subheader-mobile-dropdown-toggle {
  cursor: pointer;
  padding: 10px 0;
  transition: all 0.3s;
}

.search-subheader-mobile-dropdown-toggle ion-icon{
    font-size: 20px;
}

.search-subheader-mobile-dropdown-toggle a {
    font-family: "Vazirmatn", sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: var(--background-tertiary);

}

.search-subheader-mobile-dropdown-toggle .angle {
  float: left;
}

.search-subheader-mobile-dropdown a {
  font-size: 16px;
  padding: 9px 0;
  display: block;
  text-decoration: none;
  border: none;
  background-color: inherit;
  outline: none;
  color: #edf5e1;
  transition: all 0.3s;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
}

.search-subheader-mobile-dropdown a::before {
  content: "»";
  margin: 0.8rem;
  font-weight: bolder;
  font-size: 1rem;
}

.search-subheader-mobile-dropdown a:hover {
  color: #aeaba4;
}

/* Sidebar */
 .slider{
     padding-bottom: 2rem;
}
 .slider * {
     text-align: center;
}
 .slider-box {
     width: 100%;
}
 .swiper-slide {
     padding: 5px 10px;
     text-align: center;
     font-size: 1.1rem;
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
     background: var(--action-primary);
     color: var(--foreground-tertiary);
    /* Center slide text vertically */
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
}

/* Blog section */
 .main{
     padding: var(--py) 0;
    padding-bottom: 5rem;
}

.page-item a{
    background: var(--background-tertiary);
    color: var(--foreground-primary) !important;
    border-radius: 0 !important;
    border: none;
    color: var(--white);
    font-family: "Vazirmatn", sans-serif;
    font-weight: 500;
    padding: 9px 15px 6px 15px;
}

.page-item.active .page-link{
    background: var(--accent);
    font-family: "Vazirmatn", sans-serif;
    font-weight: 700;
    color: var(--white) !important;
}

.page-item:first-child .page-link{
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.page-item:last-child .page-link{
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* Footer section */
 footer{
    background: var(--background-primary);
    position:absolute;
    bottom:0;
    width: 100%;
    height: 4.5rem;
}

 footer .footer-content p{
     font-family: "Vazirmatn", sans-serif;
     font-weight: 500;
     color: var(--foreground-tertiary);
}

 footer .footer-content a{
     color: var(--foreground-primary);
      text-decoration: underline;
 }

/* Media queries */
 @media (min-width: 576px){
     :root{
         --fs-base: 0.90rem;
    }
}
 @media (min-width: 768px){
     :root{
         --fs-1: 2.25rem
    }
     .title{
         position: relative;
         text-align: left !important;
         padding-left: 2rem;
    }
     .title::before{
         content: "";
         position: absolute;
         top: -27px;
         left: 0;
         background: var(--action-primary);
         width: 5px;
         height: 74px;
         border-radius: 5px;
    }
    .slider-box {
        width: 100%;
    }
}
 @media (min-width: 992px){
     :root{
         --fs-base: 1rem;
         --fs-1: 3rem;
    }
     header .flex-wrapper{
         flex-direction: row-reverse;
    }
     header .desktop-nav{
        align-items: center;
        margin-bottom: 0;
        gap: 30px;
        padding: 16px 0 16px 12px;
    }
     .theme-btn-desktop{
         position: relative;
         background: var(--background-secondary);
         color: var(--white);
         width: 52px;
         height: 26px;
         justify-content: center;
         align-items: center;
         gap: 10px;
         border-radius: 10px;
         flex-direction: row-reverse;
    }
     .theme-btn-desktop.light{
         background: linear-gradient(45deg, var(--nord11), var(--nord13));
    }
     .theme-btn-desktop.dark{
         background: linear-gradient(45deg, var(--nord10), var(--nord15));
    }
     .theme-btn-desktop::before{
         content: "";
         position: absolute;
         background: var(--white);
         width: 20px;
         height: 20px;
         border-radius: 30px;
         top: 49.87%;
         left: 3px;
         transform: translateY(-50%);
         box-shadow: 0 2px 10px -2px hsla(0, 0%, 0%, 0.05);
         z-index: 2;
    }
     .theme-btn-desktop.dark::before{
         left: calc(100% - 24px);
    }
     .search-header-menu .search-header-item{
        padding: 0 49px;
    }
    .search-subheader-menu .search-subheader-item {
      margin: 0 12px 0 14px;
      border-bottom: none;
    }

}

@media (min-width: 1200px){
  .search-name .h1{
      font-size: 2.1rem;
  }
}

@media (min-width: 1400px){
  .search-subheader-menu .search-subheader-item a{
      font-family: "Vazirmatn", sans-serif;
      font-weight: 500;
      font-size: 1.1rem;
      /* color: var(--foreground-secondary); */
      padding: 10px 10px;
  }
}


.welcome-box{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10000;
  margin: 86px 9px;
  background-color: #333;
  padding: 15px 16px 0px 15px;
  border-radius: 5px;
  color: snow;
  font-family: Vazirmatn;
}

.welcome-box p{
  font-size: 18px;
}

.welcome-box p b{
  font-weight: bold;
  font-size: 18px;
}