@media (max-width:900px){
  .mega-grid{
    grid-template-columns:1fr;
  }
  .mega-menu{
    max-height:calc(100vh - 70px);
  }
  .menu-image{
    display:none;
  }
  .header-grid{
    grid-template-columns:auto auto auto;
  }
  .col-1, .col-2, .col-3, .col-4, .col-5 .col-6{
    grid-column:span 6;
  }
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
    grid-column:span 6;
  }
}

@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;
  }
  .about-app .flex-grid {
  }
  .flex-grid {
    justify-content: space-between;
  }
  .flex-grid .col-3 {
    width: 48%;
  }
  .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;
  }
  /*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:600px) {
  :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*/
  .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;
  }

  /*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%;
  }
}