.main-container{width: 100%;}

    .first-container{width: 100%; max-width: 1300px; margin: 0 auto; margin-top: 168px;}
    
    .subscribe-banner{width: 100%; background: linear-gradient(90deg, #6F52A2 0%, #7064BC 50%, #7172D0 100%); height: 350px; display: flex; align-items: center; justify-content: center;}
    .subscribe-banner-inner{width: 100%; max-width: 1300px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
    .subscribe-banner-title{font-size: 48px; font-weight: 700; color: #fff; line-height: 65px;}
    .subscribe-banner-desc{margin-top: 20px; font-size: 22px; font-weight: 500; color: #fff;}

    .feature-container{width: 100%; max-width: 1300px; margin: 0 auto; margin-top: 168px;}
    .feature-heading{font-size: 42px; font-weight: 800; color: #000; text-align: center;}
    .feature-subtitle{margin-top: 24px; font-size: 22px; font-weight: 500; color: #000; line-height: 34px; text-align: center;}
    .feature-grid{width: 100%; margin-top: 60px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 33px;}
    .feature-box{width: 100%; height: 350px; border-radius: 20px; background: #fff; border: 1px solid #7800ff; display: flex; flex-direction: column; align-items: center;}
    .feature-image{width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #E0D9F8; display: flex; align-items: center; justify-content: center; margin-top: 52px;}
    .feature-box-title{margin-top: 43px; font-size: 26px; font-weight: 700; color: #000;}
    .feature-box-desc{display: block; margin-top: 24px; font-size: 20px; font-weight: 400; color: #000; line-height: 30px; text-align: center;}

    .school-container{width: 100%; max-width: 1300px; margin: 0 auto; margin-top: 160px;}
    .school-heading{border-radius: 45px; border: 2px solid #643fce; background: #fff; font-size: 42px; font-weight: 700; color: #643fce; width: 380px; height: 86px; display: flex; align-items: center; justify-content: center; margin: 0 auto;}
    .school-subtitle{margin-top: 40px; font-size: 22px; font-weight: 500; color: #000; line-height: 34px; text-align: center;}
    .school-grid{margin-top: 60px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; width: 100%;}
    .school-box{width: 100%; height: 352px; display: flex; flex-direction: column; align-items: center; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-radius: 16px;}
    .school-box-title{margin-top: 50px; font-size: 30px; font-weight: 700; color: #000;}
    .school-box-desc{display: block; text-align: center; margin-top: 18px; font-size: 22px; font-weight: 400; color: #000;}
    .school-image{margin-top: 68px;}

    .plan-container{width: 100%; margin-top:150px; padding-top: 150px; background-color: rgb(248,245,254);}
    .plan-heading{font-size: 36px; font-weight: 800; color: #000; text-align: center;}
    .plan-subtitle{margin-top: 40px; font-size: 22px; font-weight: 500; color: #000; text-align: center;}
    .plan-tab{width: 214px; height: 62px; border-radius: 31px; border: 1px solid #8B8B8B; background: #fff; display: flex; position: relative; align-items: center; padding: 8px; margin: 0 auto; margin-top: 58px;}
    .plan-tab-item{width: 50%; height: 100%; background: none; color: #000; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer;}
    .plan-tab-item.on-tab{color: #fff; background: #643FCE; border-radius: 40px;}
    .plan-tab-image{position: absolute; right: -120px;}
    .plan-discount-badge{position: absolute; right: -120px; background: #F0D3D7; color: #643FCE; padding: 8px 16px; border-radius: 20px; font-size: 16px; font-weight: 600; white-space: nowrap;}
    .plan-price-container{width: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 60px;}
    .plan-box{width: 430px; height: 770px; border-radius: 40px; border: none; background: #fff; position: relative; display: flex; flex-direction: column; transition: all 0.3s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.08); padding: 40px 30px; justify-content: space-between;}
    .plan-box-content{display: flex; flex-direction: column; align-items: center; text-align: center;}
    .plan-box.featured{border: 2px solid #643FCE; box-shadow: 0 20px 60px rgba(100, 63, 206, 0.15);}
    .plan-badge{position: absolute; top: -20px; background: #643FCE; color: #fff; padding: 6px 20px; border-radius: 20px; font-size: 14px; font-weight: 600;}
    .message-box {display: inline-block; background: transparent; font-weight: 600; font-size: 16px; padding: 6px 12px; border-radius: 15px; color: #404040; transition: all 0.3s ease;}
    .plan-title{font-size: 30px; font-weight: 800; color: #404040; margin-top: 10px; transition: all 0.3s ease;}
    .plan-featured-title{color: #643FCE;}
    .plan-subtitle{font-size: 20px; font-weight: 500; color: #000; margin-top: 18px;}
    .plan-heading-price{font-size: 20px; margin-top: 30px; font-weight: 500; color: #000;}
    .plan-heading-price span{font-size: 30px; font-weight: 700;}
    .plan-featured-price span{color: #643FCE;}
    .plan-button{width: 306px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 33px; background: #404040; color: #fff; font-size: 24px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; margin-top: auto; align-self: center;}
    .plan-button:hover{background: #303030;}
    .plan-box.featured .plan-button{background: #643FCE; width: 340px;}
    .plan-box.featured .plan-button:hover{background: #762CC7;}
    .plan-list{display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 60px;}
    .plan-list-item{display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: #3F3F3F;}
    .plan-list-item img{width: 24px; height: auto;}
    .plan-list-item:has(img[src*="check-black"]) {color: #3F3F3F;}
    .plan-list-item:has(img[src*="x-gray"]) {color: #B5B5B5;}
    .plan-list-item:has(img[src*="check-purple"]) {color: #000;}
    .plan-bottom{width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 106px; padding-bottom: 113px;}
    .plan-bottom-text{font-size: 20px; font-weight: 400; color: #808080; line-height: 30px; text-align: center; margin-top: 16px;}
    .plan-box.featured .message-box{color: #643fce;}

    .faq-container{width: 100%; max-width: 1300px; margin: 0 auto; margin-top: 160px;}
    .faq-heading{font-size: 32px; font-weight: 700; color: #000;}
    .faq-list{width: 100%; margin-top: 76px; display: flex; flex-direction: column; gap: 24px;}
    .faq-box{width: 100%; height: 94px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px 0 60px; border-radius: 20px; background: #F2F2F2; cursor: pointer; position: relative; z-index: 1;}
    .faq-box-text{display: flex; align-items: center; gap: 15px; font-size: 22px; font-weight: 500; color: #000;}
    .faq-box-label{font-size: 30px; font-weight: 700; color: #643fce;}
    .faq-item.on-box>.faq-box{background: #643fce;}
    .faq-item.on-box .faq-box-text{color: #fff;}
    .faq-item.on-box .faq-box-label{color: #fff;}
    .faq-item.on-box .faq-arrow{background: #fff;}
    .faq-item.on-box .faq-arrow::before{border-left: 2px solid #643fce; border-bottom: 2px solid #643fce; transform: rotate(135deg); margin-top: 6px;}
    .faq-item.on-box .faq-answer{max-height: 500px; padding: 66px 34px 36px 60px; margin-top: -40px;}
    .faq-arrow{width: 34px; height: 34px; background: #643fce; border-radius: 50%; position: relative; cursor: pointer; transition: all 0.5s ease; display: flex; align-items: center; justify-content: center;}
    .faq-arrow::before {content: ""; width: 12px; height: 12px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); transition: transform 0.5s ease; margin-top: -6px;}
    .faq-answer{width: 100%; max-height: 0; overflow: hidden; margin-top: 0; padding: 0 34px 0 60px; border-radius: 0 0 20px 20px; background: #F5F2FF; cursor: pointer; transition: max-height 0.5s ease, padding 0.5s ease, margin 0.5s ease;}
    .faq-answer-text{display: flex; align-items: start; gap: 15px; font-size: 22px; font-weight: 500; color: #000; word-break: keep-all; line-height: 40px;}
    .faq-answer-label{font-size: 30px; font-weight: 700; color: #000;}

    .content-plan-container{width: 100%; background: rgb(244, 242, 255); margin-top: 160px; padding: 60px 0;}
    .content-plan-wrapper{width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 20px;}
    .content-plan-heading{font-size: 36px; font-weight: 800; color: #000; text-align: center;}
    .content-plan-subtitle{margin-top: 20px; font-size: 18px; font-weight: 500; color: #000; text-align: center;}
    .content-plan-tab{width: 248px; height: 62px; border-radius: 31px; border: 1px solid #8B8B8B; background: #fff; display: flex; position: relative; align-items: center; padding: 8px; margin: 0 auto; margin-top: 40px;}
    .content-plan-tab-item{width: 50%; height: 100%; background: none; color: #000; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer;}
    .content-plan-tab-item.on-tab{color: #fff; background: #643FCE; border-radius: 40px;}
    .content-plan-card{width: 100%; max-width: 100%; display: none; flex-direction: column; align-items: center; justify-content: flex-start; background: transparent; box-shadow: none; border-radius: 0; padding: 0; text-align: center; margin: 0 auto; margin-top: 60px;}
    .content-plan-icon{width: 80px; height: 80px; margin-bottom: 30px; display: flex; align-items: center; justify-content: center;}
    .content-plan-icon img{width: 100%; height: 100%; object-fit: contain;}
    .content-plan-title{font-size: 28px; font-weight: 700; color: #000; margin: 0;}
    .content-plan-desc{margin-top: 16px; font-size: 18px; font-weight: 400; color: #000; line-height: 24px;}
    .content-plan-btn{margin-top: 30px; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 28px; background: #643FCE; color: #fff; font-size: 20px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease; border: none;}
    .content-plan-btn:hover{
        background: #762CC7; 
        /* transform: translateY(-2px); */
    }
    .content-plan-card{width: 100%; max-width: 100%; display: none; flex-direction: column; align-items: center; justify-content: flex-start; background: transparent; box-shadow: none; border-radius: 0; padding: 0; text-align: center; margin: 0 auto; margin-top: 60px;}
    .content-plan-card[data-tab="single"]{width: 100%; max-width: 500px; height: 380px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-radius: 20px; padding: 40px 30px; align-items: center; justify-content: center;}
    .content-plan-card.active{display: flex;}
    .content-plan-container-inner{padding-bottom: 100px;}

    .credit-checkbox-container{width: 100%; margin-bottom:12px;}
    .credit-checkbox{width: 100%; padding: 24px 20px; border: 2px solid #E0E0E0; border-radius: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; background: #fff; transition: all 0.3s ease;}
    .credit-checkbox:hover{border-color: #643FCE;}
    .credit-checkbox input[type="checkbox"]{width: 20px; height: 20px; cursor: pointer;}
    .credit-checkbox-label{font-size: 16px; font-weight: 500; color: #666; cursor: pointer;}

    .credit-packages-container{width: 100%; display: flex; flex-direction: column; gap: 12px;}
    .credit-package{width: 100%; padding: 16px 20px; border: 2px solid #E0E0E0; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; background: #fff; cursor: pointer; transition: all 0.3s ease; position: relative;}
    .credit-package:hover{border-color: #643FCE;}
    .credit-package.popular{border-color: #643FCE; background: transparent;}
    .credit-package.best-deal{border-color: #FF9500; background: transparent;}
    
    .credit-package-left{display: flex; align-items: center; gap: 16px; flex: 1;}
    .credit-package-info{display: flex; flex-direction: row; align-items: center; gap: 8px;}
    .credit-package-amount{font-size: 18px; font-weight: 700; color: #643FCE;}
    .credit-package.best-deal .credit-package-amount{color: rgb(234, 91, 12);}
    .credit-package-bonus{font-size: 14px; font-weight: 500; color: #666;}
    .credit-package-discount{display:inline-block; font-size: 14px; font-weight: 600; color: #000; background: rgb(243, 239, 255); padding: 4px 8px; border-radius: 14px; margin-left: 14px;}
    .credit-package.best-deal .credit-package-discount{background: rgb(255, 203, 172); color: #000;}

    .credit-package-badge{position: absolute; top: -8px; left: 20px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff;}
    .credit-package-badge.popular-badge{background: #643FCE;}
    .credit-package-badge.best-badge{background: rgb(234, 91, 12);}

    .credit-package-price{width:132px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; background: #404040; padding: 8px 16px; border-radius: 6px;}
    .credit-package.popular .credit-package-price{background: #643FCE;}
    .credit-package.best-deal .credit-package-price{background: rgb(234, 91, 12);}
    .credit-package-price-text{font-size: 14px; font-weight: 500; color: #666;}

    .subscription-period{width: 100%; border: 2px solid #643FCE; border-radius: 16px; padding: 24px; background: #fff; margin-bottom: 30px;}
    .subscription-period-title{font-size: 16px; font-weight: 700; color: #000; margin-bottom: 20px; display: flex; align-items: center; gap: 8px;}
    .period-icon{font-size: 20px;}
    
    .period-buttons{display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;}
    .period-btn{width: 100%; padding: 12px 16px; border: 1px solid #E0E0E0; border-radius: 8px; background: #fff; color: #666; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;}
    .period-btn:hover{border-color: #643FCE;}
    .period-btn.active{background: #643FCE; color: #fff; border-color: #643FCE;}
    
    .custom-period-input{width: 100%; padding: 12px 16px; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 14px;}
    
    .renewal-date{display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #F8F5FF; border-radius: 8px; font-size: 14px; color: #000;}
    .renewal-icon{width: 18px;}
    .renewal-date-text{font-weight: 600; color: #643FCE;}

    .period-input-wrapper{display: flex; align-items: center; gap: 8px; margin-bottom: 16px;}
    .period-input-unit{font-size: 14px; font-weight: 500; color: #666; white-space: nowrap;}

    .credit-info-text{width: 100%; max-width: 600px; margin: 40px auto 0; text-align: center; font-size: 14px; font-weight: 500; color: #999; display: flex; align-items: center; justify-content: center; gap: 8px;}
    .credit-info-icon{width: 33px;}

    .credit-card-wrapper{width: 100%; max-width: 800px; background: #fff; border-radius: 20px; padding: 40px 30px; margin: 0 auto;}

    .consultation-container{width: 100%; background: rgb(244, 242, 255); margin-top: 160px;}
    .consultation-box{width: 100%; max-width: 1300px; margin: 0 auto; height: 200px; display: flex; align-items: center; gap: 40px; background: transparent; border-radius: 20px; padding: 40px 50px;}
    .consultation-icon{flex-shrink: 0;}
    .consultation-icon img{display: block;}
    .consultation-text{display: flex; flex-direction: column; flex: 1;}
    .consultation-title{font-size: 28px; font-weight: 700; color: #000; margin: 0;}
    .consultation-subtitle{font-size: 18px;padding-top:12px; font-weight: 400; color: #000; margin-top: 12px; margin: 0; line-height: 24px;}
    .consultation-button{width: 200px; height: 48px; border-radius: 8px; background: #fff; color: #643FCE; font-size: 16px; font-weight: 600; border: 1px solid #643FCE; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; transition: all 0.3s ease;}
    .consultation-button:hover{
        background: #F4F2FF; 
        /* transform: translateY(-2px); */
        }