@media screen and (min-width: 992px) {
     .mobile-only {
         display: none !important;
     }

     .desk-only {
         display: block !important;
     }
 }

 @media screen and (max-width: 1199px) {
     :root {
         --h1: normal 500 46px/1.3 var(--first-font);
         --h2: normal 500 36px/1.3 var(--first-font);
         --h3: normal 500 28px/1.3 var(--first-font);
         --h4: normal 500 24px/1.3 var(--first-font);
         --h5: normal 500 20px/1.3 var(--first-font);
         --h6: normal 500 16px/1.3 var(--second-font);
     }

     .user-overview-section .btn {
         font-size: 14px;
     }

     .user-actions {
         gap: 6px;
     }

     /**** log in page css  ****/
     .log-in-page {
         background: url('/assets/images/signin_new.png') no-repeat center center fixed;
     }

     .image-section {
         display: none;
     }

     .log-in-page::before {
         display: inherit;
     }

     .log-in-page .form-section {
         background-color: transparent;
     }

     .security-timeline {
         max-width: 600px;
     }
 }

 @media screen and (max-width: 991px) {
     :root {
         --h1: normal 500 36px/1.3 var(--first-font);
         --h2: normal 500 32px/1.3 var(--first-font);
         --h3: normal 500 26px/1.3 var(--first-font);
         --h4: normal 500 22px/1.3 var(--first-font);
         --h5: normal 500 18px/1.3 var(--first-font);
         --common-text: normal 400 14px/1.3 var(--second-font);
     }

     .section-title {
         margin: 0 0 18px;
     }

     .pt {
         padding-top: 30px;
     }

     .pb {
         padding-bottom: 30px;
     }

     .sidebar {
         left: -300px;
         background-color: var(--black);
         z-index: 4;
         transition: left 0.3s ease;
         -webkit-transition: left 0.3s ease;
         -moz-transition: left 0.3s ease;
         -ms-transition: left 0.3s ease;
         -o-transition: left 0.3s ease;
     }

     .sidebar.active {
         left: 0;
     }
 }

 @media screen and (max-width: 767px) {
     :root {
         --h1: normal 500 32px/1.3 var(--first-font);
         --h2: normal 500 26px/1.3 var(--first-font);
         --h3: normal 500 24px/1.3 var(--first-font);
         --h4: normal 500 20px/1.3 var(--first-font);
     }

     .btn {
         padding: 8px 15px;
         font-size: 14px;
     }

     .close-sidebar-btn {
         display: block;
     }

     #dashboard-section {
         padding: 0px;
         box-shadow: none;
     }

     .doc_sidebar {
         transform: translateX(-100%);
         position: fixed;
         z-index: 10;
     }

     .doc_sidebar.active {
         transform: translateX(0);
     }

     .header-doc .menu-toggle {
         display: block;
     }

     .doc_content {
         margin-left: 0;
         width: 100%;
     }

     .doc_content .doc_content_wrp {
         padding: 20px 15px;
     }

     .header-doc {
         width: 100%;
     }
 }

 @media screen and (max-width: 575px) {
     :root {
         --h1: normal 500 30px/1.3 var(--first-font);
         --h2: normal 500 26px/1.3 var(--first-font);
         --h3: normal 500 22px/1.3 var(--first-font);
     }

     .header-doc .logo {
         font-size: 14px;
     }

     .header-doc,
     .section-box {
         padding: 15px;
     }

     .doc_content h2 {
         margin-bottom: 15px !important;
         text-align: inherit;
     }

     .preview-grid {
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     }
     .about-section {
        margin-top: 60px !important;
    }
 }