@media(max-width:1230px) {
    .header .menu {
        width: 100%;
    }
}

@media(max-width:1125px) {
    .header .menu ul li {
        display: none;
    }

    .header .menu {
        width: 10rem;
    }
}

@media(max-width:1024px) {
    .hero-sec1 .badge span {
        font-size: 1.5rem;
    }

    .hero-sec2 span:nth-child(odd) {
        font-size: 2rem;
    }

    .hero-sec2 span:nth-child(even) {
        font-size: 1.5rem;
    }

    .hero-sec3 .img {
        width: 16rem;
    }

    .hero-sec3 .text span {
        font-size: 3rem;
    }

    .hero-sec4 p {
        font-size: 5rem;
    }

    .hero-sec4 span {
        font-size: 2rem;
    }

    .hero-sec4 small {
        font-size: 1.5rem;
    }

    .hero-sec6 p {
        font-size: 2rem;
    }

    .winter-text {
        height: 8rem;
    }

    .summer-text {
        height: 9rem;
    }

    .solar-title h2 {
        font-size: 3rem;
    }

    .solar-text h3 {
        font-size: 2rem;
    }

    .solar-text h3 span {
        font-size: 2.5rem;
    }

    .visit-section .img-benefit {
        margin-block: 3rem;
    }

    .visit-section .img-final {
        margin-top: 3rem;
    }
}

@media(max-width:900px) {
    .energy-text p {
        text-align: start;
    }
}

@media(max-width:768px) {
    .hero-sec1 .badge {
        padding: .2rem 2rem;
    }

    .hero-sec3 {
        gap: 2rem;
    }

    .hero-sec3 .img {
        width: 14rem;
    }

    .hero-sec3 .text1 {
        padding-block: .8rem;
    }

    .hero-sec3 .text span {
        font-size: 2rem;
    }

    .hero-sec4 p {
        font-size: 3rem;
    }

    .hero-sec4 small {
        font-size: 1rem;
    }

    .hero-sec5 {
        gap: 1rem;
    }

    .application .text-group p {
        font-size: 1.2rem;
    }

    .application .text-group h2 {
        font-size: 2.8rem;
    }

    .application-text p {
        font-size: 1.5rem
    }

    .title-btn p {
        font-size: 1.5rem;
    }

    .title-btn small {
        font-size: 1.5rem;
    }

    .title-btn span {
        font-size: 2rem;
    }

    .title-btn p span.circle-text {
        font-size: 2rem;
        padding: 0 .8rem;
    }

    .text-content p {
        font-size: 2rem;
    }

    .text-content p span {
        font-size: 1.5rem;
    }

    .application .FIT-img {
        margin-top: 3rem;
    }

    .secret-section {
        margin-top: 8rem;
    }

    .secret-section .plan-img {
        margin-top: 3rem;
    }

    .secret-section {
        margin-top: 5rem;
    }

    .text-content p:last-child {
        margin-top: 0;
    }

    .price-text img {
        margin-block: 1rem;
    }

    .price-text p {
        font-size: 5rem;
    }

    .freedom p {
        font-size: 2rem;
    }

    .freedom p small {
        font-size: 1.8rem;
    }

    .freedom p span {
        font-size: 2rem;
    }

    .advance .text-group p {
        font-size: 1.8rem;
    }

    .advance .text-group span {
        font-size: 2.5rem;
    }

    .viewmore-img img {
        height: auto;
        min-width: none;
    }

    .winter-text {
        height: 10.5rem;
    }

    .season-title p {
        font-size: 2rem;
    }

    .summer-text {
        height: 10.5rem;
    }

    .sign-text1 {
        height: 13rem;
    }

    .sign-text2 {
        height: 13rem;
    }

    .solar-logo .text p,
    .solar-logo .text p span {
        font-size: 1.5rem;
    }

    .solar-title h2 {
        font-size: 2.2rem;
    }

    .solar-text h3 {
        font-size: 1.6rem;
    }

    .solar-text h3 span {
        font-size: 2rem;
    }

    .solar-container .inline-container {
        padding-inline: 2rem;
    }

    .visit-section .img-final {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .visit-section .img-benefit,
    .visit-section .img-advert {
        margin-block: 2rem;
    }

    .secret-section .text-content p:first-child {
        line-height: 3.5rem;
    }
}

@media(max-width:576px) {

    .header .logo-img {
        min-width: 10rem;
    }

    .header .menu {
        width: 8rem;
    }

    .header {
        padding-inline: 1rem;
    }

    .hero-sec1 .badge {
        padding: .2rem 1rem;
    }

    .hero-sec1 .badge span {
        font-size: 1.3rem;
    }

    .hero-sec1 .seperator {
        font-size: 2rem;
    }

    .hero-sec2 span:nth-child(odd) {
        font-size: 1.5rem;
    }

    .hero-sec2 span:nth-child(even) {
        font-size: 1rem;
    }

    .hero-sec3 {
        flex-direction: column;
        margin-top: 1rem;
    }

    .hero-sec3 .text span {
        font-size: 3rem;
    }

    .hero-sec3 .text1 {
        padding-block: .5rem;
    }

    .hero-sec4 p {
        font-size: 3rem;
    }

    .span-unit {
        padding: .4rem 1rem .4rem .6rem;
    }

    .hero-sec5 {
        flex-direction: column;
    }

    .hero-sec5 .img {
        width: 100%;
    }

    .hero-sec6 {
        font-size: 1.5rem;
    }

    .application .FIT-img {
        margin-top: 2rem;
    }

    .btn-group .btn {
        width: 45%;
    }

    .text-content p {
        margin-top: 1rem;
    }

    .secret-section .cost-img img {
        width: 100%;
    }

    .secret-section .plan-img {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .plan-img img {
        width: 100%;
    }

    .secret-section {
        margin-top: 3rem;
    }

    .title-btn p span {
        font-size: 1.5rem;
    }

    .title-btn p span.circle-text {
        font-size: 1.5rem;
        padding: 0 .6rem;
    }

    .price-text p {
        font-size: 4rem;
    }

    .price-text small {
        font-size: 2rem;
    }

    .price-text .img {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .freedom p {
        font-size: 1.7rem;
    }

    .freedom p:last-child {
        line-height: 2.5rem;
    }

    .freedom p small {
        font-size: 1.4rem;
    }

    .freedom p span {
        font-size: 1.7rem;
    }

    .advance {
        flex-direction: column;
    }

    .advance .img {
        width: 50%;
    }

    .advance .text-group p {
        font-size: 1.5rem;
    }

    .advance .text-group span {
        font-size: 2rem;
    }

    .viewmore-img img {
        width: 100%;
    }

    .season-content {
        flex-direction: column;
        gap: 1rem;
    }

    .season-text {
        width: 100%;
        padding-block: .5rem;
        height: 7.5rem;
    }

    .sign-text2 {
        height: 8.5rem;
    }

    .season-title p {
        font-size: 1.5rem;
    }

    .solar-section .solar-logo {
        flex-direction: column;
    }

    .solar-title {
        margin-block: 1rem;
    }

    .solar-title h2 {
        line-height: 2.5rem;
    }

    .solar-text h3 {
        line-height: 2.5rem;
        margin-block: 1rem;
    }

    .solar-content p {
        font-size: .8rem;
    }

    .solar-logo .text {
        width: 100%;
    }

    .visit-section .img-final {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .visit-section .img-benefit,
    .visit-section .img-advert {
        margin-block: 1rem;
    }

}

@media(max-width:425px) {

    .container{
        padding-inline: 1rem;
    }

    .hero-sec1 .badge span {
        font-size: 1rem;
    }

    .hero-sec4 p {
        font-size: 2.5rem;
    }

    .hero-sec4 span {
        font-size: 1.5rem;
    }

    .application .text-group p {
        font-size: 1rem;
    }

    .application .text-group h2 {
        font-size: 2rem;
    }

    .application .FIT-img {
        margin-top: 1rem;
    }

    .title-btn p {
        font-size: 1.2rem;
    }

    .title-btn small {
        font-size: 1rem;
    }

    .title-btn span{
        font-size: 1.2rem;
    }
    .title-btn p span.circle-text {
        font-size: 1.2rem;
        padding: 0 .4rem;
    }

    .text-content p {
        font-size: 2rem;
    }

    .text-content span {
        font-size: 1.5rem;
    }

    .benefit p {
        font-size: .8rem;
    }

    .energy-text p {
        font-size: .8rem;
    }

    .secret-section .plan-img img {
        width: 100%;
    }

    .secret-section .house-img {
        flex-direction: column;
        margin-block: 2rem;
        gap: 2rem;
    }

    .house-img .img:first-child {
        width: 100%;
    }

    .house-img .img:last-child {
        width: 100%;
    }

    .secret-section .structure-img {
        flex-direction: column;
    }

    .structure-img .img {
        width: 100%;
    }

    .price-text p {
        font-size: 3rem;
    }

    .price-text small {
        font-size: 1.5rem;
    }

    .price-text p span {
        display: block;
        width: 80%;
        line-height: 2rem;
        margin: 0 auto;
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .season-text {
        font-size: 1rem;
        height: 6.5rem;
    }

    .sign-text2 {
        height: 7.5rem;
    }

    .solar-title h2 {
        font-size: 1.5rem;
    }

    .solar-text h3,
    .solar-text h3 span {
        font-size: 1.5rem;
    }

    .solar-container .inline-container {
        padding-inline: 1rem;
    }
}