/* ========================================= */
/* AkbarBin UI Framework */
/* Version : 1.0.0 */
/* ========================================= */

/* ========================================= */
/* BELOW 1344px (84em) */
/* Large Desktop */
/* ========================================= */

@media (max-width: 84em) {
  /* Reserved for future adjustments */
}

/* ========================================= */
/* BELOW 1200px (75em) */
/* Small Desktop */
/* ========================================= */

@media (max-width: 75em) {

  .container {
    padding-inline: var(--container-padding-tablet);
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .checklist--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ========================================= */
/* BELOW 944px (59em) */
/* Tablet */
/* ========================================= */

@media (max-width: 59em) {

  main {
    padding-top: var(--header-height-mobile);
  }

  html {
    scroll-padding-top: var(--header-height-mobile);
  }

  /* Layout */

  .grid--2-cols,
  .grid--3-cols,
  .grid--4-cols {
    grid-template-columns: 1fr;
  }

  /* Navbar */

  .navbar {
    position: relative;
  }

  .navbar-container {
    height: var(--header-height-mobile);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-menu {
    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: var(--space-32);

    padding: var(--space-32);

    background: var(--color-white);

    border-bottom: 1px solid var(--color-border);

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-1rem);

    transition: var(--transition-default);
  }

  .nav-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
  }

  .nav-menu .btn {
    width: 100%;
  }

  .section {
    padding-block: var(--space-80);
  }

  /* Hero */

  .hero-layout {
    gap: var(--space-48);
  }

  .hero-content {
    margin-inline: auto;
  }

  .hero-content,
  .hero-image,
  .section-header {
    text-align: center;
  }

  .hero .button-group,
  .hero .feature-list {
    justify-content: center;
  }

  .breadcrumb {
    padding-top: var(--space-16);
  }

  .breadcrumb-list {
    font-size: var(--fs-xs);
  }
 
  /* Timeline */

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline-step {
    max-width: 32rem;
    margin-inline: auto;
  }

  .timeline-line {
    display: none;
  }

  /* Stats */

  .stats {
    grid-template-columns: repeat(2,1fr);
  }

  /* Pricing */

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    padding: var(--space-24);
  }

  .checklist--grid {
    grid-template-columns: 1fr;
  }

  .pricing-included,
  .pricing-renewal,
  .cta-box {
    padding: var(--space-24);
  }

  .renewal-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  /* Footer */

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .footer-brand {
    text-align: center;
  }

  .footer-brand .nav-brand {
    margin-inline: auto;
  }

  .footer-brand p {
    margin-inline: auto;
  }

  .footer-brand .social-list {
    justify-content: center;
  }

  .footer-title,
  .footer-group {
    text-align: center;
  }

  .footer-links {
    align-items: center;
  }

}

/* ========================================= */
/* BELOW 704px (44em) */
/* Large Mobile */
/* ========================================= */

@media (max-width: 44em) {

  .container {
    padding-inline: var(--container-padding-mobile);
  }

  .section {
    padding-block: var(--space-64);
  }

  .hero {
    padding-block: var(--space-64);
  }

  .page-title {
    font-size: var(--fs-h1);
  }

  .hero-description {
    font-size: var(--fs-md);
  }

  .hero-image img {
    max-width: 40rem;
  }

  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .button-group .btn {
    width: 100%;
  }

  .cta-box .btn {
    display: flex;
    width: 100%;
    white-space: normal;
  }

  .fab {
    width: 5.2rem;
    height: 5.2rem;
  }

  .fab--whatsapp {
    right: var(--space-16);
    bottom: var(--space-16);
  }

  .fab--scroll {
    left: var(--space-16);
    bottom: var(--space-16);
  }

  .media,
  .feature-media-item,
  .icon-list-item {
    gap: var(--space-12);
  }

  .table {
    min-width: 64rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .feature-list--grid {
    grid-template-columns: 1fr;
  }

  .feature-list--nowrap {
    flex-wrap: wrap;
  }

  .social-links,
  .social-list {
    justify-content: center;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .accordion-header {
    padding: var(--space-16);
  }

  .accordion-content {
    padding: 0 var(--space-16) var(--space-16);
  }

  .cta-box {
    padding: var(--space-24);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

}

/* ========================================= */
/* BELOW 544px (34em) */
/* Small Mobile */
/* ========================================= */

@media (max-width: 34em) {

  .card {
    padding: var(--space-24);
  }

  .card-image {
    margin-bottom: var(--space-16);
  }

  .article-card {
    padding: 0;
  }

  .pricing-header {
    margin-bottom: var(--space-24);
  }

  .pricing-body {
    gap: var(--space-24);
  }

  .pricing-price span {
    font-size: var(--fs-h3);
  }

  .pricing-badge {
    left: var(--space-16);
  }

  .cta-box {
    padding: var(--space-32);
  }

}