@media screen and (max-width: 767.78px) {
  :root {
    --pad-top: 60px 0px !important;
    --pad-top1: 60px 0px 60px 0px !important;
    --pad-top2: 60px 0px 0px 0px !important;
  }
  html.dark body {
    --pad-top: 60px 0px;
    --pad-top1: 0px 0px 60px 0px;
    --pad-top2: 60px 0px 0px 0px;
  }

  .theme-toggle-btn {
    width: 35px;
    height: 35px;
  }

  .offcanvas-header img {
    filter: brightness(0);
  }

  html.dark body .navbar-brand img,
  html.dark body .offcanvas-header img {
    filter: brightness(0) invert(1);
  }
  .logo-fluid {
    width: auto;
    height: 46px;
  }
  .togu {
    margin-left: 25px;
  }
  .header1 {
    backdrop-filter: unset;
  }
  .mm-tab.active {
    background: #a020f0;
  }
  .mm-tab {
    border: 1px solid #a020f0;
    background: transparent;
  }
  .nav-btn-text {
    transform: translateY(0);
    opacity: 1;
    color: #020202 !important;
  }
  html.dark body .nav-btn-text,
  .dark-mode .nav-btn-text,
  [data-theme="dark"] .nav-btn-text {
    color: #ffffff !important;
  }
  .navbar-light .navbar-nav .nav-link {
    color: var(--primary-color) !important;
  }
  header.sticky .navbar-light .navbar-nav .nav-link {
    color: var(--primary-color) !important;
  }

  .navbar-toggler {
    color: #a020f0 !important;
    border-color: #a020f0 !important;
  }
  header.sticky .navbar-toggler {
    color: #a020f0 !important;
    border-color: #a020f0 !important;
  }
  .dropdown-submenu > .dropdown-menu {
    position: static;
    display: block;
  }
  .dropdown-submenu > .dropdown-menu {
    position: static;
    display: none;
    margin: 0;
    box-shadow: none;
  }

  .dropdown-submenu.show > .dropdown-menu {
    display: block;
  }
  .title {
    font-size: 30px !important;
  }
  .hero-title {
    padding-top: 20px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 20px 6px;
    gap: 40px;
  }
  .mt-m-05 {
    margin-top: 40px;
  }
  .adoxin-svc-wrap .svc-nav {
    margin-top: 0px;
  }
  .section-container {
    padding: 3rem 0rem 0rem 0rem;
  }
  .title-32 {
    margin-top: 1rem;
  }
  .service-content {
    padding: 30px 13px 20px 13px;
  }
  .serv-mg {
    height: auto;
  }
  .title-32 {
    font-size: 26px;
  }
  .who-box {
    padding: 40px 15px;
  }
  .title-white {
    font-size: 30px !important;
  }
  .stats-box {
    padding: 40px 15px;
  }
  .section {
    padding: 40px 24px 0px;
  }
  .ticker-word {
    font-size: 180px;
  }
  .cta-card {
    padding: 30px 20px 40px;
  }
  .cta-btn {
    font-size: 18px;
  }
  .form-panel-title {
    font-size: 18px;
  }
  .form-inner {
    padding: 2px 16px 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }

  .slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
  }

  .card1 {
    flex: 0 0 calc((100% - 72px) / 4);
    box-sizing: border-box;
  }

  /* mobile */
  @media (max-width: 767px) {
    .card1 {
      flex: 0 0 100% !important;
    }
  }

  /* tablet */
  @media (min-width: 768px) and (max-width: 991px) {
    .card1 {
      flex: 0 0 calc((100% - 24px) / 2) !important;
    }
  }

  /* small desktop */
  @media (min-width: 992px) and (max-width: 1199px) {
    .card1 {
      flex: 0 0 calc((100% - 48px) / 3) !important;
    }
  }

  /* desktop */
  @media (min-width: 1200px) {
    .card1 {
      flex: 0 0 calc((100% - 72px) / 4) !important;
    }
  }
  .btn-right {
    float: inline-start;
  }
  .footer {
    padding: 60px 0px 20px;
  }
  .footer-bottom {
    text-align: center;
  }
  .marquee-section {
    margin-top: 40px;
  }

  #cards-wrapper {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 16px !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #c1,
  #c2,
  #c3,
  #c4 {
    position: relative !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .cta-title {
    font-size: 48px;
  }
  .cta-card {
    top: 30%;
  }
  .card-title {
    height: auto;
  }
  .counter {
    font-size: 35px;
  }
  .adoxin-svc-wrap .svc-nav .svc-nav-btn {
    width: 32px;
    height: 32px;
  }
  .tag {
    padding: 8px 18px;
  }

  /* about page */
  .ban-title {
    font-size: 50px;
  }
  .banner-layout {
    padding: 140px 20px 0px 20px;
  }
  .card-about {
    width: 100%;
  }
  .card-about-wrapper {
    padding: 0px;
    background-color: transparent;
  }
  .about-img {
    margin-bottom: 40px;
  }
  .checklist {
    gap: 15px 15px;
  }
  .check-icon {
    width: 15px;
    height: 15px;
    min-width: 15px;
    font-size: 8px;
    margin-right: 6px;
  }
  .check-item {
    font-size: 13px;
  }
  .process-grid {
    margin-top: 50px;
  }
  .process-grid {
    gap: 3rem;
  }
  .who-box {
    padding: 30px 15px;
  }
  .mv-card {
    padding: 35px 30px;
    margin-top: 30px;
  }
  .mv-val {
    padding: 20px 20px;
  }
  .mv-quote {
    padding: 30px 30px;
  }
  .headline-card {
    padding: 30px 30px;
  }

  /* contact page */

  .icon {
    min-width: 45px;
    width: 45px;
    height: 45px;
    border-radius: 10px;
  }
  .info-item h4 {
    font-size: 18px;
  }
  .contact-form-box {
    margin-top: 50px;
    padding: 30px 20px 30px 20px;
  }
  .contact-info-box {
    padding: 30px 20px 30px 20px;
  }
  .contact-section .form-row {
    display: block;
  }
  .contact-form-box h2 {
    margin-bottom: 0px !important;
  }

  /* blog page */

  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-details-wrap {
    padding: 60px 0;
  }
  .blog-content {
    padding: 0px 0px;
  }
  .hero-content h1 {
    font-size: 30px;
    margin-bottom: 10px !important;
  }
  .blog-layout {
    gap: 50px;
  }

  /* service */

  .btn {
    font-size: 15px;
  }
  .ban-title {
    font-size: 40px;
  }
  .banner-layout.serv-ban {
    display: unset;
    padding: 120px 0px 60px 0px;
  }
  .serv-title {
    padding-top: 40px;
  }
  .solution-card h4 {
    font-size: 26px !important;
  }
  .services-values-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 25px;
  }
  .card-content {
    padding: 30px 20px;
  }
  .faq-body {
    grid-template-columns: 1fr;
  }
  span.faq-question-text.title {
    font-size: 22px !important;
    line-height: normal;
  }
  .faq-item {
    padding: 2px;
  }
  .serv-cont-txt {
    padding: 60px 0px 0px 0px;
  }
  .title-sm {
    font-size: 26px !important;
  }
  .footer-col ul li {
    font-size: 16px;
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
  .pb-m-5 {
    margin-bottom: 25px !important;
  }
  .pb-m- {
    margin-bottom: 25px !important;
  }

  .d-oio {
    display: none;
  }
  .right.scroll-on-hover {
    margin-top: 10px;
  }
  .mb-none {
    display: none;
  }
  .carousel-card {
    height: 480px;
  }
  .solution-card {
    margin: 0px;
  }
  .d-n {
    display: none;
  }
  .mobile-frm {
    display: block;
  }
  .open {
    margin-top: 0px;
  }
  .about-img {
    height: auto;
  }
  .hg-t {
    height: auto;
  }
  .who-we-are-section .who-box {
    display: none;
  }
  .nb-mt {
    margin-top: 0px;
  }
  /* Light Mode */
  body.light-mode .dropdown-toggle::after {
    color: #000 !important;
  }
  .dropdown-toggle::after {
    color: var(--primary-color) !important;
    position: absolute;
    right: 2px;
  }
}

@media screen and (max-width: 320px) {
  .logo-img {
    height: 40px !important;
    width: auto !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  :root {
    --pad-top: 60px 0px !important;
    --pad-top1: 60px 0px 60px 0px !important;
    --pad-top2: 60px 0px 0px 0px !important;
  }
  html.dark body {
    --pad-top: 60px 0px;
    --pad-top1: 0px 0px 60px 0px;
    --pad-top2: 60px 0px 0px 0px;
  }
  .navbar-brand img,
  .offcanvas-header img {
    filter: brightness(0);
  }
  .dropdown-toggle::after {
    color: var(--primary-color) !important;
    position: absolute;
    right: 2px;
  }

  html.dark body .navbar-brand img,
  html.dark body .offcanvas-header img {
    filter: brightness(0) invert(1);
  }
  .logo-fluid {
    width: auto;
    height: 46px;
  }
  .togu {
    margin-left: 25px;
  }
  .header1 {
    backdrop-filter: unset;
  }
  .navbar-light .navbar-nav .nav-link {
    color: var(--primary-color) !important;
  }
  header.sticky .navbar-light .navbar-nav .nav-link {
    color: var(--primary-color) !important;
  }

  .navbar-toggler {
    color: #a020f0 !important;
    border-color: #a020f0 !important;
  }
  header.sticky .navbar-toggler {
    color: #a020f0 !important;
    border-color: #a020f0 !important;
  }
  .dropdown-submenu > .dropdown-menu {
    position: static;
    display: block;
  }
  .dropdown-submenu > .dropdown-menu {
    position: static;
    display: none;
    margin: 0;
    box-shadow: none;
  }

  .dropdown-submenu.show > .dropdown-menu {
    display: block;
  }

  .mm-tab.active {
    background: #a020f0;
  }
  .mm-tab {
    border: 1px solid #a020f0;
    background: transparent;
  }
  .nav-btn-text {
    transform: translateY(0);
    opacity: 1;
    color: #020202 !important;
  }
  html.dark body .nav-btn-text,
  .dark-mode .nav-btn-text,
  [data-theme="dark"] .nav-btn-text {
    color: #ffffff !important;
  }
  .title {
    font-size: 30px !important;
  }
  .hero-title {
    padding-top: 20px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 20px 6px;
    gap: 40px;
  }
  /* .mt-m-05 {
    margin-top: 40px;
  } */
  .hero-actions {
    justify-content: space-between;
  }
  .btn {
    font-size: 14px;
  }
  .adoxin-svc-wrap .svc-nav {
    margin-top: 0px;
  }
  .section-container {
    padding: 3rem 0rem 0rem 0rem;
  }
  .title-32 {
    margin-top: 1rem;
  }
  .service-content {
    padding: 30px 13px 20px 13px;
  }
  .serv-mg {
    height: auto;
  }
  .title-32 {
    font-size: 26px;
  }
  .who-box {
    padding: 40px 15px;
  }
  .title-white {
    font-size: 30px !important;
  }
  .stats-box {
    padding: 40px 15px;
  }
  .section {
    padding: 40px 24px 0px;
  }
  .ticker-word {
    font-size: 180px;
  }
  .cta-card {
    padding: 30px 20px 40px;
  }
  .cta-btn {
    font-size: 18px;
  }
  .form-panel-title {
    font-size: 18px;
  }
  .form-inner {
    padding: 2px 16px 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }

  .slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
  }

  .card1 {
    flex: 0 0 calc((100% - 72px) / 4);
    box-sizing: border-box;
  }

  /* mobile */
  @media (max-width: 767px) {
    .card1 {
      flex: 0 0 100% !important;
    }
  }

  /* tablet */
  @media (min-width: 768px) and (max-width: 991px) {
    .card1 {
      flex: 0 0 calc((100% - 24px) / 2) !important;
    }
  }

  /* small desktop */
  @media (min-width: 992px) and (max-width: 1199px) {
    .card1 {
      flex: 0 0 calc((100% - 48px) / 3) !important;
    }
  }

  /* desktop */
  @media (min-width: 1200px) {
    .card1 {
      flex: 0 0 calc((100% - 72px) / 4) !important;
    }
  }
  /* .btn-right {
    float: inline-start;
  } */
  .footer {
    padding: 60px 0px 20px;
  }
  .footer-bottom {
    text-align: center;
  }
  .marquee-section {
    margin-top: 40px;
  }

  #cards-wrapper {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #c1,
  #c2,
  #c3,
  #c4 {
    position: relative !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .cta-title {
    font-size: 48px;
  }
  .cta-card {
    top: 30%;
  }
  .card-title {
    height: auto;
  }
  .footer-col ul li {
    font-size: 16px;
  }
  .btn svg {
    width: 35px;
    height: 35px;
  }

  /* about page */
  .about-img {
    margin-bottom: 40px;
  }

  /* contact page */

  .contact-form-box {
    margin-top: 50px;
  }

  /* blog page */

  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
  .blog-details-wrap {
    padding: 60px 0;
  }

  /* service */

  .btn {
    font-size: 15px;
  }
  .ban-title {
    font-size: 45px;
  }
  .services-values-card-typography {
    padding: 28px 15px 36px 15px;
  }
  .services-values-card-icon {
    max-width: 30px;
    max-height: 30px;
  }
  .services-values-card-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 14px;
  }
  .faq-body {
    grid-template-columns: 1fr;
  }
  .cta-card {
    top: 30%;
  }
  .cta-title {
    font-size: 35px;
  }
  span.faq-question-text.title {
    font-size: 24px !important;
    line-height: normal;
  }

  .d-oio {
    display: none;
  }
  .right.scroll-on-hover {
    margin-top: 10px;
  }
  .mb-none {
    display: none;
  }
  .image-wrap {
    height: 270px;
  }
  .carousel-card {
    height: 520px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .navbar-light .navbar-nav .nav-link {
    margin-right: 0.2rem !important;
    margin-left: 0.2rem !important;
  }
  .navbar-light .navbar-nav .nav-link {
    padding: 8px 6px;
    font-size: 62% !important;
  }
  .dropdown-toggle::after {
    color: var(--white-color) !important;
    position: absolute;
    right: -1px;
  }

  .logo-img {
    width: 190px;
    height: auto;
  }
  .dropdown-toggle::after {
    color: var(--white-color) !important;
    position: absolute;
    right: -1px;
  }
  .btn {
    padding: 6px 0 6px 40px;
  }
  .footer-col ul li {
    font-size: 16px;
  }
  .hero-title {
    font-size: 65px;
  }
  .card-title {
    height: auto;
  }
  .footer-container {
    gap: 12px;
  }
  .social-icons a {
    margin-right: 5px;
    width: 32px;
    height: 32px;
  }
  .blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
  }
  .recent-post img {
    width: 70px;
    height: 70px;
  }
  .sidebar-box {
    padding: 20px 15px 20px;
  }
}