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

html{
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
/* -------------------------- Header ---------------------------- */

.doc-header{
  border-bottom: 1px solid #24bdaf
}
.doc-header .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 15px 0;
}
.container{
  max-width: 1400px;
  margin: 0 auto;
}
.Logo img {
    width: 20%;
}
.translator,.btns {
  text-align: center;
}


/* -------------------------- Content ---------------------------- */
.doc-tab::-webkit-scrollbar-track {
  background: #eeeeee !important;
  border-radius: 22px;
}
.doc-tab::-webkit-scrollbar-thumb {
  background: #24bdaf;
  border-radius: 22px;
}
.doc-tab::-webkit-scrollbar {
  width: 6px;
}
.doc-content{
  padding: 30px 0;
}
.doc-content .container {
  display: flex;
}
.doc-tab {
  width: 20%;
  overflow-y: scroll;
  height: 600px;
  position: sticky;
  top: 1.5rem;
  background-color: #eeeeee;
  padding: 25px;
  border-radius: 5px
}
.tab-content {
  width: 80%;
  padding-left: 50px;
}
.tab {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}
button.tablinks {
  padding: 15px;
  font-size: 18px;
  font-family: sans-serif;
  text-align: left;
  color: #000000;
  width: 100%;
}
.tablinks.active{
  background-color: #24bdaf;
  color: #ffffff;
}
.doc-content img {
  width: 90%;
}
.doc-content video {
  width: 90%;
}
.doc-content video {
  margin: 20px 0;
}
.sab-tab{
  display: none;
}
.cs{
  display: flex !important;
  align-items: center;
  justify-content:space-between;
}
.sab-tab button {
  border: none;
  background: transparent;
  border-bottom: 1px solid #000000;
  padding: 15px 35px;
}
.btns {
  display: flex ;
  justify-content: end;
  align-items: center;
}
.btns .demo {
  position: relative;
  text-decoration: none;
}
.btns .demo span {
  width: 170px;
  height: 45px;
  background-color: #f36f23;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  font-family: 'Montserrat',sans-serif;
  border-radius: 5px;
  text-transform: capitalize;
  letter-spacing: 0;
  transition: transform .1s cubic-bezier(.215,.61,.355,1);
}
.btns .demo:before{
  content: "";
  position: absolute;
  width: 98%;
  height: 100%;
  top: 4px;
  right: 0;
  background-color: #fff;
  z-index: -1;
  border: 2px solid #f36f23;
  border-radius: 5px;
  transition: all .3s;
}
.btns .demo:hover span {
  transform: translateY(6px);
}
.btns .buynow {
  position: relative;
  text-decoration: none;
  margin-left: 20px;
}
.btns .buynow span {
  width: 170px;
  height: 45px;
  background-color: #24bdaf;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  font-family: 'Montserrat',sans-serif;
  border-radius: 5px;
  text-transform: capitalize;
  letter-spacing: 0;
  transition: transform .1s cubic-bezier(.215,.61,.355,1);
}
.btns .buynow:before{
  content: "";
  position: absolute;
  width: 98%;
  height: 100%;
  top: 4px;
  right: 0;
  background-color: #fff;
  z-index: -1;
  border: 2px solid #24bdaf;
  border-radius: 5px;
  transition: all .3s;
}
.btns .buynow:hover span {
  transform: translateY(6px);
}
.support-btn{
  position: relative;
  text-decoration: none;
  margin-left: 20px;
}
.support-btn:before {
  content: "";
  position: absolute;
  width: 98%;
  height: 100%;
  top: 4px;
  right: 0;
  background-color: #fff;
  z-index: -1;
  border: 2px solid #071433;
  border-radius: 5px;
  transition: all .3s;
}
.support-btn span {
  width: 170px;
  height: 45px;
  background-color: #071433;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  font-family: 'Montserrat',sans-serif;
  border-radius: 5px;
  text-transform: capitalize;
  letter-spacing: 0;
  transition: transform .1s cubic-bezier(.215,.61,.355,1);
}
.support-btn:hover span {
  transform: translateY(6px);
}
.cs:after {
  content: '\f107';
  font-size: 20px;
  font-family: fontAwesome;
  font-weight: 900;
}
.theme-name h1 {
  font-size: 45px;
  font-family: 'Montserrat', sans-serif;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
}
.tab-content h2 {
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  text-transform: capitalize;
}
.tab-content h2 {
  font-size: 28px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 0;
}
.tab-content h3 {
  font-size: 22px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: capitalize;
}
.tab-content h4 {
  font-size: 20px;
  line-height: 26px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-transform: capitalize;
}
.tab-content p {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  line-height: 30px;
  text-align: justify;
}
.support-text{
  display: flex;
  align-items: center;
}
.tab-content ul li {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  line-height: 30px;
  text-align: justify;
}
.support a,.add-cat a,.add-post a {
  font-size: 20px;
  line-height: 30px;
  font-family: 'Montserrat' , sans-serif;
  font-weight: 700;
  color: red;
  text-decoration: none;
  padding-left: 5px;
}
.tab-content img{
  margin: 20px 0;
}
.doc-tab h4 {
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding-bottom: 10px;
  letter-spacing: 1px;
}
.sab-tab {
  padding-left: 15px;
}
a.tablinks {
  font-size: 15px;
  font-family: 'Montserrat',sans-serif;
  padding: 10px 10px;
  line-height: 26px;
  display: block;
  text-decoration: none;
  color: #000000;
  font-weight: 600;
}
.add {
  background-color: #24bdaf;
  border-radius: 5px;
  color: #ffffff !important;
}
.tabcontent {
  padding-top: 20px;
}
.img-pop {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000bd;
  width: 100%;
  height: 100%;
  z-index: -1;
  visibility: hidden;
}
.img-pop-2 {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000bd;
  width: 100%;
  height: 100%;
  z-index: -1;
  visibility: hidden;
}
.img-pop-3 {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000bd;
  width: 100%;
  height: 100%;
  z-index: -1;
  visibility: hidden;
}

@media screen and (max-width:1440px) {
  .doc-header .container,.doc-content .container { padding: 15px;}
}

@media screen and (max-width:1200px) {
  /* Header */
  .btns .demo span,.support-btn span,.btns .buynow span { width: 120px; height: 40px; }
  .btns .demo:before,.support-btn:before,.btns .buynow:before { width: 97%; height: 96%; top: 5px; }
  .doc-header .container { grid-template-columns: 1fr 1fr; padding: 10px 10px 15px; }
  .Logo img { width: 20%; }

  /* Index */
  .doc-content .container { padding: 0 15px; }
  .theme-name h1 { font-size: 34px; }
  .doc-content { padding: 10px 0; }
  .doc-tab { width: 25%; padding: 25px; }
  a.tablinks { font-size: 14px; }
  .doc-tab h4 { font-size: 20px; }
  .tab-content { width: 75%; padding-left: 25px; }
  .tab-content h2 { font-size: 22px; margin-bottom: 10px; }
  .tab-content p { font-size: 14px; line-height: 22px; margin-bottom: 20px; }
  .tab-content h3 { font-size: 18px; }
  .tab-content ul li { font-size: 14px; line-height: 26px; }
  .tab-content h4 { font-size: 16px; margin-bottom: 10px; }
  .tabcontent ul { margin: 0; padding-bottom: 0px; }
  strong { font-weight: 600; }
  .support a, .add-cat a, .add-post a { font-size: 14px; }
}

@media screen and (max-width:801px) {
  /* Header */
  .btns .demo span,.support-btn span,.btns .buynow span { width: 120px; height: 40px; }
  .btns .demo:before,.support-btn:before,.btns .buynow:before { width: 97%; height: 96%; top: 5px; }
  .doc-header .container { grid-template-columns: 1fr 1fr; padding: 10px 10px 15px; }
  .Logo img { width: 30%; }

  /* Index */
  .doc-content .container { padding: 0 15px; }
  .theme-name h1 { font-size: 34px; }
  .doc-content { padding: 10px 0; }
  .doc-tab { width: 30%; padding: 15px; }
  a.tablinks { font-size: 14px; }
  .doc-tab h4 { font-size: 20px; }
  .tab-content { width: 70%; padding-left: 25px; }
  .tab-content h2 { font-size: 22px; margin-bottom: 10px; }
  .tab-content p { font-size: 14px; line-height: 22px; margin-bottom: 20px; }
  .tab-content h3 { font-size: 18px; }
  .tab-content ul li { font-size: 14px; line-height: 26px; }
  .tab-content h4 { font-size: 16px; margin-bottom: 10px; }
  .tabcontent ul { margin: 0; padding-bottom: 0px; }
  strong { font-weight: 600; }
  .support a, .add-cat a, .add-post a { font-size: 14px; }
}

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

  /* Header */
  .btns .demo span,.support-btn span,.btns .buynow span { width: 120px; height: 40px; }
  .btns .demo:before,.support-btn:before,.btns .buynow:before { width: 96%; height: 96%; top: 5px; }
  .doc-header .container { grid-template-columns: 1fr; padding: 10px 0 20px; grid-gap: 15px; }
  .btns { justify-content: center; }
  .Logo { text-align: center; }

  /* Index */
  .doc-content { padding: 15px 0 0; }
  .doc-content .container { flex-direction: column; padding: 0 15px;}
  .doc-tab { width:auto; position: relative; top: 0; height: 501px;}
  .tab-content { width:auto; padding-left: 0; margin-top: 20px; }
  .theme-name h1 { font-size: 30px; margin: 15px 0; }
  .tab-content h2 { font-size: 22px; margin-bottom: 10px; }
  .tab-content p { font-size: 14px; line-height: 22px; margin-bottom: 20px; }
  .tab-content h3 { font-size: 18px; }
  .tab-content ul li { font-size: 14px; line-height: 26px; }
  .tab-content h4 { font-size: 16px; margin-bottom: 10px; }
  .tabcontent ul { margin: 0; padding-bottom: 10px; }
  strong { font-weight: 600; }
  .support a, .add-cat a, .add-post a { font-size: 14px; }
  .tabcontent { padding-top: 0px; }
}

@media screen and (max-width:320px) {
  .support-btn { display: none }
  .theme-name h1 { font-size: 24px; }
  .doc-tab { padding: 20px; }
  .doc-tab h4 { font-size: 20px; }
  a.tablinks { font-size: 14px; padding: 7px 10px; }
  .tab-content { margin-top: 15px; }
}