@media (min-width: 992px) and (max-width: 1200px) {}

 /*		Tablet Layout: 768px.
 -----------------------------------------------------------------   */
 @media only screen and (min-width: 768px) and (max-width: 991px) {
     body {
         font-size: 15px;
     }
 }

 /*		Mobile Layout: 320px.
 ------------------------------------------------------------   */

 @media only screen and (max-width: 767px) {
    .socials {
 
    gap: 10px;
}
    .features .features-img { 
    width: 65px;
}
.accordion-button {
    font-size: 20px; 
}
.mobile-btn{
    display: block;
    position: absolute;
    right: 50px;
}
.features {
    padding: 25px 20px 30px 20px;
}
.about-right {
    background: #f3f6fc;
    padding: 15px 13px 25px;
    border-radius: 10px;
    border: 3px dotted var(--base-color);
    position: relative;
    z-index: 1;
    margin-top: 40px;
}
.web-view{
    display: none   ;
}
.navbar .logo img {
    width: 70px;
}
     .navbar .logo {
         font-size: 22px;
     }
     .How-it-work::after{
        display: none;
     }
.vision {
    display: grid
;
    grid-template-columns: auto;
    gap: 10px;
}
.about-img{
    display: none;
}
     .original-button {
         font-size: 15px;
         padding: 15px 20px;
     }

     .about-area .section-title {
         padding: 15px 0 0px;
         text-align: left !important;
     }

     .tab .tab-content {
         padding: 70px 15px 30px;
         width: 100%;
         margin-top: 25px;
     }

     .tab .nav-tabs {
         display: block;
     }

     .slider-table-cell p {
         margin: 10px 0px 0px;
     }

     .all-btn {
         margin-top: 20px;
         gap: 15px;
     }

     .main-h1 {
         font-size: 37px;
         line-height: 37px;
     }

     .main-banner {
         padding: 100px 0px 80px;
         height: auto;
         z-index: 0;
     }

     .main-banner .shape {
         height: 350px;
         top: 0px;
         margin: auto;
         width: 350px;
     }

     .services-box .services-icon {
         top: -35px;
     }

     .services-box {
         margin-bottom: 15px;
         margin-top: 25px;
         padding: 0px 0px 10px 75px;
     }

     .Featurtes-box .all-h4-dark {
         margin: -20px 0 20px 0px;
         padding: 10px 20px 8px 30px;
         font-size: 20px;
     }

     .Featurtes-box-content {
         padding: 0px 15px 25px 15px;
     }

     .process-block .inner-box:before {
         display: none;
     }

     .why-choose-contnet {
         display: block;
     }

     .why-2 {
         position: relative;
         top: 0px;
     }

     .why-choose-box {
         margin-bottom: 20px;
     }

     .why-png img {
         position: unset;
         width: 100%;
         margin-top: 10px;
         transform: unset;
     }

     .faq-img {
         margin-top: 30px;
     }

     .join-comunity {
         padding: 45px 20px 40px;
     }

     .right-button {
         border: 2px dashed #ffffff;
         font-size: 14px;
         padding: 8px 15px;
         width: max-content;
     }

     .footer-links {
         gap: 25px 15px;
         flex-wrap: wrap;
         margin-bottom: 30px;
         justify-content: center;
     }

     .navbar {
         padding: 10px 0px;
     }

     .main-header {
         border-bottom: 1px solid #eeeeee38;
     }

     .about-area .section-title .all-h4-dark {
         font-size: 23px;
         line-height: 23px;
     }

     p {

         font-size: 15px;
     }

     .all-h2-dark {
         font-size: 30px;
         line-height: 30px;
     }

     .all-h4-dark {
         font-size: 23px;
         line-height: 23px;
     }

     .about-area {
         padding: 55px 0px 70px;
     }

     .services-area {
         padding: 70px 0px 70px;
     }

     .key-featurtes {
         padding: 70px 0px 70px;
     }

     .How-it-work {
         padding: 70px 0px 70px;
     }

     .why-choose-area {
         padding: 70px 0px 70px;
     }

     .Faq-area {
         padding: 70px 0px 70px;
     }

     .Community-area {
         padding: 50px 0px 50px;
     }

     .Featurtes-icon {
         top: -30px;
         right: -5px;
     }

     .Featurtes-box {
         margin: 0 5px 20px 0px;
     }

     .nav-links li {
         margin: 10px 0px;
     }

     .services-box .services-value {
         font-size: 17px;
         margin: -20px -10px 0 0;
     }

     .navbar .logo h4 {
         font-size: 20px;
         font-weight: bold;
         color: #FFF;
     }

     .btn {
         font-size: 18px;
         padding: 8px 15px 8px;
     }

     .main-header::before {
         width: 56%;
         clip-path: polygon(100% 0, 100% calc(100% - 90px), calc(100% - 40px) 100%, 0 100%, 0 0);
     }

     .about-right::before {
         width: 100%;
     }

     .about-right {
         display: block;
         padding: 15px 15px;
         margin-top: 15px;
     }

     .services-img {
         margin-top: 30px;
     }

     .features .features-img {
         width: 70px;
         top: -23px;
     }

     .features {
         padding: 45px 20px 20px 20px;
     }

     .features-1 {
         padding: 20px 20px 20px 20px;
     }

     .all-h2-light {
         font-size: 30px;
         line-height: 30px;
     }

     .tab .nav-tabs li a {
         font-size: 23px;
         line-height: 23px;
         padding: 13px 13px;
     }

     .all-h4-light {
         font-size: 23px;
         line-height: 23px;
     }

     .price-label {
         padding: 8px 20px;
     }

     .outer-box {
         padding: 10px 15px 31px;
     }

     .process-card {
         margin-top: 25px;
     }

     .process-card-area .process-line {
         display: none;
     }

     .process-content {
         /* background: #02c7a799; */
         margin-top: 0px;
         border: 1px solid #ffffff33;
     }

     .roadmap-area {
         padding: 70px 0px 70px;
     }

     .accordion-item {
         margin: 0 5px 10px 5px;
     }

     .accordion-body {
         margin: 3px 0px;
     }

     .contact-area {
         padding: 70px 0px 70px;
     }

     .contact-form-area {
         padding: 20px 15px 20px 15px;
     }

     textarea {
         height: 120px !important;
         margin: 0 0 20px;
     }

     .form-content {
         position: relative;
         margin-bottom: 10px;
     }

     .copy-right-text {
         margin-top: 30px;
     }

     #conference-timeline .timeline-start,
     #conference-timeline .timeline-end {
         font-size: 18px;
         padding: 5px 15px;
     }

     .timeline-article .meta-date img {
         width: 40px;
     }

     #conference-timeline .timeline-start,
     #conference-timeline .timeline-end {
         margin: 0;
     }

     #conference-timeline .conference-center-line {
         margin-left: 0;
         left: 5px;
     }

     .timeline-article .meta-date {
         display: none;
     }

     .timeline-article .content-left-container,
     .timeline-article .content-right-container {
         max-width: 100%;
         width: auto;
         float: none;
         margin-left: 20px;
         min-height: 53px;
     }

     .timeline-article .content-left-container {
         margin-bottom: 10px;
     }

     .timeline-article .content-left,
     .timeline-article .content-right {
         padding: 10px 25px;
         min-height: 65px;
     }

     .timeline-article .content-left:before {
         content: "\f0d9";
         right: auto;
         left: -12px;
     }

     .timeline-article .content-right:before {
         left: -12px;
     }

     .timeline-article p {
         margin: 0;
     }

     .timeline-article p span.article-number {
         left: -60px;
     }

     .all-content {
         margin: 0 0 0 48px;
     }

     .timeline-article {
         margin: 10px 0;
     }

     #conference-timeline .conference-timeline-content {
         padding-top: 10px;
         padding-bottom: 10px;
     }

     .nav-links a {
         color: var(--dark-color);
     }
 }