body {
    font-family: 'Inter', sans-serif;
}
.pt-container {
    max-width: 1320px;
    margin: 0px auto;
    text-align: center;
}
.mobile-menu {
    display: none;
}
.mobile-menu.active {
    display: block;
}
.menu-overlay {
    display: none;
}
.menu-overlay.active {
    display: block;
}
#mainNav {
    transition: transform 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.pt-hero-bg {
    width: 100%;
    height: 1185px;
    background-image: url(../image/hero/hero-bg.png);
    background-size: cover;
    overflow: hidden;
}
.pt-recommended-bg {
    background-image: url(../image/pricing-table/pricing-bg.png);
    background-size: cover;
}
.pt-faq-section {
    background-image: url(../image/faq/faq-bg.png);
    background-size: cover;
}
.pt-explanation-bg {
    background-image: url(../image/banner/banner-bg.png);
    background-size: cover;
    width: 100%;
    height: 525px;
}
.pt-footer-bg {
    background-image: url(../image/hero/hero-bg.png);
    width: 100%;
    background-size: cover;
}
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-content.open {
  max-height: 500px; 
}

@media screen and (max-width: 1280px) {
    .pt-container {
    max-width: 1200px;
    margin: 0px auto;
    text-align: center;
    }
    .pt-explanation-bg {
    height: 468px;
    border-radius: 20px;
    }
}
@media screen and (max-width: 1024px) {
    .pt-container {
    max-width: 940px;
    margin: 0px auto;
    text-align: center;
    }
    .pt-hero-bg {
    height: 1150px;
    }
    .pt-explanation-bg {
    height: 380px;
    border-radius: 20px;
    }
}
@media screen and (max-width: 980px) {
    .pt-container {
    max-width: 800px;
    margin: 0px auto;
    text-align: center;
    }
    .pt-hero-bg {
    height: 991px;
    }
    .pt-explanation-bg {
    height: 322px;
    border-radius: 20px;
    }
}
@media screen and (max-width: 768px) {
    .pt-container {
    max-width: 700px;
    margin: 0px auto;
    text-align: center;
    }
    .pt-hero-bg {
    height: 994px;
    }
    .pt-explanation-bg {
    height: 280px;
    border-radius: 20px;
    }
}
@media screen and (max-width: 480px) {
    .pt-container {
    max-width: 320px;
    margin: 0px auto;
    text-align: center;
    }
    .pt-hero-bg {
    height: 738px;
    }
    .pt-explanation-bg {
    height: 255px;
    background-size: cover;
    border-radius: 12px;
    }
}