@media (max-width:1400px){
  :root {
    --text-regular: 16px;
    --text-big: 60px;
    --text-medium: 40px;
    --text-small: 20px;
    --button-font-size: 16px;
    --rounded: 10px;
  }

  /*===================
  SECTIONS
  ===================*/

  /*HERO SECTION*/
  /*APP SECTION*/
  .container-medium {
    width: 80%;
  }
  /*DATA APP SECTION*/
  .blured-box {
    height: 270px;
  }
  .blured-box p {
    font-size: 14px;
  }
  .chart-title {
    width: 70%;
  }
  .chat-score {
    width: 30%;
  }
  .chart-title h3, .chat-score h4 {
    font-size: 35px;
  }
  /*PROVIDERS SECTION*/
  .providers-slider .swiper-slide h3 {
    font-size: 24px;
  }
}
@media (max-width:1280px){
  :root {
    --text-regular: 16px;
    --text-big: 60px;
    --text-medium:40px;
    --button-font-size: 16px;
    --rounded: 10px;
  }

  /*===================
  SECTIONS
  ===================*/

  /*HERO SECTION*/

  /*ABOUT APP SECTION*/
  .flex-grid {
    justify-content: center;
    gap: 5%;
  }
  .flex-grid .col-3 {
    width: 40%;
  }
  .flex-grid .col-6 {
    width: 50%;
    order: 5;
  }

  /*DATA APP*/

  .data-app .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
  }
  .data-app .grid .col-4 {
    width: 49%;
  }
  .data-app .grid .col-4:nth-child(2) {
    margin-left: 2%;
  }
  .data-app .grid .col-4:nth-child(3) {
    align-self: center;
  }
  .blured-box {
    height: 260px;
    margin-bottom: 20px;
  }
  .chart-title h3, .chat-score h4 {
    font-size: 40px;
  }
  .chat-score p {
    font-size: 16px;
  }

  /*HOW IT WORKS SECTION*/

  .how-works-app .container-medium {
    width: 90%;
  }

  /*INFO APP SECTION*/

  .info-app .container-medium {
    width: 90%;
  }

  /*DOWLOAD APP SECTION*/

  .download-app .container-small {
    width: 90%;
  }
  .download-app-bg-1, .download-app-bg-2 {
    background-size: 100% auto;
  }

  /*FAQS SECTION*/

  .faqs .grid .col-12 {
    grid-column:span 12;
  }
  .faq-container {
    width: 90%
  }

  /*COMMUNITY SECTION*/

  .community .container-medium {
    width: 80%;
  }
  .community .grid .col-12 {
    grid-column:span 12;
  }

  /*FOOTER*/

  footer .grid .col-5, footer .grid .col-2 {
    grid-column:span 3;
  }
  .copy {
    text-align: center;
    margin-top: 40px;
  }
}

@media (max-width:899px){
  :root {
    --text-regular: 18px;
    --text-big: 60px;
    --text-medium:40px;
    --button-font-size: 16px;
    --rounded: 10px;
  }

  .container-medium, .container-small {
    width: 80%;
  }

  /*HEADER + STICKY*/
  .menu-col h3 {
    font-size: 30px;
  }
  .menu-col a {
    font-size: 20px;
  }
  .mega-grid {
    grid-template-columns: 1fr 1fr;
  }

  /*TABS*/
  .tabs-nav{
    overflow-x:auto;
    flex-wrap:nowrap;
  }
  .tab-btn{
    white-space:nowrap;
  }
  .tab-panel .grid {
    gap: 30px;
  }

  /*=================
  SECTIONS
  ===================*/

  .hero .grid .col-12 {
    grid-column:span 12;
  }

  /*APP SECTION*/
  .app .grid .col-12 {
    grid-column:span 12;
  }
  .flex-grid {
    justify-content: space-between;
  }
  .flex-grid .col-3 {
    width: 47%;
  }
  .flex-grid .col-6 {
    width: 100%;
    order: 5;
  }
  .info-app .container-medium {
    width: 95%;
  }
  .info-app .grid .col-12 {
    grid-column:span 12;
  }
  .info-app .grid .col-4 {
    grid-column:span 12;
  }
  /*HOW IT WORKS SECTION*/

  .how-works-app .grid .col-4, .how-works-app .grid .col-12 {
    grid-column:span 12;
  }
  .how-works-app .container-medium {
    width: 70%;
  }
  .download-app-bg-animation .download-app-bg-1, .download-app-bg-animation .download-app-bg-2 {
    background: url('../img/arrows-mobile.webp') no-repeat center center;
    background-size: 100% auto;
  }

  /*DATA APP*/
  .data-app .grid .col-4 {
    grid-column:span 12;
  }
  .download-app .grid .col-12 {
    grid-column:span 12;
  }
  .blured-box {
    height: 280px;
  }

  /*PROVIDERS*/
  .providers .grid .col-12 {
    grid-column:span 12;
  }

  /*FAQS*/
  .faqs .grid .col-12 {
    grid-column:span 12;
  }
  .faq-container {
    width: 100%;
  }

  /*COMMUNITY*/
  .community .grid .col-12 {
    grid-column:span 12;
  }

  /*FOOTER*/
  footer h4 {
    font-size: 30px;
  }
  footer li a {
    font-size: 20px;
  }
  footer .grid .col-5 {
    grid-column:span 12;
  }
  footer .grid .col-2:nth-child(2), footer .grid .col-2:nth-child(3) {
    grid-column:span 6;
  }
  footer .grid .col-2:nth-child(4) {
    grid-column:span 12;
    text-align: center;
  }
  .footer-logo {
    width: 100%;
  }
  footer p {
    text-align: center;
  }
}

@media (max-width:640px) {
  :root {
    --text-regular: 14px;
    --text-big: 40px;
    --text-medium:40px;
    --button-font-size: 16px;
    --rounded: 10px;
  }
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 30px;
  }
  .header-actions .button i {
    display: block;
  }
  .header-actions .button span {
    display: none;
  }
  .header-actions .button {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .logo svg {
    height: 30px;
  }
  .container, .container-medium, .container-small {
    width: 90%;
  }

  /*MENU*/
  .mega-grid {
    padding: 20px;
    grid-template-columns: 1fr;
  }
  .menu-col {
    text-align: center;
  }
  .menu-col h3 {
    font-size: 25px;
  }
  .menu-col a {
    font-size: 25px;
  }

  /* panel base */
  .tab-panel {
    text-align: center;
  }
  .tab-panel .grid .col-6 {
    grid-column:span 12;
  }
  .tab-panel .grid {
    gap:0;
    align-items: center;
  }
  .p-40 {
    padding: 20px;
  }
  .ptb-80 {
    padding: 40px 0;
  }

  /*=================
  SECTIONS
  ===================*/

  /*HERO SECTION*/
  .hero-title {
    font-size: 60px;
  }
  .logo-item {
    margin: 0 20px;
  }
  .logo-item img {
    max-width: 60px;
    max-height: 30px;
  }

  /*APP SECTION*/
  .about-app {
    padding: 20px 20px 0 20px;
    margin-top: 0;
  }
  .flex-grid .col-3 {
    width: 100%;
  }
  .flex-grid .col-6 {
    width: 100%;
    order: 5;
  }

  /*DATA APP*/
  .data-app .grid .col-4 {
    width: 100%;
  }
  .data-app .grid .col-4:nth-child(2) {
    margin-left: 0;
  }
  .blured-box {
    height: 200px;
  }
  .blured-box-content {
    padding: 10px;
  }
  .chart-title {
    width: 70%;
  }
  .chat-score {
    width: 30%;
  }
  .chart-title h3 {
    font-size: 30px;
  }
  .chat-score h4 {
    font-size: 40px;
  }
  .chat-score p {
    font-size: 12px;
  }
  .chart-bar-line p {
    font-size: 12px;
  }
  .bar {
    height: 10px;
  }

  /*PROVIDERS SECTION*/

  .providers-slider {
    text-align: center;
  }
  .providers-slider .swiper-slide h3 {
    font-size: 40px;
  }

  /*FAQS*/

  .faq-container {
    width: 100%;
  }
  .faq-header {
    padding: 40px 20px;
  }
  .faq-list {
    padding: 10px;
  }
  .results-info {
    padding: 20px 10px;
  }
  .search-box input {
    padding: 20px 60px 20px 50px
  }
  .search-box .button {
    width: 45px;
    height: 45px;
  }
  .contact-section {
    padding: 10px;
  }

  /*===========================
  FOOTER
  ===========================*/

  footer {
    text-align: center;
  }
  footer h4 {
    font-size: 20px;
  }
  footer li a {
    font-size: 20px;
  }
  footer .container .grid .col-5, footer .container .grid .col-2 {
    grid-column:span 12;
  }
  .footer-logo {
    width: 100%;
  }
}