Merge branch 'main' of https://git.popcode.com.br/RiseUP/riseup-squad23

src/assets/scss/components/_responsive.scss

@@ -0,0 +1,271 @@
+/* Utilitários responsivos para melhorar a experiência em diferentes dispositivos */
+
+/* Breakpoints personalizados */
+$mobile: 576px;
+$tablet: 768px;
+$desktop-small: 992px;
+$desktop: 1200px;
+$desktop-large: 1400px;
+
+/* Utilitários de texto responsivo */
+.text-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    font-size: 0.9rem !important;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    font-size: 0.85rem !important;
+  }
+}
+
+.heading-responsive {
+  @media screen and (max-width: $desktop - 1) {
+    font-size: 1.5rem !important;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    font-size: 1.3rem !important;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    font-size: 1.1rem !important;
+  }
+}
+
+/* Cards responsivos */
+.card-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    margin-bottom: 1rem;
+  }
+  
+  .card-body {
+    @media screen and (max-width: $tablet - 1) {
+      padding: 1rem;
+    }
+    
+    @media screen and (max-width: $mobile - 1) {
+      padding: 0.75rem;
+    }
+  }
+}
+
+/* Botões responsivos */
+.btn-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    padding: 0.6rem 1.2rem;
+    font-size: 0.85rem;
+    width: 100%;
+    max-width: 200px;
+  }
+}
+
+/* Tabelas responsivas */
+.table-responsive-custom {
+  @media screen and (max-width: $desktop - 1) {
+    font-size: 0.9rem;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    font-size: 0.8rem;
+    
+    th, td {
+      padding: 0.5rem !important;
+    }
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    font-size: 0.75rem;
+    
+    th, td {
+      padding: 0.3rem !important;
+    }
+  }
+}
+
+/* Formulários responsivos */
+.form-responsive {
+  .form-control {
+    @media screen and (max-width: $tablet - 1) {
+      font-size: 0.9rem;
+      padding: 0.5rem 0.75rem;
+    }
+    
+    @media screen and (max-width: $mobile - 1) {
+      font-size: 0.85rem;
+      padding: 0.6rem 0.8rem;
+    }
+  }
+  
+  .form-label {
+    @media screen and (max-width: $tablet - 1) {
+      font-size: 0.9rem;
+      margin-bottom: 0.3rem;
+    }
+    
+    @media screen and (max-width: $mobile - 1) {
+      font-size: 0.85rem;
+      margin-bottom: 0.25rem;
+    }
+  }
+}
+
+/* Navegação responsiva */
+.nav-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    .nav-link {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.9rem;
+    }
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    .nav-link {
+      padding: 0.6rem 0.8rem;
+      font-size: 0.85rem;
+    }
+  }
+}
+
+/* Modais responsivos */
+.modal-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    .modal-dialog {
+      margin: 1rem;
+      max-width: calc(100% - 2rem);
+    }
+    
+    .modal-header {
+      padding: 1rem;
+      
+      .modal-title {
+        font-size: 1.1rem;
+      }
+    }
+    
+    .modal-body {
+      padding: 1rem;
+      font-size: 0.9rem;
+    }
+    
+    .modal-footer {
+      padding: 0.75rem 1rem;
+    }
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    .modal-dialog {
+      margin: 0.5rem;
+      max-width: calc(100% - 1rem);
+    }
+    
+    .modal-header {
+      padding: 0.75rem;
+      
+      .modal-title {
+        font-size: 1rem;
+      }
+    }
+    
+    .modal-body {
+      padding: 0.75rem;
+      font-size: 0.85rem;
+    }
+    
+    .modal-footer {
+      padding: 0.5rem 0.75rem;
+    }
+  }
+}
+
+/* Utilitários de espaçamento responsivo */
+.spacing-responsive {
+  @media screen and (max-width: $desktop - 1) {
+    margin: 1.5rem 0 !important;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    margin: 1rem 0 !important;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    margin: 0.75rem 0 !important;
+  }
+}
+
+/* Container responsivo personalizado */
+.container-responsive {
+  @media screen and (min-width: $desktop-large) {
+    max-width: 1320px;
+  }
+  
+  @media screen and (min-width: $desktop) and (max-width: $desktop-large - 1) {
+    max-width: 1140px;
+  }
+  
+  @media screen and (min-width: $desktop-small) and (max-width: $desktop - 1) {
+    max-width: 960px;
+  }
+  
+  @media screen and (min-width: $tablet) and (max-width: $desktop-small - 1) {
+    max-width: 720px;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    padding: 0 1rem;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    padding: 0 0.5rem;
+  }
+}
+
+/* Ocultar/mostrar elementos por breakpoint */
+.hide-mobile {
+  @media screen and (max-width: $tablet - 1) {
+    display: none !important;
+  }
+}
+
+.hide-tablet {
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    display: none !important;
+  }
+}
+
+.hide-desktop {
+  @media screen and (min-width: $desktop) {
+    display: none !important;
+  }
+}
+
+.show-mobile-only {
+  display: none !important;
+  
+  @media screen and (max-width: $tablet - 1) {
+    display: block !important;
+  }
+}
+
+.show-tablet-only {
+  display: none !important;
+  
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    display: block !important;
+  }
+}
+
+/* Ajustes específicos para touch devices */
+@media (hover: none) and (pointer: coarse) {
+  .btn, .sidebar-link, .nav-link {
+    min-height: 44px; /* Tamanho mínimo recomendado para touch */
+  }
+  
+  .form-control {
+    min-height: 44px;
+  }
+}

src/assets/scss/components/_sidebar.scss

@@ -1,9 +1,10 @@
-@mixin sidebar-active {
+@mixin sidebar-active($sidebar-width: 300px) {
     .sidebar-wrapper {
         left: 0;
+        width: $sidebar-width;
     }
     & ~ #main {
-        margin-left: 300px;
+        margin-left: $sidebar-width;
     }
 }
 @mixin sidebar-inactive {
@@ -18,8 +19,36 @@
 #sidebar {
     @include sidebar-inactive();
 
-    @media screen and (min-width: 1200px) {
+    // Desktop grande (1920px+)
-        @include sidebar-active();
+    @media screen and (min-width: 1400px) {
+        @include sidebar-active(300px);
+    }
+
+    // Desktop padrão (1200px-1399px)
+    @media screen and (min-width: 1200px) and (max-width: 1399px) {
+        @include sidebar-active(280px);
+    }
+
+    // Tablet grande (992px-1199px)
+    @media screen and (min-width: 992px) and (max-width: 1199px) {
+        @include sidebar-active(260px);
+    }
+
+    // Tablet (768px-991px) - sidebar colapsada por padrão
+    @media screen and (min-width: 768px) and (max-width: 991px) {
+        @include sidebar-inactive();
+
+        &.active {
+            .sidebar-wrapper {
+                left: 0;
+                width: 280px;
+                z-index: 1050;
+                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            }
+            & ~ #main {
+                margin-left: 0;
+            }
+        }
     }
 
     &.inactive {
@@ -42,14 +71,44 @@
     overflow-y: auto;
     background-color: $sidebar-bg;
     bottom: 0;
-    transition: left .7s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: left .7s cubic-bezier(0.22, 1, 0.36, 1), width .3s ease;
+
+    // Responsividade da largura
+    @media screen and (min-width: 1200px) and (max-width: 1399px) {
+        width: 280px;
+    }
+
+    @media screen and (min-width: 992px) and (max-width: 1199px) {
+        width: 260px;
+    }
+
+    @media screen and (max-width: 991px) {
+        width: 280px;
+        z-index: 1050;
+    }
+
     .sidebar-header {
-        padding: 2rem 2rem 1rem;
+        padding: 2rem 1.5rem 1rem;
-        font-size: 2rem;
+        font-size: 1.8rem;
         font-weight: bold;
 
+        // Responsividade do header
+        @media screen and (max-width: 1199px) {
+            padding: 1.5rem 1rem 0.5rem;
+            font-size: 1.6rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            padding: 1rem 1rem 0.5rem;
+            font-size: 1.4rem;
+        }
+
         img {
             height: 1.2rem;
+
+            @media screen and (max-width: 767px) {
+                height: 1rem;
+            }
         }
     }
     .sidebar-toggler.x {
@@ -57,6 +116,11 @@
         right: 1.75rem;
         top: .25rem;
         display: none;
+
+        @media screen and (max-width: 991px) {
+            right: 1rem;
+            top: 0.5rem;
+        }
     }
 
     .menu {
@@ -64,6 +128,18 @@
         margin-top: 2rem;
         padding: 0 2rem;
         font-weight: 600;
+
+        // Responsividade do menu
+        @media screen and (max-width: 1199px) {
+            padding: 0 1.5rem;
+            margin-top: 1.5rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            padding: 0 1rem;
+            margin-top: 1rem;
+        }
+
         .sidebar-title {
             padding: 0 1rem;
             margin: 1.5rem 0 1rem;
@@ -71,6 +147,18 @@
             list-style: none;
             font-weight: 600;
             color:  $sidebar-link-color;
+
+            @media screen and (max-width: 1199px) {
+                margin: 1rem 0 0.5rem;
+                font-size: 0.9rem;
+                padding: 0 0.5rem;
+            }
+
+            @media screen and (max-width: 767px) {
+                margin: 0.8rem 0 0.4rem;
+                font-size: 0.85rem;
+                padding: 0 0.3rem;
+            }
         }
 
         .sidebar-link {
@@ -83,14 +171,39 @@
             transition: all .5s;
             text-decoration: none;
             color: $sidebar-link-color;
+
+            // Responsividade dos links
+            @media screen and (max-width: 1199px) {
+                padding: 0.6rem 0.8rem;
+                font-size: 0.9rem;
+            }
+
+            @media screen and (max-width: 767px) {
+                padding: 0.8rem 0.6rem;
+                font-size: 0.85rem;
+            }
+
             svg,i {
                 color:#7c8db5;
+                flex-shrink: 0;
+
+                @media screen and (max-width: 767px) {
+                    font-size: 1.1em;
+                }
             }
             i:before {
                 vertical-align: top;
             }
             span {
                 margin-left: 1rem;
+
+                @media screen and (max-width: 1199px) {
+                    margin-left: 0.8rem;
+                }
+
+                @media screen and (max-width: 767px) {
+                    margin-left: 0.6rem;
+                }
             }
             &:hover {
                 background-color: $sidebar-link-hover-bg;
@@ -192,6 +305,7 @@
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 9;
 }
+// Media queries para diferentes dispositivos
 @media screen and (max-width: 1199px) {
     .sidebar-wrapper {
         position: fixed;
@@ -201,6 +315,70 @@
         }
     }
 }
+
+// Tablet específico
+@media screen and (min-width: 768px) and (max-width: 991px) {
+    .sidebar-wrapper {
+        left: -280px;
+
+        .menu {
+            .sidebar-link {
+                padding: 0.7rem 0.8rem;
+            }
+        }
+    }
+
+    #sidebar.active ~ #main {
+        margin-left: 0 !important;
+    }
+}
+
+// Mobile específico
+@media screen and (max-width: 767px) {
+    .sidebar-wrapper {
+        left: -280px;
+        width: 280px !important;
+
+        .sidebar-header {
+            .logo h1 {
+                font-size: 1.3rem;
+            }
+        }
+
+        .menu {
+            .sidebar-link {
+                padding: 0.9rem 0.7rem;
+
+                span {
+                    font-size: 0.9rem;
+                }
+            }
+
+            .submenu {
+                .submenu-item a {
+                    padding: 0.6rem 1.5rem;
+                    font-size: 0.8rem;
+                }
+            }
+        }
+    }
+
+    #sidebar.active ~ #main {
+        margin-left: 0 !important;
+    }
+
+    // Backdrop para mobile
+    #sidebar.active::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1040;
+    }
+}
 @keyframes slideDown {
     from {
         max-height: 0;

src/assets/scss/components/_tables-responsive.scss

@@ -0,0 +1,338 @@
+/* Melhorias de responsividade para tabelas e componentes de dados */
+
+/* Tabelas responsivas melhoradas */
+.table-responsive-enhanced {
+  @media screen and (max-width: 1199px) {
+    font-size: 0.9rem;
+    
+    th, td {
+      padding: 0.6rem 0.5rem !important;
+    }
+  }
+  
+  @media screen and (max-width: 991px) {
+    font-size: 0.85rem;
+    
+    th, td {
+      padding: 0.5rem 0.4rem !important;
+    }
+    
+    /* Ocultar colunas menos importantes em tablet */
+    .hide-tablet {
+      display: none !important;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    font-size: 0.8rem;
+    
+    th, td {
+      padding: 0.4rem 0.3rem !important;
+    }
+    
+    /* Ocultar mais colunas em mobile */
+    .hide-mobile {
+      display: none !important;
+    }
+    
+    /* Estilo de card para mobile */
+    &.table-card-mobile {
+      thead {
+        display: none;
+      }
+      
+      tbody tr {
+        display: block;
+        border: 1px solid #dee2e6;
+        border-radius: 0.375rem;
+        margin-bottom: 1rem;
+        padding: 0.75rem;
+        background: white;
+        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+      }
+      
+      tbody td {
+        display: block;
+        border: none;
+        padding: 0.25rem 0 !important;
+        text-align: left !important;
+        
+        &:before {
+          content: attr(data-label) ": ";
+          font-weight: bold;
+          color: #495057;
+        }
+        
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    font-size: 0.75rem;
+    
+    th, td {
+      padding: 0.3rem 0.2rem !important;
+    }
+  }
+}
+
+/* Cards responsivos para dados */
+.data-card-responsive {
+  @media screen and (max-width: 991px) {
+    margin-bottom: 1rem;
+    
+    .card-header {
+      padding: 0.75rem 1rem;
+      
+      h5, h6 {
+        font-size: 1rem;
+        margin-bottom: 0;
+      }
+    }
+    
+    .card-body {
+      padding: 1rem;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    .card-header {
+      padding: 0.5rem 0.75rem;
+      
+      h5, h6 {
+        font-size: 0.9rem;
+      }
+    }
+    
+    .card-body {
+      padding: 0.75rem;
+      font-size: 0.9rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    .card-header {
+      padding: 0.5rem;
+      
+      h5, h6 {
+        font-size: 0.85rem;
+      }
+    }
+    
+    .card-body {
+      padding: 0.5rem;
+      font-size: 0.85rem;
+    }
+  }
+}
+
+/* Paginação responsiva */
+.pagination-responsive {
+  @media screen and (max-width: 767px) {
+    .page-item {
+      &:not(.active):not(.disabled) {
+        &:nth-child(n+4):nth-last-child(n+4) {
+          display: none;
+        }
+      }
+    }
+    
+    .page-link {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.875rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    justify-content: center;
+    
+    .page-item {
+      &:not(.active):not(.disabled) {
+        &:nth-child(n+3):nth-last-child(n+3) {
+          display: none;
+        }
+      }
+    }
+    
+    .page-link {
+      padding: 0.4rem 0.6rem;
+      font-size: 0.8rem;
+    }
+  }
+}
+
+/* Filtros e controles responsivos */
+.filters-responsive {
+  @media screen and (max-width: 991px) {
+    .row {
+      margin-bottom: 1rem;
+    }
+    
+    .col-md-3, .col-md-4, .col-md-6 {
+      margin-bottom: 0.5rem;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    .form-control, .form-select {
+      font-size: 0.9rem;
+      padding: 0.5rem 0.75rem;
+    }
+    
+    .btn {
+      font-size: 0.9rem;
+      padding: 0.5rem 1rem;
+      width: 100%;
+      margin-bottom: 0.5rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    .form-control, .form-select {
+      font-size: 0.85rem;
+      padding: 0.6rem 0.8rem;
+    }
+    
+    .btn {
+      font-size: 0.85rem;
+      padding: 0.6rem 1rem;
+    }
+  }
+}
+
+/* Stats cards responsivos */
+.stats-card-responsive {
+  @media screen and (max-width: 1199px) {
+    .card-body {
+      padding: 1.25rem 1rem;
+    }
+    
+    h3, h4 {
+      font-size: 1.5rem;
+    }
+    
+    .stats-icon {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+  
+  @media screen and (max-width: 991px) {
+    margin-bottom: 1rem;
+    
+    .card-body {
+      padding: 1rem 0.75rem;
+    }
+    
+    h3, h4 {
+      font-size: 1.3rem;
+    }
+    
+    .stats-icon {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    .card-body {
+      padding: 0.75rem;
+      text-align: center;
+    }
+    
+    h3, h4 {
+      font-size: 1.2rem;
+    }
+    
+    .stats-icon {
+      width: 2rem;
+      height: 2rem;
+      margin: 0 auto 0.5rem;
+    }
+    
+    p, small {
+      font-size: 0.85rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    .card-body {
+      padding: 0.5rem;
+    }
+    
+    h3, h4 {
+      font-size: 1.1rem;
+    }
+    
+    .stats-icon {
+      width: 1.8rem;
+      height: 1.8rem;
+    }
+    
+    p, small {
+      font-size: 0.8rem;
+    }
+  }
+}
+
+/* Breadcrumb responsivo */
+.breadcrumb-responsive {
+  @media screen and (max-width: 767px) {
+    font-size: 0.85rem;
+    padding: 0.5rem 0;
+    
+    .breadcrumb-item {
+      &:not(:last-child) {
+        &:nth-child(n+2):nth-last-child(n+2) {
+          display: none;
+        }
+        
+        &:nth-last-child(2):before {
+          content: "... / ";
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    font-size: 0.8rem;
+    
+    .breadcrumb-item {
+      &:not(:last-child):not(:first-child) {
+        display: none;
+      }
+      
+      &:first-child:not(:last-child):after {
+        content: " / ...";
+      }
+    }
+  }
+}
+
+/* Alertas responsivos */
+.alert-responsive {
+  @media screen and (max-width: 767px) {
+    padding: 0.75rem;
+    font-size: 0.9rem;
+    
+    .alert-heading {
+      font-size: 1.1rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    padding: 0.5rem;
+    font-size: 0.85rem;
+    
+    .alert-heading {
+      font-size: 1rem;
+    }
+    
+    .btn-close {
+      padding: 0.25rem;
+    }
+  }
+}

src/assets/scss/layouts/main.scss

@@ -2,12 +2,41 @@
     margin-left: 300px;
     padding: 2rem;
     min-height: 100vh;
-    @media screen and (max-width: 1199px) {
+    transition: margin-left .7s cubic-bezier(0.22, 1, 0.36, 1);
-        margin-left: 0;
+
+    // Responsividade do layout principal
+    @media screen and (min-width: 1400px) {
+        margin-left: 300px;
+        padding: 2rem;
     }
+
+    @media screen and (min-width: 1200px) and (max-width: 1399px) {
+        margin-left: 280px;
+        padding: 1.5rem;
+    }
+
+    @media screen and (min-width: 992px) and (max-width: 1199px) {
+        margin-left: 260px;
+        padding: 1.5rem;
+    }
+
+    @media screen and (min-width: 768px) and (max-width: 991px) {
+        margin-left: 0;
+        padding: 1rem;
+    }
+
+    @media screen and (max-width: 767px) {
+        margin-left: 0;
+        padding: 1rem 0.5rem;
+    }
+
     &.layout-navbar {
         padding: 0;
-        transition: margin-left  .7s  cubic-bezier(0.22, 1, 0.36, 1)
+        transition: margin-left .7s cubic-bezier(0.22, 1, 0.36, 1);
+
+        @media screen and (max-width: 767px) {
+            padding: 0;
+        }
     }
     &.layout-horizontal {
         padding: 0;
@@ -15,6 +44,14 @@
     }
     #main-content {
         padding: 2rem;
+
+        @media screen and (max-width: 1199px) {
+            padding: 1.5rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            padding: 1rem;
+        }
     }
 }
 #main, #main-content {
@@ -26,8 +63,25 @@
 }
 .page-heading {
     margin: 0 0 2rem;
+
+    @media screen and (max-width: 1199px) {
+        margin: 0 0 1.5rem;
+    }
+
+    @media screen and (max-width: 767px) {
+        margin: 0 0 1rem;
+    }
+
     h3 {
         font-weight: bold;
+
+        @media screen and (max-width: 1199px) {
+            font-size: 1.5rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            font-size: 1.3rem;
+        }
     }
 }
 .page-title-headings {
@@ -35,12 +89,28 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: .5rem;
+
+    @media screen and (max-width: 767px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
     h3 {
         margin-bottom: 0;
         margin-right: 1rem;
+
+        @media screen and (max-width: 767px) {
+            margin-right: 0;
+            font-size: 1.2rem;
+        }
     }
     .breadcrumb {
         margin-bottom: 0;
+
+        @media screen and (max-width: 767px) {
+            font-size: 0.85rem;
+        }
     }
 }
 a {

src/assets/scss/main.scss

@@ -38,6 +38,8 @@
 @import 'components/progress';
 @import 'components/sidebar';
 @import 'components/table';
+@import 'components/responsive';
+@import 'components/tables-responsive';
 
 // Layout (se tiver arquivos, mas você mencionou que só tem main.scss aqui)
 @import 'layouts/main';

src/assets/scss/pages/auth.scss

@@ -31,12 +31,59 @@ body {
         }
         @media screen and (max-width: 1399.9px) {
             padding: 3rem;
+
+            .auth-title {
+                font-size: 3rem;
+            }
+            .auth-subtitle {
+                font-size: 1.4rem;
+                line-height: 2rem;
+            }
+            .auth-logo {
+                margin-bottom: 5rem;
+            }
+        }
+        @media screen and (max-width: 991px) {
+            padding: 2.5rem;
+
+            .auth-title {
+                font-size: 2.5rem;
+            }
+            .auth-subtitle {
+                font-size: 1.2rem;
+                line-height: 1.8rem;
+            }
+            .auth-logo {
+                margin-bottom: 3rem;
+            }
         }
         @media screen and (max-width: 767px) {
-            padding: 5rem ;
+            padding: 2rem;
+
+            .auth-title {
+                font-size: 2rem;
+            }
+            .auth-subtitle {
+                font-size: 1rem;
+                line-height: 1.5rem;
+            }
+            .auth-logo {
+                margin-bottom: 2rem;
+            }
         }
         @media screen and (max-width: 576px) {
-            padding: 5rem 3rem;
+            padding: 1.5rem 1rem;
+
+            .auth-title {
+                font-size: 1.8rem;
+            }
+            .auth-subtitle {
+                font-size: 0.9rem;
+                line-height: 1.4rem;
+            }
+            .auth-logo {
+                margin-bottom: 1.5rem;
+            }
         }
     }
 }
@@ -61,3 +108,60 @@ html[data-bs-theme="dark"] {
         }
     }
 }
+
+/* Melhorias específicas para responsividade do login */
+.card-position {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 1rem;
+
+    @media screen and (max-width: 768px) {
+        padding: 0.5rem;
+        align-items: flex-start;
+        padding-top: 2rem;
+    }
+
+    @media screen and (max-width: 576px) {
+        padding: 0.25rem;
+        padding-top: 1rem;
+    }
+
+    .card {
+        width: 100%;
+        max-width: 500px;
+
+        @media screen and (max-width: 576px) {
+            margin: 0;
+            border-radius: 0.5rem;
+        }
+    }
+}
+
+/* Melhorias para formulários de autenticação */
+.form-control-xl {
+    @media screen and (max-width: 768px) {
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+    }
+
+    @media screen and (max-width: 576px) {
+        padding: 0.8rem 1rem;
+        font-size: 0.9rem;
+    }
+}
+
+.btn-block {
+    @media screen and (max-width: 576px) {
+        padding: 0.8rem 1rem;
+        font-size: 1rem;
+    }
+}
+
+/* Ajustes para ícones em campos de formulário */
+.form-control-icon {
+    @media screen and (max-width: 576px) {
+        left: 0.8rem;
+    }
+}

src/components/MobileMenuToggle.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+const MobileMenuToggle = ({ isOpen, onToggle, className = '' }) => {
+  return (
+    <button
+      type="button"
+      className={`mobile-menu-toggle btn btn-outline-primary d-lg-none ${className}`}
+      onClick={onToggle}
+      aria-label={isOpen ? 'Fechar menu' : 'Abrir menu'}
+      aria-expanded={isOpen}
+      style={{
+        position: 'fixed',
+        top: '1rem',
+        left: '1rem',
+        zIndex: 1060,
+        width: '3rem',
+        height: '3rem',
+        padding: 0,
+        border: '2px solid #435ebe',
+        borderRadius: '0.375rem',
+        backgroundColor: 'white',
+        boxShadow: '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'all 0.3s ease'
+      }}
+    >
+      <div 
+        className="hamburger-icon"
+        style={{
+          width: '1.5rem',
+          height: '1.2rem',
+          position: 'relative',
+          transform: isOpen ? 'rotate(45deg)' : 'none',
+          transition: 'transform 0.3s ease'
+        }}
+      >
+        <span
+          style={{
+            display: 'block',
+            position: 'absolute',
+            height: '2px',
+            width: '100%',
+            backgroundColor: '#435ebe',
+            borderRadius: '1px',
+            opacity: isOpen ? 0 : 1,
+            left: 0,
+            top: '0.25rem',
+            transition: 'all 0.3s ease'
+          }}
+        />
+        <span
+          style={{
+            display: 'block',
+            position: 'absolute',
+            height: '2px',
+            width: '100%',
+            backgroundColor: '#435ebe',
+            borderRadius: '1px',
+            left: 0,
+            top: '0.5rem',
+            transform: isOpen ? 'rotate(90deg)' : 'none',
+            transition: 'all 0.3s ease'
+          }}
+        />
+        <span
+          style={{
+            display: 'block',
+            position: 'absolute',
+            height: '2px',
+            width: '100%',
+            backgroundColor: '#435ebe',
+            borderRadius: '1px',
+            opacity: isOpen ? 0 : 1,
+            left: 0,
+            top: '0.75rem',
+            transition: 'all 0.3s ease'
+          }}
+        />
+      </div>
+    </button>
+  );
+};
+
+export default MobileMenuToggle;

src/components/Sidebar.jsx

@@ -1,101 +1,95 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import menuItems from "../data/sidebar-items-medico.json";
 import TrocardePerfis from "./TrocardePerfis";
+import MobileMenuToggle from "./MobileMenuToggle";
 
 function Sidebar({ menuItems }) {
   const [isActive, setIsActive] = useState(true);
   const [openSubmenu, setOpenSubmenu] = useState(null);
+  const [isMobile, setIsMobile] = useState(false);
   const [showLogoutModal, setShowLogoutModal] = useState(false);
   const navigate = useNavigate();
 
-    const toggleSidebar = () => {
+  // Detecta se é mobile/tablet
-        setIsActive(!isActive);
+  useEffect(() => {
+    const checkScreenSize = () => {
+      const mobile = window.innerWidth < 992;
+      setIsMobile(mobile);
+      setIsActive(!mobile);
     };
 
-    const handleSubmenuClick = (submenuName) => {
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  const toggleSidebar = () => setIsActive(!isActive);
+  const handleSubmenuClick = (submenuName) =>
     setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
-    };
 
-    const handleLogoutClick = () => {
+  const handleLogoutClick = () => setShowLogoutModal(true);
-        setShowLogoutModal(true);
-    };
 
   const handleLogoutConfirm = async () => {
     try {
-            const token = localStorage.getItem('token') ||
+      const token =
-                localStorage.getItem('authToken') ||
+        localStorage.getItem("token") ||
-                localStorage.getItem('userToken') ||
+        localStorage.getItem("authToken") ||
-                localStorage.getItem('access_token') ||
+        localStorage.getItem("userToken") ||
-                sessionStorage.getItem('token') ||
+        localStorage.getItem("access_token") ||
-                sessionStorage.getItem('authToken');
+        sessionStorage.getItem("token") ||
+        sessionStorage.getItem("authToken");
 
       if (token) {
-                const response = await fetch('https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout', {
+        const response = await fetch(
-                    method: 'POST',
+          "https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout",
+          {
+            method: "POST",
             headers: {
-                        'Content-Type': 'application/json',
+              "Content-Type": "application/json",
-                        'Authorization': `Bearer ${token}`
+              Authorization: `Bearer ${token}`,
+            },
           }
-                });
+        );
 
-                if (response.status === 204) {
+        if (response.status === 204) console.log("Logout realizado com sucesso");
-                    console.log('Logout realizado com sucesso');
+        else if (response.status === 401) console.log("Token inválido ou expirado");
-                } else if (response.status === 401) {
+        else {
-                    console.log('Token inválido ou expirado');
-                } else {
           try {
             const errorData = await response.json();
-                        console.error('Erro no logout:', errorData);
+            console.error("Erro no logout:", errorData);
           } catch {
-                        console.error('Erro no logout - status:', response.status);
+            console.error("Erro no logout - status:", response.status);
           }
         }
       }
 
       clearAuthData();
-            navigate('/login');
+      navigate("/login");
-
     } catch (error) {
-            console.error('Erro durante logout:', error);
+      console.error("Erro durante logout:", error);
       clearAuthData();
-            navigate('/login');
+      navigate("/login");
     } finally {
       setShowLogoutModal(false);
     }
   };
 
   const clearAuthData = () => {
-        localStorage.removeItem('token');
+    ["token","authToken","userToken","access_token","user","auth","userData"].forEach(key => {
-        localStorage.removeItem('authToken');
+      localStorage.removeItem(key);
-        localStorage.removeItem('userToken');
+      sessionStorage.removeItem(key);
-        localStorage.removeItem('access_token');
+    });
-        localStorage.removeItem('user');
-        localStorage.removeItem('auth');
-        localStorage.removeItem('userData');
-
-        sessionStorage.removeItem('token');
-        sessionStorage.removeItem('authToken');
-        sessionStorage.removeItem('userToken');
-        sessionStorage.removeItem('access_token');
-        sessionStorage.removeItem('user');
-        sessionStorage.removeItem('auth');
-        sessionStorage.removeItem('userData');
 
     if (window.caches) {
       caches.keys().then(names => {
         names.forEach(name => {
-                    if (name.includes('auth') || name.includes('api')) {
+          if (name.includes("auth") || name.includes("api")) caches.delete(name);
-                        caches.delete(name);
-                    }
         });
       });
     }
   };
 
-    const handleLogoutCancel = () => {
+  const handleLogoutCancel = () => setShowLogoutModal(false);
-        setShowLogoutModal(false);
-    };
 
   const renderLink = (item) => {
     if (item.url && item.url.startsWith("/")) {
@@ -106,14 +100,8 @@ function Sidebar({ menuItems }) {
         </Link>
       );
     }
-
     return (
-            <a
+      <a href={item.url} className="sidebar-link" target="_blank" rel="noreferrer">
-                href={item.url}
-                className="sidebar-link"
-                target="_blank"
-                rel="noreferrer"
-            >
         {item.icon && <i className={`bi bi-${item.icon}`}></i>}
         <span>{item.name}</span>
       </a>
@@ -122,38 +110,63 @@ function Sidebar({ menuItems }) {
 
   return (
     <>
+      {/* Toggle e backdrop para mobile */}
+      {isMobile && <MobileMenuToggle isOpen={isActive} onToggle={toggleSidebar} />}
+      {isMobile && isActive && (
+        <div
+          className="sidebar-backdrop"
+          onClick={toggleSidebar}
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            backgroundColor: "rgba(0,0,0,0.5)",
+            zIndex: 1040,
+          }}
+        />
+      )}
+
+      {/* Modal de Logout */}
       {showLogoutModal && (
-                <div className="modal-overlay" style={{
+        <div
-                    position: 'fixed',
+          className="modal-overlay"
+          style={{
+            position: "fixed",
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
-                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backgroundColor: "rgba(0,0,0,0.5)",
-                    display: 'flex',
+            display: "flex",
-                    justifyContent: 'center',
+            justifyContent: "center",
-                    alignItems: 'center',
+            alignItems: "center",
-                    zIndex: 9999
+            zIndex: 9999,
-                }}>
+          }}
-                    <div className="modal-content" style={{
+        >
-                        backgroundColor: 'white',
+          <div
-                        padding: '2rem',
+            className="modal-content"
-                        borderRadius: '8px',
+            style={{
-                        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+              backgroundColor: "white",
-                        maxWidth: '400px',
+              padding: "2rem",
-                        width: '90%'
+              borderRadius: "8px",
-                    }}>
+              boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
-                        <h3 style={{ marginBottom: '1rem' }}>Confirmar Logout</h3>
+              maxWidth: "400px",
-                        <p style={{ marginBottom: '2rem' }}>Tem certeza que deseja encerrar a sessão?</p>
+              width: "90%",
-                        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'flex-end' }}>
+            }}
+          >
+            <h3 style={{ marginBottom: "1rem" }}>Confirmar Logout</h3>
+            <p style={{ marginBottom: "2rem" }}>Tem certeza que deseja encerrar a sessão?</p>
+            <div style={{ display: "flex", gap: "1rem", justifyContent: "flex-end" }}>
               <button
                 onClick={handleLogoutCancel}
                 style={{
-                                    padding: '0.5rem 1rem',
+                  padding: "0.5rem 1rem",
-                                    border: '1px solid #ccc',
+                  border: "1px solid #ccc",
-                                    borderRadius: '4px',
+                  borderRadius: "4px",
-                                    backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
-                                    cursor: 'pointer'
+                  cursor: "pointer",
                 }}
               >
                 Cancelar
@@ -161,12 +174,12 @@ function Sidebar({ menuItems }) {
               <button
                 onClick={handleLogoutConfirm}
                 style={{
-                                    padding: '0.5rem 1rem',
+                  padding: "0.5rem 1rem",
-                                    border: 'none',
+                  border: "none",
-                                    borderRadius: '4px',
+                  borderRadius: "4px",
-                                    backgroundColor: '#dc3545',
+                  backgroundColor: "#dc3545",
-                                    color: 'white',
+                  color: "white",
-                                    cursor: 'pointer'
+                  cursor: "pointer",
                 }}
               >
                 Sair
@@ -176,6 +189,7 @@ function Sidebar({ menuItems }) {
         </div>
       )}
 
+      {/* Sidebar */}
       <div id="sidebar" className={isActive ? "active" : ""}>
         <div className="sidebar-wrapper active">
           <div className="sidebar-header">
@@ -199,20 +213,21 @@ function Sidebar({ menuItems }) {
 
           <div className="sidebar-menu">
             <ul className="menu">
-                            {menuItems && menuItems.map((item, index) => {
+              {menuItems &&
-                                if (item.isTitle) {
+                menuItems.map((item, index) => {
+                  if (item.isTitle)
                     return (
                       <li key={index} className="sidebar-title">
                         {item.name}
                       </li>
                     );
-                                }
 
-                                if (item.submenu) {
+                  if (item.submenu)
                     return (
                       <li
                         key={index}
-                                            className={`sidebar-item has-sub ${openSubmenu === item.key ? "active" : ""
+                        className={`sidebar-item has-sub ${
+                          openSubmenu === item.key ? "active" : ""
                         }`}
                       >
                         <button
@@ -224,7 +239,8 @@ function Sidebar({ menuItems }) {
                           <span>{item.name}</span>
                         </button>
                         <ul
-                                                className={`submenu ${openSubmenu === item.key ? "active" : ""
+                          className={`submenu ${
+                            openSubmenu === item.key ? "active" : ""
                           }`}
                         >
                           {item.submenu.map((subItem, subIndex) => (
@@ -235,7 +251,6 @@ function Sidebar({ menuItems }) {
                         </ul>
                       </li>
                     );
-                                }
 
                   return (
                     <li key={index} className="sidebar-item">
@@ -244,6 +259,7 @@ function Sidebar({ menuItems }) {
                   );
                 })}
 
+              {/* Logout */}
               <li className="sidebar-item">
                 <button
                   type="button"

src/pages/Login.jsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect, use } from 'react';
+import React, { useState, useEffect, use } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from '../components/utils/AuthProvider';   
+import { useAuth } from "../components/utils/AuthProvider";
-import API_KEY from '../components/utils/apiKeys';
+import API_KEY from "../components/utils/apiKeys";
-import { UserInfos } from '../components/utils/Functions-Endpoints/General';
+import { UserInfos } from "../components/utils/Functions-Endpoints/General";
 
 function Login({ onEnterSystem }) {
   const { setAuthTokens } = useAuth();
   const navigate = useNavigate();
   const [form, setForm] = useState({
     username: "",
-        password: ""
+    password: "",
   });
   const [alert, setAlert] = useState("");
   const [showPassword, setShowPassword] = useState(false);
@@ -93,41 +93,40 @@ function Login({ onEnterSystem }) {
       myHeaders.append("Content-Type", "application/json");
 
       var raw = JSON.stringify({
-            "email": form.username,
+        email: form.username,
-            "password": form.password
+        password: form.password,
       });
 
       var requestOptions = {
-            method: 'POST',
+        method: "POST",
         headers: myHeaders,
         body: raw,
 
-            redirect: 'follow'
+        redirect: "follow",
       };
 
-            const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", requestOptions);
+      const response = await fetch(
+        "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password",
+        requestOptions
+      );
       const data = await response.json();
       setAuthTokens(data);
       console.log(data);
 
-          
       if (data.access_token) {
-             
-
         const UserData = await UserInfos(`bearer ${data.access_token}`);
-               console.log(UserData, 'Dados do usuário');
+        console.log(UserData, "Dados do usuário");
 
-            if(UserData?.roles?.includes('admin')){
+        if (UserData?.roles?.includes("admin")) {
           navigate(`/admin/`);
-        } else if(UserData?.roles?.includes('secretaria')){
+        } else if (UserData?.roles?.includes("secretaria")) {
           navigate(`/secretaria/`);
-        } else if(UserData?.roles?.includes('medico')){
+        } else if (UserData?.roles?.includes("medico")) {
           navigate(`/medico/`);
-        } else if(UserData?.roles?.includes('financeiro')){
+        } else if (UserData?.roles?.includes("financeiro")) {
           navigate(`/financeiro/`);
         }
       }
-
     } else {
       setAlert("Preencha todos os campos!");
     }
@@ -136,9 +135,9 @@ function Login({ onEnterSystem }) {
   return (
     <>
       <div className="mt-3 card-position">
-        <div className="col-lg-5 col-12">
+        <div className="col-lg-5 col-md-7 col-sm-9 col-12 mx-auto">
           <div className="card shadow-sm d-flex justify-content-between align-items-center">
-            <div id="auth-left">
+            <div id="auth-left" className="w-100">
               <div className="auth-logo">
                 <br />
                 <Link to="/">
@@ -185,11 +184,21 @@ function Login({ onEnterSystem }) {
                   <button
                     type="button"
                     className="btn btn-sm"
-                        style={{ position: "absolute", right: "10px", top: "10px", background: "none", border: "none" }}
+                    style={{
+                      position: "absolute",
+                      right: "10px",
+                      top: "10px",
+                      background: "none",
+                      border: "none",
+                    }}
                     onClick={() => setShowPassword(!showPassword)}
                     tabIndex={-1}
                   >
-                        <i className={`bi ${showPassword ? "bi-eye-slash" : "bi-eye"}`}></i>
+                    <i
+                      className={`bi ${
+                        showPassword ? "bi-eye-slash" : "bi-eye"
+                      }`}
+                    ></i>
                   </button>
                 </div>
                 <div className="form-check form-check-lg d-flex align-items-end">
@@ -206,20 +215,23 @@ function Login({ onEnterSystem }) {
                     Manter-me conectado
                   </label>
                 </div>
-                <button type="submit" className="btn btn-primary btn-block btn-lg shadow-lg mt-5" >
+                <button
+                  type="submit"
+                  className="btn btn-primary btn-block btn-lg shadow-lg mt-5"
+                >
                   Entrar
                 </button>
               </form>
               <div className="text-center mt-5 text-lg fs-4">
                 <p className="text-gray-600">
                   Não tem uma conta?
-                    <Link className="font-bold" to={'/register'}>
+                  <Link className="font-bold" to={"/register"}>
                     Cadastre-se
                   </Link>
                   .
                 </p>
                 <p>
-                    <Link className="font-bold" to={'/forgotPassword'}>
+                  <Link className="font-bold" to={"/forgotPassword"}>
                     Esqueceu a senha?
                   </Link>
                   .

src/pages/style/LandingPage.css

@@ -21,6 +21,31 @@
     z-index: 1000;
 }
 
+/* Responsividade do cabeçalho */
+@media screen and (max-width: 1199px) {
+    .landing-header {
+        padding: 12px 30px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .landing-header {
+        padding: 10px 20px;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .landing-header {
+        padding: 8px 15px;
+        flex-direction: column;
+        gap: 15px;
+        position: relative;
+        padding-bottom: 15px;
+    }
+}
+
 /* Estilo para a logo DENTRO do cabeçalho da Landing Page */
 .landing-header .logo h1 {
     font-size: 1.8em;
@@ -30,6 +55,38 @@
     padding: 0; /* Remove padding */
 }
 
+@media screen and (max-width: 768px) {
+    .landing-header .logo h1 {
+        font-size: 1.5em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .landing-header .logo h1 {
+        font-size: 1.3em;
+    }
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+@media screen and (max-width: 768px) {
+    .nav-menu {
+        gap: 15px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .nav-menu {
+        justify-content: center;
+        width: 100%;
+    }
+}
+
 .nav-menu a {
     text-decoration: none;
     color: #333;
@@ -38,6 +95,19 @@
     transition: color 0.2s;
 }
 
+@media screen and (max-width: 768px) {
+    .nav-menu a {
+        margin-left: 0;
+        font-size: 0.9em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .nav-menu a {
+        font-size: 0.85em;
+    }
+}
+
 .nav-menu a:hover {
     color: #5b56f8;
 }
@@ -56,6 +126,21 @@
     font-weight: 600;
 }
 
+@media screen and (max-width: 768px) {
+    .access-button {
+        margin-left: 0;
+        padding: 8px 15px;
+        font-size: 0.9em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .access-button {
+        padding: 10px 20px;
+        font-size: 0.85em;
+    }
+}
+
 /* --- Área de Destaque (Hero Section) --- */
 .hero-section {
     display: flex;
@@ -68,11 +153,45 @@
     padding-top: 100px;
 }
 
+/* Responsividade da hero section */
+@media screen and (max-width: 1199px) {
+    .hero-section {
+        padding: 80px 30px;
+        min-height: 500px;
+        padding-top: 80px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .hero-section {
+        padding: 60px 20px;
+        min-height: 400px;
+        padding-top: 80px;
+        justify-content: center;
+        text-align: center;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .hero-section {
+        padding: 40px 15px;
+        min-height: 350px;
+        padding-top: 100px;
+    }
+}
+
 .hero-content {
     max-width: 700px;
     text-align: left;
 }
 
+@media screen and (max-width: 768px) {
+    .hero-content {
+        max-width: 100%;
+        text-align: center;
+    }
+}
+
 /* Título Branco e Legível */
 .hero-content .hero-title {
     font-size: 3.5em;
@@ -82,12 +201,48 @@
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
 
+@media screen and (max-width: 1199px) {
+    .hero-content .hero-title {
+        font-size: 3em;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .hero-content .hero-title {
+        font-size: 2.5em;
+        margin-bottom: 15px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .hero-content .hero-title {
+        font-size: 2em;
+        margin-bottom: 12px;
+        line-height: 1.2;
+    }
+}
+
 .hero-content p {
     font-size: 1.2em;
     margin-bottom: 30px;
     color: #ddd;
 }
 
+@media screen and (max-width: 768px) {
+    .hero-content p {
+        font-size: 1.1em;
+        margin-bottom: 25px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .hero-content p {
+        font-size: 1em;
+        margin-bottom: 20px;
+        line-height: 1.4;
+    }
+}
+
 .main-action-button {
     background-color: #5b56f8;
     color: white;
@@ -100,6 +255,22 @@
     transition: background-color 0.3s;
 }
 
+@media screen and (max-width: 768px) {
+    .main-action-button {
+        padding: 12px 25px;
+        font-size: 1em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .main-action-button {
+        padding: 12px 20px;
+        font-size: 0.9em;
+        width: 100%;
+        max-width: 250px;
+    }
+}
+
 .main-action-button:hover {
     background-color: #4540d6;
 }