/*ipad------------------------------------------*/
@media (min-width: 768px) and (max-width: 1000px) {
:root {
    --padding-space: 10vw;
  }
  #title {
      font-size: 1.8rem !important;
  }
 
  nav{
    padding: var(--gap-sm) var(--padding-space);
    
    height: auto !important;
  }

  #nav-mobile{
    position: relative;
  }

  nav,
  nav .container-space,
  #modal-header{
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  #nav-mobile,
  #mobile-menu,
  #mobile-menu-dropdown{
      display: flex;

  }

  #container-modal {
    width: 80vw;
  }


  #mobile-menu-dropdown .container-column{
    width: 100%;
    gap: 0;
  }

  #mobile-menu-dropdown .nav-link{
    align-items: center;
    text-align: center;
    width: 100% !important;
    padding: var(--gap-md) 0 !important;
    border-bottom: 1px solid var(--gray-100) !important;
  }

  .nav-link .active{
    border-bottom: 0px !important;
  }

  .container-space{
    flex-direction: column;
    gap: var(--gap-md);
  }

.vector-corner-images{
  height: 15vh;
}

  span *{
    text-wrap: nowrap;
  }

  #sobre .container-column {
    margin-left: 0;
    align-items: center;
  }

  #sobre{
    height: auto;
    justify-content: flex-start;
  }

  #sobre-image{
    width: 30vw;
    bottom: 0;

  }

  #saiba-mais-cards-container{
    flex-direction: column;
  }

  #ppas p {
    margin-right: 0;
  }

  #ppa-image-top {
      top: -1rem;
      right: -4rem;
      width: 14rem;
  }

  #ppa-image-bottom {
      bottom: -1rem;
      left: -4rem;
      width: 14rem;
  }

  #container-footer-info{
    padding: var(--gap-xl) var(--padding-space);
  }

  footer .vector-corner-images {
      height: 10vh;
  }

  #container-footer-info{
    align-items: flex-start;
  }


  #container-footer-info .container-row{
    width: 100%;
    justify-content: space-between;
    gap: var(--gap-xs);
  }
  
  #nav-link-container,
  nav .button-default{
    display: none;
  }

  #footer-info,
  #contact-info{
      width: auto
  }

  #contact-info{
    flex-direction: row-reverse;
    gap: var(--gap-md);
  }

  #contact-info *{
    text-align: start;
  }

  #contact-info .button-default{
    min-width: 50%;
    display: flex;
    justify-content: center;
  }

    #rights{
    gap: var(--gap-sm);
  }

}
/*mobile------------------------------------------*/

@media (max-width: 767px) {
  :root {
    --padding-space: 10vw;
  }

  nav{
    padding: var(--gap-sm) var(--padding-space);
    
    height: auto !important;
  }

  #nav-mobile{
    position: relative;
  }

  #nav-mobile,
  #mobile-menu,
  #mobile-menu-dropdown{
      display: flex;

  }

   nav,
  nav .container-space,
  #modal-header{
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  #mobile-menu-dropdown .container-column{
    width: 100%;
    gap: 0;
  }

  #mobile-menu-dropdown .nav-link{
    font-size: 1rem !important;
    align-items: center;
    text-align: center;
    width: 100% !important;
    padding: var(--gap-md) 0 !important;
    border-bottom: 1px solid var(--gray-100) !important;
  }

  .nav-link .active{
    border-bottom: 0px !important;
  }

  .container-space{
    flex-direction: column;
    gap: var(--gap-md);
  }

  #title,
  h1 {
    font-size: 1.2rem !important;
  }

  a,
  small{
  font-size: 0.8rem !important;
  }

.vector-corner-images{
  height: 15vh;
}

  span *{
    text-wrap: nowrap;
  }

  #sobre .container-column {
    margin-left: 0;
    align-items: center;
  }

  p,
  label,
  li {
    font-size: 0.9rem !important;

  }

  #sobre{
    justify-content: flex-start;
  }

  #sobre-image{
    width: 80vw;
    bottom: -8rem;

  }

  #saiba-mais-cards-container{
    flex-direction: column;
  }

  #ppas p {
    margin-right: 0;
  }

  #ppa-image-top {
      top: -1rem;
      right: -4rem;
      width: 14rem;
  }

  #ppa-image-bottom {
      bottom: -1rem;
      left: -4rem;
      width: 14rem;
  }

  #container-footer-info{
    padding: var(--gap-xl) var(--padding-space);
  }

  footer .vector-corner-images {
      height: 10vh;
  }

  .image-lg{
    width: 100%;
  }

  #container-footer-info .container-row{
    width: 100%;
    justify-content: space-between;
    gap: var(--gap-xs);
  }

  .button-default{
    display: flex;
    width: 100% !important;
    justify-content: center;
  }

  #rights{
    gap: var(--gap-md);
  }

  #nav-link-container,
  nav .button-default{
    display: none;
  }

  #footer-info,
  #contact-info {
      width: 100%;
  }

   #container-modal {
    width: 80vw;
  }

  #container-modal span{
   flex-direction: column;
   align-items: flex-start;
  }

}