/* Hero Section */
.heroContainer{
    display: flex;
    padding:0 8rem 3rem 8rem;
}
.heroContainer{
    position:relative;
}
.heroContent{
    position: absolute;
    top:30%;
    left:10%;
}

.heroContent > h1{
    font-size:4.5rem;
    color:#56277D;
    margin-bottom: 2rem;
} 
.heroContent > p{
    font-size:2rem;
    line-height:1.5;
    margin-bottom: 3rem;
}
.banner{
    width:100%;
    height:auto;
    object-fit: cover;
}



.heroSencondaryTitleBox,.systemSecondaryTitleBox{
    display: flex;
    gap:1rem;
    align-items: center;
    justify-content: center;
}
.thumbsUpIcon,.bagAddIcon{
    font-size:5rem;
    color:#8968a4;
}
h2{
    font-size:3.6rem;
    color:#673d8a;
    font-weight:400;
}
.sectionIntroduction{
    padding:2rem 10rem;
    margin:10rem 0 5rem 0;
}
.group{
    display:flex;
    gap:2rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}
.introductionTitle{
    font-size:5rem;
    margin-bottom: 2rem;
}
.introductionContent{
    font-size:2.4rem;
    line-height: 1.3;
}
.IntroImg2{
    width:100%;
}
.IntroImg3{
    width:100%;
}
/* ///System//// */
.sectionSystem{
    padding:3rem 12rem 8rem 10rem;
    margin-bottom:5rem;
    background-color: #FFFDEE;
}
.systemSecondaryTitleBox{
    margin-bottom: 10rem;
}
.lightdeco,.darkdeco{
    padding:2rem 8rem;
    width:100%;
    height:2rem;
}
.lightdeco{
    background-color: #FFF9D7;
}
.darkdeco{
    background-color: #FFEDD0;
}
/* ///sectionPlan/// */
.sectionPlan{
    padding:3rem 5rem;
}
.planTitle{
    color:#EBA900;
    text-align: center;
    margin-bottom: 3rem;
}
.planDeco{
    color:#56277D;
}
.planCardContainer{
    display:flex;
    gap:6rem;
    justify-content: center;
}
.cardBox{
    padding:0 0 1.5rem 0;
    background-color: #fff;
    box-shadow: #dfd1ba 0 0 5px 1px;
    border-radius: 2rem;
    width:40%;
}
.cardTitle{
    padding:2rem;
    font-size:2.6rem;
    background-color: #673d8a;
    color:#fff;
    border-top-left-radius:2rem ;
    border-top-right-radius:2rem ;
    text-align: center;
    margin-bottom: 1.5rem;
}
.cardContentBox{
    padding:1rem;
    display: flex;
    flex-direction: column;
    gap:2rem;
}
.cardContentTitle{
    padding:0.5rem 0.8rem;
    background-color: #E0E0E0;
    color:#56277D;
    display: inline-block;
    border-radius: 2rem;
    margin-bottom: 1rem;
}
.cardImg{
    width:100%;
}
/* ////Price Section//// */
.priceSection{
    padding:3rem 15rem;
    margin-bottom: 10rem;
}
.priceBox{
    margin-bottom: 5rem;
}
.priceTitle{
    padding:1rem 3rem;
    width:100%;
    background-color: #FFF9D7;
    color:#EBA900;
    margin-bottom: 2rem;
}
.priceContent{
    display: flex;
    gap:3rem;
    margin-bottom: 1rem;
    align-items: center;
}
.Amount{
    padding:1rem 2rem;
    background-color: #DEBB61;
    color:#fff;
    font-size:2rem;
    width:20rem;
    text-align: center;
}
.price{
    padding:1rem 2rem;
    color:#DE3B3B;
    font-size:2rem;
}
.priceBtnContainer{
    display: flex;
    gap:3rem;
}
.priceBtn:link,.priceBtn:visited{
    padding:2rem 3rem;
    background-color: #56277D;
    color:#fff;
    width:100%;

    transition:all 0.3s;
}
.priceBtn:hover,.priceBtn:active{
    background-color: #785297;
}
.priceBtnLight:link,.priceBtnLight:visited{
    background-color: #D6C5E4;
}
.priceBtnLight:hover,.priceBtnLight:active{
    background-color: #ab9eb6;
}
.priceBtnBox{
    display: flex;
    flex-direction: column;
    gap:1rem;
    width: 100%;
}
.priceInfo{
    color:#DE3B3B;
}
.priceInfo{
    font-size:1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}
/* ////Footer//// */
footer{
    background-color:#DEBB61;
}
.footerBox{
    margin-bottom: 4rem;
}
.footerContent{
    font-size:1.8rem;
    margin-bottom:1rem;
    padding:2rem 8rem 0 8rem;
}
.copyrightContent{
    font-size:1.5rem;
    margin-bottom: 0.5rem;
    padding:0.5rem 8rem 0 1rem;
    text-align: center;
}
.copyrightBox{
    background-color: #fcf8ef;
}