@media screen and (min-width: 479px) {
  /* common styles */
  .title-1 {
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 639px) {
  /* common styles */
  .title-2 {
    font-size: 2rem;
  }

  .title-3 {
    font-size: 1.75rem;
  }

  .section {
    padding-block: 4rem;
  }

  .seperator {
    max-width: 16rem;
  }

  /* hero section */
  .hero-header {
    height: 280px;
  }

  .hero-login {
    min-height: 300px;
  }

  /* photo gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media screen and (min-width: 767px) {
  /* common styles */
  th,
  td {
    font-size: 1rem;
  }

  .container {
    max-width: 75%;
  }

  .container-fluid {
    padding-inline: 2rem;
  }

  .title-1 {
    font-size: 3rem;
  }

  .title-2 {
    font-size: 2.25rem;
  }

  .title-4 {
    font-size: 1.325rem;
  }

  .seperator {
    max-width: 18rem;
    margin: 2rem auto;
  }

  /* header main */
  .navbar-brand {
    font-size: 1.625rem;
  }

  /* hero section */
  .hero-header {
    height: 340px;
  }

  .hero-login {
    min-height: 340px;
  }

  /* hero content */
  .home-content .title-4 {
    margin-bottom: 3rem;
  }
}

@media screen and (min-width: 1023px) {
  /* common styles */
  .container-fluid {
    padding-inline: 3rem;
  }

  .title-1 {
    font-size: 4rem;
  }

  .title-2 {
    font-size: 2.5rem;
  }

  .title-3 {
    font-size: 1.875rem;
  }

  .title-4 {
    font-size: 1.5rem;
  }

  .text-1 {
    font-size: 1.25rem;
  }

  .section {
    padding-block: 5rem;
  }

  .seperator {
    border-bottom-width: 0.125rem;
    max-width: 20rem;
    margin: 2.25rem auto;
  }

  /* header main */
  .header-main {
    --bg-opacity: 0;
  }

  .navbar-main .container {
    padding-block: 1.5rem;
  }

  .navbar-toggle {
    display: none;
  }

  .navbar-menu-wrapper {
    --bg-opacity: 0;

    position: static;
    opacity: 1;
    visibility: visible;
    width: auto;
    padding-block: 0 !important;
  }

  .navbar-nav {
    max-width: 100%;
    margin-inline-end: 0;
    display: flex;
    align-items: center;
  }

  .nav-link {
    padding-inline: 1.25rem;
  }

  .nav-link.active,
  .nav-link:hover {
    text-underline-offset: 0.75rem;
  }

  /* hero section */
  .hero-header {
    height: 420px;
  }

  .hero-login {
    min-height: 580px;
  }

  .icon-go-down {
    font-size: 2.5rem;
  }

  /* home content */
  .home-content .title-4 {
    margin-bottom: 4rem;
  }

  /* photo gallery */
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

@media screen and (min-width: 1279px) {
  /* common styles */
  .container {
    max-width: 1200px;
  }

  .title-1 {
    font-size: 5rem;
  }

  .title-2 {
    font-size: 2.75rem;
  }

  .title-3 {
    font-size: 2rem;
  }

  .title-4 {
    font-size: 1.625rem;
  }
}

@media screen and (min-width: 1419px) {
}

@media screen and (min-width: 1559px) {
}

/**
** in mobile hide first column 
**/

@media screen and (max-width: 576px) {
  .wie-data-section table tr :nth-of-type(3) {
    display: none;
  }
  .rondjes-data-section table tr :nth-of-type(3) {
    display: none;
  }    
  .banen-data-section table tr :nth-of-type(2) {
    display: none;
  }
  .banen-data-section table tr :nth-of-type(3) {
    display: none;
  }    
  .agenda-data-section table tr :nth-of-type(2) {
    display: none;
  }
  .agenda-data-section table tr :nth-of-type(3) {
    display: none;
  }   
  
}

/**
** here 1 inside nth-of-type is the column number
** if you want other particular column to hide use 
** the colum number like - 2, 3, 4, etc
**
**/

/* @media screen and (max-width: 576px) {
  .wie-data-section table tr :nth-of-type(4) {
    display: none;
  }
} */