@media(max-width:1200px) {
    html {
        font-size: 55%;
    }
}

@media(max-width:991px) {
    #menu-icon {
        display: block;

    }

    #cross {
        display: block;
    }

    /* #toggle{
        display: flex;
    } */

    .logo {
        margin-left: -60rem;
    }

    #menu-icon {
        position: absolute;
        margin-left: 48rem;
        margin-top: -1.5rem;
    }

    #cross {
        position: absolute;
        margin-left: 48rem;
        margin-top: -1.5rem;
        color: red;

    }


    .top-btn {
        position: absolute;
        margin-left: 78rem;
    }

    .navbar {
        position: absolute;
        top: 7rem;
        right: 0;
        width: 25.5rem;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: rgb(29, 28, 28);
        transition: all 0.5s ease;
        transform: translateY(-5px);

    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }


    .navbar a {
        display: block;
        padding: 17px;
        font-size: 2.2rem;
    }

    .navbar .active {
        right: -100%;
    }

    .home-content h3 {
        font-size: 4.5rem;
        margin-top: 1.5rem;
    }

    .home-content {
        order: 0;
        margin-left: -10rem;
    }

    .home-img {
        width: 70vw;
        margin-top: 4rem;
    }

    header {
        padding: 2rem 3%;
    }

    section {
        padding: 10rem 3%;
    }

    .services {
        padding: 7rem;
    }

    /* review */

    .review-item p {
        font-size: 3.2rem;
        line-height: 4rem;
    }

    /* ...about section */
    .about-main-container {
        display: flex;
        flex-direction: column;
    }

    .about-content {
        margin-top: 2rem;
        text-align: center;
        font-size: 5rem;
    }

    .about {
        display: block;
    }

    .about-img img {
        height: auto;
        width: 76vw;
        margin-left: 10rem;

    }

    .review .wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    /* ..contact section code */
    .image-contact {
        width: 100%;
    }

    .image-contact .para-info-main {
        font-size: 2.5rem;
    }

    .contact-leftRight-Container .contact-left {}

    .contact-right {
        width: 40%;
    }

    .contact-left .left-item .item-name {
        width: 100%;
    }

    .contact-left .left-item {

        width: 100%;
    }

    .contact-left .left-item .left-icon {
        height: 8rem;
        width: 8rem;
    }



    /* footer code */
    .footer {
        padding: 4rem 0;
    }

    .home-img:before {
        content: 'FITNESS';
        position: absolute;
        top: 10%;
        left: 40%;
        transform: translateX(-50%);
        font-size: 20rem;
        font-weight: 400;
        line-height: 20rem;
        color: var(--text-color);
        opacity: 0.1;
        z-index: -1;

    }

    /* ...Join-form-code */
    .registration-form-wrapper .form-right .reg {
        font-size: 3rem;
    }

    .registration-form-wrapper .form-left {
        width: 50%;
    }

    .registration-form-wrapper .form-right {
        border: 1px solid white;
        width: 50%;
    }

    .registration-form-wrapper .input-box {

        row-gap: 4.5rem;
    }


    .registration-form-wrapper .input-box textarea {
        font-size: 3rem;
        height: 10rem;
    }

    .registration-form-wrapper .input-box input {
        font-size: 3rem;
        height: 5rem;
    }

    .registration-form-wrapper .input-box button {
        font-size: 2.5rem;
        height: 5rem;
        min-width: 40%;
    }

    /* --Join -Code-- */
    .registration-form-wrapper .form-left {
   
    border-radius: 0px 0 0px 0px;
}
    .registration-form-wrapper .form-left {
        min-height: 75vh;
    }

    .registration-form-wrapper .form-right {
        min-height: 75vh;
    }

    .registration-form-wrapper .form-left .head {
        bottom: 10rem;

    }
}

@media(max-width:786px) {

    /* ..form-code */

    .registration-form-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        gap: 3rem;
    }

    .registration-form-wrapper .input-box {
        row-gap: 3rem;
    }

    .registration-form-wrapper .form-left {
  
        min-height: 85vh;
        min-width: 90%;
    }

    .registration-form-wrapper .form-right {
        
        min-height: 85vh;
        min-width: 90%;
    }

    .registration-form-wrapper .input-box input {
        font-size: 2.5rem;
        height: 6rem;
    }

    .registration-form-wrapper .input-box {
        row-gap: 4.5rem;
    }

    .registration-form-wrapper .input-box button {
        font-size: 3rem;
        height: 6rem;
        min-width: 35%;
    }

    .registration-form-wrapper .form-left .head {
        font-size: 3rem;
        height: 7rem;
    }

    .registration-form-wrapper .form-left .head p {
        font-size: 2rem;
    }



    .home {
        flex-direction: column;
    }

    .logo {
        margin-left: -50rem;
    }

    #menu-icon {
        position: absolute;
        margin-left: 34rem;
    }

    #cross {
        position: absolute;
        margin-left: 34rem;
        margin-top: -1.5rem;
    }

    .top-btn {
        position: absolute;
        margin-left: 58rem;
    }


    .home-content h3 {
        font-size: 4.5rem;
        margin-top: 1.5rem;
    }

    .home-content {
        order: 2;
    }

    .home-img {
        width: 70vh;
        margin-top: 4rem;
    }

    .home-img {
        margin-left: -10rem;
    }

    .about {
        flex-direction: column;

    }

    .about-img img {
        width: 70vw;
        margin: 10rem;

    }

    .about-content {
        text-align: center;
    }

    .about-content h2 {
        text-align: center;
    }

    .icons-option .icon11 span h1 {
        font-size: 2rem;

    }

    .icons-option .icon11 h3 {
        font-size: 2rem;
        min-width: 80%;
        line-height: 3rem;
    }

    /* .review-code */
    .review-item p {
        font-size: 2.5rem;
        line-height: 3rem;
    }



    /* -----contact-code */
    .contact-left {
        align-items: start;
        min-width: 100vw;
        padding-inline-start: 10rem;
    }

    .contact-leftRight-Container {
        display: flex;
        flex-direction: column;
        gap: 10rem;
    }

    .image-contact .para-info-main {
        font-size: 3rem;
        min-width: 100vw;
    }

    .contact-left .left-item .left-icon {
        height: 10rem;
        width: 12rem;
    }

    .contact-left .left-item .left-icon i {
        font-size: 5rem;
    }

    .contact-left .left-item .item-name .logo-name {
        font-size: 3rem;
    }

    .contact-left .left-item .item-name p {
        font-size: 3rem;
    }

    .services h2 {
        margin-bottom: 3rem;
    }

    .contact-right {
        width: 80vw;
        max-height: 90vh;
    }

    .contact-right .right-msg h1 {
        font-size: 3.5rem;
    }

    .contact-right .right-item .input input {
        min-width: 90%;
        min-height: 5rem;
        font-size: 3.5rem;
    }

    .contact-right .right-item {
        gap: 4rem;
    }

    .contact-right .right-item .input textarea {
        min-width: 90%;
        min-height: 8rem;
        font-size: 3.5rem;
    }

    .contact-right .right-item .button2 button {
        height: 6rem;
        width: 12.5rem;
        font-size: 4rem;
    }

    .contact-right .right-msg h1 {
        font-size: 3rem;
    }

    .home-img:before {
        content: 'FITNESS';
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20rem;
        font-weight: 400;
        line-height: 20rem;
        color: var(--text-color);
        opacity: 0.1;
        z-index: -1;

    }

    .grid-plan {
        text-align: center;
    }
}

@media(max-width:617px) {
    .home-img img {
        width: 80vw;
        margin-left: -6rem;
    }

    .about-img img {
        width: 80vw;
        margin-top: 4rem;

    }

    .logo {
        margin-left: -35rem;
    }

    #menu-icon {
        position: absolute;
        margin-left: 17rem;
    }

    #cross {
        position: absolute;
        margin-left: 17rem;
        margin-top: -1.5rem;
    }

    .top-btn {
        position: absolute;
        margin-left: 42rem;
    }

    .home-content {
        margin-left: 10rem;
    }

    .home-img:before {
        content: 'FITNESS';
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 15rem;
        font-weight: 400;
        line-height: 20rem;
        color: var(--text-color);
        opacity: 0.1;
        z-index: -1;

    }

    .grid-plan {
        text-align: center;
    }

    /* --contact-code */
    .image-contact .para-info-main {
        min-width: 100%;
        padding-inline: 0rem;
        padding-top: 0px;
    }

    .contact-left {
        align-items: start;
        min-width: 100%;
        padding-inline-start: 1rem;
    }


    /* .review  */
    .review-item p {
        font-size: 2.5rem;
        line-height: 3rem;
    }
     .registration-form-wrapper .form-left {
          min-height: 70vh;
     
    }

    .registration-form-wrapper .form-right {
          min-height: 70vh;
        min-width: 90%;
    }
    .registration-form-wrapper .input-box{
        row-gap: 3.5rem;
    }
    .registration-form-wrapper .form-left .head{
        bottom: 8rem;
        height: 10rem;
    }
    .registration-form-wrapper .form-left .head p{
        font-size: 1.6rem;
    }
    .registration-form-wrapper .input-box input {
        height: 5rem;
        
        font-size: 3rem;
    }
    .registration-form-wrapper .form-left img{
        height: 55vh;
    }
    .registration-form-wrapper .input-box button {
        min-width:50%;
    }
}

@media(max-width:450px) {
    .sup-list{
        min-width: 80vw;
        margin-left: -3rem;
    }
    html {
        font-size: 50%;
    }

    .logo {
        margin-left: -25rem;
        font-size: 2.5rem;
    }

    #menu-icon {
        position: absolute;
        margin-left: 6rem;
    }

    #cross {
        position: absolute;
        margin-left: 6rem;
        margin-top: -1.5rem;
    }

    .top-btn {
        position: absolute;
        margin-left: 30rem;
    }

    .home-img img {
        width: 110vw;
        height: 45rem;
        margin-left: 6rem;
    }

    .home-content h3 {
        font-size: 2.5rem;
        margin-top: 1.5rem;
    }

    .home-content h1 {
        width: 45rem;
    }

    .home-content p {
        font-size: 2rem;
        max-width: 80%;
    }

    .home-content {
        margin-left: 10rem;
    }

    .home-img:before {
        content: 'FITNESS';
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10rem;
        font-weight: 400;
        line-height: 20rem;
        color: var(--text-color);
        opacity: 0.1;
        z-index: -1;

    }

    /* about */

    .icons-option .icon11 h3 {
        font-size: 2rem;

        line-height: 3rem;
    }

    /* ..contact-code- */
    .image-contact .para-info-main {
        text-align: justify;
        padding: 1.6rem;
        font-size: 2.2rem;
    }

    .contact-left {
        align-items: start;
        min-width: 90%;
        padding-inline-start: 0rem;
    }

    .contact-left .left-item .item-name .email-add {
        max-width: 10vw;

    }

    .contact-left .left-item .left-icon {
        height: 6rem;
        width: 8rem;
    }

    .contact-left .left-item .left-icon i {
        font-size: 3.5rem;
    }

    .contact-left .left-item .item-name p {
        font-size: 2rem;
    }

    .contact-right .right-item .input input {
        font-size: 2.4rem;
    }

    .contact-right .right-item .input textarea {
        font-size: 2.4rem;
        min-height: 5rem;
    }

    .contact-right .right-item .button2 button {
        height: 5rem;
        width: 12rem;
        font-size: 2.5rem;
    }

    /* --Join-code */
    .registration-form-wrapper .form-left img {
        height: 40vh;
    }
    .registration-form-wrapper .form-left {
        min-height: 48vh;
      
    }

    .registration-form-wrapper .form-right {
        min-height:35vh;
        padding-block:0rem 2rem;
    }
    .registration-form-wrapper .input-box {
        row-gap: 2rem;
    }
    .registration-form-wrapper .input-box input{
        height: 4rem;
        font-size: 2rem;
    }
    .registration-form-wrapper .input-box textarea{
        height: 5rem;
        font-size: 2rem;
    }
    .registration-form-wrapper .input-box button {
        height: 4rem;
        font-size: 2.5rem;
    }
    .registration-form-wrapper .form-left .head{
      font-size: 2.5rem;
      bottom: 7rem;
      height: 6rem;
    }
       .registration-form-wrapper .form-left .head p{
        font-size: 1.2rem;
       }
}