@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

    .mobile-menu {
        display: block;
        position: fixed;
        left: -90%;
        top: 0px;
        width: 90%;
        z-index: 999;
        height: 100%;
        background: #ffffff;
        transition: left 0.3s ease-in-out;
    }
    .mobile-menu.show {
        left: 0%;
    }
    .mobile-menu .mobile-menu-options-list {
        list-style: none;
        padding: 20px;
        margin-top: 75px;
    }
    .mobile-menu .mobile-menu-options-list .mobile-menu-options {
        margin-bottom: 30px;
    }
    .mobile-menu .mobile-menu-options-list .mobile-menu-options .mobile-menu-option {
        text-decoration: none;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Afacad', sans-serif;
        color: #000000;
    }
    .header-wrapper .col-md-2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .menu-toggle-btn {
        display: block;
        height: 30px;
        width: 30px;
        overflow: hidden;
        z-index: 999;
    }
    .menu-toggle-btn .toggle-btn {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .menu-toggle-btn .toggle-btn.menu-btn {
        background-image: url(../image/menu-grey.png);
    }
    .menu-toggle-btn .toggle-btn.close-btn {
        background-image: url(../image/close.png);
    }
    .header-wrapper .header-logo-wrapper {
        width: 40%;
    }
    .header-menu-wrapper {
        display: none;
    }
    .hero-main-wrapper {
        height: fit-content;
        padding: 30px;
        margin: 0px auto;
    }
    .hero-main-wrapper .hero-content-wrapper {
        width: 100%;
        padding-right: 0px;
    }
    .hero-title {
        line-height: 40px;
        font-size: 40px;
        text-align: center;
    }
    .hero-text {
        font-size: 25px;
        text-align: center;
    }
    .hero-main-wrapper .hero-banner-img-wrapper {
        display: none;
    }
    .col-md-25 {
        width: 100%;
        margin: 10px 0px;
    }
    .highlights-content-wrapper:hover {
        transform: none;
    }
    .program-wrapper {
        padding: 0px;
        margin: 0px auto;
    }
    .program-main-wrapper {
        width: 100%;
        margin: 0px auto;
    }
    .program-card-wrapper {
        width: 100%;
        margin: 12px auto;
    }
    .btn-wrapper {
        width: 100%;
        margin: 30px auto 0px;
    }
    .why-choose-content-wrapper {
        padding-right: 0px;
        text-align: center;
        margin-bottom: 20px;
    }
    .section-title {
        font-size: 35px;
    }
    .section-title br {
        display: none;
    }
    .wcu-card-main-wrapper:hover {
        transform: none;
    }
    .testimonial-card-wrapper .testimonial-text {
        font-size: 15px;
    }
    .pre-footer-main-wrapper {
        margin: 0px 5px;
    }
    .pre-footer-content {
        padding-right: 0px;
    }
    .pre-footer-content .pre-footer-text {
        font-size: 30px;
        margin-bottom: 15px;
    }
    .pre-footer-content .link-btn {
        width: 100%;
        margin-bottom: 45px;
    }
    .footer-logo-wrapper {
        padding-right: 0px;
        width: 60%;
        margin: 0px auto 30px;
    }
    .col-md-3.footercol2, .col-md-3.footercol3 {
        width: 50%;
    }
    .footer-link {
        margin-bottom: 15px;
        text-align: left;
    }
    .footer-link a {
        font-size: 20px;
    }
    .newsletter-wrapper .email {
        width: 100%;
    }
    .banner-content-wrapper {
        margin: 0px;
        padding: 0px 10px;
    }
    .banner-main-wrapper .hero-img-wrapper {
        margin: 30px 0px 0px 10px;
    }
    .full-width-img-wrapper {
        display: none;
    }
    .content-left, .our-vision-content {
        width: 100%;
        padding: 0px 10px;
    }
    .who-we-are-img-wrapper, .our-vision-img-wrapper {
        width: 95%;
    }
    .page-banner-wrapper {
        height: fit-content;
        padding: 45px 30px;
        margin: 0px auto;
    }
    .page-banner {
        width: 100%;
    }
    .page-banner-wrapper .page-banner-title {
        font-size: 40px;
        line-height: 40px;
    }
    .page-banner-wrapper .page-banner-text {
        font-size: 20px;
    }
    .banner-full-img-wrapper {
        margin: 0px  auto;
        height: 350px;
    }
    .intro-content .intro-title {
        font-size: 50px;
    }
    .intro-content {
        padding-right: 0px;
    }
    .intro-img-wrapper {
        display: none;
    }
    .pricing-content-wrapper {
        margin: 0px 5px;
    }
    .pricing-details-wrapper {
        padding: 35px;
    }
    .pricing-details-wrapper .pricing-wrapper {
        flex-direction: column;
    }
    .pricing-details-wrapper .pricing-wrapper .pricing-plan-wrapper .pricing {
        font-size: 30px;
    }
    .pricing-details-wrapper .pricing-wrapper .timings-wrapper {
        margin-top: 30px;
    }
    .pricing-details-wrapper .secondary-btn-wrapper {
        margin-top: 45px;
        width: 100%;
    }
    .trainers-main-wrapper {
        width: 100%;
    }
    .trainer-wrapper .trainer-img-wrapper {
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
    }
    .trainer-wrapper .trainer-info-wrapper {
        padding: 320px 30px 45px !important;
        width: 96%;
        height: fit-content;
        margin: 0px auto !important;
    }
    .trainer-wrapper .trainer-info-wrapper .trainer-name {
        font-size: 35px;
    }
    .trainer-wrapper .trainer-info-wrapper .trainer-info {
        font-size: 25px;
        line-height: 1.1;
    }
    .articles-hero-banner {
        height: fit-content;
    }
    .articles-hero-banner .articles-info-wrapper {
        margin-top: 15px;
    }
    .article-details-wrapper .article-heading {
        font-size: 35px;
        line-height: 1.2;
    }
    .contact-us-main-wrapper {
        margin: 0px auto;
        padding: 30px;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper {
        padding-right: 0px;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .subtitle {
        font-size: 25px;
        text-align: center;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .hero-text {
        font-size: 20px;
    }
    .contact-details-wrapper {
        margin-top: 75px;
    }
    .contact-details-wrapper .contact-details {
        margin: 20px 0px;
    }
    .contact-details-wrapper .contact-details .section-text {
        font-size: 23px;
        line-height: 1.2;
    }
    .contact-us-main-wrapper .main-form-wrapper {
        margin-top: 50px;
    }
    .contact-details-wrapper .contact-details .contact-icon {
        height: 25px;
        width: 25px;
    }
    .contact-us-main-wrapper .main-form-wrapper .form-wrapper button {
        width: 100%;
    }
    .faqs-wrapper .faqs-que-wrapper .faqs-que {
        font-size: 30px;
        line-height: 1.1;
    }
    .faqs-content-wrapper {
        padding: 30px;
    }
    .faq-query-wrapper {
        padding: 30px;
    }
    .faq-query-wrapper .faq-query-title {
        font-size: 30px;
        text-align: center;
    }
    .faq-query-wrapper .secondary-btn-wrapper {
        width: 100%;
    }
    .register-main-wrapper {
        width: 100%;
    }
    .register-form-wrapper .dob input {
        width: 100%;
        margin: 10px 0px;
    }
    .register-form-wrapper .gender-drop-down select {
        width: 100%;
        margin: 10px 0px 10px 0px;
        padding: 11px 10px;
    }
    .date-gender-wrapper {
        width: 100%;
        align-items: center;
    }
    

}
@media only screen and (min-device-width: 480px) and (max-device-width: 768px) {

    .mobile-menu {
        display: block;
        position: fixed;
        left: -90%;
        top: 0px;
        width: 70%;
        z-index: 999;
        height: 100%;
        background: #ffffff;
        transition: left 0.3s ease-in-out;
    }
    .mobile-menu.show {
        left: 0%;
    }
    .mobile-menu .mobile-menu-options-list {
        list-style: none;
        padding: 20px;
        margin-top: 15%;
        margin-left: 12%;
    }
    .mobile-menu .mobile-menu-options-list .mobile-menu-options {
        margin-bottom: 25px;
    }
    .mobile-menu .mobile-menu-options-list .mobile-menu-options .mobile-menu-option {
        text-decoration: none;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Afacad', sans-serif;
        color: #000000;
    }
    .header-wrapper .col-md-2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .menu-toggle-btn {
        display: block;
        height: 30px;
        width: 30px;
        overflow: hidden;
        z-index: 999;
    }
    .menu-toggle-btn .toggle-btn {
        display: block;
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .menu-toggle-btn .toggle-btn.menu-btn {
        background-image: url(../image/menu-grey.png);
    }
    .menu-toggle-btn .toggle-btn.close-btn {
        background-image: url(../image/close.png);
    }
    .header-wrapper .header-logo-wrapper {
        width: 30%;
    }
    .header-menu-wrapper {
        display: none;
    }
    .col-md-25 {
        width: 50%;
    }
    .hero-title {
        font-size: 40px;
        line-height: 40px;
        text-align: center;
    }
    .hero-text {
        font-size: 25px;
        text-align: center;
    }
    .hero-main-wrapper .hero-content-wrapper {
        width: 100%;
        padding: 0px;
    }
    .hero-main-wrapper {
        height: fit-content;
        padding: 40px;
        width: 100%;
        margin: 0px auto;
    }
    .hero-main-wrapper .hero-banner-img-wrapper {
        display: none;
    }
    .highlights-content-wrapper {
        margin: 12px 0px;
    }
    .program-wrapper {
        width: 100%;
        margin: 0px auto;
    }
    .program-wrapper .col-md-3 {
        width: 50%;
    }
    .btn-wrapper {
        width: 70%;
    }
    .section-title {
        font-size: 45px;
        text-align: center;
    }
    br {
        display: none;
    }
    .why-choose-content-wrapper .section-text {
        text-align: center;
        margin-bottom: 30px;
    }
    .why-choose-content-wrapper {
        padding-right: 0px;
    }
    .pre-footer-content {
        padding-right: 0px;
    }
    .pre-footer-content .pre-footer-text {
        margin-bottom: 30px;
    }
    .pre-footer-content .link-btn {
        width: 100%;
        text-align: center;
        margin: 0px auto 60px;
    }
    .footer-logo-wrapper {
        padding-right: 0px;
        width: 100%;
        margin: 0px auto 30px;
    }
    .col-md-3.footercol1, .col-md-3.footercol2, .col-md-3.footercol3 {
        width: 33%;
    }
    .col-md-3.footercol4 {
        width: 100%;
    }
    .footer-link {
        margin-bottom: 15px;
        text-align: center;
    }
    .footer-link a {
        font-size: 20px;
    }
    .newsletter-wrapper .email {
        width: 100%;
    }
    .banner-main-wrapper .col-md-7 {
        width: 60%;
        padding: 0px;
    }
    .banner-main-wrapper .col-md-5 {
        width: 40%;
        padding: 0px;
    }
    .banner-content-wrapper {
        margin-left: 75px;
        padding-right: 50px;
    }
    .banner-content-wrapper .hero-title {
        text-align: left;
    }
    .banner-content-wrapper .hero-text {
        text-align: left;
        font-size: 22px;
    }
    .banner-main-wrapper .hero-img-wrapper {
        height: 300px;
    }
    .full-width-img-wrapper {
        display: none;
    }
    .about-us-content .section-title {
        text-align: left;
    }
    .content-left, .our-vision-content {
        width: 100%;
        margin: 55px auto;
    }
    .who-we-are-img-wrapper, .our-vision-img-wrapper {
        width: 90%;
    }
    .page-banner-wrapper {
        height: fit-content;
        padding: 40px;
    }
    .page-banner {
        width: 100%;
    }
    .page-banner-wrapper .page-banner-title {
        font-size: 40px;
        line-height: 40px;
    }
    .page-banner-wrapper .page-banner-text {
        font-size: 25px;
    }
    .trainers-main-wrapper {
        width: 100%;
    }
    .trainer-wrapper .trainer-img-wrapper {
        top: -30px;
        bottom: 0px;
        height: 200px;
        width: 200px;
    }
    .trainer-wrapper .trainer-info-wrapper {
        width: 93%;
        height: fit-content;
    }
    .trainer-wrapper.img-first .trainer-info-wrapper {
        padding-left: 200px;
    }
    .trainer-wrapper.text-first .trainer-info-wrapper {
        padding-right: 200px;
    }
    .trainer-wrapper .trainer-info-wrapper .trainer-name {
        font-size: 35px;
    }
    .trainer-wrapper .trainer-info-wrapper .trainer-info {
        font-size: 25px;
        line-height: 1.2;
    }
    .articles-hero-banner {
        height: auto;
    }
    .articles-hero-banner .articles-info-wrapper {
        margin: 20px 0px;
    }
    .article-details-wrapper .article-heading {
        font-size: 35px;
        line-height: 1.2;
    }
    .banner-full-img-wrapper {
        height: 250px;
    }
    .intro-content {
        padding-right: 0px;
        margin-bottom: 30px;
    }
    .intro-content .intro-title {
        font-size: 40px;
    }
    .pricing-content-wrapper {
        margin: 0px 5px;
    }
    .pricing-details-wrapper {
        padding: 35px;
    }
    .pricing-details-wrapper .pricing-wrapper {
        flex-direction: column;
    }
    .pricing-details-wrapper .pricing-wrapper .pricing-plan-wrapper .pricing {
        font-size: 45px;
    }
    .pricing-details-wrapper .pricing-wrapper .timings-wrapper {
        margin-top: 30px;
    }
    .pricing-details-wrapper .secondary-btn-wrapper {
        margin-top: 45px;
        width: 100%;
    }
    .contact-us-main-wrapper {
        margin: 0px auto;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper {
        padding-right: 0px;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .hero-title 
    {
        font-size: 50px;
        text-align: center;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .subtitle {
        font-size: 40px;
        text-align: center;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .hero-text {
        font: 20px;
    }
    .contact-details-wrapper {
        margin-top: 45px;
    }
    .contact-details-wrapper .contact-details .contact-icon {
        height: 30px;
        width: 30px;
    }
    .contact-details-wrapper .contact-details .section-text {
        font-size: 20px;
    }
    .contact-us-main-wrapper .main-form-wrapper {
        margin-top: 50px;
    }
    .contact-us-main-wrapper .main-form-wrapper .form-wrapper button {
        width: 100%;
    }
    .register-main-wrapper {
        width: 100%;
    }
    .register-form-wrapper input {
        margin: 10px 0px;
    }
    .register-form-wrapper .dob input {
        width: 100%;
        margin: 5px 0px 5px 0px;
    }
    .register-form-wrapper .gender-drop-down select {
        width: 100%;
        margin: 5px 0px 5px 0px;
        padding: 11px 10px;
    }
    .faqs-wrapper .faqs-que-wrapper .faqs-que {
        font-size: 35px;
    }
    .faqs-content-wrapper {
        padding: 25px;
    }
    .faq-query-wrapper {
        padding: 35px;
    }
    .faq-query-wrapper .faq-query-title {
        font-size: 35px;
    }
    .faq-query-wrapper .secondary-btn-wrapper {
        width: 100%;
    }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    .header-wrapper .col-md-3 {
        display: none;
    }
    .header-wrapper .col-md-7 {
        width: 80%;
    }
    .link-btn {
        padding: 10px 30px;
    }
    .header-wrapper .header-logo-wrapper {
        width: 100px;
    }
    .hero-main-wrapper {
        height: auto;
        margin: 0px auto;
        padding: 50px;
    }
    .hero-main-wrapper .hero-content-wrapper {
        width: 100%;
        padding-right: 0px;
    }
    .hero-main-wrapper .hero-banner-img-wrapper {
        display: none;
    }
    .hero-title {
        font-size: 60px;
        line-height: 1;
        text-align: center;
    }
    .hero-text {
        font-size: 25px;
        text-align: center;
    }
    .col-md-25 {
        width: 50%;
    }
    .highlights-content-wrapper {
        padding: 20px;
        margin: 10px 0px;
    }
    .section-title {
        font-size: 40px;
    }
    .program-wrapper {
        width: 100%;
        margin: 0px auto;
    }
    .program-wrapper .col-md-3 {
        width: 50%;
    }
    .btn-wrapper {
        width: 45%;
    }
    .why-choose-us-main-wrapper .col-md-4, .why-choose-us-main-wrapper .col-md-8 {
        width: 100%;
    }
    .why-choose-content-wrapper {
        padding-right: 0px;
        margin-bottom: 45px;
    }
    .why-choose-content-wrapper .section-title, .why-choose-content-wrapper .section-text  {
        text-align: center;
    }
    .wcu-card-main-wrapper {
        padding: 25px;
        height: 230px;
    }
    .wcu-card-main-wrapper .wcu-img-wrapper .wcu-img {
        object-position: top;
    }
    .slick-track {
        margin: 75px 0px;
    }
    .pre-footer-content {
        padding-right: 25px;
    }
    .pre-footer-content .pre-footer-text {
        font-size: 30px;
        margin-bottom: 30px;
    }
    .pre-footer-content .link-btn {
        width: 75%;
    }
    /* footer {
        display: block;
    } */
    .footer-logo-wrapper {
        padding-right: 0px;
        width: 100%;
        margin: 0px auto 30px;
    }
    .col-md-3.footercol1, .col-md-3.footercol2, .col-md-3.footercol3 {
        width: 33%;
    }
    .footer-link {
        margin-bottom: 15px;
        text-align: center;
    }
    .footer-link a {
        font-size: 20px;
    }
    .footercol4 {
        width: 100%;
    }
    .newsletter-wrapper .email {
        width: 60%;
    }
    .newsletter-wrapper .link-btn {
        margin: 0px auto 0px 0px;
        width: 20%;
    }
    .banner-content-wrapper .hero-title {
        font-size: 40px;
        text-align: left;
    }
    .banner-content-wrapper .hero-text {
        text-align: left;
    }
    .banner-content-wrapper {
        margin-left: 50px;
        padding-right: 45px;
    }
    .content-left, .our-vision-content {
        width: 90%;
    }
    .about-us-content {
        margin: 50px 0px;
    }
    .who-we-are-img-wrapper, .our-vision-img-wrapper {
        width: 90%;
    }
    .page-banner-wrapper .page-banner-title {
        font-size: 40px;
        line-height: 1;
    }
    .page-banner-wrapper {
        height: auto;
        padding: 75px 50px;
    }
    .page-banner {
        width: 100%;
    }
    .page-banner-wrapper .page-banner-text {
        font-size: 25px;
    }
    .banner-full-img-wrapper {
        height: 300px;
    }
    .intro-content .intro-title {
        font-size: 40px;
    }
    .intro-img-wrapper .intro-img {
        height: 300px;
        width: 300px;
    }
    .intro-img-wrapper .intro-small-img {
        display: none;
    }
    .pricing-content-wrapper .col-md-8 {
        width: 100%;
    }
    .pricing-img-wrapper {
        display: none;
    }
    .pricing-details-wrapper .secondary-btn-wrapper {
        width: 100%;
    }
    .trainers-main-wrapper {
        width: 100%;
    }
    .trainer-wrapper.img-first .trainer-info-wrapper {
        height: auto;
    }
    .trainer-wrapper .trainer-img-wrapper {
        top: -30px;
        bottom: 0px;
    }
    .trainer-wrapper .trainer-info-wrapper .trainer-name {
        font-size: 35px;
    }
    .trainer-wrapper .trainer-info-wrapper .trainer-info {
        font-size: 25px;
        line-height: 1.1;
    }
    .articles-hero-banner .articles-info-wrapper .hero-title {
        text-align: left;
    }
    .article-details-wrapper .article-heading {
        font-size: 35px;
        line-height: 1.1;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper {
        padding-right: 40px;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .hero-title {
        font-size: 40px;
        text-align: left;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .subtitle {
        font-size: 30px;
        text-align: left;
    }
    .contact-us-main-wrapper .contact-us-content-wrapper .hero-text {
        font-size: 20px;
        text-align: left;
    }
    .contact-details-wrapper {
        margin-top: 75px;
    }
    .contact-details-wrapper .contact-details .contact-icon {
        height: 30px;
        width: 30px;
    }
    .contact-details-wrapper .contact-details .section-text {
        font-size: 20px;
    }
    .contact-us-main-wrapper .main-form-wrapper .form-wrapper button {
        width: 100%;
        font-size: 20px;
    }
    .register-main-wrapper {
        width: 100%;
    }
    .register-form-wrapper .dob input {
        width: 100%;
        margin: 5px 0px 10px;
    }
    .register-form-wrapper .gender-drop-down select {
        width: 100%;
        margin: 5px 0px 10px;
        padding: 11px;
    }
    .faqs-wrapper .faqs-que-wrapper .faqs-que, .faq-query-wrapper .faq-query-title {
        font-size: 35px;
        line-height: 1.1;
    }
    .faqs-content-wrapper {
        padding: 30px;
    }

}