* {
    font-family: 'DB_Heavent_Original', sans-serif;
}

body {
    margin: 0;
}

@keyframes move {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes zscaling {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Regular */
@font-face {
  font-family: "Walone";
  src: url("../fonts/walone/regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: "Walone";
  src: url("../fonts/walone/bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

/* Thin */
@font-face {
  font-family: "Walone";
  src: url("../fonts/walone/thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

.main-banner-container {
    width: 100%;
    position: relative;
    display: flex;
}

.main-banner-container .pro-plan {
    width: 30%;
    position: absolute;
    top: 50%;
    left: 4.8%;
    animation: zscaling 0.7s infinite;
}

.main-banner-container .banner {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.main-banner-container .on-btn-gp {
    position: absolute;
    bottom: 1%;
    left: 3.5%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.main-banner-container .on-btn {
    font-size: 2.2rem;
    line-height: 2.2rem;
    color: #FFFFFF;
    background-color: #D62825;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 10px;
    width: fit-content;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    outline: none;
}

.main-banner-container .on-btn.mm {
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.main-banner-container .on-btn.desktop {
    display: flex;
}

.main-banner-container .on-btn.mobile {
    display: none;
}

.main-banner-container .on-btn span {
    transform: translateX(14px);
    transition: transform 0.3s ease-in-out;
    display: flex;
    gap: 10px;
    align-items: center;
}

.main-banner-container .on-btn.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    padding: 5px 0 0 0;
}

.main-banner-container .on-btn:hover span {
    transform: translateX(0);
}

.main-banner-container .on-btn svg {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.3s ease-in-out;
}

.main-banner-container .on-btn:hover svg {
    opacity: 1;
    transform: translateX(0);
}

.special-discount-container {
    width: 100%;
    background-color: #D62825;
    padding: 10px 0;
    display: none;
}

.special-discount-container p {
    color: #FFFFFF;
    font-size: 2.2rem;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.special-discount-container p.mm {
    font-size: 1.5rem;
}

.special-discount-container p span {
    color: yellow;
}

/* about */
.about-container {
    padding: 0 0 30px;
    width: 60%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.about-container .title {
    font-size: 3.5rem;
    color: #323232;
    margin: 0;
    width: fit-content;
    margin: auto;
    text-align: center;
}

.about-container .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 2.2rem;
}

.about-container .title span {
    color: #D62825;
}

.about-container .title.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
}

.about-container .info {
    font-size: 2.2rem;
    line-height: 2.2rem;
    color: #646464;
    margin: 0;
    text-align: center;
}

.about-container .info.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 2.5rem;
}

/* about lists */
.about-container-lists {
    padding: 0 0 30px;
}

.about-container-lists .cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: stretch;
    justify-content: center;
    width: 80%;
    margin: auto;
}

.about-container-lists .cards .card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    align-items: flex-start;
    padding: 20px;
}

.about-container-lists .cards .card .card-header {
    width: 100%;
    text-align: center;
}

.about-container-lists .cards .card .card-header .icon {
    width: 20%;
    height: auto;
    object-fit: cover;
}

.about-container-lists .cards .card .card-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.about-container-lists .cards .card .card-body .title {
    color: #323232;
    font-size: 2.2rem;
    font-weight: normal;
    text-align: center;
    width: fit-content;
    margin: auto;
}

.about-container-lists .cards .card .card-body .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 1.5rem;
}

.about-container-lists .cards .card .card-body .info {
    color: #646464;
    font-size: 2rem;
    line-height: 2rem;
    text-align: center;
    width: fit-content;
    margin: auto;
}

.about-container-lists .cards .card .card-body .info.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 2.2rem;
}

/* plans */
.plans-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 30px 0;
}

.plans-container .content-header {
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.plans-container .content-header.mm {
    width: 80%;
}

.plans-container .content-header .title {
    color: #323232;
    font-size: 3.5rem;
    font-weight: normal;
    text-align: center;
    width: fit-content;
    margin: 0 auto;
}

.plans-container .content-header .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 2.2rem;
}

.plans-container .content-header .card {
    background: linear-gradient(45deg, rgba(209,4,0,1) 0%, rgba(150,2,0,1) 100%);
    padding: 30px;
}

.plans-container .content-header .card .card-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plans-container .content-header .card .card-header .title {
    color: #FFFFFF;
    font-size: 3.5rem;
    margin: 0 auto;
}

.plans-container .content-header .card .card-header .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 1.5rem;
    padding: 5px 0 0 0;
}

.plans-container .content-header .card .card-header .divider {
    width: 7%;
    border: 3px solid #FFFFFF;
    margin: auto;
}

.plans-container .content-header .card .card-header .lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 50px;
    padding: 20px 0 0 0;
    width: fit-content;
    margin: auto;
}

.plans-container .content-header .card .card-header .lists.mm {
    width: 80%;
}

.plans-container .content-header .card .card-header .lists .list-item {
    color: #FFFFFF;
    font-size: 2.2rem;
    line-height: 2.5rem;
    margin: 0;
}

.plans-container .content-header .card .card-header .lists .list-item.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 3rem;
}

.plans-container .content-header .card .card-header .lists .list-item span {
    color: yellow;
}

.plans-container .content-header .card .card-header .lists .list-item.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
}

/* system features */
.system-features-container {
    display: flex;
    flex-direction: column;
    gap: 25px;;
    padding: 30px 0;
}

.system-features-container .content-header {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: none;
}

.system-features-container .content-header .title {
    color: #323232;
    font-size: 3.5rem;
    margin: auto;
    text-align: center;
}

.system-features-container .content-header .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 2.2rem;
}

.system-features-container .content-header .title span {
    color: #D62825;
}

.system-features-container .content-header .title.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
}

.system-features-container .content-header .info {
    color: #323232;
    font-size: 2.2rem;
    line-height: 2.5rem;
    width: fit-content;
    margin: auto;
    text-align: center;
}

.system-features-container .content-header .info.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 3rem;
}

.system-features-container .cards {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: auto;
}

.system-features-container .cards .card {
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.system-features-container .cards .card .card-header {
    display: flex;
    align-items: center;
    justify-content: center;;
    text-align: center;
}

.system-features-container .cards .card .card-header .icon {
    width: 30%;
    height: auto;
    object-fit: cover;
    margin: auto;
}

.system-features-container .cards .card .card-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.system-features-container .cards .card .card-body .title {
    color: #323232;
    font-size: 2.5rem;
    margin: 0;
    text-align: center;
}

.system-features-container .cards .card .card-body .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 1.5rem;
}

.system-features-container .cards .card .card-body .info {
    font-size: 2rem;
    line-height: 2rem;
    color: #646464;
    margin: 0;
    text-align: center;
}

.system-features-container .cards .card .card-body .info.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 2.2rem;
}

/* ready */
.ready-container {
    width: 80%;
    margin: auto;
    padding: 30px 0;
}

.ready-container .card {
    background-image: url('../../email-hosting/img/ready/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    padding: 30px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ready-container .card .card-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ready-container .card .card-body .title {
    color: #FFFFFF;
    font-size: 3.5rem;
    margin: 0;
    text-align: center;
}

.ready-container .card .card-body .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 3.5rem;
}

.ready-container .card .card-body .info {
    color: #FFFFFF;
    font-size: 2.2rem;
    margin: 0;
    text-align: center;
}

.ready-container .card .card-body .info.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 2.5rem;
}

.ready-container .card .card-body .on-btn {
    background-color: #D62825;
    color: #FFFFFF;
    font-size: 2.2rem;
    line-height: 2.2rem;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 10px;
    margin: 0 auto;
}

.ready-container .card .card-body .on-btn.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: 20px 20px 15px;
}

/* choose */
.choose-container.desktop {
    padding: 70px 0 30px;
}

.choose-container.desktop .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 60%;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.choose-container.desktop .cards .card {
    background-color: #FFFFFF;
    border: 1px solid #D3D3D3;
}

.choose-container.desktop .cards .card.plan {
    border-right: 0;
}

.choose-container.desktop .cards .card.professional {
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 2;
    position: relative;
}

.choose-container.desktop .cards .card.professional .spacer {
    height: 50px;
    margin: 0;
}

.choose-container.desktop .cards .card.standard {
    border-left: 0;
}

.choose-container.desktop .cards .card.plan .divider  {
    border-top: 5px solid #FFFFFF;
    padding: 0 0 5px 0;
}

.choose-container.desktop .cards .card.professional .divider {
    border-top: 5px solid #D62825;
    padding: 0 0 5px 0;
}

.choose-container.desktop .cards .card.standard .divider {
    border-top: 5px solid #323232;
    padding: 0 0 5px 0;
}

.choose-container.desktop .cards .card .plan-title {
    font-size: 3.5rem;
    line-height: 3rem;
    color: #323232;
    text-align: center;
    padding: 15px 10px;
    margin: 0;
}

.choose-container.desktop .cards .card .plan-subtitle {
    font-size: 2.2rem;
    font-weight: normal;
    color: #323232;
    background-color: #E1E1E1;
    padding: 15px 10px;
    text-align: center;
    margin: 0;
}

.choose-container.desktop .cards .card .plan-subtitle.mm {
    font-family: 'Walone', sans-serif !important;
    padding: 20px 10px 15px;
    font-size: 1.5rem;
}

.choose-container.desktop .cards .card .plan-title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 2rem;
}

.choose-container.desktop .cards .card.professional .plan-subtitle {
    background-color: #D62825;
    color: #FFFFFF;
}

.choose-container.desktop .cards .card.standard .plan-subtitle {
    background-color: #D62825;
    color: #FFFFFF;
}

.choose-container.desktop .cards .card .info {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    padding: 10px 20px;
    min-height: 44px;
}

.choose-container.desktop .cards.mm .card .info {
    min-height: 49px;
}

.choose-container.desktop .cards .card .info.gray {
    background-color: #F7F7F7;
}

.choose-container.desktop .cards .card .info .icon {
    width: 20px;
    height: auto;
    object-fit: cover;
}

.choose-container.desktop .cards .card.professional .info .icon {
    margin: auto;
}

.choose-container.desktop .cards .card .info p.plan {
    background-color: #D62825;
    color: #FFFFFF;
    min-width: 20%;
    text-align: center;
}

.choose-container.desktop .cards .card .info p.plan.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    padding: 10px 5px 5px;
    line-height: 1rem;
}

.choose-container.desktop .cards .card.professional .info p {
    text-align: center;
    margin: auto;
}

.choose-container.desktop .cards .card.standard .info .icon {
    margin: auto;
}

.choose-container.desktop .cards .card.standard .info p {
    text-align: center;
    margin: auto;
}

.choose-container.desktop .cards .card.standard .info p.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
}

.choose-container.desktop .cards .card .info p {
    color: #323232;
    font-size: 2rem;
    line-height: 2rem;
    margin: 0;
}

.choose-container.desktop .cards .card .info p span {
    color: #D62825;
}

.choose-container.desktop .cards .card .info p.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.3rem;
    padding: 5px 0 0 0;
}

.choose-container.desktop .cards .card .info p.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
}

.choose-container.desktop .cards .card .info p.mm span.discount {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
}

.choose-container.desktop .cards .card .info p.mm span.sale {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
}

.choose-container.desktop .cards .card .info p span.discount {
    text-decoration: line-through;
}

.choose-container.desktop .cards .card .info p span.sale {
    color: #323232;
}

.choose-container.desktop .cards .card .btn-gp {
    min-height: 94px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.choose-container.desktop .cards .card .btn-gp .on-btn {
    background-color: #D62825;
    color: #FFFFFF;
    font-size: 2.2rem;
    line-height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 30px;
    margin: auto;
    width: fit-content;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    outline: none;
}

.choose-container.desktop .cards .card .btn-gp .on-btn.mm {
    font-size: 1.5rem;
}

.choose-container.desktop .cards .card .btn-gp .on-btn.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    line-height: 1.5rem;
    padding: 5px 0 0 0;
}

.choose-container.desktop .cards .card .btn-gp .on-btn:hover {
    padding: 15px 30px;
}

.choose-container.desktop .cards .card .btn-gp .on-btn svg {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.3s ease-in-out;
}

.choose-container.desktop .cards .card .btn-gp .on-btn span {
    transform: translateX(14px);
    transition: all 0.3s ease-in-out;
}

.choose-container.desktop .cards .card .btn-gp .on-btn:hover span {
    transform: translateX(0);
}

.choose-container.desktop .cards .card .btn-gp .on-btn:hover svg {
    opacity: 1;
    transform: translateX(0);
}

.choose-container.desktop .cards .card.professional .label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    background-color: rgb(214, 40, 37);
    border-radius: 30px;
    padding: 15px 20px;
    margin: 0;
    animation: move 0.7s ease-in-out infinite;
}

.choose-container.desktop .cards .card.professional .label.mm {
    font-family: 'Walone', sans-serif !important;
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding: 20px 20px 15px;
}

/* choose mobile */
.choose-container.mobile {
    background-color: #F5F5F5;
    padding: 30px 0;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    display: flex;
    flex-direction: column;
    gap: 25px;
    display: none;
}

.choose-container.mobile .title {
    color: #323232;
    font-size: 2.2rem;
    font-weight: normal;
    line-height: 2.2rem;
    text-align: center;
    margin: 0;
}

.choose-container.mobile .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
}

.choose-container.mobile .title span {
    color: #D62825;
}

.choose-container.mobile .card {
    background-color: #FFFFFF;
    width: 90%;
    margin: auto;
}

.choose-container.mobile .card .plan-title {
    font-size: 2.2rem;
    line-height: 2.2rem;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #D62825;
    padding: 15px 0;
    text-align: center;
    margin: 0;
}

.choose-container.mobile .card .plan-title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    line-height: 1rem;
    padding: 20px 0 15px;
}

.choose-container.mobile .card .lists {
    padding: 10px;
}

.choose-container.mobile .card .lists .list-item {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #D3D3D3;
}

.choose-container.mobile .card .lists .list-item:last-child {
    border-bottom: none;
}

.choose-container.mobile .card .lists .list-item .info {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    width: calc(50% - 15px);
}

.choose-container.mobile .card .lists .list-item .info p {
    font-size: 2rem;
    line-height: 2rem;
    color: #323232;
    margin: 0;
}

.choose-container.mobile .card .lists .list-item .info p.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 2rem;
    padding: 5px 0 0 0;
}

.choose-container.mobile .card .lists .list-item .info .icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.choose-container.mobile .card .lists .list-item .availability {
    width: calc(50% - 15px);
    text-align: right;;
}

.choose-container.mobile .card .lists .list-item .availability .icon{
    width: 18px;
    height: 18px;
    object-fit: cover;
}

.choose-container.mobile .card .lists .list-item .availability p {
    font-size: 2rem;
    line-height: 2rem;
    color: #323232;
    margin: 0;
    text-align: right;
}

.choose-container.mobile .card .lists .list-item .availability p.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 2rem;
    padding: 5px 0 0 0;
}

.choose-container.mobile .card .plan-subtitle {
    font-size: 2.2rem;
    line-height: 2.2rem;
    font-weight: normal;
    color: #323232;
    background-color: #e1e1e1;
    padding: 15px;
    text-align: center;
    margin: 0 10px;
}

.choose-container.mobile .card .plan-subtitle.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    padding: 20px 15px 15px;
    line-height: 1rem;
}

.choose-container.mobile .card .lists.storage .list-item {
    padding: 5px 0;
}

.choose-container.mobile .card .lists .list-item .plan {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    width: calc(40% - 15px);
}

.choose-container.mobile .card .lists .list-item .plan .name {
    color: #FFFFFF;
    background-color: #D62825;
    font-size: 1.9rem;
    font-weight: normal;
    line-height: 2rem;
    text-align: center;
    padding: 10px;
    margin: 0;
    min-width: 16%;
}

.choose-container.mobile .card .lists .list-item.mm .plan .name {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    line-height: 1rem;
    padding: 15px 10px 10px;
}

.choose-container.mobile .card .lists .list-item .plan .storage {
    color: #323232;
    font-size: 1.9rem;
    line-height: 2rem;
    margin: 0;
}

.choose-container.mobile .card .lists .list-item.mm .plan .storage {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    padding: 5px 0 0 0;
}

.choose-container.mobile .card .lists .list-item .price {
    font-size: 1.9rem;
    line-height: 2rem;
    color: #323232;
    margin: 0;
    width: calc(60% - 15px);
    text-align: right;
}

.choose-container.mobile .card .lists .list-item.mm .price {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    padding: 5px 0 0 0;
}

.choose-container.mobile .card .lists .list-item .price span {
    color: #d62825;
    text-decoration: line-through;
}

.choose-container.mobile .card .lists .list-item.mm .price span {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
}

.choose-container.mobile .card .btn-gp {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 20px 0;
}

.choose-container.mobile .card .btn-gp .on-btn {
    background-color: #D62825;
    color: #FFFFFF;
    font-size: 2rem;
    line-height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 30px;
    margin: auto;
    width: fit-content;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    outline: none;
}

.choose-container.mobile .card .btn-gp .on-btn.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    line-height: 1.5rem;
    padding: 5px 0 0 0;
}

.choose-container.mobile .card .btn-gp .on-btn:hover {
    padding: 15px 30px;
}

.choose-container.mobile .card .btn-gp .on-btn svg {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.3s ease-in-out;
}

.choose-container.mobile .card .btn-gp .on-btn span {
    transform: translateX(14px);
    transition: all 0.3s ease-in-out;
}

.choose-container.mobile .card .btn-gp .on-btn:hover span {
    transform: translateX(0);
}

.choose-container.mobile .card .btn-gp .on-btn:hover svg {
    opacity: 1;
    transform: translateX(0);
}

/* faqs */
.faq-container {
    background-color: #323232;
    padding: 30px 0;
}

.faq-container .page-container {
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.faq-container .page-container .title {
    font-size: 3.5rem;
    color: #FFFFFF;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
}

.faq-container .page-container .title span {
    color: #D62825;
}

.faq-container .page-container .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 3rem;
}

.faq-container .page-container .title.mm span {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
}

.faq-container .page-container .lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 50px;
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: 30px;
}

.faq-container .page-container .lists .list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.faq-container .page-container .lists .list ul li {
    min-height: 90px;
    border-bottom: 1px solid #D3D3D3;
}

.faq-container .page-container .lists .list ul li .accordion {
    background-color: #FFFFFF;
    border: none;
    outline: none;
    width: 100%;
    padding: 10px 0;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.faq-container .page-container .lists .list ul li .accordion .title {
    font-size: 2rem;
    line-height: 2rem;
    color: #323232;
    margin: 0;
    text-align: left;
}

.faq-container .page-container .lists .list ul li .accordion .title.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 2.7rem;
}

.faq-container .page-container .lists .list ul li .accordion svg {
    width: 25px;
    height: 25px;
    fill: #D62825;
}

.faq-container .page-container .lists .list ul li .panel {
    display: none;
    padding: 0 0 10px 0;
    box-shadow: none;
    margin: 0;
}

.faq-container .page-container .lists .list ul li .panel p {
    font-size: 2rem;
    line-height: 2rem;
    color: #323232;
    padding: 10px;
    margin: 0;
}

.faq-container .page-container .lists .list ul li .panel p.mm {
    font-family: 'Walone', sans-serif !important;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 2.5rem;
}

@media only screen and (max-width: 768px) {
    /* main banner */
    .main-banner-container {
        position: relative;
    }

    .main-banner-container .on-btn-gp {
        flex-direction: column;
        gap: 5px;
        left: auto;
        right: 5%;
        bottom: 10%;
        top: auto;
        transform: translate(0, 0); /* adjust values as needed */
    }

    .main-banner-container .on-btn {
        font-size: 2.2rem;
        line-height: 2.2rem;
        left: auto;
        right: 15%;
        bottom: 15%;
    }

    .main-banner-container .on-btn.mm {
        font-size: 1.2rem;
        line-height: 1.2rem;
    }

    /* about */
    .about-container {
        width: 90%;
    }

    .about-container .title {
        font-size: 2.5rem;
    }

    .about-container .title.mm {
        font-size: 1.7rem;
    }

    .about-container .info {
        font-size: 2rem;
        line-height: 2rem;
    }

    .about-container .info.mm {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    /* about lists */
    .about-container-lists .cards {
        width: 90%;
        grid-template-columns: repeat(2, 1fr);
    }

    .about-container-lists .cards .card .card-body .title {
        font-size: 2.2rem;
        line-height: 2.2rem;
    }

    .about-container-lists .cards .card .card-body .info {
        font-size: 2rem;
        line-height: 2rem;
    }

    /* plans */
    .plans-container .content-header {
        width: 90%;
    }

    .plans-container .content-header .title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .plans-container .content-header .title.mm {
        font-size: 1.7rem;
        line-height: 2.5rem;
    }

    .plans-container .content-header .card .title {
        font-size: 1.3rem;
    }

    .plans-container .content-header .card .card-header .divider {
        width: 20%;
    }

    .plans-container .content-header .card .card-header .title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .plans-container .content-header .card .card-header .title.mm {
        font-size: 1.7rem;
        line-height: 2.2rem;
    }

    .plans-container .content-header .card .card-header .lists.mm {
        width: 90%;
    }

    .plans-container .content-header .card .card-header .lists .list-item {
        font-size: 2rem;
        line-height: 2rem;
    }

    .plans-container .content-header .card .card-header .lists .list-item.mm {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    /* choose */
    .choose-container.desktop {
        display: none;
    }

    .choose-container.desktop .cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .choose-container.desktop .cards .card.plan {
        border-right: 1px solid #D3D3D3;
    }

    .choose-container.desktop .cards .card .btn-gp {
        min-height: fit-content;
    }

    .choose-container.desktop .cards .card.professional .spacer {
        height: 0;
    }

    /* choose mobile */
    .choose-container.mobile {
        display: flex;
    }

    .choose-container.mobile .title.mm {
        font-size: 1.7rem;
    }

    .choose-container.mobile .card .plan-title.mm {
        font-size: 1.7rem;
    }

    .choose-container.mobile .card .plan-subtitle.mm {
        font-size: 1.7rem;
    }

    .choose-container.mobile .card .lists .list-item.mm .plan .storage {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .choose-container.mobile .card .lists .list-item.mm .price {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .choose-container.mobile .card .lists .list-item.mm .plan .name {
        font-size: 1.2rem;
    }

    .choose-container.mobile .card .btn-gp .on-btn {
        font-size: 1.7rem;
    }

    /* system features */
    .system-features-container .content-header {
        width: 90%;
    }

    .system-features-container .content-header .title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .system-features-container .content-header .title.mm {
        font-size: 1.7rem;
        line-height: 2.5rem;
    }

    .system-features-container .content-header .info {
        font-size: 2rem;
        line-height: 2rem;
    }

    .system-features-container .content-header .info.mm {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .system-features-container .cards {
        grid-template-columns: repeat(2, 1fr);
        width: 90%;
    }

    .system-features-container .cards .card .card-body .title {
        font-size: 2.5rem;
    }

    .system-features-container .cards .card .card-body .info {
        font-size: 2rem;
        line-height: 2rem;
    }

    /* ready */
    .ready-container {
        width: 90%;
    }

    .ready-container .card {
        min-height: 170px;
    }

    .ready-container .card .card-body .title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .ready-container .card .card-body .title.mm {
        font-size: 1.7rem;
        line-height: 2.7rem;
    }

    .ready-container .card .card-body .info {
        font-size: 2rem;
        line-height: 2rem;
    }

    .ready-container .card .card-body .info.mm {
        font-size: 1.2rem;
        line-height: 1.7rem;
    }

    /* faqs */
    .faq-container .page-container {
        width: 90%;
    }

    .faq-container .page-container .lists {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .faq-container .page-container .title {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .faq-container .page-container .title.mm {
        font-size: 1.7rem;
        line-height: 2.5rem;
    }

    .faq-container .page-container .lists .list ul li .accordion .title.mm {
        line-height: 2.7rem;
    }

    /* campaign countdown */
    .campaign-countdown-container {
        width: 90%;
        margin: auto;
    }
}

@media only screen and (max-width: 460px) {
    /* main banner */
    .main-banner-container .on-btn {
        right: 10%;
        font-size: 1.5rem;
        line-height: 1.5rem;
        padding: 10px 15px;
    }

    .main-banner-container .on-btn.desktop {
        display: none;
    }

    .main-banner-container .on-btn.mobile {
        display: flex;
    }

    /* special discount */
    .special-discount-container {
        display: block;
    }

    .special-discount-container p {
        font-size: 2rem;
    }

    .special-discount-container p.mm {
        font-size: 1.3rem;
    }

    /* about lists */
    .about-container-lists .cards {
        width: 90%;
        grid-template-columns: 1fr;
    }

    /* plans */
    .plans-container .content-header .card .card-header .divider {
        width: 25%;
    }

    .plans-container .content-header .card {
        padding: 20px;
    }

    .plans-container .content-header .card .card-header .lists {
        grid-template-columns: 1fr;
    }

    .plans-container .content-header.mm {
        width: 90%;
    }

    /* system features */
    .system-features-container .cards {
        grid-template-columns: 1fr;;
    }

    /* choose */
    .choose-container.mobile .card .lists .list-item .plan {
        width: calc(50% - 15px);
    }

    .choose-container.mobile .card .lists .list-item .plan .storage {
        font-size: 1.9rem;
    }

    .choose-container.mobile .card .lists .list-item.mm .plan .storage {
        font-size: 1.2rem;
    }

    .choose-container.mobile .card .lists .list-item .price {
        width: calc(50% - 15px);
        font-size: 1.9rem;
    }

    .choose-container.mobile .card .lists .list-item.mm .price {
        font-size: 1.2rem;
    }

    .choose-container.mobile .card .lists .list-item .plan .name {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
    }
}