:root {
  --mf-font-esm: 0.7rem;
  --mf-font-sm: 0.8rem;
  --mf-font-md: 1rem;
  --mf-font-rmd: 1.5rem;
  --mf-font-sxl: 2rem;
  --mf-font-xl: 2.5rem;
  --mf-font-xxl: 3rem;
  --mf-font-xxxl: 3.5rem;
}
/* for Ex-small start*/
@media (min-width: 320px) and (max-width: 575.98px) {
  /* common */
  .btn-gradient {
    padding: 10px 15px;
    font-size: var(--mf-font-sm) !important;
  }

  /* Navbar start*/
  .navbar {
    position: fixed !important;
    background: #fff;
    padding: 20px 0;
    top: 0;
  }
  .navbar-toggler {
    border: 0;
  }
  .navbar-toggler i {
    font-size: var(--mf-font-rmd);
  }
  .navbar .navbar-toggler:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
  }
  .navbar .navbar-nav .nav-item {
    margin: 0 auto;
  }
  .navbar .navbar-nav .nav-item:last-child {
    margin: 0 auto;
  }
  /* navbar end */

  /* Banner start*/
  #main .banner {
    height: 70vh;
  }
  #main .banner .shapes {
    height: 58vh;
    overflow: hidden;
  }
  #main .banner .shapes .item-1 {
    top: 15%;
    left: 15%;
  }
  #main .banner .shapes .item-4 {
    top: 100%;
    left: 119%;
  }
  #main .banner .shapes .item-5 {
    top: 90%;
    left: 90%;
  }
  #main .banner .shapes .item-6 {
    display: none;
  }
  #main .banner .shapes .item-7 {
    display: none;
  }
  #main .banner .shapes .item-8 {
    display: none;
  }
  #main .banner .shapes .item-3 .object-3 {
    opacity: 0.8;
  }
  #main .banner .main-banner .showcase {
    padding-top: 150px;
    height: 100%;
    overflow: hidden;
  }
  #main .banner .main-banner .showcase .image img {
    display: none;
  }
  #main .banner .main-banner .showcase .text .brand-logo {
    display: none;
  }
  #main .banner .showcase .text .hero {
    font-size: var(--mf-font-sxl);
  }
  #main .banner .showcase .text .hero .highlight {
    font-size: var(--mf-font-xl);
  }
  #main .banner .main-banner .showcase .text .gp-app-logo {
    width: 40%;
    padding: 40px 0;
  }

  #main .banner .showcase .text .hero .highlight {
    font-size: var(--mf-font-xl);
  }
  /* banner end */
  /* About start */
  #main .about {
    padding: 0px 0;
    overflow: hidden;
  }

  .about::after {
    display: none;
  }
  .about::before {
    display: none;
  }
  #main .about .text .about-title {
    width: auto;
  }
  #main .about .text .about-title h2 {
    margin: 0 auto;
    font-size: var(--mf-font-rmd);
    padding-bottom: 10px;
    width: auto;
  }
  #main .about .text .about-title h2 .highlight {
    padding: 10px 0;
    font-size: var(--mf-font-rmd);
  }
  #main .about .text .about-title p {
    width: auto;
    margin: 0 auto;
    font-size: var(--mf-font-md);
    line-height: 20px;
  }
  #main .about .text .about-title .highlight-sm {
    font-size: var(--mf-font-sm);
  }
  #main .about .main-items .item {
    padding: 20px 0;
    overflow-x: hidden;
  }
  #main .about .main-items .item p {
    color: var(--mf-peragraph);
    font-size: var(--mf-font-sm);
    padding: 15px 0;
  }
  #main .about .main-items .item .courses {
    overflow: scroll;
  }
  /* about end */

  /* features start*/
  #main .features {
    height: 100%;
  }
  #main .features .main-showcase {
    overflow-x: hidden;
    margin: 20px 0;
  }
  #main .features .main-showcase .title {
    margin-bottom: 60px;
    text-align: center;
  }
  #main .features .main-showcase .item-1 {
    padding: 30px 0;
  }
  #main .features .main-showcase .item-1 .title h2 {
    padding: 0 5px;
    width: auto;
    font-size: var(--mf-font-sxl);
  }
  #main .features .main-showcase .item-1 .title .highlight {
    font-size: var(--mf-font-sxl);
  }
  #main .features .main-showcase .item-1 .text {
    padding-top: 35px;
  }
  #main .features .main-showcase .item-1 .text h2 {
    font-size: 23px;
    color: var(--mf-orange);
  }
  #main .features .main-showcase .item-1 .text p {
    font-size: var(--mf-font-sm);
    padding: 0px 10px;
    text-align: center;
  }
  #main .features .main-showcase .item-1 .text h4 {
    font-size: 15px;
  }
  #main .features .main-showcase .item-1 .text h4::before {
    content: "»";
    color: var(--mf-orange);
  }
  #main .features .main-showcase .item-1 .text h4 i {
    display: none;
  }
  #main .features .main-showcase .item-2 {
    display: none !important;
  }
  /* featurs section end */
  /* install start*/
  #main .install {
    padding: 15px 0;
    overflow: hidden;
  }
  #main .install .download-counte h2 {
    font-size: var(--mf-font-rmd);
  }
  #main .install .download-counte .highlight {
    font-size: var(--mf-font-rmd);
  }
  #main .install .download-counte h6 {
    padding: 5px 0;
    font-size: var(--mf-font-sm);
  }
  /* install ens*/

  /* rewiews style */
  #main .reviews {
    height: 100%;
    padding: 20px 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background: url(../images/svg/reviews-bg.svg) no-repeat repeat;
    background-size: auto;
  }

  #main .reviews .text .title {
    padding: 5px 0;
  }
  #main .reviews .main-showcase .reviews-slider .slider-for {
    height: 90px;
  }
  #main .reviews .text .title h2 .highlight {
    font-size: var(--mf-font-rmd);
  }
  #main .reviews .main-showcase .reviews-slider .slider-for h3 {
    font-size: var(--mf-font-md);
  }
  #main .reviews .main-showcase .reviews-slider .slider-nav .slider-nav-item {
    height: 200px;
  }
  #main .reviews .main-showcase .reviews-slider .slider-for .slider-item p {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  #main
    .reviews
    .main-showcase
    .reviews-slider
    .slider-for
    .slider-item
    p::before {
    display: none;
    content: "";
  }
  #main
    .reviews
    .main-showcase
    .reviews-slider
    .slider-for
    .slider-item
    p::after {
    display: none;
    content: "";
  }
  #main .reviews .main-showcase .slider .slider-nav .slider-nav-item img {
    width: 70%;
    margin: 0 auto;
  }
  #main
    .reviews
    .main-showcase
    .reviews-slider
    .slider-nav
    .slider-nav-item
    img {
    width: 35%;
  }
  #main .reviews .main-showcase .slider .slider-for .slider-item p {
    width: 80%;
    margin: 0 auto;
    font-size: var(--mf-font-sm);
  }
  .slick-next {
    right: 10px;
  }
  .slick-prev {
    left: 0px;
  }
  .slider-for .slick-next::before,
  .slider-for .slick-prev::before {
    font-size: 30px;
  }
  .slider-for .slick-next,
  .slider-for .slick-prev {
    top: -45%;
  }
  /* faq start */
  #main .faq {
    padding: 30px 0;
  }
  #main .faq .text .title {
    font-size: var(--mf-font-sxl);
    padding: 10px 0;
  }
  #main .faq .main-showcase {
    padding: 0px 0;
  }
  #main .main-accordian .accordion-button {
    font-size: 10px !important;
  }
  #main .main-accordian .accordion-body ul li,
  p {
    font-size: var(--mf-font-esm);
  }
  /* footer */
  .footer {
    margin-top: 0px;
  }
  .footer .copyright p {
    margin-top: 0px;
  }
  /* for Ex-small start*/
}
/*===============For Small Devices Start================ */
@media (min-width: 576px) and (max-width: 768.98px) {
  .navbar {
    background: #fff;
    padding: 20px 0;
    top: 0;
    position: static !important;
  }
  .navbar-toggler {
    border: 0;
  }
  .navbar-toggler i {
    font-size: var(--mf-font-rmd);
  }
  .navbar .navbar-toggler:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
  }
  .navbar .navbar-nav .nav-item {
    margin: 0 auto;
  }
  .navbar .navbar-nav .nav-item:last-child {
    margin: 0 auto;
  }
  /* navbar end */

  /* Banner start*/
  #main .banner {
    padding: 0;
    height: 100vh;
  }

  #main .banner .shapes {
    height: 60vh;
    overflow: hidden;
  }
  #main .banner .shapes .item-1 {
    top: 15%;
    left: 15%;
  }
  #main .banner .shapes .item-4 {
    top: 100%;
    left: 119%;
  }
  #main .banner .shapes .item-5 {
    top: 90%;
    left: 90%;
  }
  #main .banner .shapes .item-6 {
    display: none;
  }
  #main .banner .shapes .item-7 {
    display: none;
  }
  #main .banner .shapes .item-8 {
    display: none;
  }
  #main .banner .shapes .item-3 .object-3 {
    opacity: 0.8;
  }
  #main .banner .main-banner .showcase {
    padding-top: 35px;
    height: 100%;
    overflow: hidden;
  }
  #main .banner .main-banner .showcase .image img {
    display: block;
    height: 50vh;
  }
  #main .banner .main-banner .showcase .text .brand-logo {
    display: none;
  }
  #main .banner .showcase .text .hero {
    font-size: var(--mf-font-sxl);
  }
  #main .banner .showcase .text .hero .highlight {
    font-size: var(--mf-font-xl);
  }
  #main .banner .main-banner .showcase .text .gp-app-logo {
    width: 40%;
    padding: 30px 0;
  }

  #main .banner .showcase .text .hero .highlight {
    font-size: var(--mf-font-xl);
  }
  /* banner end */
  /* About start */
  #main .about {
    padding: 30px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .about::after {
    display: none;
  }
  .about::before {
    display: none;
  }
  #main .about .text .about-title {
    width: auto;
  }
  #main .about .text .about-title h2 {
    margin: 0 auto;
    font-size: var(--mf-font-rmd);
    padding-bottom: 10px;
    width: auto;
  }
  #main .about .text .about-title p {
    width: 410px;
    margin: 0 auto;
    font-size: var(--mf-font-md);
    line-height: 20px;
  }
  #main .about .text .about-title .highlight-sm {
    font-size: var(--mf-font-sm);
  }
  #main .about .main-items .item {
    padding: 20px 0;
    overflow-x: hidden;
  }
  #main .about .main-items .item p {
    color: var(--mf-peragraph);
    font-size: var(--mf-font-sm);
    padding: 15px 0;
  }
  #main .about .main-items .item .courses {
    overflow: scroll;
  }
  /* about end */

  /* features start*/
  #main .features {
    height: 100%;
  }
  #main .features .main-showcase {
    overflow-x: hidden;
  }
  #main .features .main-showcase .title {
    margin-bottom: 60px;
    text-align: center;
  }
  #main .features .main-showcase .item-1 {
    padding: 30px 0;
  }
  #main .features .main-showcase .item-1 .title h2 {
    padding: 0 5px;
    width: auto;
    font-size: var(--mf-font-sxl);
  }
  #main .features .main-showcase .item-1 .title .highlight {
    font-size: var(--mf-font-sxl);
  }
  #main .features .main-showcase .item-1 .text {
    padding-top: 35px;
  }
  #main .features .main-showcase .item-1 .text h2 {
    font-size: 23px;
    color: var(--mf-orange);
  }
  #main .features .main-showcase .item-1 .text p {
    font-size: var(--mf-font-sm);
    padding: 0px 10px;
    text-align: center;
  }
  #main .features .main-showcase .item-1 .text h4 {
    font-size: 15px;
  }
  #main .features .main-showcase .item-1 .text h4::before {
    content: " ";
  }
  #main .features .mamain-showcasein .item-1 .text h4 i {
    display: none;
  }
  #main .features .main-showcase .item-2 {
    display: none !important;
  }
  /* featurs section end */
  /* install start*/
  #main .install {
    padding: 15px 0;
  }
  #main .install .download-counte h2 {
    font-size: var(--mf-font-rmd);
  }
  #main .install .download-counte .highlight {
    font-size: var(--mf-font-rmd);
  }
  #main .install .download-counte h6 {
    padding: 5px 0;
    font-size: var(--mf-font-sm);
  }
  /* install ens*/

  /* rewiews style */
  #main .reviews {
    height: 100%;
    padding: 20px 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background: url(../images/svg/reviews-bg.svg) no-repeat repeat;
    background-size: auto;
  }

  #main .reviews .text .title {
    padding: 5px 0;
  }
  #main .reviews .main-showcase .reviews-slider .slider-for {
    height: 90px;
  }
  #main .reviews .main-showcase .reviews-slider .slider-for h3 {
    font-size: var(--mf-font-md);
  }
  #main .reviews .main-showcase .reviews-slider .slider-nav .slider-nav-item {
    height: 200px;
  }
  #main .reviews .main-showcase .reviews-slider .slider-for .slider-item p {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  #main .reviews .main-showcase .slider .slider-nav .slider-nav-item img {
    width: 70%;
    margin: 0 auto;
  }
  #main .reviews .main-showcase .reviews-slider .slider- .slider-nav-item img {
    width: 35%;
  }
  #main .reviews .main-showcase .slider .slider-for .slider-item p {
    width: 80%;
    margin: 0 auto;
    font-size: var(--mf-font-sm);
  }
  .slick-next {
    right: 10px;
  }
  .slick-prev {
    left: 10px;
  }
  .slider-for .slick-next::before,
  .slider-for .slick-prev::before {
    font-size: 20px;
  }
  /* faq start */
  #main .faq {
    padding: 30px 0;
  }
  #main .faq .text .title {
    font-size: var(--mf-font-sxl);
    padding: 10px 0;
  }
  #main .faq .main-showcase {
    padding: 0px 0;
  }
  #main .main-accordian .accordion-button {
    font-size: var(--mf-font-sm);
  }
  #main .mian-accordian .accordion-body ul li,
  p {
    font-size: var(--mf-font-esm);
  }
  /* footer */
  .footer {
    margin-top: 0px;
  }
  .footer .copyright p {
    margin-top: 0px;
  }
}

/* for medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar {
    background: #fff;
    padding: 20px 0;
    top: 0;
    position: static !important;
  }
  .navbar-toggler {
    border: 0;
  }
  .navbar-toggler i {
    font-size: var(--mf-font-rmd);
  }
  .navbar .navbar-toggler:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
  }
  .navbar .navbar-nav .nav-item {
    margin: 0 auto;
  }
  .navbar .navbar-nav .nav-item:last-child {
    margin: 0 auto;
  }
  /* navbar end */

  /* Banner start*/
  #main .banner {
    overflow: hidden;
    padding: 0;
  }
  #main .banner .shapes {
    height: 85vh;
    overflow: hidden;
  }
  #main .banner .shapes .item-1 {
    top: 15%;
    left: 15%;
  }
  #main .banner .shapes .item-4 {
    top: 100%;
    left: 119%;
  }
  #main .banner .shapes .item-5 {
    top: 90%;
    left: 90%;
  }
  #main .banner .shapes .item-6 {
    display: none;
  }
  #main .banner .shapes .item-7 {
    display: none;
  }
  #main .banner .shapes .item-8 {
    display: none;
  }
  #main .banner .shapes .item-3 .object-3 {
    opacity: 0.8;
  }
  #main .banner .main-banner .showcase {
    padding-top: 35px;
    height: 100%;
    overflow: hidden;
  }
  #main .banner .main-banner .showcase .image img {
    display: block;
    height: 55vh;
  }
  #main .banner .main-banner .showcase .text .brand-logo {
    display: none;
  }
  #main .banner .showcase .text .hero {
    font-size: var(--mf-font-sxl);
  }
  #main .banner .showcase .text .hero .highlight {
    font-size: var(--mf-font-xl);
  }
  #main .banner .main-banner .showcase .text .gp-app-logo {
    width: 20%;
    padding: 40px 0;
  }

  #main .banner .showcase .text .hero .highlight {
    font-size: var(--mf-font-xl);
  }
  /* banner end */
  /* About start */
  #main .about {
    padding: 50px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .about::after {
    display: none;
  }
  .about::before {
    display: none;
  }
  #main .about .text .about-title {
    width: auto;
  }
  #main .about .text .about-title h2 {
    margin: 0 auto;
    font-size: var(--mf-font-rmd);
    padding-bottom: 10px;
    width: auto;
  }
  #main .about .text .about-title p {
    width: 410px;
    margin: 0 auto;
    font-size: var(--mf-font-md);
    line-height: 20px;
  }
  #main .about .text .about-title .highlight-sm {
    font-size: var(--mf-font-sm);
  }
  #main .about .main-items .item {
    padding: 20px 0;
    overflow-x: hidden;
  }
  #main .about .main-items .item p {
    color: var(--mf-peragraph);
    font-size: var(--mf-font-sm);
    padding: 15px 0;
  }
  #main .about .main-items .item .courses {
    overflow: scroll;
  }
  /* about end */

  /* features start*/
  #main .features {
    height: 100%;
  }
  #main .features .main-showcase {
    overflow-x: hidden;
  }
  #main .features .main-showcase .title {
    margin-bottom: 60px;
    text-align: center;
  }
  #main .features .main-showcase .item-1 {
    padding: 30px 0;
  }
  #main .features .main-showcase .item-1 .title h2 {
    padding: 0 5px;
    width: auto;
    font-size: var(--mf-font-sxl);
  }
  #main .features .main-showcase .item-1 .title .highlight {
    font-size: var(--mf-font-sxl);
  }
  #main .features .main-showcase .item-1 .text {
    padding-top: 35px;
  }
  #main .features .main-showcase .item-1 .text h2 {
    font-size: 23px;
    color: var(--mf-orange);
  }
  #main .features .main-showcase .item-1 .text p {
    font-size: var(--mf-font-sm);
    padding: 0px 10px;
    text-align: center;
  }
  #main .features .main-showcase .item-1 .text h4 {
    font-size: 15px;
  }
  #main .features .main-showcase .item-1 .text h4::before {
    content: "»";
    color: var(--mf-orange);
  }
  #main .features .main-showcase .item-1 .text h4 i {
    display: none;
  }
  #main .features .main-showcase .item-2 {
    display: none !important;
  }
  /* featurs section end */
  /* install start*/
  #main .install {
    padding: 15px 0;
  }
  #main .install .download-counte h2 {
    font-size: var(--mf-font-rmd);
  }
  #main .install .download-counte .highlight {
    font-size: var(--mf-font-rmd);
  }
  #main .install .download-counte h6 {
    padding: 5px 0;
    font-size: var(--mf-font-sm);
  }
  /* install ens*/

  /* rewiews style */
  #main .reviews {
    height: 100%;
    padding: 20px 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background: url(../images/svg/reviews-bg.svg) no-repeat repeat;
    background-size: auto;
  }

  #main .reviews .text .title {
    padding: 5px 0;
  }
  #main .reviews .main-showcase .reviews-slider .slider-for {
    height: 90px;
  }
  #main .reviews .maimain-showcasen .reviews-slider .slider-for h3 {
    font-size: var(--mf-font-md);
  }
  #main .reviews .main-showcase .reviews-slider .slider-nav .slider-nav-item {
    height: 200px;
  }
  #main .reviews .main-showcase .reviews-slider .slider-for .slider-item p {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  #main .reviews .main-showcase .slider .slider-nav .slider-nav-item img {
    width: 70%;
    margin: 0 auto;
  }
  #main
    .reviews
    .main-showcase
    .reviews-slider
    .slider-nav
    .slider-nav-item
    img {
    width: 35%;
  }
  #main .reviews .main-showcase .slider .slider-for .slider-item p {
    width: 80%;
    margin: 0 auto;
    font-size: var(--mf-font-sm);
  }
  .slick-next {
    right: 10px;
  }
  .slick-prev {
    left: 10px;
  }
  .slider-for .slick-next::before,
  .slider-for .slick-prev::before {
    font-size: 20px;
  }
  /* faq start */
  #main .faq {
    padding: 30px 0;
  }
  #main .faq .text .title {
    font-size: var(--mf-font-sxl);
    padding: 10px 0;
  }
  #main .faq .main-showcase {
    padding: 0px 0;
  }
  #main .main-accordian .accordion-button {
    font-size: var(--mf-font-sm);
  }
  #main .main-accordian .accordion-body ul li,
  p {
    font-size: var(--mf-font-esm);
  }
  /* footer */
  .footer {
    margin-top: 0px;
  }
  .footer .copyright p {
    margin-top: 0px;
  }
}
/* for lg devvices */
@media (min-width: 992px) and (max-width: 2299.98px) {
  .about::after {
    display: none;
  }
  .about::before {
    display: none;
  }
}