/* 4K and Ultra-Wide Monitors (Screens larger than standard desktops) */
@media (min-width: 2560px) {
  
}

/* Extra Extra Large Screens (Large Desktops below 1400px) */
@media (max-width: 1920px) {
  
}

/* Extra Large Screens (Laptops / Small Desktops below 1200px) */
@media (max-width: 1200px) {
  .pricing-card h5 {
    font-size: 1.3rem;
  }
  .price {
    font-size: 1.5rem;
  }
  .selected-plan-price {
    font-size: 40px;
  }
  .selected-plan-name {
    font-size: 24px;
  }
  #pg-profile .nav-link {
    font-size: 1rem;
  }
 
}

/* Large Screens (Tablets in Landscape / Small Laptops below 992px) */
@media (max-width: 992px) {
    .tw-navbar-grid {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .tw-navigation,
    .tw-actions {
        display: none;
    }
    .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        padding: 0;
        width: 46px;
        height: 46px;
        margin-left: auto;
        position: absolute;
        right: 0;
    }
    .navbar-toggler-icon {

        background-image: none;

        position: relative;

        width: 24px;

        height: 2px;

        background: #c71919;

        border-radius: 20px;

    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {

        content: "";

        position: absolute;

        left: 0;

        width: 24px;

        height: 2px;

        background: #c71919;

        border-radius: 20px;

    }

    .navbar-toggler-icon::before {

        top: -7px;

    }

    .navbar-toggler-icon::after {

        top: 7px;

    }
    .mobile-overlay {

        position: fixed;

        inset: 0;

        background: rgba(0,0,0,.65);

        backdrop-filter: blur(4px);

        opacity: 0;

        visibility: hidden;

        transition: .35s;

        z-index: 1098;

    }
    .mobile-drawer {

        position: fixed;

        top: 0;

        right: -340px;

        width: 320px;

        max-width: 90vw;

        height: 100vh;

        background: #121827;

        border-left: 1px solid rgba(255,255,255,.08);

        display: flex;

        flex-direction: column;

        transition: right .35s ease;

        z-index: 1099;

    }
    .mobile-drawer-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 24px;

        border-bottom: 1px solid rgba(255,255,255,.06);

    }
    .mobile-logo img {

        height: 38px;

    }
    .mobile-close {

        background: transparent;

        border: 0;

        color: #fff;

        font-size: 18px;

        cursor: pointer;

    }
    .mobile-nav {

        display: flex;

        flex-direction: column;

        padding: 28px 24px;

    }

    .mobile-nav a {

        color: #d8dce7;

        text-decoration: none;

        padding: 18px 0;

        border-bottom: 1px solid rgba(255,255,255,.05);

        font-size: 17px;

        font-weight: 500;

    }
    .mobile-actions {

        margin-top: auto;

        padding: 24px;

        display: flex;

        flex-direction: column;

        gap: 14px;
        text-align: center;

    }
    .mobile-overlay.active {

        opacity: 1;

        visibility: visible;

    }

    .mobile-drawer.active {

        right: 0;

    }
    .mobile-overlay{
        display:block;
    }

    .mobile-drawer{
        display:flex;
    }
    .mobile-menu-btn{

        display:flex;

    }
    .pricing-card h5 {
        font-size: 1.2rem;
    }
    .plan-info {
        border: 0;
    }
}

/* Medium Screens (Tablets in Portrait below 768px) */
@media (max-width: 768px) {
  .wizard-progress-wrapper {
    display: none;
  }
}

/* Small Screens (Landscape Phones below 576px) */
@media (max-width: 576px) {
  .tw-card-icon {
    display: none;
  }
}

/* Extra Small Screens (Portrait Phones / Budget Smartphones below 360px) */
@media (max-width: 480px) {
  .plan-name {
    font-size: 23px;
    }
    .plan-status {
        position: absolute;
        right: 20%;
        top: 1.5%;
    }
}