@font-face {
  font-family: 'SolaimanLipi';
  src: url('../fonts/SolaimanLipi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
:root{
  --w-logo:230px;

  --g-top-menus: 20px;
  --fs-top-menus: 20px;
  --p-x-down-menus: 15px;
  --fs--down-menus: 22px;

  --h-slider: 300px;

  --p-x: 6%;
  --fs-right-content-menu-p: 10px;
  --p-right-content-menu-btn: 3px 7px;
  --fs-right-content-menu-h1: 21px;
  --w-right-content: 32%;
  --fd-right-content: ;

  --w-left-content: 73%;

  --w-posts: 33%;
  --fd-posts: ;

  --w-1st-faq: 20%;
  --w-2nd-faq: 80%;
}
.logo{
  width: var(--w-logo);
  img{
      width: 62%;
  }
}
body {
  font-family: 'SolaimanLipi', sans-serif;
}

header{
  display: flex;
  flex-direction: column;
  width: 100%;
  .top-menu{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 20px;
  }
  .customer-service{
      font-size: var(--fs-top-menus);
      padding: 5px 15px;
      border-radius: 10px
  }
  .top-menus{
      gap: var(--g-top-menus);
      a{
          opacity: 0.4;
          font-size: var(--fs-top-menus);
          transition: 1s ease;
      }
  } 
  .top-menus a:hover,
  .actve{
      opacity: 1 !important;
  }
  .customer-service:hover{
      font-size: var(--fs-top-menus);
      background-color: brown;
      color: white !important;
      transition: 1s ease;
  }
  .middle{
        
      margin-bottom: 5px;
      background-color: ;
      padding: 7px var(--p-x);
      border-bottom: 2px solid red;


      .time-date{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px 40px;
          background-color: ;
          border-radius: 30px;
          border: 1px solid silver;
          span{
              font-size: 20px;
              font-weight: 500;
              border-right: 1px solid silver;
              line-height: 30px;
              padding-right: 10px;
          }
          p{
              line-height: 15px;
              font-weight: ;
              padding-left: 10px;
          }
      }
        /* Hide on mobile devices */
        @media (max-width: 767px) {
          .time-date {
              display: none !important; /* Hide on mobile devices */
          }
      }
  }
  .down{
      display: flex;
     
      padding: 0px var(--p-x);
     
      a{
          text-decoration: none;
          background-color: transparent;
          color: black;
          transition: 1s ease;
          h1{
              padding: 7px var(--p-x-down-menus);
              font-size: var(--fs--down-menus);
              font-weight: 700;
          }
      }
      a:hover,
      .actv{
          background: #000;
          color: white!important;
          border-bottom-left-radius: 13px;
          border-bottom-right-radius: 13px;
      }
  }
}
/*************** start middle content  ****************/
.middle-content{
  width: 100%;
  padding: 30px var(--p-x);
  display: flex;
  flex-direction: var(--fd-right-content);
  gap: 10px;
  .right-content{
      width: var(--w-right-content);
      display: flex;
      flex-direction: column;
      border: 1px solid silver;
      border-radius: 13px;
      h1:first-child{
          text-align: center;
          font-weight: 600;
          padding: 15px 0;
          background-color: rgba(192, 192, 192, 0.219);
      }
      .right-content-menu{
          display: flex;
          width: 100%;
          padding: 15px;
          align-items: center;
          gap: 10px;
          border-bottom: 1px solid silver;
          cursor: pointer;
          transition: 1s ease;
          div:first-child{
              width: 40%;
              img{
                  width: 100%;
                  border-radius: 10px;
              }
          }
          div:last-child{
              width: 60%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              gap: 4px;
              p{
                  font-size: var(--fs-right-content-menu-p);
                  color: grey;
                  display: flex;
                  gap: 10px;
                  button{
                      background-color: whitesmoke;
                      padding: var(--p-right-content-menu-btn);
                      border-radius: 5px;
                  }
              }
              h1{
                  font-size: var(--fs-right-content-menu-h1);
                  font-weight: 500;
              }
          }
      }
      .right-content-menu:nth-child(1){
          border-top: 1px solid silver;
      }
      .right-content-menu:hover{
          background-color: rgba(192, 192, 192, 0.219);
      }
  }
  .right-big-img{
      width: 100%;
      padding: 30px;
      img{
          width: 100%;
          border-radius: 13px;
      }
  }
}
/*************** end middle content  ****************/
/***** start slider ******/

.slider {
  width: 100%;
  max-width: 100%;
  height: var(--h-slider);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
}
.list {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  width: 100%;
  transition: 1s;
}
.itemm{
  min-width: 100%;
}
.list img{
  min-width: 100%;
  max-width: 100%;
  height: auto;
}
.buttonss{
  position: absolute;
  top: 45%;
  left: 1%;
  width: 98%;
  display: flex;
  justify-content: space-between;
}
.buttonss button {
  font-size: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.24);
color: black;
  border: none;
  font-family: monospace;
  font-weight: bold;
  border: 1px solid silver;
}
.dots{
  position: absolute;
  bottom: 10px;
  color: #fff;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  display: none;
  justify-content: center;
  transition: 1s;
}
.dots li {
  list-style: none;
  width: 10px;
  height: 10px;
  background-color: #fff;
  margin: 20px;
  border-radius: 20px;
}
.dots li.activee {
  width: 30px;
}

/***** end slider ******/
/******  start left content  *******/
.left-content{
  width: var(--w-left-content);
  border-radius: 13px!important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16.3px;
  .left-posts{
      display: flex;
      flex-direction: var(--fd-posts);
      margin-top: 10px;
      gap: 10px;
      .posts{
          width: var(--w-posts);
          display: flex;
          flex-direction: column;
          padding: 20px;
          border: 1px solid silver;
          border-radius: 10px;
          .post-top{
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              img{
                  width: 100%;
              }
          }
          .post-down{
             display: flex;
             flex-direction: column;
             justify-content: flex-start;
             gap: 10px;
             p:first-child{
              font-size: 11px;
              background-color: white;
              padding: 3px 5px;
              width: max-content;
              margin-top: -23.3px;
              border-left: 1px solid silver;
              border-bottom: 1px solid silver;
             }
             h2{
              font-size: 20px;
             }
             }
             p:last-child{
              font-size: 13px;
              text-align: center;
              padding: 6px;
              width: 100%;
              border: 1px solid silver;
              border-radius: 10px;
              transition: 1s ease;
             }
             p:last-child:hover{
              background-color: silver;
              color: black;
             }
             section {
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              span{
                  font-size: 17px;
              }
          }
      }
  }
  .running-text{
      display: flex;
      width: 100%;
      padding: 15px 0;
      justify-content: center;
      align-items: center;
      border: 1px solid silver;
      border-radius: 10px;
      marquee{
          font-size: 23px;
          font-weight: 500;
      }
  }
}
/******  start left content  *******/

.faq{
  padding: 30px var(--p-x);
  display: flex;
  flex-direction: column;
  gap: 10px;
  h1:first-child{
      font-size: 16px;
      font-weight: 600;
      padding: 7px 0;
      padding-right: 1px;
      width: max-content;
      border-bottom: 3px solid red;
      display: flex;
      align-items: center;
      gap: 2px;
      svg{
          width: 25px;
          margin-top: -3px;
      }
  }
  .faq-list{
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 10px;
      a{
          width: 100%;
          display: flex;
          padding: 5px;
          border: 1px solid silver;
          border-radius: 13px;
          transition: 1s ease;
          gap: 15px;
          div:first-child{
              width: var(--w-1st-faq);
              display: flex;
              img{
                  width: 90%;
                  height: 50px;
                  border-radius: 10px;
              }
          }
          div:last-child{
              width: var(--w-2nd-faq);
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              p{
                  font-size: 13px;
                  width: max-content;
                  padding: 6px 10px;
                  border-radius: 8px;
              }
              h1{
                  width: 95%;
                  font-size: 12px;
              }
          }
      }
      a:hover{
          background-color: rgba(192, 192, 192, 0.24);
      }
  }

}

/***** footer  ******/
footer{
  padding: 30px var(--p-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  ul{
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      li{
          a{
              color: white;
              font-size: 20px;
          }
          a:hover{
              color: grey;
              text-decoration: underline;
          }
      }
  }
}


/************** start normal-page-content **************/

.normal-page-content{
  padding: 30px var(--p-x);
  .title{
  font-size: 35px; 
          line-height: 46px;
  }
  div{
    
      font-size: 22px;
      line-height: 35px;
      display: flex;
      flex-direction: column;
      text-align: center;
      gap: 10px;
      a{
          color: brown;
      }
      a:hover{
          text-decoration: underline;
          color: red;
      }
  }
}

/************** end normal-page-content **************/


/****** responsive *******/

@media (max-width: 1130px) {
  :root{
      --p-x: 2%!important;
      --h-slider: 276px;
  }
}    
@media (max-width: 900px) {
  :root{
      --w-right-content: 100%;
      --fd-right-content: column;
      --w-left-content: 100%;
  }
}
@media (max-width: 820px) {
  :root{
      --fs-right-content-menu-h1: 16px;
      --fs-right-content-menu-p: 8px;
      --w-right-content: 100%;
      --fd-right-content: column;
      --w-left-content: 100%;
      --p-x-down-menus: 8px;
      --fs--down-menus: 16px;
      --h-slider: 224px; 
}
}
@media (max-width: 550px) {
  :root{
      --w-posts: 100%;
      --fd-posts: column;
      --w-1st-faq: 40%;
      --w-2nd-faq: 58%;
      --w-logo: 150px !important;
      --g-top-menus: 10px;
      --h-slider: 180px;
  }
  .down{
      overflow: hidden;
      overflow-x: scroll;
      a{
          white-space: nowrap!important;
      }
  }
  .down::-webkit-scrollbar {
      display: none;
  }
  #prev,
  #next{
      height: 40px;
      width: 40px;
      font-size: 20px;
  }
}
@media (max-width: 400px) {
  :root{
      --p-x-down-menus: 8px;
      --fs--down-menus: 18px;
      --fs-top-menus: 17px;
      --h-slider: 115px;
      
  }
}
/* Hide menu and top-menu on larger screens */
@media (min-width: 768px) {
  #menuToggle, #offCanvasMenu {
      display: none;
  }
}

/* Hide top-menu on mobile */
@media (max-width: 767px) {
  .top-menu {
      display: none !important;
  }
}

/* Styles for the three-dot menu button */
.mobile-menu-icon {
  font-size: 24px;
  cursor: pointer;
  z-index: 99999999999; /* Ensures the menu icon is on top */
}

/* Off-canvas menu */
.off-canvas-menu {
 
  position: fixed; /* Keep it fixed on the screen */
  top: 0;
  left: 0;
  width: 75%; /* Adjust width as needed */
  height: 100%;
  background-color: #fff; /* Background color */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); /* Optional shadow for depth */
  transform: translateX(-100%); /* Initially hidden off-screen */
  transition: transform 0.3s ease; /* Smooth transition */
  z-index: 1000; /* High z-index to ensure it's on top */
}

/* Slider Section */
.slider {
  position: relative !important; /* Necessary for proper stacking context */
  z-index: 1 !important; /* Lower z-index to keep it behind the off-canvas menu */
}

/* When menu is open */
.off-canvas-menu.open {
  transform: translateX(0);
}

/* Close button */
.close-btn {
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
}

@media (max-width: 767px) {
  .top-menu {
      display: none !important;
  }
  .mobile-width {
      width: 42px;
  }

}
.wordbarck{
 word-wrap: break-word !important;
}
@media (max-width: 767px) {
  .top-menu {
    display: none !important;
  }
}
/* Apply sticky positioning only on screens smaller than 768px (for mobile) */
@media (max-width: 767px) {
  .mobile-sticky {
    position: sticky;
  }
}

/* On desktop, ensure it's not sticky */
@media (min-width: 768px) {
  .mobile-sticky {
    position: static;
    /* or remove position altogether if not needed */
  }
}

/* Apply width only on mobile devices */
@media (max-width: 767px) {
  .mobile-width {
    width: 40px;
  }
}

.active {
  background: red;
  border-radius: 10px;
}
.noactive{
    background:none !important;
     border-radius: none !important;
     border: none !important;
}